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

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-alpha.3
+ * @mui/material v6.0.0-alpha.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -6266,6 +6266,9 @@
     },
     boxSizing: {},
     // typography
+    font: {
+      themeKey: 'font'
+    },
     fontFamily: {
       themeKey: 'typography'
     },
@@ -7267,7 +7270,7 @@
     return resolveProps(theme.components[name].defaultProps, props);
   }
 
-  function useThemeProps$N(_ref) {
+  function useThemeProps$R(_ref) {
     var props = _ref.props,
       name = _ref.name,
       defaultTheme = _ref.defaultTheme,
@@ -9569,7 +9572,7 @@
     }
   });
   var useThemePropsDefault$2 = function useThemePropsDefault(inProps) {
-    return useThemeProps$N({
+    return useThemeProps$R({
       props: inProps,
       name: 'MuiContainer',
       defaultTheme: defaultTheme$6
@@ -9957,7 +9960,7 @@
     }
   });
   function useThemePropsDefault$1(props) {
-    return useThemeProps$N({
+    return useThemeProps$R({
       props: props,
       name: 'MuiGrid',
       defaultTheme: defaultTheme$5
@@ -10124,7 +10127,7 @@
     }
   });
   function useThemePropsDefault(props) {
-    return useThemeProps$N({
+    return useThemeProps$R({
       props: props,
       name: 'MuiStack',
       defaultTheme: defaultTheme$4
@@ -11164,10 +11167,10 @@
     return theme[THEME_ID] || theme;
   }
 
-  function useThemeProps$M(_ref) {
+  function useThemeProps$Q(_ref) {
     var props = _ref.props,
       name = _ref.name;
-    return useThemeProps$N({
+    return useThemeProps$R({
       props: props,
       name: name,
       defaultTheme: defaultTheme$3,
@@ -11224,6 +11227,20 @@
     throw new Error("MUI: withTheme is no longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#mui-material-styles for more details." );
   }
 
+  function prepareTypographyVars(typography) {
+    var vars = {};
+    var entries = Object.entries(typography);
+    entries.forEach(function (entry) {
+      var _entry = _slicedToArray(entry, 2),
+        key = _entry[0],
+        value = _entry[1];
+      if (_typeof(value) === 'object') {
+        vars[key] = "".concat(value.fontStyle ? "".concat(value.fontStyle, " ") : '').concat(value.fontVariant ? "".concat(value.fontVariant, " ") : '').concat(value.fontWeight ? "".concat(value.fontWeight, " ") : '').concat(value.fontStretch ? "".concat(value.fontStretch, " ") : '').concat(value.fontSize || '').concat(value.lineHeight ? "/".concat(value.lineHeight, " ") : '').concat(value.fontFamily || '');
+      }
+    });
+    return vars;
+  }
+
   function shouldSkipGeneratingVar(keys) {
     var _keys$;
     return !!keys[0].match(/(cssVarPrefix|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
@@ -11232,16 +11249,15 @@
   }
 
   // Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
-  var getOverlayAlpha = function getOverlayAlpha(elevation) {
+  function getOverlayAlpha(elevation) {
     var alphaValue;
     if (elevation < 1) {
       alphaValue = 5.11916 * Math.pow(elevation, 2);
     } else {
       alphaValue = 4.5 * Math.log(elevation + 1) + 2;
     }
-    return (alphaValue / 100).toFixed(2);
-  };
-  var getOverlayAlpha$1 = getOverlayAlpha;
+    return Math.round(alphaValue * 10) / 1000;
+  }
 
   /**
    * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
@@ -11277,7 +11293,7 @@
     if (index === 0) {
       return undefined;
     }
-    var overlay = getOverlayAlpha$1(index);
+    var overlay = getOverlayAlpha(index);
     return "linear-gradient(rgba(255 255 255 / ".concat(overlay, "), rgba(255 255 255 / ").concat(overlay, "))");
   });
   function assignNode(obj, keys) {
@@ -11382,6 +11398,7 @@
           overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
         })
       }),
+      font: _extends({}, prepareTypographyVars(muiTheme.typography), muiTheme.font),
       spacing: getSpacingVal(input.spacing)
     });
     Object.keys(theme.colorSchemes).forEach(function (key) {
@@ -11670,12 +11687,18 @@
     throw new Error("MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.For more details, see https://github.com/mui/material-ui/pull/35150." );
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  function createUseThemeProps(name) {
+    return useThemeProps$Q;
+  }
+
   function getSvgIconUtilityClass(slot) {
     return generateUtilityClass$1('MuiSvgIcon', slot);
   }
   var svgIconClasses = generateUtilityClasses$1('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
   var svgIconClasses$1 = svgIconClasses;
 
+  var useThemeProps$P = createUseThemeProps();
   var useUtilityClasses$1P = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       fontSize = ownerState.fontSize,
@@ -11693,37 +11716,96 @@
       return [styles.root, ownerState.color !== 'inherit' && styles["color".concat(capitalize(ownerState.color))], styles["fontSize".concat(capitalize(ownerState.fontSize))]];
     }
   })(function (_ref) {
-    var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette2, _palette3;
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
+    var _theme$transitions, _theme$transitions$cr, _transitions, _theme$vars, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _theme$vars2, _palette2, _theme$vars4, _palette3, _theme$vars5;
+    var theme = _ref.theme;
     return {
       userSelect: 'none',
       width: '1em',
       height: '1em',
       display: 'inline-block',
-      // the <svg> will define the property that has `currentColor`
-      // for example heroicons uses fill="none" and stroke="currentColor"
-      fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
       flexShrink: 0,
       transition: (_theme$transitions = theme.transitions) == null || (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
-        duration: (_theme$transitions2 = theme.transitions) == null || (_theme$transitions2 = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2.shorter
+        duration: (_transitions = ((_theme$vars = theme.vars) != null ? _theme$vars : theme).transitions) == null || (_transitions = _transitions.duration) == null ? void 0 : _transitions.shorter
       }),
-      fontSize: {
-        inherit: 'inherit',
-        small: ((_theme$typography = theme.typography) == null || (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
-        medium: ((_theme$typography2 = theme.typography) == null || (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
-        large: ((_theme$typography3 = theme.typography) == null || (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
-      }[ownerState.fontSize],
-      // TODO v5 deprecate, v6 remove for sx
-      color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null || (_palette = _palette[ownerState.color]) == null ? void 0 : _palette.main) != null ? _palette$ownerState$c : {
-        action: (_palette2 = (theme.vars || theme).palette) == null || (_palette2 = _palette2.action) == null ? void 0 : _palette2.active,
-        disabled: (_palette3 = (theme.vars || theme).palette) == null || (_palette3 = _palette3.action) == null ? void 0 : _palette3.disabled,
-        inherit: undefined
-      }[ownerState.color]
+      variants: [{
+        props: function props(_props) {
+          return !_props.hasSvgAsChild;
+        },
+        style: {
+          // the <svg> will define the property that has `currentColor`
+          // for example heroicons uses fill="none" and stroke="currentColor"
+          fill: 'currentColor'
+        }
+      }, {
+        props: {
+          fontSize: 'inherit'
+        },
+        style: {
+          fontSize: 'inherit'
+        }
+      }, {
+        props: {
+          fontSize: 'small'
+        },
+        style: {
+          fontSize: ((_theme$typography = theme.typography) == null || (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem'
+        }
+      }, {
+        props: {
+          fontSize: 'medium'
+        },
+        style: {
+          fontSize: ((_theme$typography2 = theme.typography) == null || (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem'
+        }
+      }, {
+        props: {
+          fontSize: 'large'
+        },
+        style: {
+          fontSize: ((_theme$typography3 = theme.typography) == null || (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
+        }
+      }].concat(_toConsumableArray(Object.entries(((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette).filter(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          value = _ref3[1];
+        return value.main;
+      }).map(function (_ref4) {
+        var _palette, _theme$vars3;
+        var _ref5 = _slicedToArray(_ref4, 1),
+          color = _ref5[0];
+        return {
+          props: {
+            color: color
+          },
+          style: {
+            color: (_palette = ((_theme$vars3 = theme.vars) != null ? _theme$vars3 : theme).palette) == null || (_palette = _palette[color]) == null ? void 0 : _palette.main
+          }
+        };
+      })), [{
+        props: {
+          color: 'action'
+        },
+        style: {
+          color: (_palette2 = ((_theme$vars4 = theme.vars) != null ? _theme$vars4 : theme).palette) == null || (_palette2 = _palette2.action) == null ? void 0 : _palette2.active
+        }
+      }, {
+        props: {
+          color: 'disabled'
+        },
+        style: {
+          color: (_palette3 = ((_theme$vars5 = theme.vars) != null ? _theme$vars5 : theme).palette) == null || (_palette3 = _palette3.action) == null ? void 0 : _palette3.disabled
+        }
+      }, {
+        props: {
+          color: 'inherit'
+        },
+        style: {
+          color: undefined
+        }
+      }])
     };
   });
   var SvgIcon = /*#__PURE__*/React__namespace.forwardRef(function SvgIcon(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$P({
       props: inProps,
       name: 'MuiSvgIcon'
     });
@@ -11844,7 +11926,9 @@
      */
     viewBox: PropTypes.string
   } ;
-  SvgIcon.muiName = 'SvgIcon';
+  if (SvgIcon) {
+    SvgIcon.muiName = 'SvgIcon';
+  }
   var SvgIcon$1 = SvgIcon;
 
   function createSvgIcon(path, displayName) {
@@ -11880,11 +11964,6 @@
     return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  function createUseThemeProps(name) {
-    return useThemeProps$M;
-  }
-
   function _setPrototypeOf(o, p) {
     _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
       o.__proto__ = p;
@@ -12972,7 +13051,7 @@
    * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
    */
   var Collapse = /*#__PURE__*/React__namespace.forwardRef(function Collapse(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiCollapse'
     });
@@ -13296,13 +13375,13 @@
     }, ownerState.variant === 'elevation' && _extends({
       boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
     }, !theme.vars && theme.palette.mode === 'dark' && {
-      backgroundImage: "linear-gradient(".concat(alpha('#fff', getOverlayAlpha$1(ownerState.elevation)), ", ").concat(alpha('#fff', getOverlayAlpha$1(ownerState.elevation)), ")")
+      backgroundImage: "linear-gradient(".concat(alpha('#fff', getOverlayAlpha(ownerState.elevation)), ", ").concat(alpha('#fff', getOverlayAlpha(ownerState.elevation)), ")")
     }, theme.vars && {
       backgroundImage: (_theme$vars$overlays = theme.vars.overlays) == null ? void 0 : _theme$vars$overlays[ownerState.elevation]
     }));
   });
   var Paper = /*#__PURE__*/React__namespace.forwardRef(function Paper(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiPaper'
     });
@@ -13679,7 +13758,7 @@
   var accordionClasses = generateUtilityClasses$1('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
   var accordionClasses$1 = accordionClasses;
 
-  var useThemeProps$L = createUseThemeProps();
+  var useThemeProps$O = createUseThemeProps();
   var useUtilityClasses$1M = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       square = ownerState.square,
@@ -13777,7 +13856,7 @@
     };
   });
   var Accordion = /*#__PURE__*/React__namespace.forwardRef(function Accordion(inProps, ref) {
-    var props = useThemeProps$L({
+    var props = useThemeProps$O({
       props: inProps,
       name: 'MuiAccordion'
     });
@@ -13971,7 +14050,7 @@
   var accordionActionsClasses = generateUtilityClasses$1('MuiAccordionActions', ['root', 'spacing']);
   var accordionActionsClasses$1 = accordionActionsClasses;
 
-  var useThemeProps$K = createUseThemeProps();
+  var useThemeProps$N = createUseThemeProps();
   var useUtilityClasses$1L = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disableSpacing = ownerState.disableSpacing;
@@ -14004,7 +14083,7 @@
     }]
   });
   var AccordionActions = /*#__PURE__*/React__namespace.forwardRef(function AccordionActions(inProps, ref) {
-    var props = useThemeProps$K({
+    var props = useThemeProps$N({
       props: inProps,
       name: 'MuiAccordionActions'
     });
@@ -14057,7 +14136,7 @@
   var accordionDetailsClasses = generateUtilityClasses$1('MuiAccordionDetails', ['root']);
   var accordionDetailsClasses$1 = accordionDetailsClasses;
 
-  var useThemeProps$J = createUseThemeProps();
+  var useThemeProps$M = createUseThemeProps();
   var useUtilityClasses$1K = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -14078,7 +14157,7 @@
     };
   });
   var AccordionDetails = /*#__PURE__*/React__namespace.forwardRef(function AccordionDetails(inProps, ref) {
-    var props = useThemeProps$J({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiAccordionDetails'
     });
@@ -14213,7 +14292,7 @@
   var touchRippleClasses$1 = touchRippleClasses;
 
   var _templateObject$3, _templateObject2$3, _templateObject3$3, _templateObject4$3;
-  var useThemeProps$I = createUseThemeProps();
+  var useThemeProps$L = createUseThemeProps();
   var DURATION = 550;
   var DELAY_RIPPLE = 80;
   var enterKeyframe = keyframes(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(0);\n    opacity: 0.1;\n  }\n\n  100% {\n    transform: scale(1);\n    opacity: 0.3;\n  }\n"])));
@@ -14259,7 +14338,7 @@
    * TODO v5: Make private
    */
   var TouchRipple = /*#__PURE__*/React__namespace.forwardRef(function TouchRipple(inProps, ref) {
-    var props = useThemeProps$I({
+    var props = useThemeProps$L({
       props: inProps,
       name: 'MuiTouchRipple'
     });
@@ -14471,7 +14550,7 @@
   var buttonBaseClasses = generateUtilityClasses$1('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
   var buttonBaseClasses$1 = buttonBaseClasses;
 
-  var useThemeProps$H = createUseThemeProps();
+  var useThemeProps$K = createUseThemeProps();
   var useUtilityClasses$1J = function useUtilityClasses(ownerState) {
     var disabled = ownerState.disabled,
       focusVisible = ownerState.focusVisible,
@@ -14536,7 +14615,7 @@
    * It contains a load of style reset and some focus/ripple logic.
    */
   var ButtonBase = /*#__PURE__*/React__namespace.forwardRef(function ButtonBase(inProps, ref) {
-    var props = useThemeProps$H({
+    var props = useThemeProps$K({
       props: inProps,
       name: 'MuiButtonBase'
     });
@@ -14947,7 +15026,7 @@
   var accordionSummaryClasses = generateUtilityClasses$1('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
   var accordionSummaryClasses$1 = accordionSummaryClasses;
 
-  var useThemeProps$G = createUseThemeProps();
+  var useThemeProps$J = createUseThemeProps();
   var useUtilityClasses$1I = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       expanded = ownerState.expanded,
@@ -15038,7 +15117,7 @@
     });
   });
   var AccordionSummary = /*#__PURE__*/React__namespace.forwardRef(function AccordionSummary(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$J({
       props: inProps,
       name: 'MuiAccordionSummary'
     });
@@ -15144,6 +15223,7 @@
   var iconButtonClasses = generateUtilityClasses$1('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
   var iconButtonClasses$1 = iconButtonClasses;
 
+  var useThemeProps$I = createUseThemeProps();
   var useUtilityClasses$1H = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disabled = ownerState.disabled,
@@ -15163,9 +15243,8 @@
       return [styles.root, ownerState.color !== 'default' && styles["color".concat(capitalize(ownerState.color))], ownerState.edge && styles["edge".concat(capitalize(ownerState.edge))], styles["size".concat(capitalize(ownerState.size))]];
     }
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    return _extends({
+    var theme = _ref.theme;
+    return {
       textAlign: 'center',
       flex: '0 0 auto',
       fontSize: theme.typography.pxToRem(24),
@@ -15176,48 +15255,122 @@
       color: (theme.vars || theme).palette.action.active,
       transition: theme.transitions.create('background-color', {
         duration: theme.transitions.duration.shortest
-      })
-    }, !ownerState.disableRipple && {
-      '&:hover': {
-        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.activeChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
+      }),
+      variants: [{
+        props: {
+          disableRipple: false
+        },
+        style: {
+          '&:hover': {
+            backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.activeChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+            // Reset on touch devices, it doesn't add specificity
+            '@media (hover: none)': {
+              backgroundColor: 'transparent'
+            }
+          }
         }
-      }
-    }, ownerState.edge === 'start' && {
-      marginLeft: ownerState.size === 'small' ? -3 : -12
-    }, ownerState.edge === 'end' && {
-      marginRight: ownerState.size === 'small' ? -3 : -12
-    });
+      }, {
+        props: {
+          edge: 'start'
+        },
+        style: {
+          marginLeft: -12
+        }
+      }, {
+        props: {
+          edge: 'start',
+          size: 'small'
+        },
+        style: {
+          marginLeft: -3
+        }
+      }, {
+        props: {
+          edge: 'end'
+        },
+        style: {
+          marginRight: -12
+        }
+      }, {
+        props: {
+          edge: 'end',
+          size: 'small'
+        },
+        style: {
+          marginRight: -3
+        }
+      }]
+    };
   }, function (_ref2) {
-    var _palette;
-    var theme = _ref2.theme,
-      ownerState = _ref2.ownerState;
-    var palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
-    return _extends({}, ownerState.color === 'inherit' && {
-      color: 'inherit'
-    }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends({
-      color: palette == null ? void 0 : palette.main
-    }, !ownerState.disableRipple && {
-      '&:hover': _extends({}, palette && {
-        backgroundColor: theme.vars ? "rgba(".concat(palette.mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(palette.main, theme.palette.action.hoverOpacity)
+    var theme = _ref2.theme;
+    return _defineProperty({
+      variants: [{
+        props: {
+          color: 'inherit'
+        },
+        style: {
+          color: 'inherit'
+        }
+      }].concat(_toConsumableArray(Object.entries(theme.palette).filter(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+          value = _ref4[1];
+        return value.main;
+      }) // check all the used fields in the style below
+      .map(function (_ref5) {
+        var _ref6 = _slicedToArray(_ref5, 1),
+          color = _ref6[0];
+        return {
+          props: {
+            color: color
+          },
+          style: {
+            color: (theme.vars || theme).palette[color].main
+          }
+        };
+      })), _toConsumableArray(Object.entries(theme.palette).filter(function (_ref7) {
+        var _ref8 = _slicedToArray(_ref7, 2),
+          value = _ref8[1];
+        return value.main;
+      }) // check all the used fields in the style below
+      .map(function (_ref9) {
+        var _ref10 = _slicedToArray(_ref9, 1),
+          color = _ref10[0];
+        return {
+          props: {
+            color: color,
+            disableRipple: false
+          },
+          style: {
+            '&:hover': {
+              backgroundColor: theme.vars ? "rgba(".concat((theme.vars || theme).palette[color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha((theme.vars || theme).palette[color].main, theme.palette.action.hoverOpacity),
+              // Reset on touch devices, it doesn't add specificity
+              '@media (hover: none)': {
+                backgroundColor: 'transparent'
+              }
+            }
+          }
+        };
+      })), [{
+        props: {
+          size: 'small'
+        },
+        style: {
+          padding: 5,
+          fontSize: theme.typography.pxToRem(18)
+        }
       }, {
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
+        props: {
+          size: 'large'
+        },
+        style: {
+          padding: 12,
+          fontSize: theme.typography.pxToRem(28)
         }
-      })
-    }), ownerState.size === 'small' && {
-      padding: 5,
-      fontSize: theme.typography.pxToRem(18)
-    }, ownerState.size === 'large' && {
-      padding: 12,
-      fontSize: theme.typography.pxToRem(28)
-    }, _defineProperty({}, "&.".concat(iconButtonClasses$1.disabled), {
+      }])
+    }, "&.".concat(iconButtonClasses$1.disabled), {
       backgroundColor: 'transparent',
       color: (theme.vars || theme).palette.action.disabled
-    }));
+    });
   });
 
   /**
@@ -15225,7 +15378,7 @@
    * regarding the available icon options.
    */
   var IconButton = /*#__PURE__*/React__namespace.forwardRef(function IconButton(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$I({
       props: inProps,
       name: 'MuiIconButton'
     });
@@ -15352,7 +15505,7 @@
     d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
   }), 'Close');
 
-  var useThemeProps$F = createUseThemeProps();
+  var useThemeProps$H = createUseThemeProps();
   var useUtilityClasses$1G = function useUtilityClasses(ownerState) {
     var variant = ownerState.variant,
       color = ownerState.color,
@@ -15500,7 +15653,7 @@
     })
   };
   var Alert = /*#__PURE__*/React__namespace.forwardRef(function Alert(inProps, ref) {
-    var props = useThemeProps$F({
+    var props = useThemeProps$H({
       props: inProps,
       name: 'MuiAlert'
     });
@@ -15787,7 +15940,7 @@
     return colorTransformations$1[color] || color;
   };
   var Typography = /*#__PURE__*/React__namespace.forwardRef(function Typography(inProps, ref) {
-    var themeProps = useThemeProps$M({
+    var themeProps = useThemeProps$Q({
       props: inProps,
       name: 'MuiTypography'
     });
@@ -15826,9 +15979,10 @@
     return /*#__PURE__*/jsxRuntime_1(TypographyRoot, _extends({
       as: Component,
       ref: ref,
-      ownerState: ownerState,
       className: clsx(classes.root, className)
-    }, other));
+    }, other, {
+      ownerState: ownerState
+    }));
   });
   Typography.propTypes /* remove-proptypes */ = {
     // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -15913,7 +16067,7 @@
   var alertTitleClasses = generateUtilityClasses$1('MuiAlertTitle', ['root']);
   var alertTitleClasses$1 = alertTitleClasses;
 
-  var useThemeProps$E = createUseThemeProps();
+  var useThemeProps$G = createUseThemeProps();
   var useUtilityClasses$1E = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -15935,7 +16089,7 @@
     };
   });
   var AlertTitle = /*#__PURE__*/React__namespace.forwardRef(function AlertTitle(inProps, ref) {
-    var props = useThemeProps$E({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiAlertTitle'
     });
@@ -15981,7 +16135,7 @@
   var appBarClasses = generateUtilityClasses$1('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning']);
   var appBarClasses$1 = appBarClasses;
 
-  var useThemeProps$D = createUseThemeProps();
+  var useThemeProps$F = createUseThemeProps();
   var useUtilityClasses$1D = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       position = ownerState.position,
@@ -16132,7 +16286,7 @@
     };
   });
   var AppBar = /*#__PURE__*/React__namespace.forwardRef(function AppBar(inProps, ref) {
-    var props = useThemeProps$D({
+    var props = useThemeProps$F({
       props: inProps,
       name: 'MuiAppBar'
     });
@@ -20398,6 +20552,7 @@
       isControlled = _React$useRef.current;
     var inputRef = React__namespace.useRef(null);
     var handleRef = useForkRef(forwardedRef, inputRef);
+    var heightRef = React__namespace.useRef(null);
     var shadowRef = React__namespace.useRef(null);
     var calculateTextareaStyles = React__namespace.useCallback(function () {
       var input = inputRef.current;
@@ -20454,8 +20609,12 @@
       if (isEmpty$1(textareaStyles)) {
         return;
       }
+      var outerHeightStyle = textareaStyles.outerHeightStyle;
       var input = inputRef.current;
-      input.style.height = "".concat(textareaStyles.outerHeightStyle, "px");
+      if (heightRef.current !== outerHeightStyle) {
+        heightRef.current = outerHeightStyle;
+        input.style.height = "".concat(outerHeightStyle, "px");
+      }
       input.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
     }, [calculateTextareaStyles]);
     useEnhancedEffect$1(function () {
@@ -21636,7 +21795,7 @@
   var Popper = /*#__PURE__*/React__namespace.forwardRef(function Popper(inProps, ref) {
     var _slots$root;
     var theme = useTheme$3();
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiPopper'
     });
@@ -21834,34 +21993,62 @@
       return [styles.root, ownerState.color !== 'default' && styles["color".concat(capitalize(ownerState.color))], !ownerState.disableGutters && styles.gutters, ownerState.inset && styles.inset, !ownerState.disableSticky && styles.sticky];
     }
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    return _extends({
+    var theme = _ref.theme;
+    return {
       boxSizing: 'border-box',
       lineHeight: '48px',
       listStyle: 'none',
       color: (theme.vars || theme).palette.text.secondary,
       fontFamily: theme.typography.fontFamily,
       fontWeight: theme.typography.fontWeightMedium,
-      fontSize: theme.typography.pxToRem(14)
-    }, ownerState.color === 'primary' && {
-      color: (theme.vars || theme).palette.primary.main
-    }, ownerState.color === 'inherit' && {
-      color: 'inherit'
-    }, !ownerState.disableGutters && {
-      paddingLeft: 16,
-      paddingRight: 16
-    }, ownerState.inset && {
-      paddingLeft: 72
-    }, !ownerState.disableSticky && {
-      position: 'sticky',
-      top: 0,
-      zIndex: 1,
-      backgroundColor: (theme.vars || theme).palette.background.paper
-    });
+      fontSize: theme.typography.pxToRem(14),
+      variants: [{
+        props: {
+          color: 'primary'
+        },
+        style: {
+          color: (theme.vars || theme).palette.primary.main
+        }
+      }, {
+        props: {
+          color: 'inherit'
+        },
+        style: {
+          color: 'inherit'
+        }
+      }, {
+        props: function props(_ref2) {
+          var ownerState = _ref2.ownerState;
+          return !ownerState.disableGutters;
+        },
+        style: {
+          paddingLeft: 16,
+          paddingRight: 16
+        }
+      }, {
+        props: function props(_ref3) {
+          var ownerState = _ref3.ownerState;
+          return ownerState.inset;
+        },
+        style: {
+          paddingLeft: 72
+        }
+      }, {
+        props: function props(_ref4) {
+          var ownerState = _ref4.ownerState;
+          return !ownerState.disableSticky;
+        },
+        style: {
+          position: 'sticky',
+          top: 0,
+          zIndex: 1,
+          backgroundColor: (theme.vars || theme).palette.background.paper
+        }
+      }]
+    };
   });
   var ListSubheader = /*#__PURE__*/React__namespace.forwardRef(function ListSubheader(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiListSubheader'
     });
@@ -21952,7 +22139,7 @@
   var chipClasses = generateUtilityClasses$1('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
   var chipClasses$1 = chipClasses;
 
-  var useThemeProps$C = createUseThemeProps();
+  var useThemeProps$E = createUseThemeProps();
   var useUtilityClasses$1A = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disabled = ownerState.disabled,
@@ -22252,7 +22439,7 @@
    * Chips represent complex entities in small blocks, such as a contact.
    */
   var Chip = /*#__PURE__*/React__namespace.forwardRef(function Chip(inProps, ref) {
-    var props = useThemeProps$C({
+    var props = useThemeProps$E({
       props: inProps,
       name: 'MuiChip'
     });
@@ -22740,7 +22927,7 @@
    */
   var InputBase = /*#__PURE__*/React__namespace.forwardRef(function InputBase(inProps, ref) {
     var _slotProps$input;
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiInputBase'
     });
@@ -23280,7 +23467,7 @@
   var autocompleteClasses$1 = autocompleteClasses;
 
   var _styled, _ClearIcon, _ArrowDropDownIcon;
-  var useThemeProps$B = createUseThemeProps();
+  var useThemeProps$D = createUseThemeProps();
   var useUtilityClasses$1y = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disablePortal = ownerState.disablePortal,
@@ -23599,7 +23786,7 @@
   }));
   var Autocomplete = /*#__PURE__*/React__namespace.forwardRef(function Autocomplete(inProps, ref) {
     var _slotProps$clearIndic, _slotProps$paper, _slotProps$popper, _slotProps$popupIndic;
-    var props = useThemeProps$B({
+    var props = useThemeProps$D({
       props: inProps,
       name: 'MuiAutocomplete'
     });
@@ -24375,7 +24562,7 @@
   var avatarClasses = generateUtilityClasses$1('MuiAvatar', ['root', 'colorDefault', 'circular', 'rounded', 'square', 'img', 'fallback']);
   var avatarClasses$1 = avatarClasses;
 
-  var useThemeProps$A = createUseThemeProps();
+  var useThemeProps$C = createUseThemeProps();
   var useUtilityClasses$1x = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       variant = ownerState.variant,
@@ -24507,7 +24694,7 @@
     return loaded;
   }
   var Avatar = /*#__PURE__*/React__namespace.forwardRef(function Avatar(inProps, ref) {
-    var props = useThemeProps$A({
+    var props = useThemeProps$C({
       props: inProps,
       name: 'MuiAvatar'
     });
@@ -24668,7 +24855,7 @@
     small: -16,
     medium: -8
   };
-  var useThemeProps$z = createUseThemeProps();
+  var useThemeProps$B = createUseThemeProps();
   var useUtilityClasses$1w = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -24699,7 +24886,7 @@
   });
   var AvatarGroup = /*#__PURE__*/React__namespace.forwardRef(function AvatarGroup(inProps, ref) {
     var _slotProps$additional;
-    var props = useThemeProps$z({
+    var props = useThemeProps$B({
       props: inProps,
       name: 'MuiAvatarGroup'
     });
@@ -25055,7 +25242,7 @@
   var backdropClasses = generateUtilityClasses$1('MuiBackdrop', ['root', 'invisible']);
   var backdropClasses$1 = backdropClasses;
 
-  var useThemeProps$y = createUseThemeProps();
+  var useThemeProps$A = createUseThemeProps();
   var useUtilityClasses$1v = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       invisible = ownerState.invisible;
@@ -25092,7 +25279,7 @@
     }]
   });
   var Backdrop = /*#__PURE__*/React__namespace.forwardRef(function Backdrop(inProps, ref) {
-    var props = useThemeProps$y({
+    var props = useThemeProps$A({
       props: inProps,
       name: 'MuiBackdrop'
     });
@@ -25263,7 +25450,7 @@
 
   var RADIUS_STANDARD = 10;
   var RADIUS_DOT = 4;
-  var useThemeProps$x = createUseThemeProps();
+  var useThemeProps$z = createUseThemeProps();
   var useUtilityClasses$1u = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       anchorOrigin = ownerState.anchorOrigin,
@@ -25466,7 +25653,7 @@
   });
   var Badge = /*#__PURE__*/React__namespace.forwardRef(function Badge(inProps, ref) {
     var _ref11, _slots$root, _ref12, _slots$badge, _slotProps$root, _slotProps$badge;
-    var props = useThemeProps$x({
+    var props = useThemeProps$z({
       props: inProps,
       name: 'MuiBadge'
     });
@@ -25690,7 +25877,7 @@
   var bottomNavigationClasses = generateUtilityClasses$1('MuiBottomNavigation', ['root']);
   var bottomNavigationClasses$1 = bottomNavigationClasses;
 
-  var useThemeProps$w = createUseThemeProps();
+  var useThemeProps$y = createUseThemeProps();
   var useUtilityClasses$1t = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -25714,7 +25901,7 @@
     };
   });
   var BottomNavigation = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigation(inProps, ref) {
-    var props = useThemeProps$w({
+    var props = useThemeProps$y({
       props: inProps,
       name: 'MuiBottomNavigation'
     });
@@ -25809,7 +25996,7 @@
   var bottomNavigationActionClasses = generateUtilityClasses$1('MuiBottomNavigationAction', ['root', 'iconOnly', 'selected', 'label']);
   var bottomNavigationActionClasses$1 = bottomNavigationActionClasses;
 
-  var useThemeProps$v = createUseThemeProps();
+  var useThemeProps$x = createUseThemeProps();
   var useUtilityClasses$1s = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       showLabel = ownerState.showLabel,
@@ -25891,7 +26078,7 @@
     }]);
   });
   var BottomNavigationAction = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigationAction(inProps, ref) {
-    var props = useThemeProps$v({
+    var props = useThemeProps$x({
       props: inProps,
       name: 'MuiBottomNavigationAction'
     });
@@ -26099,7 +26286,7 @@
   var breadcrumbsClasses = generateUtilityClasses$1('MuiBreadcrumbs', ['root', 'ol', 'li', 'separator']);
   var breadcrumbsClasses$1 = breadcrumbsClasses;
 
-  var useThemeProps$u = createUseThemeProps();
+  var useThemeProps$w = createUseThemeProps();
   var useUtilityClasses$1r = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -26159,7 +26346,7 @@
     }, []);
   }
   var Breadcrumbs = /*#__PURE__*/React__namespace.forwardRef(function Breadcrumbs(inProps, ref) {
-    var props = useThemeProps$u({
+    var props = useThemeProps$w({
       props: inProps,
       name: 'MuiBreadcrumbs'
     });
@@ -26359,7 +26546,7 @@
   }
   var ButtonGroupButtonContext$1 = ButtonGroupButtonContext;
 
-  var useThemeProps$t = createUseThemeProps();
+  var useThemeProps$v = createUseThemeProps();
   var useUtilityClasses$1q = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       disableElevation = ownerState.disableElevation,
@@ -26651,7 +26838,7 @@
     var contextProps = React__namespace.useContext(ButtonGroupContext$1);
     var buttonGroupButtonContextPositionClassName = React__namespace.useContext(ButtonGroupButtonContext$1);
     var resolvedProps = resolveProps(contextProps, inProps);
-    var props = useThemeProps$t({
+    var props = useThemeProps$v({
       props: resolvedProps,
       name: 'MuiButton'
     });
@@ -26817,7 +27004,7 @@
   var buttonGroupClasses = generateUtilityClasses$1('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'firstButton', 'fullWidth', 'horizontal', 'vertical', 'colorPrimary', 'colorSecondary', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', 'lastButton', 'middleButton']);
   var buttonGroupClasses$1 = buttonGroupClasses;
 
-  var useThemeProps$s = createUseThemeProps();
+  var useThemeProps$u = createUseThemeProps();
   var overridesResolver$6 = function overridesResolver(props, styles) {
     var ownerState = props.ownerState;
     return [_defineProperty({}, "& .".concat(buttonGroupClasses$1.grouped), styles.grouped), _defineProperty({}, "& .".concat(buttonGroupClasses$1.grouped), styles["grouped".concat(capitalize(ownerState.orientation))]), _defineProperty({}, "& .".concat(buttonGroupClasses$1.grouped), styles["grouped".concat(capitalize(ownerState.variant))]), _defineProperty({}, "& .".concat(buttonGroupClasses$1.grouped), styles["grouped".concat(capitalize(ownerState.variant)).concat(capitalize(ownerState.orientation))]), _defineProperty({}, "& .".concat(buttonGroupClasses$1.grouped), styles["grouped".concat(capitalize(ownerState.variant)).concat(capitalize(ownerState.color))]), _defineProperty({}, "& .".concat(buttonGroupClasses$1.firstButton), styles.firstButton), _defineProperty({}, "& .".concat(buttonGroupClasses$1.lastButton), styles.lastButton), _defineProperty({}, "& .".concat(buttonGroupClasses$1.middleButton), styles.middleButton), styles.root, styles[ownerState.variant], ownerState.disableElevation === true && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.orientation === 'vertical' && styles.vertical];
@@ -27006,7 +27193,7 @@
     });
   });
   var ButtonGroup = /*#__PURE__*/React__namespace.forwardRef(function ButtonGroup(inProps, ref) {
-    var props = useThemeProps$s({
+    var props = useThemeProps$u({
       props: inProps,
       name: 'MuiButtonGroup'
     });
@@ -27176,7 +27363,7 @@
   var cardClasses = generateUtilityClasses$1('MuiCard', ['root']);
   var cardClasses$1 = cardClasses;
 
-  var useThemeProps$r = createUseThemeProps();
+  var useThemeProps$t = createUseThemeProps();
   var useUtilityClasses$1o = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -27194,7 +27381,7 @@
     overflow: 'hidden'
   });
   var Card = /*#__PURE__*/React__namespace.forwardRef(function Card(inProps, ref) {
-    var props = useThemeProps$r({
+    var props = useThemeProps$t({
       props: inProps,
       name: 'MuiCard'
     });
@@ -27253,7 +27440,7 @@
   var cardActionAreaClasses = generateUtilityClasses$1('MuiCardActionArea', ['root', 'focusVisible', 'focusHighlight']);
   var cardActionAreaClasses$1 = cardActionAreaClasses;
 
-  var useThemeProps$q = createUseThemeProps();
+  var useThemeProps$s = createUseThemeProps();
   var useUtilityClasses$1n = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -27310,7 +27497,7 @@
     };
   });
   var CardActionArea = /*#__PURE__*/React__namespace.forwardRef(function CardActionArea(inProps, ref) {
-    var props = useThemeProps$q({
+    var props = useThemeProps$s({
       props: inProps,
       name: 'MuiCardActionArea'
     });
@@ -27366,7 +27553,7 @@
   var cardActionsClasses = generateUtilityClasses$1('MuiCardActions', ['root', 'spacing']);
   var cardActionsClasses$1 = cardActionsClasses;
 
-  var useThemeProps$p = createUseThemeProps();
+  var useThemeProps$r = createUseThemeProps();
   var useUtilityClasses$1m = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disableSpacing = ownerState.disableSpacing;
@@ -27398,7 +27585,7 @@
     }]
   });
   var CardActions = /*#__PURE__*/React__namespace.forwardRef(function CardActions(inProps, ref) {
-    var props = useThemeProps$p({
+    var props = useThemeProps$r({
       props: inProps,
       name: 'MuiCardActions'
     });
@@ -27451,7 +27638,7 @@
   var cardContentClasses = generateUtilityClasses$1('MuiCardContent', ['root']);
   var cardContentClasses$1 = cardContentClasses;
 
-  var useThemeProps$o = createUseThemeProps();
+  var useThemeProps$q = createUseThemeProps();
   var useUtilityClasses$1l = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -27472,7 +27659,7 @@
     }
   });
   var CardContent = /*#__PURE__*/React__namespace.forwardRef(function CardContent(inProps, ref) {
-    var props = useThemeProps$o({
+    var props = useThemeProps$q({
       props: inProps,
       name: 'MuiCardContent'
     });
@@ -27526,7 +27713,7 @@
   var cardHeaderClasses = generateUtilityClasses$1('MuiCardHeader', ['root', 'avatar', 'action', 'content', 'title', 'subheader']);
   var cardHeaderClasses$1 = cardHeaderClasses;
 
-  var useThemeProps$n = createUseThemeProps();
+  var useThemeProps$p = createUseThemeProps();
   var useUtilityClasses$1k = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -27584,7 +27771,7 @@
     flex: '1 1 auto'
   });
   var CardHeader = /*#__PURE__*/React__namespace.forwardRef(function CardHeader(inProps, ref) {
-    var props = useThemeProps$n({
+    var props = useThemeProps$p({
       props: inProps,
       name: 'MuiCardHeader'
     });
@@ -27718,7 +27905,7 @@
   var cardMediaClasses = generateUtilityClasses$1('MuiCardMedia', ['root', 'media', 'img']);
   var cardMediaClasses$1 = cardMediaClasses;
 
-  var useThemeProps$m = createUseThemeProps();
+  var useThemeProps$o = createUseThemeProps();
   var useUtilityClasses$1j = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       isMediaComponent = ownerState.isMediaComponent,
@@ -27761,7 +27948,7 @@
   var MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
   var IMAGE_COMPONENTS = ['picture', 'img'];
   var CardMedia = /*#__PURE__*/React__namespace.forwardRef(function CardMedia(inProps, ref) {
-    var props = useThemeProps$m({
+    var props = useThemeProps$o({
       props: inProps,
       name: 'MuiCardMedia'
     });
@@ -28127,6 +28314,7 @@
   var checkboxClasses = generateUtilityClasses$1('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium']);
   var checkboxClasses$1 = checkboxClasses;
 
+  var useThemeProps$n = createUseThemeProps();
   var useUtilityClasses$1h = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       indeterminate = ownerState.indeterminate,
@@ -28149,30 +28337,76 @@
       return [styles.root, ownerState.indeterminate && styles.indeterminate, styles["size".concat(capitalize(ownerState.size))], ownerState.color !== 'default' && styles["color".concat(capitalize(ownerState.color))]];
     }
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    return _extends({
-      color: (theme.vars || theme).palette.text.secondary
-    }, !ownerState.disableRipple && {
-      '&:hover': {
-        backgroundColor: theme.vars ? "rgba(".concat(ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : 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'
+    var theme = _ref.theme;
+    return {
+      color: (theme.vars || theme).palette.text.secondary,
+      variants: [{
+        props: {
+          color: 'default',
+          disableRipple: false
+        },
+        style: {
+          '&:hover': {
+            backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.activeChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
+          }
         }
-      }
-    }, ownerState.color !== 'default' && _defineProperty(_defineProperty({}, "&.".concat(checkboxClasses$1.checked, ", &.").concat(checkboxClasses$1.indeterminate), {
-      color: (theme.vars || theme).palette[ownerState.color].main
-    }), "&.".concat(checkboxClasses$1.disabled), {
-      color: (theme.vars || theme).palette.action.disabled
-    }));
+      }].concat(_toConsumableArray(Object.entries(theme.palette).filter(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          palette = _ref3[1];
+        return palette.main;
+      }).map(function (_ref4) {
+        var _ref5 = _slicedToArray(_ref4, 1),
+          color = _ref5[0];
+        return {
+          props: {
+            color: color,
+            disableRipple: false
+          },
+          style: {
+            '&:hover': {
+              backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+            }
+          }
+        };
+      })), _toConsumableArray(Object.entries(theme.palette).filter(function (_ref6) {
+        var _ref7 = _slicedToArray(_ref6, 2),
+          palette = _ref7[1];
+        return palette.main;
+      }).map(function (_ref8) {
+        var _ref9 = _slicedToArray(_ref8, 1),
+          color = _ref9[0];
+        return {
+          props: {
+            color: color
+          },
+          style: _defineProperty(_defineProperty({}, "&.".concat(checkboxClasses$1.checked, ", &.").concat(checkboxClasses$1.indeterminate), {
+            color: (theme.vars || theme).palette[color].main
+          }), "&.".concat(checkboxClasses$1.disabled), {
+            color: (theme.vars || theme).palette.action.disabled
+          })
+        };
+      })), [{
+        // 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'
+            }
+          }
+        }
+      }])
+    };
   });
   var defaultCheckedIcon$1 = /*#__PURE__*/jsxRuntime_1(CheckBoxIcon, {});
   var defaultIcon$2 = /*#__PURE__*/jsxRuntime_1(CheckBoxOutlineBlankIcon, {});
   var defaultIndeterminateIcon = /*#__PURE__*/jsxRuntime_1(IndeterminateCheckBoxIcon, {});
   var Checkbox = /*#__PURE__*/React__namespace.forwardRef(function Checkbox(inProps, ref) {
     var _icon$props$fontSize, _indeterminateIcon$pr;
-    var props = useThemeProps$M({
+    var props = useThemeProps$n({
       props: inProps,
       name: 'MuiCheckbox'
     });
@@ -28327,7 +28561,7 @@
   var circularProgressClasses$1 = circularProgressClasses;
 
   var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$2;
-  var useThemeProps$l = createUseThemeProps();
+  var useThemeProps$m = createUseThemeProps();
   var SIZE = 44;
   var circularRotateKeyframe = keyframes(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
   var circularDashKeyframe = keyframes(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0;\n  }\n\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"])));
@@ -28449,7 +28683,7 @@
    * attribute to `true` on that region until it has finished loading.
    */
   var CircularProgress = /*#__PURE__*/React__namespace.forwardRef(function CircularProgress(inProps, ref) {
-    var props = useThemeProps$l({
+    var props = useThemeProps$m({
       props: inProps,
       name: 'MuiCircularProgress'
     });
@@ -28590,7 +28824,7 @@
       }
     }),
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$M({
+      return useThemeProps$Q({
         props: inProps,
         name: 'MuiContainer'
       });
@@ -28713,7 +28947,7 @@
     return defaultStyles;
   };
   function CssBaseline(inProps) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiCssBaseline'
     });
@@ -28786,7 +29020,7 @@
   var modalClasses = generateUtilityClasses$1('MuiModal', ['root', 'hidden', 'backdrop']);
   var modalClasses$1 = modalClasses;
 
-  var useThemeProps$k = createUseThemeProps();
+  var useThemeProps$l = createUseThemeProps();
   var useUtilityClasses$1f = function useUtilityClasses(ownerState) {
     var open = ownerState.open,
       exited = ownerState.exited,
@@ -28849,7 +29083,7 @@
    */
   var Modal = /*#__PURE__*/React__namespace.forwardRef(function Modal(inProps, ref) {
     var _ref3, _slots$root, _ref4, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
-    var props = useThemeProps$k({
+    var props = useThemeProps$l({
       name: 'MuiModal',
       props: inProps
     });
@@ -29303,7 +29537,7 @@
    * Dialogs are overlaid modal paper based components with a backdrop.
    */
   var Dialog = /*#__PURE__*/React__namespace.forwardRef(function Dialog(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiDialog'
     });
@@ -29596,7 +29830,7 @@
     });
   });
   var DialogActions = /*#__PURE__*/React__namespace.forwardRef(function DialogActions(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiDialogActions'
     });
@@ -29688,7 +29922,7 @@
     }));
   });
   var DialogContent = /*#__PURE__*/React__namespace.forwardRef(function DialogContent(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiDialogContent'
     });
@@ -29760,7 +29994,7 @@
     }
   })({});
   var DialogContentText = /*#__PURE__*/React__namespace.forwardRef(function DialogContentText(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiDialogContentText'
     });
@@ -29821,7 +30055,7 @@
     flex: '0 0 auto'
   });
   var DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function DialogTitle(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiDialogTitle'
     });
@@ -29876,7 +30110,7 @@
   var dividerClasses = generateUtilityClasses$1('MuiDivider', ['root', 'absolute', 'fullWidth', 'inset', 'middle', 'flexItem', 'light', 'vertical', 'withChildren', 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper', 'wrapperVertical']);
   var dividerClasses$1 = dividerClasses;
 
-  var useThemeProps$j = createUseThemeProps();
+  var useThemeProps$k = createUseThemeProps();
   var useUtilityClasses$19 = function useUtilityClasses(ownerState) {
     var absolute = ownerState.absolute,
       children = ownerState.children,
@@ -30060,7 +30294,7 @@
     };
   });
   var Divider = /*#__PURE__*/React__namespace.forwardRef(function Divider(inProps, ref) {
-    var props = useThemeProps$j({
+    var props = useThemeProps$k({
       props: inProps,
       name: 'MuiDivider'
     });
@@ -30609,7 +30843,7 @@
    * when `variant="temporary"` is set.
    */
   var Drawer = /*#__PURE__*/React__namespace.forwardRef(function Drawer(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiDrawer'
     });
@@ -30806,7 +31040,7 @@
   var fabClasses = generateUtilityClasses$1('MuiFab', ['root', 'primary', 'secondary', 'extended', 'circular', 'focusVisible', 'disabled', 'colorInherit', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'info', 'error', 'warning', 'success']);
   var fabClasses$1 = fabClasses;
 
-  var useThemeProps$i = createUseThemeProps();
+  var useThemeProps$j = createUseThemeProps();
   var useUtilityClasses$17 = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       variant = ownerState.variant,
@@ -30956,7 +31190,7 @@
     });
   });
   var Fab = /*#__PURE__*/React__namespace.forwardRef(function Fab(inProps, ref) {
-    var props = useThemeProps$i({
+    var props = useThemeProps$j({
       props: inProps,
       name: 'MuiFab'
     });
@@ -31227,7 +31461,7 @@
   });
   var FilledInput = /*#__PURE__*/React__namespace.forwardRef(function FilledInput(inProps, ref) {
     var _ref5, _slots$root, _ref6, _slots$input;
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiFilledInput'
     });
@@ -31483,7 +31717,7 @@
   var formControlClasses = generateUtilityClasses$1('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
   var formControlClasses$1 = formControlClasses;
 
-  var useThemeProps$h = createUseThemeProps();
+  var useThemeProps$i = createUseThemeProps();
   var useUtilityClasses$15 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       margin = ownerState.margin,
@@ -31562,7 +31796,7 @@
    * For instance, only one input can be focused at the same time, the state shouldn't be shared.
    */
   var FormControl = /*#__PURE__*/React__namespace.forwardRef(function FormControl(inProps, ref) {
-    var props = useThemeProps$h({
+    var props = useThemeProps$i({
       props: inProps,
       name: 'MuiFormControl'
     });
@@ -31793,7 +32027,7 @@
       }
     }),
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$M({
+      return useThemeProps$Q({
         props: inProps,
         name: 'MuiStack'
       });
@@ -31854,7 +32088,7 @@
   var formControlLabelClasses = generateUtilityClasses$1('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);
   var formControlLabelClasses$1 = formControlLabelClasses;
 
-  var useThemeProps$g = createUseThemeProps();
+  var useThemeProps$h = createUseThemeProps();
   var useUtilityClasses$14 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disabled = ownerState.disabled,
@@ -31940,8 +32174,8 @@
    * Use this component if you want to display an extra label.
    */
   var FormControlLabel = /*#__PURE__*/React__namespace.forwardRef(function FormControlLabel(inProps, ref) {
-    var _ref7, _slotProps$typography;
-    var props = useThemeProps$g({
+    var _ref7;
+    var props = useThemeProps$h({
       props: inProps,
       name: 'MuiFormControlLabel'
     });
@@ -31959,10 +32193,12 @@
       props.name;
       props.onChange;
       var requiredProp = props.required,
+      _props$slots = props.slots,
+      slots = _props$slots === void 0 ? {} : _props$slots,
       _props$slotProps = props.slotProps,
       slotProps = _props$slotProps === void 0 ? {} : _props$slotProps;
       props.value;
-      var other = _objectWithoutProperties(props, ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"]);
+      var other = _objectWithoutProperties(props, ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slots", "slotProps", "value"]);
     var muiFormControl = useFormControl();
     var disabled = (_ref7 = disabledProp != null ? disabledProp : control.props.disabled) != null ? _ref7 : muiFormControl == null ? void 0 : muiFormControl.disabled;
     var required = requiredProp != null ? requiredProp : control.props.required;
@@ -31987,10 +32223,21 @@
       error: fcs.error
     });
     var classes = useUtilityClasses$14(ownerState);
-    var typographySlotProps = (_slotProps$typography = slotProps.typography) != null ? _slotProps$typography : componentsProps.typography;
+    var externalForwardedProps = {
+      slots: slots,
+      slotProps: _extends({}, componentsProps, slotProps)
+    };
+    var _useSlot = useSlot('typography', {
+        elementType: Typography$1,
+        externalForwardedProps: externalForwardedProps,
+        ownerState: ownerState
+      }),
+      _useSlot2 = _slicedToArray(_useSlot, 2),
+      TypographySlot = _useSlot2[0],
+      typographySlotProps = _useSlot2[1];
     var label = labelProp;
     if (label != null && label.type !== Typography$1 && !disableTypography) {
-      label = /*#__PURE__*/jsxRuntime_1(Typography$1, _extends({
+      label = /*#__PURE__*/jsxRuntime_1(TypographySlot, _extends({
         component: "span"
       }, typographySlotProps, {
         className: clsx(classes.label, typographySlotProps == null ? void 0 : typographySlotProps.className),
@@ -32033,6 +32280,7 @@
     /**
      * The props used for each slot inside.
      * @default {}
+     * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
      */
     componentsProps: PropTypes.shape({
       typography: PropTypes.object
@@ -32082,7 +32330,14 @@
      * @default {}
      */
     slotProps: PropTypes.shape({
-      typography: PropTypes.object
+      typography: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    }),
+    /**
+     * The components used for each slot inside.
+     * @default {}
+     */
+    slots: PropTypes.shape({
+      typography: PropTypes.elementType
     }),
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -32101,7 +32356,7 @@
   var formGroupClasses = generateUtilityClasses$1('MuiFormGroup', ['root', 'row', 'error']);
   var formGroupClasses$1 = formGroupClasses;
 
-  var useThemeProps$f = createUseThemeProps();
+  var useThemeProps$g = createUseThemeProps();
   var useUtilityClasses$13 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       row = ownerState.row,
@@ -32138,7 +32393,7 @@
    * For the `Radio`, you should be using the `RadioGroup` component instead of this one.
    */
   var FormGroup = /*#__PURE__*/React__namespace.forwardRef(function FormGroup(inProps, ref) {
-    var props = useThemeProps$f({
+    var props = useThemeProps$g({
       props: inProps,
       name: 'MuiFormGroup'
     });
@@ -32221,11 +32476,10 @@
       return [styles.root, ownerState.size && styles["size".concat(capitalize(ownerState.size))], ownerState.contained && styles.contained, ownerState.filled && styles.filled];
     }
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
+    var theme = _ref.theme;
     return _extends({
       color: (theme.vars || theme).palette.text.secondary
-    }, theme.typography.caption, _defineProperty(_defineProperty({
+    }, theme.typography.caption, _defineProperty(_defineProperty(_defineProperty({
       textAlign: 'left',
       marginTop: 3,
       marginRight: 0,
@@ -32235,15 +32489,26 @@
       color: (theme.vars || theme).palette.text.disabled
     }), "&.".concat(formHelperTextClasses$1.error), {
       color: (theme.vars || theme).palette.error.main
-    }), ownerState.size === 'small' && {
-      marginTop: 4
-    }, ownerState.contained && {
-      marginLeft: 14,
-      marginRight: 14
-    });
+    }), "variants", [{
+      props: {
+        size: 'small'
+      },
+      style: {
+        marginTop: 4
+      }
+    }, {
+      props: function props(_ref2) {
+        var ownerState = _ref2.ownerState;
+        return ownerState.contained;
+      },
+      style: {
+        marginLeft: 14,
+        marginRight: 14
+      }
+    }]));
   });
   var FormHelperText = /*#__PURE__*/React__namespace.forwardRef(function FormHelperText(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiFormHelperText'
     });
@@ -32407,7 +32672,7 @@
     });
   });
   var FormLabel = /*#__PURE__*/React__namespace.forwardRef(function FormLabel(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiFormLabel'
     });
@@ -32866,7 +33131,7 @@
     return composeClasses(slots, getGridUtilityClass, classes);
   };
   var Grid = /*#__PURE__*/React__namespace.forwardRef(function Grid(inProps, ref) {
-    var themeProps = useThemeProps$M({
+    var themeProps = useThemeProps$Q({
       props: inProps,
       name: 'MuiGrid'
     });
@@ -33084,7 +33349,7 @@
     }),
     componentName: 'MuiGrid2',
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$M({
+      return useThemeProps$Q({
         props: inProps,
         name: 'MuiGrid2'
       });
@@ -33936,7 +34201,7 @@
     };
   });
   var Icon = /*#__PURE__*/React__namespace.forwardRef(function Icon(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiIcon'
     });
@@ -34047,21 +34312,24 @@
       var ownerState = props.ownerState;
       return [styles.root, styles[ownerState.variant]];
     }
-  })(function (_ref) {
-    var ownerState = _ref.ownerState;
-    return _extends({
-      display: 'grid',
-      overflowY: 'auto',
-      listStyle: 'none',
-      padding: 0,
-      // Add iOS momentum scrolling for iOS < 13.0
-      WebkitOverflowScrolling: 'touch'
-    }, ownerState.variant === 'masonry' && {
-      display: 'block'
-    });
+  })({
+    display: 'grid',
+    overflowY: 'auto',
+    listStyle: 'none',
+    padding: 0,
+    // Add iOS momentum scrolling for iOS < 13.0
+    WebkitOverflowScrolling: 'touch',
+    variants: [{
+      props: {
+        variant: 'masonry'
+      },
+      style: {
+        display: 'block'
+      }
+    }]
   });
   var ImageList = /*#__PURE__*/React__namespace.forwardRef(function ImageList(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiImageList'
     });
@@ -34196,33 +34464,45 @@
       var ownerState = props.ownerState;
       return [_defineProperty({}, "& .".concat(imageListItemClasses$1.img), styles.img), styles.root, styles[ownerState.variant]];
     }
-  })(function (_ref2) {
-    var ownerState = _ref2.ownerState;
-    return _extends({
-      display: 'block',
-      position: 'relative'
-    }, ownerState.variant === 'standard' && {
+  })(_defineProperty(_defineProperty({
+    display: 'block',
+    position: 'relative'
+  }, "& .".concat(imageListItemClasses$1.img), {
+    objectFit: 'cover',
+    width: '100%',
+    height: '100%',
+    display: 'block'
+  }), "variants", [{
+    props: {
+      variant: 'standard'
+    },
+    style: {
       // For titlebar under list item
       display: 'flex',
       flexDirection: 'column'
-    }, ownerState.variant === 'woven' && {
+    }
+  }, {
+    props: {
+      variant: 'woven'
+    },
+    style: {
       height: '100%',
       alignSelf: 'center',
       '&:nth-of-type(even)': {
         height: '70%'
       }
-    }, _defineProperty({}, "& .".concat(imageListItemClasses$1.img), _extends({
-      objectFit: 'cover',
-      width: '100%',
-      height: '100%',
-      display: 'block'
-    }, ownerState.variant === 'standard' && {
+    }
+  }, {
+    props: {
+      variant: 'standard'
+    },
+    style: _defineProperty({}, "& .".concat(imageListItemClasses$1.img), {
       height: 'auto',
       flexGrow: 1
-    })));
-  });
+    })
+  }]));
   var ImageListItem = /*#__PURE__*/React__namespace.forwardRef(function ImageListItem(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiImageListItem'
     });
@@ -34360,25 +34640,40 @@
       return [styles.root, styles["position".concat(capitalize(ownerState.position))]];
     }
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    return _extends({
+    var theme = _ref.theme;
+    return {
       position: 'absolute',
       left: 0,
       right: 0,
       background: 'rgba(0, 0, 0, 0.5)',
       display: 'flex',
       alignItems: 'center',
-      fontFamily: theme.typography.fontFamily
-    }, ownerState.position === 'bottom' && {
-      bottom: 0
-    }, ownerState.position === 'top' && {
-      top: 0
-    }, ownerState.position === 'below' && {
-      position: 'relative',
-      background: 'transparent',
-      alignItems: 'normal'
-    });
+      fontFamily: theme.typography.fontFamily,
+      variants: [{
+        props: {
+          position: 'bottom'
+        },
+        style: {
+          bottom: 0
+        }
+      }, {
+        props: {
+          position: 'top'
+        },
+        style: {
+          top: 0
+        }
+      }, {
+        props: {
+          position: 'below'
+        },
+        style: {
+          position: 'relative',
+          background: 'transparent',
+          alignItems: 'normal'
+        }
+      }]
+    };
   });
   var ImageListItemBarTitleWrap = styled$1('div', {
     name: 'MuiImageListItemBar',
@@ -34388,21 +34683,38 @@
       return [styles.titleWrap, styles["titleWrap".concat(capitalize(ownerState.position))], ownerState.actionIcon && styles["titleWrapActionPos".concat(capitalize(ownerState.actionPosition))]];
     }
   })(function (_ref2) {
-    var theme = _ref2.theme,
-      ownerState = _ref2.ownerState;
-    return _extends({
+    var theme = _ref2.theme;
+    return {
       flexGrow: 1,
       padding: '12px 16px',
       color: (theme.vars || theme).palette.common.white,
-      overflow: 'hidden'
-    }, ownerState.position === 'below' && {
-      padding: '6px 0 12px',
-      color: 'inherit'
-    }, ownerState.actionIcon && ownerState.actionPosition === 'left' && {
-      paddingLeft: 0
-    }, ownerState.actionIcon && ownerState.actionPosition === 'right' && {
-      paddingRight: 0
-    });
+      overflow: 'hidden',
+      variants: [{
+        props: {
+          position: 'below'
+        },
+        style: {
+          padding: '6px 0 12px',
+          color: 'inherit'
+        }
+      }, {
+        props: function props(_ref3) {
+          var ownerState = _ref3.ownerState;
+          return ownerState.actionIcon && ownerState.actionPosition === 'left';
+        },
+        style: {
+          paddingLeft: 0
+        }
+      }, {
+        props: function props(_ref4) {
+          var ownerState = _ref4.ownerState;
+          return ownerState.actionIcon && ownerState.actionPosition === 'right';
+        },
+        style: {
+          paddingRight: 0
+        }
+      }]
+    };
   });
   var ImageListItemBarTitle = styled$1('div', {
     name: 'MuiImageListItemBar',
@@ -34410,8 +34722,8 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.title;
     }
-  })(function (_ref3) {
-    var theme = _ref3.theme;
+  })(function (_ref5) {
+    var theme = _ref5.theme;
     return {
       fontSize: theme.typography.pxToRem(16),
       lineHeight: '24px',
@@ -34426,8 +34738,8 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.subtitle;
     }
-  })(function (_ref4) {
-    var theme = _ref4.theme;
+  })(function (_ref6) {
+    var theme = _ref6.theme;
     return {
       fontSize: theme.typography.pxToRem(12),
       lineHeight: 1,
@@ -34443,14 +34755,18 @@
       var ownerState = props.ownerState;
       return [styles.actionIcon, styles["actionIconActionPos".concat(capitalize(ownerState.actionPosition))]];
     }
-  })(function (_ref5) {
-    var ownerState = _ref5.ownerState;
-    return _extends({}, ownerState.actionPosition === 'left' && {
-      order: -1
-    });
+  })({
+    variants: [{
+      props: {
+        actionPosition: 'left'
+      },
+      style: {
+        order: -1
+      }
+    }]
   });
   var ImageListItemBar = /*#__PURE__*/React__namespace.forwardRef(function ImageListItemBar(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiImageListItemBar'
     });
@@ -34624,7 +34940,7 @@
   })({});
   var Input = /*#__PURE__*/React__namespace.forwardRef(function Input(inProps, ref) {
     var _ref3, _slots$root, _ref4, _slots$input;
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiInput'
     });
@@ -34912,7 +35228,7 @@
     });
   });
   var InputAdornment = /*#__PURE__*/React__namespace.forwardRef(function InputAdornment(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiInputAdornment'
     });
@@ -35112,7 +35428,7 @@
     }));
   });
   var InputLabel = /*#__PURE__*/React__namespace.forwardRef(function InputLabel(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       name: 'MuiInputLabel',
       props: inProps
     });
@@ -35228,7 +35544,7 @@
   var linearProgressClasses$1 = linearProgressClasses;
 
   var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5, _templateObject6;
-  var useThemeProps$e = createUseThemeProps();
+  var useThemeProps$f = createUseThemeProps();
   var TRANSITION_DURATION = 4; // seconds
   var indeterminate1Keyframe = keyframes(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  0% {\n    left: -35%;\n    right: 100%;\n  }\n\n  60% {\n    left: 100%;\n    right: -90%;\n  }\n\n  100% {\n    left: 100%;\n    right: -90%;\n  }\n"])));
 
@@ -35537,7 +35853,7 @@
    * attribute to `true` on that region until it has finished loading.
    */
   var LinearProgress = /*#__PURE__*/React__namespace.forwardRef(function LinearProgress(inProps, ref) {
-    var props = useThemeProps$e({
+    var props = useThemeProps$f({
       props: inProps,
       name: 'MuiLinearProgress'
     });
@@ -35744,7 +36060,7 @@
     }));
   });
   var Link = /*#__PURE__*/React__namespace.forwardRef(function Link(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiLink'
     });
@@ -35915,7 +36231,7 @@
     });
   });
   var List = /*#__PURE__*/React__namespace.forwardRef(function List(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiList'
     });
@@ -36035,9 +36351,8 @@
     slot: 'Root',
     overridesResolver: overridesResolver$3
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    return _extends(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    var theme = _ref.theme;
+    return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
       display: 'flex',
       flexGrow: 1,
       justifyContent: 'flex-start',
@@ -36074,21 +36389,44 @@
       backgroundColor: (theme.vars || theme).palette.action.focus
     }), "&.".concat(listItemButtonClasses$1.disabled), {
       opacity: (theme.vars || theme).palette.action.disabledOpacity
-    }), ownerState.divider && {
-      borderBottom: "1px solid ".concat((theme.vars || theme).palette.divider),
-      backgroundClip: 'padding-box'
-    }, ownerState.alignItems === 'flex-start' && {
-      alignItems: 'flex-start'
-    }, !ownerState.disableGutters && {
-      paddingLeft: 16,
-      paddingRight: 16
-    }, ownerState.dense && {
-      paddingTop: 4,
-      paddingBottom: 4
-    });
+    }), "variants", [{
+      props: function props(_ref2) {
+        var ownerState = _ref2.ownerState;
+        return ownerState.divider;
+      },
+      style: {
+        borderBottom: "1px solid ".concat((theme.vars || theme).palette.divider),
+        backgroundClip: 'padding-box'
+      }
+    }, {
+      props: {
+        alignItems: 'flex-start'
+      },
+      style: {
+        alignItems: 'flex-start'
+      }
+    }, {
+      props: function props(_ref3) {
+        var ownerState = _ref3.ownerState;
+        return !ownerState.disableGutters;
+      },
+      style: {
+        paddingLeft: 16,
+        paddingRight: 16
+      }
+    }, {
+      props: function props(_ref4) {
+        var ownerState = _ref4.ownerState;
+        return ownerState.dense;
+      },
+      style: {
+        paddingTop: 4,
+        paddingBottom: 4
+      }
+    }]);
   });
   var ListItemButton = /*#__PURE__*/React__namespace.forwardRef(function ListItemButton(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiListItemButton'
     });
@@ -36255,23 +36593,27 @@
       var ownerState = props.ownerState;
       return [styles.root, ownerState.disableGutters && styles.disableGutters];
     }
-  })(function (_ref) {
-    var ownerState = _ref.ownerState;
-    return _extends({
-      position: 'absolute',
-      right: 16,
-      top: '50%',
-      transform: 'translateY(-50%)'
-    }, ownerState.disableGutters && {
-      right: 0
-    });
+  })({
+    position: 'absolute',
+    right: 16,
+    top: '50%',
+    transform: 'translateY(-50%)',
+    variants: [{
+      props: function props(_ref) {
+        var ownerState = _ref.ownerState;
+        return ownerState.disableGutters;
+      },
+      style: {
+        right: 0
+      }
+    }]
   });
 
   /**
    * Must be used as the last child of ListItem to function properly.
    */
   var ListItemSecondaryAction = /*#__PURE__*/React__namespace.forwardRef(function ListItemSecondaryAction(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiListItemSecondaryAction'
     });
@@ -36339,9 +36681,8 @@
     slot: 'Root',
     overridesResolver: overridesResolver$2
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    return _extends({
+    var theme = _ref.theme;
+    return _defineProperty(_defineProperty(_defineProperty(_defineProperty({
       display: 'flex',
       justifyContent: 'flex-start',
       alignItems: 'center',
@@ -36350,22 +36691,7 @@
       width: '100%',
       boxSizing: 'border-box',
       textAlign: 'left'
-    }, !ownerState.disablePadding && _extends({
-      paddingTop: 8,
-      paddingBottom: 8
-    }, ownerState.dense && {
-      paddingTop: 4,
-      paddingBottom: 4
-    }, !ownerState.disableGutters && {
-      paddingLeft: 16,
-      paddingRight: 16
-    }, !!ownerState.secondaryAction && {
-      // Add some space to avoid collision as `ListItemSecondaryAction`
-      // is absolutely positioned.
-      paddingRight: 48
-    }), !!ownerState.secondaryAction && _defineProperty({}, "& > .".concat(listItemButtonClasses$1.root), {
-      paddingRight: 48
-    }), _defineProperty(_defineProperty(_defineProperty({}, "&.".concat(listItemClasses$1.focusVisible), {
+    }, "&.".concat(listItemClasses$1.focusVisible), {
       backgroundColor: (theme.vars || theme).palette.action.focus
     }), "&.".concat(listItemClasses$1.selected), _defineProperty({
       backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
@@ -36373,34 +36699,102 @@
       backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
     })), "&.".concat(listItemClasses$1.disabled), {
       opacity: (theme.vars || theme).palette.action.disabledOpacity
-    }), ownerState.alignItems === 'flex-start' && {
-      alignItems: 'flex-start'
-    }, ownerState.divider && {
-      borderBottom: "1px solid ".concat((theme.vars || theme).palette.divider),
-      backgroundClip: 'padding-box'
-    }, ownerState.button && _defineProperty({
-      transition: theme.transitions.create('background-color', {
-        duration: theme.transitions.duration.shortest
-      }),
-      '&:hover': {
-        textDecoration: 'none',
-        backgroundColor: (theme.vars || theme).palette.action.hover,
+    }), "variants", [{
+      props: function props(_ref2) {
+        var ownerState = _ref2.ownerState;
+        return !ownerState.disablePadding;
+      },
+      style: {
+        paddingTop: 8,
+        paddingBottom: 8
+      }
+    }, {
+      props: function props(_ref3) {
+        var ownerState = _ref3.ownerState;
+        return !ownerState.disablePadding && ownerState.dense;
+      },
+      style: {
+        paddingTop: 4,
+        paddingBottom: 4
+      }
+    }, {
+      props: function props(_ref4) {
+        var ownerState = _ref4.ownerState;
+        return !ownerState.disablePadding && !ownerState.disableGutters;
+      },
+      style: {
+        paddingLeft: 16,
+        paddingRight: 16
+      }
+    }, {
+      props: function props(_ref5) {
+        var ownerState = _ref5.ownerState;
+        return !ownerState.disablePadding && !!ownerState.secondaryAction;
+      },
+      style: {
+        // Add some space to avoid collision as `ListItemSecondaryAction`
+        // is absolutely positioned.
+        paddingRight: 48
+      }
+    }, {
+      props: function props(_ref6) {
+        var ownerState = _ref6.ownerState;
+        return !!ownerState.secondaryAction;
+      },
+      style: _defineProperty({}, "& > .".concat(listItemButtonClasses$1.root), {
+        paddingRight: 48
+      })
+    }, {
+      props: {
+        alignItems: 'flex-start'
+      },
+      style: {
+        alignItems: 'flex-start'
+      }
+    }, {
+      props: function props(_ref7) {
+        var ownerState = _ref7.ownerState;
+        return ownerState.divider;
+      },
+      style: {
+        borderBottom: "1px solid ".concat((theme.vars || theme).palette.divider),
+        backgroundClip: 'padding-box'
+      }
+    }, {
+      props: function props(_ref8) {
+        var ownerState = _ref8.ownerState;
+        return ownerState.button;
+      },
+      style: _defineProperty({
+        transition: theme.transitions.create('background-color', {
+          duration: theme.transitions.duration.shortest
+        }),
+        '&:hover': {
+          textDecoration: 'none',
+          backgroundColor: (theme.vars || theme).palette.action.hover,
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: 'transparent'
+          }
+        }
+      }, "&.".concat(listItemClasses$1.selected, ":hover"), {
+        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
-          backgroundColor: 'transparent'
+          backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
         }
+      })
+    }, {
+      props: function props(_ref9) {
+        var ownerState = _ref9.ownerState;
+        return ownerState.hasSecondaryAction;
+      },
+      style: {
+        // Add some space to avoid collision as `ListItemSecondaryAction`
+        // is absolutely positioned.
+        paddingRight: 48
       }
-    }, "&.".concat(listItemClasses$1.selected, ":hover"), {
-      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
-      }
-    }), ownerState.hasSecondaryAction && {
-      // Add some space to avoid collision as `ListItemSecondaryAction`
-      // is absolutely positioned.
-      paddingRight: 48
-    });
+    }]);
   });
   var ListItemContainer = styled$1('li', {
     name: 'MuiListItem',
@@ -36416,7 +36810,7 @@
    * Uses an additional container component if `ListItemSecondaryAction` is the last child.
    */
   var ListItem = /*#__PURE__*/React__namespace.forwardRef(function ListItem(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiListItem'
     });
@@ -36736,21 +37130,24 @@
       var ownerState = props.ownerState;
       return [styles.root, ownerState.alignItems === 'flex-start' && styles.alignItemsFlexStart];
     }
-  })(function (_ref) {
-    var ownerState = _ref.ownerState;
-    return _extends({
-      minWidth: 56,
-      flexShrink: 0
-    }, ownerState.alignItems === 'flex-start' && {
-      marginTop: 8
-    });
+  })({
+    minWidth: 56,
+    flexShrink: 0,
+    variants: [{
+      props: {
+        alignItems: 'flex-start'
+      },
+      style: {
+        marginTop: 8
+      }
+    }]
   });
 
   /**
    * A simple wrapper to apply `List` styles to an `Avatar`.
    */
   var ListItemAvatar = /*#__PURE__*/React__namespace.forwardRef(function ListItemAvatar(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiListItemAvatar'
     });
@@ -36829,7 +37226,7 @@
    * A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.
    */
   var ListItemIcon = /*#__PURE__*/React__namespace.forwardRef(function ListItemIcon(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiListItemIcon'
     });
@@ -36897,22 +37294,32 @@
       var ownerState = props.ownerState;
       return [_defineProperty({}, "& .".concat(listItemTextClasses$1.primary), styles.primary), _defineProperty({}, "& .".concat(listItemTextClasses$1.secondary), styles.secondary), styles.root, ownerState.inset && styles.inset, ownerState.primary && ownerState.secondary && styles.multiline, ownerState.dense && styles.dense];
     }
-  })(function (_ref3) {
-    var ownerState = _ref3.ownerState;
-    return _extends({
-      flex: '1 1 auto',
-      minWidth: 0,
-      marginTop: 4,
-      marginBottom: 4
-    }, ownerState.primary && ownerState.secondary && {
-      marginTop: 6,
-      marginBottom: 6
-    }, ownerState.inset && {
-      paddingLeft: 56
-    });
+  })({
+    flex: '1 1 auto',
+    minWidth: 0,
+    marginTop: 4,
+    marginBottom: 4,
+    variants: [{
+      props: function props(_ref3) {
+        var ownerState = _ref3.ownerState;
+        return ownerState.primary && ownerState.secondary;
+      },
+      style: {
+        marginTop: 6,
+        marginBottom: 6
+      }
+    }, {
+      props: function props(_ref4) {
+        var ownerState = _ref4.ownerState;
+        return ownerState.inset;
+      },
+      style: {
+        paddingLeft: 56
+      }
+    }]
   });
   var ListItemText = /*#__PURE__*/React__namespace.forwardRef(function ListItemText(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiListItemText'
     });
@@ -37302,7 +37709,7 @@
   var popoverClasses = generateUtilityClasses$1('MuiPopover', ['root', 'paper']);
   var popoverClasses$1 = popoverClasses;
 
-  var useThemeProps$d = createUseThemeProps();
+  var useThemeProps$e = createUseThemeProps();
   function getOffsetTop(rect, vertical) {
     var offset = 0;
     if (typeof vertical === 'number') {
@@ -37369,7 +37776,7 @@
   });
   var Popover = /*#__PURE__*/React__namespace.forwardRef(function Popover(inProps, ref) {
     var _slotProps$paper, _slots$root, _slots$paper;
-    var props = useThemeProps$d({
+    var props = useThemeProps$e({
       props: inProps,
       name: 'MuiPopover'
     });
@@ -37886,7 +38293,7 @@
   });
   var Menu = /*#__PURE__*/React__namespace.forwardRef(function Menu(inProps, ref) {
     var _slots$paper, _slotProps$paper;
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiMenu'
     });
@@ -38230,7 +38637,7 @@
     })));
   });
   var MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiMenuItem'
     });
