@deepnoid/ui 0.1.181 → 0.1.183

package/dist/index.js

@@ -7921,9 +7921,12 @@ var textareaStyle = (0, import_tailwind_variants13.tv)({
 });
 
 // src/components/table/table.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_tailwind_variants17 = require("tailwind-variants");
 
+// src/components/table/table-head.tsx
+var import_react15 = require("react");
+
 // src/components/checkbox/checkbox.tsx
 var import_react14 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
@@ -8133,20 +8136,51 @@ var checkboxStyle = tv({
 
 // src/components/table/table-head.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var TableHead = ({
+function TableHeaderCell({
+  content,
+  column,
+  isCheckbox = false,
   slots,
-  columns,
-  color,
-  size,
-  rowCheckbox = false,
-  hasCheckedRows,
-  classNames,
-  onCheckAll
-}) => {
-  const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  classNames
+}) {
+  const thRef = (0, import_react15.useRef)(null);
+  const [showTitle, setShowTitle] = (0, import_react15.useState)(false);
+  const checkOverflow = (el) => {
+    if (el.scrollWidth > el.clientWidth) {
+      return true;
+    }
+    const children = Array.from(el.children);
+    for (const child of children) {
+      if (child.scrollWidth > child.clientWidth) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const extractTextFromContent = (node) => {
+    if (typeof node === "string" || typeof node === "number") {
+      return String(node);
+    }
+    if ((0, import_react15.isValidElement)(node)) {
+      return String(node.props.children || "");
+    }
+    return "";
+  };
+  (0, import_react15.useEffect)(() => {
+    if (thRef.current && !isCheckbox) {
+      setTimeout(() => {
+        if (thRef.current) {
+          setShowTitle(checkOverflow(thRef.current));
+        }
+      }, 0);
+    }
+  }, [content, isCheckbox]);
+  const titleText = !isCheckbox && showTitle ? extractTextFromContent(content) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "th",
     {
-      className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column == null ? void 0 : column.className),
+      ref: thRef,
+      className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column == null ? void 0 : column.className, !isCheckbox && "truncate"),
       style: isCheckbox ? {
         width: "40px",
         minWidth: "40px",
@@ -8155,31 +8189,55 @@ var TableHead = ({
         flexGrow: 0,
         boxSizing: "border-box"
       } : column ? { ...getCellStyle(column), textAlign: "center" } : void 0,
+      title: titleText,
       children: content
-    },
-    key
+    }
   );
+}
+var TableHead = ({
+  slots,
+  columns,
+  color,
+  size,
+  rowCheckbox = false,
+  hasCheckedRows,
+  classNames,
+  onCheckAll
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
-    columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
-    rowCheckbox && renderTh(
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        checkbox_default,
-        {
-          size,
-          checked: hasCheckedRows,
-          onChange: (e) => onCheckAll(e.target.checked)
-        }
-      ) }),
-      "checkbox",
-      void 0,
-      true
+    columns.map((column, idx) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      TableHeaderCell,
+      {
+        content: column.headerName,
+        column,
+        slots,
+        classNames
+      },
+      `${column.field}-${idx}`
+    )),
+    rowCheckbox && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      TableHeaderCell,
+      {
+        content: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          checkbox_default,
+          {
+            size,
+            checked: hasCheckedRows,
+            onChange: (e) => onCheckAll(e.target.checked)
+          }
+        ) }),
+        isCheckbox: true,
+        slots,
+        classNames
+      },
+      "checkbox"
     )
   ] }) });
 };
 var table_head_default = TableHead;
 
 // src/components/table/table-body.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function TableCell({
   row,
