@unifiedsoftware/react-ui 1.0.13 → 1.0.15

package/dist/index.mjs

@@ -429,8 +429,40 @@ var CollapseTrigger = forwardRef11(({ children }, ref) => {
 });
 var CollapseTrigger_default = CollapseTrigger;
 
+// src/components/Drawer/Drawer.tsx
+import clsx8 from "clsx";
+import { forwardRef as forwardRef12, useRef as useRef4 } from "react";
+import { mergeRefs as mergeRefs2 } from "react-merge-refs";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var Drawer = forwardRef12((props, ref) => {
+  const { children, className, isOpen, size = "md", position = "left", onClose } = props;
+  const nodeRef = useRef4(null);
+  const handleClose = () => {
+    onClose();
+  };
+  return /* @__PURE__ */ jsx10(Backdrop_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsx10(Transition_default, { nodeRef, isOpen, name: `${PREFIX_CLS}drawer`, enter: 600, leave: 300, unmountOnExit: true, children: /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      ref: mergeRefs2([ref, nodeRef]),
+      className: clsx8(
+        `${PREFIX_CLS}drawer`,
+        {
+          [`${PREFIX_CLS}drawer--${size}`]: size,
+          [`${PREFIX_CLS}drawer--${position}`]: position
+        },
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx10("div", { className: `${PREFIX_CLS}drawer__overlay` }),
+        children
+      ]
+    }
+  ) }) });
+});
+var Drawer_default = Drawer;
+
 // src/components/Menu/Menu.tsx
-import clsx11 from "clsx";
+import clsx12 from "clsx";
 import { useEffect as useEffect3, useMemo as useMemo3, useState as useState2 } from "react";
 
 // src/components/Menu/MenuContext.tsx
