material-react-table 1.2.3 → 1.2.4

package/dist/cjs/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var reactTable = require('@tanstack/react-table');
-var material = require('@mui/material');
+var styles = require('@mui/material/styles');
 var matchSorterUtils = require('@tanstack/match-sorter-utils');
 var ArrowRightIcon = require('@mui/icons-material/ArrowRight');
 var CancelIcon = require('@mui/icons-material/Cancel');
@@ -36,7 +36,48 @@ var SearchOffIcon = require('@mui/icons-material/SearchOff');
 var SortIcon = require('@mui/icons-material/Sort');
 var ViewColumnIcon = require('@mui/icons-material/ViewColumn');
 var VisibilityOffIcon = require('@mui/icons-material/VisibilityOff');
+var Box = require('@mui/material/Box');
+var Dialog = require('@mui/material/Dialog');
+var Grow = require('@mui/material/Grow');
+var IconButton = require('@mui/material/IconButton');
+var Tooltip = require('@mui/material/Tooltip');
+var ListItemIcon = require('@mui/material/ListItemIcon');
+var Menu = require('@mui/material/Menu');
+var MenuItem = require('@mui/material/MenuItem');
+var Button = require('@mui/material/Button');
+var Divider = require('@mui/material/Divider');
+var FormControlLabel = require('@mui/material/FormControlLabel');
+var Switch = require('@mui/material/Switch');
+var Typography = require('@mui/material/Typography');
+var Checkbox = require('@mui/material/Checkbox');
+var Radio = require('@mui/material/Radio');
+var Paper = require('@mui/material/Paper');
+var Toolbar = require('@mui/material/Toolbar');
+var useMediaQuery = require('@mui/material/useMediaQuery');
+var Collapse = require('@mui/material/Collapse');
+var InputAdornment = require('@mui/material/InputAdornment');
+var TextField = require('@mui/material/TextField');
+var debounce = require('@mui/material/utils/debounce');
+var LinearProgress = require('@mui/material/LinearProgress');
+var TablePagination = require('@mui/material/TablePagination');
+var Alert = require('@mui/material/Alert');
+var AlertTitle = require('@mui/material/AlertTitle');
+var Chip = require('@mui/material/Chip');
+var Fade = require('@mui/material/Fade');
+var TableContainer = require('@mui/material/TableContainer');
+var Table = require('@mui/material/Table');
+var TableHead = require('@mui/material/TableHead');
+var TableRow = require('@mui/material/TableRow');
+var TableCell = require('@mui/material/TableCell');
+var TableSortLabel = require('@mui/material/TableSortLabel');
 var reactVirtual = require('react-virtual');
+var TableBody = require('@mui/material/TableBody');
+var Skeleton = require('@mui/material/Skeleton');
+var TableFooter = require('@mui/material/TableFooter');
+var DialogActions = require('@mui/material/DialogActions');
+var DialogContent = require('@mui/material/DialogContent');
+var DialogTitle = require('@mui/material/DialogTitle');
+var Stack = require('@mui/material/Stack');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -71,6 +112,47 @@ var SearchOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchOffIcon);
 var SortIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortIcon);
 var ViewColumnIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewColumnIcon);
 var VisibilityOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffIcon);
