@deepnoid/ui 0.1.28 → 0.1.30

package/dist/index.js

@@ -111,6 +111,7 @@ __export(index_exports, {
   Chip: () => chip_default,
   DateTimePicker: () => dateTimePicker_default,
   DefinitionTable: () => definition_table_default,
+  FileUpload: () => fileUpload_default,
   Icon: () => Icon_default,
   IconButton: () => icon_button_default,
   Input: () => input_default,
@@ -121,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,
@@ -5957,9 +5959,10 @@ var Input = (0, import_react9.forwardRef)((originalProps, ref) => {
                   {
                     ...inputProps,
                     ref: ref || inputRef,
+                    readOnly: props.readOnly,
                     className: clsx(
                       slots.input({ class: classNames == null ? void 0 : classNames.input }),
-                      inputProps.readOnly ? "!text-body-foreground placeholder:text-body-foreground" : ""
+                      inputProps.readOnly ? "!text-body-foreground placeholder:!text-body-foreground" : ""
                     ),
                     size: 0
                   }
@@ -6612,8 +6615,8 @@ var textareaStyle = (0, import_tailwind_variants11.tv)({
 });
 
 // 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");
@@ -6822,138 +6825,206 @@ 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 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 getCellStyle = (col) => ({
+    width: col.width ? `${col.width}px` : void 0,
+    minWidth: col.minWidth ? `${col.minWidth}px` : void 0,
+    maxWidth: col.maxWidth ? `${col.maxWidth}px` : void 0,
+    height: col.height ? `${col.height}px` : void 0
+  });
+  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((col, colIdx) => {
+      var _a;
+      const value = row[col.field];
+      const formattedValue = ((_a = col.valueFormatter) == null ? void 0 : _a.call(col, { value, field: col.field })) || value;
+      const content = col.renderCell ? col.renderCell({ id: row.id, field: col.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 }), col.className),
+          style: getCellStyle(col),
+          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);
@@ -6970,8 +7041,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,
@@ -6985,8 +7056,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,
@@ -7001,29 +7072,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 }),
@@ -7033,29 +7104,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,
@@ -7228,14 +7299,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",
@@ -7264,95 +7335,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"],
@@ -7569,21 +7650,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";
@@ -7596,10 +7677,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 {
@@ -7613,14 +7694,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);
@@ -7658,7 +7739,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))) {
@@ -7669,7 +7750,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);
     }
@@ -7682,13 +7763,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(
@@ -7696,9 +7777,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,
@@ -7709,7 +7790,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,
@@ -7723,7 +7804,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",
@@ -7734,14 +7815,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,
@@ -7758,7 +7839,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,
@@ -7927,16 +8008,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,
@@ -8112,13 +8193,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(
@@ -8126,9 +8207,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 }) })
       ]
     }
   );