@@ -38376,7 +38783,7 @@
   var mobileStepperClasses = generateUtilityClasses$1('MuiMobileStepper', ['root', 'positionBottom', 'positionTop', 'positionStatic', 'dots', 'dot', 'dotActive', 'progress']);
   var mobileStepperClasses$1 = mobileStepperClasses;
 
-  var useThemeProps$c = createUseThemeProps();
+  var useThemeProps$d = createUseThemeProps();
   var useUtilityClasses$H = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       position = ownerState.position;
@@ -38505,7 +38912,7 @@
     }]
   });
   var MobileStepper = /*#__PURE__*/React__namespace.forwardRef(function MobileStepper(inProps, ref) {
-    var props = useThemeProps$c({
+    var props = useThemeProps$d({
       props: inProps,
       name: 'MuiMobileStepper'
     });
@@ -38822,7 +39229,7 @@
    * An alternative to `<Select native />` with a much smaller bundle size footprint.
    */
   var NativeSelect = /*#__PURE__*/React__namespace.forwardRef(function NativeSelect(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       name: 'MuiNativeSelect',
       props: inProps
     });
@@ -39147,7 +39554,7 @@
   });
   var OutlinedInput = /*#__PURE__*/React__namespace.forwardRef(function OutlinedInput(inProps, ref) {
     var _ref5, _slots$root, _ref6, _slots$input, _React$Fragment;
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiOutlinedInput'
     });
@@ -39526,7 +39933,7 @@
     d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
   }), 'NavigateNext');
 
