@unifiedsoftware/react-ui 1.0.10 → 1.0.12

package/dist/index.js

@@ -59,6 +59,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Backdrop: () => Backdrop_default,
   Badge: () => Badge_default,
   Button: () => Button,
   Chip: () => Chip_default,
@@ -73,8 +74,11 @@ __export(src_exports, {
   MenuItem: () => MenuItem_default,
   MenuSubmenu: () => MenuSubmenu_default,
   MenuValueContext: () => MenuValueContext_default,
+  Portal: () => Portal_default,
   Tab: () => Tab,
   Tabs: () => Tabs,
+  Toolbar: () => Toolbar_default,
+  Transition: () => Transition_default,
   getOpenValuesByPathname: () => getOpenValuesByPathname,
   useCollapse: () => useCollapse,
   useLocalStorage: () => useLocalStorage,
@@ -85,21 +89,102 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/components/Badge/Badge.tsx
-var import_clsx = __toESM(require("clsx"));
+// src/components/Backdrop/Backdrop.tsx
+var import_clsx2 = __toESM(require("clsx"));
+var import_react3 = require("react");
+var import_react_merge_refs = require("react-merge-refs");
 
 // src/constants/index.ts
 var PREFIX_CLS = "us-";
 
-// src/components/Badge/Badge.tsx
+// src/components/Portal/Portal.tsx
+var import_react = require("react");
+var import_react_portal = require("react-portal");
 var import_jsx_runtime = require("react/jsx-runtime");
+var Portal = (0, import_react.forwardRef)(({ children }, ref) => {
+  const portalRef = (0, import_react.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_portal.Portal, { ref: portalRef, node: document.body, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${PREFIX_CLS}potal`, children }) });
+});
+var Portal_default = Portal;
+
+// src/components/Transition/Transition.tsx
+var import_clsx = __toESM(require("clsx"));
+var import_react2 = require("react");
+var import_react_transition_group = require("react-transition-group");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Transition = (0, import_react2.forwardRef)((props, ref) => {
+  const {
+    children,
+    className,
+    nodeRef,
+    name,
+    isOpen,
+    enter = 0,
+    leave = 0,
+    mountOnEnter,
+    unmountOnExit,
+    onExited
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_transition_group.CSSTransition,
+    {
+      nodeRef,
+      in: isOpen,
+      appear: true,
+      timeout: { enter, exit: leave },
+      mountOnEnter,
+      unmountOnExit,
+      classNames: (0, import_clsx.default)(name, className),
+      onExited,
+      children
+    }
+  );
+});
+var Transition_default = Transition;
+
+// src/components/Backdrop/Backdrop.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Backdrop = (0, import_react3.forwardRef)((props, ref) => {
+  const _a = props, { children, className, isOpen, onClose } = _a, rest = __objRest(_a, ["children", "className", "isOpen", "onClose"]);
+  const nodeRef = (0, import_react3.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Transition_default,
+    {
+      nodeRef,
+      isOpen,
+      name: `${PREFIX_CLS}backdrop`,
+      enter: 300,
+      leave: 300,
+      mountOnEnter: true,
+      unmountOnExit: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        __spreadProps(__spreadValues({
+          ref: (0, import_react_merge_refs.mergeRefs)([ref, nodeRef]),
+          className: (0, import_clsx2.default)(`${PREFIX_CLS}backdrop`, className),
+          tabIndex: -1
+        }, rest), {
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `${PREFIX_CLS}backdrop__overlay`, onClick: onClose }),
+            children
+          ]
+        })
+      ) })
+    }
+  );
+});
+var Backdrop_default = Backdrop;
+
+// src/components/Badge/Badge.tsx
+var import_clsx3 = __toESM(require("clsx"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Badge = ({ children, placement, content }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_clsx.default)(`${PREFIX_CLS}badge-wrapper`), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx3.default)(`${PREFIX_CLS}badge-wrapper`), children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "div",
       {
-        className: (0, import_clsx.default)(`${PREFIX_CLS}badge`, {
+        className: (0, import_clsx3.default)(`${PREFIX_CLS}badge`, {
           [`${PREFIX_CLS}badge--${placement}`]: placement
         }),
         children: content
@@ -110,14 +195,14 @@ var Badge = ({ children, placement, content }) => {
 var Badge_default = Badge;
 
 // src/components/Button/Button.tsx
-var import_clsx3 = __toESM(require("clsx"));
-var import_react5 = require("react");
+var import_clsx5 = __toESM(require("clsx"));
+var import_react8 = require("react");
 
 // src/icons/ChevronDownIcon.tsx
-var import_react = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ChevronDownIcon = (0, import_react.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+var import_react4 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ChevronDownIcon = (0, import_react4.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
       ref,
@@ -130,8 +215,8 @@ var ChevronDownIcon = (0, import_react.forwardRef)((props, ref) => {
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "none", d: "M0 0h24v24H0V0z" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { fill: "none", d: "M0 0h24v24H0V0z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" })
       ]
     })
   );
@@ -139,24 +224,24 @@ var ChevronDownIcon = (0, import_react.forwardRef)((props, ref) => {
 var ChevronDownIcon_default = ChevronDownIcon;
 
 // src/icons/ChevronUpIcon.tsx
-var import_react2 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var ChevronUpIcon = (0, import_react2.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+var import_react5 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ChevronUpIcon = (0, import_react5.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "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__ */ (0, import_jsx_runtime3.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" })
       ]
     })
   );
@@ -164,26 +249,26 @@ var ChevronUpIcon = (0, import_react2.forwardRef)((props, ref) => {
 var ChevronUpIcon_default = ChevronUpIcon;
 
 // src/icons/LoaderIcon.tsx
-var import_react3 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var LoaderIcon = (0, import_react3.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+var import_react6 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var LoaderIcon = (0, import_react6.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "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__ */ (0, import_jsx_runtime4.jsx)("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 3a9 9 0 1 0 9 9" })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 3a9 9 0 1 0 9 9" })
       ]
     })
   );
@@ -191,21 +276,21 @@ var LoaderIcon = (0, import_react3.forwardRef)((props, ref) => {
 var LoaderIcon_default = LoaderIcon;
 
 // src/components/Icon/Icon.tsx
-var import_clsx2 = __toESM(require("clsx"));
-var import_react4 = require("react");
-var Icon = (0, import_react4.forwardRef)(({ children, size }, ref) => {
-  const child = import_react4.Children.only(children);
-  return (0, import_react4.cloneElement)(child, __spreadProps(__spreadValues({
+var import_clsx4 = __toESM(require("clsx"));
+var import_react7 = require("react");
+var Icon = (0, import_react7.forwardRef)(({ children, size }, ref) => {
+  const child = import_react7.Children.only(children);
+  return (0, import_react7.cloneElement)(child, __spreadProps(__spreadValues({
     ref
   }, child.props), {
-    className: (0, import_clsx2.default)(`${PREFIX_CLS}icon`, { [`${PREFIX_CLS}font-size-${size}`]: size }, child.props.className)
+    className: (0, import_clsx4.default)(`${PREFIX_CLS}icon`, { [`${PREFIX_CLS}font-size-${size}`]: size }, child.props.className)
   }));
 });
 var Icon_default = Icon;
 
 // src/components/Button/Button.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Button = (0, import_react5.forwardRef)(
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Button = (0, import_react8.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "button",
@@ -234,11 +319,11 @@ var Button = (0, import_react5.forwardRef)(
       "loading",
       "disabled"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       Component,
       __spreadProps(__spreadValues({
         ref,
-        className: (0, import_clsx3.default)(
+        className: (0, import_clsx5.default)(
           `${PREFIX_CLS}button`,
           {
             [`${PREFIX_CLS}button--${variant}`]: variant,
@@ -253,10 +338,10 @@ var Button = (0, import_react5.forwardRef)(
         disabled
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `${PREFIX_CLS}overlay` }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `${PREFIX_CLS}outline` }),
-          loading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon_default, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LoaderIcon_default, { className: `${PREFIX_CLS}animation-spin` }) }) : startContent,
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `${PREFIX_CLS}button__content`, children }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${PREFIX_CLS}overlay` }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${PREFIX_CLS}outline` }),
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon_default, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LoaderIcon_default, { className: `${PREFIX_CLS}animation-spin` }) }) : startContent,
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${PREFIX_CLS}button__content`, children }),
           endContent
         ]
       })