@@ -8268,21 +8349,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: [
@@ -8387,7 +8468,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
@@ -8510,11 +8591,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;
@@ -8544,29 +8625,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({
@@ -8579,16 +8660,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) => {
@@ -8605,7 +8686,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,
@@ -8618,7 +8699,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)}`,
@@ -8669,10 +8750,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,
@@ -8686,8 +8767,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) => {
@@ -8701,10 +8782,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",
@@ -8713,12 +8794,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 })
           ] })
         ] })
       ] }) })
@@ -8784,15 +8865,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
     });
@@ -8829,9 +8910,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,
@@ -8843,19 +8924,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";
@@ -9023,9 +9104,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,
@@ -9039,9 +9120,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: () => {
@@ -9052,7 +9133,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,
@@ -9064,12 +9145,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 })
       ]
     }
   );
@@ -9174,7 +9255,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) => {
@@ -9213,10 +9294,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");
   }
@@ -9226,10 +9307,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 = {
@@ -9246,11 +9327,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;
@@ -9264,18 +9345,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) => {
@@ -9291,17 +9372,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) {
@@ -9334,7 +9415,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);
@@ -9343,7 +9424,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);
@@ -9368,19 +9449,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();
@@ -9426,17 +9507,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({
@@ -9448,7 +9529,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();
@@ -9470,18 +9551,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);
     }) })
   ] }) });
@@ -9552,22 +9633,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);
@@ -9578,7 +9659,7 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
       scrollToSelectedTime();
     }
   }, [selectedTime, isFocusInput]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     scrollToSelectedTime();
   }, []);
   const parseAndFormatTime = (time) => {
@@ -9615,8 +9696,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,
@@ -9630,7 +9711,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,
@@ -9644,7 +9725,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,
@@ -9663,8 +9744,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,
@@ -9678,7 +9759,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,
@@ -9699,32 +9780,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,
@@ -9755,33 +9836,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",
@@ -9791,18 +9872,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 = () => {
@@ -9817,20 +9898,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,
@@ -9841,7 +9922,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,
@@ -9853,7 +9934,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,
@@ -10003,20 +10084,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)(
-  ({ node, depth, fileIcon, 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)(() => {
+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_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 {
@@ -10030,10 +10111,10 @@ var TreeNodeItem = (0, import_react34.forwardRef)(
       }
       setIsOpen((prev) => !prev);
     }, [isOpen, children, onExpand, node]);
-    const handleClick = () => {
+    const handleClick = (e) => {
       var _a;
       toggleOpen();
-      (_a = node.onClick) == null ? void 0 : _a.call(node);
+      (_a = node.onClick) == null ? void 0 : _a.call(node, e);
     };
     const handleRightClick = (e) => {
       var _a;
@@ -10041,7 +10122,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,
@@ -10051,14 +10132,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: slots.group({ class: classNames == null ? void 0 : classNames.group }),
+              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",
@@ -10069,17 +10154,18 @@ 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,
                 depth: depth + 1,
+                selectedId,
                 classNames,
                 fileIcon,
                 onExpand
@@ -10098,44 +10184,47 @@ var Tree = ({
   group,
   groupIcon,
   fileIcon,
+  selectedId,
   isLoading = false,
   classNames,
   onExpand
 }) => {
-  const slots = (0, import_react34.useMemo)(() => treeStyle(), []);
-  const [isOpen, setIsOpen] = (0, import_react34.useState)(true);
-  const handleToggle = () => {
+  const slots = (0, import_react32.useMemo)(() => treeStyle(), []);
+  const handleClick = (e) => {
     var _a;
-    setIsOpen((prev) => !prev);
-    (_a = group.onClick) == null ? void 0 : _a.call(group);
+    (_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_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)(
+  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: slots.group({ class: classNames == null ? void 0 : classNames.group }),
-          onClick: handleToggle,
+          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.label
+            group.content
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         TreeNodeItem,
         {
           node,
           depth: 1,
           classNames,
           fileIcon,
+          selectedId,
           isLoading,
           onExpand
         },
@@ -10150,18 +10239,133 @@ 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: [
+    node: [
       "flex",
       "items-center",
       "gap-[5px]",
       "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_react33 = require("react");
+var import_tailwind_variants30 = require("tailwind-variants");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function FileUpload({
+  buttonText,
+  maxSizeMB = 10,
+  placeholder,
+  accept = [],
+  acceptErrorMessage = "The file type is not allowed.",
+  sizeErrorMessage = `File is too large.`,
+  onFileUpload,
+  helperMessage,
+  showProgress,
+  classNames
+}) {
+  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;
+    (_a = fileInputRef.current) == null ? void 0 : _a.click();
+  };
+  const validateFile = (file2) => {
+    if (accept.length && !accept.includes(file2.type)) {
+      return acceptErrorMessage;
+    }
+    const sizeMB = file2.size / 1024 / 1024;
+    if (sizeMB > maxSizeMB) {
+      return `${sizeErrorMessage} (${maxSizeMB}MB)`;
+    }
+    return null;
+  };
+  const startUploadSimulation = (file2) => {
+    let progress = 0;
+    setUploadProgress(0);
+    uploadIntervalRef.current = window.setInterval(() => {
+      progress += 10;
+      setUploadProgress(progress);
+      if (progress >= 100) {
+        clearInterval(uploadIntervalRef.current);
+        onFileUpload == null ? void 0 : onFileUpload(file2);
+      }
+    }, 100);
+  };
+  const handleFileChange = (e) => {
+    var _a;
+    const selectedFile = (_a = e.target.files) == null ? void 0 : _a[0];
+    if (!selectedFile) return;
+    const error = validateFile(selectedFile);
+    if (error) {
+      setErrorMessage(error);
+      setFile(null);
+      return;
+    }
+    setFile(selectedFile);
+    setErrorMessage("");
+    startUploadSimulation(selectedFile);
+  };
+  const handleCancelUpload = () => {
+    if (uploadIntervalRef.current) {
+      clearInterval(uploadIntervalRef.current);
+    }
+    setFile(null);
+    setUploadProgress(0);
+    setErrorMessage("");
+  };
+  (0, import_react33.useEffect)(() => {
+    return () => {
+      if (uploadIntervalRef.current) {
+        clearInterval(uploadIntervalRef.current);
+      }
+    };
+  }, []);
+  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",
+            variant: "ghost",
+            color: "neutral",
+            onClick: handleCancelUpload,
+            classNames: { base: slots.cancelButton() },
+            "aria-label": "cancel"
+          }
+        )
+      ] }),
+      /* @__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_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_variants30.tv)({
+  slots: {
+    base: ["flex", "flex-col", "gap-[5px]"],
+    container: ["flex", "items-center", "gap-[10px]"],
+    inputWrapper: ["relative", "flex-1"],
+    cancelButton: ["absolute", "top-1/2", "right-0", "-translate-y-1/2"],
+    progressBarContainer: ["w-full", "h-[5px]", "bg-neutral-light", "rounded-full", "overflow-hidden"],
+    progressBar: ["h-full", "bg-primary-main", "transition-all"],
+    errorMessage: ["text-danger-main", "text-sm"],
+    helperMessage: ["text-neutral-main", "text-sm"]
   }
 });
 // Annotate the CommonJS export names for ESM import in node:
@@ -10175,6 +10379,7 @@ var treeStyle = tv({
   Chip,
   DateTimePicker,
   DefinitionTable,
+  FileUpload,
   Icon,
   IconButton,
   Input,
@@ -10185,6 +10390,7 @@ var treeStyle = tv({
   Radio,
   ScrollArea,
   Select,
+  Skeleton,
   Switch,
   Table,
   Tabs,