@unifiedsoftware/react-ui 1.0.17 → 1.0.19

package/dist/index.mjs

@@ -29,22 +29,45 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // src/components/Backdrop/Backdrop.tsx
 import clsx2 from "clsx";
-import { forwardRef as forwardRef3, useRef as useRef2 } from "react";
+import { forwardRef as forwardRef3, useRef } from "react";
 import { mergeRefs } from "react-merge-refs";
 
 // src/constants/index.ts
 var PREFIX_CLS = "us-";
 
 // src/components/Portal/Portal.tsx
-import { forwardRef, useRef } from "react";
-import { Portal as ReactPortal } from "react-portal";
+import { forwardRef } from "react";
+import { createPortal } from "react-dom";
 import { jsx } from "react/jsx-runtime";
-var Portal = forwardRef(({ children }, ref) => {
-  const portalRef = useRef(null);
-  return /* @__PURE__ */ jsx(ReactPortal, { ref: portalRef, node: document.body, children: /* @__PURE__ */ jsx("div", { className: `${PREFIX_CLS}potal`, children }) });
+var Portal = forwardRef(({ children, container }, ref) => {
+  const prefixCls = PREFIX_CLS;
+  return createPortal(
+    /* @__PURE__ */ jsx("div", { ref, className: `${prefixCls}portal`, children }),
+    container || document.body
+  );
 });
 var Portal_default = Portal;
 
@@ -87,7 +110,7 @@ var Transition_default = Transition;
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var Backdrop = forwardRef3((props, ref) => {
   const _a = props, { children, className, isOpen, onClose } = _a, rest = __objRest(_a, ["children", "className", "isOpen", "onClose"]);
-  const nodeRef = useRef2(null);
+  const nodeRef = useRef(null);
   return /* @__PURE__ */ jsx3(
     Transition_default,
     {
@@ -137,7 +160,7 @@ var Badge_default = Badge;
 
 // src/components/Button/Button.tsx
 import clsx5 from "clsx";
-import { forwardRef as forwardRef8 } from "react";
+import { forwardRef as forwardRef9 } from "react";
 
 // src/icons/ChevronDownIcon.tsx
 import { forwardRef as forwardRef4 } from "react";
@@ -216,10 +239,38 @@ var LoaderIcon = forwardRef6((props, ref) => {
 });
 var LoaderIcon_default = LoaderIcon;
 
+// src/icons/CloseIcon.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var CloseIcon = forwardRef7((props, ref) => {
+  return /* @__PURE__ */ jsxs6(
+    "svg",
+    __spreadProps(__spreadValues({
+      ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      strokeWidth: "2",
+      stroke: "currentColor",
+      fill: "none",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx8("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx8("path", { d: "M18 6l-12 12" }),
+        /* @__PURE__ */ jsx8("path", { d: "M6 6l12 12" })
+      ]
+    })
+  );
+});
+var CloseIcon_default = CloseIcon;
+
 // src/components/Icon/Icon.tsx
 import clsx4 from "clsx";
-import { Children, cloneElement, forwardRef as forwardRef7 } from "react";
-var Icon = forwardRef7(({ children, size }, ref) => {
+import { Children, cloneElement, forwardRef as forwardRef8 } from "react";
+var Icon = forwardRef8(({ children, size }, ref) => {
   const child = Children.only(children);
   return cloneElement(child, __spreadProps(__spreadValues({
     ref
@@ -230,8 +281,8 @@ var Icon = forwardRef7(({ children, size }, ref) => {
 var Icon_default = Icon;
 
 // src/components/Button/Button.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var Button = forwardRef8(
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var Button = forwardRef9(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "button",
@@ -262,19 +313,20 @@ var Button = forwardRef8(
       "loading",
       "disabled"
     ]);
-    return /* @__PURE__ */ jsxs6(
+    const prefixCls = PREFIX_CLS;
+    return /* @__PURE__ */ jsxs7(
       Component,
       __spreadProps(__spreadValues({
         ref,
         className: clsx5(
-          `${PREFIX_CLS}button`,
+          `${prefixCls}button`,
           {
-            [`${PREFIX_CLS}button--${variant}`]: variant,
-            [`${PREFIX_CLS}button--${color}`]: color,
-            [`${PREFIX_CLS}button--${size}`]: size,
-            [`${PREFIX_CLS}button--block`]: block,
-            [`${PREFIX_CLS}button--icon-only`]: iconOnly,
-            [`${PREFIX_CLS}button--disabled`]: disabled
+            [`${prefixCls}button--${variant}`]: variant,
+            [`${prefixCls}button--${color}`]: color,
+            [`${prefixCls}button--${size}`]: size,
+            [`${prefixCls}button--block`]: block,
+            [`${prefixCls}button--icon-only`]: iconOnly,
+            [`${prefixCls}button--disabled`]: disabled
           },
           className
         ),
@@ -282,10 +334,10 @@ var Button = forwardRef8(
         disabled
       }, rest), {
         children: [
-          /* @__PURE__ */ jsx8("div", { className: `${PREFIX_CLS}overlay` }),
-          /* @__PURE__ */ jsx8("div", { className: `${PREFIX_CLS}outline` }),
-          loading ? /* @__PURE__ */ jsx8(Icon_default, { children: /* @__PURE__ */ jsx8(LoaderIcon_default, { className: `${PREFIX_CLS}animation-spin` }) }) : startContent,
-          /* @__PURE__ */ jsx8("div", { className: `${PREFIX_CLS}button__content`, children }),
+          /* @__PURE__ */ jsx9("div", { className: `${prefixCls}overlay` }),
+          /* @__PURE__ */ jsx9("div", { className: `${prefixCls}outline` }),
+          loading ? /* @__PURE__ */ jsx9(Icon_default, { children: /* @__PURE__ */ jsx9(LoaderIcon_default, { className: `${prefixCls}animation-spin` }) }) : startContent,
+          /* @__PURE__ */ jsx9("div", { className: `${prefixCls}button__content`, children }),
           endContent
         ]
       })
@@ -294,7 +346,32 @@ var Button = forwardRef8(
 );
 
 // src/components/Card/Card.tsx
-import { forwardRef as forwardRef9 } from "react";
+import { forwardRef as forwardRef10 } from "react";
+
+// src/utils/scroll.ts
+var scrollToItem = (parentElement, currentElement) => {
+  const parentRect = parentElement.getBoundingClientRect();
+  const currentRect = currentElement.getBoundingClientRect();
+  const behavior = "smooth";
+  const previousElement = currentElement.previousSibling;
+  const previousRect = (previousElement == null ? void 0 : previousElement.getBoundingClientRect()) || currentRect;
+  if (parentRect.left > previousRect.left) {
+    let offset = 0;
+    if (previousElement) {
+      offset = previousRect.left - parentRect.left + parentElement.scrollLeft + previousRect.width / 4;
+    }
+    parentElement.scrollTo({ behavior, left: offset });
+  }
+  const nextElement = currentElement.nextSibling;
+  const nextRect = (nextElement == null ? void 0 : nextElement.getBoundingClientRect()) || currentRect;
+  if (parentRect.right < nextRect.right) {
+    let offset = parentElement.scrollWidth;
+    if (nextElement) {
+      offset = nextRect.right - parentRect.right + parentElement.scrollLeft - nextRect.width / 4;
+    }
+    parentElement.scrollTo({ behavior, left: offset });
+  }
+};
 
 // src/utils/clsx.ts
 function toVal(mix) {
@@ -336,54 +413,52 @@ function clsx6(...inputs) {
 }
 var clsx_default = clsx6;
 
-// src/utils/scroll.ts
-var scrollToItem = (parentElement, currentElement) => {
-  const parentRect = parentElement.getBoundingClientRect();
-  const currentRect = currentElement.getBoundingClientRect();
-  const behavior = "smooth";
-  const previousElement = currentElement.previousSibling;
-  const previousRect = (previousElement == null ? void 0 : previousElement.getBoundingClientRect()) || currentRect;
-  if (parentRect.left > previousRect.left) {
-    let offset = 0;
-    if (previousElement) {
-      offset = previousRect.left - parentRect.left + parentElement.scrollLeft + previousRect.width / 4;
-    }
-    parentElement.scrollTo({ behavior, left: offset });
+// src/utils/mergeRefs.ts
+function assignRef(ref, value) {
+  if (ref == null)
+    return;
+  if (typeof ref === "function") {
+    ref(value);
+    return;
   }
-  const nextElement = currentElement.nextSibling;
-  const nextRect = (nextElement == null ? void 0 : nextElement.getBoundingClientRect()) || currentRect;
-  if (parentRect.right < nextRect.right) {
-    let offset = parentElement.scrollWidth;
-    if (nextElement) {
-      offset = nextRect.right - parentRect.right + parentElement.scrollLeft - nextRect.width / 4;
-    }
-    parentElement.scrollTo({ behavior, left: offset });
+  try {
+    ref.current = value;
+  } catch (error) {
+    throw new Error(`Cannot assign value '${value}' to ref '${ref}'`);
   }
-};
+}
+function mergeRefs2(...refs) {
+  return (node) => {
+    refs.forEach((ref) => {
+      assignRef(ref, node);
+    });
+  };
+}
+var mergeRefs_default = mergeRefs2;
 
 // src/components/Card/Card.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-var Card = forwardRef9((_a, ref) => {
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Card = forwardRef10((_a, ref) => {
   var _b = _a, { as: Component = "div", children, className } = _b, rest = __objRest(_b, ["as", "children", "className"]);
   const prefixCls = PREFIX_CLS;
-  return /* @__PURE__ */ jsx9(Component, __spreadProps(__spreadValues({ ref, className: clsx_default(`${prefixCls}card`, className) }, rest), { children }));
+  return /* @__PURE__ */ jsx10(Component, __spreadProps(__spreadValues({ ref, className: clsx_default(`${prefixCls}card`, className) }, rest), { children }));
 });
 var Card_default = Card;
 
 // src/components/Card/CardHeader.tsx
-import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
-var CardHeader = forwardRef10(
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var CardHeader = forwardRef11(
   (_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__ */ jsxs7(Component, __spreadProps(__spreadValues({ ref, className: clsx_default(`${prefixCls}card-header`, className) }, rest), { children: [
-      startContent && /* @__PURE__ */ jsx10("div", { className: `${prefixCls}card-header__start-content`, children: startContent }),
-      /* @__PURE__ */ jsxs7("div", { className: `${prefixCls}card-header__content`, children: [
-        /* @__PURE__ */ jsx10("div", { className: `${prefixCls}card-header__title`, children: title }),
-        subtitle && /* @__PURE__ */ jsx10("div", { className: `${prefixCls}card-header__subtitle`, children: subtitle })
+    return /* @__PURE__ */ jsxs8(Component, __spreadProps(__spreadValues({ ref, className: clsx_default(`${prefixCls}card-header`, className) }, rest), { children: [
+      startContent && /* @__PURE__ */ jsx11("div", { className: `${prefixCls}card-header__start-content`, children: startContent }),
+      /* @__PURE__ */ jsxs8("div", { className: `${prefixCls}card-header__content`, children: [
+        /* @__PURE__ */ jsx11("div", { className: `${prefixCls}card-header__title`, children: title }),
+        subtitle && /* @__PURE__ */ jsx11("div", { className: `${prefixCls}card-header__subtitle`, children: subtitle })
       ] }),
-      endContent && /* @__PURE__ */ jsx10("div", { className: `${prefixCls}card-header__end-content`, children: endContent })
+      endContent && /* @__PURE__ */ jsx11("div", { className: `${prefixCls}card-header__end-content`, children: endContent })
     ] }));
   }
 );
@@ -391,12 +466,12 @@ var CardHeader_default = CardHeader;
 
 // src/components/Chip/Chip.tsx
 import clsx7 from "clsx";
-import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-var Chip = forwardRef11(
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var Chip = forwardRef12(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", children, className, variant, color, size } = _b, rest = __objRest(_b, ["as", "children", "className", "variant", "color", "size"]);
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs9(
       Component,
       __spreadProps(__spreadValues({
         ref,
@@ -411,8 +486,8 @@ var Chip = forwardRef11(
         )
       }, rest), {
         children: [
-          /* @__PURE__ */ jsx11("div", { className: clsx7(`${PREFIX_CLS}overlay`) }),
-          /* @__PURE__ */ jsx11("div", { className: `${PREFIX_CLS}outline` }),
+          /* @__PURE__ */ jsx12("div", { className: clsx7(`${PREFIX_CLS}overlay`) }),
+          /* @__PURE__ */ jsx12("div", { className: `${PREFIX_CLS}outline` }),
           children
         ]
       })
@@ -422,7 +497,7 @@ var Chip = forwardRef11(
 var Chip_default = Chip;
 
 // src/components/Collapse/Collapse.tsx
-import { Children as Children2, useEffect, useRef as useRef3, useState } from "react";
+import { Children as Children2, useEffect, useRef as useRef2, useState } from "react";
 
 // src/components/Collapse/CollapseContext.tsx
 import { createContext, useContext } from "react";
@@ -437,9 +512,9 @@ var useCollapse = () => {
 var CollapseContext_default = CollapseContext;
 
 // src/components/Collapse/Collapse.tsx
-import { jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsxs as jsxs10 } from "react/jsx-runtime";
 var Collapse = ({ children, isOpen, onOpen, onClose, onToggle }) => {
-  const collapseRef = useRef3(null);
+  const collapseRef = useRef2(null);
   const [selfIsOpen, setSelfIsOpen] = useState(isOpen != null ? isOpen : false);
   const [heightAuto, setHeightAuto] = useState(false);
   const [trigger, content] = Children2.toArray(children);
@@ -467,7 +542,7 @@ var Collapse = ({ children, isOpen, onOpen, onClose, onToggle }) => {
       }
     }, 100);
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     CollapseContext_default.Provider,
     {
       value: {
@@ -489,8 +564,8 @@ var Collapse_default = Collapse;
 
 // src/components/Collapse/CollapseContent.tsx
 import clsx8 from "clsx";
-import { Children as Children3, cloneElement as cloneElement2, forwardRef as forwardRef12 } from "react";
-var CollapseContent = forwardRef12(({ children }, ref) => {
+import { Children as Children3, cloneElement as cloneElement2, forwardRef as forwardRef13 } from "react";
+var CollapseContent = forwardRef13(({ children }, ref) => {
   var _a, _b;
   const { collapseRef, isOpen, heightAuto } = useCollapse();
   const child = Children3.only(children);
@@ -510,8 +585,8 @@ var CollapseContent = forwardRef12(({ children }, ref) => {
 var CollapseContent_default = CollapseContent;
 
 // src/components/Collapse/CollapseTrigger.tsx
-import { Children as Children4, cloneElement as cloneElement3, forwardRef as forwardRef13 } from "react";
-var CollapseTrigger = forwardRef13(({ children }, ref) => {
+import { Children as Children4, cloneElement as cloneElement3, forwardRef as forwardRef14 } from "react";
+var CollapseTrigger = forwardRef14(({ children }, ref) => {
   const { collapseRef, onToggle } = useCollapse();
   const child = Children4.only(children);
   const _a = child.props, { onClick } = _a, rest = __objRest(_a, ["onClick"]);
@@ -530,19 +605,19 @@ var CollapseTrigger_default = CollapseTrigger;
 
 // src/components/Drawer/Drawer.tsx
 import clsx9 from "clsx";
-import { forwardRef as forwardRef14, useRef as useRef4 } from "react";
-import { mergeRefs as mergeRefs2 } from "react-merge-refs";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
-var Drawer = forwardRef14((props, ref) => {
+import { forwardRef as forwardRef15, useRef as useRef3 } from "react";
+import { mergeRefs as mergeRefs3 } from "react-merge-refs";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var Drawer = forwardRef15((props, ref) => {
   const { children, className, isOpen, size = "md", position = "left", onClose } = props;
-  const nodeRef = useRef4(null);
+  const nodeRef = useRef3(null);
   const handleClose = () => {
     onClose();
   };
-  return /* @__PURE__ */ jsx12(Backdrop_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsx12(Transition_default, { nodeRef, isOpen, name: `${PREFIX_CLS}drawer`, enter: 600, leave: 300, unmountOnExit: true, children: /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsx13(Backdrop_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsx13(Transition_default, { nodeRef, isOpen, name: `${PREFIX_CLS}drawer`, enter: 600, leave: 300, unmountOnExit: true, children: /* @__PURE__ */ jsxs11(
     "div",
     {
-      ref: mergeRefs2([ref, nodeRef]),
+      ref: mergeRefs3([ref, nodeRef]),
       className: clsx9(
         `${PREFIX_CLS}drawer`,
         {
@@ -552,7 +627,7 @@ var Drawer = forwardRef14((props, ref) => {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx12("div", { className: `${PREFIX_CLS}drawer__overlay` }),
+        /* @__PURE__ */ jsx13("div", { className: `${PREFIX_CLS}drawer__overlay` }),
         children
       ]
     }
@@ -582,7 +657,7 @@ import { useMemo as useMemo2 } from "react";
 
 // src/components/Menu/MenuItem.tsx
 import clsx10 from "clsx";
-import { forwardRef as forwardRef15, useContext as useContext4, useEffect as useEffect2 } from "react";
+import { forwardRef as forwardRef16, useContext as useContext4, useEffect as useEffect2 } from "react";
 
 // src/components/Menu/MenuValueContext.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
@@ -597,12 +672,13 @@ var useMenuItemValue = () => {
 var MenuValueContext_default = MenuValueContext;
 
 // src/components/Menu/MenuItem.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
-var MenuItem = forwardRef15((props, ref) => {
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var MenuItem = forwardRef16((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 = useContext4(MenuValueContext_default);
   const mergedValues = [...values, value];
+  const isSelected = menuValue[level - 1] === value;
   const handleClick = (event) => {
     if (value !== void 0) {
       onChange(mergedValues);
@@ -616,14 +692,14 @@ var MenuItem = forwardRef15((props, ref) => {
       onChange(mergedValues);
     }
   }, [value, originalValue, navMode]);
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     Component,
     __spreadProps(__spreadValues({
       ref,
       className: clsx10(
         `${PREFIX_CLS}menu-item`,
         {
-          [`${PREFIX_CLS}menu-item--selected`]: menuValue.includes(value),
+          [`${PREFIX_CLS}menu-item--selected`]: isSelected,
           [`${PREFIX_CLS}menu-item--disabled`]: disabled
         },
         className
@@ -634,9 +710,9 @@ var MenuItem = forwardRef15((props, ref) => {
       onClick: handleClick
     }, rest), {
       children: [
-        /* @__PURE__ */ jsx13("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ jsx13("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
-        icon && /* @__PURE__ */ jsx13("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
-        /* @__PURE__ */ jsx13("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ jsx13("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) })
+        /* @__PURE__ */ jsx14("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ jsx14("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
+        icon && /* @__PURE__ */ jsx14("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
+        /* @__PURE__ */ jsx14("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ jsx14("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) })
       ]
     })
   );
@@ -672,7 +748,7 @@ var addOrRemoveValueInArray = (array, value) => {
 };
 
 // src/components/Menu/MenuSubmenu.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 var MenuSubmenu = (_a) => {
   var _b = _a, {
     children,
@@ -699,10 +775,11 @@ var MenuSubmenu = (_a) => {
   const values = useContext5(MenuValueContext_default);
   const isOpen = openValues.includes(value);
   const mergedValues = [...values, value];
+  const isSelected = menuValue[level - 1] === value;
   const content = useMemo(() => {
     return items == null ? void 0 : items.map((_a2, index) => {
       var _b2 = _a2, { type } = _b2, item = __objRest(_b2, ["type"]);
-      return type === "item" ? /* @__PURE__ */ jsx14(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "submenu" ? /* @__PURE__ */ jsx14(MenuSubmenu, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "group" ? /* @__PURE__ */ jsx14(MenuGroup_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : /* @__PURE__ */ jsx14(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index);
+      return type === "item" ? /* @__PURE__ */ jsx15(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "submenu" ? /* @__PURE__ */ jsx15(MenuSubmenu, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "group" ? /* @__PURE__ */ jsx15(MenuGroup_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : /* @__PURE__ */ jsx15(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index);
     });
   }, [items]);
   const handleClick = (event) => {
@@ -720,14 +797,14 @@ var MenuSubmenu = (_a) => {
     }
     onClick == null ? void 0 : onClick(event);
   };
-  return /* @__PURE__ */ jsx14(MenuValueContext_default.Provider, { value: mergedValues, children: /* @__PURE__ */ jsx14("div", { className: clsx11(`${PREFIX_CLS}menu-submenu`), children: /* @__PURE__ */ jsxs12(Collapse_default, { isOpen, children: [
-    /* @__PURE__ */ jsx14(CollapseTrigger_default, { children: /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsx15(MenuValueContext_default.Provider, { value: mergedValues, children: /* @__PURE__ */ jsx15("div", { className: clsx11(`${PREFIX_CLS}menu-submenu`), children: /* @__PURE__ */ jsxs13(Collapse_default, { isOpen, children: [
+    /* @__PURE__ */ jsx15(CollapseTrigger_default, { children: /* @__PURE__ */ jsxs13(
       "div",
       __spreadProps(__spreadValues({
         className: clsx11(
           `${PREFIX_CLS}menu-item`,
           {
-            [`${PREFIX_CLS}menu-item--selected`]: menuValue.includes(value) || items && mergedValues.includes(menuValue)
+            [`${PREFIX_CLS}menu-item--selected`]: isSelected || items && mergedValues.includes(menuValue)
           },
           className
         ),
@@ -737,14 +814,14 @@ var MenuSubmenu = (_a) => {
         onClick: handleClick
       }, rest), {
         children: [
-          /* @__PURE__ */ jsx14("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ jsx14("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
-          icon && /* @__PURE__ */ jsx14("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
-          /* @__PURE__ */ jsx14("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ jsx14("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) }),
-          /* @__PURE__ */ jsx14("div", { className: `${PREFIX_CLS}menu-item__icon`, children: isOpen ? /* @__PURE__ */ jsx14(ChevronUpIcon_default, { className: `${PREFIX_CLS}icon` }) : /* @__PURE__ */ jsx14(ChevronDownIcon_default, { className: `${PREFIX_CLS}icon` }) })
+          /* @__PURE__ */ jsx15("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ jsx15("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
+          icon && /* @__PURE__ */ jsx15("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
+          /* @__PURE__ */ jsx15("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ jsx15("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) }),
+          /* @__PURE__ */ jsx15("div", { className: `${PREFIX_CLS}menu-item__icon`, children: isOpen ? /* @__PURE__ */ jsx15(ChevronUpIcon_default, { className: `${PREFIX_CLS}icon` }) : /* @__PURE__ */ jsx15(ChevronDownIcon_default, { className: `${PREFIX_CLS}icon` }) })
         ]
       })
     ) }),
-    /* @__PURE__ */ jsx14(CollapseContent_default, { children: /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(CollapseContent_default, { children: /* @__PURE__ */ jsx15(
       "ul",
       {
         className: clsx11(`${PREFIX_CLS}menu`, {
@@ -758,7 +835,7 @@ var MenuSubmenu = (_a) => {
 var MenuSubmenu_default = MenuSubmenu;
 
 // src/components/Menu/MenuGroup.tsx
-import { Fragment, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 var MenuGroup = (_a) => {
   var _b = _a, {
     children,
@@ -780,11 +857,11 @@ var MenuGroup = (_a) => {
   const content = useMemo2(() => {
     return items == null ? void 0 : items.map((_a2, index) => {
       var _b2 = _a2, { type } = _b2, item = __objRest(_b2, ["type"]);
-      return type === "item" ? /* @__PURE__ */ jsx15(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ jsx15(MenuSubmenu_default, __spreadValues({}, item), index) : /* @__PURE__ */ jsx15(MenuItem_default, __spreadValues({}, item), index);
+      return type === "item" ? /* @__PURE__ */ jsx16(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ jsx16(MenuSubmenu_default, __spreadValues({}, item), index) : /* @__PURE__ */ jsx16(MenuItem_default, __spreadValues({}, item), index);
     });
   }, [items]);
-  return /* @__PURE__ */ jsxs13(Fragment, { children: [
-    /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(Fragment, { children: [
+    /* @__PURE__ */ jsxs14(
       "div",
       __spreadProps(__spreadValues({
         className: clsx12(`${PREFIX_CLS}menu-group`, className),
@@ -793,8 +870,8 @@ var MenuGroup = (_a) => {
         }, style)
       }, rest), {
         children: [
-          icon && /* @__PURE__ */ jsx15("div", { className: `${PREFIX_CLS}menu-group__icon`, children: icon }),
-          /* @__PURE__ */ jsx15("div", { className: `${PREFIX_CLS}menu-group__content`, children: /* @__PURE__ */ jsx15("span", { className: `${PREFIX_CLS}menu-group__title`, children: title }) })
+          icon && /* @__PURE__ */ jsx16("div", { className: `${PREFIX_CLS}menu-group__icon`, children: icon }),
+          /* @__PURE__ */ jsx16("div", { className: `${PREFIX_CLS}menu-group__content`, children: /* @__PURE__ */ jsx16("span", { className: `${PREFIX_CLS}menu-group__title`, children: title }) })
         ]
       })
     ),
@@ -804,7 +881,7 @@ var MenuGroup = (_a) => {
 var MenuGroup_default = MenuGroup;
 
 // src/components/Menu/Menu.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var Menu = (_a) => {
   var _b = _a, {
     children,
@@ -835,7 +912,7 @@ var Menu = (_a) => {
   const content = useMemo3(() => {
     return items == null ? void 0 : items.map((_a3, index) => {
       var _b2 = _a3, { type } = _b2, item = __objRest(_b2, ["type"]);
-      return type === "item" ? /* @__PURE__ */ jsx16(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ jsx16(MenuSubmenu_default, __spreadValues({}, item), index) : type === "group" ? /* @__PURE__ */ jsx16(MenuGroup_default, __spreadValues({}, item), index) : /* @__PURE__ */ jsx16(MenuItem_default, __spreadValues({}, item), index);
+      return type === "item" ? /* @__PURE__ */ jsx17(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ jsx17(MenuSubmenu_default, __spreadValues({}, item), index) : type === "group" ? /* @__PURE__ */ jsx17(MenuGroup_default, __spreadValues({}, item), index) : /* @__PURE__ */ jsx17(MenuItem_default, __spreadValues({}, item), index);
     });
   }, [items]);
   const handleChange = (value) => {
@@ -865,7 +942,7 @@ var Menu = (_a) => {
       setSelfOpenValues(openValuesProp);
     }
   }, [openValuesProp]);
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     MenuContext_default.Provider,
     {
       value: {
@@ -878,7 +955,7 @@ var Menu = (_a) => {
         onChange: handleChange,
         onItemSelect: handleItemSelect
       },
-      children: /* @__PURE__ */ jsx16("div", __spreadProps(__spreadValues({ className: clsx13(`${PREFIX_CLS}menu`) }, rest), { children: content || children }))
+      children: /* @__PURE__ */ jsx17("div", __spreadProps(__spreadValues({ className: clsx13(`${PREFIX_CLS}menu`) }, rest), { children: content || children }))
     }
   );
 };
@@ -886,23 +963,23 @@ Menu.displayName = "Menu";
 var Menu_default = Menu;
 
 // src/components/Accordion/Accordion.tsx
-import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var Accordion = forwardRef16((props, ref) => {
+import { forwardRef as forwardRef17 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var Accordion = forwardRef17((props, ref) => {
   const _a = props, { children, className } = _a, rest = __objRest(_a, ["children", "className"]);
   const prefixCls = PREFIX_CLS;
-  return /* @__PURE__ */ jsx17("div", __spreadProps(__spreadValues({ ref, className: clsx_default(`${prefixCls}accordion`, className) }, rest), { children }));
+  return /* @__PURE__ */ jsx18("div", __spreadProps(__spreadValues({ ref, className: clsx_default(`${prefixCls}accordion`, className) }, rest), { children }));
 });
 var Accordion_default = Accordion;
 
 // src/components/Accordion/AccordionItem.tsx
-import { createContext as createContext4, forwardRef as forwardRef17, useContext as useContext6, useId } from "react";
+import { createContext as createContext4, forwardRef as forwardRef18, useContext as useContext6, useId } from "react";
 
 // src/hooks/useLocalStorage.tsx
 import { useCallback, useEffect as useEffect5, useState as useState3 } from "react";
 
 // src/hooks/useEventListener.tsx
-import { useRef as useRef5 } from "react";
+import { useRef as useRef4 } from "react";
 
 // src/hooks/useIsomorphicLayoutEffect.tsx
 import { useEffect as useEffect4, useLayoutEffect } from "react";
@@ -911,7 +988,7 @@ var useIsomorphicLayoutEffect_default = useIsomorphicLayoutEffect;
 
 // src/hooks/useEventListener.tsx
 function useEventListener(handler) {
-  const savedHandler = useRef5(handler);
+  const savedHandler = useRef4(handler);
   useIsomorphicLayoutEffect_default(() => {
     savedHandler.current = handler;
   }, [handler]);
@@ -968,9 +1045,9 @@ function parseJSON(value) {
 }
 
 // src/hooks/usePrevious.tsx
-import { useEffect as useEffect6, useRef as useRef6 } from "react";
+import { useEffect as useEffect6, useRef as useRef5 } from "react";
 var usePrevious = (value) => {
-  const ref = useRef6();
+  const ref = useRef5();
   useEffect6(() => {
     ref.current = value;
   });
@@ -979,7 +1056,7 @@ var usePrevious = (value) => {
 
 // src/hooks/useDisclosure.ts
 import { useState as useState4 } from "react";
-var useDisclosure = ({ defaultValue } = {}) => {
+function useDisclosure({ defaultValue } = {}) {
   const [isOpen, setIsOpen] = useState4(defaultValue || false);
   const onOpen = () => {
     setIsOpen(true);
@@ -996,9 +1073,27 @@ var useDisclosure = ({ defaultValue } = {}) => {
     onClose,
     onToggle
   };
-};
+}
 var useDisclosure_default = useDisclosure;
 
+// src/hooks/useOnClickOutside.tsx
+import { useEffect as useEffect7 } from "react";
+var useOnClickOutside = (ref, handler) => {
+  useEffect7(() => {
+    const listener = (event) => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener("click", listener);
+    return () => {
+      document.removeEventListener("click", listener);
+    };
+  }, [ref, handler]);
+};
+var useOnClickOutside_default = useOnClickOutside;
+
 // src/hooks/useStep.tsx
 import { useCallback as useCallback2, useMemo as useMemo4, useState as useState5 } from "react";
 var useStep = (maxStep) => {
@@ -1042,8 +1137,129 @@ var useStep = (maxStep) => {
   ];
 };
 
+// src/hooks/useDebounce.ts
+import { useEffect as useEffect8, useState as useState6 } from "react";
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState6(value);
+  useEffect8(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+var useDebounce_default = useDebounce;
+
+// src/hooks/useInfiniteQuery/useInfiniteQuery.ts
+import { useEffect as useEffect9, useState as useState7 } from "react";
+
+// src/hooks/useInfiniteQuery/types.ts
+var QueryStatus = /* @__PURE__ */ ((QueryStatus2) => {
+  QueryStatus2[QueryStatus2["IDLE"] = 0] = "IDLE";
+  QueryStatus2[QueryStatus2["LOADING"] = 1] = "LOADING";
+  QueryStatus2[QueryStatus2["SUCCESS"] = 2] = "SUCCESS";
+  QueryStatus2[QueryStatus2["ERROR"] = 3] = "ERROR";
+  return QueryStatus2;
+})(QueryStatus || {});
+
+// src/hooks/useInfiniteQuery/useInfiniteQuery.ts
+function useInfiniteQuery(options, deps = []) {
+  const [status, setStatus] = useState7(0 /* IDLE */);
+  const [data, setData] = useState7({ pages: [] });
+  const [error, setError] = useState7();
+  const [hasNextPage, setHasNextPage] = useState7(true);
+  const [isFetchingNextPage, setIsFetchingNextPage] = useState7(false);
+  const fetchNextPage = () => __async(this, null, function* () {
+    try {
+      setStatus(1 /* LOADING */);
+      setError(void 0);
+      setIsFetchingNextPage(true);
+      const lastIndex = data.pages.length - 1;
+      const page = options.getNextPage(data.pages[lastIndex], data.pages);
+      const newPage = yield options.query({ page });
+      const newData = { pages: [...data.pages, newPage] };
+      setData(newData);
+      const newLastIndex = newData.pages.length - 1;
+      const nextPage = options.getNextPage(newData.pages[newLastIndex], newData.pages);
+      setHasNextPage(nextPage !== void 0);
+      setIsFetchingNextPage(false);
+      setStatus(2 /* SUCCESS */);
+    } catch (error2) {
+      setError(error2);
+      setStatus(3 /* ERROR */);
+    }
+  });
+  useEffect9(() => {
+    const fetchData = () => __async(this, null, function* () {
+      try {
+        setStatus(1 /* LOADING */);
+        setError(void 0);
+        setIsFetchingNextPage(true);
+        const page = void 0;
+        const newPage = yield options.query({ page });
+        setData({ pages: [newPage] });
+        const nextPage = options.getNextPage(newPage, [newPage]);
+        setHasNextPage(nextPage !== void 0);
+        setIsFetchingNextPage(false);
+        setStatus(2 /* SUCCESS */);
+      } catch (error2) {
+        setError(error2);
+        setStatus(3 /* ERROR */);
+      }
+    });
+    fetchData();
+  }, deps);
+  return { status, data, error, hasNextPage, isFetchingNextPage, fetchNextPage };
+}
+var useInfiniteQuery_default = useInfiniteQuery;
+
+// src/hooks/useElementSize/useElementSize.ts
+import { useEffect as useEffect10, useMemo as useMemo5, useRef as useRef6, useState as useState8 } from "react";
+var defaultState = {
+  width: 0,
+  height: 0
+};
+function useElementSize(options) {
+  var _a;
+  const frameID = useRef6(0);
+  const [resize, setResize] = useState8(defaultState);
+  const observer = useMemo5(
+    () => typeof window !== "undefined" ? new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        cancelAnimationFrame(frameID.current);
+        frameID.current = requestAnimationFrame(() => {
+          var _a2, _b, _c;
+          const target = (_b = (_a2 = options.ref) == null ? void 0 : _a2.current) != null ? _b : options.target;
+          if (target) {
+            (_c = options.callback) == null ? void 0 : _c.call(options, resize);
+            setResize({ width: entry.contentRect.width, height: entry.contentRect.height });
+          }
+        });
+      }
+    }) : null,
+    []
+  );
+  useEffect10(() => {
+    var _a2, _b;
+    const target = (_b = (_a2 = options.ref) == null ? void 0 : _a2.current) != null ? _b : options.target;
+    if (target) {
+      observer == null ? void 0 : observer.observe(target);
+    }
+    return () => {
+      observer == null ? void 0 : observer.disconnect();
+      if (frameID.current) {
+        cancelAnimationFrame(frameID.current);
+      }
+    };
+  }, [(_a = options.ref) == null ? void 0 : _a.current, options.target]);
+  return resize;
+}
+var useElementSize_default = useElementSize;
+
 // src/components/Accordion/AccordionItem.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var AccordionItemContext = createContext4(null);
 var useAccordionItem = () => {
   const context = useContext6(AccordionItemContext);
@@ -1052,61 +1268,61 @@ var useAccordionItem = () => {
   }
   return context;
 };
-var AccordionItem = forwardRef17((props, ref) => {
+var AccordionItem = forwardRef18((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 value = valueProp != null ? valueProp : id;
-  return /* @__PURE__ */ jsx18(AccordionItemContext.Provider, { value: { value }, children: /* @__PURE__ */ jsx18("div", __spreadProps(__spreadValues({ ref, className: clsx_default(`${prefixCls}accordion-item`, className) }, rest), { children: /* @__PURE__ */ jsx18(Collapse_default, { isOpen, onOpen, onClose, onToggle, children }) })) });
+  return /* @__PURE__ */ jsx19(AccordionItemContext.Provider, { value: { value }, children: /* @__PURE__ */ jsx19("div", __spreadProps(__spreadValues({ ref, className: clsx_default(`${prefixCls}accordion-item`, className) }, rest), { children: /* @__PURE__ */ jsx19(Collapse_default, { isOpen, onOpen, onClose, onToggle, children }) })) });
 });
 var AccordionItem_default = AccordionItem;
 
 // src/components/Accordion/AccordionHeader.tsx
-import { forwardRef as forwardRef18 } from "react";
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
-var AccordionHeader = forwardRef18((props, ref) => {
+import { forwardRef as forwardRef19 } from "react";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+var AccordionHeader = forwardRef19((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__ */ jsx19(CollapseTrigger_default, { children: /* @__PURE__ */ jsxs14("div", __spreadProps(__spreadValues({ ref, className: clsx_default(`${prefixCls}accordion-header`, className) }, rest), { children: [
-    startContent && /* @__PURE__ */ jsx19("div", { className: `${prefixCls}accordion-header__start-content`, children: startContent }),
-    /* @__PURE__ */ jsxs14("div", { className: `${prefixCls}accordion-header__content`, children: [
-      /* @__PURE__ */ jsx19("div", { className: `${prefixCls}accordion-header__title`, children: title }),
-      subtitle && /* @__PURE__ */ jsx19("div", { className: `${prefixCls}accordion-header__subtitle`, children: subtitle })
+  return /* @__PURE__ */ jsx20(CollapseTrigger_default, { children: /* @__PURE__ */ jsxs15("div", __spreadProps(__spreadValues({ ref, className: clsx_default(`${prefixCls}accordion-header`, className) }, rest), { children: [
+    startContent && /* @__PURE__ */ jsx20("div", { className: `${prefixCls}accordion-header__start-content`, children: startContent }),
+    /* @__PURE__ */ jsxs15("div", { className: `${prefixCls}accordion-header__content`, children: [
+      /* @__PURE__ */ jsx20("div", { className: `${prefixCls}accordion-header__title`, children: title }),
+      subtitle && /* @__PURE__ */ jsx20("div", { className: `${prefixCls}accordion-header__subtitle`, children: subtitle })
     ] }),
-    /* @__PURE__ */ jsx19("div", { className: `${prefixCls}accordion-header__end-content`, children: /* @__PURE__ */ jsxs14("div", { className: "us-d-flex us-items-center us-gap-1", children: [
+    /* @__PURE__ */ jsx20("div", { className: `${prefixCls}accordion-header__end-content`, children: /* @__PURE__ */ jsxs15("div", { className: "us-d-flex us-items-center us-gap-1", children: [
       endContent,
-      /* @__PURE__ */ jsx19(Button, { type: "button", variant: "text", color: "secondary", size: "sm", iconOnly: true, children: /* @__PURE__ */ jsx19(Icon_default, { children: isOpen ? /* @__PURE__ */ jsx19(ChevronUpIcon_default, {}) : /* @__PURE__ */ jsx19(ChevronDownIcon_default, {}) }) })
+      /* @__PURE__ */ jsx20(Button, { type: "button", variant: "text", color: "secondary", size: "sm", iconOnly: true, children: /* @__PURE__ */ jsx20(Icon_default, { children: isOpen ? /* @__PURE__ */ jsx20(ChevronUpIcon_default, {}) : /* @__PURE__ */ jsx20(ChevronDownIcon_default, {}) }) })
     ] }) })
   ] })) });
 });
 var AccordionHeader_default = AccordionHeader;
 
 // src/components/Accordion/AccordionPanel.tsx
-import { forwardRef as forwardRef19 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var AccordionPanel = forwardRef19((_a, ref) => {
+import { forwardRef as forwardRef20 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var AccordionPanel = forwardRef20((_a, ref) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   const prefixCls = PREFIX_CLS;
-  return /* @__PURE__ */ jsx20(CollapseContent_default, { children: /* @__PURE__ */ jsx20("div", { ref, children: /* @__PURE__ */ jsx20("div", __spreadProps(__spreadValues({ className: clsx_default(`${prefixCls}accordion-panel`, className) }, rest), { children })) }) });
+  return /* @__PURE__ */ jsx21(CollapseContent_default, { children: /* @__PURE__ */ jsx21("div", { ref, children: /* @__PURE__ */ jsx21("div", __spreadProps(__spreadValues({ className: clsx_default(`${prefixCls}accordion-panel`, className) }, rest), { children })) }) });
 });
 var AccordionPanel_default = AccordionPanel;
 
 // src/components/Accordion/AccordionContent.tsx
-import { forwardRef as forwardRef20 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
-var AccordionContent = forwardRef20((_a, ref) => {
+import { forwardRef as forwardRef21 } from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var AccordionContent = forwardRef21((_a, ref) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   const prefixCls = PREFIX_CLS;
-  return /* @__PURE__ */ jsx21(CollapseContent_default, { children: /* @__PURE__ */ jsx21("div", { ref, children: /* @__PURE__ */ jsx21("div", __spreadProps(__spreadValues({ className: clsx_default(`${prefixCls}accordion-content`, className) }, rest), { children })) }) });
+  return /* @__PURE__ */ jsx22(CollapseContent_default, { children: /* @__PURE__ */ jsx22("div", { ref, children: /* @__PURE__ */ jsx22("div", __spreadProps(__spreadValues({ className: clsx_default(`${prefixCls}accordion-content`, className) }, rest), { children })) }) });
 });
 var AccordionContent_default = AccordionContent;
 
 // src/components/Tabs/Tab.tsx
 import clsx14 from "clsx";
-import mergeRefs3 from "merge-refs";
-import { forwardRef as forwardRef21, useEffect as useEffect7, useId as useId2, useRef as useRef7 } from "react";
+import mergeRefs4 from "merge-refs";
+import { forwardRef as forwardRef22, useEffect as useEffect11, useId as useId2, useRef as useRef7 } from "react";
 
 // ../../../node_modules/react-icons/lib/esm/iconBase.js
 import React3 from "react";
@@ -1206,8 +1422,8 @@ var useTabs = () => {
 };
 
 // src/components/Tabs/Tab.tsx
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
-var Tab = forwardRef21(
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+var Tab = forwardRef22(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "div",
@@ -1270,16 +1486,16 @@ var Tab = forwardRef21(
       event.stopPropagation();
       onClose(value);
     };
-    useEffect7(() => {
+    useEffect11(() => {
       registerItem({ value, disabled });
       if (value === tabs.value) {
         tabs.previousTabRef.current = tabRef.current;
       }
     }, [value, tabs.value]);
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs16(
       Component,
       __spreadProps(__spreadValues({
-        ref: mergeRefs3(tabRef, ref, (el) => tabs.tabRefs.current[value] = el),
+        ref: mergeRefs4(tabRef, ref, (el) => tabs.tabRefs.current[value] = el),
         className: clsx14(
           `${PREFIX_CLS}tab`,
           { [`${PREFIX_CLS}tab--selected`]: value === tabs.value, [`${PREFIX_CLS}tab--disabled`]: disabled },
@@ -1289,12 +1505,12 @@ var Tab = forwardRef21(
         onClick: handleClick
       }, rest), {
         children: [
-          /* @__PURE__ */ jsx22("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ jsx22("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
-          /* @__PURE__ */ jsxs15("div", { className: `${PREFIX_CLS}tab__content`, children: [
+          /* @__PURE__ */ jsx23("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ jsx23("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
+          /* @__PURE__ */ jsxs16("div", { className: `${PREFIX_CLS}tab__content`, children: [
             children,
-            closable && /* @__PURE__ */ jsx22(Button, { variant: "text", color: "secondary", iconOnly: true, size: "xs", onClick: handleClose, children: /* @__PURE__ */ jsx22(Icon_default, { children: /* @__PURE__ */ jsx22(TbX, {}) }) })
+            closable && /* @__PURE__ */ jsx23(Button, { variant: "text", color: "secondary", iconOnly: true, size: "xs", onClick: handleClose, children: /* @__PURE__ */ jsx23(Icon_default, { children: /* @__PURE__ */ jsx23(TbX, {}) }) })
           ] }),
-          /* @__PURE__ */ jsx22("div", { className: `${PREFIX_CLS}tab__indicator` })
+          /* @__PURE__ */ jsx23("div", { className: `${PREFIX_CLS}tab__indicator` })
         ]
       })
     );
@@ -1303,8 +1519,8 @@ var Tab = forwardRef21(
 
 // src/components/Tabs/Tabs.tsx
 import clsx15 from "clsx";
-import { useEffect as useEffect8, useRef as useRef8, useState as useState6 } from "react";
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { useEffect as useEffect12, useRef as useRef8, useState as useState9 } from "react";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var Tabs = (_a) => {
   var _b = _a, {
     children,
@@ -1326,8 +1542,8 @@ var Tabs = (_a) => {
   const tabsRef = useRef8(null);
   const tabRefs = useRef8({});
   const previousTabRef = useRef8(null);
-  const [selfValue, setSelfValue] = useState6(value != null ? value : defaultValue);
-  const [items, setItems] = useState6([]);
+  const [selfValue, setSelfValue] = useState9(value != null ? value : defaultValue);
+  const [items, setItems] = useState9([]);
   const registerItem = (item) => {
     setItems((prevItems) => {
       const index = prevItems.findIndex((item2) => item2.value);
@@ -1354,24 +1570,24 @@ var Tabs = (_a) => {
   const handleClose = (value2) => {
     onClose == null ? void 0 : onClose(value2);
   };
-  useEffect8(() => {
+  useEffect12(() => {
     if (value !== void 0) {
       setSelfValue(value);
       scrollToTab(value);
     }
   }, [value]);
-  useEffect8(() => {
+  useEffect12(() => {
     if (value === void 0) {
       const item = items.find((tab) => !tab.disabled);
       setSelfValue(item == null ? void 0 : item.value);
     }
   }, [value, items]);
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     TabsContext.Provider,
     {
       value: { previousTabRef, tabRefs, value: selfValue, onChange: handleChange, onClose: handleClose, registerItem },
       children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           "div",
           __spreadProps(__spreadValues({
             ref: tabsRef,
@@ -1380,7 +1596,7 @@ var Tabs = (_a) => {
             children
           })
         ),
-        /* @__PURE__ */ jsx23("div", { className: `${PREFIX_CLS}divider` })
+        /* @__PURE__ */ jsx24("div", { className: `${PREFIX_CLS}divider` })
       ]
     }
   );
@@ -1388,53 +1604,156 @@ var Tabs = (_a) => {
 
 // src/components/Toolbar/Toolbar.tsx
 import clsx16 from "clsx";
-import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 var Toolbar = (props) => {
   const _a = props, { children, className, size = "md", startAction, endAction, title, subtitle } = _a, rest = __objRest(_a, ["children", "className", "size", "startAction", "endAction", "title", "subtitle"]);
-  return /* @__PURE__ */ jsxs17("div", __spreadProps(__spreadValues({ className: clsx16(`${PREFIX_CLS}toolbar`, { [`${PREFIX_CLS}toolbar--${size}`]: size }, className) }, rest), { children: [
-    /* @__PURE__ */ jsx24("div", { className: `${PREFIX_CLS}outline-b` }),
-    /* @__PURE__ */ jsxs17("div", { className: clsx16(`${PREFIX_CLS}toolbar__container`), children: [
-      startAction && /* @__PURE__ */ jsx24("div", { className: clsx16(`${PREFIX_CLS}toolbar__start-action`), children: startAction }),
-      /* @__PURE__ */ jsx24("div", { className: clsx16(`${PREFIX_CLS}toolbar__content`), children: title || subtitle ? /* @__PURE__ */ jsxs17(Fragment2, { children: [
-        title && /* @__PURE__ */ jsx24("div", { className: clsx16(`${PREFIX_CLS}toolbar__title`), children: title }),
-        subtitle && /* @__PURE__ */ jsx24("div", { className: clsx16(`${PREFIX_CLS}toolbar__subtitle`), children: subtitle })
+  return /* @__PURE__ */ jsxs18("div", __spreadProps(__spreadValues({ className: clsx16(`${PREFIX_CLS}toolbar`, { [`${PREFIX_CLS}toolbar--${size}`]: size }, className) }, rest), { children: [
+    /* @__PURE__ */ jsx25("div", { className: `${PREFIX_CLS}outline-b` }),
+    /* @__PURE__ */ jsxs18("div", { className: clsx16(`${PREFIX_CLS}toolbar__container`), children: [
+      startAction && /* @__PURE__ */ jsx25("div", { className: clsx16(`${PREFIX_CLS}toolbar__start-action`), children: startAction }),
+      /* @__PURE__ */ jsx25("div", { className: clsx16(`${PREFIX_CLS}toolbar__content`), children: title || subtitle ? /* @__PURE__ */ jsxs18(Fragment2, { children: [
+        title && /* @__PURE__ */ jsx25("div", { className: clsx16(`${PREFIX_CLS}toolbar__title`), children: title }),
+        subtitle && /* @__PURE__ */ jsx25("div", { className: clsx16(`${PREFIX_CLS}toolbar__subtitle`), children: subtitle })
       ] }) : children }),
-      endAction && /* @__PURE__ */ jsx24("div", { className: clsx16(`${PREFIX_CLS}toolbar__trailing`), children: endAction })
+      endAction && /* @__PURE__ */ jsx25("div", { className: clsx16(`${PREFIX_CLS}toolbar__trailing`), children: endAction })
     ] })
   ] }));
 };
 var Toolbar_default = Toolbar;
 
 // src/components/ScrollArea/ScrollArea.tsx
-import { Children as Children5, cloneElement as cloneElement4, forwardRef as forwardRef22 } from "react";
-var ScrollArea = forwardRef22(({ children, direction = "vertical" }, ref) => {
-  const child = Children5.only(children);
+import { forwardRef as forwardRef23 } from "react";
+import { Scrollbars } from "react-custom-scrollbars-2";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var ScrollArea = forwardRef23(({ children, height, style }, ref) => {
   const prefixCls = PREFIX_CLS;
-  return cloneElement4(child, __spreadProps(__spreadValues({
-    ref
-  }, child.props), {
-    className: clsx_default(
-      `${prefixCls}scroll-area`,
-      { [`${prefixCls}scroll-area--${direction}`]: direction },
-      child.props.className
-    )
-  }));
+  const renderView = (props) => {
+    return /* @__PURE__ */ jsx26("div", __spreadProps(__spreadValues({}, props), { className: clsx_default(`${prefixCls}scroll-area__view`, props.className) }));
+  };
+  const renderTrackHorizontal = (props) => {
+    return /* @__PURE__ */ jsx26(
+      "div",
+      __spreadProps(__spreadValues({}, props), {
+        className: clsx_default(`${prefixCls}scroll-area__track ${prefixCls}scroll-area__track--horizontal`, props.className)
+      })
+    );
+  };
+  const renderTrackVertical = (props) => {
+    return /* @__PURE__ */ jsx26(
+      "div",
+      __spreadProps(__spreadValues({}, props), {
+        className: clsx_default(`${prefixCls}scroll-area__track ${prefixCls}scroll-area__track--vertical`, props.className)
+      })
+    );
+  };
+  const renderThumbHorizontal = (props) => {
+    return /* @__PURE__ */ jsx26(
+      "div",
+      __spreadProps(__spreadValues({}, props), {
+        className: clsx_default(`${prefixCls}scroll-area__thumb ${prefixCls}scroll-area__thumb--horizontal`, props.className)
+      })
+    );
+  };
+  const renderThumbVertical = (props) => {
+    return /* @__PURE__ */ jsx26(
+      "div",
+      __spreadProps(__spreadValues({}, props), {
+        className: clsx_default(`${prefixCls}scroll-area__thumb ${prefixCls}scroll-area__thumb--vertical`, props.className)
+      })
+    );
+  };
+  return /* @__PURE__ */ jsx26(
+    Scrollbars,
+    {
+      height,
+      autoHide: true,
+      className: `${prefixCls}scroll-area`,
+      renderTrackHorizontal,
+      renderTrackVertical,
+      renderThumbHorizontal,
+      renderThumbVertical,
+      renderView,
+      style,
+      ref: (node) => {
+        node && assignRef(ref, node.container.firstElementChild);
+      },
+      children
+    }
+  );
 });
 var ScrollArea_default = ScrollArea;
 
+// src/components/TextInput/TextInput.tsx
+import { forwardRef as forwardRef24, useRef as useRef9, useState as useState10 } from "react";
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+var TextInput = forwardRef24(
+  (_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] = useState10(false);
+    const selfInputRef = useRef9(null);
+    const prefixCls = PREFIX_CLS;
+    const handleChange = (event) => {
+      onChange == null ? void 0 : onChange(event);
+    };
+    const handleClick = (event) => {
+      var _a2;
+      onClick == null ? void 0 : onClick(event);
+      (_a2 = selfInputRef == null ? void 0 : selfInputRef.current) == null ? void 0 : _a2.focus();
+    };
+    return /* @__PURE__ */ jsxs19(
+      "div",
+      {
+        ref,
+        className: clsx_default(
+          `${prefixCls}input`,
+          { [`${prefixCls}input--focus`]: focus, [`${prefixCls}input--disabled`]: disabled },
+          className
+        ),
+        style,
+        onFocus: () => {
+          setFocus(true);
+        },
+        onBlur: () => {
+          setFocus(false);
+        },
+        onClick: handleClick,
+        children: [
+          /* @__PURE__ */ jsx27("div", { className: `${prefixCls}outline` }),
+          /* @__PURE__ */ jsxs19("div", { className: `${prefixCls}input__content`, children: [
+            startContent && /* @__PURE__ */ jsx27("div", { className: `${prefixCls}input__start-content`, children: startContent }),
+            /* @__PURE__ */ jsx27(
+              "input",
+              __spreadValues({
+                ref: mergeRefs_default(selfInputRef, inputRef),
+                className: `${prefixCls}input__field`,
+                value,
+                defaultValue,
+                disabled,
+                onChange: handleChange
+              }, rest)
+            ),
+            endContent && /* @__PURE__ */ jsx27("div", { className: `${prefixCls}input__end-content`, children: endContent })
+          ] })
+        ]
+      }
+    );
+  }
+);
+var TextInput_default = TextInput;
+
 // src/components/Select/SelectClient.tsx
 import { filterBy } from "@progress/kendo-data-query";
 import {
   ComboBox
 } from "@progress/kendo-react-dropdowns";
-import { useEffect as useEffect9, useRef as useRef9, useState as useState7 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { useEffect as useEffect13, useRef as useRef10, useState as useState11 } from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var SelectClient = ({
   value: valueProp,
   data: propData,
   filter: filterProp,
-  keyField: keyField2 = "key",
-  textField: textField3 = "text",
+  keyField = "key",
+  textField: textField2 = "text",
   placeholder,
   virtual,
   filterable,
@@ -1444,8 +1763,8 @@ var SelectClient = ({
   onChange,
   onFilterChange
 }) => {
-  const [value, setValue] = useState7(valueProp);
-  const [filter, setFilter] = useState7(filterProp);
+  const [value, setValue] = useState11(valueProp);
+  const [filter, setFilter] = useState11(filterProp);
   const handleChange = (event) => {
     const value2 = event.target.value || null;
     if (valueProp !== void 0) {
@@ -1454,17 +1773,17 @@ var SelectClient = ({
       setValue(value2);
     }
   };
-  const pageSize3 = virtual == null ? void 0 : virtual.pageSize;
-  const filteredData = useRef9([]);
-  const [state, setState] = useState7({
+  const pageSize2 = virtual == null ? void 0 : virtual.pageSize;
+  const filteredData = useRef10([]);
+  const [state, setState] = useState11({
     skip: 0,
     total: propData.total,
-    subsetData: propData.items.slice(0, pageSize3)
+    subsetData: propData.items.slice(0, pageSize2)
   });
   const handleFilterChange = (event) => {
-    if (pageSize3) {
+    if (pageSize2) {
       filteredData.current = filterBy(propData.items.slice(), event.filter);
-      const data = filteredData.current.slice(0, pageSize3);
+      const data = filteredData.current.slice(0, pageSize2);
       setState({
         subsetData: data,
         skip: 0,
@@ -1479,39 +1798,39 @@ var SelectClient = ({
     }
   };
   const handlePageChange = (event) => {
-    if (pageSize3) {
+    if (pageSize2) {
       const skip = event.page.skip;
       const take = event.page.take;
       const newSubsetData = filteredData.current.slice(skip, skip + take);
       setState(__spreadProps(__spreadValues({}, state), { subsetData: newSubsetData, skip }));
     }
   };
-  useEffect9(() => {
+  useEffect13(() => {
     if (valueProp !== void 0) {
       setValue(valueProp);
     }
   }, [valueProp]);
-  useEffect9(() => {
+  useEffect13(() => {
     setFilter(filterProp);
   }, [filterProp]);
-  useEffect9(() => {
-    if (pageSize3) {
+  useEffect13(() => {
+    if (pageSize2) {
       filteredData.current = propData.items.slice();
     }
   }, [propData]);
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx28(
     ComboBox,
     {
       value,
-      data: pageSize3 ? state.subsetData : propData.items,
+      data: pageSize2 ? state.subsetData : propData.items,
       placeholder,
-      dataItemKey: keyField2,
-      textField: textField3,
+      dataItemKey: keyField,
+      textField: textField2,
       filterable,
       filter,
-      virtual: pageSize3 ? {
+      virtual: pageSize2 ? {
         total: state.total,
-        pageSize: pageSize3,
+        pageSize: pageSize2,
         skip: state.skip
       } : void 0,
       disabled,
@@ -1529,8 +1848,8 @@ var SelectClient_default = SelectClient;
 import {
   ComboBox as ComboBox2
 } from "@progress/kendo-react-dropdowns";
-import { cloneElement as cloneElement5, useCallback as useCallback3, useEffect as useEffect10, useRef as useRef10, useState as useState8 } from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { cloneElement as cloneElement4, useCallback as useCallback3, useEffect as useEffect14, useRef as useRef11, useState as useState12 } from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var textField = "ContactName";
 var emptyItem = { [textField]: "loading ...", CustomerID: 0 };
 var pageSize = 10;
@@ -1541,8 +1860,8 @@ while (loadingData.length < pageSize) {
 var SelectServer = ({
   data: dataProp,
   value: valueProp,
-  keyField: keyField2 = "key",
-  textField: textField3 = "text",
+  keyField = "key",
+  textField: textField2 = "text",
   placeholder,
   virtual,
   filterable,
@@ -1557,17 +1876,17 @@ var SelectServer = ({
   renderItem
 }) => {
   var _a;
-  const dataCaching = useRef10([]);
-  const pendingRequest = useRef10();
-  const requestStarted = useRef10(false);
-  const emptyItem3 = { [keyField2]: 0, [textField3]: "loading ..." };
-  const [loadingData3, setLoadingData] = useState8([]);
-  const [data, setData] = useState8(dataProp.items);
-  const [total, setTotal] = useState8(0);
-  const [value, setValue] = useState8(valueProp);
-  const [filter, setFilter] = useState8(filterProp);
-  const pageSize3 = (_a = virtual == null ? void 0 : virtual.pageSize) != null ? _a : 10;
-  const skipRef = useRef10(0);
+  const dataCaching = useRef11([]);
+  const pendingRequest = useRef11();
+  const requestStarted = useRef11(false);
+  const emptyItem2 = { [keyField]: 0, [textField2]: "loading ..." };
+  const [loadingData2, setLoadingData] = useState12([]);
+  const [data, setData] = useState12(dataProp.items);
+  const [total, setTotal] = useState12(0);
+  const [value, setValue] = useState12(valueProp);
+  const [filter, setFilter] = useState12(filterProp);
+  const pageSize2 = (_a = virtual == null ? void 0 : virtual.pageSize) != null ? _a : 10;
+  const skipRef = useRef11(0);
   const resetCach = () => {
     dataCaching.current.length = 0;
   };
@@ -1607,11 +1926,11 @@ var SelectServer = ({
     }
     resetCach();
     requestData({ skip: 0, filter: filter2 });
-    setData(loadingData3);
+    setData(loadingData2);
     skipRef.current = 0;
   }, []);
   const shouldRequestData = useCallback3((skip) => {
-    for (let i = 0; i < pageSize3; i++) {
+    for (let i = 0; i < pageSize2; i++) {
       if (!dataCaching.current[skip + i]) {
         return true;
       }
@@ -1620,8 +1939,8 @@ var SelectServer = ({
   }, []);
   const getCachedData = useCallback3((skip) => {
     const data2 = [];
-    for (let i = 0; i < pageSize3; i++) {
-      data2.push(dataCaching.current[i + skip] || emptyItem3);
+    for (let i = 0; i < pageSize2; i++) {
+      data2.push(dataCaching.current[i + skip] || emptyItem2);
     }
     return data2;
   }, []);
@@ -1641,7 +1960,7 @@ var SelectServer = ({
   );
   const handleChange = useCallback3((event) => {
     const value2 = event.target.value;
-    if (value2 && value2[textField3] === emptyItem3[textField3]) {
+    if (value2 && value2[textField2] === emptyItem2[textField2]) {
       return;
     }
     if (valueProp !== void 0) {
@@ -1653,48 +1972,48 @@ var SelectServer = ({
   const handleItemRender = (li, itemProps) => {
     const itemChildren = renderItem == null ? void 0 : renderItem(itemProps.dataItem);
     if (!itemChildren)
-      return cloneElement5(li, li.props);
-    return cloneElement5(li, li.props, itemChildren);
+      return cloneElement4(li, li.props);
+    return cloneElement4(li, li.props, itemChildren);
   };
-  useEffect10(() => {
-    const pageSize4 = 10;
-    const loadingData4 = [];
-    while (loadingData4.length < pageSize4) {
-      loadingData4.push(emptyItem3);
+  useEffect14(() => {
+    const pageSize3 = 10;
+    const loadingData3 = [];
+    while (loadingData3.length < pageSize3) {
+      loadingData3.push(emptyItem2);
     }
-    setLoadingData(loadingData4);
+    setLoadingData(loadingData3);
   }, []);
-  useEffect10(() => {
+  useEffect14(() => {
     if (valueProp !== void 0) {
       setValue(valueProp);
     }
   }, [valueProp]);
-  useEffect10(() => {
+  useEffect14(() => {
     if (filterProp !== void 0) {
       setFilter(filterProp);
     }
   }, [filterProp]);
-  useEffect10(() => {
+  useEffect14(() => {
     requestData({ skip: 0, filter });
     return () => {
       resetCach();
     };
   }, [filter, requestData]);
-  useEffect10(() => {
+  useEffect14(() => {
     setData(dataProp.items);
   }, [dataProp]);
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx29(
     ComboBox2,
     {
       data,
       value,
       placeholder,
-      dataItemKey: keyField2,
-      textField: textField3,
+      dataItemKey: keyField,
+      textField: textField2,
       filterable,
       onFilterChange: handleFilterChange,
       virtual: {
-        pageSize: pageSize3,
+        pageSize: pageSize2,
         skip: skipRef.current,
         total
       },
@@ -1710,21 +2029,21 @@ var SelectServer = ({
 var SelectServer_default = SelectServer;
 
 // src/components/Select/Select.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var Select = (props) => {
-  return props.filterMode === "client" ? /* @__PURE__ */ jsx27(SelectClient_default, __spreadValues({}, props)) : /* @__PURE__ */ jsx27(SelectServer_default, __spreadValues({}, props));
+  return props.filterMode === "client" ? /* @__PURE__ */ jsx30(SelectClient_default, __spreadValues({}, props)) : /* @__PURE__ */ jsx30(SelectServer_default, __spreadValues({}, props));
 };
 var Select_default = Select;
 
 // src/components/Switch/Switch.tsx
 import clsx17 from "clsx";
-import { forwardRef as forwardRef23, useEffect as useEffect11, useState as useState9 } from "react";
-import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
-var Switch = forwardRef23(
+import { forwardRef as forwardRef25, useEffect as useEffect15, useState as useState13 } from "react";
+import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+var Switch = forwardRef25(
   (_a, ref) => {
     var _b = _a, { name, value: valueProp, defaultValue, onChange: onChangeProp, disabled } = _b, rest = __objRest(_b, ["name", "value", "defaultValue", "onChange", "disabled"]);
     var _a2;
-    const [selftValue, setSelfValue] = useState9((_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : false);
+    const [selftValue, setSelfValue] = useState13((_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : false);
     const handleChange = () => {
       if (disabled) {
         return;
@@ -1732,12 +2051,12 @@ var Switch = forwardRef23(
       onChangeProp == null ? void 0 : onChangeProp(!selftValue);
       setSelfValue(!selftValue);
     };
-    useEffect11(() => {
+    useEffect15(() => {
       if (valueProp !== void 0) {
         setSelfValue(valueProp);
       }
     }, [valueProp]);
-    return /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs20(
       "label",
       {
         htmlFor: name,
@@ -1745,7 +2064,7 @@ var Switch = forwardRef23(
           [`${PREFIX_CLS}switch--checked`]: !!selftValue
         }),
         children: [
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx31(
             "input",
             __spreadValues({
               type: "checkbox",
@@ -1757,7 +2076,7 @@ var Switch = forwardRef23(
               onChange: handleChange
             }, rest)
           ),
-          /* @__PURE__ */ jsx28("div", { className: `${PREFIX_CLS}switch__thumb` })
+          /* @__PURE__ */ jsx31("div", { className: `${PREFIX_CLS}switch__thumb` })
         ]
       }
     );
@@ -1765,330 +2084,271 @@ var Switch = forwardRef23(
 );
 var Switch_default = Switch;
 
-// src/components/MultiSelect/MultiSelectClient.tsx
-import { filterBy as filterBy2 } from "@progress/kendo-data-query";
-import {
-  MultiSelect
-} from "@progress/kendo-react-dropdowns";
-import { useEffect as useEffect12, useRef as useRef11, useState as useState10 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var textField2 = "text";
-var keyField = "key";
-var emptyItem2 = { [textField2]: "loading ...", [keyField]: 0 };
-var pageSize2 = 10;
-var loadingData2 = [];
-while (loadingData2.length < pageSize2) {
-  loadingData2.push(__spreadValues({}, emptyItem2));
-}
-var SelectClient2 = ({
-  data: dataProp,
-  value: valueProp,
-  keyField: keyField2 = "key",
-  textField: textField3 = "text",
-  placeholder,
-  virtual,
-  filterable,
-  filter: filterProp,
-  disabled,
-  loading,
-  className,
-  onChange,
-  onFilterChange
-}) => {
-  const [value, setValue] = useState10(valueProp);
-  const [filter, setFilter] = useState10(filterProp);
-  const handleChange = (event) => {
-    onChange(event.target.value);
+// src/components/Combobox/Combobox.tsx
+import { useEffect as useEffect20, useMemo as useMemo6, useRef as useRef16, useState as useState16 } from "react";
+
+// src/components/Popover/Popover.tsx
+import { Children as Children5, cloneElement as cloneElement5, useEffect as useEffect16, useRef as useRef12, useState as useState14 } from "react";
+
+// src/components/Popover/constans.ts
+var POPOVER_TRANSITION_DURATION_LEAVE = 150;
+
+// src/components/Popover/PopoverContext.tsx
+import { createContext as createContext6, useContext as useContext8 } from "react";
+var PopoverContext = createContext6(null);
+var usePopover = () => {
+  const context = useContext8(PopoverContext);
+  if (!context) {
+    throw new Error("`usePopover` must be used within a `<Popover />`");
+  }
+  return context;
+};
+var PopoverContext_default = PopoverContext;
+
+// src/components/Popover/Popover.tsx
+import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+var Popover = (props) => {
+  const { children, target, autoClose = true, triggerClosable = true, isOpen, onOpen, onClose, onToggle } = props;
+  const triggerRef = useRef12(null);
+  const contentRef = useRef12(null);
+  const [internalOpen, setInternalOpen] = useState14(props.isOpen || false);
+  const [trigger, content] = Children5.toArray(children);
+  const prefixCls = PREFIX_CLS;
+  const handleOpen = () => {
+    if (isOpen !== void 0) {
+      onOpen == null ? void 0 : onOpen();
+    } else {
+      setInternalOpen(true);
+    }
   };
-  const pageSize3 = virtual == null ? void 0 : virtual.pageSize;
-  const filteredData = useRef11([]);
-  const [state, setState] = useState10({
-    skip: 0,
-    total: dataProp.total,
-    subsetData: dataProp.items.slice(0, pageSize3)
-  });
-  const handleFilterChange = (event) => {
-    if (pageSize3) {
-      filteredData.current = filterBy2(dataProp.items.slice(), event.filter);
-      const data = filteredData.current.slice(0, pageSize3);
-      setState({
-        subsetData: data,
-        skip: 0,
-        total: filteredData.current.length
-      });
+  const handleClose = () => {
+    if (isOpen !== void 0) {
+      onClose == null ? void 0 : onClose();
+    } else {
+      setInternalOpen(false);
     }
-    onFilterChange == null ? void 0 : onFilterChange(event.filter.value);
   };
-  const pageChange = (event) => {
-    if (pageSize3) {
-      const skip = event.page.skip;
-      const take = event.page.take;
-      const newSubsetData = filteredData.current.slice(skip, skip + take);
-      setState(__spreadProps(__spreadValues({}, state), { subsetData: newSubsetData, skip }));
+  const handleToggle = () => {
+    if (isOpen !== void 0) {
+      onToggle == null ? void 0 : onToggle();
+    } else {
+      setInternalOpen((prevState) => !prevState);
     }
   };
-  useEffect12(() => {
-    setValue(valueProp);
-  }, [valueProp]);
-  useEffect12(() => {
-    setFilter(filterProp);
-  }, [filterProp]);
-  useEffect12(() => {
-    if (pageSize3) {
-      filteredData.current = dataProp.items.slice();
-    }
-  }, [dataProp]);
-  return /* @__PURE__ */ jsx29(
-    MultiSelect,
+  useEffect16(() => {
+    setInternalOpen(isOpen || false);
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxs21(
+    PopoverContext_default.Provider,
     {
-      value,
-      data: pageSize3 ? state.subsetData : dataProp.items,
-      placeholder,
-      dataItemKey: keyField2,
-      textField: textField3,
-      filterable,
-      filter,
-      virtual: pageSize3 ? {
-        total: state.total,
-        pageSize: pageSize3,
-        skip: state.skip
-      } : void 0,
-      disabled,
-      loading,
-      className,
-      onChange: handleChange,
-      onFilterChange: handleFilterChange,
-      onPageChange: pageChange
+      value: {
+        triggerRef,
+        contentRef,
+        target,
+        isOpen: internalOpen,
+        autoClose,
+        triggerClosable,
+        onOpen: handleOpen,
+        onClose: handleClose,
+        onToggle: handleToggle
+      },
+      children: [
+        trigger,
+        /* @__PURE__ */ jsx32(
+          Transition_default,
+          {
+            nodeRef: contentRef,
+            isOpen: internalOpen,
+            enter: 300,
+            leave: POPOVER_TRANSITION_DURATION_LEAVE,
+            name: `${prefixCls}popover`,
+            unmountOnExit: true,
+            children: /* @__PURE__ */ jsx32(Portal_default, { children: cloneElement5(Children5.only(content), __spreadProps(__spreadValues({}, content.props), {
+              ref: contentRef
+            })) })
+          }
+        )
+      ]
     }
   );
 };
-var MultiSelectClient_default = SelectClient2;
-
-// src/components/MultiSelect/MultiSelectServer.tsx
-import {
-  MultiSelect as MultiSelect2
-} from "@progress/kendo-react-dropdowns";
-import { useCallback as useCallback4, useEffect as useEffect13, useRef as useRef12, useState as useState11 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var MultiSelectServer = ({
-  data: dataProp,
-  value: valueProp,
-  keyField: keyField2 = "key",
-  textField: textField3 = "text",
-  placeholder,
-  virtual,
-  filterable,
-  filter: filterProp = "",
-  disabled,
-  loading,
-  className,
-  onDataChange,
-  onChange,
-  onFilterChange,
-  getData
-}) => {
-  var _a;
-  const dataCaching = useRef12([]);
-  const pendingRequest = useRef12();
-  const requestStarted = useRef12(false);
-  const emptyItem3 = { [keyField2]: 0, [textField3]: "loading ..." };
-  const [loadingData3, setLoadingData] = useState11([]);
-  const [data, setData] = useState11(dataProp.items);
-  const [total, setTotal] = useState11(0);
-  const [value, setValue] = useState11(valueProp);
-  const [filter, setFilter] = useState11(filterProp);
-  const pageSize3 = (_a = virtual == null ? void 0 : virtual.pageSize) != null ? _a : 10;
-  const skipRef = useRef12(0);
-  const resetCach = () => {
-    dataCaching.current.length = 0;
-  };
-  const requestData = useCallback4(
-    (state) => {
-      if (requestStarted.current) {
-        clearTimeout(pendingRequest.current);
-        pendingRequest.current = setTimeout(() => {
-          requestData(state);
-        }, 50);
-        return;
-      }
-      requestStarted.current = true;
-      getData(state).then(({ items, total: total2 }) => {
-        const { skip } = state;
-        items.forEach((item, index) => {
-          dataCaching.current[index + skip] = item;
-        });
-        if (skip === skipRef.current) {
-          setData(items);
-          setTotal(total2);
-          onDataChange == null ? void 0 : onDataChange({ items, total: total2 });
-        }
-        requestStarted.current = false;
-      }).catch(() => {
-        requestStarted.current = false;
-      });
-    },
-    [getData]
-  );
-  const handleFilterChange = useCallback4((event) => {
-    const filter2 = event.filter.value;
-    resetCach();
-    requestData({ skip: 0, filter: filter2 });
-    setData(loadingData3);
-    skipRef.current = 0;
-    setFilter(filter2);
-    onFilterChange == null ? void 0 : onFilterChange(filter2);
-  }, []);
-  const shouldRequestData = useCallback4((skip) => {
-    for (let i = 0; i < pageSize3; i++) {
-      if (!dataCaching.current[skip + i]) {
-        return true;
-      }
-    }
-    return false;
-  }, []);
-  const getCachedData = useCallback4((skip) => {
-    const data2 = [];
-    for (let i = 0; i < pageSize3; i++) {
-      data2.push(dataCaching.current[i + skip] || emptyItem3);
+var Popover_default = Popover;
+
+// src/components/Popover/PopoverContent.tsx
+import { forwardRef as forwardRef26, useCallback as useCallback4, useEffect as useEffect17, useRef as useRef13, useState as useState15 } from "react";
+import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
+function getScrollParent(node) {
+  if (node == null) {
+    return null;
+  }
+  if (node.scrollHeight > node.clientHeight) {
+    return node;
+  } else {
+    return getScrollParent(node.parentNode);
+  }
+}
+var PopoverContent = forwardRef26((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 = useRef13(null);
+  const [contentStyle, setContentStyle] = useState15({
+    position: "absolute",
+    top: 0,
+    left: 0,
+    visibility: "hidden"
+  });
+  const containerEl = getScrollParent(triggerRef.current) || window;
+  useElementSize_default({
+    target: containerEl,
+    callback: () => {
+      handleSize();
     }
-    return data2;
-  }, []);
-  const pageChange = useCallback4(
-    (event) => {
-      const newSkip = event.page.skip;
-      if (shouldRequestData(newSkip)) {
-        requestData({ skip: newSkip, filter });
-      }
-      const data2 = getCachedData(newSkip);
-      setData(data2);
-      skipRef.current = newSkip;
-    },
-    [getCachedData, requestData, shouldRequestData, filter]
-  );
-  const handleChange = useCallback4((event) => {
-    const value2 = event.target.value;
-    if (value2 && value2[textField3] === emptyItem3[textField3]) {
+  });
+  useOnClickOutside_default(contentRef, (event) => {
+    const el = triggerRef.current;
+    if (!el || el.contains(event.target))
+      return;
+    onClose();
+  });
+  const handleClick = (ev) => {
+    ev.stopPropagation();
+    onClick == null ? void 0 : onClick(ev);
+  };
+  const handleSize = useCallback4(() => {
+    var _a2, _b;
+    console.log(containerEl);
+    const popoverRect = (_a2 = contentRef.current) == null ? void 0 : _a2.getBoundingClientRect();
+    const triggerClientRect = (_b = triggerRef.current) == null ? void 0 : _b.getBoundingClientRect();
+    if (!popoverRect || !triggerClientRect || !containerEl) {
       return;
     }
-    setValue(value2);
-    onChange(value2);
-  }, []);
-  useEffect13(() => {
-    const pageSize4 = 10;
-    const loadingData4 = [];
-    while (loadingData4.length < pageSize4) {
-      loadingData4.push(emptyItem3);
-    }
-    setLoadingData(loadingData4);
+    const container = { innerWidth: window.innerWidth, innerHeight: window.innerHeight };
+    const triggerRect = {
+      width: triggerClientRect.width,
+      height: triggerClientRect.height,
+      top: triggerClientRect.top + window.scrollY,
+      bottom: triggerClientRect.top + triggerClientRect.height + window.scrollY,
+      left: triggerClientRect.left + window.scrollX,
+      right: triggerClientRect.left + triggerClientRect.width + window.scrollX
+    };
+    const outsideX = triggerRect.left + popoverRect.width > container.innerWidth;
+    const outsideY = triggerRect.top + popoverRect.height > container.innerHeight + window.scrollY;
+    const style2 = __spreadProps(__spreadValues({}, target && {
+      width: triggerRect.width,
+      minWidth: "auto"
+    }), {
+      position: "absolute",
+      top: outsideY ? void 0 : triggerRect.bottom,
+      bottom: outsideY ? container.innerHeight - triggerRect.top : void 0,
+      left: outsideX ? void 0 : triggerRect.left,
+      right: outsideX ? container.innerWidth - triggerRect.right : void 0,
+      visibility: void 0
+    });
+    setContentStyle(style2);
   }, []);
-  useEffect13(() => {
-    setData(dataProp.items);
-  }, [dataProp]);
-  useEffect13(() => {
-    setValue(valueProp);
-  }, [valueProp]);
-  useEffect13(() => {
-    setFilter(filterProp);
-  }, [filterProp]);
-  useEffect13(() => {
-    requestData({ skip: 0, filter });
+  useEffect17(() => {
+    handleSize();
+    containerEl.addEventListener("scroll", handleSize);
+    window.addEventListener("orientationchange", handleSize);
     return () => {
-      resetCach();
+      containerEl.removeEventListener("scroll", handleSize);
+      window.removeEventListener("orientationchange", handleSize);
     };
-  }, [filter, requestData]);
-  return /* @__PURE__ */ jsx30(
-    MultiSelect2,
-    {
-      data,
-      value,
-      placeholder,
-      dataItemKey: keyField2,
-      textField: textField3,
-      filterable,
-      onFilterChange: handleFilterChange,
-      virtual: {
-        pageSize: pageSize3,
-        skip: skipRef.current,
-        total
-      },
-      disabled,
-      loading,
-      className,
-      onChange: handleChange,
-      onPageChange: pageChange
-    }
+  }, []);
+  return /* @__PURE__ */ jsxs22(
+    "div",
+    __spreadProps(__spreadValues({
+      ref: mergeRefs_default(menuListRef, ref),
+      className: clsx_default(`${prefixCls}popover`, className),
+      style: __spreadValues(__spreadValues({}, style), contentStyle),
+      onClick: handleClick
+    }, rest), {
+      children: [
+        /* @__PURE__ */ jsx33("div", { className: `${prefixCls}popover__overlay` }),
+        children
+      ]
+    })
   );
-};
-var MultiSelectServer_default = MultiSelectServer;
-
-// src/components/MultiSelect/MultiSelect.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
-var MultiSelect3 = (props) => {
-  return props.filterMode === "client" ? /* @__PURE__ */ jsx31(MultiSelectClient_default, __spreadValues({}, props)) : /* @__PURE__ */ jsx31(MultiSelectServer_default, __spreadValues({}, props));
-};
-var MultiSelect_default = MultiSelect3;
-
-// src/components/Field/Field.tsx
-import { forwardRef as forwardRef24 } from "react";
-import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
-var Field = forwardRef24(({ children, label }, ref) => {
-  {
-    const prefixCls = PREFIX_CLS;
-    return /* @__PURE__ */ jsxs19("div", { ref, className: clsx_default(`${prefixCls}field`), children: [
-      /* @__PURE__ */ jsx32("div", { className: `${prefixCls}field__label`, children: label }),
-      /* @__PURE__ */ jsx32("div", { className: `${prefixCls}field__content`, children })
-    ] });
-  }
 });
-var Field_default = Field;
+var PopoverContent_default = PopoverContent;
+
+// src/components/Popover/PopoverTrigger.tsx
+import { Children as Children6, cloneElement as cloneElement6, forwardRef as forwardRef27 } from "react";
+var PopoverTrigger = forwardRef27((props, ref) => {
+  const _a = props, { children, onClick } = _a, rest = __objRest(_a, ["children", "onClick"]);
+  const { isOpen, triggerRef, triggerClosable, onToggle } = usePopover();
+  const child = Children6.only(typeof children === "function" ? children(isOpen) : children);
+  const handleClick = (ev) => {
+    var _a2, _b;
+    ev.preventDefault();
+    triggerClosable && onToggle();
+    onClick == null ? void 0 : onClick(ev);
+    (_b = (_a2 = child.props).onClick) == null ? void 0 : _b.call(_a2, ev);
+  };
+  return cloneElement6(child, __spreadProps(__spreadValues(__spreadValues({}, child.props), rest), {
+    ref: mergeRefs_default(ref, triggerRef),
+    onClick: handleClick
+  }));
+});
+var PopoverTrigger_default = PopoverTrigger;
+
+// src/components/Combobox/ComboboxContent.tsx
+import { Fragment as Fragment4, useEffect as useEffect18, useRef as useRef14 } from "react";
 
 // src/components/List/List.tsx
-import { forwardRef as forwardRef25 } from "react";
-import { jsx as jsx33 } from "react/jsx-runtime";
-var List = forwardRef25((_a, ref) => {
+import { forwardRef as forwardRef28 } from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var List = forwardRef28((_a, ref) => {
   var _b = _a, { as: Component = "div", children } = _b, rest = __objRest(_b, ["as", "children"]);
-  return /* @__PURE__ */ jsx33(Component, __spreadProps(__spreadValues({ ref, className: "us-list" }, rest), { children }));
+  const prefixCls = PREFIX_CLS;
+  return /* @__PURE__ */ jsx34(Component, __spreadProps(__spreadValues({ ref, className: `${prefixCls}list` }, rest), { children }));
 });
 var List_default = List;
 
 // src/components/List/ListGroup.tsx
-import { forwardRef as forwardRef27 } from "react";
+import { forwardRef as forwardRef30 } from "react";
 
 // src/components/List/ListItem.tsx
-import { forwardRef as forwardRef26 } from "react";
-import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
-var ListItem = forwardRef26(
+import { forwardRef as forwardRef29 } from "react";
+import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
+var ListItem = forwardRef29(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "div",
       className,
       title,
+      subtitle,
       startContent,
       endContent,
       level = 1,
       hoverable,
       selected,
       disabled,
+      slotProps,
       style,
       onClick
     } = _b, rest = __objRest(_b, [
       "as",
       "className",
       "title",
+      "subtitle",
       "startContent",
       "endContent",
       "level",
       "hoverable",
       "selected",
       "disabled",
+      "slotProps",
       "style",
       "onClick"
     ]);
+    var _a2, _b2;
     const prefixCls = PREFIX_CLS;
     const handleClick = (event) => {
       onClick == null ? void 0 : onClick(event);
     };
-    return /* @__PURE__ */ jsxs20(
+    return /* @__PURE__ */ jsxs23(
       Component,
       __spreadProps(__spreadValues({
         ref,
@@ -2107,10 +2367,19 @@ var ListItem = forwardRef26(
         onClick: handleClick
       }, rest), {
         children: [
-          hoverable && /* @__PURE__ */ jsx34("div", { className: `${prefixCls}overlay` }),
-          startContent && /* @__PURE__ */ jsx34("div", { className: `${prefixCls}list-item__start-content`, children: startContent }),
-          /* @__PURE__ */ jsx34("div", { className: `${prefixCls}list-item__content`, children: /* @__PURE__ */ jsx34("span", { className: `${prefixCls}list-item__title`, children: title }) }),
-          endContent && /* @__PURE__ */ jsx34("div", { className: `${prefixCls}list-item__end-content`, children: endContent })
+          hoverable && /* @__PURE__ */ jsx35("div", { className: `${prefixCls}overlay` }),
+          startContent && /* @__PURE__ */ jsx35("div", { className: `${prefixCls}list-item__start-content`, children: startContent }),
+          /* @__PURE__ */ jsxs23("div", { className: `${prefixCls}list-item__content`, children: [
+            /* @__PURE__ */ jsx35("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__ */ jsx35(
+              "span",
+              __spreadProps(__spreadValues({}, slotProps == null ? void 0 : slotProps.subtitle), {
+                className: clsx_default(`${prefixCls}list-item__subtitle`, (_b2 = slotProps == null ? void 0 : slotProps.subtitle) == null ? void 0 : _b2.className),
+                children: subtitle
+              })
+            )
+          ] }),
+          endContent && /* @__PURE__ */ jsx35("div", { className: `${prefixCls}list-item__end-content`, children: endContent })
         ]
       })
     );
@@ -2119,8 +2388,8 @@ var ListItem = forwardRef26(
 var ListItem_default = ListItem;
 
 // src/components/List/ListGroup.tsx
-import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
-var ListGroup = forwardRef27(
+import { Fragment as Fragment3, jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
+var ListGroup = forwardRef30(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -2144,26 +2413,416 @@ var ListGroup = forwardRef27(
       "onToggle"
     ]);
     const disclosure = isOpen !== void 0 ? { isOpen, onOpen, onClose, onToggle } : useDisclosure_default();
-    return /* @__PURE__ */ jsx35("div", { className: "us-list-group", children: /* @__PURE__ */ jsxs21(Collapse_default, __spreadProps(__spreadValues({}, disclosure), { children: [
-      /* @__PURE__ */ jsx35(CollapseTrigger_default, { children: /* @__PURE__ */ jsx35(
+    const prefixCls = PREFIX_CLS;
+    return /* @__PURE__ */ jsx36("div", { className: `${prefixCls}list-group`, children: /* @__PURE__ */ jsxs24(Collapse_default, __spreadProps(__spreadValues({}, disclosure), { children: [
+      /* @__PURE__ */ jsx36(CollapseTrigger_default, { children: /* @__PURE__ */ jsx36(
         ListItem_default,
         __spreadValues({
           ref,
-          startContent: /* @__PURE__ */ jsxs21(Fragment3, { children: [
-            expandVisible && expandPosition === "start" && /* @__PURE__ */ jsx35(Icon_default, { children: disclosure.isOpen ? /* @__PURE__ */ jsx35(ChevronUpIcon_default, {}) : /* @__PURE__ */ jsx35(ChevronDownIcon_default, {}) }),
+          startContent: expandVisible && expandPosition === "start" ? /* @__PURE__ */ jsxs24(Fragment3, { children: [
+            /* @__PURE__ */ jsx36(Icon_default, { children: disclosure.isOpen ? /* @__PURE__ */ jsx36(ChevronUpIcon_default, {}) : /* @__PURE__ */ jsx36(ChevronDownIcon_default, {}) }),
             startContent
-          ] }),
-          endContent: /* @__PURE__ */ jsxs21(Fragment3, { children: [
+          ] }) : startContent,
+          endContent: expandVisible && expandPosition === "end" ? /* @__PURE__ */ jsxs24(Fragment3, { children: [
             endContent,
-            expandVisible && expandPosition === "end" && /* @__PURE__ */ jsx35(Icon_default, { children: disclosure.isOpen ? /* @__PURE__ */ jsx35(ChevronUpIcon_default, {}) : /* @__PURE__ */ jsx35(ChevronDownIcon_default, {}) })
-          ] })
+            /* @__PURE__ */ jsx36(Icon_default, { children: disclosure.isOpen ? /* @__PURE__ */ jsx36(ChevronUpIcon_default, {}) : /* @__PURE__ */ jsx36(ChevronDownIcon_default, {}) })
+          ] }) : endContent
         }, rest)
       ) }),
-      /* @__PURE__ */ jsx35(CollapseContent_default, { children: /* @__PURE__ */ jsx35("div", { children: /* @__PURE__ */ jsx35(List_default, { children }) }) })
+      /* @__PURE__ */ jsx36(CollapseContent_default, { children: /* @__PURE__ */ jsx36("div", { children: /* @__PURE__ */ jsx36(List_default, { children }) }) })
     ] })) });
   }
 );
 var ListGroup_default = ListGroup;
+
+// src/components/Combobox/ComboboxContext.tsx
+import { createContext as createContext7, useContext as useContext9 } from "react";
+var ComboboxContext = createContext7(null);
+var useCombobox = () => {
+  const context = useContext9(ComboboxContext);
+  if (!context) {
+    throw new Error("`useCombobox` must be used within a `<Combobox />`");
+  }
+  return context;
+};
+var ComboboxContext_default = ComboboxContext;
+
+// src/components/Combobox/ComboboxContent.tsx
+import { jsx as jsx37 } from "react/jsx-runtime";
+var ComboboxContent = () => {
+  const { data, values, offset, setOffset, keyField, textField: textField2, onItemSelect, renderItem } = useCombobox();
+  const parentRef = useRef14(null);
+  const { isOpen } = usePopover();
+  const handleItemSelect = (item) => {
+    var _a;
+    onItemSelect(item);
+    setOffset(((_a = parentRef.current) == null ? void 0 : _a.scrollHeight) || 0);
+  };
+  useEffect18(() => {
+    var _a;
+    if (!isOpen)
+      return;
+    (_a = parentRef.current) == null ? void 0 : _a.scrollTo({ top: offset });
+  }, [isOpen]);
+  return /* @__PURE__ */ jsx37(
+    ScrollArea_default,
+    {
+      ref: parentRef,
+      height: 200,
+      style: {
+        height: `200px`,
+        width: `100%`,
+        position: "relative"
+      },
+      children: /* @__PURE__ */ jsx37(List_default, { children: renderItem ? data.map((item) => /* @__PURE__ */ jsx37(Fragment4, { children: renderItem(item, {
+        title: "",
+        selected: values.includes(item[keyField]),
+        hoverable: true,
+        onClick: () => handleItemSelect(item)
+      }) }, item[keyField])) : data.map((item) => /* @__PURE__ */ jsx37(
+        ListItem_default,
+        {
+          title: item[textField2],
+          selected: values.includes(item[keyField]),
+          hoverable: true,
+          onClick: () => handleItemSelect(item)
+        },
+        item[keyField]
+      )) })
+    }
+  );
+};
+var ComboboxContent_default = ComboboxContent;
+
+// src/components/Combobox/ComboboxVirtual.tsx
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { Fragment as Fragment5, useEffect as useEffect19, useRef as useRef15 } from "react";
+
+// src/components/Combobox/utils.ts
+var valueToValues = (value) => {
+  return Array.isArray(value) ? value : value !== void 0 ? [value] : [];
+};
+var valuesToValue = (values) => {
+  return Array.isArray(values) ? values.length !== 0 ? values[0] : void 0 : values;
+};
+
+// src/components/Combobox/ComboboxVirtual.tsx
+import { jsx as jsx38 } from "react/jsx-runtime";
+var ComboboxVirtual = () => {
+  const { data, values, keyField, textField: textField2, virtual, onItemSelect, renderItem } = useCombobox();
+  const parentRef = useRef15(null);
+  const { isOpen } = usePopover();
+  const rowVirtualizer = useVirtualizer({
+    count: virtual.count ? virtual.count : virtual.hasNextPage ? data.length + 1 : data.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: virtual.estimateSize,
+    overscan: 5
+  });
+  const handleItemSelect = (item) => {
+    onItemSelect(item);
+  };
+  useEffect19(() => {
+    if (!isOpen)
+      return;
+    const value = valuesToValue(values);
+    const index = data.findIndex((item) => item[keyField] === value);
+    rowVirtualizer.scrollToIndex(index, { align: "start" });
+  }, [isOpen]);
+  useEffect19(() => {
+    var _a;
+    const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
+    if (!lastItem) {
+      return;
+    }
+    if (lastItem.index >= data.length - 1 && virtual.hasNextPage && !virtual.isFetchingNextPage) {
+      (_a = virtual.onFetchNextPage) == null ? void 0 : _a.call(virtual);
+    }
+  }, [
+    virtual.hasNextPage,
+    virtual.onFetchNextPage,
+    data.length,
+    virtual.isFetchingNextPage,
+    rowVirtualizer.getVirtualItems()
+  ]);
+  return /* @__PURE__ */ jsx38(
+    ScrollArea_default,
+    {
+      ref: parentRef,
+      height: 200,
+      style: {
+        height: `200px`,
+        width: `100%`,
+        position: "relative"
+      },
+      children: /* @__PURE__ */ jsx38(
+        "div",
+        {
+          style: {
+            height: `${rowVirtualizer.getTotalSize()}px`,
+            width: "100%",
+            position: "relative"
+          },
+          children: /* @__PURE__ */ jsx38(List_default, { children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
+            const isLoaderRow = virtualRow.index > data.length - 1;
+            const item = data[virtualRow.index];
+            if (isLoaderRow) {
+              return /* @__PURE__ */ jsx38(
+                ListItem_default,
+                {
+                  ref: rowVirtualizer.measureElement,
+                  title: virtual.hasNextPage ? "Loading..." : "Nothing more to load",
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: `${virtualRow.size}px`,
+                    transform: `translateY(${virtualRow.start}px)`
+                  }
+                },
+                virtualRow.index
+              );
+            }
+            if (!item) {
+              return /* @__PURE__ */ jsx38(
+                ListItem_default,
+                {
+                  ref: rowVirtualizer.measureElement,
+                  title: `Item ${virtualRow.index} not found`,
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: `${virtualRow.size}px`,
+                    transform: `translateY(${virtualRow.start}px)`
+                  }
+                },
+                virtualRow.index
+              );
+            }
+            if (renderItem) {
+              return /* @__PURE__ */ jsx38(Fragment5, { children: renderItem(item, {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                ref: rowVirtualizer.measureElement,
+                title: "",
+                selected: values.includes(item[keyField]),
+                hoverable: true,
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  height: `${virtualRow.size}px`,
+                  transform: `translateY(${virtualRow.start}px)`
+                },
+                onClick: () => handleItemSelect(item)
+              }) }, virtualRow.index);
+            }
+            return /* @__PURE__ */ jsx38(
+              ListItem_default,
+              {
+                ref: rowVirtualizer.measureElement,
+                title: item[textField2],
+                selected: values.includes(item[keyField]),
+                hoverable: true,
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  height: `${virtualRow.size}px`,
+                  transform: `translateY(${virtualRow.start}px)`
+                },
+                onClick: () => handleItemSelect(item)
+              },
+              virtualRow.index
+            );
+          }) })
+        }
+      )
+    }
+  );
+};
+var ComboboxVirtual_default = ComboboxVirtual;
+
+// src/components/Combobox/Combobox.tsx
+import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
+var Combobox = (props) => {
+  const {
+    data,
+    value: valueProp,
+    keyField = "key",
+    textField: textField2 = "text",
+    isMultiple = false,
+    disabled,
+    loading,
+    disclosure: disclosureProp,
+    virtual,
+    placeholder,
+    style,
+    onChange,
+    onFilterChange,
+    renderItem
+  } = props;
+  const disclosure = disclosureProp !== void 0 ? disclosureProp : useDisclosure_default();
+  const prefixCls = PREFIX_CLS;
+  const inputRef = useRef16(null);
+  const [filter, setFilter] = useState16("");
+  const [search, setSearch] = useState16("");
+  const [isSearch, setIsSearch] = useState16(false);
+  const values = useMemo6(() => {
+    return valueToValues(valueProp);
+  }, [valueProp]);
+  const items = useMemo6(() => {
+    return data.filter((item) => values.includes(item[keyField]));
+  }, [data, values]);
+  const [offset, setOffset] = useState16(0);
+  const handleFocus = () => {
+  };
+  const handleChange = (values2) => {
+    var _a, _b, _c, _d;
+    if (props.isMultiple) {
+      const items2 = data.filter((item) => values2.includes(item[keyField]));
+      (_a = props.onChange) == null ? void 0 : _a.call(props, items2);
+      (_b = props.onValueChange) == null ? void 0 : _b.call(props, values2);
+    } else {
+      const newValue = valuesToValue(values2);
+      let item;
+      if (newValue !== void 0) {
+        item = data.find((item2) => item2[keyField] === newValue);
+      }
+      (_c = props.onChange) == null ? void 0 : _c.call(props, item);
+      (_d = props.onValueChange) == null ? void 0 : _d.call(props, newValue);
+    }
+  };
+  const handleClear = (event) => {
+    event.stopPropagation();
+    setIsSearch(true);
+    setSearch("");
+    onFilterChange == null ? void 0 : onFilterChange("");
+    onChange == null ? void 0 : onChange(valuesToValue([]));
+    setIsSearch(false);
+  };
+  const handleFilterChange = (event) => {
+    !disclosure.isOpen && disclosure.onOpen();
+    setIsSearch(true);
+    setSearch(event.target.value);
+    onFilterChange == null ? void 0 : onFilterChange(event.target.value);
+  };
+  const handleItemSelect = (item) => {
+    var _a;
+    const newValue = item[keyField];
+    if (props.isMultiple) {
+      const newValues = [...values];
+      const valueIndex = values.indexOf(newValue);
+      if (valueIndex === -1) {
+        newValues.push(newValue);
+      } else {
+        newValues.splice(valueIndex, 1);
+      }
+      handleChange(newValues);
+    } else {
+      const value = valuesToValue(values);
+      if (value !== newValue) {
+        handleChange([newValue]);
+      }
+    }
+    if (isSearch) {
+      setFilter(search);
+    }
+    setIsSearch(false);
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+    disclosure.onClose();
+  };
+  const handleClose = () => {
+    disclosure.onClose();
+    if (!props.isMultiple) {
+      if (isSearch) {
+        const item = items[0];
+        if (item !== void 0) {
+          setSearch(item[textField2]);
+          onFilterChange == null ? void 0 : onFilterChange(filter);
+        } else {
+          setSearch("");
+          onFilterChange == null ? void 0 : onFilterChange(filter);
+        }
+        setIsSearch(false);
+      }
+    }
+  };
+  useEffect20(() => {
+    if (isSearch)
+      return;
+    if (!props.isMultiple) {
+      const item = items[0];
+      if (item !== void 0) {
+        setSearch(item[textField2]);
+      }
+    }
+  }, [items]);
+  useEffect20(() => {
+    const values2 = valueToValues(valueProp);
+    const value = values2[0];
+    if (value === void 0) {
+      setSearch("");
+      onFilterChange == null ? void 0 : onFilterChange("");
+    }
+  }, [valueProp]);
+  return /* @__PURE__ */ jsx39(
+    ComboboxContext_default.Provider,
+    {
+      value: {
+        data,
+        values,
+        keyField,
+        textField: textField2,
+        isMultiple,
+        virtual,
+        onChange: handleChange,
+        onItemSelect: handleItemSelect,
+        offset,
+        setOffset,
+        renderItem
+      },
+      children: /* @__PURE__ */ jsxs25(Popover_default, __spreadProps(__spreadValues({ target: true }, disclosure), { isOpen: disclosure.isOpen, onClose: handleClose, autoClose: "outside", children: [
+        /* @__PURE__ */ jsx39(PopoverTrigger_default, { children: /* @__PURE__ */ jsx39(
+          TextInput_default,
+          {
+            inputRef,
+            value: search,
+            placeholder,
+            endContent: /* @__PURE__ */ jsxs25("div", { className: `${prefixCls}d-flex ${prefixCls}items-center ${prefixCls}gap-1`, children: [
+              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, {}) }) })
+            ] }),
+            disabled,
+            style,
+            onChange: handleFilterChange,
+            onFocus: handleFocus
+          }
+        ) }),
+        /* @__PURE__ */ jsx39(PopoverContent_default, { children: /* @__PURE__ */ jsx39("div", { children: virtual ? /* @__PURE__ */ jsx39(ComboboxVirtual_default, {}) : /* @__PURE__ */ jsx39(ComboboxContent_default, {}) }) })
+      ] }))
+    }
+  );
+};
+var Combobox_default = Combobox;
+
+// src/components/Field/Field.tsx
+import { forwardRef as forwardRef31 } from "react";
+import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
+var Field = forwardRef31(({ children, label }, ref) => {
+  {
+    const prefixCls = PREFIX_CLS;
+    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 })
+    ] });
+  }
+});
+var Field_default = Field;
 export {
   Accordion_default as Accordion,
   AccordionContent_default as AccordionContent,
@@ -2180,6 +2839,7 @@ export {
   CollapseContent_default as CollapseContent,
   CollapseContext_default as CollapseContext,
   CollapseTrigger_default as CollapseTrigger,
+  Combobox_default as Combobox,
   Drawer_default as Drawer,
   Field_default as Field,
   Icon_default as Icon,
@@ -2192,22 +2852,31 @@ export {
   MenuItem_default as MenuItem,
   MenuSubmenu_default as MenuSubmenu,
   MenuValueContext_default as MenuValueContext,
-  MultiSelect_default as MultiSelect,
   Portal_default as Portal,
+  QueryStatus,
   ScrollArea_default as ScrollArea,
   Select_default as Select,
   Switch_default as Switch,
   Tab,
   Tabs,
+  TextInput_default as TextInput,
   Toolbar_default as Toolbar,
   Transition_default as Transition,
+  assignRef,
+  clsx_default as clsx,
   getOpenValuesByPathname,
+  mergeRefs_default as mergeRefs,
+  scrollToItem,
   useAccordionItem,
   useCollapse,
+  useDebounce_default as useDebounce,
   useDisclosure_default as useDisclosure,
+  useElementSize_default as useElementSize,
+  useInfiniteQuery_default as useInfiniteQuery,
   useLocalStorage,
   useMenu,
   useMenuItemValue,
+  useOnClickOutside_default as useOnClickOutside,
   usePrevious,
   useStep
 };