@lindle/linoardo 1.0.47 → 1.0.48

package/dist/index.cjs

@@ -41,79 +41,79 @@ var iconBaseClasses = {
 };
 
 // src/Containment/Button/states.button.ts
-var base = "btn-base focus-visible:outline-none focus-visible:ring-2 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed";
+var base = "btn-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed";
 var blackAndWhitePaletteClasses = {
-  solid: "bg-black text-white hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white",
-  outline: "border-2 border-black text-black bg-white hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
-  ghost: "text-black bg-neutral-200 hover:bg-neutral-300 focus-visible:ring-black/20 border border-transparent",
-  text: "bg-transparent text-black hover:bg-neutral-200 focus-visible:ring-black/20 underline-offset-2 border border-transparent",
-  filled: "bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20",
-  underlined: "bg-transparent text-black border border-transparent underline decoration-2 underline-offset-4 hover:bg-neutral-200 focus-visible:ring-black/20",
-  sharp: "bg-black text-white rounded-none hover:bg-black/90 focus-visible:ring-black/40"
+  solid: "bg-black text-white hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white dark:bg-white dark:text-black dark:hover:bg-white/90 dark:focus-visible:ring-white/40 dark:focus-visible:ring-offset-gray-900",
+  outline: "border-2 border-black text-black bg-white hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white dark:border-white dark:text-white dark:bg-transparent dark:hover:bg-white dark:hover:text-black dark:focus-visible:ring-white/40 dark:focus-visible:ring-offset-gray-900",
+  ghost: "text-black bg-neutral-200 hover:bg-neutral-300 focus-visible:ring-black/20 border border-transparent dark:text-white dark:bg-neutral-800 dark:hover:bg-neutral-700",
+  text: "bg-transparent text-black hover:bg-neutral-200 focus-visible:ring-black/20 underline-offset-2 border border-transparent dark:text-white dark:hover:bg-neutral-800",
+  filled: "bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20 dark:bg-white/10 dark:text-white dark:border-white/30 dark:hover:bg-white/20",
+  underlined: "bg-transparent text-black border border-transparent underline decoration-2 underline-offset-4 hover:bg-neutral-200 focus-visible:ring-black/20 dark:text-white dark:hover:bg-neutral-800",
+  sharp: "bg-black text-white rounded-none hover:bg-black/90 focus-visible:ring-black/40 dark:bg-white dark:text-black dark:hover:bg-white/90 dark:focus-visible:ring-white/40"
 };
 var paletteVariantClasses = {
   primary: {
     solid: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary",
     sharp: "rounded-none bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary",
-    outline: "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary",
-    ghost: "text-primary bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40 border border-transparent",
-    text: "bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2 border border-transparent",
-    filled: "bg-primary/15 text-primary border border-primary/30 hover:bg-primary/25 focus-visible:ring-primary/25",
-    underlined: "bg-transparent text-primary border border-transparent underline decoration-2 underline-offset-4 hover:bg-primary/5 focus-visible:ring-primary/25"
+    outline: "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary dark:bg-gray-900 dark:text-primary dark:border-primary/60 dark:hover:bg-primary dark:hover:text-white",
+    ghost: "text-primary bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40 border border-transparent dark:bg-primary/20 dark:hover:bg-primary/30",
+    text: "bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2 border border-transparent dark:hover:bg-primary/20",
+    filled: "bg-primary/15 text-primary border border-primary/30 hover:bg-primary/25 focus-visible:ring-primary/25 dark:bg-primary/20 dark:border-primary/40 dark:hover:bg-primary/30",
+    underlined: "bg-transparent text-primary border border-transparent underline decoration-2 underline-offset-4 hover:bg-primary/5 focus-visible:ring-primary/25 dark:hover:bg-primary/15"
   },
   neutral: {
     solid: "bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500",
     sharp: "rounded-none bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500",
-    outline: "border border-gray-400 text-gray-700 bg-white hover:bg-gray-700 hover:text-white focus-visible:ring-gray-400",
-    ghost: "text-gray-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-300 border border-transparent",
-    text: "bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent",
-    filled: "bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300 focus-visible:ring-gray-300",
-    underlined: "bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-300"
+    outline: "border border-gray-400 text-gray-700 bg-white hover:bg-gray-700 hover:text-white focus-visible:ring-gray-400 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-900 dark:hover:bg-gray-200 dark:hover:text-gray-900",
+    ghost: "text-gray-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-300 border border-transparent dark:text-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700",
+    text: "bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent dark:text-gray-200 dark:hover:bg-gray-800",
+    filled: "bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300 focus-visible:ring-gray-300 dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-700",
+    underlined: "bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-300 dark:text-gray-100 dark:hover:bg-gray-800"
   },
   info: {
     solid: "bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400",
     sharp: "rounded-none bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400",
-    outline: "border border-sky-500 text-sky-600 bg-white hover:bg-sky-500 hover:text-white focus-visible:ring-sky-400",
-    ghost: "text-sky-600 bg-sky-100 hover:bg-sky-200 focus-visible:ring-sky-300 border border-transparent",
-    text: "bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2 border border-transparent",
-    filled: "bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200 focus-visible:ring-sky-200",
-    underlined: "bg-transparent text-sky-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-sky-50 focus-visible:ring-sky-200"
+    outline: "border border-sky-500 text-sky-600 bg-white hover:bg-sky-500 hover:text-white focus-visible:ring-sky-400 dark:bg-gray-900 dark:text-sky-400 dark:border-sky-500/70 dark:hover:bg-sky-500 dark:hover:text-white",
+    ghost: "text-sky-600 bg-sky-100 hover:bg-sky-200 focus-visible:ring-sky-300 border border-transparent dark:text-sky-300 dark:bg-sky-900/40 dark:hover:bg-sky-900/55",
+    text: "bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2 border border-transparent dark:text-sky-300 dark:hover:bg-sky-900/35",
+    filled: "bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200 focus-visible:ring-sky-200 dark:bg-sky-900/35 dark:text-sky-200 dark:border-sky-700/60 dark:hover:bg-sky-900/50",
+    underlined: "bg-transparent text-sky-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-sky-50 focus-visible:ring-sky-200 dark:text-sky-300 dark:hover:bg-sky-900/30"
   },
   success: {
     solid: "bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400",
     sharp: "rounded-none bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400",
-    outline: "border border-emerald-500 text-emerald-600 bg-white hover:bg-emerald-500 hover:text-white focus-visible:ring-emerald-400",
-    ghost: "text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300 border border-transparent",
-    text: "bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2 border border-transparent",
-    filled: "bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 focus-visible:ring-emerald-200",
-    underlined: "bg-transparent text-emerald-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-emerald-50 focus-visible:ring-emerald-200"
+    outline: "border border-emerald-500 text-emerald-600 bg-white hover:bg-emerald-500 hover:text-white focus-visible:ring-emerald-400 dark:bg-gray-900 dark:text-emerald-400 dark:border-emerald-500/70 dark:hover:bg-emerald-500 dark:hover:text-white",
+    ghost: "text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300 border border-transparent dark:text-emerald-300 dark:bg-emerald-900/35 dark:hover:bg-emerald-900/50",
+    text: "bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2 border border-transparent dark:text-emerald-300 dark:hover:bg-emerald-900/30",
+    filled: "bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 focus-visible:ring-emerald-200 dark:bg-emerald-900/35 dark:text-emerald-200 dark:border-emerald-700/60 dark:hover:bg-emerald-900/50",
+    underlined: "bg-transparent text-emerald-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-emerald-50 focus-visible:ring-emerald-200 dark:text-emerald-300 dark:hover:bg-emerald-900/30"
   },
   warning: {
     solid: "bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400",
     sharp: "rounded-none bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400",
-    outline: "border border-amber-500 text-amber-600 bg-white hover:bg-amber-500 hover:text-white focus-visible:ring-amber-400",
-    ghost: "text-amber-600 bg-amber-100 hover:bg-amber-200 focus-visible:ring-amber-300 border border-transparent",
-    text: "bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2 border border-transparent",
-    filled: "bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 focus-visible:ring-amber-200",
-    underlined: "bg-transparent text-amber-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-amber-50 focus-visible:ring-amber-200"
+    outline: "border border-amber-500 text-amber-600 bg-white hover:bg-amber-500 hover:text-white focus-visible:ring-amber-400 dark:bg-gray-900 dark:text-amber-300 dark:border-amber-500/70 dark:hover:bg-amber-500 dark:hover:text-white",
+    ghost: "text-amber-600 bg-amber-100 hover:bg-amber-200 focus-visible:ring-amber-300 border border-transparent dark:text-amber-300 dark:bg-amber-900/35 dark:hover:bg-amber-900/50",
+    text: "bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2 border border-transparent dark:text-amber-300 dark:hover:bg-amber-900/30",
+    filled: "bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 focus-visible:ring-amber-200 dark:bg-amber-900/35 dark:text-amber-200 dark:border-amber-700/60 dark:hover:bg-amber-900/50",
+    underlined: "bg-transparent text-amber-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-amber-50 focus-visible:ring-amber-200 dark:text-amber-300 dark:hover:bg-amber-900/30"
   },
   danger: {
     solid: "bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400",
     sharp: "rounded-none bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400",
-    outline: "border border-red-500 text-red-600 bg-white hover:bg-red-500 hover:text-white focus-visible:ring-red-400",
-    ghost: "text-red-600 bg-red-100 hover:bg-red-200 focus-visible:ring-red-300 border border-transparent",
-    text: "bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2 border border-transparent",
-    filled: "bg-red-100 text-red-700 border border-red-200 hover:bg-red-200 focus-visible:ring-red-200",
-    underlined: "bg-transparent text-red-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-red-50 focus-visible:ring-red-200"
+    outline: "border border-red-500 text-red-600 bg-white hover:bg-red-500 hover:text-white focus-visible:ring-red-400 dark:bg-gray-900 dark:text-red-400 dark:border-red-500/70 dark:hover:bg-red-500 dark:hover:text-white",
+    ghost: "text-red-600 bg-red-100 hover:bg-red-200 focus-visible:ring-red-300 border border-transparent dark:text-red-300 dark:bg-red-900/35 dark:hover:bg-red-900/50",
+    text: "bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2 border border-transparent dark:text-red-300 dark:hover:bg-red-900/30",
+    filled: "bg-red-100 text-red-700 border border-red-200 hover:bg-red-200 focus-visible:ring-red-200 dark:bg-red-900/35 dark:text-red-200 dark:border-red-700/60 dark:hover:bg-red-900/50",
+    underlined: "bg-transparent text-red-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-red-50 focus-visible:ring-red-200 dark:text-red-300 dark:hover:bg-red-900/30"
   },
   surface: {
-    solid: "bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200",
-    sharp: "rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200",
-    outline: "border border-gray-300 text-gray-900 bg-white hover:bg-gray-100 focus-visible:ring-gray-200",
-    ghost: "text-gray-900 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-200 border border-transparent",
-    text: "bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent",
-    filled: "bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white focus-visible:ring-gray-200",
-    underlined: "bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-200"
+    solid: "bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-800",
+    sharp: "rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-800",
+    outline: "border border-gray-300 text-gray-900 bg-white hover:bg-gray-100 focus-visible:ring-gray-200 dark:border-gray-600 dark:text-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800",
+    ghost: "text-gray-900 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-200 border border-transparent dark:text-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700",
+    text: "bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent dark:text-gray-100 dark:hover:bg-gray-800",
+    filled: "bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white focus-visible:ring-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-700",
+    underlined: "bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-200 dark:text-gray-100 dark:hover:bg-gray-800"
   },
   bw: blackAndWhitePaletteClasses
 };