-  var useThemeProps$b = createUseThemeProps();
+  var useThemeProps$c = createUseThemeProps();
   var overridesResolver = function overridesResolver(props, styles) {
     var ownerState = props.ownerState;
     return [styles.root, styles[ownerState.variant], styles["size".concat(capitalize(ownerState.size))], ownerState.variant === 'text' && styles["text".concat(capitalize(ownerState.color))], ownerState.variant === 'outlined' && styles["outlined".concat(capitalize(ownerState.color))], ownerState.shape === 'rounded' && styles.rounded, ownerState.type === 'page' && styles.page, (ownerState.type === 'start-ellipsis' || ownerState.type === 'end-ellipsis') && styles.ellipsis, (ownerState.type === 'previous' || ownerState.type === 'next') && styles.previousNext, (ownerState.type === 'first' || ownerState.type === 'last') && styles.firstLast];
@@ -39767,7 +40174,8 @@
     };
   });
   var PaginationItem = /*#__PURE__*/React__namespace.forwardRef(function PaginationItem(inProps, ref) {
-    var props = useThemeProps$b({
+    var _slots$previous, _slots$next, _slots$first, _slots$last;
+    var props = useThemeProps$c({
       props: inProps,
       name: 'MuiPaginationItem'
     });
@@ -39788,11 +40196,13 @@
       size = _props$size === void 0 ? 'medium' : _props$size,
       _props$slots = props.slots,
       slots = _props$slots === void 0 ? {} : _props$slots,
+      _props$slotProps = props.slotProps,
+      slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
       _props$type = props.type,
       type = _props$type === void 0 ? 'page' : _props$type,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'text' : _props$variant,
-      other = _objectWithoutProperties(props, ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "type", "variant"]);
+      other = _objectWithoutProperties(props, ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "slotProps", "type", "variant"]);
     var ownerState = _extends({}, props, {
       color: color,
       disabled: disabled,
@@ -39804,18 +40214,65 @@
     });
     var isRtl = useRtl();
     var classes = useUtilityClasses$D(ownerState);
-    var normalizedIcons = isRtl ? {
-      previous: slots.next || components.next || NavigateNextIcon,
-      next: slots.previous || components.previous || NavigateBeforeIcon,
-      last: slots.first || components.first || FirstPageIconDefault,
-      first: slots.last || components.last || LastPageIconDefault
-    } : {
-      previous: slots.previous || components.previous || NavigateBeforeIcon,
-      next: slots.next || components.next || NavigateNextIcon,
-      first: slots.first || components.first || FirstPageIconDefault,
-      last: slots.last || components.last || LastPageIconDefault
+    var externalForwardedProps = {
+      slots: {
+        previous: (_slots$previous = slots.previous) != null ? _slots$previous : components.previous,
+        next: (_slots$next = slots.next) != null ? _slots$next : components.next,
+        first: (_slots$first = slots.first) != null ? _slots$first : components.first,
+        last: (_slots$last = slots.last) != null ? _slots$last : components.last
+      },
+      slotProps: slotProps
     };
-    var Icon = normalizedIcons[type];
+    var _useSlot = useSlot('previous', {
+        elementType: NavigateBeforeIcon,
+        externalForwardedProps: externalForwardedProps,
+        ownerState: ownerState
+      }),
+      _useSlot2 = _slicedToArray(_useSlot, 2),
+      PreviousSlot = _useSlot2[0],
+      previousSlotProps = _useSlot2[1];
+    var _useSlot3 = useSlot('next', {
+        elementType: NavigateNextIcon,
+        externalForwardedProps: externalForwardedProps,
+        ownerState: ownerState
+      }),
+      _useSlot4 = _slicedToArray(_useSlot3, 2),
+      NextSlot = _useSlot4[0],
+      nextSlotProps = _useSlot4[1];
+    var _useSlot5 = useSlot('first', {
+        elementType: FirstPageIconDefault,
+        externalForwardedProps: externalForwardedProps,
+        ownerState: ownerState
+      }),
+      _useSlot6 = _slicedToArray(_useSlot5, 2),
+      FirstSlot = _useSlot6[0],
+      firstSlotProps = _useSlot6[1];
+    var _useSlot7 = useSlot('last', {
+        elementType: LastPageIconDefault,
+        externalForwardedProps: externalForwardedProps,
+        ownerState: ownerState
+      }),
+      _useSlot8 = _slicedToArray(_useSlot7, 2),
+      LastSlot = _useSlot8[0],
+      lastSlotProps = _useSlot8[1];
+    var rtlAwareType = isRtl ? {
+      previous: 'next',
+      next: 'previous',
+      first: 'last',
+      last: 'first'
+    }[type] : type;
+    var IconSlot = {
+      previous: PreviousSlot,
+      next: NextSlot,
+      first: FirstSlot,
+      last: LastSlot
+    }[rtlAwareType];
+    var iconSlotProps = {
+      previous: previousSlotProps,
+      next: nextSlotProps,
+      first: firstSlotProps,
+      last: lastSlotProps
+    }[rtlAwareType];
     return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/jsxRuntime_1(PaginationItemEllipsis, {
       ref: ref,
       ownerState: ownerState,
@@ -39828,11 +40285,10 @@
       disabled: disabled,
       className: clsx(classes.root, className)
     }, other, {
-      children: [type === 'page' && page, Icon ? /*#__PURE__*/jsxRuntime_1(PaginationItemPageIcon, {
-        as: Icon,
-        ownerState: ownerState,
-        className: classes.icon
-      }) : null]
+      children: [type === 'page' && page, IconSlot ? /*#__PURE__*/jsxRuntime_1(PaginationItemPageIcon, _extends({}, iconSlotProps, {
+        className: classes.icon,
+        as: IconSlot
+      })) : null]
     }));
   });
   PaginationItem.propTypes /* remove-proptypes */ = {
@@ -39871,6 +40327,7 @@
      * It's recommended to use the `slots` prop instead.
      *
      * @default {}
+     * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
      */
     components: PropTypes.shape({
       first: PropTypes.elementType,
@@ -39902,11 +40359,18 @@
      * @default 'medium'
      */
     size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
+    /**
+     * The props used for each slot inside.
+     * @default {}
+     */
+    slotProps: PropTypes.shape({
+      first: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      last: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      next: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      previous: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    }),
     /**
      * The components used for each slot inside.
-     *
-     * This prop is an alias for the `components` prop, which will be deprecated in the future.
-     *
      * @default {}
      */
     slots: PropTypes.shape({
@@ -39970,7 +40434,7 @@
     return "Go to ".concat(type, " page");
   }
   var Pagination = /*#__PURE__*/React__namespace.forwardRef(function Pagination(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiPagination'
     });
@@ -40193,23 +40657,28 @@
     transform: 'scale(1)'
   });
   var RadioButtonIconDot = styled$1(RadioButtonCheckedIcon)(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    return _extends({
+    var theme = _ref.theme;
+    return {
       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
+          })
+        }
+      }]
+    };
   });
 
   /**
@@ -40238,7 +40707,7 @@
       })]
     });
   }
-  RadioButtonIcon.propTypes = {
+  RadioButtonIcon.propTypes /* remove-proptypes */ = {
     /**
      * If `true`, the component is checked.
      */
@@ -40273,6 +40742,7 @@
   var radioClasses = generateUtilityClasses$1('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
   var radioClasses$1 = radioClasses;
 
+  var useThemeProps$b = createUseThemeProps();
   var useUtilityClasses$B = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       color = ownerState.color,
@@ -40293,23 +40763,68 @@
       return [styles.root, ownerState.size !== 'medium' && styles["size".concat(capitalize(ownerState.size))], styles["color".concat(capitalize(ownerState.color))]];
     }
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    return _extends({
+    var theme = _ref.theme;
+    return _defineProperty(_defineProperty({
       color: (theme.vars || theme).palette.text.secondary
-    }, !ownerState.disableRipple && {
-      '&:hover': {
-        backgroundColor: theme.vars ? "rgba(".concat(ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+    }, "&.".concat(radioClasses$1.disabled), {
+      color: (theme.vars || theme).palette.action.disabled
+    }), "variants", [{
+      props: {
+        color: 'default',
+        disableRipple: false
+      },
+      style: {
+        '&:hover': {
+          backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.activeChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
+        }
+      }
+    }].concat(_toConsumableArray(Object.entries(theme.palette).filter(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        palette = _ref3[1];
+      return palette.main;
+    }).map(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 1),
+        color = _ref5[0];
+      return {
+        props: {
+          color: color,
+          disableRipple: false
+        },
+        style: {
+          '&:hover': {
+            backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+          }
+        }
+      };
+    })), _toConsumableArray(Object.entries(theme.palette).filter(function (_ref6) {
+      var _ref7 = _slicedToArray(_ref6, 2),
+        palette = _ref7[1];
+      return palette.main;
+    }).map(function (_ref8) {
+      var _ref9 = _slicedToArray(_ref8, 1),
+        color = _ref9[0];
+      return {
+        props: {
+          color: color
+        },
+        style: _defineProperty({}, "&.".concat(radioClasses$1.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
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
+        '&:hover': {
+          '@media (hover: none)': {
+            backgroundColor: 'transparent'
+          }
         }
       }
-    }, ownerState.color !== 'default' && _defineProperty({}, "&.".concat(radioClasses$1.checked), {
-      color: (theme.vars || theme).palette[ownerState.color].main
-    }), _defineProperty({}, "&.".concat(radioClasses$1.disabled), {
-      color: (theme.vars || theme).palette.action.disabled
-    }));
+    }]));
   });
   function areEqualValues$1(a, b) {
     if (_typeof(b) === 'object' && b !== null) {
@@ -40325,7 +40840,7 @@
   var defaultIcon$1 = /*#__PURE__*/jsxRuntime_1(RadioButtonIcon, {});
   var Radio = /*#__PURE__*/React__namespace.forwardRef(function Radio(inProps, ref) {
     var _defaultIcon$props$fo, _defaultCheckedIcon$p;
-    var props = useThemeProps$M({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiRadio'
     });
@@ -40629,9 +41144,8 @@
       return [_defineProperty({}, "& .".concat(ratingClasses$1.visuallyHidden), styles.visuallyHidden), styles.root, styles["size".concat(capitalize(ownerState.size))], ownerState.readOnly && styles.readOnly];
     }
   })(function (_ref2) {
-    var theme = _ref2.theme,
-      ownerState = _ref2.ownerState;
-    return _extends(_defineProperty(_defineProperty(_defineProperty({
+    var theme = _ref2.theme;
+    return _defineProperty(_defineProperty(_defineProperty(_defineProperty({
       display: 'inline-flex',
       // Required to position the pristine input absolutely
       position: 'relative',
@@ -40646,32 +41160,53 @@
       pointerEvents: 'none'
     }), "&.".concat(ratingClasses$1.focusVisible, " .").concat(ratingClasses$1.iconActive), {
       outline: '1px solid #999'
-    }), "& .".concat(ratingClasses$1.visuallyHidden), visuallyHidden$1), ownerState.size === 'small' && {
-      fontSize: theme.typography.pxToRem(18)
-    }, ownerState.size === 'large' && {
-      fontSize: theme.typography.pxToRem(30)
-    }, ownerState.readOnly && {
-      pointerEvents: 'none'
-    });
+    }), "& .".concat(ratingClasses$1.visuallyHidden), visuallyHidden$1), "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: function props(_ref3) {
+        var ownerState = _ref3.ownerState;
+        return ownerState.readOnly;
+      },
+      style: {
+        pointerEvents: 'none'
+      }
+    }]);
   });
   var RatingLabel = styled$1('label', {
     name: 'MuiRating',
     slot: 'Label',
-    overridesResolver: function overridesResolver(_ref3, styles) {
-      var ownerState = _ref3.ownerState;
+    overridesResolver: function overridesResolver(_ref5, styles) {
+      var ownerState = _ref5.ownerState;
       return [styles.label, ownerState.emptyValueFocused && styles.labelEmptyValueActive];
     }
-  })(function (_ref4) {
-    var ownerState = _ref4.ownerState;
-    return _extends({
-      cursor: 'inherit'
-    }, ownerState.emptyValueFocused && {
-      top: 0,
-      bottom: 0,
-      position: 'absolute',
-      outline: '1px solid #999',
-      width: '100%'
-    });
+  })({
+    cursor: 'inherit',
+    variants: [{
+      props: function props(_ref6) {
+        var ownerState = _ref6.ownerState;
+        return ownerState.emptyValueFocused;
+      },
+      style: {
+        top: 0,
+        bottom: 0,
+        position: 'absolute',
+        outline: '1px solid #999',
+        width: '100%'
+      }
+    }]
   });
   var RatingIcon = styled$1('span', {
     name: 'MuiRating',
@@ -40680,10 +41215,9 @@
       var ownerState = props.ownerState;
       return [styles.icon, ownerState.iconEmpty && styles.iconEmpty, ownerState.iconFilled && styles.iconFilled, ownerState.iconHover && styles.iconHover, ownerState.iconFocus && styles.iconFocus, ownerState.iconActive && styles.iconActive];
     }
-  })(function (_ref5) {
-    var theme = _ref5.theme,
-      ownerState = _ref5.ownerState;
-    return _extends({
+  })(function (_ref7) {
+    var theme = _ref7.theme;
+    return {
       // Fit wrapper to actual icon size.
       display: 'flex',
       transition: theme.transitions.create('transform', {
@@ -40691,12 +41225,25 @@
       }),
       // 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: function props(_ref8) {
+          var ownerState = _ref8.ownerState;
+          return ownerState.iconActive;
+        },
+        style: {
+          transform: 'scale(1.2)'
+        }
+      }, {
+        props: function props(_ref9) {
+          var ownerState = _ref9.ownerState;
+          return ownerState.iconEmpty;
+        },
+        style: {
+          color: (theme.vars || theme).palette.action.disabled
+        }
+      }]
+    };
   });
   var RatingDecimal = styled$1('span', {
     name: 'MuiRating',
@@ -40708,13 +41255,17 @@
       var iconActive = props.iconActive;
       return [styles.decimal, iconActive && styles.iconActive];
     }
-  })(function (_ref6) {
-    var iconActive = _ref6.iconActive;
-    return _extends({
-      position: 'relative'
-    }, iconActive && {
-      transform: 'scale(1.2)'
-    });
+  })({
+    position: 'relative',
+    variants: [{
+      props: function props(_ref10) {
+        var iconActive = _ref10.iconActive;
+        return iconActive;
+      },
+      style: {
+        transform: 'scale(1.2)'
+      }
+    }]
   });
   function IconContainer(props) {
     props.value;
@@ -40828,7 +41379,7 @@
     return "".concat(value, " Star").concat(value !== 1 ? 's' : '');
   }
   var Rating = /*#__PURE__*/React__namespace.forwardRef(function Rating(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       name: 'MuiRating',
       props: inProps
     });
