techsbcn-storybook 2.7.0 → 2.9.0

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React9 = require('react');
+var React10 = require('react');
 var material = require('@mui/material');
 var iconsMaterial = require('@mui/icons-material');
 var styles = require('@mui/material/styles');
@@ -42,7 +42,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React9__default = /*#__PURE__*/_interopDefault(React9);
+var React10__default = /*#__PURE__*/_interopDefault(React10);
 var CloseIcon__default = /*#__PURE__*/_interopDefault(CloseIcon);
 var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
 var localizedFormat__default = /*#__PURE__*/_interopDefault(localizedFormat);
@@ -63,13 +63,13 @@ document.head.appendChild(document.createElement("style")).appendChild(document.
 
 // src/components/wrappers/PublicFormWrapper/PublicFormWrapper.tsx
 var PublicFormWrapper = (props) => {
-  return /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(
     material.Box,
     {
       className: `public-form-wrapper ${props.className ? props.className : ""}`,
       sx: { height: "100%", display: "flex", justifyContent: "center", alignItems: "center" }
     },
-    /* @__PURE__ */ React9__default.default.createElement(material.Container, { maxWidth: "xs" }, /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "wrapper-box", sx: { p: 1, bgcolor: "background.paper", boxShadow: 24 } }, props.children))
+    /* @__PURE__ */ React10__default.default.createElement(material.Container, { maxWidth: "xs" }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "wrapper-box", sx: { p: 1, bgcolor: "background.paper", boxShadow: 24 } }, props.children))
   );
 };
 
@@ -121,14 +121,14 @@ document.head.appendChild(document.createElement("style")).appendChild(document.
 
 // src/components/tables/SearchComponent/SearchComponent.tsx
 var ActionsList = (actions) => {
-  return /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { ml: "auto", justifyContent: "start", display: "flex", alignItems: "center", flexDirection: "row" } }, actions && actions.map((action, i) => /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { ml: 2, color: "primary.main" }, key: i, className: "btn-action main-color" }, action.action)));
+  return /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { ml: "auto", justifyContent: "start", display: "flex", alignItems: "center", flexDirection: "row" } }, actions && actions.map((action, i) => /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { ml: 2, color: "primary.main" }, key: i, className: "btn-action main-color" }, action.action)));
 };
 var DoubleFilter = (filters) => {
-  return /* @__PURE__ */ React9__default.default.createElement(material.Grid, { container: true, spacing: 1, sx: { alignItems: "center" } }, filters.label && /* @__PURE__ */ React9__default.default.createElement(material.Grid, { size: { xs: 12, md: 3 } }, /* @__PURE__ */ React9__default.default.createElement(material.Box, null, filters.label)), /* @__PURE__ */ React9__default.default.createElement(material.Grid, { size: { xs: 12, md: filters.label ? 9 : 12 } }, /* @__PURE__ */ React9__default.default.createElement(material.Grid, { container: true, spacing: 1 }, /* @__PURE__ */ React9__default.default.createElement(material.Grid, { size: 6 }, filters.firstFilter), /* @__PURE__ */ React9__default.default.createElement(material.Grid, { size: 6 }, filters.secondFilter))));
+  return /* @__PURE__ */ React10__default.default.createElement(material.Grid, { container: true, spacing: 1, sx: { alignItems: "center" } }, filters.label && /* @__PURE__ */ React10__default.default.createElement(material.Grid, { size: { xs: 12, md: 3 } }, /* @__PURE__ */ React10__default.default.createElement(material.Box, null, filters.label)), /* @__PURE__ */ React10__default.default.createElement(material.Grid, { size: { xs: 12, md: filters.label ? 9 : 12 } }, /* @__PURE__ */ React10__default.default.createElement(material.Grid, { container: true, spacing: 1 }, /* @__PURE__ */ React10__default.default.createElement(material.Grid, { size: 6 }, filters.firstFilter), /* @__PURE__ */ React10__default.default.createElement(material.Grid, { size: 6 }, filters.secondFilter))));
 };
 var SearchComponent = (props) => {
-  const [isOpen, setIsOpen] = React9.useState(!props.searchBar && !!props.filters || props.fixedOpen);
-  const [anchorEl, setAnchorEl] = React9.useState(null);
+  const [isOpen, setIsOpen] = React10.useState(!props.searchBar && !!props.filters || props.fixedOpen);
+  const [anchorEl, setAnchorEl] = React10.useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -137,7 +137,7 @@ var SearchComponent = (props) => {
     setAnchorEl(null);
   };
   const randId = Math.random().toString(36).substring(7);
-  return /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: `search-component ${props.className}` }, /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { mb: props.divider ? 2 : 0, px: 2 } }, /* @__PURE__ */ React9__default.default.createElement(material.Grid, { container: true, sx: { alignItems: "center" } }, /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: `search-component ${props.className}` }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { mb: props.divider ? 2 : 0, px: 2 } }, /* @__PURE__ */ React10__default.default.createElement(material.Grid, { container: true, sx: { alignItems: "center" } }, /* @__PURE__ */ React10__default.default.createElement(
     material.Grid,
     {
       size: {
@@ -145,7 +145,7 @@ var SearchComponent = (props) => {
         md: props.actions && props.searchBar ? 4 : props.searchBar ? 7 : props.actions ? 6 : 12
       }
     },
-    /* @__PURE__ */ React9__default.default.createElement(
+    /* @__PURE__ */ React10__default.default.createElement(
       material.Box,
       {
         sx: {
@@ -157,7 +157,7 @@ var SearchComponent = (props) => {
       },
       props.title
     )
-  ), props.actions && /* @__PURE__ */ React9__default.default.createElement(material.Grid, { size: { xs: props.title ? 4 : 12 }, sx: { display: { xs: "block", md: "none" } } }, /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { display: { xs: "none", md: "flex" } } }, ActionsList(props.actions)), /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { display: { xs: "flex", md: "none" } } }, props.actions.length > 1 ? /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { ml: "auto" } }, /* @__PURE__ */ React9__default.default.createElement(
+  ), props.actions && /* @__PURE__ */ React10__default.default.createElement(material.Grid, { size: { xs: props.title ? 4 : 12 }, sx: { display: { xs: "block", md: "none" } } }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: { xs: "none", md: "flex" } } }, ActionsList(props.actions)), /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: { xs: "flex", md: "none" } } }, props.actions.length > 1 ? /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { ml: "auto" } }, /* @__PURE__ */ React10__default.default.createElement(
     material.IconButton,
     {
       "aria-label": "more",
@@ -167,8 +167,8 @@ var SearchComponent = (props) => {
       "aria-haspopup": "true",
       onClick: handleClick
     },
-    /* @__PURE__ */ React9__default.default.createElement(iconsMaterial.MoreVert, null)
-  ), /* @__PURE__ */ React9__default.default.createElement(
+    /* @__PURE__ */ React10__default.default.createElement(iconsMaterial.MoreVert, null)
+  ), /* @__PURE__ */ React10__default.default.createElement(
     material.Menu,
     {
       id: `long-button-${randId}`,
@@ -182,8 +182,8 @@ var SearchComponent = (props) => {
       onClose: handleClose,
       className: "search-menu-actions"
     },
-    props.actions.map((action, i) => /* @__PURE__ */ React9__default.default.createElement(material.MenuItem, { key: i, className: "wrapper-actions" }, /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "btn-action main-color", sx: { color: "primary.main" } }, action.action)))
-  )) : /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { ml: "auto" }, className: `wrapper-actions ${props.title ? "min-action-width" : ""}` }, ActionsList(props.actions)))), (props.searchBar || props.filters || props.actions) && /* @__PURE__ */ React9__default.default.createElement(material.Grid, { size: { xs: 12, md: props.actions && props.searchBar ? 8 : props.actions ? 6 : 5 } }, /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React9__default.default.createElement(
+    props.actions.map((action, i) => /* @__PURE__ */ React10__default.default.createElement(material.MenuItem, { key: i, className: "wrapper-actions" }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "btn-action main-color", sx: { color: "primary.main" } }, action.action)))
+  )) : /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { ml: "auto" }, className: `wrapper-actions ${props.title ? "min-action-width" : ""}` }, ActionsList(props.actions)))), (props.searchBar || props.filters || props.actions) && /* @__PURE__ */ React10__default.default.createElement(material.Grid, { size: { xs: 12, md: props.actions && props.searchBar ? 8 : props.actions ? 6 : 5 } }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React10__default.default.createElement(
     material.Box,
     {
       sx: {
@@ -194,16 +194,16 @@ var SearchComponent = (props) => {
       }
     },
     props.searchBar,
-    !!props.fixedOpen || props.filters && props.searchBar && /* @__PURE__ */ React9__default.default.createElement(
+    !!props.fixedOpen || props.filters && props.searchBar && /* @__PURE__ */ React10__default.default.createElement(
       material.Box,
       {
         onClick: () => setIsOpen(!isOpen),
         className: "tune-btn main-background-color",
         sx: { bgcolor: "primary.main", color: "primary.contrastText", "&:hover": { boxShadow: 4 } }
       },
-      /* @__PURE__ */ React9__default.default.createElement(iconsMaterial.Tune, null)
+      /* @__PURE__ */ React10__default.default.createElement(material.Badge, { badgeContent: props.activeFiltersCount, color: "error" }, /* @__PURE__ */ React10__default.default.createElement(iconsMaterial.Tune, null))
     )
-  ), props.actions && /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { display: { xs: "none", md: "block" } }, className: "wrapper-actions" }, ActionsList(props.actions))))), props.extraActions && /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "extra-actions", sx: { display: "flex", flexWrap: "wrap", gap: 1, mt: 2 } }, props.extraActions.map((action, i) => /* @__PURE__ */ React9__default.default.createElement(React9__default.default.Fragment, { key: i }, action.action)))), props.divider && /* @__PURE__ */ React9__default.default.createElement(material.Divider, null), /* @__PURE__ */ React9__default.default.createElement(material.Collapse, { in: isOpen }, /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "filters", sx: { px: 2, mt: 2, mb: props.divider ? 0 : 1 } }, /* @__PURE__ */ React9__default.default.createElement(material.Grid, { container: true, spacing: 3, sx: { justifyContent: "end" } }, props.filters && props.filters.length > 0 && props.filters.map((filter, i) => /* @__PURE__ */ React9__default.default.createElement(material.Grid, { key: i, size: { xs: 12, sm: props.filtersSize ?? 6, xl: props.filtersSize ?? 4 } }, filter.doubleFilter ? DoubleFilter(filter.doubleFilter) : filter.singleFilter))))));
+  ), props.actions && /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: { xs: "none", md: "block" } }, className: "wrapper-actions" }, ActionsList(props.actions))))), props.extraActions && /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "extra-actions", sx: { display: "flex", flexWrap: "wrap", gap: 1, mt: 2 } }, props.extraActions.map((action, i) => /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, { key: i }, action.action)))), props.divider && /* @__PURE__ */ React10__default.default.createElement(material.Divider, null), /* @__PURE__ */ React10__default.default.createElement(material.Collapse, { in: isOpen }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "filters", sx: { px: 2, mt: 2, mb: props.divider ? 0 : 1 } }, /* @__PURE__ */ React10__default.default.createElement(material.Grid, { container: true, spacing: 3, sx: { justifyContent: "end" } }, props.filters && props.filters.length > 0 && props.filters.map((filter, i) => /* @__PURE__ */ React10__default.default.createElement(material.Grid, { key: i, size: { xs: 12, sm: props.filtersSize ?? 6, xl: props.filtersSize ?? 4 } }, filter.doubleFilter ? DoubleFilter(filter.doubleFilter) : filter.singleFilter))))));
 };
 
 // src/components/wrappers/LinearProgressComponent/LinearProgressComponent.scss
