@mui/material 6.0.0-alpha.5 → 6.0.0-alpha.6

package/node/Tab/Tab.js

@@ -14,14 +14,14 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _unsupportedProp = _interopRequireDefault(require("../utils/unsupportedProp"));
 var _tabClasses = _interopRequireWildcard(require("./tabClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "disabled", "disableFocusRipple", "fullWidth", "icon", "iconPosition", "indicator", "label", "onChange", "onClick", "onFocus", "selected", "selectionFollowsFocus", "textColor", "value", "wrapped"];
 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)('MuiTab');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -39,7 +39,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _tabClasses.getTabUtilityClass, classes);
 };
-const TabRoot = (0, _styled.default)(_ButtonBase.default, {
+const TabRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   name: 'MuiTab',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -49,8 +49,7 @@ const TabRoot = (0, _styled.default)(_ButtonBase.default, {
     return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${(0, _capitalize.default)(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => (0, _extends2.default)({}, theme.typography.button, {
   maxWidth: 360,
   minWidth: 90,
@@ -60,60 +59,133 @@ const TabRoot = (0, _styled.default)(_ButtonBase.default, {
   padding: '12px 16px',
   overflow: 'hidden',
   whiteSpace: 'normal',
-  textAlign: 'center'
-}, ownerState.label && {
-  flexDirection: ownerState.iconPosition === 'top' || ownerState.iconPosition === 'bottom' ? 'column' : 'row'
-}, {
-  lineHeight: 1.25
-}, ownerState.icon && ownerState.label && {
-  minHeight: 72,
-  paddingTop: 9,
-  paddingBottom: 9,
-  [`& > .${_tabClasses.default.iconWrapper}`]: (0, _extends2.default)({}, ownerState.iconPosition === 'top' && {
-    marginBottom: 6
-  }, ownerState.iconPosition === 'bottom' && {
-    marginTop: 6
-  }, ownerState.iconPosition === 'start' && {
-    marginRight: theme.spacing(1)
-  }, ownerState.iconPosition === 'end' && {
-    marginLeft: theme.spacing(1)
-  })
-}, ownerState.textColor === 'inherit' && {
-  color: 'inherit',
-  opacity: 0.6,
-  // same opacity as theme.palette.text.secondary
-  [`&.${_tabClasses.default.selected}`]: {
-    opacity: 1
-  },
-  [`&.${_tabClasses.default.disabled}`]: {
-    opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }
-}, ownerState.textColor === 'primary' && {
-  color: (theme.vars || theme).palette.text.secondary,
-  [`&.${_tabClasses.default.selected}`]: {
-    color: (theme.vars || theme).palette.primary.main
-  },
-  [`&.${_tabClasses.default.disabled}`]: {
-    color: (theme.vars || theme).palette.text.disabled
-  }
-}, ownerState.textColor === 'secondary' && {
-  color: (theme.vars || theme).palette.text.secondary,
-  [`&.${_tabClasses.default.selected}`]: {
-    color: (theme.vars || theme).palette.secondary.main
-  },
-  [`&.${_tabClasses.default.disabled}`]: {
-    color: (theme.vars || theme).palette.text.disabled
-  }
-}, ownerState.fullWidth && {
-  flexShrink: 1,
-  flexGrow: 1,
-  flexBasis: 0,
-  maxWidth: 'none'
-}, ownerState.wrapped && {
-  fontSize: theme.typography.pxToRem(12)
+  textAlign: 'center',
+  lineHeight: 1.25,
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.label && (ownerState.iconPosition === 'top' || ownerState.iconPosition === 'bottom'),
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.label && ownerState.iconPosition !== 'top' && ownerState.iconPosition !== 'bottom',
+    style: {
+      flexDirection: 'row'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.icon && ownerState.label,
+    style: {
+      minHeight: 72,
+      paddingTop: 9,
+      paddingBottom: 9
+    }
+  }, {
+    props: ({
+      ownerState,
+      iconPosition
+    }) => ownerState.icon && ownerState.label && iconPosition === 'top',
+    style: {
+      [`& > .${_tabClasses.default.iconWrapper}`]: {
+        marginBottom: 6
+      }
+    }
+  }, {
+    props: ({
+      ownerState,
+      iconPosition
+    }) => ownerState.icon && ownerState.label && iconPosition === 'bottom',
+    style: {
+      [`& > .${_tabClasses.default.iconWrapper}`]: {
+        marginTop: 6
+      }
+    }
+  }, {
+    props: ({
+      ownerState,
+      iconPosition
+    }) => ownerState.icon && ownerState.label && iconPosition === 'start',
+    style: {
+      [`& > .${_tabClasses.default.iconWrapper}`]: {
+        marginRight: theme.spacing(1)
+      }
+    }
+  }, {
+    props: ({
+      ownerState,
+      iconPosition
+    }) => ownerState.icon && ownerState.label && iconPosition === 'end',
+    style: {
+      [`& > .${_tabClasses.default.iconWrapper}`]: {
+        marginLeft: theme.spacing(1)
+      }
+    }
+  }, {
+    props: {
+      textColor: 'inherit'
+    },
+    style: {
+      color: 'inherit',
+      opacity: 0.6,
+      // same opacity as theme.palette.text.secondary
+      [`&.${_tabClasses.default.selected}`]: {
+        opacity: 1
+      },
+      [`&.${_tabClasses.default.disabled}`]: {
+        opacity: (theme.vars || theme).palette.action.disabledOpacity
+      }
+    }
+  }, {
+    props: {
+      textColor: 'primary'
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.secondary,
+      [`&.${_tabClasses.default.selected}`]: {
+        color: (theme.vars || theme).palette.primary.main
+      },
+      [`&.${_tabClasses.default.disabled}`]: {
+        color: (theme.vars || theme).palette.text.disabled
+      }
+    }
+  }, {
+    props: {
+      textColor: 'secondary'
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.secondary,
+      [`&.${_tabClasses.default.selected}`]: {
+        color: (theme.vars || theme).palette.secondary.main
+      },
+      [`&.${_tabClasses.default.disabled}`]: {
+        color: (theme.vars || theme).palette.text.disabled
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.fullWidth,
+    style: {
+      flexShrink: 1,
+      flexGrow: 1,
+      flexBasis: 0,
+      maxWidth: 'none'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.wrapped,
+    style: {
+      fontSize: theme.typography.pxToRem(12)
+    }
+  }]
 }));
 const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiTab'
   });

package/node/TabScrollButton/TabScrollButton.js

@@ -7,8 +7,8 @@ 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 _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -18,13 +18,13 @@ 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 +36,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,25 +45,29 @@ 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'
   });
@@ -71,7 +75,8 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
       className,
       slots = {},
       slotProps = {},
-      direction
+      direction,
+      orientation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const isRtl = (0, _RtlProvider.useRtl)();
@@ -105,6 +110,9 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     ownerState: ownerState,
     tabIndex: null
   }, other, {
+    style: (0, _extends2.default)({}, other.style, orientation === 'vertical' && {
+      '--TabScrollButton-svgRotate': `rotate(${isRtl ? -90 : 90}deg)`
+    }),
     children: direction === 'left' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StartButtonIcon, (0, _extends2.default)({}, startButtonIconProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EndButtonIcon, (0, _extends2.default)({}, endButtonIconProps))
   }));
 });
