diff --git a/docs/css/styles.css b/docs/css/styles.css
index dfd1d02..ed5ea45 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -13,7 +13,8 @@
 @theme {
   --font-sans: 'Inter';
   --font-mono: 'JetBrains Mono';
-
 }
 
-/* @import "./themes/claude.css"; */
+@import "./themes/claude.css";
+@import "./themes/doom-64.css";
+@import "./themes/supabase.css";
\ No newline at end of file
diff --git a/docs/css/themes/claude.css b/docs/css/themes/claude.css
index 0be9307..fbb6019 100644
--- a/docs/css/themes/claude.css
+++ b/docs/css/themes/claude.css
@@ -1,146 +1,95 @@
-:root {
-  --background: oklch(0.98 0.01 95.10);
-  --foreground: oklch(0.34 0.03 95.72);
-  --card: oklch(0.98 0.01 95.10);
-  --card-foreground: oklch(0.19 0.00 106.59);
-  --popover: oklch(1.00 0 0);
-  --popover-foreground: oklch(0.27 0.02 98.94);
-  --primary: oklch(0.62 0.14 39.04);
-  --primary-foreground: oklch(1.00 0 0);
-  --secondary: oklch(0.92 0.01 92.99);
-  --secondary-foreground: oklch(0.43 0.02 98.60);
-  --muted: oklch(0.93 0.02 90.24);
-  --muted-foreground: oklch(0.61 0.01 97.42);
-  --accent: oklch(0.92 0.01 92.99);
-  --accent-foreground: oklch(0.27 0.02 98.94);
-  --destructive: oklch(0.19 0.00 106.59);
-  --destructive-foreground: oklch(1.00 0 0);
-  --border: oklch(0.88 0.01 97.36);
-  --input: oklch(0.76 0.02 98.35);
-  --ring: oklch(0.59 0.17 253.06);
-  --chart-1: oklch(0.56 0.13 43.00);
-  --chart-2: oklch(0.69 0.16 290.41);
-  --chart-3: oklch(0.88 0.03 93.13);
-  --chart-4: oklch(0.88 0.04 298.18);
-  --chart-5: oklch(0.56 0.13 42.06);
-  --sidebar: oklch(0.97 0.01 98.88);
-  --sidebar-foreground: oklch(0.36 0.01 106.65);
-  --sidebar-primary: oklch(0.62 0.14 39.04);
-  --sidebar-primary-foreground: oklch(0.99 0 0);
-  --sidebar-accent: oklch(0.92 0.01 92.99);
-  --sidebar-accent-foreground: oklch(0.33 0 0);
-  --sidebar-border: oklch(0.94 0 0);
-  --sidebar-ring: oklch(0.77 0 0);
-  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --radius: 0.5rem;
-  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
-  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
-  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
-  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
-  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
-  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
-}
+.theme-claude {
+  &:root {
+    --background: oklch(0.98 0.01 95.10);
+    --foreground: oklch(0.34 0.03 95.72);
+    --card: oklch(0.98 0.01 95.10);
+    --card-foreground: oklch(0.19 0.00 106.59);
+    --popover: oklch(1.00 0 0);
+    --popover-foreground: oklch(0.27 0.02 98.94);
+    --primary: oklch(0.62 0.14 39.04);
+    --primary-foreground: oklch(1.00 0 0);
+    --secondary: oklch(0.92 0.01 92.99);
+    --secondary-foreground: oklch(0.43 0.02 98.60);
+    --muted: oklch(0.93 0.02 90.24);
+    --muted-foreground: oklch(0.61 0.01 97.42);
+    --accent: oklch(0.92 0.01 92.99);
+    --accent-foreground: oklch(0.27 0.02 98.94);
+    --destructive: oklch(0.19 0.00 106.59);
+    --destructive-foreground: oklch(1.00 0 0);
+    --border: oklch(0.88 0.01 97.36);
+    --input: oklch(0.76 0.02 98.35);
+    --ring: oklch(0.59 0.17 253.06);
+    --chart-1: oklch(0.56 0.13 43.00);
+    --chart-2: oklch(0.69 0.16 290.41);
+    --chart-3: oklch(0.88 0.03 93.13);
+    --chart-4: oklch(0.88 0.04 298.18);
+    --chart-5: oklch(0.56 0.13 42.06);
+    --sidebar: oklch(0.97 0.01 98.88);
+    --sidebar-foreground: oklch(0.36 0.01 106.65);
+    --sidebar-primary: oklch(0.62 0.14 39.04);
+    --sidebar-primary-foreground: oklch(0.99 0 0);
+    --sidebar-accent: oklch(0.92 0.01 92.99);
+    --sidebar-accent-foreground: oklch(0.33 0 0);
+    --sidebar-border: oklch(0.94 0 0);
+    --sidebar-ring: oklch(0.77 0 0);
+    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --radius: 0.5rem;
+    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+  }
 
-.dark {
-  --background: oklch(0.27 0.00 106.64);
-  --foreground: oklch(0.81 0.01 93.01);
-  --card: oklch(0.27 0.00 106.64);
-  --card-foreground: oklch(0.98 0.01 95.10);
-  --popover: oklch(0.31 0.00 106.60);
-  --popover-foreground: oklch(0.92 0.00 106.48);
-  --primary: oklch(0.67 0.13 38.76);
-  --primary-foreground: oklch(1.00 0 0);
-  --secondary: oklch(0.98 0.01 95.10);
-  --secondary-foreground: oklch(0.31 0.00 106.60);
-  --muted: oklch(0.22 0.00 106.71);
-  --muted-foreground: oklch(0.77 0.02 99.07);
-  --accent: oklch(0.21 0.01 95.42);
-  --accent-foreground: oklch(0.97 0.01 98.88);
-  --destructive: oklch(0.64 0.21 25.33);
-  --destructive-foreground: oklch(1.00 0 0);
-  --border: oklch(0.36 0.01 106.89);
-  --input: oklch(0.43 0.01 100.22);
-  --ring: oklch(0.59 0.17 253.06);
-  --chart-1: oklch(0.56 0.13 43.00);
-  --chart-2: oklch(0.69 0.16 290.41);
-  --chart-3: oklch(0.21 0.01 95.42);
-  --chart-4: oklch(0.31 0.05 289.32);
-  --chart-5: oklch(0.56 0.13 42.06);
-  --sidebar: oklch(0.24 0.00 67.71);
-  --sidebar-foreground: oklch(0.81 0.01 93.01);
-  --sidebar-primary: oklch(0.33 0 0);
-  --sidebar-primary-foreground: oklch(0.99 0 0);
-  --sidebar-accent: oklch(0.17 0.00 106.62);
-  --sidebar-accent-foreground: oklch(0.81 0.01 93.01);
-  --sidebar-border: oklch(0.94 0 0);
-  --sidebar-ring: oklch(0.77 0 0);
-  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --radius: 0.5rem;
-  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
-  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
-  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
-  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
-  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
-  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --font-serif: var(--font-serif);
-
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-
-  --shadow-2xs: var(--shadow-2xs);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow: var(--shadow);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
+  &.dark {
+    --background: oklch(0.27 0.00 106.64);
+    --foreground: oklch(0.81 0.01 93.01);
+    --card: oklch(0.27 0.00 106.64);
+    --card-foreground: oklch(0.98 0.01 95.10);
+    --popover: oklch(0.31 0.00 106.60);
+    --popover-foreground: oklch(0.92 0.00 106.48);
+    --primary: oklch(0.67 0.13 38.76);
+    --primary-foreground: oklch(1.00 0 0);
+    --secondary: oklch(0.98 0.01 95.10);
+    --secondary-foreground: oklch(0.31 0.00 106.60);
+    --muted: oklch(0.22 0.00 106.71);
+    --muted-foreground: oklch(0.77 0.02 99.07);
+    --accent: oklch(0.21 0.01 95.42);
+    --accent-foreground: oklch(0.97 0.01 98.88);
+    --destructive: oklch(0.64 0.21 25.33);
+    --destructive-foreground: oklch(1.00 0 0);
+    --border: oklch(0.36 0.01 106.89);
+    --input: oklch(0.43 0.01 100.22);
+    --ring: oklch(0.59 0.17 253.06);
+    --chart-1: oklch(0.56 0.13 43.00);
+    --chart-2: oklch(0.69 0.16 290.41);
+    --chart-3: oklch(0.21 0.01 95.42);
+    --chart-4: oklch(0.31 0.05 289.32);
+    --chart-5: oklch(0.56 0.13 42.06);
+    --sidebar: oklch(0.24 0.00 67.71);
+    --sidebar-foreground: oklch(0.81 0.01 93.01);
+    --sidebar-primary: oklch(0.33 0 0);
+    --sidebar-primary-foreground: oklch(0.99 0 0);
+    --sidebar-accent: oklch(0.17 0.00 106.62);
+    --sidebar-accent-foreground: oklch(0.81 0.01 93.01);
+    --sidebar-border: oklch(0.94 0 0);
+    --sidebar-ring: oklch(0.77 0 0);
+    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --radius: 0.5rem;
+    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+  }
 }
\ No newline at end of file
diff --git a/docs/css/themes/doom-64.css b/docs/css/themes/doom-64.css
new file mode 100644
index 0000000..7f73560
--- /dev/null
+++ b/docs/css/themes/doom-64.css
@@ -0,0 +1,95 @@
+.theme-doom-64 {
+  &:root {
+    --background: oklch(0.85 0 0);
+    --foreground: oklch(0.24 0 0);
+    --card: oklch(0.76 0 0);
+    --card-foreground: oklch(0.24 0 0);
+    --popover: oklch(0.76 0 0);
+    --popover-foreground: oklch(0.24 0 0);
+    --primary: oklch(0.50 0.19 27.48);
+    --primary-foreground: oklch(1.00 0 0);
+    --secondary: oklch(0.50 0.09 126.19);
+    --secondary-foreground: oklch(1.00 0 0);
+    --muted: oklch(0.78 0 0);
+    --muted-foreground: oklch(0.41 0 0);
+    --accent: oklch(0.59 0.10 245.74);
+    --accent-foreground: oklch(1.00 0 0);
+    --destructive: oklch(0.71 0.20 46.46);
+    --destructive-foreground: oklch(0 0 0);
+    --border: oklch(0.43 0 0);
+    --input: oklch(0.43 0 0);
+    --ring: oklch(0.50 0.19 27.48);
+    --chart-1: oklch(0.50 0.19 27.48);
+    --chart-2: oklch(0.50 0.09 126.19);
+    --chart-3: oklch(0.59 0.10 245.74);
+    --chart-4: oklch(0.71 0.20 46.46);
+    --chart-5: oklch(0.57 0.04 40.43);
+    --sidebar: oklch(0.76 0 0);
+    --sidebar-foreground: oklch(0.24 0 0);
+    --sidebar-primary: oklch(0.50 0.19 27.48);
+    --sidebar-primary-foreground: oklch(1.00 0 0);
+    --sidebar-accent: oklch(0.59 0.10 245.74);
+    --sidebar-accent-foreground: oklch(1.00 0 0);
+    --sidebar-border: oklch(0.43 0 0);
+    --sidebar-ring: oklch(0.50 0.19 27.48);
+    --font-sans: "Oxanium", sans-serif;
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono: "Source Code Pro", monospace;
+    --radius: 0px;
+    --shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.20);
+    --shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.20);
+    --shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
+    --shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
+    --shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 2px 4px -1px hsl(0 0% 0% / 0.40);
+    --shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 4px 6px -1px hsl(0 0% 0% / 0.40);
+    --shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 8px 10px -1px hsl(0 0% 0% / 0.40);
+    --shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 1.00);
+  }
+
+  &.dark {
+    --background: oklch(0.22 0 0);
+    --foreground: oklch(0.91 0 0);
+    --card: oklch(0.29 0 0);
+    --card-foreground: oklch(0.91 0 0);
+    --popover: oklch(0.29 0 0);
+    --popover-foreground: oklch(0.91 0 0);
+    --primary: oklch(0.61 0.21 27.03);
+    --primary-foreground: oklch(1.00 0 0);
+    --secondary: oklch(0.64 0.15 133.01);
+    --secondary-foreground: oklch(0 0 0);
+    --muted: oklch(0.26 0 0);
+    --muted-foreground: oklch(0.71 0 0);
+    --accent: oklch(0.75 0.12 244.75);
+    --accent-foreground: oklch(0 0 0);
+    --destructive: oklch(0.78 0.17 68.09);
+    --destructive-foreground: oklch(0 0 0);
+    --border: oklch(0.41 0 0);
+    --input: oklch(0.41 0 0);
+    --ring: oklch(0.61 0.21 27.03);
+    --chart-1: oklch(0.61 0.21 27.03);
+    --chart-2: oklch(0.64 0.15 133.01);
+    --chart-3: oklch(0.75 0.12 244.75);
+    --chart-4: oklch(0.78 0.17 68.09);
+    --chart-5: oklch(0.65 0.03 40.80);
+    --sidebar: oklch(0.19 0 0);
+    --sidebar-foreground: oklch(0.91 0 0);
+    --sidebar-primary: oklch(0.61 0.21 27.03);
+    --sidebar-primary-foreground: oklch(1.00 0 0);
+    --sidebar-accent: oklch(0.75 0.12 244.75);
+    --sidebar-accent-foreground: oklch(0 0 0);
+    --sidebar-border: oklch(0.41 0 0);
+    --sidebar-ring: oklch(0.61 0.21 27.03);
+    --font-sans: "Oxanium", sans-serif;
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono: "Source Code Pro", monospace;
+    --radius: 0px;
+    --shadow-2xs: 0px 2px 5px 0px hsl(0 0% 0% / 0.30);
+    --shadow-xs: 0px 2px 5px 0px hsl(0 0% 0% / 0.30);
+    --shadow-sm: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 1px 2px -1px hsl(0 0% 0% / 0.60);
+    --shadow: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 1px 2px -1px hsl(0 0% 0% / 0.60);
+    --shadow-md: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 2px 4px -1px hsl(0 0% 0% / 0.60);
+    --shadow-lg: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 4px 6px -1px hsl(0 0% 0% / 0.60);
+    --shadow-xl: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 8px 10px -1px hsl(0 0% 0% / 0.60);
+    --shadow-2xl: 0px 2px 5px 0px hsl(0 0% 0% / 1.50);
+  }
+}
\ No newline at end of file
diff --git a/docs/css/themes/supabase.css b/docs/css/themes/supabase.css
new file mode 100644
index 0000000..bf45cc8
--- /dev/null
+++ b/docs/css/themes/supabase.css
@@ -0,0 +1,160 @@
+.theme-supabase {
+  &:root {
+    --background: oklch(0.99 0 0);
+    --foreground: oklch(0.20 0 0);
+    --card: oklch(0.99 0 0);
+    --card-foreground: oklch(0.20 0 0);
+    --popover: oklch(0.99 0 0);
+    --popover-foreground: oklch(0.44 0 0);
+    --primary: oklch(0.83 0.13 160.91);
+    --primary-foreground: oklch(0.26 0.01 166.46);
+    --secondary: oklch(0.99 0 0);
+    --secondary-foreground: oklch(0.20 0 0);
+    --muted: oklch(0.95 0 0);
+    --muted-foreground: oklch(0.24 0 0);
+    --accent: oklch(0.95 0 0);
+    --accent-foreground: oklch(0.24 0 0);
+    --destructive: oklch(0.55 0.19 32.73);
+    --destructive-foreground: oklch(0.99 0.00 17.21);
+    --border: oklch(0.90 0 0);
+    --input: oklch(0.90 0 0);
+    --ring: oklch(0.83 0.13 160.91);
+    --chart-1: oklch(0.83 0.13 160.91);
+    --chart-2: oklch(0.62 0.19 259.81);
+    --chart-3: oklch(0.61 0.22 292.72);
+    --chart-4: oklch(0.77 0.16 70.08);
+    --chart-5: oklch(0.70 0.15 162.48);
+    --sidebar: oklch(0.99 0 0);
+    --sidebar-foreground: oklch(0.55 0 0);
+    --sidebar-primary: oklch(0.83 0.13 160.91);
+    --sidebar-primary-foreground: oklch(0.26 0.01 166.46);
+    --sidebar-accent: oklch(0.95 0 0);
+    --sidebar-accent-foreground: oklch(0.24 0 0);
+    --sidebar-border: oklch(0.90 0 0);
+    --sidebar-ring: oklch(0.83 0.13 160.91);
+    --font-sans: Outfit, sans-serif;
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono: monospace;
+    --radius: 0.5rem;
+    --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+    --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+    --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+    --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+    --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
+    --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
+    --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
+    --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
+    --tracking-normal: 0.025em;
+  }
+
+  &.dark {
+    --background: oklch(0.18 0 0);
+    --foreground: oklch(0.93 0.01 255.51);
+    --card: oklch(0.20 0 0);
+    --card-foreground: oklch(0.93 0.01 255.51);
+    --popover: oklch(0.26 0 0);
+    --popover-foreground: oklch(0.73 0 0);
+    --primary: oklch(0.44 0.10 156.76);
+    --primary-foreground: oklch(0.92 0.01 167.16);
+    --secondary: oklch(0.26 0 0);
+    --secondary-foreground: oklch(0.99 0 0);
+    --muted: oklch(0.24 0 0);
+    --muted-foreground: oklch(0.71 0 0);
+    --accent: oklch(0.31 0 0);
+    --accent-foreground: oklch(0.99 0 0);
+    --destructive: oklch(0.31 0.09 29.79);
+    --destructive-foreground: oklch(0.94 0.00 34.31);
+    --border: oklch(0.28 0 0);
+    --input: oklch(0.28 0 0);
+    --ring: oklch(0.80 0.18 151.71);
+    --chart-1: oklch(0.80 0.18 151.71);
+    --chart-2: oklch(0.71 0.14 254.62);
+    --chart-3: oklch(0.71 0.16 293.54);
+    --chart-4: oklch(0.84 0.16 84.43);
+    --chart-5: oklch(0.78 0.13 181.91);
+    --sidebar: oklch(0.18 0 0);
+    --sidebar-foreground: oklch(0.63 0 0);
+    --sidebar-primary: oklch(0.44 0.10 156.76);
+    --sidebar-primary-foreground: oklch(0.92 0.01 167.16);
+    --sidebar-accent: oklch(0.31 0 0);
+    --sidebar-accent-foreground: oklch(0.99 0 0);
+    --sidebar-border: oklch(0.28 0 0);
+    --sidebar-ring: oklch(0.80 0.18 151.71);
+    --font-sans: Outfit, sans-serif;
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono: monospace;
+    --radius: 0.5rem;
+    --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+    --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+    --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+    --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+    --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
+    --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
+    --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
+    --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
+  }
+
+  @theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+  
+    --font-sans: var(--font-sans);
+    --font-mono: var(--font-mono);
+    --font-serif: var(--font-serif);
+  
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+  
+    --shadow-2xs: var(--shadow-2xs);
+    --shadow-xs: var(--shadow-xs);
+    --shadow-sm: var(--shadow-sm);
+    --shadow: var(--shadow);
+    --shadow-md: var(--shadow-md);
+    --shadow-lg: var(--shadow-lg);
+    --shadow-xl: var(--shadow-xl);
+    --shadow-2xl: var(--shadow-2xl);
+  
+    --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+    --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+    --tracking-normal: var(--tracking-normal);
+    --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+    --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+    --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+  }
+
+  body {
+    letter-spacing: var(--tracking-normal);
+  }
+}
\ No newline at end of file
diff --git a/docs/src/_includes/layouts/base.njk b/docs/src/_includes/layouts/base.njk
index 302f625..cab432b 100644
--- a/docs/src/_includes/layouts/base.njk
+++ b/docs/src/_includes/layouts/base.njk
@@ -4,19 +4,37 @@
   <!-- Theme -->
   <script>
   function isDark() {
-    return localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    return localStorage.getItem('darkMode') === 'dark' || (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches);
   }
 
   if (isDark()) {
     document.documentElement.classList.add('dark');
   }
 
