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

package/dist/cjs/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var Paper = require('@mui/material/Paper');
 var react = require('react');
@@ -15,10 +13,10 @@ var styles = require('@mui/material/styles');
 var Skeleton = require('@mui/material/Skeleton');
 var TableCell = require('@mui/material/TableCell');
 var Box = require('@mui/material/Box');
+var reactTable = require('@tanstack/react-table');
 var highlightWords = require('highlight-words');
 var IconButton = require('@mui/material/IconButton');
 var Tooltip = require('@mui/material/Tooltip');
-var reactTable = require('@tanstack/react-table');
 var Button = require('@mui/material/Button');
 var MenuItem = require('@mui/material/MenuItem');
 var TextField = require('@mui/material/TextField');
@@ -26,6 +24,7 @@ var Collapse = require('@mui/material/Collapse');
 var matchSorterUtils = require('@tanstack/match-sorter-utils');
 var TableFooter = require('@mui/material/TableFooter');
 var TableHead = require('@mui/material/TableHead');
+var material = require('@mui/material');
 var ListItemIcon = require('@mui/material/ListItemIcon');
 var Menu = require('@mui/material/Menu');
 var Checkbox = require('@mui/material/Checkbox');
@@ -93,91 +92,6 @@ var SyncAltIcon = require('@mui/icons-material/SyncAlt');
 var ViewColumnIcon = require('@mui/icons-material/ViewColumn');
 var VisibilityOffIcon = require('@mui/icons-material/VisibilityOff');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var Paper__default = /*#__PURE__*/_interopDefaultLegacy(Paper);
-var TableContainer__default = /*#__PURE__*/_interopDefaultLegacy(TableContainer);
-var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table);
-var TableBody__default = /*#__PURE__*/_interopDefaultLegacy(TableBody);
-var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
-var TableRow__default = /*#__PURE__*/_interopDefaultLegacy(TableRow);
-var Skeleton__default = /*#__PURE__*/_interopDefaultLegacy(Skeleton);
-var TableCell__default = /*#__PURE__*/_interopDefaultLegacy(TableCell);
-var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
-var highlightWords__default = /*#__PURE__*/_interopDefaultLegacy(highlightWords);
-var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
-var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
-var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
-var MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(MenuItem);
-var TextField__default = /*#__PURE__*/_interopDefaultLegacy(TextField);
-var Collapse__default = /*#__PURE__*/_interopDefaultLegacy(Collapse);
-var TableFooter__default = /*#__PURE__*/_interopDefaultLegacy(TableFooter);
-var TableHead__default = /*#__PURE__*/_interopDefaultLegacy(TableHead);
-var ListItemIcon__default = /*#__PURE__*/_interopDefaultLegacy(ListItemIcon);
-var Menu__default = /*#__PURE__*/_interopDefaultLegacy(Menu);
-var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
-var FormControlLabel__default = /*#__PURE__*/_interopDefaultLegacy(FormControlLabel);
-var Autocomplete__default = /*#__PURE__*/_interopDefaultLegacy(Autocomplete);
-var Chip__default = /*#__PURE__*/_interopDefaultLegacy(Chip);
-var InputAdornment__default = /*#__PURE__*/_interopDefaultLegacy(InputAdornment);
-var FormHelperText__default = /*#__PURE__*/_interopDefaultLegacy(FormHelperText);
-var Slider__default = /*#__PURE__*/_interopDefaultLegacy(Slider);
-var Stack__default = /*#__PURE__*/_interopDefaultLegacy(Stack);
-var Grow__default = /*#__PURE__*/_interopDefaultLegacy(Grow);
-var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
-var Divider__default = /*#__PURE__*/_interopDefaultLegacy(Divider);
-var Badge__default = /*#__PURE__*/_interopDefaultLegacy(Badge);
-var TableSortLabel__default = /*#__PURE__*/_interopDefaultLegacy(TableSortLabel);
-var useMediaQuery__default = /*#__PURE__*/_interopDefaultLegacy(useMediaQuery);
-var LinearProgress__default = /*#__PURE__*/_interopDefaultLegacy(LinearProgress);
-var InputLabel__default = /*#__PURE__*/_interopDefaultLegacy(InputLabel);
-var Pagination__default = /*#__PURE__*/_interopDefaultLegacy(Pagination);
-var PaginationItem__default = /*#__PURE__*/_interopDefaultLegacy(PaginationItem);
-var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
-var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
-var AlertTitle__default = /*#__PURE__*/_interopDefaultLegacy(AlertTitle);
-var Radio__default = /*#__PURE__*/_interopDefaultLegacy(Radio);
-var Fade__default = /*#__PURE__*/_interopDefaultLegacy(Fade);
-var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
-var CircularProgress__default = /*#__PURE__*/_interopDefaultLegacy(CircularProgress);
-var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
-var DialogActions__default = /*#__PURE__*/_interopDefaultLegacy(DialogActions);
-var DialogContent__default = /*#__PURE__*/_interopDefaultLegacy(DialogContent);
-var DialogTitle__default = /*#__PURE__*/_interopDefaultLegacy(DialogTitle);
-var ArrowDownwardIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownwardIcon);
-var ArrowRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowRightIcon);
-var CancelIcon__default = /*#__PURE__*/_interopDefaultLegacy(CancelIcon);
-var ChevronLeftIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronLeftIcon);
-var ChevronRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightIcon);
-var ClearAllIcon__default = /*#__PURE__*/_interopDefaultLegacy(ClearAllIcon);
-var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
-var DensityLargeIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensityLargeIcon);
-var DensityMediumIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensityMediumIcon);
-var DensitySmallIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensitySmallIcon);
-var DragHandleIcon__default = /*#__PURE__*/_interopDefaultLegacy(DragHandleIcon);
-var DynamicFeedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DynamicFeedIcon);
-var EditIcon__default = /*#__PURE__*/_interopDefaultLegacy(EditIcon);
-var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
-var FilterAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterAltIcon);
-var FilterListIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterListIcon);
-var FilterListOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterListOffIcon);
-var FirstPageIcon__default = /*#__PURE__*/_interopDefaultLegacy(FirstPageIcon);
-var FullscreenIcon__default = /*#__PURE__*/_interopDefaultLegacy(FullscreenIcon);
-var FullscreenExitIcon__default = /*#__PURE__*/_interopDefaultLegacy(FullscreenExitIcon);
-var KeyboardDoubleArrowDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardDoubleArrowDownIcon);
-var LastPageIcon__default = /*#__PURE__*/_interopDefaultLegacy(LastPageIcon);
-var MoreHorizIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizIcon);
-var MoreVertIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreVertIcon);
-var PushPinIcon__default = /*#__PURE__*/_interopDefaultLegacy(PushPinIcon);
-var RestartAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(RestartAltIcon);
-var SaveIcon__default = /*#__PURE__*/_interopDefaultLegacy(SaveIcon);
-var SearchIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchIcon);
-var SearchOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchOffIcon);
-var SortIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortIcon);
-var SyncAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(SyncAltIcon);
-var ViewColumnIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewColumnIcon);
-var VisibilityOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffIcon);
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -192,6 +106,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
 function __rest(s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
@@ -205,75 +121,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-const allowedTypes = ['string', 'number'];
-const MRT_TableBodyCellValue = ({ cell, table, }) => {
-    var _a, _b, _c;
-    const { getState, options: { enableFilterMatchHighlighting }, } = table;
-    const { column, row } = cell;
-    const { columnDef } = column;
-    const { globalFilter, globalFilterFn } = getState();
-    const filterValue = column.getFilterValue();
-    let renderedCellValue = cell.getIsAggregated() && columnDef.AggregatedCell
-        ? columnDef.AggregatedCell({
-            cell,
-            column,
-            row,
-            table,
-        })
-        : row.getIsGrouped() && !cell.getIsGrouped()
-            ? null
-            : cell.getIsGrouped() && columnDef.GroupedCell
-                ? columnDef.GroupedCell({
-                    cell,
-                    column,
-                    row,
-                    table,
-                })
-                : undefined;
-    const isGroupedValue = renderedCellValue !== undefined;
-    if (!isGroupedValue) {
-        renderedCellValue = cell.renderValue();
-    }
-    if (enableFilterMatchHighlighting &&
-        columnDef.enableFilterMatchHighlighting !== false &&
-        renderedCellValue &&
-        allowedTypes.includes(typeof renderedCellValue) &&
-        ((filterValue &&
-            allowedTypes.includes(typeof filterValue) &&
-            columnDef.filterVariant === 'text') ||
-            (globalFilter &&
-                allowedTypes.includes(typeof globalFilter) &&
-                column.getCanGlobalFilter()))) {
-        const chunks = highlightWords__default["default"] === null || highlightWords__default["default"] === void 0 ? void 0 : highlightWords__default["default"]({
-            matchExactly: (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
-            query: ((_a = filterValue !== null && filterValue !== void 0 ? filterValue : globalFilter) !== null && _a !== void 0 ? _a : '').toString(),
-            text: renderedCellValue === null || renderedCellValue === void 0 ? void 0 : renderedCellValue.toString(),
-        });
-        if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_b = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _b === void 0 ? void 0 : _b.match)) {
-            renderedCellValue = (jsxRuntime.jsx("span", { "aria-label": renderedCellValue, role: "note", children: (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (jsxRuntime.jsx(Box__default["default"], { "aria-hidden": "true", component: "span", sx: match
-                        ? {
-                            backgroundColor: (theme) => theme.palette.mode === 'dark'
-                                ? styles.darken(theme.palette.warning.dark, 0.25)
-                                : styles.lighten(theme.palette.warning.light, 0.5),
-                            borderRadius: '2px',
-                            color: (theme) => theme.palette.mode === 'dark' ? 'white' : 'black',
-                            padding: '2px 1px',
-                        }
-                        : undefined, children: text }, key)))) !== null && _c !== void 0 ? _c : renderedCellValue }));
-        }
-    }
-    if (columnDef.Cell && !isGroupedValue) {
-        renderedCellValue = columnDef.Cell({
-            cell,
-            column,
-            renderedCellValue,
-            row,
-            table,
-        });
-    }
-    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderedCellValue });
-};
-
 const getColumnId = (columnDef) => { var _a, _b, _c, _d; return (_d = (_a = columnDef.id) !== null && _a !== void 0 ? _a : (_c = (_b = columnDef.accessorKey) === null || _b === void 0 ? void 0 : _b.toString) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : columnDef.header; };
 const getAllLeafColumnDefs = (columns) => {
     const allLeafColumnDefs = [];
@@ -440,7 +287,41 @@ const getCanRankRows = (table) => {
         expanded !== true &&
         !Object.values(expanded).some(Boolean));
 };
-const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
+const parseFromValuesOrFunc = (fn, arg) => (fn instanceof Function ? fn(arg) : fn);
+const flexRender = reactTable.flexRender;
+const createRow = (table, originalRow) => reactTable.createRow(table, 'mrt-row-create', originalRow !== null && originalRow !== void 0 ? originalRow : Object.assign({}, ...getAllLeafColumnDefs(table.options.columns).map((col) => ({
+    [getColumnId(col)]: '',
+}))), -1, 0);
+const extraIndexRangeExtractor = (range, draggingIndex) => {
+    const newIndexs = reactVirtual.defaultRangeExtractor(range);
+    if (draggingIndex >= 0 &&
+        draggingIndex < Math.max(range.startIndex - range.overscan, 0)) {
+        newIndexs.unshift(draggingIndex);
+    }
+    if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) {
+        newIndexs.push(draggingIndex);
+    }
+    return newIndexs;
+};
+function createMRTColumnHelper() {
+    return {
+        accessor: (accessor, column) => {
+            return typeof accessor === 'function'
+                ? Object.assign(Object.assign({}, column), { accessorFn: accessor })
+                : Object.assign(Object.assign({}, column), { accessorKey: accessor });
+        },
+        display: (column) => column,
+        group: (column) => column,
+    };
+}
+
+const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
+const getMRTTheme = (table, theme) => (Object.assign({ baseBackgroundColor: theme.palette.mode === 'dark'
+        ? styles.lighten(theme.palette.background.default, 0.05)
+        : theme.palette.background.default, draggingBorderColor: theme.palette.primary.main, matchHighlightColor: theme.palette.mode === 'dark'
+        ? styles.darken(theme.palette.warning.dark, 0.25)
+        : styles.lighten(theme.palette.warning.light, 0.5), pinnedRowBackgroundColor: styles.alpha(theme.palette.primary.main, 0.1), selectedRowBackgroundColor: styles.alpha(theme.palette.primary.main, 0.2) }, table.options.mrtTheme));
+const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { options: { layoutMode }, } = table;
     const widthStyles = {
@@ -454,11 +335,11 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
         widthStyles.flex = '0 0 auto';
     }
     return Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
-            ? styles.alpha(styles.lighten(theme.palette.background.default, 0.04), 0.97)
+            ? styles.alpha(styles.darken(getMRTTheme(table, theme).baseBackgroundColor, theme.palette.mode === 'dark' ? 0.05 : 0.01), 0.97)
             : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn(table, column)
-            ? `-4px 0 8px -6px ${styles.alpha(theme.palette.common.black, 0.2)} inset`
+            ? `-4px 0 8px -6px ${styles.alpha(theme.palette.grey[700], 0.5)} inset`
             : getIsFirstRightPinnedColumn(column)
-                ? `4px 0 8px -6px ${styles.alpha(theme.palette.common.black, 0.2)} inset`
+                ? `4px 0 8px -6px ${styles.alpha(theme.palette.grey[700], 0.5)} inset`
                 : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, left: column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined, ml: table.options.enableColumnVirtualization &&
@@ -483,61 +364,93 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
             ? 'none'
             : `padding 150ms ease-in-out` }, widthStyles), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme));
 };