@@ -292,80 +292,80 @@ Button.Group = ButtonGroup;
 var Button_default = Button;
 
 // src/Containment/Chip/states.chip.ts
-var chipBaseClasses = "inline-flex items-center gap-1.5 border font-medium leading-tight transition-all duration-200 select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2";
-var closeButtonClasses = "ml-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-transparent text-current/70 transition-colors duration-200 hover:bg-current/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/30 focus-visible:ring-offset-2";
+var chipBaseClasses = "inline-flex items-center gap-1.5 border font-medium leading-tight transition-all duration-200 select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900";
+var closeButtonClasses = "ml-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-transparent text-current/70 transition-colors duration-200 hover:bg-current/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/30 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900";
 var blackAndWhitePaletteClasses2 = {
-  solid: "bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white",
-  outline: "bg-white text-black border-2 border-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
-  ghost: "bg-neutral-200 text-black border border-transparent hover:bg-neutral-300 focus-visible:ring-black/20",
-  text: "bg-transparent text-black border border-transparent hover:bg-neutral-200 focus-visible:ring-black/20",
-  filled: "bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20",
-  underlined: "bg-transparent text-black border-0 border-b-2 border-black px-0 rounded-none hover:text-black/80 focus-visible:ring-black/20",
-  sharp: "rounded-none bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white"
+  solid: "bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white dark:bg-white dark:text-black dark:border-white dark:hover:bg-white/90 dark:focus-visible:ring-white/40 dark:focus-visible:ring-offset-gray-900",
+  outline: "bg-white text-black border-2 border-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white dark:bg-transparent dark:text-white dark:border-white dark:hover:bg-white dark:hover:text-black dark:focus-visible:ring-white/40 dark:focus-visible:ring-offset-gray-900",
+  ghost: "bg-neutral-200 text-black border border-transparent hover:bg-neutral-300 focus-visible:ring-black/20 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700",
+  text: "bg-transparent text-black border border-transparent hover:bg-neutral-200 focus-visible:ring-black/20 dark:text-white dark:hover:bg-neutral-800",
+  filled: "bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20 dark:bg-white/10 dark:text-white dark:border-white/30 dark:hover:bg-white/20",
+  underlined: "bg-transparent text-black border-0 border-b-2 border-black px-0 rounded-none hover:text-black/80 focus-visible:ring-black/20 dark:text-white dark:border-white dark:hover:text-white/80",
+  sharp: "rounded-none bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white dark:bg-white dark:text-black dark:border-white dark:hover:bg-white/90 dark:focus-visible:ring-white/40 dark:focus-visible:ring-offset-gray-900"
 };
 var paletteVariantClasses2 = {
   primary: {
     solid: "bg-primary text-white border border-primary hover:bg-primary/90",
     sharp: "rounded-none bg-primary text-white border border-primary hover:bg-primary/90",
-    outline: "bg-transparent text-primary border border-primary hover:bg-primary/10",
-    ghost: "bg-primary/15 text-primary border border-transparent hover:bg-primary/25",
-    text: "bg-transparent text-primary border border-transparent hover:text-primary/80",
-    filled: "bg-primary/10 text-primary border border-primary/30 hover:bg-primary/20",
-    underlined: "bg-transparent text-primary border-0 border-b-2 border-primary px-0 rounded-none hover:text-primary/80"
+    outline: "bg-transparent text-primary border border-primary hover:bg-primary/10 dark:border-primary/60 dark:hover:bg-primary/20",
+    ghost: "bg-primary/15 text-primary border border-transparent hover:bg-primary/25 dark:bg-primary/25 dark:hover:bg-primary/35",
+    text: "bg-transparent text-primary border border-transparent hover:text-primary/80 dark:hover:bg-primary/15",
+    filled: "bg-primary/10 text-primary border border-primary/30 hover:bg-primary/20 dark:bg-primary/20 dark:border-primary/40 dark:hover:bg-primary/30",
+    underlined: "bg-transparent text-primary border-0 border-b-2 border-primary px-0 rounded-none hover:text-primary/80 dark:hover:bg-primary/15"
   },
   neutral: {
     solid: "bg-gray-900 text-white border border-gray-900 hover:bg-gray-800",
     sharp: "rounded-none bg-gray-900 text-white border border-gray-900 hover:bg-gray-800",
-    outline: "bg-transparent text-gray-900 border border-gray-500 hover:bg-gray-100",
-    ghost: "bg-gray-100 text-gray-900 border border-transparent hover:bg-gray-200",
-    text: "bg-transparent text-gray-900 border border-transparent hover:text-gray-700",
-    filled: "bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300",
-    underlined: "bg-transparent text-gray-900 border-0 border-b-2 border-gray-500 px-0 rounded-none hover:text-gray-700"
+    outline: "bg-transparent text-gray-900 border border-gray-500 hover:bg-gray-100 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-800",
+    ghost: "bg-gray-100 text-gray-900 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700",
+    text: "bg-transparent text-gray-900 border border-transparent hover:text-gray-700 dark:text-gray-100 dark:hover:bg-gray-800",
+    filled: "bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-700",
+    underlined: "bg-transparent text-gray-900 border-0 border-b-2 border-gray-500 px-0 rounded-none hover:text-gray-700 dark:text-gray-100 dark:border-gray-600 dark:hover:bg-gray-800"
   },
   info: {
     solid: "bg-sky-500 text-white border border-sky-500 hover:bg-sky-600",
     sharp: "rounded-none bg-sky-500 text-white border border-sky-500 hover:bg-sky-600",
-    outline: "bg-transparent text-sky-600 border border-sky-500 hover:bg-sky-50",
-    ghost: "bg-sky-100 text-sky-700 border border-transparent hover:bg-sky-200",
-    text: "bg-transparent text-sky-600 border border-transparent hover:text-sky-700",
-    filled: "bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200",
-    underlined: "bg-transparent text-sky-600 border-0 border-b-2 border-sky-500 px-0 rounded-none hover:text-sky-700"
+    outline: "bg-transparent text-sky-600 border border-sky-500 hover:bg-sky-50 dark:text-sky-300 dark:border-sky-500/70 dark:hover:bg-sky-900/30",
+    ghost: "bg-sky-100 text-sky-700 border border-transparent hover:bg-sky-200 dark:bg-sky-900/35 dark:text-sky-200 dark:hover:bg-sky-900/50",
+    text: "bg-transparent text-sky-600 border border-transparent hover:text-sky-700 dark:text-sky-300 dark:hover:bg-sky-900/30",
+    filled: "bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200 dark:bg-sky-900/35 dark:text-sky-200 dark:border-sky-700/60 dark:hover:bg-sky-900/50",
+    underlined: "bg-transparent text-sky-600 border-0 border-b-2 border-sky-500 px-0 rounded-none hover:text-sky-700 dark:text-sky-300 dark:border-sky-500/70 dark:hover:bg-sky-900/30"
   },
   success: {
     solid: "bg-emerald-500 text-white border border-emerald-500 hover:bg-emerald-600",
     sharp: "rounded-none bg-emerald-500 text-white border border-emerald-500 hover:bg-emerald-600",
-    outline: "bg-transparent text-emerald-600 border border-emerald-500 hover:bg-emerald-50",
-    ghost: "bg-emerald-100 text-emerald-700 border border-transparent hover:bg-emerald-200",
-    text: "bg-transparent text-emerald-600 border border-transparent hover:text-emerald-700",
-    filled: "bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200",
-    underlined: "bg-transparent text-emerald-600 border-0 border-b-2 border-emerald-500 px-0 rounded-none hover:text-emerald-700"
+    outline: "bg-transparent text-emerald-600 border border-emerald-500 hover:bg-emerald-50 dark:text-emerald-300 dark:border-emerald-500/70 dark:hover:bg-emerald-900/30",
+    ghost: "bg-emerald-100 text-emerald-700 border border-transparent hover:bg-emerald-200 dark:bg-emerald-900/35 dark:text-emerald-200 dark:hover:bg-emerald-900/50",
+    text: "bg-transparent text-emerald-600 border border-transparent hover:text-emerald-700 dark:text-emerald-300 dark:hover:bg-emerald-900/30",
+    filled: "bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 dark:bg-emerald-900/35 dark:text-emerald-200 dark:border-emerald-700/60 dark:hover:bg-emerald-900/50",
+    underlined: "bg-transparent text-emerald-600 border-0 border-b-2 border-emerald-500 px-0 rounded-none hover:text-emerald-700 dark:text-emerald-300 dark:border-emerald-500/70 dark:hover:bg-emerald-900/30"
   },
   warning: {
     solid: "bg-amber-500 text-white border border-amber-500 hover:bg-amber-600",
     sharp: "rounded-none bg-amber-500 text-white border border-amber-500 hover:bg-amber-600",
-    outline: "bg-transparent text-amber-700 border border-amber-500 hover:bg-amber-50",
-    ghost: "bg-amber-100 text-amber-800 border border-transparent hover:bg-amber-200",
-    text: "bg-transparent text-amber-700 border border-transparent hover:text-amber-800",
-    filled: "bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200",
-    underlined: "bg-transparent text-amber-700 border-0 border-b-2 border-amber-500 px-0 rounded-none hover:text-amber-800"
+    outline: "bg-transparent text-amber-700 border border-amber-500 hover:bg-amber-50 dark:text-amber-300 dark:border-amber-500/70 dark:hover:bg-amber-900/30",
+    ghost: "bg-amber-100 text-amber-800 border border-transparent hover:bg-amber-200 dark:bg-amber-900/35 dark:text-amber-200 dark:hover:bg-amber-900/50",
+    text: "bg-transparent text-amber-700 border border-transparent hover:text-amber-800 dark:text-amber-300 dark:hover:bg-amber-900/30",
+    filled: "bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 dark:bg-amber-900/35 dark:text-amber-200 dark:border-amber-700/60 dark:hover:bg-amber-900/50",
+    underlined: "bg-transparent text-amber-700 border-0 border-b-2 border-amber-500 px-0 rounded-none hover:text-amber-800 dark:text-amber-300 dark:border-amber-500/70 dark:hover:bg-amber-900/30"
   },
   danger: {
     solid: "bg-red-500 text-white border border-red-500 hover:bg-red-600",
     sharp: "rounded-none bg-red-500 text-white border border-red-500 hover:bg-red-600",
-    outline: "bg-transparent text-red-600 border border-red-500 hover:bg-red-50",
-    ghost: "bg-red-100 text-red-700 border border-transparent hover:bg-red-200",
-    text: "bg-transparent text-red-600 border border-transparent hover:text-red-700",
-    filled: "bg-red-100 text-red-700 border border-red-200 hover:bg-red-200",
-    underlined: "bg-transparent text-red-600 border-0 border-b-2 border-red-500 px-0 rounded-none hover:text-red-700"
+    outline: "bg-transparent text-red-600 border border-red-500 hover:bg-red-50 dark:text-red-300 dark:border-red-500/70 dark:hover:bg-red-900/30",
+    ghost: "bg-red-100 text-red-700 border border-transparent hover:bg-red-200 dark:bg-red-900/35 dark:text-red-200 dark:hover:bg-red-900/50",
+    text: "bg-transparent text-red-600 border border-transparent hover:text-red-700 dark:text-red-300 dark:hover:bg-red-900/30",
+    filled: "bg-red-100 text-red-700 border border-red-200 hover:bg-red-200 dark:bg-red-900/35 dark:text-red-200 dark:border-red-700/60 dark:hover:bg-red-900/50",
+    underlined: "bg-transparent text-red-600 border-0 border-b-2 border-red-500 px-0 rounded-none hover:text-red-700 dark:text-red-300 dark:border-red-500/70 dark:hover:bg-red-900/30"
   },
   surface: {
-    solid: "bg-white text-gray-900 border border-gray-200 hover:bg-gray-50",
-    sharp: "rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50",
-    outline: "bg-transparent text-gray-900 border border-gray-300 hover:bg-gray-50",
-    ghost: "bg-gray-100 text-gray-900 border border-transparent hover:bg-gray-200",
-    text: "bg-transparent text-gray-900 border border-transparent hover:text-gray-600",
-    filled: "bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white",
-    underlined: "bg-transparent text-gray-900 border-0 border-b-2 border-gray-400 px-0 rounded-none hover:text-gray-600"
+    solid: "bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-800",
+    sharp: "rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-800",
+    outline: "bg-transparent text-gray-900 border border-gray-300 hover:bg-gray-50 dark:text-gray-100 dark:border-gray-600 dark:hover:bg-gray-800",
+    ghost: "bg-gray-100 text-gray-900 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700",
+    text: "bg-transparent text-gray-900 border border-transparent hover:text-gray-600 dark:text-gray-100 dark:hover:bg-gray-800",
+    filled: "bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700 dark:hover:bg-gray-700",
+    underlined: "bg-transparent text-gray-900 border-0 border-b-2 border-gray-400 px-0 rounded-none hover:text-gray-600 dark:text-gray-100 dark:border-gray-600 dark:hover:bg-gray-800"
   },
   bw: blackAndWhitePaletteClasses2
 };
