techsbcn-storybook 2.0.7 → 2.2.0

package/dist/index.mjs

@@ -1,12 +1,14 @@
-import React7, { useMemo, useState, useEffect, useRef } from 'react';
-import { Box, Collapse, Grid, Container, IconButton, Menu, MenuItem, Divider, LinearProgress, CircularProgress, TextField, Paper, Checkbox, TableContainer, Table, TableHead, TableRow, TableCell, TableSortLabel, TableBody, TablePagination, Pagination, PaginationItem, Avatar, Drawer, AppBar, Toolbar, Button, Skeleton, FormLabel, FormHelperText, Stack, Dialog, DialogTitle, DialogContent, DialogActions, Tab, Typography } from '@mui/material';
+import React8, { useMemo, useState, useEffect, useRef } from 'react';
+import { Box, Collapse, Grid, Container, IconButton, Menu, MenuItem, Divider, LinearProgress, CircularProgress, TextField, Paper, Checkbox, TableContainer, Table, TableHead, TableRow, TableCell, TableSortLabel, TableBody, TablePagination, Pagination, PaginationItem, Avatar, Breadcrumbs, Typography, Link, Drawer, AppBar, Toolbar, Button, Skeleton, FormLabel, FormHelperText, Stack, Dialog, DialogTitle, DialogContent, DialogActions, Tab, Snackbar, Alert } from '@mui/material';
 import { ExpandMore, ChevronRight, MoreVert, Tune, Visibility, VisibilityOff, Close } from '@mui/icons-material';
 import { debounce } from 'lodash';
+import CloseIcon from '@mui/icons-material/Close';
+import { SnackbarProvider, enqueueSnackbar, closeSnackbar } from 'notistack';
 import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
-import { useLocation, matchPath, NavLink } from 'react-router';
+import { useLocation, matchPath, NavLink, useMatches, Link as Link$1 } from 'react-router';
 import MenuIcon from '@mui/icons-material/Menu';
 import Select from 'react-select';
 import { useTheme } from '@mui/material/styles';
