@natoora-libs/core 0.1.6 → 0.1.7

package/dist/components/index.js

@@ -4339,7 +4339,7 @@ var drawerAppList = [
         featureNames: [featureName_default.CUSTOMERS],
         pinned: "customers",
         icon: /* @__PURE__ */ jsx84(icons_default.SvgIconAccount, {}),
-        url: `/customer-list`,
+        url: `/react/customers`,
         children: [
           {
             name: "Sites",
@@ -6114,10 +6114,11 @@ var RenderContentList = ({
     const sections = items.map((item) => ({
       id: transformNameToID(item),
       element: document.getElementById(transformNameToID(item))
-    }));
+    })).filter(({ element }) => element !== null);
     if (observer.current) {
       observer.current.disconnect();
     }
+    if (sections.length === 0) return;
     observer.current = new IntersectionObserver(
       (entries) => {
         const visibleSection = entries.find((entry) => entry.isIntersecting);
@@ -6149,11 +6150,18 @@ var RenderContentList = ({
         return /* @__PURE__ */ jsxs64(
           ListItemButton2,
           {
-            component: "a",
-            href: `#${id}`,
-            onClick: () => setActive(id),
             selected: active === id,
             classes: { root: classes.root, selected: classes.selected },
+            onClick: () => {
+              setActive(id);
+              const element = document.getElementById(id);
+              if (element) {
+                element.scrollIntoView({
+                  behavior: "smooth",
+                  block: "start"
+                });
+              }
+            },
             children: [
               /* @__PURE__ */ jsx98(ListItemText5, { primary: item }),
               warningItems?.includes(item) && /* @__PURE__ */ jsx98(Tooltip4, { title: warningMessage, children: /* @__PURE__ */ jsx98(WarningAmber, { color: "warning" }) })
@@ -7072,14 +7080,240 @@ var LabelledSwitch = withStyles6(LSwitch, (theme) => ({
 }));
 var Switch_default = memo20(LabelledSwitch);
 
-// src/components/Table/SmartTableHeader.tsx
-import { memo as memo21 } from "react";
-import { TableCell, TableHead, TableRow, TableSortLabel } from "@mui/material";
+// src/components/SmartTableHeaderFilterMenu/SmartTableHeaderFilterMenu.tsx
+import React5, { useMemo as useMemo2, useState as useState15, useEffect as useEffect9 } from "react";
+import { FilterList } from "@mui/icons-material";
+import CheckIcon from "@mui/icons-material/Check";
+import {
+  Box as Box28,
+  Checkbox as Checkbox4,
+  Chip as Chip2,
+  Divider as Divider9,
+  FormControlLabel as FormControlLabel3,
+  IconButton as IconButton3,
+  Menu as Menu4
+} from "@mui/material";
+import classNames3 from "classnames";
 import { makeStyles as makeStyles44 } from "tss-react/mui";
-import { jsx as jsx109, jsxs as jsxs74 } from "react/jsx-runtime";
-var useStyles44 = makeStyles44()(() => ({
+import { Fragment as Fragment12, jsx as jsx109, jsxs as jsxs74 } from "react/jsx-runtime";
+var useStyles44 = makeStyles44()((theme) => ({
+  filterMenu: {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(0.5)
+  },
+  filter: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: theme.spacing(0, 3)
+  },
+  applyFilterButtonsContainer: {
+    display: "flex",
+    padding: theme.spacing(0, 1)
+  },
+  saveAsDefaultButton: {
+    color: theme.palette.primary.main
+  }
+}));
+var resolveFilterOption = (filterOption) => {
+  if (typeof filterOption === "object") {
+    return filterOption?.label || filterOption?.name || "";
+  }
+  return filterOption;
+};
+var findFilterIndex = (filters, filterOption) => filters.findIndex((item) => {
+  if (typeof item === "string" && typeof filterOption === "string") {
+    return item === filterOption;
+  }
+  if (typeof item === "object" && typeof filterOption === "object") {
+    return item.id === filterOption.id;
+  }
+  return false;
+});
+var SmartTableHeaderFilterMenu = ({
+  headCell,
+  numActiveFilters,
+  headerFilters,
+  shouldShowCheckOnFilter,
+  onApplyFilters
+}) => {
+  const { classes } = useStyles44();
+  const [anchorEl, setAnchorEl] = useState15(null);
+  const [selectedFilters, setSelectedFilters] = useState15(
+    headerFilters[headCell.id] ?? []
+  );
+  const filterOptions = headCell.filterOptionsQuery?.data ?? [];
+  const numFilterOptions = filterOptions.length ?? 0;
+  const numCurrentSelectedFilters = selectedFilters.length;
+  const handleFilterMenuOpen = (event) => {
+    if (!numFilterOptions) {
+      headCell.filterOptionsQuery?.refetch();
+    }
+    setAnchorEl(event.currentTarget);
+  };
+  const handleFilterMenuClose = () => {
+    setSelectedFilters(headerFilters[headCell.id]);
+    setAnchorEl(null);
+  };
+  const handleFilterOptionClick = (option) => {
+    const selectedIndex = findFilterIndex(selectedFilters, option);
+    let newSelected;
+    if (selectedIndex === -1) {
+      if (typeof option === "string") {
+        newSelected = [...selectedFilters, option];
+      } else {
+        newSelected = [...selectedFilters, option];
+      }
+    } else {
+      newSelected = selectedFilters.filter(
+        (_, index) => index !== selectedIndex
+      );
+    }
+    setSelectedFilters(newSelected);
+  };
+  const handleApplyFilters = (shouldSave) => {
+    const updatedFilters = {
+      ...headerFilters,
+      [headCell.id]: [...selectedFilters]
+    };
+    onApplyFilters?.(updatedFilters, shouldSave);
+    setAnchorEl(null);
+  };
+  useEffect9(() => {
+    setSelectedFilters(headerFilters[headCell.id] ?? []);
+  }, [headerFilters, headCell.id]);
+  const isOptionChecked = useMemo2(() => (resolvedOption) => !!selectedFilters?.some(
+    (value) => resolveFilterOption(value) === resolvedOption
+  ), [selectedFilters]);
+  return /* @__PURE__ */ jsxs74(Fragment12, { children: [
+    /* @__PURE__ */ jsx109(
+      IconButton3,
+      {
+        disableRipple: true,
+        onClick: handleFilterMenuOpen,
+        "data-testid": "filter-menu-button",
+        style: { padding: 0 },
+        className: classNames3("filter-menu-trigger", {
+          "has-active-filters": !!numActiveFilters
+        }),
+        children: numActiveFilters ? /* @__PURE__ */ jsx109(
+          Chip2,
+          {
+            sx: { height: 24 },
+            label: numActiveFilters,
+            icon: /* @__PURE__ */ jsx109(FilterList, { style: { fontSize: 18 }, color: "primary" })
+          }
+        ) : /* @__PURE__ */ jsx109(FilterList, { style: { fontSize: 18 } })
+      }
+    ),
+    /* @__PURE__ */ jsx109(
+      Menu4,
+      {
+        open: !!anchorEl,
+        onClose: handleFilterMenuClose,
+        anchorEl,
+        "data-testid": "filter-menu",
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        children: /* @__PURE__ */ jsxs74(Box28, { className: classes.filterMenu, children: [
+          /* @__PURE__ */ jsx109(Box28, { px: 3, children: /* @__PURE__ */ jsx109(
+            FormControlLabel3,
+            {
+              label: "Select All",
+              control: /* @__PURE__ */ jsx109(
+                Checkbox4,
+                {
+                  disableRipple: true,
+                  checked: numCurrentSelectedFilters === numFilterOptions,
+                  indeterminate: numCurrentSelectedFilters > 0 && numCurrentSelectedFilters < numFilterOptions,
+                  onChange: ({ target: { checked } }) => {
+                    if (checked) {
+                      setSelectedFilters([...filterOptions]);
+                    } else {
+                      setSelectedFilters([]);
+                    }
+                  }
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx109(Divider9, {}),
+          filterOptions.map(
+            (option) => {
+              const resolvedOption = resolveFilterOption(option);
+              return /* @__PURE__ */ jsxs74(
+                Box28,
+                {
+                  className: classes.filter,
+                  children: [
+                    /* @__PURE__ */ jsx109(
+                      FormControlLabel3,
+                      {
+                        label: resolvedOption,
+                        control: /* @__PURE__ */ jsx109(
+                          Checkbox4,
+                          {
+                            disableRipple: true,
+                            onChange: () => handleFilterOptionClick(option),
+                            checked: isOptionChecked(resolvedOption)
+                          }
+                        )
+                      },
+                      resolvedOption
+                    ),
+                    shouldShowCheckOnFilter?.(headCell.id, option) ? /* @__PURE__ */ jsx109(CheckIcon, { fontSize: "small", color: "action" }) : null
+                  ]
+                },
+                resolvedOption
+              );
+            }
+          ),
+          /* @__PURE__ */ jsx109(Divider9, {}),
+          /* @__PURE__ */ jsxs74(Box28, { className: classes.applyFilterButtonsContainer, children: [
+            /* @__PURE__ */ jsx109(
+              ExtendedButton_default,
+              {
+                copy: "Save as Default",
+                buttonType: "button",
+                variant: "text",
+                tooltip: "Persists those filters for future visits",
+                className: classes.saveAsDefaultButton,
+                onClick: () => handleApplyFilters(true)
+              }
+            ),
+            /* @__PURE__ */ jsx109(
+              ExtendedButton_default,
+              {
+                copy: "Apply",
+                color: "primary",
+                buttonType: "submit",
+                onClick: () => handleApplyFilters(false)
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+var SmartTableHeaderFilterMenu_default = React5.memo(SmartTableHeaderFilterMenu);
+
+// src/components/SmartTableHeader/SmartTableHeader.tsx
+import { memo as memo21 } from "react";
+import {
+  Checkbox as Checkbox5,
+  TableCell,
+  TableHead,
+  TableRow,
+  TableSortLabel
+} from "@mui/material";
+import { makeStyles as makeStyles45 } from "tss-react/mui";
+import { jsx as jsx110, jsxs as jsxs75 } from "react/jsx-runtime";
+var useStyles45 = makeStyles45()((theme) => ({
   root: {
     backgroundColor: colors.neutral100,
+    height: theme.spacing(6),
     "& .MuiTableSortLabel-root": {
       fontWeight: 600,
       fontSize: ".875rem"
@@ -7096,49 +7330,112 @@ var useStyles44 = makeStyles44()(() => ({
     top: 20,
     width: 1
   },
-  containerTh: {
+  tableHeaderContent: {
     borderBottom: "1px solid",
     borderBottomColor: colors.neutral250,
-    backgroundColor: colors.neutral100,
-    outline: "1px solid",
-    outlineColor: 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 = (props) => {
-  const { classes } = useStyles44();
-  const { order, orderBy, onRequestSort } = props;
+var SmartTableHeader = ({
+  order,
+  orderBy,
+  headCells,
+  numSelected,
+  numRows,
+  enableCheckboxSelection = false,
+  headerFilters,
+  onRequestSort,
+  onSelectAllClick,
+  onApplyFilters,
+  shouldShowCheckOnFilter
+}) => {
+  const { classes } = useStyles45();
   const createSortHandler = (property) => (event) => {
-    onRequestSort?.(event, property);
+    onRequestSort(event, property);
   };
-  return /* @__PURE__ */ jsx109(TableHead, { className: classes.root, children: /* @__PURE__ */ jsx109(TableRow, { children: props.headCells.map((headCell) => /* @__PURE__ */ jsx109(
-    TableCell,
-    {
-      className: classes.containerTh,
-      align: "left",
-      sortDirection: orderBy === headCell.id ? order : false,
-      children: /* @__PURE__ */ jsxs74(
-        TableSortLabel,
-        {
-          active: orderBy === headCell.id,
-          direction: orderBy === headCell.id ? order : "asc",
-          onClick: createSortHandler(headCell.id),
-          children: [
-            headCell.label,
-            orderBy === headCell.id ? /* @__PURE__ */ jsx109("span", { className: classes.visuallyHidden, children: order === "desc" ? "sorted descending" : "sorted ascending" }) : null
-          ]
-        }
-      )
-    },
-    headCell.id
-  )) }) });
+  const isSortActive = (headCellId) => orderBy === headCellId;
+  return /* @__PURE__ */ jsx110(TableHead, { className: classes.root, children: /* @__PURE__ */ jsxs75(TableRow, { children: [
+    enableCheckboxSelection ? /* @__PURE__ */ jsx110(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx110(
+      Checkbox5,
+      {
+        color: "primary",
+        indeterminate: numSelected > 0 && numSelected < numRows,
+        checked: numRows > 0 && numSelected === numRows,
+        onChange: onSelectAllClick
+      }
+    ) }) : null,
+    headCells.map((headCell) => /* @__PURE__ */ jsxs75(
+      TableCell,
+      {
+        className: classes.tableHeaderContent,
+        align: "left",
+        sx: { width: headCell.width ?? "auto" },
+        sortDirection: orderBy === headCell.id ? order : false,
+        children: [
+          /* @__PURE__ */ jsxs75(
+            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__ */ jsx110("span", { className: classes.visuallyHidden, children: order === "desc" ? "sorted descending" : "sorted ascending" }) : null
+              ]
+            }
+          ),
+          headCell.filterOptionsQuery ? /* @__PURE__ */ jsx110(
+            SmartTableHeaderFilterMenu_default,
+            {
+              headCell,
+              headerFilters,
+              numActiveFilters: headerFilters[headCell.id]?.length ?? 0,
+              onApplyFilters,
+              shouldShowCheckOnFilter
+            }
+          ) : null
+        ]
+      },
+      headCell.id
+    ))
+  ] }) });
 };
 var SmartTableHeader_default = memo21(SmartTableHeader);
 
 // src/components/Table/Table.tsx
 var import_debounce = __toESM(require_debounce(), 1);
-import { useLayoutEffect, useState as useState15 } from "react";
+import { useLayoutEffect, useState as useState16 } from "react";
 import {
-  Box as Box29,
+  Box as Box30,
   Paper as Paper10,
   Table as MUITable,
   TableBody,
@@ -7148,9 +7445,28 @@ import {
   TableRow as TableRow2,
   TableSortLabel as TableSortLabel2
 } from "@mui/material";
-import { makeStyles as makeStyles45 } from "tss-react/mui";
+import { makeStyles as makeStyles46 } from "tss-react/mui";
 import { v4 as uuidv4 } from "uuid";
 
+// src/components/TableLoading/TableLoading.tsx
+import { Box as Box29, Skeleton as Skeleton2 } from "@mui/material";
+import { jsx as jsx111 } from "react/jsx-runtime";
+var TableLoading = ({
+  rowsPerPage,
+  rowHeight
+}) => /* @__PURE__ */ jsx111(Box29, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ jsx111(
+  Skeleton2,
+  {
+    animation: "pulse",
+    "data-testid": "table-loading-skeleton",
+    style: { margin: "8px", opacity: 0.4 },
+    variant: "rectangular",
+    height: rowHeight
+  },
+  index
+)) });
+var TableLoading_default = TableLoading;
+
 // src/components/Table/helpers.tsx
 function stableSort(array, cmp) {
   const stabilizedThis = array.map((el, index) => [el, index]);
@@ -7186,24 +7502,9 @@ function calculateRowsPerPage(rowHeight) {
   return 1;
 }
 
-// src/components/Table/TableLoading.tsx
-import { Box as Box28, Skeleton as Skeleton2 } from "@mui/material";
-import { jsx as jsx110 } from "react/jsx-runtime";
-var TableLoading = ({ rowsPerPage = 0, rowHeight }) => /* @__PURE__ */ jsx110(Box28, { children: Array.from({ length: rowsPerPage }).map((x, i) => /* @__PURE__ */ jsx110(
-  Skeleton2,
-  {
-    animation: "pulse",
-    style: { margin: "8px", opacity: 0.4 },
-    variant: "rectangular",
-    height: rowHeight
-  },
-  i
-)) });
-var TableLoading_default = TableLoading;
-
 // src/components/Table/Table.tsx
-import { jsx as jsx111, jsxs as jsxs75 } from "react/jsx-runtime";
-var useStyles45 = makeStyles45()(() => ({
+import { jsx as jsx112, jsxs as jsxs76 } from "react/jsx-runtime";
+var useStyles46 = makeStyles46()(() => ({
   root: {
     height: "calc(100vh - 262px)",
     overflow: "scroll"
@@ -7237,12 +7538,12 @@ var Table = ({
   serverRendered,
   updateSort
 }) => {
-  const [order, setOrder] = useState15(appliedFilters?.sortDir || "desc");
-  const [orderBy, setOrderBy] = useState15(
+  const [order, setOrder] = useState16(appliedFilters?.sortDir || "desc");
+  const [orderBy, setOrderBy] = useState16(
     appliedFilters?.sortField || "delivery_date"
   );
-  const [rowsPerPage, setRowsPerPage] = useState15(defaultRowsPerPage);
-  const { classes } = useStyles45();
+  const [rowsPerPage, setRowsPerPage] = useState16(defaultRowsPerPage);
+  const { classes } = useStyles46();
   const rowHeight = 56;
   const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
   const handleRequestSort = (event, property) => {
@@ -7280,24 +7581,24 @@ var Table = ({
     );
     const rowsComponents = rows.map((row) => {
       if (RenderItem) {
-        return /* @__PURE__ */ jsx111(RenderItem, { ...row }, row.id);
+        return /* @__PURE__ */ jsx112(RenderItem, { ...row }, row.id);
       }
-      return /* @__PURE__ */ jsx111(TableRow2, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ jsx111(TableCell2, { children: row[column.id] }, column.id)) }, row.id);
+      return /* @__PURE__ */ jsx112(TableRow2, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ jsx112(TableCell2, { children: row[column.id] }, column.id)) }, row.id);
     });
     if (emptyRows > 0 && rowsPerPage > emptyRows) {
       rowsComponents.push(
-        /* @__PURE__ */ jsx111(TableRow2, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ jsx111(TableCell2, { colSpan: 8 }) }, uuidv4())
+        /* @__PURE__ */ jsx112(TableRow2, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ jsx112(TableCell2, { colSpan: 8 }) }, uuidv4())
       );
     }
     return rowsComponents;
   };
-  return /* @__PURE__ */ jsx111(Paper10, { className: classes.root, children: /* @__PURE__ */ jsx111(Box29, { className: classes.paper, children: isLoading ? /* @__PURE__ */ jsx111(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ jsx111(TableContainer, { className: classes.container, children: /* @__PURE__ */ jsxs75(MUITable, { size: "medium", stickyHeader: true, children: [
-    /* @__PURE__ */ jsx111(TableHead2, { className: classes.header, children: /* @__PURE__ */ jsx111(TableRow2, { children: headCells?.map((headCell) => /* @__PURE__ */ jsx111(
+  return /* @__PURE__ */ jsx112(Paper10, { className: classes.root, children: /* @__PURE__ */ jsx112(Box30, { className: classes.paper, children: isLoading ? /* @__PURE__ */ jsx112(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ jsx112(TableContainer, { className: classes.container, children: /* @__PURE__ */ jsxs76(MUITable, { size: "medium", stickyHeader: true, children: [
+    /* @__PURE__ */ jsx112(TableHead2, { className: classes.header, children: /* @__PURE__ */ jsx112(TableRow2, { children: headCells?.map((headCell) => /* @__PURE__ */ jsx112(
       TableCell2,
       {
         align: "left",
         sortDirection: orderBy === headCell.id ? order : void 0,
-        children: /* @__PURE__ */ jsx111(
+        children: /* @__PURE__ */ jsx112(
           TableSortLabel2,
           {
             active: orderBy === headCell.id,
@@ -7309,16 +7610,20 @@ var Table = ({
       },
       headCell.id
     )) }) }),
-    /* @__PURE__ */ jsxs75(TableBody, { children: [
+    /* @__PURE__ */ jsxs76(TableBody, { children: [
       getTableRows(),
-      rowsPerPage === emptyRows && /* @__PURE__ */ jsx111(TableRow2, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ jsx111(TableCell2, { colSpan: 8, align: "center", children: "Nothing to display" }) })
+      rowsPerPage === emptyRows && /* @__PURE__ */ jsx112(TableRow2, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ jsx112(TableCell2, { colSpan: 8, align: "center", children: "Nothing to display" }) })
     ] })
   ] }) }) }) });
 };
 var Table_default = Table;
 
-// src/components/Table/TableDesktop.tsx
-import { useState as useState16 } from "react";
+// src/components/TableDesktop/TableDesktop.tsx
+import {
+  useCallback as useCallback2,
+  useMemo as useMemo3,
+  useState as useState17
+} from "react";
 import {
   Paper as Paper11,
   Table as Table2,
@@ -7326,41 +7631,50 @@ import {
   TableContainer as TableContainer2,
   Skeleton as Skeleton3
 } from "@mui/material";
-import { makeStyles as makeStyles47 } from "tss-react/mui";
+import { makeStyles as makeStyles48 } from "tss-react/mui";
 import { v4 as uuidv42 } from "uuid";
 
-// src/components/Table/TableEmptyResult.tsx
+// src/components/TableEmptyResult/TableEmptyResult.tsx
 import { TableCell as TableCell3, TableRow as TableRow3, Typography as Typography25 } from "@mui/material";
-import { makeStyles as makeStyles46 } from "tss-react/mui";
-import { jsx as jsx112, jsxs as jsxs76 } from "react/jsx-runtime";
-var useStyles46 = makeStyles46()(() => ({
+import { makeStyles as makeStyles47 } from "tss-react/mui";
+import { jsx as jsx113, jsxs as jsxs77 } from "react/jsx-runtime";
+var useStyles47 = makeStyles47()(() => ({
   tableCellIcon: { padding: 24, height: "calc(100vh - 320px)" },
   tableCellDefault: { padding: 24 }
 }));
 var TableEmptyResult = ({
+  colSpan,
   showClearFilterButton = false,
   handleClickOnClearFiltersButton = () => {
   }
 }) => {
-  const { classes } = useStyles46();
-  return showClearFilterButton ? /* @__PURE__ */ jsx112(TableRow3, { children: /* @__PURE__ */ jsxs76(TableCell3, { className: classes.tableCellIcon, colSpan: 8, align: "center", children: [
-    /* @__PURE__ */ jsx112(EmptyGlassIcon_default, {}),
-    /* @__PURE__ */ jsx112(Typography25, { variant: "h6", children: "No results found." }),
-    /* @__PURE__ */ jsx112(Typography25, { variant: "subtitle1", children: "Search without applied filters?" }),
-    /* @__PURE__ */ jsx112(
-      FilledButton_default,
-      {
-        copy: "Search",
-        variant: "contained",
-        color: "primary",
-        onClick: handleClickOnClearFiltersButton
-      }
-    )
-  ] }) }) : /* @__PURE__ */ jsx112(TableRow3, { children: /* @__PURE__ */ jsx112(
+  const { classes } = useStyles47();
+  return showClearFilterButton ? /* @__PURE__ */ jsx113(TableRow3, { children: /* @__PURE__ */ jsxs77(
+    TableCell3,
+    {
+      className: classes.tableCellIcon,
+      colSpan,
+      align: "center",
+      children: [
+        /* @__PURE__ */ jsx113(EmptyGlassIcon_default, {}),
+        /* @__PURE__ */ jsx113(Typography25, { variant: "h6", children: "No results found." }),
+        /* @__PURE__ */ jsx113(Typography25, { variant: "subtitle1", children: "Search without applied filters?" }),
+        /* @__PURE__ */ jsx113(
+          FilledButton_default,
+          {
+            copy: "Search",
+            variant: "contained",
+            color: "primary",
+            onClick: handleClickOnClearFiltersButton
+          }
+        )
+      ]
+    }
+  ) }) : /* @__PURE__ */ jsx113(TableRow3, { children: /* @__PURE__ */ jsx113(
     TableCell3,
     {
       className: classes.tableCellDefault,
-      colSpan: 8,
+      colSpan,
       align: "center",
       children: "Nothing to display"
     }
@@ -7368,9 +7682,9 @@ var TableEmptyResult = ({
 };
 var TableEmptyResult_default = TableEmptyResult;
 
-// src/components/Table/TableDesktop.tsx
-import { Fragment as Fragment12, jsx as jsx113, jsxs as jsxs77 } from "react/jsx-runtime";
-var useStyles47 = makeStyles47()(() => ({
+// src/components/TableDesktop/TableDesktop.tsx
+import { Fragment as Fragment13, jsx as jsx114, jsxs as jsxs78 } from "react/jsx-runtime";
+var useStyles48 = makeStyles48()((theme) => ({
   root: {
     justifyContent: "space-between",
     display: "flex",
@@ -7383,97 +7697,206 @@ var useStyles47 = makeStyles47()(() => ({
     justifyContent: "space-between"
   },
   container: {
-    maxHeight: "100%"
+    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 desc = (a, b, orderBy) => {
-  if (b[orderBy] < a[orderBy]) {
+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 (b[orderBy] > a[orderBy]) {
+  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[0], b[0]);
-  return order !== 0 ? order : a[1] - b[1];
-}).map((el) => el[0]);
-var getSorting2 = (order, orderBy) => order === "desc" ? (a, b) => desc(a, b, orderBy) : (a, b) => -desc(a, b, orderBy);
+var stableSort2 = (array, cmp) => array.map((el, index) => ({ el, index })).sort((a, b) => {
+  const order = cmp(a.el, b.el);
+  return order !== 0 ? order : a.index - b.index;
+}).map((el) => el.el);
+var getComparator = (order, orderBy) => order === "desc" ? (a, b) => descendingComparator2(a, b, orderBy) : (a, b) => -descendingComparator2(a, b, orderBy);
 var TableDesktop = ({
-  appliedFilters,
-  children,
   data,
   headCells,
+  RenderItem,
+  appliedFilters,
+  headerFilters,
+  children,
   height,
   isLoading,
-  RenderItem,
-  rowsPerPage,
+  rowsPerPage = 50,
+  enableCheckboxSelection = false,
+  disableInternalSort = false,
   updateSort,
   showClearFilterButton,
   handleClickOnClearFiltersButton,
   deleteItem,
-  keyField
+  keyField = "id",
+  tableLayout = "auto",
+  onApplyFilters,
+  shouldShowCheckOnFilter
 }) => {
-  const [order, setOrder] = useState16(
-    appliedFilters?.sortDir || "desc"
-  );
-  const [orderBy, setOrderBy] = useState16(
+  const [order, setOrder] = useState17(appliedFilters?.sortDir || "desc");
+  const [orderBy, setOrderBy] = useState17(
     appliedFilters?.sortField || "delivery_date"
   );
-  const [page] = useState16(0);
-  const { classes } = useStyles47();
+  const [selected, setSelected] = useState17([]);
+  const [page] = useState17(0);
+  const { classes } = useStyles48();
   const rowHeight = 56;
+  const emptyRows = useMemo3(
+    () => rowsPerPage - data.length,
+    [rowsPerPage, data]
+  );
+  const visibleHeadCells = useMemo3(
+    () => headCells.filter((headCell) => headCell?.enabled ?? true),
+    [headCells]
+  );
+  const handleSelectAllClick = useCallback2(
+    (event) => {
+      if (event.target.checked) {
+        const newSelected = data.map((n) => n[keyField]);
+        setSelected(newSelected);
+        return;
+      }
+      setSelected([]);
+    },
+    [data, keyField]
+  );
   const handleRequestSort = (event, property) => {
     const isAsc = orderBy === property && order === "asc";
     const orderDir = isAsc ? "desc" : "asc";
     setOrder(orderDir);
     setOrderBy(property);
-    updateSort(property, orderDir);
+    if (updateSort) {
+      updateSort(property, orderDir);
+    }
   };
-  const emptyRows = rowsPerPage - data.length;
-  return /* @__PURE__ */ jsx113("div", { className: classes.root, style: { height }, children: /* @__PURE__ */ jsx113(Paper11, { className: classes.paper, children: isLoading ? /* @__PURE__ */ jsx113("div", { children: [...Array(Math.floor(rowsPerPage))].map(() => /* @__PURE__ */ jsx113(
+  const handleRowCheckboxClick = useCallback2(
+    (event, keyFieldValue) => {
+      const selectedIndex = selected.indexOf(keyFieldValue);
+      let newSelected = [];
+      if (selectedIndex === -1) {
+        newSelected = newSelected.concat(selected, keyFieldValue);
+      } else if (selectedIndex === 0) {
+        newSelected = newSelected.concat(selected.slice(1));
+      } else if (selectedIndex === selected.length - 1) {
+        newSelected = newSelected.concat(selected.slice(0, -1));
+      } else if (selectedIndex > 0) {
+        newSelected = newSelected.concat(
+          selected.slice(0, selectedIndex),
+          selected.slice(selectedIndex + 1)
+        );
+      }
+      setSelected(newSelected);
+    },
+    [selected]
+  );
+  const renderTableRows = useMemo3(() => {
+    const sortedData = disableInternalSort ? data : stableSort2(data, getComparator(order, orderBy));
+    return sortedData.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row, index) => {
+      const isItemSelected = selected.includes(row[keyField]);
+      return /* @__PURE__ */ jsx114(
+        RenderItem,
+        {
+          ...{
+            ...row,
+            index,
+            deleteItem,
+            isItemSelected,
+            enableCheckboxSelection,
+            keyFieldValue: row[keyField],
+            handleRowCheckboxClick,
+            visibleHeadCells
+          }
+        },
+        row[keyField] ?? index
+      );
+    });
+  }, [
+    data,
+    order,
+    orderBy,
+    page,
+    rowsPerPage,
+    selected,
+    enableCheckboxSelection,
+    disableInternalSort,
+    deleteItem,
+    keyField,
+    handleRowCheckboxClick,
+    visibleHeadCells,
+    RenderItem
+  ]);
+  return /* @__PURE__ */ jsx114("div", { className: classes.root, style: { height }, children: /* @__PURE__ */ jsx114(Paper11, { className: classes.paper, children: isLoading ? /* @__PURE__ */ jsx114(Fragment13, { children: [...Array(Math.floor(rowsPerPage ?? 50))].map(() => /* @__PURE__ */ jsx114(
     Skeleton3,
     {
       animation: "pulse",
       style: { margin: "8px", opacity: 0.4 },
       variant: "rectangular",
-      height: rowHeight
+      height: rowHeight,
+      "data-testid": "loading-skeleton"
     },
-    Math.random()
-  )) }) : /* @__PURE__ */ jsxs77(Fragment12, { children: [
-    /* @__PURE__ */ jsx113(TableContainer2, { className: classes.container, children: /* @__PURE__ */ jsxs77(
+    uuidv42()
+  )) }) : /* @__PURE__ */ jsxs78(Fragment13, { children: [
+    /* @__PURE__ */ jsx114(TableContainer2, { className: classes.container, children: /* @__PURE__ */ jsxs78(
       Table2,
       {
         "aria-labelledby": "tableTitle",
         "aria-label": "sticky table",
         stickyHeader: true,
+        style: { tableLayout },
         children: [
-          /* @__PURE__ */ jsx113(
+          /* @__PURE__ */ jsx114(
             SmartTableHeader_default,
             {
-              headCells,
+              headCells: visibleHeadCells,
               order,
               orderBy,
-              onRequestSort: handleRequestSort
+              numSelected: selected.length,
+              numRows: data.length,
+              enableCheckboxSelection,
+              headerFilters: headerFilters ?? {},
+              onRequestSort: handleRequestSort,
+              onSelectAllClick: handleSelectAllClick,
+              onApplyFilters,
+              shouldShowCheckOnFilter
             }
           ),
-          /* @__PURE__ */ jsxs77(TableBody2, { children: [
-            stableSort2(data, getSorting2(order, orderBy)).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((item, index) => /* @__PURE__ */ jsx113(
-              RenderItem,
-              {
-                ...{ ...item, index, deleteItem }
-              },
-              item[keyField] || uuidv42()
-            )),
-            rowsPerPage === emptyRows && /* @__PURE__ */ jsx113(
-              TableEmptyResult_default,
-              {
-                showClearFilterButton,
-                handleClickOnClearFiltersButton
-              }
-            )
-          ] })
+          /* @__PURE__ */ jsx114(TableBody2, { children: rowsPerPage !== emptyRows ? renderTableRows : /* @__PURE__ */ jsx114(
+            TableEmptyResult_default,
+            {
+              colSpan: enableCheckboxSelection ? visibleHeadCells.length + 1 : visibleHeadCells.length,
+              showClearFilterButton,
+              handleClickOnClearFiltersButton
+            }
+          ) })
         ]
       }
     ) }),
@@ -7483,12 +7906,12 @@ var TableDesktop = ({
 var TableDesktop_default = TableDesktop;
 
 // src/components/TableHeader/TableHeader.tsx
-import { memo as memo22, useEffect as useEffect9, useState as useState17 } from "react";
+import { memo as memo22, useEffect as useEffect10, useState as useState18 } from "react";
 import { ImportExport as ImportExportIcon } from "@mui/icons-material";
 import { TableCell as TableCell4, TableHead as TableHead3, TableRow as TableRow4, TableSortLabel as TableSortLabel3 } from "@mui/material";
-import { makeStyles as makeStyles48 } from "tss-react/mui";
-import { jsx as jsx114 } from "react/jsx-runtime";
-var useStyles48 = makeStyles48()(() => ({
+import { makeStyles as makeStyles49 } from "tss-react/mui";
+import { jsx as jsx115 } from "react/jsx-runtime";
+var useStyles49 = makeStyles49()(() => ({
   sortLabel: {
     "& .MuiTableSortLabel-icon": {
       opacity: 1
@@ -7496,9 +7919,9 @@ var useStyles48 = makeStyles48()(() => ({
   }
 }));
 var TableHeader = ({ cells, onSort = null }) => {
-  const [sortableCells, setSortableCells] = useState17([]);
-  const { classes } = useStyles48();
-  useEffect9(() => {
+  const [sortableCells, setSortableCells] = useState18([]);
+  const { classes } = useStyles49();
+  useEffect10(() => {
     setSortableCells(cells);
   }, []);
   const getNewSortDirection = (direction) => {
@@ -7532,7 +7955,7 @@ var TableHeader = ({ cells, onSort = null }) => {
     });
     setSortableCells(sortedCells);
   };
-  return /* @__PURE__ */ jsx114(TableHead3, { children: /* @__PURE__ */ jsx114(TableRow4, { children: sortableCells.map((cell, key) => /* @__PURE__ */ jsx114(TableCell4, { children: cell.isSortable ? /* @__PURE__ */ jsx114(
+  return /* @__PURE__ */ jsx115(TableHead3, { children: /* @__PURE__ */ jsx115(TableRow4, { children: sortableCells.map((cell, key) => /* @__PURE__ */ jsx115(TableCell4, { children: cell.isSortable ? /* @__PURE__ */ jsx115(
     TableSortLabel3,
     {
       className: classes.sortLabel,
@@ -7546,10 +7969,10 @@ var TableHeader = ({ cells, onSort = null }) => {
 var TableHeader_default = memo22(TableHeader);
 
 // src/components/TextDivider/TextDivider.tsx
-import { Box as Box30, Typography as Typography26, Divider as Divider9, Button as Button13 } from "@mui/material";
-import { makeStyles as makeStyles49 } from "tss-react/mui";
-import { jsx as jsx115, jsxs as jsxs78 } from "react/jsx-runtime";
-var useStyles49 = makeStyles49()(() => ({
+import { Box as Box31, Typography as Typography26, Divider as Divider10, Button as Button13 } from "@mui/material";
+import { makeStyles as makeStyles50 } from "tss-react/mui";
+import { jsx as jsx116, jsxs as jsxs79 } from "react/jsx-runtime";
+var useStyles50 = makeStyles50()(() => ({
   icon: {
     fontSize: 20
   },
@@ -7583,20 +8006,20 @@ var TextDivider = ({
   iconPosition = "left",
   titleWeight = "400"
 }) => {
-  const { classes } = useStyles49();
+  const { classes } = useStyles50();
   const iconColor = color ?? colors.neutral900;
-  return /* @__PURE__ */ jsxs78(
-    Box30,
+  return /* @__PURE__ */ jsxs79(
+    Box31,
     {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       className: classes.container,
       children: [
-        /* @__PURE__ */ jsx115(Divider9, { className: classes.leftDivider }),
-        /* @__PURE__ */ jsx115(Button13, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ jsxs78(Box30, { className: classes.center, children: [
-          Icon3 && iconPosition === "left" && /* @__PURE__ */ jsx115(Icon3, { className: classes.icon, style: { color: iconColor } }),
-          /* @__PURE__ */ jsx115(
+        /* @__PURE__ */ jsx116(Divider10, { className: classes.leftDivider }),
+        /* @__PURE__ */ jsx116(Button13, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ jsxs79(Box31, { className: classes.center, children: [
+          Icon3 && iconPosition === "left" && /* @__PURE__ */ jsx116(Icon3, { className: classes.icon, style: { color: iconColor } }),
+          /* @__PURE__ */ jsx116(
             Typography26,
             {
               color: "textSecondary",
@@ -7605,9 +8028,9 @@ var TextDivider = ({
               children: title
             }
           ),
-          Icon3 && iconPosition === "right" && /* @__PURE__ */ jsx115(Icon3, { className: classes.icon, style: { color: iconColor } })
+          Icon3 && iconPosition === "right" && /* @__PURE__ */ jsx116(Icon3, { className: classes.icon, style: { color: iconColor } })
         ] }) }),
-        /* @__PURE__ */ jsx115(Divider9, { className: classes.rightDivider })
+        /* @__PURE__ */ jsx116(Divider10, { className: classes.rightDivider })
       ]
     }
   );
@@ -7616,11 +8039,11 @@ var TextDivider_default = TextDivider;
 
 // src/components/ThemedDateRangePicker/ThemedDateRangePicker.tsx
 import { DateRangePicker } from "react-dates";
-import { makeStyles as makeStyles50 } from "tss-react/mui";
+import { makeStyles as makeStyles51 } from "tss-react/mui";
 import "react-dates/initialize";
 import "react-dates/lib/css/_datepicker.css";
-import { jsx as jsx116 } from "react/jsx-runtime";
-var useStyles50 = makeStyles50()((theme) => ({
+import { jsx as jsx117 } from "react/jsx-runtime";
+var useStyles51 = makeStyles51()((theme) => ({
   wrapper: {
     "& .DateRangePicker": {
       backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : colors.neutral100,
@@ -7714,17 +8137,17 @@ var ThemedDateRangePicker = ({
   className,
   ...props
 }) => {
-  const { classes, cx } = useStyles50();
-  return /* @__PURE__ */ jsx116("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ jsx116(DateRangePicker, { ...props }) });
+  const { classes, cx } = useStyles51();
+  return /* @__PURE__ */ jsx117("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ jsx117(DateRangePicker, { ...props }) });
 };
 var ThemedDateRangePicker_default = ThemedDateRangePicker;
 
 // src/components/TheToolbar/TheToolbar.tsx
 import { memo as memo23 } from "react";
-import { AppBar as AppBar2, Box as Box31, Toolbar as Toolbar2 } from "@mui/material";
-import { makeStyles as makeStyles51 } from "tss-react/mui";
-import { jsx as jsx117, jsxs as jsxs79 } from "react/jsx-runtime";
-var useStyles51 = makeStyles51()((theme) => ({
+import { AppBar as AppBar2, Box as Box32, Toolbar as Toolbar2 } from "@mui/material";
+import { makeStyles as makeStyles52 } from "tss-react/mui";
+import { jsx as jsx118, jsxs as jsxs80 } from "react/jsx-runtime";
+var useStyles52 = makeStyles52()((theme) => ({
   menuButton: {
     color: theme.palette.primary.contrastText
   },
@@ -7761,10 +8184,10 @@ var TheToolbar = ({
   handleOpen,
   LeftDrawer: LeftDrawer2
 }) => {
-  const { classes } = useStyles51();
-  return /* @__PURE__ */ jsxs79(Box31, { children: [
-    /* @__PURE__ */ jsx117(AppBar2, { children: /* @__PURE__ */ jsxs79(Toolbar2, { className: classes.topBar, children: [
-      /* @__PURE__ */ jsx117(
+  const { classes } = useStyles52();
+  return /* @__PURE__ */ jsxs80(Box32, { children: [
+    /* @__PURE__ */ jsx118(AppBar2, { children: /* @__PURE__ */ jsxs80(Toolbar2, { className: classes.topBar, children: [
+      /* @__PURE__ */ jsx118(
         RoundButton_default,
         {
           className: classes.menuButton,
@@ -7773,7 +8196,7 @@ var TheToolbar = ({
           onClick: handleOpen
         }
       ),
-      /* @__PURE__ */ jsx117(
+      /* @__PURE__ */ jsx118(
         CompanyLogo_default,
         {
           size: "small",
@@ -7783,7 +8206,7 @@ var TheToolbar = ({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx117(Box31, { className: classes.offset }),
+    /* @__PURE__ */ jsx118(Box32, { className: classes.offset }),
     LeftDrawer2
   ] });
 };
@@ -7791,20 +8214,20 @@ var TheToolbar_default = memo23(TheToolbar);
 
 // src/components/ToastMessage/ToastMessage.tsx
 import { Alert as MuiAlert, Snackbar } from "@mui/material";
-import { jsx as jsx118 } from "react/jsx-runtime";
+import { jsx as jsx119 } from "react/jsx-runtime";
 var ToastMessage = ({
   toastType,
   toastMessage,
   open,
   onClose
-}) => /* @__PURE__ */ jsx118(
+}) => /* @__PURE__ */ jsx119(
   Snackbar,
   {
     open,
     autoHideDuration: 1500,
     onClose,
     anchorOrigin: { vertical: "top", horizontal: "right" },
-    children: /* @__PURE__ */ jsx118(
+    children: /* @__PURE__ */ jsx119(
       MuiAlert,
       {
         elevation: 6,
@@ -7835,14 +8258,14 @@ import {
   Typography as Typography27,
   Dialog as Dialog5,
   Backdrop,
-  Box as Box32,
-  Divider as Divider10,
+  Box as Box33,
+  Divider as Divider11,
   Paper as Paper12,
   Fade as Fade2
 } from "@mui/material";
-import { makeStyles as makeStyles52 } from "tss-react/mui";
-import { jsx as jsx119, jsxs as jsxs80 } from "react/jsx-runtime";
-var useStyles52 = makeStyles52()((theme) => ({
+import { makeStyles as makeStyles53 } from "tss-react/mui";
+import { jsx as jsx120, jsxs as jsxs81 } from "react/jsx-runtime";
+var useStyles53 = makeStyles53()((theme) => ({
   paper: {
     padding: theme.spacing(2)
   },
@@ -7870,8 +8293,8 @@ var TwoButtonDialog = ({
   cancelLabel = "CANCEL",
   cancelButton
 }) => {
-  const { classes } = useStyles52();
-  return /* @__PURE__ */ jsx119(
+  const { classes } = useStyles53();
+  return /* @__PURE__ */ jsx120(
     Dialog5,
     {
       open,
@@ -7881,10 +8304,10 @@ var TwoButtonDialog = ({
       closeAfterTransition: true,
       BackdropComponent: Backdrop,
       BackdropProps: { timeout: 500 },
-      children: /* @__PURE__ */ jsx119(Fade2, { in: open, children: /* @__PURE__ */ jsxs80(Paper12, { className: classes.paper, children: [
-        /* @__PURE__ */ jsxs80(Box32, { className: classes.mb, children: [
-          /* @__PURE__ */ jsx119(Typography27, { variant: "h5", component: "div", children: /* @__PURE__ */ jsx119(
-            Box32,
+      children: /* @__PURE__ */ jsx120(Fade2, { in: open, children: /* @__PURE__ */ jsxs81(Paper12, { className: classes.paper, children: [
+        /* @__PURE__ */ jsxs81(Box33, { className: classes.mb, children: [
+          /* @__PURE__ */ jsx120(Typography27, { variant: "h5", component: "div", children: /* @__PURE__ */ jsx120(
+            Box33,
             {
               sx: {
                 fontWeight: 600
@@ -7892,23 +8315,23 @@ var TwoButtonDialog = ({
               children: title
             }
           ) }),
-          /* @__PURE__ */ jsxs80(
-            Box32,
+          /* @__PURE__ */ jsxs81(
+            Box33,
             {
               className: classes.mt,
               sx: {
                 fontWeight: 600
               },
               children: [
-                subtitle1 && /* @__PURE__ */ jsx119(Typography27, { variant: "subtitle1", children: subtitle1 }),
-                subtitle2 && /* @__PURE__ */ jsx119(Typography27, { variant: "subtitle1", children: subtitle2 })
+                subtitle1 && /* @__PURE__ */ jsx120(Typography27, { variant: "subtitle1", children: subtitle1 }),
+                subtitle2 && /* @__PURE__ */ jsx120(Typography27, { variant: "subtitle1", children: subtitle2 })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx119(Divider10, {}),
-        /* @__PURE__ */ jsxs80(Box32, { className: classes.buttonContainer, children: [
-          /* @__PURE__ */ jsx119(
+        /* @__PURE__ */ jsx120(Divider11, {}),
+        /* @__PURE__ */ jsxs81(Box33, { className: classes.buttonContainer, children: [
+          /* @__PURE__ */ jsx120(
             FilledButton_default,
             {
               copy: cancelLabel,
@@ -7921,7 +8344,7 @@ var TwoButtonDialog = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx119(
+          /* @__PURE__ */ jsx120(
             FilledButton_default,
             {
               color: "primary",
@@ -7930,7 +8353,7 @@ var TwoButtonDialog = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx119(Loading_default, { isLoading: dialogLoading })
+        /* @__PURE__ */ jsx120(Loading_default, { isLoading: dialogLoading })
       ] }) })
     }
   );
@@ -7938,10 +8361,10 @@ var TwoButtonDialog = ({
 var TwoButtonDialog_default = TwoButtonDialog;
 
 // src/components/icons/IconChart.tsx
-import { jsx as jsx120 } from "react/jsx-runtime";
+import { jsx as jsx121 } from "react/jsx-runtime";
 var SvgIconChart = (props) => {
   const { fill } = props;
-  return /* @__PURE__ */ jsx120(
+  return /* @__PURE__ */ jsx121(
     "svg",
     {
       width: "20",
@@ -7950,7 +8373,7 @@ var SvgIconChart = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ jsx120(
+      children: /* @__PURE__ */ jsx121(
         "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",
@@ -8021,6 +8444,7 @@ export {
   SectionName_default as SectionName,
   SmartSelect_default as SmartSelect,
   SmartTableHeader_default as SmartTableHeader,
+  SmartTableHeaderFilterMenu_default as SmartTableHeaderFilterMenu,
   SquareButton_default as SquareButton,
   SquareLabel_default as SquareLabel,
   Switch_default as Switch,