-const MRT_DefaultColumn = {
-    filterVariant: 'text',
-    maxSize: 1000,
-    minSize: 40,
-    size: 180,
-};
-const MRT_DefaultDisplayColumn = {
-    columnDefType: 'display',
-    enableClickToCopy: false,
-    enableColumnActions: false,
-    enableColumnDragging: false,
-    enableColumnFilter: false,
-    enableColumnOrdering: false,
-    enableEditing: false,
-    enableGlobalFilter: false,
-    enableGrouping: false,
-    enableHiding: false,
-    enableResizing: false,
-    enableSorting: false,
-};
-const parseFromValuesOrFunc = (fn, arg) => (fn instanceof Function ? fn(arg) : fn);
-const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
-const flexRender = reactTable.flexRender;
-const createRow = (table, originalRow) => reactTable.createRow(table, 'mrt-row-create', originalRow !== null && originalRow !== void 0 ? originalRow : Object.assign({}, ...getAllLeafColumnDefs(table.options.columns).map((col) => ({
-    [getColumnId(col)]: '',
-}))), -1, 0);
-const extraIndexRangeExtractor = (range, draggingIndex) => {
-    const newIndexs = reactVirtual.defaultRangeExtractor(range);
-    if (draggingIndex >= 0 &&
-        draggingIndex < Math.max(range.startIndex - range.overscan, 0)) {
-        newIndexs.unshift(draggingIndex);
+const getCommonToolbarStyles = ({ table, theme, }) => ({
+    alignItems: 'flex-start',
+    backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
+    display: 'grid',
+    flexWrap: 'wrap-reverse',
+    minHeight: '3.5rem',
+    overflow: 'hidden',
+    position: 'relative',
+    transition: 'all 150ms ease-in-out',
+    zIndex: 1,
+});
+
+const allowedTypes = ['string', 'number'];
+const MRT_TableBodyCellValue = ({ cell, table, }) => {
+    var _a, _b, _c;
+    const { getState, options: { enableFilterMatchHighlighting }, } = table;
+    const { column, row } = cell;
+    const { columnDef } = column;
+    const { globalFilter, globalFilterFn } = getState();
+    const filterValue = column.getFilterValue();
+    let renderedCellValue = cell.getIsAggregated() && columnDef.AggregatedCell
+        ? columnDef.AggregatedCell({
+            cell,
+            column,
+            row,
+            table,
+        })
+        : row.getIsGrouped() && !cell.getIsGrouped()
+            ? null
+            : cell.getIsGrouped() && columnDef.GroupedCell
+                ? columnDef.GroupedCell({
+                    cell,
+                    column,
+                    row,
+                    table,
+                })
+                : undefined;
+    const isGroupedValue = renderedCellValue !== undefined;
+    if (!isGroupedValue) {
+        renderedCellValue = cell.renderValue();
     }
-    if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) {
-        newIndexs.push(draggingIndex);
+    if (enableFilterMatchHighlighting &&
+        columnDef.enableFilterMatchHighlighting !== false &&
+        renderedCellValue &&
+        allowedTypes.includes(typeof renderedCellValue) &&
+        ((filterValue &&
+            allowedTypes.includes(typeof filterValue) &&
+            columnDef.filterVariant === 'text') ||
+            (globalFilter &&
+                allowedTypes.includes(typeof globalFilter) &&
+                column.getCanGlobalFilter()))) {
+        const chunks = highlightWords === null || highlightWords === void 0 ? void 0 : highlightWords({
+            matchExactly: (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
+            query: ((_a = filterValue !== null && filterValue !== void 0 ? filterValue : globalFilter) !== null && _a !== void 0 ? _a : '').toString(),
+            text: renderedCellValue === null || renderedCellValue === void 0 ? void 0 : renderedCellValue.toString(),
+        });
+        if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_b = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _b === void 0 ? void 0 : _b.match)) {
+            renderedCellValue = (jsxRuntime.jsx("span", { "aria-label": renderedCellValue, role: "note", children: (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (jsxRuntime.jsx(Box, { "aria-hidden": "true", component: "span", sx: match
+                        ? {
+                            backgroundColor: (theme) => getMRTTheme(table, theme).matchHighlightColor,
+                            borderRadius: '2px',
+                            color: (theme) => theme.palette.mode === 'dark'
+                                ? theme.palette.common.white
+                                : theme.palette.common.black,
+                            padding: '2px 1px',
+                        }
+                        : undefined, children: text }, key)))) !== null && _c !== void 0 ? _c : renderedCellValue }));
+        }
     }
-    return newIndexs;
+    if (columnDef.Cell && !isGroupedValue) {
+        renderedCellValue = columnDef.Cell({
+            cell,
+            column,
+            renderedCellValue,
+            row,
+            table,
+        });
+    }
+    return renderedCellValue;
 };
-function createMRTColumnHelper() {
-    return {
-        accessor: (accessor, column) => {
-            return typeof accessor === 'function'
-                ? Object.assign(Object.assign({}, column), { accessorFn: accessor })
-                : Object.assign(Object.assign({}, column), { accessorKey: accessor });
-        },
-        display: (column) => column,
-        group: (column) => column,
-    };
-}
 
 const MRT_GrabHandleButton = (_a) => {
     var _b;
     var { iconButtonProps, location, onDragEnd, onDragStart, table } = _a, rest = __rest(_a, ["iconButtonProps", "location", "onDragEnd", "onDragStart", "table"]);
     const { options: { icons: { DragHandleIcon }, localization, }, } = table;
     const _iconButtonProps = Object.assign(Object.assign({}, iconButtonProps), rest);
-    return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_b = _iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.move, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ disableRipple: true, draggable: "true", size: "small" }, _iconButtonProps, { onClick: (e) => {
+    return (jsxRuntime.jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_b = _iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.move, children: jsxRuntime.jsx(IconButton, 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);
@@ -595,11 +508,11 @@ const MRT_CopyButton = (_a) => {
         row,
         table,
     })), rest);
-    return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _b !== void 0 ? _b : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsxRuntime.jsx(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' }, parseFromValuesOrFunc(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx, theme))), title: undefined })) }));
+    return (jsxRuntime.jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _b !== void 0 ? _b : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsxRuntime.jsx(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' }, parseFromValuesOrFunc(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx, theme))), title: undefined })) }));
 };
 
 const MRT_EditCellTextField = (_a) => {
-    var _b, _c, _d, _e;
+    var _b, _c, _d;
     var { cell, table } = _a, rest = __rest(_a, ["cell", "table"]);
     const { getState, options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps }, refs: { editInputRefs }, setCreatingRow, setEditingCell, setEditingRow, } = table;
     const { column, row } = cell;
@@ -654,7 +567,7 @@ const MRT_EditCellTextField = (_a) => {
     if (columnDef.Edit) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_b = columnDef.Edit) === null || _b === void 0 ? void 0 : _b.call(columnDef, { cell, column, row, table }) });
     }
