@firecms/ui 3.0.0-canary.144 → 3.0.0-canary.145

package/dist/index.umd.js

@@ -35,15 +35,15 @@
   const ReactDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactDOM);
   const TabsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TabsPrimitive);
   const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
-  const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-slate-100 focus:dark:bg-gray-800 focus:dark:bg-opacity-60";
+  const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-800 focus:dark:bg-opacity-60";
   const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
-  const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-800 dark:bg-opacity-60";
-  const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0";
-  const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-50 dark:bg-opacity-90";
-  const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-40";
-  const defaultBorderMixin = "border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-40";
-  const paperMixin = "bg-white rounded-md dark:bg-gray-950 border border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-40";
-  const cardMixin = "bg-white border border-gray-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-700 dark:border-opacity-40 m-1 -p-1";
+  const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 dark:bg-surface-800 dark:bg-opacity-60";
+  const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-800 dark:bg-opacity-0";
+  const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 dark:bg-opacity-90";
+  const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40";
+  const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
+  const paperMixin = "bg-white rounded-md dark:bg-surface-950 border border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
+  const cardMixin = "bg-white border border-surface-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-surface-950 dark:border-surface-700 dark:border-opacity-40 m-1 -p-1";
   const cardClickableMixin = "hover:bg-primary-bg dark:hover:bg-primary-bg hover:bg-opacity-20 dark:hover:bg-opacity-20 hover:ring-2 hover:ring-primary cursor-pointer";
   const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";
   function cls(...classes) {
@@ -284,7 +284,7 @@
             ref: autocompleteRef,
             className: cls(
               open ? paperMixin : "",
-              "bg-slate-50 dark:bg-slate-900 py-2"
+              "bg-surface-accent-50 dark:bg-surface-accent-900 py-2"
             ),
             children
           }
@@ -299,7 +299,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "flex w-full items-center pr-6 pl-14 h-[48px] cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800",
+        className: "flex w-full items-center pr-6 pl-14 h-[48px] cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800",
         onClick,
         children
       }
@@ -328,7 +328,7 @@
         return "bg-emerald-50 dark:bg-emerald-800 dark:text-emerald-100 text-emerald-900";
       case "base":
       default:
