@natoora-libs/core 0.0.33 → 0.0.35

package/dist/components/index.cjs

@@ -39,7 +39,6 @@ __export(components_exports, {
   Date: () => Date_default,
   DeleteSubstitutionDialogContent: () => DeleteSubstitutionDialogContent_default,
   DeleteUserDialogContent: () => DeleteUserDialogContent_default,
-  DesktopContainer: () => DesktopContainer_default,
   ExtendedButton: () => ExtendedButton_default,
   FilledButton: () => FilledButton_default,
   FilledButtonLg: () => FilledButtonLg_default,
@@ -400,7 +399,7 @@ var BackHeader_default = BackHeader;
 
 // src/components/BottomBar/BottomBar.tsx
 var import_material6 = require("@mui/material");
-var import_prop_types3 = require("prop-types");
+var import_prop_types2 = require("prop-types");
 var import_mui5 = require("tss-react/mui");
 
 // src/components/Buttons/ExtendedButton/ExtendedButton.tsx
@@ -410,7 +409,6 @@ var import_Apps = __toESM(require("@mui/icons-material/Apps"), 1);
 var import_material5 = require("@mui/material");
 var import_Button = __toESM(require("@mui/material/Button"), 1);
 var import_Tooltip = __toESM(require("@mui/material/Tooltip"), 1);
-var import_prop_types2 = require("prop-types");
 var import_mui4 = require("tss-react/mui");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var useStyles4 = (0, import_mui4.makeStyles)()((theme) => ({
@@ -474,18 +472,18 @@ var useStyles4 = (0, import_mui4.makeStyles)()((theme) => ({
   }
 }));
 var ExtendedButton = ({
-  buttonType,
+  buttonType = "button",
   className,
-  color,
+  color = "default",
   copy,
-  disabled,
-  href,
-  onClick,
-  subcopy,
-  type,
-  variant,
-  component,
-  tooltip
+  disabled = false,
+  href = "",
+  onClick = void 0,
+  subcopy = void 0,
+  type = void 0,
+  variant = "outlined",
+  component = "button",
+  tooltip = ""
 }) => {
   const { classes, cx } = useStyles4();
   const icons2 = {
@@ -503,12 +501,13 @@ var ExtendedButton = ({
     download: import_icons_material.GetApp,
     publish: import_icons_material.Publish
   };
-  const IconComponent = icons2[type];
+  const muiColor = color === "noOutline" || color === "default" ? void 0 : color;
+  const IconComponent = type ? icons2[type] : null;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Tooltip.default, { title: tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     import_Button.default,
     {
       className: cx(classes[color], className),
-      color: color === "noOutline" ? "default" : color,
+      color: muiColor,
       component,
       "data-testid": copy ? `extended-button-${copy.toLowerCase()}` : "extended-button",
       disabled,
@@ -517,7 +516,7 @@ var ExtendedButton = ({
       type: buttonType,
       variant,
       children: [
-        type ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconComponent, { fontSize: "small", className: classes.icon }) : null,
+        IconComponent && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconComponent, { fontSize: "small", className: classes.icon }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: classes.copy, children: [
           copy,
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: subcopy })
@@ -526,47 +525,6 @@ var ExtendedButton = ({
     }
   ) }) });
 };
-ExtendedButton.defaultProps = {
-  buttonType: "button",
-  color: "default",
-  disabled: false,
-  href: "",
-  tooltip: "",
-  component: "button",
-  type: void 0,
-  className: void 0,
-  onClick: void 0,
-  subcopy: void 0,
-  variant: "outlined"
-};
-ExtendedButton.propTypes = {
-  buttonType: (0, import_prop_types2.oneOf)(["button", "submit"]),
-  className: import_prop_types2.string,
-  color: (0, import_prop_types2.oneOf)(["default", "inherit", "primary", "secondary", "noOutline"]),
-  copy: import_prop_types2.string.isRequired,
-  disabled: import_prop_types2.bool,
-  href: import_prop_types2.string,
-  onClick: import_prop_types2.func,
-  subcopy: import_prop_types2.string,
-  tooltip: import_prop_types2.string,
-  component: import_prop_types2.string,
-  type: (0, import_prop_types2.oneOf)([
-    "add",
-    "apps",
-    "childCare",
-    "delete",
-    "edit",
-    "importExport",
-    "notes",
-    "print",
-    "save",
-    "upload",
-    "refresh",
-    "download",
-    "publish"
-  ]),
-  variant: (0, import_prop_types2.oneOf)(["contained", "outlined", "text"])
-};
 var ExtendedButton_default = (0, import_react2.memo)(ExtendedButton);
 
 // src/components/BottomBar/BottomBar.tsx
@@ -620,10 +578,10 @@ BottomBar.defaultProps = {
   onRefreshClick: null
 };
 BottomBar.propTypes = {
-  className: import_prop_types3.string,
-  children: import_prop_types3.node,
-  isLoading: import_prop_types3.bool,
-  onRefreshClick: import_prop_types3.func
+  className: import_prop_types2.string,
+  children: import_prop_types2.node,
+  isLoading: import_prop_types2.bool,
+  onRefreshClick: import_prop_types2.func
 };
 var BottomBar_default = BottomBar;
 
@@ -633,7 +591,7 @@ var import_material7 = require("@mui/material");
 var import_green = __toESM(require("@mui/material/colors/green"), 1);
 var import_orange = __toESM(require("@mui/material/colors/orange"), 1);
 var import_red = __toESM(require("@mui/material/colors/red"), 1);
-var import_prop_types4 = __toESM(require("prop-types"), 1);
+var import_prop_types3 = __toESM(require("prop-types"), 1);
 var import_mui6 = require("tss-react/mui");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var useStyles6 = (0, import_mui6.makeStyles)()((theme) => ({
@@ -710,11 +668,11 @@ var BoxButton = (props) => {
   );
 };
 BoxButton.propTypes = {
-  label: import_prop_types4.default.any,
-  onClick: import_prop_types4.default.any,
-  main: import_prop_types4.default.any,
-  extra: import_prop_types4.default.any,
-  borderColor: import_prop_types4.default.any
+  label: import_prop_types3.default.any,
+  onClick: import_prop_types3.default.any,
+  main: import_prop_types3.default.any,
+  extra: import_prop_types3.default.any,
+  borderColor: import_prop_types3.default.any
 };
 var BoxButton_default = import_react3.default.memo(BoxButton);
 
@@ -722,7 +680,7 @@ var BoxButton_default = import_react3.default.memo(BoxButton);
 var import_react4 = require("react");
 var import_material8 = require("@mui/material");
 var import_Button2 = __toESM(require("@mui/material/Button"), 1);
-var import_prop_types5 = require("prop-types");
+var import_prop_types4 = require("prop-types");
 var import_mui7 = require("tss-react/mui");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var useStyles7 = (0, import_mui7.makeStyles)()((theme) => ({
@@ -821,9 +779,9 @@ var FilledButton = ({
   );
 };
 FilledButton.propTypes = {
-  autoFocus: import_prop_types5.bool,
-  className: import_prop_types5.string,
-  color: (0, import_prop_types5.oneOf)([
+  autoFocus: import_prop_types4.bool,
+  className: import_prop_types4.string,
+  color: (0, import_prop_types4.oneOf)([
     "default",
     "error",
     "info",
@@ -833,13 +791,13 @@ FilledButton.propTypes = {
     "success",
     "warning"
   ]),
-  copy: import_prop_types5.string.isRequired,
-  isLoading: import_prop_types5.bool,
-  disabled: import_prop_types5.bool,
-  href: import_prop_types5.string,
-  onClick: import_prop_types5.func,
-  type: (0, import_prop_types5.oneOf)(["button", "submit"]),
-  variant: (0, import_prop_types5.oneOf)(["contained", "outlined", "text"])
+  copy: import_prop_types4.string.isRequired,
+  isLoading: import_prop_types4.bool,
+  disabled: import_prop_types4.bool,
+  href: import_prop_types4.string,
+  onClick: import_prop_types4.func,
+  type: (0, import_prop_types4.oneOf)(["button", "submit"]),
+  variant: (0, import_prop_types4.oneOf)(["contained", "outlined", "text"])
 };
 var FilledButton_default = (0, import_react4.memo)(FilledButton);
 
@@ -847,7 +805,7 @@ var FilledButton_default = (0, import_react4.memo)(FilledButton);
 var import_react5 = __toESM(require("react"), 1);
 var import_material9 = require("@mui/material");
 var import_Button3 = __toESM(require("@mui/material/Button"), 1);
-var import_prop_types6 = __toESM(require("prop-types"), 1);
+var import_prop_types5 = __toESM(require("prop-types"), 1);
 var import_mui8 = require("tss-react/mui");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var FilledButtonLg = ({
@@ -879,9 +837,9 @@ var FilledButtonLg = ({
           loading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             import_material9.CircularProgress,
             {
-              color: (loadingProps == null ? void 0 : loadingProps.color) || "inherit",
-              size: (loadingProps == null ? void 0 : loadingProps.size) || 22,
-              style: { marginLeft: "15px", ...loadingProps == null ? void 0 : loadingProps.style }
+              color: loadingProps?.color || "inherit",
+              size: loadingProps?.size || 22,
+              style: { marginLeft: "15px", ...loadingProps?.style }
             }
           )
         ]
@@ -951,17 +909,17 @@ var ActionButtonLg = (0, import_mui8.withStyles)(FilledButtonLg, (theme) => ({
   }
 }));
 FilledButtonLg.propTypes = {
-  classes: import_prop_types6.default.any,
-  disabled: import_prop_types6.default.any,
-  variant: import_prop_types6.default.string,
-  color: import_prop_types6.default.string,
-  copy: import_prop_types6.default.any,
-  handleClick: import_prop_types6.default.any,
-  loading: import_prop_types6.default.bool,
-  loadingProps: import_prop_types6.default.shape({
-    color: import_prop_types6.default.oneOf(["primary", "secondary", "inherit"]),
-    size: import_prop_types6.default.number,
-    style: import_prop_types6.default.string
+  classes: import_prop_types5.default.any,
+  disabled: import_prop_types5.default.any,
+  variant: import_prop_types5.default.string,
+  color: import_prop_types5.default.string,
+  copy: import_prop_types5.default.any,
+  handleClick: import_prop_types5.default.any,
+  loading: import_prop_types5.default.bool,
+  loadingProps: import_prop_types5.default.shape({
+    color: import_prop_types5.default.oneOf(["primary", "secondary", "inherit"]),
+    size: import_prop_types5.default.number,
+    style: import_prop_types5.default.string
   })
 };
 var FilledButtonLg_default = import_react5.default.memo(ActionButtonLg);
@@ -970,7 +928,7 @@ var FilledButtonLg_default = import_react5.default.memo(ActionButtonLg);
 var import_react6 = __toESM(require("react"), 1);
 var import_Button4 = __toESM(require("@mui/material/Button"), 1);
 var import_CircularProgress = __toESM(require("@mui/material/CircularProgress"), 1);
-var import_prop_types7 = require("prop-types");
+var import_prop_types6 = require("prop-types");
 var import_mui9 = require("tss-react/mui");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var useStyles8 = (0, import_mui9.makeStyles)()((theme) => ({
@@ -1090,17 +1048,17 @@ var OutlinedButton = ({
   );
 };
 OutlinedButton.propTypes = {
-  className: import_prop_types7.string,
-  color: import_prop_types7.string,
-  copy: (0, import_prop_types7.oneOfType)([import_prop_types7.number, import_prop_types7.string]).isRequired,
-  disabled: import_prop_types7.bool,
-  href: import_prop_types7.string,
-  isLoading: import_prop_types7.bool,
-  onClick: import_prop_types7.func,
-  startIcon: import_prop_types7.node,
-  style: (0, import_prop_types7.shape)({}),
-  subcopy: import_prop_types7.string,
-  type: (0, import_prop_types7.oneOf)(["button", "submit"])
+  className: import_prop_types6.string,
+  color: import_prop_types6.string,
+  copy: (0, import_prop_types6.oneOfType)([import_prop_types6.number, import_prop_types6.string]).isRequired,
+  disabled: import_prop_types6.bool,
+  href: import_prop_types6.string,
+  isLoading: import_prop_types6.bool,
+  onClick: import_prop_types6.func,
+  startIcon: import_prop_types6.node,
+  style: (0, import_prop_types6.shape)({}),
+  subcopy: import_prop_types6.string,
+  type: (0, import_prop_types6.oneOf)(["button", "submit"])
 };
 var OutlinedButton_default = import_react6.default.memo(OutlinedButton);
 
@@ -2496,7 +2454,7 @@ var RoundButton = ({
     chevronUp: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons_material2.KeyboardArrowUp, { fontSize: iconSize }),
     chevronDown: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons_material2.KeyboardArrowDown, { fontSize: iconSize }),
     close: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons_material2.Close, { fontSize: iconSize }),
-    delete: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons_material2.Delete, { fontSize: iconSize, fill: colors.grey650 }),
+    delete: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons_material2.Delete, { fontSize: iconSize, fill: colors.neutral800 }),
     done: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons_material2.Done, { fontSize: iconSize }),
     edit: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons_material2.Edit, { fontSize: iconSize }),
     email: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons_material2.Email, { fontSize: iconSize }),
@@ -2612,7 +2570,7 @@ var defaultTheme = (0, import_styles.createTheme)({
     mode: isDarkModeEnabled3 ? "dark" : "light",
     default: {
       main: colors.grey650,
-      background: colors.white
+      background: colors.neutral100
     },
     primary: {
       main: colors.muiPrimary,
@@ -2789,55 +2747,156 @@ var DeleteUserDialogContent = ({
 };
 var DeleteUserDialogContent_default = import_react53.default.memo(DeleteUserDialogContent);
 
-// src/components/DesktopContainer/DesktopContainer.tsx
-var import_material15 = require("@mui/material");
-var import_mui16 = require("tss-react/mui");
-
-// src/components/TheToolbar/TheToolbar.tsx
-var import_react58 = __toESM(require("react"), 1);
+// src/components/Dialog/TwoButtonDialog.tsx
 var import_material14 = require("@mui/material");
+var import_Fade = __toESM(require("@mui/material/Fade"), 1);
 var import_mui15 = require("tss-react/mui");
 
+// src/components/Loading/Loading.tsx
+var import_material13 = require("@mui/material");
+var import_mui14 = require("tss-react/mui");
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var useStyles13 = (0, import_mui14.makeStyles)()(() => ({
+  wrapper: {
+    /**
+     * MUI Dialogs have z-index = 1300
+     */
+    zIndex: 1301,
+    backgroundColor: isDarkModeEnabled3 ? "rgba(0, 0, 0, 0.5)" : "rgba(255, 255, 255, 0.8)"
+  }
+}));
+var Loading = ({ isLoading = false }) => {
+  const { classes } = useStyles13();
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    import_material13.Backdrop,
+    {
+      "aria-hidden": !isLoading,
+      className: classes.wrapper,
+      open: isLoading,
+      "data-testid": "backdrop-loading",
+      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_material13.CircularProgress, { color: "primary" })
+    }
+  );
+};
+var Loading_default = Loading;
+
+// src/components/Dialog/TwoButtonDialog.tsx
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var useStyles14 = (0, import_mui15.makeStyles)()((theme) => ({
+  paper: {
+    padding: theme.spacing(2)
+  },
+  mt: {
+    marginTop: theme.spacing(2)
+  },
+  mb: {
+    marginBottom: theme.spacing(2)
+  },
+  buttonContainer: {
+    display: "flex",
+    justifyContent: "center",
+    marginTop: theme.spacing(1)
+  }
+}));
+var TwoButtonDialog = ({
+  confirmButton,
+  dialogLoading = false,
+  title,
+  subtitle1,
+  subtitle2,
+  open,
+  setOpen
+}) => {
+  const { classes } = useStyles14();
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    import_material14.Dialog,
+    {
+      open,
+      disableEnforceFocus: true,
+      maxWidth: "sm",
+      fullWidth: true,
+      closeAfterTransition: true,
+      BackdropComponent: import_material14.Backdrop,
+      BackdropProps: {
+        timeout: 500
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_Fade.default, { in: open, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_material14.Paper, { className: classes.paper, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_material14.Box, { className: classes.mb, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_material14.Typography, { variant: "h5", component: "div", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            import_material14.Box,
+            {
+              sx: {
+                fontWeight: 600
+              },
+              children: title
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+            import_material14.Box,
+            {
+              className: classes.mt,
+              sx: {
+                fontWeight: 600
+              },
+              children: [
+                subtitle1 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_material14.Typography, { variant: "subtitle1", children: subtitle1 }),
+                subtitle2 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_material14.Typography, { variant: "subtitle1", children: subtitle2 })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_material14.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_material14.Box, { className: classes.buttonContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(FilledButton_default, { copy: "CANCEL", onClick: () => setOpen(false) }),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            FilledButton_default,
+            {
+              color: "primary",
+              copy: "CONFIRM",
+              onClick: confirmButton
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Loading_default, { isLoading: dialogLoading })
+      ] }) })
+    }
+  );
+};
+var TwoButtonDialog_default = TwoButtonDialog;
+
 // src/components/LeftDrawer/LeftDrawer.tsx
 var import_react57 = __toESM(require("react"), 1);
-var import_react_redux2 = require("react-redux");
 var import_icons_material3 = require("@mui/icons-material");
-var import_material13 = require("@mui/material");
+var import_material15 = require("@mui/material");
 var import_Icon = __toESM(require("@mui/material/Icon"), 1);
-var import_mui14 = require("tss-react/mui");
+var import_mui16 = require("tss-react/mui");
 
 // src/components/UserBust/UserBust.tsx
 var import_react55 = __toESM(require("react"), 1);
 var import_Typography = __toESM(require("@mui/material/Typography"), 1);
-var import_prop_types9 = __toESM(require("prop-types"), 1);
 
 // src/components/UserAvatar/UserAvatar.tsx
 var import_react54 = __toESM(require("react"), 1);
 var import_Avatar = __toESM(require("@mui/material/Avatar"), 1);
-var import_prop_types8 = __toESM(require("prop-types"), 1);
-var import_jsx_runtime62 = require("react/jsx-runtime");
-var UserAvatar = ({ src, width, height }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_Avatar.default, { alt: "user_avatar", src, style: { width, height } });
+var import_prop_types7 = __toESM(require("prop-types"), 1);
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var UserAvatar = ({ src, width, height }) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_Avatar.default, { alt: "user_avatar", src, style: { width, height } });
 UserAvatar.propTypes = {
-  src: import_prop_types8.default.any,
-  width: import_prop_types8.default.any,
-  height: import_prop_types8.default.any
+  src: import_prop_types7.default.any,
+  width: import_prop_types7.default.any,
+  height: import_prop_types7.default.any
 };
 var UserAvatar_default = import_react54.default.memo(UserAvatar);
 
 // src/components/UserBust/UserBust.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
-var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(UserAvatar_default, { src: user.profile_picture, ...avatarProps }),
-  /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { style: { paddingTop: 16 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_Typography.default, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_Typography.default, { ...typographyProps.username, children: user.username })
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(UserAvatar_default, { ...avatarProps, src: user.profile_picture }),
+  /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { style: { paddingTop: 16 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_Typography.default, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_Typography.default, { ...typographyProps.username, children: user.username })
   ] })
 ] });
-UserBust.propTypes = {
-  user: import_prop_types9.default.any,
-  avatarProps: import_prop_types9.default.any,
-  typographyProps: import_prop_types9.default.any
-};
 var UserBust_default = import_react55.default.memo(UserBust);
 
 // src/components/LeftDrawer/helpers/useGetFilteredDrawerAppList.tsx
@@ -2880,7 +2939,7 @@ var featureName = {
 var featureName_default = featureName;
 
 // src/components/LeftDrawer/helpers/drawerAppList.js
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var drawerAppList = [
   {
     groupName: "Home",
@@ -2891,7 +2950,7 @@ var drawerAppList = [
         alwaysDisplay: true,
         featureNames: [],
         pinned: null,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconHome, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconHome, {}),
         url: `/#/`
       }
     ]
@@ -2905,7 +2964,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.NOTIFICATIONS],
         pinned: null,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconNotification, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconNotification, {}),
         url: `/#/notifications`
       },
       {
@@ -2914,7 +2973,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.PROMO_CODES],
         pinned: null,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconPromoCode, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconPromoCode, {}),
         url: "/react/promo_codes"
       },
       {
@@ -2923,16 +2982,16 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.SEARCH_CATEGORIES],
         pinned: null,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconSearchCategories, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconSearchCategories, {}),
         url: "/react/search-categories"
       },
       {
         name: "Content Management",
         routeName: "content-management",
         alwaysDisplay: false,
-        featureNames: ["cms"],
+        featureNames: [featureName_default.CONTENT_MANAGEMENT],
         pinned: null,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconContentManagement, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconContentManagement, {}),
         url: "/react/content-management"
       }
     ]
@@ -2946,7 +3005,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.AIRCALL],
         pinned: "recorded_calls",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconPhone, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconPhone, {}),
         url: "/react/air-call"
       },
       {
@@ -2955,7 +3014,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.CUSTOMERS],
         pinned: "customers",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconAccount, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconAccount, {}),
         url: `/#/customer-list`,
         children: [
           {
@@ -2978,7 +3037,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.ORDERS],
         pinned: "orders",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconOrders, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconOrders, {}),
         url: `/#/orders`
       },
       {
@@ -2987,7 +3046,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.PRICE_LIST],
         pinned: "price_list",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconPriceList, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconPriceList, {}),
         url: `/#/price-list`
       },
       {
@@ -2996,7 +3055,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.SPECIAL_PRICES],
         pinned: "special_prices",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconSpecialPrice, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconSpecialPrice, {}),
         url: `/#/pricing/special-prices`
       }
     ]
