@marcoschwartz/lite-ui 0.22.0 → 0.23.0

package/dist/index.js

@@ -170,32 +170,35 @@ var themes = {
   default: {
     name: "default",
     button: {
-      base: "font-semibold rounded-lg transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 active:scale-95 gap-2",
+      base: "font-medium rounded-md transition-all duration-150 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[hsl(var(--ring))]/50 active:scale-[0.98] gap-2",
       variants: {
-        primary: "bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white shadow-sm hover:shadow-md dark:bg-blue-500 dark:hover:bg-blue-600 dark:active:bg-blue-700",
-        secondary: "bg-gray-600 hover:bg-gray-700 active:bg-gray-800 text-white shadow-sm hover:shadow-md dark:bg-gray-500 dark:hover:bg-gray-600 dark:active:bg-gray-700",
-        success: "bg-green-600 hover:bg-green-700 active:bg-green-800 text-white shadow-sm hover:shadow-md dark:bg-green-500 dark:hover:bg-green-600 dark:active:bg-green-700",
-        danger: "bg-red-600 hover:bg-red-700 active:bg-red-800 text-white shadow-sm hover:shadow-md dark:bg-red-500 dark:hover:bg-red-600 dark:active:bg-red-700",
-        warning: "bg-yellow-500 hover:bg-yellow-600 active:bg-yellow-700 text-white shadow-sm hover:shadow-md dark:bg-yellow-400 dark:hover:bg-yellow-500 dark:active:bg-yellow-600",
-        info: "bg-cyan-600 hover:bg-cyan-700 active:bg-cyan-800 text-white shadow-sm hover:shadow-md dark:bg-cyan-500 dark:hover:bg-cyan-600 dark:active:bg-cyan-700"
+        primary: "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] hover:bg-[hsl(var(--primary))]/90 shadow-sm",
+        secondary: "bg-[hsl(var(--secondary))] text-[hsl(var(--secondary-foreground))] hover:bg-[hsl(var(--secondary))]/80 border border-[hsl(var(--border))]",
+        success: "bg-[hsl(var(--success))] text-[hsl(var(--success-foreground))] hover:bg-[hsl(var(--success))]/90 shadow-sm",
+        danger: "bg-[hsl(var(--destructive))] text-[hsl(var(--destructive-foreground))] hover:bg-[hsl(var(--destructive))]/90 shadow-sm",
+        warning: "bg-[hsl(var(--warning))] text-[hsl(var(--warning-foreground))] hover:bg-[hsl(var(--warning))]/90 shadow-sm",
+        info: "bg-[hsl(var(--info))] text-[hsl(var(--info-foreground))] hover:bg-[hsl(var(--info))]/90 shadow-sm",
+        outline: "border border-[hsl(var(--border))] bg-transparent hover:bg-[hsl(var(--accent))] text-[hsl(var(--foreground))]",
+        ghost: "bg-transparent hover:bg-[hsl(var(--accent))] text-[hsl(var(--foreground))]",
+        link: "bg-transparent text-[hsl(var(--primary))] underline-offset-4 hover:underline !p-0 !h-auto !min-h-0 shadow-none"
       },
       sizes: {
-        sm: "px-3 py-1.5 text-sm min-h-[30px]",
-        md: "px-4 py-2 text-base min-h-[38px]",
-        lg: "px-6 py-3 text-lg min-h-[48px]",
-        xl: "px-8 py-4 text-xl min-h-[60px]"
+        sm: "px-3 py-1.5 text-sm h-8",
+        md: "px-4 py-2 text-sm h-9",
+        lg: "px-5 py-2.5 text-base h-10",
+        xl: "px-6 py-3 text-base h-11"
       },
-      disabled: "opacity-50 cursor-not-allowed hover:shadow-sm active:scale-100"
+      disabled: "pointer-events-none opacity-50"
     },
     select: {
-      base: "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 text-left transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 pr-10 cursor-pointer dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500",
+      base: "w-full appearance-none rounded-md border border-[hsl(var(--input))] bg-transparent text-[hsl(var(--foreground))] text-left transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 focus:border-[hsl(var(--ring))] hover:border-[hsl(var(--muted-foreground))] pr-10 cursor-pointer",
       sizes: {
         sm: "px-3 py-1.5 text-sm",
-        md: "px-4 py-2.5 text-base",
-        lg: "px-4 py-3 text-lg",
-        xl: "px-5 py-4 text-xl"
+        md: "px-3 py-2.5 text-sm",
+        lg: "px-4 py-3 text-base",
+        xl: "px-4 py-3.5 text-lg"
       },
-      disabled: "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900"
+      disabled: "pointer-events-none opacity-50 bg-[hsl(var(--muted))]"
     }
   },
   minimalistic: {
@@ -208,7 +211,10 @@ var themes = {
         success: "bg-transparent border-green-400 text-green-400 hover:bg-green-400 hover:text-black",
         danger: "bg-transparent border-red-400 text-red-400 hover:bg-red-400 hover:text-black",
         warning: "bg-transparent border-yellow-400 text-yellow-400 hover:bg-yellow-400 hover:text-black",
-        info: "bg-transparent border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-black"
+        info: "bg-transparent border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-black",
+        outline: "bg-transparent border-white text-white hover:bg-white hover:text-black",
+        ghost: "bg-transparent border-transparent text-white hover:bg-white/10",
+        link: "bg-transparent border-transparent text-white underline-offset-4 hover:underline !p-0 !h-auto !min-h-0"
       },
       sizes: {
         sm: "px-4 py-2 text-sm uppercase tracking-wide min-h-[36px]",
@@ -432,11 +438,11 @@ var Select = ({
   const baseStyles = theme.select.base;
   const sizeStyles2 = theme.select.sizes[size];
   const disabledStyles = disabled ? theme.select.disabled : "";
-  const errorStyles = error ? "border-red-500 focus:ring-red-500 dark:border-red-500" : "";
+  const errorStyles = error ? "border-[hsl(var(--destructive))] focus:ring-[hsl(var(--destructive))]" : "";
   const buttonClasses = `${baseStyles} ${sizeStyles2} ${disabledStyles} ${errorStyles}`.trim();
-  const iconColor = themeName === "minimalistic" ? disabled ? "text-gray-600" : "text-white" : disabled ? "text-gray-400" : "text-gray-500";
-  const dropdownBaseStyles = themeName === "minimalistic" ? "bg-black border-2 border-white" : "bg-white border border-gray-300 shadow-lg dark:bg-gray-800 dark:border-gray-600";
-  const optionBaseStyles = themeName === "minimalistic" ? "text-white hover:bg-white hover:text-black transition-colors duration-200" : "text-gray-900 hover:bg-blue-50 transition-colors duration-150 dark:text-gray-100 dark:hover:bg-gray-700";
+  const iconColor = themeName === "minimalistic" ? disabled ? "text-[hsl(var(--muted-foreground))]" : "text-white" : "text-[hsl(var(--muted-foreground))]";
+  const dropdownBaseStyles = themeName === "minimalistic" ? "bg-black border-2 border-white" : "bg-[hsl(var(--popover))] border border-[hsl(var(--border))] shadow-lg";
+  const optionBaseStyles = themeName === "minimalistic" ? "text-white hover:bg-white hover:text-black transition-colors duration-200" : "text-[hsl(var(--popover-foreground))] hover:bg-[hsl(var(--accent))] transition-colors duration-150";
   const optionSizeStyles = {
     sm: "px-4 py-2 text-sm",
     md: "px-4 py-2.5 text-base",
@@ -444,7 +450,7 @@ var Select = ({
     xl: "px-5 py-4 text-xl"
   }[size];
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `w-full ${className}`, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-1.5", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative inline-block w-full", ref: dropdownRef, ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "button",
@@ -477,14 +483,14 @@ var Select = ({
       isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         "div",
         {
-          className: `absolute z-50 w-full mt-1 ${dropdownBaseStyles} rounded-lg overflow-hidden`,
+          className: `absolute z-50 w-full mt-1 ${dropdownBaseStyles} rounded-md overflow-hidden`,
           children: [
-            searchable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `sticky top-0 ${themeName === "minimalistic" ? "bg-black border-b-2 border-white" : "bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"}`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            searchable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `sticky top-0 ${themeName === "minimalistic" ? "bg-black border-b-2 border-white" : "bg-[hsl(var(--popover))] border-b border-[hsl(var(--border))]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "input",
               {
                 ref: searchInputRef,
                 type: "text",
-                className: `w-full ${optionSizeStyles} ${themeName === "minimalistic" ? "bg-black text-white placeholder-gray-600 focus:outline-none" : "bg-transparent text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:outline-none"}`,
+                className: `w-full ${optionSizeStyles} ${themeName === "minimalistic" ? "bg-black text-white placeholder-[hsl(var(--muted-foreground))] focus:outline-none" : "bg-transparent text-[hsl(var(--popover-foreground))] placeholder:text-[hsl(var(--muted-foreground))] focus:outline-none"}`,
                 placeholder: searchPlaceholder,
                 value: searchQuery,
                 onChange: (e) => setSearchQuery(e.target.value),
@@ -529,20 +535,20 @@ var Select = ({
                 children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "div",
                   {
-                    className: `${optionBaseStyles} ${optionSizeStyles} cursor-pointer ${value === option.value ? themeName === "minimalistic" ? "bg-white text-black" : "bg-blue-50 dark:bg-gray-700" : ""}`,
+                    className: `${optionBaseStyles} ${optionSizeStyles} cursor-pointer ${value === option.value ? themeName === "minimalistic" ? "bg-white text-black" : "bg-[hsl(var(--accent))]" : ""}`,
                     onClick: () => handleSelect(option.value),
                     children: option.label
                   },
                   option.value
-                )) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `${optionSizeStyles} ${themeName === "minimalistic" ? "text-gray-500" : "text-gray-500 dark:text-gray-400"} text-center`, children: "No results found" })
+                )) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `${optionSizeStyles} ${themeName === "minimalistic" ? "text-[hsl(var(--muted-foreground))]" : "text-[hsl(var(--muted-foreground))]"} text-center`, children: "No results found" })
               }
             )
           ]
         }
       )
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
-    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+    error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-1.5 text-sm text-[hsl(var(--destructive))]", children: error }),
+    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-1.5 text-sm text-[hsl(var(--muted-foreground))]", children: helperText })
   ] });
 };
 
@@ -563,7 +569,6 @@ var Modal = ({
   size = "md",
   showCloseButton = true
 }) => {
-  const { theme } = useTheme();
   (0, import_react3.useEffect)(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen) {
@@ -584,7 +589,7 @@ var Modal = ({
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
-      className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm transition-all duration-200",
+      className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm transition-all duration-200",
       onClick: onClose,
       role: "dialog",
       "aria-modal": "true",
@@ -592,18 +597,18 @@ var Modal = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "div",
         {
-          className: `relative w-full ${sizeClass} bg-white dark:bg-gray-800 rounded-lg shadow-2xl transform transition-all duration-200 scale-100 animate-in`,
+          className: `relative w-full ${sizeClass} bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))] rounded-[--radius] border border-[hsl(var(--border))] shadow-2xl transform transition-all duration-200 scale-100 animate-in`,
           onClick: (e) => e.stopPropagation(),
           children: [
-            (title || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { id: "modal-title", className: "text-xl font-semibold text-gray-900 dark:text-gray-100", children: title }),
+            (title || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between p-6 border-b border-[hsl(var(--border))]", children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { id: "modal-title", className: "text-lg font-semibold", children: title }),
               showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "button",
                 {
                   onClick: onClose,
-                  className: "ml-auto text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors",
+                  className: "ml-auto text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors rounded-[--radius] p-1 hover:bg-[hsl(var(--accent))]",
                   "aria-label": "Close modal",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                 }
               )
             ] }),
@@ -624,17 +629,16 @@ var Navbar = ({
   sticky = false,
   variant = "solid"
 }) => {
-  const { theme } = useTheme();
   const baseClasses = sticky ? "sticky top-0 z-40" : "";
   const getVariantClasses2 = () => {
     switch (variant) {
       case "glass":
-        return "bg-transparent backdrop-blur-xl";
+        return "bg-[hsl(var(--background))]/80 backdrop-blur-xl border-b border-[hsl(var(--border))]";
       case "transparent":
         return "bg-transparent";
       case "solid":
       default:
-        return "bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700";
+        return "bg-[hsl(var(--background))] border-b border-[hsl(var(--border))]";
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { className: `${getVariantClasses2()} ${baseClasses} ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between items-center h-16", children: [
@@ -656,13 +660,12 @@ var Sidebar = ({
   width = "md",
   position = "left"
 }) => {
-  const { theme } = useTheme();
   const widthClass = widthClasses[width];
   const borderClass = position === "left" ? "border-r" : "border-l";
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "aside",
     {
-      className: `${widthClass} bg-white dark:bg-gray-800 ${borderClass} border-gray-200 dark:border-gray-700 h-full overflow-y-auto ${className}`,
+      className: `${widthClass} bg-[hsl(var(--card))] ${borderClass} border-[hsl(var(--border))] h-full overflow-y-auto ${className}`,
       children
     }
   );
@@ -1259,12 +1262,12 @@ var breakpointClasses = {
 var getVariantClasses = (variant) => {
   switch (variant) {
     case "glass":
-      return "bg-transparent backdrop-blur-xl";
+      return "bg-[hsl(var(--background))]/80 backdrop-blur-xl";
     case "transparent":
       return "bg-transparent";
     case "solid":
     default:
-      return "bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700";
+      return "bg-[hsl(var(--background))] border-b border-[hsl(var(--border))]";
   }
 };
 var AppShell = ({
@@ -1277,7 +1280,6 @@ var AppShell = ({
   responsive = true,
   className = ""
 }) => {
-  const { theme } = useTheme();
   const [isMobileNavbarOpen, setIsMobileNavbarOpen] = (0, import_react5.useState)(defaultNavbarOpen);
   const navbarWidth = navbar?.width || "md";
   const navbarBreakpoint = navbar?.breakpoint || "md";
@@ -1288,7 +1290,7 @@ var AppShell = ({
     return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `min-h-screen flex flex-col ${className}`, children: [
       header && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-full", children: header }),
       /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex flex-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("aside", { className: `${widthClass} bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 h-full overflow-y-auto`, children: navbar.content }),
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("aside", { className: `${widthClass} bg-[hsl(var(--card))] border-r border-[hsl(var(--border))] h-full overflow-y-auto`, children: navbar.content }),
         /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("main", { className: "flex-1 overflow-y-auto", children })
       ] })
     ] });
@@ -1302,14 +1304,14 @@ var AppShell = ({
   if (navbar && navbarPosition === "top") {
     const mobileMenuClass = navbarBreakpoint === "sm" ? "sm:hidden" : navbarBreakpoint === "md" ? "md:hidden" : navbarBreakpoint === "lg" ? "lg:hidden" : "xl:hidden";
     const desktopNavClass = navbarBreakpoint === "sm" ? "sm:flex" : navbarBreakpoint === "md" ? "md:flex" : navbarBreakpoint === "lg" ? "lg:flex" : "xl:flex";
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 ${className}`, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `min-h-screen flex flex-col bg-[hsl(var(--background))] ${className}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("nav", { className: `sticky top-0 z-30 ${getVariantClasses(navbar.variant)}`, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex justify-between items-center h-16", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex items-center", children: navbarLogo ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: navbarTitle }) : null }),
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex items-center", children: navbarLogo ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: navbarTitle }) : null }),
         /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: `hidden ${desktopNavClass} items-center gap-6`, children: navbar.content }),
         /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           "button",
           {
-            className: `${mobileMenuClass} p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors`,
+            className: `${mobileMenuClass} p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors`,
             onClick: () => setIsMobileNavbarOpen(!isMobileNavbarOpen),
             "aria-label": "Toggle menu",
             children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(MenuIcon, { size: "md" })
@@ -1325,13 +1327,13 @@ var AppShell = ({
             onClick: () => setIsMobileNavbarOpen(false)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `${mobileMenuClass} fixed left-0 top-0 bottom-0 z-50 w-64 bg-white dark:bg-gray-800 shadow-2xl animate-in slide-in-from-left duration-300`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between", children: [
-            navbarLogo ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: navbarTitle }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `${mobileMenuClass} fixed left-0 top-0 bottom-0 z-50 w-64 bg-[hsl(var(--card))] shadow-2xl animate-in slide-in-from-left duration-300`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "p-4 border-b border-[hsl(var(--border))] flex items-center justify-between", children: [
+            navbarLogo ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: navbarTitle }) : null,
             /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
               "button",
               {
-                className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
+                className: "p-1 rounded hover:bg-[hsl(var(--accent))] transition-colors",
                 onClick: () => setIsMobileNavbarOpen(false),
                 "aria-label": "Close menu",
                 children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
@@ -1356,13 +1358,13 @@ var AppShell = ({
     const desktopNavbarClass = navbarBreakpoint === "sm" ? "sm:block" : navbarBreakpoint === "md" ? "md:block" : navbarBreakpoint === "lg" ? "lg:block" : "xl:block";
     const mobileDrawerClass = navbarBreakpoint === "sm" ? "sm:hidden" : navbarBreakpoint === "md" ? "md:hidden" : navbarBreakpoint === "lg" ? "lg:hidden" : "xl:hidden";
     const sidebarWidthClass = navbarWidth === "sm" ? "w-48" : navbarWidth === "lg" ? "w-80" : "w-64";
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 ${className}`, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `min-h-screen flex flex-col bg-[hsl(var(--background))] ${className}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `${mobileHeaderClass} sticky top-0 z-30 ${getVariantClasses(navbar.variant)} px-4 py-3 flex items-center justify-between`, children: [
-        navbarLogo ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: navbarTitle }) : null,
+        navbarLogo ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: navbarTitle }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           "button",
           {
-            className: "p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
+            className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
             onClick: () => setIsMobileNavbarOpen(!isMobileNavbarOpen),
             "aria-label": "Toggle menu",
             children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(MenuIcon, { size: "md" })
@@ -1371,7 +1373,7 @@ var AppShell = ({
       ] }),
       header && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-full", children: header }),
       /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex flex-1 min-h-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("aside", { className: `hidden ${desktopNavbarClass} ${sidebarWidthClass} ${navbar.variant === "glass" ? "bg-transparent backdrop-blur-xl" : navbar.variant === "transparent" ? "bg-transparent" : "bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700"} overflow-y-auto shrink-0`, children: navbar.content }),
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("aside", { className: `hidden ${desktopNavbarClass} ${sidebarWidthClass} ${navbar.variant === "glass" ? "bg-[hsl(var(--background))]/80 backdrop-blur-xl" : navbar.variant === "transparent" ? "bg-transparent" : "bg-[hsl(var(--card))] border-r border-[hsl(var(--border))]"} overflow-y-auto shrink-0`, children: navbar.content }),
         isMobileNavbarOpen && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
             "div",
@@ -1380,13 +1382,13 @@ var AppShell = ({
               onClick: () => setIsMobileNavbarOpen(false)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `${mobileDrawerClass} fixed left-0 top-0 bottom-0 z-50 w-64 bg-white dark:bg-gray-800 shadow-2xl animate-in slide-in-from-left duration-300`, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between", children: [
-              navbarLogo ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: navbarTitle }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `${mobileDrawerClass} fixed left-0 top-0 bottom-0 z-50 w-64 bg-[hsl(var(--card))] shadow-2xl animate-in slide-in-from-left duration-300`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "p-4 border-b border-[hsl(var(--border))] flex items-center justify-between", children: [
+              navbarLogo ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: navbarTitle }) : null,
               /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
                 "button",
                 {
-                  className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
+                  className: "p-1 rounded hover:bg-[hsl(var(--accent))] transition-colors",
                   onClick: () => setIsMobileNavbarOpen(false),
                   "aria-label": "Close menu",
                   children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
@@ -1459,7 +1461,6 @@ var Drawer = ({
   size = "md",
   showCloseButton = true
 }) => {
-  const { theme } = useTheme();
   (0, import_react6.useEffect)(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen) {
@@ -1482,24 +1483,24 @@ var Drawer = ({
     /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
       "div",
       {
-        className: "fixed inset-0 z-40 bg-black/60 backdrop-blur-sm transition-all duration-200",
+        className: "fixed inset-0 z-40 bg-black/80 backdrop-blur-sm transition-all duration-200",
         onClick: onClose
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
       "div",
       {
-        className: `fixed z-50 ${positionClass} ${sizeClass} bg-white dark:bg-gray-800 shadow-2xl overflow-hidden flex flex-col ${slideClasses[position]}`,
+        className: `fixed z-50 ${positionClass} ${sizeClass} bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))] border-[hsl(var(--border))] shadow-2xl overflow-hidden flex flex-col ${slideClasses[position]} ${position === "left" ? "border-r" : position === "right" ? "border-l" : position === "top" ? "border-b" : "border-t"}`,
         children: [
-          (title || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", children: [
-            title && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("h3", { className: "text-xl font-semibold text-gray-900 dark:text-gray-100", children: title }),
+          (title || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex items-center justify-between p-6 border-b border-[hsl(var(--border))]", children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("h3", { className: "text-lg font-semibold", children: title }),
             showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
               "button",
               {
                 onClick: onClose,
-                className: "ml-auto text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors",
+                className: "ml-auto text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors rounded-[--radius] p-1 hover:bg-[hsl(var(--accent))]",
                 "aria-label": "Close drawer",
-                children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
               }
             )
           ] }),
@@ -1532,16 +1533,16 @@ var TextInput = (0, import_react7.forwardRef)(
     ...props
   }, ref) => {
     const { theme, themeName } = useTheme();
-    const baseStyles = theme.select?.base || "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500";
+    const baseStyles = "w-full appearance-none rounded-md border border-[hsl(var(--input))] bg-transparent text-[hsl(var(--foreground))] transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 focus:border-[hsl(var(--ring))] hover:border-[hsl(var(--muted-foreground))] placeholder:text-[hsl(var(--muted-foreground))]";
     const sizeStyle = sizeClasses4[size];
-    const errorStyles = error ? "border-red-500 focus:ring-red-500 dark:border-red-500" : "";
-    const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900" : "";
+    const errorStyles = error ? "border-[hsl(var(--destructive))] focus:ring-[hsl(var(--destructive))]" : "";
+    const disabledStyles = disabled ? "pointer-events-none opacity-50 bg-[hsl(var(--muted))]" : "";
     const widthStyle = fullWidth ? "w-full" : "";
     const paddingWithIcon = leftIcon ? "pl-10" : rightIcon ? "pr-10" : "";
     return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: `${widthStyle} ${className}`, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-1.5", children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "relative", children: [
-        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500", children: leftIcon }),
+        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-[hsl(var(--muted-foreground))]", children: leftIcon }),
         /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
           "input",
           {
@@ -1551,10 +1552,10 @@ var TextInput = (0, import_react7.forwardRef)(
             ...props
           }
         ),
-        rightIcon && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500", children: rightIcon })
+        rightIcon && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-[hsl(var(--muted-foreground))]", children: rightIcon })
       ] }),
-      error && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
-      helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+      error && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "mt-1.5 text-sm text-[hsl(var(--destructive))]", children: error }),
+      helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "mt-1.5 text-sm text-[hsl(var(--muted-foreground))]", children: helperText })
     ] });
   }
 );
@@ -1565,8 +1566,8 @@ var import_react8 = require("react");
 var import_jsx_runtime81 = require("react/jsx-runtime");
 var sizeClasses5 = {
   sm: "px-3 py-1.5 text-sm",
-  md: "px-4 py-2.5 text-base",
-  lg: "px-4 py-3 text-lg"
+  md: "px-3 py-2.5 text-sm",
+  lg: "px-4 py-3 text-base"
 };
 var NumberInput = ({
   label,
@@ -1585,7 +1586,6 @@ var NumberInput = ({
   placeholder,
   className = ""
 }) => {
-  const { theme } = useTheme();
   const inputRef = (0, import_react8.useRef)(null);
   const [isFocused, setIsFocused] = (0, import_react8.useState)(false);
   const clampValue = (val) => {
@@ -1630,15 +1630,15 @@ var NumberInput = ({
       handleDecrement();
     }
   };
-  const baseStyles = "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500";
+  const baseStyles = "w-full appearance-none rounded-md border border-[hsl(var(--input))] bg-transparent text-[hsl(var(--foreground))] transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 focus:border-[hsl(var(--ring))] hover:border-[hsl(var(--muted-foreground))] placeholder:text-[hsl(var(--muted-foreground))]";
   const sizeStyle = sizeClasses5[size];
-  const errorStyles = error ? "border-red-500 focus:ring-red-500 dark:border-red-500" : "";
-  const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900" : "";
+  const errorStyles = error ? "border-[hsl(var(--destructive))] focus:ring-[hsl(var(--destructive))]/50" : "";
+  const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-[hsl(var(--muted))]" : "";
   const widthStyle = fullWidth ? "w-full" : "";
   const paddingWithControls = !hideControls ? "pr-8" : "";
   const displayValue = value !== void 0 ? value.toString() : "";
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: `${widthStyle} ${className}`, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-1.5", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "relative", children: [
       /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         "input",
@@ -1665,9 +1665,9 @@ var NumberInput = ({
             type: "button",
             onClick: handleIncrement,
             disabled: disabled || max !== void 0 && value !== void 0 && value >= max,
-            className: "px-2 py-0.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+            className: "px-2 py-0.5 hover:bg-[hsl(var(--accent))] rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
             tabIndex: -1,
-            children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("svg", { className: "w-3 h-3 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 15l7-7 7 7" }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("svg", { className: "w-3 h-3 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 15l7-7 7 7" }) })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
@@ -1676,15 +1676,15 @@ var NumberInput = ({
             type: "button",
             onClick: handleDecrement,
             disabled: disabled || min !== void 0 && value !== void 0 && value <= min,
-            className: "px-2 py-0.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+            className: "px-2 py-0.5 hover:bg-[hsl(var(--accent))] rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
             tabIndex: -1,
-            children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("svg", { className: "w-3 h-3 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M19 9l-7 7-7-7" }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("svg", { className: "w-3 h-3 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M19 9l-7 7-7-7" }) })
           }
         )
       ] })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
-    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+    error && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("p", { className: "mt-1.5 text-sm text-[hsl(var(--destructive))]", children: error }),
+    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("p", { className: "mt-1.5 text-sm text-[hsl(var(--muted-foreground))]", children: helperText })
   ] });
 };
 NumberInput.displayName = "NumberInput";
@@ -1760,18 +1760,18 @@ var ActionMenu = ({
   const defaultTrigger = /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
     "button",
     {
-      className: "p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
+      className: "p-2 rounded-md hover:bg-[hsl(var(--accent))] transition-colors",
       "aria-label": "Open menu",
-      children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("svg", { className: "w-5 h-5 text-[hsl(var(--muted-foreground))]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" }) })
     }
   );