+  if (localStorage.getItem('themeVariant')) {
+    document.documentElement.classList.add(`theme-${localStorage.getItem('themeVariant')}`);
+  }
+
   document.addEventListener('alpine:init', () => {
-    Alpine.store('theme', {
+    Alpine.store('darkMode', {
       isDark: isDark(),
       toggle() {
         this.isDark = document.documentElement.classList.toggle('dark');
-        localStorage.setItem('theme', this.isDark ? 'dark' : 'light');
+        localStorage.setItem('darkMode', this.isDark ? 'dark' : 'light');
+      }
+    });
+
+    Alpine.store('themeVariant', {
+      name: localStorage.getItem('themeVariant'),
+      setThemeVariant(name) {
+        this.name = name;
+        localStorage.setItem('themeVariant', name);
+        document.documentElement.classList.forEach(className => {
+          if (className.startsWith('theme-')) {
+            document.documentElement.classList.remove(className);
+          }
+        });
+        document.documentElement.classList.add(`theme-${name}`);
       }
     });
   });
@@ -82,11 +100,11 @@
 {% include "partials/sidebar.njk" %}
 
 <main id="content">
-  <header class="bg-background sticky inset-x-0 top-0 isolate z-20 flex shrink-0 items-center gap-2 border-b z-10">
+  <header class="bg-background sticky inset-x-0 top-0 isolate flex shrink-0 items-center gap-2 border-b z-10">
     {% include "partials/header.njk" %}
   </header>
 
-  <div class="p-4">
+  <div class="p-6 md:p-8 xl:p-12">
     {{ content | safe }}
   </div>
 </main>
diff --git a/docs/src/_includes/layouts/page.njk b/docs/src/_includes/layouts/page.njk
index 262e5ba..4f22e8d 100644
--- a/docs/src/_includes/layouts/page.njk
+++ b/docs/src/_includes/layouts/page.njk
@@ -2,7 +2,7 @@
 layout: layouts/base.njk
 ---
 
-<main class="mx-auto relative py-6 lg:gap-10 lg:py-8 flex w-full max-w-screen-lg">
+<main class="mx-auto relative flex w-full max-w-screen-lg gap-10">
   <div class="mx-auto w-full max-w-screen-md">
     <header class="space-y-2">
       <h1 class="text-3xl font-semibold tracking-tight">{{ title }}</h1>
@@ -14,26 +14,8 @@ layout: layouts/base.njk
   </div>
   {% if toc %}
     <div class="hidden text-sm xl:block w-full max-w-[300px]">
-      <nav class="sticky top-22 space-y-2 [&_ul]:m-0 [&_ul]:list-none [&_ul_ul]:pl-4 [&_li]:mt-0 [&_li]:pt-2 [&_a]:inline-block [&_a]:no-underline [&_a]:transition-colors [&_a]:hover:text-foreground [&_a]:text-muted-foreground">
-        <h4 class="font-medium">On This Page</h4>
-        {% if toc %}
-          {% macro renderToc(items) %}
-            {% if items and items.length %}
-              <ul>
-              {% for item in items %}
-                <li>
-                  <a href="#{{ item.id }}">{{ item.label }}</a>
-                  {% if item.children and item.children.length %}
-                    {{ renderToc(item.children) }}
-                  {% endif %}
-                </li>
-              {% endfor %}
-              </ul>
-            {% endif %}
-          {% endmacro %}
-          {{ renderToc(toc) }}
-        {% endif %}
-      </nav>
+      {% from "macros/toc.njk" import toc_nav %}
+      {{ toc_nav(toc) }}
     </div>
   {% endif %}
 </main>
\ No newline at end of file
diff --git a/docs/src/_includes/macros/toc.njk b/docs/src/_includes/macros/toc.njk
new file mode 100644
index 0000000..3e839d3
--- /dev/null
+++ b/docs/src/_includes/macros/toc.njk
@@ -0,0 +1,20 @@
+{% macro toc_nav(items=[]) %}
+<nav class="sticky top-22 space-y-2 [&_ul]:m-0 [&_ul]:list-none [&_ul_ul]:pl-4 [&_li]:mt-0 [&_li]:pt-2 [&_a]:inline-block [&_a]:no-underline [&_a]:transition-colors [&_a]:hover:text-foreground [&_a]:text-muted-foreground">
+  <h4 class="font-medium">On This Page</h4>
+  {% macro toc_list(items=[]) %}
+    {% if items and items.length %}
+      <ul>
+      {% for item in items %}
+        <li>
+          <a href="#{{ item.id }}">{{ item.label }}</a>
+          {% if item.children and item.children.length %}
+            {{ toc_list(item.children) }}
+          {% endif %}
+        </li>
+      {% endfor %}
+      </ul>
+    {% endif %}
+  {% endmacro %}
+  {{ toc_list(items) }}
+</nav>
+{% endmacro %}
\ No newline at end of file
diff --git a/docs/src/_includes/partials/header.njk b/docs/src/_includes/partials/header.njk
index 33fd743..d5da0a5 100644
--- a/docs/src/_includes/partials/header.njk
+++ b/docs/src/_includes/partials/header.njk
@@ -16,21 +16,28 @@
   >
     {% lucide "panel-left" %}
   </button>
-  <select class="select h-8 leading-none">
-    <option value="light">Default</option>
-    <option value="light">Other</option>
+  <select
+    class="select h-8 leading-none"
+    x-init
+    @change="$store.themeVariant.setThemeVariant($event.target.value)"
+    :value="$store.themeVariant.name"
+  >
+    <option value="">Default</option>
+    <option value="claude">Claude</option>
+    <option value="doom-64">Doom 64</option>
+    <option value="supabase">Supabase</option>
   </select>
   <button
     type="button"
-    aria-label="Toggle theme"
-    data-tooltip="Toggle theme"
+    :aria-label="$store.darkMode.isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+    :data-tooltip="$store.darkMode.isDark ? 'Light mode' : 'Dark mode'"
     data-side="bottom"
     data-align="end"
     class="btn-icon-outline size-8"
     x-init
-    @click="$store.theme.toggle()"
+    @click="$store.darkMode.toggle()"
   >
-    <span x-show="$store.theme.isDark">{% lucide "sun" %}</span>
-    <span x-show="!$store.theme.isDark">{% lucide "moon" %}</span>
+    <span x-show="$store.darkMode.isDark">{% lucide "sun" %}</span>
+    <span x-show="!$store.darkMode.isDark">{% lucide "moon" %}</span>
   </button>
 </div>
\ No newline at end of file
diff --git a/docs/src/_includes/partials/kitchen-sink/accordion.njk b/docs/src/_includes/partials/kitchen-sink/accordion.njk
index 1d281a5..59650fb 100644
--- a/docs/src/_includes/partials/kitchen-sink/accordion.njk
+++ b/docs/src/_includes/partials/kitchen-sink/accordion.njk
@@ -1,6 +1,9 @@
-<section id="accordion" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="accordion"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Accordion</h2>
+    <a href="/components/accordion" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="group grid w-full max-w-xl gap-4">
diff --git a/docs/src/_includes/partials/kitchen-sink/alert-dialog.njk b/docs/src/_includes/partials/kitchen-sink/alert-dialog.njk
index 425f194..4f96027 100644
--- a/docs/src/_includes/partials/kitchen-sink/alert-dialog.njk
+++ b/docs/src/_includes/partials/kitchen-sink/alert-dialog.njk
@@ -1,8 +1,11 @@
 {% from "dialog.njk" import dialog %}
 
-<section id="alert-dialog" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="alert-dialog"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Alert Dialog</h2>
+    <a href="/components/alert-dialog" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col gap-4">
diff --git a/docs/src/_includes/partials/kitchen-sink/alert.njk b/docs/src/_includes/partials/kitchen-sink/alert.njk
index 383891b..ceab665 100644
--- a/docs/src/_includes/partials/kitchen-sink/alert.njk
+++ b/docs/src/_includes/partials/kitchen-sink/alert.njk
@@ -1,6 +1,9 @@
-<section id="alert" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="alert"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Alert</h2>
+    <a href="/components/alert" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="grid max-w-xl items-start gap-4">
diff --git a/docs/src/_includes/partials/kitchen-sink/avatar.njk b/docs/src/_includes/partials/kitchen-sink/avatar.njk
index f1262db..ca93ba0 100644
--- a/docs/src/_includes/partials/kitchen-sink/avatar.njk
+++ b/docs/src/_includes/partials/kitchen-sink/avatar.njk
@@ -1,6 +1,9 @@
-<section id="avatar" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="avatar"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Avatar</h2>
+    <a href="/components/avatar" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-row flex-wrap items-center gap-4">
diff --git a/docs/src/_includes/partials/kitchen-sink/badge.njk b/docs/src/_includes/partials/kitchen-sink/badge.njk
index 48a307c..cdeb094 100644
--- a/docs/src/_includes/partials/kitchen-sink/badge.njk
+++ b/docs/src/_includes/partials/kitchen-sink/badge.njk
@@ -1,6 +1,9 @@
-<section id="badge" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="badge"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Badge</h2>
+    <a href="/components/badge" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col gap-2">
diff --git a/docs/src/_includes/partials/kitchen-sink/breadcrumb.njk b/docs/src/_includes/partials/kitchen-sink/breadcrumb.njk
index 679436f..5897e1d 100644
--- a/docs/src/_includes/partials/kitchen-sink/breadcrumb.njk
+++ b/docs/src/_includes/partials/kitchen-sink/breadcrumb.njk
@@ -1,8 +1,11 @@
 {% from "popover.njk" import popover %}
 
-<section id="breadcrumb" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="breadcrumb"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Breadcrumb</h2>
+    <a href="/components/breadcrumb" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5">
diff --git a/docs/src/_includes/partials/kitchen-sink/button.njk b/docs/src/_includes/partials/kitchen-sink/button.njk
index 56241c5..35be9ef 100644
--- a/docs/src/_includes/partials/kitchen-sink/button.njk
+++ b/docs/src/_includes/partials/kitchen-sink/button.njk
@@ -1,6 +1,9 @@
-<section id="button" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="button"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Button</h2>
+    <a href="/components/button" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col gap-6">
diff --git a/docs/src/_includes/partials/kitchen-sink/card.njk b/docs/src/_includes/partials/kitchen-sink/card.njk
index 0e348d1..446d0df 100644
--- a/docs/src/_includes/partials/kitchen-sink/card.njk
+++ b/docs/src/_includes/partials/kitchen-sink/card.njk
@@ -1,6 +1,9 @@
-<section id="card" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="card"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Card</h2>
+    <a href="/components/card" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col items-start gap-4">
diff --git a/docs/src/_includes/partials/kitchen-sink/checkbox.njk b/docs/src/_includes/partials/kitchen-sink/checkbox.njk
index 9039d81..11f3c82 100644
--- a/docs/src/_includes/partials/kitchen-sink/checkbox.njk
+++ b/docs/src/_includes/partials/kitchen-sink/checkbox.njk
@@ -1,6 +1,9 @@
-<section id="checkbox" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="checkbox"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Checkbox</h2>
+    <a href="/components/checkbox" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col gap-6 max-w-lg">
diff --git a/docs/src/_includes/partials/kitchen-sink/combobox.njk b/docs/src/_includes/partials/kitchen-sink/combobox.njk
index d94c6cb..c9513da 100644
--- a/docs/src/_includes/partials/kitchen-sink/combobox.njk
+++ b/docs/src/_includes/partials/kitchen-sink/combobox.njk
@@ -1,8 +1,11 @@
 {% from "select.njk" import select %}
 
-<section id="combobox" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="combobox"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Combobox</h2>
+    <a href="/components/combobox" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-wrap items-start gap-4">
diff --git a/docs/src/_includes/partials/kitchen-sink/dialog.njk b/docs/src/_includes/partials/kitchen-sink/dialog.njk
index 8f28efb..562c39c 100644
--- a/docs/src/_includes/partials/kitchen-sink/dialog.njk
+++ b/docs/src/_includes/partials/kitchen-sink/dialog.njk
@@ -1,8 +1,11 @@
 {% from "dialog.njk" import dialog %}
 
-<section id="dialog" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="dialog"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Dialog</h2>
+    <a href="/components/dialog" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-wrap items-center gap-4">
diff --git a/docs/src/_includes/partials/kitchen-sink/dropdown-menu.njk b/docs/src/_includes/partials/kitchen-sink/dropdown-menu.njk
index 4cc9c37..4efb785 100644
--- a/docs/src/_includes/partials/kitchen-sink/dropdown-menu.njk
+++ b/docs/src/_includes/partials/kitchen-sink/dropdown-menu.njk
@@ -1,8 +1,11 @@
 {% from "dropdown-menu.njk" import dropdown_menu %}
 
-<section id="dropdown-menu" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="dropdown-menu"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Dropdown Menu</h2>
+    <a href="/components/dropdown-menu" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-wrap items-start gap-4">
diff --git a/docs/src/_includes/partials/kitchen-sink/form.njk b/docs/src/_includes/partials/kitchen-sink/form.njk
index 5781255..f0a6c56 100644
--- a/docs/src/_includes/partials/kitchen-sink/form.njk
+++ b/docs/src/_includes/partials/kitchen-sink/form.njk
@@ -1,6 +1,9 @@
-<section id="form" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="form"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Form</h2>
+    <a href="/components/form" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <form class="form grid w-full max-w-sm gap-6">
diff --git a/docs/src/_includes/partials/kitchen-sink/input.njk b/docs/src/_includes/partials/kitchen-sink/input.njk
index c595409..305a871 100644
--- a/docs/src/_includes/partials/kitchen-sink/input.njk
+++ b/docs/src/_includes/partials/kitchen-sink/input.njk
@@ -1,6 +1,9 @@
-<section id="input" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="input"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Input</h2>
+    <a href="/components/input" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col gap-y-4">
diff --git a/docs/src/_includes/partials/kitchen-sink/label.njk b/docs/src/_includes/partials/kitchen-sink/label.njk
index 1428d40..cd77932 100644
--- a/docs/src/_includes/partials/kitchen-sink/label.njk
+++ b/docs/src/_includes/partials/kitchen-sink/label.njk
@@ -1,6 +1,9 @@
-<section id="label" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="label"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Label</h2>
+    <a href="/components/label" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col gap-y-4">
diff --git a/docs/src/_includes/partials/kitchen-sink/pagination.njk b/docs/src/_includes/partials/kitchen-sink/pagination.njk
index c87dd46..a5ae586 100644
--- a/docs/src/_includes/partials/kitchen-sink/pagination.njk
+++ b/docs/src/_includes/partials/kitchen-sink/pagination.njk
@@ -1,6 +1,9 @@
-<section id="pagination" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="pagination"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Pagination</h2>
+    <a href="/components/pagination" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="inline-flex">
diff --git a/docs/src/_includes/partials/kitchen-sink/popover.njk b/docs/src/_includes/partials/kitchen-sink/popover.njk
index 6f8f684..3054018 100644
--- a/docs/src/_includes/partials/kitchen-sink/popover.njk
+++ b/docs/src/_includes/partials/kitchen-sink/popover.njk
@@ -1,8 +1,11 @@
 {% from "popover.njk" import popover %}
 
-<section id="popover" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="popover"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Popover</h2>
+    <a href="/components/popover" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     {% call popover(
diff --git a/docs/src/_includes/partials/kitchen-sink/radio-group.njk b/docs/src/_includes/partials/kitchen-sink/radio-group.njk
index 09836c2..64d9edf 100644
--- a/docs/src/_includes/partials/kitchen-sink/radio-group.njk
+++ b/docs/src/_includes/partials/kitchen-sink/radio-group.njk
@@ -1,6 +1,9 @@
-<section id="radio-group" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="radio-group"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Radio Group</h2>
+    <a href="/components/radio-group" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col gap-y-6">
diff --git a/docs/src/_includes/partials/kitchen-sink/select.njk b/docs/src/_includes/partials/kitchen-sink/select.njk
index dc475ed..8d06bd3 100644
--- a/docs/src/_includes/partials/kitchen-sink/select.njk
+++ b/docs/src/_includes/partials/kitchen-sink/select.njk
@@ -1,8 +1,11 @@
 {% from "select.njk" import select %}
 
-<section id="select" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="select"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Select</h2>
+    <a href="/components/select" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4 gap">
 
diff --git a/docs/src/_includes/partials/kitchen-sink/skeleton.njk b/docs/src/_includes/partials/kitchen-sink/skeleton.njk
index 9185015..4d57064 100644
--- a/docs/src/_includes/partials/kitchen-sink/skeleton.njk
+++ b/docs/src/_includes/partials/kitchen-sink/skeleton.njk
@@ -1,6 +1,9 @@
-<section id="skeleton" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="skeleton"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Skeleton</h2>
+    <a href="/components/skeleton" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col gap-4">
diff --git a/docs/src/_includes/partials/kitchen-sink/slider.njk b/docs/src/_includes/partials/kitchen-sink/slider.njk
index fd4d0d7..587dfc5 100644
--- a/docs/src/_includes/partials/kitchen-sink/slider.njk
+++ b/docs/src/_includes/partials/kitchen-sink/slider.njk
@@ -1,6 +1,9 @@
-<section id="slider" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="slider"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Slider</h2>
+    <a href="/components/slider" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="max-w-sm">
diff --git a/docs/src/_includes/partials/kitchen-sink/switch.njk b/docs/src/_includes/partials/kitchen-sink/switch.njk
index 78eb2b4..c017ae4 100644
--- a/docs/src/_includes/partials/kitchen-sink/switch.njk
+++ b/docs/src/_includes/partials/kitchen-sink/switch.njk
@@ -1,6 +1,9 @@
-<section id="switch" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="switch"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Switch</h2>
+    <a href="/components/switch" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="inline-flex flex-col gap-y-6">
diff --git a/docs/src/_includes/partials/kitchen-sink/table.njk b/docs/src/_includes/partials/kitchen-sink/table.njk
index b0d2a99..f7a304d 100644
--- a/docs/src/_includes/partials/kitchen-sink/table.njk
+++ b/docs/src/_includes/partials/kitchen-sink/table.njk
@@ -1,6 +1,9 @@
-<section id="table" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="table"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Table</h2>
+    <a href="/components/table" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
 
diff --git a/docs/src/_includes/partials/kitchen-sink/tabs.njk b/docs/src/_includes/partials/kitchen-sink/tabs.njk
index 3116b5e..886b786 100644
--- a/docs/src/_includes/partials/kitchen-sink/tabs.njk
+++ b/docs/src/_includes/partials/kitchen-sink/tabs.njk
@@ -1,8 +1,11 @@
 {% from "tabs.njk" import tabs %}
 
-<section id="tabs" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="tabs"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Tabs</h2>
+    <a href="/components/tabs" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col gap-6">
diff --git a/docs/src/_includes/partials/kitchen-sink/textarea.njk b/docs/src/_includes/partials/kitchen-sink/textarea.njk
index 735eccc..26e0952 100644
--- a/docs/src/_includes/partials/kitchen-sink/textarea.njk
+++ b/docs/src/_includes/partials/kitchen-sink/textarea.njk
@@ -1,6 +1,9 @@
-<section id="textarea" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="textarea"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Textarea</h2>
+    <a href="/components/textarea" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col gap-y-10">
diff --git a/docs/src/_includes/partials/kitchen-sink/toast.njk b/docs/src/_includes/partials/kitchen-sink/toast.njk
index 21645fc..4dd5e3d 100644
--- a/docs/src/_includes/partials/kitchen-sink/toast.njk
+++ b/docs/src/_includes/partials/kitchen-sink/toast.njk
@@ -1,6 +1,9 @@
-<section id="toast" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="toast"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Toast</h2>
+    <a href="/components/toast" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-wrap items-center gap-2">
diff --git a/docs/src/_includes/partials/kitchen-sink/tooltip.njk b/docs/src/_includes/partials/kitchen-sink/tooltip.njk
index 23ca4b9..70a3d44 100644
--- a/docs/src/_includes/partials/kitchen-sink/tooltip.njk
+++ b/docs/src/_includes/partials/kitchen-sink/tooltip.njk
@@ -1,6 +1,9 @@
-<section id="tooltip" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="tooltip"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Tooltip</h2>
+    <a href="/components/tooltip" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-wrap items-center gap-4">
diff --git a/docs/src/_includes/partials/sidebar.njk b/docs/src/_includes/partials/sidebar.njk
index 96218e5..b4da7a6 100644
--- a/docs/src/_includes/partials/sidebar.njk
+++ b/docs/src/_includes/partials/sidebar.njk
@@ -38,13 +38,13 @@
     <span class="truncate text-xs">v{{ pkg.version }}</span>
   </div>
 </a>
-<div class="flex flex-col gap-2 px-2 text-sm">
+{# <div class="flex flex-col gap-2 px-2 text-sm">
   <form class="form relative">
     <label for="search" class="sr-only">Search</label>
     <input type="text" placeholder="Search the docs..." class="h-8 w-full shadow-none pl-8">
     {% lucide "search", { "class": "pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none" } %}
   </form>
-</div>
+</div> #}
 {% endset %}
 
 {% set link_attrs = {
@@ -54,6 +54,7 @@
   "hx-swap": "outerHTML"
 } %}
 
+{% set icon_home %}{% lucide "house" %}{% endset %}
 {% set icon_info %}{% lucide "info" %}{% endset %}
 {% set icon_square_terminal %}{% lucide "square-terminal" %}{% endset %}
 {% set icon_layout_dashboard %}{% lucide "layout-dashboard" %}{% endset %}
@@ -61,10 +62,10 @@
 
 {% set menu = [
   { type: "group", label: "Getting started", items: [
-    { label: "Introduction", url: "/", icon: icon_info, current: true, attrs: link_attrs },
+    { label: "Introduction", url: "/introduction", icon: icon_info, attrs: link_attrs },
     { label: "Installation", url: "/installation", icon: icon_square_terminal, attrs: link_attrs },
     { label: "Kitchen sink", url: "/kitchen-sink", icon: icon_layout_dashboard, attrs: link_attrs },
-    { label: "GitHub", url: "https://github.com/hunvreus/basecoat", icon: icon_github, attrs: link_attrs }
+    { label: "GitHub", url: "https://github.com/hunvreus/basecoat", icon: icon_github, attrs: { "target": "_blank" } }
   ]},
   { type: 'group', label: 'Components', items: [
     { label: "Accordion", url: "/components/accordion", attrs: link_attrs },
@@ -121,6 +122,7 @@
         });
       }
     }",
+    "class": "scrollbar",
     "x-init": "updateCurrentPage()",
     "@htmx:pushed-into-history.window": "updateCurrentPage()"
   },
diff --git a/docs/src/assets/styles.css b/docs/src/assets/styles.css
index aafd63b..5c79b99 100644
--- a/docs/src/assets/styles.css
+++ b/docs/src/assets/styles.css
@@ -8,9 +8,9 @@
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
-    --font-sans: 'Inter';
-    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-    --font-mono: 'JetBrains Mono';
+    --font-sans: var(--font-sans);
+    --font-serif: var(--font-serif);
+    --font-mono: var(--font-mono);
     --color-amber-50: oklch(98.7% 0.022 95.277);
     --color-amber-100: oklch(96.2% 0.059 95.617);
     --color-amber-900: oklch(41.4% 0.112 45.904);
@@ -53,24 +53,19 @@
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
-    --tracking-tight: -0.025em;
-    --tracking-widest: 0.1em;
+    --tracking-normal: var(--tracking-normal);
     --leading-tight: 1.25;
     --leading-snug: 1.375;
     --leading-normal: 1.5;
     --leading-relaxed: 1.625;
     --radius-xs: 0.125rem;
-    --radius-sm: calc(var(--radius) - 4px);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) + 4px);
-    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
-    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --shadow-2xs: var(--shadow-2xs);
+    --shadow-xs: var(--shadow-xs);
+    --shadow-sm: var(--shadow-sm);
+    --shadow-md: var(--shadow-md);
+    --shadow-lg: var(--shadow-lg);
+    --shadow-xl: var(--shadow-xl);
+    --shadow-2xl: var(--shadow-2xl);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@@ -79,32 +74,7 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
-    --color-background: var(--background);
-    --color-foreground: var(--foreground);
-    --color-card: var(--card);
-    --color-card-foreground: var(--card-foreground);
-    --color-popover: var(--popover);
-    --color-popover-foreground: var(--popover-foreground);
-    --color-primary: var(--primary);
-    --color-primary-foreground: var(--primary-foreground);
-    --color-secondary: var(--secondary);
-    --color-secondary-foreground: var(--secondary-foreground);
-    --color-muted: var(--muted);
-    --color-muted-foreground: var(--muted-foreground);
-    --color-accent: var(--accent);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-destructive: var(--destructive);
-    --color-border: var(--border);
-    --color-input: var(--input);
-    --color-ring: var(--ring);
-    --color-sidebar: var(--sidebar);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-ring: var(--sidebar-ring);
+    --shadow: var(--shadow);
   }
 }
 @layer base {
@@ -253,6 +223,9 @@
   }
 }
 @layer utilities {
+  .\@container {
+    container-type: inline-size;
+  }
   .pointer-events-none {
     pointer-events: none;
   }
@@ -285,6 +258,9 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-1 {
+    top: calc(var(--spacing) * 1);
+  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
@@ -297,6 +273,12 @@
   .right-3 {
     right: calc(var(--spacing) * 3);
   }
+  .left-1 {
+    left: calc(var(--spacing) * 1);
+  }
+  .left-1\/2 {
+    left: calc(1/2 * 100%);
+  }
   .left-2 {
     left: calc(var(--spacing) * 2);
   }
@@ -306,9 +288,6 @@
   .z-10 {
     z-index: 10;
   }
-  .z-20 {
-    z-index: 20;
-  }
   .col-span-2 {
     grid-column: span 2 / span 2;
   }
@@ -339,9 +318,6 @@
   .my-6 {
     margin-block: calc(var(--spacing) * 6);
   }
-  .mt-1 {
-    margin-top: calc(var(--spacing) * 1);
-  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
@@ -360,6 +336,9 @@
   .mb-12 {
     margin-bottom: calc(var(--spacing) * 12);
   }
+  .-ml-1 {
+    margin-left: calc(var(--spacing) * -1);
+  }
   .-ml-1\.5 {
     margin-left: calc(var(--spacing) * -1.5);
   }
@@ -404,6 +383,10 @@
     width: calc(var(--spacing) * 2.5);
     height: calc(var(--spacing) * 2.5);
   }
+  .size-3 {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
   .size-3\.5 {
     width: calc(var(--spacing) * 3.5);
     height: calc(var(--spacing) * 3.5);
@@ -447,12 +430,15 @@
   .h-14 {
     height: calc(var(--spacing) * 14);
   }
-  .h-\[150px\] {
-    height: 150px;
-  }
   .max-h-64 {
     max-height: calc(var(--spacing) * 64);
   }
+  .max-h-\[150px\] {
+    max-height: 150px;
+  }
+  .max-h-\[200px\] {
+    max-height: 200px;
+  }
   .max-h-\[612px\] {
     max-height: 612px;
   }
@@ -462,9 +448,15 @@
   .min-h-\[350px\] {
     min-height: 350px;
   }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
   .w-1\/2 {
     width: calc(1/2 * 100%);
   }
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -498,6 +490,9 @@
   .w-full {
     width: 100%;
   }
+  .max-w-\[200px\] {
+    max-width: 200px;
+  }
   .max-w-\[300px\] {
     max-width: 300px;
   }
@@ -534,17 +529,42 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
+  .-translate-x-1 {
+    --tw-translate-x: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .-translate-y-1 {
+    --tw-translate-y: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-y-0 {
+    --tw-translate-y: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-y-0\.5 {
     --tw-translate-y: calc(var(--spacing) * 0.5);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -554,15 +574,27 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .resize {
+    resize: both;
+  }
   .scroll-m-20 {
     scroll-margin: calc(var(--spacing) * 20);
   }
+  .scroll-mt-14 {
+    scroll-margin-top: calc(var(--spacing) * 14);
+  }
   .scroll-mt-16 {
     scroll-margin-top: calc(var(--spacing) * 16);
   }
   .list-decimal {
     list-style-type: decimal;
   }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -590,6 +622,9 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -614,6 +649,16 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
+  .gap-10 {
+    gap: calc(var(--spacing) * 10);
+  }
+  .space-y-1 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -635,6 +680,9 @@
       margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .gap-x-1 {
+    column-gap: calc(var(--spacing) * 1);
+  }
   .gap-x-1\.5 {
     column-gap: calc(var(--spacing) * 1.5);
   }
@@ -644,6 +692,9 @@
   .gap-x-3 {
     column-gap: calc(var(--spacing) * 3);
   }
+  .gap-x-10 {
+    column-gap: calc(var(--spacing) * 10);
+  }
   .-space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -688,16 +739,16 @@
     border-radius: calc(infinity * 1px);
   }
   .rounded-lg {
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius);
   }
   .rounded-md {
-    border-radius: var(--radius-md);
+    border-radius: calc(var(--radius) - 2px);
   }
   .rounded-sm {
-    border-radius: var(--radius-sm);
+    border-radius: calc(var(--radius) - 4px);
   }
   .rounded-xl {
-    border-radius: var(--radius-xl);
+    border-radius: calc(var(--radius) + 4px);
   }
   .border {
     border-style: var(--tw-border-style);
@@ -710,32 +761,38 @@
   .border-amber-50 {
     border-color: var(--color-amber-50);
   }
+  .border-border {
+    border-color: var(--border);
+  }
   .border-border\/50 {
-    border-color: var(--color-border);
+    border-color: var(--border);
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-border) 50%, transparent);
+      border-color: color-mix(in oklab, var(--border) 50%, transparent);
     }
   }
   .\!bg-neutral-900 {
     background-color: var(--color-neutral-900) !important;
   }
   .bg-accent {
-    background-color: var(--color-accent);
+    background-color: var(--accent);
   }
   .bg-amber-50 {
     background-color: var(--color-amber-50);
   }
   .bg-background {
-    background-color: var(--color-background);
+    background-color: var(--background);
   }
   .bg-foreground {
-    background-color: var(--color-foreground);
+    background-color: var(--foreground);
   }
   .bg-muted {
-    background-color: var(--color-muted);
+    background-color: var(--muted);
   }
   .bg-sidebar-primary {
-    background-color: var(--color-sidebar-primary);
+    background-color: var(--sidebar-primary);
+  }
+  .mask-repeat {
+    mask-repeat: repeat;
   }
   .object-cover {
     object-fit: cover;
@@ -752,6 +809,9 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
   .p-10 {
     padding: calc(var(--spacing) * 10);
   }
@@ -770,6 +830,9 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
   .py-1\.5 {
     padding-block: calc(var(--spacing) * 1.5);
   }
@@ -779,9 +842,6 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
-  .py-6 {
-    padding-block: calc(var(--spacing) * 6);
-  }
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
@@ -855,12 +915,12 @@
     font-weight: var(--font-weight-semibold);
   }
   .tracking-tight {
-    --tw-tracking: var(--tracking-tight);
-    letter-spacing: var(--tracking-tight);
+    --tw-tracking: calc(var(--tracking-normal) - 0.025em);
+    letter-spacing: calc(var(--tracking-normal) - 0.025em);
   }
   .tracking-widest {
-    --tw-tracking: var(--tracking-widest);
-    letter-spacing: var(--tracking-widest);
+    --tw-tracking: calc(var(--tracking-normal) + 0.1em);
+    letter-spacing: calc(var(--tracking-normal) + 0.1em);
   }
   .break-words {
     overflow-wrap: break-word;
@@ -875,16 +935,16 @@
     color: var(--color-amber-900);
   }
   .text-destructive {
-    color: var(--color-destructive);
+    color: var(--destructive);
   }
   .text-foreground {
-    color: var(--color-foreground);
+    color: var(--foreground);
   }
   .text-muted-foreground {
-    color: var(--color-muted-foreground);
+    color: var(--muted-foreground);
   }
   .text-sidebar-primary-foreground {
-    color: var(--color-sidebar-primary-foreground);
+    color: var(--sidebar-primary-foreground);
   }
   .text-zinc-50 {
     color: var(--color-zinc-50);
@@ -916,15 +976,15 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-xl {
-    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    --tw-shadow: var(--shadow-xl);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-xs {
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .ring-offset-background {
-    --tw-ring-offset-color: var(--color-background);
+    --tw-ring-offset-color: var(--background);
   }
   .outline {
     outline-style: var(--tw-outline-style);
@@ -1009,7 +1069,7 @@
     &:checked {
       &::before {
         content: var(--tw-content);
-        background-color: var(--color-background);
+        background-color: var(--background);
       }
     }
   }
@@ -1035,9 +1095,9 @@
   .hover\:bg-accent\/50 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-accent);
+        background-color: var(--accent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
+          background-color: color-mix(in oklab, var(--accent) 50%, transparent);
         }
       }
     }
@@ -1045,9 +1105,9 @@
   .hover\:bg-destructive\/10 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-destructive);
+        background-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+          background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
         }
       }
     }