-    return (jsxRuntime.jsx(TextField__default["default"], Object.assign({ disabled: parseFromValuesOrFunc(columnDef.enableEditing, row) === false, fullWidth: true, inputRef: (inputRef) => {
+    return (jsxRuntime.jsx(TextField, Object.assign({ disabled: parseFromValuesOrFunc(columnDef.enableEditing, row) === false, fullWidth: true, inputRef: (inputRef) => {
             if (inputRef) {
                 editInputRefs.current[column.id] = inputRef;
                 if (textFieldProps.inputRef) {
@@ -668,11 +581,11 @@ const MRT_EditCellTextField = (_a) => {
             : undefined, select: isSelectEdit, size: "small", value: value, variant: "standard" }, textFieldProps, { InputProps: Object.assign(Object.assign({ disableUnderline: editDisplayMode === 'table' }, textFieldProps.InputProps), { sx: (theme) => {
                 var _a;
                 return (Object.assign({ mb: 0 }, parseFromValuesOrFunc((_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.sx, theme)));
-            } }), inputProps: Object.assign({ autoComplete: 'new-password', sx: Object.assign({ p: 0 }, (_c = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputProps) === null || _c === void 0 ? void 0 : _c.sx) }, textFieldProps.inputProps), onBlur: handleBlur, onChange: handleChange, onClick: (e) => {
+            } }), inputProps: Object.assign({ autoComplete: 'new-password' }, textFieldProps.inputProps), onBlur: handleBlur, onChange: handleChange, onClick: (e) => {
             var _a;
             e.stopPropagation();
             (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
-        }, onKeyDown: handleEnterKeyDown, children: (_d = textFieldProps.children) !== null && _d !== void 0 ? _d : (_e = columnDef === null || columnDef === void 0 ? void 0 : columnDef.editSelectOptions) === null || _e === void 0 ? void 0 : _e.map((option) => {
+        }, onKeyDown: handleEnterKeyDown, children: (_c = textFieldProps.children) !== null && _c !== void 0 ? _c : (_d = columnDef === null || columnDef === void 0 ? void 0 : columnDef.editSelectOptions) === null || _d === void 0 ? void 0 : _d.map((option) => {
             let value;
             let text;
             if (typeof option !== 'object') {
@@ -683,7 +596,7 @@ const MRT_EditCellTextField = (_a) => {
                 value = option.value;
                 text = option.text;
             }
-            return (jsxRuntime.jsx(MenuItem__default["default"], { sx: {
+            return (jsxRuntime.jsx(MenuItem, { sx: {
                     alignItems: 'center',
                     display: 'flex',
                     gap: '0.5rem',
@@ -709,6 +622,7 @@ const MRT_TableBodyCell = (_a) => {
         row,
         table,
     });
+    const { draggingBorderColor } = getMRTTheme(table, theme);
     const [skeletonWidth, setSkeletonWidth] = react.useState(100);
     react.useEffect(() => {
         if ((!isLoading && !showSkeletons) || skeletonWidth !== 100)
@@ -727,13 +641,13 @@ const MRT_TableBodyCell = (_a) => {
         const isLastColumn = getIsLastColumn(column, table);
         const isLastRow = numRows && rowIndex === numRows - 1;
         const borderStyle = columnSizingInfo.isResizingColumn === column.id
-            ? `2px solid ${theme.palette.primary.main} !important`
+            ? `2px solid ${draggingBorderColor} !important`
             : isDraggingColumn || isDraggingRow
-                ? `1px dashed ${theme.palette.text.secondary} !important`
+                ? `1px dashed ${theme.palette.grey[500]} !important`
                 : isHoveredColumn ||
                     isHoveredRow ||
                     columnSizingInfo.isResizingColumn === column.id
-                    ? `2px dashed ${theme.palette.primary.main} !important`
+                    ? `2px dashed ${draggingBorderColor} !important`
                     : undefined;
         if (columnSizingInfo.isResizingColumn === column.id) {
             return { borderRight: borderStyle };
@@ -798,13 +712,13 @@ const MRT_TableBodyCell = (_a) => {
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ "data-index": virtualIndex, ref: (node) => {
+    return (jsxRuntime.jsx(TableCell, Object.assign({ "data-index": virtualIndex, ref: (node) => {
             if (node) {
                 measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
             }
         } }, tableCellProps, { onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
                 outline: ['cell', 'table'].includes(editDisplayMode !== null && editDisplayMode !== void 0 ? editDisplayMode : '') && isEditable
-                    ? `1px solid ${theme.palette.text.secondary}`
+                    ? `1px solid ${theme.palette.grey[500]}`
                     : undefined,
                 outlineOffset: '-1px',
                 textOverflow: 'clip',
@@ -820,19 +734,19 @@ const MRT_TableBodyCell = (_a) => {
                         : '1rem'
                     : columnDefType === 'display'
                         ? '1rem 1.25rem'
-                        : '1.5rem', pl: column.id === 'mrt-row-expand'
+                        : '1.5rem', textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, [theme.direction === 'rtl' ? 'pr' : 'pl']: column.id === 'mrt-row-expand'
                 ? `${row.depth +
                     (density === 'compact'
                         ? 0.5
                         : density === 'comfortable'
                             ? 0.75
                             : 1.25)}rem`
-                : undefined, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, whiteSpace: row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : 0 }, getCommonCellStyles({
+                : undefined, whiteSpace: row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : 0 }, getCommonMRTCellStyles({
             column,
             table,
             tableCellProps,
             theme,
-        })), draggingBorders)), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [cell.getIsPlaceholder() ? ((_d = (_c = columnDef.PlaceholderCell) === null || _c === void 0 ? void 0 : _c.call(columnDef, { cell, column, row, table })) !== null && _d !== void 0 ? _d : null) : showSkeletons !== false && (isLoading || showSkeletons) ? (jsxRuntime.jsx(Skeleton__default["default"], Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
+        })), draggingBorders)), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [cell.getIsPlaceholder() ? ((_d = (_c = columnDef.PlaceholderCell) === null || _c === void 0 ? void 0 : _c.call(columnDef, { cell, column, row, table })) !== null && _d !== void 0 ? _d : null) : showSkeletons !== false && (isLoading || showSkeletons) ? (jsxRuntime.jsx(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
                     rowNumberMode === 'static' &&
                     column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (jsxRuntime.jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
                     (column.id === 'mrt-row-select' ||
@@ -862,16 +776,16 @@ const MRT_TableDetailPanel = (_a) => {
         row,
         table,
     })), rest);
-    return (jsxRuntime.jsx(TableRow__default["default"], Object.assign({ className: "Mui-TableBodyCell-DetailPanel" }, tableRowProps, { sx: (theme) => {
+    return (jsxRuntime.jsx(TableRow, Object.assign({ className: "Mui-TableBodyCell-DetailPanel" }, tableRowProps, { sx: (theme) => {
             var _a, _b;
             return (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, position: virtualRow ? 'absolute' : undefined, top: virtualRow
                     ? `${(_b = (_a = parentRowRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height}px`
                     : undefined, transform: virtualRow
                     ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
                     : undefined, width: '100%', zIndex: virtualRow ? 2 : undefined }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme)));
-        }, children: jsxRuntime.jsx(TableCell__default["default"], Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
-                    ? styles.lighten(theme.palette.background.default, 0.05)
-                    : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, py: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: renderDetailPanel && (jsxRuntime.jsx(Collapse__default["default"], { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: !isLoading && renderDetailPanel({ row, table }) })) })) })));
+        }, children: jsxRuntime.jsx(TableCell, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
+                    ? getMRTTheme(table, theme).baseBackgroundColor
+                    : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, py: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: renderDetailPanel && (jsxRuntime.jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: !isLoading && renderDetailPanel({ row, table }) })) })) })));
 };
 
 const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRowIds, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }) => {
@@ -911,7 +825,8 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
         }
     };
     const rowRef = react.useRef(null);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(TableRow__default["default"], Object.assign({ "data-index": virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.index, onDragEnter: handleDragEnter, ref: (node) => {
+    const { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor, } = getMRTTheme(table, theme);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(TableRow, Object.assign({ "data-index": virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.index, onDragEnter: handleDragEnter, ref: (node) => {
                     if (node) {
                         rowRef.current = node;
                         measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
@@ -921,12 +836,12 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
                         : undefined }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style), sx: (theme) => (Object.assign({ '&:hover td': {
                         backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false
                             ? row.getIsSelected()
-                                ? `${styles.alpha(theme.palette.primary.main, 0.2)}`
+                                ? `${styles.alpha(selectedRowBackgroundColor, 0.3)}`
                                 : theme.palette.mode === 'dark'
-                                    ? `${styles.lighten(theme.palette.background.default, 0.12)}`
-                                    : `${styles.darken(theme.palette.background.default, 0.05)}`
+                                    ? `${styles.lighten(baseBackgroundColor, 0.05)}`
+                                    : `${styles.darken(baseBackgroundColor, 0.05)}`
                             : undefined,
-                    }, backgroundColor: `${styles.lighten(theme.palette.background.default, 0.05)} !important`, bottom: !virtualRow && bottomPinnedIndex !== undefined && isPinned
+                    }, backgroundColor: `${baseBackgroundColor} !important`, bottom: !virtualRow && bottomPinnedIndex !== undefined && isPinned
                         ? `${bottomPinnedIndex * rowHeight +
                             (enableStickyFooter ? tableFooterHeight - 1 : 0)}px`
                         : undefined, boxSizing: 'border-box', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, opacity: isPinned
@@ -939,9 +854,9 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
                             ? 'sticky'
                             : undefined, td: {
                         backgroundColor: row.getIsSelected()
-                            ? styles.alpha(theme.palette.primary.main, 0.2)
+                            ? selectedRowBackgroundColor
                             : isPinned
-                                ? styles.alpha(theme.palette.primary.main, 0.1)
+                                ? pinnedRowBackgroundColor
                                 : undefined,
                     }, top: virtualRow
                         ? 0
@@ -1063,7 +978,7 @@ const MRT_TableBody = (_a) => {
         ? rowVirtualizer.getVirtualItems()
         : undefined;
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
-                getIsSomeRowsPinned('top') && (jsxRuntime.jsx(TableBody__default["default"], Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'sticky', top: tableHeadHeight - 1, zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getTopRows().map((row, rowIndex) => {
+                getIsSomeRowsPinned('top') && (jsxRuntime.jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'sticky', top: tableHeadHeight - 1, zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getTopRows().map((row, rowIndex) => {
                     const props = {
                         columnVirtualizer,
                         measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
@@ -1076,15 +991,13 @@ const MRT_TableBody = (_a) => {
                         virtualPaddingRight,
                     };
                     return memoMode === 'rows' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
-                }) }))), jsxRuntime.jsxs(TableBody__default["default"], Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, height: rowVirtualizer
+                }) }))), jsxRuntime.jsxs(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, height: rowVirtualizer
                         ? `${rowVirtualizer.getTotalSize()}px`
                         : 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: [creatingRow && createDisplayMode === 'row' && (jsxRuntime.jsx(MRT_TableBodyRow, { row: creatingRow, rowIndex: -1, table: table })), (_d = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _d !== void 0 ? _d : (!rows.length ? (jsxRuntime.jsx("tr", { style: {
                             display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
                         }, children: jsxRuntime.jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
-                                display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid'))
-                                    ? 'grid'
-                                    : undefined,
-                            }, children: (_e = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _e !== void 0 ? _e : (jsxRuntime.jsx(Typography__default["default"], { sx: {
+                                display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
+                            }, children: (_e = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _e !== void 0 ? _e : (jsxRuntime.jsx(Typography, { sx: {
                                     color: 'text.secondary',
                                     fontStyle: 'italic',
                                     maxWidth: `min(100vw, ${(_g = (_f = tablePaperRef.current) === null || _f === void 0 ? void 0 : _f.clientWidth) !== null && _g !== void 0 ? _g : 360}px)`,
@@ -1114,7 +1027,7 @@ const MRT_TableBody = (_a) => {
                             };
                             return memoMode === 'rows' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
                         }) })))] })), !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
-                getIsSomeRowsPinned('bottom') && (jsxRuntime.jsx(TableBody__default["default"], Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ bottom: tableFooterHeight - 1, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'sticky', zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getBottomRows().map((row, rowIndex) => {
+                getIsSomeRowsPinned('bottom') && (jsxRuntime.jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ bottom: tableFooterHeight - 1, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'sticky', zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getBottomRows().map((row, rowIndex) => {
                     const props = {
                         columnVirtualizer,
                         measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
@@ -1141,11 +1054,11 @@ const MRT_TableFooterCell = (_a) => {
     const { columnDefType } = columnDef;
     const args = { column, table };
     const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterCellProps, args)), parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, args)), rest);
-    return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, fontWeight: 'bold', justifyContent: columnDefType === 'group' ? 'center' : undefined, p: density === 'compact'
+    return (jsxRuntime.jsx(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, fontWeight: 'bold', justifyContent: columnDefType === 'group' ? 'center' : undefined, p: density === 'compact'
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? '1rem'
-                    : '1.5rem', verticalAlign: 'top', zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1 }, getCommonCellStyles({
+                    : '1.5rem', verticalAlign: 'top', zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1 }, getCommonMRTCellStyles({
             column,
             table,
             tableCellProps,
@@ -1172,7 +1085,7 @@ const MRT_TableFooterRow = (_a) => {
         footerGroup,
         table,
     })), rest);
-    return (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.05), display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter) => {
+    return (jsxRuntime.jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter) => {
                 const footer = virtualColumns
                     ? footerGroup.headers[footerOrVirtualFooter.index]
                     : footerOrVirtualFooter;
@@ -1188,7 +1101,7 @@ const MRT_TableFooter = (_a) => {
         table,
     })), rest);
     const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
-    return (jsxRuntime.jsx(TableFooter__default["default"], Object.assign({}, tableFooterProps, { ref: (ref) => {
+    return (jsxRuntime.jsx(TableFooter, Object.assign({}, tableFooterProps, { ref: (ref) => {
             tableFooterRef.current = ref;
             if (tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.ref) {
                 // @ts-ignore
@@ -1373,7 +1286,7 @@ const MRT_FilterOptionMenu = (_a) => {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect();
     };
     const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
-    return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
+    return (jsxRuntime.jsx(Menu, Object.assign({ MenuListProps: {
             dense: density === 'compact',
         }, anchorEl: anchorEl, anchorOrigin: { horizontal: 'right', vertical: 'center' }, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_e = (header && column && columnDef
             ? (_d = (_c = columnDef.renderColumnFilterModeMenuItems) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
@@ -1391,13 +1304,13 @@ const MRT_FilterOptionMenu = (_a) => {
                 internalFilterOptions,
                 onSelectFilterMode: handleSelectFilterMode,
                 table,
-            }))) !== null && _e !== void 0 ? _e : internalFilterOptions.map(({ divider, label, option, symbol }, index) => (jsxRuntime.jsxs(MenuItem__default["default"], { divider: divider, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
+            }))) !== null && _e !== void 0 ? _e : internalFilterOptions.map(({ divider, label, option, symbol }, index) => (jsxRuntime.jsxs(MenuItem, { divider: divider, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
                 alignItems: 'center',
                 display: 'flex',
                 gap: '2ch',
                 my: 0,
                 py: '6px',
-            }, value: option, children: [jsxRuntime.jsx(Box__default["default"], { sx: { fontSize: '1.25rem', width: '2ch' }, children: symbol }), label] }, index))) })));
+            }, value: option, children: [jsxRuntime.jsx(Box, { sx: { fontSize: '1.25rem', width: '2ch' }, children: symbol }), label] }, index))) })));
 };
 
 const commonMenuItemStyles = {
@@ -1476,48 +1389,48 @@ const MRT_ColumnActionMenu = (_a) => {
     const internalColumnMenuItems = [
         ...(enableSorting && column.getCanSort()
             ? [
-                enableSortingRemoval !== false && (jsxRuntime.jsx(MenuItem__default["default"], { disabled: !column.getIsSorted(), onClick: handleClearSort, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(ClearAllIcon, {}) }), localization.clearSort] }) }, 0)),
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: column.getIsSorted() === 'asc', onClick: handleSortAsc, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } }) }), (_c = localization.sortByColumnAsc) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header))] }) }, 1),
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: column.getIsSorted() === 'desc', divider: enableColumnFilters || enableGrouping || enableHiding, onClick: handleSortDesc, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(SortIcon, {}) }), (_d = localization.sortByColumnDesc) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header))] }) }, 2),
+                enableSortingRemoval !== false && (jsxRuntime.jsx(MenuItem, { disabled: !column.getIsSorted(), onClick: handleClearSort, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box, { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon, { children: jsxRuntime.jsx(ClearAllIcon, {}) }), localization.clearSort] }) }, 0)),
+                jsxRuntime.jsx(MenuItem, { disabled: column.getIsSorted() === 'asc', onClick: handleSortAsc, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box, { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon, { children: jsxRuntime.jsx(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } }) }), (_c = localization.sortByColumnAsc) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header))] }) }, 1),
+                jsxRuntime.jsx(MenuItem, { disabled: column.getIsSorted() === 'desc', divider: enableColumnFilters || enableGrouping || enableHiding, onClick: handleSortDesc, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box, { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon, { children: jsxRuntime.jsx(SortIcon, {}) }), (_d = localization.sortByColumnDesc) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header))] }) }, 2),
             ]
             : []),
         ...(enableColumnFilters && column.getCanFilter()
             ? [
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !columnFilterValue ||
+                jsxRuntime.jsx(MenuItem, { disabled: !columnFilterValue ||
                         (Array.isArray(columnFilterValue) &&
-                            !columnFilterValue.filter((value) => value).length), onClick: handleClearFilter, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(FilterListOffIcon, {}) }), localization.clearFilter] }) }, 3),
-                columnFilterDisplayMode === 'subheader' && (jsxRuntime.jsxs(MenuItem__default["default"], { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, onClick: showColumnFilters
+                            !columnFilterValue.filter((value) => value).length), onClick: handleClearFilter, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box, { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon, { children: jsxRuntime.jsx(FilterListOffIcon, {}) }), localization.clearFilter] }) }, 3),
+                columnFilterDisplayMode === 'subheader' && (jsxRuntime.jsxs(MenuItem, { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, onClick: showColumnFilters
                         ? handleOpenFilterModeMenu
-                        : handleFilterByColumn, sx: commonMenuItemStyles, children: [jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(FilterListIcon, {}) }), (_e = localization.filterByColumn) === null || _e === void 0 ? void 0 : _e.replace('{column}', String(columnDef.header))] }), showFilterModeSubMenu && (jsxRuntime.jsx(IconButton__default["default"], { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 }, children: jsxRuntime.jsx(ArrowRightIcon, {}) }))] }, 4)),
+                        : handleFilterByColumn, sx: commonMenuItemStyles, children: [jsxRuntime.jsxs(Box, { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon, { children: jsxRuntime.jsx(FilterListIcon, {}) }), (_e = localization.filterByColumn) === null || _e === void 0 ? void 0 : _e.replace('{column}', String(columnDef.header))] }), showFilterModeSubMenu && (jsxRuntime.jsx(IconButton, { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 }, children: jsxRuntime.jsx(ArrowRightIcon, {}) }))] }, 4)),
                 showFilterModeSubMenu && (jsxRuntime.jsx(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table }, 5)),
             ].filter(Boolean)
             : []),
         ...(enableGrouping && column.getCanGroup()
             ? [
-                jsxRuntime.jsx(MenuItem__default["default"], { divider: enableColumnPinning, onClick: handleGroupByColumn, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(DynamicFeedIcon, {}) }), (_f = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header))] }) }, 6),
+                jsxRuntime.jsx(MenuItem, { divider: enableColumnPinning, onClick: handleGroupByColumn, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box, { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon, { children: jsxRuntime.jsx(DynamicFeedIcon, {}) }), (_f = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header))] }) }, 6),
             ]
             : []),
         ...(enableColumnPinning && column.getCanPin()
             ? [
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(90deg)' } }) }), localization.pinToLeft] }) }, 7),
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(-90deg)' } }) }), localization.pinToRight] }) }, 8),
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !column.getIsPinned(), divider: enableHiding, onClick: () => handlePinColumn(false), sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(PushPinIcon, {}) }), localization.unpin] }) }, 9),
+                jsxRuntime.jsx(MenuItem, { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box, { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon, { children: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(90deg)' } }) }), localization.pinToLeft] }) }, 7),
+                jsxRuntime.jsx(MenuItem, { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box, { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon, { children: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(-90deg)' } }) }), localization.pinToRight] }) }, 8),
+                jsxRuntime.jsx(MenuItem, { disabled: !column.getIsPinned(), divider: enableHiding, onClick: () => handlePinColumn(false), sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box, { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon, { children: jsxRuntime.jsx(PushPinIcon, {}) }), localization.unpin] }) }, 9),
             ]
             : []),
         ...(enableColumnResizing && column.getCanResize()
             ? [
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !columnSizing[column.id], onClick: handleResetColumnSize, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(RestartAltIcon, {}) }), localization.resetColumnSize] }) }, 10),
+                jsxRuntime.jsx(MenuItem, { disabled: !columnSizing[column.id], onClick: handleResetColumnSize, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box, { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon, { children: jsxRuntime.jsx(RestartAltIcon, {}) }), localization.resetColumnSize] }) }, 10),
             ]
             : []),
         ...(enableHiding
             ? [
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !column.getCanHide(), onClick: handleHideColumn, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(VisibilityOffIcon, {}) }), (_g = localization.hideColumn) === null || _g === void 0 ? void 0 : _g.replace('{column}', String(columnDef.header))] }) }, 11),
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
-                        .length, onClick: handleShowAllColumns, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(ViewColumnIcon, {}) }), (_h = localization.showAllColumns) === null || _h === void 0 ? void 0 : _h.replace('{column}', String(columnDef.header))] }) }, 12),
+                jsxRuntime.jsx(MenuItem, { disabled: !column.getCanHide(), onClick: handleHideColumn, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box, { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon, { children: jsxRuntime.jsx(VisibilityOffIcon, {}) }), (_g = localization.hideColumn) === null || _g === void 0 ? void 0 : _g.replace('{column}', String(columnDef.header))] }) }, 11),
+                jsxRuntime.jsx(MenuItem, { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
+                        .length, onClick: handleShowAllColumns, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box, { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon, { children: jsxRuntime.jsx(ViewColumnIcon, {}) }), (_h = localization.showAllColumns) === null || _h === void 0 ? void 0 : _h.replace('{column}', String(columnDef.header))] }) }, 12),
             ]
             : []),
     ].filter(Boolean);