@@ -155,6 +163,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

@@ -13,13 +13,13 @@ 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 +30,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) => {
@@ -63,7 +63,7 @@ const TableRoot = (0, _styled.default)('table', {
 }));
 const defaultComponent = 'table';
 const Table = /*#__PURE__*/React.forwardRef(function Table(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiTable'
   });

package/node/TableBody/TableBody.js

@@ -13,13 +13,13 @@ 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 +29,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,7 +41,7 @@ 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'
   });

package/node/TableCell/TableCell.js

@@ -16,13 +16,13 @@ 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 +37,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) => {
@@ -160,7 +160,7 @@ 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'
   });

package/node/TableContainer/TableContainer.js

@@ -12,13 +12,13 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _tableContainerClasses = require("./tableContainerClasses");
 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)('MuiTableContainer');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -28,7 +28,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _tableContainerClasses.getTableContainerUtilityClass, classes);
 };
-const TableContainerRoot = (0, _styled.default)('div', {
+const TableContainerRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiTableContainer',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -37,7 +37,7 @@ const TableContainerRoot = (0, _styled.default)('div', {
   overflowX: 'auto'
 });
 const TableContainer = /*#__PURE__*/React.forwardRef(function TableContainer(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiTableContainer'
   });

package/node/TableFooter/TableFooter.js

@@ -13,13 +13,13 @@ 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 _tableFooterClasses = require("./tableFooterClasses");
 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)('MuiTableFooter');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -29,7 +29,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _tableFooterClasses.getTableFooterUtilityClass, classes);
 };