-  const menuBaseStyles = themeName === "minimalistic" ? "bg-black border-2 border-white" : "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg";
-  const itemBaseStyles = themeName === "minimalistic" ? "text-white hover:bg-white hover:text-black transition-colors duration-200" : "text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors";
+  const menuBaseStyles = themeName === "minimalistic" ? "bg-black border-2 border-white" : "bg-[hsl(var(--popover))] border border-[hsl(var(--border))] shadow-lg";
+  const itemBaseStyles = themeName === "minimalistic" ? "text-white hover:bg-white hover:text-black transition-colors duration-200" : "text-[hsl(var(--popover-foreground))] hover:bg-[hsl(var(--accent))] transition-colors";
   const menu = isOpen && mounted && menuPosition ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
     "div",
     {
       ref: menuRef,
-      className: `fixed w-56 rounded-lg ${menuBaseStyles} z-[9999] max-h-[80vh] overflow-auto`,
+      className: `fixed w-56 rounded-md ${menuBaseStyles} z-[9999] max-h-[80vh] overflow-auto`,
       style: {
         minWidth: "14rem",
         top: `${menuPosition.top}px`,
@@ -1782,7 +1782,7 @@ var ActionMenu = ({
           return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
             "div",
             {
-              className: "my-1 border-t border-gray-200 dark:border-gray-700"
+              className: "my-1 border-t border-[hsl(var(--border))]"
             },
             index
           );
@@ -1792,7 +1792,7 @@ var ActionMenu = ({
           {
             onClick: () => handleItemClick(item),
             disabled: item.disabled,
-            className: `w-full text-left px-4 py-3 flex items-center gap-3 ${itemBaseStyles} ${item.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${item.variant === "danger" ? "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20" : ""}`,
+            className: `w-full text-left px-4 py-2.5 flex items-center gap-3 ${itemBaseStyles} ${item.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${item.variant === "danger" ? "text-[hsl(var(--destructive))] hover:bg-[hsl(var(--destructive))]/10" : ""}`,
             children: [
               item.icon && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "flex-shrink-0", children: item.icon }),
               /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "flex-1", children: item.label })
@@ -1824,13 +1824,12 @@ var Card = ({
   hover = false,
   ...props
 }) => {
-  const { theme } = useTheme();
   const paddingClass = paddingClasses[padding];
-  const hoverClass = hover ? "hover:shadow-xl hover:scale-[1.02] hover:border-blue-400 dark:hover:border-blue-500 cursor-pointer transition-all duration-200 ease-in-out" : "";
+  const hoverClass = hover ? "hover:shadow-lg hover:border-[hsl(var(--ring))]/50 cursor-pointer transition-all duration-200 ease-in-out" : "";
   return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
     "div",
     {
-      className: `bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 ${paddingClass} ${hoverClass} ${className}`,
+      className: `bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))] rounded-[--radius] border border-[hsl(var(--border))] shadow-sm ${paddingClass} ${hoverClass} ${className}`,
       ...props,
       children
     }
@@ -1840,16 +1839,16 @@ var Card = ({
 // src/components/Alert.tsx
 var import_jsx_runtime84 = require("react/jsx-runtime");
 var variantStyles = {
-  info: "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-900 dark:text-blue-100",
-  success: "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-900 dark:text-green-100",
-  warning: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800 text-yellow-900 dark:text-yellow-100",
-  error: "bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-900 dark:text-red-100"
+  info: "bg-[hsl(var(--info))]/10 border-[hsl(var(--info))]/20 text-[hsl(var(--info))]",
+  success: "bg-[hsl(var(--success))]/10 border-[hsl(var(--success))]/20 text-[hsl(var(--success))]",
+  warning: "bg-[hsl(var(--warning))]/10 border-[hsl(var(--warning))]/20 text-[hsl(var(--warning))]",
+  error: "bg-[hsl(var(--destructive))]/10 border-[hsl(var(--destructive))]/20 text-[hsl(var(--destructive))]"
 };
 var iconStyles = {
-  info: "text-blue-600 dark:text-blue-400",
-  success: "text-green-600 dark:text-green-400",
-  warning: "text-yellow-600 dark:text-yellow-400",
-  error: "text-red-600 dark:text-red-400"
+  info: "text-[hsl(var(--info))]",
+  success: "text-[hsl(var(--success))]",
+  warning: "text-[hsl(var(--warning))]",
+  error: "text-[hsl(var(--destructive))]"
 };
 var Alert = ({
   variant = "info",
@@ -1858,10 +1857,9 @@ var Alert = ({
   onClose,
   className = ""
 }) => {
-  const { theme } = useTheme();
   const variantClass = variantStyles[variant];
   const iconClass = iconStyles[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: `rounded-lg border p-4 ${variantClass} ${className}`, role: "alert", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex items-start gap-3", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: `rounded-[--radius] border p-4 ${variantClass} ${className}`, role: "alert", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex items-start gap-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: `flex-shrink-0 ${iconClass}`, children: [
       variant === "info" && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
       variant === "success" && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }),
@@ -1889,7 +1887,6 @@ var import_react10 = require("react");
 var import_jsx_runtime85 = require("react/jsx-runtime");
 var Checkbox = (0, import_react10.forwardRef)(
   ({ label, error, className = "", disabled, checked, ...props }, ref) => {
-    const { theme } = useTheme();
     return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className, children: [
       /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer group", children: [
         /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "relative inline-flex items-center", children: [
@@ -1904,11 +1901,11 @@ var Checkbox = (0, import_react10.forwardRef)(
               ...props
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: `w-4 h-4 border-2 rounded transition-all duration-200 flex items-center justify-center
-              ${error ? "border-red-500 dark:border-red-500" : "border-gray-300 dark:border-gray-600"}
-              ${disabled ? "opacity-50 cursor-not-allowed bg-gray-100 dark:bg-gray-800" : "peer-hover:border-gray-400 dark:peer-hover:border-gray-500"}
-              peer-checked:bg-blue-600 peer-checked:border-blue-600
-              peer-focus:ring-2 peer-focus:ring-blue-500 peer-focus:ring-offset-2
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: `w-4 h-4 border-2 rounded-sm transition-all duration-200 flex items-center justify-center
+              ${error ? "border-[hsl(var(--destructive))]" : "border-[hsl(var(--input))]"}
+              ${disabled ? "opacity-50 cursor-not-allowed bg-[hsl(var(--muted))]" : "peer-hover:border-[hsl(var(--ring))]"}
+              peer-checked:bg-[hsl(var(--primary))] peer-checked:border-[hsl(var(--primary))]
+              peer-focus:ring-1 peer-focus:ring-[hsl(var(--ring))]/50
             `, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             "svg",
             {
@@ -1929,9 +1926,9 @@ var Checkbox = (0, import_react10.forwardRef)(
             }
           ) })
         ] }),
-        label && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: `text-sm text-gray-700 dark:text-gray-300 ${disabled ? "opacity-50 cursor-not-allowed" : "group-hover:text-gray-900 dark:group-hover:text-gray-100"}`, children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: `text-sm text-[hsl(var(--foreground))] ${disabled ? "opacity-50 cursor-not-allowed" : ""}`, children: label })
       ] }),
-      error && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error })
+      error && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("p", { className: "mt-1 text-sm text-[hsl(var(--destructive))]", children: error })
     ] });
   }
 );
@@ -1942,7 +1939,6 @@ var import_react11 = require("react");
 var import_jsx_runtime86 = require("react/jsx-runtime");
 var Toggle = (0, import_react11.forwardRef)(
   ({ label, size = "md", className = "", disabled, checked, ...props }, ref) => {
-    const { theme } = useTheme();
     const toggleClasses = {
       sm: {
         switch: "w-9 h-5",
@@ -1974,7 +1970,7 @@ var Toggle = (0, import_react11.forwardRef)(
         /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
           "div",
           {
-            className: `${currentSize.switch} bg-gray-300 dark:bg-gray-700 peer-focus:ring-2 peer-focus:ring-blue-500 rounded-full peer peer-checked:bg-blue-600 dark:peer-checked:bg-blue-500 transition-colors`
+            className: `${currentSize.switch} bg-[hsl(var(--input))] peer-focus:ring-1 peer-focus:ring-[hsl(var(--ring))]/50 rounded-full peer peer-checked:bg-[hsl(var(--primary))] transition-colors`
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
@@ -1984,7 +1980,7 @@ var Toggle = (0, import_react11.forwardRef)(
           }
         )
       ] }),
-      label && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label })
+      label && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "text-sm font-medium text-[hsl(var(--foreground))]", children: label })
     ] });
   }
 );
@@ -1993,12 +1989,12 @@ Toggle.displayName = "Toggle";
 // src/components/Badge.tsx
 var import_jsx_runtime87 = require("react/jsx-runtime");
 var variantStyles2 = {
-  default: "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200",
-  primary: "bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200",
-  success: "bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200",
-  warning: "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200",
-  error: "bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200",
-  info: "bg-cyan-100 dark:bg-cyan-900/30 text-cyan-800 dark:text-cyan-200"
+  default: "bg-[hsl(var(--secondary))] text-[hsl(var(--secondary-foreground))]",
+  primary: "bg-[hsl(var(--primary))]/10 text-[hsl(var(--primary))]",
+  success: "bg-[hsl(var(--success))]/10 text-[hsl(var(--success))]",
+  warning: "bg-[hsl(var(--warning))]/10 text-[hsl(var(--warning))]",
+  error: "bg-[hsl(var(--destructive))]/10 text-[hsl(var(--destructive))]",
+  info: "bg-[hsl(var(--info))]/10 text-[hsl(var(--info))]"
 };
 var sizeStyles = {
   sm: "px-2 py-0.5 text-xs",
@@ -2011,7 +2007,6 @@ var Badge = ({
   size = "md",
   className = ""
 }) => {
-  const { theme } = useTheme();
   const variantClass = variantStyles2[variant];
   const sizeClass = sizeStyles[size];
   return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: `inline-flex items-center font-medium rounded-full ${variantClass} ${sizeClass} ${className}`, children });
@@ -2026,8 +2021,8 @@ var sizeClasses6 = {
   xl: "w-16 h-16 border-4"
 };
 var colorClasses = {
-  primary: "border-blue-600 border-t-transparent",
-  secondary: "border-gray-600 border-t-transparent",
+  primary: "border-[hsl(var(--primary))] border-t-transparent",
+  secondary: "border-[hsl(var(--muted-foreground))] border-t-transparent",
   white: "border-white border-t-transparent"
 };
 var Spinner = ({
@@ -2035,7 +2030,6 @@ var Spinner = ({
   color = "primary",
   className = ""
 }) => {
-  const { theme } = useTheme();
   const sizeClass = sizeClasses6[size];
   const colorClass = colorClasses[color];
   return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
@@ -2058,7 +2052,6 @@ var Tabs = ({
   onChange,
   className = ""
 }) => {
-  const { theme } = useTheme();
   const [activeIndex, setActiveIndex] = (0, import_react12.useState)(defaultIndex);
   const handleTabClick = (index) => {
     if (tabs[index].disabled) return;
@@ -2066,12 +2059,12 @@ var Tabs = ({
     onChange?.(index);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("nav", { className: "flex gap-8 px-6", "aria-label": "Tabs", children: tabs.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "border-b border-[hsl(var(--border))]", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("nav", { className: "flex gap-6", "aria-label": "Tabs", children: tabs.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
       "button",
       {
         onClick: () => handleTabClick(index),
         disabled: tab.disabled,
-        className: `py-4 px-1 border-b-2 font-medium text-sm transition-colors ${activeIndex === index ? "border-blue-600 text-blue-600 dark:text-blue-400" : "border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600"} ${tab.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
+        className: `py-3 px-1 border-b-2 font-medium text-sm transition-colors ${activeIndex === index ? "border-[hsl(var(--primary))] text-[hsl(var(--foreground))]" : "border-transparent text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] hover:border-[hsl(var(--border))]"} ${tab.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
         "aria-current": activeIndex === index ? "page" : void 0,
         children: tab.label
       },
@@ -2092,26 +2085,25 @@ function Table({
   className = "",
   responsive = true
 }) {
-  const { theme } = useTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: `${responsive ? "hidden md:block" : ""} overflow-x-auto`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("table", { className: "w-full text-left", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("thead", { className: "bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("tr", { children: columns.map((column, colIndex) => {
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("thead", { className: "bg-[hsl(var(--muted))] border-b border-[hsl(var(--border))]", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("tr", { children: columns.map((column, colIndex) => {
           const isLast = colIndex === columns.length - 1;
           return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             "th",
             {
-              className: isLast ? "px-6 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider relative" : "px-6 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider",
+              className: isLast ? "px-6 py-3 text-xs font-medium text-[hsl(var(--muted-foreground))] uppercase tracking-wider relative" : "px-6 py-3 text-xs font-medium text-[hsl(var(--muted-foreground))] uppercase tracking-wider",
               style: { width: column.width },
               children: column.title
             },
             column.key
           );
         }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("tbody", { className: "bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700", children: data.map((row, rowIndex) => {
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("tbody", { className: "bg-[hsl(var(--card))] divide-y divide-[hsl(var(--border))]", children: data.map((row, rowIndex) => {
           const rowClasses = [
-            striped && rowIndex % 2 === 1 ? "bg-gray-50 dark:bg-gray-800/50" : "",
-            hoverable ? "hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" : ""
+            striped && rowIndex % 2 === 1 ? "bg-[hsl(var(--muted))]/50" : "",
+            hoverable ? "hover:bg-[hsl(var(--muted))] transition-colors" : ""
           ].filter(Boolean).join(" ");
           return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             "tr",
@@ -2122,7 +2114,7 @@ function Table({
                 return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
                   "td",
                   {
-                    className: isLast ? "px-6 py-4 text-sm text-gray-900 dark:text-gray-100 overflow-visible" : "px-6 py-4 text-sm text-gray-900 dark:text-gray-100",
+                    className: isLast ? "px-6 py-4 text-sm text-[hsl(var(--foreground))] overflow-visible" : "px-6 py-4 text-sm text-[hsl(var(--foreground))]",
                     children: column.render ? column.render(row[column.key], row, rowIndex) : row[column.key]
                   },
                   column.key
@@ -2133,12 +2125,12 @@ function Table({
           );
         }) })
       ] }),
-      data.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-center py-8 text-gray-500 dark:text-gray-400", children: "No data available" })
+      data.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-center py-8 text-[hsl(var(--muted-foreground))]", children: "No data available" })
     ] }),
     responsive && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "md:hidden space-y-3", children: [
       data.map((row, rowIndex) => {
         const cardClasses = [
-          "bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-sm",
+          "bg-[hsl(var(--card))] border border-[hsl(var(--border))] rounded-[--radius] p-4 shadow-sm",
           hoverable ? "hover:shadow-md transition-shadow" : "",
           "relative isolate"
           // Ensure cards are isolated layers
@@ -2150,10 +2142,10 @@ function Table({
             children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
               "div",
               {
-                className: "flex justify-between items-start py-2 border-b border-gray-100 dark:border-gray-800 last:border-b-0",
+                className: "flex justify-between items-start py-2 border-b border-[hsl(var(--border))]/50 last:border-b-0",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider flex-shrink-0 mr-4", children: column.title }),
-                  /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "text-sm text-gray-900 dark:text-gray-100 text-right", children: column.render ? column.render(row[column.key], row, rowIndex) : row[column.key] })
+                  /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "text-xs font-medium text-[hsl(var(--muted-foreground))] uppercase tracking-wider flex-shrink-0 mr-4", children: column.title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "text-sm text-[hsl(var(--foreground))] text-right", children: column.render ? column.render(row[column.key], row, rowIndex) : row[column.key] })
                 ]
               },
               column.key
@@ -2162,7 +2154,7 @@ function Table({
           row[keyField] || rowIndex
         );
       }),
-      data.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-center py-8 text-gray-500 dark:text-gray-400", children: "No data available" })
+      data.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-center py-8 text-[hsl(var(--muted-foreground))]", children: "No data available" })
     ] })
   ] });
 }
@@ -2176,7 +2168,6 @@ var Pagination = ({
   siblingCount = 1,
   className = ""
 }) => {
-  const { theme } = useTheme();
   const range = (start, end) => {
     const length = end - start + 1;
     return Array.from({ length }, (_, idx) => idx + start);
@@ -2215,7 +2206,7 @@ var Pagination = ({
       {
         onClick: () => onPageChange(currentPage - 1),
         disabled: currentPage === 1,
-        className: "px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+        className: "px-3 py-2 rounded-md text-sm font-medium text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))] disabled:opacity-50 disabled:pointer-events-none transition-colors",
         "aria-label": "Previous page",
         children: "Previous"
       }
@@ -2225,7 +2216,7 @@ var Pagination = ({
         return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           "span",
           {
-            className: "px-3 py-2 text-gray-700 dark:text-gray-300",
+            className: "px-3 py-2 text-[hsl(var(--muted-foreground))]",
             children: "..."
           },
           `dots-${index}`
@@ -2235,7 +2226,7 @@ var Pagination = ({
         "button",
         {
           onClick: () => onPageChange(page),
-          className: `px-3 py-2 rounded-md text-sm font-medium transition-colors ${currentPage === page ? "bg-blue-600 text-white" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"}`,
+          className: `px-3 py-2 rounded-md text-sm font-medium transition-colors ${currentPage === page ? "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]" : "text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))]"}`,
           "aria-label": `Page ${page}`,
           "aria-current": currentPage === page ? "page" : void 0,
           children: page
@@ -2248,7 +2239,7 @@ var Pagination = ({
       {
         onClick: () => onPageChange(currentPage + 1),
         disabled: currentPage === totalPages,
-        className: "px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+        className: "px-3 py-2 rounded-md text-sm font-medium text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))] disabled:opacity-50 disabled:pointer-events-none transition-colors",
         "aria-label": "Next page",
         children: "Next"
       }
@@ -2287,7 +2278,6 @@ var DatePicker = ({
   className = "",
   placeholder = "Select date..."
 }) => {
-  const { theme } = useTheme();
   const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
   const [viewDate, setViewDate] = (0, import_react13.useState)(value || /* @__PURE__ */ new Date());
   const [mounted, setMounted] = (0, import_react13.useState)(false);
@@ -2377,14 +2367,14 @@ var DatePicker = ({
       year: "numeric"
     });
   };
-  const baseStyles = "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 text-base transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500 cursor-pointer";
-  const errorStyles = error ? "border-red-500 focus:ring-red-500 dark:border-red-500" : "";
-  const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900" : "";
+  const baseStyles = "w-full appearance-none rounded-md border border-[hsl(var(--input))] bg-transparent text-[hsl(var(--foreground))] px-4 py-2.5 text-sm transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 focus:border-[hsl(var(--ring))] hover:border-[hsl(var(--muted-foreground))] cursor-pointer";
+  const errorStyles = error ? "border-[hsl(var(--destructive))] focus:ring-[hsl(var(--destructive))]/50" : "";
+  const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-[hsl(var(--muted))]" : "";
   const calendar = isOpen && mounted && calendarPosition ? /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
     "div",
     {
       ref: calendarRef,
-      className: "fixed z-[9999] bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-xl p-4",
+      className: "fixed z-[9999] bg-[hsl(var(--popover))] rounded-md border border-[hsl(var(--border))] shadow-lg p-4",
       style: {
         top: `${calendarPosition.top}px`,
         left: `${calendarPosition.left}px`,
@@ -2396,13 +2386,13 @@ var DatePicker = ({
             "button",
             {
               onClick: handlePrevMonth,
-              className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
+              className: "p-2 hover:bg-[hsl(var(--accent))] rounded-md transition-colors",
               "aria-label": "Previous month",
-              children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("svg", { className: "w-5 h-5 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("h2", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("h2", { className: "text-base font-semibold text-[hsl(var(--foreground))]", children: [
               MONTHS[month],
               " ",
               year
@@ -2411,7 +2401,7 @@ var DatePicker = ({
               "button",
               {
                 onClick: handleToday,
-                className: "px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors",
+                className: "px-2 py-1 text-xs bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] rounded-md hover:bg-[hsl(var(--primary))]/90 transition-colors",
                 children: "Today"
               }
             )
@@ -2420,13 +2410,13 @@ var DatePicker = ({
             "button",
             {
               onClick: handleNextMonth,
-              className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
+              className: "p-2 hover:bg-[hsl(var(--accent))] rounded-md transition-colors",
               "aria-label": "Next month",
-              children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("svg", { className: "w-5 h-5 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-1", children: day }, day)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "text-center text-xs font-semibold text-[hsl(var(--muted-foreground))] py-1", children: day }, day)) }),
         /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
           const isCurrentMonthDay = isCurrentMonth(date);
           const isTodayDay = isToday(date);
@@ -2438,11 +2428,11 @@ var DatePicker = ({
               onClick: () => handleDateClick(date),
               disabled: isDisabledDay,
               className: `
-                aspect-square p-1 rounded-lg text-sm font-medium transition-all
-                ${!isCurrentMonthDay ? "text-gray-400 dark:text-gray-600" : "text-gray-900 dark:text-gray-100"}
-                ${isTodayDay && !isSelectedDay ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-bold" : ""}
-                ${isSelectedDay ? "bg-blue-600 text-white hover:bg-blue-700" : ""}
-                ${!isSelectedDay && !isDisabledDay ? "hover:bg-gray-100 dark:hover:bg-gray-700" : ""}
+                aspect-square p-1 rounded-md text-sm font-medium transition-all
+                ${!isCurrentMonthDay ? "text-[hsl(var(--muted-foreground))]/50" : "text-[hsl(var(--foreground))]"}
+                ${isTodayDay && !isSelectedDay ? "bg-[hsl(var(--accent))] text-[hsl(var(--primary))] font-bold" : ""}
+                ${isSelectedDay ? "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] hover:bg-[hsl(var(--primary))]/90" : ""}
+                ${!isSelectedDay && !isDisabledDay ? "hover:bg-[hsl(var(--accent))]" : ""}
                 ${isDisabledDay ? "opacity-30 cursor-not-allowed" : "cursor-pointer"}
               `,
               children: date.getDate()
@@ -2454,7 +2444,7 @@ var DatePicker = ({
     }
   ) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-1.5", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
       "div",
       {
@@ -2462,13 +2452,13 @@ var DatePicker = ({
         onClick: () => !disabled && setIsOpen(!isOpen),
         className: `${baseStyles} ${errorStyles} ${disabledStyles} flex items-center justify-between`.trim(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: !value ? "text-gray-500 dark:text-gray-400" : "", children: value ? formatDate2(value) : placeholder }),
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("svg", { className: "w-5 h-5 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: !value ? "text-[hsl(var(--muted-foreground))]" : "", children: value ? formatDate2(value) : placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("svg", { className: "w-5 h-5 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
         ]
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
-    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("p", { className: "mt-1.5 text-sm text-[hsl(var(--destructive))]", children: error }),
+    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("p", { className: "mt-1.5 text-sm text-[hsl(var(--muted-foreground))]", children: helperText }),
     mounted && (0, import_react_dom2.createPortal)(calendar, document.body)
   ] });
 };
@@ -2479,12 +2469,11 @@ var import_react14 = require("react");
 var import_jsx_runtime93 = require("react/jsx-runtime");
 var TimePicker = (0, import_react14.forwardRef)(
   ({ label, error, helperText, className = "", disabled, ...props }, ref) => {
-    const { theme } = useTheme();
-    const baseStyles = "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 text-base transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500";
-    const errorStyles = error ? "border-red-500 focus:ring-red-500 dark:border-red-500" : "";
-    const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900" : "";
+    const baseStyles = "w-full appearance-none rounded-md border border-[hsl(var(--input))] bg-transparent text-[hsl(var(--foreground))] px-3 py-2.5 text-sm transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 focus:border-[hsl(var(--ring))] hover:border-[hsl(var(--muted-foreground))]";
+    const errorStyles = error ? "border-[hsl(var(--destructive))] focus:ring-[hsl(var(--destructive))]/50" : "";
+    const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-[hsl(var(--muted))]" : "";
     return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-1.5", children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
         "input",
         {
@@ -2495,8 +2484,8 @@ var TimePicker = (0, import_react14.forwardRef)(
           ...props
         }
       ),
-      error && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
-      helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+      error && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("p", { className: "mt-1.5 text-sm text-[hsl(var(--destructive))]", children: error }),
+      helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("p", { className: "mt-1.5 text-sm text-[hsl(var(--muted-foreground))]", children: helperText })
     ] });
   }
 );
@@ -2521,6 +2510,7 @@ var MONTHS2 = [
   "November",
   "December"
 ];
+var SHORT_MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 var DateTimePicker = ({
   label,
   error,
@@ -2533,7 +2523,6 @@ var DateTimePicker = ({
   className = "",
   placeholder = "Select date and time..."
 }) => {
-  const { theme } = useTheme();
   const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
   const [viewDate, setViewDate] = (0, import_react15.useState)(value || /* @__PURE__ */ new Date());
   const [selectedTime, setSelectedTime] = (0, import_react15.useState)(
@@ -2644,14 +2633,15 @@ var DateTimePicker = ({
   };
   const formatDateTime = (date) => {
     if (!date) return "";
-    return date.toLocaleString("en-US", {
-      month: "short",
-      day: "numeric",
-      year: "numeric",
-      hour: "numeric",
-      minute: "2-digit",
-      hour12: true
-    });
+    const monthStr = SHORT_MONTHS[date.getMonth()];
+    const day = date.getDate();
+    const yearNum = date.getFullYear();
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    const period = hours >= 12 ? "PM" : "AM";
+    const displayHours = hours % 12 || 12;
+    const displayMinutes = minutes.toString().padStart(2, "0");
+    return `${monthStr} ${day}, ${yearNum}, ${displayHours}:${displayMinutes} ${period}`;
   };
   const formatTime = (hours, minutes) => {
     const period = hours >= 12 ? "PM" : "AM";
@@ -2659,14 +2649,14 @@ var DateTimePicker = ({
     const displayMinutes = minutes.toString().padStart(2, "0");
     return `${displayHours}:${displayMinutes} ${period}`;
   };
-  const baseStyles = "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 text-base transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500 cursor-pointer";
-  const errorStyles = error ? "border-red-500 focus:ring-red-500 dark:border-red-500" : "";
-  const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900" : "";
+  const baseStyles = "w-full appearance-none rounded-md border border-[hsl(var(--input))] bg-transparent text-[hsl(var(--foreground))] px-4 py-2.5 text-sm transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 focus:border-[hsl(var(--ring))] hover:border-[hsl(var(--muted-foreground))] cursor-pointer";
+  const errorStyles = error ? "border-[hsl(var(--destructive))] focus:ring-[hsl(var(--destructive))]/50" : "";
+  const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-[hsl(var(--muted))]" : "";
   const picker = isOpen && mounted && pickerPosition ? /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
     "div",
     {
       ref: pickerRef,
-      className: "fixed z-[9999] bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-xl p-4",
+      className: "fixed z-[9999] bg-[hsl(var(--popover))] rounded-md border border-[hsl(var(--border))] shadow-lg p-4",
       style: {
         top: `${pickerPosition.top}px`,
         left: `${pickerPosition.left}px`,
@@ -2678,13 +2668,13 @@ var DateTimePicker = ({
             "button",
             {
               onClick: handlePrevMonth,
-              className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
+              className: "p-2 hover:bg-[hsl(var(--accent))] rounded-md transition-colors",
               "aria-label": "Previous month",
-              children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("svg", { className: "w-5 h-5 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("h2", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("h2", { className: "text-base font-semibold text-[hsl(var(--foreground))]", children: [
               MONTHS2[month],
               " ",
               year
@@ -2693,7 +2683,7 @@ var DateTimePicker = ({
               "button",
               {
                 onClick: handleToday,
-                className: "px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors",
+                className: "px-2 py-1 text-xs bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] rounded-md hover:bg-[hsl(var(--primary))]/90 transition-colors",
                 children: "Now"
               }
             )
@@ -2702,13 +2692,13 @@ var DateTimePicker = ({
             "button",
             {
               onClick: handleNextMonth,
-              className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
+              className: "p-2 hover:bg-[hsl(var(--accent))] rounded-md transition-colors",
               "aria-label": "Next month",
-              children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("svg", { className: "w-5 h-5 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS2.map((day) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-1", children: day }, day)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS2.map((day) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "text-center text-xs font-semibold text-[hsl(var(--muted-foreground))] py-1", children: day }, day)) }),
         /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-4", children: calendarDays.map((date, index) => {
           const isCurrentMonthDay = isCurrentMonth(date);
           const isTodayDay = isToday(date);
@@ -2720,11 +2710,11 @@ var DateTimePicker = ({
               onClick: () => handleDateClick(date),
               disabled: isDisabledDay,
               className: `
-                aspect-square p-1 rounded-lg text-sm font-medium transition-all
-                ${!isCurrentMonthDay ? "text-gray-400 dark:text-gray-600" : "text-gray-900 dark:text-gray-100"}
-                ${isTodayDay && !isSelectedDay ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-bold" : ""}
-                ${isSelectedDay ? "bg-blue-600 text-white hover:bg-blue-700" : ""}
-                ${!isSelectedDay && !isDisabledDay ? "hover:bg-gray-100 dark:hover:bg-gray-700" : ""}
+                aspect-square p-1 rounded-md text-sm font-medium transition-all
+                ${!isCurrentMonthDay ? "text-[hsl(var(--muted-foreground))]/50" : "text-[hsl(var(--foreground))]"}
+                ${isTodayDay && !isSelectedDay ? "bg-[hsl(var(--accent))] text-[hsl(var(--primary))] font-bold" : ""}
+                ${isSelectedDay ? "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] hover:bg-[hsl(var(--primary))]/90" : ""}
+                ${!isSelectedDay && !isDisabledDay ? "hover:bg-[hsl(var(--accent))]" : ""}
                 ${isDisabledDay ? "opacity-30 cursor-not-allowed" : "cursor-pointer"}
               `,
               children: date.getDate()
@@ -2732,18 +2722,18 @@ var DateTimePicker = ({
             index
           );
         }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "border-t border-gray-200 dark:border-gray-700 pt-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "border-t border-[hsl(var(--border))] pt-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex items-center justify-center gap-4 mb-4", children: [
             /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex flex-col items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("label", { className: "text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2", children: "Hour" }),
+              /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("label", { className: "text-xs font-semibold text-[hsl(var(--muted-foreground))] mb-2", children: "Hour" }),
               /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
                   "button",
                   {
                     type: "button",
                     onClick: () => handleTimeChange((selectedTime.hours + 1) % 24, selectedTime.minutes),
-                    className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("svg", { className: "w-4 h-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) })
+                    className: "p-1 hover:bg-[hsl(var(--accent))] rounded transition-colors",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("svg", { className: "w-4 h-4 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) })
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
@@ -2759,7 +2749,7 @@ var DateTimePicker = ({
                         handleTimeChange(val, selectedTime.minutes);
                       }
                     },
-                    className: "w-16 px-2 py-2 text-center border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 text-lg font-semibold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                    className: "w-16 px-2 py-2 text-center border border-[hsl(var(--input))] rounded-md bg-transparent text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 text-lg font-semibold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
@@ -2767,23 +2757,23 @@ var DateTimePicker = ({
                   {
                     type: "button",
                     onClick: () => handleTimeChange((selectedTime.hours - 1 + 24) % 24, selectedTime.minutes),
-                    className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("svg", { className: "w-4 h-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+                    className: "p-1 hover:bg-[hsl(var(--accent))] rounded transition-colors",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("svg", { className: "w-4 h-4 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
                   }
                 )
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "text-2xl font-bold text-gray-600 dark:text-gray-400 mt-8", children: ":" }),
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "text-2xl font-bold text-[hsl(var(--muted-foreground))] mt-8", children: ":" }),
             /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex flex-col items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("label", { className: "text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2", children: "Minute" }),
+              /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("label", { className: "text-xs font-semibold text-[hsl(var(--muted-foreground))] mb-2", children: "Minute" }),
               /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
                   "button",
                   {
                     type: "button",
                     onClick: () => handleTimeChange(selectedTime.hours, (selectedTime.minutes + 1) % 60),
-                    className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("svg", { className: "w-4 h-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) })
+                    className: "p-1 hover:bg-[hsl(var(--accent))] rounded transition-colors",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("svg", { className: "w-4 h-4 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) })
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
@@ -2799,7 +2789,7 @@ var DateTimePicker = ({
                         handleTimeChange(selectedTime.hours, val);
                       }
                     },
-                    className: "w-16 px-2 py-2 text-center border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 text-lg font-semibold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                    className: "w-16 px-2 py-2 text-center border border-[hsl(var(--input))] rounded-md bg-transparent text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 text-lg font-semibold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
@@ -2807,19 +2797,19 @@ var DateTimePicker = ({
                   {
                     type: "button",
                     onClick: () => handleTimeChange(selectedTime.hours, (selectedTime.minutes - 1 + 60) % 60),
-                    className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("svg", { className: "w-4 h-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+                    className: "p-1 hover:bg-[hsl(var(--accent))] rounded transition-colors",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("svg", { className: "w-4 h-4 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
                   }
                 )
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "text-center text-sm text-gray-600 dark:text-gray-400 mb-4", children: formatTime(selectedTime.hours, selectedTime.minutes) }),
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "text-center text-sm text-[hsl(var(--muted-foreground))] mb-4", children: formatTime(selectedTime.hours, selectedTime.minutes) }),
           /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
             "button",
             {
               onClick: handleDone,
-              className: "w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium",
+              className: "w-full px-4 py-2 bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] rounded-md hover:bg-[hsl(var(--primary))]/90 transition-colors font-medium",
               children: "Done"
             }
           )
@@ -2828,7 +2818,7 @@ var DateTimePicker = ({
     }
   ) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-1.5", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
       "div",
       {
@@ -2836,13 +2826,13 @@ var DateTimePicker = ({
         onClick: () => !disabled && setIsOpen(!isOpen),
         className: `${baseStyles} ${errorStyles} ${disabledStyles} flex items-center justify-between`.trim(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: !value ? "text-gray-500 dark:text-gray-400" : "", children: value ? formatDateTime(value) : placeholder }),
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("svg", { className: "w-5 h-5 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: !value ? "text-[hsl(var(--muted-foreground))]" : "", children: value ? formatDateTime(value) : placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("svg", { className: "w-5 h-5 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
         ]
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
-    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("p", { className: "mt-1.5 text-sm text-[hsl(var(--destructive))]", children: error }),
+    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("p", { className: "mt-1.5 text-sm text-[hsl(var(--muted-foreground))]", children: helperText }),
     mounted && (0, import_react_dom3.createPortal)(picker, document.body)
   ] });
 };
@@ -2873,7 +2863,6 @@ var Calendar = ({
   maxDate,
   className = ""
 }) => {
-  const { theme } = useTheme();
   const [currentDate, setCurrentDate] = (0, import_react16.useState)(value || /* @__PURE__ */ new Date());
   const [viewDate, setViewDate] = (0, import_react16.useState)(value || /* @__PURE__ */ new Date());
   const year = viewDate.getFullYear();
@@ -2926,19 +2915,19 @@ var Calendar = ({
     setCurrentDate(today);
     onChange?.(today);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: `bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 ${className}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: `bg-[hsl(var(--card))] rounded-md border border-[hsl(var(--border))] p-4 ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         "button",
         {
           onClick: handlePrevMonth,
-          className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
+          className: "p-2 hover:bg-[hsl(var(--accent))] rounded-md transition-colors",
           "aria-label": "Previous month",
-          children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("svg", { className: "w-5 h-5 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("h2", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("h2", { className: "text-lg font-semibold text-[hsl(var(--foreground))]", children: [
           MONTHS3[month],
           " ",
           year
@@ -2947,7 +2936,7 @@ var Calendar = ({
           "button",
           {
             onClick: handleToday,
-            className: "px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors",
+            className: "px-3 py-1 text-sm bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] rounded-md hover:bg-[hsl(var(--primary))]/90 transition-colors",
             children: "Today"
           }
         )
@@ -2956,16 +2945,16 @@ var Calendar = ({
         "button",
         {
           onClick: handleNextMonth,
-          className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
+          className: "p-2 hover:bg-[hsl(var(--accent))] rounded-md transition-colors",
           "aria-label": "Next month",
-          children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("svg", { className: "w-5 h-5 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
         }
       )
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS3.map((day) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
       "div",
       {
-        className: "text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-2",
+        className: "text-center text-xs font-semibold text-[hsl(var(--muted-foreground))] py-2",
         children: day
       },
       day
@@ -2982,11 +2971,11 @@ var Calendar = ({
           onClick: () => handleDateClick(date),
           disabled: isDisabledDay,
           className: `
-                aspect-square p-2 rounded-lg text-sm font-medium transition-all
-                ${!isCurrentMonthDay ? "text-gray-400 dark:text-gray-600" : "text-gray-900 dark:text-gray-100"}
-                ${isTodayDay && !isSelectedDay ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-bold" : ""}
-                ${isSelectedDay ? "bg-blue-600 text-white hover:bg-blue-700" : ""}
-                ${!isSelectedDay && !isDisabledDay ? "hover:bg-gray-100 dark:hover:bg-gray-700" : ""}
+                aspect-square p-2 rounded-md text-sm font-medium transition-all
+                ${!isCurrentMonthDay ? "text-[hsl(var(--muted-foreground))]/50" : "text-[hsl(var(--foreground))]"}
+                ${isTodayDay && !isSelectedDay ? "bg-[hsl(var(--accent))] text-[hsl(var(--primary))] font-bold" : ""}
+                ${isSelectedDay ? "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] hover:bg-[hsl(var(--primary))]/90" : ""}
+                ${!isSelectedDay && !isDisabledDay ? "hover:bg-[hsl(var(--accent))]" : ""}
                 ${isDisabledDay ? "opacity-30 cursor-not-allowed" : "cursor-pointer"}
               `,
           children: date.getDate()
@@ -3043,13 +3032,13 @@ var Radio = ({
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: `w-4 h-4 rounded-full border-2 transition-all duration-200 flex items-center justify-center
-                border-gray-300 dark:border-gray-600
-                ${isDisabled ? "bg-gray-100 dark:bg-gray-800" : "peer-hover:border-gray-400 dark:peer-hover:border-gray-500"}
-                ${isChecked ? "border-blue-600 bg-white dark:bg-gray-900" : ""}
-                peer-focus:ring-2 peer-focus:ring-blue-500 peer-focus:ring-offset-2
-              `, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: `w-2 h-2 rounded-full bg-blue-600 transition-all duration-200 ${isChecked ? "scale-100" : "scale-0"}` }) })
+                border-[hsl(var(--input))]
+                ${isDisabled ? "bg-[hsl(var(--muted))]" : "peer-hover:border-[hsl(var(--ring))]"}
+                ${isChecked ? "border-[hsl(var(--primary))] bg-[hsl(var(--background))]" : ""}
+                peer-focus:ring-1 peer-focus:ring-[hsl(var(--ring))]/50
+              `, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: `w-2 h-2 rounded-full bg-[hsl(var(--primary))] transition-all duration-200 ${isChecked ? "scale-100" : "scale-0"}` }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: `text-sm font-medium text-gray-900 dark:text-gray-300 ${!isDisabled && "group-hover:text-gray-700 dark:group-hover:text-gray-100"}`, children: option.label })
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: `text-sm font-medium text-[hsl(var(--foreground))] ${!isDisabled && "group-hover:text-[hsl(var(--foreground))]"}`, children: option.label })
         ]
       },
       option.value
@@ -3075,15 +3064,15 @@ var ProgressBar = ({
     lg: "h-3"
   };
   const variantClasses = {
-    default: "bg-blue-600 dark:bg-blue-500",
-    success: "bg-green-600 dark:bg-green-500",
-    warning: "bg-yellow-500 dark:bg-yellow-400",
-    danger: "bg-red-600 dark:bg-red-500"
+    default: "bg-[hsl(var(--primary))]",
+    success: "bg-[hsl(var(--success))]",
+    warning: "bg-[hsl(var(--warning))]",
+    danger: "bg-[hsl(var(--destructive))]"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: `w-full ${className}`, children: [
     (showLabel || label) && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex justify-between items-center mb-1", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
-      showLabel && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "text-sm font-medium text-[hsl(var(--foreground))]", children: label }),
+      showLabel && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("span", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))]", children: [
         Math.round(percentage),
         "%"
       ] })
@@ -3091,7 +3080,7 @@ var ProgressBar = ({
     /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
       "div",
       {
-        className: `w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden ${sizeClasses7[size]}`,
+        className: `w-full bg-[hsl(var(--muted))] rounded-full overflow-hidden ${sizeClasses7[size]}`,
         role: "progressbar",
         "aria-valuenow": value,
         "aria-valuemin": 0,
@@ -3198,19 +3187,19 @@ var Slider = ({
   if (range) {
     return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: `w-full ${className}`, children: [
       (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex justify-between items-center mb-2", children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
-        showValue && /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("label", { className: "text-sm font-medium text-[hsl(var(--foreground))]", children: label }),
+        showValue && /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("span", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))]", children: [
           rangeValue[0],
           " - ",
           rangeValue[1]
         ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "relative h-10 flex items-center", ref: trackRef, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "absolute w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full" }),
+        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "absolute w-full h-2 bg-[hsl(var(--muted))] rounded-full" }),
         /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
           "div",
           {
-            className: "absolute h-2 bg-blue-600 dark:bg-blue-500 rounded-full pointer-events-none",
+            className: "absolute h-2 bg-[hsl(var(--primary))] rounded-full pointer-events-none",
             style: {
               left: `${minPercentage}%`,
               width: `${maxPercentage - minPercentage}%`
@@ -3220,7 +3209,7 @@ var Slider = ({
         /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
           "div",
           {
-            className: `absolute w-4 h-4 -ml-2 rounded-sm bg-white dark:bg-gray-800 border-2 border-blue-600 shadow-md cursor-pointer z-10
+            className: `absolute w-4 h-4 -ml-2 rounded-full bg-[hsl(var(--background))] border-2 border-[hsl(var(--primary))] shadow-md cursor-pointer z-10
               ${disabled ? "opacity-50 cursor-not-allowed" : ""}
             `,
             style: { left: `${minPercentage}%` },
@@ -3237,7 +3226,7 @@ var Slider = ({
         /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
           "div",
           {
-            className: `absolute w-4 h-4 -ml-2 rounded-sm bg-white dark:bg-gray-800 border-2 border-blue-600 shadow-md cursor-pointer z-10
+            className: `absolute w-4 h-4 -ml-2 rounded-full bg-[hsl(var(--background))] border-2 border-[hsl(var(--primary))] shadow-md cursor-pointer z-10
               ${disabled ? "opacity-50 cursor-not-allowed" : ""}
             `,
             style: { left: `${maxPercentage}%` },
@@ -3256,22 +3245,22 @@ var Slider = ({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: `w-full ${className}`, children: [
     (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex justify-between items-center mb-2", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
-      showValue && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: value })
+      label && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("label", { className: "text-sm font-medium text-[hsl(var(--foreground))]", children: label }),
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))]", children: value })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "relative h-10 flex items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "absolute w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full" }),
+      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "absolute w-full h-2 bg-[hsl(var(--muted))] rounded-full" }),
       /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
         "div",
         {
-          className: "absolute h-2 bg-blue-600 dark:bg-blue-500 rounded-full pointer-events-none",
+          className: "absolute h-2 bg-[hsl(var(--primary))] rounded-full pointer-events-none",
           style: { width: `${percentage}%` }
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
         "div",
         {
-          className: `absolute w-4 h-4 -ml-2 rounded-sm bg-white dark:bg-gray-800 border-2 border-blue-600 shadow-md pointer-events-none z-10
+          className: `absolute w-4 h-4 -ml-2 rounded-full bg-[hsl(var(--background))] border-2 border-[hsl(var(--primary))] shadow-md pointer-events-none z-10
             ${disabled ? "opacity-50" : ""}
           `,
           style: { left: `${percentage}%` }
@@ -3287,7 +3276,7 @@ var Slider = ({
           value,
           onChange: handleChange,
           disabled,
-          className: "relative w-full h-10 bg-transparent appearance-none cursor-pointer disabled:cursor-not-allowed z-20\n            [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4\n            [&::-webkit-slider-thumb]:rounded-sm [&::-webkit-slider-thumb]:bg-transparent [&::-webkit-slider-thumb]:cursor-pointer\n            [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-sm\n            [&::-moz-range-thumb]:bg-transparent [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-none",
+          className: "relative w-full h-10 bg-transparent appearance-none cursor-pointer disabled:cursor-not-allowed z-20\n            [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4\n            [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-transparent [&::-webkit-slider-thumb]:cursor-pointer\n            [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full\n            [&::-moz-range-thumb]:bg-transparent [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-none",
           "aria-label": label,
           "aria-valuemin": min,
           "aria-valuemax": max,
@@ -3308,7 +3297,7 @@ var Avatar = ({
   size = "md",
   shape = "circle",
   className = "",
-  fallbackColor = "bg-blue-600"
+  fallbackColor = "bg-[hsl(var(--primary))]"
 }) => {
   const [imageError, setImageError] = import_react19.default.useState(false);
   const sizeClasses7 = {
@@ -3331,7 +3320,7 @@ var Avatar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
     "div",
     {
-      className: `${sizeClasses7[size]} ${shapeClass} flex items-center justify-center overflow-hidden ${showImage ? "bg-gray-200 dark:bg-gray-700" : `${fallbackColor} text-white`} ${className}`,
+      className: `${sizeClasses7[size]} ${shapeClass} flex items-center justify-center overflow-hidden ${showImage ? "bg-[hsl(var(--muted))]" : `${fallbackColor} text-white`} ${className}`,
       children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
         "img",
         {
@@ -3343,7 +3332,7 @@ var Avatar = ({
       ) : showInitials ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: "font-semibold select-none", children: getInitials(name) }) : /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
         "svg",
         {
-          className: "w-full h-full text-gray-400 dark:text-gray-600",
+          className: "w-full h-full text-[hsl(var(--muted-foreground))]",
           fill: "currentColor",
           viewBox: "0 0 24 24",
           children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
@@ -3367,8 +3356,8 @@ var Textarea = ({
 }) => {
   const sizeClasses7 = {
     sm: "px-3 py-1.5 text-sm min-h-[80px]",
-    md: "px-4 py-2 text-base min-h-[100px]",
-    lg: "px-4 py-3 text-lg min-h-[120px]"
+    md: "px-3 py-2.5 text-sm min-h-[100px]",
+    lg: "px-4 py-3 text-base min-h-[120px]"
   };
   const resizeClasses = {
     none: "resize-none",
@@ -3376,13 +3365,13 @@ var Textarea = ({
     horizontal: "resize-x",
     both: "resize"
   };
-  const baseClasses = `w-full rounded-lg border transition-colors duration-150 focus:outline-none focus:ring-2
-    ${error ? "border-red-500 focus:ring-red-500 focus:border-red-500 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:focus:ring-blue-400"}
-    bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100
-    placeholder:text-gray-500 dark:placeholder:text-gray-400
-    disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 dark:disabled:bg-gray-900`;
+  const baseClasses = `w-full rounded-md border transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 focus:border-[hsl(var(--ring))]
+    ${error ? "border-[hsl(var(--destructive))] focus:ring-[hsl(var(--destructive))]/50" : "border-[hsl(var(--input))] hover:border-[hsl(var(--muted-foreground))]"}
+    bg-transparent text-[hsl(var(--foreground))]
+    placeholder:text-[hsl(var(--muted-foreground))]
+    disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[hsl(var(--muted))]`;
   return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: `w-full ${className}`, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-1.5", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
       "textarea",
       {
@@ -3391,8 +3380,8 @@ var Textarea = ({
         ...props
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
-    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+    error && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { className: "mt-1.5 text-sm text-[hsl(var(--destructive))]", children: error }),
+    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { className: "mt-1.5 text-sm text-[hsl(var(--muted-foreground))]", children: helperText })
   ] });
 };
 
@@ -3630,7 +3619,7 @@ var RichTextEditor = ({
     if (selection && selection.rangeCount > 0) {
       const range = selection.getRangeAt(0);
       const code = document.createElement("code");
-      code.className = "bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded text-sm font-mono";
+      code.className = "bg-[hsl(var(--muted))] px-1.5 py-0.5 rounded text-sm font-mono";
       try {
         range.surroundContents(code);
         handleInput();
@@ -3719,17 +3708,17 @@ var RichTextEditor = ({
     handleInput();
   }, [imageUrl, imageAlt, handleInput]);
   const getButtonClass = (isActive) => {
-    const baseClass = themeName === "minimalistic" ? "border border-white text-white transition-colors" : "border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 transition-colors";
-    const activeClass = themeName === "minimalistic" ? "bg-white text-black" : "bg-blue-100 dark:bg-blue-900 border-blue-500 dark:border-blue-400";
-    const hoverClass = themeName === "minimalistic" ? "hover:bg-white hover:text-black" : "hover:bg-gray-100 dark:hover:bg-gray-700";
+    const baseClass = themeName === "minimalistic" ? "border border-white text-white transition-colors" : "border border-[hsl(var(--input))] text-[hsl(var(--foreground))] transition-colors";
+    const activeClass = themeName === "minimalistic" ? "bg-white text-black" : "bg-[hsl(var(--primary))]/20 border-[hsl(var(--primary))]";
+    const hoverClass = themeName === "minimalistic" ? "hover:bg-white hover:text-black" : "hover:bg-[hsl(var(--accent))]";
     const disabledClass = disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer";
     return `px-2.5 py-1.5 rounded text-sm font-medium ${baseClass} ${isActive ? activeClass : hoverClass} ${disabledClass}`;
   };
-  const editorBaseClass = themeName === "minimalistic" ? "bg-transparent border-2 border-white text-white placeholder:text-gray-500" : "bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100";
-  const focusClass = isFocused && !disabled ? themeName === "minimalistic" ? "border-white" : "border-blue-500 dark:border-blue-400 ring-2 ring-blue-500/20" : "";
+  const editorBaseClass = themeName === "minimalistic" ? "bg-transparent border-2 border-white text-white placeholder:text-[hsl(var(--muted-foreground))]" : "bg-[hsl(var(--card))] border border-[hsl(var(--input))] text-[hsl(var(--foreground))]";
+  const focusClass = isFocused && !disabled ? themeName === "minimalistic" ? "border-white" : "border-[hsl(var(--primary))] ring-1 ring-[hsl(var(--ring))]/50" : "";
   const errorClass = error ? "border-red-500 dark:border-red-400" : "";
   return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: `w-full ${className}`, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: label }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-2", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: `rounded-t-lg border-b ${editorBaseClass} p-2 flex flex-wrap gap-1`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: "flex gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
@@ -3777,7 +3766,7 @@ var RichTextEditor = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: "w-px bg-gray-300 dark:bg-gray-600 mx-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: "w-px bg-[hsl(var(--border))] mx-1" }),
       /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: "flex gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
           "button",
@@ -3813,7 +3802,7 @@ var RichTextEditor = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: "w-px bg-gray-300 dark:bg-gray-600 mx-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: "w-px bg-[hsl(var(--border))] mx-1" }),
       /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: "flex gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
           "button",
@@ -3838,7 +3827,7 @@ var RichTextEditor = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: "w-px bg-gray-300 dark:bg-gray-600 mx-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: "w-px bg-[hsl(var(--border))] mx-1" }),
       /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: "flex gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
           "button",
@@ -3900,7 +3889,7 @@ var RichTextEditor = ({
       }
     ),
     error && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
-    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
+    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("p", { className: "mt-1 text-sm text-[hsl(var(--muted-foreground))]", children: helperText }),
     /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
       Modal,
       {
@@ -4059,31 +4048,31 @@ var ToastProvider = ({ children, position = "top-right" }) => {
 };
 var ToastItem = ({ toast: toast2, onClose }) => {
   const typeStyles = {
-    success: "bg-green-50 dark:bg-green-900/30 border-green-500 text-green-800 dark:text-green-200",
-    error: "bg-red-50 dark:bg-red-900/30 border-red-500 text-red-800 dark:text-red-200",
-    warning: "bg-yellow-50 dark:bg-yellow-900/30 border-yellow-500 text-yellow-800 dark:text-yellow-200",
-    info: "bg-blue-50 dark:bg-blue-900/30 border-blue-500 text-blue-800 dark:text-blue-200"
+    success: "bg-[hsl(var(--success))]/10 border-[hsl(var(--success))] text-[hsl(var(--success))]",
+    error: "bg-[hsl(var(--destructive))]/10 border-[hsl(var(--destructive))] text-[hsl(var(--destructive))]",
+    warning: "bg-[hsl(var(--warning))]/10 border-[hsl(var(--warning))] text-[hsl(var(--warning))]",
+    info: "bg-[hsl(var(--info))]/10 border-[hsl(var(--info))] text-[hsl(var(--info))]"
   };
   const typeIcons = {
-    success: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(CheckIcon, { size: "sm", className: "text-green-600 dark:text-green-400" }),
-    error: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(CloseIcon, { size: "sm", className: "text-red-600 dark:text-red-400" }),
-    warning: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("svg", { className: "w-4 h-4 text-yellow-600 dark:text-yellow-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
-    info: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("svg", { className: "w-4 h-4 text-blue-600 dark:text-blue-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) })
+    success: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(CheckIcon, { size: "sm", className: "text-[hsl(var(--success))]" }),
+    error: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(CloseIcon, { size: "sm", className: "text-[hsl(var(--destructive))]" }),
+    warning: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("svg", { className: "w-4 h-4 text-[hsl(var(--warning))]", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
+    info: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("svg", { className: "w-4 h-4 text-[hsl(var(--info))]", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) })
   };
   const type = toast2.type || "info";
   return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
     "div",
     {
-      className: `flex items-start gap-3 p-4 rounded-lg border-l-4 shadow-lg backdrop-blur-sm ${typeStyles[type]} animate-slide-in`,
+      className: `flex items-start gap-3 p-4 rounded-md border-l-4 shadow-lg bg-[hsl(var(--card))] ${typeStyles[type]} animate-slide-in`,
       role: "alert",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "flex-shrink-0 mt-0.5", children: typeIcons[type] }),
-        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: "flex-1 text-sm font-medium", children: toast2.message }),
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: "flex-1 text-sm font-medium text-[hsl(var(--foreground))]", children: toast2.message }),
         /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
           "button",
           {
             onClick: onClose,
-            className: "flex-shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors",
+            className: "flex-shrink-0 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors",
             "aria-label": "Close",
             children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(CloseIcon, { size: "sm" })
           }
@@ -4138,7 +4127,7 @@ var Stepper = ({
   };
   const shouldShowCounter = isHorizontal && steps.length > 3;
   return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: `${isHorizontal ? "flex items-start w-full" : "flex flex-col"} ${className}`, children: [
-    shouldShowCounter && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "md:hidden flex items-center mr-4 flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("span", { className: "text-sm font-medium text-gray-600 dark:text-gray-400", children: [
+    shouldShowCounter && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "md:hidden flex items-center mr-4 flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("span", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))]", children: [
       currentStep,
       "/",
       steps.length
@@ -4162,11 +4151,11 @@ var Stepper = ({
             /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
               "div",
               {
-                className: `flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all ${isCompleted ? "bg-blue-600 border-blue-600 dark:bg-blue-500 dark:border-blue-500" : isActive ? "border-blue-600 bg-white dark:border-blue-500 dark:bg-gray-800" : "border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800"}`,
-                children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(CheckIcon, { size: "sm", className: "text-white" }) : /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+                className: `flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all ${isCompleted ? "bg-[hsl(var(--primary))] border-[hsl(var(--primary))]" : isActive ? "border-[hsl(var(--primary))] bg-[hsl(var(--background))]" : "border-[hsl(var(--border))] bg-[hsl(var(--background))]"}`,
+                children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(CheckIcon, { size: "sm", className: "text-[hsl(var(--primary-foreground))]" }) : /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
                   "span",
                   {
-                    className: `text-sm font-semibold ${isActive ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"}`,
+                    className: `text-sm font-semibold ${isActive ? "text-[hsl(var(--primary))]" : "text-[hsl(var(--muted-foreground))]"}`,
                     children: stepNumber
                   }
                 )
@@ -4175,7 +4164,7 @@ var Stepper = ({
             !isLast && !isHorizontal && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
               "div",
               {
-                className: `w-0.5 flex-1 min-h-[24px] ${isCompleted ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-300 dark:bg-gray-600"}`
+                className: `w-0.5 flex-1 min-h-[24px] ${isCompleted ? "bg-[hsl(var(--primary))]" : "bg-[hsl(var(--border))]"}`
               }
             )
           ] }),
@@ -4183,11 +4172,11 @@ var Stepper = ({
             /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
               "p",
               {
-                className: `text-sm font-medium whitespace-nowrap ${isActive || isCompleted ? "text-gray-900 dark:text-gray-100" : "text-gray-500 dark:text-gray-400"}`,
+                className: `text-sm font-medium whitespace-nowrap ${isActive || isCompleted ? "text-[hsl(var(--foreground))]" : "text-[hsl(var(--muted-foreground))]"}`,
                 children: step.label
               }
             ),
-            step.description && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1 whitespace-nowrap", children: step.description })
+            step.description && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("p", { className: "text-xs text-[hsl(var(--muted-foreground))] mt-1 whitespace-nowrap", children: step.description })
           ] })
         ] }),
         !isLast && isHorizontal && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: `
@@ -4197,7 +4186,7 @@ var Stepper = ({
               `, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
           "div",
           {
-            className: `h-0.5 w-full ${isCompleted ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-300 dark:bg-gray-600"}`
+            className: `h-0.5 w-full ${isCompleted ? "bg-[hsl(var(--primary))]" : "bg-[hsl(var(--border))]"}`
           }
         ) })
       ] }, index);
@@ -4226,16 +4215,16 @@ var Divider = ({
       right: "justify-end"
     };
     return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: `flex items-center ${alignmentClasses[labelPosition]} ${className}`, role: "separator", children: [
-      labelPosition !== "left" && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: `flex-1 border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600` }),
-      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { className: "px-4 text-sm text-gray-500 dark:text-gray-400", children: label }),
-      labelPosition !== "right" && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: `flex-1 border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600` })
+      labelPosition !== "left" && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: `flex-1 border-t ${variantClasses[variant]} border-[hsl(var(--input))]` }),
+      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { className: "px-4 text-sm text-[hsl(var(--muted-foreground))]", children: label }),
+      labelPosition !== "right" && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: `flex-1 border-t ${variantClasses[variant]} border-[hsl(var(--input))]` })
     ] });
   }
   if (orientation === "vertical") {
     return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
       "div",
       {
-        className: `inline-block h-full border-l ${variantClasses[variant]} border-gray-300 dark:border-gray-600 ${className}`,
+        className: `inline-block h-full border-l ${variantClasses[variant]} border-[hsl(var(--input))] ${className}`,
         role: "separator",
         "aria-orientation": "vertical"
       }
@@ -4244,7 +4233,7 @@ var Divider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
     "hr",
     {
-      className: `border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600 ${className}`,
+      className: `border-t ${variantClasses[variant]} border-[hsl(var(--input))] ${className}`,
       role: "separator"
     }
   );
@@ -4326,7 +4315,7 @@ var FileUpload = ({
     onChange?.(newFiles);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: `w-full ${className}`, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: label }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-2", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
       "div",
       {
@@ -4334,7 +4323,7 @@ var FileUpload = ({
         onDragOver: handleDragOver,
         onDragLeave: handleDragLeave,
         onClick: handleClick,
-        className: `relative border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-all ${isDragging ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20" : "border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500"} ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
+        className: `relative border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-all ${isDragging ? "border-[hsl(var(--primary))] bg-[hsl(var(--primary))]/10" : "border-[hsl(var(--input))] hover:border-[hsl(var(--muted-foreground))]"} ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
             "input",
@@ -4349,13 +4338,13 @@ var FileUpload = ({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: "w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(UploadIcon, { size: "lg", className: "text-gray-400 dark:text-gray-500" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: "w-12 h-12 rounded-full bg-[hsl(var(--muted))] flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(UploadIcon, { size: "lg", className: "text-[hsl(var(--muted-foreground))]" }) }),
             /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { className: "text-blue-600 dark:text-blue-400", children: "Click to upload" }),
+              /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("p", { className: "text-sm font-medium text-[hsl(var(--foreground))]", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { className: "text-[hsl(var(--primary))]", children: "Click to upload" }),
                 " or drag and drop"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("p", { className: "text-xs text-[hsl(var(--muted-foreground))] mt-1", children: [
                 accept ? `Accepted: ${accept}` : "Any file type",
                 maxSize && ` \u2022 Max size: ${formatFileSize(maxSize)}`
               ] })
@@ -4364,15 +4353,15 @@ var FileUpload = ({
         ]
       }
     ),
-    helperText && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
+    helperText && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("p", { className: "mt-2 text-sm text-[hsl(var(--muted-foreground))]", children: helperText }),
     files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: "mt-4 space-y-2", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
       "div",
       {
-        className: "flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700",
+        className: "flex items-center justify-between p-3 bg-[hsl(var(--muted))] rounded-lg border border-[hsl(var(--border))]",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 truncate", children: file.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: formatFileSize(file.size) })
+            /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("p", { className: "text-sm font-medium text-[hsl(var(--foreground))] truncate", children: file.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("p", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: formatFileSize(file.size) })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
             "button",
@@ -4381,7 +4370,7 @@ var FileUpload = ({
                 e.stopPropagation();
                 handleRemoveFile(index);
               },
-              className: "ml-4 text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors",
+              className: "ml-4 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--destructive))] transition-colors",
               "aria-label": "Remove file",
               children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(CloseIcon, { size: "sm" })
             }
@@ -4580,7 +4569,7 @@ var AudioPlayer = ({
   };
   const progress = duration > 0 ? currentTime / duration * 100 : 0;
   if (variant === "mini") {
-    return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: `flex items-center gap-2 p-2 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 ${className}`, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: `flex items-center gap-2 p-2 bg-[hsl(var(--card))] rounded-lg border border-[hsl(var(--border))] ${className}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("audio", { ref: audioRef, src, preload, loop, autoPlay }),
       /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
         Button,
@@ -4594,11 +4583,11 @@ var AudioPlayer = ({
           children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(PauseIcon, { size: "sm" }) : /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(PlayIcon, { size: "sm" })
         }
       ),
-      title && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 truncate", children: title })
+      title && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-sm font-medium text-[hsl(var(--foreground))] truncate", children: title })
     ] });
   }
   if (variant === "compact") {
-    return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: `flex items-center gap-3 p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm ${className}`, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: `flex items-center gap-3 p-3 bg-[hsl(var(--card))] rounded-lg border border-[hsl(var(--border))] shadow-sm ${className}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("audio", { ref: audioRef, src, preload, loop, autoPlay }),
       /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
         Button,
@@ -4613,16 +4602,16 @@ var AudioPlayer = ({
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex-1 min-w-0", children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 truncate", children: title }),
-        artist && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "text-xs text-gray-500 dark:text-gray-400 truncate", children: artist })
+        title && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "text-sm font-medium text-[hsl(var(--foreground))] truncate", children: title }),
+        artist && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "text-xs text-[hsl(var(--muted-foreground))] truncate", children: artist })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex items-center gap-2 flex-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-xs text-gray-500 dark:text-gray-400 tabular-nums", children: formatTime(currentTime) }),
-        /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "relative flex-1 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-visible", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-xs text-[hsl(var(--muted-foreground))] tabular-nums", children: formatTime(currentTime) }),
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "relative flex-1 h-1.5 bg-[hsl(var(--muted))] rounded-full overflow-visible", children: [
           /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
             "div",
             {
-              className: "absolute h-full bg-blue-600 dark:bg-blue-500 rounded-full transition-all",
+              className: "absolute h-full bg-[hsl(var(--primary))] rounded-full transition-all",
               style: { width: `${progress}%` }
             }
           ),
@@ -4631,7 +4620,7 @@ var AudioPlayer = ({
             return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
               "div",
               {
-                className: "absolute top-0 bottom-0 w-1 -ml-0.5 bg-white dark:bg-gray-300 opacity-70 hover:opacity-100 hover:w-1.5 hover:-ml-0.5 cursor-pointer z-10 transition-all",
+                className: "absolute top-0 bottom-0 w-1 -ml-0.5 bg-[hsl(var(--background))] opacity-70 hover:opacity-100 hover:w-1.5 hover:-ml-0.5 cursor-pointer z-10 transition-all",
                 style: { left: `${markerPosition}%` },
                 onClick: () => jumpToChapter(chapter),
                 onMouseEnter: (e) => {
@@ -4658,8 +4647,8 @@ var AudioPlayer = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-xs text-gray-500 dark:text-gray-400 tabular-nums", children: formatTime(duration) }),
-        currentChapter && showChapters && /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("span", { className: "text-xs text-blue-600 dark:text-blue-400 font-medium truncate max-w-[120px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-xs text-[hsl(var(--muted-foreground))] tabular-nums", children: formatTime(duration) }),
+        currentChapter && showChapters && /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("span", { className: "text-xs text-[hsl(var(--primary))] font-medium truncate max-w-[120px]", children: [
           "\u2022 ",
           currentChapter.title
         ] })
@@ -4669,7 +4658,7 @@ var AudioPlayer = ({
           "button",
           {
             onClick: toggleMute,
-            className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",
+            className: "text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]",
             "aria-label": isMuted ? "Unmute" : "Mute",
             children: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(VolumeOffIcon, { size: "sm" }) : /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(VolumeUpIcon, { size: "sm" })
           }
@@ -4683,7 +4672,7 @@ var AudioPlayer = ({
             step: 0.01,
             value: isMuted ? 0 : volume,
             onChange: handleVolumeChange,
-            className: "w-16 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full appearance-none cursor-pointer\n              [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3\n              [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-600 [&::-webkit-slider-thumb]:cursor-pointer\n              [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full\n              [&::-moz-range-thumb]:bg-blue-600 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-none",
+            className: "w-16 h-1.5 bg-[hsl(var(--muted))] rounded-full appearance-none cursor-pointer\n              [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3\n              [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[hsl(var(--primary))] [&::-webkit-slider-thumb]:cursor-pointer\n              [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full\n              [&::-moz-range-thumb]:bg-[hsl(var(--primary))] [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-none",
             "aria-label": "Volume"
           }
         )
@@ -4691,21 +4680,21 @@ var AudioPlayer = ({
       hoveredChapter && showChapters && /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
         "div",
         {
-          className: "fixed z-50 px-3 py-2 bg-gray-900 dark:bg-gray-800 text-white text-xs font-medium rounded shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-full",
+          className: "fixed z-50 px-3 py-2 bg-[hsl(var(--popover))] text-white text-xs font-medium rounded shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-full",
           style: { left: hoverPosition.x, top: hoverPosition.y - 8 },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "whitespace-nowrap", children: hoveredChapter.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "text-gray-300 text-[10px] mt-0.5", children: formatTime(hoveredChapter.startTime) }),
-            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 bg-gray-900 dark:bg-gray-800 transform -translate-x-1/2 rotate-45" })
+            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "text-[hsl(var(--muted-foreground))] text-[10px] mt-0.5", children: formatTime(hoveredChapter.startTime) }),
+            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 bg-[hsl(var(--popover))] transform -translate-x-1/2 rotate-45" })
           ]
         }
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: `bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-md overflow-hidden ${className}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: `bg-[hsl(var(--card))] rounded-lg border border-[hsl(var(--border))] shadow-md overflow-hidden ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("audio", { ref: audioRef, src, preload, loop, autoPlay }),
-    /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex items-center gap-4 p-4 border-b border-gray-200 dark:border-gray-700", children: [
-      coverArt && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "w-16 h-16 flex-shrink-0 rounded-md overflow-hidden bg-gray-100 dark:bg-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex items-center gap-4 p-4 border-b border-[hsl(var(--border))]", children: [
+      coverArt && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "w-16 h-16 flex-shrink-0 rounded-md overflow-hidden bg-[hsl(var(--muted))]", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
         "img",
         {
           src: coverArt,
@@ -4714,17 +4703,17 @@ var AudioPlayer = ({
         }
       ) }),
       /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex-1 min-w-0", children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("h3", { className: "text-base font-semibold text-gray-900 dark:text-gray-100 truncate", children: title }),
-        artist && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("p", { className: "text-sm text-gray-600 dark:text-gray-400 truncate", children: artist }),
-        album && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("p", { className: "text-xs text-gray-500 dark:text-gray-500 truncate", children: album })
+        title && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("h3", { className: "text-base font-semibold text-[hsl(var(--foreground))] truncate", children: title }),
+        artist && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("p", { className: "text-sm text-[hsl(var(--muted-foreground))] truncate", children: artist }),
+        album && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("p", { className: "text-xs text-[hsl(var(--muted-foreground))] truncate", children: album })
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "px-4 pt-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-visible", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "relative h-2 bg-[hsl(var(--muted))] rounded-full overflow-visible", children: [
         /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
           "div",
           {
-            className: "absolute h-full bg-blue-600 dark:bg-blue-500 rounded-full transition-all",
+            className: "absolute h-full bg-[hsl(var(--primary))] rounded-full transition-all",
             style: { width: `${progress}%` }
           }
         ),
@@ -4733,7 +4722,7 @@ var AudioPlayer = ({
           return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
             "div",
             {
-              className: "absolute top-0 bottom-0 w-1 -ml-0.5 bg-white dark:bg-gray-300 opacity-70 hover:opacity-100 hover:w-1.5 hover:-ml-0.5 cursor-pointer z-10 transition-all",
+              className: "absolute top-0 bottom-0 w-1 -ml-0.5 bg-[hsl(var(--background))] opacity-70 hover:opacity-100 hover:w-1.5 hover:-ml-0.5 cursor-pointer z-10 transition-all",
               style: { left: `${markerPosition}%` },
               onClick: () => jumpToChapter(chapter),
               onMouseEnter: (e) => {
@@ -4749,12 +4738,12 @@ var AudioPlayer = ({
         hoveredChapter && showChapters && /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
           "div",
           {
-            className: "fixed z-50 px-3 py-2 bg-gray-900 dark:bg-gray-800 text-white text-xs font-medium rounded shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-full",
+            className: "fixed z-50 px-3 py-2 bg-[hsl(var(--popover))] text-white text-xs font-medium rounded shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-full",
             style: { left: hoverPosition.x, top: hoverPosition.y - 8 },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "whitespace-nowrap", children: hoveredChapter.title }),
-              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "text-gray-300 text-[10px] mt-0.5", children: formatTime(hoveredChapter.startTime) }),
-              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 bg-gray-900 dark:bg-gray-800 transform -translate-x-1/2 rotate-45" })
+              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "text-[hsl(var(--muted-foreground))] text-[10px] mt-0.5", children: formatTime(hoveredChapter.startTime) }),
+              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 bg-[hsl(var(--popover))] transform -translate-x-1/2 rotate-45" })
             ]
           }
         ),
@@ -4772,9 +4761,9 @@ var AudioPlayer = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex justify-between items-center mt-1 text-xs text-gray-500 dark:text-gray-400 tabular-nums", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex justify-between items-center mt-1 text-xs text-[hsl(var(--muted-foreground))] tabular-nums", children: [
         /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { children: formatTime(currentTime) }),
-        currentChapter && showChapters && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-blue-600 dark:text-blue-400 font-medium truncate max-w-[200px]", children: currentChapter.title }),
+        currentChapter && showChapters && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-[hsl(var(--primary))] font-medium truncate max-w-[200px]", children: currentChapter.title }),
         /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { children: formatTime(duration) })
       ] })
     ] }),
@@ -4784,7 +4773,7 @@ var AudioPlayer = ({
           "button",
           {
             onClick: toggleMute,
-            className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors",
+            className: "text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors",
             "aria-label": isMuted ? "Unmute" : "Mute",
             children: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(VolumeOffIcon, { size: "md" }) : /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(VolumeUpIcon, { size: "md" })
           }
@@ -4798,7 +4787,7 @@ var AudioPlayer = ({
             step: 0.01,
             value: isMuted ? 0 : volume,
             onChange: handleVolumeChange,
-            className: "w-20 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full appearance-none cursor-pointer\n              [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3\n              [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-600 [&::-webkit-slider-thumb]:cursor-pointer\n              [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full\n              [&::-moz-range-thumb]:bg-blue-600 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-none",
+            className: "w-20 h-1.5 bg-[hsl(var(--muted))] rounded-full appearance-none cursor-pointer\n              [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3\n              [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[hsl(var(--primary))] [&::-webkit-slider-thumb]:cursor-pointer\n              [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full\n              [&::-moz-range-thumb]:bg-[hsl(var(--primary))] [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-none",
             "aria-label": "Volume"
           }
         )
@@ -4845,7 +4834,7 @@ var AudioPlayer = ({
         "button",
         {
           onClick: () => setShowChapterList(!showChapterList),
-          className: "text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors",
+          className: "text-sm text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors",
           "aria-label": "Toggle chapters",
           children: [
             "Chapters (",
@@ -4855,16 +4844,16 @@ var AudioPlayer = ({
         }
       ) })
     ] }),
-    showChapters && showChapterList && chapters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 max-h-48 overflow-y-auto", children: chapters.map((chapter, index) => {
+    showChapters && showChapterList && chapters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "border-t border-[hsl(var(--border))] bg-[hsl(var(--muted))]/50 max-h-48 overflow-y-auto", children: chapters.map((chapter, index) => {
       const isCurrentChapter = currentChapter?.startTime === chapter.startTime;
       return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
         "button",
         {
           onClick: () => jumpToChapter(chapter),
-          className: `w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors ${isCurrentChapter ? "bg-blue-50 dark:bg-blue-900/20 border-l-2 border-blue-600" : ""}`,
+          className: `w-full text-left px-4 py-2 hover:bg-[hsl(var(--accent))] transition-colors ${isCurrentChapter ? "bg-[hsl(var(--primary))]/10 border-l-2 border-[hsl(var(--primary))]" : ""}`,
           children: /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: `text-sm font-medium ${isCurrentChapter ? "text-blue-600 dark:text-blue-400" : "text-gray-900 dark:text-gray-100"}`, children: chapter.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-xs text-gray-500 dark:text-gray-400 tabular-nums", children: formatTime(chapter.startTime) })
+            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: `text-sm font-medium ${isCurrentChapter ? "text-[hsl(var(--primary))]" : "text-[hsl(var(--foreground))]"}`, children: chapter.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-xs text-[hsl(var(--muted-foreground))] tabular-nums", children: formatTime(chapter.startTime) })
           ] })
         },
         index
@@ -5143,7 +5132,7 @@ var VideoPlayer = ({
                 /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
                   "div",
                   {
-                    className: "absolute h-full bg-blue-600 rounded-full transition-all",
+                    className: "absolute h-full bg-[hsl(var(--primary))] rounded-full transition-all",
                     style: { width: `${progress}%` }
                   }
                 ),
@@ -5196,7 +5185,7 @@ var VideoPlayer = ({
                     "button",
                     {
                       onClick: toggleMute,
-                      className: "text-white hover:text-gray-200 transition-colors",
+                      className: "text-white hover:text-[hsl(var(--foreground))] transition-colors",
                       "aria-label": isMuted ? "Unmute" : "Mute",
                       children: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(VolumeOffIcon, { size: "sm" }) : /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(VolumeUpIcon, { size: "sm" })
                     }
@@ -5205,7 +5194,7 @@ var VideoPlayer = ({
                     "button",
                     {
                       onClick: toggleFullscreen,
-                      className: "text-white hover:text-gray-200 transition-colors",
+                      className: "text-white hover:text-[hsl(var(--foreground))] transition-colors",
                       "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
                       children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(FullscreenExitIcon, { size: "sm" }) : /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(FullscreenIcon, { size: "sm" })
                     }
@@ -5217,12 +5206,12 @@ var VideoPlayer = ({
           hoveredChapter && showChapters && /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
             "div",
             {
-              className: "fixed z-50 px-3 py-2 bg-gray-900 dark:bg-gray-800 text-white text-xs font-medium rounded shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-full",
+              className: "fixed z-50 px-3 py-2 bg-[hsl(var(--popover))] text-white text-xs font-medium rounded shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-full",
               style: { left: hoverPosition.x, top: hoverPosition.y - 8 },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "whitespace-nowrap", children: hoveredChapter.title }),
-                /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "text-gray-300 text-[10px] mt-0.5", children: formatTime(hoveredChapter.startTime) }),
-                /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 bg-gray-900 dark:bg-gray-800 transform -translate-x-1/2 rotate-45" })
+                /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "text-[hsl(var(--muted-foreground))] text-[10px] mt-0.5", children: formatTime(hoveredChapter.startTime) }),
+                /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 bg-[hsl(var(--popover))] transform -translate-x-1/2 rotate-45" })
               ]
             }
           )
@@ -5230,8 +5219,8 @@ var VideoPlayer = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: `bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-md overflow-hidden ${className}`, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "px-4 py-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("h3", { className: "text-base font-semibold text-gray-900 dark:text-gray-100 truncate", children: title }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: `bg-[hsl(var(--card))] rounded-lg border border-[hsl(var(--border))] shadow-md overflow-hidden ${className}`, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "px-4 py-3 border-b border-[hsl(var(--border))]", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("h3", { className: "text-base font-semibold text-[hsl(var(--foreground))] truncate", children: title }) }),
     /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
       "div",
       {
@@ -5274,7 +5263,7 @@ var VideoPlayer = ({
                 /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
                   "div",
                   {
-                    className: "absolute h-full bg-blue-600 rounded-full transition-all",
+                    className: "absolute h-full bg-[hsl(var(--primary))] rounded-full transition-all",
                     style: { width: `${progress}%` }
                   }
                 ),
@@ -5343,7 +5332,7 @@ var VideoPlayer = ({
                       "button",
                       {
                         onClick: toggleMute,
-                        className: "text-white hover:text-gray-200 transition-colors",
+                        className: "text-white hover:text-[hsl(var(--foreground))] transition-colors",
                         "aria-label": isMuted ? "Unmute" : "Mute",
                         children: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(VolumeOffIcon, { size: "md" }) : /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(VolumeUpIcon, { size: "md" })
                       }
@@ -5366,7 +5355,7 @@ var VideoPlayer = ({
                     "button",
                     {
                       onClick: toggleFullscreen,
-                      className: "text-white hover:text-gray-200 transition-colors",
+                      className: "text-white hover:text-[hsl(var(--foreground))] transition-colors",
                       "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
                       children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(FullscreenExitIcon, { size: "md" }) : /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(FullscreenIcon, { size: "md" })
                     }
@@ -5378,12 +5367,12 @@ var VideoPlayer = ({
           hoveredChapter && showChapters && /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
             "div",
             {
-              className: "fixed z-50 px-3 py-2 bg-gray-900 dark:bg-gray-800 text-white text-xs font-medium rounded shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-full",
+              className: "fixed z-50 px-3 py-2 bg-[hsl(var(--popover))] text-white text-xs font-medium rounded shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-full",
               style: { left: hoverPosition.x, top: hoverPosition.y - 8 },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "whitespace-nowrap", children: hoveredChapter.title }),
-                /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "text-gray-300 text-[10px] mt-0.5", children: formatTime(hoveredChapter.startTime) }),
-                /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 bg-gray-900 dark:bg-gray-800 transform -translate-x-1/2 rotate-45" })
+                /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "text-[hsl(var(--muted-foreground))] text-[10px] mt-0.5", children: formatTime(hoveredChapter.startTime) }),
+                /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 bg-[hsl(var(--popover))] transform -translate-x-1/2 rotate-45" })
               ]
             }
           )
@@ -5723,8 +5712,8 @@ var DefaultTooltipContent = ({
     return null;
   }
   const formattedLabel = labelFormatter ? labelFormatter(label ?? "") : String(label ?? "");
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "bg-gray-900 dark:bg-gray-800 text-white rounded-lg shadow-xl border border-gray-700 overflow-hidden min-w-[120px]", children: [
-    formattedLabel && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "px-3 py-2 bg-gray-800 dark:bg-gray-700 border-b border-gray-700 dark:border-gray-600", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "text-sm font-medium text-gray-200", children: formattedLabel }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "bg-[hsl(var(--popover))] text-white rounded-lg shadow-xl border border-[hsl(var(--border))] overflow-hidden min-w-[120px]", children: [
+    formattedLabel && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "px-3 py-2 bg-[hsl(var(--popover))] border-b border-[hsl(var(--border))]", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))]", children: formattedLabel }) }),
     /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "px-3 py-2 space-y-1", children: payload.map((item, index) => {
       const formattedValue = formatter ? formatter(item.value, item.name, item) : String(item.value);
       return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
@@ -5736,7 +5725,7 @@ var DefaultTooltipContent = ({
               style: { backgroundColor: item.color }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "text-xs text-gray-300", children: item.name })
+          /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: item.name })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "text-sm font-semibold text-white", children: formattedValue })
       ] }, `${item.name}-${index}`);
@@ -5945,7 +5934,7 @@ var Legend = ({
           onMouseLeave,
           children: [
             renderIcon(item),
-            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: "text-gray-700 dark:text-gray-300", children: formatter ? formatter(item.name, item, index) : item.name })
+            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: "text-[hsl(var(--foreground))]", children: formatter ? formatter(item.name, item, index) : item.name })
           ]
         },
         `${item.name}-${index}`
@@ -6089,7 +6078,7 @@ var ReferenceLine = ({
         dominantBaseline,
         fontSize: CHART_DEFAULTS.fontSize.gridLabel,
         fontWeight: "500",
-        className: "fill-gray-600 dark:fill-gray-400",
+        className: "fill-[hsl(var(--muted-foreground))]",
         children: label
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
@@ -6237,7 +6226,7 @@ var ReferenceArea = ({
         dominantBaseline,
         fontSize: CHART_DEFAULTS.fontSize.gridLabel,
         fontWeight: "500",
-        className: "fill-gray-600 dark:fill-gray-400",
+        className: "fill-[hsl(var(--muted-foreground))]",
         children: label
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
@@ -6294,7 +6283,7 @@ var CartesianGrid = ({
         strokeDasharray,
         strokeWidth,
         strokeOpacity,
-        className: !stroke ? "stroke-gray-200 dark:stroke-gray-700" : void 0
+        className: !stroke ? "stroke-[hsl(var(--border))]" : void 0
       },
       `h-${i}`
     )),
@@ -6309,7 +6298,7 @@ var CartesianGrid = ({
         strokeDasharray,
         strokeWidth,
         strokeOpacity,
-        className: !stroke ? "stroke-gray-200 dark:stroke-gray-700" : void 0
+        className: !stroke ? "stroke-[hsl(var(--border))]" : void 0
       },
       `v-${i}`
     ))
@@ -6564,7 +6553,7 @@ var LineChart = ({
             viewBox: `0 0 ${width} ${height}`,
             role: "img",
             "aria-label": accessibleDescription,
-            className: "bg-white dark:bg-gray-900",
+            className: "bg-[hsl(var(--card))]",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("defs", { children: animate && data.map((series, i) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("style", { children: `
               @keyframes drawLine${i} {
@@ -6591,7 +6580,7 @@ var LineChart = ({
                     stroke: "currentColor",
                     strokeWidth: 1,
                     strokeDasharray: "4 4",
-                    className: "text-gray-400 dark:text-gray-500",
+                    className: "text-[hsl(var(--muted-foreground))]",
                     pointerEvents: "none"
                   }
                 ),
@@ -6669,7 +6658,7 @@ var LineChart = ({
                         dominantBaseline: "middle",
                         fontSize: CHART_DEFAULTS.fontSize.gridLabel,
                         fontWeight: "600",
-                        className: "fill-gray-700 dark:fill-gray-300",
+                        className: "fill-[hsl(var(--foreground))]",
                         children: yFormatter(lastPoint.y)
                       }
                     )
@@ -6683,21 +6672,21 @@ var LineChart = ({
                       y1: 0,
                       x2: chartWidth,
                       y2: 0,
-                      className: "stroke-gray-300 dark:stroke-gray-600",
+                      className: "stroke-[hsl(var(--border))]",
                       strokeWidth: 1
                     }
                   ),
                   xTicks.map((tick, i) => {
                     const x = xValueType === "string" ? xScale(tick.value, tick.index) : xScale(xValueType === "date" ? new Date(tick.value) : tick.value, 0);
                     return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("g", { transform: `translate(${x}, 0)`, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-600" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("line", { y2: 6, className: "stroke-[hsl(var(--border))]" }),
                       /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
                         "text",
                         {
                           y: 20,
                           textAnchor: "middle",
                           fontSize: CHART_DEFAULTS.fontSize.gridLabel,
-                          className: "fill-gray-600 dark:fill-gray-400",
+                          className: "fill-[hsl(var(--muted-foreground))]",
                           children: xFormatter(xValueType === "date" ? new Date(tick.value) : tick.value)
                         }
                       )
@@ -6711,7 +6700,7 @@ var LineChart = ({
                       textAnchor: "middle",
                       fontSize: CHART_DEFAULTS.fontSize.axisLabel,
                       fontWeight: "500",
-                      className: "fill-gray-700 dark:fill-gray-300",
+                      className: "fill-[hsl(var(--foreground))]",
                       children: xAxisLabel
                     }
                   )
@@ -6724,12 +6713,12 @@ var LineChart = ({
                       y1: 0,
                       x2: 0,
                       y2: chartHeight,
-                      className: "stroke-gray-300 dark:stroke-gray-600",
+                      className: "stroke-[hsl(var(--border))]",
                       strokeWidth: 1
                     }
                   ),
                   yTicks.map((tick, i) => /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("g", { transform: `translate(0, ${yScale(tick)})`, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("line", { x2: -6, className: "stroke-gray-300 dark:stroke-gray-600" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("line", { x2: -6, className: "stroke-[hsl(var(--border))]" }),
                     /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
                       "text",
                       {
@@ -6737,7 +6726,7 @@ var LineChart = ({
                         textAnchor: "end",
                         dominantBaseline: "middle",
                         fontSize: CHART_DEFAULTS.fontSize.gridLabel,
-                        className: "fill-gray-600 dark:fill-gray-400",
+                        className: "fill-[hsl(var(--muted-foreground))]",
                         children: yFormatter(tick)
                       }
                     )
@@ -6751,7 +6740,7 @@ var LineChart = ({
                       transform: "rotate(-90)",
                       fontSize: CHART_DEFAULTS.fontSize.axisLabel,
                       fontWeight: "500",
-                      className: "fill-gray-700 dark:fill-gray-300",
+                      className: "fill-[hsl(var(--foreground))]",
                       children: yAxisLabel
                     }
                   )
@@ -6996,7 +6985,7 @@ var BarChart = ({
                 dominantBaseline: horizontal ? "middle" : "auto",
                 fontSize: CHART_DEFAULTS.fontSize.gridLabel,
                 fontWeight: "600",
-                className: "fill-gray-700 dark:fill-gray-300",
+                className: "fill-[hsl(var(--foreground))]",
                 style: animate ? {
                   opacity: 0,
                   animation: `fadeIn 200ms ease-out ${animationDuration + barIndex * 50}ms forwards`
@@ -7069,7 +7058,7 @@ var BarChart = ({
             viewBox: `0 0 ${width} ${height}`,
             role: "img",
             "aria-label": accessibleDescription,
-            className: "bg-white dark:bg-gray-900",
+            className: "bg-[hsl(var(--card))]",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("style", { children: `
             @keyframes growY {
@@ -7106,20 +7095,20 @@ var BarChart = ({
                       y1: 0,
                       x2: chartWidth,
                       y2: 0,
-                      className: "stroke-gray-300 dark:stroke-gray-600"
+                      className: "stroke-[hsl(var(--border))]"
                     }
                   ),
                   categories.map((cat, i) => {
                     const x = xBandScale.scale(cat) + bandwidth / 2;
                     return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("g", { transform: `translate(${x}, 0)`, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-600" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("line", { y2: 6, className: "stroke-[hsl(var(--border))]" }),
                       /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
                         "text",
                         {
                           y: 20,
                           textAnchor: "middle",
                           fontSize: CHART_DEFAULTS.fontSize.gridLabel,
-                          className: "fill-gray-600 dark:fill-gray-400",
+                          className: "fill-[hsl(var(--muted-foreground))]",
                           children: cat
                         }
                       )
@@ -7133,7 +7122,7 @@ var BarChart = ({
                       textAnchor: "middle",
                       fontSize: CHART_DEFAULTS.fontSize.axisLabel,
                       fontWeight: "500",
-                      className: "fill-gray-700 dark:fill-gray-300",
+                      className: "fill-[hsl(var(--foreground))]",
                       children: xAxisLabel
                     }
                   )
@@ -7146,11 +7135,11 @@ var BarChart = ({
                       y1: 0,
                       x2: 0,
                       y2: chartHeight,
-                      className: "stroke-gray-300 dark:stroke-gray-600"
+                      className: "stroke-[hsl(var(--border))]"
                     }
                   ),
                   yTicks.map((tick, i) => /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("g", { transform: `translate(0, ${yScale(tick)})`, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("line", { x2: -6, className: "stroke-gray-300 dark:stroke-gray-600" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("line", { x2: -6, className: "stroke-[hsl(var(--border))]" }),
                     /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
                       "text",
                       {
@@ -7158,7 +7147,7 @@ var BarChart = ({
                         textAnchor: "end",
                         dominantBaseline: "middle",
                         fontSize: CHART_DEFAULTS.fontSize.gridLabel,
-                        className: "fill-gray-600 dark:fill-gray-400",
+                        className: "fill-[hsl(var(--muted-foreground))]",
                         children: yFormatter(tick)
                       }
                     )
@@ -7172,7 +7161,7 @@ var BarChart = ({
                       transform: "rotate(-90)",
                       fontSize: CHART_DEFAULTS.fontSize.axisLabel,
                       fontWeight: "500",
-                      className: "fill-gray-700 dark:fill-gray-300",
+                      className: "fill-[hsl(var(--foreground))]",
                       children: yAxisLabel
                     }
                   )
@@ -7447,7 +7436,7 @@ var AreaChart = ({
             viewBox: `0 0 ${width} ${height}`,
             role: "img",
             "aria-label": accessibleDescription,
-            className: "bg-white dark:bg-gray-900",
+            className: "bg-[hsl(var(--card))]",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("defs", { children: [
                 data.map((series, i) => {
@@ -7559,20 +7548,20 @@ var AreaChart = ({
                       y1: 0,
                       x2: chartWidth,
                       y2: 0,
-                      className: "stroke-gray-300 dark:stroke-gray-600"
+                      className: "stroke-[hsl(var(--border))]"
                     }
                   ),
                   xTicks.map((tick, i) => {
                     const x = xValueType === "string" ? xScale(tick.value, tick.index) : xScale(xValueType === "date" ? new Date(tick.value) : tick.value, 0);
                     return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("g", { transform: `translate(${x}, 0)`, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-600" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("line", { y2: 6, className: "stroke-[hsl(var(--border))]" }),
                       /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
                         "text",
                         {
                           y: 20,
                           textAnchor: "middle",
                           fontSize: CHART_DEFAULTS.fontSize.gridLabel,
-                          className: "fill-gray-600 dark:fill-gray-400",
+                          className: "fill-[hsl(var(--muted-foreground))]",
                           children: xFormatter(xValueType === "date" ? new Date(tick.value) : tick.value)
                         }
                       )
@@ -7586,7 +7575,7 @@ var AreaChart = ({
                       textAnchor: "middle",
                       fontSize: CHART_DEFAULTS.fontSize.axisLabel,
                       fontWeight: "500",
-                      className: "fill-gray-700 dark:fill-gray-300",
+                      className: "fill-[hsl(var(--foreground))]",
                       children: xAxisLabel
                     }
                   )
@@ -7599,11 +7588,11 @@ var AreaChart = ({
                       y1: 0,
                       x2: 0,
                       y2: chartHeight,
-                      className: "stroke-gray-300 dark:stroke-gray-600"
+                      className: "stroke-[hsl(var(--border))]"
                     }
                   ),
                   yTicks.map((tick, i) => /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("g", { transform: `translate(0, ${yScale(tick)})`, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("line", { x2: -6, className: "stroke-gray-300 dark:stroke-gray-600" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("line", { x2: -6, className: "stroke-[hsl(var(--border))]" }),
                     /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
                       "text",
                       {
@@ -7611,7 +7600,7 @@ var AreaChart = ({
                         textAnchor: "end",
                         dominantBaseline: "middle",
                         fontSize: CHART_DEFAULTS.fontSize.gridLabel,
-                        className: "fill-gray-600 dark:fill-gray-400",
+                        className: "fill-[hsl(var(--muted-foreground))]",
                         children: yFormatter(tick)
                       }
                     )
@@ -7625,7 +7614,7 @@ var AreaChart = ({
                       transform: "rotate(-90)",
                       fontSize: CHART_DEFAULTS.fontSize.axisLabel,
                       fontWeight: "500",
-                      className: "fill-gray-700 dark:fill-gray-300",
+                      className: "fill-[hsl(var(--foreground))]",
                       children: yAxisLabel
                     }
                   )
@@ -7806,7 +7795,7 @@ var PieChart = ({
             viewBox: `0 0 ${width} ${height}`,
             role: "img",
             "aria-label": accessibleDescription,
-            className: "bg-white dark:bg-gray-900",
+            className: "bg-[hsl(var(--card))]",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("style", { children: `
             @keyframes rotateIn {
@@ -7876,7 +7865,7 @@ var PieChart = ({
                     dominantBaseline: "middle",
                     fontSize: CHART_DEFAULTS.fontSize.title,
                     fontWeight: "700",
-                    className: "fill-gray-900 dark:fill-gray-100",
+                    className: "fill-[hsl(var(--foreground))]",
                     children: typeof centerValue === "number" ? formatNumber(centerValue) : centerValue
                   }
                 ),
@@ -7888,7 +7877,7 @@ var PieChart = ({
                     textAnchor: "middle",
                     dominantBaseline: "middle",
                     fontSize: CHART_DEFAULTS.fontSize.gridLabel,
-                    className: "fill-gray-500 dark:fill-gray-400",
+                    className: "fill-[hsl(var(--muted-foreground))]",
                     children: centerLabel
                   }
                 ) : /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
@@ -8204,7 +8193,7 @@ var ScatterChart = ({
             viewBox: `0 0 ${width} ${height}`,
             role: "img",
             "aria-label": accessibleDescription,
-            className: "bg-white dark:bg-gray-900",
+            className: "bg-[hsl(var(--card))]",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("style", { children: `
             @keyframes popIn {
@@ -8281,18 +8270,18 @@ var ScatterChart = ({
                       y1: 0,
                       x2: chartWidth,
                       y2: 0,
-                      className: "stroke-gray-300 dark:stroke-gray-600"
+                      className: "stroke-[hsl(var(--border))]"
                     }
                   ),
                   xTicks.map((tick, i) => /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("g", { transform: `translate(${xScale(tick)}, 0)`, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-600" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("line", { y2: 6, className: "stroke-[hsl(var(--border))]" }),
                     /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
                       "text",
                       {
                         y: 20,
                         textAnchor: "middle",
                         fontSize: CHART_DEFAULTS.fontSize.gridLabel,
-                        className: "fill-gray-600 dark:fill-gray-400",
+                        className: "fill-[hsl(var(--muted-foreground))]",
                         children: xFormatter(tick)
                       }
                     )
@@ -8305,7 +8294,7 @@ var ScatterChart = ({
                       textAnchor: "middle",
                       fontSize: CHART_DEFAULTS.fontSize.axisLabel,
                       fontWeight: "500",
-                      className: "fill-gray-700 dark:fill-gray-300",
+                      className: "fill-[hsl(var(--foreground))]",
                       children: xAxisLabel
                     }
                   )
@@ -8318,11 +8307,11 @@ var ScatterChart = ({
                       y1: 0,
                       x2: 0,
                       y2: chartHeight,
-                      className: "stroke-gray-300 dark:stroke-gray-600"
+                      className: "stroke-[hsl(var(--border))]"
                     }
                   ),
                   yTicks.map((tick, i) => /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("g", { transform: `translate(0, ${yScale(tick)})`, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("line", { x2: -6, className: "stroke-gray-300 dark:stroke-gray-600" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("line", { x2: -6, className: "stroke-[hsl(var(--border))]" }),
                     /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
                       "text",
                       {
@@ -8330,7 +8319,7 @@ var ScatterChart = ({
                         textAnchor: "end",
                         dominantBaseline: "middle",
                         fontSize: CHART_DEFAULTS.fontSize.gridLabel,
-                        className: "fill-gray-600 dark:fill-gray-400",
+                        className: "fill-[hsl(var(--muted-foreground))]",
                         children: yFormatter(tick)
                       }
                     )
@@ -8344,7 +8333,7 @@ var ScatterChart = ({
                       transform: "rotate(-90)",
                       fontSize: CHART_DEFAULTS.fontSize.axisLabel,
                       fontWeight: "500",
-                      className: "fill-gray-700 dark:fill-gray-300",
+                      className: "fill-[hsl(var(--foreground))]",
                       children: yAxisLabel
                     }
                   )
@@ -8595,7 +8584,7 @@ var Heatmap = ({
               x: labelWidth + i * (cellSize + cellGap) + cellSize / 2,
               y: labelHeight - 8,
               textAnchor: "middle",
-              className: "text-xs fill-gray-600 dark:fill-gray-400",
+              className: "text-xs fill-[hsl(var(--muted-foreground))]",
               style: { fontSize: "11px" },
               children: label
             },
@@ -8607,7 +8596,7 @@ var Heatmap = ({
               x: labelWidth - 8,
               y: labelHeight + j * (cellSize + cellGap) + cellSize / 2 + 4,
               textAnchor: "end",
-              className: "text-xs fill-gray-600 dark:fill-gray-400",
+              className: "text-xs fill-[hsl(var(--muted-foreground))]",
               style: { fontSize: "11px" },
               children: label
             },
@@ -8663,7 +8652,7 @@ var Heatmap = ({
     showTooltip && hoveredCell && /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
       "div",
       {
-        className: "absolute z-50 px-3 py-2 text-sm bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg shadow-lg pointer-events-none whitespace-nowrap",
+        className: "absolute z-50 px-3 py-2 text-sm bg-[hsl(var(--popover))] text-[hsl(var(--popover-foreground))] border border-[hsl(var(--border))] rounded-lg shadow-lg pointer-events-none whitespace-nowrap",
         style: {
           left: labelWidth + hoveredCell.x * (cellSize + cellGap) + cellSize / 2,
           top: labelHeight + hoveredCell.y * (cellSize + cellGap) - 8,
@@ -8674,7 +8663,7 @@ var Heatmap = ({
           /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
             "div",
             {
-              className: "absolute w-2 h-2 bg-gray-900 dark:bg-gray-100 rotate-45",
+              className: "absolute w-2 h-2 bg-[hsl(var(--popover))] rotate-45",
               style: {
                 left: "50%",
                 bottom: "-4px",
@@ -8780,7 +8769,7 @@ var CalendarHeatmap = ({
         {
           x: dayLabelWidth + weekIndex * (cellSize + cellGap),
           y: 12,
-          className: "text-xs fill-gray-600 dark:fill-gray-400",
+          className: "text-xs fill-[hsl(var(--muted-foreground))]",
           style: { fontSize: "10px" },
           children: label
         },
@@ -8792,7 +8781,7 @@ var CalendarHeatmap = ({
           x: dayLabelWidth - 6,
           y: monthLabelHeight + dayIndex * (cellSize + cellGap) + cellSize / 2 + 3,
           textAnchor: "end",
-          className: "text-xs fill-gray-600 dark:fill-gray-400",
+          className: "text-xs fill-[hsl(var(--muted-foreground))]",
           style: { fontSize: "9px" },
           children: DAY_LABELS[dayIndex]
         },
@@ -8832,7 +8821,7 @@ var CalendarHeatmap = ({
     hoveredCell && /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
       "div",
       {
-        className: "absolute z-50 px-3 py-2 text-sm bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg shadow-lg pointer-events-none whitespace-nowrap",
+        className: "absolute z-50 px-3 py-2 text-sm bg-[hsl(var(--popover))] text-[hsl(var(--popover-foreground))] border border-[hsl(var(--border))] rounded-lg shadow-lg pointer-events-none whitespace-nowrap",
         style: {
           left: dayLabelWidth + hoveredCell.weekIndex * (cellSize + cellGap) + cellSize / 2,
           top: monthLabelHeight + hoveredCell.dayIndex * (cellSize + cellGap) - 8,
@@ -8843,7 +8832,7 @@ var CalendarHeatmap = ({
           /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
             "div",
             {
-              className: "absolute w-2 h-2 bg-gray-900 dark:bg-gray-100 rotate-45",
+              className: "absolute w-2 h-2 bg-[hsl(var(--popover))] rotate-45",
               style: {
                 left: "50%",
                 bottom: "-4px",