@@ -431,7 +431,7 @@ var Chip = React.forwardRef(
     const sizeClass = chipSizeClasses[size] ?? chipSizeClasses.medium;
     const pillClass = pill ? "rounded-full" : "rounded-lg";
     const cursorClass = disabled ? "pointer-events-none opacity-50" : isInteractive ? "cursor-pointer" : "cursor-default";
-    const selectedClass = selected ? "ring-2 ring-current/50 ring-offset-2 ring-offset-white" : void 0;
+    const selectedClass = selected ? "ring-2 ring-current/50 ring-offset-2 ring-offset-white dark:ring-offset-gray-900" : void 0;
     const resolvedRole = disabled ? role : role ?? (isInteractive ? "button" : void 0);
     const resolvedTabIndex = disabled ? -1 : tabIndex ?? (isInteractive ? 0 : void 0);
     const prependIconClassName = resolveIconClassName2(prependIcon);
@@ -533,14 +533,14 @@ var placementGeometries = {
   }
 };
 var badgePaletteClasses = {
-  primary: "bg-primary text-white",
-  neutral: "bg-gray-500 text-white",
-  info: "bg-sky-500 text-white",
-  success: "bg-emerald-500 text-white",
-  warning: "bg-amber-500 text-white",
-  danger: "bg-red-500 text-white",
-  surface: "bg-white text-gray-900 border border-gray-200",
-  bw: "bg-white text-black border border-black"
+  primary: "bg-primary text-white dark:bg-primary dark:text-white",
+  neutral: "bg-gray-500 text-white dark:bg-gray-600 dark:text-white",
+  info: "bg-sky-500 text-white dark:bg-sky-500 dark:text-white",
+  success: "bg-emerald-500 text-white dark:bg-emerald-500 dark:text-white",
+  warning: "bg-amber-500 text-white dark:bg-amber-500 dark:text-white",
+  danger: "bg-red-500 text-white dark:bg-red-500 dark:text-white",
+  surface: "bg-white text-gray-900 border border-gray-200 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700",
+  bw: "bg-white text-black border border-black dark:bg-black dark:text-white dark:border-white/70"
 };
 var resolvePlacementGeometry = (placement, overlap) => {
   const group = placementGeometries[placement] ?? placementGeometries["top-end"];
@@ -660,13 +660,13 @@ var Badge = ({
   const badgeContentClasses = tailwindMerge.twMerge(
     "inline-flex items-center justify-center whitespace-nowrap rounded-full px-2.5 py-1.5 text-xs font-semibold leading-none min-w-6 min-h-6",
     paletteClass,
-    bordered ? "ring-2 ring-white ring-offset-0" : void 0,
+    bordered ? "ring-2 ring-white ring-offset-0 dark:ring-gray-900" : void 0,
     badgeClassName
   );
   const badgeDotClasses = tailwindMerge.twMerge(
     "inline-block h-2 w-2 rounded-full",
     paletteClass,
-    bordered ? "ring-2 ring-white ring-offset-0" : void 0,
+    bordered ? "ring-2 ring-white ring-offset-0 dark:ring-gray-900" : void 0,
     badgeClassName
   );
   const rootClasses = tailwindMerge.twMerge(
@@ -683,9 +683,9 @@ var Badge = ({
 };
 var Badge_default = Badge;
 var Alert = ({ className, children, ...rest }) => {
-  const classBase = "text-center p-4 bg-neutral-200 rounded-md  ";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, className: tailwindMerge.twMerge("grid grid-cols-7 bg-neutral-200", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-1 pt-4 pl-4", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-google text-2xl" }) }),
+  const classBase = "text-center p-4 bg-neutral-200 text-gray-900 rounded-md dark:bg-neutral-800 dark:text-gray-100";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, className: tailwindMerge.twMerge("grid grid-cols-7 bg-neutral-200 dark:bg-neutral-800", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-1 pt-4 pl-4", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-google text-2xl text-gray-700 dark:text-gray-200" }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("col-span-6", classBase), children })
   ] });
 };
