@natoora-libs/core 0.1.16-dev-doug-3 → 0.1.17

package/dist/components/index.cjs

@@ -382,10 +382,10 @@ __export(components_exports, {
   SquareLabel: () => SquareLabel_default,
   Switch: () => Switch_default,
   Table: () => Table_default,
-  TableDesktop: () => TableDesktop,
-  TableDesktopCell: () => TableDesktopCell,
-  TableDesktopEditableComponent: () => TableDesktopEditableComponent,
+  TableDesktop: () => TableDesktop_default,
   TableDesktopFooter: () => TableDesktopFooter,
+  TableDesktopRowCell: () => TableDesktopRowCell,
+  TableDesktopSmartSelect: () => TableDesktopSmartSelect,
   TableEmptyResult: () => TableEmptyResult_default,
   TableHeader: () => TableHeader_default,
   TableLoading: () => TableLoading_default,
@@ -6592,7 +6592,6 @@ var SmartSelect = (0, import_react29.forwardRef)(
     onChange,
     inputLabel,
     variant = "standard",
-    size,
     error,
     helperText,
     disabled,
@@ -6647,7 +6646,6 @@ var SmartSelect = (0, import_react29.forwardRef)(
       import_material55.FormControl,
       {
         fullWidth: true,
-        size,
         className: classes.container,
         error,
         variant,
@@ -6666,7 +6664,6 @@ var SmartSelect = (0, import_react29.forwardRef)(
             import_material55.Select,
             {
               ref,
-              size,
               disabled,
               labelId: "smart-select-label",
               value: value ?? "",
@@ -6800,13 +6797,548 @@ var LabelledSwitch = (0, import_mui51.withStyles)(LSwitch, (theme) => ({
 var Switch_default = (0, import_react31.memo)(LabelledSwitch);
 
 // src/components/SmartTableHeaderFilterMenu/SmartTableHeaderFilterMenu.tsx
-var import_react32 = require("react");
+var import_react34 = require("react");
 var import_Check = __toESM(require("@mui/icons-material/Check"), 1);
-var import_material58 = require("@mui/material");
+var import_material62 = 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_material61 = 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_runtime109 = require("react/jsx-runtime");
 var useStyles46 = (0, import_mui52.makeStyles)()((theme) => ({
+  root: {
+    backgroundColor: colors.neutral100,
+    height: theme.spacing(6),
+    "& .MuiTableSortLabel-root": {
+      fontWeight: 600,
+      fontSize: ".875rem"
+    }
+  },
+  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"
+    },
+    "&:hover .filter-menu-trigger, & .filter-menu-trigger.has-active-filters": {
+      visibility: "visible",
+      opacity: 1
+    },
+    "&:hover .MuiTableSortLabel-root": {
+      "& .MuiTableSortLabel-icon": {
+        opacity: 1
+      }
+    }
+  },
+  filterMenu: {
+    display: "flex",
+    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)
+  }
+}));
+var SmartTableHeader = ({
+  order,
+  orderBy,
+  headCells,
+  numSelected,
+  numRows,
+  enableCheckboxSelection = false,
+  headerFilters,
+  onRequestSort,
+  onSelectAllClick,
+  onApplyFilters,
+  shouldShowCheckOnFilter
+}) => {
+  const { classes } = useStyles46();
+  const createSortHandler = (property) => (event) => {
+    onRequestSort(event, property);
+  };
+  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,
+      {
+        color: "primary",
+        disableRipple: true,
+        indeterminate: numSelected > 0 && numSelected < numRows,
+        checked: numRows > 0 && numSelected === numRows,
+        onChange: onSelectAllClick
+      }
+    ) }) : null,
+    headCells.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+      import_material58.TableCell,
+      {
+        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 ? headCell.RenderHeader ?? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Tooltip, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Typography, { variant: "subtitle2", mt: 0.25, fontWeight: 600, children: headCell.label }) }) : /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Tooltip, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+                import_material58.TableSortLabel,
+                {
+                  "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
+                  ]
+                }
+              ) }),
+              headCell.refetchFilterOptions ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+                SmartTableHeaderFilterMenu_default,
+                {
+                  headCell,
+                  headerFilters,
+                  numActiveFilters: headerFilters[headCell.id]?.length ?? 0,
+                  onApplyFilters,
+                  shouldShowCheckOnFilter
+                }
+              ) : null
+            ]
+          }
+        )
+      },
+      headCell.id
+    ))
+  ] }) });
+};
+var SmartTableHeader_default = (0, import_react32.memo)(SmartTableHeader);
+
+// src/components/TableDesktopNoColumnsMessage/TableDesktopNoColumnsMessage.tsx
+var import_TableBody = __toESM(require("@mui/material/TableBody"), 1);
+var import_TableCell = __toESM(require("@mui/material/TableCell"), 1);
+var import_TableRow = __toESM(require("@mui/material/TableRow"), 1);
+var import_Typography = __toESM(require("@mui/material/Typography"), 1);
+
+// src/components/Buttons/IconButton/IconButton.tsx
+var import_material59 = require("@mui/material");
+var import_jsx_runtime110 = require("react/jsx-runtime");
+var IconButton4 = ({ icon, sx, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
+    import_material59.Button,
+    {
+      ...props,
+      sx: {
+        display: "flex",
+        gap: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: 100,
+        ...sx
+      },
+      children: [
+        icon,
+        props.children
+      ]
+    }
+  );
+};
+var IconButton_default = IconButton4;
+
+// src/components/icons/IconTableEdit.tsx
+var import_jsx_runtime111 = require("react/jsx-runtime");
+var SvgIconTableEdit = (props) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("path", { d: "M21.7 13.35L20.7 14.35L18.65 12.3L19.65 11.3C19.86 11.08 20.21 11.08 20.42 11.3L21.7 12.58C21.92 12.79 21.92 13.14 21.7 13.35ZM12 18.94L18.07 12.88L20.12 14.93L14.06 21H12V18.94ZM4 2H18C18.5304 2 19.0391 2.21071 19.4142 2.58579C19.7893 2.96086 20 3.46957 20 4V8.17L16.17 12H12V16.17L10.17 18H4C3.46957 18 2.96086 17.7893 2.58579 17.4142C2.21071 17.0391 2 16.5304 2 16V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2ZM4 6V10H10V6H4ZM12 6V10H18V6H12ZM4 12V16H10V12H4Z" })
+  }
+);
+var IconTableEdit_default = SvgIconTableEdit;
+
+// src/components/TableDesktopNoColumnsMessage/TableDesktopNoColumnsMessage.tsx
+var import_jsx_runtime112 = require("react/jsx-runtime");
+var TableDesktopNoColumnsMessage = ({
+  handleClickOnNoColumnsMessageAction
+}) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_TableBody.default, { children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_TableRow.default, { children: /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(
+  import_TableCell.default,
+  {
+    sx: {
+      py: 8,
+      gap: 2,
+      borderBottom: "none",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_Typography.default, { variant: "subtitle2", fontSize: 16, children: "Customise your view" }),
+      /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_Typography.default, { variant: "subtitle1", align: "center", color: "textSecondary", children: "Open the menu to customise your table and search." }),
+      /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(
+        import_Typography.default,
+        {
+          variant: "subtitle1",
+          align: "center",
+          color: "textSecondary",
+          sx: {
+            backgroundColor: colors.neutral200,
+            padding: 1,
+            borderRadius: 1
+          },
+          children: [
+            "Tips: ",
+            /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_Typography.default, { component: "strong", children: "Save as default" }),
+            " to keep these columns for future views"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+        IconButton_default,
+        {
+          icon: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(IconTableEdit_default, { fill: colors.white }),
+          variant: "contained",
+          color: "primary",
+          onClick: handleClickOnNoColumnsMessageAction,
+          children: "OPEN MENU"
+        }
+      )
+    ]
+  }
+) }) });
+
+// src/components/TableEmptyResult/TableEmptyResult.tsx
+var import_material60 = require("@mui/material");
+var import_mui53 = require("tss-react/mui");
+var import_jsx_runtime113 = 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_runtime113.jsx)(import_material60.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
+    import_material60.TableCell,
+    {
+      className: classes.tableCellIcon,
+      colSpan,
+      align: "center",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(EmptyGlassIcon_default, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material60.Typography, { variant: "h6", children: "No results found." }),
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material60.Typography, { variant: "subtitle1", children: "Search without applied filters?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+          FilledButton_default,
+          {
+            copy: "Search",
+            variant: "contained",
+            color: "primary",
+            onClick: handleClickOnClearFiltersButton
+          }
+        )
+      ]
+    }
+  ) }) : /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material60.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+    import_material60.TableCell,
+    {
+      className: classes.tableCellDefault,
+      colSpan,
+      align: "center",
+      children: "Nothing to display"
+    }
+  ) });
+};
+var TableEmptyResult_default = TableEmptyResult;
+
+// src/components/TableDesktop/TableDesktop.tsx
+var import_jsx_runtime114 = require("react/jsx-runtime");
+var ROW_HEIGHT = 56;
+var useStyles48 = (0, import_mui54.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 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,
+  handleClickOnNoColumnsMessageAction,
+  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_runtime114.jsx)(import_material61.TableRow, { children: [...Array(visibleHeadCells.length)].map((_2, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material61.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+        import_material61.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_runtime114.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_runtime114.jsx)("div", { className: classes.root, style: { height }, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_material61.Paper, { className: classes.paper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material61.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+      import_material61.Table,
+      {
+        stickyHeader: true,
+        "aria-labelledby": "tableTitle",
+        "aria-label": "sticky table",
+        style: { tableLayout },
+        children: visibleHeadCells.length === 0 && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+          TableDesktopNoColumnsMessage,
+          {
+            handleClickOnNoColumnsMessageAction
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_jsx_runtime114.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+            SmartTableHeader_default,
+            {
+              headCells: visibleHeadCells,
+              order,
+              orderBy,
+              numSelected: selected.size,
+              numRows,
+              enableCheckboxSelection,
+              headerFilters: headerFilters ?? {},
+              onRequestSort: handleRequestSort,
+              onSelectAllClick: handleSelectAllClick,
+              onApplyFilters,
+              shouldShowCheckOnFilter
+            }
+          ),
+          !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material61.TableBody, { children: rowsPerPage !== emptyRows ? renderTableRows : /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+            TableEmptyResult_default,
+            {
+              colSpan: enableCheckboxSelection ? visibleHeadCells.length + 1 : visibleHeadCells.length,
+              showClearFilterButton,
+              handleClickOnClearFiltersButton
+            }
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material61.TableBody, { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material61.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+            import_material61.TableCell,
+            {
+              colSpan: visibleHeadCells.length,
+              align: "center",
+              children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material61.CircularProgress, {})
+            }
+          ) }) })
+        ] })
+      }
+    ) }),
+    children
+  ] }) });
+};
+var TableDesktop_default = TableDesktop;
+
+// src/components/SmartTableHeaderFilterMenu/SmartTableHeaderFilterMenu.tsx
+var import_jsx_runtime115 = require("react/jsx-runtime");
+var useStyles49 = (0, import_mui55.makeStyles)()((theme) => ({
   filterMenu: {
     display: "flex",
     flexDirection: "column"
@@ -6840,7 +7372,7 @@ var useStyles46 = (0, import_mui52.makeStyles)()((theme) => ({
     padding: theme.spacing(0, 1),
     justifyContent: "space-between"
   },
-  saveAsDefaultButton: {
+  applyButton: {
     color: theme.palette.primary.main
   },
   skeleton: {
@@ -6848,12 +7380,6 @@ var useStyles46 = (0, import_mui52.makeStyles)()((theme) => ({
     margin: theme.spacing(1)
   }
 }));
-var resolveOptionType = (option, fieldName) => {
-  if (!option || typeof option !== "object") {
-    return option;
-  }
-  return option[fieldName] || "";
-};
 var findFilterIndex = (filters, filterOption) => filters.findIndex((item) => {
   if (typeof item === "string" && typeof filterOption === "string") {
     return item === filterOption;
@@ -6870,18 +7396,21 @@ var SmartTableHeaderFilterMenu = ({
   shouldShowCheckOnFilter,
   onApplyFilters
 }) => {
-  const { classes } = useStyles46();
-  const [anchorEl, setAnchorEl] = (0, import_react32.useState)(null);
-  const [filterOptionsData, setFilterOptionsData] = (0, import_react32.useState)();
-  const [selectedFilters, setSelectedFilters] = (0, import_react32.useState)(
+  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_react32.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (headCell.filterOptions) {
       setFilterOptionsData(headCell.filterOptions);
     }
   }, [headCell.filterOptions]);
-  const numFilterOptions = (0, import_react32.useMemo)(() => filterOptionsData?.length ?? 0, [filterOptionsData?.length]);
+  const numFilterOptions = (0, import_react34.useMemo)(
+    () => filterOptionsData?.length ?? 0,
+    [filterOptionsData?.length]
+  );
   const numCurrentSelectedFilters = selectedFilters.length;
   const handleFilterMenuOpen = (event) => {
     if (!numFilterOptions) {
@@ -6917,24 +7446,27 @@ var SmartTableHeaderFilterMenu = ({
     onApplyFilters?.(updatedFilters, shouldSave);
     setAnchorEl(null);
   };
-  (0, import_react32.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     setSelectedFilters(headerFilters[headCell.id] ?? []);
   }, [headerFilters, headCell.id]);
-  const isOptionChecked = (0, import_react32.useMemo)(() => (resolvedOption) => !!selectedFilters?.some(
-    (value) => resolveOptionType(value, headCell.fieldName ?? "") === resolvedOption
-  ), [selectedFilters]);
-  const loadingSkeletons = /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_material58.Box, { "data-testid": "loading-skeletons", width: 272, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Skeleton, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Divider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Skeleton, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Skeleton, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Skeleton, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Skeleton, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Divider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Skeleton, { variant: "rounded", className: classes.skeleton })
+  const isOptionChecked = (0, import_react34.useMemo)(
+    () => (resolvedOption) => !!selectedFilters?.some(
+      (value) => resolveOptionType(value, headCell.fieldName ?? "") === resolvedOption
+    ),
+    [selectedFilters]
+  );
+  const loadingSkeletons = /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material62.Box, { "data-testid": "loading-skeletons", width: 272, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Skeleton, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Divider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Skeleton, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Skeleton, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Skeleton, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Skeleton, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Divider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Skeleton, { variant: "rounded", className: classes.skeleton })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_jsx_runtime109.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_jsx_runtime115.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
       ActiveFiltersIconButton_default,
       {
         numActiveFilters,
@@ -6944,8 +7476,8 @@ var SmartTableHeaderFilterMenu = ({
         })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-      import_material58.Menu,
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+      import_material62.Menu,
       {
         open: !!anchorEl,
         onClose: handleFilterMenuClose,
@@ -6953,20 +7485,22 @@ var SmartTableHeaderFilterMenu = ({
         "data-testid": "filter-menu",
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" },
-        children: headCell.isFetchingFilterOptions ? loadingSkeletons : /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_material58.Box, { className: classes.filterMenu, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Box, { px: 3, mb: 0.5, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-            import_material58.FormControlLabel,
+        children: headCell.isFetchingFilterOptions ? loadingSkeletons : /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material62.Box, { className: classes.filterMenu, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Box, { px: 3, mb: 0.5, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+            import_material62.FormControlLabel,
             {
               label: "Select All",
-              control: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-                import_material58.Checkbox,
+              control: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                import_material62.Checkbox,
                 {
                   disableRipple: true,
                   checked: numCurrentSelectedFilters === numFilterOptions,
                   indeterminate: numCurrentSelectedFilters > 0 && numCurrentSelectedFilters < numFilterOptions,
                   onChange: ({ target: { checked } }) => {
                     if (checked) {
-                      setSelectedFilters([...filterOptionsData]);
+                      setSelectedFilters([
+                        ...filterOptionsData
+                      ]);
                     } else {
                       setSelectedFilters([]);
                     }
@@ -6975,57 +7509,52 @@ var SmartTableHeaderFilterMenu = ({
               )
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Divider, { sx: { mb: 0.5 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Box, { className: classes.filterOptions, children: filterOptionsData?.map(
-            (option) => {
-              const resolvedOption = resolveOptionType(option, headCell.fieldName ?? "");
-              return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
-                import_material58.Box,
+          /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Divider, { sx: { mb: 0.5 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Box, { className: classes.filterOptions, children: filterOptionsData?.map((option) => {
+            const resolvedOption = resolveOptionType(
+              option,
+              headCell.fieldName ?? ""
+            );
+            return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material62.Box, { className: classes.filter, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                import_material62.FormControlLabel,
                 {
-                  className: classes.filter,
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-                      import_material58.FormControlLabel,
-                      {
-                        label: resolvedOption,
-                        control: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-                          import_material58.Checkbox,
-                          {
-                            disableRipple: true,
-                            onChange: () => handleFilterOptionClick(option),
-                            checked: isOptionChecked(resolvedOption)
-                          }
-                        )
-                      },
-                      resolvedOption
-                    ),
-                    shouldShowCheckOnFilter?.(headCell.id, option) ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Tooltip, { title: "This filter is saved as default", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_Check.default, { fontSize: "small", color: "action" }) }) : null
-                  ]
+                  label: resolvedOption,
+                  control: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                    import_material62.Checkbox,
+                    {
+                      disableRipple: true,
+                      onChange: () => handleFilterOptionClick(option),
+                      checked: isOptionChecked(resolvedOption)
+                    }
+                  )
                 },
                 resolvedOption
-              );
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Divider, { sx: { mb: 0.5 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_material58.Box, { className: classes.applyFilterButtonsContainer, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+              ),
+              shouldShowCheckOnFilter?.(headCell.id, option) ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Tooltip, { title: "This filter is saved as default", children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_Check.default, { fontSize: "small", color: "action" }) }) : null
+            ] }, resolvedOption);
+          }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Divider, { sx: { mb: 0.5 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material62.Box, { className: classes.applyFilterButtonsContainer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
               ExtendedButton_default,
               {
-                copy: "Save as Default",
-                buttonType: "button",
+                copy: "Apply",
                 variant: "text",
-                tooltip: "Persists those filters for future visits",
-                className: classes.saveAsDefaultButton,
-                onClick: () => handleApplyFilters(true)
+                buttonType: "button",
+                tooltip: "Apply the filters without saving.",
+                className: classes.applyButton,
+                onClick: () => handleApplyFilters(false)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
               ExtendedButton_default,
               {
-                copy: "Apply",
+                copy: "Save as Default",
                 color: "primary",
                 buttonType: "submit",
-                onClick: () => handleApplyFilters(false)
+                tooltip: "Persists those filters for future visits",
+                onClick: () => handleApplyFilters(true)
               }
             )
           ] })
@@ -7034,159 +7563,23 @@ var SmartTableHeaderFilterMenu = ({
     )
   ] });
 };
-var SmartTableHeaderFilterMenu_default = (0, import_react32.memo)(SmartTableHeaderFilterMenu);
-
-// src/components/SmartTableHeader/SmartTableHeader.tsx
-var import_react33 = require("react");
-var import_material59 = require("@mui/material");
-var import_mui53 = require("tss-react/mui");
-var import_jsx_runtime110 = 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"
-    }
-  },
-  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,
-    backgroundColor: colors.neutral100,
-    whiteSpace: "nowrap",
-    "& .filter-menu-trigger": {
-      visibility: "hidden",
-      opacity: 0,
-      transition: "visibility 0.1s, opacity 0.1s ease-in"
-    },
-    "&:hover .filter-menu-trigger, & .filter-menu-trigger.has-active-filters": {
-      visibility: "visible",
-      opacity: 1
-    },
-    "&:hover .MuiTableSortLabel-root": {
-      "& .MuiTableSortLabel-icon": {
-        opacity: 1
-      }
-    }
-  },
-  filterMenu: {
-    display: "flex",
-    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)
-  }
-}));
-var SmartTableHeader = ({
-  order,
-  orderBy,
-  headCells,
-  numSelected,
-  numRows,
-  enableCheckboxSelection = false,
-  headerFilters,
-  onRequestSort,
-  onSelectAllClick,
-  onApplyFilters,
-  shouldShowCheckOnFilter
-}) => {
-  const { classes } = useStyles47();
-  const createSortHandler = (property) => (event) => {
-    onRequestSort(event, property);
-  };
-  const isSortActive = (headCellId) => orderBy === headCellId;
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material59.TableHead, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_material59.TableRow, { children: [
-    enableCheckboxSelection ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material59.TableCell, { padding: "checkbox", sx: { backgroundColor: colors.neutral100 }, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-      import_material59.Checkbox,
-      {
-        color: "primary",
-        disableRipple: true,
-        indeterminate: numSelected > 0 && numSelected < numRows,
-        checked: numRows > 0 && numSelected === numRows,
-        onChange: onSelectAllClick
-      }
-    ) }) : null,
-    headCells.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-      import_material59.TableCell,
-      {
-        className: classes.tableHeaderContent,
-        align: "left",
-        width: headCell.width ?? "auto",
-        sortDirection: orderBy === headCell.id ? order : false,
-        children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
-          import_material59.Box,
-          {
-            display: "flex",
-            flexDirection: "row",
-            gap: headCell.disableSort ? 1 : 0,
-            children: [
-              headCell.disableSort ? headCell.RenderHeader ?? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material59.Tooltip, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material59.Typography, { variant: "subtitle2", mt: 0.25, fontWeight: 600, children: headCell.label }) }) : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material59.Tooltip, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
-                import_material59.TableSortLabel,
-                {
-                  "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_runtime110.jsx)("span", { className: classes.visuallyHidden, children: order === "desc" ? "sorted descending" : "sorted ascending" }) : null
-                  ]
-                }
-              ) }),
-              headCell.refetchFilterOptions ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-                SmartTableHeaderFilterMenu_default,
-                {
-                  headCell,
-                  headerFilters,
-                  numActiveFilters: headerFilters[headCell.id]?.length ?? 0,
-                  onApplyFilters,
-                  shouldShowCheckOnFilter
-                }
-              ) : null
-            ]
-          }
-        )
-      },
-      headCell.id
-    ))
-  ] }) });
-};
-var SmartTableHeader_default = (0, import_react33.memo)(SmartTableHeader);
+var SmartTableHeaderFilterMenu_default = (0, import_react34.memo)(SmartTableHeaderFilterMenu);
 
 // src/components/Table/Table.tsx