@@ -1062,7 +1122,7 @@
   .hover\:text-foreground {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-foreground);
+        color: var(--foreground);
       }
     }
   }
@@ -1082,20 +1142,20 @@
   }
   .focus\:bg-destructive\/10 {
     &:focus {
-      background-color: var(--color-destructive);
+      background-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+        background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
       }
     }
   }
   .focus\:text-destructive {
     &:focus {
-      color: var(--color-destructive);
+      color: var(--destructive);
     }
   }
   .focus-visible\:border-ring {
     &:focus-visible {
-      border-color: var(--color-ring);
+      border-color: var(--ring);
     }
   }
   .focus-visible\:ring-1 {
@@ -1118,14 +1178,14 @@
   }
   .focus-visible\:ring-ring {
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
     }
   }
   .focus-visible\:ring-ring\/50 {
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
   }
@@ -1202,26 +1262,26 @@
       border-left-width: 1px;
     }
   }
+  .md\:p-8 {
+    @media (width >= 48rem) {
+      padding: calc(var(--spacing) * 8);
+    }
+  }
   .md\:pl-8 {
     @media (width >= 48rem) {
       padding-left: calc(var(--spacing) * 8);
     }
   }
-  .lg\:gap-10 {
-    @media (width >= 64rem) {
-      gap: calc(var(--spacing) * 10);
-    }
-  }
-  .lg\:py-8 {
-    @media (width >= 64rem) {
-      padding-block: calc(var(--spacing) * 8);
-    }
-  }
   .xl\:block {
     @media (width >= 80rem) {
       display: block;
     }
   }
