@unifiedsoftware/react-ui 1.0.2 → 1.0.4

package/dist/index.mjs

@@ -33,45 +33,510 @@ var __objRest = (source, exclude) => {
 // src/components/Button/Button.tsx
 import clsx from "clsx";
 import { forwardRef } from "react";
+import { RiLoader4Line } from "react-icons/ri";
+
+// src/constants/index.ts
+var PREFIX_CLS = "us-";
+
+// src/components/Button/Button.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var prefixCls = "us-";
 var Button = forwardRef(
   (_a, ref) => {
-    var _b = _a, { as: Component = "button", children, className, variant = "text", color = "primary", size = "md" } = _b, rest = __objRest(_b, ["as", "children", "className", "variant", "color", "size"]);
+    var _b = _a, {
+      as: Component = "button",
+      children,
+      className,
+      role = "presentation",
+      variant = "text",
+      color = "primary",
+      size = "md",
+      prefix,
+      suffix,
+      loading
+    } = _b, rest = __objRest(_b, [
+      "as",
+      "children",
+      "className",
+      "role",
+      "variant",
+      "color",
+      "size",
+      "prefix",
+      "suffix",
+      "loading"
+    ]);
     return /* @__PURE__ */ jsxs(
       Component,
       __spreadProps(__spreadValues({
         ref,
         className: clsx(
-          `${prefixCls}button`,
+          `${PREFIX_CLS}button`,
           {
-            [`${prefixCls}button--${variant}`]: variant,
-            [`${prefixCls}button--${color}`]: color,
-            [`${prefixCls}button--${size}`]: size
+            [`${PREFIX_CLS}button--${variant}`]: variant,
+            [`${PREFIX_CLS}button--${color}`]: color,
+            [`${PREFIX_CLS}button--${size}`]: size
           },
           className
-        )
+        ),
+        role
       }, rest), {
         children: [
-          /* @__PURE__ */ jsx("div", { className: `${prefixCls}button__elevation` }),
-          /* @__PURE__ */ jsx("div", { className: `${prefixCls}button__outline` }),
-          children
+          /* @__PURE__ */ jsx("div", { className: `${PREFIX_CLS}overlay` }),
+          loading ? /* @__PURE__ */ jsx(RiLoader4Line, { className: `${PREFIX_CLS}icon ${PREFIX_CLS}animation-spin` }) : prefix,
+          /* @__PURE__ */ jsx("div", { className: `${PREFIX_CLS}button__content`, children }),
+          suffix
         ]
       })
     );
   }
 );
 