@@ -41269,7 +41820,7 @@
     }, colorSchemeStyles);
   });
   var ScopedCssBaseline = /*#__PURE__*/React__namespace.forwardRef(function ScopedCssBaseline(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiScopedCssBaseline'
     });
@@ -41991,7 +42542,7 @@
   var StyledOutlinedInput = styled$1(OutlinedInput$1, styledRootConfig)('');
   var StyledFilledInput = styled$1(FilledInput$1, styledRootConfig)('');
   var Select = /*#__PURE__*/React__namespace.forwardRef(function Select(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       name: 'MuiSelect',
       props: inProps
     });
@@ -42314,7 +42865,7 @@
     return ownerState.animation === 'wave' && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n\n      /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */\n      -webkit-mask-image: -webkit-radial-gradient(white, black);\n\n      &::after {\n        animation: ", " 2s linear 0.5s infinite;\n        background: linear-gradient(\n          90deg,\n          transparent,\n          ", ",\n          transparent\n        );\n        content: '';\n        position: absolute;\n        transform: translateX(-100%); /* Avoid flash during server-side hydration */\n        bottom: 0;\n        left: 0;\n        right: 0;\n        top: 0;\n      }\n    "])), waveKeyframe, (theme.vars || theme).palette.action.hover);
   });
   var Skeleton = /*#__PURE__*/React__namespace.forwardRef(function Skeleton(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiSkeleton'
     });