+  .xl\:p-12 {
+    @media (width >= 80rem) {
+      padding: calc(var(--spacing) * 12);
+    }
+  }
   .\@md\:w-auto {
     @container (width >= 28rem) {
       width: auto;
@@ -1271,9 +1331,9 @@
   .dark\:checked\:bg-input\/30 {
     &:is(.dark *) {
       &:checked {
-        background-color: var(--color-input);
+        background-color: var(--input);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+          background-color: color-mix(in oklab, var(--input) 30%, transparent);
         }
       }
     }
@@ -1283,7 +1343,7 @@
       &:checked {
         &::before {
           content: var(--tw-content);
-          background-color: var(--color-primary);
+          background-color: var(--primary);
         }
       }
     }
@@ -1292,9 +1352,9 @@
     &:is(.dark *) {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-destructive);
+          background-color: var(--destructive);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+            background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
           }
         }
       }
@@ -1303,9 +1363,9 @@
   .dark\:focus\:bg-destructive\/20 {
     &:is(.dark *) {
       &:focus {
-        background-color: var(--color-destructive);
+        background-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+          background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
         }
       }
     }
@@ -1345,7 +1405,7 @@
   }
   .\[\&_a\]\:text-muted-foreground {
     & a {
-      color: var(--color-muted-foreground);
+      color: var(--muted-foreground);
     }
   }
   .\[\&_a\]\:no-underline {
@@ -1364,7 +1424,7 @@
     & a {
       &:hover {
         @media (hover: hover) {
-          color: var(--color-foreground);
+          color: var(--foreground);
         }
       }
     }
@@ -1404,12 +1464,12 @@
   }
   .\[\&_img\]\:ring-background {
     & img {
-      --tw-ring-color: var(--color-background);
+      --tw-ring-color: var(--background);
     }
   }
   .\[\&_img\]\:ring-card {
     & img {
-      --tw-ring-color: var(--color-card);
+      --tw-ring-color: var(--card);
     }
   }
   .\[\&_img\]\:grayscale {
@@ -1475,7 +1535,7 @@
   }
   .\[\&_svg\]\:\!text-destructive {
     & svg {
-      color: var(--color-destructive) !important;
+      color: var(--destructive) !important;
     }
   }
   .\[\&_ul\]\:m-0 {
@@ -1614,10 +1674,10 @@
 }
 @layer base {
   * {
-    border-color: var(--color-border);
-    outline-color: var(--color-ring);
+    border-color: var(--border);
+    outline-color: var(--ring);
     @supports (color: color-mix(in lab, red, red)) {
-      outline-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
     }
   }
   html {
@@ -1625,8 +1685,8 @@
   }
   body {
     overscroll-behavior: none;
-    background-color: var(--color-background);
-    color: var(--color-foreground);
+    background-color: var(--background);
+    color: var(--foreground);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
@@ -1671,7 +1731,7 @@
     grid-template-columns: 0 1fr;
     align-items: flex-start;
     row-gap: calc(var(--spacing) * 0.5);
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius);
     border-style: var(--tw-border-style);
     border-width: 1px;
     padding-inline: calc(var(--spacing) * 4);
@@ -1704,8 +1764,8 @@
       min-height: calc(var(--spacing) * 4);
       --tw-font-weight: var(--font-weight-medium);
       font-weight: var(--font-weight-medium);
-      --tw-tracking: var(--tracking-tight);
-      letter-spacing: var(--tracking-tight);
+      --tw-tracking: calc(var(--tracking-normal) - 0.025em);
+      letter-spacing: calc(var(--tracking-normal) - 0.025em);
     }
     section {
       grid-column-start: 2;
@@ -1714,7 +1774,7 @@
       gap: calc(var(--spacing) * 1);
       font-size: var(--text-sm);
       line-height: var(--tw-leading, var(--text-sm--line-height));
-      color: var(--color-muted-foreground);
+      color: var(--muted-foreground);
       & p {
         --tw-leading: var(--leading-relaxed);
         line-height: var(--leading-relaxed);
@@ -1728,17 +1788,17 @@
     }
   }
   .alert {
-    background-color: var(--color-card);
-    color: var(--color-card-foreground);
+    background-color: var(--card);
+    color: var(--card-foreground);
   }
   .alert-destructive {
-    background-color: var(--color-card);
-    color: var(--color-destructive);
+    background-color: var(--card);
+    color: var(--destructive);
     &>svg {
       color: currentcolor;
     }
     section {
-      color: var(--color-destructive);
+      color: var(--destructive);
     }
   }
 }
@@ -1749,7 +1809,7 @@
     cursor: pointer;
     align-items: center;
     justify-content: center;
-    border-radius: var(--radius-md);
+    border-radius: calc(var(--radius) - 2px);
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
     --tw-font-weight: var(--font-weight-medium);
@@ -1761,16 +1821,16 @@
     --tw-outline-style: none;
     outline-style: none;
     &:focus-visible {
-      border-color: var(--color-ring);
+      border-color: var(--ring);
     }
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &:disabled {
@@ -1780,19 +1840,19 @@
       opacity: 50%;
     }
     &[aria-invalid="true"] {
-      border-color: var(--color-destructive);
+      border-color: var(--destructive);
     }
     &[aria-invalid="true"] {
-      --tw-ring-color: var(--color-destructive);
+      --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
       }
     }
     &:is(.dark *) {
       &[aria-invalid="true"] {
-        --tw-ring-color: var(--color-destructive);
+        --tw-ring-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
         }
       }
     }
@@ -1845,77 +1905,77 @@
     height: calc(var(--spacing) * 10);
   }
   .btn, .btn-primary, .btn-sm, .btn-sm-primary, .btn-lg, .btn-lg-primary, .btn-icon, .btn-icon-primary, .btn-sm-icon, .btn-sm-icon-primary, .btn-lg-icon, .btn-lg-icon-primary {
-    background-color: var(--color-primary);
-    color: var(--color-primary-foreground);
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-primary);
+        background-color: var(--primary);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
+          background-color: color-mix(in oklab, var(--primary) 90%, transparent);
         }
       }
     }
     &[aria-pressed='true'] {
-      background-color: var(--color-primary);
+      background-color: var(--primary);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
+        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
       }
     }
   }
   .btn-secondary, .btn-sm-secondary, .btn-lg-secondary, .btn-icon-secondary, .btn-sm-icon-secondary, .btn-lg-icon-secondary {
-    background-color: var(--color-secondary);
-    color: var(--color-secondary-foreground);
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     &:hover, &[aria-pressed='true'] {
-      background-color: var(--color-secondary);
+      background-color: var(--secondary);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
+        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
       }
     }
   }
   .btn-outline, .btn-sm-outline, .btn-lg-outline, .btn-icon-outline, .btn-sm-icon-outline, .btn-lg-icon-outline {
     border-style: var(--tw-border-style);
     border-width: 1px;
-    background-color: var(--color-background);
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    background-color: var(--background);
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     &:is(.dark *) {
-      border-color: var(--color-input);
+      border-color: var(--input);
     }
     &:is(.dark *) {
-      background-color: var(--color-input);
+      background-color: var(--input);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+        background-color: color-mix(in oklab, var(--input) 30%, transparent);
       }
     }
     &:hover, &[aria-pressed='true'] {
-      background-color: var(--color-accent);
-      color: var(--color-accent-foreground);
+      background-color: var(--accent);
+      color: var(--accent-foreground);
       &:is(.dark *) {
-        background-color: var(--color-accent);
+        background-color: var(--accent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
+          background-color: color-mix(in oklab, var(--accent) 50%, transparent);
         }
       }
     }
   }
   .btn-ghost, .btn-sm-ghost, .btn-lg-ghost, .btn-icon-ghost, .btn-sm-icon-ghost, .btn-lg-icon-ghost {
     &:hover, &[aria-pressed='true'] {
-      background-color: var(--color-accent);
-      color: var(--color-accent-foreground);
+      background-color: var(--accent);
+      color: var(--accent-foreground);
       &:is(.dark *) {
-        background-color: var(--color-accent);
+        background-color: var(--accent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
+          background-color: color-mix(in oklab, var(--accent) 50%, transparent);
         }
       }
     }
   }
   .btn-link, .btn-sm-link, .btn-lg-link, .btn-icon-link, .btn-sm-icon-link, .btn-lg-icon-link {
-    color: var(--color-primary);
+    color: var(--primary);
     text-underline-offset: 4px;
     &:hover, &[aria-pressed='true'] {
       &:hover {
@@ -1926,39 +1986,39 @@
     }
   }
   .btn-destructive, .btn-sm-destructive, .btn-lg-destructive, .btn-icon-destructive, .btn-sm-icon-destructive, .btn-lg-icon-destructive {
-    background-color: var(--color-destructive);
+    background-color: var(--destructive);
     color: var(--color-white);
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     &:focus-visible {
-      --tw-ring-color: var(--color-destructive);
+      --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
       }
     }
     &:is(.dark *) {
-      background-color: var(--color-destructive);
+      background-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-destructive) 60%, transparent);
+        background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
       }
     }
     &:is(.dark *) {
       &:focus-visible {
-        --tw-ring-color: var(--color-destructive);
+        --tw-ring-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
         }
       }
     }
     &:hover, &[aria-pressed='true'] {
-      background-color: var(--color-destructive);
+      background-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-destructive) 90%, transparent);
+        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
       }
       &:is(.dark *) {
-        background-color: var(--color-destructive);
+        background-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
+          background-color: color-mix(in oklab, var(--destructive) 50%, transparent);
         }
       }
     }
@@ -1973,7 +2033,7 @@
     justify-content: center;
     gap: calc(var(--spacing) * 1);
     overflow: hidden;
-    border-radius: var(--radius-md);
+    border-radius: calc(var(--radius) - 2px);
     border-style: var(--tw-border-style);
     border-width: 1px;
     padding-inline: calc(var(--spacing) * 2);
@@ -1987,32 +2047,32 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     &:focus-visible {
-      border-color: var(--color-ring);
+      border-color: var(--ring);
     }
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &[aria-invalid="true"] {
-      border-color: var(--color-destructive);
+      border-color: var(--destructive);
     }
     &[aria-invalid="true"] {
-      --tw-ring-color: var(--color-destructive);
+      --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
       }
     }
     &:is(.dark *) {
       &[aria-invalid="true"] {
-        --tw-ring-color: var(--color-destructive);
+        --tw-ring-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
         }
       }
     }
@@ -2026,14 +2086,14 @@
   }
   .badge, .badge-primary {
     border-color: transparent;
-    background-color: var(--color-primary);
-    color: var(--color-primary-foreground);
+    background-color: var(--primary);
+    color: var(--primary-foreground);
     a& {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-primary);
+          background-color: var(--primary);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
+            background-color: color-mix(in oklab, var(--primary) 90%, transparent);
           }
         }
       }
@@ -2041,14 +2101,14 @@
   }
   .badge-secondary {
     border-color: transparent;
-    background-color: var(--color-secondary);
-    color: var(--color-secondary-foreground);
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
     a& {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-secondary);
+          background-color: var(--secondary);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-secondary) 90%, transparent);
+            background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
           }
         }
       }
@@ -2056,52 +2116,52 @@
   }
   .badge-destructive {
     border-color: transparent;
-    background-color: var(--color-destructive);
+    background-color: var(--destructive);
     color: var(--color-white);
     &:focus-visible {
-      --tw-ring-color: var(--color-destructive);
+      --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
       }
     }
     &:is(.dark *) {
-      background-color: var(--color-destructive);
+      background-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-destructive) 60%, transparent);
+        background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
       }
     }
     &:is(.dark *) {
       &:focus-visible {
-        --tw-ring-color: var(--color-destructive);
+        --tw-ring-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
         }
       }
     }
     a& {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-destructive);
