@natoora-libs/core 0.2.21 → 0.2.22-task-management

package/dist/components/index.cjs

@@ -1445,12 +1445,15 @@ var AutocompleteFilterMenuContent = ({
 
 // src/components/BackHeader/BackHeader.tsx
 var import_react_router = require("react-router");
-var import_icons_material3 = require("@mui/icons-material");
+var import_KeyboardBackspace = __toESM(require("@mui/icons-material/KeyboardBackspace"), 1);
 var import_material11 = require("@mui/material");
 var import_mui4 = require("tss-react/mui");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var useStyles4 = (0, import_mui4.makeStyles)()((theme) => ({
   header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
     padding: theme.spacing(2, 3),
     borderBottom: `1px solid ${colors.neutral400}`,
     backgroundColor: colors.neutral100
@@ -1471,7 +1474,11 @@ var useStyles4 = (0, import_mui4.makeStyles)()((theme) => ({
     textTransform: "none"
   }
 }));
-var BackHeader = ({ appName, onGoBackClick }) => {
+var BackHeader = ({
+  appName,
+  onGoBackClick,
+  sideComponent = null
+}) => {
   const { classes } = useStyles4();
   const navigate = (0, import_react_router.useNavigate)();
   const handleBackClick = () => {
@@ -1480,10 +1487,13 @@ var BackHeader = ({ appName, onGoBackClick }) => {
     }
     return navigate(-1);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material11.Box, { component: "header", className: classes.header, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material11.Button, { className: classes.button, onClick: handleBackClick, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material11.Box, { component: "span", className: classes.text, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons_material3.KeyboardBackspace, { className: classes.icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material11.Typography, { variant: "body1", children: appName })
-  ] }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material11.Box, { component: "header", className: classes.header, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material11.Button, { className: classes.button, onClick: handleBackClick, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material11.Box, { component: "span", className: classes.text, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_KeyboardBackspace.default, { className: classes.icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material11.Typography, { variant: "body1", color: "textPrimary", children: appName })
+    ] }) }),
+    sideComponent
+  ] });
 };
 var BackHeader_default = BackHeader;
 
@@ -1868,7 +1878,7 @@ var ImageButton = (props) => {
 var ImageButton_default = (0, import_react11.memo)(ImageButton);
 
 // src/components/Buttons/SquareButton/SquareButton.tsx
-var import_icons_material4 = require("@mui/icons-material");
+var import_icons_material3 = require("@mui/icons-material");
 var import_material17 = require("@mui/material");
 var import_mui10 = require("tss-react/mui");
 var import_jsx_runtime19 = require("react/jsx-runtime");
@@ -1907,8 +1917,8 @@ var SquareButton = ({
 }) => {
   const { classes, cx } = useStyles9();
   const icon = {
-    add: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons_material4.Add, { className: classes.icon }),
-    forward: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons_material4.ChevronRight, { className: classes.icon })
+    add: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons_material3.Add, { className: classes.icon }),
+    forward: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons_material3.ChevronRight, { className: classes.icon })
   };
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_material17.Button,
@@ -2174,7 +2184,7 @@ var FilterButtonLg = (0, import_mui12.withStyles)(AButton, (theme) => ({
 var OutlinedButtonLg_default = (0, import_react14.memo)(FilterButtonLg);
 
 // src/components/Buttons/RoundButton/RoundButton.tsx
-var import_icons_material5 = require("@mui/icons-material");
+var import_icons_material4 = require("@mui/icons-material");
 var import_material21 = require("@mui/material");
 var import_mui13 = require("tss-react/mui");
 
@@ -3522,39 +3532,39 @@ var RoundButton = ({
   const { classes, cx } = useStyles11();
   const iconSize = size === "small" ? "small" : "medium";
   const iconComponentMap = {
-    add: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.Add, { fontSize: iconSize }),
-    apps: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.Apps, { fontSize: iconSize }),
-    arrowBack: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.ArrowBack, { fontSize: iconSize }),
-    arrowForward: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.ArrowForward, { fontSize: iconSize }),
+    add: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.Add, { fontSize: iconSize }),
+    apps: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.Apps, { fontSize: iconSize }),
+    arrowBack: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.ArrowBack, { fontSize: iconSize }),
+    arrowForward: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.ArrowForward, { fontSize: iconSize }),
     avocado: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(IconAvocado_default, {}),
-    backspaceOutlined: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.BackspaceOutlined, { fontSize: iconSize }),
+    backspaceOutlined: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.BackspaceOutlined, { fontSize: iconSize }),
     banana: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(IconBanana_default, {}),
-    block: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.Block, { fontSize: iconSize }),
+    block: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.Block, { fontSize: iconSize }),
     bulk: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(BulkIcon_default, { fill: colors.contrast }),
-    callSplit: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.CallSplit, { fontSize: iconSize }),
-    chevronRight: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.ChevronRight, { fontSize: iconSize }),
-    chevronUp: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.KeyboardArrowUp, { fontSize: iconSize }),
-    chevronDown: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.KeyboardArrowDown, { fontSize: iconSize }),
-    close: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.Close, { fontSize: iconSize }),
-    delete: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.Delete, { fontSize: iconSize, fill: colors.neutral800 }),
-    done: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.Done, { fontSize: iconSize }),
-    edit: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.Edit, { fontSize: iconSize }),
-    email: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.Email, { fontSize: iconSize }),
+    callSplit: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.CallSplit, { fontSize: iconSize }),
+    chevronRight: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.ChevronRight, { fontSize: iconSize }),
+    chevronUp: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.KeyboardArrowUp, { fontSize: iconSize }),
+    chevronDown: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.KeyboardArrowDown, { fontSize: iconSize }),
+    close: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.Close, { fontSize: iconSize }),
+    delete: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.Delete, { fontSize: iconSize, fill: colors.neutral800 }),
+    done: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.Done, { fontSize: iconSize }),
+    edit: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.Edit, { fontSize: iconSize }),
+    email: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.Email, { fontSize: iconSize }),
     grape: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(IconGrape_default, {}),
-    groupAdd: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.GroupAdd, { fontSize: iconSize }),
-    history: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.History, { fontSize: iconSize }),
-    menu: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.Menu, { fontSize: iconSize }),
-    threeDots: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.MoreHoriz, { fontSize: iconSize, color: iconColor }),
-    notes: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.Comment, { fontSize: iconSize }),
-    refresh: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.Refresh, { fontSize: iconSize }),
-    remove: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.Remove, { fontSize: iconSize }),
-    search: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.Search, { fontSize: iconSize }),
-    send: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.Send, { fontSize: iconSize }),
+    groupAdd: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.GroupAdd, { fontSize: iconSize }),
+    history: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.History, { fontSize: iconSize }),
+    menu: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.Menu, { fontSize: iconSize }),
+    threeDots: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.MoreHoriz, { fontSize: iconSize, color: iconColor }),
+    notes: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.Comment, { fontSize: iconSize }),
+    refresh: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.Refresh, { fontSize: iconSize }),
+    remove: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.Remove, { fontSize: iconSize }),
+    search: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.Search, { fontSize: iconSize }),
+    send: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.Send, { fontSize: iconSize }),
     strawberry: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(IconStrawberry_default, {}),
