@unifiedsoftware/react-ui 1.0.20 → 1.0.22

package/dist/index.mjs

@@ -51,7 +51,7 @@ var __async = (__this, __arguments, generator) => {
 };
 
 // src/components/Autocomplete/Autocomplete.tsx
-import { useEffect as useEffect14, useMemo as useMemo3, useRef as useRef9, useState as useState10 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo3, useRef as useRef11, useState as useState11 } from "react";
 
 // src/constants/index.ts
 var PREFIX_CLS = "us-";
@@ -383,6 +383,87 @@ function useElementSize(options) {
 }
 var useElementSize_default = useElementSize;
 
+// src/hooks/useResizeObserver/useResizeObserver.ts
+import { useEffect as useEffect9 } from "react";
+function hasResizeObserver() {
+  return typeof window.ResizeObserver !== "undefined";
+}
+function useResizeObserver(options) {
+  const { ref, onResize } = options;
+  useEffect9(() => {
+    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
+import { useCallback as useCallback3, useLayoutEffect as useLayoutEffect2, useRef as useRef4 } from "react";
+function useEffectEvent(fn) {
+  const ref = useRef4(null);
+  useLayoutEffect2(() => {
+    ref.current = fn;
+  }, [fn]);
+  return useCallback3((...args) => {
+    const f = ref.current;
+    return f(...args);
+  }, []);
+}
+var useEffectEvent_default = useEffectEvent;
+
+// src/hooks/useValueEffect/useValueEffect.ts
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef5, useState as useState7 } from "react";
+function useValueEffect(defaultValue) {
+  const [value, setValue] = useState7(defaultValue);
+  const effect = useRef5(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);
+    }
+  });
+  useLayoutEffect3(() => {
+    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
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -659,7 +740,7 @@ var Button = forwardRef6(
 );
 
 // src/components/Popover/Popover.tsx
-import { Children as Children2, cloneElement as cloneElement2, useEffect as useEffect9, useRef as useRef4, useState as useState7 } from "react";
+import { Children as Children2, cloneElement as cloneElement2, useEffect as useEffect10, useRef as useRef6, useState as useState8 } from "react";
 
 // src/components/Portal/Portal.tsx
 import { forwardRef as forwardRef7 } from "react";
@@ -738,9 +819,9 @@ var Popover = (props) => {
     onToggle,
     onAfterClose
   } = props;
-  const triggerRef = useRef4(null);
-  const contentRef = useRef4(null);
-  const [internalOpen, setInternalOpen] = useState7(props.isOpen || false);
+  const triggerRef = useRef6(null);
+  const contentRef = useRef6(null);
+  const [internalOpen, setInternalOpen] = useState8(props.isOpen || false);
   const [trigger, content] = Children2.toArray(children);
   const prefixCls = PREFIX_CLS;
   const handleOpen = () => {
@@ -764,7 +845,7 @@ var Popover = (props) => {
       setInternalOpen((prevState) => !prevState);
     }
   };
-  useEffect9(() => {
+  useEffect10(() => {
     setInternalOpen(isOpen || false);
   }, [isOpen]);
   return /* @__PURE__ */ jsxs6(
@@ -805,8 +886,8 @@ var Popover = (props) => {
 var Popover_default = Popover;
 
 // src/components/Popover/PopoverContent.tsx
-import { forwardRef as forwardRef9, useCallback as useCallback3, useEffect as useEffect10, useRef as useRef5, useState as useState8 } from "react";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { forwardRef as forwardRef9, useCallback as useCallback4, useEffect as useEffect11, useRef as useRef7, useState as useState9 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function getScrollParent(node) {
   if (node == null) {
     return null;
@@ -821,8 +902,8 @@ var PopoverContent = forwardRef9((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 = useRef5(null);
-  const [contentStyle, setContentStyle] = useState8({
+  const menuListRef = useRef7(null);
+  const [contentStyle, setContentStyle] = useState9({
     position: "absolute",
     top: 0,
     left: 0,
@@ -845,7 +926,7 @@ var PopoverContent = forwardRef9((props, ref) => {
     ev.stopPropagation();
     onClick == null ? void 0 : onClick(ev);
   };
-  const handleSize = useCallback3(() => {
+  const handleSize = useCallback4(() => {
     var _a2, _b;
     const popoverRect = (_a2 = contentRef.current) == null ? void 0 : _a2.getBoundingClientRect();
     const triggerClientRect = (_b = triggerRef.current) == null ? void 0 : _b.getBoundingClientRect();
@@ -876,7 +957,7 @@ var PopoverContent = forwardRef9((props, ref) => {
     });
     setContentStyle(style2);
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     handleSize();
     containerEl.addEventListener("scroll", handleSize);
     window.addEventListener("orientationchange", handleSize);
@@ -885,7 +966,7 @@ var PopoverContent = forwardRef9((props, ref) => {
       window.removeEventListener("orientationchange", handleSize);
     };
   }, []);
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx9(
     "div",
     __spreadProps(__spreadValues({
       ref: mergeRefs_default(menuListRef, ref),
@@ -893,10 +974,7 @@ var PopoverContent = forwardRef9((props, ref) => {
       style: __spreadValues(__spreadValues({}, style), contentStyle),
       onClick: handleClick
     }, rest), {
-      children: [
-        /* @__PURE__ */ jsx9("div", { className: `${prefixCls}popover__overlay` }),
-        children
-      ]
+      children
     })
   );
 });
@@ -923,7 +1001,7 @@ var PopoverTrigger = forwardRef10((props, ref) => {
 var PopoverTrigger_default = PopoverTrigger;
 
 // src/components/Autocomplete/AutocompleteContent.tsx
-import { Fragment as Fragment2, useEffect as useEffect12, useRef as useRef7 } from "react";
+import { Fragment as Fragment3, useEffect as useEffect13, useRef as useRef9 } from "react";
 
 // src/components/List/List.tsx
 import { forwardRef as forwardRef11 } from "react";
@@ -939,7 +1017,7 @@ var List_default = List;
 import { forwardRef as forwardRef15 } from "react";
 
 // src/components/Collapse/Collapse.tsx
-import { Children as Children4, useEffect as useEffect11, useRef as useRef6, useState as useState9 } from "react";
+import { Children as Children4, useEffect as useEffect12, useRef as useRef8, useState as useState10 } from "react";
 
 // src/components/Collapse/CollapseContext.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
@@ -954,11 +1032,11 @@ var useCollapse = () => {
 var CollapseContext_default = CollapseContext;
 
 // src/components/Collapse/Collapse.tsx
-import { jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsxs as jsxs7 } from "react/jsx-runtime";
 var Collapse = ({ children, isOpen, onOpen, onClose, onToggle }) => {
-  const collapseRef = useRef6(null);
-  const [selfIsOpen, setSelfIsOpen] = useState9(isOpen != null ? isOpen : false);
-  const [heightAuto, setHeightAuto] = useState9(false);
+  const collapseRef = useRef8(null);
+  const [selfIsOpen, setSelfIsOpen] = useState10(isOpen != null ? isOpen : false);
+  const [heightAuto, setHeightAuto] = useState10(false);
   const [trigger, content] = Children4.toArray(children);
   const handleOpen = () => {
     setSelfIsOpen(true);
@@ -972,7 +1050,7 @@ var Collapse = ({ children, isOpen, onOpen, onClose, onToggle }) => {
     setSelfIsOpen((prevState) => !prevState);
     onToggle == null ? void 0 : onToggle();
   };
-  useEffect11(() => {
+  useEffect12(() => {
     if (isOpen !== void 0) {
       setSelfIsOpen(isOpen);
     }
@@ -984,7 +1062,7 @@ var Collapse = ({ children, isOpen, onOpen, onClose, onToggle }) => {
       }
     }, 100);
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs7(
     CollapseContext_default.Provider,
     {
       value: {
@@ -1047,11 +1125,12 @@ var CollapseTrigger_default = CollapseTrigger;
 
 // src/components/List/ListItem.tsx
 import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var ListItem = forwardRef14(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "div",
+      children,
       className,
       title,
       subtitle,
@@ -1066,6 +1145,7 @@ var ListItem = forwardRef14(
       onClick
     } = _b, rest = __objRest(_b, [
       "as",
+      "children",
       "className",
       "title",
       "subtitle",
@@ -1084,7 +1164,7 @@ var ListItem = forwardRef14(
     const handleClick = (event) => {
       onClick == null ? void 0 : onClick(event);
     };
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs8(
       Component,
       __spreadProps(__spreadValues({
         ref,
@@ -1105,7 +1185,7 @@ var ListItem = forwardRef14(
         children: [
           hoverable && /* @__PURE__ */ jsx11("div", { className: `${prefixCls}overlay` }),
           startContent && /* @__PURE__ */ jsx11("div", { className: `${prefixCls}list-item__start-content`, children: startContent }),
-          /* @__PURE__ */ jsxs9("div", { className: `${prefixCls}list-item__content`, children: [
+          /* @__PURE__ */ jsx11("div", { className: `${prefixCls}list-item__content`, children: title || subtitle ? /* @__PURE__ */ jsxs8(Fragment, { children: [
             /* @__PURE__ */ jsx11("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__ */ jsx11(
               "span",
@@ -1114,7 +1194,7 @@ var ListItem = forwardRef14(
                 children: subtitle
               })
             )
-          ] }),
+          ] }) : children }),
           endContent && /* @__PURE__ */ jsx11("div", { className: `${prefixCls}list-item__end-content`, children: endContent })
         ]
       })
@@ -1124,7 +1204,7 @@ var ListItem = forwardRef14(
 var ListItem_default = ListItem;
 
 // src/components/List/ListGroup.tsx
-import { Fragment, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var ListGroup = forwardRef15(
   (_a, ref) => {
     var _b = _a, {
@@ -1150,16 +1230,16 @@ var ListGroup = forwardRef15(
     ]);
     const disclosure = isOpen !== void 0 ? { isOpen, onOpen, onClose, onToggle } : useDisclosure_default();
     const prefixCls = PREFIX_CLS;
-    return /* @__PURE__ */ jsx12("div", { className: `${prefixCls}list-group`, children: /* @__PURE__ */ jsxs10(Collapse_default, __spreadProps(__spreadValues({}, disclosure), { children: [
+    return /* @__PURE__ */ jsx12("div", { className: `${prefixCls}list-group`, children: /* @__PURE__ */ jsxs9(Collapse_default, __spreadProps(__spreadValues({}, disclosure), { children: [
       /* @__PURE__ */ jsx12(CollapseTrigger_default, { children: /* @__PURE__ */ jsx12(
         ListItem_default,
         __spreadValues({
           ref,
-          startContent: expandVisible && expandPosition === "start" ? /* @__PURE__ */ jsxs10(Fragment, { children: [
+          startContent: expandVisible && expandPosition === "start" ? /* @__PURE__ */ jsxs9(Fragment2, { children: [
             /* @__PURE__ */ jsx12(Icon_default, { children: disclosure.isOpen ? /* @__PURE__ */ jsx12(ChevronUpIcon_default, {}) : /* @__PURE__ */ jsx12(ChevronDownIcon_default, {}) }),
             startContent
           ] }) : startContent,
-          endContent: expandVisible && expandPosition === "end" ? /* @__PURE__ */ jsxs10(Fragment, { children: [
+          endContent: expandVisible && expandPosition === "end" ? /* @__PURE__ */ jsxs9(Fragment2, { children: [
             endContent,
             /* @__PURE__ */ jsx12(Icon_default, { children: disclosure.isOpen ? /* @__PURE__ */ jsx12(ChevronUpIcon_default, {}) : /* @__PURE__ */ jsx12(ChevronDownIcon_default, {}) })
           ] }) : endContent
@@ -1248,14 +1328,14 @@ var AutocompleteContext_default = AutocompleteContext;
 import { jsx as jsx14 } from "react/jsx-runtime";
 var AutocompleteContent = () => {
   const { data, values, offset, setOffset, keyField, textField, onItemSelect, renderItem } = useAutocomplete();
-  const parentRef = useRef7(null);
+  const parentRef = useRef9(null);
   const { isOpen } = usePopover();
   const handleItemSelect = (item) => {
     var _a;
     onItemSelect(item);
     setOffset(((_a = parentRef.current) == null ? void 0 : _a.scrollHeight) || 0);
   };
-  useEffect12(() => {
+  useEffect13(() => {
     var _a;
     if (!isOpen)
       return;
@@ -1270,7 +1350,7 @@ var AutocompleteContent = () => {
         width: `100%`,
         position: "relative"
       },
-      children: /* @__PURE__ */ jsx14(List_default, { children: renderItem ? data.map((item) => /* @__PURE__ */ jsx14(Fragment2, { children: renderItem(item, {
+      children: /* @__PURE__ */ jsx14(List_default, { children: renderItem ? data.map((item) => /* @__PURE__ */ jsx14(Fragment3, { children: renderItem(item, {
         title: "",
         selected: values.includes(item[keyField]),
         hoverable: true,
@@ -1291,7 +1371,7 @@ var AutocompleteContent = () => {
 var AutocompleteContent_default = AutocompleteContent;
 
 // src/components/Autocomplete/AutocompleteVirtual.tsx
-import { Fragment as Fragment3, useEffect as useEffect13, useRef as useRef8 } from "react";
+import { Fragment as Fragment4, useEffect as useEffect14, useRef as useRef10 } from "react";
 
 // src/components/Autocomplete/utils.ts
 var valueToValues = (value) => {
@@ -1305,18 +1385,20 @@ var valuesToValue = (values) => {
 import { jsx as jsx15 } from "react/jsx-runtime";
 var AutocompleteVirtual = () => {
   const { data, values, keyField, textField, virtual, onItemSelect, renderItem } = useAutocomplete();
-  const parentRef = useRef8(null);
+  const parentRef = useRef10(null);
   const virtualizer = useVirtualizer_default(__spreadProps(__spreadValues({}, virtual), { count: data.length, parentRef }));
   const { isOpen } = usePopover();
   const handleItemSelect = (item) => {
     onItemSelect(item);
   };
-  useEffect13(() => {
+  useEffect14(() => {
     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;
@@ -1376,7 +1458,7 @@ var AutocompleteVirtual = () => {
               );
             }
             if (renderItem) {
-              return /* @__PURE__ */ jsx15(Fragment3, { children: renderItem(item, {
+              return /* @__PURE__ */ jsx15(Fragment4, { children: renderItem(item, {
                 title: "",
                 selected: values.includes(item[keyField]),
                 hoverable: true,
@@ -1418,7 +1500,7 @@ var AutocompleteVirtual = () => {
 var AutocompleteVirtual_default = AutocompleteVirtual;
 
 // src/components/Autocomplete/Autocomplete.tsx
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 var Autocomplete = (props) => {
   const {
     data,
@@ -1431,6 +1513,7 @@ var Autocomplete = (props) => {
     disclosure: disclosureProp,
     virtual,
     placeholder,
+    className,
     style,
     startContent,
     endContent,
@@ -1439,18 +1522,18 @@ var Autocomplete = (props) => {
   } = props;
   const disclosure = disclosureProp !== void 0 ? disclosureProp : useDisclosure_default();
   const prefixCls = PREFIX_CLS;
-  const inputRef = useRef9(null);
-  const [filter, setFilter] = useState10("");
-  const [search, setSearch] = useState10("");
-  const [isSearch, setIsSearch] = useState10(false);
-  const [focus, setFocus] = useState10(false);
+  const inputRef = useRef11(null);
+  const [filter, setFilter] = useState11("");
+  const [search, setSearch] = useState11("");
+  const [isSearch, setIsSearch] = useState11(false);
+  const [focus, setFocus] = useState11(false);
   const values = useMemo3(() => {
     return valueToValues(valueProp);
   }, [valueProp]);
   const items = useMemo3(() => {
     return data.filter((item) => values.includes(item[keyField]));
   }, [data, values]);
-  const [offset, setOffset] = useState10(0);
+  const [offset, setOffset] = useState11(0);
   const handleClick = () => {
     var _a;
     (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.focus();
@@ -1536,7 +1619,7 @@ var Autocomplete = (props) => {
       }
     }
   };
-  useEffect14(() => {
+  useEffect15(() => {
     if (isSearch)
       return;
     if (!props.isMultiple) {
@@ -1546,7 +1629,7 @@ var Autocomplete = (props) => {
       }
     }
   }, [items]);
-  useEffect14(() => {
+  useEffect15(() => {
     const values2 = valueToValues(valueProp);
     const value = values2[0];
     if (value === void 0) {
@@ -1570,7 +1653,7 @@ var Autocomplete = (props) => {
         setOffset,
         renderItem
       },
-      children: /* @__PURE__ */ jsxs11(
+      children: /* @__PURE__ */ jsxs10(
         Popover_default,
         __spreadProps(__spreadValues({
           target: true
@@ -1580,13 +1663,17 @@ var Autocomplete = (props) => {
           onClose: handleClose,
           autoClose: "outside",
           children: [
-            /* @__PURE__ */ jsx16(PopoverTrigger_default, { children: /* @__PURE__ */ jsxs11(
+            /* @__PURE__ */ jsx16(PopoverTrigger_default, { children: /* @__PURE__ */ jsxs10(
               "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: () => {
@@ -1597,7 +1684,7 @@ var Autocomplete = (props) => {
                 },
                 children: [
                   /* @__PURE__ */ jsx16("div", { className: `${prefixCls}outline` }),
-                  /* @__PURE__ */ jsxs11("div", { className: `${prefixCls}input__content`, children: [
+                  /* @__PURE__ */ jsxs10("div", { className: `${prefixCls}input__content`, children: [
                     startContent && /* @__PURE__ */ jsx16("div", { className: `${prefixCls}input__start-content`, children: startContent }),
                     /* @__PURE__ */ jsx16(
                       "input",
@@ -1610,7 +1697,7 @@ var Autocomplete = (props) => {
                         onChange: handleFilterChange
                       }
                     ),
-                    /* @__PURE__ */ jsxs11("div", { className: `${prefixCls}input__end-content`, children: [
+                    /* @__PURE__ */ jsxs10("div", { className: `${prefixCls}input__end-content`, children: [
                       endContent,
                       loading ? /* @__PURE__ */ jsx16(Icon_default, { children: /* @__PURE__ */ jsx16(LoaderIcon_default, { className: `${prefixCls}animation-spin` }) }) : /* @__PURE__ */ jsx16(Button, { color: "secondary", variant: "plain", size: "xs", iconOnly: true, onClick: handleClear, children: /* @__PURE__ */ jsx16(Icon_default, { children: /* @__PURE__ */ jsx16(CloseIcon_default, {}) }) }),
                       /* @__PURE__ */ jsx16("div", { style: { pointerEvents: "none" }, children: /* @__PURE__ */ jsx16(Icon_default, { children: disclosure.isOpen ? /* @__PURE__ */ jsx16(ChevronUpIcon_default, {}) : /* @__PURE__ */ jsx16(ChevronDownIcon_default, {}) }) })
@@ -1630,12 +1717,12 @@ var Autocomplete_default = Autocomplete;
 
 // src/components/Backdrop/Backdrop.tsx
 import clsx6 from "clsx";
-import { forwardRef as forwardRef17, useRef as useRef10 } from "react";
+import { forwardRef as forwardRef17, useRef as useRef12 } from "react";
 import { mergeRefs as mergeRefs2 } from "react-merge-refs";
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 var Backdrop = forwardRef17((props, ref) => {
   const _a = props, { children, className, isOpen, onClose } = _a, rest = __objRest(_a, ["children", "className", "isOpen", "onClose"]);
-  const nodeRef = useRef10(null);
+  const nodeRef = useRef12(null);
   return /* @__PURE__ */ jsx17(
     Transition_default,
     {
@@ -1646,7 +1733,7 @@ var Backdrop = forwardRef17((props, ref) => {
       leave: 300,
       mountOnEnter: true,
       unmountOnExit: true,
-      children: /* @__PURE__ */ jsx17(Portal_default, { children: /* @__PURE__ */ jsxs12(
+      children: /* @__PURE__ */ jsx17(Portal_default, { children: /* @__PURE__ */ jsxs11(
         "div",
         __spreadProps(__spreadValues({
           ref: mergeRefs2([ref, nodeRef]),
@@ -1666,9 +1753,9 @@ var Backdrop_default = Backdrop;
 
 // src/components/Badge/Badge.tsx
 import clsx7 from "clsx";
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var Badge = ({ children, placement, content }) => {
-  return /* @__PURE__ */ jsxs13("div", { className: clsx7(`${PREFIX_CLS}badge-wrapper`), children: [
+  return /* @__PURE__ */ jsxs12("div", { className: clsx7(`${PREFIX_CLS}badge-wrapper`), children: [
     children,
     /* @__PURE__ */ jsx18(
       "div",
@@ -1695,14 +1782,14 @@ var Card_default = Card;
 
 // src/components/Card/CardHeader.tsx
 import { forwardRef as forwardRef19 } from "react";
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var CardHeader = forwardRef19(
   (_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;
-    return /* @__PURE__ */ jsxs14(Component, __spreadProps(__spreadValues({ ref, className: clsx_default(`${prefixCls}card-header`, className) }, rest), { children: [
+    return /* @__PURE__ */ jsxs13(Component, __spreadProps(__spreadValues({ ref, className: clsx_default(`${prefixCls}card-header`, className) }, rest), { children: [
       startContent && /* @__PURE__ */ jsx20("div", { className: `${prefixCls}card-header__start-content`, children: startContent }),
-      /* @__PURE__ */ jsxs14("div", { className: `${prefixCls}card-header__content`, children: [
+      /* @__PURE__ */ jsxs13("div", { className: `${prefixCls}card-header__content`, children: [
         /* @__PURE__ */ jsx20("div", { className: `${prefixCls}card-header__title`, children: title }),
         subtitle && /* @__PURE__ */ jsx20("div", { className: `${prefixCls}card-header__subtitle`, children: subtitle })
       ] }),
@@ -1715,11 +1802,11 @@ var CardHeader_default = CardHeader;
 // src/components/Chip/Chip.tsx
 import clsx8 from "clsx";
 import { forwardRef as forwardRef20 } from "react";
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 var Chip = forwardRef20(
   (_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__ */ jsxs15(
+    return /* @__PURE__ */ jsxs14(
       Component,
       __spreadProps(__spreadValues({
         ref,
@@ -1746,16 +1833,16 @@ var Chip_default = Chip;
 
 // src/components/Drawer/Drawer.tsx
 import clsx9 from "clsx";
-import { forwardRef as forwardRef21, useRef as useRef11 } from "react";
+import { forwardRef as forwardRef21, useRef as useRef13 } from "react";
 import { mergeRefs as mergeRefs3 } from "react-merge-refs";
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var Drawer = forwardRef21((props, ref) => {
   const { children, className, isOpen, size = "md", position = "left", onClose } = props;
-  const nodeRef = useRef11(null);
+  const nodeRef = useRef13(null);
   const handleClose = () => {
     onClose();
   };
-  return /* @__PURE__ */ jsx22(Backdrop_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsx22(Transition_default, { nodeRef, isOpen, name: `${PREFIX_CLS}drawer`, enter: 600, leave: 300, unmountOnExit: true, children: /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsx22(Backdrop_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsx22(Transition_default, { nodeRef, isOpen, name: `${PREFIX_CLS}drawer`, enter: 600, leave: 300, unmountOnExit: true, children: /* @__PURE__ */ jsxs15(
     "div",
     {
       ref: mergeRefs3([ref, nodeRef]),
@@ -1778,7 +1865,7 @@ var Drawer_default = Drawer;
 
 // src/components/Menu/Menu.tsx
 import clsx13 from "clsx";
-import { useEffect as useEffect16, useMemo as useMemo6, useState as useState11 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo6, useState as useState12 } from "react";
 
 // src/components/Menu/MenuContext.tsx
 import { createContext as createContext4, useContext as useContext4 } from "react";
@@ -1798,7 +1885,7 @@ import { useMemo as useMemo5 } from "react";
 
 // src/components/Menu/MenuItem.tsx
 import clsx10 from "clsx";
-import { forwardRef as forwardRef22, useContext as useContext6, useEffect as useEffect15 } from "react";
+import { forwardRef as forwardRef22, useContext as useContext6, useEffect as useEffect16 } from "react";
 
 // src/components/Menu/MenuValueContext.tsx
 import { createContext as createContext5, useContext as useContext5 } from "react";
@@ -1813,7 +1900,7 @@ var useMenuItemValue = () => {
 var MenuValueContext_default = MenuValueContext;
 
 // src/components/Menu/MenuItem.tsx
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var MenuItem = forwardRef22((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();
@@ -1827,13 +1914,13 @@ var MenuItem = forwardRef22((props, ref) => {
     onClick == null ? void 0 : onClick(event);
     onItemSelect == null ? void 0 : onItemSelect(props);
   };
-  useEffect15(() => {
+  useEffect16(() => {
     if (navMode === "automatic" && originalValue.length > 0 && originalValue[originalValue.length - 1] === value) {
       onOpen(values);
       onChange(mergedValues);
     }
   }, [value, originalValue, navMode]);
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs16(
     Component,
     __spreadProps(__spreadValues({
       ref,
@@ -1889,7 +1976,7 @@ var addOrRemoveValueInArray = (array, value) => {
 };
 
 // src/components/Menu/MenuSubmenu.tsx
-import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var MenuSubmenu = (_a) => {
   var _b = _a, {
     children,
@@ -1938,8 +2025,8 @@ var MenuSubmenu = (_a) => {
     }
     onClick == null ? void 0 : onClick(event);
   };
-  return /* @__PURE__ */ jsx24(MenuValueContext_default.Provider, { value: mergedValues, children: /* @__PURE__ */ jsx24("div", { className: clsx11(`${PREFIX_CLS}menu-submenu`), children: /* @__PURE__ */ jsxs18(Collapse_default, { isOpen, children: [
-    /* @__PURE__ */ jsx24(CollapseTrigger_default, { children: /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsx24(MenuValueContext_default.Provider, { value: mergedValues, children: /* @__PURE__ */ jsx24("div", { className: clsx11(`${PREFIX_CLS}menu-submenu`), children: /* @__PURE__ */ jsxs17(Collapse_default, { isOpen, children: [
+    /* @__PURE__ */ jsx24(CollapseTrigger_default, { children: /* @__PURE__ */ jsxs17(
       "div",
       __spreadProps(__spreadValues({
         className: clsx11(
@@ -1976,7 +2063,7 @@ var MenuSubmenu = (_a) => {
 var MenuSubmenu_default = MenuSubmenu;
 
 // src/components/Menu/MenuGroup.tsx
-import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 var MenuGroup = (_a) => {
   var _b = _a, {
     children,
@@ -2001,8 +2088,8 @@ var MenuGroup = (_a) => {
       return type === "item" ? /* @__PURE__ */ jsx25(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ jsx25(MenuSubmenu_default, __spreadValues({}, item), index) : /* @__PURE__ */ jsx25(MenuItem_default, __spreadValues({}, item), index);
     });
   }, [items]);
-  return /* @__PURE__ */ jsxs19(Fragment4, { children: [
-    /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs18(Fragment5, { children: [
+    /* @__PURE__ */ jsxs18(
       "div",
       __spreadProps(__spreadValues({
         className: clsx12(`${PREFIX_CLS}menu-group`, className),
@@ -2048,8 +2135,8 @@ var Menu = (_a) => {
     "onItemSelect"
   ]);
   var _a2;
-  const [selfValue, setSelfValue] = useState11((_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : []);
-  const [selfOpenValues, setSelfOpenValues] = useState11(openValuesProp != null ? openValuesProp : []);
+  const [selfValue, setSelfValue] = useState12((_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : []);
+  const [selfOpenValues, setSelfOpenValues] = useState12(openValuesProp != null ? openValuesProp : []);
   const content = useMemo6(() => {
     return items == null ? void 0 : items.map((_a3, index) => {
       var _b2 = _a3, { type } = _b2, item = __objRest(_b2, ["type"]);
@@ -2073,12 +2160,12 @@ var Menu = (_a) => {
   const handleItemSelect = (props) => {
     onItemSelect == null ? void 0 : onItemSelect(props);
   };
-  useEffect16(() => {
+  useEffect17(() => {
     if (valueProp !== void 0 && navMode !== "automatic") {
       setSelfValue(valueProp);
     }
   }, [valueProp]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (openValuesProp !== void 0) {
       setSelfOpenValues(openValuesProp);
     }
@@ -2114,7 +2201,8 @@ var Accordion = forwardRef23((props, ref) => {
 var Accordion_default = Accordion;
 
 // src/components/Accordion/AccordionItem.tsx
-import { createContext as createContext6, forwardRef as forwardRef24, useContext as useContext8, useId } from "react";
+import { createContext as createContext6, forwardRef as forwardRef24, useContext as useContext8, useState as useState13 } from "react";
+import { v4 as uuid } from "uuid";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var AccordionItemContext = createContext6(null);
 var useAccordionItem = () => {
@@ -2126,28 +2214,28 @@ var useAccordionItem = () => {
 };
 var AccordionItem = forwardRef24((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 = useId();
+  const [id] = useState13(uuid());
   const value = valueProp != null ? valueProp : id;
+  const { isOpen, onOpen, onClose, onToggle } = useDisclosure_default({ defaultValue: true });
+  const prefixCls = PREFIX_CLS;
   return /* @__PURE__ */ jsx28(AccordionItemContext.Provider, { value: { value }, children: /* @__PURE__ */ jsx28("div", __spreadProps(__spreadValues({ ref, className: clsx_default(`${prefixCls}accordion-item`, className) }, rest), { children: /* @__PURE__ */ jsx28(Collapse_default, { isOpen, onOpen, onClose, onToggle, children }) })) });
 });
 var AccordionItem_default = AccordionItem;
 
 // src/components/Accordion/AccordionHeader.tsx
 import { forwardRef as forwardRef25 } from "react";
-import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 var AccordionHeader = forwardRef25((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();
-  return /* @__PURE__ */ jsx29(CollapseTrigger_default, { children: /* @__PURE__ */ jsxs20("div", __spreadProps(__spreadValues({ ref, className: clsx_default(`${prefixCls}accordion-header`, className) }, rest), { children: [
+  return /* @__PURE__ */ jsx29(CollapseTrigger_default, { children: /* @__PURE__ */ jsxs19("div", __spreadProps(__spreadValues({ ref, className: clsx_default(`${prefixCls}accordion-header`, className) }, rest), { children: [
     startContent && /* @__PURE__ */ jsx29("div", { className: `${prefixCls}accordion-header__start-content`, children: startContent }),
-    /* @__PURE__ */ jsxs20("div", { className: `${prefixCls}accordion-header__content`, children: [
+    /* @__PURE__ */ jsxs19("div", { className: `${prefixCls}accordion-header__content`, children: [
       /* @__PURE__ */ jsx29("div", { className: `${prefixCls}accordion-header__title`, children: title }),
       subtitle && /* @__PURE__ */ jsx29("div", { className: `${prefixCls}accordion-header__subtitle`, children: subtitle })
     ] }),
-    /* @__PURE__ */ jsx29("div", { className: `${prefixCls}accordion-header__end-content`, children: /* @__PURE__ */ jsxs20("div", { className: "us-d-flex us-items-center us-gap-1", children: [
+    /* @__PURE__ */ jsx29("div", { className: `${prefixCls}accordion-header__end-content`, children: /* @__PURE__ */ jsxs19("div", { className: "us-d-flex us-items-center us-gap-1", children: [
       endContent,
       /* @__PURE__ */ jsx29(Button, { type: "button", variant: "text", color: "secondary", size: "sm", iconOnly: true, children: /* @__PURE__ */ jsx29(Icon_default, { children: isOpen ? /* @__PURE__ */ jsx29(ChevronUpIcon_default, {}) : /* @__PURE__ */ jsx29(ChevronDownIcon_default, {}) }) })
     ] }) })
@@ -2178,7 +2266,8 @@ var AccordionContent_default = AccordionContent;
 // src/components/Tabs/Tab.tsx
 import clsx14 from "clsx";
 import mergeRefs4 from "merge-refs";
-import { forwardRef as forwardRef28, useEffect as useEffect17, useId as useId2, useRef as useRef12 } from "react";
+import { forwardRef as forwardRef28, useEffect as useEffect18, useRef as useRef14, useState as useState14 } from "react";
+import { v4 as uuid2 } from "uuid";
 
 // src/components/Tabs/TabsContext.ts
 import { createContext as createContext7, useContext as useContext9 } from "react";
@@ -2192,7 +2281,7 @@ var useTabs = () => {
 };
 
 // src/components/Tabs/Tab.tsx
-import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
 var Tab = forwardRef28(
   (_a, ref) => {
     var _b = _a, {
@@ -2218,11 +2307,11 @@ var Tab = forwardRef28(
       "disabled",
       "onClick"
     ]);
-    const tabRef = useRef12(null);
-    const id = useId2();
+    const prefixCls = PREFIX_CLS;
+    const tabRef = useRef14(null);
+    const [id] = useState14(uuid2());
     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;
@@ -2261,13 +2350,13 @@ var Tab = forwardRef28(
       event.stopPropagation();
       onClose(value);
     };
-    useEffect17(() => {
+    useEffect18(() => {
       registerItem({ value, disabled });
       if (value === tabs.value) {
         tabs.previousTabRef.current = tabRef.current;
       }
     }, [value, tabs.value]);
-    return /* @__PURE__ */ jsxs21(
+    return /* @__PURE__ */ jsxs20(
       Component,
       __spreadProps(__spreadValues({
         ref: mergeRefs4(tabRef, ref, (el) => tabs.tabRefs.current[value] = el),
@@ -2281,10 +2370,10 @@ var Tab = forwardRef28(
       }, rest), {
         children: [
           /* @__PURE__ */ jsx32("div", { className: `${prefixCls}overlay`, children: /* @__PURE__ */ jsx32("div", { className: `${prefixCls}overlay__surface` }) }),
-          /* @__PURE__ */ jsxs21("div", { className: `${prefixCls}tab__content`, children: [
+          /* @__PURE__ */ jsxs20("div", { className: `${prefixCls}tab__content`, children: [
             startContent && /* @__PURE__ */ jsx32("div", { className: `${prefixCls}tab__start-content`, children: startContent }),
             children,
-            endContent || closable && /* @__PURE__ */ jsxs21("div", { className: `${prefixCls}tab__end-content`, children: [
+            endContent || closable && /* @__PURE__ */ jsxs20("div", { className: `${prefixCls}tab__end-content`, children: [
               endContent,
               closable && /* @__PURE__ */ jsx32(Button, { variant: "text", color: "secondary", iconOnly: true, size: "xs", onClick: handleClose, children: /* @__PURE__ */ jsx32(Icon_default, { children: /* @__PURE__ */ jsx32(CloseIcon_default, {}) }) })
             ] })
@@ -2298,8 +2387,8 @@ var Tab = forwardRef28(
 
 // src/components/Tabs/Tabs.tsx
 import clsx15 from "clsx";
-import { useEffect as useEffect18, useRef as useRef13, useState as useState12 } from "react";
-import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
+import { useEffect as useEffect19, useRef as useRef15, useState as useState15 } from "react";
+import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
 var Tabs = (_a) => {
   var _b = _a, {
     children,
@@ -2318,11 +2407,11 @@ var Tabs = (_a) => {
     "onChange",
     "onClose"
   ]);
-  const tabsRef = useRef13(null);
-  const tabRefs = useRef13({});
-  const previousTabRef = useRef13(null);
-  const [selfValue, setSelfValue] = useState12(value != null ? value : defaultValue);
-  const [items, setItems] = useState12([]);
+  const tabsRef = useRef15(null);
+  const tabRefs = useRef15({});
+  const previousTabRef = useRef15(null);
+  const [selfValue, setSelfValue] = useState15(value != null ? value : defaultValue);
+  const [items, setItems] = useState15([]);
   const registerItem = (item) => {
     setItems((prevItems) => {
       const index = prevItems.findIndex((item2) => item2.value);
@@ -2349,19 +2438,19 @@ var Tabs = (_a) => {
   const handleClose = (value2) => {
     onClose == null ? void 0 : onClose(value2);
   };
-  useEffect18(() => {
+  useEffect19(() => {
     if (value !== void 0) {
       setSelfValue(value);
       scrollToTab(value);
     }
   }, [value]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (value === void 0) {
       const item = items.find((tab) => !tab.disabled);
       setSelfValue(item == null ? void 0 : item.value);
     }
   }, [value, items]);
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs21(
     TabsContext.Provider,
     {
       value: { previousTabRef, tabRefs, value: selfValue, onChange: handleChange, onClose: handleClose, registerItem },
@@ -2383,7 +2472,7 @@ var Tabs = (_a) => {
 
 // src/components/Toolbar/Toolbar.tsx
 import clsx16 from "clsx";
-import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
 var Toolbar = (props) => {
   const _a = props, {
     children,
@@ -2407,11 +2496,11 @@ var Toolbar = (props) => {
     "subtitle"
   ]);
   const prefixCls = PREFIX_CLS;
-  return /* @__PURE__ */ jsxs23("div", __spreadProps(__spreadValues({ className: clsx16(`${prefixCls}toolbar`, { [`${prefixCls}toolbar--${size}`]: size }, className) }, rest), { children: [
+  return /* @__PURE__ */ jsxs22("div", __spreadProps(__spreadValues({ className: clsx16(`${prefixCls}toolbar`, { [`${prefixCls}toolbar--${size}`]: size }, className) }, rest), { children: [
     /* @__PURE__ */ jsx34("div", { className: `${prefixCls}outline-b` }),
-    /* @__PURE__ */ jsxs23("div", { className: clsx16(`${prefixCls}toolbar__container`), children: [
+    /* @__PURE__ */ jsxs22("div", { className: clsx16(`${prefixCls}toolbar__container`), children: [
       startContent ? /* @__PURE__ */ jsx34("div", { className: clsx16(`${prefixCls}toolbar__start-content`), children: startContent }) : startAction && /* @__PURE__ */ jsx34("div", { className: clsx16(`${prefixCls}toolbar__start-action`), children: startAction }),
-      /* @__PURE__ */ jsx34("div", { className: clsx16(`${prefixCls}toolbar__content`), children: title || subtitle ? /* @__PURE__ */ jsxs23(Fragment5, { children: [
+      /* @__PURE__ */ jsx34("div", { className: clsx16(`${prefixCls}toolbar__content`), children: title || subtitle ? /* @__PURE__ */ jsxs22(Fragment6, { children: [
         title && /* @__PURE__ */ jsx34("div", { className: clsx16(`${prefixCls}toolbar__title`), children: title }),
         subtitle && /* @__PURE__ */ jsx34("div", { className: clsx16(`${prefixCls}toolbar__subtitle`), children: subtitle })
       ] }) : children }),
@@ -2422,13 +2511,13 @@ var Toolbar = (props) => {
 var Toolbar_default = Toolbar;
 
 // src/components/TextInput/TextInput.tsx
-import { forwardRef as forwardRef29, useRef as useRef14, useState as useState13 } from "react";
-import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+import { forwardRef as forwardRef29, useRef as useRef16, useState as useState16 } from "react";
+import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
 var TextInput = forwardRef29(
   (_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] = useState13(false);
-    const selfInputRef = useRef14(null);
+    const [focus, setFocus] = useState16(false);
+    const selfInputRef = useRef16(null);
     const prefixCls = PREFIX_CLS;
     const handleChange = (event) => {
       onChange == null ? void 0 : onChange(event);
@@ -2438,7 +2527,7 @@ var TextInput = forwardRef29(
       onClick == null ? void 0 : onClick(event);
       (_a2 = selfInputRef == null ? void 0 : selfInputRef.current) == null ? void 0 : _a2.focus();
     };
-    return /* @__PURE__ */ jsxs24(
+    return /* @__PURE__ */ jsxs23(
       "div",
       {
         ref,
@@ -2457,7 +2546,7 @@ var TextInput = forwardRef29(
         onClick: handleClick,
         children: [
           /* @__PURE__ */ jsx35("div", { className: `${prefixCls}outline` }),
-          /* @__PURE__ */ jsxs24("div", { className: `${prefixCls}input__content`, children: [
+          /* @__PURE__ */ jsxs23("div", { className: `${prefixCls}input__content`, children: [
             startContent && /* @__PURE__ */ jsx35("div", { className: `${prefixCls}input__start-content`, children: startContent }),
             /* @__PURE__ */ jsx35(
               "input",
@@ -2481,8 +2570,8 @@ var TextInput_default = TextInput;
 
 // src/components/Switch/Switch.tsx
 import clsx17 from "clsx";
-import { forwardRef as forwardRef30, useEffect as useEffect19, useState as useState14 } from "react";
-import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { forwardRef as forwardRef30, useEffect as useEffect20, useState as useState17 } from "react";
+import { jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
 var Switch = forwardRef30(
   (_a, ref) => {
     var _b = _a, {
@@ -2506,7 +2595,7 @@ var Switch = forwardRef30(
       "onCheckedChange",
       "disabled"
     ]);
-    const [selftChecked, setSelfChecked] = useState14(checkedProp);
+    const [selftChecked, setSelfChecked] = useState17(checkedProp);
     const prefixCls = PREFIX_CLS;
     const handleChange = (event) => {
       const { value: value2, checked } = event.target;
@@ -2514,12 +2603,12 @@ var Switch = forwardRef30(
       onChange == null ? void 0 : onChange(value2);
       onCheckedChangeProp == null ? void 0 : onCheckedChangeProp(checked);
     };
-    useEffect19(() => {
+    useEffect20(() => {
       if (checkedProp !== void 0) {
         setSelfChecked(checkedProp);
       }
     }, [checkedProp]);
-    return /* @__PURE__ */ jsxs25(
+    return /* @__PURE__ */ jsxs24(
       "label",
       __spreadProps(__spreadValues({
         ref,
@@ -2552,10 +2641,10 @@ var Switch = forwardRef30(
 var Switch_default = Switch;
 
 // src/components/Select/Select.tsx
-import { useEffect as useEffect22, useMemo as useMemo7, useRef as useRef17, useState as useState15 } from "react";
+import { useEffect as useEffect23, useMemo as useMemo7, useRef as useRef19, useState as useState18 } from "react";
 
 // src/components/Select/SelectContent.tsx
-import { Fragment as Fragment6, useEffect as useEffect20, useRef as useRef15 } from "react";
+import { Fragment as Fragment7, useEffect as useEffect21, useRef as useRef17 } from "react";
 
 // src/components/Select/SelectContext.tsx
 import { createContext as createContext8, useContext as useContext10 } from "react";
@@ -2573,14 +2662,14 @@ var SelectContext_default = SelectContext;
 import { jsx as jsx37 } from "react/jsx-runtime";
 var SelectContent = () => {
   const { data, values, offset, setOffset, keyField, textField, onItemSelect, renderItem } = useSelect();
-  const parentRef = useRef15(null);
+  const parentRef = useRef17(null);
   const { isOpen } = usePopover();
   const handleItemSelect = (item) => {
     var _a;
     onItemSelect(item);
     setOffset(((_a = parentRef.current) == null ? void 0 : _a.scrollHeight) || 0);
   };
-  useEffect20(() => {
+  useEffect21(() => {
     var _a;
     if (!isOpen)
       return;
@@ -2595,7 +2684,7 @@ var SelectContent = () => {
         width: `100%`,
         position: "relative"
       },
-      children: /* @__PURE__ */ jsx37(List_default, { children: renderItem ? data.map((item) => /* @__PURE__ */ jsx37(Fragment6, { children: renderItem(item, {
+      children: /* @__PURE__ */ jsx37(List_default, { children: renderItem ? data.map((item) => /* @__PURE__ */ jsx37(Fragment7, { children: renderItem(item, {
         title: "",
         selected: values.includes(item[keyField]),
         hoverable: true,
@@ -2616,7 +2705,7 @@ var SelectContent = () => {
 var SelectContent_default = SelectContent;
 
 // src/components/Select/SelectVirtual.tsx
-import { Fragment as Fragment7, useEffect as useEffect21, useRef as useRef16 } from "react";
+import { Fragment as Fragment8, useEffect as useEffect22, useRef as useRef18 } from "react";
 
 // src/components/Select/utils.ts
 var valueToValues2 = (value) => {
@@ -2630,13 +2719,13 @@ var valuesToValue2 = (values) => {
 import { jsx as jsx38 } from "react/jsx-runtime";
 var SelectVirtual = () => {
   const { data, values, keyField, textField, virtual, onItemSelect, renderItem } = useSelect();
-  const parentRef = useRef16(null);
+  const parentRef = useRef18(null);
   const virtualizer = useVirtualizer_default(__spreadProps(__spreadValues({}, virtual), { count: data.length, parentRef }));
   const { isOpen } = usePopover();
   const handleItemSelect = (item) => {
     onItemSelect(item);
   };
-  useEffect21(() => {
+  useEffect22(() => {
     if (!isOpen)
       return;
     const value = valuesToValue2(values);
@@ -2701,7 +2790,7 @@ var SelectVirtual = () => {
               );
             }
             if (renderItem) {
-              return /* @__PURE__ */ jsx38(Fragment7, { children: renderItem(item, {
+              return /* @__PURE__ */ jsx38(Fragment8, { children: renderItem(item, {
                 title: "",
                 selected: values.includes(item[keyField]),
                 hoverable: true,
@@ -2743,7 +2832,7 @@ var SelectVirtual = () => {
 var SelectVirtual_default = SelectVirtual;
 
 // src/components/Select/Select.tsx
-import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
 var Select = (props) => {
   const {
     data,
@@ -2756,6 +2845,7 @@ var Select = (props) => {
     disclosure: disclosureProp,
     virtual,
     placeholder,
+    className,
     style,
     startContent,
     endContent,
@@ -2763,17 +2853,17 @@ var Select = (props) => {
   } = props;
   const disclosure = disclosureProp !== void 0 ? disclosureProp : useDisclosure_default();
   const prefixCls = PREFIX_CLS;
-  const inputRef = useRef17(null);
-  const [search, setSearch] = useState15("");
-  const [isSearch, setIsSearch] = useState15(false);
-  const [focus, setFocus] = useState15(false);
+  const inputRef = useRef19(null);
+  const [search, setSearch] = useState18("");
+  const [isSearch, setIsSearch] = useState18(false);
+  const [focus, setFocus] = useState18(false);
   const values = useMemo7(() => {
     return valueToValues2(valueProp);
   }, [valueProp]);
   const items = useMemo7(() => {
     return data.filter((item) => values.includes(item[keyField]));
   }, [data, values]);
-  const [offset, setOffset] = useState15(0);
+  const [offset, setOffset] = useState18(0);
   const handleClick = () => {
     var _a;
     (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.focus();
@@ -2848,7 +2938,7 @@ var Select = (props) => {
       }
     }
   };
-  useEffect22(() => {
+  useEffect23(() => {
     if (isSearch)
       return;
     if (!props.isMultiple) {
@@ -2858,7 +2948,7 @@ var Select = (props) => {
       }
     }
   }, [items]);
-  useEffect22(() => {
+  useEffect23(() => {
     const values2 = valueToValues2(valueProp);
     const value = values2[0];
     if (value === void 0) {
@@ -2881,7 +2971,7 @@ var Select = (props) => {
         setOffset,
         renderItem
       },
-      children: /* @__PURE__ */ jsxs26(
+      children: /* @__PURE__ */ jsxs25(
         Popover_default,
         __spreadProps(__spreadValues({
           target: true
@@ -2891,13 +2981,17 @@ var Select = (props) => {
           onClose: handleClose,
           autoClose: "outside",
           children: [
-            /* @__PURE__ */ jsx39(PopoverTrigger_default, { children: /* @__PURE__ */ jsxs26(
+            /* @__PURE__ */ jsx39(PopoverTrigger_default, { children: /* @__PURE__ */ jsxs25(
               "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: () => {
@@ -2909,10 +3003,10 @@ var Select = (props) => {
                 children: [
                   /* @__PURE__ */ jsx39("input", { type: "text", ref: inputRef, style: { position: "absolute", opacity: 0 } }),
                   /* @__PURE__ */ jsx39("div", { className: `${prefixCls}outline` }),
-                  /* @__PURE__ */ jsxs26("div", { className: `${prefixCls}input__content`, children: [
+                  /* @__PURE__ */ jsxs25("div", { className: `${prefixCls}input__content`, children: [
                     startContent && /* @__PURE__ */ jsx39("div", { className: `${prefixCls}input__start-content`, children: startContent }),
                     /* @__PURE__ */ jsx39("div", { className: `${prefixCls}input__field`, children: search || placeholder }),
-                    /* @__PURE__ */ jsxs26("div", { className: `${prefixCls}input__end-content`, children: [
+                    /* @__PURE__ */ jsxs25("div", { className: `${prefixCls}input__end-content`, children: [
                       endContent,
                       loading ? /* @__PURE__ */ jsx39(Icon_default, { children: /* @__PURE__ */ jsx39(LoaderIcon_default, { className: `${prefixCls}animation-spin` }) }) : /* @__PURE__ */ jsx39(Button, { color: "secondary", variant: "plain", size: "xs", iconOnly: true, onClick: handleClear, children: /* @__PURE__ */ jsx39(Icon_default, { children: /* @__PURE__ */ jsx39(CloseIcon_default, {}) }) }),
                       /* @__PURE__ */ jsx39("div", { style: { pointerEvents: "none" }, children: /* @__PURE__ */ jsx39(Icon_default, { children: disclosure.isOpen ? /* @__PURE__ */ jsx39(ChevronUpIcon_default, {}) : /* @__PURE__ */ jsx39(ChevronDownIcon_default, {}) }) })
@@ -2932,11 +3026,11 @@ var Select_default = Select;
 
 // src/components/Field/Field.tsx
 import { forwardRef as forwardRef31 } from "react";
-import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 var Field = forwardRef31(({ children, label }, ref) => {
   {
     const prefixCls = PREFIX_CLS;
-    return /* @__PURE__ */ jsxs27("div", { ref, className: clsx_default(`${prefixCls}field`), children: [
+    return /* @__PURE__ */ jsxs26("div", { ref, className: clsx_default(`${prefixCls}field`), children: [
       /* @__PURE__ */ jsx40("div", { className: `${prefixCls}field__label`, children: label }),
       /* @__PURE__ */ jsx40("div", { className: `${prefixCls}field__content`, children })
     ] });
@@ -2985,12 +3079,14 @@ export {
   assignRef,
   clsx_default as clsx,
   getOpenValuesByPathname,
+  hasResizeObserver,
   mergeRefs_default as mergeRefs,
   scrollToItem,
   useAccordionItem,
   useCollapse,
   useDebounce_default as useDebounce,
   useDisclosure_default as useDisclosure,
+  useEffectEvent_default as useEffectEvent,
   useElementSize_default as useElementSize,
   useInfiniteQuery_default as useInfiniteQuery,
   useLocalStorage,
@@ -2998,6 +3094,8 @@ export {
   useMenuItemValue,
   useOnClickOutside_default as useOnClickOutside,
   usePrevious,
+  useResizeObserver_default as useResizeObserver,
   useStep,
+  useValueEffect_default as useValueEffect,
   useVirtualizer_default as useVirtualizer
 };