@natoora-libs/core 0.2.6 → 0.2.61

package/dist/components/index.js

@@ -985,7 +985,7 @@ var AutocompleteFilterMenuContent = ({
   onFilterOptionChange,
   onApplyFiltersClick,
   shouldShowCheckOnFilter,
-  onAutocompleteSearch,
+  onAutocompleteFilterChange,
   filterOptions
 }) => {
   const renderLoading = () => /* @__PURE__ */ jsx12(Skeleton, { variant: "rounded", height: 26, sx: { m: 1 } });
@@ -1018,7 +1018,7 @@ var AutocompleteFilterMenuContent = ({
         minCharacters: 3,
         sx: { backgroundColor: colors.neutral200 },
         onSearch: (value) => {
-          onAutocompleteSearch?.(value);
+          onAutocompleteFilterChange?.(value);
         }
       }
     ),
@@ -3707,7 +3707,7 @@ var CompanyLogo_default = CompanyLogo;
 
 // src/components/ControlledCheckbox/ControlledCheckbox.tsx
 import { Controller } from "react-hook-form";
-import { Checkbox as Checkbox3, FormControlLabel as FormControlLabel3, Tooltip as Tooltip6 } from "@mui/material";
+import { Checkbox as Checkbox3, FormControlLabel as FormControlLabel3, Tooltip as Tooltip7 } from "@mui/material";
 import { jsx as jsx77 } from "react/jsx-runtime";
 var ControlledCheckbox = ({
   name,
@@ -3745,7 +3745,7 @@ var ControlledCheckbox = ({
           )
         }
       );
-      return tooltipDescription ? /* @__PURE__ */ jsx77(Tooltip6, { title: tooltipDescription, children: /* @__PURE__ */ jsx77("span", { children: checkbox }) }) : checkbox;
+      return tooltipDescription ? /* @__PURE__ */ jsx77(Tooltip7, { title: tooltipDescription, children: /* @__PURE__ */ jsx77("span", { children: checkbox }) }) : checkbox;
     }
   }
 );
@@ -4897,7 +4897,7 @@ var FilterSimpleSelector = ({
 var FilterSimpleSelector_default = FilterSimpleSelector;
 
 // src/components/FixedFooter/FixedFooter.tsx
-import * as React2 from "react";
+import * as React4 from "react";
 import { Box as Box23 } from "@mui/material";
 import { makeStyles as makeStyles27 } from "tss-react/mui";
 import { jsx as jsx91, jsxs as jsxs55 } from "react/jsx-runtime";
@@ -4935,7 +4935,7 @@ var FixedFooter = ({ justifyContent, children }) => {
     )
   ] });
 };
-var FixedFooter_default = React2.memo(FixedFooter);
+var FixedFooter_default = React4.memo(FixedFooter);
 
 // src/components/Header/Header.tsx
 import { Paper as Paper3 } from "@mui/material";
@@ -6256,7 +6256,7 @@ import {
   ListItemButton,
   ListItemText as ListItemText4,
   ListSubheader,
-  Tooltip as Tooltip7
+  Tooltip as Tooltip8
 } from "@mui/material";
 import { makeStyles as makeStyles35 } from "tss-react/mui";
 
@@ -6345,7 +6345,7 @@ var RenderContentList = ({
             },
             children: [
               /* @__PURE__ */ jsx105(ListItemText4, { primary: item }),
-              (warningItems?.includes(item) || warningItems?.includes(id)) && /* @__PURE__ */ jsx105(Tooltip7, { title: warningMessage, children: /* @__PURE__ */ jsx105(WarningAmber, { color: "warning" }) })
+              (warningItems?.includes(item) || warningItems?.includes(id)) && /* @__PURE__ */ jsx105(Tooltip8, { title: warningMessage, children: /* @__PURE__ */ jsx105(WarningAmber, { color: "warning" }) })
             ]
           },
           id
@@ -6592,7 +6592,7 @@ import { makeStyles as makeStyles39 } from "tss-react/mui";
 
 // src/components/SearchWithFilters/SearchWithFilters.tsx
 import { useState as useState13, useEffect as useEffect9 } from "react";
-import * as React4 from "react";
+import * as React6 from "react";
 import {
   ArrowDropDown as ArrowDropDownIcon,
   ArrowDropUp as ArrowDropUpIcon,
@@ -6689,7 +6689,7 @@ var SearchWithFilters = ({
     )
   ] });
 };
-var SearchWithFilters_default = React4.memo(SearchWithFilters);
+var SearchWithFilters_default = React6.memo(SearchWithFilters);
 
 // src/components/SearchAndFilterHeader/SearchAndFilterHeader.tsx
 import { jsx as jsx109, jsxs as jsxs73 } from "react/jsx-runtime";
@@ -6752,7 +6752,7 @@ var SearchAndFilterHeader = ({
 var SearchAndFilterHeader_default = SearchAndFilterHeader;
 
 // src/components/SearchAndFilterHeader/SearchAndFilterHeaderForTable.tsx
-import * as React5 from "react";
+import * as React7 from "react";
 import { Box as Box32 } from "@mui/material";
 import { makeStyles as makeStyles41 } from "tss-react/mui";
 
@@ -6936,7 +6936,7 @@ var SearchAndFilterHeaderForTable = (props) => {
     /* @__PURE__ */ jsx111(Box32, { children: button })
   ] });
 };
-var SearchAndFilterHeaderForTable_default = React5.memo(SearchAndFilterHeaderForTable);
+var SearchAndFilterHeaderForTable_default = React7.memo(SearchAndFilterHeaderForTable);
 
 // src/components/SearchHeader/SearchHeader.tsx
 import { memo as memo18 } from "react";