@@ -43560,7 +44111,7 @@
     marginRight: -8
   });
   var SnackbarContent = /*#__PURE__*/React__namespace.forwardRef(function SnackbarContent(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiSnackbarContent'
     });
@@ -43682,7 +44233,7 @@
     })));
   });
   var Snackbar = /*#__PURE__*/React__namespace.forwardRef(function Snackbar(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiSnackbar'
     });
@@ -44217,7 +44768,7 @@
     });
   });
   var SpeedDial = /*#__PURE__*/React__namespace.forwardRef(function SpeedDial(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiSpeedDial'
     });
@@ -44779,7 +45330,7 @@
   // TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
   var Tooltip = /*#__PURE__*/React__namespace.forwardRef(function Tooltip(inProps, ref) {
     var _ref5, _slots$popper, _ref6, _ref7, _slots$transition, _ref8, _slots$tooltip, _ref9, _slots$arrow, _slotProps$popper, _ref10, _slotProps$popper2, _slotProps$transition, _slotProps$tooltip, _ref11, _slotProps$tooltip2, _slotProps$arrow, _ref12, _slotProps$arrow2;
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTooltip'
     });
@@ -45451,7 +46002,7 @@
     });
   });
   var SpeedDialAction = /*#__PURE__*/React__namespace.forwardRef(function SpeedDialAction(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiSpeedDialAction'
     });
