material-react-table 2.0.0-beta.2 → 2.0.0-beta.4

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -1,14 +1,17 @@
 import Badge from '@mui/material/Badge';
 import { type TableCellProps } from '@mui/material/TableCell';
-import TableSortLabel from '@mui/material/TableSortLabel';
+import TableSortLabel, {
+  type TableSortLabelProps,
+} from '@mui/material/TableSortLabel';
 import Tooltip from '@mui/material/Tooltip';
+import { parseFromValuesOrFunc } from '../column.utils';
 import {
   type MRT_Header,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TableSortLabelProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
   tableCellProps?: TableCellProps;
@@ -17,6 +20,7 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -27,17 +31,20 @@ export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
   } = table;
   const { column } = header;
   const { columnDef } = column;
-  const { sorting } = getState();
+  const { isLoading, showSkeletons, sorting } = getState();
 
   const isSorted = !!column.getIsSorted();
 
-  const sortTooltip = column.getIsSorted()
-    ? column.getIsSorted() === 'desc'
-      ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
-      : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
-    : column.getNextSortingOrder() === 'desc'
-    ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
-    : localization.sortByColumnAsc.replace('{column}', columnDef.header);
+  const sortTooltip =
+    isLoading || showSkeletons
+      ? ''
+      : column.getIsSorted()
+      ? column.getIsSorted() === 'desc'
+        ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
+        : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
+      : column.getNextSortingOrder() === 'desc'
+      ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
+      : localization.sortByColumnAsc.replace('{column}', columnDef.header);
 
   return (
     <Tooltip arrow placement="top" title={sortTooltip}>
@@ -65,12 +72,21 @@ export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
             e.stopPropagation();
             header.column.getToggleSortingHandler()?.(e);
           }}
-          sx={{
+          {...rest}
+          sx={(theme) => ({
+            '.MuiTableSortLabel-icon': {
+              color: `${
+                theme.palette.mode === 'dark'
+                  ? theme.palette.text.primary
+                  : theme.palette.text.secondary
+              } !important`,
+            },
             flex: '0 0',
             opacity: isSorted ? 1 : 0.3,
             transition: 'all 150ms ease-in-out',
             width: '3ch',
-          }}
+            ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+          })}
         />
       </Badge>
     </Tooltip>

package/src/head/MRT_TableHeadRow.tsx

@@ -1,5 +1,5 @@
 import { type VirtualItem } from '@tanstack/react-virtual';
-import TableRow from '@mui/material/TableRow';
+import TableRow, { type TableRowProps } from '@mui/material/TableRow';
 import { alpha, lighten } from '@mui/material/styles';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
 import { parseFromValuesOrFunc } from '../column.utils';