@@ -265,17 +350,17 @@ var Button = (0, import_react5.forwardRef)(
 );
 
 // src/components/Chip/Chip.tsx
-var import_clsx4 = __toESM(require("clsx"));
-var import_react6 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Chip = (0, import_react6.forwardRef)(
+var import_clsx6 = __toESM(require("clsx"));
+var import_react9 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Chip = (0, import_react9.forwardRef)(
   (_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__ */ (0, import_jsx_runtime6.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       Component,
       __spreadProps(__spreadValues({
         ref,
-        className: (0, import_clsx4.default)(
+        className: (0, import_clsx6.default)(
           `${PREFIX_CLS}chip`,
           {
             [`${PREFIX_CLS}chip--${variant}`]: variant,
@@ -286,8 +371,8 @@ var Chip = (0, import_react6.forwardRef)(
         )
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_clsx4.default)(`${PREFIX_CLS}overlay`) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `${PREFIX_CLS}outline` }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_clsx6.default)(`${PREFIX_CLS}overlay`) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${PREFIX_CLS}outline` }),
           children
         ]
       })
@@ -297,13 +382,13 @@ var Chip = (0, import_react6.forwardRef)(
 var Chip_default = Chip;
 
 // src/components/Collapse/Collapse.tsx
-var import_react8 = require("react");
+var import_react11 = require("react");
 
 // src/components/Collapse/CollapseContext.tsx
-var import_react7 = require("react");
-var CollapseContext = (0, import_react7.createContext)(null);
+var import_react10 = require("react");
+var CollapseContext = (0, import_react10.createContext)(null);
 var useCollapse = () => {
-  const context = (0, import_react7.useContext)(CollapseContext);
+  const context = (0, import_react10.useContext)(CollapseContext);
   if (!context) {
     throw new Error("`useCollapse` must be used within a `<Collapse />`");
   }
@@ -312,12 +397,12 @@ var useCollapse = () => {
 var CollapseContext_default = CollapseContext;
 
 // src/components/Collapse/Collapse.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var Collapse = ({ children, isOpen, onOpen, onClose, onToggle }) => {
-  const collapseRef = (0, import_react8.useRef)(null);
-  const [selfIsOpen, setSelfIsOpen] = (0, import_react8.useState)(isOpen != null ? isOpen : false);
-  const [heightAuto, setHeightAuto] = (0, import_react8.useState)(false);
-  const [trigger, content] = import_react8.Children.toArray(children);
+  const collapseRef = (0, import_react11.useRef)(null);
+  const [selfIsOpen, setSelfIsOpen] = (0, import_react11.useState)(isOpen != null ? isOpen : false);
+  const [heightAuto, setHeightAuto] = (0, import_react11.useState)(false);
+  const [trigger, content] = import_react11.Children.toArray(children);
   const handleOpen = () => {
     setSelfIsOpen(true);
     onOpen == null ? void 0 : onOpen();
@@ -330,7 +415,7 @@ var Collapse = ({ children, isOpen, onOpen, onClose, onToggle }) => {
     setSelfIsOpen((prevState) => !prevState);
     onToggle == null ? void 0 : onToggle();
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (isOpen !== void 0) {
       setSelfIsOpen(isOpen);
     }
@@ -342,7 +427,7 @@ var Collapse = ({ children, isOpen, onOpen, onClose, onToggle }) => {
       }
     }, 100);
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     CollapseContext_default.Provider,
     {
       value: {
@@ -363,13 +448,13 @@ var Collapse = ({ children, isOpen, onOpen, onClose, onToggle }) => {
 var Collapse_default = Collapse;
 
 // src/components/Collapse/CollapseContent.tsx
-var import_clsx5 = __toESM(require("clsx"));
-var import_react9 = require("react");
-var CollapseContent = (0, import_react9.forwardRef)(({ children }, ref) => {
+var import_clsx7 = __toESM(require("clsx"));
+var import_react12 = require("react");
+var CollapseContent = (0, import_react12.forwardRef)(({ children }, ref) => {
   var _a, _b;
   const { collapseRef, isOpen, heightAuto } = useCollapse();
-  const child = import_react9.Children.only(children);
-  return (0, import_react9.cloneElement)(child, __spreadProps(__spreadValues({}, child.props), {
+  const child = import_react12.Children.only(children);
+  return (0, import_react12.cloneElement)(child, __spreadProps(__spreadValues({}, child.props), {
     ref: (node) => {
       collapseRef.current = node;
       if (ref !== null) {
@@ -379,17 +464,17 @@ var CollapseContent = (0, import_react9.forwardRef)(({ 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: (0, import_clsx5.default)(`${PREFIX_CLS}collapse`, child.props.className)
+    className: (0, import_clsx7.default)(`${PREFIX_CLS}collapse`, child.props.className)
   }));
 });
 var CollapseContent_default = CollapseContent;
 
 // src/components/Collapse/CollapseTrigger.tsx
-var import_react10 = require("react");
-var CollapseTrigger = (0, import_react10.forwardRef)(({ children }, ref) => {
+var import_react13 = require("react");
+var CollapseTrigger = (0, import_react13.forwardRef)(({ children }, ref) => {
   const { collapseRef, onToggle } = useCollapse();
-  const child = import_react10.Children.only(children);
-  return (0, import_react10.cloneElement)(child, __spreadValues({
+  const child = import_react13.Children.only(children);
+  return (0, import_react13.cloneElement)(child, __spreadValues({
     ref,
     onClick: (event) => {
       var _a, _b;
@@ -404,14 +489,14 @@ var CollapseTrigger = (0, import_react10.forwardRef)(({ children }, ref) => {
 var CollapseTrigger_default = CollapseTrigger;
 
 // src/components/Menu/Menu.tsx
-var import_clsx9 = __toESM(require("clsx"));
-var import_react16 = require("react");
+var import_clsx11 = __toESM(require("clsx"));
+var import_react19 = require("react");
 
 // src/components/Menu/MenuContext.tsx
-var import_react11 = require("react");
-var MenuContext = (0, import_react11.createContext)(null);
+var import_react14 = require("react");
+var MenuContext = (0, import_react14.createContext)(null);
 var useMenu = () => {
-  const context = (0, import_react11.useContext)(MenuContext);
+  const context = (0, import_react14.useContext)(MenuContext);
   if (!context) {
     throw new Error("`useMenu` must be used within a `<Menu />`");
   }
@@ -420,18 +505,18 @@ var useMenu = () => {
 var MenuContext_default = MenuContext;
 
 // src/components/Menu/MenuGroup.tsx
-var import_clsx8 = __toESM(require("clsx"));
-var import_react15 = require("react");
+var import_clsx10 = __toESM(require("clsx"));
+var import_react18 = require("react");
 
 // src/components/Menu/MenuItem.tsx
-var import_clsx6 = __toESM(require("clsx"));
-var import_react13 = require("react");
+var import_clsx8 = __toESM(require("clsx"));
+var import_react16 = require("react");
 
 // src/components/Menu/MenuValueContext.tsx
-var import_react12 = require("react");
-var MenuValueContext = (0, import_react12.createContext)([]);
+var import_react15 = require("react");
+var MenuValueContext = (0, import_react15.createContext)([]);
 var useMenuItemValue = () => {
-  const context = (0, import_react12.useContext)(MenuValueContext);
+  const context = (0, import_react15.useContext)(MenuValueContext);
   if (!context) {
     throw new Error("`useMenuValue` must be used within a `<MenuValueContext.Provider />`");
   }
@@ -440,11 +525,11 @@ var useMenuItemValue = () => {
 var MenuValueContext_default = MenuValueContext;
 
 // src/components/Menu/MenuItem.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var MenuItem = (0, import_react13.forwardRef)((props, ref) => {
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var MenuItem = (0, import_react16.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_react13.useContext)(MenuValueContext_default);
+  const values = (0, import_react16.useContext)(MenuValueContext_default);
   const mergedValues = [...values, value];
   const handleClick = (event) => {
     if (value !== void 0) {
@@ -453,17 +538,17 @@ var MenuItem = (0, import_react13.forwardRef)((props, ref) => {
     onClick == null ? void 0 : onClick(event);
     onItemSelect == null ? void 0 : onItemSelect(props);
   };
-  (0, import_react13.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (navMode === "automatic" && originalValue.length > 0 && originalValue[originalValue.length - 1] === value) {
       onOpen(values);
       onChange(mergedValues);
     }
   }, [value, originalValue, navMode]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     Component,
     __spreadProps(__spreadValues({
       ref,
-      className: (0, import_clsx6.default)(
+      className: (0, import_clsx8.default)(
         `${PREFIX_CLS}menu-item`,
         {
           [`${PREFIX_CLS}menu-item--selected`]: menuValue.includes(value),
@@ -477,9 +562,9 @@ var MenuItem = (0, import_react13.forwardRef)((props, ref) => {
       onClick: handleClick
     }, rest), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
-        icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) })
+        /* @__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 }) })
       ]
     })
   );
@@ -488,8 +573,8 @@ MenuItem.displayName = "MenuItem";
 var MenuItem_default = MenuItem;
 
 // src/components/Menu/MenuSubmenu.tsx
-var import_clsx7 = __toESM(require("clsx"));
-var import_react14 = require("react");
+var import_clsx9 = __toESM(require("clsx"));
+var import_react17 = require("react");
 
 // src/components/Menu/utils.ts
 var getOpenValuesByPathname = (pathname) => {
@@ -515,7 +600,7 @@ var addOrRemoveValueInArray = (array, value) => {
 };
 
 // src/components/Menu/MenuSubmenu.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var MenuSubmenu = (_a) => {
   var _b = _a, {
     children,
@@ -539,13 +624,13 @@ var MenuSubmenu = (_a) => {
     "onClick"
   ]);
   const { value: menuValue, openValues, expandMode, onOpen } = useMenu();
-  const values = (0, import_react14.useContext)(MenuValueContext_default);
+  const values = (0, import_react17.useContext)(MenuValueContext_default);
   const isOpen = openValues.includes(value);
   const mergedValues = [...values, value];
-  const content = (0, import_react14.useMemo)(() => {
+  const content = (0, import_react17.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_runtime9.jsx)(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "submenu" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MenuSubmenu, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "group" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MenuGroup_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index);
+      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);
     });
   }, [items]);
   const handleClick = (event) => {
@@ -563,11 +648,11 @@ var MenuSubmenu = (_a) => {
     }
     onClick == null ? void 0 : onClick(event);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MenuValueContext_default.Provider, { value: mergedValues, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_clsx7.default)(`${PREFIX_CLS}menu-submenu`), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Collapse_default, { isOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CollapseTrigger_default, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  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)(
       "div",
       __spreadProps(__spreadValues({
-        className: (0, import_clsx7.default)(
+        className: (0, import_clsx9.default)(
           `${PREFIX_CLS}menu-item`,
           {
             [`${PREFIX_CLS}menu-item--selected`]: menuValue.includes(value) || items && mergedValues.includes(menuValue)
@@ -580,17 +665,17 @@ var MenuSubmenu = (_a) => {
         onClick: handleClick
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
-          icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${PREFIX_CLS}menu-item__icon`, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChevronUpIcon_default, { className: `${PREFIX_CLS}icon` }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChevronDownIcon_default, { className: `${PREFIX_CLS}icon` }) })
+          /* @__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_runtime9.jsx)(CollapseContent_default, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CollapseContent_default, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "ul",
       {
-        className: (0, import_clsx7.default)(`${PREFIX_CLS}menu`, {
+        className: (0, import_clsx9.default)(`${PREFIX_CLS}menu`, {
           [`${PREFIX_CLS}menu-open`]: !isOpen
         }),
         children: content || children
@@ -601,7 +686,7 @@ var MenuSubmenu = (_a) => {
 var MenuSubmenu_default = MenuSubmenu;
 
 // src/components/Menu/MenuGroup.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var MenuGroup = (_a) => {
   var _b = _a, {
     children,
@@ -620,24 +705,24 @@ var MenuGroup = (_a) => {
     "level",
     "items"
   ]);
-  const content = (0, import_react15.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_runtime10.jsx)(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuSubmenu_default, __spreadValues({}, item), index) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuItem_default, __spreadValues({}, item), index);
+      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);
     });
   }, [items]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "div",
       __spreadProps(__spreadValues({
-        className: (0, import_clsx8.default)(`${PREFIX_CLS}menu-group`, className),
+        className: (0, import_clsx10.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_runtime10.jsx)("div", { className: `${PREFIX_CLS}menu-group__icon`, children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `${PREFIX_CLS}menu-group__content`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${PREFIX_CLS}menu-group__title`, children: title }) })
+          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 }) })
         ]
       })
     ),
@@ -647,7 +732,7 @@ var MenuGroup = (_a) => {
 var MenuGroup_default = MenuGroup;
 
 // src/components/Menu/Menu.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var Menu = (_a) => {
   var _b = _a, {
     children,
@@ -673,12 +758,12 @@ var Menu = (_a) => {
     "onItemSelect"
   ]);
   var _a2;
-  const [selfValue, setSelfValue] = (0, import_react16.useState)((_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : []);
-  const [selfOpenValues, setSelfOpenValues] = (0, import_react16.useState)(openValuesProp != null ? openValuesProp : []);
-  const content = (0, import_react16.useMemo)(() => {
+  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)(() => {
     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_runtime11.jsx)(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MenuSubmenu_default, __spreadValues({}, item), index) : type === "group" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MenuGroup_default, __spreadValues({}, item), index) : /* @__PURE__ */ (0, import_jsx_runtime11.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) : type === "group" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuGroup_default, __spreadValues({}, item), index) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuItem_default, __spreadValues({}, item), index);
     });
   }, [items]);
   const handleChange = (value) => {
@@ -698,17 +783,17 @@ var Menu = (_a) => {
   const handleItemSelect = (props) => {
     onItemSelect == null ? void 0 : onItemSelect(props);
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (valueProp !== void 0 && navMode !== "automatic") {
       setSelfValue(valueProp);
     }
   }, [valueProp]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (openValuesProp !== void 0) {
       setSelfOpenValues(openValuesProp);
     }
   }, [openValuesProp]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     MenuContext_default.Provider,
     {
       value: {
@@ -721,7 +806,7 @@ var Menu = (_a) => {
         onChange: handleChange,
         onItemSelect: handleItemSelect
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", __spreadProps(__spreadValues({ className: (0, import_clsx9.default)(`${PREFIX_CLS}menu`) }, rest), { children: content || children }))
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", __spreadProps(__spreadValues({ className: (0, import_clsx11.default)(`${PREFIX_CLS}menu`) }, rest), { children: content || children }))
     }
   );
 };
@@ -729,15 +814,15 @@ Menu.displayName = "Menu";
 var Menu_default = Menu;
 
 // src/components/Tabs/Tab.tsx
-var import_clsx10 = __toESM(require("clsx"));
+var import_clsx12 = __toESM(require("clsx"));
 var import_merge_refs = __toESM(require("merge-refs"));
-var import_react20 = require("react");
+var import_react23 = require("react");
 
 // ../../../node_modules/react-icons/lib/esm/iconBase.js
-var import_react18 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 
 // ../../../node_modules/react-icons/lib/esm/iconContext.js
-var import_react17 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 var DefaultContext = {
   color: void 0,
   size: void 0,
@@ -745,7 +830,7 @@ var DefaultContext = {
   style: void 0,
   attr: void 0
 };
-var IconContext = import_react17.default.createContext && import_react17.default.createContext(DefaultContext);
+var IconContext = import_react20.default.createContext && import_react20.default.createContext(DefaultContext);
 
 // ../../../node_modules/react-icons/lib/esm/iconBase.js
 var __assign = function() {
@@ -774,14 +859,14 @@ var __rest = function(s, e) {
 };
 function Tree2Element(tree) {
   return tree && tree.map(function(node, i) {
-    return import_react18.default.createElement(node.tag, __assign({
+    return import_react21.default.createElement(node.tag, __assign({
       key: i
     }, node.attr), Tree2Element(node.child));
   });
 }
 function GenIcon(data) {
   return function(props) {
-    return import_react18.default.createElement(IconBase, __assign({
+    return import_react21.default.createElement(IconBase, __assign({
       attr: __assign({}, data.attr)
     }, props), Tree2Element(data.child));
   };
@@ -795,7 +880,7 @@ function IconBase(props) {
       className = conf.className;
     if (props.className)
       className = (className ? className + " " : "") + props.className;
-    return import_react18.default.createElement("svg", __assign({
+    return import_react21.default.createElement("svg", __assign({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
@@ -807,9 +892,9 @@ function IconBase(props) {
       height: computedSize,
       width: computedSize,
       xmlns: "http://www.w3.org/2000/svg"
-    }), title && import_react18.default.createElement("title", null, title), props.children);
+    }), title && import_react21.default.createElement("title", null, title), props.children);
   };
-  return IconContext !== void 0 ? import_react18.default.createElement(IconContext.Consumer, null, function(conf) {
+  return IconContext !== void 0 ? import_react21.default.createElement(IconContext.Consumer, null, function(conf) {
     return elem(conf);
   }) : elem(DefaultContext);
 }
@@ -820,10 +905,10 @@ function TbX(props) {
 }
 
 // src/components/Tabs/TabsContext.ts
-var import_react19 = require("react");
-var TabsContext = (0, import_react19.createContext)(null);
+var import_react22 = require("react");
+var TabsContext = (0, import_react22.createContext)(null);
 var useTabs = () => {
-  const context = (0, import_react19.useContext)(TabsContext);
+  const context = (0, import_react22.useContext)(TabsContext);
   if (!context) {
     throw new Error("`useTabs` must be used within a `<Tabs />`");
   }
@@ -831,8 +916,8 @@ var useTabs = () => {
 };
 
 // src/components/Tabs/Tab.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Tab = (0, import_react20.forwardRef)(
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Tab = (0, import_react23.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "div",
@@ -853,8 +938,8 @@ var Tab = (0, import_react20.forwardRef)(
       "disabled",
       "onClick"
     ]);
-    const tabRef = (0, import_react20.useRef)(null);
-    const id = (0, import_react20.useId)();
+    const tabRef = (0, import_react23.useRef)(null);
+    const id = (0, import_react23.useId)();
     const value = valueProp != null ? valueProp : id;
     const _a2 = useTabs(), { onClose, registerItem } = _a2, tabs = __objRest(_a2, ["onClose", "registerItem"]);
     const handleClick = (event) => {
@@ -895,17 +980,17 @@ var Tab = (0, import_react20.forwardRef)(
       event.stopPropagation();
       onClose(value);
     };
-    (0, import_react20.useEffect)(() => {
+    (0, import_react23.useEffect)(() => {
       registerItem({ value, disabled });
       if (value === tabs.value) {
         tabs.previousTabRef.current = tabRef.current;
       }
     }, [value, tabs.value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       Component,
       __spreadProps(__spreadValues({
         ref: (0, import_merge_refs.default)(tabRef, ref, (el) => tabs.tabRefs.current[value] = el),
-        className: (0, import_clsx10.default)(
+        className: (0, import_clsx12.default)(
           `${PREFIX_CLS}tab`,
           { [`${PREFIX_CLS}tab--selected`]: value === tabs.value, [`${PREFIX_CLS}tab--disabled`]: disabled },
           className
@@ -914,12 +999,12 @@ var Tab = (0, import_react20.forwardRef)(
         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` }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `${PREFIX_CLS}tab__content`, 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: [
             children,
-            closable && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { variant: "text", color: "secondary", iconOnly: true, size: "xs", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon_default, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TbX, {}) }) })
+            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, {}) }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${PREFIX_CLS}tab__indicator` })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `${PREFIX_CLS}tab__indicator` })
         ]
       })
     );
@@ -927,8 +1012,8 @@ var Tab = (0, import_react20.forwardRef)(
 );
 
 // src/components/Tabs/Tabs.tsx
-var import_clsx11 = __toESM(require("clsx"));
-var import_react21 = require("react");
+var import_clsx13 = __toESM(require("clsx"));
+var import_react24 = require("react");
 
 // src/utils/scroll.ts
 var scrollToItem = (parentElement, currentElement) => {
@@ -956,7 +1041,7 @@ var scrollToItem = (parentElement, currentElement) => {
 };
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var Tabs = (_a) => {
   var _b = _a, {
     children,
@@ -975,11 +1060,11 @@ var Tabs = (_a) => {
     "onChange",
     "onClose"
   ]);
-  const tabsRef = (0, import_react21.useRef)(null);
-  const tabRefs = (0, import_react21.useRef)({});
-  const previousTabRef = (0, import_react21.useRef)(null);
-  const [selfValue, setSelfValue] = (0, import_react21.useState)(value != null ? value : defaultValue);
-  const [items, setItems] = (0, import_react21.useState)([]);
+  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 registerItem = (item) => {
     setItems((prevItems) => {
       const index = prevItems.findIndex((item2) => item2.value);
@@ -1006,52 +1091,71 @@ var Tabs = (_a) => {
   const handleClose = (value2) => {
     onClose == null ? void 0 : onClose(value2);
   };
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (value !== void 0) {
       setSelfValue(value);
       scrollToTab(value);
     }
   }, [value]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.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_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     TabsContext.Provider,
     {
       value: { previousTabRef, tabRefs, value: selfValue, onChange: handleChange, onClose: handleClose, registerItem },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "div",
           __spreadProps(__spreadValues({
             ref: tabsRef,
-            className: (0, import_clsx11.default)(`${PREFIX_CLS}tabs`, { [`${PREFIX_CLS}tabs--${alignment}`]: alignment }, className)
+            className: (0, import_clsx13.default)(`${PREFIX_CLS}tabs`, { [`${PREFIX_CLS}tabs--${alignment}`]: alignment }, className)
           }, rest), {
             children
           })
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `${PREFIX_CLS}divider` })
+        /* @__PURE__ */ (0, import_jsx_runtime16.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 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 })
+      ] }) : children }),
+      endAction && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_clsx14.default)(`${PREFIX_CLS}toolbar__trailing`), children: endAction })
+    ] })
+  ] }));
+};
+var Toolbar_default = Toolbar;
+
 // src/hooks/useLocalStorage.tsx
-var import_react24 = require("react");
+var import_react27 = require("react");
 
 // src/hooks/useEventListener.tsx
-var import_react23 = require("react");
+var import_react26 = require("react");
 
 // src/hooks/useIsomorphicLayoutEffect.tsx
-var import_react22 = require("react");
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react22.useLayoutEffect : import_react22.useEffect;
+var import_react25 = require("react");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react25.useLayoutEffect : import_react25.useEffect;
 var useIsomorphicLayoutEffect_default = useIsomorphicLayoutEffect;
 
 // src/hooks/useEventListener.tsx
 function useEventListener(handler) {
-  const savedHandler = (0, import_react23.useRef)(handler);
+  const savedHandler = (0, import_react26.useRef)(handler);
   useIsomorphicLayoutEffect_default(() => {
     savedHandler.current = handler;
   }, [handler]);
@@ -1060,7 +1164,7 @@ var useEventListener_default = useEventListener;
 
 // src/hooks/useLocalStorage.tsx
 function useLocalStorage(key, initialValue) {
-  const readValue = (0, import_react24.useCallback)(() => {
+  const readValue = (0, import_react27.useCallback)(() => {
     if (typeof window === "undefined") {
       return initialValue;
     }
@@ -1072,8 +1176,8 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   }, [initialValue, key]);
-  const [storedValue, setStoredValue] = (0, import_react24.useState)(readValue);
-  const setValue = (0, import_react24.useCallback)(
+  const [storedValue, setStoredValue] = (0, import_react27.useState)(readValue);
+  const setValue = (0, import_react27.useCallback)(
     (value) => {
       if (typeof window == "undefined") {
         console.warn(`Tried setting localStorage key \u201C${key}\u201D even though environment is not a client`);
@@ -1089,10 +1193,10 @@ function useLocalStorage(key, initialValue) {
     },
     [key, storedValue]
   );
-  (0, import_react24.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     setStoredValue(readValue());
   }, []);
-  const handleStorageChange = (0, import_react24.useCallback)(() => {
+  const handleStorageChange = (0, import_react27.useCallback)(() => {
     setStoredValue(readValue());
   }, [readValue]);
   useEventListener_default("storage", handleStorageChange);
@@ -1109,22 +1213,22 @@ function parseJSON(value) {
 }
 
 // src/hooks/usePrevious.tsx
-var import_react25 = require("react");
+var import_react28 = require("react");
 var usePrevious = (value) => {
-  const ref = (0, import_react25.useRef)();
-  (0, import_react25.useEffect)(() => {
+  const ref = (0, import_react28.useRef)();
+  (0, import_react28.useEffect)(() => {
     ref.current = value;
   });
   return ref.current;
 };
 
 // src/hooks/useStep.tsx
-var import_react26 = require("react");
+var import_react29 = require("react");
 var useStep = (maxStep) => {
-  const [currentStep, setCurrentStep] = (0, import_react26.useState)(1);
-  const canGoToNextStep = (0, import_react26.useMemo)(() => currentStep + 1 <= maxStep, [currentStep, maxStep]);
-  const canGoToPrevStep = (0, import_react26.useMemo)(() => currentStep - 1 >= 1, [currentStep]);
-  const setStep = (0, import_react26.useCallback)(
+  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)(
     (step) => {
       const newStep = step instanceof Function ? step(currentStep) : step;
       if (newStep >= 1 && newStep <= maxStep) {
@@ -1135,17 +1239,17 @@ var useStep = (maxStep) => {
     },
     [maxStep, currentStep]
   );
-  const goToNextStep = (0, import_react26.useCallback)(() => {
+  const goToNextStep = (0, import_react29.useCallback)(() => {
     if (canGoToNextStep) {
       setCurrentStep((step) => step + 1);
     }
   }, [canGoToNextStep]);
-  const goToPrevStep = (0, import_react26.useCallback)(() => {
+  const goToPrevStep = (0, import_react29.useCallback)(() => {
     if (canGoToPrevStep) {
       setCurrentStep((step) => step - 1);
     }
   }, [canGoToPrevStep]);
-  const reset = (0, import_react26.useCallback)(() => {
+  const reset = (0, import_react29.useCallback)(() => {
     setCurrentStep(1);
   }, []);
   return [
@@ -1162,6 +1266,7 @@ var useStep = (maxStep) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Backdrop,
   Badge,
   Button,
   Chip,
@@ -1176,8 +1281,11 @@ var useStep = (maxStep) => {
   MenuItem,
   MenuSubmenu,
   MenuValueContext,
+  Portal,
   Tab,
   Tabs,
+  Toolbar,
+  Transition,
   getOpenValuesByPathname,
   useCollapse,
   useLocalStorage,