@mui/material 6.0.0-alpha.0 → 6.0.0-alpha.10

package/node/TabScrollButton/TabScrollButton.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -18,13 +16,12 @@ var _RtlProvider = require("@mui/system/RtlProvider");
 var _KeyboardArrowLeft = _interopRequireDefault(require("../internal/svg-icons/KeyboardArrowLeft"));
 var _KeyboardArrowRight = _interopRequireDefault(require("../internal/svg-icons/KeyboardArrowRight"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _tabScrollButtonClasses = _interopRequireWildcard(require("./tabScrollButtonClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "slots", "slotProps", "direction", "orientation", "disabled"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiTabScrollButton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -36,7 +33,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _tabScrollButtonClasses.getTabScrollButtonUtilityClass, classes);
 };
-const TabScrollButtonRoot = (0, _styled.default)(_ButtonBase.default, {
+const TabScrollButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   name: 'MuiTabScrollButton',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -45,39 +42,46 @@ const TabScrollButtonRoot = (0, _styled.default)(_ButtonBase.default, {
     } = props;
     return [styles.root, ownerState.orientation && styles[ownerState.orientation]];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   width: 40,
   flexShrink: 0,
   opacity: 0.8,
   [`&.${_tabScrollButtonClasses.default.disabled}`]: {
     opacity: 0
-  }
-}, ownerState.orientation === 'vertical' && {
-  width: '100%',
-  height: 40,
-  '& svg': {
-    transform: `rotate(${ownerState.isRtl ? -90 : 90}deg)`
-  }
-}));
+  },
+  variants: [{
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      width: '100%',
+      height: 40,
+      '& svg': {
+        transform: 'var(--TabScrollButton-svgRotate)'
+      }
+    }
+  }]
+});
 const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(inProps, ref) {
   var _slots$StartScrollBut, _slots$EndScrollButto;
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiTabScrollButton'
   });
   const {
-      className,
-      slots = {},
-      slotProps = {},
-      direction
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    className,
+    slots = {},
+    slotProps = {},
+    direction,
+    orientation,
+    disabled,
+    ...other
+  } = props;
   const isRtl = (0, _RtlProvider.useRtl)();
-  const ownerState = (0, _extends2.default)({
-    isRtl
-  }, props);
+  const ownerState = {
+    isRtl,
+    ...props
+  };
   const classes = useUtilityClasses(ownerState);
   const StartButtonIcon = (_slots$StartScrollBut = slots.StartScrollButtonIcon) != null ? _slots$StartScrollBut : _KeyboardArrowLeft.default;
   const EndButtonIcon = (_slots$EndScrollButto = slots.EndScrollButtonIcon) != null ? _slots$EndScrollButto : _KeyboardArrowRight.default;
@@ -97,16 +101,26 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     },
     ownerState
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabScrollButtonRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabScrollButtonRoot, {
     component: "div",
     className: (0, _clsx.default)(classes.root, className),
     ref: ref,
     role: null,
     ownerState: ownerState,
-    tabIndex: null
-  }, other, {
-    children: direction === 'left' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StartButtonIcon, (0, _extends2.default)({}, startButtonIconProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EndButtonIcon, (0, _extends2.default)({}, endButtonIconProps))
-  }));
+    tabIndex: null,
+    ...other,
+    style: {
+      ...other.style,
+      ...(orientation === 'vertical' && {
+        '--TabScrollButton-svgRotate': `rotate(${isRtl ? -90 : 90}deg)`
+      })
+    },
+    children: direction === 'left' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StartButtonIcon, {
+      ...startButtonIconProps
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EndButtonIcon, {
+      ...endButtonIconProps
+    })
+  });
 });
 process.env.NODE_ENV !== "production" ? TabScrollButton.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -155,6 +169,10 @@ process.env.NODE_ENV !== "production" ? TabScrollButton.propTypes /* remove-prop
     EndScrollButtonIcon: _propTypes.default.elementType,
     StartScrollButtonIcon: _propTypes.default.elementType
   }),
+  /**
+   * @ignore
+   */
+  style: _propTypes.default.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/Table/Table.js