+var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
+var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
+var Grow__default = /*#__PURE__*/_interopDefaultLegacy(Grow);
+var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
+var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
+var ListItemIcon__default = /*#__PURE__*/_interopDefaultLegacy(ListItemIcon);
+var Menu__default = /*#__PURE__*/_interopDefaultLegacy(Menu);
+var MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(MenuItem);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var Divider__default = /*#__PURE__*/_interopDefaultLegacy(Divider);
+var FormControlLabel__default = /*#__PURE__*/_interopDefaultLegacy(FormControlLabel);
+var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
+var Radio__default = /*#__PURE__*/_interopDefaultLegacy(Radio);
+var Paper__default = /*#__PURE__*/_interopDefaultLegacy(Paper);
+var Toolbar__default = /*#__PURE__*/_interopDefaultLegacy(Toolbar);
+var useMediaQuery__default = /*#__PURE__*/_interopDefaultLegacy(useMediaQuery);
+var Collapse__default = /*#__PURE__*/_interopDefaultLegacy(Collapse);
+var InputAdornment__default = /*#__PURE__*/_interopDefaultLegacy(InputAdornment);
+var TextField__default = /*#__PURE__*/_interopDefaultLegacy(TextField);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+var LinearProgress__default = /*#__PURE__*/_interopDefaultLegacy(LinearProgress);
+var TablePagination__default = /*#__PURE__*/_interopDefaultLegacy(TablePagination);
+var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
+var AlertTitle__default = /*#__PURE__*/_interopDefaultLegacy(AlertTitle);
+var Chip__default = /*#__PURE__*/_interopDefaultLegacy(Chip);
+var Fade__default = /*#__PURE__*/_interopDefaultLegacy(Fade);
+var TableContainer__default = /*#__PURE__*/_interopDefaultLegacy(TableContainer);
+var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table);
+var TableHead__default = /*#__PURE__*/_interopDefaultLegacy(TableHead);
+var TableRow__default = /*#__PURE__*/_interopDefaultLegacy(TableRow);
+var TableCell__default = /*#__PURE__*/_interopDefaultLegacy(TableCell);
+var TableSortLabel__default = /*#__PURE__*/_interopDefaultLegacy(TableSortLabel);
+var TableBody__default = /*#__PURE__*/_interopDefaultLegacy(TableBody);
+var Skeleton__default = /*#__PURE__*/_interopDefaultLegacy(Skeleton);
+var TableFooter__default = /*#__PURE__*/_interopDefaultLegacy(TableFooter);
+var DialogActions__default = /*#__PURE__*/_interopDefaultLegacy(DialogActions);
+var DialogContent__default = /*#__PURE__*/_interopDefaultLegacy(DialogContent);
+var DialogTitle__default = /*#__PURE__*/_interopDefaultLegacy(DialogTitle);
+var Stack__default = /*#__PURE__*/_interopDefaultLegacy(Stack);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -126,7 +208,7 @@ const prepareColumns = ({ columnDefs, columnFilterFns, defaultDisplayColumn, fil
     }
     if (!columnDef.columnDefType)
         columnDef.columnDefType = 'data';
-    if (!!((_a = columnDef.columns) === null || _a === void 0 ? void 0 : _a.length)) {
+    if ((_a = columnDef.columns) === null || _a === void 0 ? void 0 : _a.length) {
         columnDef.columnDefType = 'group';
         columnDef.columns = prepareColumns({
             columnDefs: columnDef.columns,
@@ -220,11 +302,11 @@ const getTotalRight = (table, column) => {
 const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
     var _a, _b, _c, _d;
     return (Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
-            ? material.alpha(material.lighten(theme.palette.background.default, 0.04), 0.97)
+            ? styles.alpha(styles.lighten(theme.palette.background.default, 0.04), 0.97)
             : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn(table, column)
-            ? `-4px 0 8px -6px ${material.alpha(theme.palette.common.black, 0.2)} inset`
+            ? `-4px 0 8px -6px ${styles.alpha(theme.palette.common.black, 0.2)} inset`
             : getIsFirstRightPinnedColumn(column)
-                ? `4px 0 8px -6px ${material.alpha(theme.palette.common.black, 0.2)} inset`
+                ? `4px 0 8px -6px ${styles.alpha(theme.palette.common.black, 0.2)} inset`
                 : undefined, left: column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined, opacity: ((_a = table.getState().draggingColumn) === null || _a === void 0 ? void 0 : _a.id) === column.id ||
@@ -396,9 +478,9 @@ const MRT_ExpandAllButton = ({ table }) => {
     const iconButtonProps = muiExpandAllButtonProps instanceof Function
         ? muiExpandAllButtonProps({ table })
         : muiExpandAllButtonProps;
-    return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.expandAll },
+    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.expandAll },
         React__default["default"].createElement("span", null,
-            React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!getIsAllRowsExpanded()) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
+            React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!getIsAllRowsExpanded()) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
                     : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
                 React__default["default"].createElement(KeyboardDoubleArrowDownIcon, { style: {
@@ -424,9 +506,9 @@ const MRT_ExpandButton = ({ row, table }) => {
         row.toggleExpanded();
         (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
     };
-    return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.expand },
+    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.expand },
         React__default["default"].createElement("span", null,
-            React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.expand, disabled: !row.getCanExpand() && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
+            React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.expand, disabled: !row.getCanExpand() && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps.sx(theme)
                     : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
                 React__default["default"].createElement(ExpandMoreIcon, { style: {
@@ -566,7 +648,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
         onSelect === null || onSelect === void 0 ? void 0 : onSelect();
     };
     const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
-    return (React__default["default"].createElement(material.Menu, { anchorEl: anchorEl, anchorOrigin: { vertical: 'center', horizontal: 'right' }, onClose: () => setAnchorEl(null), open: !!anchorEl, MenuListProps: {
+    return (React__default["default"].createElement(Menu__default["default"], { anchorEl: anchorEl, anchorOrigin: { vertical: 'center', horizontal: 'right' }, onClose: () => setAnchorEl(null), open: !!anchorEl, MenuListProps: {
             dense: density === 'compact',
         } }, (_d = (header && column && columnDef
         ? (_c = (_b = columnDef.renderColumnFilterModeMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
@@ -584,14 +666,14 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
             internalFilterOptions,
             onSelectFilterMode: handleSelectFilterMode,
             table,
-        }))) !== null && _d !== void 0 ? _d : internalFilterOptions.map(({ option, label, divider, symbol }, index) => (React__default["default"].createElement(material.MenuItem, { divider: divider, key: index, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
+        }))) !== null && _d !== void 0 ? _d : internalFilterOptions.map(({ option, label, divider, symbol }, index) => (React__default["default"].createElement(MenuItem__default["default"], { divider: divider, key: index, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
             alignItems: 'center',
             display: 'flex',
             gap: '2ch',
             my: 0,
             py: '6px',
         }, value: option },
-        React__default["default"].createElement(material.Box, { sx: { fontSize: '1.25rem', width: '2ch' } }, symbol),
+        React__default["default"].createElement(Box__default["default"], { sx: { fontSize: '1.25rem', width: '2ch' } }, symbol),
         label)))));
 };
 
@@ -600,16 +682,16 @@ const MRT_ColumnPinningButtons = ({ column, table, }) => {
     const handlePinColumn = (pinDirection) => {
         column.pin(pinDirection);
     };
-    return (React__default["default"].createElement(material.Box, { sx: { minWidth: '70px', textAlign: 'center' } }, column.getIsPinned() ? (React__default["default"].createElement(material.Tooltip, { arrow: true, title: localization.unpin },
-        React__default["default"].createElement(material.IconButton, { onClick: () => handlePinColumn(false), size: "small" },
+    return (React__default["default"].createElement(Box__default["default"], { sx: { minWidth: '70px', textAlign: 'center' } }, column.getIsPinned() ? (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.unpin },
+        React__default["default"].createElement(IconButton__default["default"], { onClick: () => handlePinColumn(false), size: "small" },
             React__default["default"].createElement(PushPinIcon, null)))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.Tooltip, { arrow: true, title: localization.pinToLeft },
-            React__default["default"].createElement(material.IconButton, { onClick: () => handlePinColumn('left'), size: "small" },
+        React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.pinToLeft },
+            React__default["default"].createElement(IconButton__default["default"], { onClick: () => handlePinColumn('left'), size: "small" },
                 React__default["default"].createElement(PushPinIcon, { style: {
                         transform: 'rotate(90deg)',
                     } }))),
-        React__default["default"].createElement(material.Tooltip, { arrow: true, title: localization.pinToRight },
-            React__default["default"].createElement(material.IconButton, { onClick: () => handlePinColumn('right'), size: "small" },
+        React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.pinToRight },
+            React__default["default"].createElement(IconButton__default["default"], { onClick: () => handlePinColumn('right'), size: "small" },
                 React__default["default"].createElement(PushPinIcon, { style: {
                         transform: 'rotate(-90deg)',
                     } })))))));
@@ -618,8 +700,8 @@ const MRT_ColumnPinningButtons = ({ column, table, }) => {
 const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
     var _a;
     const { options: { icons: { DragHandleIcon }, localization, }, } = table;
-    return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move },
-        React__default["default"].createElement(material.IconButton, Object.assign({ disableRipple: true, draggable: "true", size: "small" }, iconButtonProps, { onClick: (e) => {
+    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move },
+        React__default["default"].createElement(IconButton__default["default"], Object.assign({ disableRipple: true, draggable: "true", size: "small" }, iconButtonProps, { onClick: (e) => {
                 var _a;
                 e.stopPropagation();
                 (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, e);
@@ -673,7 +755,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
         }
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.MenuItem, { disableRipple: true, ref: menuItemRef, onDragEnter: handleDragEnter, sx: (theme) => ({
+        React__default["default"].createElement(MenuItem__default["default"], { disableRipple: true, ref: menuItemRef, onDragEnter: handleDragEnter, sx: (theme) => ({
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 my: 0,
@@ -686,7 +768,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
                 pl: `${(column.depth + 0.5) * 2}rem`,
                 py: '6px',
             }) },
-            React__default["default"].createElement(material.Box, { sx: {
+            React__default["default"].createElement(Box__default["default"], { sx: {
                     display: 'flex',
                     flexWrap: 'nowrap',
                     gap: '8px',
@@ -695,21 +777,21 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
                     columnDefType !== 'group' &&
                     enableColumnOrdering &&
                     !allColumns.some((col) => col.columnDef.columnDefType === 'group') &&
-                    (columnDef.enableColumnOrdering !== false ? (React__default["default"].createElement(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (React__default["default"].createElement(material.Box, { sx: { width: '28px' } }))),
+                    (columnDef.enableColumnOrdering !== false ? (React__default["default"].createElement(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (React__default["default"].createElement(Box__default["default"], { sx: { width: '28px' } }))),
                 !isSubMenu &&
                     enablePinning &&
-                    (column.getCanPin() ? (React__default["default"].createElement(MRT_ColumnPinningButtons, { column: column, table: table })) : (React__default["default"].createElement(material.Box, { sx: { width: '70px' } }))),
-                enableHiding ? (React__default["default"].createElement(material.FormControlLabel, { componentsProps: {
+                    (column.getCanPin() ? (React__default["default"].createElement(MRT_ColumnPinningButtons, { column: column, table: table })) : (React__default["default"].createElement(Box__default["default"], { sx: { width: '70px' } }))),
+                enableHiding ? (React__default["default"].createElement(FormControlLabel__default["default"], { componentsProps: {
                         typography: {
                             sx: {
                                 mb: 0,
                                 opacity: columnDefType !== 'display' ? 1 : 0.5,
                             },
                         },
-                    }, checked: switchChecked, control: React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility },
-                        React__default["default"].createElement(material.Switch, null)), disabled: (isSubMenu && switchChecked) ||
+                    }, checked: switchChecked, control: React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility },
+                        React__default["default"].createElement(Switch__default["default"], null)), disabled: (isSubMenu && switchChecked) ||
                         !column.getCanHide() ||
-                        column.getIsGrouped(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (React__default["default"].createElement(material.Typography, { sx: { alignSelf: 'center' } }, columnDef.header)))), (_a = column.columns) === null || _a === void 0 ? void 0 :
+                        column.getIsGrouped(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (React__default["default"].createElement(Typography__default["default"], { sx: { alignSelf: 'center' } }, columnDef.header)))), (_a = column.columns) === null || _a === void 0 ? void 0 :
         _a.map((c, i) => (React__default["default"].createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, isSubMenu: isSubMenu, key: `${i}-${c.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
 };
 
@@ -741,20 +823,20 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, isSubMenu, setAnchorEl, table, }) =
         getRightLeafColumns(),
     ]);
     const [hoveredColumn, setHoveredColumn] = React.useState(null);
-    return (React__default["default"].createElement(material.Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
+    return (React__default["default"].createElement(Menu__default["default"], { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
             dense: density === 'compact',
         } },
-        React__default["default"].createElement(material.Box, { sx: {
+        React__default["default"].createElement(Box__default["default"], { sx: {
                 display: 'flex',
                 justifyContent: isSubMenu ? 'center' : 'space-between',
                 p: '0.5rem',
                 pt: 0,
             } },
-            !isSubMenu && (React__default["default"].createElement(material.Button, { disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns }, localization.hideAll)),
-            !isSubMenu && enableColumnOrdering && (React__default["default"].createElement(material.Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)) }, localization.resetOrder)),
-            !isSubMenu && enablePinning && (React__default["default"].createElement(material.Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true) }, localization.unpinAll)),
-            React__default["default"].createElement(material.Button, { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true) }, localization.showAll)),
-        React__default["default"].createElement(material.Divider, null),
+            !isSubMenu && (React__default["default"].createElement(Button__default["default"], { disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns }, localization.hideAll)),
+            !isSubMenu && enableColumnOrdering && (React__default["default"].createElement(Button__default["default"], { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)) }, localization.resetOrder)),
+            !isSubMenu && enablePinning && (React__default["default"].createElement(Button__default["default"], { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true) }, localization.unpinAll)),
+            React__default["default"].createElement(Button__default["default"], { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true) }, localization.showAll)),
+        React__default["default"].createElement(Divider__default["default"], null),
         allColumns.map((column, index) => (React__default["default"].createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, isSubMenu: isSubMenu, key: `${index}-${column.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
 };
 
@@ -833,7 +915,7 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
         !isSelectFilter &&
         (allowedColumnFilterOptions === undefined ||
             !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
-    return (React__default["default"].createElement(material.Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
+    return (React__default["default"].createElement(Menu__default["default"], { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
             dense: density === 'compact',
         } }, (_d = (_c = (_b = columnDef.renderColumnActionsMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
         closeMenu: () => setAnchorEl(null),
@@ -845,86 +927,86 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
         table,
     })) !== null && _d !== void 0 ? _d : (enableSorting &&
         column.getCanSort() && [
-        React__default["default"].createElement(material.MenuItem, { disabled: !column.getIsSorted(), key: 0, onClick: handleClearSort, sx: commonMenuItemStyles },
-            React__default["default"].createElement(material.Box, { sx: commonListItemStyles },
-                React__default["default"].createElement(material.ListItemIcon, null,
+        React__default["default"].createElement(MenuItem__default["default"], { disabled: !column.getIsSorted(), key: 0, onClick: handleClearSort, sx: commonMenuItemStyles },
+            React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
+                React__default["default"].createElement(ListItemIcon__default["default"], null,
                     React__default["default"].createElement(ClearAllIcon, null)),
                 localization.clearSort)),
-        React__default["default"].createElement(material.MenuItem, { disabled: column.getIsSorted() === 'asc', key: 1, onClick: handleSortAsc, sx: commonMenuItemStyles },
-            React__default["default"].createElement(material.Box, { sx: commonListItemStyles },
-                React__default["default"].createElement(material.ListItemIcon, null,
+        React__default["default"].createElement(MenuItem__default["default"], { disabled: column.getIsSorted() === 'asc', key: 1, onClick: handleSortAsc, sx: commonMenuItemStyles },
+            React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
+                React__default["default"].createElement(ListItemIcon__default["default"], null,
                     React__default["default"].createElement(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } })), (_e = localization.sortByColumnAsc) === null || _e === void 0 ? void 0 :
                 _e.replace('{column}', String(columnDef.header)))),
-        React__default["default"].createElement(material.MenuItem, { divider: enableColumnFilters || enableGrouping || enableHiding, key: 2, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles },
-            React__default["default"].createElement(material.Box, { sx: commonListItemStyles },
-                React__default["default"].createElement(material.ListItemIcon, null,
+        React__default["default"].createElement(MenuItem__default["default"], { divider: enableColumnFilters || enableGrouping || enableHiding, key: 2, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles },
+            React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
+                React__default["default"].createElement(ListItemIcon__default["default"], null,
                     React__default["default"].createElement(SortIcon, null)), (_f = localization.sortByColumnDesc) === null || _f === void 0 ? void 0 :
                 _f.replace('{column}', String(columnDef.header)))),
     ]),
         enableColumnFilters &&
             column.getCanFilter() &&
             [
-                React__default["default"].createElement(material.MenuItem, { disabled: !column.getFilterValue(), key: 0, onClick: handleClearFilter, sx: commonMenuItemStyles },
-                    React__default["default"].createElement(material.Box, { sx: commonListItemStyles },
-                        React__default["default"].createElement(material.ListItemIcon, null,
+                React__default["default"].createElement(MenuItem__default["default"], { disabled: !column.getFilterValue(), key: 0, onClick: handleClearFilter, sx: commonMenuItemStyles },
+                    React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
+                        React__default["default"].createElement(ListItemIcon__default["default"], null,
                             React__default["default"].createElement(FilterListOffIcon, null)),
                         localization.clearFilter)),
-                React__default["default"].createElement(material.MenuItem, { divider: enableGrouping || enableHiding, key: 1, onClick: handleFilterByColumn, sx: commonMenuItemStyles },
-                    React__default["default"].createElement(material.Box, { sx: commonListItemStyles },
-                        React__default["default"].createElement(material.ListItemIcon, null,
+                React__default["default"].createElement(MenuItem__default["default"], { divider: enableGrouping || enableHiding, key: 1, onClick: handleFilterByColumn, sx: commonMenuItemStyles },
+                    React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
+                        React__default["default"].createElement(ListItemIcon__default["default"], null,
                             React__default["default"].createElement(FilterListIcon, null)), (_g = localization.filterByColumn) === null || _g === void 0 ? void 0 :
                         _g.replace('{column}', String(columnDef.header))),
-                    showFilterModeSubMenu && (React__default["default"].createElement(material.IconButton, { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 } },
+                    showFilterModeSubMenu && (React__default["default"].createElement(IconButton__default["default"], { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 } },
                         React__default["default"].createElement(ArrowRightIcon, null)))),
                 showFilterModeSubMenu && (React__default["default"].createElement(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, key: 2, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table })),
             ].filter(Boolean),
         enableGrouping &&
             column.getCanGroup() && [
-            React__default["default"].createElement(material.MenuItem, { divider: enablePinning, key: 0, onClick: handleGroupByColumn, sx: commonMenuItemStyles },
-                React__default["default"].createElement(material.Box, { sx: commonListItemStyles },
-                    React__default["default"].createElement(material.ListItemIcon, null,
+            React__default["default"].createElement(MenuItem__default["default"], { divider: enablePinning, key: 0, onClick: handleGroupByColumn, sx: commonMenuItemStyles },
+                React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
+                    React__default["default"].createElement(ListItemIcon__default["default"], null,
                         React__default["default"].createElement(DynamicFeedIcon, null)), (_h = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _h === void 0 ? void 0 :
                     _h.replace('{column}', String(columnDef.header)))),
         ],
         enablePinning &&
             column.getCanPin() && [
-            React__default["default"].createElement(material.MenuItem, { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), key: 0, onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles },
-                React__default["default"].createElement(material.Box, { sx: commonListItemStyles },
-                    React__default["default"].createElement(material.ListItemIcon, null,
+            React__default["default"].createElement(MenuItem__default["default"], { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), key: 0, onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles },
+                React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
+                    React__default["default"].createElement(ListItemIcon__default["default"], null,
                         React__default["default"].createElement(PushPinIcon, { style: { transform: 'rotate(90deg)' } })),
                     localization.pinToLeft)),
-            React__default["default"].createElement(material.MenuItem, { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), key: 1, onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles },
-                React__default["default"].createElement(material.Box, { sx: commonListItemStyles },
-                    React__default["default"].createElement(material.ListItemIcon, null,
+            React__default["default"].createElement(MenuItem__default["default"], { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), key: 1, onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles },
+                React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
+                    React__default["default"].createElement(ListItemIcon__default["default"], null,
                         React__default["default"].createElement(PushPinIcon, { style: { transform: 'rotate(-90deg)' } })),
                     localization.pinToRight)),
-            React__default["default"].createElement(material.MenuItem, { disabled: !column.getIsPinned(), divider: enableHiding, key: 2, onClick: () => handlePinColumn(false), sx: commonMenuItemStyles },
-                React__default["default"].createElement(material.Box, { sx: commonListItemStyles },
-                    React__default["default"].createElement(material.ListItemIcon, null,
+            React__default["default"].createElement(MenuItem__default["default"], { disabled: !column.getIsPinned(), divider: enableHiding, key: 2, onClick: () => handlePinColumn(false), sx: commonMenuItemStyles },
+                React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
+                    React__default["default"].createElement(ListItemIcon__default["default"], null,
                         React__default["default"].createElement(PushPinIcon, null)),
                     localization.unpin)),
         ],
         enableColumnResizing &&
             column.getCanResize() && [
-            React__default["default"].createElement(material.MenuItem, { disabled: !columnSizing[column.id], key: 0, onClick: handleResetColumnSize, sx: commonMenuItemStyles },
-                React__default["default"].createElement(material.Box, { sx: commonListItemStyles },
-                    React__default["default"].createElement(material.ListItemIcon, null,
+            React__default["default"].createElement(MenuItem__default["default"], { disabled: !columnSizing[column.id], key: 0, onClick: handleResetColumnSize, sx: commonMenuItemStyles },
+                React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
+                    React__default["default"].createElement(ListItemIcon__default["default"], null,
                         React__default["default"].createElement(RestartAltIcon, null)),
                     localization.resetColumnSize)),
         ],
         enableHiding && [
-            React__default["default"].createElement(material.MenuItem, { disabled: columnDef.enableHiding === false, key: 0, onClick: handleHideColumn, sx: commonMenuItemStyles },
-                React__default["default"].createElement(material.Box, { sx: commonListItemStyles },
-                    React__default["default"].createElement(material.ListItemIcon, null,
+            React__default["default"].createElement(MenuItem__default["default"], { disabled: columnDef.enableHiding === false, key: 0, onClick: handleHideColumn, sx: commonMenuItemStyles },
+                React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
+                    React__default["default"].createElement(ListItemIcon__default["default"], null,
                         React__default["default"].createElement(VisibilityOffIcon, null)), (_j = localization.hideColumn) === null || _j === void 0 ? void 0 :
                     _j.replace('{column}', String(columnDef.header)))),
-            React__default["default"].createElement(material.MenuItem, { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
+            React__default["default"].createElement(MenuItem__default["default"], { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
                     .length, key: 1, onClick: handleShowAllColumns, sx: commonMenuItemStyles },
-                React__default["default"].createElement(material.Box, { sx: commonListItemStyles },
-                    React__default["default"].createElement(material.ListItemIcon, null,
+                React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
+                    React__default["default"].createElement(ListItemIcon__default["default"], null,
                         React__default["default"].createElement(ViewColumnIcon, null)), (_k = localization.showAllColumns) === null || _k === void 0 ? void 0 :
                     _k.replace('{column}', String(columnDef.header))),
-                React__default["default"].createElement(material.IconButton, { onClick: handleOpenShowHideColumnsMenu, onMouseEnter: handleOpenShowHideColumnsMenu, size: "small", sx: { p: 0 } },
+                React__default["default"].createElement(IconButton__default["default"], { onClick: handleOpenShowHideColumnsMenu, onMouseEnter: handleOpenShowHideColumnsMenu, size: "small", sx: { p: 0 } },
                     React__default["default"].createElement(ArrowRightIcon, null))),
             React__default["default"].createElement(MRT_ShowHideColumnsMenu, { anchorEl: showHideColumnsMenuAnchorEl, isSubMenu: true, key: 2, setAnchorEl: setShowHideColumnsMenuAnchorEl, table: table }),
         ]));
@@ -933,12 +1015,12 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
 const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) => {
     const { getState, options: { icons: { EditIcon }, enableEditing, localization, renderRowActionMenuItems, }, } = table;
     const { density } = getState();
-    return (React__default["default"].createElement(material.Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
+    return (React__default["default"].createElement(Menu__default["default"], { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
             dense: density === 'compact',
         } },
-        enableEditing && (React__default["default"].createElement(material.MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles },
-            React__default["default"].createElement(material.Box, { sx: commonListItemStyles },
-                React__default["default"].createElement(material.ListItemIcon, null,
+        enableEditing && (React__default["default"].createElement(MenuItem__default["default"], { onClick: handleEdit, sx: commonMenuItemStyles },
+            React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
+                React__default["default"].createElement(ListItemIcon__default["default"], null,
                     React__default["default"].createElement(EditIcon, null)),
                 localization.edit))), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 :
         renderRowActionMenuItems({
@@ -969,15 +1051,15 @@ const MRT_EditActionButtons = ({ row, table, variant = 'icon', }) => {
             values: (_b = editingRow === null || editingRow === void 0 ? void 0 : editingRow._valuesCache) !== null && _b !== void 0 ? _b : Object.assign({}, row.original),
         });
     };
-    return (React__default["default"].createElement(material.Box, { onClick: (e) => e.stopPropagation(), sx: { display: 'flex', gap: '0.75rem' } }, variant === 'icon' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.Tooltip, { arrow: true, title: localization.cancel },
-            React__default["default"].createElement(material.IconButton, { "aria-label": localization.cancel, onClick: handleCancel },
+    return (React__default["default"].createElement(Box__default["default"], { onClick: (e) => e.stopPropagation(), sx: { display: 'flex', gap: '0.75rem' } }, variant === 'icon' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.cancel },
+            React__default["default"].createElement(IconButton__default["default"], { "aria-label": localization.cancel, onClick: handleCancel },
                 React__default["default"].createElement(CancelIcon, null))),
-        React__default["default"].createElement(material.Tooltip, { arrow: true, title: localization.save },
-            React__default["default"].createElement(material.IconButton, { "aria-label": localization.save, color: "info", onClick: handleSave },
+        React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.save },
+            React__default["default"].createElement(IconButton__default["default"], { "aria-label": localization.save, color: "info", onClick: handleSave },
                 React__default["default"].createElement(SaveIcon, null))))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.Button, { onClick: handleCancel }, localization.cancel),
-        React__default["default"].createElement(material.Button, { onClick: handleSave, variant: "contained" }, localization.save)))));
+        React__default["default"].createElement(Button__default["default"], { onClick: handleCancel }, localization.cancel),
+        React__default["default"].createElement(Button__default["default"], { onClick: handleSave, variant: "contained" }, localization.save)))));
 };
 
 const commonIconButtonStyles = {
@@ -1004,11 +1086,11 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
         setEditingRow(Object.assign({}, row));
         setAnchorEl(null);
     };
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, renderRowActions ? (React__default["default"].createElement(React__default["default"].Fragment, null, renderRowActions({ cell, row, table }))) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (React__default["default"].createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems && enableEditing ? (React__default["default"].createElement(material.Tooltip, { placement: "right", arrow: true, title: localization.edit },
-        React__default["default"].createElement(material.IconButton, { "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode },
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, renderRowActions ? (React__default["default"].createElement(React__default["default"].Fragment, null, renderRowActions({ cell, row, table }))) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (React__default["default"].createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems && enableEditing ? (React__default["default"].createElement(Tooltip__default["default"], { placement: "right", arrow: true, title: localization.edit },
+        React__default["default"].createElement(IconButton__default["default"], { "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode },
             React__default["default"].createElement(EditIcon, null)))) : renderRowActionMenuItems ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions },
-            React__default["default"].createElement(material.IconButton, { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles },
+        React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions },
+            React__default["default"].createElement(IconButton__default["default"], { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles },
                 React__default["default"].createElement(MoreHorizIcon, null))),
         React__default["default"].createElement(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table }))) : null));
 };
@@ -1043,9 +1125,9 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
         }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', width: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined }, ((checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx) instanceof Function
             ? checkboxProps.sx(theme)
             : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))), title: undefined });
-    return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _a !== void 0 ? _a : (selectAll
+    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _a !== void 0 ? _a : (selectAll
             ? localization.toggleSelectAll
-            : localization.toggleSelectRow) }, enableMultiRowSelection === false ? (React__default["default"].createElement(material.Radio, Object.assign({}, commonProps))) : (React__default["default"].createElement(material.Checkbox, Object.assign({ indeterminate: selectAll
+            : localization.toggleSelectRow) }, enableMultiRowSelection === false ? (React__default["default"].createElement(Radio__default["default"], Object.assign({}, commonProps))) : (React__default["default"].createElement(Checkbox__default["default"], Object.assign({ indeterminate: selectAll
             ? table.getIsSomeRowsSelected() &&
                 !(selectAllMode === 'page'
                     ? table.getIsAllPageRowsSelected()
@@ -1062,7 +1144,7 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
         : muiSearchTextFieldProps;
     const [anchorEl, setAnchorEl] = React.useState(null);
     const [searchValue, setSearchValue] = React.useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
-    const handleChangeDebounced = React.useCallback(material.debounce((event) => {
+    const handleChangeDebounced = React.useCallback(debounce__default["default"]((event) => {
         var _a;
         setGlobalFilter((_a = event.target.value) !== null && _a !== void 0 ? _a : undefined);
     }, manualFiltering ? 500 : 250), []);
@@ -1082,16 +1164,16 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
             handleClear();
         }
     }, [globalFilter]);
-    return (React__default["default"].createElement(material.Collapse, { in: showGlobalFilter, orientation: "horizontal", unmountOnExit: true, mountOnEnter: true },
-        React__default["default"].createElement(material.TextField, Object.assign({ placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
-                startAdornment: enableGlobalFilterModes ? (React__default["default"].createElement(material.InputAdornment, { position: "start" },
-                    React__default["default"].createElement(material.Tooltip, { arrow: true, title: localization.changeSearchMode },
-                        React__default["default"].createElement(material.IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } },
+    return (React__default["default"].createElement(Collapse__default["default"], { in: showGlobalFilter, orientation: "horizontal", unmountOnExit: true, mountOnEnter: true },
+        React__default["default"].createElement(TextField__default["default"], Object.assign({ placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
+                startAdornment: enableGlobalFilterModes ? (React__default["default"].createElement(InputAdornment__default["default"], { position: "start" },
+                    React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.changeSearchMode },
+                        React__default["default"].createElement(IconButton__default["default"], { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } },
                             React__default["default"].createElement(SearchIcon, null))))) : (React__default["default"].createElement(SearchIcon, { style: { marginRight: '4px' } })),
-                endAdornment: (React__default["default"].createElement(material.InputAdornment, { position: "end" },
-                    React__default["default"].createElement(material.Tooltip, { arrow: true, title: (_a = localization.clearSearch) !== null && _a !== void 0 ? _a : '' },
+                endAdornment: (React__default["default"].createElement(InputAdornment__default["default"], { position: "end" },
+                    React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: (_a = localization.clearSearch) !== null && _a !== void 0 ? _a : '' },
                         React__default["default"].createElement("span", null,
-                            React__default["default"].createElement(material.IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small" },
+                            React__default["default"].createElement(IconButton__default["default"], { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small" },
                                 React__default["default"].createElement(CloseIcon, null)))))),
             } }, textFieldProps, { inputRef: (inputRef) => {
                 searchInputRef.current = inputRef;
@@ -1108,13 +1190,13 @@ const MRT_LinearProgressBar = ({ isTopToolbar, table }) => {
     const linearProgressProps = muiLinearProgressProps instanceof Function
         ? muiLinearProgressProps({ isTopToolbar, table })
         : muiLinearProgressProps;
-    return (React__default["default"].createElement(material.Collapse, { in: isLoading || showProgressBars, mountOnEnter: true, unmountOnExit: true, sx: {
+    return (React__default["default"].createElement(Collapse__default["default"], { in: isLoading || showProgressBars, mountOnEnter: true, unmountOnExit: true, sx: {
             bottom: isTopToolbar ? 0 : undefined,
             position: 'absolute',
             top: !isTopToolbar ? 0 : undefined,
             width: '100%',
         } },
-        React__default["default"].createElement(material.LinearProgress, Object.assign({ "aria-label": "Loading", "aria-busy": "true", sx: { position: 'relative' } }, linearProgressProps))));
+        React__default["default"].createElement(LinearProgress__default["default"], Object.assign({ "aria-label": "Loading", "aria-busy": "true", sx: { position: 'relative' } }, linearProgressProps))));
 };
 
 const MRT_TablePagination = ({ table, position, }) => {
@@ -1128,7 +1210,7 @@ const MRT_TablePagination = ({ table, position, }) => {
     const handleChangeRowsPerPage = (event) => {
         setPageSize(+event.target.value);
     };
-    return (React__default["default"].createElement(material.TablePagination, Object.assign({ component: "div", count: totalRowCount, getItemAriaLabel: (type) => type === 'first'
+    return (React__default["default"].createElement(TablePagination__default["default"], Object.assign({ component: "div", count: totalRowCount, getItemAriaLabel: (type) => type === 'first'
             ? localization.goToFirstPage
             : type === 'last'
                 ? localization.goToLastPage
@@ -1174,17 +1256,17 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
         ' ',
         grouping.map((columnId, index) => (React__default["default"].createElement(React.Fragment, { key: `${index}-${columnId}` },
             index > 0 ? localization.thenBy : '',
-            React__default["default"].createElement(material.Chip, Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))))))) : null;
-    return (React__default["default"].createElement(material.Collapse, { in: showAlertBanner || !!selectMessage || !!groupedByMessage, timeout: stackAlertBanner ? 200 : 0 },
-        React__default["default"].createElement(material.Alert, Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => (Object.assign({ borderRadius: 0, fontSize: '1rem', left: 0, p: 0, position: 'relative', mb: stackAlertBanner
+            React__default["default"].createElement(Chip__default["default"], Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))))))) : null;
+    return (React__default["default"].createElement(Collapse__default["default"], { in: showAlertBanner || !!selectMessage || !!groupedByMessage, timeout: stackAlertBanner ? 200 : 0 },
+        React__default["default"].createElement(Alert__default["default"], Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => (Object.assign({ borderRadius: 0, fontSize: '1rem', left: 0, p: 0, position: 'relative', mb: stackAlertBanner
                     ? 0
                     : positionToolbarAlertBanner === 'bottom'
                         ? '-1rem'
                         : undefined, right: 0, top: 0, width: '100%', zIndex: 2 }, ((alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx) instanceof Function
                 ? alertProps.sx(theme)
                 : alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx))) }),
-            (alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && React__default["default"].createElement(material.AlertTitle, null, alertProps.title),
-            React__default["default"].createElement(material.Box, { sx: { p: '0.5rem 1rem' } }, alertProps === null || alertProps === void 0 ? void 0 :
+            (alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && React__default["default"].createElement(AlertTitle__default["default"], null, alertProps.title),
+            React__default["default"].createElement(Box__default["default"], { sx: { p: '0.5rem 1rem' } }, alertProps === null || alertProps === void 0 ? void 0 :
                 alertProps.children,
                 (alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && (React__default["default"].createElement("br", null)),
                 selectMessage,
@@ -1200,8 +1282,8 @@ const MRT_FullScreenToggleButton = (_a) => {
     const handleToggleFullScreen = () => {
         setIsFullScreen(!isFullScreen);
     };
-    return (React__default["default"].createElement(material.Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen },
-        React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen }, rest, { title: undefined }), isFullScreen ? React__default["default"].createElement(FullscreenExitIcon, null) : React__default["default"].createElement(FullscreenIcon, null))));
+    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen },
+        React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen }, rest, { title: undefined }), isFullScreen ? React__default["default"].createElement(FullscreenExitIcon, null) : React__default["default"].createElement(FullscreenIcon, null))));
 };
 
 const MRT_ShowHideColumnsButton = (_a) => {
@@ -1213,8 +1295,8 @@ const MRT_ShowHideColumnsButton = (_a) => {
         setAnchorEl(event.currentTarget);
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideColumns },
-            React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest, { title: undefined }),
+        React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideColumns },
+            React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest, { title: undefined }),
                 React__default["default"].createElement(ViewColumnIcon, null))),
         React__default["default"].createElement(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table })));
 };
@@ -1232,8 +1314,8 @@ const MRT_ToggleDensePaddingButton = (_a) => {
                 : 'comfortable';
         setDensity(nextDensity);
     };
-    return (React__default["default"].createElement(material.Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleDensity },
-        React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest, { title: undefined }), density === 'compact' ? (React__default["default"].createElement(DensitySmallIcon, null)) : density === 'comfortable' ? (React__default["default"].createElement(DensityMediumIcon, null)) : (React__default["default"].createElement(DensityLargeIcon, null)))));
+    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleDensity },
+        React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest, { title: undefined }), density === 'compact' ? (React__default["default"].createElement(DensitySmallIcon, null)) : density === 'comfortable' ? (React__default["default"].createElement(DensityMediumIcon, null)) : (React__default["default"].createElement(DensityLargeIcon, null)))));
 };
 
 const MRT_ToggleFiltersButton = (_a) => {
@@ -1244,8 +1326,8 @@ const MRT_ToggleFiltersButton = (_a) => {
     const handleToggleShowFilters = () => {
         setShowFilters(!showColumnFilters);
     };
-    return (React__default["default"].createElement(material.Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters },
-        React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined }), showColumnFilters ? React__default["default"].createElement(FilterListOffIcon, null) : React__default["default"].createElement(FilterListIcon, null))));
+    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters },
+        React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined }), showColumnFilters ? React__default["default"].createElement(FilterListOffIcon, null) : React__default["default"].createElement(FilterListIcon, null))));
 };
 
 const MRT_ToggleGlobalFilterButton = (_a) => {
@@ -1257,14 +1339,14 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
         setShowGlobalFilter(!showGlobalFilter);
         queueMicrotask(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     };
-    return (React__default["default"].createElement(material.Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch },
-        React__default["default"].createElement(material.IconButton, Object.assign({ disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined }), showGlobalFilter ? React__default["default"].createElement(SearchOffIcon, null) : React__default["default"].createElement(SearchIcon, null))));
+    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch },
+        React__default["default"].createElement(IconButton__default["default"], Object.assign({ disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined }), showGlobalFilter ? React__default["default"].createElement(SearchOffIcon, null) : React__default["default"].createElement(SearchIcon, null))));
 };
 
 const MRT_ToolbarInternalButtons = ({ table, }) => {
     var _a;
     const { options: { enableColumnFilters, enableColumnOrdering, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enablePinning, initialState, renderToolbarInternalActions, }, } = table;
-    return (React__default["default"].createElement(material.Box, { sx: {
+    return (React__default["default"].createElement(Box__default["default"], { sx: {
             alignItems: 'center',
             display: 'flex',
             zIndex: 3,
@@ -1287,12 +1369,12 @@ const MRT_ToolbarDropZone = ({ table }) => {
     const handleDragEnter = (_event) => {
         setHoveredColumn({ id: 'drop-zone' });
     };
-    return (React__default["default"].createElement(material.Fade, { unmountOnExit: true, mountOnEnter: true, in: !!enableGrouping &&
+    return (React__default["default"].createElement(Fade__default["default"], { unmountOnExit: true, mountOnEnter: true, in: !!enableGrouping &&
             !!draggingColumn &&
             !grouping.includes(draggingColumn.id) },
-        React__default["default"].createElement(material.Box, { sx: (theme) => ({
+        React__default["default"].createElement(Box__default["default"], { sx: (theme) => ({
                 alignItems: 'center',
-                backgroundColor: material.alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
+                backgroundColor: styles.alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
                 border: `dashed ${theme.palette.info.main} 2px`,
                 display: 'flex',
                 justifyContent: 'center',
@@ -1301,12 +1383,12 @@ const MRT_ToolbarDropZone = ({ table }) => {
                 width: 'calc(100% - 4px)',
                 zIndex: 2,
             }), onDragEnter: handleDragEnter },
-            React__default["default"].createElement(material.Typography, null, localization.dropToGroupBy.replace('{column}', (_b = (_a = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '')))));
+            React__default["default"].createElement(Typography__default["default"], null, localization.dropToGroupBy.replace('{column}', (_b = (_a = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '')))));
 };
 
 const commonToolbarStyles = ({ theme }) => ({
     alignItems: 'flex-start',
-    backgroundColor: material.lighten(theme.palette.background.default, 0.04),
+    backgroundColor: styles.lighten(theme.palette.background.default, 0.04),
     backgroundImage: 'none',
     display: 'grid',
     flexWrap: 'wrap-reverse',
@@ -1320,12 +1402,12 @@ const MRT_TopToolbar = ({ table }) => {
     var _a;
     const { getState, options: { enableGlobalFilter, enablePagination, enableToolbarInternalActions, muiTopToolbarProps, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderTopToolbarCustomActions, }, refs: { topToolbarRef }, } = table;
     const { isFullScreen, showGlobalFilter } = getState();
-    const isMobile = material.useMediaQuery('(max-width:720px)');
+    const isMobile = useMediaQuery__default["default"]('(max-width:720px)');
     const toolbarProps = muiTopToolbarProps instanceof Function
         ? muiTopToolbarProps({ table })
         : muiTopToolbarProps;
     const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
-    return (React__default["default"].createElement(material.Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
+    return (React__default["default"].createElement(Toolbar__default["default"], Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
             topToolbarRef.current = ref;
             if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
                 // @ts-ignore
@@ -1336,7 +1418,7 @@ const MRT_TopToolbar = ({ table }) => {
             : toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))) }),
         positionToolbarAlertBanner === 'top' && (React__default["default"].createElement(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })),
         ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (React__default["default"].createElement(MRT_ToolbarDropZone, { table: table })),
-        React__default["default"].createElement(material.Box, { sx: {
+        React__default["default"].createElement(Box__default["default"], { sx: {
                 alignItems: 'flex-start',
                 boxSizing: 'border-box',
                 display: 'flex',
@@ -1348,7 +1430,7 @@ const MRT_TopToolbar = ({ table }) => {
                 width: '100%',
             } },
             enableGlobalFilter && positionGlobalFilter === 'left' && (React__default["default"].createElement(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : React__default["default"].createElement("span", null),
-            enableToolbarInternalActions ? (React__default["default"].createElement(material.Box, { sx: {
+            enableToolbarInternalActions ? (React__default["default"].createElement(Box__default["default"], { sx: {
                     display: 'flex',
                     flexWrap: 'wrap-reverse',
                     justifyContent: 'flex-end',
@@ -1364,24 +1446,24 @@ const MRT_TopToolbar = ({ table }) => {
 const MRT_BottomToolbar = ({ table }) => {
     const { getState, options: { enablePagination, muiBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions, }, refs: { bottomToolbarRef }, } = table;
     const { isFullScreen } = getState();
-    const isMobile = material.useMediaQuery('(max-width:720px)');
+    const isMobile = useMediaQuery__default["default"]('(max-width:720px)');
     const toolbarProps = muiBottomToolbarProps instanceof Function
         ? muiBottomToolbarProps({ table })
         : muiBottomToolbarProps;
     const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
-    return (React__default["default"].createElement(material.Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
+    return (React__default["default"].createElement(Toolbar__default["default"], Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
             bottomToolbarRef.current = ref;
             if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
                 // @ts-ignore
                 toolbarProps.ref.current = ref;
             }
-        }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, commonToolbarStyles({ theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `0 1px 2px -1px ${material.alpha(theme.palette.common.black, 0.1)} inset`, left: 0, position: isFullScreen ? 'fixed' : 'relative', right: 0 }), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
+        }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, commonToolbarStyles({ theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `0 1px 2px -1px ${styles.alpha(theme.palette.common.black, 0.1)} inset`, left: 0, position: isFullScreen ? 'fixed' : 'relative', right: 0 }), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
             ? toolbarProps.sx(theme)
             : toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))) }),
         React__default["default"].createElement(MRT_LinearProgressBar, { isTopToolbar: false, table: table }),
         positionToolbarAlertBanner === 'bottom' && (React__default["default"].createElement(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })),
         ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (React__default["default"].createElement(MRT_ToolbarDropZone, { table: table })),
-        React__default["default"].createElement(material.Box, { sx: {
+        React__default["default"].createElement(Box__default["default"], { sx: {
                 alignItems: 'center',
                 boxSizing: 'border-box',
                 display: 'flex',
@@ -1390,7 +1472,7 @@ const MRT_BottomToolbar = ({ table }) => {
                 width: '100%',
             } },
             renderBottomToolbarCustomActions ? (renderBottomToolbarCustomActions({ table })) : (React__default["default"].createElement("span", null)),
-            React__default["default"].createElement(material.Box, { sx: {
+            React__default["default"].createElement(Box__default["default"], { sx: {
                     display: 'flex',
                     justifyContent: 'flex-end',
                     position: stackAlertBanner ? 'relative' : 'absolute',
@@ -1422,8 +1504,8 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
         : columnDef.muiTableHeadCellColumnActionsButtonProps;
     const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions },
-            React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-0.2rem', opacity: 0.5, transition: 'opacity 150ms', width: '2rem', '&:hover': {
+        React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions },
+            React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-0.2rem', opacity: 0.5, transition: 'opacity 150ms', width: '2rem', '&:hover': {
                         opacity: 1,
                     } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps.sx(theme)
@@ -1485,8 +1567,8 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                 ? ((_a = column.getFilterValue()) === null || _a === void 0 ? void 0 : _a[rangeFilterIndex]) || []
                 : (_b = column.getFilterValue()) !== null && _b !== void 0 ? _b : '';
     });
-    const handleChangeDebounced = React.useCallback(material.debounce((event) => {
-        let value = textFieldProps.type === 'date'
+    const handleChangeDebounced = React.useCallback(debounce__default["default"]((event) => {
+        const value = textFieldProps.type === 'date'
             ? event.target.valueAsDate
             : textFieldProps.type === 'number'
                 ? event.target.valueAsNumber
@@ -1541,7 +1623,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         return (React__default["default"].createElement(React__default["default"].Fragment, null, (_e = columnDef.Filter) === null || _e === void 0 ? void 0 : _e.call(columnDef, { column, header, rangeFilterIndex, table })));
     }
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.TextField, Object.assign({ fullWidth: true, inputProps: {
+        React__default["default"].createElement(TextField__default["default"], Object.assign({ fullWidth: true, inputProps: {
                 disabled: !!filterChipLabel,
                 sx: {
                     textOverflow: 'ellipsis',
@@ -1560,16 +1642,16 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
             }, margin: "none", placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter
                 ? undefined
                 : filterPlaceholder, onChange: handleChange, onClick: (e) => e.stopPropagation(), select: isSelectFilter || isMultiSelectFilter, value: filterValue, variant: "standard", InputProps: {
-                startAdornment: showChangeModeButton ? (React__default["default"].createElement(material.InputAdornment, { position: "start" },
-                    React__default["default"].createElement(material.Tooltip, { arrow: true, title: localization.changeFilterMode },
+                startAdornment: showChangeModeButton ? (React__default["default"].createElement(InputAdornment__default["default"], { position: "start" },
+                    React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.changeFilterMode },
                         React__default["default"].createElement("span", null,
-                            React__default["default"].createElement(material.IconButton, { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } },
+                            React__default["default"].createElement(IconButton__default["default"], { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } },
                                 React__default["default"].createElement(FilterListIcon, null)))),
-                    filterChipLabel && (React__default["default"].createElement(material.Chip, { onDelete: handleClearEmptyFilterChip, label: filterChipLabel })))) : null,
-                endAdornment: !filterChipLabel && (React__default["default"].createElement(material.InputAdornment, { position: "end" },
-                    React__default["default"].createElement(material.Tooltip, { arrow: true, placement: "right", title: (_g = localization.clearFilter) !== null && _g !== void 0 ? _g : '' },
+                    filterChipLabel && (React__default["default"].createElement(Chip__default["default"], { onDelete: handleClearEmptyFilterChip, label: filterChipLabel })))) : null,
+                endAdornment: !filterChipLabel && (React__default["default"].createElement(InputAdornment__default["default"], { position: "end" },
+                    React__default["default"].createElement(Tooltip__default["default"], { arrow: true, placement: "right", title: (_g = localization.clearFilter) !== null && _g !== void 0 ? _g : '' },
                         React__default["default"].createElement("span", null,
-                            React__default["default"].createElement(material.IconButton, { "aria-label": localization.clearFilter, disabled: !(filterValue === null || filterValue === void 0 ? void 0 : filterValue.length), onClick: handleClear, size: "small", sx: {
+                            React__default["default"].createElement(IconButton__default["default"], { "aria-label": localization.clearFilter, disabled: !(filterValue === null || filterValue === void 0 ? void 0 : filterValue.length), onClick: handleClear, size: "small", sx: {
                                     height: '1.75rem',
                                     width: '1.75rem',
                                 } },
@@ -1578,12 +1660,12 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                 displayEmpty: true,
                 multiple: isMultiSelectFilter,
                 renderValue: isMultiSelectFilter
-                    ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (React__default["default"].createElement(material.Box, { sx: { opacity: 0.5 } }, filterPlaceholder)) : (React__default["default"].createElement(material.Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' } }, selected === null || selected === void 0 ? void 0 : selected.map((value) => {
+                    ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (React__default["default"].createElement(Box__default["default"], { sx: { opacity: 0.5 } }, filterPlaceholder)) : (React__default["default"].createElement(Box__default["default"], { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' } }, selected === null || selected === void 0 ? void 0 : selected.map((value) => {
                         var _a;
                         const selectedValue = (_a = columnDef.filterSelectOptions) === null || _a === void 0 ? void 0 : _a.find((option) => option instanceof Object
                             ? option.value === value
                             : option === value);
-                        return (React__default["default"].createElement(material.Chip, { key: value, label: selectedValue instanceof Object
+                        return (React__default["default"].createElement(Chip__default["default"], { key: value, label: selectedValue instanceof Object
                                 ? selectedValue.text
                                 : selectedValue }));
                     })))
@@ -1603,8 +1685,8 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                 } }, ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx) instanceof Function
                 ? textFieldProps.sx(theme)
                 : textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx))) }),
-            (isSelectFilter || isMultiSelectFilter) && (React__default["default"].createElement(material.MenuItem, { divider: true, disabled: true, hidden: true, value: "" },
-                React__default["default"].createElement(material.Box, { sx: { opacity: 0.5 } }, filterPlaceholder))), (_h = columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterSelectOptions) === null || _h === void 0 ? void 0 :
+            (isSelectFilter || isMultiSelectFilter) && (React__default["default"].createElement(MenuItem__default["default"], { divider: true, disabled: true, hidden: true, value: "" },
+                React__default["default"].createElement(Box__default["default"], { sx: { opacity: 0.5 } }, filterPlaceholder))), (_h = columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterSelectOptions) === null || _h === void 0 ? void 0 :
             _h.map((option) => {
                 var _a;
                 let value;
@@ -1617,20 +1699,20 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                     value = option.value;
                     text = option.text;
                 }
-                return (React__default["default"].createElement(material.MenuItem, { key: value, sx: {
+                return (React__default["default"].createElement(MenuItem__default["default"], { key: value, sx: {
                         display: 'flex',
                         m: 0,
                         alignItems: 'center',
                         gap: '0.5rem',
                     }, value: value },
-                    isMultiSelectFilter && (React__default["default"].createElement(material.Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })),
+                    isMultiSelectFilter && (React__default["default"].createElement(Checkbox__default["default"], { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })),
                     text));
             })),
         React__default["default"].createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table, setFilterValue: setFilterValue })));
 };
 
 const MRT_FilterRangeFields = ({ header, table }) => {
-    return (React__default["default"].createElement(material.Box, { sx: { display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' } },
+    return (React__default["default"].createElement(Box__default["default"], { sx: { display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' } },
         React__default["default"].createElement(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }),
         React__default["default"].createElement(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })));
 };
@@ -1654,8 +1736,8 @@ const MRT_FilterCheckbox = ({ column, table }) => {
         : columnDef.muiTableHeadCellFilterCheckboxProps;
     const checkboxProps = Object.assign(Object.assign({}, mTableHeadCellFilterCheckboxProps), mcTableHeadCellFilterCheckboxProps);
     const filterLabel = (_a = localization.filterByColumn) === null || _a === void 0 ? void 0 : _a.replace('{column}', columnDef.header);
-    return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : filterLabel },
-        React__default["default"].createElement(material.FormControlLabel, { control: React__default["default"].createElement(material.Checkbox, Object.assign({ checked: column.getFilterValue() === 'true', indeterminate: column.getFilterValue() === undefined, color: column.getFilterValue() === undefined ? 'default' : 'primary', size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onClick: (e) => {
+    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : filterLabel },
+        React__default["default"].createElement(FormControlLabel__default["default"], { control: React__default["default"].createElement(Checkbox__default["default"], Object.assign({ checked: column.getFilterValue() === 'true', indeterminate: column.getFilterValue() === undefined, color: column.getFilterValue() === undefined ? 'default' : 'primary', size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onClick: (e) => {
                     var _a;
                     e.stopPropagation();
                     (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
@@ -1677,7 +1759,7 @@ const MRT_TableHeadCellFilterContainer = ({ header, table, }) => {
     const { showColumnFilters } = getState();
     const { column } = header;
     const { columnDef } = column;
-    return (React__default["default"].createElement(material.Collapse, { in: showColumnFilters, mountOnEnter: true, unmountOnExit: true }, columnDef.filterVariant === 'checkbox' ? (React__default["default"].createElement(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range' ||
+    return (React__default["default"].createElement(Collapse__default["default"], { in: showColumnFilters, mountOnEnter: true, unmountOnExit: true }, columnDef.filterVariant === 'checkbox' ? (React__default["default"].createElement(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range' ||
         ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (React__default["default"].createElement(MRT_FilterRangeFields, { header: header, table: table })) : (React__default["default"].createElement(MRT_FilterTextField, { header: header, table: table }))));
 };
 
@@ -1699,12 +1781,12 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
         ? column.getFilterValue().join(`" ${isRangeFilter ? localization.and : localization.or} "`)
         : column.getFilterValue()}"`)
         .replace('" "', '');
-    return (React__default["default"].createElement(material.Grow, { unmountOnExit: true, in: (!!column.getFilterValue() && !isRangeFilter) ||
+    return (React__default["default"].createElement(Grow__default["default"], { 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]))) },
-        React__default["default"].createElement(material.Box, { component: "span", sx: { flex: '0 0' } },
-            React__default["default"].createElement(material.Tooltip, { arrow: true, placement: "top", title: filterTooltip },
-                React__default["default"].createElement(material.IconButton, { disableRipple: true, onClick: (event) => {
+        React__default["default"].createElement(Box__default["default"], { component: "span", sx: { flex: '0 0' } },
+            React__default["default"].createElement(Tooltip__default["default"], { arrow: true, placement: "top", title: filterTooltip },
+                React__default["default"].createElement(IconButton__default["default"], { disableRipple: true, onClick: (event) => {
                         event.stopPropagation();
                     }, size: "small", sx: {
                         m: 0,
@@ -1757,7 +1839,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
     const { column } = header;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
-    return (React__default["default"].createElement(material.Box, { onDoubleClick: () => column.resetSize(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: (theme) => ({
+    return (React__default["default"].createElement(Box__default["default"], { onDoubleClick: () => column.resetSize(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: (theme) => ({
             cursor: 'col-resize',
             mr: density === 'compact' ? '-0.5rem' : '-1rem',
             position: 'absolute',
@@ -1773,7 +1855,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
                     (columnResizeMode === 'onChange' ? 16 : 1)}px)`
                 : undefined,
         } },
-        React__default["default"].createElement(material.Divider, { flexItem: true, orientation: "vertical", sx: {
+        React__default["default"].createElement(Divider__default["default"], { flexItem: true, orientation: "vertical", sx: {
                 borderRadius: '2px',
                 borderWidth: '2px',
                 height: showColumnFilters && columnDefType === 'data' ? '3.5rem' : '1.5rem',
@@ -1790,13 +1872,13 @@ const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
     const { options: { localization }, } = table;
     const { column } = header;
     const { columnDef } = column;
-    const sortTooltip = !!column.getIsSorted()
+    const sortTooltip = column.getIsSorted()
         ? column.getIsSorted() === 'desc'
             ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
             : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
         : localization.unsorted;
-    return (React__default["default"].createElement(material.Tooltip, { arrow: true, placement: "top", title: sortTooltip },
-        React__default["default"].createElement(material.TableSortLabel, { "aria-label": sortTooltip, active: !!column.getIsSorted(), direction: column.getIsSorted()
+    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, placement: "top", title: sortTooltip },
+        React__default["default"].createElement(TableSortLabel__default["default"], { "aria-label": sortTooltip, active: !!column.getIsSorted(), direction: column.getIsSorted()
                 ? column.getIsSorted()
                 : undefined, sx: {
                 flex: '0 0',
@@ -1809,7 +1891,7 @@ const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
 
 const MRT_TableHeadCell = ({ header, table }) => {
     var _a, _b, _c, _d;
-    const theme = material.useTheme();
+    const theme = styles.useTheme();
     const { getState, options: { enableColumnActions, enableColumnDragging, enableColumnOrdering, enableGrouping, enableMultiSort, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
     const { density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
     const { column } = header;
@@ -1868,7 +1950,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
             table,
         })
         : (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header) !== null && _b !== void 0 ? _b : columnDef.header;
-    return (React__default["default"].createElement(material.TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
+    return (React__default["default"].createElement(TableCell__default["default"], Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
             if (node) {
                 tableHeadCellRefs.current[column.id] = node;
             }
@@ -1899,7 +1981,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
             tableCellProps,
             theme,
         })), draggingBorders)) }),
-        header.isPlaceholder ? null : (React__default["default"].createElement(material.Box, { className: "Mui-TableHeadCell-Content", sx: {
+        header.isPlaceholder ? null : (React__default["default"].createElement(Box__default["default"], { className: "Mui-TableHeadCell-Content", sx: {
                 alignItems: 'flex-start',
                 display: 'flex',
                 flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
@@ -1911,7 +1993,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
                 position: 'relative',
                 width: '100%',
             } },
-            React__default["default"].createElement(material.Box, { className: "Mui-TableHeadCell-Content-Labels", onClick: column.getToggleSortingHandler(), sx: {
+            React__default["default"].createElement(Box__default["default"], { className: "Mui-TableHeadCell-Content-Labels", onClick: column.getToggleSortingHandler(), sx: {
                     alignItems: 'center',
                     cursor: column.getCanSort() && columnDefType !== 'group'
                         ? 'pointer'
@@ -1923,14 +2005,14 @@ const MRT_TableHeadCell = ({ header, table }) => {
                         ? `${headerPL}rem`
                         : undefined,
                 } },
-                React__default["default"].createElement(material.Box, { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
+                React__default["default"].createElement(Box__default["default"], { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
                         overflow: columnDefType === 'data' ? 'hidden' : undefined,
                         textOverflow: 'ellipsis',
                         whiteSpace: ((_d = (_c = columnDef.header) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) < 20 ? 'nowrap' : 'normal',
                     }, title: columnDefType === 'data' ? columnDef.header : undefined }, headerElement),
                 column.getCanSort() && (React__default["default"].createElement(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps })),
                 column.getCanFilter() && (React__default["default"].createElement(MRT_TableHeadCellFilterLabel, { header: header, table: table }))),
-            columnDefType !== 'group' && (React__default["default"].createElement(material.Box, { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' } },
+            columnDefType !== 'group' && (React__default["default"].createElement(Box__default["default"], { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' } },
                 showDragHandle && (React__default["default"].createElement(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
                         current: tableHeadCellRefs.current[column.id],
                     } })),
@@ -1944,7 +2026,7 @@ const MRT_TableHeadRow = ({ headerGroup, table }) => {
     const tableRowProps = muiTableHeadRowProps instanceof Function
         ? muiTableHeadRowProps({ headerGroup, table })
         : muiTableHeadRowProps;
-    return (React__default["default"].createElement(material.TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ boxShadow: `4px 0 8px ${material.alpha(theme.palette.common.black, 0.1)}`, backgroundColor: material.lighten(theme.palette.background.default, 0.04) }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
+    return (React__default["default"].createElement(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ boxShadow: `4px 0 8px ${styles.alpha(theme.palette.common.black, 0.1)}`, backgroundColor: styles.lighten(theme.palette.background.default, 0.04) }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
             ? tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx(theme)
             : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }), headerGroup.headers.map((header, index) => (React__default["default"].createElement(MRT_TableHeadCell, { header: header, key: header.id || index, table: table })))));
 };
@@ -1956,7 +2038,7 @@ const MRT_TableHead = ({ table }) => {
         ? muiTableHeadProps({ table })
         : muiTableHeadProps;
     const stickyHeader = enableStickyHeader || enableRowVirtualization || isFullScreen;
-    return (React__default["default"].createElement(material.TableHead, Object.assign({}, tableHeadProps, { sx: (theme) => (Object.assign({ opacity: 0.97, position: stickyHeader ? 'sticky' : undefined, zIndex: stickyHeader ? 2 : undefined }, ((tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx) instanceof Function
+    return (React__default["default"].createElement(TableHead__default["default"], Object.assign({}, tableHeadProps, { sx: (theme) => (Object.assign({ opacity: 0.97, position: stickyHeader ? 'sticky' : undefined, zIndex: stickyHeader ? 2 : undefined }, ((tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx) instanceof Function
             ? tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx(theme)
             : tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx))) }), getHeaderGroups().map((headerGroup) => (React__default["default"].createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
 };
@@ -2009,7 +2091,7 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
     if (columnDef.Edit) {
         return React__default["default"].createElement(React__default["default"].Fragment, null, (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table }));
     }
-    return (React__default["default"].createElement(material.TextField, Object.assign({ disabled: columnDef.enableEditing === false, fullWidth: true, inputRef: (inputRef) => {
+    return (React__default["default"].createElement(TextField__default["default"], Object.assign({ disabled: columnDef.enableEditing === false, fullWidth: true, inputRef: (inputRef) => {
             if (inputRef) {
                 editInputRefs.current[column.id] = inputRef;
                 if (textFieldProps.inputRef) {
@@ -2047,8 +2129,8 @@ const MRT_CopyButton = ({ cell, children, table, }) => {
         })
         : columnDef.muiTableBodyCellCopyButtonProps;
     const buttonProps = Object.assign(Object.assign({}, mTableBodyCellCopyButtonProps), mcTableBodyCellCopyButtonProps);
-    return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _a !== void 0 ? _a : (copied ? localization.copiedToClipboard : localization.clickToCopy) },
-        React__default["default"].createElement(material.Button, Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx) instanceof Function
+    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _a !== void 0 ? _a : (copied ? localization.copiedToClipboard : localization.clickToCopy) },
+        React__default["default"].createElement(Button__default["default"], Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx) instanceof Function
                 ? buttonProps.sx(theme)
                 : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx))), title: undefined }), children)));
 };
@@ -2099,7 +2181,7 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
 
 const MRT_TableBodyCell = ({ cell, enableHover, numRows, rowIndex, rowRef, table, }) => {
     var _a, _b;
-    const theme = material.useTheme();
+    const theme = styles.useTheme();
     const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
     const { draggingColumn, editingCell, editingRow, hoveredColumn, density, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
@@ -2167,7 +2249,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, numRows, rowIndex, rowRef, table
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    return (React__default["default"].createElement(material.TableCell, Object.assign({}, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => (Object.assign(Object.assign({ cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit', overflow: 'hidden', p: density === 'compact'
+    return (React__default["default"].createElement(TableCell__default["default"], Object.assign({}, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => (Object.assign(Object.assign({ cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit', overflow: 'hidden', p: density === 'compact'
                 ? columnDefType === 'display'
                     ? '0 0.5rem'
                     : '0.5rem'
@@ -2190,11 +2272,11 @@ const MRT_TableBodyCell = ({ cell, enableHover, numRows, rowIndex, rowRef, table
                     columnDef.enableEditing !== false &&
                     ['table', 'cell'].includes(editingMode !== null && editingMode !== void 0 ? editingMode : '')
                     ? theme.palette.mode === 'dark'
-                        ? `${material.lighten(theme.palette.background.default, 0.2)} !important`
-                        : `${material.darken(theme.palette.background.default, 0.1)} !important`
+                        ? `${styles.lighten(theme.palette.background.default, 0.2)} !important`
+                        : `${styles.darken(theme.palette.background.default, 0.1)} !important`
                     : undefined,
             } }, getCommonCellStyles({ column, table, theme, tableCellProps })), draggingBorders)) }),
-        React__default["default"].createElement(React__default["default"].Fragment, null, cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (React__default["default"].createElement(material.Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
+        React__default["default"].createElement(React__default["default"].Fragment, null, cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (React__default["default"].createElement(Skeleton__default["default"], Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
             rowNumberMode === 'static' &&
             column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (React__default["default"].createElement(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
             (column.id === 'mrt-row-select' ||
@@ -2218,14 +2300,14 @@ const MRT_TableDetailPanel = ({ row, table }) => {
     const tableCellProps = muiTableDetailPanelProps instanceof Function
         ? muiTableDetailPanelProps({ row, table })
         : muiTableDetailPanelProps;
-    return (React__default["default"].createElement(material.TableRow, Object.assign({}, tableRowProps),
-        React__default["default"].createElement(material.TableCell, Object.assign({ colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ borderBottom: !row.getIsExpanded() ? 'none' : undefined, pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
+    return (React__default["default"].createElement(TableRow__default["default"], Object.assign({}, tableRowProps),
+        React__default["default"].createElement(TableCell__default["default"], Object.assign({ colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ borderBottom: !row.getIsExpanded() ? 'none' : undefined, pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
                 ? tableCellProps.sx(theme)
-                : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }), renderDetailPanel && (React__default["default"].createElement(material.Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true }, !isLoading && renderDetailPanel({ row, table }))))));
+                : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }), renderDetailPanel && (React__default["default"].createElement(Collapse__default["default"], { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true }, !isLoading && renderDetailPanel({ row, table }))))));
 };
 
 const MRT_TableBodyRow = ({ numRows, row, rowIndex, table, virtualRow, }) => {
-    const theme = material.useTheme();
+    const theme = styles.useTheme();
     const { getIsSomeColumnsPinned, getState, options: { enableRowOrdering, memoMode, muiTableBodyRowProps, renderDetailPanel, }, setHoveredRow, } = table;
     const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } = getState();
     const tableRowProps = muiTableBodyRowProps instanceof Function
@@ -2248,16 +2330,16 @@ const MRT_TableBodyRow = ({ numRows, row, rowIndex, table, virtualRow, }) => {
         }
         : undefined;
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.TableRow, Object.assign({ onDragEnter: handleDragEnter, hover: true, selected: row.getIsSelected(), ref: (node) => {
+        React__default["default"].createElement(TableRow__default["default"], Object.assign({ onDragEnter: handleDragEnter, hover: true, selected: row.getIsSelected(), ref: (node) => {
                 rowRef.current = node;
                 if (virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.measureRef) {
                     virtualRow.measureRef = node;
                 }
-            } }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: material.lighten(theme.palette.background.default, 0.06), opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, transition: 'all 150ms ease-in-out', '&:hover td': {
+            } }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.06), opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, transition: 'all 150ms ease-in-out', '&:hover td': {
                     backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned()
                         ? theme.palette.mode === 'dark'
-                            ? `${material.lighten(theme.palette.background.default, 0.12)}`
-                            : `${material.darken(theme.palette.background.default, 0.05)}`
+                            ? `${styles.lighten(theme.palette.background.default, 0.12)}`
+                            : `${styles.darken(theme.palette.background.default, 0.05)}`
                         : undefined,
                 } }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
                 ? tableRowProps.sx(theme)
@@ -2339,8 +2421,8 @@ const MRT_TableBody = ({ table }) => {
     let paddingTop = 0;
     let paddingBottom = 0;
     if (enableRowVirtualization) {
-        paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
-        paddingBottom = !!virtualRows.length
+        paddingTop = virtualRows.length ? virtualRows[0].start : 0;
+        paddingBottom = virtualRows.length
             ? virtualizer.totalSize - virtualRows[virtualRows.length - 1].end
             : 0;
     }
@@ -2350,9 +2432,9 @@ const MRT_TableBody = ({ table }) => {
     //     ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
     //     : 0;
     // }
-    return (React__default["default"].createElement(material.TableBody, Object.assign({}, tableBodyProps), !rows.length ? (React__default["default"].createElement("tr", null,
+    return (React__default["default"].createElement(TableBody__default["default"], Object.assign({}, tableBodyProps), !rows.length ? (React__default["default"].createElement("tr", null,
         React__default["default"].createElement("td", { colSpan: table.getVisibleLeafColumns().length },
-            React__default["default"].createElement(material.Typography, { sx: {
+            React__default["default"].createElement(Typography__default["default"], { sx: {
                     color: 'text.secondary',
                     fontStyle: 'italic',
                     maxWidth: `min(100vw, ${(_a = tablePaperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth}px)`,
@@ -2399,7 +2481,7 @@ const MRT_TableFooterCell = ({ footer, table }) => {
         ? columnDef.muiTableFooterCellProps({ column, table })
         : columnDef.muiTableFooterCellProps;
     const tableCellProps = Object.assign(Object.assign({}, mTableFooterCellProps), mcTableFooterCellProps);
-    return (React__default["default"].createElement(material.TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ fontWeight: 'bold', p: density === 'compact'
+    return (React__default["default"].createElement(TableCell__default["default"], Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ fontWeight: 'bold', p: density === 'compact'
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? '1rem'
@@ -2426,7 +2508,7 @@ const MRT_TableFooterRow = ({ footerGroup, table }) => {
     const tableRowProps = muiTableFooterRowProps instanceof Function
         ? muiTableFooterRowProps({ footerGroup, table })
         : muiTableFooterRowProps;
-    return (React__default["default"].createElement(material.TableRow, Object.assign({}, tableRowProps), footerGroup.headers.map((footer) => (React__default["default"].createElement(MRT_TableFooterCell, { footer: footer, key: footer.id, table: table })))));
+    return (React__default["default"].createElement(TableRow__default["default"], Object.assign({}, tableRowProps), footerGroup.headers.map((footer) => (React__default["default"].createElement(MRT_TableFooterCell, { footer: footer, key: footer.id, table: table })))));
 };
 
 const MRT_TableFooter = ({ table }) => {
@@ -2436,7 +2518,7 @@ const MRT_TableFooter = ({ table }) => {
         ? muiTableFooterProps({ table })
         : muiTableFooterProps;
     const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
-    return (React__default["default"].createElement(material.TableFooter, Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ backgroundColor: material.lighten(theme.palette.background.default, 0.06), bottom: stickFooter ? 0 : undefined, opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
+    return (React__default["default"].createElement(TableFooter__default["default"], Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.06), bottom: stickFooter ? 0 : undefined, opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
                 ? theme.palette.mode === 'light'
                     ? `1px solid ${theme.palette.grey[300]}`
                     : `1px solid ${theme.palette.grey[700]}`
@@ -2451,7 +2533,7 @@ const MRT_Table = ({ table }) => {
     const tableProps = muiTableProps instanceof Function
         ? muiTableProps({ table })
         : muiTableProps;
-    return (React__default["default"].createElement(material.Table, Object.assign({ stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto' }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
+    return (React__default["default"].createElement(Table__default["default"], Object.assign({ stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto' }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
             ? tableProps.sx(theme)
             : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))) }),
         enableTableHead && React__default["default"].createElement(MRT_TableHead, { table: table }),
@@ -2477,7 +2559,7 @@ const MRT_TableContainer = ({ table }) => {
             : 0;
         setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
     });
-    return (React__default["default"].createElement(material.TableContainer, Object.assign({}, tableContainerProps, { ref: (ref) => {
+    return (React__default["default"].createElement(TableContainer__default["default"], Object.assign({}, tableContainerProps, { ref: (ref) => {
             tableContainerRef.current = ref;
             if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
                 //@ts-ignore
@@ -2499,7 +2581,7 @@ const MRT_TablePaper = ({ table }) => {
     const tablePaperProps = muiTablePaperProps instanceof Function
         ? muiTablePaperProps({ table })
         : muiTablePaperProps;
-    return (React__default["default"].createElement(material.Paper, Object.assign({ elevation: 2 }, tablePaperProps, { ref: (ref) => {
+    return (React__default["default"].createElement(Paper__default["default"], Object.assign({ elevation: 2 }, tablePaperProps, { ref: (ref) => {
             tablePaperRef.current = ref;
             if (tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.ref) {
                 //@ts-ignore
@@ -2530,11 +2612,11 @@ const MRT_TablePaper = ({ table }) => {
 
 const MRT_EditRowModal = ({ open, row, table, }) => {
     const { options: { localization }, } = table;
-    return (React__default["default"].createElement(material.Dialog, { open: open },
-        React__default["default"].createElement(material.DialogTitle, { textAlign: "center" }, localization.edit),
-        React__default["default"].createElement(material.DialogContent, null,
+    return (React__default["default"].createElement(Dialog__default["default"], { open: open },
+        React__default["default"].createElement(DialogTitle__default["default"], { textAlign: "center" }, localization.edit),
+        React__default["default"].createElement(DialogContent__default["default"], null,
             React__default["default"].createElement("form", { onSubmit: (e) => e.preventDefault() },
-                React__default["default"].createElement(material.Stack, { sx: {
+                React__default["default"].createElement(Stack__default["default"], { sx: {
                         gap: '1.5rem',
                         minWidth: { xs: '300px', sm: '360px', md: '400px' },
                         pt: '1rem',
@@ -2543,7 +2625,7 @@ const MRT_EditRowModal = ({ open, row, table, }) => {
                     .getAllCells()
                     .filter((cell) => cell.column.columnDef.columnDefType === 'data')
                     .map((cell) => (React__default["default"].createElement(MRT_EditCellTextField, { cell: cell, key: cell.id, showLabel: true, table: table })))))),
-        React__default["default"].createElement(material.DialogActions, { sx: { p: '1.25rem' } },
+        React__default["default"].createElement(DialogActions__default["default"], { sx: { p: '1.25rem' } },
             React__default["default"].createElement(MRT_EditActionButtons, { row: row, table: table, variant: "text" }))));
 };
 
@@ -2700,7 +2782,7 @@ const MRT_TableRoot = (props) => {
         }
     }, [table.getState().isFullScreen]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.Dialog, { PaperComponent: material.Box, TransitionComponent: material.Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 },
+        React__default["default"].createElement(Dialog__default["default"], { PaperComponent: Box__default["default"], TransitionComponent: Grow__default["default"], disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 },
             React__default["default"].createElement(MRT_TablePaper, { table: table })),
         !table.getState().isFullScreen && (React__default["default"].createElement(MRT_TablePaper, { table: table })),
         editingRow && props.editingMode === 'modal' && (React__default["default"].createElement(MRT_EditRowModal, { row: editingRow, table: table, open: true }))));