@deepnoid/ui 0.1.29 → 0.1.31

package/dist/index.js

@@ -122,6 +122,7 @@ __export(index_exports, {
   Radio: () => radio_default,
   ScrollArea: () => scrollArea_default,
   Select: () => select_default,
+  Skeleton: () => skeleton_default,
   Switch: () => switch_default,
   Table: () => table_default,
   Tabs: () => tabs_default,
@@ -5868,7 +5869,7 @@ var breadcrumbStyle = tv({
 });
 
 // src/components/input/input.tsx
-var import_react9 = __toESM(require("react"));
+var import_react9 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Input = (0, import_react9.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, inputStyle.variantKeys);
@@ -5877,19 +5878,22 @@ var Input = (0, import_react9.forwardRef)((originalProps, ref) => {
   const slots = (0, import_react9.useMemo)(() => inputStyle({ ...variantProps }), [variantProps]);
   const getContentProps = (0, import_react9.useCallback)(
     () => ({
-      className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
+      className: clsx(
+        slots.content({ class: classNames == null ? void 0 : classNames.content }),
+        inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+      ),
       size: originalProps.size
     }),
     [slots, classNames, originalProps.size]
   );
   const renderStartContent = () => {
-    if (import_react9.default.isValidElement(startContent)) {
+    if ((0, import_react9.isValidElement)(startContent)) {
       const existingProps = startContent.props;
       const mergedProps = {
         ...getContentProps(),
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
-      return import_react9.default.cloneElement(startContent, mergedProps);
+      return (0, import_react9.cloneElement)(startContent, mergedProps);
     } else {
       const contentProps = getContentProps();
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ...contentProps, children: startContent });
@@ -5908,13 +5912,13 @@ var Input = (0, import_react9.forwardRef)((originalProps, ref) => {
     }
   );
   const renderContentWithIcon = () => {
-    if (import_react9.default.isValidElement(endContent)) {
+    if ((0, import_react9.isValidElement)(endContent)) {
       const existingProps = endContent.props;
       const mergedProps = {
         ...getContentProps(),
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
-      return import_react9.default.cloneElement(endContent, mergedProps);
+      return (0, import_react9.cloneElement)(endContent, mergedProps);
     } else if (errorMessage) {
       const iconProps = { ...getContentProps(), className: getContentProps().className };
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ...iconProps, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
@@ -5949,20 +5953,17 @@ var Input = (0, import_react9.forwardRef)((originalProps, ref) => {
             {
               className: clsx(
                 slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }),
-                inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+                inputProps.readOnly ? slots.readonlyWrapper({ class: classNames == null ? void 0 : classNames.readonlyWrapper }) : ""
               ),
               children: [
                 startContent && renderStartContent(),
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "input",
                   {
-                    ...inputProps,
                     ref: ref || inputRef,
+                    ...inputProps,
                     readOnly: props.readOnly,
-                    className: clsx(
-                      slots.input({ class: classNames == null ? void 0 : classNames.input }),
-                      inputProps.readOnly ? "!text-body-foreground placeholder:!text-body-foreground" : ""
-                    ),
+                    className: clsx(slots.input({ class: classNames == null ? void 0 : classNames.input })),
                     size: 0
                   }
                 ),
@@ -5970,7 +5971,16 @@ var Input = (0, import_react9.forwardRef)((originalProps, ref) => {
               ]
             }
           ),
-          helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }), children: helperMessage }),
+          helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "p",
+            {
+              className: clsx(
+                slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }),
+                inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+              ),
+              children: helperMessage
+            }
+          ),
           errorMessage && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
         ] })
       ]