+          background-color: var(--destructive);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-destructive) 90%, transparent);
+            background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
           }
         }
       }
     }
   }
   .badge-outline {
-    color: var(--color-foreground);
+    color: var(--foreground);
     a& {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-accent);
+          background-color: var(--accent);
         }
       }
     }
     a& {
       &:hover {
         @media (hover: hover) {
-          color: var(--color-accent-foreground);
+          color: var(--accent-foreground);
         }
       }
     }
@@ -2112,13 +2172,13 @@
     display: flex;
     flex-direction: column;
     gap: calc(var(--spacing) * 6);
-    border-radius: var(--radius-xl);
+    border-radius: calc(var(--radius) + 4px);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    background-color: var(--color-card);
+    background-color: var(--card);
     padding-block: calc(var(--spacing) * 6);
-    color: var(--color-card-foreground);
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    color: var(--card-foreground);
+    --tw-shadow: var(--shadow-sm);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     > header {
       container-type: inline-size;
@@ -2144,7 +2204,7 @@
       p {
         font-size: var(--text-sm);
         line-height: var(--tw-leading, var(--text-sm--line-height));
-        color: var(--color-muted-foreground);
+        color: var(--muted-foreground);
       }
     }
     > section {
@@ -2169,8 +2229,8 @@
     border-radius: 4px;
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--color-input);
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    border-color: var(--input);
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     transition-property: box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2178,22 +2238,22 @@
     --tw-outline-style: none;
     outline-style: none;
     &:checked {
-      border-color: var(--color-primary);
+      border-color: var(--primary);
     }
     &:checked {
-      background-color: var(--color-primary);
+      background-color: var(--primary);
     }
     &:focus-visible {
-      border-color: var(--color-ring);
+      border-color: var(--ring);
     }
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &:disabled {
@@ -2203,30 +2263,30 @@
       opacity: 50%;
     }
     &[aria-invalid="true"] {
-      border-color: var(--color-destructive);
+      border-color: var(--destructive);
     }
     &[aria-invalid="true"] {
-      --tw-ring-color: var(--color-destructive);
+      --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
       }
     }
     &:is(.dark *) {
-      background-color: var(--color-input);
+      background-color: var(--input);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+        background-color: color-mix(in oklab, var(--input) 30%, transparent);
       }
     }
     &:is(.dark *) {
       &:checked {
-        background-color: var(--color-primary);
+        background-color: var(--primary);
       }
     }
     &:is(.dark *) {
       &[aria-invalid="true"] {
-        --tw-ring-color: var(--color-destructive);
+        --tw-ring-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
         }
       }
     }
@@ -2234,7 +2294,7 @@
       display: block;
       width: calc(var(--spacing) * 3.5);
       height: calc(var(--spacing) * 3.5);
-      background-color: var(--color-primary-foreground);
+      background-color: var(--primary-foreground);
       --tw-content: '';
       content: var(--tw-content);
       mask-image: var(--check-icon);
@@ -2317,13 +2377,13 @@
         scale: var(--tw-scale-x) var(--tw-scale-y);
         flex-direction: column;
         gap: calc(var(--spacing) * 4);
-        border-radius: var(--radius-lg);
+        border-radius: var(--radius);
         border-style: var(--tw-border-style);
         border-width: 1px;
-        background-color: var(--color-background);
+        background-color: var(--background);
         padding: calc(var(--spacing) * 6);
         opacity: 0%;
-        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+        --tw-shadow: var(--shadow-lg);
         box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
         transition-property: all;
         transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2350,7 +2410,7 @@
           > p {
             font-size: var(--text-sm);
             line-height: var(--tw-leading, var(--text-sm--line-height));
-            color: var(--color-muted-foreground);
+            color: var(--muted-foreground);
           }
         }
         > section {
@@ -2375,7 +2435,7 @@
           right: calc(var(--spacing) * 4);
           border-radius: var(--radius-xs);
           opacity: 70%;
-          --tw-ring-offset-color: var(--color-background);
+          --tw-ring-offset-color: var(--background);
           transition-property: opacity;
           transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
           transition-duration: var(--tw-duration, var(--default-transition-duration));
@@ -2389,7 +2449,7 @@
             box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
           }
           &:focus {
-            --tw-ring-color: var(--color-ring);
+            --tw-ring-color: var(--ring);
           }
           &:focus {
             --tw-ring-offset-width: 2px;
@@ -2407,10 +2467,10 @@
             pointer-events: none;
           }
           &[data-state="open"] {
-            background-color: var(--color-accent);
+            background-color: var(--accent);
           }
           &[data-state="open"] {
-            color: var(--color-muted-foreground);
+            color: var(--muted-foreground);
           }
           & svg {
             pointer-events: none;
@@ -2434,16 +2494,16 @@
     width: 100%;
     min-width: calc(var(--spacing) * 0);
     appearance: none;
-    border-radius: var(--radius-md);
+    border-radius: calc(var(--radius) - 2px);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--color-input);
+    border-color: var(--input);
     background-color: transparent;
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 1);
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     transition-property: color,box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2451,16 +2511,16 @@
     --tw-outline-style: none;
     outline-style: none;
     & *::selection {
-      background-color: var(--color-primary);
+      background-color: var(--primary);
     }
     &::selection {
-      background-color: var(--color-primary);
+      background-color: var(--primary);
     }
     & *::selection {
-      color: var(--color-primary-foreground);
+      color: var(--primary-foreground);
     }
     &::selection {
-      color: var(--color-primary-foreground);
+      color: var(--primary-foreground);
     }
     &::file-selector-button {
       display: inline-flex;
@@ -2484,10 +2544,10 @@
       font-weight: var(--font-weight-medium);
     }
     &::file-selector-button {
-      color: var(--color-foreground);
+      color: var(--foreground);
     }
     &::placeholder {
-      color: var(--color-muted-foreground);
+      color: var(--muted-foreground);
     }
     &:disabled {
       pointer-events: none;
@@ -2503,38 +2563,38 @@
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
     &:is(.dark *) {
-      background-color: var(--color-input);
+      background-color: var(--input);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+        background-color: color-mix(in oklab, var(--input) 30%, transparent);
       }
     }
     &:focus-visible {
-      border-color: var(--color-ring);
+      border-color: var(--ring);
     }
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &[aria-invalid="true"] {
-      border-color: var(--color-destructive);
+      border-color: var(--destructive);
     }
     &[aria-invalid="true"] {
-      --tw-ring-color: var(--color-destructive);
+      --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
       }
     }
     &:is(.dark *) {
       &[aria-invalid="true"] {
-        --tw-ring-color: var(--color-destructive);
+        --tw-ring-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
         }
       }
     }
@@ -2581,14 +2641,14 @@
       scale: var(--tw-scale-x) var(--tw-scale-y);
       overflow-x: hidden;
       overflow-y: auto;
-      border-radius: var(--radius-md);
+      border-radius: calc(var(--radius) - 2px);
       border-style: var(--tw-border-style);
       border-width: 1px;
-      background-color: var(--color-popover);
+      background-color: var(--popover);
       padding: calc(var(--spacing) * 1);
-      color: var(--color-popover-foreground);
+      color: var(--popover-foreground);
       opacity: 100%;
-      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+      --tw-shadow: var(--shadow-md);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       transition-property: all;
       transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2669,7 +2729,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        border-radius: var(--radius-sm);
+        border-radius: calc(var(--radius) - 4px);
         padding-inline: calc(var(--spacing) * 2);
         padding-block: calc(var(--spacing) * 1.5);
         font-size: var(--text-sm);
@@ -2705,34 +2765,34 @@
           flex-shrink: 0;
         }
         & svg {
-          color: var(--color-muted-foreground);
+          color: var(--muted-foreground);
         }
       }
       [role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'] {
         &:hover {
           @media (hover: hover) {
-            background-color: var(--color-accent);
+            background-color: var(--accent);
           }
         }
         &:hover {
           @media (hover: hover) {
-            color: var(--color-accent-foreground);
+            color: var(--accent-foreground);
           }
         }
         &:focus-visible {
-          background-color: var(--color-accent);
+          background-color: var(--accent);
         }
         &:focus-visible {
-          color: var(--color-accent-foreground);
+          color: var(--accent-foreground);
         }
       }
       [role='option'] {
         padding-right: calc(var(--spacing) * 7.5);
         &[data-focus] {
-          background-color: var(--color-accent);
+          background-color: var(--accent);
         }
         &[data-focus] {
-          color: var(--color-accent-foreground);
+          color: var(--accent-foreground);
         }
         &[aria-selected='true'] {
           background-image: var(--check-icon);
@@ -2756,7 +2816,7 @@
         padding-block: calc(var(--spacing) * 1.5);
         font-size: var(--text-xs);
         line-height: var(--tw-leading, var(--text-xs--line-height));
-        color: var(--color-muted-foreground);
+        color: var(--muted-foreground);
       }
       [role='listbox'] [role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
         display: none;
@@ -2764,7 +2824,7 @@
       [role='separator'] {
         margin-inline: calc(var(--spacing) * -1);
         margin-block: calc(var(--spacing) * 1);
-        border-color: var(--color-border);
+        border-color: var(--border);
       }
       > header {
         margin-inline: calc(var(--spacing) * -1);
@@ -2789,7 +2849,7 @@
           width: 100%;
           min-width: calc(var(--spacing) * 0);
           flex: 1;
-          border-radius: var(--radius-md);
+          border-radius: calc(var(--radius) - 2px);
           background-color: transparent;
           padding-block: calc(var(--spacing) * 3);
           font-size: var(--text-sm);
@@ -2801,7 +2861,7 @@
             outline-offset: 2px;
           }
           &::placeholder {
-            color: var(--color-muted-foreground);
+            color: var(--muted-foreground);
           }
           &:disabled {
             cursor: not-allowed;
@@ -2844,9 +2904,9 @@
     border-radius: calc(infinity * 1px);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--color-input);
-    color: var(--color-primary);
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    border-color: var(--input);
+    color: var(--primary);
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     transition-property: color,box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2854,16 +2914,16 @@
     --tw-outline-style: none;
     outline-style: none;
     &:focus-visible {
-      border-color: var(--color-ring);
+      border-color: var(--ring);
     }
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &:disabled {
@@ -2873,25 +2933,25 @@
       opacity: 50%;
     }
     &[aria-invalid="true"] {
-      border-color: var(--color-destructive);
+      border-color: var(--destructive);
     }
     &[aria-invalid="true"] {
-      --tw-ring-color: var(--color-destructive);
+      --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
       }
     }
     &:is(.dark *) {
-      background-color: var(--color-input);
+      background-color: var(--input);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+        background-color: color-mix(in oklab, var(--input) 30%, transparent);
       }
     }
     &:is(.dark *) {
       &[aria-invalid="true"] {
-        --tw-ring-color: var(--color-destructive);
+        --tw-ring-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
         }
       }
     }
@@ -2906,7 +2966,7 @@
       --tw-translate-y: calc(calc(1/2 * 100%) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
       border-radius: calc(infinity * 1px);
-      background-color: var(--color-primary);
+      background-color: var(--primary);
       --tw-content: '';
       content: var(--tw-content);
     }
@@ -2945,13 +3005,13 @@
       border-radius: calc(infinity * 1px);
       border-style: var(--tw-border-style);
       border-width: 1px;
-      border-color: var(--color-primary);
-      background-color: var(--color-background);
-      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+      border-color: var(--primary);
+      background-color: var(--background);
+      --tw-shadow: var(--shadow-sm);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &::-webkit-slider-runnable-track {
@@ -2971,13 +3031,13 @@
       border-radius: calc(infinity * 1px);
       border-style: var(--tw-border-style);
       border-width: 1px;
-      border-color: var(--color-primary);
-      background-color: var(--color-background);
-      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+      border-color: var(--primary);
+      background-color: var(--background);
+      --tw-shadow: var(--shadow-sm);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &::-moz-range-track {
@@ -2997,13 +3057,13 @@
       border-radius: calc(infinity * 1px);
       border-style: var(--tw-border-style);
       border-width: 1px;
-      border-color: var(--color-primary);
-      background-color: var(--color-background);
-      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+      border-color: var(--primary);
+      background-color: var(--background);
+      --tw-shadow: var(--shadow-sm);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &::-ms-track {
@@ -3014,11 +3074,11 @@
     }
     &::-ms-fill-lower {
       border-radius: calc(infinity * 1px);
-      background-color: var(--color-primary);
+      background-color: var(--primary);
     }
     &::-ms-fill-upper {
       border-radius: calc(infinity * 1px);
-      background-color: var(--color-muted);
+      background-color: var(--muted);
     }
   }
 }
@@ -3031,10 +3091,10 @@
     align-items: center;
     justify-content: space-between;
     gap: calc(var(--spacing) * 2);
-    border-radius: var(--radius-md);
+    border-radius: calc(var(--radius) - 2px);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--color-input);
+    border-color: var(--input);
     background-color: transparent;
     padding-block: calc(var(--spacing) * 2);
     padding-right: calc(var(--spacing) * 9);
@@ -3042,7 +3102,7 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
     white-space: nowrap;
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     transition-property: color,box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3050,16 +3110,16 @@
     --tw-outline-style: none;
     outline-style: none;
     &:focus-visible {
-      border-color: var(--color-ring);
+      border-color: var(--ring);
     }
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &:disabled {
@@ -3069,35 +3129,35 @@
       opacity: 50%;
     }
     &[aria-invalid="true"] {
-      border-color: var(--color-destructive);
+      border-color: var(--destructive);
     }
     &[aria-invalid="true"] {
-      --tw-ring-color: var(--color-destructive);
+      --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
       }
     }
     &:is(.dark *) {
-      background-color: var(--color-input);
+      background-color: var(--input);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+        background-color: color-mix(in oklab, var(--input) 30%, transparent);
       }
     }
     &:is(.dark *) {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-input);
+          background-color: var(--input);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-input) 50%, transparent);
+            background-color: color-mix(in oklab, var(--input) 50%, transparent);
           }
         }
       }
     }
     &:is(.dark *) {
       &[aria-invalid="true"] {
-        --tw-ring-color: var(--color-destructive);
+        --tw-ring-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
         }
       }
     }
@@ -3137,8 +3197,8 @@
     display: flex;
     width: var(--sidebar-mobile-width);
     flex-direction: column;
-    background-color: var(--color-sidebar);
-    color: var(--color-sidebar-foreground);
+    background-color: var(--sidebar);
+    color: var(--sidebar-foreground);
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
@@ -3222,7 +3282,7 @@
     [role=separator] {
       margin-inline: calc(var(--spacing) * 2);
       width: auto;
-      border-color: var(--color-sidebar-border);
+      border-color: var(--sidebar-border);
     }
     > section {
       display: flex;
@@ -3244,17 +3304,17 @@
         height: calc(var(--spacing) * 8);
         flex-shrink: 0;
         align-items: center;
-        border-radius: var(--radius-md);
+        border-radius: calc(var(--radius) - 2px);
         padding-inline: calc(var(--spacing) * 2);
         font-size: var(--text-xs);
         line-height: var(--tw-leading, var(--text-xs--line-height));
         --tw-font-weight: var(--font-weight-medium);
         font-weight: var(--font-weight-medium);
-        color: var(--color-sidebar-foreground);
+        color: var(--sidebar-foreground);
         @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, var(--color-sidebar-foreground) 70%, transparent);
+          color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent);
         }