@@ -3010,7 +3069,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.PURCHASE_ORDERS],
         pinned: "purchase_orders",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconBuying, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconBuying, {}),
         url: "/react/purchase-orders"
       },
       {
@@ -3019,7 +3078,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.PRODUCTS],
         pinned: "products",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconProducts, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconProducts, {}),
         url: `/#/product-base-list`
       },
       {
@@ -3028,7 +3087,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.SUPPLIERS],
         pinned: "suppliers",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconSupplier, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconSupplier, {}),
         url: "/react/suppliers"
       },
       {
@@ -3037,7 +3096,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.SUPPLIER_PRICES],
         pinned: "supplier_prices",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconSupplierPrices, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconSupplierPrices, {}),
         url: `/#/supplier-prices`
       },
       {
@@ -3046,7 +3105,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.BULK_UPDATE],
         pinned: "bulk-update",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconImport, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconImport, {}),
         url: "/react/bulk_update"
       }
     ]
@@ -3060,7 +3119,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.GOODS_IN],
         pinned: "goods_in",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconGoodsin, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconGoodsin, {}),
         url: "/react/goodsin-list"
       },
       {
@@ -3069,7 +3128,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.RETURNS],
         pinned: "goods_in",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconGoodsin, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconGoodsin, {}),
         url: "/react/returns"
       },
       {
@@ -3077,8 +3136,8 @@ var drawerAppList = [
         routeName: "kanban",
         alwaysDisplay: false,
         featureNames: [featureName_default.KANBAN],
-        pinned: "kanbancards",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconVkc, {}),
+        pinned: "kanban_cards",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconVkc, {}),
         url: `/#/kanban`
       },
       {
@@ -3090,7 +3149,7 @@ var drawerAppList = [
             featureName: featureName_default.STOCK_MOVEMENTS
           }
         ],
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconLocation, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconLocation, {}),
         name: "Stock and Locations",
         pinned: "locations",
         routeName: "locations",