@@ -229,7 +229,7 @@ document.head.appendChild(document.createElement("style")).appendChild(document.
 
 // src/components/wrappers/LinearProgressComponent/LinearProgressComponent.tsx
 var LinearProgressComponent = () => {
-  return /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "linear-progress-component" }, /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "linear-progress-main-color main-background-color", sx: { bgcolor: "primary.main" } }), /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "linear-progress-component" }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "linear-progress-main-color main-background-color", sx: { bgcolor: "primary.main" } }), /* @__PURE__ */ React10__default.default.createElement(
     material.LinearProgress,
     {
       classes: { bar: "main-background-color" },
@@ -272,14 +272,14 @@ document.head.appendChild(document.createElement("style")).appendChild(document.
 // src/components/wrappers/MainWrapperComponent/MainWrapperComponent.tsx
 var MainWrapperComponent = ({ enableTrimBar = false, ...rest }) => {
   const props = { enableTrimBar, ...rest };
-  return /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "main-wrapper-component", sx: { height: props.height ?? "100%", bgcolor: "background.paper" } }, /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { height: "4px" } }, props.loadingProgressBar && /* @__PURE__ */ React9__default.default.createElement(LinearProgressComponent, null)), /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { py: 2 } }, props.loading ? /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { display: "flex", justifyContent: "center", px: 2 } }, /* @__PURE__ */ React9__default.default.createElement(material.CircularProgress, { className: "circular-progress-main-color", color: "primary" })) : /* @__PURE__ */ React9__default.default.createElement(React9__default.default.Fragment, null, props.headerProps && /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { mb: props.divider ? 1.5 : 0 } }, /* @__PURE__ */ React9__default.default.createElement(SearchComponent, { ...props.headerProps, enableAfter: props.headerProps.enableAfter ?? true })), props.divider && /* @__PURE__ */ React9__default.default.createElement(material.Divider, null), props.children && !props.loadingChildren ? /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { pt: props.headerProps ? 2 : 0, px: 2 } }, /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "main-wrapper-component", sx: { height: props.height ?? "100%", bgcolor: "background.paper" } }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { height: "4px" } }, props.loadingProgressBar && /* @__PURE__ */ React10__default.default.createElement(LinearProgressComponent, null)), /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { py: 2 } }, props.loading ? /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: "flex", justifyContent: "center", px: 2 } }, /* @__PURE__ */ React10__default.default.createElement(material.CircularProgress, { className: "circular-progress-main-color", color: "primary" })) : /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, props.headerProps && /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { mb: props.divider ? 1.5 : 0 } }, /* @__PURE__ */ React10__default.default.createElement(SearchComponent, { ...props.headerProps, enableAfter: props.headerProps.enableAfter ?? true })), props.divider && /* @__PURE__ */ React10__default.default.createElement(material.Divider, null), props.children && !props.loadingChildren ? /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { pt: props.headerProps ? 2 : 0, px: 2 } }, /* @__PURE__ */ React10__default.default.createElement(
     material.Box,
     {
       className: `${props.enableTrimBar ? "main-background-color-after" : ""}`,
       sx: props.enableTrimBar ? { "&::after": { bgcolor: "primary.main" } } : void 0
     },
     props.children
-  )) : props.loadingChildren ? /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { display: "flex", justifyContent: "center", pt: props.headerProps ? 2 : 0, px: 2 } }, /* @__PURE__ */ React9__default.default.createElement(material.CircularProgress, { className: "circular-progress-main-color", color: "primary" })) : /* @__PURE__ */ React9__default.default.createElement(React9__default.default.Fragment, null))));
+  )) : props.loadingChildren ? /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: "flex", justifyContent: "center", pt: props.headerProps ? 2 : 0, px: 2 } }, /* @__PURE__ */ React10__default.default.createElement(material.CircularProgress, { className: "circular-progress-main-color", color: "primary" })) : /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null))));
 };
 
 // src/components/tables/TableComponent/TableComponent.scss
@@ -527,8 +527,8 @@ var TextFieldComponent = ({
   onMouseLeave,
   ...rest
 }) => {
-  const [hover, setHover] = React9__default.default.useState(false);
-  return /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "text-field-component", sx: { width: "100%" } }, /* @__PURE__ */ React9__default.default.createElement(
+  const [hover, setHover] = React10__default.default.useState(false);
+  return /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "text-field-component", sx: { width: "100%" } }, /* @__PURE__ */ React10__default.default.createElement(
     material.TextField,
     {
       ...rest,
@@ -702,15 +702,15 @@ var SearchBaseDefaults = {
 
 // src/helpers/hooks.tsx
 var usePrevious = (value) => {
-  const ref2 = React9.useRef(void 0);
-  React9.useEffect(() => {
+  const ref2 = React10.useRef(void 0);
+  React10.useEffect(() => {
     ref2.current = value;
   });
   return ref2.current;
 };
 var useIsMounted = () => {
-  const isMounted = React9.useRef(false);
-  React9.useEffect(() => {
+  const isMounted = React10.useRef(false);
+  React10.useEffect(() => {
     isMounted.current = true;
     return () => {
       isMounted.current = false;
@@ -719,12 +719,12 @@ var useIsMounted = () => {
   return isMounted;
 };
 var useFilters = (initial = SearchBaseDefaults) => {
-  const [filters, setFilters] = React9.useState(initial);
+  const [filters, setFilters] = React10.useState(initial);
   const setNewFilters = (name, value) => setFilters((prev) => ({ ...prev, [name]: value, page: 1, offset: 0 }));
   const onHandleChange = (event) => setNewFilters(event.target.name, event.target.value);
   return { filters, setFilters, setNewFilters, onHandleChange };
 };
-var NotificationContainer = (props) => /* @__PURE__ */ React9__default.default.createElement(
+var NotificationContainer = (props) => /* @__PURE__ */ React10__default.default.createElement(
   notistack.SnackbarProvider,
   {
     maxSnack: 5,
@@ -744,17 +744,18 @@ var addNotification = ({
   key: id,
   autoHideDuration: duration,
   persist: duration === null,
-  action: duration === null ? (key) => /* @__PURE__ */ React9__default.default.createElement(material.IconButton, { size: "small", color: "inherit", "aria-label": "close", onClick: () => notistack.closeSnackbar(key) }, /* @__PURE__ */ React9__default.default.createElement(CloseIcon__default.default, { fontSize: "small" })) : void 0
+  action: duration === null ? (key) => /* @__PURE__ */ React10__default.default.createElement(material.IconButton, { size: "small", color: "inherit", "aria-label": "close", onClick: () => notistack.closeSnackbar(key) }, /* @__PURE__ */ React10__default.default.createElement(CloseIcon__default.default, { fontSize: "small" })) : void 0
 });
 var removeNotification = (id) => notistack.closeSnackbar(id);
+var Spinner = () => /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { textAlign: "center" } }, /* @__PURE__ */ React10__default.default.createElement(material.CircularProgress, { color: "primary", size: 20 }));
 
 // src/components/tables/ImageTableComponent/ImageTableComponent.tsx
 var ImageTableComponent = (props) => {
-  const [loading, setLoading] = React9.useState(false);
-  const [image, setImage] = React9.useState();
+  const [loading, setLoading] = React10.useState(false);
+  const [image, setImage] = React10.useState();
   const prevGuidState = usePrevious(props.guid);
   const isMounted = useIsMounted();
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (prevGuidState !== props.guid) {
       setLoading(true);
       props.readFile(props.guid).then((result) => {
@@ -765,7 +766,7 @@ var ImageTableComponent = (props) => {
       }).catch(() => setLoading(false));
     }
   }, [props, prevGuidState, isMounted]);
-  return /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "images-table-component" }, loading ? /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { textAlign: "center" } }, /* @__PURE__ */ React9__default.default.createElement(material.CircularProgress, { className: "main-color", color: "primary" })) : /* @__PURE__ */ React9__default.default.createElement(material.Avatar, { alt: "-", src: image, className: "img-table", variant: "square" }));
+  return /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "images-table-component" }, loading ? /* @__PURE__ */ React10__default.default.createElement(Spinner, null) : /* @__PURE__ */ React10__default.default.createElement(material.Avatar, { alt: "-", src: image, className: "img-table", variant: "square" }));
 };
 var ImageTableComponent_default = ImageTableComponent;
 var TableComponent = ({ showTotalCount = true, ...rest }) => {
@@ -775,8 +776,8 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
   dayjs__default.default.extend(timezone__default.default);
   const defaultFilters = JSON.parse(JSON.stringify(props.baseFilters));
   const orderByKeyDefault = "id";
-  const [orderByKey, setOrderByKey] = React9.useState(orderByKeyDefault);
-  const [filters, setFilters] = React9.useState(defaultFilters);
+  const [orderByKey, setOrderByKey] = React10.useState(orderByKeyDefault);
+  const [filters, setFilters] = React10.useState(defaultFilters);
   const isSelected = (id) => JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked)).indexOf(id) !== -1;
   const handleChangePage = (_event, newPage) => {
     const newFilters = JSON.parse(JSON.stringify(filters));
@@ -851,9 +852,9 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
       return `${column.priceFormat?.currencyStart ?? ""}${Number(value).toFixed(2).replace(".", ",").toLocaleString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.")} ${!column.priceFormat?.currencyStart ? column.priceFormat?.currencyEnd ?? props.values.SYMBOL_EURO : ""}`;
     if (column.isImage && value) {
       if (column.isImage.isUrl) {
-        return /* @__PURE__ */ React9__default.default.createElement(material.Avatar, { alt: "-", src: value, className: "img-table", variant: "square" });
+        return /* @__PURE__ */ React10__default.default.createElement(material.Avatar, { alt: "-", src: value, className: "img-table", variant: "square" });
       } else if (column.isImage.isGuid) {
-        return /* @__PURE__ */ React9__default.default.createElement(
+        return /* @__PURE__ */ React10__default.default.createElement(
           ImageTableComponent_default,
           {
             guid: value,
@@ -879,7 +880,7 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
     if (typeof value === "boolean") {
       return String(value);
     }
-    return /* @__PURE__ */ React9__default.default.createElement(material.Typography, { component: "span", sx: { whiteSpace: "break-spaces" } }, value);
+    return /* @__PURE__ */ React10__default.default.createElement(material.Typography, { component: "span", sx: { whiteSpace: "break-spaces" } }, value);
   };
   const ObjectbyString = (o, s) => {
     s = s.replace(/\[(\w+)\]/g, ".$1");
@@ -916,7 +917,7 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
         rowEdit[fieldName] = e.target.value;
         setUpdate();
       };
-      return /* @__PURE__ */ React9__default.default.createElement(
+      return /* @__PURE__ */ React10__default.default.createElement(
         TextFieldComponent,
         {
           ...editableCell.isTextField.textFieldProps,
@@ -929,20 +930,20 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
       return value;
     }
   };
-  return /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "table-component", sx: tableColorsSx }, /* @__PURE__ */ React9__default.default.createElement(material.Paper, { className: "paper-container" }, /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { p: 1, display: "flex" } }, props.isCheckTable && /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { display: { xs: "block", md: "none" } }, className: "checkbox-cell" }, /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "table-component", sx: tableColorsSx }, /* @__PURE__ */ React10__default.default.createElement(material.Paper, { className: "paper-container" }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { p: 1, display: "flex" } }, props.isCheckTable && /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: { xs: "block", md: "none" } }, className: "checkbox-cell" }, /* @__PURE__ */ React10__default.default.createElement(
     material.Checkbox,
     {
       indeterminate: props.rows && JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked)).length > 0 && JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked)).length < props.rows.length,
       checked: props.rows && props.rows.length > 0 && JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked)).length === props.rows.length,
       onChange: handleSelectAllClick
     }
-  )), props.showTotalCount && /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { ml: "auto", mr: 1, alignSelf: "center" } }, props.totalCount, " ", props.values.RESULTS)), /* @__PURE__ */ React9__default.default.createElement(
+  )), props.showTotalCount && /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { ml: "auto", mr: 1, alignSelf: "center" } }, props.totalCount, " ", props.values.RESULTS)), /* @__PURE__ */ React10__default.default.createElement(
     material.TableContainer,
     {
       className: `table-container ${props.isBordered ? "table-bordered" : "table-simple"} ${props.withScroll ? "with-scroll" : ""}`
     },
-    /* @__PURE__ */ React9__default.default.createElement(material.Table, { stickyHeader: true, "aria-label": "sticky table", className: props.loading ? "loading" : "" }, /* @__PURE__ */ React9__default.default.createElement(material.TableHead, { sx: { display: { xs: "none", md: "table-header-group" } } }, /* @__PURE__ */ React9__default.default.createElement(material.TableRow, null, props.columns.map((column, columnIndex) => {
-      return /* @__PURE__ */ React9__default.default.createElement(
+    /* @__PURE__ */ React10__default.default.createElement(material.Table, { stickyHeader: true, "aria-label": "sticky table", className: props.loading ? "loading" : "" }, /* @__PURE__ */ React10__default.default.createElement(material.TableHead, { sx: { display: { xs: "none", md: "table-header-group" } } }, /* @__PURE__ */ React10__default.default.createElement(material.TableRow, null, props.columns.map((column, columnIndex) => {
+      return /* @__PURE__ */ React10__default.default.createElement(
         material.TableCell,
         {
           className: "table-column",
@@ -950,7 +951,7 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
           align: column.align ? column.align : "center",
           style: { width: column.width, minWidth: column.minWidth, maxWidth: column.maxWidth }
         },
-        (column.orderBy || column.id) && column.id !== "actions" && !column.isCheck && !column.isActiveFunction && !column.noSort ? /* @__PURE__ */ React9__default.default.createElement(
+        (column.orderBy || column.id) && column.id !== "actions" && !column.isCheck && !column.isActiveFunction && !column.noSort ? /* @__PURE__ */ React10__default.default.createElement(
           material.TableSortLabel,
           {
             className: "table-header-cell",
@@ -960,16 +961,16 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
             hideSortIcon: true
           },
           column.label
-        ) : column.isCheck ? /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "checkbox-cell" }, /* @__PURE__ */ React9__default.default.createElement(
+        ) : column.isCheck ? /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "checkbox-cell" }, /* @__PURE__ */ React10__default.default.createElement(
           material.Checkbox,
           {
             indeterminate: props.rows && JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked)).length > 0 && JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked)).length < props.rows.length,
             checked: props.rows && props.rows.length > 0 && JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked)).length === props.rows.length,
             onChange: handleSelectAllClick
           }
-        )) : /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "table-header-cell" }, column.label)
+        )) : /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "table-header-cell" }, column.label)
       );