-    return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
+    return (jsxRuntime.jsx(Menu, Object.assign({ MenuListProps: {
             dense: density === 'compact',
         }, anchorEl: anchorEl, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_l = (_k = (_j = columnDef.renderColumnActionsMenuItems) === null || _j === void 0 ? void 0 : _j.call(columnDef, {
             closeMenu: () => setAnchorEl(null),
@@ -1535,7 +1448,7 @@ const MRT_ColumnActionMenu = (_a) => {
 const MRT_TableHeadCellColumnActionsButton = (_a) => {
     var _b;
     var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
-    const { options: { columnFilterDisplayMode, icons: { MoreVertIcon }, localization, muiColumnActionsButtonProps, }, } = table;
+    const { options: { icons: { MoreVertIcon }, localization, muiColumnActionsButtonProps, }, } = table;
     const { column } = header;
     const { columnDef } = column;
     const [anchorEl, setAnchorEl] = react.useState(null);
@@ -1551,9 +1464,9 @@ const MRT_TableHeadCellColumnActionsButton = (_a) => {
         column,
         table,
     })), rest);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.columnActions, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ '&:hover': {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.columnActions, children: jsxRuntime.jsx(IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ '&:hover': {
                             opacity: 1,
-                        }, height: '2rem', m: '-4px', opacity: 0.3, transform: `scale(0.8) ${columnFilterDisplayMode !== 'popover' ? 'translateX(-4px)' : ''}`, transition: 'opacity 150ms', width: '2rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: jsxRuntime.jsx(MoreVertIcon, {}) })) }), anchorEl && (jsxRuntime.jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
+                        }, height: '2rem', m: '-8px -4px', opacity: 0.3, transition: 'all 150ms', width: '2rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: jsxRuntime.jsx(MoreVertIcon, { style: { transform: 'scale(0.9)' } }) })) }), anchorEl && (jsxRuntime.jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
 };
 
 const MRT_FilterCheckbox = (_a) => {
@@ -1570,7 +1483,7 @@ const MRT_FilterCheckbox = (_a) => {
         table,
     })), rest);
     const filterLabel = (_b = localization.filterByColumn) === null || _b === void 0 ? void 0 : _b.replace('{column}', columnDef.header);
-    return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_c = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _c !== void 0 ? _c : filterLabel, children: jsxRuntime.jsx(FormControlLabel__default["default"], { control: jsxRuntime.jsx(Checkbox__default["default"], Object.assign({ checked: column.getFilterValue() === 'true', color: column.getFilterValue() === undefined ? 'default' : 'primary', indeterminate: column.getFilterValue() === undefined, size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onChange: (e, checked) => {
+    return (jsxRuntime.jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_c = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _c !== void 0 ? _c : filterLabel, children: jsxRuntime.jsx(FormControlLabel, { control: jsxRuntime.jsx(Checkbox, Object.assign({ checked: column.getFilterValue() === 'true', color: column.getFilterValue() === undefined ? 'default' : 'primary', indeterminate: column.getFilterValue() === undefined, size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onChange: (e, checked) => {
                     var _a;
                     column.setFilterValue(column.getFilterValue() === undefined
                         ? 'true'
@@ -1728,12 +1641,12 @@ const MRT_FilterTextField = (_a) => {
         isMultiSelectFilter,
         isSelectFilter,
     ]);
-    const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (jsxRuntime.jsx(InputAdornment__default["default"], { position: "end", sx: { mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }, children: jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, placement: "right", title: (_j = localization.clearFilter) !== null && _j !== void 0 ? _j : '', children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.clearFilter, disabled: !((_k = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _k === void 0 ? void 0 : _k.length), onClick: handleClear, size: "small", sx: {
+    const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (jsxRuntime.jsx(InputAdornment, { position: "end", sx: { mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }, children: jsxRuntime.jsx(Tooltip, { arrow: true, placement: "right", title: (_j = localization.clearFilter) !== null && _j !== void 0 ? _j : '', children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton, { "aria-label": localization.clearFilter, disabled: !((_k = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _k === void 0 ? void 0 : _k.length), onClick: handleClear, size: "small", sx: {
                         height: '2rem',
                         transform: 'scale(0.9)',
                         width: '2rem',
                     }, children: jsxRuntime.jsx(CloseIcon, {}) }) }) }) })) : null;
-    const startAdornment = showChangeModeButton ? (jsxRuntime.jsxs(InputAdornment__default["default"], { position: "start", children: [jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, title: localization.changeFilterMode, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsxRuntime.jsx(FilterListIcon, {}) }) }) }), filterChipLabel && (jsxRuntime.jsx(Chip__default["default"], { label: filterChipLabel, onDelete: handleClearEmptyFilterChip }))] })) : null;
+    const startAdornment = showChangeModeButton ? (jsxRuntime.jsxs(InputAdornment, { position: "start", children: [jsxRuntime.jsx(Tooltip, { arrow: true, title: localization.changeFilterMode, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton, { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsxRuntime.jsx(FilterListIcon, {}) }) }) }), filterChipLabel && (jsxRuntime.jsx(Chip, { label: filterChipLabel, onDelete: handleClearEmptyFilterChip }))] })) : null;
     const commonTextFieldProps = Object.assign(Object.assign({ FormHelperTextProps: {
             sx: {
                 fontSize: '0.75rem',
@@ -1775,24 +1688,24 @@ const MRT_FilterTextField = (_a) => {
                 }, value: filterValue || null }, datePickerProps, { slotProps: {
                     field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_m = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _m === void 0 ? void 0 : _m.field),
                     textField: Object.assign(Object.assign({}, commonTextFieldProps), (_o = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _o === void 0 ? void 0 : _o.textField),
-                } }))) : isAutocompleteFilter ? (jsxRuntime.jsx(Autocomplete__default["default"], Object.assign({ freeSolo: true, getOptionLabel: (option) => option, onChange: (_e, newValue) => handleChange(newValue), options: dropdownOptions !== null && dropdownOptions !== void 0 ? dropdownOptions : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
+                } }))) : isAutocompleteFilter ? (jsxRuntime.jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => option, onChange: (_e, newValue) => handleChange(newValue), options: dropdownOptions !== null && dropdownOptions !== void 0 ? dropdownOptions : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
                     var _a;
-                    return (jsxRuntime.jsx(TextField__default["default"], Object.assign({}, builtinTextFieldProps, commonTextFieldProps, { InputProps: Object.assign(Object.assign({}, builtinTextFieldProps.InputProps), { startAdornment: (_a = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.startAdornment }), inputProps: Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.inputProps), onChange: handleTextFieldChange })));
-                }, value: filterValue }))) : (jsxRuntime.jsx(TextField__default["default"], Object.assign({ SelectProps: {
+                    return (jsxRuntime.jsx(TextField, Object.assign({}, builtinTextFieldProps, commonTextFieldProps, { InputProps: Object.assign(Object.assign({}, builtinTextFieldProps.InputProps), { startAdornment: (_a = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.startAdornment }), inputProps: Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.inputProps), onChange: handleTextFieldChange })));
+                }, value: filterValue }))) : (jsxRuntime.jsx(TextField, Object.assign({ SelectProps: {
                     displayEmpty: true,
                     multiple: isMultiSelectFilter,
                     renderValue: isMultiSelectFilter
-                        ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (jsxRuntime.jsx(Box__default["default"], { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsxRuntime.jsx(Box__default["default"], { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' }, children: selected === null || selected === void 0 ? void 0 : selected.map((value) => {
+                        ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (jsxRuntime.jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsxRuntime.jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' }, children: selected === null || selected === void 0 ? void 0 : selected.map((value) => {
                                 const selectedValue = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => option instanceof Object
                                     ? option.value === value
                                     : option === value);
-                                return (jsxRuntime.jsx(Chip__default["default"], { label: selectedValue instanceof Object
+                                return (jsxRuntime.jsx(Chip, { label: selectedValue instanceof Object
                                         ? selectedValue.text
                                         : selectedValue }, value));
                             }) }))
                         : undefined,
                 }, onChange: handleTextFieldChange, select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { value: filterValue !== null && filterValue !== void 0 ? filterValue : '', children: (isSelectFilter || isMultiSelectFilter) && [
-                    jsxRuntime.jsx(MenuItem__default["default"], { disabled: true, divider: true, hidden: true, value: "", children: jsxRuntime.jsx(Box__default["default"], { sx: { opacity: 0.5 }, children: filterPlaceholder }) }, "p"),
+                    jsxRuntime.jsx(MenuItem, { disabled: true, divider: true, hidden: true, value: "", children: jsxRuntime.jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder }) }, "p"),
                     ...[
                         (_p = textFieldProps.children) !== null && _p !== void 0 ? _p : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
                             var _a;
@@ -1808,12 +1721,12 @@ const MRT_FilterTextField = (_a) => {
                                 value = option.value;
                                 text = option.text;
                             }
-                            return (jsxRuntime.jsxs(MenuItem__default["default"], { sx: {
+                            return (jsxRuntime.jsxs(MenuItem, { sx: {
                                     alignItems: 'center',
                                     display: 'flex',
                                     gap: '0.5rem',
                                     m: 0,
-                                }, value: value, children: [isMultiSelectFilter && (jsxRuntime.jsx(Checkbox__default["default"], { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })), text, ' ', !columnDef.filterSelectOptions &&
+                                }, value: value, children: [isMultiSelectFilter && (jsxRuntime.jsx(Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })), text, ' ', !columnDef.filterSelectOptions &&
                                         `(${facetedUniqueValues.get(value)})`] }, `${index}-${value}`));
                         }),
                     ],
@@ -1822,7 +1735,7 @@ const MRT_FilterTextField = (_a) => {
 
 const MRT_FilterRangeFields = (_a) => {
     var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
-    return (jsxRuntime.jsxs(Box__default["default"], Object.assign({}, rest, { sx: (theme) => (Object.assign({ display: 'grid', gap: '1rem', gridTemplateColumns: '1fr 1fr' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: [jsxRuntime.jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }), jsxRuntime.jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })] })));
+    return (jsxRuntime.jsxs(Box, Object.assign({}, rest, { sx: (theme) => (Object.assign({ display: 'grid', gap: '1rem', gridTemplateColumns: '1fr 1fr' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: [jsxRuntime.jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }), jsxRuntime.jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })] })));
 };
 
 const MRT_FilterRangeSlider = (_a) => {
@@ -1860,7 +1773,7 @@ const MRT_FilterRangeSlider = (_a) => {
         }
         isMounted.current = true;
     }, [columnFilterValue, min, max]);
-    return (jsxRuntime.jsxs(Stack__default["default"], { children: [jsxRuntime.jsx(Slider__default["default"], Object.assign({ disableSwap: true, max: max, min: min, onChange: (_event, values) => {
+    return (jsxRuntime.jsxs(Stack, { children: [jsxRuntime.jsx(Slider, Object.assign({ disableSwap: true, max: max, min: min, onChange: (_event, values) => {
                     setFilterValues(values);
                 }, onChangeCommitted: (_event, value) => {
                     if (Array.isArray(value)) {
@@ -1886,7 +1799,7 @@ const MRT_FilterRangeSlider = (_a) => {
                             }
                         },
                     },
-                }, sx: (theme) => (Object.assign({ m: 'auto', mt: !showChangeModeButton ? '10px' : '6px', px: '4px', width: 'calc(100% - 8px)' }, parseFromValuesOrFunc(sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.sx, theme))) })), showChangeModeButton ? (jsxRuntime.jsx(FormHelperText__default["default"], { sx: {
+                }, sx: (theme) => (Object.assign({ m: 'auto', mt: !showChangeModeButton ? '10px' : '6px', px: '4px', width: 'calc(100% - 8px)' }, parseFromValuesOrFunc(sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.sx, theme))) })), showChangeModeButton ? (jsxRuntime.jsx(FormHelperText, { sx: {
                     fontSize: '0.75rem',
                     lineHeight: '0.8rem',
                     m: '-3px -6px',
@@ -1904,7 +1817,7 @@ const MRT_TableHeadCellFilterContainer = (_a) => {
     const { showColumnFilters } = getState();
     const { column } = header;
     const { columnDef } = column;
-    return (jsxRuntime.jsx(Collapse__default["default"], Object.assign({ in: showColumnFilters || columnFilterDisplayMode === 'popover', mountOnEnter: true, unmountOnExit: true }, rest, { children: columnDef.filterVariant === 'checkbox' ? (jsxRuntime.jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (jsxRuntime.jsx(MRT_FilterRangeSlider, { header: header, table: table })) : ((_b = columnDef.filterVariant) === null || _b === void 0 ? void 0 : _b.includes('range')) ||
+    return (jsxRuntime.jsx(Collapse, Object.assign({ in: showColumnFilters || columnFilterDisplayMode === 'popover', mountOnEnter: true, unmountOnExit: true }, rest, { children: columnDef.filterVariant === 'checkbox' ? (jsxRuntime.jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (jsxRuntime.jsx(MRT_FilterRangeSlider, { header: header, table: table })) : ((_b = columnDef.filterVariant) === null || _b === void 0 ? void 0 : _b.includes('range')) ||
             ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (jsxRuntime.jsx(MRT_FilterRangeFields, { header: header, table: table })) : (jsxRuntime.jsx(MRT_FilterTextField, { header: header, table: table })) })));
 };
 
@@ -1934,10 +1847,10 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
             ? filterValue.join(`" ${isRangeFilter ? localization.and : localization.or} "`)
             : filterValue}"`)
             .replace('" "', '');
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Grow__default["default"], { in: columnFilterDisplayMode === 'popover' ||
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Grow, { in: columnFilterDisplayMode === 'popover' ||
                     (!!filterValue && !isRangeFilter) ||
                     (isRangeFilter && // @ts-ignore
-                        (!!(filterValue === null || filterValue === void 0 ? void 0 : filterValue[0]) || !!(filterValue === null || filterValue === void 0 ? void 0 : filterValue[1]))), unmountOnExit: true, children: jsxRuntime.jsx(Box__default["default"], { component: "span", sx: { flex: '0 0' }, children: jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, placement: "top", title: filterTooltip, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ disableRipple: true, onClick: (event) => {
+                        (!!(filterValue === null || filterValue === void 0 ? void 0 : filterValue[0]) || !!(filterValue === null || filterValue === void 0 ? void 0 : filterValue[1]))), unmountOnExit: true, children: jsxRuntime.jsx(Box, { component: "span", sx: { flex: '0 0' }, children: jsxRuntime.jsx(Tooltip, { arrow: true, placement: "top", title: filterTooltip, children: jsxRuntime.jsx(IconButton, Object.assign({ disableRipple: true, onClick: (event) => {
                                 if (columnFilterDisplayMode === 'popover') {
                                     setAnchorEl(event.currentTarget);
                                 }
@@ -1950,7 +1863,7 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
                                     (_b = filterInputRefs.current[`${column.id}-0`]) === null || _b === void 0 ? void 0 : _b.select();
                                 });
                                 event.stopPropagation();
-                            }, size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '16px', ml: '4px', opacity: isFilterActive ? 1 : 0.3, p: '8px', transform: 'scale(0.75)', transition: 'all 150ms ease-in-out', width: '16px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxRuntime.jsx(FilterAltIcon, {}) })) }) }) }), jsxRuntime.jsx(Popover__default["default"], { anchorEl: anchorEl, anchorOrigin: {
+                            }, size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '16px', ml: '4px', opacity: isFilterActive ? 1 : 0.3, p: '8px', transform: 'scale(0.75)', transition: 'all 150ms ease-in-out', width: '16px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxRuntime.jsx(FilterAltIcon, {}) })) }) }) }), jsxRuntime.jsx(Popover, { anchorEl: anchorEl, anchorOrigin: {
                     horizontal: 'center',
                     vertical: 'top',
                 }, onClick: (event) => event.stopPropagation(), onClose: (event) => {
@@ -1960,7 +1873,7 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
                 }, onKeyDown: (event) => event.key === 'Enter' && setAnchorEl(null), open: !!anchorEl, transformOrigin: {
                     horizontal: 'center',
                     vertical: 'bottom',
-                }, children: jsxRuntime.jsx(Box__default["default"], { sx: { p: '1rem' }, children: jsxRuntime.jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }) })] }));
+                }, children: jsxRuntime.jsx(Box, { sx: { p: '1rem' }, children: jsxRuntime.jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }) })] }));
 };
 
 const MRT_TableHeadCellGrabHandle = (_a) => {
@@ -2001,7 +1914,7 @@ const MRT_TableHeadCellResizeHandle = (_a) => {
     const { getState, options: { columnResizeMode }, setColumnSizingInfo, } = table;
     const { density } = getState();
     const { column } = header;
-    return (jsxRuntime.jsx(Box__default["default"], { className: "Mui-TableHeadCell-ResizeHandle-Wrapper", onDoubleClick: () => {
+    return (jsxRuntime.jsx(Box, { className: "Mui-TableHeadCell-ResizeHandle-Wrapper", onDoubleClick: () => {
             setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
             column.resetSize();
         }, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
@@ -2022,7 +1935,7 @@ const MRT_TableHeadCellResizeHandle = (_a) => {
             position: 'absolute',
             px: '4px',
             right: '0',
-        }), children: jsxRuntime.jsx(Divider__default["default"], { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: (theme) => (Object.assign({ borderRadius: '2px', borderWidth: '2px', height: '24px', touchAction: 'none', transition: column.getIsResizing()
+        }), children: jsxRuntime.jsx(Divider, { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: (theme) => (Object.assign({ borderRadius: '2px', borderWidth: '2px', height: '24px', touchAction: 'none', transition: column.getIsResizing()
                     ? undefined
                     : 'all 150ms ease-in-out', userSelect: 'none', zIndex: 4 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))) }) }));
 };
@@ -2043,8 +1956,10 @@ const MRT_TableHeadCellSortLabel = (_a) => {
             : column.getNextSortingOrder() === 'desc'
                 ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
                 : localization.sortByColumnAsc.replace('{column}', columnDef.header);
-    return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, placement: "top", title: sortTooltip, children: jsxRuntime.jsx(Badge__default["default"], { badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0, overlap: "circular", children: jsxRuntime.jsx(TableSortLabel__default["default"], Object.assign({ IconComponent: !isSorted
-                    ? (props) => (jsxRuntime.jsx(SyncAltIcon, Object.assign({}, props, { style: { transform: 'rotate(-90deg) scaleX(0.8)' } })))
+    return (jsxRuntime.jsx(Tooltip, { arrow: true, placement: "top", title: sortTooltip, children: jsxRuntime.jsx(Badge, { badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0, overlap: "circular", children: jsxRuntime.jsx(TableSortLabel, Object.assign({ IconComponent: !isSorted
+                    ? (props) => (jsxRuntime.jsx(SyncAltIcon, Object.assign({}, props, { style: {
+                            transform: 'rotate(-90deg) scaleX(0.9) translateX(-1px)',
+                        } })))
                     : ArrowDownwardIcon, active: true, "aria-label": sortTooltip, direction: isSorted ? column.getIsSorted() : undefined, onClick: (e) => {
                     var _a;
                     e.stopPropagation();
@@ -2069,6 +1984,7 @@ const MRT_TableHeadCell = (_a) => {
         column,
         table,
     })), rest);
+    const { draggingBorderColor } = getMRTTheme(table, theme);
     const showColumnActions = (enableColumnActions || columnDef.enableColumnActions) &&
         columnDef.enableColumnActions !== false;
     const showDragHandle = enableColumnDragging !== false &&
@@ -2091,11 +2007,11 @@ const MRT_TableHeadCell = (_a) => {
     const draggingBorders = react.useMemo(() => {
         const borderStyle = columnSizingInfo.isResizingColumn === column.id &&
             !header.subHeaders.length
-            ? `2px solid ${theme.palette.primary.main} !important`
+            ? `2px solid ${draggingBorderColor} !important`
             : (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
-                ? `1px dashed ${theme.palette.text.secondary}`
+                ? `1px dashed ${theme.palette.grey[500]}`
                 : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
-                    ? `2px dashed ${theme.palette.primary.main}`
+                    ? `2px dashed ${draggingBorderColor}`
                     : undefined;
         if (columnSizingInfo.isResizingColumn === column.id) {
             return { borderRight: borderStyle };
@@ -2122,7 +2038,7 @@ const MRT_TableHeadCell = (_a) => {
         header,
         table,
     })) !== null && _b !== void 0 ? _b : columnDef.header;
-    return (jsxRuntime.jsxs(TableCell__default["default"], Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
+    return (jsxRuntime.jsxs(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
             if (node) {
                 tableHeadCellRefs.current[column.id] = node;
             }
@@ -2150,7 +2066,7 @@ const MRT_TableHeadCell = (_a) => {
                 ? 3
                 : column.getIsPinned() && columnDefType !== 'group'
                     ? 2
-                    : 1 }, getCommonCellStyles({
+                    : 1 }, getCommonMRTCellStyles({
             column,
             header,
             table,
@@ -2158,7 +2074,7 @@ const MRT_TableHeadCell = (_a) => {
             theme,
         })), draggingBorders)), children: [header.isPlaceholder
                 ? null
-                : (_c = tableCellProps.children) !== null && _c !== void 0 ? _c : (jsxRuntime.jsxs(Box__default["default"], { className: "Mui-TableHeadCell-Content", sx: {
+                : (_c = tableCellProps.children) !== null && _c !== void 0 ? _c : (jsxRuntime.jsxs(Box, { className: "Mui-TableHeadCell-Content", sx: {
                         alignItems: 'center',
                         display: 'flex',
                         flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
@@ -2170,7 +2086,7 @@ const MRT_TableHeadCell = (_a) => {
                                 : 'flex-start',
                         position: 'relative',
                         width: '100%',
-                    }, children: [jsxRuntime.jsxs(Box__default["default"], { className: "Mui-TableHeadCell-Content-Labels", onClick: column.getToggleSortingHandler(), sx: {
+                    }, children: [jsxRuntime.jsxs(Box, { className: "Mui-TableHeadCell-Content-Labels", onClick: column.getToggleSortingHandler(), sx: {
                                 alignItems: 'center',
                                 cursor: column.getCanSort() && columnDefType !== 'group'
                                     ? 'pointer'
@@ -2181,7 +2097,7 @@ const MRT_TableHeadCell = (_a) => {
                                 pl: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
                                     ? `${headerPL}rem`
                                     : undefined,
-                            }, children: [jsxRuntime.jsx(Box__default["default"], { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
+                            }, children: [jsxRuntime.jsx(Box, { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
                                         '&:hover': {
                                             textOverflow: 'clip',
                                         },
@@ -2191,7 +2107,7 @@ const MRT_TableHeadCell = (_a) => {
                                         whiteSpace: ((_h = (_g = columnDef.header) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 0) < 20
                                             ? 'nowrap'
                                             : 'normal',
-                                    }, title: columnDefType === 'data' ? columnDef.header : undefined, children: headerElement }), column.getCanFilter() && (jsxRuntime.jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table })), column.getCanSort() && (jsxRuntime.jsx(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps }))] }), columnDefType !== 'group' && (jsxRuntime.jsxs(Box__default["default"], { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' }, children: [showDragHandle && (jsxRuntime.jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
+                                    }, title: columnDefType === 'data' ? columnDef.header : undefined, children: headerElement }), column.getCanFilter() && (jsxRuntime.jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table })), column.getCanSort() && (jsxRuntime.jsx(MRT_TableHeadCellSortLabel, { header: header, table: table }))] }), columnDefType !== 'group' && (jsxRuntime.jsxs(Box, { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' }, children: [showDragHandle && (jsxRuntime.jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
                                         current: tableHeadCellRefs.current[column.id],
                                     } })), showColumnActions && (jsxRuntime.jsx(MRT_TableHeadCellColumnActionsButton, { header: header, table: table }))] })), column.getCanResize() && (jsxRuntime.jsx(MRT_TableHeadCellResizeHandle, { header: header, table: table }))] })), columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (jsxRuntime.jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }))] })));
 };
@@ -2203,7 +2119,7 @@ const MRT_TableHeadRow = (_a) => {
         headerGroup,
         table,
     })), { rest });
-    return (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.05), boxShadow: `4px 0 8px ${styles.alpha(theme.palette.common.black, 0.1)}`, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, top: 0 }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader) => {
+    return (jsxRuntime.jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, boxShadow: `4px 0 8px ${material.alpha(theme.palette.common.black, 0.1)}`, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, top: 0 }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader) => {
                 const header = virtualColumns
                     ? headerGroup.headers[headerOrVirtualHeader.index]
                     : headerOrVirtualHeader;
@@ -2219,12 +2135,12 @@ const MRT_LinearProgressBar = (_a) => {
         isTopToolbar,
         table,
     })), rest);
-    return (jsxRuntime.jsx(Collapse__default["default"], { in: showProgressBars !== false && (showProgressBars || isSaving), mountOnEnter: true, sx: {
+    return (jsxRuntime.jsx(Collapse, { in: showProgressBars !== false && (showProgressBars || isSaving), mountOnEnter: true, sx: {
             bottom: isTopToolbar ? 0 : undefined,
             position: 'absolute',
             top: !isTopToolbar ? 0 : undefined,
             width: '100%',
-        }, unmountOnExit: true, children: jsxRuntime.jsx(LinearProgress__default["default"], Object.assign({ "aria-busy": "true", "aria-label": "Loading", sx: { position: 'relative' } }, linearProgressProps)) }));
+        }, unmountOnExit: true, children: jsxRuntime.jsx(LinearProgress, Object.assign({ "aria-busy": "true", "aria-label": "Loading", sx: { position: 'relative' } }, linearProgressProps)) }));
 };
 
 const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
@@ -2241,7 +2157,7 @@ const MRT_TablePagination = (_a) => {
     const firstRowIndex = pageIndex * pageSize;
     const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
     const _b = paginationProps !== null && paginationProps !== void 0 ? paginationProps : {}, { rowsPerPageOptions = defaultRowsPerPage, showFirstButton = showFirstLastPageButtons, showLastButton = showFirstLastPageButtons, showRowsPerPage = true } = _b, _rest = __rest(_b, ["rowsPerPageOptions", "showFirstButton", "showLastButton", "showRowsPerPage"]);
-    return (jsxRuntime.jsxs(Box__default["default"], { sx: {
+    return (jsxRuntime.jsxs(Box, { sx: {
             alignItems: 'center',
             display: 'flex',
             flexWrap: 'wrap',
@@ -2257,12 +2173,12 @@ const MRT_TablePagination = (_a) => {
             px: '8px',
             py: '12px',
             zIndex: 2,
-        }, children: [showRowsPerPage && (jsxRuntime.jsxs(Box__default["default"], { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsxRuntime.jsx(InputLabel__default["default"], { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsxRuntime.jsx(Select__default["default"], { disableUnderline: true, id: "mrt-rows-per-page", inputProps: { 'aria-label': localization.rowsPerPage }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard", children: rowsPerPageOptions.map((value) => (jsxRuntime.jsx(MenuItem__default["default"], { sx: { m: 0 }, value: value, children: value }, value))) })] })), paginationDisplayMode === 'pages' ? (jsxRuntime.jsx(Pagination__default["default"], Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsxRuntime.jsx(PaginationItem__default["default"], Object.assign({ slots: {
+        }, children: [showRowsPerPage && (jsxRuntime.jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsxRuntime.jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsxRuntime.jsx(Select, { disableUnderline: true, id: "mrt-rows-per-page", inputProps: { 'aria-label': localization.rowsPerPage }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard", children: rowsPerPageOptions.map((value) => (jsxRuntime.jsx(MenuItem, { sx: { m: 0 }, value: value, children: value }, value))) })] })), paginationDisplayMode === 'pages' ? (jsxRuntime.jsx(Pagination, Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsxRuntime.jsx(PaginationItem, Object.assign({ slots: {
                         first: FirstPageIcon,
                         last: LastPageIcon,
                         next: ChevronRightIcon,
                         previous: ChevronLeftIcon,
-                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, _rest))) : paginationDisplayMode === 'default' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography__default["default"], { align: "center", sx: { mb: 0, minWidth: '8ch', mx: '4px' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxRuntime.jsxs(Box__default["default"], { gap: "xs", children: [showFirstButton && (jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(0), size: "small", children: jsxRuntime.jsx(FirstPageIcon, {}) })), jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsxRuntime.jsx(ChevronLeftIcon, {}) }), jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsxRuntime.jsx(ChevronRightIcon, {}) }), showLastButton && (jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsxRuntime.jsx(LastPageIcon, {}) }))] })] })) : null] }));
+                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, _rest))) : paginationDisplayMode === 'default' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography, { align: "center", sx: { mb: 0, minWidth: '8ch', mx: '4px' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxRuntime.jsxs(Box, { gap: "xs", children: [showFirstButton && (jsxRuntime.jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(0), size: "small", children: jsxRuntime.jsx(FirstPageIcon, {}) })), jsxRuntime.jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsxRuntime.jsx(ChevronLeftIcon, {}) }), jsxRuntime.jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsxRuntime.jsx(ChevronRightIcon, {}) }), showLastButton && (jsxRuntime.jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsxRuntime.jsx(LastPageIcon, {}) }))] })] })) : null] }));
 };
 
 const MRT_GlobalFilterTextField = (_a) => {
@@ -2302,10 +2218,10 @@ const MRT_GlobalFilterTextField = (_a) => {
         }
         isMounted.current = true;
     }, [globalFilter]);
-    return (jsxRuntime.jsxs(Collapse__default["default"], { in: showGlobalFilter, mountOnEnter: true, orientation: "horizontal", unmountOnExit: true, children: [jsxRuntime.jsx(TextField__default["default"], Object.assign({ InputProps: {
-                    endAdornment: (jsxRuntime.jsx(InputAdornment__default["default"], { position: "end", children: jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, title: (_b = localization.clearSearch) !== null && _b !== void 0 ? _b : '', children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small", children: jsxRuntime.jsx(CloseIcon, {}) }) }) }) })),
-                    startAdornment: enableGlobalFilterModes ? (jsxRuntime.jsx(InputAdornment__default["default"], { position: "start", children: jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, title: localization.changeSearchMode, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsxRuntime.jsx(SearchIcon, {}) }) }) })) : (jsxRuntime.jsx(SearchIcon, { style: { marginRight: '4px' } })),
-                }, onChange: handleChange, placeholder: localization.search, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard" }, textFieldProps, { inputRef: (inputRef) => {
+    return (jsxRuntime.jsxs(Collapse, { in: showGlobalFilter, mountOnEnter: true, orientation: "horizontal", unmountOnExit: true, children: [jsxRuntime.jsx(TextField, Object.assign({ InputProps: Object.assign(Object.assign({ endAdornment: (jsxRuntime.jsx(InputAdornment, { position: "end", children: jsxRuntime.jsx(Tooltip, { arrow: true, title: (_b = localization.clearSearch) !== null && _b !== void 0 ? _b : '', children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small", children: jsxRuntime.jsx(CloseIcon, {}) }) }) }) })), startAdornment: enableGlobalFilterModes ? (jsxRuntime.jsx(InputAdornment, { position: "start", children: jsxRuntime.jsx(Tooltip, { arrow: true, title: localization.changeSearchMode, children: jsxRuntime.jsx(IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsxRuntime.jsx(SearchIcon, {}) }) }) })) : (jsxRuntime.jsx(SearchIcon, { style: { marginRight: '4px' } })) }, textFieldProps.InputProps), { sx: (theme) => {
+                        var _a;
+                        return (Object.assign({ mb: 0 }, parseFromValuesOrFunc((_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.sx, theme)));
+                    } }), inputProps: Object.assign({ autoComplete: 'new-password' }, textFieldProps.inputProps), onChange: handleChange, placeholder: localization.search, size: "small", value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "outlined" }, textFieldProps, { inputRef: (inputRef) => {
                     searchInputRef.current = inputRef;
                     if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputRef) {
                         textFieldProps.inputRef = inputRef;
@@ -2354,9 +2270,9 @@ const MRT_SelectCheckbox = (_a) => {
             e.stopPropagation();
             (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
         }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.5rem', zIndex: 0 }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))), title: undefined });
-    return (jsxRuntime.jsx(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 : (selectAll
+    return (jsxRuntime.jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : (selectAll
             ? localization.toggleSelectAll
-            : localization.toggleSelectRow), children: enableMultiRowSelection === false ? (jsxRuntime.jsx(Radio__default["default"], Object.assign({}, commonProps))) : (jsxRuntime.jsx(Checkbox__default["default"], Object.assign({ indeterminate: selectAll
+            : localization.toggleSelectRow), children: enableMultiRowSelection === false ? (jsxRuntime.jsx(Radio, Object.assign({}, commonProps))) : (jsxRuntime.jsx(Checkbox, Object.assign({ indeterminate: selectAll
                 ? table.getIsSomeRowsSelected() && !allRowsSelected
                 : row === null || row === void 0 ? void 0 : row.getIsSomeSelected() }, commonProps))) }));
 };
@@ -2375,8 +2291,8 @@ const MRT_ToolbarAlertBanner = (_a) => {
     const selectedAlert = getSelectedRowModel().rows.length > 0
         ? (_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', getSelectedRowModel().rows.length.toString())) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', (rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length).toString())
         : null;
-    const groupedAlert = grouping.length > 0 ? (jsxRuntime.jsxs("span", { children: [localization.groupedBy, ' ', grouping.map((columnId, index) => (jsxRuntime.jsxs(react.Fragment, { children: [index > 0 ? localization.thenBy : '', jsxRuntime.jsx(Chip__default["default"], Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))] }, `${index}-${columnId}`)))] })) : null;
-    return (jsxRuntime.jsx(Collapse__default["default"], { in: showAlertBanner || !!selectedAlert || !!groupedAlert, timeout: stackAlertBanner ? 200 : 0, children: jsxRuntime.jsx(Alert__default["default"], Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => {
+    const groupedAlert = grouping.length > 0 ? (jsxRuntime.jsxs("span", { children: [localization.groupedBy, ' ', grouping.map((columnId, index) => (jsxRuntime.jsxs(react.Fragment, { children: [index > 0 ? localization.thenBy : '', jsxRuntime.jsx(Chip, Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))] }, `${index}-${columnId}`)))] })) : null;
+    return (jsxRuntime.jsx(Collapse, { in: showAlertBanner || !!selectedAlert || !!groupedAlert, timeout: stackAlertBanner ? 200 : 0, children: jsxRuntime.jsx(Alert, Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => {
                 var _a, _b;
                 return (Object.assign({ '& .MuiAlert-message': {
                         maxWidth: `calc(${(_b = (_a = tablePaperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 360}px - 1rem)`,
@@ -2390,7 +2306,7 @@ const MRT_ToolbarAlertBanner = (_a) => {
                 groupedAlert,
                 selectedAlert,
                 table,
-            })) !== null && _d !== void 0 ? _d : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && jsxRuntime.jsx(AlertTitle__default["default"], { children: alertProps.title }), jsxRuntime.jsxs(Stack__default["default"], { sx: {
+            })) !== null && _d !== void 0 ? _d : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && jsxRuntime.jsx(AlertTitle, { children: alertProps.title }), jsxRuntime.jsxs(Stack, { sx: {
                             p: positionToolbarAlertBanner !== 'head-overlay'
                                 ? '0.5rem 1rem'
                                 : density === 'spacious'
@@ -2398,7 +2314,7 @@ const MRT_ToolbarAlertBanner = (_a) => {
                                     : density === 'comfortable'
                                         ? '0.5rem 0.75rem'
                                         : '0.25rem 0.5rem',
-                        }, children: [alertProps === null || alertProps === void 0 ? void 0 : alertProps.children, (alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectedAlert || groupedAlert) && (jsxRuntime.jsx("br", {})), jsxRuntime.jsxs(Box__default["default"], { sx: { display: 'flex' }, children: [enableRowSelection &&
+                        }, children: [alertProps === null || alertProps === void 0 ? void 0 : alertProps.children, (alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectedAlert || groupedAlert) && (jsxRuntime.jsx("br", {})), jsxRuntime.jsxs(Box, { sx: { display: 'flex' }, children: [enableRowSelection &&
                                         enableSelectAll &&
                                         positionToolbarAlertBanner === 'head-overlay' && (jsxRuntime.jsx(MRT_SelectCheckbox, { selectAll: true, table: table })), ' ', selectedAlert] }), selectedAlert && groupedAlert && jsxRuntime.jsx("br", {}), groupedAlert] })] })) })) }));
 };
@@ -2420,7 +2336,39 @@ const MRT_ToolbarDropZone = (_a) => {
                 !grouping.includes(draggingColumn.id));
         }
     }, [enableGrouping, draggingColumn, grouping]);
-    return (jsxRuntime.jsx(Fade__default["default"], { in: showToolbarDropZone, children: jsxRuntime.jsx(Box__default["default"], Object.assign({ className: "Mui-ToolbarDropZone", onDragEnter: handleDragEnter }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', backdropFilter: 'blur(4px)', 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`, boxSizing: 'border-box', display: 'flex', height: '100%', justifyContent: 'center', position: 'absolute', width: '100%', zIndex: 4 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxRuntime.jsx(Typography__default["default"], { fontStyle: "italic", children: localization.dropToGroupBy.replace('{column}', (_c = (_b = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _b === void 0 ? void 0 : _b.header) !== null && _c !== void 0 ? _c : '') }) })) }));
+    return (jsxRuntime.jsx(Fade, { in: showToolbarDropZone, children: jsxRuntime.jsx(Box, Object.assign({ className: "Mui-ToolbarDropZone", onDragEnter: handleDragEnter }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', backdropFilter: 'blur(4px)', 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`, boxSizing: 'border-box', display: 'flex', height: '100%', justifyContent: 'center', position: 'absolute', width: '100%', zIndex: 4 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxRuntime.jsx(Typography, { fontStyle: "italic", children: localization.dropToGroupBy.replace('{column}', (_c = (_b = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _b === void 0 ? void 0 : _b.header) !== null && _c !== void 0 ? _c : '') }) })) }));
+};
+
+const MRT_BottomToolbar = (_a) => {
+    var { table } = _a, rest = __rest(_a, ["table"]);
+    const { getState, options: { enablePagination, muiBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions, }, refs: { bottomToolbarRef }, } = table;
+    const { isFullScreen } = getState();
+    const isMobile = useMediaQuery('(max-width:720px)');
+    const toolbarProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiBottomToolbarProps, { table })), rest);
+    const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
+    return (jsxRuntime.jsxs(Box, Object.assign({}, toolbarProps, { ref: (node) => {
+            if (node) {
+                bottomToolbarRef.current = node;
+                if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
+                    // @ts-ignore
+                    toolbarProps.ref.current = node;
+                }
+            }
+        }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, getCommonToolbarStyles({ table, theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `0 1px 2px -1px ${material.alpha(theme.palette.grey[700], 0.5)} inset`, left: 0, position: isFullScreen ? 'fixed' : 'relative', right: 0 }), parseFromValuesOrFunc(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx, theme))), children: [jsxRuntime.jsx(MRT_LinearProgressBar, { isTopToolbar: false, table: table }), positionToolbarAlertBanner === 'bottom' && (jsxRuntime.jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsxRuntime.jsx(MRT_ToolbarDropZone, { table: table })), jsxRuntime.jsxs(Box, { sx: {
+                    alignItems: 'center',
+                    boxSizing: 'border-box',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    p: '0.5rem',
+                    width: '100%',
+                }, children: [renderBottomToolbarCustomActions ? (renderBottomToolbarCustomActions({ table })) : (jsxRuntime.jsx("span", {})), jsxRuntime.jsx(Box, { sx: {
+                            display: 'flex',
+                            justifyContent: 'flex-end',
+                            position: stackAlertBanner ? 'relative' : 'absolute',
+                            right: 0,
+                            top: 0,
+                        }, children: enablePagination &&
+                            ['both', 'bottom'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsxRuntime.jsx(MRT_TablePagination, { position: "bottom", table: table })) })] })] })));
 };
 
 const MRT_ColumnPinningButtons = (_a) => {
@@ -2429,9 +2377,9 @@ const MRT_ColumnPinningButtons = (_a) => {
     const handlePinColumn = (pinDirection) => {
         column.pin(pinDirection);
     };
-    return (jsxRuntime.jsx(Box__default["default"], Object.assign({}, rest, { sx: (theme) => (Object.assign({ minWidth: '70px', textAlign: 'center' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: column.getIsPinned() ? (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, title: localization.unpin, children: jsxRuntime.jsx(IconButton__default["default"], { onClick: () => handlePinColumn(false), size: "small", children: jsxRuntime.jsx(PushPinIcon, {}) }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, title: localization.pinToLeft, children: jsxRuntime.jsx(IconButton__default["default"], { onClick: () => handlePinColumn('left'), size: "small", children: jsxRuntime.jsx(PushPinIcon, { style: {
+    return (jsxRuntime.jsx(Box, Object.assign({}, rest, { sx: (theme) => (Object.assign({ minWidth: '70px', textAlign: 'center' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: column.getIsPinned() ? (jsxRuntime.jsx(Tooltip, { arrow: true, title: localization.unpin, children: jsxRuntime.jsx(IconButton, { onClick: () => handlePinColumn(false), size: "small", children: jsxRuntime.jsx(PushPinIcon, {}) }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { arrow: true, title: localization.pinToLeft, children: jsxRuntime.jsx(IconButton, { onClick: () => handlePinColumn('left'), size: "small", children: jsxRuntime.jsx(PushPinIcon, { style: {
                                 transform: 'rotate(90deg)',
-                            } }) }) }), jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, title: localization.pinToRight, children: jsxRuntime.jsx(IconButton__default["default"], { onClick: () => handlePinColumn('right'), size: "small", children: jsxRuntime.jsx(PushPinIcon, { style: {
+                            } }) }) }), jsxRuntime.jsx(Tooltip, { arrow: true, title: localization.pinToRight, children: jsxRuntime.jsx(IconButton, { onClick: () => handlePinColumn('right'), size: "small", children: jsxRuntime.jsx(PushPinIcon, { style: {
                                 transform: 'rotate(-90deg)',
                             } }) }) })] })) })));
 };
@@ -2475,26 +2423,26 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
             setHoveredColumn(column);
         }
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ disableRipple: true, onDragEnter: handleDragEnter, ref: menuItemRef }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', justifyContent: 'flex-start', my: 0, opacity: isDragging ? 0.5 : 1, outline: isDragging
-                        ? `2px dashed ${theme.palette.divider}`
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem, Object.assign({ disableRipple: true, onDragEnter: handleDragEnter, ref: menuItemRef }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', justifyContent: 'flex-start', my: 0, opacity: isDragging ? 0.5 : 1, outline: isDragging
+                        ? `2px dashed ${theme.palette.grey[500]}`
                         : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
-                            ? `2px dashed ${theme.palette.primary.main}`
-                            : 'none', outlineOffset: '-2px', pl: `${(column.depth + 0.5) * 2}rem`, py: '6px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxRuntime.jsxs(Box__default["default"], { sx: {
+                            ? `2px dashed ${getMRTTheme(table, theme).draggingBorderColor}`
+                            : 'none', outlineOffset: '-2px', pl: `${(column.depth + 0.5) * 2}rem`, py: '6px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxRuntime.jsxs(Box, { sx: {
                         display: 'flex',
                         flexWrap: 'nowrap',
                         gap: '8px',
                     }, children: [columnDefType !== 'group' &&
                             enableColumnOrdering &&
                             !allColumns.some((col) => col.columnDef.columnDefType === 'group') &&
-                            (columnDef.enableColumnOrdering !== false ? (jsxRuntime.jsx(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (jsxRuntime.jsx(Box__default["default"], { sx: { width: '28px' } }))), enableColumnPinning &&
-                            (column.getCanPin() ? (jsxRuntime.jsx(MRT_ColumnPinningButtons, { column: column, table: table })) : (jsxRuntime.jsx(Box__default["default"], { sx: { width: '70px' } }))), enableHiding ? (jsxRuntime.jsx(FormControlLabel__default["default"], { checked: switchChecked, componentsProps: {
+                            (columnDef.enableColumnOrdering !== false ? (jsxRuntime.jsx(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (jsxRuntime.jsx(Box, { sx: { width: '28px' } }))), enableColumnPinning &&
+                            (column.getCanPin() ? (jsxRuntime.jsx(MRT_ColumnPinningButtons, { column: column, table: table })) : (jsxRuntime.jsx(Box, { sx: { width: '70px' } }))), enableHiding ? (jsxRuntime.jsx(FormControlLabel, { checked: switchChecked, componentsProps: {
                                 typography: {
                                     sx: {
                                         mb: 0,
                                         opacity: columnDefType !== 'display' ? 1 : 0.5,
                                     },
                                 },
-                            }, control: jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility, children: jsxRuntime.jsx(Switch__default["default"], {}) }), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsxRuntime.jsx(Typography__default["default"], { sx: { alignSelf: 'center' }, children: columnDef.header }))] }) })), (_b = column.columns) === null || _b === void 0 ? void 0 : _b.map((c, i) => (jsxRuntime.jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
+                            }, control: jsxRuntime.jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility, children: jsxRuntime.jsx(Switch, {}) }), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsxRuntime.jsx(Typography, { sx: { alignSelf: 'center' }, children: columnDef.header }))] }) })), (_b = column.columns) === null || _b === void 0 ? void 0 : _b.map((c, i) => (jsxRuntime.jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
 };
 
 const MRT_ShowHideColumnsMenu = (_a) => {
@@ -2526,14 +2474,14 @@ const MRT_ShowHideColumnsMenu = (_a) => {
         getRightLeafColumns(),
     ]);
     const [hoveredColumn, setHoveredColumn] = react.useState(null);
-    return (jsxRuntime.jsxs(Menu__default["default"], Object.assign({ MenuListProps: {
+    return (jsxRuntime.jsxs(Menu, Object.assign({ MenuListProps: {
             dense: density === 'compact',
-        }, anchorEl: anchorEl, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [jsxRuntime.jsxs(Box__default["default"], { sx: {
+        }, anchorEl: anchorEl, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [jsxRuntime.jsxs(Box, { sx: {
                     display: 'flex',
                     justifyContent: 'space-between',
                     p: '0.5rem',
                     pt: 0,
-                }, children: [enableHiding && (jsxRuntime.jsx(Button__default["default"], { disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns, children: localization.hideAll })), enableColumnOrdering && (jsxRuntime.jsx(Button__default["default"], { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)), children: localization.resetOrder })), enableColumnPinning && (jsxRuntime.jsx(Button__default["default"], { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsxRuntime.jsx(Button__default["default"], { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true), children: localization.showAll }))] }), jsxRuntime.jsx(Divider__default["default"], {}), allColumns.map((column, index) => (jsxRuntime.jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
+                }, children: [enableHiding && (jsxRuntime.jsx(Button, { disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns, children: localization.hideAll })), enableColumnOrdering && (jsxRuntime.jsx(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)), children: localization.resetOrder })), enableColumnPinning && (jsxRuntime.jsx(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsxRuntime.jsx(Button, { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true), children: localization.showAll }))] }), jsxRuntime.jsx(Divider, {}), allColumns.map((column, index) => (jsxRuntime.jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
 };
 
 const MRT_ShowHideColumnsButton = (_a) => {
@@ -2544,7 +2492,7 @@ const MRT_ShowHideColumnsButton = (_a) => {
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget);
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideColumns, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest, { title: undefined, children: jsxRuntime.jsx(ViewColumnIcon, {}) })) }), anchorEl && (jsxRuntime.jsx(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideColumns, children: jsxRuntime.jsx(IconButton, Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest, { title: undefined, children: jsxRuntime.jsx(ViewColumnIcon, {}) })) }), anchorEl && (jsxRuntime.jsx(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table }))] }));
 };
 
 const MRT_ToggleDensePaddingButton = (_a) => {
@@ -2560,7 +2508,7 @@ const MRT_ToggleDensePaddingButton = (_a) => {
                 : 'comfortable';
         setDensity(nextDensity);
     };
-    return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleDensity, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest, { title: undefined, children: density === 'compact' ? (jsxRuntime.jsx(DensitySmallIcon, {})) : density === 'comfortable' ? (jsxRuntime.jsx(DensityMediumIcon, {})) : (jsxRuntime.jsx(DensityLargeIcon, {})) })) }));
+    return (jsxRuntime.jsx(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleDensity, children: jsxRuntime.jsx(IconButton, Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest, { title: undefined, children: density === 'compact' ? (jsxRuntime.jsx(DensitySmallIcon, {})) : density === 'comfortable' ? (jsxRuntime.jsx(DensityMediumIcon, {})) : (jsxRuntime.jsx(DensityLargeIcon, {})) })) }));
 };
 
 const MRT_ToggleFiltersButton = (_a) => {
@@ -2571,7 +2519,7 @@ const MRT_ToggleFiltersButton = (_a) => {
     const handleToggleShowFilters = () => {
         setShowColumnFilters(!showColumnFilters);
     };
-    return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined, children: showColumnFilters ? jsxRuntime.jsx(FilterListOffIcon, {}) : jsxRuntime.jsx(FilterListIcon, {}) })) }));
+    return (jsxRuntime.jsx(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters, children: jsxRuntime.jsx(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined, children: showColumnFilters ? jsxRuntime.jsx(FilterListOffIcon, {}) : jsxRuntime.jsx(FilterListIcon, {}) })) }));
 };
 
 const MRT_ToggleFullScreenButton = (_a) => {
@@ -2584,7 +2532,7 @@ const MRT_ToggleFullScreenButton = (_a) => {
         setTooltipOpened(false);
         setIsFullScreen(!isFullScreen);
     };
-    return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, open: tooltipOpened, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.toggleFullScreen, onClick: handleToggleFullScreen, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false) }, rest, { title: undefined, children: isFullScreen ? jsxRuntime.jsx(FullscreenExitIcon, {}) : jsxRuntime.jsx(FullscreenIcon, {}) })) }));
+    return (jsxRuntime.jsx(Tooltip, { arrow: true, open: tooltipOpened, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen, children: jsxRuntime.jsx(IconButton, Object.assign({ "aria-label": localization.toggleFullScreen, onClick: handleToggleFullScreen, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false) }, rest, { title: undefined, children: isFullScreen ? jsxRuntime.jsx(FullscreenExitIcon, {}) : jsxRuntime.jsx(FullscreenIcon, {}) })) }));
 };
 
 const MRT_ToggleGlobalFilterButton = (_a) => {
@@ -2596,14 +2544,14 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
         setShowGlobalFilter(!showGlobalFilter);
         queueMicrotask(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     };
-    return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": (_c = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _c !== void 0 ? _c : localization.showHideSearch, disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined, children: showGlobalFilter ? jsxRuntime.jsx(SearchOffIcon, {}) : jsxRuntime.jsx(SearchIcon, {}) })) }));
+    return (jsxRuntime.jsx(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch, children: jsxRuntime.jsx(IconButton, Object.assign({ "aria-label": (_c = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _c !== void 0 ? _c : localization.showHideSearch, disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined, children: showGlobalFilter ? jsxRuntime.jsx(SearchOffIcon, {}) : jsxRuntime.jsx(SearchIcon, {}) })) }));
 };
 
 const MRT_ToolbarInternalButtons = (_a) => {
     var _b;
     var { table } = _a, rest = __rest(_a, ["table"]);
     const { options: { columnFilterDisplayMode, enableColumnFilters, enableColumnOrdering, enableColumnPinning, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, initialState, renderToolbarInternalActions, }, } = table;
-    return (jsxRuntime.jsx(Box__default["default"], Object.assign({}, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', display: 'flex', zIndex: 3 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: (_b = renderToolbarInternalActions === null || renderToolbarInternalActions === void 0 ? void 0 : renderToolbarInternalActions({
+    return (jsxRuntime.jsx(Box, Object.assign({}, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', display: 'flex', zIndex: 3 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: (_b = renderToolbarInternalActions === null || renderToolbarInternalActions === void 0 ? void 0 : renderToolbarInternalActions({
             table,
         })) !== null && _b !== void 0 ? _b : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [enableFilters &&
                     enableGlobalFilter &&
@@ -2612,88 +2560,48 @@ const MRT_ToolbarInternalButtons = (_a) => {
                     columnFilterDisplayMode !== 'popover' && (jsxRuntime.jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enableColumnPinning) && (jsxRuntime.jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsxRuntime.jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsxRuntime.jsx(MRT_ToggleFullScreenButton, { table: table }))] })) })));
 };
 
-const commonToolbarStyles = ({ theme }) => ({
-    alignItems: 'flex-start',
-    backgroundColor: styles.lighten(theme.palette.background.default, 0.05),
-    display: 'grid',
-    flexWrap: 'wrap-reverse',
-    minHeight: '3.5rem',
-    overflow: 'hidden',
-    position: 'relative',
-    transition: 'all 150ms ease-in-out',
-    zIndex: 1,
-});
 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 = useMediaQuery__default["default"]('(max-width:720px)');
+    const isMobile = useMediaQuery('(max-width:720px)');
     const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
     const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
-    return (jsxRuntime.jsxs(Box__default["default"], Object.assign({}, toolbarProps, { ref: (ref) => {
+    return (jsxRuntime.jsxs(Box, Object.assign({}, toolbarProps, { ref: (ref) => {
             topToolbarRef.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 })), { position: isFullScreen ? 'sticky' : 'relative', top: isFullScreen ? '0' : undefined }), parseFromValuesOrFunc(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx, theme))), children: [positionToolbarAlertBanner === 'top' && (jsxRuntime.jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsxRuntime.jsx(MRT_ToolbarDropZone, { table: table })), jsxRuntime.jsxs(Box__default["default"], { sx: {
+        }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, getCommonToolbarStyles({ table, theme })), { position: isFullScreen ? 'sticky' : 'relative', top: isFullScreen ? '0' : undefined }), parseFromValuesOrFunc(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx, theme))), children: [positionToolbarAlertBanner === 'top' && (jsxRuntime.jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsxRuntime.jsx(MRT_ToolbarDropZone, { table: table })), jsxRuntime.jsxs(Box, { sx: {
                     alignItems: 'flex-start',
                     boxSizing: 'border-box',
                     display: 'flex',
+                    gap: '0.5rem',
                     justifyContent: 'space-between',
                     p: '0.5rem',
                     position: stackAlertBanner ? 'relative' : 'absolute',
                     right: 0,
                     top: 0,
                     width: '100%',
-                }, children: [enableGlobalFilter && positionGlobalFilter === 'left' && (jsxRuntime.jsx(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : jsxRuntime.jsx("span", {}), enableToolbarInternalActions ? (jsxRuntime.jsxs(Box__default["default"], { sx: {
+                }, children: [enableGlobalFilter && positionGlobalFilter === 'left' && (jsxRuntime.jsx(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : jsxRuntime.jsx("span", {}), enableToolbarInternalActions ? (jsxRuntime.jsxs(Box, { sx: {
+                            alignItems: 'center',
                             display: 'flex',
                             flexWrap: 'wrap-reverse',
+                            gap: '0.5rem',
                             justifyContent: 'flex-end',
                         }, children: [enableGlobalFilter && positionGlobalFilter === 'right' && (jsxRuntime.jsx(MRT_GlobalFilterTextField, { table: table })), jsxRuntime.jsx(MRT_ToolbarInternalButtons, { table: table })] })) : (enableGlobalFilter &&
                         positionGlobalFilter === 'right' && (jsxRuntime.jsx(MRT_GlobalFilterTextField, { table: table })))] }), enablePagination &&
                 ['both', 'top'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsxRuntime.jsx(MRT_TablePagination, { position: "top", table: table })), jsxRuntime.jsx(MRT_LinearProgressBar, { isTopToolbar: true, table: table })] })));
 };
 
-const MRT_BottomToolbar = (_a) => {
-    var { table } = _a, rest = __rest(_a, ["table"]);
-    const { getState, options: { enablePagination, muiBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions, }, refs: { bottomToolbarRef }, } = table;
-    const { isFullScreen } = getState();
-    const isMobile = useMediaQuery__default["default"]('(max-width:720px)');
-    const toolbarProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiBottomToolbarProps, { table })), rest);
-    const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
-    return (jsxRuntime.jsxs(Box__default["default"], Object.assign({}, toolbarProps, { ref: (node) => {
-            if (node) {
-                bottomToolbarRef.current = node;
-                if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
-                    // @ts-ignore
-                    toolbarProps.ref.current = node;
-                }
-            }
-        }, 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 }), parseFromValuesOrFunc(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx, theme))), children: [jsxRuntime.jsx(MRT_LinearProgressBar, { isTopToolbar: false, table: table }), positionToolbarAlertBanner === 'bottom' && (jsxRuntime.jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsxRuntime.jsx(MRT_ToolbarDropZone, { table: table })), jsxRuntime.jsxs(Box__default["default"], { sx: {
-                    alignItems: 'center',
-                    boxSizing: 'border-box',
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    p: '0.5rem',
-                    width: '100%',
-                }, children: [renderBottomToolbarCustomActions ? (renderBottomToolbarCustomActions({ table })) : (jsxRuntime.jsx("span", {})), jsxRuntime.jsx(Box__default["default"], { sx: {
-                            display: 'flex',
-                            justifyContent: 'flex-end',
-                            position: stackAlertBanner ? 'relative' : 'absolute',
-                            right: 0,
-                            top: 0,
-                        }, children: enablePagination &&
-                            ['both', 'bottom'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsxRuntime.jsx(MRT_TablePagination, { position: "bottom", table: table })) })] })] })));
-};
-
 const MRT_TableHead = (_a) => {
     var { table, virtualColumns, virtualPaddingLeft, virtualPaddingRight } = _a, rest = __rest(_a, ["table", "virtualColumns", "virtualPaddingLeft", "virtualPaddingRight"]);
     const { getHeaderGroups, getSelectedRowModel, getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner, }, refs: { tableHeadRef }, } = table;
     const { isFullScreen, showAlertBanner } = getState();
     const tableHeadProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadProps, { table })), rest);
     const stickyHeader = enableStickyHeader || isFullScreen;
-    return (jsxRuntime.jsx(TableHead__default["default"], Object.assign({}, tableHeadProps, { ref: (ref) => {
+    return (jsxRuntime.jsx(TableHead, Object.assign({}, tableHeadProps, { ref: (ref) => {
             tableHeadRef.current = ref;
             if (tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.ref) {
                 // @ts-ignore
@@ -2779,16 +2687,16 @@ const MRT_Table = (_a) => {
         virtualPaddingLeft,
         virtualPaddingRight,
     };
-    return (jsxRuntime.jsxs(Table__default["default"], Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), children: [enableTableHead && jsxRuntime.jsx(MRT_TableHead, Object.assign({}, props)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsxRuntime.jsx(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (jsxRuntime.jsx(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))), enableTableFooter && jsxRuntime.jsx(MRT_TableFooter, Object.assign({}, props))] })));
+    return (jsxRuntime.jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), children: [enableTableHead && jsxRuntime.jsx(MRT_TableHead, Object.assign({}, props)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsxRuntime.jsx(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (jsxRuntime.jsx(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))), enableTableFooter && jsxRuntime.jsx(MRT_TableFooter, Object.assign({}, props))] })));
 };
 
 const MRT_TableLoadingOverlay = (_a) => {
     var { table } = _a, rest = __rest(_a, ["table"]);
     const { options: { localization, muiCircularProgressProps }, } = table;
     const circularProgressProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCircularProgressProps, { table })), rest);
-    return (jsxRuntime.jsx(Box__default["default"], { sx: (theme) => ({
+    return (jsxRuntime.jsx(Box, { sx: (theme) => ({
             alignItems: 'center',
-            backgroundColor: styles.alpha(styles.lighten(theme.palette.background.paper, 0.05), 0.5),
+            backgroundColor: styles.alpha(getMRTTheme(table, theme).baseBackgroundColor, 0.5),
             bottom: 0,
             display: 'flex',
             justifyContent: 'center',
@@ -2799,7 +2707,7 @@ const MRT_TableLoadingOverlay = (_a) => {
             top: 0,
             width: '100%',
             zIndex: 2,
-        }), children: jsxRuntime.jsx(CircularProgress__default["default"], Object.assign({ "aria-label": localization.noRecordsToDisplay, id: "mrt-progress" }, circularProgressProps)) }));
+        }), children: jsxRuntime.jsx(CircularProgress, Object.assign({ "aria-label": localization.noRecordsToDisplay, id: "mrt-progress" }, circularProgressProps)) }));
 };
 
 const MRT_EditActionButtons = (_a) => {
@@ -2846,22 +2754,22 @@ const MRT_EditActionButtons = (_a) => {
             });
         }
     };
-    return (jsxRuntime.jsx(Box__default["default"], { onClick: (e) => e.stopPropagation(), sx: (theme) => (Object.assign({ display: 'flex', gap: '0.75rem' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: variant === 'icon' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, title: localization.cancel, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.cancel, onClick: handleCancel, children: jsxRuntime.jsx(CancelIcon, {}) }) }), jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, title: localization.save, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.save, color: "info", onClick: handleSubmitRow, children: isSaving ? jsxRuntime.jsx(CircularProgress__default["default"], { size: 18 }) : jsxRuntime.jsx(SaveIcon, {}) }) })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button__default["default"], { onClick: handleCancel, sx: { minWidth: '100px' }, children: localization.cancel }), jsxRuntime.jsxs(Button__default["default"], { onClick: handleSubmitRow, sx: { minWidth: '100px' }, variant: "contained", children: [isSaving && jsxRuntime.jsx(CircularProgress__default["default"], { color: "inherit", size: 18 }), localization.save] })] })) }));
+    return (jsxRuntime.jsx(Box, { onClick: (e) => e.stopPropagation(), sx: (theme) => (Object.assign({ display: 'flex', gap: '0.75rem' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: variant === 'icon' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { arrow: true, title: localization.cancel, children: jsxRuntime.jsx(IconButton, { "aria-label": localization.cancel, onClick: handleCancel, children: jsxRuntime.jsx(CancelIcon, {}) }) }), jsxRuntime.jsx(Tooltip, { arrow: true, title: localization.save, children: jsxRuntime.jsx(IconButton, { "aria-label": localization.save, color: "info", onClick: handleSubmitRow, children: isSaving ? jsxRuntime.jsx(CircularProgress, { size: 18 }) : jsxRuntime.jsx(SaveIcon, {}) }) })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button, { onClick: handleCancel, sx: { minWidth: '100px' }, children: localization.cancel }), jsxRuntime.jsxs(Button, { onClick: handleSubmitRow, sx: { minWidth: '100px' }, variant: "contained", children: [isSaving && jsxRuntime.jsx(CircularProgress, { color: "inherit", size: 18 }), localization.save] })] })) }));
 };
 
 const MRT_EditRowModal = (_a) => {
     var _b;
     var { open, table } = _a, rest = __rest(_a, ["open", "table"]);
-    const { getState, options: { localization, muiCreateRowModalProps, muiEditRowModalProps, onCreatingRowCancel, onEditingRowCancel, renderCreateRowModalContent, renderEditRowModalContent, }, setCreatingRow, setEditingRow, } = table;
+    const { getState, options: { localization, muiCreateRowModalProps, muiEditRowDialogProps, onCreatingRowCancel, onEditingRowCancel, renderCreateRowDialogContent, renderEditRowDialogContent, }, setCreatingRow, setEditingRow, } = table;
     const { creatingRow, editingRow } = getState();
     const row = (creatingRow !== null && creatingRow !== void 0 ? creatingRow : editingRow);
-    const dialogProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditRowModalProps, { row, table })), (creatingRow &&
+    const dialogProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditRowDialogProps, { row, table })), (creatingRow &&
         parseFromValuesOrFunc(muiCreateRowModalProps, { row, table }))), rest);
     const internalEditComponents = row
         .getAllCells()
         .filter((cell) => cell.column.columnDef.columnDefType === 'data')
         .map((cell) => (jsxRuntime.jsx(MRT_EditCellTextField, { cell: cell, table: table }, cell.id)));
-    return (jsxRuntime.jsx(Dialog__default["default"], Object.assign({ fullWidth: true, maxWidth: "xs", onClose: (event, reason) => {
+    return (jsxRuntime.jsx(Dialog, Object.assign({ fullWidth: true, maxWidth: "xs", onClose: (event, reason) => {
             var _a;
             if (creatingRow) {
                 onCreatingRowCancel === null || onCreatingRowCancel === void 0 ? void 0 : onCreatingRowCancel({ row, table });
@@ -2874,20 +2782,20 @@ const MRT_EditRowModal = (_a) => {
             row._valuesCache = {}; //reset values cache
             (_a = dialogProps.onClose) === null || _a === void 0 ? void 0 : _a.call(dialogProps, event, reason);
         }, open: open }, dialogProps, { children: (_b = ((creatingRow &&
-            (renderCreateRowModalContent === null || renderCreateRowModalContent === void 0 ? void 0 : renderCreateRowModalContent({
+            (renderCreateRowDialogContent === null || renderCreateRowDialogContent === void 0 ? void 0 : renderCreateRowDialogContent({
                 internalEditComponents,
                 row,
                 table,
             }))) ||
-            (renderEditRowModalContent === null || renderEditRowModalContent === void 0 ? void 0 : renderEditRowModalContent({
+            (renderEditRowDialogContent === null || renderEditRowDialogContent === void 0 ? void 0 : renderEditRowDialogContent({
                 internalEditComponents,
                 row,
                 table,
-            })))) !== null && _b !== void 0 ? _b : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DialogTitle__default["default"], { sx: { textAlign: 'center' }, children: localization.edit }), jsxRuntime.jsx(DialogContent__default["default"], { children: jsxRuntime.jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsxRuntime.jsx(Stack__default["default"], { sx: {
+            })))) !== null && _b !== void 0 ? _b : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DialogTitle, { sx: { textAlign: 'center' }, children: localization.edit }), jsxRuntime.jsx(DialogContent, { children: jsxRuntime.jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsxRuntime.jsx(Stack, { sx: {
                                 gap: '32px',
                                 paddingTop: '16px',
                                 width: '100%',
-                            }, children: internalEditComponents }) }) }), jsxRuntime.jsx(DialogActions__default["default"], { sx: { p: '1.25rem' }, children: jsxRuntime.jsx(MRT_EditActionButtons, { row: row, table: table, variant: "text" }) })] })) })));
+                            }, children: internalEditComponents }) }) }), jsxRuntime.jsx(DialogActions, { sx: { p: '1.25rem' }, children: jsxRuntime.jsx(MRT_EditActionButtons, { row: row, table: table, variant: "text" }) })] })) })));
 };
 
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
@@ -2912,7 +2820,7 @@ const MRT_TableContainer = (_a) => {
     });
     const createModalOpen = createDisplayMode === 'modal' && creatingRow;
     const editModalOpen = editDisplayMode === 'modal' && editingRow;