-// src/components/Tabs/Tab.tsx
+// src/components/Collapse/Collapse.tsx
+import { Children, useEffect, useRef, useState } from "react";
+
+// src/components/Collapse/CollapseContext.tsx
+import { createContext, useContext } from "react";
+var CollapseContext = createContext(null);
+var useCollapse = () => {
+  const context = useContext(CollapseContext);
+  if (!context) {
+    throw new Error("`useCollapse` must be used within a `<Collapse />`");
+  }
+  return context;
+};
+var CollapseContext_default = CollapseContext;
+
+// src/components/Collapse/Collapse.tsx
+import { jsxs as jsxs2 } from "react/jsx-runtime";
+var Collapse = ({ children, isOpen, onOpen, onClose, onToggle }) => {
+  const collapseRef = useRef(null);
+  const [selfIsOpen, setSelfIsOpen] = useState(isOpen != null ? isOpen : false);
+  const [heightAuto, setHeightAuto] = useState(false);
+  const [trigger, content] = Children.toArray(children);
+  const handleOpen = () => {
+    setSelfIsOpen(true);
+    onOpen == null ? void 0 : onOpen();
+  };
+  const handleClose = () => {
+    setSelfIsOpen(false);
+    onClose == null ? void 0 : onClose();
+  };
+  const handleToggle = () => {
+    setSelfIsOpen((prevState) => !prevState);
+    onToggle == null ? void 0 : onToggle();
+  };
+  useEffect(() => {
+    if (isOpen !== void 0) {
+      setSelfIsOpen(isOpen);
+    }
+    setTimeout(() => {
+      if (isOpen) {
+        setHeightAuto(true);
+      } else {
+        setHeightAuto(false);
+      }
+    }, 100);
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxs2(
+    CollapseContext_default.Provider,
+    {
+      value: {
+        collapseRef,
+        isOpen: selfIsOpen,
+        heightAuto,
+        onOpen: handleOpen,
+        onClose: handleClose,
+        onToggle: handleToggle
+      },
+      children: [
+        trigger,
+        content
+      ]
+    }
+  );
+};
+var Collapse_default = Collapse;
+
+// src/components/Collapse/CollapseContent.tsx
 import clsx2 from "clsx";
+import { Children as Children2, cloneElement, forwardRef as forwardRef2 } from "react";
+var CollapseContent = forwardRef2(({ children }, ref) => {
+  var _a, _b;
+  const { collapseRef, isOpen, heightAuto } = useCollapse();
+  const child = Children2.only(children);
+  return cloneElement(child, __spreadProps(__spreadValues({}, child.props), {
+    ref: (node) => {
+      collapseRef.current = node;
+      if (ref !== null) {
+        ref.current = node;
+      }
+    },
+    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: clsx2(`${PREFIX_CLS}collapse`, child.props.className)
+  }));
+});
+var CollapseContent_default = CollapseContent;
+
+// src/components/Collapse/CollapseTrigger.tsx
+import { Children as Children3, cloneElement as cloneElement2, forwardRef as forwardRef3 } from "react";
+var CollapseTrigger = forwardRef3(({ children }, ref) => {
+  const { collapseRef, onToggle } = useCollapse();
+  const child = Children3.only(children);
+  return cloneElement2(child, __spreadValues({
+    ref,
+    onClick: (event) => {
+      var _a, _b;
+      if (!collapseRef.current) {
+        return;
+      }
+      onToggle();
+      (_b = (_a = child.props).onClick) == null ? void 0 : _b.call(_a, event);
+    }
+  }, child.props));
+});
+var CollapseTrigger_default = CollapseTrigger;
+
+// src/components/Menu/Menu.tsx
+import clsx6 from "clsx";
+import { useEffect as useEffect4, useMemo as useMemo3, useState as useState4 } from "react";
+
+// src/components/Menu/MenuContext.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var MenuContext = createContext2(null);
+var useMenu = () => {
+  const context = useContext2(MenuContext);
+  if (!context) {
+    throw new Error("`useMenu` must be used within a `<Menu />`");
+  }
+  return context;
+};
+var MenuContext_default = MenuContext;
+
+// src/components/Menu/MenuGroup.tsx
+import clsx5 from "clsx";
+import { useMemo as useMemo2 } from "react";
+
+// src/components/Menu/MenuItem.tsx
+import clsx3 from "clsx";
+import { forwardRef as forwardRef4, useContext as useContext4, useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/components/Menu/MenuValueContext.tsx
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var MenuValueContext = createContext3([]);
+var useMenuItemValue = () => {
+  const context = useContext3(MenuValueContext);
+  if (!context) {
+    throw new Error("`useMenuValue` must be used within a `<MenuValueContext.Provider />`");
+  }
+  return context;
+};
+var MenuValueContext_default = MenuValueContext;
+
+// src/components/Menu/MenuItem.tsx
+import { jsx as jsx2, jsxs as jsxs3 } from "react/jsx-runtime";
+var MenuItem = forwardRef4(
+  (_a, ref) => {
+    var _b = _a, { as: Component = "div", className, style, value, title, icon, level = 1, disabled, onClick } = _b, rest = __objRest(_b, ["as", "className", "style", "value", "title", "icon", "level", "disabled", "onClick"]);
+    const { value: menuValue, openMode, onChange, onOpen } = useMenu();
+    const values = useContext4(MenuValueContext_default);
+    const mergedValues = [...values, value];
+    const [openMounted, setOpenMounted] = useState2(false);
+    const handleClick = (event) => {
+      if (value !== void 0) {
+        onChange(mergedValues);
+      }
+      onClick == null ? void 0 : onClick(event);
+    };
+    useEffect2(() => {
+      if (openMode === "automatic" && menuValue.length > 0 && menuValue[menuValue.length - 1] === value && !openMounted) {
+        onOpen(values);
+        onChange(mergedValues);
+        setOpenMounted(true);
+      }
+    }, [value, menuValue, openMode, openMounted]);
+    return /* @__PURE__ */ jsxs3(
+      Component,
+      __spreadProps(__spreadValues({
+        ref,
+        className: clsx3(
+          `${PREFIX_CLS}menu-item`,
+          {
+            [`${PREFIX_CLS}menu-item--selected`]: menuValue.includes(value),
+            [`${PREFIX_CLS}menu-item--disabled`]: disabled
+          },
+          className
+        ),
+        style: __spreadValues({
+          paddingLeft: level <= 1 ? `var(--${PREFIX_CLS}menu-item-padding-x)` : `calc(${level} * var(--${PREFIX_CLS}menu-item-padding-level))`
+        }, style),
+        onClick: handleClick
+      }, rest), {
+        children: [
+          /* @__PURE__ */ jsx2("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ jsx2("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
+          icon && /* @__PURE__ */ jsx2("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
+          /* @__PURE__ */ jsx2("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ jsx2("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) })
+        ]
+      })
+    );
+  }
+);
+MenuItem.displayName = "MenuItem";
+var MenuItem_default = MenuItem;
+
+// src/components/Menu/MenuSubmenu.tsx
+import clsx4 from "clsx";
+import { useContext as useContext5, useEffect as useEffect3, useMemo, useState as useState3 } from "react";
+import { MdKeyboardArrowDown, MdKeyboardArrowUp } from "react-icons/md";
+
+// src/components/Menu/utils.ts
+var getOpenValuesByPathname = (pathname) => {
+  return pathname.split("/").reduce((previousValue, currentValue) => {
+    const previousPath = previousValue[previousValue.length - 1];
+    if (previousPath != void 0) {
+      previousValue.push(previousPath + "/" + currentValue);
+    } else {
+      previousValue.push("");
+    }
+    return previousValue;
+  }, []);
+};
+var addOrRemoveValueInArray = (array, value) => {
+  const index = array.indexOf(value);
+  const newArray = [...array];
+  if (index === -1) {
+    newArray.push(value);
+  } else {
+    newArray.splice(index, 1);
+  }
+  return newArray;
+};
+
+// src/components/Menu/MenuSubmenu.tsx
+import { jsx as jsx3, jsxs as jsxs4 } from "react/jsx-runtime";
+var MenuSubmenu = (_a) => {
+  var _b = _a, {
+    children,
+    className,
+    style,
+    value,
+    title,
+    icon,
+    level = 1,
+    items,
+    onClick
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "className",
+    "style",
+    "value",
+    "title",
+    "icon",
+    "level",
+    "items",
+    "onClick"
+  ]);
+  const { value: menuValue, openValues, expandMode, openMode, onOpen } = useMenu();
+  const values = useContext5(MenuValueContext_default);
+  const isOpen = openValues.includes(value);
+  const mergedValues = [...values, value];
+  const [openMounted, setOpenMounted] = useState3(false);
+  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__ */ jsx3(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "submenu" ? /* @__PURE__ */ jsx3(MenuSubmenu, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "group" ? /* @__PURE__ */ jsx3(MenuGroup_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : /* @__PURE__ */ jsx3(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index);
+    });
+  }, [items]);
+  const handleClick = (event) => {
+    if (expandMode === "multiple") {
+      const updatedOpenValues = addOrRemoveValueInArray(openValues, value);
+      onOpen(updatedOpenValues);
+    } else {
+      if (isOpen) {
+        const updatedOpenValues = addOrRemoveValueInArray(mergedValues, value);
+        onOpen(updatedOpenValues);
+      } else {
+        const updatedOpenValues = addOrRemoveValueInArray(values, value);
+        onOpen(updatedOpenValues);
+      }
+    }
+    onClick == null ? void 0 : onClick(event);
+  };
+  useEffect3(() => {
+    if (openMode === "automatic" && menuValue.length > 0 && menuValue[menuValue.length - 1] === value && !openMounted) {
+      onOpen(values);
+      setOpenMounted(true);
+    }
+  }, [value, menuValue, openMode, openMounted]);
+  return /* @__PURE__ */ jsx3(MenuValueContext_default.Provider, { value: mergedValues, children: /* @__PURE__ */ jsx3("div", { className: clsx4(`${PREFIX_CLS}menu-submenu`), children: /* @__PURE__ */ jsxs4(Collapse_default, { isOpen, children: [
+    /* @__PURE__ */ jsx3(CollapseTrigger_default, { children: /* @__PURE__ */ jsxs4(
+      "div",
+      __spreadProps(__spreadValues({
+        className: clsx4(
+          `${PREFIX_CLS}menu-item`,
+          {
+            [`${PREFIX_CLS}menu-item--selected`]: menuValue.includes(value) || items && mergedValues.includes(menuValue)
+          },
+          className
+        ),
+        style: __spreadValues({
+          paddingLeft: level <= 1 ? `var(--${PREFIX_CLS}menu-item-padding-x)` : `calc(${level} * var(--${PREFIX_CLS}menu-item-padding-level))`
+        }, style),
+        onClick: handleClick
+      }, rest), {
+        children: [
+          /* @__PURE__ */ jsx3("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ jsx3("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
+          icon && /* @__PURE__ */ jsx3("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
+          /* @__PURE__ */ jsx3("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ jsx3("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) }),
+          /* @__PURE__ */ jsx3("div", { className: `${PREFIX_CLS}menu-item__icon`, children: isOpen ? /* @__PURE__ */ jsx3(MdKeyboardArrowUp, { className: `${PREFIX_CLS}icon` }) : /* @__PURE__ */ jsx3(MdKeyboardArrowDown, { className: `${PREFIX_CLS}icon` }) })
+        ]
+      })
+    ) }),
+    /* @__PURE__ */ jsx3(CollapseContent_default, { children: /* @__PURE__ */ jsx3(
+      "ul",
+      {
+        className: clsx4(`${PREFIX_CLS}menu`, {
+          [`${PREFIX_CLS}menu-open`]: !open
+        }),
+        children: content || children
+      }
+    ) })
+  ] }) }) });
+};
+var MenuSubmenu_default = MenuSubmenu;
+
+// src/components/Menu/MenuGroup.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs5 } from "react/jsx-runtime";
+var MenuGroup = (_a) => {
+  var _b = _a, {
+    children,
+    className,
+    style,
+    title,
+    icon,
+    level = 1,
+    items
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "className",
+    "style",
+    "title",
+    "icon",
+    "level",
+    "items"
+  ]);
+  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__ */ jsx4(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ jsx4(MenuSubmenu_default, __spreadValues({}, item), index) : /* @__PURE__ */ jsx4(MenuItem_default, __spreadValues({}, item), index);
+    });
+  }, [items]);
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    /* @__PURE__ */ jsxs5(
+      "div",
+      __spreadProps(__spreadValues({
+        className: clsx5(`${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__ */ jsx4("div", { className: `${PREFIX_CLS}menu-group__icon`, children: icon }),
+          /* @__PURE__ */ jsx4("div", { className: `${PREFIX_CLS}menu-group__content`, children: /* @__PURE__ */ jsx4("span", { className: `${PREFIX_CLS}menu-group__title`, children: title }) })
+        ]
+      })
+    ),
+    content || children
+  ] });
+};
+var MenuGroup_default = MenuGroup;
+
+// src/components/Menu/Menu.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Menu = (_a) => {
+  var _b = _a, {
+    children,
+    value: valueProp,
+    defaultValue,
+    openValues: openValuesProp,
+    expandMode = "multiple",
+    openMode = "manual",
+    items,
+    onChange,
+    onOpen
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "value",
+    "defaultValue",
+    "openValues",
+    "expandMode",
+    "openMode",
+    "items",
+    "onChange",
+    "onOpen"
+  ]);
+  var _a2;
+  const [selfValue, setSelfValue] = useState4((_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : []);
+  const [selfOpenValues, setSelfOpenValues] = useState4(openValuesProp != null ? openValuesProp : []);
+  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__ */ jsx5(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ jsx5(MenuSubmenu_default, __spreadValues({}, item), index) : type === "group" ? /* @__PURE__ */ jsx5(MenuGroup_default, __spreadValues({}, item), index) : /* @__PURE__ */ jsx5(MenuItem_default, __spreadValues({}, item), index);
+    });
+  }, [items]);
+  const handleChange = (value) => {
+    if (valueProp !== void 0) {
+      onChange == null ? void 0 : onChange(value);
+    } else {
+      setSelfValue(value);
+    }
+  };
+  const handleOpen = (values) => {
+    if (openValuesProp !== void 0) {
+      onOpen == null ? void 0 : onOpen(values);
+    } else {
+      setSelfOpenValues(values);
+    }
+  };
+  useEffect4(() => {
+    if (valueProp !== void 0) {
+      setSelfValue(valueProp);
+    }
+  }, [valueProp]);
+  useEffect4(() => {
+    if (openValuesProp !== void 0) {
+      setSelfOpenValues(openValuesProp);
+    }
+  }, [openValuesProp]);
+  return /* @__PURE__ */ jsx5(
+    MenuContext_default.Provider,
+    {
+      value: {
+        value: selfValue,
+        openValues: selfOpenValues,
+        expandMode,
+        openMode,
+        onOpen: handleOpen,
+        onChange: handleChange
+      },
+      children: /* @__PURE__ */ jsx5("div", __spreadProps(__spreadValues({ className: clsx6(`${PREFIX_CLS}menu`) }, rest), { children: content || children }))
+    }
+  );
+};
+Menu.displayName = "Menu";
+var Menu_default = Menu;
+
+// src/components/Tabs/Tab.tsx
+import clsx7 from "clsx";
 import mergeRefs from "merge-refs";
-import { forwardRef as forwardRef2, useEffect, useRef } from "react";
+import { forwardRef as forwardRef5, useEffect as useEffect5, useRef as useRef2 } from "react";
 
 // src/components/Tabs/TabsContext.ts
-import { createContext, useContext } from "react";
-var TabsContext = createContext(null);
+import { createContext as createContext4, useContext as useContext6 } from "react";
+var TabsContext = createContext4(null);
 var useTabs = () => {
-  const context = useContext(TabsContext);
+  const context = useContext6(TabsContext);
   if (!context) {
     throw new Error("`useTabs` must be used within a `<Tabs />`");
   }
@@ -79,12 +544,11 @@ var useTabs = () => {
 };
 
 // src/components/Tabs/Tab.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var prefixCls2 = "us-";
-var Tab = forwardRef2(
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var Tab = forwardRef5(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", children, className, value, onClick } = _b, rest = __objRest(_b, ["as", "children", "className", "value", "onClick"]);
-    const tabRef = useRef(null);
+    var _b = _a, { as: Component = "div", children, className, role = "presentation", value, onClick } = _b, rest = __objRest(_b, ["as", "children", "className", "role", "value", "onClick"]);
+    const tabRef = useRef2(null);
     const tabs = useTabs();
     const handleClick = (event) => {
       const previousTab = tabs.previousTabRef.current;
@@ -92,8 +556,8 @@ var Tab = forwardRef2(
       if (!currentTab)
         return;
       if (previousTab) {
-        const previousIndicator = previousTab.querySelector(`.${prefixCls2}tab__indicator`);
-        const currentIndicator = currentTab.querySelector(`.${prefixCls2}tab__indicator`);
+        const previousIndicator = previousTab.querySelector(`.${PREFIX_CLS}tab__indicator`);
+        const currentIndicator = currentTab.querySelector(`.${PREFIX_CLS}tab__indicator`);
         if (!previousIndicator || !currentIndicator)
           return;
         const from = {};
@@ -120,55 +584,57 @@ var Tab = forwardRef2(
       tabs.onChange(value);
       onClick == null ? void 0 : onClick(event);
     };
-    useEffect(() => {
+    useEffect5(() => {
       if (value === tabs.value) {
         tabs.previousTabRef.current = tabRef.current;
       }
     }, []);
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsxs6(
       Component,
       __spreadProps(__spreadValues({
         ref: mergeRefs(tabRef, ref),
-        className: clsx2(`${prefixCls2}tab`, { [`${prefixCls2}tab--selected`]: value === tabs.value }, className),
+        className: clsx7(`${PREFIX_CLS}tab`, { [`${PREFIX_CLS}tab--selected`]: value === tabs.value }, className),
+        role,
         onClick: handleClick
       }, rest), {
-        children: /* @__PURE__ */ jsxs2("div", { className: `${prefixCls2}tab__content`, children: [
-          children,
-          /* @__PURE__ */ jsx2("div", { className: `${prefixCls2}tab__indicator` })
-        ] })
+        children: [
+          /* @__PURE__ */ jsx6("div", { className: `${PREFIX_CLS}overlay` }),
+          /* @__PURE__ */ jsx6("div", { className: `${PREFIX_CLS}tab__content`, children }),
+          /* @__PURE__ */ jsx6("div", { className: `${PREFIX_CLS}tab__indicator` })
+        ]
       })
     );
   }
 );
 
 // src/components/Tabs/Tabs.tsx
-import clsx3 from "clsx";
-import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var prefixCls3 = "us-";
+import clsx8 from "clsx";
+import { useEffect as useEffect6, useRef as useRef3, useState as useState5 } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var prefixCls = "us-";
 var Tabs = (_a) => {
   var _b = _a, { children, className, value, defaultValue, onChange } = _b, rest = __objRest(_b, ["children", "className", "value", "defaultValue", "onChange"]);
-  const previousTabRef = useRef2(null);
-  const [selfValue, setSelfValue] = useState(value != null ? value : defaultValue);
+  const previousTabRef = useRef3(null);
+  const [selfValue, setSelfValue] = useState5(value != null ? value : defaultValue);
   const handleChange = (value2) => {
     setSelfValue(value2);
     onChange == null ? void 0 : onChange(value2);
   };
-  useEffect2(() => {
+  useEffect6(() => {
     if (value !== void 0) {
       setSelfValue(value);
     }
   }, [value]);
-  return /* @__PURE__ */ jsxs3(TabsContext.Provider, { value: { previousTabRef, value: selfValue, onChange: handleChange }, children: [
-    /* @__PURE__ */ jsx3("div", __spreadProps(__spreadValues({ className: clsx3(`${prefixCls3}tabs`, className) }, rest), { children })),
-    /* @__PURE__ */ jsx3("div", { className: `${prefixCls3}divider` })
+  return /* @__PURE__ */ jsxs7(TabsContext.Provider, { value: { previousTabRef, value: selfValue, onChange: handleChange }, children: [
+    /* @__PURE__ */ jsx7("div", __spreadProps(__spreadValues({ className: clsx8(`${prefixCls}tabs`, className) }, rest), { children })),
+    /* @__PURE__ */ jsx7("div", { className: `${prefixCls}divider` })
   ] });
 };
 
 // src/components/DropdownEnumList.tsx
 import { DropDownList } from "@progress/kendo-react-dropdowns";
-import { useEffect as useEffect3, useState as useState2 } from "react";
-import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useState as useState6 } from "react";
+import { Fragment as Fragment2, jsx as jsx8 } from "react/jsx-runtime";
 function parsearDataForComboBox(array, key, text, itemAll = false) {
   const dataForComboBox = [];
   if (itemAll)
@@ -203,16 +669,16 @@ function EnumToArray(typeEnum, replaceGuionForSpace = true, description) {
   return values;
 }
 var DropEnumList = ({ dataEnum, description, onChange, width, defaultValue }) => {
-  const [value, setValue] = useState2("");
-  const [data, setData] = useState2([]);
-  useEffect3(() => {
+  const [value, setValue] = useState6("");
+  const [data, setData] = useState6([]);
+  useEffect7(() => {
     setData(
       parsearDataForComboBox(EnumToArray(dataEnum, true, description), "value", "label", false).sort(
         (a, b) => Number(a.key) - Number(b.key)
       )
     );
   }, []);
-  useEffect3(() => {
+  useEffect7(() => {
     if (data.length > 0) {
       setValue(data.filter((x) => x.key == defaultValue)[0]);
     }
@@ -221,7 +687,7 @@ var DropEnumList = ({ dataEnum, description, onChange, width, defaultValue }) =>
     onChange(e);
     setValue(e);
   };
-  return /* @__PURE__ */ jsx4(Fragment, { children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx8(Fragment2, { children: /* @__PURE__ */ jsx8(
     DropDownList,
     {
       className: "d-inline-block align-middle mr-2",
@@ -242,22 +708,22 @@ var DropEnumList = ({ dataEnum, description, onChange, width, defaultValue }) =>
 };
 
 // src/contexts/BreadCrumbContext.tsx
-import { createContext as createContext2, useState as useState4 } from "react";
+import { createContext as createContext5, useState as useState8 } from "react";
 
 // src/hooks/useLocalStorage.tsx
-import { useCallback, useEffect as useEffect5, useState as useState3 } from "react";
+import { useCallback, useEffect as useEffect9, useState as useState7 } from "react";
 
 // src/hooks/useEventListener.tsx
-import { useRef as useRef3 } from "react";
+import { useRef as useRef4 } from "react";
 
 // src/hooks/useIsomorphicLayoutEffect.tsx
-import { useEffect as useEffect4, useLayoutEffect } from "react";
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect4;
+import { useEffect as useEffect8, useLayoutEffect } from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect8;
 var useIsomorphicLayoutEffect_default = useIsomorphicLayoutEffect;
 
 // src/hooks/useEventListener.tsx
 function useEventListener(handler) {
-  const savedHandler = useRef3(handler);
+  const savedHandler = useRef4(handler);
   useIsomorphicLayoutEffect_default(() => {
     savedHandler.current = handler;
   }, [handler]);
@@ -278,7 +744,7 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   }, [initialValue, key]);
-  const [storedValue, setStoredValue] = useState3(readValue);
+  const [storedValue, setStoredValue] = useState7(readValue);
   const setValue = useCallback(
     (value) => {
       if (typeof window == "undefined") {
@@ -295,7 +761,7 @@ function useLocalStorage(key, initialValue) {
     },
     [key, storedValue]
   );
-  useEffect5(() => {
+  useEffect9(() => {
     setStoredValue(readValue());
   }, []);
   const handleStorageChange = useCallback(() => {
@@ -315,15 +781,15 @@ function parseJSON(value) {
 }
 
 // src/contexts/BreadCrumbContext.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var BreadCrumbContext = createContext2({});
+import { jsx as jsx9 } from "react/jsx-runtime";
+var BreadCrumbContext = createContext5({});
 var BreadCrumbContextProvider = ({ children }) => {
   const [active, setActive] = useLocalStorage("@active", "");
   const [path, setPath] = useLocalStorage("@path", "/");
   const [goBack, setGoBack] = useLocalStorage("@goBack", false);
   const [pathChild, setPathChild] = useLocalStorage("@pathChild", "");
-  const [routes, setRoutes] = useState4([]);
-  return /* @__PURE__ */ jsx5(
+  const [routes, setRoutes] = useState8([]);
+  return /* @__PURE__ */ jsx9(
     BreadCrumbContext.Provider,
     {
       value: {
@@ -344,18 +810,18 @@ var BreadCrumbContextProvider = ({ children }) => {
 };
 
 // src/contexts/DrawerContext.tsx
-import { createContext as createContext3, useState as useState5 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var DrawerContext = createContext3({});
+import { createContext as createContext6, useState as useState9 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var DrawerContext = createContext6({});
 var DrawerContextProvider = ({ children }) => {
-  const [active, setActive] = useState5(false);
-  return /* @__PURE__ */ jsx6(DrawerContext.Provider, { value: { active, setActive }, children });
+  const [active, setActive] = useState9(false);
+  return /* @__PURE__ */ jsx10(DrawerContext.Provider, { value: { active, setActive }, children });
 };
 
 // src/contexts/HistoryContext.tsx
-import { createContext as createContext4 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var HistoryContext = createContext4({});
+import { createContext as createContext7 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var HistoryContext = createContext7({});
 var HistoryContextProvider = ({ children }) => {
   const [list, setList] = useLocalStorage("@list_paths", []);
   const updateList = (value) => {
@@ -367,40 +833,40 @@ var HistoryContextProvider = ({ children }) => {
       })
     );
   };
-  return /* @__PURE__ */ jsx7(HistoryContext.Provider, { value: { list, updateList }, children });
+  return /* @__PURE__ */ jsx11(HistoryContext.Provider, { value: { list, updateList }, children });
 };
 
 // src/contexts/SidebarMainContext.tsx
-import { createContext as createContext5, useState as useState6 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var SidebarMainContext = createContext5({});
+import { createContext as createContext8, useState as useState10 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var SidebarMainContext = createContext8({});
 var SidebarMainContextProvider = ({ children }) => {
-  const [open, setOpen] = useState6(true);
-  return /* @__PURE__ */ jsx8(SidebarMainContext.Provider, { value: { open, setOpen }, children });
+  const [open2, setOpen] = useState10(true);
+  return /* @__PURE__ */ jsx12(SidebarMainContext.Provider, { value: { open: open2, setOpen }, children });
 };
 
 // src/contexts/GlobalProvider.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function GlobalProvider({ children }) {
-  return /* @__PURE__ */ jsx9(HistoryContextProvider, { children: /* @__PURE__ */ jsx9(BreadCrumbContextProvider, { children: /* @__PURE__ */ jsx9(SidebarMainContextProvider, { children: /* @__PURE__ */ jsx9(DrawerContextProvider, { children }) }) }) });
+  return /* @__PURE__ */ jsx13(HistoryContextProvider, { children: /* @__PURE__ */ jsx13(BreadCrumbContextProvider, { children: /* @__PURE__ */ jsx13(SidebarMainContextProvider, { children: /* @__PURE__ */ jsx13(DrawerContextProvider, { children }) }) }) });
 }
 
 // src/hooks/usePrevious.tsx
-import { useEffect as useEffect6, useRef as useRef4 } from "react";
+import { useEffect as useEffect10, useRef as useRef5 } from "react";
 var usePrevious = (value) => {
-  const ref = useRef4();
-  useEffect6(() => {
+  const ref = useRef5();
+  useEffect10(() => {
     ref.current = value;
   });
   return ref.current;
 };
 
 // src/hooks/useStep.tsx
-import { useCallback as useCallback2, useMemo, useState as useState7 } from "react";
+import { useCallback as useCallback2, useMemo as useMemo4, useState as useState11 } from "react";
 var useStep = (maxStep) => {
-  const [currentStep, setCurrentStep] = useState7(1);
-  const canGoToNextStep = useMemo(() => currentStep + 1 <= maxStep, [currentStep, maxStep]);
-  const canGoToPrevStep = useMemo(() => currentStep - 1 >= 1, [currentStep]);
+  const [currentStep, setCurrentStep] = useState11(1);
+  const canGoToNextStep = useMemo4(() => currentStep + 1 <= maxStep, [currentStep, maxStep]);
+  const canGoToPrevStep = useMemo4(() => currentStep - 1 >= 1, [currentStep]);
   const setStep = useCallback2(
     (step) => {
       const newStep = step instanceof Function ? step(currentStep) : step;
@@ -439,10 +905,10 @@ var useStep = (maxStep) => {
 };
 
 // src/layout/AppBreadcrumb.tsx
-import { useContext as useContext2, useEffect as useEffect7 } from "react";
+import { useContext as useContext7, useEffect as useEffect11 } from "react";
 import { MdClose } from "react-icons/md";
 import { VscChevronRight } from "react-icons/vsc";
-import { Link as Link3, useNavigate } from "react-router-dom";
+import { Link as Link3 } from "react-router-dom";
 
 // src/styled-components/breadcrumb.ts
 import styled from "styled-components";
@@ -485,7 +951,7 @@ var TitlePage = styled.div`
 // src/styled-components/menu.ts
 import { Link } from "react-router-dom";
 import styled2 from "styled-components";
-var MenuItem = styled2(Link)`
+var MenuItem2 = styled2(Link)`
 	text-decoration: none;
 	color: black;
 	display: flex;
@@ -864,71 +1330,73 @@ var CloseIcon = styled6.button`
 `;
 
 // src/layout/AppBreadcrumb.tsx
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var AppBreadCrumb = ({ title, paths }) => {
-  const { setRoutes } = useContext2(BreadCrumbContext);
-  useEffect7(() => {
+  const { setRoutes } = useContext7(BreadCrumbContext);
+  useEffect11(() => {
     if (!(paths == null ? void 0 : paths.length))
       return;
     setRoutes(paths != null ? paths : []);
   }, []);
-  return /* @__PURE__ */ jsx10(BreadCrumbTitle, { children: title != null ? title : "Home" });
+  return /* @__PURE__ */ jsx14(BreadCrumbTitle, { children: title != null ? title : "Home" });
 };
-var AppBreadCrumbNav = ({ paths }) => {
-  const { active, path, routes, setRoutes } = useContext2(BreadCrumbContext);
-  const navigate = useNavigate();
-  const { updateList } = useContext2(HistoryContext);
-  useEffect7(() => {
+var AppBreadCrumbNav = ({
+  paths,
+  onPush
+}) => {
+  const { active, path, routes, setRoutes } = useContext7(BreadCrumbContext);
+  const { updateList } = useContext7(HistoryContext);
+  useEffect11(() => {
     updateList({ name: active, path });
   }, [path, active]);
-  useEffect7(() => {
+  useEffect11(() => {
     setRoutes(paths != null ? paths : []);
   }, [paths]);
-  return /* @__PURE__ */ jsxs4(Breadcrumb, { children: [
-    /* @__PURE__ */ jsxs4("div", { className: "d-flex align-items-center", children: [
-      /* @__PURE__ */ jsx10(Link3, { to: "/", className: "link", children: "HOME" }),
-      routes.length > 0 && /* @__PURE__ */ jsx10(VscChevronRight, { color: "black" }),
+  return /* @__PURE__ */ jsxs8(Breadcrumb, { children: [
+    /* @__PURE__ */ jsxs8("div", { className: "d-flex align-items-center", children: [
+      /* @__PURE__ */ jsx14(Link3, { to: "/", className: "link", children: "HOME" }),
+      routes.length > 0 && /* @__PURE__ */ jsx14(VscChevronRight, { color: "black" }),
       routes.length > 0 ? routes.map((i, idx, arr) => {
         if (i.route === -1) {
-          return /* @__PURE__ */ jsxs4("span", { className: "link", onClick: () => navigate(-1), children: [
+          return /* @__PURE__ */ jsxs8("span", { className: "link", onClick: () => onPush(-1), children: [
             i.title,
             " ",
-            idx + 1 === arr.length ? "" : /* @__PURE__ */ jsx10(VscChevronRight, { color: "black" })
+            idx + 1 === arr.length ? "" : /* @__PURE__ */ jsx14(VscChevronRight, { color: "black" })
           ] }, idx);
         }
-        return /* @__PURE__ */ jsxs4(Link3, { to: i.route, className: "link", children: [
+        return /* @__PURE__ */ jsxs8(Link3, { to: i.route, className: "link", children: [
           i.title,
           " ",
-          idx + 1 === arr.length ? "" : /* @__PURE__ */ jsx10(VscChevronRight, { color: "black" })
+          idx + 1 === arr.length ? "" : /* @__PURE__ */ jsx14(VscChevronRight, { color: "black" })
         ] }, idx);
       }) : ""
     ] }),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx14(
       CloseIcon,
       {
         onClick: () => {
           if ((routes == null ? void 0 : routes.length) === 1) {
-            navigate("/");
+            onPush("/");
             setRoutes([]);
             return;
           }
-          navigate(`${routes && routes[(routes == null ? void 0 : routes.length) - 2].route}`);
+          onPush(`${routes && routes[(routes == null ? void 0 : routes.length) - 2].route}`);
         },
-        children: /* @__PURE__ */ jsx10(MdClose, { fontSize: 20 })
+        children: /* @__PURE__ */ jsx14(MdClose, { fontSize: 20 })
       }
     )
   ] });
 };
 
 // src/layout/AppLoader.tsx
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect12 } from "react";
 import ReactDOM from "react-dom";
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var LoaderGrid = () => {
-  const Loader = /* @__PURE__ */ jsxs5("div", { className: "k-loading-mask", children: [
-    /* @__PURE__ */ jsx11("span", { className: "k-loading-text", children: "Loading" }),
-    /* @__PURE__ */ jsx11("div", { className: "k-loading-image" }),
-    /* @__PURE__ */ jsx11("div", { className: "k-loading-color" })
+  const Loader = /* @__PURE__ */ jsxs9("div", { className: "k-loading-mask", children: [
+    /* @__PURE__ */ jsx15("span", { className: "k-loading-text", children: "Loading" }),
+    /* @__PURE__ */ jsx15("div", { className: "k-loading-image" }),
+    /* @__PURE__ */ jsx15("div", { className: "k-loading-color" })
   ] });
   const gridContent = document && document.querySelector(".k-grid-content");
   const reportContent = document && document.querySelector(".loading-report");
@@ -937,12 +1405,12 @@ var LoaderGrid = () => {
 var AppLoader = (props) => {
   const { type = "grid", parent, minDuration } = props;
   const parentEl = type === "grid" ? document.querySelector(parent != null ? parent : ".k-grid-container") : parent ? document.querySelector(parent) : null;
-  const Loading = /* @__PURE__ */ jsxs5("div", { className: `${type}-loading k-loading-mask`, children: [
-    /* @__PURE__ */ jsx11("span", { className: "k-loading-text", children: "Loading" }),
-    /* @__PURE__ */ jsx11("div", { className: "k-loading-image" }),
-    /* @__PURE__ */ jsx11("div", { className: "k-loading-color" })
+  const Loading = /* @__PURE__ */ jsxs9("div", { className: `${type}-loading k-loading-mask`, children: [
+    /* @__PURE__ */ jsx15("span", { className: "k-loading-text", children: "Loading" }),
+    /* @__PURE__ */ jsx15("div", { className: "k-loading-image" }),
+    /* @__PURE__ */ jsx15("div", { className: "k-loading-color" })
   ] });
-  useEffect8(() => {
+  useEffect12(() => {
     if (type === "button") {
       const loadingEl = document.createElement("div");
       loadingEl.className = "icon button-loading k-loading-mask";
@@ -981,7 +1449,7 @@ var AppLoader = (props) => {
 import { Dropdown } from "react-bootstrap";
 import { BsArrowsFullscreen } from "react-icons/bs";
 import { FiCheckCircle, FiFilter, FiPlusSquare, FiRefreshCcw, FiSave } from "react-icons/fi";
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 var NavOptions = ({
   exportExcel,
   customButtons,
@@ -991,27 +1459,27 @@ var NavOptions = ({
   onClear,
   onExpandScreen
 }) => {
-  return /* @__PURE__ */ jsxs6(MenuOptions, { children: [
-    onCreate && /* @__PURE__ */ jsxs6("button", { className: "button-option", onClick: onCreate, children: [
-      /* @__PURE__ */ jsx12(FiPlusSquare, { className: "icon" }),
+  return /* @__PURE__ */ jsxs10(MenuOptions, { children: [
+    onCreate && /* @__PURE__ */ jsxs10("button", { className: "button-option", onClick: onCreate, children: [
+      /* @__PURE__ */ jsx16(FiPlusSquare, { className: "icon" }),
       " ",
-      /* @__PURE__ */ jsx12("span", { className: "text", children: "New" })
+      /* @__PURE__ */ jsx16("span", { className: "text", children: "New" })
     ] }),
-    onRefresh && /* @__PURE__ */ jsxs6("button", { className: "button-option", onClick: onRefresh, children: [
-      /* @__PURE__ */ jsx12(FiRefreshCcw, { className: "icon" }),
+    onRefresh && /* @__PURE__ */ jsxs10("button", { className: "button-option", onClick: onRefresh, children: [
+      /* @__PURE__ */ jsx16(FiRefreshCcw, { className: "icon" }),
       " ",
-      /* @__PURE__ */ jsx12("span", { className: "text", children: "Refresh" })
+      /* @__PURE__ */ jsx16("span", { className: "text", children: "Refresh" })
     ] }),
-    exportExcel && exportExcel.length > 0 && /* @__PURE__ */ jsxs6(Dropdown, { className: "button-option", children: [
-      /* @__PURE__ */ jsxs6(
+    exportExcel && exportExcel.length > 0 && /* @__PURE__ */ jsxs10(Dropdown, { className: "button-option", children: [
+      /* @__PURE__ */ jsxs10(
         Dropdown.Toggle,
         {
           id: "btnExport",
           className: "p-2 bg-light text-dark border-0 font-weight-bold",
           title: "Export to Excel",
           children: [
-            /* @__PURE__ */ jsx12(FiSave, { className: "icon" }),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx16(FiSave, { className: "icon" }),
+            /* @__PURE__ */ jsx16(
               "span",
               {
                 style: {
@@ -1025,45 +1493,45 @@ var NavOptions = ({
           ]
         }
       ),
-      /* @__PURE__ */ jsx12(Dropdown.Menu, { children: exportExcel.map((item, index) => {
-        return /* @__PURE__ */ jsxs6(Dropdown.Item, { onClick: item.onAction, children: [
-          /* @__PURE__ */ jsx12("i", { className: `${item.classNameIcon}   mr-2` }),
+      /* @__PURE__ */ jsx16(Dropdown.Menu, { children: exportExcel.map((item, index) => {
+        return /* @__PURE__ */ jsxs10(Dropdown.Item, { onClick: item.onAction, children: [
+          /* @__PURE__ */ jsx16("i", { className: `${item.classNameIcon}   mr-2` }),
           " ",
           item.title
         ] }, index);
       }) })
     ] }),
-    onSelect && /* @__PURE__ */ jsxs6("button", { className: "button-option", onClick: onSelect, children: [
-      /* @__PURE__ */ jsx12(FiCheckCircle, { className: "icon" }),
+    onSelect && /* @__PURE__ */ jsxs10("button", { className: "button-option", onClick: onSelect, children: [
+      /* @__PURE__ */ jsx16(FiCheckCircle, { className: "icon" }),
       " ",
-      /* @__PURE__ */ jsx12("span", { className: "text", children: "Select All" })
+      /* @__PURE__ */ jsx16("span", { className: "text", children: "Select All" })
     ] }),
-    onClear && /* @__PURE__ */ jsxs6("button", { className: "button-option", onClick: onClear, children: [
-      /* @__PURE__ */ jsx12(FiFilter, { className: "icon" }),
+    onClear && /* @__PURE__ */ jsxs10("button", { className: "button-option", onClick: onClear, children: [
+      /* @__PURE__ */ jsx16(FiFilter, { className: "icon" }),
       " ",
-      /* @__PURE__ */ jsx12("span", { className: "text", children: "Clear Filters" })
+      /* @__PURE__ */ jsx16("span", { className: "text", children: "Clear Filters" })
     ] }),
-    onExpandScreen && /* @__PURE__ */ jsxs6("button", { className: "button-option", onClick: onExpandScreen, children: [
-      /* @__PURE__ */ jsx12(BsArrowsFullscreen, { className: "icon" }),
+    onExpandScreen && /* @__PURE__ */ jsxs10("button", { className: "button-option", onClick: onExpandScreen, children: [
+      /* @__PURE__ */ jsx16(BsArrowsFullscreen, { className: "icon" }),
       " ",
-      /* @__PURE__ */ jsx12("span", { className: "text", children: "Full Page" })
+      /* @__PURE__ */ jsx16("span", { className: "text", children: "Full Page" })
     ] }),
     customButtons == null ? void 0 : customButtons.map((custom, index) => {
       if (custom.render) {
         return custom.render;
       }
-      return /* @__PURE__ */ jsxs6("button", { className: "button-option", onClick: custom.onAction, children: [
-        custom.Icon !== void 0 && /* @__PURE__ */ jsx12(custom.Icon, { className: "icon" }),
-        /* @__PURE__ */ jsx12("span", { className: "text", children: custom.title })
+      return /* @__PURE__ */ jsxs10("button", { className: "button-option", onClick: custom.onAction, children: [
+        custom.Icon !== void 0 && /* @__PURE__ */ jsx16(custom.Icon, { className: "icon" }),
+        /* @__PURE__ */ jsx16("span", { className: "text", children: custom.title })
       ] }, index);
     })
   ] });
 };
 
 // src/layout/title.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var Title = ({ title }) => {
-  return /* @__PURE__ */ jsx13(TitlePage, { children: title != null ? title : "Home" });
+  return /* @__PURE__ */ jsx17(TitlePage, { children: title != null ? title : "Home" });
 };
 export {
   AppBreadCrumb,
@@ -1075,6 +1543,10 @@ export {
   Breadcrumb,
   Button,
   CloseIcon,
+  Collapse_default as Collapse,
+  CollapseContent_default as CollapseContent,
+  CollapseContext_default as CollapseContext,
+  CollapseTrigger_default as CollapseTrigger,
   DrawerContext,
   DrawerContextProvider,
   DropEnumList,
@@ -1085,9 +1557,15 @@ export {
   ItemSidebar,
   LoaderGrid,
   Main,
-  MenuItem,
+  Menu_default as Menu,
+  MenuContext_default as MenuContext,
+  MenuGroup_default as MenuGroup,
+  MenuItem_default as MenuItem,
+  MenuItem2 as MenuItems,
   MenuOptions,
+  MenuSubmenu_default as MenuSubmenu,
   MenuTitle,
+  MenuValueContext_default as MenuValueContext,
   NavOptions,
   Navbar,
   SidebarMainContext,
@@ -1096,7 +1574,11 @@ export {
   Tab,
   Tabs,
   Title,
+  getOpenValuesByPathname,
+  useCollapse,
   useLocalStorage,
+  useMenu,
+  useMenuItemValue,
   usePrevious,
   useStep
 };