diff --git a/.changeset/tender-berries-wave.md b/.changeset/tender-berries-wave.md
new file mode 100644
index 000000000..47c4851af
--- /dev/null
+++ b/.changeset/tender-berries-wave.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: Updated internal import paths to support modern module resolution strategies
diff --git a/content/components/accordion.md b/content/components/accordion.md
index 53e3d8d4c..bdce48e00 100644
--- a/content/components/accordion.md
+++ b/content/components/accordion.md
@@ -4,7 +4,7 @@ description: Organizes content into collapsible sections, allowing users to focu
 ---
 
 <script>
-	import { APISection, ComponentPreview, AccordionDemo } from '@/components'
+	import { APISection, ComponentPreview, AccordionDemo } from '@/components/index.js'
 	export let schemas
 </script>
 
diff --git a/content/components/alert-dialog.md b/content/components/alert-dialog.md
index b309b91e2..dbef15248 100644
--- a/content/components/alert-dialog.md
+++ b/content/components/alert-dialog.md
@@ -4,7 +4,7 @@ description: A modal window that alerts users with important information and awa
 ---
 
 <script>
-	import { APISection, ComponentPreview, AlertDialogDemo } from '@/components'
+	import { APISection, ComponentPreview, AlertDialogDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/aspect-ratio.md b/content/components/aspect-ratio.md
index d10fd6e9e..36fa03fc4 100644
--- a/content/components/aspect-ratio.md
+++ b/content/components/aspect-ratio.md
@@ -4,7 +4,7 @@ description: Displays content while maintaining a specified aspect ratio, ensuri
 ---
 
 <script>
-	import { APISection, ComponentPreview, AspectRatioDemo } from '@/components'
+	import { APISection, ComponentPreview, AspectRatioDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/avatar.md b/content/components/avatar.md
index c2b7c0fba..ae732eefe 100644
--- a/content/components/avatar.md
+++ b/content/components/avatar.md
@@ -4,7 +4,7 @@ description: Represents a user or entity with a recognizable image or placeholde
 ---
 
 <script>
-	import { APISection, ComponentPreview, AvatarDemo } from '@/components'
+	import { APISection, ComponentPreview, AvatarDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/button.md b/content/components/button.md
index d15b6b5fe..2cc4b462d 100644
--- a/content/components/button.md
+++ b/content/components/button.md
@@ -4,7 +4,7 @@ description: A special button component that can receive Melt UI builders for us
 ---
 
 <script>
-	import { APISection, ComponentPreview, ButtonDemo } from '@/components'
+	import { APISection, ComponentPreview, ButtonDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/calendar.md b/content/components/calendar.md
index ba85c070f..8feed59b5 100644
--- a/content/components/calendar.md
+++ b/content/components/calendar.md
@@ -4,7 +4,7 @@ description: Displays dates and days of the week, facilitating date-related inte
 ---
 
 <script>
-	import { APISection, ComponentPreview, CalendarDemo } from '@/components'
+	import { APISection, ComponentPreview, CalendarDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/checkbox.md b/content/components/checkbox.md
index dd6dc4884..7179102c2 100644
--- a/content/components/checkbox.md
+++ b/content/components/checkbox.md
@@ -4,7 +4,7 @@ description: Allow users to switch between checked, unchecked, and indeterminate
 ---
 
 <script>
-	import { APISection, ComponentPreview, CheckboxDemo } from '@/components'
+	import { APISection, ComponentPreview, CheckboxDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/collapsible.md b/content/components/collapsible.md
index 294f0620e..4f5fb669e 100644
--- a/content/components/collapsible.md
+++ b/content/components/collapsible.md
@@ -4,7 +4,7 @@ description: Conceals or reveals content sections, enhancing space utilization a
 ---
 
 <script>
-	import { APISection, ComponentPreview, CollapsibleDemo } from '@/components'
+	import { APISection, ComponentPreview, CollapsibleDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/combobox.md b/content/components/combobox.md
index 4a27cf8c4..c10258969 100644
--- a/content/components/combobox.md
+++ b/content/components/combobox.md
@@ -4,7 +4,7 @@ description: Enables users to pick from a list of options displayed in a dropdow
 ---
 
 <script>
-	import { APISection, ComponentPreview, ComboboxDemo } from '@/components'
+	import { APISection, ComponentPreview, ComboboxDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/context-menu.md b/content/components/context-menu.md
index 6dc242802..c30a34425 100644
--- a/content/components/context-menu.md
+++ b/content/components/context-menu.md
@@ -4,7 +4,7 @@ description: Displays options or actions relevant to a specific context or selec
 ---
 
 <script>
-	import { APISection, ComponentPreview, ContextMenuDemo } from '@/components'
+	import { APISection, ComponentPreview, ContextMenuDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/date-field.md b/content/components/date-field.md
index 4053b4f6a..2e8e339ae 100644
--- a/content/components/date-field.md
+++ b/content/components/date-field.md
@@ -4,7 +4,7 @@ description: Enables users to input specific dates within a designated field.
 ---
 
 <script>
-	import { APISection, ComponentPreview, DateFieldDemo } from '@/components'
+	import { APISection, ComponentPreview, DateFieldDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/date-picker.md b/content/components/date-picker.md
index 51b6a500d..31fc7c369 100644
--- a/content/components/date-picker.md
+++ b/content/components/date-picker.md
@@ -4,7 +4,7 @@ description: Facilitates the selection of dates through an input and calendar-ba
 ---
 
 <script>
-	import { APISection, ComponentPreview, DatePickerDemo } from '@/components'
+	import { APISection, ComponentPreview, DatePickerDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/date-range-field.md b/content/components/date-range-field.md
index 3c25f8970..9670bfa06 100644
--- a/content/components/date-range-field.md
+++ b/content/components/date-range-field.md
@@ -4,7 +4,7 @@ description: Allows users to input a range of dates within a designated field.
 ---
 
 <script>
-	import { APISection, ComponentPreview, DateRangeFieldDemo } from '@/components'
+	import { APISection, ComponentPreview, DateRangeFieldDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/date-range-picker.md b/content/components/date-range-picker.md
index beb0e4b23..2057cc602 100644
--- a/content/components/date-range-picker.md
+++ b/content/components/date-range-picker.md
@@ -4,7 +4,7 @@ description: Facilitates the selection of date ranges through an input and calen
 ---
 
 <script>
-	import { APISection, ComponentPreview, DateRangePickerDemo } from '@/components'
+	import { APISection, ComponentPreview, DateRangePickerDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/dialog.md b/content/components/dialog.md
index bee150466..24bb5b8f1 100644
--- a/content/components/dialog.md
+++ b/content/components/dialog.md
@@ -4,7 +4,7 @@ description: A modal window presenting content or seeking user input without nav
 ---
 
 <script>
-	import { APISection, ComponentPreview, DialogDemo } from '@/components'
+	import { APISection, ComponentPreview, DialogDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/dropdown-menu.md b/content/components/dropdown-menu.md
index 29561cffa..28764acde 100644
--- a/content/components/dropdown-menu.md
+++ b/content/components/dropdown-menu.md
@@ -4,7 +4,7 @@ description: Displays a menu of items that users can select from when triggered.
 ---
 
 <script>
-	import { APISection, ComponentPreview, DropdownMenuDemo } from '@/components'
+	import { APISection, ComponentPreview, DropdownMenuDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/label.md b/content/components/label.md
index 4126e3184..49a9fec8b 100644
--- a/content/components/label.md
+++ b/content/components/label.md
@@ -4,7 +4,7 @@ description: Identifies or describes associated UI elements.
 ---
 
 <script>
-	import { APISection, ComponentPreview, LabelDemo } from '@/components'
+	import { APISection, ComponentPreview, LabelDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/link-preview.md b/content/components/link-preview.md
index 3759aa481..44700313d 100644
--- a/content/components/link-preview.md
+++ b/content/components/link-preview.md
@@ -4,7 +4,7 @@ description: Displays a summarized preview of a linked content's details or info
 ---
 
 <script>
-	import { APISection, ComponentPreview, LinkPreviewDemo } from '@/components'
+	import { APISection, ComponentPreview, LinkPreviewDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/menubar.md b/content/components/menubar.md
index f18cde7f4..7d289e09b 100644
--- a/content/components/menubar.md
+++ b/content/components/menubar.md
@@ -4,7 +4,7 @@ description: Organizes and presents a collection of menu options or actions with
 ---
 
 <script>
-	import { APISection, ComponentPreview, MenubarDemo } from '@/components'
+	import { APISection, ComponentPreview, MenubarDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/pagination.md b/content/components/pagination.md
index 2c15f9b1a..21e244b4d 100644
--- a/content/components/pagination.md
+++ b/content/components/pagination.md
@@ -4,7 +4,7 @@ description: Facilitates navigation between pages.
 ---
 
 <script>
-	import { APISection, ComponentPreview, PaginationDemo } from '@/components'
+	import { APISection, ComponentPreview, PaginationDemo } from '@/components/index.js'
 	export let schemas
 </script>
 
diff --git a/content/components/pin-input.md b/content/components/pin-input.md
index 28a6ae9ca..cf8975039 100644
--- a/content/components/pin-input.md
+++ b/content/components/pin-input.md
@@ -4,7 +4,7 @@ description: Allows users to input a sequence of one-character alphanumeric inpu
 ---
 
 <script>
-	import { APISection, ComponentPreview, PinInputDemo } from '@/components'
+	import { APISection, ComponentPreview, PinInputDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/popover.md b/content/components/popover.md
index 5c50ff85f..28667f1fe 100644
--- a/content/components/popover.md
+++ b/content/components/popover.md
@@ -4,7 +4,7 @@ description: Display supplementary content or information when users interact wi
 ---
 
 <script>
-	import { APISection, ComponentPreview, PopoverDemo } from '@/components'
+	import { APISection, ComponentPreview, PopoverDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/progress.md b/content/components/progress.md
index 5e320640f..697183573 100644
--- a/content/components/progress.md
+++ b/content/components/progress.md
@@ -4,7 +4,7 @@ description: Visualizes the progress or completion status of a task or process.
 ---
 
 <script>
-	import { APISection, ComponentPreview, ProgressDemo } from '@/components'
+	import { APISection, ComponentPreview, ProgressDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/radio-group.md b/content/components/radio-group.md
index 65a080615..1311e65fb 100644
--- a/content/components/radio-group.md
+++ b/content/components/radio-group.md
@@ -4,7 +4,7 @@ description: Allows users to select a single option from a list of mutually excl
 ---
 
 <script>
-	import { APISection, ComponentPreview, RadioGroupDemo } from '@/components'
+	import { APISection, ComponentPreview, RadioGroupDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/range-calendar.md b/content/components/range-calendar.md
index 39c0c4e5c..173de40df 100644
--- a/content/components/range-calendar.md
+++ b/content/components/range-calendar.md
@@ -4,7 +4,7 @@ description: Presents a calendar view tailored for selecting date ranges.
 ---
 
 <script>
-	import { APISection, ComponentPreview, RangeCalendarDemo } from '@/components'
+	import { APISection, ComponentPreview, RangeCalendarDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/select.md b/content/components/select.md
index 3c408386b..5ee92f89b 100644
--- a/content/components/select.md
+++ b/content/components/select.md
@@ -4,7 +4,7 @@ description: Enables users to choose from a list of options presented in a dropd
 ---
 
 <script>
-	import { APISection, ComponentPreview, SelectDemo } from '@/components'
+	import { APISection, ComponentPreview, SelectDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/separator.md b/content/components/separator.md
index 2fe5bd968..ce8c442b6 100644
--- a/content/components/separator.md
+++ b/content/components/separator.md
@@ -4,7 +4,7 @@ description: Visually separates content or UI elements for clarity and organizat
 ---
 
 <script>
-	import { APISection, ComponentPreview, SeparatorDemo } from '@/components'
+	import { APISection, ComponentPreview, SeparatorDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/slider.md b/content/components/slider.md
index fda33c6e7..73f20315d 100644
--- a/content/components/slider.md
+++ b/content/components/slider.md
@@ -4,7 +4,7 @@ description: Allows users to select a value from a continuous range by sliding a
 ---
 
 <script>
-	import { APISection, ComponentPreview, SliderDemo } from '@/components'
+	import { APISection, ComponentPreview, SliderDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/switch.md b/content/components/switch.md
index dc4e0662b..31de798bb 100644
--- a/content/components/switch.md
+++ b/content/components/switch.md
@@ -4,7 +4,7 @@ description: A toggle control enabling users to switch between "on" and "off" st
 ---
 
 <script>
-	import { APISection, ComponentPreview, SwitchDemo } from '@/components'
+	import { APISection, ComponentPreview, SwitchDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/tabs.md b/content/components/tabs.md
index 1b6164d9a..05c3eef09 100644
--- a/content/components/tabs.md
+++ b/content/components/tabs.md
@@ -4,7 +4,7 @@ description: Organizes content into distinct sections, allowing users to switch
 ---
 
 <script>
-	import { APISection, ComponentPreview, TabsDemo } from '@/components'
+	import { APISection, ComponentPreview, TabsDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/toggle-group.md b/content/components/toggle-group.md
index 9dd4fb695..d16a46e3a 100644
--- a/content/components/toggle-group.md
+++ b/content/components/toggle-group.md
@@ -4,7 +4,7 @@ description: A control element that switches between two states, providing a bin
 ---
 
 <script>
-	import { APISection, ComponentPreview, ToggleGroupDemo } from '@/components'
+	import { APISection, ComponentPreview, ToggleGroupDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/toggle.md b/content/components/toggle.md
index 3b718e4d4..bdbb70771 100644
--- a/content/components/toggle.md
+++ b/content/components/toggle.md
@@ -4,7 +4,7 @@ description: Groups multiple toggle controls, allowing users to enable one or mu
 ---
 
 <script>
-	import { APISection, ComponentPreview, ToggleDemo } from '@/components'
+	import { APISection, ComponentPreview, ToggleDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/toolbar.md b/content/components/toolbar.md
index 79b8845cb..13cc72489 100644
--- a/content/components/toolbar.md
+++ b/content/components/toolbar.md
@@ -4,7 +4,7 @@ description: Displays frequently used actions or tools in a compact, easily acce
 ---
 
 <script>
-	import { APISection, ComponentPreview, ToolbarDemo } from '@/components'
+	import { APISection, ComponentPreview, ToolbarDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/content/components/tooltip.md b/content/components/tooltip.md
index 2812ad645..52ff441a7 100644
--- a/content/components/tooltip.md
+++ b/content/components/tooltip.md
@@ -4,7 +4,7 @@ description: Provides additional information or context when users hover over or
 ---
 
 <script>
-	import { ComponentPreview, TooltipDemo, APISection } from '@/components'
+	import { ComponentPreview, TooltipDemo, APISection } from '@/components/index.js'
 	export let schemas;
 </script>
 
diff --git a/mdsvex.config.js b/mdsvex.config.js
index 3ba998ebf..eaa2b8e3c 100644
--- a/mdsvex.config.js
+++ b/mdsvex.config.js
@@ -142,7 +142,10 @@ function getComponentSourceFileContent(src = "") {
 	// Read the source file.
 	const filePath = path.join(process.cwd(), newSrc);
 
-	const formattedSource = prettier.format(readFileSync(filePath, "utf-8"), codeBlockPrettierConfig);
+	/** @type {string} */
+	let formattedSource = prettier.format(readFileSync(filePath, "utf-8"), codeBlockPrettierConfig);
+
+	formattedSource = formattedSource.replaceAll(`"$lib/index.js";`, `"bits-ui";`);
 
 	return formattedSource;
 }
diff --git a/package.json b/package.json
index e99ff9555..bc1979053 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "@playwright/test": "^1.28.1",
     "@sveltejs/adapter-vercel": "^5.1.0",
     "@sveltejs/kit": "^2.5.0",
-    "@sveltejs/package": "^2.2.6",
+    "@sveltejs/package": "^2.2.7",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@tailwindcss/typography": "^0.5.10",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eb4834448..97f5988d2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,8 +35,8 @@ devDependencies:
     specifier: ^2.5.0
     version: 2.5.0(@sveltejs/vite-plugin-svelte@3.0.2)(svelte@4.2.9)(vite@5.0.12)
   '@sveltejs/package':
-    specifier: ^2.2.6
-    version: 2.2.6(svelte@4.2.9)(typescript@5.3.3)
+    specifier: ^2.2.7
+    version: 2.2.7(svelte@4.2.9)(typescript@5.3.3)
   '@sveltejs/vite-plugin-svelte':
     specifier: ^3.0.2
     version: 3.0.2(svelte@4.2.9)(vite@5.0.12)
@@ -1562,14 +1562,14 @@ packages:
       vite: 5.0.12
     dev: true
 
-  /@sveltejs/package@2.2.6(svelte@4.2.9)(typescript@5.3.3):
-    resolution: {integrity: sha512-rhKL/96M7LCvFI2xN94qsqHtEWr/ypcMGiii3s6dRW7ADt3tiDm8UfExjRR8v5jW3Femz0+VJ0TNevxI4Q9Quw==}
+  /@sveltejs/package@2.2.7(svelte@4.2.9)(typescript@5.3.3):
+    resolution: {integrity: sha512-/vvmrQO2mMvROdM/iGRHtRn+ValnK9xzB50pqRcX0IvoeVoTq7uhYf+KifrZTluBA+km6AX/WXRXajrgrgbmvw==}
     engines: {node: ^16.14 || >=18}
     hasBin: true
     peerDependencies:
       svelte: ^3.44.0 || ^4.0.0 || ^5.0.0-next.1
     dependencies:
-      chokidar: 3.5.3
+      chokidar: 3.6.0
       kleur: 4.1.5
       sade: 1.8.1
       semver: 7.5.4
@@ -2504,6 +2504,21 @@ packages:
       fsevents: 2.3.3
     dev: true
 
+  /chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
   /chownr@2.0.0:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
     engines: {node: '>=10'}
diff --git a/src/components/api-ref/data-attr-value-content.svelte b/src/components/api-ref/data-attr-value-content.svelte
index 0879eb7a9..41d21bab3 100644
--- a/src/components/api-ref/data-attr-value-content.svelte
+++ b/src/components/api-ref/data-attr-value-content.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Popover } from "$lib";
-	import { flyAndScale } from "@/utils";
-	import { Code } from "@/components";
+	import { Popover } from "$lib/index.js";
+	import { flyAndScale } from "@/utils/index.js";
+	import { Code } from "@/components/index.js";
 	import { Info } from "$icons/index.js";
-	import type { DataAttrSchema } from "@/types";
+	import type { DataAttrSchema } from "@/types/index.js";
 
 	export let attr: DataAttrSchema;
 </script>
diff --git a/src/components/api-ref/data-attrs-table.svelte b/src/components/api-ref/data-attrs-table.svelte
index 6a0bd569d..d3173838e 100644
--- a/src/components/api-ref/data-attrs-table.svelte
+++ b/src/components/api-ref/data-attrs-table.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import * as Table from "@/components/ui/table";
-	import { Code } from "@/components";
-	import { parseMarkdown } from "@/utils";
-	import type { DataAttrSchema } from "@/types";
+	import * as Table from "@/components/ui/table/index.js";
+	import { Code } from "@/components/index.js";
+	import { parseMarkdown } from "@/utils/index.js";
+	import type { DataAttrSchema } from "@/types/index.js";
 	import ValueContent from "./data-attr-value-content.svelte";
 
 	export let dataAttrs: DataAttrSchema[] = [];
diff --git a/src/components/api-ref/prop-copy.svelte b/src/components/api-ref/prop-copy.svelte
index 938c0ced4..25e41d454 100644
--- a/src/components/api-ref/prop-copy.svelte
+++ b/src/components/api-ref/prop-copy.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Popover } from "$lib";
-	import { flyAndScale } from "@/utils";
-	import { Code } from "@/components";
+	import { Popover } from "$lib/index.js";
+	import { flyAndScale } from "@/utils/index.js";
+	import { Code } from "@/components/index.js";
 
 	export let name: string;
 </script>
diff --git a/src/components/api-ref/prop-type-content.svelte b/src/components/api-ref/prop-type-content.svelte
index 3eb9dd17c..192444aca 100644
--- a/src/components/api-ref/prop-type-content.svelte
+++ b/src/components/api-ref/prop-type-content.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Popover } from "$lib";
-	import { flyAndScale, parseTypeDef } from "@/utils";
-	import { Code } from "@/components";
+	import { Popover } from "$lib/index.js";
+	import { flyAndScale, parseTypeDef } from "@/utils/index.js";
+	import { Code } from "@/components/index.js";
 	import { Info } from "$icons/index.js";
-	import type { PropType } from "@/types";
+	import type { PropType } from "@/types/index.js";
 
 	export let type: PropType | string;
 </script>
diff --git a/src/components/api-ref/props-table.svelte b/src/components/api-ref/props-table.svelte
index 4ef51964b..0eda743c3 100644
--- a/src/components/api-ref/props-table.svelte
+++ b/src/components/api-ref/props-table.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import * as Table from "@/components/ui/table";
-	import { Code } from "@/components";
-	import type { PropObj, PropSchema } from "@/types";
-	import { parseMarkdown } from "@/utils";
+	import * as Table from "@/components/ui/table/index.js";
+	import { Code } from "@/components/index.js";
+	import type { PropObj, PropSchema } from "@/types/index.js";
+	import { parseMarkdown } from "@/utils/index.js";
 	import PropTypeContent from "./prop-type-content.svelte";
 
 	export let props: PropObj<Record<string, unknown>>;
diff --git a/src/components/api-section.svelte b/src/components/api-section.svelte
index 6ad7651e0..33923ce60 100644
--- a/src/components/api-section.svelte
+++ b/src/components/api-section.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { page } from "$app/stores";
-	import { DataAttrsTable, PropsTable } from "@/components";
-	import { h2 as H2, p as P } from "@/components/markdown";
-	import type { APISchema } from "@/types";
-	import { parseMarkdown } from "@/utils";
+	import { DataAttrsTable, PropsTable } from "@/components/index.js";
+	import { h2 as H2, p as P } from "@/components/markdown/index.js";
+	import type { APISchema } from "@/types/index.js";
+	import { parseMarkdown } from "@/utils/index.js";
 
 	export let schemas: APISchema[] = [];
 </script>
diff --git a/src/components/component-preview.svelte b/src/components/component-preview.svelte
index 1de5307d9..26dd0d261 100644
--- a/src/components/component-preview.svelte
+++ b/src/components/component-preview.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Tabs } from "$lib";
-	import { cn } from "@/utils";
-	import { buttonVariants } from "./ui/button";
+	import { Tabs } from "$lib/index.js";
+	import { cn } from "@/utils/index.js";
+	import { buttonVariants } from "./ui/button/index.js";
 	import { crossfade } from "svelte/transition";
 	import { cubicInOut } from "svelte/easing";
 	let className: string;
diff --git a/src/components/copy-code-button.svelte b/src/components/copy-code-button.svelte
index 1f176db59..233be00fd 100644
--- a/src/components/copy-code-button.svelte
+++ b/src/components/copy-code-button.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 	import { CopySimple, Check } from "$icons/index.js";
 	let className: string | undefined | null = undefined;
 
diff --git a/src/components/demos/accordion-demo.svelte b/src/components/demos/accordion-demo.svelte
index bc04b957d..57c1de64a 100644
--- a/src/components/demos/accordion-demo.svelte
+++ b/src/components/demos/accordion-demo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Accordion } from "$lib";
+	import { Accordion } from "$lib/index.js";
 	import { CaretDown } from "$icons/index.js";
 	import { slide } from "svelte/transition";
 
diff --git a/src/components/demos/alert-dialog-demo.svelte b/src/components/demos/alert-dialog-demo.svelte
index 7db262f81..726a14d6c 100644
--- a/src/components/demos/alert-dialog-demo.svelte
+++ b/src/components/demos/alert-dialog-demo.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { AlertDialog } from "$lib";
-	import { flyAndScale } from "@/utils";
+	import { AlertDialog } from "$lib/index.js";
+	import { flyAndScale } from "@/utils/index.js";
 	import { fade } from "svelte/transition";
 </script>
 
diff --git a/src/components/demos/aspect-ratio-demo.svelte b/src/components/demos/aspect-ratio-demo.svelte
index 45f5ad6eb..0c0deec96 100644
--- a/src/components/demos/aspect-ratio-demo.svelte
+++ b/src/components/demos/aspect-ratio-demo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AspectRatio } from "$lib";
+	import { AspectRatio } from "$lib/index.js";
 </script>
 
 <AspectRatio.Root ratio={14 / 9} class="scale-80 rounded-[15px] bg-transparent">
diff --git a/src/components/demos/avatar-demo.svelte b/src/components/demos/avatar-demo.svelte
index 34fe009a8..06c65e95b 100644
--- a/src/components/demos/avatar-demo.svelte
+++ b/src/components/demos/avatar-demo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Avatar } from "$lib";
+	import { Avatar } from "$lib/index.js";
 	export let loadingStatus: Avatar.Props["loadingStatus"] = undefined;
 </script>
 
diff --git a/src/components/demos/button-demo.svelte b/src/components/demos/button-demo.svelte
index 21111aa73..aa653e10b 100644
--- a/src/components/demos/button-demo.svelte
+++ b/src/components/demos/button-demo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button } from "$lib";
+	import { Button } from "$lib/index.js";
 </script>
 
 <Button.Root
diff --git a/src/components/demos/calendar-demo.svelte b/src/components/demos/calendar-demo.svelte
index 8ded4f1c2..cab880dd9 100644
--- a/src/components/demos/calendar-demo.svelte
+++ b/src/components/demos/calendar-demo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Calendar } from "$lib";
+	import { Calendar } from "$lib/index.js";
 	import { CaretLeft, CaretRight } from "$icons/index.js";
 
 	const isDateUnavailable: Calendar.Props["isDateUnavailable"] = (date) => {
diff --git a/src/components/demos/checkbox-demo.svelte b/src/components/demos/checkbox-demo.svelte
index 66c603276..2d2f1b789 100644
--- a/src/components/demos/checkbox-demo.svelte
+++ b/src/components/demos/checkbox-demo.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { Checkbox } from "$lib";
-	import { Label } from "$lib";
+	import { Checkbox, Label } from "$lib/index.js";
 	import { Check, Minus } from "$icons/index.js";
 </script>
 
diff --git a/src/components/demos/collapsible-demo.svelte b/src/components/demos/collapsible-demo.svelte
index e96e61ffd..ba552b666 100644
--- a/src/components/demos/collapsible-demo.svelte
+++ b/src/components/demos/collapsible-demo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Collapsible } from "$lib";
+	import { Collapsible } from "$lib/index.js";
 	import { CaretUpDown } from "$icons/index.js";
 	import { slide } from "svelte/transition";
 </script>
diff --git a/src/components/demos/combobox-demo.svelte b/src/components/demos/combobox-demo.svelte
index 7b38b58b5..ebd92e801 100644
--- a/src/components/demos/combobox-demo.svelte
+++ b/src/components/demos/combobox-demo.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Combobox } from "$lib";
-	import { flyAndScale } from "@/utils";
+	import { Combobox } from "$lib/index.js";
+	import { flyAndScale } from "@/utils/index.js";
 	import { Check, OrangeSlice, CaretUpDown } from "$icons/index.js";
 
 	const fruits = [
diff --git a/src/components/demos/context-menu-demo.svelte b/src/components/demos/context-menu-demo.svelte
index 776c41821..d453d4970 100644
--- a/src/components/demos/context-menu-demo.svelte
+++ b/src/components/demos/context-menu-demo.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { ContextMenu } from "$lib";
-	import { flyAndScale } from "@/utils";
+	import { ContextMenu } from "$lib/index.js";
+	import { flyAndScale } from "@/utils/index.js";
 	import { PencilSimpleLine, PlusCircle, CopySimple, Trash, MouseSimple } from "$icons/index.js";
 </script>
 
diff --git a/src/components/demos/date-field-demo.svelte b/src/components/demos/date-field-demo.svelte
index a22c97d47..4a750d457 100644
--- a/src/components/demos/date-field-demo.svelte
+++ b/src/components/demos/date-field-demo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { DateField } from "$lib";
+	import { DateField } from "$lib/index.js";
 </script>
 
 <DateField.Root>
diff --git a/src/components/demos/date-picker-demo.svelte b/src/components/demos/date-picker-demo.svelte
index 31181365a..4c9ed3101 100644
--- a/src/components/demos/date-picker-demo.svelte
+++ b/src/components/demos/date-picker-demo.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { DatePicker } from "$lib";
-	import { flyAndScale } from "@/utils";
+	import { DatePicker } from "$lib/index.js";
+	import { flyAndScale } from "@/utils/index.js";
 	import { CaretLeft, CaretRight, CalendarBlank } from "$icons/index.js";
 </script>
 
diff --git a/src/components/demos/date-range-field-demo.svelte b/src/components/demos/date-range-field-demo.svelte
index 7c831b3c4..fa02b6b05 100644
--- a/src/components/demos/date-range-field-demo.svelte
+++ b/src/components/demos/date-range-field-demo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { DateRangeField } from "$lib";
+	import { DateRangeField } from "$lib/index.js";
 	import { CalendarDate } from "@internationalized/date";
 
 	let value = {
diff --git a/src/components/demos/date-range-picker-demo.svelte b/src/components/demos/date-range-picker-demo.svelte
index 9b651031e..11f60b591 100644
--- a/src/components/demos/date-range-picker-demo.svelte
+++ b/src/components/demos/date-range-picker-demo.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { DateRangePicker, type DateRange } from "$lib";
-	import { cn, flyAndScale } from "@/utils";
+	import { DateRangePicker, type DateRange } from "$lib/index.js";
+	import { cn, flyAndScale } from "@/utils/index.js";
 	import { CaretLeft, CaretRight, CalendarBlank } from "$icons/index.js";
 
 	let value: DateRange | undefined = undefined;
diff --git a/src/components/demos/dialog-demo.svelte b/src/components/demos/dialog-demo.svelte
index 7216899bb..d1f8d0665 100644
--- a/src/components/demos/dialog-demo.svelte
+++ b/src/components/demos/dialog-demo.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Dialog, Separator, Label } from "$lib";
-	import { flyAndScale } from "@/utils";
-	import { fade } from "svelte/transition";
+	import { Dialog, Separator, Label } from "$lib/index.js";
+	import { flyAndScale } from "@/utils/index.js";
 	import { X, LockKeyOpen } from "$icons/index.js";
+	import { fade } from "svelte/transition";
 </script>
 
 <Dialog.Root>
diff --git a/src/components/demos/dropdown-menu-demo.svelte b/src/components/demos/dropdown-menu-demo.svelte
index f94334332..091d74ae4 100644
--- a/src/components/demos/dropdown-menu-demo.svelte
+++ b/src/components/demos/dropdown-menu-demo.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	import { DropdownMenu } from "$lib";
-	import { Avatar } from "$lib";
-	import { flyAndScale } from "@/utils";
+	import { Avatar, DropdownMenu } from "$lib/index.js";
+	import { flyAndScale } from "@/utils/index.js";
 	import {
 		UserCircle,
 		Cardholder,
diff --git a/src/components/demos/label-demo.svelte b/src/components/demos/label-demo.svelte
index b82edfaa8..30dc866fe 100644
--- a/src/components/demos/label-demo.svelte
+++ b/src/components/demos/label-demo.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { Checkbox } from "$lib";
-	import { Label } from "$lib";
+	import { Checkbox, Label } from "$lib/index.js";
 	import { Check, Minus } from "$icons/index.js";
 </script>
 
diff --git a/src/components/demos/link-preview-demo.svelte b/src/components/demos/link-preview-demo.svelte
index 3ca70f86d..741993cba 100644
--- a/src/components/demos/link-preview-demo.svelte
+++ b/src/components/demos/link-preview-demo.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { LinkPreview, Avatar } from "$lib";
-	import { flyAndScale } from "@/utils";
+	import { LinkPreview, Avatar } from "$lib/index.js";
+	import { flyAndScale } from "@/utils/index.js";
 	import { MapPin, CalendarBlank } from "$icons/index.js";
 	let loadingStatusTrigger: Avatar.Props["loadingStatus"] = undefined;
 	let loadingStatusContent: Avatar.Props["loadingStatus"] = undefined;
diff --git a/src/components/demos/menubar-demo.svelte b/src/components/demos/menubar-demo.svelte
index 5d6c3c29d..4be6bee05 100644
--- a/src/components/demos/menubar-demo.svelte
+++ b/src/components/demos/menubar-demo.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { Menubar } from "$lib";
-	import { flyAndScale } from "@/utils";
-	import { SwitchOn, SwitchOff } from "@/components/icons";
-	import { CaretRight, Cat, Check } from "$icons/index.js";
+	import { Menubar } from "$lib/index.js";
+	import { flyAndScale } from "@/utils/index.js";
+	import { CaretRight, Cat, Check, SwitchOn, SwitchOff } from "$icons/index.js";
 
 	let bookmarks = false;
 	let fullUrls = true;
diff --git a/src/components/demos/pin-input-demo.svelte b/src/components/demos/pin-input-demo.svelte
index 688a8190a..fc1b08ffb 100644
--- a/src/components/demos/pin-input-demo.svelte
+++ b/src/components/demos/pin-input-demo.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { PinInput } from "$lib";
-	import { Toggle } from "$lib";
+	import { PinInput, Toggle } from "$lib/index.js";
 	import { Eye, EyeSlash } from "$icons/index.js";
 
 	let value: string[] | undefined = [];
diff --git a/src/components/demos/popover-demo.svelte b/src/components/demos/popover-demo.svelte
index 3c47efc5d..464a38357 100644
--- a/src/components/demos/popover-demo.svelte
+++ b/src/components/demos/popover-demo.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Popover, Separator, Toggle } from "$lib";
+	import { Popover, Separator, Toggle } from "$lib/index.js";
+	import { flyAndScale } from "@/utils/index.js";
 	import { ImageSquare, LinkSimpleHorizontalBreak } from "$icons/index.js";
-	import { flyAndScale } from "@/utils";
 
 	let width = 1024;
 	let height = 768;
diff --git a/src/components/demos/progress-demo.svelte b/src/components/demos/progress-demo.svelte
index 3b1aa60c4..ce2fc35f8 100644
--- a/src/components/demos/progress-demo.svelte
+++ b/src/components/demos/progress-demo.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
+	import { Progress } from "$lib/index.js";
 	import { onMount } from "svelte";
-	import { Progress } from "$lib";
 
 	let value = 13;
 	onMount(() => {
diff --git a/src/components/demos/radio-group-demo.svelte b/src/components/demos/radio-group-demo.svelte
index c2a8465d0..17d802a73 100644
--- a/src/components/demos/radio-group-demo.svelte
+++ b/src/components/demos/radio-group-demo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { RadioGroup, Label } from "$lib";
+	import { RadioGroup, Label } from "$lib/index.js";
 </script>
 
 <RadioGroup.Root class="flex flex-col gap-4 text-sm font-medium">
diff --git a/src/components/demos/range-calendar-demo.svelte b/src/components/demos/range-calendar-demo.svelte
index 1ea47cdb5..f3113e0ee 100644
--- a/src/components/demos/range-calendar-demo.svelte
+++ b/src/components/demos/range-calendar-demo.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { RangeCalendar } from "$lib";
-	import { cn } from "@/utils";
+	import { RangeCalendar } from "$lib/index.js";
+	import { cn } from "@/utils/index.js";
 	import { CaretRight, CaretLeft } from "$icons/index.js";
 </script>
 
diff --git a/src/components/demos/select-demo.svelte b/src/components/demos/select-demo.svelte
index 4dc8588f7..a3ef5db96 100644
--- a/src/components/demos/select-demo.svelte
+++ b/src/components/demos/select-demo.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Select } from "$lib";
-	import { flyAndScale } from "@/utils";
+	import { Select } from "$lib/index.js";
+	import { flyAndScale } from "@/utils/index.js";
 	import { Check, Palette, CaretUpDown } from "$icons/index.js";
 
 	const themes = [
diff --git a/src/components/demos/separator-demo.svelte b/src/components/demos/separator-demo.svelte
index 442dcdd84..bd70afc75 100644
--- a/src/components/demos/separator-demo.svelte
+++ b/src/components/demos/separator-demo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Separator } from "$lib";
+	import { Separator } from "$lib/index.js";
 </script>
 
 <div>
diff --git a/src/components/demos/slider-demo.svelte b/src/components/demos/slider-demo.svelte
index e946249de..cdab04c9e 100644
--- a/src/components/demos/slider-demo.svelte
+++ b/src/components/demos/slider-demo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Slider } from "$lib";
+	import { Slider } from "$lib/index.js";
 
 	let value = [50];
 </script>
diff --git a/src/components/demos/switch-demo.svelte b/src/components/demos/switch-demo.svelte
index 9f2438d57..a5f7356ff 100644
--- a/src/components/demos/switch-demo.svelte
+++ b/src/components/demos/switch-demo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Switch, Label } from "$lib";
+	import { Switch, Label } from "$lib/index.js";
 </script>
 
 <div class="flex items-center space-x-3">
diff --git a/src/components/demos/tabs-demo.svelte b/src/components/demos/tabs-demo.svelte
index 825630b09..4a9fa3eb8 100644
--- a/src/components/demos/tabs-demo.svelte
+++ b/src/components/demos/tabs-demo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Tabs } from "$lib";
+	import { Tabs } from "$lib/index.js";
 	import { Airplane } from "$icons/index.js";
 </script>
 
diff --git a/src/components/demos/toggle-demo.svelte b/src/components/demos/toggle-demo.svelte
index 95c112221..1a5373953 100644
--- a/src/components/demos/toggle-demo.svelte
+++ b/src/components/demos/toggle-demo.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
+	import { Toggle } from "$lib/index.js";
 	import { LockKeyOpen } from "$icons/index.js";
-	import { Toggle } from "$lib";
 
 	let unlocked = false;
 	$: code = unlocked ? "B1T5" : "••••";
diff --git a/src/components/demos/toggle-group-demo.svelte b/src/components/demos/toggle-group-demo.svelte
index 328666a24..6b29a8870 100644
--- a/src/components/demos/toggle-group-demo.svelte
+++ b/src/components/demos/toggle-group-demo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ToggleGroup } from "$lib";
+	import { ToggleGroup } from "$lib/index.js";
 	import { TextB, TextItalic, TextStrikethrough } from "$icons/index.js";
 
 	let value: string[] | undefined = ["bold"];
diff --git a/src/components/demos/toolbar-demo.svelte b/src/components/demos/toolbar-demo.svelte
index 59b37fe22..5522063ec 100644
--- a/src/components/demos/toolbar-demo.svelte
+++ b/src/components/demos/toolbar-demo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Separator, Toolbar } from "$lib";
+	import { Separator, Toolbar } from "$lib/index.js";
 	import {
 		TextB,
 		TextItalic,
diff --git a/src/components/index.ts b/src/components/index.ts
index 5baaef0ce..113e1c369 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,9 +1,9 @@
-export * from "./icons";
-export * from "./page-header";
-export * from "./navigation";
-export * from "./api-ref";
-export * from "./demos";
-export * from "./toc";
+export * from "./icons/index.js";
+export * from "./page-header/index.js";
+export * from "./navigation/index.js";
+export * from "./api-ref/index.js";
+export * from "./demos/index.js";
+export * from "./toc/index.js";
 export { default as SiteHeader } from "./site-header.svelte";
 export { default as TailwindIndicator } from "./tailwind-indicator.svelte";
 export { default as SidebarNav } from "./navigation/sidebar-nav.svelte";
diff --git a/src/components/light-switch.svelte b/src/components/light-switch.svelte
index 9d786c504..fa80ebdc3 100644
--- a/src/components/light-switch.svelte
+++ b/src/components/light-switch.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Sun, Moon } from "$icons/index.js";
-	import { Button } from "$lib";
+	import { Button } from "$lib/index.js";
 	import { toggleMode, mode } from "mode-watcher";
 	import { scale } from "svelte/transition";
 	import { cubicOut } from "svelte/easing";
diff --git a/src/components/markdown/a.svelte b/src/components/markdown/a.svelte
index c01400624..e5a2eb0a4 100644
--- a/src/components/markdown/a.svelte
+++ b/src/components/markdown/a.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
diff --git a/src/components/markdown/blockquote.svelte b/src/components/markdown/blockquote.svelte
index ccbad364f..127ff67a0 100644
--- a/src/components/markdown/blockquote.svelte
+++ b/src/components/markdown/blockquote.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
diff --git a/src/components/markdown/code.svelte b/src/components/markdown/code.svelte
index 32faaf683..853b66167 100644
--- a/src/components/markdown/code.svelte
+++ b/src/components/markdown/code.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 	let className: string | undefined | null = undefined;
 	export { className as class };
 </script>
diff --git a/src/components/markdown/h1.svelte b/src/components/markdown/h1.svelte
index f66cf5aa5..5cea0d3c2 100644
--- a/src/components/markdown/h1.svelte
+++ b/src/components/markdown/h1.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
diff --git a/src/components/markdown/h2.svelte b/src/components/markdown/h2.svelte
index 4b30b4255..96098b235 100644
--- a/src/components/markdown/h2.svelte
+++ b/src/components/markdown/h2.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
diff --git a/src/components/markdown/h3.svelte b/src/components/markdown/h3.svelte
index 8510f191c..503291c0f 100644
--- a/src/components/markdown/h3.svelte
+++ b/src/components/markdown/h3.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
diff --git a/src/components/markdown/h4.svelte b/src/components/markdown/h4.svelte
index dd3412e84..5bf7edc2c 100644
--- a/src/components/markdown/h4.svelte
+++ b/src/components/markdown/h4.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
diff --git a/src/components/markdown/h5.svelte b/src/components/markdown/h5.svelte
index 6011ac2b6..16d9ae0ed 100644
--- a/src/components/markdown/h5.svelte
+++ b/src/components/markdown/h5.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
diff --git a/src/components/markdown/h6.svelte b/src/components/markdown/h6.svelte
index 0b42ec3bf..b7e649190 100644
--- a/src/components/markdown/h6.svelte
+++ b/src/components/markdown/h6.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
diff --git a/src/components/markdown/hr.svelte b/src/components/markdown/hr.svelte
index dfc69b6df..667cebf38 100644
--- a/src/components/markdown/hr.svelte
+++ b/src/components/markdown/hr.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
diff --git a/src/components/markdown/img.svelte b/src/components/markdown/img.svelte
index 0baed5e31..4030b2704 100644
--- a/src/components/markdown/img.svelte
+++ b/src/components/markdown/img.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLImgAttributes } from "svelte/elements";
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
diff --git a/src/components/markdown/layout.svelte b/src/components/markdown/layout.svelte
index 39ac70e4b..72ff8c82f 100644
--- a/src/components/markdown/layout.svelte
+++ b/src/components/markdown/layout.svelte
@@ -20,7 +20,7 @@
 		th,
 		tr,
 		ul,
-	} from "@/components/markdown";
+	} from "@/components/markdown/index.js";
 
 	export { a, blockquote, h1, h2, h3, h4, h5, h6, hr, img, li, ol, p, pre, table, td, th, tr, ul };
 </script>
diff --git a/src/components/markdown/li.svelte b/src/components/markdown/li.svelte
index 4d9f0bfdf..55c065088 100644
--- a/src/components/markdown/li.svelte
+++ b/src/components/markdown/li.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
diff --git a/src/components/markdown/ol.svelte b/src/components/markdown/ol.svelte
index 43a44c9bc..768259d9e 100644
--- a/src/components/markdown/ol.svelte
+++ b/src/components/markdown/ol.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
diff --git a/src/components/markdown/p.svelte b/src/components/markdown/p.svelte
index 0879b60ca..3a590e7f5 100644
--- a/src/components/markdown/p.svelte
+++ b/src/components/markdown/p.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
diff --git a/src/components/markdown/pre.svelte b/src/components/markdown/pre.svelte
index a034dd0ff..7cc217a07 100644
--- a/src/components/markdown/pre.svelte
+++ b/src/components/markdown/pre.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { CopyCodeButton } from "@/components";
-	import { cn, createCopyCodeButton } from "@/utils";
+	import { CopyCodeButton } from "@/components/index.js";
+	import { cn, createCopyCodeButton } from "@/utils/index.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
diff --git a/src/components/markdown/table.svelte b/src/components/markdown/table.svelte
index a5aac2c22..b7329105d 100644
--- a/src/components/markdown/table.svelte
+++ b/src/components/markdown/table.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
diff --git a/src/components/markdown/td.svelte b/src/components/markdown/td.svelte
index 62b5cc689..912c17ce6 100644
--- a/src/components/markdown/td.svelte
+++ b/src/components/markdown/td.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
diff --git a/src/components/markdown/th.svelte b/src/components/markdown/th.svelte
index 8038613c9..34ce8dd0c 100644
--- a/src/components/markdown/th.svelte
+++ b/src/components/markdown/th.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
diff --git a/src/components/markdown/tr.svelte b/src/components/markdown/tr.svelte
index cfc3f62f0..e07f383f1 100644
--- a/src/components/markdown/tr.svelte
+++ b/src/components/markdown/tr.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
diff --git a/src/components/markdown/ul.svelte b/src/components/markdown/ul.svelte
index e016c6a18..e8f80fd17 100644
--- a/src/components/markdown/ul.svelte
+++ b/src/components/markdown/ul.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
diff --git a/src/components/metadata.svelte b/src/components/metadata.svelte
index 484ecb41e..ae7357cd8 100644
--- a/src/components/metadata.svelte
+++ b/src/components/metadata.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from "$app/stores";
-	import { siteConfig } from "@/config";
+	import { siteConfig } from "@/config/index.js";
 
 	export let title: string = siteConfig.name;
 
diff --git a/src/components/navigation/mobile-nav.svelte b/src/components/navigation/mobile-nav.svelte
index 3ee17161a..48c5c826b 100644
--- a/src/components/navigation/mobile-nav.svelte
+++ b/src/components/navigation/mobile-nav.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { SquareHalf } from "$icons/index.js";
-	import * as Sheet from "@/components/ui/sheet";
-	import { Button } from "@/components/ui/button";
-	import { navigation } from "@/config";
+	import * as Sheet from "@/components/ui/sheet/index.js";
+	import { Button } from "@/components/ui/button/index.js";
+	import { navigation } from "@/config/index.js";
 	import MobileLink from "./mobile-link.svelte";
-	import { Logo } from "@/components/icons";
+	import { Logo } from "$icons/index.js";
 
 	let open = false;
 </script>
diff --git a/src/components/navigation/sidebar-nav-items.svelte b/src/components/navigation/sidebar-nav-items.svelte
index 2c9e9041c..aa6668fef 100644
--- a/src/components/navigation/sidebar-nav-items.svelte
+++ b/src/components/navigation/sidebar-nav-items.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { SidebarNavItem } from "@/config";
+	import type { SidebarNavItem } from "@/config/index.js";
 	import { page } from "$app/stores";
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 
 	export let items: SidebarNavItem[] = [];
 </script>
diff --git a/src/components/navigation/sidebar-nav-main-items.svelte b/src/components/navigation/sidebar-nav-main-items.svelte
index 5be119cf4..02ab1236a 100644
--- a/src/components/navigation/sidebar-nav-main-items.svelte
+++ b/src/components/navigation/sidebar-nav-main-items.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { SidebarNavItem } from "@/config";
+	import type { SidebarNavItem } from "@/config/index.js";
 	import { Sticker, Compass, CodeBlock, Palette } from "$icons/index.js";
 	import { page } from "$app/stores";
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 
 	export let items: SidebarNavItem[] = [];
 
diff --git a/src/components/navigation/sidebar-nav.svelte b/src/components/navigation/sidebar-nav.svelte
index e737a7ce2..082f9c96f 100644
--- a/src/components/navigation/sidebar-nav.svelte
+++ b/src/components/navigation/sidebar-nav.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { SidebarNavItem } from "@/config";
-	import { SidebarNavItems, SidebarNavMainItems } from "@/components";
+	import type { SidebarNavItem } from "@/config/index.js";
+	import { SidebarNavItems, SidebarNavMainItems } from "@/components/index.js";
 	export let items: SidebarNavItem[] = [];
 </script>
 
diff --git a/src/components/page-header/page-header-description.svelte b/src/components/page-header/page-header-description.svelte
index ed7b10505..ec64499c2 100644
--- a/src/components/page-header/page-header-description.svelte
+++ b/src/components/page-header/page-header-description.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 	let className: string | undefined | null = undefined;
 	export { className as class };
 </script>
diff --git a/src/components/page-header/page-header-heading.svelte b/src/components/page-header/page-header-heading.svelte
index 97999fef2..3390fb2d2 100644
--- a/src/components/page-header/page-header-heading.svelte
+++ b/src/components/page-header/page-header-heading.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 	let className: string | undefined | null = undefined;
 	export { className as class };
 </script>
diff --git a/src/components/page-header/page-header.svelte b/src/components/page-header/page-header.svelte
index f645c26eb..8c81082d6 100644
--- a/src/components/page-header/page-header.svelte
+++ b/src/components/page-header/page-header.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 	let className: string | undefined | null = undefined;
 	export { className as class };
 </script>
diff --git a/src/components/preview-switch.svelte b/src/components/preview-switch.svelte
index 81450aa49..d20d95957 100644
--- a/src/components/preview-switch.svelte
+++ b/src/components/preview-switch.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Switch } from "@/lib";
-	import { cn } from "@/utils";
+	import { Switch } from "$lib/index.js";
+	import { cn } from "@/utils/index.js";
 
 	type $$Props = Switch.Props;
 	type $$Events = Switch.Events;
diff --git a/src/components/site-header.svelte b/src/components/site-header.svelte
index 8f2fb4f1d..d94cfb1df 100644
--- a/src/components/site-header.svelte
+++ b/src/components/site-header.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Button } from "$lib";
-	import { LightSwitch, MobileNav } from "@/components";
-	import { siteConfig } from "@/config";
-	import { Logo } from "@/components/icons";
+	import { Button } from "$lib/index.js";
+	import { LightSwitch, MobileNav } from "@/components/index.js";
+	import { siteConfig } from "@/config/index.js";
+	import { Logo } from "$icons/index.js";
 </script>
 
 <header
diff --git a/src/components/test-menubar.svelte b/src/components/test-menubar.svelte
index 35be9c147..5dffed510 100644
--- a/src/components/test-menubar.svelte
+++ b/src/components/test-menubar.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { Menubar } from "$lib";
+	import { Menubar } from "$lib/index.js";
 	let bookmarks = false;
 	let fullUrls = true;
 	const profileRadioValue = "benoit";
diff --git a/src/components/toc/tree.svelte b/src/components/toc/tree.svelte
index bc6fd454b..b9f4e218a 100644
--- a/src/components/toc/tree.svelte
+++ b/src/components/toc/tree.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 	import {
 		type TableOfContentsItem,
 		type TableOfContentsElements,
diff --git a/src/components/ui/button/button.svelte b/src/components/ui/button/button.svelte
index add84ded5..de9b75204 100644
--- a/src/components/ui/button/button.svelte
+++ b/src/components/ui/button/button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Button as ButtonPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { buttonVariants, type Size, type Variant } from ".";
+	import { Button as ButtonPrimitive } from "@/lib/index.js";
+	import { cn } from "@/utils/index.js";
+	import { buttonVariants, type Size, type Variant } from "./index.js";
 
 	type $$Props = ButtonPrimitive.Props & {
 		variant?: Variant;
diff --git a/src/components/ui/sheet/index.ts b/src/components/ui/sheet/index.ts
index 7f8b05014..78111512e 100644
--- a/src/components/ui/sheet/index.ts
+++ b/src/components/ui/sheet/index.ts
@@ -1,4 +1,4 @@
-import { Dialog as SheetPrimitive } from "@/lib";
+import { Dialog as SheetPrimitive } from "@/lib/index.js";
 import { tv, type VariantProps } from "tailwind-variants";
 
 import Portal from "./sheet-portal.svelte";
diff --git a/src/components/ui/sheet/sheet-content.svelte b/src/components/ui/sheet/sheet-content.svelte
index 5e0f70746..c9211cce8 100644
--- a/src/components/ui/sheet/sheet-content.svelte
+++ b/src/components/ui/sheet/sheet-content.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "@/lib";
-	import { SheetOverlay, SheetPortal, sheetVariants, sheetTransitions, type Side } from ".";
+	import { Dialog as SheetPrimitive } from "$lib/index.js";
+	import {
+		SheetOverlay,
+		SheetPortal,
+		sheetVariants,
+		sheetTransitions,
+		type Side,
+	} from "./index.js";
 	import { X } from "$icons/index.js";
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 	import { fly } from "svelte/transition";
 
 	type $$Props = SheetPrimitive.ContentProps & {
diff --git a/src/components/ui/sheet/sheet-description.svelte b/src/components/ui/sheet/sheet-description.svelte
index bd48aef12..8d164fccf 100644
--- a/src/components/ui/sheet/sheet-description.svelte
+++ b/src/components/ui/sheet/sheet-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "@/lib";
-	import { cn } from "@/utils";
+	import { Dialog as SheetPrimitive } from "@/lib/index.js";
+	import { cn } from "@/utils/index.js";
 
 	type $$Props = SheetPrimitive.DescriptionProps;
 
diff --git a/src/components/ui/sheet/sheet-footer.svelte b/src/components/ui/sheet/sheet-footer.svelte
index e6e89194e..cadd980c3 100644
--- a/src/components/ui/sheet/sheet-footer.svelte
+++ b/src/components/ui/sheet/sheet-footer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
diff --git a/src/components/ui/sheet/sheet-header.svelte b/src/components/ui/sheet/sheet-header.svelte
index 358ebbc31..e3ff9f129 100644
--- a/src/components/ui/sheet/sheet-header.svelte
+++ b/src/components/ui/sheet/sheet-header.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
diff --git a/src/components/ui/sheet/sheet-overlay.svelte b/src/components/ui/sheet/sheet-overlay.svelte
index e6fda62a8..219972a8b 100644
--- a/src/components/ui/sheet/sheet-overlay.svelte
+++ b/src/components/ui/sheet/sheet-overlay.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "@/lib";
-	import { cn } from "@/utils";
+	import { Dialog as SheetPrimitive } from "$lib/index.js";
+	import { cn } from "@/utils/index.js";
 	import { fade } from "svelte/transition";
 
 	type $$Props = SheetPrimitive.OverlayProps;
diff --git a/src/components/ui/sheet/sheet-portal.svelte b/src/components/ui/sheet/sheet-portal.svelte
index 5f9933bec..cdd112eff 100644
--- a/src/components/ui/sheet/sheet-portal.svelte
+++ b/src/components/ui/sheet/sheet-portal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "@/lib";
-	import { cn } from "@/utils";
+	import { Dialog as SheetPrimitive } from "$lib/index.js";
+	import { cn } from "@/utils/index.js";
 
 	type $$Props = SheetPrimitive.PortalProps;
 
diff --git a/src/components/ui/sheet/sheet-title.svelte b/src/components/ui/sheet/sheet-title.svelte
index 720baf136..592ad15e5 100644
--- a/src/components/ui/sheet/sheet-title.svelte
+++ b/src/components/ui/sheet/sheet-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "@/lib";
-	import { cn } from "@/utils";
+	import { Dialog as SheetPrimitive } from "$lib/index.js";
+	import { cn } from "@/utils/index.js";
 
 	type $$Props = SheetPrimitive.TitleProps;
 
diff --git a/src/components/ui/table/table-body.svelte b/src/components/ui/table/table-body.svelte
index 8594e0db9..1045b748d 100644
--- a/src/components/ui/table/table-body.svelte
+++ b/src/components/ui/table/table-body.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
diff --git a/src/components/ui/table/table-caption.svelte b/src/components/ui/table/table-caption.svelte
index 4123118f5..e46a22817 100644
--- a/src/components/ui/table/table-caption.svelte
+++ b/src/components/ui/table/table-caption.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	type $$Props = HTMLAttributes<HTMLTableCaptionElement>;
diff --git a/src/components/ui/table/table-cell.svelte b/src/components/ui/table/table-cell.svelte
index 4d39d922f..4aa899eeb 100644
--- a/src/components/ui/table/table-cell.svelte
+++ b/src/components/ui/table/table-cell.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	type $$Props = HTMLAttributes<HTMLTableCellElement>;
diff --git a/src/components/ui/table/table-footer.svelte b/src/components/ui/table/table-footer.svelte
index b71049859..f3809967d 100644
--- a/src/components/ui/table/table-footer.svelte
+++ b/src/components/ui/table/table-footer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
diff --git a/src/components/ui/table/table-head.svelte b/src/components/ui/table/table-head.svelte
index 804a16caf..39ae3474a 100644
--- a/src/components/ui/table/table-head.svelte
+++ b/src/components/ui/table/table-head.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	type $$Props = HTMLAttributes<HTMLTableCellElement>;
diff --git a/src/components/ui/table/table-header.svelte b/src/components/ui/table/table-header.svelte
index 012ef212c..19eb464a3 100644
--- a/src/components/ui/table/table-header.svelte
+++ b/src/components/ui/table/table-header.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
diff --git a/src/components/ui/table/table-row.svelte b/src/components/ui/table/table-row.svelte
index 180185ce8..7f4267268 100644
--- a/src/components/ui/table/table-row.svelte
+++ b/src/components/ui/table/table-row.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	type $$Props = HTMLAttributes<HTMLTableRowElement> & {
diff --git a/src/components/ui/table/table.svelte b/src/components/ui/table/table.svelte
index 876e8541f..d9281b045 100644
--- a/src/components/ui/table/table.svelte
+++ b/src/components/ui/table/table.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 	import type { HTMLTableAttributes } from "svelte/elements";
 
 	type $$Props = HTMLTableAttributes;
diff --git a/src/config/index.ts b/src/config/index.ts
index 1ff5bc074..492b85988 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -1,2 +1,2 @@
-export * from "./navigation";
-export * from "./site";
+export * from "./navigation.js";
+export * from "./site.js";
diff --git a/src/content/api-reference/accordion.ts b/src/content/api-reference/accordion.ts
index dec59c9b4..c11a21aa8 100644
--- a/src/content/api-reference/accordion.ts
+++ b/src/content/api-reference/accordion.ts
@@ -1,8 +1,8 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import * as C from "@/content/constants.js";
 import { union, enums, transitionProps } from "@/content/api-reference/helpers.js";
 import type * as Accordion from "$lib/bits/accordion/_types.js";
-import { builderAndAttrsSlotProps, domElProps } from "./helpers";
+import { builderAndAttrsSlotProps, domElProps } from "./helpers.js";
 
 const root: APISchema<Accordion.Props<false>> = {
 	title: "Root",
diff --git a/src/content/api-reference/aspect-ratio.ts b/src/content/api-reference/aspect-ratio.ts
index 88641198c..fcda4c699 100644
--- a/src/content/api-reference/aspect-ratio.ts
+++ b/src/content/api-reference/aspect-ratio.ts
@@ -1,7 +1,7 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import type * as AspectRatio from "$lib/bits/aspect-ratio/_types.js";
-import * as C from "@/content/constants";
-import { domElProps } from "./helpers";
+import * as C from "@/content/constants.js";
+import { domElProps } from "./helpers.js";
 
 const root: APISchema<AspectRatio.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/avatar.ts b/src/content/api-reference/avatar.ts
index f28274e3c..580ab390b 100644
--- a/src/content/api-reference/avatar.ts
+++ b/src/content/api-reference/avatar.ts
@@ -1,8 +1,8 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import { attrsSlotProp, enums } from "@/content/api-reference/helpers.js";
-import type * as Avatar from "$lib/bits/avatar/_types";
+import type * as Avatar from "$lib/bits/avatar/_types.js";
 import * as C from "@/content/constants.js";
-import { builderAndAttrsSlotProps, domElProps } from "./helpers";
+import { builderAndAttrsSlotProps, domElProps } from "./helpers.js";
 
 export const root: APISchema<Avatar.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/button.ts b/src/content/api-reference/button.ts
index 4db05dd9d..44d899fc9 100644
--- a/src/content/api-reference/button.ts
+++ b/src/content/api-reference/button.ts
@@ -1,6 +1,6 @@
-import type { APISchema } from "@/types";
-import type * as Button from "$lib/bits/button/_types";
-import * as C from "@/content/constants";
+import type { APISchema } from "@/types/index.js";
+import type * as Button from "$lib/bits/button/_types.js";
+import * as C from "@/content/constants.js";
 
 export const root: APISchema<Button.Props & { href: string }> = {
 	title: "Root",
diff --git a/src/content/api-reference/calendar.ts b/src/content/api-reference/calendar.ts
index c92e93447..6c447b47e 100644
--- a/src/content/api-reference/calendar.ts
+++ b/src/content/api-reference/calendar.ts
@@ -1,8 +1,8 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import * as C from "@/content/constants.js";
 import { weekdaysSlotProp, enums, monthsSlotProp } from "@/content/api-reference/helpers.js";
 import type * as Calendar from "$lib/bits/calendar/_types.js";
-import { attrsSlotProp, builderAndAttrsSlotProps, domElProps } from "./helpers";
+import { attrsSlotProp, builderAndAttrsSlotProps, domElProps } from "./helpers.js";
 
 export const root: APISchema<Calendar.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/checkbox.ts b/src/content/api-reference/checkbox.ts
index f069d2a2e..16c8915e1 100644
--- a/src/content/api-reference/checkbox.ts
+++ b/src/content/api-reference/checkbox.ts
@@ -1,8 +1,8 @@
 import { attrsSlotProp, enums, union } from "./helpers.js";
-import type { APISchema } from "@/types";
-import type * as Checkbox from "$lib/bits/checkbox/_types";
-import * as C from "@/content/constants";
-import { builderAndAttrsSlotProps, domElProps } from "./helpers";
+import type { APISchema } from "@/types/index.js";
+import type * as Checkbox from "$lib/bits/checkbox/_types.js";
+import * as C from "@/content/constants.js";
+import { builderAndAttrsSlotProps, domElProps } from "./helpers.js";
 
 export const root: APISchema<Checkbox.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/collapsible.ts b/src/content/api-reference/collapsible.ts
index 4cd307818..1b16d93be 100644
--- a/src/content/api-reference/collapsible.ts
+++ b/src/content/api-reference/collapsible.ts
@@ -1,8 +1,8 @@
-import type { APISchema, PropObj } from "@/types";
+import type { APISchema, PropObj } from "@/types/index.js";
 import { enums, transitionProps } from "@/content/api-reference/helpers.js";
-import type * as Collapsible from "$lib/bits/collapsible/_types";
-import * as C from "@/content/constants";
-import { builderAndAttrsSlotProps, domElProps } from "./helpers";
+import type * as Collapsible from "$lib/bits/collapsible/_types.js";
+import * as C from "@/content/constants.js";
+import { builderAndAttrsSlotProps, domElProps } from "./helpers.js";
 
 export const root: APISchema<Collapsible.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/context-menu.ts b/src/content/api-reference/context-menu.ts
index 6784457fb..f3a0aa2b6 100644
--- a/src/content/api-reference/context-menu.ts
+++ b/src/content/api-reference/context-menu.ts
@@ -1,10 +1,10 @@
-import type { APISchema } from "@/types";
-import { menu } from "./menu";
-import type * as Menu from "$lib/bits/menu/_types";
-import type * as ContextMenu from "$lib/bits/context-menu/_types";
+import type { APISchema } from "@/types/index.js";
+import { menu } from "./menu.js";
+import type * as Menu from "$lib/bits/menu/_types.js";
+import type * as ContextMenu from "$lib/bits/context-menu/_types.js";
 import * as C from "@/content/constants.js";
-import { domElProps } from "./helpers";
-import { transitionProps, union, builderAndAttrsSlotProps, enums, seeFloating } from "./helpers";
+import { domElProps } from "./helpers.js";
+import { transitionProps, union, builderAndAttrsSlotProps, enums, seeFloating } from "./helpers.js";
 
 export const root: APISchema<Menu.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/date-field.ts b/src/content/api-reference/date-field.ts
index db56453fb..a265a4e7e 100644
--- a/src/content/api-reference/date-field.ts
+++ b/src/content/api-reference/date-field.ts
@@ -1,8 +1,8 @@
 import * as C from "@/content/constants.js";
 import type * as DateField from "$lib/bits/date-field/_types.js";
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import { enums, idsSlotProp, union, domElProps } from "@/content/api-reference/helpers.js";
-import { builderAndAttrsSlotProps } from "./helpers";
+import { builderAndAttrsSlotProps } from "./helpers.js";
 
 export const root: APISchema<DateField.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/date-picker.ts b/src/content/api-reference/date-picker.ts
index 2cb41d27f..c7ea8422c 100644
--- a/src/content/api-reference/date-picker.ts
+++ b/src/content/api-reference/date-picker.ts
@@ -1,4 +1,4 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import * as C from "@/content/constants.js";
 import {
 	weekdaysSlotProp,
@@ -9,8 +9,8 @@ import {
 	onOutsideClickProp,
 } from "@/content/api-reference/helpers.js";
 import type * as DatePicker from "$lib/bits/date-picker/_types.js";
-import { builderAndAttrsSlotProps, portalProp } from "./helpers";
-import { focusProp } from "./extended-types";
+import { builderAndAttrsSlotProps, portalProp } from "./helpers.js";
+import { focusProp } from "./extended-types/index.js";
 import {
 	header,
 	cell,
@@ -23,9 +23,9 @@ import {
 	prevButton,
 	day,
 	grid,
-} from "./calendar";
-import { content, trigger } from "./popover";
-import { label, segment } from "./date-field";
+} from "./calendar.js";
+import { content, trigger } from "./popover.js";
+import { label, segment } from "./date-field.js";
 
 const root: APISchema<DatePicker.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/date-range-field.ts b/src/content/api-reference/date-range-field.ts
index f6961291e..bfe015ac3 100644
--- a/src/content/api-reference/date-range-field.ts
+++ b/src/content/api-reference/date-range-field.ts
@@ -1,8 +1,8 @@
 import * as C from "@/content/constants.js";
 import type * as DateRangeField from "$lib/bits/date-range-field/_types.js";
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import { enums, idsSlotProp, union, domElProps } from "@/content/api-reference/helpers.js";
-import { builderAndAttrsSlotProps } from "./helpers";
+import { builderAndAttrsSlotProps } from "./helpers.js";
 
 export const root: APISchema<DateRangeField.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/date-range-picker.ts b/src/content/api-reference/date-range-picker.ts
index 00edb53cb..7edb87f16 100644
--- a/src/content/api-reference/date-range-picker.ts
+++ b/src/content/api-reference/date-range-picker.ts
@@ -1,4 +1,4 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import * as C from "@/content/constants.js";
 import {
 	weekdaysSlotProp,
@@ -9,8 +9,8 @@ import {
 	onOutsideClickProp,
 } from "@/content/api-reference/helpers.js";
 import type * as DateRangePicker from "$lib/bits/date-range-picker/_types.js";
-import { builderAndAttrsSlotProps, portalProp } from "./helpers";
-import { focusProp } from "./extended-types";
+import { builderAndAttrsSlotProps, portalProp } from "./helpers.js";
+import { focusProp } from "./extended-types/index.js";
 import {
 	header,
 	cell,
@@ -23,9 +23,9 @@ import {
 	prevButton,
 	day,
 	grid,
-} from "./range-calendar";
-import { content, trigger } from "./popover";
-import { label, segment } from "./date-range-field";
+} from "./range-calendar.js";
+import { content, trigger } from "./popover.js";
+import { label, segment } from "./date-range-field.js";
 
 const root: APISchema<DateRangePicker.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/dialog.ts b/src/content/api-reference/dialog.ts
index be4bba311..1ccf5bdb8 100644
--- a/src/content/api-reference/dialog.ts
+++ b/src/content/api-reference/dialog.ts
@@ -1,4 +1,4 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import {
 	enums,
 	idsSlotProp,
@@ -6,10 +6,10 @@ import {
 	portalProp,
 	transitionProps,
 } from "@/content/api-reference/helpers.js";
-import type * as Dialog from "$lib/bits/dialog/_types";
-import { focusProp } from "./extended-types";
-import * as C from "@/content/constants";
-import { builderAndAttrsSlotProps, domElProps } from "./helpers";
+import type * as Dialog from "$lib/bits/dialog/_types.js";
+import { focusProp } from "./extended-types/index.js";
+import * as C from "@/content/constants.js";
+import { builderAndAttrsSlotProps, domElProps } from "./helpers.js";
 
 export const root: APISchema<Dialog.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/dropdown-menu.ts b/src/content/api-reference/dropdown-menu.ts
index abf80d689..2a3bfd782 100644
--- a/src/content/api-reference/dropdown-menu.ts
+++ b/src/content/api-reference/dropdown-menu.ts
@@ -1,6 +1,6 @@
-import type { APISchema } from "@/types";
-import { menu } from "./menu";
-import type * as Menu from "$lib/bits/menu/_types";
+import type { APISchema } from "@/types/index.js";
+import { menu } from "./menu.js";
+import type * as Menu from "$lib/bits/menu/_types.js";
 
 export const root: APISchema<Menu.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/extended-types/index.ts b/src/content/api-reference/extended-types/index.ts
index a81827a80..1efa51550 100644
--- a/src/content/api-reference/extended-types/index.ts
+++ b/src/content/api-reference/extended-types/index.ts
@@ -1,4 +1,4 @@
-import type { PropType } from "@/types";
+import type { PropType } from "@/types/index.js";
 import rawFocusProp from "@/content/api-reference/extended-types/focus-target.js?raw";
 import rawMonthProp from "@/content/api-reference/extended-types/months.js?raw";
 import rawPageItemProp from "@/content/api-reference/extended-types/page-item.js?raw";
diff --git a/src/content/api-reference/helpers.ts b/src/content/api-reference/helpers.ts
index cc668dcc2..077b8334f 100644
--- a/src/content/api-reference/helpers.ts
+++ b/src/content/api-reference/helpers.ts
@@ -1,6 +1,6 @@
 import type { PropSchema } from "@/types/api.js";
 import * as C from "@/content/constants.js";
-import { monthsPropType } from "./extended-types";
+import { monthsPropType } from "./extended-types/index.js";
 
 export const asChild = {
 	type: C.BOOLEAN,
diff --git a/src/content/api-reference/index.ts b/src/content/api-reference/index.ts
index 9aae9ee68..58baeb937 100644
--- a/src/content/api-reference/index.ts
+++ b/src/content/api-reference/index.ts
@@ -1,38 +1,38 @@
-import type { APISchema } from "@/types";
-import { accordion } from "./accordion";
-import { alertDialog } from "./alert-dialog";
-import { aspectRatio } from "./aspect-ratio";
-import { avatar } from "./avatar";
-import { button } from "./button";
-import { calendar } from "./calendar";
-import { checkbox } from "./checkbox";
-import { collapsible } from "./collapsible";
-import { combobox } from "./combobox";
-import { contextMenu } from "./context-menu";
-import { dateField } from "./date-field";
-import { datePicker } from "./date-picker";
-import { dateRangeField } from "./date-range-field";
-import { dateRangePicker } from "./date-range-picker";
-import { dialog } from "./dialog";
-import { dropdownMenu } from "./dropdown-menu";
-import { label } from "./label";
-import { linkPreview } from "./link-preview";
-import { menubar } from "./menubar";
-import { pagination } from "./pagination";
-import { pinInput } from "./pin-input";
-import { popover } from "./popover";
-import { progress } from "./progress";
-import { radioGroup } from "./radio-group";
-import { rangeCalendar } from "./range-calendar";
-import { select } from "./select";
-import { separator } from "./separator";
-import { slider } from "./slider";
-import { switchData } from "./switch";
-import { tabs } from "./tabs";
-import { toggle } from "./toggle";
-import { toggleGroup } from "./toggle-group";
-import { toolbar } from "./toolbar";
-import { tooltip } from "./tooltip";
+import type { APISchema } from "@/types/index.js";
+import { accordion } from "./accordion.js";
+import { alertDialog } from "./alert-dialog.js";
+import { aspectRatio } from "./aspect-ratio.js";
+import { avatar } from "./avatar.js";
+import { button } from "./button.js";
+import { calendar } from "./calendar.js";
+import { checkbox } from "./checkbox.js";
+import { collapsible } from "./collapsible.js";
+import { combobox } from "./combobox.js";
+import { contextMenu } from "./context-menu.js";
+import { dateField } from "./date-field.js";
+import { datePicker } from "./date-picker.js";
+import { dateRangeField } from "./date-range-field.js";
+import { dateRangePicker } from "./date-range-picker.js";
+import { dialog } from "./dialog.js";
+import { dropdownMenu } from "./dropdown-menu.js";
+import { label } from "./label.js";
+import { linkPreview } from "./link-preview.js";
+import { menubar } from "./menubar.js";
+import { pagination } from "./pagination.js";
+import { pinInput } from "./pin-input.js";
+import { popover } from "./popover.js";
+import { progress } from "./progress.js";
+import { radioGroup } from "./radio-group.js";
+import { rangeCalendar } from "./range-calendar.js";
+import { select } from "./select.js";
+import { separator } from "./separator.js";
+import { slider } from "./slider.js";
+import { switchData } from "./switch.js";
+import { tabs } from "./tabs.js";
+import { toggle } from "./toggle.js";
+import { toggleGroup } from "./toggle-group.js";
+import { toolbar } from "./toolbar.js";
+import { tooltip } from "./tooltip.js";
 
 export const bits = [
 	"accordion",
@@ -120,4 +120,4 @@ export function getAPISchemas(bit: Bit): APISchema[] {
 	return apiSchemas[bit];
 }
 
-export * from "./helpers";
+export * from "./helpers.js";
diff --git a/src/content/api-reference/label.ts b/src/content/api-reference/label.ts
index d98ab9cf4..0bb0ea2b3 100644
--- a/src/content/api-reference/label.ts
+++ b/src/content/api-reference/label.ts
@@ -1,6 +1,6 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import { builderAndAttrsSlotProps, domElProps } from "@/content/api-reference/helpers.js";
-import type * as Label from "$lib/bits/label/_types";
+import type * as Label from "$lib/bits/label/_types.js";
 
 export const root: APISchema<Label.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/link-preview.ts b/src/content/api-reference/link-preview.ts
index a15d08f19..e2aedc1f8 100644
--- a/src/content/api-reference/link-preview.ts
+++ b/src/content/api-reference/link-preview.ts
@@ -1,4 +1,4 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import {
 	arrowProps,
 	domElProps,
@@ -10,8 +10,8 @@ import {
 	onOutsideClickProp,
 } from "@/content/api-reference/helpers.js";
 import { floatingPositioning } from "./floating.js";
-import type * as LinkPreview from "$lib/bits/link-preview/_types";
-import * as C from "@/content/constants";
+import type * as LinkPreview from "$lib/bits/link-preview/_types.js";
+import * as C from "@/content/constants.js";
 
 export const root: APISchema<LinkPreview.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/menu.ts b/src/content/api-reference/menu.ts
index b5f93d785..7b0b4903f 100644
--- a/src/content/api-reference/menu.ts
+++ b/src/content/api-reference/menu.ts
@@ -1,4 +1,4 @@
-import type { APISchema, DataAttrSchema, PropObj } from "@/types";
+import type { APISchema, DataAttrSchema, PropObj } from "@/types/index.js";
 import { focusProp } from "./extended-types/index.js";
 import { floatingPositioning } from "./floating.js";
 import {
@@ -9,9 +9,9 @@ import {
 	idsSlotProp,
 	attrsSlotProp,
 } from "@/content/api-reference/helpers.js";
-import type * as Menu from "$lib/bits/menu/_types";
-import * as C from "@/content/constants";
-import { builderAndAttrsSlotProps, domElProps, onOutsideClickProp } from "./helpers";
+import type * as Menu from "$lib/bits/menu/_types.js";
+import * as C from "@/content/constants.js";
+import { builderAndAttrsSlotProps, domElProps, onOutsideClickProp } from "./helpers.js";
 
 const props = {
 	preventScroll: {
diff --git a/src/content/api-reference/menubar.ts b/src/content/api-reference/menubar.ts
index 8bdd4377d..c4d1f977a 100644
--- a/src/content/api-reference/menubar.ts
+++ b/src/content/api-reference/menubar.ts
@@ -1,10 +1,10 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import { idsSlotProp } from "@/content/api-reference/helpers.js";
-import { menu as m } from "./menu";
-import type * as Menubar from "$lib/bits/menubar/_types";
-import type * as Menu from "$lib/bits/menu/_types";
-import * as C from "@/content/constants";
-import { builderAndAttrsSlotProps, domElProps } from "./helpers";
+import { menu as m } from "./menu.js";
+import type * as Menubar from "$lib/bits/menubar/_types.js";
+import type * as Menu from "$lib/bits/menu/_types.js";
+import * as C from "@/content/constants.js";
+import { builderAndAttrsSlotProps, domElProps } from "./helpers.js";
 
 export const root: APISchema<Menubar.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/pagination.ts b/src/content/api-reference/pagination.ts
index 39941e66b..35472e3b9 100644
--- a/src/content/api-reference/pagination.ts
+++ b/src/content/api-reference/pagination.ts
@@ -1,8 +1,8 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import type * as Pagination from "$lib/bits/pagination/_types.js";
 import * as C from "@/content/constants.js";
-import { builderAndAttrsSlotProps, domElProps } from "./helpers";
-import { pageItemProp } from "./extended-types";
+import { builderAndAttrsSlotProps, domElProps } from "./helpers.js";
+import { pageItemProp } from "./extended-types/index.js";
 
 export const root: APISchema<Pagination.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/pin-input.ts b/src/content/api-reference/pin-input.ts
index 05367cd2c..eab608f11 100644
--- a/src/content/api-reference/pin-input.ts
+++ b/src/content/api-reference/pin-input.ts
@@ -1,8 +1,8 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import { enums } from "@/content/api-reference/helpers.js";
 import type * as PinInput from "$lib/bits/pin-input/_types.js";
 import * as C from "@/content/constants.js";
-import { builderAndAttrsSlotProps, idsSlotProp, domElProps } from "./helpers";
+import { builderAndAttrsSlotProps, idsSlotProp, domElProps } from "./helpers.js";
 
 const root: APISchema<PinInput.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/progress.ts b/src/content/api-reference/progress.ts
index 75bd29dc1..d578d4eb2 100644
--- a/src/content/api-reference/progress.ts
+++ b/src/content/api-reference/progress.ts
@@ -2,7 +2,7 @@ import type { APISchema } from "@/types/index.js";
 import { enums } from "@/content/api-reference/helpers.js";
 import * as C from "@/content/constants.js";
 import type * as Progress from "$lib/bits/progress/_types.js";
-import { builderAndAttrsSlotProps, domElProps } from "./helpers";
+import { builderAndAttrsSlotProps, domElProps } from "./helpers.js";
 
 export const root: APISchema<Progress.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/radio-group.ts b/src/content/api-reference/radio-group.ts
index 8a6548bcc..43dd1ccea 100644
--- a/src/content/api-reference/radio-group.ts
+++ b/src/content/api-reference/radio-group.ts
@@ -1,8 +1,8 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import { attrsSlotProp, enums } from "@/content/api-reference/helpers.js";
-import type * as RadioGroup from "$lib/bits/radio-group/_types";
-import * as C from "@/content/constants";
-import { builderAndAttrsSlotProps, domElProps } from "./helpers";
+import type * as RadioGroup from "$lib/bits/radio-group/_types.js";
+import * as C from "@/content/constants.js";
+import { builderAndAttrsSlotProps, domElProps } from "./helpers.js";
 
 export const root: APISchema<RadioGroup.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/range-calendar.ts b/src/content/api-reference/range-calendar.ts
index ce4aa8c9b..148576914 100644
--- a/src/content/api-reference/range-calendar.ts
+++ b/src/content/api-reference/range-calendar.ts
@@ -1,4 +1,4 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import * as C from "@/content/constants.js";
 import {
 	attrsSlotProp,
@@ -8,7 +8,7 @@ import {
 	union,
 } from "@/content/api-reference/helpers.js";
 import type * as RangeCalendar from "$lib/bits/range-calendar/_types.js";
-import { builderAndAttrsSlotProps, domElProps } from "./helpers";
+import { builderAndAttrsSlotProps, domElProps } from "./helpers.js";
 
 export const root: APISchema<RangeCalendar.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/separator.ts b/src/content/api-reference/separator.ts
index 103cd0f99..3b5572bf6 100644
--- a/src/content/api-reference/separator.ts
+++ b/src/content/api-reference/separator.ts
@@ -1,7 +1,7 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import { enums, builderAndAttrsSlotProps, domElProps } from "@/content/api-reference/helpers.js";
-import * as C from "@/content/constants";
-import type * as Separator from "$lib/bits/separator/_types";
+import * as C from "@/content/constants.js";
+import type * as Separator from "$lib/bits/separator/_types.js";
 
 export const root: APISchema<Separator.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/slider.ts b/src/content/api-reference/slider.ts
index 329d4ec94..bc4d06b6b 100644
--- a/src/content/api-reference/slider.ts
+++ b/src/content/api-reference/slider.ts
@@ -1,4 +1,4 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import { enums, builderAndAttrsSlotProps, domElProps } from "@/content/api-reference/helpers.js";
 import type * as Slider from "$lib/bits/slider/_types.js";
 import * as C from "@/content/constants.js";
diff --git a/src/content/api-reference/switch.ts b/src/content/api-reference/switch.ts
index 67e968535..e52ea9e39 100644
--- a/src/content/api-reference/switch.ts
+++ b/src/content/api-reference/switch.ts
@@ -1,8 +1,8 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import { attrsSlotProp, enums } from "@/content/api-reference/helpers.js";
 import type * as Switch from "$lib/bits/switch/_types.js";
 import * as C from "@/content/constants.js";
-import { builderAndAttrsSlotProps, domElProps } from "./helpers";
+import { builderAndAttrsSlotProps, domElProps } from "./helpers.js";
 
 const root: APISchema<Switch.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/tabs.ts b/src/content/api-reference/tabs.ts
index da797e156..0cd048112 100644
--- a/src/content/api-reference/tabs.ts
+++ b/src/content/api-reference/tabs.ts
@@ -1,4 +1,4 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import * as C from "@/content/constants.js";
 import {
 	union,
diff --git a/src/content/api-reference/toggle-group.ts b/src/content/api-reference/toggle-group.ts
index 661eeaeeb..6be929a0a 100644
--- a/src/content/api-reference/toggle-group.ts
+++ b/src/content/api-reference/toggle-group.ts
@@ -1,4 +1,4 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import {
 	enums,
 	union,
diff --git a/src/content/api-reference/toggle.ts b/src/content/api-reference/toggle.ts
index 1a47f9666..30a6827c4 100644
--- a/src/content/api-reference/toggle.ts
+++ b/src/content/api-reference/toggle.ts
@@ -1,4 +1,4 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import { enums, builderAndAttrsSlotProps, domElProps } from "@/content/api-reference/helpers.js";
 import type * as Toggle from "$lib/bits/toggle/_types.js";
 import * as C from "@/content/constants.js";
diff --git a/src/content/api-reference/toolbar.ts b/src/content/api-reference/toolbar.ts
index 7c0e7ee31..29b802c1e 100644
--- a/src/content/api-reference/toolbar.ts
+++ b/src/content/api-reference/toolbar.ts
@@ -1,4 +1,4 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import {
 	enums,
 	union,
@@ -7,7 +7,6 @@ import {
 } from "@/content/api-reference/helpers.js";
 import type * as Toolbar from "$lib/bits/toolbar/_types.js";
 import * as C from "@/content/constants.js";
-import {} from "./helpers";
 
 const root: APISchema<Toolbar.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/tooltip.ts b/src/content/api-reference/tooltip.ts
index 0c20e74d4..047989a34 100644
--- a/src/content/api-reference/tooltip.ts
+++ b/src/content/api-reference/tooltip.ts
@@ -1,4 +1,4 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import {
 	arrowProps,
 	enums,
@@ -9,8 +9,8 @@ import {
 	domElProps,
 } from "@/content/api-reference/helpers.js";
 import { floatingPositioning } from "./floating.js";
-import type * as Tooltip from "$lib/bits/tooltip/_types";
-import * as C from "@/content/constants";
+import type * as Tooltip from "$lib/bits/tooltip/_types.js";
+import * as C from "@/content/constants.js";
 
 export const root: APISchema<Tooltip.Props> = {
 	title: "Root",
diff --git a/src/lib/bits/combobox/_types.ts b/src/lib/bits/combobox/_types.ts
index ba86be638..74d164e24 100644
--- a/src/lib/bits/combobox/_types.ts
+++ b/src/lib/bits/combobox/_types.ts
@@ -6,7 +6,7 @@
 import type { CreateComboboxProps, ComboboxOptionProps } from "@melt-ui/svelte";
 import type { DOMElement, Expand, OmitFloating, OnChangeFn } from "$lib/internal/index.js";
 import type { ContentProps, ArrowProps } from "$lib/bits/floating/_types.js";
-import type { Selected } from "$lib";
+import type { Selected } from "$lib/index.js";
 
 export type WhenTrue<TrueOrFalse, IfTrue, IfFalse, IfNeither = IfTrue | IfFalse> = [
 	TrueOrFalse
diff --git a/src/lib/bits/context-menu/types.ts b/src/lib/bits/context-menu/types.ts
index daa9a0fd0..0a067ced6 100644
--- a/src/lib/bits/context-menu/types.ts
+++ b/src/lib/bits/context-menu/types.ts
@@ -23,7 +23,7 @@ import type {
 	ContextTriggerEvents as TriggerEvents,
 	SubContentEvents,
 } from "$lib/bits/menu/index.js";
-import type { HTMLDivAttributes, Transition } from "$lib/internal";
+import type { HTMLDivAttributes, Transition } from "$lib/internal/index.js";
 import type * as I from "./_types.js";
 
 type ContentProps<
diff --git a/src/lib/bits/date-field/_types.ts b/src/lib/bits/date-field/_types.ts
index b06029f95..ccbbb498d 100644
--- a/src/lib/bits/date-field/_types.ts
+++ b/src/lib/bits/date-field/_types.ts
@@ -5,7 +5,7 @@
  */
 
 import type { Expand, OnChangeFn, OmitDates, DOMElement } from "$lib/internal/index.js";
-import type { SegmentPart } from "$lib/shared";
+import type { SegmentPart } from "$lib/shared/index.js";
 import type { DateValue } from "@internationalized/date";
 import type { CreateDateFieldProps } from "@melt-ui/svelte";
 
diff --git a/src/lib/bits/date-field/types.ts b/src/lib/bits/date-field/types.ts
index 49d5588a6..9985e9e58 100644
--- a/src/lib/bits/date-field/types.ts
+++ b/src/lib/bits/date-field/types.ts
@@ -1,4 +1,4 @@
-import type { CustomEventHandler } from "$lib";
+import type { CustomEventHandler } from "$lib/index.js";
 import type { HTMLDivAttributes, HTMLSpanAttributes } from "$lib/internal/index.js";
 import type * as I from "./_types.js";
 
diff --git a/src/lib/bits/date-picker/_types.ts b/src/lib/bits/date-picker/_types.ts
index e0ee093c5..557e592cc 100644
--- a/src/lib/bits/date-picker/_types.ts
+++ b/src/lib/bits/date-picker/_types.ts
@@ -11,7 +11,7 @@ import type {
 	OmitFloating,
 	DOMElement,
 } from "$lib/internal/index.js";
-import type { SegmentPart } from "$lib/shared";
+import type { SegmentPart } from "$lib/shared/index.js";
 import type { DateValue } from "@internationalized/date";
 import type { CreateDatePickerProps } from "@melt-ui/svelte";
 
diff --git a/src/lib/bits/date-range-field/ctx.ts b/src/lib/bits/date-range-field/ctx.ts
index c477cb3b7..b51526038 100644
--- a/src/lib/bits/date-range-field/ctx.ts
+++ b/src/lib/bits/date-range-field/ctx.ts
@@ -1,7 +1,7 @@
 import { type CreateDateRangeFieldProps, createDateRangeField } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { removeUndefined, getOptionUpdater, createBitAttrs } from "$lib/internal/index.js";
-import { getDateFieldData } from "../date-field/ctx";
+import { getDateFieldData } from "../date-field/ctx.js";
 
 type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
diff --git a/src/lib/bits/date-range-picker/_types.ts b/src/lib/bits/date-range-picker/_types.ts
index a98620afb..a6202bce6 100644
--- a/src/lib/bits/date-range-picker/_types.ts
+++ b/src/lib/bits/date-range-picker/_types.ts
@@ -11,7 +11,7 @@ import type {
 	OmitFloating,
 	DOMElement,
 } from "$lib/internal/index.js";
-import type { DateRange, SegmentPart } from "$lib/shared";
+import type { DateRange, SegmentPart } from "$lib/shared/index.js";
 import type { DateValue } from "@internationalized/date";
 import type { CreateDateRangePickerProps } from "@melt-ui/svelte";
 
diff --git a/src/lib/bits/floating/helpers.ts b/src/lib/bits/floating/helpers.ts
index d39b49871..2f967c8e7 100644
--- a/src/lib/bits/floating/helpers.ts
+++ b/src/lib/bits/floating/helpers.ts
@@ -1,5 +1,5 @@
 import type { Writable } from "svelte/store";
-import type { FloatingConfig } from "./floating-config";
+import type { FloatingConfig } from "./floating-config.js";
 import type { FloatingProps } from "./_types.js";
 
 type Side = "top" | "right" | "bottom" | "left";
diff --git a/src/lib/bits/floating/types.ts b/src/lib/bits/floating/types.ts
index 660a0a1e8..f81bfd090 100644
--- a/src/lib/bits/floating/types.ts
+++ b/src/lib/bits/floating/types.ts
@@ -1,4 +1,4 @@
-import type { HTMLDivAttributes, Transition } from "$lib/internal";
+import type { HTMLDivAttributes, Transition } from "$lib/internal/index.js";
 import type * as I from "./_types.js";
 
 export type ContentProps<
diff --git a/src/lib/bits/label/ctx.ts b/src/lib/bits/label/ctx.ts
index 3e6f0fa9c..81d2fb5cc 100644
--- a/src/lib/bits/label/ctx.ts
+++ b/src/lib/bits/label/ctx.ts
@@ -1,4 +1,4 @@
-import { createBitAttrs } from "$lib/internal";
+import { createBitAttrs } from "$lib/internal/index.js";
 
 export function getLabelData() {
 	const NAME = "label";
diff --git a/src/lib/bits/menu/types.ts b/src/lib/bits/menu/types.ts
index 9262ec855..8a7e8e895 100644
--- a/src/lib/bits/menu/types.ts
+++ b/src/lib/bits/menu/types.ts
@@ -4,7 +4,7 @@
  */
 
 import type { DOMEl, HTMLDivAttributes } from "$lib/internal/index.js";
-import type { CustomEventHandler } from "$lib";
+import type { CustomEventHandler } from "$lib/index.js";
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
 import type * as I from "$lib/bits/menu/_types.js";
 import type { ContentProps } from "$lib/bits/floating/types.js";
diff --git a/src/lib/bits/menubar/ctx.ts b/src/lib/bits/menubar/ctx.ts
index 27b988b3f..d4b706099 100644
--- a/src/lib/bits/menubar/ctx.ts
+++ b/src/lib/bits/menubar/ctx.ts
@@ -10,7 +10,7 @@ import { getPositioningUpdater } from "../floating/helpers.js";
 import type { Writable } from "svelte/store";
 import type { FloatingConfig } from "../floating/floating-config.js";
 import type { FloatingProps } from "../floating/_types.js";
-import { getSubmenuCtx } from "../menu/ctx";
+import { getSubmenuCtx } from "../menu/ctx.js";
 
 function getMenubarData() {
 	const NAME = "menubar" as const;
diff --git a/src/lib/bits/pagination/_types.ts b/src/lib/bits/pagination/_types.ts
index d05b7ab75..1c68729a5 100644
--- a/src/lib/bits/pagination/_types.ts
+++ b/src/lib/bits/pagination/_types.ts
@@ -4,7 +4,7 @@
  * but we don't want to document the HTML attributes.
  */
 
-import type { DOMElement, Expand, OnChangeFn } from "$lib/internal";
+import type { DOMElement, Expand, OnChangeFn } from "$lib/internal/index.js";
 import type { CreatePaginationProps, Page } from "@melt-ui/svelte";
 
 type OmitPaginationProps<T> = Omit<T, "page" | "defaultPage" | "onPageChange">;
diff --git a/src/lib/bits/pagination/ctx.ts b/src/lib/bits/pagination/ctx.ts
index 088ea4d1c..8a6863a70 100644
--- a/src/lib/bits/pagination/ctx.ts
+++ b/src/lib/bits/pagination/ctx.ts
@@ -1,6 +1,6 @@
 import { createPagination, type CreatePaginationProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
-import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal";
+import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
 
 export function getPaginationData() {
 	const NAME = "pagination" as const;
diff --git a/src/lib/bits/pagination/types.ts b/src/lib/bits/pagination/types.ts
index f5c5498ef..7abd04426 100644
--- a/src/lib/bits/pagination/types.ts
+++ b/src/lib/bits/pagination/types.ts
@@ -1,5 +1,5 @@
 import type { HTMLButtonAttributes } from "svelte/elements";
-import type { CustomEventHandler } from "$lib";
+import type { CustomEventHandler } from "$lib/index.js";
 import type * as I from "./_types.js";
 import type { HTMLDivAttributes } from "$lib/internal/types.js";
 
diff --git a/src/lib/bits/pin-input/types.ts b/src/lib/bits/pin-input/types.ts
index 49ec20e28..2ec4ff147 100644
--- a/src/lib/bits/pin-input/types.ts
+++ b/src/lib/bits/pin-input/types.ts
@@ -1,5 +1,5 @@
 import type { HTMLDivAttributes } from "$lib/internal/index.js";
-import type { CustomEventHandler } from "$lib";
+import type { CustomEventHandler } from "$lib/index.js";
 import type { HTMLInputAttributes } from "svelte/elements";
 import type * as I from "./_types.js";
 
diff --git a/src/lib/bits/range-calendar/types.ts b/src/lib/bits/range-calendar/types.ts
index 49b299cf2..63a3c229a 100644
--- a/src/lib/bits/range-calendar/types.ts
+++ b/src/lib/bits/range-calendar/types.ts
@@ -1,4 +1,4 @@
-import type { HTMLDivAttributes } from "$lib/internal";
+import type { HTMLDivAttributes } from "$lib/internal/index.js";
 import type {
 	HTMLAttributes,
 	HTMLButtonAttributes,
@@ -7,7 +7,7 @@ import type {
 	HTMLThAttributes,
 } from "svelte/elements";
 import type * as I from "./_types.js";
-import type { CustomEventHandler } from "$lib";
+import type { CustomEventHandler } from "$lib/index.js";
 
 type Props = I.Props & Omit<HTMLDivAttributes, "placeholder">;
 
diff --git a/src/lib/bits/select/_types.ts b/src/lib/bits/select/_types.ts
index a7502003b..6055614cc 100644
--- a/src/lib/bits/select/_types.ts
+++ b/src/lib/bits/select/_types.ts
@@ -6,7 +6,7 @@
 import type { CreateSelectProps, SelectOptionProps } from "@melt-ui/svelte";
 import type { DOMElement, Expand, OmitFloating, OnChangeFn } from "$lib/internal/index.js";
 import type { ContentProps, ArrowProps } from "$lib/bits/floating/_types.js";
-import type { Selected } from "$lib";
+import type { Selected } from "$lib/index.js";
 
 export type WhenTrue<TrueOrFalse, IfTrue, IfFalse, IfNeither = IfTrue | IfFalse> = [
 	TrueOrFalse
diff --git a/src/lib/bits/toggle-group/components/toggle-group-item.svelte b/src/lib/bits/toggle-group/components/toggle-group-item.svelte
index c618cf549..c93577785 100644
--- a/src/lib/bits/toggle-group/components/toggle-group-item.svelte
+++ b/src/lib/bits/toggle-group/components/toggle-group-item.svelte
@@ -2,7 +2,7 @@
 	import { melt } from "@melt-ui/svelte";
 	import { getCtx } from "../ctx.js";
 	import type { ItemProps, ItemEvents } from "../types.js";
-	import { createDispatcher } from "$lib/internal";
+	import { createDispatcher } from "$lib/internal/index.js";
 
 	type $$Props = ItemProps;
 	type $$Events = ItemEvents;
diff --git a/src/lib/bits/tooltip/types.ts b/src/lib/bits/tooltip/types.ts
index f355e6783..8f1c84695 100644
--- a/src/lib/bits/tooltip/types.ts
+++ b/src/lib/bits/tooltip/types.ts
@@ -1,6 +1,6 @@
 import type { HTMLDivAttributes, Transition } from "$lib/internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
-import type { CustomEventHandler } from "$lib";
+import type { CustomEventHandler } from "$lib/index.js";
 import type * as I from "./_types.js";
 
 type Props = I.Props;
diff --git a/src/lib/helpers/index.ts b/src/lib/helpers/index.ts
index f681fb378..322b82e36 100644
--- a/src/lib/helpers/index.ts
+++ b/src/lib/helpers/index.ts
@@ -1,2 +1,2 @@
-export * from "./builders";
-export * from "./event-handlers";
+export * from "./builders.js";
+export * from "./event-handlers.js";
diff --git a/src/lib/internal/focus.ts b/src/lib/internal/focus.ts
index d35305822..66ea97fd2 100644
--- a/src/lib/internal/focus.ts
+++ b/src/lib/internal/focus.ts
@@ -1,4 +1,4 @@
-import { isBrowser } from ".";
+import { isBrowser } from "./index.js";
 
 /**
  * Handles `initialFocus` prop behavior for the
diff --git a/src/lib/internal/types.ts b/src/lib/internal/types.ts
index 4ddb75df5..1103f0095 100644
--- a/src/lib/internal/types.ts
+++ b/src/lib/internal/types.ts
@@ -1,7 +1,7 @@
 import type { Action } from "svelte/action";
 import type { HTMLAttributes } from "svelte/elements";
 import type { TransitionConfig } from "svelte/transition";
-import type { CreateDispatcher } from ".";
+import type { CreateDispatcher } from "./index.js";
 
 export type ObjectVariation<T> = T extends object ? T : never;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 420d7bc15..6a9b189aa 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from "$app/stores";
-	import { Button } from "@/components/ui/button";
+	import { Button } from "@/components/ui/button/index.js";
 
 	$: message = $page.status === 404 ? "Not Found" : "Something went wrong";
 </script>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ceb50b698..8f929814f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,12 +6,12 @@
 		SiteHeader,
 		TableOfContents,
 		TailwindIndicator,
-	} from "@/components";
-	import { navigation } from "@/config";
+	} from "@/components/index.js";
+	import { navigation } from "@/config/index.js";
 	import { ModeWatcher } from "mode-watcher";
 	import "@/styles/app.postcss";
 	import { page } from "$app/stores";
-	import { cn } from "@/utils";
+	import { cn } from "@/utils/index.js";
 </script>
 
 <ModeWatcher />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5d45a66cc..899302967 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { PageHeader, PageHeaderHeading, PageHeaderDescription } from "@/components";
+	import { PageHeader, PageHeaderHeading, PageHeaderDescription } from "@/components/index.js";
 </script>
 
 <PageHeader>
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
index 343cda62d..17bd9dc82 100644
--- a/src/routes/+page.ts
+++ b/src/routes/+page.ts
@@ -1,5 +1,5 @@
 import { redirect } from "@sveltejs/kit";
-import type { PageLoad } from "./$types";
+import type { PageLoad } from "./$types.js";
 
 export const load: PageLoad = async () => {
 	redirect(303, "/docs/introduction");
diff --git a/src/routes/docs/+page.ts b/src/routes/docs/+page.ts
index c82a22cca..3c3ce1bad 100644
--- a/src/routes/docs/+page.ts
+++ b/src/routes/docs/+page.ts
@@ -1,5 +1,5 @@
 import { redirect } from "@sveltejs/kit";
-import type { PageLoad } from "../$types";
+import type { PageLoad } from "../$types.js";
 
 export const load: PageLoad = async () => {
 	redirect(303, "/docs/introduction");
diff --git a/src/routes/docs/[...slug]/+page.svelte b/src/routes/docs/[...slug]/+page.svelte
index a5930776c..31db579e8 100644
--- a/src/routes/docs/[...slug]/+page.svelte
+++ b/src/routes/docs/[...slug]/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import "@/styles/markdown.postcss";
 	import type { SvelteComponent } from "svelte";
-	import type { PageData } from "./$types";
-	import { PageHeader, PageHeaderDescription, PageHeaderHeading } from "@/components";
+	import type { PageData } from "./$types.js";
+	import { PageHeader, PageHeaderDescription, PageHeaderHeading } from "@/components/index.js";
 	type Component = $$Generic<typeof SvelteComponent>;
 
 	export let data: PageData;
diff --git a/src/routes/docs/[...slug]/+page.ts b/src/routes/docs/[...slug]/+page.ts
index aa4c4f219..8c03b4f93 100644
--- a/src/routes/docs/[...slug]/+page.ts
+++ b/src/routes/docs/[...slug]/+page.ts
@@ -1,5 +1,5 @@
-import type { PageLoad } from "./$types";
-import { getDoc } from "@/utils/docs";
+import type { PageLoad } from "./$types.js";
+import { getDoc } from "@/utils/docs.js";
 
 export const load: PageLoad = async (event) => {
 	const { component, title, metadata } = await getDoc(event.params.slug);
diff --git a/src/routes/docs/components/[name]/+page.svelte b/src/routes/docs/components/[name]/+page.svelte
index a4c3ddec5..cd1a78ed2 100644
--- a/src/routes/docs/components/[name]/+page.svelte
+++ b/src/routes/docs/components/[name]/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import "@/styles/markdown.postcss";
 	import type { SvelteComponent } from "svelte";
-	import type { PageData } from "./$types";
-	import { PageHeader, PageHeaderDescription, PageHeaderHeading } from "@/components";
+	import type { PageData } from "./$types.js";
+	import { PageHeader, PageHeaderDescription, PageHeaderHeading } from "@/components/index.js";
 	type Component = $$Generic<typeof SvelteComponent>;
 
 	export let data: PageData;
diff --git a/src/routes/docs/components/[name]/+page.ts b/src/routes/docs/components/[name]/+page.ts
index beb5e2377..3d3d3001d 100644
--- a/src/routes/docs/components/[name]/+page.ts
+++ b/src/routes/docs/components/[name]/+page.ts
@@ -1,5 +1,5 @@
-import type { PageLoad } from "./$types";
-import { getComponentDoc } from "@/utils/docs";
+import type { PageLoad } from "./$types.js";
+import { getComponentDoc } from "@/utils/docs.js";
 
 export const load: PageLoad = async (event) => {
 	const { component, title, metadata, schemas } = await getComponentDoc(event.params.name);
diff --git a/src/routes/repro/+page.ts b/src/routes/repro/+page.ts
index 0e942c382..13a9e3e0a 100644
--- a/src/routes/repro/+page.ts
+++ b/src/routes/repro/+page.ts
@@ -1,5 +1,5 @@
 import { redirect } from "@sveltejs/kit";
-import type { PageLoad } from "./$types";
+import type { PageLoad } from "./$types.js";
 
 export const load: PageLoad = async () => {
 	redirect(303, "https://stackblitz.com/github/huntabyte/bits-ui-reproduction");
diff --git a/src/tests/accordion/Accordion.spec.ts b/src/tests/accordion/Accordion.spec.ts
index 6bb665e16..b8214f96b 100644
--- a/src/tests/accordion/Accordion.spec.ts
+++ b/src/tests/accordion/Accordion.spec.ts
@@ -1,10 +1,10 @@
 import { render } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import AccordionTest from "./AccordionTest.svelte";
 import type { Item } from "./AccordionTest.svelte";
-import { getTestKbd } from "../utils";
+import { getTestKbd } from "../utils.js";
 import AccordionTestIsolated from "./AccordionTestIsolated.svelte";
 
 const kbd = getTestKbd();
diff --git a/src/tests/accordion/AccordionTest.svelte b/src/tests/accordion/AccordionTest.svelte
index 36b0d7ea8..a7ff68c61 100644
--- a/src/tests/accordion/AccordionTest.svelte
+++ b/src/tests/accordion/AccordionTest.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <script lang="ts">
-	import { Accordion } from "$lib";
+	import { Accordion } from "$lib/index.js";
 
 	export let multiple = false;
 	export let disabled: Accordion.Props<false>["disabled"] = false;
diff --git a/src/tests/accordion/AccordionTestIsolated.svelte b/src/tests/accordion/AccordionTestIsolated.svelte
index 7afbd04f6..0f9914284 100644
--- a/src/tests/accordion/AccordionTestIsolated.svelte
+++ b/src/tests/accordion/AccordionTestIsolated.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Accordion } from "$lib";
+	import { Accordion } from "$lib/index.js";
 </script>
 
 <Accordion.Root value="1" data-testid="root">
diff --git a/src/tests/alert-dialog/AlertDialog.spec.ts b/src/tests/alert-dialog/AlertDialog.spec.ts
index 49c71c1e6..93812f772 100644
--- a/src/tests/alert-dialog/AlertDialog.spec.ts
+++ b/src/tests/alert-dialog/AlertDialog.spec.ts
@@ -1,11 +1,11 @@
 import { render, screen, type Matcher, type MatcherOptions } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import AlertDialogTest from "./AlertDialogTest.svelte";
 import { getTestKbd } from "../utils.js";
-import { sleep } from "$lib/internal";
-import type { AlertDialog } from "$lib";
+import { sleep } from "$lib/internal/index.js";
+import type { AlertDialog } from "$lib/index.js";
 
 const kbd = getTestKbd();
 
diff --git a/src/tests/alert-dialog/AlertDialogTest.svelte b/src/tests/alert-dialog/AlertDialogTest.svelte
index 15d15bb37..68bd3a076 100644
--- a/src/tests/alert-dialog/AlertDialogTest.svelte
+++ b/src/tests/alert-dialog/AlertDialogTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AlertDialog } from "$lib";
+	import { AlertDialog } from "$lib/index.js";
 
 	type $$Props = AlertDialog.Props;
 
diff --git a/src/tests/avatar/Avatar.spec.ts b/src/tests/avatar/Avatar.spec.ts
index f8b7fa5f3..417299f4a 100644
--- a/src/tests/avatar/Avatar.spec.ts
+++ b/src/tests/avatar/Avatar.spec.ts
@@ -1,5 +1,5 @@
 import { render } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import AvatarTest from "./AvatarTest.svelte";
diff --git a/src/tests/avatar/AvatarTest.svelte b/src/tests/avatar/AvatarTest.svelte
index 7d73ac894..a415cad68 100644
--- a/src/tests/avatar/AvatarTest.svelte
+++ b/src/tests/avatar/AvatarTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Avatar } from "$lib";
+	import { Avatar } from "$lib/index.js";
 	export let src: string;
 </script>
 
diff --git a/src/tests/calendar/Calendar.spec.ts b/src/tests/calendar/Calendar.spec.ts
index 6613d55ea..6b5c161ce 100644
--- a/src/tests/calendar/Calendar.spec.ts
+++ b/src/tests/calendar/Calendar.spec.ts
@@ -1,10 +1,10 @@
 import { render } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import { getTestKbd } from "../utils.js";
 import CalendarTest from "./CalendarTest.svelte";
-import type { Calendar } from "$lib";
+import type { Calendar } from "$lib/index.js";
 import { CalendarDate, CalendarDateTime, toZoned } from "@internationalized/date";
 import CalendarMultiTest from "./CalendarMultiTest.svelte";
 import { getSelectedDay, getSelectedDays } from "../helpers/calendar.js";
diff --git a/src/tests/calendar/CalendarMultiTest.svelte b/src/tests/calendar/CalendarMultiTest.svelte
index 336da242e..da352a7ae 100644
--- a/src/tests/calendar/CalendarMultiTest.svelte
+++ b/src/tests/calendar/CalendarMultiTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Calendar } from "$lib";
+	import { Calendar } from "$lib/index.js";
 
 	type $$Props = Calendar.Props<true>;
 
diff --git a/src/tests/calendar/CalendarTest.svelte b/src/tests/calendar/CalendarTest.svelte
index 434011260..1c4ea430c 100644
--- a/src/tests/calendar/CalendarTest.svelte
+++ b/src/tests/calendar/CalendarTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Calendar } from "$lib";
+	import { Calendar } from "$lib/index.js";
 
 	type $$Props = Calendar.Props;
 
diff --git a/src/tests/checkbox/Checkbox.spec.ts b/src/tests/checkbox/Checkbox.spec.ts
index 051ca30b3..d176eb504 100644
--- a/src/tests/checkbox/Checkbox.spec.ts
+++ b/src/tests/checkbox/Checkbox.spec.ts
@@ -1,11 +1,11 @@
 import { render } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import CheckboxTest from "./CheckboxTest.svelte";
 import { getTestKbd } from "../utils.js";
 import { tick } from "svelte";
-import type { Checkbox } from "$lib";
+import type { Checkbox } from "$lib/index.js";
 
 const kbd = getTestKbd();
 
diff --git a/src/tests/checkbox/CheckboxTest.svelte b/src/tests/checkbox/CheckboxTest.svelte
index 5f576a3a3..c3668452f 100644
--- a/src/tests/checkbox/CheckboxTest.svelte
+++ b/src/tests/checkbox/CheckboxTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Checkbox } from "$lib";
+	import { Checkbox } from "$lib/index.js";
 
 	type $$Props = Checkbox.Props;
 
diff --git a/src/tests/collapsible/Collapsible.spec.ts b/src/tests/collapsible/Collapsible.spec.ts
index a39b660d8..581720d1f 100644
--- a/src/tests/collapsible/Collapsible.spec.ts
+++ b/src/tests/collapsible/Collapsible.spec.ts
@@ -1,5 +1,5 @@
 import { render } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import CollapsibleTest from "./CollapsibleTest.svelte";
diff --git a/src/tests/collapsible/CollapsibleTest.svelte b/src/tests/collapsible/CollapsibleTest.svelte
index bd9646381..079570177 100644
--- a/src/tests/collapsible/CollapsibleTest.svelte
+++ b/src/tests/collapsible/CollapsibleTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Collapsible } from "$lib";
+	import { Collapsible } from "$lib/index.js";
 	type $$Props = Collapsible.Props;
 	export let open: Collapsible.Props["open"] = false;
 </script>
diff --git a/src/tests/combobox/Combobox.spec.ts b/src/tests/combobox/Combobox.spec.ts
index e08d85460..506d8833d 100644
--- a/src/tests/combobox/Combobox.spec.ts
+++ b/src/tests/combobox/Combobox.spec.ts
@@ -1,12 +1,12 @@
 import { render, waitFor } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import ComboboxTest from "./ComboboxTest.svelte";
 import type { Item } from "./ComboboxTest.svelte";
 import { getTestKbd } from "../utils.js";
-import type { Combobox } from "$lib";
-import { sleep } from "$lib/internal";
+import type { Combobox } from "$lib/index.js";
+import { sleep } from "$lib/internal/index.js";
 
 const kbd = getTestKbd();
 
diff --git a/src/tests/combobox/ComboboxTest.svelte b/src/tests/combobox/ComboboxTest.svelte
index 870f966de..ef14a4596 100644
--- a/src/tests/combobox/ComboboxTest.svelte
+++ b/src/tests/combobox/ComboboxTest.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <script lang="ts">
-	import { Combobox } from "$lib";
+	import { Combobox } from "$lib/index.js";
 
 	type $$Props = Combobox.Props<unknown> & {
 		options: Item[];
diff --git a/src/tests/context-menu/ContextMenu.spec.ts b/src/tests/context-menu/ContextMenu.spec.ts
index 98a7619d0..8700daf48 100644
--- a/src/tests/context-menu/ContextMenu.spec.ts
+++ b/src/tests/context-menu/ContextMenu.spec.ts
@@ -1,5 +1,5 @@
 import { render, screen, waitFor } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import ContextMenuTest from "./ContextMenuTest.svelte";
diff --git a/src/tests/context-menu/ContextMenuTest.svelte b/src/tests/context-menu/ContextMenuTest.svelte
index e5e430371..239c0f894 100644
--- a/src/tests/context-menu/ContextMenuTest.svelte
+++ b/src/tests/context-menu/ContextMenuTest.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <script lang="ts">
-	import { ContextMenu } from "$lib";
+	import { ContextMenu } from "$lib/index.js";
 
 	export let checked = false;
 	export let subChecked = false;
diff --git a/src/tests/date-field/DateField.spec.ts b/src/tests/date-field/DateField.spec.ts
index f31f64c64..22ff87564 100644
--- a/src/tests/date-field/DateField.spec.ts
+++ b/src/tests/date-field/DateField.spec.ts
@@ -1,10 +1,10 @@
 import { render } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import { getTestKbd } from "../utils.js";
 import DateFieldTest from "./DateFieldTest.svelte";
-import type { DateField } from "$lib";
+import type { DateField } from "$lib/index.js";
 import {
 	CalendarDate,
 	CalendarDateTime,
diff --git a/src/tests/date-field/DateFieldTest.svelte b/src/tests/date-field/DateFieldTest.svelte
index 4cb2945db..71756b184 100644
--- a/src/tests/date-field/DateFieldTest.svelte
+++ b/src/tests/date-field/DateFieldTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { DateField } from "$lib";
+	import { DateField } from "$lib/index.js";
 
 	type $$Props = DateField.Props;
 	export let placeholder: DateField.Props["placeholder"] = undefined;
diff --git a/src/tests/date-range-field/DateRangeField.spec.ts b/src/tests/date-range-field/DateRangeField.spec.ts
index f00e863e5..e29f6fc4b 100644
--- a/src/tests/date-range-field/DateRangeField.spec.ts
+++ b/src/tests/date-range-field/DateRangeField.spec.ts
@@ -1,10 +1,10 @@
 import { render } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import { getTestKbd } from "../utils.js";
 import DateRangeFieldTest from "./DateRangeFieldTest.svelte";
-import type { DateRangeField } from "$lib";
+import type { DateRangeField } from "$lib/index.js";
 import { CalendarDate, CalendarDateTime, toZoned } from "@internationalized/date";
 
 const kbd = getTestKbd();
diff --git a/src/tests/date-range-field/DateRangeFieldTest.svelte b/src/tests/date-range-field/DateRangeFieldTest.svelte
index e5daee83a..3acd0cfcf 100644
--- a/src/tests/date-range-field/DateRangeFieldTest.svelte
+++ b/src/tests/date-range-field/DateRangeFieldTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { DateRangeField } from "$lib";
+	import { DateRangeField } from "$lib/index.js";
 
 	type $$Props = DateRangeField.Props;
 	export let value: $$Props["value"] = undefined;
diff --git a/src/tests/dialog/Dialog.spec.ts b/src/tests/dialog/Dialog.spec.ts
index 3008ff3d6..19d983904 100644
--- a/src/tests/dialog/Dialog.spec.ts
+++ b/src/tests/dialog/Dialog.spec.ts
@@ -1,11 +1,11 @@
 import { render, screen, type Matcher, type MatcherOptions } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import DialogTest from "./DialogTest.svelte";
 import { getTestKbd } from "../utils.js";
-import { sleep } from "$lib/internal";
-import type { Dialog } from "$lib";
+import { sleep } from "$lib/internal/index.js";
+import type { Dialog } from "$lib/index.js";
 
 const kbd = getTestKbd();
 
diff --git a/src/tests/dialog/DialogTest.svelte b/src/tests/dialog/DialogTest.svelte
index d944787c2..a5bd1452f 100644
--- a/src/tests/dialog/DialogTest.svelte
+++ b/src/tests/dialog/DialogTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Dialog } from "$lib";
+	import { Dialog } from "$lib/index.js";
 
 	type $$Props = Dialog.Props;
 
diff --git a/src/tests/dropdown-menu/DropdownMenu.spec.ts b/src/tests/dropdown-menu/DropdownMenu.spec.ts
index 168d0a644..1f4db6cf5 100644
--- a/src/tests/dropdown-menu/DropdownMenu.spec.ts
+++ b/src/tests/dropdown-menu/DropdownMenu.spec.ts
@@ -1,5 +1,5 @@
 import { render, screen, waitFor } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import DropdownMenuTest from "./DropdownMenuTest.svelte";
diff --git a/src/tests/dropdown-menu/DropdownMenuTest.svelte b/src/tests/dropdown-menu/DropdownMenuTest.svelte
index f200d028d..9abbdee2a 100644
--- a/src/tests/dropdown-menu/DropdownMenuTest.svelte
+++ b/src/tests/dropdown-menu/DropdownMenuTest.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <script lang="ts">
-	import { DropdownMenu } from "$lib";
+	import { DropdownMenu } from "$lib/index.js";
 
 	export let checked = false;
 	export let subChecked = false;
diff --git a/src/tests/label/Label.spec.ts b/src/tests/label/Label.spec.ts
index 3d090e147..e6ee9a039 100644
--- a/src/tests/label/Label.spec.ts
+++ b/src/tests/label/Label.spec.ts
@@ -1,5 +1,5 @@
 import { render } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import LabelTest from "./LabelTest.svelte";
diff --git a/src/tests/label/LabelTest.svelte b/src/tests/label/LabelTest.svelte
index f816df92b..c2828022b 100644
--- a/src/tests/label/LabelTest.svelte
+++ b/src/tests/label/LabelTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Label } from "$lib";
+	import { Label } from "$lib/index.js";
 </script>
 
 <main>
diff --git a/src/tests/link-preview/LinkPreview.spec.ts b/src/tests/link-preview/LinkPreview.spec.ts
index 8d6ce1b8d..e368c78a2 100644
--- a/src/tests/link-preview/LinkPreview.spec.ts
+++ b/src/tests/link-preview/LinkPreview.spec.ts
@@ -1,10 +1,10 @@
 import { render, waitFor } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import { getTestKbd } from "../utils.js";
 import LinkPreviewTest from "./LinkPreviewTest.svelte";
-import type { LinkPreview } from "$lib";
+import type { LinkPreview } from "$lib/index.js";
 
 const kbd = getTestKbd();
 
diff --git a/src/tests/link-preview/LinkPreviewTest.svelte b/src/tests/link-preview/LinkPreviewTest.svelte
index e7d2cb966..6c34ee5d7 100644
--- a/src/tests/link-preview/LinkPreviewTest.svelte
+++ b/src/tests/link-preview/LinkPreviewTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LinkPreview } from "$lib";
+	import { LinkPreview } from "$lib/index.js";
 
 	type $$Props = LinkPreview.Props;
 
diff --git a/src/tests/menubar/Menubar.spec.ts b/src/tests/menubar/Menubar.spec.ts
index b9446e1fa..323b85035 100644
--- a/src/tests/menubar/Menubar.spec.ts
+++ b/src/tests/menubar/Menubar.spec.ts
@@ -1,10 +1,10 @@
 import { render, screen } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import MenubarTest from "./MenubarTest.svelte";
 import { getTestKbd } from "../utils.js";
-import type { Menubar } from "$lib";
+import type { Menubar } from "$lib/index.js";
 
 const kbd = getTestKbd();
 
diff --git a/src/tests/menubar/MenubarMenu.svelte b/src/tests/menubar/MenubarMenu.svelte
index 19ceaecdd..b2eef40e9 100644
--- a/src/tests/menubar/MenubarMenu.svelte
+++ b/src/tests/menubar/MenubarMenu.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <script lang="ts">
-	import { Menubar } from "$lib";
+	import { Menubar } from "$lib/index.js";
 
 	export let id: string;
 </script>
diff --git a/src/tests/menubar/MenubarTest.svelte b/src/tests/menubar/MenubarTest.svelte
index c4fd5a844..f5e37ab6b 100644
--- a/src/tests/menubar/MenubarTest.svelte
+++ b/src/tests/menubar/MenubarTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Menubar } from "$lib";
+	import { Menubar } from "$lib/index.js";
 	import MenubarMenu from "./MenubarMenu.svelte";
 
 	type $$Props = Menubar.Props;
diff --git a/src/tests/pagination/Pagination.spec.ts b/src/tests/pagination/Pagination.spec.ts
index d42b9ac13..c14d23de5 100644
--- a/src/tests/pagination/Pagination.spec.ts
+++ b/src/tests/pagination/Pagination.spec.ts
@@ -1,8 +1,8 @@
 // NOTE: these tests were shamelessly copied from melt-ui 🥲
 import { render } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
-import type { Pagination } from "$lib";
+import type { Pagination } from "$lib/index.js";
 import PaginationTest from "./PaginationTest.svelte";
 import { isHTMLElement } from "@melt-ui/svelte/internal/helpers";
 
diff --git a/src/tests/pagination/PaginationTest.svelte b/src/tests/pagination/PaginationTest.svelte
index f9049cbf2..58206f978 100644
--- a/src/tests/pagination/PaginationTest.svelte
+++ b/src/tests/pagination/PaginationTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Pagination } from "$lib";
+	import { Pagination } from "$lib/index.js";
 
 	type $$Props = Pagination.Props;
 
diff --git a/src/tests/pin-input/PinInput.spec.ts b/src/tests/pin-input/PinInput.spec.ts
index 4b95ab745..392d2926b 100644
--- a/src/tests/pin-input/PinInput.spec.ts
+++ b/src/tests/pin-input/PinInput.spec.ts
@@ -1,9 +1,9 @@
 import { render, waitFor } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import { getTestKbd } from "../utils.js";
-import type { PinInput } from "$lib";
+import type { PinInput } from "$lib/index.js";
 import PinInputTest from "./PinInputTest.svelte";
 
 const kbd = getTestKbd();
diff --git a/src/tests/pin-input/PinInputTest.svelte b/src/tests/pin-input/PinInputTest.svelte
index 9e7a4db97..69aa353c5 100644
--- a/src/tests/pin-input/PinInputTest.svelte
+++ b/src/tests/pin-input/PinInputTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { PinInput } from "$lib";
+	import { PinInput } from "$lib/index.js";
 
 	type $$Props = PinInput.Props;
 
diff --git a/src/tests/popover/Popover.spec.ts b/src/tests/popover/Popover.spec.ts
index 9c2ae82df..6b175c636 100644
--- a/src/tests/popover/Popover.spec.ts
+++ b/src/tests/popover/Popover.spec.ts
@@ -1,10 +1,10 @@
 import { render, waitFor } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import { getTestKbd } from "../utils.js";
 import PopoverTest from "./PopoverTest.svelte";
-import type { Popover } from "$lib";
+import type { Popover } from "$lib/index.js";
 import { sleep } from "$lib/internal/sleep.js";
 
 const kbd = getTestKbd();
diff --git a/src/tests/popover/PopoverTest.svelte b/src/tests/popover/PopoverTest.svelte
index 9b30adfd4..f747528c4 100644
--- a/src/tests/popover/PopoverTest.svelte
+++ b/src/tests/popover/PopoverTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Popover } from "$lib";
+	import { Popover } from "$lib/index.js";
 
 	type $$Props = Popover.Props;
 
diff --git a/src/tests/progress/Progress.spec.ts b/src/tests/progress/Progress.spec.ts
index 8c5e2c937..f56869ce4 100644
--- a/src/tests/progress/Progress.spec.ts
+++ b/src/tests/progress/Progress.spec.ts
@@ -1,9 +1,9 @@
 import { render } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import ProgressTest from "./ProgressTest.svelte";
-import type { Progress } from "$lib";
+import type { Progress } from "$lib/index.js";
 
 function setup(props: Progress.Props = {}) {
 	const user = userEvent.setup();
diff --git a/src/tests/progress/ProgressTest.svelte b/src/tests/progress/ProgressTest.svelte
index 0cc67a60f..da9e70a17 100644
--- a/src/tests/progress/ProgressTest.svelte
+++ b/src/tests/progress/ProgressTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Progress } from "$lib";
+	import { Progress } from "$lib/index.js";
 
 	type $$Props = Progress.Props;
 	export let value: $$Props["value"] = 0;
diff --git a/src/tests/radio-group/RadioGroup.spec.ts b/src/tests/radio-group/RadioGroup.spec.ts
index d00474830..282496348 100644
--- a/src/tests/radio-group/RadioGroup.spec.ts
+++ b/src/tests/radio-group/RadioGroup.spec.ts
@@ -1,11 +1,11 @@
 import { render, waitFor } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import RadioGroupTest from "./RadioGroupTest.svelte";
 import type { Item } from "./RadioGroupTest.svelte";
 import { getTestKbd } from "../utils.js";
-import type { RadioGroup } from "$lib";
+import type { RadioGroup } from "$lib/index.js";
 
 const kbd = getTestKbd();
 
diff --git a/src/tests/radio-group/RadioGroupTest.svelte b/src/tests/radio-group/RadioGroupTest.svelte
index 0a83c747e..19ee0546a 100644
--- a/src/tests/radio-group/RadioGroupTest.svelte
+++ b/src/tests/radio-group/RadioGroupTest.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <script lang="ts">
-	import { RadioGroup } from "$lib";
+	import { RadioGroup } from "$lib/index.js";
 
 	type $$Props = RadioGroup.Props & {
 		items: Item[];
diff --git a/src/tests/range-calendar/RangeCalendar.spec.ts b/src/tests/range-calendar/RangeCalendar.spec.ts
index 27308d5ad..8063d4a2d 100644
--- a/src/tests/range-calendar/RangeCalendar.spec.ts
+++ b/src/tests/range-calendar/RangeCalendar.spec.ts
@@ -1,10 +1,10 @@
 import { render } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import { getTestKbd } from "../utils.js";
 import RangeCalendarTest from "./RangeCalendarTest.svelte";
-import type { RangeCalendar } from "$lib";
+import type { RangeCalendar } from "$lib/index.js";
 import { CalendarDate, CalendarDateTime, toZoned } from "@internationalized/date";
 import { getSelectedDays } from "../helpers/calendar.js";
 import { tick } from "svelte";
diff --git a/src/tests/range-calendar/RangeCalendarTest.svelte b/src/tests/range-calendar/RangeCalendarTest.svelte
index ff797e880..98926f4e1 100644
--- a/src/tests/range-calendar/RangeCalendarTest.svelte
+++ b/src/tests/range-calendar/RangeCalendarTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { RangeCalendar } from "$lib";
+	import { RangeCalendar } from "$lib/index.js";
 
 	type $$Props = RangeCalendar.Props;
 
diff --git a/src/tests/select/Select.spec.ts b/src/tests/select/Select.spec.ts
index 66f3c8fe9..eb5fc5d39 100644
--- a/src/tests/select/Select.spec.ts
+++ b/src/tests/select/Select.spec.ts
@@ -1,12 +1,12 @@
 import { render, waitFor } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import SelectTest from "./SelectTest.svelte";
 import type { Item } from "./SelectTest.svelte";
 import { getTestKbd } from "../utils.js";
-import type { Select } from "$lib";
-import { sleep } from "$lib/internal";
+import type { Select } from "$lib/index.js";
+import { sleep } from "$lib/internal/index.js";
 
 const kbd = getTestKbd();
 
diff --git a/src/tests/select/SelectTest.svelte b/src/tests/select/SelectTest.svelte
index 514c4381e..89fa211ae 100644
--- a/src/tests/select/SelectTest.svelte
+++ b/src/tests/select/SelectTest.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <script lang="ts">
-	import { Select } from "$lib";
+	import { Select } from "$lib/index.js";
 
 	type $$Props = Select.Props<unknown> & {
 		options: Item[];
diff --git a/src/tests/separator/Separator.spec.ts b/src/tests/separator/Separator.spec.ts
index d5e1d080e..eb47e8b72 100644
--- a/src/tests/separator/Separator.spec.ts
+++ b/src/tests/separator/Separator.spec.ts
@@ -1,9 +1,9 @@
 import { render } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import SeparatorTest from "./SeparatorTest.svelte";
-import type { Separator } from "$lib";
+import type { Separator } from "$lib/index.js";
 
 function setup(props: Separator.Props = {}) {
 	const user = userEvent.setup();
diff --git a/src/tests/separator/SeparatorTest.svelte b/src/tests/separator/SeparatorTest.svelte
index 094fa6a7c..720236afe 100644
--- a/src/tests/separator/SeparatorTest.svelte
+++ b/src/tests/separator/SeparatorTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Separator } from "$lib";
+	import { Separator } from "$lib/index.js";
 
 	type $$Props = Separator.Props;
 </script>
diff --git a/src/tests/slider/Slider.spec.ts b/src/tests/slider/Slider.spec.ts
index a43cf63bd..95c668012 100644
--- a/src/tests/slider/Slider.spec.ts
+++ b/src/tests/slider/Slider.spec.ts
@@ -1,12 +1,12 @@
 // Credit to @paoloricciuti for this code via melt :)
 import { render } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import SliderTest from "./SliderTest.svelte";
 import SliderRangeTest from "./SliderRangeTest.svelte";
-import type { Slider } from "$lib";
-import { getTestKbd } from "../utils";
+import type { Slider } from "$lib/index.js";
+import { getTestKbd } from "../utils.js";
 
 const kbd = getTestKbd();
 
diff --git a/src/tests/slider/SliderRangeTest.svelte b/src/tests/slider/SliderRangeTest.svelte
index 3f0c67b9a..33d451e0e 100644
--- a/src/tests/slider/SliderRangeTest.svelte
+++ b/src/tests/slider/SliderRangeTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Slider } from "$lib";
+	import { Slider } from "$lib/index.js";
 
 	type $$Props = Slider.Props;
 	export let value = [20, 80];
diff --git a/src/tests/slider/SliderTest.svelte b/src/tests/slider/SliderTest.svelte
index 4ebda5c5f..4c329c481 100644
--- a/src/tests/slider/SliderTest.svelte
+++ b/src/tests/slider/SliderTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Slider } from "$lib";
+	import { Slider } from "$lib/index.js";
 
 	type $$Props = Slider.Props;
 	export let value: $$Props["value"] = [30];
diff --git a/src/tests/switch/Switch.spec.ts b/src/tests/switch/Switch.spec.ts
index 0f85e6394..d05a8cc76 100644
--- a/src/tests/switch/Switch.spec.ts
+++ b/src/tests/switch/Switch.spec.ts
@@ -1,10 +1,10 @@
 import { render } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import SwitchTest from "./SwitchTest.svelte";
 import { getTestKbd } from "../utils.js";
-import type { Switch } from "$lib";
+import type { Switch } from "$lib/index.js";
 
 const kbd = getTestKbd();
 
diff --git a/src/tests/switch/SwitchTest.svelte b/src/tests/switch/SwitchTest.svelte
index a1e0ebe68..86b7a0660 100644
--- a/src/tests/switch/SwitchTest.svelte
+++ b/src/tests/switch/SwitchTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Switch } from "$lib";
+	import { Switch } from "$lib/index.js";
 
 	type $$Props = Switch.Props;
 
diff --git a/src/tests/tabs/Tabs.spec.ts b/src/tests/tabs/Tabs.spec.ts
index f928a1c5b..d6bf761fb 100644
--- a/src/tests/tabs/Tabs.spec.ts
+++ b/src/tests/tabs/Tabs.spec.ts
@@ -1,11 +1,11 @@
 import { render } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import TabsTest from "./TabsTest.svelte";
 import type { Item } from "./TabsTest.svelte";
 import { getTestKbd } from "../utils.js";
-import type { Tabs } from "$lib";
+import type { Tabs } from "$lib/index.js";
 
 const kbd = getTestKbd();
 
diff --git a/src/tests/tabs/TabsTest.svelte b/src/tests/tabs/TabsTest.svelte
index 2d5ca5735..3225bc164 100644
--- a/src/tests/tabs/TabsTest.svelte
+++ b/src/tests/tabs/TabsTest.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <script lang="ts">
-	import { Tabs } from "$lib";
+	import { Tabs } from "$lib/index.js";
 
 	type $$Props = Tabs.Props & {
 		items?: Item[];
diff --git a/src/tests/toggle-group/ToggleGroup.spec.ts b/src/tests/toggle-group/ToggleGroup.spec.ts
index 92a118741..89de1268e 100644
--- a/src/tests/toggle-group/ToggleGroup.spec.ts
+++ b/src/tests/toggle-group/ToggleGroup.spec.ts
@@ -1,10 +1,10 @@
 import { render } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import ToggleGroupTest from "./ToggleGroupTest.svelte";
 import { getTestKbd } from "../utils.js";
-import type { ToggleGroup } from "$lib";
+import type { ToggleGroup } from "$lib/index.js";
 import type { Item } from "./ToggleGroupTest.svelte";
 import ToggleGroupMultipleTest from "./ToggleGroupMultipleTest.svelte";
 
diff --git a/src/tests/toggle-group/ToggleGroupMultipleTest.svelte b/src/tests/toggle-group/ToggleGroupMultipleTest.svelte
index cebbbe8bb..d6ff0d701 100644
--- a/src/tests/toggle-group/ToggleGroupMultipleTest.svelte
+++ b/src/tests/toggle-group/ToggleGroupMultipleTest.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <script lang="ts">
-	import { ToggleGroup } from "$lib";
+	import { ToggleGroup } from "$lib/index.js";
 
 	type $$Props = ToggleGroup.Props<"multiple"> & {
 		items: Item[];
diff --git a/src/tests/toggle-group/ToggleGroupTest.svelte b/src/tests/toggle-group/ToggleGroupTest.svelte
index fe48e38ca..8c458cabf 100644
--- a/src/tests/toggle-group/ToggleGroupTest.svelte
+++ b/src/tests/toggle-group/ToggleGroupTest.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <script lang="ts">
-	import { ToggleGroup } from "$lib";
+	import { ToggleGroup } from "$lib/index.js";
 
 	type $$Props = ToggleGroup.Props<"single"> & {
 		items: Item[];
diff --git a/src/tests/toggle/Toggle.spec.ts b/src/tests/toggle/Toggle.spec.ts
index b79ad865b..efe97a128 100644
--- a/src/tests/toggle/Toggle.spec.ts
+++ b/src/tests/toggle/Toggle.spec.ts
@@ -1,10 +1,10 @@
 import { render } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import ToggleTest from "./ToggleTest.svelte";
 import { getTestKbd } from "../utils.js";
-import type { Toggle } from "$lib";
+import type { Toggle } from "$lib/index.js";
 
 const kbd = getTestKbd();
 
diff --git a/src/tests/toggle/ToggleTest.svelte b/src/tests/toggle/ToggleTest.svelte
index 7697e6e9b..130151d85 100644
--- a/src/tests/toggle/ToggleTest.svelte
+++ b/src/tests/toggle/ToggleTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Toggle } from "$lib";
+	import { Toggle } from "$lib/index.js";
 
 	type $$Props = Toggle.Props;
 	export let pressed: $$Props["pressed"] = false;
diff --git a/src/tests/toolbar/Toolbar.spec.ts b/src/tests/toolbar/Toolbar.spec.ts
index 4401d95ba..d9b32f592 100644
--- a/src/tests/toolbar/Toolbar.spec.ts
+++ b/src/tests/toolbar/Toolbar.spec.ts
@@ -1,9 +1,9 @@
 import { render } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import { getTestKbd } from "../utils.js";
-import type { Toolbar } from "$lib";
+import type { Toolbar } from "$lib/index.js";
 import ToolbarTest from "./ToolbarTest.svelte";
 
 const kbd = getTestKbd();
diff --git a/src/tests/toolbar/ToolbarTest.svelte b/src/tests/toolbar/ToolbarTest.svelte
index bc764a064..af55aab55 100644
--- a/src/tests/toolbar/ToolbarTest.svelte
+++ b/src/tests/toolbar/ToolbarTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Toolbar } from "$lib";
+	import { Toolbar } from "$lib/index.js";
 
 	type $$Props = Toolbar.Props & {
 		multipleProps?: Toolbar.GroupProps<"multiple">;
diff --git a/src/tests/tooltip/Tooltip.spec.ts b/src/tests/tooltip/Tooltip.spec.ts
index 1f437859e..f02c4873c 100644
--- a/src/tests/tooltip/Tooltip.spec.ts
+++ b/src/tests/tooltip/Tooltip.spec.ts
@@ -1,10 +1,10 @@
 import { render, waitFor } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import { getTestKbd } from "../utils.js";
 import TooltipTest from "./TooltipTest.svelte";
-import type { Tooltip } from "$lib";
+import type { Tooltip } from "$lib/index.js";
 
 const kbd = getTestKbd();
 
diff --git a/src/tests/tooltip/TooltipTest.svelte b/src/tests/tooltip/TooltipTest.svelte
index e3aca1795..be49adc6b 100644
--- a/src/tests/tooltip/TooltipTest.svelte
+++ b/src/tests/tooltip/TooltipTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Tooltip } from "$lib";
+	import { Tooltip } from "$lib/index.js";
 
 	type $$Props = Tooltip.Props;
 
diff --git a/src/utils/docs.ts b/src/utils/docs.ts
index c97d1705c..1331e75fe 100644
--- a/src/utils/docs.ts
+++ b/src/utils/docs.ts
@@ -1,7 +1,7 @@
-import { getAPISchemas, isBit } from "@/content/api-reference";
-import type { APISchema } from "@/types";
+import { getAPISchemas, isBit } from "@/content/api-reference/index.js";
+import type { APISchema } from "@/types/index.js";
 import { error, redirect } from "@sveltejs/kit";
-import type { Doc } from "contentlayer/generated";
+import type { Doc } from "contentlayer/generated/index.js";
 
 export type FrontMatter = Pick<Doc, "title" | "description">;
 
diff --git a/src/utils/index.ts b/src/utils/index.ts
index e68721d22..b472fbb3a 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,5 +1,5 @@
-export * from "./styles";
-export * from "./copy-code";
-export * from "./markdown";
-export * from "./styles";
-export * from "./transitions";
+export * from "./styles.js";
+export * from "./copy-code.js";
+export * from "./markdown.js";
+export * from "./styles.js";
+export * from "./transitions.js";
diff --git a/tsconfig.json b/tsconfig.json
index 48dcee95e..6193bf91c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,7 +9,8 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
-		"moduleResolution": "Bundler"
+		"moduleResolution": "NodeNext",
+		"module": "NodeNext"
 	},
 	"include": [
 		"./svelte-kit/ambient.d.ts",