diff --git a/.github/workflows/spelling.yml b/.github/workflows/spelling.yml
index 38dece4..f8513f3 100644
--- a/.github/workflows/spelling.yml
+++ b/.github/workflows/spelling.yml
@@ -59,19 +59,19 @@ name: Check Spelling
 on:
   push:
     branches:
-    - "**"
+      - '**'
     tags-ignore:
-    - "**"
+      - '**'
   pull_request_target:
     branches:
-    - "**"
+      - '**'
     types:
-    - 'opened'
-    - 'reopened'
-    - 'synchronize'
+      - 'opened'
+      - 'reopened'
+      - 'synchronize'
   issue_comment:
     types:
-    - 'created'
+      - 'created'
 
 jobs:
   spelling:
@@ -90,23 +90,22 @@ jobs:
       # note: If you use only_check_changed_files, you do not want cancel-in-progress
       cancel-in-progress: true
     steps:
-    - name: check-spelling
-      id: spelling
-      uses: check-spelling/check-spelling@main
-      with:
-        suppress_push_for_open_pull_request: ${{ github.actor != 'dependabot[bot]' && 1 }}
-        checkout: true
-        check_file_names: 1
-        spell_check_this: check-spelling/spell-check-this@prerelease
-        post_comment: 0
-        use_magic_file: 1
-        report-timing: 1
-        warnings: bad-regex,binary-file,deprecated-feature,large-file,limited-references,no-newline-at-eof,noisy-file,non-alpha-in-dictionary,token-is-substring,unexpected-line-ending,whitespace-in-dictionary,minified-file,unsupported-configuration,no-files-to-check
-        experimental_apply_changes_via_bot: 1
-        use_sarif: ${{ (!github.event.pull_request || (github.event.pull_request.head.repo.full_name == github.repository)) && 1 }}
-        extra_dictionary_limit: 20
-        extra_dictionaries:
-          cspell:software-terms/dict/softwareTerms.txt
+      - name: check-spelling
+        id: spelling
+        uses: check-spelling/check-spelling@main
+        with:
+          suppress_push_for_open_pull_request: ${{ github.actor != 'dependabot[bot]' && 1 }}
+          checkout: true
+          check_file_names: 1
+          spell_check_this: check-spelling/spell-check-this@prerelease
+          post_comment: 0
+          use_magic_file: 1
+          report-timing: 1
+          warnings: bad-regex,binary-file,deprecated-feature,large-file,limited-references,no-newline-at-eof,noisy-file,non-alpha-in-dictionary,token-is-substring,unexpected-line-ending,whitespace-in-dictionary,minified-file,unsupported-configuration,no-files-to-check
+          experimental_apply_changes_via_bot: 1
+          use_sarif: ${{ (!github.event.pull_request || (github.event.pull_request.head.repo.full_name == github.repository)) && 1 }}
+          extra_dictionary_limit: 20
+          extra_dictionaries: cspell:software-terms/dict/softwareTerms.txt
 
   comment-push:
     name: Report (Push)
@@ -117,12 +116,12 @@ jobs:
       contents: write
     if: (success() || failure()) && needs.spelling.outputs.followup && github.event_name == 'push'
     steps:
-    - name: comment
-      uses: check-spelling/check-spelling@main
-      with:
-        checkout: true
-        spell_check_this: check-spelling/spell-check-this@prerelease
-        task: ${{ needs.spelling.outputs.followup }}
+      - name: comment
+        uses: check-spelling/check-spelling@main
+        with:
+          checkout: true
+          spell_check_this: check-spelling/spell-check-this@prerelease
+          task: ${{ needs.spelling.outputs.followup }}
 
   comment-pr:
     name: Report (PR)
@@ -134,13 +133,13 @@ jobs:
       pull-requests: write
     if: (success() || failure()) && needs.spelling.outputs.followup && contains(github.event_name, 'pull_request')
     steps:
-    - name: comment
-      uses: check-spelling/check-spelling@main
-      with:
-        checkout: true
-        spell_check_this: check-spelling/spell-check-this@prerelease
-        task: ${{ needs.spelling.outputs.followup }}
-        experimental_apply_changes_via_bot: 1
+      - name: comment
+        uses: check-spelling/check-spelling@main
+        with:
+          checkout: true
+          spell_check_this: check-spelling/spell-check-this@prerelease
+          task: ${{ needs.spelling.outputs.followup }}
+          experimental_apply_changes_via_bot: 1
 
   update:
     name: Update PR
