@natoora-libs/core 0.1.10 → 0.1.13-dev-doug-2

package/dist/components/index.cjs

@@ -371,6 +371,7 @@ __export(components_exports, {
   ScrollableDialog: () => ScrollableDialog_default,
   SearchAndFilterHeader: () => SearchAndFilterHeader_default,
   SearchAndFilterHeaderForTable: () => SearchAndFilterHeaderForTable_default,
+  SearchFieldDebounced: () => SearchFieldDebounced,
   SearchWithFilters: () => SearchWithFilters_default,
   SearchWithFiltersForTable: () => SearchWithFiltersForTable_default,
   SectionName: () => SectionName_default,
@@ -382,6 +383,9 @@ __export(components_exports, {
   Switch: () => Switch_default,
   Table: () => Table_default,
   TableDesktop: () => TableDesktop_default,
+  TableDesktopFooter: () => TableDesktopFooter,
+  TableDesktopRowCell: () => TableDesktopRowCell,
+  TableDesktopSmartSelect: () => TableDesktopSmartSelect,
   TableEmptyResult: () => TableEmptyResult_default,
   TableHeader: () => TableHeader_default,
   TableLoading: () => TableLoading_default,
@@ -525,70 +529,6 @@ var AlertDialogFullScreen_default = AlertDialogFullScreen;
 var import_material4 = require("@mui/material");
 var import_mui2 = require("tss-react/mui");
 
-// src/resources/styles/colors/darkPalette.ts
-var darkPalette = {
-  // General colors
-  white: "#FFFFFF",
-  black: "#000000",
-  // Neutral
-  neutral50: "#1C1B1A",
-  neutral100: "#1F1F1F",
-  neutral150: "#262626",
-  neutral200: "#2E2E2E",
-  neutral250: "#383838",
-  neutral300: "#424242",
-  neutral400: "#4C4C4C",
-  neutral500: "#666666",
-  neutral600: "#808080",
-  neutral700: "#A3A3A3",
-  neutral750: "#B3B3B3",
-  neutral800: "#CCCCCC",
-  neutral900: "#F5F5F5",
-  // Input and contrast
-  contrast: "#FFFFFF",
-  constrastOpacity50: "rgba(255,255,255,0.5)",
-  // Icon and Material UI colors
-  iconSearch: "#B0B0B0",
-  default: "#444444",
-  muiPrimary: "#E9FB62",
-  muiPrimaryBlack: "#FFFFFF",
-  lightMuiPrimaryColorBackground: "#e9fb6214",
-  lightBlueBackground: "#e9fb6214",
-  muiPrimaryAlternate: "#07BAF1",
-  muiPrimaryHover: "#1890d5",
-  muiSecondary: "#DE5B99",
-  muiSecondaryAlternate: "#EC613C",
-  muiSuccess: "#66BB6A",
-  muiSuccessAlternate: "#81C784",
-  // Transparency variants
-  blackOpacity10: "inherit",
-  blackOpacity20: "inherit",
-  blackOpacity30: "inherit",
-  blackOpacity50: "inherit",
-  blackOpacity80: "inherit",
-  primaryOpacity10: "rgba(233, 251, 98, 0.10)",
-  primaryOpacity20: "rgba(233, 251, 98, 0.20)",
-  primaryOpacity30: "rgba(233, 251, 98, 0.30)",
-  secondaryAlternateOpacity30: "rgba(236, 97, 60, .3)",
-  blueOpacity08: "rgba(25, 118, 210, 0.08)",
-  whiteOpacity10: "rgba(255,255,255,0.1)",
-  whiteOpacity20: "rgba(255,255,255,0.2)",
-  whiteOpacity40: "rgba(255,255,255,0.4)",
-  // Table rows and top bar
-  topBar: "#2e3133",
-  // Button colors
-  // Round Button (default)
-  buttonHoverBackground: "rgba(255, 255, 255, 0.08)",
-  // Active Button
-  buttonActiveText: "#E9FB62",
-  // Contrast Button
-  buttonContrastBorder: "#CECECE",
-  buttonContrastText: "#CECECE",
-  // Error Button
-  error: "#EF5350"
-};
-var darkPalette_default = darkPalette;
-
 // src/resources/styles/colors/lightPalette.ts
 var lightPalette = {
   // General colors
@@ -654,9 +594,8 @@ var lightPalette = {
 var lightPalette_default = lightPalette;
 
 // src/resources/styles/colors.ts
-var stylesheet = localStorage.getItem("@stylesheet");
-var isDarkModeEnabled = stylesheet === "styles/style-dark.css";
-var palette = isDarkModeEnabled ? darkPalette_default : lightPalette_default;
+var isDarkModeEnabled = false;
+var palette = lightPalette_default;
 var colors = {
   white: palette.white,
   black: palette.black,
@@ -3078,7 +3017,7 @@ var RoundButton = ({
       onClick(e);
     }
   };
-  const Button14 = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  const Button15 = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     import_material16.Fab,
     {
       className: cx(
@@ -3102,7 +3041,7 @@ var RoundButton = ({
       children: icon ? iconComponentMap[icon] : children || ""
     }
   );
-  return tooltip ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_material16.Tooltip, { title: tooltip, children: Button14 }) : Button14;
+  return tooltip ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_material16.Tooltip, { title: tooltip, children: Button15 }) : Button15;
 };
 var RoundButton_default = RoundButton;
 
@@ -6494,11 +6433,60 @@ var SearchAndFilterHeaderForTable = (props) => {
 };
 var SearchAndFilterHeaderForTable_default = React4.memo(SearchAndFilterHeaderForTable);
 
+// src/components/SearchFieldDebounced/SearchFieldDebounced.tsx
+var import_react28 = require("react");
+var import_material53 = require("@mui/material");
+var import_Search = __toESM(require("@mui/icons-material/Search"), 1);
+var import_jsx_runtime104 = require("react/jsx-runtime");
+var SearchFieldDebounced = ({
+  onSearch,
+  initialValue = "",
+  debounceDelay = 500
+}) => {
+  const [value, setValue] = (0, import_react28.useState)(initialValue);
+  const debounceRef = (0, import_react28.useRef)(null);
+  const handleChange = (e) => {
+    setValue(e.target.value);
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+    ;
+    debounceRef.current = window.setTimeout(() => {
+      onSearch(e.target.value);
+    }, debounceDelay);
+  };
+  (0, import_react28.useEffect)(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_material53.Box, { width: 285, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+    import_material53.TextField,
+    {
+      fullWidth: true,
+      variant: "outlined",
+      placeholder: "Search",
+      value,
+      onChange: handleChange,
+      slotProps: {
+        input: {
+          sx: {
+            maxHeight: 5,
+            px: 2,
+            py: 2.5
+          },
+          startAdornment: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_material53.InputAdornment, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_Search.default, { fontSize: "small" }) })
+        }
+      }
+    }
+  ) });
+};
+
 // src/components/SectionName/SectionName.tsx
 var import_icons_material11 = require("@mui/icons-material");
-var import_material53 = require("@mui/material");
+var import_material54 = require("@mui/material");
 var import_mui48 = require("tss-react/mui");
-var import_jsx_runtime104 = require("react/jsx-runtime");
+var import_jsx_runtime105 = require("react/jsx-runtime");
 var useStyles43 = (0, import_mui48.makeStyles)()((theme) => ({
   container: {
     display: "flex",
@@ -6541,10 +6529,10 @@ var SectionName = ({
   openHistoryLog
 }) => {
   const { classes } = useStyles43();
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(import_material53.Box, { className: classes.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(import_material53.Box, { className: classes.titleContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
-        import_material53.Typography,
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_material54.Box, { className: classes.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_material54.Box, { className: classes.titleContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+        import_material54.Typography,
         {
           variant: "h5",
           component: "a",
@@ -6553,7 +6541,7 @@ var SectionName = ({
           children: name
         }
       ),
-      tooltipDescription ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_material53.Tooltip, { title: tooltipDescription, placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+      tooltipDescription ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_material54.Tooltip, { title: tooltipDescription, placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
         import_icons_material11.Info,
         {
           fontSize: "small",
@@ -6562,8 +6550,8 @@ var SectionName = ({
         }
       ) }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(import_material53.Box, { className: classes.actionButtons, children: [
-      buttonText ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_material54.Box, { className: classes.actionButtons, children: [
+      buttonText ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
         ExtendedButton_default,
         {
           type: buttonType,
@@ -6576,25 +6564,25 @@ var SectionName = ({
           variant: "text"
         }
       ) : null,
-      openHistoryLog && buttonText && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_material53.Divider, { orientation: "vertical", sx: { height: "24px" } }),
-      openHistoryLog && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_material53.IconButton, { size: "small", onClick: () => openHistoryLog(), children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_icons_material11.History, {}) })
+      openHistoryLog && buttonText && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_material54.Divider, { orientation: "vertical", sx: { height: "24px" } }),
+      openHistoryLog && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_material54.IconButton, { size: "small", onClick: () => openHistoryLog(), children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_icons_material11.History, {}) })
     ] })
   ] });
 };
 var SectionName_default = SectionName;
 
 // src/components/SmartSelect/SmartSelect.tsx
-var import_react28 = require("react");
-var import_material54 = require("@mui/material");
+var import_react29 = require("react");
+var import_material55 = require("@mui/material");
 var import_mui49 = require("tss-react/mui");
-var import_jsx_runtime105 = require("react/jsx-runtime");
+var import_jsx_runtime106 = require("react/jsx-runtime");
 var useStyles44 = (0, import_mui49.makeStyles)()(() => ({
   container: {
     display: "flex",
     flexDirection: "column"
   }
 }));
-var SmartSelect = (0, import_react28.forwardRef)(
+var SmartSelect = (0, import_react29.forwardRef)(
   ({
     value,
     defaultOption,
@@ -6613,9 +6601,9 @@ var SmartSelect = (0, import_react28.forwardRef)(
     menuProps
   }, ref) => {
     const { classes } = useStyles44();
-    const [open, setOpen] = (0, import_react28.useState)(false);
-    const [localOptions, setLocalOptions] = (0, import_react28.useState)(options || []);
-    (0, import_react28.useEffect)(() => {
+    const [open, setOpen] = (0, import_react29.useState)(false);
+    const [localOptions, setLocalOptions] = (0, import_react29.useState)(options || []);
+    (0, import_react29.useEffect)(() => {
       if (options) {
         setLocalOptions(options);
       }
@@ -6654,8 +6642,8 @@ var SmartSelect = (0, import_react28.forwardRef)(
         onChange(selectedOption);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
-      import_material54.FormControl,
+    return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
+      import_material55.FormControl,
       {
         fullWidth: true,
         className: classes.container,
@@ -6664,21 +6652,21 @@ var SmartSelect = (0, import_react28.forwardRef)(
         "data-testid": dataTestId,
         disabled,
         children: [
-          inputLabel && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
-            import_material54.InputLabel,
+          inputLabel && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+            import_material55.InputLabel,
             {
               id: "smart-select-label",
               "data-testid": `${dataTestId}-label`,
               children: inputLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
-            import_material54.Select,
+          /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
+            import_material55.Select,
             {
               ref,
               disabled,
               labelId: "smart-select-label",
-              value,
+              value: value ?? "",
               onChange: handleChange,
               onOpen: handleOpen,
               error,
@@ -6689,26 +6677,26 @@ var SmartSelect = (0, import_react28.forwardRef)(
               MenuProps: menuProps,
               label: inputLabel,
               children: [
-                isFetching && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
-                  import_material54.MenuItem,
+                isFetching && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+                  import_material55.MenuItem,
                   {
                     disabled: true,
                     "data-testid": `${dataTestId}-loading`,
                     id: `${dataTestId}-loading`,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_material54.CircularProgress, { size: 24 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_material55.CircularProgress, { size: 24 })
                   }
                 ),
-                (defaultOption === null || !defaultOptionLabelIsValid || !defaultOptionValueIsValid) && !isFetching && options?.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_material54.MenuItem, { disabled: true, "data-testid": `${dataTestId}-empty-message`, children: emptyMessage }),
-                localOptions.length === 0 && !isFetching && options?.length !== 0 && defaultOptionLabelIsValid && defaultOptionValueIsValid && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
-                  import_material54.MenuItem,
+                (defaultOption === null || !defaultOptionLabelIsValid || !defaultOptionValueIsValid) && !isFetching && options?.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_material55.MenuItem, { disabled: true, "data-testid": `${dataTestId}-empty-message`, children: emptyMessage }),
+                localOptions.length === 0 && !isFetching && options?.length !== 0 && defaultOptionLabelIsValid && defaultOptionValueIsValid && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+                  import_material55.MenuItem,
                   {
                     value: defaultOption?.value,
                     "data-testid": `${dataTestId}-default-option`,
                     children: defaultOption?.label
                   }
                 ),
-                !isFetching && combinedOptions.length > 0 && combinedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
-                  import_material54.MenuItem,
+                !isFetching && combinedOptions.length > 0 && combinedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+                  import_material55.MenuItem,
                   {
                     value: option?.value,
                     "data-testid": `${dataTestId}-option-${option?.value}`,
@@ -6720,7 +6708,7 @@ var SmartSelect = (0, import_react28.forwardRef)(
               ]
             }
           ),
-          helperText && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_material54.FormHelperText, { "data-testid": `${dataTestId}-helper-text`, children: helperText })
+          helperText && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_material55.FormHelperText, { "data-testid": `${dataTestId}-helper-text`, children: helperText })
         ]
       }
     );
@@ -6729,11 +6717,11 @@ var SmartSelect = (0, import_react28.forwardRef)(
 var SmartSelect_default = SmartSelect;
 
 // src/components/SquareLabel/SquareLabel.tsx
-var import_react29 = require("react");
-var import_material55 = require("@mui/material");
+var import_react30 = require("react");
+var import_material56 = require("@mui/material");
 var import_red2 = __toESM(require("@mui/material/colors/red"), 1);
 var import_mui50 = require("tss-react/mui");
-var import_jsx_runtime106 = require("react/jsx-runtime");
+var import_jsx_runtime107 = require("react/jsx-runtime");
 var useStyles45 = (0, import_mui50.makeStyles)()((theme) => ({
   red: {
     backgroundColor: import_red2.default["50"],
@@ -6748,15 +6736,15 @@ var useStyles45 = (0, import_mui50.makeStyles)()((theme) => ({
 }));
 var SquareLabel = ({ color, copy }) => {
   const { classes } = useStyles45();
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_material55.Typography, { className: classes[color], children: copy });
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_material56.Typography, { className: classes[color], children: copy });
 };
-var SquareLabel_default = (0, import_react29.memo)(SquareLabel);
+var SquareLabel_default = (0, import_react30.memo)(SquareLabel);
 
 // src/components/Switch/Switch.tsx
-var import_react30 = require("react");
-var import_material56 = require("@mui/material");
+var import_react31 = require("react");
+var import_material57 = require("@mui/material");
 var import_mui51 = require("tss-react/mui");
-var import_jsx_runtime107 = require("react/jsx-runtime");
+var import_jsx_runtime108 = require("react/jsx-runtime");
 var LSwitch = ({
   checked,
   labelOn,
@@ -6764,8 +6752,8 @@ var LSwitch = ({
   handleChange,
   classes,
   disabled
-}) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: classes.c_switch, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
-  import_material56.Grid2,
+}) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: classes.c_switch, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
+  import_material57.Grid2,
   {
     component: "label",
     container: true,
@@ -6774,9 +6762,9 @@ var LSwitch = ({
       alignItems: "center"
     },
     children: [
-      labelOff && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_material56.Grid2, { children: labelOff }),
-      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_material56.Grid2, { children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
-        import_material56.Switch,
+      labelOff && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_material57.Grid2, { children: labelOff }),
+      /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_material57.Grid2, { children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+        import_material57.Switch,
         {
           checked,
           color: "primary",
@@ -6784,7 +6772,7 @@ var LSwitch = ({
           disabled
         }
       ) }),
-      labelOn && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_material56.Grid2, { children: labelOn })
+      labelOn && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_material57.Grid2, { children: labelOn })
     ]
   }
 ) });
@@ -6806,380 +6794,679 @@ var LabelledSwitch = (0, import_mui51.withStyles)(LSwitch, (theme) => ({
     fontSize: "1rem"
   }
 }));
-var Switch_default = (0, import_react30.memo)(LabelledSwitch);
+var Switch_default = (0, import_react31.memo)(LabelledSwitch);
 
 // src/components/SmartTableHeaderFilterMenu/SmartTableHeaderFilterMenu.tsx
-var import_react31 = require("react");
+var import_react34 = require("react");
 var import_Check = __toESM(require("@mui/icons-material/Check"), 1);
-var import_material57 = require("@mui/material");
+var import_material61 = require("@mui/material");
 var import_classnames3 = __toESM(require("classnames"), 1);
+var import_mui55 = require("tss-react/mui");
+
+// src/components/TableDesktop/TableDesktop.tsx
+var import_react33 = require("react");
+var import_material60 = require("@mui/material");
+var import_mui54 = require("tss-react/mui");
+
+// src/components/SmartTableHeader/SmartTableHeader.tsx
+var import_react32 = require("react");
+var import_material58 = require("@mui/material");
 var import_mui52 = require("tss-react/mui");
-var import_jsx_runtime108 = require("react/jsx-runtime");
+var import_jsx_runtime109 = require("react/jsx-runtime");
 var useStyles46 = (0, import_mui52.makeStyles)()((theme) => ({
-  filterMenu: {
-    display: "flex",
-    flexDirection: "column"
+  root: {
+    backgroundColor: colors.neutral100,
+    height: theme.spacing(6),
+    "& .MuiTableSortLabel-root": {
+      fontWeight: 600,
+      fontSize: ".875rem"
+    }
   },
-  filterOptions: {
-    maxHeight: theme.spacing(62),
-    overflowY: "auto",
-    "&::-webkit-scrollbar": {
-      width: "8px",
-      height: "8px"
-    },
-    "&::-webkit-scrollbar-track": {
-      backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[800] : theme.palette.grey[100]
+  visuallyHidden: {
+    border: 0,
+    clip: "rect(0 0 0 0)",
+    height: 1,
+    margin: -1,
+    overflow: "hidden",
+    padding: 0,
+    position: "absolute",
+    top: 20,
+    width: 1
+  },
+  tableHeaderContent: {
+    borderBottom: "1px solid",
+    borderBottomColor: colors.neutral300,
+    whiteSpace: "nowrap",
+    "& .filter-menu-trigger": {
+      visibility: "hidden",
+      opacity: 0,
+      transition: "visibility 0.1s, opacity 0.1s ease-in"
     },
-    "&::-webkit-scrollbar-thumb": {
-      backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[400],
-      borderRadius: "10px"
+    "&:hover .filter-menu-trigger, & .filter-menu-trigger.has-active-filters": {
+      visibility: "visible",
+      opacity: 1
     },
-    "&::-webkit-scrollbar-thumb:hover": {
-      backgroundColor: theme.palette.mode === "dark" ? theme.palette.common.black : theme.palette.grey[500]
+    "&:hover .MuiTableSortLabel-root": {
+      "& .MuiTableSortLabel-icon": {
+        opacity: 1
+      }
     }
   },
-  filter: {
+  filterMenu: {
     display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
+    flexDirection: "column",
+    gap: theme.spacing(0.5)
+  },
+  filterCheckboxDropdown: {
+    display: "flex",
+    flexDirection: "column",
     padding: theme.spacing(0, 3)
   },
   applyFilterButtonsContainer: {
     display: "flex",
     padding: theme.spacing(0, 1)
-  },
-  saveAsDefaultButton: {
-    color: theme.palette.primary.main
-  },
-  skeleton: {
-    height: theme.spacing(3),
-    margin: theme.spacing(1)
   }
 }));
-var resolveFilterOption = (filterOption) => {
-  if (typeof filterOption === "object") {
-    return filterOption?.label || filterOption?.name || "";
-  }
-  return filterOption;
-};
-var findFilterIndex = (filters, filterOption) => filters.findIndex((item) => {
-  if (typeof item === "string" && typeof filterOption === "string") {
-    return item === filterOption;
-  }
-  if (typeof item === "object" && typeof filterOption === "object") {
-    return item.id === filterOption.id;
-  }
-  return false;
-});
-var SmartTableHeaderFilterMenu = ({
-  headCell,
-  numActiveFilters,
+var SmartTableHeader = ({
+  order,
+  orderBy,
+  headCells,
+  numSelected,
+  numRows,
+  enableCheckboxSelection = false,
   headerFilters,
-  shouldShowCheckOnFilter,
-  onApplyFilters
+  onRequestSort,
+  onSelectAllClick,
+  onApplyFilters,
+  shouldShowCheckOnFilter
 }) => {
   const { classes } = useStyles46();
-  const [anchorEl, setAnchorEl] = (0, import_react31.useState)(null);
-  const [selectedFilters, setSelectedFilters] = (0, import_react31.useState)(
-    headerFilters[headCell.id] ?? []
-  );
-  const filterOptions = headCell.filterOptionsQuery?.data ?? [];
-  const numFilterOptions = filterOptions.length ?? 0;
-  const numCurrentSelectedFilters = selectedFilters.length;
-  const handleFilterMenuOpen = (event) => {
-    if (!numFilterOptions) {
-      headCell.filterOptionsQuery?.refetch();
-    }
-    setAnchorEl(event.currentTarget);
-  };
-  const handleFilterMenuClose = () => {
-    setSelectedFilters(headerFilters[headCell.id]);
-    setAnchorEl(null);
-  };
-  const handleFilterOptionClick = (option) => {
-    const selectedIndex = findFilterIndex(selectedFilters, option);
-    let newSelected;
-    if (selectedIndex === -1) {
-      if (typeof option === "string") {
-        newSelected = [...selectedFilters, option];
-      } else {
-        newSelected = [...selectedFilters, option];
-      }
-    } else {
-      newSelected = selectedFilters.filter(
-        (_, index) => index !== selectedIndex
-      );
-    }
-    setSelectedFilters(newSelected);
-  };
-  const handleApplyFilters = (shouldSave) => {
-    const updatedFilters = {
-      ...headerFilters,
-      [headCell.id]: [...selectedFilters]
-    };
-    onApplyFilters?.(updatedFilters, shouldSave);
-    setAnchorEl(null);
+  const createSortHandler = (property) => (event) => {
+    onRequestSort(event, property);
   };
-  (0, import_react31.useEffect)(() => {
-    setSelectedFilters(headerFilters[headCell.id] ?? []);
-  }, [headerFilters, headCell.id]);
-  const isOptionChecked = (0, import_react31.useMemo)(() => (resolvedOption) => !!selectedFilters?.some(
-    (value) => resolveFilterOption(value) === resolvedOption
-  ), [selectedFilters]);
-  const loadingSkeletons = /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(import_material57.Box, { "data-testid": "loading-skeletons", width: 272, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_material57.Skeleton, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_material57.Divider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_material57.Skeleton, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_material57.Skeleton, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_material57.Skeleton, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_material57.Skeleton, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_material57.Divider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_material57.Skeleton, { variant: "rounded", className: classes.skeleton })
-  ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(import_jsx_runtime108.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-      ActiveFiltersIconButton_default,
+  const isSortActive = (headCellId) => orderBy === headCellId;
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.TableHead, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_material58.TableRow, { children: [
+    enableCheckboxSelection ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.TableCell, { padding: "checkbox", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+      import_material58.Checkbox,
       {
-        numActiveFilters,
-        handleClick: handleFilterMenuOpen,
-        className: (0, import_classnames3.default)("filter-menu-trigger", {
-          "has-active-filters": !!numActiveFilters || !!anchorEl
-        })
+        color: "primary",
+        disableRipple: true,
+        indeterminate: numSelected > 0 && numSelected < numRows,
+        checked: numRows > 0 && numSelected === numRows,
+        onChange: onSelectAllClick
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-      import_material57.Menu,
+    ) }) : null,
+    headCells.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+      import_material58.TableCell,
       {
-        open: !!anchorEl,
-        onClose: handleFilterMenuClose,
-        anchorEl,
-        "data-testid": "filter-menu",
-        anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        transformOrigin: { vertical: "top", horizontal: "right" },
-        children: headCell.filterOptionsQuery?.isFetching ? loadingSkeletons : /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(import_material57.Box, { className: classes.filterMenu, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_material57.Box, { px: 3, mb: 0.5, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-            import_material57.FormControlLabel,
-            {
-              label: "Select All",
-              control: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-                import_material57.Checkbox,
+        className: classes.tableHeaderContent,
+        align: "left",
+        width: headCell.width ?? "auto",
+        sortDirection: orderBy === headCell.id ? order : false,
+        children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+          import_material58.Box,
+          {
+            display: "flex",
+            flexDirection: "row",
+            gap: headCell.disableSort ? 1 : 0,
+            children: [
+              headCell.disableSort ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Typography, { variant: "subtitle2", mt: 0.25, fontWeight: 600, children: headCell.label }) : /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+                import_material58.TableSortLabel,
                 {
-                  disableRipple: true,
-                  checked: numCurrentSelectedFilters === numFilterOptions,
-                  indeterminate: numCurrentSelectedFilters > 0 && numCurrentSelectedFilters < numFilterOptions,
-                  onChange: ({ target: { checked } }) => {
-                    if (checked) {
-                      setSelectedFilters([...filterOptions]);
-                    } else {
-                      setSelectedFilters([]);
-                    }
-                  }
-                }
-              )
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_material57.Divider, { sx: { mb: 0.5 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_material57.Box, { className: classes.filterOptions, children: filterOptions.map(
-            (option) => {
-              const resolvedOption = resolveFilterOption(option);
-              return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
-                import_material57.Box,
-                {
-                  className: classes.filter,
+                  "data-testid": "table-sort-label",
+                  active: isSortActive(headCell.id),
+                  direction: orderBy === headCell.id ? order : "asc",
+                  onClick: createSortHandler(headCell.id),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-                      import_material57.FormControlLabel,
-                      {
-                        label: resolvedOption,
-                        control: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-                          import_material57.Checkbox,
-                          {
-                            disableRipple: true,
-                            onChange: () => handleFilterOptionClick(option),
-                            checked: isOptionChecked(resolvedOption)
-                          }
-                        )
-                      },
-                      resolvedOption
-                    ),
-                    shouldShowCheckOnFilter?.(headCell.id, option) ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_material57.Tooltip, { title: "This filter is saved as default", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_Check.default, { fontSize: "small", color: "action" }) }) : null
+                    headCell.RenderHeader ?? headCell.label,
+                    orderBy === headCell.id ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: classes.visuallyHidden, children: order === "desc" ? "sorted descending" : "sorted ascending" }) : null
                   ]
-                },
-                resolvedOption
-              );
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_material57.Divider, { sx: { mb: 0.5 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(import_material57.Box, { className: classes.applyFilterButtonsContainer, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-              ExtendedButton_default,
-              {
-                copy: "Save as Default",
-                buttonType: "button",
-                variant: "text",
-                tooltip: "Persists those filters for future visits",
-                className: classes.saveAsDefaultButton,
-                onClick: () => handleApplyFilters(true)
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-              ExtendedButton_default,
-              {
-                copy: "Apply",
-                color: "primary",
-                buttonType: "submit",
-                onClick: () => handleApplyFilters(false)
-              }
-            )
-          ] })
-        ] })
-      }
-    )
-  ] });
+                }
+              ),
+              headCell.refetchFilterOptions ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+                SmartTableHeaderFilterMenu_default,
+                {
+                  headCell,
+                  headerFilters,
+                  numActiveFilters: headerFilters[headCell.id]?.length ?? 0,
+                  onApplyFilters,
+                  shouldShowCheckOnFilter
+                }
+              ) : null
+            ]
+          }
+        )
+      },
+      headCell.id
+    ))
+  ] }) });
 };
-var SmartTableHeaderFilterMenu_default = (0, import_react31.memo)(SmartTableHeaderFilterMenu);
+var SmartTableHeader_default = (0, import_react32.memo)(SmartTableHeader);
 
-// src/components/SmartTableHeader/SmartTableHeader.tsx
-var import_react32 = require("react");
-var import_material58 = require("@mui/material");
+// src/components/TableEmptyResult/TableEmptyResult.tsx
+var import_material59 = require("@mui/material");
 var import_mui53 = require("tss-react/mui");
-var import_jsx_runtime109 = require("react/jsx-runtime");
-var useStyles47 = (0, import_mui53.makeStyles)()((theme) => ({
-  root: {
-    backgroundColor: colors.neutral100,
-    height: theme.spacing(6),
-    "& .MuiTableSortLabel-root": {
-      fontWeight: 600,
-      fontSize: ".875rem"
+var import_jsx_runtime110 = require("react/jsx-runtime");
+var useStyles47 = (0, import_mui53.makeStyles)()(() => ({
+  tableCellIcon: { padding: 24, height: "calc(100vh - 320px)" },
+  tableCellDefault: { padding: 24 }
+}));
+var TableEmptyResult = ({
+  colSpan,
+  showClearFilterButton = false,
+  handleClickOnClearFiltersButton = () => {
+  }
+}) => {
+  const { classes } = useStyles47();
+  return showClearFilterButton ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material59.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
+    import_material59.TableCell,
+    {
+      className: classes.tableCellIcon,
+      colSpan,
+      align: "center",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(EmptyGlassIcon_default, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material59.Typography, { variant: "h6", children: "No results found." }),
+        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material59.Typography, { variant: "subtitle1", children: "Search without applied filters?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+          FilledButton_default,
+          {
+            copy: "Search",
+            variant: "contained",
+            color: "primary",
+            onClick: handleClickOnClearFiltersButton
+          }
+        )
+      ]
     }
+  ) }) : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material59.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+    import_material59.TableCell,
+    {
+      className: classes.tableCellDefault,
+      colSpan,
+      align: "center",
+      children: "Nothing to display"
+    }
+  ) });
+};
+var TableEmptyResult_default = TableEmptyResult;
+
+// src/components/TableDesktop/TableDesktop.tsx
+var import_jsx_runtime111 = require("react/jsx-runtime");
+var ROW_HEIGHT = 56;
+var useStyles48 = (0, import_mui54.makeStyles)()((theme) => ({
+  root: {
+    justifyContent: "space-between",
+    display: "flex",
+    justifyItems: "stretch"
   },
-  visuallyHidden: {
-    border: 0,
-    clip: "rect(0 0 0 0)",
-    height: 1,
-    margin: -1,
-    overflow: "hidden",
-    padding: 0,
-    position: "absolute",
-    top: 20,
-    width: 1
+  paper: {
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between"
   },
-  tableHeaderContent: {
-    borderBottom: "1px solid",
-    borderBottomColor: colors.neutral250,
-    whiteSpace: "nowrap",
-    "& .filter-menu-trigger": {
-      visibility: "hidden",
-      opacity: 0,
-      transition: "visibility 0.1s, opacity 0.1s ease-in"
+  container: {
+    maxHeight: "100%",
+    "&::-webkit-scrollbar": {
+      width: "8px",
+      height: "8px"
     },
-    "&:hover .filter-menu-trigger, & .filter-menu-trigger.has-active-filters": {
-      visibility: "visible",
-      opacity: 1
+    "&::-webkit-scrollbar-track": {
+      backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[800] : theme.palette.grey[100]
     },
-    "&:hover .MuiTableSortLabel-root": {
-      "& .MuiTableSortLabel-icon": {
-        opacity: 1
+    "&::-webkit-scrollbar-thumb": {
+      backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[400],
+      borderRadius: "10px"
+    },
+    "&::-webkit-scrollbar-thumb:hover": {
+      backgroundColor: theme.palette.mode === "dark" ? theme.palette.common.black : theme.palette.grey[500]
+    }
+  }
+}));
+var descendingComparator = (a, b, orderBy) => {
+  const objA = a[orderBy];
+  const objB = b[orderBy];
+  const valA = typeof objA === "object" ? objA?.name : objA;
+  const valB = typeof objB === "object" ? objB?.name : objB;
+  if (!valA && !valB) {
+    return 0;
+  }
+  if (valA && !valB) {
+    return -1;
+  }
+  if (!valA && valB) {
+    return 1;
+  }
+  if (valA > valB) {
+    return -1;
+  }
+  if (valA < valB) {
+    return 1;
+  }
+  return 0;
+};
+var stableSort = (array, cmp) => array.map((el, index) => ({ el, index })).sort((a, b) => {
+  const order = cmp(a.el, b.el);
+  return order !== 0 ? order : a.index - b.index;
+}).map((el) => el.el);
+var getComparator = (order, orderBy) => order === "desc" ? (a, b) => descendingComparator(a, b, orderBy) : (a, b) => -descendingComparator(a, b, orderBy);
+var resolveOptionType = (option, fieldName) => {
+  if (!option || typeof option !== "object") {
+    return option;
+  }
+  return option[fieldName] || "";
+};
+var TableDesktop = ({
+  data,
+  headCells,
+  RenderItem,
+  appliedFilters,
+  headerFilters,
+  children,
+  height,
+  isLoading,
+  rowsPerPage = 50,
+  enableCheckboxSelection = false,
+  disableInternalSort = false,
+  updateSort,
+  showClearFilterButton,
+  handleClickOnClearFiltersButton,
+  deleteItem,
+  keyField = "id",
+  tableLayout = "auto",
+  onApplyFilters,
+  shouldShowCheckOnFilter
+}) => {
+  const { classes } = useStyles48();
+  const [order, setOrder] = (0, import_react33.useState)(appliedFilters?.sortDir || "desc");
+  const [orderBy, setOrderBy] = (0, import_react33.useState)(
+    appliedFilters?.sortField || "delivery_date"
+  );
+  const [selected, setSelected] = (0, import_react33.useState)(/* @__PURE__ */ new Set());
+  const [page] = (0, import_react33.useState)(0);
+  const numRows = data.length;
+  const emptyRows = (0, import_react33.useMemo)(
+    () => rowsPerPage - data.length,
+    [rowsPerPage, data]
+  );
+  const visibleHeadCells = (0, import_react33.useMemo)(
+    () => headCells.filter((headCell) => headCell?.enabled ?? true),
+    [headCells]
+  );
+  const handleSelectAllClick = (0, import_react33.useCallback)(
+    (event) => {
+      if (event.target.checked) {
+        const allItems = new Set(data.map((n) => n[keyField]));
+        setSelected(allItems);
+      } else {
+        setSelected(/* @__PURE__ */ new Set());
       }
+    },
+    [data, keyField]
+  );
+  const handleRequestSort = (event, property) => {
+    const isAsc = orderBy === property && order === "asc";
+    const orderDir = isAsc ? "desc" : "asc";
+    setOrder(orderDir);
+    setOrderBy(property);
+    if (updateSort) {
+      updateSort(property, orderDir);
     }
-  },
+  };
+  const handleRowCheckboxChange = (0, import_react33.useCallback)(
+    (event, keyFieldValue) => {
+      event.stopPropagation();
+      setSelected((prev) => {
+        const newSelected = new Set(prev);
+        if (newSelected.has(keyFieldValue)) {
+          newSelected.delete(keyFieldValue);
+        } else {
+          newSelected.add(keyFieldValue);
+        }
+        return newSelected;
+      });
+    },
+    []
+  );
+  const renderTableRows = (0, import_react33.useMemo)(() => {
+    if (isLoading) {
+      return [...Array(Math.min(numRows, rowsPerPage))].map((_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableRow, { children: [...Array(visibleHeadCells.length)].map((_2, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+        import_material60.Skeleton,
+        {
+          animation: "pulse",
+          variant: "rounded",
+          height: ROW_HEIGHT - 33,
+          sx: { bgcolor: colors.neutral100 },
+          "data-testid": "loading-skeleton"
+        }
+      ) }, cellIndex)) }, rowIndex));
+    }
+    const sortedData = disableInternalSort ? data : stableSort(data, getComparator(order, orderBy));
+    return sortedData.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row, index) => {
+      const isItemSelected = selected.has(row[keyField]);
+      return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+        RenderItem,
+        {
+          ...{
+            ...row,
+            index,
+            deleteItem,
+            isItemSelected,
+            enableCheckboxSelection,
+            rowHeight: ROW_HEIGHT,
+            rowId: row[keyField],
+            handleRowCheckboxChange,
+            visibleHeadCells
+          }
+        },
+        row[keyField] ?? index
+      );
+    });
+  }, [
+    data,
+    order,
+    orderBy,
+    page,
+    rowsPerPage,
+    selected,
+    isLoading,
+    numRows,
+    enableCheckboxSelection,
+    disableInternalSort,
+    deleteItem,
+    keyField,
+    handleRowCheckboxChange,
+    visibleHeadCells,
+    RenderItem
+  ]);
+  (0, import_react33.useEffect)(() => {
+    if (!enableCheckboxSelection) {
+      setSelected(/* @__PURE__ */ new Set());
+    }
+  }, [enableCheckboxSelection]);
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { className: classes.root, style: { height }, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(import_material60.Paper, { className: classes.paper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
+      import_material60.Table,
+      {
+        stickyHeader: true,
+        "aria-labelledby": "tableTitle",
+        "aria-label": "sticky table",
+        style: { tableLayout },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+            SmartTableHeader_default,
+            {
+              headCells: visibleHeadCells,
+              order,
+              orderBy,
+              numSelected: selected.size,
+              numRows,
+              enableCheckboxSelection,
+              headerFilters: headerFilters ?? {},
+              onRequestSort: handleRequestSort,
+              onSelectAllClick: handleSelectAllClick,
+              onApplyFilters,
+              shouldShowCheckOnFilter
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableBody, { children: rowsPerPage !== emptyRows ? renderTableRows : /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+            TableEmptyResult_default,
+            {
+              colSpan: enableCheckboxSelection ? visibleHeadCells.length + 1 : visibleHeadCells.length,
+              showClearFilterButton,
+              handleClickOnClearFiltersButton
+            }
+          ) })
+        ]
+      }
+    ) }),
+    children
+  ] }) });
+};
+var TableDesktop_default = TableDesktop;
+
+// src/components/SmartTableHeaderFilterMenu/SmartTableHeaderFilterMenu.tsx
+var import_jsx_runtime112 = require("react/jsx-runtime");
+var useStyles49 = (0, import_mui55.makeStyles)()((theme) => ({
   filterMenu: {
     display: "flex",
-    flexDirection: "column",
-    gap: theme.spacing(0.5)
+    flexDirection: "column"
   },
-  filterCheckboxDropdown: {
+  filterOptions: {
+    maxHeight: theme.spacing(62),
+    overflowY: "auto",
+    "&::-webkit-scrollbar": {
+      width: "8px",
+      height: "8px"
+    },
+    "&::-webkit-scrollbar-track": {
+      backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[800] : theme.palette.grey[100]
+    },
+    "&::-webkit-scrollbar-thumb": {
+      backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[400],
+      borderRadius: "10px"
+    },
+    "&::-webkit-scrollbar-thumb:hover": {
+      backgroundColor: theme.palette.mode === "dark" ? theme.palette.common.black : theme.palette.grey[500]
+    }
+  },
+  filter: {
     display: "flex",
-    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "space-between",
     padding: theme.spacing(0, 3)
   },
   applyFilterButtonsContainer: {
     display: "flex",
-    padding: theme.spacing(0, 1)
+    padding: theme.spacing(0, 1),
+    justifyContent: "space-between"
+  },
+  saveAsDefaultButton: {
+    color: theme.palette.primary.main
+  },
+  skeleton: {
+    height: theme.spacing(3),
+    margin: theme.spacing(1)
   }
 }));
-var SmartTableHeader = ({
-  order,
-  orderBy,
-  headCells,
-  numSelected,
-  numRows,
-  enableCheckboxSelection = false,
+var findFilterIndex = (filters, filterOption) => filters.findIndex((item) => {
+  if (typeof item === "string" && typeof filterOption === "string") {
+    return item === filterOption;
+  }
+  if (typeof item === "object" && typeof filterOption === "object") {
+    return item.id === filterOption.id;
+  }
+  return false;
+});
+var SmartTableHeaderFilterMenu = ({
+  headCell,
+  numActiveFilters,
   headerFilters,
-  onRequestSort,
-  onSelectAllClick,
-  onApplyFilters,
-  shouldShowCheckOnFilter
+  shouldShowCheckOnFilter,
+  onApplyFilters
 }) => {
-  const { classes } = useStyles47();
-  const createSortHandler = (property) => (event) => {
-    onRequestSort(event, property);
+  const { classes } = useStyles49();
+  const [anchorEl, setAnchorEl] = (0, import_react34.useState)(null);
+  const [filterOptionsData, setFilterOptionsData] = (0, import_react34.useState)();
+  const [selectedFilters, setSelectedFilters] = (0, import_react34.useState)(
+    headerFilters[headCell.id] ?? []
+  );
+  (0, import_react34.useEffect)(() => {
+    if (headCell.filterOptions) {
+      setFilterOptionsData(headCell.filterOptions);
+    }
+  }, [headCell.filterOptions]);
+  const numFilterOptions = (0, import_react34.useMemo)(() => filterOptionsData?.length ?? 0, [filterOptionsData?.length]);
+  const numCurrentSelectedFilters = selectedFilters.length;
+  const handleFilterMenuOpen = (event) => {
+    if (!numFilterOptions) {
+      headCell.refetchFilterOptions?.();
+    }
+    setAnchorEl(event.currentTarget);
   };
-  const isSortActive = (headCellId) => orderBy === headCellId;
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.TableHead, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_material58.TableRow, { children: [
-    enableCheckboxSelection ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.TableCell, { padding: "checkbox", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-      import_material58.Checkbox,
+  const handleFilterMenuClose = () => {
+    setSelectedFilters(headerFilters[headCell.id]);
+    setAnchorEl(null);
+  };
+  const handleFilterOptionClick = (option) => {
+    const selectedIndex = findFilterIndex(selectedFilters, option);
+    let newSelected;
+    if (selectedIndex === -1) {
+      if (typeof option === "string") {
+        newSelected = [...selectedFilters, option];
+      } else {
+        newSelected = [...selectedFilters, option];
+      }
+    } else {
+      newSelected = selectedFilters.filter(
+        (_, index) => index !== selectedIndex
+      );
+    }
+    setSelectedFilters(newSelected);
+  };
+  const handleApplyFilters = (shouldSave) => {
+    const updatedFilters = {
+      ...headerFilters,
+      [headCell.id]: [...selectedFilters]
+    };
+    onApplyFilters?.(updatedFilters, shouldSave);
+    setAnchorEl(null);
+  };
+  (0, import_react34.useEffect)(() => {
+    setSelectedFilters(headerFilters[headCell.id] ?? []);
+  }, [headerFilters, headCell.id]);
+  const isOptionChecked = (0, import_react34.useMemo)(() => (resolvedOption) => !!selectedFilters?.some(
+    (value) => resolveOptionType(value, headCell.fieldName ?? "") === resolvedOption
+  ), [selectedFilters]);
+  const loadingSkeletons = /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_material61.Box, { "data-testid": "loading-skeletons", width: 272, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Skeleton, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Divider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Skeleton, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Skeleton, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Skeleton, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Skeleton, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Divider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Skeleton, { variant: "rounded", className: classes.skeleton })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_jsx_runtime112.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+      ActiveFiltersIconButton_default,
       {
-        color: "primary",
-        indeterminate: numSelected > 0 && numSelected < numRows,
-        checked: numRows > 0 && numSelected === numRows,
-        onChange: onSelectAllClick
+        numActiveFilters,
+        handleClick: handleFilterMenuOpen,
+        className: (0, import_classnames3.default)("filter-menu-trigger", {
+          "has-active-filters": !!numActiveFilters || !!anchorEl
+        })
       }
-    ) }) : null,
-    headCells.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
-      import_material58.TableCell,
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+      import_material61.Menu,
       {
-        className: classes.tableHeaderContent,
-        align: "left",
-        sx: { width: headCell.width ?? "auto" },
-        sortDirection: orderBy === headCell.id ? order : false,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
-            import_material58.TableSortLabel,
+        open: !!anchorEl,
+        onClose: handleFilterMenuClose,
+        anchorEl,
+        "data-testid": "filter-menu",
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        children: headCell.isFetchingFilterOptions ? loadingSkeletons : /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_material61.Box, { className: classes.filterMenu, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Box, { px: 3, mb: 0.5, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+            import_material61.FormControlLabel,
             {
-              "data-testid": "table-sort-label",
-              active: isSortActive(headCell.id),
-              direction: orderBy === headCell.id ? order : "asc",
-              onClick: createSortHandler(headCell.id),
-              children: [
-                headCell.renderHeader ?? headCell.label,
-                orderBy === headCell.id ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: classes.visuallyHidden, children: order === "desc" ? "sorted descending" : "sorted ascending" }) : null
-              ]
+              label: "Select All",
+              control: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+                import_material61.Checkbox,
+                {
+                  disableRipple: true,
+                  checked: numCurrentSelectedFilters === numFilterOptions,
+                  indeterminate: numCurrentSelectedFilters > 0 && numCurrentSelectedFilters < numFilterOptions,
+                  onChange: ({ target: { checked } }) => {
+                    if (checked) {
+                      setSelectedFilters([...filterOptionsData]);
+                    } else {
+                      setSelectedFilters([]);
+                    }
+                  }
+                }
+              )
             }
-          ),
-          headCell.filterOptionsQuery ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-            SmartTableHeaderFilterMenu_default,
-            {
-              headCell,
-              headerFilters,
-              numActiveFilters: headerFilters[headCell.id]?.length ?? 0,
-              onApplyFilters,
-              shouldShowCheckOnFilter
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Divider, { sx: { mb: 0.5 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Box, { className: classes.filterOptions, children: filterOptionsData?.map(
+            (option) => {
+              const resolvedOption = resolveOptionType(option, headCell.fieldName ?? "");
+              return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(
+                import_material61.Box,
+                {
+                  className: classes.filter,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+                      import_material61.FormControlLabel,
+                      {
+                        label: resolvedOption,
+                        control: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+                          import_material61.Checkbox,
+                          {
+                            disableRipple: true,
+                            onChange: () => handleFilterOptionClick(option),
+                            checked: isOptionChecked(resolvedOption)
+                          }
+                        )
+                      },
+                      resolvedOption
+                    ),
+                    shouldShowCheckOnFilter?.(headCell.id, option) ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Tooltip, { title: "This filter is saved as default", children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_Check.default, { fontSize: "small", color: "action" }) }) : null
+                  ]
+                },
+                resolvedOption
+              );
             }
-          ) : null
-        ]
-      },
-      headCell.id
-    ))
-  ] }) });
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Divider, { sx: { mb: 0.5 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_material61.Box, { className: classes.applyFilterButtonsContainer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+              ExtendedButton_default,
+              {
+                copy: "Save as Default",
+                buttonType: "button",
+                variant: "text",
+                tooltip: "Persists those filters for future visits",
+                className: classes.saveAsDefaultButton,
+                onClick: () => handleApplyFilters(true)
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+              ExtendedButton_default,
+              {
+                copy: "Apply",
+                color: "primary",
+                buttonType: "submit",
+                onClick: () => handleApplyFilters(false)
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
 };
-var SmartTableHeader_default = (0, import_react32.memo)(SmartTableHeader);
+var SmartTableHeaderFilterMenu_default = (0, import_react34.memo)(SmartTableHeaderFilterMenu);
 
 // src/components/Table/Table.tsx
-var import_react33 = require("react");
-var import_material60 = require("@mui/material");
+var import_react35 = require("react");
+var import_material63 = require("@mui/material");
 var import_debounce = __toESM(require_debounce(), 1);
-var import_mui54 = require("tss-react/mui");
+var import_mui56 = require("tss-react/mui");
 var import_uuid = require("uuid");
 
 // src/components/TableLoading/TableLoading.tsx
-var import_material59 = require("@mui/material");
-var import_jsx_runtime110 = require("react/jsx-runtime");
+var import_material62 = require("@mui/material");
+var import_jsx_runtime113 = require("react/jsx-runtime");
 var TableLoading = ({
   rowsPerPage,
   rowHeight
-}) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material59.Box, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-  import_material59.Skeleton,
+}) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material62.Box, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+  import_material62.Skeleton,
   {
     animation: "pulse",
     "data-testid": "table-loading-skeleton",
@@ -7192,7 +7479,7 @@ var TableLoading = ({
 var TableLoading_default = TableLoading;
 
 // src/components/Table/helpers.tsx
-function stableSort(array, cmp) {
+function stableSort2(array, cmp) {
   const stabilizedThis = array.map((el, index) => [el, index]);
   stabilizedThis.sort((a, b) => {
     const order = cmp(a[0], b[0]);
@@ -7203,7 +7490,7 @@ function stableSort(array, cmp) {
   });
   return stabilizedThis.map((el) => el[0]);
 }
-function descendingComparator(a, b, orderBy) {
+function descendingComparator2(a, b, orderBy) {
   if (b[orderBy] < a[orderBy]) {
     return -1;
   }
@@ -7213,7 +7500,7 @@ function descendingComparator(a, b, orderBy) {
   return 0;
 }
 function getSorting(order, orderBy) {
-  return order === "desc" ? (a, b) => descendingComparator(a, b, orderBy) : (a, b) => -descendingComparator(a, b, orderBy);
+  return order === "desc" ? (a, b) => descendingComparator2(a, b, orderBy) : (a, b) => -descendingComparator2(a, b, orderBy);
 }
 function calculateRowsPerPage(rowHeight) {
   const appContainerDom = document.getElementById("mainContainer");
@@ -7227,8 +7514,8 @@ function calculateRowsPerPage(rowHeight) {
 }
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime111 = require("react/jsx-runtime");
-var useStyles48 = (0, import_mui54.makeStyles)()(() => ({
+var import_jsx_runtime114 = require("react/jsx-runtime");
+var useStyles50 = (0, import_mui56.makeStyles)()(() => ({
   root: {
     height: "calc(100vh - 262px)",
     overflow: "scroll"
@@ -7249,7 +7536,7 @@ var useStyles48 = (0, import_mui54.makeStyles)()(() => ({
     maxHeight: "calc(100% - 0)"
   }
 }));
-var Table = ({
+var Table2 = ({
   appliedFilters,
   data,
   doNotCalculateRows,
@@ -7260,248 +7547,16 @@ var Table = ({
   RenderItem = null,
   rowsPerPage: defaultRowsPerPage = 10,
   serverRendered,
-  updateSort
-}) => {
-  const [order, setOrder] = (0, import_react33.useState)(appliedFilters?.sortDir || "desc");
-  const [orderBy, setOrderBy] = (0, import_react33.useState)(
-    appliedFilters?.sortField || "delivery_date"
-  );
-  const [rowsPerPage, setRowsPerPage] = (0, import_react33.useState)(defaultRowsPerPage);
-  const { classes } = useStyles48();
-  const rowHeight = 56;
-  const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
-  const handleRequestSort = (event, property) => {
-    const isAsc = orderBy === property && order === "asc";
-    const orderDir = isAsc ? "desc" : "asc";
-    setOrder(orderDir);
-    setOrderBy(property);
-    if (updateSort) {
-      updateSort(property, orderDir);
-    }
-  };
-  (0, import_react33.useLayoutEffect)(() => {
-    if (!doNotCalculateRows) {
-      return;
-    }
-    function updateRowsPerPage() {
-      const newRowsPerPage = calculateRowsPerPage(rowHeight);
-      setRowsPerPage(newRowsPerPage);
-    }
-    updateRowsPerPage();
-    const debounced = (0, import_debounce.default)(updateRowsPerPage, 150);
-    window.addEventListener("resize", debounced);
-    return () => {
-      window.removeEventListener("resize", debounced);
-    };
-  }, [doNotCalculateRows]);
-  const createSortHandler = (property) => (event) => {
-    handleRequestSort(event, property);
-  };
-  const getTableRows = () => {
-    const index = page;
-    const rows = serverRendered ? data : stableSort(data, getSorting(order, orderBy)).slice(
-      index * rowsPerPage,
-      index * rowsPerPage + rowsPerPage
-    );
-    const rowsComponents = rows.map((row) => {
-      if (RenderItem) {
-        return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(RenderItem, { ...row }, row.id);
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableRow, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableCell, { children: row[column.id] }, column.id)) }, row.id);
-    });
-    if (emptyRows > 0 && rowsPerPage > emptyRows) {
-      rowsComponents.push(
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableCell, { colSpan: 8 }) }, (0, import_uuid.v4)())
-      );
-    }
-    return rowsComponents;
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.Paper, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.Box, { className: classes.paper, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(import_material60.Table, { size: "medium", stickyHeader: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableHead, { className: classes.header, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableRow, { children: headCells?.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
-      import_material60.TableCell,
-      {
-        align: "left",
-        sortDirection: orderBy === headCell.id ? order : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
-          import_material60.TableSortLabel,
-          {
-            active: orderBy === headCell.id,
-            direction: orderBy === headCell.id ? order : "asc",
-            onClick: createSortHandler(headCell.id),
-            children: headCell.label
-          }
-        )
-      },
-      headCell.id
-    )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(import_material60.TableBody, { children: [
-      getTableRows(),
-      rowsPerPage === emptyRows && /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableCell, { colSpan: 8, align: "center", children: "Nothing to display" }) })
-    ] })
-  ] }) }) }) });
-};
-var Table_default = Table;
-
-// src/components/TableDesktop/TableDesktop.tsx
-var import_react34 = require("react");
-var import_material62 = require("@mui/material");
-var import_mui56 = require("tss-react/mui");
-
-// src/components/TableEmptyResult/TableEmptyResult.tsx
-var import_material61 = require("@mui/material");
-var import_mui55 = require("tss-react/mui");
-var import_jsx_runtime112 = require("react/jsx-runtime");
-var useStyles49 = (0, import_mui55.makeStyles)()(() => ({
-  tableCellIcon: { padding: 24, height: "calc(100vh - 320px)" },
-  tableCellDefault: { padding: 24 }
-}));
-var TableEmptyResult = ({
-  colSpan,
-  showClearFilterButton = false,
-  handleClickOnClearFiltersButton = () => {
-  }
-}) => {
-  const { classes } = useStyles49();
-  return showClearFilterButton ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(
-    import_material61.TableCell,
-    {
-      className: classes.tableCellIcon,
-      colSpan,
-      align: "center",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(EmptyGlassIcon_default, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Typography, { variant: "h6", children: "No results found." }),
-        /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Typography, { variant: "subtitle1", children: "Search without applied filters?" }),
-        /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
-          FilledButton_default,
-          {
-            copy: "Search",
-            variant: "contained",
-            color: "primary",
-            onClick: handleClickOnClearFiltersButton
-          }
-        )
-      ]
-    }
-  ) }) : /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
-    import_material61.TableCell,
-    {
-      className: classes.tableCellDefault,
-      colSpan,
-      align: "center",
-      children: "Nothing to display"
-    }
-  ) });
-};
-var TableEmptyResult_default = TableEmptyResult;
-
-// src/components/TableDesktop/TableDesktop.tsx
-var import_jsx_runtime113 = require("react/jsx-runtime");
-var useStyles50 = (0, import_mui56.makeStyles)()((theme) => ({
-  root: {
-    justifyContent: "space-between",
-    display: "flex",
-    justifyItems: "stretch"
-  },
-  paper: {
-    width: "100%",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "space-between"
-  },
-  container: {
-    maxHeight: "100%",
-    "&::-webkit-scrollbar": {
-      width: "8px",
-      height: "8px"
-    },
-    "&::-webkit-scrollbar-track": {
-      backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[800] : theme.palette.grey[100]
-    },
-    "&::-webkit-scrollbar-thumb": {
-      backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[400],
-      borderRadius: "10px"
-    },
-    "&::-webkit-scrollbar-thumb:hover": {
-      backgroundColor: theme.palette.mode === "dark" ? theme.palette.common.black : theme.palette.grey[500]
-    }
-  }
-}));
-var descendingComparator2 = (a, b, orderBy) => {
-  const objA = a[orderBy];
-  const objB = b[orderBy];
-  const valA = typeof objA === "object" ? objA?.name : objA;
-  const valB = typeof objB === "object" ? objB?.name : objB;
-  if (!valA && !valB) {
-    return 0;
-  }
-  if (valA && !valB) {
-    return -1;
-  }
-  if (!valA && valB) {
-    return 1;
-  }
-  if (valA > valB) {
-    return -1;
-  }
-  if (valA < valB) {
-    return 1;
-  }
-  return 0;
-};
-var stableSort2 = (array, cmp) => array.map((el, index) => ({ el, index })).sort((a, b) => {
-  const order = cmp(a.el, b.el);
-  return order !== 0 ? order : a.index - b.index;
-}).map((el) => el.el);
-var getComparator = (order, orderBy) => order === "desc" ? (a, b) => descendingComparator2(a, b, orderBy) : (a, b) => -descendingComparator2(a, b, orderBy);
-var TableDesktop = ({
-  data,
-  headCells,
-  RenderItem,
-  appliedFilters,
-  headerFilters,
-  children,
-  height,
-  isLoading,
-  rowsPerPage = 50,
-  enableCheckboxSelection = false,
-  disableInternalSort = false,
-  updateSort,
-  showClearFilterButton,
-  handleClickOnClearFiltersButton,
-  deleteItem,
-  keyField = "id",
-  tableLayout = "auto",
-  onApplyFilters,
-  shouldShowCheckOnFilter
-}) => {
-  const [order, setOrder] = (0, import_react34.useState)(appliedFilters?.sortDir || "desc");
-  const [orderBy, setOrderBy] = (0, import_react34.useState)(
-    appliedFilters?.sortField || "delivery_date"
-  );
-  const [selected, setSelected] = (0, import_react34.useState)([]);
-  const [page] = (0, import_react34.useState)(0);
-  const { classes } = useStyles50();
-  const rowHeight = 56;
-  const emptyRows = (0, import_react34.useMemo)(
-    () => rowsPerPage - data.length,
-    [rowsPerPage, data]
-  );
-  const visibleHeadCells = (0, import_react34.useMemo)(
-    () => headCells.filter((headCell) => headCell?.enabled ?? true),
-    [headCells]
-  );
-  const handleSelectAllClick = (0, import_react34.useCallback)(
-    (event) => {
-      if (event.target.checked) {
-        const newSelected = data.map((n) => n[keyField]);
-        setSelected(newSelected);
-        return;
-      }
-      setSelected([]);
-    },
-    [data, keyField]
+  updateSort
+}) => {
+  const [order, setOrder] = (0, import_react35.useState)(appliedFilters?.sortDir || "desc");
+  const [orderBy, setOrderBy] = (0, import_react35.useState)(
+    appliedFilters?.sortField || "delivery_date"
   );
+  const [rowsPerPage, setRowsPerPage] = (0, import_react35.useState)(defaultRowsPerPage);
+  const { classes } = useStyles50();
+  const rowHeight = 56;
+  const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
   const handleRequestSort = (event, property) => {
     const isAsc = orderBy === property && order === "asc";
     const orderDir = isAsc ? "desc" : "asc";
@@ -7511,119 +7566,419 @@ var TableDesktop = ({
       updateSort(property, orderDir);
     }
   };
-  const handleRowCheckboxClick = (0, import_react34.useCallback)(
-    (event, keyFieldValue) => {
-      const selectedIndex = selected.indexOf(keyFieldValue);
-      let newSelected = [];
-      if (selectedIndex === -1) {
-        newSelected = newSelected.concat(selected, keyFieldValue);
-      } else if (selectedIndex === 0) {
-        newSelected = newSelected.concat(selected.slice(1));
-      } else if (selectedIndex === selected.length - 1) {
-        newSelected = newSelected.concat(selected.slice(0, -1));
-      } else if (selectedIndex > 0) {
-        newSelected = newSelected.concat(
-          selected.slice(0, selectedIndex),
-          selected.slice(selectedIndex + 1)
-        );
+  (0, import_react35.useLayoutEffect)(() => {
+    if (!doNotCalculateRows) {
+      return;
+    }
+    function updateRowsPerPage() {
+      const newRowsPerPage = calculateRowsPerPage(rowHeight);
+      setRowsPerPage(newRowsPerPage);
+    }
+    updateRowsPerPage();
+    const debounced = (0, import_debounce.default)(updateRowsPerPage, 150);
+    window.addEventListener("resize", debounced);
+    return () => {
+      window.removeEventListener("resize", debounced);
+    };
+  }, [doNotCalculateRows]);
+  const createSortHandler = (property) => (event) => {
+    handleRequestSort(event, property);
+  };
+  const getTableRows = () => {
+    const index = page;
+    const rows = serverRendered ? data : stableSort2(data, getSorting(order, orderBy)).slice(
+      index * rowsPerPage,
+      index * rowsPerPage + rowsPerPage
+    );
+    const rowsComponents = rows.map((row) => {
+      if (RenderItem) {
+        return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(RenderItem, { ...row }, row.id);
       }
-      setSelected(newSelected);
-    },
-    [selected]
-  );
-  const renderTableRows = (0, import_react34.useMemo)(() => {
-    const sortedData = disableInternalSort ? data : stableSort2(data, getComparator(order, orderBy));
-    return sortedData.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row, index) => {
-      const isItemSelected = selected.includes(row[keyField]);
-      return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-        RenderItem,
-        {
-          ...{
-            ...row,
-            index,
-            deleteItem,
-            isItemSelected,
-            enableCheckboxSelection,
-            keyFieldValue: row[keyField],
-            handleRowCheckboxClick,
-            visibleHeadCells
-          }
-        },
-        row[keyField] ?? index
-      );
+      return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.TableRow, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.TableCell, { children: row[column.id] }, column.id)) }, row.id);
     });
-  }, [
-    data,
-    order,
-    orderBy,
-    page,
-    rowsPerPage,
-    selected,
-    enableCheckboxSelection,
-    disableInternalSort,
-    deleteItem,
-    keyField,
-    handleRowCheckboxClick,
-    visibleHeadCells,
-    RenderItem
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: classes.root, style: { height }, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_material62.Paper, { className: classes.paper, children: [
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material62.Box, { width: "100%", overflow: "hidden", children: [...Array(Math.floor(rowsPerPage ?? 50))].map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-      import_material62.Skeleton,
+    if (emptyRows > 0 && rowsPerPage > emptyRows) {
+      rowsComponents.push(
+        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.TableCell, { colSpan: 8 }) }, (0, import_uuid.v4)())
+      );
+    }
+    return rowsComponents;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.Paper, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.Box, { className: classes.paper, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_material63.Table, { size: "medium", stickyHeader: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.TableHead, { className: classes.header, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.TableRow, { children: headCells?.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+      import_material63.TableCell,
       {
-        animation: "pulse",
-        variant: "rounded",
-        sx: { margin: 1 },
-        height: rowHeight,
-        "data-testid": "loading-skeleton"
+        align: "left",
+        sortDirection: orderBy === headCell.id ? order : void 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+          import_material63.TableSortLabel,
+          {
+            active: orderBy === headCell.id,
+            direction: orderBy === headCell.id ? order : "asc",
+            onClick: createSortHandler(headCell.id),
+            children: headCell.label
+          }
+        )
       },
-      index
-    )) }) : /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material62.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
-      import_material62.Table,
-      {
-        "aria-labelledby": "tableTitle",
-        "aria-label": "sticky table",
-        stickyHeader: true,
-        style: { tableLayout },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-            SmartTableHeader_default,
-            {
-              headCells: visibleHeadCells,
-              order,
-              orderBy,
-              numSelected: selected.length,
-              numRows: data.length,
-              enableCheckboxSelection,
-              headerFilters: headerFilters ?? {},
-              onRequestSort: handleRequestSort,
-              onSelectAllClick: handleSelectAllClick,
-              onApplyFilters,
-              shouldShowCheckOnFilter
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material62.TableBody, { children: rowsPerPage !== emptyRows ? renderTableRows : /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-            TableEmptyResult_default,
+      headCell.id
+    )) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_material63.TableBody, { children: [
+      getTableRows(),
+      rowsPerPage === emptyRows && /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.TableCell, { colSpan: 8, align: "center", children: "Nothing to display" }) })
+    ] })
+  ] }) }) }) });
+};
+var Table_default = Table2;
+
+// src/components/TableDesktopFooter/TableDesktopFooter.tsx
+var import_Refresh = __toESM(require("@mui/icons-material/Refresh"), 1);
+var import_material64 = require("@mui/material");
+var import_jsx_runtime115 = require("react/jsx-runtime");
+var TableDesktopFooter = ({
+  numPages,
+  page,
+  pageSize,
+  pageSizeOptions,
+  handlePageChange,
+  handlePageSizeChange,
+  refetch,
+  isFetching
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
+    import_material64.Box,
+    {
+      py: 1,
+      gap: 2,
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      borderTop: `1px solid ${colors.neutral300}`,
+      bgcolor: (theme) => theme.palette.background.default,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
+          import_material64.Button,
+          {
+            disableRipple: true,
+            variant: "outlined",
+            onClick: () => refetch(),
+            disabled: isFetching,
+            sx: {
+              ml: 1,
+              gap: 1,
+              borderRadius: 25,
+              color: colors.neutral800,
+              borderColor: colors.neutral600
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                import_Refresh.default,
+                {
+                  fontSize: "small",
+                  color: isFetching ? "disabled" : "primary"
+                }
+              ),
+              "REFRESH"
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material64.Box, { display: "flex", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material64.Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material64.Typography, { children: "Rows per page:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+              import_material64.Select,
+              {
+                value: pageSize,
+                onChange: handlePageSizeChange,
+                size: "small",
+                variant: "standard",
+                children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material64.MenuItem, { value: size, children: size }, size))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+            import_material64.Pagination,
             {
-              colSpan: enableCheckboxSelection ? visibleHeadCells.length + 1 : visibleHeadCells.length,
-              showClearFilterButton,
-              handleClickOnClearFiltersButton
+              color: "standard",
+              count: numPages,
+              page,
+              onChange: handlePageChange
             }
-          ) })
-        ]
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/TableDesktopRowCell/TableDesktopRowCell.tsx
+var import_react38 = require("react");
+var import_material65 = require("@mui/material");
+
+// src/components/TableDesktopRowCell/TableDesktopSmartSelect.tsx
+var import_react36 = require("react");
+var import_jsx_runtime116 = require("react/jsx-runtime");
+var resolveValue = (value) => {
+  if (typeof value === "string") {
+    return value;
+  }
+  return value?.id;
+};
+var TableDesktopSmartSelect = (0, import_react36.memo)(({
+  ref,
+  initialValue,
+  inputLabel,
+  fieldName,
+  rowId,
+  disabled,
+  filterOptions,
+  refetchFilterOptions,
+  isFetchingFilterOptions,
+  onUpdateEditableCell
+}) => {
+  const [value, setValue] = (0, import_react36.useState)(initialValue);
+  const [options, setOptions] = (0, import_react36.useState)();
+  const valueId = resolveValue(value);
+  const valueLabel = resolveOptionType(value, fieldName);
+  (0, import_react36.useEffect)(() => {
+    if (filterOptions) {
+      const parsedOptions = filterOptions?.map((option) => ({
+        value: resolveValue(option),
+        label: String(resolveOptionType(option, fieldName))
+      }));
+      setOptions(parsedOptions);
+    }
+  }, [filterOptions]);
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+    SmartSelect_default,
+    {
+      ref,
+      value: valueId,
+      inputLabel,
+      options,
+      disabled,
+      refetch: refetchFilterOptions,
+      isFetching: isFetchingFilterOptions,
+      defaultOption: {
+        value: valueId ?? "",
+        label: String(valueLabel ?? "")
+      },
+      onChange: ({ value: value2, label }) => {
+        setValue({ id: value2 ?? "", name: label ?? "" });
+        onUpdateEditableCell?.(rowId, value2 ?? "");
       }
-    ) }),
-    children
-  ] }) });
+    }
+  );
+});
+
+// src/components/TableDesktopRowCell/TableDesktopRowCell.tsx
+var import_Check2 = __toESM(require("@mui/icons-material/Check"), 1);
+
+// src/components/TableDesktopRowCell/TableDesktopTextField.tsx
+var import_TextField = __toESM(require("@mui/material/TextField"), 1);
+var import_react37 = require("react");
+var import_jsx_runtime117 = require("react/jsx-runtime");
+var TableDesktopTextField = ({
+  rowId,
+  editInitialValue,
+  inputLabel,
+  disabled,
+  validateInput,
+  onUpdateEditableCell
+}) => {
+  const [value, setValue] = (0, import_react37.useState)(editInitialValue);
+  const hasError = (0, import_react37.useMemo)(() => !validateInput?.(value), [value, validateInput]);
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+    import_TextField.default,
+    {
+      fullWidth: true,
+      variant: "standard",
+      defaultValue: value,
+      label: inputLabel,
+      error: hasError,
+      disabled,
+      onChange: ({ target: { value: value2 } }) => {
+        setValue(value2);
+      },
+      onBlur: ({ target: { value: value2 } }) => {
+        if (hasError) {
+          return;
+        }
+        onUpdateEditableCell?.(rowId, value2);
+      }
+    }
+  );
+};
+
+// src/components/TableDesktopRowCell/TableDesktopRowCell.tsx
+var import_Close = __toESM(require("@mui/icons-material/Close"), 1);
+var import_Edit = __toESM(require("@mui/icons-material/Edit"), 1);
+var import_jsx_runtime118 = require("react/jsx-runtime");
+var TableDesktopRowCell = ({
+  inputLabel,
+  editInitialValue,
+  rowId,
+  fieldName,
+  width,
+  disabled,
+  readOnlyValue,
+  editableCellType,
+  filterOptions,
+  refetchFilterOptions,
+  isFetchingFilterOptions,
+  validateInput,
+  onUpdateEditableCell,
+  onCellClick
+}) => {
+  const cellRef = (0, import_react38.useRef)(null);
+  const [isOverflowed, setIsOverflowed] = (0, import_react38.useState)(false);
+  const [isCellHovered, setIsCellHovered] = (0, import_react38.useState)(false);
+  const [isEditMode, setIsEditMode] = (0, import_react38.useState)(false);
+  (0, import_react38.useEffect)(() => {
+    const ref = cellRef.current;
+    if (ref) {
+      setIsOverflowed(ref.scrollWidth > ref.clientWidth);
+    }
+  }, [readOnlyValue, width]);
+  (0, import_react38.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setIsEditMode(false);
+      }
+    };
+    if (isEditMode) {
+      window.addEventListener("keydown", handleKeyDown);
+    }
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isEditMode]);
+  const editableComponents = {
+    "select": /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+      TableDesktopSmartSelect,
+      {
+        rowId,
+        fieldName,
+        disabled,
+        initialValue: editInitialValue,
+        inputLabel: inputLabel ?? "",
+        filterOptions,
+        refetchFilterOptions,
+        isFetchingFilterOptions,
+        onUpdateEditableCell
+      }
+    ),
+    "checkbox": /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+      import_material65.Checkbox,
+      {
+        disableRipple: true,
+        disabled,
+        defaultChecked: editInitialValue,
+        onChange: ({ target: { checked } }) => {
+          onUpdateEditableCell?.(rowId, checked);
+        }
+      }
+    ),
+    "text": /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+      TableDesktopTextField,
+      {
+        rowId,
+        disabled,
+        editInitialValue,
+        inputLabel: inputLabel ?? "",
+        validateInput,
+        onUpdateEditableCell
+      }
+    ),
+    "numeric": /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+      import_material65.TextField,
+      {
+        fullWidth: true,
+        variant: "standard",
+        disabled,
+        defaultValue: editInitialValue,
+        label: inputLabel,
+        onChange: (e) => {
+          e.target.value = e.target.value.replace(/\D/g, "");
+        },
+        onBlur: ({ target: { value } }) => {
+          onUpdateEditableCell?.(rowId, value);
+        },
+        slotProps: {
+          input: {
+            inputMode: "numeric"
+          }
+        }
+      }
+    )
+  };
+  const getReadOnlyBooleanIcon = (value) => {
+    if (value) {
+      return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_Check2.default, { sx: { fontSize: 16 } });
+    }
+    return "-";
+  };
+  const handleEditClick = (e) => {
+    e.stopPropagation();
+    setIsEditMode((prev) => !prev);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.Tooltip, { title: isOverflowed ? String(readOnlyValue) : "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+    import_material65.TableCell,
+    {
+      align: "left",
+      onMouseEnter: () => editableCellType && !disabled && setIsCellHovered(true),
+      onMouseLeave: () => editableCellType && !disabled && setIsCellHovered(false),
+      onClick: (event) => !disabled && onCellClick?.(event, isEditMode),
+      sx: {
+        padding: 1,
+        width: width ?? "auto",
+        position: "relative",
+        cursor: disabled ? "default" : "pointer",
+        opacity: disabled ? 0.2 : 1,
+        ":hover": editableCellType && {
+          background: isEditMode ? colors.lightBlueBackground : colors.neutral100
+        },
+        background: isEditMode ? colors.lightBlueBackground : (theme) => theme.palette.background.default
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(
+        import_material65.Box,
+        {
+          p: 1,
+          ref: cellRef,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          children: [
+            isCellHovered ? /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.Tooltip, { title: isEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+              import_material65.IconButton,
+              {
+                onClick: handleEditClick,
+                sx: {
+                  top: 0,
+                  right: 0,
+                  zIndex: 1,
+                  borderRadius: 0,
+                  position: "absolute",
+                  background: isEditMode ? colors.lightBlueBackground : colors.neutral100,
+                  "&:hover": {
+                    backgroundColor: isEditMode ? colors.lightBlueBackground : colors.neutral150
+                  }
+                },
+                children: isEditMode ? /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_Close.default, { fontSize: "small", color: "error" }) : /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_Edit.default, { fontSize: "small" })
+              }
+            ) }) : null,
+            isEditMode && editableCellType ? editableComponents[editableCellType] : typeof readOnlyValue === "boolean" ? getReadOnlyBooleanIcon(readOnlyValue) : readOnlyValue
+          ]
+        }
+      )
+    }
+  ) });
 };