@@ -3104,7 +3163,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.PICKING_STATIONS],
         pinned: "picking_stations",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconScales, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconScales, {}),
         url: `/#/pickingstation`
       },
       {
@@ -3113,7 +3172,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.QUALITY_CONTROL],
         pinned: "quality_control",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconQc, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconQc, {}),
         url: `/#/quality-control`
       },
       {
@@ -3122,7 +3181,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.RETAIL],
         pinned: "retail",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconRetail, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconRetail, {}),
         url: `/retail/product-availability`
       },
       {
@@ -3131,7 +3190,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.SERVICE_DELIVERY],
         pinned: "runs",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconRuns, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconRuns, {}),
         url: `/#/runs`
       },
       {
@@ -3140,7 +3199,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.OPS_METRICS],
         pinned: "ops-metrics",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconOpsMetrics, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconOpsMetrics, {}),
         url: "/react/ops-metrics"
       }
     ]
@@ -3154,7 +3213,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.ACCOUNTS],
         pinned: "accounts",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconAccounts, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconAccounts, {}),
         url: `/#/accounts`
       },
       {
@@ -3163,7 +3222,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.REPORTS],
         pinned: "reports",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconReports, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconReports, {}),
         url: `/reports`
       }
     ]
@@ -3177,7 +3236,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.ADMIN],
         pinned: "admin",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconSetting, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconSetting, {}),
         url: `/admin`
       },
       {
@@ -3186,7 +3245,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.USER_MANAGEMENT],
         pinned: "users",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconUserManagement, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconUserManagement, {}),
         url: "/react/user-management"
       },
       {
@@ -3195,7 +3254,7 @@ var drawerAppList = [
         alwaysDisplay: true,
         featureNames: [],
         pinned: null,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(icons_default.SvgIconLogin, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(icons_default.SvgIconLogin, {}),
         url: "/react/logout"
       }
     ]
@@ -3255,8 +3314,8 @@ var useGetFilteredDrawerAppList = () => {
 var useGetFilteredDrawerAppList_default = useGetFilteredDrawerAppList;
 
 // src/components/LeftDrawer/LeftDrawer.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
-var useStyles13 = (0, import_mui14.makeStyles)()((theme) => ({
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var useStyles15 = (0, import_mui16.makeStyles)()((theme) => ({
   subheader: {
     textTransform: "uppercase",
     fontSize: theme.spacing(1.5)
@@ -3312,9 +3371,14 @@ var useStyles13 = (0, import_mui14.makeStyles)()((theme) => ({
     }
   }
 }));
-var LeftDrawer = ({ handleClose, handleOpen, open }) => {
+var LeftDrawer = ({
+  handleClose,
+  handleOpen,
+  onLogout,
+  open,
+  user
+}) => {
   const [openCollapse, setOpenCollapse] = (0, import_react57.useState)({});
-  const dispatch = (0, import_react_redux2.useDispatch)();
   const filteredDrawerAppList = useGetFilteredDrawerAppList_default();
   const handleCollapse = (e, routeName) => {
     e.stopPropagation();
@@ -3322,9 +3386,9 @@ var LeftDrawer = ({ handleClose, handleOpen, open }) => {
     tempOpenCollapse[routeName] = !tempOpenCollapse[routeName];
     setOpenCollapse(tempOpenCollapse);
   };
-  const { classes } = useStyles13();
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
-    import_material13.SwipeableDrawer,
+  const { classes } = useStyles15();
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+    import_material15.SwipeableDrawer,
     {
       className: classes.drawer,
       id: "primary-menu",
@@ -3332,19 +3396,19 @@ var LeftDrawer = ({ handleClose, handleOpen, open }) => {
       onOpen: handleOpen,
       open,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_material13.AppBar, { position: "static", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_material13.Toolbar, { className: classes.topBar, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_material15.AppBar, { position: "static", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_material15.Toolbar, { className: classes.topBar, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
             UserBust_default,
             {
-              user: {},
+              user,
               avatarProps: { height: 50, width: 50 },
               typographyProps: {
-                name: { variant: "subtitle1" },
-                username: { variant: "caption" }
+                name: { variant: "subtitle1", component: "div" },
+                username: { variant: "caption", component: "div" }
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_material13.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_material15.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
             RoundButton_default,
             {
               icon: "edit",
@@ -3355,73 +3419,71 @@ var LeftDrawer = ({ handleClose, handleOpen, open }) => {
             }
           ) })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_material13.List, { children: filteredDrawerAppList.map((group) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_react57.default.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_material13.ListSubheader, { disableSticky: true, className: classes.subheader, children: group.groupName }),
-          group.apps.map((app) => {
-            var _a, _b;
-            return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_react57.default.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
-                import_material13.ListItem,
-                {
-                  title: app.url,
-                  onClick: () => {
-                    if (app.routeName === "logout") {
-                    }
-                    return window.location.assign(app.url);
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_material13.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_Icon.default, { className: classes.iconMenu, children: app.icon }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-                      import_material13.ListItemText,
-                      {
-                        className: classes.appName,
-                        primary: app.name,
-                        slotProps: {
-                          primary: { variant: "body2" }
-                        }
-                      }
-                    ),
-                    ((_a = app.children) == null ? void 0 : _a.length) > 0 && (openCollapse[app.routeName] ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-                      import_icons_material3.ExpandLess,
-                      {
-                        "data-testid": "svg-close-collapse",
-                        onClick: (e) => handleCollapse(e, app.routeName)
-                      }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-                      import_icons_material3.ExpandMore,
-                      {
-                        "data-testid": "svg-open-collapse",
-                        onClick: (e) => handleCollapse(e, app.routeName)
-                      }
-                    ))
-                  ]
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_material15.List, { children: filteredDrawerAppList.map((group) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_react57.default.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_material15.ListSubheader, { disableSticky: true, className: classes.subheader, children: group.groupName }),
+          group.apps.map((app) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_react57.default.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+              import_material15.ListItem,
+              {
+                title: app.url,
+                onClick: () => {
+                  if (app.routeName === "logout") {
+                    return onLogout();
+                  }
+                  return window.location.assign(app.url);
                 },
-                app.name
-              ),
-              ((_b = app.children) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_material13.Collapse, { in: openCollapse[app.routeName], children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_material13.List, { children: app.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
-                import_material13.ListItemButton,
-                {
-                  className: classes.nested,
-                  disabled: child.disabled,
-                  onClick: () => window.location.assign(app.url),
-                  title: app.url,
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_material13.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_icons_material3.FiberManualRecord, { style: { height: 12 } }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-                      import_material13.ListItemText,
-                      {
-                        primary: child.name,
-                        slotProps: {
-                          primary: { variant: "body2" }
-                        }
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_material15.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_Icon.default, { className: classes.iconMenu, children: app.icon }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+                    import_material15.ListItemText,
+                    {
+                      className: classes.appName,
+                      primary: app.name,
+                      slotProps: {
+                        primary: { variant: "body2" }
                       }
-                    )
-                  ]
-                },
-                child.name
-              )) }) })
-            ] }, `${group.groupName} ${app.name}`);
-          })
+                    }
+                  ),
+                  app.children?.length > 0 && (openCollapse[app.routeName] ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+                    import_icons_material3.ExpandLess,
+                    {
+                      "data-testid": "svg-close-collapse",
+                      onClick: (e) => handleCollapse(e, app.routeName)
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+                    import_icons_material3.ExpandMore,
+                    {
+                      "data-testid": "svg-open-collapse",
+                      onClick: (e) => handleCollapse(e, app.routeName)
+                    }
+                  ))
+                ]
+              },
+              app.name
+            ),
+            app.children?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_material15.Collapse, { in: openCollapse[app.routeName], children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_material15.List, { children: app.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+              import_material15.ListItemButton,
+              {
+                className: classes.nested,
+                disabled: child.disabled,
+                onClick: () => window.location.assign(app.url),
+                title: app.url,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_material15.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_icons_material3.FiberManualRecord, { style: { height: 12 } }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+                    import_material15.ListItemText,
+                    {
+                      primary: child.name,
+                      slotProps: {
+                        primary: { variant: "body2" }
+                      }
+                    }
+                  )
+                ]
+              },
+              child.name
+            )) }) })
+          ] }, `${group.groupName} ${app.name}`))
         ] }, group.groupName)) })
       ]
     }
