@mui/material 6.0.0-alpha.2 → 6.0.0-alpha.4

package/node/PaginationItem/PaginationItem.js

@@ -14,7 +14,6 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _RtlProvider = require("@mui/system/RtlProvider");
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _paginationItemClasses = _interopRequireWildcard(require("./paginationItemClasses"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
@@ -22,11 +21,12 @@ var _FirstPage = _interopRequireDefault(require("../internal/svg-icons/FirstPage
 var _LastPage = _interopRequireDefault(require("../internal/svg-icons/LastPage"));
 var _NavigateBefore = _interopRequireDefault(require("../internal/svg-icons/NavigateBefore"));
 var _NavigateNext = _interopRequireDefault(require("../internal/svg-icons/NavigateNext"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "type", "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)('MuiPaginationItem');
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -58,13 +58,12 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _paginationItemClasses.getPaginationItemUtilityClass, classes);
 };
-const PaginationItemEllipsis = (0, _styled.default)('div', {
+const PaginationItemEllipsis = (0, _zeroStyled.styled)('div', {
   name: 'MuiPaginationItem',
   slot: 'Root',
   overridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => (0, _extends2.default)({}, theme.typography.body2, {
   borderRadius: 32 / 2,
   textAlign: 'center',
@@ -76,25 +75,35 @@ const PaginationItemEllipsis = (0, _styled.default)('div', {
   height: 'auto',
   [`&.${_paginationItemClasses.default.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }
-}, ownerState.size === 'small' && {
-  minWidth: 26,
-  borderRadius: 26 / 2,
-  margin: '0 1px',
-  padding: '0 4px'
-}, ownerState.size === 'large' && {
-  minWidth: 40,
-  borderRadius: 40 / 2,
-  padding: '0 10px',
-  fontSize: theme.typography.pxToRem(15)
+  },
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      minWidth: 26,
+      borderRadius: 26 / 2,
+      margin: '0 1px',
+      padding: '0 4px'
+    }
+  }, {
+    props: {
+      size: 'large'
+    },
+    style: {
+      minWidth: 40,
+      borderRadius: 40 / 2,
+      padding: '0 10px',
+      fontSize: theme.typography.pxToRem(15)
+    }
+  }]
 }));
-const PaginationItemPage = (0, _styled.default)(_ButtonBase.default, {
+const PaginationItemPage = (0, _zeroStyled.styled)(_ButtonBase.default, {
   name: 'MuiPaginationItem',
   slot: 'Root',
   overridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => (0, _extends2.default)({}, theme.typography.body2, {
   borderRadius: 32 / 2,
   textAlign: 'center',
@@ -137,83 +146,135 @@ const PaginationItemPage = (0, _styled.default)(_ButtonBase.default, {
       color: (theme.vars || theme).palette.action.disabled,
       backgroundColor: (theme.vars || theme).palette.action.selected
     }
-  }
-}, ownerState.size === 'small' && {
-  minWidth: 26,
-  height: 26,
-  borderRadius: 26 / 2,
-  margin: '0 1px',
-  padding: '0 4px'
-}, ownerState.size === 'large' && {
-  minWidth: 40,
-  height: 40,
-  borderRadius: 40 / 2,
-  padding: '0 10px',
-  fontSize: theme.typography.pxToRem(15)
-}, ownerState.shape === 'rounded' && {
-  borderRadius: (theme.vars || theme).shape.borderRadius
-}), ({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({}, ownerState.variant === 'text' && {
-  [`&.${_paginationItemClasses.default.selected}`]: (0, _extends2.default)({}, ownerState.color !== 'standard' && {
-    color: (theme.vars || theme).palette[ownerState.color].contrastText,
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
-    '&:hover': {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-      }
+  },
+  variants: [{
+    props: {
+      size: 'small'
     },
-    [`&.${_paginationItemClasses.default.focusVisible}`]: {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
+    style: {
+      minWidth: 26,
+      height: 26,
+      borderRadius: 26 / 2,
+      margin: '0 1px',
+      padding: '0 4px'
     }
   }, {
-    [`&.${_paginationItemClasses.default.disabled}`]: {
-      color: (theme.vars || theme).palette.action.disabled
+    props: {
+      size: 'large'
+    },
+    style: {
+      minWidth: 40,
+      height: 40,
+      borderRadius: 40 / 2,
+      padding: '0 10px',
+      fontSize: theme.typography.pxToRem(15)
     }
-  })
-}, ownerState.variant === 'outlined' && {
-  border: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
-  [`&.${_paginationItemClasses.default.selected}`]: (0, _extends2.default)({}, ownerState.color !== 'standard' && {
-    color: (theme.vars || theme).palette[ownerState.color].main,
-    border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, 0.5)}`,
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.activatedOpacity})` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity),
-    '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
+  }, {
+    props: {
+      shape: 'rounded'
     },
-    [`&.${_paginationItemClasses.default.focusVisible}`]: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
+    style: {
+      borderRadius: (theme.vars || theme).shape.borderRadius
     }
   }, {
-    [`&.${_paginationItemClasses.default.disabled}`]: {
-      borderColor: (theme.vars || theme).palette.action.disabledBackground,
-      color: (theme.vars || theme).palette.action.disabled
+    props: {
+      variant: 'outlined'
+    },
+    style: {
+      border: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+      [`&.${_paginationItemClasses.default.selected}`]: {
+        [`&.${_paginationItemClasses.default.disabled}`]: {
+          borderColor: (theme.vars || theme).palette.action.disabledBackground,
+          color: (theme.vars || theme).palette.action.disabled
+        }
+      }
+    }
+  }, {
+    props: {
+      variant: 'text'
+    },
+    style: {
+      [`&.${_paginationItemClasses.default.selected}`]: {
+        [`&.${_paginationItemClasses.default.disabled}`]: {
+          color: (theme.vars || theme).palette.action.disabled
+        }
+      }
     }
-  })
+  }, ...Object.entries(theme.palette).filter(([, value]) => value.main && value.dark && value.contrastText).map(([color]) => ({
+    props: {
+      variant: 'text',
+      color
+    },
+    style: {
+      [`&.${_paginationItemClasses.default.selected}`]: {
+        color: (theme.vars || theme).palette[color].contrastText,
+        backgroundColor: (theme.vars || theme).palette[color].main,
+        '&:hover': {
+          backgroundColor: (theme.vars || theme).palette[color].dark,
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: (theme.vars || theme).palette[color].main
+          }
+        },
+        [`&.${_paginationItemClasses.default.focusVisible}`]: {
+          backgroundColor: (theme.vars || theme).palette[color].dark
+        },
+        [`&.${_paginationItemClasses.default.disabled}`]: {
+          color: (theme.vars || theme).palette.action.disabled
+        }
+      }
+    }
+  })), ...Object.entries(theme.palette).filter(([, value]) => value.main && value.light).map(([color]) => ({
+    props: {
+      variant: 'outlined',
+      color
+    },
+    style: {
+      [`&.${_paginationItemClasses.default.selected}`]: {
+        color: (theme.vars || theme).palette[color].main,
+        border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : (0, _colorManipulator.alpha)(theme.palette[color].main, 0.5)}`,
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.activatedOpacity})` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.activatedOpacity),
+        '&:hover': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: 'transparent'
+          }
+        },
+        [`&.${_paginationItemClasses.default.focusVisible}`]: {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
+        }
+      }
+    }
+  }))]
 }));
-const PaginationItemPageIcon = (0, _styled.default)('div', {
+const PaginationItemPageIcon = (0, _zeroStyled.styled)('div', {
   name: 'MuiPaginationItem',
   slot: 'Icon',
   overridesResolver: (props, styles) => styles.icon
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   fontSize: theme.typography.pxToRem(20),
-  margin: '0 -8px'
-}, ownerState.size === 'small' && {
-  fontSize: theme.typography.pxToRem(18)
-}, ownerState.size === 'large' && {
-  fontSize: theme.typography.pxToRem(22)
+  margin: '0 -8px',
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(18)
+    }
+  }, {
+    props: {
+      size: 'large'
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(22)
+    }
+  }]
 }));
 const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiPaginationItem'
   });

package/node/Radio/Radio.js

@@ -15,17 +15,18 @@ var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _SwitchBase = _interopRequireDefault(require("../internal/SwitchBase"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _RadioButtonIcon = _interopRequireDefault(require("./RadioButtonIcon"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _createChainedFunction = _interopRequireDefault(require("../utils/createChainedFunction"));
 var _useRadioGroup = _interopRequireDefault(require("../RadioGroup/useRadioGroup"));
 var _radioClasses = _interopRequireWildcard(require("./radioClasses"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _styled = require("../styles/styled");
+var _zeroStyled = require("../zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
 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)('MuiRadio');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -37,7 +38,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _extends2.default)({}, classes, (0, _composeClasses.default)(slots, _radioClasses.getRadioUtilityClass, classes));
 };
-const RadioRoot = (0, _styled.default)(_SwitchBase.default, {
+const RadioRoot = (0, _zeroStyled.styled)(_SwitchBase.default, {
   shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
   name: 'MuiRadio',
   slot: 'Root',
@@ -48,26 +49,55 @@ const RadioRoot = (0, _styled.default)(_SwitchBase.default, {
     return [styles.root, ownerState.size !== 'medium' && styles[`size${(0, _capitalize.default)(ownerState.size)}`], styles[`color${(0, _capitalize.default)(ownerState.color)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
-  color: (theme.vars || theme).palette.text.secondary
-}, !ownerState.disableRipple && {
-  '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
-    }
-  }
-}, ownerState.color !== 'default' && {
-  [`&.${_radioClasses.default.checked}`]: {
-    color: (theme.vars || theme).palette[ownerState.color].main
-  }
-}, {
+  theme
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
   [`&.${_radioClasses.default.disabled}`]: {
     color: (theme.vars || theme).palette.action.disabled
-  }
+  },
+  variants: [{
+    props: {
+      color: 'default',
+      disableRipple: false
+    },
+    style: {
+      '&:hover': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity)
+      }
+    }
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+    props: {
+      color,
+      disableRipple: false
+    },
+    style: {
+      '&:hover': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.hoverOpacity)
+      }
+    }
+  })), ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      [`&.${_radioClasses.default.checked}`]: {
+        color: (theme.vars || theme).palette[color].main
+      }
+    }
+  })), {
+    // Should be last to override other colors
+    props: {
+      disableRipple: false
+    },
+    style: {
+      // Reset on touch devices, it doesn't add specificity
+      '&:hover': {
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }
+    }
+  }]
 }));
 function areEqualValues(a, b) {
   if (typeof b === 'object' && b !== null) {
@@ -83,7 +113,7 @@ const defaultCheckedIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButtonIcon.de
 const defaultIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButtonIcon.default, {});
 const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
   var _defaultIcon$props$fo, _defaultCheckedIcon$p;
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiRadio'
   });