@@ -150,17 +149,17 @@ jobs:
       actions: read
     runs-on: ubuntu-latest
     if: ${{
-        github.event_name == 'issue_comment' &&
-        github.event.issue.pull_request &&
-        contains(github.event.comment.body, '@check-spelling-bot apply')
+      github.event_name == 'issue_comment' &&
+      github.event.issue.pull_request &&
+      contains(github.event.comment.body, '@check-spelling-bot apply')
       }}
     concurrency:
       group: spelling-update-${{ github.event.issue.number }}
       cancel-in-progress: false
     steps:
-    - name: apply spelling updates
-      uses: check-spelling/check-spelling@main
-      with:
-        experimental_apply_changes_via_bot: 1
-        checkout: true
-        ssh_key: "${{ secrets.CHECK_SPELLING }}"
+      - name: apply spelling updates
+        uses: check-spelling/check-spelling@main
+        with:
+          experimental_apply_changes_via_bot: 1
+          checkout: true
+          ssh_key: '${{ secrets.CHECK_SPELLING }}'
diff --git a/components.json b/components.json
index a228b03..981151d 100644
--- a/components.json
+++ b/components.json
@@ -11,4 +11,4 @@
 		"utils": "$lib/utils"
 	},
 	"typescript": true
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 669ca22..01aa97c 100644
--- a/package.json
+++ b/package.json
@@ -1,63 +1,63 @@
 {
-  "name": "coredump",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "preview": "vite preview",
-    "test": "playwright test",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write ."
-  },
-  "devDependencies": {
-    "@faker-js/faker": "^8.4.1",
-    "@playwright/test": "^1.28.1",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "@types/eslint": "^8.56.0",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^7.0.0",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.35.1",
-    "postcss": "^8.4.38",
-    "prettier": "^3.1.1",
-    "prettier-plugin-svelte": "^3.1.2",
-    "svelte": "^4.2.7",
-    "svelte-check": "^3.6.0",
-    "svelte-typewriter": "^3.2.3",
-    "tailwindcss": "^3.4.3",
-    "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
-    "vite": "^5.0.3"
-  },
-  "type": "module",
-  "trustedDependencies": [
-    "svelte-preprocess",
-    "@sveltejs/kit",
-    "esbuild",
-    "@sveltejs/adapter-vercel"
-  ],
-  "dependencies": {
-    "@fontsource/geist-mono": "^5.0.2",
-    "@fontsource/geist-sans": "^5.0.2",
-    "@fontsource/merriweather": "^5.0.12",
-    "@fontsource/zilla-slab": "^5.0.12",
-    "@sveltejs/adapter-vercel": "^5.2.0",
-    "bits-ui": "^0.21.2",
-    "clsx": "^2.1.0",
-    "marked": "^12.0.1",
-    "marked-alert": "^2.0.1",
-    "marked-katex-extension": "^5.0.1",
-    "mode-watcher": "^0.3.0",
-    "svelte-radix": "^1.1.0",
-    "svelte-sonner": "^0.3.21",
-    "tailwind-merge": "^2.2.2",
-    "tailwind-variants": "^0.2.1",
-    "vaul-svelte": "^0.3.0"
-  }
+	"name": "coredump",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"test": "playwright test",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@faker-js/faker": "^8.4.1",
+		"@playwright/test": "^1.28.1",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@types/eslint": "^8.56.0",
+		"@typescript-eslint/eslint-plugin": "^7.0.0",
+		"@typescript-eslint/parser": "^7.0.0",
+		"autoprefixer": "^10.4.19",
+		"eslint": "^8.56.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.35.1",
+		"postcss": "^8.4.38",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.6.0",
+		"svelte-typewriter": "^3.2.3",
+		"tailwindcss": "^3.4.3",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.3"
+	},
+	"type": "module",
+	"trustedDependencies": [
+		"svelte-preprocess",
+		"@sveltejs/kit",
+		"esbuild",
+		"@sveltejs/adapter-vercel"
+	],
+	"dependencies": {
+		"@fontsource/geist-mono": "^5.0.2",
+		"@fontsource/geist-sans": "^5.0.2",
+		"@fontsource/merriweather": "^5.0.12",
+		"@fontsource/zilla-slab": "^5.0.12",
+		"@sveltejs/adapter-vercel": "^5.2.0",
+		"bits-ui": "^0.21.2",
+		"clsx": "^2.1.0",
+		"marked": "^12.0.1",
+		"marked-alert": "^2.0.1",
+		"marked-katex-extension": "^5.0.1",
+		"mode-watcher": "^0.3.0",
+		"svelte-radix": "^1.1.0",
+		"svelte-sonner": "^0.3.21",
+		"tailwind-merge": "^2.2.2",
+		"tailwind-variants": "^0.2.1",
+		"vaul-svelte": "^0.3.0"
+	}
 }