@@ -45645,7 +46196,7 @@
     }));
   });
   var SpeedDialIcon = /*#__PURE__*/React__namespace.forwardRef(function SpeedDialIcon(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiSpeedDialIcon'
     });
@@ -47047,7 +47598,7 @@
   }
   var iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
   var SwipeableDrawer = /*#__PURE__*/React__namespace.forwardRef(function SwipeableDrawer(inProps, ref) {
-    var props = useThemeProps$N({
+    var props = useThemeProps$R({
       name: 'MuiSwipeableDrawer',
       props: inProps
     });
@@ -47963,7 +48514,7 @@
     });
   });
   var Tab = /*#__PURE__*/React__namespace.forwardRef(function Tab(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTab'
     });
@@ -48148,9 +48699,8 @@
       return [styles.root, ownerState.stickyHeader && styles.stickyHeader];
     }
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    return _extends({
+    var theme = _ref.theme;
+    return {
       display: 'table',
       width: '100%',
       borderCollapse: 'collapse',
@@ -48160,14 +48710,21 @@
         color: (theme.vars || theme).palette.text.secondary,
         textAlign: 'left',
         captionSide: 'bottom'
-      })
-    }, ownerState.stickyHeader && {
-      borderCollapse: 'separate'
-    });
+      }),
+      variants: [{
+        props: function props(_ref2) {
+          var ownerState = _ref2.ownerState;
+          return ownerState.stickyHeader;
+        },
+        style: {
+          borderCollapse: 'separate'
+        }
+      }]
+    };
   });
   var defaultComponent$4 = 'table';
   var Table = /*#__PURE__*/React__namespace.forwardRef(function Table(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTable'
     });
