@unifiedsoftware/react-ui 1.0.20 → 1.0.22

package/dist/index.js

@@ -120,12 +120,14 @@ __export(src_exports, {
   assignRef: () => assignRef,
   clsx: () => clsx_default,
   getOpenValuesByPathname: () => getOpenValuesByPathname,
+  hasResizeObserver: () => hasResizeObserver,
   mergeRefs: () => mergeRefs_default,
   scrollToItem: () => scrollToItem,
   useAccordionItem: () => useAccordionItem,
   useCollapse: () => useCollapse,
   useDebounce: () => useDebounce_default,
   useDisclosure: () => useDisclosure_default,
+  useEffectEvent: () => useEffectEvent_default,
   useElementSize: () => useElementSize_default,
   useInfiniteQuery: () => useInfiniteQuery_default,
   useLocalStorage: () => useLocalStorage,
@@ -133,13 +135,15 @@ __export(src_exports, {
   useMenuItemValue: () => useMenuItemValue,
   useOnClickOutside: () => useOnClickOutside_default,
   usePrevious: () => usePrevious,
+  useResizeObserver: () => useResizeObserver_default,
   useStep: () => useStep,
+  useValueEffect: () => useValueEffect_default,
   useVirtualizer: () => useVirtualizer_default
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/components/Autocomplete/Autocomplete.tsx
-var import_react35 = require("react");
+var import_react38 = require("react");
 
 // src/constants/index.ts
 var PREFIX_CLS = "us-";
@@ -471,10 +475,91 @@ function useElementSize(options) {
 }
 var useElementSize_default = useElementSize;
 
-// src/icons/ChevronDownIcon.tsx
+// src/hooks/useResizeObserver/useResizeObserver.ts
 var import_react12 = require("react");
+function hasResizeObserver() {
+  return typeof window.ResizeObserver !== "undefined";
+}
+function useResizeObserver(options) {
+  const { ref, onResize } = options;
+  (0, import_react12.useEffect)(() => {
+    const element = ref == null ? void 0 : ref.current;
+    if (!element) {
+      return;
+    }
+    if (!hasResizeObserver()) {
+      window.addEventListener("resize", onResize);
+      return () => {
+        window.removeEventListener("resize", onResize);
+      };
+    } else {
+      const resizeObserver = new window.ResizeObserver((entries) => {
+        if (!entries.length) {
+          return;
+        }
+        onResize();
+      });
+      resizeObserver.observe(element);
+      return () => {
+        if (element) {
+          resizeObserver.unobserve(element);
+        }
+      };
+    }
+  }, [ref, onResize]);
+}
+var useResizeObserver_default = useResizeObserver;
+
+// src/hooks/useEffectEvent/useEffectEvent.ts
+var import_react13 = require("react");
+function useEffectEvent(fn) {
+  const ref = (0, import_react13.useRef)(null);
+  (0, import_react13.useLayoutEffect)(() => {
+    ref.current = fn;
+  }, [fn]);
+  return (0, import_react13.useCallback)((...args) => {
+    const f = ref.current;
+    return f(...args);
+  }, []);
+}
+var useEffectEvent_default = useEffectEvent;
+
+// src/hooks/useValueEffect/useValueEffect.ts
+var import_react14 = require("react");
+function useValueEffect(defaultValue) {
+  const [value, setValue] = (0, import_react14.useState)(defaultValue);
+  const effect = (0, import_react14.useRef)(null);
+  const nextRef = useEffectEvent_default(() => {
+    if (!effect.current)
+      return;
+    const newValue = effect.current.next();
+    if (newValue.done) {
+      effect.current = null;
+      return;
+    }
+    if (value === newValue.value) {
+      nextRef();
+    } else {
+      setValue(newValue.value);
+    }
+  });
+  (0, import_react14.useLayoutEffect)(() => {
+    if (effect.current) {
+      nextRef();
+    }
+  });
+  const queue = useEffectEvent_default((fn) => {
+    effect.current = fn(value);
+    nextRef();
+  });
+  return [value, queue];
+}
+var useValueEffect_default = useValueEffect;
+
+// src/icons/ChevronDownIcon.tsx
+var import_react15 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var ChevronDownIcon = (0, import_react12.forwardRef)((props, ref) => {
+var ChevronDownIcon = (0, import_react15.forwardRef)((props, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
@@ -497,9 +582,9 @@ var ChevronDownIcon = (0, import_react12.forwardRef)((props, ref) => {
 var ChevronDownIcon_default = ChevronDownIcon;
 
 // src/icons/ChevronUpIcon.tsx
-var import_react13 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var ChevronUpIcon = (0, import_react13.forwardRef)((props, ref) => {
+var ChevronUpIcon = (0, import_react16.forwardRef)((props, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
@@ -522,9 +607,9 @@ var ChevronUpIcon = (0, import_react13.forwardRef)((props, ref) => {
 var ChevronUpIcon_default = ChevronUpIcon;
 
 // src/icons/LoaderIcon.tsx
-var import_react14 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var LoaderIcon = (0, import_react14.forwardRef)((props, ref) => {
+var LoaderIcon = (0, import_react17.forwardRef)((props, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
@@ -549,9 +634,9 @@ var LoaderIcon = (0, import_react14.forwardRef)((props, ref) => {
 var LoaderIcon_default = LoaderIcon;
 
 // src/icons/CloseIcon.tsx
-var import_react15 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var CloseIcon = (0, import_react15.forwardRef)((props, ref) => {
+var CloseIcon = (0, import_react18.forwardRef)((props, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
@@ -666,14 +751,14 @@ var mergeRefs_default = mergeRefs;
 
 // src/components/Button/Button.tsx
 var import_clsx3 = __toESM(require("clsx"));
-var import_react17 = require("react");
+var import_react20 = require("react");
 
 // src/components/Icon/Icon.tsx
 var import_clsx2 = __toESM(require("clsx"));
-var import_react16 = require("react");
-var Icon = (0, import_react16.forwardRef)(({ children, size }, ref) => {
-  const child = import_react16.Children.only(children);
-  return (0, import_react16.cloneElement)(child, __spreadProps(__spreadValues({
+var import_react19 = require("react");
+var Icon = (0, import_react19.forwardRef)(({ children, size }, ref) => {
+  const child = import_react19.Children.only(children);
+  return (0, import_react19.cloneElement)(child, __spreadProps(__spreadValues({
     ref
   }, child.props), {
     className: (0, import_clsx2.default)(`${PREFIX_CLS}icon`, { [`${PREFIX_CLS}font-size-${size}`]: size }, child.props.className)
@@ -683,7 +768,7 @@ var Icon_default = Icon;
 
 // src/components/Button/Button.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Button = (0, import_react17.forwardRef)(
+var Button = (0, import_react20.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "button",
@@ -747,13 +832,13 @@ var Button = (0, import_react17.forwardRef)(
 );
 
 // src/components/Popover/Popover.tsx
-var import_react21 = require("react");
+var import_react24 = require("react");
 
 // src/components/Portal/Portal.tsx
-var import_react18 = require("react");
+var import_react21 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Portal = (0, import_react18.forwardRef)(({ children, container }, ref) => {
+var Portal = (0, import_react21.forwardRef)(({ children, container }, ref) => {
   const prefixCls = PREFIX_CLS;
   return (0, import_react_dom.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: `${prefixCls}portal`, children }),
@@ -764,10 +849,10 @@ var Portal_default = Portal;
 
 // src/components/Transition/Transition.tsx
 var import_clsx4 = __toESM(require("clsx"));
-var import_react19 = require("react");
+var import_react22 = require("react");
 var import_react_transition_group = require("react-transition-group");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var Transition = (0, import_react19.forwardRef)((props, ref) => {
+var Transition = (0, import_react22.forwardRef)((props, ref) => {
   const {
     children,
     className,
@@ -801,10 +886,10 @@ var Transition_default = Transition;
 var POPOVER_TRANSITION_DURATION_LEAVE = 150;
 
 // src/components/Popover/PopoverContext.tsx
-var import_react20 = require("react");
-var PopoverContext = (0, import_react20.createContext)(null);
+var import_react23 = require("react");
+var PopoverContext = (0, import_react23.createContext)(null);
 var usePopover = () => {
-  const context = (0, import_react20.useContext)(PopoverContext);
+  const context = (0, import_react23.useContext)(PopoverContext);
   if (!context) {
     throw new Error("`usePopover` must be used within a `<Popover />`");
   }
@@ -826,10 +911,10 @@ var Popover = (props) => {
     onToggle,
     onAfterClose
   } = props;
-  const triggerRef = (0, import_react21.useRef)(null);
-  const contentRef = (0, import_react21.useRef)(null);
-  const [internalOpen, setInternalOpen] = (0, import_react21.useState)(props.isOpen || false);
-  const [trigger, content] = import_react21.Children.toArray(children);
+  const triggerRef = (0, import_react24.useRef)(null);
+  const contentRef = (0, import_react24.useRef)(null);
+  const [internalOpen, setInternalOpen] = (0, import_react24.useState)(props.isOpen || false);
+  const [trigger, content] = import_react24.Children.toArray(children);
   const prefixCls = PREFIX_CLS;
   const handleOpen = () => {
     if (isOpen !== void 0) {
@@ -852,7 +937,7 @@ var Popover = (props) => {
       setInternalOpen((prevState) => !prevState);
     }
   };
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     setInternalOpen(isOpen || false);
   }, [isOpen]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
@@ -881,7 +966,7 @@ var Popover = (props) => {
             name: `${prefixCls}popover`,
             unmountOnExit: true,
             onExited: onAfterClose,
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Portal_default, { children: (0, import_react21.cloneElement)(import_react21.Children.only(content), __spreadProps(__spreadValues({}, content.props), {
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Portal_default, { children: (0, import_react24.cloneElement)(import_react24.Children.only(content), __spreadProps(__spreadValues({}, content.props), {
               ref: contentRef
             })) })
           }
@@ -893,7 +978,7 @@ var Popover = (props) => {
 var Popover_default = Popover;
 
 // src/components/Popover/PopoverContent.tsx
-var import_react22 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function getScrollParent(node) {
   if (node == null) {
@@ -905,12 +990,12 @@ function getScrollParent(node) {
     return getScrollParent(node.parentNode);
   }
 }
-var PopoverContent = (0, import_react22.forwardRef)((props, ref) => {
+var PopoverContent = (0, import_react25.forwardRef)((props, ref) => {
   const _a = props, { children, style, className, onClick } = _a, rest = __objRest(_a, ["children", "style", "className", "onClick"]);
   const { triggerRef, contentRef, target, onClose } = usePopover();
   const prefixCls = PREFIX_CLS;
-  const menuListRef = (0, import_react22.useRef)(null);
-  const [contentStyle, setContentStyle] = (0, import_react22.useState)({
+  const menuListRef = (0, import_react25.useRef)(null);
+  const [contentStyle, setContentStyle] = (0, import_react25.useState)({
     position: "absolute",
     top: 0,
     left: 0,
@@ -933,7 +1018,7 @@ var PopoverContent = (0, import_react22.forwardRef)((props, ref) => {
     ev.stopPropagation();
     onClick == null ? void 0 : onClick(ev);
   };
-  const handleSize = (0, import_react22.useCallback)(() => {
+  const handleSize = (0, import_react25.useCallback)(() => {
     var _a2, _b;
     const popoverRect = (_a2 = contentRef.current) == null ? void 0 : _a2.getBoundingClientRect();
     const triggerClientRect = (_b = triggerRef.current) == null ? void 0 : _b.getBoundingClientRect();
@@ -964,7 +1049,7 @@ var PopoverContent = (0, import_react22.forwardRef)((props, ref) => {
     });
     setContentStyle(style2);
   }, []);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     handleSize();
     containerEl.addEventListener("scroll", handleSize);
     window.addEventListener("orientationchange", handleSize);
@@ -973,7 +1058,7 @@ var PopoverContent = (0, import_react22.forwardRef)((props, ref) => {
       window.removeEventListener("orientationchange", handleSize);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     __spreadProps(__spreadValues({
       ref: mergeRefs_default(menuListRef, ref),
@@ -981,21 +1066,18 @@ var PopoverContent = (0, import_react22.forwardRef)((props, ref) => {
       style: __spreadValues(__spreadValues({}, style), contentStyle),
       onClick: handleClick
     }, rest), {
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${prefixCls}popover__overlay` }),
-        children
-      ]
+      children
     })
   );
 });
 var PopoverContent_default = PopoverContent;
 
 // src/components/Popover/PopoverTrigger.tsx
-var import_react23 = require("react");
-var PopoverTrigger = (0, import_react23.forwardRef)((props, ref) => {
+var import_react26 = require("react");
+var PopoverTrigger = (0, import_react26.forwardRef)((props, ref) => {
   const _a = props, { children, onClick } = _a, rest = __objRest(_a, ["children", "onClick"]);
   const { isOpen, triggerRef, triggerClosable, onOpen, onClose } = usePopover();
-  const child = import_react23.Children.only(typeof children === "function" ? children(isOpen) : children);
+  const child = import_react26.Children.only(typeof children === "function" ? children(isOpen) : children);
   const handleClick = (ev) => {
     var _a2, _b;
     ev.preventDefault();
@@ -1003,7 +1085,7 @@ var PopoverTrigger = (0, import_react23.forwardRef)((props, ref) => {
     onClick == null ? void 0 : onClick(ev);
     (_b = (_a2 = child.props).onClick) == null ? void 0 : _b.call(_a2, ev);
   };
-  return (0, import_react23.cloneElement)(child, __spreadProps(__spreadValues(__spreadValues({}, child.props), rest), {
+  return (0, import_react26.cloneElement)(child, __spreadProps(__spreadValues(__spreadValues({}, child.props), rest), {
     ref: mergeRefs_default(ref, triggerRef),
     onClick: handleClick
   }));
@@ -1011,12 +1093,12 @@ var PopoverTrigger = (0, import_react23.forwardRef)((props, ref) => {
 var PopoverTrigger_default = PopoverTrigger;
 
 // src/components/Autocomplete/AutocompleteContent.tsx
-var import_react33 = require("react");
+var import_react36 = require("react");
 
 // src/components/List/List.tsx
-var import_react24 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var List = (0, import_react24.forwardRef)((_a, ref) => {
+var List = (0, import_react27.forwardRef)((_a, ref) => {
   var _b = _a, { as: Component = "div", children } = _b, rest = __objRest(_b, ["as", "children"]);
   const prefixCls = PREFIX_CLS;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Component, __spreadProps(__spreadValues({ ref, className: `${prefixCls}list` }, rest), { children }));
@@ -1024,16 +1106,16 @@ var List = (0, import_react24.forwardRef)((_a, ref) => {
 var List_default = List;
 
 // src/components/List/ListGroup.tsx
-var import_react30 = require("react");
+var import_react33 = require("react");
 
 // src/components/Collapse/Collapse.tsx
-var import_react26 = require("react");
+var import_react29 = require("react");
 
 // src/components/Collapse/CollapseContext.tsx
-var import_react25 = require("react");
-var CollapseContext = (0, import_react25.createContext)(null);
+var import_react28 = require("react");
+var CollapseContext = (0, import_react28.createContext)(null);
 var useCollapse = () => {
-  const context = (0, import_react25.useContext)(CollapseContext);
+  const context = (0, import_react28.useContext)(CollapseContext);
   if (!context) {
     throw new Error("`useCollapse` must be used within a `<Collapse />`");
   }
@@ -1044,10 +1126,10 @@ var CollapseContext_default = CollapseContext;
 // src/components/Collapse/Collapse.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Collapse = ({ children, isOpen, onOpen, onClose, onToggle }) => {
-  const collapseRef = (0, import_react26.useRef)(null);
-  const [selfIsOpen, setSelfIsOpen] = (0, import_react26.useState)(isOpen != null ? isOpen : false);
-  const [heightAuto, setHeightAuto] = (0, import_react26.useState)(false);
-  const [trigger, content] = import_react26.Children.toArray(children);
+  const collapseRef = (0, import_react29.useRef)(null);
+  const [selfIsOpen, setSelfIsOpen] = (0, import_react29.useState)(isOpen != null ? isOpen : false);
+  const [heightAuto, setHeightAuto] = (0, import_react29.useState)(false);
+  const [trigger, content] = import_react29.Children.toArray(children);
   const handleOpen = () => {
     setSelfIsOpen(true);
     onOpen == null ? void 0 : onOpen();
@@ -1060,7 +1142,7 @@ var Collapse = ({ children, isOpen, onOpen, onClose, onToggle }) => {
     setSelfIsOpen((prevState) => !prevState);
     onToggle == null ? void 0 : onToggle();
   };
-  (0, import_react26.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (isOpen !== void 0) {
       setSelfIsOpen(isOpen);
     }
@@ -1094,12 +1176,12 @@ var Collapse_default = Collapse;
 
 // src/components/Collapse/CollapseContent.tsx
 var import_clsx5 = __toESM(require("clsx"));
-var import_react27 = require("react");
-var CollapseContent = (0, import_react27.forwardRef)(({ children }, ref) => {
+var import_react30 = require("react");
+var CollapseContent = (0, import_react30.forwardRef)(({ children }, ref) => {
   var _a, _b;
   const { collapseRef, isOpen, heightAuto } = useCollapse();
-  const child = import_react27.Children.only(children);
-  return (0, import_react27.cloneElement)(child, __spreadProps(__spreadValues({}, child.props), {
+  const child = import_react30.Children.only(children);
+  return (0, import_react30.cloneElement)(child, __spreadProps(__spreadValues({}, child.props), {
     ref: (node) => {
       collapseRef.current = node;
       if (ref !== null) {
@@ -1115,12 +1197,12 @@ var CollapseContent = (0, import_react27.forwardRef)(({ children }, ref) => {
 var CollapseContent_default = CollapseContent;
 
 // src/components/Collapse/CollapseTrigger.tsx
-var import_react28 = require("react");
-var CollapseTrigger = (0, import_react28.forwardRef)(({ children }, ref) => {
+var import_react31 = require("react");
+var CollapseTrigger = (0, import_react31.forwardRef)(({ children }, ref) => {
   const { collapseRef, onToggle } = useCollapse();
-  const child = import_react28.Children.only(children);
+  const child = import_react31.Children.only(children);
   const _a = child.props, { onClick } = _a, rest = __objRest(_a, ["onClick"]);
-  return (0, import_react28.cloneElement)(child, __spreadValues({
+  return (0, import_react31.cloneElement)(child, __spreadValues({
     ref,
     onClick: (event) => {
       if (!collapseRef.current) {
@@ -1134,12 +1216,13 @@ var CollapseTrigger = (0, import_react28.forwardRef)(({ children }, ref) => {
 var CollapseTrigger_default = CollapseTrigger;
 
 // src/components/List/ListItem.tsx
-var import_react29 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var ListItem = (0, import_react29.forwardRef)(
+var ListItem = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "div",
+      children,
       className,
       title,
       subtitle,
@@ -1154,6 +1237,7 @@ var ListItem = (0, import_react29.forwardRef)(
       onClick
     } = _b, rest = __objRest(_b, [
       "as",
+      "children",
       "className",
       "title",
       "subtitle",
@@ -1193,7 +1277,7 @@ var ListItem = (0, import_react29.forwardRef)(
         children: [
           hoverable && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${prefixCls}overlay` }),
           startContent && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${prefixCls}list-item__start-content`, children: startContent }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `${prefixCls}list-item__content`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${prefixCls}list-item__content`, children: title || subtitle ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", __spreadProps(__spreadValues({}, slotProps == null ? void 0 : slotProps.title), { className: clsx_default(`${prefixCls}list-item__title`, (_a2 = slotProps == null ? void 0 : slotProps.title) == null ? void 0 : _a2.className), children: title })),
             /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "span",
@@ -1202,7 +1286,7 @@ var ListItem = (0, import_react29.forwardRef)(
                 children: subtitle
               })
             )
-          ] }),
+          ] }) : children }),
           endContent && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${prefixCls}list-item__end-content`, children: endContent })
         ]
       })
@@ -1213,7 +1297,7 @@ var ListItem_default = ListItem;
 
 // src/components/List/ListGroup.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var ListGroup = (0, import_react30.forwardRef)(
+var ListGroup = (0, import_react33.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -1260,10 +1344,10 @@ var ListGroup = (0, import_react30.forwardRef)(
 var ListGroup_default = ListGroup;
 
 // src/components/ScrollArea/ScrollArea.tsx
-var import_react31 = require("react");
+var import_react34 = require("react");
 var import_react_custom_scrollbars_2 = require("react-custom-scrollbars-2");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var ScrollArea = (0, import_react31.forwardRef)(({ children, autoHide = false, style }, ref) => {
+var ScrollArea = (0, import_react34.forwardRef)(({ children, autoHide = false, style }, ref) => {
   const prefixCls = PREFIX_CLS;
   const renderView = (props) => {
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", __spreadProps(__spreadValues({}, props), { className: clsx_default(`${prefixCls}scroll-area__view`, props.className) }));
@@ -1321,10 +1405,10 @@ var ScrollArea = (0, import_react31.forwardRef)(({ children, autoHide = false, s
 var ScrollArea_default = ScrollArea;
 
 // src/components/Autocomplete/AutocompleteContext.tsx
-var import_react32 = require("react");
-var AutocompleteContext = (0, import_react32.createContext)(null);
+var import_react35 = require("react");
+var AutocompleteContext = (0, import_react35.createContext)(null);
 var useAutocomplete = () => {
-  const context = (0, import_react32.useContext)(AutocompleteContext);
+  const context = (0, import_react35.useContext)(AutocompleteContext);
   if (!context) {
     throw new Error("`useAutocomplete` must be used within a `<Autocomplete />`");
   }
@@ -1336,14 +1420,14 @@ var AutocompleteContext_default = AutocompleteContext;
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var AutocompleteContent = () => {
   const { data, values, offset, setOffset, keyField, textField, onItemSelect, renderItem } = useAutocomplete();
-  const parentRef = (0, import_react33.useRef)(null);
+  const parentRef = (0, import_react36.useRef)(null);
   const { isOpen } = usePopover();
   const handleItemSelect = (item) => {
     var _a;
     onItemSelect(item);
     setOffset(((_a = parentRef.current) == null ? void 0 : _a.scrollHeight) || 0);
   };
-  (0, import_react33.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     var _a;
     if (!isOpen)
       return;
@@ -1358,7 +1442,7 @@ var AutocompleteContent = () => {
         width: `100%`,
         position: "relative"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(List_default, { children: renderItem ? data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react33.Fragment, { children: renderItem(item, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(List_default, { children: renderItem ? data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react36.Fragment, { children: renderItem(item, {
         title: "",
         selected: values.includes(item[keyField]),
         hoverable: true,
@@ -1379,7 +1463,7 @@ var AutocompleteContent = () => {
 var AutocompleteContent_default = AutocompleteContent;
 
 // src/components/Autocomplete/AutocompleteVirtual.tsx
-var import_react34 = require("react");
+var import_react37 = require("react");
 
 // src/components/Autocomplete/utils.ts
 var valueToValues = (value) => {
@@ -1393,18 +1477,20 @@ var valuesToValue = (values) => {
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var AutocompleteVirtual = () => {
   const { data, values, keyField, textField, virtual, onItemSelect, renderItem } = useAutocomplete();
-  const parentRef = (0, import_react34.useRef)(null);
+  const parentRef = (0, import_react37.useRef)(null);
   const virtualizer = useVirtualizer_default(__spreadProps(__spreadValues({}, virtual), { count: data.length, parentRef }));
   const { isOpen } = usePopover();
   const handleItemSelect = (item) => {
     onItemSelect(item);
   };
-  (0, import_react34.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (!isOpen)
       return;
     const value = valuesToValue(values);
     const index = data.findIndex((item) => item[keyField] === value);
-    virtualizer.scrollToIndex(index, { align: "start" });
+    if (index !== -1) {
+      virtualizer.scrollToIndex(index, { align: "start" });
+    }
   }, [isOpen]);
   if (!virtual)
     return null;
@@ -1464,7 +1550,7 @@ var AutocompleteVirtual = () => {
               );
             }
             if (renderItem) {
-              return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react34.Fragment, { children: renderItem(item, {
+              return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react37.Fragment, { children: renderItem(item, {
                 title: "",
                 selected: values.includes(item[keyField]),
                 hoverable: true,
@@ -1519,6 +1605,7 @@ var Autocomplete = (props) => {
     disclosure: disclosureProp,
     virtual,
     placeholder,
+    className,
     style,
     startContent,
     endContent,
@@ -1527,18 +1614,18 @@ var Autocomplete = (props) => {
   } = props;
   const disclosure = disclosureProp !== void 0 ? disclosureProp : useDisclosure_default();
   const prefixCls = PREFIX_CLS;
-  const inputRef = (0, import_react35.useRef)(null);
-  const [filter, setFilter] = (0, import_react35.useState)("");
-  const [search, setSearch] = (0, import_react35.useState)("");
-  const [isSearch, setIsSearch] = (0, import_react35.useState)(false);
-  const [focus, setFocus] = (0, import_react35.useState)(false);
-  const values = (0, import_react35.useMemo)(() => {
+  const inputRef = (0, import_react38.useRef)(null);
+  const [filter, setFilter] = (0, import_react38.useState)("");
+  const [search, setSearch] = (0, import_react38.useState)("");
+  const [isSearch, setIsSearch] = (0, import_react38.useState)(false);
+  const [focus, setFocus] = (0, import_react38.useState)(false);
+  const values = (0, import_react38.useMemo)(() => {
     return valueToValues(valueProp);
   }, [valueProp]);
-  const items = (0, import_react35.useMemo)(() => {
+  const items = (0, import_react38.useMemo)(() => {
     return data.filter((item) => values.includes(item[keyField]));
   }, [data, values]);
-  const [offset, setOffset] = (0, import_react35.useState)(0);
+  const [offset, setOffset] = (0, import_react38.useState)(0);
   const handleClick = () => {
     var _a;
     (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.focus();
@@ -1624,7 +1711,7 @@ var Autocomplete = (props) => {
       }
     }
   };
-  (0, import_react35.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (isSearch)
       return;
     if (!props.isMultiple) {
@@ -1634,7 +1721,7 @@ var Autocomplete = (props) => {
       }
     }
   }, [items]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const values2 = valueToValues(valueProp);
     const value = values2[0];
     if (value === void 0) {
@@ -1671,10 +1758,14 @@ var Autocomplete = (props) => {
             /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PopoverTrigger_default, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
               "div",
               {
-                className: clsx_default(`${prefixCls}input ${prefixCls}input--filterable`, {
-                  [`${prefixCls}input--focus`]: focus,
-                  [`${prefixCls}input--disabled`]: disabled
-                }),
+                className: clsx_default(
+                  `${prefixCls}input ${prefixCls}input--filterable`,
+                  {
+                    [`${prefixCls}input--focus`]: focus,
+                    [`${prefixCls}input--disabled`]: disabled
+                  },
+                  className
+                ),
                 style,
                 onClick: handleClick,
                 onFocus: () => {
@@ -1718,12 +1809,12 @@ var Autocomplete_default = Autocomplete;
 
 // src/components/Backdrop/Backdrop.tsx
 var import_clsx6 = __toESM(require("clsx"));
-var import_react36 = require("react");
+var import_react39 = require("react");
 var import_react_merge_refs = require("react-merge-refs");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var Backdrop = (0, import_react36.forwardRef)((props, ref) => {
+var Backdrop = (0, import_react39.forwardRef)((props, ref) => {
   const _a = props, { children, className, isOpen, onClose } = _a, rest = __objRest(_a, ["children", "className", "isOpen", "onClose"]);
-  const nodeRef = (0, import_react36.useRef)(null);
+  const nodeRef = (0, import_react39.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     Transition_default,
     {
@@ -1772,9 +1863,9 @@ var Badge = ({ children, placement, content }) => {
 var Badge_default = Badge;
 
 // src/components/Card/Card.tsx
-var import_react37 = require("react");
+var import_react40 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var Card = (0, import_react37.forwardRef)((_a, ref) => {
+var Card = (0, import_react40.forwardRef)((_a, ref) => {
   var _b = _a, { as: Component = "div", children, className } = _b, rest = __objRest(_b, ["as", "children", "className"]);
   const prefixCls = PREFIX_CLS;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Component, __spreadProps(__spreadValues({ ref, className: clsx_default(`${prefixCls}card`, className) }, rest), { children }));
@@ -1782,9 +1873,9 @@ var Card = (0, import_react37.forwardRef)((_a, ref) => {
 var Card_default = Card;
 
 // src/components/Card/CardHeader.tsx
-var import_react38 = require("react");
+var import_react41 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var CardHeader = (0, import_react38.forwardRef)(
+var CardHeader = (0, import_react41.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", className, title, subtitle, startContent, endContent } = _b, rest = __objRest(_b, ["as", "className", "title", "subtitle", "startContent", "endContent"]);
     const prefixCls = PREFIX_CLS;
@@ -1802,9 +1893,9 @@ var CardHeader_default = CardHeader;
 
 // src/components/Chip/Chip.tsx
 var import_clsx8 = __toESM(require("clsx"));
-var import_react39 = require("react");
+var import_react42 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var Chip = (0, import_react39.forwardRef)(
+var Chip = (0, import_react42.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", children, className, variant = "text", color = "primary", size = "md" } = _b, rest = __objRest(_b, ["as", "children", "className", "variant", "color", "size"]);
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
@@ -1834,12 +1925,12 @@ var Chip_default = Chip;
 
 // src/components/Drawer/Drawer.tsx
 var import_clsx9 = __toESM(require("clsx"));
-var import_react40 = require("react");
+var import_react43 = require("react");
 var import_react_merge_refs2 = require("react-merge-refs");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var Drawer = (0, import_react40.forwardRef)((props, ref) => {
+var Drawer = (0, import_react43.forwardRef)((props, ref) => {
   const { children, className, isOpen, size = "md", position = "left", onClose } = props;
-  const nodeRef = (0, import_react40.useRef)(null);
+  const nodeRef = (0, import_react43.useRef)(null);
   const handleClose = () => {
     onClose();
   };
@@ -1866,13 +1957,13 @@ var Drawer_default = Drawer;
 
 // src/components/Menu/Menu.tsx
 var import_clsx13 = __toESM(require("clsx"));
-var import_react46 = require("react");
+var import_react49 = require("react");
 
 // src/components/Menu/MenuContext.tsx
-var import_react41 = require("react");
-var MenuContext = (0, import_react41.createContext)(null);
+var import_react44 = require("react");
+var MenuContext = (0, import_react44.createContext)(null);
 var useMenu = () => {
-  const context = (0, import_react41.useContext)(MenuContext);
+  const context = (0, import_react44.useContext)(MenuContext);
   if (!context) {
     throw new Error("`useMenu` must be used within a `<Menu />`");
   }
@@ -1882,17 +1973,17 @@ var MenuContext_default = MenuContext;
 
 // src/components/Menu/MenuGroup.tsx
 var import_clsx12 = __toESM(require("clsx"));
-var import_react45 = require("react");
+var import_react48 = require("react");
 
 // src/components/Menu/MenuItem.tsx
 var import_clsx10 = __toESM(require("clsx"));
-var import_react43 = require("react");
+var import_react46 = require("react");
 
 // src/components/Menu/MenuValueContext.tsx
-var import_react42 = require("react");
-var MenuValueContext = (0, import_react42.createContext)([]);
+var import_react45 = require("react");
+var MenuValueContext = (0, import_react45.createContext)([]);
 var useMenuItemValue = () => {
-  const context = (0, import_react42.useContext)(MenuValueContext);
+  const context = (0, import_react45.useContext)(MenuValueContext);
   if (!context) {
     throw new Error("`useMenuValue` must be used within a `<MenuValueContext.Provider />`");
   }
@@ -1902,10 +1993,10 @@ var MenuValueContext_default = MenuValueContext;
 
 // src/components/Menu/MenuItem.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var MenuItem = (0, import_react43.forwardRef)((props, ref) => {
+var MenuItem = (0, import_react46.forwardRef)((props, ref) => {
   const _a = props, { as: Component = "div", className, style, value, title, icon, level = 1, disabled, onClick } = _a, rest = __objRest(_a, ["as", "className", "style", "value", "title", "icon", "level", "disabled", "onClick"]);
   const { value: menuValue, originalValue, navMode, onChange, onOpen, onItemSelect } = useMenu();
-  const values = (0, import_react43.useContext)(MenuValueContext_default);
+  const values = (0, import_react46.useContext)(MenuValueContext_default);
   const mergedValues = [...values, value];
   const isSelected = menuValue[level - 1] === value;
   const handleClick = (event) => {
@@ -1915,7 +2006,7 @@ var MenuItem = (0, import_react43.forwardRef)((props, ref) => {
     onClick == null ? void 0 : onClick(event);
     onItemSelect == null ? void 0 : onItemSelect(props);
   };
-  (0, import_react43.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (navMode === "automatic" && originalValue.length > 0 && originalValue[originalValue.length - 1] === value) {
       onOpen(values);
       onChange(mergedValues);
@@ -1951,7 +2042,7 @@ var MenuItem_default = MenuItem;
 
 // src/components/Menu/MenuSubmenu.tsx
 var import_clsx11 = __toESM(require("clsx"));
-var import_react44 = require("react");
+var import_react47 = require("react");
 
 // src/components/Menu/utils.ts
 var getOpenValuesByPathname = (pathname) => {
@@ -2001,11 +2092,11 @@ var MenuSubmenu = (_a) => {
     "onClick"
   ]);
   const { value: menuValue, openValues, expandMode, onOpen } = useMenu();
-  const values = (0, import_react44.useContext)(MenuValueContext_default);
+  const values = (0, import_react47.useContext)(MenuValueContext_default);
   const isOpen = openValues.includes(value);
   const mergedValues = [...values, value];
   const isSelected = menuValue[level - 1] === value;
-  const content = (0, import_react44.useMemo)(() => {
+  const content = (0, import_react47.useMemo)(() => {
     return items == null ? void 0 : items.map((_a2, index) => {
       var _b2 = _a2, { type } = _b2, item = __objRest(_b2, ["type"]);
       return type === "item" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "submenu" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MenuSubmenu, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "group" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MenuGroup_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index);
@@ -2083,7 +2174,7 @@ var MenuGroup = (_a) => {
     "level",
     "items"
   ]);
-  const content = (0, import_react45.useMemo)(() => {
+  const content = (0, import_react48.useMemo)(() => {
     return items == null ? void 0 : items.map((_a2, index) => {
       var _b2 = _a2, { type } = _b2, item = __objRest(_b2, ["type"]);
       return type === "item" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MenuSubmenu_default, __spreadValues({}, item), index) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MenuItem_default, __spreadValues({}, item), index);
@@ -2136,9 +2227,9 @@ var Menu = (_a) => {
     "onItemSelect"
   ]);
   var _a2;
-  const [selfValue, setSelfValue] = (0, import_react46.useState)((_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : []);
-  const [selfOpenValues, setSelfOpenValues] = (0, import_react46.useState)(openValuesProp != null ? openValuesProp : []);
-  const content = (0, import_react46.useMemo)(() => {
+  const [selfValue, setSelfValue] = (0, import_react49.useState)((_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : []);
+  const [selfOpenValues, setSelfOpenValues] = (0, import_react49.useState)(openValuesProp != null ? openValuesProp : []);
+  const content = (0, import_react49.useMemo)(() => {
     return items == null ? void 0 : items.map((_a3, index) => {
       var _b2 = _a3, { type } = _b2, item = __objRest(_b2, ["type"]);
       return type === "item" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuSubmenu_default, __spreadValues({}, item), index) : type === "group" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuGroup_default, __spreadValues({}, item), index) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuItem_default, __spreadValues({}, item), index);
@@ -2161,12 +2252,12 @@ var Menu = (_a) => {
   const handleItemSelect = (props) => {
     onItemSelect == null ? void 0 : onItemSelect(props);
   };
-  (0, import_react46.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (valueProp !== void 0 && navMode !== "automatic") {
       setSelfValue(valueProp);
     }
   }, [valueProp]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (openValuesProp !== void 0) {
       setSelfOpenValues(openValuesProp);
     }
@@ -2192,9 +2283,9 @@ Menu.displayName = "Menu";
 var Menu_default = Menu;
 
 // src/components/Accordion/Accordion.tsx
-var import_react47 = require("react");
+var import_react50 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var Accordion = (0, import_react47.forwardRef)((props, ref) => {
+var Accordion = (0, import_react50.forwardRef)((props, ref) => {
   const _a = props, { children, className } = _a, rest = __objRest(_a, ["children", "className"]);
   const prefixCls = PREFIX_CLS;
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", __spreadProps(__spreadValues({ ref, className: clsx_default(`${prefixCls}accordion`, className) }, rest), { children }));
@@ -2202,30 +2293,31 @@ var Accordion = (0, import_react47.forwardRef)((props, ref) => {
 var Accordion_default = Accordion;
 
 // src/components/Accordion/AccordionItem.tsx
-var import_react48 = require("react");
+var import_react51 = require("react");
+var import_uuid = require("uuid");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var AccordionItemContext = (0, import_react48.createContext)(null);
+var AccordionItemContext = (0, import_react51.createContext)(null);
 var useAccordionItem = () => {
-  const context = (0, import_react48.useContext)(AccordionItemContext);
+  const context = (0, import_react51.useContext)(AccordionItemContext);
   if (!context) {
     throw new Error("`useAccordionItem` must be used within a `<AccordionItem />`");
   }
   return context;
 };
-var AccordionItem = (0, import_react48.forwardRef)((props, ref) => {
+var AccordionItem = (0, import_react51.forwardRef)((props, ref) => {
   const _a = props, { children, className, value: valueProp } = _a, rest = __objRest(_a, ["children", "className", "value"]);
-  const prefixCls = PREFIX_CLS;
-  const { isOpen, onOpen, onClose, onToggle } = useDisclosure_default({ defaultValue: true });
-  const id = (0, import_react48.useId)();
+  const [id] = (0, import_react51.useState)((0, import_uuid.v4)());
   const value = valueProp != null ? valueProp : id;
+  const { isOpen, onOpen, onClose, onToggle } = useDisclosure_default({ defaultValue: true });
+  const prefixCls = PREFIX_CLS;
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AccordionItemContext.Provider, { value: { value }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", __spreadProps(__spreadValues({ ref, className: clsx_default(`${prefixCls}accordion-item`, className) }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Collapse_default, { isOpen, onOpen, onClose, onToggle, children }) })) });
 });
 var AccordionItem_default = AccordionItem;
 
 // src/components/Accordion/AccordionHeader.tsx
-var import_react49 = require("react");
+var import_react52 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var AccordionHeader = (0, import_react49.forwardRef)((props, ref) => {
+var AccordionHeader = (0, import_react52.forwardRef)((props, ref) => {
   const _a = props, { className, title, subtitle, startContent, endContent } = _a, rest = __objRest(_a, ["className", "title", "subtitle", "startContent", "endContent"]);
   const prefixCls = PREFIX_CLS;
   const { isOpen } = useCollapse();
@@ -2244,9 +2336,9 @@ var AccordionHeader = (0, import_react49.forwardRef)((props, ref) => {
 var AccordionHeader_default = AccordionHeader;
 
 // src/components/Accordion/AccordionPanel.tsx
-var import_react50 = require("react");
+var import_react53 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var AccordionPanel = (0, import_react50.forwardRef)((_a, ref) => {
+var AccordionPanel = (0, import_react53.forwardRef)((_a, ref) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   const prefixCls = PREFIX_CLS;
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CollapseContent_default, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", __spreadProps(__spreadValues({ className: clsx_default(`${prefixCls}accordion-panel`, className) }, rest), { children })) }) });
@@ -2254,9 +2346,9 @@ var AccordionPanel = (0, import_react50.forwardRef)((_a, ref) => {
 var AccordionPanel_default = AccordionPanel;
 
 // src/components/Accordion/AccordionContent.tsx
-var import_react51 = require("react");
+var import_react54 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var AccordionContent = (0, import_react51.forwardRef)((_a, ref) => {
+var AccordionContent = (0, import_react54.forwardRef)((_a, ref) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   const prefixCls = PREFIX_CLS;
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CollapseContent_default, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", __spreadProps(__spreadValues({ className: clsx_default(`${prefixCls}accordion-content`, className) }, rest), { children })) }) });
@@ -2266,13 +2358,14 @@ var AccordionContent_default = AccordionContent;
 // src/components/Tabs/Tab.tsx
 var import_clsx15 = __toESM(require("clsx"));
 var import_merge_refs = __toESM(require("merge-refs"));
-var import_react53 = require("react");
+var import_react56 = require("react");
+var import_uuid2 = require("uuid");
 
 // src/components/Tabs/TabsContext.ts
-var import_react52 = require("react");
-var TabsContext = (0, import_react52.createContext)(null);
+var import_react55 = require("react");
+var TabsContext = (0, import_react55.createContext)(null);
 var useTabs = () => {
-  const context = (0, import_react52.useContext)(TabsContext);
+  const context = (0, import_react55.useContext)(TabsContext);
   if (!context) {
     throw new Error("`useTabs` must be used within a `<Tabs />`");
   }
@@ -2281,7 +2374,7 @@ var useTabs = () => {
 
 // src/components/Tabs/Tab.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var Tab = (0, import_react53.forwardRef)(
+var Tab = (0, import_react56.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "div",
@@ -2306,11 +2399,11 @@ var Tab = (0, import_react53.forwardRef)(
       "disabled",
       "onClick"
     ]);
-    const tabRef = (0, import_react53.useRef)(null);
-    const id = (0, import_react53.useId)();
+    const prefixCls = PREFIX_CLS;
+    const tabRef = (0, import_react56.useRef)(null);
+    const [id] = (0, import_react56.useState)((0, import_uuid2.v4)());
     const value = valueProp != null ? valueProp : id;
     const _a2 = useTabs(), { onClose, registerItem } = _a2, tabs = __objRest(_a2, ["onClose", "registerItem"]);
-    const prefixCls = PREFIX_CLS;
     const handleClick = (event) => {
       const previousTab = tabs.previousTabRef.current;
       const currentTab = tabRef.current;
@@ -2349,7 +2442,7 @@ var Tab = (0, import_react53.forwardRef)(
       event.stopPropagation();
       onClose(value);
     };
-    (0, import_react53.useEffect)(() => {
+    (0, import_react56.useEffect)(() => {
       registerItem({ value, disabled });
       if (value === tabs.value) {
         tabs.previousTabRef.current = tabRef.current;
@@ -2386,7 +2479,7 @@ var Tab = (0, import_react53.forwardRef)(
 
 // src/components/Tabs/Tabs.tsx
 var import_clsx16 = __toESM(require("clsx"));
-var import_react54 = require("react");
+var import_react57 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var Tabs = (_a) => {
   var _b = _a, {
@@ -2406,11 +2499,11 @@ var Tabs = (_a) => {
     "onChange",
     "onClose"
   ]);
-  const tabsRef = (0, import_react54.useRef)(null);
-  const tabRefs = (0, import_react54.useRef)({});
-  const previousTabRef = (0, import_react54.useRef)(null);
-  const [selfValue, setSelfValue] = (0, import_react54.useState)(value != null ? value : defaultValue);
-  const [items, setItems] = (0, import_react54.useState)([]);
+  const tabsRef = (0, import_react57.useRef)(null);
+  const tabRefs = (0, import_react57.useRef)({});
+  const previousTabRef = (0, import_react57.useRef)(null);
+  const [selfValue, setSelfValue] = (0, import_react57.useState)(value != null ? value : defaultValue);
+  const [items, setItems] = (0, import_react57.useState)([]);
   const registerItem = (item) => {
     setItems((prevItems) => {
       const index = prevItems.findIndex((item2) => item2.value);
@@ -2437,13 +2530,13 @@ var Tabs = (_a) => {
   const handleClose = (value2) => {
     onClose == null ? void 0 : onClose(value2);
   };
-  (0, import_react54.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (value !== void 0) {
       setSelfValue(value);
       scrollToTab(value);
     }
   }, [value]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (value === void 0) {
       const item = items.find((tab) => !tab.disabled);
       setSelfValue(item == null ? void 0 : item.value);
@@ -2510,13 +2603,13 @@ var Toolbar = (props) => {
 var Toolbar_default = Toolbar;
 
 // src/components/TextInput/TextInput.tsx
-var import_react55 = require("react");
+var import_react58 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var TextInput = (0, import_react55.forwardRef)(
+var TextInput = (0, import_react58.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className, value, defaultValue, disabled, inputRef, startContent, endContent, style, onChange, onClick } = _b, rest = __objRest(_b, ["className", "value", "defaultValue", "disabled", "inputRef", "startContent", "endContent", "style", "onChange", "onClick"]);
-    const [focus, setFocus] = (0, import_react55.useState)(false);
-    const selfInputRef = (0, import_react55.useRef)(null);
+    const [focus, setFocus] = (0, import_react58.useState)(false);
+    const selfInputRef = (0, import_react58.useRef)(null);
     const prefixCls = PREFIX_CLS;
     const handleChange = (event) => {
       onChange == null ? void 0 : onChange(event);
@@ -2569,9 +2662,9 @@ var TextInput_default = TextInput;
 
 // src/components/Switch/Switch.tsx
 var import_clsx18 = __toESM(require("clsx"));
-var import_react56 = require("react");
+var import_react59 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var Switch = (0, import_react56.forwardRef)(
+var Switch = (0, import_react59.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       id,
@@ -2594,7 +2687,7 @@ var Switch = (0, import_react56.forwardRef)(
       "onCheckedChange",
       "disabled"
     ]);
-    const [selftChecked, setSelfChecked] = (0, import_react56.useState)(checkedProp);
+    const [selftChecked, setSelfChecked] = (0, import_react59.useState)(checkedProp);
     const prefixCls = PREFIX_CLS;
     const handleChange = (event) => {
       const { value: value2, checked } = event.target;
@@ -2602,7 +2695,7 @@ var Switch = (0, import_react56.forwardRef)(
       onChange == null ? void 0 : onChange(value2);
       onCheckedChangeProp == null ? void 0 : onCheckedChangeProp(checked);
     };
-    (0, import_react56.useEffect)(() => {
+    (0, import_react59.useEffect)(() => {
       if (checkedProp !== void 0) {
         setSelfChecked(checkedProp);
       }
@@ -2640,16 +2733,16 @@ var Switch = (0, import_react56.forwardRef)(
 var Switch_default = Switch;
 
 // src/components/Select/Select.tsx
-var import_react60 = require("react");
+var import_react63 = require("react");
 
 // src/components/Select/SelectContent.tsx
-var import_react58 = require("react");
+var import_react61 = require("react");
 
 // src/components/Select/SelectContext.tsx
-var import_react57 = require("react");
-var SelectContext = (0, import_react57.createContext)(null);
+var import_react60 = require("react");
+var SelectContext = (0, import_react60.createContext)(null);
 var useSelect = () => {
-  const context = (0, import_react57.useContext)(SelectContext);
+  const context = (0, import_react60.useContext)(SelectContext);
   if (!context) {
     throw new Error("`useSelect` must be used within a `<Select />`");
   }
@@ -2661,14 +2754,14 @@ var SelectContext_default = SelectContext;
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var SelectContent = () => {
   const { data, values, offset, setOffset, keyField, textField, onItemSelect, renderItem } = useSelect();
-  const parentRef = (0, import_react58.useRef)(null);
+  const parentRef = (0, import_react61.useRef)(null);
   const { isOpen } = usePopover();
   const handleItemSelect = (item) => {
     var _a;
     onItemSelect(item);
     setOffset(((_a = parentRef.current) == null ? void 0 : _a.scrollHeight) || 0);
   };
-  (0, import_react58.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     var _a;
     if (!isOpen)
       return;
@@ -2683,7 +2776,7 @@ var SelectContent = () => {
         width: `100%`,
         position: "relative"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(List_default, { children: renderItem ? data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react58.Fragment, { children: renderItem(item, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(List_default, { children: renderItem ? data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react61.Fragment, { children: renderItem(item, {
         title: "",
         selected: values.includes(item[keyField]),
         hoverable: true,
@@ -2704,7 +2797,7 @@ var SelectContent = () => {
 var SelectContent_default = SelectContent;
 
 // src/components/Select/SelectVirtual.tsx
-var import_react59 = require("react");
+var import_react62 = require("react");
 
 // src/components/Select/utils.ts
 var valueToValues2 = (value) => {
@@ -2718,13 +2811,13 @@ var valuesToValue2 = (values) => {
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var SelectVirtual = () => {
   const { data, values, keyField, textField, virtual, onItemSelect, renderItem } = useSelect();
-  const parentRef = (0, import_react59.useRef)(null);
+  const parentRef = (0, import_react62.useRef)(null);
   const virtualizer = useVirtualizer_default(__spreadProps(__spreadValues({}, virtual), { count: data.length, parentRef }));
   const { isOpen } = usePopover();
   const handleItemSelect = (item) => {
     onItemSelect(item);
   };
-  (0, import_react59.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     if (!isOpen)
       return;
     const value = valuesToValue2(values);
@@ -2789,7 +2882,7 @@ var SelectVirtual = () => {
               );
             }
             if (renderItem) {
-              return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react59.Fragment, { children: renderItem(item, {
+              return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react62.Fragment, { children: renderItem(item, {
                 title: "",
                 selected: values.includes(item[keyField]),
                 hoverable: true,
@@ -2844,6 +2937,7 @@ var Select = (props) => {
     disclosure: disclosureProp,
     virtual,
     placeholder,
+    className,
     style,
     startContent,
     endContent,
@@ -2851,17 +2945,17 @@ var Select = (props) => {
   } = props;
   const disclosure = disclosureProp !== void 0 ? disclosureProp : useDisclosure_default();
   const prefixCls = PREFIX_CLS;
-  const inputRef = (0, import_react60.useRef)(null);
-  const [search, setSearch] = (0, import_react60.useState)("");
-  const [isSearch, setIsSearch] = (0, import_react60.useState)(false);
-  const [focus, setFocus] = (0, import_react60.useState)(false);
-  const values = (0, import_react60.useMemo)(() => {
+  const inputRef = (0, import_react63.useRef)(null);
+  const [search, setSearch] = (0, import_react63.useState)("");
+  const [isSearch, setIsSearch] = (0, import_react63.useState)(false);
+  const [focus, setFocus] = (0, import_react63.useState)(false);
+  const values = (0, import_react63.useMemo)(() => {
     return valueToValues2(valueProp);
   }, [valueProp]);
-  const items = (0, import_react60.useMemo)(() => {
+  const items = (0, import_react63.useMemo)(() => {
     return data.filter((item) => values.includes(item[keyField]));
   }, [data, values]);
-  const [offset, setOffset] = (0, import_react60.useState)(0);
+  const [offset, setOffset] = (0, import_react63.useState)(0);
   const handleClick = () => {
     var _a;
     (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.focus();
@@ -2936,7 +3030,7 @@ var Select = (props) => {
       }
     }
   };
-  (0, import_react60.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     if (isSearch)
       return;
     if (!props.isMultiple) {
@@ -2946,7 +3040,7 @@ var Select = (props) => {
       }
     }
   }, [items]);
-  (0, import_react60.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     const values2 = valueToValues2(valueProp);
     const value = values2[0];
     if (value === void 0) {
@@ -2982,10 +3076,14 @@ var Select = (props) => {
             /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PopoverTrigger_default, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
               "div",
               {
-                className: clsx_default(`${prefixCls}input`, {
-                  [`${prefixCls}input--focus`]: focus,
-                  [`${prefixCls}input--disabled`]: disabled
-                }),
+                className: clsx_default(
+                  `${prefixCls}input`,
+                  {
+                    [`${prefixCls}input--focus`]: focus,
+                    [`${prefixCls}input--disabled`]: disabled
+                  },
+                  className
+                ),
                 style,
                 onClick: handleClick,
                 onFocus: () => {
@@ -3019,9 +3117,9 @@ var Select = (props) => {
 var Select_default = Select;
 
 // src/components/Field/Field.tsx
-var import_react61 = require("react");
+var import_react64 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
-var Field = (0, import_react61.forwardRef)(({ children, label }, ref) => {
+var Field = (0, import_react64.forwardRef)(({ children, label }, ref) => {
   {
     const prefixCls = PREFIX_CLS;
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref, className: clsx_default(`${prefixCls}field`), children: [
@@ -3074,12 +3172,14 @@ var Field_default = Field;
   assignRef,
   clsx,
   getOpenValuesByPathname,
+  hasResizeObserver,
   mergeRefs,
   scrollToItem,
   useAccordionItem,
   useCollapse,
   useDebounce,
   useDisclosure,
+  useEffectEvent,
   useElementSize,
   useInfiniteQuery,
   useLocalStorage,
@@ -3087,6 +3187,8 @@ var Field_default = Field;
   useMenuItemValue,
   useOnClickOutside,
   usePrevious,
+  useResizeObserver,
   useStep,
+  useValueEffect,
   useVirtualizer
 });