diff --git a/postcss.config.js b/postcss.config.js
index 2e7af2b..0f77216 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,6 @@
 export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+};
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
index 57d643b..2c5ea4c 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/utils.js";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = AlertDialogPrimitive.ActionProps;
 	type $$Events = AlertDialogPrimitive.ActionEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
index ef0a953..edf6d78 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/utils.js";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = AlertDialogPrimitive.CancelProps;
 	type $$Events = AlertDialogPrimitive.CancelEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <AlertDialogPrimitive.Cancel
-	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+	class={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
 	{...$$restProps}
 	on:click
 	on:keydown
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
index 833f262..3830958 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import * as AlertDialog from "./index.js";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import * as AlertDialog from './index.js';
+	import { cn, flyAndScale } from '$lib/utils.js';
 
 	type $$Props = AlertDialogPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = undefined;
 	export { className as class };
 </script>
 
@@ -17,7 +17,7 @@
 		{transition}
 		{transitionConfig}
 		class={cn(
-			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg  sm:rounded-lg md:w-full",
+			'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg  sm:rounded-lg md:w-full',
 			className
 		)}
 		{...$$restProps}
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
index 18acce9..c77c684 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = AlertDialogPrimitive.DescriptionProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <AlertDialogPrimitive.Description
-	class={cn("text-sm text-muted-foreground", className)}
+	class={cn('text-sm text-muted-foreground', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
index a235d1f..329304a 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <div
-	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
index 2650ef9..434c29c 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...$$restProps}>
+<div class={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...$$restProps}>
 	<slot />
 </div>
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
index cd5a786..b8987b8 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { fade } from "svelte/transition";
-	import { cn } from "$lib/utils.js";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { fade } from 'svelte/transition';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = AlertDialogPrimitive.OverlayProps;
 
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = fade;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		duration: 150,
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = fade;
+	export let transitionConfig: $$Props['transitionConfig'] = {
+		duration: 150
 	};
 	export { className as class };
 </script>
@@ -16,6 +16,6 @@
 <AlertDialogPrimitive.Overlay
 	{transition}
 	{transitionConfig}
-	class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm", className)}
+	class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm', className)}
 	{...$$restProps}
 />
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
index e227219..347119a 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
 
 	type $$Props = AlertDialogPrimitive.PortalProps;
 </script>
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
index 7f98004..75287f3 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = AlertDialogPrimitive.TitleProps;
 
-	let className: $$Props["class"] = undefined;
-	export let level: $$Props["level"] = "h3";
+	let className: $$Props['class'] = undefined;
+	export let level: $$Props['level'] = 'h3';
 	export { className as class };
 </script>
 
-<AlertDialogPrimitive.Title class={cn("text-lg font-semibold", className)} {level} {...$$restProps}>
+<AlertDialogPrimitive.Title class={cn('text-lg font-semibold', className)} {level} {...$$restProps}>
 	<slot />
 </AlertDialogPrimitive.Title>
diff --git a/src/lib/components/ui/alert-dialog/index.ts b/src/lib/components/ui/alert-dialog/index.ts
index be56dd7..fe3ff29 100644
--- a/src/lib/components/ui/alert-dialog/index.ts
+++ b/src/lib/components/ui/alert-dialog/index.ts
@@ -1,14 +1,14 @@
-import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
 
-import Title from "./alert-dialog-title.svelte";
-import Action from "./alert-dialog-action.svelte";
-import Cancel from "./alert-dialog-cancel.svelte";
-import Portal from "./alert-dialog-portal.svelte";
-import Footer from "./alert-dialog-footer.svelte";
-import Header from "./alert-dialog-header.svelte";
-import Overlay from "./alert-dialog-overlay.svelte";
-import Content from "./alert-dialog-content.svelte";
-import Description from "./alert-dialog-description.svelte";
+import Title from './alert-dialog-title.svelte';
+import Action from './alert-dialog-action.svelte';
+import Cancel from './alert-dialog-cancel.svelte';
+import Portal from './alert-dialog-portal.svelte';
+import Footer from './alert-dialog-footer.svelte';
+import Header from './alert-dialog-header.svelte';
+import Overlay from './alert-dialog-overlay.svelte';
+import Content from './alert-dialog-content.svelte';
+import Description from './alert-dialog-description.svelte';
 
 const Root = AlertDialogPrimitive.Root;
 const Trigger = AlertDialogPrimitive.Trigger;
@@ -36,5 +36,5 @@ export {
 	Trigger as AlertDialogTrigger,
 	Overlay as AlertDialogOverlay,
 	Content as AlertDialogContent,
-	Description as AlertDialogDescription,
+	Description as AlertDialogDescription
 };
diff --git a/src/lib/components/ui/badge/badge.svelte b/src/lib/components/ui/badge/badge.svelte
index e8817f4..ba65f8c 100644
--- a/src/lib/components/ui/badge/badge.svelte
+++ b/src/lib/components/ui/badge/badge.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { type Variant, badgeVariants } from "./index.js";
-	import { cn } from "$lib/utils.js";
+	import { type Variant, badgeVariants } from './index.js';
+	import { cn } from '$lib/utils.js';
 
 	let className: string | undefined | null = undefined;
 	export let href: string | undefined = undefined;
-	export let variant: Variant = "default";
+	export let variant: Variant = 'default';
 	export { className as class };
 </script>
 
 <svelte:element
-	this={href ? "a" : "span"}
+	this={href ? 'a' : 'span'}
 	{href}
 	class={cn(badgeVariants({ variant, className }))}
 	{...$$restProps}
diff --git a/src/lib/components/ui/badge/index.ts b/src/lib/components/ui/badge/index.ts
index a460124..0cde6ee 100644
--- a/src/lib/components/ui/badge/index.ts
+++ b/src/lib/components/ui/badge/index.ts
@@ -1,22 +1,20 @@
-import { type VariantProps, tv } from "tailwind-variants";
+import { type VariantProps, tv } from 'tailwind-variants';
 
-export { default as Badge } from "./badge.svelte";
+export { default as Badge } from './badge.svelte';
 export const badgeVariants = tv({
-	base: "inline-flex select-none items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	base: 'inline-flex select-none items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
 	variants: {
 		variant: {
-			default:
-				"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-			secondary:
-				"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+			secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
 			destructive:
-				"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-			outline: "text-foreground",
-		},
+				'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+			outline: 'text-foreground'
+		}
 	},
 	defaultVariants: {
-		variant: "default",
-	},
+		variant: 'default'
+	}
 });
 