@@ -5982,12 +5992,12 @@ var input_default = Input;
 var inputStyle = tv(
   {
     slots: {
-      base: ["group/input", "flex select-none"],
+      base: ["group/input", "flex", "select-none"],
       vertical: ["flex-col"],
       horizon: ["flex-row", "gap-0"],
       label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
       innerWrapper: ["flex", "flex-col"],
-      inputWrapper: ["flex", "items-center", "duration-200", "group-has-[p.error]/input:bg-danger-soft"],
+      inputWrapper: ["flex", "items-center", "duration-200", "group-has-[p.error]/input:!bg-danger-soft"],
       input: [
         "w-full",
         "h-full",
@@ -5996,8 +6006,8 @@ var inputStyle = tv(
         "placeholder:text-neutral-main",
         "outline-none",
         "focus:ring-0",
-        "group-has-[:hover]/input:text-neutral-dark",
-        "group-has-[:hover]/input:placeholder:text-neutral-dark",
+        "group-has-[:hover]/input:!text-neutral-dark",
+        "group-has-[:hover]/input:placeholder:!text-neutral-dark",
         "group-has-[:focus]/input:text-neutral-dark",
         "group-has-[:focus]/input:placeholder:text-neutral-dark",
         "group-has-[p.error]/input:text-danger-main",
@@ -6013,13 +6023,22 @@ var inputStyle = tv(
       ],
       helperMessage: ["text-neutral-main", "group-has-[:hover]/input:text-neutral-dark"],
       errorMessage: ["text-danger-main"],
-      readonly: ["pointer-events-none", "!text-body-foreground"]
+      readonlyWrapper: [
+        "pointer-events-none",
+        "!text-body-foreground",
+        "placeholder:!text-body-foreground",
+        "group-has-[p.error]/input:!text-danger-main",
+        "group-has-[p.error]/input:placeholder:!text-danger-main",
+        "[&>input]:!text-body-foreground",
+        "[&>input]:placeholder:!text-body-foreground"
+      ],
+      readonly: []
     },
     variants: {
       variant: {
         solid: {
           inputWrapper: ["border-transparent", "bg-trans-soft"],
-          readonly: ["!bg-trans-light"]
+          readonlyWrapper: ["!bg-trans-light"]
         },
         outline: {
           inputWrapper: [
@@ -6028,7 +6047,7 @@ var inputStyle = tv(
             "group-has-[:focus]/input:bg-body-background",
             "group-has-[p.error]/input:border-danger-main"
           ],
-          readonly: ["!bg-trans-soft"]
+          readonlyWrapper: ["!bg-trans-soft"]
         },
         underline: {
           inputWrapper: [
@@ -6038,30 +6057,31 @@ var inputStyle = tv(
             "group-has-[:focus]/input:bg-body-background",
             "group-has-[p.error]/input:border-danger-main"
           ],
-          readonly: ["!bg-trans-soft"]
+          readonlyWrapper: ["!bg-trans-soft"]
         }
       },
       color: {
         primary: {
           content: [
-            "group-has-[:focus]/input:text-primary-main",
-            "!group-has-[p.error]:not(input:focus):hover/input:text-primary-main"
+            "group-has-[:focus]/input:!text-primary-main",
+            "group-has-[p.error]:not(input:focus):hover/input:!text-primary-main"
           ],
           helperMessage: [
-            "group-has-[:focus]/input:text-primary-main",
-            "group-has-[:focus:hover]/input:text-primary-main",
-            "group-has-[:focus]/input:hover:text-primary-main"
-          ]
+            "group-has-[:focus]/input:!text-primary-main",
+            "group-has-[:focus:hover]/input:!text-primary-main",
+            "group-has-[:focus]/input:hover:!text-primary-main"
+          ],
+          readonly: ["!text-primary-main"]
         },
         secondary: {
           content: [
-            "group-has-[:focus]/input:text-secondary-main",
-            "!group-has-[p.error]:not(input:focus):hover/input:text-secondary-main"
+            "group-has-[:focus]/input:!text-secondary-main",
+            "group-has-[p.error]:not(input:focus):hover/input:!text-secondary-main"
           ],
           helperMessage: [
-            "group-has-[:focus]/input:text-secondary-main",
-            "group-has-[:focus:hover]/input:text-secondary-main",
-            "group-has-[:focus]/input:hover:text-secondary-main"
+            "group-has-[:focus]/input:!text-secondary-main",
+            "group-has-[:focus:hover]/input:!text-secondary-main",
+            "group-has-[:focus]/input:hover:!text-secondary-main"
           ]
         }
       },
@@ -6112,14 +6132,14 @@ var inputStyle = tv(
       },
       disabled: {
         true: {
-          inputWrapper: ["!bg-neutral-soft", "pointer-events-none", "!group-has-[p.error]/input:text-danger-light"],
+          inputWrapper: ["!bg-neutral-soft", "pointer-events-none", "group-has-[p.error]/input:!text-danger-light"],
           input: [
-            "text-neutral-light",
-            "placeholder:text-neutral-light",
-            "group-has-[p.error]/input:text-danger-light",
-            "group-has-[p.error]/input:placeholder:text-danger-light"
+            "!text-neutral-light",
+            "placeholder:!text-neutral-light",
+            "group-has-[p.error]/input:!text-danger-light",
+            "group-has-[p.error]/input:placeholder:!text-danger-light"
           ],
-          content: ["text-neutral-light", "group-has-[p.error]/input:text-danger-light"],
+          content: ["!text-neutral-light", "group-has-[p.error]/input:text-danger-light"],
           helperMessage: ["!text-neutral-light"],
           errorMessage: ["!text-danger-light"]
         }
@@ -6186,7 +6206,11 @@ var inputStyle = tv(
         disabled: true,
         variant: ["outline", "underline"],
         class: {
-          inputWrapper: ["!bg-body-background", "group-has-[p.error]/input:border-danger-light"]
+          inputWrapper: ["!bg-body-background", "group-has-[p.error]/input:!border-danger-light"],
+          content: [
+            "group-has-[p.error]/input:!text-danger-light",
+            "group-has-[p.error]/input:placeholder:!text-danger-light"
+          ]
         }
       }
     ],
@@ -6417,205 +6441,282 @@ var import_react11 = require("react");
 var import_tailwind_variants11 = require("tailwind-variants");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var Textarea = (0, import_react11.forwardRef)((originalProps, ref) => {
+  var _a, _b;
   const [props, variantProps] = mapPropsVariants(originalProps, textareaStyle.variantKeys);
-  const { classNames, label, errorMessage, ...textareaProps } = props;
-  const slots = (0, import_react11.useMemo)(() => textareaStyle({ ...variantProps }), [variantProps]);
-  const getBaseProps = (0, import_react11.useCallback)(
-    () => ({
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-    }),
-    [slots, classNames]
-  );
-  const getLabelProps = (0, import_react11.useCallback)(
-    () => ({
-      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
-    }),
-    [slots, classNames]
-  );
-  const getInnerWrapperProps = (0, import_react11.useCallback)(
-    () => ({
-      className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper })
-    }),
-    [slots, classNames]
-  );
-  const getTextareaWrapperProps = (0, import_react11.useCallback)(
-    () => ({
-      className: slots.textareaWrapper({ class: classNames == null ? void 0 : classNames.textareaWrapper })
-    }),
-    [slots, classNames]
-  );
-  const getTextareaProps = (0, import_react11.useCallback)(
-    () => ({
-      ...textareaProps,
-      ref,
-      className: slots.textarea({ class: classNames == null ? void 0 : classNames.textarea }),
-      disabled: originalProps.isDisabled,
-      required: originalProps.isRequired,
-      size: 0
-    }),
-    [textareaProps, ref, slots, classNames == null ? void 0 : classNames.textarea, originalProps.isDisabled, originalProps.isRequired]
+  const { classNames, label, helperMessage, errorMessage, ...textareaProps } = props;
+  const [length, setLength] = (0, import_react11.useState)(((_b = (_a = originalProps.value) == null ? void 0 : _a.toString()) != null ? _b : "").length);
+  const innerRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useImperativeHandle)(ref, () => innerRef.current);
+  const autoResize = (0, import_react11.useCallback)(() => {
+    const el = innerRef.current;
+    if (el) {
+      el.style.height = "auto";
+      el.style.height = el.scrollHeight + "px";
+    }
+  }, []);
+  const handleChange = (0, import_react11.useCallback)(
+    (e) => {
+      var _a2;
+      setLength(e.target.value.length);
+      (_a2 = originalProps.onChange) == null ? void 0 : _a2.call(originalProps, e);
+      autoResize();
+    },
+    [originalProps, autoResize]
   );
-  const getErrorMessageProps = (0, import_react11.useCallback)(
-    () => ({
-      className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
-    }),
-    [slots, classNames]
+  (0, import_react11.useEffect)(() => {
+    autoResize();
+  }, [originalProps.value, autoResize]);
+  const slots = (0, import_react11.useMemo)(() => textareaStyle({ ...variantProps }), [variantProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      className: clsx(
+        slots.base({ class: classNames == null ? void 0 : classNames.base }),
+        variantProps.direction === "horizon" ? slots.horizon({ class: classNames == null ? void 0 : classNames.horizon }) : slots.vertical({ class: classNames == null ? void 0 : classNames.vertical })
+      ),
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "div",
+          {
+            className: clsx(
+              slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }),
+              textareaProps.readOnly ? slots.readonlyWrapper({ class: classNames == null ? void 0 : classNames.readonlyWrapper }) : ""
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "textarea",
+                {
+                  ref: innerRef,
+                  ...textareaProps,
+                  readOnly: props.readOnly,
+                  onChange: handleChange,
+                  className: slots.textarea({ class: classNames == null ? void 0 : classNames.textarea })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex justify-between", children: [
+                helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  "p",
+                  {
+                    className: clsx(
+                      slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }),
+                      textareaProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+                    ),
+                    children: helperMessage
+                  }
+                ),
+                errorMessage && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage }),
+                textareaProps.maxLength !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                  "p",
+                  {
+                    className: clsx(
+                      slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }),
+                      textareaProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+                    ),
+                    children: [
+                      length,
+                      " / ",
+                      textareaProps.maxLength
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ...getBaseProps(), children: [
-    props.label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { ...getLabelProps(), children: props.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ...getInnerWrapperProps(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ...getTextareaWrapperProps(), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("textarea", { ...getTextareaProps() }) }),
-      props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { ...getErrorMessageProps(), children: props.errorMessage })
-    ] })
-  ] });
 });
 Textarea.displayName = "Textarea";
 var textarea_default = Textarea;
 var textareaStyle = (0, import_tailwind_variants11.tv)({
   slots: {
-    base: ["group/textarea", "flex", "flex-col", "gap-[10px]", "select-none"],
-    label: ["flex", "items-center"],
-    innerWrapper: ["flex", "flex-col", "gap-[6px]"],
-    textareaWrapper: [
-      "flex",
-      "bg-transparent",
-      "border-neutral-main",
-      "group-has-[p]/textarea:border-danger-main",
-      "group-has-[p]/textarea:bg-danger-soft",
-      "transition duration-200"
-    ],
+    base: ["group/textarea", "flex", "select-none"],
+    vertical: ["flex-col"],
+    horizon: ["flex-row", "gap-0"],
+    label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
+    wrapper: ["flex", "flex-col"],
     textarea: [
       "w-full",
+      "h-full",
       "bg-transparent",
-      "placeholder:text-neutral-main",
-      "focus-visible:outline-none",
-      "resize-none"
+      "text-neutral-main",
+      "placeholder:!text-neutral-main",
+      "outline-none",
+      "resize-none",
+      "focus:ring-0",
+      "group-has-[:hover]/textarea:!text-neutral-dark",
+      "group-has-[:hover]/textarea:placeholder:!text-neutral-dark",
+      "group-has-[:focus]/textarea:!text-neutral-dark",
+      "group-has-[:focus]/textarea:placeholder:!text-neutral-dark",
+      "group-has-[p.error]/textarea:bg-danger-soft",
+      "group-has-[p.error]/textarea:text-danger-main",
+      "group-has-[p.error]/textarea:placeholder:!text-danger-main"
     ],
-    errorMessage: ["text-danger-main"]
+    helperMessage: [
+      "text-neutral-main",
+      "group-has-[:hover]/textarea:text-neutral-dark",
+      "group-has-[p.error]/textarea:text-danger-main"
+    ],
+    errorMessage: ["text-danger-main"],
+    readonlyWrapper: [
+      "pointer-events-none",
+      "[&>textarea]:!text-body-foreground",
+      "[&>textarea]:placeholder:!text-body-foreground"
+    ],
+    readonly: []
   },
   variants: {
     variant: {
       solid: {
-        textareaWrapper: ["bg-trans-soft", "hover:bg-trans-light", "has-[:focus]:bg-trans-light"]
+        textarea: ["border-transparent", "bg-trans-soft"],
+        readonlyWrapper: ["[&>textarea]:!bg-trans-light"]
       },
-      line: {
-        textareaWrapper: ["border", "hover:bg-trans-soft", "has-[:focus]:bg-trans-soft"]
+      outline: {
+        textarea: [
+          "border-neutral-light",
+          "group-has-[:hover]/textarea:bg-trans-soft",
+          "group-has-[:focus]/textarea:bg-body-background",
+          "group-has-[p.error]/textarea:border-danger-main"
+        ],
+        readonlyWrapper: ["[&>textarea]:!bg-trans-soft"]
       }
     },
     color: {
-      primary: {},
-      secondary: {}
+      primary: {
+        helperMessage: [
+          "group-has-[:focus]/textarea:!text-primary-main",
+          "group-has-[:focus]/textarea:!text-primary-main",
+          "group-has-[:focus]/textarea:hover:!text-primary-main",
+          "group-has-[:focus:hover]/textarea:!text-primary-main",
+          "group-has-[p.error]:not(textarea:focus):hover/textarea:!text-primary-main"
+        ],
+        readonly: ["!text-primary-main"]
+      },
+      secondary: {
+        helperMessage: [
+          "group-has-[:focus]/textarea:text-secondary-main",
+          "group-has-[:focus]/textarea:text-secondary-main",
+          "group-has-[:focus]/textarea:hover:text-secondary-main",
+          "group-has-[:focus:hover]/textarea:text-secondary-main",
+          "group-has-[p.error]:not(textarea:focus):hover/textarea:!text-secondary-main"
+        ],
+        readonly: ["!text-secondary-main"]
+      }
     },
     size: {
       sm: {
-        base: "gap-[6px]",
-        textareaWrapper: "w-[240px] rounded-sm p-[6px]",
-        textarea: "text-sm rounded-sm",
-        label: "text-sm",
-        errorMessage: "text-sm"
+        base: ["text-sm", "gap-[4px]"],
+        label: ["text-sm"],
+        wrapper: ["gap-[4px]"],
+        textarea: ["w-[240px]", "h-[24px]", "rounded-sm", "p-[8px]", "gap-[4px]"],
+        helperMessage: ["text-sm"],
+        errorMessage: ["text-sm"]
       },
       md: {
-        base: "gap-[8px]",
-        textareaWrapper: "w-[240px] rounded-md p-[8px]",
-        textarea: "text-md rounded-md",
-        label: "text-md",
-        errorMessage: "text-md"
+        base: ["text-md", "gap-[6px]"],
+        label: ["text-md"],
+        wrapper: ["gap-[6px]"],
+        textarea: ["w-[240px]", "h-[32px]", "rounded-md", "p-[8px]", "gap-[6px]"],
+        helperMessage: ["text-sm"],
+        errorMessage: ["text-sm"]
       },
       lg: {
-        base: "gap-[10px]",
-        textareaWrapper: "w-[240px] rounded-lg p-[10px]",
-        textarea: "text-lg rounded-lg",
-        label: "text-lg",
-        errorMessage: "text-lg"
+        base: ["text-lg", "gap-[8px]"],
+        label: ["text-lg"],
+        wrapper: ["gap-[8px]"],
+        textarea: ["w-[240px]", "h-[40px]", "rounded-lg", "p-[10px]", "gap-[8px]"],
+        helperMessage: ["text-md"],
+        errorMessage: ["text-md"]
       },
       xl: {
-        base: "gap-[10px]",
-        textareaWrapper: "w-[240px] rounded-xl p-[10px]",
-        textarea: "text-xl rounded-xl",
-        label: "text-xl",
-        errorMessage: "text-xl"
-      }
-    },
-    radius: {
-      default: {},
-      none: {
-        textareaWrapper: "rounded-none",
-        textarea: "rounded-none"
-      },
-      full: {
-        textareaWrapper: "rounded-full",
-        textarea: "rounded-full"
+        base: ["text-xl", "gap-[10px]"],
+        label: ["text-xl"],
+        wrapper: ["gap-[10px]"],
+        textarea: ["w-[240px]", "h-[50px]", "rounded-lg", "p-[10px]", "gap-[10px]"],
+        helperMessage: ["text-md"],
+        errorMessage: ["text-md"]
       }
     },
-    fullWidth: {
-      true: {
-        base: "w-full",
-        textareaWrapper: "w-full",
-        textarea: "w-full"
-      }
+    direction: {
+      vertical: "",
+      horizon: ""
     },
-    isDisabled: {
+    full: {
       true: {
-        base: ["opacity-disabled", "pointer-events-none"],
-        textareaWrapper: ["bg-neutral-soft", "border-neutral-light", "pointer-events-none"],
-        textarea: ["text-neutral-light placeholder:text-neutral-light", "border-neutral-light"],
-        label: ["text-neutral-light", "pointer-events-none"],
-        errorMessage: "text-danger-light"
+        base: ["w-full"],
+        wrapper: ["flex-1"],
+        textarea: ["w-full"]
       }
     },
-    isRequired: {
+    disabled: {
       true: {
-        label: ["after:content-['*']", "after:text-danger-main", "after:ml-0.5"]
+        textarea: [
+          "bg-neutral-soft",
+          "pointer-events-none",
+          "text-neutral-light",
+          "placeholder:!text-neutral-light",
+          "group-has-[p.error]/textarea:text-danger-light",
+          "group-has-[p.error]/textarea:border-danger-light",
+          "group-has-[p.error]/textarea:placeholder:!text-danger-light"
+        ],
+        helperMessage: ["!text-neutral-light", "group-has-[p.error]/textarea:!text-danger-light"],
+        errorMessage: ["!text-danger-light"]
       }
     }
   },
-  defaultVariants: {
-    variant: "solid",
-    color: "primary",
-    size: "md",
-    fullWidth: false,
-    isDisabled: false,
-    isRequired: false
-  },
   compoundVariants: [
-    // variants & color
     {
-      variant: "line",
-      color: "primary",
+      variant: "outline",
+      size: "sm",
       class: {
-        textareaWrapper: "has-[:focus]:border-primary-main"
+        textarea: ["border-sm"]
       }
     },
     {
-      variant: "line",
-      color: "secondary",
+      variant: "outline",
+      size: "md",
       class: {
-        textareaWrapper: "has-[:focus]:border-secondary-main",
-        textarea: "focus:bg-secondary-main"
+        textarea: ["border-md"]
       }
     },
-    // Variants & isDisabled
     {
-      variant: "line",
-      isDisabled: true,
+      variant: "outline",
+      size: "lg",
       class: {
-        textareaWrapper: "bg-neutral-soft"
+        textarea: ["border-lg"]
       }
     },
-    // isRequired & isDisabled
     {
-      isRequired: true,
-      isDisabled: true,
+      variant: "outline",
+      size: "xl",
+      class: {
+        textarea: ["border-xl"]
+      }
+    },
+    {
+      disabled: true,
+      variant: ["outline"],
       class: {
-        label: "after:text-danger-light"
+        textarea: ["!bg-body-background", "group-has-[p.error]/input:border-danger-light"]
       }
     }
-  ]
+  ],
+  defaultVariants: {
+    variant: "solid",
+    color: "primary",
+    size: "md",
+    direction: "vertical",
+    fullWidth: false,
+    disabled: false,
+    readonly: false
+  }
 });
 
 // src/components/table/table.tsx
-var import_react17 = require("react");
-var import_tailwind_variants15 = require("tailwind-variants");
+var import_react15 = require("react");
+var import_tailwind_variants16 = require("tailwind-variants");
 
 // src/components/checkbox/checkbox.tsx
 var import_react12 = require("react");
@@ -6824,138 +6925,207 @@ var checkboxStyle = tv({
   }
 });
 
-// src/components/table/table-head.tsx
+// src/components/skeleton/skeleton.tsx
+var import_tailwind_variants13 = require("tailwind-variants");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var TableHead = ({ columns, slots, size, rowCheckbox, isCheckedAll, classNames, onCheckAll }) => {
+var Skeleton = ({ color = "primary", className, speed = "normal", rounded = "md" }) => {
+  const speedMap = {
+    fast: "0.7s",
+    normal: "1.2s",
+    slow: "2s"
+  };
+  const slots = skeletonStyle();
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      className: clsx(slots.base({ color, rounded }), className),
+      style: {
+        "--shimmer-duration": speedMap[speed]
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("style", { children: `@keyframes shimmer {
+            100% {
+              transform: translateX(100%);
+            }
+          }
+          .skeleton-shimmer::before {
+            animation: shimmer var(--shimmer-duration) infinite linear;
+          }
+        ` })
+    }
+  );
+};
+Skeleton.displayName = "Skeleton";
+var skeleton_default = Skeleton;
+var skeletonStyle = (0, import_tailwind_variants13.tv)({
+  slots: {
+    base: [
+      "relative",
+      "overflow-hidden",
+      "w-full",
+      "h-[18px]",
+      "skeleton-shimmer",
+      "before:absolute",
+      "before:inset-0",
+      "before:-translate-x-full",
+      "before:bg-gradient-to-r",
+      "before:from-transparent",
+      "before:via-white/40",
+      "before:to-transparent",
+      "before:content-['']"
+    ]
+  },
+  variants: {
+    color: {
+      primary: { base: "bg-primary-soft" },
+      secondary: { base: "bg-secondary-soft" },
+      neutral: { base: "bg-neutral-soft" }
+    },
+    rounded: {
+      sm: { base: "rounded-sm" },
+      md: { base: "rounded-md" },
+      lg: { base: "rounded-lg" },
+      xl: { base: "rounded-xl" },
+      full: { base: "rounded-full" }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    rounded: "md"
+  }
+});
+
+// src/components/table/table-head.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var TableHead = ({
+  slots,
+  columns,
+  color,
+  size,
+  rowCheckbox = false,
+  isCheckedAll,
+  isLoading = false,
+  classNames,
+  onCheckAll
+}) => {
   const handleClickCheckAll = (e) => {
     e.preventDefault();
     onCheckAll(!isCheckedAll);
   };
-  const renderColumnHeaders = () => columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  const renderTh = (content, key, column) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "th",
     {
       className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column),
       style: {
-        width: column.width ? `${column.width}px` : void 0,
-        minWidth: column.minWidth ? `${column.minWidth}px` : void 0,
-        maxWidth: column.maxWidth ? `${column.maxWidth}px` : void 0,
-        height: column.height ? `${column.height}px` : void 0
+        width: (column == null ? void 0 : column.width) ? `${column.width}px` : void 0,
+        minWidth: (column == null ? void 0 : column.minWidth) ? `${column.minWidth}px` : void 0,
+        maxWidth: (column == null ? void 0 : column.maxWidth) ? `${column.maxWidth}px` : void 0,
+        height: (column == null ? void 0 : column.height) ? `${column.height}px` : void 0
       },
-      children: column.headerName
+      children: content
     },
-    `${column.field}${index}thead`
-  ));
-  const renderSelectAllCheckbox = () => rowCheckbox && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("th", { className: slots.th({ class: classNames == null ? void 0 : classNames.th }), onClick: handleClickCheckAll, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    checkbox_default,
-    {
-      size,
-      checked: isCheckedAll,
-      onChange: (e) => onCheckAll(e.target.checked)
-    }
-  ) }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
-    renderColumnHeaders(),
-    renderSelectAllCheckbox()
+    key
+  );
+  const renderSkeletonRow = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("tr", { className: clsx(slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "[&>th]:border-0"), children: [
+    columns.map((_, idx) => renderTh(/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), `skeleton-${idx}`)),
+    rowCheckbox && renderTh(/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), "checkbox-skeleton")
+  ] }) });
+  const renderContentRow = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
+    columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
+    rowCheckbox && renderTh(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex items-center justify-center", onClick: handleClickCheckAll, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        checkbox_default,
+        {
+          size,
+          checked: isCheckedAll,
+          onChange: (e) => onCheckAll(e.target.checked)
+        }
+      ) }),
+      "checkbox"
+    )
   ] }) });