-    }))), /* @__PURE__ */ React9__default.default.createElement(material.TableBody, null, props.loading && /* @__PURE__ */ React9__default.default.createElement(material.TableRow, { className: "table-rows" }, /* @__PURE__ */ React9__default.default.createElement(
+    }))), /* @__PURE__ */ React10__default.default.createElement(material.TableBody, null, props.loading && /* @__PURE__ */ React10__default.default.createElement(material.TableRow, { className: "table-rows" }, /* @__PURE__ */ React10__default.default.createElement(
       material.TableCell,
       {
         colSpan: props.columns.length,
@@ -979,11 +980,11 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
           height: props.rows.length > 0 ? "auto" : "80px"
         }
       },
-      /* @__PURE__ */ React9__default.default.createElement(material.CircularProgress, { className: "circular-progress-main-color", color: "primary" })
+      /* @__PURE__ */ React10__default.default.createElement(material.CircularProgress, { className: "circular-progress-main-color", color: "primary" })
     )), props.rows && props.rows.length > 0 ? props.rows.map((row, index) => {
       const rowColor = props.rowsColorColumn && ObjectbyString(row, props.rowsColorColumn.columnName) === props.rowsColorColumn.columnValue ? `row-color-${props.rowsColorColumn.columnValue}` : props.isStriped && props.rows.length > 1 && index % 2 == 0 ? "main-background-color table-striped" : "";
       const isRowSelected = props.isCheckTable?.rowsChecked && isSelected(row.id);
-      return /* @__PURE__ */ React9__default.default.createElement(
+      return /* @__PURE__ */ React10__default.default.createElement(
         material.TableRow,
         {
           className: `table-rows ${rowColor} ${props.onClickRow || props.onClickRowData ? "row-click" : ""}`,
@@ -997,7 +998,7 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
         props.columns.map((column, columnIndex) => {
           const value = column.rowViewFormat ? checkFormat(row, column.rowViewFormat) : ObjectbyString(row, column.id ?? "");
           const isItemSelected = column.isCheck && isSelected(row.id);
-          return /* @__PURE__ */ React9__default.default.createElement(
+          return /* @__PURE__ */ React10__default.default.createElement(
             material.TableCell,
             {
               className: `table-cell ${column.cellClassName ? column.cellClassName(row) : ""}`,
@@ -1010,8 +1011,8 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
               },
               onClick: () => !column.action && !column.isCheck && !column.isActiveFunction ? handleRowClick(row) : ""
             },
-            column.label !== "-" && /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { display: { xs: "inline-block", md: "none" } }, className: "label-cell" }, column.label),
-            column.rowViewFormat ? /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "format-value" }, value) : column.action && Object.keys(row).length > 0 ? /* @__PURE__ */ React9__default.default.createElement(material.Box, null, /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { display: "flex" }, className: "actions" }, column.action && column.action.map((action, i) => /* @__PURE__ */ React9__default.default.createElement(material.Box, { key: i }, action.onClick && /* @__PURE__ */ React9__default.default.createElement(
+            column.label !== "-" && /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: { xs: "inline-block", md: "none" } }, className: "label-cell" }, column.label),
+            column.rowViewFormat ? /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "format-value" }, value) : column.action && Object.keys(row).length > 0 ? /* @__PURE__ */ React10__default.default.createElement(material.Box, null, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: "flex" }, className: "actions" }, column.action && column.action.map((action, i) => /* @__PURE__ */ React10__default.default.createElement(material.Box, { key: i }, action.onClick && /* @__PURE__ */ React10__default.default.createElement(
               material.Box,
               {
                 className: "btn-action main-color-hover",
@@ -1021,7 +1022,7 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
                 onClick: () => action.onClick && action.onClick(row)
               },
               action.children
-            ), action.onClickId && /* @__PURE__ */ React9__default.default.createElement(
+            ), action.onClickId && /* @__PURE__ */ React10__default.default.createElement(
               material.Box,
               {
                 className: "btn-action main-color-hover",
@@ -1031,7 +1032,7 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
                 onClick: () => action.onClickId && action.onClickId(row.id)
               },
               action.children
-            ), !action.onClick && !action.onClickId && /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "btn-action" }, action.children))))) : column.isActiveFunction && Object.keys(row).length > 0 ? /* @__PURE__ */ React9__default.default.createElement(
+            ), !action.onClick && !action.onClickId && /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "btn-action" }, action.children))))) : column.isActiveFunction && Object.keys(row).length > 0 ? /* @__PURE__ */ React10__default.default.createElement(
               material.Box,
               {
                 className: "btn-action main-color-hover",
@@ -1041,31 +1042,31 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
                 onClick: () => column.isActiveFunction && column.isActiveFunction.onClickId(row.id)
               },
               value ? column.isActiveFunction.activeIcon : column.isActiveFunction.disabledIcon
-            ) : column.isCheck && Object.keys(row).length > 0 ? /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "checkbox-cell" }, /* @__PURE__ */ React9__default.default.createElement(
+            ) : column.isCheck && Object.keys(row).length > 0 ? /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "checkbox-cell" }, /* @__PURE__ */ React10__default.default.createElement(
               material.Checkbox,
               {
                 checked: isItemSelected,
                 slotProps: { input: { "aria-labelledby": row.id } },
                 onChange: (event) => onCheckAction(event, row.id)
               }
-            )) : column.isEditableTableCell && Object.keys(row).length > 0 ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn && Object.keys(row).length > 0 ? /* @__PURE__ */ React9__default.default.createElement(
+            )) : column.isEditableTableCell && Object.keys(row).length > 0 ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn && Object.keys(row).length > 0 ? /* @__PURE__ */ React10__default.default.createElement(
               material.Box,
               {
                 className: `${column.enumColumn.hasColor ? `${column.enumColumn.enumSuffix ? `${value.toLowerCase()}-${column.enumColumn.enumSuffix.toLowerCase()}` : value.toString().toLowerCase()}-type-color` : ""} format-value`
               },
               formatValue(value, column)
-            ) : column.isBoolean && Object.keys(row).length > 0 ? /* @__PURE__ */ React9__default.default.createElement(
+            ) : column.isBoolean && Object.keys(row).length > 0 ? /* @__PURE__ */ React10__default.default.createElement(
               material.Box,
               {
                 className: `${column.isBoolean.hasColor ? `${column.isBoolean.enumSuffix ? `${value.toString().toLowerCase()}-${column.isBoolean.enumSuffix.toLowerCase()}` : value.toString().toLowerCase()}-boolean-color` : ""} format-value`
               },
               formatValue(value, column)
-            ) : /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: `${column.isImage ? "" : "format-value"}` }, formatValue(value, column))
+            ) : /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: `${column.isImage ? "" : "format-value"}` }, formatValue(value, column))
           );
         })
       );
-    }) : !props.loading ? /* @__PURE__ */ React9__default.default.createElement(material.TableRow, null, /* @__PURE__ */ React9__default.default.createElement(material.TableCell, { colSpan: props.columns.length }, /* @__PURE__ */ React9__default.default.createElement(material.Box, null, props.values.NO_RESULTS_FOUND))) : /* @__PURE__ */ React9__default.default.createElement(material.TableRow, null)))
-  ), props.baseFilters && props.baseFilters.page && props.baseFilters.limit && /* @__PURE__ */ React9__default.default.createElement(
+    }) : !props.loading ? /* @__PURE__ */ React10__default.default.createElement(material.TableRow, null, /* @__PURE__ */ React10__default.default.createElement(material.TableCell, { colSpan: props.columns.length }, /* @__PURE__ */ React10__default.default.createElement(material.Box, null, props.values.NO_RESULTS_FOUND))) : /* @__PURE__ */ React10__default.default.createElement(material.TableRow, null)))
+  ), props.baseFilters && props.baseFilters.page && props.baseFilters.limit && /* @__PURE__ */ React10__default.default.createElement(
     material.TablePagination,
     {
       rowsPerPageOptions: [5, 10, 25, 100, 150],
@@ -1081,7 +1082,7 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
       component: "div",
       className: `table-pagination ${props.isBordered ? "table-bordered" : "table-simple"}`,
       ActionsComponent: (_actions) => {
-        return /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { flexShrink: 0 }, className: "pagination" }, Math.ceil(_actions.count / _actions.rowsPerPage) > 1 && /* @__PURE__ */ React9__default.default.createElement(
+        return /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { flexShrink: 0 }, className: "pagination" }, Math.ceil(_actions.count / _actions.rowsPerPage) > 1 && /* @__PURE__ */ React10__default.default.createElement(
           material.Pagination,
           {
             count: Math.ceil(_actions.count / _actions.rowsPerPage),
@@ -1093,7 +1094,7 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
             hidePrevButton: true,
             showFirstButton: true,
             showLastButton: true,
-            renderItem: (item) => /* @__PURE__ */ React9__default.default.createElement(
+            renderItem: (item) => /* @__PURE__ */ React10__default.default.createElement(
               material.PaginationItem,
               {
                 classes: { selected: "main-background-color" },
@@ -1290,9 +1291,9 @@ var SimpleTableComponent = (props) => {
       return `${column.priceFormat?.currencyStart ?? ""}${Number(value).toFixed(2).replace(".", ",").toLocaleString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.")} ${!column.priceFormat?.currencyStart ? column.priceFormat?.currencyEnd ?? props.values.SYMBOL_EURO : ""}`;
     if (column.isImage && value) {
       if (column.isImage.isUrl) {
-        return /* @__PURE__ */ React9__default.default.createElement(material.Avatar, { alt: "-", src: value, className: "img-table", variant: "square" });
+        return /* @__PURE__ */ React10__default.default.createElement(material.Avatar, { alt: "-", src: value, className: "img-table", variant: "square" });
       } else if (column.isImage.isGuid) {
-        return /* @__PURE__ */ React9__default.default.createElement(
+        return /* @__PURE__ */ React10__default.default.createElement(
           ImageTableComponent_default,
           {
             guid: value,
@@ -1318,7 +1319,7 @@ var SimpleTableComponent = (props) => {
     if (typeof value === "boolean") {
       return String(value);
     }
-    return /* @__PURE__ */ React9__default.default.createElement(material.Typography, { component: "span", sx: { whiteSpace: "break-spaces" } }, value);
+    return /* @__PURE__ */ React10__default.default.createElement(material.Typography, { component: "span", sx: { whiteSpace: "break-spaces" } }, value);
   };
   const ObjectbyString = (o, s) => {
     s = s.replace(/\[(\w+)\]/g, ".$1");
@@ -1356,7 +1357,7 @@ var SimpleTableComponent = (props) => {
         rowEdit[fieldName] = e.target.value;
         setUpdate();
       };
-      return /* @__PURE__ */ React9__default.default.createElement(
+      return /* @__PURE__ */ React10__default.default.createElement(
         TextFieldComponent,
         {
           ...editableCell.isTextField.textFieldProps,
@@ -1369,29 +1370,29 @@ var SimpleTableComponent = (props) => {
       return value;
     }
   };
-  return /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "table-simple-component", sx: tableColorsSx }, /* @__PURE__ */ React9__default.default.createElement(material.Paper, { className: "paper-container" }, props.isCheckTable && !props.isCheckTable.noCheckAllItems && /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { display: { xs: "block", md: "none" } }, className: "checkbox-cell" }, /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "table-simple-component", sx: tableColorsSx }, /* @__PURE__ */ React10__default.default.createElement(material.Paper, { className: "paper-container" }, props.isCheckTable && !props.isCheckTable.noCheckAllItems && /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: { xs: "block", md: "none" } }, className: "checkbox-cell" }, /* @__PURE__ */ React10__default.default.createElement(
     material.Checkbox,
     {
       indeterminate: props.rows && JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked)).length > 0 && JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked)).length < props.rows.length,
       checked: props.rows && props.rows.length > 0 && JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked)).length === props.rows.length,
       onChange: handleSelectAllClick
     }
-  )), /* @__PURE__ */ React9__default.default.createElement(
+  )), /* @__PURE__ */ React10__default.default.createElement(
     material.TableContainer,
     {
       className: `table-container ${props.isBordered ? "table-bordered" : "table-simple"}
         ${props.withScroll ? "with-scroll" : ""}`
     },
-    /* @__PURE__ */ React9__default.default.createElement(
+    /* @__PURE__ */ React10__default.default.createElement(
       material.Table,
       {
         stickyHeader: true,
         "aria-label": "sticky table",
         className: props.loading ? "loading" : props.className ? props.className : ""
       },
-      /* @__PURE__ */ React9__default.default.createElement(material.TableHead, { sx: { display: { xs: "none", md: "table-header-group" } } }, /* @__PURE__ */ React9__default.default.createElement(material.TableRow, null, props.columns.map((column, columnIndex) => {
+      /* @__PURE__ */ React10__default.default.createElement(material.TableHead, { sx: { display: { xs: "none", md: "table-header-group" } } }, /* @__PURE__ */ React10__default.default.createElement(material.TableRow, null, props.columns.map((column, columnIndex) => {
         if (column.id) {
-          return /* @__PURE__ */ React9__default.default.createElement(
+          return /* @__PURE__ */ React10__default.default.createElement(
             material.TableCell,
             {
               className: "table-column",
@@ -1399,18 +1400,18 @@ var SimpleTableComponent = (props) => {
               align: column.align ? column.align : "center",
               style: { width: column.width, minWidth: column.minWidth, maxWidth: column.maxWidth }
             },
-            column.isCheck && !props.isCheckTable?.noCheckAllItems ? /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "checkbox-cell" }, /* @__PURE__ */ React9__default.default.createElement(
+            column.isCheck && !props.isCheckTable?.noCheckAllItems ? /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "checkbox-cell" }, /* @__PURE__ */ React10__default.default.createElement(
               material.Checkbox,
               {
                 indeterminate: props.rows && JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked)).length > 0 && JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked)).length < props.rows.length,
                 checked: props.rows && props.rows.length > 0 && JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked)).length === props.rows.length,
                 onChange: handleSelectAllClick
               }
-            )) : /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "table-header-cell" }, column.label)
+            )) : /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "table-header-cell" }, column.label)
           );
         } else return null;
       }))),
