@datatechsolutions/ui 2.7.131 → 2.7.133

package/dist/{chunk-5NRV2PE4.js → chunk-W224TQQY.js}

@@ -761,7 +761,7 @@ function IconButton({
       isIosColor && finalColor === "ios-purple" && "bg-[#AF52DE] dark:bg-[#BF5AF2]"
     ),
     ghost: clsx__default.default(
-      "bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800",
+      "bg-transparent hover:bg-white/40 dark:hover:bg-white/[0.08]",
       isIosColor && finalColor === "ios-blue" && "text-[#007AFF] dark:text-[#0A84FF]",
       isIosColor && finalColor === "ios-red" && "text-[#FF3B30] dark:text-[#FF453A]",
       isIosColor && finalColor === "ios-green" && "text-[#34C759] dark:text-[#30D158]",
@@ -846,10 +846,10 @@ function CardHeader({ className = "", ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex flex-col space-y-1.5 p-4 sm:p-6 ${className}`, ...props });
 }
 function CardTitle({ className = "", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: `text-lg font-semibold leading-none tracking-tight text-gray-900 dark:text-white ${className}`, ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: `text-lg font-semibold leading-none tracking-tight text-slate-900 dark:text-white ${className}`, ...props });
 }
 function CardDescription({ className = "", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-sm text-gray-500 dark:text-gray-400 ${className}`, ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-sm text-slate-500 dark:text-slate-400 ${className}`, ...props });
 }
 function CardContent({ className = "", ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `p-4 sm:p-6 pt-0 ${className}`, ...props });
@@ -879,8 +879,8 @@ function SectionCard({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base sm:text-lg font-semibold text-gray-900 dark:text-white", children: title }),
-          subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs sm:text-sm text-gray-500 dark:text-gray-400", children: subtitle })
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base sm:text-lg font-semibold text-slate-900 dark:text-white", children: title }),
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs sm:text-sm text-slate-500 dark:text-slate-400", children: subtitle })
         ] })
       ] }),
       rightContent
@@ -987,15 +987,15 @@ var Input = React11.forwardRef(
     const baseClasses = isFilled ? `
         liquid-surface h-12 w-full rounded-xl border-0
         px-4 py-3 text-base
-        text-gray-900 dark:text-white
-        placeholder:text-gray-400 dark:placeholder:text-gray-500
+        text-slate-900 dark:text-white
+        placeholder:text-slate-400 dark:placeholder:text-slate-500
         transition-all duration-200
         disabled:cursor-not-allowed disabled:opacity-50
       ` : `
         liquid-surface h-11 w-full rounded-xl
         px-3.5 py-2.5 text-base
-        text-gray-900 dark:text-white
-        placeholder:text-gray-400 dark:placeholder:text-gray-500
+        text-slate-900 dark:text-white
+        placeholder:text-slate-400 dark:placeholder:text-slate-500
         transition-all duration-200
         disabled:cursor-not-allowed disabled:opacity-50
       `;
@@ -1023,7 +1023,7 @@ var Input = React11.forwardRef(
           exit: { opacity: 0, scale: 0.8 },
           transition: { duration: 0.15 },
           onClick: togglePassword,
-          className: "p-1 rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
+          className: "p-1 rounded-full text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 hover:bg-white/40 dark:hover:bg-white/[0.08] transition-colors",
           "aria-label": showPassword ? t("hidePassword") : t("showPassword"),
           children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(solid.EyeSlashIcon, { className: "h-5 w-5" }) : /* @__PURE__ */ jsxRuntime.jsx(solid.EyeIcon, { className: "h-5 w-5" })
         }
@@ -1037,7 +1037,7 @@ var Input = React11.forwardRef(
           exit: { opacity: 0, scale: 0.8 },
           transition: { duration: 0.15 },
           onClick: handleClear,
-          className: "p-1 rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
+          className: "p-1 rounded-full text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 hover:bg-white/40 dark:hover:bg-white/[0.08] transition-colors",
           children: /* @__PURE__ */ jsxRuntime.jsx(solid.XMarkIcon, { className: "h-5 w-5" })
         }
       ) })
@@ -1065,12 +1065,12 @@ var Input = React11.forwardRef(
             children: successMessage
           }
         ),
-        !error && !successMessage && helperText && /* @__PURE__ */ jsxRuntime.jsx("p", { id: helperId, className: "text-sm text-gray-500 dark:text-gray-400", children: helperText })
+        !error && !successMessage && helperText && /* @__PURE__ */ jsxRuntime.jsx("p", { id: helperId, className: "text-sm text-slate-500 dark:text-slate-400", children: helperText })
       ] }),
       showCharacterCount && /* @__PURE__ */ jsxRuntime.jsxs(
         "span",
         {
-          className: `text-xs ml-2 ${isOverLimit ? "text-ios-red" : characterCount > 0 ? "text-gray-500 dark:text-gray-400" : "text-gray-400 dark:text-gray-500"}`,
+          className: `text-xs ml-2 ${isOverLimit ? "text-ios-red" : characterCount > 0 ? "text-slate-500 dark:text-slate-400" : "text-slate-400 dark:text-slate-500"}`,
           children: [
             characterCount,
             maxCharacters ? `/${maxCharacters}` : ""
@@ -1081,7 +1081,7 @@ var Input = React11.forwardRef(
     if (floatingLabel && label) {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500 z-10", children: icon }),
+          icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 dark:text-slate-500 z-10", children: icon }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -1114,7 +1114,7 @@ var Input = React11.forwardRef(
               htmlFor: inputId,
               className: `
                 absolute left-3.5 pointer-events-none
-                text-gray-500 dark:text-gray-400
+                text-slate-500 dark:text-slate-400
                 transition-all duration-200
                 ${icon ? "left-11" : ""}
               `,
@@ -1133,9 +1133,9 @@ var Input = React11.forwardRef(
       ] });
     }
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-      label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: "block text-sm font-medium text-slate-700 dark:text-slate-300", children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500", children: icon }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 dark:text-slate-500", children: icon }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -1274,8 +1274,8 @@ function Sheet({
                 className: isRight ? `pointer-events-auto w-full ${rightSizeClass} h-full liquid-surface !rounded-none !rounded-l-3xl !shadow-2xl overflow-hidden` : `pointer-events-auto w-full max-w-lg liquid-surface !rounded-none !rounded-t-3xl !shadow-2xl overflow-hidden`,
                 ...!isRight ? { initial: { height: maxHeight } } : {},
                 children: [
-                  showHandle && !isRight && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-3 pb-2 cursor-grab active:cursor-grabbing", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-10 rounded-full bg-gray-400/50 dark:bg-gray-500/50" }) }),
-                  title && /* @__PURE__ */ jsxRuntime.jsx(Headless6.DialogTitle, { className: "px-6 py-3 text-lg font-semibold text-gray-900 dark:text-white border-b border-gray-200/50 dark:border-white/10", children: title }),
+                  showHandle && !isRight && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-3 pb-2 cursor-grab active:cursor-grabbing", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-10 rounded-full bg-slate-400/50 dark:bg-slate-500/50" }) }),
+                  title && /* @__PURE__ */ jsxRuntime.jsx(Headless6.DialogTitle, { className: "px-6 py-3 text-lg font-semibold text-slate-900 dark:text-white border-b border-white/30 dark:border-white/10", children: title }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
@@ -1310,8 +1310,8 @@ function ActionSheet({
   };
   return /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open, onClose, showHandle: false, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pt-4 pb-2", children: [
     (title || message) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-4", children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-gray-500 dark:text-gray-400", children: title }),
-      message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 mt-1", children: message })
+      title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-slate-500 dark:text-slate-400", children: title }),
+      message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-slate-500 dark:text-slate-400 mt-1", children: message })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -1334,7 +1334,7 @@ function ActionSheet({
       {
         type: "button",
         onClick: onClose,
-        className: "w-full mt-2 py-3 px-4 rounded-xl text-center font-semibold\n            text-gray-600 dark:text-gray-300\n            bg-gray-100 dark:bg-gray-800\n            hover:bg-gray-200 dark:hover:bg-gray-700\n            transition-colors duration-150",
+        className: "w-full mt-2 py-3 px-4 rounded-xl text-center font-semibold\n            text-slate-600 dark:text-slate-300\n            bg-white/40 dark:bg-white/[0.08] backdrop-blur-sm\n            hover:bg-white/40 dark:hover:bg-white/[0.08]\n            transition-colors duration-150",
         children: tCommon("cancelDelete")
       }
     )
@@ -1565,7 +1565,7 @@ var Select = React11.forwardRef(
       border-white/55 dark:border-white/14
       bg-white/68 dark:bg-slate-900/44 backdrop-blur-xl
       px-3.5 py-2.5 text-base
-      text-gray-900 dark:text-white
+      text-slate-900 dark:text-white
       shadow-[inset_0_1px_0_rgba(255,255,255,0.88),0_10px_24px_-22px_rgba(15,23,42,0.72)]
       transition-all duration-200
       disabled:cursor-not-allowed disabled:opacity-50
@@ -1574,7 +1574,7 @@ var Select = React11.forwardRef(
     const errorClasses = error ? "border-ios-red ring-4 ring-ios-red/10" : "";
     if (useMobilePicker && normalizedOptions.length > 0) {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-        label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
+        label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-slate-700 dark:text-slate-300", children: label }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
@@ -1589,11 +1589,11 @@ var Select = React11.forwardRef(
               cursor-pointer
             `,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: selectedOption ? "" : "text-gray-400", children: selectedOption?.label || placeholder }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: selectedOption ? "" : "text-slate-400", children: selectedOption?.label || placeholder }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 solid.ChevronDownIcon,
                 {
-                  className: `h-5 w-5 text-gray-400 transition-transform duration-200
+                  className: `h-5 w-5 text-slate-400 transition-transform duration-200
                 ${isOpen ? "rotate-180" : ""}`
                 }
               )
@@ -1634,7 +1634,7 @@ var Select = React11.forwardRef(
       ] });
     }
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-      label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-slate-700 dark:text-slate-300", children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "select",
@@ -1662,7 +1662,7 @@ var Select = React11.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx(
           solid.ChevronDownIcon,
           {
-            className: "absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 pointer-events-none"
+            className: "absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400 pointer-events-none"
           }
         )
       ] }),
@@ -1688,7 +1688,7 @@ function DropdownSelect({
     setIsOpen(false);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5 relative", children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-slate-700 dark:text-slate-300", children: label }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -1705,7 +1705,7 @@ function DropdownSelect({
           rounded-xl border border-white/55 dark:border-white/14
           bg-white/68 dark:bg-slate-900/44 backdrop-blur-xl
           px-3.5 py-2.5 text-base
-          text-gray-900 dark:text-white
+          text-slate-900 dark:text-white
           shadow-[inset_0_1px_0_rgba(255,255,255,0.88),0_10px_24px_-22px_rgba(15,23,42,0.72)]
           transition-all duration-200
           hover:bg-white/74 dark:hover:bg-slate-900/54
@@ -1714,13 +1714,13 @@ function DropdownSelect({
           ${error ? "border-ios-red ring-4 ring-ios-red/10" : ""}
         `,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: selectedOption ? "" : "text-gray-400", children: selectedOption?.label || placeholder }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: selectedOption ? "" : "text-slate-400", children: selectedOption?.label || placeholder }),
           /* @__PURE__ */ jsxRuntime.jsx(
             framerMotion.motion.div,
             {
               animate: { rotate: isOpen ? 180 : 0 },
               transition: { duration: 0.2 },
-              children: /* @__PURE__ */ jsxRuntime.jsx(solid.ChevronDownIcon, { className: "h-5 w-5 text-gray-400" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(solid.ChevronDownIcon, { className: "h-5 w-5 text-slate-400" })
             }
           )
         ]
@@ -1751,7 +1751,7 @@ function DropdownSelect({
               className: `
                       w-full flex items-center justify-between px-4 py-3 text-left
                       transition-colors duration-150
-                      ${option.value === value ? "bg-ios-blue/10 text-ios-blue" : "text-gray-900 dark:text-white hover:bg-white/55 dark:hover:bg-white/8"}
+                      ${option.value === value ? "bg-ios-blue/10 text-ios-blue" : "text-slate-900 dark:text-white hover:bg-white/40 dark:hover:bg-white/[0.08]"}
                       ${option.disabled ? "opacity-50 cursor-not-allowed" : ""}
                     `,
               children: [
@@ -2095,7 +2095,7 @@ var defaultFilterTypeConfig = {
   },
   default: {
     icon: HeroIcons.MapIcon,
-    className: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300"
+    className: "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300"
   }
 };
 function SearchBar({
@@ -2136,9 +2136,9 @@ function SearchBar({
     onCancel?.();
   }, [onSearchChange, onCancel]);
   const containerClasses = noBorder ? "flex flex-wrap items-center gap-2 p-3 bg-transparent" : `flex flex-wrap items-center gap-2 p-3
-       bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl
-       border border-gray-200/50 dark:border-gray-700/50
-       rounded-2xl shadow-sm
+       bg-white/40 dark:bg-white/[0.04] backdrop-blur-xl
+       border border-white/30 dark:border-white/10
+       rounded-2xl
        transition-all duration-200
        ${isFocused ? "ring-4 ring-[#007AFF]/10 border-[#007AFF]/30" : ""}`;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -2163,7 +2163,7 @@ function SearchBar({
               HeroIcons.MagnifyingGlassIcon,
               {
                 className: `absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 transition-colors duration-200
-              ${isFocused ? "text-[#007AFF]" : "text-gray-400"}`
+              ${isFocused ? "text-[#007AFF]" : "text-slate-400"}`
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -2176,7 +2176,7 @@ function SearchBar({
                 onChange: (e) => onSearchChange(e.target.value),
                 onFocus: handleFocus,
                 onBlur: handleBlur,
-                className: "w-full h-11 pl-10 pr-10 text-base bg-transparent\n              text-gray-900 dark:text-white\n              placeholder:text-gray-400 dark:placeholder:text-gray-500\n              focus:outline-none"
+                className: "w-full h-11 pl-10 pr-10 text-base bg-transparent\n              text-slate-900 dark:text-white\n              placeholder:text-slate-400 dark:placeholder:text-slate-500\n              focus:outline-none"
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: searchTerm && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2187,7 +2187,7 @@ function SearchBar({
                 exit: { opacity: 0, scale: 0.8 },
                 transition: { duration: 0.15 },
                 onClick: handleClear,
-                className: "absolute right-2 top-1/2 -translate-y-1/2 p-1.5 rounded-full\n                  bg-gray-200 dark:bg-gray-600\n                  text-gray-500 dark:text-gray-300\n                  hover:bg-gray-300 dark:hover:bg-gray-500\n                  transition-colors",
+                className: "absolute right-2 top-1/2 -translate-y-1/2 p-1.5 rounded-full\n                  bg-white/40 dark:bg-white/[0.08]\n                  text-slate-500 dark:text-slate-300\n                  hover:bg-white/60 dark:hover:bg-white/[0.12]\n                  transition-colors",
                 children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.XMarkIcon, { className: "h-4 w-4" })
               }
             ) })
@@ -2200,7 +2200,7 @@ function SearchBar({
                 chunkUZ3CMNUJ_js.triggerHaptic("light");
                 onClearAll();
               },
-              className: "p-2 rounded-xl text-gray-400 hover:text-gray-600 dark:hover:text-white\n              hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
+              className: "p-2 rounded-xl text-slate-400 hover:text-slate-600 dark:hover:text-white\n              hover:bg-white/40 dark:hover:bg-white/[0.08] transition-colors",
               title: t("clearFilters"),
               children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.XMarkIcon, { className: "h-5 w-5" })
             }
@@ -2238,21 +2238,21 @@ var colorClasses = {
     iconBg: "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/50 dark:text-emerald-400",
     activeGradient: "from-emerald-500 to-teal-600",
     activeRing: "ring-emerald-500",
-    valueColor: "text-gray-900 dark:text-white",
+    valueColor: "text-slate-900 dark:text-white",
     badgeBg: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300"
   },
   blue: {
     iconBg: "bg-blue-100 text-blue-600 dark:bg-blue-900/50 dark:text-blue-400",
     activeGradient: "from-blue-500 to-indigo-600",
     activeRing: "ring-blue-500",
-    valueColor: "text-gray-900 dark:text-white",
+    valueColor: "text-slate-900 dark:text-white",
     badgeBg: "bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
   },
   amber: {
     iconBg: "bg-amber-100 text-amber-600 dark:bg-amber-900/50 dark:text-amber-400",
     activeGradient: "from-amber-500 to-orange-600",
     activeRing: "ring-amber-500",
-    valueColor: "text-gray-900 dark:text-white",
+    valueColor: "text-slate-900 dark:text-white",
     badgeBg: "bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300",
     urgentValueColor: "text-amber-600 dark:text-amber-400"
   },
@@ -2260,21 +2260,21 @@ var colorClasses = {
     iconBg: "bg-orange-100 text-orange-600 dark:bg-orange-900/50 dark:text-orange-400",
     activeGradient: "from-orange-500 to-amber-600",
     activeRing: "ring-orange-500",
-    valueColor: "text-gray-900 dark:text-white",
+    valueColor: "text-slate-900 dark:text-white",
     badgeBg: "bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300"
   },
   indigo: {
     iconBg: "bg-indigo-100 text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400",
     activeGradient: "from-indigo-500 to-blue-600",
     activeRing: "ring-indigo-500",
-    valueColor: "text-gray-900 dark:text-white",
+    valueColor: "text-slate-900 dark:text-white",
     badgeBg: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300"
   },
   purple: {
     iconBg: "bg-purple-100 text-purple-600 dark:bg-purple-900/50 dark:text-purple-400",
     activeGradient: "from-purple-500 to-indigo-600",
     activeRing: "ring-purple-500",
-    valueColor: "text-gray-900 dark:text-white",
+    valueColor: "text-slate-900 dark:text-white",
     badgeBg: "bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300"
   },
   red: {
@@ -2323,7 +2323,7 @@ function StatCard({
                 {
                   title: info.title ?? "",
                   content: info.content ? info.content : info.blocks ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: info.blocks.map((block, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-gray-700 dark:text-gray-200", children: block.label }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-slate-700 dark:text-slate-200", children: block.label }),
                     /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap font-mono text-xs mt-1", children: block.content })
                   ] }, index)) }) : void 0
                 }
@@ -2342,7 +2342,7 @@ function StatCard({
           /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
-              className: `mt-1 text-sm ${isActive ? "text-white/75" : "text-gray-500 dark:text-gray-400"}`,
+              className: `mt-1 text-sm ${isActive ? "text-white/75" : "text-slate-500 dark:text-slate-400"}`,
               children: label
             }
           ),
@@ -2516,7 +2516,7 @@ function Pagination({
   };
   const pageNumbers = getPageNumbers2();
   if (totalPages <= 1) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6 dark:border-white/10 dark:bg-gray-800 rounded-b-xl ${className}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center justify-between border-t border-white/30 dark:border-white/10 bg-white/40 dark:bg-white/[0.04] backdrop-blur-xl px-4 py-3 sm:px-6 rounded-b-xl ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 justify-between sm:hidden", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
@@ -2524,7 +2524,7 @@ function Pagination({
           type: "button",
           onClick: () => onPageChange(currentPage - 1),
           disabled: currentPage === 1,
-          className: "relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed dark:border-white/10 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10",
+          className: "relative inline-flex items-center rounded-md border border-white/30 dark:border-white/10 bg-white/40 dark:bg-white/[0.04] px-4 py-2 text-sm font-medium text-slate-700 hover:bg-white/40 dark:hover:bg-white/[0.08] disabled:opacity-50 disabled:cursor-not-allowed dark:text-slate-200",
           children: t("previous")
         }
       ),
@@ -2534,13 +2534,13 @@ function Pagination({
           type: "button",
           onClick: () => onPageChange(currentPage + 1),
           disabled: currentPage === totalPages,
-          className: "relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed dark:border-white/10 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10",
+          className: "relative ml-3 inline-flex items-center rounded-md border border-white/30 dark:border-white/10 bg-white/40 dark:bg-white/[0.04] px-4 py-2 text-sm font-medium text-slate-700 hover:bg-white/40 dark:hover:bg-white/[0.08] disabled:opacity-50 disabled:cursor-not-allowed dark:text-slate-200",
           children: t("next")
         }
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:flex sm:flex-1 sm:items-center sm:justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-700 dark:text-gray-300", children: t("showingRange", { from, to, total: totalItems }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-slate-700 dark:text-slate-300", children: t("showingRange", { from, to, total: totalItems }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
         "nav",
         {
@@ -2553,7 +2553,7 @@ function Pagination({
                 type: "button",
                 onClick: () => onPageChange(currentPage - 1),
                 disabled: currentPage === 1,
-                className: "relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 disabled:opacity-50 disabled:cursor-not-allowed dark:ring-gray-700 dark:hover:bg-white/5",
+                className: "relative inline-flex items-center rounded-l-md px-2 py-2 text-slate-400 ring-1 ring-inset ring-white/30 dark:ring-white/10 hover:bg-white/40 dark:hover:bg-white/[0.08] focus:z-20 focus:outline-offset-0 disabled:opacity-50 disabled:cursor-not-allowed",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: t("previous") }),
                   /* @__PURE__ */ jsxRuntime.jsx(solid.ChevronLeftIcon, { "aria-hidden": "true", className: "size-5" })
@@ -2564,7 +2564,7 @@ function Pagination({
               (page, index) => page === "ellipsis" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
-                  className: "relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 focus:outline-offset-0 dark:text-gray-400 dark:ring-gray-700",
+                  className: "relative inline-flex items-center px-4 py-2 text-sm font-semibold text-slate-700 ring-1 ring-inset ring-white/30 dark:ring-white/10 focus:outline-offset-0 dark:text-slate-400",
                   children: "..."
                 },
                 `ellipsis-${index}`
@@ -2574,7 +2574,7 @@ function Pagination({
                   type: "button",
                   onClick: () => onPageChange(page),
                   "aria-current": currentPage === page ? "page" : void 0,
-                  className: currentPage === page ? "relative z-10 inline-flex items-center bg-indigo-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:focus-visible:outline-indigo-500" : "relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 dark:text-gray-200 dark:ring-gray-700 dark:hover:bg-white/5",
+                  className: currentPage === page ? "relative z-10 inline-flex items-center bg-indigo-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:focus-visible:outline-indigo-500" : "relative inline-flex items-center px-4 py-2 text-sm font-semibold text-slate-900 ring-1 ring-inset ring-white/30 dark:ring-white/10 hover:bg-white/40 dark:hover:bg-white/[0.08] focus:z-20 focus:outline-offset-0 dark:text-slate-200",
                   children: page
                 },
                 page
@@ -2586,7 +2586,7 @@ function Pagination({
                 type: "button",
                 onClick: () => onPageChange(currentPage + 1),
                 disabled: currentPage === totalPages,
-                className: "relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 disabled:opacity-50 disabled:cursor-not-allowed dark:ring-gray-700 dark:hover:bg-white/5",
+                className: "relative inline-flex items-center rounded-r-md px-2 py-2 text-slate-400 ring-1 ring-inset ring-white/30 dark:ring-white/10 hover:bg-white/40 dark:hover:bg-white/[0.08] focus:z-20 focus:outline-offset-0 disabled:opacity-50 disabled:cursor-not-allowed",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: t("next") }),
                   /* @__PURE__ */ jsxRuntime.jsx(solid.ChevronRightIcon, { "aria-hidden": "true", className: "size-5" })
@@ -2628,9 +2628,9 @@ var colorClasses2 = {
     dot: "bg-emerald-600 dark:bg-emerald-400"
   },
   gray: {
-    track: "border-gray-200 dark:border-gray-700",
-    indicator: "border-t-gray-600 dark:border-t-gray-400",
-    dot: "bg-gray-600 dark:bg-gray-400"
+    track: "border-slate-200 dark:border-slate-700",
+    indicator: "border-t-slate-600 dark:border-t-slate-400",
+    dot: "bg-slate-600 dark:bg-slate-400"
   },
   current: {
     track: "border-current/20",
@@ -2724,7 +2724,7 @@ function Spinner({
   if (label) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(SpinnerComponent, { size, color, className, ariaLabel }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: label })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-slate-500 dark:text-slate-400", children: label })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2746,12 +2746,12 @@ function LoadingOverlay({ show, message, blur = true }) {
       exit: { opacity: 0 },
       className: clsx.clsx(
         "fixed inset-0 z-50 flex flex-col items-center justify-center",
-        "bg-white/80 dark:bg-gray-900/80",
+        "bg-white/80 dark:bg-slate-900/80",
         blur && "backdrop-blur-sm"
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "lg", color: "blue", variant: "circle" }),
-        message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-gray-600 dark:text-gray-300 font-medium", children: message })
+        message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-slate-600 dark:text-slate-300 font-medium", children: message })
       ]
     }
   );
@@ -3043,7 +3043,7 @@ function SegmentedControl({
       ref: containerRef,
       className: `
         relative inline-flex items-center rounded-xl
-        bg-gray-100 dark:bg-gray-800
+        bg-white/40 dark:bg-white/[0.08]
         ${styles2.container}
         ${fullWidth ? "w-full" : ""}
         ${disabled ? "opacity-50 pointer-events-none" : ""}
@@ -3052,7 +3052,7 @@ function SegmentedControl({
         /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.div,
           {
-            className: "absolute top-1 bottom-1 rounded-lg bg-white dark:bg-gray-700 shadow-sm",
+            className: "absolute top-1 bottom-1 rounded-lg bg-white/75 dark:bg-white/[0.12] shadow-sm backdrop-blur-sm",
             initial: false,
             animate: {
               left: indicatorStyle.left,
@@ -3073,7 +3073,7 @@ function SegmentedControl({
               font-medium rounded-lg transition-colors duration-150
               ${styles2.segment}
               ${fullWidth ? "flex-1" : ""}
-              ${isSelected ? "text-gray-900 dark:text-white" : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"}
+              ${isSelected ? "text-slate-900 dark:text-white" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300"}
             `,
               children: [
                 segment.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: segment.icon }),
@@ -4110,10 +4110,10 @@ function Table({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, { value: { bleed, dense, grid, striped, loading, emptyState }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flow-root", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: clsx__default.default(className, "-mx-(--gutter) overflow-x-auto whitespace-nowrap"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx__default.default("inline-block min-w-full align-middle", !bleed && "sm:px-(--gutter)"), children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "min-w-full text-left text-sm/6 text-zinc-950 dark:text-white", children }) }) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, { value: { bleed, dense, grid, striped, loading, emptyState }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flow-root", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: clsx__default.default(className, "-mx-(--gutter) overflow-x-auto whitespace-nowrap"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx__default.default("inline-block min-w-full align-middle", !bleed && "sm:px-(--gutter)"), children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "min-w-full text-left text-sm/6 text-slate-950 dark:text-white", children }) }) }) }) });
 }
 function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("thead", { ...props, className: clsx__default.default(className, "text-zinc-500 dark:text-zinc-400") });
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", { ...props, className: clsx__default.default(className, "text-slate-500 dark:text-slate-400") });
 }
 function TableBody(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("tbody", { ...props });
@@ -4138,9 +4138,9 @@ function TableRow({
       className: clsx__default.default(
         className,
         href && "has-[[data-row-link][data-focus]]:outline-2 has-[[data-row-link][data-focus]]:-outline-offset-2 has-[[data-row-link][data-focus]]:outline-blue-500 dark:focus-within:bg-white/2.5",
-        striped && "even:bg-zinc-950/2.5 dark:even:bg-white/2.5",
-        href && striped && "hover:bg-zinc-950/5 dark:hover:bg-white/5",
-        href && !striped && "hover:bg-zinc-950/2.5 dark:hover:bg-white/2.5"
+        striped && "even:bg-slate-950/2.5 dark:even:bg-white/2.5",
+        href && striped && "hover:bg-slate-950/5 dark:hover:bg-white/5",
+        href && !striped && "hover:bg-slate-950/2.5 dark:hover:bg-white/2.5"
       )
     }
   ) });
@@ -4153,8 +4153,8 @@ function TableHeader({ className, ...props }) {
       ...props,
       className: clsx__default.default(
         className,
-        "border-b border-b-zinc-950/10 px-4 py-2 font-medium first:pl-(--gutter,--spacing(2)) last:pr-(--gutter,--spacing(2)) dark:border-b-white/10",
-        grid && "border-l border-l-zinc-950/5 first:border-l-0 dark:border-l-white/5",
+        "border-b border-b-white/20 dark:border-b-white/10 px-4 py-2 font-medium first:pl-(--gutter,--spacing(2)) last:pr-(--gutter,--spacing(2))",
+        grid && "border-l border-l-white/20 first:border-l-0 dark:border-l-white/10",
         !bleed && "sm:first:pl-1 sm:last:pr-1"
       )
     }
@@ -4172,8 +4172,8 @@ function TableCell({ className, children, ...props }) {
       className: clsx__default.default(
         className,
         "relative px-4 first:pl-(--gutter,--spacing(2)) last:pr-(--gutter,--spacing(2))",
-        !striped && "border-b border-zinc-950/5 dark:border-white/5",
-        grid && "border-l border-l-zinc-950/5 first:border-l-0 dark:border-l-white/5",
+        !striped && "border-b border-white/20 dark:border-white/[0.08]",
+        grid && "border-l border-l-white/20 first:border-l-0 dark:border-l-white/10",
         dense ? "py-2.5" : "py-4",
         !bleed && "sm:first:pl-1 sm:last:pr-1"
       ),
@@ -4223,10 +4223,10 @@ function SortableTableHeader({
       onClick: handleSort,
       className: clsx__default.default(
         className,
-        "border-b border-b-zinc-950/10 px-4 py-2 font-medium first:pl-(--gutter,--spacing(2)) last:pr-(--gutter,--spacing(2)) dark:border-b-white/10",
-        grid && "border-l border-l-zinc-950/5 first:border-l-0 dark:border-l-white/5",
+        "border-b border-b-white/20 dark:border-b-white/10 px-4 py-2 font-medium first:pl-(--gutter,--spacing(2)) last:pr-(--gutter,--spacing(2))",
+        grid && "border-l border-l-white/20 first:border-l-0 dark:border-l-white/10",
         !bleed && "sm:first:pl-1 sm:last:pr-1",
-        "cursor-pointer select-none hover:bg-zinc-950/5 dark:hover:bg-white/5 transition-colors",
+        "cursor-pointer select-none hover:bg-white/30 dark:hover:bg-white/[0.06] transition-colors",
         isActive && "text-[#007AFF] dark:text-[#0A84FF]"
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
@@ -4255,14 +4255,14 @@ function TableSkeletonRow({
     {
       className: clsx__default.default(
         "px-4 first:pl-(--gutter,--spacing(2)) last:pr-(--gutter,--spacing(2))",
-        "border-b border-zinc-950/5 dark:border-white/5",
+        "border-b border-white/20 dark:border-white/[0.08]",
         dense ? "py-2.5" : "py-4"
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: clsx__default.default(
-            "h-4 rounded bg-zinc-200 dark:bg-zinc-700 animate-pulse",
+            "h-4 rounded bg-slate-200 dark:bg-slate-700 animate-pulse",
             i === 0 ? "w-32" : i === columns - 1 ? "w-16" : "w-24"
           )
         }
@@ -4292,10 +4292,10 @@ function TableEmptyState({
       transition: getTransition(springPresets.gentle),
       className: "flex flex-col items-center gap-3",
       children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-12 rounded-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center text-zinc-400 dark:text-zinc-500", children: icon }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-12 rounded-full bg-white/40 dark:bg-white/[0.04] flex items-center justify-center text-slate-400 dark:text-slate-500", children: icon }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-medium text-zinc-900 dark:text-white", children: title }),
-          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-zinc-500 dark:text-zinc-400 max-w-sm", children: description })
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-medium text-slate-900 dark:text-white", children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-slate-500 dark:text-slate-400 max-w-sm", children: description })
         ] }),
         action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: action })
       ]
@@ -4326,9 +4326,9 @@ function AnimatedTableRow({
       className: clsx__default.default(
         className,
         href && "has-[[data-row-link][data-focus]]:outline-2 has-[[data-row-link][data-focus]]:-outline-offset-2 has-[[data-row-link][data-focus]]:outline-blue-500 dark:focus-within:bg-white/2.5",
-        striped && "even:bg-zinc-950/2.5 dark:even:bg-white/2.5",
-        href && striped && "hover:bg-zinc-950/5 dark:hover:bg-white/5",
-        href && !striped && "hover:bg-zinc-950/2.5 dark:hover:bg-white/2.5"
+        striped && "even:bg-slate-950/2.5 dark:even:bg-white/2.5",
+        href && striped && "hover:bg-slate-950/5 dark:hover:bg-white/5",
+        href && !striped && "hover:bg-slate-950/2.5 dark:hover:bg-white/2.5"
       )
     }
   ) });
@@ -4355,9 +4355,9 @@ function SelectableTableRow({
       className: clsx__default.default(
         className,
         href && "has-[[data-row-link][data-focus]]:outline-2 has-[[data-row-link][data-focus]]:-outline-offset-2 has-[[data-row-link][data-focus]]:outline-blue-500 dark:focus-within:bg-white/2.5",
-        striped && "even:bg-zinc-950/2.5 dark:even:bg-white/2.5",
-        href && striped && "hover:bg-zinc-950/5 dark:hover:bg-white/5",
-        href && !striped && "hover:bg-zinc-950/2.5 dark:hover:bg-white/2.5",
+        striped && "even:bg-slate-950/2.5 dark:even:bg-white/2.5",
+        href && striped && "hover:bg-slate-950/5 dark:hover:bg-white/5",
+        href && !striped && "hover:bg-slate-950/2.5 dark:hover:bg-white/2.5",
         selected && "bg-[#007AFF]/5 dark:bg-[#0A84FF]/10"
       ),
       children: [
@@ -4366,7 +4366,7 @@ function SelectableTableRow({
           {
             className: clsx__default.default(
               "px-4 first:pl-(--gutter,--spacing(2))",
-              "border-b border-zinc-950/5 dark:border-white/5",
+              "border-b border-white/20 dark:border-white/[0.08]",
               dense ? "py-2.5" : "py-4"
             ),
             children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -4381,7 +4381,7 @@ function SelectableTableRow({
                 transition: getTransition(springPresets.stiff),
                 className: clsx__default.default(
                   "h-5 w-5 rounded-full border-2 flex items-center justify-center transition-colors",
-                  selected ? "bg-[#007AFF] dark:bg-[#0A84FF] border-[#007AFF] dark:border-[#0A84FF]" : "border-zinc-300 dark:border-zinc-600"
+                  selected ? "bg-[#007AFF] dark:bg-[#0A84FF] border-[#007AFF] dark:border-[#0A84FF]" : "border-slate-300 dark:border-slate-600"
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: selected && /* @__PURE__ */ jsxRuntime.jsx(
                   framerMotion.motion.svg,
@@ -4419,9 +4419,9 @@ function EmptyState({
     action?.onClick();
   };
   const containerClasses = {
-    default: "bg-gray-50 dark:bg-gray-800/50 rounded-xl border border-dashed border-gray-300 dark:border-gray-600",
+    default: "liquid-surface rounded-xl border border-dashed border-white/30 dark:border-white/10",
     minimal: "",
-    card: "bg-white/70 dark:bg-gray-800/70 backdrop-blur-xl rounded-2xl shadow-lg shadow-black/5 border border-white/20 dark:border-gray-700/50"
+    card: "liquid-surface rounded-2xl border border-white/20 dark:border-white/10"
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -4435,7 +4435,7 @@ function EmptyState({
             animate: { scale: 1, opacity: 1 },
             transition: springPresets.bouncy,
             className: "mx-auto mb-4",
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700/50", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-8 w-8 text-gray-400 dark:text-gray-500" }) })
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex h-16 w-16 items-center justify-center rounded-full bg-white/40 dark:bg-white/[0.04]", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-8 w-8 text-slate-400 dark:text-slate-500" }) })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4445,8 +4445,8 @@ function EmptyState({
             animate: { y: 0, opacity: 1 },
             transition: { ...springPresets.default, delay: 0.1 },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-gray-900 dark:text-white", children: message }),
-              description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400 max-w-sm mx-auto", children: description })
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-slate-900 dark:text-white", children: message }),
+              description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-slate-500 dark:text-slate-400 max-w-sm mx-auto", children: description })
             ]
           }
         ),
@@ -4463,7 +4463,7 @@ function EmptyState({
                 whileTap: { scale: 0.97 },
                 transition: springPresets.stiff,
                 onClick: handleActionClick,
-                className: "inline-flex items-center justify-center rounded-full bg-blue-500 px-6 py-2.5 text-sm font-semibold text-white shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors",
+                className: "inline-flex items-center justify-center rounded-full bg-blue-500 px-6 py-2.5 text-sm font-semibold text-white shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900 transition-colors",
                 children: action.label
               }
             )
@@ -4506,8 +4506,8 @@ var errorTypeConfig = {
     icon: HeroIcons.DocumentMagnifyingGlassIcon,
     titleKey: "notFoundTitle",
     messageKey: "notFoundMessage",
-    iconBg: "bg-zinc-100 dark:bg-zinc-800",
-    iconColor: "text-zinc-400 dark:text-zinc-500"
+    iconBg: "bg-white/40 dark:bg-white/[0.04]",
+    iconColor: "text-slate-400 dark:text-slate-500"
   }
 };
 function ErrorState({
@@ -4543,10 +4543,10 @@ function ErrorState({
     setShowErrorDetails(!showErrorDetails);
   };
   const containerClasses = {
-    default: "bg-gray-50 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700",
+    default: "liquid-surface rounded-xl border border-white/30 dark:border-white/10",
     minimal: "",
-    card: "bg-white/70 dark:bg-gray-800/70 backdrop-blur-xl rounded-2xl shadow-lg shadow-black/5 border border-white/20 dark:border-gray-700/50",
-    fullscreen: "fixed inset-0 flex items-center justify-center bg-white dark:bg-gray-900 z-50"
+    card: "liquid-surface rounded-2xl border border-white/20 dark:border-white/10",
+    fullscreen: "fixed inset-0 flex items-center justify-center bg-white dark:bg-slate-900 z-50"
   };
   const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alert", className: variant === "fullscreen" ? "" : `px-6 py-12 text-center ${containerClasses[variant]}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -4566,9 +4566,9 @@ function ErrorState({
         animate: { y: 0, opacity: 1 },
         transition: { ...getTransition(springPresets.default), delay: 0.1 },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: title || t(config.titleKey) }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400 max-w-sm mx-auto", children: message || t(config.messageKey) }),
-          errorCode && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-xs text-gray-400 dark:text-gray-500 font-mono", children: t("errorCode", { code: errorCode }) })
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-slate-900 dark:text-white", children: title || t(config.titleKey) }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-slate-500 dark:text-slate-400 max-w-sm mx-auto", children: message || t(config.messageKey) }),
+          errorCode && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-xs text-slate-400 dark:text-slate-500 font-mono", children: t("errorCode", { code: errorCode }) })
         ]
       }
     ),
@@ -4587,7 +4587,7 @@ function ErrorState({
               transition: getTransition(springPresets.stiff),
               onClick: handleRetry,
               disabled: isRetrying,
-              className: "inline-flex items-center justify-center gap-2 rounded-full bg-[#007AFF] dark:bg-[#0A84FF] px-6 py-2.5 text-sm font-semibold text-white shadow-md hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-[#007AFF] focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-all disabled:opacity-50",
+              className: "inline-flex items-center justify-center gap-2 rounded-full bg-[#007AFF] dark:bg-[#0A84FF] px-6 py-2.5 text-sm font-semibold text-white shadow-md hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-[#007AFF] focus:ring-offset-2 dark:focus:ring-offset-slate-900 transition-all disabled:opacity-50",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: isRetrying ? /* @__PURE__ */ jsxRuntime.jsx(
                   framerMotion.motion.span,
@@ -4622,7 +4622,7 @@ function ErrorState({
                 chunkUZ3CMNUJ_js.triggerHaptic("light");
                 secondaryAction.onClick();
               },
-              className: "inline-flex items-center justify-center rounded-full px-6 py-2.5 text-sm font-semibold text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors",
+              className: "inline-flex items-center justify-center rounded-full px-6 py-2.5 text-sm font-semibold text-slate-700 dark:text-slate-300 hover:bg-white/40 dark:hover:bg-white/[0.08] focus:outline-none focus:ring-2 focus:ring-white/30 dark:ring-white/10 focus:ring-offset-2 dark:focus:ring-offset-slate-900 transition-colors",
               children: secondaryAction.label
             }
           )
@@ -4641,7 +4641,7 @@ function ErrorState({
             "button",
             {
               onClick: toggleDetails,
-              className: "text-xs text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 transition-colors",
+              className: "text-xs text-slate-400 dark:text-slate-500 hover:text-slate-600 dark:hover:text-slate-400 transition-colors",
               children: showErrorDetails ? t("hideDetails") : t("showDetails")
             }
           ),
@@ -4653,7 +4653,7 @@ function ErrorState({
               exit: { height: 0, opacity: 0 },
               transition: getTransition(springPresets.gentle),
               className: "overflow-hidden",
-              children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-3 p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-xs text-left text-gray-600 dark:text-gray-400 font-mono overflow-x-auto max-h-32", children: details })
+              children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-3 p-3 bg-white/40 dark:bg-white/[0.04] rounded-lg text-xs text-left text-slate-600 dark:text-slate-400 font-mono overflow-x-auto max-h-32", children: details })
             }
           ) })
         ]
@@ -4705,7 +4705,7 @@ function NoResultsState({
         animate: { scale: 1, opacity: 1 },
         transition: getTransition(springPresets.bouncy),
         className: "mx-auto mb-4",
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex h-16 w-16 items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800", children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.DocumentMagnifyingGlassIcon, { className: "h-8 w-8 text-zinc-400 dark:text-zinc-500" }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex h-16 w-16 items-center justify-center rounded-full bg-white/40 dark:bg-white/[0.04]", children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.DocumentMagnifyingGlassIcon, { className: "h-8 w-8 text-slate-400 dark:text-slate-500" }) })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4715,14 +4715,14 @@ function NoResultsState({
         animate: { y: 0, opacity: 1 },
         transition: { ...getTransition(springPresets.default), delay: 0.1 },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: t("noResultsFound") }),
-          searchTerm && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: t("noResultsFor", { searchTerm }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-slate-900 dark:text-white", children: t("noResultsFound") }),
+          searchTerm && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-slate-500 dark:text-slate-400", children: t("noResultsFor", { searchTerm }) }),
           suggestions && suggestions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400 dark:text-gray-500 mb-2", children: t("trySuggestions") }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-slate-400 dark:text-slate-500 mb-2", children: t("trySuggestions") }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-2", children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
-                className: "px-3 py-1 text-xs rounded-full bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400",
+                className: "px-3 py-1 text-xs rounded-full bg-white/40 dark:bg-white/[0.04] text-slate-600 dark:text-slate-400",
                 children: suggestion
               },
               index
@@ -4760,7 +4760,7 @@ function NoDataState({
   const resolvedTitle = title || t("noDataTitle");
   const resolvedMessage = message || t("noDataMessage");
   const resolvedActionLabel = actionLabel || t("createNew");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-12 text-center bg-gray-50 dark:bg-gray-800/50 rounded-xl border border-dashed border-gray-300 dark:border-gray-600", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-12 text-center liquid-surface rounded-xl border border-dashed border-white/30 dark:border-white/10", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       framerMotion.motion.div,
       {
@@ -4768,7 +4768,7 @@ function NoDataState({
         animate: { scale: 1, opacity: 1 },
         transition: getTransition(springPresets.bouncy),
         className: "mx-auto mb-4",
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700/50", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-8 w-8 text-gray-400 dark:text-gray-500" }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex h-16 w-16 items-center justify-center rounded-full bg-white/40 dark:bg-white/[0.04]", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-8 w-8 text-slate-400 dark:text-slate-500" }) })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4778,8 +4778,8 @@ function NoDataState({
         animate: { y: 0, opacity: 1 },
         transition: { ...getTransition(springPresets.default), delay: 0.1 },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-gray-900 dark:text-white", children: resolvedTitle }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400 max-w-sm mx-auto", children: resolvedMessage })
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-slate-900 dark:text-white", children: resolvedTitle }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-slate-500 dark:text-slate-400 max-w-sm mx-auto", children: resolvedMessage })
         ]
       }
     ),
@@ -5337,7 +5337,7 @@ var TONE_STYLES = {
   error: { container: "border-red-500/30 bg-red-500/20 text-red-600 dark:text-red-400", dot: "bg-red-500" },
   warning: { container: "border-amber-500/30 bg-amber-500/20 text-amber-600 dark:text-amber-400", dot: "bg-amber-500" },
   info: { container: "border-blue-500/30 bg-blue-500/20 text-blue-600 dark:text-blue-400", dot: "bg-blue-500" },
-  neutral: { container: "border-gray-500/30 bg-gray-500/20 text-gray-600 dark:text-gray-400", dot: "bg-gray-500" },
+  neutral: { container: "border-slate-500/30 bg-slate-500/20 text-slate-600 dark:text-slate-400", dot: "bg-slate-500" },
   success: { container: "border-emerald-500/30 bg-emerald-500/20 text-emerald-600 dark:text-emerald-400", dot: "bg-emerald-500" }
 };
 var LEGACY_STATUS_STYLES = {
@@ -5345,7 +5345,7 @@ var LEGACY_STATUS_STYLES = {
   approved: "border-green-200 bg-green-50 text-green-700 dark:border-green-700/30 dark:bg-green-900/20 dark:text-green-400",
   rejected: "border-red-200 bg-red-50 text-red-700 dark:border-red-700/30 dark:bg-red-900/20 dark:text-red-400",
   active: "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-700/30 dark:bg-emerald-900/20 dark:text-emerald-400",
-  inactive: "border-gray-200 bg-gray-50 text-gray-700 dark:border-gray-700/30 dark:bg-gray-900/20 dark:text-gray-400",
+  inactive: "border-white/30 dark:border-white/10 bg-slate-500/10 text-slate-700 dark:bg-slate-900/20 dark:text-slate-400",
   processing: "border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-700/30 dark:bg-blue-900/20 dark:text-blue-400",
   error: "border-red-200 bg-red-50 text-red-700 dark:border-red-700/30 dark:bg-red-900/20 dark:text-red-400",
   success: "border-green-200 bg-green-50 text-green-700 dark:border-green-700/30 dark:bg-green-900/20 dark:text-green-400"
@@ -5355,7 +5355,7 @@ var LEGACY_DOT_STYLES = {
   approved: "bg-green-500",
   rejected: "bg-red-500",
   active: "bg-emerald-500",
-  inactive: "bg-gray-500",
+  inactive: "bg-slate-500",
   processing: "bg-blue-500",
   error: "bg-red-500",
   success: "bg-green-500"
@@ -5364,7 +5364,7 @@ var SIZE_STYLES = {
   sm: "px-2 py-0.5 text-xs",
   md: "px-2.5 py-1 text-xs"
 };
-var DEFAULT_LEGACY_STYLE = "border-gray-200 bg-gray-50 text-gray-700 dark:border-gray-700/30 dark:bg-gray-900/20 dark:text-gray-400";
+var DEFAULT_LEGACY_STYLE = "border-white/30 dark:border-white/10 bg-slate-500/10 text-slate-700 dark:bg-slate-900/20 dark:text-slate-400";
 var StatusBadge = React11.forwardRef(function StatusBadge2({ status, label, size = "md", className = "", ...props }, ref) {
   if ("statusConfig" in props && props.statusConfig) {
     const configuredStatus = props.statusConfig[status];
@@ -5390,7 +5390,7 @@ var StatusBadge = React11.forwardRef(function StatusBadge2({ status, label, size
     );
   }
   const legacyStyle = LEGACY_STATUS_STYLES[status] ?? DEFAULT_LEGACY_STYLE;
-  const legacyDot = LEGACY_DOT_STYLES[status] ?? "bg-gray-500";
+  const legacyDot = LEGACY_DOT_STYLES[status] ?? "bg-slate-500";
   const resolvedLabel = label ?? status;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -5478,7 +5478,7 @@ function Dialog4({
       Headless6__namespace.DialogBackdrop,
       {
         transition: true,
-        className: "fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/25 px-2 py-2 transition duration-100 focus:outline-0 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:px-6 sm:py-8 lg:px-8 lg:py-16 dark:bg-zinc-950/50"
+        className: "fixed inset-0 flex w-screen justify-center overflow-y-auto bg-slate-950/25 backdrop-blur-sm px-2 py-2 transition duration-100 focus:outline-0 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:px-6 sm:py-8 lg:px-8 lg:py-16 dark:bg-slate-950/50"
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 w-screen overflow-y-auto pt-6 sm:pt-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid min-h-full grid-rows-[1fr_auto] justify-items-center sm:grid-rows-[1fr_auto_3fr] sm:p-4", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -5488,7 +5488,7 @@ function Dialog4({
         className: clsx__default.default(
           className,
           sizes2[size],
-          "row-start-2 w-full min-w-0 rounded-t-3xl bg-white p-(--gutter) shadow-lg ring-1 ring-zinc-950/10 [--gutter:--spacing(8)] sm:mb-auto sm:rounded-2xl dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline",
+          "row-start-2 w-full min-w-0 rounded-t-3xl bg-white/80 backdrop-blur-2xl p-(--gutter) shadow-lg ring-1 ring-white/30 [--gutter:--spacing(8)] sm:mb-auto sm:rounded-2xl dark:bg-slate-900/80 dark:ring-white/10 forced-colors:outline",
           "transition duration-100 will-change-transform data-closed:translate-y-12 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:data-closed:translate-y-0 sm:data-closed:data-enter:scale-95"
         ),
         children
@@ -5506,7 +5506,7 @@ function DialogTitle3({
       ...props,
       className: clsx__default.default(
         className,
-        "text-lg/6 font-semibold text-balance text-zinc-950 sm:text-base/6 dark:text-white"
+        "text-lg/6 font-semibold text-balance text-slate-950 sm:text-base/6 dark:text-white"
       )
     }
   );
@@ -5908,12 +5908,12 @@ function FormModal({
     onSubmit?.(e);
   };
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liquid-surface shrink-0 border-b border-gray-200 dark:border-white/10 rounded-t-2xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 sm:px-6 py-3 sm:py-4 flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liquid-surface shrink-0 border-b border-white/30 dark:border-white/10 rounded-t-2xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 sm:px-6 py-3 sm:py-4 flex items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
         icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: icon }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Headless6.DialogTitle, { className: "text-base sm:text-lg font-semibold text-gray-900 dark:text-white", children: title }),
-          subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-0.5", children: subtitle })
+          /* @__PURE__ */ jsxRuntime.jsx(Headless6.DialogTitle, { className: "text-base sm:text-lg font-semibold text-slate-900 dark:text-white", children: title }),
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs sm:text-sm text-slate-500 dark:text-slate-400 mt-0.5", children: subtitle })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -5927,7 +5927,7 @@ function FormModal({
       )
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 sm:px-6 py-4 sm:py-6", children }) }),
-    showFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liquid-surface shrink-0 border-t border-gray-200 dark:border-white/10 rounded-b-2xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 sm:px-6 py-3 sm:py-4 flex flex-col sm:flex-row justify-end gap-2 sm:gap-3", children: footer || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    showFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liquid-surface shrink-0 border-t border-white/30 dark:border-white/10 rounded-b-2xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 sm:px-6 py-3 sm:py-4 flex flex-col sm:flex-row justify-end gap-2 sm:gap-3", children: footer || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Button,
         {
@@ -7148,9 +7148,21 @@ function StepFormPage({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface overflow-hidden rounded-2xl", children: [
       gradient && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-1.5 w-full bg-gradient-to-r ${gradient}` }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5 sm:p-8", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-slate-600 dark:text-white/70", children: [
-          icon,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: label })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-slate-600 dark:text-white/70", children: [
+            icon,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: label })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onCancel,
+              className: "rounded-xl p-2 text-gray-400 transition hover:bg-white/60 dark:hover:bg-white/10",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.XMarkIcon, { className: "h-5 w-5" })
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mt-2 text-2xl font-bold tracking-tight text-slate-900 dark:text-white sm:text-3xl", children: steps[currentStep]?.title ?? title }),
         steps[currentStep]?.description ?? subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 max-w-xl text-sm text-slate-500 dark:text-white/60 sm:text-base", children: steps[currentStep]?.description ?? subtitle }) : null,
@@ -7386,7 +7398,7 @@ function StatusBadgeInternal({ status }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: `shrink-0 rounded-full px-2 py-0.5 text-xs font-medium ${status ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300" : "bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400"}`,
+      className: `shrink-0 rounded-full px-2 py-0.5 text-xs font-medium ${status ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300" : "bg-white/40 text-slate-500 dark:bg-white/[0.08] dark:text-slate-400"}`,
       children: status ? tCommon("active") : tCommon("inactive")
     }
   );
@@ -7422,14 +7434,14 @@ function EntityCard({
                 title,
                 subtitle,
                 iconContainerClassName: "shrink-0",
-                titleClassName: isPlainTextTitle(title) ? "truncate font-semibold text-gray-900 dark:text-white" : "font-semibold text-gray-900 dark:text-white",
-                subtitleClassName: "mt-0.5 text-xs text-gray-500 dark:text-gray-400"
+                titleClassName: isPlainTextTitle(title) ? "truncate font-semibold text-slate-900 dark:text-white" : "font-semibold text-slate-900 dark:text-white",
+                subtitleClassName: "mt-0.5 text-xs text-slate-500 dark:text-slate-400"
               }
             ),
             status !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StatusBadgeInternal, { status })
           ] }),
           children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3", children }),
-          footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 border-t border-neutral-400/20 pt-3 dark:border-gray-700 flex gap-2 justify-end opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: footer })
+          footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 border-t border-white/30 pt-3 dark:border-white/10 flex gap-2 justify-end opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: footer })
         ] })
       ]
     }
@@ -8606,7 +8618,7 @@ var colors = {
   fuchsia: "bg-fuchsia-400/15 text-fuchsia-700 group-data-hover:bg-fuchsia-400/25 dark:bg-fuchsia-400/10 dark:text-fuchsia-400 dark:group-data-hover:bg-fuchsia-400/20",
   pink: "bg-pink-400/15 text-pink-700 group-data-hover:bg-pink-400/25 dark:bg-pink-400/10 dark:text-pink-400 dark:group-data-hover:bg-pink-400/20",
   rose: "bg-rose-400/15 text-rose-700 group-data-hover:bg-rose-400/25 dark:bg-rose-400/10 dark:text-rose-400 dark:group-data-hover:bg-rose-400/20",
-  zinc: "bg-zinc-600/10 text-zinc-700 group-data-hover:bg-zinc-600/20 dark:bg-white/5 dark:text-zinc-400 dark:group-data-hover:bg-white/10"
+  zinc: "bg-slate-600/10 text-slate-700 group-data-hover:bg-slate-600/20 dark:bg-white/5 dark:text-slate-400 dark:group-data-hover:bg-white/10"
 };
 function Badge({ color = "zinc", className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -12781,9 +12793,9 @@ var ContactCard = React11__namespace.default.memo(function ContactCard2({
   phone
 }) {
   const t = nextIntl.useTranslations("contact");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl bg-gray-50 p-10", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base/7 font-semibold text-gray-900", children: t(type) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "mt-3 space-y-1 text-sm/6 text-gray-600", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl liquid-surface p-10", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base/7 font-semibold text-slate-900", children: t(type) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "mt-3 space-y-1 text-sm/6 text-slate-600", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "sr-only", children: "Email" }),
         /* @__PURE__ */ jsxRuntime.jsx("dd", { children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: `mailto:${email}`, className: "font-semibold text-blue-600", children: email }) })
@@ -12800,9 +12812,9 @@ var OfficeCard = React11__namespace.default.memo(function OfficeCard2({
   address,
   postalCode
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl bg-gray-50 p-10", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base/7 font-semibold text-gray-900", children: city }),
-    /* @__PURE__ */ jsxRuntime.jsxs("address", { className: "mt-3 space-y-1 text-sm/6 text-gray-600 not-italic", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl liquid-surface p-10", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base/7 font-semibold text-slate-900", children: city }),
+    /* @__PURE__ */ jsxRuntime.jsxs("address", { className: "mt-3 space-y-1 text-sm/6 text-slate-600 not-italic", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { children: address }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { children: postalCode })
     ] })
@@ -12812,8 +12824,8 @@ var ContactSection = React11__namespace.default.memo(
   function ContactSection2({ title, subtitle, children }) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-10 py-16 lg:grid-cols-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-4xl font-semibold tracking-tight text-pretty text-gray-900", children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-base/7 text-gray-600", children: subtitle })
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-4xl font-semibold tracking-tight text-pretty text-slate-900", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-base/7 text-slate-600", children: subtitle })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:col-span-2 lg:gap-8", children })
     ] });