@@ -3429,295 +3491,55 @@ var LeftDrawer = ({ handleClose, handleOpen, open }) => {
 };
 var LeftDrawer_default = (0, import_react57.memo)(LeftDrawer);
 
-// src/components/TheToolbar/TheToolbar.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
-var useStyles14 = (0, import_mui15.makeStyles)()((theme) => ({
-  menuButton: {
-    color: theme.palette.primary.contrastText
-  },
-  searchNatoora: {
-    width: "100%"
-  },
-  searchIcon: {
-    opacity: ".5"
-  },
-  inputRoot: {
-    color: "inherit"
-  },
-  inputInput: {
-    transition: theme.transitions.create("width"),
-    width: "100%"
-  },
-  topBar: {
-    display: "flex",
-    gap: theme.spacing(1),
-    backgroundColor: colors.topBar
-  },
-  drawer: {
-    backgroundColor: "black"
-  },
-  drawerItem: {
-    maxWidth: "300px",
-    width: "80vw"
-  },
-  offset: theme.mixins.toolbar
-}));
-var TheToolbar = ({ imageLogoDarkSmall, imageLogoLightSmall }) => {
-  const { classes } = useStyles14();
-  const [open, setOpen] = import_react58.default.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_material14.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_material14.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_material14.Toolbar, { className: classes.topBar, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-        RoundButton_default,
-        {
-          className: classes.menuButton,
-          icon: "menu",
-          noStrokes: true,
-          onClick: handleOpen
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-        CompanyLogo_default,
-        {
-          size: "small",
-          color: "light",
-          imageLogoDarkSmall,
-          imageLogoLightSmall
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_material14.Box, { className: classes.offset }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-      LeftDrawer_default,
-      {
-        open,
-        handleOpen,
-        handleClose
-      }
-    )
-  ] });
-};
-var TheToolbar_default = import_react58.default.memo(TheToolbar);
-
-// src/components/DesktopContainer/DesktopContainer.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
-var useStyles15 = (0, import_mui16.makeStyles)()((theme) => ({
+// src/components/Pagination/PaginationForTable.tsx
+var import_Pagination = __toESM(require("@mui/material/Pagination"), 1);
+var import_Paper = __toESM(require("@mui/material/Paper"), 1);
+var import_Typography2 = __toESM(require("@mui/material/Typography"), 1);
+var import_mui17 = require("tss-react/mui");
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var paginationHeight = "56px";
+var useStyles16 = (0, import_mui17.makeStyles)()((theme) => ({
   root: {
     display: "flex",
-    flexDirection: "column",
-    minHeight: "100vh",
-    maxWidth: 1420,
-    padding: 0
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    borderTop: `1px solid ${colors.grey200}`,
+    backgroundColor: colors.tableRow2,
+    borderRadius: "0 0 4px 4px",
+    width: "100%",
+    height: paginationHeight,
+    "& > *": {
+      margin: theme.spacing(2)
+    },
+    "& .MuiTypography-body1": {
+      fontSize: ".850rem"
+    }
   },
-  content: {
-    height: "100%",
-    flexGrow: 1
+  fixed: {
+    position: "fixed",
+    bottom: 0,
+    left: 0
   },
-  [theme.breakpoints.up("xl")]: {
-    root: {
-      maxWidth: 1720
-    }
+  fixedOffset: {
+    height: paginationHeight
   }
 }));
-var DesktopContainer = ({
-  imageLogoDarkSmall,
-  imageLogoLightSmall,
-  children
+var PaginationForTable = ({
+  appliedFilters,
+  className,
+  page,
+  pagination,
+  position = "relative",
+  style,
+  updateFilters
 }) => {
-  const { classes } = useStyles15();
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_material15.Container, { className: classes.root, maxWidth: "xl", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-      TheToolbar_default,
-      {
-        imageLogoDarkSmall,
-        imageLogoLightSmall
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-      import_material15.Box,
-      {
-        className: classes.content,
-        id: "mainContainer",
-        sx: {
-          display: "flex",
-          flexDirection: "column"
-        },
-        children
-      }
-    )
-  ] });
-};
-var DesktopContainer_default = DesktopContainer;
-
-// src/components/Dialog/TwoButtonDialog.tsx
-var import_material17 = require("@mui/material");
-var import_Fade = __toESM(require("@mui/material/Fade"), 1);
-var import_mui18 = require("tss-react/mui");
-
-// src/components/Loading/Loading.tsx
-var import_material16 = require("@mui/material");
-var import_mui17 = require("tss-react/mui");
-var import_jsx_runtime68 = require("react/jsx-runtime");
-var useStyles16 = (0, import_mui17.makeStyles)()(() => ({
-  wrapper: {
-    /**
-     * MUI Dialogs have z-index = 1300
-     */
-    zIndex: 1301,
-    backgroundColor: isDarkModeEnabled3 ? "rgba(0, 0, 0, 0.5)" : "rgba(255, 255, 255, 0.8)"
-  }
-}));
-var Loading = ({ isLoading }) => {
-  const { classes } = useStyles16();
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-    import_material16.Backdrop,
-    {
-      "aria-hidden": !isLoading,
-      className: classes.wrapper,
-      open: isLoading,
-      "data-testid": "backdrop-loading",
-      children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_material16.CircularProgress, { color: "primary" })
-    }
-  );
-};
-var Loading_default = Loading;
-
-// src/components/Dialog/TwoButtonDialog.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
-var useStyles17 = (0, import_mui18.makeStyles)()((theme) => ({
-  paper: {
-    padding: theme.spacing(2)
-  },
-  mt: {
-    marginTop: theme.spacing(2)
-  },
-  mb: {
-    marginBottom: theme.spacing(2)
-  },
-  buttonContainer: {
-    display: "flex",
-    justifyContent: "center",
-    marginTop: theme.spacing(1)
-  }
-}));
-var TwoButtonDialog = ({
-  confirmButton,
-  dialogLoading = false,
-  title,
-  subtitle1,
-  subtitle2,
-  open,
-  setOpen
-}) => {
-  const { classes } = useStyles17();
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-    import_material17.Dialog,
-    {
-      open,
-      disableEnforceFocus: true,
-      maxWidth: "sm",
-      fullWidth: true,
-      closeAfterTransition: true,
-      BackdropComponent: import_material17.Backdrop,
-      BackdropProps: {
-        timeout: 500
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_Fade.default, { in: open, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_material17.Paper, { className: classes.paper, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_material17.Box, { className: classes.mb, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_material17.Typography, { variant: "h5", component: "div", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-            import_material17.Box,
-            {
-              sx: {
-                fontWeight: 600
-              },
-              children: title
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
-            import_material17.Box,
-            {
-              className: classes.mt,
-              sx: {
-                fontWeight: 600
-              },
-              children: [
-                subtitle1 && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_material17.Typography, { variant: "subtitle1", children: subtitle1 }),
-                subtitle2 && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_material17.Typography, { variant: "subtitle1", children: subtitle2 })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_material17.Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_material17.Box, { className: classes.buttonContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(FilledButton_default, { copy: "CANCEL", onClick: () => setOpen(false) }),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-            FilledButton_default,
-            {
-              color: "primary",
-              copy: "CONFIRM",
-              onClick: confirmButton
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Loading_default, { isLoading: dialogLoading })
-      ] }) })
-    }
-  );
-};
-var TwoButtonDialog_default = TwoButtonDialog;
-
-// src/components/Pagination/PaginationForTable.tsx
-var import_Pagination = __toESM(require("@mui/material/Pagination"), 1);
-var import_Paper = __toESM(require("@mui/material/Paper"), 1);
-var import_Typography2 = __toESM(require("@mui/material/Typography"), 1);
-var import_prop_types10 = require("prop-types");
-var import_mui19 = require("tss-react/mui");
-var import_jsx_runtime70 = require("react/jsx-runtime");
-var paginationHeight = "56px";
-var useStyles18 = (0, import_mui19.makeStyles)()((theme) => ({
-  root: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "flex-end",
-    alignItems: "center",
-    borderTop: `1px solid ${colors.grey200}`,
-    backgroundColor: colors.tableRow2,
-    borderRadius: "0 0 4px 4px",
-    width: "100%",
-    height: paginationHeight,
-    "& > *": {
-      margin: theme.spacing(2)
-    },
-    "& .MuiTypography-body1": {
-      fontSize: ".850rem"
-    }
-  },
-  fixed: {
-    position: "fixed",
-    bottom: 0,
-    left: 0
-  },
-  fixedOffset: {
-    height: paginationHeight
-  }
-}));
-var PaginationForTable = ({
-  appliedFilters,
-  className,
-  page,
-  pagination,
-  position = "relative",
-  style,
-  updateFilters
-}) => {
-  const { classes, cx } = useStyles18();
+  const { classes, cx } = useStyles16();
   const handleChange = (event, value) => {
     updateFilters({ ...appliedFilters, page: value });
   };
   const isFixed = position === "fixed";
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_Paper.default, { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_Paper.default, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "div",
     {
       style,
@@ -3725,11 +3547,11 @@ var PaginationForTable = ({
         [classes.fixed]: isFixed
       }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_Typography2.default, { variant: "body1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_Typography2.default, { variant: "body1", children: [
           "Page: ",
           page
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           import_Pagination.default,
           {
             count: pagination.num_pages,
@@ -3741,41 +3563,29 @@ var PaginationForTable = ({
     }
   ) });
 };
-PaginationForTable.defaultProps = {
-  className: ""
-};
-PaginationForTable.propTypes = {
-  appliedFilters: import_prop_types10.any,
-  className: import_prop_types10.string,
-  page: import_prop_types10.any,
-  pagination: import_prop_types10.object,
-  position: (0, import_prop_types10.oneOf)(["relative", "fixed"]),
-  style: import_prop_types10.any,
-  updateFilters: import_prop_types10.func.isRequired
-};
 var PaginationForTable_default = PaginationForTable;
 
 // src/components/ProductImage/ProductImage.tsx
-var import_material18 = require("@mui/material");
-var import_prop_types11 = require("prop-types");
-var import_mui20 = require("tss-react/mui");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_material16 = require("@mui/material");
+var import_prop_types8 = require("prop-types");
+var import_mui18 = require("tss-react/mui");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var PImage = ({
   classes,
   image,
   size = "c_productbust__image_xs",
   status
-}) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: classes.c_productbust__image, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-    import_material18.CardMedia,
+}) => /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: classes.c_productbust__image, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    import_material16.CardMedia,
     {
       className: classes[size],
       image: image || "resources/img/peas.jpg"
     }
   ),
-  status && status !== "ACTIVE" && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: classes.c_productbust__label_status, children: status })
+  status && status !== "ACTIVE" && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: classes.c_productbust__label_status, children: status })
 ] });