-      /* @__PURE__ */ React9__default.default.createElement(material.TableBody, null, props.loading && /* @__PURE__ */ React9__default.default.createElement(material.TableRow, { className: "table-rows" }, /* @__PURE__ */ React9__default.default.createElement(
+      /* @__PURE__ */ React10__default.default.createElement(material.TableBody, null, props.loading && /* @__PURE__ */ React10__default.default.createElement(material.TableRow, { className: "table-rows" }, /* @__PURE__ */ React10__default.default.createElement(
         material.TableCell,
         {
           colSpan: props.columns.length,
@@ -1420,11 +1421,11 @@ var SimpleTableComponent = (props) => {
             height: props.rows.length > 0 ? "auto" : "80px"
           }
         },
-        /* @__PURE__ */ React9__default.default.createElement(material.CircularProgress, { className: "circular-progress-main-color", color: "primary" })
+        /* @__PURE__ */ React10__default.default.createElement(material.CircularProgress, { className: "circular-progress-main-color", color: "primary" })
       )), props.rows && props.rows.length > 0 ? props.rows.map((row, index) => {
         const rowColor = props.rowsColorColumn && ObjectbyString(row, props.rowsColorColumn.columnName) === props.rowsColorColumn.columnValue ? `row-color-${props.rowsColorColumn.columnValue}` : props.isStriped && props.rows.length > 1 && index % 2 == 0 ? "main-background-color table-striped" : "";
         const isRowSelected = props.isCheckTable?.rowsChecked && isSelected(row.id);
-        return /* @__PURE__ */ React9__default.default.createElement(
+        return /* @__PURE__ */ React10__default.default.createElement(
           material.TableRow,
           {
             className: `table-rows ${rowColor} ${props.onClickRow || props.onClickRowData ? "row-click" : ""}`,
@@ -1438,7 +1439,7 @@ var SimpleTableComponent = (props) => {
           props.columns.map((column, columnIndex) => {
             const value = column.rowViewFormat ? checkFormat(row, column.rowViewFormat) : ObjectbyString(row, column.id ?? "");
             const isItemSelected = column.isCheck && isSelected(row.id);
-            return /* @__PURE__ */ React9__default.default.createElement(
+            return /* @__PURE__ */ React10__default.default.createElement(
               material.TableCell,
               {
                 className: `table-cell ${column.cellClassName ? column.cellClassName(row) : ""}`,
@@ -1451,8 +1452,8 @@ var SimpleTableComponent = (props) => {
                 },
                 onClick: () => !column.action && !column.isCheck && !column.isActiveFunction ? handleRowClick(row) : ""
               },
-              column.label !== "-" && /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { display: { xs: "inline-block", md: "none" } }, className: "label-cell" }, column.label),
-              column.action && Object.keys(row).length > 0 ? /* @__PURE__ */ React9__default.default.createElement(material.Box, null, /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { display: "flex" }, className: "actions" }, column.rowViewFormat ? /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "format-value" }, value) : column.action && column.action.map((action, i) => /* @__PURE__ */ React9__default.default.createElement(material.Box, { key: i }, action.onClick && /* @__PURE__ */ React9__default.default.createElement(
+              column.label !== "-" && /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: { xs: "inline-block", md: "none" } }, className: "label-cell" }, column.label),
+              column.action && Object.keys(row).length > 0 ? /* @__PURE__ */ React10__default.default.createElement(material.Box, null, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: "flex" }, className: "actions" }, column.rowViewFormat ? /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "format-value" }, value) : column.action && column.action.map((action, i) => /* @__PURE__ */ React10__default.default.createElement(material.Box, { key: i }, action.onClick && /* @__PURE__ */ React10__default.default.createElement(
                 material.Box,
                 {
                   className: "btn-action main-color-hover",
@@ -1462,7 +1463,7 @@ var SimpleTableComponent = (props) => {
                   onClick: () => action.onClick && action.onClick(row)
                 },
                 action.children
-              ), action.onClickId && /* @__PURE__ */ React9__default.default.createElement(
+              ), action.onClickId && /* @__PURE__ */ React10__default.default.createElement(
                 material.Box,
                 {
                   className: "btn-action main-color-hover",
@@ -1472,7 +1473,7 @@ var SimpleTableComponent = (props) => {
                   onClick: () => action.onClickId && action.onClickId(row.id)
                 },
                 action.children
-              ), !action.onClick && !action.onClickId && /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "btn-action" }, action.children))))) : column.isActiveFunction && Object.keys(row).length > 0 ? /* @__PURE__ */ React9__default.default.createElement(
+              ), !action.onClick && !action.onClickId && /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "btn-action" }, action.children))))) : column.isActiveFunction && Object.keys(row).length > 0 ? /* @__PURE__ */ React10__default.default.createElement(
                 material.Box,
                 {
                   className: "btn-action main-color-hover",
@@ -1482,30 +1483,30 @@ var SimpleTableComponent = (props) => {
                   onClick: () => column.isActiveFunction && column.isActiveFunction.onClickId(row.id)
                 },
                 value ? column.isActiveFunction.activeIcon : column.isActiveFunction.disabledIcon
-              ) : column.isCheck && Object.keys(row).length > 0 ? /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "checkbox-cell" }, /* @__PURE__ */ React9__default.default.createElement(
+              ) : column.isCheck && Object.keys(row).length > 0 ? /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "checkbox-cell" }, /* @__PURE__ */ React10__default.default.createElement(
                 material.Checkbox,
                 {
                   checked: isItemSelected,
                   slotProps: { input: { "aria-labelledby": row.id } },
                   onChange: (event) => props.isCheckTable?.onCheckedAction ? onCheckAction(event, row.id) : onCheckSingleAction(event, row.id)
                 }
-              )) : column.isEditableTableCell && Object.keys(row).length > 0 ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn && Object.keys(row).length > 0 ? /* @__PURE__ */ React9__default.default.createElement(
+              )) : column.isEditableTableCell && Object.keys(row).length > 0 ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn && Object.keys(row).length > 0 ? /* @__PURE__ */ React10__default.default.createElement(
                 material.Box,
                 {
                   className: `${column.enumColumn.hasColor ? `${column.enumColumn.enumSuffix ? `${value.toLowerCase()}-${column.enumColumn.enumSuffix.toLowerCase()}` : value.toString().toLowerCase()}-type-color` : ""} format-value`
                 },
                 formatValue(value, column)
-              ) : column.isBoolean && Object.keys(row).length > 0 ? /* @__PURE__ */ React9__default.default.createElement(
+              ) : column.isBoolean && Object.keys(row).length > 0 ? /* @__PURE__ */ React10__default.default.createElement(
                 material.Box,
                 {
                   className: `${column.isBoolean.hasColor ? `${column.isBoolean.enumSuffix ? `${value.toString().toLowerCase()}-${column.isBoolean.enumSuffix.toLowerCase()}` : value.toString().toLowerCase()}-boolean-color` : ""} format-value`
                 },
                 formatValue(value, column)
-              ) : /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: `${column.isImage ? "" : "format-value"}` }, formatValue(value, column))
+              ) : /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: `${column.isImage ? "" : "format-value"}` }, formatValue(value, column))
             );
           })
         );
-      }) : !props.loading ? /* @__PURE__ */ React9__default.default.createElement(material.TableRow, null, /* @__PURE__ */ React9__default.default.createElement(material.TableCell, { colSpan: props.columns.length }, /* @__PURE__ */ React9__default.default.createElement(material.Box, null, props.values.NO_RESULTS_FOUND))) : /* @__PURE__ */ React9__default.default.createElement(material.TableRow, null))
+      }) : !props.loading ? /* @__PURE__ */ React10__default.default.createElement(material.TableRow, null, /* @__PURE__ */ React10__default.default.createElement(material.TableCell, { colSpan: props.columns.length }, /* @__PURE__ */ React10__default.default.createElement(material.Box, null, props.values.NO_RESULTS_FOUND))) : /* @__PURE__ */ React10__default.default.createElement(material.TableRow, null))
     )
   )));
 };
@@ -1525,7 +1526,7 @@ document.head.appendChild(document.createElement("style")).appendChild(document.
 
 // src/components/layouts/MainLayoutSimple/MainLayoutSimple.tsx
 var MainLayoutSimple = (props) => {
-  return /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { display: "flex", flexDirection: "row" }, className: "main-layout-simple" }, props.lateralComponent && props.lateralComponent, /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "main-wrapper", sx: { bgcolor: "background.default" } }, props.headerComponent && props.headerComponent, /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: `${props.lateralComponent ? "split-container" : ""}` }, /* @__PURE__ */ React9__default.default.createElement(material.Container, { maxWidth: false }, props.mainComponent))));
+  return /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: "flex", flexDirection: "row" }, className: "main-layout-simple" }, props.lateralComponent && props.lateralComponent, /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "main-wrapper", sx: { bgcolor: "background.default" } }, props.headerComponent && props.headerComponent, /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: `${props.lateralComponent ? "split-container" : ""}` }, /* @__PURE__ */ React10__default.default.createElement(material.Container, { maxWidth: false }, props.mainComponent))));
 };
 
 // src/components/layouts/SplitLayout/SplitLayout.scss