-        --tw-ring-color: var(--color-sidebar-ring);
+        --tw-ring-color: var(--sidebar-ring);
         --tw-outline-style: none;
         outline-style: none;
         @media (forced-colors: active) {
@@ -3294,12 +3354,12 @@
             align-items: center;
             gap: calc(var(--spacing) * 2);
             overflow: hidden;
-            border-radius: var(--radius-md);
+            border-radius: calc(var(--radius) - 2px);
             padding: calc(var(--spacing) * 2);
             text-align: left;
             font-size: var(--text-sm);
             line-height: var(--tw-leading, var(--text-sm--line-height));
-            --tw-ring-color: var(--color-sidebar-ring);
+            --tw-ring-color: var(--sidebar-ring);
             --tw-outline-style: none;
             outline-style: none;
             @media (forced-colors: active) {
@@ -3311,12 +3371,12 @@
             transition-duration: var(--tw-duration, var(--default-transition-duration));
             &:hover {
               @media (hover: hover) {
-                background-color: var(--color-sidebar-accent);
+                background-color: var(--sidebar-accent);
               }
             }
             &:hover {
               @media (hover: hover) {
-                color: var(--color-sidebar-accent-foreground);
+                color: var(--sidebar-accent-foreground);
               }
             }
             &:focus-visible {
@@ -3324,10 +3384,10 @@
               box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
             }
             &:active {
-              background-color: var(--color-sidebar-accent);
+              background-color: var(--sidebar-accent);
             }
             &:active {
-              color: var(--color-sidebar-accent-foreground);
+              color: var(--sidebar-accent-foreground);
             }
             &:disabled {
               pointer-events: none;
@@ -3354,39 +3414,39 @@
               flex-shrink: 0;
             }
             &[aria-current=page] {
-              background-color: var(--color-sidebar-accent);
+              background-color: var(--sidebar-accent);
             }
             &[aria-current=page] {
               --tw-font-weight: var(--font-weight-medium);
               font-weight: var(--font-weight-medium);
             }
             &[aria-current=page] {
-              color: var(--color-sidebar-accent-foreground);
+              color: var(--sidebar-accent-foreground);
             }
             &:not([data-variant]), &[data-variant=default] {
               &:hover {
                 @media (hover: hover) {
-                  background-color: var(--color-sidebar-accent);
+                  background-color: var(--sidebar-accent);
                 }
               }
               &:hover {
                 @media (hover: hover) {
-                  color: var(--color-sidebar-accent-foreground);
+                  color: var(--sidebar-accent-foreground);
                 }
               }
             }
             &[data-variant=outline] {
-              background-color: var(--color-background);
+              background-color: var(--background);
               --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-border)));
               box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
               &:hover {
                 @media (hover: hover) {
-                  background-color: var(--color-sidebar-accent);
+                  background-color: var(--sidebar-accent);
                 }
               }
               &:hover {
                 @media (hover: hover) {
-                  color: var(--color-sidebar-accent-foreground);
+                  color: var(--sidebar-accent-foreground);
                 }
               }
               &:hover {
@@ -3429,7 +3489,7 @@
                 display: block;
                 width: calc(var(--spacing) * 3.5);
                 height: calc(var(--spacing) * 3.5);
-                background-color: var(--color-primary);
+                background-color: var(--primary);
                 transition-property: transform, translate, scale, rotate;
                 transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
                 transition-duration: var(--tw-duration, var(--default-transition-duration));
@@ -3458,7 +3518,7 @@
           gap: calc(var(--spacing) * 1);
           border-left-style: var(--tw-border-style);
           border-left-width: 1px;
-          border-color: var(--color-sidebar-border);
+          border-color: var(--sidebar-border);
           padding-inline: calc(var(--spacing) * 2.5);
           padding-block: calc(var(--spacing) * 0.5);
         }
@@ -3478,7 +3538,7 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: transparent;
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3486,16 +3546,16 @@
     --tw-outline-style: none;
     outline-style: none;
     &:focus-visible {
-      border-color: var(--color-ring);
+      border-color: var(--ring);
     }
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &:disabled {
@@ -3504,19 +3564,19 @@
     &:disabled {
       opacity: 50%;
     }
-    background-color: var(--color-input);
+    background-color: var(--input);
     &:checked {
-      background-color: var(--color-primary);
+      background-color: var(--primary);
     }
     &:is(.dark *) {
-      background-color: var(--color-input);
+      background-color: var(--input);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-input) 80%, transparent);
+        background-color: color-mix(in oklab, var(--input) 80%, transparent);
       }
     }
     &:is(.dark *) {
       &:checked {
-        background-color: var(--color-primary);
+        background-color: var(--primary);
       }
     }
     &::before {
@@ -3554,12 +3614,12 @@
     }
     &::before {
       content: var(--tw-content);
-      background-color: var(--color-background);
+      background-color: var(--background);
     }
     &:is(.dark *) {
       &::before {
         content: var(--tw-content);
-        background-color: var(--color-foreground);
+        background-color: var(--foreground);
       }
     }
     &:checked {
@@ -3572,7 +3632,7 @@
       &:checked {
         &::before {
           content: var(--tw-content);
-          background-color: var(--color-primary-foreground);
+          background-color: var(--primary-foreground);
         }
       }
     }
@@ -3599,9 +3659,9 @@
     tfoot {
       border-top-style: var(--tw-border-style);
       border-top-width: 1px;
-      background-color: var(--color-muted);
+      background-color: var(--muted);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
       }
       --tw-font-weight: var(--font-weight-medium);
       font-weight: var(--font-weight-medium);
@@ -3620,9 +3680,9 @@
       transition-duration: var(--tw-duration, var(--default-transition-duration));
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-muted);
+          background-color: var(--muted);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+            background-color: color-mix(in oklab, var(--muted) 50%, transparent);
           }
         }
       }
@@ -3635,7 +3695,7 @@
       --tw-font-weight: var(--font-weight-medium);
       font-weight: var(--font-weight-medium);
       white-space: nowrap;
-      color: var(--color-foreground);
+      color: var(--foreground);
       &:has([role=checkbox]) {
         padding-right: calc(var(--spacing) * 0);
       }
@@ -3660,7 +3720,7 @@
       margin-top: calc(var(--spacing) * 4);
       font-size: var(--text-sm);
       line-height: var(--tw-leading, var(--text-sm--line-height));
-      color: var(--color-muted-foreground);
+      color: var(--muted-foreground);
     }
   }
 }
@@ -3675,10 +3735,10 @@
       width: fit-content;
       align-items: center;
       justify-content: center;
-      border-radius: var(--radius-lg);
-      background-color: var(--color-muted);
+      border-radius: var(--radius);
+      background-color: var(--muted);
       padding: 3px;
-      color: var(--color-muted-foreground);
+      color: var(--muted-foreground);
       [role='tab'] {
         display: inline-flex;
         height: calc(100% - 1px);
@@ -3686,7 +3746,7 @@
         align-items: center;
         justify-content: center;
         gap: calc(var(--spacing) * 1.5);
-        border-radius: var(--radius-md);
+        border-radius: calc(var(--radius) - 2px);
         border-style: var(--tw-border-style);
         border-width: 1px;
         border-color: transparent;
@@ -3697,21 +3757,21 @@
         --tw-font-weight: var(--font-weight-medium);
         font-weight: var(--font-weight-medium);
         white-space: nowrap;
-        color: var(--color-foreground);
+        color: var(--foreground);
         transition-property: color,box-shadow;
         transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
         transition-duration: var(--tw-duration, var(--default-transition-duration));
         &:focus-visible {
-          border-color: var(--color-ring);
+          border-color: var(--ring);
         }
         &:focus-visible {
           --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
           box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
         }
         &:focus-visible {
-          --tw-ring-color: var(--color-ring);
+          --tw-ring-color: var(--ring);
           @supports (color: color-mix(in lab, red, red)) {
-            --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+            --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
           }
         }
         &:focus-visible {
@@ -3719,7 +3779,7 @@
           outline-width: 1px;
         }
         &:focus-visible {
-          outline-color: var(--color-ring);
+          outline-color: var(--ring);
         }
         &:disabled {
           pointer-events: none;
@@ -3728,7 +3788,7 @@
           opacity: 50%;
         }
         &:is(.dark *) {
-          color: var(--color-muted-foreground);
+          color: var(--muted-foreground);
         }
         & svg {
           pointer-events: none;
@@ -3741,20 +3801,20 @@
           height: calc(var(--spacing) * 4);
         }
         &[aria-selected='true'] {
-          background-color: var(--color-background);
-          --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+          background-color: var(--background);
+          --tw-shadow: var(--shadow-sm);
           box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
           &:is(.dark *) {
-            border-color: var(--color-input);
+            border-color: var(--input);
           }
           &:is(.dark *) {
-            background-color: var(--color-input);
+            background-color: var(--input);
             @supports (color: color-mix(in lab, red, red)) {
-              background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+              background-color: color-mix(in oklab, var(--input) 30%, transparent);
             }
           }
           &:is(.dark *) {
-            color: var(--color-foreground);
+            color: var(--foreground);
           }
         }
       }
@@ -3772,16 +3832,16 @@
     field-sizing: content;
     min-height: calc(var(--spacing) * 16);
     width: 100%;
-    border-radius: var(--radius-md);
+    border-radius: calc(var(--radius) - 2px);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--color-input);
+    border-color: var(--input);
     background-color: transparent;
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 2);
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     transition-property: color,box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3789,19 +3849,19 @@
     --tw-outline-style: none;
     outline-style: none;
     &::placeholder {
-      color: var(--color-muted-foreground);
+      color: var(--muted-foreground);
     }
     &:focus-visible {
-      border-color: var(--color-ring);
+      border-color: var(--ring);
     }
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
     &:disabled {
@@ -3811,12 +3871,12 @@
       opacity: 50%;
     }
     &[aria-invalid="true"] {
-      border-color: var(--color-destructive);
+      border-color: var(--destructive);
     }
     &[aria-invalid="true"] {
-      --tw-ring-color: var(--color-destructive);
+      --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
       }
     }
     @media (width >= 48rem) {
@@ -3824,16 +3884,16 @@
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
     &:is(.dark *) {
-      background-color: var(--color-input);
+      background-color: var(--input);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+        background-color: color-mix(in oklab, var(--input) 30%, transparent);
       }
     }
     &:is(.dark *) {
       &[aria-invalid="true"] {
-        --tw-ring-color: var(--color-destructive);
+        --tw-ring-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
         }
       }
     }