-    return (jsxRuntime.jsxs(TableContainer__default["default"], Object.assign({ "aria-busy": loading, "aria-describedby": loading ? 'mrt-progress' : undefined }, tableContainerProps, { ref: (node) => {
+    return (jsxRuntime.jsxs(TableContainer, Object.assign({ "aria-busy": loading, "aria-describedby": loading ? 'mrt-progress' : undefined }, tableContainerProps, { ref: (node) => {
             if (node) {
                 tableContainerRef.current = node;
                 if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
@@ -2933,7 +2841,7 @@ const MRT_TablePaper = (_a) => {
     const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
     const { isFullScreen } = getState();
     const tablePaperProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTablePaperProps, { table })), rest);
-    return (jsxRuntime.jsxs(Paper__default["default"], Object.assign({ elevation: 2 }, tablePaperProps, { ref: (ref) => {
+    return (jsxRuntime.jsxs(Paper, Object.assign({ elevation: 2 }, tablePaperProps, { ref: (ref) => {
             tablePaperRef.current = ref;
             if (tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.ref) {
                 //@ts-ignore
@@ -2952,7 +2860,7 @@ const MRT_TablePaper = (_a) => {
                 right: 0,
                 top: 0,
                 width: '100vw',
-                zIndex: 9999,
+                zIndex: 999,
             }
             : {})), tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), sx: (theme) => (Object.assign({ overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx, theme))), children: [enableTopToolbar &&
                 ((_b = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(MRT_TopToolbar, { table: table }))), jsxRuntime.jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
@@ -2969,7 +2877,7 @@ const MRT_RowPinButton = (_a) => {
         event.stopPropagation();
         row.pin(isPinned ? false : pinningPosition);
     };
-    return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, open: tooltipOpened, title: isPinned ? localization.unpin : localization.pin, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.pin, onClick: handleTogglePin, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false), size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '24px', width: '24px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: isPinned ? (jsxRuntime.jsx(CloseIcon, {})) : (jsxRuntime.jsx(PushPinIcon, { fontSize: "small", style: {
+    return (jsxRuntime.jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, open: tooltipOpened, title: isPinned ? localization.unpin : localization.pin, children: jsxRuntime.jsx(IconButton, Object.assign({ "aria-label": localization.pin, onClick: handleTogglePin, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false), size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '24px', width: '24px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: isPinned ? (jsxRuntime.jsx(CloseIcon, {})) : (jsxRuntime.jsx(PushPinIcon, { fontSize: "small", style: {
                     transform: `rotate(${rowPinningDisplayMode === 'sticky'
                         ? 135
                         : pinningPosition === 'top'
@@ -2988,7 +2896,7 @@ const MRT_TableBodyRowPinButton = (_a) => {
     const rowPinButtonProps = Object.assign({ row,
         table }, rest);
     if (rowPinningDisplayMode === 'top-and-bottom' && !row.getIsPinned()) {
-        return (jsxRuntime.jsxs(Box__default["default"], { sx: {
+        return (jsxRuntime.jsxs(Box, { sx: {
                 display: 'flex',
                 flexDirection: density === 'compact' ? 'row' : 'column',
             }, children: [jsxRuntime.jsx(MRT_RowPinButton, Object.assign({ pinningPosition: "top" }, rowPinButtonProps)), jsxRuntime.jsx(MRT_RowPinButton, Object.assign({ pinningPosition: "bottom" }, rowPinButtonProps))] }));
@@ -3005,7 +2913,7 @@ const MRT_ExpandAllButton = (_a) => {
         table,
     })), rest);
     const isAllRowsExpanded = getIsAllRowsExpanded();
-    return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _b !== void 0 ? _b : (isAllRowsExpanded ? localization.collapseAll : localization.expandAll), children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_c = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _c !== void 0 ? _c : (jsxRuntime.jsx(KeyboardDoubleArrowDownIcon, { style: {
+    return (jsxRuntime.jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _b !== void 0 ? _b : (isAllRowsExpanded ? localization.collapseAll : localization.expandAll), children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_c = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _c !== void 0 ? _c : (jsxRuntime.jsx(KeyboardDoubleArrowDownIcon, { style: {
                         transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
                         transition: 'transform 150ms',
                     } })) })) }) }));
@@ -3027,7 +2935,7 @@ 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 (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : (isExpanded ? localization.collapse : localization.expand), children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', opacity: !canExpand && !renderDetailPanel ? 0.3 : 1, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(ExpandMoreIcon, { style: {
+    return (jsxRuntime.jsx(Tooltip, { arrow: true, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : (isExpanded ? localization.collapse : localization.expand), children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', opacity: !canExpand && !renderDetailPanel ? 0.3 : 1, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(ExpandMoreIcon, { style: {
                         transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
                         transition: 'transform 150ms',
                     } })) })) }) }));
@@ -3037,9 +2945,9 @@ const MRT_RowActionMenu = (_a) => {
     var { anchorEl, handleEdit, row, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "handleEdit", "row", "setAnchorEl", "table"]);
     const { getState, options: { enableEditing, icons: { EditIcon }, localization, renderRowActionMenuItems, }, } = table;
     const { density } = getState();
-    return (jsxRuntime.jsxs(Menu__default["default"], Object.assign({ MenuListProps: {
+    return (jsxRuntime.jsxs(Menu, Object.assign({ MenuListProps: {
             dense: density === 'compact',
-        }, anchorEl: anchorEl, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [parseFromValuesOrFunc(enableEditing, row) && (jsxRuntime.jsx(MenuItem__default["default"], { onClick: handleEdit, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(EditIcon, {}) }), localization.edit] }) })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
+        }, anchorEl: anchorEl, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [parseFromValuesOrFunc(enableEditing, row) && (jsxRuntime.jsx(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box, { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon, { children: jsxRuntime.jsx(EditIcon, {}) }), localization.edit] }) })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
                 closeMenu: () => setAnchorEl(null),
                 row,
                 table,
@@ -3077,7 +2985,7 @@ const MRT_ToggleRowActionMenuButton = (_a) => {
     };
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderRowActions && !showEditActionButtons ? (renderRowActions({ cell, row, table })) : showEditActionButtons ? (jsxRuntime.jsx(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
             parseFromValuesOrFunc(enableEditing, row) &&
-            ['modal', 'row'].includes(editDisplayMode) ? (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, placement: "right", title: localization.edit, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.edit, onClick: handleStartEditMode, sx: commonIconButtonStyles }, rest, { children: jsxRuntime.jsx(EditIcon, {}) })) })) : renderRowActionMenuItems ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles }, rest, { children: jsxRuntime.jsx(MoreHorizIcon, {}) })) }), jsxRuntime.jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table })] })) : null }));
+            ['modal', 'row'].includes(editDisplayMode) ? (jsxRuntime.jsx(Tooltip, { arrow: true, placement: "right", title: localization.edit, children: jsxRuntime.jsx(IconButton, Object.assign({ "aria-label": localization.edit, onClick: handleStartEditMode, sx: commonIconButtonStyles }, rest, { children: jsxRuntime.jsx(EditIcon, {}) })) })) : renderRowActionMenuItems ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions, children: jsxRuntime.jsx(IconButton, Object.assign({ "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles }, rest, { children: jsxRuntime.jsx(MoreHorizIcon, {}) })) }), jsxRuntime.jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table })] })) : null }));
 };
 
 const blankColProps = {
@@ -3475,39 +3383,39 @@ const MRT_FilterFns = Object.assign(Object.assign({}, reactTable.filterFns), { b
     startsWith });
 
 const MRT_Default_Icons = {
-    ArrowDownwardIcon: ArrowDownwardIcon__default["default"],
-    ArrowRightIcon: ArrowRightIcon__default["default"],
-    CancelIcon: CancelIcon__default["default"],
-    ChevronLeftIcon: ChevronLeftIcon__default["default"],
-    ChevronRightIcon: ChevronRightIcon__default["default"],
-    ClearAllIcon: ClearAllIcon__default["default"],
-    CloseIcon: CloseIcon__default["default"],
-    DensityLargeIcon: DensityLargeIcon__default["default"],
-    DensityMediumIcon: DensityMediumIcon__default["default"],
-    DensitySmallIcon: DensitySmallIcon__default["default"],
-    DragHandleIcon: DragHandleIcon__default["default"],
-    DynamicFeedIcon: DynamicFeedIcon__default["default"],
-    EditIcon: EditIcon__default["default"],
-    ExpandMoreIcon: ExpandMoreIcon__default["default"],
-    FilterAltIcon: FilterAltIcon__default["default"],
-    FilterListIcon: FilterListIcon__default["default"],
-    FilterListOffIcon: FilterListOffIcon__default["default"],
-    FirstPageIcon: FirstPageIcon__default["default"],
-    FullscreenExitIcon: FullscreenExitIcon__default["default"],
-    FullscreenIcon: FullscreenIcon__default["default"],
-    KeyboardDoubleArrowDownIcon: KeyboardDoubleArrowDownIcon__default["default"],
-    LastPageIcon: LastPageIcon__default["default"],
-    MoreHorizIcon: MoreHorizIcon__default["default"],
-    MoreVertIcon: MoreVertIcon__default["default"],
-    PushPinIcon: PushPinIcon__default["default"],
-    RestartAltIcon: RestartAltIcon__default["default"],
-    SaveIcon: SaveIcon__default["default"],
-    SearchIcon: SearchIcon__default["default"],
-    SearchOffIcon: SearchOffIcon__default["default"],
-    SortIcon: SortIcon__default["default"],
-    SyncAltIcon: SyncAltIcon__default["default"],
-    ViewColumnIcon: ViewColumnIcon__default["default"],
-    VisibilityOffIcon: VisibilityOffIcon__default["default"],
+    ArrowDownwardIcon,
+    ArrowRightIcon,
+    CancelIcon,
+    ChevronLeftIcon,
+    ChevronRightIcon,
+    ClearAllIcon,
+    CloseIcon,
+    DensityLargeIcon,
+    DensityMediumIcon,
+    DensitySmallIcon,
+    DragHandleIcon,
+    DynamicFeedIcon,
+    EditIcon,
+    ExpandMoreIcon,
+    FilterAltIcon,
+    FilterListIcon,
+    FilterListOffIcon,
+    FirstPageIcon,
+    FullscreenExitIcon,
+    FullscreenIcon,
+    KeyboardDoubleArrowDownIcon,
+    LastPageIcon,
+    MoreHorizIcon,
+    MoreVertIcon,
+    PushPinIcon,
+    RestartAltIcon,
+    SaveIcon,
+    SearchIcon,
+    SearchOffIcon,
+    SortIcon,
+    SyncAltIcon,
+    ViewColumnIcon,
+    VisibilityOffIcon,
 };
 
 const MRT_Localization_EN = {
@@ -3602,6 +3510,26 @@ const MRT_Localization_EN = {
     unpinAll: 'Unpin all',
 };
 
+const MRT_DefaultColumn = {
+    filterVariant: 'text',
+    maxSize: 1000,
+    minSize: 40,
+    size: 180,
+};
+const MRT_DefaultDisplayColumn = {
+    columnDefType: 'display',
+    enableClickToCopy: false,
+    enableColumnActions: false,
+    enableColumnDragging: false,
+    enableColumnFilter: false,
+    enableColumnOrdering: false,
+    enableEditing: false,
+    enableGlobalFilter: false,
+    enableGrouping: false,
+    enableHiding: false,
+    enableResizing: false,
+    enableSorting: false,
+};
 const useMRT_TableOptions = (_a) => {
     var _b;
     var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode = 'semantic', localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
@@ -3679,11 +3607,7 @@ const useMRT_TableOptions = (_a) => {
         selectAllMode, sortingFns: _sortingFns }, rest);
 };
 
-const useMaterialReactTable = (tableOptions) => {
-    const parsedTableOptions = useMRT_TableOptions(tableOptions);
-    const tableInstance = useMRT_TableInstance(parsedTableOptions);
-    return tableInstance;
-};
+const useMaterialReactTable = (tableOptions) => useMRT_TableInstance(useMRT_TableOptions(tableOptions));
 
 const isTableInstanceProp = (props) => props.table !== undefined;
 const MaterialReactTable = (props) => {
@@ -3702,8 +3626,6 @@ exports.MRT_BottomToolbar = MRT_BottomToolbar;
 exports.MRT_ColumnActionMenu = MRT_ColumnActionMenu;
 exports.MRT_ColumnPinningButtons = MRT_ColumnPinningButtons;
 exports.MRT_CopyButton = MRT_CopyButton;
-exports.MRT_DefaultColumn = MRT_DefaultColumn;
-exports.MRT_DefaultDisplayColumn = MRT_DefaultDisplayColumn;
 exports.MRT_EditActionButtons = MRT_EditActionButtons;
 exports.MRT_EditCellTextField = MRT_EditCellTextField;
 exports.MRT_EditRowModal = MRT_EditRowModal;
@@ -3764,7 +3686,6 @@ exports.Memo_MRT_TableBodyCell = Memo_MRT_TableBodyCell;
 exports.Memo_MRT_TableBodyRow = Memo_MRT_TableBodyRow;
 exports.commonListItemStyles = commonListItemStyles;
 exports.commonMenuItemStyles = commonMenuItemStyles;
-exports.commonToolbarStyles = commonToolbarStyles;
 exports.createMRTColumnHelper = createMRTColumnHelper;
 exports.createRow = createRow;
 exports.extraIndexRangeExtractor = extraIndexRangeExtractor;
@@ -3772,7 +3693,8 @@ exports.flexRender = flexRender;
 exports.getAllLeafColumnDefs = getAllLeafColumnDefs;
 exports.getCanRankRows = getCanRankRows;
 exports.getColumnId = getColumnId;
-exports.getCommonCellStyles = getCommonCellStyles;
+exports.getCommonMRTCellStyles = getCommonMRTCellStyles;
+exports.getCommonToolbarStyles = getCommonToolbarStyles;
 exports.getDefaultColumnFilterFn = getDefaultColumnFilterFn;
 exports.getDefaultColumnOrderIds = getDefaultColumnOrderIds;
 exports.getIsFirstColumn = getIsFirstColumn;
@@ -3780,6 +3702,7 @@ exports.getIsFirstRightPinnedColumn = getIsFirstRightPinnedColumn;
 exports.getIsLastColumn = getIsLastColumn;
 exports.getIsLastLeftPinnedColumn = getIsLastLeftPinnedColumn;
 exports.getLeadingDisplayColumnIds = getLeadingDisplayColumnIds;
+exports.getMRTTheme = getMRTTheme;
 exports.getTotalRight = getTotalRight;
 exports.getTrailingDisplayColumnIds = getTrailingDisplayColumnIds;
 exports.mrtFilterOptions = mrtFilterOptions;