@@ -1554,7 +1555,7 @@ var SplitLayout = ({
   children
 }) => {
   const heroImageUrl = imgUrl?.trim();
-  return /* @__PURE__ */ React9__default.default.createElement(material.Grid, { container: true, className: "split-layout", sx: { minHeight: "100vh" } }, heroImageUrl && /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(material.Grid, { container: true, className: "split-layout", sx: { minHeight: "100vh" } }, heroImageUrl && /* @__PURE__ */ React10__default.default.createElement(
     material.Grid,
     {
       component: "section",
@@ -1562,8 +1563,8 @@ var SplitLayout = ({
       sx: { display: { xs: "none", md: "block" }, position: "relative", overflow: "hidden" },
       "aria-hidden": "true"
     },
-    /* @__PURE__ */ React9__default.default.createElement("img", { src: heroImageUrl, alt: "split-layout-image", className: "split-layout__media-image" })
-  ), /* @__PURE__ */ React9__default.default.createElement(
+    /* @__PURE__ */ React10__default.default.createElement("img", { src: heroImageUrl, alt: "split-layout-image", className: "split-layout__media-image" })
+  ), /* @__PURE__ */ React10__default.default.createElement(
     material.Grid,
     {
       component: "section",
@@ -1577,30 +1578,30 @@ var SplitLayout = ({
         p: { xs: 2, sm: 2.5, md: 4 }
       }
     },
-    /* @__PURE__ */ React9__default.default.createElement(material.Container, { className: "split-layout__content-wrap" }, children)
+    /* @__PURE__ */ React10__default.default.createElement(material.Container, { className: "split-layout__content-wrap" }, children)
   ));
 };
 var NavIcon = (props) => {
   if (props.iconClassName) {
-    return /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "pcoded-micon" }, /* @__PURE__ */ React9__default.default.createElement("i", { className: props.iconClassName }));
+    return /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "pcoded-micon" }, /* @__PURE__ */ React10__default.default.createElement("i", { className: props.iconClassName }));
   } else if (props.iconComponent) {
-    return /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "pcoded-micon" }, props.iconComponent);
+    return /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "pcoded-micon" }, props.iconComponent);
   }
-  return /* @__PURE__ */ React9__default.default.createElement(React9__default.default.Fragment, null);
+  return /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null);
 };
 
 // src/components/navigation/VerticalNav/VerticalNavItem.tsx
 var VerticalNavItem = (props) => {
   const { pathname } = reactRouter.useLocation();
-  const hasPermission = React9.useMemo(
+  const hasPermission = React10.useMemo(
     () => checkPermission(props.item.persmisionAvailable, props.userPermisions),
     [props.item.persmisionAvailable, props.userPermisions]
   );
   if (!hasPermission) {
     return null;
   }
-  const isActive = !!reactRouter.matchPath({ path: `${props.item.route}/*` || "" }, pathname);
-  return /* @__PURE__ */ React9__default.default.createElement(reactRouter.NavLink, { to: props.item.route || "", className: `nav-link-item ${isActive ? "active" : ""}`, onClick: props.onHide }, /* @__PURE__ */ React9__default.default.createElement(
+  const isActive = !!reactRouter.matchPath({ path: props.item.end ? props.item.route || "" : `${props.item.route}/*` }, pathname);
+  return /* @__PURE__ */ React10__default.default.createElement(reactRouter.NavLink, { to: props.item.route || "", end: props.item.end, className: `nav-link-item ${isActive ? "active" : ""}`, onClick: props.onHide }, /* @__PURE__ */ React10__default.default.createElement(
     material.Box,
     {
       sx: (theme) => ({
@@ -1618,11 +1619,11 @@ var VerticalNavItem = (props) => {
       }),
       className: `nav-item ${isActive ? "main-background-color" : ""}`
     },
-    /* @__PURE__ */ React9__default.default.createElement(NavIcon, { iconClassName: props.item.iconClassName, iconComponent: props.item.iconComponent }),
-    /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: `nav-item-text` }, props.item.title)
+    /* @__PURE__ */ React10__default.default.createElement(NavIcon, { iconClassName: props.item.iconClassName, iconComponent: props.item.iconComponent }),
+    /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: `nav-item-text` }, props.item.title)
   ));
 };
-var VerticalNavItem_default = React9__default.default.memo(VerticalNavItem);
+var VerticalNavItem_default = React10__default.default.memo(VerticalNavItem);
 var needsToBeOpened = (pathname, item) => {
   if (pathname) {
     return isUrlInChildren(item, pathname);
@@ -1647,8 +1648,8 @@ var isUrlInChildren = (parent, url) => {
 };
 var VerticalNavItemCollapse = (props) => {
   const { pathname } = reactRouter.useLocation();
-  const [open, setOpen] = React9.useState(() => needsToBeOpened(pathname, props.item));
-  React9.useEffect(() => {
+  const [open, setOpen] = React10.useState(() => needsToBeOpened(pathname, props.item));
+  React10.useEffect(() => {
     if (needsToBeOpened(pathname, props.item)) {
       setOpen(true);
     }
@@ -1656,26 +1657,26 @@ var VerticalNavItemCollapse = (props) => {
   const handleClick = () => {
     setOpen(!open);
   };
-  const hasPermission = React9.useMemo(
+  const hasPermission = React10.useMemo(
     () => checkPermission(props.item.persmisionAvailable, props.userPermisions),
     [props.item.persmisionAvailable, props.userPermisions]
   );
   if (!hasPermission) {
     return null;
   }
-  return /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "nav-item-collapse" }, /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "nav-item-collapse" }, /* @__PURE__ */ React10__default.default.createElement(
     material.Box,
     {
       sx: { p: 2, display: "flex", alignContent: "flex-end", alignItems: "center" },
       className: `nav-item ${open ? "open" : ""} ${needsToBeOpened(pathname, props.item) ? "active" : ""}`,
       onClick: handleClick
     },
-    /* @__PURE__ */ React9__default.default.createElement(NavIcon, { iconClassName: props.item.iconClassName, iconComponent: props.item.iconComponent }),
-    /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: `nav-item-text` }, props.item.title),
-    /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { ml: "auto", display: "flex" } }, open ? /* @__PURE__ */ React9__default.default.createElement(iconsMaterial.ExpandMore, null) : /* @__PURE__ */ React9__default.default.createElement(iconsMaterial.ChevronRight, null))
-  ), props.item.children && Array.isArray(props.item.children) && /* @__PURE__ */ React9__default.default.createElement(material.Collapse, { in: open, className: "collapse-children" }, /* @__PURE__ */ React9__default.default.createElement(material.Box, null, /* @__PURE__ */ React9__default.default.createElement(material.Grid, { container: true }, props.item.children.map((item) => /* @__PURE__ */ React9__default.default.createElement(material.Grid, { key: item.id, size: 12 }, item.type === 1 /* Collapse */ && /* @__PURE__ */ React9__default.default.createElement(VerticalNavItemCollapse, { item, userPermisions: props.userPermisions, onHide: props.onHide }), item.type === 0 /* Item */ && /* @__PURE__ */ React9__default.default.createElement(VerticalNavItem_default, { item, userPermisions: props.userPermisions, onHide: props.onHide })))))));
+    /* @__PURE__ */ React10__default.default.createElement(NavIcon, { iconClassName: props.item.iconClassName, iconComponent: props.item.iconComponent }),
+    /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: `nav-item-text` }, props.item.title),
+    /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { ml: "auto", display: "flex" } }, open ? /* @__PURE__ */ React10__default.default.createElement(iconsMaterial.ExpandMore, null) : /* @__PURE__ */ React10__default.default.createElement(iconsMaterial.ChevronRight, null))
+  ), props.item.children && Array.isArray(props.item.children) && /* @__PURE__ */ React10__default.default.createElement(material.Collapse, { in: open, className: "collapse-children" }, /* @__PURE__ */ React10__default.default.createElement(material.Box, null, /* @__PURE__ */ React10__default.default.createElement(material.Grid, { container: true }, props.item.children.map((item) => /* @__PURE__ */ React10__default.default.createElement(material.Grid, { key: item.id, size: 12 }, item.type === 1 /* Collapse */ && /* @__PURE__ */ React10__default.default.createElement(VerticalNavItemCollapse, { item, userPermisions: props.userPermisions, onHide: props.onHide }), item.type === 0 /* Item */ && /* @__PURE__ */ React10__default.default.createElement(VerticalNavItem_default, { item, userPermisions: props.userPermisions, onHide: props.onHide })))))));
 };