-export type Variant = VariantProps<typeof badgeVariants>["variant"];
+export type Variant = VariantProps<typeof badgeVariants>['variant'];
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
index 86827f3..f578a57 100644
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Button as ButtonPrimitive } from "bits-ui";
-	import { type Events, type Props, buttonVariants } from "./index.js";
-	import { cn } from "$lib/utils.js";
+	import { Button as ButtonPrimitive } from 'bits-ui';
+	import { type Events, type Props, buttonVariants } from './index.js';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = Props;
 	type $$Events = Events;
 
-	let className: $$Props["class"] = undefined;
-	export let variant: $$Props["variant"] = "default";
-	export let size: $$Props["size"] = "default";
-	export let builders: $$Props["builders"] = [];
+	let className: $$Props['class'] = undefined;
+	export let variant: $$Props['variant'] = 'default';
+	export let size: $$Props['size'] = 'default';
+	export let builders: $$Props['builders'] = [];
 	export { className as class };
 </script>
 
diff --git a/src/lib/components/ui/card/card-content.svelte b/src/lib/components/ui/card/card-content.svelte
index 89d82b2..52776fa 100644
--- a/src/lib/components/ui/card/card-content.svelte
+++ b/src/lib/components/ui/card/card-content.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("p-6 pt-0", className)} {...$$restProps}>
+<div class={cn('p-6 pt-0', className)} {...$$restProps}>
 	<slot />
 </div>