@@ -48286,7 +48843,7 @@
   };
   var defaultComponent$3 = 'tbody';
   var TableBody = /*#__PURE__*/React__namespace.forwardRef(function TableBody(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTableBody'
     });
@@ -48364,8 +48921,7 @@
       return [styles.root, styles[ownerState.variant], styles["size".concat(capitalize(ownerState.size))], ownerState.padding !== 'normal' && styles["padding".concat(capitalize(ownerState.padding))], ownerState.align !== 'inherit' && styles["align".concat(capitalize(ownerState.align))], ownerState.stickyHeader && styles.stickyHeader];
     }
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
+    var theme = _ref.theme;
     return _extends({}, theme.typography.body2, {
       display: 'table-cell',
       verticalAlign: 'inherit',
@@ -48373,46 +48929,103 @@
       // Removes the alpha (sets it to 1), and lightens or darkens the theme color.
       borderBottom: theme.vars ? "1px solid ".concat(theme.vars.palette.TableCell.border) : "1px solid\n    ".concat(theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(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' && _defineProperty({
-      padding: '6px 16px'
-    }, "&.".concat(tableCellClasses$1.paddingCheckbox), {
-      width: 24,
-      // prevent the checkbox column from growing
-      padding: '0 12px 0 16px',
-      '& > *': {
-        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"]
+      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: _defineProperty({
+          padding: '6px 16px'
+        }, "&.".concat(tableCellClasses$1.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
+        }
+      }, {
+        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: function props(_ref2) {
+          var ownerState = _ref2.ownerState;
+          return ownerState.stickyHeader;
+        },
+        style: {
+          position: 'sticky',
+          top: 0,
+          zIndex: 2,
+          backgroundColor: (theme.vars || theme).palette.background["default"]
+        }
+      }]
     });
   });
 