-var ProductImage = (0, import_mui20.withStyles)(PImage, (theme) => ({
+var ProductImage = (0, import_mui18.withStyles)(PImage, (theme) => ({
   c_productbust__label_status: {
     position: "absolute",
     color: "white",
@@ -3853,25 +3663,25 @@ var ProductImage = (0, import_mui20.withStyles)(PImage, (theme) => ({
   }
 }));
 PImage.propTypes = {
-  classes: import_prop_types11.any,
-  image: import_prop_types11.string,
-  size: import_prop_types11.string,
-  status: import_prop_types11.any
+  classes: import_prop_types8.any,
+  image: import_prop_types8.string,
+  size: import_prop_types8.string,
+  status: import_prop_types8.any
 };
 var ProductImage_default = ProductImage;
 
 // src/components/RenderContentList/RenderContentList.tsx
-var import_react60 = require("react");
-var import_material19 = require("@mui/material");
-var import_mui21 = require("tss-react/mui");
+var import_react59 = require("react");
+var import_material17 = require("@mui/material");
+var import_mui19 = require("tss-react/mui");
 
 // src/utils/useGetActiveSection.ts
-var import_react59 = require("react");
+var import_react58 = require("react");
 var transformNameToID = (name) => name.replaceAll(" ", "-").toLocaleLowerCase();
 
 // src/components/RenderContentList/RenderContentList.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
-var useStyles19 = (0, import_mui21.makeStyles)()(
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var useStyles17 = (0, import_mui19.makeStyles)()(
   (_theme, _params, classes) => ({
     root: {
       [`&.${classes.selected}`]: {
@@ -3885,28 +3695,28 @@ var useStyles19 = (0, import_mui21.makeStyles)()(
   })
 );
 var RenderContentList = ({ items, activeSection }) => {
-  const { classes } = useStyles19();
-  const [active, setActive] = (0, import_react60.useState)(activeSection);
-  (0, import_react60.useEffect)(() => {
+  const { classes } = useStyles17();
+  const [active, setActive] = (0, import_react59.useState)(activeSection);
+  (0, import_react59.useEffect)(() => {
     setActive(activeSection);
   }, [activeSection]);
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-    import_material19.List,
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    import_material17.List,
     {
       component: "nav",
       "aria-labelledby": "nested-list-subheader",
-      subheader: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_material19.ListSubheader, { component: "div", id: "nested-list-subheader", children: "Contents" }),
+      subheader: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_material17.ListSubheader, { component: "div", id: "nested-list-subheader", children: "Contents" }),
       children: items.map((item) => {
         const id = transformNameToID(item);
-        return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-          import_material19.ListItemButton,
+        return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+          import_material17.ListItemButton,
           {
             component: "a",
             href: `#${id}`,
             onClick: () => setActive(item),
             selected: active === item,
             classes: { root: classes.root },
-            children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_material19.ListItemText, { primary: item })
+            children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_material17.ListItemText, { primary: item })
           },
           id
         );
@@ -3917,11 +3727,11 @@ var RenderContentList = ({ items, activeSection }) => {
 var RenderContentList_default = RenderContentList;
 
 // src/components/RowProductCard/RowProductCard.tsx
-var import_material20 = require("@mui/material");
-var import_mui22 = require("tss-react/mui");
-var import_prop_types12 = require("prop-types");
-var import_jsx_runtime73 = require("react/jsx-runtime");
-var useStyles20 = (0, import_mui22.makeStyles)()((theme) => ({
+var import_material18 = require("@mui/material");
+var import_mui20 = require("tss-react/mui");
+var import_prop_types9 = require("prop-types");
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var useStyles18 = (0, import_mui20.makeStyles)()((theme) => ({
   wrapper: {
     display: "flex",
     gap: theme.spacing(2),
@@ -3946,15 +3756,15 @@ var useStyles20 = (0, import_mui22.makeStyles)()((theme) => ({
   }
 }));
 var RowProductCard = ({ children, columns, location, product, size }) => {
-  const { classes, cx } = useStyles20();
+  const { classes, cx } = useStyles18();
   const hasColumns = columns.length >= 1;
   const imageSize = {
     small: "c_productbust__image_sm",
     medium: "c_productbust__image_md",
     large: "c_productbust__image_lg"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_material20.Paper, { className: classes.wrapper, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_material18.Paper, { className: classes.wrapper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       ProductImage_default,
       {
         image: product.image,
@@ -3962,15 +3772,15 @@ var RowProductCard = ({ children, columns, location, product, size }) => {
         size: imageSize[size]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
       "div",
       {
         className: cx(classes.content, {
           [classes.onlyProductName]: !hasColumns && !location
         }),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
-            import_material20.Box,
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+            import_material18.Box,
             {
               className: classes.upperRow,
               sx: {
@@ -3979,26 +3789,26 @@ var RowProductCard = ({ children, columns, location, product, size }) => {
                 alignItems: "center"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { children: [
-                  location ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_material20.Typography, { className: classes.smallTitle, variant: "caption", children: `Location: ${location}` }) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_material20.Typography, { variant: "h6", children: product.name })
+                /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { children: [
+                  location ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_material18.Typography, { className: classes.smallTitle, variant: "caption", children: `Location: ${location}` }) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_material18.Typography, { variant: "h6", children: product.name })
                 ] }),
                 children
               ]
             }
           ),
-          hasColumns ? /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_material20.Divider, { className: classes.divider }),
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
-              import_material20.Box,
+          hasColumns ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_material18.Divider, { className: classes.divider }),
+            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+              import_material18.Box,
               {
                 sx: {
                   display: "flex",
                   gap: "24px"
                 },
-                children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_material20.Typography, { className: classes.smallTitle, variant: "caption", children: column.title }),
-                  typeof column.value === "string" ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_material20.Typography, { variant: "body1", children: column.value }) : column.value
+                children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_material18.Typography, { className: classes.smallTitle, variant: "caption", children: column.title }),
+                  typeof column.value === "string" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_material18.Typography, { variant: "body1", children: column.value }) : column.value
                 ] }, column.title))
               }
             )
@@ -4018,48 +3828,48 @@ RowProductCard.propTypes = {
   /**
    * Possible actions or buttons that the card can have
    */
-  children: import_prop_types12.node,
+  children: import_prop_types9.node,
   /**
    * Details about the product
    */
-  columns: (0, import_prop_types12.arrayOf)(
-    (0, import_prop_types12.shape)({
-      title: import_prop_types12.string,
-      value: (0, import_prop_types12.oneOfType)([import_prop_types12.string, import_prop_types12.node])
+  columns: (0, import_prop_types9.arrayOf)(
+    (0, import_prop_types9.shape)({
+      title: import_prop_types9.string,
+      value: (0, import_prop_types9.oneOfType)([import_prop_types9.string, import_prop_types9.node])
     })
   ),
   /**
    * Where is the product location
    */
-  location: import_prop_types12.string,
+  location: import_prop_types9.string,
   /**
    * Product information
    */
-  product: (0, import_prop_types12.shape)({
-    image: import_prop_types12.string.isRequired,
-    name: import_prop_types12.string.isRequired,
-    status: import_prop_types12.string
+  product: (0, import_prop_types9.shape)({
+    image: import_prop_types9.string.isRequired,
+    name: import_prop_types9.string.isRequired,
+    status: import_prop_types9.string
   }).isRequired,
-  size: (0, import_prop_types12.oneOf)(["small", "medium", "large"])
+  size: (0, import_prop_types9.oneOf)(["small", "medium", "large"])
 };
 var RowProductCard_default = RowProductCard;
 
 // src/components/SearchAndFilterHeader/SearchAndFilterHeaderForTable.tsx
-var import_react62 = __toESM(require("react"), 1);
+var import_react61 = __toESM(require("react"), 1);
 var import_Box = __toESM(require("@mui/material/Box"), 1);
-var import_prop_types14 = __toESM(require("prop-types"), 1);
-var import_mui24 = require("tss-react/mui");
+var import_prop_types11 = __toESM(require("prop-types"), 1);
+var import_mui22 = require("tss-react/mui");
 
 // src/components/SearchWithFilters/SearchWithFiltersForTable.tsx
-var import_react61 = __toESM(require("react"), 1);
+var import_react60 = __toESM(require("react"), 1);
 var import_ArrowDropDown = __toESM(require("@mui/icons-material/ArrowDropDown"), 1);
 var import_ArrowDropUp = __toESM(require("@mui/icons-material/ArrowDropUp"), 1);
 var import_Search = __toESM(require("@mui/icons-material/Search"), 1);
-var import_material21 = require("@mui/material");
-var import_prop_types13 = __toESM(require("prop-types"), 1);
-var import_mui23 = require("tss-react/mui");
-var import_jsx_runtime74 = require("react/jsx-runtime");
-var useStyles21 = (0, import_mui23.makeStyles)()((theme) => ({
+var import_material19 = require("@mui/material");
+var import_prop_types10 = __toESM(require("prop-types"), 1);
+var import_mui21 = require("tss-react/mui");
+var import_jsx_runtime72 = require("react/jsx-runtime");
+var useStyles19 = (0, import_mui21.makeStyles)()((theme) => ({
   c_search: {
     height: 46,
     padding: "4px",
@@ -4117,8 +3927,8 @@ var SearchWithFiltersForTable = (props) => {
     enterPressedInSearch,
     searchedValue
   } = props;
-  const { classes } = useStyles21();
-  const [searchText, setSearchText] = import_react61.default.useState("");
+  const { classes } = useStyles19();
+  const [searchText, setSearchText] = import_react60.default.useState("");
   const handleTextChange = (e) => {
     const { value } = e.target;
     setSearchText(value);
@@ -4133,10 +3943,10 @@ var SearchWithFiltersForTable = (props) => {
     }
   };
   const ArrowIcon = isOpen ? import_ArrowDropUp.default : import_ArrowDropDown.default;
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_material21.Paper, { className: classes.c_search, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_material21.Box, { className: classes.c_search__icon, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_Search.default, { className: classes.icon, fontSize: "small" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-      import_material21.InputBase,
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_material19.Paper, { className: classes.c_search, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_material19.Box, { className: classes.c_search__icon, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_Search.default, { className: classes.icon, fontSize: "small" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      import_material19.InputBase,
       {
         className: classes.c_search__input,
         placeholder: "Search",
@@ -4145,22 +3955,22 @@ var SearchWithFiltersForTable = (props) => {
         onKeyDown: handleKeyPress
       }
     ),
-    showFilterButton && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-        import_material21.Divider,
+    showFilterButton && /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        import_material19.Divider,
         {
           className: classes.c_search__divider,
           orientation: "vertical"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-        import_material21.Button,
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+        import_material19.Button,
         {
           className: classes.c_search__bt_filter,
           onClick: handleFilterButtonClick,
           children: [
             "Filters",
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ArrowIcon, { className: classes.c_search__bt_icon_filter })
+            /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ArrowIcon, { className: classes.c_search__bt_icon_filter })
           ]
         }
       )
@@ -4168,18 +3978,18 @@ var SearchWithFiltersForTable = (props) => {
   ] });
 };
 SearchWithFiltersForTable.propTypes = {
-  onFilterButtonClick: import_prop_types13.default.func,
-  isOpen: import_prop_types13.default.bool,
-  updateSearch: import_prop_types13.default.func,
-  enterPressedInSearch: import_prop_types13.default.func,
-  showFilterButton: import_prop_types13.default.bool,
-  searchedValue: import_prop_types13.default.string
+  onFilterButtonClick: import_prop_types10.default.func,
+  isOpen: import_prop_types10.default.bool,
+  updateSearch: import_prop_types10.default.func,
+  enterPressedInSearch: import_prop_types10.default.func,
+  showFilterButton: import_prop_types10.default.bool,
+  searchedValue: import_prop_types10.default.string
 };
-var SearchWithFiltersForTable_default = import_react61.default.memo(SearchWithFiltersForTable);
+var SearchWithFiltersForTable_default = import_react60.default.memo(SearchWithFiltersForTable);
 
 // src/components/SearchAndFilterHeader/SearchAndFilterHeaderForTable.tsx
-var import_jsx_runtime75 = require("react/jsx-runtime");
-var useStyles22 = (0, import_mui24.makeStyles)()((theme) => ({
+var import_jsx_runtime73 = require("react/jsx-runtime");
+var useStyles20 = (0, import_mui22.makeStyles)()((theme) => ({
   container: {
     display: "flex",
     alignItems: "center",
@@ -4209,11 +4019,11 @@ var SearchAndFilterHeaderForTable = (props) => {
     button,
     searchedValue
   } = props;
-  const { classes } = useStyles22();
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_Box.default, { className: classes.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_Box.default, { className: classes.leftSection, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(AppLabel_default, { appName }),
-      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  const { classes } = useStyles20();
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_Box.default, { className: classes.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_Box.default, { className: classes.leftSection, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(AppLabel_default, { appName }),
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
         SearchWithFiltersForTable_default,
         {
           onFilterButtonClick,
@@ -4224,41 +4034,41 @@ var SearchAndFilterHeaderForTable = (props) => {
           searchedValue
         }
       ),
-      copy && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      copy && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
         import_Box.default,
         {
           sx: {
             margin: 0.5
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(OutlinedButton_default, { copy })
+          children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(OutlinedButton_default, { copy })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_Box.default, { children: button })
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_Box.default, { children: button })
   ] });
 };
 SearchAndFilterHeaderForTable.propTypes = {
-  appName: import_prop_types14.default.string,
-  button: import_prop_types14.default.node,
-  copy: import_prop_types14.default.string,
-  enterPressedInSearch: import_prop_types14.default.func,
-  isOpen: import_prop_types14.default.bool,
-  onFilterButtonClick: import_prop_types14.default.func,
-  searchedValue: import_prop_types14.default.string,
-  showFilterButton: import_prop_types14.default.bool,
-  updateSearch: import_prop_types14.default.func
+  appName: import_prop_types11.default.string,
+  button: import_prop_types11.default.node,
+  copy: import_prop_types11.default.string,
+  enterPressedInSearch: import_prop_types11.default.func,
+  isOpen: import_prop_types11.default.bool,
+  onFilterButtonClick: import_prop_types11.default.func,
+  searchedValue: import_prop_types11.default.string,
+  showFilterButton: import_prop_types11.default.bool,
+  updateSearch: import_prop_types11.default.func
 };
-var SearchAndFilterHeaderForTable_default = import_react62.default.memo(SearchAndFilterHeaderForTable);
+var SearchAndFilterHeaderForTable_default = import_react61.default.memo(SearchAndFilterHeaderForTable);
 
 // src/components/SearchWithFilters/SearchWithFilters.tsx
-var import_react63 = __toESM(require("react"), 1);
+var import_react62 = __toESM(require("react"), 1);
 var import_ArrowDropDown2 = __toESM(require("@mui/icons-material/ArrowDropDown"), 1);
 var import_ArrowDropUp2 = __toESM(require("@mui/icons-material/ArrowDropUp"), 1);
 var import_Search2 = __toESM(require("@mui/icons-material/Search"), 1);
-var import_material22 = require("@mui/material");
-var import_mui25 = require("tss-react/mui");
-var import_jsx_runtime76 = require("react/jsx-runtime");
-var useStyles23 = (0, import_mui25.makeStyles)()((theme) => ({
+var import_material20 = require("@mui/material");
+var import_mui23 = require("tss-react/mui");
+var import_jsx_runtime74 = require("react/jsx-runtime");
+var useStyles21 = (0, import_mui23.makeStyles)()((theme) => ({
   searchContainer: {
     height: 46,
     padding: "4px",
@@ -4302,8 +4112,8 @@ var SearchWithFilters = ({
   },
   disabled = false
 }) => {
-  const [searchText, setSearchText] = (0, import_react63.useState)(searchValue);
-  const { classes } = useStyles23();
+  const [searchText, setSearchText] = (0, import_react62.useState)(searchValue);
+  const { classes } = useStyles21();
   const handleTextChange = (e) => {
     const { value } = e.target;
     setSearchText(value);
@@ -4311,16 +4121,16 @@ var SearchWithFilters = ({
   };
   const handleKeyDown = (e) => {
     if (e.key === "Enter") {
-      enterPressedInSearch == null ? void 0 : enterPressedInSearch();
+      enterPressedInSearch?.();
     }
   };
-  (0, import_react63.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     setSearchText(searchValue);
   }, [searchValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_material22.Paper, { className: classes.searchContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_Search2.default, { className: classes.icon, fontSize: "small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-      import_material22.InputBase,
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_material20.Paper, { className: classes.searchContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_Search2.default, { className: classes.icon, fontSize: "small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      import_material20.InputBase,
       {
         className: classes.input,
         placeholder: "Search",
@@ -4331,29 +4141,29 @@ var SearchWithFilters = ({
         inputProps: { "aria-label": "search" }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_material22.Divider, { className: classes.divider, orientation: "vertical" }),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
-      import_material22.Button,
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_material20.Divider, { className: classes.divider, orientation: "vertical" }),
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+      import_material20.Button,
       {
         className: classes.filterButton,
         onClick: filterClick,
         disabled,
         children: [
           "Filters",
-          showFilters ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_ArrowDropUp2.default, {}) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_ArrowDropDown2.default, {})
+          showFilters ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_ArrowDropUp2.default, {}) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_ArrowDropDown2.default, {})
         ]
       }
     )
   ] });
 };
-var SearchWithFilters_default = import_react63.default.memo(SearchWithFilters);
+var SearchWithFilters_default = import_react62.default.memo(SearchWithFilters);
 
 // src/components/SectionName/SectionName.tsx
 var import_Info = __toESM(require("@mui/icons-material/Info"), 1);
-var import_material23 = require("@mui/material");
-var import_mui26 = require("tss-react/mui");
-var import_jsx_runtime77 = require("react/jsx-runtime");
-var useStyles24 = (0, import_mui26.makeStyles)()(() => ({
+var import_material21 = require("@mui/material");
+var import_mui24 = require("tss-react/mui");
+var import_jsx_runtime75 = require("react/jsx-runtime");
+var useStyles22 = (0, import_mui24.makeStyles)()(() => ({
   container: {
     display: "flex",
     alignItems: "flex-end",
@@ -4387,11 +4197,11 @@ var SectionName = ({
   buttonText,
   buttonDisabled
 }) => {
-  const { classes } = useStyles24();
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_material23.Box, { className: classes.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_material23.Box, { className: classes.titleContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
-        import_material23.Typography,
+  const { classes } = useStyles22();
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_material21.Box, { className: classes.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_material21.Box, { className: classes.titleContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+        import_material21.Typography,
         {
           variant: "h5",
           component: "a",
@@ -4400,7 +4210,7 @@ var SectionName = ({
           children: name
         }
       ),
-      tooltipDescription ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_material23.Tooltip, { title: tooltipDescription, placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+      tooltipDescription ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_material21.Tooltip, { title: tooltipDescription, placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
         import_Info.default,
         {
           fontSize: "small",
@@ -4409,7 +4219,7 @@ var SectionName = ({
         }
       ) }) : null
     ] }),
-    buttonText ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+    buttonText ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
       ExtendedButton_default,
       {
         type: "add",
@@ -4427,14 +4237,14 @@ var SectionName = ({
 var SectionName_default = SectionName;
 
 // src/components/Shift/Shift.tsx
-var import_material24 = require("@mui/material");
-var import_prop_types15 = require("prop-types");
-var import_mui27 = require("tss-react/mui");
+var import_material22 = require("@mui/material");
+var import_prop_types12 = require("prop-types");
+var import_mui25 = require("tss-react/mui");
 
 // src/resources/icons/DayIcon.js
-var import_react64 = __toESM(require("react"), 1);
-var import_jsx_runtime78 = require("react/jsx-runtime");
-var DayIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+var import_react63 = __toESM(require("react"), 1);
+var import_jsx_runtime76 = require("react/jsx-runtime");
+var DayIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
   "svg",
   {
     fill: "none",
@@ -4443,7 +4253,7 @@ var DayIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
     width: 22,
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       "path",
       {
         d: "M2.55 18.09L3.96 19.5L5.76 17.71L4.34 16.29M11 5C7.69 5 5 7.69 5 11C5 14.31 7.69 17 11 17C14.31 17 17 14.31 17 11C17 7.68 14.31 5 11 5ZM19 12H22V10H19M16.24 17.71L18.04 19.5L19.45 18.09L17.66 16.29M19.45 4L18.04 2.6L16.24 4.39L17.66 5.81M12 0H10V3H12M5.76 4.39L3.96 2.6L2.55 4L4.34 5.81L5.76 4.39ZM0 12H3V10H0M12 19H10V22H12",
@@ -4455,9 +4265,9 @@ var DayIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
 var DayIcon_default = DayIcon;
 
 // src/resources/icons/NightIcon.js
-var import_react65 = __toESM(require("react"), 1);
-var import_jsx_runtime79 = require("react/jsx-runtime");
-var NightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+var import_react64 = __toESM(require("react"), 1);
+var import_jsx_runtime77 = require("react/jsx-runtime");
+var NightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
   "svg",
   {
     fill: "none",
@@ -4466,7 +4276,7 @@ var NightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     width: "14",
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
       "path",
       {
         d: "M0.92627 9.99963C0.926174 11.5698 1.29582 13.1179 2.00528 14.5186C2.71474 15.9194 3.74407 17.1334 5.00994 18.0623C6.27582 18.9913 7.74265 19.6091 9.29169 19.8657C10.8407 20.1224 12.4284 20.0107 13.9263 19.5396C11.8959 18.9016 10.122 17.6323 8.86268 15.9165C7.60338 14.2008 6.92434 12.1279 6.92434 9.99963C6.92434 7.87132 7.60338 5.79851 8.86268 4.08274C10.122 2.36696 11.8959 1.09772 13.9263 0.459633C12.4284 -0.0114145 10.8407 -0.123133 9.29169 0.133521C7.74265 0.390176 6.27582 1.00799 5.00994 1.93695C3.74407 2.8659 2.71474 4.07989 2.00528 5.48063C1.29582 6.88136 0.926174 8.42948 0.92627 9.99963Z",
@@ -4478,12 +4288,12 @@ var NightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
 var NightIcon_default = NightIcon;
 
 // src/components/Shift/Shift.tsx
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var ShiftEnum = {
   DAY: "Day",
   NIGHT: "Night"
 };
-var useStyles25 = (0, import_mui27.makeStyles)()(() => ({
+var useStyles23 = (0, import_mui25.makeStyles)()(() => ({
   shiftName: {
     textTransform: "uppercase",
     fontWeight: 600
@@ -4491,12 +4301,12 @@ var useStyles25 = (0, import_mui27.makeStyles)()(() => ({
 }));
 var Shift = ({ shift }) => {
   const shiftIcon = {
-    [ShiftEnum.DAY]: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(DayIcon_default, { "data-testid": "shift-day" }),
-    [ShiftEnum.NIGHT]: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(NightIcon_default, { "data-testid": "shift-night" })
+    [ShiftEnum.DAY]: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DayIcon_default, { "data-testid": "shift-day" }),
+    [ShiftEnum.NIGHT]: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(NightIcon_default, { "data-testid": "shift-night" })
   };
-  const { classes } = useStyles25();
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
-    import_material24.Box,
+  const { classes } = useStyles23();
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+    import_material22.Box,
     {
       sx: {
         display: "flex",
@@ -4505,30 +4315,30 @@ var Shift = ({ shift }) => {
       },
       children: [
         shiftIcon[shift],
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_material24.Typography, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("span", { className: classes.shiftName, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_material22.Typography, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: classes.shiftName, children: [
             shift,
             " "
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { children: "Shift" })
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { children: "Shift" })
         ] })
       ]
     }
   );
 };
 Shift.propTypes = {
-  shift: (0, import_prop_types15.oneOf)(Object.values(ShiftEnum))
+  shift: (0, import_prop_types12.oneOf)(Object.values(ShiftEnum))
 };
 var Shift_default = Shift;
 
 // src/components/surfaces/FixedFooter/index.js
-var import_react66 = __toESM(require("react"), 1);
-var import_material25 = require("@mui/material");
-var import_prop_types16 = __toESM(require("prop-types"), 1);
-var import_mui28 = require("tss-react/mui");
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_react65 = __toESM(require("react"), 1);
+var import_material23 = require("@mui/material");
+var import_prop_types13 = __toESM(require("prop-types"), 1);
+var import_mui26 = require("tss-react/mui");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var footerHeight = "64px";
-var useStyles26 = (0, import_mui28.makeStyles)()((theme) => ({
+var useStyles24 = (0, import_mui26.makeStyles)()((theme) => ({
   root: {
     position: "fixed",
     bottom: 0,
@@ -4546,11 +4356,11 @@ var useStyles26 = (0, import_mui28.makeStyles)()((theme) => ({
   }
 }));
 var FixedFooter = ({ justifyContent, children }) => {
-  const { classes } = useStyles26();
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_material25.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_material25.Box, { className: classes.fixedOffset }),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-      import_material25.Box,
+  const { classes } = useStyles24();
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_material23.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_material23.Box, { className: classes.fixedOffset }),
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      import_material23.Box,
       {
         className: classes.root,
         sx: {
@@ -4562,21 +4372,21 @@ var FixedFooter = ({ justifyContent, children }) => {
   ] });
 };
 FixedFooter.propTypes = {
-  children: import_prop_types16.default.node.isRequired,
-  justifyContent: import_prop_types16.default.string
+  children: import_prop_types13.default.node.isRequired,
+  justifyContent: import_prop_types13.default.string
 };
-var FixedFooter_default = import_react66.default.memo(FixedFooter);
+var FixedFooter_default = import_react65.default.memo(FixedFooter);
 
 // src/components/Table/SmartTableHeader.js
-var import_react67 = __toESM(require("react"), 1);
+var import_react66 = __toESM(require("react"), 1);
 var import_TableCell = __toESM(require("@mui/material/TableCell"), 1);
 var import_TableHead = __toESM(require("@mui/material/TableHead"), 1);
 var import_TableRow = __toESM(require("@mui/material/TableRow"), 1);
 var import_TableSortLabel = __toESM(require("@mui/material/TableSortLabel"), 1);
-var import_prop_types17 = __toESM(require("prop-types"), 1);
-var import_mui29 = require("tss-react/mui");
-var import_jsx_runtime82 = require("react/jsx-runtime");
-var useStyles27 = (0, import_mui29.makeStyles)()(() => ({
+var import_prop_types14 = __toESM(require("prop-types"), 1);
+var import_mui27 = require("tss-react/mui");
+var import_jsx_runtime80 = require("react/jsx-runtime");
+var useStyles25 = (0, import_mui27.makeStyles)()(() => ({
   root: {
     backgroundColor: colors.background,
     "& .MuiTableSortLabel-root": {
@@ -4604,18 +4414,18 @@ var useStyles27 = (0, import_mui29.makeStyles)()(() => ({
   }
 }));
 var SmartTableHeader = (props) => {
-  const { classes } = useStyles27();
+  const { classes } = useStyles25();
   const { order, orderBy, onRequestSort } = props;
   const createSortHandler = (property) => (event) => {
     onRequestSort(event, property);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_TableHead.default, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_TableRow.default, { children: props.headCells.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_TableHead.default, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_TableRow.default, { children: props.headCells.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     import_TableCell.default,
     {
       className: classes.containerTh,
       align: "left",
       sortDirection: orderBy === headCell.id ? order : false,
-      children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
         import_TableSortLabel.default,
         {
           active: orderBy === headCell.id,
@@ -4623,7 +4433,7 @@ var SmartTableHeader = (props) => {
           onClick: createSortHandler(headCell.id),
           children: [
             headCell.label,
-            orderBy === headCell.id ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: classes.visuallyHidden, children: order === "desc" ? "sorted descending" : "sorted ascending" }) : null
+            orderBy === headCell.id ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: classes.visuallyHidden, children: order === "desc" ? "sorted descending" : "sorted ascending" }) : null
           ]
         }
       )
@@ -4632,23 +4442,23 @@ var SmartTableHeader = (props) => {
   )) }) });
 };
 SmartTableHeader.propTypes = {
-  order: import_prop_types17.default.string,
-  orderBy: import_prop_types17.default.string,
-  onRequestSort: import_prop_types17.default.func,
-  headCells: import_prop_types17.default.any
+  order: import_prop_types14.default.string,
+  orderBy: import_prop_types14.default.string,
+  onRequestSort: import_prop_types14.default.func,
+  headCells: import_prop_types14.default.any
 };
-var SmartTableHeader_default = import_react67.default.memo(SmartTableHeader);
+var SmartTableHeader_default = import_react66.default.memo(SmartTableHeader);
 
 // src/components/Table/TableDesktop.tsx
-var import_react68 = require("react");
-var import_material27 = require("@mui/material");
-var import_mui31 = require("tss-react/mui");
+var import_react67 = require("react");
+var import_material25 = require("@mui/material");
+var import_mui29 = require("tss-react/mui");
 
 // src/components/Table/TableEmptyResult.tsx
-var import_material26 = require("@mui/material");
-var import_mui30 = require("tss-react/mui");
-var import_jsx_runtime83 = require("react/jsx-runtime");
-var useStyles28 = (0, import_mui30.makeStyles)()(() => ({
+var import_material24 = require("@mui/material");
+var import_mui28 = require("tss-react/mui");
+var import_jsx_runtime81 = require("react/jsx-runtime");
+var useStyles26 = (0, import_mui28.makeStyles)()(() => ({
   tableCellIcon: { padding: 24, height: "calc(100vh - 320px)" },
   tableCellDefault: { padding: 24 }
 }));
@@ -4657,12 +4467,12 @@ var TableEmptyResult = ({
   handleClickOnClearFiltersButton = () => {
   }
 }) => {
-  const { classes } = useStyles28();
-  return showClearFilterButton ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_material26.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_material26.TableCell, { className: classes.tableCellIcon, colSpan: 8, align: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(EmptyGlassIcon_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_material26.Typography, { variant: "h6", children: "No results found." }),
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_material26.Typography, { variant: "subtitle1", children: "Search without applied filters?" }),
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+  const { classes } = useStyles26();
+  return showClearFilterButton ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_material24.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_material24.TableCell, { className: classes.tableCellIcon, colSpan: 8, align: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(EmptyGlassIcon_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_material24.Typography, { variant: "h6", children: "No results found." }),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_material24.Typography, { variant: "subtitle1", children: "Search without applied filters?" }),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       FilledButton_default,
       {
         copy: "Search",
@@ -4671,8 +4481,8 @@ var TableEmptyResult = ({
         onClick: handleClickOnClearFiltersButton
       }
     )
-  ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_material26.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
-    import_material26.TableCell,
+  ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_material24.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+    import_material24.TableCell,
     {
       className: classes.tableCellDefault,
       colSpan: 8,
@@ -4684,8 +4494,8 @@ var TableEmptyResult = ({
 var TableEmptyResult_default = TableEmptyResult;
 
 // src/components/Table/TableDesktop.tsx
-var import_jsx_runtime84 = require("react/jsx-runtime");
-var useStyles29 = (0, import_mui31.makeStyles)()(() => ({
+var import_jsx_runtime82 = require("react/jsx-runtime");
+var useStyles27 = (0, import_mui29.makeStyles)()(() => ({
   root: {
     justifyContent: "space-between",
     display: "flex",
@@ -4730,14 +4540,14 @@ var TableDesktop = ({
   deleteItem,
   keyField
 }) => {
-  const [order, setOrder] = (0, import_react68.useState)(
-    (appliedFilters == null ? void 0 : appliedFilters.sortDir) || "desc"
+  const [order, setOrder] = (0, import_react67.useState)(
+    appliedFilters?.sortDir || "desc"
   );
-  const [orderBy, setOrderBy] = (0, import_react68.useState)(
-    (appliedFilters == null ? void 0 : appliedFilters.sortField) || "delivery_date"
+  const [orderBy, setOrderBy] = (0, import_react67.useState)(
+    appliedFilters?.sortField || "delivery_date"
   );
-  const [page] = (0, import_react68.useState)(0);
-  const { classes } = useStyles29();
+  const [page] = (0, import_react67.useState)(0);
+  const { classes } = useStyles27();
   const rowHeight = 56;
   const handleRequestSort = (event, property) => {
     const isAsc = orderBy === property && order === "asc";
@@ -4747,24 +4557,24 @@ var TableDesktop = ({
     updateSort(property, orderDir);
   };
   const emptyRows = rowsPerPage - data.length;
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: classes.root, style: { height }, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_material27.Paper, { className: classes.paper, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { children: [...Array(Math.floor(rowsPerPage))].map(() => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-    import_material27.Skeleton,
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: classes.root, style: { height }, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_material25.Paper, { className: classes.paper, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { children: [...Array(Math.floor(rowsPerPage))].map((rowPerPage) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+    import_material25.Skeleton,
     {
       animation: "pulse",
       style: { margin: "8px", opacity: 0.4 },
       variant: "rectangular",
       height: rowHeight
     },
-    Math.random()
-  )) }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_material27.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
-      import_material27.Table,
+    rowPerPage
+  )) }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_material25.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
+      import_material25.Table,
       {
         "aria-labelledby": "tableTitle",
         "aria-label": "sticky table",
         stickyHeader: true,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
             SmartTableHeader_default,
             {
               headCells,
@@ -4773,15 +4583,15 @@ var TableDesktop = ({
               onRequestSort: handleRequestSort
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_material27.TableBody, { children: [
-            stableSort(data, getSorting(order, orderBy)).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_material25.TableBody, { children: [
+            stableSort(data, getSorting(order, orderBy)).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
               RenderItem,
               {
                 ...{ ...item, index, deleteItem }
               },
               item[keyField]
             )),
-            rowsPerPage === emptyRows && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+            rowsPerPage === emptyRows && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
               TableEmptyResult_default,
               {
                 showClearFilterButton,
@@ -4798,13 +4608,13 @@ var TableDesktop = ({
 var TableDesktop_default = TableDesktop;
 
 // src/components/TableHeader/TableHeader.tsx
-var import_react69 = require("react");
+var import_react68 = require("react");
 var import_ImportExport = __toESM(require("@mui/icons-material/ImportExport"), 1);
-var import_material28 = require("@mui/material");
-var import_prop_types18 = require("prop-types");
-var import_mui32 = require("tss-react/mui");
-var import_jsx_runtime85 = require("react/jsx-runtime");
-var useStyles30 = (0, import_mui32.makeStyles)()(() => ({
+var import_material26 = require("@mui/material");
+var import_prop_types15 = require("prop-types");
+var import_mui30 = require("tss-react/mui");
+var import_jsx_runtime83 = require("react/jsx-runtime");
+var useStyles28 = (0, import_mui30.makeStyles)()(() => ({
   sortLabel: {
     "& .MuiTableSortLabel-icon": {
       opacity: 1
@@ -4812,9 +4622,9 @@ var useStyles30 = (0, import_mui32.makeStyles)()(() => ({
   }
 }));
 var TableHeader = ({ cells, onSort }) => {
-  const [sortableCells, setSortableCells] = (0, import_react69.useState)([]);
-  const { classes } = useStyles30();
-  (0, import_react69.useEffect)(() => {
+  const [sortableCells, setSortableCells] = (0, import_react68.useState)([]);
+  const { classes } = useStyles28();
+  (0, import_react68.useEffect)(() => {
     setSortableCells(cells);
   }, []);
   const getNewSortDirection = (direction) => {
@@ -4827,7 +4637,7 @@ var TableHeader = ({ cells, onSort }) => {
     return "";
   };
   const handleSortClick = (sortedCell) => {
-    const newDirection = getNewSortDirection(sortedCell == null ? void 0 : sortedCell.direction);
+    const newDirection = getNewSortDirection(sortedCell?.direction);
     if (onSort) {
       onSort({
         direction: newDirection,
@@ -4848,11 +4658,11 @@ var TableHeader = ({ cells, onSort }) => {
     });
     setSortableCells(sortedCells);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_material28.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_material28.TableRow, { children: sortableCells.map((cell, key) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_material28.TableCell, { children: cell.isSortable ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-    import_material28.TableSortLabel,
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_material26.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_material26.TableRow, { children: sortableCells.map((cell, key) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_material26.TableCell, { children: cell.isSortable ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+    import_material26.TableSortLabel,
     {
       className: classes.sortLabel,
-      direction: (cell == null ? void 0 : cell.direction) || "asc",
+      direction: cell?.direction || "asc",
       IconComponent: import_ImportExport.default,
       onClick: () => handleSortClick(cell),
       children: cell.label
@@ -4863,17 +4673,87 @@ TableHeader.defaultProps = {
   onSort: null
 };
 TableHeader.propTypes = {
-  cells: (0, import_prop_types18.arrayOf)(
-    (0, import_prop_types18.shape)({
-      direction: (0, import_prop_types18.oneOf)(["asc", "desc", ""]),
-      isSortable: import_prop_types18.bool,
-      label: import_prop_types18.string,
-      name: import_prop_types18.string
+  cells: (0, import_prop_types15.arrayOf)(
+    (0, import_prop_types15.shape)({
+      direction: (0, import_prop_types15.oneOf)(["asc", "desc", ""]),
+      isSortable: import_prop_types15.bool,
+      label: import_prop_types15.string,
+      name: import_prop_types15.string
     })
   ).isRequired,
-  onSort: import_prop_types18.func
+  onSort: import_prop_types15.func
+};
+var TableHeader_default = (0, import_react68.memo)(TableHeader);
+
+// src/components/TheToolbar/TheToolbar.tsx
+var import_react69 = __toESM(require("react"), 1);
+var import_material27 = require("@mui/material");
+var import_mui31 = require("tss-react/mui");
+var import_jsx_runtime84 = require("react/jsx-runtime");
+var useStyles29 = (0, import_mui31.makeStyles)()((theme) => ({
+  menuButton: {
+    color: theme.palette.primary.contrastText
+  },
+  searchNatoora: {
+    width: "100%"
+  },
+  searchIcon: {
+    opacity: ".5"
+  },
+  inputRoot: {
+    color: "inherit"
+  },
+  inputInput: {
+    transition: theme.transitions.create("width"),
+    width: "100%"
+  },
+  topBar: {
+    display: "flex",
+    gap: theme.spacing(1),
+    backgroundColor: colors.topBar
+  },
+  drawer: {
+    backgroundColor: "black"
+  },
+  drawerItem: {
+    maxWidth: "300px",
+    width: "80vw"
+  },
+  offset: theme.mixins.toolbar
+}));
+var TheToolbar = ({
+  imageLogoDarkSmall,
+  imageLogoLightSmall,
+  handleOpen,
+  LeftDrawer: LeftDrawer2
+}) => {
+  const { classes } = useStyles29();
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_material27.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_material27.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_material27.Toolbar, { className: classes.topBar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+        RoundButton_default,
+        {
+          className: classes.menuButton,
+          icon: "menu",
+          noStrokes: true,
+          onClick: handleOpen
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+        CompanyLogo_default,
+        {
+          size: "small",
+          color: "light",
+          imageLogoDarkSmall,
+          imageLogoLightSmall
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_material27.Box, { className: classes.offset }),
+    LeftDrawer2
+  ] });
 };
-var TableHeader_default = (0, import_react69.memo)(TableHeader);
+var TheToolbar_default = import_react69.default.memo(TheToolbar);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlertDialog,
@@ -4886,7 +4766,6 @@ var TableHeader_default = (0, import_react69.memo)(TableHeader);
   Date,
   DeleteSubstitutionDialogContent,
   DeleteUserDialogContent,
-  DesktopContainer,
   ExtendedButton,
   FilledButton,
   FilledButtonLg,