@@ -954,8 +954,8 @@ var offsetClasses = {
   bottom: "pt-2"
 };
 var menuWrapperBaseClasses = "absolute z-50";
-var menuBaseClasses = "min-w-[10rem] rounded-xl border border-gray-200/80 bg-white/95 p-2 text-sm text-gray-700 shadow-lg shadow-gray-900/10 ring-1 ring-black/5 backdrop-blur-md transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2";
-var overlayBaseClasses = "fixed inset-0 z-40 bg-gray-900/30 backdrop-blur-[1px]";
+var menuBaseClasses = "min-w-[10rem] rounded-xl border border-gray-200/80 bg-white/95 p-2 text-sm text-gray-700 shadow-lg shadow-gray-900/10 ring-1 ring-black/5 backdrop-blur-md transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700/80 dark:bg-gray-900/95 dark:text-gray-100 dark:shadow-black/30 dark:ring-white/10 dark:focus-visible:ring-offset-gray-900";
+var overlayBaseClasses = "fixed inset-0 z-40 bg-gray-900/30 backdrop-blur-[1px] dark:bg-black/50";
 var Menu = React__namespace.forwardRef((props, ref) => {
   const {
     activator,
@@ -1126,20 +1126,20 @@ var roundedClasses = {
   xl: "rounded-xl"
 };
 var itemVariantClasses = {
-  elevated: "bg-white border border-gray-200 shadow-sm shadow-gray-900/5",
-  outlined: "bg-white border border-gray-200",
-  tonal: "bg-gray-50 border border-gray-100",
+  elevated: "bg-white border border-gray-200 shadow-sm shadow-gray-900/5 dark:bg-gray-900 dark:border-gray-800 dark:shadow-black/20",
+  outlined: "bg-white border border-gray-200 dark:bg-gray-900 dark:border-gray-800",
+  tonal: "bg-gray-50 border border-gray-100 dark:bg-gray-900/70 dark:border-gray-800",
   plain: "bg-transparent border border-transparent"
 };
 var accentClasses2 = {
-  primary: { text: "text-primary", bg: "bg-primary/5", border: "border-primary/30" },
-  neutral: { text: "text-gray-900", bg: "bg-gray-100", border: "border-gray-200" },
-  info: { text: "text-sky-600", bg: "bg-sky-50", border: "border-sky-200" },
-  success: { text: "text-emerald-600", bg: "bg-emerald-50", border: "border-emerald-200" },
-  warning: { text: "text-amber-600", bg: "bg-amber-50", border: "border-amber-200" },
-  danger: { text: "text-red-600", bg: "bg-red-50", border: "border-red-200" },
-  surface: { text: "text-gray-900", bg: "bg-gray-100", border: "border-gray-200" },
-  bw: { text: "text-gray-900", bg: "bg-gray-100", border: "border-gray-200" }
+  primary: { text: "text-primary", bg: "bg-primary/5 dark:bg-primary/15", border: "border-primary/30 dark:border-primary/40" },
+  neutral: { text: "text-gray-900 dark:text-gray-100", bg: "bg-gray-100 dark:bg-gray-800", border: "border-gray-200 dark:border-gray-700" },
+  info: { text: "text-sky-600 dark:text-sky-300", bg: "bg-sky-50 dark:bg-sky-900/30", border: "border-sky-200 dark:border-sky-700/60" },
+  success: { text: "text-emerald-600 dark:text-emerald-300", bg: "bg-emerald-50 dark:bg-emerald-900/30", border: "border-emerald-200 dark:border-emerald-700/60" },
+  warning: { text: "text-amber-600 dark:text-amber-300", bg: "bg-amber-50 dark:bg-amber-900/30", border: "border-amber-200 dark:border-amber-700/60" },
+  danger: { text: "text-red-600 dark:text-red-300", bg: "bg-red-50 dark:bg-red-900/30", border: "border-red-200 dark:border-red-700/60" },
+  surface: { text: "text-gray-900 dark:text-gray-100", bg: "bg-gray-100 dark:bg-gray-800", border: "border-gray-200 dark:border-gray-700" },
+  bw: { text: "text-gray-900 dark:text-gray-100", bg: "bg-gray-100 dark:bg-gray-800", border: "border-gray-200 dark:border-gray-700" }
 };
 var uniqueIdCounter = 0;
 var generateId = (prefix) => `${prefix}-${++uniqueIdCounter}`;
@@ -1196,7 +1196,7 @@ var ExpansionPanelItemInner = (props) => {
   const toggleIconNode = hideToggleIcon ? null : isExpanded && collapseIcon ? collapseIcon : expandIcon ?? defaultToggleIcon;
   const shouldRotateDefaultIcon = !expandIcon && !collapseIcon && !hideToggleIcon;
   const toggleWrapperClass = tailwindMerge.twMerge(
-    "expansion-panel-item__icon ml-3 flex h-6 w-6 items-center justify-center text-gray-500 transition-transform duration-200",
+    "expansion-panel-item__icon ml-3 flex h-6 w-6 items-center justify-center text-gray-500 dark:text-gray-400 transition-transform duration-200",
     shouldRotateDefaultIcon && isExpanded ? "rotate-180" : void 0
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1237,12 +1237,12 @@ var ExpansionPanelItemInner = (props) => {
             "aria-disabled": disabled || void 0,
             "data-state": isExpanded ? "open" : "closed",
             children: [
-              prepend && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-10 w-10 items-center justify-center text-gray-500", children: prepend }),
+              prepend && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-10 w-10 items-center justify-center text-gray-500 dark:text-gray-400", children: prepend }),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5 text-left", children: [
-                title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("truncate font-medium text-gray-900", titleClass), children: title }),
-                subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: subtitle })
+                title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("truncate font-medium text-gray-900 dark:text-gray-100", titleClass), children: title }),
+                subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: subtitle })
               ] }),