@@ -31,13 +33,13 @@ document.head.appendChild(document.createElement("style")).appendChild(document.
 
 // src/components/wrappers/PublicFormWrapper/PublicFormWrapper.tsx
 var PublicFormWrapper = (props) => {
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(
     Box,
     {
       className: `public-form-wrapper ${props.className ? props.className : ""}`,
       sx: { height: "100%", display: "flex", justifyContent: "center", alignItems: "center" }
     },
-    /* @__PURE__ */ React7.createElement(Container, { maxWidth: "xs" }, /* @__PURE__ */ React7.createElement(Box, { className: "wrapper-box", sx: { p: 1 } }, props.children))
+    /* @__PURE__ */ React8.createElement(Container, { maxWidth: "xs" }, /* @__PURE__ */ React8.createElement(Box, { className: "wrapper-box", sx: { p: 1 } }, props.children))
   );
 };
 
@@ -93,10 +95,10 @@ document.head.appendChild(document.createElement("style")).appendChild(document.
 
 // src/components/tables/SearchComponent/SearchComponent.tsx
 var ActionsList = (actions) => {
-  return /* @__PURE__ */ React7.createElement(Box, { sx: { ml: "auto", justifyContent: "start", display: "flex", alignItems: "center", flexDirection: "row" } }, actions && actions.map((action, i) => /* @__PURE__ */ React7.createElement(Box, { sx: { ml: 2, color: "primary.main" }, key: i, className: "btn-action main-color" }, action.action)));
+  return /* @__PURE__ */ React8.createElement(Box, { sx: { ml: "auto", justifyContent: "start", display: "flex", alignItems: "center", flexDirection: "row" } }, actions && actions.map((action, i) => /* @__PURE__ */ React8.createElement(Box, { sx: { ml: 2, color: "primary.main" }, key: i, className: "btn-action main-color" }, action.action)));
 };
 var DoubleFilter = (filters) => {
-  return /* @__PURE__ */ React7.createElement(Grid, { container: true, spacing: 1, sx: { alignItems: "center" } }, filters.label && /* @__PURE__ */ React7.createElement(Grid, { size: { xs: 12, md: 3 } }, /* @__PURE__ */ React7.createElement(Box, null, filters.label)), /* @__PURE__ */ React7.createElement(Grid, { size: { xs: 12, md: filters.label ? 9 : 12 } }, /* @__PURE__ */ React7.createElement(Grid, { container: true, spacing: 1 }, /* @__PURE__ */ React7.createElement(Grid, { size: 6 }, filters.firstFilter), /* @__PURE__ */ React7.createElement(Grid, { size: 6 }, filters.secondFilter))));
+  return /* @__PURE__ */ React8.createElement(Grid, { container: true, spacing: 1, sx: { alignItems: "center" } }, filters.label && /* @__PURE__ */ React8.createElement(Grid, { size: { xs: 12, md: 3 } }, /* @__PURE__ */ React8.createElement(Box, null, filters.label)), /* @__PURE__ */ React8.createElement(Grid, { size: { xs: 12, md: filters.label ? 9 : 12 } }, /* @__PURE__ */ React8.createElement(Grid, { container: true, spacing: 1 }, /* @__PURE__ */ React8.createElement(Grid, { size: 6 }, filters.firstFilter), /* @__PURE__ */ React8.createElement(Grid, { size: 6 }, filters.secondFilter))));
 };
 var SearchComponent = (props) => {
   const [isOpen, setIsOpen] = useState(!props.searchBar && !!props.filters || props.fixedOpen);
@@ -109,7 +111,7 @@ var SearchComponent = (props) => {
     setAnchorEl(null);
   };
   const randId = Math.random().toString(36).substring(7);
-  return /* @__PURE__ */ React7.createElement(Box, { className: `search-component ${props.className}` }, /* @__PURE__ */ React7.createElement(Box, { sx: { mb: props.divider ? 2 : 0, px: 2 } }, /* @__PURE__ */ React7.createElement(Grid, { container: true, sx: { alignItems: "center" } }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(Box, { className: `search-component ${props.className}` }, /* @__PURE__ */ React8.createElement(Box, { sx: { mb: props.divider ? 2 : 0, px: 2 } }, /* @__PURE__ */ React8.createElement(Grid, { container: true, sx: { alignItems: "center" } }, /* @__PURE__ */ React8.createElement(
     Grid,
     {
       size: {
@@ -117,7 +119,7 @@ var SearchComponent = (props) => {
         md: props.actions && props.searchBar ? 4 : props.searchBar ? 7 : props.actions ? 6 : 12
       }
     },
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(
       Box,
       {
         sx: {
@@ -128,7 +130,7 @@ var SearchComponent = (props) => {
       },
       props.title
     )
-  ), props.actions && /* @__PURE__ */ React7.createElement(Grid, { size: { xs: props.title ? 4 : 12 }, sx: { display: { xs: "block", md: "none" } } }, /* @__PURE__ */ React7.createElement(Box, { sx: { display: { xs: "none", md: "flex" } } }, ActionsList(props.actions)), /* @__PURE__ */ React7.createElement(Box, { sx: { display: { xs: "flex", md: "none" } } }, props.actions.length > 1 ? /* @__PURE__ */ React7.createElement(Box, { sx: { ml: "auto" } }, /* @__PURE__ */ React7.createElement(
+  ), props.actions && /* @__PURE__ */ React8.createElement(Grid, { size: { xs: props.title ? 4 : 12 }, sx: { display: { xs: "block", md: "none" } } }, /* @__PURE__ */ React8.createElement(Box, { sx: { display: { xs: "none", md: "flex" } } }, ActionsList(props.actions)), /* @__PURE__ */ React8.createElement(Box, { sx: { display: { xs: "flex", md: "none" } } }, props.actions.length > 1 ? /* @__PURE__ */ React8.createElement(Box, { sx: { ml: "auto" } }, /* @__PURE__ */ React8.createElement(
     IconButton,
     {
       "aria-label": "more",
@@ -138,8 +140,8 @@ var SearchComponent = (props) => {
       "aria-haspopup": "true",
       onClick: handleClick
     },
-    /* @__PURE__ */ React7.createElement(MoreVert, null)
-  ), /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(MoreVert, null)
+  ), /* @__PURE__ */ React8.createElement(
     Menu,
     {
       id: `long-button-${randId}`,
@@ -153,8 +155,8 @@ var SearchComponent = (props) => {
       onClose: handleClose,
       className: "search-menu-actions"
     },
-    props.actions.map((action, i) => /* @__PURE__ */ React7.createElement(MenuItem, { key: i, className: "wrapper-actions" }, /* @__PURE__ */ React7.createElement(Box, { className: "btn-action main-color", sx: { color: "primary.main" } }, action.action)))
-  )) : /* @__PURE__ */ React7.createElement(Box, { sx: { ml: "auto" }, className: `wrapper-actions ${props.title ? "min-action-width" : ""}` }, ActionsList(props.actions)))), (props.searchBar || props.filters || props.actions) && /* @__PURE__ */ React7.createElement(Grid, { size: { xs: 12, md: props.actions && props.searchBar ? 8 : props.actions ? 6 : 5 } }, /* @__PURE__ */ React7.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React7.createElement(
+    props.actions.map((action, i) => /* @__PURE__ */ React8.createElement(MenuItem, { key: i, className: "wrapper-actions" }, /* @__PURE__ */ React8.createElement(Box, { className: "btn-action main-color", sx: { color: "primary.main" } }, action.action)))
+  )) : /* @__PURE__ */ React8.createElement(Box, { sx: { ml: "auto" }, className: `wrapper-actions ${props.title ? "min-action-width" : ""}` }, ActionsList(props.actions)))), (props.searchBar || props.filters || props.actions) && /* @__PURE__ */ React8.createElement(Grid, { size: { xs: 12, md: props.actions && props.searchBar ? 8 : props.actions ? 6 : 5 } }, /* @__PURE__ */ React8.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React8.createElement(
     Box,
     {
       sx: {
@@ -165,16 +167,16 @@ var SearchComponent = (props) => {
       }
     },
     props.searchBar,
-    !!props.fixedOpen || props.filters && props.searchBar && /* @__PURE__ */ React7.createElement(
+    !!props.fixedOpen || props.filters && props.searchBar && /* @__PURE__ */ React8.createElement(
       Box,
       {
         onClick: () => setIsOpen(!isOpen),
         className: "tune-btn main-background-color",
         sx: { bgcolor: "primary.main", color: "primary.contrastText" }
       },
-      /* @__PURE__ */ React7.createElement(Tune, null)
+      /* @__PURE__ */ React8.createElement(Tune, null)
     )
-  ), props.actions && /* @__PURE__ */ React7.createElement(Box, { sx: { display: { xs: "none", md: "block" } }, className: "wrapper-actions" }, ActionsList(props.actions)))))), props.divider && /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(Collapse, { in: isOpen }, /* @__PURE__ */ React7.createElement(Box, { className: "filters", sx: { px: 2, mt: 2, mb: props.divider ? 0 : 1 } }, /* @__PURE__ */ React7.createElement(Grid, { container: true, spacing: 3, sx: { justifyContent: "end" } }, props.filters && props.filters.length > 0 && props.filters.map((filter, i) => /* @__PURE__ */ React7.createElement(Grid, { key: i, size: { xs: 12, sm: props.filtersSize ?? 6, xl: props.filtersSize ?? 4 } }, filter.doubleFilter ? DoubleFilter(filter.doubleFilter) : filter.singleFilter))))));
+  ), props.actions && /* @__PURE__ */ React8.createElement(Box, { sx: { display: { xs: "none", md: "block" } }, className: "wrapper-actions" }, ActionsList(props.actions)))))), props.divider && /* @__PURE__ */ React8.createElement(Divider, null), /* @__PURE__ */ React8.createElement(Collapse, { in: isOpen }, /* @__PURE__ */ React8.createElement(Box, { className: "filters", sx: { px: 2, mt: 2, mb: props.divider ? 0 : 1 } }, /* @__PURE__ */ React8.createElement(Grid, { container: true, spacing: 3, sx: { justifyContent: "end" } }, props.filters && props.filters.length > 0 && props.filters.map((filter, i) => /* @__PURE__ */ React8.createElement(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
@@ -200,7 +202,7 @@ document.head.appendChild(document.createElement("style")).appendChild(document.
 
 // src/components/wrappers/LinearProgressComponent/LinearProgressComponent.tsx
 var LinearProgressComponent = () => {
-  return /* @__PURE__ */ React7.createElement(Box, { className: "linear-progress-component" }, /* @__PURE__ */ React7.createElement(Box, { className: "linear-progress-main-color main-background-color", sx: { bgcolor: "primary.main" } }), /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(Box, { className: "linear-progress-component" }, /* @__PURE__ */ React8.createElement(Box, { className: "linear-progress-main-color main-background-color", sx: { bgcolor: "primary.main" } }), /* @__PURE__ */ React8.createElement(
     LinearProgress,
     {
       classes: { bar: "main-background-color" },
@@ -244,14 +246,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__ */ React7.createElement(Box, { className: "main-wrapper-component", sx: { height: props.height ?? "100%" } }, /* @__PURE__ */ React7.createElement(Box, { sx: { height: "4px" } }, props.loadingProgressBar && /* @__PURE__ */ React7.createElement(LinearProgressComponent, null)), /* @__PURE__ */ React7.createElement(Box, { sx: { py: 2 } }, props.loading ? /* @__PURE__ */ React7.createElement(Box, { sx: { display: "flex", justifyContent: "center", px: 2 } }, /* @__PURE__ */ React7.createElement(CircularProgress, { className: "circular-progress-main-color", color: "primary" })) : /* @__PURE__ */ React7.createElement(React7.Fragment, null, props.headerProps && /* @__PURE__ */ React7.createElement(Box, { sx: { mb: props.divider ? 1.5 : 0 } }, /* @__PURE__ */ React7.createElement(SearchComponent, { ...props.headerProps, enableAfter: props.headerProps.enableAfter ?? true })), props.divider && /* @__PURE__ */ React7.createElement(Divider, null), props.children && !props.loadingChildren ? /* @__PURE__ */ React7.createElement(Box, { sx: { pt: props.headerProps ? 2 : 0, px: 2 } }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(Box, { className: "main-wrapper-component", sx: { height: props.height ?? "100%" } }, /* @__PURE__ */ React8.createElement(Box, { sx: { height: "4px" } }, props.loadingProgressBar && /* @__PURE__ */ React8.createElement(LinearProgressComponent, null)), /* @__PURE__ */ React8.createElement(Box, { sx: { py: 2 } }, props.loading ? /* @__PURE__ */ React8.createElement(Box, { sx: { display: "flex", justifyContent: "center", px: 2 } }, /* @__PURE__ */ React8.createElement(CircularProgress, { className: "circular-progress-main-color", color: "primary" })) : /* @__PURE__ */ React8.createElement(React8.Fragment, null, props.headerProps && /* @__PURE__ */ React8.createElement(Box, { sx: { mb: props.divider ? 1.5 : 0 } }, /* @__PURE__ */ React8.createElement(SearchComponent, { ...props.headerProps, enableAfter: props.headerProps.enableAfter ?? true })), props.divider && /* @__PURE__ */ React8.createElement(Divider, null), props.children && !props.loadingChildren ? /* @__PURE__ */ React8.createElement(Box, { sx: { pt: props.headerProps ? 2 : 0, px: 2 } }, /* @__PURE__ */ React8.createElement(
     Box,
     {
       className: `${props.enableTrimBar ? "main-background-color-after" : ""}`,
       sx: props.enableTrimBar ? { "&::after": { bgcolor: "primary.main" } } : void 0
     },
     props.children
-  )) : props.loadingChildren ? /* @__PURE__ */ React7.createElement(Box, { sx: { display: "flex", justifyContent: "center", pt: props.headerProps ? 2 : 0, px: 2 } }, /* @__PURE__ */ React7.createElement(CircularProgress, { className: "circular-progress-main-color", color: "primary" })) : /* @__PURE__ */ React7.createElement(React7.Fragment, null))));
+  )) : props.loadingChildren ? /* @__PURE__ */ React8.createElement(Box, { sx: { display: "flex", justifyContent: "center", pt: props.headerProps ? 2 : 0, px: 2 } }, /* @__PURE__ */ React8.createElement(CircularProgress, { className: "circular-progress-main-color", color: "primary" })) : /* @__PURE__ */ React8.createElement(React8.Fragment, null))));
 };
 
 // src/components/tables/TableComponent/TableComponent.scss
@@ -506,8 +508,8 @@ var TextFieldComponent = ({
   onMouseLeave,
   ...rest
 }) => {
-  const [hover, setHover] = React7.useState(false);
-  return /* @__PURE__ */ React7.createElement(Box, { className: "text-field-component", sx: { width: "100%" } }, /* @__PURE__ */ React7.createElement(
+  const [hover, setHover] = React8.useState(false);
+  return /* @__PURE__ */ React8.createElement(Box, { className: "text-field-component", sx: { width: "100%" } }, /* @__PURE__ */ React8.createElement(
     TextField,
     {
       ...rest,
@@ -686,6 +688,29 @@ var useIsMounted = () => {
   }, []);
   return isMounted;
 };
+var NotificationContainer = (props) => /* @__PURE__ */ React8.createElement(
+  SnackbarProvider,
+  {
+    maxSnack: 5,
+    autoHideDuration: 5e3,
+    anchorOrigin: { vertical: "bottom", horizontal: "right" },
+    preventDuplicate: true,
+    ...props
+  }
+);
+var addNotification = ({
+  message,
+  type = "default",
+  id,
+  duration = type === "error" ? null : 5e3
+}) => enqueueSnackbar(message, {
+  variant: type,
+  key: id,
+  autoHideDuration: duration,
+  persist: duration === null,
+  action: duration === null ? (key) => /* @__PURE__ */ React8.createElement(IconButton, { size: "small", color: "inherit", "aria-label": "close", onClick: () => closeSnackbar(key) }, /* @__PURE__ */ React8.createElement(CloseIcon, { fontSize: "small" })) : void 0
+});
+var removeNotification = (id) => closeSnackbar(id);
 
 // src/components/tables/ImageTableComponent/ImageTableComponent.tsx
 var ImageTableComponent = (props) => {
@@ -704,7 +729,7 @@ var ImageTableComponent = (props) => {
       }).catch(() => setLoading(false));
     }
   }, [props, prevGuidState, isMounted]);
-  return /* @__PURE__ */ React7.createElement(Box, { className: "images-table-component" }, loading ? /* @__PURE__ */ React7.createElement(Box, { sx: { textAlign: "center" } }, /* @__PURE__ */ React7.createElement(CircularProgress, { className: "main-color", color: "primary" })) : /* @__PURE__ */ React7.createElement(Avatar, { alt: "-", src: image, className: "img-table", variant: "square" }));
+  return /* @__PURE__ */ React8.createElement(Box, { className: "images-table-component" }, loading ? /* @__PURE__ */ React8.createElement(Box, { sx: { textAlign: "center" } }, /* @__PURE__ */ React8.createElement(CircularProgress, { className: "main-color", color: "primary" })) : /* @__PURE__ */ React8.createElement(Avatar, { alt: "-", src: image, className: "img-table", variant: "square" }));
 };
 var ImageTableComponent_default = ImageTableComponent;
 var TableComponent = ({ showTotalCount = true, ...rest }) => {
@@ -790,9 +815,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__ */ React7.createElement(Avatar, { alt: "-", src: value, className: "img-table", variant: "square" });
+        return /* @__PURE__ */ React8.createElement(Avatar, { alt: "-", src: value, className: "img-table", variant: "square" });
       } else if (column.isImage.isGuid) {
-        return /* @__PURE__ */ React7.createElement(
+        return /* @__PURE__ */ React8.createElement(
           ImageTableComponent_default,
           {
             guid: value,
@@ -818,7 +843,7 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
     if (typeof value === "boolean") {
       return String(value);
     }
-    return /* @__PURE__ */ React7.createElement(Typography, { component: "span", sx: { whiteSpace: "break-spaces" } }, value);
+    return /* @__PURE__ */ React8.createElement(Typography, { component: "span", sx: { whiteSpace: "break-spaces" } }, value);
   };
   const ObjectbyString = (o, s) => {
     s = s.replace(/\[(\w+)\]/g, ".$1");
@@ -855,7 +880,7 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
         rowEdit[fieldName] = e.target.value;
         setUpdate();
       };
-      return /* @__PURE__ */ React7.createElement(
+      return /* @__PURE__ */ React8.createElement(
         TextFieldComponent,
         {
           ...editableCell.isTextField.textFieldProps,
@@ -868,20 +893,20 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
       return value;
     }
   };
-  return /* @__PURE__ */ React7.createElement(Box, { className: "table-component" }, /* @__PURE__ */ React7.createElement(Paper, { className: "paper-container" }, /* @__PURE__ */ React7.createElement(Box, { sx: { p: 1, display: "flex" } }, props.isCheckTable && /* @__PURE__ */ React7.createElement(Box, { sx: { display: { xs: "block", md: "none" } }, className: "checkbox-cell" }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(Box, { className: "table-component" }, /* @__PURE__ */ React8.createElement(Paper, { className: "paper-container" }, /* @__PURE__ */ React8.createElement(Box, { sx: { p: 1, display: "flex" } }, props.isCheckTable && /* @__PURE__ */ React8.createElement(Box, { sx: { display: { xs: "block", md: "none" } }, className: "checkbox-cell" }, /* @__PURE__ */ React8.createElement(
     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__ */ React7.createElement(Box, { sx: { ml: "auto", mr: 1, alignSelf: "center" } }, props.totalCount, " ", props.values.RESULTS)), /* @__PURE__ */ React7.createElement(
+  )), props.showTotalCount && /* @__PURE__ */ React8.createElement(Box, { sx: { ml: "auto", mr: 1, alignSelf: "center" } }, props.totalCount, " ", props.values.RESULTS)), /* @__PURE__ */ React8.createElement(
     TableContainer,
     {
       className: `table-container ${props.isBordered ? "table-bordered" : "table-simple"} ${props.withScroll ? "with-scroll" : ""}`
     },
-    /* @__PURE__ */ React7.createElement(Table, { stickyHeader: true, "aria-label": "sticky table", className: props.loading ? "loading" : "" }, /* @__PURE__ */ React7.createElement(TableHead, { sx: { display: { xs: "none", md: "table-header-group" } } }, /* @__PURE__ */ React7.createElement(TableRow, null, props.columns.map((column, columnIndex) => {
-      return /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(Table, { stickyHeader: true, "aria-label": "sticky table", className: props.loading ? "loading" : "" }, /* @__PURE__ */ React8.createElement(TableHead, { sx: { display: { xs: "none", md: "table-header-group" } } }, /* @__PURE__ */ React8.createElement(TableRow, null, props.columns.map((column, columnIndex) => {
+      return /* @__PURE__ */ React8.createElement(
         TableCell,
         {
           className: "table-column",
@@ -889,7 +914,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__ */ React7.createElement(
+        (column.orderBy || column.id) && column.id !== "actions" && !column.isCheck && !column.isActiveFunction && !column.noSort ? /* @__PURE__ */ React8.createElement(
           TableSortLabel,
           {
             className: "table-header-cell",
@@ -899,16 +924,16 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
             hideSortIcon: true
           },
           column.label
-        ) : column.isCheck ? /* @__PURE__ */ React7.createElement(Box, { className: "checkbox-cell" }, /* @__PURE__ */ React7.createElement(
+        ) : column.isCheck ? /* @__PURE__ */ React8.createElement(Box, { className: "checkbox-cell" }, /* @__PURE__ */ React8.createElement(
           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__ */ React7.createElement(Box, { className: "table-header-cell" }, column.label)
+        )) : /* @__PURE__ */ React8.createElement(Box, { className: "table-header-cell" }, column.label)
       );
-    }))), /* @__PURE__ */ React7.createElement(TableBody, null, props.loading && /* @__PURE__ */ React7.createElement(TableRow, { className: "table-rows" }, /* @__PURE__ */ React7.createElement(
+    }))), /* @__PURE__ */ React8.createElement(TableBody, null, props.loading && /* @__PURE__ */ React8.createElement(TableRow, { className: "table-rows" }, /* @__PURE__ */ React8.createElement(
       TableCell,
       {
         colSpan: props.columns.length,
@@ -918,11 +943,11 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
           height: props.rows.length > 0 ? "auto" : "80px"
         }
       },
-      /* @__PURE__ */ React7.createElement(CircularProgress, { className: "circular-progress-main-color", color: "primary" })
+      /* @__PURE__ */ React8.createElement(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__ */ React7.createElement(
+      return /* @__PURE__ */ React8.createElement(
         TableRow,
         {
           className: `table-rows ${rowColor} ${props.onClickRow || props.onClickRowData ? "row-click" : ""}`,
@@ -936,7 +961,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__ */ React7.createElement(
+          return /* @__PURE__ */ React8.createElement(
             TableCell,
             {
               className: `table-cell ${column.cellClassName ? column.cellClassName(row) : ""}`,
@@ -949,8 +974,8 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
               },
               onClick: () => !column.action && !column.isCheck && !column.isActiveFunction ? handleRowClick(row) : ""
             },
-            column.label !== "-" && /* @__PURE__ */ React7.createElement(Box, { sx: { display: { xs: "inline-block", md: "none" } }, className: "label-cell" }, column.label),
-            column.rowViewFormat ? /* @__PURE__ */ React7.createElement(Box, { className: "format-value" }, value) : column.action && Object.keys(row).length > 0 ? /* @__PURE__ */ React7.createElement(Box, null, /* @__PURE__ */ React7.createElement(Box, { sx: { display: "flex" }, className: "actions" }, column.action && column.action.map((action, i) => /* @__PURE__ */ React7.createElement(Box, { key: i }, action.onClick && /* @__PURE__ */ React7.createElement(
+            column.label !== "-" && /* @__PURE__ */ React8.createElement(Box, { sx: { display: { xs: "inline-block", md: "none" } }, className: "label-cell" }, column.label),
+            column.rowViewFormat ? /* @__PURE__ */ React8.createElement(Box, { className: "format-value" }, value) : column.action && Object.keys(row).length > 0 ? /* @__PURE__ */ React8.createElement(Box, null, /* @__PURE__ */ React8.createElement(Box, { sx: { display: "flex" }, className: "actions" }, column.action && column.action.map((action, i) => /* @__PURE__ */ React8.createElement(Box, { key: i }, action.onClick && /* @__PURE__ */ React8.createElement(
               Box,
               {
                 className: "btn-action main-color-hover",
@@ -960,7 +985,7 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
                 onClick: () => action.onClick && action.onClick(row)
               },
               action.children
-            ), action.onClickId && /* @__PURE__ */ React7.createElement(
+            ), action.onClickId && /* @__PURE__ */ React8.createElement(
               Box,
               {
                 className: "btn-action main-color-hover",
@@ -970,7 +995,7 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
                 onClick: () => action.onClickId && action.onClickId(row.id)
               },
               action.children
-            ), !action.onClick && !action.onClickId && /* @__PURE__ */ React7.createElement(Box, { className: "btn-action" }, action.children))))) : column.isActiveFunction && Object.keys(row).length > 0 ? /* @__PURE__ */ React7.createElement(
+            ), !action.onClick && !action.onClickId && /* @__PURE__ */ React8.createElement(Box, { className: "btn-action" }, action.children))))) : column.isActiveFunction && Object.keys(row).length > 0 ? /* @__PURE__ */ React8.createElement(
               Box,
               {
                 className: "btn-action main-color-hover",
@@ -980,31 +1005,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__ */ React7.createElement(Box, { className: "checkbox-cell" }, /* @__PURE__ */ React7.createElement(
+            ) : column.isCheck && Object.keys(row).length > 0 ? /* @__PURE__ */ React8.createElement(Box, { className: "checkbox-cell" }, /* @__PURE__ */ React8.createElement(
               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__ */ React7.createElement(
+            )) : column.isEditableTableCell && Object.keys(row).length > 0 ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn && Object.keys(row).length > 0 ? /* @__PURE__ */ React8.createElement(
               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__ */ React7.createElement(
+            ) : column.isBoolean && Object.keys(row).length > 0 ? /* @__PURE__ */ React8.createElement(
               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__ */ React7.createElement(Box, { className: `${column.isImage ? "" : "format-value"}` }, formatValue(value, column))
+            ) : /* @__PURE__ */ React8.createElement(Box, { className: `${column.isImage ? "" : "format-value"}` }, formatValue(value, column))
           );
         })
       );
-    }) : !props.loading ? /* @__PURE__ */ React7.createElement(TableRow, null, /* @__PURE__ */ React7.createElement(TableCell, { colSpan: props.columns.length }, /* @__PURE__ */ React7.createElement(Box, null, props.values.NO_RESULTS_FOUND))) : /* @__PURE__ */ React7.createElement(TableRow, null)))
-  ), props.baseFilters && props.baseFilters.page && props.baseFilters.limit && /* @__PURE__ */ React7.createElement(
+    }) : !props.loading ? /* @__PURE__ */ React8.createElement(TableRow, null, /* @__PURE__ */ React8.createElement(TableCell, { colSpan: props.columns.length }, /* @__PURE__ */ React8.createElement(Box, null, props.values.NO_RESULTS_FOUND))) : /* @__PURE__ */ React8.createElement(TableRow, null)))
+  ), props.baseFilters && props.baseFilters.page && props.baseFilters.limit && /* @__PURE__ */ React8.createElement(
     TablePagination,
     {
       rowsPerPageOptions: [5, 10, 25, 100, 150],
@@ -1020,7 +1045,7 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
       component: "div",
       className: `table-pagination ${props.isBordered ? "table-bordered" : "table-simple"}`,
       ActionsComponent: (_actions) => {
-        return /* @__PURE__ */ React7.createElement(Box, { sx: { flexShrink: 0 }, className: "pagination" }, Math.ceil(_actions.count / _actions.rowsPerPage) > 1 && /* @__PURE__ */ React7.createElement(
+        return /* @__PURE__ */ React8.createElement(Box, { sx: { flexShrink: 0 }, className: "pagination" }, Math.ceil(_actions.count / _actions.rowsPerPage) > 1 && /* @__PURE__ */ React8.createElement(
           Pagination,
           {
             count: Math.ceil(_actions.count / _actions.rowsPerPage),
@@ -1032,7 +1057,7 @@ var TableComponent = ({ showTotalCount = true, ...rest }) => {
             hidePrevButton: true,
             showFirstButton: true,
             showLastButton: true,
-            renderItem: (item) => /* @__PURE__ */ React7.createElement(
+            renderItem: (item) => /* @__PURE__ */ React8.createElement(
               PaginationItem,
               {
                 classes: { selected: "main-background-color" },
@@ -1283,9 +1308,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__ */ React7.createElement(Avatar, { alt: "-", src: value, className: "img-table", variant: "square" });
+        return /* @__PURE__ */ React8.createElement(Avatar, { alt: "-", src: value, className: "img-table", variant: "square" });
       } else if (column.isImage.isGuid) {
-        return /* @__PURE__ */ React7.createElement(
+        return /* @__PURE__ */ React8.createElement(
           ImageTableComponent_default,
           {
             guid: value,
@@ -1311,7 +1336,7 @@ var SimpleTableComponent = (props) => {
     if (typeof value === "boolean") {
       return String(value);
     }
-    return /* @__PURE__ */ React7.createElement(Typography, { component: "span", sx: { whiteSpace: "break-spaces" } }, value);
+    return /* @__PURE__ */ React8.createElement(Typography, { component: "span", sx: { whiteSpace: "break-spaces" } }, value);
   };
   const ObjectbyString = (o, s) => {
     s = s.replace(/\[(\w+)\]/g, ".$1");
@@ -1349,7 +1374,7 @@ var SimpleTableComponent = (props) => {
         rowEdit[fieldName] = e.target.value;
         setUpdate();
       };
-      return /* @__PURE__ */ React7.createElement(
+      return /* @__PURE__ */ React8.createElement(
         TextFieldComponent,
         {
           ...editableCell.isTextField.textFieldProps,
@@ -1362,29 +1387,29 @@ var SimpleTableComponent = (props) => {
       return value;
     }
   };
-  return /* @__PURE__ */ React7.createElement(Box, { className: "table-simple-component" }, /* @__PURE__ */ React7.createElement(Paper, { className: "paper-container" }, props.isCheckTable && !props.isCheckTable.noCheckAllItems && /* @__PURE__ */ React7.createElement(Box, { sx: { display: { xs: "block", md: "none" } }, className: "checkbox-cell" }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(Box, { className: "table-simple-component" }, /* @__PURE__ */ React8.createElement(Paper, { className: "paper-container" }, props.isCheckTable && !props.isCheckTable.noCheckAllItems && /* @__PURE__ */ React8.createElement(Box, { sx: { display: { xs: "block", md: "none" } }, className: "checkbox-cell" }, /* @__PURE__ */ React8.createElement(
     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__ */ React7.createElement(
+  )), /* @__PURE__ */ React8.createElement(
     TableContainer,
     {
       className: `table-container ${props.isBordered ? "table-bordered" : "table-simple"}
         ${props.withScroll ? "with-scroll" : ""}`
     },
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(
       Table,
       {
         stickyHeader: true,
         "aria-label": "sticky table",
         className: props.loading ? "loading" : props.className ? props.className : ""
       },
-      /* @__PURE__ */ React7.createElement(TableHead, { sx: { display: { xs: "none", md: "table-header-group" } } }, /* @__PURE__ */ React7.createElement(TableRow, null, props.columns.map((column, columnIndex) => {
+      /* @__PURE__ */ React8.createElement(TableHead, { sx: { display: { xs: "none", md: "table-header-group" } } }, /* @__PURE__ */ React8.createElement(TableRow, null, props.columns.map((column, columnIndex) => {
         if (column.id) {
-          return /* @__PURE__ */ React7.createElement(
+          return /* @__PURE__ */ React8.createElement(
             TableCell,
             {
               className: "table-column",
@@ -1392,18 +1417,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__ */ React7.createElement(Box, { className: "checkbox-cell" }, /* @__PURE__ */ React7.createElement(
+            column.isCheck && !props.isCheckTable?.noCheckAllItems ? /* @__PURE__ */ React8.createElement(Box, { className: "checkbox-cell" }, /* @__PURE__ */ React8.createElement(
               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__ */ React7.createElement(Box, { className: "table-header-cell" }, column.label)
+            )) : /* @__PURE__ */ React8.createElement(Box, { className: "table-header-cell" }, column.label)
           );
         } else return null;
       }))),
-      /* @__PURE__ */ React7.createElement(TableBody, null, props.loading && /* @__PURE__ */ React7.createElement(TableRow, { className: "table-rows" }, /* @__PURE__ */ React7.createElement(
+      /* @__PURE__ */ React8.createElement(TableBody, null, props.loading && /* @__PURE__ */ React8.createElement(TableRow, { className: "table-rows" }, /* @__PURE__ */ React8.createElement(
         TableCell,
         {
           colSpan: props.columns.length,
@@ -1413,11 +1438,11 @@ var SimpleTableComponent = (props) => {
             height: props.rows.length > 0 ? "auto" : "80px"
           }
         },
-        /* @__PURE__ */ React7.createElement(CircularProgress, { className: "circular-progress-main-color", color: "primary" })
+        /* @__PURE__ */ React8.createElement(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__ */ React7.createElement(
+        return /* @__PURE__ */ React8.createElement(
           TableRow,
           {
             className: `table-rows ${rowColor} ${props.onClickRow || props.onClickRowData ? "row-click" : ""}`,
@@ -1431,7 +1456,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__ */ React7.createElement(
+            return /* @__PURE__ */ React8.createElement(
               TableCell,
               {
                 className: `table-cell ${column.cellClassName ? column.cellClassName(row) : ""}`,
@@ -1444,8 +1469,8 @@ var SimpleTableComponent = (props) => {
                 },
                 onClick: () => !column.action && !column.isCheck && !column.isActiveFunction ? handleRowClick(row) : ""
               },
-              column.label !== "-" && /* @__PURE__ */ React7.createElement(Box, { sx: { display: { xs: "inline-block", md: "none" } }, className: "label-cell" }, column.label),
-              column.action && Object.keys(row).length > 0 ? /* @__PURE__ */ React7.createElement(Box, null, /* @__PURE__ */ React7.createElement(Box, { sx: { display: "flex" }, className: "actions" }, column.rowViewFormat ? /* @__PURE__ */ React7.createElement(Box, { className: "format-value" }, value) : column.action && column.action.map((action, i) => /* @__PURE__ */ React7.createElement(Box, { key: i }, action.onClick && /* @__PURE__ */ React7.createElement(
+              column.label !== "-" && /* @__PURE__ */ React8.createElement(Box, { sx: { display: { xs: "inline-block", md: "none" } }, className: "label-cell" }, column.label),
+              column.action && Object.keys(row).length > 0 ? /* @__PURE__ */ React8.createElement(Box, null, /* @__PURE__ */ React8.createElement(Box, { sx: { display: "flex" }, className: "actions" }, column.rowViewFormat ? /* @__PURE__ */ React8.createElement(Box, { className: "format-value" }, value) : column.action && column.action.map((action, i) => /* @__PURE__ */ React8.createElement(Box, { key: i }, action.onClick && /* @__PURE__ */ React8.createElement(
                 Box,
                 {
                   className: "btn-action main-color-hover",
@@ -1455,7 +1480,7 @@ var SimpleTableComponent = (props) => {
                   onClick: () => action.onClick && action.onClick(row)
                 },
                 action.children
-              ), action.onClickId && /* @__PURE__ */ React7.createElement(
+              ), action.onClickId && /* @__PURE__ */ React8.createElement(
                 Box,
                 {
                   className: "btn-action main-color-hover",
@@ -1465,7 +1490,7 @@ var SimpleTableComponent = (props) => {
                   onClick: () => action.onClickId && action.onClickId(row.id)
                 },
                 action.children
-              ), !action.onClick && !action.onClickId && /* @__PURE__ */ React7.createElement(Box, { className: "btn-action" }, action.children))))) : column.isActiveFunction && Object.keys(row).length > 0 ? /* @__PURE__ */ React7.createElement(
+              ), !action.onClick && !action.onClickId && /* @__PURE__ */ React8.createElement(Box, { className: "btn-action" }, action.children))))) : column.isActiveFunction && Object.keys(row).length > 0 ? /* @__PURE__ */ React8.createElement(
                 Box,
                 {
                   className: "btn-action main-color-hover",
@@ -1475,30 +1500,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__ */ React7.createElement(Box, { className: "checkbox-cell" }, /* @__PURE__ */ React7.createElement(
+              ) : column.isCheck && Object.keys(row).length > 0 ? /* @__PURE__ */ React8.createElement(Box, { className: "checkbox-cell" }, /* @__PURE__ */ React8.createElement(
                 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__ */ React7.createElement(
+              )) : column.isEditableTableCell && Object.keys(row).length > 0 ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn && Object.keys(row).length > 0 ? /* @__PURE__ */ React8.createElement(
                 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__ */ React7.createElement(
+              ) : column.isBoolean && Object.keys(row).length > 0 ? /* @__PURE__ */ React8.createElement(
                 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__ */ React7.createElement(Box, { className: `${column.isImage ? "" : "format-value"}` }, formatValue(value, column))
+              ) : /* @__PURE__ */ React8.createElement(Box, { className: `${column.isImage ? "" : "format-value"}` }, formatValue(value, column))
             );
           })
         );
-      }) : !props.loading ? /* @__PURE__ */ React7.createElement(TableRow, null, /* @__PURE__ */ React7.createElement(TableCell, { colSpan: props.columns.length }, /* @__PURE__ */ React7.createElement(Box, null, props.values.NO_RESULTS_FOUND))) : /* @__PURE__ */ React7.createElement(TableRow, null))
+      }) : !props.loading ? /* @__PURE__ */ React8.createElement(TableRow, null, /* @__PURE__ */ React8.createElement(TableCell, { colSpan: props.columns.length }, /* @__PURE__ */ React8.createElement(Box, null, props.values.NO_RESULTS_FOUND))) : /* @__PURE__ */ React8.createElement(TableRow, null))
     )
   )));
 };
@@ -1518,7 +1543,7 @@ document.head.appendChild(document.createElement("style")).appendChild(document.
 
 // src/components/layouts/MainLayoutSimple/MainLayoutSimple.tsx
 var MainLayoutSimple = (props) => {
-  return /* @__PURE__ */ React7.createElement(Box, { sx: { display: "flex", flexDirection: "row" }, className: "main-layout-simple" }, props.lateralComponent && props.lateralComponent, /* @__PURE__ */ React7.createElement(Box, { className: "main-wrapper", sx: { bgcolor: "background.default" } }, props.headerComponent && props.headerComponent, /* @__PURE__ */ React7.createElement(Box, { className: `${props.lateralComponent ? "split-container" : ""}` }, /* @__PURE__ */ React7.createElement(Container, { maxWidth: false }, props.mainComponent))));
+  return /* @__PURE__ */ React8.createElement(Box, { sx: { display: "flex", flexDirection: "row" }, className: "main-layout-simple" }, props.lateralComponent && props.lateralComponent, /* @__PURE__ */ React8.createElement(Box, { className: "main-wrapper", sx: { bgcolor: "background.default" } }, props.headerComponent && props.headerComponent, /* @__PURE__ */ React8.createElement(Box, { className: `${props.lateralComponent ? "split-container" : ""}` }, /* @__PURE__ */ React8.createElement(Container, { maxWidth: false }, props.mainComponent))));
 };
 
 // src/components/layouts/SplitLayout/SplitLayout.scss
@@ -1547,7 +1572,7 @@ var SplitLayout = ({
   children
 }) => {
   const heroImageUrl = imgUrl?.trim();
-  return /* @__PURE__ */ React7.createElement(Grid, { container: true, className: "split-layout", sx: { minHeight: "100vh" } }, heroImageUrl && /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(Grid, { container: true, className: "split-layout", sx: { minHeight: "100vh" } }, heroImageUrl && /* @__PURE__ */ React8.createElement(
     Grid,
     {
       component: "section",
@@ -1555,8 +1580,8 @@ var SplitLayout = ({
       sx: { display: { xs: "none", md: "block" }, position: "relative", overflow: "hidden" },
       "aria-hidden": "true"
     },
-    /* @__PURE__ */ React7.createElement("img", { src: heroImageUrl, alt: "split-layout-image", className: "split-layout__media-image" })
-  ), /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement("img", { src: heroImageUrl, alt: "split-layout-image", className: "split-layout__media-image" })
+  ), /* @__PURE__ */ React8.createElement(
     Grid,
     {
       component: "section",
@@ -1570,16 +1595,16 @@ var SplitLayout = ({
         p: { xs: 2, sm: 2.5, md: 4 }
       }
     },
-    /* @__PURE__ */ React7.createElement(Container, { className: "split-layout__content-wrap" }, children)
+    /* @__PURE__ */ React8.createElement(Container, { className: "split-layout__content-wrap" }, children)
   ));
 };
 var NavIcon = (props) => {
   if (props.iconClassName) {
-    return /* @__PURE__ */ React7.createElement(Box, { className: "pcoded-micon" }, /* @__PURE__ */ React7.createElement("i", { className: props.iconClassName }));
+    return /* @__PURE__ */ React8.createElement(Box, { className: "pcoded-micon" }, /* @__PURE__ */ React8.createElement("i", { className: props.iconClassName }));
   } else if (props.iconComponent) {
-    return /* @__PURE__ */ React7.createElement(Box, { className: "pcoded-micon" }, props.iconComponent);
+    return /* @__PURE__ */ React8.createElement(Box, { className: "pcoded-micon" }, props.iconComponent);
   }
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null);
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null);
 };
 
 // src/components/navigation/VerticalNav/VerticalNavItem.tsx
@@ -1593,7 +1618,7 @@ var VerticalNavItem = (props) => {
     return null;
   }
   const isActive = !!matchPath({ path: `${props.item.route}/*` || "" }, pathname);
-  return /* @__PURE__ */ React7.createElement(NavLink, { to: props.item.route || "", className: `nav-link-item ${isActive ? "active" : ""}`, onClick: props.onHide }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(NavLink, { to: props.item.route || "", className: `nav-link-item ${isActive ? "active" : ""}`, onClick: props.onHide }, /* @__PURE__ */ React8.createElement(
     Box,
     {
       sx: (theme) => ({
@@ -1611,11 +1636,11 @@ var VerticalNavItem = (props) => {
       }),
       className: `nav-item ${isActive ? "main-background-color" : ""}`
     },
-    /* @__PURE__ */ React7.createElement(NavIcon, { iconClassName: props.item.iconClassName, iconComponent: props.item.iconComponent }),
-    /* @__PURE__ */ React7.createElement(Box, { className: `nav-item-text` }, props.item.title)
+    /* @__PURE__ */ React8.createElement(NavIcon, { iconClassName: props.item.iconClassName, iconComponent: props.item.iconComponent }),
+    /* @__PURE__ */ React8.createElement(Box, { className: `nav-item-text` }, props.item.title)
   ));
 };
-var VerticalNavItem_default = React7.memo(VerticalNavItem);
+var VerticalNavItem_default = React8.memo(VerticalNavItem);
 var needsToBeOpened = (pathname, item) => {
   if (pathname) {
     return isUrlInChildren(item, pathname);
@@ -1656,19 +1681,19 @@ var VerticalNavItemCollapse = (props) => {
   if (!hasPermission) {
     return null;
   }
-  return /* @__PURE__ */ React7.createElement(Box, { className: "nav-item-collapse" }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(Box, { className: "nav-item-collapse" }, /* @__PURE__ */ React8.createElement(
     Box,
     {
       sx: { p: 2, display: "flex", alignContent: "flex-end", alignItems: "center" },
       className: `nav-item ${open ? "open" : ""} ${needsToBeOpened(pathname, props.item) ? "active" : ""}`,
       onClick: handleClick
     },
-    /* @__PURE__ */ React7.createElement(NavIcon, { iconClassName: props.item.iconClassName, iconComponent: props.item.iconComponent }),
-    /* @__PURE__ */ React7.createElement(Box, { className: `nav-item-text` }, props.item.title),
-    /* @__PURE__ */ React7.createElement(Box, { sx: { ml: "auto", display: "flex" } }, open ? /* @__PURE__ */ React7.createElement(ExpandMore, null) : /* @__PURE__ */ React7.createElement(ChevronRight, null))
-  ), props.item.children && Array.isArray(props.item.children) && /* @__PURE__ */ React7.createElement(Collapse, { in: open, className: "collapse-children" }, /* @__PURE__ */ React7.createElement(Box, null, /* @__PURE__ */ React7.createElement(Grid, { container: true }, props.item.children.map((item) => /* @__PURE__ */ React7.createElement(Grid, { key: item.id, size: 12 }, item.type === 1 /* Collapse */ && /* @__PURE__ */ React7.createElement(VerticalNavItemCollapse, { item, userPermisions: props.userPermisions, onHide: props.onHide }), item.type === 0 /* Item */ && /* @__PURE__ */ React7.createElement(VerticalNavItem_default, { item, userPermisions: props.userPermisions, onHide: props.onHide })))))));
+    /* @__PURE__ */ React8.createElement(NavIcon, { iconClassName: props.item.iconClassName, iconComponent: props.item.iconComponent }),
+    /* @__PURE__ */ React8.createElement(Box, { className: `nav-item-text` }, props.item.title),
+    /* @__PURE__ */ React8.createElement(Box, { sx: { ml: "auto", display: "flex" } }, open ? /* @__PURE__ */ React8.createElement(ExpandMore, null) : /* @__PURE__ */ React8.createElement(ChevronRight, null))
+  ), props.item.children && Array.isArray(props.item.children) && /* @__PURE__ */ React8.createElement(Collapse, { in: open, className: "collapse-children" }, /* @__PURE__ */ React8.createElement(Box, null, /* @__PURE__ */ React8.createElement(Grid, { container: true }, props.item.children.map((item) => /* @__PURE__ */ React8.createElement(Grid, { key: item.id, size: 12 }, item.type === 1 /* Collapse */ && /* @__PURE__ */ React8.createElement(VerticalNavItemCollapse, { item, userPermisions: props.userPermisions, onHide: props.onHide }), item.type === 0 /* Item */ && /* @__PURE__ */ React8.createElement(VerticalNavItem_default, { item, userPermisions: props.userPermisions, onHide: props.onHide })))))));
 };
-var VerticalNavItemCollapse_default = React7.memo(VerticalNavItemCollapse);
+var VerticalNavItemCollapse_default = React8.memo(VerticalNavItemCollapse);
 
 // src/components/navigation/VerticalNav/VerticalNav.scss
 var css9 = `.vertical-navigation {
@@ -1730,7 +1755,7 @@ var NavigationType = /* @__PURE__ */ ((NavigationType2) => {
   return NavigationType2;
 })(NavigationType || {});
 var VerticalNav = (props) => {
-  return /* @__PURE__ */ React7.createElement(Grid, { container: true, className: "vertical-navigation" }, props.items.map((item) => /* @__PURE__ */ React7.createElement(Grid, { key: item.id, size: { xs: 12, md: 12 }, className: "grid-item-navigation" }, item.type === 1 /* Collapse */ && /* @__PURE__ */ React7.createElement(VerticalNavItemCollapse_default, { item, userPermisions: props.userPermisions, onHide: props.onHide }), item.type === 0 /* Item */ && /* @__PURE__ */ React7.createElement(VerticalNavItem_default, { item, userPermisions: props.userPermisions, onHide: props.onHide }))));
+  return /* @__PURE__ */ React8.createElement(Grid, { container: true, className: "vertical-navigation" }, props.items.map((item) => /* @__PURE__ */ React8.createElement(Grid, { key: item.id, size: { xs: 12, md: 12 }, className: "grid-item-navigation" }, item.type === 1 /* Collapse */ && /* @__PURE__ */ React8.createElement(VerticalNavItemCollapse_default, { item, userPermisions: props.userPermisions, onHide: props.onHide }), item.type === 0 /* Item */ && /* @__PURE__ */ React8.createElement(VerticalNavItem_default, { item, userPermisions: props.userPermisions, onHide: props.onHide }))));
 };
 
 // src/components/navigation/components/UserInfo.scss
@@ -1742,21 +1767,37 @@ document.head.appendChild(document.createElement("style")).appendChild(document.
 
 // src/components/navigation/components/UserInfo.tsx
 var UserInfo = (props) => {
-  const [anchorEl, setAnchorEl] = React7.useState(null);
+  const [anchorEl, setAnchorEl] = React8.useState(null);
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
   };
   const handleClose = () => {
     setAnchorEl(null);
   };
-  return /* @__PURE__ */ React7.createElement(Box, { className: "user-info" }, /* @__PURE__ */ React7.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, props.photoURL && props.photoURL !== void 0 ? /* @__PURE__ */ React7.createElement(Avatar, { className: "avatar-user", src: props.photoURL }) : /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(Box, { className: "user-info" }, /* @__PURE__ */ React8.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, props.photoURL && props.photoURL !== void 0 ? /* @__PURE__ */ React8.createElement(Avatar, { className: "avatar-user", src: props.photoURL }) : /* @__PURE__ */ React8.createElement(
     Avatar,
     {
       className: "avatar-user main-background-color",
       sx: { bgcolor: "primary.main", color: "primary.contrastText" }
     },
     props.displayName.charAt(0).toUpperCase()
-  ), /* @__PURE__ */ React7.createElement(Box, { sx: { ml: 1, width: "100%", display: "flex", alignItems: "center", alignContent: "flex-end" } }, /* @__PURE__ */ React7.createElement(Box, { className: "user-name" }, props.displayName), props.menuActions && props.menuActions.length > 0 && /* @__PURE__ */ React7.createElement(Box, { sx: { ml: "auto", display: "flex" }, className: "cursor-pointer" }, /* @__PURE__ */ React7.createElement(ExpandMore, { onClick: handleClick }), /* @__PURE__ */ React7.createElement(Menu, { anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleClose }, props.menuActions.map((item, i) => /* @__PURE__ */ React7.createElement(MenuItem, { key: i, onClick: item.action }, item.title)))))));
+  ), /* @__PURE__ */ React8.createElement(Box, { sx: { ml: 1, width: "100%", display: "flex", alignItems: "center", alignContent: "flex-end" } }, /* @__PURE__ */ React8.createElement(Box, { className: "user-name" }, props.displayName), props.menuActions && props.menuActions.length > 0 && /* @__PURE__ */ React8.createElement(Box, { sx: { ml: "auto", display: "flex" }, className: "cursor-pointer" }, /* @__PURE__ */ React8.createElement(ExpandMore, { onClick: handleClick }), /* @__PURE__ */ React8.createElement(Menu, { anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleClose }, props.menuActions.map((item, i) => /* @__PURE__ */ React8.createElement(MenuItem, { key: i, onClick: item.action }, item.title)))))));
+};
+var AppBreadcrumbs = (props) => {
+  const matches = useMatches();
+  const crumbs = matches.flatMap((match) => {
+    const breadcrumb = match.handle?.breadcrumb;
+    if (!breadcrumb) return [];
+    const result = typeof breadcrumb === "function" ? breadcrumb(match) : breadcrumb;
+    return Array.isArray(result) ? result : [result];
+  });
+  if (!crumbs.length) {
+    return null;
+  }
+  return /* @__PURE__ */ React8.createElement(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__ */ React8.createElement(Typography, { key: index, variant: "body2", sx: { color: isLast ? "text.primary" : "text.secondary" } }, crumb.label) : /* @__PURE__ */ React8.createElement(Link, { key: index, component: Link$1, to: crumb.to, underline: "hover", variant: "body2", color: "inherit" }, crumb.label);
+  }));
 };
 
 // src/components/layouts/Standard/AppSidebar/AppSidebar.scss
@@ -1772,7 +1813,7 @@ document.head.appendChild(document.createElement("style")).appendChild(document.
 
 // src/components/layouts/Standard/AppSidebar/AppSidebar.tsx
 var AppSidebar = (props) => {
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
     Drawer,
     {
       anchor: "left",
@@ -1781,8 +1822,8 @@ var AppSidebar = (props) => {
       onClose: props.onHide,
       sx: { display: { xs: "block", lg: "none" } }
     },
-    /* @__PURE__ */ React7.createElement(Box, { sx: { height: "100%" }, className: "app-sidebar" }, /* @__PURE__ */ React7.createElement(Box, { sx: { display: "flex", flexDirection: "column", height: "100vh" } }, props.headerComponents && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Box, { sx: { p: "12px", flexShrink: 0 } }, props.headerComponents), /* @__PURE__ */ React7.createElement(Divider, null)), /* @__PURE__ */ React7.createElement(Box, { sx: { overflow: "auto" } }, props.children), props.footerComponents && /* @__PURE__ */ React7.createElement(Box, { sx: { mt: "auto", flexShrink: 0 } }, props.footerComponents)))
-  ), /* @__PURE__ */ React7.createElement(Box, { sx: { display: { xs: "none", lg: "block" } } }, /* @__PURE__ */ React7.createElement(Box, { sx: { height: "100%" }, className: "app-sidebar" }, /* @__PURE__ */ React7.createElement(Box, { sx: { position: "sticky", top: "0" } }, /* @__PURE__ */ React7.createElement(Box, { sx: { display: "flex", flexDirection: "column", height: "100vh" } }, props.headerComponents && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Box, { sx: { p: "12px", flexShrink: 0 } }, props.headerComponents), /* @__PURE__ */ React7.createElement(Divider, null)), /* @__PURE__ */ React7.createElement(Box, { sx: { overflow: "auto" } }, props.children), props.footerComponents && /* @__PURE__ */ React7.createElement(Box, { sx: { mt: "auto", flexShrink: 0 } }, props.footerComponents))))));
+    /* @__PURE__ */ React8.createElement(Box, { sx: { height: "100%" }, className: "app-sidebar" }, /* @__PURE__ */ React8.createElement(Box, { sx: { display: "flex", flexDirection: "column", height: "100vh" } }, props.headerComponents && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Box, { sx: { p: "12px", flexShrink: 0 } }, props.headerComponents), /* @__PURE__ */ React8.createElement(Divider, null)), /* @__PURE__ */ React8.createElement(Box, { sx: { overflow: "auto" } }, props.children), props.footerComponents && /* @__PURE__ */ React8.createElement(Box, { sx: { mt: "auto", flexShrink: 0 } }, props.footerComponents)))
+  ), /* @__PURE__ */ React8.createElement(Box, { sx: { display: { xs: "none", lg: "block" } } }, /* @__PURE__ */ React8.createElement(Box, { sx: { height: "100%" }, className: "app-sidebar" }, /* @__PURE__ */ React8.createElement(Box, { sx: { position: "sticky", top: "0" } }, /* @__PURE__ */ React8.createElement(Box, { sx: { display: "flex", flexDirection: "column", height: "100vh" } }, props.headerComponents && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Box, { sx: { p: "12px", flexShrink: 0 } }, props.headerComponents), /* @__PURE__ */ React8.createElement(Divider, null)), /* @__PURE__ */ React8.createElement(Box, { sx: { overflow: "auto" } }, props.children), props.footerComponents && /* @__PURE__ */ React8.createElement(Box, { sx: { mt: "auto", flexShrink: 0 } }, props.footerComponents))))));
 };
 
 // src/components/layouts/DrawerLayout/DrawerSidebar/DrawerSidebar.scss
@@ -1798,7 +1839,7 @@ document.head.appendChild(document.createElement("style")).appendChild(document.
 
 // src/components/layouts/DrawerLayout/DrawerSidebar/DrawerSidebar.tsx
 var DrawerSidebar = (props) => {
-  return /* @__PURE__ */ React7.createElement(Drawer, { anchor: "left", className: "drawer-nav", open: props.open, onClose: props.onHide }, /* @__PURE__ */ React7.createElement(Box, { sx: { height: "100%" }, className: "drawer-sidebar" }, /* @__PURE__ */ React7.createElement(Box, { sx: { display: "flex", flexDirection: "column", height: "100vh" } }, props.headerComponents && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Box, { sx: { p: "12px", flexShrink: 0 } }, props.headerComponents), /* @__PURE__ */ React7.createElement(Divider, null)), /* @__PURE__ */ React7.createElement(Box, { sx: { overflow: "auto" } }, props.children), props.footerComponents && /* @__PURE__ */ React7.createElement(Box, { sx: { mt: "auto", flexShrink: 0 } }, props.footerComponents))));
+  return /* @__PURE__ */ React8.createElement(Drawer, { anchor: "left", className: "drawer-nav", open: props.open, onClose: props.onHide }, /* @__PURE__ */ React8.createElement(Box, { sx: { height: "100%" }, className: "drawer-sidebar" }, /* @__PURE__ */ React8.createElement(Box, { sx: { display: "flex", flexDirection: "column", height: "100vh" } }, props.headerComponents && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Box, { sx: { p: "12px", flexShrink: 0 } }, props.headerComponents), /* @__PURE__ */ React8.createElement(Divider, null)), /* @__PURE__ */ React8.createElement(Box, { sx: { overflow: "auto" } }, props.children), props.footerComponents && /* @__PURE__ */ React8.createElement(Box, { sx: { mt: "auto", flexShrink: 0 } }, props.footerComponents))));
 };
 
 // src/components/layouts/Standard/AppHeader/AppHeader.scss
@@ -1819,7 +1860,7 @@ document.head.appendChild(document.createElement("style")).appendChild(document.
 
 // src/components/layouts/Standard/AppHeader/AppHeader.tsx
 var AppHeader = (props) => {
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(
     AppBar,
     {
       position: "sticky",
@@ -1828,7 +1869,7 @@ var AppHeader = (props) => {
       },
       className: `app-bar main-background-body ${props.className ?? ""}`
     },
-    /* @__PURE__ */ React7.createElement(Toolbar, { className: "app-toolbar" }, props.handleDrawerOpen && /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(Toolbar, { className: "app-toolbar" }, props.handleDrawerOpen && /* @__PURE__ */ React8.createElement(
       IconButton,
       {
         sx: { display: { xs: `inline-flex`, lg: props.drawerVisible ? `inline-flex` : `none` } },
@@ -1837,7 +1878,7 @@ var AppHeader = (props) => {
         "aria-label": "open drawer",
         onClick: props.handleDrawerOpen
       },
-      /* @__PURE__ */ React7.createElement(MenuIcon, null)
+      /* @__PURE__ */ React8.createElement(MenuIcon, null)
     ), props.children)
   );
 };
@@ -1868,7 +1909,7 @@ document.head.appendChild(document.createElement("style")).appendChild(document.
 // src/components/fields/ButtonComponent/ButtonComponent.tsx
 var ButtonComponent = ({ component = "button", ...rest }) => {
   const props = { component, ...rest };
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(
     Button,
     {
       type: props.type && props.type,
@@ -1894,7 +1935,7 @@ var ButtonComponent = ({ component = "button", ...rest }) => {
       disabled: props.loading || props.disabled,
       component: props.component
     },
-    props.loading ? /* @__PURE__ */ React7.createElement(
+    props.loading ? /* @__PURE__ */ React8.createElement(
       CircularProgress,
       {
         className: `${props.reverseColors ? "circular-progress-main-color" : ""}`,
@@ -1978,7 +2019,7 @@ var TextSimpleComponent = ({
 }) => {
   const props = { noBorders, isFormLabel, ...rest };
   function SkeletonCompleteDefault(skeleton) {
-    return skeleton.mineSkeleton ?? /* @__PURE__ */ React7.createElement(
+    return skeleton.mineSkeleton ?? /* @__PURE__ */ React8.createElement(
       Skeleton,
       {
         width: props.fullWidth ? "auto" : "200px",
@@ -1988,7 +2029,7 @@ var TextSimpleComponent = ({
       }
     );
   }
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(
     Box,
     {
       className: "text-simple-component",
@@ -1998,8 +2039,8 @@ var TextSimpleComponent = ({
       },
       ...props.componentBoxProps
     },
-    props.skeletonLabel ? /* @__PURE__ */ React7.createElement(Skeleton, { width: "10%", animation: "wave" }) : props.label ? props.isFormLabel ? /* @__PURE__ */ React7.createElement(FormLabel, { className: `${props.classNameLabel ?? ""}` }, props.label) : /* @__PURE__ */ React7.createElement(Box, { className: `${props.classNameLabel ?? ""}`, ...props.labelBoxProps }, props.label) : /* @__PURE__ */ React7.createElement(React7.Fragment, null),
-    /* @__PURE__ */ React7.createElement(
+    props.skeletonLabel ? /* @__PURE__ */ React8.createElement(Skeleton, { width: "10%", animation: "wave" }) : props.label ? props.isFormLabel ? /* @__PURE__ */ React8.createElement(FormLabel, { className: `${props.classNameLabel ?? ""}` }, props.label) : /* @__PURE__ */ React8.createElement(Box, { className: `${props.classNameLabel ?? ""}`, ...props.labelBoxProps }, props.label) : /* @__PURE__ */ React8.createElement(React8.Fragment, null),
+    /* @__PURE__ */ React8.createElement(
       Box,
       {
         sx: {
@@ -2013,15 +2054,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__ */ React7.createElement(SkeletonCompleteDefault, { ...props.skeletonValue }) : /* @__PURE__ */ React7.createElement(React7.Fragment, null, props.startIcon && /* @__PURE__ */ React7.createElement(Box, { sx: { mr: 1, display: "flex" } }, props.startIcon), props.isLoading ? /* @__PURE__ */ React7.createElement(CircularProgress, { className: "circular-progress-main-color", size: 20, color: "primary" }) : /* @__PURE__ */ React7.createElement(Box, { sx: { width: props.fullWidth ? "100%" : "auto" } }, props.value), props.endIcon && /* @__PURE__ */ React7.createElement(Box, { sx: { ml: props.fullWidth ? "auto" : "1", display: "flex" } }, props.endIcon))
+      props.skeletonValue && props.skeletonValue.useSkeleton ? /* @__PURE__ */ React8.createElement(SkeletonCompleteDefault, { ...props.skeletonValue }) : /* @__PURE__ */ React8.createElement(React8.Fragment, null, props.startIcon && /* @__PURE__ */ React8.createElement(Box, { sx: { mr: 1, display: "flex" } }, props.startIcon), props.isLoading ? /* @__PURE__ */ React8.createElement(CircularProgress, { className: "circular-progress-main-color", size: 20, color: "primary" }) : /* @__PURE__ */ React8.createElement(Box, { sx: { width: props.fullWidth ? "100%" : "auto" } }, props.value), props.endIcon && /* @__PURE__ */ React8.createElement(Box, { sx: { ml: props.fullWidth ? "auto" : "1", display: "flex" } }, props.endIcon))
     ),
-    props.helperText && /* @__PURE__ */ React7.createElement(
+    props.helperText && /* @__PURE__ */ React8.createElement(
       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__ */ React7.createElement(Skeleton, { width: "15%", animation: "wave" }) : props.helperText
+      props.skeletonValue && props.skeletonValue.useSkeleton ? /* @__PURE__ */ React8.createElement(Skeleton, { width: "15%", animation: "wave" }) : props.helperText
     )
   );
 };
@@ -2130,7 +2171,7 @@ var SelectField = ({
   const getOptions = () => {
     return props.addExtraOption ? [props.addExtraOption, ...props.options] : props.options;
   };
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(
     Box,
     {
       className: "select-field",
@@ -2139,8 +2180,8 @@ var SelectField = ({
         flexDirection: "column"
       }
     },
-    props.label && /* @__PURE__ */ React7.createElement(FormLabel, { className: `${props.invalid ? "Mui-error" : ""}` }, props.label),
-    /* @__PURE__ */ React7.createElement(
+    props.label && /* @__PURE__ */ React8.createElement(FormLabel, { className: `${props.invalid ? "Mui-error" : ""}` }, props.label),
+    /* @__PURE__ */ React8.createElement(
       Select,
       {
         defaultValue: props.defaultOptions,
@@ -2172,7 +2213,7 @@ var SelectField = ({
         styles: buildReactSelectStyles(theme)
       }
     ),
-    props.helperText && /* @__PURE__ */ React7.createElement(FormHelperText, { error: props.invalid, className: `helper-text ${props.invalid ? "has-error Mui-error" : ""}` }, props.helperText)
+    props.helperText && /* @__PURE__ */ React8.createElement(FormHelperText, { error: props.invalid, className: `helper-text ${props.invalid ? "has-error Mui-error" : ""}` }, props.helperText)
   );
 };
 var SelectAsyncField = ({
@@ -2214,7 +2255,7 @@ var SelectAsyncField = ({
       }
     };
   };
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(
     Box,
     {
       className: "select-field",
@@ -2223,8 +2264,8 @@ var SelectAsyncField = ({
         flexDirection: "column"
       }
     },
-    props.label && /* @__PURE__ */ React7.createElement(FormLabel, { className: `${props.invalid ? "Mui-error" : ""}` }, props.label),
-    /* @__PURE__ */ React7.createElement(
+    props.label && /* @__PURE__ */ React8.createElement(FormLabel, { className: `${props.invalid ? "Mui-error" : ""}` }, props.label),
+    /* @__PURE__ */ React8.createElement(
       AsyncPaginate,
       {
         defaultValue: props.defaultOptions,
@@ -2258,7 +2299,7 @@ var SelectAsyncField = ({
         styles: buildReactSelectStyles(theme)
       }
     ),
-    props.helperText && /* @__PURE__ */ React7.createElement(FormHelperText, { error: props.invalid, className: `helper-text ${props.invalid ? "has-error Mui-error" : ""}` }, props.helperText)
+    props.helperText && /* @__PURE__ */ React8.createElement(FormHelperText, { error: props.invalid, className: `helper-text ${props.invalid ? "has-error Mui-error" : ""}` }, props.helperText)
   );
 };
 var LoginForm = (props) => {
@@ -2279,12 +2320,12 @@ var LoginForm = (props) => {
   } = useForm({
     resolver: yupResolver(LoginSchema)
   });
-  return /* @__PURE__ */ React7.createElement(Box, { sx: { m: 2 } }, props.topComponent && /* @__PURE__ */ React7.createElement(Box, { sx: { m: 2 } }, props.topComponent), /* @__PURE__ */ React7.createElement(Box, { sx: { my: 2 } }, /* @__PURE__ */ React7.createElement(Stack, { direction: "column", spacing: 1 }, /* @__PURE__ */ React7.createElement(Box, null, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(Box, { sx: { m: 2 } }, props.topComponent && /* @__PURE__ */ React8.createElement(Box, { sx: { m: 2 } }, props.topComponent), /* @__PURE__ */ React8.createElement(Box, { sx: { my: 2 } }, /* @__PURE__ */ React8.createElement(Stack, { direction: "column", spacing: 1 }, /* @__PURE__ */ React8.createElement(Box, null, /* @__PURE__ */ React8.createElement(
     Controller,
     {
       control,
       name: "login",
-      render: ({ field: { onChange, name, ref: ref2 } }) => /* @__PURE__ */ React7.createElement(
+      render: ({ field: { onChange, name, ref: ref2 } }) => /* @__PURE__ */ React8.createElement(
         TextFieldComponent,
         {
           label: props.valuesText.labelLogin,
@@ -2308,12 +2349,12 @@ var LoginForm = (props) => {
         }
       )
     }
-  )), /* @__PURE__ */ React7.createElement(Box, null, /* @__PURE__ */ React7.createElement(
+  )), /* @__PURE__ */ React8.createElement(Box, null, /* @__PURE__ */ React8.createElement(
     Controller,
     {
       control,
       name: "password",
-      render: ({ field: { onChange, name, ref: ref2 } }) => /* @__PURE__ */ React7.createElement(
+      render: ({ field: { onChange, name, ref: ref2 } }) => /* @__PURE__ */ React8.createElement(
         TextFieldComponent,
         {
           label: props.valuesText.labelPassword,
@@ -2334,11 +2375,11 @@ var LoginForm = (props) => {
               }
             }
           },
-          endIcon: /* @__PURE__ */ React7.createElement(IconButton, { "aria-label": "toggle password visibility", onClick: handleClickShowPassword, size: "small" }, showPassword ? /* @__PURE__ */ React7.createElement(Visibility, null) : /* @__PURE__ */ React7.createElement(VisibilityOff, null))
+          endIcon: /* @__PURE__ */ React8.createElement(IconButton, { "aria-label": "toggle password visibility", onClick: handleClickShowPassword, size: "small" }, showPassword ? /* @__PURE__ */ React8.createElement(Visibility, null) : /* @__PURE__ */ React8.createElement(VisibilityOff, null))
         }
       )
     }
-  )))), /* @__PURE__ */ React7.createElement(Box, { sx: { mb: 4 } }, /* @__PURE__ */ React7.createElement(
+  )))), /* @__PURE__ */ React8.createElement(Box, { sx: { mb: 4 } }, /* @__PURE__ */ React8.createElement(
     ButtonComponent,
     {
       label: props.valuesText.buttonText,
@@ -2346,7 +2387,7 @@ var LoginForm = (props) => {
       className: "btn-login",
       onClick: handleSubmit(props.onClick)
     }
-  )), props.bottomComponent && /* @__PURE__ */ React7.createElement(Box, null, props.bottomComponent));
+  )), props.bottomComponent && /* @__PURE__ */ React8.createElement(Box, null, props.bottomComponent));
 };
 var ChangePasswordForm = (props) => {
   const validationSchema = yup2.object().shape({
@@ -2372,12 +2413,12 @@ var ChangePasswordForm = (props) => {
   const handleMouseDownPassword = (event) => {
     event.preventDefault();
   };
-  return /* @__PURE__ */ React7.createElement(Box, { sx: { m: 2 } }, props.topComponent && /* @__PURE__ */ React7.createElement(Box, { sx: { m: 2 } }, props.topComponent), /* @__PURE__ */ React7.createElement(Box, { sx: { my: 2 } }, /* @__PURE__ */ React7.createElement(Stack, { direction: "column", spacing: 1 }, /* @__PURE__ */ React7.createElement(Box, null, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(Box, { sx: { m: 2 } }, props.topComponent && /* @__PURE__ */ React8.createElement(Box, { sx: { m: 2 } }, props.topComponent), /* @__PURE__ */ React8.createElement(Box, { sx: { my: 2 } }, /* @__PURE__ */ React8.createElement(Stack, { direction: "column", spacing: 1 }, /* @__PURE__ */ React8.createElement(Box, null, /* @__PURE__ */ React8.createElement(
     Controller,
     {
       control,
       name: "password",
-      render: ({ field: { onChange, name, ref: ref2 } }) => /* @__PURE__ */ React7.createElement(
+      render: ({ field: { onChange, name, ref: ref2 } }) => /* @__PURE__ */ React8.createElement(
         TextFieldComponent,
         {
           label: props.valuesText.labelPassword,
@@ -2398,7 +2439,7 @@ var ChangePasswordForm = (props) => {
               }
             }
           },
-          endIcon: /* @__PURE__ */ React7.createElement(
+          endIcon: /* @__PURE__ */ React8.createElement(
             IconButton,
             {
               "aria-label": "toggle password visibility",
@@ -2406,17 +2447,17 @@ var ChangePasswordForm = (props) => {
               onMouseDown: handleMouseDownPassword,
               size: "small"
             },
-            showPassword ? /* @__PURE__ */ React7.createElement(Visibility, null) : /* @__PURE__ */ React7.createElement(VisibilityOff, null)
+            showPassword ? /* @__PURE__ */ React8.createElement(Visibility, null) : /* @__PURE__ */ React8.createElement(VisibilityOff, null)
           )
         }
       )
     }
-  )), /* @__PURE__ */ React7.createElement(Box, null, /* @__PURE__ */ React7.createElement(
+  )), /* @__PURE__ */ React8.createElement(Box, null, /* @__PURE__ */ React8.createElement(
     Controller,
     {
       control,
       name: "passwordConfirmation",
-      render: ({ field: { onChange, name, ref: ref2 } }) => /* @__PURE__ */ React7.createElement(
+      render: ({ field: { onChange, name, ref: ref2 } }) => /* @__PURE__ */ React8.createElement(
         TextFieldComponent,
         {
           label: props.valuesText.labelSamePassword,
@@ -2437,7 +2478,7 @@ var ChangePasswordForm = (props) => {
               }
             }
           },
-          endIcon: /* @__PURE__ */ React7.createElement(
+          endIcon: /* @__PURE__ */ React8.createElement(
             IconButton,
             {
               "aria-label": "toggle password visibility",
@@ -2445,12 +2486,12 @@ var ChangePasswordForm = (props) => {
               onMouseDown: handleMouseDownPassword,
               size: "small"
             },
-            showPassword ? /* @__PURE__ */ React7.createElement(Visibility, null) : /* @__PURE__ */ React7.createElement(VisibilityOff, null)
+            showPassword ? /* @__PURE__ */ React8.createElement(Visibility, null) : /* @__PURE__ */ React8.createElement(VisibilityOff, null)
           )
         }
       )
     }
-  )))), /* @__PURE__ */ React7.createElement(Box, { sx: { mb: 4 } }, /* @__PURE__ */ React7.createElement(
+  )))), /* @__PURE__ */ React8.createElement(Box, { sx: { mb: 4 } }, /* @__PURE__ */ React8.createElement(
     ButtonComponent,
     {
       label: props.valuesText.buttonText,
@@ -2458,7 +2499,7 @@ var ChangePasswordForm = (props) => {
       onClick: handleSubmit(props.onClick),
       loading: props.loading
     }
-  )), props.bottomComponent && /* @__PURE__ */ React7.createElement(Box, null, props.bottomComponent));
+  )), props.bottomComponent && /* @__PURE__ */ React8.createElement(Box, null, props.bottomComponent));
 };
 var ResetPasswordForm = (props) => {
   const ResetSchema = yup2.object().shape({
@@ -2473,12 +2514,12 @@ var ResetPasswordForm = (props) => {
   } = useForm({
     resolver: yupResolver(ResetSchema)
   });
-  return /* @__PURE__ */ React7.createElement(Box, { sx: { m: 2 } }, props.topComponent && /* @__PURE__ */ React7.createElement(Box, { sx: { m: 2 } }, props.topComponent), /* @__PURE__ */ React7.createElement(Box, { sx: { my: 2 } }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(Box, { sx: { m: 2 } }, props.topComponent && /* @__PURE__ */ React8.createElement(Box, { sx: { m: 2 } }, props.topComponent), /* @__PURE__ */ React8.createElement(Box, { sx: { my: 2 } }, /* @__PURE__ */ React8.createElement(
     Controller,
     {
       control,
       name: "email",
-      render: ({ field: { onChange, name, ref: ref2 } }) => /* @__PURE__ */ React7.createElement(
+      render: ({ field: { onChange, name, ref: ref2 } }) => /* @__PURE__ */ React8.createElement(
         TextFieldComponent,
         {
           label: props.valuesText.label,
@@ -2502,7 +2543,7 @@ var ResetPasswordForm = (props) => {
         }
       )
     }
-  )), /* @__PURE__ */ React7.createElement(Box, { sx: { mb: 4 } }, /* @__PURE__ */ React7.createElement(
+  )), /* @__PURE__ */ React8.createElement(Box, { sx: { mb: 4 } }, /* @__PURE__ */ React8.createElement(
     ButtonComponent,
     {
       label: props.valuesText.buttonText,
@@ -2510,7 +2551,7 @@ var ResetPasswordForm = (props) => {
       onClick: handleSubmit(props.onClick),
       loading: props.loading
     }
-  )), props.bottomComponent && /* @__PURE__ */ React7.createElement(Box, null, props.bottomComponent));
+  )), props.bottomComponent && /* @__PURE__ */ React8.createElement(Box, null, props.bottomComponent));
 };
 var ModalComponent = ({
   modalSize = "sm",
@@ -2522,7 +2563,7 @@ var ModalComponent = ({
   ...rest
 }) => {
   const props = { modalSize, fullWidth, loading, dividers, crossAvailable, buttonActionsAlign, ...rest };
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(
     Dialog,
     {
       open: props.setShow,
@@ -2537,17 +2578,17 @@ var ModalComponent = ({
       scroll: "body",
       slotProps: { paper: { sx: { overflowY: "unset" } } }
     },
-    /* @__PURE__ */ React7.createElement(DialogTitle, { id: "modal-title" }, /* @__PURE__ */ React7.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, props.title, props.onHide && props.crossAvailable && /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(DialogTitle, { id: "modal-title" }, /* @__PURE__ */ React8.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, props.title, props.onHide && props.crossAvailable && /* @__PURE__ */ React8.createElement(
       Box,
       {
         sx: {
           margin: "-1rem -1rem -1rem auto"
         }
       },
-      /* @__PURE__ */ React7.createElement(IconButton, { "aria-label": "close", onClick: props.onHide }, /* @__PURE__ */ React7.createElement(Close, null))
+      /* @__PURE__ */ React8.createElement(IconButton, { "aria-label": "close", onClick: props.onHide }, /* @__PURE__ */ React8.createElement(Close, null))
     ))),
-    props.children && /* @__PURE__ */ React7.createElement(DialogContent, { sx: { overflowY: "unset" }, id: "modal-description", dividers: props.dividers }, props.children),
-    /* @__PURE__ */ React7.createElement(DialogActions, { sx: { justifyContent: props.buttonActionsAlign } }, props.cancelButton && /* @__PURE__ */ React7.createElement(
+    props.children && /* @__PURE__ */ React8.createElement(DialogContent, { sx: { overflowY: "unset" }, id: "modal-description", dividers: props.dividers }, props.children),
+    /* @__PURE__ */ React8.createElement(DialogActions, { sx: { justifyContent: props.buttonActionsAlign } }, props.cancelButton && /* @__PURE__ */ React8.createElement(
       ButtonComponent,
       {
         disabled: props.loading,
@@ -2555,7 +2596,7 @@ var ModalComponent = ({
         onClick: props.cancelButton.onClick ? props.cancelButton.onClick : props.onHide,
         ...props.cancelButton
       }
-    ), props.submitButton && /* @__PURE__ */ React7.createElement(
+    ), props.submitButton && /* @__PURE__ */ React8.createElement(
       ButtonComponent,
       {
         className: `btn-modal-submit main-background-color ${props.submitButton.className ? props.submitButton.className : ""}`,
@@ -2565,12 +2606,104 @@ var ModalComponent = ({
     ))
   );
 };
+
+// src/components/modals/Drawers/DetailPanelComponent.scss
+var css17 = `.detail-panel .MuiDrawer-paper {
+  display: flex;
+  flex-direction: column;
+}
+.detail-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.detail-panel__content {
+  flex: 1;
+  overflow-y: auto;
+}
+.detail-panel__actions {
+  display: flex;
+}
+.detail-panel ::-webkit-scrollbar {
+  display: block;
+  width: 8px;
+}
+.detail-panel ::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+}
+/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRldGFpbFBhbmVsQ29tcG9uZW50LnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0U7RUFDRTtFQUNBOztBQUdGO0VBQ0U7RUFDQTtFQUNBOztBQUdGO0VBQ0U7RUFDQTs7QUFHRjtFQUNFOztBQUdGO0VBQ0U7RUFDQTs7QUFHRjtFQUNFIiwic291cmNlc0NvbnRlbnQiOlsiLmRldGFpbC1wYW5lbCB7XHJcbiAgLk11aURyYXdlci1wYXBlciB7XHJcbiAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcclxuICB9XHJcblxyXG4gICZfX2hlYWRlciB7XHJcbiAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxuICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcclxuICB9XHJcblxyXG4gICZfX2NvbnRlbnQge1xyXG4gICAgZmxleDogMTtcclxuICAgIG92ZXJmbG93LXk6IGF1dG87XHJcbiAgfVxyXG5cclxuICAmX19hY3Rpb25zIHtcclxuICAgIGRpc3BsYXk6IGZsZXg7XHJcbiAgfVxyXG5cclxuICA6Oi13ZWJraXQtc2Nyb2xsYmFyIHtcclxuICAgIGRpc3BsYXk6IGJsb2NrO1xyXG4gICAgd2lkdGg6IDhweDtcclxuICB9XHJcblxyXG4gIDo6LXdlYmtpdC1zY3JvbGxiYXItdGh1bWIge1xyXG4gICAgYm9yZGVyLXJhZGl1czogNHB4O1xyXG4gIH1cclxufVxyXG4iXX0= */`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css17));
+var DetailPanelComponent = ({
+  open,
+  onClose,
+  title,
+  anchor = "left",
+  actions,
+  children,
+  doublePanel = false,
+  disableBackdropClose = false
+}) => {
+  return /* @__PURE__ */ React8.createElement(
+    Drawer,
+    {
+      anchor,
+      open,
+      onClose: (_event, reason) => {
+        if (disableBackdropClose && reason === "backdropClick") return;
+        onClose();
+      },
+      className: "detail-panel",
+      slotProps: {
+        paper: {
+          sx: {
+            width: { xs: "100%", sm: "75%" },
+            "& ::-webkit-scrollbar-thumb": { backgroundColor: "primary.main" }
+          }
+        }
+      }
+    },
+    /* @__PURE__ */ React8.createElement(Box, { className: "detail-panel__header", sx: { px: { xs: 2, md: 3 }, py: 1.5 } }, /* @__PURE__ */ React8.createElement(Typography, { variant: "h6", component: "h2", noWrap: true }, title), /* @__PURE__ */ React8.createElement(IconButton, { "aria-label": "close", onClick: onClose }, /* @__PURE__ */ React8.createElement(Close, null))),
+    /* @__PURE__ */ React8.createElement(Divider, null),
+    /* @__PURE__ */ React8.createElement(
+      Grid,
+      {
+        className: "detail-panel__content",
+        sx: doublePanel ? {
+          display: "grid",
+          gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" },
+          gridTemplateRows: { sm: "minmax(0, 1fr)" },
+          overflowY: { sm: "hidden" },
+          "& > *": { p: { xs: 2, md: 3 }, overflowY: { sm: "auto" } },
+          "& > :first-child": {
+            borderStyle: "solid",
+            borderColor: "divider",
+            borderWidth: { xs: "0 0 1px 0", md: "0 1px 0 0" }
+          }
+        } : { p: { xs: 2, md: 3 } }
+      },
+      children
+    ),
+    actions && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Divider, null), /* @__PURE__ */ React8.createElement(
+      Box,
+      {
+        className: "detail-panel__actions",
+        sx: {
+          px: { xs: 2, md: 3 },
+          py: 1.5,
+          gap: 1,
+          justifyContent: anchor === "right" ? "flex-start" : "flex-end"
+        }
+      },
+      actions
+    ))
+  );
+};
 var TabsComponent = (props) => {
-  const [value, setValue] = React7.useState(props.tabActive.toString());
+  const [value, setValue] = React8.useState(props.tabActive.toString());
   const handleChange = (_event, newValue) => {
     setValue(newValue);
   };
-  return /* @__PURE__ */ React7.createElement(MainWrapperComponent, null, /* @__PURE__ */ React7.createElement(Box, { className: "tabs-component" }, /* @__PURE__ */ React7.createElement(TabContext, { value }, /* @__PURE__ */ React7.createElement(TabList, { onChange: handleChange }, props.tabs.sort((a, b) => a.value - b.value).map((tabLabel) => /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(MainWrapperComponent, null, /* @__PURE__ */ React8.createElement(Box, { className: "tabs-component" }, /* @__PURE__ */ React8.createElement(TabContext, { value }, /* @__PURE__ */ React8.createElement(TabList, { onChange: handleChange }, props.tabs.sort((a, b) => a.value - b.value).map((tabLabel) => /* @__PURE__ */ React8.createElement(
     Tab,
     {
       classes: { selected: "main-background-color" },
@@ -2579,7 +2712,7 @@ var TabsComponent = (props) => {
       label: tabLabel.label,
       value: tabLabel.value.toString()
     }
-  ))), props.tabsComponent.sort((a, b) => a.value - b.value).map((tabComponent) => /* @__PURE__ */ React7.createElement(TabPanel, { key: tabComponent.value, value: tabComponent.value.toString() }, tabComponent.component)))));
+  ))), props.tabsComponent.sort((a, b) => a.value - b.value).map((tabComponent) => /* @__PURE__ */ React8.createElement(TabPanel, { key: tabComponent.value, value: tabComponent.value.toString() }, tabComponent.component)))));
 };
 var toDayjs = (v, format) => {
   if (v == null || v === "") return null;
@@ -2599,8 +2732,8 @@ var DatePickerComponent = ({
   format,
   ...rest
 }) => {
-  const [value, setValue] = React7.useState(toDayjs(valueProp, format));
-  const [hover, setHover] = React7.useState(false);
+  const [value, setValue] = React8.useState(toDayjs(valueProp, format));
+  const [hover, setHover] = React8.useState(false);
   useEffect(() => {
     setValue(toDayjs(valueProp, format));
   }, [valueProp, format]);
@@ -2616,7 +2749,7 @@ var DatePickerComponent = ({
     onMouseLeave,
     ...textFieldRest
   } = textField ?? {};
-  return /* @__PURE__ */ React7.createElement(Box, { className: "data-picker-component", sx: { width: "100%" } }, /* @__PURE__ */ React7.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(Box, { className: "data-picker-component", sx: { width: "100%" } }, /* @__PURE__ */ React8.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs }, /* @__PURE__ */ React8.createElement(
     DatePicker,
     {
       ...rest,
@@ -2681,7 +2814,7 @@ var DatePickerComponent = ({
 };
 
 // src/components/wrappers/CardComponent/CardComponent.scss
-var css17 = `.card-component {
+var css18 = `.card-component {
   box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
 }
 .card-component.gradiant-green {
@@ -2703,13 +2836,13 @@ var css17 = `.card-component {
   color: white;
 }
 /*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNhcmRDb21wb25lbnQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNJOztBQUdBO0VBQ0k7RUFDQTs7QUFFSjtFQUNJO0VBQ0E7O0FBRUo7RUFDSTtFQUNBOztBQUVKO0VBQ0k7O0FBRUo7RUFDSSIsInNvdXJjZXNDb250ZW50IjpbIi5jYXJkLWNvbXBvbmVudHtcclxuICAgIGJveC1zaGFkb3c6IDAgMXB4IDIwcHggMCByZ2IoNjkgOTAgMTAwIC8gOCUpO1xyXG4gICAgLy9iYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTtcclxuXHJcbiAgICAmLmdyYWRpYW50LWdyZWVue1xyXG4gICAgICAgIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCgtMTM1ZGVnLCAjMWRlOWI2LCAjMWRjNGU5KTtcclxuICAgICAgICBjb2xvcjogd2hpdGU7XHJcbiAgICB9XHJcbiAgICAmLmdyYWRpYW50LXZpb2xldHtcclxuICAgICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoLTEzNWRlZywjODk5ZmQ0LCNhMzg5ZDQpO1xyXG4gICAgICAgIGNvbG9yOiB3aGl0ZTtcclxuICAgIH1cclxuICAgICYuZ3JleXtcclxuICAgICAgICBiYWNrZ3JvdW5kOiAjQTlBOUE5O1xyXG4gICAgICAgIGNvbG9yOiB3aGl0ZTtcclxuICAgIH1cclxuICAgICYubWFpbi1iYWNrZ3JvdW5kLWNvbG9ye1xyXG4gICAgICAgIGNvbG9yOiB3aGl0ZTtcclxuICAgIH1cclxuICAgIC5NdWlDaXJjdWxhclByb2dyZXNzLXJvb3R7XHJcbiAgICAgICAgY29sb3I6d2hpdGU7XHJcbiAgICB9XHJcbn0iXX0= */`;
-document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css17));
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css18));
 
 // src/components/wrappers/CardComponent/CardComponent.tsx
 var CardComponent = ({ backgroundType = "white", ...rest }) => {
   const props = { backgroundType, ...rest };
   const isPrimary = props.backgroundType === "primary";
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(
     Box,
     {
       className: `card-component ${props.onClick ? "cursor-pointer" : ""} ${isPrimary ? "" : props.backgroundType}
@@ -2720,7 +2853,7 @@ var CardComponent = ({ backgroundType = "white", ...rest }) => {
       },
       onClick: props.onClick
     },
-    /* @__PURE__ */ React7.createElement(Box, { sx: { p: 3.125, py: 3.75, height: "100%" } }, props.loading ? /* @__PURE__ */ React7.createElement(Box, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" } }, /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(Box, { sx: { p: 3.125, py: 3.75, height: "100%" } }, props.loading ? /* @__PURE__ */ React8.createElement(Box, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" } }, /* @__PURE__ */ React8.createElement(
       CircularProgress,
       {
         className: `${props.backgroundType === "white" ? "circular-progress-main-color" : ""}`,
@@ -2729,6 +2862,24 @@ var CardComponent = ({ backgroundType = "white", ...rest }) => {
     )) : props.children && props.children)
   );
 };
+var SnackbarComponent = ({
+  open,
+  message,
+  onClose,
+  severity = "info",
+  autoHideDuration = 5e3,
+  anchorOrigin = { vertical: "bottom", horizontal: "right" },
+  action
+}) => /* @__PURE__ */ React8.createElement(
+  Snackbar,
+  {
+    open,
+    autoHideDuration,
+    anchorOrigin,
+    onClose: (_, reason) => reason !== "clickaway" && onClose()
+  },
+  /* @__PURE__ */ React8.createElement(Alert, { severity, variant: "filled", onClose, action, sx: { width: "100%" } }, message)
+);
 
 // src/interfaces/search/SearchFilters.tsx
 var SearchBaseDefaults = {
@@ -2739,6 +2890,6 @@ var SearchBaseDefaults = {
   orderAsc: true
 };
 
-export { AppHeader, AppSidebar, ButtonComponent, CardComponent, ChangePasswordForm, DatePickerComponent, DrawerSidebar, GroupBy, LinearProgressComponent, LoginForm, MainLayoutSimple, MainWrapperComponent, ModalComponent, NavigationType, PublicFormWrapper, ResetPasswordForm, SearchBaseDefaults, SearchComponent, SelectAsyncField, SelectField, SimpleTableComponent, SplitLayout, TableComponent, TabsComponent, TextFieldComponent, TextSimpleComponent, UserInfo, VerticalNav, checkPermission, clearSession, downloadFileBlob, getImageByBase64, getImageByBlob, getJwtToken, getSession, redirectDownload, saveSession, toBase64, useIsMounted, usePrevious };
+export { AppBreadcrumbs, AppHeader, AppSidebar, ButtonComponent, CardComponent, ChangePasswordForm, DatePickerComponent, DetailPanelComponent, DrawerSidebar, GroupBy, LinearProgressComponent, LoginForm, MainLayoutSimple, MainWrapperComponent, ModalComponent, NavigationType, NotificationContainer, PublicFormWrapper, ResetPasswordForm, SearchBaseDefaults, SearchComponent, SelectAsyncField, SelectField, SimpleTableComponent, SnackbarComponent, SplitLayout, TableComponent, TabsComponent, TextFieldComponent, TextSimpleComponent, UserInfo, VerticalNav, addNotification, checkPermission, clearSession, downloadFileBlob, getImageByBase64, getImageByBlob, getJwtToken, getSession, redirectDownload, removeNotification, saveSession, toBase64, useIsMounted, usePrevious };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map