@unifiedsoftware/react-ui 1.0.6 → 1.0.7

package/dist/index.js

@@ -62,11 +62,13 @@ __export(src_exports, {
   AppBreadCrumb: () => AppBreadCrumb,
   AppBreadCrumbNav: () => AppBreadCrumbNav,
   AppLoader: () => AppLoader,
+  Badge: () => Badge_default,
   BreadCrumbContext: () => BreadCrumbContext,
   BreadCrumbContextProvider: () => BreadCrumbContextProvider,
   BreadCrumbTitle: () => BreadCrumbTitle,
   Breadcrumb: () => Breadcrumb,
   Button: () => Button,
+  Chip: () => Chip_default,
   CloseIcon: () => CloseIcon,
   Collapse: () => Collapse_default,
   CollapseContent: () => CollapseContent_default,
@@ -109,17 +111,51 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/components/Button/Button.tsx
+// src/components/Badge/Badge.tsx
 var import_clsx = __toESM(require("clsx"));
-var import_react = require("react");
-var import_ri = require("react-icons/ri");
 
 // src/constants/index.ts
 var PREFIX_CLS = "us-";
 
-// src/components/Button/Button.tsx
+// src/components/Badge/Badge.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var Button = (0, import_react.forwardRef)(
+var Badge = ({ children, placement, content }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_clsx.default)(`${PREFIX_CLS}badge-wrapper`), children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: (0, import_clsx.default)(`${PREFIX_CLS}badge`, {
+          [`${PREFIX_CLS}badge--${placement}`]: placement
+        }),
+        children: content
+      }
+    )
+  ] });
+};
+var Badge_default = Badge;
+
+// src/components/Button/Button.tsx
+var import_clsx3 = __toESM(require("clsx"));
+var import_react2 = require("react");
+var import_tb = require("react-icons/tb");
+
+// src/components/Icon/Icon.tsx
+var import_clsx2 = __toESM(require("clsx"));
+var import_react = require("react");
+var Icon = (0, import_react.forwardRef)(({ children, size }, ref) => {
+  const child = import_react.Children.only(children);
+  return (0, import_react.cloneElement)(child, __spreadProps(__spreadValues({
+    ref
+  }, child.props), {
+    className: (0, import_clsx2.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_runtime2 = require("react/jsx-runtime");
+var Button = (0, import_react2.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "button",
@@ -129,8 +165,9 @@ var Button = (0, import_react.forwardRef)(
       variant = "text",
       color = "primary",
       size = "md",
-      prefix,
-      suffix,
+      iconOnly,
+      startContent,
+      endContent,
       loading
     } = _b, rest = __objRest(_b, [
       "as",
@@ -140,44 +177,79 @@ var Button = (0, import_react.forwardRef)(
       "variant",
       "color",
       "size",
-      "prefix",
-      "suffix",
+      "iconOnly",
+      "startContent",
+      "endContent",
       "loading"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       Component,
       __spreadProps(__spreadValues({
         ref,
-        className: (0, import_clsx.default)(
+        className: (0, import_clsx3.default)(
           `${PREFIX_CLS}button`,
           {
             [`${PREFIX_CLS}button--${variant}`]: variant,
             [`${PREFIX_CLS}button--${color}`]: color,
-            [`${PREFIX_CLS}button--${size}`]: size
+            [`${PREFIX_CLS}button--${size}`]: size,
+            [`${PREFIX_CLS}button--icon-only`]: iconOnly
           },
           className
         ),
         role
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${PREFIX_CLS}overlay` }),
-          loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ri.RiLoader4Line, { className: `${PREFIX_CLS}icon ${PREFIX_CLS}animation-spin` }) : prefix,
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${PREFIX_CLS}button__content`, children }),
-          suffix
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `${PREFIX_CLS}overlay` }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `${PREFIX_CLS}outline` }),
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon_default, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tb.TbLoader2, { className: `${PREFIX_CLS}animation-spin` }) }) : startContent,
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `${PREFIX_CLS}button__content`, children }),
+          endContent
         ]
       })
     );
   }
 );
 
-// src/components/Collapse/Collapse.tsx
+// src/components/Chip/Chip.tsx
+var import_clsx4 = __toESM(require("clsx"));
 var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Chip = (0, import_react3.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_runtime3.jsxs)(
+      Component,
+      __spreadProps(__spreadValues({
+        ref,
+        className: (0, import_clsx4.default)(
+          `${PREFIX_CLS}chip`,
+          {
+            [`${PREFIX_CLS}chip--${variant}`]: variant,
+            [`${PREFIX_CLS}chip--${color}`]: color,
+            [`${PREFIX_CLS}chip--${size}`]: size
+          },
+          className
+        )
+      }, rest), {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_clsx4.default)(`${PREFIX_CLS}overlay`) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `${PREFIX_CLS}outline` }),
+          children
+        ]
+      })
+    );
+  }
+);
+var Chip_default = Chip;
+
+// src/components/Collapse/Collapse.tsx
+var import_react5 = require("react");
 
 // src/components/Collapse/CollapseContext.tsx