-var VerticalNavItemCollapse_default = React9__default.default.memo(VerticalNavItemCollapse);
+var VerticalNavItemCollapse_default = React10__default.default.memo(VerticalNavItemCollapse);
 
 // src/components/navigation/VerticalNav/VerticalNav.scss
 var css9 = `.vertical-navigation {
@@ -1720,7 +1721,7 @@ var NavigationType = /* @__PURE__ */ ((NavigationType2) => {
   return NavigationType2;
 })(NavigationType || {});
 var VerticalNav = (props) => {
-  return /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(
     material.Grid,
     {
       container: true,
@@ -1734,7 +1735,7 @@ var VerticalNav = (props) => {
         }
       })
     },
-    props.items.map((item) => /* @__PURE__ */ React9__default.default.createElement(material.Grid, { key: item.id, size: { xs: 12, md: 12 }, className: "grid-item-navigation" }, item.type === 1 /* Collapse */ && /* @__PURE__ */ React9__default.default.createElement(VerticalNavItemCollapse_default, { item, userPermisions: props.userPermisions, onHide: props.onHide }), item.type === 0 /* Item */ && /* @__PURE__ */ React9__default.default.createElement(VerticalNavItem_default, { item, userPermisions: props.userPermisions, onHide: props.onHide })))
+    props.items.map((item) => /* @__PURE__ */ React10__default.default.createElement(material.Grid, { key: item.id, size: { xs: 12, md: 12 }, className: "grid-item-navigation" }, item.type === 1 /* Collapse */ && /* @__PURE__ */ React10__default.default.createElement(VerticalNavItemCollapse_default, { item, userPermisions: props.userPermisions, onHide: props.onHide }), item.type === 0 /* Item */ && /* @__PURE__ */ React10__default.default.createElement(VerticalNavItem_default, { item, userPermisions: props.userPermisions, onHide: props.onHide })))
   );
 };
 
@@ -1747,7 +1748,7 @@ document.head.appendChild(document.createElement("style")).appendChild(document.
 
 // src/components/navigation/components/UserInfo.tsx
 var UserInfo = (props) => {
-  const [anchorEl, setAnchorEl] = React9__default.default.useState(null);
+  const [anchorEl, setAnchorEl] = React10__default.default.useState(null);
   const handleClick = (event) => {
     if (!event.currentTarget.contains(event.target)) return;
     setAnchorEl(event.currentTarget);
@@ -1755,14 +1756,14 @@ var UserInfo = (props) => {
   const handleClose = () => {
     setAnchorEl(null);
   };
-  return /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "user-info" }, /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "user-info" }, /* @__PURE__ */ React10__default.default.createElement(
     material.Box,
     {
       sx: { display: "flex", alignItems: "center" },
       className: props.menuActions && props.menuActions.length > 0 ? "cursor-pointer" : void 0,
       onClick: props.menuActions && props.menuActions.length > 0 ? handleClick : void 0
     },
-    props.photoURL && props.photoURL !== void 0 ? /* @__PURE__ */ React9__default.default.createElement(material.Avatar, { className: "avatar-user", src: props.photoURL }) : /* @__PURE__ */ React9__default.default.createElement(
+    props.photoURL && props.photoURL !== void 0 ? /* @__PURE__ */ React10__default.default.createElement(material.Avatar, { className: "avatar-user", src: props.photoURL }) : /* @__PURE__ */ React10__default.default.createElement(
       material.Avatar,
       {
         className: "avatar-user main-background-color",
@@ -1770,7 +1771,7 @@ var UserInfo = (props) => {
       },
       props.displayName.charAt(0).toUpperCase()
     ),
-    /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { ml: 1, width: "100%", display: "flex", alignItems: "center", alignContent: "flex-end" } }, /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "user-name" }, props.displayName), props.menuActions && props.menuActions.length > 0 && /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { ml: "auto", display: "flex" }, className: "cursor-pointer" }, /* @__PURE__ */ React9__default.default.createElement(iconsMaterial.ExpandMore, null), /* @__PURE__ */ React9__default.default.createElement(material.Menu, { anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleClose }, props.menuActions.map((item, i) => /* @__PURE__ */ React9__default.default.createElement(material.MenuItem, { key: i, onClick: item.action }, item.title)))))
+    /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { ml: 1, width: "100%", display: "flex", alignItems: "center", alignContent: "flex-end" } }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "user-name" }, props.displayName), props.menuActions && props.menuActions.length > 0 && /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { ml: "auto", display: "flex" }, className: "cursor-pointer" }, /* @__PURE__ */ React10__default.default.createElement(iconsMaterial.ExpandMore, null), /* @__PURE__ */ React10__default.default.createElement(material.Menu, { anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleClose }, props.menuActions.map((item, i) => /* @__PURE__ */ React10__default.default.createElement(material.MenuItem, { key: i, onClick: item.action }, item.title)))))
   ));
 };
 var AppBreadcrumbs = (props) => {
@@ -1784,9 +1785,9 @@ var AppBreadcrumbs = (props) => {
   if (!crumbs.length) {
     return null;
   }
-  return /* @__PURE__ */ React9__default.default.createElement(material.Breadcrumbs, { "aria-label": "breadcrumb", separator: props.separator, maxItems: props.maxItems }, crumbs.map((crumb, index) => {
+  return /* @__PURE__ */ React10__default.default.createElement(material.Breadcrumbs, { "aria-label": "breadcrumb", separator: props.separator, maxItems: props.maxItems }, crumbs.map((crumb, index) => {
     const isLast = index === crumbs.length - 1;
-    return isLast || !crumb.to ? /* @__PURE__ */ React9__default.default.createElement(material.Typography, { key: index, variant: "body2", sx: { color: isLast ? "text.primary" : "text.secondary" } }, crumb.label) : /* @__PURE__ */ React9__default.default.createElement(material.Link, { key: index, component: reactRouter.Link, to: crumb.to, underline: "hover", variant: "body2", color: "inherit" }, crumb.label);
+    return isLast || !crumb.to ? /* @__PURE__ */ React10__default.default.createElement(material.Typography, { key: index, variant: "body2", sx: { color: isLast ? "text.primary" : "text.secondary" } }, crumb.label) : /* @__PURE__ */ React10__default.default.createElement(material.Link, { key: index, component: reactRouter.Link, to: crumb.to, underline: "hover", variant: "body2", color: "inherit" }, crumb.label);
   }));
 };
 
@@ -1805,7 +1806,7 @@ var sidebarSx = (theme) => ({
   boxShadow: `1px 0 20px 0 ${theme.palette.divider}`
 });
 var AppSidebar = (props) => {
-  return /* @__PURE__ */ React9__default.default.createElement(React9__default.default.Fragment, null, /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, /* @__PURE__ */ React10__default.default.createElement(
     material.Drawer,
     {
       anchor: "left",
@@ -1814,8 +1815,8 @@ var AppSidebar = (props) => {
       onClose: props.onHide,
       sx: { display: { xs: "block", lg: "none" } }
     },
-    /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: sidebarSx, className: "app-sidebar" }, /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { display: "flex", flexDirection: "column", height: "100vh" } }, props.headerComponents && /* @__PURE__ */ React9__default.default.createElement(React9__default.default.Fragment, null, /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { p: "12px", flexShrink: 0 } }, props.headerComponents), /* @__PURE__ */ React9__default.default.createElement(material.Divider, null)), /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { overflow: "auto" } }, props.children), props.footerComponents && /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { mt: "auto", flexShrink: 0 } }, props.footerComponents)))
-  ), /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { display: { xs: "none", lg: "block" } } }, /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: sidebarSx, className: "app-sidebar" }, /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { position: "sticky", top: "0" } }, /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { display: "flex", flexDirection: "column", height: "100vh" } }, props.headerComponents && /* @__PURE__ */ React9__default.default.createElement(React9__default.default.Fragment, null, /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { p: "12px", flexShrink: 0 } }, props.headerComponents), /* @__PURE__ */ React9__default.default.createElement(material.Divider, null)), /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { overflow: "auto" } }, props.children), props.footerComponents && /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { mt: "auto", flexShrink: 0 } }, props.footerComponents))))));
+    /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: sidebarSx, className: "app-sidebar" }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: "flex", flexDirection: "column", height: "100vh" } }, props.headerComponents && /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { p: "12px", flexShrink: 0 } }, props.headerComponents), /* @__PURE__ */ React10__default.default.createElement(material.Divider, null)), /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { overflow: "auto" } }, props.children), props.footerComponents && /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { mt: "auto", flexShrink: 0 } }, props.footerComponents)))
+  ), /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: { xs: "none", lg: "block" } } }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: sidebarSx, className: "app-sidebar" }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { position: "sticky", top: "0" } }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: "flex", flexDirection: "column", height: "100vh" } }, props.headerComponents && /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { p: "12px", flexShrink: 0 } }, props.headerComponents), /* @__PURE__ */ React10__default.default.createElement(material.Divider, null)), /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { overflow: "auto" } }, props.children), props.footerComponents && /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { mt: "auto", flexShrink: 0 } }, props.footerComponents))))));
 };
 
 // src/components/layouts/DrawerLayout/DrawerSidebar/DrawerSidebar.scss
@@ -1834,7 +1835,7 @@ var drawerSidebarSx = (theme) => ({
   boxShadow: `1px 0 20px 0 ${theme.palette.divider}`
 });
 var DrawerSidebar = (props) => {
-  return /* @__PURE__ */ React9__default.default.createElement(material.Drawer, { anchor: "left", className: "drawer-nav", open: props.open, onClose: props.onHide }, /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: drawerSidebarSx, className: "drawer-sidebar" }, /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { display: "flex", flexDirection: "column", height: "100vh" } }, props.headerComponents && /* @__PURE__ */ React9__default.default.createElement(React9__default.default.Fragment, null, /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { p: "12px", flexShrink: 0 } }, props.headerComponents), /* @__PURE__ */ React9__default.default.createElement(material.Divider, null)), /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { overflow: "auto" } }, props.children), props.footerComponents && /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { mt: "auto", flexShrink: 0 } }, props.footerComponents))));
+  return /* @__PURE__ */ React10__default.default.createElement(material.Drawer, { anchor: "left", className: "drawer-nav", open: props.open, onClose: props.onHide }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: drawerSidebarSx, className: "drawer-sidebar" }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: "flex", flexDirection: "column", height: "100vh" } }, props.headerComponents && /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { p: "12px", flexShrink: 0 } }, props.headerComponents), /* @__PURE__ */ React10__default.default.createElement(material.Divider, null)), /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { overflow: "auto" } }, props.children), props.footerComponents && /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { mt: "auto", flexShrink: 0 } }, props.footerComponents))));
 };
 
 // src/components/layouts/Standard/AppHeader/AppHeader.scss
@@ -1855,7 +1856,7 @@ document.head.appendChild(document.createElement("style")).appendChild(document.
 
 // src/components/layouts/Standard/AppHeader/AppHeader.tsx
 var AppHeader = (props) => {
-  return /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(
     material.AppBar,
     {
       position: "sticky",
@@ -1872,7 +1873,7 @@ var AppHeader = (props) => {
       },
       className: `app-bar ${props.className ?? ""}`
     },
-    /* @__PURE__ */ React9__default.default.createElement(material.Toolbar, { className: "app-toolbar" }, props.handleDrawerOpen && /* @__PURE__ */ React9__default.default.createElement(
+    /* @__PURE__ */ React10__default.default.createElement(material.Toolbar, { className: "app-toolbar" }, props.handleDrawerOpen && /* @__PURE__ */ React10__default.default.createElement(
       material.IconButton,
       {
         sx: { display: { xs: `inline-flex`, lg: props.drawerVisible ? `inline-flex` : `none` } },
@@ -1881,7 +1882,7 @@ var AppHeader = (props) => {
         "aria-label": "open drawer",
         onClick: props.handleDrawerOpen
       },
-      /* @__PURE__ */ React9__default.default.createElement(MenuIcon__default.default, null)
+      /* @__PURE__ */ React10__default.default.createElement(MenuIcon__default.default, null)
     ), props.children)
   );
 };
@@ -1911,7 +1912,7 @@ var modalCancelSx = (theme) => ({
 var ButtonComponent = ({ component = "button", ...rest }) => {
   const props = { component, ...rest };
   const isContained = !props.variant || props.variant === "contained";
-  return /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(
     material.Button,
     {
       type: props.type && props.type,
@@ -1940,7 +1941,7 @@ var ButtonComponent = ({ component = "button", ...rest }) => {
       disabled: props.loading || props.disabled,
       component: props.component
     },
-    props.loading ? /* @__PURE__ */ React9__default.default.createElement(
+    props.loading ? /* @__PURE__ */ React10__default.default.createElement(
       material.CircularProgress,
       {
         className: `${props.reverseColors ? "circular-progress-main-color" : ""}`,
@@ -2016,7 +2017,7 @@ var TextSimpleComponent = ({
 }) => {
   const props = { noBorders, isFormLabel, ...rest };
   function SkeletonCompleteDefault(skeleton) {
-    return skeleton.mineSkeleton ?? /* @__PURE__ */ React9__default.default.createElement(
+    return skeleton.mineSkeleton ?? /* @__PURE__ */ React10__default.default.createElement(
       material.Skeleton,
       {
         width: props.fullWidth ? "auto" : "200px",
@@ -2026,7 +2027,7 @@ var TextSimpleComponent = ({
       }
     );
   }
-  return /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(
     material.Box,
     {
       className: "text-simple-component",
@@ -2041,8 +2042,8 @@ var TextSimpleComponent = ({
       }),
       ...props.componentBoxProps
     },
-    props.skeletonLabel ? /* @__PURE__ */ React9__default.default.createElement(material.Skeleton, { width: "10%", animation: "wave" }) : props.label ? props.isFormLabel ? /* @__PURE__ */ React9__default.default.createElement(material.FormLabel, { className: `${props.classNameLabel ?? ""}` }, props.label) : /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: `${props.classNameLabel ?? ""}`, ...props.labelBoxProps }, props.label) : /* @__PURE__ */ React9__default.default.createElement(React9__default.default.Fragment, null),
-    /* @__PURE__ */ React9__default.default.createElement(
+    props.skeletonLabel ? /* @__PURE__ */ React10__default.default.createElement(material.Skeleton, { width: "10%", animation: "wave" }) : props.label ? props.isFormLabel ? /* @__PURE__ */ React10__default.default.createElement(material.FormLabel, { className: `${props.classNameLabel ?? ""}` }, props.label) : /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: `${props.classNameLabel ?? ""}`, ...props.labelBoxProps }, props.label) : /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null),
+    /* @__PURE__ */ React10__default.default.createElement(
       material.Box,
       {
         sx: {
@@ -2056,15 +2057,15 @@ var TextSimpleComponent = ({
          ${props.noBorders || props.skeletonValue && props.skeletonValue.useSkeleton ? "no-border" : ""} ${props.error ? "has-error-border" : ""} ${props.startIcon ? "icon-padding" : props.endIcon ? "end-icon-padding" : ""}`,
         ...props.valueBoxProps
       },
-      props.skeletonValue && props.skeletonValue.useSkeleton ? /* @__PURE__ */ React9__default.default.createElement(SkeletonCompleteDefault, { ...props.skeletonValue }) : /* @__PURE__ */ React9__default.default.createElement(React9__default.default.Fragment, null, props.startIcon && /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { mr: 1, display: "flex" } }, props.startIcon), props.isLoading ? /* @__PURE__ */ React9__default.default.createElement(material.CircularProgress, { className: "circular-progress-main-color", size: 20, color: "primary" }) : /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { width: props.fullWidth ? "100%" : "auto" } }, props.value), props.endIcon && /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { ml: props.fullWidth ? "auto" : "1", display: "flex" } }, props.endIcon))
+      props.skeletonValue && props.skeletonValue.useSkeleton ? /* @__PURE__ */ React10__default.default.createElement(SkeletonCompleteDefault, { ...props.skeletonValue }) : /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, props.startIcon && /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { mr: 1, display: "flex" } }, props.startIcon), props.isLoading ? /* @__PURE__ */ React10__default.default.createElement(material.CircularProgress, { className: "circular-progress-main-color", size: 20, color: "primary" }) : /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { width: props.fullWidth ? "100%" : "auto" } }, props.value), props.endIcon && /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { ml: props.fullWidth ? "auto" : "1", display: "flex" } }, props.endIcon))
     ),