-var import_react34 = require("react");
-var import_material61 = require("@mui/material");
+var import_react35 = require("react");
+var import_material64 = 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_material60 = require("@mui/material");
-var import_jsx_runtime111 = require("react/jsx-runtime");
+var import_material63 = require("@mui/material");
+var import_jsx_runtime116 = require("react/jsx-runtime");
 var TableLoading = ({
   rowsPerPage,
   rowHeight
-}) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.Box, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
-  import_material60.Skeleton,
+}) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material63.Box, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+  import_material63.Skeleton,
   {
     animation: "pulse",
     "data-testid": "table-loading-skeleton",
@@ -7199,7 +7592,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]);
@@ -7210,7 +7603,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;
   }
@@ -7220,7 +7613,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");
@@ -7234,8 +7627,8 @@ function calculateRowsPerPage(rowHeight) {
 }
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime112 = require("react/jsx-runtime");
-var useStyles48 = (0, import_mui54.makeStyles)()(() => ({
+var import_jsx_runtime117 = require("react/jsx-runtime");
+var useStyles50 = (0, import_mui56.makeStyles)()(() => ({
   root: {
     height: "calc(100vh - 262px)",
     overflow: "scroll"
@@ -7256,7 +7649,7 @@ var useStyles48 = (0, import_mui54.makeStyles)()(() => ({
     maxHeight: "calc(100% - 0)"
   }
 }));
-var Table = ({
+var Table2 = ({
   appliedFilters,
   data,
   doNotCalculateRows,
@@ -7269,12 +7662,12 @@ var Table = ({
   serverRendered,
   updateSort
 }) => {
-  const [order, setOrder] = (0, import_react34.useState)(appliedFilters?.sortDir || "desc");
-  const [orderBy, setOrderBy] = (0, import_react34.useState)(
+  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_react34.useState)(defaultRowsPerPage);
-  const { classes } = useStyles48();
+  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) => {
@@ -7286,7 +7679,7 @@ var Table = ({
       updateSort(property, orderDir);
     }
   };
-  (0, import_react34.useLayoutEffect)(() => {
+  (0, import_react35.useLayoutEffect)(() => {
     if (!doNotCalculateRows) {
       return;
     }
@@ -7306,31 +7699,31 @@ var Table = ({
   };
   const getTableRows = () => {
     const index = page;
-    const rows = serverRendered ? data : stableSort(data, getSorting(order, orderBy)).slice(
+    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_runtime112.jsx)(RenderItem, { ...row }, row.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(RenderItem, { ...row }, row.id);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableRow, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableCell, { children: row[column.id] }, column.id)) }, row.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.TableRow, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.TableCell, { children: row[column.id] }, column.id)) }, row.id);
     });
     if (emptyRows > 0 && rowsPerPage > emptyRows) {
       rowsComponents.push(
-        /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableCell, { colSpan: 8 }) }, (0, import_uuid.v4)())
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.TableCell, { colSpan: 8 }) }, (0, import_uuid.v4)())
       );
     }
     return rowsComponents;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Paper, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Box, { className: classes.paper, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_material61.Table, { size: "medium", stickyHeader: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableHead, { className: classes.header, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableRow, { children: headCells?.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
-      import_material61.TableCell,
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.Paper, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.Box, { className: classes.paper, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_material64.Table, { size: "medium", stickyHeader: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.TableHead, { className: classes.header, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.TableRow, { children: headCells?.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+      import_material64.TableCell,
       {
         align: "left",
         sortDirection: orderBy === headCell.id ? order : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
-          import_material61.TableSortLabel,
+        children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+          import_material64.TableSortLabel,
           {
             active: orderBy === headCell.id,
             direction: orderBy === headCell.id ? order : "asc",
@@ -7341,34 +7734,30 @@ var Table = ({
       },
       headCell.id
     )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_material61.TableBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_material64.TableBody, { children: [
       getTableRows(),
-      rowsPerPage === emptyRows && /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableCell, { colSpan: 8, align: "center", children: "Nothing to display" }) })
+      rowsPerPage === emptyRows && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.TableCell, { colSpan: 8, align: "center", children: "Nothing to display" }) })
     ] })
   ] }) }) }) });
 };