@@ -8189,25 +8247,46 @@ function TableCell({
   slots,
   classNames
 }) {
-  var _a;
+  var _a, _b;
   const value = row[column.field];
   const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
   const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
-  const tdRef = (0, import_react15.useRef)(null);
-  const [showTitle, setShowTitle] = (0, import_react15.useState)(false);
-  const checkOverflow = (el) => el.scrollWidth > el.clientWidth;
-  (0, import_react15.useEffect)(() => {
+  const tdRef = (0, import_react16.useRef)(null);
+  const [showTitle, setShowTitle] = (0, import_react16.useState)(false);
+  const checkOverflow = (el) => {
+    if (el.scrollWidth > el.clientWidth) {
+      return true;
+    }
+    const children = Array.from(el.children);
+    for (const child of children) {
+      if (child.scrollWidth > child.clientWidth) {
+        return true;
+      }
+    }
+    return false;
+  };
+  (0, import_react16.useEffect)(() => {
     if (tdRef.current) {
-      setShowTitle(checkOverflow(tdRef.current));
+      setTimeout(() => {
+        if (tdRef.current) {
+          setShowTitle(checkOverflow(tdRef.current));
+        }
+      }, 0);
     }
   }, [content]);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "td",
     {
       ref: tdRef,
-      className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className, "truncate"),
+      className: clsx(
+        slots.td(),
+        classNames == null ? void 0 : classNames.td,
+        column.className,
+        "truncate",
+        "[&>*]:block [&>*]:w-full [&>*]:truncate"
+      ),
       style: { ...getCellStyle(column), maxWidth: column.width || "150px" },
-      title: showTitle ? String(content) : void 0,
+      title: showTitle ? String(((_b = value == null ? void 0 : value.props) == null ? void 0 : _b.children) || content || "") : void 0,
       children: content
     },
     `${row.id}-${column.field}-${colIdx}-${rowIndex}`
@@ -8277,18 +8356,18 @@ var TableBody = ({
 var table_body_default = TableBody;
 
 // src/components/pagination/pagination.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/components/pagination/usePagination.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 var usePagination = ({ currentPage, totalPage, groupSize, handleChangePage }) => {
-  const startPage = (0, import_react16.useMemo)(() => Math.floor((currentPage - 1) / groupSize) * groupSize + 1, [currentPage, groupSize]);
-  const endPage = (0, import_react16.useMemo)(() => Math.min(startPage + groupSize - 1, totalPage), [startPage, groupSize, totalPage]);
-  const pageList = (0, import_react16.useMemo)(
+  const startPage = (0, import_react17.useMemo)(() => Math.floor((currentPage - 1) / groupSize) * groupSize + 1, [currentPage, groupSize]);
+  const endPage = (0, import_react17.useMemo)(() => Math.min(startPage + groupSize - 1, totalPage), [startPage, groupSize, totalPage]);
+  const pageList = (0, import_react17.useMemo)(
     () => Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i),
     [startPage, endPage]
   );
-  const handleClickMovePage = (0, import_react16.useCallback)(
+  const handleClickMovePage = (0, import_react17.useCallback)(
     (page) => (event) => {
       event.preventDefault();
       handleChangePage == null ? void 0 : handleChangePage(page);
@@ -8306,7 +8385,7 @@ var usePagination_default = usePagination;
 
 // src/components/pagination/pagination.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var Pagination = (0, import_react17.forwardRef)((originalProps, ref) => {
+var Pagination = (0, import_react18.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, paginationStyle.variantKeys);
   const {
     classNames,
@@ -8320,12 +8399,12 @@ var Pagination = (0, import_react17.forwardRef)((originalProps, ref) => {
     variant,
     size
   } = { ...props, ...variantProps };
-  const [inputPage, setInputPage] = (0, import_react17.useState)(currentPage);
+  const [inputPage, setInputPage] = (0, import_react18.useState)(currentPage);
   const isFirstPageDisabled = currentPage <= 1;
   const isPrevPageDisabled = currentPage <= 1;
   const isNextPageDisabled = currentPage >= totalPage;
   const isLastPageDisabled = currentPage >= totalPage;
-  const slots = (0, import_react17.useMemo)(() => paginationStyle(variantProps), [variantProps]);
+  const slots = (0, import_react18.useMemo)(() => paginationStyle(variantProps), [variantProps]);
   const { pageList, handleClickMovePage } = usePagination_default({
     currentPage,
     totalPage,
@@ -8693,7 +8772,7 @@ var scrollAreaStyle = (0, import_tailwind_variants16.tv)({
 
 // src/components/table/table.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var Table = (0, import_react18.forwardRef)((originalProps, ref) => {
+var Table = (0, import_react19.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, tableStyle.variantKeys);
   const {
     rows,
@@ -8718,8 +8797,8 @@ var Table = (0, import_react18.forwardRef)((originalProps, ref) => {
   } = { ...props, ...variantProps };
   const { page = 1, perPage = 15 } = pagination || {};
   const showPagination = pagination && totalData > 0;
-  const [checkedRowIds, setCheckedRowIds] = (0, import_react18.useState)(new Set(checkedRows == null ? void 0 : checkedRows.map((row) => row.id)));
-  const tableMinWidth = (0, import_react18.useMemo)(() => {
+  const [checkedRowIds, setCheckedRowIds] = (0, import_react19.useState)(new Set(checkedRows == null ? void 0 : checkedRows.map((row) => row.id)));
+  const tableMinWidth = (0, import_react19.useMemo)(() => {
     const columnsWidth = columns.reduce((total, column) => {
       if (column.width) return total + column.width;
       if (column.minWidth) return total + column.minWidth;
@@ -8728,10 +8807,10 @@ var Table = (0, import_react18.forwardRef)((originalProps, ref) => {
     const checkboxWidth = rowCheckbox ? 40 : 0;
     return columnsWidth + checkboxWidth;
   }, [columns, rowCheckbox]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     onCheckedRowsChange == null ? void 0 : onCheckedRowsChange(getCheckedRowData(checkedRowIds));
   }, [checkedRowIds]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const currentRowIds = new Set(rows.map((row) => row.id));
     const ids = Array.from(checkedRowIds);
     const hasValidCheckedRows = ids.every((id) => currentRowIds.has(id));
@@ -8739,7 +8818,7 @@ var Table = (0, import_react18.forwardRef)((originalProps, ref) => {
       setCheckedRowIds(new Set(checkedRows == null ? void 0 : checkedRows.map((row) => row.id)));
     }
   }, [rows.map((row) => row.id).join(",")]);
-  (0, import_react18.useImperativeHandle)(
+  (0, import_react19.useImperativeHandle)(
     ref,
     () => ({
       checkedRowIds,
@@ -8766,7 +8845,7 @@ var Table = (0, import_react18.forwardRef)((originalProps, ref) => {
     onRowClick == null ? void 0 : onRowClick(row, index, event);
   };
   const getCheckedRowData = (checked) => rows.filter((row) => checked.has(row.id));
-  const slots = (0, import_react18.useMemo)(
+  const slots = (0, import_react19.useMemo)(
     () => tableStyle({ ...variantProps, rowClickable: typeof onRowClick === "function" }),
     [variantProps, onRowClick]
   );
@@ -9085,7 +9164,7 @@ var getCellStyle = (column) => {
 };
 
 // src/components/table/definition-table.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var DEFAULT_CELL_CLASSES = "px-[10px] py-[8px] text-md border-r border-neutral-light h-[50px]";
 var FIRST_CELL_WIDTH_CLASS = "w-[120px] font-bold text-md text-body-foreground";
@@ -9178,10 +9257,10 @@ var DefinitionTableRow = ({
     colIndex
   );
 }) });
-var DefinitionTable = (0, import_react19.forwardRef)(
+var DefinitionTable = (0, import_react20.forwardRef)(
   ({ rows = [], footer, highlightColumnKey, classNames }, ref) => {
-    const slots = (0, import_react19.useMemo)(() => DefinitionTableStyle(), []);
-    const highlightColumnIndex = (0, import_react19.useMemo)(
+    const slots = (0, import_react20.useMemo)(() => DefinitionTableStyle(), []);
+    const highlightColumnIndex = (0, import_react20.useMemo)(
       () => getHighlightColumnIndex(rows, highlightColumnKey),
       [rows, highlightColumnKey]
     );
@@ -9214,10 +9293,10 @@ var DefinitionTableStyle = tv({
 });
 
 // src/components/select/select.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var Select = (0, import_react20.forwardRef)((originalProps, ref) => {
+var Select = (0, import_react21.forwardRef)((originalProps, ref) => {
   var _a, _b;
   const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
   const {
@@ -9234,14 +9313,14 @@ var Select = (0, import_react20.forwardRef)((originalProps, ref) => {
     optionIconPlacement,
     ...inputProps
   } = props;
-  const slots = (0, import_react20.useMemo)(() => select({ ...variantProps }), [variantProps]);
-  const [selectedOptions, setSelectedOptions] = (0, import_react20.useState)(defaultSelectedOptions || []);
-  const [targetRect, setTargetRect] = (0, import_react20.useState)(null);
-  const [optionWrapperHeight, setOptionWrapperHeight] = (0, import_react20.useState)(0);
-  const [isVisible, setIsVisible] = (0, import_react20.useState)(false);
-  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
-  const selectWrapperRef = (0, import_react20.useRef)(null);
-  const optionWrapperRef = (0, import_react20.useRef)(null);
+  const slots = (0, import_react21.useMemo)(() => select({ ...variantProps }), [variantProps]);
+  const [selectedOptions, setSelectedOptions] = (0, import_react21.useState)(defaultSelectedOptions || []);
+  const [targetRect, setTargetRect] = (0, import_react21.useState)(null);
+  const [optionWrapperHeight, setOptionWrapperHeight] = (0, import_react21.useState)(0);
+  const [isVisible, setIsVisible] = (0, import_react21.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
+  const selectWrapperRef = (0, import_react21.useRef)(null);
+  const optionWrapperRef = (0, import_react21.useRef)(null);
   const isControlled = originalProps.value !== void 0;
   const openSelect = () => {
     if (selectWrapperRef.current) {
@@ -9281,7 +9360,7 @@ var Select = (0, import_react20.forwardRef)((originalProps, ref) => {
     setSelectedOptions(nextOptions);
     onChange == null ? void 0 : onChange(nextOptions);
   };
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const handleClickOutside = (e) => {
       var _a2;
       const target = e.target;
@@ -9292,12 +9371,12 @@ var Select = (0, import_react20.forwardRef)((originalProps, ref) => {
     window.addEventListener("mousedown", handleClickOutside);
     return () => window.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (optionWrapperRef.current) {
       setOptionWrapperHeight(optionWrapperRef.current.getBoundingClientRect().height);
     }
   }, [targetRect]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (isControlled) {
       const valueArray = Array.isArray(originalProps.value) ? originalProps.value : [originalProps.value];
       const matched = options.filter((opt) => valueArray.includes(opt.value));
@@ -9667,14 +9746,14 @@ var select = tv({
 });
 
 // src/components/chip/chip.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var Chip = (0, import_react21.forwardRef)((originalProps, ref) => {
+var Chip = (0, import_react22.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_react21.useMemo)(() => chipStyle({ ...variantProps }), [variantProps]);
+  const slots = (0, import_react22.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,
@@ -9852,12 +9931,12 @@ var chipStyle = tv({
 });
 
 // src/components/radio/radio.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var Radio = (0, import_react22.forwardRef)((originalProps, ref) => {
+var Radio = (0, import_react23.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, radioStyle.variantKeys);
   const { children, classNames, labelPosition = "end", ...inputProps } = props;
-  const slots = (0, import_react22.useMemo)(() => radioStyle({ ...variantProps }), [variantProps]);
+  const slots = (0, import_react23.useMemo)(() => radioStyle({ ...variantProps }), [variantProps]);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "label",
     {
@@ -10022,16 +10101,16 @@ var radioStyle = tv({
 });
 
 // src/components/switch/switch.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_tailwind_variants22 = require("tailwind-variants");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var Switch = (0, import_react23.forwardRef)((originalProps, ref) => {
+var Switch = (0, import_react24.forwardRef)((originalProps, ref) => {
   const [rawProps, variantProps] = mapPropsVariants(originalProps, switchStyle.variantKeys);
   const { size, color, disabled, disableAnimation, id, checked, onChange, classNames, ...inputProps } = {
     ...rawProps,
     ...variantProps
   };
-  const slots = (0, import_react23.useMemo)(() => switchStyle({ ...variantProps }), [variantProps]);
+  const slots = (0, import_react24.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",
@@ -10156,7 +10235,7 @@ var switchStyle = (0, import_tailwind_variants22.tv)({
 });
 
 // src/components/tooltip/tooltip.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/components/tooltip/tooltip-utils.ts
@@ -10279,11 +10358,11 @@ var getTailStyles = (placement) => {
 };
 
 // src/components/tooltip/useTooltip.ts
-var import_react24 = require("react");
+var import_react25 = require("react");
 var useTooltip = ({ placement, offset, targetRect }) => {
-  const [tooltipPosition, setTooltipPosition] = (0, import_react24.useState)({ x: 0, y: 0 });
-  const tooltipRef = (0, import_react24.useRef)(null);
-  (0, import_react24.useEffect)(() => {
+  const [tooltipPosition, setTooltipPosition] = (0, import_react25.useState)({ x: 0, y: 0 });
+  const tooltipRef = (0, import_react25.useRef)(null);
+  (0, import_react25.useEffect)(() => {
     if (targetRect && tooltipRef.current) {
       const { width, height } = tooltipRef.current.getBoundingClientRect();
       const scrollX = window.scrollX;
@@ -10314,28 +10393,28 @@ var useTooltip = ({ placement, offset, targetRect }) => {
 
 // src/components/tooltip/tooltip.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var Tooltip = (0, import_react25.forwardRef)((originalProps, ref) => {
+var Tooltip = (0, import_react26.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, tooltipStyle.variantKeys);
   const { placement = "top", offset = 5, delay = 100, persistent = false, classNames, noTouchContent } = props;
-  const slots = (0, import_react25.useMemo)(() => tooltipStyle({ ...variantProps }), [variantProps]);
-  const [targetRect, setTargetRect] = (0, import_react25.useState)(null);
+  const slots = (0, import_react26.useMemo)(() => tooltipStyle({ ...variantProps }), [variantProps]);
+  const [targetRect, setTargetRect] = (0, import_react26.useState)(null);
   const { tooltipPosition, tooltipRef } = useTooltip({
     placement,
     offset,
     delay,
     targetRect
   });
-  const childrenRef = (0, import_react25.useRef)(null);
-  const delayTimeoutRef = (0, import_react25.useRef)(null);
-  const getProps = (0, import_react25.useCallback)(
+  const childrenRef = (0, import_react26.useRef)(null);
+  const delayTimeoutRef = (0, import_react26.useRef)(null);
+  const getProps = (0, import_react26.useCallback)(
     (slotKey, classNameKey) => ({
       className: slots[slotKey]({ class: classNames == null ? void 0 : classNames[classNameKey] })
     }),
     [slots, classNames]
   );
-  const getBaseProps = (0, import_react25.useCallback)(() => getProps("base", "base"), [getProps]);
-  const getContentProps = (0, import_react25.useCallback)(() => getProps("content", "content"), [getProps]);
-  const showTooltip = (0, import_react25.useCallback)(() => {
+  const getBaseProps = (0, import_react26.useCallback)(() => getProps("base", "base"), [getProps]);
+  const getContentProps = (0, import_react26.useCallback)(() => getProps("content", "content"), [getProps]);
+  const showTooltip = (0, import_react26.useCallback)(() => {
     if (childrenRef.current) {
       const rect = childrenRef.current.getBoundingClientRect();
       setTargetRect({
@@ -10348,12 +10427,12 @@ var Tooltip = (0, import_react25.forwardRef)((originalProps, ref) => {
       });
     }
   }, []);
-  const hideTooltip = (0, import_react25.useCallback)(() => {
+  const hideTooltip = (0, import_react26.useCallback)(() => {
     if (!persistent) {
       delayTimeoutRef.current = window.setTimeout(() => setTargetRect(null), delay);
     }
   }, [persistent, delay]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (persistent) showTooltip();
   }, [persistent, showTooltip]);
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
@@ -10438,10 +10517,10 @@ var tooltipStyle = tv({
 });
 
 // src/components/modal/modal.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var Modal = (0, import_react26.forwardRef)((props, ref) => {
+var Modal = (0, import_react27.forwardRef)((props, ref) => {
   const [localProps, variantProps] = mapPropsVariants(props, modal.variantKeys);
   const {
     classNames,
@@ -10456,8 +10535,8 @@ var Modal = (0, import_react26.forwardRef)((props, ref) => {
     onCancel,
     extraFooter
   } = localProps;
-  const slots = (0, import_react26.useMemo)(() => modal(variantProps), [variantProps]);
-  (0, import_react26.useEffect)(() => {
+  const slots = (0, import_react27.useMemo)(() => modal(variantProps), [variantProps]);
+  (0, import_react27.useEffect)(() => {
     document.body.classList.toggle("overflow-hidden", !!isOpen);
     if (!isOpen || isKeyboardDismissDisabled) return;
     const handleKeyDown = (e) => {
@@ -10559,18 +10638,18 @@ var modal = tv({
 });
 
 // src/components/drawer/drawer.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_react_dom4 = require("react-dom");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var Drawer = (0, import_react27.forwardRef)((props, ref) => {
+var Drawer = (0, import_react28.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_react27.useState)(isOpen);
-  const [isAnimating, setIsAnimating] = (0, import_react27.useState)(isOpen);
-  const [isContentAnimating, setIsContentAnimating] = (0, import_react27.useState)(isOpen);
-  const slots = (0, import_react27.useMemo)(() => drawer(variantProps), [variantProps]);
-  (0, import_react27.useEffect)(() => {
+  const [shouldRender, setShouldRender] = (0, import_react28.useState)(isOpen);
+  const [isAnimating, setIsAnimating] = (0, import_react28.useState)(isOpen);
+  const [isContentAnimating, setIsContentAnimating] = (0, import_react28.useState)(isOpen);
+  const slots = (0, import_react28.useMemo)(() => drawer(variantProps), [variantProps]);
+  (0, import_react28.useEffect)(() => {
     if (isOpen) {
       setShouldRender(true);
       requestAnimationFrame(() => {
@@ -10588,7 +10667,7 @@ var Drawer = (0, import_react27.forwardRef)((props, ref) => {
       return () => clearTimeout(timer);
     }
   }, [isOpen]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (shouldRender) {
       document.body.classList.add("overflow-hidden");
     } else {
@@ -10719,15 +10798,15 @@ var drawer = tv({
 var drawer_default = Drawer;
 
 // src/components/list/list.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var List = (0, import_react28.forwardRef)((originalProps, ref) => {
+var List = (0, import_react29.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, listStyle.variantKeys);
   const { children, classNames } = props;
-  const slots = (0, import_react28.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_react28.Children.map(children, (child) => {
-    if (!(0, import_react28.isValidElement)(child)) return child;
-    return (0, import_react28.cloneElement)(child, {
+  const slots = (0, import_react29.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_react29.Children.map(children, (child) => {
+    if (!(0, import_react29.isValidElement)(child)) return child;
+    return (0, import_react29.cloneElement)(child, {
       ...variantProps,
       ...child.props
     });
@@ -10764,9 +10843,9 @@ var listStyle = tv({
 });
 
 // src/components/list/listItem.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var ListItem = (0, import_react29.forwardRef)((props, ref) => {
+var ListItem = (0, import_react30.forwardRef)((props, ref) => {
   const [rawProps, variantProps] = mapPropsVariants(props, listItemStyle.variantKeys);
   const {
     title,
@@ -10778,7 +10857,7 @@ var ListItem = (0, import_react29.forwardRef)((props, ref) => {
     classNames,
     onClick
   } = { ...rawProps, ...variantProps };
-  const slots = (0, import_react29.useMemo)(() => listItemStyle(variantProps), [variantProps]);
+  const slots = (0, import_react30.useMemo)(() => listItemStyle(variantProps), [variantProps]);
   const iconSize = ["lg", "xl"].includes(size) ? "lg" : "md";
   const avatarSize = iconSize;
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), "data-selected": selected, onClick, children: [
@@ -10958,9 +11037,9 @@ var listItemStyle = tv({
 });
 
 // src/components/toast/toast.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var Toast = (0, import_react30.forwardRef)((originalProps, ref) => {
+var Toast = (0, import_react31.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, toast.variantKeys);
   const {
     title,
@@ -10974,9 +11053,9 @@ var Toast = (0, import_react30.forwardRef)((originalProps, ref) => {
     disableAnimation,
     onClose
   } = { ...props, ...variantProps };
-  const slots = (0, import_react30.useMemo)(() => toast({ ...variantProps }), [variantProps]);
-  const toastRef = (0, import_react30.useRef)(null);
-  (0, import_react30.useImperativeHandle)(
+  const slots = (0, import_react31.useMemo)(() => toast({ ...variantProps }), [variantProps]);
+  const toastRef = (0, import_react31.useRef)(null);
+  (0, import_react31.useImperativeHandle)(
     ref,
     () => ({
       getWidth: () => {
@@ -11109,7 +11188,7 @@ var toast = tv({
 });
 
 // src/components/toast/use-toast.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // src/components/toast/toast-utils.ts
 var getToastPosition = (placement, width, offset) => {
@@ -11149,9 +11228,9 @@ var getToastPosition = (placement, width, offset) => {
 
 // src/components/toast/use-toast.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var ToastContext = (0, import_react31.createContext)(null);
+var ToastContext = (0, import_react32.createContext)(null);
 var useToast = () => {
-  const context = (0, import_react31.useContext)(ToastContext);
+  const context = (0, import_react32.useContext)(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within a ToastProvider");
   }
@@ -11161,10 +11240,10 @@ var ToastProvider = ({
   globalOptions,
   children
 }) => {
-  const [toasts, setToasts] = (0, import_react31.useState)([]);
-  const [containerStyle, setContainerStyle] = (0, import_react31.useState)({});
-  const toastRef = (0, import_react31.useRef)(null);
-  const addToast = (0, import_react31.useCallback)(
+  const [toasts, setToasts] = (0, import_react32.useState)([]);
+  const [containerStyle, setContainerStyle] = (0, import_react32.useState)({});
+  const toastRef = (0, import_react32.useRef)(null);
+  const addToast = (0, import_react32.useCallback)(
     (title, options = {}) => {
       const id = Date.now() + Math.floor(Math.random() * 1e5);
       const newToast = {
@@ -11181,11 +11260,11 @@ var ToastProvider = ({
     },
     [globalOptions]
   );
-  const removeToast = (0, import_react31.useCallback)((id) => {
+  const removeToast = (0, import_react32.useCallback)((id) => {
     setToasts((prevToasts) => prevToasts.filter((toast2) => toast2.id !== id));
   }, []);
   const contextValue = addToast;
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.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;
@@ -11206,12 +11285,12 @@ var ToastProvider = ({
 };
 
 // src/components/picker/day.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var Day = (0, import_react32.forwardRef)((originalProps, ref) => {
+var Day = (0, import_react33.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, dayStyle.variantKeys);
   const { classNames, children, ...divProps } = props;
-  const slots = (0, import_react32.useMemo)(() => dayStyle({ ...variantProps }), [variantProps]);
+  const slots = (0, import_react33.useMemo)(() => dayStyle({ ...variantProps }), [variantProps]);
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), ...divProps, children });
 });
 Day.displayName = "Day";
@@ -11248,7 +11327,7 @@ var dayStyle = tv({
 });
 
 // src/components/picker/datePicker.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_react_dom5 = require("react-dom");
 
 // src/components/picker/utils.ts
@@ -11265,7 +11344,7 @@ var formatStringToDate = (date) => {
 
 // src/components/picker/datePicker.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
+var DatePicker = (0, import_react34.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, datePickerStyle.variantKeys);
   const {
     classNames,
@@ -11292,26 +11371,26 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
     dualCalendar = false,
     ...inputProps
   } = { ...props, ...variantProps };
-  const [selectedDate, setSelectedDate] = (0, import_react33.useState)(range ? "" : typeof value === "string" ? value || "" : "");
-  const [selectedRange, setSelectedRange] = (0, import_react33.useState)({
+  const [selectedDate, setSelectedDate] = (0, import_react34.useState)(range ? "" : typeof value === "string" ? value || "" : "");
+  const [selectedRange, setSelectedRange] = (0, import_react34.useState)({
     startDate: range && typeof value === "object" ? (value == null ? void 0 : value.startDate) || "" : "",
     endDate: range && typeof value === "object" ? (value == null ? void 0 : value.endDate) || "" : ""
   });
-  const [tempSelectedDate, setTempSelectedDate] = (0, import_react33.useState)(selectedDate);
-  const [tempSelectedRange, setTempSelectedRange] = (0, import_react33.useState)(selectedRange);
-  const [rangeSelection, setRangeSelection] = (0, import_react33.useState)("start");
-  const [isPanelOpen, setIsPanelOpen] = (0, import_react33.useState)(false);
-  const [leftCurrentDate, setLeftCurrentDate] = (0, import_react33.useState)(
+  const [tempSelectedDate, setTempSelectedDate] = (0, import_react34.useState)(selectedDate);
+  const [tempSelectedRange, setTempSelectedRange] = (0, import_react34.useState)(selectedRange);
+  const [rangeSelection, setRangeSelection] = (0, import_react34.useState)("start");
+  const [isPanelOpen, setIsPanelOpen] = (0, import_react34.useState)(false);
+  const [leftCurrentDate, setLeftCurrentDate] = (0, import_react34.useState)(
     range && tempSelectedRange.startDate ? new Date(tempSelectedRange.startDate) : tempSelectedDate ? new Date(tempSelectedDate) : /* @__PURE__ */ new Date()
   );
-  const [rightCurrentDate, setRightCurrentDate] = (0, import_react33.useState)(
+  const [rightCurrentDate, setRightCurrentDate] = (0, import_react34.useState)(
     dualCalendar ? new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() + 1) : /* @__PURE__ */ new Date()
   );
-  const inputWrapperRef = (0, import_react33.useRef)(null);
-  const calendarWrapperRef = (0, import_react33.useRef)(null);
-  const [panelPos, setPanelPos] = (0, import_react33.useState)({ top: -9999, left: -9999 });
-  const blurTimeoutRef = (0, import_react33.useRef)(null);
-  const isConfirmDisabled = (0, import_react33.useMemo)(() => {
+  const inputWrapperRef = (0, import_react34.useRef)(null);
+  const calendarWrapperRef = (0, import_react34.useRef)(null);
+  const [panelPos, setPanelPos] = (0, import_react34.useState)({ top: -9999, left: -9999 });
+  const blurTimeoutRef = (0, import_react34.useRef)(null);
+  const isConfirmDisabled = (0, import_react34.useMemo)(() => {
     if (range) {
       const hasStart = !!tempSelectedRange.startDate;
       const hasEnd = !!tempSelectedRange.endDate;
@@ -11331,7 +11410,7 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
         return dateString;
     }
   };
-  const displayValue = (0, import_react33.useMemo)(() => {
+  const displayValue = (0, import_react34.useMemo)(() => {
     if (range) {
       const start = formatDate(selectedRange.startDate);
       const end = formatDate(selectedRange.endDate);
@@ -11341,7 +11420,7 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
     }
     return formatDate(selectedDate);
   }, [selectedDate, selectedRange, format, range]);
-  const calculatePosition = (0, import_react33.useCallback)(() => {
+  const calculatePosition = (0, import_react34.useCallback)(() => {
     if (inputWrapperRef.current) {
       const rect = inputWrapperRef.current.getBoundingClientRect();
       setPanelPos({ top: rect.bottom + window.scrollY + 6, left: rect.left + window.scrollX });
@@ -11384,7 +11463,7 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
     e.preventDefault();
     if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
   };
-  const getCalendarDates = (0, import_react33.useCallback)((currentDate) => {
+  const getCalendarDates = (0, import_react34.useCallback)((currentDate) => {
     const year = currentDate.getFullYear();
     const month = currentDate.getMonth();
     const firstDayOfMonth = new Date(year, month, 1).getDay();
@@ -11480,7 +11559,7 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
     }
     setIsPanelOpen(false);
   };
-  const getDayProps = (0, import_react33.useCallback)(
+  const getDayProps = (0, import_react34.useCallback)(
     (dateObj, currentDate) => {
       const today = /* @__PURE__ */ new Date();
       const isToday = today.getDate() === dateObj.date && today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear();
@@ -11507,7 +11586,7 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
   const getPlaceholderText = () => {
     return placeholder;
   };
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (range && typeof value === "object") {
       setSelectedRange(value || { startDate: "", endDate: "" });
       setTempSelectedRange(value || { startDate: "", endDate: "" });
@@ -11518,12 +11597,12 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
       if (value) setLeftCurrentDate(new Date(value));
     }
   }, [value, range]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (dualCalendar) {
       setRightCurrentDate(new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() + 1));
     }
   }, [leftCurrentDate, dualCalendar]);
-  const slots = (0, import_react33.useMemo)(() => datePickerStyle({ ...variantProps, dualCalendar }), [variantProps, dualCalendar]);
+  const slots = (0, import_react34.useMemo)(() => datePickerStyle({ ...variantProps, dualCalendar }), [variantProps, dualCalendar]);
   const endContent = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon_default, { name: "calendar", size, className: "cursor-pointer", fill: true, onClick: handleCalendarIconClick });
   const renderCalendar = (currentDate, isLeft) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-[5px]", children: [
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: slots.calendarHead({ class: classNames == null ? void 0 : classNames.calendarHead }), children: dualCalendar ? isLeft ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
@@ -11540,7 +11619,7 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
       /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(icon_button_default, { name: "right", variant: "soft", color: "neutral", onClick: handleLeftNextMonth })
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "grid grid-cols-7", children: daysOfWeek.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(day_default, { variant: "text", children: day }, `${day}-${index}`)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "grid grid-cols-7 gap-y-[5px] text-center", children: getCalendarDates(currentDate).map((week, weekIndex) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react33.Fragment, { children: week.map((dateObj, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "grid grid-cols-7 gap-y-[5px] text-center", children: getCalendarDates(currentDate).map((week, weekIndex) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react34.Fragment, { children: week.map((dateObj, index) => {
       const dayVariant = getDayProps(dateObj, currentDate);
       return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         day_default,
@@ -11688,10 +11767,10 @@ var datePickerStyle = tv({
 });
 
 // src/components/picker/timePicker.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_react_dom6 = require("react-dom");
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var TimePicker = (0, import_react34.forwardRef)((originalProps, ref) => {
+var TimePicker = (0, import_react35.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, timePickerStyle.variantKeys);
   const {
     classNames,
@@ -11704,20 +11783,20 @@ var TimePicker = (0, import_react34.forwardRef)((originalProps, ref) => {
     placeholder = "",
     ...inputProps
   } = props;
-  const [selectedRange, setSelectedRange] = (0, import_react34.useState)(
+  const [selectedRange, setSelectedRange] = (0, import_react35.useState)(
     valueRange || { start: "", end: "" }
   );
-  const [isPanelOpen, setIsPanelOpen] = (0, import_react34.useState)(false);
-  const inputWrapperRef = (0, import_react34.useRef)(null);
-  const panelWrapperRef = (0, import_react34.useRef)(null);
-  const [panelPos, setPanelPos] = (0, import_react34.useState)({ top: -9999, left: -9999 });
-  const displayValue = (0, import_react34.useMemo)(() => {
+  const [isPanelOpen, setIsPanelOpen] = (0, import_react35.useState)(false);
+  const inputWrapperRef = (0, import_react35.useRef)(null);
+  const panelWrapperRef = (0, import_react35.useRef)(null);
+  const [panelPos, setPanelPos] = (0, import_react35.useState)({ top: -9999, left: -9999 });
+  const displayValue = (0, import_react35.useMemo)(() => {
     if (selectedRange.start && selectedRange.end) {
       return `${selectedRange.start} ~ ${selectedRange.end}`;
     }
     return "";
   }, [selectedRange]);
-  const calculatePosition = (0, import_react34.useCallback)(() => {
+  const calculatePosition = (0, import_react35.useCallback)(() => {
     if (inputWrapperRef.current) {
       const rect = inputWrapperRef.current.getBoundingClientRect();
       setPanelPos({ top: rect.bottom + window.scrollY + 6, left: rect.left + window.scrollX });
@@ -11739,7 +11818,7 @@ var TimePicker = (0, import_react34.forwardRef)((originalProps, ref) => {
       setIsPanelOpen(false);
     }
   };
-  const slots = (0, import_react34.useMemo)(() => timePickerStyle({ ...variantProps }), [variantProps]);
+  const slots = (0, import_react35.useMemo)(() => timePickerStyle({ ...variantProps }), [variantProps]);
   const renderHourOptions = () => {
     return Array.from({ length: 24 }, (_, i) => {
       const value = String(i).padStart(2, "0");
@@ -12032,19 +12111,19 @@ var timePickerStyle = tv({
 });
 
 // src/components/tree/tree.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var TreeNodeItem = (0, import_react35.forwardRef)(
+var TreeNodeItem = (0, import_react36.forwardRef)(
   ({ node, depth, fileIcon, selectedName, classNames, onExpand }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react35.useState)(false);
-    const [children, setChildren] = (0, import_react35.useState)(node.children);
-    const slots = (0, import_react35.useMemo)(() => treeStyle(), []);
-    const hasMore = (0, import_react35.useMemo)(() => {
+    const [isOpen, setIsOpen] = (0, import_react36.useState)(false);
+    const [children, setChildren] = (0, import_react36.useState)(node.children);
+    const slots = (0, import_react36.useMemo)(() => treeStyle(), []);
+    const hasMore = (0, import_react36.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_react35.useCallback)(async () => {
+    const toggleOpen = (0, import_react36.useCallback)(async () => {
       if (!isOpen && !children && onExpand && !node.isLeaf) {
         try {
           const result = await onExpand(node);
@@ -12120,7 +12199,7 @@ var TreeNodeItem = (0, import_react35.forwardRef)(
 );
 TreeNodeItem.displayName = "TreeNodeItem";
 var Tree = ({ headerContent, group, groupIcon, fileIcon, selectedName, classNames, onExpand }) => {
-  const slots = (0, import_react35.useMemo)(() => treeStyle(), []);
+  const slots = (0, import_react36.useMemo)(() => treeStyle(), []);
   const handleClick = (e) => {
     var _a;
     (_a = group.onClick) == null ? void 0 : _a.call(group, e);
@@ -12188,19 +12267,19 @@ var treeStyle = tv({
 });
 
 // src/components/fileUpload/fileUpload.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_tailwind_variants34 = require("tailwind-variants");
 
 // src/components/progress/progress.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 
 // src/hooks/useIsMounted.ts
-var import_react36 = require("react");
+var import_react37 = require("react");
 function useIsMounted(props = {}) {
   const { rerender = false, delay = 0 } = props;
-  const isMountedRef = (0, import_react36.useRef)(false);
-  const [isMounted, setIsMounted] = (0, import_react36.useState)(false);
-  (0, import_react36.useEffect)(() => {
+  const isMountedRef = (0, import_react37.useRef)(false);
+  const [isMounted, setIsMounted] = (0, import_react37.useState)(false);
+  (0, import_react37.useEffect)(() => {
     isMountedRef.current = true;
     let timer = null;
     if (rerender) {
@@ -12222,7 +12301,7 @@ function useIsMounted(props = {}) {
       }
     };
   }, [rerender]);
-  return [(0, import_react36.useCallback)(() => isMountedRef.current, []), isMounted];
+  return [(0, import_react37.useCallback)(() => isMountedRef.current, []), isMounted];
 }
 
 // src/components/progress/progress.tsx
@@ -12236,11 +12315,11 @@ var Progress = (originalProps) => {
     delay: 100
   });
   const selfMounted = variantProps.disableAnimation ? true : isMounted;
-  const percentage = (0, import_react37.useMemo)(
+  const percentage = (0, import_react38.useMemo)(
     () => isIndeterminate || !selfMounted ? void 0 : clampPercentage((value - minValue) / (maxValue - minValue) * 100),
     [selfMounted, isIndeterminate, value, minValue, maxValue]
   );
-  const slots = (0, import_react37.useMemo)(() => progressStyle({ ...variantProps }), [variantProps]);
+  const slots = (0, import_react38.useMemo)(() => progressStyle({ ...variantProps }), [variantProps]);
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: slots.track({ class: classNames == null ? void 0 : classNames.track }), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "div",
     {
@@ -12357,14 +12436,14 @@ function FileUpload({
   classNames,
   defaultFile
 }) {
-  const fileInputRef = (0, import_react38.useRef)(null);
-  const uploadIntervalRef = (0, import_react38.useRef)(null);
-  const [currentFile, setCurrentFile] = (0, import_react38.useState)(null);
-  const [uploadProgress, setUploadProgress] = (0, import_react38.useState)(0);
-  const [message, setMessage] = (0, import_react38.useState)(errorMessage);
-  const [displayFileName, setDisplayFileName] = (0, import_react38.useState)(() => (defaultFile == null ? void 0 : defaultFile.name) || "");
-  const [hasUploadedFile, setHasUploadedFile] = (0, import_react38.useState)(false);
-  const [isUploading, setIsUploading] = (0, import_react38.useState)(false);
+  const fileInputRef = (0, import_react39.useRef)(null);
+  const uploadIntervalRef = (0, import_react39.useRef)(null);
+  const [currentFile, setCurrentFile] = (0, import_react39.useState)(null);
+  const [uploadProgress, setUploadProgress] = (0, import_react39.useState)(0);
+  const [message, setMessage] = (0, import_react39.useState)(errorMessage);
+  const [displayFileName, setDisplayFileName] = (0, import_react39.useState)(() => (defaultFile == null ? void 0 : defaultFile.name) || "");
+  const [hasUploadedFile, setHasUploadedFile] = (0, import_react39.useState)(false);
+  const [isUploading, setIsUploading] = (0, import_react39.useState)(false);
   const slots = fileUploadStyle();
   const handleButtonClick = () => {
     var _a;
@@ -12431,14 +12510,14 @@ function FileUpload({
     }
     if (onCancelUpload) onCancelUpload();
   };
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     return () => {
       if (uploadIntervalRef.current) {
         clearInterval(uploadIntervalRef.current);
       }
     };
   }, []);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (errorMessage !== void 0) {
       setMessage(errorMessage);
     }
@@ -12573,12 +12652,12 @@ var skeletonStyle = (0, import_tailwind_variants35.tv)({
 
 // src/components/charts/circularProgress.tsx
 var import_recharts = require("recharts");
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
-var CircularProgress = (0, import_react39.forwardRef)((originalProps, ref) => {
+var CircularProgress = (0, import_react40.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, circularProgressStyle.variantKeys);
   const { label, size = 150, percentage, innerContent, classNames } = { ...props, ...variantProps };
-  const slots = (0, import_react39.useMemo)(() => circularProgressStyle({ ...variantProps }), [variantProps]);
+  const slots = (0, import_react40.useMemo)(() => circularProgressStyle({ ...variantProps }), [variantProps]);
   const data = [
     {
       name: label,
@@ -12610,7 +12689,7 @@ var CircularProgress = (0, import_react39.forwardRef)((originalProps, ref) => {
   const colorValue = originalProps.color;
   const colorKey = colorValue || "blue";
   const currentGradient = gradientColors[colorKey];
-  const wrappedInnerContent = (0, import_react39.useMemo)(() => {
+  const wrappedInnerContent = (0, import_react40.useMemo)(() => {
     return wrapSpanWithClass(innerContent);
   }, [innerContent]);
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
@@ -12704,16 +12783,16 @@ function wrapSpanWithClass(node) {
   if (Array.isArray(node)) {
     return node.map(wrapSpanWithClass);
   }
-  if ((0, import_react39.isValidElement)(node)) {
+  if ((0, import_react40.isValidElement)(node)) {
     const element = node;
     if (element.type === "span") {
       const existing = (_a = element.props.className) != null ? _a : "";
-      return (0, import_react39.cloneElement)(element, {
+      return (0, import_react40.cloneElement)(element, {
         className: `text-xl font-bold ${existing}`.trim()
       });
     }
     if (element.props.children) {
-      return (0, import_react39.cloneElement)(element, {
+      return (0, import_react40.cloneElement)(element, {
         children: wrapSpanWithClass(element.props.children)
       });
     }
@@ -12723,11 +12802,11 @@ function wrapSpanWithClass(node) {
 }
 
 // src/components/charts/areaChart.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_recharts2 = require("recharts");
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var AreaChartComponent = (0, import_react40.forwardRef)((originalProps, ref) => {
-  const uniqueId = (0, import_react40.useId)();
+var AreaChartComponent = (0, import_react41.forwardRef)((originalProps, ref) => {
+  const uniqueId = (0, import_react41.useId)();
   const [props, variantProps] = mapPropsVariants(originalProps, areaChartStyle.variantKeys);
   const {
     data,
@@ -12739,26 +12818,26 @@ var AreaChartComponent = (0, import_react40.forwardRef)((originalProps, ref) =>
     chartHeight = 240,
     classNames
   } = { ...props, ...variantProps };
-  const slots = (0, import_react40.useMemo)(() => areaChartStyle({ ...variantProps }), [variantProps]);
+  const slots = (0, import_react41.useMemo)(() => areaChartStyle({ ...variantProps }), [variantProps]);
   const COLOR_MAP = {
     primary: "#3F9CF2",
     danger: "#FF4684"
   };
-  const colorHex = (0, import_react40.useMemo)(() => COLOR_MAP[color], [color]);
-  const totalChartWidth = (0, import_react40.useMemo)(() => {
+  const colorHex = (0, import_react41.useMemo)(() => COLOR_MAP[color], [color]);
+  const totalChartWidth = (0, import_react41.useMemo)(() => {
     if (!data || !itemWidth) return void 0;
     const dataLength = startFromZero ? data.length + 1 : data.length;
     return dataLength * itemWidth;
   }, [data, itemWidth, startFromZero]);
-  const needsScroll = (0, import_react40.useMemo)(() => {
+  const needsScroll = (0, import_react41.useMemo)(() => {
     return totalChartWidth;
   }, [totalChartWidth]);
-  const processedData = (0, import_react40.useMemo)(() => {
+  const processedData = (0, import_react41.useMemo)(() => {
     if (!data) return [];
     return data;
   }, [data, startFromZero]);
-  const [tickPositions, setTickPositions] = (0, import_react40.useState)([]);
-  const tickRef = (0, import_react40.useRef)([]);
+  const [tickPositions, setTickPositions] = (0, import_react41.useState)([]);
+  const tickRef = (0, import_react41.useRef)([]);
   const CustomTick = ({ x, y, payload }) => {
     if (x !== void 0) {
       tickRef.current.push(x);
@@ -12780,7 +12859,7 @@ var AreaChartComponent = (0, import_react40.forwardRef)((originalProps, ref) =>
       }
     );
   };
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const raf = requestAnimationFrame(() => {
       const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
       const mids = [];
@@ -12907,10 +12986,10 @@ var areaChartStyle = tv({
 });
 
 // src/components/charts/barChart.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_recharts3 = require("recharts");
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var BarChartComponent = (0, import_react41.forwardRef)((originalProps, ref) => {
+var BarChartComponent = (0, import_react42.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, barChartStyle.variantKeys);
   const {
     data = [],
@@ -12922,20 +13001,20 @@ var BarChartComponent = (0, import_react41.forwardRef)((originalProps, ref) => {
     barGap = 20,
     tooltipFormatter
   } = { ...props, ...variantProps };
-  const slots = (0, import_react41.useMemo)(() => barChartStyle({ ...variantProps }), [variantProps]);
-  const chartRef = (0, import_react41.useRef)(null);
-  const tooltipRef = (0, import_react41.useRef)(null);
-  const [tooltipLeft, setTooltipLeft] = (0, import_react41.useState)(0);
-  const [tickPositions, setTickPositions] = (0, import_react41.useState)([]);
-  const tickRef = (0, import_react41.useRef)([]);
-  const [tooltipState, setTooltipState] = (0, import_react41.useState)(null);
+  const slots = (0, import_react42.useMemo)(() => barChartStyle({ ...variantProps }), [variantProps]);
+  const chartRef = (0, import_react42.useRef)(null);
+  const tooltipRef = (0, import_react42.useRef)(null);
+  const [tooltipLeft, setTooltipLeft] = (0, import_react42.useState)(0);
+  const [tickPositions, setTickPositions] = (0, import_react42.useState)([]);
+  const tickRef = (0, import_react42.useRef)([]);
+  const [tooltipState, setTooltipState] = (0, import_react42.useState)(null);
   const handleMouseEnter = (e, dataKey) => {
     if (!tooltipFormatter || !chartRef.current) return;
     const { payload, x, y } = e;
     if (!payload || !payload[dataKey]) return;
     setTooltipState({
-      x,
-      y,
+      barX: x,
+      barY: y - 10,
       value: payload[dataKey],
       dataKey,
       label: payload.title
@@ -12988,7 +13067,7 @@ var BarChartComponent = (0, import_react41.forwardRef)((originalProps, ref) => {
       children: yAxisTickFormatter(payload.value)
     }
   );
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     const raf = requestAnimationFrame(() => {
       const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
       const mids = [];
@@ -13000,13 +13079,13 @@ var BarChartComponent = (0, import_react41.forwardRef)((originalProps, ref) => {
     });
     return () => cancelAnimationFrame(raf);
   }, [data]);
-  (0, import_react41.useLayoutEffect)(() => {
+  (0, import_react42.useLayoutEffect)(() => {
     if (!tooltipState || !chartRef.current || !tooltipRef.current) return;
     const chartRect = chartRef.current.getBoundingClientRect();
     const tooltipRect = tooltipRef.current.getBoundingClientRect();
     const chartWidth = chartRect.width;
     const tooltipWidth = tooltipRect.width;
-    let left = tooltipState.x - tooltipWidth / 2;
+    let left = tooltipState.barX - tooltipWidth / 2;
     const padding2 = 8;
     if (left < padding2) {
       left = padding2;
@@ -13015,114 +13094,128 @@ var BarChartComponent = (0, import_react41.forwardRef)((originalProps, ref) => {
     }
     setTooltipLeft(left);
   }, [tooltipState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { ref: chartRef, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), onMouseLeave: handleMouseLeave, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-      import_recharts3.BarChart,
-      {
-        data,
-        margin: { left: -20 },
-        barSize: 20,
-        barGap,
-        className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("defs", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("linearGradient", { id: "blueGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "0%", stopColor: "#DEC1FA" }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "100%", stopColor: "#3F9CF2" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("linearGradient", { id: "greenGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "0%", stopColor: "#C2E59C" }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "100%", stopColor: "#64B3F4" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("linearGradient", { id: "pinkGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "0%", stopColor: "#DDD6F3" }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "100%", stopColor: "#FAACA8" })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            import_recharts3.CartesianGrid,
-            {
-              vertical: true,
-              horizontal: false,
-              strokeDasharray: "4 4",
-              className: "stroke-neutral-light",
-              verticalPoints: tickPositions
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            import_recharts3.XAxis,
-            {
-              dataKey: "title",
-              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-              tickLine: false,
-              tick: CustomTick,
-              padding: { left: 0, right: 0 }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            import_recharts3.YAxis,
-            {
-              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-              tickLine: false,
-              tick: CustomYAxisTick,
-              ticks: yAxisTicks,
-              domain: yAxisDomain
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            import_recharts3.Bar,
-            {
-              dataKey: "blue",
-              fill: "url(#blueGradient)",
-              shape: CustomBarShape,
-              onMouseEnter: (e) => handleMouseEnter(e, "blue"),
-              onMouseLeave: handleMouseLeave
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            import_recharts3.Bar,
-            {
-              dataKey: "green",
-              fill: "url(#greenGradient)",
-              shape: CustomBarShape,
-              onMouseEnter: (e) => handleMouseEnter(e, "green"),
-              onMouseLeave: handleMouseLeave
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            import_recharts3.Bar,
-            {
-              dataKey: "pink",
-              fill: "url(#pinkGradient)",
-              shape: CustomBarShape,
-              onMouseEnter: (e) => handleMouseEnter(e, "pink"),
-              onMouseLeave: handleMouseLeave
-            }
-          )
-        ]
-      }
-    ) }),
-    tooltipFormatter && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      "div",
-      {
-        ref: tooltipRef,
-        style: {
-          position: "absolute",
-          left: tooltipLeft + 10,
-          top: (tooltipState == null ? void 0 : tooltipState.y) ? tooltipState.y - 40 : 0,
-          pointerEvents: "none",
-          zIndex: 10,
-          opacity: tooltipState ? 1 : 0,
-          transition: "opacity 0.1s ease-out",
-          visibility: tooltipState ? "visible" : "hidden",
-          width: "fit-content",
-          whiteSpace: "nowrap"
-        },
-        children: tooltipState && tooltipFormatter(tooltipState)
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    "div",
+    {
+      ref: chartRef,
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
+      onMouseLeave: handleMouseLeave,
+      onMouseMove: (e) => {
+        const target = e.target;
+        if (!target.closest('[data-testid="recharts-bar-rectangle"]') && !target.closest(".recharts-bar-rectangle") && target.tagName !== "path") {
+          setTooltipState(null);
+        }
+      },
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+          import_recharts3.BarChart,
+          {
+            data,
+            margin: { left: -20 },
+            barSize: 20,
+            barGap,
+            className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("defs", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("linearGradient", { id: "blueGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "0%", stopColor: "#DEC1FA" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "100%", stopColor: "#3F9CF2" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("linearGradient", { id: "greenGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "0%", stopColor: "#C2E59C" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "100%", stopColor: "#64B3F4" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("linearGradient", { id: "pinkGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "0%", stopColor: "#DDD6F3" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "100%", stopColor: "#FAACA8" })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_recharts3.CartesianGrid,
+                {
+                  vertical: true,
+                  horizontal: false,
+                  strokeDasharray: "4 4",
+                  className: "stroke-neutral-light",
+                  verticalPoints: tickPositions
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_recharts3.XAxis,
+                {
+                  dataKey: "title",
+                  axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+                  tickLine: false,
+                  tick: CustomTick,
+                  padding: { left: 0, right: 0 }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_recharts3.YAxis,
+                {
+                  axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+                  tickLine: false,
+                  tick: CustomYAxisTick,
+                  ticks: yAxisTicks,
+                  domain: yAxisDomain
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_recharts3.Bar,
+                {
+                  dataKey: "blue",
+                  fill: "url(#blueGradient)",
+                  shape: CustomBarShape,
+                  onMouseEnter: (e) => handleMouseEnter(e, "blue"),
+                  onMouseLeave: handleMouseLeave
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_recharts3.Bar,
+                {
+                  dataKey: "green",
+                  fill: "url(#greenGradient)",
+                  shape: CustomBarShape,
+                  onMouseEnter: (e) => handleMouseEnter(e, "green"),
+                  onMouseLeave: handleMouseLeave
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_recharts3.Bar,
+                {
+                  dataKey: "pink",
+                  fill: "url(#pinkGradient)",
+                  shape: CustomBarShape,
+                  onMouseEnter: (e) => handleMouseEnter(e, "pink"),
+                  onMouseLeave: handleMouseLeave
+                }
+              )
+            ]
+          }
+        ) }),
+        tooltipFormatter && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          "div",
+          {
+            ref: tooltipRef,
+            style: {
+              position: "absolute",
+              left: tooltipLeft + 10,
+              top: (tooltipState == null ? void 0 : tooltipState.barY) || 0,
+              pointerEvents: "none",
+              zIndex: 10,
+              opacity: tooltipState ? 1 : 0,
+              transition: "opacity 0.1s ease-out",
+              visibility: tooltipState ? "visible" : "hidden",
+              width: "fit-content",
+              whiteSpace: "nowrap"
+            },
+            children: tooltipState && tooltipFormatter(tooltipState)
+          }
+        )
+      ]
+    }
+  );
 });
 BarChartComponent.displayName = "barChart";
 var barChart_default = BarChartComponent;
@@ -13146,13 +13239,13 @@ function BarChartTooltip({ className = "", children }) {
 
 // src/components/charts/radarChart.tsx
 var import_recharts4 = require("recharts");
-var import_react42 = require("react");
+var import_react43 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var RadarChart = (0, import_react42.forwardRef)((originalProps, ref) => {
+var RadarChart = (0, import_react43.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, radarChartStyle.variantKeys);
   const { data, label, classNames, tooltipFormatter } = { ...props, ...variantProps };
-  const slots = (0, import_react42.useMemo)(() => radarChartStyle({ ...variantProps }), [variantProps]);
-  const normalizedData = (0, import_react42.useMemo)(() => {
+  const slots = (0, import_react43.useMemo)(() => radarChartStyle({ ...variantProps }), [variantProps]);
+  const normalizedData = (0, import_react43.useMemo)(() => {
     if (!data || data.length === 0) return [];
     return data.map((item) => ({
       ...item,
@@ -13161,18 +13254,18 @@ var RadarChart = (0, import_react42.forwardRef)((originalProps, ref) => {
       originalFullMark: item.fullMark || 100
     }));
   }, [data]);
-  const containerHeight = (0, import_react42.useMemo)(() => {
+  const containerHeight = (0, import_react43.useMemo)(() => {
     if (!data || data.length === 0) return 250;
     return data.length === 3 ? 245 : 306;
   }, [data]);
-  const chartMargin = (0, import_react42.useMemo)(() => {
+  const chartMargin = (0, import_react43.useMemo)(() => {
     return { top: 0, right: 0, bottom: 0, left: 0 };
   }, [data]);
-  const outerRadius = (0, import_react42.useMemo)(() => {
+  const outerRadius = (0, import_react43.useMemo)(() => {
     if (!data || data.length === 0) return 125;
     return data.length === 3 ? 135 : 125;
   }, [data]);
-  const chartCenter = (0, import_react42.useMemo)(() => {
+  const chartCenter = (0, import_react43.useMemo)(() => {
     if (!data || data.length === 0) return {};
     if (data.length === 3) return { cx: "50%", cy: "65%" };
     return {};
@@ -13249,10 +13342,10 @@ var radarChartStyle = tv({
 });
 
 // src/components/charts/simpleBarChart.tsx
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_recharts5 = require("recharts");
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var SimpleBarChartComponent = (0, import_react43.forwardRef)((originalProps, ref) => {
+var SimpleBarChartComponent = (0, import_react44.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, simpleBarChartStyle.variantKeys);
   const {
     data = [],
@@ -13263,13 +13356,13 @@ var SimpleBarChartComponent = (0, import_react43.forwardRef)((originalProps, ref
     barGap = 20,
     tooltipFormatter
   } = { ...props, ...variantProps };
-  const slots = (0, import_react43.useMemo)(() => simpleBarChartStyle({ ...variantProps }), [variantProps]);
-  const chartRef = (0, import_react43.useRef)(null);
-  const tooltipRef = (0, import_react43.useRef)(null);
-  const [tooltipLeft, setTooltipLeft] = (0, import_react43.useState)(0);
-  const [tickPositions, setTickPositions] = (0, import_react43.useState)([]);
-  const [tooltipState, setTooltipState] = (0, import_react43.useState)(null);
-  (0, import_react43.useEffect)(() => {
+  const slots = (0, import_react44.useMemo)(() => simpleBarChartStyle({ ...variantProps }), [variantProps]);
+  const chartRef = (0, import_react44.useRef)(null);
+  const tooltipRef = (0, import_react44.useRef)(null);
+  const [tooltipLeft, setTooltipLeft] = (0, import_react44.useState)(0);
+  const [tickPositions, setTickPositions] = (0, import_react44.useState)([]);
+  const [tooltipState, setTooltipState] = (0, import_react44.useState)(null);
+  (0, import_react44.useEffect)(() => {
     if (!chartRef.current || !data.length) return;
     const updateDimensions = () => {
       if (!chartRef.current) return;
@@ -13305,8 +13398,8 @@ var SimpleBarChartComponent = (0, import_react43.forwardRef)((originalProps, ref
     const { payload, x, y } = e;
     if (!payload) return;
     setTooltipState({
-      x,
-      y,
+      barX: x,
+      barY: y - 20,
       value: payload.value,
       label: payload.title
     });
@@ -13343,13 +13436,13 @@ var SimpleBarChartComponent = (0, import_react43.forwardRef)((originalProps, ref
       }
     );
   };
-  (0, import_react43.useLayoutEffect)(() => {
+  (0, import_react44.useLayoutEffect)(() => {
     if (!tooltipState || !chartRef.current || !tooltipRef.current) return;
     const chartRect = chartRef.current.getBoundingClientRect();
     const tooltipRect = tooltipRef.current.getBoundingClientRect();
     const chartWidth = chartRect.width;
     const tooltipWidth = tooltipRect.width;
-    let left = tooltipState.x - tooltipWidth / 2;
+    let left = tooltipState.barX - tooltipWidth / 2;
     const padding2 = 8;
     if (left < padding2) {
       left = padding2;
@@ -13358,82 +13451,96 @@ var SimpleBarChartComponent = (0, import_react43.forwardRef)((originalProps, ref
     }
     setTooltipLeft(left);
   }, [tooltipState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { ref: chartRef, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), onMouseLeave: handleMouseLeave, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_recharts5.ResponsiveContainer, { width: "100%", height: 140, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-      import_recharts5.BarChart,
-      {
-        data,
-        margin: { left: 0, right: 0, top: 0, bottom: 0 },
-        barSize: 10,
-        barGap,
-        className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            import_recharts5.CartesianGrid,
-            {
-              vertical: true,
-              horizontal: false,
-              strokeDasharray: "4 4",
-              className: "stroke-neutral-light",
-              verticalPoints: tickPositions
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            import_recharts5.CartesianGrid,
-            {
-              vertical: true,
-              horizontal: false,
-              strokeDasharray: "0",
-              strokeWidth: 2,
-              className: "stroke-neutral-light",
-              verticalPoints: [0]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            import_recharts5.XAxis,
-            {
-              dataKey: "title",
-              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-              tickLine: false,
-              tick: CustomTick,
-              padding: { left: 0, right: 0 }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_recharts5.YAxis, { hide: true, ticks: yAxisTicks, domain: yAxisDomain }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            import_recharts5.Bar,
-            {
-              dataKey: "value",
-              fill: "#C7E5FA",
-              shape: CustomBarShape,
-              onMouseEnter: handleMouseEnter,
-              onMouseLeave: handleMouseLeave
-            }
-          )
-        ]
-      }
-    ) }),
-    tooltipFormatter && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-      "div",
-      {
-        ref: tooltipRef,
-        style: {
-          position: "absolute",
-          left: tooltipLeft + 5,
-          top: (tooltipState == null ? void 0 : tooltipState.y) ? tooltipState.y - 20 : 0,
-          pointerEvents: "none",
-          zIndex: 10,
-          opacity: tooltipState ? 1 : 0,
-          transition: "opacity 0.1s ease-out",
-          visibility: tooltipState ? "visible" : "hidden",
-          width: "fit-content",
-          whiteSpace: "nowrap"
-        },
-        children: tooltipState && tooltipFormatter(tooltipState)
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    "div",
+    {
+      ref: chartRef,
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
+      onMouseLeave: handleMouseLeave,
+      onMouseMove: (e) => {
+        const target = e.target;
+        if (!target.closest('[data-testid="recharts-bar-rectangle"]') && !target.closest(".recharts-bar-rectangle") && target.tagName !== "path") {
+          setTooltipState(null);
+        }
+      },
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_recharts5.ResponsiveContainer, { width: "100%", height: 140, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+          import_recharts5.BarChart,
+          {
+            data,
+            margin: { left: 0, right: 0, top: 0, bottom: 0 },
+            barSize: 10,
+            barGap,
+            className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                import_recharts5.CartesianGrid,
+                {
+                  vertical: true,
+                  horizontal: false,
+                  strokeDasharray: "4 4",
+                  className: "stroke-neutral-light",
+                  verticalPoints: tickPositions
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                import_recharts5.CartesianGrid,
+                {
+                  vertical: true,
+                  horizontal: false,
+                  strokeDasharray: "0",
+                  strokeWidth: 2,
+                  className: "stroke-neutral-light",
+                  verticalPoints: [0]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                import_recharts5.XAxis,
+                {
+                  dataKey: "title",
+                  axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+                  tickLine: false,
+                  tick: CustomTick,
+                  padding: { left: 0, right: 0 }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_recharts5.YAxis, { hide: true, ticks: yAxisTicks, domain: yAxisDomain }),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                import_recharts5.Bar,
+                {
+                  dataKey: "value",
+                  fill: "#C7E5FA",
+                  shape: CustomBarShape,
+                  onMouseEnter: handleMouseEnter,
+                  onMouseLeave: handleMouseLeave
+                }
+              )
+            ]
+          }
+        ) }),
+        tooltipFormatter && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          "div",
+          {
+            ref: tooltipRef,
+            style: {
+              position: "absolute",
+              left: tooltipLeft + 5,
+              top: (tooltipState == null ? void 0 : tooltipState.barY) || 0,
+              pointerEvents: "none",
+              zIndex: 10,
+              opacity: tooltipState ? 1 : 0,
+              transition: "opacity 0.1s ease-out",
+              visibility: tooltipState ? "visible" : "hidden",
+              width: "fit-content",
+              whiteSpace: "nowrap"
+            },
+            children: tooltipState && tooltipFormatter(tooltipState)
+          }
+        )
+      ]
+    }
+  );
 });
 SimpleBarChartComponent.displayName = "simpleBarChart";
 var simpleBarChart_default = SimpleBarChartComponent;
@@ -13447,9 +13554,9 @@ var simpleBarChartStyle = tv({
 });
 
 // src/components/starRating/starRating.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var StarRating = (0, import_react44.forwardRef)((originalProps, ref) => {
+var StarRating = (0, import_react45.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, starRatingStyle.variantKeys);
   const {
     stars,
@@ -13462,8 +13569,8 @@ var StarRating = (0, import_react44.forwardRef)((originalProps, ref) => {
     filledColor = "text-primary-main",
     emptyColor = "text-neutral-soft"
   } = { ...props, ...variantProps };
-  const slots = (0, import_react44.useMemo)(() => starRatingStyle({ ...variantProps }), [variantProps]);
-  const [hoverRating, setHoverRating] = (0, import_react44.useState)(0);
+  const slots = (0, import_react45.useMemo)(() => starRatingStyle({ ...variantProps }), [variantProps]);
+  const [hoverRating, setHoverRating] = (0, import_react45.useState)(0);
   const handleStarClick = (starIndex, isHalf = false) => {
     if (readOnly || !onChange) return;
     let newRating;