@@ -446,12 +478,12 @@ var useMenu = () => {
 var MenuContext_default = MenuContext;
 
 // src/components/Menu/MenuGroup.tsx
-import clsx10 from "clsx";
+import clsx11 from "clsx";
 import { useMemo as useMemo2 } from "react";
 
 // src/components/Menu/MenuItem.tsx
-import clsx8 from "clsx";
-import { forwardRef as forwardRef12, useContext as useContext4, useEffect as useEffect2 } from "react";
+import clsx9 from "clsx";
+import { forwardRef as forwardRef13, useContext as useContext4, useEffect as useEffect2 } from "react";
 
 // src/components/Menu/MenuValueContext.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
@@ -466,8 +498,8 @@ var useMenuItemValue = () => {
 var MenuValueContext_default = MenuValueContext;
 
 // src/components/Menu/MenuItem.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-var MenuItem = forwardRef12((props, ref) => {
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var MenuItem = forwardRef13((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);
@@ -485,11 +517,11 @@ var MenuItem = forwardRef12((props, ref) => {
       onChange(mergedValues);
     }
   }, [value, originalValue, navMode]);
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     Component,
     __spreadProps(__spreadValues({
       ref,
-      className: clsx8(
+      className: clsx9(
         `${PREFIX_CLS}menu-item`,
         {
           [`${PREFIX_CLS}menu-item--selected`]: menuValue.includes(value),
@@ -503,9 +535,9 @@ var MenuItem = forwardRef12((props, ref) => {
       onClick: handleClick
     }, rest), {
       children: [
-        /* @__PURE__ */ jsx10("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ jsx10("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
-        icon && /* @__PURE__ */ jsx10("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
-        /* @__PURE__ */ jsx10("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ jsx10("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) })
+        /* @__PURE__ */ jsx11("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ jsx11("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
+        icon && /* @__PURE__ */ jsx11("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
+        /* @__PURE__ */ jsx11("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ jsx11("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) })
       ]
     })
   );
@@ -514,7 +546,7 @@ MenuItem.displayName = "MenuItem";
 var MenuItem_default = MenuItem;
 
 // src/components/Menu/MenuSubmenu.tsx
-import clsx9 from "clsx";
+import clsx10 from "clsx";
 import { useContext as useContext5, useMemo } from "react";
 
 // src/components/Menu/utils.ts
@@ -541,7 +573,7 @@ var addOrRemoveValueInArray = (array, value) => {
 };
 
 // src/components/Menu/MenuSubmenu.tsx
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var MenuSubmenu = (_a) => {
   var _b = _a, {
     children,
@@ -571,7 +603,7 @@ var MenuSubmenu = (_a) => {
   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__ */ jsx11(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "submenu" ? /* @__PURE__ */ jsx11(MenuSubmenu, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "group" ? /* @__PURE__ */ jsx11(MenuGroup_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : /* @__PURE__ */ jsx11(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index);
+      return type === "item" ? /* @__PURE__ */ jsx12(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "submenu" ? /* @__PURE__ */ jsx12(MenuSubmenu, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "group" ? /* @__PURE__ */ jsx12(MenuGroup_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : /* @__PURE__ */ jsx12(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index);
     });
   }, [items]);
   const handleClick = (event) => {
@@ -589,11 +621,11 @@ var MenuSubmenu = (_a) => {
     }
     onClick == null ? void 0 : onClick(event);
   };
-  return /* @__PURE__ */ jsx11(MenuValueContext_default.Provider, { value: mergedValues, children: /* @__PURE__ */ jsx11("div", { className: clsx9(`${PREFIX_CLS}menu-submenu`), children: /* @__PURE__ */ jsxs10(Collapse_default, { isOpen, children: [
-    /* @__PURE__ */ jsx11(CollapseTrigger_default, { children: /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsx12(MenuValueContext_default.Provider, { value: mergedValues, children: /* @__PURE__ */ jsx12("div", { className: clsx10(`${PREFIX_CLS}menu-submenu`), children: /* @__PURE__ */ jsxs11(Collapse_default, { isOpen, children: [
+    /* @__PURE__ */ jsx12(CollapseTrigger_default, { children: /* @__PURE__ */ jsxs11(
       "div",
       __spreadProps(__spreadValues({
-        className: clsx9(
+        className: clsx10(
           `${PREFIX_CLS}menu-item`,
           {
             [`${PREFIX_CLS}menu-item--selected`]: menuValue.includes(value) || items && mergedValues.includes(menuValue)
@@ -606,17 +638,17 @@ var MenuSubmenu = (_a) => {
         onClick: handleClick
       }, rest), {
         children: [
-          /* @__PURE__ */ jsx11("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ jsx11("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
-          icon && /* @__PURE__ */ jsx11("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
-          /* @__PURE__ */ jsx11("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ jsx11("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) }),
-          /* @__PURE__ */ jsx11("div", { className: `${PREFIX_CLS}menu-item__icon`, children: isOpen ? /* @__PURE__ */ jsx11(ChevronUpIcon_default, { className: `${PREFIX_CLS}icon` }) : /* @__PURE__ */ jsx11(ChevronDownIcon_default, { className: `${PREFIX_CLS}icon` }) })
+          /* @__PURE__ */ jsx12("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ jsx12("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
+          icon && /* @__PURE__ */ jsx12("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
+          /* @__PURE__ */ jsx12("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ jsx12("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) }),
+          /* @__PURE__ */ jsx12("div", { className: `${PREFIX_CLS}menu-item__icon`, children: isOpen ? /* @__PURE__ */ jsx12(ChevronUpIcon_default, { className: `${PREFIX_CLS}icon` }) : /* @__PURE__ */ jsx12(ChevronDownIcon_default, { className: `${PREFIX_CLS}icon` }) })
         ]
       })
     ) }),
-    /* @__PURE__ */ jsx11(CollapseContent_default, { children: /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(CollapseContent_default, { children: /* @__PURE__ */ jsx12(
       "ul",
       {
-        className: clsx9(`${PREFIX_CLS}menu`, {
+        className: clsx10(`${PREFIX_CLS}menu`, {
           [`${PREFIX_CLS}menu-open`]: !isOpen
         }),
         children: content || children
@@ -627,7 +659,7 @@ var MenuSubmenu = (_a) => {
 var MenuSubmenu_default = MenuSubmenu;
 
 // src/components/Menu/MenuGroup.tsx
-import { Fragment, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var MenuGroup = (_a) => {
   var _b = _a, {
     children,
@@ -649,21 +681,21 @@ 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__ */ jsx12(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ jsx12(MenuSubmenu_default, __spreadValues({}, item), index) : /* @__PURE__ */ jsx12(MenuItem_default, __spreadValues({}, item), index);
+      return type === "item" ? /* @__PURE__ */ jsx13(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ jsx13(MenuSubmenu_default, __spreadValues({}, item), index) : /* @__PURE__ */ jsx13(MenuItem_default, __spreadValues({}, item), index);
     });
   }, [items]);
-  return /* @__PURE__ */ jsxs11(Fragment, { children: [
-    /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(Fragment, { children: [
+    /* @__PURE__ */ jsxs12(
       "div",
       __spreadProps(__spreadValues({
-        className: clsx10(`${PREFIX_CLS}menu-group`, className),
+        className: clsx11(`${PREFIX_CLS}menu-group`, className),
         style: __spreadValues({
           paddingLeft: level <= 1 ? `var(--${PREFIX_CLS}menu-group-padding-x)` : `calc(${level} * var(--${PREFIX_CLS}menu-group-padding-level))`
         }, style)
       }, rest), {
         children: [
-          icon && /* @__PURE__ */ jsx12("div", { className: `${PREFIX_CLS}menu-group__icon`, children: icon }),
-          /* @__PURE__ */ jsx12("div", { className: `${PREFIX_CLS}menu-group__content`, children: /* @__PURE__ */ jsx12("span", { className: `${PREFIX_CLS}menu-group__title`, children: title }) })
+          icon && /* @__PURE__ */ jsx13("div", { className: `${PREFIX_CLS}menu-group__icon`, children: icon }),
+          /* @__PURE__ */ jsx13("div", { className: `${PREFIX_CLS}menu-group__content`, children: /* @__PURE__ */ jsx13("span", { className: `${PREFIX_CLS}menu-group__title`, children: title }) })
         ]
       })
     ),
@@ -673,7 +705,7 @@ var MenuGroup = (_a) => {
 var MenuGroup_default = MenuGroup;
 
 // src/components/Menu/Menu.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var Menu = (_a) => {
   var _b = _a, {
     children,
@@ -704,7 +736,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__ */ jsx13(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ jsx13(MenuSubmenu_default, __spreadValues({}, item), index) : type === "group" ? /* @__PURE__ */ jsx13(MenuGroup_default, __spreadValues({}, item), index) : /* @__PURE__ */ jsx13(MenuItem_default, __spreadValues({}, item), index);
+      return type === "item" ? /* @__PURE__ */ jsx14(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ jsx14(MenuSubmenu_default, __spreadValues({}, item), index) : type === "group" ? /* @__PURE__ */ jsx14(MenuGroup_default, __spreadValues({}, item), index) : /* @__PURE__ */ jsx14(MenuItem_default, __spreadValues({}, item), index);
     });
   }, [items]);
   const handleChange = (value) => {
@@ -734,7 +766,7 @@ var Menu = (_a) => {
       setSelfOpenValues(openValuesProp);
     }
   }, [openValuesProp]);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     MenuContext_default.Provider,
     {
       value: {
@@ -747,7 +779,7 @@ var Menu = (_a) => {
         onChange: handleChange,
         onItemSelect: handleItemSelect
       },
-      children: /* @__PURE__ */ jsx13("div", __spreadProps(__spreadValues({ className: clsx11(`${PREFIX_CLS}menu`) }, rest), { children: content || children }))
+      children: /* @__PURE__ */ jsx14("div", __spreadProps(__spreadValues({ className: clsx12(`${PREFIX_CLS}menu`) }, rest), { children: content || children }))
     }
   );
 };
@@ -755,9 +787,9 @@ Menu.displayName = "Menu";
 var Menu_default = Menu;
 
 // src/components/Tabs/Tab.tsx
-import clsx12 from "clsx";
-import mergeRefs2 from "merge-refs";
-import { forwardRef as forwardRef13, useEffect as useEffect4, useId, useRef as useRef4 } from "react";
+import clsx13 from "clsx";
+import mergeRefs3 from "merge-refs";
+import { forwardRef as forwardRef14, useEffect as useEffect4, useId, useRef as useRef5 } from "react";
 
 // ../../../node_modules/react-icons/lib/esm/iconBase.js
 import React3 from "react";
@@ -857,8 +889,8 @@ var useTabs = () => {
 };
 
 // src/components/Tabs/Tab.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
-var Tab = forwardRef13(
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+var Tab = forwardRef14(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "div",
@@ -879,7 +911,7 @@ var Tab = forwardRef13(
       "disabled",
       "onClick"
     ]);
-    const tabRef = useRef4(null);
+    const tabRef = useRef5(null);
     const id = useId();
     const value = valueProp != null ? valueProp : id;
     const _a2 = useTabs(), { onClose, registerItem } = _a2, tabs = __objRest(_a2, ["onClose", "registerItem"]);
@@ -927,11 +959,11 @@ var Tab = forwardRef13(
         tabs.previousTabRef.current = tabRef.current;
       }
     }, [value, tabs.value]);
-    return /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsxs13(
       Component,
       __spreadProps(__spreadValues({
-        ref: mergeRefs2(tabRef, ref, (el) => tabs.tabRefs.current[value] = el),
-        className: clsx12(
+        ref: mergeRefs3(tabRef, ref, (el) => tabs.tabRefs.current[value] = el),
+        className: clsx13(
           `${PREFIX_CLS}tab`,
           { [`${PREFIX_CLS}tab--selected`]: value === tabs.value, [`${PREFIX_CLS}tab--disabled`]: disabled },
           className
@@ -940,12 +972,12 @@ var Tab = forwardRef13(
         onClick: handleClick
       }, rest), {
         children: [
-          /* @__PURE__ */ jsx14("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ jsx14("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
-          /* @__PURE__ */ jsxs12("div", { className: `${PREFIX_CLS}tab__content`, children: [
+          /* @__PURE__ */ jsx15("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ jsx15("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
+          /* @__PURE__ */ jsxs13("div", { className: `${PREFIX_CLS}tab__content`, children: [
             children,
-            closable && /* @__PURE__ */ jsx14(Button, { variant: "text", color: "secondary", iconOnly: true, size: "xs", onClick: handleClose, children: /* @__PURE__ */ jsx14(Icon_default, { children: /* @__PURE__ */ jsx14(TbX, {}) }) })
+            closable && /* @__PURE__ */ jsx15(Button, { variant: "text", color: "secondary", iconOnly: true, size: "xs", onClick: handleClose, children: /* @__PURE__ */ jsx15(Icon_default, { children: /* @__PURE__ */ jsx15(TbX, {}) }) })
           ] }),
-          /* @__PURE__ */ jsx14("div", { className: `${PREFIX_CLS}tab__indicator` })
+          /* @__PURE__ */ jsx15("div", { className: `${PREFIX_CLS}tab__indicator` })
         ]
       })
     );
@@ -953,8 +985,8 @@ var Tab = forwardRef13(
 );
 
 // src/components/Tabs/Tabs.tsx
-import clsx13 from "clsx";
-import { useEffect as useEffect5, useRef as useRef5, useState as useState3 } from "react";
+import clsx14 from "clsx";
+import { useEffect as useEffect5, useRef as useRef6, useState as useState3 } from "react";
 
 // src/utils/scroll.ts
 var scrollToItem = (parentElement, currentElement) => {
@@ -982,7 +1014,7 @@ var scrollToItem = (parentElement, currentElement) => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 var Tabs = (_a) => {
   var _b = _a, {
     children,
@@ -1001,9 +1033,9 @@ var Tabs = (_a) => {
     "onChange",
     "onClose"
   ]);
-  const tabsRef = useRef5(null);
-  const tabRefs = useRef5({});
-  const previousTabRef = useRef5(null);
+  const tabsRef = useRef6(null);
+  const tabRefs = useRef6({});
+  const previousTabRef = useRef6(null);
   const [selfValue, setSelfValue] = useState3(value != null ? value : defaultValue);
   const [items, setItems] = useState3([]);
   const registerItem = (item) => {
@@ -1044,59 +1076,610 @@ var Tabs = (_a) => {
       setSelfValue(item == null ? void 0 : item.value);
     }
   }, [value, items]);
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     TabsContext.Provider,
     {
       value: { previousTabRef, tabRefs, value: selfValue, onChange: handleChange, onClose: handleClose, registerItem },
       children: [
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(
           "div",
           __spreadProps(__spreadValues({
             ref: tabsRef,
-            className: clsx13(`${PREFIX_CLS}tabs`, { [`${PREFIX_CLS}tabs--${alignment}`]: alignment }, className)
+            className: clsx14(`${PREFIX_CLS}tabs`, { [`${PREFIX_CLS}tabs--${alignment}`]: alignment }, className)
           }, rest), {
             children
           })
         ),
-        /* @__PURE__ */ jsx15("div", { className: `${PREFIX_CLS}divider` })
+        /* @__PURE__ */ jsx16("div", { className: `${PREFIX_CLS}divider` })
       ]
     }
   );
 };
 
 // src/components/Toolbar/Toolbar.tsx
-import clsx14 from "clsx";
-import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import clsx15 from "clsx";
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs15 } 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__ */ jsxs14("div", __spreadProps(__spreadValues({ className: clsx14(`${PREFIX_CLS}toolbar`, { [`${PREFIX_CLS}toolbar--${size}`]: size }, className) }, rest), { children: [
-    /* @__PURE__ */ jsx16("div", { className: `${PREFIX_CLS}outline-b` }),
-    /* @__PURE__ */ jsxs14("div", { className: clsx14(`${PREFIX_CLS}toolbar__container`), children: [
-      startAction && /* @__PURE__ */ jsx16("div", { className: clsx14(`${PREFIX_CLS}toolbar__start-action`), children: startAction }),
-      /* @__PURE__ */ jsx16("div", { className: clsx14(`${PREFIX_CLS}toolbar__content`), children: title || subtitle ? /* @__PURE__ */ jsxs14(Fragment2, { children: [
-        title && /* @__PURE__ */ jsx16("div", { className: clsx14(`${PREFIX_CLS}toolbar__title`), children: title }),
-        subtitle && /* @__PURE__ */ jsx16("div", { className: clsx14(`${PREFIX_CLS}toolbar__subtitle`), children: subtitle })
+  return /* @__PURE__ */ jsxs15("div", __spreadProps(__spreadValues({ className: clsx15(`${PREFIX_CLS}toolbar`, { [`${PREFIX_CLS}toolbar--${size}`]: size }, className) }, rest), { children: [
+    /* @__PURE__ */ jsx17("div", { className: `${PREFIX_CLS}outline-b` }),
+    /* @__PURE__ */ jsxs15("div", { className: clsx15(`${PREFIX_CLS}toolbar__container`), children: [
+      startAction && /* @__PURE__ */ jsx17("div", { className: clsx15(`${PREFIX_CLS}toolbar__start-action`), children: startAction }),
+      /* @__PURE__ */ jsx17("div", { className: clsx15(`${PREFIX_CLS}toolbar__content`), children: title || subtitle ? /* @__PURE__ */ jsxs15(Fragment2, { children: [
+        title && /* @__PURE__ */ jsx17("div", { className: clsx15(`${PREFIX_CLS}toolbar__title`), children: title }),
+        subtitle && /* @__PURE__ */ jsx17("div", { className: clsx15(`${PREFIX_CLS}toolbar__subtitle`), children: subtitle })
       ] }) : children }),
-      endAction && /* @__PURE__ */ jsx16("div", { className: clsx14(`${PREFIX_CLS}toolbar__trailing`), children: endAction })
+      endAction && /* @__PURE__ */ jsx17("div", { className: clsx15(`${PREFIX_CLS}toolbar__trailing`), children: endAction })
     ] })
   ] }));
 };
 var Toolbar_default = Toolbar;
 
+// src/components/Select/SelectClient.tsx
+import { filterBy } from "@progress/kendo-data-query";
+import {
+  ComboBox
+} from "@progress/kendo-react-dropdowns";
+import { useEffect as useEffect6, useRef as useRef7, useState as useState4 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var SelectClient = ({
+  value: valueProp,
+  data: propData,
+  filter: filterProp,
+  keyField: keyField2 = "key",
+  textField: textField3 = "text",
+  placeholder,
+  virtual,
+  filterable,
+  disabled,
+  loading,
+  className,
+  onChange,
+  onFilterChange
+}) => {
+  const [value, setValue] = useState4(valueProp);
+  const [filter, setFilter] = useState4(filterProp);
+  const handleChange = (event) => {
+    const value2 = event.target.value || null;
+    if (valueProp !== void 0) {
+      onChange(value2);
+    } else {
+      setValue(value2);
+    }
+  };
+  const pageSize3 = virtual == null ? void 0 : virtual.pageSize;
+  const filteredData = useRef7([]);
+  const [state, setState] = useState4({
+    skip: 0,
+    total: propData.total,
+    subsetData: propData.items.slice(0, pageSize3)
+  });
+  const handleFilterChange = (event) => {
+    if (pageSize3) {
+      filteredData.current = filterBy(propData.items.slice(), event.filter);
+      const data = filteredData.current.slice(0, pageSize3);
+      setState({
+        subsetData: data,
+        skip: 0,
+        total: filteredData.current.length
+      });
+    }
+    const filter2 = event.filter.value;
+    if (filterProp !== void 0) {
+      onFilterChange == null ? void 0 : onFilterChange(filter2);
+    } else {
+      setFilter(filter2);
+    }
+  };
+  const handlePageChange = (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 }));
+    }
+  };
+  useEffect6(() => {
+    if (valueProp !== void 0) {
+      setValue(valueProp);
+    }
+  }, [valueProp]);
+  useEffect6(() => {
+    setFilter(filterProp);
+  }, [filterProp]);
+  useEffect6(() => {
+    if (pageSize3) {
+      filteredData.current = propData.items.slice();
+    }
+  }, [propData]);
+  return /* @__PURE__ */ jsx18(
+    ComboBox,
+    {
+      value,
+      data: pageSize3 ? state.subsetData : propData.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: handlePageChange
+    }
+  );
+};
+var SelectClient_default = SelectClient;
+
+// src/components/Select/SelectServer.tsx
+import {
+  ComboBox as ComboBox2
+} from "@progress/kendo-react-dropdowns";
+import { cloneElement as cloneElement4, useCallback, useEffect as useEffect7, useRef as useRef8, useState as useState5 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var textField = "ContactName";
+var emptyItem = { [textField]: "loading ...", CustomerID: 0 };
+var pageSize = 10;
+var loadingData = [];
+while (loadingData.length < pageSize) {
+  loadingData.push(__spreadValues({}, emptyItem));
+}
+var SelectServer = ({
+  data: dataProp,
+  value: valueProp,
+  keyField: keyField2 = "key",
+  textField: textField3 = "text",
+  placeholder,
+  virtual,
+  filterable,
+  filter: filterProp = "",
+  disabled,
+  loading,
+  className,
+  onChange,
+  onDataChange,
+  onFilterChange,
+  getData,
+  renderItem
+}) => {
+  var _a;
+  const dataCaching = useRef8([]);
+  const pendingRequest = useRef8();
+  const requestStarted = useRef8(false);
+  const emptyItem3 = { [keyField2]: 0, [textField3]: "loading ..." };
+  const [loadingData3, setLoadingData] = useState5([]);
+  const [data, setData] = useState5(dataProp.items);
+  const [total, setTotal] = useState5(0);
+  const [value, setValue] = useState5(valueProp);
+  const [filter, setFilter] = useState5(filterProp);
+  const pageSize3 = (_a = virtual == null ? void 0 : virtual.pageSize) != null ? _a : 10;
+  const skipRef = useRef8(0);
+  const resetCach = () => {
+    dataCaching.current.length = 0;
+  };
+  const requestData = useCallback((state) => {
+    const { skip } = state;
+    if (requestStarted.current) {
+      clearTimeout(pendingRequest.current);
+      pendingRequest.current = setTimeout(() => {
+        requestData(state);
+      }, 50);
+      return;
+    }
+    requestStarted.current = true;
+    getData(state).then(({ items, total: total2 }) => {
+      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;
+    });
+  }, []);
+  const handleFilterChange = useCallback((event) => {
+    const filter2 = event.filter.value;
+    if (filterProp !== void 0) {
+      onFilterChange == null ? void 0 : onFilterChange(filter2);
+    } else {
+      setFilter(filter2);
+    }
+    resetCach();
+    requestData({ skip: 0, filter: filter2 });
+    setData(loadingData3);
+    skipRef.current = 0;
+  }, []);
+  const shouldRequestData = useCallback((skip) => {
+    for (let i = 0; i < pageSize3; i++) {
+      if (!dataCaching.current[skip + i]) {
+        return true;
+      }
+    }
+    return false;
+  }, []);
+  const getCachedData = useCallback((skip) => {
+    const data2 = [];
+    for (let i = 0; i < pageSize3; i++) {
+      data2.push(dataCaching.current[i + skip] || emptyItem3);
+    }
+    return data2;
+  }, []);
+  const pageChange = useCallback(
+    (event) => {
+      if (filter !== void 0) {
+        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 = useCallback((event) => {
+    const value2 = event.target.value;
+    if (value2 && value2[textField3] === emptyItem3[textField3]) {
+      return;
+    }
+    if (valueProp !== void 0) {
+      onChange(value2);
+    } else {
+      setValue(value2);
+    }
+  }, []);
+  const handleItemRender = (li, itemProps) => {
+    const itemChildren = renderItem == null ? void 0 : renderItem(itemProps.dataItem);
+    if (!itemChildren)
+      return cloneElement4(li, li.props);
+    return cloneElement4(li, li.props, itemChildren);
+  };
+  useEffect7(() => {
+    const pageSize4 = 10;
+    const loadingData4 = [];
+    while (loadingData4.length < pageSize4) {
+      loadingData4.push(emptyItem3);
+    }
+    setLoadingData(loadingData4);
+  }, []);
+  useEffect7(() => {
+    if (valueProp !== void 0) {
+      setValue(valueProp);
+    }
+  }, [valueProp]);
+  useEffect7(() => {
+    if (filterProp !== void 0) {
+      setFilter(filterProp);
+    }
+  }, [filterProp]);
+  useEffect7(() => {
+    requestData({ skip: 0, filter });
+    return () => {
+      resetCach();
+    };
+  }, [filter, requestData]);
+  useEffect7(() => {
+    setData(dataProp.items);
+  }, [dataProp]);
+  return /* @__PURE__ */ jsx19(
+    ComboBox2,
+    {
+      data,
+      value,
+      placeholder,
+      dataItemKey: keyField2,
+      textField: textField3,
+      filterable,
+      onFilterChange: handleFilterChange,
+      virtual: {
+        pageSize: pageSize3,
+        skip: skipRef.current,
+        total
+      },
+      disabled,
+      loading,
+      className,
+      onChange: handleChange,
+      onPageChange: pageChange,
+      itemRender: handleItemRender
+    }
+  );
+};
+var SelectServer_default = SelectServer;
+
+// src/components/Select/Select.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var Select = (props) => {
+  return props.filterMode === "client" ? /* @__PURE__ */ jsx20(SelectClient_default, __spreadValues({}, props)) : /* @__PURE__ */ jsx20(SelectServer_default, __spreadValues({}, props));
+};
+var Select_default = Select;
+
+// src/components/MultiSelect/MultiSelectClient.tsx
+import { filterBy as filterBy2 } from "@progress/kendo-data-query";
+import {
+  MultiSelect
+} from "@progress/kendo-react-dropdowns";
+import { useEffect as useEffect8, useRef as useRef9, useState as useState6 } from "react";
+import { jsx as jsx21 } 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] = useState6(valueProp);
+  const [filter, setFilter] = useState6(filterProp);
+  const handleChange = (event) => {
+    onChange(event.target.value);
+  };
+  const pageSize3 = virtual == null ? void 0 : virtual.pageSize;
+  const filteredData = useRef9([]);
+  const [state, setState] = useState6({
+    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
+      });
+    }
+    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 }));
+    }
+  };
+  useEffect8(() => {
+    setValue(valueProp);
+  }, [valueProp]);
+  useEffect8(() => {
+    setFilter(filterProp);
+  }, [filterProp]);
+  useEffect8(() => {
+    if (pageSize3) {
+      filteredData.current = dataProp.items.slice();
+    }
+  }, [dataProp]);
+  return /* @__PURE__ */ jsx21(
+    MultiSelect,
+    {
+      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
+    }
+  );
+};
+var MultiSelectClient_default = SelectClient2;
+
+// src/components/MultiSelect/MultiSelectServer.tsx
+import {
+  MultiSelect as MultiSelect2
+} from "@progress/kendo-react-dropdowns";
+import { useCallback as useCallback2, useEffect as useEffect9, useRef as useRef10, useState as useState7 } from "react";
+import { jsx as jsx22 } 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 = useRef10([]);
+  const pendingRequest = useRef10();
+  const requestStarted = useRef10(false);
+  const emptyItem3 = { [keyField2]: 0, [textField3]: "loading ..." };
+  const [loadingData3, setLoadingData] = useState7([]);
+  const [data, setData] = useState7(dataProp.items);
+  const [total, setTotal] = useState7(0);
+  const [value, setValue] = useState7(valueProp);
+  const [filter, setFilter] = useState7(filterProp);
+  const pageSize3 = (_a = virtual == null ? void 0 : virtual.pageSize) != null ? _a : 10;
+  const skipRef = useRef10(0);
+  const resetCach = () => {
+    dataCaching.current.length = 0;
+  };
+  const requestData = useCallback2((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;
+    });
+  }, []);
+  const handleFilterChange = useCallback2((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 = useCallback2((skip) => {
+    for (let i = 0; i < pageSize3; i++) {
+      if (!dataCaching.current[skip + i]) {
+        return true;
+      }
+    }
+    return false;
+  }, []);
+  const getCachedData = useCallback2((skip) => {
+    const data2 = [];
+    for (let i = 0; i < pageSize3; i++) {
+      data2.push(dataCaching.current[i + skip] || emptyItem3);
+    }
+    return data2;
+  }, []);
+  const pageChange = useCallback2(
+    (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 = useCallback2((event) => {
+    const value2 = event.target.value;
+    if (value2 && value2[textField3] === emptyItem3[textField3]) {
+      return;
+    }
+    setValue(value2);
+    onChange(value2);
+  }, []);
+  useEffect9(() => {
+    const pageSize4 = 10;
+    const loadingData4 = [];
+    while (loadingData4.length < pageSize4) {
+      loadingData4.push(emptyItem3);
+    }
+    setLoadingData(loadingData4);
+  }, []);
+  useEffect9(() => {
+    setData(dataProp.items);
+  }, [dataProp]);
+  useEffect9(() => {
+    setValue(valueProp);
+  }, [valueProp]);
+  useEffect9(() => {
+    setFilter(filterProp);
+  }, [filterProp]);
+  useEffect9(() => {
+    requestData({ skip: 0, filter });
+    return () => {
+      resetCach();
+    };
+  }, [filter, requestData]);
+  return /* @__PURE__ */ jsx22(
+    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
+    }
+  );
+};
+var MultiSelectServer_default = MultiSelectServer;
+
+// src/components/MultiSelect/MultiSelect.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+var MultiSelect3 = (props) => {
+  return props.filterMode === "client" ? /* @__PURE__ */ jsx23(MultiSelectClient_default, __spreadValues({}, props)) : /* @__PURE__ */ jsx23(MultiSelectServer_default, __spreadValues({}, props));
+};
+var MultiSelect_default = MultiSelect3;
+
 // src/hooks/useLocalStorage.tsx
-import { useCallback, useEffect as useEffect7, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect11, useState as useState8 } from "react";
 
 // src/hooks/useEventListener.tsx
-import { useRef as useRef6 } from "react";
+import { useRef as useRef11 } from "react";
 
 // src/hooks/useIsomorphicLayoutEffect.tsx
-import { useEffect as useEffect6, useLayoutEffect } from "react";
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect6;
+import { useEffect as useEffect10, useLayoutEffect } from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect10;
 var useIsomorphicLayoutEffect_default = useIsomorphicLayoutEffect;
 
 // src/hooks/useEventListener.tsx
 function useEventListener(handler) {
-  const savedHandler = useRef6(handler);
+  const savedHandler = useRef11(handler);
   useIsomorphicLayoutEffect_default(() => {
     savedHandler.current = handler;
   }, [handler]);
@@ -1105,7 +1688,7 @@ var useEventListener_default = useEventListener;
 
 // src/hooks/useLocalStorage.tsx
 function useLocalStorage(key, initialValue) {
-  const readValue = useCallback(() => {
+  const readValue = useCallback3(() => {
     if (typeof window === "undefined") {
       return initialValue;
     }
@@ -1117,8 +1700,8 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   }, [initialValue, key]);
-  const [storedValue, setStoredValue] = useState4(readValue);
-  const setValue = useCallback(
+  const [storedValue, setStoredValue] = useState8(readValue);
+  const setValue = useCallback3(
     (value) => {
       if (typeof window == "undefined") {
         console.warn(`Tried setting localStorage key \u201C${key}\u201D even though environment is not a client`);
@@ -1134,10 +1717,10 @@ function useLocalStorage(key, initialValue) {
     },
     [key, storedValue]
   );
-  useEffect7(() => {
+  useEffect11(() => {
     setStoredValue(readValue());
   }, []);
-  const handleStorageChange = useCallback(() => {
+  const handleStorageChange = useCallback3(() => {
     setStoredValue(readValue());
   }, [readValue]);
   useEventListener_default("storage", handleStorageChange);
@@ -1148,28 +1731,27 @@ function parseJSON(value) {
   try {
     return value === "undefined" ? void 0 : JSON.parse(value != null ? value : "");
   } catch (e) {
-    console.log("parsing error on", { value });
     return void 0;
   }
 }
 
 // src/hooks/usePrevious.tsx
-import { useEffect as useEffect8, useRef as useRef7 } from "react";
+import { useEffect as useEffect12, useRef as useRef12 } from "react";
 var usePrevious = (value) => {
-  const ref = useRef7();
-  useEffect8(() => {
+  const ref = useRef12();
+  useEffect12(() => {
     ref.current = value;
   });
   return ref.current;
 };
 
 // src/hooks/useStep.tsx
-import { useCallback as useCallback2, useMemo as useMemo4, useState as useState5 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo4, useState as useState9 } from "react";
 var useStep = (maxStep) => {
-  const [currentStep, setCurrentStep] = useState5(1);
+  const [currentStep, setCurrentStep] = useState9(1);
   const canGoToNextStep = useMemo4(() => currentStep + 1 <= maxStep, [currentStep, maxStep]);
   const canGoToPrevStep = useMemo4(() => currentStep - 1 >= 1, [currentStep]);
-  const setStep = useCallback2(
+  const setStep = useCallback4(
     (step) => {
       const newStep = step instanceof Function ? step(currentStep) : step;
       if (newStep >= 1 && newStep <= maxStep) {
@@ -1180,17 +1762,17 @@ var useStep = (maxStep) => {
     },
     [maxStep, currentStep]
   );
-  const goToNextStep = useCallback2(() => {
+  const goToNextStep = useCallback4(() => {
     if (canGoToNextStep) {
       setCurrentStep((step) => step + 1);
     }
   }, [canGoToNextStep]);
-  const goToPrevStep = useCallback2(() => {
+  const goToPrevStep = useCallback4(() => {
     if (canGoToPrevStep) {
       setCurrentStep((step) => step - 1);
     }
   }, [canGoToPrevStep]);
-  const reset = useCallback2(() => {
+  const reset = useCallback4(() => {
     setCurrentStep(1);
   }, []);
   return [
@@ -1214,6 +1796,7 @@ export {
   CollapseContent_default as CollapseContent,
   CollapseContext_default as CollapseContext,
   CollapseTrigger_default as CollapseTrigger,
+  Drawer_default as Drawer,
   Icon_default as Icon,
   Menu_default as Menu,
   MenuContext_default as MenuContext,
@@ -1221,7 +1804,9 @@ export {
   MenuItem_default as MenuItem,
   MenuSubmenu_default as MenuSubmenu,
   MenuValueContext_default as MenuValueContext,
+  MultiSelect_default as MultiSelect,
   Portal_default as Portal,
+  Select_default as Select,
   Tab,
   Tabs,
   Toolbar_default as Toolbar,