-var import_react2 = require("react");
-var CollapseContext = (0, import_react2.createContext)(null);
+var import_react4 = require("react");
+var CollapseContext = (0, import_react4.createContext)(null);
 var useCollapse = () => {
-  const context = (0, import_react2.useContext)(CollapseContext);
+  const context = (0, import_react4.useContext)(CollapseContext);
   if (!context) {
     throw new Error("`useCollapse` must be used within a `<Collapse />`");
   }
@@ -186,12 +258,12 @@ var useCollapse = () => {
 var CollapseContext_default = CollapseContext;
 
 // src/components/Collapse/Collapse.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Collapse = ({ children, isOpen, onOpen, onClose, onToggle }) => {
-  const collapseRef = (0, import_react3.useRef)(null);
-  const [selfIsOpen, setSelfIsOpen] = (0, import_react3.useState)(isOpen != null ? isOpen : false);
-  const [heightAuto, setHeightAuto] = (0, import_react3.useState)(false);
-  const [trigger, content] = import_react3.Children.toArray(children);
+  const collapseRef = (0, import_react5.useRef)(null);
+  const [selfIsOpen, setSelfIsOpen] = (0, import_react5.useState)(isOpen != null ? isOpen : false);
+  const [heightAuto, setHeightAuto] = (0, import_react5.useState)(false);
+  const [trigger, content] = import_react5.Children.toArray(children);
   const handleOpen = () => {
     setSelfIsOpen(true);
     onOpen == null ? void 0 : onOpen();
@@ -204,7 +276,7 @@ var Collapse = ({ children, isOpen, onOpen, onClose, onToggle }) => {
     setSelfIsOpen((prevState) => !prevState);
     onToggle == null ? void 0 : onToggle();
   };
-  (0, import_react3.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (isOpen !== void 0) {
       setSelfIsOpen(isOpen);
     }
@@ -216,7 +288,7 @@ var Collapse = ({ children, isOpen, onOpen, onClose, onToggle }) => {
       }
     }, 100);
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     CollapseContext_default.Provider,
     {
       value: {
@@ -237,13 +309,13 @@ var Collapse = ({ children, isOpen, onOpen, onClose, onToggle }) => {
 var Collapse_default = Collapse;
 
 // src/components/Collapse/CollapseContent.tsx
-var import_clsx2 = __toESM(require("clsx"));
-var import_react4 = require("react");
-var CollapseContent = (0, import_react4.forwardRef)(({ children }, ref) => {
+var import_clsx5 = __toESM(require("clsx"));
+var import_react6 = require("react");
+var CollapseContent = (0, import_react6.forwardRef)(({ children }, ref) => {
   var _a, _b;
   const { collapseRef, isOpen, heightAuto } = useCollapse();
-  const child = import_react4.Children.only(children);
-  return (0, import_react4.cloneElement)(child, __spreadProps(__spreadValues({}, child.props), {
+  const child = import_react6.Children.only(children);
+  return (0, import_react6.cloneElement)(child, __spreadProps(__spreadValues({}, child.props), {
     ref: (node) => {
       collapseRef.current = node;
       if (ref !== null) {
@@ -253,17 +325,17 @@ var CollapseContent = (0, import_react4.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_clsx2.default)(`${PREFIX_CLS}collapse`, child.props.className)
+    className: (0, import_clsx5.default)(`${PREFIX_CLS}collapse`, child.props.className)
   }));
 });
 var CollapseContent_default = CollapseContent;
 
 // src/components/Collapse/CollapseTrigger.tsx
-var import_react5 = require("react");
-var CollapseTrigger = (0, import_react5.forwardRef)(({ children }, ref) => {
+var import_react7 = require("react");
+var CollapseTrigger = (0, import_react7.forwardRef)(({ children }, ref) => {
   const { collapseRef, onToggle } = useCollapse();
-  const child = import_react5.Children.only(children);
-  return (0, import_react5.cloneElement)(child, __spreadValues({
+  const child = import_react7.Children.only(children);
+  return (0, import_react7.cloneElement)(child, __spreadValues({
     ref,
     onClick: (event) => {
       var _a, _b;
@@ -278,14 +350,14 @@ var CollapseTrigger = (0, import_react5.forwardRef)(({ children }, ref) => {
 var CollapseTrigger_default = CollapseTrigger;
 
 // src/components/Menu/Menu.tsx
-var import_clsx6 = __toESM(require("clsx"));
-var import_react11 = require("react");
+var import_clsx9 = __toESM(require("clsx"));
+var import_react13 = require("react");
 
 // src/components/Menu/MenuContext.tsx
-var import_react6 = require("react");
-var MenuContext = (0, import_react6.createContext)(null);
+var import_react8 = require("react");
+var MenuContext = (0, import_react8.createContext)(null);
 var useMenu = () => {
-  const context = (0, import_react6.useContext)(MenuContext);
+  const context = (0, import_react8.useContext)(MenuContext);
   if (!context) {
     throw new Error("`useMenu` must be used within a `<Menu />`");
   }
@@ -294,18 +366,18 @@ var useMenu = () => {
 var MenuContext_default = MenuContext;
 
 // src/components/Menu/MenuGroup.tsx
-var import_clsx5 = __toESM(require("clsx"));
-var import_react10 = require("react");
+var import_clsx8 = __toESM(require("clsx"));
+var import_react12 = require("react");
 
 // src/components/Menu/MenuItem.tsx
-var import_clsx3 = __toESM(require("clsx"));
-var import_react8 = require("react");
+var import_clsx6 = __toESM(require("clsx"));
+var import_react10 = require("react");
 
 // src/components/Menu/MenuValueContext.tsx
-var import_react7 = require("react");
-var MenuValueContext = (0, import_react7.createContext)([]);
+var import_react9 = require("react");
+var MenuValueContext = (0, import_react9.createContext)([]);
 var useMenuItemValue = () => {
-  const context = (0, import_react7.useContext)(MenuValueContext);
+  const context = (0, import_react9.useContext)(MenuValueContext);
   if (!context) {
     throw new Error("`useMenuValue` must be used within a `<MenuValueContext.Provider />`");
   }
@@ -314,11 +386,11 @@ var useMenuItemValue = () => {
 var MenuValueContext_default = MenuValueContext;
 
 // src/components/Menu/MenuItem.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var MenuItem = (0, import_react8.forwardRef)((props, ref) => {
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var MenuItem = (0, import_react10.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, openMode, onChange, onOpen, onItemSelect } = useMenu();
-  const values = (0, import_react8.useContext)(MenuValueContext_default);
+  const values = (0, import_react10.useContext)(MenuValueContext_default);
   const mergedValues = [...values, value];
   const handleClick = (event) => {
     if (value !== void 0) {
@@ -327,17 +399,17 @@ var MenuItem = (0, import_react8.forwardRef)((props, ref) => {
     onClick == null ? void 0 : onClick(event);
     onItemSelect == null ? void 0 : onItemSelect(props);
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (openMode === "automatic" && originalValue.length > 0 && originalValue[originalValue.length - 1] === value) {
       onOpen(values);
       onChange(mergedValues);
     }
   }, [value, originalValue, openMode]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     Component,
     __spreadProps(__spreadValues({
       ref,
-      className: (0, import_clsx3.default)(
+      className: (0, import_clsx6.default)(
         `${PREFIX_CLS}menu-item`,
         {
           [`${PREFIX_CLS}menu-item--selected`]: menuValue.includes(value),
@@ -351,9 +423,9 @@ var MenuItem = (0, import_react8.forwardRef)((props, ref) => {
       onClick: handleClick
     }, rest), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
-        icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
+        icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) })
       ]
     })
   );
@@ -362,8 +434,8 @@ MenuItem.displayName = "MenuItem";
 var MenuItem_default = MenuItem;
 
 // src/components/Menu/MenuSubmenu.tsx
-var import_clsx4 = __toESM(require("clsx"));
-var import_react9 = require("react");
+var import_clsx7 = __toESM(require("clsx"));
+var import_react11 = require("react");
 var import_md = require("react-icons/md");
 
 // src/components/Menu/utils.ts
@@ -390,7 +462,7 @@ var addOrRemoveValueInArray = (array, value) => {
 };
 
 // src/components/Menu/MenuSubmenu.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var MenuSubmenu = (_a) => {
   var _b = _a, {
     children,
@@ -414,13 +486,13 @@ var MenuSubmenu = (_a) => {
     "onClick"
   ]);
   const { value: menuValue, openValues, expandMode, onOpen } = useMenu();
-  const values = (0, import_react9.useContext)(MenuValueContext_default);
+  const values = (0, import_react11.useContext)(MenuValueContext_default);
   const isOpen = openValues.includes(value);
   const mergedValues = [...values, value];
-  const content = (0, import_react9.useMemo)(() => {
+  const content = (0, import_react11.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_runtime4.jsx)(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "submenu" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuSubmenu, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "group" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuGroup_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index);
+      return type === "item" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "submenu" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuSubmenu, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "group" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuGroup_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index);
     });
   }, [items]);
   const handleClick = (event) => {
@@ -438,11 +510,11 @@ var MenuSubmenu = (_a) => {
     }
     onClick == null ? void 0 : onClick(event);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuValueContext_default.Provider, { value: mergedValues, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_clsx4.default)(`${PREFIX_CLS}menu-submenu`), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Collapse_default, { isOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CollapseTrigger_default, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuValueContext_default.Provider, { value: mergedValues, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_clsx7.default)(`${PREFIX_CLS}menu-submenu`), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Collapse_default, { isOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CollapseTrigger_default, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       __spreadProps(__spreadValues({
-        className: (0, import_clsx4.default)(
+        className: (0, import_clsx7.default)(
           `${PREFIX_CLS}menu-item`,
           {
             [`${PREFIX_CLS}menu-item--selected`]: menuValue.includes(value) || items && mergedValues.includes(menuValue)
@@ -455,17 +527,17 @@ var MenuSubmenu = (_a) => {
         onClick: handleClick
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
-          icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `${PREFIX_CLS}menu-item__icon`, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_md.MdKeyboardArrowUp, { className: `${PREFIX_CLS}icon` }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_md.MdKeyboardArrowDown, { className: `${PREFIX_CLS}icon` }) })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
+          icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `${PREFIX_CLS}menu-item__icon`, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_md.MdKeyboardArrowUp, { className: `${PREFIX_CLS}icon` }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_md.MdKeyboardArrowDown, { className: `${PREFIX_CLS}icon` }) })
         ]
       })
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CollapseContent_default, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CollapseContent_default, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "ul",
       {
-        className: (0, import_clsx4.default)(`${PREFIX_CLS}menu`, {
+        className: (0, import_clsx7.default)(`${PREFIX_CLS}menu`, {
           [`${PREFIX_CLS}menu-open`]: !open
         }),
         children: content || children
@@ -476,7 +548,7 @@ var MenuSubmenu = (_a) => {
 var MenuSubmenu_default = MenuSubmenu;
 
 // src/components/Menu/MenuGroup.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var MenuGroup = (_a) => {
   var _b = _a, {
     children,
@@ -495,24 +567,24 @@ var MenuGroup = (_a) => {
     "level",
     "items"
   ]);
-  const content = (0, import_react10.useMemo)(() => {
+  const content = (0, import_react12.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_runtime5.jsx)(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MenuSubmenu_default, __spreadValues({}, item), index) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MenuItem_default, __spreadValues({}, item), index);
+      return type === "item" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuSubmenu_default, __spreadValues({}, item), index) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuItem_default, __spreadValues({}, item), index);
     });
   }, [items]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       __spreadProps(__spreadValues({
-        className: (0, import_clsx5.default)(`${PREFIX_CLS}menu-group`, className),
+        className: (0, import_clsx8.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_runtime5.jsx)("div", { className: `${PREFIX_CLS}menu-group__icon`, children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `${PREFIX_CLS}menu-group__content`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `${PREFIX_CLS}menu-group__title`, children: title }) })
+          icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${PREFIX_CLS}menu-group__icon`, children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${PREFIX_CLS}menu-group__content`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: `${PREFIX_CLS}menu-group__title`, children: title }) })
         ]
       })
     ),
@@ -522,7 +594,7 @@ var MenuGroup = (_a) => {
 var MenuGroup_default = MenuGroup;
 
 // src/components/Menu/Menu.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var Menu = (_a) => {
   var _b = _a, {
     children,
@@ -548,12 +620,12 @@ var Menu = (_a) => {
     "onItemSelect"
   ]);
   var _a2;
-  const [selfValue, setSelfValue] = (0, import_react11.useState)((_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : []);
-  const [selfOpenValues, setSelfOpenValues] = (0, import_react11.useState)(openValuesProp != null ? openValuesProp : []);
-  const content = (0, import_react11.useMemo)(() => {
+  const [selfValue, setSelfValue] = (0, import_react13.useState)((_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : []);
+  const [selfOpenValues, setSelfOpenValues] = (0, import_react13.useState)(openValuesProp != null ? openValuesProp : []);
+  const content = (0, import_react13.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_runtime6.jsx)(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuSubmenu_default, __spreadValues({}, item), index) : type === "group" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuGroup_default, __spreadValues({}, item), index) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuItem_default, __spreadValues({}, item), index);
+      return type === "item" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuSubmenu_default, __spreadValues({}, item), index) : type === "group" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuGroup_default, __spreadValues({}, item), index) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuItem_default, __spreadValues({}, item), index);
     });
   }, [items]);
   const handleChange = (value) => {
@@ -573,17 +645,17 @@ var Menu = (_a) => {
   const handleItemSelect = (props) => {
     onItemSelect == null ? void 0 : onItemSelect(props);
   };
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (valueProp !== void 0 && openMode !== "automatic") {
       setSelfValue(valueProp);
     }
   }, [valueProp]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (openValuesProp !== void 0) {
       setSelfOpenValues(openValuesProp);
     }
   }, [openValuesProp]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     MenuContext_default.Provider,
     {
       value: {
@@ -596,7 +668,7 @@ var Menu = (_a) => {
         onChange: handleChange,
         onItemSelect: handleItemSelect
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", __spreadProps(__spreadValues({ className: (0, import_clsx6.default)(`${PREFIX_CLS}menu`) }, rest), { children: content || children }))
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", __spreadProps(__spreadValues({ className: (0, import_clsx9.default)(`${PREFIX_CLS}menu`) }, rest), { children: content || children }))
     }
   );
 };
@@ -604,15 +676,16 @@ Menu.displayName = "Menu";
 var Menu_default = Menu;
 
 // src/components/Tabs/Tab.tsx
-var import_clsx7 = __toESM(require("clsx"));
+var import_clsx10 = __toESM(require("clsx"));
 var import_merge_refs = __toESM(require("merge-refs"));
-var import_react13 = require("react");
+var import_react15 = require("react");
+var import_tb2 = require("react-icons/tb");
 
 // src/components/Tabs/TabsContext.ts
-var import_react12 = require("react");
-var TabsContext = (0, import_react12.createContext)(null);
+var import_react14 = require("react");
+var TabsContext = (0, import_react14.createContext)(null);
 var useTabs = () => {
-  const context = (0, import_react12.useContext)(TabsContext);
+  const context = (0, import_react14.useContext)(TabsContext);
   if (!context) {
     throw new Error("`useTabs` must be used within a `<Tabs />`");
   }
@@ -620,12 +693,12 @@ var useTabs = () => {
 };
 
 // src/components/Tabs/Tab.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Tab = (0, import_react13.forwardRef)(
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Tab = (0, import_react15.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", children, className, role = "presentation", value, onClick } = _b, rest = __objRest(_b, ["as", "children", "className", "role", "value", "onClick"]);
-    const tabRef = (0, import_react13.useRef)(null);
-    const tabs = useTabs();
+    var _b = _a, { as: Component = "div", children, className, role = "presentation", value, closable, disabled, onClick } = _b, rest = __objRest(_b, ["as", "children", "className", "role", "value", "closable", "disabled", "onClick"]);
+    const tabRef = (0, import_react15.useRef)(null);
+    const _a2 = useTabs(), { onClose, registerItem } = _a2, tabs = __objRest(_a2, ["onClose", "registerItem"]);
     const handleClick = (event) => {
       const previousTab = tabs.previousTabRef.current;
       const currentTab = tabRef.current;
@@ -660,23 +733,35 @@ var Tab = (0, import_react13.forwardRef)(
       tabs.onChange(value);
       onClick == null ? void 0 : onClick(event);
     };
-    (0, import_react13.useEffect)(() => {
+    const handleClose = (event) => {
+      event.stopPropagation();
+      onClose(value);
+    };
+    (0, import_react15.useEffect)(() => {
+      registerItem({ value, disabled });
       if (value === tabs.value) {
         tabs.previousTabRef.current = tabRef.current;
       }
-    }, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    }, [value, tabs.value]);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       Component,
       __spreadProps(__spreadValues({
-        ref: (0, import_merge_refs.default)(tabRef, ref),
-        className: (0, import_clsx7.default)(`${PREFIX_CLS}tab`, { [`${PREFIX_CLS}tab--selected`]: value === tabs.value }, className),
+        ref: (0, import_merge_refs.default)(tabRef, ref, (el) => tabs.tabRefs.current[value] = el),
+        className: (0, import_clsx10.default)(
+          `${PREFIX_CLS}tab`,
+          { [`${PREFIX_CLS}tab--selected`]: value === tabs.value, [`${PREFIX_CLS}tab--disabled`]: disabled },
+          className
+        ),
         role,
         onClick: handleClick
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${PREFIX_CLS}overlay` }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${PREFIX_CLS}tab__content`, children }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${PREFIX_CLS}tab__indicator` })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${PREFIX_CLS}tab__content`, children: [
+            children,
+            closable && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button, { variant: "text", color: "secondary", iconOnly: true, size: "xs", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon_default, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_tb2.TbX, {}) }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${PREFIX_CLS}tab__indicator` })
         ]
       })
     );
@@ -684,33 +769,125 @@ var Tab = (0, import_react13.forwardRef)(
 );
 
 // src/components/Tabs/Tabs.tsx
-var import_clsx8 = __toESM(require("clsx"));
-var import_react14 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_clsx11 = __toESM(require("clsx"));
+var import_react16 = require("react");
+
+// src/utils/scroll.ts
+var scrollToItem = (parentElement, currentElement) => {
+  const parentRect = parentElement.getBoundingClientRect();
+  const currentRect = currentElement.getBoundingClientRect();
+  const behavior = "smooth";
+  const previousElement = currentElement.previousSibling;
+  const previousRect = (previousElement == null ? void 0 : previousElement.getBoundingClientRect()) || currentRect;
+  if (parentRect.left > previousRect.left) {
+    let offset = 0;
+    if (previousElement) {
+      offset = previousRect.left - parentRect.left + parentElement.scrollLeft + previousRect.width / 4;
+    }
+    parentElement.scrollTo({ behavior, left: offset });
+  }
+  const nextElement = currentElement.nextSibling;
+  const nextRect = (nextElement == null ? void 0 : nextElement.getBoundingClientRect()) || currentRect;
+  if (parentRect.right < nextRect.right) {
+    let offset = parentElement.scrollWidth;
+    if (nextElement) {
+      offset = nextRect.right - parentRect.right + parentElement.scrollLeft - nextRect.width / 4;
+    }
+    parentElement.scrollTo({ behavior, left: offset });
+  }
+};
+
+// src/components/Tabs/Tabs.tsx
+var import_jsx_runtime10 = require("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 = (0, import_react14.useRef)(null);
-  const [selfValue, setSelfValue] = (0, import_react14.useState)(value != null ? value : defaultValue);
+  var _b = _a, {
+    children,
+    className,
+    value,
+    defaultValue,
+    alignment = "start",
+    onChange,
+    onClose
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "className",
+    "value",
+    "defaultValue",
+    "alignment",
+    "onChange",
+    "onClose"
+  ]);
+  const tabsRef = (0, import_react16.useRef)(null);
+  const tabRefs = (0, import_react16.useRef)({});
+  const previousTabRef = (0, import_react16.useRef)(null);
+  const [selfValue, setSelfValue] = (0, import_react16.useState)(value != null ? value : defaultValue);
+  const [items, setItems] = (0, import_react16.useState)([]);
+  const registerItem = (item) => {
+    setItems((prevItems) => {
+      const index = prevItems.findIndex((item2) => item2.value);
+      if (index === -1) {
+        prevItems.push(item);
+      }
+      return prevItems;
+    });
+  };
+  const scrollToTab = (value2) => {
+    const tabsEl = tabsRef.current;
+    if (!tabsEl)
+      return;
+    const currentTabEl = tabRefs.current[value2];
+    if (!currentTabEl)
+      return;
+    scrollToItem(tabsEl, currentTabEl);
+  };
   const handleChange = (value2) => {
     setSelfValue(value2);
     onChange == null ? void 0 : onChange(value2);
+    scrollToTab(value2);
+  };
+  const handleClose = (value2) => {
+    onClose == null ? void 0 : onClose(value2);
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (value !== void 0) {
       setSelfValue(value);
+      scrollToTab(value);
     }
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(TabsContext.Provider, { value: { previousTabRef, value: selfValue, onChange: handleChange }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", __spreadProps(__spreadValues({ className: (0, import_clsx8.default)(`${prefixCls}tabs`, className) }, rest), { children })),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${prefixCls}divider` })
-  ] });
+  (0, import_react16.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_runtime10.jsxs)(
+    TabsContext.Provider,
+    {
+      value: { previousTabRef, tabRefs, value: selfValue, onChange: handleChange, onClose: handleClose, registerItem },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          __spreadProps(__spreadValues({
+            ref: tabsRef,
+            className: (0, import_clsx11.default)(`${prefixCls}tabs`, { [`${PREFIX_CLS}tabs--${alignment}`]: alignment }, className)
+          }, rest), {
+            children: import_react16.Children.map(children, (child, index) => {
+              var _a2;
+              return !(0, import_react16.isValidElement)(child) ? null : (0, import_react16.cloneElement)(child, __spreadProps(__spreadValues({}, child.props), { value: (_a2 = child.props.value) != null ? _a2 : index }));
+            })
+          })
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `${prefixCls}divider` })
+      ]
+    }
+  );
 };
 
 // src/components/DropdownEnumList.tsx
 var import_kendo_react_dropdowns = require("@progress/kendo-react-dropdowns");
-var import_react15 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function parsearDataForComboBox(array, key, text, itemAll = false) {
   const dataForComboBox = [];
   if (itemAll)
@@ -745,16 +922,16 @@ function EnumToArray(typeEnum, replaceGuionForSpace = true, description) {
   return values;
 }
 var DropEnumList = ({ dataEnum, description, onChange, width, defaultValue }) => {
-  const [value, setValue] = (0, import_react15.useState)("");
-  const [data, setData] = (0, import_react15.useState)([]);
-  (0, import_react15.useEffect)(() => {
+  const [value, setValue] = (0, import_react17.useState)("");
+  const [data, setData] = (0, import_react17.useState)([]);
+  (0, import_react17.useEffect)(() => {
     setData(
       parsearDataForComboBox(EnumToArray(dataEnum, true, description), "value", "label", false).sort(
         (a, b) => Number(a.key) - Number(b.key)
       )
     );
   }, []);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (data.length > 0) {
       setValue(data.filter((x) => x.key == defaultValue)[0]);
     }
@@ -763,7 +940,7 @@ var DropEnumList = ({ dataEnum, description, onChange, width, defaultValue }) =>
     onChange(e);
     setValue(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_kendo_react_dropdowns.DropDownList,
     {
       className: "d-inline-block align-middle mr-2",
@@ -784,22 +961,22 @@ var DropEnumList = ({ dataEnum, description, onChange, width, defaultValue }) =>
 };
 
 // src/contexts/BreadCrumbContext.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 
 // src/hooks/useLocalStorage.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 
 // src/hooks/useEventListener.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 
 // src/hooks/useIsomorphicLayoutEffect.tsx
-var import_react16 = require("react");
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react16.useLayoutEffect : import_react16.useEffect;
+var import_react18 = require("react");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react18.useLayoutEffect : import_react18.useEffect;
 var useIsomorphicLayoutEffect_default = useIsomorphicLayoutEffect;
 
 // src/hooks/useEventListener.tsx
 function useEventListener(handler) {
-  const savedHandler = (0, import_react17.useRef)(handler);
+  const savedHandler = (0, import_react19.useRef)(handler);
   useIsomorphicLayoutEffect_default(() => {
     savedHandler.current = handler;
   }, [handler]);
@@ -808,7 +985,7 @@ var useEventListener_default = useEventListener;
 
 // src/hooks/useLocalStorage.tsx
 function useLocalStorage(key, initialValue) {
-  const readValue = (0, import_react18.useCallback)(() => {
+  const readValue = (0, import_react20.useCallback)(() => {
     if (typeof window === "undefined") {
       return initialValue;
     }
@@ -820,8 +997,8 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   }, [initialValue, key]);
-  const [storedValue, setStoredValue] = (0, import_react18.useState)(readValue);
-  const setValue = (0, import_react18.useCallback)(
+  const [storedValue, setStoredValue] = (0, import_react20.useState)(readValue);
+  const setValue = (0, import_react20.useCallback)(
     (value) => {
       if (typeof window == "undefined") {
         console.warn(`Tried setting localStorage key \u201C${key}\u201D even though environment is not a client`);
@@ -837,10 +1014,10 @@ function useLocalStorage(key, initialValue) {
     },
     [key, storedValue]
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     setStoredValue(readValue());
   }, []);
-  const handleStorageChange = (0, import_react18.useCallback)(() => {
+  const handleStorageChange = (0, import_react20.useCallback)(() => {
     setStoredValue(readValue());
   }, [readValue]);
   useEventListener_default("storage", handleStorageChange);
@@ -857,15 +1034,15 @@ function parseJSON(value) {
 }
 
 // src/contexts/BreadCrumbContext.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var BreadCrumbContext = (0, import_react19.createContext)({});
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var BreadCrumbContext = (0, import_react21.createContext)({});
 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] = (0, import_react19.useState)([]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  const [routes, setRoutes] = (0, import_react21.useState)([]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     BreadCrumbContext.Provider,
     {
       value: {
@@ -886,18 +1063,18 @@ var BreadCrumbContextProvider = ({ children }) => {
 };
 
 // src/contexts/DrawerContext.tsx
-var import_react20 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var DrawerContext = (0, import_react20.createContext)({});
+var import_react22 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var DrawerContext = (0, import_react22.createContext)({});
 var DrawerContextProvider = ({ children }) => {
-  const [active, setActive] = (0, import_react20.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DrawerContext.Provider, { value: { active, setActive }, children });
+  const [active, setActive] = (0, import_react22.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DrawerContext.Provider, { value: { active, setActive }, children });
 };
 
 // src/contexts/HistoryContext.tsx
-var import_react21 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var HistoryContext = (0, import_react21.createContext)({});
+var import_react23 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var HistoryContext = (0, import_react23.createContext)({});
 var HistoryContextProvider = ({ children }) => {
   const [list, setList] = useLocalStorage("@list_paths", []);
   const updateList = (value) => {
@@ -909,41 +1086,41 @@ var HistoryContextProvider = ({ children }) => {
       })
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HistoryContext.Provider, { value: { list, updateList }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HistoryContext.Provider, { value: { list, updateList }, children });
 };
 
 // src/contexts/SidebarMainContext.tsx
-var import_react22 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var SidebarMainContext = (0, import_react22.createContext)({});
+var import_react24 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var SidebarMainContext = (0, import_react24.createContext)({});
 var SidebarMainContextProvider = ({ children }) => {
-  const [open2, setOpen] = (0, import_react22.useState)(true);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SidebarMainContext.Provider, { value: { open: open2, setOpen }, children });
+  const [open2, setOpen] = (0, import_react24.useState)(true);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SidebarMainContext.Provider, { value: { open: open2, setOpen }, children });
 };
 
 // src/contexts/GlobalProvider.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function GlobalProvider({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HistoryContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BreadCrumbContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SidebarMainContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DrawerContextProvider, { children }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(HistoryContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BreadCrumbContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SidebarMainContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DrawerContextProvider, { children }) }) }) });
 }
 
 // src/hooks/usePrevious.tsx
-var import_react23 = require("react");
+var import_react25 = require("react");
 var usePrevious = (value) => {
-  const ref = (0, import_react23.useRef)();
-  (0, import_react23.useEffect)(() => {
+  const ref = (0, import_react25.useRef)();
+  (0, import_react25.useEffect)(() => {
     ref.current = value;
   });
   return ref.current;
 };
 
 // src/hooks/useStep.tsx
-var import_react24 = require("react");
+var import_react26 = require("react");
 var useStep = (maxStep) => {
-  const [currentStep, setCurrentStep] = (0, import_react24.useState)(1);
-  const canGoToNextStep = (0, import_react24.useMemo)(() => currentStep + 1 <= maxStep, [currentStep, maxStep]);
-  const canGoToPrevStep = (0, import_react24.useMemo)(() => currentStep - 1 >= 1, [currentStep]);
-  const setStep = (0, import_react24.useCallback)(
+  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)(
     (step) => {
       const newStep = step instanceof Function ? step(currentStep) : step;
       if (newStep >= 1 && newStep <= maxStep) {
@@ -954,17 +1131,17 @@ var useStep = (maxStep) => {
     },
     [maxStep, currentStep]
   );
-  const goToNextStep = (0, import_react24.useCallback)(() => {
+  const goToNextStep = (0, import_react26.useCallback)(() => {
     if (canGoToNextStep) {
       setCurrentStep((step) => step + 1);
     }
   }, [canGoToNextStep]);
-  const goToPrevStep = (0, import_react24.useCallback)(() => {
+  const goToPrevStep = (0, import_react26.useCallback)(() => {
     if (canGoToPrevStep) {
       setCurrentStep((step) => step - 1);
     }
   }, [canGoToPrevStep]);
-  const reset = (0, import_react24.useCallback)(() => {
+  const reset = (0, import_react26.useCallback)(() => {
     setCurrentStep(1);
   }, []);
   return [
@@ -981,7 +1158,7 @@ var useStep = (maxStep) => {
 };
 
 // src/layout/AppBreadcrumb.tsx
-var import_react25 = require("react");
+var import_react27 = require("react");
 var import_md2 = require("react-icons/md");
 var import_vsc = require("react-icons/vsc");
 var import_react_router_dom3 = require("react-router-dom");
@@ -1406,48 +1583,48 @@ var CloseIcon = import_styled_components6.default.button`
 `;
 
 // src/layout/AppBreadcrumb.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var AppBreadCrumb = ({ title, paths }) => {
-  const { setRoutes } = (0, import_react25.useContext)(BreadCrumbContext);
-  (0, import_react25.useEffect)(() => {
+  const { setRoutes } = (0, import_react27.useContext)(BreadCrumbContext);
+  (0, import_react27.useEffect)(() => {
     if (!(paths == null ? void 0 : paths.length))
       return;
     setRoutes(paths != null ? paths : []);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadCrumbTitle, { children: title != null ? title : "Home" });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BreadCrumbTitle, { children: title != null ? title : "Home" });
 };
 var AppBreadCrumbNav = ({
   paths,
   onPush
 }) => {
-  const { active, path, routes, setRoutes } = (0, import_react25.useContext)(BreadCrumbContext);
-  const { updateList } = (0, import_react25.useContext)(HistoryContext);
-  (0, import_react25.useEffect)(() => {
+  const { active, path, routes, setRoutes } = (0, import_react27.useContext)(BreadCrumbContext);
+  const { updateList } = (0, import_react27.useContext)(HistoryContext);
+  (0, import_react27.useEffect)(() => {
     updateList({ name: active, path });
   }, [path, active]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     setRoutes(paths != null ? paths : []);
   }, [paths]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Breadcrumb, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "d-flex align-items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_router_dom3.Link, { to: "/", className: "link", children: "HOME" }),
-      routes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_vsc.VscChevronRight, { color: "black" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Breadcrumb, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "d-flex align-items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_router_dom3.Link, { to: "/", className: "link", children: "HOME" }),
+      routes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_vsc.VscChevronRight, { color: "black" }),
       routes.length > 0 ? routes.map((i, idx, arr) => {
         if (i.route === -1) {
-          return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "link", onClick: () => onPush(-1), children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "link", onClick: () => onPush(-1), children: [
             i.title,
             " ",
-            idx + 1 === arr.length ? "" : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_vsc.VscChevronRight, { color: "black" })
+            idx + 1 === arr.length ? "" : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_vsc.VscChevronRight, { color: "black" })
           ] }, idx);
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_router_dom3.Link, { to: i.route, className: "link", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_router_dom3.Link, { to: i.route, className: "link", children: [
           i.title,
           " ",
-          idx + 1 === arr.length ? "" : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_vsc.VscChevronRight, { color: "black" })
+          idx + 1 === arr.length ? "" : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_vsc.VscChevronRight, { color: "black" })
         ] }, idx);
       }) : ""
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       CloseIcon,
       {
         onClick: () => {
@@ -1458,21 +1635,21 @@ var AppBreadCrumbNav = ({
           }
           onPush(`${routes && routes[(routes == null ? void 0 : routes.length) - 2].route}`);
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_md2.MdClose, { fontSize: 20 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_md2.MdClose, { fontSize: 20 })
       }
     )
   ] });
 };
 
 // src/layout/AppLoader.tsx
-var import_react26 = require("react");
+var import_react28 = require("react");
 var import_react_dom = __toESM(require("react-dom"));
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var LoaderGrid = () => {
-  const Loader = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-loading-mask", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "k-loading-text", children: "Loading" }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-loading-image" }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-loading-color" })
+  const Loader = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "k-loading-mask", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "k-loading-text", children: "Loading" }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "k-loading-image" }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "k-loading-color" })
   ] });
   const gridContent = document && document.querySelector(".k-grid-content");
   const reportContent = document && document.querySelector(".loading-report");
@@ -1481,12 +1658,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__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `${type}-loading k-loading-mask`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "k-loading-text", children: "Loading" }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-loading-image" }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-loading-color" })
+  const Loading = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: `${type}-loading k-loading-mask`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "k-loading-text", children: "Loading" }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "k-loading-image" }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "k-loading-color" })
   ] });
-  (0, import_react26.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (type === "button") {
       const loadingEl = document.createElement("div");
       loadingEl.className = "icon button-loading k-loading-mask";
@@ -1525,7 +1702,7 @@ var AppLoader = (props) => {
 var import_react_bootstrap = require("react-bootstrap");
 var import_bs = require("react-icons/bs");
 var import_fi = require("react-icons/fi");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var NavOptions = ({
   exportExcel,
   customButtons,
@@ -1535,27 +1712,27 @@ var NavOptions = ({
   onClear,
   onExpandScreen
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(MenuOptions, { children: [
-    onCreate && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("button", { className: "button-option", onClick: onCreate, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fi.FiPlusSquare, { className: "icon" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(MenuOptions, { children: [
+    onCreate && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("button", { className: "button-option", onClick: onCreate, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fi.FiPlusSquare, { className: "icon" }),
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text", children: "New" })
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text", children: "New" })
     ] }),
-    onRefresh && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("button", { className: "button-option", onClick: onRefresh, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fi.FiRefreshCcw, { className: "icon" }),
+    onRefresh && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("button", { className: "button-option", onClick: onRefresh, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fi.FiRefreshCcw, { className: "icon" }),
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text", children: "Refresh" })
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text", children: "Refresh" })
     ] }),
-    exportExcel && exportExcel.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_bootstrap.Dropdown, { className: "button-option", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    exportExcel && exportExcel.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_bootstrap.Dropdown, { className: "button-option", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
         import_react_bootstrap.Dropdown.Toggle,
         {
           id: "btnExport",
           className: "p-2 bg-light text-dark border-0 font-weight-bold",
           title: "Export to Excel",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fi.FiSave, { className: "icon" }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fi.FiSave, { className: "icon" }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "span",
               {
                 style: {
@@ -1569,56 +1746,58 @@ var NavOptions = ({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_bootstrap.Dropdown.Menu, { children: exportExcel.map((item, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_bootstrap.Dropdown.Item, { onClick: item.onAction, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("i", { className: `${item.classNameIcon}   mr-2` }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_bootstrap.Dropdown.Menu, { children: exportExcel.map((item, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_bootstrap.Dropdown.Item, { onClick: item.onAction, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("i", { className: `${item.classNameIcon}   mr-2` }),
           " ",
           item.title
         ] }, index);
       }) })
     ] }),
-    onSelect && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("button", { className: "button-option", onClick: onSelect, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fi.FiCheckCircle, { className: "icon" }),
+    onSelect && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("button", { className: "button-option", onClick: onSelect, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fi.FiCheckCircle, { className: "icon" }),
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text", children: "Select All" })
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text", children: "Select All" })
     ] }),
-    onClear && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("button", { className: "button-option", onClick: onClear, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fi.FiFilter, { className: "icon" }),
+    onClear && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("button", { className: "button-option", onClick: onClear, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fi.FiFilter, { className: "icon" }),
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text", children: "Clear Filters" })
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text", children: "Clear Filters" })
     ] }),
-    onExpandScreen && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("button", { className: "button-option", onClick: onExpandScreen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_bs.BsArrowsFullscreen, { className: "icon" }),
+    onExpandScreen && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("button", { className: "button-option", onClick: onExpandScreen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_bs.BsArrowsFullscreen, { className: "icon" }),
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text", children: "Full Page" })
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text", children: "Full Page" })
     ] }),
     customButtons == null ? void 0 : customButtons.map((custom, index) => {
       if (custom.render) {
         return custom.render;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("button", { className: "button-option", onClick: custom.onAction, children: [
-        custom.Icon !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(custom.Icon, { className: "icon" }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text", children: custom.title })
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("button", { className: "button-option", onClick: custom.onAction, children: [
+        custom.Icon !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(custom.Icon, { className: "icon" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text", children: custom.title })
       ] }, index);
     })
   ] });
 };
 
 // src/layout/title.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Title = ({ title }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TitlePage, { children: title != null ? title : "Home" });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TitlePage, { children: title != null ? title : "Home" });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppBreadCrumb,
   AppBreadCrumbNav,
   AppLoader,
+  Badge,
   BreadCrumbContext,
   BreadCrumbContextProvider,
   BreadCrumbTitle,
   Breadcrumb,
   Button,
+  Chip,
   CloseIcon,
   Collapse,
   CollapseContent,