-        return "bg-slate-50 dark:bg-slate-800 dark:text-white text-slate-900";
+        return "bg-surface-accent-50 dark:bg-surface-accent-800 dark:text-white text-surface-accent-900";
     }
   };
   const Alert = ({
@@ -358,7 +358,7 @@
           onDismiss && /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
-              className: "text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-400",
+              className: "text-surface-accent-400 hover:text-surface-accent-600 dark:text-surface-accent-500 dark:hover:text-surface-accent-400",
               onClick: onDismiss,
               children: "×"
             }
@@ -389,14 +389,14 @@
         ...props,
         className: cls(
           "rounded-full flex items-center justify-center overflow-hidden",
-          "p-1 hover:bg-slate-200 hover:dark:bg-slate-700 w-12 h-12 min-w-12 min-h-12",
+          "p-1 hover:bg-surface-accent-200 hover:dark:bg-surface-accent-700 w-12 h-12 min-w-12 min-h-12",
           outerClassName
         ),
         children: src && !isImageError ? /* @__PURE__ */ jsxRuntime.jsx(
           "img",
           {
             className: cls(
-              "bg-slate-100 dark:bg-slate-800",
+              "bg-surface-accent-100 dark:bg-surface-accent-800",
               "w-full h-full object-cover rounded-full",
               className
             ),
@@ -408,9 +408,9 @@
           "span",
           {
             className: cls(
-              "bg-slate-100 dark:bg-slate-800",
+              "bg-surface-accent-100 dark:bg-surface-accent-800",
               "flex items-center justify-center",
-              "w-full h-full py-1.5 text-lg font-medium text-slate-900 dark:text-white rounded-full",
+              "w-full h-full py-1.5 text-lg font-medium text-surface-accent-900 dark:text-white rounded-full",
               className
             ),
             children
@@ -449,7 +449,7 @@
           className: cls(
             size === "smallest" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]",
             "outline-none rounded-full relative shadow-sm",
-            value ? disabled ? "bg-white bg-opacity-54 dark:bg-slate-950 border-slate-100 dark:border-slate-700 ring-1 ring-slate-200 dark:ring-slate-700" : "ring-secondary ring-1 bg-secondary dark:bg-secondary" : "bg-white bg-opacity-54 dark:bg-slate-900 ring-1 ring-slate-200 dark:ring-slate-700",
+            value ? disabled ? "bg-white bg-opacity-54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700" : "ring-secondary ring-1 bg-secondary dark:bg-secondary" : "bg-white bg-opacity-54 dark:bg-surface-accent-900 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700",
             className
           ),
           ...props,
@@ -459,7 +459,7 @@
               {
                 className: cls(
                   "block rounded-full transition-transform duration-100 transform will-change-auto",
-                  disabled ? "bg-slate-400 dark:bg-slate-600" : "bg-slate-400 dark:bg-slate-600",
+                  disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600",
                   {
                     "w-[21px] h-[10px]": size === "small" || size === "medium",
                     "w-[19px] h-[8px]": size === "smallest",
@@ -475,7 +475,7 @@
               {
                 className: cls(
                   "block rounded-full transition-transform duration-100 transform will-change-auto",
-                  disabled ? "bg-slate-300 dark:bg-slate-700" : value ? "bg-white" : "bg-slate-600 dark:bg-slate-400",
+                  disabled ? "bg-surface-accent-300 dark:bg-surface-accent-700" : value ? "bg-white" : "bg-surface-accent-600 dark:bg-surface-accent-400",
                   {
                     "w-[21px] h-[21px]": size === "small" || size === "medium",
                     "w-[19px] h-[19px]": size === "smallest",
@@ -585,21 +585,21 @@
       "border border-primary bg-primary hover:bg-primary-dark focus:ring-primary shadow hover:ring-1 hover:ring-primary text-white hover:text-white": variant === "filled" && color === "primary" && !disabled,
       "border border-secondary bg-secondary hover:bg-secondary-dark focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white hover:text-white": variant === "filled" && color === "secondary" && !disabled,
       "border border-red-500 bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
-      "border border-slate-200 bg-slate-200 hover:bg-slate-300 focus:ring-slate-400 shadow hover:ring-1 hover:ring-slate-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
+      "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow hover:ring-1 hover:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
       // Text Variants
-      "border border-transparent text-primary hover:text-primary hover:bg-slate-200 dark:hover:bg-gray-900": variant === "text" && color === "primary" && !disabled,
+      "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 dark:hover:bg-surface-900": variant === "text" && color === "primary" && !disabled,
       "border border-transparent text-secondary hover:text-secondary hover:bg-secondary-bg": variant === "text" && color === "secondary" && !disabled,
       "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10": variant === "text" && color === "error" && !disabled,
-      "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-slate-200 hover:dark:bg-gray-700": variant === "text" && color === "text" && !disabled,
+      "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:dark:bg-surface-700": variant === "text" && color === "text" && !disabled,
       // Outlined Variants
       "border border-primary text-primary hover:text-primary hover:bg-primary-bg": variant === "outlined" && color === "primary" && !disabled,
       "border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": variant === "outlined" && color === "secondary" && !disabled,
       "border border-red-500 text-red-500 hover:text-red-500 hover:bg-red-500 hover:text-white": variant === "outlined" && color === "error" && !disabled,
-      "border border-slate-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-slate-200": variant === "outlined" && color === "text" && !disabled,
+      "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-surface-accent-200": variant === "outlined" && color === "text" && !disabled,
       // Disabled states for all variants
       "border border-transparent opacity-50": variant === "text" && disabled,
-      "border border-gray-500 opacity-50": variant === "outlined" && disabled,
-      "border border-gray-500 bg-gray-500 opacity-50": variant === "filled" && disabled
+      "border border-surface-500 opacity-50": variant === "outlined" && disabled,
+      "border border-surface-500 bg-surface-500 opacity-50": variant === "filled" && disabled
     });
     const sizeClasses2 = cls(
       {
@@ -751,7 +751,7 @@
           sizeClasses2,
           borderClasses,
           "inline-block animate-spin rounded-full border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]",
-          "text-primary-dark dark:text-primary",
+          "text-primary dark:text-primary",
           className
         ),
         role: "status",
@@ -13610,7 +13610,7 @@
           padding ? paddingClasses[size] : "",
           outerSizeClasses[size],
           "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150",
-          onCheckedChange ? "rounded-full hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-700 dark:hover:bg-opacity-75" : "",
+          onCheckedChange ? "rounded-full hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-700 dark:hover:bg-opacity-75" : "",
           onCheckedChange ? "cursor-pointer" : "cursor-default"
         ), children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -13618,9 +13618,9 @@
             className: cls(
               "border-2 relative transition-colors ease-in-out duration-150",
               sizeClasses$1[size],
-              disabled ? indeterminate || isChecked ? "bg-slate-400 dark:bg-slate-600" : "bg-slate-400 dark:bg-slate-600" : indeterminate || isChecked ? colorClasses$2[color] : "bg-white dark:bg-slate-900",
-              indeterminate || isChecked ? "text-slate-100 dark:text-slate-900" : "",
-              disabled ? "border-transparent" : indeterminate || isChecked ? "border-transparent" : "border-slate-800 dark:border-slate-200"
+              disabled ? indeterminate || isChecked ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600" : indeterminate || isChecked ? colorClasses$2[color] : "bg-white dark:bg-surface-900",
+              indeterminate || isChecked ? "text-surface-accent-100 dark:text-surface-accent-900" : "",
+              disabled ? "border-transparent" : indeterminate || isChecked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-200"
             ),
             children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxPrimitive__namespace.Indicator, { asChild: true, children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { iconKey: "remove", size: iconSize, className: "absolute" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { iconKey: "check", size: iconSize, className: "absolute" }) })
           }
@@ -13651,9 +13651,9 @@
         className: cls(
           "rounded-lg max-w-full w-max h-fit font-regular inline-flex gap-1",
           "text-ellipsis",
-          onClick ? "cursor-pointer hover:bg-slate-300 hover:dark:bg-slate-700" : "",
+          onClick ? "cursor-pointer hover:bg-surface-accent-300 hover:dark:bg-surface-accent-700" : "",
           sizeClassNames[size],
-          error || !usedColorScheme ? "bg-slate-200 dark:bg-slate-800 text-slate-800 dark:text-white" : "",
+          error || !usedColorScheme ? "bg-surface-accent-200 dark:bg-surface-accent-800 text-surface-accent-800 dark:text-white" : "",
           error ? "text-red-500 dark:text-red-400" : "",
           className
         ),
@@ -13674,9 +13674,9 @@
       }
     );
   }
-  const buttonClasses = "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-800";
+  const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800";
   const baseClasses = "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
-  const colorClasses$1 = "text-slate-600 visited:text-slate-600 dark:text-slate-300 dark:visited:text-gray-300";
+  const colorClasses$1 = "text-surface-accent-600 visited:text-surface-accent-600 dark:text-surface-accent-300 dark:visited:text-surface-300";
   const sizeClasses = {
     medium: "w-10 !h-10 min-w-10 min-h-10",
     small: "w-8 !h-8 min-w-8 min-h-8",
@@ -13698,7 +13698,7 @@
     component,
     ...props
   }, ref) => {
-    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-slate-200 bg-opacity-50 dark:bg-gray-950 dark:bg-opacity-50";
+    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-surface-accent-200 bg-opacity-50 dark:bg-surface-950 dark:bg-opacity-50";
     const Component = component || "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
       Component,
@@ -13960,7 +13960,7 @@
                   size === "small" ? "min-h-[48px]" : "min-h-[64px]",
                   label ? "pt-8 pb-2" : "py-2",
                   inputClassName,
-                  disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-slate-600 dark:text-slate-500"
+                  disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-surface-accent-600 dark:text-surface-accent-500"
                 )
               }
             ),
