@deepnoid/ui 0.1.56 → 0.1.58

package/dist/index.js

@@ -114,6 +114,8 @@ __export(index_exports, {
   CircularProgress: () => circularProgress_default,
   DateTimePicker: () => dateTimePicker_default,
   DefinitionTable: () => definition_table_default,
+  DefinitionTable2: () => definition_table2_default,
+  Drawer: () => drawer_default,
   FileUpload: () => fileUpload_default,
   Icon: () => Icon_default,
   IconButton: () => icon_button_default,
@@ -5016,9 +5018,7 @@ var buttonStyle = tv({
     variant: {
       solid: "",
       soft: "",
-      outline: {
-        base: "bg-transparent border-transparent"
-      },
+      outline: "",
       ghost: ""
     },
     color: {
@@ -5189,49 +5189,49 @@ var buttonStyle = tv({
       variant: "outline",
       color: "primary",
       class: {
-        base: ["bg-transparent", "border-primary-main", "text-primary-main", "hover:bg-primary-soft"]
+        base: ["bg-body-background", "border-primary-main", "text-primary-main", "hover:bg-primary-soft"]
       }
     },
     {
       variant: "outline",
       color: "secondary",
       class: {
-        base: ["bg-transparent", "border-secondary-main", "text-secondary-main", "hover:bg-secondary-soft"]
+        base: ["bg-body-background", "border-secondary-main", "text-secondary-main", "hover:bg-secondary-soft"]
       }
     },
     {
       variant: "outline",
       color: "neutral",
       class: {
-        base: ["bg-transparent", "border-neutral-main", "text-neutral-main", "hover:bg-neutral-soft"]
+        base: ["bg-body-background", "border-neutral-main", "text-neutral-main", "hover:bg-neutral-soft"]
       }
     },
     {
       variant: "outline",
       color: "info",
       class: {
-        base: ["bg-transparent", "border-info-main", "text-info-main", "hover:bg-info-soft"]
+        base: ["bg-body-background", "border-info-main", "text-info-main", "hover:bg-info-soft"]
       }
     },
     {
       variant: "outline",
       color: "success",
       class: {
-        base: ["bg-transparent", "border-success-main", "text-success-main", "hover:bg-success-soft"]
+        base: ["bg-body-background", "border-success-main", "text-success-main", "hover:bg-success-soft"]
       }
     },
     {
       variant: "outline",
       color: "warning",
       class: {
-        base: ["bg-transparent", "border-warning-main", "text-warning-main", "hover:bg-warning-soft"]
+        base: ["bg-body-background", "border-warning-main", "text-warning-main", "hover:bg-warning-soft"]
       }
     },
     {
       variant: "outline",
       color: "danger",
       class: {
-        base: ["bg-transparent", "border-danger-main", "text-danger-main", "hover:bg-danger-soft"]
+        base: ["bg-body-background", "border-danger-main", "text-danger-main", "hover:bg-danger-soft"]
       }
     },
     // ghost & color
@@ -7836,11 +7836,85 @@ var DefinitionTableStyle = tv({
   }
 });
 
-// src/components/select/select.tsx
+// src/components/table/definition-table2.tsx
 var import_react17 = require("react");
-var import_react_dom = require("react-dom");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var Select = (0, import_react17.forwardRef)((originalProps, ref) => {
+var DEFAULT_CELL_CLASSES = "px-[10px] py-[9.5px] text-md border-r border-neutral-light";
+var FIRST_CELL_WIDTH_CLASS = "w-[120px] font-bold text-md text-body-foreground";
+var renderColGroup = (rows) => {
+  let maxCols = 0;
+  const colWidths = [];
+  rows.forEach((row) => {
+    let currentColCount = 0;
+    row.cells.forEach((cell) => {
+      currentColCount += cell.colSpan || 1;
+    });
+    maxCols = Math.max(maxCols, currentColCount);
+  });
+  colWidths[0] = "120px";
+  rows.forEach((row) => {
+    let colIndex = 0;
+    row.cells.forEach((cell) => {
+      const span = cell.colSpan || 1;
+      if (colIndex > 0 && cell.width && cell.width !== "auto" && colIndex < maxCols) {
+        colWidths[colIndex] = cell.width;
+      }
+      colIndex += span;
+    });
+  });
+  const cols = [];
+  for (let i = 0; i < maxCols; i++) {
+    cols.push(/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("col", { style: colWidths[i] ? { width: colWidths[i] } : { width: "auto" } }, `col-${i}`));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("colgroup", { children: cols });
+};
+var DefinitionTableRow2 = ({ cells, className }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { className: `border-neutral-light min-h-[50px] border-b ${className || ""}`, children: cells.map((cell, colIndex) => {
+  const isFirstCell = colIndex === 0;
+  const combinedClassName = [isFirstCell ? FIRST_CELL_WIDTH_CLASS : "", clsx(DEFAULT_CELL_CLASSES, cell.className)].filter(Boolean).join(" ");
+  let cellStyle;
+  if (isFirstCell) {
+    cellStyle = { width: "120px", minWidth: "120px", maxWidth: "120px" };
+  } else if (cell.width && cell.width !== "auto") {
+    cellStyle = { width: cell.width, minWidth: cell.width, maxWidth: cell.width };
+  } else {
+    cellStyle = { width: "100%" };
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "td",
+    {
+      className: combinedClassName,
+      colSpan: cell.colSpan,
+      rowSpan: cell.rowSpan,
+      style: cellStyle,
+      children: cell.content
+    },
+    colIndex
+  );
+}) });
+var DefinitionTable2 = (0, import_react17.forwardRef)(({ rows = [], footer, classNames }, ref) => {
+  const slots = (0, import_react17.useMemo)(() => DefinitionTableStyle2(), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("table", { className: slots.table({ class: classNames == null ? void 0 : classNames.table }), children: [
+      renderColGroup(rows),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DefinitionTableRow2, { ...row, className: `${row.className || ""} ${i === 0 ? "first-row" : ""}` }, i)) })
+    ] }),
+    footer && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: footer })
+  ] });
+});
+DefinitionTable2.displayName = "DefinitionTable2";
+var definition_table2_default = DefinitionTable2;
+var DefinitionTableStyle2 = tv({
+  slots: {
+    base: ["flex", "flex-col", "gap-[30px]"],
+    table: ["w-full", "table-auto", "border", "border-neutral-light"]
+  }
+});
+
+// src/components/select/select.tsx
+var import_react18 = require("react");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Select = (0, import_react18.forwardRef)((originalProps, ref) => {
   var _a, _b;
   const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
   const {
@@ -7854,14 +7928,14 @@ var Select = (0, import_react17.forwardRef)((originalProps, ref) => {
     multiple,
     ...inputProps
   } = props;
-  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 slots = (0, import_react18.useMemo)(() => select({ ...variantProps }), [variantProps]);
+  const [selectedOptions, setSelectedOptions] = (0, import_react18.useState)(defaultSelectedOptions || []);
+  const [targetRect, setTargetRect] = (0, import_react18.useState)(null);
+  const [optionWrapperHeight, setOptionWrapperHeight] = (0, import_react18.useState)(0);
+  const [isVisible, setIsVisible] = (0, import_react18.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
+  const selectWrapperRef = (0, import_react18.useRef)(null);
+  const optionWrapperRef = (0, import_react18.useRef)(null);
   const handleToggleSelect = () => {
     if (isOpen) {
       setIsOpen(false);
@@ -7899,7 +7973,7 @@ var Select = (0, import_react17.forwardRef)((originalProps, ref) => {
     setSelectedOptions(nextOptions);
     onChange == null ? void 0 : onChange(nextOptions);
   };
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const handleClickOutside = (e) => {
       var _a2;
       if (optionWrapperRef.current && !optionWrapperRef.current.contains(e.target) && !((_a2 = selectWrapperRef.current) == null ? void 0 : _a2.contains(e.target))) {
@@ -7910,7 +7984,7 @@ var Select = (0, import_react17.forwardRef)((originalProps, ref) => {
     window.addEventListener("mousedown", handleClickOutside);
     return () => window.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (optionWrapperRef.current) {
       setOptionWrapperHeight(optionWrapperRef.current.getBoundingClientRect().height);
     }
@@ -7924,26 +7998,26 @@ var Select = (0, import_react17.forwardRef)((originalProps, ref) => {
     onClick
   }) => {
     const slot = select({ ...variantProps, isSelected });
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { title: option.label, onClick, className: clsx(slot.option({ class: classNames == null ? void 0 : classNames.option })), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { title: option.label, onClick, className: clsx(slot.option({ class: classNames == null ? void 0 : classNames.option })), children: [
       option.label,
-      isSelected && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon_default, { name: "check", size: originalProps.size })
+      isSelected && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon_default, { name: "check", size: originalProps.size })
     ] });
   };
   const isControlled = originalProps.value !== void 0;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (isControlled) {
       const valueArray = Array.isArray(originalProps.value) ? originalProps.value : [originalProps.value];
       const matchedOptions = options.filter((opt) => valueArray.includes(opt.value));
       setSelectedOptions(matchedOptions);
     }
   }, [originalProps.value, options]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!isControlled && defaultSelectedOptions) {
       setSelectedOptions(defaultSelectedOptions);
     }
   }, [defaultSelectedOptions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "div",
       {
         className: clsx(
@@ -7951,9 +8025,9 @@ var Select = (0, import_react17.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_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)(
+          label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
               "div",
               {
                 "data-expanded": isOpen,
@@ -7964,7 +8038,7 @@ var Select = (0, import_react17.forwardRef)((originalProps, ref) => {
                 ref: selectWrapperRef,
                 onClick: handleToggleSelect,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     "input",
                     {
                       ...inputProps,
@@ -7979,8 +8053,8 @@ var Select = (0, import_react17.forwardRef)((originalProps, ref) => {
                       size: 0
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("input", { type: "hidden", name: inputProps.name, value: selectedValue }),
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("input", { type: "hidden", name: inputProps.name, value: selectedValue }),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     Icon_default,
                     {
                       name: "brace-up",
@@ -7991,14 +8065,14 @@ var Select = (0, import_react17.forwardRef)((originalProps, ref) => {
                 ]
               }
             ),
-            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 })
+            helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }), children: helperMessage }),
+            errorMessage && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
           ] })
         ]
       }
     ),
     isVisible && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "div",
         {
           ref: optionWrapperRef,
@@ -8015,7 +8089,7 @@ var Select = (0, import_react17.forwardRef)((originalProps, ref) => {
           },
           children: options.map((option) => {
             const isSelected = selectedOptions.some((o) => o.value === option.value);
-            return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               Option,
               {
                 option,
@@ -8187,16 +8261,16 @@ var select = tv({
 });
 
 // src/components/chip/chip.tsx
-var import_react18 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var Chip = (0, import_react18.forwardRef)((originalProps, ref) => {
+var import_react19 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var Chip = (0, import_react19.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_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)(
+  const slots = (0, import_react19.useMemo)(() => chipStyle({ ...variantProps }), [variantProps]);
+  const renderIcon = (name) => name ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon_default, { name, fill: true, size: props.size, className: slots.icon() }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     Component,
     {
       ref,
@@ -8372,13 +8446,13 @@ var chipStyle = tv({
 });
 
 // src/components/radio/radio.tsx
-var import_react19 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var Radio = (0, import_react19.forwardRef)((originalProps, ref) => {
+var import_react20 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Radio = (0, import_react20.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, radioStyle.variantKeys);
   const { children, classNames, labelPosition = "end", ...inputProps } = props;
-  const slots = (0, import_react19.useMemo)(() => radioStyle({ ...variantProps }), [variantProps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  const slots = (0, import_react20.useMemo)(() => radioStyle({ ...variantProps }), [variantProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "label",
     {
       className: clsx(
@@ -8386,9 +8460,9 @@ var Radio = (0, import_react19.forwardRef)((originalProps, ref) => {
         labelPosition === "start" && slots.labelReverse({ class: classNames == null ? void 0 : classNames.labelReverse })
       ),
       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 }) })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("input", { ...inputProps, type: "radio", ref }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: slots.outerDot({ class: classNames == null ? void 0 : classNames.outerDot }), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: slots.innerDot({ class: classNames == null ? void 0 : classNames.innerDot }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: slots.labelWrapper({ class: classNames == null ? void 0 : classNames.labelWrapper }), children: children && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children }) })
       ]
     }
   );
@@ -8528,18 +8602,18 @@ var radioStyle = tv({
 });
 
 // src/components/switch/switch.tsx
-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) => {
+var import_react21 = require("react");
+var import_tailwind_variants22 = require("tailwind-variants");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Switch = (0, import_react21.forwardRef)((originalProps, ref) => {
   const [rawProps, variantProps] = mapPropsVariants(originalProps, switchStyle.variantKeys);
   const { size, color, isDisabled, disableAnimation, id, checked, onChange, classNames, ...inputProps } = {
     ...rawProps,
     ...variantProps
   };
-  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)(
+  const slots = (0, import_react21.useMemo)(() => switchStyle({ ...variantProps }), [variantProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "input",
       {
         ...inputProps,
@@ -8552,12 +8626,12 @@ var Switch = (0, import_react20.forwardRef)((originalProps, ref) => {
         onChange
       }
     ),
-    /* @__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 }) }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: slots.outerWrapper({ class: classNames == null ? void 0 : classNames.outerWrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: slots.thumb({ class: classNames == null ? void 0 : classNames.thumb }) }) }) })
   ] });
 });
 Switch.displayName = "Switch";
 var switch_default = Switch;
-var switchStyle = (0, import_tailwind_variants21.tv)({
+var switchStyle = (0, import_tailwind_variants22.tv)({
   slots: {
     base: ["group/switch", "relative", "max-w-fit", "inline-flex", "items-center", "justify-start", "cursor-pointer"],
     outerWrapper: [
@@ -8662,7 +8736,7 @@ var switchStyle = (0, import_tailwind_variants21.tv)({
 });
 
 // src/components/tooltip/tooltip.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/components/tooltip/tooltip-utils.ts
@@ -8785,11 +8859,11 @@ var getTailStyles = (placement) => {
 };
 
 // src/components/tooltip/useTooltip.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 var useTooltip = ({ placement, offset, targetRect }) => {
-  const [tooltipPosition, setTooltipPosition] = (0, import_react21.useState)({ x: 0, y: 0 });
-  const tooltipRef = (0, import_react21.useRef)(null);
-  (0, import_react21.useEffect)(() => {
+  const [tooltipPosition, setTooltipPosition] = (0, import_react22.useState)({ x: 0, y: 0 });
+  const tooltipRef = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
     if (targetRect && tooltipRef.current) {
       const { width, height } = tooltipRef.current.getBoundingClientRect();
       const scrollX = window.scrollX;
@@ -8819,29 +8893,29 @@ var useTooltip = ({ placement, offset, targetRect }) => {
 };
 
 // src/components/tooltip/tooltip.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Tooltip = (0, import_react22.forwardRef)((originalProps, ref) => {
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Tooltip = (0, import_react23.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_react22.useMemo)(() => tooltipStyle({ ...variantProps }), [variantProps]);
-  const [targetRect, setTargetRect] = (0, import_react22.useState)(null);
+  const slots = (0, import_react23.useMemo)(() => tooltipStyle({ ...variantProps }), [variantProps]);
+  const [targetRect, setTargetRect] = (0, import_react23.useState)(null);
   const { tooltipPosition, tooltipRef } = useTooltip({
     placement,
     offset,
     delay,
     targetRect
   });
-  const childrenRef = (0, import_react22.useRef)(null);
-  const delayTimeoutRef = (0, import_react22.useRef)(null);
-  const getProps = (0, import_react22.useCallback)(
+  const childrenRef = (0, import_react23.useRef)(null);
+  const delayTimeoutRef = (0, import_react23.useRef)(null);
+  const getProps = (0, import_react23.useCallback)(
     (slotKey, classNameKey) => ({
       className: slots[slotKey]({ class: classNames == null ? void 0 : classNames[classNameKey] })
     }),
     [slots, classNames]
   );
-  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)(() => {
+  const getBaseProps = (0, import_react23.useCallback)(() => getProps("base", "base"), [getProps]);
+  const getContentProps = (0, import_react23.useCallback)(() => getProps("content", "content"), [getProps]);
+  const showTooltip = (0, import_react23.useCallback)(() => {
     if (childrenRef.current) {
       const rect = childrenRef.current.getBoundingClientRect();
       setTargetRect({
@@ -8854,16 +8928,16 @@ var Tooltip = (0, import_react22.forwardRef)((originalProps, ref) => {
       });
     }
   }, []);
-  const hideTooltip = (0, import_react22.useCallback)(() => {
+  const hideTooltip = (0, import_react23.useCallback)(() => {
     if (!persistent) {
       delayTimeoutRef.current = window.setTimeout(() => setTargetRect(null), delay);
     }
   }, [persistent, delay]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (persistent) showTooltip();
   }, [persistent, showTooltip]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "div",
       {
         ref: (node) => {
@@ -8880,7 +8954,7 @@ var Tooltip = (0, import_react22.forwardRef)((originalProps, ref) => {
       }
     ),
     targetRect && (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
         "div",
         {
           ref: tooltipRef,
@@ -8893,7 +8967,7 @@ var Tooltip = (0, import_react22.forwardRef)((originalProps, ref) => {
           },
           children: [
             props.content,
-            variantProps.tail && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            variantProps.tail && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "div",
               {
                 className: `absolute h-2 w-2 rotate-45 bg-inherit ${getTailClassName(placement)}`,
@@ -8944,10 +9018,10 @@ var tooltipStyle = tv({
 });
 
 // src/components/modal/modal.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var Modal = (0, import_react23.forwardRef)((props, ref) => {
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Modal = (0, import_react24.forwardRef)((props, ref) => {
   const [localProps, variantProps] = mapPropsVariants(props, modal.variantKeys);
   const {
     classNames,
@@ -8961,8 +9035,8 @@ var Modal = (0, import_react23.forwardRef)((props, ref) => {
     onConfirm,
     onCancel
   } = localProps;
-  const slots = (0, import_react23.useMemo)(() => modal(variantProps), [variantProps]);
-  (0, import_react23.useEffect)(() => {
+  const slots = (0, import_react24.useMemo)(() => modal(variantProps), [variantProps]);
+  (0, import_react24.useEffect)(() => {
     document.body.classList.toggle("overflow-hidden", !!isOpen);
     if (!isOpen || isKeyboardDismissDisabled) return;
     const handleKeyDown = (e) => {
@@ -8976,10 +9050,10 @@ var Modal = (0, import_react23.forwardRef)((props, ref) => {
   }, [isOpen, isKeyboardDismissDisabled, onCancel]);
   if (!isOpen) return null;
   return (0, import_react_dom3.createPortal)(
-    /* @__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)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(backdrop_default, { open: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: slots.modalWrapper({ class: classNames == null ? void 0 : classNames.modalWrapper }), children: [
+        showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           Icon_default,
           {
             size: "xl",
@@ -8988,12 +9062,12 @@ var Modal = (0, import_react23.forwardRef)((props, ref) => {
             onClick: onCancel
           }
         ),
-        /* @__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 })
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
+          typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: slots.content({ class: classNames == null ? void 0 : classNames.content }), children: content }) : content,
+          (cancelButtonText || confirmButtonText) && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: slots.footer({ class: classNames == null ? void 0 : classNames.footer }), children: [
+            cancelButtonText && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(button_default, { variant: "soft", color: "neutral", fullWidth: true, onClick: onCancel, children: cancelButtonText }),
+            confirmButtonText && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(button_default, { color: props.color, fullWidth: true, onClick: onConfirm, children: confirmButtonText })
           ] })
         ] })
       ] }) })
@@ -9059,16 +9133,176 @@ var modal = tv({
   }
 });
 
+// src/components/drawer/drawer.tsx
+var import_react25 = require("react");
+var import_react_dom4 = require("react-dom");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Drawer = (0, import_react25.forwardRef)((props, ref) => {
+  const [localProps, variantProps] = mapPropsVariants(props, drawer.variantKeys);
+  const { classNames, isOpen, content, isKeyboardDismissDisabled = false, onClose, backdrop = true } = localProps;
+  const position = props.position || "right";
+  const [shouldRender, setShouldRender] = (0, import_react25.useState)(isOpen);
+  const [isAnimating, setIsAnimating] = (0, import_react25.useState)(isOpen);
+  const [isContentAnimating, setIsContentAnimating] = (0, import_react25.useState)(isOpen);
+  const slots = (0, import_react25.useMemo)(() => drawer(variantProps), [variantProps]);
+  (0, import_react25.useEffect)(() => {
+    if (isOpen) {
+      setShouldRender(true);
+      requestAnimationFrame(() => {
+        setIsAnimating(true);
+        setTimeout(() => {
+          setIsContentAnimating(true);
+        }, 50);
+      });
+    } else {
+      setIsContentAnimating(false);
+      setIsAnimating(false);
+      const timer = setTimeout(() => {
+        setShouldRender(false);
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen]);
+  (0, import_react25.useEffect)(() => {
+    if (shouldRender) {
+      document.body.classList.add("overflow-hidden");
+    } else {
+      document.body.classList.remove("overflow-hidden");
+    }
+    if (!isOpen || isKeyboardDismissDisabled) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose == null ? void 0 : onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [shouldRender, isOpen, isKeyboardDismissDisabled, onClose]);
+  const getAnimationClasses = () => {
+    const baseTransition = "transform transition-all duration-300 ease-in-out";
+    if (!isContentAnimating) {
+      switch (position) {
+        case "left":
+          return `${baseTransition} -translate-x-full`;
+        case "right":
+          return `${baseTransition} translate-x-full`;
+        case "top":
+          return `${baseTransition} -translate-y-full`;
+        case "bottom":
+          return `${baseTransition} translate-y-full`;
+        default:
+          return `${baseTransition} translate-x-full`;
+      }
+    }
+    return `${baseTransition} translate-x-0 translate-y-0`;
+  };
+  if (!shouldRender) return null;
+  return (0, import_react_dom4.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      "div",
+      {
+        ref,
+        className: slots.base({
+          class: clsx(
+            classNames == null ? void 0 : classNames.base,
+            isAnimating ? "visible opacity-100" : "invisible opacity-0",
+            "transition-all duration-300 ease-in-out"
+          )
+        }),
+        "aria-labelledby": "drawer",
+        role: "dialog",
+        "aria-modal": "true",
+        children: [
+          backdrop && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: onClose }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            "div",
+            {
+              className: slots.drawerWrapper({
+                class: clsx(classNames == null ? void 0 : classNames.drawerWrapper, getAnimationClasses())
+              }),
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: content })
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+});
+Drawer.displayName = "Drawer";
+var drawer = tv({
+  slots: {
+    base: ["fixed", "inset-0", "z-50", "flex", "transition-all", "duration-300", "ease-in-out"],
+    drawerWrapper: ["relative", "flex", "flex-col", "bg-white", "shadow-xl", "overflow-hidden", "z-10"],
+    wrapper: ["flex", "flex-col", "h-full", "overflow-y-auto"]
+  },
+  variants: {
+    position: {
+      left: {
+        base: "justify-start",
+        drawerWrapper: "h-full border-r"
+      },
+      right: {
+        base: "justify-end",
+        drawerWrapper: "h-full border-l"
+      },
+      top: {
+        base: "items-start",
+        drawerWrapper: "w-full border-b"
+      },
+      bottom: {
+        base: "items-end",
+        drawerWrapper: "w-full border-t"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      position: ["top", "bottom"],
+      size: "sm",
+      class: {
+        drawerWrapper: "max-h-[25vh] max-w-none w-full"
+      }
+    },
+    {
+      position: ["top", "bottom"],
+      size: "md",
+      class: {
+        drawerWrapper: "max-h-[40vh] max-w-none w-full"
+      }
+    },
+    {
+      position: ["top", "bottom"],
+      size: "lg",
+      class: {
+        drawerWrapper: "max-h-[60vh] max-w-none w-full"
+      }
+    },
+    {
+      position: ["top", "bottom"],
+      size: "xl",
+      class: {
+        drawerWrapper: "max-h-[80vh] max-w-none w-full"
+      }
+    }
+  ],
+  defaultVariants: {
+    position: "right"
+  }
+});
+var drawer_default = Drawer;
+
 // src/components/list/list.tsx
-var import_react24 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var List = (0, import_react24.forwardRef)((originalProps, ref) => {
+var import_react26 = require("react");
+var import_jsx_runtime30 = 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_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, {
+  const slots = (0, import_react26.useMemo)(() => listStyle(variantProps), [variantProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.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,
       ...child.props
     });
@@ -9105,9 +9339,9 @@ var listStyle = tv({
 });
 
 // src/components/list/listItem.tsx
-var import_react25 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var ListItem = (0, import_react25.forwardRef)((props, ref) => {
+var import_react27 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var ListItem = (0, import_react27.forwardRef)((props, ref) => {
   const [rawProps, variantProps] = mapPropsVariants(props, listItemStyle.variantKeys);
   const {
     title,
@@ -9119,19 +9353,19 @@ var ListItem = (0, import_react25.forwardRef)((props, ref) => {
     classNames,
     onClick
   } = { ...rawProps, ...variantProps };
-  const slots = (0, import_react25.useMemo)(() => listItemStyle(variantProps), [variantProps]);
+  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_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 })
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), "data-selected": selected, onClick, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+      avatar && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(avatar_default, { ...avatar, variant: "round", size: avatarSize }),
+      startIconName && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon_default, { name: startIconName, fill: true, size, className: slots.startIcon({ class: classNames == null ? void 0 : classNames.startIcon }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: slots.titleWrapper({ class: classNames == null ? void 0 : classNames.titleWrapper }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
+        subTitle && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: slots.subTitle({ class: classNames == null ? void 0 : classNames.subTitle }), children: subTitle })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon_default, { name: "right-chevron", size: iconSize, className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }) })
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon_default, { name: "right-chevron", size: iconSize, className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }) })
   ] });
 });
 ListItem.displayName = "ListItem";
@@ -9299,9 +9533,9 @@ var listItemStyle = tv({
 });
 
 // src/components/toast/toast.tsx
-var import_react26 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var Toast = (0, import_react26.forwardRef)((originalProps, ref) => {
+var import_react28 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var Toast = (0, import_react28.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, toast.variantKeys);
   const {
     title,
@@ -9315,9 +9549,9 @@ var Toast = (0, import_react26.forwardRef)((originalProps, ref) => {
     disableAnimation,
     onClose
   } = { ...props, ...variantProps };
-  const slots = (0, import_react26.useMemo)(() => toast({ ...variantProps }), [variantProps]);
-  const toastRef = (0, import_react26.useRef)(null);
-  (0, import_react26.useImperativeHandle)(
+  const slots = (0, import_react28.useMemo)(() => toast({ ...variantProps }), [variantProps]);
+  const toastRef = (0, import_react28.useRef)(null);
+  (0, import_react28.useImperativeHandle)(
     ref,
     () => ({
       getWidth: () => {
@@ -9328,7 +9562,7 @@ var Toast = (0, import_react26.forwardRef)((originalProps, ref) => {
     []
   );
   const animationClass = (placement == null ? void 0 : placement.includes("top")) ? "animate-slideInFromTop" : "animate-slideInFromBottom";
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       ref: toastRef,
@@ -9340,12 +9574,12 @@ var Toast = (0, import_react26.forwardRef)((originalProps, ref) => {
       ),
       style: hasShadow ? { boxShadow: "0px 6px 18px rgba(0, 0, 0, 0.10)" } : {},
       children: [
-        /* @__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 })
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+          showIcon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon_default, { name: originalProps.icon || "info-circle", fill: true, className: "mt-[2px]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon_default, { name: "close", className: "cursor-pointer", onClick: onClose })
         ] }),
-        content && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: content })
+        content && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: content })
       ]
     }
   );
@@ -9450,7 +9684,7 @@ var toast = tv({
 });
 
 // src/components/toast/use-toast.tsx
-var import_react27 = require("react");
+var import_react29 = require("react");
 
 // src/components/toast/toast-utils.ts
 var getToastPosition = (placement, width, offset) => {
@@ -9489,10 +9723,10 @@ var getToastPosition = (placement, width, offset) => {
 };
 
 // src/components/toast/use-toast.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var ToastContext = (0, import_react27.createContext)(null);
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var ToastContext = (0, import_react29.createContext)(null);
 var useToast = () => {
-  const context = (0, import_react27.useContext)(ToastContext);
+  const context = (0, import_react29.useContext)(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within a ToastProvider");
   }
@@ -9502,10 +9736,10 @@ var ToastProvider = ({
   globalOptions,
   children
 }) => {
-  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)(
+  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)(
     (title, options = {}) => {
       const id = Date.now() + Math.floor(Math.random() * 1e5);
       const newToast = {
@@ -9522,11 +9756,11 @@ var ToastProvider = ({
     },
     [globalOptions]
   );
-  const removeToast = (0, import_react27.useCallback)((id) => {
+  const removeToast = (0, import_react29.useCallback)((id) => {
     setToasts((prevToasts) => prevToasts.filter((toast2) => toast2.id !== id));
   }, []);
   const contextValue = addToast;
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.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;
@@ -9540,18 +9774,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_runtime31.jsxs)(ToastContext.Provider, { value: contextValue, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ToastContext.Provider, { value: contextValue, children: [
     children,
-    /* @__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)) })
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { id: "deepnoid-toast-container", className: "flex flex-col gap-[10px]", style: containerStyle, children: toasts.map((toast2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(toast_default, { ref: toastRef, onClose: () => removeToast(toast2.id), ...toast2 }, toast2.id)) })
   ] });
 };
 
 // src/components/dateTimePicker/dateTimePicker.tsx
-var import_react31 = __toESM(require("react"));
-var import_react_dom4 = require("react-dom");
+var import_react33 = __toESM(require("react"));
+var import_react_dom5 = require("react-dom");
 
 // src/components/dateTimePicker/useDateTimePicker.tsx
-var import_react28 = require("react");
+var import_react30 = require("react");
 
 // src/components/dateTimePicker/util.ts
 var formatDateToString = (date) => {
@@ -9567,17 +9801,17 @@ var formatStringToDate = (date) => {
 
 // src/components/dateTimePicker/useDateTimePicker.tsx
 var useDatePicker = ({ initialDate, initialTime }) => {
-  const [selectedDate, setSelectedDate] = (0, import_react28.useState)(
+  const [selectedDate, setSelectedDate] = (0, import_react30.useState)(
     initialDate ? formatDateToString(initialDate) : ""
   );
-  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 [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 DATE_PICKER_GAP = 4;
   const calculatePositionWithScroll = (targetRect2) => {
     if (targetRect2 && popupWidth && popupHeight) {
@@ -9610,7 +9844,7 @@ var useDatePicker = ({ initialDate, initialTime }) => {
   const handleBlueInput = () => {
     setIsFocusInput(false);
   };
-  (0, import_react28.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     const onClickOutside = (e) => {
       if (datePickerRef.current && !datePickerRef.current.contains(e.target) && datePickerWrapperRef.current && !datePickerWrapperRef.current.contains(e.target)) {
         setTargetRect(null);
@@ -9619,7 +9853,7 @@ var useDatePicker = ({ initialDate, initialTime }) => {
     window.addEventListener("mousedown", onClickOutside);
     return () => window.removeEventListener("mousedown", onClickOutside);
   }, []);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (datePickerWrapperRef.current) {
       setPopupHeight(datePickerWrapperRef.current.getBoundingClientRect().height);
       setPopupWidth(datePickerWrapperRef.current.getBoundingClientRect().width);
@@ -9644,19 +9878,19 @@ var useDatePicker = ({ initialDate, initialTime }) => {
 };
 
 // src/components/dateTimePicker/calendar.tsx
-var import_react29 = __toESM(require("react"));
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var Calendar = (0, import_react29.forwardRef)((originalProps, ref) => {
+var import_react31 = __toESM(require("react"));
+var import_jsx_runtime34 = 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;
-  const [currentDate, setCurrentDate] = (0, import_react29.useState)(selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date());
+  const [currentDate, setCurrentDate] = (0, import_react31.useState)(selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date());
   const daysOfWeek = ["S", "M", "T", "W", "T", "F", "S"];
-  (0, import_react29.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (selectedDate) {
       setCurrentDate(new Date(selectedDate));
     }
   }, [selectedDate]);
-  const getCalendarDates = (0, import_react29.useCallback)(() => {
+  const getCalendarDates = (0, import_react31.useCallback)(() => {
     const year = currentDate.getFullYear();
     const month = currentDate.getMonth();
     const firstDayOfMonth = new Date(year, month, 1).getDay();
@@ -9702,17 +9936,17 @@ var Calendar = (0, import_react29.forwardRef)((originalProps, ref) => {
       onChangeDate(formatted);
     }
   };
-  (0, import_react29.useImperativeHandle)(ref, () => ({
+  (0, import_react31.useImperativeHandle)(ref, () => ({
     getSelectedDate: () => selectedDate
   }));
-  const slots = (0, import_react29.useMemo)(() => calendarStyle({ ...variantProps }), [variantProps]);
-  const getBaseProps = (0, import_react29.useCallback)(
+  const slots = (0, import_react31.useMemo)(() => calendarStyle({ ...variantProps }), [variantProps]);
+  const getBaseProps = (0, import_react31.useCallback)(
     () => ({
       className: `${slots.base({ class: classNames == null ? void 0 : classNames.base })}`
     }),
     [slots, classNames]
   );
-  const getDateTitleProps = (0, import_react29.useCallback)(
+  const getDateTitleProps = (0, import_react31.useCallback)(
     (index) => {
       return {
         className: `${slots.dateTitle({
@@ -9724,7 +9958,7 @@ var Calendar = (0, import_react29.forwardRef)((originalProps, ref) => {
     },
     [slots, classNames, highlightWeekend]
   );
-  const getDateProps = (0, import_react29.useCallback)(
+  const getDateProps = (0, import_react31.useCallback)(
     (dateObj) => {
       const today = /* @__PURE__ */ new Date();
       const isToday = today.getDate() === dateObj.date && today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear();
@@ -9746,18 +9980,18 @@ var Calendar = (0, import_react29.forwardRef)((originalProps, ref) => {
     [slots, classNames, selectedDate, currentDate, highlightWeekend]
   );
   const calendarDates = getCalendarDates();
-  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 })
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ...getBaseProps(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "calendar-header flex justify-between items-center mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon_default, { name: "brace-left", size: "md", className: "cursor-pointer", onClick: handlePrevMonth }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-h6 font-semibold", children: currentDate.toLocaleString("default", { year: "numeric", month: "2-digit" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon_default, { name: "brace-right", size: "md", className: "cursor-pointer", onClick: handleNextMonth })
     ] }),
-    /* @__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) => {
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "grid grid-cols-7 gap-2 text-center", children: daysOfWeek.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ...getDateTitleProps(index), children: day }, `${day}-${index}`)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.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_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);
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react31.default.Fragment, { children: week.map((dateObj, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ...getDateProps(dateObj), children: dateObj.date }, index);
       }) }, weekIndex);
     }) })
   ] }) });
@@ -9828,22 +10062,22 @@ var calendarStyle = tv({
 });
 
 // src/components/dateTimePicker/timePicker.tsx
-var import_react30 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react32 = require("react");
+var import_jsx_runtime35 = 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_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 [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 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_react30.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (selectedTime) {
       const { formattedHour, minute, period } = parseAndFormatTime(selectedTime);
       setSelectedHour(formattedHour);
@@ -9854,7 +10088,7 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
       scrollToSelectedTime();
     }
   }, [selectedTime, isFocusInput]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     scrollToSelectedTime();
   }, []);
   const parseAndFormatTime = (time) => {
@@ -9891,8 +10125,8 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
       onChangeTime(formattedTime);
     }
   };
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime35.jsx)(list_default, { ref: periodRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: PERIODS.map((period, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       listItem_default,
       {
         color,
@@ -9906,7 +10140,7 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
       },
       `${period}-${index}`
     )) }),
-    /* @__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)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(list_default, { ref: hourRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: hoursArray.map((hour, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       listItem_default,
       {
         color,
@@ -9920,7 +10154,7 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
       },
       `${hour}-${index}`
     )) }),
-    /* @__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)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(list_default, { ref: minuteRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: minutesArray.map((minute, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       listItem_default,
       {
         color,
@@ -9939,8 +10173,8 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
 var timePicker_default = TimePicker;
 
 // src/components/dateTimePicker/dateTimePicker.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var DatePicker = (0, import_react31.forwardRef)((originalProps, ref) => {
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, dateTimePickerStyle.variantKeys);
   const {
     classNames,
@@ -9954,7 +10188,7 @@ var DatePicker = (0, import_react31.forwardRef)((originalProps, ref) => {
     onChangeTime,
     ...inputProps
   } = props;
-  const slots = (0, import_react31.useMemo)(() => dateTimePickerStyle({ ...variantProps }), [variantProps]);
+  const slots = (0, import_react33.useMemo)(() => dateTimePickerStyle({ ...variantProps }), [variantProps]);
   const {
     selectedDate,
     selectedTime,
@@ -9975,32 +10209,32 @@ var DatePicker = (0, import_react31.forwardRef)((originalProps, ref) => {
     initialTime: typeof value === "string" ? value : void 0
   });
   const position = targetRect ? calculatePositionWithScroll(targetRect) : null;
-  const getBaseProps = (0, import_react31.useCallback)(
+  const getBaseProps = (0, import_react33.useCallback)(
     () => ({
       className: slots.base({ class: classNames == null ? void 0 : classNames.base })
     }),
     [slots, classNames]
   );
-  const getLabelProps = (0, import_react31.useCallback)(
+  const getLabelProps = (0, import_react33.useCallback)(
     () => ({
       className: slots.label({ class: classNames == null ? void 0 : classNames.label })
     }),
     [slots, classNames]
   );
-  const getInnerWrapperProps = (0, import_react31.useCallback)(
+  const getInnerWrapperProps = (0, import_react33.useCallback)(
     () => ({
       className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper })
     }),
     [slots, classNames]
   );
-  const getInputWrapperProps = (0, import_react31.useCallback)(
+  const getInputWrapperProps = (0, import_react33.useCallback)(
     () => ({
       className: slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }),
       ref: datePickerRef
     }),
     [slots, classNames]
   );
-  const getInputProps = (0, import_react31.useCallback)(
+  const getInputProps = (0, import_react33.useCallback)(
     () => ({
       ...inputProps,
       ref: ref || dateInputRef,
@@ -10031,33 +10265,33 @@ var DatePicker = (0, import_react31.forwardRef)((originalProps, ref) => {
     }),
     [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate, selectedTime, type, value]
   );
-  const getContentProps = (0, import_react31.useCallback)(
+  const getContentProps = (0, import_react33.useCallback)(
     () => ({
       className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
       size: originalProps.size
     }),
     [slots, classNames, originalProps.size]
   );
-  const getErrorMessageProps = (0, import_react31.useCallback)(
+  const getErrorMessageProps = (0, import_react33.useCallback)(
     () => ({
       className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
     }),
     [slots, classNames]
   );
   const renderStartContent = () => {
-    if (import_react31.default.isValidElement(startContent)) {
+    if (import_react33.default.isValidElement(startContent)) {
       const existingProps = startContent.props;
       const mergedProps = {
         ...getContentProps(),
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
-      return import_react31.default.cloneElement(startContent, mergedProps);
+      return import_react33.default.cloneElement(startContent, mergedProps);
     } else {
       const contentProps = getContentProps();
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ...contentProps, children: startContent });
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ...contentProps, children: startContent });
     }
   };
-  const renderDateTimePickerIcon = () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ...getContentProps(), onClick: handleToggleDatePicker, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  const renderDateTimePickerIcon = () => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ...getContentProps(), onClick: handleToggleDatePicker, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     Icon_default,
     {
       name: type === "time" ? "clock" : "calendar",
@@ -10067,18 +10301,18 @@ var DatePicker = (0, import_react31.forwardRef)((originalProps, ref) => {
     }
   ) });
   const renderContentWithIcon = () => {
-    if (import_react31.default.isValidElement(endContent)) {
+    if (import_react33.default.isValidElement(endContent)) {
       const existingProps = endContent.props;
       const mergedProps = {
         ...getContentProps(),
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
-      return import_react31.default.cloneElement(endContent, mergedProps);
+      return import_react33.default.cloneElement(endContent, mergedProps);
     } else if (errorMessage) {
       const iconProps = { ...getContentProps(), className: getContentProps().className };
-      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 }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ...iconProps, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, {});
     }
   };
   const renderEndContent = () => {
@@ -10093,20 +10327,20 @@ var DatePicker = (0, import_react31.forwardRef)((originalProps, ref) => {
         return renderContentWithIcon();
     }
   };
-  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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ...getBaseProps(), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("label", { ...getLabelProps(), children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ...getInnerWrapperProps(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ...getInputWrapperProps(), children: [
           startContent && renderStartContent(),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("input", { ...getInputProps() }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("input", { ...getInputProps() }),
           renderEndContent()
         ] }),
-        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { ...getErrorMessageProps(), children: errorMessage })
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { ...getErrorMessageProps(), children: errorMessage })
       ] })
     ] }),
-    targetRect && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: (0, import_react_dom4.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    targetRect && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: (0, import_react_dom5.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
         "div",
         {
           ref: datePickerWrapperRef,
@@ -10117,7 +10351,7 @@ var DatePicker = (0, import_react31.forwardRef)((originalProps, ref) => {
             zIndex: 1e3
           },
           children: [
-            type === "date" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            type === "date" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               calendar_default,
               {
                 color: originalProps.color,
@@ -10129,7 +10363,7 @@ var DatePicker = (0, import_react31.forwardRef)((originalProps, ref) => {
                 }
               }
             ),
-            type === "time" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            type === "time" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               timePicker_default,
               {
                 color: originalProps.color,
@@ -10279,20 +10513,20 @@ var dateTimePickerStyle = tv({
 });
 
 // src/components/tree/tree.tsx
-var import_react32 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var TreeNodeItem = (0, import_react32.forwardRef)(
+var import_react34 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var TreeNodeItem = (0, import_react34.forwardRef)(
   ({ node, depth, fileIcon, selectedId, 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)(() => {
+    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)(() => {
       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_react32.useCallback)(async () => {
+    const toggleOpen = (0, import_react34.useCallback)(async () => {
       if (!isOpen && !children && onExpand && !node.isLeaf) {
         setIsLoadingChildren(true);
         try {
@@ -10316,7 +10550,7 @@ var TreeNodeItem = (0, import_react32.forwardRef)(
       e.preventDefault();
       (_a = node.onRightClick) == null ? void 0 : _a.call(node, e);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
       "div",
       {
         ref,
@@ -10325,7 +10559,7 @@ var TreeNodeItem = (0, import_react32.forwardRef)(
           slots.gap({ class: classNames == null ? void 0 : classNames.gap })
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
             "div",
             {
               className: clsx(
@@ -10336,7 +10570,7 @@ var TreeNodeItem = (0, import_react32.forwardRef)(
               onClick: handleClick,
               onContextMenu: handleRightClick,
               children: [
-                hasMore && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                hasMore && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                   Icon_default,
                   {
                     name: "right-chevron",
@@ -10351,9 +10585,9 @@ var TreeNodeItem = (0, import_react32.forwardRef)(
               ]
             }
           ),
-          isOpen && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: slots.gap({ class: classNames == null ? void 0 : classNames.gap }), 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)(
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: slots.gap({ class: classNames == null ? void 0 : classNames.gap }), children: [
+            isLoadingChildren && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "text-neutral py-1 text-sm", children: "loading..." }),
+            children == null ? void 0 : children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               TreeNodeItem,
               {
                 node: child,
@@ -10373,7 +10607,7 @@ var TreeNodeItem = (0, import_react32.forwardRef)(
 );
 TreeNodeItem.displayName = "TreeNodeItem";
 var Tree = ({ headerContent, group, groupIcon, fileIcon, selectedId, classNames, onExpand }) => {
-  const slots = (0, import_react32.useMemo)(() => treeStyle(), []);
+  const slots = (0, import_react34.useMemo)(() => treeStyle(), []);
   const handleClick = (e) => {
     var _a;
     (_a = group.onClick) == null ? void 0 : _a.call(group, e);
@@ -10383,10 +10617,10 @@ var Tree = ({ headerContent, group, groupIcon, fileIcon, selectedId, classNames,
     e.preventDefault();
     (_a = group.onRightClick) == null ? void 0 : _a.call(group, e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    headerContent && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: headerContent }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    headerContent && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: headerContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
         "div",
         {
           className: clsx(
@@ -10401,7 +10635,7 @@ var Tree = ({ headerContent, group, groupIcon, fileIcon, selectedId, classNames,
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: slots.gap({ class: classNames == null ? void 0 : classNames.gap }), children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: slots.gap({ class: classNames == null ? void 0 : classNames.gap }), children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         TreeNodeItem,
         {
           node,
@@ -10438,9 +10672,9 @@ var treeStyle = tv({
 });
 
 // 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");
+var import_react35 = require("react");
+var import_tailwind_variants32 = require("tailwind-variants");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function FileUpload({
   buttonText,
   maxSizeMB = 10,
@@ -10454,11 +10688,11 @@ function FileUpload({
   name,
   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 fileInputRef = (0, import_react35.useRef)(null);
+  const uploadIntervalRef = (0, import_react35.useRef)(null);
+  const [file, setFile] = (0, import_react35.useState)(null);
+  const [uploadProgress, setUploadProgress] = (0, import_react35.useState)(0);
+  const [errorMessage, setErrorMessage] = (0, import_react35.useState)("");
   const slots = fileUploadStyle();
   const handleButtonClick = () => {
     var _a;
@@ -10508,18 +10742,18 @@ function FileUpload({
     setUploadProgress(0);
     setErrorMessage("");
   };
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.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, readOnly: true, variant: "outline", full: true, placeholder, defaultValue: file == null ? void 0 : file.name }),
-        file && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: slots.container({ class: classNames == null ? void 0 : classNames.container }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: slots.inputWrapper(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(input_default, { name, readOnly: true, variant: "outline", full: true, placeholder, defaultValue: file == null ? void 0 : file.name }),
+        file && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           icon_button_default,
           {
             name: "close",
@@ -10531,17 +10765,17 @@ function FileUpload({
           }
         )
       ] }),
-      /* @__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 })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(button_default, { type: "button", variant: "outline", onClick: handleButtonClick, children: buttonText }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.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 })
+    showProgress && file && uploadProgress < 100 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: slots.progressBarContainer(), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: slots.progressBar(), style: { width: `${uploadProgress}%` } }) }),
+    !errorMessage && helperMessage && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: slots.helperMessage(), children: helperMessage }),
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: slots.errorMessage(), children: errorMessage })
   ] });
 }
 FileUpload.displayName = "FileUpload";
 var fileUpload_default = FileUpload;
-var fileUploadStyle = (0, import_tailwind_variants30.tv)({
+var fileUploadStyle = (0, import_tailwind_variants32.tv)({
   slots: {
     base: ["flex", "flex-col", "gap-[5px]"],
     container: ["flex", "items-center", "gap-[10px]"],
@@ -10556,12 +10790,12 @@ var fileUploadStyle = (0, import_tailwind_variants30.tv)({
 
 // src/components/charts/circularProgress.tsx
 var import_recharts = require("recharts");
-var import_react34 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var CircularProgress = (0, import_react34.forwardRef)((originalProps, ref) => {
+var import_react36 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var CircularProgress = (0, import_react36.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, circularProgressStyle.variantKeys);
   const { label, size = 150, percentage, unit, classNames } = { ...props, ...variantProps };
-  const slots = (0, import_react34.useMemo)(() => circularProgressStyle({ ...variantProps }), [variantProps]);
+  const slots = (0, import_react36.useMemo)(() => circularProgressStyle({ ...variantProps }), [variantProps]);
   const data = [
     {
       name: label,
@@ -10571,9 +10805,9 @@ var CircularProgress = (0, import_react34.forwardRef)((originalProps, ref) => {
   const BAR_SIZE = 24;
   const OUTER_RADIUS = 88;
   const INNER_RADIUS = OUTER_RADIUS - BAR_SIZE;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "relative", style: { width: size, height: size }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "relative", style: { width: size, height: size }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
         import_recharts.RadialBarChart,
         {
           width: size,
@@ -10585,7 +10819,7 @@ var CircularProgress = (0, import_react34.forwardRef)((originalProps, ref) => {
           startAngle: 90,
           endAngle: -270,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "circle",
               {
                 cx: size / 2,
@@ -10595,8 +10829,8 @@ var CircularProgress = (0, import_react34.forwardRef)((originalProps, ref) => {
                 fill: "currentColor"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_recharts.PolarAngleAxis, { type: "number", domain: [0, 100], angleAxisId: 0, tick: false }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_recharts.PolarAngleAxis, { type: "number", domain: [0, 100], angleAxisId: 0, tick: false }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               import_recharts.RadialBar,
               {
                 dataKey: "value",
@@ -10608,12 +10842,12 @@ var CircularProgress = (0, import_react34.forwardRef)((originalProps, ref) => {
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: slots.text({ class: classNames == null ? void 0 : classNames.text }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: slots.text({ class: classNames == null ? void 0 : classNames.text }), children: [
         percentage,
         unit
       ] }) })
     ] }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
+    label && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
   ] });
 });
 CircularProgress.displayName = "CircularProgress";
@@ -10651,26 +10885,26 @@ var circularProgressStyle = tv({
 });
 
 // src/components/charts/areaChart.tsx
-var import_react35 = require("react");
+var import_react37 = require("react");
 var import_recharts2 = require("recharts");
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var AreaChartComponent = (0, import_react35.forwardRef)((originalProps, ref) => {
-  const uniqueId = (0, import_react35.useId)();
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var AreaChartComponent = (0, import_react37.forwardRef)((originalProps, ref) => {
+  const uniqueId = (0, import_react37.useId)();
   const [props, variantProps] = mapPropsVariants(originalProps, areaChartStyle.variantKeys);
   const { data, label, color = "primary", classNames } = { ...props, ...variantProps };
-  const slots = (0, import_react35.useMemo)(() => areaChartStyle({ ...variantProps }), [variantProps]);
+  const slots = (0, import_react37.useMemo)(() => areaChartStyle({ ...variantProps }), [variantProps]);
   const COLOR_MAP = {
     primary: "#3F9CF2",
     danger: "#FF4684"
   };
-  const colorHex = (0, import_react35.useMemo)(() => COLOR_MAP[color], [color]);
-  const [tickPositions, setTickPositions] = (0, import_react35.useState)([]);
-  const tickRef = (0, import_react35.useRef)([]);
+  const colorHex = (0, import_react37.useMemo)(() => COLOR_MAP[color], [color]);
+  const [tickPositions, setTickPositions] = (0, import_react37.useState)([]);
+  const tickRef = (0, import_react37.useRef)([]);
   const CustomTick = ({ x, y, payload }) => {
     if (x !== void 0) {
       tickRef.current.push(x);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "text",
       {
         x,
@@ -10684,7 +10918,7 @@ var AreaChartComponent = (0, import_react35.forwardRef)((originalProps, ref) =>
       }
     );
   };
-  (0, import_react35.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     const raf = requestAnimationFrame(() => {
       const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
       const mids = [];
@@ -10699,19 +10933,19 @@ var AreaChartComponent = (0, import_react35.forwardRef)((originalProps, ref) =>
   const CustomDotWithShadow = (props2) => {
     const { cx, cy, fill, stroke } = props2;
     if (cx === void 0 || cy === void 0) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx, cy, r: 8, fill, opacity: 0.2 }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx, cy, r: 3.5, fill, stroke, strokeWidth: 2 })
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { cx, cy, r: 8, fill, opacity: 0.2 }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { cx, cy, r: 3.5, fill, stroke, strokeWidth: 2 })
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_recharts2.AreaChart, { data, margin: { left: -30 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("linearGradient", { id: `colorGradient-${uniqueId}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("stop", { offset: "5%", stopColor: colorHex, stopOpacity: 0.3 }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("stop", { offset: "95%", stopColor: colorHex, stopOpacity: 0 })
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_recharts2.AreaChart, { data, margin: { left: -30 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("linearGradient", { id: `colorGradient-${uniqueId}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("stop", { offset: "5%", stopColor: colorHex, stopOpacity: 0.3 }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("stop", { offset: "95%", stopColor: colorHex, stopOpacity: 0 })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         import_recharts2.CartesianGrid,
         {
           vertical: true,
@@ -10721,7 +10955,7 @@ var AreaChartComponent = (0, import_react35.forwardRef)((originalProps, ref) =>
           verticalPoints: tickPositions
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         import_recharts2.XAxis,
         {
           dataKey: "name",
@@ -10731,7 +10965,7 @@ var AreaChartComponent = (0, import_react35.forwardRef)((originalProps, ref) =>
           padding: { left: 35.5, right: 35.5 }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         import_recharts2.YAxis,
         {
           axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
@@ -10747,7 +10981,7 @@ var AreaChartComponent = (0, import_react35.forwardRef)((originalProps, ref) =>
           domain: [-6, 110]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         import_recharts2.Area,
         {
           type: "monotone",
@@ -10755,7 +10989,7 @@ var AreaChartComponent = (0, import_react35.forwardRef)((originalProps, ref) =>
           stroke: colorHex,
           strokeWidth: 2,
           fill: `url(#colorGradient-${uniqueId})`,
-          dot: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
+          dot: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
           activeDot: { r: 7, fill: colorHex }
         }
       )
@@ -10787,20 +11021,20 @@ var areaChartStyle = tv({
 });
 
 // src/components/charts/barChart.tsx
-var import_react36 = require("react");
+var import_react38 = require("react");
 var import_recharts3 = require("recharts");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var BarChartComponent = (0, import_react36.forwardRef)((originalProps, ref) => {
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var BarChartComponent = (0, import_react38.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, barChartStyle.variantKeys);
   const { data, label, classNames } = { ...props, ...variantProps };
-  const slots = (0, import_react36.useMemo)(() => barChartStyle({ ...variantProps }), [variantProps]);
+  const slots = (0, import_react38.useMemo)(() => barChartStyle({ ...variantProps }), [variantProps]);
   const COLOR_MAP = {
     primary: "#C7E5FA",
     secondary: "#DEC1FA",
     warning: "#F9C967"
   };
-  const [tickPositions, setTickPositions] = (0, import_react36.useState)([]);
-  const tickRef = (0, import_react36.useRef)([]);
+  const [tickPositions, setTickPositions] = (0, import_react38.useState)([]);
+  const tickRef = (0, import_react38.useRef)([]);
   const CustomBarShape = (barProps) => {
     const { x, y, width, height, fill } = barProps;
     const radius = 5;
@@ -10808,19 +11042,19 @@ var BarChartComponent = (0, import_react36.forwardRef)((originalProps, ref) => {
     const adjustedHeight = height + extraHeight;
     const adjustedY = y;
     const bottomY = adjustedY + adjustedHeight;
-    return height ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return height ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "path",
       {
         d: `M${x},${bottomY} L${x},${adjustedY + radius} Q${x},${adjustedY} ${x + radius},${adjustedY} L${x + width - radius},${adjustedY} Q${x + width},${adjustedY} ${x + width},${adjustedY + radius} L${x + width},${bottomY} Z`,
         fill
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("rect", { x, y, width, height: 0, fill });
+    ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("rect", { x, y, width, height: 0, fill });
   };
   const CustomTick = ({ x, y, payload }) => {
     if (x !== void 0) {
       tickRef.current.push(x);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "text",
       {
         x,
@@ -10834,7 +11068,7 @@ var BarChartComponent = (0, import_react36.forwardRef)((originalProps, ref) => {
       }
     );
   };
-  (0, import_react36.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const raf = requestAnimationFrame(() => {
       const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
       const mids = [];
@@ -10846,10 +11080,10 @@ var BarChartComponent = (0, import_react36.forwardRef)((originalProps, ref) => {
     });
     return () => cancelAnimationFrame(raf);
   }, [data]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_recharts3.BarChart, { data, margin: { left: -30 }, barSize: 20, barGap: 10, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_recharts3.BarChart, { data, margin: { left: -30 }, barSize: 20, barGap: 10, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         import_recharts3.CartesianGrid,
         {
           vertical: true,
@@ -10859,7 +11093,7 @@ var BarChartComponent = (0, import_react36.forwardRef)((originalProps, ref) => {
           verticalPoints: tickPositions
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         import_recharts3.XAxis,
         {
           dataKey: "name",
@@ -10869,7 +11103,7 @@ var BarChartComponent = (0, import_react36.forwardRef)((originalProps, ref) => {
           padding: { left: 32, right: 32 }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         import_recharts3.YAxis,
         {
           axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
@@ -10885,9 +11119,9 @@ var BarChartComponent = (0, import_react36.forwardRef)((originalProps, ref) => {
           domain: [-6, 110]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_recharts3.Bar, { dataKey: "avg", fill: COLOR_MAP.primary, width: 20, shape: CustomBarShape }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_recharts3.Bar, { dataKey: "high", fill: COLOR_MAP.secondary, width: 20, shape: CustomBarShape }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_recharts3.Bar, { dataKey: "low", fill: COLOR_MAP.warning, width: 20, shape: CustomBarShape })
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_recharts3.Bar, { dataKey: "avg", fill: COLOR_MAP.primary, width: 20, shape: CustomBarShape }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_recharts3.Bar, { dataKey: "high", fill: COLOR_MAP.secondary, width: 20, shape: CustomBarShape }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_recharts3.Bar, { dataKey: "low", fill: COLOR_MAP.warning, width: 20, shape: CustomBarShape })
     ] }) })
   ] });
 });
@@ -10917,6 +11151,8 @@ var barChartStyle = tv({
   CircularProgress,
   DateTimePicker,
   DefinitionTable,
+  DefinitionTable2,
+  Drawer,
   FileUpload,
   Icon,
   IconButton,