@@ -3879,13 +3939,13 @@
       transition-timing-function: var(--ease-in-out);
       .toast-content {
         overflow: hidden;
-        border-radius: var(--radius-lg);
+        border-radius: var(--radius);
         border-style: var(--tw-border-style);
         border-width: 1px;
-        background-color: var(--color-popover);
+        background-color: var(--popover);
         font-size: 13px;
-        color: var(--color-popover-foreground);
-        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+        color: var(--popover-foreground);
+        --tw-shadow: var(--shadow-lg);
         box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       }
       &[aria-hidden='true'] {
@@ -3927,13 +3987,13 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      border-radius: var(--radius-md);
-      background-color: var(--color-primary);
+      border-radius: calc(var(--radius) - 2px);
+      background-color: var(--primary);
       padding-inline: calc(var(--spacing) * 3);
       padding-block: calc(var(--spacing) * 1.5);
       font-size: var(--text-xs);
       line-height: var(--tw-leading, var(--text-xs--line-height));
-      color: var(--color-primary-foreground);
+      color: var(--primary-foreground);
       opacity: 0%;
       transition-property: all;
       transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -4112,8 +4172,8 @@
     line-height: var(--tw-leading, var(--text-xl--line-height));
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
-    --tw-tracking: var(--tracking-tight);
-    letter-spacing: var(--tracking-tight);
+    --tw-tracking: calc(var(--tracking-normal) - 0.025em);
+    letter-spacing: calc(var(--tracking-normal) - 0.025em);
     &:first-child {
       margin-top: calc(var(--spacing) * 0);
     }
@@ -4126,8 +4186,8 @@
     line-height: var(--tw-leading, var(--text-lg--line-height));
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
-    --tw-tracking: var(--tracking-tight);
-    letter-spacing: var(--tracking-tight);
+    --tw-tracking: calc(var(--tracking-normal) - 0.025em);
+    letter-spacing: calc(var(--tracking-normal) - 0.025em);
   }
   .prose {
     margin-block: calc(var(--spacing) * 6);
@@ -4140,7 +4200,7 @@
     code:not(pre > code) {
       position: relative;
       border-radius: 0.25rem;
-      background-color: var(--color-muted);
+      background-color: var(--muted);
       padding-inline: 0.3rem;
       padding-block: 0.2rem;
       font-family: var(--font-mono);
@@ -4150,7 +4210,7 @@
     blockquote {
       border-left-style: var(--tw-border-style);
       border-left-width: 4px;
-      border-color: var(--color-border);
+      border-color: var(--border);
       padding-left: calc(var(--spacing) * 4);
     }
     ol {
@@ -4193,8 +4253,8 @@
     border-radius: calc(infinity * 1px);
     border-style: var(--tw-border-style);
     border-width: 4px;
-    border-color: var(--color-background);
-    background-color: var(--color-muted);
+    border-color: var(--background);
+    background-color: var(--muted);
     text-align: center;
     text-indent: -1px;
     font-family: var(--font-mono);
@@ -4220,6 +4280,292 @@
     content: counter(step);
   }
 }
+.theme-claude {
+  &:root {
+    --background: oklch(0.98 0.01 95.10);
+    --foreground: oklch(0.34 0.03 95.72);
+    --card: oklch(0.98 0.01 95.10);
+    --card-foreground: oklch(0.19 0.00 106.59);
+    --popover: oklch(1.00 0 0);
+    --popover-foreground: oklch(0.27 0.02 98.94);
+    --primary: oklch(0.62 0.14 39.04);
+    --primary-foreground: oklch(1.00 0 0);
+    --secondary: oklch(0.92 0.01 92.99);
+    --secondary-foreground: oklch(0.43 0.02 98.60);
+    --muted: oklch(0.93 0.02 90.24);
+    --muted-foreground: oklch(0.61 0.01 97.42);
+    --accent: oklch(0.92 0.01 92.99);
+    --accent-foreground: oklch(0.27 0.02 98.94);
+    --destructive: oklch(0.19 0.00 106.59);
+    --destructive-foreground: oklch(1.00 0 0);
+    --border: oklch(0.88 0.01 97.36);
+    --input: oklch(0.76 0.02 98.35);
+    --ring: oklch(0.59 0.17 253.06);
+    --chart-1: oklch(0.56 0.13 43.00);
+    --chart-2: oklch(0.69 0.16 290.41);
+    --chart-3: oklch(0.88 0.03 93.13);
+    --chart-4: oklch(0.88 0.04 298.18);
+    --chart-5: oklch(0.56 0.13 42.06);
+    --sidebar: oklch(0.97 0.01 98.88);
+    --sidebar-foreground: oklch(0.36 0.01 106.65);
+    --sidebar-primary: oklch(0.62 0.14 39.04);
+    --sidebar-primary-foreground: oklch(0.99 0 0);
+    --sidebar-accent: oklch(0.92 0.01 92.99);
+    --sidebar-accent-foreground: oklch(0.33 0 0);
+    --sidebar-border: oklch(0.94 0 0);
+    --sidebar-ring: oklch(0.77 0 0);
+    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --radius: 0.5rem;
+    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+  }
+  &.dark {
+    --background: oklch(0.27 0.00 106.64);
+    --foreground: oklch(0.81 0.01 93.01);
+    --card: oklch(0.27 0.00 106.64);
+    --card-foreground: oklch(0.98 0.01 95.10);
+    --popover: oklch(0.31 0.00 106.60);
+    --popover-foreground: oklch(0.92 0.00 106.48);
+    --primary: oklch(0.67 0.13 38.76);
+    --primary-foreground: oklch(1.00 0 0);
+    --secondary: oklch(0.98 0.01 95.10);
+    --secondary-foreground: oklch(0.31 0.00 106.60);
+    --muted: oklch(0.22 0.00 106.71);
+    --muted-foreground: oklch(0.77 0.02 99.07);
+    --accent: oklch(0.21 0.01 95.42);
+    --accent-foreground: oklch(0.97 0.01 98.88);
+    --destructive: oklch(0.64 0.21 25.33);
+    --destructive-foreground: oklch(1.00 0 0);
+    --border: oklch(0.36 0.01 106.89);
+    --input: oklch(0.43 0.01 100.22);
+    --ring: oklch(0.59 0.17 253.06);
+    --chart-1: oklch(0.56 0.13 43.00);
+    --chart-2: oklch(0.69 0.16 290.41);
+    --chart-3: oklch(0.21 0.01 95.42);
+    --chart-4: oklch(0.31 0.05 289.32);
+    --chart-5: oklch(0.56 0.13 42.06);
+    --sidebar: oklch(0.24 0.00 67.71);
+    --sidebar-foreground: oklch(0.81 0.01 93.01);
+    --sidebar-primary: oklch(0.33 0 0);
+    --sidebar-primary-foreground: oklch(0.99 0 0);
+    --sidebar-accent: oklch(0.17 0.00 106.62);
+    --sidebar-accent-foreground: oklch(0.81 0.01 93.01);
+    --sidebar-border: oklch(0.94 0 0);
+    --sidebar-ring: oklch(0.77 0 0);
+    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --radius: 0.5rem;
+    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+  }
+}
+.theme-doom-64 {
+  &:root {
+    --background: oklch(0.85 0 0);
+    --foreground: oklch(0.24 0 0);
+    --card: oklch(0.76 0 0);
+    --card-foreground: oklch(0.24 0 0);
+    --popover: oklch(0.76 0 0);
+    --popover-foreground: oklch(0.24 0 0);
+    --primary: oklch(0.50 0.19 27.48);
+    --primary-foreground: oklch(1.00 0 0);
+    --secondary: oklch(0.50 0.09 126.19);
+    --secondary-foreground: oklch(1.00 0 0);
+    --muted: oklch(0.78 0 0);
+    --muted-foreground: oklch(0.41 0 0);
+    --accent: oklch(0.59 0.10 245.74);
+    --accent-foreground: oklch(1.00 0 0);
+    --destructive: oklch(0.71 0.20 46.46);
+    --destructive-foreground: oklch(0 0 0);
+    --border: oklch(0.43 0 0);
+    --input: oklch(0.43 0 0);
+    --ring: oklch(0.50 0.19 27.48);
+    --chart-1: oklch(0.50 0.19 27.48);
+    --chart-2: oklch(0.50 0.09 126.19);
+    --chart-3: oklch(0.59 0.10 245.74);
+    --chart-4: oklch(0.71 0.20 46.46);
+    --chart-5: oklch(0.57 0.04 40.43);
+    --sidebar: oklch(0.76 0 0);
+    --sidebar-foreground: oklch(0.24 0 0);
+    --sidebar-primary: oklch(0.50 0.19 27.48);
+    --sidebar-primary-foreground: oklch(1.00 0 0);
+    --sidebar-accent: oklch(0.59 0.10 245.74);
+    --sidebar-accent-foreground: oklch(1.00 0 0);
+    --sidebar-border: oklch(0.43 0 0);
+    --sidebar-ring: oklch(0.50 0.19 27.48);
+    --font-sans: "Oxanium", sans-serif;
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono: "Source Code Pro", monospace;
+    --radius: 0px;
+    --shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.20);
+    --shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.20);
+    --shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
+    --shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
+    --shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 2px 4px -1px hsl(0 0% 0% / 0.40);
+    --shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 4px 6px -1px hsl(0 0% 0% / 0.40);
+    --shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 8px 10px -1px hsl(0 0% 0% / 0.40);
+    --shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 1.00);
+  }
+  &.dark {
+    --background: oklch(0.22 0 0);
+    --foreground: oklch(0.91 0 0);
+    --card: oklch(0.29 0 0);
+    --card-foreground: oklch(0.91 0 0);
+    --popover: oklch(0.29 0 0);
+    --popover-foreground: oklch(0.91 0 0);
+    --primary: oklch(0.61 0.21 27.03);
+    --primary-foreground: oklch(1.00 0 0);
+    --secondary: oklch(0.64 0.15 133.01);
+    --secondary-foreground: oklch(0 0 0);
+    --muted: oklch(0.26 0 0);
+    --muted-foreground: oklch(0.71 0 0);
+    --accent: oklch(0.75 0.12 244.75);
+    --accent-foreground: oklch(0 0 0);
+    --destructive: oklch(0.78 0.17 68.09);
+    --destructive-foreground: oklch(0 0 0);
+    --border: oklch(0.41 0 0);
+    --input: oklch(0.41 0 0);
+    --ring: oklch(0.61 0.21 27.03);
+    --chart-1: oklch(0.61 0.21 27.03);
+    --chart-2: oklch(0.64 0.15 133.01);
+    --chart-3: oklch(0.75 0.12 244.75);
+    --chart-4: oklch(0.78 0.17 68.09);
+    --chart-5: oklch(0.65 0.03 40.80);
+    --sidebar: oklch(0.19 0 0);
+    --sidebar-foreground: oklch(0.91 0 0);
+    --sidebar-primary: oklch(0.61 0.21 27.03);
+    --sidebar-primary-foreground: oklch(1.00 0 0);
+    --sidebar-accent: oklch(0.75 0.12 244.75);
+    --sidebar-accent-foreground: oklch(0 0 0);
+    --sidebar-border: oklch(0.41 0 0);
+    --sidebar-ring: oklch(0.61 0.21 27.03);
+    --font-sans: "Oxanium", sans-serif;
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono: "Source Code Pro", monospace;
+    --radius: 0px;
+    --shadow-2xs: 0px 2px 5px 0px hsl(0 0% 0% / 0.30);
+    --shadow-xs: 0px 2px 5px 0px hsl(0 0% 0% / 0.30);
+    --shadow-sm: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 1px 2px -1px hsl(0 0% 0% / 0.60);
+    --shadow: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 1px 2px -1px hsl(0 0% 0% / 0.60);
+    --shadow-md: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 2px 4px -1px hsl(0 0% 0% / 0.60);
+    --shadow-lg: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 4px 6px -1px hsl(0 0% 0% / 0.60);
+    --shadow-xl: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 8px 10px -1px hsl(0 0% 0% / 0.60);
+    --shadow-2xl: 0px 2px 5px 0px hsl(0 0% 0% / 1.50);
+  }
+}
+.theme-supabase {
+  &:root {
+    --background: oklch(0.99 0 0);
+    --foreground: oklch(0.20 0 0);
+    --card: oklch(0.99 0 0);
+    --card-foreground: oklch(0.20 0 0);
+    --popover: oklch(0.99 0 0);
+    --popover-foreground: oklch(0.44 0 0);
+    --primary: oklch(0.83 0.13 160.91);
+    --primary-foreground: oklch(0.26 0.01 166.46);
+    --secondary: oklch(0.99 0 0);
+    --secondary-foreground: oklch(0.20 0 0);
+    --muted: oklch(0.95 0 0);
+    --muted-foreground: oklch(0.24 0 0);
+    --accent: oklch(0.95 0 0);
+    --accent-foreground: oklch(0.24 0 0);
+    --destructive: oklch(0.55 0.19 32.73);
+    --destructive-foreground: oklch(0.99 0.00 17.21);
+    --border: oklch(0.90 0 0);
+    --input: oklch(0.90 0 0);
+    --ring: oklch(0.83 0.13 160.91);
+    --chart-1: oklch(0.83 0.13 160.91);
+    --chart-2: oklch(0.62 0.19 259.81);
+    --chart-3: oklch(0.61 0.22 292.72);
+    --chart-4: oklch(0.77 0.16 70.08);
+    --chart-5: oklch(0.70 0.15 162.48);
+    --sidebar: oklch(0.99 0 0);
+    --sidebar-foreground: oklch(0.55 0 0);
+    --sidebar-primary: oklch(0.83 0.13 160.91);
+    --sidebar-primary-foreground: oklch(0.26 0.01 166.46);
+    --sidebar-accent: oklch(0.95 0 0);
+    --sidebar-accent-foreground: oklch(0.24 0 0);
+    --sidebar-border: oklch(0.90 0 0);
+    --sidebar-ring: oklch(0.83 0.13 160.91);
+    --font-sans: Outfit, sans-serif;
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono: monospace;
+    --radius: 0.5rem;
+    --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+    --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+    --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+    --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+    --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
+    --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
+    --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
+    --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
+    --tracking-normal: 0.025em;
+  }
+  &.dark {
+    --background: oklch(0.18 0 0);
+    --foreground: oklch(0.93 0.01 255.51);
+    --card: oklch(0.20 0 0);
+    --card-foreground: oklch(0.93 0.01 255.51);
+    --popover: oklch(0.26 0 0);
+    --popover-foreground: oklch(0.73 0 0);
+    --primary: oklch(0.44 0.10 156.76);
+    --primary-foreground: oklch(0.92 0.01 167.16);
+    --secondary: oklch(0.26 0 0);
+    --secondary-foreground: oklch(0.99 0 0);
+    --muted: oklch(0.24 0 0);
+    --muted-foreground: oklch(0.71 0 0);
+    --accent: oklch(0.31 0 0);
+    --accent-foreground: oklch(0.99 0 0);
+    --destructive: oklch(0.31 0.09 29.79);
+    --destructive-foreground: oklch(0.94 0.00 34.31);
+    --border: oklch(0.28 0 0);
+    --input: oklch(0.28 0 0);
+    --ring: oklch(0.80 0.18 151.71);
+    --chart-1: oklch(0.80 0.18 151.71);
+    --chart-2: oklch(0.71 0.14 254.62);
+    --chart-3: oklch(0.71 0.16 293.54);
+    --chart-4: oklch(0.84 0.16 84.43);
+    --chart-5: oklch(0.78 0.13 181.91);
+    --sidebar: oklch(0.18 0 0);
+    --sidebar-foreground: oklch(0.63 0 0);
+    --sidebar-primary: oklch(0.44 0.10 156.76);
+    --sidebar-primary-foreground: oklch(0.92 0.01 167.16);
+    --sidebar-accent: oklch(0.31 0 0);
+    --sidebar-accent-foreground: oklch(0.99 0 0);
+    --sidebar-border: oklch(0.28 0 0);
+    --sidebar-ring: oklch(0.80 0.18 151.71);
+    --font-sans: Outfit, sans-serif;
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono: monospace;
+    --radius: 0.5rem;
+    --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+    --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+    --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+    --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+    --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
+    --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
+    --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
+    --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
+  }
+  body {
+    letter-spacing: var(--tracking-normal);
+  }
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -4235,6 +4581,26 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -4449,6 +4815,11 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;
diff --git a/docs/src/components/alert-dialog.njk b/docs/src/components/alert-dialog.njk
index 8985da1..9b06336 100644
--- a/docs/src/components/alert-dialog.njk
+++ b/docs/src/components/alert-dialog.njk
@@ -34,13 +34,15 @@ toc:
 ) }}
 {% endset %}
 
-{% set code_script %}<script>
+{% set code_script %}
+<script>
 {% fetchCode "src/js/dialog.js" %}
 
 document.addEventListener('alpine:init', () => {
   window.basecoat.registerDialog(Alpine);
 });
-</script>{% endset %}
+</script>
+{% endset %}
 
 {{ code_preview("alert-dialog", code_script | prettyHtml ~ code_html | prettyHtml) }}
 
diff --git a/docs/src/components/chart.njk b/docs/src/components/chart.njk
index 4381b7a..09b9308 100644
--- a/docs/src/components/chart.njk
+++ b/docs/src/components/chart.njk
@@ -7,61 +7,79 @@ toc:
     id: usage
 ---
 <div class="grid gap-6">
-  <div class="card">
-    <header>
-      <h2>Area Chart</h2>
-      <p>Showing total visitors for the last 6 months</p>
-    </header>
-    <section>
-      <canvas id="chart-area-default"></canvas>
-    </section>
-    <footer>
-      <div class="grid gap-2 text-sm">
-        <div class="flex items-center gap-2 leading-none font-medium">
-          Trending up by 5.2% this month
-          {% lucide "trending-up", { "class": "size-4" } %}
+  <div class="grid grid-cols-2 gap-6">
+    <div class="card">
+      <header>
+        <h2>Area Chart</h2>
+        <p>Showing total visitors for the last 6 months</p>
+      </header>
+      <section>
+        <canvas id="chart-area-default"></canvas>
+      </section>
+      <footer>
+        <div class="grid gap-2 text-sm">
+          <div class="flex items-center gap-2 leading-none font-medium">
+            Trending up by 5.2% this month
+            {% lucide "trending-up", { "class": "size-4" } %}
+          </div>
+          <div class="text-muted-foreground flex items-center gap-2 leading-none">January - June 2024</div>
         </div>
-        <div class="text-muted-foreground flex items-center gap-2 leading-none">January - June 2024</div>
-      </div>
-    </footer>
-  </div>
+      </footer>
+    </div>
 
-  <div class="card">
-    <header>
-      <h2>Area Chart - Stacked</h2>
-      <p>Showing total visitors for the last 6 months</p>
-    </header>
-    <section>
-      <canvas id="chart-area-stacked"></canvas>
-    </section>
-    <footer>
-      <div class="grid gap-2 text-sm">
-        <div class="flex items-center gap-2 leading-none font-medium">
-          Trending up by 5.2% this month
-          {% lucide "trending-up", { "class": "size-4" } %}
+    <div class="card">
+      <header>
+        <h2>Area Chart - Stacked</h2>
+        <p>Showing total visitors for the last 6 months</p>
+      </header>
+      <section>
+        <canvas id="chart-area-stacked"></canvas>
+      </section>
+      <footer>
+        <div class="grid gap-2 text-sm">
+          <div class="flex items-center gap-2 leading-none font-medium">
+            Trending up by 5.2% this month
+            {% lucide "trending-up", { "class": "size-4" } %}
+          </div>
+          <div class="text-muted-foreground flex items-center gap-2 leading-none">January - June 2024</div>
         </div>
-        <div class="text-muted-foreground flex items-center gap-2 leading-none">January - June 2024</div>
-      </div>
-    </footer>
-  </div>
+      </footer>
+    </div>
 
-  <div class="card">
-    <header>
-      <h2>Bar Chart - Multiple</h2>
-      <p>Showing total visitors for the last 6 months</p>
-    </header>
-    <section>
-      <canvas id="chart-bar-multiple"></canvas>
-    </section>
-    <footer>
-      <div class="grid gap-2 text-sm">
-        <div class="flex items-center gap-2 leading-none font-medium">
-          Trending up by 5.2% this month
-          {% lucide "trending-up", { "class": "size-4" } %}
+    <div class="card">
+      <header>
+        <h2>Bar Chart - Multiple</h2>
+        <p>Showing total visitors for the last 6 months</p>
+      </header>
+      <section>
+        <canvas id="chart-bar-multiple"></canvas>
+      </section>
+      <footer>
+        <div class="grid gap-2 text-sm">
+          <div class="flex items-center gap-2 leading-none font-medium">
+            Trending up by 5.2% this month
+            {% lucide "trending-up", { "class": "size-4" } %}
+          </div>
+          <div class="text-muted-foreground flex items-center gap-2 leading-none">January - June 2024</div>
         </div>
-        <div class="text-muted-foreground flex items-center gap-2 leading-none">January - June 2024</div>
-      </div>
-    </footer>
+      </footer>
+    </div>
+
+    <div class="card">
+      <header>
+        <h2>Doughnut Chart</h2>
+        <p>Showing total visitors for the last 6 months</p>
+      </header>
+      <section class="relative">
+        <div>
+          <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
+            <div class="text-3xl font-semibold">1,125</div>
+            <div class="text-muted-foreground text-xs">Visitors</div>
+          </div>
+          <canvas id="chart-doughnut" class="max-h-[200px] mx-auto"></canvas>
+        </div>
+      </section>
+    </div>
   </div>
 
   <div class="card">
@@ -79,21 +97,11 @@ toc:
       <h2>Bar Chart - Interactive</h2>
       <p>Showing total visitors for the last 6 months</p>
     </header>
-    <section class="h-[150px]">
+    <section class="max-h-[150px]">
       <canvas id="chart-line-interactive"></canvas>
     </section>
   </div>
 
-  <div class="card">
-    <header>
-      <h2>Doughnut Chart</h2>
-      <p>Showing total visitors for the last 6 months</p>
-    </header>
-    <section>
-      <canvas id="chart-doughnut"></canvas>
-    </section>
-  </div>
-
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
@@ -147,10 +155,10 @@ toc:
       const tooltipHTML = `
         <div
           role="tooltip" 
-          class="border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl opacity-0 absolute pointer-events-none transition-all duration-400"
+          class="border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl opacity-0 absolute pointer-events-none transition-all duration-400 space-y-1"
         >
           <h3 class="font-medium"></h3>
-          <ul class="grid gap-1 mt-1"></ul>
+          <ul class="grid gap-1"></ul>
         </div>`;
       const parser = new DOMParser();
       const doc = parser.parseFromString(tooltipHTML.trim(), 'text/html');