@@ -12866,9 +12878,9 @@ function DropdownMenu({
         // Handle scrolling when menu won't fit in viewport
         "overflow-y-auto",
         // Popover background
-        "bg-white/75 backdrop-blur-xl dark:bg-zinc-800/75",
+        "bg-white/75 backdrop-blur-xl dark:bg-slate-800/75",
         // Shadows
-        "shadow-lg ring-1 ring-zinc-950/10 dark:ring-white/10 dark:ring-inset",
+        "shadow-lg ring-1 ring-white/30 dark:ring-white/10 dark:ring-inset",
         // Define grid at the menu level if subgrid is supported
         "supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]",
         // Transitions
@@ -12886,7 +12898,7 @@ function DropdownItem({
     // Base styles
     "group cursor-default rounded-lg px-3.5 py-2.5 focus:outline-hidden sm:px-3 sm:py-1.5",
     // Text styles
-    "text-left text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]",
+    "text-left text-base/6 text-slate-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]",
     // Focus
     "data-focus:bg-blue-500 data-focus:text-white",
     // Disabled state
@@ -12897,7 +12909,7 @@ function DropdownItem({
     "col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] items-center supports-[grid-template-columns:subgrid]:grid-cols-subgrid",
     // Icons
     "*:data-[slot=icon]:col-start-1 *:data-[slot=icon]:row-start-1 *:data-[slot=icon]:mr-2.5 *:data-[slot=icon]:-ml-0.5 *:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:mr-2 sm:*:data-[slot=icon]:size-4",
-    "*:data-[slot=icon]:text-zinc-500 data-focus:*:data-[slot=icon]:text-white dark:*:data-[slot=icon]:text-zinc-400 dark:data-focus:*:data-[slot=icon]:text-white",
+    "*:data-[slot=icon]:text-slate-500 data-focus:*:data-[slot=icon]:text-white dark:*:data-[slot=icon]:text-slate-400 dark:data-focus:*:data-[slot=icon]:text-white",
     // Avatar
     "*:data-[slot=avatar]:mr-2.5 *:data-[slot=avatar]:-ml-1 *:data-[slot=avatar]:size-6 sm:*:data-[slot=avatar]:mr-2 sm:*:data-[slot=avatar]:size-5"
   );
@@ -12921,7 +12933,7 @@ function DropdownDivider({
       ...props,
       className: clsx__default.default(
         className,
-        "col-span-full mx-3.5 my-1 h-px border-0 bg-zinc-950/5 sm:mx-3 dark:bg-white/10 forced-colors:bg-[CanvasText]"
+        "col-span-full mx-3.5 my-1 h-px border-0 bg-slate-950/5 sm:mx-3 dark:bg-white/10 forced-colors:bg-[CanvasText]"
       )
     }
   );
@@ -12942,24 +12954,24 @@ function DropdownLabel({
 }
 var colors2 = {
   "dark/zinc": [
-    "[--switch-bg-ring:var(--color-zinc-950)]/90 [--switch-bg:var(--color-zinc-900)] dark:[--switch-bg-ring:transparent] dark:[--switch-bg:var(--color-white)]/25",
-    "[--switch-ring:var(--color-zinc-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white] dark:[--switch-ring:var(--color-zinc-700)]/90"
+    "[--switch-bg-ring:var(--color-slate-950)]/90 [--switch-bg:var(--color-slate-900)] dark:[--switch-bg-ring:transparent] dark:[--switch-bg:var(--color-white)]/25",
+    "[--switch-ring:var(--color-slate-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white] dark:[--switch-ring:var(--color-slate-700)]/90"
   ],
   "dark/white": [
-    "[--switch-bg-ring:var(--color-zinc-950)]/90 [--switch-bg:var(--color-zinc-900)] dark:[--switch-bg-ring:transparent] dark:[--switch-bg:var(--color-white)]",
-    "[--switch-ring:var(--color-zinc-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white] dark:[--switch-ring:transparent] dark:[--switch:var(--color-zinc-900)]"
+    "[--switch-bg-ring:var(--color-slate-950)]/90 [--switch-bg:var(--color-slate-900)] dark:[--switch-bg-ring:transparent] dark:[--switch-bg:var(--color-white)]",
+    "[--switch-ring:var(--color-slate-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white] dark:[--switch-ring:transparent] dark:[--switch:var(--color-slate-900)]"
   ],
   dark: [
-    "[--switch-bg-ring:var(--color-zinc-950)]/90 [--switch-bg:var(--color-zinc-900)] dark:[--switch-bg-ring:var(--color-white)]/15",
-    "[--switch-ring:var(--color-zinc-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white]"
+    "[--switch-bg-ring:var(--color-slate-950)]/90 [--switch-bg:var(--color-slate-900)] dark:[--switch-bg-ring:var(--color-white)]/15",
+    "[--switch-ring:var(--color-slate-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white]"
   ],
   zinc: [
-    "[--switch-bg-ring:var(--color-zinc-700)]/90 [--switch-bg:var(--color-zinc-600)] dark:[--switch-bg-ring:transparent]",
-    "[--switch-shadow:var(--color-black)]/10 [--switch:white] [--switch-ring:var(--color-zinc-700)]/90"
+    "[--switch-bg-ring:var(--color-slate-700)]/90 [--switch-bg:var(--color-slate-600)] dark:[--switch-bg-ring:transparent]",
+    "[--switch-shadow:var(--color-black)]/10 [--switch:white] [--switch-ring:var(--color-slate-700)]/90"
   ],
   white: [
     "[--switch-bg-ring:var(--color-black)]/15 [--switch-bg:white] dark:[--switch-bg-ring:transparent]",
-    "[--switch-shadow:var(--color-black)]/10 [--switch-ring:transparent] [--switch:var(--color-zinc-950)]"
+    "[--switch-shadow:var(--color-black)]/10 [--switch-ring:transparent] [--switch:var(--color-slate-950)]"
   ],
   red: [
     "[--switch-bg-ring:var(--color-red-700)]/90 [--switch-bg:var(--color-red-600)] dark:[--switch-bg-ring:transparent]",
@@ -13049,7 +13061,7 @@ function Switch2({
         // Outline and background color in forced-colors mode so switch is still visible
         "forced-colors:outline forced-colors:[--switch-bg:Highlight] dark:forced-colors:[--switch-bg:Highlight]",
         // Unchecked
-        "bg-zinc-200 ring-1 ring-black/5 ring-inset dark:bg-white/5 dark:ring-white/15",
+        "bg-slate-200 ring-1 ring-black/5 ring-inset dark:bg-white/5 dark:ring-white/15",
         // Checked
         "data-checked:bg-(--switch-bg) data-checked:ring-(--switch-bg-ring) dark:data-checked:bg-(--switch-bg) dark:data-checked:ring-(--switch-bg-ring)",
         // Focus
@@ -13058,7 +13070,7 @@ function Switch2({
         "data-hover:ring-black/15 data-hover:data-checked:ring-(--switch-bg-ring)",
         "dark:data-hover:ring-white/25 dark:data-hover:data-checked:ring-(--switch-bg-ring)",
         // Disabled
-        "data-disabled:bg-zinc-200 data-disabled:opacity-50 data-disabled:data-checked:bg-zinc-200 data-disabled:data-checked:ring-black/5",
+        "data-disabled:bg-slate-200 data-disabled:opacity-50 data-disabled:data-checked:bg-slate-200 data-disabled:data-checked:ring-black/5",
         "dark:data-disabled:bg-white/15 dark:data-disabled:data-checked:bg-white/15 dark:data-disabled:data-checked:ring-white/15",
         // Color specific styles
         colors2[color]
@@ -13075,7 +13087,7 @@ function Switch2({
             // Invisible border so the switch is still visible in forced-colors mode
             "border border-transparent",
             // Unchecked
-            "bg-white shadow-sm ring-1 ring-black/5",
+            "bg-white/90 backdrop-blur-sm shadow-sm ring-1 ring-black/5",
             // Checked
             "group-data-checked:bg-(--switch) group-data-checked:shadow-(--switch-shadow) group-data-checked:ring-(--switch-ring)",
             "group-data-checked:translate-x-4 sm:group-data-checked:translate-x-3",
@@ -14158,5 +14170,5 @@ exports.useGeoMapState = useGeoMapState;
 exports.useNotifications = useNotifications;
 exports.usePlatformShellStore = usePlatformShellStore;
 exports.usePullToRefresh = usePullToRefresh;
-//# sourceMappingURL=chunk-5NRV2PE4.js.map
-//# sourceMappingURL=chunk-5NRV2PE4.js.map
+//# sourceMappingURL=chunk-W224TQQY.js.map
+//# sourceMappingURL=chunk-W224TQQY.js.map