-    thumbDown: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.ThumbDown, { fontSize: iconSize }),
-    thumbUp: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.ThumbUp, { fontSize: iconSize }),
-    undo: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.Undo, { fontSize: iconSize }),
-    play: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.PlayArrowRounded, { fontSize: iconSize }),
+    thumbDown: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.ThumbDown, { fontSize: iconSize }),
+    thumbUp: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.ThumbUp, { fontSize: iconSize }),
+    undo: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.Undo, { fontSize: iconSize }),
+    play: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.PlayArrowRounded, { fontSize: iconSize }),
     snail: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(icons_default.SvgIconSnail, { fontSize: iconSize, fill: colors.muiPrimary }),
     bus: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(IconBus_default, {}),
     spoon: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(IconSpoon_default, {}),
@@ -3564,7 +3574,7 @@ var RoundButton = ({
     bicycle: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(IconBicycle_default, {}),
     heart: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(IconHeart_default, {}),
     airplane: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(IconAirplane_default, {}),
-    swapHoriz: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material5.SwapHoriz, { fontSize: iconSize })
+    swapHoriz: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_icons_material4.SwapHoriz, { fontSize: iconSize })
   };
   const filteredSize = size === "double" ? void 0 : size;
   const handleClick = (e) => {
@@ -3931,29 +3941,41 @@ var ClearFiltersConfirmationDialog = ({
 };
 
 // src/components/CompanyLogo/CompanyLogo.tsx
+var import_mui17 = require("tss-react/mui");
 var import_jsx_runtime76 = require("react/jsx-runtime");
+var useStyles15 = (0, import_mui17.makeStyles)()((theme, { imageLogoDarkSmall, imageLogoLightSmall }) => ({
+  logoSmall: {
+    height: 46,
+    width: 112
+  },
+  logoMedium: {
+    height: 72,
+    width: 160
+  },
+  logoDark: {
+    backgroundImage: `url(${imageLogoDarkSmall})`
+  },
+  logoLight: {
+    backgroundImage: `url(${imageLogoLightSmall})`
+  }
+}));
 var CompanyLogo = ({
   size,
   color,
   imageLogoDarkSmall,
   imageLogoLightSmall
 }) => {
-  const src = color === "dark" ? imageLogoDarkSmall : imageLogoLightSmall;
-  const dimensions = size === "small" ? { width: 112, height: 46 } : { width: 160, height: 72 };
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-    "img",
-    {
-      src,
-      alt: "Company logo",
-      width: dimensions.width,
-      height: dimensions.height,
-      fetchPriority: "high",
-      decoding: "async",
-      style: {
-        display: "block"
-      }
-    }
-  );
+  const { classes, cx } = useStyles15({
+    imageLogoDarkSmall,
+    imageLogoLightSmall
+  });
+  const className = cx({
+    [classes.logoSmall]: size === "small",
+    [classes.logoMedium]: size === "medium",
+    [classes.logoLight]: color === "light",
+    [classes.logoDark]: color === "dark"
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className });
 };
 var CompanyLogo_default = CompanyLogo;
 
@@ -4006,9 +4028,9 @@ var ControlledCheckbox_default = ControlledCheckbox;
 // src/components/ControlledNumberInput/ControlledNumberInput.tsx
 var import_react_hook_form2 = require("react-hook-form");
 var import_material27 = require("@mui/material");
-var import_mui17 = require("tss-react/mui");
+var import_mui18 = require("tss-react/mui");
 var import_jsx_runtime78 = require("react/jsx-runtime");
-var useStyles15 = (0, import_mui17.makeStyles)()(() => ({
+var useStyles16 = (0, import_mui18.makeStyles)()(() => ({
   selectInput: {
     minWidth: 122
   }
@@ -4024,7 +4046,7 @@ var ControlledNumberInput = ({
   shrink = false,
   className
 }) => {
-  const { classes } = useStyles15();
+  const { classes } = useStyles16();
   const blockInvalidChar = (input) => ![
     "0",
     "1",
@@ -4078,12 +4100,12 @@ var ControlledNumberInput_default = ControlledNumberInput;
 // src/components/ControlledNumericField/ControlledNumericField.tsx
 var import_react16 = require("react");
 var import_react_hook_form3 = require("react-hook-form");
-var import_icons_material6 = require("@mui/icons-material");
+var import_icons_material5 = require("@mui/icons-material");
 var import_material28 = require("@mui/material");
-var import_mui18 = require("tss-react/mui");
+var import_mui19 = require("tss-react/mui");
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var convertUnderscoreToHyphen = (str) => str.replace(/_/g, "-");
-var useStyles16 = (0, import_mui18.makeStyles)()((theme) => ({
+var useStyles17 = (0, import_mui19.makeStyles)()((theme) => ({
   textFieldButtons: {
     display: "flex",
     flexDirection: "column",
@@ -4111,7 +4133,7 @@ var ControlledNumericField = ({
   "data-testid": dataTestId,
   fieldName
 }) => {
-  const { classes } = useStyles16();
+  const { classes } = useStyles17();
   const isLowerThanMinimum = (value) => min !== void 0 && min > value;
   const isGreaterThanMaximum = (value) => max !== void 0 && max < value;
   const handleChange = (field, value) => {
@@ -4235,7 +4257,7 @@ var ControlledNumericField = ({
                         className: classes.arrowButton,
                         onClick: incrementValue(field),
                         "data-testid": "arrow-up",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_icons_material6.KeyboardArrowUp, { sx: { fontSize: 15 } })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_icons_material5.KeyboardArrowUp, { sx: { fontSize: 15 } })
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
@@ -4245,7 +4267,7 @@ var ControlledNumericField = ({
                         className: classes.arrowButton,
                         onClick: decrementValue(field),
                         "data-testid": "arrow-down",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_icons_material6.KeyboardArrowDown, { sx: { fontSize: 15 } })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_icons_material5.KeyboardArrowDown, { sx: { fontSize: 15 } })
                       }
                     )
                   ] }) })
@@ -4263,9 +4285,9 @@ var ControlledNumericField_default = ControlledNumericField;
 // src/components/ControlledSelectWithArray/ControlledSelectWithArray.tsx
 var import_react_hook_form4 = require("react-hook-form");
 var import_material29 = require("@mui/material");
-var import_mui19 = require("tss-react/mui");
+var import_mui20 = require("tss-react/mui");
 var import_jsx_runtime80 = require("react/jsx-runtime");
-var useStyles17 = (0, import_mui19.makeStyles)()(() => ({
+var useStyles18 = (0, import_mui20.makeStyles)()(() => ({
   selectInput: {
     minWidth: 122
   }
@@ -4280,7 +4302,7 @@ var ControlledSelectWithArray = ({
   className,
   revalidateFormFunction
 }) => {
-  const { classes } = useStyles17();
+  const { classes } = useStyles18();
   return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     import_react_hook_form4.Controller,
     {
@@ -4332,9 +4354,9 @@ var ControlledSelectWithArray_default = ControlledSelectWithArray;
 // src/components/ControlledSelectWithObject/ControlledSelectWithObject.tsx
 var import_react_hook_form5 = require("react-hook-form");
 var import_material30 = require("@mui/material");
-var import_mui20 = require("tss-react/mui");
+var import_mui21 = require("tss-react/mui");
 var import_jsx_runtime81 = require("react/jsx-runtime");
-var useStyles18 = (0, import_mui20.makeStyles)()(() => ({
+var useStyles19 = (0, import_mui21.makeStyles)()(() => ({
   selectInput: {
     minWidth: 122
   }
@@ -4350,7 +4372,7 @@ var ControlledSelectWithObject = ({
   listToDisableFromOptions = [],
   revalidateFormFunction
 }) => {
-  const { classes } = useStyles18();
+  const { classes } = useStyles19();
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     import_react_hook_form5.Controller,
     {
@@ -4411,9 +4433,9 @@ var ControlledSelectWithObject_default = ControlledSelectWithObject;
 var import_react_hook_form6 = require("react-hook-form");
 var import_material31 = require("@mui/material");
 var import_classnames = __toESM(require("classnames"), 1);
-var import_mui21 = require("tss-react/mui");
+var import_mui22 = require("tss-react/mui");
 var import_jsx_runtime82 = require("react/jsx-runtime");
-var useStyles19 = (0, import_mui21.makeStyles)()(() => ({
+var useStyles20 = (0, import_mui22.makeStyles)()(() => ({
   fullWidthWrapper: {
     maxWidth: "100%"
   },
@@ -4439,7 +4461,7 @@ var ControlledValidTextInput = ({
   updateCustomerData,
   customHandleBlurValidationAndSubmit
 }) => {
-  const { classes } = useStyles19();
+  const { classes } = useStyles20();
   const defaultHandleBlurValidationAndSubmit = async ({ name, value, onChange }, isDirty) => {
     const trimmedValue = value?.trim();
     if (value !== trimmedValue) {
@@ -4522,9 +4544,9 @@ var ControlledValidTextInput_default = ControlledValidTextInput;
 var import_react17 = require("react");
 var import_material32 = require("@mui/material");
 var import_x_data_grid = require("@mui/x-data-grid");
-var import_mui22 = require("tss-react/mui");
+var import_mui23 = require("tss-react/mui");
 var import_jsx_runtime83 = require("react/jsx-runtime");
-var useStyles20 = (0, import_mui22.makeStyles)()(() => ({
+var useStyles21 = (0, import_mui23.makeStyles)()(() => ({
   root: {
     justifyContent: "space-between",
     display: "flex",
@@ -4561,7 +4583,7 @@ var DataGrid = ({
   height,
   children
 }) => {
-  const { classes } = useStyles20();
+  const { classes } = useStyles21();
   const [sortModel, setSortModel] = (0, import_react17.useState)([
     {
       field: sortField || "id",
@@ -4702,9 +4724,9 @@ var Date_default = Date;
 // src/components/DeleteSubstitutionDialogContent/DeleteSubstitutionDialogContent.tsx
 var import_react18 = require("react");
 var import_material33 = require("@mui/material");
-var import_mui23 = require("tss-react/mui");
+var import_mui24 = require("tss-react/mui");
 var import_jsx_runtime85 = require("react/jsx-runtime");
-var useStyles21 = (0, import_mui23.makeStyles)()(() => ({
+var useStyles22 = (0, import_mui24.makeStyles)()(() => ({
   alert: { marginBottom: 16 },
   bottomBar: {
     marginTop: "12px",
@@ -4720,7 +4742,7 @@ var DeleteSubstitutionDialogContent = ({
   substitutionName,
   deleteSubstitution
 }) => {
-  const { classes } = useStyles21();
+  const { classes } = useStyles22();
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_material33.Alert, { severity: "warning", className: classes.alert, children: [
       /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_material33.AlertTitle, { children: [
@@ -4750,9 +4772,9 @@ var DeleteSubstitutionDialogContent_default = (0, import_react18.memo)(DeleteSub
 // src/components/DeleteUserDialogContent/DeleteUserDialogContent.tsx
 var import_react19 = require("react");
 var import_material34 = require("@mui/material");
-var import_mui24 = require("tss-react/mui");
+var import_mui25 = require("tss-react/mui");
 var import_jsx_runtime86 = require("react/jsx-runtime");
-var useStyles22 = (0, import_mui24.makeStyles)()(() => ({
+var useStyles23 = (0, import_mui25.makeStyles)()(() => ({
   alert: { marginBottom: 16 },
   bottomBar: {
     marginTop: "12px",
@@ -4768,7 +4790,7 @@ var DeleteUserDialogContent = ({
   userName,
   deleteUser
 }) => {
-  const { classes } = useStyles22();
+  const { classes } = useStyles23();
   return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_material34.Alert, { severity: "warning", className: classes.alert, children: [
       /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_material34.AlertTitle, { children: [
@@ -4796,7 +4818,7 @@ var DeleteUserDialogContent = ({
 var DeleteUserDialogContent_default = (0, import_react19.memo)(DeleteUserDialogContent);
 
 // src/components/FileCard/FileCard.tsx
-var import_icons_material7 = require("@mui/icons-material");
+var import_icons_material6 = require("@mui/icons-material");
 var import_material35 = require("@mui/material");
 var import_jsx_runtime87 = require("react/jsx-runtime");
 var getFileMetadata = (file) => {
@@ -4831,7 +4853,7 @@ var FileCard = ({ document: document2 }) => {
               justifyContent: "center",
               alignItems: "center"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_icons_material7.Description, { fontSize: "medium", color: "action" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_icons_material6.Description, { fontSize: "medium", color: "action" })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
@@ -4858,9 +4880,9 @@ var FileCard_default = FileCard;
 var import_react20 = require("react");
 var import_material36 = require("@mui/material");
 var import_colors31 = require("@mui/material/colors");
-var import_mui25 = require("tss-react/mui");
+var import_mui26 = require("tss-react/mui");
 var import_jsx_runtime88 = require("react/jsx-runtime");
-var useStyles23 = (0, import_mui25.makeStyles)()((theme) => ({
+var useStyles24 = (0, import_mui26.makeStyles)()((theme) => ({
   siteOne: {
     backgroundColor: import_colors31.teal["50"],
     color: import_colors31.teal["500"],
@@ -4886,7 +4908,7 @@ var useStyles23 = (0, import_mui25.makeStyles)()((theme) => ({
 }));
 var FilledLabel = (props) => {
   const { color, copy } = props;
-  const { classes } = useStyles23();
+  const { classes } = useStyles24();
   return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_material36.Typography, { variant: "caption", className: classes[color], children: copy });
 };
 var FilledLabel_default = (0, import_react20.memo)(FilledLabel);
@@ -4894,9 +4916,9 @@ var FilledLabel_default = (0, import_react20.memo)(FilledLabel);
 // src/components/FilterGroupSelector/FilterGroupSelector.tsx
 var import_react21 = require("react");
 var import_material37 = require("@mui/material");
-var import_mui26 = require("tss-react/mui");
+var import_mui27 = require("tss-react/mui");
 var import_jsx_runtime89 = require("react/jsx-runtime");
-var useStyles24 = (0, import_mui26.makeStyles)()((theme) => ({
+var useStyles25 = (0, import_mui27.makeStyles)()((theme) => ({
   filterOptions: {
     height: 450,
     overflowY: "auto",
@@ -4924,7 +4946,7 @@ var FilterGroupSelector = ({
   handleClickOnApply,
   optionsList = [{ category: "Category", options: ["Option 1"] }]
 }) => {
-  const { classes } = useStyles24();
+  const { classes } = useStyles25();
   const [anchorEl, setAnchorEl] = (0, import_react21.useState)(null);
   const [values, setValues] = (0, import_react21.useState)([]);
   const open = Boolean(anchorEl);
@@ -5015,9 +5037,9 @@ var FilterGroupSelector_default = FilterGroupSelector;
 // src/components/FilterSimpleSelector/FilterSimpleSelector.tsx
 var import_react22 = require("react");
 var import_material38 = require("@mui/material");
-var import_mui27 = require("tss-react/mui");
+var import_mui28 = require("tss-react/mui");
 var import_jsx_runtime90 = require("react/jsx-runtime");
-var useStyles25 = (0, import_mui27.makeStyles)()((theme) => ({
+var useStyles26 = (0, import_mui28.makeStyles)()((theme) => ({
   filterOptions: {
     height: 450,
     overflowY: "auto",
@@ -5044,7 +5066,7 @@ var FilterSimpleSelector = ({
   setSelectedOptions,
   handleClickOnApply
 }) => {
-  const { classes } = useStyles25();
+  const { classes } = useStyles26();
   const [anchorEl, setAnchorEl] = (0, import_react22.useState)(null);
   const [values, setValues] = (0, import_react22.useState)([]);
   const open = Boolean(anchorEl);
@@ -5123,10 +5145,10 @@ var FilterSimpleSelector_default = FilterSimpleSelector;
 // src/components/FixedFooter/FixedFooter.tsx
 var React4 = __toESM(require("react"), 1);
 var import_material39 = require("@mui/material");
-var import_mui28 = require("tss-react/mui");
+var import_mui29 = require("tss-react/mui");
 var import_jsx_runtime91 = require("react/jsx-runtime");
 var footerHeight = "64px";
-var useStyles26 = (0, import_mui28.makeStyles)()((theme) => ({
+var useStyles27 = (0, import_mui29.makeStyles)()((theme) => ({
   root: {
     position: "fixed",
     bottom: 0,
@@ -5146,7 +5168,7 @@ var useStyles26 = (0, import_mui28.makeStyles)()((theme) => ({
   }
 }));
 var FixedFooter = ({ justifyContent, children }) => {
-  const { classes } = useStyles26();
+  const { classes } = useStyles27();
   return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_material39.Box, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_material39.Box, { className: classes.fixedOffset }),
     /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
@@ -5165,9 +5187,9 @@ var FixedFooter_default = React4.memo(FixedFooter);
 
 // src/components/Header/Header.tsx
 var import_material40 = require("@mui/material");
-var import_mui29 = require("tss-react/mui");
+var import_mui30 = require("tss-react/mui");
 var import_jsx_runtime92 = require("react/jsx-runtime");
-var useStyles27 = (0, import_mui29.makeStyles)()((theme) => ({
+var useStyles28 = (0, import_mui30.makeStyles)()((theme) => ({
   container: {
     margin: theme.spacing(1)
   },
@@ -5188,7 +5210,7 @@ var Header = ({
   children = null,
   wrappedHeader = false
 }) => {
-  const { classes, cx } = useStyles27();
+  const { classes, cx } = useStyles28();
   return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
     import_material40.Paper,
     {
@@ -5237,9 +5259,9 @@ function VirtualizedList(props) {
 
 // src/components/Loading/Loading.tsx
 var import_material42 = require("@mui/material");
-var import_mui30 = require("tss-react/mui");
+var import_mui31 = require("tss-react/mui");
 var import_jsx_runtime94 = require("react/jsx-runtime");
-var useStyles28 = (0, import_mui30.makeStyles)()(() => ({
+var useStyles29 = (0, import_mui31.makeStyles)()(() => ({
   wrapper: {
     /**
      * MUI Dialogs have z-index = 1300
@@ -5249,7 +5271,7 @@ var useStyles28 = (0, import_mui30.makeStyles)()(() => ({
   }
 }));
 var Loading = ({ isLoading }) => {
-  const { classes } = useStyles28();
+  const { classes } = useStyles29();
   return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
     import_material42.Backdrop,
     {
@@ -5268,9 +5290,9 @@ var import_react23 = require("react");
 var import_material43 = require("@mui/material");
 var import_colors36 = require("@mui/material/colors");
 var import_classnames2 = __toESM(require("classnames"), 1);
-var import_mui31 = require("tss-react/mui");
+var import_mui32 = require("tss-react/mui");
 var import_jsx_runtime95 = require("react/jsx-runtime");
-var useStyles29 = (0, import_mui31.makeStyles)()(() => ({
+var useStyles30 = (0, import_mui32.makeStyles)()(() => ({
   container: {
     display: "flex",
     alignItems: "center",
@@ -5305,7 +5327,7 @@ var LocationsSectionInfo = ({
   isPicking,
   isStock
 }) => {
-  const { classes } = useStyles29();
+  const { classes } = useStyles30();
   const getLocationLabel = () => {
     if (isPicking && isStock) {
       return "PICKING & STOCK";
@@ -5339,9 +5361,9 @@ var LocationsSectionInfo_default = LocationsSectionInfo;
 // src/components/Notes/Notes.tsx
 var import_react24 = require("react");
 var import_material44 = require("@mui/material");
-var import_mui32 = require("tss-react/mui");
+var import_mui33 = require("tss-react/mui");
 var import_jsx_runtime96 = require("react/jsx-runtime");
-var useStyles30 = (0, import_mui32.makeStyles)()((theme) => ({
+var useStyles31 = (0, import_mui33.makeStyles)()((theme) => ({
   wrapper: {
     padding: theme.spacing(3),
     backgroundColor: colors.blueOpacity08
@@ -5382,7 +5404,7 @@ var Notes2 = ({
       onChange(value);
     }
   };
-  const { classes } = useStyles30();
+  const { classes } = useStyles31();
   return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: classes.wrapper, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_material44.FormControl, { fullWidth: true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_material44.InputLabel, { htmlFor: "notes", children: "Notes" }),
     /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
@@ -5565,9 +5587,9 @@ var Numpad_default = Numpad;
 // src/components/NumpadInput/NumpadInput.tsx
 var import_react25 = require("react");
 var import_material45 = require("@mui/material");
-var import_mui33 = require("tss-react/mui");
+var import_mui34 = require("tss-react/mui");
 var import_jsx_runtime98 = require("react/jsx-runtime");
-var useStyles31 = (0, import_mui33.makeStyles)()(() => ({
+var useStyles32 = (0, import_mui34.makeStyles)()(() => ({
   c_numpadinput__textfield: {
     "& .MuiInputLabel-outlined.MuiInputLabel-shrink": {
       transform: "translate(18px, -13px) scale(0.75)"
@@ -5592,7 +5614,7 @@ var useStyles31 = (0, import_mui33.makeStyles)()(() => ({
 }));
 var NumpadInput = (props) => {
   const { handleNextClick, inputLabel, children } = props;
-  const { classes } = useStyles31();
+  const { classes } = useStyles32();
   const [state, setState] = (0, import_react25.useState)("");
   const handleNumpadClick = (value) => {
     setState(state + value);
@@ -5643,9 +5665,9 @@ var NumpadInput_default = (0, import_react25.memo)(NumpadInput);
 
 // src/components/NumpadPlus/NumpadPlus.tsx
 var import_material46 = require("@mui/material");
-var import_mui34 = require("tss-react/mui");
+var import_mui35 = require("tss-react/mui");
 var import_jsx_runtime99 = require("react/jsx-runtime");
-var useStyles32 = (0, import_mui34.makeStyles)()(() => ({
+var useStyles33 = (0, import_mui35.makeStyles)()(() => ({
   numpadContainer: {
     display: "flex",
     flexDirection: "row",
@@ -5675,7 +5697,7 @@ var useStyles32 = (0, import_mui34.makeStyles)()(() => ({
   }
 }));
 var NumpadPlus = ({ handleClick, handleUndo }) => {
-  const { classes: styles } = useStyles32();
+  const { classes: styles } = useStyles33();
   return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_material46.Box, { className: styles.numpadContainer, children: [
     /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_material46.Box, { className: styles.numpadNumbersContainer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_material46.Box, { className: styles.numpadRow, children: [
@@ -5810,10 +5832,10 @@ var NumpadPlus_default = NumpadPlus;
 
 // src/components/Pagination/Pagination.tsx
 var import_material47 = require("@mui/material");
-var import_mui35 = require("tss-react/mui");
+var import_mui36 = require("tss-react/mui");
 var import_jsx_runtime100 = require("react/jsx-runtime");
 var paginationHeight = "56px";
-var useStyles33 = (0, import_mui35.makeStyles)()((theme) => ({
+var useStyles34 = (0, import_mui36.makeStyles)()((theme) => ({
   root: {
     display: "flex",
     flexDirection: "row",
@@ -5850,7 +5872,7 @@ var PaginationForTable = ({
   style,
   updateFilters
 }) => {
-  const { classes, cx } = useStyles33();
+  const { classes, cx } = useStyles34();
   const handleChange = (event, value) => {
     updateFilters({ ...appliedFilters, page: value });
   };
@@ -5940,9 +5962,9 @@ var PhoneInput_default = PhoneInput;
 var import_react26 = require("react");
 var import_react_hook_form7 = require("react-hook-form");
 var import_material49 = require("@mui/material");
-var import_mui36 = require("tss-react/mui");
+var import_mui37 = require("tss-react/mui");
 var import_jsx_runtime102 = require("react/jsx-runtime");
-var useStyles34 = (0, import_mui36.makeStyles)()((theme) => ({
+var useStyles35 = (0, import_mui37.makeStyles)()((theme) => ({
   container: {
     position: "relative",
     /**
@@ -6083,7 +6105,7 @@ var PlusMinusInput = ({
     }
     updateInputValue(value);
   };
-  const { classes, cx } = useStyles34();
+  const { classes, cx } = useStyles35();
   return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
     import_material49.FormGroup,
     {
@@ -6160,11 +6182,11 @@ var PlusMinusInput_default = PlusMinusInput;
 // src/components/ProductBust/ProductBust.tsx
 var import_react27 = require("react");
 var import_material51 = require("@mui/material");
-var import_mui38 = require("tss-react/mui");
+var import_mui39 = require("tss-react/mui");
 
 // src/components/ProductImage/ProductImage.tsx
 var import_material50 = require("@mui/material");
-var import_mui37 = require("tss-react/mui");
+var import_mui38 = require("tss-react/mui");
 var import_jsx_runtime103 = require("react/jsx-runtime");
 var PImage = ({
   classes,
@@ -6181,7 +6203,7 @@ var PImage = ({
   ),
   status && status !== "ACTIVE" && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: classes.c_productbust__label_status, children: status })
 ] });
-var ProductImage = (0, import_mui37.withStyles)(PImage, (theme) => ({
+var ProductImage = (0, import_mui38.withStyles)(PImage, (theme) => ({
   c_productbust__label_status: {
     position: "absolute",
     color: "white",
@@ -6372,7 +6394,7 @@ var PBust = ({
     )
   ] });
 };
-var ProductBust = (0, import_mui38.withStyles)(PBust, (theme) => ({
+var ProductBust = (0, import_mui39.withStyles)(PBust, (theme) => ({
   c_productbust: {
     flex: 1,
     display: "flex",
@@ -6464,10 +6486,10 @@ var ProductBust_default = ProductBust;
 
 // src/components/RenderAvatar/RenderAvatar.tsx
 var import_material52 = require("@mui/material");
-var import_mui39 = require("tss-react/mui");
+var import_mui40 = require("tss-react/mui");
 var import_jsx_runtime105 = require("react/jsx-runtime");
 var RenderAvatar = ({ active }) => {
-  const StyledBadge = (0, import_mui39.withStyles)(import_material52.Badge, () => ({
+  const StyledBadge = (0, import_mui40.withStyles)(import_material52.Badge, () => ({
     root: {
       ".MuiBadge-dot": {
         backgroundColor: active ? colors.muiSuccess : colors.neutral700
@@ -6502,7 +6524,7 @@ var RenderAvatar_default = RenderAvatar;
 var import_react29 = require("react");
 var import_WarningAmber = __toESM(require("@mui/icons-material/WarningAmber"), 1);
 var import_material53 = require("@mui/material");
-var import_mui40 = require("tss-react/mui");
+var import_mui41 = require("tss-react/mui");
 
 // src/utils/useGetActiveSection.ts
 var import_react28 = require("react");
@@ -6510,7 +6532,7 @@ var transformNameToID = (name) => name.replaceAll(" ", "_").toLocaleLowerCase();
 
 // src/components/RenderContentList/RenderContentList.tsx
 var import_jsx_runtime106 = require("react/jsx-runtime");
-var useStyles35 = (0, import_mui40.makeStyles)()(
+var useStyles36 = (0, import_mui41.makeStyles)()(
   (_theme, _params, classes) => ({
     root: {
       [`&.${classes.selected}`]: {
@@ -6529,7 +6551,7 @@ var RenderContentList = ({
   warningItems,
   warningMessage = "Missing information on this section"
 }) => {
-  const { classes } = useStyles35();
+  const { classes } = useStyles36();
   const [active, setActive] = (0, import_react29.useState)(activeSection);
   const observer = (0, import_react29.useRef)(null);
   const isScrolling = (0, import_react29.useRef)(false);
@@ -6636,9 +6658,9 @@ var RenderContentList_default = RenderContentList;
 
 // src/components/RowProductCard/RowProductCard.tsx
 var import_material54 = require("@mui/material");
-var import_mui41 = require("tss-react/mui");
+var import_mui42 = require("tss-react/mui");
 var import_jsx_runtime107 = require("react/jsx-runtime");
-var useStyles36 = (0, import_mui41.makeStyles)()((theme) => ({
+var useStyles37 = (0, import_mui42.makeStyles)()((theme) => ({
   wrapper: {
     display: "flex",
     gap: theme.spacing(2),
@@ -6669,7 +6691,7 @@ var RowProductCard = ({
   product,
   size = "medium"
 }) => {
-  const { classes, cx } = useStyles36();
+  const { classes, cx } = useStyles37();
   const hasColumns = columns.length >= 1;
   const imageSize = {
     small: "c_productbust__image_sm",
@@ -6736,9 +6758,9 @@ var RowProductCard_default = RowProductCard;
 // src/components/ScrollableDialog/ScrollableDialog.tsx
 var import_react30 = require("react");
 var import_material55 = require("@mui/material");
-var import_mui42 = require("tss-react/mui");
+var import_mui43 = require("tss-react/mui");
 var import_jsx_runtime108 = require("react/jsx-runtime");
-var useStyles37 = (0, import_mui42.makeStyles)()((theme) => ({
+var useStyles38 = (0, import_mui43.makeStyles)()((theme) => ({
   dialog: {
     margin: "0 auto",
     [theme.breakpoints.up("md")]: {
@@ -6780,7 +6802,7 @@ var ScrollableDialog = ({
   const [bodyHeight, setBodyHeight] = (0, import_react30.useState)(0);
   const [hasScrollBar, setHasScrollBar] = (0, import_react30.useState)(false);
   const [maxDialogHeight, setMaxDialogHeight] = (0, import_react30.useState)(0);
-  const { classes, cx } = useStyles37();
+  const { classes, cx } = useStyles38();
   const headerRef = (0, import_react30.useRef)(null);
   const footerRef = (0, import_react30.useRef)(null);
   const titleRef = (0, import_react30.useRef)(null);
@@ -6866,16 +6888,16 @@ var ScrollableDialog_default = ScrollableDialog;
 
 // src/components/SearchAndFilterHeader/SearchAndFilterHeader.tsx
 var import_material57 = require("@mui/material");
-var import_mui44 = require("tss-react/mui");
+var import_mui45 = require("tss-react/mui");
 
 // src/components/SearchWithFilters/SearchWithFilters.tsx
 var import_react31 = require("react");
 var React6 = __toESM(require("react"), 1);
-var import_icons_material8 = require("@mui/icons-material");
+var import_icons_material7 = require("@mui/icons-material");
 var import_material56 = require("@mui/material");
-var import_mui43 = require("tss-react/mui");
+var import_mui44 = require("tss-react/mui");
 var import_jsx_runtime109 = require("react/jsx-runtime");
-var useStyles38 = (0, import_mui43.makeStyles)()((theme) => ({
+var useStyles39 = (0, import_mui44.makeStyles)()((theme) => ({
   searchContainer: {
     height: 46,
     padding: "4px",
@@ -6920,7 +6942,7 @@ var SearchWithFilters = ({
   disabled = false
 }) => {
   const [searchText, setSearchText] = (0, import_react31.useState)(searchValue);
-  const { classes } = useStyles38();
+  const { classes } = useStyles39();
   const handleTextChange = (e) => {
     const { value } = e.target;
     setSearchText(value);
@@ -6935,7 +6957,7 @@ var SearchWithFilters = ({
     setSearchText(searchValue);
   }, [searchValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_material56.Paper, { className: classes.searchContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_icons_material8.Search, { className: classes.icon, fontSize: "small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_icons_material7.Search, { className: classes.icon, fontSize: "small" }),
     /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
       import_material56.InputBase,
       {
@@ -6957,7 +6979,7 @@ var SearchWithFilters = ({
         disabled,
         children: [
           "Filters",
-          showFilters ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_icons_material8.ArrowDropUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_icons_material8.ArrowDropDown, {})
+          showFilters ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_icons_material7.ArrowDropUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_icons_material7.ArrowDropDown, {})
         ]
       }
     )
@@ -6967,7 +6989,7 @@ var SearchWithFilters_default = React6.memo(SearchWithFilters);
 
 // src/components/SearchAndFilterHeader/SearchAndFilterHeader.tsx
 var import_jsx_runtime110 = require("react/jsx-runtime");
-var useStyles39 = (0, import_mui44.makeStyles)()((theme) => ({
+var useStyles40 = (0, import_mui45.makeStyles)()((theme) => ({
   wrapper: {
     display: "flex",
     flexDirection: "column",
@@ -7001,7 +7023,7 @@ var SearchAndFilterHeader = ({
   appliedFiltersComponent,
   searchValue
 }) => {
-  const { classes } = useStyles39();
+  const { classes } = useStyles40();
   return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material57.Paper, { children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_material57.Box, { className: classes.wrapper, children: [
     /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_material57.Box, { className: classes.container, children: [
       /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_material57.Box, { className: classes.leftSection, children: [
@@ -7028,15 +7050,15 @@ var SearchAndFilterHeader_default = SearchAndFilterHeader;
 // src/components/SearchAndFilterHeader/SearchAndFilterHeaderForTable.tsx
 var React7 = __toESM(require("react"), 1);
 var import_material59 = require("@mui/material");
-var import_mui46 = require("tss-react/mui");
+var import_mui47 = require("tss-react/mui");
 
 // src/components/SearchWithFilters/SearchWithFiltersForTable.tsx
 var import_react32 = require("react");
-var import_icons_material9 = require("@mui/icons-material");
+var import_icons_material8 = require("@mui/icons-material");
 var import_material58 = require("@mui/material");
-var import_mui45 = require("tss-react/mui");
+var import_mui46 = require("tss-react/mui");
 var import_jsx_runtime111 = require("react/jsx-runtime");
-var useStyles40 = (0, import_mui45.makeStyles)()((theme) => ({
+var useStyles41 = (0, import_mui46.makeStyles)()((theme) => ({
   c_search: {
     height: 46,
     padding: "4px",
@@ -7094,7 +7116,7 @@ var SearchWithFiltersForTable = (props) => {
     enterPressedInSearch,
     searchedValue
   } = props;
-  const { classes } = useStyles40();
+  const { classes } = useStyles41();
   const [searchText, setSearchText] = (0, import_react32.useState)("");
   const handleTextChange = (e) => {
     const { value } = e.target;
@@ -7109,9 +7131,9 @@ var SearchWithFiltersForTable = (props) => {
       enterPressedInSearch();
     }
   };
-  const ArrowIcon = isOpen ? import_icons_material9.ArrowDropUp : import_icons_material9.ArrowDropDown;
+  const ArrowIcon = isOpen ? import_icons_material8.ArrowDropUp : import_icons_material8.ArrowDropDown;
   return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(import_material58.Paper, { className: classes.c_search, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material58.Box, { className: classes.c_search__icon, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_icons_material9.Search, { className: classes.icon, fontSize: "small" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material58.Box, { className: classes.c_search__icon, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_icons_material8.Search, { className: classes.icon, fontSize: "small" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
       import_material58.InputBase,
       {
@@ -7148,7 +7170,7 @@ var SearchWithFiltersForTable_default = (0, import_react32.memo)(SearchWithFilte
 
 // src/components/SearchAndFilterHeader/SearchAndFilterHeaderForTable.tsx
 var import_jsx_runtime112 = require("react/jsx-runtime");
-var useStyles41 = (0, import_mui46.makeStyles)()((theme) => ({
+var useStyles42 = (0, import_mui47.makeStyles)()((theme) => ({
   container: {
     display: "flex",
     alignItems: "center",
@@ -7178,7 +7200,7 @@ var SearchAndFilterHeaderForTable = (props) => {
     button,
     searchedValue
   } = props;
-  const { classes } = useStyles41();
+  const { classes } = useStyles42();
   return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_material59.Box, { className: classes.container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_material59.Box, { className: classes.leftSection, children: [
       /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(AppLabel_default, { appName }),
@@ -7248,9 +7270,9 @@ var SearchHeader = (0, import_react33.memo)(
 var import_History = __toESM(require("@mui/icons-material/History"), 1);
 var import_Info = __toESM(require("@mui/icons-material/Info"), 1);
 var import_material61 = require("@mui/material");
-var import_mui47 = require("tss-react/mui");
+var import_mui48 = require("tss-react/mui");
 var import_jsx_runtime114 = require("react/jsx-runtime");
-var useStyles42 = (0, import_mui47.makeStyles)()((theme) => ({
+var useStyles43 = (0, import_mui48.makeStyles)()((theme) => ({
   container: {
     display: "flex",
     alignItems: "flex-end",
@@ -7291,7 +7313,7 @@ var SectionName = ({
   buttonDisabled,
   openHistoryLog
 }) => {
-  const { classes } = useStyles42();
+  const { classes } = useStyles43();
   const handleScroll = (e) => {
     e.preventDefault();
     if (sectionId) {
@@ -7590,9 +7612,9 @@ var SmartSelect = (0, import_react35.forwardRef)(
 var import_react36 = require("react");
 var import_material64 = require("@mui/material");
 var import_colors52 = require("@mui/material/colors");
-var import_mui48 = require("tss-react/mui");
+var import_mui49 = require("tss-react/mui");
 var import_jsx_runtime117 = require("react/jsx-runtime");
-var useStyles43 = (0, import_mui48.makeStyles)()((theme) => ({
+var useStyles44 = (0, import_mui49.makeStyles)()((theme) => ({
   red: {
     backgroundColor: import_colors52.red["50"],
     color: import_colors52.red["500"],
@@ -7605,7 +7627,7 @@ var useStyles43 = (0, import_mui48.makeStyles)()((theme) => ({
   }
 }));
 var SquareLabel = ({ color, copy }) => {
-  const { classes } = useStyles43();
+  const { classes } = useStyles44();
   return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.Typography, { className: classes[color], children: copy });
 };
 var SquareLabel_default = (0, import_react36.memo)(SquareLabel);
@@ -7613,7 +7635,7 @@ var SquareLabel_default = (0, import_react36.memo)(SquareLabel);
 // src/components/Switch/Switch.tsx
 var import_react37 = require("react");
 var import_material65 = require("@mui/material");
-var import_mui49 = require("tss-react/mui");
+var import_mui50 = require("tss-react/mui");
 var import_jsx_runtime118 = require("react/jsx-runtime");
 var LSwitch = ({
   checked,
@@ -7646,7 +7668,7 @@ var LSwitch = ({
     ]
   }
 ) });
-var LabelledSwitch = (0, import_mui49.withStyles)(LSwitch, (theme) => ({
+var LabelledSwitch = (0, import_mui50.withStyles)(LSwitch, (theme) => ({
   c_switch: {},
   default: {
     margin: 16,
@@ -7932,7 +7954,7 @@ var SmartTableHeader = (0, import_react39.memo)(
 var import_react40 = require("react");
 var import_material69 = require("@mui/material");
 var import_debounce = __toESM(require_debounce(), 1);
-var import_mui50 = require("tss-react/mui");
+var import_mui51 = require("tss-react/mui");
 var import_uuid = require("uuid");
 
 // src/components/TableLoading/TableLoading.tsx
@@ -7991,7 +8013,7 @@ function calculateRowsPerPage(rowHeight) {
 
 // src/components/Table/Table.tsx
 var import_jsx_runtime122 = require("react/jsx-runtime");
-var useStyles44 = (0, import_mui50.makeStyles)()(() => ({
+var useStyles45 = (0, import_mui51.makeStyles)()(() => ({
   root: {
     height: "calc(100vh - 262px)",
     overflow: "scroll"
@@ -8030,7 +8052,7 @@ var Table = ({
     appliedFilters?.sortField || "delivery_date"
   );
   const [rowsPerPage, setRowsPerPage] = (0, import_react40.useState)(defaultRowsPerPage);
-  const { classes } = useStyles44();
+  const { classes } = useStyles45();
   const rowHeight = 56;
   const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
   const handleRequestSort = (event, property) => {
@@ -8328,9 +8350,9 @@ var TableDesktopRowSelectionBar = ({
 
 // src/components/TableEmptyResult/TableEmptyResult.tsx
 var import_material73 = require("@mui/material");
-var import_mui51 = require("tss-react/mui");
+var import_mui52 = require("tss-react/mui");
 var import_jsx_runtime128 = require("react/jsx-runtime");
-var useStyles45 = (0, import_mui51.makeStyles)()(() => ({
+var useStyles46 = (0, import_mui52.makeStyles)()(() => ({
   tableCellIcon: { padding: 24, height: "calc(100vh - 320px)" },
   tableCellDefault: { padding: 24 }
 }));
@@ -8340,7 +8362,7 @@ var TableEmptyResult = ({
   handleClickOnClearFiltersButton = () => {
   }
 }) => {
-  const { classes } = useStyles45();
+  const { classes } = useStyles46();
   return showClearFilterButton ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
     import_material73.TableCell,
     {
@@ -9445,11 +9467,11 @@ var TableDesktopToolbar = ({
 
 // src/components/TableHeader/TableHeader.tsx
 var import_react48 = require("react");
-var import_icons_material10 = require("@mui/icons-material");
+var import_icons_material9 = require("@mui/icons-material");
 var import_material80 = require("@mui/material");
-var import_mui52 = require("tss-react/mui");
+var import_mui53 = require("tss-react/mui");
 var import_jsx_runtime137 = require("react/jsx-runtime");
-var useStyles46 = (0, import_mui52.makeStyles)()(() => ({
+var useStyles47 = (0, import_mui53.makeStyles)()(() => ({
   sortLabel: {
     "& .MuiTableSortLabel-icon": {
       opacity: 1
@@ -9458,7 +9480,7 @@ var useStyles46 = (0, import_mui52.makeStyles)()(() => ({
 }));
 var TableHeader = ({ cells, onSort = null }) => {
   const [sortableCells, setSortableCells] = (0, import_react48.useState)([]);
-  const { classes } = useStyles46();
+  const { classes } = useStyles47();
   (0, import_react48.useEffect)(() => {
     setSortableCells(cells);
   }, []);
@@ -9498,7 +9520,7 @@ var TableHeader = ({ cells, onSort = null }) => {
     {
       className: classes.sortLabel,
       direction: cell?.direction || "asc",
-      IconComponent: import_icons_material10.ImportExport,
+      IconComponent: import_icons_material9.ImportExport,
       onClick: () => handleSortClick(cell),
       children: cell.label
     }
@@ -9508,9 +9530,9 @@ var TableHeader_default = (0, import_react48.memo)(TableHeader);
 
 // src/components/TextDivider/TextDivider.tsx
 var import_material81 = require("@mui/material");
-var import_mui53 = require("tss-react/mui");
+var import_mui54 = require("tss-react/mui");
 var import_jsx_runtime138 = require("react/jsx-runtime");
-var useStyles47 = (0, import_mui53.makeStyles)()(() => ({
+var useStyles48 = (0, import_mui54.makeStyles)()(() => ({
   icon: {
     fontSize: 20
   },
@@ -9544,7 +9566,7 @@ var TextDivider = ({
   iconPosition = "left",
   titleWeight = "400"
 }) => {
-  const { classes } = useStyles47();
+  const { classes } = useStyles48();
   const iconColor = color ?? colors.neutral900;
   return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
     import_material81.Box,
@@ -9577,11 +9599,11 @@ var TextDivider_default = TextDivider;
 
 // src/components/ThemedDateRangePicker/ThemedDateRangePicker.tsx
 var import_react_dates = require("react-dates");
-var import_mui54 = require("tss-react/mui");
+var import_mui55 = require("tss-react/mui");
 var import_initialize = require("react-dates/initialize");
 var import_datepicker = require("react-dates/lib/css/_datepicker.css");
 var import_jsx_runtime139 = require("react/jsx-runtime");
-var useStyles48 = (0, import_mui54.makeStyles)()((theme) => ({
+var useStyles49 = (0, import_mui55.makeStyles)()((theme) => ({
   wrapper: {
     "& .DateRangePicker": {
       backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : colors.neutral100,
@@ -9675,7 +9697,7 @@ var ThemedDateRangePicker = ({
   className,
   ...props
 }) => {
-  const { classes, cx } = useStyles48();
+  const { classes, cx } = useStyles49();
   return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_react_dates.DateRangePicker, { ...props }) });
 };
 var ThemedDateRangePicker_default = ThemedDateRangePicker;
@@ -9683,9 +9705,9 @@ var ThemedDateRangePicker_default = ThemedDateRangePicker;
 // src/components/TheToolbar/TheToolbar.tsx
 var import_react49 = require("react");
 var import_material82 = require("@mui/material");
-var import_mui55 = require("tss-react/mui");
+var import_mui56 = require("tss-react/mui");
 var import_jsx_runtime140 = require("react/jsx-runtime");
-var useStyles49 = (0, import_mui55.makeStyles)()((theme) => ({
+var useStyles50 = (0, import_mui56.makeStyles)()((theme) => ({
   menuButton: {
     color: theme.palette.primary.contrastText
   },
@@ -9704,7 +9726,7 @@ var TheToolbar = ({
   rightSection,
   isAuthenticated = true
 }) => {
-  const { classes } = useStyles49();
+  const { classes } = useStyles50();
   return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material82.Box, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material82.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material82.Toolbar, { className: classes.topBar, children: [
       isAuthenticated ? /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
@@ -9776,9 +9798,9 @@ var ToastMessage_default = ToastMessage;
 
 // src/components/TwoButtonDialog/TwoButtonDialog.tsx
 var import_material84 = require("@mui/material");
-var import_mui56 = require("tss-react/mui");
+var import_mui57 = require("tss-react/mui");
 var import_jsx_runtime142 = require("react/jsx-runtime");
-var useStyles50 = (0, import_mui56.makeStyles)()((theme) => ({
+var useStyles51 = (0, import_mui57.makeStyles)()((theme) => ({
   paper: {
     padding: theme.spacing(2)
   },
@@ -9806,7 +9828,7 @@ var TwoButtonDialog = ({
   cancelLabel = "CANCEL",
   cancelButton
 }) => {
-  const { classes } = useStyles50();
+  const { classes } = useStyles51();
   return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
     import_material84.Dialog,
     {