@@ -13971,7 +13971,7 @@
                   e.stopPropagation();
                   inputRef.current?.showPicker();
                 },
-                className: "absolute right-3 top-1/2 transform -translate-y-1/2 !text-slate-500",
+                className: "absolute right-3 top-1/2 transform -translate-y-1/2 !text-surface-accent-500",
                 children: /* @__PURE__ */ jsxRuntime.jsx(CalendarMonthIcon, { color: "disabled" })
               }
             ),
@@ -13979,7 +13979,7 @@
               IconButton,
               {
                 onClick: handleClear,
-                className: "absolute right-14 top-1/2 transform -translate-y-1/2 text-slate-400 ",
+                className: "absolute right-14 top-1/2 transform -translate-y-1/2 text-surface-accent-400 ",
                 children: /* @__PURE__ */ jsxRuntime.jsx(ClearIcon, {})
               }
             )
@@ -14089,7 +14089,7 @@
                     "outline-none focus:outline-none",
                     fullWidth && !fullScreen ? "w-11/12" : void 0,
                     fullHeight && !fullScreen ? "h-full" : void 0,
-                    "text-slate-900 dark:text-white",
+                    "text-surface-accent-900 dark:text-white",
                     "justify-center items-center",
                     fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-xl",
                     "ease-in-out duration-200",