-var Table_default = Table;
-
-// src/components/TableDesktop/TableDesktop.tsx
-var import_react35 = require("react");
-var import_material66 = require("@mui/material");
+var Table_default = Table2;
 
 // src/components/TableDesktopFooter/TableDesktopFooter.tsx
 var import_Refresh = __toESM(require("@mui/icons-material/Refresh"), 1);
-var import_material62 = require("@mui/material");
-var import_jsx_runtime113 = require("react/jsx-runtime");
+var import_material65 = require("@mui/material");
+var import_jsx_runtime118 = require("react/jsx-runtime");
 var TableDesktopFooter = ({
   numPages,
   page,
   pageSize,
   pageSizeOptions,
-  onPageChange,
-  onPageSizeChange,
+  handlePageChange,
+  handlePageSizeChange,
   refetch,
   isFetching
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
-    import_material62.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(
+    import_material65.Box,
     {
       py: 1,
       gap: 2,
@@ -7378,8 +7767,8 @@ var TableDesktopFooter = ({
       borderTop: `1px solid ${colors.neutral300}`,
       bgcolor: (theme) => theme.palette.background.default,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
-          import_material62.Button,
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(
+          import_material65.Button,
           {
             disableRipple: true,
             variant: "outlined",
@@ -7393,7 +7782,7 @@ var TableDesktopFooter = ({
               borderColor: colors.neutral600
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
                 import_Refresh.default,
                 {
                   fontSize: "small",
@@ -7402,607 +7791,79 @@ var TableDesktopFooter = ({
               ),
               "REFRESH"
             ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_material62.Box, { display: "flex", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_material62.Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material62.Typography, { children: "Rows per page:" }),
-            /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-              import_material62.Select,
-              {
-                value: pageSize,
-                onChange: onPageSizeChange,
-                size: "small",
-                variant: "standard",
-                children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material62.MenuItem, { value: size, children: size }, size))
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-            import_material62.Pagination,
-            {
-              color: "standard",
-              count: numPages,
-              page,
-              onChange: onPageChange
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-
-// src/components/TableDesktopNoColumnsMessage/TableDesktopNoColumnsMessage.tsx
-var import_TableBody = __toESM(require("@mui/material/TableBody"), 1);
-var import_TableCell = __toESM(require("@mui/material/TableCell"), 1);
-var import_TableRow = __toESM(require("@mui/material/TableRow"), 1);
-var import_Typography = __toESM(require("@mui/material/Typography"), 1);
-var import_jsx_runtime114 = require("react/jsx-runtime");
-var TableDesktopNoColumnsMessage = () => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_TableBody.default, { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_TableRow.default, { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
-  import_TableCell.default,
-  {
-    sx: {
-      py: 8,
-      gap: 2,
-      borderBottom: "none",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center"
-    },
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_Typography.default, { variant: "subtitle2", fontSize: 16, children: "Customise your view" }),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_Typography.default, { variant: "subtitle1", align: "center", color: "textSecondary", children: [
-        "Use the column selector on the right to choose which fields",
-        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("br", {}),
-        "you want to display in the table"
-      ] })
-    ]
-  }
-) }) });
-
-// src/components/TableDesktopLoadingState/TableDesktopLoadingState.tsx
-var import_material63 = require("@mui/material");
-var import_jsx_runtime115 = require("react/jsx-runtime");
-var getRange = (n) => Array.from({ length: n }, (_, i) => i + 1);
-var TableDesktopLoadingState = ({
-  numRows,
-  rowsPerPage,
-  numColumns,
-  rowHeight
-}) => {
-  return getRange(Math.min(numRows, rowsPerPage)).map((rowNum) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableRow, { children: getRange(numColumns).map((colNum) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
-    import_material63.Skeleton,
-    {
-      animation: "pulse",
-      variant: "rounded",
-      height: rowHeight - 33,
-      sx: { bgcolor: colors.neutral100 },
-      "data-testid": "loading-skeleton"
-    }
-  ) }, colNum)) }, rowNum));
-};
-
-// src/components/TableDesktopRows/TableDesktopRows.tsx
-var import_jsx_runtime116 = require("react/jsx-runtime");
-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 TableDesktopRows = ({
-  data,
-  RenderItem,
-  visibleHeadCells,
-  keyField,
-  order,
-  orderBy,
-  rowsPerPage,
-  isLoading,
-  disableInternalSort,
-  enableCheckboxSelection,
-  enableEditMode,
-  selectedRows,
-  handleRowCheckboxChange,
-  rowHeight,
-  deleteItem
-}) => {
-  const sortedData = disableInternalSort ? data : stableSort2(data, getComparator(order, orderBy));
-  if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-      TableDesktopLoadingState,
-      {
-        numRows: data.length,
-        rowsPerPage,
-        numColumns: visibleHeadCells.length + (enableCheckboxSelection ? 1 : 0),
-        rowHeight
-      }
-    );
-  }
-  return sortedData.map((row, index) => {
-    const isItemSelected = selectedRows.has(row[keyField]);
-    return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-      RenderItem,
-      {
-        ...{
-          ...row,
-          index,
-          deleteItem,
-          isItemSelected,
-          enableEditMode,
-          enableCheckboxSelection,
-          rowHeight,
-          rowId: row[keyField],
-          handleRowCheckboxChange,
-          visibleHeadCells
-        }
-      },
-      row[keyField] ?? index
-    );
-  });
-};
-
-// src/components/TableDesktopRowSelectionBar/TableDesktopRowSelectionBar.tsx
-var import_material64 = require("@mui/material");
-var import_jsx_runtime117 = require("react/jsx-runtime");
-var TableDesktopRowSelectionBar = ({
-  isEveryRowInPageSelected,
-  isRowsFromAllPagesSelected,
-  numSelectedRows,
-  totalRowCount,
-  onSelectRowsFromAllPagesClick,
-  onClearSelectionClick
-}) => {
-  const isAnyRowSelected = numSelectedRows > 0;
-  const getSelectedRowsText = () => {
-    if (isRowsFromAllPagesSelected) {
-      return `All ${totalRowCount} rows from all pages are selected based on your filters.`;
-    }
-    if (isEveryRowInPageSelected) {
-      return `All ${numSelectedRows} rows on this page are selected.`;
-    }
-    return `${numSelectedRows} row${numSelectedRows > 1 ? "s" : ""} selected.`;
-  };
-  return isAnyRowSelected ? /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
-    import_material64.Box,
-    {
-      sx: {
-        p: 1,
-        height: 40,
-        gap: 2,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        backgroundColor: colors.neutral150
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.Typography, { children: getSelectedRowsText() }),
-        !isRowsFromAllPagesSelected ? /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_material64.Button, { onClick: onSelectRowsFromAllPagesClick, children: [
-          "Select all ",
-          totalRowCount,
-          " rows from all pages based on your filters"
-        ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.Button, { onClick: onClearSelectionClick, children: "Clear Selection" })
-      ]
-    }
-  ) : null;
-};
-
-// src/components/TableEmptyResult/TableEmptyResult.tsx
-var import_material65 = require("@mui/material");
-var import_mui55 = require("tss-react/mui");
-var import_jsx_runtime118 = 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_runtime118.jsx)(import_material65.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(
-    import_material65.TableCell,
-    {
-      className: classes.tableCellIcon,
-      colSpan,
-      align: "center",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(EmptyGlassIcon_default, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.Typography, { variant: "h6", children: "No results found." }),
-        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.Typography, { variant: "subtitle1", children: "Search without applied filters?" }),
-        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-          FilledButton_default,
-          {
-            copy: "Search",
-            variant: "contained",
-            color: "primary",
-            onClick: handleClickOnClearFiltersButton
-          }
-        )
-      ]
-    }
-  ) }) : /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-    import_material65.TableCell,
-    {
-      className: classes.tableCellDefault,
-      colSpan,
-      align: "center",
-      children: "Nothing to display"
-    }
-  ) });
-};
-var TableEmptyResult_default = TableEmptyResult;
-
-// src/components/TableDesktop/TableDesktop.tsx
-var import_jsx_runtime119 = require("react/jsx-runtime");
-var TableDesktop = ({
-  data,
-  headCells,
-  RenderItem,
-  appliedFilters,
-  headerFilters,
-  children,
-  height,
-  rowHeight = 56,
-  totalDataCount,
-  isLoading,
-  rowsPerPage = 50,
-  enableEditMode = false,
-  enableCheckboxSelection = false,
-  disableInternalSort = false,
-  updateSort,
-  showClearFilterButton,
-  handleClickOnClearFiltersButton,
-  deleteItem,
-  keyField = "id",
-  tableLayout = "auto",
-  onApplyFilters,
-  shouldShowCheckOnFilter,
-  components,
-  componentsProps
-}) => {
-  const [order, setOrder] = (0, import_react35.useState)(appliedFilters?.sortDir || "desc");
-  const [orderBy, setOrderBy] = (0, import_react35.useState)(
-    appliedFilters?.sortField || "delivery_date"
-  );
-  const [selectedRows, setSelectedRows] = (0, import_react35.useState)(/* @__PURE__ */ new Set());
-  const [isRowsFromAllPagesSelected, setIsRowsFromAllPagesSelected] = (0, import_react35.useState)(false);
-  const { toolbar: Toolbar2 } = components ?? {};
-  const { toolbarProps, footerProps } = componentsProps ?? {};
-  const numRows = (0, import_react35.useMemo)(
-    () => data.length,
-    [data.length]
-  );
-  const emptyRows = (0, import_react35.useMemo)(
-    () => rowsPerPage - numRows,
-    [rowsPerPage, numRows]
-  );
-  const isEveryRowInPageSelected = (0, import_react35.useMemo)(
-    () => numRows > 0 && selectedRows.size === numRows,
-    [selectedRows, numRows]
-  );
-  const visibleHeadCells = (0, import_react35.useMemo)(
-    () => headCells.filter((headCell) => headCell?.enabled ?? true),
-    [headCells]
-  );
-  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 selectAllRowsInPage = () => {
-    const allRowsIds = new Set(data.map((n) => n[keyField]));
-    ;
-    setSelectedRows(allRowsIds);
-  };
-  const resetSelectedRows = () => {
-    setSelectedRows(/* @__PURE__ */ new Set());
-    setIsRowsFromAllPagesSelected(false);
-  };
-  const handleSelectAllClick = (event) => {
-    if (event.target.checked) {
-      selectAllRowsInPage();
-      return;
-    }
-    resetSelectedRows();
-  };
-  const handleRowCheckboxChange = (event, rowId) => {
-    event.stopPropagation();
-    setSelectedRows((prev) => {
-      const newSelected = new Set(prev);
-      if (newSelected.has(rowId)) {
-        newSelected.delete(rowId);
-      } else {
-        newSelected.add(rowId);
-      }
-      if (newSelected.size < numRows) {
-        setIsRowsFromAllPagesSelected(false);
-      }
-      return newSelected;
-    });
-  };
-  const handleSelectRowsFromAllPagesClick = () => {
-    setIsRowsFromAllPagesSelected(true);
-    selectAllRowsInPage();
-  };
-  const handleClearSelectionClick = () => {
-    resetSelectedRows();
-  };
-  const handleApplyFilters = (updatedFilters, shouldSave) => {
-    resetSelectedRows();
-    onApplyFilters?.(updatedFilters, shouldSave);
-  };
-  const handlePageChange = (event, page) => {
-    resetSelectedRows();
-    footerProps?.onPageChange?.(event, page);
-  };
-  (0, import_react35.useEffect)(() => {
-    if (!enableCheckboxSelection) {
-      resetSelectedRows();
-    }
-  }, [enableCheckboxSelection]);
-  (0, import_react35.useEffect)(() => {
-    if (isEveryRowInPageSelected || isRowsFromAllPagesSelected) {
-      const rowsIdsSet = new Set(data.map((obj) => obj[keyField]));
-      setSelectedRows(
-        (prev) => new Set([...prev].filter((value) => rowsIdsSet.has(value)))
-      );
-    }
-  }, [data, setSelectedRows, isEveryRowInPageSelected, isRowsFromAllPagesSelected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-    import_material66.Box,
-    {
-      sx: {
-        height,
-        display: "flex",
-        justifyContent: "space-between",
-        justifyItems: "stretch"
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
-        import_material66.Paper,
-        {
-          sx: {
-            width: "100%",
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "space-between"
-          },
-          children: [
-            Toolbar2 ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-              Toolbar2,
-              {
-                selectedRows: [...selectedRows],
-                isRowsInAllPagesSelected: isRowsFromAllPagesSelected,
-                ...toolbarProps
-              }
-            ) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-              TableDesktopRowSelectionBar,
-              {
-                isEveryRowInPageSelected,
-                isRowsFromAllPagesSelected,
-                numSelectedRows: selectedRows.size,
-                totalRowCount: totalDataCount ?? 0,
-                onSelectRowsFromAllPagesClick: handleSelectRowsFromAllPagesClick,
-                onClearSelectionClick: handleClearSelectionClick
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-              import_material66.TableContainer,
-              {
-                sx: {
-                  flexGrow: 1,
-                  minHeight: 0,
-                  maxHeight: "100%",
-                  "&::-webkit-scrollbar": {
-                    width: "8px",
-                    height: "8px"
-                  },
-                  "&::-webkit-scrollbar-track": {
-                    backgroundColor: (theme) => theme.palette.grey[100]
-                  },
-                  "&::-webkit-scrollbar-thumb": {
-                    backgroundColor: (theme) => theme.palette.grey[400],
-                    borderRadius: "10px"
-                  },
-                  "&::-webkit-scrollbar-thumb:hover": {
-                    backgroundColor: (theme) => theme.palette.grey[500]
-                  }
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-                  import_material66.Table,
-                  {
-                    stickyHeader: true,
-                    "aria-label": "sticky-table",
-                    sx: { tableLayout },
-                    children: visibleHeadCells.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(TableDesktopNoColumnsMessage, {}) : /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_jsx_runtime119.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-                        SmartTableHeader_default,
-                        {
-                          headCells: visibleHeadCells,
-                          order,
-                          orderBy,
-                          numSelected: selectedRows.size,
-                          numRows,
-                          enableCheckboxSelection,
-                          headerFilters: headerFilters ?? {},
-                          onRequestSort: handleRequestSort,
-                          onSelectAllClick: handleSelectAllClick,
-                          onApplyFilters: handleApplyFilters,
-                          shouldShowCheckOnFilter
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material66.TableBody, { children: rowsPerPage !== emptyRows ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-                        TableDesktopRows,
-                        {
-                          data,
-                          RenderItem,
-                          visibleHeadCells,
-                          keyField,
-                          order,
-                          orderBy,
-                          rowsPerPage,
-                          isLoading,
-                          disableInternalSort,
-                          enableCheckboxSelection,
-                          enableEditMode,
-                          selectedRows,
-                          handleRowCheckboxChange,
-                          rowHeight,
-                          deleteItem
-                        }
-                      ) : /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-                        TableEmptyResult_default,
-                        {
-                          colSpan: enableCheckboxSelection ? visibleHeadCells.length + 1 : visibleHeadCells.length,
-                          showClearFilterButton,
-                          handleClickOnClearFiltersButton
-                        }
-                      ) })
-                    ] })
-                  }
-                )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(import_material65.Box, { display: "flex", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(import_material65.Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.Typography, { children: "Rows per page:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+              import_material65.Select,
+              {
+                value: pageSize,
+                onChange: handlePageSizeChange,
+                size: "small",
+                variant: "standard",
+                children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.MenuItem, { value: size, children: size }, size))
               }
-            ),
-            children,
-            footerProps ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(TableDesktopFooter, { ...footerProps, onPageChange: handlePageChange }) : null
-          ]
-        }
-      )
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+            import_material65.Pagination,
+            {
+              color: "standard",
+              count: numPages,
+              page,
+              onChange: handlePageChange
+            }
+          )
+        ] })
+      ]
     }
   );
 };
 