-var TableDesktop_default = TableDesktop;
 
 // src/components/TableHeader/TableHeader.tsx
-var import_react35 = require("react");
+var import_react39 = require("react");
 var import_icons_material12 = require("@mui/icons-material");
-var import_material63 = require("@mui/material");
+var import_material66 = require("@mui/material");
 var import_mui57 = require("tss-react/mui");
-var import_jsx_runtime114 = require("react/jsx-runtime");
+var import_jsx_runtime119 = require("react/jsx-runtime");
 var useStyles51 = (0, import_mui57.makeStyles)()(() => ({
   sortLabel: {
     "& .MuiTableSortLabel-icon": {
@@ -7632,9 +7987,9 @@ var useStyles51 = (0, import_mui57.makeStyles)()(() => ({
   }
 }));
 var TableHeader = ({ cells, onSort = null }) => {
-  const [sortableCells, setSortableCells] = (0, import_react35.useState)([]);
+  const [sortableCells, setSortableCells] = (0, import_react39.useState)([]);
   const { classes } = useStyles51();
-  (0, import_react35.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     setSortableCells(cells);
   }, []);
   const getNewSortDirection = (direction) => {
@@ -7668,8 +8023,8 @@ var TableHeader = ({ cells, onSort = null }) => {
     });
     setSortableCells(sortedCells);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.TableRow, { children: sortableCells.map((cell, key) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.TableCell, { children: cell.isSortable ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
-    import_material63.TableSortLabel,
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material66.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material66.TableRow, { children: sortableCells.map((cell, key) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material66.TableCell, { children: cell.isSortable ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+    import_material66.TableSortLabel,
     {
       className: classes.sortLabel,
       direction: cell?.direction || "asc",
@@ -7679,12 +8034,12 @@ var TableHeader = ({ cells, onSort = null }) => {
     }
   ) : cell.label }, cell.label || key)) }) });
 };
-var TableHeader_default = (0, import_react35.memo)(TableHeader);
+var TableHeader_default = (0, import_react39.memo)(TableHeader);
 
 // src/components/TextDivider/TextDivider.tsx
-var import_material64 = require("@mui/material");
+var import_material67 = require("@mui/material");
 var import_mui58 = require("tss-react/mui");
-var import_jsx_runtime115 = require("react/jsx-runtime");
+var import_jsx_runtime120 = require("react/jsx-runtime");
 var useStyles52 = (0, import_mui58.makeStyles)()(() => ({
   icon: {
     fontSize: 20
@@ -7721,19 +8076,19 @@ var TextDivider = ({
 }) => {
   const { classes } = useStyles52();
   const iconColor = color ?? colors.neutral900;
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
-    import_material64.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
+    import_material67.Box,
     {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       className: classes.container,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material64.Divider, { className: classes.leftDivider }),
-        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material64.Button, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material64.Box, { className: classes.center, children: [
-          Icon2 && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } }),
-          /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
-            import_material64.Typography,
+        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material67.Divider, { className: classes.leftDivider }),
+        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material67.Button, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(import_material67.Box, { className: classes.center, children: [
+          Icon2 && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } }),
+          /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+            import_material67.Typography,
             {
               color: "textSecondary",
               className: classes.title,
@@ -7741,9 +8096,9 @@ var TextDivider = ({
               children: title
             }
           ),
-          Icon2 && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } })
+          Icon2 && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material64.Divider, { className: classes.rightDivider })
+        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material67.Divider, { className: classes.rightDivider })
       ]
     }
   );
