@datatechsolutions/ui 3.13.0 → 3.14.0

package/dist/{chunk-5ETT54QS.js → chunk-FZUV7GNB.js}

@@ -1,9 +1,9 @@
 "use client";
 'use strict';
 
-var chunkY5VN4SPH_js = require('./chunk-Y5VN4SPH.js');
 var chunk22XPYFHJ_js = require('./chunk-22XPYFHJ.js');
-var chunkBHOT22QL_js = require('./chunk-BHOT22QL.js');
+var chunkY5VN4SPH_js = require('./chunk-Y5VN4SPH.js');
+var chunkMXQ2EYG2_js = require('./chunk-MXQ2EYG2.js');
 var chunkUZ3CMNUJ_js = require('./chunk-UZ3CMNUJ.js');
 var chunkS7KHTUHA_js = require('./chunk-S7KHTUHA.js');
 var React9 = require('react');
@@ -435,7 +435,7 @@ var Input = React9.forwardRef(
           initial: { opacity: 0, scale: 0.8 },
           animate: { opacity: 1, scale: 1 },
           exit: { opacity: 0, scale: 0.8 },
-          transition: chunkBHOT22QL_js.getTransition(chunkBHOT22QL_js.springPresets.bouncy),
+          transition: chunkMXQ2EYG2_js.getTransition(chunkMXQ2EYG2_js.springPresets.bouncy),
           children: /* @__PURE__ */ jsxRuntime.jsx(solid.CheckCircleIcon, { className: "h-5 w-5 text-ios-green dark:text-ios-green-dark" })
         }
       ) }),