+  return isLoading ? renderSkeletonRow() : renderContentRow();
 };
 var table_head_default = TableHead;
 
 // src/components/table/table-body.tsx
-var import_react13 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var import_react14 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var TableBody = ({
   slots,
-  columns,
   rows,
+  columns,
   size,
-  rowCheckbox,
+  color,
+  rowCheckbox = false,
   checkedRows,
   onCheckRow,
   onRowClick,
+  isLoading = false,
   emptyContent,
-  isLoading,
+  skeletonRow,
   classNames,
   className
 }) => {
-  const generateColumnStyles = (0, import_react13.useCallback)((column) => {
-    const alignClass = column.align ? `text-${column.align}` : "text-left";
-    return clsx(alignClass, column.className);
-  }, []);
-  const getCellProps = (0, import_react13.useCallback)(
-    (column, row) => {
-      if (!column || !row) {
-        return {
-          className: slots.td({ class: classNames == null ? void 0 : classNames.td })
-        };
-      }
+  const getCellStyle = (column) => ({
+    width: column.width ? `${column.width}px` : void 0,
+    minWidth: column.minWidth ? `${column.minWidth}px` : void 0,
+    maxWidth: column.maxWidth ? `${column.maxWidth}px` : void 0,
+    height: column.height ? `${column.height}px` : void 0,
+    textAlign: column.align || "center"
+  });
+  const renderTdSkeleton = (key) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
+  const renderCheckboxCell = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    checkbox_default,
+    {
+      size,
+      checked: checkedRows.has(rowIndex),
+      onChange: (e) => onCheckRow(rowIndex, e.target.checked)
+    }
+  ) });
+  const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
+    columns.map((_, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`)),
+    rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
+  ] }, `skeleton-${rowIndex}`);
+  const renderEmptyRow = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });
+  const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), onClick: () => onRowClick == null ? void 0 : onRowClick(row), children: [
+    columns.map((column, colIdx) => {
+      var _a;
       const value = row[column.field];
-      const formattedValue = column.valueFormatter ? column.valueFormatter({ id: column.field, field: column.field, value }) : value;
-      const children = column.renderCell ? column.renderCell({
-        id: column.field,
-        field: column.field,
-        value,
-        formattedValue,
-        row
-      }) : formattedValue;
-      const columnStyles = generateColumnStyles(column);
-      return {
-        children,
-        className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), columnStyles),
-        style: {
-          width: column.width ? `${column.width}px` : void 0,
-          minWidth: column.minWidth ? `${column.minWidth}px` : void 0,
-          maxWidth: column.maxWidth ? `${column.maxWidth}px` : void 0,
-          height: column.height ? `${column.height}px` : void 0
-        }
-      };
-    },
-    [classNames == null ? void 0 : classNames.td, generateColumnStyles, slots]
-  );
-  const hasRows = rows.length > 0;
-  const colSpan = (columns.length || 1) + (rowCheckbox ? 1 : 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("tbody", { className: clsx(slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), className), children: [
-    !isLoading && hasRows && rows.map((row, rowIndex) => {
-      const isRowChecked = checkedRows.has(rowIndex);
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-        "tr",
+      const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
+      const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "td",
         {
-          className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }),
-          "aria-checked": isRowChecked,
-          onClick: () => onRowClick ? onRowClick(row) : void 0,
-          children: [
-            columns.map((column) => /* @__PURE__ */ (0, import_react14.createElement)("td", { ...getCellProps(column, row), key: column.field })),
-            rowCheckbox && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              checkbox_default,
-              {
-                size,
-                checked: isRowChecked,
-                onChange: (e) => onCheckRow(rowIndex, e.target.checked)
-              }
-            ) }) })
-          ]
+          className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), column.className),
+          style: getCellStyle(column),
+          children: content
         },
-        rowIndex
+        `${rowIndex}-${colIdx}`
       );
     }),
-    !isLoading && !hasRows && emptyContent && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tr", { className: clsx(slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "border-none"), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("td", { colSpan, className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) })
-  ] });
+    rowCheckbox && renderCheckboxCell(rowIndex)
+  ] }, rowIndex);
+  const renderRows = () => {
+    if (isLoading) return skeletonRow ? Array.from({ length: skeletonRow }, (_, idx) => renderSkeletonRow(idx)) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, {});
+    if (!rows.length && emptyContent) return renderEmptyRow();
+    return rows.map((row, index) => renderDataRow(row, index));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("tbody", { className: `${slots.tbody({ class: classNames == null ? void 0 : classNames.tbody })} ${className || ""}`, children: renderRows() });
 };
 var table_body_default = TableBody;
 
 // src/components/pagination/pagination.tsx
-var import_react16 = require("react");
+var import_react14 = require("react");
 
 // src/components/pagination/usePagination.ts
-var import_react15 = require("react");
+var import_react13 = require("react");
 var usePagination = ({ currentPage, totalPage, groupSize, handleChangePage }) => {
-  const startPage = (0, import_react15.useMemo)(() => Math.floor((currentPage - 1) / groupSize) * groupSize + 1, [currentPage, groupSize]);
-  const endPage = (0, import_react15.useMemo)(() => Math.min(startPage + groupSize - 1, totalPage), [startPage, groupSize, totalPage]);
-  const pageList = (0, import_react15.useMemo)(
+  const startPage = (0, import_react13.useMemo)(() => Math.floor((currentPage - 1) / groupSize) * groupSize + 1, [currentPage, groupSize]);
+  const endPage = (0, import_react13.useMemo)(() => Math.min(startPage + groupSize - 1, totalPage), [startPage, groupSize, totalPage]);
+  const pageList = (0, import_react13.useMemo)(
     () => Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i),
     [startPage, endPage]
   );
-  const handleClickMovePage = (0, import_react15.useCallback)(
+  const handleClickMovePage = (0, import_react13.useCallback)(
     (page) => (event) => {
       event.preventDefault();
       handleChangePage == null ? void 0 : handleChangePage(page);
@@ -6972,8 +7142,8 @@ var usePagination = ({ currentPage, totalPage, groupSize, handleChangePage }) =>
 var usePagination_default = usePagination;
 
 // src/components/pagination/pagination.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Pagination = (0, import_react16.forwardRef)((originalProps, ref) => {
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Pagination = (0, import_react14.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, paginationStyle.variantKeys);
   const {
     classNames,
@@ -6987,8 +7157,8 @@ var Pagination = (0, import_react16.forwardRef)((originalProps, ref) => {
     variant,
     size
   } = { ...props, ...variantProps };
-  const [inputPage, setInputPage] = (0, import_react16.useState)(currentPage);
-  const slots = (0, import_react16.useMemo)(() => paginationStyle(variantProps), [variantProps]);
+  const [inputPage, setInputPage] = (0, import_react14.useState)(currentPage);
+  const slots = (0, import_react14.useMemo)(() => paginationStyle(variantProps), [variantProps]);
   const { pageList, handleClickMovePage } = usePagination_default({
     currentPage,
     totalPage,
@@ -7003,29 +7173,29 @@ var Pagination = (0, import_react16.forwardRef)((originalProps, ref) => {
       }
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-      showFirstLastButtons && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+      showFirstLastButtons && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "div",
         {
           "aria-label": "firstPage",
           "data-is-active": currentPage > 1,
           className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }),
           onClick: currentPage > 1 ? handleClickMovePage(1) : void 0,
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon_default, { name: "left-double-chevron" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon_default, { name: "left-double-chevron" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "div",
         {
           "aria-label": "prevPage",
           "data-is-active": currentPage > 1,
           className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }),
           onClick: currentPage > 1 ? handleClickMovePage(currentPage - 1) : void 0,
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon_default, { name: "left-chevron" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon_default, { name: "left-chevron" })
         }
       ),
-      showPageNumber && pageList.map((page, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      showPageNumber && pageList.map((page, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "div",
         {
           className: slots.button({ class: classNames == null ? void 0 : classNames.button }),
@@ -7035,29 +7205,29 @@ var Pagination = (0, import_react16.forwardRef)((originalProps, ref) => {
         },
         index
       )),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "div",
         {
           "aria-label": "nextPage",
           "data-is-active": currentPage < totalPage,
           className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }),
           onClick: currentPage < totalPage ? handleClickMovePage(currentPage + 1) : void 0,
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon_default, { name: "right-chevron" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon_default, { name: "right-chevron" })
         }
       ),
-      showFirstLastButtons && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      showFirstLastButtons && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "div",
         {
           "aria-label": "lastPage",
           "data-is-active": currentPage < totalPage,
           className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }),
           onClick: currentPage < totalPage ? handleClickMovePage(totalPage) : void 0,
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon_default, { name: "right-double-chevron" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon_default, { name: "right-double-chevron" })
         }
       )
     ] }),
-    showPageLabel && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    showPageLabel && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         input_default,
         {
           value: inputPage || 1,
@@ -7230,14 +7400,14 @@ var paginationStyle = tv(
 );
 
 // src/components/scroll/scrollArea.tsx
-var import_tailwind_variants14 = require("tailwind-variants");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_tailwind_variants15 = require("tailwind-variants");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var ScrollArea = ({ children, className, direction, size }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: clsx(scrollAreaStyle({ direction, size }), className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: clsx(scrollAreaStyle({ direction, size }), className), children });
 };
 ScrollArea.displayName = "ScrollArea";
 var scrollArea_default = ScrollArea;
-var scrollAreaStyle = (0, import_tailwind_variants14.tv)({
+var scrollAreaStyle = (0, import_tailwind_variants15.tv)({
   base: [
     "h-full",
     "x-full",
@@ -7266,95 +7436,105 @@ var scrollAreaStyle = (0, import_tailwind_variants14.tv)({
 });
 
 // src/components/table/table.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Table = (0, import_react15.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, tableStyle.variantKeys);
   const {
-    classNames,
     rows,
     columns,
-    size,
-    rowCheckbox,
+    rowCheckbox = false,
     onRowClick,
     totalData,
     pagination,
     onPageChange,
     emptyContent,
-    isLoading,
-    className,
-    color
+    isLoading = false,
+    classNames,
+    color,
+    size,
+    skeletonRow
   } = { ...props, ...variantProps };
-  const [checkedRows, setCheckedRows] = (0, import_react17.useState)(/* @__PURE__ */ new Set());
-  const divRef = (0, import_react17.useRef)(null);
-  const { page, perPage } = pagination || { page: 1, perPage: 10 };
+  const { page = 1, perPage = 10 } = pagination || {};
   const showPagination = pagination && typeof totalData === "number" && !isLoading;
-  (0, import_react17.useImperativeHandle)(ref, () => ({
-    checkedRows,
-    setCheckedRows
-  }));
-  (0, import_react17.useEffect)(() => {
+  const [checkedRows, setCheckedRows] = (0, import_react15.useState)(/* @__PURE__ */ new Set());
+  const divRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useImperativeHandle)(
+    ref,
+    () => ({
+      checkedRows,
+      setCheckedRows
+    }),
+    [checkedRows]
+  );
+  (0, import_react15.useEffect)(() => {
     setCheckedRows(/* @__PURE__ */ new Set());
   }, [rows]);
-  const handleCheckAll = (isChecked) => {
-    const newCheckedRows = isChecked ? new Set(rows.map((_, index) => index)) : /* @__PURE__ */ new Set();
-    setCheckedRows(newCheckedRows);
+  const handleAllRowCheck = (checked) => {
+    const updated = checked ? new Set(rows.map((_, i) => i)) : /* @__PURE__ */ new Set();
+    setCheckedRows(updated);
   };
-  const handleCheck = (rowIndex, isChecked) => {
-    const newChecked = new Set(checkedRows);
-    isChecked ? newChecked.add(rowIndex) : newChecked.delete(rowIndex);
-    setCheckedRows(newChecked);
+  const handleRowCheck = (index, checked) => {
+    setCheckedRows((prev) => {
+      const updated = new Set(prev);
+      checked ? updated.add(index) : updated.delete(index);
+      return updated;
+    });
   };
-  const slots = (0, import_react17.useMemo)(() => tableStyle(variantProps), [variantProps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { ref: divRef, "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("table", { className: slots.table({ class: classNames == null ? void 0 : classNames.table }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  const slots = (0, import_react15.useMemo)(() => tableStyle(variantProps), [variantProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref: divRef, "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("table", { className: slots.table({ class: classNames == null ? void 0 : classNames.table }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         table_head_default,
         {
           columns,
           size,
+          color,
           rowCheckbox,
           isCheckedAll: checkedRows.size === rows.length && rows.length > 0,
-          onCheckAll: handleCheckAll,
+          onCheckAll: handleAllRowCheck,
+          isLoading,
           classNames,
           slots
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         table_body_default,
         {
           slots,
           rows,
           columns,
           size,
+          color,
           rowCheckbox,
           checkedRows,
           onRowClick,
-          onCheckRow: handleCheck,
+          onCheckRow: handleRowCheck,
           emptyContent,
           isLoading,
-          classNames,
+          skeletonRow,
           className: clsx(
             "transition-all duration-150 ease-out",
-            isLoading ? "-translate-y-2 opacity-0" : "translate-y-0 opacity-100"
+            isLoading ? "-translate-y-2 opacity-0" : "translate-y-0 opacity-100",
+            classNames
           )
         }
       )
     ] }) }),
-    showPagination && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    showPagination && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       pagination_default,
       {
         color,
         currentPage: page,
         totalPage: Math.ceil(totalData / perPage),
         groupSize: 10,
-        handleChangePage: (currentPage) => onPageChange && onPageChange({ page: currentPage, perPage })
+        handleChangePage: (newPage) => onPageChange == null ? void 0 : onPageChange({ page: newPage, perPage })
       }
     ) })
   ] });
 });
 Table.displayName = "Table";
 var table_default = Table;
-var tableStyle = (0, import_tailwind_variants15.tv)({
+var tableStyle = (0, import_tailwind_variants16.tv)({
   slots: {
     base: ["flex", "flex-col", "relative", "select-none", "gap-[20px]"],
     table: ["w-full", "h-auto"],
@@ -7571,21 +7751,21 @@ var tableStyle = (0, import_tailwind_variants15.tv)({
 });
 
 // src/components/table/definition-table.tsx
-var import_react18 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var DEFAULT_COLUMN_CLASSES = [
   "w-[120px] px-[10px] py-[9.5px] font-bold text-md text-body-foreground border-r border-neutral-light",
   "px-[10px] py-[9.5px]"
 ];
-var DefinitionTableRow = ({ columns, columnClasses = [] }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tr", { className: "border-neutral-light min-h-[50px] border-b", children: columns.map((col, index) => {
+var DefinitionTableRow = ({ columns, columnClasses = [] }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { className: "border-neutral-light min-h-[50px] border-b", children: columns.map((col, index) => {
   var _a;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("td", { className: (_a = columnClasses[index]) != null ? _a : DEFAULT_COLUMN_CLASSES[index], children: col }, index);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { className: (_a = columnClasses[index]) != null ? _a : DEFAULT_COLUMN_CLASSES[index], children: col }, index);
 }) });
-var DefinitionTable = (0, import_react18.forwardRef)(({ rows, footer, classNames }, ref) => {
-  const slots = (0, import_react18.useMemo)(() => DefinitionTableStyle(), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("table", { className: slots.table({ class: classNames == null ? void 0 : classNames.table }), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DefinitionTableRow, { ...row }, i)) }) }),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: footer })
+var DefinitionTable = (0, import_react16.forwardRef)(({ rows, footer, classNames }, ref) => {
+  const slots = (0, import_react16.useMemo)(() => DefinitionTableStyle(), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("table", { className: slots.table({ class: classNames == null ? void 0 : classNames.table }), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DefinitionTableRow, { ...row }, i)) }) }),
+    footer && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: footer })
   ] });
 });
 DefinitionTable.displayName = "DefinitionTable";
@@ -7598,10 +7778,10 @@ var DefinitionTableStyle = tv({
 });
 
 // src/components/select/select.tsx
-var import_react19 = require("react");
+var import_react17 = require("react");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Select = (0, import_react17.forwardRef)((originalProps, ref) => {
   var _a;
   const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
   const {
@@ -7615,14 +7795,14 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
     multiple,
     ...inputProps
   } = props;
-  const slots = (0, import_react19.useMemo)(() => select({ ...variantProps }), [variantProps]);
-  const [selectedOptions, setSelectedOptions] = (0, import_react19.useState)(defaultSelectedOptions);
-  const [targetRect, setTargetRect] = (0, import_react19.useState)(null);
-  const [optionWrapperHeight, setOptionWrapperHeight] = (0, import_react19.useState)(0);
-  const [isVisible, setIsVisible] = (0, import_react19.useState)(false);
-  const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
-  const selectWrapperRef = (0, import_react19.useRef)(null);
-  const optionWrapperRef = (0, import_react19.useRef)(null);
+  const slots = (0, import_react17.useMemo)(() => select({ ...variantProps }), [variantProps]);
+  const [selectedOptions, setSelectedOptions] = (0, import_react17.useState)(defaultSelectedOptions);
+  const [targetRect, setTargetRect] = (0, import_react17.useState)(null);
+  const [optionWrapperHeight, setOptionWrapperHeight] = (0, import_react17.useState)(0);
+  const [isVisible, setIsVisible] = (0, import_react17.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react17.useState)(false);
+  const selectWrapperRef = (0, import_react17.useRef)(null);
+  const optionWrapperRef = (0, import_react17.useRef)(null);
   const handleToggleSelect = () => {
     if (isOpen) {
       setIsOpen(false);
@@ -7660,7 +7840,7 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
     setSelectedOptions(nextOptions);
     onChange == null ? void 0 : onChange(nextOptions);
   };
-  (0, import_react19.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const handleClickOutside = (e) => {
       var _a2;
       if (optionWrapperRef.current && !optionWrapperRef.current.contains(e.target) && !((_a2 = selectWrapperRef.current) == null ? void 0 : _a2.contains(e.target))) {
@@ -7671,7 +7851,7 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
     window.addEventListener("mousedown", handleClickOutside);
     return () => window.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (optionWrapperRef.current) {
       setOptionWrapperHeight(optionWrapperRef.current.getBoundingClientRect().height);
     }
@@ -7684,13 +7864,13 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
     onClick
   }) => {
     const slot = select({ ...variantProps, isSelected });
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { title: option.value, onClick, className: clsx(slot.option({ class: classNames == null ? void 0 : classNames.option })), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { title: option.value, onClick, className: clsx(slot.option({ class: classNames == null ? void 0 : classNames.option })), children: [
       option.value,
-      isSelected && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon_default, { name: "check", size: originalProps.size })
+      isSelected && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon_default, { name: "check", size: originalProps.size })
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "div",
       {
         className: clsx(
@@ -7698,9 +7878,9 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
           variantProps.direction === "horizon" ? slots.horizon({ class: classNames == null ? void 0 : classNames.horizon }) : slots.vertical({ class: classNames == null ? void 0 : classNames.vertical })
         ),
         children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
               "div",
               {
                 "data-expanded": isOpen,
@@ -7711,7 +7891,7 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
                 ref: selectWrapperRef,
                 onClick: handleToggleSelect,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     "input",
                     {
                       ...inputProps,
@@ -7725,7 +7905,7 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
                       size: 0
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     Icon_default,
                     {
                       name: "brace-up",
@@ -7736,14 +7916,14 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
                 ]
               }
             ),
-            helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }), children: helperMessage }),
-            errorMessage && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
+            helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }), children: helperMessage }),
+            errorMessage && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
           ] })
         ]
       }
     ),
     isVisible && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "div",
         {
           ref: optionWrapperRef,
@@ -7760,7 +7940,7 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
           },
           children: options.map((option) => {
             const isSelected = selectedOptions.some((o) => o.key === option.key);
-            return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               Option,
               {
                 option,
@@ -7816,13 +7996,16 @@ var select = tv({
   variants: {
     color: {
       primary: {
-        selectWrapper: ["hover:text-primary-main"],
-        option: ["hover:bg-primary-soft", "hover:text-primary-main"]
+        selectWrapper: ["text-primary-main"],
+        select: ["text-primary-main"],
+        option: ["hover:bg-primary-soft", "hover:text-primary-main"],
+        helperMessage: ["text-primary-main"]
       },
       secondary: {
-        selectWrapper: ["hover:text-secondary-main"],
+        selectWrapper: ["text-secondary-main"],
         select: ["text-secondary-main"],
-        option: ["hover:bg-secondary-soft", "hover:text-secondary-main"]
+        option: ["hover:bg-secondary-soft", "hover:text-secondary-main"],
+        helperMessage: ["text-secondary-main"]
       }
     },
     size: {
@@ -7929,16 +8112,16 @@ var select = tv({
 });
 
 // src/components/chip/chip.tsx
-var import_react20 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var Chip = (0, import_react20.forwardRef)((originalProps, ref) => {
+var import_react18 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Chip = (0, import_react18.forwardRef)((originalProps, ref) => {
   var _a;
   const [rawProps, variantProps] = mapPropsVariants(originalProps, chipStyle.variantKeys);
   const props = { ...rawProps, ...variantProps };
   const Component = props.onClick ? "button" : "div";
-  const slots = (0, import_react20.useMemo)(() => chipStyle({ ...variantProps }), [variantProps]);
-  const renderIcon = (name) => name ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon_default, { name, fill: true, size: props.size, className: slots.icon() }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  const slots = (0, import_react18.useMemo)(() => chipStyle({ ...variantProps }), [variantProps]);
+  const renderIcon = (name) => name ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon_default, { name, fill: true, size: props.size, className: slots.icon() }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     Component,
     {
       ref,
@@ -8114,13 +8297,13 @@ var chipStyle = tv({
 });
 
 // src/components/radio/radio.tsx
-var import_react21 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var Radio = (0, import_react21.forwardRef)((originalProps, ref) => {
+var import_react19 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var Radio = (0, import_react19.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, radioStyle.variantKeys);
   const { children, classNames, labelPosition = "end", ...inputProps } = props;
-  const slots = (0, import_react21.useMemo)(() => radioStyle({ ...variantProps }), [variantProps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  const slots = (0, import_react19.useMemo)(() => radioStyle({ ...variantProps }), [variantProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "label",
     {
       className: clsx(
@@ -8128,9 +8311,9 @@ var Radio = (0, import_react21.forwardRef)((originalProps, ref) => {
         labelPosition === "start" && slots.labelReverse({ class: classNames == null ? void 0 : classNames.labelReverse })
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("input", { ...inputProps, type: "radio", ref }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: slots.outerDot({ class: classNames == null ? void 0 : classNames.outerDot }), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: slots.innerDot({ class: classNames == null ? void 0 : classNames.innerDot }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: slots.labelWrapper({ class: classNames == null ? void 0 : classNames.labelWrapper }), children: children && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children }) })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("input", { ...inputProps, type: "radio", ref }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: slots.outerDot({ class: classNames == null ? void 0 : classNames.outerDot }), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: slots.innerDot({ class: classNames == null ? void 0 : classNames.innerDot }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: slots.labelWrapper({ class: classNames == null ? void 0 : classNames.labelWrapper }), children: children && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children }) })
       ]
     }
   );
@@ -8270,21 +8453,21 @@ var radioStyle = tv({
 });
 
 // src/components/switch/switch.tsx
-var import_react22 = require("react");
-var import_tailwind_variants20 = require("tailwind-variants");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var Switch = (0, import_react22.forwardRef)((originalProps, ref) => {
+var import_react20 = require("react");
+var import_tailwind_variants21 = require("tailwind-variants");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Switch = (0, import_react20.forwardRef)((originalProps, ref) => {
   const [rawProps, variantProps] = mapPropsVariants(originalProps, switchStyle.variantKeys);
   const { size, color, isDisabled, disableAnimation, id, classNames, ...inputProps } = { ...rawProps, ...variantProps };
-  const slots = (0, import_react22.useMemo)(() => switchStyle({ ...variantProps }), [variantProps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("input", { ...inputProps, id, ref, type: "checkbox", disabled: isDisabled, className: "hidden" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: slots.outerWrapper({ class: classNames == null ? void 0 : classNames.outerWrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: slots.thumb({ class: classNames == null ? void 0 : classNames.thumb }) }) }) })
+  const slots = (0, import_react20.useMemo)(() => switchStyle({ ...variantProps }), [variantProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("input", { ...inputProps, id, ref, type: "checkbox", disabled: isDisabled, className: "hidden" }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: slots.outerWrapper({ class: classNames == null ? void 0 : classNames.outerWrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: slots.thumb({ class: classNames == null ? void 0 : classNames.thumb }) }) }) })
   ] });
 });
 Switch.displayName = "Switch";
 var switch_default = Switch;
-var switchStyle = (0, import_tailwind_variants20.tv)({
+var switchStyle = (0, import_tailwind_variants21.tv)({
   slots: {
     base: ["group/switch", "relative", "max-w-fit", "inline-flex", "items-center", "justify-start", "cursor-pointer"],
     outerWrapper: [
@@ -8389,7 +8572,7 @@ var switchStyle = (0, import_tailwind_variants20.tv)({
 });
 
 // src/components/tooltip/tooltip.tsx
-var import_react24 = require("react");
+var import_react22 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/components/tooltip/tooltip-utils.ts
@@ -8512,11 +8695,11 @@ var getTailStyles = (placement) => {
 };
 
 // src/components/tooltip/useTooltip.ts
-var import_react23 = require("react");
+var import_react21 = require("react");
 var useTooltip = ({ placement, offset, targetRect }) => {
-  const [tooltipPosition, setTooltipPosition] = (0, import_react23.useState)({ x: 0, y: 0 });
-  const tooltipRef = (0, import_react23.useRef)(null);
-  (0, import_react23.useEffect)(() => {
+  const [tooltipPosition, setTooltipPosition] = (0, import_react21.useState)({ x: 0, y: 0 });
+  const tooltipRef = (0, import_react21.useRef)(null);
+  (0, import_react21.useEffect)(() => {
     if (targetRect && tooltipRef.current) {
       const { width, height } = tooltipRef.current.getBoundingClientRect();
       const scrollX = window.scrollX;
@@ -8546,29 +8729,29 @@ var useTooltip = ({ placement, offset, targetRect }) => {
 };
 
 // src/components/tooltip/tooltip.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var Tooltip = (0, import_react24.forwardRef)((originalProps, ref) => {
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Tooltip = (0, import_react22.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, tooltipStyle.variantKeys);
   const { placement = "top", offset = 5, delay = 100, persistent = false, classNames } = props;
-  const slots = (0, import_react24.useMemo)(() => tooltipStyle({ ...variantProps }), [variantProps]);
-  const [targetRect, setTargetRect] = (0, import_react24.useState)(null);
+  const slots = (0, import_react22.useMemo)(() => tooltipStyle({ ...variantProps }), [variantProps]);
+  const [targetRect, setTargetRect] = (0, import_react22.useState)(null);
   const { tooltipPosition, tooltipRef } = useTooltip({
     placement,
     offset,
     delay,
     targetRect
   });
-  const childrenRef = (0, import_react24.useRef)(null);
-  const delayTimeoutRef = (0, import_react24.useRef)(null);
-  const getProps = (0, import_react24.useCallback)(
+  const childrenRef = (0, import_react22.useRef)(null);
+  const delayTimeoutRef = (0, import_react22.useRef)(null);
+  const getProps = (0, import_react22.useCallback)(
     (slotKey, classNameKey) => ({
       className: slots[slotKey]({ class: classNames == null ? void 0 : classNames[classNameKey] })
     }),
     [slots, classNames]
   );
-  const getBaseProps = (0, import_react24.useCallback)(() => getProps("base", "base"), [getProps]);
-  const getContentProps = (0, import_react24.useCallback)(() => getProps("content", "content"), [getProps]);
-  const showTooltip = (0, import_react24.useCallback)(() => {
+  const getBaseProps = (0, import_react22.useCallback)(() => getProps("base", "base"), [getProps]);
+  const getContentProps = (0, import_react22.useCallback)(() => getProps("content", "content"), [getProps]);
+  const showTooltip = (0, import_react22.useCallback)(() => {
     if (childrenRef.current) {
       const rect = childrenRef.current.getBoundingClientRect();
       setTargetRect({
@@ -8581,16 +8764,16 @@ var Tooltip = (0, import_react24.forwardRef)((originalProps, ref) => {
       });
     }
   }, []);
-  const hideTooltip = (0, import_react24.useCallback)(() => {
+  const hideTooltip = (0, import_react22.useCallback)(() => {
     if (!persistent) {
       delayTimeoutRef.current = window.setTimeout(() => setTargetRect(null), delay);
     }
   }, [persistent, delay]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (persistent) showTooltip();
   }, [persistent, showTooltip]);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
         ref: (node) => {
@@ -8607,7 +8790,7 @@ var Tooltip = (0, import_react24.forwardRef)((originalProps, ref) => {
       }
     ),
     targetRect && (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
         "div",
         {
           ref: tooltipRef,
@@ -8620,7 +8803,7 @@ var Tooltip = (0, import_react24.forwardRef)((originalProps, ref) => {
           },
           children: [
             props.content,
-            variantProps.tail && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            variantProps.tail && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "div",
               {
                 className: `absolute h-2 w-2 rotate-45 bg-inherit ${getTailClassName(placement)}`,
@@ -8671,10 +8854,10 @@ var tooltipStyle = tv({
 });
 
 // src/components/modal/modal.tsx
-var import_react25 = require("react");
+var import_react23 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Modal = (0, import_react25.forwardRef)((props, ref) => {
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Modal = (0, import_react23.forwardRef)((props, ref) => {
   const [localProps, variantProps] = mapPropsVariants(props, modal.variantKeys);
   const {
     classNames,
@@ -8688,8 +8871,8 @@ var Modal = (0, import_react25.forwardRef)((props, ref) => {
     onConfirm,
     onCancel
   } = localProps;
-  const slots = (0, import_react25.useMemo)(() => modal(variantProps), [variantProps]);
-  (0, import_react25.useEffect)(() => {
+  const slots = (0, import_react23.useMemo)(() => modal(variantProps), [variantProps]);
+  (0, import_react23.useEffect)(() => {
     document.body.classList.toggle("overflow-hidden", !!isOpen);
     if (!isOpen || isKeyboardDismissDisabled) return;
     const handleKeyDown = (e) => {
@@ -8703,10 +8886,10 @@ var Modal = (0, import_react25.forwardRef)((props, ref) => {
   }, [isOpen, isKeyboardDismissDisabled, onCancel]);
   if (!isOpen) return null;
   return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(backdrop_default, { open: true }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: slots.modalWrapper({ class: classNames == null ? void 0 : classNames.modalWrapper }), children: [
-        showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(backdrop_default, { open: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: slots.modalWrapper({ class: classNames == null ? void 0 : classNames.modalWrapper }), children: [
+        showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           Icon_default,
           {
             size: "xl",
@@ -8715,12 +8898,12 @@ var Modal = (0, import_react25.forwardRef)((props, ref) => {
             onClick: onCancel
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
-          typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: slots.content({ class: classNames == null ? void 0 : classNames.content }), children: content }) : content,
-          (cancelButtonText || confirmButtonText) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: slots.footer({ class: classNames == null ? void 0 : classNames.footer }), children: [
-            cancelButtonText && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(button_default, { variant: "soft", color: "neutral", fullWidth: true, onClick: onCancel, children: cancelButtonText }),
-            confirmButtonText && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(button_default, { color: props.color, fullWidth: true, onClick: onConfirm, children: confirmButtonText })
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
+          typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: slots.content({ class: classNames == null ? void 0 : classNames.content }), children: content }) : content,
+          (cancelButtonText || confirmButtonText) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: slots.footer({ class: classNames == null ? void 0 : classNames.footer }), children: [
+            cancelButtonText && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(button_default, { variant: "soft", color: "neutral", fullWidth: true, onClick: onCancel, children: cancelButtonText }),
+            confirmButtonText && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(button_default, { color: props.color, fullWidth: true, onClick: onConfirm, children: confirmButtonText })
           ] })
         ] })
       ] }) })
@@ -8786,15 +8969,15 @@ var modal = tv({
 });
 
 // src/components/list/list.tsx
-var import_react26 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var List = (0, import_react26.forwardRef)((originalProps, ref) => {
+var import_react24 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var List = (0, import_react24.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, listStyle.variantKeys);
   const { children, classNames } = props;
-  const slots = (0, import_react26.useMemo)(() => listStyle(variantProps), [variantProps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: import_react26.Children.map(children, (child) => {
-    if (!(0, import_react26.isValidElement)(child)) return child;
-    return (0, import_react26.cloneElement)(child, {
+  const slots = (0, import_react24.useMemo)(() => listStyle(variantProps), [variantProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: import_react24.Children.map(children, (child) => {
+    if (!(0, import_react24.isValidElement)(child)) return child;
+    return (0, import_react24.cloneElement)(child, {
       ...variantProps,
       ...child.props
     });
@@ -8831,9 +9014,9 @@ var listStyle = tv({
 });
 
 // src/components/list/listItem.tsx
-var import_react27 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var ListItem = (0, import_react27.forwardRef)((props, ref) => {
+var import_react25 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var ListItem = (0, import_react25.forwardRef)((props, ref) => {
   const [rawProps, variantProps] = mapPropsVariants(props, listItemStyle.variantKeys);
   const {
     title,
@@ -8845,19 +9028,19 @@ var ListItem = (0, import_react27.forwardRef)((props, ref) => {
     classNames,
     onClick
   } = { ...rawProps, ...variantProps };
-  const slots = (0, import_react27.useMemo)(() => listItemStyle(variantProps), [variantProps]);
+  const slots = (0, import_react25.useMemo)(() => listItemStyle(variantProps), [variantProps]);
   const iconSize = ["lg", "xl"].includes(size) ? "lg" : "md";
   const avatarSize = iconSize;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), "data-selected": selected, onClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-      avatar && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(avatar_default, { ...avatar, variant: "round", size: avatarSize }),
-      startIconName && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: startIconName, fill: true, size, className: slots.startIcon({ class: classNames == null ? void 0 : classNames.startIcon }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: slots.titleWrapper({ class: classNames == null ? void 0 : classNames.titleWrapper }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
-        subTitle && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: slots.subTitle({ class: classNames == null ? void 0 : classNames.subTitle }), children: subTitle })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), "data-selected": selected, onClick, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+      avatar && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(avatar_default, { ...avatar, variant: "round", size: avatarSize }),
+      startIconName && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon_default, { name: startIconName, fill: true, size, className: slots.startIcon({ class: classNames == null ? void 0 : classNames.startIcon }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: slots.titleWrapper({ class: classNames == null ? void 0 : classNames.titleWrapper }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
+        subTitle && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: slots.subTitle({ class: classNames == null ? void 0 : classNames.subTitle }), children: subTitle })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: "right-chevron", size: iconSize, className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }) })
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon_default, { name: "right-chevron", size: iconSize, className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }) })
   ] });
 });
 ListItem.displayName = "ListItem";
@@ -9025,9 +9208,9 @@ var listItemStyle = tv({
 });
 
 // src/components/toast/toast.tsx
-var import_react28 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var Toast = (0, import_react28.forwardRef)((originalProps, ref) => {
+var import_react26 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var Toast = (0, import_react26.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, toast.variantKeys);
   const {
     title,
@@ -9041,9 +9224,9 @@ var Toast = (0, import_react28.forwardRef)((originalProps, ref) => {
     disableAnimation,
     onClose
   } = { ...props, ...variantProps };
-  const slots = (0, import_react28.useMemo)(() => toast({ ...variantProps }), [variantProps]);
-  const toastRef = (0, import_react28.useRef)(null);
-  (0, import_react28.useImperativeHandle)(
+  const slots = (0, import_react26.useMemo)(() => toast({ ...variantProps }), [variantProps]);
+  const toastRef = (0, import_react26.useRef)(null);
+  (0, import_react26.useImperativeHandle)(
     ref,
     () => ({
       getWidth: () => {
@@ -9054,7 +9237,7 @@ var Toast = (0, import_react28.forwardRef)((originalProps, ref) => {
     []
   );
   const animationClass = (placement == null ? void 0 : placement.includes("top")) ? "animate-slideInFromTop" : "animate-slideInFromBottom";
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
       ref: toastRef,
@@ -9066,12 +9249,12 @@ var Toast = (0, import_react28.forwardRef)((originalProps, ref) => {
       ),
       style: hasShadow ? { boxShadow: "0px 6px 18px rgba(0, 0, 0, 0.10)" } : {},
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-          showIcon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon_default, { name: originalProps.icon || "info-circle", fill: true, className: "mt-[2px]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
-          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon_default, { name: "close", className: "cursor-pointer", onClick: onClose })
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+          showIcon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon_default, { name: originalProps.icon || "info-circle", fill: true, className: "mt-[2px]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon_default, { name: "close", className: "cursor-pointer", onClick: onClose })
         ] }),
-        content && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: content })
+        content && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: content })
       ]
     }
   );
@@ -9176,7 +9359,7 @@ var toast = tv({
 });
 
 // src/components/toast/use-toast.tsx
-var import_react29 = require("react");
+var import_react27 = require("react");
 
 // src/components/toast/toast-utils.ts
 var getToastPosition = (placement, width, offset) => {
@@ -9215,10 +9398,10 @@ var getToastPosition = (placement, width, offset) => {
 };
 
 // src/components/toast/use-toast.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var ToastContext = (0, import_react29.createContext)(null);
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var ToastContext = (0, import_react27.createContext)(null);
 var useToast = () => {
-  const context = (0, import_react29.useContext)(ToastContext);
+  const context = (0, import_react27.useContext)(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within a ToastProvider");
   }
@@ -9228,10 +9411,10 @@ var ToastProvider = ({
   globalOptions,
   children
 }) => {
-  const [toasts, setToasts] = (0, import_react29.useState)([]);
-  const [containerStyle, setContainerStyle] = (0, import_react29.useState)({});
-  const toastRef = (0, import_react29.useRef)(null);
-  const addToast = (0, import_react29.useCallback)(
+  const [toasts, setToasts] = (0, import_react27.useState)([]);
+  const [containerStyle, setContainerStyle] = (0, import_react27.useState)({});
+  const toastRef = (0, import_react27.useRef)(null);
+  const addToast = (0, import_react27.useCallback)(
     (title, options = {}) => {
       const id = Date.now() + Math.floor(Math.random() * 1e5);
       const newToast = {
@@ -9248,11 +9431,11 @@ var ToastProvider = ({
     },
     [globalOptions]
   );
-  const removeToast = (0, import_react29.useCallback)((id) => {
+  const removeToast = (0, import_react27.useCallback)((id) => {
     setToasts((prevToasts) => prevToasts.filter((toast2) => toast2.id !== id));
   }, []);
   const contextValue = addToast;
-  (0, import_react29.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     var _a;
     const width = (globalOptions == null ? void 0 : globalOptions.width) ? globalOptions.width : typeof ((_a = toastRef.current) == null ? void 0 : _a.getWidth) === "function" ? toastRef.current.getWidth() : 300;
     const offset = 20;
@@ -9266,18 +9449,18 @@ var ToastProvider = ({
       right: right !== void 0 ? `${right}px` : void 0
     });
   }, [globalOptions == null ? void 0 : globalOptions.placement, globalOptions == null ? void 0 : globalOptions.width]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(ToastContext.Provider, { value: contextValue, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(ToastContext.Provider, { value: contextValue, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { id: "deepnoid-toast-container", className: "flex flex-col gap-[10px]", style: containerStyle, children: toasts.map((toast2) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(toast_default, { ref: toastRef, onClose: () => removeToast(toast2.id), ...toast2 }, toast2.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { id: "deepnoid-toast-container", className: "flex flex-col gap-[10px]", style: containerStyle, children: toasts.map((toast2) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(toast_default, { ref: toastRef, onClose: () => removeToast(toast2.id), ...toast2 }, toast2.id)) })
   ] });
 };
 
 // src/components/dateTimePicker/dateTimePicker.tsx
-var import_react33 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 var import_react_dom4 = require("react-dom");
 
 // src/components/dateTimePicker/useDateTimePicker.tsx
-var import_react30 = require("react");
+var import_react28 = require("react");
 
 // src/components/dateTimePicker/util.ts
 var formatDateToString = (date) => {
@@ -9293,17 +9476,17 @@ var formatStringToDate = (date) => {
 
 // src/components/dateTimePicker/useDateTimePicker.tsx
 var useDatePicker = ({ initialDate, initialTime }) => {
-  const [selectedDate, setSelectedDate] = (0, import_react30.useState)(
+  const [selectedDate, setSelectedDate] = (0, import_react28.useState)(
     initialDate ? formatDateToString(initialDate) : ""
   );
-  const [selectedTime, setSelectedTime] = (0, import_react30.useState)(initialTime ? initialTime : "");
-  const [targetRect, setTargetRect] = (0, import_react30.useState)(null);
-  const [popupWidth, setPopupWidth] = (0, import_react30.useState)(0);
-  const [popupHeight, setPopupHeight] = (0, import_react30.useState)(0);
-  const [isFocusInput, setIsFocusInput] = (0, import_react30.useState)(false);
-  const dateInputRef = (0, import_react30.useRef)(null);
-  const datePickerWrapperRef = (0, import_react30.useRef)(null);
-  const datePickerRef = (0, import_react30.useRef)(null);
+  const [selectedTime, setSelectedTime] = (0, import_react28.useState)(initialTime ? initialTime : "");
+  const [targetRect, setTargetRect] = (0, import_react28.useState)(null);
+  const [popupWidth, setPopupWidth] = (0, import_react28.useState)(0);
+  const [popupHeight, setPopupHeight] = (0, import_react28.useState)(0);
+  const [isFocusInput, setIsFocusInput] = (0, import_react28.useState)(false);
+  const dateInputRef = (0, import_react28.useRef)(null);
+  const datePickerWrapperRef = (0, import_react28.useRef)(null);
+  const datePickerRef = (0, import_react28.useRef)(null);
   const DATE_PICKER_GAP = 4;
   const calculatePositionWithScroll = (targetRect2) => {
     if (targetRect2 && popupWidth && popupHeight) {
@@ -9336,7 +9519,7 @@ var useDatePicker = ({ initialDate, initialTime }) => {
   const handleBlueInput = () => {
     setIsFocusInput(false);
   };
-  (0, import_react30.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const onClickOutside = (e) => {
       if (datePickerRef.current && !datePickerRef.current.contains(e.target) && datePickerWrapperRef.current && !datePickerWrapperRef.current.contains(e.target)) {
         setTargetRect(null);
@@ -9345,7 +9528,7 @@ var useDatePicker = ({ initialDate, initialTime }) => {
     window.addEventListener("mousedown", onClickOutside);
     return () => window.removeEventListener("mousedown", onClickOutside);
   }, []);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (datePickerWrapperRef.current) {
       setPopupHeight(datePickerWrapperRef.current.getBoundingClientRect().height);
       setPopupWidth(datePickerWrapperRef.current.getBoundingClientRect().width);
@@ -9370,19 +9553,19 @@ var useDatePicker = ({ initialDate, initialTime }) => {
 };
 
 // src/components/dateTimePicker/calendar.tsx
-var import_react31 = __toESM(require("react"));
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var Calendar = (0, import_react31.forwardRef)((originalProps, ref) => {
+var import_react29 = __toESM(require("react"));
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var Calendar = (0, import_react29.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, calendarStyle.variantKeys);
   const { selectedDate, classNames, highlightWeekend = true, onChangeDate, ...inputProps } = props;
-  const [currentDate, setCurrentDate] = (0, import_react31.useState)(selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date());
+  const [currentDate, setCurrentDate] = (0, import_react29.useState)(selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date());
   const daysOfWeek = ["S", "M", "T", "W", "T", "F", "S"];
-  (0, import_react31.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (selectedDate) {
       setCurrentDate(new Date(selectedDate));
     }
   }, [selectedDate]);
-  const getCalendarDates = (0, import_react31.useCallback)(() => {
+  const getCalendarDates = (0, import_react29.useCallback)(() => {
     const year = currentDate.getFullYear();
     const month = currentDate.getMonth();
     const firstDayOfMonth = new Date(year, month, 1).getDay();
@@ -9428,17 +9611,17 @@ var Calendar = (0, import_react31.forwardRef)((originalProps, ref) => {
       onChangeDate(formatted);
     }
   };
-  (0, import_react31.useImperativeHandle)(ref, () => ({
+  (0, import_react29.useImperativeHandle)(ref, () => ({
     getSelectedDate: () => selectedDate
   }));
-  const slots = (0, import_react31.useMemo)(() => calendarStyle({ ...variantProps }), [variantProps]);
-  const getBaseProps = (0, import_react31.useCallback)(
+  const slots = (0, import_react29.useMemo)(() => calendarStyle({ ...variantProps }), [variantProps]);
+  const getBaseProps = (0, import_react29.useCallback)(
     () => ({
       className: `${slots.base({ class: classNames == null ? void 0 : classNames.base })}`
     }),
     [slots, classNames]
   );
-  const getDateTitleProps = (0, import_react31.useCallback)(
+  const getDateTitleProps = (0, import_react29.useCallback)(
     (index) => {
       return {
         className: `${slots.dateTitle({
@@ -9450,7 +9633,7 @@ var Calendar = (0, import_react31.forwardRef)((originalProps, ref) => {
     },
     [slots, classNames, highlightWeekend]
   );
-  const getDateProps = (0, import_react31.useCallback)(
+  const getDateProps = (0, import_react29.useCallback)(
     (dateObj) => {
       const today = /* @__PURE__ */ new Date();
       const isToday = today.getDate() === dateObj.date && today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear();
@@ -9472,18 +9655,18 @@ var Calendar = (0, import_react31.forwardRef)((originalProps, ref) => {
     [slots, classNames, selectedDate, currentDate, highlightWeekend]
   );
   const calendarDates = getCalendarDates();
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ...getBaseProps(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "calendar-header flex justify-between items-center mb-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon_default, { name: "brace-left", size: "md", className: "cursor-pointer", onClick: handlePrevMonth }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-h6 font-semibold", children: currentDate.toLocaleString("default", { year: "numeric", month: "2-digit" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon_default, { name: "brace-right", size: "md", className: "cursor-pointer", onClick: handleNextMonth })
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ...getBaseProps(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "calendar-header flex justify-between items-center mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon_default, { name: "brace-left", size: "md", className: "cursor-pointer", onClick: handlePrevMonth }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-h6 font-semibold", children: currentDate.toLocaleString("default", { year: "numeric", month: "2-digit" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon_default, { name: "brace-right", size: "md", className: "cursor-pointer", onClick: handleNextMonth })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "grid grid-cols-7 gap-2 text-center", children: daysOfWeek.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ...getDateTitleProps(index), children: day }, `${day}-${index}`)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "grid grid-cols-7 gap-[5px] text-center mt-2", children: calendarDates.map((week, weekIndex) => {
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "grid grid-cols-7 gap-2 text-center", children: daysOfWeek.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ...getDateTitleProps(index), children: day }, `${day}-${index}`)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "grid grid-cols-7 gap-[5px] text-center mt-2", children: calendarDates.map((week, weekIndex) => {
       const hasCurrentMonthDates = week.some((dateObj) => dateObj.currentMonth);
       if (!hasCurrentMonthDates) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react31.default.Fragment, { children: week.map((dateObj, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ...getDateProps(dateObj), children: dateObj.date }, index);
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react29.default.Fragment, { children: week.map((dateObj, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ...getDateProps(dateObj), children: dateObj.date }, index);
       }) }, weekIndex);
     }) })
   ] }) });
@@ -9554,22 +9737,22 @@ var calendarStyle = tv({
 });
 
 // src/components/dateTimePicker/timePicker.tsx
-var import_react32 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react30 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime }) => {
   const TOTAL_HOURS = 12;
   const TOTAL_MINUTES = 60;
   const ITEM_HEIGHT = 30;
   const PERIODS = ["AM", "PM"];
-  const [selectedHour, setSelectedHour] = (0, import_react32.useState)("01");
-  const [selectedMinute, setSelectedMinute] = (0, import_react32.useState)("00");
-  const [selectedPeriod, setSelectedPeriod] = (0, import_react32.useState)("AM");
-  const hourRef = (0, import_react32.useRef)(null);
-  const minuteRef = (0, import_react32.useRef)(null);
-  const periodRef = (0, import_react32.useRef)(null);
+  const [selectedHour, setSelectedHour] = (0, import_react30.useState)("01");
+  const [selectedMinute, setSelectedMinute] = (0, import_react30.useState)("00");
+  const [selectedPeriod, setSelectedPeriod] = (0, import_react30.useState)("AM");
+  const hourRef = (0, import_react30.useRef)(null);
+  const minuteRef = (0, import_react30.useRef)(null);
+  const periodRef = (0, import_react30.useRef)(null);
   const hoursArray = [...Array(TOTAL_HOURS).keys()].map((i) => (i + 1).toString().padStart(2, "0"));
   const minutesArray = [...Array(TOTAL_MINUTES).keys()].map((i) => i.toString().padStart(2, "0"));
-  (0, import_react32.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (selectedTime) {
       const { formattedHour, minute, period } = parseAndFormatTime(selectedTime);
       setSelectedHour(formattedHour);
@@ -9580,7 +9763,7 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
       scrollToSelectedTime();
     }
   }, [selectedTime, isFocusInput]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     scrollToSelectedTime();
   }, []);
   const parseAndFormatTime = (time) => {
@@ -9617,8 +9800,8 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
       onChangeTime(formattedTime);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex h-[200px] p-[10px] gap-[5px] border border-neutral-main rounded-md bg-background shadow-lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(list_default, { ref: periodRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: PERIODS.map((period, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex h-[200px] p-[10px] gap-[5px] border border-neutral-main rounded-md bg-background shadow-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(list_default, { ref: periodRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: PERIODS.map((period, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       listItem_default,
       {
         color,
@@ -9632,7 +9815,7 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
       },
       `${period}-${index}`
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(list_default, { ref: hourRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: hoursArray.map((hour, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(list_default, { ref: hourRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: hoursArray.map((hour, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       listItem_default,
       {
         color,
@@ -9646,7 +9829,7 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
       },
       `${hour}-${index}`
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(list_default, { ref: minuteRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: minutesArray.map((minute, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(list_default, { ref: minuteRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: minutesArray.map((minute, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       listItem_default,
       {
         color,
@@ -9665,8 +9848,8 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
 var timePicker_default = TimePicker;
 
 // src/components/dateTimePicker/dateTimePicker.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var DatePicker = (0, import_react31.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, dateTimePickerStyle.variantKeys);
   const {
     classNames,
@@ -9680,7 +9863,7 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
     onChangeTime,
     ...inputProps
   } = props;
-  const slots = (0, import_react33.useMemo)(() => dateTimePickerStyle({ ...variantProps }), [variantProps]);
+  const slots = (0, import_react31.useMemo)(() => dateTimePickerStyle({ ...variantProps }), [variantProps]);
   const {
     selectedDate,
     selectedTime,
@@ -9701,32 +9884,32 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
     initialTime: typeof value === "string" ? value : void 0
   });
   const position = targetRect ? calculatePositionWithScroll(targetRect) : null;
-  const getBaseProps = (0, import_react33.useCallback)(
+  const getBaseProps = (0, import_react31.useCallback)(
     () => ({
       className: slots.base({ class: classNames == null ? void 0 : classNames.base })
     }),
     [slots, classNames]
   );
-  const getLabelProps = (0, import_react33.useCallback)(
+  const getLabelProps = (0, import_react31.useCallback)(
     () => ({
       className: slots.label({ class: classNames == null ? void 0 : classNames.label })
     }),
     [slots, classNames]
   );
-  const getInnerWrapperProps = (0, import_react33.useCallback)(
+  const getInnerWrapperProps = (0, import_react31.useCallback)(
     () => ({
       className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper })
     }),
     [slots, classNames]
   );
-  const getInputWrapperProps = (0, import_react33.useCallback)(
+  const getInputWrapperProps = (0, import_react31.useCallback)(
     () => ({
       className: slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }),
       ref: datePickerRef
     }),
     [slots, classNames]
   );
-  const getInputProps = (0, import_react33.useCallback)(
+  const getInputProps = (0, import_react31.useCallback)(
     () => ({
       ...inputProps,
       ref: ref || dateInputRef,
@@ -9757,33 +9940,33 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
     }),
     [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate, selectedTime, type, value]
   );
-  const getContentProps = (0, import_react33.useCallback)(
+  const getContentProps = (0, import_react31.useCallback)(
     () => ({
       className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
       size: originalProps.size
     }),
     [slots, classNames, originalProps.size]
   );
-  const getErrorMessageProps = (0, import_react33.useCallback)(
+  const getErrorMessageProps = (0, import_react31.useCallback)(
     () => ({
       className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
     }),
     [slots, classNames]
   );
   const renderStartContent = () => {
-    if (import_react33.default.isValidElement(startContent)) {
+    if (import_react31.default.isValidElement(startContent)) {
       const existingProps = startContent.props;
       const mergedProps = {
         ...getContentProps(),
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
-      return import_react33.default.cloneElement(startContent, mergedProps);
+      return import_react31.default.cloneElement(startContent, mergedProps);
     } else {
       const contentProps = getContentProps();
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ...contentProps, children: startContent });
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ...contentProps, children: startContent });
     }
   };
-  const renderDateTimePickerIcon = () => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ...getContentProps(), onClick: handleToggleDatePicker, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  const renderDateTimePickerIcon = () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ...getContentProps(), onClick: handleToggleDatePicker, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     Icon_default,
     {
       name: type === "time" ? "clock" : "calendar",
@@ -9793,18 +9976,18 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
     }
   ) });
   const renderContentWithIcon = () => {
-    if (import_react33.default.isValidElement(endContent)) {
+    if (import_react31.default.isValidElement(endContent)) {
       const existingProps = endContent.props;
       const mergedProps = {
         ...getContentProps(),
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
-      return import_react33.default.cloneElement(endContent, mergedProps);
+      return import_react31.default.cloneElement(endContent, mergedProps);
     } else if (errorMessage) {
       const iconProps = { ...getContentProps(), className: getContentProps().className };
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ...iconProps, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ...iconProps, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, {});
     }
   };
   const renderEndContent = () => {
@@ -9819,20 +10002,20 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
         return renderContentWithIcon();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...getBaseProps(), children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("label", { ...getLabelProps(), children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...getInnerWrapperProps(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...getInputWrapperProps(), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ...getBaseProps(), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { ...getLabelProps(), children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ...getInnerWrapperProps(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ...getInputWrapperProps(), children: [
           startContent && renderStartContent(),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("input", { ...getInputProps() }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("input", { ...getInputProps() }),
           renderEndContent()
         ] }),
-        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { ...getErrorMessageProps(), children: errorMessage })
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { ...getErrorMessageProps(), children: errorMessage })
       ] })
     ] }),
-    targetRect && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: (0, import_react_dom4.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    targetRect && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: (0, import_react_dom4.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         "div",
         {
           ref: datePickerWrapperRef,
@@ -9843,7 +10026,7 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
             zIndex: 1e3
           },
           children: [
-            type === "date" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            type === "date" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               calendar_default,
               {
                 color: originalProps.color,
@@ -9855,7 +10038,7 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
                 }
               }
             ),
-            type === "time" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            type === "time" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               timePicker_default,
               {
                 color: originalProps.color,
@@ -10005,20 +10188,20 @@ var dateTimePickerStyle = tv({
 });
 
 // src/components/tree/tree.tsx
-var import_react34 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var TreeNodeItem = (0, import_react34.forwardRef)(
+var import_react32 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var TreeNodeItem = (0, import_react32.forwardRef)(
   ({ node, depth, fileIcon, selectedId, isLoading, classNames, onExpand }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react34.useState)(false);
-    const [children, setChildren] = (0, import_react34.useState)(node.children);
-    const [isLoadingChildren, setIsLoadingChildren] = (0, import_react34.useState)(false);
-    const slots = (0, import_react34.useMemo)(() => treeStyle(), []);
-    const hasMore = (0, import_react34.useMemo)(() => {
+    const [isOpen, setIsOpen] = (0, import_react32.useState)(false);
+    const [children, setChildren] = (0, import_react32.useState)(node.children);
+    const [isLoadingChildren, setIsLoadingChildren] = (0, import_react32.useState)(false);
+    const slots = (0, import_react32.useMemo)(() => treeStyle(), []);
+    const hasMore = (0, import_react32.useMemo)(() => {
       if (node.isLeaf) return false;
       if (Array.isArray(children)) return children.length > 0;
       return typeof onExpand === "function";
     }, [node.isLeaf, children, onExpand]);
-    const toggleOpen = (0, import_react34.useCallback)(async () => {
+    const toggleOpen = (0, import_react32.useCallback)(async () => {
       if (!isOpen && !children && onExpand && !node.isLeaf) {
         setIsLoadingChildren(true);
         try {
@@ -10043,7 +10226,7 @@ var TreeNodeItem = (0, import_react34.forwardRef)(
       (_a = node.onRightClick) == null ? void 0 : _a.call(node, e);
     };
     const marginClass = depth > 1 ? hasMore ? "ml-[30px]" : "ml-[55px]" : hasMore ? "" : "ml-[25px]";
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "div",
       {
         ref,
@@ -10053,14 +10236,18 @@ var TreeNodeItem = (0, import_react34.forwardRef)(
           isLoading ? "-translate-y-2 opacity-0" : "translate-y-0 opacity-100"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
             "div",
             {
-              className: clsx(slots.node({ class: classNames == null ? void 0 : classNames.node }), selectedId == node.id ? "bg-neutral-soft" : ""),
+              className: clsx(
+                slots.node({ class: classNames == null ? void 0 : classNames.node }),
+                slots.clickable({ class: classNames == null ? void 0 : classNames.clickable }),
+                selectedId == node.id ? "bg-neutral-soft" : ""
+              ),
               onClick: handleClick,
               onContextMenu: handleRightClick,
               children: [
-                hasMore && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                hasMore && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                   Icon_default,
                   {
                     name: "right-chevron",
@@ -10071,13 +10258,13 @@ var TreeNodeItem = (0, import_react34.forwardRef)(
                   }
                 ),
                 fileIcon,
-                node.label
+                node.content
               ]
             }
           ),
-          isOpen && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
-            isLoadingChildren && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-neutral py-1 text-sm", children: "loading..." }),
-            children == null ? void 0 : children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { children: [
+            isLoadingChildren && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "text-neutral py-1 text-sm", children: "loading..." }),
+            children == null ? void 0 : children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               TreeNodeItem,
               {
                 node: child,
@@ -10106,15 +10293,35 @@ var Tree = ({
   classNames,
   onExpand
 }) => {
-  const slots = (0, import_react34.useMemo)(() => treeStyle(), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    headerContent && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: headerContent }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: slots.group({ class: classNames == null ? void 0 : classNames.group }), children: [
-        groupIcon,
-        group.label
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  const slots = (0, import_react32.useMemo)(() => treeStyle(), []);
+  const handleClick = (e) => {
+    var _a;
+    (_a = group.onClick) == null ? void 0 : _a.call(group, e);
+  };
+  const handleRightClick = (e) => {
+    var _a;
+    e.preventDefault();
+    (_a = group.onRightClick) == null ? void 0 : _a.call(group, e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    headerContent && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: headerContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        "div",
+        {
+          className: clsx(
+            slots.node({ class: classNames == null ? void 0 : classNames.node }),
+            group.onClick || group.onRightClick ? slots.clickable({ class: classNames == null ? void 0 : classNames.clickable }) : ""
+          ),
+          onClick: handleClick,
+          onContextMenu: handleRightClick,
+          children: [
+            groupIcon,
+            group.content
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         TreeNodeItem,
         {
           node,
@@ -10136,7 +10343,6 @@ var treeStyle = tv({
   slots: {
     base: ["border", "border-neutral-light", "rounded-xl", "p-[20px]", "flex", "flex-col", "gap-[20px]", "select-none"],
     wrapper: ["flex", "flex-col", "gap-[5px]"],
-    group: ["flex", "items-center", "gap-[5px]", "text-md", "font-bold", "text-body-foreground", "p-[5px]"],
     node: [
       "flex",
       "items-center",
@@ -10144,18 +10350,17 @@ var treeStyle = tv({
       "text-md",
       "font-bold",
       "text-body-foreground",
-      "hover:bg-neutral-soft",
-      "p-[5px]",
       "rounded-[5px]",
-      "cursor-pointer"
-    ]
+      "p-[5px]"
+    ],
+    clickable: ["hover:bg-neutral-soft", "cursor-pointer"]
   }
 });
 
 // src/components/fileUpload/fileUpload.tsx
-var import_react35 = require("react");
-var import_tailwind_variants29 = require("tailwind-variants");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_react33 = require("react");
+var import_tailwind_variants30 = require("tailwind-variants");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function FileUpload({
   buttonText,
   maxSizeMB = 10,
@@ -10168,11 +10373,11 @@ function FileUpload({
   showProgress,
   classNames
 }) {
-  const fileInputRef = (0, import_react35.useRef)(null);
-  const uploadIntervalRef = (0, import_react35.useRef)(null);
-  const [file, setFile] = (0, import_react35.useState)(null);
-  const [uploadProgress, setUploadProgress] = (0, import_react35.useState)(0);
-  const [errorMessage, setErrorMessage] = (0, import_react35.useState)("");
+  const fileInputRef = (0, import_react33.useRef)(null);
+  const uploadIntervalRef = (0, import_react33.useRef)(null);
+  const [file, setFile] = (0, import_react33.useState)(null);
+  const [uploadProgress, setUploadProgress] = (0, import_react33.useState)(0);
+  const [errorMessage, setErrorMessage] = (0, import_react33.useState)("");
   const slots = fileUploadStyle();
   const handleButtonClick = () => {
     var _a;
@@ -10222,18 +10427,18 @@ function FileUpload({
     setUploadProgress(0);
     setErrorMessage("");
   };
-  (0, import_react35.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     return () => {
       if (uploadIntervalRef.current) {
         clearInterval(uploadIntervalRef.current);
       }
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: slots.container({ class: classNames == null ? void 0 : classNames.container }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: slots.inputWrapper(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(input_default, { name: "file", readOnly: true, variant: "outline", full: true, placeholder, defaultValue: file == null ? void 0 : file.name }),
-        file && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: slots.container({ class: classNames == null ? void 0 : classNames.container }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: slots.inputWrapper(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(input_default, { name: "file", readOnly: true, variant: "outline", full: true, placeholder, defaultValue: file == null ? void 0 : file.name }),
+        file && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           icon_button_default,
           {
             name: "close",
@@ -10245,17 +10450,17 @@ function FileUpload({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(button_default, { type: "button", variant: "outline", onClick: handleButtonClick, children: buttonText }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("input", { ref: fileInputRef, type: "file", hidden: true, accept: accept.join(","), onChange: handleFileChange })
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(button_default, { type: "button", variant: "outline", onClick: handleButtonClick, children: buttonText }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("input", { ref: fileInputRef, type: "file", hidden: true, accept: accept.join(","), onChange: handleFileChange })
     ] }),
-    showProgress && file && uploadProgress < 100 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: slots.progressBarContainer(), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: slots.progressBar(), style: { width: `${uploadProgress}%` } }) }),
-    !errorMessage && helperMessage && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: slots.helperMessage(), children: helperMessage }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: slots.errorMessage(), children: errorMessage })
+    showProgress && file && uploadProgress < 100 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: slots.progressBarContainer(), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: slots.progressBar(), style: { width: `${uploadProgress}%` } }) }),
+    !errorMessage && helperMessage && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: slots.helperMessage(), children: helperMessage }),
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: slots.errorMessage(), children: errorMessage })
   ] });
 }
 FileUpload.displayName = "FileUpload";
 var fileUpload_default = FileUpload;
-var fileUploadStyle = (0, import_tailwind_variants29.tv)({
+var fileUploadStyle = (0, import_tailwind_variants30.tv)({
   slots: {
     base: ["flex", "flex-col", "gap-[5px]"],
     container: ["flex", "items-center", "gap-[10px]"],
@@ -10289,6 +10494,7 @@ var fileUploadStyle = (0, import_tailwind_variants29.tv)({
   Radio,
   ScrollArea,
   Select,
+  Skeleton,
   Switch,
   Table,
   Tabs,