-              append && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto flex items-center gap-2 text-sm text-gray-500", children: append }),
+              append && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400", children: append }),
               !hideToggleIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: toggleWrapperClass, children: toggleIconNode })
             ]
           }
@@ -1250,13 +1250,13 @@ var ExpansionPanelItemInner = (props) => {
         hasContent && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "expansion-panel-item__content overflow-hidden border-t border-gray-100",
+            className: "expansion-panel-item__content overflow-hidden border-t border-gray-100 dark:border-gray-800",
             "data-state": isExpanded ? "open" : "closed",
             children: /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
                 className: tailwindMerge.twMerge(
-                  "expansion-panel-item__body min-h-0 px-4 pt-0 text-sm text-gray-600",
+                  "expansion-panel-item__body min-h-0 px-4 pt-0 text-sm text-gray-600 dark:text-gray-300",
                   activeBorderClass,
                   contentClassName
                 ),
@@ -1274,9 +1274,9 @@ ExpansionPanelItem.displayName = "ExpansionPanelItem";
 markExpansionPanelItem(ExpansionPanelItem);
 var ExpansionPanelItem_default = ExpansionPanelItem;
 var variantContainerClasses = {
-  elevated: "bg-white border border-gray-200 shadow-lg shadow-gray-900/10",
-  outlined: "bg-white border border-gray-200",
-  tonal: "bg-gray-50 border border-gray-100",
+  elevated: "bg-white border border-gray-200 shadow-lg shadow-gray-900/10 dark:bg-gray-900 dark:border-gray-800 dark:shadow-black/30",
+  outlined: "bg-white border border-gray-200 dark:bg-gray-900 dark:border-gray-800",
+  tonal: "bg-gray-50 border border-gray-100 dark:bg-gray-900/70 dark:border-gray-800",
   plain: "bg-transparent border border-transparent"
 };
 var roundedClasses2 = {
@@ -1327,7 +1327,7 @@ var ExpansionPanelInner = (props, forwardedRef) => {
   };
   const variantClass = divider ? variantContainerClasses[variant] : "bg-transparent border border-transparent shadow-none";
   const shapeClass = roundedClasses2[rounded] ?? roundedClasses2.lg;
-  const layoutClass = divider ? "divide-y divide-gray-100 overflow-hidden" : "gap-4";
+  const layoutClass = divider ? "divide-y divide-gray-100 dark:divide-gray-800 overflow-hidden" : "gap-4";
   const enhancedChildren = injectExpansionPanelContext(children, providerValue);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -1335,7 +1335,7 @@ var ExpansionPanelInner = (props, forwardedRef) => {
       ...rest,
       ref: forwardedRef,
       className: tailwindMerge.twMerge(
-        "expansion-panel flex w-full flex-col text-gray-900",
+        "expansion-panel flex w-full flex-col text-gray-900 dark:text-gray-100",
         variantClass,
         shapeClass,
         layoutClass,
@@ -1352,9 +1352,9 @@ var ExpansionPanel = Object.assign(ExpansionPanelBase, {
 ExpansionPanel.displayName = "ExpansionPanel";
 var ExpansionPanel_default = ExpansionPanel;
 var containerBaseClasses = "fixed inset-0 z-[70] flex items-center justify-center p-4 sm:p-8 data-[state=closed]:pointer-events-none";
-var overlayBaseClasses2 = "absolute inset-0 bg-gray-900/55 backdrop-blur-[2px] transition-opacity duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100";
+var overlayBaseClasses2 = "absolute inset-0 bg-gray-900/55 dark:bg-black/70 backdrop-blur-[2px] transition-opacity duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100";
 var panelWrapperClasses = "relative z-10 flex w-full max-h-[95vh] justify-center transition-transform transition-opacity duration-200 data-[state=closed]:translate-y-4 data-[state=closed]:opacity-0 data-[state=open]:translate-y-0 data-[state=open]:opacity-100";
-var panelBaseClasses = "pointer-events-auto w-full max-h-[90vh] overflow-auto rounded-2xl bg-white p-6 text-gray-900 shadow-2xl shadow-black/20 ring-1 ring-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40";
+var panelBaseClasses = "pointer-events-auto w-full max-h-[90vh] overflow-auto rounded-2xl bg-white p-6 text-gray-900 shadow-2xl shadow-black/20 ring-1 ring-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:bg-gray-900 dark:text-gray-100 dark:shadow-black/40 dark:ring-white/10 dark:focus-visible:ring-offset-gray-900";
 var resolveSizeValue = (value) => {
   if (value === void 0) {
     return void 0;
@@ -1586,7 +1586,7 @@ var Drawer = React__namespace.forwardRef((props, ref) => {
 Drawer.displayName = "Drawer";
 var Drawer_default = Drawer;
 var overlayBaseClasses4 = "inset-0 z-[55] transition-opacity duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100";
-var scrimClasses = "bg-gray-900/55 backdrop-blur-[2px]";
+var scrimClasses = "bg-gray-900/55 dark:bg-black/70 backdrop-blur-[2px]";
 var Overlay = React__namespace.forwardRef((props, ref) => {
   const {
     open,
@@ -1638,9 +1638,9 @@ var Overlay = React__namespace.forwardRef((props, ref) => {
 });
 Overlay.displayName = "Overlay";
 var Overlay_default = Overlay;
-var tooltipBaseClasses = "absolute z-[60] max-w-xs rounded-lg border border-white/10 bg-gray-900 px-3 py-2 text-xs font-medium text-white shadow-lg shadow-black/30 ring-1 ring-black/40 transition-all duration-150";
+var tooltipBaseClasses = "absolute z-[60] max-w-xs rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-900 shadow-lg shadow-gray-900/20 ring-1 ring-black/5 transition-all duration-150 dark:border-white/10 dark:bg-gray-900 dark:text-white dark:shadow-black/30 dark:ring-black/40";
 var wrapperBaseClasses = "relative inline-flex max-w-full align-middle";
-var arrowBaseClasses = "pointer-events-none absolute h-2 w-2 rotate-45 border border-white/10 bg-gray-900 shadow-lg shadow-black/20";
+var arrowBaseClasses = "pointer-events-none absolute h-2 w-2 rotate-45 border border-gray-200 bg-white shadow-lg shadow-gray-900/15 dark:border-white/10 dark:bg-gray-900 dark:shadow-black/20";
 var resolveSizeValue3 = (value) => {
   if (value === void 0) {
     return void 0;
@@ -1921,7 +1921,7 @@ var Block = React__namespace.forwardRef(function Block2({ className, variant = "
 });
 Block.displayName = "Block";
 var Block_default = Block;
-var masonryBaseClass = "masonry-grid w-full";
+var masonryBaseClass = "masonry-grid w-full text-gray-900 dark:text-gray-100";
 var itemBaseClass = "masonry-item block break-inside-avoid";
 var MasonryBase = (props, ref) => {
   const {
@@ -2040,77 +2040,77 @@ var sizeClasses2 = {
   "x-large": { tab: "h-11 px-4 text-base", icon: "text-lg" }
 };
 var variantListClasses = {
-  line: "border-b border-gray-200",
-  card: "rounded-xl bg-gray-100 p-1",
-  pill: "rounded-full bg-gray-100/80 p-1"
+  line: "border-b border-gray-200 dark:border-gray-700",
+  card: "rounded-xl bg-gray-100 p-1 dark:bg-gray-800/70",
+  pill: "rounded-full bg-gray-100/80 p-1 dark:bg-gray-800/70"
 };
 var variantTabBaseClasses = {
   line: "border-b-2 border-transparent -mb-px",
-  card: "rounded-lg border border-transparent bg-white/70",
+  card: "rounded-lg border border-transparent bg-white/70 dark:bg-gray-900/70",
   pill: "rounded-full"
 };
 var paletteClasses = {
   primary: {
     text: "text-primary",
     border: "border-primary",
-    bg: "bg-primary/10",
-    ring: "ring-primary/30",
+    bg: "bg-primary/10 dark:bg-primary/20",
+    ring: "ring-primary/30 dark:ring-primary/40",
     ink: "bg-primary"
   },
   neutral: {
-    text: "text-gray-900",
-    border: "border-gray-900",
-    bg: "bg-gray-100",
-    ring: "ring-gray-900/20",
-    ink: "bg-gray-900"
+    text: "text-gray-900 dark:text-gray-100",
+    border: "border-gray-900 dark:border-gray-100",
+    bg: "bg-gray-100 dark:bg-gray-800",
+    ring: "ring-gray-900/20 dark:ring-gray-200/25",
+    ink: "bg-gray-900 dark:bg-gray-100"
   },
   info: {
-    text: "text-sky-600",
-    border: "border-sky-500",
-    bg: "bg-sky-50",
-    ring: "ring-sky-500/20",
+    text: "text-sky-600 dark:text-sky-300",
+    border: "border-sky-500 dark:border-sky-400",
+    bg: "bg-sky-50 dark:bg-sky-900/30",
+    ring: "ring-sky-500/20 dark:ring-sky-400/30",
     ink: "bg-sky-500"
   },
   success: {
-    text: "text-emerald-600",
-    border: "border-emerald-500",
-    bg: "bg-emerald-50",
-    ring: "ring-emerald-500/20",
+    text: "text-emerald-600 dark:text-emerald-300",
+    border: "border-emerald-500 dark:border-emerald-400",
+    bg: "bg-emerald-50 dark:bg-emerald-900/30",
+    ring: "ring-emerald-500/20 dark:ring-emerald-400/30",
     ink: "bg-emerald-500"
   },
   warning: {
-    text: "text-amber-600",
-    border: "border-amber-500",
-    bg: "bg-amber-50",
-    ring: "ring-amber-500/20",
+    text: "text-amber-600 dark:text-amber-300",
+    border: "border-amber-500 dark:border-amber-400",
+    bg: "bg-amber-50 dark:bg-amber-900/30",
+    ring: "ring-amber-500/20 dark:ring-amber-400/30",
     ink: "bg-amber-500"
   },
   danger: {
-    text: "text-red-600",
-    border: "border-red-500",
-    bg: "bg-red-50",
-    ring: "ring-red-500/20",
+    text: "text-red-600 dark:text-red-300",
+    border: "border-red-500 dark:border-red-400",
+    bg: "bg-red-50 dark:bg-red-900/30",
+    ring: "ring-red-500/20 dark:ring-red-400/30",
     ink: "bg-red-500"
   },
   surface: {
-    text: "text-gray-900",
-    border: "border-gray-300",
-    bg: "bg-white",
-    ring: "ring-gray-300/30",
-    ink: "bg-gray-400"
+    text: "text-gray-900 dark:text-gray-100",
+    border: "border-gray-300 dark:border-gray-600",
+    bg: "bg-white dark:bg-gray-900",
+    ring: "ring-gray-300/30 dark:ring-gray-600/40",
+    ink: "bg-gray-400 dark:bg-gray-500"
   },
   bw: {
-    text: "text-black",
-    border: "border-black",
-    bg: "bg-black/10",
-    ring: "ring-black/20",
-    ink: "bg-black"
+    text: "text-black dark:text-white",
+    border: "border-black dark:border-white",
+    bg: "bg-black/10 dark:bg-white/10",
+    ring: "ring-black/20 dark:ring-white/30",
+    ink: "bg-black dark:bg-white"
   }
 };
 var panelVariantClasses = {
   line: "pt-4",
-  card: "mt-3 rounded-xl border border-gray-200 bg-white p-4 shadow-sm",
-  pill: "mt-3 rounded-2xl border border-gray-200 bg-white/90 p-4"
+  card: "mt-3 rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900",
+  pill: "mt-3 rounded-2xl border border-gray-200 bg-white/90 p-4 dark:border-gray-700 dark:bg-gray-900/90"
 };
 var isExtraContentObject = (value) => {
   return !!value && typeof value === "object" && !React__namespace.isValidElement(value) && ("left" in value || "right" in value);
@@ -2286,7 +2286,7 @@ var Tabs = React__namespace.forwardRef((props, ref) => {
       ...rest,
       id,
       ref,
-      className: tailwindMerge.twMerge("tabs flex w-full flex-col text-gray-900", className),
+      className: tailwindMerge.twMerge("tabs flex w-full flex-col text-gray-900 dark:text-gray-100", className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           extraLeft ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: extraLeft }) : null,
@@ -2307,8 +2307,8 @@ var Tabs = React__namespace.forwardRef((props, ref) => {
                 const isActive = tab.value === resolvedActive;
                 const sizeClass = sizeClasses2[size] ?? sizeClasses2.medium;
                 const iconNode = resolveIconNode(tab.icon, size);
-                const badgeNode = tab.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-gray-200 px-1.5 py-0.5 text-[0.6rem] font-semibold text-gray-700", children: tab.badge }) : null;
-                const activeText = isActive ? palette.text : "text-gray-600";
+                const badgeNode = tab.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-gray-200 px-1.5 py-0.5 text-[0.6rem] font-semibold text-gray-700 dark:bg-gray-700 dark:text-gray-200", children: tab.badge }) : null;
+                const activeText = isActive ? palette.text : "text-gray-600 dark:text-gray-300";
                 const activeBorder = isActive ? palette.border : "border-transparent";
                 const activeBg = isActive ? palette.bg : void 0;
                 const activeRing = isActive ? palette.ring : void 0;
@@ -2334,12 +2334,12 @@ var Tabs = React__namespace.forwardRef((props, ref) => {
                       }
                     },
                     className: tailwindMerge.twMerge(
-                      "inline-flex items-center gap-2 whitespace-nowrap font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2",
+                      "inline-flex items-center gap-2 whitespace-nowrap font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900",
                       sizeClass.tab,
                       variantTabBaseClasses[variant],
                       variantClasses5[variant],
                       activeRing ? `ring-1 ${activeRing}` : void 0,
-                      tab.disabled ? "cursor-not-allowed text-gray-400 opacity-60" : "hover:text-gray-900",
+                      tab.disabled ? "cursor-not-allowed text-gray-400 dark:text-gray-500 opacity-60" : "hover:text-gray-900 dark:hover:text-gray-100",
                       tab.tabClassName
                     ),
                     "data-state": isActive ? "active" : "inactive",
@@ -2396,7 +2396,7 @@ var Tab = React__namespace.forwardRef((props, ref) => {
       "aria-labelledby": __tabsTabId,
       "aria-hidden": context ? !isActive : void 0,
       hidden: context ? !isActive : void 0,
-      className: tailwindMerge.twMerge("tabs-panel text-gray-900", className, panelClassName),
+      className: tailwindMerge.twMerge("tabs-panel text-gray-900 dark:text-gray-100", className, panelClassName),
       "data-state": isActive ? "active" : "inactive",
       "data-disabled": disabled || void 0,
       children
@@ -2544,13 +2544,13 @@ var AppBar = ({
 AppBar.displayName = "AppBar";
 var AppBar_default = AppBar;
 var containerVariants = {
-  solid: "bg-gradient-to-br from-primary via-primary/90 to-indigo-600 text-white shadow-2xl shadow-primary/30",
-  outline: "border border-gray-200 bg-white text-gray-900",
-  text: "bg-transparent text-gray-900",
-  ghost: "bg-primary/5 text-gray-900 border border-primary/10",
-  filled: "bg-slate-900 text-white shadow-2xl shadow-slate-900/40",
-  underlined: "border-b-4 border-primary/70 bg-white text-gray-900",
-  sharp: "rounded-none border border-gray-200 bg-white text-gray-900 shadow"
+  solid: "bg-gradient-to-br from-primary via-primary/90 to-indigo-600 text-white shadow-2xl shadow-primary/30 dark:from-primary dark:via-primary/90 dark:to-indigo-700",
+  outline: "border border-gray-200 bg-white text-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100",
+  text: "bg-transparent text-gray-900 dark:text-gray-100",
+  ghost: "bg-primary/5 text-gray-900 border border-primary/10 dark:bg-primary/15 dark:text-gray-100 dark:border-primary/25",
+  filled: "bg-slate-900 text-white shadow-2xl shadow-slate-900/40 dark:bg-slate-950",
+  underlined: "border-b-4 border-primary/70 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 dark:border-primary/60",
+  sharp: "rounded-none border border-gray-200 bg-white text-gray-900 shadow dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
 };
 var frameRadii = {
   solid: "rounded-3xl",
@@ -2563,12 +2563,12 @@ var frameRadii = {
 };
 var badgeVariants = {
   solid: "bg-white/10 text-white border border-white/20",
-  outline: "bg-primary/10 text-primary border border-primary/20",
-  text: "bg-primary/10 text-primary border border-primary/20",
-  ghost: "bg-primary/15 text-primary border border-primary/25",
+  outline: "bg-primary/10 text-primary border border-primary/20 dark:bg-primary/20 dark:border-primary/35",
+  text: "bg-primary/10 text-primary border border-primary/20 dark:bg-primary/20 dark:border-primary/35",
+  ghost: "bg-primary/15 text-primary border border-primary/25 dark:bg-primary/20 dark:border-primary/35",
   filled: "bg-white/10 text-white border border-white/20",
-  underlined: "bg-primary/10 text-primary border border-primary/20",
-  sharp: "bg-primary/10 text-primary border border-primary/20"
+  underlined: "bg-primary/10 text-primary border border-primary/20 dark:bg-primary/20 dark:border-primary/35",
+  sharp: "bg-primary/10 text-primary border border-primary/20 dark:bg-primary/20 dark:border-primary/35"
 };
 var Hero = ({
   title,
@@ -2592,12 +2592,12 @@ var Hero = ({
     badgeVariants[variant] ?? badgeVariants.solid
   );
   const isDark = variant === "solid" || variant === "filled";
-  const subdued = isDark ? "text-white/80" : "text-gray-600";
-  const statMuted = isDark ? "text-white/70" : "text-gray-500";
-  const actionPrimary = isDark ? "bg-white text-gray-900 hover:bg-white/90 focus-visible:outline-white/70" : "bg-primary text-white hover:bg-primary/90 focus-visible:outline-primary/50";
-  const actionSecondary = isDark ? "border border-white/40 text-white hover:bg-white/10 focus-visible:outline-white/60" : "border border-gray-300 text-gray-900 hover:border-primary/60 hover:text-primary focus-visible:outline-primary/50";
+  const subdued = isDark ? "text-white/80" : "text-gray-600 dark:text-gray-300";
+  const statMuted = isDark ? "text-white/70" : "text-gray-500 dark:text-gray-400";
+  const actionPrimary = isDark ? "bg-white text-gray-900 hover:bg-white/90 focus-visible:outline-white/70" : "bg-primary text-white hover:bg-primary/90 focus-visible:outline-primary/50 dark:bg-primary/90 dark:hover:bg-primary";
+  const actionSecondary = isDark ? "border border-white/40 text-white hover:bg-white/10 focus-visible:outline-white/60" : "border border-gray-300 text-gray-900 hover:border-primary/60 hover:text-primary focus-visible:outline-primary/50 dark:border-gray-600 dark:text-gray-100 dark:hover:border-primary/60 dark:hover:text-primary";
   const frameRadius = frameRadii[variant] ?? "rounded-2xl";
-  const frameDecoration = isDark ? "border-white/10 bg-white/10 shadow-2xl shadow-black/20" : "border-gray-200 bg-white shadow-2xl shadow-gray-200/60";
+  const frameDecoration = isDark ? "border-white/10 bg-white/10 shadow-2xl shadow-black/20" : "border-gray-200 bg-white shadow-2xl shadow-gray-200/60 dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/30";
   const renderAction = (action, index) => {
     const { href, label, onClick, variant: actionVariant = "primary" } = action;
     const Component = href ? "a" : "button";
@@ -2618,8 +2618,8 @@ var Hero = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("section", { ...rest, className: containerClass, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none absolute inset-0 overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-24 top-10 h-64 w-64 rounded-full bg-primary/15 blur-3xl" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-16 -bottom-10 h-80 w-80 rounded-full bg-primary/20 blur-3xl" })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-24 top-10 h-64 w-64 rounded-full bg-primary/15 dark:bg-primary/25 blur-3xl" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-16 -bottom-10 h-80 w-80 rounded-full bg-primary/20 dark:bg-primary/30 blur-3xl" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-6xl flex-col gap-12 px-6 py-16 lg:px-10 lg:py-24", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2", children: [
@@ -2630,7 +2630,7 @@ var Hero = ({
             {
               className: tailwindMerge.twMerge(
                 "text-4xl font-semibold leading-tight sm:text-5xl",
-                isDark ? "text-white" : "text-gray-900"
+                isDark ? "text-white" : "text-gray-900 dark:text-gray-100"
               ),
               children: title
             }
@@ -2638,7 +2638,7 @@ var Hero = ({
           description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: tailwindMerge.twMerge("text-lg leading-relaxed", subdued), children: description }),
           actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-3", children: actions.map(renderAction) }),
           stats.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "grid gap-6 sm:grid-cols-3", children: stats.map((stat) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("dd", { className: tailwindMerge.twMerge("text-3xl font-semibold", isDark ? "text-white" : "text-gray-900"), children: stat.value }),
+            /* @__PURE__ */ jsxRuntime.jsx("dd", { className: tailwindMerge.twMerge("text-3xl font-semibold", isDark ? "text-white" : "text-gray-900 dark:text-gray-100"), children: stat.value }),
             /* @__PURE__ */ jsxRuntime.jsx("dt", { className: tailwindMerge.twMerge("text-sm font-medium", statMuted), children: stat.label })
           ] }, stat.label)) })
         ] }),
@@ -3711,8 +3711,8 @@ var Slider = ({
   const displayValue = valueLabel ? valueLabel(currentValue) : currentValue;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col gap-2", wrapperClassName), children: [
     (label || showValue) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: label }),
-      showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("tabular-nums text-gray-900", sizeToken.valueClass), children: displayValue })
+      label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: label }),
+      showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("tabular-nums text-gray-900 dark:text-gray-100", sizeToken.valueClass), children: displayValue })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -3734,7 +3734,7 @@ var Slider = ({
         style: cssVars
       }
     ),
-    hint && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-600", children: hint })
+    hint && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-600 dark:text-gray-400", children: hint })
   ] });
 };
 var Slider_default = Slider;
@@ -3754,14 +3754,14 @@ var thumbTranslate = {
   large: "translate-x-6"
 };
 var paletteTrackClasses = {
-  primary: { active: "bg-primary", inactive: "bg-gray-300" },
-  neutral: { active: "bg-gray-600", inactive: "bg-gray-300" },
-  info: { active: "bg-sky-500", inactive: "bg-gray-300" },
-  success: { active: "bg-emerald-500", inactive: "bg-gray-300" },
-  warning: { active: "bg-amber-500", inactive: "bg-gray-300" },
-  danger: { active: "bg-red-500", inactive: "bg-gray-300" },
-  surface: { active: "bg-gray-900", inactive: "bg-gray-300" },
-  bw: { active: "bg-black", inactive: "bg-gray-200" }
+  primary: { active: "bg-primary", inactive: "bg-gray-300 dark:bg-gray-700" },
+  neutral: { active: "bg-gray-600 dark:bg-gray-500", inactive: "bg-gray-300 dark:bg-gray-700" },
+  info: { active: "bg-sky-500", inactive: "bg-gray-300 dark:bg-gray-700" },
+  success: { active: "bg-emerald-500", inactive: "bg-gray-300 dark:bg-gray-700" },
+  warning: { active: "bg-amber-500", inactive: "bg-gray-300 dark:bg-gray-700" },
+  danger: { active: "bg-red-500", inactive: "bg-gray-300 dark:bg-gray-700" },
+  surface: { active: "bg-gray-900 dark:bg-gray-100", inactive: "bg-gray-300 dark:bg-gray-700" },
+  bw: { active: "bg-black dark:bg-white", inactive: "bg-gray-200 dark:bg-gray-700" }
 };
 var focusRingClasses = {
   primary: "peer-focus-visible:ring-primary/40",
@@ -3846,8 +3846,8 @@ var Switch = React.forwardRef(
                   "block rounded-full border border-transparent transition-all duration-200",
                   sizeTrackClass,
                   currentChecked ? paletteTrack.active : paletteTrack.inactive,
-                  disabled && "bg-gray-200",
-                  "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2",
+                  disabled && "bg-gray-200 dark:bg-gray-700",
+                  "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white dark:peer-focus-visible:ring-offset-gray-900",
                   focusClass,
                   className
                 ),
@@ -3856,11 +3856,11 @@ var Switch = React.forwardRef(
                   "span",
                   {
                     className: tailwindMerge.twMerge(
-                      "absolute left-0.5 top-0.5 rounded-full bg-white shadow-md border border-gray-200 transition-transform duration-200",
+                      "absolute left-0.5 top-0.5 rounded-full bg-white dark:bg-gray-900 shadow-md border border-gray-200 dark:border-gray-600 transition-transform duration-200",
                       sizeThumbClass,
                       currentChecked && thumbShiftClass,
                       currentChecked && thumbActive,
-                      disabled && "border-gray-300"
+                      disabled && "border-gray-300 dark:border-gray-600"
                     )
                   }
                 )
@@ -3868,8 +3868,8 @@ var Switch = React.forwardRef(
             )
           ] }),
           (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: tailwindMerge.twMerge("flex flex-col leading-tight", labelClassName), children: [
-            label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: label }),
-            description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-600", children: description })
+            label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: label }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: description })
           ] })
         ]
       }
@@ -3886,14 +3886,14 @@ var sizeClasses4 = {
   "x-large": "text-2xl"
 };
 var colorClasses2 = {
-  primary: "text-primary",
-  neutral: "text-gray-700",
-  info: "text-sky-600",
-  success: "text-emerald-600",
-  warning: "text-amber-600",
-  danger: "text-red-600",
-  surface: "text-gray-900",
-  bw: "text-black"
+  primary: "text-primary dark:text-primary",
+  neutral: "text-gray-700 dark:text-gray-300",
+  info: "text-sky-600 dark:text-sky-400",
+  success: "text-emerald-600 dark:text-emerald-400",
+  warning: "text-amber-600 dark:text-amber-400",
+  danger: "text-red-600 dark:text-red-400",
+  surface: "text-gray-900 dark:text-gray-100",
+  bw: "text-black dark:text-white"
 };
 var Icon = ({ className, icon, size, color, ...rest }) => {
   const normalizeMdiName = (value) => {