@@ -14120,7 +14120,7 @@
           defaultBorderMixin,
           "py-3 px-4 border-t flex flex-row items-center justify-end bottom-0 right-0 left-0 text-right z-2 gap-2",
           position,
-          "bg-white bg-opacity-60 dark:bg-gray-900 dark:bg-opacity-60",
+          "bg-white bg-opacity-60 dark:bg-surface-900 dark:bg-opacity-60",
           translucent ? "backdrop-blur-sm" : "",
           className
         ),
@@ -14239,7 +14239,7 @@
             {
               className: cls(
                 "rounded-t flex items-center justify-between w-full min-h-[52px]",
-                "hover:bg-slate-200 hover:bg-opacity-20 dark:hover:bg-gray-800 dark:hover:bg-opacity-20",
+                "hover:bg-surface-accent-200 hover:bg-opacity-20 dark:hover:bg-surface-800 dark:hover:bg-opacity-20",
                 invisible ? "border-b px-2" : "p-4",
                 open ? "py-6" : "py-4",
                 "transition-all duration-200",
@@ -14370,8 +14370,8 @@
       onClick,
       className: cls(
         "text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-        border && "border border-gray-300 dark:border-gray-700 rounded-md px-3 py-1.5",
-        onClick && "hover:cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-800",
+        border && "border border-surface-300 dark:border-surface-700 rounded-md px-3 py-1.5",
+        onClick && "hover:cursor-pointer hover:bg-surface-200 dark:hover:bg-surface-800",
         defaultBorderMixin,
         className
       ),
@@ -14403,8 +14403,8 @@
     );
   }
   const proseClasses = {
-    small: "prose-sm text-sm",
-    medium: "prose text-base",
+    small: "prose-sm typography-body2",
+    medium: "prose typography-body1",
     large: "prose-lg",
     xl: "prose-xl",
     "2xl": "prose-2xl"
@@ -14474,7 +14474,7 @@
   }) {
     const classNames = cls(
       onClick && "cursor-pointer",
-      "rounded-md text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900 flex items-center gap-4",
+      "rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900 flex items-center gap-4",
       dense ? "px-3 py-1.5" : "px-4 py-2"
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -14495,7 +14495,7 @@
       MenubarPrimitive__namespace.Root,
       {
         onSelect,
-        className: cls("z-10 flex bg-white dark:bg-gray-950 p-[3px] rounded-sm shadow-sm", className),
+        className: cls("z-10 flex bg-white dark:bg-surface-950 p-[3px] rounded-sm shadow-sm", className),
         children
       }
     );
@@ -14515,7 +14515,7 @@
       {
         onSelect,
         className: cls(
-          "py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800 data-[state=open]:bg-slate-100 data-[state=open]:dark:bg-gray-800 hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-50",
+          "py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-800 hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-700 dark:hover:bg-opacity-50",
           className
         ),
         children
@@ -14540,7 +14540,7 @@
       MenubarPrimitive__namespace.Content,
       {
         onSelect,
-        className: cls("min-w-[220px] bg-white dark:bg-gray-950 rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]", className),
+        className: cls("min-w-[220px] bg-white dark:bg-surface-950 rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]", className),
         align: align ?? "start",
         sideOffset: sideOffset ?? 5,
         alignOffset: alignOffset ?? -3,
@@ -14562,7 +14562,7 @@
       {
         onSelect,
         className: cls(
-          "group text-[13px] leading-none rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-slate-100 data-[state=open]:dark:bg-gray-800 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
+          "group text-[13px] leading-none rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-800 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
           leftPadding ? "pl-5" : "",
           disabled ? "pointer-events-none text-text-secondary dark:text-text-secondary-dark" : "text-text-primary dark:text-text-primary-dark",
           className
@@ -14581,7 +14581,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(
       MenubarPrimitive__namespace.Separator,
       {
-        className: cls("h-[1px] bg-slate-100 dark:bg-gray-800 m-[5px]", className),
+        className: cls("h-[1px] bg-surface-accent-100 dark:bg-surface-800 m-[5px]", className),
         ...rest,
         children
       }
@@ -14610,7 +14610,7 @@
       {
         onSelect,
         className: cls(
-          "group text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-slate-100 data-[state=open]:dark:bg-gray-800 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
+          "group text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-800 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
           className
         ),
         ...rest,
@@ -14631,7 +14631,7 @@
         onSelect,
         alignOffset: alignOffset ?? -5,
         className: cls(
-          "min-w-[220px] bg-white dark:bg-gray-950 rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]",
+          "min-w-[220px] bg-white dark:bg-surface-950 rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]",
           className
         ),
         ...rest,
@@ -14652,7 +14652,7 @@
       {
         onSelect,
         className: cls(
-          "text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
+          "text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
           className
         ),
         checked,
@@ -14708,7 +14708,7 @@
       {
         onSelect,
         className: cls(
-          "text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
+          "text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
           className
         ),
         value,
@@ -14748,14 +14748,14 @@
         {
           decorative,
           orientation: "horizontal",
-          className: cls("dark:bg-opacity-80 dark:bg-gray-800 bg-gray-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className)
+          className: cls("dark:bg-opacity-80 dark:bg-surface-800 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className)
         }
       );
     else
       return /* @__PURE__ */ jsxRuntime.jsx(
         SeparatorPrimitive__namespace.Root,
         {
-          className: cls("dark:bg-opacity-80 dark:bg-gray-800 bg-gray-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className),
+          className: cls("dark:bg-opacity-80 dark:bg-surface-800 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className),
           decorative,
           orientation: "vertical"
         }
@@ -14764,7 +14764,7 @@
   function SelectInputLabel({ children, error }) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls(
       "text-sm  font-medium ml-3.5 mb-1",
-      error ? "text-red-500 dark:text-red-600" : "text-slate-500 dark:text-slate-300"
+      error ? "text-red-500 dark:text-red-600" : "text-surface-accent-500 dark:text-surface-accent-300"
     ), children });
   }
   const MultiSelectContext = React__namespace.createContext({});
@@ -14955,7 +14955,7 @@
                   /* @__PURE__ */ jsxRuntime.jsx(
                     PopoverPrimitive__namespace.Content,
                     {
-                      className: cls("z-50 relative overflow-hidden border bg-white dark:bg-gray-900 rounded-lg w-[400px]", defaultBorderMixin),
+                      className: cls("z-50 relative overflow-hidden border bg-white dark:bg-surface-900 rounded-lg w-[400px]", defaultBorderMixin),
                       align: "start",
                       sideOffset: 8,
                       onEscapeKeyDown: () => onPopoverOpenChange(false),
@@ -14992,8 +14992,8 @@
                                   "m-1",
                                   "ring-offset-transparent",
                                   "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2",
-                                  "aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
-                                  "cursor-pointer p-2 rounded aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900"
+                                  "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
+                                  "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"
                                 ),
                                 children: [
                                   /* @__PURE__ */ jsxRuntime.jsx(InnerCheckBox, { checked: selectedValues.length === allValues.length }),
@@ -15041,13 +15041,13 @@
         },
         className: cls(
           "flex flex-row items-center gap-1.5",
-          isSelected ? "bg-slate-200 dark:bg-slate-950" : "",
+          isSelected ? "bg-surface-accent-200 dark:bg-surface-accent-950" : "",
           "cursor-pointer",
           "m-1",
           "ring-offset-transparent",
           "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2",
-          "aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
-          "cursor-pointer p-2 rounded aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
+          "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
+          "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
           className
         ),
         children: [
@@ -15068,9 +15068,9 @@
         className: cls(
           "border-2 relative transition-colors ease-in-out duration-150",
           "w-4 h-4 rounded flex items-center justify-center",
-          checked ? "bg-primary" : "bg-white dark:bg-slate-900",
-          checked ? "text-slate-100 dark:text-slate-900" : "",
-          checked ? "border-transparent" : "border-slate-800 dark:border-slate-200"
+          checked ? "bg-primary" : "bg-white dark:bg-surface-accent-900",
+          checked ? "text-surface-accent-100 dark:text-surface-accent-900" : "",
+          checked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-200"
         ),
         children: checked && /* @__PURE__ */ jsxRuntime.jsx(Icon, { iconKey: "check", size: 16, className: "absolute" })
       }
@@ -15158,7 +15158,7 @@
         className: cls(
           "relative",
           large ? "h-14" : "h-[42px]",
-          "bg-slate-50 dark:bg-gray-800 border",
+          "bg-surface-accent-50 dark:bg-surface-800 border",
           defaultBorderMixin,
           "rounded-lg",
           className
@@ -15168,7 +15168,7 @@
             "div",
             {
               className: "absolute p-0 px-4 h-full pointer-events-none flex items-center justify-center top-0",
-              children: loading ? /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, { size: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className: "text-slate-500 dark:text-gray-500" })
+              children: loading ? /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, { size: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className: "text-text-disabled dark:text-text-disabled-dark" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -15187,7 +15187,8 @@
               onBlur: () => setActive(false),
               className: cls(
                 (disabled || loading) && "pointer-events-none",
-                "relative flex items-center rounded transition-all bg-transparent outline-none appearance-none border-none",
+                "placeholder-text-disabled dark:placeholder-text-disabled-dark",
+                "relative flex items-center rounded-lg transition-all bg-transparent outline-none appearance-none border-none",
                 "pl-12 h-full text-current ",
                 expandable ? active ? "w-[220px]" : "w-[180px]" : "",
                 innerClassName
@@ -15282,7 +15283,7 @@
                 "select-none rounded-md text-sm",
                 error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
                 error ? "border border-red-500 dark:border-red-600" : "",
-                disabled ? "text-slate-600 dark:text-slate-400" : "text-slate-800 dark:text-white",
+                disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white",
                 "relative flex flex-row items-center",
                 inputClassName
               ),
@@ -15338,7 +15339,7 @@
             SelectPrimitive__namespace.Content,
             {
               position,
-              className: cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-gray-900 p-2 rounded-lg", defaultBorderMixin),
+              className: cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin),
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 SelectPrimitive__namespace.Viewport,
                 {
@@ -15367,10 +15368,10 @@
         disabled,
         className: cls(
           "w-full",
-          "relative flex items-center p-2 rounded-md text-sm text-slate-700 dark:text-slate-300",
+          "relative flex items-center p-2 rounded-md text-sm text-surface-accent-700 dark:text-surface-accent-300",
           "focus:z-10",
-          "data-[state=checked]:bg-slate-100 data-[state=checked]:dark:bg-slate-800 focus:bg-slate-100 dark:focus:bg-gray-950",
-          "data-[state=checked]:focus:bg-slate-200 data-[state=checked]:dark:focus:bg-gray-950",
+          "data-[state=checked]:bg-surface-accent-100 data-[state=checked]:dark:bg-surface-accent-800 focus:bg-surface-accent-100 dark:focus:bg-surface-950",
+          "data-[state=checked]:focus:bg-surface-accent-200 data-[state=checked]:dark:focus:bg-surface-950",
           disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
           "[&>*]:w-full",
           "overflow-visible",
@@ -15400,7 +15401,7 @@
         SelectPrimitive__namespace.Group,
         {
           className: cls(
-            "text-xs text-slate-900 dark:text-white uppercase tracking-wider font-bold mt-6 first:mt-2",
+            "text-xs text-surface-accent-900 dark:text-white uppercase tracking-wider font-bold mt-6 first:mt-2",
             "px-2 py-2",
             className
           ),
@@ -15418,7 +15419,7 @@
           className: cls(
             {
               "border-primary bg-primary hover:bg-primary-dark outline-none": !props.props.disabled,
-              "border-slate-300 bg-slate-300 dark:border-gray-700 dark:bg-gray-700": props.props.disabled
+              "border-surface-accent-300 bg-surface-accent-300 dark:border-surface-700 dark:bg-surface-700": props.props.disabled
             },
             props.classes,
             "focus-visible:ring-4 focus-visible:ring-primary focus-visible:ring-opacity-50",
@@ -15435,7 +15436,7 @@
           className: cls(
             "TooltipContent",
             "max-w-lg leading-relaxed",
-            "z-50 rounded px-3 py-2 text-xs leading-none bg-slate-700 dark:bg-slate-800 bg-opacity-90 font-medium text-slate-50 shadow-2xl select-none duration-400 ease-in transform opacity-100"
+            "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100"
           ),
           children: props.props.value?.[props.index]
         }
@@ -15465,13 +15466,13 @@
             SliderPrimitive__namespace.Track,
             {
               style: { height: size === "small" ? 4 : 8 },
-              className: "relative w-full grow overflow-hidden rounded-full bg-slate-300 bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40",
+              className: "relative w-full grow overflow-hidden rounded-full bg-surface-accent-300 bg-opacity-40 dark:bg-surface-700 dark:bg-opacity-40",
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 SliderPrimitive__namespace.Range,
                 {
                   className: cls("absolute h-full", {
                     "bg-primary": !props.disabled,
-                    "bg-slate-300 dark:bg-gray-700": props.disabled
+                    "bg-surface-accent-300 dark:bg-surface-700": props.disabled
                   })
                 }
               )
@@ -15538,7 +15539,7 @@
               className: cls(
                 "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm",
                 "bg-black bg-opacity-50",
-                "dark:bg-gray-900 dark:bg-opacity-60",
+                "dark:bg-surface-900 dark:bg-opacity-60",
                 displayed && open ? "opacity-100" : "opacity-0",
                 overlayClassName
               ),
@@ -15557,11 +15558,11 @@
                 defaultBorderMixin,
                 "transform-gpu",
                 "will-change-transform",
-                "text-slate-900 dark:text-white",
+                "text-surface-accent-900 dark:text-white",
                 "fixed transform z-20 transition-all ease-in-out",
                 !displayed ? "duration-150" : "duration-100",
                 "outline-none focus:outline-none",
-                transparent ? "" : "shadow-md bg-white dark:bg-gray-950",
+                transparent ? "" : "shadow-md bg-white dark:bg-surface-950",
                 side === "top" || side === "bottom" ? "w-full" : "h-full",
                 side === "left" || side === "top" ? "left-0 top-0" : "right-0 bottom-0",
                 displayed && open ? "opacity-100" : "opacity-50",
@@ -15860,7 +15861,7 @@
         className: cls(
           invisible ? focusedInvisibleMixin : "",
           "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8",
-          disabled && "border border-transparent outline-none opacity-50 text-slate-600 dark:text-slate-500"
+          disabled && "border border-transparent outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500"
         )
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -15880,7 +15881,7 @@
           label ? size === "medium" ? "pt-8 pb-2" : "pt-4 pb-2" : "py-2",
           focused ? "text-text-primary dark:text-text-primary-dark" : "",
           endAdornment ? "pr-10" : "pr-3",
-          disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-slate-800 dark:text-white",
+          disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-surface-accent-800 dark:text-white",
           inputClassName
         ),
         placeholder: focused || hasValue || !label ? placeholder : void 0,
@@ -15963,7 +15964,7 @@
           className: cls(
             "TooltipContent",
             "max-w-lg leading-relaxed",
-            "z-50 rounded px-3 py-2 text-xs leading-none bg-slate-700 dark:bg-slate-800 bg-opacity-90 font-medium text-slate-50 shadow-2xl select-none duration-400 ease-in transform opacity-100",
+            "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100",
             tooltipClassName
           ),
           style: tooltipStyle,
@@ -16047,7 +16048,7 @@
     children
   }) {
     return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { value, onValueChange, children: /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.List, { className: cls(
-      "flex text-sm font-medium text-center text-slate-800 dark:text-white max-w-full overflow-auto no-scrollbar",
+      "flex text-sm font-medium text-center text-surface-accent-800 dark:text-white max-w-full overflow-auto no-scrollbar",
       className
     ), children }) });
   }
@@ -16065,18 +16066,18 @@
         className: cls(
           "border-b-2 border-transparent",
           "data-[state=active]:border-secondary",
-          disabled ? "text-slate-400 dark:text-slate-500" : cls(
-            "text-slate-700 dark:text-slate-300",
-            "data-[state=active]:text-slate-900 data-[state=active]:dark:text-white",
-            "hover:text-slate-800 dark:hover:text-slate-200"
+          disabled ? "text-surface-accent-400 dark:text-surface-accent-500" : cls(
+            "text-surface-accent-700 dark:text-surface-accent-300",
+            "data-[state=active]:text-surface-accent-900 data-[state=active]:dark:text-white",
+            "hover:text-surface-accent-800 dark:hover:text-surface-accent-200"
           ),
-          // disabled ? "text-slate-400 dark:text-slate-500" : "data-[state=active]:text-primary",
-          // "data-[state=active]:bg-slate-50 data-[state=active]:dark:bg-slate-800",
+          // disabled ? "text-surface-accent-400 dark:text-surface-accent-500" : "data-[state=active]:text-primary",
+          // "data-[state=active]:bg-surface-accent-50 data-[state=active]:dark:bg-surface-accent-800",
           className
         ),
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls(
           "uppercase inline-block p-2 px-4 m-2 rounded",
-          "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-800"
+          "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800"
         ), children })
       }
     );
@@ -16089,7 +16090,7 @@
   }) => /* @__PURE__ */ jsxRuntime.jsx(
     "table",
     {
-      className: cls("text-left text-gray-800 dark:text-white rounded-md overflow-x-auto", className),
+      className: cls("text-left text-surface-800 dark:text-white rounded-md overflow-x-auto", className),
       style,
       ...rest,
       children
@@ -16102,7 +16103,7 @@
   }) => /* @__PURE__ */ jsxRuntime.jsx(
     "tbody",
     {
-      className: cls("bg-white dark:bg-gray-950 text-sm divide-y divide-gray-100 dark:divide-gray-700 dark:divide-opacity-70", className),
+      className: cls("bg-white dark:bg-surface-950 text-sm divide-y divide-surface-100 dark:divide-surface-700 dark:divide-opacity-70", className),
       ...rest,
       children
     }
@@ -16116,8 +16117,8 @@
     {
       className: cls(
         defaultBorderMixin,
-        "text-sm font-medium text-gray-700 dark:text-slate-300",
-        "bg-slate-50 border-b dark:bg-gray-900",
+        "text-sm font-medium text-surface-700 dark:text-surface-accent-300",
+        "bg-surface-accent-50 border-b dark:bg-surface-900",
         className
       ),
       children
@@ -16135,8 +16136,8 @@
       onClick,
       style,
       className: cls(
-        "bg-white dark:bg-gray-950",
-        onClick ? "hover:bg-slate-100 dark:hover:bg-slate-800 cursor-pointer" : "",
+        "bg-white dark:bg-surface-950",
+        onClick ? "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 cursor-pointer" : "",
         className
       ),
       ...rest,
@@ -16238,7 +16239,7 @@
               avoidCollisions,
               children: [
                 children,
-                /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Arrow, { className: "fill-white dark:fill-slate-950" })
+                /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Arrow, { className: "fill-white dark:fill-surface-accent-950" })
               ]
             }
           ) })
@@ -16320,7 +16321,7 @@
       case "error":
         return "bg-red-500";
       default:
-        return "bg-slate-300 dark:bg-slate-700";
+        return "bg-surface-accent-300 dark:bg-surface-accent-700";
     }
   };
   const Badge = ({
@@ -16383,7 +16384,7 @@
         },
         className: cls(
           "block",
-          "bg-slate-200 dark:bg-slate-800 rounded-md",
+          "bg-surface-accent-200 dark:bg-surface-accent-800 rounded-md",
           "animate-pulse",
           "max-w-full max-h-full",
           className