@@ -1217,7 +1217,7 @@ function ToggleSwitch({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         framerMotion.motion.span,
         {
-          transition: chunkBHOT22QL_js.springPresets.bouncy,
+          transition: chunkMXQ2EYG2_js.springPresets.bouncy,
           className: `
           pointer-events-none inline-block rounded-full
           bg-white shadow-lg shadow-black/10
@@ -3117,7 +3117,7 @@ function SearchBar({
         }
       ),
       filtersModal && /* @__PURE__ */ jsxRuntime.jsxs(
-        chunkBHOT22QL_js.Button,
+        chunkMXQ2EYG2_js.Button,
         {
           type: "button",
           onClick: filtersModal.onOpen,
@@ -3183,7 +3183,7 @@ function SearchBar({
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[72vh] overflow-y-auto p-4 sm:p-5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: filtersModal.children }) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2 border-t liquid-divider p-4", children: [
               filtersModal.onClear && filtersModalCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                chunkBHOT22QL_js.Button,
+                chunkMXQ2EYG2_js.Button,
                 {
                   type: "button",
                   onClick: filtersModal.onClear,
@@ -3193,7 +3193,7 @@ function SearchBar({
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                chunkBHOT22QL_js.Button,
+                chunkMXQ2EYG2_js.Button,
                 {
                   type: "button",
                   onClick: filtersModal.onClose,
@@ -3960,7 +3960,7 @@ function SegmentedControl({
               left: indicatorStyle.left,
               width: indicatorStyle.width
             },
-            transition: chunkBHOT22QL_js.springPresets.default
+            transition: chunkMXQ2EYG2_js.springPresets.default
           }
         ),
         normalizedSegments.map((segment) => {
@@ -4018,15 +4018,15 @@ var sizeConfig2 = {
 var variantConfig = {
   default: {
     active: "bg-[#007AFF]",
-    inactive: "bg-gray-300 dark:bg-gray-600"
+    inactive: "bg-slate-300 dark:bg-slate-600"
   },
   light: {
     active: "bg-white",
     inactive: "bg-white/40"
   },
   dark: {
-    active: "bg-gray-900",
-    inactive: "bg-gray-900/30"
+    active: "bg-slate-900",
+    inactive: "bg-slate-900/30"
   }
 };
 function PageIndicator({
@@ -4159,7 +4159,7 @@ function ProgressIndicator({
                 ${showNumbers ? "w-8 h-8 text-sm font-medium" : "w-3 h-3"}
                 ${isCompleted ? "bg-[#34C759] text-white" : ""}
                 ${isCurrent ? "bg-[#007AFF] text-white ring-4 ring-indigo-500/70/20" : ""}
-                ${isPending ? "bg-gray-200 dark:bg-gray-700 text-gray-500" : ""}
+                ${isPending ? "bg-slate-200 dark:bg-slate-700 text-slate-500" : ""}
               `,
           animate: {
             scale: isCurrent ? 1.1 : 1
@@ -4177,7 +4177,7 @@ function ProgressIndicator({
         {
           className: `
                   w-8 h-0.5 mx-1
-                  ${isCompleted ? "bg-[#34C759]" : "bg-gray-200 dark:bg-gray-700"}
+                  ${isCompleted ? "bg-[#34C759]" : "bg-slate-200 dark:bg-slate-700"}
                 `
         }
       )
@@ -4559,15 +4559,15 @@ function PullToRefreshIndicator({
         "div",
         {
           className: `
-          h-8 w-8 rounded-full bg-white dark:bg-gray-800
-          shadow-lg border border-gray-200 dark:border-gray-700
+          h-8 w-8 rounded-full bg-white dark:bg-slate-800
+          shadow-lg border border-slate-200 dark:border-slate-700
           flex items-center justify-center
           transition-transform duration-200
         `,
-          children: isRefreshing ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 w-5 animate-spin motion-reduce:animate-none rounded-full border-2 border-gray-300 border-t-blue-500" }) : /* @__PURE__ */ jsxRuntime.jsx(
+          children: isRefreshing ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 w-5 animate-spin motion-reduce:animate-none rounded-full border-2 border-slate-300 border-t-blue-500" }) : /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
             {
-              className: "h-5 w-5 text-gray-600 dark:text-gray-400",
+              className: "h-5 w-5 text-slate-600 dark:text-slate-400",
               style: { transform: `rotate(${rotation}deg)` },
               fill: "none",
               viewBox: "0 0 24 24",
@@ -4982,7 +4982,7 @@ function TableCell({ className, children, ...props }) {
       ),
       children: [
         href && /* @__PURE__ */ jsxRuntime.jsx(
-          chunkBHOT22QL_js.Link,
+          chunkMXQ2EYG2_js.Link,
           {
             "data-row-link": true,
             href,
@@ -5039,7 +5039,7 @@ function SortableTableHeader({
           {
             initial: false,
             animate: { opacity: 1 },
-            transition: chunkBHOT22QL_js.getTransition(chunkBHOT22QL_js.springPresets.stiff),
+            transition: chunkMXQ2EYG2_js.getTransition(chunkMXQ2EYG2_js.springPresets.stiff),
             className: "flex-shrink-0",
             children: direction === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ChevronUpIcon, { className: "h-4 w-4" }) : direction === "desc" ? /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ChevronDownIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ChevronUpDownIcon, { className: "h-4 w-4 opacity-40" })
           }
@@ -5092,7 +5092,7 @@ function TableEmptyState({
     {
       initial: { opacity: 0, y: 10 },
       animate: { opacity: 1, y: 0 },
-      transition: chunkBHOT22QL_js.getTransition(chunkBHOT22QL_js.springPresets.gentle),
+      transition: chunkMXQ2EYG2_js.getTransition(chunkMXQ2EYG2_js.springPresets.gentle),
       className: "flex flex-col items-center gap-3",
       children: [
         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 }),
@@ -5122,7 +5122,7 @@ function AnimatedTableRow({
       animate: { opacity: 1, y: 0 },
       exit: { opacity: 0, x: -20 },
       transition: {
-        ...chunkBHOT22QL_js.getTransition(chunkBHOT22QL_js.springPresets.gentle),
+        ...chunkMXQ2EYG2_js.getTransition(chunkMXQ2EYG2_js.springPresets.gentle),
         delay: index * 0.03
       },
       ...restProps,
@@ -5181,7 +5181,7 @@ function SelectableTableRow({
                 "aria-label": "Select row",
                 onClick: handleSelect,
                 whileTap: { scale: 0.9 },
-                transition: chunkBHOT22QL_js.getTransition(chunkBHOT22QL_js.springPresets.stiff),
+                transition: chunkMXQ2EYG2_js.getTransition(chunkMXQ2EYG2_js.springPresets.stiff),
                 className: clsx4__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-slate-300 dark:border-slate-600"
@@ -5192,7 +5192,7 @@ function SelectableTableRow({
                     initial: { scale: 0 },
                     animate: { scale: 1 },
                     exit: { scale: 0 },
-                    transition: chunkBHOT22QL_js.getTransition(chunkBHOT22QL_js.springPresets.bouncy),
+                    transition: chunkMXQ2EYG2_js.getTransition(chunkMXQ2EYG2_js.springPresets.bouncy),
                     className: "h-3 w-3 text-white",
                     fill: "none",
                     viewBox: "0 0 24 24",
@@ -5236,7 +5236,7 @@ function EmptyState({
           {
             initial: { scale: 0.8, opacity: 0 },
             animate: { scale: 1, opacity: 1 },
-            transition: chunkBHOT22QL_js.springPresets.bouncy,
+            transition: chunkMXQ2EYG2_js.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 border border-white/60 bg-white/75 shadow-sm backdrop-blur-xl dark:border-white/12 dark:bg-white/8", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-8 w-8 text-slate-600 dark:text-slate-300" }) })
           }
@@ -5246,7 +5246,7 @@ function EmptyState({
           {
             initial: { y: 10, opacity: 0 },
             animate: { y: 0, opacity: 1 },
-            transition: { ...chunkBHOT22QL_js.springPresets.default, delay: 0.1 },
+            transition: { ...chunkMXQ2EYG2_js.springPresets.default, delay: 0.1 },
             children: [
               /* @__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 })
@@ -5258,9 +5258,9 @@ function EmptyState({
           {
             initial: { y: 10, opacity: 0 },
             animate: { y: 0, opacity: 1 },
-            transition: { ...chunkBHOT22QL_js.springPresets.default, delay: 0.2 },
+            transition: { ...chunkMXQ2EYG2_js.springPresets.default, delay: 0.2 },
             className: "mt-6",
-            children: /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { color: "ios-glass-blue", onClick: handleActionClick, children: action.label })
+            children: /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { color: "ios-glass-blue", onClick: handleActionClick, children: action.label })
           }
         )
       ]
@@ -5348,7 +5348,7 @@ function ErrorState({
       {
         initial: { scale: 0.8, opacity: 0 },
         animate: { scale: 1, opacity: 1 },
-        transition: chunkBHOT22QL_js.getTransition(chunkBHOT22QL_js.springPresets.bouncy),
+        transition: chunkMXQ2EYG2_js.getTransition(chunkMXQ2EYG2_js.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 ${config.iconBg}`, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: `h-8 w-8 ${config.iconColor}` }) })
       }
@@ -5358,7 +5358,7 @@ function ErrorState({
       {
         initial: { y: 10, opacity: 0 },
         animate: { y: 0, opacity: 1 },
-        transition: { ...chunkBHOT22QL_js.getTransition(chunkBHOT22QL_js.springPresets.default), delay: 0.1 },
+        transition: { ...chunkMXQ2EYG2_js.getTransition(chunkMXQ2EYG2_js.springPresets.default), delay: 0.1 },
         children: [
           /* @__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) }),
@@ -5371,11 +5371,11 @@ function ErrorState({
       {
         initial: { y: 10, opacity: 0 },
         animate: { y: 0, opacity: 1 },
-        transition: { ...chunkBHOT22QL_js.getTransition(chunkBHOT22QL_js.springPresets.default), delay: 0.2 },
+        transition: { ...chunkMXQ2EYG2_js.getTransition(chunkMXQ2EYG2_js.springPresets.default), delay: 0.2 },
         className: "mt-6 flex flex-col sm:flex-row items-center justify-center gap-3",
         children: [
           onRetry && /* @__PURE__ */ jsxRuntime.jsxs(
-            chunkBHOT22QL_js.Button,
+            chunkMXQ2EYG2_js.Button,
             {
               color: "ios-glass-blue",
               onClick: handleRetry,
@@ -5389,7 +5389,7 @@ function ErrorState({
             }
           ),
           secondaryAction && /* @__PURE__ */ jsxRuntime.jsx(
-            chunkBHOT22QL_js.Button,
+            chunkMXQ2EYG2_js.Button,
             {
               plain: true,
               onClick: () => {
@@ -5407,14 +5407,16 @@ function ErrorState({
       {
         initial: { y: 10, opacity: 0 },
         animate: { y: 0, opacity: 1 },
-        transition: { ...chunkBHOT22QL_js.getTransition(chunkBHOT22QL_js.springPresets.default), delay: 0.3 },
+        transition: { ...chunkMXQ2EYG2_js.getTransition(chunkMXQ2EYG2_js.springPresets.default), delay: 0.3 },
         className: "mt-6",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+            chunkMXQ2EYG2_js.Button,
             {
+              type: "button",
+              plain: true,
+              size: "xs",
               onClick: toggleDetails,
-              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")
             }
           ),
@@ -5424,7 +5426,7 @@ function ErrorState({
               initial: { height: 0, opacity: 0 },
               animate: { height: "auto", opacity: 1 },
               exit: { height: 0, opacity: 0 },
-              transition: chunkBHOT22QL_js.getTransition(chunkBHOT22QL_js.springPresets.gentle),
+              transition: chunkMXQ2EYG2_js.getTransition(chunkMXQ2EYG2_js.springPresets.gentle),
               className: "overflow-hidden",
               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 })
             }
@@ -5476,7 +5478,7 @@ function NoResultsState({
       {
         initial: { scale: 0.8, opacity: 0 },
         animate: { scale: 1, opacity: 1 },
-        transition: chunkBHOT22QL_js.getTransition(chunkBHOT22QL_js.springPresets.bouncy),
+        transition: chunkMXQ2EYG2_js.getTransition(chunkMXQ2EYG2_js.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 border border-white/60 bg-white/75 shadow-sm backdrop-blur-xl dark:border-white/12 dark:bg-white/8", children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.DocumentMagnifyingGlassIcon, { className: "h-8 w-8 text-slate-600 dark:text-slate-300" }) })
       }
@@ -5486,7 +5488,7 @@ function NoResultsState({
       {
         initial: { y: 10, opacity: 0 },
         animate: { y: 0, opacity: 1 },
-        transition: { ...chunkBHOT22QL_js.getTransition(chunkBHOT22QL_js.springPresets.default), delay: 0.1 },
+        transition: { ...chunkMXQ2EYG2_js.getTransition(chunkMXQ2EYG2_js.springPresets.default), delay: 0.1 },
         children: [
           /* @__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 }) }),
@@ -5506,10 +5508,10 @@ function NoResultsState({
             {
               initial: { y: 10, opacity: 0 },
               animate: { y: 0, opacity: 1 },
-              transition: { ...chunkBHOT22QL_js.getTransition(chunkBHOT22QL_js.springPresets.default), delay: 0.2 },
+              transition: { ...chunkMXQ2EYG2_js.getTransition(chunkMXQ2EYG2_js.springPresets.default), delay: 0.2 },
               className: "mt-6",
               children: /* @__PURE__ */ jsxRuntime.jsx(
-                chunkBHOT22QL_js.Button,
+                chunkMXQ2EYG2_js.Button,
                 {
                   color: "ios-glass-blue",
                   onClick: () => {
@@ -5544,7 +5546,7 @@ function NoDataState({
       {
         initial: { scale: 0.8, opacity: 0 },
         animate: { scale: 1, opacity: 1 },
-        transition: chunkBHOT22QL_js.getTransition(chunkBHOT22QL_js.springPresets.bouncy),
+        transition: chunkMXQ2EYG2_js.getTransition(chunkMXQ2EYG2_js.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 border border-white/60 bg-white/75 shadow-sm backdrop-blur-xl dark:border-white/12 dark:bg-white/8", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-8 w-8 text-slate-600 dark:text-slate-300" }) })
       }
@@ -5554,7 +5556,7 @@ function NoDataState({
       {
         initial: { y: 10, opacity: 0 },
         animate: { y: 0, opacity: 1 },
-        transition: { ...chunkBHOT22QL_js.getTransition(chunkBHOT22QL_js.springPresets.default), delay: 0.1 },
+        transition: { ...chunkMXQ2EYG2_js.getTransition(chunkMXQ2EYG2_js.springPresets.default), delay: 0.1 },
         children: [
           /* @__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 })
@@ -5566,10 +5568,10 @@ function NoDataState({
       {
         initial: { y: 10, opacity: 0 },
         animate: { y: 0, opacity: 1 },
-        transition: { ...chunkBHOT22QL_js.getTransition(chunkBHOT22QL_js.springPresets.default), delay: 0.2 },
+        transition: { ...chunkMXQ2EYG2_js.getTransition(chunkMXQ2EYG2_js.springPresets.default), delay: 0.2 },
         className: "mt-6",
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          chunkBHOT22QL_js.Button,
+          chunkMXQ2EYG2_js.Button,
           {
             color: "ios-glass-blue",
             onClick: () => {
@@ -5642,7 +5644,7 @@ function DynamicIsland({
       layout: true,
       initial: false,
       animate: sizeVariants[internalState],
-      transition: chunkBHOT22QL_js.springPresets.bouncy,
+      transition: chunkMXQ2EYG2_js.springPresets.bouncy,
       onClick: handleTap,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full overflow-hidden bg-black rounded-[inherit]", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
         framerMotion.motion.div,
@@ -5936,8 +5938,8 @@ function NotificationDrawer({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-5 h-px bg-gradient-to-r from-transparent via-gray-200/80 to-transparent dark:via-white/10" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto px-5 py-4", children: history.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-20 text-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BellIcon, { className: "h-12 w-12 text-gray-300 dark:text-gray-600 mb-3" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-400 dark:text-gray-500", children: t("empty") })
+            /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BellIcon, { className: "h-12 w-12 text-slate-300 dark:text-slate-600 mb-3" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-slate-400 dark:text-slate-500", children: t("empty") })
           ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2.5", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: history.map((item) => {
             const style = NOTIFICATION_TYPE_STYLES[item.type];
             const Icon = style.icon;
@@ -5952,16 +5954,16 @@ function NotificationDrawer({
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: `mt-0.5 flex-shrink-0 ${style.color}`, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-5 w-5" }) }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white truncate", children: item.title }),
-                    item.message ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400 line-clamp-2", children: item.message }) : null,
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-[11px] text-gray-400 dark:text-gray-500", children: formatTimeAgo(item.timestamp, t) })
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-slate-900 dark:text-white truncate", children: item.title }),
+                    item.message ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-slate-500 dark:text-slate-400 line-clamp-2", children: item.message }) : null,
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-[11px] text-slate-400 dark:text-slate-500", children: formatTimeAgo(item.timestamp, t) })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "button",
                     {
                       type: "button",
                       onClick: () => onRemove(item.id),
-                      className: "absolute right-2.5 top-2.5 rounded-lg p-1 text-gray-300 opacity-0 transition-all group-hover:opacity-100 group-focus-within:opacity-100 hover:text-gray-500 active:scale-95 dark:text-gray-600 dark:hover:text-gray-400",
+                      className: "absolute right-2.5 top-2.5 rounded-lg p-1 text-slate-300 opacity-0 transition-all group-hover:opacity-100 group-focus-within:opacity-100 hover:text-slate-500 active:scale-95 dark:text-slate-600 dark:hover:text-slate-400",
                       "aria-label": t("dismiss"),
                       children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.XMarkIcon, { className: "h-3.5 w-3.5" })
                     }
@@ -6171,17 +6173,16 @@ function AccentBar({ gradient, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-1.5 w-full bg-gradient-to-r ${gradient} ${className ?? ""}` });
 }
 function CloseBtn({ onClick, label }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-4 top-4 z-10", "data-testid": "modal-close", children: /* @__PURE__ */ jsxRuntime.jsx(
+    chunkMXQ2EYG2_js.IconButton,
     {
-      type: "button",
+      label,
+      variant: "ghost",
+      size: "sm",
       onClick,
-      "aria-label": label,
-      "data-testid": "modal-close",
-      className: "absolute right-4 top-4 z-10 inline-flex h-9 w-9 items-center justify-center rounded-xl text-slate-500 transition hover:bg-white/40 hover:text-slate-700 dark:text-slate-300 dark:hover:bg-white/[0.08] dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-2",
-      children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.XMarkIcon, { className: "h-5 w-5" })
+      icon: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.XMarkIcon, { className: "h-5 w-5" })
     }
-  );
+  ) });
 }
 function SidebarLayout({
   sidebarElement,
@@ -6392,30 +6393,33 @@ function GlassModal({
   panelClassName,
   contentClassName,
   overlayTestId,
-  panelTestId
+  panelTestId,
+  closeOnBackdrop = true
 }) {
   const hasTitle = !!title;
+  const dialogOnClose = closeOnBackdrop ? onClose : () => {
+  };
   const sidebarElement = React9.Children.toArray(children).find(
     (c) => React9.isValidElement(c) && isSlotType(c, SIDEBAR_TYPE)
   );
   const footerElement = findSlot(children, FOOTER_TYPE);
   const nonSlotChildren = filterNonSlots(children);
   const resolvedFooter = footer ?? (footerElement ? footerElement.props.children : void 0) ?? (showFormFooter ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row justify-end gap-2 sm:gap-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { type: "button", onClick: onClose, disabled: isLoading, outline: true, className: "w-full sm:w-auto", "data-testid": "form-modal-cancel", children: cancelLabel ?? "Cancel" }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { type: "submit", disabled: submitDisabled, loading: isLoading, loadingText: submitLabel, color: "ios-glass-blue", className: "w-full sm:w-auto", "data-testid": "form-modal-submit", children: submitLabel ?? "Save" })
+    /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", onClick: onClose, disabled: isLoading, outline: true, className: "w-full sm:w-auto", "data-testid": "form-modal-cancel", children: cancelLabel ?? "Cancel" }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "submit", disabled: submitDisabled, loading: isLoading, loadingText: submitLabel, color: "ios-glass-blue", className: "w-full sm:w-auto", "data-testid": "form-modal-submit", children: submitLabel ?? "Save" })
   ] }) : void 0);
   const handleSubmit = React9.useCallback((event) => {
     event.preventDefault();
     onSubmit?.(event);
   }, [onSubmit]);
   if (!hasTitle) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Headless3.Dialog, { open, onClose, className: `relative ${zIndex}`, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Headless3.Dialog, { open, onClose: dialogOnClose, className: `relative ${zIndex}`, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Headless3.DialogBackdrop, { className: "fixed inset-0 bg-slate-900/40 backdrop-blur-md dark:bg-black/50", "data-testid": overlayTestId }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClassName ?? "fixed inset-0 flex items-center justify-center overflow-y-auto p-3 sm:p-5 lg:p-6", children: /* @__PURE__ */ jsxRuntime.jsx(Headless3.DialogPanel, { className: panelClassName ?? "rounded-2xl", "data-testid": panelTestId, children }) })
     ] });
   }
   if (sidebar && !sidebarElement) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Headless3.Dialog, { open, onClose, className: `relative ${zIndex}`, "aria-labelledby": "modal-title", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Headless3.Dialog, { open, onClose: dialogOnClose, className: `relative ${zIndex}`, "aria-labelledby": "modal-title", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Headless3.DialogBackdrop, { className: "fixed inset-0 bg-slate-900/40 backdrop-blur-md dark:bg-black/50", "data-testid": overlayTestId }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 flex items-center justify-center overflow-y-auto p-2 sm:p-4 lg:p-6", children: /* @__PURE__ */ jsxRuntime.jsx(Headless3.DialogPanel, { className: `w-full max-w-[90vw] xl:max-w-[1400px] overflow-hidden rounded-2xl liquid-surface-strong shadow-[0_40px_100px_-30px_rgba(0,0,0,0.55)] ${className}`, "data-testid": panelTestId, children: /* @__PURE__ */ jsxRuntime.jsx(
         PropBasedSidebarLayout,
@@ -6435,7 +6439,7 @@ function GlassModal({
     ] });
   }
   if (sidebarElement) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Headless3.Dialog, { open, onClose, className: `relative ${zIndex}`, "aria-labelledby": "modal-title", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Headless3.Dialog, { open, onClose: dialogOnClose, className: `relative ${zIndex}`, "aria-labelledby": "modal-title", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Headless3.DialogBackdrop, { className: "fixed inset-0 bg-slate-900/40 backdrop-blur-md dark:bg-black/50", "data-testid": overlayTestId }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 flex items-center justify-center overflow-y-auto p-2 sm:p-4 lg:p-6", children: /* @__PURE__ */ jsxRuntime.jsx(Headless3.DialogPanel, { className: `w-full max-w-[90vw] xl:max-w-[1400px] overflow-hidden rounded-2xl liquid-surface-strong shadow-[0_40px_100px_-30px_rgba(0,0,0,0.55)] ${className}`, "data-testid": panelTestId, children: /* @__PURE__ */ jsxRuntime.jsx(
         SidebarLayout,
@@ -6473,7 +6477,7 @@ function GlassModal({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[72vh] overflow-y-auto px-5 pb-5 sm:px-8 sm:pb-8", children: nonSlotChildren }),
     resolvedFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "modal-footer", className: "border-t border-white/20 px-5 py-4 dark:border-white/10 sm:px-8", children: resolvedFooter })
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsxs(Headless3.Dialog, { open, onClose, className: `relative ${zIndex}`, "aria-labelledby": "modal-title", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Headless3.Dialog, { open, onClose: dialogOnClose, className: `relative ${zIndex}`, "aria-labelledby": "modal-title", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Headless3.DialogBackdrop, { className: "fixed inset-0 bg-slate-900/40 backdrop-blur-md dark:bg-black/50", "data-testid": overlayTestId }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 overflow-y-auto p-3 sm:p-6", children: /* @__PURE__ */ jsxRuntime.jsx(Headless3.DialogPanel, { className: `liquid-surface-strong w-full overflow-hidden rounded-2xl mx-auto mt-[4vh] sm:mt-[8vh] ${SIZE_CLASSES[maxWidth]} ${className}`, "data-testid": panelTestId, children: onSubmit ? /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, children: inner }) : inner }) })
   ] });
@@ -6496,7 +6500,7 @@ function Text({ className, ...props }) {
 }
 function TextLink({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkBHOT22QL_js.Link,
+    chunkMXQ2EYG2_js.Link,
     {
       ...props,
       className: clsx4__default.default(
@@ -7050,8 +7054,8 @@ function DatePicker({
                   type: "button",
                   onClick: handlePrevMonth,
                   "aria-label": t("previousMonth"),
-                  className: "p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ChevronLeftIcon, { className: "h-5 w-5 text-gray-500 dark:text-gray-400" })
+                  className: "p-1.5 rounded-lg hover:bg-white/40 dark:hover:bg-white/[0.04] transition-colors",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ChevronLeftIcon, { className: "h-5 w-5 text-slate-500 dark:text-slate-400" })
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -7059,7 +7063,7 @@ function DatePicker({
                 {
                   type: "button",
                   onClick: () => setViewMode("year-month"),
-                  className: "px-3 py-1 rounded-lg font-semibold text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors capitalize",
+                  className: "px-3 py-1 rounded-lg font-semibold text-slate-900 dark:text-white hover:bg-white/40 dark:hover:bg-white/[0.04] transition-colors capitalize",
                   children: monthYearLabel
                 }
               ),
@@ -7069,15 +7073,15 @@ function DatePicker({
                   type: "button",
                   onClick: handleNextMonth,
                   "aria-label": t("nextMonth"),
-                  className: "p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ChevronRightIcon, { className: "h-5 w-5 text-gray-500 dark:text-gray-400" })
+                  className: "p-1.5 rounded-lg hover:bg-white/40 dark:hover:bg-white/[0.04] transition-colors",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ChevronRightIcon, { className: "h-5 w-5 text-slate-500 dark:text-slate-400" })
                 }
               )
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-0.5 mb-1", children: dayNames.map((name, i) => /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: "text-center text-xs font-medium text-gray-400 dark:text-gray-500 uppercase py-1",
+                className: "text-center text-xs font-medium text-slate-400 dark:text-slate-500 uppercase py-1",
                 children: name
               },
               `${name}-${i}`
@@ -7098,9 +7102,9 @@ function DatePicker({
                   onClick: () => handleSelectDay(day),
                   className: `
                         h-9 w-full rounded-lg text-sm font-medium transition-colors
-                        ${disabled ? "text-gray-300 dark:text-gray-600 cursor-not-allowed" : ""}
-                        ${!disabled && !isSelected && isCurrentMonth ? "text-gray-800 dark:text-gray-200 hover:bg-indigo-500/10 hover:text-indigo-600 dark:hover:text-indigo-400" : ""}
-                        ${!disabled && !isSelected && !isCurrentMonth ? "text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700" : ""}
+                        ${disabled ? "text-slate-300 dark:text-slate-600 cursor-not-allowed" : ""}
+                        ${!disabled && !isSelected && isCurrentMonth ? "text-slate-800 dark:text-slate-200 hover:bg-indigo-500/10 hover:text-indigo-600 dark:hover:text-indigo-400" : ""}
+                        ${!disabled && !isSelected && !isCurrentMonth ? "text-slate-400 dark:text-slate-500 hover:bg-white/40 dark:hover:bg-white/[0.04]" : ""}
                         ${isSelected ? "bg-indigo-500 text-white hover:bg-indigo-600" : ""}
                         ${isToday && !isSelected ? "ring-1 ring-indigo-400 dark:ring-indigo-500" : ""}
                       `,
@@ -7109,7 +7113,7 @@ function DatePicker({
                 day.toISOString()
               );
             }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 pt-3 border-t border-gray-200/60 dark:border-gray-700/60 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 pt-3 liquid-divider border-t text-center", children: /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
@@ -7130,19 +7134,19 @@ function DatePicker({
                   type: "button",
                   onClick: () => handleSelectYear(viewDate.getFullYear() - 1),
                   "aria-label": t("previousYear"),
-                  className: "p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ChevronLeftIcon, { className: "h-5 w-5 text-gray-500 dark:text-gray-400" })
+                  className: "p-1.5 rounded-lg hover:bg-white/40 dark:hover:bg-white/[0.04] transition-colors",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ChevronLeftIcon, { className: "h-5 w-5 text-slate-500 dark:text-slate-400" })
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-lg text-gray-900 dark:text-white", children: viewDate.getFullYear() }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-lg text-slate-900 dark:text-white", children: viewDate.getFullYear() }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   type: "button",
                   onClick: () => handleSelectYear(viewDate.getFullYear() + 1),
                   "aria-label": t("nextYear"),
-                  className: "p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ChevronRightIcon, { className: "h-5 w-5 text-gray-500 dark:text-gray-400" })
+                  className: "p-1.5 rounded-lg hover:bg-white/40 dark:hover:bg-white/[0.04] transition-colors",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ChevronRightIcon, { className: "h-5 w-5 text-slate-500 dark:text-slate-400" })
                 }
               )
             ] }),
@@ -7157,23 +7161,23 @@ function DatePicker({
                   onClick: () => handleSelectMonth(index),
                   className: `
                         px-2 py-2.5 text-sm rounded-lg transition-colors capitalize font-medium
-                        ${isFutureMonth ? "text-gray-300 dark:text-gray-600 cursor-not-allowed" : ""}
+                        ${isFutureMonth ? "text-slate-300 dark:text-slate-600 cursor-not-allowed" : ""}
                         ${!isFutureMonth && isSelectedMonth ? "bg-indigo-500 text-white" : ""}
-                        ${!isFutureMonth && !isSelectedMonth ? "text-gray-700 dark:text-gray-200 hover:bg-indigo-500/10 hover:text-indigo-600 dark:hover:text-indigo-400" : ""}
+                        ${!isFutureMonth && !isSelectedMonth ? "text-slate-700 dark:text-slate-200 hover:bg-indigo-500/10 hover:text-indigo-600 dark:hover:text-indigo-400" : ""}
                       `,
                   children: name
                 },
                 name
               );
             }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 pt-3 border-t border-gray-200/60 dark:border-gray-700/60", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 justify-center", children: yearRange.slice(-7).map((year) => /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 pt-3 liquid-divider border-t", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 justify-center", children: yearRange.slice(-7).map((year) => /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
                 onClick: () => handleSelectYear(year),
                 className: `
                         px-2 py-1 text-xs rounded-lg transition-colors
-                        ${viewDate.getFullYear() === year ? "bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300 font-medium" : "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"}
+                        ${viewDate.getFullYear() === year ? "bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300 font-medium" : "text-slate-500 dark:text-slate-400 hover:bg-white/40 dark:hover:bg-white/[0.04]"}
                       `,
                 children: year
               },
@@ -7189,7 +7193,7 @@ function DatePicker({
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Arrow, { className: "fill-white/70 dark:fill-gray-800/70" })
+          /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Arrow, { className: "fill-white/70 dark:fill-slate-800/70" })
         ]
       }
     ) })
@@ -7419,7 +7423,7 @@ function PageHeading({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
       breadcrumbs?.length ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": t("breadcrumb"), className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400", children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-2", children: [
         index > 0 ? /* @__PURE__ */ jsxRuntime.jsx(solid.ChevronRightIcon, { className: "h-4 w-4", "aria-hidden": "true" }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Link, { href: crumb.href, className: "hover:text-gray-800 dark:hover:text-white", children: crumb.name })
+        /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Link, { href: crumb.href, className: "hover:text-gray-800 dark:hover:text-white", children: crumb.name })
       ] }, `${crumb.href}-${crumb.name}`)) }) }) : null,
       /* @__PURE__ */ jsxRuntime.jsx(
         HeroBlock,
@@ -7490,7 +7494,7 @@ function FormInput({
       required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 text-red-500", children: "*" }) : null
     ] }) : null,
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapperClass(error), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative flex items-center ${sizeClasses2[inputSize]} ${className}`, children: [
-      icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2 text-gray-400 dark:text-gray-500", "aria-hidden": "true", children: icon }) : null,
+      icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2 text-slate-400 dark:text-slate-500", "aria-hidden": "true", children: icon }) : null,
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -7499,7 +7503,7 @@ function FormInput({
           required,
           "aria-invalid": error ? true : false,
           "aria-describedby": describedBy,
-          className: "w-full bg-transparent text-gray-900 placeholder:text-slate-500 focus:outline-none dark:text-white dark:placeholder:text-gray-500",
+          className: "w-full bg-transparent text-slate-900 placeholder:text-slate-500 focus:outline-none dark:text-white dark:placeholder:text-slate-500",
           onChange: (event) => onValueChange?.(event.target.value)
         }
       )
@@ -7535,7 +7539,7 @@ function FormTextarea({
         required,
         "aria-invalid": error ? true : void 0,
         "aria-describedby": describedBy,
-        className: `w-full resize-y bg-transparent px-3.5 py-2.5 text-gray-900 placeholder:text-slate-500 focus:outline-none dark:text-white dark:placeholder:text-gray-500 ${className}`,
+        className: `w-full resize-y bg-transparent px-3.5 py-2.5 text-slate-900 placeholder:text-slate-500 focus:outline-none dark:text-white dark:placeholder:text-slate-500 ${className}`,
         onChange: (event) => onValueChange?.(event.target.value)
       }
     ) }),
@@ -7586,7 +7590,7 @@ function FormPriceInput({
       /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
-          className: `absolute top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500 pointer-events-none select-none ${sizes3.symbol}`,
+          className: `absolute top-1/2 -translate-y-1/2 text-slate-400 dark:text-slate-500 pointer-events-none select-none ${sizes3.symbol}`,
           "aria-hidden": "true",
           children: currencySymbol
         }
@@ -7607,7 +7611,7 @@ function FormPriceInput({
           "aria-invalid": error ? true : false,
           "aria-describedby": describedBy,
           "aria-label": label ? `${label} in ${currencySymbol}` : void 0,
-          className: `w-full bg-transparent tabular-nums ${sizes3.input} ${sizes3.padding} text-gray-900 placeholder:text-slate-500 focus:outline-none dark:text-white dark:placeholder:text-gray-500 ${colorClass ?? ""} ${className}`
+          className: `w-full bg-transparent tabular-nums ${sizes3.input} ${sizes3.padding} text-slate-900 placeholder:text-slate-500 focus:outline-none dark:text-white dark:placeholder:text-slate-500 ${colorClass ?? ""} ${className}`
         }
       )
     ] }) }),
@@ -7643,7 +7647,7 @@ function FormSelect({
         required,
         "aria-invalid": error ? true : void 0,
         "aria-describedby": describedBy,
-        className: `w-full bg-transparent ${sizeClasses2[inputSize]} text-gray-900 focus:outline-none dark:text-white ${className}`,
+        className: `w-full bg-transparent ${sizeClasses2[inputSize]} text-slate-900 focus:outline-none dark:text-white ${className}`,
         onChange: (event) => onValueChange?.(event.target.value),
         children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))
       }
@@ -7684,8 +7688,8 @@ function FormActions({
   className
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx4__default.default("flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-700", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { type: "button", outline: true, onClick: onCancel, children: cancelLabel }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { type: "button", onClick: onSave, disabled: saveDisabled, children: saveLabel })
+    /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", outline: true, onClick: onCancel, children: cancelLabel }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", onClick: onSave, disabled: saveDisabled, children: saveLabel })
   ] });
 }
 function FormToggle({
@@ -7827,7 +7831,7 @@ function BaseForm({
     children,
     showFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 pt-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
-        chunkBHOT22QL_js.Button,
+        chunkMXQ2EYG2_js.Button,
         {
           type: "submit",
           color: "ios-glass-blue",
@@ -7839,7 +7843,7 @@ function BaseForm({
         }
       ),
       onCancel && /* @__PURE__ */ jsxRuntime.jsx(
-        chunkBHOT22QL_js.Button,
+        chunkMXQ2EYG2_js.Button,
         {
           type: "button",
           outline: true,
@@ -7860,9 +7864,9 @@ function ExpandableHistoryList({
   className = "space-y-3"
 }) {
   const [expandedItemId, setExpandedItemId] = React9.useState(null);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-sm text-gray-500 dark:text-gray-400", children: loadingLabel }) : items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-sm text-gray-500 dark:text-gray-400", children: emptyLabel }) : items.map((item) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-sm text-slate-500 dark:text-slate-400", children: loadingLabel }) : items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-sm text-gray-500 dark:text-gray-400", children: emptyLabel }) : items.map((item) => {
     const isExpanded = expandedItemId === item.id;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-gray-200/80 dark:border-gray-700/80", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-slate-200/80 dark:border-slate-700/80", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
@@ -7870,17 +7874,17 @@ function ExpandableHistoryList({
           onClick: () => setExpandedItemId(
             (previousExpandedItemId) => previousExpandedItemId === item.id ? null : item.id
           ),
-          className: "w-full px-4 py-3 text-left hover:bg-gray-50/80 dark:hover:bg-gray-800/40",
+          className: "w-full px-4 py-3 text-left hover:bg-slate-50/80 dark:hover:bg-slate-800/40",
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: item.headerLeft }),
-              item.headerRight ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: item.headerRight }) : null
+              item.headerRight ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: item.headerRight }) : null
             ] }),
-            item.summary ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: item.summary }) : null
+            item.summary ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: item.summary }) : null
           ]
         }
       ),
-      isExpanded && item.details ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3 border-t border-gray-200/80 px-4 py-3 dark:border-gray-700/80", children: item.details }) : null
+      isExpanded && item.details ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3 border-t border-slate-200/80 px-4 py-3 dark:border-slate-700/80", children: item.details }) : null
     ] }, item.id);
   }) });
 }
@@ -8087,7 +8091,7 @@ function StepFormPage({
       ) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 flex items-center justify-between border-t border-white/30 pt-5 dark:border-white/10", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkBHOT22QL_js.Button,
+          chunkMXQ2EYG2_js.Button,
           {
             type: "button",
             onClick: handleBack,
@@ -8096,7 +8100,7 @@ function StepFormPage({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkBHOT22QL_js.Button,
+          chunkMXQ2EYG2_js.Button,
           {
             type: "button",
             onClick: handleNext,
@@ -8528,8 +8532,8 @@ function LaunchpadGrid({
         item.badge != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1.5 left-1/2 translate-x-8 lg:translate-x-10 z-10 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-white/95 px-1.5 text-[10px] font-bold text-blue-700 shadow-sm ring-1 ring-blue-200 dark:bg-slate-900/95 dark:text-blue-300 dark:ring-blue-400/40", children: item.badge > 99 ? "99+" : item.badge }),
         item.notification != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-2 right-1/2 translate-x-9 lg:translate-x-11 z-10 flex h-8 min-w-8 items-center justify-center rounded-full bg-red-500 px-2 text-sm font-extrabold text-white shadow-lg ring-2 ring-white/70 dark:ring-slate-900/70", children: item.notification > 99 ? "99+" : item.notification }),
         /* @__PURE__ */ jsxRuntime.jsx(LaunchpadIcon, { item, userProfile, isHydrated }),
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-3 text-sm font-medium text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white transition-colors", children: item.name }),
-        item.subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: item.subtitle })
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-3 text-sm font-medium text-slate-700 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors", children: item.name }),
+        item.subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 text-xs text-slate-500 dark:text-slate-400", children: item.subtitle })
       ] })
     }
   ) : /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8543,7 +8547,7 @@ function LaunchpadGrid({
         item.notification != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-2 right-1/2 translate-x-9 lg:translate-x-11 z-10 flex h-8 min-w-8 items-center justify-center rounded-full bg-red-500 px-2 text-sm font-extrabold text-white shadow-lg ring-2 ring-white/70 dark:ring-slate-900/70", children: item.notification > 9 ? "9+" : item.notification }),
         /* @__PURE__ */ jsxRuntime.jsx(LaunchpadIcon, { item, userProfile, isHydrated }),
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-3 text-sm font-medium text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white transition-colors", children: item.name }),
-        item.subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: item.subtitle })
+        item.subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 text-xs text-slate-500 dark:text-slate-400", children: item.subtitle })
       ]
     }
   ) }, `launchpad-${item.id}`), [actionItemIds, getForceTouchItems, tileClass, onItemClick, userProfile, isHydrated]);
@@ -8558,7 +8562,7 @@ function LaunchpadGrid({
       groupedActionItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px w-full bg-slate-300/75 dark:bg-white/20" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400", children: actionsLabel })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-center text-xs font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400", children: actionsLabel })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-7 lg:gap-8", children: groupedActionItems.map(renderTile) })
       ] })
@@ -8754,8 +8758,8 @@ function CookieConsent({
               children: t("learnMore")
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { onClick: handleReject, outline: true, children: t("reject") }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { onClick: handleAccept, color: "ios-glass-blue", children: t("accept") })
+          /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { onClick: handleReject, outline: true, children: t("reject") }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { onClick: handleAccept, color: "ios-glass-blue", children: t("accept") })
         ] })
       ] }) })
     }
@@ -9286,9 +9290,9 @@ var AvatarButton = React9.forwardRef(function AvatarButton2({
     "focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-indigo-500/70"
   );
   if (typeof props.href === "string") {
-    return /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Link, { ...props, className: classes, ref, children: /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.TouchTarget, { children: /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src, square, initials, alt, tone }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Link, { ...props, className: classes, ref, children: /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.TouchTarget, { children: /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src, square, initials, alt, tone }) }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Headless3__namespace.Button, { ...props, className: classes, ref, children: /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.TouchTarget, { children: /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src, square, initials, alt, tone }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Headless3__namespace.Button, { ...props, className: classes, ref, children: /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.TouchTarget, { children: /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src, square, initials, alt, tone }) }) });
 });
 function ImageUpload({
   src,
@@ -9393,7 +9397,7 @@ function Breadcrumb({ pages, actions, centerContent, dashboardPath = "/dashboard
       className: "liquid-surface-strong sticky top-2 z-30 mx-4 rounded-2xl sm:mx-6 lg:mx-8",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-[1fr_auto_1fr] items-center gap-3 px-4 py-2.5 sm:px-6 lg:px-8", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: parentPage ? /* @__PURE__ */ jsxRuntime.jsxs(
-          chunkBHOT22QL_js.Link,
+          chunkMXQ2EYG2_js.Link,
           {
             href: parentPage.href,
             className: "inline-flex max-w-full items-center gap-1 rounded-full px-2 py-1 text-sm font-medium text-slate-600 hover:bg-white/60 dark:text-slate-300 dark:hover:bg-white/10",
@@ -9403,7 +9407,7 @@ function Breadcrumb({ pages, actions, centerContent, dashboardPath = "/dashboard
             ]
           }
         ) : /* @__PURE__ */ jsxRuntime.jsxs(
-          chunkBHOT22QL_js.Link,
+          chunkMXQ2EYG2_js.Link,
           {
             href: dashboardPath,
             className: "inline-flex items-center gap-1 rounded-full px-2 py-1 text-sm font-medium text-slate-600 hover:bg-white/60 dark:text-slate-300 dark:hover:bg-white/10",
@@ -9426,7 +9430,7 @@ function CreateActionButton({
   mode = "responsive"
 }) {
   const buttonContent = /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkBHOT22QL_js.Button,
+    chunkMXQ2EYG2_js.Button,
     {
       type: "button",
       onClick,
@@ -10165,7 +10169,7 @@ function PageEmptyState({ title, message, iconName, customIcon }) {
         {
           initial: prefersReducedMotion2 ? false : { opacity: 0, scale: 0.95 },
           animate: prefersReducedMotion2 ? noMotion : { opacity: 1, scale: 1 },
-          transition: prefersReducedMotion2 ? noTransition : chunkBHOT22QL_js.springPresets.gentle,
+          transition: prefersReducedMotion2 ? noTransition : chunkMXQ2EYG2_js.springPresets.gentle,
           className: "liquid-surface w-full max-w-lg rounded-2xl px-8 py-14 text-center",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -10173,7 +10177,7 @@ function PageEmptyState({ title, message, iconName, customIcon }) {
               {
                 initial: prefersReducedMotion2 ? false : { scale: 0.6, opacity: 0 },
                 animate: prefersReducedMotion2 ? noMotion : { scale: 1, opacity: 1 },
-                transition: prefersReducedMotion2 ? noTransition : chunkBHOT22QL_js.springPresets.bouncy,
+                transition: prefersReducedMotion2 ? noTransition : chunkMXQ2EYG2_js.springPresets.bouncy,
                 className: "mx-auto mb-6",
                 children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `inline-flex h-20 w-20 items-center justify-center rounded-full backdrop-blur-md border ${accent.container}`, children: customIcon ?? /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: `h-10 w-10 ${accent.icon}` }) })
               }
@@ -10184,7 +10188,7 @@ function PageEmptyState({ title, message, iconName, customIcon }) {
                 "data-testid": "empty-state-title",
                 initial: prefersReducedMotion2 ? false : { y: 12, opacity: 0 },
                 animate: prefersReducedMotion2 ? noMotion : { y: 0, opacity: 1 },
-                transition: prefersReducedMotion2 ? noTransition : { ...chunkBHOT22QL_js.springPresets.default, delay: 0.1 },
+                transition: prefersReducedMotion2 ? noTransition : { ...chunkMXQ2EYG2_js.springPresets.default, delay: 0.1 },
                 className: "text-xl font-semibold text-gray-900 dark:text-white",
                 children: title
               }
@@ -10195,7 +10199,7 @@ function PageEmptyState({ title, message, iconName, customIcon }) {
                 "data-testid": "empty-state-message",
                 initial: prefersReducedMotion2 ? false : { y: 12, opacity: 0 },
                 animate: prefersReducedMotion2 ? noMotion : { y: 0, opacity: 1 },
-                transition: prefersReducedMotion2 ? noTransition : { ...chunkBHOT22QL_js.springPresets.default, delay: 0.15 },
+                transition: prefersReducedMotion2 ? noTransition : { ...chunkMXQ2EYG2_js.springPresets.default, delay: 0.15 },
                 className: "mt-3 text-sm text-gray-500 dark:text-gray-400 max-w-sm mx-auto leading-relaxed",
                 children: message
               }
@@ -10212,7 +10216,7 @@ function PageEmptyState({ title, message, iconName, customIcon }) {
                   {
                     initial: prefersReducedMotion2 ? false : { scale: 0 },
                     animate: prefersReducedMotion2 ? noMotion : { scale: 1 },
-                    transition: prefersReducedMotion2 ? noTransition : { ...chunkBHOT22QL_js.springPresets.bouncy, delay: 0.35 + i * 0.08 },
+                    transition: prefersReducedMotion2 ? noTransition : { ...chunkMXQ2EYG2_js.springPresets.bouncy, delay: 0.35 + i * 0.08 },
                     className: "h-1.5 w-1.5 rounded-full bg-gray-300 dark:bg-gray-600"
                   },
                   i
@@ -10248,7 +10252,7 @@ function PageErrorState({
         {
           initial: prefersReducedMotion2 ? false : { opacity: 0, scale: 0.95 },
           animate: prefersReducedMotion2 ? noMotion : { opacity: 1, scale: 1 },
-          transition: prefersReducedMotion2 ? noTransition : chunkBHOT22QL_js.springPresets.gentle,
+          transition: prefersReducedMotion2 ? noTransition : chunkMXQ2EYG2_js.springPresets.gentle,
           className: "liquid-surface w-full max-w-2xl rounded-2xl px-12 py-14 text-center",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -10256,7 +10260,7 @@ function PageErrorState({
               {
                 initial: prefersReducedMotion2 ? false : { scale: 0.6, opacity: 0 },
                 animate: prefersReducedMotion2 ? noMotion : { scale: 1, opacity: 1 },
-                transition: prefersReducedMotion2 ? noTransition : chunkBHOT22QL_js.springPresets.bouncy,
+                transition: prefersReducedMotion2 ? noTransition : chunkMXQ2EYG2_js.springPresets.bouncy,
                 className: "mx-auto mb-6",
                 children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex h-20 w-20 items-center justify-center rounded-full backdrop-blur-md border bg-red-50/80 dark:bg-red-900/30 border-red-100/50 dark:border-red-800/30", children: customIcon ?? /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ExclamationTriangleIcon, { className: "h-10 w-10 text-red-500 dark:text-red-400" }) })
               }
@@ -10266,7 +10270,7 @@ function PageErrorState({
               {
                 initial: prefersReducedMotion2 ? false : { y: 12, opacity: 0 },
                 animate: prefersReducedMotion2 ? noMotion : { y: 0, opacity: 1 },
-                transition: prefersReducedMotion2 ? noTransition : { ...chunkBHOT22QL_js.springPresets.default, delay: 0.05 },
+                transition: prefersReducedMotion2 ? noTransition : { ...chunkMXQ2EYG2_js.springPresets.default, delay: 0.05 },
                 className: "mb-1 text-sm font-semibold tracking-widest text-red-500 dark:text-red-400",
                 children: statusCode
               }
@@ -10277,7 +10281,7 @@ function PageErrorState({
                 "data-testid": "error-state-title",
                 initial: prefersReducedMotion2 ? false : { y: 12, opacity: 0 },
                 animate: prefersReducedMotion2 ? noMotion : { y: 0, opacity: 1 },
-                transition: prefersReducedMotion2 ? noTransition : { ...chunkBHOT22QL_js.springPresets.default, delay: 0.1 },
+                transition: prefersReducedMotion2 ? noTransition : { ...chunkMXQ2EYG2_js.springPresets.default, delay: 0.1 },
                 className: "text-xl font-semibold text-gray-900 dark:text-white",
                 children: title
               }
@@ -10288,7 +10292,7 @@ function PageErrorState({
                 "data-testid": "error-state-message",
                 initial: prefersReducedMotion2 ? false : { y: 12, opacity: 0 },
                 animate: prefersReducedMotion2 ? noMotion : { y: 0, opacity: 1 },
-                transition: prefersReducedMotion2 ? noTransition : { ...chunkBHOT22QL_js.springPresets.default, delay: 0.15 },
+                transition: prefersReducedMotion2 ? noTransition : { ...chunkMXQ2EYG2_js.springPresets.default, delay: 0.15 },
                 className: "mt-3 text-sm text-gray-500 dark:text-gray-400 max-w-sm mx-auto leading-relaxed",
                 children: message
               }
@@ -10298,15 +10302,15 @@ function PageErrorState({
               {
                 initial: prefersReducedMotion2 ? false : { y: 12, opacity: 0 },
                 animate: prefersReducedMotion2 ? noMotion : { y: 0, opacity: 1 },
-                transition: prefersReducedMotion2 ? noTransition : { ...chunkBHOT22QL_js.springPresets.default, delay: 0.25 },
+                transition: prefersReducedMotion2 ? noTransition : { ...chunkMXQ2EYG2_js.springPresets.default, delay: 0.25 },
                 className: "mt-8",
                 children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
+                  chunkMXQ2EYG2_js.Button,
                   {
                     type: "button",
+                    destructive: true,
                     onClick: onRetry,
                     "data-testid": "error-state-retry",
-                    className: "rounded-xl bg-red-600 px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-red-500/20 transition-all hover:bg-red-700 hover:shadow-red-500/30 active:scale-[0.97] dark:bg-red-500 dark:hover:bg-red-600 dark:shadow-red-500/10",
                     children: retryLabel
                   }
                 )
@@ -10324,7 +10328,7 @@ function PageErrorState({
                   {
                     initial: prefersReducedMotion2 ? false : { scale: 0 },
                     animate: prefersReducedMotion2 ? noMotion : { scale: 1 },
-                    transition: prefersReducedMotion2 ? noTransition : { ...chunkBHOT22QL_js.springPresets.bouncy, delay: 0.35 + i * 0.08 },
+                    transition: prefersReducedMotion2 ? noTransition : { ...chunkMXQ2EYG2_js.springPresets.bouncy, delay: 0.35 + i * 0.08 },
                     className: "h-1.5 w-1.5 rounded-full bg-red-300 dark:bg-red-700"
                   },
                   i
@@ -10527,8 +10531,8 @@ function NotFoundPage({ title = "Page not found", message = "The page you're loo
   return /* @__PURE__ */ jsxRuntime.jsxs(ErrorContainer, { className, children: [
     /* @__PURE__ */ jsxRuntime.jsx(NotFoundSvg, {}),
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: `mb-2 text-sm font-semibold tracking-widest ${accentColorClasses[accentColor]}`, children: "404" }),
-    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mb-3 text-3xl font-bold text-gray-900 dark:text-white", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-8 max-w-md text-gray-500 dark:text-gray-400", children: message }),
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mb-3 text-3xl font-bold text-slate-900 dark:text-white", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-8 max-w-md text-slate-500 dark:text-slate-400", children: message }),
     action
   ] });
 }
@@ -10552,8 +10556,8 @@ function BadRequestPage({ title = "Bad request", message = "The request could no
   return /* @__PURE__ */ jsxRuntime.jsxs(ErrorContainer, { className, children: [
     /* @__PURE__ */ jsxRuntime.jsx(BadRequestSvg, {}),
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: `mb-2 text-sm font-semibold tracking-widest ${accentColorClasses[accentColor]}`, children: "400" }),
-    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mb-3 text-3xl font-bold text-gray-900 dark:text-white", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-8 max-w-md text-gray-500 dark:text-gray-400", children: message }),
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mb-3 text-3xl font-bold text-slate-900 dark:text-white", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-8 max-w-md text-slate-500 dark:text-slate-400", children: message }),
     action
   ] });
 }
@@ -10588,8 +10592,8 @@ function ServerErrorPage({ title = "Something went wrong", message = "An unexpec
   return /* @__PURE__ */ jsxRuntime.jsxs(ErrorContainer, { className, children: [
     /* @__PURE__ */ jsxRuntime.jsx(ServerErrorSvg, {}),
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: `mb-2 text-sm font-semibold tracking-widest ${accentColorClasses[accentColor]}`, children: "500" }),
-    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mb-3 text-3xl font-bold text-gray-900 dark:text-white", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-8 max-w-md text-gray-500 dark:text-gray-400", children: message }),
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mb-3 text-3xl font-bold text-slate-900 dark:text-white", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-8 max-w-md text-slate-500 dark:text-slate-400", children: message }),
     action
   ] });
 }
@@ -10742,19 +10746,28 @@ function SelectionCard({
   onClick,
   icon,
   label,
+  description,
+  layout = "tile",
+  gradient,
+  compatibility = "compatible",
+  badge,
   className = ""
 }) {
+  const isIncompatible = compatibility === "incompatible";
+  const isCard = layout === "card";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
       type: "button",
-      onClick,
+      onClick: isIncompatible ? void 0 : onClick,
+      disabled: isIncompatible,
       "aria-pressed": selected,
       className: [
-        "liquid-surface group relative flex flex-col items-center gap-2.5 rounded-2xl p-4",
-        "transition-all duration-200",
+        "liquid-surface group relative rounded-2xl transition-all duration-200",
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1",
+        isCard ? "flex items-center gap-3 px-3 py-2.5 text-left" : "flex flex-col items-center gap-2.5 p-4",
         selected ? "bg-indigo-500/15 ring-1 ring-inset ring-indigo-500/30 dark:bg-indigo-500/20" : "hover:bg-white/30 dark:hover:bg-white/[0.05]",
+        isIncompatible && "cursor-not-allowed opacity-50",
         className
       ].join(" "),
       children: [
@@ -10762,10 +10775,11 @@ function SelectionCard({
           "span",
           {
             className: [
-              "inline-flex items-center justify-center rounded-xl p-2 transition-colors",
+              "inline-flex shrink-0 items-center justify-center rounded-xl transition-colors",
+              isCard ? "h-9 w-9" : "p-2",
               selected ? (
-                // Selected icon bubble — solid indigo with inner highlight
-                "bg-indigo-500/85 text-white shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)]"
+                // Selected icon bubble — solid indigo (or caller-provided gradient) with inner highlight
+                gradient ? `bg-gradient-to-br ${gradient} text-white shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)]` : "bg-indigo-500/85 text-white shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)]"
               ) : (
                 // Rest icon bubble — glass (same chrome as HeroBlock)
                 "border border-white/60 bg-white/75 text-slate-700 dark:border-white/12 dark:bg-white/8 dark:text-slate-200"
@@ -10774,17 +10788,24 @@ function SelectionCard({
             children: icon
           }
         ) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: [
-              "text-center text-xs font-medium leading-tight",
-              selected ? "text-indigo-700 dark:text-indigo-200" : "text-slate-700 dark:text-slate-300"
-            ].join(" "),
-            children: label
-          }
-        ),
-        selected ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-indigo-500 ring-2 ring-white dark:ring-slate-900 shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)]", children: /* @__PURE__ */ jsxRuntime.jsx(solid.CheckIcon, { className: "h-3 w-3 text-white" }) }) : null
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: isCard ? "flex min-w-0 flex-1 flex-col gap-0.5" : "contents", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: isCard ? "flex items-center gap-2" : "contents", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: [
+                  isCard ? "flex-1 truncate text-sm font-medium leading-tight" : "text-center text-xs font-medium leading-tight",
+                  selected ? "text-indigo-700 dark:text-indigo-200" : "text-slate-700 dark:text-slate-300"
+                ].join(" "),
+                children: label
+              }
+            ),
+            badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: badge }) : null
+          ] }),
+          description && isCard ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs text-slate-500 dark:text-slate-400", children: description }) : null
+        ] }),
+        selected && !isCard ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-indigo-500 ring-2 ring-white dark:ring-slate-900 shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)]", children: /* @__PURE__ */ jsxRuntime.jsx(solid.CheckIcon, { className: "h-3 w-3 text-white" }) }) : null,
+        selected && isCard ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(solid.CheckIcon, { className: "h-4 w-4 text-indigo-500" }) }) : null
       ]
     }
   );
@@ -10862,16 +10883,16 @@ function FieldRenderer({ field }) {
           className: [GLASS_INPUT, field.copyable ? "pr-10" : ""].join(" ")
         }
       ),
-      field.copyable ? /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+      field.copyable ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(
+        chunkMXQ2EYG2_js.IconButton,
         {
-          type: "button",
+          label: `Copy ${field.label}`,
+          variant: "ghost",
+          size: "sm",
           onClick: () => navigator.clipboard.writeText(field.value),
-          className: "absolute right-3 top-1/2 -translate-y-1/2 rounded-lg p-1.5 text-slate-400 transition hover:bg-white/40 hover:text-slate-700 dark:hover:bg-white/[0.08] dark:hover:text-slate-200",
-          "aria-label": `Copy ${field.label}`,
-          children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ClipboardDocumentIcon, { className: "h-4 w-4" })
+          icon: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ClipboardDocumentIcon, { className: "h-4 w-4" })
         }
-      ) : null
+      ) }) : null
     ] }),
     field.description ? /* @__PURE__ */ jsxRuntime.jsx(Description3, { className: "text-xs text-slate-500 dark:text-slate-400", children: field.description }) : null
   ] });
@@ -10908,7 +10929,7 @@ function ProfileContent({ config }) {
           ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl font-bold text-white", children: config.initials })
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs(chunkBHOT22QL_js.Button, { color: "zinc", onClick: config.onChangeAvatar, className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(chunkMXQ2EYG2_js.Button, { color: "zinc", onClick: config.onChangeAvatar, className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.UserIcon, { className: "h-4 w-4" }),
         config.changeAvatarLabel
       ] })
@@ -10957,7 +10978,7 @@ function ProfileContent({ config }) {
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkBHOT22QL_js.Button,
+          chunkMXQ2EYG2_js.Button,
           {
             color: "blue",
             className: "mt-2",
@@ -11158,7 +11179,7 @@ function SettingsModal({
     }
     return /* @__PURE__ */ jsxRuntime.jsx(PlaceholderContent, { message: placeholderMessage });
   };
-  const footer = signOut ? /* @__PURE__ */ jsxRuntime.jsxs(chunkBHOT22QL_js.Button, { type: "button", onClick: signOut.onClick, color: "ios-glass-red", fullWidth: true, children: [
+  const footer = signOut ? /* @__PURE__ */ jsxRuntime.jsxs(chunkMXQ2EYG2_js.Button, { type: "button", onClick: signOut.onClick, color: "ios-glass-red", fullWidth: true, children: [
     signOut.icon,
     signOut.label
   ] }) : sidebarFooter;
@@ -11180,6 +11201,42 @@ function SettingsModal({
     }
   );
 }
+var PickerTile = React9.forwardRef(function PickerTile2({
+  selected,
+  onClick,
+  label,
+  disabled = false,
+  children,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const handleClick = () => {
+    if (disabled) return;
+    chunkUZ3CMNUJ_js.triggerHaptic("light");
+    onClick?.();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      onClick: handleClick,
+      disabled,
+      "aria-pressed": selected,
+      "aria-label": label,
+      style,
+      className: clsx4__default.default(
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+PickerTile.displayName = "PickerTile";
 var WindsockIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: 512, height: 512, viewBox: "0 0 512 512", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "windsock-bg", x1: 48, y1: 48, x2: 464, y2: 464, gradientUnits: "userSpaceOnUse", children: [
@@ -11438,7 +11495,7 @@ function PasswordStrengthMeter({
           className: `h-1.5 flex-1 rounded-full ${index < strength ? STRENGTH_COLORS[strength - 1] : "bg-gray-200 dark:bg-gray-700"}`,
           initial: { scaleX: 0 },
           animate: { scaleX: index < strength ? 1 : 0.5 },
-          transition: chunkBHOT22QL_js.springPresets.stiff,
+          transition: chunkMXQ2EYG2_js.springPresets.stiff,
           style: { transformOrigin: "left" }
         },
         index
@@ -11496,7 +11553,7 @@ function BackupCodeGrid({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liquid-surface-strong rounded-xl p-4", children: !revealed ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-8 gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: t("backupCodesHidden") }),
-      onReveal && /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { outline: true, onClick: onReveal, children: t("backupCodesReveal") })
+      onReveal && /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { outline: true, onClick: onReveal, children: t("backupCodesReveal") })
     ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2", children: codes.map((code, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -11512,11 +11569,11 @@ function BackupCodeGrid({
       index
     )) }) }),
     revealed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(chunkBHOT22QL_js.Button, { outline: true, size: "sm", onClick: handleCopyAll, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(chunkMXQ2EYG2_js.Button, { outline: true, size: "sm", onClick: handleCopyAll, children: [
         /* @__PURE__ */ jsxRuntime.jsx(solid.ClipboardDocumentIcon, { className: "h-4 w-4" }),
         t("backupCodesCopyAll")
       ] }),
-      showDownload && /* @__PURE__ */ jsxRuntime.jsxs(chunkBHOT22QL_js.Button, { outline: true, size: "sm", onClick: handleDownload, children: [
+      showDownload && /* @__PURE__ */ jsxRuntime.jsxs(chunkMXQ2EYG2_js.Button, { outline: true, size: "sm", onClick: handleDownload, children: [
         /* @__PURE__ */ jsxRuntime.jsx(solid.ArrowDownTrayIcon, { className: "h-4 w-4" }),
         t("backupCodesDownload")
       ] })
@@ -11555,7 +11612,7 @@ function SocialLoginButtons({
   const t = chunkY5VN4SPH_js.useTranslations("auth");
   const isColumn = layout === "column";
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex ${isColumn ? "flex-col" : "flex-row"} gap-2`, children: providers.map((provider) => /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkBHOT22QL_js.Button,
+    chunkMXQ2EYG2_js.Button,
     {
       outline: true,
       fullWidth: isColumn,
@@ -11866,7 +11923,7 @@ function RadiantHeading({
       ...props,
       className: clsx4.clsx(
         className,
-        "text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl lg:text-6xl"
+        "text-4xl font-bold tracking-tight text-slate-900 dark:text-white sm:text-5xl lg:text-6xl"
       )
     }
   );
@@ -11895,7 +11952,7 @@ function Lead({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "p",
     {
-      className: clsx4.clsx(className, "text-xl text-gray-600 dark:text-gray-400 leading-relaxed"),
+      className: clsx4.clsx(className, "text-xl text-slate-600 dark:text-slate-400 leading-relaxed"),
       ...props
     }
   );
@@ -11973,19 +12030,18 @@ function BentoCard({
       className: clsx4.clsx(
         className,
         "group relative flex flex-col overflow-hidden rounded-2xl",
-        "bg-white dark:bg-gray-800 shadow-lg hover:shadow-xl transition-shadow",
-        "border border-gray-200 dark:border-gray-700"
+        "liquid-surface shadow-lg hover:shadow-xl transition-shadow"
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-80 shrink-0 overflow-hidden bg-gradient-to-br from-gray-100 to-gray-50 dark:from-gray-700 dark:to-gray-800", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-80 shrink-0 overflow-hidden bg-gradient-to-br from-slate-100 to-slate-50 dark:from-slate-700 dark:to-slate-800", children: [
           graphic,
-          fade.includes("top") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-b from-white dark:from-gray-800 to-transparent opacity-40" }),
-          fade.includes("bottom") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-white dark:from-gray-800 to-transparent opacity-40" })
+          fade.includes("top") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-b from-white dark:from-slate-800 to-transparent opacity-40" }),
+          fade.includes("bottom") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-white dark:from-slate-800 to-transparent opacity-40" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative p-8 sm:p-10", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-blue-600 dark:text-blue-400 uppercase tracking-wider mb-2", children: eyebrow }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-2xl font-bold tracking-tight text-gray-900 dark:text-white", children: title }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 max-w-xl text-base text-gray-600 dark:text-gray-400 leading-relaxed", children: description })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-2xl font-bold tracking-tight text-slate-900 dark:text-white", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 max-w-xl text-base text-slate-600 dark:text-slate-400 leading-relaxed", children: description })
         ] })
       ]
     }
@@ -12056,14 +12112,14 @@ function FeatureCard({
       initial: { opacity: 0, y: 20 },
       whileInView: { opacity: 1, y: 0 },
       transition: { duration: 0.5 },
-      className: "group relative rounded-2xl overflow-hidden bg-white dark:bg-gray-800 p-8 shadow-md hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700",
+      className: "group liquid-surface relative rounded-2xl overflow-hidden p-8 shadow-md hover:shadow-xl transition-all duration-300",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx4.clsx(
           "inline-flex rounded-xl p-3 mb-6",
           `bg-gradient-to-br ${gradient}`
         ), children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-6 w-6 text-white" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold text-gray-900 dark:text-white mb-2", children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 dark:text-gray-400 leading-relaxed", children: description })
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold text-slate-900 dark:text-white mb-2", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-slate-600 dark:text-slate-400 leading-relaxed", children: description })
       ]
     }
   );
@@ -20060,7 +20116,7 @@ function SkipToContent({
     "a",
     {
       href: `#${targetId}`,
-      className: "sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[9999] focus:rounded-lg focus:bg-white focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-indigo-600 focus:shadow-lg focus:ring-2 focus:ring-indigo-500 focus:outline-none dark:focus:bg-gray-800 dark:focus:text-indigo-400",
+      className: "sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[9999] focus:rounded-lg focus:bg-white focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-indigo-600 focus:shadow-lg focus:ring-2 focus:ring-indigo-500/70 focus:ring-offset-1 focus:outline-none dark:focus:bg-slate-800 dark:focus:text-indigo-400",
       "data-testid": "skip-to-content",
       children: label
     }
@@ -20432,6 +20488,7 @@ exports.PageSectionHeader = PageSectionHeader;
 exports.Pagination = Pagination;
 exports.PasswordInput = PasswordInput;
 exports.PasswordStrengthMeter = PasswordStrengthMeter;
+exports.PickerTile = PickerTile;
 exports.PlatformShell = PlatformShell;
 exports.PlusGrid = PlusGrid;
 exports.PlusGridItem = PlusGridItem;
@@ -20802,5 +20859,5 @@ exports.useSocialProviders = useSocialProviders;
 exports.validateDashboardSpec = validateDashboardSpec;
 exports.xScale = xScale;
 exports.yScale = yScale;
-//# sourceMappingURL=chunk-5ETT54QS.js.map
-//# sourceMappingURL=chunk-5ETT54QS.js.map
+//# sourceMappingURL=chunk-FZUV7GNB.js.map
+//# sourceMappingURL=chunk-FZUV7GNB.js.map