@unifiedsoftware/react-ui 1.0.10 → 1.0.12

package/dist/index.mjs

@@ -30,21 +30,102 @@ var __objRest = (source, exclude) => {
   return target;
 };
 
-// src/components/Badge/Badge.tsx
-import clsx from "clsx";
+// src/components/Backdrop/Backdrop.tsx
+import clsx2 from "clsx";
+import { forwardRef as forwardRef3, useRef as useRef2 } from "react";
+import { mergeRefs } from "react-merge-refs";
 
 // src/constants/index.ts
 var PREFIX_CLS = "us-";
 
+// src/components/Portal/Portal.tsx
+import { forwardRef, useRef } from "react";
+import { Portal as ReactPortal } from "react-portal";
+import { jsx } from "react/jsx-runtime";
+var Portal = forwardRef(({ children }, ref) => {
+  const portalRef = useRef(null);
+  return /* @__PURE__ */ jsx(ReactPortal, { ref: portalRef, node: document.body, children: /* @__PURE__ */ jsx("div", { className: `${PREFIX_CLS}potal`, children }) });
+});
+var Portal_default = Portal;
+
+// src/components/Transition/Transition.tsx
+import clsx from "clsx";
+import { forwardRef as forwardRef2 } from "react";
+import { CSSTransition } from "react-transition-group";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Transition = forwardRef2((props, ref) => {
+  const {
+    children,
+    className,
+    nodeRef,
+    name,
+    isOpen,
+    enter = 0,
+    leave = 0,
+    mountOnEnter,
+    unmountOnExit,
+    onExited
+  } = props;
+  return /* @__PURE__ */ jsx2(
+    CSSTransition,
+    {
+      nodeRef,
+      in: isOpen,
+      appear: true,
+      timeout: { enter, exit: leave },
+      mountOnEnter,
+      unmountOnExit,
+      classNames: clsx(name, className),
+      onExited,
+      children
+    }
+  );
+});
+var Transition_default = Transition;
+
+// src/components/Backdrop/Backdrop.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var Backdrop = forwardRef3((props, ref) => {
+  const _a = props, { children, className, isOpen, onClose } = _a, rest = __objRest(_a, ["children", "className", "isOpen", "onClose"]);
+  const nodeRef = useRef2(null);
+  return /* @__PURE__ */ jsx3(
+    Transition_default,
+    {
+      nodeRef,
+      isOpen,
+      name: `${PREFIX_CLS}backdrop`,
+      enter: 300,
+      leave: 300,
+      mountOnEnter: true,
+      unmountOnExit: true,
+      children: /* @__PURE__ */ jsx3(Portal_default, { children: /* @__PURE__ */ jsxs(
+        "div",
+        __spreadProps(__spreadValues({
+          ref: mergeRefs([ref, nodeRef]),
+          className: clsx2(`${PREFIX_CLS}backdrop`, className),
+          tabIndex: -1
+        }, rest), {
+          children: [
+            /* @__PURE__ */ jsx3("div", { className: `${PREFIX_CLS}backdrop__overlay`, onClick: onClose }),
+            children
+          ]
+        })
+      ) })
+    }
+  );
+});
+var Backdrop_default = Backdrop;
+
 // src/components/Badge/Badge.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import clsx3 from "clsx";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var Badge = ({ children, placement, content }) => {
