@deepnoid/ui 0.0.88 → 0.0.90

package/dist/components/modal/modal.test.js

@@ -1043,7 +1043,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment3 = REACT_FRAGMENT_TYPE;
+        var Fragment4 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -1107,7 +1107,7 @@ var require_react_is_development = __commonJS({
         exports2.ContextProvider = ContextProvider;
         exports2.Element = Element;
         exports2.ForwardRef = ForwardRef;
-        exports2.Fragment = Fragment3;
+        exports2.Fragment = Fragment4;
         exports2.Lazy = Lazy;
         exports2.Memo = Memo;
         exports2.Portal = Portal;
@@ -13199,6 +13199,36 @@ var template = {
       }
     );
   },
+  loading: ({ className, fill }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "svg",
+      {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM6.6 12C6.6 14.9823 9.01766 17.4 12 17.4C14.9823 17.4 17.4 14.9823 17.4 12C17.4 9.01766 14.9823 6.6 12 6.6C9.01766 6.6 6.6 9.01766 6.6 12Z",
+              fill: "currentColor",
+              fillOpacity: "0.1"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M21 12C21 13.9006 20.3983 15.7524 19.2812 17.2901C18.164 18.8277 16.5887 19.9722 14.7812 20.5595C12.9736 21.1468 11.0264 21.1468 9.21885 20.5595C7.41126 19.9722 5.836 18.8277 4.71885 17.2901C3.60169 15.7524 3 13.9006 3 12C3 10.0994 3.60169 8.24756 4.71885 6.70993C5.836 5.1723 7.41126 4.02781 9.21885 3.44049C11.0264 2.85317 12.9736 2.85317 14.7812 3.44049L13.6687 6.8643C12.5841 6.5119 11.4159 6.5119 10.3313 6.86429C9.24675 7.21669 8.3016 7.90338 7.63131 8.82596C6.96102 9.74854 6.6 10.8596 6.6 12C6.6 13.1404 6.96102 14.2515 7.63131 15.174C8.3016 16.0966 9.24675 16.7833 10.3313 17.1357C11.4159 17.4881 12.5841 17.4881 13.6687 17.1357C14.7532 16.7833 15.6984 16.0966 16.3687 15.174C17.039 14.2515 17.4 13.1404 17.4 12H21Z",
+              fill: "currentColor"
+            }
+          )
+        ]
+      }
+    );
+  },
   // ** User **
   "user-circle": ({ className, fill }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -16453,45 +16483,63 @@ var Icon = ({ name, size = "md", fill = false, className, onClick, ...props }) =
 var Icon_default = Icon;
 
 // src/components/button/button.tsx
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Button = (0, import_react.forwardRef)(
-  ({ children, color, size, variant, radius, fullWidth, isInGroup, isDisabled, startContent, endContent, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "button",
-      {
-        ref,
-        ...props,
-        disabled: isDisabled,
-        className: `${button({
-          variant,
-          color,
-          size,
-          radius,
-          isDisabled,
-          fullWidth,
-          isInGroup,
-          class: props.className
-        })} `,
-        children: [
-          startContent && startContent,
-          children,
-          endContent && endContent
-        ]
-      }
-    );
-  }
-);
+var Button = (0, import_react.forwardRef)((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, buttonStyle.variantKeys);
+  const { classNames, startContent, endContent, children, ...buttonProps } = props;
+  const slots = (0, import_react.useMemo)(() => buttonStyle({ ...variantProps }), [variantProps]);
+  const getBaseProps = (0, import_react.useCallback)(
+    () => ({
+      ...buttonProps,
+      ref,
+      disabled: originalProps.isDisabled || originalProps.isLoading,
+      "data-loading": originalProps.isLoading,
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
+    }),
+    [buttonProps, ref, originalProps.isDisabled, originalProps.isLoading, slots, classNames == null ? void 0 : classNames.base]
+  );
+  const getContentProps = (0, import_react.useCallback)(
+    () => ({
+      className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
+      size: originalProps.size
+    }),
+    [slots, classNames, originalProps.size]
+  );
+  const renderContent = (content) => {
+    if (import_react.default.isValidElement(content)) {
+      const existingProps = content.props;
+      const mergedProps = {
+        ...getContentProps(),
+        className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
+      };
+      return import_react.default.cloneElement(content, mergedProps);
+    } else {
+      const contentProps = getContentProps();
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ...contentProps, children: content });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { ...getBaseProps(), children: originalProps.isLoading ? renderContent(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "loading", className: "animate-spin" })) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    startContent && renderContent(startContent),
+    children,
+    endContent && renderContent(endContent)
+  ] }) });
+});
 Button.displayName = "Button";
 var button_default = Button;