diff --git a/src/lib/components/ui/card/card-description.svelte b/src/lib/components/ui/card/card-description.svelte
index 9a35919..33d2930 100644
--- a/src/lib/components/ui/card/card-description.svelte
+++ b/src/lib/components/ui/card/card-description.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLParagraphElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<p class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
+<p class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
 	<slot />
 </p>
diff --git a/src/lib/components/ui/card/card-footer.svelte b/src/lib/components/ui/card/card-footer.svelte
index 32f90bb..c97fd43 100644
--- a/src/lib/components/ui/card/card-footer.svelte
+++ b/src/lib/components/ui/card/card-footer.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
+<div class={cn('flex items-center p-6 pt-0', className)} {...$$restProps}>
 	<slot />
 </div>
diff --git a/src/lib/components/ui/card/card-header.svelte b/src/lib/components/ui/card/card-header.svelte
index e474528..43be1c6 100644
--- a/src/lib/components/ui/card/card-header.svelte
+++ b/src/lib/components/ui/card/card-header.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
+<div class={cn('flex flex-col space-y-1.5 p-6', className)} {...$$restProps}>
 	<slot />
 </div>
diff --git a/src/lib/components/ui/card/card-title.svelte b/src/lib/components/ui/card/card-title.svelte
index 099ae93..90d0da9 100644
--- a/src/lib/components/ui/card/card-title.svelte
+++ b/src/lib/components/ui/card/card-title.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import type { HeadingLevel } from "./index.js";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HeadingLevel } from './index.js';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
 		tag?: HeadingLevel;
 	};
 
-	let className: $$Props["class"] = undefined;
-	export let tag: $$Props["tag"] = "h3";
+	let className: $$Props['class'] = undefined;
+	export let tag: $$Props['tag'] = 'h3';
 	export { className as class };
 </script>
 
 <svelte:element
 	this={tag}
