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

package/dist/index.es.js

@@ -24,15 +24,15 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as ReactDOM from "react-dom";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 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) {
@@ -273,7 +273,7 @@ function Autocomplete({
           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
         }
@@ -288,7 +288,7 @@ function AutocompleteItem({
   return /* @__PURE__ */ 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
     }
@@ -317,7 +317,7 @@ const getColorClasses = (severity) => {
       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 = ({
@@ -347,7 +347,7 @@ const Alert = ({
         onDismiss && /* @__PURE__ */ 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: "×"
           }
@@ -378,14 +378,14 @@ const AvatarInner = ({
       ...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__ */ 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
           ),
@@ -397,9 +397,9 @@ const AvatarInner = ({
         "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
@@ -438,7 +438,7 @@ const BooleanSwitch = React__default.forwardRef(
         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,
@@ -448,7 +448,7 @@ const BooleanSwitch = React__default.forwardRef(
             {
               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",
@@ -464,7 +464,7 @@ const BooleanSwitch = React__default.forwardRef(
             {
               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",
@@ -574,21 +574,21 @@ const ButtonInner = React__default.forwardRef(({
     "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(
     {
@@ -740,7 +740,7 @@ function CircularProgress({
         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",
@@ -13599,7 +13599,7 @@ const Checkbox = ({
         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__ */ jsx(
         "div",
@@ -13607,9 +13607,9 @@ const Checkbox = ({
           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__ */ jsx(CheckboxPrimitive.Indicator, { asChild: true, children: indeterminate ? /* @__PURE__ */ jsx(Icon, { iconKey: "remove", size: iconSize, className: "absolute" }) : /* @__PURE__ */ jsx(Icon, { iconKey: "check", size: iconSize, className: "absolute" }) })
         }
@@ -13640,9 +13640,9 @@ function Chip({
       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
       ),
@@ -13663,9 +13663,9 @@ function Chip({
     }
   );
 }
-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",
@@ -13687,7 +13687,7 @@ const IconButtonInner = ({
   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__ */ jsx(
     Component,
@@ -13949,7 +13949,7 @@ const DateTimeField = ({
                 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"
               )
             }
           ),
@@ -13960,7 +13960,7 @@ const DateTimeField = ({
                 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__ */ jsx(CalendarMonthIcon, { color: "disabled" })
             }
           ),
@@ -13968,7 +13968,7 @@ const DateTimeField = ({
             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__ */ jsx(ClearIcon, {})
             }
           )
@@ -14078,7 +14078,7 @@ const Dialog = ({
                   "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",
@@ -14109,7 +14109,7 @@ function DialogActions({
         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
       ),
@@ -14228,7 +14228,7 @@ function ExpandablePanel({
           {
             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",
@@ -14359,8 +14359,8 @@ const Label = React.forwardRef(({
     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
     ),
@@ -14392,8 +14392,8 @@ function LoadingButton({
   );
 }
 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"
@@ -14463,7 +14463,7 @@ function MenuItem({
 }) {
   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__ */ jsx(
@@ -14484,7 +14484,7 @@ function Menubar({
     MenubarPrimitive.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
     }
   );
@@ -14504,7 +14504,7 @@ function MenubarTrigger({
     {
       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
@@ -14529,7 +14529,7 @@ function MenubarContent({
     MenubarPrimitive.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,
@@ -14551,7 +14551,7 @@ function MenubarItem({
     {
       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
@@ -14570,7 +14570,7 @@ function MenubarSeparator({
   return /* @__PURE__ */ jsx(
     MenubarPrimitive.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
     }
@@ -14599,7 +14599,7 @@ function MenubarSubTrigger({
     {
       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,
@@ -14620,7 +14620,7 @@ function MenubarSubContent({
       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,
@@ -14641,7 +14641,7 @@ function MenubarCheckboxItem({
     {
       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,
@@ -14697,7 +14697,7 @@ function MenubarRadioItem({
     {
       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,
@@ -14737,14 +14737,14 @@ function Separator({
       {
         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__ */ jsx(
       SeparatorPrimitive.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"
       }
@@ -14753,7 +14753,7 @@ function Separator({
 function SelectInputLabel({ children, error }) {
   return /* @__PURE__ */ 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.createContext({});
@@ -14944,7 +14944,7 @@ const MultiSelect = React.forwardRef(
                 /* @__PURE__ */ jsx(
                   PopoverPrimitive.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),
@@ -14981,8 +14981,8 @@ const MultiSelect = React.forwardRef(
                                 "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__ */ jsx(InnerCheckBox, { checked: selectedValues.length === allValues.length }),
@@ -15030,13 +15030,13 @@ function MultiSelectItem({
       },
       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: [
@@ -15057,9 +15057,9 @@ function InnerCheckBox({ checked }) {
       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__ */ jsx(Icon, { iconKey: "check", size: 16, className: "absolute" })
     }
@@ -15147,7 +15147,7 @@ function SearchBar({
       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
@@ -15157,7 +15157,7 @@ function SearchBar({
           "div",
           {
             className: "absolute p-0 px-4 h-full pointer-events-none flex items-center justify-center top-0",
-            children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: "small" }) : /* @__PURE__ */ jsx(SearchIcon, { className: "text-slate-500 dark:text-gray-500" })
+            children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: "small" }) : /* @__PURE__ */ jsx(SearchIcon, { className: "text-text-disabled dark:text-text-disabled-dark" })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -15176,7 +15176,8 @@ function SearchBar({
             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
@@ -15271,7 +15272,7 @@ const Select = forwardRef(({
               "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
             ),
@@ -15327,7 +15328,7 @@ const Select = forwardRef(({
           SelectPrimitive.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__ */ jsx(
               SelectPrimitive.Viewport,
               {
@@ -15356,10 +15357,10 @@ function SelectItem({
       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",
@@ -15389,7 +15390,7 @@ function SelectGroup({
       SelectPrimitive.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
         ),
@@ -15407,7 +15408,7 @@ function SliderThumb(props) {
         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",
@@ -15424,7 +15425,7 @@ function SliderThumb(props) {
         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]
       }
@@ -15454,13 +15455,13 @@ const Slider = React.forwardRef(({
           SliderPrimitive.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__ */ jsx(
               SliderPrimitive.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
                 })
               }
             )
@@ -15527,7 +15528,7 @@ const Sheet = ({
             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
             ),
@@ -15546,11 +15547,11 @@ const Sheet = ({
               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",
@@ -15849,7 +15850,7 @@ function TextField({
       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__ */ jsx(
@@ -15869,7 +15870,7 @@ function TextField({
         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,
@@ -15952,7 +15953,7 @@ const Tooltip = ({
         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,
@@ -16036,7 +16037,7 @@ function Tabs({
   children
 }) {
   return /* @__PURE__ */ jsx(TabsPrimitive.Root, { value, onValueChange, children: /* @__PURE__ */ jsx(TabsPrimitive.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 }) });
 }
@@ -16054,18 +16055,18 @@ function Tab({
       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__ */ 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 })
     }
   );
@@ -16078,7 +16079,7 @@ const Table = ({
 }) => /* @__PURE__ */ 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
@@ -16091,7 +16092,7 @@ const TableBody = ({
 }) => /* @__PURE__ */ 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
   }
@@ -16105,8 +16106,8 @@ const TableHeader = ({
   {
     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
@@ -16124,8 +16125,8 @@ const TableRow = ({
     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,
@@ -16227,7 +16228,7 @@ function Popover({
             avoidCollisions,
             children: [
               children,
-              /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { className: "fill-white dark:fill-slate-950" })
+              /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { className: "fill-white dark:fill-surface-accent-950" })
             ]
           }
         ) })
@@ -16309,7 +16310,7 @@ const getColor = (color) => {
     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 = ({
@@ -16372,7 +16373,7 @@ function Skeleton({
       },
       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