@@ -10,7 +10,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TableRowProps {
   headerGroup: MRT_HeaderGroup<TData>;
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
@@ -24,15 +24,19 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
+  ...rest
 }: Props<TData>) => {
   const {
     options: { layoutMode, muiTableHeadRowProps },
   } = table;
 
-  const tableRowProps = parseFromValuesOrFunc(muiTableHeadRowProps, {
-    headerGroup,
-    table,
-  });
+  const tableRowProps = {
+    ...parseFromValuesOrFunc(muiTableHeadRowProps, {
+      headerGroup,
+      table,
+    }),
+    rest,
+  };
 
   return (
     <TableRow

package/src/hooks/useMRT_DisplayColumns.tsx

@@ -16,6 +16,7 @@ import {
 } from '../types';
 
 const blankColProps = {
+  children: null,
   sx: {
     flex: '1 0 auto',
     minWidth: 0,
@@ -139,7 +140,7 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>({
           ) && {
             columnDefType: 'display',
             header: '',
-            id: 'spacer',
+            id: 'mrt-row-spacer',
             muiTableBodyCellProps: blankColProps,
             muiTableFooterCellProps: blankColProps,
             muiTableHeadCellProps: blankColProps,

package/src/inputs/MRT_EditCellTextField.tsx

@@ -14,7 +14,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TextFieldProps<'standard'> {
   cell: MRT_Cell<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -22,6 +22,7 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_EditCellTextField = <TData extends MRT_RowData>({
   cell,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -54,6 +55,7 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
       row,
       table,
     }),
+    ...rest,
   };
 
   const saveInputValueToRowCache = (newValue: string) => {
@@ -104,7 +106,7 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
         }
       }}
       label={
-        !['custom', 'modal'].includes(
+        ['custom', 'modal'].includes(
           (isCreating ? createDisplayMode : editDisplayMode) as string,
         )
           ? columnDef.header
@@ -120,15 +122,27 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
           : undefined
       }
       select={isSelectEdit}
+      size="small"
       value={value}
       variant="standard"
       {...textFieldProps}
       InputProps={{
         disableUnderline: editDisplayMode === 'table',
         ...textFieldProps.InputProps,
+        sx: (theme) => ({
+          mb: 0,
+          ...(parseFromValuesOrFunc(
+            textFieldProps?.InputProps?.sx,
+            theme,
+          ) as any),
+        }),
       }}
       inputProps={{
         autoComplete: 'new-password', // disable autocomplete and autofill
+        sx: {
+          p: 0,
+          ...textFieldProps?.inputProps?.sx,
+        },
         ...textFieldProps.inputProps,
       }}
       onBlur={handleBlur}

package/src/inputs/MRT_FilterCheckbox.tsx

@@ -1,4 +1,4 @@
-import Checkbox from '@mui/material/Checkbox';
+import Checkbox, { type CheckboxProps } from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
@@ -8,7 +8,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends CheckboxProps {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -16,6 +16,7 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_FilterCheckbox = <TData extends MRT_RowData>({
   column,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -33,6 +34,7 @@ export const MRT_FilterCheckbox = <TData extends MRT_RowData>({
       column,
       table,
     }),
+    ...rest,
   };
 
   const filterLabel = localization.filterByColumn?.replace(

package/src/inputs/MRT_FilterRangeFields.tsx

@@ -1,12 +1,13 @@
-import Box from '@mui/material/Box';
+import Box, { type BoxProps } from '@mui/material/Box';
 import { MRT_FilterTextField } from './MRT_FilterTextField';
+import { parseFromValuesOrFunc } from '../column.utils';
 import {
   type MRT_Header,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends BoxProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -14,9 +15,18 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_FilterRangeFields = <TData extends MRT_RowData>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   return (
-    <Box sx={{ display: 'grid', gap: '1rem', gridTemplateColumns: '1fr 1fr' }}>
+    <Box
+      {...rest}
+      sx={(theme) => ({
+        display: 'grid',
+        gap: '1rem',
+        gridTemplateColumns: '1fr 1fr',
+        ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+      })}
+    >
       <MRT_FilterTextField header={header} rangeFilterIndex={0} table={table} />
       <MRT_FilterTextField header={header} rangeFilterIndex={1} table={table} />
     </Box>

package/src/inputs/MRT_FilterRangeSlider.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import FormHelperText from '@mui/material/FormHelperText';
-import Slider from '@mui/material/Slider';
+import Slider, { type SliderProps } from '@mui/material/Slider';
 import Stack from '@mui/material/Stack';
 import { parseFromValuesOrFunc } from '../column.utils';
 import {
@@ -9,7 +9,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends SliderProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -17,6 +17,7 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: { enableColumnFilterModes, localization, muiFilterSliderProps },
@@ -33,6 +34,7 @@ export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
   const sliderProps = {
     ...parseFromValuesOrFunc(muiFilterSliderProps, { column, table }),
     ...parseFromValuesOrFunc(columnDef.muiFilterSliderProps, { column, table }),
+    ...rest,
   };
 
   let [min, max] =

package/src/inputs/MRT_FilterTextField.tsx

@@ -29,7 +29,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TextFieldProps<'standard'> {
   header: MRT_Header<TData>;
   rangeFilterIndex?: number;
   table: MRT_TableInstance<TData>;
@@ -39,6 +39,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
   header,
   rangeFilterIndex,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: {
@@ -64,6 +65,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       column,
       table,
     }),
+    ...rest,
   };
 
   const autocompleteProps = {

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -9,19 +9,20 @@ import {
 import Collapse from '@mui/material/Collapse';
 import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
-import TextField from '@mui/material/TextField';
+import TextField, { type TextFieldProps } from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
 import { debounce } from '@mui/material/utils';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TextFieldProps<'standard'> {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_GlobalFilterTextField = <TData extends MRT_RowData>({
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -37,9 +38,12 @@ export const MRT_GlobalFilterTextField = <TData extends MRT_RowData>({
   } = table;
   const { globalFilter, showGlobalFilter } = getState();
 
-  const textFieldProps = parseFromValuesOrFunc(muiSearchTextFieldProps, {
-    table,
-  });
+  const textFieldProps = {
+    ...parseFromValuesOrFunc(muiSearchTextFieldProps, {
+      table,
+    }),
+    ...rest,
+  };
 
   const isMounted = useRef(false);
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -10,7 +10,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends CheckboxProps {
   row?: MRT_Row<TData>;
   selectAll?: boolean;
   table: MRT_TableInstance<TData>;
@@ -20,6 +20,7 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
   row,
   selectAll,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -35,9 +36,12 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
   } = table;
   const { density, isLoading } = getState();
 
-  const checkboxProps = !row
-    ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
-    : parseFromValuesOrFunc(muiSelectCheckboxProps, { row, table });
+  const checkboxProps = {
+    ...(!row
+      ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
+      : parseFromValuesOrFunc(muiSelectCheckboxProps, { row, table })),
+    ...rest,
+  };
 
   const allRowsSelected = selectAll
     ? selectAllMode === 'page'

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import Menu from '@mui/material/Menu';
+import Menu, { type MenuProps } from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
 import {
@@ -24,7 +24,7 @@ export const commonListItemStyles = {
   display: 'flex',
 };
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
   header: MRT_Header<TData>;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
@@ -36,6 +36,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
   header,
   setAnchorEl,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -396,6 +397,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
       anchorEl={anchorEl}
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
+      {...rest}
     >
       {columnDef.renderColumnActionsMenuItems?.({
         closeMenu: () => setAnchorEl(null),

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import Box from '@mui/material/Box';
-import Menu from '@mui/material/Menu';
+import Menu, { type MenuProps } from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import {
   type MRT_FilterOption,
@@ -105,7 +105,7 @@ const emptyModes = ['empty', 'notEmpty'];
 const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
 const rangeVariants = ['range-slider', 'date-range', 'range'];
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
   header?: MRT_Header<TData>;
   onSelect?: () => void;
@@ -121,6 +121,7 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
   setAnchorEl,
   setFilterValue,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -240,6 +241,7 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
       anchorOrigin={{ horizontal: 'right', vertical: 'center' }}
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
+      {...rest}
     >
       {(header && column && columnDef
         ? columnDef.renderColumnFilterModeMenuItems?.({

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,7 +1,7 @@
 import { type MouseEvent } from 'react';
 import Box from '@mui/material/Box';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import Menu from '@mui/material/Menu';
+import Menu, { type MenuProps } from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import {
   commonListItemStyles,
@@ -14,7 +14,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
   handleEdit: (event: MouseEvent) => void;
   row: MRT_Row<TData>;
@@ -28,6 +28,7 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
   row,
   setAnchorEl,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -49,6 +50,7 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
       onClick={(event) => event.stopPropagation()}
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
+      {...rest}
     >
       {parseFromValuesOrFunc(enableEditing, row) && (
         <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
-import Menu from '@mui/material/Menu';
+import Menu, { type MenuProps } from '@mui/material/Menu';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
 import { getDefaultColumnOrderIds } from '../column.utils';
 import {
@@ -11,7 +11,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
   isSubMenu?: boolean;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
@@ -22,6 +22,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
   anchorEl,
   setAnchorEl,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getAllColumns,
@@ -85,6 +86,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
       anchorEl={anchorEl}
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
+      {...rest}
     >
       <Box
         sx={{

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -7,20 +7,20 @@ import {
 } from 'react';
 import Box from '@mui/material/Box';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import MenuItem from '@mui/material/MenuItem';
+import MenuItem, { type MenuItemProps } from '@mui/material/MenuItem';
 import Switch from '@mui/material/Switch';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
-import { reorderColumn } from '../column.utils';
+import { parseFromValuesOrFunc, reorderColumn } from '../column.utils';
 import {
   type MRT_Column,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends MenuItemProps {
   allColumns: MRT_Column<TData>[];
   column: MRT_Column<TData>;
   hoveredColumn: MRT_Column<TData> | null;
@@ -34,6 +34,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
   hoveredColumn,
   setHoveredColumn,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -93,6 +94,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
         disableRipple
         onDragEnter={handleDragEnter}
         ref={menuItemRef as any}
+        {...rest}
         sx={(theme) => ({
           alignItems: 'center',
           justifyContent: 'flex-start',
@@ -106,6 +108,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
           outlineOffset: '-2px',
           pl: `${(column.depth + 0.5) * 2}rem`,
           py: '6px',
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
         })}
       >
         <Box

package/src/modals/MRT_EditRowModal.tsx

@@ -1,4 +1,4 @@
-import Dialog from '@mui/material/Dialog';
+import Dialog, { type DialogProps } from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -12,7 +12,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends Partial<DialogProps> {
   open: boolean;
   table: MRT_TableInstance<TData>;
 }
@@ -20,6 +20,7 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_EditRowModal = <TData extends MRT_RowData>({
   open,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -42,6 +43,7 @@ export const MRT_EditRowModal = <TData extends MRT_RowData>({
     ...parseFromValuesOrFunc(muiEditRowModalProps, { row, table }),
     ...(creatingRow &&
       parseFromValuesOrFunc(muiCreateRowModalProps, { row, table })),
+    ...rest,
   };
 
   const internalEditComponents = row
@@ -92,7 +94,7 @@ export const MRT_EditRowModal = <TData extends MRT_RowData>({
             <form onSubmit={(e) => e.preventDefault()}>
               <Stack
                 sx={{
-                  gap: '24px',
+                  gap: '32px',
                   paddingTop: '16px',
                   width: '100%',
                 }}