@deepnoid/ui 0.1.135 → 0.1.137

package/dist/index.js

@@ -7847,7 +7847,7 @@ var textareaStyle = (0, import_tailwind_variants13.tv)({
 
 // src/components/table/table.tsx
 var import_react17 = require("react");
-var import_tailwind_variants18 = require("tailwind-variants");
+var import_tailwind_variants17 = require("tailwind-variants");
 
 // src/components/checkbox/checkbox.tsx
 var import_react14 = require("react");
@@ -8056,77 +8056,8 @@ var checkboxStyle = tv({
   }
 });
 
-// src/components/skeleton/skeleton.tsx
-var import_tailwind_variants15 = require("tailwind-variants");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-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_runtime17.jsx)(
-    "div",
-    {
-      className: clsx(slots.base({ color, rounded }), className),
-      style: {
-        "--shimmer-duration": speedMap[speed]
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.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_variants15.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_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var TableHead = ({
   slots,
   columns,
@@ -8134,11 +8065,10 @@ var TableHead = ({
   size,
   rowCheckbox = false,
   hasCheckedRows,
-  isLoading = false,
   classNames,
   onCheckAll
 }) => {
-  const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "th",
     {
       className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column == null ? void 0 : column.className),
@@ -8154,16 +8084,10 @@ var TableHead = ({
     },
     key
   );
-  const renderSkeletonRow = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("tr", { className: clsx(slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "[&>th]:border-0"), children: [
-    columns.map(
-      (column, idx) => renderTh(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), `skeleton-${idx}`, column)
-    ),
-    rowCheckbox && renderTh(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), "checkbox-skeleton", void 0, true)
-  ] }) });
-  const renderContentRow = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime18.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         checkbox_default,
         {
           size,
@@ -8176,12 +8100,11 @@ var TableHead = ({
       true
     )
   ] }) });
-  return isLoading ? renderSkeletonRow() : renderContentRow();
 };
 var table_head_default = TableHead;
 
 // src/components/table/table-body.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var TableBody = ({
   slots,
   rows,
@@ -8194,28 +8117,20 @@ var TableBody = ({
   onRowClick,
   isLoading = false,
   emptyContent,
-  skeletonRow,
   classNames,
   className
 }) => {
-  const renderTdSkeleton = (key, column) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), style: column ? getCellStyle(column) : {}, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
-  };
-  const renderCheckboxCell = (rowId, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  const renderCheckboxCell = (rowId, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "td",
     {
       className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"),
       style: { width: "40px", minWidth: "40px", textAlign: "center" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) })
     },
     `checkbox-${rowId}-${rowIndex}`
   );
