npm - @unifiedsoftware/react-ui - Versions diffs - 1.0.12 → 1.0.14 - Mend

@unifiedsoftware/react-ui 1.0.12 → 1.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -125,6 +125,18 @@ interface CollapseTriggerProps {
 }
 declare const CollapseTrigger: react__default.FC<CollapseTriggerProps>;
+type DrawerSize = 'sm' | 'md' | 'lg';
+type DrawerPosition = 'top' | 'left' | 'right' | 'bottom';
+interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
+    isOpen: boolean;
+    size?: DrawerSize;
+    position?: DrawerPosition;
+    onClose: () => void;
+    onAfterClose?: () => void;
+}
+declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
 interface IconProps {
     children: React.ReactNode;
     color?: 'primary' | 'secondary';
@@ -364,4 +376,4 @@ interface Helpers {
  */
 declare const useStep: (maxStep: number) => [number, Helpers];
-export { Backdrop, BackdropProps, Badge, BadgeProps, Button, ButtonColor, ButtonProps, ButtonSize, ButtonVariant, Chip, ChipProps, Collapse, CollapseContent, CollapseContentProps, CollapseContext, CollapseContextValue, CollapseProps, CollapseTrigger, CollapseTriggerProps, Icon, IconProps, Menu, MenuContext, MenuContextValue, MenuGroup, MenuGroupItemType, MenuGroupProps, MenuItem, MenuItemProps, MenuItemType, MenuProps, MenuSubmenu, MenuSubmenuProps, MenuValueContext, Portal, PortalProps, Tab, TabProps, Tabs, TabsAlignmet, TabsProps, Toolbar, ToolbarProps, ToolbarSize, Transition, TransitionProps, getOpenValuesByPathname, useCollapse, useLocalStorage, useMenu, useMenuItemValue, usePrevious, useStep };
+export { Backdrop, BackdropProps, Badge, BadgeProps, Button, ButtonColor, ButtonProps, ButtonSize, ButtonVariant, Chip, ChipProps, Collapse, CollapseContent, CollapseContentProps, CollapseContext, CollapseContextValue, CollapseProps, CollapseTrigger, CollapseTriggerProps, Drawer, DrawerPosition, DrawerProps, DrawerSize, Icon, IconProps, Menu, MenuContext, MenuContextValue, MenuGroup, MenuGroupItemType, MenuGroupProps, MenuItem, MenuItemProps, MenuItemType, MenuProps, MenuSubmenu, MenuSubmenuProps, MenuValueContext, Portal, PortalProps, Tab, TabProps, Tabs, TabsAlignmet, TabsProps, Toolbar, ToolbarProps, ToolbarSize, Transition, TransitionProps, getOpenValuesByPathname, useCollapse, useLocalStorage, useMenu, useMenuItemValue, usePrevious, useStep };

package/dist/index.d.ts CHANGED Viewed

@@ -125,6 +125,18 @@ interface CollapseTriggerProps {
 }
 declare const CollapseTrigger: react__default.FC<CollapseTriggerProps>;
+type DrawerSize = 'sm' | 'md' | 'lg';
+type DrawerPosition = 'top' | 'left' | 'right' | 'bottom';
+interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
+    isOpen: boolean;
+    size?: DrawerSize;
+    position?: DrawerPosition;
+    onClose: () => void;
+    onAfterClose?: () => void;
+}
+declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
 interface IconProps {
     children: React.ReactNode;
     color?: 'primary' | 'secondary';
@@ -364,4 +376,4 @@ interface Helpers {
  */
 declare const useStep: (maxStep: number) => [number, Helpers];
-export { Backdrop, BackdropProps, Badge, BadgeProps, Button, ButtonColor, ButtonProps, ButtonSize, ButtonVariant, Chip, ChipProps, Collapse, CollapseContent, CollapseContentProps, CollapseContext, CollapseContextValue, CollapseProps, CollapseTrigger, CollapseTriggerProps, Icon, IconProps, Menu, MenuContext, MenuContextValue, MenuGroup, MenuGroupItemType, MenuGroupProps, MenuItem, MenuItemProps, MenuItemType, MenuProps, MenuSubmenu, MenuSubmenuProps, MenuValueContext, Portal, PortalProps, Tab, TabProps, Tabs, TabsAlignmet, TabsProps, Toolbar, ToolbarProps, ToolbarSize, Transition, TransitionProps, getOpenValuesByPathname, useCollapse, useLocalStorage, useMenu, useMenuItemValue, usePrevious, useStep };
+export { Backdrop, BackdropProps, Badge, BadgeProps, Button, ButtonColor, ButtonProps, ButtonSize, ButtonVariant, Chip, ChipProps, Collapse, CollapseContent, CollapseContentProps, CollapseContext, CollapseContextValue, CollapseProps, CollapseTrigger, CollapseTriggerProps, Drawer, DrawerPosition, DrawerProps, DrawerSize, Icon, IconProps, Menu, MenuContext, MenuContextValue, MenuGroup, MenuGroupItemType, MenuGroupProps, MenuItem, MenuItemProps, MenuItemType, MenuProps, MenuSubmenu, MenuSubmenuProps, MenuValueContext, Portal, PortalProps, Tab, TabProps, Tabs, TabsAlignmet, TabsProps, Toolbar, ToolbarProps, ToolbarSize, Transition, TransitionProps, getOpenValuesByPathname, useCollapse, useLocalStorage, useMenu, useMenuItemValue, usePrevious, useStep };

package/dist/index.js CHANGED Viewed

@@ -67,6 +67,7 @@ __export(src_exports, {
   CollapseContent: () => CollapseContent_default,
   CollapseContext: () => CollapseContext_default,
   CollapseTrigger: () => CollapseTrigger_default,
+  Drawer: () => Drawer_default,
   Icon: () => Icon_default,
   Menu: () => Menu_default,
   MenuContext: () => MenuContext_default,
@@ -208,7 +209,7 @@ var ChevronDownIcon = (0, import_react4.forwardRef)((props, ref) => {
       ref,
       stroke: "currentColor",
       fill: "currentColor",
-      "stroke-width": "0",
+      strokeWidth: "0",
       viewBox: "0 0 24 24",
       height: "1em",
       width: "1em",
@@ -488,15 +489,47 @@ var CollapseTrigger = (0, import_react13.forwardRef)(({ children }, ref) => {
 });
 var CollapseTrigger_default = CollapseTrigger;
+// src/components/Drawer/Drawer.tsx
+var import_clsx8 = __toESM(require("clsx"));
+var import_react14 = require("react");
+var import_react_merge_refs2 = require("react-merge-refs");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Drawer = (0, import_react14.forwardRef)((props, ref) => {
+  const { children, className, isOpen, size = "md", position = "left", onClose } = props;
+  const nodeRef = (0, import_react14.useRef)(null);
+  const handleClose = () => {
+    onClose();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Backdrop_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Transition_default, { nodeRef, isOpen, name: `${PREFIX_CLS}drawer`, enter: 600, leave: 300, unmountOnExit: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      ref: (0, import_react_merge_refs2.mergeRefs)([ref, nodeRef]),
+      className: (0, import_clsx8.default)(
+        `${PREFIX_CLS}drawer`,
+        {
+          [`${PREFIX_CLS}drawer--${size}`]: size,
+          [`${PREFIX_CLS}drawer--${position}`]: position
+        },
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `${PREFIX_CLS}drawer__overlay` }),
+        children
+      ]
+    }
+  ) }) });
+});
+var Drawer_default = Drawer;
 // src/components/Menu/Menu.tsx
-var import_clsx11 = __toESM(require("clsx"));
-var import_react19 = require("react");
+var import_clsx12 = __toESM(require("clsx"));
+var import_react20 = require("react");
 // src/components/Menu/MenuContext.tsx
-var import_react14 = require("react");
-var MenuContext = (0, import_react14.createContext)(null);
+var import_react15 = require("react");
+var MenuContext = (0, import_react15.createContext)(null);
 var useMenu = () => {
-  const context = (0, import_react14.useContext)(MenuContext);
+  const context = (0, import_react15.useContext)(MenuContext);
   if (!context) {
     throw new Error("`useMenu` must be used within a `<Menu />`");
   }
@@ -505,18 +538,18 @@ var useMenu = () => {
 var MenuContext_default = MenuContext;
 // src/components/Menu/MenuGroup.tsx
-var import_clsx10 = __toESM(require("clsx"));
-var import_react18 = require("react");
+var import_clsx11 = __toESM(require("clsx"));
+var import_react19 = require("react");
 // src/components/Menu/MenuItem.tsx
-var import_clsx8 = __toESM(require("clsx"));
-var import_react16 = require("react");
+var import_clsx9 = __toESM(require("clsx"));
+var import_react17 = require("react");
 // src/components/Menu/MenuValueContext.tsx
-var import_react15 = require("react");
-var MenuValueContext = (0, import_react15.createContext)([]);
+var import_react16 = require("react");
+var MenuValueContext = (0, import_react16.createContext)([]);
 var useMenuItemValue = () => {
-  const context = (0, import_react15.useContext)(MenuValueContext);
+  const context = (0, import_react16.useContext)(MenuValueContext);
   if (!context) {
     throw new Error("`useMenuValue` must be used within a `<MenuValueContext.Provider />`");
   }
@@ -525,11 +558,11 @@ var useMenuItemValue = () => {
 var MenuValueContext_default = MenuValueContext;
 // src/components/Menu/MenuItem.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var MenuItem = (0, import_react16.forwardRef)((props, ref) => {
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var MenuItem = (0, import_react17.forwardRef)((props, ref) => {
   const _a = props, { as: Component = "div", className, style, value, title, icon, level = 1, disabled, onClick } = _a, rest = __objRest(_a, ["as", "className", "style", "value", "title", "icon", "level", "disabled", "onClick"]);
   const { value: menuValue, originalValue, navMode, onChange, onOpen, onItemSelect } = useMenu();
-  const values = (0, import_react16.useContext)(MenuValueContext_default);
+  const values = (0, import_react17.useContext)(MenuValueContext_default);
   const mergedValues = [...values, value];
   const handleClick = (event) => {
     if (value !== void 0) {
@@ -538,17 +571,17 @@ var MenuItem = (0, import_react16.forwardRef)((props, ref) => {
     onClick == null ? void 0 : onClick(event);
     onItemSelect == null ? void 0 : onItemSelect(props);
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (navMode === "automatic" && originalValue.length > 0 && originalValue[originalValue.length - 1] === value) {
       onOpen(values);
       onChange(mergedValues);
     }
   }, [value, originalValue, navMode]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     Component,
     __spreadProps(__spreadValues({
       ref,
-      className: (0, import_clsx8.default)(
+      className: (0, import_clsx9.default)(
         `${PREFIX_CLS}menu-item`,
         {
           [`${PREFIX_CLS}menu-item--selected`]: menuValue.includes(value),
@@ -562,9 +595,9 @@ var MenuItem = (0, import_react16.forwardRef)((props, ref) => {
       onClick: handleClick
     }, rest), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
-        icon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
+        icon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) })
       ]
     })
   );
@@ -573,8 +606,8 @@ MenuItem.displayName = "MenuItem";
 var MenuItem_default = MenuItem;
 // src/components/Menu/MenuSubmenu.tsx
-var import_clsx9 = __toESM(require("clsx"));
-var import_react17 = require("react");
+var import_clsx10 = __toESM(require("clsx"));
+var import_react18 = require("react");
 // src/components/Menu/utils.ts
 var getOpenValuesByPathname = (pathname) => {
@@ -600,7 +633,7 @@ var addOrRemoveValueInArray = (array, value) => {
 };
 // src/components/Menu/MenuSubmenu.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var MenuSubmenu = (_a) => {
   var _b = _a, {
     children,
@@ -624,13 +657,13 @@ var MenuSubmenu = (_a) => {
     "onClick"
   ]);
   const { value: menuValue, openValues, expandMode, onOpen } = useMenu();
-  const values = (0, import_react17.useContext)(MenuValueContext_default);
+  const values = (0, import_react18.useContext)(MenuValueContext_default);
   const isOpen = openValues.includes(value);
   const mergedValues = [...values, value];
-  const content = (0, import_react17.useMemo)(() => {
+  const content = (0, import_react18.useMemo)(() => {
     return items == null ? void 0 : items.map((_a2, index) => {
       var _b2 = _a2, { type } = _b2, item = __objRest(_b2, ["type"]);
-      return type === "item" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "submenu" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MenuSubmenu, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "group" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MenuGroup_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index);
+      return type === "item" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "submenu" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MenuSubmenu, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "group" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MenuGroup_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index);
     });
   }, [items]);
   const handleClick = (event) => {
@@ -648,11 +681,11 @@ var MenuSubmenu = (_a) => {
     }
     onClick == null ? void 0 : onClick(event);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MenuValueContext_default.Provider, { value: mergedValues, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_clsx9.default)(`${PREFIX_CLS}menu-submenu`), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Collapse_default, { isOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CollapseTrigger_default, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MenuValueContext_default.Provider, { value: mergedValues, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_clsx10.default)(`${PREFIX_CLS}menu-submenu`), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Collapse_default, { isOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CollapseTrigger_default, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "div",
       __spreadProps(__spreadValues({
-        className: (0, import_clsx9.default)(
+        className: (0, import_clsx10.default)(
           `${PREFIX_CLS}menu-item`,
           {
             [`${PREFIX_CLS}menu-item--selected`]: menuValue.includes(value) || items && mergedValues.includes(menuValue)
@@ -665,17 +698,17 @@ var MenuSubmenu = (_a) => {
         onClick: handleClick
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
-          icon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${PREFIX_CLS}menu-item__icon`, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChevronUpIcon_default, { className: `${PREFIX_CLS}icon` }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChevronDownIcon_default, { className: `${PREFIX_CLS}icon` }) })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
+          icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `${PREFIX_CLS}menu-item__icon`, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronUpIcon_default, { className: `${PREFIX_CLS}icon` }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronDownIcon_default, { className: `${PREFIX_CLS}icon` }) })
         ]
       })
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CollapseContent_default, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CollapseContent_default, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "ul",
       {
-        className: (0, import_clsx9.default)(`${PREFIX_CLS}menu`, {
+        className: (0, import_clsx10.default)(`${PREFIX_CLS}menu`, {
           [`${PREFIX_CLS}menu-open`]: !isOpen
         }),
         children: content || children
@@ -686,7 +719,7 @@ var MenuSubmenu = (_a) => {
 var MenuSubmenu_default = MenuSubmenu;
 // src/components/Menu/MenuGroup.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var MenuGroup = (_a) => {
   var _b = _a, {
     children,
@@ -705,24 +738,24 @@ var MenuGroup = (_a) => {
     "level",
     "items"
   ]);
-  const content = (0, import_react18.useMemo)(() => {
+  const content = (0, import_react19.useMemo)(() => {
     return items == null ? void 0 : items.map((_a2, index) => {
       var _b2 = _a2, { type } = _b2, item = __objRest(_b2, ["type"]);
-      return type === "item" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MenuSubmenu_default, __spreadValues({}, item), index) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MenuItem_default, __spreadValues({}, item), index);
+      return type === "item" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuSubmenu_default, __spreadValues({}, item), index) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuItem_default, __spreadValues({}, item), index);
     });
   }, [items]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "div",
       __spreadProps(__spreadValues({
-        className: (0, import_clsx10.default)(`${PREFIX_CLS}menu-group`, className),
+        className: (0, import_clsx11.default)(`${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__ */ (0, import_jsx_runtime13.jsx)("div", { className: `${PREFIX_CLS}menu-group__icon`, children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `${PREFIX_CLS}menu-group__content`, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: `${PREFIX_CLS}menu-group__title`, children: title }) })
+          icon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `${PREFIX_CLS}menu-group__icon`, children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `${PREFIX_CLS}menu-group__content`, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: `${PREFIX_CLS}menu-group__title`, children: title }) })
         ]
       })
     ),
@@ -732,7 +765,7 @@ var MenuGroup = (_a) => {
 var MenuGroup_default = MenuGroup;
 // src/components/Menu/Menu.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var Menu = (_a) => {
   var _b = _a, {
     children,
@@ -758,12 +791,12 @@ var Menu = (_a) => {
     "onItemSelect"
   ]);
   var _a2;
-  const [selfValue, setSelfValue] = (0, import_react19.useState)((_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : []);
-  const [selfOpenValues, setSelfOpenValues] = (0, import_react19.useState)(openValuesProp != null ? openValuesProp : []);
-  const content = (0, import_react19.useMemo)(() => {
+  const [selfValue, setSelfValue] = (0, import_react20.useState)((_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : []);
+  const [selfOpenValues, setSelfOpenValues] = (0, import_react20.useState)(openValuesProp != null ? openValuesProp : []);
+  const content = (0, import_react20.useMemo)(() => {
     return items == null ? void 0 : items.map((_a3, index) => {
       var _b2 = _a3, { type } = _b2, item = __objRest(_b2, ["type"]);
-      return type === "item" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuSubmenu_default, __spreadValues({}, item), index) : type === "group" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuGroup_default, __spreadValues({}, item), index) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuItem_default, __spreadValues({}, item), index);
+      return type === "item" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MenuSubmenu_default, __spreadValues({}, item), index) : type === "group" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MenuGroup_default, __spreadValues({}, item), index) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MenuItem_default, __spreadValues({}, item), index);
     });
   }, [items]);
   const handleChange = (value) => {
@@ -783,17 +816,17 @@ var Menu = (_a) => {
   const handleItemSelect = (props) => {
     onItemSelect == null ? void 0 : onItemSelect(props);
   };
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (valueProp !== void 0 && navMode !== "automatic") {
       setSelfValue(valueProp);
     }
   }, [valueProp]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (openValuesProp !== void 0) {
       setSelfOpenValues(openValuesProp);
     }
   }, [openValuesProp]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     MenuContext_default.Provider,
     {
       value: {
@@ -806,7 +839,7 @@ var Menu = (_a) => {
         onChange: handleChange,
         onItemSelect: handleItemSelect
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", __spreadProps(__spreadValues({ className: (0, import_clsx11.default)(`${PREFIX_CLS}menu`) }, rest), { children: content || children }))
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", __spreadProps(__spreadValues({ className: (0, import_clsx12.default)(`${PREFIX_CLS}menu`) }, rest), { children: content || children }))
     }
   );
 };
@@ -814,15 +847,15 @@ Menu.displayName = "Menu";
 var Menu_default = Menu;
 // src/components/Tabs/Tab.tsx
-var import_clsx12 = __toESM(require("clsx"));
+var import_clsx13 = __toESM(require("clsx"));
 var import_merge_refs = __toESM(require("merge-refs"));
-var import_react23 = require("react");
+var import_react24 = require("react");
 // ../../../node_modules/react-icons/lib/esm/iconBase.js
-var import_react21 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 // ../../../node_modules/react-icons/lib/esm/iconContext.js
-var import_react20 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 var DefaultContext = {
   color: void 0,
   size: void 0,
@@ -830,7 +863,7 @@ var DefaultContext = {
   style: void 0,
   attr: void 0
 };
-var IconContext = import_react20.default.createContext && import_react20.default.createContext(DefaultContext);
+var IconContext = import_react21.default.createContext && import_react21.default.createContext(DefaultContext);
 // ../../../node_modules/react-icons/lib/esm/iconBase.js
 var __assign = function() {
@@ -859,14 +892,14 @@ var __rest = function(s, e) {
 };
 function Tree2Element(tree) {
   return tree && tree.map(function(node, i) {
-    return import_react21.default.createElement(node.tag, __assign({
+    return import_react22.default.createElement(node.tag, __assign({
       key: i
     }, node.attr), Tree2Element(node.child));
   });
 }
 function GenIcon(data) {
   return function(props) {
-    return import_react21.default.createElement(IconBase, __assign({
+    return import_react22.default.createElement(IconBase, __assign({
       attr: __assign({}, data.attr)
     }, props), Tree2Element(data.child));
   };
@@ -880,7 +913,7 @@ function IconBase(props) {
       className = conf.className;
     if (props.className)
       className = (className ? className + " " : "") + props.className;
-    return import_react21.default.createElement("svg", __assign({
+    return import_react22.default.createElement("svg", __assign({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
@@ -892,9 +925,9 @@ function IconBase(props) {
       height: computedSize,
       width: computedSize,
       xmlns: "http://www.w3.org/2000/svg"
-    }), title && import_react21.default.createElement("title", null, title), props.children);
+    }), title && import_react22.default.createElement("title", null, title), props.children);
   };
-  return IconContext !== void 0 ? import_react21.default.createElement(IconContext.Consumer, null, function(conf) {
+  return IconContext !== void 0 ? import_react22.default.createElement(IconContext.Consumer, null, function(conf) {
     return elem(conf);
   }) : elem(DefaultContext);
 }
@@ -905,10 +938,10 @@ function TbX(props) {
 }
 // src/components/Tabs/TabsContext.ts
-var import_react22 = require("react");
-var TabsContext = (0, import_react22.createContext)(null);
+var import_react23 = require("react");
+var TabsContext = (0, import_react23.createContext)(null);
 var useTabs = () => {
-  const context = (0, import_react22.useContext)(TabsContext);
+  const context = (0, import_react23.useContext)(TabsContext);
   if (!context) {
     throw new Error("`useTabs` must be used within a `<Tabs />`");
   }
@@ -916,8 +949,8 @@ var useTabs = () => {
 };
 // src/components/Tabs/Tab.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var Tab = (0, import_react23.forwardRef)(
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Tab = (0, import_react24.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "div",
@@ -938,8 +971,8 @@ var Tab = (0, import_react23.forwardRef)(
       "disabled",
       "onClick"
     ]);
-    const tabRef = (0, import_react23.useRef)(null);
-    const id = (0, import_react23.useId)();
+    const tabRef = (0, import_react24.useRef)(null);
+    const id = (0, import_react24.useId)();
     const value = valueProp != null ? valueProp : id;
     const _a2 = useTabs(), { onClose, registerItem } = _a2, tabs = __objRest(_a2, ["onClose", "registerItem"]);
     const handleClick = (event) => {
@@ -980,17 +1013,17 @@ var Tab = (0, import_react23.forwardRef)(
       event.stopPropagation();
       onClose(value);
     };
-    (0, import_react23.useEffect)(() => {
+    (0, import_react24.useEffect)(() => {
       registerItem({ value, disabled });
       if (value === tabs.value) {
         tabs.previousTabRef.current = tabRef.current;
       }
     }, [value, tabs.value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       Component,
       __spreadProps(__spreadValues({
         ref: (0, import_merge_refs.default)(tabRef, ref, (el) => tabs.tabRefs.current[value] = el),
-        className: (0, import_clsx12.default)(
+        className: (0, import_clsx13.default)(
           `${PREFIX_CLS}tab`,
           { [`${PREFIX_CLS}tab--selected`]: value === tabs.value, [`${PREFIX_CLS}tab--disabled`]: disabled },
           className
@@ -999,12 +1032,12 @@ var Tab = (0, import_react23.forwardRef)(
         onClick: handleClick
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `${PREFIX_CLS}tab__content`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `${PREFIX_CLS}tab__content`, children: [
             children,
-            closable && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "text", color: "secondary", iconOnly: true, size: "xs", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon_default, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TbX, {}) }) })
+            closable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { variant: "text", color: "secondary", iconOnly: true, size: "xs", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon_default, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TbX, {}) }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `${PREFIX_CLS}tab__indicator` })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: `${PREFIX_CLS}tab__indicator` })
         ]
       })
     );
@@ -1012,8 +1045,8 @@ var Tab = (0, import_react23.forwardRef)(
 );
 // src/components/Tabs/Tabs.tsx
-var import_clsx13 = __toESM(require("clsx"));
-var import_react24 = require("react");
+var import_clsx14 = __toESM(require("clsx"));
+var import_react25 = require("react");
 // src/utils/scroll.ts
 var scrollToItem = (parentElement, currentElement) => {
@@ -1041,7 +1074,7 @@ var scrollToItem = (parentElement, currentElement) => {
 };
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var Tabs = (_a) => {
   var _b = _a, {
     children,
@@ -1060,11 +1093,11 @@ var Tabs = (_a) => {
     "onChange",
     "onClose"
   ]);
-  const tabsRef = (0, import_react24.useRef)(null);
-  const tabRefs = (0, import_react24.useRef)({});
-  const previousTabRef = (0, import_react24.useRef)(null);
-  const [selfValue, setSelfValue] = (0, import_react24.useState)(value != null ? value : defaultValue);
-  const [items, setItems] = (0, import_react24.useState)([]);
+  const tabsRef = (0, import_react25.useRef)(null);
+  const tabRefs = (0, import_react25.useRef)({});
+  const previousTabRef = (0, import_react25.useRef)(null);
+  const [selfValue, setSelfValue] = (0, import_react25.useState)(value != null ? value : defaultValue);
+  const [items, setItems] = (0, import_react25.useState)([]);
   const registerItem = (item) => {
     setItems((prevItems) => {
       const index = prevItems.findIndex((item2) => item2.value);
@@ -1091,71 +1124,71 @@ var Tabs = (_a) => {
   const handleClose = (value2) => {
     onClose == null ? void 0 : onClose(value2);
   };
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (value !== void 0) {
       setSelfValue(value);
       scrollToTab(value);
     }
   }, [value]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (value === void 0) {
       const item = items.find((tab) => !tab.disabled);
       setSelfValue(item == null ? void 0 : item.value);
     }
   }, [value, items]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     TabsContext.Provider,
     {
       value: { previousTabRef, tabRefs, value: selfValue, onChange: handleChange, onClose: handleClose, registerItem },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "div",
           __spreadProps(__spreadValues({
             ref: tabsRef,
-            className: (0, import_clsx13.default)(`${PREFIX_CLS}tabs`, { [`${PREFIX_CLS}tabs--${alignment}`]: alignment }, className)
+            className: (0, import_clsx14.default)(`${PREFIX_CLS}tabs`, { [`${PREFIX_CLS}tabs--${alignment}`]: alignment }, className)
           }, rest), {
             children
           })
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: `${PREFIX_CLS}divider` })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `${PREFIX_CLS}divider` })
       ]
     }
   );
 };
 // src/components/Toolbar/Toolbar.tsx
-var import_clsx14 = __toESM(require("clsx"));
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_clsx15 = __toESM(require("clsx"));
+var import_jsx_runtime18 = require("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__ */ (0, import_jsx_runtime17.jsxs)("div", __spreadProps(__spreadValues({ className: (0, import_clsx14.default)(`${PREFIX_CLS}toolbar`, { [`${PREFIX_CLS}toolbar--${size}`]: size }, className) }, rest), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `${PREFIX_CLS}outline-b` }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: (0, import_clsx14.default)(`${PREFIX_CLS}toolbar__container`), children: [
-      startAction && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_clsx14.default)(`${PREFIX_CLS}toolbar__start-action`), children: startAction }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_clsx14.default)(`${PREFIX_CLS}toolbar__content`), children: title || subtitle ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_clsx14.default)(`${PREFIX_CLS}toolbar__title`), children: title }),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_clsx14.default)(`${PREFIX_CLS}toolbar__subtitle`), children: subtitle })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", __spreadProps(__spreadValues({ className: (0, import_clsx15.default)(`${PREFIX_CLS}toolbar`, { [`${PREFIX_CLS}toolbar--${size}`]: size }, className) }, rest), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `${PREFIX_CLS}outline-b` }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: (0, import_clsx15.default)(`${PREFIX_CLS}toolbar__container`), children: [
+      startAction && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_clsx15.default)(`${PREFIX_CLS}toolbar__start-action`), children: startAction }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_clsx15.default)(`${PREFIX_CLS}toolbar__content`), children: title || subtitle ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_clsx15.default)(`${PREFIX_CLS}toolbar__title`), children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_clsx15.default)(`${PREFIX_CLS}toolbar__subtitle`), children: subtitle })
       ] }) : children }),