@@ -6,20 +6,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _TableContext = _interopRequireDefault(require("./TableContext"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _tableClasses = require("./tableClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "component", "padding", "size", "stickyHeader"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiTable');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -30,7 +27,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _tableClasses.getTableUtilityClass, classes);
 };
-const TableRoot = (0, _styled.default)('table', {
+const TableRoot = (0, _zeroStyled.styled)('table', {
   name: 'MuiTable',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -40,42 +37,49 @@ const TableRoot = (0, _styled.default)('table', {
     return [styles.root, ownerState.stickyHeader && styles.stickyHeader];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   display: 'table',
   width: '100%',
   borderCollapse: 'collapse',
   borderSpacing: 0,
-  '& caption': (0, _extends2.default)({}, theme.typography.body2, {
+  '& caption': {
+    ...theme.typography.body2,
     padding: theme.spacing(2),
     color: (theme.vars || theme).palette.text.secondary,
     textAlign: 'left',
     captionSide: 'bottom'
-  })
-}, ownerState.stickyHeader && {
-  borderCollapse: 'separate'
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.stickyHeader,
+    style: {
+      borderCollapse: 'separate'
+    }
+  }]
 }));
 const defaultComponent = 'table';
 const Table = /*#__PURE__*/React.forwardRef(function Table(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiTable'
   });
   const {
-      className,
-      component = defaultComponent,
-      padding = 'normal',
-      size = 'medium',
-      stickyHeader = false
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
+    className,
+    component = defaultComponent,
+    padding = 'normal',
+    size = 'medium',
+    stickyHeader = false,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component,
     padding,
     size,
     stickyHeader
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const table = React.useMemo(() => ({
     padding,
@@ -84,13 +88,14 @@ const Table = /*#__PURE__*/React.forwardRef(function Table(inProps, ref) {
   }), [padding, size, stickyHeader]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableContext.default.Provider, {
     value: table,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TableRoot, (0, _extends2.default)({
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TableRoot, {
       as: component,
       role: component === defaultComponent ? null : 'table',
       ref: ref,
       className: (0, _clsx.default)(classes.root, className),
-      ownerState: ownerState
-    }, other))
+      ownerState: ownerState,
+      ...other
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? Table.propTypes /* remove-proptypes */ = {
@@ -127,8 +132,6 @@ process.env.NODE_ENV !== "production" ? Table.propTypes /* remove-proptypes */ =
   size: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['medium', 'small']), _propTypes.default.string]),
   /**
    * Set the header sticky.
-   *
-   * ⚠️ It doesn't work with IE11.
    * @default false
    */
   stickyHeader: _propTypes.default.bool,

package/node/TableBody/TableBody.js

@@ -6,20 +6,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _Tablelvl2Context = _interopRequireDefault(require("../Table/Tablelvl2Context"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _tableBodyClasses = require("./tableBodyClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "component"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiTableBody');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -29,7 +26,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _tableBodyClasses.getTableBodyUtilityClass, classes);
 };
-const TableBodyRoot = (0, _styled.default)('tbody', {
+const TableBodyRoot = (0, _zeroStyled.styled)('tbody', {
   name: 'MuiTableBody',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -41,28 +38,30 @@ const tablelvl2 = {
 };
 const defaultComponent = 'tbody';
 const TableBody = /*#__PURE__*/React.forwardRef(function TableBody(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiTableBody'
   });
   const {
-      className,
-      component = defaultComponent
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
+    className,
+    component = defaultComponent,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tablelvl2Context.default.Provider, {
     value: tablelvl2,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TableBodyRoot, (0, _extends2.default)({
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TableBodyRoot, {
       className: (0, _clsx.default)(classes.root, className),
       as: component,
       ref: ref,
       role: component === defaultComponent ? null : 'rowgroup',
-      ownerState: ownerState
-    }, other))
+      ownerState: ownerState,
+      ...other
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? TableBody.propTypes /* remove-proptypes */ = {

package/node/TableCell/TableCell.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -16,13 +14,12 @@ var _colorManipulator = require("@mui/system/colorManipulator");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _TableContext = _interopRequireDefault(require("../Table/TableContext"));
 var _Tablelvl2Context = _interopRequireDefault(require("../Table/Tablelvl2Context"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _tableCellClasses = _interopRequireWildcard(require("./tableCellClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["align", "className", "component", "padding", "scope", "size", "sortDirection", "variant"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiTableCell');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -37,7 +34,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _tableCellClasses.getTableCellUtilityClass, classes);
 };
-const TableCellRoot = (0, _styled.default)('td', {
+const TableCellRoot = (0, _zeroStyled.styled)('td', {
   name: 'MuiTableCell',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -47,9 +44,9 @@ const TableCellRoot = (0, _styled.default)('td', {
     return [styles.root, styles[ownerState.variant], styles[`size${(0, _capitalize.default)(ownerState.size)}`], ownerState.padding !== 'normal' && styles[`padding${(0, _capitalize.default)(ownerState.padding)}`], ownerState.align !== 'inherit' && styles[`align${(0, _capitalize.default)(ownerState.align)}`], ownerState.stickyHeader && styles.stickyHeader];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({}, theme.typography.body2, {
+  theme
+}) => ({
+  ...theme.typography.body2,
   display: 'table-cell',
   verticalAlign: 'inherit',
   // Workaround for a rendering bug with spanned columns in Chrome 62.0.
@@ -57,47 +54,103 @@ const TableCellRoot = (0, _styled.default)('td', {
   borderBottom: theme.vars ? `1px solid ${theme.vars.palette.TableCell.border}` : `1px solid
     ${theme.palette.mode === 'light' ? (0, _colorManipulator.lighten)((0, _colorManipulator.alpha)(theme.palette.divider, 1), 0.88) : (0, _colorManipulator.darken)((0, _colorManipulator.alpha)(theme.palette.divider, 1), 0.68)}`,
   textAlign: 'left',
-  padding: 16
-}, ownerState.variant === 'head' && {
-  color: (theme.vars || theme).palette.text.primary,
-  lineHeight: theme.typography.pxToRem(24),
-  fontWeight: theme.typography.fontWeightMedium
-}, ownerState.variant === 'body' && {
-  color: (theme.vars || theme).palette.text.primary
-}, ownerState.variant === 'footer' && {
-  color: (theme.vars || theme).palette.text.secondary,
-  lineHeight: theme.typography.pxToRem(21),
-  fontSize: theme.typography.pxToRem(12)
-}, ownerState.size === 'small' && {
-  padding: '6px 16px',
-  [`&.${_tableCellClasses.default.paddingCheckbox}`]: {
-    width: 24,
-    // prevent the checkbox column from growing
-    padding: '0 12px 0 16px',
-    '& > *': {
+  padding: 16,
+  variants: [{
+    props: {
+      variant: 'head'
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.primary,
+      lineHeight: theme.typography.pxToRem(24),
+      fontWeight: theme.typography.fontWeightMedium
+    }
+  }, {
+    props: {
+      variant: 'body'
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.primary
+    }
+  }, {
+    props: {
+      variant: 'footer'
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.secondary,
+      lineHeight: theme.typography.pxToRem(21),
+      fontSize: theme.typography.pxToRem(12)
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      padding: '6px 16px',
+      [`&.${_tableCellClasses.default.paddingCheckbox}`]: {
+        width: 24,
+        // prevent the checkbox column from growing
+        padding: '0 12px 0 16px',
+        '& > *': {
+          padding: 0
+        }
+      }
+    }
+  }, {
+    props: {
+      padding: 'checkbox'
+    },
+    style: {
+      width: 48,
+      // prevent the checkbox column from growing
+      padding: '0 0 0 4px'
+    }
+  }, {
+    props: {
+      padding: 'none'
+    },
+    style: {
       padding: 0
     }
-  }
-}, ownerState.padding === 'checkbox' && {
-  width: 48,
-  // prevent the checkbox column from growing
-  padding: '0 0 0 4px'
-}, ownerState.padding === 'none' && {
-  padding: 0
-}, ownerState.align === 'left' && {
-  textAlign: 'left'
-}, ownerState.align === 'center' && {
-  textAlign: 'center'
-}, ownerState.align === 'right' && {
-  textAlign: 'right',
-  flexDirection: 'row-reverse'
-}, ownerState.align === 'justify' && {
-  textAlign: 'justify'
-}, ownerState.stickyHeader && {
-  position: 'sticky',
-  top: 0,
-  zIndex: 2,
-  backgroundColor: (theme.vars || theme).palette.background.default
+  }, {
+    props: {
+      align: 'left'
+    },
+    style: {
+      textAlign: 'left'
+    }
+  }, {
+    props: {
+      align: 'center'
+    },
+    style: {
+      textAlign: 'center'
+    }
+  }, {
+    props: {
+      align: 'right'
+    },
+    style: {
+      textAlign: 'right',
+      flexDirection: 'row-reverse'
+    }
+  }, {
+    props: {
+      align: 'justify'
+    },
+    style: {
+      textAlign: 'justify'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.stickyHeader,
+    style: {
+      position: 'sticky',
+      top: 0,
+      zIndex: 2,
+      backgroundColor: (theme.vars || theme).palette.background.default
+    }
+  }]
 }));
 
 /**
@@ -105,21 +158,21 @@ const TableCellRoot = (0, _styled.default)('td', {
  * or otherwise a `<td>` element.
  */
 const TableCell = /*#__PURE__*/React.forwardRef(function TableCell(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiTableCell'
   });
   const {
-      align = 'inherit',
-      className,
-      component: componentProp,
-      padding: paddingProp,
-      scope: scopeProp,
-      size: sizeProp,
-      sortDirection,
-      variant: variantProp
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    align = 'inherit',
+    className,
+    component: componentProp,
+    padding: paddingProp,
+    scope: scopeProp,
+    size: sizeProp,
+    sortDirection,
+    variant: variantProp,
+    ...other
+  } = props;
   const table = React.useContext(_TableContext.default);
   const tablelvl2 = React.useContext(_Tablelvl2Context.default);
   const isHeadCell = tablelvl2 && tablelvl2.variant === 'head';
@@ -138,7 +191,8 @@ const TableCell = /*#__PURE__*/React.forwardRef(function TableCell(inProps, ref)
     scope = 'col';
   }
   const variant = variantProp || tablelvl2 && tablelvl2.variant;
-  const ownerState = (0, _extends2.default)({}, props, {
+  const ownerState = {
+    ...props,
     align,
     component,
     padding: paddingProp || (table && table.padding ? table.padding : 'normal'),
@@ -146,20 +200,21 @@ const TableCell = /*#__PURE__*/React.forwardRef(function TableCell(inProps, ref)
     sortDirection,
     stickyHeader: variant === 'head' && table && table.stickyHeader,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   let ariaSort = null;
   if (sortDirection) {
     ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableCellRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableCellRoot, {
     as: component,
     ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     "aria-sort": ariaSort,
     scope: scope,
-    ownerState: ownerState
-  }, other));
+    ownerState: ownerState,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? TableCell.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