package/node/Radio/RadioButtonIcon.js

@@ -11,37 +11,43 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _RadioButtonUnchecked = _interopRequireDefault(require("../internal/svg-icons/RadioButtonUnchecked"));
 var _RadioButtonChecked = _interopRequireDefault(require("../internal/svg-icons/RadioButtonChecked"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _styled = require("../styles/styled");
+var _zeroStyled = require("../zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
 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 RadioButtonIconRoot = (0, _styled.default)('span', {
+const RadioButtonIconRoot = (0, _zeroStyled.styled)('span', {
   shouldForwardProp: _styled.rootShouldForwardProp
 })({
   position: 'relative',
   display: 'flex'
 });
-const RadioButtonIconBackground = (0, _styled.default)(_RadioButtonUnchecked.default)({
+const RadioButtonIconBackground = (0, _zeroStyled.styled)(_RadioButtonUnchecked.default)({
   // Scale applied to prevent dot misalignment in Safari
   transform: 'scale(1)'
 });
-const RadioButtonIconDot = (0, _styled.default)(_RadioButtonChecked.default)(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+const RadioButtonIconDot = (0, _zeroStyled.styled)(_RadioButtonChecked.default)(({
+  theme
+}) => ({
   left: 0,
   position: 'absolute',
   transform: 'scale(0)',
   transition: theme.transitions.create('transform', {
     easing: theme.transitions.easing.easeIn,
     duration: theme.transitions.duration.shortest
-  })
-}, ownerState.checked && {
-  transform: 'scale(1)',
-  transition: theme.transitions.create('transform', {
-    easing: theme.transitions.easing.easeOut,
-    duration: theme.transitions.duration.shortest
-  })
+  }),
+  variants: [{
+    props: {
+      checked: true
+    },
+    style: {
+      transform: 'scale(1)',
+      transition: theme.transitions.create('transform', {
+        easing: theme.transitions.easing.easeOut,
+        duration: theme.transitions.duration.shortest
+      })
+    }
+  }]
 }));
 
 /**
@@ -70,7 +76,7 @@ function RadioButtonIcon(props) {
     })]
   });
 }
-process.env.NODE_ENV !== "production" ? RadioButtonIcon.propTypes = {
+process.env.NODE_ENV !== "production" ? RadioButtonIcon.propTypes /* remove-proptypes */ = {
   /**
    * If `true`, the component is checked.
    */

package/node/Rating/Rating.js

@@ -6,8 +6,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"));
@@ -74,9 +74,8 @@ const RatingRoot = (0, _styled.default)('span', {
     }, styles.root, styles[`size${(0, _utils.capitalize)(ownerState.size)}`], ownerState.readOnly && styles.readOnly];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   display: 'inline-flex',
   // Required to position the pristine input absolutely
   position: 'relative',
@@ -93,13 +92,30 @@ const RatingRoot = (0, _styled.default)('span', {
   [`&.${_ratingClasses.default.focusVisible} .${_ratingClasses.default.iconActive}`]: {
     outline: '1px solid #999'
   },
-  [`& .${_ratingClasses.default.visuallyHidden}`]: _visuallyHidden.default
-}, ownerState.size === 'small' && {
-  fontSize: theme.typography.pxToRem(18)
-}, ownerState.size === 'large' && {
-  fontSize: theme.typography.pxToRem(30)
-}, ownerState.readOnly && {
-  pointerEvents: 'none'
+  [`& .${_ratingClasses.default.visuallyHidden}`]: _visuallyHidden.default,
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(18)
+    }
+  }, {
+    props: {
+      size: 'large'
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(30)
+    }
+  }, {
+    // TODO v6: use the .Mui-readOnly global state class
+    props: ({
+      ownerState
+    }) => ownerState.readOnly,
+    style: {
+      pointerEvents: 'none'
+    }
+  }]
 }));
 const RatingLabel = (0, _styled.default)('label', {
   name: 'MuiRating',
@@ -107,17 +123,21 @@ const RatingLabel = (0, _styled.default)('label', {
   overridesResolver: ({
     ownerState
   }, styles) => [styles.label, ownerState.emptyValueFocused && styles.labelEmptyValueActive]
-})(({
-  ownerState
-}) => (0, _extends2.default)({
-  cursor: 'inherit'
-}, ownerState.emptyValueFocused && {
-  top: 0,
-  bottom: 0,
-  position: 'absolute',
-  outline: '1px solid #999',
-  width: '100%'
-}));
+})({
+  cursor: 'inherit',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.emptyValueFocused,
+    style: {
+      top: 0,
+      bottom: 0,
+      position: 'absolute',
+      outline: '1px solid #999',
+      width: '100%'
+    }
+  }]
+});
 const RatingIcon = (0, _styled.default)('span', {
   name: 'MuiRating',
   slot: 'Icon',
@@ -128,9 +148,8 @@ const RatingIcon = (0, _styled.default)('span', {
     return [styles.icon, ownerState.iconEmpty && styles.iconEmpty, ownerState.iconFilled && styles.iconFilled, ownerState.iconHover && styles.iconHover, ownerState.iconFocus && styles.iconFocus, ownerState.iconActive && styles.iconActive];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   // Fit wrapper to actual icon size.
   display: 'flex',
   transition: theme.transitions.create('transform', {
@@ -138,11 +157,22 @@ const RatingIcon = (0, _styled.default)('span', {
   }),
   // Fix mouseLeave issue.
   // https://github.com/facebook/react/issues/4492
-  pointerEvents: 'none'
-}, ownerState.iconActive && {
-  transform: 'scale(1.2)'
-}, ownerState.iconEmpty && {
-  color: (theme.vars || theme).palette.action.disabled
+  pointerEvents: 'none',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.iconActive,
+    style: {
+      transform: 'scale(1.2)'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.iconEmpty,
+    style: {
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  }]
 }));
 const RatingDecimal = (0, _styled.default)('span', {
   name: 'MuiRating',
@@ -154,13 +184,17 @@ const RatingDecimal = (0, _styled.default)('span', {
     } = props;
     return [styles.decimal, iconActive && styles.iconActive];
   }
-})(({
-  iconActive
-}) => (0, _extends2.default)({
-  position: 'relative'
-}, iconActive && {
-  transform: 'scale(1.2)'
-}));
+})({
+  position: 'relative',
+  variants: [{
+    props: ({
+      iconActive
+    }) => iconActive,
+    style: {
+      transform: 'scale(1.2)'
+    }
+  }]
+});
 function IconContainer(props) {
   const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _extends2.default)({}, other));