-  return /* @__PURE__ */ jsxs("div", { className: clsx(`${PREFIX_CLS}badge-wrapper`), children: [
+  return /* @__PURE__ */ jsxs2("div", { className: clsx3(`${PREFIX_CLS}badge-wrapper`), children: [
     children,
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx4(
       "div",
       {
-        className: clsx(`${PREFIX_CLS}badge`, {
+        className: clsx3(`${PREFIX_CLS}badge`, {
           [`${PREFIX_CLS}badge--${placement}`]: placement
         }),
         children: content
@@ -55,14 +136,14 @@ var Badge = ({ children, placement, content }) => {
 var Badge_default = Badge;
 
 // src/components/Button/Button.tsx
-import clsx3 from "clsx";
-import { forwardRef as forwardRef5 } from "react";
+import clsx5 from "clsx";
+import { forwardRef as forwardRef8 } from "react";
 
 // src/icons/ChevronDownIcon.tsx
-import { forwardRef } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var ChevronDownIcon = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxs2(
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var ChevronDownIcon = forwardRef4((props, ref) => {
+  return /* @__PURE__ */ jsxs3(
     "svg",
     __spreadProps(__spreadValues({
       ref,
@@ -75,8 +156,8 @@ var ChevronDownIcon = forwardRef((props, ref) => {
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ jsx2("path", { fill: "none", d: "M0 0h24v24H0V0z" }),
-        /* @__PURE__ */ jsx2("path", { d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" })
+        /* @__PURE__ */ jsx5("path", { fill: "none", d: "M0 0h24v24H0V0z" }),
+        /* @__PURE__ */ jsx5("path", { d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" })
       ]
     })
   );
@@ -84,24 +165,24 @@ var ChevronDownIcon = forwardRef((props, ref) => {
 var ChevronDownIcon_default = ChevronDownIcon;
 
 // src/icons/ChevronUpIcon.tsx
-import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var ChevronUpIcon = forwardRef2((props, ref) => {
-  return /* @__PURE__ */ jsxs3(
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var ChevronUpIcon = forwardRef5((props, ref) => {
+  return /* @__PURE__ */ jsxs4(
     "svg",
     __spreadProps(__spreadValues({
       ref,
       stroke: "currentColor",
       fill: "currentColor",
-      "stroke-width": "0",
+      strokeWidth: "0",
       viewBox: "0 0 24 24",
       height: "1em",
       width: "1em",
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ jsx3("path", { fill: "none", d: "M0 0h24v24H0z" }),
-        /* @__PURE__ */ jsx3("path", { d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" })
+        /* @__PURE__ */ jsx6("path", { fill: "none", d: "M0 0h24v24H0z" }),
+        /* @__PURE__ */ jsx6("path", { d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" })
       ]
     })
   );
@@ -109,26 +190,26 @@ var ChevronUpIcon = forwardRef2((props, ref) => {
 var ChevronUpIcon_default = ChevronUpIcon;
 
 // src/icons/LoaderIcon.tsx
-import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var LoaderIcon = forwardRef3((props, ref) => {
-  return /* @__PURE__ */ jsxs4(
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var LoaderIcon = forwardRef6((props, ref) => {
+  return /* @__PURE__ */ jsxs5(
     "svg",
     __spreadProps(__spreadValues({
       ref,
       stroke: "currentColor",
       fill: "none",
-      "stroke-width": "2",
+      strokeWidth: "2",
       viewBox: "0 0 24 24",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
       height: "1em",
       width: "1em",
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ jsx4("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
-        /* @__PURE__ */ jsx4("path", { d: "M12 3a9 9 0 1 0 9 9" })
+        /* @__PURE__ */ jsx7("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx7("path", { d: "M12 3a9 9 0 1 0 9 9" })
       ]
     })
   );
@@ -136,21 +217,21 @@ var LoaderIcon = forwardRef3((props, ref) => {
 var LoaderIcon_default = LoaderIcon;
 
 // src/components/Icon/Icon.tsx
-import clsx2 from "clsx";
-import { Children, cloneElement, forwardRef as forwardRef4 } from "react";
-var Icon = forwardRef4(({ children, size }, ref) => {
+import clsx4 from "clsx";
+import { Children, cloneElement, forwardRef as forwardRef7 } from "react";
+var Icon = forwardRef7(({ children, size }, ref) => {
   const child = Children.only(children);
   return cloneElement(child, __spreadProps(__spreadValues({
     ref
   }, child.props), {
-    className: clsx2(`${PREFIX_CLS}icon`, { [`${PREFIX_CLS}font-size-${size}`]: size }, child.props.className)
+    className: clsx4(`${PREFIX_CLS}icon`, { [`${PREFIX_CLS}font-size-${size}`]: size }, child.props.className)
   }));
 });
 var Icon_default = Icon;
 
 // src/components/Button/Button.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var Button = forwardRef5(
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var Button = forwardRef8(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "button",
@@ -179,11 +260,11 @@ var Button = forwardRef5(
       "loading",
       "disabled"
     ]);
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(
       Component,
       __spreadProps(__spreadValues({
         ref,
-        className: clsx3(
+        className: clsx5(
           `${PREFIX_CLS}button`,
           {
             [`${PREFIX_CLS}button--${variant}`]: variant,
@@ -198,10 +279,10 @@ var Button = forwardRef5(
         disabled
       }, rest), {
         children: [
-          /* @__PURE__ */ jsx5("div", { className: `${PREFIX_CLS}overlay` }),
-          /* @__PURE__ */ jsx5("div", { className: `${PREFIX_CLS}outline` }),
-          loading ? /* @__PURE__ */ jsx5(Icon_default, { children: /* @__PURE__ */ jsx5(LoaderIcon_default, { className: `${PREFIX_CLS}animation-spin` }) }) : startContent,
-          /* @__PURE__ */ jsx5("div", { className: `${PREFIX_CLS}button__content`, children }),
+          /* @__PURE__ */ jsx8("div", { className: `${PREFIX_CLS}overlay` }),
+          /* @__PURE__ */ jsx8("div", { className: `${PREFIX_CLS}outline` }),
+          loading ? /* @__PURE__ */ jsx8(Icon_default, { children: /* @__PURE__ */ jsx8(LoaderIcon_default, { className: `${PREFIX_CLS}animation-spin` }) }) : startContent,
+          /* @__PURE__ */ jsx8("div", { className: `${PREFIX_CLS}button__content`, children }),
           endContent
         ]
       })
@@ -210,17 +291,17 @@ var Button = forwardRef5(
 );
 
 // src/components/Chip/Chip.tsx
-import clsx4 from "clsx";
-import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-var Chip = forwardRef6(
+import clsx6 from "clsx";
+import { forwardRef as forwardRef9 } from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var Chip = forwardRef9(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", children, className, variant, color, size } = _b, rest = __objRest(_b, ["as", "children", "className", "variant", "color", "size"]);
-    return /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsxs7(
       Component,
       __spreadProps(__spreadValues({
         ref,
-        className: clsx4(
+        className: clsx6(
           `${PREFIX_CLS}chip`,
           {
             [`${PREFIX_CLS}chip--${variant}`]: variant,
@@ -231,8 +312,8 @@ var Chip = forwardRef6(
         )
       }, rest), {
         children: [
-          /* @__PURE__ */ jsx6("div", { className: clsx4(`${PREFIX_CLS}overlay`) }),
-          /* @__PURE__ */ jsx6("div", { className: `${PREFIX_CLS}outline` }),
+          /* @__PURE__ */ jsx9("div", { className: clsx6(`${PREFIX_CLS}overlay`) }),
+          /* @__PURE__ */ jsx9("div", { className: `${PREFIX_CLS}outline` }),
           children
         ]
       })
@@ -242,7 +323,7 @@ var Chip = forwardRef6(
 var Chip_default = Chip;
 
 // src/components/Collapse/Collapse.tsx
-import { Children as Children2, useEffect, useRef, useState } from "react";
+import { Children as Children2, useEffect, useRef as useRef3, useState } from "react";
 
 // src/components/Collapse/CollapseContext.tsx
 import { createContext, useContext } from "react";
@@ -257,9 +338,9 @@ var useCollapse = () => {
 var CollapseContext_default = CollapseContext;
 
 // src/components/Collapse/Collapse.tsx
-import { jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsxs as jsxs8 } from "react/jsx-runtime";
 var Collapse = ({ children, isOpen, onOpen, onClose, onToggle }) => {
-  const collapseRef = useRef(null);
+  const collapseRef = useRef3(null);
   const [selfIsOpen, setSelfIsOpen] = useState(isOpen != null ? isOpen : false);
   const [heightAuto, setHeightAuto] = useState(false);
   const [trigger, content] = Children2.toArray(children);
@@ -287,7 +368,7 @@ var Collapse = ({ children, isOpen, onOpen, onClose, onToggle }) => {
       }
     }, 100);
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     CollapseContext_default.Provider,
     {
       value: {
@@ -308,9 +389,9 @@ var Collapse = ({ children, isOpen, onOpen, onClose, onToggle }) => {
 var Collapse_default = Collapse;
 
 // src/components/Collapse/CollapseContent.tsx
-import clsx5 from "clsx";
-import { Children as Children3, cloneElement as cloneElement2, forwardRef as forwardRef7 } from "react";
-var CollapseContent = forwardRef7(({ children }, ref) => {
+import clsx7 from "clsx";
+import { Children as Children3, cloneElement as cloneElement2, forwardRef as forwardRef10 } from "react";
+var CollapseContent = forwardRef10(({ children }, ref) => {
   var _a, _b;
   const { collapseRef, isOpen, heightAuto } = useCollapse();
   const child = Children3.only(children);
@@ -324,14 +405,14 @@ var CollapseContent = forwardRef7(({ children }, ref) => {
     style: __spreadProps(__spreadValues({}, child.props.style), {
       height: isOpen && heightAuto ? "auto" : isOpen ? (_a = collapseRef.current) == null ? void 0 : _a.scrollHeight : !isOpen && heightAuto ? (_b = collapseRef.current) == null ? void 0 : _b.scrollHeight : 0
     }),
-    className: clsx5(`${PREFIX_CLS}collapse`, child.props.className)
+    className: clsx7(`${PREFIX_CLS}collapse`, child.props.className)
   }));
 });
 var CollapseContent_default = CollapseContent;
 
 // src/components/Collapse/CollapseTrigger.tsx
-import { Children as Children4, cloneElement as cloneElement3, forwardRef as forwardRef8 } from "react";
-var CollapseTrigger = forwardRef8(({ children }, ref) => {
+import { Children as Children4, cloneElement as cloneElement3, forwardRef as forwardRef11 } from "react";
+var CollapseTrigger = forwardRef11(({ children }, ref) => {
   const { collapseRef, onToggle } = useCollapse();
   const child = Children4.only(children);
   return cloneElement3(child, __spreadValues({
@@ -349,7 +430,7 @@ var CollapseTrigger = forwardRef8(({ children }, ref) => {
 var CollapseTrigger_default = CollapseTrigger;
 
 // src/components/Menu/Menu.tsx
-import clsx9 from "clsx";
+import clsx11 from "clsx";
 import { useEffect as useEffect3, useMemo as useMemo3, useState as useState2 } from "react";
 
 // src/components/Menu/MenuContext.tsx
@@ -365,12 +446,12 @@ var useMenu = () => {
 var MenuContext_default = MenuContext;
 
 // src/components/Menu/MenuGroup.tsx
-import clsx8 from "clsx";
+import clsx10 from "clsx";
 import { useMemo as useMemo2 } from "react";
 
 // src/components/Menu/MenuItem.tsx
-import clsx6 from "clsx";
-import { forwardRef as forwardRef9, useContext as useContext4, useEffect as useEffect2 } from "react";
+import clsx8 from "clsx";
+import { forwardRef as forwardRef12, useContext as useContext4, useEffect as useEffect2 } from "react";
 
 // src/components/Menu/MenuValueContext.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
@@ -385,8 +466,8 @@ var useMenuItemValue = () => {
 var MenuValueContext_default = MenuValueContext;
 
 // src/components/Menu/MenuItem.tsx
-import { jsx as jsx7, jsxs as jsxs8 } from "react/jsx-runtime";
-var MenuItem = forwardRef9((props, ref) => {
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var MenuItem = forwardRef12((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);
@@ -404,11 +485,11 @@ var MenuItem = forwardRef9((props, ref) => {
       onChange(mergedValues);
     }
   }, [value, originalValue, navMode]);
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     Component,
     __spreadProps(__spreadValues({
       ref,
-      className: clsx6(
+      className: clsx8(
         `${PREFIX_CLS}menu-item`,
         {
           [`${PREFIX_CLS}menu-item--selected`]: menuValue.includes(value),
@@ -422,9 +503,9 @@ var MenuItem = forwardRef9((props, ref) => {
       onClick: handleClick
     }, rest), {
       children: [
-        /* @__PURE__ */ jsx7("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ jsx7("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
-        icon && /* @__PURE__ */ jsx7("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
-        /* @__PURE__ */ jsx7("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ jsx7("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) })
+        /* @__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 }) })
       ]
     })
   );
@@ -433,7 +514,7 @@ MenuItem.displayName = "MenuItem";
 var MenuItem_default = MenuItem;
 
 // src/components/Menu/MenuSubmenu.tsx
-import clsx7 from "clsx";
+import clsx9 from "clsx";
 import { useContext as useContext5, useMemo } from "react";
 
 // src/components/Menu/utils.ts
@@ -460,7 +541,7 @@ var addOrRemoveValueInArray = (array, value) => {
 };
 
 // src/components/Menu/MenuSubmenu.tsx
-import { jsx as jsx8, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var MenuSubmenu = (_a) => {
   var _b = _a, {
     children,
@@ -490,7 +571,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__ */ jsx8(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "submenu" ? /* @__PURE__ */ jsx8(MenuSubmenu, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "group" ? /* @__PURE__ */ jsx8(MenuGroup_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : /* @__PURE__ */ jsx8(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index);
+      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);
     });
   }, [items]);
   const handleClick = (event) => {
@@ -508,11 +589,11 @@ var MenuSubmenu = (_a) => {
     }
     onClick == null ? void 0 : onClick(event);
   };
-  return /* @__PURE__ */ jsx8(MenuValueContext_default.Provider, { value: mergedValues, children: /* @__PURE__ */ jsx8("div", { className: clsx7(`${PREFIX_CLS}menu-submenu`), children: /* @__PURE__ */ jsxs9(Collapse_default, { isOpen, children: [
-    /* @__PURE__ */ jsx8(CollapseTrigger_default, { children: /* @__PURE__ */ jsxs9(
+  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(
       "div",
       __spreadProps(__spreadValues({
-        className: clsx7(
+        className: clsx9(
           `${PREFIX_CLS}menu-item`,
           {
             [`${PREFIX_CLS}menu-item--selected`]: menuValue.includes(value) || items && mergedValues.includes(menuValue)
@@ -525,17 +606,17 @@ var MenuSubmenu = (_a) => {
         onClick: handleClick
       }, rest), {
         children: [
-          /* @__PURE__ */ jsx8("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ jsx8("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
-          icon && /* @__PURE__ */ jsx8("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
-          /* @__PURE__ */ jsx8("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ jsx8("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) }),
-          /* @__PURE__ */ jsx8("div", { className: `${PREFIX_CLS}menu-item__icon`, children: isOpen ? /* @__PURE__ */ jsx8(ChevronUpIcon_default, { className: `${PREFIX_CLS}icon` }) : /* @__PURE__ */ jsx8(ChevronDownIcon_default, { className: `${PREFIX_CLS}icon` }) })
+          /* @__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__ */ jsx8(CollapseContent_default, { children: /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx11(CollapseContent_default, { children: /* @__PURE__ */ jsx11(
       "ul",
       {
-        className: clsx7(`${PREFIX_CLS}menu`, {
+        className: clsx9(`${PREFIX_CLS}menu`, {
           [`${PREFIX_CLS}menu-open`]: !isOpen
         }),
         children: content || children
@@ -546,7 +627,7 @@ var MenuSubmenu = (_a) => {
 var MenuSubmenu_default = MenuSubmenu;
 
 // src/components/Menu/MenuGroup.tsx
-import { Fragment, jsx as jsx9, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var MenuGroup = (_a) => {
   var _b = _a, {
     children,
@@ -568,21 +649,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__ */ jsx9(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ jsx9(MenuSubmenu_default, __spreadValues({}, item), index) : /* @__PURE__ */ jsx9(MenuItem_default, __spreadValues({}, item), index);
+      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);
     });
   }, [items]);
-  return /* @__PURE__ */ jsxs10(Fragment, { children: [
-    /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(Fragment, { children: [
+    /* @__PURE__ */ jsxs11(
       "div",
       __spreadProps(__spreadValues({
-        className: clsx8(`${PREFIX_CLS}menu-group`, className),
+        className: clsx10(`${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__ */ jsx9("div", { className: `${PREFIX_CLS}menu-group__icon`, children: icon }),
-          /* @__PURE__ */ jsx9("div", { className: `${PREFIX_CLS}menu-group__content`, children: /* @__PURE__ */ jsx9("span", { className: `${PREFIX_CLS}menu-group__title`, children: title }) })
+          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 }) })
         ]
       })
     ),
@@ -592,7 +673,7 @@ var MenuGroup = (_a) => {
 var MenuGroup_default = MenuGroup;
 
 // src/components/Menu/Menu.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var Menu = (_a) => {
   var _b = _a, {
     children,
@@ -623,7 +704,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__ */ jsx10(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ jsx10(MenuSubmenu_default, __spreadValues({}, item), index) : type === "group" ? /* @__PURE__ */ jsx10(MenuGroup_default, __spreadValues({}, item), index) : /* @__PURE__ */ jsx10(MenuItem_default, __spreadValues({}, item), index);
+      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);
     });
   }, [items]);
   const handleChange = (value) => {
@@ -653,7 +734,7 @@ var Menu = (_a) => {
       setSelfOpenValues(openValuesProp);
     }
   }, [openValuesProp]);
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx13(
     MenuContext_default.Provider,
     {
       value: {
@@ -666,7 +747,7 @@ var Menu = (_a) => {
         onChange: handleChange,
         onItemSelect: handleItemSelect
       },
-      children: /* @__PURE__ */ jsx10("div", __spreadProps(__spreadValues({ className: clsx9(`${PREFIX_CLS}menu`) }, rest), { children: content || children }))
+      children: /* @__PURE__ */ jsx13("div", __spreadProps(__spreadValues({ className: clsx11(`${PREFIX_CLS}menu`) }, rest), { children: content || children }))
     }
   );
 };
@@ -674,9 +755,9 @@ Menu.displayName = "Menu";
 var Menu_default = Menu;
 
 // src/components/Tabs/Tab.tsx
-import clsx10 from "clsx";
-import mergeRefs from "merge-refs";
-import { forwardRef as forwardRef10, useEffect as useEffect4, useId, useRef as useRef2 } from "react";
+import clsx12 from "clsx";
+import mergeRefs2 from "merge-refs";
+import { forwardRef as forwardRef13, useEffect as useEffect4, useId, useRef as useRef4 } from "react";
 
 // ../../../node_modules/react-icons/lib/esm/iconBase.js
 import React3 from "react";
@@ -776,8 +857,8 @@ var useTabs = () => {
 };
 
 // src/components/Tabs/Tab.tsx
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
-var Tab = forwardRef10(
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var Tab = forwardRef13(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "div",
@@ -798,7 +879,7 @@ var Tab = forwardRef10(
       "disabled",
       "onClick"
     ]);
-    const tabRef = useRef2(null);
+    const tabRef = useRef4(null);
     const id = useId();
     const value = valueProp != null ? valueProp : id;
     const _a2 = useTabs(), { onClose, registerItem } = _a2, tabs = __objRest(_a2, ["onClose", "registerItem"]);
@@ -846,11 +927,11 @@ var Tab = forwardRef10(
         tabs.previousTabRef.current = tabRef.current;
       }
     }, [value, tabs.value]);
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs12(
       Component,
       __spreadProps(__spreadValues({
-        ref: mergeRefs(tabRef, ref, (el) => tabs.tabRefs.current[value] = el),
-        className: clsx10(
+        ref: mergeRefs2(tabRef, ref, (el) => tabs.tabRefs.current[value] = el),
+        className: clsx12(
           `${PREFIX_CLS}tab`,
           { [`${PREFIX_CLS}tab--selected`]: value === tabs.value, [`${PREFIX_CLS}tab--disabled`]: disabled },
           className
@@ -859,12 +940,12 @@ var Tab = forwardRef10(
         onClick: handleClick
       }, rest), {
         children: [
-          /* @__PURE__ */ jsx11("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ jsx11("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
-          /* @__PURE__ */ jsxs11("div", { className: `${PREFIX_CLS}tab__content`, 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: [
             children,
-            closable && /* @__PURE__ */ jsx11(Button, { variant: "text", color: "secondary", iconOnly: true, size: "xs", onClick: handleClose, children: /* @__PURE__ */ jsx11(Icon_default, { children: /* @__PURE__ */ jsx11(TbX, {}) }) })
+            closable && /* @__PURE__ */ jsx14(Button, { variant: "text", color: "secondary", iconOnly: true, size: "xs", onClick: handleClose, children: /* @__PURE__ */ jsx14(Icon_default, { children: /* @__PURE__ */ jsx14(TbX, {}) }) })
           ] }),
-          /* @__PURE__ */ jsx11("div", { className: `${PREFIX_CLS}tab__indicator` })
+          /* @__PURE__ */ jsx14("div", { className: `${PREFIX_CLS}tab__indicator` })
         ]
       })
     );
@@ -872,8 +953,8 @@ var Tab = forwardRef10(
 );
 
 // src/components/Tabs/Tabs.tsx
-import clsx11 from "clsx";
-import { useEffect as useEffect5, useRef as useRef3, useState as useState3 } from "react";
+import clsx13 from "clsx";
+import { useEffect as useEffect5, useRef as useRef5, useState as useState3 } from "react";
 
 // src/utils/scroll.ts
 var scrollToItem = (parentElement, currentElement) => {
@@ -901,7 +982,7 @@ var scrollToItem = (parentElement, currentElement) => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 var Tabs = (_a) => {
   var _b = _a, {
     children,
@@ -920,9 +1001,9 @@ var Tabs = (_a) => {
     "onChange",
     "onClose"
   ]);
-  const tabsRef = useRef3(null);
-  const tabRefs = useRef3({});
-  const previousTabRef = useRef3(null);
+  const tabsRef = useRef5(null);
+  const tabRefs = useRef5({});
+  const previousTabRef = useRef5(null);
   const [selfValue, setSelfValue] = useState3(value != null ? value : defaultValue);
   const [items, setItems] = useState3([]);
   const registerItem = (item) => {
@@ -963,31 +1044,50 @@ var Tabs = (_a) => {
       setSelfValue(item == null ? void 0 : item.value);
     }
   }, [value, items]);
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     TabsContext.Provider,
     {
       value: { previousTabRef, tabRefs, value: selfValue, onChange: handleChange, onClose: handleClose, registerItem },
       children: [
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx15(
           "div",
           __spreadProps(__spreadValues({
             ref: tabsRef,
-            className: clsx11(`${PREFIX_CLS}tabs`, { [`${PREFIX_CLS}tabs--${alignment}`]: alignment }, className)
+            className: clsx13(`${PREFIX_CLS}tabs`, { [`${PREFIX_CLS}tabs--${alignment}`]: alignment }, className)
           }, rest), {
             children
           })
         ),
-        /* @__PURE__ */ jsx12("div", { className: `${PREFIX_CLS}divider` })
+        /* @__PURE__ */ jsx15("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";
+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 })
+      ] }) : children }),
+      endAction && /* @__PURE__ */ jsx16("div", { className: clsx14(`${PREFIX_CLS}toolbar__trailing`), children: endAction })
+    ] })
+  ] }));
+};
+var Toolbar_default = Toolbar;
+
 // src/hooks/useLocalStorage.tsx
 import { useCallback, useEffect as useEffect7, useState as useState4 } from "react";
 
 // src/hooks/useEventListener.tsx
-import { useRef as useRef4 } from "react";
+import { useRef as useRef6 } from "react";
 
 // src/hooks/useIsomorphicLayoutEffect.tsx
 import { useEffect as useEffect6, useLayoutEffect } from "react";
@@ -996,7 +1096,7 @@ var useIsomorphicLayoutEffect_default = useIsomorphicLayoutEffect;
 
 // src/hooks/useEventListener.tsx
 function useEventListener(handler) {
-  const savedHandler = useRef4(handler);
+  const savedHandler = useRef6(handler);
   useIsomorphicLayoutEffect_default(() => {
     savedHandler.current = handler;
   }, [handler]);
@@ -1054,9 +1154,9 @@ function parseJSON(value) {
 }
 
 // src/hooks/usePrevious.tsx
-import { useEffect as useEffect8, useRef as useRef5 } from "react";
+import { useEffect as useEffect8, useRef as useRef7 } from "react";
 var usePrevious = (value) => {
-  const ref = useRef5();
+  const ref = useRef7();
   useEffect8(() => {
     ref.current = value;
   });
@@ -1106,6 +1206,7 @@ var useStep = (maxStep) => {
   ];
 };
 export {
+  Backdrop_default as Backdrop,
   Badge_default as Badge,
   Button,
   Chip_default as Chip,
@@ -1120,8 +1221,11 @@ export {
   MenuItem_default as MenuItem,
   MenuSubmenu_default as MenuSubmenu,
   MenuValueContext_default as MenuValueContext,
+  Portal_default as Portal,
   Tab,
   Tabs,
+  Toolbar_default as Toolbar,
+  Transition_default as Transition,
   getOpenValuesByPathname,
   useCollapse,
   useLocalStorage,