material-react-table 1.13.1 → 1.15.0

package/dist/esm/material-react-table.esm.js

@@ -65,7 +65,9 @@ import Table from '@mui/material/Table';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import TableCell from '@mui/material/TableCell';
-import { Stack, Slider, FormHelperText } from '@mui/material';
+import Slider from '@mui/material/Slider';
+import Stack from '@mui/material/Stack';
+import FormHelperText from '@mui/material/FormHelperText';
 import Badge from '@mui/material/Badge';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import TableBody from '@mui/material/TableBody';
@@ -75,7 +77,6 @@ import TableFooter from '@mui/material/TableFooter';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
-import Stack$1 from '@mui/material/Stack';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -99,6 +100,10 @@ function __rest(s, e) {
   }
   return t;
 }
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 const MRT_AggregationFns = Object.assign({}, aggregationFns);
 
@@ -784,6 +789,7 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
     const { column } = header;
     const { columnDef } = column;
     const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
+    const columnFilterValue = column.getFilterValue();
     const [filterMenuAnchorEl, setFilterMenuAnchorEl] = useState(null);
     const handleClearSort = () => {
         column.clearSorting();
@@ -839,46 +845,63 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
         !isSelectFilter &&
         (allowedColumnFilterOptions === undefined ||
             !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
-    return (jsxs(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
-            dense: density === 'compact',
-        }, children: [(_d = (_c = (_b = columnDef.renderColumnActionsMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
-                closeMenu: () => setAnchorEl(null),
-                column,
-                table,
-            })) !== null && _c !== void 0 ? _c : renderColumnActionsMenuItems === null || renderColumnActionsMenuItems === void 0 ? void 0 : renderColumnActionsMenuItems({
-                closeMenu: () => setAnchorEl(null),
-                column,
-                table,
-            })) !== null && _d !== void 0 ? _d : (enableSorting &&
-                column.getCanSort() &&
-                [
-                    enableSortingRemoval !== false && (jsx(MenuItem, { disabled: !column.getIsSorted(), onClick: handleClearSort, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(ClearAllIcon, {}) }), localization.clearSort] }) }, 0)),
-                    jsx(MenuItem, { disabled: column.getIsSorted() === 'asc', onClick: handleSortAsc, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } }) }), (_e = localization.sortByColumnAsc) === null || _e === void 0 ? void 0 : _e.replace('{column}', String(columnDef.header))] }) }, 1),
-                    jsx(MenuItem, { divider: enableColumnFilters || enableGrouping || enableHiding, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(SortIcon, {}) }), (_f = localization.sortByColumnDesc) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header))] }) }, 2),
-                ].filter(Boolean)), enableColumnFilters &&
-                column.getCanFilter() &&
-                [
-                    jsx(MenuItem, { disabled: !column.getFilterValue(), onClick: handleClearFilter, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(FilterListOffIcon, {}) }), localization.clearFilter] }) }, 0),
-                    jsxs(MenuItem, { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, onClick: showColumnFilters
-                            ? handleOpenFilterModeMenu
-                            : handleFilterByColumn, sx: commonMenuItemStyles, children: [jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(FilterListIcon, {}) }), (_g = localization.filterByColumn) === null || _g === void 0 ? void 0 : _g.replace('{column}', String(columnDef.header))] }), showFilterModeSubMenu && (jsx(IconButton, { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 }, children: jsx(ArrowRightIcon, {}) }))] }, 1),
-                    showFilterModeSubMenu && (jsx(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table }, 2)),
-                ].filter(Boolean), enableGrouping &&
-                column.getCanGroup() && [
-                jsx(MenuItem, { divider: enablePinning, onClick: handleGroupByColumn, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(DynamicFeedIcon, {}) }), (_h = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _h === void 0 ? void 0 : _h.replace('{column}', String(columnDef.header))] }) }, 0),
-            ], enablePinning &&
-                column.getCanPin() && [
-                jsx(MenuItem, { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(PushPinIcon, { style: { transform: 'rotate(90deg)' } }) }), localization.pinToLeft] }) }, 0),
-                jsx(MenuItem, { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(PushPinIcon, { style: { transform: 'rotate(-90deg)' } }) }), localization.pinToRight] }) }, 1),
-                jsx(MenuItem, { disabled: !column.getIsPinned(), divider: enableHiding, onClick: () => handlePinColumn(false), sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(PushPinIcon, {}) }), localization.unpin] }) }, 2),
-            ], enableColumnResizing &&
-                column.getCanResize() && [
-                jsx(MenuItem, { disabled: !columnSizing[column.id], onClick: handleResetColumnSize, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(RestartAltIcon, {}) }), localization.resetColumnSize] }) }, 0),
-            ], enableHiding && [
-                jsx(MenuItem, { disabled: !column.getCanHide(), onClick: handleHideColumn, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(VisibilityOffIcon, {}) }), (_j = localization.hideColumn) === null || _j === void 0 ? void 0 : _j.replace('{column}', String(columnDef.header))] }) }, 0),
+    const internalColumnMenuItems = [
+        ...(enableSorting && column.getCanSort()
+            ? [
+                enableSortingRemoval !== false && (jsx(MenuItem, { disabled: !column.getIsSorted(), onClick: handleClearSort, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(ClearAllIcon, {}) }), localization.clearSort] }) }, 0)),
+                jsx(MenuItem, { disabled: column.getIsSorted() === 'asc', onClick: handleSortAsc, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } }) }), (_b = localization.sortByColumnAsc) === null || _b === void 0 ? void 0 : _b.replace('{column}', String(columnDef.header))] }) }, 1),
+                jsx(MenuItem, { divider: enableColumnFilters || enableGrouping || enableHiding, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(SortIcon, {}) }), (_c = localization.sortByColumnDesc) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header))] }) }, 2),
+            ]
+            : []),
+        ...(enableColumnFilters && column.getCanFilter()
+            ? [
+                jsx(MenuItem, { disabled: !columnFilterValue ||
+                        (Array.isArray(columnFilterValue) &&
+                            !columnFilterValue.filter((value) => value).length), onClick: handleClearFilter, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(FilterListOffIcon, {}) }), localization.clearFilter] }) }, 3),
+                jsxs(MenuItem, { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, onClick: showColumnFilters
+                        ? handleOpenFilterModeMenu
+                        : handleFilterByColumn, sx: commonMenuItemStyles, children: [jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(FilterListIcon, {}) }), (_d = localization.filterByColumn) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header))] }), showFilterModeSubMenu && (jsx(IconButton, { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 }, children: jsx(ArrowRightIcon, {}) }))] }, 4),
+                showFilterModeSubMenu && (jsx(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table }, 5)),
+            ]
+            : []),
+        ...(enableGrouping && column.getCanGroup()
+            ? [
+                jsx(MenuItem, { divider: enablePinning, onClick: handleGroupByColumn, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(DynamicFeedIcon, {}) }), (_e = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _e === void 0 ? void 0 : _e.replace('{column}', String(columnDef.header))] }) }, 6),
+            ]
+            : []),
+        ...(enablePinning && column.getCanPin()
+            ? [
+                jsx(MenuItem, { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(PushPinIcon, { style: { transform: 'rotate(90deg)' } }) }), localization.pinToLeft] }) }, 7),
+                jsx(MenuItem, { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(PushPinIcon, { style: { transform: 'rotate(-90deg)' } }) }), localization.pinToRight] }) }, 8),
+                jsx(MenuItem, { disabled: !column.getIsPinned(), divider: enableHiding, onClick: () => handlePinColumn(false), sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(PushPinIcon, {}) }), localization.unpin] }) }, 9),
+            ]
+            : []),
+        ...(enableColumnResizing && column.getCanResize()
+            ? [
+                jsx(MenuItem, { disabled: !columnSizing[column.id], onClick: handleResetColumnSize, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(RestartAltIcon, {}) }), localization.resetColumnSize] }) }, 10),
+            ]
+            : []),
+        ...(enableHiding
+            ? [
+                jsx(MenuItem, { disabled: !column.getCanHide(), onClick: handleHideColumn, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(VisibilityOffIcon, {}) }), (_f = localization.hideColumn) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header))] }) }, 11),
                 jsx(MenuItem, { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
-                        .length, onClick: handleShowAllColumns, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(ViewColumnIcon, {}) }), (_k = localization.showAllColumns) === null || _k === void 0 ? void 0 : _k.replace('{column}', String(columnDef.header))] }) }, 1),
-            ]] }));
+                        .length, onClick: handleShowAllColumns, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(ViewColumnIcon, {}) }), (_g = localization.showAllColumns) === null || _g === void 0 ? void 0 : _g.replace('{column}', String(columnDef.header))] }) }, 12),
+            ]
+            : []),
+    ].filter(Boolean);
+    return (jsx(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
+            dense: density === 'compact',
+        }, children: (_k = (_j = (_h = columnDef.renderColumnActionsMenuItems) === null || _h === void 0 ? void 0 : _h.call(columnDef, {
+            closeMenu: () => setAnchorEl(null),
+            column,
+            internalColumnMenuItems,
+            table,
+        })) !== null && _j !== void 0 ? _j : renderColumnActionsMenuItems === null || renderColumnActionsMenuItems === void 0 ? void 0 : renderColumnActionsMenuItems({
+            closeMenu: () => setAnchorEl(null),
+            column,
+            internalColumnMenuItems,
+            table,
+        })) !== null && _k !== void 0 ? _k : internalColumnMenuItems }));
 };
 
 const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) => {
@@ -1653,6 +1676,8 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                     ? textFieldProps.sx(theme)
                     : textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx))), children: [(isSelectFilter || isMultiSelectFilter) && (jsx(MenuItem, { divider: true, disabled: true, hidden: true, value: "", children: jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder }) })), (_k = textFieldProps.children) !== null && _k !== void 0 ? _k : filterSelectOptions === null || filterSelectOptions === void 0 ? void 0 : filterSelectOptions.map((option) => {
                         var _a;
+                        if (!option)
+                            return '';
                         let value;
                         let text;
                         if (typeof option !== 'object') {
@@ -1735,16 +1760,16 @@ const MRT_FilterRangeSlider = ({ header, table }) => {
     const sliderProps = Object.assign(Object.assign({}, mTableHeadCellFilterTextFieldProps), mcTableHeadCellFilterTextFieldProps);
     let [min, max] = sliderProps.min !== undefined && sliderProps.max !== undefined
         ? [sliderProps.min, sliderProps.max]
-        : (_a = column.getFacetedMinMaxValues()) !== null && _a !== void 0 ? _a : [0, 0];
-    // column.getFacetedMinMaxValues() seems to return an array of arrays for the min value
-    // under some conditions, so check for that and take the first array value if that happens.
-    // To be a bit defensive, implement the same check for max, just in case.
-    if (Array.isArray(min)) {
+        : (_a = column.getFacetedMinMaxValues()) !== null && _a !== void 0 ? _a : [0, 1];
+    //fix potential TanStack Table bugs where min or max is an array
+    if (Array.isArray(min))
         min = min[0];
-    }
-    if (Array.isArray(max)) {
+    if (Array.isArray(max))
         max = max[0];
-    }
+    if (min === null)
+        min = 0;
+    if (max === null)
+        max = 1;
     const [filterValues, setFilterValues] = useState([min, max]);
     const columnFilterValue = column.getFilterValue();
     const isMounted = useRef(false);
@@ -1754,20 +1779,23 @@ const MRT_FilterRangeSlider = ({ header, table }) => {
                 setFilterValues([min, max]);
             }
             else if (Array.isArray(columnFilterValue)) {
-                if (columnFilterValue[0] <= min && columnFilterValue[1] >= max) {
-                    column.setFilterValue(undefined);
-                }
-                else {
-                    setFilterValues(columnFilterValue);
-                }
+                setFilterValues(columnFilterValue);
             }
         }
         isMounted.current = true;
-    }, [column.getFilterValue()]);
-    return (jsxs(Stack, { children: [jsx(Slider, Object.assign({ disableSwap: true, min: min, max: max, onChange: (_event, value) => {
-                    setFilterValues(value);
+    }, [columnFilterValue, min, max]);
+    return (jsxs(Stack, { children: [jsx(Slider, Object.assign({ disableSwap: true, min: min, max: max, onChange: (_event, values) => {
+                    setFilterValues(values);
                 }, onChangeCommitted: (_event, value) => {
-                    column.setFilterValue(value);
+                    if (Array.isArray(value)) {
+                        if (value[0] <= min && value[1] >= max) {
+                            //if the user has selected the entire range, remove the filter
+                            column.setFilterValue(undefined);
+                        }
+                        else {
+                            column.setFilterValue(value);
+                        }
+                    }
                 }, value: filterValues, valueLabelDisplay: "auto" }, sliderProps, { slotProps: {
                     input: {
                         ref: (node) => {
@@ -1805,18 +1833,18 @@ const MRT_TableHeadCellFilterContainer = ({ header, table }) => {
 };
 
 const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const { options: { icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowColumnFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
-    const isRangeFilter = columnDef.filterVariant === 'range' ||
+    const isRangeFilter = ['range', 'ranger-slider'].includes((_a = columnDef.filterVariant) !== null && _a !== void 0 ? _a : '') ||
         ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
     const currentFilterOption = columnDef._filterFn;
     const filterTooltip = localization.filteringByColumn
         .replace('{column}', String(columnDef.header))
         .replace('{filterType}', 
     // @ts-ignore
-    localization[`filter${((_a = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _a === void 0 ? void 0 : _a.toUpperCase()) +
+    localization[`filter${((_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) +
         (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`])
         .replace('{filterValue}', `"${Array.isArray(column.getFilterValue())
         ? column.getFilterValue().join(`" ${isRangeFilter ? localization.and : localization.or} "`)
@@ -1824,7 +1852,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
         .replace('" "', '');
     return (jsx(Grow, { unmountOnExit: true, in: (!!column.getFilterValue() && !isRangeFilter) ||
             (isRangeFilter && // @ts-ignore
-                (!!((_b = column.getFilterValue()) === null || _b === void 0 ? void 0 : _b[0]) || !!((_c = column.getFilterValue()) === null || _c === void 0 ? void 0 : _c[1]))), children: jsx(Box, { component: "span", sx: { flex: '0 0' }, children: jsx(Tooltip, { arrow: true, placement: "top", title: filterTooltip, children: jsx(IconButton, { disableRipple: true, onClick: (event) => {
+                (!!((_c = column.getFilterValue()) === null || _c === void 0 ? void 0 : _c[0]) || !!((_d = column.getFilterValue()) === null || _d === void 0 ? void 0 : _d[1]))), children: jsx(Box, { component: "span", sx: { flex: '0 0' }, children: jsx(Tooltip, { arrow: true, placement: "top", title: filterTooltip, children: jsx(IconButton, { disableRipple: true, onClick: (event) => {
                         setShowColumnFilters(true);
                         queueMicrotask(() => {
                             var _a, _b;
@@ -2414,7 +2442,7 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
             table,
             theme,
             tableCellProps,
-        })), draggingBorders)), children: jsxs(Fragment, { children: [cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) : isLoading || showSkeletons ? (jsx(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
+        })), draggingBorders)), children: jsxs(Fragment, { children: [cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) : (isLoading || showSkeletons) && cell.getValue() === null ? (jsx(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
                     rowNumberMode === 'static' &&
                     column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (jsx(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
                     (column.id === 'mrt-row-select' ||
@@ -2828,7 +2856,7 @@ const MRT_TablePaper = ({ table }) => {
 
 const MRT_EditRowModal = ({ open, row, table, }) => {
     const { options: { localization }, } = table;
-    return (jsxs(Dialog, { open: open, children: [jsx(DialogTitle, { textAlign: "center", children: localization.edit }), jsx(DialogContent, { children: jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsx(Stack$1, { sx: {
+    return (jsxs(Dialog, { open: open, children: [jsx(DialogTitle, { textAlign: "center", children: localization.edit }), jsx(DialogContent, { children: jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsx(Stack, { sx: {
                             gap: '1.5rem',
                             minWidth: { xs: '300px', sm: '360px', md: '400px' },
                             pt: '1rem',