@@ -6976,7 +6976,7 @@ var SearchHeader = memo18(
 
 // src/components/SectionName/SectionName.tsx
 import { History as History2, Info as InfoIcon } from "@mui/icons-material";
-import { Box as Box34, Divider as Divider10, IconButton as IconButton4, Tooltip as Tooltip8, Typography as Typography27 } from "@mui/material";
+import { Box as Box34, Divider as Divider10, IconButton as IconButton4, Tooltip as Tooltip9, Typography as Typography27 } from "@mui/material";
 import { makeStyles as makeStyles42 } from "tss-react/mui";
 import { jsx as jsx113, jsxs as jsxs77 } from "react/jsx-runtime";
 var useStyles42 = makeStyles42()((theme) => ({
@@ -7033,7 +7033,7 @@ var SectionName = ({
           children: name
         }
       ),
-      tooltipDescription ? /* @__PURE__ */ jsx113(Tooltip8, { title: tooltipDescription, placement: "right", children: /* @__PURE__ */ jsx113(
+      tooltipDescription ? /* @__PURE__ */ jsx113(Tooltip9, { title: tooltipDescription, placement: "right", children: /* @__PURE__ */ jsx113(
         InfoIcon,
         {
           fontSize: "small",
@@ -7063,123 +7063,18 @@ var SectionName = ({
 };
 var SectionName_default = SectionName;
 
-// src/components/SmartMultipleSelect/SmartMultipleSelect.tsx
-import { useState as useState15 } from "react";
+// src/components/SmartSelect/SmartSelect.tsx
+import { forwardRef as forwardRef2, useState as useState15, useEffect as useEffect10 } from "react";
 import {
-  Box as Box35,
-  Checkbox as Checkbox6,
   CircularProgress as CircularProgress4,
   FormControl as FormControl4,
   FormHelperText as FormHelperText3,
   InputLabel as InputLabel4,
-  ListItemText as ListItemText5,
-  Select as Select3,
-  Typography as Typography28
-} from "@mui/material";
-import { jsx as jsx114, jsxs as jsxs78 } from "react/jsx-runtime";
-var SmartMultipleSelect = ({
-  inputLabel,
-  variant = "standard",
-  size,
-  values,
-  defaultValues,
-  onChange,
-  onOpen,
-  onClose,
-  menuOptions,
-  isLoading,
-  disabled,
-  emptyMessage = "No options.",
-  helperText
-}) => {
-  const [localValues, setLocalValues] = useState15(defaultValues ?? []);
-  const handleChangeOption = (option) => {
-    let newValues = [];
-    const selectedIndex = localValues.findIndex(
-      (val) => val.value === option.value
-    );
-    if (selectedIndex === -1) {
-      newValues = [...localValues, option];
-    } else {
-      newValues = localValues.filter((_, i) => i !== selectedIndex);
-    }
-    setLocalValues(newValues);
-    onChange?.(newValues);
-  };
-  const renderMenuContent = () => !menuOptions?.length ? /* @__PURE__ */ jsx114(
-    Box35,
-    {
-      sx: { display: "flex", justifyContent: "center", alignItems: "center" },
-      children: /* @__PURE__ */ jsx114(Typography28, { children: emptyMessage })
-    }
-  ) : /* @__PURE__ */ jsx114(Box35, { sx: { display: "flex", flexDirection: "column" }, children: menuOptions?.map((option, index) => {
-    const selectedValues = values ?? localValues ?? [];
-    const isSelected = selectedValues.some(
-      (selected) => selected.value === option.value
-    );
-    return /* @__PURE__ */ jsxs78(
-      Box35,
-      {
-        onClick: () => handleChangeOption(option),
-        sx: {
-          p: 0.5,
-          display: "flex",
-          cursor: "pointer",
-          backgroundColor: isSelected ? colors.lightBlueBackground : void 0
-        },
-        children: [
-          /* @__PURE__ */ jsx114(Checkbox6, { disableRipple: true, sx: { py: 0.5 }, checked: isSelected }),
-          /* @__PURE__ */ jsx114(ListItemText5, { primary: option.label })
-        ]
-      },
-      option.value ?? index
-    );
-  }) });
-  return /* @__PURE__ */ jsxs78(FormControl4, { fullWidth: true, variant, children: [
-    /* @__PURE__ */ jsx114(InputLabel4, { children: inputLabel }),
-    /* @__PURE__ */ jsx114(
-      Select3,
-      {
-        multiple: true,
-        size,
-        disabled,
-        value: values ?? localValues,
-        defaultValue: defaultValues,
-        onOpen,
-        onClose: () => onClose?.(localValues),
-        renderValue: (selectedValues) => {
-          const valuesString = selectedValues.map((v) => v.label)?.join(", ");
-          return /* @__PURE__ */ jsx114(DynamicOverflowTooltip, { tooltipDescription: valuesString, children: valuesString });
-        },
-        children: isLoading ? /* @__PURE__ */ jsx114(
-          Box35,
-          {
-            sx: {
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center"
-            },
-            children: /* @__PURE__ */ jsx114(CircularProgress4, { size: 24 })
-          }
-        ) : renderMenuContent()
-      }
-    ),
-    helperText && /* @__PURE__ */ jsx114(FormHelperText3, { children: helperText })
-  ] });
-};
-
-// src/components/SmartSelect/SmartSelect.tsx
-import { forwardRef as forwardRef2, useState as useState16, useEffect as useEffect10 } from "react";
-import {
-  CircularProgress as CircularProgress5,
-  FormControl as FormControl5,
-  FormHelperText as FormHelperText4,
-  InputLabel as InputLabel5,
   MenuItem as MenuItem3,
-  Select as Select4
+  Select as Select3
 } from "@mui/material";
 import { makeStyles as makeStyles43 } from "tss-react/mui";
-import { jsx as jsx115, jsxs as jsxs79 } from "react/jsx-runtime";
+import { jsx as jsx114, jsxs as jsxs78 } from "react/jsx-runtime";
 var useStyles43 = makeStyles43()(() => ({
   container: {
     display: "flex",
@@ -7206,8 +7101,8 @@ var SmartSelect = forwardRef2(
     menuProps
   }, ref) => {
     const { classes } = useStyles43();
-    const [open, setOpen] = useState16(false);
-    const [localOptions, setLocalOptions] = useState16(options || []);
+    const [open, setOpen] = useState15(false);
+    const [localOptions, setLocalOptions] = useState15(options || []);
     useEffect10(() => {
       if (options) {
         setLocalOptions(options);
@@ -7247,8 +7142,8 @@ var SmartSelect = forwardRef2(
         onChange(selectedOption);
       }
     };
-    return /* @__PURE__ */ jsxs79(
-      FormControl5,
+    return /* @__PURE__ */ jsxs78(
+      FormControl4,
       {
         fullWidth: true,
         size,
@@ -7258,16 +7153,16 @@ var SmartSelect = forwardRef2(
         "data-testid": dataTestId,
         disabled,
         children: [
-          inputLabel && /* @__PURE__ */ jsx115(
-            InputLabel5,
+          inputLabel && /* @__PURE__ */ jsx114(
+            InputLabel4,
             {
               id: "smart-select-label",
               "data-testid": `${dataTestId}-label`,
               children: inputLabel
             }
           ),
-          /* @__PURE__ */ jsxs79(
-            Select4,
+          /* @__PURE__ */ jsxs78(
+            Select3,
             {
               ref,
               size,
@@ -7284,17 +7179,17 @@ var SmartSelect = forwardRef2(
               MenuProps: menuProps,
               label: inputLabel,
               children: [
-                isFetching && /* @__PURE__ */ jsx115(
+                isFetching && /* @__PURE__ */ jsx114(
                   MenuItem3,
                   {
                     disabled: true,
                     "data-testid": `${dataTestId}-loading`,
                     id: `${dataTestId}-loading`,
-                    children: /* @__PURE__ */ jsx115(CircularProgress5, { size: 24 })
+                    children: /* @__PURE__ */ jsx114(CircularProgress4, { size: 24 })
                   }
                 ),
-                (defaultOption === null || !defaultOptionLabelIsValid || !defaultOptionValueIsValid) && !isFetching && options?.length === 0 && /* @__PURE__ */ jsx115(MenuItem3, { disabled: true, "data-testid": `${dataTestId}-empty-message`, children: emptyMessage }),
-                localOptions.length === 0 && !isFetching && options?.length !== 0 && defaultOptionLabelIsValid && defaultOptionValueIsValid && /* @__PURE__ */ jsx115(
+                (defaultOption === null || !defaultOptionLabelIsValid || !defaultOptionValueIsValid) && !isFetching && options?.length === 0 && /* @__PURE__ */ jsx114(MenuItem3, { disabled: true, "data-testid": `${dataTestId}-empty-message`, children: emptyMessage }),
+                localOptions.length === 0 && !isFetching && options?.length !== 0 && defaultOptionLabelIsValid && defaultOptionValueIsValid && /* @__PURE__ */ jsx114(
                   MenuItem3,
                   {
                     value: defaultOption?.value,
@@ -7302,7 +7197,7 @@ var SmartSelect = forwardRef2(
                     children: defaultOption?.label
                   }
                 ),
-                !isFetching && combinedOptions.length > 0 && combinedOptions.map((option) => /* @__PURE__ */ jsx115(
+                !isFetching && combinedOptions.length > 0 && combinedOptions.map((option) => /* @__PURE__ */ jsx114(
                   MenuItem3,
                   {
                     value: option?.value,
@@ -7315,7 +7210,7 @@ var SmartSelect = forwardRef2(
               ]
             }
           ),
-          helperText && /* @__PURE__ */ jsx115(FormHelperText4, { "data-testid": `${dataTestId}-helper-text`, children: helperText })
+          helperText && /* @__PURE__ */ jsx114(FormHelperText3, { "data-testid": `${dataTestId}-helper-text`, children: helperText })
         ]
       }
     );
@@ -7325,10 +7220,10 @@ var SmartSelect_default = SmartSelect;
 
 // src/components/SquareLabel/SquareLabel.tsx
 import { memo as memo19 } from "react";
-import { Typography as Typography29 } from "@mui/material";
+import { Typography as Typography28 } from "@mui/material";
 import { red as red2 } from "@mui/material/colors";
 import { makeStyles as makeStyles44 } from "tss-react/mui";
-import { jsx as jsx116 } from "react/jsx-runtime";
+import { jsx as jsx115 } from "react/jsx-runtime";
 var useStyles44 = makeStyles44()((theme) => ({
   red: {
     backgroundColor: red2["50"],
@@ -7343,7 +7238,7 @@ var useStyles44 = makeStyles44()((theme) => ({
 }));
 var SquareLabel = ({ color, copy }) => {
   const { classes } = useStyles44();
-  return /* @__PURE__ */ jsx116(Typography29, { className: classes[color], children: copy });
+  return /* @__PURE__ */ jsx115(Typography28, { className: classes[color], children: copy });
 };
 var SquareLabel_default = memo19(SquareLabel);
 
@@ -7351,7 +7246,7 @@ var SquareLabel_default = memo19(SquareLabel);
 import { memo as memo20 } from "react";
 import { Grid as Grid2, Switch } from "@mui/material";
 import { withStyles as withStyles6 } from "tss-react/mui";
-import { jsx as jsx117, jsxs as jsxs80 } from "react/jsx-runtime";
+import { jsx as jsx116, jsxs as jsxs79 } from "react/jsx-runtime";
 var LSwitch = ({
   checked,
   labelOn,
@@ -7359,7 +7254,7 @@ var LSwitch = ({
   handleChange,
   classes,
   disabled
-}) => /* @__PURE__ */ jsx117("div", { className: classes.c_switch, children: /* @__PURE__ */ jsxs80(
+}) => /* @__PURE__ */ jsx116("div", { className: classes.c_switch, children: /* @__PURE__ */ jsxs79(
   Grid2,
   {
     component: "label",
@@ -7369,8 +7264,8 @@ var LSwitch = ({
       alignItems: "center"
     },
     children: [
-      labelOff && /* @__PURE__ */ jsx117(Grid2, { children: labelOff }),
-      /* @__PURE__ */ jsx117(Grid2, { children: /* @__PURE__ */ jsx117(
+      labelOff && /* @__PURE__ */ jsx116(Grid2, { children: labelOff }),
+      /* @__PURE__ */ jsx116(Grid2, { children: /* @__PURE__ */ jsx116(
         Switch,
         {
           checked,
@@ -7379,7 +7274,7 @@ var LSwitch = ({
           disabled
         }
       ) }),
-      labelOn && /* @__PURE__ */ jsx117(Grid2, { children: labelOn })
+      labelOn && /* @__PURE__ */ jsx116(Grid2, { children: labelOn })
     ]
   }
 ) });
@@ -7404,10 +7299,10 @@ var LabelledSwitch = withStyles6(LSwitch, (theme) => ({
 var Switch_default = memo20(LabelledSwitch);
 
 // src/components/SmartTableHeaderFilterMenu/SmartTableHeaderFilterMenu.tsx
-import { useState as useState17, useEffect as useEffect11 } from "react";
+import { useMemo as useMemo3, useState as useState16, useEffect as useEffect11, memo as memo21 } from "react";
 import { Menu as Menu4 } from "@mui/material";
 import classNames3 from "classnames";
-import { Fragment as Fragment13, jsx as jsx118, jsxs as jsxs81 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx117, jsxs as jsxs80 } from "react/jsx-runtime";
 var MAX_WIDTH = 276;
 var findFilterIndex = (filters, filterOption) => filters.findIndex((item) => {
   if (typeof item === "string" && typeof filterOption === "string") {
@@ -7418,147 +7313,147 @@ var findFilterIndex = (filters, filterOption) => filters.findIndex((item) => {
   }
   return false;
 });
-var SmartTableHeaderFilterMenu = ({
-  headCell,
-  numActiveFilters,
-  headerFilters,
-  shouldShowCheckOnFilter,
-  onApplyFilters
-}) => {
-  const [anchorEl, setAnchorEl] = useState17(null);
-  const [filterOptionsData, setFilterOptionsData] = useState17();
-  const [selectedFilterOptions, setSelectedFilterOptions] = useState17(headerFilters[headCell.id] ?? []);
-  const numFilterOptions = filterOptionsData?.length ?? 0;
-  useEffect11(() => {
-    if (headCell.filterOptions) {
-      setFilterOptionsData(headCell.filterOptions);
-    } else if (headCell.filterType === "boolean") {
-      setFilterOptionsData([
-        { id: "true", label: "Yes" },
-        { id: "false", label: "No" }
-      ]);
-    }
-  }, [headCell.filterOptions]);
-  const handleFilterMenuOpen = (event) => {
-    if (!numFilterOptions && headCell.filterType === "default") {
-      headCell.refetchFilterOptions?.();
-    }
-    setAnchorEl(event.currentTarget);
-  };
-  const handleFilterMenuClose = () => {
-    setSelectedFilterOptions(headerFilters[headCell.id]);
-    setAnchorEl(null);
-  };
-  const handleSelectAllChange = (checked) => {
-    if (checked) {
-      setSelectedFilterOptions([
-        ...filterOptionsData ?? []
-      ]);
-      return;
-    }
-    setSelectedFilterOptions([]);
-  };
-  const handleFilterOptionChange = (option) => {
-    const selectedIndex = findFilterIndex(selectedFilterOptions, option);
-    let newSelected;
-    if (selectedIndex === -1) {
-      if (typeof option === "string") {
-        newSelected = [...selectedFilterOptions, option];
-      } else {
-        newSelected = [
-          ...selectedFilterOptions,
-          option
-        ];
+var SmartTableHeaderFilterMenu = memo21(
+  ({
+    headCell,
+    numActiveFilters,
+    headerFilters,
+    shouldShowCheckOnFilter,
+    onApplyFilters
+  }) => {
+    const [anchorEl, setAnchorEl] = useState16(null);
+    const [filterOptionsData, setFilterOptionsData] = useState16();
+    const [selectedFilterOptions, setSelectedFilterOptions] = useState16(headerFilters[headCell.id] ?? []);
+    useEffect11(() => {
+      if (headCell.filterOptions) {
+        setFilterOptionsData(headCell.filterOptions);
       }
-    } else {
-      newSelected = selectedFilterOptions.filter(
-        (_, index) => index !== selectedIndex
-      );
-    }
-    setSelectedFilterOptions(newSelected);
-  };
-  const handleApplyFiltersClick = (shouldSave) => {
-    const updatedFilters = {
-      ...headerFilters,
-      [headCell.id]: [...selectedFilterOptions]
+    }, [headCell.filterOptions]);
+    const numFilterOptions = useMemo3(
+      () => filterOptionsData?.length ?? 0,
+      [filterOptionsData?.length]
+    );
+    const handleFilterMenuOpen = (event) => {
+      if (!numFilterOptions && !headCell.isAutocompleteFilterMenu) {
+        headCell.refetchFilterOptions?.();
+      }
+      setAnchorEl(event.currentTarget);
     };
-    onApplyFilters?.(updatedFilters, shouldSave);
-    setAnchorEl(null);
-  };
-  useEffect11(() => {
-    setSelectedFilterOptions(headerFilters[headCell.id] ?? []);
-  }, [headerFilters, headCell.id]);
-  return /* @__PURE__ */ jsxs81(Fragment13, { children: [
-    /* @__PURE__ */ jsx118(
-      ActiveFiltersIconButton,
-      {
-        numActiveFilters,
-        handleClick: handleFilterMenuOpen,
-        className: classNames3("filter-menu-trigger", {
-          "has-active-filters": !!numActiveFilters || !!anchorEl
-        })
+    const handleFilterMenuClose = () => {
+      setSelectedFilterOptions(headerFilters[headCell.id]);
+      setAnchorEl(null);
+    };
+    const handleSelectAllChange = (checked) => {
+      if (checked) {
+        setSelectedFilterOptions([
+          ...filterOptionsData ?? []
+        ]);
+        return;
       }
-    ),
-    /* @__PURE__ */ jsx118(
-      Menu4,
-      {
-        open: !!anchorEl,
-        onClose: handleFilterMenuClose,
-        anchorEl,
-        "data-testid": "filter-menu",
-        slotProps: {
-          list: {
-            sx: { p: 0, maxWidth: MAX_WIDTH }
-          }
-        },
-        anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        transformOrigin: { vertical: "top", horizontal: "right" },
-        children: headCell.filterType === "autocomplete" ? /* @__PURE__ */ jsx118(
-          AutocompleteFilterMenuContent,
-          {
-            columnId: headCell.id,
-            labelFieldName: headCell.fieldName ?? "",
-            isLoading: headCell.isFetchingFilterOptions,
-            filterOptions: filterOptionsData,
-            onAutocompleteSearch: headCell.onAutocompleteSearch,
-            selectedFilterOptions,
-            onFilterOptionChange: handleFilterOptionChange,
-            onApplyFiltersClick: handleApplyFiltersClick,
-            shouldShowCheckOnFilter
-          }
-        ) : /* @__PURE__ */ jsx118(
-          CheckboxFilterMenuContent,
-          {
-            columnId: headCell.id,
-            labelFieldName: headCell.fieldName ?? "",
-            isLoading: headCell.isFetchingFilterOptions,
-            selectedFilterOptions,
-            filterOptions: filterOptionsData ?? [],
-            onSelectAllChange: handleSelectAllChange,
-            onFilterOptionChange: handleFilterOptionChange,
-            onApplyFiltersClick: handleApplyFiltersClick,
-            shouldShowCheckOnFilter
-          }
-        )
+      setSelectedFilterOptions([]);
+    };
+    const handleFilterOptionChange = (option) => {
+      const selectedIndex = findFilterIndex(selectedFilterOptions, option);
+      let newSelected;
+      if (selectedIndex === -1) {
+        if (typeof option === "string") {
+          newSelected = [...selectedFilterOptions, option];
+        } else {
+          newSelected = [
+            ...selectedFilterOptions,
+            option
+          ];
+        }
+      } else {
+        newSelected = selectedFilterOptions.filter(
+          (_, index) => index !== selectedIndex
+        );
       }
-    )
-  ] });
-};
+      setSelectedFilterOptions(newSelected);
+    };
+    const handleApplyFiltersClick = (shouldSave) => {
+      const updatedFilters = {
+        ...headerFilters,
+        [headCell.id]: [...selectedFilterOptions]
+      };
+      onApplyFilters?.(updatedFilters, shouldSave);
+      setAnchorEl(null);
+    };
+    useEffect11(() => {
+      setSelectedFilterOptions(headerFilters[headCell.id] ?? []);
+    }, [headerFilters, headCell.id]);
+    return /* @__PURE__ */ jsxs80(Fragment13, { children: [
+      /* @__PURE__ */ jsx117(
+        ActiveFiltersIconButton,
+        {
+          numActiveFilters,
+          handleClick: handleFilterMenuOpen,
+          className: classNames3("filter-menu-trigger", {
+            "has-active-filters": !!numActiveFilters || !!anchorEl
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx117(
+        Menu4,
+        {
+          open: !!anchorEl,
+          onClose: handleFilterMenuClose,
+          anchorEl,
+          "data-testid": "filter-menu",
+          slotProps: {
+            list: {
+              sx: { p: 0, maxWidth: MAX_WIDTH }
+            }
+          },
+          anchorOrigin: { vertical: "bottom", horizontal: "right" },
+          transformOrigin: { vertical: "top", horizontal: "right" },
+          children: headCell.isAutocompleteFilterMenu ? /* @__PURE__ */ jsx117(
+            AutocompleteFilterMenuContent,
+            {
+              columnId: headCell.id,
+              labelFieldName: headCell.fieldName ?? "",
+              isLoading: headCell.isFetchingFilterOptions,
+              filterOptions: headCell.filterOptions,
+              onAutocompleteFilterChange: headCell.onAutocompleteFilterChange,
+              selectedFilterOptions,
+              onFilterOptionChange: handleFilterOptionChange,
+              onApplyFiltersClick: handleApplyFiltersClick,
+              shouldShowCheckOnFilter
+            }
+          ) : /* @__PURE__ */ jsx117(
+            CheckboxFilterMenuContent,
+            {
+              columnId: headCell.id,
+              labelFieldName: headCell.fieldName ?? "",
+              isLoading: headCell.isFetchingFilterOptions,
+              selectedFilterOptions,
+              filterOptions: filterOptionsData ?? [],
+              onSelectAllChange: handleSelectAllChange,
+              onFilterOptionChange: handleFilterOptionChange,
+              onApplyFiltersClick: handleApplyFiltersClick,
+              shouldShowCheckOnFilter
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
 
 // src/components/SmartTableHeader/SmartTableHeader.tsx
-import { memo as memo21 } from "react";
+import { memo as memo22 } from "react";
 import {
-  Box as Box36,
-  Checkbox as Checkbox7,
+  Box as Box35,
+  Checkbox as Checkbox6,
   TableCell,
   TableHead,
   TableRow,
   TableSortLabel,
-  Tooltip as Tooltip9,
-  Typography as Typography30
+  Tooltip as Tooltip10,
+  Typography as Typography29
 } from "@mui/material";
-import { jsx as jsx119, jsxs as jsxs82 } from "react/jsx-runtime";
-var SmartTableHeader = memo21(
+import { jsx as jsx118, jsxs as jsxs81 } from "react/jsx-runtime";
+var SmartTableHeader = memo22(
   ({
     order,
     orderBy,
@@ -7576,25 +7471,18 @@ var SmartTableHeader = memo21(
       onRequestSort(event, property);
     };
     const isSortActive = (headCellId) => orderBy === headCellId;
-    return /* @__PURE__ */ jsx119(TableHead, { children: /* @__PURE__ */ jsxs82(TableRow, { children: [
-      enableCheckboxSelection ? /* @__PURE__ */ jsx119(
-        TableCell,
+    return /* @__PURE__ */ jsx118(TableHead, { children: /* @__PURE__ */ jsxs81(TableRow, { children: [
+      enableCheckboxSelection ? /* @__PURE__ */ jsx118(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx118(
+        Checkbox6,
         {
-          padding: "checkbox",
-          sx: { backgroundColor: colors.neutral100 },
-          children: /* @__PURE__ */ jsx119(
-            Checkbox7,
-            {
-              color: "primary",
-              disableRipple: true,
-              indeterminate: numSelectedRows > 0 && numSelectedRows < numRows,
-              checked: numRows > 0 && numSelectedRows === numRows,
-              onChange: onSelectAllClick
-            }
-          )
+          color: "primary",
+          disableRipple: true,
+          indeterminate: numSelectedRows > 0 && numSelectedRows < numRows,
+          checked: numRows > 0 && numSelectedRows === numRows,
+          onChange: onSelectAllClick
         }
-      ) : null,
-      headCells.map((headCell) => /* @__PURE__ */ jsx119(
+      ) }) : null,
+      headCells.map((headCell) => /* @__PURE__ */ jsx118(
         TableCell,
         {
           align: "left",
@@ -7618,14 +7506,22 @@ var SmartTableHeader = memo21(
               }
             }
           },
-          children: /* @__PURE__ */ jsxs82(
-            Box36,
+          children: /* @__PURE__ */ jsxs81(
+            Box35,
             {
               display: "flex",
               flexDirection: "row",
               gap: headCell.disableSort ? 1 : 0,
               children: [
-                headCell.disableSort ? headCell.renderHeader ?? /* @__PURE__ */ jsx119(Tooltip9, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ jsx119(Typography30, { variant: "subtitle2", mt: 0.25, mb: -0.25, children: headCell.label }) }) : /* @__PURE__ */ jsx119(Tooltip9, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ jsxs82(
+                headCell.disableSort ? headCell.RenderHeader ?? /* @__PURE__ */ jsx118(Tooltip10, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ jsx118(
+                  Typography29,
+                  {
+                    variant: "subtitle2",
+                    mt: 0.25,
+                    fontWeight: 600,
+                    children: headCell.label
+                  }
+                ) }) : /* @__PURE__ */ jsx118(Tooltip10, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ jsxs81(
                   TableSortLabel,
                   {
                     "data-testid": "table-sort-label",
@@ -7633,8 +7529,8 @@ var SmartTableHeader = memo21(
                     direction: orderBy === headCell.id ? order : "asc",
                     onClick: createSortHandler(headCell.id),
                     children: [
-                      headCell.renderHeader ?? headCell.label,
-                      orderBy === headCell.id ? /* @__PURE__ */ jsx119(
+                      headCell.RenderHeader ?? headCell.label,
+                      orderBy === headCell.id ? /* @__PURE__ */ jsx118(
                         "span",
                         {
                           style: {
@@ -7654,7 +7550,7 @@ var SmartTableHeader = memo21(
                     ]
                   }
                 ) }),
-                headCell.filterType ? /* @__PURE__ */ jsx119(
+                headCell.refetchFilterOptions ? /* @__PURE__ */ jsx118(
                   SmartTableHeaderFilterMenu,
                   {
                     headCell,
@@ -7676,9 +7572,9 @@ var SmartTableHeader = memo21(
 
 // src/components/Table/Table.tsx
 var import_debounce = __toESM(require_debounce(), 1);
-import { useLayoutEffect, useState as useState18 } from "react";
+import { useLayoutEffect, useState as useState17 } from "react";
 import {
-  Box as Box38,
+  Box as Box37,
   Paper as Paper11,
   Table as MUITable,
   TableBody,
@@ -7692,12 +7588,12 @@ import { makeStyles as makeStyles45 } from "tss-react/mui";
 import { v4 as uuidv4 } from "uuid";
 
 // src/components/TableLoading/TableLoading.tsx
-import { Box as Box37, Skeleton as Skeleton4 } from "@mui/material";
-import { jsx as jsx120 } from "react/jsx-runtime";
+import { Box as Box36, Skeleton as Skeleton4 } from "@mui/material";
+import { jsx as jsx119 } from "react/jsx-runtime";
 var TableLoading = ({
   rowsPerPage,
   rowHeight
-}) => /* @__PURE__ */ jsx120(Box37, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ jsx120(
+}) => /* @__PURE__ */ jsx119(Box36, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ jsx119(
   Skeleton4,
   {
     animation: "pulse",
@@ -7746,7 +7642,7 @@ function calculateRowsPerPage(rowHeight) {
 }
 
 // src/components/Table/Table.tsx
-import { jsx as jsx121, jsxs as jsxs83 } from "react/jsx-runtime";
+import { jsx as jsx120, jsxs as jsxs82 } from "react/jsx-runtime";
 var useStyles45 = makeStyles45()(() => ({
   root: {
     height: "calc(100vh - 262px)",
@@ -7781,11 +7677,11 @@ var Table = ({
   serverRendered,
   updateSort
 }) => {
-  const [order, setOrder] = useState18(appliedFilters?.sortDir || "desc");
-  const [orderBy, setOrderBy] = useState18(
+  const [order, setOrder] = useState17(appliedFilters?.sortDir || "desc");
+  const [orderBy, setOrderBy] = useState17(
     appliedFilters?.sortField || "delivery_date"
   );
-  const [rowsPerPage, setRowsPerPage] = useState18(defaultRowsPerPage);
+  const [rowsPerPage, setRowsPerPage] = useState17(defaultRowsPerPage);
   const { classes } = useStyles45();
   const rowHeight = 56;
   const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
@@ -7824,24 +7720,24 @@ var Table = ({
     );
     const rowsComponents = rows.map((row) => {
       if (RenderItem) {
-        return /* @__PURE__ */ jsx121(RenderItem, { ...row }, row.id);
+        return /* @__PURE__ */ jsx120(RenderItem, { ...row }, row.id);
       }
-      return /* @__PURE__ */ jsx121(TableRow2, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ jsx121(TableCell2, { children: row[column.id] }, column.id)) }, row.id);
+      return /* @__PURE__ */ jsx120(TableRow2, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ jsx120(TableCell2, { children: row[column.id] }, column.id)) }, row.id);
     });
     if (emptyRows > 0 && rowsPerPage > emptyRows) {
       rowsComponents.push(
-        /* @__PURE__ */ jsx121(TableRow2, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ jsx121(TableCell2, { colSpan: 8 }) }, uuidv4())
+        /* @__PURE__ */ jsx120(TableRow2, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ jsx120(TableCell2, { colSpan: 8 }) }, uuidv4())
       );
     }
     return rowsComponents;
   };
-  return /* @__PURE__ */ jsx121(Paper11, { className: classes.root, children: /* @__PURE__ */ jsx121(Box38, { className: classes.paper, children: isLoading ? /* @__PURE__ */ jsx121(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ jsx121(TableContainer, { className: classes.container, children: /* @__PURE__ */ jsxs83(MUITable, { size: "medium", stickyHeader: true, children: [
-    /* @__PURE__ */ jsx121(TableHead2, { className: classes.header, children: /* @__PURE__ */ jsx121(TableRow2, { children: headCells?.map((headCell) => /* @__PURE__ */ jsx121(
+  return /* @__PURE__ */ jsx120(Paper11, { className: classes.root, children: /* @__PURE__ */ jsx120(Box37, { className: classes.paper, children: isLoading ? /* @__PURE__ */ jsx120(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ jsx120(TableContainer, { className: classes.container, children: /* @__PURE__ */ jsxs82(MUITable, { size: "medium", stickyHeader: true, children: [
+    /* @__PURE__ */ jsx120(TableHead2, { className: classes.header, children: /* @__PURE__ */ jsx120(TableRow2, { children: headCells?.map((headCell) => /* @__PURE__ */ jsx120(
       TableCell2,
       {
         align: "left",
         sortDirection: orderBy === headCell.id ? order : void 0,
-        children: /* @__PURE__ */ jsx121(
+        children: /* @__PURE__ */ jsx120(
           TableSortLabel2,
           {
             active: orderBy === headCell.id,
@@ -7853,9 +7749,9 @@ var Table = ({
       },
       headCell.id
     )) }) }),
-    /* @__PURE__ */ jsxs83(TableBody, { children: [
+    /* @__PURE__ */ jsxs82(TableBody, { children: [
       getTableRows(),
-      rowsPerPage === emptyRows && /* @__PURE__ */ jsx121(TableRow2, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ jsx121(TableCell2, { colSpan: 8, align: "center", children: "Nothing to display" }) })
+      rowsPerPage === emptyRows && /* @__PURE__ */ jsx120(TableRow2, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ jsx120(TableCell2, { colSpan: 8, align: "center", children: "Nothing to display" }) })
     ] })
   ] }) }) }) });
 };
@@ -7863,23 +7759,23 @@ var Table_default = Table;
 
 // src/components/TableDesktop/TableDesktop.tsx
 import {
-  useMemo as useMemo3,
-  useState as useState19,
+  useMemo as useMemo4,
+  useState as useState18,
   useEffect as useEffect12,
   useRef as useRef7
 } from "react";
-import { Paper as Paper12, Table as Table2, TableBody as TableBody3, TableContainer as TableContainer2, Box as Box40 } from "@mui/material";
+import { Paper as Paper12, Table as Table2, TableBody as TableBody3, TableContainer as TableContainer2, Box as Box39 } from "@mui/material";
 
 // src/components/TableDesktopLoadingState/TableDesktopLoadingState.tsx
 import { Skeleton as Skeleton5, TableCell as TableCell3, TableRow as TableRow3 } from "@mui/material";
-import { jsx as jsx122 } from "react/jsx-runtime";
+import { jsx as jsx121 } from "react/jsx-runtime";
 var getRange = (n) => Array.from({ length: n }, (_, i) => i + 1);
 var TableDesktopLoadingState = ({
   numRows,
   numColumns,
   rowHeight = 56
 }) => {
-  return getRange(numRows).map((rowNum) => /* @__PURE__ */ jsx122(TableRow3, { children: getRange(numColumns).map((colNum) => /* @__PURE__ */ jsx122(TableCell3, { children: /* @__PURE__ */ jsx122(
+  return getRange(numRows).map((rowNum) => /* @__PURE__ */ jsx121(TableRow3, { children: getRange(numColumns).map((colNum) => /* @__PURE__ */ jsx121(TableCell3, { children: /* @__PURE__ */ jsx121(
     Skeleton5,
     {
       animation: "pulse",
@@ -7895,13 +7791,13 @@ var TableDesktopLoadingState = ({
 import TableBody2 from "@mui/material/TableBody";
 import TableCell4 from "@mui/material/TableCell";
 import TableRow4 from "@mui/material/TableRow";
-import Typography31 from "@mui/material/Typography";
+import Typography30 from "@mui/material/Typography";
 
 // src/components/Buttons/BaseButton/BaseIconButton.tsx
 import { Button as Button16 } from "@mui/material";
-import { jsxs as jsxs84 } from "react/jsx-runtime";
+import { jsxs as jsxs83 } from "react/jsx-runtime";
 var BaseIconButton = ({ icon, sx, ...props }) => {
-  return /* @__PURE__ */ jsxs84(
+  return /* @__PURE__ */ jsxs83(
     Button16,
     {
       sx: {
@@ -7922,10 +7818,10 @@ var BaseIconButton = ({ icon, sx, ...props }) => {
 };
 
 // src/components/TableDesktopNoColumnsMessage/TableDesktopNoColumnsMessage.tsx
-import { jsx as jsx123, jsxs as jsxs85 } from "react/jsx-runtime";
+import { jsx as jsx122, jsxs as jsxs84 } from "react/jsx-runtime";
 var TableDesktopNoColumnsMessage = ({
   onClickNoColumnsMessageOpenMenu
-}) => /* @__PURE__ */ jsx123(TableBody2, { children: /* @__PURE__ */ jsx123(TableRow4, { children: /* @__PURE__ */ jsxs85(
+}) => /* @__PURE__ */ jsx122(TableBody2, { children: /* @__PURE__ */ jsx122(TableRow4, { children: /* @__PURE__ */ jsxs84(
   TableCell4,
   {
     sx: {
@@ -7938,10 +7834,10 @@ var TableDesktopNoColumnsMessage = ({
       alignItems: "center"
     },
     children: [
-      /* @__PURE__ */ jsx123(Typography31, { variant: "subtitle2", fontSize: 16, children: "Customise your view" }),
-      /* @__PURE__ */ jsx123(Typography31, { variant: "subtitle1", align: "center", color: "textSecondary", children: "Open the menu to customise your table and search." }),
-      /* @__PURE__ */ jsxs85(
-        Typography31,
+      /* @__PURE__ */ jsx122(Typography30, { variant: "subtitle2", fontSize: 16, children: "Customise your view" }),
+      /* @__PURE__ */ jsx122(Typography30, { variant: "subtitle1", align: "center", color: "textSecondary", children: "Open the menu to customise your table and search." }),
+      /* @__PURE__ */ jsxs84(
+        Typography30,
         {
           variant: "subtitle1",
           align: "center",
@@ -7953,18 +7849,18 @@ var TableDesktopNoColumnsMessage = ({
           },
           children: [
             "Tips: ",
-            /* @__PURE__ */ jsx123(Typography31, { component: "strong", children: "Save as default" }),
+            /* @__PURE__ */ jsx122(Typography30, { component: "strong", children: "Save as default" }),
             " to keep these columns for future views"
           ]
         }
       ),
-      /* @__PURE__ */ jsx123(
+      /* @__PURE__ */ jsx122(
         BaseIconButton,
         {
           variant: "contained",
           color: "primary",
           onClick: onClickNoColumnsMessageOpenMenu,
-          icon: /* @__PURE__ */ jsx123(IconTableEdit_default, { fill: colors.white }),
+          icon: /* @__PURE__ */ jsx122(IconTableEdit_default, { fill: colors.white }),
           children: "OPEN MENU"
         }
       )
@@ -7973,7 +7869,7 @@ var TableDesktopNoColumnsMessage = ({
 ) }) });
 
 // src/components/TableDesktopRows/TableDesktopRows.tsx
-import { jsx as jsx124 } from "react/jsx-runtime";
+import { jsx as jsx123 } from "react/jsx-runtime";
 var descendingComparator2 = (a, b, orderBy) => {
   const objA = a[orderBy];
   const objB = b[orderBy];
@@ -8019,7 +7915,7 @@ var TableDesktopRows = ({
   const sortedData = disableInternalSort ? data : stableSort2(data, getComparator(order, orderBy));
   return sortedData.map((row, index) => {
     const isItemSelected = selectedRows.has(row[keyField]);
-    return /* @__PURE__ */ jsx124(
+    return /* @__PURE__ */ jsx123(
       RenderItem,
       {
         ...{
@@ -8041,8 +7937,8 @@ var TableDesktopRows = ({
 };
 
 // src/components/TableDesktopRowSelectionBar/TableDesktopRowSelectionBar.tsx
-import { Box as Box39, Button as Button17, Typography as Typography32 } from "@mui/material";
-import { jsx as jsx125, jsxs as jsxs86 } from "react/jsx-runtime";
+import { Box as Box38, Button as Button17, Typography as Typography31 } from "@mui/material";
+import { jsx as jsx124, jsxs as jsxs85 } from "react/jsx-runtime";
 var TableDesktopRowSelectionBar = ({
   isEveryRowInPageSelected,
   isRowsFromAllPagesSelected,
@@ -8061,8 +7957,8 @@ var TableDesktopRowSelectionBar = ({
     }
     return `${numSelectedRows} row${numSelectedRows > 1 ? "s" : ""} selected.`;
   };
-  return isAnyRowSelected ? /* @__PURE__ */ jsxs86(
-    Box39,
+  return isAnyRowSelected ? /* @__PURE__ */ jsxs85(
+    Box38,
     {
       sx: {
         p: 1,
@@ -8074,22 +7970,22 @@ var TableDesktopRowSelectionBar = ({
         backgroundColor: colors.neutral150
       },
       children: [
-        /* @__PURE__ */ jsx125(Typography32, { children: getSelectedRowsText() }),
-        !isRowsFromAllPagesSelected ? /* @__PURE__ */ jsxs86(Button17, { onClick: onSelectRowsFromAllPagesClick, children: [
+        /* @__PURE__ */ jsx124(Typography31, { children: getSelectedRowsText() }),
+        !isRowsFromAllPagesSelected ? /* @__PURE__ */ jsxs85(Button17, { onClick: onSelectRowsFromAllPagesClick, children: [
           "Select all ",
           totalRowCount,
           " rows from all pages based on your filters"
         ] }) : null,
-        /* @__PURE__ */ jsx125(Button17, { onClick: onClearSelectionClick, children: "Clear Selection" })
+        /* @__PURE__ */ jsx124(Button17, { onClick: onClearSelectionClick, children: "Clear Selection" })
       ]
     }
   ) : null;
 };
 
 // src/components/TableEmptyResult/TableEmptyResult.tsx
-import { TableCell as TableCell5, TableRow as TableRow5, Typography as Typography33 } from "@mui/material";
+import { TableCell as TableCell5, TableRow as TableRow5, Typography as Typography32 } from "@mui/material";
 import { makeStyles as makeStyles46 } from "tss-react/mui";
-import { jsx as jsx126, jsxs as jsxs87 } from "react/jsx-runtime";
+import { jsx as jsx125, jsxs as jsxs86 } from "react/jsx-runtime";
 var useStyles46 = makeStyles46()(() => ({
   tableCellIcon: { padding: 24, height: "calc(100vh - 320px)" },
   tableCellDefault: { padding: 24 }
@@ -8101,17 +7997,17 @@ var TableEmptyResult = ({
   }
 }) => {
   const { classes } = useStyles46();
-  return showClearFilterButton ? /* @__PURE__ */ jsx126(TableRow5, { children: /* @__PURE__ */ jsxs87(
+  return showClearFilterButton ? /* @__PURE__ */ jsx125(TableRow5, { children: /* @__PURE__ */ jsxs86(
     TableCell5,
     {
       className: classes.tableCellIcon,
       colSpan,
       align: "center",
       children: [
-        /* @__PURE__ */ jsx126(EmptyGlassIcon_default, {}),
-        /* @__PURE__ */ jsx126(Typography33, { variant: "h6", children: "No results found." }),
-        /* @__PURE__ */ jsx126(Typography33, { variant: "subtitle1", children: "Search without applied filters?" }),
-        /* @__PURE__ */ jsx126(
+        /* @__PURE__ */ jsx125(EmptyGlassIcon_default, {}),
+        /* @__PURE__ */ jsx125(Typography32, { variant: "h6", children: "No results found." }),
+        /* @__PURE__ */ jsx125(Typography32, { variant: "subtitle1", children: "Search without applied filters?" }),
+        /* @__PURE__ */ jsx125(
           FilledButton_default,
           {
             copy: "Search",
@@ -8122,7 +8018,7 @@ var TableEmptyResult = ({
         )
       ]
     }
-  ) }) : /* @__PURE__ */ jsx126(TableRow5, { children: /* @__PURE__ */ jsx126(
+  ) }) : /* @__PURE__ */ jsx125(TableRow5, { children: /* @__PURE__ */ jsx125(
     TableCell5,
     {
       className: classes.tableCellDefault,
@@ -8135,7 +8031,7 @@ var TableEmptyResult = ({
 var TableEmptyResult_default = TableEmptyResult;
 
 // src/components/TableDesktop/TableDesktop.tsx
-import { Fragment as Fragment14, jsx as jsx127, jsxs as jsxs88 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx126, jsxs as jsxs87 } from "react/jsx-runtime";
 var TableDesktop = ({
   data = [],
   headCells,
@@ -8163,23 +8059,23 @@ var TableDesktop = ({
   refetchData
 }) => {
   const tableToolbarMenuButtonRef = useRef7(null);
-  const [tableToolbarMenuAnchor, setTableToolbarMenuAnchor] = useState19(null);
-  const [order, setOrder] = useState19(appliedFilters?.sortDir || "desc");
-  const [orderBy, setOrderBy] = useState19(
+  const [tableToolbarMenuAnchor, setTableToolbarMenuAnchor] = useState18(null);
+  const [order, setOrder] = useState18(appliedFilters?.sortDir || "desc");
+  const [orderBy, setOrderBy] = useState18(
     appliedFilters?.sortField || "delivery_date"
   );
-  const [selectedRows, setSelectedRows] = useState19(
+  const [selectedRows, setSelectedRows] = useState18(
     /* @__PURE__ */ new Set()
   );
-  const [isRowsFromAllPagesSelected, setIsRowsFromAllPagesSelected] = useState19(false);
-  const [isBulkChangesMode, setIsBulkChangesMode] = useState19(false);
+  const [isRowsFromAllPagesSelected, setIsRowsFromAllPagesSelected] = useState18(false);
+  const [isBulkChangesMode, setIsBulkChangesMode] = useState18(false);
   const numRows = data.length;
-  const numSelectedRows = useMemo3(() => {
+  const numSelectedRows = useMemo4(() => {
     const currentPageIds = new Set(data.map((row) => row[keyField]));
     return [...selectedRows].filter((id) => currentPageIds.has(id)).length;
   }, [data, selectedRows, keyField]);
   const isEveryRowInPageSelected = numRows > 0 && numSelectedRows === numRows;
-  const visibleHeadCells = useMemo3(
+  const visibleHeadCells = useMemo4(
     () => headCells.filter((headCell) => headCell?.enabled ?? true),
     [headCells]
   );
@@ -8250,7 +8146,7 @@ var TableDesktop = ({
   }, [isRowsFromAllPagesSelected, data]);
   const renderBody = () => {
     if (isLoading) {
-      return /* @__PURE__ */ jsx127(
+      return /* @__PURE__ */ jsx126(
         TableDesktopLoadingState,
         {
           numRows: Math.min(rowsPerPage, 10),
@@ -8260,7 +8156,7 @@ var TableDesktop = ({
       );
     }
     if (numRows === 0) {
-      return /* @__PURE__ */ jsx127(
+      return /* @__PURE__ */ jsx126(
         TableEmptyResult_default,
         {
           showClearFilterButton,
@@ -8269,7 +8165,7 @@ var TableDesktop = ({
         }
       );
     }
-    return /* @__PURE__ */ jsx127(
+    return /* @__PURE__ */ jsx126(
       TableDesktopRows,
       {
         data,
@@ -8288,8 +8184,8 @@ var TableDesktop = ({
       }
     );
   };
-  return /* @__PURE__ */ jsx127(
-    Box40,
+  return /* @__PURE__ */ jsx126(
+    Box39,
     {
       sx: {
         height,
@@ -8297,7 +8193,7 @@ var TableDesktop = ({
         justifyContent: "space-between",
         justifyItems: "stretch"
       },
-      children: /* @__PURE__ */ jsxs88(
+      children: /* @__PURE__ */ jsxs87(
         Paper12,
         {
           sx: {
@@ -8322,7 +8218,7 @@ var TableDesktop = ({
               isBulkChangesMode,
               onChangeBulkChangesMode: handleChangeBulkChangesMode
             }) : null,
-            /* @__PURE__ */ jsx127(
+            /* @__PURE__ */ jsx126(
               TableDesktopRowSelectionBar,
               {
                 isEveryRowInPageSelected,
@@ -8333,7 +8229,7 @@ var TableDesktop = ({
                 onClearSelectionClick: handleClearSelectionClick
               }
             ),
-            /* @__PURE__ */ jsx127(
+            /* @__PURE__ */ jsx126(
               TableContainer2,
               {
                 sx: {
@@ -8355,13 +8251,13 @@ var TableDesktop = ({
                     backgroundColor: (theme) => theme.palette.grey[500]
                   }
                 },
-                children: /* @__PURE__ */ jsx127(Table2, { stickyHeader: true, "aria-label": "sticky-table", sx: { tableLayout }, children: visibleHeadCells.length === 0 ? /* @__PURE__ */ jsx127(
+                children: /* @__PURE__ */ jsx126(Table2, { stickyHeader: true, "aria-label": "sticky-table", sx: { tableLayout }, children: visibleHeadCells.length === 0 ? /* @__PURE__ */ jsx126(
                   TableDesktopNoColumnsMessage,
                   {
                     onClickNoColumnsMessageOpenMenu: handleClickToolbarMenuOpen
                   }
-                ) : /* @__PURE__ */ jsxs88(Fragment14, { children: [
-                  /* @__PURE__ */ jsx127(
+                ) : /* @__PURE__ */ jsxs87(Fragment14, { children: [
+                  /* @__PURE__ */ jsx126(
                     SmartTableHeader,
                     {
                       order,
@@ -8377,7 +8273,7 @@ var TableDesktop = ({
                       shouldShowCheckOnFilter
                     }
                   ),
-                  /* @__PURE__ */ jsx127(TableBody3, { children: renderBody() })
+                  /* @__PURE__ */ jsx126(TableBody3, { children: renderBody() })
                 ] }) })
               }
             ),
@@ -8394,141 +8290,99 @@ var TableDesktop = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopEditableField.tsx
-import { useEffect as useEffect13, useState as useState22 } from "react";
-import DeleteIcon from "@mui/icons-material/Delete";
-import { Checkbox as Checkbox8, FormControlLabel as FormControlLabel5 } from "@mui/material";
-import { DatePicker, TimePicker } from "@mui/x-date-pickers";
-import moment2 from "moment";
-
-// src/components/TableDesktopEditableField/TableDesktopSmartMultipleSelect.tsx
-import { useMemo as useMemo4 } from "react";
-import { jsx as jsx128 } from "react/jsx-runtime";
-var TableDesktopSmartMultipleSelect = ({
-  initialValue,
-  inputLabel,
-  columnId,
-  fieldName,
-  rowId,
-  disabled,
-  variant = "standard",
-  size,
-  filterOptions,
-  refetchFilterOptions,
-  isFetchingFilterOptions,
-  onUpdateEditableCell
-}) => {
-  const defaultValues = useMemo4(() => {
-    return initialValue.map((val) => ({
-      value: val.id,
-      label: val[fieldName].toString()
-    }));
-  }, [initialValue]);
-  return /* @__PURE__ */ jsx128(
-    SmartMultipleSelect,
-    {
-      inputLabel,
-      size,
-      variant,
-      disabled,
-      defaultValues,
-      menuOptions: filterOptions,
-      isLoading: isFetchingFilterOptions,
-      onOpen: () => {
-        if (!filterOptions?.length) {
-          refetchFilterOptions?.();
-        }
-      },
-      onClose: (values) => {
-        const optionsValues = values.map((option) => option.value ?? "");
-        onUpdateEditableCell?.({
-          rowId,
-          columnId,
-          value: optionsValues,
-          label: optionsValues
-        });
-      }
-    }
-  );
-};
+import { Checkbox as Checkbox7, FormControlLabel as FormControlLabel5 } from "@mui/material";
 
 // src/components/TableDesktopEditableField/TableDesktopSmartSelect.tsx
-import { useState as useState20 } from "react";
-import { jsx as jsx129 } from "react/jsx-runtime";
-var TableDesktopSmartSelect = ({
-  ref,
-  initialValue,
-  inputLabel,
-  columnId,
-  fieldName,
-  rowId,
-  disabled,
-  variant = "standard",
-  size,
-  allowBlankOption,
-  filterOptions,
-  refetchFilterOptions,
-  isFetchingFilterOptions,
-  onUpdateEditableCell
-}) => {
-  const [value, setValue] = useState20(
-    initialValue
-  );
-  const valueId = resolveObjectType(value ?? "", "id");
-  const valueLabel = resolveObjectType(value ?? "", fieldName);
-  return /* @__PURE__ */ jsx129(
-    SmartSelect_default,
-    {
-      ref,
-      value: valueId,
-      allowBlankOption,
-      inputLabel,
-      options: filterOptions,
-      disabled,
-      variant,
-      size,
-      refetch: refetchFilterOptions,
-      isFetching: isFetchingFilterOptions,
-      defaultOption: {
-        value: valueId ?? "",
-        label: String(valueLabel ?? "")
-      },
-      onChange: ({ value: id, label }) => {
-        setValue({ id: id ?? "", name: label ?? "" });
-        onUpdateEditableCell?.({
-          rowId,
-          columnId,
-          value: id || null,
-          label: label ?? ""
-        });
+import { useState as useState19, memo as memo23, useEffect as useEffect13 } from "react";
+import { jsx as jsx127 } from "react/jsx-runtime";
+var TableDesktopSmartSelect = memo23(
+  ({
+    ref,
+    initialValue,
+    inputLabel,
+    field,
+    fieldName,
+    rowId,
+    disabled,
+    variant = "standard",
+    size,
+    filterOptions,
+    refetchFilterOptions,
+    isFetchingFilterOptions,
+    onUpdateEditableCell
+  }) => {
+    const [value, setValue] = useState19(
+      initialValue
+    );
+    const [options, setOptions] = useState19();
+    const valueId = resolveObjectType(value, "id");
+    const valueLabel = resolveObjectType(value, fieldName);
+    useEffect13(() => {
+      if (filterOptions) {
+        const parsedOptions = filterOptions?.map(
+          (option) => ({
+            value: resolveObjectType(option, "id"),
+            label: String(resolveObjectType(option, fieldName))
+          })
+        );
+        setOptions(parsedOptions);
       }
-    }
-  );
-};
+    }, [filterOptions]);
+    return /* @__PURE__ */ jsx127(
+      SmartSelect_default,
+      {
+        ref,
+        value: valueId,
+        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);
+        }
+      }
+    );
+  }
+);
 
 // src/components/TableDesktopEditableField/TableDesktopTextField.tsx
-import { useMemo as useMemo5, useState as useState21, useRef as useRef8 } from "react";
+import { useMemo as useMemo5, useState as useState20, useRef as useRef8 } from "react";
 import { TextField as TextField8 } from "@mui/material";
-import { jsx as jsx130 } from "react/jsx-runtime";
+import { jsx as jsx128 } from "react/jsx-runtime";
 var TableDesktopTextField = ({
   rowId,
   initialValue,
   inputLabel,
   disabled,
-  columnId,
+  field,
   type,
   variant = "standard",
   size,
   validateInput,
   onUpdateEditableCell
 }) => {
-  const [input, setInput] = useState21(initialValue);
+  const [input, setInput] = useState20(initialValue);
   const oldValue = useRef8(initialValue);
   const isDirty = useMemo5(
     () => input !== oldValue.current,
     [input, oldValue.current]
   );
   const hasValidationError = useMemo5(
-    () => isDirty && validateInput && !validateInput(input),
+    () => isDirty && !validateInput?.(input),
     [input, validateInput]
   );
   const commitValue = (value) => {
@@ -8537,7 +8391,7 @@ var TableDesktopTextField = ({
       return;
     }
     oldValue.current = value;
-    onUpdateEditableCell({ rowId, columnId, value, label: value });
+    onUpdateEditableCell(rowId ?? 0, field, value, value);
   };
   const handleKeyDown = (e) => {
     if (e.key === "Enter") {
@@ -8545,7 +8399,7 @@ var TableDesktopTextField = ({
       commitValue(input);
     }
   };
-  return /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsx128(
     TextField8,
     {
       fullWidth: true,
@@ -8568,9 +8422,6 @@ var TableDesktopTextField = ({
       slotProps: {
         input: {
           inputMode: type === "numeric" ? "numeric" : void 0
-        },
-        htmlInput: {
-          maxLength: 1e3
         }
       }
     }
@@ -8578,98 +8429,63 @@ var TableDesktopTextField = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopEditableField.tsx
-import { jsx as jsx131 } from "react/jsx-runtime";
+import { jsx as jsx129 } from "react/jsx-runtime";
 var TableDesktopEditableField = ({
   editInitialValue,
   rowId,
+  field,
+  fieldName,
   disabled,
+  inputLabel,
   showCheckboxLabel = false,
   variant = "standard",
   size,
-  onUpdateEditableCell,
-  headCell: {
-    id: columnId,
-    fieldName = "",
-    label: inputLabel = "",
-    editableCellType,
-    filterOptions,
-    refetchFilterOptions,
-    isFetchingFilterOptions,
-    validateInput,
-    allowBlankSelectOption
-  }
+  editableCellType,
+  filterOptions,
+  refetchFilterOptions,
+  isFetchingFilterOptions,
+  validateInput,
+  onUpdateEditableCell
 }) => {
-  const [parsedFilterOptions, setParsedFilterOptions] = useState22();
-  useEffect13(() => {
-    if (filterOptions && editableCellType === "select" || editableCellType === "multipleSelect") {
-      const parsedOptions = filterOptions?.map(
-        (option) => ({
-          value: resolveObjectType(option, "id"),
-          label: String(resolveObjectType(option, fieldName))
-        })
-      );
-      setParsedFilterOptions(parsedOptions);
-    }
-  }, [filterOptions, editableCellType]);
   const editableComponents = {
-    select: /* @__PURE__ */ jsx131(
+    select: /* @__PURE__ */ jsx129(
       TableDesktopSmartSelect,
       {
         rowId,
-        columnId,
-        fieldName,
-        disabled,
-        variant,
-        size,
-        allowBlankOption: allowBlankSelectOption,
-        initialValue: editInitialValue,
-        inputLabel,
-        filterOptions: parsedFilterOptions,
-        refetchFilterOptions,
-        isFetchingFilterOptions,
-        onUpdateEditableCell
-      }
-    ),
-    multipleSelect: /* @__PURE__ */ jsx131(
-      TableDesktopSmartMultipleSelect,
-      {
-        rowId,
-        columnId,
+        field,
         fieldName,
         disabled,
         variant,
         size,
         initialValue: editInitialValue,
         inputLabel,
-        filterOptions: parsedFilterOptions,
+        filterOptions,
         refetchFilterOptions,
         isFetchingFilterOptions,
         onUpdateEditableCell
       }
     ),
-    checkbox: /* @__PURE__ */ jsx131(
+    checkbox: /* @__PURE__ */ jsx129(
       FormControlLabel5,
       {
         label: showCheckboxLabel ? inputLabel : "",
-        control: /* @__PURE__ */ jsx131(
-          Checkbox8,
+        control: /* @__PURE__ */ jsx129(
+          Checkbox7,
           {
             disableRipple: true,
             disabled,
             defaultChecked: editInitialValue,
             onChange: ({ target: { checked } }) => {
-              onUpdateEditableCell?.({
-                rowId,
-                columnId,
-                value: checked,
-                label: checked
-              });
+              if (!onUpdateEditableCell) {
+                return;
+              }
+              onUpdateEditableCell(rowId ?? 0, field, checked, checked);
             }
           }
         )
       }
     ),
-    text: /* @__PURE__ */ jsx131(
+    text: /* @__PURE__ */ jsx129(
       TableDesktopTextField,
       {
         type: "text",
@@ -8677,14 +8493,14 @@ var TableDesktopEditableField = ({
         disabled,
         variant,
         size,
-        columnId,
+        field,
         initialValue: editInitialValue ?? "",
         inputLabel: inputLabel ?? "",
         validateInput,
         onUpdateEditableCell
       }
     ),
-    numeric: /* @__PURE__ */ jsx131(
+    numeric: /* @__PURE__ */ jsx129(
       TableDesktopTextField,
       {
         type: "numeric",
@@ -8692,88 +8508,29 @@ var TableDesktopEditableField = ({
         disabled,
         variant,
         size,
-        columnId,
+        field,
         initialValue: editInitialValue ?? "",
         inputLabel: inputLabel ?? "",
         validateInput,
         onUpdateEditableCell
       }
-    ),
-    date: /* @__PURE__ */ jsx131(
-      DatePicker,
-      {
-        defaultValue: moment2(editInitialValue),
-        label: inputLabel,
-        format: "DD/MM/YYYY",
-        sx: { overflowY: "hidden" },
-        onAccept: (value) => {
-          const formattedValue = value?.format("YYYY-MM-DD") ?? null;
-          const formattedLabel = value?.format("DD/MM/YYYY") ?? null;
-          onUpdateEditableCell?.({
-            rowId,
-            columnId,
-            value: formattedValue,
-            label: formattedLabel
-          });
-        },
-        slots: { clearIcon: DeleteIcon },
-        slotProps: {
-          field: { clearable: true },
-          clearButton: { sx: { p: 0.5 } },
-          openPickerButton: { sx: { p: 0 } },
-          textField: {
-            variant: "standard",
-            error: false
-          }
-        }
-      }
-    ),
-    time: /* @__PURE__ */ jsx131(
-      TimePicker,
-      {
-        defaultValue: moment2(editInitialValue, "HH:mm:ss"),
-        label: inputLabel,
-        sx: { overflowY: "hidden" },
-        onAccept: (value) => {
-          const formattedValue = value?.format("HH:mm") ?? null;
-          onUpdateEditableCell?.({
-            rowId,
-            columnId,
-            value: formattedValue,
-            label: formattedValue
-          });
-        },
-        slots: { clearIcon: DeleteIcon },
-        slotProps: {
-          field: { clearable: true },
-          clearButton: { sx: { p: 0.5 } },
-          openPickerButton: { sx: { p: 0 } },
-          textField: {
-            variant: "standard",
-            error: false
-          }
-        }
-      }
     )
   };
-  if (!editableCellType) {
-    return null;
-  }
   return editableComponents[editableCellType];
 };
 
 // src/components/TableDesktopFooter/TableDesktopFooter.tsx
 import Refresh3 from "@mui/icons-material/Refresh";
 import {
-  Box as Box41,
+  Box as Box40,
   Button as Button18,
   MenuItem as MenuItem4,
   Pagination as Pagination2,
-  Select as Select5,
+  Select as Select4,
   Stack,
-  Typography as Typography34
+  Typography as Typography33
 } from "@mui/material";
-import { jsx as jsx132, jsxs as jsxs89 } from "react/jsx-runtime";
+import { jsx as jsx130, jsxs as jsxs88 } from "react/jsx-runtime";
 var TableDesktopFooter = ({
   numPages,
   page,
@@ -8784,8 +8541,8 @@ var TableDesktopFooter = ({
   refetchData,
   isFetching
 }) => {
-  return /* @__PURE__ */ jsxs89(
-    Box41,
+  return /* @__PURE__ */ jsxs88(
+    Box40,
     {
       sx: {
         py: 1,
@@ -8796,7 +8553,7 @@ var TableDesktopFooter = ({
         borderTop: `1px solid ${colors.neutral300}`
       },
       children: [
-        refetchData ? /* @__PURE__ */ jsxs89(
+        refetchData ? /* @__PURE__ */ jsxs88(
           Button18,
           {
             disableRipple: true,
@@ -8811,7 +8568,7 @@ var TableDesktopFooter = ({
               borderColor: colors.neutral600
             },
             children: [
-              /* @__PURE__ */ jsx132(
+              /* @__PURE__ */ jsx130(
                 Refresh3,
                 {
                   fontSize: "small",
@@ -8822,21 +8579,21 @@ var TableDesktopFooter = ({
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsxs89(Box41, { sx: { display: "flex", ml: "auto", py: 1 }, children: [
-          pageSize && pageSizeOptions && onPageSizeChange ? /* @__PURE__ */ jsxs89(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
-            /* @__PURE__ */ jsx132(Typography34, { children: "Rows per page:" }),
-            /* @__PURE__ */ jsx132(
-              Select5,
+        /* @__PURE__ */ jsxs88(Box40, { sx: { display: "flex", ml: "auto", py: 1 }, children: [
+          pageSize && pageSizeOptions && onPageSizeChange ? /* @__PURE__ */ jsxs88(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
+            /* @__PURE__ */ jsx130(Typography33, { children: "Rows per page:" }),
+            /* @__PURE__ */ jsx130(
+              Select4,
               {
                 value: pageSize,
                 onChange: onPageSizeChange,
                 size: "small",
                 variant: "standard",
-                children: pageSizeOptions.map((pageSizeOption) => /* @__PURE__ */ jsx132(MenuItem4, { value: pageSizeOption, children: pageSizeOption }, pageSizeOption))
+                children: pageSizeOptions.map((pageSizeOption) => /* @__PURE__ */ jsx130(MenuItem4, { value: pageSizeOption, children: pageSizeOption }, pageSizeOption))
               }
             )
           ] }) : null,
-          /* @__PURE__ */ jsx132(
+          /* @__PURE__ */ jsx130(
             Pagination2,
             {
               color: "standard",
@@ -8852,15 +8609,15 @@ var TableDesktopFooter = ({
 };
 
 // src/components/TableDesktopCell/TableDesktopCell.tsx
-import { useEffect as useEffect14, useState as useState23 } from "react";
+import { useEffect as useEffect14, useState as useState21 } from "react";
 import CheckIcon3 from "@mui/icons-material/Check";
 import CloseIcon from "@mui/icons-material/Close";
 import EditIcon from "@mui/icons-material/Edit";
-import { IconButton as IconButton5, TableCell as TableCell6, Tooltip as Tooltip10 } from "@mui/material";
-import { Fragment as Fragment15, jsx as jsx133, jsxs as jsxs90 } from "react/jsx-runtime";
+import { IconButton as IconButton5, TableCell as TableCell6, Tooltip as Tooltip11 } from "@mui/material";
+import { Fragment as Fragment15, jsx as jsx131, jsxs as jsxs89 } from "react/jsx-runtime";
 var getReadOnlyBooleanIcon = (value) => {
   if (value) {
-    return /* @__PURE__ */ jsx133(CheckIcon3, { sx: { fontSize: 16 } });
+    return /* @__PURE__ */ jsx131(CheckIcon3, { sx: { fontSize: 16 } });
   }
   return "-";
 };
@@ -8874,17 +8631,25 @@ var getCellBackgroundColor = (isCellInEditMode) => ({
   background: isCellInEditMode ? colors.lightBlueBackground : colors.neutral100
 });
 var TableDesktopCell = ({
+  inputLabel,
   editInitialValue,
   rowId,
-  disabled,
+  field,
+  fieldName,
+  width,
   enableEditMode,
+  disabled,
   readOnlyValue,
-  onCellClick,
-  headCell
+  editableCellType,
+  filterOptions,
+  refetchFilterOptions,
+  isFetchingFilterOptions,
+  validateInput,
+  onUpdateEditableCell,
+  onCellClick
 }) => {
-  const [isCellHovered, setIsCellHovered] = useState23(false);
-  const [isCellInEditMode, setIsCellInEditMode] = useState23(false);
-  const { width, editableCellType } = headCell;
+  const [isCellHovered, setIsCellHovered] = useState21(false);
+  const [isCellInEditMode, setIsCellInEditMode] = useState21(false);
   useEffect14(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -8892,10 +8657,10 @@ var TableDesktopCell = ({
       }
     };
     if (isCellInEditMode) {
-      globalThis.addEventListener("keydown", handleKeyDown);
+      window.addEventListener("keydown", handleKeyDown);
     }
     return () => {
-      globalThis.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keydown", handleKeyDown);
     };
   }, [isCellInEditMode]);
   const handleEditClick = (e) => {
@@ -8903,7 +8668,7 @@ var TableDesktopCell = ({
     setIsCellInEditMode((prev) => !prev);
   };
   const isCellEditable = !!enableEditMode && !!editableCellType && !disabled;
-  return /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsx131(
     TableCell6,
     {
       align: "left",
@@ -8915,11 +8680,12 @@ var TableDesktopCell = ({
         width: width ?? "auto",
         position: "relative",
         cursor: disabled || !enableEditMode ? "default" : "pointer",
+        opacity: disabled ? 0.2 : 1,
         ":hover": isCellEditable ? getCellBackgroundColor(isCellInEditMode) : void 0,
         background: enableEditMode && isCellInEditMode ? colors.lightBlueBackground : void 0
       },
-      children: /* @__PURE__ */ jsx133(DynamicOverflowTooltip, { tooltipDescription: String(readOnlyValue), arrow: true, children: /* @__PURE__ */ jsxs90(Fragment15, { children: [
-        enableEditMode && isCellHovered ? /* @__PURE__ */ jsx133(Tooltip10, { title: isCellInEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ jsx133(
+      children: /* @__PURE__ */ jsx131(DynamicOverflowTooltip, { tooltipDescription: String(readOnlyValue), arrow: true, children: /* @__PURE__ */ jsxs89(Fragment15, { children: [
+        enableEditMode && isCellHovered ? /* @__PURE__ */ jsx131(Tooltip11, { title: isCellInEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ jsx131(
           IconButton5,
           {
             onClick: handleEditClick,
@@ -8934,17 +8700,24 @@ var TableDesktopCell = ({
                 backgroundColor: isCellInEditMode ? colors.lightBlueBackground : colors.neutral150
               }
             },
-            children: isCellInEditMode ? /* @__PURE__ */ jsx133(CloseIcon, { fontSize: "small", color: "error" }) : /* @__PURE__ */ jsx133(EditIcon, { fontSize: "small" })
+            children: isCellInEditMode ? /* @__PURE__ */ jsx131(CloseIcon, { fontSize: "small", color: "error" }) : /* @__PURE__ */ jsx131(EditIcon, { fontSize: "small" })
           }
         ) }) : null,
-        enableEditMode && isCellInEditMode && editableCellType ? /* @__PURE__ */ jsx133(
+        enableEditMode && isCellInEditMode && editableCellType ? /* @__PURE__ */ jsx131(
           TableDesktopEditableField,
           {
             editInitialValue,
             rowId,
+            field,
+            fieldName,
             disabled,
-            headCell,
-            onUpdateEditableCell: headCell.onUpdateEditableCell
+            inputLabel: inputLabel ?? "",
+            editableCellType,
+            filterOptions,
+            refetchFilterOptions,
+            isFetchingFilterOptions,
+            validateInput,
+            onUpdateEditableCell
           }
         ) : renderReadOnlyValue(readOnlyValue)
       ] }) })
@@ -8954,7 +8727,7 @@ var TableDesktopCell = ({
 
 // src/components/TableDesktopToolbar/TableDesktopToolbar.tsx
 import {
-  useState as useState24,
+  useState as useState22,
   useMemo as useMemo6,
   useRef as useRef9
 } from "react";
@@ -8962,16 +8735,16 @@ import Download from "@mui/icons-material/Download";
 import KeyboardArrowLeft2 from "@mui/icons-material/KeyboardArrowLeft";
 import KeyboardArrowRight2 from "@mui/icons-material/KeyboardArrowRight";
 import {
-  Box as Box42,
+  Box as Box41,
   Button as Button19,
   Divider as Divider11,
   FormControlLabel as FormControlLabel6,
   IconButton as IconButton6,
   Switch as Switch2,
-  Tooltip as Tooltip11,
-  Typography as Typography35
+  Tooltip as Tooltip12,
+  Typography as Typography34
 } from "@mui/material";
-import { Fragment as Fragment16, jsx as jsx134, jsxs as jsxs91 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx132, jsxs as jsxs90 } from "react/jsx-runtime";
 var TableDesktopToolbar = ({
   toolbarLabel,
   headCells,
@@ -8994,10 +8767,10 @@ var TableDesktopToolbar = ({
   renderInfoIcons
 }) => {
   const scrollRef = useRef9(null);
-  const [bulkChanges, setBulkChanges] = useState24([]);
-  const [isBulkChangesDialogOpen, setIsBulkChangesDialogOpen] = useState24(false);
-  const [isExportCsvDialogOpen, setIsExportCsvDialogOpen] = useState24(false);
-  const [resetCounter, setResetCounter] = useState24(0);
+  const [bulkChanges, setBulkChanges] = useState22([]);
+  const [isBulkChangesDialogOpen, setIsBulkChangesDialogOpen] = useState22(false);
+  const [isExportCsvDialogOpen, setIsExportCsvDialogOpen] = useState22(false);
+  const [resetCounter, setResetCounter] = useState22(0);
   const visibleEditableColumns = useMemo6(
     () => headCells.filter(
       (headCell) => headCell?.enabled && !!headCell?.editableCellType
@@ -9015,17 +8788,13 @@ var TableDesktopToolbar = ({
       refetchData?.();
     }
   };
-  const handleUpdateEditableCell = ({
-    columnId,
-    value,
-    label
-  }) => {
+  const handleUpdateEditableCell = (_rowId, field, value, label) => {
     setBulkChanges((prev) => {
-      return [...prev, { field: columnId, value, label }];
+      return [...prev, { field, value, label }];
     });
   };
-  return /* @__PURE__ */ jsxs91(
-    Box42,
+  return /* @__PURE__ */ jsxs90(
+    Box41,
     {
       sx: {
         borderBottom: "1px solid",
@@ -9033,8 +8802,8 @@ var TableDesktopToolbar = ({
         maxWidth: "100%"
       },
       children: [
-        /* @__PURE__ */ jsxs91(
-          Box42,
+        /* @__PURE__ */ jsxs90(
+          Box41,
           {
             sx: {
               py: 1,
@@ -9045,8 +8814,8 @@ var TableDesktopToolbar = ({
               background: isBulkChangesMode ? colors.neutral150 : void 0
             },
             children: [
-              /* @__PURE__ */ jsxs91(
-                Box42,
+              /* @__PURE__ */ jsxs90(
+                Box41,
                 {
                   sx: {
                     py: 1,
@@ -9056,20 +8825,20 @@ var TableDesktopToolbar = ({
                     whiteSpace: "nowrap"
                   },
                   children: [
-                    toolbarLabel ? /* @__PURE__ */ jsxs91(Fragment16, { children: [
-                      /* @__PURE__ */ jsx134(Typography35, { variant: "subtitle2", color: "textSecondary", children: toolbarLabel }),
-                      /* @__PURE__ */ jsx134(Divider11, { orientation: "vertical", sx: { height: 0.75, py: 2.5 } })
+                    toolbarLabel ? /* @__PURE__ */ jsxs90(Fragment16, { children: [
+                      /* @__PURE__ */ jsx132(Typography34, { variant: "subtitle2", color: "textSecondary", children: toolbarLabel }),
+                      /* @__PURE__ */ jsx132(Divider11, { orientation: "vertical", sx: { height: 0.75, py: 2.5 } })
                     ] }) : null,
-                    renderBulkChangesDialog && refetchData ? /* @__PURE__ */ jsx134(
-                      Tooltip11,
+                    renderBulkChangesDialog && refetchData ? /* @__PURE__ */ jsx132(
+                      Tooltip12,
                       {
                         title: disableBulkChangesMode ? "Access denied, you don\u2019t have permission to use this feature." : "",
-                        children: /* @__PURE__ */ jsx134(
+                        children: /* @__PURE__ */ jsx132(
                           FormControlLabel6,
                           {
                             label: "Bulk Changes Mode",
                             disabled: disableBulkChangesMode || !visibleEditableColumns.length,
-                            control: /* @__PURE__ */ jsx134(
+                            control: /* @__PURE__ */ jsx132(
                               Switch2,
                               {
                                 size: "small",
@@ -9084,17 +8853,17 @@ var TableDesktopToolbar = ({
                   ]
                 }
               ),
-              isScrollable && /* @__PURE__ */ jsx134(
+              isScrollable && /* @__PURE__ */ jsx132(
                 IconButton6,
                 {
                   "aria-label": "scroll-left",
                   sx: { padding: 0, alignSelf: "center" },
                   onClick: () => scroll("left"),
-                  children: /* @__PURE__ */ jsx134(KeyboardArrowLeft2, {})
+                  children: /* @__PURE__ */ jsx132(KeyboardArrowLeft2, {})
                 }
               ),
-              /* @__PURE__ */ jsx134(
-                Box42,
+              /* @__PURE__ */ jsx132(
+                Box41,
                 {
                   ref: scrollRef,
                   sx: {
@@ -9110,39 +8879,55 @@ var TableDesktopToolbar = ({
                       display: "none"
                     }
                   },
-                  children: isBulkChangesMode ? visibleEditableColumns.map((headCell) => {
-                    const { id, width, editableCellType } = headCell;
-                    return editableCellType && /* @__PURE__ */ jsx134(
-                      Box42,
+                  children: isBulkChangesMode ? visibleEditableColumns.map(
+                    ({
+                      id,
+                      fieldName,
+                      label,
+                      editableCellType,
+                      filterOptions,
+                      refetchFilterOptions,
+                      isFetchingFilterOptions,
+                      validateInput,
+                      width
+                    }) => editableCellType && /* @__PURE__ */ jsx132(
+                      Box41,
                       {
                         sx: { width, flex: "0 0 auto" },
-                        children: /* @__PURE__ */ jsx134(
+                        children: /* @__PURE__ */ jsx132(
                           TableDesktopEditableField,
                           {
-                            headCell,
+                            field: id,
                             size: "small",
                             variant: "outlined",
                             showCheckboxLabel: true,
+                            fieldName: fieldName ?? "",
+                            inputLabel: label ?? "",
+                            editableCellType,
+                            filterOptions,
+                            refetchFilterOptions,
+                            isFetchingFilterOptions,
+                            validateInput,
                             onUpdateEditableCell: handleUpdateEditableCell
                           }
                         )
                       },
                       `${id}-${resetCounter}`
-                    );
-                  }) : null
+                    )
+                  ) : null
                 }
               ),
-              isScrollable && /* @__PURE__ */ jsx134(
+              isScrollable && /* @__PURE__ */ jsx132(
                 IconButton6,
                 {
                   "aria-label": "scroll-right",
                   sx: { p: 0, alignSelf: "center" },
                   onClick: () => scroll("right"),
-                  children: /* @__PURE__ */ jsx134(KeyboardArrowRight2, {})
+                  children: /* @__PURE__ */ jsx132(KeyboardArrowRight2, {})
                 }
               ),
-              isBulkChangesMode ? /* @__PURE__ */ jsxs91(Fragment16, { children: [
-                /* @__PURE__ */ jsx134(
+              isBulkChangesMode ? /* @__PURE__ */ jsxs90(Fragment16, { children: [
+                /* @__PURE__ */ jsx132(
                   Button19,
                   {
                     variant: "outlined",
@@ -9155,7 +8940,7 @@ var TableDesktopToolbar = ({
                     children: "RESET"
                   }
                 ),
-                /* @__PURE__ */ jsx134(
+                /* @__PURE__ */ jsx132(
                   Button19,
                   {
                     variant: "contained",
@@ -9166,26 +8951,26 @@ var TableDesktopToolbar = ({
                     children: "APPLY"
                   }
                 )
-              ] }) : /* @__PURE__ */ jsxs91(Box42, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              ] }) : /* @__PURE__ */ jsxs90(Box41, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
                 renderInfoIcons,
-                renderExportCsvDialog ? /* @__PURE__ */ jsx134(Tooltip11, { title: "Download Customer List", children: /* @__PURE__ */ jsx134("span", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx134(
+                renderExportCsvDialog ? /* @__PURE__ */ jsx132(Tooltip12, { title: "Download Customer List", children: /* @__PURE__ */ jsx132("span", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx132(
                   IconButton6,
                   {
                     disableRipple: true,
                     disabled: isDataEmpty,
                     "aria-label": "export-csv-button",
                     onClick: () => setIsExportCsvDialogOpen(true),
-                    children: /* @__PURE__ */ jsx134(Download, { fill: colors.neutral750 })
+                    children: /* @__PURE__ */ jsx132(Download, { fill: colors.neutral750 })
                   }
                 ) }) }) : null,
-                renderTableColumnConfigurationMenu ? /* @__PURE__ */ jsx134(Tooltip11, { title: "Table Column Configuration", children: /* @__PURE__ */ jsx134(
+                renderTableColumnConfigurationMenu ? /* @__PURE__ */ jsx132(Tooltip12, { title: "Table Column Configuration", children: /* @__PURE__ */ jsx132(
                   IconButton6,
                   {
                     disableRipple: true,
                     "aria-label": "table-column-config-button",
                     ref: tableToolbarMenuButtonRef,
                     onClick: onClickToolbarMenuOpen,
-                    children: /* @__PURE__ */ jsx134(IconTableEdit_default, { fill: colors.neutral750 })
+                    children: /* @__PURE__ */ jsx132(IconTableEdit_default, { fill: colors.neutral750 })
                   }
                 ) }) : null
               ] })
@@ -9218,11 +9003,11 @@ var TableDesktopToolbar = ({
 };
 
 // src/components/TableHeader/TableHeader.tsx
-import { memo as memo22, useEffect as useEffect15, useState as useState25 } from "react";
+import { memo as memo24, useEffect as useEffect15, useState as useState23 } from "react";
 import { ImportExport as ImportExportIcon } from "@mui/icons-material";
 import { TableCell as TableCell7, TableHead as TableHead3, TableRow as TableRow6, TableSortLabel as TableSortLabel3 } from "@mui/material";
 import { makeStyles as makeStyles47 } from "tss-react/mui";
-import { jsx as jsx135 } from "react/jsx-runtime";
+import { jsx as jsx133 } from "react/jsx-runtime";
 var useStyles47 = makeStyles47()(() => ({
   sortLabel: {
     "& .MuiTableSortLabel-icon": {
@@ -9231,7 +9016,7 @@ var useStyles47 = makeStyles47()(() => ({
   }
 }));
 var TableHeader = ({ cells, onSort = null }) => {
-  const [sortableCells, setSortableCells] = useState25([]);
+  const [sortableCells, setSortableCells] = useState23([]);
   const { classes } = useStyles47();
   useEffect15(() => {
     setSortableCells(cells);
@@ -9267,7 +9052,7 @@ var TableHeader = ({ cells, onSort = null }) => {
     });
     setSortableCells(sortedCells);
   };
-  return /* @__PURE__ */ jsx135(TableHead3, { children: /* @__PURE__ */ jsx135(TableRow6, { children: sortableCells.map((cell, key) => /* @__PURE__ */ jsx135(TableCell7, { children: cell.isSortable ? /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsx133(TableHead3, { children: /* @__PURE__ */ jsx133(TableRow6, { children: sortableCells.map((cell, key) => /* @__PURE__ */ jsx133(TableCell7, { children: cell.isSortable ? /* @__PURE__ */ jsx133(
     TableSortLabel3,
     {
       className: classes.sortLabel,
@@ -9278,12 +9063,12 @@ var TableHeader = ({ cells, onSort = null }) => {
     }
   ) : cell.label }, cell.label || key)) }) });
 };
-var TableHeader_default = memo22(TableHeader);
+var TableHeader_default = memo24(TableHeader);
 
 // src/components/TextDivider/TextDivider.tsx
-import { Box as Box43, Typography as Typography36, Divider as Divider12, Button as Button20 } from "@mui/material";
+import { Box as Box42, Typography as Typography35, Divider as Divider12, Button as Button20 } from "@mui/material";
 import { makeStyles as makeStyles48 } from "tss-react/mui";
-import { jsx as jsx136, jsxs as jsxs92 } from "react/jsx-runtime";
+import { jsx as jsx134, jsxs as jsxs91 } from "react/jsx-runtime";
 var useStyles48 = makeStyles48()(() => ({
   icon: {
     fontSize: 20
@@ -9320,19 +9105,19 @@ var TextDivider = ({
 }) => {
   const { classes } = useStyles48();
   const iconColor = color ?? colors.neutral900;
-  return /* @__PURE__ */ jsxs92(
-    Box43,
+  return /* @__PURE__ */ jsxs91(
+    Box42,
     {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       className: classes.container,
       children: [
-        /* @__PURE__ */ jsx136(Divider12, { className: classes.leftDivider }),
-        /* @__PURE__ */ jsx136(Button20, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ jsxs92(Box43, { className: classes.center, children: [
-          Icon2 && iconPosition === "left" && /* @__PURE__ */ jsx136(Icon2, { className: classes.icon, style: { color: iconColor } }),
-          /* @__PURE__ */ jsx136(
-            Typography36,
+        /* @__PURE__ */ jsx134(Divider12, { className: classes.leftDivider }),
+        /* @__PURE__ */ jsx134(Button20, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ jsxs91(Box42, { className: classes.center, children: [
+          Icon2 && iconPosition === "left" && /* @__PURE__ */ jsx134(Icon2, { className: classes.icon, style: { color: iconColor } }),
+          /* @__PURE__ */ jsx134(
+            Typography35,
             {
               color: "textSecondary",
               className: classes.title,
@@ -9340,9 +9125,9 @@ var TextDivider = ({
               children: title
             }
           ),
-          Icon2 && iconPosition === "right" && /* @__PURE__ */ jsx136(Icon2, { className: classes.icon, style: { color: iconColor } })
+          Icon2 && iconPosition === "right" && /* @__PURE__ */ jsx134(Icon2, { className: classes.icon, style: { color: iconColor } })
         ] }) }),
-        /* @__PURE__ */ jsx136(Divider12, { className: classes.rightDivider })
+        /* @__PURE__ */ jsx134(Divider12, { className: classes.rightDivider })
       ]
     }
   );
@@ -9354,7 +9139,7 @@ import { DateRangePicker } from "react-dates";
 import { makeStyles as makeStyles49 } from "tss-react/mui";
 import "react-dates/initialize";
 import "react-dates/lib/css/_datepicker.css";
-import { jsx as jsx137 } from "react/jsx-runtime";
+import { jsx as jsx135 } from "react/jsx-runtime";
 var useStyles49 = makeStyles49()((theme) => ({
   wrapper: {
     "& .DateRangePicker": {
@@ -9450,15 +9235,15 @@ var ThemedDateRangePicker = ({
   ...props
 }) => {
   const { classes, cx } = useStyles49();
-  return /* @__PURE__ */ jsx137("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ jsx137(DateRangePicker, { ...props }) });
+  return /* @__PURE__ */ jsx135("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ jsx135(DateRangePicker, { ...props }) });
 };
 var ThemedDateRangePicker_default = ThemedDateRangePicker;
 
 // src/components/TheToolbar/TheToolbar.tsx
-import { memo as memo23 } from "react";
-import { AppBar, Box as Box44, Toolbar } from "@mui/material";
+import { memo as memo25 } from "react";
+import { AppBar, Box as Box43, Toolbar } from "@mui/material";
 import { makeStyles as makeStyles50 } from "tss-react/mui";
-import { jsx as jsx138, jsxs as jsxs93 } from "react/jsx-runtime";
+import { jsx as jsx136, jsxs as jsxs92 } from "react/jsx-runtime";
 var useStyles50 = makeStyles50()((theme) => ({
   menuButton: {
     color: theme.palette.primary.contrastText
@@ -9478,9 +9263,9 @@ var TheToolbar = ({
   rightSection
 }) => {
   const { classes } = useStyles50();
-  return /* @__PURE__ */ jsxs93(Box44, { children: [
-    /* @__PURE__ */ jsx138(AppBar, { children: /* @__PURE__ */ jsxs93(Toolbar, { className: classes.topBar, children: [
-      /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsxs92(Box43, { children: [
+    /* @__PURE__ */ jsx136(AppBar, { children: /* @__PURE__ */ jsxs92(Toolbar, { className: classes.topBar, children: [
+      /* @__PURE__ */ jsx136(
         RoundButton_default,
         {
           className: classes.menuButton,
@@ -9489,7 +9274,7 @@ var TheToolbar = ({
           onClick: handleOpen
         }
       ),
-      /* @__PURE__ */ jsx138(
+      /* @__PURE__ */ jsx136(
         CompanyLogo_default,
         {
           size: "small",
@@ -9498,30 +9283,30 @@ var TheToolbar = ({
           imageLogoLightSmall
         }
       ),
-      /* @__PURE__ */ jsx138(Box44, { ml: 2, children: leftSection }),
-      /* @__PURE__ */ jsx138(Box44, { ml: "auto", children: rightSection })
+      /* @__PURE__ */ jsx136(Box43, { ml: 2, children: leftSection }),
+      /* @__PURE__ */ jsx136(Box43, { ml: "auto", children: rightSection })
     ] }) }),
     LeftDrawer
   ] });
 };
-var TheToolbar_default = memo23(TheToolbar);
+var TheToolbar_default = memo25(TheToolbar);
 
 // src/components/ToastMessage/ToastMessage.tsx
 import { Alert as MuiAlert, Snackbar } from "@mui/material";
-import { jsx as jsx139 } from "react/jsx-runtime";
+import { jsx as jsx137 } from "react/jsx-runtime";
 var ToastMessage = ({
   toastType,
   toastMessage,
   open,
   onClose
-}) => /* @__PURE__ */ jsx139(
+}) => /* @__PURE__ */ jsx137(
   Snackbar,
   {
     open,
     autoHideDuration: 1500,
     onClose,
     anchorOrigin: { vertical: "top", horizontal: "right" },
-    children: /* @__PURE__ */ jsx139(
+    children: /* @__PURE__ */ jsx137(
       MuiAlert,
       {
         elevation: 6,
@@ -9549,16 +9334,16 @@ var ToastMessage_default = ToastMessage;
 
 // src/components/TwoButtonDialog/TwoButtonDialog.tsx
 import {
-  Typography as Typography37,
+  Typography as Typography36,
   Dialog as Dialog5,
   Backdrop,
-  Box as Box45,
+  Box as Box44,
   Divider as Divider13,
   Paper as Paper13,
   Fade as Fade2
 } from "@mui/material";
 import { makeStyles as makeStyles51 } from "tss-react/mui";
-import { jsx as jsx140, jsxs as jsxs94 } from "react/jsx-runtime";
+import { jsx as jsx138, jsxs as jsxs93 } from "react/jsx-runtime";
 var useStyles51 = makeStyles51()((theme) => ({
   paper: {
     padding: theme.spacing(2)
@@ -9588,7 +9373,7 @@ var TwoButtonDialog = ({
   cancelButton
 }) => {
   const { classes } = useStyles51();
-  return /* @__PURE__ */ jsx140(
+  return /* @__PURE__ */ jsx138(
     Dialog5,
     {
       open,
@@ -9598,10 +9383,10 @@ var TwoButtonDialog = ({
       closeAfterTransition: true,
       BackdropComponent: Backdrop,
       BackdropProps: { timeout: 500 },
-      children: /* @__PURE__ */ jsx140(Fade2, { in: open, children: /* @__PURE__ */ jsxs94(Paper13, { className: classes.paper, children: [
-        /* @__PURE__ */ jsxs94(Box45, { className: classes.mb, children: [
-          /* @__PURE__ */ jsx140(Typography37, { variant: "h5", component: "div", children: /* @__PURE__ */ jsx140(
-            Box45,
+      children: /* @__PURE__ */ jsx138(Fade2, { in: open, children: /* @__PURE__ */ jsxs93(Paper13, { className: classes.paper, children: [
+        /* @__PURE__ */ jsxs93(Box44, { className: classes.mb, children: [
+          /* @__PURE__ */ jsx138(Typography36, { variant: "h5", component: "div", children: /* @__PURE__ */ jsx138(
+            Box44,
             {
               sx: {
                 fontWeight: 600
@@ -9609,23 +9394,23 @@ var TwoButtonDialog = ({
               children: title
             }
           ) }),
-          /* @__PURE__ */ jsxs94(
-            Box45,
+          /* @__PURE__ */ jsxs93(
+            Box44,
             {
               className: classes.mt,
               sx: {
                 fontWeight: 600
               },
               children: [
-                subtitle1 && /* @__PURE__ */ jsx140(Typography37, { variant: "subtitle1", children: subtitle1 }),
-                subtitle2 && /* @__PURE__ */ jsx140(Typography37, { variant: "subtitle1", children: subtitle2 })
+                subtitle1 && /* @__PURE__ */ jsx138(Typography36, { variant: "subtitle1", children: subtitle1 }),
+                subtitle2 && /* @__PURE__ */ jsx138(Typography36, { variant: "subtitle1", children: subtitle2 })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx140(Divider13, {}),
-        /* @__PURE__ */ jsxs94(Box45, { className: classes.buttonContainer, children: [
-          /* @__PURE__ */ jsx140(
+        /* @__PURE__ */ jsx138(Divider13, {}),
+        /* @__PURE__ */ jsxs93(Box44, { className: classes.buttonContainer, children: [
+          /* @__PURE__ */ jsx138(
             FilledButton_default,
             {
               copy: cancelLabel,
@@ -9638,7 +9423,7 @@ var TwoButtonDialog = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx140(
+          /* @__PURE__ */ jsx138(
             FilledButton_default,
             {
               color: "primary",
@@ -9647,7 +9432,7 @@ var TwoButtonDialog = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx140(Loading_default, { isLoading: dialogLoading })
+        /* @__PURE__ */ jsx138(Loading_default, { isLoading: dialogLoading })
       ] }) })
     }
   );
@@ -9655,11 +9440,11 @@ var TwoButtonDialog = ({
 var TwoButtonDialog_default = TwoButtonDialog;
 
 // src/components/UserBust/UserBust.tsx
-import { memo as memo24 } from "react";
-import { Avatar as Avatar2, Typography as Typography38 } from "@mui/material";
-import { jsx as jsx141, jsxs as jsxs95 } from "react/jsx-runtime";
-var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ jsxs95("div", { children: [
-  /* @__PURE__ */ jsx141(
+import { memo as memo26 } from "react";
+import { Avatar as Avatar2, Typography as Typography37 } from "@mui/material";
+import { jsx as jsx139, jsxs as jsxs94 } from "react/jsx-runtime";
+var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ jsxs94("div", { children: [
+  /* @__PURE__ */ jsx139(
     Avatar2,
     {
       src: user.profile_picture,
@@ -9667,18 +9452,18 @@ var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ jsxs9
       style: { width: avatarProps.width, height: avatarProps.height }
     }
   ),
-  /* @__PURE__ */ jsxs95("div", { style: { paddingTop: 16 }, children: [
-    /* @__PURE__ */ jsx141(Typography38, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
-    /* @__PURE__ */ jsx141(Typography38, { ...typographyProps.username, children: user.username })
+  /* @__PURE__ */ jsxs94("div", { style: { paddingTop: 16 }, children: [
+    /* @__PURE__ */ jsx139(Typography37, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
+    /* @__PURE__ */ jsx139(Typography37, { ...typographyProps.username, children: user.username })
   ] })
 ] });
-var UserBust_default = memo24(UserBust);
+var UserBust_default = memo26(UserBust);
 
 // src/components/icons/IconChart.tsx
-import { jsx as jsx142 } from "react/jsx-runtime";
+import { jsx as jsx140 } from "react/jsx-runtime";
 var SvgIconChart = (props) => {
   const { fill } = props;
-  return /* @__PURE__ */ jsx142(
+  return /* @__PURE__ */ jsx140(
     "svg",
     {
       width: "20",
@@ -9687,7 +9472,7 @@ var SvgIconChart = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ jsx142(
+      children: /* @__PURE__ */ jsx140(
         "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",
@@ -9765,7 +9550,6 @@ export {
   SearchWithFilters_default as SearchWithFilters,
   SearchWithFiltersForTable_default as SearchWithFiltersForTable,
   SectionName_default as SectionName,
-  SmartMultipleSelect,
   SmartSelect_default as SmartSelect,
   SmartTableHeader,
   SmartTableHeaderFilterMenu,