-  const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
-    columns.map((column, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`, column)),
-    rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
-  ] }, `skeleton-${rowIndex}`);
-  const renderEmptyRow = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime19.jsxs)(
+  const renderEmptyRow = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime18.jsxs)(
     "tr",
     {
       className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }),
@@ -8226,7 +8141,7 @@ var TableBody = ({
           const value = row[column.field];
           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_runtime19.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "td",
             {
               className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className),
@@ -8241,12 +8156,18 @@ var TableBody = ({
     },
     `${row.id}-${rowIndex}`
   );
-  const renderRows = () => {
-    if (isLoading) return skeletonRow ? Array.from({ length: skeletonRow }, (_, idx) => renderSkeletonRow(idx)) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, {});
-    if (!rows.length && emptyContent) return renderEmptyRow();
-    return rows.map((row, index) => renderDataRow(row, index));
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tbody", { className: clsx(slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), className), children: renderRows() });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "tbody",
+    {
+      className: clsx(
+        slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }),
+        className,
+        "transition-all duration-200 ease-in-out",
+        isLoading && slots.tbodyLoading({ class: classNames == null ? void 0 : classNames.tbodyLoading })
+      ),
+      children: !rows.length && emptyContent ? renderEmptyRow() : rows.map((row, index) => renderDataRow(row, index))
+    }
+  );
 };
 var table_body_default = TableBody;
 
@@ -8279,7 +8200,7 @@ var usePagination = ({ currentPage, totalPage, groupSize, handleChangePage }) =>
 var usePagination_default = usePagination;
 
 // src/components/pagination/pagination.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var Pagination = (0, import_react16.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, paginationStyle.variantKeys);
   const {
@@ -8289,7 +8210,7 @@ var Pagination = (0, import_react16.forwardRef)((originalProps, ref) => {
     totalPage,
     showPageNumber = true,
     showPageLabel,
-    showFirstLastButtons,
+    showFirstLastButtons = true,
     handleChangePage,
     variant,
     size
@@ -8310,29 +8231,29 @@ var Pagination = (0, import_react16.forwardRef)((originalProps, ref) => {
       }
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-      showFirstLastButtons && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+      showFirstLastButtons && /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime20.jsx)(Icon_default, { name: "left-double-chevron", size })
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon_default, { name: "left-double-chevron", size })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime20.jsx)(Icon_default, { name: "left-chevron", size })
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon_default, { name: "left-chevron", size })
         }
       ),
-      showPageNumber && pageList.map((page, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      showPageNumber && pageList.map((page, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "div",
         {
           className: slots.button({ class: classNames == null ? void 0 : classNames.button }),
@@ -8342,29 +8263,29 @@ var Pagination = (0, import_react16.forwardRef)((originalProps, ref) => {
         },
         index
       )),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime20.jsx)(Icon_default, { name: "right-chevron", size })
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon_default, { name: "right-chevron", size })
         }
       ),
-      showFirstLastButtons && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      showFirstLastButtons && /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime20.jsx)(Icon_default, { name: "right-double-chevron", size })
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon_default, { name: "right-double-chevron", size })
         }
       )
     ] }),
-    showPageLabel && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    showPageLabel && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         input_default,
         {
           variant: variant === "underline" ? "outline" : variant,
@@ -8619,14 +8540,14 @@ var paginationStyle = tv(
 );
 
 // src/components/scroll/scrollArea.tsx
-var import_tailwind_variants17 = require("tailwind-variants");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_tailwind_variants16 = require("tailwind-variants");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var ScrollArea = ({ children, className, direction, size }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: clsx(scrollAreaStyle({ direction, size }), className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: clsx(scrollAreaStyle({ direction, size }), className), children });
 };
 ScrollArea.displayName = "ScrollArea";
 var scrollArea_default = ScrollArea;
-var scrollAreaStyle = (0, import_tailwind_variants17.tv)({
+var scrollAreaStyle = (0, import_tailwind_variants16.tv)({
   base: [
     "h-full",
     "x-full",
@@ -8655,7 +8576,7 @@ var scrollAreaStyle = (0, import_tailwind_variants17.tv)({
 });
 
 // src/components/table/table.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, tableStyle.variantKeys);
   const {
@@ -8671,13 +8592,13 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
     variant,
     color,
     size,
-    skeletonRow,
+    checkedRows,
     onCheckedRowsChange,
     onRowClick
   } = { ...props, ...variantProps };
   const { page = 1, perPage = 15 } = pagination || {};
-  const showPagination = pagination && totalData > 0 && !isLoading;
-  const [checkedRows, setCheckedRows] = (0, import_react17.useState)(/* @__PURE__ */ new Set());
+  const showPagination = pagination && totalData > 0;
+  const [checkedRowIds, setCheckedRowIds] = (0, import_react17.useState)(new Set(checkedRows == null ? void 0 : checkedRows.map((row) => row.id)));
   const tableMinWidth = (0, import_react17.useMemo)(() => {
     const columnsWidth = columns.reduce((total, column) => {
       if (column.width) return total + column.width;
@@ -8688,30 +8609,30 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
     return columnsWidth + checkboxWidth;
   }, [columns, rowCheckbox]);
   (0, import_react17.useEffect)(() => {
-    onCheckedRowsChange == null ? void 0 : onCheckedRowsChange(getCheckedRowData(checkedRows));
-  }, [checkedRows]);
+    onCheckedRowsChange == null ? void 0 : onCheckedRowsChange(getCheckedRowData(checkedRowIds));
+  }, [checkedRowIds]);
   (0, import_react17.useEffect)(() => {
     const currentRowIds = new Set(rows.map((row) => row.id));
-    const checkedRowIds = Array.from(checkedRows);
-    const hasValidCheckedRows = checkedRowIds.every((id) => currentRowIds.has(id));
+    const ids = Array.from(checkedRowIds);
+    const hasValidCheckedRows = ids.every((id) => currentRowIds.has(id));
     if (!hasValidCheckedRows) {
-      setCheckedRows(/* @__PURE__ */ new Set());
+      setCheckedRowIds(new Set(checkedRows == null ? void 0 : checkedRows.map((row) => row.id)));
     }
   }, [rows.map((row) => row.id).join(",")]);
   (0, import_react17.useImperativeHandle)(
     ref,
     () => ({
-      checkedRows,
-      setCheckedRows
+      checkedRowIds,
+      setCheckedRowIds
     }),
-    [checkedRows]
+    [checkedRowIds]
   );
   const handleAllRowCheck = (checked) => {
     const updated = checked ? new Set(rows.map((row) => row.id)) : /* @__PURE__ */ new Set();
-    setCheckedRows(updated);
+    setCheckedRowIds(updated);
   };
   const handleRowCheck = (id, checked) => {
-    setCheckedRows((prev) => {
+    setCheckedRowIds((prev) => {
       const updated = new Set(prev);
       checked ? updated.add(id) : updated.delete(id);
       return updated;
@@ -8729,8 +8650,8 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
     () => tableStyle({ ...variantProps, rowClickable: typeof onRowClick === "function" }),
     [variantProps, onRowClick]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "table",
       {
         className: slots.table({ class: classNames == null ? void 0 : classNames.table }),
@@ -8740,21 +8661,20 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
           minWidth: `${tableMinWidth}px`
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             table_head_default,
             {
               columns,
               size,
               color,
               rowCheckbox,
-              hasCheckedRows: rows.length > 0 && rows.every((row) => checkedRows.has(row.id)),
+              hasCheckedRows: rows.length > 0 && rows.every((row) => checkedRowIds.has(row.id)),
               onCheckAll: handleAllRowCheck,
-              isLoading,
               classNames,
               slots
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             table_body_default,
             {
               slots,
@@ -8763,23 +8683,18 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
               size,
               color,
               rowCheckbox,
-              checkedRows,
+              checkedRows: checkedRowIds,
               onCheckRow: handleRowCheck,
               onRowClick: handleRowClick,
               isLoading,
               emptyContent,
-              skeletonRow,
-              className: clsx(
-                "transition-all duration-150 ease-out",
-                isLoading ? "-translate-y-2 opacity-0" : "translate-y-0 opacity-100",
-                classNames
-              )
+              classNames
             }
           )
         ]
       }
     ) }),
-    showPagination && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    showPagination && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       pagination_default,
       {
         variant: variant === "outline" ? "solid" : variant,
@@ -8795,7 +8710,7 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
 });
 Table.displayName = "Table";
 var table_default = Table;
-var tableStyle = (0, import_tailwind_variants18.tv)({
+var tableStyle = (0, import_tailwind_variants17.tv)({
   slots: {
     base: ["flex", "flex-col", "relative", "select-none", "gap-[20px]"],
     table: ["w-full", "h-auto"],
@@ -8833,7 +8748,8 @@ var tableStyle = (0, import_tailwind_variants18.tv)({
       "[&>*]:z-1",
       "[&>*]:relative",
       "align-middle"
-    ]
+    ],
+    tbodyLoading: []
   },
   variants: {
     variant: {
@@ -9034,7 +8950,7 @@ var getCellStyle = (column) => {
 
 // src/components/table/definition-table.tsx
 var import_react18 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var DEFAULT_CELL_CLASSES = "px-[10px] py-[8px] text-md border-r border-neutral-light h-[50px]";
 var FIRST_CELL_WIDTH_CLASS = "w-[120px] font-bold text-md text-body-foreground";
 var renderColGroup = (rows) => {
@@ -9060,9 +8976,9 @@ var renderColGroup = (rows) => {
   });
   const cols = [];
   for (let i = 0; i < maxCols; i++) {
-    cols.push(/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("col", { style: { width: colWidths[i] || "auto" } }, i));
+    cols.push(/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { style: { width: colWidths[i] || "auto" } }, i));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("colgroup", { children: cols });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("colgroup", { children: cols });
 };
 var getHighlightColumnIndex = (rows, key) => {
   if (!key) return null;
@@ -9082,7 +8998,7 @@ var DefinitionTableRow = ({
   rowIndex = 0,
   rowCount = 0,
   highlightColumnIndex
-}) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: clsx("border-neutral-light border-b", className), children: cells.map((cell, colIndex) => {
+}) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { className: clsx("border-neutral-light border-b", className), children: cells.map((cell, colIndex) => {
   const isFirstCell = colIndex === 0;
   const isHighlighted = colIndex === highlightColumnIndex;
   const isFirstRow = rowIndex === 0;
@@ -9114,7 +9030,7 @@ var DefinitionTableRow = ({
   } else {
     cellStyle = { width: "100%" };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "td",
     {
       className: combinedClassName,
@@ -9133,10 +9049,10 @@ var DefinitionTable = (0, import_react18.forwardRef)(
       () => getHighlightColumnIndex(rows, highlightColumnKey),
       [rows, highlightColumnKey]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { ref, className: clsx(slots.base(), classNames == null ? void 0 : classNames.base), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("table", { className: clsx(slots.table(), classNames == null ? void 0 : classNames.table), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ref, className: clsx(slots.base(), classNames == null ? void 0 : classNames.base), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("table", { className: clsx(slots.table(), classNames == null ? void 0 : classNames.table), children: [
         renderColGroup(rows),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           DefinitionTableRow,
           {
             ...row,
@@ -9148,7 +9064,7 @@ var DefinitionTable = (0, import_react18.forwardRef)(
           i
         )) })
       ] }),
-      footer && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: footer })
+      footer && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: footer })
     ] });
   }
 );
@@ -9164,7 +9080,7 @@ var DefinitionTableStyle = tv({
 // src/components/select/select.tsx
 var import_react19 = require("react");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
   var _a, _b;
   const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
@@ -9260,7 +9176,7 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
   const renderOptions = () => {
     if (!isVisible) return null;
     return (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "div",
         {
           ref: optionWrapperRef,
@@ -9278,7 +9194,7 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
           },
           children: options.map((option) => {
             const isSelected = selectedOptions.some((o) => o.value === option.value);
-            return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
               "div",
               {
                 role: "option",
@@ -9288,9 +9204,9 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
                   optionIconPlacement === "end" ? "justify-between" : ""
                 ),
                 children: [
-                  optionIconName && optionIconPlacement === "start" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon_default, { name: optionIconName, size: originalProps.size }),
+                  optionIconName && optionIconPlacement === "start" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon_default, { name: optionIconName, size: originalProps.size }),
                   option.label,
-                  optionIconName && optionIconPlacement === "end" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon_default, { name: optionIconName, size: originalProps.size })
+                  optionIconName && optionIconPlacement === "end" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon_default, { name: optionIconName, size: originalProps.size })
                 ]
               },
               option.value
@@ -9301,8 +9217,8 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
       document.body
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "div",
       {
         className: clsx(
@@ -9310,9 +9226,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_runtime24.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
               "div",
               {
                 "data-expanded": isOpen,
@@ -9323,7 +9239,7 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
                 ref: selectWrapperRef,
                 onClick: handleToggleSelect,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     "input",
                     {
                       ...inputProps,
@@ -9338,8 +9254,8 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
                       size: 0
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("input", { type: "hidden", name: inputProps.name, value: selectedValue }),
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("input", { type: "hidden", name: inputProps.name, value: selectedValue }),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     Icon_default,
                     {
                       name: dropdownIconName,
@@ -9350,8 +9266,8 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
                 ]
               }
             ),
-            helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }), children: helperMessage }),
-            errorMessage && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
+            helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }), children: helperMessage }),
+            errorMessage && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
           ] })
         ]
       }
@@ -9616,15 +9532,15 @@ var select = tv({
 
 // src/components/chip/chip.tsx
 var import_react20 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var Chip = (0, import_react20.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_runtime25.jsx)(Icon_default, { name, fill: true, size: props.size, className: slots.icon() }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  const renderIcon = (name) => name ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon_default, { name, fill: true, size: props.size, className: slots.icon() }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     Component,
     {
       ref,
@@ -9801,12 +9717,12 @@ var chipStyle = tv({
 
 // src/components/radio/radio.tsx
 var import_react21 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var Radio = (0, import_react21.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_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "label",
     {
       className: clsx(
@@ -9814,9 +9730,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_runtime26.jsx)("div", { className: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("input", { ...inputProps, type: "radio", ref }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: slots.outerDot({ class: classNames == null ? void 0 : classNames.outerDot }), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: slots.innerDot({ class: classNames == null ? void 0 : classNames.innerDot }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: slots.labelWrapper({ class: classNames == null ? void 0 : classNames.labelWrapper }), children: children && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children }) })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("input", { ...inputProps, type: "radio", ref }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: slots.outerDot({ class: classNames == null ? void 0 : classNames.outerDot }), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: slots.innerDot({ class: classNames == null ? void 0 : classNames.innerDot }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: slots.labelWrapper({ class: classNames == null ? void 0 : classNames.labelWrapper }), children: children && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children }) })
       ]
     }
   );
@@ -9965,8 +9881,8 @@ var radioStyle = tv({
 
 // src/components/switch/switch.tsx
 var import_react22 = require("react");
-var import_tailwind_variants23 = require("tailwind-variants");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_tailwind_variants22 = require("tailwind-variants");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var Switch = (0, import_react22.forwardRef)((originalProps, ref) => {
   const [rawProps, variantProps] = mapPropsVariants(originalProps, switchStyle.variantKeys);
   const { size, color, disabled, disableAnimation, id, checked, onChange, classNames, ...inputProps } = {
@@ -9974,8 +9890,8 @@ var Switch = (0, import_react22.forwardRef)((originalProps, ref) => {
     ...variantProps
   };
   const slots = (0, import_react22.useMemo)(() => switchStyle({ ...variantProps }), [variantProps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "input",
       {
         ...inputProps,
@@ -9988,12 +9904,12 @@ var Switch = (0, import_react22.forwardRef)((originalProps, ref) => {
         onChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: slots.outerWrapper({ class: classNames == null ? void 0 : classNames.outerWrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: slots.thumb({ class: classNames == null ? void 0 : classNames.thumb }) }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: slots.outerWrapper({ class: classNames == null ? void 0 : classNames.outerWrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: slots.thumb({ class: classNames == null ? void 0 : classNames.thumb }) }) }) })
   ] });
 });
 Switch.displayName = "Switch";
 var switch_default = Switch;
-var switchStyle = (0, import_tailwind_variants23.tv)({
+var switchStyle = (0, import_tailwind_variants22.tv)({
   slots: {
     base: ["group/switch", "relative", "max-w-fit", "inline-flex", "items-center", "justify-start", "cursor-pointer"],
     outerWrapper: [
@@ -10255,7 +10171,7 @@ var useTooltip = ({ placement, offset, targetRect }) => {
 };
 
 // src/components/tooltip/tooltip.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Tooltip = (0, import_react24.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, tooltipStyle.variantKeys);
   const { placement = "top", offset = 5, delay = 100, persistent = false, classNames, noTouchContent } = props;
@@ -10298,8 +10214,8 @@ var Tooltip = (0, import_react24.forwardRef)((originalProps, ref) => {
   (0, import_react24.useEffect)(() => {
     if (persistent) showTooltip();
   }, [persistent, showTooltip]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "div",
       {
         ref: (node) => {
@@ -10316,7 +10232,7 @@ var Tooltip = (0, import_react24.forwardRef)((originalProps, ref) => {
       }
     ),
     targetRect && (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
         "div",
         {
           ref: tooltipRef,
@@ -10329,7 +10245,7 @@ var Tooltip = (0, import_react24.forwardRef)((originalProps, ref) => {
           },
           children: [
             props.content,
-            variantProps.tail && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            variantProps.tail && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "div",
               {
                 className: `absolute h-2 w-2 rotate-45 bg-inherit ${getTailClassName(placement)}`,
@@ -10382,7 +10298,7 @@ var tooltipStyle = tv({
 // src/components/modal/modal.tsx
 var import_react25 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var Modal = (0, import_react25.forwardRef)((props, ref) => {
   const [localProps, variantProps] = mapPropsVariants(props, modal.variantKeys);
   const {
@@ -10413,10 +10329,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_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(backdrop_default, { open: true }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: slots.modalWrapper({ class: classNames == null ? void 0 : classNames.modalWrapper }), children: [
-        showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(backdrop_default, { open: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: slots.modalWrapper({ class: classNames == null ? void 0 : classNames.modalWrapper }), children: [
+        showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           Icon_default,
           {
             size: "xl",
@@ -10425,13 +10341,13 @@ var Modal = (0, import_react25.forwardRef)((props, ref) => {
             onClick: onCancel
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
-          typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: slots.content({ class: classNames == null ? void 0 : classNames.content }), children: content }) : content,
-          (cancelButtonText || confirmButtonText) && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: slots.footerWrapper({ class: classNames == null ? void 0 : classNames.footerWrapper }), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: slots.footer({ class: classNames == null ? void 0 : classNames.footer }), children: [
-              cancelButtonText && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(button_default, { variant: "soft", color: "neutral", full: true, onClick: onCancel, children: cancelButtonText }),
-              confirmButtonText && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(button_default, { color: props.color, full: true, onClick: onConfirm, children: confirmButtonText })
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
+          typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: slots.content({ class: classNames == null ? void 0 : classNames.content }), children: content }) : content,
+          (cancelButtonText || confirmButtonText) && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: slots.footerWrapper({ class: classNames == null ? void 0 : classNames.footerWrapper }), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: slots.footer({ class: classNames == null ? void 0 : classNames.footer }), children: [
+              cancelButtonText && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(button_default, { variant: "soft", color: "neutral", full: true, onClick: onCancel, children: cancelButtonText }),
+              confirmButtonText && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(button_default, { color: props.color, full: true, onClick: onConfirm, children: confirmButtonText })
             ] }),
             extraFooter
           ] })
@@ -10503,7 +10419,7 @@ var modal = tv({
 // src/components/drawer/drawer.tsx
 var import_react26 = require("react");
 var import_react_dom4 = require("react-dom");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var Drawer = (0, import_react26.forwardRef)((props, ref) => {
   const [localProps, variantProps] = mapPropsVariants(props, drawer.variantKeys);
   const { classNames, isOpen, content, isKeyboardDismissDisabled = false, onClose, backdrop = true } = localProps;
@@ -10565,7 +10481,7 @@ var Drawer = (0, import_react26.forwardRef)((props, ref) => {
   };
   if (!shouldRender) return null;
   return (0, import_react_dom4.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       "div",
       {
         ref,
@@ -10580,15 +10496,15 @@ var Drawer = (0, import_react26.forwardRef)((props, ref) => {
         role: "dialog",
         "aria-modal": "true",
         children: [
-          backdrop && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: onClose }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          backdrop && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: onClose }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "div",
             {
               className: slots.drawerWrapper({
                 class: clsx(classNames == null ? void 0 : classNames.drawerWrapper, getAnimationClasses())
               }),
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: content })
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: content })
             }
           )
         ]
@@ -10662,12 +10578,12 @@ var drawer_default = Drawer;
 
 // src/components/list/list.tsx
 var import_react27 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var List = (0, import_react27.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, listStyle.variantKeys);
   const { children, classNames } = props;
   const slots = (0, import_react27.useMemo)(() => listStyle(variantProps), [variantProps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: import_react27.Children.map(children, (child) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: import_react27.Children.map(children, (child) => {
     if (!(0, import_react27.isValidElement)(child)) return child;
     return (0, import_react27.cloneElement)(child, {
       ...variantProps,
@@ -10707,7 +10623,7 @@ var listStyle = tv({
 
 // src/components/list/listItem.tsx
 var import_react28 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var ListItem = (0, import_react28.forwardRef)((props, ref) => {
   const [rawProps, variantProps] = mapPropsVariants(props, listItemStyle.variantKeys);
   const {
@@ -10723,16 +10639,16 @@ var ListItem = (0, import_react28.forwardRef)((props, ref) => {
   const slots = (0, import_react28.useMemo)(() => listItemStyle(variantProps), [variantProps]);
   const iconSize = ["lg", "xl"].includes(size) ? "lg" : "md";
   const avatarSize = iconSize;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), "data-selected": selected, onClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-      avatar && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(avatar_default, { ...avatar, variant: "round", size: avatarSize }),
-      startIconName && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon_default, { name: startIconName, fill: true, size, className: slots.startIcon({ class: classNames == null ? void 0 : classNames.startIcon }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: slots.titleWrapper({ class: classNames == null ? void 0 : classNames.titleWrapper }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
-        subTitle && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: slots.subTitle({ class: classNames == null ? void 0 : classNames.subTitle }), children: subTitle })
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), "data-selected": selected, onClick, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+      avatar && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(avatar_default, { ...avatar, variant: "round", size: avatarSize }),
+      startIconName && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon_default, { name: startIconName, fill: true, size, className: slots.startIcon({ class: classNames == null ? void 0 : classNames.startIcon }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: slots.titleWrapper({ class: classNames == null ? void 0 : classNames.titleWrapper }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
+        subTitle && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: slots.subTitle({ class: classNames == null ? void 0 : classNames.subTitle }), children: subTitle })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon_default, { name: "right-chevron", size: iconSize, className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }) })
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon_default, { name: "right-chevron", size: iconSize, className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }) })
   ] });
 });
 ListItem.displayName = "ListItem";
@@ -10901,7 +10817,7 @@ var listItemStyle = tv({
 
 // src/components/toast/toast.tsx
 var import_react29 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var Toast = (0, import_react29.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, toast.variantKeys);
   const {
@@ -10929,7 +10845,7 @@ var Toast = (0, import_react29.forwardRef)((originalProps, ref) => {
     []
   );
   const animationClass = (placement == null ? void 0 : placement.includes("top")) ? "animate-slideInFromTop" : "animate-slideInFromBottom";
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       ref: toastRef,
@@ -10941,12 +10857,12 @@ var Toast = (0, import_react29.forwardRef)((originalProps, ref) => {
       ),
       style: hasShadow ? { boxShadow: "0px 6px 18px rgba(0, 0, 0, 0.10)" } : {},
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-          showIcon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon_default, { name: originalProps.icon || "info-circle", fill: true, className: "mt-[2px]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
-          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon_default, { name: "close", className: "cursor-pointer", onClick: onClose })
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+          showIcon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon_default, { name: originalProps.icon || "info-circle", fill: true, className: "mt-[2px]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon_default, { name: "close", className: "cursor-pointer", onClick: onClose })
         ] }),
-        content && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: content })
+        content && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: content })
       ]
     }
   );
@@ -11090,7 +11006,7 @@ var getToastPosition = (placement, width, offset) => {
 };
 
 // src/components/toast/use-toast.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var ToastContext = (0, import_react30.createContext)(null);
 var useToast = () => {
   const context = (0, import_react30.useContext)(ToastContext);
@@ -11141,20 +11057,20 @@ 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_runtime34.jsxs)(ToastContext.Provider, { value: contextValue, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ToastContext.Provider, { value: contextValue, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { id: "deepnoid-toast-container", className: "flex flex-col gap-[10px]", style: containerStyle, children: toasts.map((toast2) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(toast_default, { ref: toastRef, onClose: () => removeToast(toast2.id), ...toast2 }, toast2.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { id: "deepnoid-toast-container", className: "flex flex-col gap-[10px]", style: containerStyle, children: toasts.map((toast2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(toast_default, { ref: toastRef, onClose: () => removeToast(toast2.id), ...toast2 }, toast2.id)) })
   ] });
 };
 
 // src/components/picker/day.tsx
 var import_react31 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Day = (0, import_react31.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, dayStyle.variantKeys);
   const { classNames, children, ...divProps } = props;
   const slots = (0, import_react31.useMemo)(() => dayStyle({ ...variantProps }), [variantProps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), ...divProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), ...divProps, children });
 });
 Day.displayName = "Day";
 var day_default = Day;
@@ -11206,7 +11122,7 @@ var formatStringToDate = (date) => {
 };
 
 // src/components/picker/datePicker.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var DatePicker = (0, import_react32.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, datePickerStyle.variantKeys);
   const {
@@ -11345,9 +11261,9 @@ var DatePicker = (0, import_react32.forwardRef)((originalProps, ref) => {
     if (value) setCurrentDate(new Date(value));
   }, [value]);
   const slots = (0, import_react32.useMemo)(() => datePickerStyle({ ...variantProps }), [variantProps]);
-  const endContent = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon_default, { name: "calendar", size, className: "cursor-pointer", fill: true, onClick: handleCalendarIconClick });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ref: inputWrapperRef, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), onClick: handleFocusInput, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  const endContent = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon_default, { name: "calendar", size, className: "cursor-pointer", fill: true, onClick: handleCalendarIconClick });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref: inputWrapperRef, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), onClick: handleFocusInput, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       input_default,
       {
         ...inputProps,
@@ -11379,7 +11295,7 @@ var DatePicker = (0, import_react32.forwardRef)((originalProps, ref) => {
       }
     ) }),
     isPanelOpen && (0, import_react_dom5.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
         "div",
         {
           ref: calendarWrapperRef,
@@ -11387,13 +11303,13 @@ var DatePicker = (0, import_react32.forwardRef)((originalProps, ref) => {
           style: { position: "absolute", top: panelPos.top, left: panelPos.left, zIndex: 1e3 },
           onMouseDown: handleCalendarMouseDown,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: slots.calendarHead({ class: classNames == null ? void 0 : classNames.calendarHead }), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(icon_button_default, { name: "left", variant: "soft", color: "neutral", onClick: handlePrevMonth }),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-xl font-extrabold", children: monthYearFormat(currentDate.getFullYear(), currentDate.getMonth()) }),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(icon_button_default, { name: "right", variant: "soft", color: "neutral", onClick: handleNextMonth })
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: slots.calendarHead({ class: classNames == null ? void 0 : classNames.calendarHead }), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(icon_button_default, { name: "left", variant: "soft", color: "neutral", onClick: handlePrevMonth }),
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-xl font-extrabold", children: monthYearFormat(currentDate.getFullYear(), currentDate.getMonth()) }),
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(icon_button_default, { name: "right", variant: "soft", color: "neutral", onClick: handleNextMonth })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "grid grid-cols-7", children: daysOfWeek.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(day_default, { variant: "text", children: day }, `${day}-${index}`)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "grid grid-cols-7 gap-[5px] text-center", children: getCalendarDates().map((week, weekIndex) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react32.Fragment, { children: week.map((dateObj, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "grid grid-cols-7", children: daysOfWeek.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(day_default, { variant: "text", children: day }, `${day}-${index}`)) }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "grid grid-cols-7 gap-[5px] text-center", children: getCalendarDates().map((week, weekIndex) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react32.Fragment, { children: week.map((dateObj, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               day_default,
               {
                 variant: getDayProps(dateObj),
@@ -11402,8 +11318,8 @@ var DatePicker = (0, import_react32.forwardRef)((originalProps, ref) => {
               },
               index
             )) }, weekIndex)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex justify-between px-[10px]", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex justify-between px-[10px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 text_button_default,
                 {
                   variant: "underline",
@@ -11414,10 +11330,10 @@ var DatePicker = (0, import_react32.forwardRef)((originalProps, ref) => {
                   children: resetTitle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(text_button_default, { variant: "underline", size: "sm", classNames: { base: "font-bold" }, onClick: handleSetToday, children: todayTitle })
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(text_button_default, { variant: "underline", size: "sm", classNames: { base: "font-bold" }, onClick: handleSetToday, children: todayTitle })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex gap-[10px]", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex gap-[10px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 button_default,
                 {
                   variant: "soft",
@@ -11428,7 +11344,7 @@ var DatePicker = (0, import_react32.forwardRef)((originalProps, ref) => {
                   children: cancelTitle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(button_default, { size: "sm", classNames: { base: "flex flex-1" }, onClick: handleConfirmDate, children: confirmTitle })
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(button_default, { size: "sm", classNames: { base: "flex flex-1" }, onClick: handleConfirmDate, children: confirmTitle })
             ] })
           ]
         }
@@ -11479,7 +11395,7 @@ var datePickerStyle = tv({
 // src/components/picker/timePicker.tsx
 var import_react33 = require("react");
 var import_react_dom6 = require("react-dom");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var TimePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, timePickerStyle.variantKeys);
   const {
@@ -11573,12 +11489,12 @@ var TimePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
     setSelectedRange(emptyRange);
     onChangeRange == null ? void 0 : onChangeRange(emptyRange);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ref: inputWrapperRef, className: slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ref: inputWrapperRef, className: slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "input",
             {
               ...inputProps,
@@ -11593,8 +11509,8 @@ var TimePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
               onKeyDown: handleInputKeyDown
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }), children: [
-            displayValue && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }), children: [
+            displayValue && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               Icon_default,
               {
                 name: "close",
@@ -11605,7 +11521,7 @@ var TimePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               Icon_default,
               {
                 name: "clock",
@@ -11618,11 +11534,11 @@ var TimePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
             )
           ] })
         ] }),
-        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
       ] })
     ] }),
     isPanelOpen && (0, import_react_dom6.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "div",
         {
           ref: panelWrapperRef,
@@ -11634,9 +11550,9 @@ var TimePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
             zIndex: 1e3
           },
           onMouseDown: (e) => e.preventDefault(),
-          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "bg-body-background text-neutral-main flex items-center gap-[5px] p-[10px]", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-[5px]", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "bg-body-background text-neutral-main flex items-center gap-[5px] p-[10px]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-[5px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 select_default,
                 {
                   options: renderHourOptions(),
@@ -11647,8 +11563,8 @@ var TimePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
                   classNames: mergedSelectClassNames
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: ":" }),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: ":" }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 select_default,
                 {
                   options: renderMinuteOptions(),
@@ -11660,9 +11576,9 @@ var TimePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: "~" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-[5px]", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: "~" }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-[5px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 select_default,
                 {
                   options: renderHourOptions(),
@@ -11673,8 +11589,8 @@ var TimePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
                   classNames: mergedSelectClassNames
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: ":" }),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: ":" }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 select_default,
                 {
                   options: renderMinuteOptions(),
@@ -11822,7 +11738,7 @@ var timePickerStyle = tv({
 
 // src/components/tree/tree.tsx
 var import_react34 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var TreeNodeItem = (0, import_react34.forwardRef)(
   ({ node, depth, fileIcon, selectedName, classNames, onExpand }, ref) => {
     const [isOpen, setIsOpen] = (0, import_react34.useState)(false);
@@ -11855,7 +11771,7 @@ var TreeNodeItem = (0, import_react34.forwardRef)(
       e.preventDefault();
       (_a = node.onRightClick) == null ? void 0 : _a.call(node, e);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
       "div",
       {
         ref,
@@ -11864,7 +11780,7 @@ var TreeNodeItem = (0, import_react34.forwardRef)(
           slots.gap({ class: classNames == null ? void 0 : classNames.gap })
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
             "div",
             {
               className: clsx(
@@ -11875,7 +11791,7 @@ var TreeNodeItem = (0, import_react34.forwardRef)(
               onClick: handleClick,
               onContextMenu: handleRightClick,
               children: [
-                hasMore && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                hasMore && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                   Icon_default,
                   {
                     name: "right-chevron",
@@ -11890,7 +11806,7 @@ var TreeNodeItem = (0, import_react34.forwardRef)(
               ]
             }
           ),
-          isOpen && hasMore && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: slots.gap({ class: classNames == null ? void 0 : classNames.gap }), children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          isOpen && hasMore && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: slots.gap({ class: classNames == null ? void 0 : classNames.gap }), children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             TreeNodeItem,
             {
               node: child,
@@ -11919,10 +11835,10 @@ var Tree = ({ headerContent, group, groupIcon, fileIcon, selectedName, className
     e.preventDefault();
     (_a = group.onRightClick) == null ? void 0 : _a.call(group, e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    headerContent && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children: headerContent }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    headerContent && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: headerContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
         "div",
         {
           className: clsx(
@@ -11938,7 +11854,7 @@ var Tree = ({ headerContent, group, groupIcon, fileIcon, selectedName, className
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: slots.itemWrapper({ class: classNames == null ? void 0 : classNames.itemWrapper }), children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: slots.itemWrapper({ class: classNames == null ? void 0 : classNames.itemWrapper }), children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         TreeNodeItem,
         {
           node,
@@ -11978,7 +11894,7 @@ var treeStyle = tv({
 
 // src/components/fileUpload/fileUpload.tsx
 var import_react37 = require("react");
-var import_tailwind_variants35 = require("tailwind-variants");
+var import_tailwind_variants34 = require("tailwind-variants");
 
 // src/components/progress/progress.tsx
 var import_react36 = require("react");
@@ -12015,7 +11931,7 @@ function useIsMounted(props = {}) {
 }
 
 // src/components/progress/progress.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var Progress = (originalProps) => {
   const [props, variantProps] = mapPropsVariants(originalProps, progressStyle.variantKeys);
   const { children, classNames, value = 0, minValue = 0, maxValue = 100, ...progressProps } = props;
@@ -12030,7 +11946,7 @@ var Progress = (originalProps) => {
     [selfMounted, isIndeterminate, value, minValue, maxValue]
   );
   const slots = (0, import_react36.useMemo)(() => progressStyle({ ...variantProps }), [variantProps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: slots.track({ class: classNames == null ? void 0 : classNames.track }), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: slots.track({ class: classNames == null ? void 0 : classNames.track }), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "div",
     {
       className: slots.indicator({ class: classNames == null ? void 0 : classNames.indicator }),
@@ -12129,7 +12045,7 @@ var clampPercentage = (value) => {
 };
 
 // src/components/fileUpload/fileUpload.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function FileUpload({
   buttonText,
   maxSizeMB = 10,
@@ -12210,10 +12126,10 @@ function FileUpload({
   (0, import_react37.useEffect)(() => {
     setMessage(errorMessage);
   }, [setMessage, errorMessage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: slots.container({ class: classNames == null ? void 0 : classNames.container }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: slots.inputWrapper(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: slots.container({ class: classNames == null ? void 0 : classNames.container }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: slots.inputWrapper(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           input_default,
           {
             name,
@@ -12225,7 +12141,7 @@ function FileUpload({
             errorMessage: message
           }
         ),
-        file && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        file && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           icon_button_default,
           {
             name: "close",
@@ -12237,16 +12153,16 @@ function FileUpload({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(button_default, { type: "button", variant: "outline", onClick: handleButtonClick, disabled: !!file, children: buttonText }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { ref: fileInputRef, type: "file", hidden: true, accept: accept.join(","), onChange: handleFileChange })
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(button_default, { type: "button", variant: "outline", onClick: handleButtonClick, disabled: !!file, children: buttonText }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { ref: fileInputRef, type: "file", hidden: true, accept: accept.join(","), onChange: handleFileChange })
     ] }),
-    showProgress && file && uploadProgress < 100 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(progress_default, { value: uploadProgress }),
-    !message && helperMessage && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: slots.helperMessage(), children: helperMessage })
+    showProgress && file && uploadProgress < 100 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(progress_default, { value: uploadProgress }),
+    !message && helperMessage && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: slots.helperMessage(), children: helperMessage })
   ] });
 }
 FileUpload.displayName = "FileUpload";
 var fileUpload_default = FileUpload;
-var fileUploadStyle = (0, import_tailwind_variants35.tv)({
+var fileUploadStyle = (0, import_tailwind_variants34.tv)({
   slots: {
     base: ["flex", "flex-col", "gap-[5px]"],
     container: ["flex", "gap-[10px]"],
@@ -12257,6 +12173,75 @@ var fileUploadStyle = (0, import_tailwind_variants35.tv)({
   }
 });
 
+// src/components/skeleton/skeleton.tsx
+var import_tailwind_variants35 = require("tailwind-variants");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+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_runtime40.jsx)(
+    "div",
+    {
+      className: clsx(slots.base({ color, rounded }), className),
+      style: {
+        "--shimmer-duration": speedMap[speed]
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.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_variants35.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/charts/circularProgress.tsx
 var import_recharts = require("recharts");
 var import_react38 = require("react");