@@ -7755,7 +8110,7 @@ var import_react_dates = require("react-dates");
 var import_mui59 = require("tss-react/mui");
 var import_initialize = require("react-dates/initialize");
 var import_datepicker = require("react-dates/lib/css/_datepicker.css");
-var import_jsx_runtime116 = require("react/jsx-runtime");
+var import_jsx_runtime121 = require("react/jsx-runtime");
 var useStyles53 = (0, import_mui59.makeStyles)()((theme) => ({
   wrapper: {
     "& .DateRangePicker": {
@@ -7851,15 +8206,15 @@ var ThemedDateRangePicker = ({
   ...props
 }) => {
   const { classes, cx } = useStyles53();
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react_dates.DateRangePicker, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_react_dates.DateRangePicker, { ...props }) });
 };
 var ThemedDateRangePicker_default = ThemedDateRangePicker;
 
 // src/components/TheToolbar/TheToolbar.tsx
-var import_react36 = require("react");
-var import_material65 = require("@mui/material");
+var import_react40 = require("react");
+var import_material68 = require("@mui/material");
 var import_mui60 = require("tss-react/mui");
-var import_jsx_runtime117 = require("react/jsx-runtime");
+var import_jsx_runtime122 = require("react/jsx-runtime");
 var useStyles54 = (0, import_mui60.makeStyles)()((theme) => ({
   menuButton: {
     color: theme.palette.primary.contrastText
@@ -7879,9 +8234,9 @@ var TheToolbar = ({
   rightSection
 }) => {
   const { classes } = useStyles54();
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_material65.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material65.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_material65.Toolbar, { className: classes.topBar, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_material68.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material68.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_material68.Toolbar, { className: classes.topBar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
         RoundButton_default,
         {
           className: classes.menuButton,
@@ -7890,7 +8245,7 @@ var TheToolbar = ({
           onClick: handleOpen
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
         CompanyLogo_default,
         {
           size: "small",
@@ -7899,31 +8254,31 @@ var TheToolbar = ({
           imageLogoLightSmall
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material65.Box, { ml: 2, children: leftSection }),
-      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material65.Box, { ml: "auto", children: rightSection })
+      /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material68.Box, { ml: 2, children: leftSection }),
+      /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material68.Box, { ml: "auto", children: rightSection })
     ] }) }),
     LeftDrawer
   ] });
 };
-var TheToolbar_default = (0, import_react36.memo)(TheToolbar);
+var TheToolbar_default = (0, import_react40.memo)(TheToolbar);
 
 // src/components/ToastMessage/ToastMessage.tsx
-var import_material66 = require("@mui/material");
-var import_jsx_runtime118 = require("react/jsx-runtime");
+var import_material69 = require("@mui/material");
+var import_jsx_runtime123 = require("react/jsx-runtime");
 var ToastMessage = ({
   toastType,
   toastMessage,
   open,
   onClose
-}) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-  import_material66.Snackbar,
+}) => /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+  import_material69.Snackbar,
   {
     open,
     autoHideDuration: 1500,
     onClose,
     anchorOrigin: { vertical: "top", horizontal: "right" },
-    children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-      import_material66.Alert,
+    children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+      import_material69.Alert,
       {
         elevation: 6,
         variant: "filled",
@@ -7949,9 +8304,9 @@ var ToastMessage = ({
 var ToastMessage_default = ToastMessage;
 
 // src/components/TwoButtonDialog/TwoButtonDialog.tsx
-var import_material67 = require("@mui/material");
+var import_material70 = require("@mui/material");
 var import_mui61 = require("tss-react/mui");
-var import_jsx_runtime119 = require("react/jsx-runtime");
+var import_jsx_runtime124 = require("react/jsx-runtime");
 var useStyles55 = (0, import_mui61.makeStyles)()((theme) => ({
   paper: {
     padding: theme.spacing(2)
@@ -7981,20 +8336,20 @@ var TwoButtonDialog = ({
   cancelButton
 }) => {
   const { classes } = useStyles55();
-  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-    import_material67.Dialog,
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+    import_material70.Dialog,
     {
       open,
       disableEnforceFocus: true,
       maxWidth: "sm",
       fullWidth: true,
       closeAfterTransition: true,
-      BackdropComponent: import_material67.Backdrop,
+      BackdropComponent: import_material70.Backdrop,
       BackdropProps: { timeout: 500 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material67.Fade, { in: open, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_material67.Paper, { className: classes.paper, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_material67.Box, { className: classes.mb, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material67.Typography, { variant: "h5", component: "div", children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-            import_material67.Box,
+      children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material70.Fade, { in: open, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material70.Paper, { className: classes.paper, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material70.Box, { className: classes.mb, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material70.Typography, { variant: "h5", component: "div", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+            import_material70.Box,
             {
               sx: {
                 fontWeight: 600
@@ -8002,23 +8357,23 @@ var TwoButtonDialog = ({
               children: title
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
-            import_material67.Box,
+          /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+            import_material70.Box,
             {
               className: classes.mt,
               sx: {
                 fontWeight: 600
               },
               children: [
-                subtitle1 && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material67.Typography, { variant: "subtitle1", children: subtitle1 }),
-                subtitle2 && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material67.Typography, { variant: "subtitle1", children: subtitle2 })
+                subtitle1 && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material70.Typography, { variant: "subtitle1", children: subtitle1 }),
+                subtitle2 && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material70.Typography, { variant: "subtitle1", children: subtitle2 })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material67.Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_material67.Box, { className: classes.buttonContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material70.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material70.Box, { className: classes.buttonContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
             FilledButton_default,
             {
               copy: cancelLabel,
@@ -8031,7 +8386,7 @@ var TwoButtonDialog = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
             FilledButton_default,
             {
               color: "primary",
@@ -8040,7 +8395,7 @@ var TwoButtonDialog = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Loading_default, { isLoading: dialogLoading })
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Loading_default, { isLoading: dialogLoading })
       ] }) })
     }
   );
@@ -8048,30 +8403,30 @@ var TwoButtonDialog = ({
 var TwoButtonDialog_default = TwoButtonDialog;
 
 // src/components/UserBust/UserBust.tsx
-var import_react37 = require("react");
-var import_material68 = require("@mui/material");
-var import_jsx_runtime120 = require("react/jsx-runtime");
-var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-    import_material68.Avatar,
+var import_react41 = require("react");
+var import_material71 = require("@mui/material");
+var import_jsx_runtime125 = require("react/jsx-runtime");
+var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+    import_material71.Avatar,
     {
       src: user.profile_picture,
       alt: "user_avatar",
       style: { width: avatarProps.width, height: avatarProps.height }
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { style: { paddingTop: 16 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material68.Typography, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material68.Typography, { ...typographyProps.username, children: user.username })
+  /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { style: { paddingTop: 16 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material71.Typography, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material71.Typography, { ...typographyProps.username, children: user.username })
   ] })
 ] });
-var UserBust_default = (0, import_react37.memo)(UserBust);
+var UserBust_default = (0, import_react41.memo)(UserBust);
 
 // src/components/icons/IconChart.tsx
-var import_jsx_runtime121 = require("react/jsx-runtime");
+var import_jsx_runtime126 = require("react/jsx-runtime");
 var SvgIconChart = (props) => {
   const { fill } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
     "svg",
     {
       width: "20",
@@ -8080,7 +8435,7 @@ var SvgIconChart = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
         "path",
         {
           d: "M2.49967 11.6667L2.91634 11.725L6.72467 7.91667C6.57467 7.375 6.71634 6.75833 7.15801 6.325C7.80801 5.66667 8.85801 5.66667 9.50801 6.325C9.94967 6.75833 10.0913 7.375 9.94134 7.91667L12.083 10.0583L12.4997 10C12.6497 10 12.7913 10 12.9163 10.0583L15.8913 7.08333C15.833 6.95833 15.833 6.81667 15.833 6.66667C15.833 6.22464 16.0086 5.80072 16.3212 5.48816C16.6337 5.17559 17.0576 5 17.4997 5C17.9417 5 18.3656 5.17559 18.6782 5.48816C18.9907 5.80072 19.1663 6.22464 19.1663 6.66667C19.1663 7.10869 18.9907 7.53262 18.6782 7.84518C18.3656 8.15774 17.9417 8.33333 17.4997 8.33333C17.3497 8.33333 17.208 8.33333 17.083 8.275L14.108 11.25C14.1663 11.375 14.1663 11.5167 14.1663 11.6667C14.1663 12.1087 13.9907 12.5326 13.6782 12.8452C13.3656 13.1577 12.9417 13.3333 12.4997 13.3333C12.0576 13.3333 11.6337 13.1577 11.3212 12.8452C11.0086 12.5326 10.833 12.1087 10.833 11.6667L10.8913 11.25L8.74967 9.10833C8.48301 9.16667 8.18301 9.16667 7.91634 9.10833L4.10801 12.9167L4.16634 13.3333C4.16634 13.7754 3.99075 14.1993 3.67819 14.5118C3.36563 14.8244 2.9417 15 2.49967 15C2.05765 15 1.63372 14.8244 1.32116 14.5118C1.0086 14.1993 0.833008 13.7754 0.833008 13.3333C0.833008 12.8913 1.0086 12.4674 1.32116 12.1548C1.63372 11.8423 2.05765 11.6667 2.49967 11.6667Z",
@@ -8147,6 +8502,7 @@ var IconChart_default = SvgIconChart;
   ScrollableDialog,
   SearchAndFilterHeader,
   SearchAndFilterHeaderForTable,
+  SearchFieldDebounced,
   SearchWithFilters,
   SearchWithFiltersForTable,
   SectionName,
@@ -8158,6 +8514,9 @@ var IconChart_default = SvgIconChart;
   Switch,
   Table,
   TableDesktop,
+  TableDesktopFooter,
+  TableDesktopRowCell,
+  TableDesktopSmartSelect,
   TableEmptyResult,
   TableHeader,
   TableLoading,