-var button = tv({
-  base: "flex items-center justify-center border whitespace-nowrap transition duration-200",
+var buttonStyle = tv({
+  slots: {
+    base: "flex items-center justify-center border whitespace-nowrap transition duration-200 select-none",
+    content: ""
+  },
   variants: {
     variant: {
       solid: "",
       line: "",
       tonal: "",
-      trans: "bg-transparent border-transparent",
+      trans: {
+        base: "bg-transparent border-transparent"
+      },
       ghost: ""
     },
     color: {
@@ -16504,23 +16552,46 @@ var button = tv({
       danger: ""
     },
     size: {
-      sm: "h-[24px] px-[8px] py-[4.5px] text-sm font-[500] rounded-sm gap-sm",
-      md: "h-[30px] px-[16px] py-[6.5px] text-md font-[500] rounded-md gap-md",
-      lg: "h-[36px] px-[24px] py-[8px] text-lg font-[500] rounded-lg gap-lg"
+      sm: {
+        base: "h-[24px] px-[8px] py-[4.5px] text-sm font-[500] rounded-sm gap-sm"
+      },
+      md: {
+        base: "h-[30px] px-[16px] py-[6.5px] text-md font-[500] rounded-md gap-md"
+      },
+      lg: {
+        base: "h-[36px] px-[24px] py-[8px] text-lg font-[500] rounded-lg gap-lg"
+      }
     },
     radius: {
-      default: "",
-      full: "rounded-full",
-      none: "rounded-none"
+      default: {
+        base: ""
+      },
+      full: {
+        base: "rounded-full"
+      },
+      none: {
+        base: "rounded-none"
+      }
     },
     fullWidth: {
-      true: "w-full"
+      true: {
+        base: "w-full"
+      }
     },
     isDisabled: {
-      true: "disabled:bg-neutral-soft disabled:border-neutral-soft disabled:text-neutral-light disabled:pointer-events-none"
+      true: {
+        base: "!bg-neutral-soft !border-neutral-soft !text-neutral-light pointer-events-none"
+      }
+    },
+    isLoading: {
+      true: {
+        base: "pointer-events-none"
+      }
     },
     isInGroup: {
-      true: "[&:not(:first-child):not(:last-child)]:rounded-none first:rounded-r-none last:rounded-l-none"
+      true: {
+        base: "[&:not(:first-child):not(:last-child)]:rounded-none first:rounded-r-none last:rounded-l-none"
+      }
     }
   },
   defaultVariants: {
@@ -16529,6 +16600,7 @@ var button = tv({
     color: "primary",
     fullWidth: false,
     isDisabled: false,
+    isLoading: false,
     isInGroup: false
   },
   compoundVariants: [
@@ -16536,230 +16608,533 @@ var button = tv({
     {
       variant: "solid",
       color: "primary",
-      class: "bg-primary-main hover:bg-primary-dark border-primary-main hover:border-primary-dark text-white"
+      class: {
+        base: [
+          "text-white",
+          "bg-primary-main",
+          "border-primary-main",
+          "hover:bg-primary-dark",
+          "hover:border-primary-dark",
+          "data-[loading=true]:bg-primary-dark",
+          "data-[loading=true]:border-primary-dark"
+        ]
+      }
     },
     {
       variant: "solid",
       color: "secondary",
-      class: "bg-secondary-main hover:bg-secondary-dark border-secondary-main hover:border-secondary-dark text-white"
+      class: {
+        base: [
+          "text-white",
+          "bg-secondary-main",
+          "border-secondary-main",
+          "hover:bg-secondary-dark",
+          "hover:border-secondary-dark",
+          "data-[loading=true]:bg-secondary-dark",
+          "data-[loading=true]:border-secondary-dark"
+        ]
+      }
     },
     {
       variant: "solid",
       color: "neutral",
-      class: "bg-neutral-main hover:bg-neutral-dark border-neutral-main hover:border-neutral-dark text-white"
+      class: {
+        base: [
+          "text-white",
+          "bg-neutral-main",
+          "border-neutral-main",
+          "hover:bg-neutral-dark",
+          "hover:border-neutral-dark",
+          "data-[loading=true]:bg-neutral-dark",
+          "data-[loading=true]:border-neutral-dark"
+        ]
+      }
     },
     {
       variant: "solid",
       color: "info",
-      class: "bg-info-main hover:bg-info-dark border-info-main hover:border-info-dark text-white"
+      class: {
+        base: [
+          "text-white",
+          "bg-info-main",
+          "border-info-main",
+          "hover:bg-info-dark",
+          "hover:border-info-dark",
+          "data-[loading=true]:bg-info-dark",
+          "data-[loading=true]:border-info-dark"
+        ]
+      }
     },
     {
       variant: "solid",
       color: "success",
-      class: "bg-success-main hover:bg-success-dark border-success-main hover:border-success-dark text-white"
+      class: {
+        base: [
+          "text-white",
+          "bg-success-main",
+          "border-success-main",
+          "hover:bg-success-dark",
+          "hover:border-success-dark",
+          "data-[loading=true]:bg-success-dark",
+          "data-[loading=true]:border-success-dark"
+        ]
+      }
     },
     {
       variant: "solid",
       color: "warning",
-      class: "bg-warning-main hover:bg-warning-dark border-warning-main hover:border-warning-dark text-white"
+      class: {
+        base: [
+          "text-white",
+          "bg-warning-main",
+          "border-warning-main",
+          "hover:bg-warning-dark",
+          "hover:border-warning-dark",
+          "data-[loading=true]:bg-warning-dark",
+          "data-[loading=true]:border-warning-dark"
+        ]
+      }
     },
     {
       variant: "solid",
       color: "danger",
-      class: "bg-danger-main hover:bg-danger-dark border-danger-main hover:border-danger-dark text-white"
+      class: {
+        base: [
+          "text-white",
+          "bg-danger-main",
+          "border-danger-main",
+          "hover:bg-danger-dark",
+          "hover:border-danger-dark",
+          "data-[loading=true]:bg-danger-dark",
+          "data-[loading=true]:border-danger-dark"
+        ]
+      }
     },
     // line & color
     {
       variant: "line",
       color: "primary",
-      class: "bg-transparent hover:bg-neutral-soft text-primary-main border-primary-main"
+      class: {
+        base: [
+          "bg-transparent",
+          "border-primary-main",
+          "text-primary-main",
+          "hover:bg-neutral-soft",
+          "data-[loading=true]:bg-neutral-soft"
+        ]
+      }
     },
     {
       variant: "line",
       color: "secondary",
-      class: "bg-transparent hover:bg-neutral-soft text-secondary-main border-secondary-main"
+      class: {
+        base: [
+          "bg-transparent",
+          "border-secondary-main",
+          "text-secondary-main",
+          "hover:bg-neutral-soft",
+          "data-[loading=true]:bg-neutral-soft"
+        ]
+      }
     },
     {
       variant: "line",
       color: "neutral",
-      class: "bg-transparent hover:bg-neutral-soft text-neutral-main border-neutral-main"
+      class: {
+        base: [
+          "bg-transparent",
+          "border-neutral-main",
+          "text-neutral-main",
+          "hover:bg-neutral-soft",
+          "data-[loading=true]:bg-neutral-soft"
+        ]
+      }
     },
     {
       variant: "line",
       color: "info",
-      class: "bg-transparent hover:bg-neutral-soft text-info-main border-info-main"
+      class: {
+        base: [
+          "bg-transparent",
+          "border-info-main",
+          "text-info-main",
+          "hover:bg-neutral-soft",
+          "data-[loading=true]:bg-neutral-soft"
+        ]
+      }
     },
     {
       variant: "line",
       color: "success",
-      class: "bg-transparent hover:bg-neutral-soft text-success-main border-success-main"
+      class: {
+        base: [
+          "bg-transparent",
+          "border-success-main",
+          "text-success-main",
+          "hover:bg-neutral-soft",
+          "data-[loading=true]:bg-neutral-soft"
+        ]
+      }
     },
     {
       variant: "line",
       color: "warning",
-      class: "bg-transparent hover:bg-neutral-soft text-warning-main border-warning-main"
+      class: {
+        base: [
+          "bg-transparent",
+          "border-warning-main",
+          "text-warning-main",
+          "hover:bg-neutral-soft",
+          "data-[loading=true]:bg-neutral-soft"
+        ]
+      }
     },
     {
       variant: "line",
       color: "danger",
-      class: "bg-transparent hover:bg-neutral-soft text-danger-main border-danger-main"
+      class: {
+        base: [
+          "bg-transparent",
+          "border-danger-main",
+          "text-danger-main",
+          "hover:bg-neutral-soft",
+          "data-[loading=true]:bg-neutral-soft"
+        ]
+      }
     },
     // tonal & color
     {
       variant: "tonal",
       color: "primary",
-      class: "bg-primary-soft hover:bg-primary-light border-primary-soft hover:border-primary-light text-primary-main"
+      class: {
+        base: [
+          "bg-primary-soft",
+          "border-primary-soft",
+          "text-primary-main",
+          "hover:border-primary-light",
+          "hover:bg-primary-light",
+          "data-[loading=true]:border-primary-light",
+          "data-[loading=true]:bg-primary-light"
+        ]
+      }
     },
     {
       variant: "tonal",
       color: "secondary",
-      class: "bg-secondary-soft hover:bg-secondary-light  border-secondary-soft hover:border-secondary-light text-secondary-main"
+      class: {
+        base: [
+          "bg-secondary-soft",
+          "border-secondary-soft",
+          "text-secondary-main",
+          "hover:border-secondary-light",
+          "hover:bg-secondary-light",
+          "data-[loading=true]:border-secondary-light",
+          "data-[loading=true]:bg-secondary-light"
+        ]
+      }
     },
     {
       variant: "tonal",
       color: "neutral",
-      class: "bg-neutral-soft hover:bg-neutral-light border-neutral-soft hover:border-neutral-light text-neutral-main"
+      class: {
+        base: [
+          "bg-neutral-soft",
+          "border-neutral-soft",
+          "text-neutral-main",
+          "hover:border-neutral-light",
+          "hover:bg-neutral-light",
+          "data-[loading=true]:border-neutral-light",
+          "data-[loading=true]:bg-neutral-light"
+        ]
+      }
     },
     {
       variant: "tonal",
       color: "info",
-      class: "bg-info-soft hover:bg-info-light border-info-soft hover:border-info-light text-info-main"
+      class: {
+        base: [
+          "bg-info-soft",
+          "border-info-soft",
+          "text-info-main",
+          "hover:border-info-light",
+          "hover:bg-info-light",
+          "data-[loading=true]:border-info-light",
+          "data-[loading=true]:bg-info-light"
+        ]
+      }
     },
     {
       variant: "tonal",
       color: "success",
-      class: "bg-success-soft hover:bg-success-light border-success-soft hover:border-success-light text-success-main"
+      class: {
+        base: [
+          "bg-success-soft",
+          "border-success-soft",
+          "text-success-main",
+          "hover:border-success-light",
+          "hover:bg-success-light",
+          "data-[loading=true]:border-success-light",
+          "data-[loading=true]:bg-success-light"
+        ]
+      }
     },
     {
       variant: "tonal",
       color: "warning",
-      class: "bg-warning-soft hover:bg-warning-light border-warning-soft hover:border-warning-light text-warning-main"
+      class: {
+        base: [
+          "bg-warning-soft",
+          "border-warning-soft",
+          "text-warning-main",
+          "hover:border-warning-light",
+          "hover:bg-warning-light",
+          "data-[loading=true]:border-warning-light",
+          "data-[loading=true]:bg-warning-light"
+        ]
+      }
     },
     {
       variant: "tonal",
       color: "danger",
-      class: "bg-danger-soft hover:bg-danger-light border-danger-soft hover:border-danger-light text-danger-main"
+      class: {
+        base: [
+          "bg-danger-soft",
+          "border-danger-soft",
+          "text-danger-main",
+          "hover:border-danger-light",
+          "hover:bg-danger-light",
+          "data-[loading=true]:border-danger-light",
+          "data-[loading=true]:bg-danger-light"
+        ]
+      }
     },
     // trans & color
     {
       variant: "trans",
       color: "primary",
-      class: "hover:bg-primary-soft border-transparent hover:border-primary-soft text-primary-main hover:text-primary-main"
+      class: {
+        base: [
+          "text-primary-main",
+          "border-transparent",
+          "hover:bg-primary-soft",
+          "hover:text-primary-main",
+          "hover:border-primary-soft",
+          "data-[loading=true]:bg-primary-soft",
+          "data-[loading=true]:text-primary-main",
+          "data-[loading=true]:border-primary-soft"
+        ]
+      }
     },
     {
       variant: "trans",
       color: "secondary",
-      class: "hover:bg-secondary-soft border-transparent hover:border-secondary-soft text-secondary-main hover:text-secondary-main"
+      class: {
+        base: [
+          "text-secondary-main",
+          "border-transparent",
+          "hover:bg-secondary-soft",
+          "hover:text-secondary-main",
+          "hover:border-secondary-soft",
+          "data-[loading=true]:bg-secondary-soft",
+          "data-[loading=true]:text-secondary-main",
+          "data-[loading=true]:border-secondary-soft"
+        ]
+      }
     },
     {
       variant: "trans",
       color: "neutral",
-      class: "hover:bg-neutral-soft border-transparent hover:border-neutral-soft text-neutral-main hover:text-neutral-main"
+      class: {
+        base: [
+          "text-neutral-main",
+          "border-transparent",
+          "hover:bg-neutral-soft",
+          "hover:text-neutral-main",
+          "hover:border-neutral-soft",
+          "data-[loading=true]:bg-neutral-soft",
+          "data-[loading=true]:text-neutral-main",
+          "data-[loading=true]:border-neutral-soft"
+        ]
+      }
     },
     {
       variant: "trans",
       color: "info",
-      class: "hover:bg-info-soft border-transparent hover:border-info-soft text-info-main hover:text-info-main"
+      class: {
+        base: [
+          "text-info-main",
+          "border-transparent",
+          "hover:bg-info-soft",
+          "hover:text-info-main",
+          "hover:border-info-soft",
+          "data-[loading=true]:bg-info-soft",
+          "data-[loading=true]:text-info-main",
+          "data-[loading=true]:border-info-soft"
+        ]
+      }
     },
     {
       variant: "trans",
       color: "success",
-      class: "hover:bg-success-soft border-transparent hover:border-success-soft text-success-main hover:text-success-main"
+      class: {
+        base: [
+          "text-success-main",
+          "border-transparent",
+          "hover:bg-success-soft",
+          "hover:text-success-main",
+          "hover:border-success-soft",
+          "data-[loading=true]:bg-success-soft",
+          "data-[loading=true]:text-success-main",
+          "data-[loading=true]:border-success-soft"
+        ]
+      }
     },
     {
       variant: "trans",
       color: "warning",
-      class: "hover:bg-warning-soft border-transparent hover:border-warning-soft text-warning-main hover:text-warning-main"
+      class: {
+        base: [
+          "text-warning-main",
+          "border-transparent",
+          "hover:bg-warning-soft",
+          "hover:text-warning-main",
+          "hover:border-warning-soft",
+          "data-[loading=true]:bg-warning-soft",
+          "data-[loading=true]:text-warning-main",
+          "data-[loading=true]:border-warning-soft"
+        ]
+      }
     },
     {
       variant: "trans",
       color: "danger",
-      class: "hover:bg-danger-soft border-transparent hover:border-danger-soft text-danger-main hover:text-danger-main"
+      class: {
+        base: [
+          "text-danger-main",
+          "border-transparent",
+          "hover:bg-danger-soft",
+          "hover:text-danger-main",
+          "hover:border-danger-soft",
+          "data-[loading=true]:bg-danger-soft",
+          "data-[loading=true]:text-danger-main",
+          "data-[loading=true]:border-danger-soft"
+        ]
+      }
     },
     // ghost & color
     {
       variant: "ghost",
       color: "primary",
-      class: "hover:bg-primary-main text-primary-main hover:text-white border-primary-main"
+      class: {
+        base: [
+          "text-primary-main",
+          "border-primary-main",
+          "hover:text-white",
+          "hover:bg-primary-main",
+          "data-[loading=true]:text-white",
+          "data-[loading=true]:bg-primary-main"
+        ]
+      }
     },
     {
       variant: "ghost",
       color: "secondary",
-      class: "hover:bg-secondary-main text-secondary-main hover:text-white border-secondary-main"
+      class: {
+        base: [
+          "text-secondary-main",
+          "border-secondary-main",
+          "hover:text-white",
+          "hover:bg-secondary-main",
+          "data-[loading=true]:text-white",
+          "data-[loading=true]:bg-secondary-main"
+        ]
+      }
     },
     {
       variant: "ghost",
       color: "neutral",
-      class: "hover:bg-neutral-main text-neutral-main hover:text-white border-neutral-main"
+      class: {
+        base: [
+          "text-neutral-main",
+          "border-neutral-main",
+          "hover:text-white",
+          "hover:bg-neutral-main",
+          "data-[loading=true]:text-white",
+          "data-[loading=true]:bg-neutral-main"
+        ]
+      }
     },
     {
       variant: "ghost",
       color: "info",
-      class: "hover:bg-info-main text-info-main hover:text-white border-info-main"
+      class: {
+        base: [
+          "text-info-main",
+          "border-info-main",
+          "hover:text-white",
+          "hover:bg-info-main",
+          "data-[loading=true]:text-white",
+          "data-[loading=true]:bg-info-main"
+        ]
+      }
     },
     {
       variant: "ghost",
       color: "success",
-      class: "hover:bg-success-main text-success-main hover:text-white border-success-main"
+      class: {
+        base: [
+          "text-success-main",
+          "border-success-main",
+          "hover:text-white",
+          "hover:bg-success-main",
+          "data-[loading=true]:text-white",
+          "data-[loading=true]:bg-success-main"
+        ]
+      }
     },
     {
       variant: "ghost",
       color: "warning",
-      class: "hover:bg-warning-main text-warning-main hover:text-white border-warning-main"
+      class: {
+        base: [
+          "text-warning-main",
+          "border-warning-main",
+          "hover:text-white",
+          "hover:bg-warning-main",
+          "data-[loading=true]:text-white",
+          "data-[loading=true]:bg-warning-main"
+        ]
+      }
     },
     {
       variant: "ghost",
       color: "danger",
-      class: "hover:bg-danger-main text-danger-main hover:text-white border-danger-main"
-    },
-    // variant && color && isInGroup
-    {
-      variant: ["line", "ghost"],
-      color: "primary",
-      isInGroup: true,
-      class: ["shadow-none", "border", "[&:not(:last-child)]:border-r-0", "border-primary-main"]
-    },
-    {
-      variant: ["line", "ghost"],
-      color: "secondary",
-      isInGroup: true,
-      class: ["shadow-none", "border", "[&:not(:last-child)]:border-r-0", "border-secondary-main"]
-    },
-    {
-      variant: ["line", "ghost"],
-      color: "neutral",
-      isInGroup: true,
-      class: ["shadow-none", "border", "[&:not(:last-child)]:border-r-0", "border-neutral-main"]
-    },
-    {
-      variant: ["line", "ghost"],
-      color: "info",
-      isInGroup: true,
-      class: ["shadow-none", "border", "[&:not(:last-child)]:border-r-0", "border-info-main"]
-    },
-    {
-      variant: ["line", "ghost"],
-      color: "success",
-      isInGroup: true,
-      class: ["shadow-none", "border", "[&:not(:last-child)]:border-r-0", "border-success-main"]
-    },
-    {
-      variant: ["line", "ghost"],
-      color: "warning",
-      isInGroup: true,
-      class: ["shadow-none", "border", "[&:not(:last-child)]:border-r-0", "border-warning-main"]
+      class: {
+        base: [
+          "text-danger-main",
+          "border-danger-main",
+          "hover:text-white",
+          "hover:bg-danger-main",
+          "data-[loading=true]:text-white",
+          "data-[loading=true]:bg-danger-main"
+        ]
+      }
     },
+    // variant && isInGroup
     {
       variant: ["line", "ghost"],
-      color: "danger",
       isInGroup: true,
-      class: ["shadow-none", "border", "[&:not(:last-child)]:border-r-0", "border-danger-main"]
+      class: {
+        base: "[&:not(:last-child)]:border-r-0"
+      }
     },
     // variant && isDisabled
     {
       variant: ["line", "ghost"],
       isDisabled: true,
-      class: ["disabled:border-neutral-light"]
+      class: {
+        base: "!border-neutral-light"
+      }
     }
   ]
 });
@@ -16876,7 +17251,7 @@ var Modal = (0, import_react2.forwardRef)((originalProps, ref) => {
   }, [isOpen, isKeyboardDismissDisabled, onCancel]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: isOpen && (0, import_react_dom2.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ...getBackdropProps(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref, ...getModalWrapperProps(), children: [
-      icon && typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ...getIconProps(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: icon, className: "w-[80px] h-[80px]" }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ...getIconProps(), children: icon }),
+      typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ...getIconProps(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: icon, className: "w-[80px] h-[80px]" }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ...getIconProps(), children: icon }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ...getBodyWrapperProps(), children: [
         showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: "close", ...getCloseIconProps(), onClick: onCancel }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ...getBodyProps(), children: [
@@ -16899,23 +17274,16 @@ Modal.displayName = "Modal";
 var modal_default = Modal;
 var modal = tv({
   slots: {
-    backdrop: ["relative w-screen h-screen fixed inset-0 bg-black/60", "z-[9999]"],
+    backdrop: ["relative w-screen h-screen fixed inset-0 bg-black/60", "z-[900]"],
     modalWrapper: ["group/modal", "absolute", "top-1/2", "-translate-y-1/2", "left-1/2", "-translate-x-1/2"],
-    icon: [
-      "absolute",
-      "top-[20px]",
-      "left-1/2",
-      "-translate-x-1/2",
-      "z-10",
-      "group-data-[modal-icon-visibility=true]/modal:top-[80px]"
-    ],
+    icon: ["absolute", "top-[20px]", "left-1/2", "-translate-x-1/2", "z-10"],
     closeIcon: [
       "absolute",
       "top-[20px]",
       "right-[20px]",
       "cursor-pointer",
       "z-10",
-      "group-data-[modal-icon-visibility=true]/modal:top-[80px]"
+      "group-data-[icon-visibility=true]/modal:top-[80px]"
     ],
     titleWrapper: ["relative", "flex", "flex-col", "gap-[10px]"],
     title: "text-h5 text-center text-foreground",
@@ -16927,8 +17295,8 @@ var modal = tv({
       "bg-background",
       "shadow-drop shadow-foreground/20 rounded-xxlg",
       "overflow-hidden",
-      "group-data-[modal-icon-visibility=true]/modal:mt-[60px]",
-      "group-data-[modal-icon-visibility=true]/modal:pt-[60px]"
+      "group-data-[icon-visibility=true]/modal:mt-[60px]",
+      "group-data-[icon-visibility=true]/modal:pt-[60px]"
     ],
     body: ["flex", "flex-col", "gap-[20px]"],
     content: ["text-md text-center", "break-words", "bg-neutral-soft", "rounded-[5px]", "p-[10px]"],