@deepnoid/ui 0.1.13 → 0.1.16

package/dist/index.js

@@ -118,6 +118,7 @@ __export(index_exports, {
   Modal: () => modal_default,
   Pagination: () => pagination_default,
   Radio: () => radio_default,
+  ScrollArea: () => scrollArea_default,
   Select: () => select_default,
   Switch: () => switch_default,
   Table: () => table_default,
@@ -4369,6 +4370,59 @@ var getTransColor = (hex, alpha) => {
   return `rgba(${r},${g},${b},${alpha})`;
 };
 
+// ../tailwind-config/src/scrollbar/index.ts
+var scrollbar = {
+  ".scrollbar-hide": {
+    "-ms-overflow-style": "none",
+    // IE/Edge
+    "scrollbar-width": "none",
+    // Firefox
+    "&::-webkit-scrollbar": {
+      display: "none"
+      // Chrome/Safari
+    }
+  },
+  ".scrollbar-sm": {
+    "&::-webkit-scrollbar": {
+      width: "6px",
+      height: "6px"
+    },
+    "&::-webkit-scrollbar-thumb": {
+      backgroundColor: "rgba(0, 0, 0, 0.05)",
+      borderRadius: "100px"
+    },
+    "&::-webkit-scrollbar-track": {
+      backgroundColor: "#F2F3F4"
+    }
+  },
+  ".scrollbar-md": {
+    "&::-webkit-scrollbar": {
+      width: "8px",
+      height: "8px"
+    },
+    "&::-webkit-scrollbar-thumb": {
+      backgroundColor: "rgba(0, 0, 0, 0.05)",
+      borderRadius: "100px"
+    },
+    "&::-webkit-scrollbar-track": {
+      backgroundColor: "#F2F3F4"
+    }
+  },
+  ".scrollbar-lg": {
+    "&::-webkit-scrollbar": {
+      width: "10px",
+      height: "10px"
+    },
+    "&::-webkit-scrollbar-thumb": {
+      backgroundColor: "rgba(0, 0, 0, 0.05)",
+      borderRadius: "100px"
+    },
+    "&::-webkit-scrollbar-track": {
+      backgroundColor: "#F2F3F4"
+    }
+  }
+};
+
 // ../tailwind-config/src/plugin.ts
 var resolveConfig = (themes = {}, defaultTheme, prefix = "dn") => {
   const resolved = {
@@ -4411,13 +4465,7 @@ var resolveConfig = (themes = {}, defaultTheme, prefix = "dn") => {
   }
   resolved.utilities = {
     ...resolved.utilities,
-    ".scrollbar-hide": {
-      "-ms-overflow-style": "none",
-      "scrollbar-width": "none",
-      "&::-webkit-scrollbar": {
-        display: "none"
-      }
-    },
+    ...scrollbar,
     ".input-arrow-hide": {
       "&[type='number']::-webkit-inner-spin-button": {
         "-webkit-appearance": "none",
@@ -5158,7 +5206,7 @@ var import_react5 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var IconButton = (0, import_react5.forwardRef)((props, ref) => {
   const [localProps, variantProps] = mapPropsVariants(props, iconButtonStyle.variantKeys);
-  const { classNames, iconName, disableRipple, isDisabled, isLoading, size, onMouseDown, ...buttonProps } = {
+  const { classNames, name, disableRipple, isDisabled, isLoading, size, onMouseDown, ...buttonProps } = {
     ...localProps,
     ...variantProps
   };
@@ -5190,7 +5238,7 @@ var IconButton = (0, import_react5.forwardRef)((props, ref) => {
       "data-loading": isLoading,
       className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
       children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon_default, { name: "loading", size, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon_default, { name: iconName, size }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon_default, { name, size }),
         !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ripple_default, { ...rippleProps })
       ] })
     }
@@ -5566,7 +5614,7 @@ var textButtonStyle = tv({
   slots: {
     base: ["flex", "items-center", "justify-center", "whitespace-nowrap", "overflow-hidden"],
     content: [],
-    underline: ["underline", "decoration-skip-ink", "underline-offset-[1px]"]
+    underline: ["underline", "decoration-skip-ink", "underline-offset-auto"]
   },
   variants: {
     variant: {
@@ -5657,8 +5705,7 @@ var buttonGroup = tv({
 
 // src/components/breadcrumb/breadcrumb.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var BreadcrumbMenu = (0, import_react8.forwardRef)(({ label, onClick, isCurrent, size }, ref) => {
-  const slots = (0, import_react8.useMemo)(() => breadcrumbStyle({ size }), [size]);
+var BreadcrumbMenu = (0, import_react8.forwardRef)(({ label, onClick, isCurrent, size }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     text_button_default,
     {
@@ -5712,7 +5759,7 @@ var breadcrumb_default = Breadcrumb;
 var breadcrumbStyle = tv({
   slots: {
     base: ["flex", "items-center"],
-    icon: ["fill-primary-main", "text-primary-main", "stroke-primary-main"],
+    icon: ["text-primary-main"],
     separator: ["text-neutral-main"]
   },
   variants: {
@@ -6476,7 +6523,7 @@ var textareaStyle = (0, import_tailwind_variants11.tv)({
 
 // src/components/table/table.tsx
 var import_react17 = require("react");
-var import_tailwind_variants14 = require("tailwind-variants");
+var import_tailwind_variants15 = require("tailwind-variants");
 
 // src/components/checkbox/checkbox.tsx
 var import_react12 = require("react");
@@ -6752,20 +6799,23 @@ var TableBody = ({
   );
   const hasRows = rows.length > 0;
   const colSpan = (columns.length || 1) + (selectableRows ? 1 : 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tbody", { className: slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), children: hasRows ? rows.map((row, rowIndex) => {
-    const isRowChecked = checkedRows.has(rowIndex);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "aria-checked": isRowChecked, children: [
-      columns.map((column) => /* @__PURE__ */ (0, import_react14.createElement)("td", { ...getCellProps(column, row), key: column.field })),
-      selectableRows && /* @__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)
-        }
-      ) }) })
-    ] }, rowIndex);
-  }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("td", { colSpan, className: slots.td({ class: classNames == null ? void 0 : classNames.td }), children: emptyContent || /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-neutral-dark py-4 text-center", children: "No data available" }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("tbody", { className: slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), children: [
+    hasRows && rows.map((row, rowIndex) => {
+      const isRowChecked = checkedRows.has(rowIndex);
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "aria-checked": isRowChecked, children: [
+        columns.map((column) => /* @__PURE__ */ (0, import_react14.createElement)("td", { ...getCellProps(column, row), key: column.field })),
+        selectableRows && /* @__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)
+          }
+        ) }) })
+      ] }, rowIndex);
+    }),
+    !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.td({ class: classNames == null ? void 0 : classNames.td }), children: emptyContent }) })
+  ] });
 };
 var table_body_default = TableBody;
 
@@ -7055,8 +7105,44 @@ var paginationStyle = tv(
   }
 );
 
-// src/components/table/table.tsx
+// src/components/scroll/scrollArea.tsx
+var import_tailwind_variants14 = require("tailwind-variants");
 var import_jsx_runtime18 = 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 });
+};
+ScrollArea.displayName = "ScrollArea";
+var scrollArea_default = ScrollArea;
+var scrollAreaStyle = (0, import_tailwind_variants14.tv)({
+  base: [
+    "h-full",
+    "x-full",
+    "scrollbar-thumb-trans-soft",
+    "hover:scrollbar-thumb-neutral-light",
+    "scrollbar-track-neutral-soft",
+    "scrollbar-button-neutral-main"
+  ],
+  variants: {
+    direction: {
+      x: ["overflow-x-auto", "overflow-y-hidden"],
+      y: ["overflow-y-auto", "overflow-x-hidden"],
+      both: ["overflow-auto"]
+    },
+    size: {
+      sm: ["scrollbar-sm"],
+      // "scrollbar-thin",
+      md: ["scrollbar-md"],
+      lg: ["scrollbar-lg"]
+    }
+  },
+  defaultVariants: {
+    direction: "both",
+    size: "md"
+  }
+});
+
+// src/components/table/table.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, tableStyle.variantKeys);
   const {
@@ -7093,9 +7179,9 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
     setCheckedRows(newChecked);
   };
   const slots = (0, import_react17.useMemo)(() => tableStyle(variantProps), [variantProps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { ref: divRef, "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("table", { className: slots.table({ class: classNames == null ? void 0 : classNames.table }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  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, { 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)(
         table_head_default,
         {
           columns,
@@ -7107,7 +7193,7 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
           slots
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         table_body_default,
         {
           slots,
@@ -7121,8 +7207,8 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
           classNames
         }
       )
-    ] }),
-    showPagination && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    ] }) }),
+    showPagination && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       pagination_default,
       {
         color,
@@ -7136,9 +7222,9 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
 });
 Table.displayName = "Table";
 var table_default = Table;
-var tableStyle = (0, import_tailwind_variants14.tv)({
+var tableStyle = (0, import_tailwind_variants15.tv)({
   slots: {
-    base: ["flex", "flex-col", "relative", "select-none"],
+    base: ["flex", "flex-col", "relative", "select-none", "gap-[20px]"],
     table: ["w-full", "h-auto"],
     thead: ["w-full"],
     tbody: ["w-full"],
@@ -7404,10 +7490,10 @@ var useSelect = ({ options, defaultOption, onChange }) => {
 };
 
 // src/components/select/option.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Option = (props) => {
   const { base, option, icon } = optionStyle(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
       title: props.option.value,
@@ -7417,8 +7503,8 @@ var Option = (props) => {
         props.isSelected && (node == null ? void 0 : node.scrollIntoView());
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: option(), children: props.children }),
-        props.isSelected && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: icon(), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon_default, { name: "check", size: props.size }) })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: option(), children: props.children }),
+        props.isSelected && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: icon(), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon_default, { name: "check", size: props.size }) })
       ]
     }
   );
@@ -7469,7 +7555,7 @@ var optionStyle = tv({
 });
 
 // src/components/select/select.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
   const { classNames, options, defaultOption, onChange, ...inputProps } = props;
@@ -7533,17 +7619,17 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
     }),
     [slots, classNames]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ...getBaseProps(), children: [
-      props.label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { ...getLabelProps(), children: props.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { "data-expanded": !!targetRect, ...getSelectWrapperProps(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("input", { ...getSelectProps() }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon_default, { name: !!targetRect ? "arrow-triangle-up" : "arrow-triangle-down", size: originalProps.size, fill: true })
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ...getBaseProps(), children: [
+      props.label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { ...getLabelProps(), children: props.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { "data-expanded": !!targetRect, ...getSelectWrapperProps(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { ...getSelectProps() }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon_default, { name: !!targetRect ? "arrow-triangle-up" : "arrow-triangle-down", size: originalProps.size, fill: true })
       ] }),
-      props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { ...getErrorMessageProps(), children: props.errorMessage })
+      props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { ...getErrorMessageProps(), children: props.errorMessage })
     ] }),
-    targetRect && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    targetRect && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "div",
         {
           ...getOptionsWrapperProps(),
@@ -7553,7 +7639,7 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
             left: position == null ? void 0 : position.left,
             width: targetRect.width
           },
-          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             option_default,
             {
               variant: originalProps.variant,
@@ -7703,15 +7789,15 @@ var select = tv({
 
 // src/components/chip/chip.tsx
 var import_react20 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var Chip = (0, import_react20.forwardRef)((originalProps, ref) => {
   var _a;
   const [rawProps, variantProps] = mapPropsVariants(originalProps, chipStyle.variantKeys);
   const props = { ...rawProps, ...variantProps };
   const Component = props.onClick ? "button" : "div";
   const slots = (0, import_react20.useMemo)(() => chipStyle({ ...variantProps }), [variantProps]);
-  const renderIcon = (name) => name ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon_default, { name, fill: true, size: props.size, className: slots.icon() }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  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)(
     Component,
     {
       ref,
@@ -7887,12 +7973,12 @@ var chipStyle = tv({
 
 // src/components/radio/radio.tsx
 var import_react21 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var Radio = (0, import_react21.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, radioStyle.variantKeys);
   const { children, classNames, labelPosition = "end", ...inputProps } = props;
   const slots = (0, import_react21.useMemo)(() => radioStyle({ ...variantProps }), [variantProps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "label",
     {
       className: clsx(
@@ -7900,9 +7986,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_runtime22.jsx)("div", { className: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("input", { ...inputProps, type: "radio", ref }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: slots.outerDot({ class: classNames == null ? void 0 : classNames.outerDot }), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: slots.innerDot({ class: classNames == null ? void 0 : classNames.innerDot }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: slots.labelWrapper({ class: classNames == null ? void 0 : classNames.labelWrapper }), children: children && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), 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 }) })
       ]
     }
   );
@@ -8043,20 +8129,20 @@ var radioStyle = tv({
 
 // src/components/switch/switch.tsx
 var import_react22 = require("react");
-var import_tailwind_variants19 = require("tailwind-variants");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_tailwind_variants20 = require("tailwind-variants");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var Switch = (0, import_react22.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_runtime23.jsxs)("label", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("input", { ...inputProps, id, ref, type: "checkbox", disabled: isDisabled, className: "hidden" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: slots.outerWrapper({ class: classNames == null ? void 0 : classNames.outerWrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: slots.thumb({ class: classNames == null ? void 0 : classNames.thumb }) }) }) })
+  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 }) }) }) })
   ] });
 });
 Switch.displayName = "Switch";
 var switch_default = Switch;
-var switchStyle = (0, import_tailwind_variants19.tv)({
+var switchStyle = (0, import_tailwind_variants20.tv)({
   slots: {
     base: ["group/switch", "relative", "max-w-fit", "inline-flex", "items-center", "justify-start", "cursor-pointer"],
     outerWrapper: [
@@ -8318,7 +8404,7 @@ var useTooltip = ({ placement, offset, targetRect }) => {
 };
 
 // src/components/tooltip/tooltip.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var Tooltip = (0, import_react24.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, tooltipStyle.variantKeys);
   const { placement = "top", offset = 5, delay = 100, persistent = false, classNames } = props;
@@ -8361,8 +8447,8 @@ var Tooltip = (0, import_react24.forwardRef)((originalProps, ref) => {
   (0, import_react24.useEffect)(() => {
     if (persistent) showTooltip();
   }, [persistent, showTooltip]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "div",
       {
         ref: (node) => {
@@ -8379,7 +8465,7 @@ var Tooltip = (0, import_react24.forwardRef)((originalProps, ref) => {
       }
     ),
     targetRect && (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
         "div",
         {
           ref: tooltipRef,
@@ -8392,7 +8478,7 @@ var Tooltip = (0, import_react24.forwardRef)((originalProps, ref) => {
           },
           children: [
             props.content,
-            variantProps.tail && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            variantProps.tail && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               "div",
               {
                 className: `absolute h-2 w-2 rotate-45 bg-inherit ${getTailClassName(placement)}`,
@@ -8445,7 +8531,7 @@ var tooltipStyle = tv({
 // src/components/modal/modal.tsx
 var import_react25 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var Modal = (0, import_react25.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, modal.variantKeys);
   const {
@@ -8554,20 +8640,20 @@ var Modal = (0, import_react25.forwardRef)((originalProps, ref) => {
       document.body.classList.remove("overflow-hidden");
     };
   }, [isOpen, isKeyboardDismissDisabled, onCancel]);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: isOpen && (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ...getBackdropProps(), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref, ...getModalWrapperProps(), children: [
-      typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ...getIconProps(), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon_default, { name: icon, className: "h-[80px] w-[80px]" }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ...getIconProps(), children: icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ...getBodyWrapperProps(), children: [
-        showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon_default, { name: "close", ...getCloseIconProps(), onClick: onCancel }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ...getBodyProps(), children: [
-          (title || subTitle) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ...getTitleWrapperProps(), children: [
-            title && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ...getTitleProps(), children: title }),
-            subTitle && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ...getSubTitleProps(), children: subTitle })
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: isOpen && (0, import_react_dom3.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ...getBackdropProps(), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ref, ...getModalWrapperProps(), children: [
+      typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ...getIconProps(), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon_default, { name: icon, className: "h-[80px] w-[80px]" }) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ...getIconProps(), children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ...getBodyWrapperProps(), children: [
+        showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon_default, { name: "close", ...getCloseIconProps(), onClick: onCancel }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ...getBodyProps(), children: [
+          (title || subTitle) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ...getTitleWrapperProps(), children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ...getTitleProps(), children: title }),
+            subTitle && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ...getSubTitleProps(), children: subTitle })
           ] }),
-          content && typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ...getContentProps(), children: content }) : content,
-          (cancelButtonText || confirmButtonText) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ...getFooterWrapperProps(), children: [
-            cancelButtonText && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(button_default, { variant: "outline", color: originalProps.color, fullWidth: true, onClick: onCancel, children: cancelButtonText }),
-            confirmButtonText && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(button_default, { size: "md", color: originalProps.color, fullWidth: true, onClick: onConfirm, children: confirmButtonText })
+          content && typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ...getContentProps(), children: content }) : content,
+          (cancelButtonText || confirmButtonText) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ...getFooterWrapperProps(), children: [
+            cancelButtonText && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(button_default, { variant: "outline", color: originalProps.color, fullWidth: true, onClick: onCancel, children: cancelButtonText }),
+            confirmButtonText && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(button_default, { size: "md", color: originalProps.color, fullWidth: true, onClick: onConfirm, children: confirmButtonText })
           ] })
         ] })
       ] })
@@ -8639,12 +8725,12 @@ var modal = tv({
 
 // src/components/list/list.tsx
 var import_react26 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var List = (0, import_react26.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_runtime26.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: import_react26.Children.map(children, (child) => {
+  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, {
       ...variantProps,
@@ -8684,7 +8770,7 @@ var listStyle = tv({
 
 // src/components/list/listItem.tsx
 var import_react27 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var ListItem = (0, import_react27.forwardRef)((props, ref) => {
   const [rawProps, variantProps] = mapPropsVariants(props, listItemStyle.variantKeys);
   const {
@@ -8700,16 +8786,16 @@ var ListItem = (0, import_react27.forwardRef)((props, ref) => {
   const slots = (0, import_react27.useMemo)(() => listItemStyle(variantProps), [variantProps]);
   const iconSize = ["lg", "xl"].includes(size) ? "lg" : "md";
   const avatarSize = iconSize;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), "data-selected": selected, onClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-      avatar && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(avatar_default, { ...avatar, variant: "round", size: avatarSize }),
-      startIconName && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: startIconName, fill: true, size, className: slots.startIcon({ class: classNames == null ? void 0 : classNames.startIcon }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: slots.titleWrapper({ class: classNames == null ? void 0 : classNames.titleWrapper }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
-        subTitle && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: slots.subTitle({ class: classNames == null ? void 0 : classNames.subTitle }), children: subTitle })
+  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 })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: "right-chevron", size: iconSize, className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }) })
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: "right-chevron", size: iconSize, className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }) })
   ] });
 });
 ListItem.displayName = "ListItem";
@@ -8878,7 +8964,7 @@ var listItemStyle = tv({
 
 // src/components/toast/toast.tsx
 var import_react28 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var Toast = (0, import_react28.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, toast.variantKeys);
   const { width = 300, placement, classNames, showIcon = true, showCloseButton = true, onClose, ...toastProps } = props;
@@ -8907,10 +8993,10 @@ var Toast = (0, import_react28.forwardRef)((originalProps, ref) => {
     }),
     [slots, classNames == null ? void 0 : classNames.base]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref: toastRef, ...getBaseProps(), children: [
-    showIcon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: originalProps.icon || "info-circle", fill: true, className: "mt-[2px]" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1 select-none", children: props.content }),
-    showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: "close", className: "cursor-pointer mt-[2px]", onClick: onClose })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ref: toastRef, ...getBaseProps(), 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: "flex-1 select-none", children: props.content }),
+    showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon_default, { name: "close", className: "cursor-pointer mt-[2px]", onClick: onClose })
   ] });
 });
 Toast.displayName = "Toast";
@@ -9019,7 +9105,7 @@ var getToastPosition = (placement, width, offset) => {
 };
 
 // src/components/toast/use-toast.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var ToastContext = (0, import_react29.createContext)(null);
 var useToast = () => {
   const context = (0, import_react29.useContext)(ToastContext);
@@ -9082,9 +9168,9 @@ var ToastProvider = ({
     window.addEventListener("resize", calculatePosition);
     return () => window.removeEventListener("resize", calculatePosition);
   }, [globalOptions == null ? void 0 : globalOptions.placement, globalOptions == null ? void 0 : globalOptions.width]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(ToastContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(ToastContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { id: "deepnoid-toast-container", className: "flex flex-col gap-[10px]", style: containerStyle, children: toasts.map((toast2) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(toast_default, { ref: toastRef, onClose: () => removeToast(toast2.id), ...toast2 }, toast2.id)) })
+    /* @__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)) })
   ] });
 };
 
@@ -9187,7 +9273,7 @@ var useDatePicker = ({ initialDate, initialTime }) => {
 
 // src/components/dateTimePicker/calendar.tsx
 var import_react31 = __toESM(require("react"));
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var Calendar = (0, import_react31.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, calendarStyle.variantKeys);
   const { selectedDate, classNames, highlightWeekend = true, onChangeDate, ...inputProps } = props;
@@ -9288,18 +9374,18 @@ var Calendar = (0, import_react31.forwardRef)((originalProps, ref) => {
     [slots, classNames, selectedDate, currentDate, highlightWeekend]
   );
   const calendarDates = getCalendarDates();
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ...getBaseProps(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "calendar-header flex justify-between items-center mb-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon_default, { name: "brace-left", size: "md", className: "cursor-pointer", onClick: handlePrevMonth }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-h6 font-semibold", children: currentDate.toLocaleString("default", { year: "numeric", month: "2-digit" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon_default, { name: "brace-right", size: "md", className: "cursor-pointer", onClick: handleNextMonth })
+  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 })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "grid grid-cols-7 gap-2 text-center", children: daysOfWeek.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ...getDateTitleProps(index), children: day }, `${day}-${index}`)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "grid grid-cols-7 gap-[5px] text-center mt-2", children: calendarDates.map((week, weekIndex) => {
+    /* @__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) => {
       const hasCurrentMonthDates = week.some((dateObj) => dateObj.currentMonth);
       if (!hasCurrentMonthDates) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react31.default.Fragment, { children: week.map((dateObj, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ...getDateProps(dateObj), children: dateObj.date }, index);
+      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);
       }) }, weekIndex);
     }) })
   ] }) });
@@ -9371,7 +9457,7 @@ var calendarStyle = tv({
 
 // src/components/dateTimePicker/timePicker.tsx
 var import_react32 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime }) => {
   const TOTAL_HOURS = 12;
   const TOTAL_MINUTES = 60;
@@ -9433,8 +9519,8 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
       onChangeTime(formattedTime);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime31.jsx)(list_default, { ref: periodRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: PERIODS.map((period, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  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)(
       listItem_default,
       {
         color,
@@ -9448,7 +9534,7 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
       },
       `${period}-${index}`
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(list_default, { ref: hourRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: hoursArray.map((hour, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__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)(
       listItem_default,
       {
         color,
@@ -9462,7 +9548,7 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
       },
       `${hour}-${index}`
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(list_default, { ref: minuteRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: minutesArray.map((minute, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__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)(
       listItem_default,
       {
         color,
@@ -9481,7 +9567,7 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
 var timePicker_default = TimePicker;
 
 // src/components/dateTimePicker/dateTimePicker.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, dateTimePickerStyle.variantKeys);
   const {
@@ -9596,10 +9682,10 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
       return import_react33.default.cloneElement(startContent, mergedProps);
     } else {
       const contentProps = getContentProps();
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ...contentProps, children: startContent });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ...contentProps, children: startContent });
     }
   };
-  const renderDateTimePickerIcon = () => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ...getContentProps(), onClick: handleToggleDatePicker, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  const renderDateTimePickerIcon = () => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ...getContentProps(), onClick: handleToggleDatePicker, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     Icon_default,
     {
       name: type === "time" ? "clock" : "calendar",
@@ -9618,9 +9704,9 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
       return import_react33.default.cloneElement(endContent, mergedProps);
     } else if (errorMessage) {
       const iconProps = { ...getContentProps(), className: getContentProps().className };
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ...iconProps, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
+      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 }) });
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, {});
     }
   };
   const renderEndContent = () => {
@@ -9635,20 +9721,20 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
         return renderContentWithIcon();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ...getBaseProps(), children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("label", { ...getLabelProps(), children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ...getInnerWrapperProps(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ...getInputWrapperProps(), children: [
+  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: [
           startContent && renderStartContent(),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("input", { ...getInputProps() }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("input", { ...getInputProps() }),
           renderEndContent()
         ] }),
-        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { ...getErrorMessageProps(), children: errorMessage })
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { ...getErrorMessageProps(), children: errorMessage })
       ] })
     ] }),
-    targetRect && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: (0, import_react_dom4.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    targetRect && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: (0, import_react_dom4.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
         "div",
         {
           ref: datePickerWrapperRef,
@@ -9659,7 +9745,7 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
             zIndex: 1e3
           },
           children: [
-            type === "date" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            type === "date" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               calendar_default,
               {
                 color: originalProps.color,
@@ -9671,7 +9757,7 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
                 }
               }
             ),
-            type === "time" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            type === "time" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               timePicker_default,
               {
                 color: originalProps.color,
@@ -9837,6 +9923,7 @@ var dateTimePickerStyle = tv({
   Modal,
   Pagination,
   Radio,
+  ScrollArea,
   Select,
   Switch,
   Table,