@@ -48421,7 +49034,7 @@
    * or otherwise a `<td>` element.
    */
   var TableCell = /*#__PURE__*/React__namespace.forwardRef(function TableCell(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTableCell'
     });
@@ -48560,7 +49173,7 @@
     overflowX: 'auto'
   });
   var TableContainer = /*#__PURE__*/React__namespace.forwardRef(function TableContainer(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTableContainer'
     });
@@ -48635,7 +49248,7 @@
   };
   var defaultComponent$2 = 'tfoot';
   var TableFooter = /*#__PURE__*/React__namespace.forwardRef(function TableFooter(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTableFooter'
     });
@@ -48714,7 +49327,7 @@
   };
   var defaultComponent$1 = 'thead';
   var TableHead = /*#__PURE__*/React__namespace.forwardRef(function TableHead(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTableHead'
     });
@@ -48789,28 +49402,45 @@
       return [styles.root, !ownerState.disableGutters && styles.gutters, styles[ownerState.variant]];
     }
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    return _extends({
+    var theme = _ref.theme;
+    return {
       position: 'relative',
       display: 'flex',
-      alignItems: 'center'
-    }, !ownerState.disableGutters && _defineProperty({
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(2)
-    }, theme.breakpoints.up('sm'), {
-      paddingLeft: theme.spacing(3),
-      paddingRight: theme.spacing(3)
-    }), ownerState.variant === 'dense' && {
-      minHeight: 48
-    });
+      alignItems: 'center',
+      variants: [{
+        props: function props(_ref2) {
+          var ownerState = _ref2.ownerState;
+          return !ownerState.disableGutters;
+        },
+        style: _defineProperty({
+          paddingLeft: theme.spacing(2),
+          paddingRight: theme.spacing(2)
+        }, theme.breakpoints.up('sm'), {
+          paddingLeft: theme.spacing(3),
+          paddingRight: theme.spacing(3)
+        })
+      }, {
+        props: {
+          variant: 'dense'
+        },
+        style: {
+          minHeight: 48
+        }
+      }]
+    };
   }, function (_ref3) {
-    var theme = _ref3.theme,
-      ownerState = _ref3.ownerState;
-    return ownerState.variant === 'regular' && theme.mixins.toolbar;
+    var theme = _ref3.theme;
+    return {
+      variants: [{
+        props: {
+          variant: 'regular'
+        },
+        style: theme.mixins.toolbar
+      }]
+    };
   });
   var Toolbar = /*#__PURE__*/React__namespace.forwardRef(function Toolbar(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiToolbar'
     });
@@ -49184,7 +49814,7 @@
    */
   var TablePagination = /*#__PURE__*/React__namespace.forwardRef(function TablePagination(inProps, ref) {
     var _slotProps$select;
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTablePagination'
     });
@@ -49540,7 +50170,7 @@
    * based on the material table element parent (head, body, etc).
    */
   var TableRow = /*#__PURE__*/React__namespace.forwardRef(function TableRow(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTableRow'
     });
@@ -49666,9 +50296,8 @@
       return [styles.icon, styles["iconDirection".concat(capitalize(ownerState.direction))]];
     }
   })(function (_ref3) {
-    var theme = _ref3.theme,
-      ownerState = _ref3.ownerState;
-    return _extends({
+    var theme = _ref3.theme;
+    return {
       fontSize: 18,
       marginRight: 4,
       marginLeft: 4,
@@ -49676,19 +50305,30 @@
       transition: theme.transitions.create(['opacity', 'transform'], {
         duration: theme.transitions.duration.shorter
       }),
-      userSelect: 'none'
-    }, ownerState.direction === 'desc' && {
-      transform: 'rotate(0deg)'
-    }, ownerState.direction === 'asc' && {
-      transform: 'rotate(180deg)'
-    });
+      userSelect: 'none',
+      variants: [{
+        props: {
+          direction: 'desc'
+        },
+        style: {
+          transform: 'rotate(0deg)'
+        }
+      }, {
+        props: {
+          direction: 'asc'
+        },
+        style: {
+          transform: 'rotate(180deg)'
+        }
+      }]
+    };
   });
 
   /**
    * A button based label for placing inside `TableCell` for column sorting.
    */
   var TableSortLabel = /*#__PURE__*/React__namespace.forwardRef(function TableSortLabel(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTableSortLabel'
     });
@@ -49899,7 +50539,7 @@
   });
   var TabScrollButton = /*#__PURE__*/React__namespace.forwardRef(function TabScrollButton(inProps, ref) {
     var _slots$StartScrollBut, _slots$EndScrollButto;
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTabScrollButton'
     });
@@ -50176,7 +50816,7 @@
   var defaultIndicatorStyle = {};
   var warnedOnceTabPresent = false;
   var Tabs = /*#__PURE__*/React__namespace.forwardRef(function Tabs(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTabs'
     });
@@ -50887,7 +51527,7 @@
    * - using the underlying components directly as shown in the demos
    */
   var TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(inProps, ref) {
-    var props = useThemeProps$M({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTextField'
     });
@@ -52070,7 +52710,7 @@
   exports.getOffsetLeft = getOffsetLeft;
   exports.getOffsetTop = getOffsetTop;
   exports.getOutlinedInputUtilityClass = getOutlinedInputUtilityClass;
-  exports.getOverlayAlpha = getOverlayAlpha$1;
+  exports.getOverlayAlpha = getOverlayAlpha;
   exports.getPaginationItemUtilityClass = getPaginationItemUtilityClass;
   exports.getPaginationUtilityClass = getPaginationUtilityClass;
   exports.getPaperUtilityClass = getPaperUtilityClass;
@@ -52227,7 +52867,7 @@
   exports.useStepContext = useStepContext;
   exports.useStepperContext = useStepperContext;
   exports.useTheme = useTheme;
-  exports.useThemeProps = useThemeProps$M;
+  exports.useThemeProps = useThemeProps$Q;
   exports.withStyles = withStyles;
   exports.withTheme = withTheme;