-// src/components/TableDesktopEditableComponent/TableDesktopEditableComponent.tsx
-var import_material69 = require("@mui/material");
-
-// src/components/TableDesktopEditableComponent/TableDesktopNumericField.tsx
-var import_react36 = require("react");
+// src/components/TableDesktopRowCell/TableDesktopRowCell.tsx
+var import_react38 = require("react");
+var import_Check2 = __toESM(require("@mui/icons-material/Check"), 1);
+var import_Close = __toESM(require("@mui/icons-material/Close"), 1);
+var import_Edit = __toESM(require("@mui/icons-material/Edit"), 1);
 var import_material67 = require("@mui/material");
-var import_jsx_runtime120 = require("react/jsx-runtime");
-var TableDesktopNumericField = ({
-  rowId,
-  initialValue,
-  inputLabel,
-  disabled,
-  field,
-  variant = "standard",
-  size,
-  onUpdateEditableCell
-}) => {
-  const [input, setInput] = (0, import_react36.useState)(initialValue);
-  const commitValue = (value) => {
-    if (!onUpdateEditableCell) {
-      return;
-    }
-    onUpdateEditableCell(rowId ?? 0, field, value, value);
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      commitValue(input);
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-    import_material67.TextField,
-    {
-      fullWidth: true,
-      variant,
-      size,
-      value: input,
-      disabled,
-      label: inputLabel,
-      onKeyDown: handleKeyDown,
-      onChange: (e) => {
-        e.target.value = e.target.value.replace(/\D/g, "");
-        setInput(e.target.value);
-      },
-      onBlur: ({ target: { value } }) => {
-        commitValue(value);
-      },
-      slotProps: {
-        input: {
-          inputMode: "numeric"
-        }
-      }
-    }
-  );
-};
 