-	class={cn("font-semibold leading-none tracking-tight", className)}
+	class={cn('font-semibold leading-none tracking-tight', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/lib/components/ui/card/card.svelte b/src/lib/components/ui/card/card.svelte
index 43812d1..8f8a21e 100644
--- a/src/lib/components/ui/card/card.svelte
+++ b/src/lib/components/ui/card/card.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-	class={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
+	class={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
 	{...$$restProps}
 	on:click
 	on:focusin
diff --git a/src/lib/components/ui/card/index.ts b/src/lib/components/ui/card/index.ts
index bcc031d..86c5408 100644
--- a/src/lib/components/ui/card/index.ts
+++ b/src/lib/components/ui/card/index.ts
@@ -1,9 +1,9 @@
-import Root from "./card.svelte";
-import Content from "./card-content.svelte";
-import Description from "./card-description.svelte";
-import Footer from "./card-footer.svelte";
-import Header from "./card-header.svelte";
-import Title from "./card-title.svelte";
+import Root from './card.svelte';
+import Content from './card-content.svelte';
+import Description from './card-description.svelte';
+import Footer from './card-footer.svelte';
+import Header from './card-header.svelte';
+import Title from './card-title.svelte';
 
 export {
 	Root,
@@ -18,7 +18,7 @@ export {
 	Description as CardDescription,
 	Footer as CardFooter,
 	Header as CardHeader,
-	Title as CardTitle,
+	Title as CardTitle
 };
 
-export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
diff --git a/src/lib/components/ui/popover/index.ts b/src/lib/components/ui/popover/index.ts
index 63aecf9..5db432e 100644
--- a/src/lib/components/ui/popover/index.ts
+++ b/src/lib/components/ui/popover/index.ts
@@ -1,5 +1,5 @@
-import { Popover as PopoverPrimitive } from "bits-ui";
-import Content from "./popover-content.svelte";
+import { Popover as PopoverPrimitive } from 'bits-ui';
+import Content from './popover-content.svelte';
 const Root = PopoverPrimitive.Root;
 const Trigger = PopoverPrimitive.Trigger;
 const Close = PopoverPrimitive.Close;
@@ -13,5 +13,5 @@ export {
 	Root as Popover,
 	Content as PopoverContent,
 	Trigger as PopoverTrigger,
-	Close as PopoverClose,
+	Close as PopoverClose
 };
diff --git a/src/lib/components/ui/popover/popover-content.svelte b/src/lib/components/ui/popover/popover-content.svelte
index d1ad856..42c1290 100644
--- a/src/lib/components/ui/popover/popover-content.svelte
+++ b/src/lib/components/ui/popover/popover-content.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { cn, flyAndScale } from '$lib/utils.js';
 
 	type $$Props = PopoverPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-	export let align: $$Props["align"] = "center";
-	export let sideOffset: $$Props["sideOffset"] = 4;
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = undefined;
+	export let align: $$Props['align'] = 'center';
+	export let sideOffset: $$Props['sideOffset'] = 4;
 	export { className as class };
 </script>
 
@@ -19,7 +19,7 @@
 	{sideOffset}
 	{...$$restProps}
 	class={cn(
-		"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+		'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
 		className
 	)}
 >
diff --git a/src/lib/components/ui/scroll-area/index.ts b/src/lib/components/ui/scroll-area/index.ts
index e86a25b..d546806 100644
--- a/src/lib/components/ui/scroll-area/index.ts
+++ b/src/lib/components/ui/scroll-area/index.ts
@@ -1,10 +1,10 @@
-import Scrollbar from "./scroll-area-scrollbar.svelte";
-import Root from "./scroll-area.svelte";
+import Scrollbar from './scroll-area-scrollbar.svelte';
+import Root from './scroll-area.svelte';
 
 export {
 	Root,
 	Scrollbar,
 	//,
 	Root as ScrollArea,
-	Scrollbar as ScrollAreaScrollbar,
+	Scrollbar as ScrollAreaScrollbar
 };
diff --git a/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
index a97f3bb..c8068cd 100644
--- a/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
+++ b/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -1,27 +1,27 @@
 <script lang="ts">
-	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
-		orientation?: "vertical" | "horizontal";
+		orientation?: 'vertical' | 'horizontal';
 	};
 
-	let className: $$Props["class"] = undefined;
-	export let orientation: $$Props["orientation"] = "vertical";
+	let className: $$Props['class'] = undefined;
+	export let orientation: $$Props['orientation'] = 'vertical';
 	export { className as class };
 </script>
 
 <ScrollAreaPrimitive.Scrollbar
 	{orientation}
 	class={cn(
-		"flex touch-none select-none transition-colors",
-		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
-		orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
+		'flex touch-none select-none transition-colors',
+		orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
+		orientation === 'horizontal' && 'h-2.5 w-full border-t border-t-transparent p-px',
 		className
 	)}
 >
 	<slot />
 	<ScrollAreaPrimitive.Thumb
-		class={cn("relative rounded-full bg-border", orientation === "vertical" && "flex-1")}
+		class={cn('relative rounded-full bg-border', orientation === 'vertical' && 'flex-1')}
 	/>
 </ScrollAreaPrimitive.Scrollbar>
diff --git a/src/lib/components/ui/scroll-area/scroll-area.svelte b/src/lib/components/ui/scroll-area/scroll-area.svelte
index e8e368c..e99a152 100644
--- a/src/lib/components/ui/scroll-area/scroll-area.svelte
+++ b/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -1,31 +1,31 @@
 <script lang="ts">
-	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
-	import { Scrollbar } from "./index.js";
-	import { cn } from "$lib/utils.js";
+	import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+	import { Scrollbar } from './index.js';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = ScrollAreaPrimitive.Props & {
-		orientation?: "vertical" | "horizontal" | "both";
+		orientation?: 'vertical' | 'horizontal' | 'both';
 		scrollbarXClasses?: string;
 		scrollbarYClasses?: string;
 	};
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
-	export let orientation = "vertical";
-	export let scrollbarXClasses: string = "";
-	export let scrollbarYClasses: string = "";
+	export let orientation = 'vertical';
+	export let scrollbarXClasses: string = '';
+	export let scrollbarYClasses: string = '';
 </script>
 
-<ScrollAreaPrimitive.Root {...$$restProps} class={cn("relative overflow-hidden", className)}>
+<ScrollAreaPrimitive.Root {...$$restProps} class={cn('relative overflow-hidden', className)}>
 	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
 		<ScrollAreaPrimitive.Content>
 			<slot />
 		</ScrollAreaPrimitive.Content>
 	</ScrollAreaPrimitive.Viewport>
-	{#if orientation === "vertical" || orientation === "both"}
+	{#if orientation === 'vertical' || orientation === 'both'}
 		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
 	{/if}
-	{#if orientation === "horizontal" || orientation === "both"}
+	{#if orientation === 'horizontal' || orientation === 'both'}
 		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
 	{/if}
 	<ScrollAreaPrimitive.Corner />
diff --git a/src/lib/components/ui/separator/index.ts b/src/lib/components/ui/separator/index.ts
index 82442d2..768efac 100644
--- a/src/lib/components/ui/separator/index.ts
+++ b/src/lib/components/ui/separator/index.ts
@@ -1,7 +1,7 @@
-import Root from "./separator.svelte";
+import Root from './separator.svelte';
 
 export {
 	Root,
 	//
-	Root as Separator,
+	Root as Separator
 };
diff --git a/src/lib/components/ui/separator/separator.svelte b/src/lib/components/ui/separator/separator.svelte
index be3843a..3160e6a 100644
--- a/src/lib/components/ui/separator/separator.svelte
+++ b/src/lib/components/ui/separator/separator.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { Separator as SeparatorPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Separator as SeparatorPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = SeparatorPrimitive.Props;
 
-	let className: $$Props["class"] = undefined;
-	export let orientation: $$Props["orientation"] = "horizontal";
-	export let decorative: $$Props["decorative"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let orientation: $$Props['orientation'] = 'horizontal';
+	export let decorative: $$Props['decorative'] = undefined;
 	export { className as class };
 </script>
 
 <SeparatorPrimitive.Root
 	class={cn(
-		"shrink-0 bg-border",
-		orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+		'shrink-0 bg-border',
+		orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
 		className
 	)}
 	{orientation}
diff --git a/src/lib/components/ui/sonner/index.ts b/src/lib/components/ui/sonner/index.ts
index 1ad9f4a..fcaf06b 100644
--- a/src/lib/components/ui/sonner/index.ts
+++ b/src/lib/components/ui/sonner/index.ts
@@ -1 +1 @@
-export { default as Toaster } from "./sonner.svelte";
+export { default as Toaster } from './sonner.svelte';
diff --git a/src/lib/components/ui/sonner/sonner.svelte b/src/lib/components/ui/sonner/sonner.svelte
index 7d5b2f1..f1d41c5 100644
--- a/src/lib/components/ui/sonner/sonner.svelte
+++ b/src/lib/components/ui/sonner/sonner.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
-	import { mode } from "mode-watcher";
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+	import { mode } from 'mode-watcher';
 
 	type $$Props = SonnerProps;
 </script>
@@ -10,11 +10,12 @@
 	class="toaster group"
 	toastOptions={{
 		classes: {
-			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-			description: "group-[.toast]:text-muted-foreground",
-			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-		},
+			toast:
+				'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+			description: 'group-[.toast]:text-muted-foreground',
+			actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+			cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground'
+		}
 	}}
 	{...$$restProps}
 />
diff --git a/src/lib/components/ui/tooltip/index.ts b/src/lib/components/ui/tooltip/index.ts
index 7d0444d..243cd02 100644
--- a/src/lib/components/ui/tooltip/index.ts
+++ b/src/lib/components/ui/tooltip/index.ts
@@ -1,5 +1,5 @@
-import { Tooltip as TooltipPrimitive } from "bits-ui";
-import Content from "./tooltip-content.svelte";
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import Content from './tooltip-content.svelte';
 
 const Root = TooltipPrimitive.Root;
 const Trigger = TooltipPrimitive.Trigger;
@@ -11,5 +11,5 @@ export {
 	//
 	Root as Tooltip,
 	Content as TooltipContent,
-	Trigger as TooltipTrigger,
+	Trigger as TooltipTrigger
 };
diff --git a/src/lib/components/ui/tooltip/tooltip-content.svelte b/src/lib/components/ui/tooltip/tooltip-content.svelte
index d36d8e8..856b8e7 100644
--- a/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Tooltip as TooltipPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+	import { cn, flyAndScale } from '$lib/utils.js';
 
 	type $$Props = TooltipPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
-	export let sideOffset: $$Props["sideOffset"] = 4;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = {
+	let className: $$Props['class'] = undefined;
+	export let sideOffset: $$Props['sideOffset'] = 4;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = {
 		y: 8,
-		duration: 150,
+		duration: 150
 	};
 	export { className as class };
 </script>
@@ -19,7 +19,7 @@
 	{transitionConfig}
 	{sideOffset}
 	class={cn(
-		"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground",
+		'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground',
 		className
 	)}
 	{...$$restProps}