@deepnoid/ui 0.0.87 → 0.0.89

package/dist/components/modal/modal.js

@@ -1,8 +1,10 @@
 "use client";
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/modal/modal.tsx
@@ -353,6 +363,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)(
@@ -3607,45 +3647,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: {
@@ -3658,23 +3716,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: {
@@ -3683,6 +3764,7 @@ var button = tv({
     color: "primary",
     fullWidth: false,
     isDisabled: false,
+    isLoading: false,
     isInGroup: false
   },
   compoundVariants: [
@@ -3690,230 +3772,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"
+      }
     }
   ]
 });
@@ -4030,7 +4415,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_dom.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: [
@@ -4055,21 +4440,14 @@ var modal = tv({
   slots: {
     backdrop: ["relative w-screen h-screen fixed inset-0 bg-black/60", "z-[9999]"],
     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",
@@ -4081,8 +4459,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]"],