-    props.helperText && /* @__PURE__ */ React9__default.default.createElement(
+    props.helperText && /* @__PURE__ */ React10__default.default.createElement(
       material.Box,
       {
         className: `helper-text ${props.error ? "has-error" : ""} ${props.noBorders || props.skeletonValue && props.skeletonValue.useSkeleton ? "no-border" : ""}`,
         ...props.helperBoxProps
       },
-      props.skeletonValue && props.skeletonValue.useSkeleton ? /* @__PURE__ */ React9__default.default.createElement(material.Skeleton, { width: "15%", animation: "wave" }) : props.helperText
+      props.skeletonValue && props.skeletonValue.useSkeleton ? /* @__PURE__ */ React10__default.default.createElement(material.Skeleton, { width: "15%", animation: "wave" }) : props.helperText
     )
   );
 };
@@ -2177,7 +2178,7 @@ var SelectField = ({
   const getOptions = () => {
     return props.addExtraOption ? [props.addExtraOption, ...props.options] : props.options;
   };
-  return /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "select-field", sx: selectFieldSx }, props.label && /* @__PURE__ */ React9__default.default.createElement(material.FormLabel, { className: `${props.invalid ? "Mui-error" : ""}` }, props.label), /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "select-field", sx: selectFieldSx }, props.label && /* @__PURE__ */ React10__default.default.createElement(material.FormLabel, { className: `${props.invalid ? "Mui-error" : ""}` }, props.label), /* @__PURE__ */ React10__default.default.createElement(
     Select__default.default,
     {
       defaultValue: props.defaultOptions,
@@ -2208,7 +2209,7 @@ var SelectField = ({
       theme: buildReactSelectTheme(theme),
       styles: buildReactSelectStyles(theme)
     }
-  ), props.helperText && /* @__PURE__ */ React9__default.default.createElement(material.FormHelperText, { error: props.invalid, className: `helper-text ${props.invalid ? "has-error Mui-error" : ""}` }, props.helperText));
+  ), props.helperText && /* @__PURE__ */ React10__default.default.createElement(material.FormHelperText, { error: props.invalid, className: `helper-text ${props.invalid ? "has-error Mui-error" : ""}` }, props.helperText));
 };
 var SelectAsyncField = ({
   isClearable = true,
@@ -2224,7 +2225,7 @@ var SelectAsyncField = ({
     orderBy: "Id",
     orderAsc: true
   };
-  const [filters, setFilters] = React9.useState(props.filters ? props.filters : defaultFilters);
+  const [filters, setFilters] = React10.useState(props.filters ? props.filters : defaultFilters);
   const loadOptions = async (search, _loadedOptions, additional) => {
     const newFilters = filters;
     newFilters.search = search;
@@ -2249,7 +2250,7 @@ var SelectAsyncField = ({
       }
     };
   };
-  return /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "select-field", sx: selectFieldSx }, props.label && /* @__PURE__ */ React9__default.default.createElement(material.FormLabel, { className: `${props.invalid ? "Mui-error" : ""}` }, props.label), /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "select-field", sx: selectFieldSx }, props.label && /* @__PURE__ */ React10__default.default.createElement(material.FormLabel, { className: `${props.invalid ? "Mui-error" : ""}` }, props.label), /* @__PURE__ */ React10__default.default.createElement(
     reactSelectAsyncPaginate.AsyncPaginate,
     {
       defaultValue: props.defaultOptions,
@@ -2282,14 +2283,14 @@ var SelectAsyncField = ({
       theme: buildReactSelectTheme(theme),
       styles: buildReactSelectStyles(theme)
     }
-  ), props.helperText && /* @__PURE__ */ React9__default.default.createElement(material.FormHelperText, { error: props.invalid, className: `helper-text ${props.invalid ? "has-error Mui-error" : ""}` }, props.helperText));
+  ), props.helperText && /* @__PURE__ */ React10__default.default.createElement(material.FormHelperText, { error: props.invalid, className: `helper-text ${props.invalid ? "has-error Mui-error" : ""}` }, props.helperText));
 };
 var LoginForm = (props) => {
   const LoginSchema = yup2__namespace.object().shape({
     login: yup2__namespace.string().required(props.requiredText.requiredTextLogin),
     password: yup2__namespace.string().required(props.requiredText.requiredTextPassword)
   });
-  const [showPassword, setShownPassword] = React9.useState(false);
+  const [showPassword, setShownPassword] = React10.useState(false);
   const handleClickShowPassword = () => {
     setShownPassword(!showPassword);
   };
@@ -2302,12 +2303,12 @@ var LoginForm = (props) => {
   } = reactHookForm.useForm({
     resolver: yup.yupResolver(LoginSchema)
   });
-  return /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { m: 2 } }, props.topComponent && /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { m: 2 } }, props.topComponent), /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { my: 2 } }, /* @__PURE__ */ React9__default.default.createElement(material.Stack, { direction: "column", spacing: 1 }, /* @__PURE__ */ React9__default.default.createElement(material.Box, null, /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { m: 2 } }, props.topComponent && /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { m: 2 } }, props.topComponent), /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { my: 2 } }, /* @__PURE__ */ React10__default.default.createElement(material.Stack, { direction: "column", spacing: 1 }, /* @__PURE__ */ React10__default.default.createElement(material.Box, null, /* @__PURE__ */ React10__default.default.createElement(
     reactHookForm.Controller,
     {
       control,
       name: "login",
-      render: ({ field: { onChange, name, ref: ref2 } }) => /* @__PURE__ */ React9__default.default.createElement(
+      render: ({ field: { onChange, name, ref: ref2 } }) => /* @__PURE__ */ React10__default.default.createElement(
         TextFieldComponent,
         {
           label: props.valuesText.labelLogin,
@@ -2331,12 +2332,12 @@ var LoginForm = (props) => {
         }
       )
     }
-  )), /* @__PURE__ */ React9__default.default.createElement(material.Box, null, /* @__PURE__ */ React9__default.default.createElement(
+  )), /* @__PURE__ */ React10__default.default.createElement(material.Box, null, /* @__PURE__ */ React10__default.default.createElement(
     reactHookForm.Controller,
     {
       control,
       name: "password",
-      render: ({ field: { onChange, name, ref: ref2 } }) => /* @__PURE__ */ React9__default.default.createElement(
+      render: ({ field: { onChange, name, ref: ref2 } }) => /* @__PURE__ */ React10__default.default.createElement(
         TextFieldComponent,
         {
           label: props.valuesText.labelPassword,
@@ -2357,11 +2358,11 @@ var LoginForm = (props) => {
               }
             }
           },
-          endIcon: /* @__PURE__ */ React9__default.default.createElement(material.IconButton, { "aria-label": "toggle password visibility", onClick: handleClickShowPassword, size: "small" }, showPassword ? /* @__PURE__ */ React9__default.default.createElement(iconsMaterial.Visibility, null) : /* @__PURE__ */ React9__default.default.createElement(iconsMaterial.VisibilityOff, null))
+          endIcon: /* @__PURE__ */ React10__default.default.createElement(material.IconButton, { "aria-label": "toggle password visibility", onClick: handleClickShowPassword, size: "small" }, showPassword ? /* @__PURE__ */ React10__default.default.createElement(iconsMaterial.Visibility, null) : /* @__PURE__ */ React10__default.default.createElement(iconsMaterial.VisibilityOff, null))
         }
       )
     }
-  )))), /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { mb: 4 } }, /* @__PURE__ */ React9__default.default.createElement(
+  )))), /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { mb: 4 } }, /* @__PURE__ */ React10__default.default.createElement(
     ButtonComponent,
     {
       label: props.valuesText.buttonText,
@@ -2369,7 +2370,7 @@ var LoginForm = (props) => {
       className: "btn-login",
       onClick: handleSubmit(props.onClick)
     }
-  )), props.bottomComponent && /* @__PURE__ */ React9__default.default.createElement(material.Box, null, props.bottomComponent));
+  )), props.bottomComponent && /* @__PURE__ */ React10__default.default.createElement(material.Box, null, props.bottomComponent));
 };
 var ChangePasswordForm = (props) => {
   const validationSchema = yup2__namespace.object().shape({
@@ -2388,19 +2389,19 @@ var ChangePasswordForm = (props) => {
   } = reactHookForm.useForm({
     resolver: yup.yupResolver(validationSchema)
   });
-  const [showPassword, setShownPassword] = React9.useState(false);
+  const [showPassword, setShownPassword] = React10.useState(false);
   const handleClickShowPassword = () => {
     setShownPassword(!showPassword);
   };
   const handleMouseDownPassword = (event) => {
     event.preventDefault();
   };
-  return /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { m: 2 } }, props.topComponent && /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { m: 2 } }, props.topComponent), /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { my: 2 } }, /* @__PURE__ */ React9__default.default.createElement(material.Stack, { direction: "column", spacing: 1 }, /* @__PURE__ */ React9__default.default.createElement(material.Box, null, /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { m: 2 } }, props.topComponent && /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { m: 2 } }, props.topComponent), /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { my: 2 } }, /* @__PURE__ */ React10__default.default.createElement(material.Stack, { direction: "column", spacing: 1 }, /* @__PURE__ */ React10__default.default.createElement(material.Box, null, /* @__PURE__ */ React10__default.default.createElement(
     reactHookForm.Controller,
     {
       control,
       name: "password",
-      render: ({ field: { onChange, name, ref: ref2 } }) => /* @__PURE__ */ React9__default.default.createElement(
+      render: ({ field: { onChange, name, ref: ref2 } }) => /* @__PURE__ */ React10__default.default.createElement(
         TextFieldComponent,
         {
           label: props.valuesText.labelPassword,
@@ -2421,7 +2422,7 @@ var ChangePasswordForm = (props) => {
               }
             }
           },
-          endIcon: /* @__PURE__ */ React9__default.default.createElement(
+          endIcon: /* @__PURE__ */ React10__default.default.createElement(
             material.IconButton,
             {
               "aria-label": "toggle password visibility",
@@ -2429,17 +2430,17 @@ var ChangePasswordForm = (props) => {
               onMouseDown: handleMouseDownPassword,
               size: "small"
             },
-            showPassword ? /* @__PURE__ */ React9__default.default.createElement(iconsMaterial.Visibility, null) : /* @__PURE__ */ React9__default.default.createElement(iconsMaterial.VisibilityOff, null)
+            showPassword ? /* @__PURE__ */ React10__default.default.createElement(iconsMaterial.Visibility, null) : /* @__PURE__ */ React10__default.default.createElement(iconsMaterial.VisibilityOff, null)
           )
         }
       )
     }
-  )), /* @__PURE__ */ React9__default.default.createElement(material.Box, null, /* @__PURE__ */ React9__default.default.createElement(
+  )), /* @__PURE__ */ React10__default.default.createElement(material.Box, null, /* @__PURE__ */ React10__default.default.createElement(
     reactHookForm.Controller,
     {
       control,
       name: "passwordConfirmation",
-      render: ({ field: { onChange, name, ref: ref2 } }) => /* @__PURE__ */ React9__default.default.createElement(
+      render: ({ field: { onChange, name, ref: ref2 } }) => /* @__PURE__ */ React10__default.default.createElement(
         TextFieldComponent,
         {
           label: props.valuesText.labelSamePassword,
@@ -2460,7 +2461,7 @@ var ChangePasswordForm = (props) => {
               }
             }
           },
-          endIcon: /* @__PURE__ */ React9__default.default.createElement(
+          endIcon: /* @__PURE__ */ React10__default.default.createElement(
             material.IconButton,
             {
               "aria-label": "toggle password visibility",
@@ -2468,12 +2469,12 @@ var ChangePasswordForm = (props) => {
               onMouseDown: handleMouseDownPassword,
               size: "small"
             },
-            showPassword ? /* @__PURE__ */ React9__default.default.createElement(iconsMaterial.Visibility, null) : /* @__PURE__ */ React9__default.default.createElement(iconsMaterial.VisibilityOff, null)
+            showPassword ? /* @__PURE__ */ React10__default.default.createElement(iconsMaterial.Visibility, null) : /* @__PURE__ */ React10__default.default.createElement(iconsMaterial.VisibilityOff, null)
           )
         }
       )
     }
-  )))), /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { mb: 4 } }, /* @__PURE__ */ React9__default.default.createElement(
+  )))), /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { mb: 4 } }, /* @__PURE__ */ React10__default.default.createElement(
     ButtonComponent,
     {
       label: props.valuesText.buttonText,
@@ -2481,7 +2482,7 @@ var ChangePasswordForm = (props) => {
       onClick: handleSubmit(props.onClick),
       loading: props.loading
     }
-  )), props.bottomComponent && /* @__PURE__ */ React9__default.default.createElement(material.Box, null, props.bottomComponent));
+  )), props.bottomComponent && /* @__PURE__ */ React10__default.default.createElement(material.Box, null, props.bottomComponent));
 };
 var ResetPasswordForm = (props) => {
   const ResetSchema = yup2__namespace.object().shape({
@@ -2496,12 +2497,12 @@ var ResetPasswordForm = (props) => {
   } = reactHookForm.useForm({
     resolver: yup.yupResolver(ResetSchema)
   });
-  return /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { m: 2 } }, props.topComponent && /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { m: 2 } }, props.topComponent), /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { my: 2 } }, /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { m: 2 } }, props.topComponent && /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { m: 2 } }, props.topComponent), /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { my: 2 } }, /* @__PURE__ */ React10__default.default.createElement(
     reactHookForm.Controller,
     {
       control,
       name: "email",
-      render: ({ field: { onChange, name, ref: ref2 } }) => /* @__PURE__ */ React9__default.default.createElement(
+      render: ({ field: { onChange, name, ref: ref2 } }) => /* @__PURE__ */ React10__default.default.createElement(
         TextFieldComponent,
         {
           label: props.valuesText.label,
@@ -2525,7 +2526,7 @@ var ResetPasswordForm = (props) => {
         }
       )
     }
-  )), /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { mb: 4 } }, /* @__PURE__ */ React9__default.default.createElement(
+  )), /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { mb: 4 } }, /* @__PURE__ */ React10__default.default.createElement(
     ButtonComponent,
     {
       label: props.valuesText.buttonText,
@@ -2533,7 +2534,7 @@ var ResetPasswordForm = (props) => {
       onClick: handleSubmit(props.onClick),
       loading: props.loading
     }
-  )), props.bottomComponent && /* @__PURE__ */ React9__default.default.createElement(material.Box, null, props.bottomComponent));
+  )), props.bottomComponent && /* @__PURE__ */ React10__default.default.createElement(material.Box, null, props.bottomComponent));
 };
 var ModalComponent = ({
   modalSize = "sm",
@@ -2545,7 +2546,7 @@ var ModalComponent = ({
   ...rest
 }) => {
   const props = { modalSize, fullWidth, loading, dividers, crossAvailable, buttonActionsAlign, ...rest };
-  return /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(
     material.Dialog,
     {
       open: props.setShow,
@@ -2560,17 +2561,17 @@ var ModalComponent = ({
       scroll: "body",
       slotProps: { paper: { sx: { overflowY: "unset" } } }
     },
-    /* @__PURE__ */ React9__default.default.createElement(material.DialogTitle, { id: "modal-title" }, /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { display: "flex", alignItems: "center" } }, props.title, props.onHide && props.crossAvailable && /* @__PURE__ */ React9__default.default.createElement(
+    /* @__PURE__ */ React10__default.default.createElement(material.DialogTitle, { id: "modal-title" }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: "flex", alignItems: "center" } }, props.title, props.onHide && props.crossAvailable && /* @__PURE__ */ React10__default.default.createElement(
       material.Box,
       {
         sx: {
           margin: "-1rem -1rem -1rem auto"
         }
       },
-      /* @__PURE__ */ React9__default.default.createElement(material.IconButton, { "aria-label": "close", onClick: props.onHide }, /* @__PURE__ */ React9__default.default.createElement(iconsMaterial.Close, null))
+      /* @__PURE__ */ React10__default.default.createElement(material.IconButton, { "aria-label": "close", onClick: props.onHide }, /* @__PURE__ */ React10__default.default.createElement(iconsMaterial.Close, null))
     ))),
-    props.children && /* @__PURE__ */ React9__default.default.createElement(material.DialogContent, { sx: { overflowY: "unset" }, id: "modal-description", dividers: props.dividers }, props.children),
-    /* @__PURE__ */ React9__default.default.createElement(material.DialogActions, { sx: { justifyContent: props.buttonActionsAlign } }, props.cancelButton && /* @__PURE__ */ React9__default.default.createElement(
+    props.children && /* @__PURE__ */ React10__default.default.createElement(material.DialogContent, { sx: { overflowY: "unset" }, id: "modal-description", dividers: props.dividers }, props.children),
+    /* @__PURE__ */ React10__default.default.createElement(material.DialogActions, { sx: { justifyContent: props.buttonActionsAlign } }, props.cancelButton && /* @__PURE__ */ React10__default.default.createElement(
       ButtonComponent,
       {
         disabled: props.loading,
@@ -2578,7 +2579,7 @@ var ModalComponent = ({
         onClick: props.cancelButton.onClick ? props.cancelButton.onClick : props.onHide,
         ...props.cancelButton
       }
-    ), props.submitButton && /* @__PURE__ */ React9__default.default.createElement(
+    ), props.submitButton && /* @__PURE__ */ React10__default.default.createElement(
       ButtonComponent,
       {
         className: `btn-modal-submit main-background-color ${props.submitButton.className ? props.submitButton.className : ""}`,
@@ -2625,7 +2626,7 @@ var DetailPanelComponent = ({
   doublePanel = false,
   disableBackdropClose = false
 }) => {
-  return /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(
     material.Drawer,
     {
       anchor,
@@ -2644,9 +2645,9 @@ var DetailPanelComponent = ({
         }
       }
     },
-    /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "detail-panel__header", sx: { px: { xs: 2, md: 3 }, py: 1.5 } }, /* @__PURE__ */ React9__default.default.createElement(material.Typography, { variant: "h6", component: "h2", noWrap: true }, title), /* @__PURE__ */ React9__default.default.createElement(material.IconButton, { "aria-label": "close", onClick: onClose }, /* @__PURE__ */ React9__default.default.createElement(iconsMaterial.Close, null))),
-    /* @__PURE__ */ React9__default.default.createElement(material.Divider, null),
-    /* @__PURE__ */ React9__default.default.createElement(
+    /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "detail-panel__header", sx: { px: { xs: 2, md: 3 }, py: 1.5 } }, /* @__PURE__ */ React10__default.default.createElement(material.Typography, { variant: "h6", component: "h2", noWrap: true }, title), /* @__PURE__ */ React10__default.default.createElement(material.IconButton, { "aria-label": "close", onClick: onClose }, /* @__PURE__ */ React10__default.default.createElement(iconsMaterial.Close, null))),
+    /* @__PURE__ */ React10__default.default.createElement(material.Divider, null),
+    /* @__PURE__ */ React10__default.default.createElement(
       material.Grid,
       {
         className: "detail-panel__content",
@@ -2665,7 +2666,7 @@ var DetailPanelComponent = ({
       },
       children
     ),
-    actions && /* @__PURE__ */ React9__default.default.createElement(React9__default.default.Fragment, null, /* @__PURE__ */ React9__default.default.createElement(material.Divider, null), /* @__PURE__ */ React9__default.default.createElement(
+    actions && /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, /* @__PURE__ */ React10__default.default.createElement(material.Divider, null), /* @__PURE__ */ React10__default.default.createElement(
       material.Box,
       {
         className: "detail-panel__actions",
@@ -2681,11 +2682,11 @@ var DetailPanelComponent = ({
   );
 };
 var TabsComponent = (props) => {
-  const [value, setValue] = React9__default.default.useState(props.tabActive.toString());
+  const [value, setValue] = React10__default.default.useState(props.tabActive.toString());
   const handleChange = (_event, newValue) => {
     setValue(newValue);
   };
-  return /* @__PURE__ */ React9__default.default.createElement(MainWrapperComponent, null, /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "tabs-component" }, /* @__PURE__ */ React9__default.default.createElement(lab.TabContext, { value }, /* @__PURE__ */ React9__default.default.createElement(lab.TabList, { onChange: handleChange }, props.tabs.sort((a, b) => a.value - b.value).map((tabLabel) => /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(MainWrapperComponent, null, /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "tabs-component" }, /* @__PURE__ */ React10__default.default.createElement(lab.TabContext, { value }, /* @__PURE__ */ React10__default.default.createElement(lab.TabList, { onChange: handleChange }, props.tabs.sort((a, b) => a.value - b.value).map((tabLabel) => /* @__PURE__ */ React10__default.default.createElement(
     material.Tab,
     {
       classes: { selected: "main-background-color" },
@@ -2694,7 +2695,7 @@ var TabsComponent = (props) => {
       label: tabLabel.label,
       value: tabLabel.value.toString()
     }
-  ))), props.tabsComponent.sort((a, b) => a.value - b.value).map((tabComponent) => /* @__PURE__ */ React9__default.default.createElement(lab.TabPanel, { key: tabComponent.value, value: tabComponent.value.toString() }, tabComponent.component)))));
+  ))), props.tabsComponent.sort((a, b) => a.value - b.value).map((tabComponent) => /* @__PURE__ */ React10__default.default.createElement(lab.TabPanel, { key: tabComponent.value, value: tabComponent.value.toString() }, tabComponent.component)))));
 };
 var toDayjs = (v, format) => {
   if (v == null || v === "") return null;
@@ -2714,9 +2715,9 @@ var DatePickerComponent = ({
   format,
   ...rest
 }) => {
-  const [value, setValue] = React9__default.default.useState(toDayjs(valueProp, format));
-  const [hover, setHover] = React9__default.default.useState(false);
-  React9.useEffect(() => {
+  const [value, setValue] = React10__default.default.useState(toDayjs(valueProp, format));
+  const [hover, setHover] = React10__default.default.useState(false);
+  React10.useEffect(() => {
     setValue(toDayjs(valueProp, format));
   }, [valueProp, format]);
   const {
@@ -2731,7 +2732,7 @@ var DatePickerComponent = ({
     onMouseLeave,
     ...textFieldRest
   } = textField ?? {};
-  return /* @__PURE__ */ React9__default.default.createElement(material.Box, { className: "data-picker-component", sx: { width: "100%" } }, /* @__PURE__ */ React9__default.default.createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs }, /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "data-picker-component", sx: { width: "100%" } }, /* @__PURE__ */ React10__default.default.createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs }, /* @__PURE__ */ React10__default.default.createElement(
     xDatePickers.DatePicker,
     {
       ...rest,
@@ -2806,7 +2807,7 @@ document.head.appendChild(document.createElement("style")).appendChild(document.
 var CardComponent = ({ backgroundType = "white", ...rest }) => {
   const props = { backgroundType, ...rest };
   const isPrimary = props.backgroundType === "primary";
-  return /* @__PURE__ */ React9__default.default.createElement(
+  return /* @__PURE__ */ React10__default.default.createElement(
     material.Box,
     {
       className: `card-component ${props.onClick ? "cursor-pointer" : ""} ${isPrimary ? "" : props.backgroundType}
@@ -2829,7 +2830,7 @@ var CardComponent = ({ backgroundType = "white", ...rest }) => {
       }),
       onClick: props.onClick
     },
-    /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { p: 3.125, py: 3.75, height: "100%" } }, props.loading ? /* @__PURE__ */ React9__default.default.createElement(material.Box, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" } }, /* @__PURE__ */ React9__default.default.createElement(
+    /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { p: 3.125, py: 3.75, height: "100%" } }, props.loading ? /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" } }, /* @__PURE__ */ React10__default.default.createElement(
       material.CircularProgress,
       {
         className: `${props.backgroundType === "white" ? "circular-progress-main-color" : ""}`,
@@ -2846,7 +2847,7 @@ var SnackbarComponent = ({
   autoHideDuration = 5e3,
   anchorOrigin = { vertical: "bottom", horizontal: "right" },
   action
-}) => /* @__PURE__ */ React9__default.default.createElement(
+}) => /* @__PURE__ */ React10__default.default.createElement(
   material.Snackbar,
   {
     open,
@@ -2854,7 +2855,7 @@ var SnackbarComponent = ({
     anchorOrigin,
     onClose: (_, reason) => reason !== "clickaway" && onClose()
   },
-  /* @__PURE__ */ React9__default.default.createElement(material.Alert, { severity, variant: "filled", onClose, action, sx: { width: "100%" } }, message)
+  /* @__PURE__ */ React10__default.default.createElement(material.Alert, { severity, variant: "filled", onClose, action, sx: { width: "100%" } }, message)
 );
 
 exports.AppBreadcrumbs = AppBreadcrumbs;
@@ -2882,6 +2883,7 @@ exports.SelectAsyncField = SelectAsyncField;
 exports.SelectField = SelectField;
 exports.SimpleTableComponent = SimpleTableComponent;
 exports.SnackbarComponent = SnackbarComponent;
+exports.Spinner = Spinner;
 exports.SplitLayout = SplitLayout;
 exports.TableComponent = TableComponent;
 exports.TabsComponent = TabsComponent;