-const TableFooterRoot = (0, _styled.default)('tfoot', {
+const TableFooterRoot = (0, _zeroStyled.styled)('tfoot', {
   name: 'MuiTableFooter',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -41,7 +41,7 @@ const tablelvl2 = {
 };
 const defaultComponent = 'tfoot';
 const TableFooter = /*#__PURE__*/React.forwardRef(function TableFooter(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiTableFooter'
   });

package/node/TableHead/TableHead.js

@@ -13,13 +13,13 @@ 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 _tableHeadClasses = require("./tableHeadClasses");
 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)('MuiTableHead');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -29,7 +29,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _tableHeadClasses.getTableHeadUtilityClass, classes);
 };
-const TableHeadRoot = (0, _styled.default)('thead', {
+const TableHeadRoot = (0, _zeroStyled.styled)('thead', {
   name: 'MuiTableHead',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -41,7 +41,7 @@ const tablelvl2 = {
 };
 const defaultComponent = 'thead';
 const TableHead = /*#__PURE__*/React.forwardRef(function TableHead(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiTableHead'
   });

package/node/TablePagination/TablePagination.js

@@ -16,8 +16,7 @@ var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropTyp
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _InputBase2 = _interopRequireDefault(require("../InputBase"));
 var _MenuItem = _interopRequireDefault(require("../MenuItem"));
 var _Select = _interopRequireDefault(require("../Select"));
@@ -31,7 +30,8 @@ var _InputBase;
 const _excluded = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "disabled", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton", "slotProps", "slots"];
 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 TablePaginationRoot = (0, _styled.default)(_TableCell.default, {
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiTablePagination');
+const TablePaginationRoot = (0, _zeroStyled.styled)(_TableCell.default, {
   name: 'MuiTablePagination',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -46,7 +46,7 @@ const TablePaginationRoot = (0, _styled.default)(_TableCell.default, {
     padding: 0
   }
 }));
-const TablePaginationToolbar = (0, _styled.default)(_Toolbar.default, {
+const TablePaginationToolbar = (0, _zeroStyled.styled)(_Toolbar.default, {
   name: 'MuiTablePagination',
   slot: 'Toolbar',
   overridesResolver: (props, styles) => (0, _extends2.default)({
@@ -69,14 +69,14 @@ const TablePaginationToolbar = (0, _styled.default)(_Toolbar.default, {
     marginLeft: 20
   }
 }));
-const TablePaginationSpacer = (0, _styled.default)('div', {
+const TablePaginationSpacer = (0, _zeroStyled.styled)('div', {
   name: 'MuiTablePagination',
   slot: 'Spacer',
   overridesResolver: (props, styles) => styles.spacer
 })({
   flex: '1 1 100%'
 });
-const TablePaginationSelectLabel = (0, _styled.default)('p', {
+const TablePaginationSelectLabel = (0, _zeroStyled.styled)('p', {
   name: 'MuiTablePagination',
   slot: 'SelectLabel',
   overridesResolver: (props, styles) => styles.selectLabel
@@ -85,7 +85,7 @@ const TablePaginationSelectLabel = (0, _styled.default)('p', {
 }) => (0, _extends2.default)({}, theme.typography.body2, {
   flexShrink: 0
 }));
-const TablePaginationSelect = (0, _styled.default)(_Select.default, {
+const TablePaginationSelect = (0, _zeroStyled.styled)(_Select.default, {
   name: 'MuiTablePagination',
   slot: 'Select',
   overridesResolver: (props, styles) => (0, _extends2.default)({
@@ -105,12 +105,12 @@ const TablePaginationSelect = (0, _styled.default)(_Select.default, {
     textAlignLast: 'right' // Align <select> on Chrome.
   }
 });
-const TablePaginationMenuItem = (0, _styled.default)(_MenuItem.default, {
+const TablePaginationMenuItem = (0, _zeroStyled.styled)(_MenuItem.default, {
   name: 'MuiTablePagination',
   slot: 'MenuItem',
   overridesResolver: (props, styles) => styles.menuItem
 })({});
-const TablePaginationDisplayedRows = (0, _styled.default)('p', {
+const TablePaginationDisplayedRows = (0, _zeroStyled.styled)('p', {
   name: 'MuiTablePagination',
   slot: 'DisplayedRows',
   overridesResolver: (props, styles) => styles.displayedRows
@@ -153,7 +153,7 @@ const useUtilityClasses = ownerState => {
  */
 const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inProps, ref) {
   var _slotProps$select;
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiTablePagination'
   });