-// src/components/TableDesktopEditableComponent/TableDesktopSmartSelect.tsx
-var import_react37 = require("react");
-var import_jsx_runtime121 = require("react/jsx-runtime");
-var resolveOptionType2 = (option, fieldName) => {
-  if (!option || typeof option !== "object") {
-    return option;
-  }
-  return option[fieldName] || "";
-};
+// src/components/TableDesktopRowCell/TableDesktopSmartSelect.tsx
+var import_react36 = require("react");
+var import_jsx_runtime119 = require("react/jsx-runtime");
 var resolveValue = (value) => {
   if (typeof value === "string") {
     return value;
   }
   return value?.id;
 };
-var TableDesktopSmartSelect = (0, import_react37.memo)(({
+var TableDesktopSmartSelect = (0, import_react36.memo)(({
   ref,
   initialValue,
   inputLabel,
-  field,
   fieldName,
   rowId,
   disabled,
-  variant = "standard",
-  size,
   filterOptions,
   refetchFilterOptions,
   isFetchingFilterOptions,
   onUpdateEditableCell
 }) => {
-  const [value, setValue] = (0, import_react37.useState)(initialValue);
-  const [options, setOptions] = (0, import_react37.useState)();
+  const [value, setValue] = (0, import_react36.useState)(initialValue);
+  const [options, setOptions] = (0, import_react36.useState)();
   const valueId = resolveValue(value);
-  const valueLabel = resolveOptionType2(value, fieldName);
-  (0, import_react37.useEffect)(() => {
+  const valueLabel = resolveOptionType(value, fieldName);
+  (0, import_react36.useEffect)(() => {
     if (filterOptions) {
       const parsedOptions = filterOptions?.map((option) => ({
         value: resolveValue(option),
-        label: String(resolveOptionType2(option, fieldName))
+        label: String(resolveOptionType(option, fieldName))
       }));
       setOptions(parsedOptions);
     }
   }, [filterOptions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
     SmartSelect_default,
     {
       ref,
@@ -8010,50 +7871,39 @@ var TableDesktopSmartSelect = (0, import_react37.memo)(({
       inputLabel,
       options,
       disabled,
-      variant,
-      size,
       refetch: refetchFilterOptions,
       isFetching: isFetchingFilterOptions,
       defaultOption: {
         value: valueId ?? "",
         label: String(valueLabel ?? "")
       },
-      onChange: ({ value: id, label: name }) => {
-        if (!id || !name) {
-          return;
-        }
-        setValue({ id, name });
-        if (!onUpdateEditableCell) {
-          return;
-        }
-        onUpdateEditableCell(rowId ?? 0, field, id, name);
+      onChange: ({ value: value2, label }) => {
+        setValue({ id: value2 ?? "", name: label ?? "" });
+        onUpdateEditableCell?.(rowId, value2 ?? "");
       }
     }
   );
 });
 
-// src/components/TableDesktopEditableComponent/TableDesktopTextField.tsx
-var import_react38 = require("react");
-var import_material68 = require("@mui/material");
-var import_jsx_runtime122 = require("react/jsx-runtime");
+// src/components/TableDesktopRowCell/TableDesktopTextField.tsx
+var import_react37 = require("react");
+var import_material66 = require("@mui/material");
+var import_jsx_runtime120 = require("react/jsx-runtime");
 var TableDesktopTextField = ({
   rowId,
-  initialValue,
+  editInitialValue,
   inputLabel,
   disabled,
-  field,
-  variant = "standard",
-  size,
   validateInput,
   onUpdateEditableCell
 }) => {
-  const [input, setInput] = (0, import_react38.useState)(initialValue);
-  const hasValidationError = (0, import_react38.useMemo)(() => !validateInput?.(input), [input, validateInput]);
+  const [input, setInput] = (0, import_react37.useState)(editInitialValue);
+  const hasValidationError = (0, import_react37.useMemo)(() => !validateInput?.(input), [input, validateInput]);
   const commitValue = (value) => {
-    if (hasValidationError || !onUpdateEditableCell) {
+    if (hasValidationError) {
       return;
     }
-    onUpdateEditableCell(rowId ?? 0, field, value, value);
+    onUpdateEditableCell?.(rowId, value);
   };
   const handleKeyDown = (e) => {
     if (e.key === "Enter") {
@@ -8061,12 +7911,11 @@ var TableDesktopTextField = ({
       commitValue(input);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
-    import_material68.TextField,
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+    import_material66.TextField,
     {
       fullWidth: true,
-      variant,
-      size,
+      variant: "standard",
       value: input,
       label: inputLabel,
       error: hasValidationError,
@@ -8082,104 +7931,11 @@ var TableDesktopTextField = ({
   );
 };
 
-// src/components/TableDesktopEditableComponent/TableDesktopEditableComponent.tsx
-var import_jsx_runtime123 = require("react/jsx-runtime");
-var TableDesktopEditableComponent = ({
-  editInitialValue,
-  rowId,
-  field,
-  fieldName,
-  disabled,
-  showCheckboxLabel = false,
-  variant = "standard",
-  size,
-  inputLabel,
-  editableCellType,
-  filterOptions,
-  refetchFilterOptions,
-  isFetchingFilterOptions,
-  validateInput,
-  onUpdateEditableCell
-}) => {
-  const editableComponents = {
-    "select": /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
-      TableDesktopSmartSelect,
-      {
-        rowId,
-        field,
-        fieldName,
-        disabled,
-        variant,
-        size,
-        initialValue: editInitialValue,
-        inputLabel,
-        filterOptions,
-        refetchFilterOptions,
-        isFetchingFilterOptions,
-        onUpdateEditableCell
-      }
-    ),
-    "checkbox": /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
-      import_material69.FormControlLabel,
-      {
-        label: showCheckboxLabel ? inputLabel : "",
-        control: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
-          import_material69.Checkbox,
-          {
-            disableRipple: true,
-            disabled,
-            defaultChecked: editInitialValue,
-            onChange: ({ target: { checked } }) => {
-              if (!onUpdateEditableCell) {
-                return;
-              }
-              onUpdateEditableCell(rowId ?? 0, field, checked, checked);
-            }
-          }
-        )
-      }
-    ),
-    "text": /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
-      TableDesktopTextField,
-      {
-        rowId,
-        disabled,
-        variant,
-        size,
-        field,
-        initialValue: editInitialValue,
-        inputLabel: inputLabel ?? "",
-        validateInput,
-        onUpdateEditableCell
-      }
-    ),
-    "numeric": /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
-      TableDesktopNumericField,
-      {
-        rowId,
-        disabled,
-        variant,
-        size,
-        field,
-        initialValue: editInitialValue,
-        inputLabel: inputLabel ?? "",
-        onUpdateEditableCell
-      }
-    )
-  };
-  return editableComponents[editableCellType];
-};
-
-// src/components/TableDesktopCell/TableDesktopCell.tsx
-var import_react39 = require("react");
-var import_Check2 = __toESM(require("@mui/icons-material/Check"), 1);
-var import_Close = __toESM(require("@mui/icons-material/Close"), 1);
-var import_Edit = __toESM(require("@mui/icons-material/Edit"), 1);
-var import_material70 = require("@mui/material");
-var import_jsx_runtime124 = require("react/jsx-runtime");
+// src/components/TableDesktopRowCell/TableDesktopRowCell.tsx
+var import_jsx_runtime121 = require("react/jsx-runtime");
 var getReadOnlyBooleanIcon = (value) => {
   if (value) {
-    return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_Check2.default, { sx: { fontSize: 16 } });
+    return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_Check2.default, { sx: { fontSize: 16 } });
   }
   return "-";
 };
@@ -8189,17 +7945,12 @@ var renderReadOnlyValue = (value) => {
   }
   return value;
 };
-var getCellBackgroundColor = (isCellInEditMode) => ({
-  background: isCellInEditMode ? colors.lightBlueBackground : colors.neutral100
-});
-var TableDesktopCell = ({
+var TableDesktopRowCell = ({
   inputLabel,
   editInitialValue,
   rowId,
-  field,
   fieldName,
   width,
-  enableEditMode,
   disabled,
   readOnlyValue,
   editableCellType,
@@ -8210,52 +7961,112 @@ var TableDesktopCell = ({
   onUpdateEditableCell,
   onCellClick
 }) => {
-  const cellRef = (0, import_react39.useRef)(null);
-  const [isOverflowed, setIsOverflowed] = (0, import_react39.useState)(false);
-  const [isCellHovered, setIsCellHovered] = (0, import_react39.useState)(false);
-  const [isCellInEditMode, setIsCellInEditMode] = (0, import_react39.useState)(false);
-  (0, import_react39.useEffect)(() => {
+  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_react39.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
-        setIsCellInEditMode(false);
+        setIsEditMode(false);
       }
     };
-    if (isCellInEditMode) {
+    if (isEditMode) {
       window.addEventListener("keydown", handleKeyDown);
     }
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [isCellInEditMode]);
+  }, [isEditMode]);
+  const editableComponents = {
+    "select": /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+      TableDesktopSmartSelect,
+      {
+        rowId,
+        fieldName,
+        disabled,
+        initialValue: editInitialValue,
+        inputLabel: inputLabel ?? "",
+        filterOptions,
+        refetchFilterOptions,
+        isFetchingFilterOptions,
+        onUpdateEditableCell
+      }
+    ),
+    "checkbox": /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+      import_material67.Checkbox,
+      {
+        disableRipple: true,
+        disabled,
+        defaultChecked: editInitialValue,
+        onChange: ({ target: { checked } }) => {
+          onUpdateEditableCell?.(rowId, checked);
+        }
+      }
+    ),
+    "text": /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+      TableDesktopTextField,
+      {
+        rowId,
+        disabled,
+        editInitialValue,
+        inputLabel: inputLabel ?? "",
+        validateInput,
+        onUpdateEditableCell
+      }
+    ),
+    "numeric": /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+      import_material67.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 handleEditClick = (e) => {
     e.stopPropagation();
-    setIsCellInEditMode((prev) => !prev);
+    setIsEditMode((prev) => !prev);
   };
-  const isCellEditable = !!enableEditMode && !!editableCellType && !disabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material70.Tooltip, { title: isOverflowed ? String(readOnlyValue) : "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-    import_material70.TableCell,
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material67.Tooltip, { title: isOverflowed ? String(readOnlyValue) : "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    import_material67.TableCell,
     {
       align: "left",
-      onMouseEnter: () => isCellEditable && setIsCellHovered(true),
-      onMouseLeave: () => isCellEditable && setIsCellHovered(false),
-      onClick: (event) => !disabled && onCellClick?.(event, isCellInEditMode),
+      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 || !enableEditMode ? "default" : "pointer",
+        cursor: disabled ? "default" : "pointer",
         opacity: disabled ? 0.2 : 1,
-        ":hover": isCellEditable ? getCellBackgroundColor(isCellInEditMode) : void 0,
-        background: enableEditMode && isCellInEditMode ? colors.lightBlueBackground : void 0
+        ":hover": editableCellType && {
+          background: isEditMode ? colors.lightBlueBackground : colors.neutral100
+        },
+        background: isEditMode ? colors.lightBlueBackground : (theme) => theme.palette.background.default
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
-        import_material70.Box,
+      children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
+        import_material67.Box,
         {
           p: 1,
           ref: cellRef,
@@ -8263,8 +8074,8 @@ var TableDesktopCell = ({
           textOverflow: "ellipsis",
           whiteSpace: "nowrap",
           children: [
-            enableEditMode && isCellHovered ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material70.Tooltip, { title: isCellInEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-              import_material70.IconButton,
+            isCellHovered ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material67.Tooltip, { title: isEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+              import_material67.IconButton,
               {
                 onClick: handleEditClick,
                 sx: {
@@ -8273,31 +8084,15 @@ var TableDesktopCell = ({
                   zIndex: 1,
                   borderRadius: 0,
                   position: "absolute",
-                  background: isCellInEditMode ? colors.lightBlueBackground : colors.neutral100,
+                  background: isEditMode ? colors.lightBlueBackground : colors.neutral100,
                   "&:hover": {
-                    backgroundColor: isCellInEditMode ? colors.lightBlueBackground : colors.neutral150
+                    backgroundColor: isEditMode ? colors.lightBlueBackground : colors.neutral150
                   }
                 },
-                children: isCellInEditMode ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_Close.default, { fontSize: "small", color: "error" }) : /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_Edit.default, { fontSize: "small" })
+                children: isEditMode ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_Close.default, { fontSize: "small", color: "error" }) : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_Edit.default, { fontSize: "small" })
               }
             ) }) : null,
-            enableEditMode && isCellInEditMode && editableCellType ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-              TableDesktopEditableComponent,
-              {
-                editInitialValue,
-                rowId,
-                field,
-                fieldName,
-                disabled,
-                inputLabel: inputLabel ?? "",
-                editableCellType,
-                filterOptions,
-                refetchFilterOptions,
-                isFetchingFilterOptions,
-                validateInput,
-                onUpdateEditableCell
-              }
-            ) : renderReadOnlyValue(readOnlyValue)
+            isEditMode && editableCellType ? editableComponents[editableCellType] : renderReadOnlyValue(readOnlyValue)
           ]
         }
       )
@@ -8306,12 +8101,12 @@ var TableDesktopCell = ({
 };
 
 // src/components/TableHeader/TableHeader.tsx
-var import_react40 = require("react");
+var import_react39 = require("react");
 var import_icons_material12 = require("@mui/icons-material");
-var import_material71 = require("@mui/material");
-var import_mui56 = require("tss-react/mui");
-var import_jsx_runtime125 = require("react/jsx-runtime");
-var useStyles50 = (0, import_mui56.makeStyles)()(() => ({
+var import_material68 = require("@mui/material");
+var import_mui57 = require("tss-react/mui");
+var import_jsx_runtime122 = require("react/jsx-runtime");
+var useStyles51 = (0, import_mui57.makeStyles)()(() => ({
   sortLabel: {
     "& .MuiTableSortLabel-icon": {
       opacity: 1
@@ -8319,9 +8114,9 @@ var useStyles50 = (0, import_mui56.makeStyles)()(() => ({
   }
 }));
 var TableHeader = ({ cells, onSort = null }) => {
-  const [sortableCells, setSortableCells] = (0, import_react40.useState)([]);
-  const { classes } = useStyles50();
-  (0, import_react40.useEffect)(() => {
+  const [sortableCells, setSortableCells] = (0, import_react39.useState)([]);
+  const { classes } = useStyles51();
+  (0, import_react39.useEffect)(() => {
     setSortableCells(cells);
   }, []);
   const getNewSortDirection = (direction) => {
@@ -8355,8 +8150,8 @@ var TableHeader = ({ cells, onSort = null }) => {
     });
     setSortableCells(sortedCells);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material71.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material71.TableRow, { children: sortableCells.map((cell, key) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material71.TableCell, { children: cell.isSortable ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
-    import_material71.TableSortLabel,
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material68.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material68.TableRow, { children: sortableCells.map((cell, key) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material68.TableCell, { children: cell.isSortable ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+    import_material68.TableSortLabel,
     {
       className: classes.sortLabel,
       direction: cell?.direction || "asc",
@@ -8366,13 +8161,13 @@ var TableHeader = ({ cells, onSort = null }) => {
     }
   ) : cell.label }, cell.label || key)) }) });
 };
-var TableHeader_default = (0, import_react40.memo)(TableHeader);
+var TableHeader_default = (0, import_react39.memo)(TableHeader);
 
 // src/components/TextDivider/TextDivider.tsx
-var import_material72 = require("@mui/material");
-var import_mui57 = require("tss-react/mui");
-var import_jsx_runtime126 = require("react/jsx-runtime");
-var useStyles51 = (0, import_mui57.makeStyles)()(() => ({
+var import_material69 = require("@mui/material");
+var import_mui58 = require("tss-react/mui");
+var import_jsx_runtime123 = require("react/jsx-runtime");
+var useStyles52 = (0, import_mui58.makeStyles)()(() => ({
   icon: {
     fontSize: 20
   },
@@ -8406,21 +8201,21 @@ var TextDivider = ({
   iconPosition = "left",
   titleWeight = "400"
 }) => {
-  const { classes } = useStyles51();
+  const { classes } = useStyles52();
   const iconColor = color ?? colors.neutral900;
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
-    import_material72.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+    import_material69.Box,
     {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       className: classes.container,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material72.Divider, { className: classes.leftDivider }),
-        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material72.Button, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material72.Box, { className: classes.center, children: [
-          Icon2 && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } }),
-          /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
-            import_material72.Typography,
+        /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material69.Divider, { className: classes.leftDivider }),
+        /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material69.Button, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_material69.Box, { className: classes.center, children: [
+          Icon2 && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } }),
+          /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+            import_material69.Typography,
             {
               color: "textSecondary",
               className: classes.title,
@@ -8428,9 +8223,9 @@ var TextDivider = ({
               children: title
             }
           ),
-          Icon2 && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } })
+          Icon2 && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material72.Divider, { className: classes.rightDivider })
+        /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material69.Divider, { className: classes.rightDivider })
       ]
     }
   );
@@ -8439,11 +8234,11 @@ var TextDivider_default = TextDivider;
 
 // src/components/ThemedDateRangePicker/ThemedDateRangePicker.tsx
 var import_react_dates = require("react-dates");
-var import_mui58 = require("tss-react/mui");
+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_runtime127 = require("react/jsx-runtime");
-var useStyles52 = (0, import_mui58.makeStyles)()((theme) => ({
+var import_jsx_runtime124 = require("react/jsx-runtime");
+var useStyles53 = (0, import_mui59.makeStyles)()((theme) => ({
   wrapper: {
     "& .DateRangePicker": {
       backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : colors.neutral100,
@@ -8537,17 +8332,17 @@ var ThemedDateRangePicker = ({
   className,
   ...props
 }) => {
-  const { classes, cx } = useStyles52();
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_react_dates.DateRangePicker, { ...props }) });
+  const { classes, cx } = useStyles53();
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_react_dates.DateRangePicker, { ...props }) });
 };
 var ThemedDateRangePicker_default = ThemedDateRangePicker;
 
 // src/components/TheToolbar/TheToolbar.tsx
-var import_react41 = require("react");
-var import_material73 = require("@mui/material");
-var import_mui59 = require("tss-react/mui");
-var import_jsx_runtime128 = require("react/jsx-runtime");
-var useStyles53 = (0, import_mui59.makeStyles)()((theme) => ({
+var import_react40 = require("react");
+var import_material70 = require("@mui/material");
+var import_mui60 = require("tss-react/mui");
+var import_jsx_runtime125 = require("react/jsx-runtime");
+var useStyles54 = (0, import_mui60.makeStyles)()((theme) => ({
   menuButton: {
     color: theme.palette.primary.contrastText
   },
@@ -8565,10 +8360,10 @@ var TheToolbar = ({
   leftSection,
   rightSection
 }) => {
-  const { classes } = useStyles53();
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_material73.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_material73.Toolbar, { className: classes.topBar, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+  const { classes } = useStyles54();
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material70.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material70.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material70.Toolbar, { className: classes.topBar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
         RoundButton_default,
         {
           className: classes.menuButton,
@@ -8577,7 +8372,7 @@ var TheToolbar = ({
           onClick: handleOpen
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
         CompanyLogo_default,
         {
           size: "small",
@@ -8586,31 +8381,31 @@ var TheToolbar = ({
           imageLogoLightSmall
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.Box, { ml: 2, children: leftSection }),
-      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.Box, { ml: "auto", children: rightSection })
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material70.Box, { ml: 2, children: leftSection }),
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material70.Box, { ml: "auto", children: rightSection })
     ] }) }),
     LeftDrawer
   ] });
 };
-var TheToolbar_default = (0, import_react41.memo)(TheToolbar);
+var TheToolbar_default = (0, import_react40.memo)(TheToolbar);
 
 // src/components/ToastMessage/ToastMessage.tsx
-var import_material74 = require("@mui/material");
-var import_jsx_runtime129 = require("react/jsx-runtime");
+var import_material71 = require("@mui/material");
+var import_jsx_runtime126 = require("react/jsx-runtime");
 var ToastMessage = ({
   toastType,
   toastMessage,
   open,
   onClose
-}) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-  import_material74.Snackbar,
+}) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+  import_material71.Snackbar,
   {
     open,
     autoHideDuration: 1500,
     onClose,
     anchorOrigin: { vertical: "top", horizontal: "right" },
-    children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-      import_material74.Alert,
+    children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+      import_material71.Alert,
       {
         elevation: 6,
         variant: "filled",
@@ -8636,10 +8431,10 @@ var ToastMessage = ({
 var ToastMessage_default = ToastMessage;
 
 // src/components/TwoButtonDialog/TwoButtonDialog.tsx
-var import_material75 = require("@mui/material");
-var import_mui60 = require("tss-react/mui");
-var import_jsx_runtime130 = require("react/jsx-runtime");
-var useStyles54 = (0, import_mui60.makeStyles)()((theme) => ({
+var import_material72 = require("@mui/material");
+var import_mui61 = require("tss-react/mui");
+var import_jsx_runtime127 = require("react/jsx-runtime");
+var useStyles55 = (0, import_mui61.makeStyles)()((theme) => ({
   paper: {
     padding: theme.spacing(2)
   },
@@ -8667,21 +8462,21 @@ var TwoButtonDialog = ({
   cancelLabel = "CANCEL",
   cancelButton
 }) => {
-  const { classes } = useStyles54();
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
-    import_material75.Dialog,
+  const { classes } = useStyles55();
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+    import_material72.Dialog,
     {
       open,
       disableEnforceFocus: true,
       maxWidth: "sm",
       fullWidth: true,
       closeAfterTransition: true,
-      BackdropComponent: import_material75.Backdrop,
+      BackdropComponent: import_material72.Backdrop,
       BackdropProps: { timeout: 500 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material75.Fade, { in: open, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material75.Paper, { className: classes.paper, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material75.Box, { className: classes.mb, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material75.Typography, { variant: "h5", component: "div", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
-            import_material75.Box,
+      children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material72.Fade, { in: open, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material72.Paper, { className: classes.paper, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material72.Box, { className: classes.mb, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material72.Typography, { variant: "h5", component: "div", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+            import_material72.Box,
             {
               sx: {
                 fontWeight: 600
@@ -8689,23 +8484,23 @@ var TwoButtonDialog = ({
               children: title
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
-            import_material75.Box,
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+            import_material72.Box,
             {
               className: classes.mt,
               sx: {
                 fontWeight: 600
               },
               children: [
-                subtitle1 && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material75.Typography, { variant: "subtitle1", children: subtitle1 }),
-                subtitle2 && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material75.Typography, { variant: "subtitle1", children: subtitle2 })
+                subtitle1 && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material72.Typography, { variant: "subtitle1", children: subtitle1 }),
+                subtitle2 && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material72.Typography, { variant: "subtitle1", children: subtitle2 })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material75.Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material75.Box, { className: classes.buttonContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material72.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material72.Box, { className: classes.buttonContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
             FilledButton_default,
             {
               copy: cancelLabel,
@@ -8718,7 +8513,7 @@ var TwoButtonDialog = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
             FilledButton_default,
             {
               color: "primary",
@@ -8727,7 +8522,7 @@ var TwoButtonDialog = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Loading_default, { isLoading: dialogLoading })
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Loading_default, { isLoading: dialogLoading })
       ] }) })
     }
   );
@@ -8735,30 +8530,30 @@ var TwoButtonDialog = ({
 var TwoButtonDialog_default = TwoButtonDialog;
 
 // src/components/UserBust/UserBust.tsx
-var import_react42 = require("react");
-var import_material76 = require("@mui/material");
-var import_jsx_runtime131 = require("react/jsx-runtime");
-var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-    import_material76.Avatar,
+var import_react41 = require("react");
+var import_material73 = require("@mui/material");
+var import_jsx_runtime128 = require("react/jsx-runtime");
+var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+    import_material73.Avatar,
     {
       src: user.profile_picture,
       alt: "user_avatar",
       style: { width: avatarProps.width, height: avatarProps.height }
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { style: { paddingTop: 16 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material76.Typography, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material76.Typography, { ...typographyProps.username, children: user.username })
+  /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { style: { paddingTop: 16 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.Typography, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.Typography, { ...typographyProps.username, children: user.username })
   ] })
 ] });
-var UserBust_default = (0, import_react42.memo)(UserBust);
+var UserBust_default = (0, import_react41.memo)(UserBust);
 
 // src/components/icons/IconChart.tsx
-var import_jsx_runtime132 = require("react/jsx-runtime");
+var import_jsx_runtime129 = require("react/jsx-runtime");
 var SvgIconChart = (props) => {
   const { fill } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
     "svg",
     {
       width: "20",
@@ -8767,7 +8562,7 @@ var SvgIconChart = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime129.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",
@@ -8846,9 +8641,9 @@ var IconChart_default = SvgIconChart;
   Switch,
   Table,
   TableDesktop,
-  TableDesktopCell,
-  TableDesktopEditableComponent,
   TableDesktopFooter,
+  TableDesktopRowCell,
+  TableDesktopSmartSelect,
   TableEmptyResult,
   TableHeader,
   TableLoading,