@@ -162,6 +170,7 @@ toc:
 
   const externalTooltipHandler = (context) => {
     const {chart, tooltip} = context;
+    const chartType = chart.config._config.type;
     const tooltipEl = getOrCreateTooltip(chart);
     const titleEl = tooltipEl.querySelector('h3');
     const bodyEl = tooltipEl.querySelector('ul');
@@ -178,20 +187,36 @@ toc:
       const titleLines = tooltip.title || [];
       const bodyLines = tooltip.body.map(b => b.lines);
 
-      if (titleEl) titleEl.textContent = titleLines[0] || '';
-      if (titleEl) titleEl.className = titleLines.length > 0 ? 'font-medium' : '';
+      if (titleEl) {
+        if (chartType === 'doughnut') {
+          titleEl.remove();
+        } else {
+          titleEl.textContent = titleLines[0] || '';
+        }
+      } 
 
       bodyLines.forEach((body, i) => {
         const colors = tooltip.labelColors[i];
         const parts = body[0].split(': ');
-        const label = parts[0] || '';
+        const label = chartType === 'doughnut'
+          ? titleLines[0] || ''
+          : parts[0] || '';
         const value = parts[1] || '';
 
-        console.log(colors)
+        let color;
+        switch (chartType) {
+          case 'doughnut':
+          case 'pie':
+          case 'bar':
+            color = colors.backgroundColor;
+            break;
+          default:
+            color = colors.borderColor;
+        }
 
         bodyHtml += `<li class="flex w-full flex-wrap items-center justify-between leading-none gap-x-2">
           <div class="flex items-center gap-x-1.5">
-            <div class="shrink-0 rounded-[2px] size-2.5 block" style="background:${colors.backgroundColor}"></div>
+            <div class="shrink-0 rounded-[2px] size-2.5 block" style="background:${color}"></div>
             <span class="text-muted-foreground">${label}</span>
           </div>
           <span class="text-foreground font-medium font-mono tabular-nums">${value}</span>
@@ -250,7 +275,7 @@ toc:
 
   let ctx = document.getElementById('chart-area-default');
   let data = {
-    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
+    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
     datasets: [{
       label: 'Desktop',
       data: [186, 305, 237, 73, 209, 214],
@@ -306,7 +331,7 @@ toc:
 
   ctx = document.getElementById('chart-area-stacked');
   data = {
-    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
+    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
     datasets: [{
       label: 'Desktop',
       data: [186, 305, 237, 73, 209, 214],
@@ -373,7 +398,7 @@ toc:
 
   ctx = document.getElementById('chart-bar-multiple');
   data = {
-    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
+    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
     datasets: [{
         label: 'Desktop',
         data: [186, 305, 237, 73, 209, 214],
@@ -749,28 +774,6 @@ const chartDataDoughnut = [
   { browser: "other", visitors: 190, fill: themeColors.chart5 },
 ]
 
-const totalVisitors = chartDataDoughnut.reduce((sum, item) => sum + item.visitors, 0);
-
-// Plugin to draw text in the center
-const centerTextPlugin = {
-  id: 'centerText',
-  afterDraw: (chart) => {
-    const { ctx, chartArea } = chart;
-    if (!chartArea) return;
-
-    const centerX = chartArea.left + (chartArea.right - chartArea.left) / 2;
-    const centerY = chartArea.top + (chartArea.bottom - chartArea.top) / 2;
-
-    ctx.save();
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.font = '1.5rem sans-serif'; // Adjust font size as needed
-    ctx.fillStyle = themeColors.foreground; // Use foreground color
-    ctx.fillText(totalVisitors.toLocaleString(), centerX, centerY); // Format number if desired
-    ctx.restore();
-  }
-};
-
 // Prepare data for the doughnut chart
 const doughnutData = {
   labels: chartDataDoughnut.map(d => d.browser),
@@ -790,7 +793,7 @@ const doughnutConfig = {
   type: 'doughnut',
   data: doughnutData,
   options: {
-    cutout: '80%', // Adjust hole size
+    cutout: '50%', // Adjust hole size
     plugins: {
       legend: {
         display: false, // Hide default legend
@@ -802,8 +805,7 @@ const doughnutConfig = {
       },
       centerText: {} // Keep the custom plugin for center text
     }
-  },
-  plugins: [centerTextPlugin] // Register the plugin
+  }
 };
 
 // Assume you have a canvas with id="chart-doughnut" in your HTML
diff --git a/docs/src/installation.njk b/docs/src/installation.njk
index 10b61c9..f454e61 100644
--- a/docs/src/installation.njk
+++ b/docs/src/installation.njk
@@ -1,13 +1,13 @@
 ---
 layout: layouts/page.njk
 title: Installation
-description: How to install Basecoat in your app.
+description: How to install and use Basecoat in your app.
 toc:
   - label: Installing the CSS
     id: install-css
     children:
       - label: Add Tailwind CSS
-        id: install-css-tailwind
+        id: install-css
       - label: Add Basecoat
         id: install-css-basecoat
       - label: Import basecoat in your CSS
@@ -22,11 +22,16 @@ toc:
 
 {% from "macros/code_block.njk" import code_block %}
 
-<h2 id="install-css">Installing the CSS</h2>
+<h2 id="install-css">Install the CSS</h2>
+
+<div class="alert my-6">
+  {% lucide "circle-alert" %}
+  <h2>If you don't want to use npm, you can follow the <a href="#install-manual" class="underline underline-offset-4">manual installation instructions</a>.</h2>
+</div>
 
 <ol class="[&>h3]:step steps mb-12 md:ml-4 md:border-l md:pl-8">
   <li class="step">
-    <h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-css-tailwind"><a href="#install-css-tailwind">Add Tailwind CSS</a></h3>
+    <h4 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-css-tailwind"><a href="#install-css-tailwind">Add Tailwind CSS</a></h4>
     <div class="prose">
       <p>Basecoat uses Tailwind CSS. You need to install it in your project.</p>
       <p><a href="https://tailwindcss.com/docs/installation" target="_blank">Follow the Tailwind CSS installation instructions to get started.</a></p>
@@ -39,6 +44,9 @@ toc:
     </div>
     {% set code %}npm install hunvreus/basecoat{% endset %}
     {{ code_block(code, "bash") }}
+    <div class="prose">
+      <p>Alternatively, you can directly <a href="https://github.com/hunvreus/basecoat/blob/main/src/css/basecoat.css" target="_blank">copy the <code>basecoat.css</code> file</a> into your project.</p>
+    </div>
   </li>
   <li class="step mt-8">
     <h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-css-import"><a href="#install-css-import">Import basecoat in your CSS</a></h3>
@@ -50,6 +58,7 @@ toc:
     <h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-css-done"><a href="#install-css-done">That's it</a></h3>
     <div class="prose">
       <p>You can now use any of the Basecoat classes in your project (e.g. <code>btn</code>, <code>card</code>, <code>input</code>, etc). Read the documentation about each component to get started (e.g. <a href="/components/button">button</a>, <a href="/components/card">card</a>, <a href="/components/input">input</a>, etc).</p>
+      <p>Some components (e.g. <a href="/components/select">Select</a>) require <a href="#install-js">Javascript code to work</a>.</p>
     </div>
   </li>
 </ol>
@@ -60,15 +69,40 @@ toc:
   <p><b>Some components require Javascript code to work.</b></p>
   <p>The documentation provides Alpine.js code snippets to cover that. <a href="https://alpinejs.dev/docs/installation" target="_blank">Make sure to install Alpine.js if you decide to use them.</a></p>
   <p>For simple components like <a href="/components/accordion">Accordion</a> or <a href="/components/slider">Slider</a>, you will notice some inline Alpine.js code that you can just copy along with the rest of the HTML.</p>
-  <p>For more complex components (<a href="/components/dialog">Dialog</a>, <a href="/components/dropdown-menu">Dropdown Menu</a>, <a href="/components/popover">Popover</a>, <a href="/components/select">Select</a>, <a href="/components/tabs">Tabs</a> and <a href="/components/tooltip">Toast</a>), we provide a separate <code>&lt;script&gt;</code> code snippet that must be included anywhere <b>before</b> the HTML for the component.</p>
+  <p>For more complex components (<a href="/components/dialog">Dialog</a>, <a href="/components/dropdown-menu">Dropdown Menu</a>, <a href="/components/popover">Popover</a>, <a href="/components/select">Select</a>, <a href="/components/tabs">Tabs</a> and <a href="/components/tooltip">Toast</a>), you have one of 2 options:
+  <ul>
+    <li>Copy the Javascript snippet provided in the documentation page into your project.</li>
+    <li>
+      <p><a href="https://github.com/hunvreus/basecoat/tree/main/src/js" target="_blank">Download the script as a separate file</a> and include it in your project (<a href="#install-cli">or let the CLI do it for you</a>). <b>If you use this approach, make sure to load the file before the Alpine.js core JS file and register the component on the <code>alpine:init</code> event.</b> For example:</p>
+      {% set code %}<script src="/assets/js/dialog.js" defer></script>
+<script>
+  document.addEventListener('alpine:init', () => {
+    window.basecoat.registerDialog(Alpine);
+  });
+</script>
+<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>{% endset %}
+      {{ code_block(code, "html") }}
+    </li>
+  </ul>
   <p>You are also welcome to write your own Javascript.</p>
   <p>All of the components try and implement WAI-ARIA standards to make them accessible.</p>
 </div>
 
+<h2 id="install-cli">Use the CLI</h2>
+
+<div class="prose">
+  <p>If you're using Nunjucks or Jinja, you can use the CLI to install the CSS and macros for any of the complex components(e.g. <a href="/components/dialog">Dialog</a>). It will copy the JS and `<code>.html.jinja</code> or <code>.njk</code> macros into your code.</p>
+  <p>For example, to add the Dialog component, run:</p>
+  {% set code %}npx basecoatui add dialog{% endset %}
+  {{ code_block(code, "bash") }}
+  <p>You will be asked to confirm the template engine and destination directory for the Javascript and macros.</p>
+</div>
+
 <h2 id="install-macros"><a href="#install-macros">Use Nunjucks or Jinja macros</a></h2>
 
 <div class="prose">
   <p>For more complex components, you can use <a href="https://mozilla.github.io/nunjucks/" target="_blank">Nunjucks</a> or <a href="https://jinja.palletsprojects.com" target="_blank">Jinja</a> macros to help you generate the HTML and Javascript code.</p>
+  <p>To install them, either <a href="https://github.com/hunvreus/basecoat/tree/main/src" target="_blank">copy them directly from the GitHub repository</a> or use <a href="#install-cli">the CLI</a> to do the work for you.</p>
   <p>For example, here's how you could use the <code>select()</code> macro to generate the HTML and Javascript code for a <a href="/components/select">Select</a> component:</p>
   {% set code %}{% raw %}{% call select() %}
 <div role="group" aria-labelledby="fruit-options-label">
@@ -95,7 +129,7 @@ toc:
 <h2 id="install-theming"><a href="#install-theming">Theming</a></h2>
 
 <div class="prose">
-  <p>You can import any <a href="https://shadcn-ui.com" target="_blank">shadcn/ui</a> compatible theme. For example:</p>
+  <p>You can import any <a href="https://shadcn-ui.com" target="_blank">shadcn/ui</a> compatible theme (e.g. <a href="https://tweakcn.com" target="_blank">tweakcn</a>). For example:</p>
   <ul>
     <li>Go to <a href="https://ui.shadcn.com/themes" target="_blank">ui.shadcn.com/themes</a> and select a theme.</li>
     <li>Click "Copy code" and save the theme variables in a file (e.g. <code>theme.css</code>).</li>
diff --git a/docs/src/introduction.njk b/docs/src/introduction.njk
new file mode 100644
index 0000000..f32c90f
--- /dev/null
+++ b/docs/src/introduction.njk
@@ -0,0 +1,6 @@
+---
+layout: layouts/page.njk
+title: Introduction
+description: Basecoat is a set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks and AI models. Open Source. Open Code.
+---
+
diff --git a/docs/src/kitchen-sink.njk b/docs/src/kitchen-sink.njk
index 7e29069..00f3ea5 100644
--- a/docs/src/kitchen-sink.njk
+++ b/docs/src/kitchen-sink.njk
@@ -1,30 +1,44 @@
 ---
 layout: layouts/base.njk
 ---
-{% include "partials/kitchen-sink/accordion.njk" %}
-{% include "partials/kitchen-sink/alert.njk" %}
-{% include "partials/kitchen-sink/alert-dialog.njk" %}
-{% include "partials/kitchen-sink/avatar.njk" %}
-{% include "partials/kitchen-sink/badge.njk" %}
-{% include "partials/kitchen-sink/breadcrumb.njk" %}
-{% include "partials/kitchen-sink/button.njk" %}
-{% include "partials/kitchen-sink/card.njk" %}
-{% include "partials/kitchen-sink/checkbox.njk" %}
-{% include "partials/kitchen-sink/combobox.njk" %}
-{% include "partials/kitchen-sink/dialog.njk" %}
-{% include "partials/kitchen-sink/dropdown-menu.njk" %}
-{% include "partials/kitchen-sink/form.njk" %}
-{% include "partials/kitchen-sink/input.njk" %}
-{% include "partials/kitchen-sink/label.njk" %}
-{% include "partials/kitchen-sink/pagination.njk" %}
-{% include "partials/kitchen-sink/popover.njk" %}
-{% include "partials/kitchen-sink/radio-group.njk" %}
-{% include "partials/kitchen-sink/select.njk" %}
-{% include "partials/kitchen-sink/skeleton.njk" %}
-{% include "partials/kitchen-sink/slider.njk" %}
-{% include "partials/kitchen-sink/switch.njk" %}
-{% include "partials/kitchen-sink/table.njk" %}
-{% include "partials/kitchen-sink/tabs.njk" %}
-{% include "partials/kitchen-sink/textarea.njk" %}
-{% include "partials/kitchen-sink/toast.njk" %}
-{% include "partials/kitchen-sink/tooltip.njk" %}
\ No newline at end of file
+{% set components = [
+  { label: "Accordion", id: "accordion" },
+  { label: "Alert", id: "alert" },
+  { label: "Alert Dialog", id: "alert-dialog" },
+  { label: "Avatar", id: "avatar" },
+  { label: "Badge", id: "badge" },
+  { label: "Breadcrumb", id: "breadcrumb" },
+  { label: "Button", id: "button" },
+  { label: "Card", id: "card" },
+  { label: "Checkbox", id: "checkbox" },
+  { label: "Combobox", id: "combobox" },
+  { label: "Dialog", id: "dialog" },
+  { label: "Dropdown Menu", id: "dropdown-menu" },
+  { label: "Form", id: "form" },
+  { label: "Input", id: "input" },
+  { label: "Label", id: "label" },
+  { label: "Pagination", id: "pagination" },
+  { label: "Popover", id: "popover" },
+  { label: "Radio Group", id: "radio-group" },
+  { label: "Select", id: "select" },
+  { label: "Skeleton", id: "skeleton" },
+  { label: "Slider", id: "slider" },
+  { label: "Switch", id: "switch" },
+  { label: "Table", id: "table" },
+  { label: "Tabs", id: "tabs" },
+  { label: "Textarea", id: "textarea" },
+  { label: "Toast", id: "toast" },
+  { label: "Tooltip", id: "tooltip" }
+] %}
+
+<div class="flex gap-x-10">
+  <div class="grid gap-4 flex-1">
+    {% for component in components %}
+      {% include "partials/kitchen-sink/" ~ component.id ~ ".njk" %}
+    {% endfor %}
+  </div>
+  <div class="hidden text-sm xl:block w-full max-w-[200px]">
+    {% from "macros/toc.njk" import toc_nav %}
+    {{ toc_nav(components) }}
+  </div>
+</div>
diff --git a/src/css/basecoat.css b/src/css/basecoat.css
index ec63d35..64f355e 100644
--- a/src/css/basecoat.css
+++ b/src/css/basecoat.css
@@ -526,18 +526,6 @@
     @apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];
     @apply aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive;
   }
-  .form input[type='date'],
-  .form input[type='datetime-local'],
-  .form input[type='month'],
-  .form input[type='week'],
-  .form input[type='time'],
-  .input[type='date'],
-  .input[type='datetime-local'],
-  .input[type='month'],
-  .input[type='week'],
-  .input[type='time'] {
-    
-  }
 }
 
 /* Label */
diff --git a/src/js/dropdown-menu.js b/src/js/dropdown-menu.js
index 68e7cd8..449a107 100644
--- a/src/js/dropdown-menu.js
+++ b/src/js/dropdown-menu.js
@@ -83,7 +83,7 @@ window.basecoat.registerDropdownMenu = function(Alpine) {
       '@keydown.up.prevent'() { this.moveMenuitemFocus(-1); },
       '@keydown.home.prevent'() { this.focusMenuitem(0) },
       '@keydown.end.prevent'() { this.focusMenuitem(this.menuItems.length - 1) },
-      '@mousemove'(e) { this.handleMenuitemMousemove(e) },
+      '@mouseover'(e) { this.handleMenuitemMousemove(e) },
       ':aria-hidden'() { return !this.open },
       'x-cloak': ''
     },
diff --git a/src/js/select.js b/src/js/select.js
index c7b5c7b..dacb8a1 100644
--- a/src/js/select.js
+++ b/src/js/select.js
@@ -130,7 +130,7 @@ window.basecoat.registerSelect = function(Alpine) {
     },
     $content: {
       '@click'(e) { this.handleOptionClick(e) },
-      '@mousemove'(e) { this.handleOptionMousemove(e) },
+      '@mouseover'(e) { this.handleOptionMousemove(e) },
       ':aria-hidden'() { return !this.open },
       'x-cloak': ''
     },