-      endAction && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_clsx14.default)(`${PREFIX_CLS}toolbar__trailing`), children: endAction })
+      endAction && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_clsx15.default)(`${PREFIX_CLS}toolbar__trailing`), children: endAction })
     ] })
   ] }));
 };
 var Toolbar_default = Toolbar;
 // src/hooks/useLocalStorage.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 // src/hooks/useEventListener.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 // src/hooks/useIsomorphicLayoutEffect.tsx
-var import_react25 = require("react");
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react25.useLayoutEffect : import_react25.useEffect;
+var import_react26 = require("react");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react26.useLayoutEffect : import_react26.useEffect;
 var useIsomorphicLayoutEffect_default = useIsomorphicLayoutEffect;
 // src/hooks/useEventListener.tsx
 function useEventListener(handler) {
-  const savedHandler = (0, import_react26.useRef)(handler);
+  const savedHandler = (0, import_react27.useRef)(handler);
   useIsomorphicLayoutEffect_default(() => {
     savedHandler.current = handler;
   }, [handler]);
@@ -1164,7 +1197,7 @@ var useEventListener_default = useEventListener;
 // src/hooks/useLocalStorage.tsx
 function useLocalStorage(key, initialValue) {
-  const readValue = (0, import_react27.useCallback)(() => {
+  const readValue = (0, import_react28.useCallback)(() => {
     if (typeof window === "undefined") {
       return initialValue;
     }
@@ -1176,8 +1209,8 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   }, [initialValue, key]);
-  const [storedValue, setStoredValue] = (0, import_react27.useState)(readValue);
-  const setValue = (0, import_react27.useCallback)(
+  const [storedValue, setStoredValue] = (0, import_react28.useState)(readValue);
+  const setValue = (0, import_react28.useCallback)(
     (value) => {
       if (typeof window == "undefined") {
         console.warn(`Tried setting localStorage key \u201C${key}\u201D even though environment is not a client`);
@@ -1193,10 +1226,10 @@ function useLocalStorage(key, initialValue) {
     },
     [key, storedValue]
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     setStoredValue(readValue());
   }, []);
-  const handleStorageChange = (0, import_react27.useCallback)(() => {
+  const handleStorageChange = (0, import_react28.useCallback)(() => {
     setStoredValue(readValue());
   }, [readValue]);
   useEventListener_default("storage", handleStorageChange);
@@ -1213,22 +1246,22 @@ function parseJSON(value) {
 }
 // src/hooks/usePrevious.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var usePrevious = (value) => {
-  const ref = (0, import_react28.useRef)();
-  (0, import_react28.useEffect)(() => {
+  const ref = (0, import_react29.useRef)();
+  (0, import_react29.useEffect)(() => {
     ref.current = value;
   });
   return ref.current;
 };
 // src/hooks/useStep.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var useStep = (maxStep) => {
-  const [currentStep, setCurrentStep] = (0, import_react29.useState)(1);
-  const canGoToNextStep = (0, import_react29.useMemo)(() => currentStep + 1 <= maxStep, [currentStep, maxStep]);
-  const canGoToPrevStep = (0, import_react29.useMemo)(() => currentStep - 1 >= 1, [currentStep]);
-  const setStep = (0, import_react29.useCallback)(
+  const [currentStep, setCurrentStep] = (0, import_react30.useState)(1);
+  const canGoToNextStep = (0, import_react30.useMemo)(() => currentStep + 1 <= maxStep, [currentStep, maxStep]);
+  const canGoToPrevStep = (0, import_react30.useMemo)(() => currentStep - 1 >= 1, [currentStep]);
+  const setStep = (0, import_react30.useCallback)(
     (step) => {
       const newStep = step instanceof Function ? step(currentStep) : step;
       if (newStep >= 1 && newStep <= maxStep) {
@@ -1239,17 +1272,17 @@ var useStep = (maxStep) => {
     },
     [maxStep, currentStep]
   );
-  const goToNextStep = (0, import_react29.useCallback)(() => {
+  const goToNextStep = (0, import_react30.useCallback)(() => {
     if (canGoToNextStep) {
       setCurrentStep((step) => step + 1);
     }
   }, [canGoToNextStep]);
-  const goToPrevStep = (0, import_react29.useCallback)(() => {
+  const goToPrevStep = (0, import_react30.useCallback)(() => {
     if (canGoToPrevStep) {
       setCurrentStep((step) => step - 1);
     }
   }, [canGoToPrevStep]);
-  const reset = (0, import_react29.useCallback)(() => {
+  const reset = (0, import_react30.useCallback)(() => {
     setCurrentStep(1);
   }, []);
   return [
@@ -1274,6 +1307,7 @@ var useStep = (maxStep) => {
   CollapseContent,
   CollapseContext,
   CollapseTrigger,
+  Drawer,
   Icon,
   Menu,
   MenuContext,

package/dist/index.mjs CHANGED Viewed

@@ -149,7 +149,7 @@ var ChevronDownIcon = forwardRef4((props, ref) => {
       ref,
       stroke: "currentColor",
       fill: "currentColor",
-      "stroke-width": "0",
+      strokeWidth: "0",
       viewBox: "0 0 24 24",
       height: "1em",
       width: "1em",
@@ -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,40 +1076,40 @@ 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 })
     ] })
   ] }));
 };
@@ -1087,7 +1119,7 @@ var Toolbar_default = Toolbar;
 import { useCallback, useEffect as useEffect7, useState as useState4 } from "react";
 // src/hooks/useEventListener.tsx
-import { useRef as useRef6 } from "react";
+import { useRef as useRef7 } from "react";
 // src/hooks/useIsomorphicLayoutEffect.tsx
 import { useEffect as useEffect6, useLayoutEffect } from "react";
@@ -1096,7 +1128,7 @@ var useIsomorphicLayoutEffect_default = useIsomorphicLayoutEffect;
 // src/hooks/useEventListener.tsx
 function useEventListener(handler) {
-  const savedHandler = useRef6(handler);
+  const savedHandler = useRef7(handler);
   useIsomorphicLayoutEffect_default(() => {
     savedHandler.current = handler;
   }, [handler]);
@@ -1154,9 +1186,9 @@ function parseJSON(value) {
 }
 // src/hooks/usePrevious.tsx
-import { useEffect as useEffect8, useRef as useRef7 } from "react";
+import { useEffect as useEffect8, useRef as useRef8 } from "react";
 var usePrevious = (value) => {
-  const ref = useRef7();
+  const ref = useRef8();
   useEffect8(() => {
     ref.current = value;
   });
@@ -1214,6 +1246,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,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@unifiedsoftware/react-ui",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [