@natoora-libs/core 0.2.8 → 0.2.9-dev-doug-1

package/dist/components/index.js

@@ -7090,7 +7090,8 @@ var SmartMultipleSelect = ({
   isLoading,
   disabled,
   emptyMessage = "No options.",
-  helperText
+  helperText,
+  menuProps
 }) => {
   const [localValues, setLocalValues] = useState15(defaultValues ?? []);
   const handleChangeOption = (option) => {
@@ -7135,7 +7136,7 @@ var SmartMultipleSelect = ({
       option.value ?? index
     );
   }) });
-  return /* @__PURE__ */ jsxs78(FormControl4, { fullWidth: true, variant, children: [
+  return /* @__PURE__ */ jsxs78(FormControl4, { fullWidth: true, size, variant, disabled, children: [
     /* @__PURE__ */ jsx114(InputLabel4, { children: inputLabel }),
     /* @__PURE__ */ jsx114(
       Select3,
@@ -7145,6 +7146,7 @@ var SmartMultipleSelect = ({
         disabled,
         value: values ?? localValues,
         defaultValue: defaultValues,
+        MenuProps: menuProps,
         onOpen,
         onClose: () => onClose?.(localValues),
         renderValue: (selectedValues) => {
@@ -7169,8 +7171,9 @@ var SmartMultipleSelect = ({
 };
 
 // src/components/SmartSelect/SmartSelect.tsx
-import { forwardRef as forwardRef2, useState as useState16, useEffect as useEffect10 } from "react";
+import { forwardRef as forwardRef2, useMemo as useMemo3 } from "react";
 import {
+  Box as Box36,
   CircularProgress as CircularProgress5,
   FormControl as FormControl5,
   FormHelperText as FormHelperText4,
@@ -7178,19 +7181,12 @@ import {
   MenuItem as MenuItem3,
   Select as Select4
 } from "@mui/material";
-import { makeStyles as makeStyles43 } from "tss-react/mui";
 import { jsx as jsx115, jsxs as jsxs79 } from "react/jsx-runtime";
-var useStyles43 = makeStyles43()(() => ({
-  container: {
-    display: "flex",
-    flexDirection: "column"
-  }
-}));
 var SmartSelect = forwardRef2(
   ({
     value,
     defaultOption,
-    options,
+    options = [],
     refetch,
     isFetching = false,
     onChange,
@@ -7205,54 +7201,80 @@ var SmartSelect = forwardRef2(
     emptyMessage = "No options",
     menuProps
   }, ref) => {
-    const { classes } = useStyles43();
-    const [open, setOpen] = useState16(false);
-    const [localOptions, setLocalOptions] = useState16(options || []);
-    useEffect10(() => {
-      if (options) {
-        setLocalOptions(options);
+    const visibleOptions = useMemo3(() => {
+      const baseOptions = [
+        ...allowBlankOption ? [{ value: "", label: "None" }] : [],
+        ...options ?? []
+      ];
+      const isSelectedInOptions = baseOptions.some((o) => o.value === value);
+      if (value && !isSelectedInOptions && defaultOption?.value === value) {
+        return [...baseOptions, defaultOption];
       }
-    }, [options]);
+      return baseOptions;
+    }, [options, value, defaultOption]);
     const handleOpen = () => {
-      setOpen(true);
-      if (!localOptions.length) {
+      if (!options?.length) {
         refetch?.();
       }
     };
-    const handleClose = () => setOpen(false);
-    const defaultOptionValueIsValid = defaultOption?.value !== void 0;
-    const defaultOptionLabelIsValid = defaultOption?.label !== void 0;
-    let combinedOptions = [];
-    if (localOptions.length > 0) {
-      combinedOptions = localOptions.filter(
-        (option) => option.value !== void 0 && option.label !== void 0
-      );
-      if (allowBlankOption) {
-        combinedOptions.unshift({
-          value: "",
-          label: "None"
-        });
-      }
-    } else if (defaultOption !== null && defaultOptionValueIsValid && defaultOptionLabelIsValid) {
-      combinedOptions = [defaultOption];
-    } else {
-      combinedOptions = [];
-    }
     const handleChange = (event) => {
       const selectedId = event.target.value;
-      const selectedOption = combinedOptions.find(
-        (option) => option?.value === selectedId
+      const selectedOption = visibleOptions.find(
+        (option) => option.value === selectedId
       );
       if (selectedOption) {
         onChange(selectedOption);
       }
     };
+    const renderMenuContent = () => {
+      if (isFetching) {
+        return [
+          /* @__PURE__ */ jsx115(
+            Box36,
+            {
+              "data-testid": "select-loading",
+              sx: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                p: 2
+              },
+              children: /* @__PURE__ */ jsx115(CircularProgress5, { size: 24 })
+            },
+            "select-loading"
+          ),
+          // Hidden default item to satisfy MUI validation
+          defaultOption ? /* @__PURE__ */ jsx115(
+            MenuItem3,
+            {
+              "data-testid": "hidden-default-item",
+              value: defaultOption?.value,
+              sx: { display: "none" },
+              children: defaultOption?.label
+            },
+            "hidden-default-item"
+          ) : null
+        ];
+      }
+      if (!visibleOptions.length) {
+        return /* @__PURE__ */ jsx115(MenuItem3, { disabled: true, "data-testid": `${dataTestId}-empty-message`, children: emptyMessage });
+      }
+      return visibleOptions.map((option) => /* @__PURE__ */ jsx115(
+        MenuItem3,
+        {
+          value: option.value,
+          "data-testid": `${dataTestId}-option-${option?.value}`,
+          disabled: option.disabled,
+          children: option.label
+        },
+        option.value
+      ));
+    };
     return /* @__PURE__ */ jsxs79(
       FormControl5,
       {
         fullWidth: true,
         size,
-        className: classes.container,
         error,
         variant,
         "data-testid": dataTestId,
@@ -7266,53 +7288,19 @@ var SmartSelect = forwardRef2(
               children: inputLabel
             }
           ),
-          /* @__PURE__ */ jsxs79(
+          /* @__PURE__ */ jsx115(
             Select4,
             {
               ref,
-              size,
-              disabled,
               labelId: "smart-select-label",
+              id: `${dataTestId}-select`,
+              "data-testid": `${dataTestId}-select`,
               value: value ?? "",
               onChange: handleChange,
               onOpen: handleOpen,
-              error,
-              onClose: handleClose,
-              open,
-              "data-testid": `${dataTestId}-select`,
-              id: `${dataTestId}-select`,
-              MenuProps: menuProps,
               label: inputLabel,
-              children: [
-                isFetching && /* @__PURE__ */ jsx115(
-                  MenuItem3,
-                  {
-                    disabled: true,
-                    "data-testid": `${dataTestId}-loading`,
-                    id: `${dataTestId}-loading`,
-                    children: /* @__PURE__ */ jsx115(CircularProgress5, { 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(
-                  MenuItem3,
-                  {
-                    value: defaultOption?.value,
-                    "data-testid": `${dataTestId}-default-option`,
-                    children: defaultOption?.label
-                  }
-                ),
-                !isFetching && combinedOptions.length > 0 && combinedOptions.map((option) => /* @__PURE__ */ jsx115(
-                  MenuItem3,
-                  {
-                    value: option?.value,
-                    "data-testid": `${dataTestId}-option-${option?.value}`,
-                    disabled: option?.disabled,
-                    children: option?.label
-                  },
-                  option?.value
-                ))
-              ]
+              MenuProps: menuProps,
+              children: renderMenuContent()
             }
           ),
           helperText && /* @__PURE__ */ jsx115(FormHelperText4, { "data-testid": `${dataTestId}-helper-text`, children: helperText })
@@ -7321,15 +7309,14 @@ var SmartSelect = forwardRef2(
     );
   }
 );
-var SmartSelect_default = SmartSelect;
 
 // src/components/SquareLabel/SquareLabel.tsx
 import { memo as memo19 } from "react";
 import { Typography as Typography29 } from "@mui/material";
 import { red as red2 } from "@mui/material/colors";
-import { makeStyles as makeStyles44 } from "tss-react/mui";
+import { makeStyles as makeStyles43 } from "tss-react/mui";
 import { jsx as jsx116 } from "react/jsx-runtime";
-var useStyles44 = makeStyles44()((theme) => ({
+var useStyles43 = makeStyles43()((theme) => ({
   red: {
     backgroundColor: red2["50"],
     color: red2["500"],
@@ -7342,7 +7329,7 @@ var useStyles44 = makeStyles44()((theme) => ({
   }
 }));
 var SquareLabel = ({ color, copy }) => {
-  const { classes } = useStyles44();
+  const { classes } = useStyles43();
   return /* @__PURE__ */ jsx116(Typography29, { className: classes[color], children: copy });
 };
 var SquareLabel_default = memo19(SquareLabel);
@@ -7404,7 +7391,7 @@ 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 { useState as useState16, useEffect as useEffect10 } 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";
@@ -7425,11 +7412,11 @@ var SmartTableHeaderFilterMenu = ({
   shouldShowCheckOnFilter,
   onApplyFilters
 }) => {
-  const [anchorEl, setAnchorEl] = useState17(null);
-  const [filterOptionsData, setFilterOptionsData] = useState17();
-  const [selectedFilterOptions, setSelectedFilterOptions] = useState17(headerFilters[headCell.id] ?? []);
+  const [anchorEl, setAnchorEl] = useState16(null);
+  const [filterOptionsData, setFilterOptionsData] = useState16();
+  const [selectedFilterOptions, setSelectedFilterOptions] = useState16(headerFilters[headCell.id] ?? []);
   const numFilterOptions = filterOptionsData?.length ?? 0;
-  useEffect11(() => {
+  useEffect10(() => {
     if (headCell.filterOptions) {
       setFilterOptionsData(headCell.filterOptions);
     } else if (headCell.filterType === "boolean") {
@@ -7485,7 +7472,7 @@ var SmartTableHeaderFilterMenu = ({
     onApplyFilters?.(updatedFilters, shouldSave);
     setAnchorEl(null);
   };
-  useEffect11(() => {
+  useEffect10(() => {
     setSelectedFilterOptions(headerFilters[headCell.id] ?? []);
   }, [headerFilters, headCell.id]);
   return /* @__PURE__ */ jsxs81(Fragment13, { children: [
@@ -7548,7 +7535,7 @@ var SmartTableHeaderFilterMenu = ({
 // src/components/SmartTableHeader/SmartTableHeader.tsx
 import { memo as memo21 } from "react";
 import {
-  Box as Box36,
+  Box as Box37,
   Checkbox as Checkbox7,
   TableCell,
   TableHead,
@@ -7619,7 +7606,7 @@ var SmartTableHeader = memo21(
             }
           },
           children: /* @__PURE__ */ jsxs82(
-            Box36,
+            Box37,
             {
               display: "flex",
               flexDirection: "row",
@@ -7676,9 +7663,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 Box39,
   Paper as Paper11,
   Table as MUITable,
   TableBody,
@@ -7688,16 +7675,16 @@ import {
   TableRow as TableRow2,
   TableSortLabel as TableSortLabel2
 } from "@mui/material";
-import { makeStyles as makeStyles45 } from "tss-react/mui";
+import { makeStyles as makeStyles44 } 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 { Box as Box38, Skeleton as Skeleton4 } from "@mui/material";
 import { jsx as jsx120 } from "react/jsx-runtime";
 var TableLoading = ({
   rowsPerPage,
   rowHeight
-}) => /* @__PURE__ */ jsx120(Box37, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ jsx120(
+}) => /* @__PURE__ */ jsx120(Box38, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ jsx120(
   Skeleton4,
   {
     animation: "pulse",
@@ -7747,7 +7734,7 @@ function calculateRowsPerPage(rowHeight) {
 
 // src/components/Table/Table.tsx
 import { jsx as jsx121, jsxs as jsxs83 } from "react/jsx-runtime";
-var useStyles45 = makeStyles45()(() => ({
+var useStyles44 = makeStyles44()(() => ({
   root: {
     height: "calc(100vh - 262px)",
     overflow: "scroll"
@@ -7781,12 +7768,12 @@ 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 { classes } = useStyles45();
+  const [rowsPerPage, setRowsPerPage] = useState17(defaultRowsPerPage);
+  const { classes } = useStyles44();
   const rowHeight = 56;
   const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
   const handleRequestSort = (event, property) => {
@@ -7835,7 +7822,7 @@ var Table = ({
     }
     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: [
+  return /* @__PURE__ */ jsx121(Paper11, { className: classes.root, children: /* @__PURE__ */ jsx121(Box39, { 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(
       TableCell2,
       {
@@ -7863,12 +7850,12 @@ var Table_default = Table;
 
 // src/components/TableDesktop/TableDesktop.tsx
 import {
-  useMemo as useMemo3,
-  useState as useState19,
-  useEffect as useEffect12,
+  useMemo as useMemo4,
+  useState as useState18,
+  useEffect as useEffect11,
   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 Box41 } from "@mui/material";
 
 // src/components/TableDesktopLoadingState/TableDesktopLoadingState.tsx
 import { Skeleton as Skeleton5, TableCell as TableCell3, TableRow as TableRow3 } from "@mui/material";
@@ -8041,7 +8028,7 @@ var TableDesktopRows = ({
 };
 
 // src/components/TableDesktopRowSelectionBar/TableDesktopRowSelectionBar.tsx
-import { Box as Box39, Button as Button17, Typography as Typography32 } from "@mui/material";
+import { Box as Box40, Button as Button17, Typography as Typography32 } from "@mui/material";
 import { jsx as jsx125, jsxs as jsxs86 } from "react/jsx-runtime";
 var TableDesktopRowSelectionBar = ({
   isEveryRowInPageSelected,
@@ -8062,7 +8049,7 @@ var TableDesktopRowSelectionBar = ({
     return `${numSelectedRows} row${numSelectedRows > 1 ? "s" : ""} selected.`;
   };
   return isAnyRowSelected ? /* @__PURE__ */ jsxs86(
-    Box39,
+    Box40,
     {
       sx: {
         p: 1,
@@ -8088,9 +8075,9 @@ var TableDesktopRowSelectionBar = ({
 
 // src/components/TableEmptyResult/TableEmptyResult.tsx
 import { TableCell as TableCell5, TableRow as TableRow5, Typography as Typography33 } from "@mui/material";
-import { makeStyles as makeStyles46 } from "tss-react/mui";
+import { makeStyles as makeStyles45 } from "tss-react/mui";
 import { jsx as jsx126, jsxs as jsxs87 } from "react/jsx-runtime";
-var useStyles46 = makeStyles46()(() => ({
+var useStyles45 = makeStyles45()(() => ({
   tableCellIcon: { padding: 24, height: "calc(100vh - 320px)" },
   tableCellDefault: { padding: 24 }
 }));
@@ -8100,7 +8087,7 @@ var TableEmptyResult = ({
   handleClickOnClearFiltersButton = () => {
   }
 }) => {
-  const { classes } = useStyles46();
+  const { classes } = useStyles45();
   return showClearFilterButton ? /* @__PURE__ */ jsx126(TableRow5, { children: /* @__PURE__ */ jsxs87(
     TableCell5,
     {
@@ -8163,23 +8150,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]
   );
@@ -8242,7 +8229,7 @@ var TableDesktop = ({
       resetSelectedRows();
     }
   };
-  useEffect12(() => {
+  useEffect11(() => {
     if (isRowsFromAllPagesSelected) {
       selectAllRowsInPage();
       selectAllRowsInPage();
@@ -8289,7 +8276,7 @@ var TableDesktop = ({
     );
   };
   return /* @__PURE__ */ jsx127(
-    Box40,
+    Box41,
     {
       sx: {
         height,
@@ -8394,14 +8381,14 @@ var TableDesktop = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopEditableField.tsx
-import { useEffect as useEffect13, useState as useState22 } from "react";
+import { useEffect as useEffect12, useState as useState21 } 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 { useMemo as useMemo5 } from "react";
 import { jsx as jsx128 } from "react/jsx-runtime";
 var TableDesktopSmartMultipleSelect = ({
   initialValue,
@@ -8417,7 +8404,7 @@ var TableDesktopSmartMultipleSelect = ({
   isFetchingFilterOptions,
   onUpdateEditableCell
 }) => {
-  const defaultValues = useMemo4(() => {
+  const defaultValues = useMemo5(() => {
     return initialValue.map((val) => ({
       value: val.id,
       label: val[fieldName].toString()
@@ -8432,6 +8419,7 @@ var TableDesktopSmartMultipleSelect = ({
       disabled,
       defaultValues,
       menuOptions: filterOptions,
+      menuProps: { disableRestoreFocus: true },
       isLoading: isFetchingFilterOptions,
       onOpen: () => {
         if (!filterOptions?.length) {
@@ -8452,7 +8440,7 @@ var TableDesktopSmartMultipleSelect = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopSmartSelect.tsx
-import { useState as useState20 } from "react";
+import { useState as useState19 } from "react";
 import { jsx as jsx129 } from "react/jsx-runtime";
 var TableDesktopSmartSelect = ({
   ref,
@@ -8470,13 +8458,13 @@ var TableDesktopSmartSelect = ({
   isFetchingFilterOptions,
   onUpdateEditableCell
 }) => {
-  const [value, setValue] = useState20(
+  const [value, setValue] = useState19(
     initialValue
   );
   const valueId = resolveObjectType(value ?? "", "id");
   const valueLabel = resolveObjectType(value ?? "", fieldName);
   return /* @__PURE__ */ jsx129(
-    SmartSelect_default,
+    SmartSelect,
     {
       ref,
       value: valueId,
@@ -8486,6 +8474,7 @@ var TableDesktopSmartSelect = ({
       disabled,
       variant,
       size,
+      menuProps: { disableRestoreFocus: true },
       refetch: refetchFilterOptions,
       isFetching: isFetchingFilterOptions,
       defaultOption: {
@@ -8506,7 +8495,7 @@ var TableDesktopSmartSelect = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopTextField.tsx
-import { useMemo as useMemo5, useState as useState21, useRef as useRef8 } from "react";
+import { useMemo as useMemo6, useState as useState20, useRef as useRef8 } from "react";
 import { TextField as TextField8 } from "@mui/material";
 import { jsx as jsx130 } from "react/jsx-runtime";
 var TableDesktopTextField = ({
@@ -8521,13 +8510,13 @@ var TableDesktopTextField = ({
   validateInput,
   onUpdateEditableCell
 }) => {
-  const [input, setInput] = useState21(initialValue);
+  const [input, setInput] = useState20(initialValue);
   const oldValue = useRef8(initialValue);
-  const isDirty = useMemo5(
+  const isDirty = useMemo6(
     () => input !== oldValue.current,
     [input, oldValue.current]
   );
-  const hasValidationError = useMemo5(
+  const hasValidationError = useMemo6(
     () => isDirty && validateInput && !validateInput(input),
     [input, validateInput]
   );
@@ -8599,8 +8588,8 @@ var TableDesktopEditableField = ({
     allowBlankSelectOption
   }
 }) => {
-  const [parsedFilterOptions, setParsedFilterOptions] = useState22();
-  useEffect13(() => {
+  const [parsedFilterOptions, setParsedFilterOptions] = useState21();
+  useEffect12(() => {
     if (filterOptions && editableCellType === "select" || editableCellType === "multipleSelect") {
       const parsedOptions = filterOptions?.map(
         (option) => ({
@@ -8765,7 +8754,7 @@ var TableDesktopEditableField = ({
 // src/components/TableDesktopFooter/TableDesktopFooter.tsx
 import Refresh3 from "@mui/icons-material/Refresh";
 import {
-  Box as Box41,
+  Box as Box42,
   Button as Button18,
   MenuItem as MenuItem4,
   Pagination as Pagination2,
@@ -8785,7 +8774,7 @@ var TableDesktopFooter = ({
   isFetching
 }) => {
   return /* @__PURE__ */ jsxs89(
-    Box41,
+    Box42,
     {
       sx: {
         py: 1,
@@ -8803,6 +8792,7 @@ var TableDesktopFooter = ({
             variant: "text",
             onClick: () => refetchData(),
             disabled: isFetching,
+            "aria-label": "refresh-button",
             sx: {
               ml: 1,
               gap: 1
@@ -8811,14 +8801,14 @@ var TableDesktopFooter = ({
               Refresh3,
               {
                 fontSize: "small",
-                color: isFetching ? "disabled" : "info"
+                color: isFetching ? "disabled" : "action"
               }
             )
           }
         ) : null,
-        /* @__PURE__ */ jsxs89(Box41, { sx: { display: "flex", ml: "auto", py: 1 }, children: [
+        /* @__PURE__ */ jsxs89(Box42, { 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(Typography34, { fontSize: 12, children: "Rows per page:" }),
             /* @__PURE__ */ jsx132(
               Select5,
               {
@@ -8846,7 +8836,7 @@ var TableDesktopFooter = ({
 };
 
 // src/components/TableDesktopCell/TableDesktopCell.tsx
-import { useEffect as useEffect14, useState as useState23 } from "react";
+import { useEffect as useEffect13, useState as useState22 } from "react";
 import CheckIcon3 from "@mui/icons-material/Check";
 import CloseIcon from "@mui/icons-material/Close";
 import EditIcon from "@mui/icons-material/Edit";
@@ -8876,10 +8866,10 @@ var TableDesktopCell = ({
   onCellClick,
   headCell
 }) => {
-  const [isCellHovered, setIsCellHovered] = useState23(false);
-  const [isCellInEditMode, setIsCellInEditMode] = useState23(false);
+  const [isCellHovered, setIsCellHovered] = useState22(false);
+  const [isCellInEditMode, setIsCellInEditMode] = useState22(false);
   const { width, editableCellType } = headCell;
-  useEffect14(() => {
+  useEffect13(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         setIsCellInEditMode(false);
@@ -8948,15 +8938,15 @@ var TableDesktopCell = ({
 
 // src/components/TableDesktopToolbar/TableDesktopToolbar.tsx
 import {
-  useState as useState24,
-  useMemo as useMemo6,
+  useState as useState23,
+  useMemo as useMemo7,
   useRef as useRef9
 } from "react";
 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 Box43,
   Button as Button19,
   Divider as Divider11,
   FormControlLabel as FormControlLabel6,
@@ -8988,11 +8978,11 @@ 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 visibleEditableColumns = useMemo6(
+  const [bulkChanges, setBulkChanges] = useState23([]);
+  const [isBulkChangesDialogOpen, setIsBulkChangesDialogOpen] = useState23(false);
+  const [isExportCsvDialogOpen, setIsExportCsvDialogOpen] = useState23(false);
+  const [resetCounter, setResetCounter] = useState23(0);
+  const visibleEditableColumns = useMemo7(
     () => headCells.filter(
       (headCell) => headCell?.enabled && !!headCell?.editableCellType
     ),
@@ -9019,7 +9009,7 @@ var TableDesktopToolbar = ({
     });
   };
   return /* @__PURE__ */ jsxs91(
-    Box42,
+    Box43,
     {
       sx: {
         borderBottom: "1px solid",
@@ -9028,7 +9018,7 @@ var TableDesktopToolbar = ({
       },
       children: [
         /* @__PURE__ */ jsxs91(
-          Box42,
+          Box43,
           {
             sx: {
               py: 1,
@@ -9040,7 +9030,7 @@ var TableDesktopToolbar = ({
             },
             children: [
               /* @__PURE__ */ jsxs91(
-                Box42,
+                Box43,
                 {
                   sx: {
                     py: 1,
@@ -9088,7 +9078,7 @@ var TableDesktopToolbar = ({
                 }
               ),
               /* @__PURE__ */ jsx134(
-                Box42,
+                Box43,
                 {
                   ref: scrollRef,
                   sx: {
@@ -9107,7 +9097,7 @@ var TableDesktopToolbar = ({
                   children: isBulkChangesMode ? visibleEditableColumns.map((headCell) => {
                     const { id, width, editableCellType } = headCell;
                     return editableCellType && /* @__PURE__ */ jsx134(
-                      Box42,
+                      Box43,
                       {
                         sx: { width, flex: "0 0 auto" },
                         children: /* @__PURE__ */ jsx134(
@@ -9160,7 +9150,7 @@ var TableDesktopToolbar = ({
                     children: "APPLY"
                   }
                 )
-              ] }) : /* @__PURE__ */ jsxs91(Box42, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              ] }) : /* @__PURE__ */ jsxs91(Box43, { 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(
                   IconButton6,
@@ -9212,12 +9202,12 @@ var TableDesktopToolbar = ({
 };
 
 // src/components/TableHeader/TableHeader.tsx
-import { memo as memo22, useEffect as useEffect15, useState as useState25 } from "react";
+import { memo as memo22, useEffect as useEffect14, useState as useState24 } 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 { makeStyles as makeStyles46 } from "tss-react/mui";
 import { jsx as jsx135 } from "react/jsx-runtime";
-var useStyles47 = makeStyles47()(() => ({
+var useStyles46 = makeStyles46()(() => ({
   sortLabel: {
     "& .MuiTableSortLabel-icon": {
       opacity: 1
@@ -9225,9 +9215,9 @@ var useStyles47 = makeStyles47()(() => ({
   }
 }));
 var TableHeader = ({ cells, onSort = null }) => {
-  const [sortableCells, setSortableCells] = useState25([]);
-  const { classes } = useStyles47();
-  useEffect15(() => {
+  const [sortableCells, setSortableCells] = useState24([]);
+  const { classes } = useStyles46();
+  useEffect14(() => {
     setSortableCells(cells);
   }, []);
   const getNewSortDirection = (direction) => {
@@ -9275,10 +9265,10 @@ var TableHeader = ({ cells, onSort = null }) => {
 var TableHeader_default = memo22(TableHeader);
 
 // src/components/TextDivider/TextDivider.tsx
-import { Box as Box43, Typography as Typography36, Divider as Divider12, Button as Button20 } from "@mui/material";
-import { makeStyles as makeStyles48 } from "tss-react/mui";
+import { Box as Box44, Typography as Typography36, Divider as Divider12, Button as Button20 } from "@mui/material";
+import { makeStyles as makeStyles47 } from "tss-react/mui";
 import { jsx as jsx136, jsxs as jsxs92 } from "react/jsx-runtime";
-var useStyles48 = makeStyles48()(() => ({
+var useStyles47 = makeStyles47()(() => ({
   icon: {
     fontSize: 20
   },
@@ -9312,10 +9302,10 @@ var TextDivider = ({
   iconPosition = "left",
   titleWeight = "400"
 }) => {
-  const { classes } = useStyles48();
+  const { classes } = useStyles47();
   const iconColor = color ?? colors.neutral900;
   return /* @__PURE__ */ jsxs92(
-    Box43,
+    Box44,
     {
       display: "flex",
       alignItems: "center",
@@ -9323,7 +9313,7 @@ var TextDivider = ({
       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: [
+        /* @__PURE__ */ jsx136(Button20, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ jsxs92(Box44, { className: classes.center, children: [
           Icon2 && iconPosition === "left" && /* @__PURE__ */ jsx136(Icon2, { className: classes.icon, style: { color: iconColor } }),
           /* @__PURE__ */ jsx136(
             Typography36,
@@ -9345,11 +9335,11 @@ var TextDivider_default = TextDivider;
 
 // src/components/ThemedDateRangePicker/ThemedDateRangePicker.tsx
 import { DateRangePicker } from "react-dates";
-import { makeStyles as makeStyles49 } from "tss-react/mui";
+import { makeStyles as makeStyles48 } from "tss-react/mui";
 import "react-dates/initialize";
 import "react-dates/lib/css/_datepicker.css";
 import { jsx as jsx137 } from "react/jsx-runtime";
-var useStyles49 = makeStyles49()((theme) => ({
+var useStyles48 = makeStyles48()((theme) => ({
   wrapper: {
     "& .DateRangePicker": {
       backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : colors.neutral100,
@@ -9443,17 +9433,17 @@ var ThemedDateRangePicker = ({
   className,
   ...props
 }) => {
-  const { classes, cx } = useStyles49();
+  const { classes, cx } = useStyles48();
   return /* @__PURE__ */ jsx137("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ jsx137(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 { makeStyles as makeStyles50 } from "tss-react/mui";
+import { AppBar, Box as Box45, Toolbar } from "@mui/material";
+import { makeStyles as makeStyles49 } from "tss-react/mui";
 import { jsx as jsx138, jsxs as jsxs93 } from "react/jsx-runtime";
-var useStyles50 = makeStyles50()((theme) => ({
+var useStyles49 = makeStyles49()((theme) => ({
   menuButton: {
     color: theme.palette.primary.contrastText
   },
@@ -9471,8 +9461,8 @@ var TheToolbar = ({
   leftSection,
   rightSection
 }) => {
-  const { classes } = useStyles50();
-  return /* @__PURE__ */ jsxs93(Box44, { children: [
+  const { classes } = useStyles49();
+  return /* @__PURE__ */ jsxs93(Box45, { children: [
     /* @__PURE__ */ jsx138(AppBar, { children: /* @__PURE__ */ jsxs93(Toolbar, { className: classes.topBar, children: [
       /* @__PURE__ */ jsx138(
         RoundButton_default,
@@ -9492,8 +9482,8 @@ var TheToolbar = ({
           imageLogoLightSmall
         }
       ),
-      /* @__PURE__ */ jsx138(Box44, { ml: 2, children: leftSection }),
-      /* @__PURE__ */ jsx138(Box44, { ml: "auto", children: rightSection })
+      /* @__PURE__ */ jsx138(Box45, { ml: 2, children: leftSection }),
+      /* @__PURE__ */ jsx138(Box45, { ml: "auto", children: rightSection })
     ] }) }),
     LeftDrawer
   ] });
@@ -9546,14 +9536,14 @@ import {
   Typography as Typography37,
   Dialog as Dialog5,
   Backdrop,
-  Box as Box45,
+  Box as Box46,
   Divider as Divider13,
   Paper as Paper13,
   Fade as Fade2
 } from "@mui/material";
-import { makeStyles as makeStyles51 } from "tss-react/mui";
+import { makeStyles as makeStyles50 } from "tss-react/mui";
 import { jsx as jsx140, jsxs as jsxs94 } from "react/jsx-runtime";
-var useStyles51 = makeStyles51()((theme) => ({
+var useStyles50 = makeStyles50()((theme) => ({
   paper: {
     padding: theme.spacing(2)
   },
@@ -9581,7 +9571,7 @@ var TwoButtonDialog = ({
   cancelLabel = "CANCEL",
   cancelButton
 }) => {
-  const { classes } = useStyles51();
+  const { classes } = useStyles50();
   return /* @__PURE__ */ jsx140(
     Dialog5,
     {
@@ -9593,9 +9583,9 @@ var TwoButtonDialog = ({
       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__ */ jsxs94(Box46, { className: classes.mb, children: [
           /* @__PURE__ */ jsx140(Typography37, { variant: "h5", component: "div", children: /* @__PURE__ */ jsx140(
-            Box45,
+            Box46,
             {
               sx: {
                 fontWeight: 600
@@ -9604,7 +9594,7 @@ var TwoButtonDialog = ({
             }
           ) }),
           /* @__PURE__ */ jsxs94(
-            Box45,
+            Box46,
             {
               className: classes.mt,
               sx: {
@@ -9618,7 +9608,7 @@ var TwoButtonDialog = ({
           )
         ] }),
         /* @__PURE__ */ jsx140(Divider13, {}),
-        /* @__PURE__ */ jsxs94(Box45, { className: classes.buttonContainer, children: [
+        /* @__PURE__ */ jsxs94(Box46, { className: classes.buttonContainer, children: [
           /* @__PURE__ */ jsx140(
             FilledButton_default,
             {
@@ -9760,7 +9750,7 @@ export {
   SearchWithFiltersForTable_default as SearchWithFiltersForTable,
   SectionName_default as SectionName,
   SmartMultipleSelect,
-  SmartSelect_default as SmartSelect,
+  SmartSelect,
   SmartTableHeader,
   SmartTableHeaderFilterMenu,
   SquareButton_default as SquareButton,