@deepnoid/ui 0.1.55 → 0.1.57

package/dist/index.js

@@ -114,6 +114,7 @@ __export(index_exports, {
   CircularProgress: () => circularProgress_default,
   DateTimePicker: () => dateTimePicker_default,
   DefinitionTable: () => definition_table_default,
+  Drawer: () => drawer_default,
   FileUpload: () => fileUpload_default,
   Icon: () => Icon_default,
   IconButton: () => icon_button_default,
@@ -739,6 +740,29 @@ var template = {
       }
     );
   },
+  down: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "21",
+        height: "21",
+        viewBox: "0 0 21 21",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M15.1667 8.16602L10.5 12.8327L5.83333 8.16602",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    );
+  },
   // ----------------------------------- old ---------------------------------
   // ** Status **
   check: ({ className, fill }) => {
@@ -4993,9 +5017,7 @@ var buttonStyle = tv({
     variant: {
       solid: "",
       soft: "",
-      outline: {
-        base: "bg-transparent border-transparent"
-      },
+      outline: "",
       ghost: ""
     },
     color: {
@@ -5166,49 +5188,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
@@ -9036,16 +9058,176 @@ var modal = tv({
   }
 });
 
-// src/components/list/list.tsx
+// src/components/drawer/drawer.tsx
 var import_react24 = require("react");
+var import_react_dom4 = require("react-dom");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var List = (0, import_react24.forwardRef)((originalProps, ref) => {
+var Drawer = (0, import_react24.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_react24.useState)(isOpen);
+  const [isAnimating, setIsAnimating] = (0, import_react24.useState)(isOpen);
+  const [isContentAnimating, setIsContentAnimating] = (0, import_react24.useState)(isOpen);
+  const slots = (0, import_react24.useMemo)(() => drawer(variantProps), [variantProps]);
+  (0, import_react24.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_react24.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_runtime28.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_runtime28.jsx)("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: onClose }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            "div",
+            {
+              className: slots.drawerWrapper({
+                class: clsx(classNames == null ? void 0 : classNames.drawerWrapper, getAnimationClasses())
+              }),
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.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_react25 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var List = (0, import_react25.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_react25.useMemo)(() => listStyle(variantProps), [variantProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: import_react25.Children.map(children, (child) => {
+    if (!(0, import_react25.isValidElement)(child)) return child;
+    return (0, import_react25.cloneElement)(child, {
       ...variantProps,
       ...child.props
     });
@@ -9082,9 +9264,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_react26 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var ListItem = (0, import_react26.forwardRef)((props, ref) => {
   const [rawProps, variantProps] = mapPropsVariants(props, listItemStyle.variantKeys);
   const {
     title,
@@ -9096,19 +9278,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_react26.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_runtime30.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), "data-selected": selected, onClick, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+      avatar && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(avatar_default, { ...avatar, variant: "round", size: avatarSize }),
+      startIconName && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon_default, { name: startIconName, fill: true, size, className: slots.startIcon({ class: classNames == null ? void 0 : classNames.startIcon }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: slots.titleWrapper({ class: classNames == null ? void 0 : classNames.titleWrapper }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
+        subTitle && /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.jsx)(Icon_default, { name: "right-chevron", size: iconSize, className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }) })
   ] });
 });
 ListItem.displayName = "ListItem";
@@ -9276,9 +9458,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_react27 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Toast = (0, import_react27.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, toast.variantKeys);
   const {
     title,
@@ -9292,9 +9474,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_react27.useMemo)(() => toast({ ...variantProps }), [variantProps]);
+  const toastRef = (0, import_react27.useRef)(null);
+  (0, import_react27.useImperativeHandle)(
     ref,
     () => ({
       getWidth: () => {
@@ -9305,7 +9487,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_runtime31.jsxs)(
     "div",
     {
       ref: toastRef,
@@ -9317,12 +9499,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_runtime31.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+          showIcon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon_default, { name: originalProps.icon || "info-circle", fill: true, className: "mt-[2px]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime31.jsx)("div", { children: content })
       ]
     }
   );
@@ -9427,7 +9609,7 @@ var toast = tv({
 });
 
 // src/components/toast/use-toast.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/components/toast/toast-utils.ts
 var getToastPosition = (placement, width, offset) => {
@@ -9466,10 +9648,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_runtime32 = require("react/jsx-runtime");
+var ToastContext = (0, import_react28.createContext)(null);
 var useToast = () => {
-  const context = (0, import_react27.useContext)(ToastContext);
+  const context = (0, import_react28.useContext)(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within a ToastProvider");
   }
@@ -9479,10 +9661,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_react28.useState)([]);
+  const [containerStyle, setContainerStyle] = (0, import_react28.useState)({});
+  const toastRef = (0, import_react28.useRef)(null);
+  const addToast = (0, import_react28.useCallback)(
     (title, options = {}) => {
       const id = Date.now() + Math.floor(Math.random() * 1e5);
       const newToast = {
@@ -9499,11 +9681,11 @@ var ToastProvider = ({
     },
     [globalOptions]
   );
-  const removeToast = (0, import_react27.useCallback)((id) => {
+  const removeToast = (0, import_react28.useCallback)((id) => {
     setToasts((prevToasts) => prevToasts.filter((toast2) => toast2.id !== id));
   }, []);
   const contextValue = addToast;
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.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;
@@ -9517,18 +9699,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_runtime32.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_runtime32.jsx)("div", { id: "deepnoid-toast-container", className: "flex flex-col gap-[10px]", style: containerStyle, children: toasts.map((toast2) => /* @__PURE__ */ (0, import_jsx_runtime32.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_react32 = __toESM(require("react"));
+var import_react_dom5 = require("react-dom");
 
 // src/components/dateTimePicker/useDateTimePicker.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/components/dateTimePicker/util.ts
 var formatDateToString = (date) => {
@@ -9544,17 +9726,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_react29.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_react29.useState)(initialTime ? initialTime : "");
+  const [targetRect, setTargetRect] = (0, import_react29.useState)(null);
+  const [popupWidth, setPopupWidth] = (0, import_react29.useState)(0);
+  const [popupHeight, setPopupHeight] = (0, import_react29.useState)(0);
+  const [isFocusInput, setIsFocusInput] = (0, import_react29.useState)(false);
+  const dateInputRef = (0, import_react29.useRef)(null);
+  const datePickerWrapperRef = (0, import_react29.useRef)(null);
+  const datePickerRef = (0, import_react29.useRef)(null);
   const DATE_PICKER_GAP = 4;
   const calculatePositionWithScroll = (targetRect2) => {
     if (targetRect2 && popupWidth && popupHeight) {
@@ -9587,7 +9769,7 @@ var useDatePicker = ({ initialDate, initialTime }) => {
   const handleBlueInput = () => {
     setIsFocusInput(false);
   };
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const onClickOutside = (e) => {
       if (datePickerRef.current && !datePickerRef.current.contains(e.target) && datePickerWrapperRef.current && !datePickerWrapperRef.current.contains(e.target)) {
         setTargetRect(null);
@@ -9596,7 +9778,7 @@ var useDatePicker = ({ initialDate, initialTime }) => {
     window.addEventListener("mousedown", onClickOutside);
     return () => window.removeEventListener("mousedown", onClickOutside);
   }, []);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (datePickerWrapperRef.current) {
       setPopupHeight(datePickerWrapperRef.current.getBoundingClientRect().height);
       setPopupWidth(datePickerWrapperRef.current.getBoundingClientRect().width);
@@ -9621,19 +9803,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_react30 = __toESM(require("react"));
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Calendar = (0, import_react30.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_react30.useState)(selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date());
   const daysOfWeek = ["S", "M", "T", "W", "T", "F", "S"];
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (selectedDate) {
       setCurrentDate(new Date(selectedDate));
     }
   }, [selectedDate]);
-  const getCalendarDates = (0, import_react29.useCallback)(() => {
+  const getCalendarDates = (0, import_react30.useCallback)(() => {
     const year = currentDate.getFullYear();
     const month = currentDate.getMonth();
     const firstDayOfMonth = new Date(year, month, 1).getDay();
@@ -9679,17 +9861,17 @@ var Calendar = (0, import_react29.forwardRef)((originalProps, ref) => {
       onChangeDate(formatted);
     }
   };
-  (0, import_react29.useImperativeHandle)(ref, () => ({
+  (0, import_react30.useImperativeHandle)(ref, () => ({
     getSelectedDate: () => selectedDate
   }));
-  const slots = (0, import_react29.useMemo)(() => calendarStyle({ ...variantProps }), [variantProps]);
-  const getBaseProps = (0, import_react29.useCallback)(
+  const slots = (0, import_react30.useMemo)(() => calendarStyle({ ...variantProps }), [variantProps]);
+  const getBaseProps = (0, import_react30.useCallback)(
     () => ({
       className: `${slots.base({ class: classNames == null ? void 0 : classNames.base })}`
     }),
     [slots, classNames]
   );
-  const getDateTitleProps = (0, import_react29.useCallback)(
+  const getDateTitleProps = (0, import_react30.useCallback)(
     (index) => {
       return {
         className: `${slots.dateTitle({
@@ -9701,7 +9883,7 @@ var Calendar = (0, import_react29.forwardRef)((originalProps, ref) => {
     },
     [slots, classNames, highlightWeekend]
   );
-  const getDateProps = (0, import_react29.useCallback)(
+  const getDateProps = (0, import_react30.useCallback)(
     (dateObj) => {
       const today = /* @__PURE__ */ new Date();
       const isToday = today.getDate() === dateObj.date && today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear();
@@ -9723,18 +9905,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_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...getBaseProps(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "calendar-header flex justify-between items-center mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon_default, { name: "brace-left", size: "md", className: "cursor-pointer", onClick: handlePrevMonth }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-h6 font-semibold", children: currentDate.toLocaleString("default", { year: "numeric", month: "2-digit" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime33.jsx)("div", { className: "grid grid-cols-7 gap-2 text-center", children: daysOfWeek.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ...getDateTitleProps(index), children: day }, `${day}-${index}`)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime33.jsx)(import_react30.default.Fragment, { children: week.map((dateObj, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ...getDateProps(dateObj), children: dateObj.date }, index);
       }) }, weekIndex);
     }) })
   ] }) });
@@ -9805,22 +9987,22 @@ var calendarStyle = tv({
 });
 
 // src/components/dateTimePicker/timePicker.tsx
-var import_react30 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react31 = require("react");
+var import_jsx_runtime34 = 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_react31.useState)("01");
+  const [selectedMinute, setSelectedMinute] = (0, import_react31.useState)("00");
+  const [selectedPeriod, setSelectedPeriod] = (0, import_react31.useState)("AM");
+  const hourRef = (0, import_react31.useRef)(null);
+  const minuteRef = (0, import_react31.useRef)(null);
+  const periodRef = (0, import_react31.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_react31.useEffect)(() => {
     if (selectedTime) {
       const { formattedHour, minute, period } = parseAndFormatTime(selectedTime);
       setSelectedHour(formattedHour);
@@ -9831,7 +10013,7 @@ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime
       scrollToSelectedTime();
     }
   }, [selectedTime, isFocusInput]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     scrollToSelectedTime();
   }, []);
   const parseAndFormatTime = (time) => {
@@ -9868,8 +10050,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_runtime34.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_runtime34.jsx)(list_default, { ref: periodRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: PERIODS.map((period, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       listItem_default,
       {
         color,
@@ -9883,7 +10065,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_runtime34.jsx)(list_default, { ref: hourRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: hoursArray.map((hour, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       listItem_default,
       {
         color,
@@ -9897,7 +10079,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_runtime34.jsx)(list_default, { ref: minuteRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: minutesArray.map((minute, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       listItem_default,
       {
         color,
@@ -9916,8 +10098,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_runtime35 = require("react/jsx-runtime");
+var DatePicker = (0, import_react32.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, dateTimePickerStyle.variantKeys);
   const {
     classNames,
@@ -9931,7 +10113,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_react32.useMemo)(() => dateTimePickerStyle({ ...variantProps }), [variantProps]);
   const {
     selectedDate,
     selectedTime,
@@ -9952,32 +10134,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_react32.useCallback)(
     () => ({
       className: slots.base({ class: classNames == null ? void 0 : classNames.base })
     }),
     [slots, classNames]
   );
-  const getLabelProps = (0, import_react31.useCallback)(
+  const getLabelProps = (0, import_react32.useCallback)(
     () => ({
       className: slots.label({ class: classNames == null ? void 0 : classNames.label })
     }),
     [slots, classNames]
   );
-  const getInnerWrapperProps = (0, import_react31.useCallback)(
+  const getInnerWrapperProps = (0, import_react32.useCallback)(
     () => ({
       className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper })
     }),
     [slots, classNames]
   );
-  const getInputWrapperProps = (0, import_react31.useCallback)(
+  const getInputWrapperProps = (0, import_react32.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_react32.useCallback)(
     () => ({
       ...inputProps,
       ref: ref || dateInputRef,
@@ -10008,33 +10190,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_react32.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_react32.useCallback)(
     () => ({
       className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
     }),
     [slots, classNames]
   );
   const renderStartContent = () => {
-    if (import_react31.default.isValidElement(startContent)) {
+    if (import_react32.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_react32.default.cloneElement(startContent, mergedProps);
     } else {
       const contentProps = getContentProps();
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ...contentProps, children: startContent });
+      return /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime35.jsx)("div", { ...getContentProps(), onClick: handleToggleDatePicker, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     Icon_default,
     {
       name: type === "time" ? "clock" : "calendar",
@@ -10044,18 +10226,18 @@ var DatePicker = (0, import_react31.forwardRef)((originalProps, ref) => {
     }
   ) });
   const renderContentWithIcon = () => {
-    if (import_react31.default.isValidElement(endContent)) {
+    if (import_react32.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_react32.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_runtime35.jsx)("div", { ...iconProps, children: /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime35.jsx)(import_jsx_runtime35.Fragment, {});
     }
   };
   const renderEndContent = () => {
@@ -10070,20 +10252,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_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { ...getBaseProps(), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("label", { ...getLabelProps(), children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { ...getInnerWrapperProps(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { ...getInputWrapperProps(), children: [
           startContent && renderStartContent(),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("input", { ...getInputProps() }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("input", { ...getInputProps() }),
           renderEndContent()
         ] }),
-        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { ...getErrorMessageProps(), children: errorMessage })
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: (0, import_react_dom5.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
         "div",
         {
           ref: datePickerWrapperRef,
@@ -10094,7 +10276,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_runtime35.jsx)(
               calendar_default,
               {
                 color: originalProps.color,
@@ -10106,7 +10288,7 @@ var DatePicker = (0, import_react31.forwardRef)((originalProps, ref) => {
                 }
               }
             ),
-            type === "time" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            type === "time" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               timePicker_default,
               {
                 color: originalProps.color,
@@ -10256,20 +10438,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_react33 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var TreeNodeItem = (0, import_react33.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_react33.useState)(false);
+    const [children, setChildren] = (0, import_react33.useState)(node.children);
+    const [isLoadingChildren, setIsLoadingChildren] = (0, import_react33.useState)(false);
+    const slots = (0, import_react33.useMemo)(() => treeStyle(), []);
+    const hasMore = (0, import_react33.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_react33.useCallback)(async () => {
       if (!isOpen && !children && onExpand && !node.isLeaf) {
         setIsLoadingChildren(true);
         try {
@@ -10293,7 +10475,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_runtime36.jsxs)(
       "div",
       {
         ref,
@@ -10302,7 +10484,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_runtime36.jsxs)(
             "div",
             {
               className: clsx(
@@ -10313,7 +10495,7 @@ var TreeNodeItem = (0, import_react32.forwardRef)(
               onClick: handleClick,
               onContextMenu: handleRightClick,
               children: [
-                hasMore && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                hasMore && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                   Icon_default,
                   {
                     name: "right-chevron",
@@ -10328,9 +10510,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_runtime36.jsxs)("div", { className: slots.gap({ class: classNames == null ? void 0 : classNames.gap }), children: [
+            isLoadingChildren && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "text-neutral py-1 text-sm", children: "loading..." }),
+            children == null ? void 0 : children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               TreeNodeItem,
               {
                 node: child,
@@ -10350,7 +10532,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_react33.useMemo)(() => treeStyle(), []);
   const handleClick = (e) => {
     var _a;
     (_a = group.onClick) == null ? void 0 : _a.call(group, e);
@@ -10360,10 +10542,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_runtime36.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    headerContent && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: headerContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
         "div",
         {
           className: clsx(
@@ -10378,7 +10560,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_runtime36.jsx)("div", { className: slots.gap({ class: classNames == null ? void 0 : classNames.gap }), children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         TreeNodeItem,
         {
           node,
@@ -10415,9 +10597,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_react34 = require("react");
+var import_tailwind_variants31 = require("tailwind-variants");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function FileUpload({
   buttonText,
   maxSizeMB = 10,
@@ -10431,11 +10613,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_react34.useRef)(null);
+  const uploadIntervalRef = (0, import_react34.useRef)(null);
+  const [file, setFile] = (0, import_react34.useState)(null);
+  const [uploadProgress, setUploadProgress] = (0, import_react34.useState)(0);
+  const [errorMessage, setErrorMessage] = (0, import_react34.useState)("");
   const slots = fileUploadStyle();
   const handleButtonClick = () => {
     var _a;
@@ -10485,18 +10667,18 @@ function FileUpload({
     setUploadProgress(0);
     setErrorMessage("");
   };
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.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_runtime37.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: slots.container({ class: classNames == null ? void 0 : classNames.container }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: slots.inputWrapper(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(input_default, { name, readOnly: true, variant: "outline", full: true, placeholder, defaultValue: file == null ? void 0 : file.name }),
+        file && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           icon_button_default,
           {
             name: "close",
@@ -10508,17 +10690,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_runtime37.jsx)(button_default, { type: "button", variant: "outline", onClick: handleButtonClick, children: buttonText }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.jsx)("div", { className: slots.progressBarContainer(), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: slots.progressBar(), style: { width: `${uploadProgress}%` } }) }),
+    !errorMessage && helperMessage && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: slots.helperMessage(), children: helperMessage }),
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime37.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_variants31.tv)({
   slots: {
     base: ["flex", "flex-col", "gap-[5px]"],
     container: ["flex", "items-center", "gap-[10px]"],
@@ -10533,12 +10715,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_react35 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var CircularProgress = (0, import_react35.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_react35.useMemo)(() => circularProgressStyle({ ...variantProps }), [variantProps]);
   const data = [
     {
       name: label,
@@ -10548,9 +10730,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_runtime38.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative", style: { width: size, height: size }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
         import_recharts.RadialBarChart,
         {
           width: size,
@@ -10562,7 +10744,7 @@ var CircularProgress = (0, import_react34.forwardRef)((originalProps, ref) => {
           startAngle: 90,
           endAngle: -270,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "circle",
               {
                 cx: size / 2,
@@ -10572,8 +10754,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_runtime38.jsx)(import_recharts.PolarAngleAxis, { type: "number", domain: [0, 100], angleAxisId: 0, tick: false }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               import_recharts.RadialBar,
               {
                 dataKey: "value",
@@ -10585,12 +10767,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_runtime38.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
   ] });
 });
 CircularProgress.displayName = "CircularProgress";
@@ -10628,26 +10810,26 @@ var circularProgressStyle = tv({
 });
 
 // src/components/charts/areaChart.tsx
-var import_react35 = require("react");
+var import_react36 = 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_runtime39 = require("react/jsx-runtime");
+var AreaChartComponent = (0, import_react36.forwardRef)((originalProps, ref) => {
+  const uniqueId = (0, import_react36.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_react36.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_react36.useMemo)(() => COLOR_MAP[color], [color]);
+  const [tickPositions, setTickPositions] = (0, import_react36.useState)([]);
+  const tickRef = (0, import_react36.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_runtime39.jsx)(
       "text",
       {
         x,
@@ -10661,7 +10843,7 @@ var AreaChartComponent = (0, import_react35.forwardRef)((originalProps, ref) =>
       }
     );
   };
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const raf = requestAnimationFrame(() => {
       const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
       const mids = [];
@@ -10676,19 +10858,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_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("circle", { cx, cy, r: 8, fill, opacity: 0.2 }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.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_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_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_recharts2.AreaChart, { data, margin: { left: -30 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("linearGradient", { id: `colorGradient-${uniqueId}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("stop", { offset: "5%", stopColor: colorHex, stopOpacity: 0.3 }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("stop", { offset: "95%", stopColor: colorHex, stopOpacity: 0 })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         import_recharts2.CartesianGrid,
         {
           vertical: true,
@@ -10698,7 +10880,7 @@ var AreaChartComponent = (0, import_react35.forwardRef)((originalProps, ref) =>
           verticalPoints: tickPositions
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         import_recharts2.XAxis,
         {
           dataKey: "name",
@@ -10708,7 +10890,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_runtime39.jsx)(
         import_recharts2.YAxis,
         {
           axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
@@ -10724,7 +10906,7 @@ var AreaChartComponent = (0, import_react35.forwardRef)((originalProps, ref) =>
           domain: [-6, 110]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         import_recharts2.Area,
         {
           type: "monotone",
@@ -10732,7 +10914,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_runtime39.jsx)(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
           activeDot: { r: 7, fill: colorHex }
         }
       )
@@ -10764,20 +10946,20 @@ var areaChartStyle = tv({
 });
 
 // src/components/charts/barChart.tsx
-var import_react36 = require("react");
+var import_react37 = 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_runtime40 = require("react/jsx-runtime");
+var BarChartComponent = (0, import_react37.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_react37.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_react37.useState)([]);
+  const tickRef = (0, import_react37.useRef)([]);
   const CustomBarShape = (barProps) => {
     const { x, y, width, height, fill } = barProps;
     const radius = 5;
@@ -10785,19 +10967,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_runtime40.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_runtime40.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_runtime40.jsx)(
       "text",
       {
         x,
@@ -10811,7 +10993,7 @@ var BarChartComponent = (0, import_react36.forwardRef)((originalProps, ref) => {
       }
     );
   };
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     const raf = requestAnimationFrame(() => {
       const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
       const mids = [];
@@ -10823,10 +11005,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_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_recharts3.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_recharts3.BarChart, { data, margin: { left: -30 }, barSize: 20, barGap: 10, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         import_recharts3.CartesianGrid,
         {
           vertical: true,
@@ -10836,7 +11018,7 @@ var BarChartComponent = (0, import_react36.forwardRef)((originalProps, ref) => {
           verticalPoints: tickPositions
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         import_recharts3.XAxis,
         {
           dataKey: "name",
@@ -10846,7 +11028,7 @@ var BarChartComponent = (0, import_react36.forwardRef)((originalProps, ref) => {
           padding: { left: 32, right: 32 }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         import_recharts3.YAxis,
         {
           axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
@@ -10862,9 +11044,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_runtime40.jsx)(import_recharts3.Bar, { dataKey: "avg", fill: COLOR_MAP.primary, width: 20, shape: CustomBarShape }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_recharts3.Bar, { dataKey: "high", fill: COLOR_MAP.secondary, width: 20, shape: CustomBarShape }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_recharts3.Bar, { dataKey: "low", fill: COLOR_MAP.warning, width: 20, shape: CustomBarShape })
     ] }) })
   ] });
 });
@@ -10894,6 +11076,7 @@ var barChartStyle = tv({
   CircularProgress,
   DateTimePicker,
   DefinitionTable,
+  Drawer,
   FileUpload,
   Icon,
   IconButton,