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

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-alpha.1
+ * @mui/material v6.0.0-alpha.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -5160,11 +5160,6 @@
     }, other);
   }
 
-  var shape = {
-    borderRadius: 4
-  };
-  var shape$1 = shape;
-
   function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
   }
@@ -5220,6 +5215,98 @@
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
+  /**
+   * For using in `sx` prop to sort the breakpoint from low to high.
+   * Note: this function does not work and will not support multiple units.
+   *       e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }
+   *            output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 eventhough 40rem > 300px
+   */
+  function sortContainerQueries(theme, css) {
+    if (!theme.containerQueries) {
+      return css;
+    }
+    var sorted = Object.keys(css).filter(function (key) {
+      return key.startsWith('@container');
+    }).sort(function (a, b) {
+      var _a$match, _b$match;
+      var regex = /min-width:\s*([0-9.]+)/;
+      return +(((_a$match = a.match(regex)) == null ? void 0 : _a$match[1]) || 0) - +(((_b$match = b.match(regex)) == null ? void 0 : _b$match[1]) || 0);
+    });
+    if (!sorted.length) {
+      return css;
+    }
+    return sorted.reduce(function (acc, key) {
+      var value = css[key];
+      delete acc[key];
+      acc[key] = value;
+      return acc;
+    }, _extends({}, css));
+  }
+  function isCqShorthand(breakpointKeys, value) {
+    return value.startsWith('@') && (breakpointKeys.some(function (key) {
+      return value.startsWith("@".concat(key));
+    }) || !!value.match(/^@\d/));
+  }
+  function getContainerQuery(theme, shorthand) {
+    var matches = shorthand.match(/^@([^/]+)\/?(.+)?$/);
+    if (!matches) {
+      {
+        throw new Error("MUI: The provided shorthand ".concat("(".concat(shorthand, ")"), " is invalid. The format should be `@<breakpoint | number>` or `@<breakpoint | number>/<container>`.\nFor example, `@sm` or `@600` or `@40rem/sidebar`.") );
+      }
+    }
+    var _matches = _slicedToArray(matches, 3),
+      containerQuery = _matches[1],
+      containerName = _matches[2];
+    var value = Number.isNaN(+containerQuery) ? containerQuery : +containerQuery;
+    return theme.containerQueries(containerName).up(value);
+  }
+  function cssContainerQueries(themeInput) {
+    var toContainerQuery = function toContainerQuery(mediaQuery, name) {
+      return mediaQuery.replace('@media', name ? "@container ".concat(name) : '@container');
+    };
+    function attachCq(node, name) {
+      node.up = function () {
+        var _themeInput$breakpoin;
+        return toContainerQuery((_themeInput$breakpoin = themeInput.breakpoints).up.apply(_themeInput$breakpoin, arguments), name);
+      };
+      node.down = function () {
+        var _themeInput$breakpoin2;
+        return toContainerQuery((_themeInput$breakpoin2 = themeInput.breakpoints).down.apply(_themeInput$breakpoin2, arguments), name);
+      };
+      node.between = function () {
+        var _themeInput$breakpoin3;
+        return toContainerQuery((_themeInput$breakpoin3 = themeInput.breakpoints).between.apply(_themeInput$breakpoin3, arguments), name);
+      };
+      node.only = function () {
+        var _themeInput$breakpoin4;
+        return toContainerQuery((_themeInput$breakpoin4 = themeInput.breakpoints).only.apply(_themeInput$breakpoin4, arguments), name);
+      };
+      node.not = function () {
+        var _themeInput$breakpoin5;
+        var result = toContainerQuery((_themeInput$breakpoin5 = themeInput.breakpoints).not.apply(_themeInput$breakpoin5, arguments), name);
+        if (result.includes('not all and')) {
+          // `@container` does not work with `not all and`, so need to invert the logic
+          return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>');
+        }
+        return result;
+      };
+    }
+    var node = {};
+    var containerQueries = function containerQueries(name) {
+      attachCq(node, name);
+      return node;
+    };
+    attachCq(containerQueries);
+    return _extends({}, themeInput, {
+      containerQueries: containerQueries
+    });
+  }
+
+  var shape = {
+    borderRadius: 4
+  };
+  var shape$1 = shape;
+
   var responsivePropType = PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.array]) ;
   var responsivePropType$1 = responsivePropType;
 
@@ -5269,6 +5356,19 @@
       return "@media (min-width:".concat(values$1[key], "px)");
     }
   };
+  var defaultContainerQueries = {
+    containerQueries: function containerQueries(containerName) {
+      return {
+        up: function up(key) {
+          var result = typeof key === 'number' ? key : values$1[key] || key;
+          if (typeof result === 'number') {
+            result = "".concat(result, "px");
+          }
+          return containerName ? "@container ".concat(containerName, " (min-width:").concat(result, ")") : "@container (min-width:".concat(result, ")");
+        }
+      };
+    }
+  };
   function handleBreakpoints(props, propValue, styleFromPropValue) {
     var theme = props.theme || {};
     if (Array.isArray(propValue)) {
@@ -5281,8 +5381,14 @@
     if (_typeof(propValue) === 'object') {
       var _themeBreakpoints = theme.breakpoints || defaultBreakpoints;
       return Object.keys(propValue).reduce(function (acc, breakpoint) {
+        if (isCqShorthand(_themeBreakpoints.keys, breakpoint)) {
+          var containerKey = getContainerQuery(theme.containerQueries ? theme : defaultContainerQueries, breakpoint);
+          if (containerKey) {
+            acc[containerKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
+          }
+        }
         // key is breakpoint
-        if (Object.keys(_themeBreakpoints.values || values$1).indexOf(breakpoint) !== -1) {
+        else if (Object.keys(_themeBreakpoints.values || values$1).indexOf(breakpoint) !== -1) {
           var mediaKey = _themeBreakpoints.up(breakpoint);
           acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
         } else {
@@ -6293,7 +6399,7 @@
             }
           }
         });
-        return removeUnusedBreakpoints(breakpointsKeys, css);
+        return sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css));
       }
       return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
     }
@@ -6399,6 +6505,7 @@
       spacing: spacing,
       shape: _extends({}, shape$1, shapeInput)
     }, other);
+    muiTheme = cssContainerQueries(muiTheme);
     muiTheme.applyStyles = applyStyles$2;
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       args[_key - 1] = arguments[_key];
@@ -6835,17 +6942,9 @@
   var reactIs_5 = reactIs.Memo;
   reactIs.isValidElementType;
 
-  // Simplified polyfill for IE11 support
-  // https://github.com/JamesMGreene/Function.name/blob/58b314d4a983110c3682f1228f845d39ccca1817/Function.name.js#L3
-  var fnNameMatchRegex = /^\s*function(?:\s|\s*\/\*.*\*\/\s*)+([^(\s/]*)\s*/;
-  function getFunctionName(fn) {
-    var match = "".concat(fn).match(fnNameMatchRegex);
-    var name = match && match[1];
-    return name || '';
-  }
   function getFunctionComponentName(Component) {
     var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-    return Component.displayName || Component.name || getFunctionName(Component) || fallback;
+    return Component.displayName || Component.name || fallback;
   }
   function getWrappedName(outerType, innerType, wrapperName) {
     var functionName = getFunctionComponentName(innerType);
@@ -7168,7 +7267,7 @@
     return resolveProps(theme.components[name].defaultProps, props);
   }
 
-  function useThemeProps$H(_ref) {
+  function useThemeProps$N(_ref) {
     var props = _ref.props,
       name = _ref.name,
       defaultTheme = _ref.defaultTheme,
@@ -8411,16 +8510,9 @@
         return valueType;
     }
   }
-
-  // IE 11 support
-  function ponyfillIsInteger(x) {
-    // eslint-disable-next-line no-restricted-globals
-    return typeof x === 'number' && isFinite(x) && Math.floor(x) === x;
-  }
-  var isInteger = Number.isInteger || ponyfillIsInteger;
   function requiredInteger(props, propName, componentName, location) {
     var propValue = props[propName];
-    if (propValue == null || !isInteger(propValue)) {
+    if (propValue == null || !Number.isInteger(propValue)) {
       var propType = getTypeByValue(propValue);
       return new RangeError("Invalid ".concat(location, " `").concat(propName, "` of type `").concat(propType, "` supplied to `").concat(componentName, "`, expected `integer`."));
     }
@@ -9477,7 +9569,7 @@
     }
   });
   var useThemePropsDefault$2 = function useThemePropsDefault(inProps) {
-    return useThemeProps$H({
+    return useThemeProps$N({
       props: inProps,
       name: 'MuiContainer',
       defaultTheme: defaultTheme$6
@@ -9865,7 +9957,7 @@
     }
   });
   function useThemePropsDefault$1(props) {
-    return useThemeProps$H({
+    return useThemeProps$N({
       props: props,
       name: 'MuiGrid',
       defaultTheme: defaultTheme$5
@@ -10032,7 +10124,7 @@
     }
   });
   function useThemePropsDefault(props) {
-    return useThemeProps$H({
+    return useThemeProps$N({
       props: props,
       name: 'MuiStack',
       defaultTheme: defaultTheme$4
@@ -10725,10 +10817,8 @@
         var isString = function isString(value) {
           return typeof value === 'string';
         };
-        // IE11 support, replace with Number.isNaN
-        // eslint-disable-next-line no-restricted-globals
         var isNumber = function isNumber(value) {
-          return !isNaN(parseFloat(value));
+          return !Number.isNaN(parseFloat(value));
         };
         if (!isString(props) && !Array.isArray(props)) {
           console.error('MUI: Argument "props" must be a string or Array.');
@@ -11074,10 +11164,10 @@
     return theme[THEME_ID] || theme;
   }
 
-  function useThemeProps$G(_ref) {
+  function useThemeProps$M(_ref) {
     var props = _ref.props,
       name = _ref.name;
-    return useThemeProps$H({
+    return useThemeProps$N({
       props: props,
       name: name,
       defaultTheme: defaultTheme$3,
@@ -11633,7 +11723,7 @@
     };
   });
   var SvgIcon = /*#__PURE__*/React__namespace.forwardRef(function SvgIcon(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiSvgIcon'
     });
@@ -11792,7 +11882,7 @@
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   function createUseThemeProps(name) {
-    return useThemeProps$G;
+    return useThemeProps$M;
   }
 
   function _setPrototypeOf(o, p) {
@@ -12882,7 +12972,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$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiCollapse'
     });
@@ -13212,7 +13302,7 @@
     }));
   });
   var Paper = /*#__PURE__*/React__namespace.forwardRef(function Paper(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiPaper'
     });
@@ -13589,7 +13679,7 @@
   var accordionClasses = generateUtilityClasses$1('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
   var accordionClasses$1 = accordionClasses;
 
-  var useThemeProps$F = createUseThemeProps();
+  var useThemeProps$L = createUseThemeProps();
   var useUtilityClasses$1M = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       square = ownerState.square,
@@ -13687,7 +13777,7 @@
     };
   });
   var Accordion = /*#__PURE__*/React__namespace.forwardRef(function Accordion(inProps, ref) {
-    var props = useThemeProps$F({
+    var props = useThemeProps$L({
       props: inProps,
       name: 'MuiAccordion'
     });
@@ -13881,7 +13971,7 @@
   var accordionActionsClasses = generateUtilityClasses$1('MuiAccordionActions', ['root', 'spacing']);
   var accordionActionsClasses$1 = accordionActionsClasses;
 
-  var useThemeProps$E = createUseThemeProps();
+  var useThemeProps$K = createUseThemeProps();
   var useUtilityClasses$1L = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disableSpacing = ownerState.disableSpacing;
@@ -13914,7 +14004,7 @@
     }]
   });
   var AccordionActions = /*#__PURE__*/React__namespace.forwardRef(function AccordionActions(inProps, ref) {
-    var props = useThemeProps$E({
+    var props = useThemeProps$K({
       props: inProps,
       name: 'MuiAccordionActions'
     });
@@ -13967,7 +14057,7 @@
   var accordionDetailsClasses = generateUtilityClasses$1('MuiAccordionDetails', ['root']);
   var accordionDetailsClasses$1 = accordionDetailsClasses;
 
-  var useThemeProps$D = createUseThemeProps();
+  var useThemeProps$J = createUseThemeProps();
   var useUtilityClasses$1K = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -13988,7 +14078,7 @@
     };
   });
   var AccordionDetails = /*#__PURE__*/React__namespace.forwardRef(function AccordionDetails(inProps, ref) {
-    var props = useThemeProps$D({
+    var props = useThemeProps$J({
       props: inProps,
       name: 'MuiAccordionDetails'
     });
@@ -14123,7 +14213,7 @@
   var touchRippleClasses$1 = touchRippleClasses;
 
   var _templateObject$3, _templateObject2$3, _templateObject3$3, _templateObject4$3;
-  var useThemeProps$C = createUseThemeProps();
+  var useThemeProps$I = 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"])));
@@ -14169,7 +14259,7 @@
    * TODO v5: Make private
    */
   var TouchRipple = /*#__PURE__*/React__namespace.forwardRef(function TouchRipple(inProps, ref) {
-    var props = useThemeProps$C({
+    var props = useThemeProps$I({
       props: inProps,
       name: 'MuiTouchRipple'
     });
@@ -14381,7 +14471,7 @@
   var buttonBaseClasses = generateUtilityClasses$1('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
   var buttonBaseClasses$1 = buttonBaseClasses;
 
-  var useThemeProps$B = createUseThemeProps();
+  var useThemeProps$H = createUseThemeProps();
   var useUtilityClasses$1J = function useUtilityClasses(ownerState) {
     var disabled = ownerState.disabled,
       focusVisible = ownerState.focusVisible,
@@ -14446,7 +14536,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$B({
+    var props = useThemeProps$H({
       props: inProps,
       name: 'MuiButtonBase'
     });
@@ -14857,7 +14947,7 @@
   var accordionSummaryClasses = generateUtilityClasses$1('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
   var accordionSummaryClasses$1 = accordionSummaryClasses;
 
-  var useThemeProps$A = createUseThemeProps();
+  var useThemeProps$G = createUseThemeProps();
   var useUtilityClasses$1I = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       expanded = ownerState.expanded,
@@ -14948,7 +15038,7 @@
     });
   });
   var AccordionSummary = /*#__PURE__*/React__namespace.forwardRef(function AccordionSummary(inProps, ref) {
-    var props = useThemeProps$A({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiAccordionSummary'
     });
@@ -15135,7 +15225,7 @@
    * regarding the available icon options.
    */
   var IconButton = /*#__PURE__*/React__namespace.forwardRef(function IconButton(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiIconButton'
     });
@@ -15262,7 +15352,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$z = createUseThemeProps();
+  var useThemeProps$F = createUseThemeProps();
   var useUtilityClasses$1G = function useUtilityClasses(ownerState) {
     var variant = ownerState.variant,
       color = ownerState.color,
@@ -15410,7 +15500,7 @@
     })
   };
   var Alert = /*#__PURE__*/React__namespace.forwardRef(function Alert(inProps, ref) {
-    var props = useThemeProps$z({
+    var props = useThemeProps$F({
       props: inProps,
       name: 'MuiAlert'
     });
@@ -15656,7 +15746,9 @@
       margin: 0
     }, ownerState.variant === 'inherit' && {
       // Some elements, like <button> on Chrome have default font that doesn't inherit, reset this.
-      font: 'inherit'
+      font: 'inherit',
+      lineHeight: 'inherit',
+      letterSpacing: 'inherit'
     }, ownerState.variant !== 'inherit' && theme.typography[ownerState.variant], ownerState.align !== 'inherit' && {
       textAlign: ownerState.align
     }, ownerState.noWrap && {
@@ -15695,7 +15787,7 @@
     return colorTransformations$1[color] || color;
   };
   var Typography = /*#__PURE__*/React__namespace.forwardRef(function Typography(inProps, ref) {
-    var themeProps = useThemeProps$G({
+    var themeProps = useThemeProps$M({
       props: inProps,
       name: 'MuiTypography'
     });
@@ -15821,7 +15913,7 @@
   var alertTitleClasses = generateUtilityClasses$1('MuiAlertTitle', ['root']);
   var alertTitleClasses$1 = alertTitleClasses;
 
-  var useThemeProps$y = createUseThemeProps();
+  var useThemeProps$E = createUseThemeProps();
   var useUtilityClasses$1E = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -15843,7 +15935,7 @@
     };
   });
   var AlertTitle = /*#__PURE__*/React__namespace.forwardRef(function AlertTitle(inProps, ref) {
-    var props = useThemeProps$y({
+    var props = useThemeProps$E({
       props: inProps,
       name: 'MuiAlertTitle'
     });
@@ -15889,7 +15981,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$x = createUseThemeProps();
+  var useThemeProps$D = createUseThemeProps();
   var useUtilityClasses$1D = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       position = ownerState.position,
@@ -15953,7 +16045,6 @@
           position: 'sticky'
         },
         style: {
-          // ⚠️ sticky is not supported by IE11.
           position: 'sticky',
           zIndex: (theme.vars || theme).zIndex.appBar,
           top: 0,
@@ -16041,7 +16132,7 @@
     };
   });
   var AppBar = /*#__PURE__*/React__namespace.forwardRef(function AppBar(inProps, ref) {
-    var props = useThemeProps$x({
+    var props = useThemeProps$D({
       props: inProps,
       name: 'MuiAppBar'
     });
@@ -20159,8 +20250,7 @@
        */
       function handleKeyDown(nativeEvent) {
         if (!nativeEvent.defaultPrevented) {
-          // IE11, Edge (prior to using Blink?) use 'Esc'
-          if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
+          if (nativeEvent.key === 'Escape') {
             // not calling `preventDefault` since we don't know if people may ignore this event e.g. a permanently open snackbar
             onClose == null || onClose(nativeEvent, 'escapeKeyDown');
           }
@@ -20465,9 +20555,8 @@
   } ;
 
   // https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript
-  // Give up on IE11 support for this feature
   function stripDiacritics(string) {
-    return typeof string.normalize !== 'undefined' ? string.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : string;
+    return string.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
   }
   function createFilterOptions() {
     var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -20504,16 +20593,6 @@
       return typeof limit === 'number' ? filteredOptions.slice(0, limit) : filteredOptions;
     };
   }
-
-  // To replace with .findIndex() once we stop IE11 support.
-  function findIndex(array, comp) {
-    for (var i = 0; i < array.length; i += 1) {
-      if (comp(array[i])) {
-        return i;
-      }
-    }
-    return -1;
-  }
   var defaultFilterOptions = createFilterOptions();
 
   // Number of options to jump in list box when `Page Up` and `Page Down` keys are used.
@@ -20903,7 +20982,7 @@
       }) : isSameValue(previousProps.value, value))) {
         var previousHighlightedOption = previousProps.filteredOptions[highlightedIndexRef.current];
         if (previousHighlightedOption) {
-          return findIndex(filteredOptions, function (option) {
+          return filteredOptions.findIndex(function (option) {
             return getOptionLabel(option) === getOptionLabel(previousHighlightedOption);
           });
         }
@@ -20940,12 +21019,12 @@
         var currentOption = filteredOptions[highlightedIndexRef.current];
 
         // Keep the current highlighted index if possible
-        if (multiple && currentOption && findIndex(value, function (val) {
+        if (multiple && currentOption && value.findIndex(function (val) {
           return isOptionEqualToValue(currentOption, val);
         }) !== -1) {
           return;
         }
-        var itemIndex = findIndex(filteredOptions, function (optionItem) {
+        var itemIndex = filteredOptions.findIndex(function (optionItem) {
           return isOptionEqualToValue(optionItem, valueItem);
         });
         if (itemIndex === -1) {
@@ -21052,7 +21131,7 @@
             console.error(["MUI: The `isOptionEqualToValue` method of ".concat(componentName, " does not handle the arguments correctly."), "The component expects a single value to match a given option but found ".concat(matches.length, " matches.")].join('\n'));
           }
         }
-        var itemIndex = findIndex(newValue, function (valueItem) {
+        var itemIndex = newValue.findIndex(function (valueItem) {
           return isOptionEqualToValue(option, valueItem);
         });
         if (itemIndex === -1) {
@@ -21557,7 +21636,7 @@
   var Popper = /*#__PURE__*/React__namespace.forwardRef(function Popper(inProps, ref) {
     var _slots$root;
     var theme = useTheme$3();
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiPopper'
     });
@@ -21782,7 +21861,7 @@
     });
   });
   var ListSubheader = /*#__PURE__*/React__namespace.forwardRef(function ListSubheader(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiListSubheader'
     });
@@ -21873,7 +21952,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$w = createUseThemeProps();
+  var useThemeProps$C = createUseThemeProps();
   var useUtilityClasses$1A = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disabled = ownerState.disabled,
@@ -22173,7 +22252,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$w({
+    var props = useThemeProps$C({
       props: inProps,
       name: 'MuiChip'
     });
@@ -22661,7 +22740,7 @@
    */
   var InputBase = /*#__PURE__*/React__namespace.forwardRef(function InputBase(inProps, ref) {
     var _slotProps$input;
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiInputBase'
     });
@@ -23201,7 +23280,7 @@
   var autocompleteClasses$1 = autocompleteClasses;
 
   var _styled, _ClearIcon, _ArrowDropDownIcon;
-  var useThemeProps$v = createUseThemeProps();
+  var useThemeProps$B = createUseThemeProps();
   var useUtilityClasses$1y = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disablePortal = ownerState.disablePortal,
@@ -23520,7 +23599,7 @@
   }));
   var Autocomplete = /*#__PURE__*/React__namespace.forwardRef(function Autocomplete(inProps, ref) {
     var _slotProps$clearIndic, _slotProps$paper, _slotProps$popper, _slotProps$popupIndic;
-    var props = useThemeProps$v({
+    var props = useThemeProps$B({
       props: inProps,
       name: 'MuiAutocomplete'
     });
@@ -24296,7 +24375,7 @@
   var avatarClasses = generateUtilityClasses$1('MuiAvatar', ['root', 'colorDefault', 'circular', 'rounded', 'square', 'img', 'fallback']);
   var avatarClasses$1 = avatarClasses;
 
-  var useThemeProps$u = createUseThemeProps();
+  var useThemeProps$A = createUseThemeProps();
   var useUtilityClasses$1x = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       variant = ownerState.variant,
@@ -24371,7 +24450,7 @@
     width: '100%',
     height: '100%',
     textAlign: 'center',
-    // Handle non-square image. The property isn't supported by IE11.
+    // Handle non-square image.
     objectFit: 'cover',
     // Hide alt text.
     color: 'transparent',
@@ -24428,7 +24507,7 @@
     return loaded;
   }
   var Avatar = /*#__PURE__*/React__namespace.forwardRef(function Avatar(inProps, ref) {
-    var props = useThemeProps$u({
+    var props = useThemeProps$A({
       props: inProps,
       name: 'MuiAvatar'
     });
@@ -24589,7 +24668,7 @@
     small: -16,
     medium: -8
   };
-  var useThemeProps$t = createUseThemeProps();
+  var useThemeProps$z = createUseThemeProps();
   var useUtilityClasses$1w = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -24620,7 +24699,7 @@
   });
   var AvatarGroup = /*#__PURE__*/React__namespace.forwardRef(function AvatarGroup(inProps, ref) {
     var _slotProps$additional;
-    var props = useThemeProps$t({
+    var props = useThemeProps$z({
       props: inProps,
       name: 'MuiAvatarGroup'
     });
@@ -24976,7 +25055,7 @@
   var backdropClasses = generateUtilityClasses$1('MuiBackdrop', ['root', 'invisible']);
   var backdropClasses$1 = backdropClasses;
 
-  var useThemeProps$s = createUseThemeProps();
+  var useThemeProps$y = createUseThemeProps();
   var useUtilityClasses$1v = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       invisible = ownerState.invisible;
@@ -25013,7 +25092,7 @@
     }]
   });
   var Backdrop = /*#__PURE__*/React__namespace.forwardRef(function Backdrop(inProps, ref) {
-    var props = useThemeProps$s({
+    var props = useThemeProps$y({
       props: inProps,
       name: 'MuiBackdrop'
     });
@@ -25184,7 +25263,7 @@
 
   var RADIUS_STANDARD = 10;
   var RADIUS_DOT = 4;
-  var useThemeProps$r = createUseThemeProps();
+  var useThemeProps$x = createUseThemeProps();
   var useUtilityClasses$1u = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       anchorOrigin = ownerState.anchorOrigin,
@@ -25387,7 +25466,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$r({
+    var props = useThemeProps$x({
       props: inProps,
       name: 'MuiBadge'
     });
@@ -25611,7 +25690,7 @@
   var bottomNavigationClasses = generateUtilityClasses$1('MuiBottomNavigation', ['root']);
   var bottomNavigationClasses$1 = bottomNavigationClasses;
 
-  var useThemeProps$q = createUseThemeProps();
+  var useThemeProps$w = createUseThemeProps();
   var useUtilityClasses$1t = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -25635,7 +25714,7 @@
     };
   });
   var BottomNavigation = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigation(inProps, ref) {
-    var props = useThemeProps$q({
+    var props = useThemeProps$w({
       props: inProps,
       name: 'MuiBottomNavigation'
     });
@@ -25730,7 +25809,7 @@
   var bottomNavigationActionClasses = generateUtilityClasses$1('MuiBottomNavigationAction', ['root', 'iconOnly', 'selected', 'label']);
   var bottomNavigationActionClasses$1 = bottomNavigationActionClasses;
 
-  var useThemeProps$p = createUseThemeProps();
+  var useThemeProps$v = createUseThemeProps();
   var useUtilityClasses$1s = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       showLabel = ownerState.showLabel,
@@ -25812,7 +25891,7 @@
     }]);
   });
   var BottomNavigationAction = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigationAction(inProps, ref) {
-    var props = useThemeProps$p({
+    var props = useThemeProps$v({
       props: inProps,
       name: 'MuiBottomNavigationAction'
     });
@@ -26020,7 +26099,7 @@
   var breadcrumbsClasses = generateUtilityClasses$1('MuiBreadcrumbs', ['root', 'ol', 'li', 'separator']);
   var breadcrumbsClasses$1 = breadcrumbsClasses;
 
-  var useThemeProps$o = createUseThemeProps();
+  var useThemeProps$u = createUseThemeProps();
   var useUtilityClasses$1r = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -26080,7 +26159,7 @@
     }, []);
   }
   var Breadcrumbs = /*#__PURE__*/React__namespace.forwardRef(function Breadcrumbs(inProps, ref) {
-    var props = useThemeProps$o({
+    var props = useThemeProps$u({
       props: inProps,
       name: 'MuiBreadcrumbs'
     });
@@ -26280,7 +26359,7 @@
   }
   var ButtonGroupButtonContext$1 = ButtonGroupButtonContext;
 
-  var useThemeProps$n = createUseThemeProps();
+  var useThemeProps$t = createUseThemeProps();
   var useUtilityClasses$1q = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       disableElevation = ownerState.disableElevation,
@@ -26572,7 +26651,7 @@
     var contextProps = React__namespace.useContext(ButtonGroupContext$1);
     var buttonGroupButtonContextPositionClassName = React__namespace.useContext(ButtonGroupButtonContext$1);
     var resolvedProps = resolveProps(contextProps, inProps);
-    var props = useThemeProps$n({
+    var props = useThemeProps$t({
       props: resolvedProps,
       name: 'MuiButton'
     });
@@ -26738,7 +26817,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$m = createUseThemeProps();
+  var useThemeProps$s = 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];
@@ -26927,7 +27006,7 @@
     });
   });
   var ButtonGroup = /*#__PURE__*/React__namespace.forwardRef(function ButtonGroup(inProps, ref) {
-    var props = useThemeProps$m({
+    var props = useThemeProps$s({
       props: inProps,
       name: 'MuiButtonGroup'
     });
@@ -27097,7 +27176,7 @@
   var cardClasses = generateUtilityClasses$1('MuiCard', ['root']);
   var cardClasses$1 = cardClasses;
 
-  var useThemeProps$l = createUseThemeProps();
+  var useThemeProps$r = createUseThemeProps();
   var useUtilityClasses$1o = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -27115,7 +27194,7 @@
     overflow: 'hidden'
   });
   var Card = /*#__PURE__*/React__namespace.forwardRef(function Card(inProps, ref) {
-    var props = useThemeProps$l({
+    var props = useThemeProps$r({
       props: inProps,
       name: 'MuiCard'
     });
@@ -27174,7 +27253,7 @@
   var cardActionAreaClasses = generateUtilityClasses$1('MuiCardActionArea', ['root', 'focusVisible', 'focusHighlight']);
   var cardActionAreaClasses$1 = cardActionAreaClasses;
 
-  var useThemeProps$k = createUseThemeProps();
+  var useThemeProps$q = createUseThemeProps();
   var useUtilityClasses$1n = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -27231,7 +27310,7 @@
     };
   });
   var CardActionArea = /*#__PURE__*/React__namespace.forwardRef(function CardActionArea(inProps, ref) {
-    var props = useThemeProps$k({
+    var props = useThemeProps$q({
       props: inProps,
       name: 'MuiCardActionArea'
     });
@@ -27287,7 +27366,7 @@
   var cardActionsClasses = generateUtilityClasses$1('MuiCardActions', ['root', 'spacing']);
   var cardActionsClasses$1 = cardActionsClasses;
 
-  var useThemeProps$j = createUseThemeProps();
+  var useThemeProps$p = createUseThemeProps();
   var useUtilityClasses$1m = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disableSpacing = ownerState.disableSpacing;
@@ -27319,7 +27398,7 @@
     }]
   });
   var CardActions = /*#__PURE__*/React__namespace.forwardRef(function CardActions(inProps, ref) {
-    var props = useThemeProps$j({
+    var props = useThemeProps$p({
       props: inProps,
       name: 'MuiCardActions'
     });
@@ -27372,7 +27451,7 @@
   var cardContentClasses = generateUtilityClasses$1('MuiCardContent', ['root']);
   var cardContentClasses$1 = cardContentClasses;
 
-  var useThemeProps$i = createUseThemeProps();
+  var useThemeProps$o = createUseThemeProps();
   var useUtilityClasses$1l = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -27393,7 +27472,7 @@
     }
   });
   var CardContent = /*#__PURE__*/React__namespace.forwardRef(function CardContent(inProps, ref) {
-    var props = useThemeProps$i({
+    var props = useThemeProps$o({
       props: inProps,
       name: 'MuiCardContent'
     });
@@ -27447,7 +27526,7 @@
   var cardHeaderClasses = generateUtilityClasses$1('MuiCardHeader', ['root', 'avatar', 'action', 'content', 'title', 'subheader']);
   var cardHeaderClasses$1 = cardHeaderClasses;
 
-  var useThemeProps$h = createUseThemeProps();
+  var useThemeProps$n = createUseThemeProps();
   var useUtilityClasses$1k = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -27505,7 +27584,7 @@
     flex: '1 1 auto'
   });
   var CardHeader = /*#__PURE__*/React__namespace.forwardRef(function CardHeader(inProps, ref) {
-    var props = useThemeProps$h({
+    var props = useThemeProps$n({
       props: inProps,
       name: 'MuiCardHeader'
     });
@@ -27639,7 +27718,7 @@
   var cardMediaClasses = generateUtilityClasses$1('MuiCardMedia', ['root', 'media', 'img']);
   var cardMediaClasses$1 = cardMediaClasses;
 
-  var useThemeProps$g = createUseThemeProps();
+  var useThemeProps$m = createUseThemeProps();
   var useUtilityClasses$1j = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       isMediaComponent = ownerState.isMediaComponent,
@@ -27675,7 +27754,6 @@
         isImageComponent: true
       },
       style: {
-        // ⚠️ object-fit is not supported by IE11.
         objectFit: 'cover'
       }
     }]
@@ -27683,7 +27761,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$g({
+    var props = useThemeProps$m({
       props: inProps,
       name: 'MuiCardMedia'
     });
@@ -28094,7 +28172,7 @@
   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$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiCheckbox'
     });
@@ -28249,9 +28327,16 @@
   var circularProgressClasses$1 = circularProgressClasses;
 
   var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$2;
+  var useThemeProps$l = 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"])));
+
+  // This implementation is for supporting both Styled-components v4+ and Pigment CSS.
+  // A global animation has to be created here for Styled-components v4+ (https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12).
+  // which can be done by checking typeof indeterminate1Keyframe !== 'string' (at runtime, Pigment CSS transform keyframes`` to a string).
+  var rotateAnimation = typeof circularRotateKeyframe !== 'string' ? css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n        animation: ", " 1.4s linear infinite;\n      "])), circularRotateKeyframe) : null;
+  var dashAnimation = typeof circularDashKeyframe !== 'string' ? css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n        animation: ", " 1.4s ease-in-out infinite;\n      "])), circularDashKeyframe) : null;
   var useUtilityClasses$1g = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       variant = ownerState.variant,
@@ -28272,18 +28357,40 @@
       return [styles.root, styles[ownerState.variant], styles["color".concat(capitalize(ownerState.color))]];
     }
   })(function (_ref) {
-    var ownerState = _ref.ownerState,
-      theme = _ref.theme;
-    return _extends({
-      display: 'inline-block'
-    }, ownerState.variant === 'determinate' && {
-      transition: theme.transitions.create('transform')
-    }, ownerState.color !== 'inherit' && {
-      color: (theme.vars || theme).palette[ownerState.color].main
-    });
-  }, function (_ref2) {
-    var ownerState = _ref2.ownerState;
-    return ownerState.variant === 'indeterminate' && css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n      animation: ", " 1.4s linear infinite;\n    "])), circularRotateKeyframe);
+    var theme = _ref.theme;
+    return {
+      display: 'inline-block',
+      variants: [{
+        props: {
+          variant: 'determinate'
+        },
+        style: {
+          transition: theme.transitions.create('transform')
+        }
+      }, {
+        props: {
+          variant: 'indeterminate'
+        },
+        style: rotateAnimation || {
+          animation: "".concat(circularRotateKeyframe, " 1.4s linear infinite")
+        }
+      }].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
+          },
+          style: {
+            color: (theme.vars || theme).palette[color].main
+          }
+        };
+      })))
+    };
   });
   var CircularProgressSVG = styled$1('svg', {
     name: 'MuiCircularProgress',
@@ -28301,21 +28408,37 @@
       var ownerState = props.ownerState;
       return [styles.circle, styles["circle".concat(capitalize(ownerState.variant))], ownerState.disableShrink && styles.circleDisableShrink];
     }
-  })(function (_ref3) {
-    var ownerState = _ref3.ownerState,
-      theme = _ref3.theme;
-    return _extends({
-      stroke: 'currentColor'
-    }, ownerState.variant === 'determinate' && {
-      transition: theme.transitions.create('stroke-dashoffset')
-    }, ownerState.variant === 'indeterminate' && {
-      // Some default value that looks fine waiting for the animation to kicks in.
-      strokeDasharray: '80px, 200px',
-      strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
-    });
-  }, function (_ref4) {
-    var ownerState = _ref4.ownerState;
-    return ownerState.variant === 'indeterminate' && !ownerState.disableShrink && css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n      animation: ", " 1.4s ease-in-out infinite;\n    "])), circularDashKeyframe);
+  })(function (_ref6) {
+    var theme = _ref6.theme;
+    return {
+      stroke: 'currentColor',
+      variants: [{
+        props: {
+          variant: 'determinate'
+        },
+        style: {
+          transition: theme.transitions.create('stroke-dashoffset')
+        }
+      }, {
+        props: {
+          variant: 'indeterminate'
+        },
+        style: {
+          // Some default value that looks fine waiting for the animation to kicks in.
+          strokeDasharray: '80px, 200px',
+          strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
+        }
+      }, {
+        props: function props(_ref7) {
+          var ownerState = _ref7.ownerState;
+          return ownerState.variant === 'indeterminate' && !ownerState.disableShrink;
+        },
+        style: dashAnimation || {
+          // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
+          animation: "".concat(circularDashKeyframe, " 1.4s ease-in-out infinite")
+        }
+      }]
+    };
   });
 
   /**
@@ -28326,7 +28449,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$G({
+    var props = useThemeProps$l({
       props: inProps,
       name: 'MuiCircularProgress'
     });
@@ -28467,7 +28590,7 @@
       }
     }),
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$G({
+      return useThemeProps$M({
         props: inProps,
         name: 'MuiContainer'
       });
@@ -28590,7 +28713,7 @@
     return defaultStyles;
   };
   function CssBaseline(inProps) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiCssBaseline'
     });
@@ -28663,7 +28786,7 @@
   var modalClasses = generateUtilityClasses$1('MuiModal', ['root', 'hidden', 'backdrop']);
   var modalClasses$1 = modalClasses;
 
-  var useThemeProps$f = createUseThemeProps();
+  var useThemeProps$k = createUseThemeProps();
   var useUtilityClasses$1f = function useUtilityClasses(ownerState) {
     var open = ownerState.open,
       exited = ownerState.exited,
@@ -28726,7 +28849,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$f({
+    var props = useThemeProps$k({
       name: 'MuiModal',
       props: inProps
     });
@@ -29180,7 +29303,7 @@
    * Dialogs are overlaid modal paper based components with a backdrop.
    */
   var Dialog = /*#__PURE__*/React__namespace.forwardRef(function Dialog(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiDialog'
     });
@@ -29204,6 +29327,7 @@
       _props$maxWidth = props.maxWidth,
       maxWidth = _props$maxWidth === void 0 ? 'sm' : _props$maxWidth,
       onBackdropClick = props.onBackdropClick,
+      onClick = props.onClick,
       onClose = props.onClose,
       open = props.open,
       _props$PaperComponent = props.PaperComponent,
@@ -29217,7 +29341,7 @@
       _props$transitionDura = props.transitionDuration,
       transitionDuration = _props$transitionDura === void 0 ? defaultTransitionDuration : _props$transitionDura,
       TransitionProps = props.TransitionProps,
-      other = _objectWithoutProperties(props, ["aria-describedby", "aria-labelledby", "BackdropComponent", "BackdropProps", "children", "className", "disableEscapeKeyDown", "fullScreen", "fullWidth", "maxWidth", "onBackdropClick", "onClose", "open", "PaperComponent", "PaperProps", "scroll", "TransitionComponent", "transitionDuration", "TransitionProps"]);
+      other = _objectWithoutProperties(props, ["aria-describedby", "aria-labelledby", "BackdropComponent", "BackdropProps", "children", "className", "disableEscapeKeyDown", "fullScreen", "fullWidth", "maxWidth", "onBackdropClick", "onClick", "onClose", "open", "PaperComponent", "PaperProps", "scroll", "TransitionComponent", "transitionDuration", "TransitionProps"]);
     var ownerState = _extends({}, props, {
       disableEscapeKeyDown: disableEscapeKeyDown,
       fullScreen: fullScreen,
@@ -29233,6 +29357,10 @@
       backdropClick.current = event.target === event.currentTarget;
     };
     var handleBackdropClick = function handleBackdropClick(event) {
+      if (onClick) {
+        onClick(event);
+      }
+
       // Ignore the events not coming from the "backdrop".
       if (!backdropClick.current) {
         return;
@@ -29371,6 +29499,10 @@
      * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
      */
     onBackdropClick: PropTypes.func,
+    /**
+     * @ignore
+     */
+    onClick: PropTypes.func,
     /**
      * Callback fired when the component requests to be closed.
      *
@@ -29464,7 +29596,7 @@
     });
   });
   var DialogActions = /*#__PURE__*/React__namespace.forwardRef(function DialogActions(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiDialogActions'
     });
@@ -29556,7 +29688,7 @@
     }));
   });
   var DialogContent = /*#__PURE__*/React__namespace.forwardRef(function DialogContent(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiDialogContent'
     });
@@ -29628,7 +29760,7 @@
     }
   })({});
   var DialogContentText = /*#__PURE__*/React__namespace.forwardRef(function DialogContentText(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiDialogContentText'
     });
@@ -29689,7 +29821,7 @@
     flex: '0 0 auto'
   });
   var DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function DialogTitle(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiDialogTitle'
     });
@@ -29744,7 +29876,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$e = createUseThemeProps();
+  var useThemeProps$j = createUseThemeProps();
   var useUtilityClasses$19 = function useUtilityClasses(ownerState) {
     var absolute = ownerState.absolute,
       children = ownerState.children,
@@ -29928,7 +30060,7 @@
     };
   });
   var Divider = /*#__PURE__*/React__namespace.forwardRef(function Divider(inProps, ref) {
-    var props = useThemeProps$e({
+    var props = useThemeProps$j({
       props: inProps,
       name: 'MuiDivider'
     });
@@ -30477,7 +30609,7 @@
    * when `variant="temporary"` is set.
    */
   var Drawer = /*#__PURE__*/React__namespace.forwardRef(function Drawer(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiDrawer'
     });
@@ -30674,6 +30806,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 useUtilityClasses$17 = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       variant = ownerState.variant,
@@ -30697,9 +30830,8 @@
     }
   })(function (_ref) {
     var _theme$palette$getCon, _theme$palette;
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    return _extends({}, theme.typography.button, _defineProperty({
+    var theme = _ref.theme;
+    return _extends({}, theme.typography.button, _defineProperty(_defineProperty({
       minHeight: 36,
       transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
         duration: theme.transitions.duration["short"]
@@ -30726,50 +30858,97 @@
       }
     }, "&.".concat(fabClasses$1.focusVisible), {
       boxShadow: (theme.vars || theme).shadows[6]
-    }), ownerState.size === 'small' && {
-      width: 40,
-      height: 40
-    }, ownerState.size === 'medium' && {
-      width: 48,
-      height: 48
-    }, ownerState.variant === 'extended' && {
-      borderRadius: 48 / 2,
-      padding: '0 16px',
-      width: 'auto',
-      minHeight: 'auto',
-      minWidth: 48,
-      height: 48
-    }, ownerState.variant === 'extended' && ownerState.size === 'small' && {
-      width: 'auto',
-      padding: '0 8px',
-      borderRadius: 34 / 2,
-      minWidth: 34,
-      height: 34
-    }, ownerState.variant === 'extended' && ownerState.size === 'medium' && {
-      width: 'auto',
-      padding: '0 16px',
-      borderRadius: 40 / 2,
-      minWidth: 40,
-      height: 40
-    }, ownerState.color === 'inherit' && {
-      color: 'inherit'
-    });
-  }, function (_ref2) {
-    var theme = _ref2.theme,
-      ownerState = _ref2.ownerState;
-    return _extends({}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && (theme.vars || theme).palette[ownerState.color] != null && {
-      color: (theme.vars || theme).palette[ownerState.color].contrastText,
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
-      '&:hover': {
-        backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-        }
+    }), "variants", [{
+      props: {
+        size: 'small'
+      },
+      style: {
+        width: 40,
+        height: 40
       }
-    });
-  }, function (_ref3) {
-    var theme = _ref3.theme;
+    }, {
+      props: {
+        size: 'medium'
+      },
+      style: {
+        width: 48,
+        height: 48
+      }
+    }, {
+      props: {
+        variant: 'extended'
+      },
+      style: {
+        borderRadius: 48 / 2,
+        padding: '0 16px',
+        width: 'auto',
+        minHeight: 'auto',
+        minWidth: 48,
+        height: 48
+      }
+    }, {
+      props: {
+        variant: 'extended',
+        size: 'small'
+      },
+      style: {
+        width: 'auto',
+        padding: '0 8px',
+        borderRadius: 34 / 2,
+        minWidth: 34,
+        height: 34
+      }
+    }, {
+      props: {
+        variant: 'extended',
+        size: 'medium'
+      },
+      style: {
+        width: 'auto',
+        padding: '0 16px',
+        borderRadius: 40 / 2,
+        minWidth: 40,
+        height: 40
+      }
+    }, {
+      props: {
+        color: 'inherit'
+      },
+      style: {
+        color: 'inherit'
+      }
+    }]));
+  }, function (_ref2) {
+    var theme = _ref2.theme;
+    return {
+      variants: _toConsumableArray(Object.entries(theme.palette).filter(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+          value = _ref4[1];
+        return value.main && value.dark && value.contrastText;
+      }) // 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].contrastText,
+            backgroundColor: (theme.vars || theme).palette[color].main,
+            '&:hover': {
+              backgroundColor: (theme.vars || theme).palette[color].dark,
+              // Reset on touch devices, it doesn't add specificity
+              '@media (hover: none)': {
+                backgroundColor: (theme.vars || theme).palette[color].main
+              }
+            }
+          }
+        };
+      }))
+    };
+  }, function (_ref7) {
+    var theme = _ref7.theme;
     return _defineProperty({}, "&.".concat(fabClasses$1.disabled), {
       color: (theme.vars || theme).palette.action.disabled,
       boxShadow: (theme.vars || theme).shadows[0],
@@ -30777,7 +30956,7 @@
     });
   });
   var Fab = /*#__PURE__*/React__namespace.forwardRef(function Fab(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$i({
       props: inProps,
       name: 'MuiFab'
     });
@@ -31048,7 +31227,7 @@
   });
   var FilledInput = /*#__PURE__*/React__namespace.forwardRef(function FilledInput(inProps, ref) {
     var _ref5, _slots$root, _ref6, _slots$input;
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiFilledInput'
     });
@@ -31304,7 +31483,7 @@
   var formControlClasses = generateUtilityClasses$1('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
   var formControlClasses$1 = formControlClasses;
 
-  var useThemeProps$d = createUseThemeProps();
+  var useThemeProps$h = createUseThemeProps();
   var useUtilityClasses$15 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       margin = ownerState.margin,
@@ -31383,7 +31562,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$d({
+    var props = useThemeProps$h({
       props: inProps,
       name: 'MuiFormControl'
     });
@@ -31614,7 +31793,7 @@
       }
     }),
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$G({
+      return useThemeProps$M({
         props: inProps,
         name: 'MuiStack'
       });
@@ -31675,7 +31854,7 @@
   var formControlLabelClasses = generateUtilityClasses$1('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);
   var formControlLabelClasses$1 = formControlLabelClasses;
 
-  var useThemeProps$c = createUseThemeProps();
+  var useThemeProps$g = createUseThemeProps();
   var useUtilityClasses$14 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disabled = ownerState.disabled,
@@ -31762,7 +31941,7 @@
    */
   var FormControlLabel = /*#__PURE__*/React__namespace.forwardRef(function FormControlLabel(inProps, ref) {
     var _ref7, _slotProps$typography;
-    var props = useThemeProps$c({
+    var props = useThemeProps$g({
       props: inProps,
       name: 'MuiFormControlLabel'
     });
@@ -31922,7 +32101,7 @@
   var formGroupClasses = generateUtilityClasses$1('MuiFormGroup', ['root', 'row', 'error']);
   var formGroupClasses$1 = formGroupClasses;
 
-  var useThemeProps$b = createUseThemeProps();
+  var useThemeProps$f = createUseThemeProps();
   var useUtilityClasses$13 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       row = ownerState.row,
@@ -31959,7 +32138,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$b({
+    var props = useThemeProps$f({
       props: inProps,
       name: 'MuiFormGroup'
     });
@@ -32064,7 +32243,7 @@
     });
   });
   var FormHelperText = /*#__PURE__*/React__namespace.forwardRef(function FormHelperText(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiFormHelperText'
     });
@@ -32228,7 +32407,7 @@
     });
   });
   var FormLabel = /*#__PURE__*/React__namespace.forwardRef(function FormLabel(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiFormLabel'
     });
@@ -32687,7 +32866,7 @@
     return composeClasses(slots, getGridUtilityClass, classes);
   };
   var Grid = /*#__PURE__*/React__namespace.forwardRef(function Grid(inProps, ref) {
-    var themeProps = useThemeProps$G({
+    var themeProps = useThemeProps$M({
       props: inProps,
       name: 'MuiGrid'
     });
@@ -32905,7 +33084,7 @@
     }),
     componentName: 'MuiGrid2',
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$G({
+      return useThemeProps$M({
         props: inProps,
         name: 'MuiGrid2'
       });
@@ -33757,7 +33936,7 @@
     };
   });
   var Icon = /*#__PURE__*/React__namespace.forwardRef(function Icon(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiIcon'
     });
@@ -33882,7 +34061,7 @@
     });
   });
   var ImageList = /*#__PURE__*/React__namespace.forwardRef(function ImageList(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiImageList'
     });
@@ -34043,7 +34222,7 @@
     })));
   });
   var ImageListItem = /*#__PURE__*/React__namespace.forwardRef(function ImageListItem(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiImageListItem'
     });
@@ -34271,7 +34450,7 @@
     });
   });
   var ImageListItemBar = /*#__PURE__*/React__namespace.forwardRef(function ImageListItemBar(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiImageListItemBar'
     });
@@ -34445,7 +34624,7 @@
   })({});
   var Input = /*#__PURE__*/React__namespace.forwardRef(function Input(inProps, ref) {
     var _ref3, _slots$root, _ref4, _slots$input;
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiInput'
     });
@@ -34733,7 +34912,7 @@
     });
   });
   var InputAdornment = /*#__PURE__*/React__namespace.forwardRef(function InputAdornment(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiInputAdornment'
     });
@@ -34933,7 +35112,7 @@
     }));
   });
   var InputLabel = /*#__PURE__*/React__namespace.forwardRef(function InputLabel(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       name: 'MuiInputLabel',
       props: inProps
     });
@@ -35049,10 +35228,18 @@
   var linearProgressClasses$1 = linearProgressClasses;
 
   var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5, _templateObject6;
+  var useThemeProps$e = 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"])));
-  var indeterminate2Keyframe = keyframes(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  0% {\n    left: -200%;\n    right: 100%;\n  }\n\n  60% {\n    left: 107%;\n    right: -8%;\n  }\n\n  100% {\n    left: 107%;\n    right: -8%;\n  }\n"])));
-  var bufferKeyframe = keyframes(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 1;\n    background-position: 0 -23px;\n  }\n\n  60% {\n    opacity: 0;\n    background-position: 0 -23px;\n  }\n\n  100% {\n    opacity: 1;\n    background-position: -200px -23px;\n  }\n"])));
+
+  // This implementation is for supporting both Styled-components v4+ and Pigment CSS.
+  // A global animation has to be created here for Styled-components v4+ (https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12).
+  // which can be done by checking typeof indeterminate1Keyframe !== 'string' (at runtime, Pigment CSS transform keyframes`` to a string).
+  var indeterminate1Animation = typeof indeterminate1Keyframe !== 'string' ? css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n        animation: ", " 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n      "])), indeterminate1Keyframe) : null;
+  var indeterminate2Keyframe = keyframes(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  0% {\n    left: -200%;\n    right: 100%;\n  }\n\n  60% {\n    left: 107%;\n    right: -8%;\n  }\n\n  100% {\n    left: 107%;\n    right: -8%;\n  }\n"])));
+  var indeterminate2Animation = typeof indeterminate2Keyframe !== 'string' ? css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n        animation: ", " 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;\n      "])), indeterminate2Keyframe) : null;
+  var bufferKeyframe = keyframes(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 1;\n    background-position: 0 -23px;\n  }\n\n  60% {\n    opacity: 0;\n    background-position: 0 -23px;\n  }\n\n  100% {\n    opacity: 1;\n    background-position: -200px -23px;\n  }\n"])));
+  var bufferAnimation = typeof bufferKeyframe !== 'string' ? css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        animation: ", " 3s infinite linear;\n      "])), bufferKeyframe) : null;
   var useUtilityClasses$T = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       variant = ownerState.variant,
@@ -35066,9 +35253,6 @@
     return composeClasses(slots, getLinearProgressUtilityClass, classes);
   };
   var getColorShade = function getColorShade(theme, color) {
-    if (color === 'inherit') {
-      return 'currentColor';
-    }
     if (theme.vars) {
       return theme.vars.palette.LinearProgress["".concat(color, "Bg")];
     }
@@ -35082,36 +35266,65 @@
       return [styles.root, styles["color".concat(capitalize(ownerState.color))], styles[ownerState.variant]];
     }
   })(function (_ref) {
-    var ownerState = _ref.ownerState,
-      theme = _ref.theme;
-    return _extends({
+    var theme = _ref.theme;
+    return {
       position: 'relative',
       overflow: 'hidden',
       display: 'block',
       height: 4,
-      zIndex: 0,
       // Fix Safari's bug during composition of different paint.
+      zIndex: 0,
       '@media print': {
         colorAdjust: 'exact'
       },
-      backgroundColor: getColorShade(theme, ownerState.color)
-    }, ownerState.color === 'inherit' && ownerState.variant !== 'buffer' && {
-      backgroundColor: 'none',
-      '&::before': {
-        content: '""',
-        position: 'absolute',
-        left: 0,
-        top: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: 'currentColor',
-        opacity: 0.3
-      }
-    }, ownerState.variant === 'buffer' && {
-      backgroundColor: 'transparent'
-    }, ownerState.variant === 'query' && {
-      transform: 'rotate(180deg)'
-    });
+      variants: [].concat(_toConsumableArray(Object.entries(theme.palette).filter(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          value = _ref3[1];
+        return value.main;
+      }).map(function (_ref4) {
+        var _ref5 = _slicedToArray(_ref4, 1),
+          color = _ref5[0];
+        return {
+          props: {
+            color: color
+          },
+          style: {
+            backgroundColor: getColorShade(theme, color)
+          }
+        };
+      })), [{
+        props: function props(_ref6) {
+          var ownerState = _ref6.ownerState;
+          return ownerState.color === 'inherit' && ownerState.variant !== 'buffer';
+        },
+        style: {
+          '&::before': {
+            content: '""',
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'currentColor',
+            opacity: 0.3
+          }
+        }
+      }, {
+        props: {
+          variant: 'buffer'
+        },
+        style: {
+          backgroundColor: 'transparent'
+        }
+      }, {
+        props: {
+          variant: 'query'
+        },
+        style: {
+          transform: 'rotate(180deg)'
+        }
+      }])
+    };
   });
   var LinearProgressDashed = styled$1('span', {
     name: 'MuiLinearProgress',
@@ -35120,23 +35333,45 @@
       var ownerState = props.ownerState;
       return [styles.dashed, styles["dashedColor".concat(capitalize(ownerState.color))]];
     }
-  })(function (_ref2) {
-    var ownerState = _ref2.ownerState,
-      theme = _ref2.theme;
-    var backgroundColor = getColorShade(theme, ownerState.color);
-    return _extends({
+  })(function (_ref7) {
+    var theme = _ref7.theme;
+    return {
       position: 'absolute',
       marginTop: 0,
       height: '100%',
-      width: '100%'
-    }, ownerState.color === 'inherit' && {
-      opacity: 0.3
-    }, {
-      backgroundImage: "radial-gradient(".concat(backgroundColor, " 0%, ").concat(backgroundColor, " 16%, transparent 42%)"),
+      width: '100%',
       backgroundSize: '10px 10px',
-      backgroundPosition: '0 -23px'
-    });
-  }, css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n    animation: ", " 3s infinite linear;\n  "])), bufferKeyframe));
+      backgroundPosition: '0 -23px',
+      variants: [{
+        props: {
+          color: 'inherit'
+        },
+        style: {
+          opacity: 0.3,
+          backgroundImage: "radial-gradient(currentColor 0%, currentColor 16%, transparent 42%)"
+        }
+      }].concat(_toConsumableArray(Object.entries(theme.palette).filter(function (_ref8) {
+        var _ref9 = _slicedToArray(_ref8, 2),
+          value = _ref9[1];
+        return value.main;
+      }).map(function (_ref10) {
+        var _ref11 = _slicedToArray(_ref10, 1),
+          color = _ref11[0];
+        var backgroundColor = getColorShade(theme, color);
+        return {
+          props: {
+            color: color
+          },
+          style: {
+            backgroundImage: "radial-gradient(".concat(backgroundColor, " 0%, ").concat(backgroundColor, " 16%, transparent 42%)")
+          }
+        };
+      })))
+    };
+  }, bufferAnimation || {
+    // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
+    animation: "".concat(bufferKeyframe, " 3s infinite linear")
+  });
   var LinearProgressBar1 = styled$1('span', {
     name: 'MuiLinearProgress',
     slot: 'Bar1',
@@ -35144,10 +35379,9 @@
       var ownerState = props.ownerState;
       return [styles.bar, styles["barColor".concat(capitalize(ownerState.color))], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
     }
-  })(function (_ref3) {
-    var ownerState = _ref3.ownerState,
-      theme = _ref3.theme;
-    return _extends({
+  })(function (_ref12) {
+    var theme = _ref12.theme;
+    return {
       width: '100%',
       position: 'absolute',
       left: 0,
@@ -35155,16 +35389,61 @@
       top: 0,
       transition: 'transform 0.2s linear',
       transformOrigin: 'left',
-      backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
-    }, ownerState.variant === 'determinate' && {
-      transition: "transform .".concat(TRANSITION_DURATION, "s linear")
-    }, ownerState.variant === 'buffer' && {
-      zIndex: 1,
-      transition: "transform .".concat(TRANSITION_DURATION, "s linear")
-    });
-  }, function (_ref4) {
-    var ownerState = _ref4.ownerState;
-    return (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      width: auto;\n      animation: ", " 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    "])), indeterminate1Keyframe);
+      variants: [{
+        props: {
+          color: 'inherit'
+        },
+        style: {
+          backgroundColor: 'currentColor'
+        }
+      }].concat(_toConsumableArray(Object.entries(theme.palette).filter(function (_ref13) {
+        var _ref14 = _slicedToArray(_ref13, 2),
+          value = _ref14[1];
+        return value.main;
+      }).map(function (_ref15) {
+        var _ref16 = _slicedToArray(_ref15, 1),
+          color = _ref16[0];
+        return {
+          props: {
+            color: color
+          },
+          style: {
+            backgroundColor: (theme.vars || theme).palette[color].main
+          }
+        };
+      })), [{
+        props: {
+          variant: 'determinate'
+        },
+        style: {
+          transition: "transform .".concat(TRANSITION_DURATION, "s linear")
+        }
+      }, {
+        props: {
+          variant: 'buffer'
+        },
+        style: {
+          zIndex: 1,
+          transition: "transform .".concat(TRANSITION_DURATION, "s linear")
+        }
+      }, {
+        props: function props(_ref17) {
+          var ownerState = _ref17.ownerState;
+          return ownerState.variant === 'indeterminate' || ownerState.variant === 'query';
+        },
+        style: {
+          width: 'auto'
+        }
+      }, {
+        props: function props(_ref18) {
+          var ownerState = _ref18.ownerState;
+          return ownerState.variant === 'indeterminate' || ownerState.variant === 'query';
+        },
+        style: indeterminate1Animation || {
+          animation: "".concat(indeterminate1Keyframe, " 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite")
+        }
+      }])
+    };
   });
   var LinearProgressBar2 = styled$1('span', {
     name: 'MuiLinearProgress',
@@ -35173,28 +35452,81 @@
       var ownerState = props.ownerState;
       return [styles.bar, styles["barColor".concat(capitalize(ownerState.color))], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
     }
-  })(function (_ref5) {
-    var ownerState = _ref5.ownerState,
-      theme = _ref5.theme;
-    return _extends({
+  })(function (_ref19) {
+    var theme = _ref19.theme;
+    return {
       width: '100%',
       position: 'absolute',
       left: 0,
       bottom: 0,
       top: 0,
       transition: 'transform 0.2s linear',
-      transformOrigin: 'left'
-    }, ownerState.variant !== 'buffer' && {
-      backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
-    }, ownerState.color === 'inherit' && {
-      opacity: 0.3
-    }, ownerState.variant === 'buffer' && {
-      backgroundColor: getColorShade(theme, ownerState.color),
-      transition: "transform .".concat(TRANSITION_DURATION, "s linear")
-    });
-  }, function (_ref6) {
-    var ownerState = _ref6.ownerState;
-    return (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      width: auto;\n      animation: ", " 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;\n    "])), indeterminate2Keyframe);
+      transformOrigin: 'left',
+      variants: [].concat(_toConsumableArray(Object.entries(theme.palette).filter(function (_ref20) {
+        var _ref21 = _slicedToArray(_ref20, 2),
+          value = _ref21[1];
+        return value.main;
+      }).map(function (_ref22) {
+        var _ref23 = _slicedToArray(_ref22, 1),
+          color = _ref23[0];
+        return {
+          props: {
+            color: color
+          },
+          style: {
+            '--LinearProgressBar2-barColor': (theme.vars || theme).palette[color].main
+          }
+        };
+      })), [{
+        props: function props(_ref24) {
+          var ownerState = _ref24.ownerState;
+          return ownerState.variant !== 'buffer' && ownerState.color !== 'inherit';
+        },
+        style: {
+          backgroundColor: 'var(--LinearProgressBar2-barColor, currentColor)'
+        }
+      }, {
+        props: {
+          color: 'inherit'
+        },
+        style: {
+          opacity: 0.3
+        }
+      }], _toConsumableArray(Object.entries(theme.palette).filter(function (_ref25) {
+        var _ref26 = _slicedToArray(_ref25, 2),
+          value = _ref26[1];
+        return value.main;
+      }).map(function (_ref27) {
+        var _ref28 = _slicedToArray(_ref27, 1),
+          color = _ref28[0];
+        return {
+          props: {
+            color: color,
+            variant: 'buffer'
+          },
+          style: {
+            backgroundColor: getColorShade(theme, color),
+            transition: "transform .".concat(TRANSITION_DURATION, "s linear")
+          }
+        };
+      })), [{
+        props: function props(_ref29) {
+          var ownerState = _ref29.ownerState;
+          return ownerState.variant === 'indeterminate' || ownerState.variant === 'query';
+        },
+        style: {
+          width: 'auto'
+        }
+      }, {
+        props: function props(_ref30) {
+          var ownerState = _ref30.ownerState;
+          return ownerState.variant === 'indeterminate' || ownerState.variant === 'query';
+        },
+        style: indeterminate2Animation || {
+          animation: "".concat(indeterminate2Keyframe, " 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite")
+        }
+      }])
+    };
   });
 
   /**
@@ -35205,7 +35537,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$G({
+    var props = useThemeProps$e({
       props: inProps,
       name: 'MuiLinearProgress'
     });
@@ -35412,7 +35744,7 @@
     }));
   });
   var Link = /*#__PURE__*/React__namespace.forwardRef(function Link(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiLink'
     });
@@ -35583,7 +35915,7 @@
     });
   });
   var List = /*#__PURE__*/React__namespace.forwardRef(function List(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiList'
     });
@@ -35756,7 +36088,7 @@
     });
   });
   var ListItemButton = /*#__PURE__*/React__namespace.forwardRef(function ListItemButton(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiListItemButton'
     });
@@ -35939,7 +36271,7 @@
    * 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$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiListItemSecondaryAction'
     });
@@ -36084,7 +36416,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$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiListItem'
     });
@@ -36418,7 +36750,7 @@
    * A simple wrapper to apply `List` styles to an `Avatar`.
    */
   var ListItemAvatar = /*#__PURE__*/React__namespace.forwardRef(function ListItemAvatar(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiListItemAvatar'
     });
@@ -36497,7 +36829,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$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiListItemIcon'
     });
@@ -36580,7 +36912,7 @@
     });
   });
   var ListItemText = /*#__PURE__*/React__namespace.forwardRef(function ListItemText(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiListItemText'
     });
@@ -36970,7 +37302,7 @@
   var popoverClasses = generateUtilityClasses$1('MuiPopover', ['root', 'paper']);
   var popoverClasses$1 = popoverClasses;
 
-  var useThemeProps$a = createUseThemeProps();
+  var useThemeProps$d = createUseThemeProps();
   function getOffsetTop(rect, vertical) {
     var offset = 0;
     if (typeof vertical === 'number') {
@@ -37037,7 +37369,7 @@
   });
   var Popover = /*#__PURE__*/React__namespace.forwardRef(function Popover(inProps, ref) {
     var _slotProps$paper, _slots$root, _slots$paper;
-    var props = useThemeProps$a({
+    var props = useThemeProps$d({
       props: inProps,
       name: 'MuiPopover'
     });
@@ -37554,7 +37886,7 @@
   });
   var Menu = /*#__PURE__*/React__namespace.forwardRef(function Menu(inProps, ref) {
     var _slots$paper, _slotProps$paper;
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiMenu'
     });
@@ -37898,7 +38230,7 @@
     })));
   });
   var MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiMenuItem'
     });
@@ -38044,7 +38376,7 @@
   var mobileStepperClasses = generateUtilityClasses$1('MuiMobileStepper', ['root', 'positionBottom', 'positionTop', 'positionStatic', 'dots', 'dot', 'dotActive', 'progress']);
   var mobileStepperClasses$1 = mobileStepperClasses;
 
-  var useThemeProps$9 = createUseThemeProps();
+  var useThemeProps$c = createUseThemeProps();
   var useUtilityClasses$H = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       position = ownerState.position;
@@ -38173,7 +38505,7 @@
     }]
   });
   var MobileStepper = /*#__PURE__*/React__namespace.forwardRef(function MobileStepper(inProps, ref) {
-    var props = useThemeProps$9({
+    var props = useThemeProps$c({
       props: inProps,
       name: 'MuiMobileStepper'
     });
@@ -38490,7 +38822,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$G({
+    var props = useThemeProps$M({
       name: 'MuiNativeSelect',
       props: inProps
     });
@@ -38815,7 +39147,7 @@
   });
   var OutlinedInput = /*#__PURE__*/React__namespace.forwardRef(function OutlinedInput(inProps, ref) {
     var _ref5, _slots$root, _ref6, _slots$input, _React$Fragment;
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiOutlinedInput'
     });
@@ -39194,6 +39526,7 @@
     d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
   }), 'NavigateNext');
 
+  var useThemeProps$b = 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];
@@ -39226,9 +39559,8 @@
     slot: 'Root',
     overridesResolver: overridesResolver
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    return _extends({}, theme.typography.body2, _defineProperty({
+    var theme = _ref.theme;
+    return _extends({}, theme.typography.body2, _defineProperty(_defineProperty({
       borderRadius: 32 / 2,
       textAlign: 'center',
       boxSizing: 'border-box',
@@ -39239,26 +39571,35 @@
       height: 'auto'
     }, "&.".concat(paginationItemClasses$1.disabled), {
       opacity: (theme.vars || theme).palette.action.disabledOpacity
-    }), ownerState.size === 'small' && {
-      minWidth: 26,
-      borderRadius: 26 / 2,
-      margin: '0 1px',
-      padding: '0 4px'
-    }, ownerState.size === 'large' && {
-      minWidth: 40,
-      borderRadius: 40 / 2,
-      padding: '0 10px',
-      fontSize: theme.typography.pxToRem(15)
-    });
+    }), "variants", [{
+      props: {
+        size: 'small'
+      },
+      style: {
+        minWidth: 26,
+        borderRadius: 26 / 2,
+        margin: '0 1px',
+        padding: '0 4px'
+      }
+    }, {
+      props: {
+        size: 'large'
+      },
+      style: {
+        minWidth: 40,
+        borderRadius: 40 / 2,
+        padding: '0 10px',
+        fontSize: theme.typography.pxToRem(15)
+      }
+    }]));
   });
   var PaginationItemPage = styled$1(ButtonBase$1, {
     name: 'MuiPaginationItem',
     slot: 'Root',
     overridesResolver: overridesResolver
   })(function (_ref2) {
-    var theme = _ref2.theme,
-      ownerState = _ref2.ownerState;
-    return _extends({}, theme.typography.body2, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    var theme = _ref2.theme;
+    return _extends({}, theme.typography.body2, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
       borderRadius: 32 / 2,
       textAlign: 'center',
       boxSizing: 'border-box',
@@ -39294,57 +39635,108 @@
       opacity: 1,
       color: (theme.vars || theme).palette.action.disabled,
       backgroundColor: (theme.vars || theme).palette.action.selected
-    })), ownerState.size === 'small' && {
-      minWidth: 26,
-      height: 26,
-      borderRadius: 26 / 2,
-      margin: '0 1px',
-      padding: '0 4px'
-    }, ownerState.size === 'large' && {
-      minWidth: 40,
-      height: 40,
-      borderRadius: 40 / 2,
-      padding: '0 10px',
-      fontSize: theme.typography.pxToRem(15)
-    }, ownerState.shape === 'rounded' && {
-      borderRadius: (theme.vars || theme).shape.borderRadius
-    });
-  }, function (_ref3) {
-    var theme = _ref3.theme,
-      ownerState = _ref3.ownerState;
-    return _extends({}, ownerState.variant === 'text' && _defineProperty({}, "&.".concat(paginationItemClasses$1.selected), _extends({}, ownerState.color !== 'standard' && _defineProperty({
-      color: (theme.vars || theme).palette[ownerState.color].contrastText,
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
-      '&:hover': {
-        backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-        }
+    })), "variants", [{
+      props: {
+        size: 'small'
+      },
+      style: {
+        minWidth: 26,
+        height: 26,
+        borderRadius: 26 / 2,
+        margin: '0 1px',
+        padding: '0 4px'
       }
-    }, "&.".concat(paginationItemClasses$1.focusVisible), {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
-    }), _defineProperty({}, "&.".concat(paginationItemClasses$1.disabled), {
-      color: (theme.vars || theme).palette.action.disabled
-    }))), ownerState.variant === 'outlined' && _defineProperty({
-      border: theme.vars ? "1px solid rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
-    }, "&.".concat(paginationItemClasses$1.selected), _extends({}, ownerState.color !== 'standard' && _defineProperty({
-      color: (theme.vars || theme).palette[ownerState.color].main,
-      border: "1px solid ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.5)") : alpha(theme.palette[ownerState.color].main, 0.5)),
-      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.activatedOpacity, ")") : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity),
-      '&:hover': {
-        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / calc(").concat(theme.vars.palette.action.activatedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
+    }, {
+      props: {
+        size: 'large'
+      },
+      style: {
+        minWidth: 40,
+        height: 40,
+        borderRadius: 40 / 2,
+        padding: '0 10px',
+        fontSize: theme.typography.pxToRem(15)
       }
-    }, "&.".concat(paginationItemClasses$1.focusVisible), {
-      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / calc(").concat(theme.vars.palette.action.activatedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
-    }), _defineProperty({}, "&.".concat(paginationItemClasses$1.disabled), {
-      borderColor: (theme.vars || theme).palette.action.disabledBackground,
-      color: (theme.vars || theme).palette.action.disabled
-    }))));
+    }, {
+      props: {
+        shape: 'rounded'
+      },
+      style: {
+        borderRadius: (theme.vars || theme).shape.borderRadius
+      }
+    }, {
+      props: {
+        variant: 'outlined'
+      },
+      style: _defineProperty({
+        border: theme.vars ? "1px solid rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
+      }, "&.".concat(paginationItemClasses$1.selected), _defineProperty({}, "&.".concat(paginationItemClasses$1.disabled), {
+        borderColor: (theme.vars || theme).palette.action.disabledBackground,
+        color: (theme.vars || theme).palette.action.disabled
+      }))
+    }, {
+      props: {
+        variant: 'text'
+      },
+      style: _defineProperty({}, "&.".concat(paginationItemClasses$1.selected), _defineProperty({}, "&.".concat(paginationItemClasses$1.disabled), {
+        color: (theme.vars || theme).palette.action.disabled
+      }))
+    }].concat(_toConsumableArray(Object.entries(theme.palette).filter(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        value = _ref4[1];
+      return value.main && value.dark && value.contrastText;
+    }).map(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 1),
+        color = _ref6[0];
+      return {
+        props: {
+          variant: 'text',
+          color: color
+        },
+        style: _defineProperty({}, "&.".concat(paginationItemClasses$1.selected), _defineProperty(_defineProperty({
+          color: (theme.vars || theme).palette[color].contrastText,
+          backgroundColor: (theme.vars || theme).palette[color].main,
+          '&:hover': {
+            backgroundColor: (theme.vars || theme).palette[color].dark,
+            // Reset on touch devices, it doesn't add specificity
+            '@media (hover: none)': {
+              backgroundColor: (theme.vars || theme).palette[color].main
+            }
+          }
+        }, "&.".concat(paginationItemClasses$1.focusVisible), {
+          backgroundColor: (theme.vars || theme).palette[color].dark
+        }), "&.".concat(paginationItemClasses$1.disabled), {
+          color: (theme.vars || theme).palette.action.disabled
+        }))
+      };
+    })), _toConsumableArray(Object.entries(theme.palette).filter(function (_ref7) {
+      var _ref8 = _slicedToArray(_ref7, 2),
+        value = _ref8[1];
+      return value.main && value.light;
+    }).map(function (_ref9) {
+      var _ref10 = _slicedToArray(_ref9, 1),
+        color = _ref10[0];
+      return {
+        props: {
+          variant: 'outlined',
+          color: color
+        },
+        style: _defineProperty({}, "&.".concat(paginationItemClasses$1.selected), _defineProperty({
+          color: (theme.vars || theme).palette[color].main,
+          border: "1px solid ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.5)") : alpha(theme.palette[color].main, 0.5)),
+          backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / ").concat(theme.vars.palette.action.activatedOpacity, ")") : alpha(theme.palette[color].main, theme.palette.action.activatedOpacity),
+          '&:hover': {
+            backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / calc(").concat(theme.vars.palette.action.activatedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette[color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity),
+            // Reset on touch devices, it doesn't add specificity
+            '@media (hover: none)': {
+              backgroundColor: 'transparent'
+            }
+          }
+        }, "&.".concat(paginationItemClasses$1.focusVisible), {
+          backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / calc(").concat(theme.vars.palette.action.activatedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette[color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
+        }))
+      };
+    })))));
   });
   var PaginationItemPageIcon = styled$1('div', {
     name: 'MuiPaginationItem',
@@ -39352,20 +39744,30 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.icon;
     }
-  })(function (_ref8) {
-    var theme = _ref8.theme,
-      ownerState = _ref8.ownerState;
-    return _extends({
+  })(function (_ref11) {
+    var theme = _ref11.theme;
+    return {
       fontSize: theme.typography.pxToRem(20),
-      margin: '0 -8px'
-    }, ownerState.size === 'small' && {
-      fontSize: theme.typography.pxToRem(18)
-    }, ownerState.size === 'large' && {
-      fontSize: theme.typography.pxToRem(22)
-    });
+      margin: '0 -8px',
+      variants: [{
+        props: {
+          size: 'small'
+        },
+        style: {
+          fontSize: theme.typography.pxToRem(18)
+        }
+      }, {
+        props: {
+          size: 'large'
+        },
+        style: {
+          fontSize: theme.typography.pxToRem(22)
+        }
+      }]
+    };
   });
   var PaginationItem = /*#__PURE__*/React__namespace.forwardRef(function PaginationItem(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiPaginationItem'
     });
@@ -39568,7 +39970,7 @@
     return "Go to ".concat(type, " page");
   }
   var Pagination = /*#__PURE__*/React__namespace.forwardRef(function Pagination(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiPagination'
     });
@@ -39923,7 +40325,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$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiRadio'
     });
@@ -40426,7 +40828,7 @@
     return "".concat(value, " Star").concat(value !== 1 ? 's' : '');
   }
   var Rating = /*#__PURE__*/React__namespace.forwardRef(function Rating(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       name: 'MuiRating',
       props: inProps
     });
@@ -40867,7 +41269,7 @@
     }, colorSchemeStyles);
   });
   var ScopedCssBaseline = /*#__PURE__*/React__namespace.forwardRef(function ScopedCssBaseline(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiScopedCssBaseline'
     });
@@ -41589,7 +41991,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$G({
+    var props = useThemeProps$M({
       name: 'MuiSelect',
       props: inProps
     });
@@ -41912,7 +42314,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$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiSkeleton'
     });
@@ -42054,7 +42456,7 @@
     value: PropTypes.node
   } ;
 
-  var useThemeProps$8 = createUseThemeProps();
+  var useThemeProps$a = createUseThemeProps();
   function Identity(x) {
     return x;
   }
@@ -42581,7 +42983,7 @@
   };
   var Slider = /*#__PURE__*/React__namespace.forwardRef(function Slider(inputProps, ref) {
     var _ref10, _slots$root, _ref11, _slots$rail, _ref12, _slots$track, _ref13, _slots$thumb, _ref14, _slots$valueLabel, _ref15, _slots$mark, _ref16, _slots$markLabel, _ref17, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
-    var props = useThemeProps$8({
+    var props = useThemeProps$a({
       props: inputProps,
       name: 'MuiSlider'
     });
@@ -43158,7 +43560,7 @@
     marginRight: -8
   });
   var SnackbarContent = /*#__PURE__*/React__namespace.forwardRef(function SnackbarContent(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiSnackbarContent'
     });
@@ -43280,7 +43682,7 @@
     })));
   });
   var Snackbar = /*#__PURE__*/React__namespace.forwardRef(function Snackbar(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiSnackbar'
     });
@@ -43815,7 +44217,7 @@
     });
   });
   var SpeedDial = /*#__PURE__*/React__namespace.forwardRef(function SpeedDial(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiSpeedDial'
     });
@@ -44377,7 +44779,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$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiTooltip'
     });
@@ -44599,8 +45001,7 @@
        * @param {KeyboardEvent} nativeEvent
        */
       function handleKeyDown(nativeEvent) {
-        // IE11, Edge (prior to using Bink?) use 'Esc'
-        if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
+        if (nativeEvent.key === 'Escape') {
           handleClose(nativeEvent);
         }
       }
@@ -45050,7 +45451,7 @@
     });
   });
   var SpeedDialAction = /*#__PURE__*/React__namespace.forwardRef(function SpeedDialAction(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiSpeedDialAction'
     });
@@ -45244,7 +45645,7 @@
     }));
   });
   var SpeedDialIcon = /*#__PURE__*/React__namespace.forwardRef(function SpeedDialIcon(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiSpeedDialIcon'
     });
@@ -45347,7 +45748,7 @@
   var stepClasses = generateUtilityClasses$1('MuiStep', ['root', 'horizontal', 'vertical', 'alternativeLabel', 'completed']);
   var stepClasses$1 = stepClasses;
 
-  var useThemeProps$7 = createUseThemeProps();
+  var useThemeProps$9 = createUseThemeProps();
   var useUtilityClasses$n = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       orientation = ownerState.orientation,
@@ -45385,7 +45786,7 @@
     }]
   });
   var Step = /*#__PURE__*/React__namespace.forwardRef(function Step(inProps, ref) {
-    var props = useThemeProps$7({
+    var props = useThemeProps$9({
       props: inProps,
       name: 'MuiStep'
     });
@@ -45528,7 +45929,7 @@
   var stepIconClasses$1 = stepIconClasses;
 
   var _circle;
-  var useThemeProps$6 = createUseThemeProps();
+  var useThemeProps$8 = createUseThemeProps();
   var useUtilityClasses$m = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       active = ownerState.active,
@@ -45577,7 +45978,7 @@
     };
   });
   var StepIcon = /*#__PURE__*/React__namespace.forwardRef(function StepIcon(inProps, ref) {
-    var props = useThemeProps$6({
+    var props = useThemeProps$8({
       props: inProps,
       name: 'MuiStepIcon'
     });
@@ -45681,7 +46082,7 @@
   var stepLabelClasses = generateUtilityClasses$1('MuiStepLabel', ['root', 'horizontal', 'vertical', 'label', 'active', 'completed', 'error', 'disabled', 'iconContainer', 'alternativeLabel', 'labelContainer']);
   var stepLabelClasses$1 = stepLabelClasses;
 
-  var useThemeProps$5 = createUseThemeProps();
+  var useThemeProps$7 = createUseThemeProps();
   var useUtilityClasses$l = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       orientation = ownerState.orientation,
@@ -45776,7 +46177,7 @@
     });
   });
   var StepLabel = /*#__PURE__*/React__namespace.forwardRef(function StepLabel(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$7({
       props: inProps,
       name: 'MuiStepLabel'
     });
@@ -45819,7 +46220,9 @@
     var classes = useUtilityClasses$l(ownerState);
     var externalForwardedProps = {
       slots: slots,
-      slotProps: _extends({}, componentsProps, slotProps)
+      slotProps: _extends({
+        stepIcon: StepIconProps
+      }, componentsProps, slotProps)
     };
     var _useSlot = useSlot('label', {
         elementType: StepLabelLabel,
@@ -45829,20 +46232,28 @@
       _useSlot2 = _slicedToArray(_useSlot, 2),
       LabelSlot = _useSlot2[0],
       labelProps = _useSlot2[1];
+    var _useSlot3 = useSlot('stepIcon', {
+        elementType: StepIconComponent,
+        externalForwardedProps: externalForwardedProps,
+        ownerState: ownerState
+      }),
+      _useSlot4 = _slicedToArray(_useSlot3, 2),
+      StepIconSlot = _useSlot4[0],
+      stepIconProps = _useSlot4[1];
     return /*#__PURE__*/jsxRuntime_2(StepLabelRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other, {
-      children: [icon || StepIconComponent ? /*#__PURE__*/jsxRuntime_1(StepLabelIconContainer, {
+      children: [icon || StepIconSlot ? /*#__PURE__*/jsxRuntime_1(StepLabelIconContainer, {
         className: classes.iconContainer,
         ownerState: ownerState,
-        children: /*#__PURE__*/jsxRuntime_1(StepIconComponent, _extends({
+        children: /*#__PURE__*/jsxRuntime_1(StepIconSlot, _extends({
           completed: completed,
           active: active,
           error: error,
           icon: icon
-        }, StepIconProps))
+        }, stepIconProps))
       }) : null, /*#__PURE__*/jsxRuntime_2(StepLabelLabelContainer, {
         className: classes.labelContainer,
         ownerState: ownerState,
@@ -45896,21 +46307,25 @@
      * @default {}
      */
     slotProps: PropTypes.shape({
-      label: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+      label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      stepIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
     }),
     /**
      * The components used for each slot inside.
      * @default {}
      */
     slots: PropTypes.shape({
-      label: PropTypes.elementType
+      label: PropTypes.elementType,
+      stepIcon: PropTypes.elementType
     }),
     /**
      * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
+     * @deprecated Use `slots.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
      */
     StepIconComponent: PropTypes.elementType,
     /**
      * Props applied to the [`StepIcon`](/material-ui/api/step-icon/) element.
+     * @deprecated Use `slotProps.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
      */
     StepIconProps: PropTypes.object,
     /**
@@ -45929,7 +46344,7 @@
   var stepButtonClasses = generateUtilityClasses$1('MuiStepButton', ['root', 'horizontal', 'vertical', 'touchRipple']);
   var stepButtonClasses$1 = stepButtonClasses;
 
-  var useThemeProps$4 = createUseThemeProps();
+  var useThemeProps$6 = createUseThemeProps();
   var useUtilityClasses$k = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       orientation = ownerState.orientation;
@@ -45964,7 +46379,7 @@
     }
   }]));
   var StepButton = /*#__PURE__*/React__namespace.forwardRef(function StepButton(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$6({
       props: inProps,
       name: 'MuiStepButton'
     });
@@ -46041,7 +46456,7 @@
   var stepConnectorClasses = generateUtilityClasses$1('MuiStepConnector', ['root', 'horizontal', 'vertical', 'alternativeLabel', 'active', 'completed', 'disabled', 'line', 'lineHorizontal', 'lineVertical']);
   var stepConnectorClasses$1 = stepConnectorClasses;
 
-  var useThemeProps$3 = createUseThemeProps();
+  var useThemeProps$5 = createUseThemeProps();
   var useUtilityClasses$j = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       orientation = ownerState.orientation,
@@ -46117,7 +46532,7 @@
     };
   });
   var StepConnector = /*#__PURE__*/React__namespace.forwardRef(function StepConnector(inProps, ref) {
-    var props = useThemeProps$3({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiStepConnector'
     });
@@ -46176,7 +46591,7 @@
   var stepContentClasses = generateUtilityClasses$1('MuiStepContent', ['root', 'last', 'transition']);
   var stepContentClasses$1 = stepContentClasses;
 
-  var useThemeProps$2 = createUseThemeProps();
+  var useThemeProps$4 = createUseThemeProps();
   var useUtilityClasses$i = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       last = ownerState.last;
@@ -46220,7 +46635,7 @@
     }
   })({});
   var StepContent = /*#__PURE__*/React__namespace.forwardRef(function StepContent(inProps, ref) {
-    var props = useThemeProps$2({
+    var props = useThemeProps$4({
       props: inProps,
       name: 'MuiStepContent'
     });
@@ -46321,7 +46736,7 @@
   var stepperClasses = generateUtilityClasses$1('MuiStepper', ['root', 'horizontal', 'vertical', 'alternativeLabel']);
   var stepperClasses$1 = stepperClasses;
 
-  var useThemeProps$1 = createUseThemeProps();
+  var useThemeProps$3 = createUseThemeProps();
   var useUtilityClasses$h = function useUtilityClasses(ownerState) {
     var orientation = ownerState.orientation,
       alternativeLabel = ownerState.alternativeLabel,
@@ -46366,7 +46781,7 @@
   });
   var defaultConnector = /*#__PURE__*/jsxRuntime_1(StepConnector$1, {});
   var Stepper = /*#__PURE__*/React__namespace.forwardRef(function Stepper(inProps, ref) {
-    var props = useThemeProps$1({
+    var props = useThemeProps$3({
       props: inProps,
       name: 'MuiStepper'
     });
@@ -46632,7 +47047,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$H({
+    var props = useThemeProps$N({
       name: 'MuiSwipeableDrawer',
       props: inProps
     });
@@ -47143,7 +47558,7 @@
   var switchClasses = generateUtilityClasses$1('MuiSwitch', ['root', 'edgeStart', 'edgeEnd', 'switchBase', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium', 'checked', 'disabled', 'input', 'thumb', 'track']);
   var switchClasses$1 = switchClasses;
 
-  var useThemeProps = createUseThemeProps();
+  var useThemeProps$2 = createUseThemeProps();
   var useUtilityClasses$g = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       edge = ownerState.edge,
@@ -47323,7 +47738,7 @@
     };
   });
   var Switch = /*#__PURE__*/React__namespace.forwardRef(function Switch(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$2({
       props: inProps,
       name: 'MuiSwitch'
     });
@@ -47548,7 +47963,7 @@
     });
   });
   var Tab = /*#__PURE__*/React__namespace.forwardRef(function Tab(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiTab'
     });
@@ -47752,7 +48167,7 @@
   });
   var defaultComponent$4 = 'table';
   var Table = /*#__PURE__*/React__namespace.forwardRef(function Table(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiTable'
     });
@@ -47871,7 +48286,7 @@
   };
   var defaultComponent$3 = 'tbody';
   var TableBody = /*#__PURE__*/React__namespace.forwardRef(function TableBody(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiTableBody'
     });
@@ -48006,7 +48421,7 @@
    * or otherwise a `<td>` element.
    */
   var TableCell = /*#__PURE__*/React__namespace.forwardRef(function TableCell(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiTableCell'
     });
@@ -48145,7 +48560,7 @@
     overflowX: 'auto'
   });
   var TableContainer = /*#__PURE__*/React__namespace.forwardRef(function TableContainer(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiTableContainer'
     });
@@ -48220,7 +48635,7 @@
   };
   var defaultComponent$2 = 'tfoot';
   var TableFooter = /*#__PURE__*/React__namespace.forwardRef(function TableFooter(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiTableFooter'
     });
@@ -48299,7 +48714,7 @@
   };
   var defaultComponent$1 = 'thead';
   var TableHead = /*#__PURE__*/React__namespace.forwardRef(function TableHead(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiTableHead'
     });
@@ -48395,7 +48810,7 @@
     return ownerState.variant === 'regular' && theme.mixins.toolbar;
   });
   var Toolbar = /*#__PURE__*/React__namespace.forwardRef(function Toolbar(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiToolbar'
     });
@@ -48769,7 +49184,7 @@
    */
   var TablePagination = /*#__PURE__*/React__namespace.forwardRef(function TablePagination(inProps, ref) {
     var _slotProps$select;
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiTablePagination'
     });
@@ -49125,7 +49540,7 @@
    * based on the material table element parent (head, body, etc).
    */
   var TableRow = /*#__PURE__*/React__namespace.forwardRef(function TableRow(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiTableRow'
     });
@@ -49273,7 +49688,7 @@
    * A button based label for placing inside `TableCell` for column sorting.
    */
   var TableSortLabel = /*#__PURE__*/React__namespace.forwardRef(function TableSortLabel(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiTableSortLabel'
     });
@@ -49484,7 +49899,7 @@
   });
   var TabScrollButton = /*#__PURE__*/React__namespace.forwardRef(function TabScrollButton(inProps, ref) {
     var _slots$StartScrollBut, _slots$EndScrollButto;
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiTabScrollButton'
     });
@@ -49761,7 +50176,7 @@
   var defaultIndicatorStyle = {};
   var warnedOnceTabPresent = false;
   var Tabs = /*#__PURE__*/React__namespace.forwardRef(function Tabs(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiTabs'
     });
@@ -50472,7 +50887,7 @@
    * - using the underlying components directly as shown in the demos
    */
   var TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps$M({
       props: inProps,
       name: 'MuiTextField'
     });
@@ -50816,6 +51231,7 @@
     return value === candidate;
   }
 
+  var useThemeProps$1 = createUseThemeProps();
   var useUtilityClasses$1 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       fullWidth = ownerState.fullWidth,
@@ -50836,22 +51252,13 @@
       return [styles.root, styles["size".concat(capitalize(ownerState.size))]];
     }
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    var selectedColor = ownerState.color === 'standard' ? theme.palette.text.primary : theme.palette[ownerState.color].main;
-    var selectedColorChannel;
-    if (theme.vars) {
-      selectedColor = ownerState.color === 'standard' ? theme.vars.palette.text.primary : theme.vars.palette[ownerState.color].main;
-      selectedColorChannel = ownerState.color === 'standard' ? theme.vars.palette.text.primaryChannel : theme.vars.palette[ownerState.color].mainChannel;
-    }
-    return _extends({}, theme.typography.button, {
+    var theme = _ref.theme;
+    return _extends({}, theme.typography.button, _defineProperty(_defineProperty(_defineProperty({
       borderRadius: (theme.vars || theme).shape.borderRadius,
       padding: 11,
       border: "1px solid ".concat((theme.vars || theme).palette.divider),
       color: (theme.vars || theme).palette.action.active
-    }, ownerState.fullWidth && {
-      width: '100%'
-    }, _defineProperty(_defineProperty(_defineProperty({}, "&.".concat(toggleButtonClasses$1.disabled), {
+    }, "&.".concat(toggleButtonClasses$1.disabled), {
       color: (theme.vars || theme).palette.action.disabled,
       border: "1px solid ".concat((theme.vars || theme).palette.action.disabledBackground)
     }), '&:hover', {
@@ -50861,23 +51268,64 @@
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
-    }), "&.".concat(toggleButtonClasses$1.selected), {
-      color: selectedColor,
-      backgroundColor: theme.vars ? "rgba(".concat(selectedColorChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(selectedColor, theme.palette.action.selectedOpacity),
-      '&:hover': {
-        backgroundColor: theme.vars ? "rgba(".concat(selectedColorChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(selectedColor, 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(selectedColorChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(selectedColor, theme.palette.action.selectedOpacity)
+    }), "variants", [{
+      props: {
+        color: 'standard'
+      },
+      style: _defineProperty({}, "&.".concat(toggleButtonClasses$1.selected), {
+        color: (theme.vars || theme).palette.text.primary,
+        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.text.primary, theme.palette.action.selectedOpacity),
+        '&:hover': {
+          backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette.text.primary, 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.text.primaryChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.text.primary, theme.palette.action.selectedOpacity)
+          }
         }
+      })
+    }].concat(_toConsumableArray(Object.keys((theme.vars || theme).palette).filter(function (key) {
+      return theme.vars ? theme.vars.palette[key].main && theme.vars.palette[key].mainChannel : theme.palette[key].main;
+    }).map(function (color) {
+      return {
+        props: {
+          color: color
+        },
+        style: _defineProperty({}, "&.".concat(toggleButtonClasses$1.selected), {
+          color: (theme.vars || theme).palette[color].main,
+          backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette[color].main, theme.palette.action.selectedOpacity),
+          '&:hover': {
+            backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette[color].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[color].mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette[color].main, theme.palette.action.selectedOpacity)
+            }
+          }
+        })
+      };
+    })), [{
+      props: {
+        fullWidth: true
+      },
+      style: {
+        width: '100%'
       }
-    }), ownerState.size === 'small' && {
-      padding: 7,
-      fontSize: theme.typography.pxToRem(13)
-    }, ownerState.size === 'large' && {
-      padding: 15,
-      fontSize: theme.typography.pxToRem(15)
-    });
+    }, {
+      props: {
+        size: 'small'
+      },
+      style: {
+        padding: 7,
+        fontSize: theme.typography.pxToRem(13)
+      }
+    }, {
+      props: {
+        size: 'large'
+      },
+      style: {
+        padding: 15,
+        fontSize: theme.typography.pxToRem(15)
+      }
+    }])));
   });
   var ToggleButton = /*#__PURE__*/React__namespace.forwardRef(function ToggleButton(inProps, ref) {
     // props priority: `inProps` > `contextProps` > `themeDefaultProps`
@@ -50888,7 +51336,7 @@
     var resolvedProps = resolveProps(_extends({}, contextProps, {
       selected: isValueSelected(inProps.value, contextValue)
     }), inProps);
-    var props = useThemeProps$G({
+    var props = useThemeProps$1({
       props: resolvedProps,
       name: 'MuiToggleButton'
     });
@@ -51029,16 +51477,17 @@
   function getToggleButtonGroupUtilityClass(slot) {
     return generateUtilityClass$1('MuiToggleButtonGroup', slot);
   }
-  var toggleButtonGroupClasses = generateUtilityClasses$1('MuiToggleButtonGroup', ['root', 'selected', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
+  var toggleButtonGroupClasses = generateUtilityClasses$1('MuiToggleButtonGroup', ['root', 'selected', 'horizontal', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
   var toggleButtonGroupClasses$1 = toggleButtonGroupClasses;
 
+  var useThemeProps = createUseThemeProps();
   var useUtilityClasses = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       orientation = ownerState.orientation,
       fullWidth = ownerState.fullWidth,
       disabled = ownerState.disabled;
     var slots = {
-      root: ['root', orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth'],
+      root: ['root', orientation, fullWidth && 'fullWidth'],
       grouped: ['grouped', "grouped".concat(capitalize(orientation)), disabled && 'disabled'],
       firstButton: ['firstButton'],
       lastButton: ['lastButton'],
@@ -51054,45 +51503,60 @@
       return [_defineProperty({}, "& .".concat(toggleButtonGroupClasses$1.grouped), styles.grouped), _defineProperty({}, "& .".concat(toggleButtonGroupClasses$1.grouped), styles["grouped".concat(capitalize(ownerState.orientation))]), _defineProperty({}, "& .".concat(toggleButtonGroupClasses$1.firstButton), styles.firstButton), _defineProperty({}, "& .".concat(toggleButtonGroupClasses$1.lastButton), styles.lastButton), _defineProperty({}, "& .".concat(toggleButtonGroupClasses$1.middleButton), styles.middleButton), styles.root, ownerState.orientation === 'vertical' && styles.vertical, ownerState.fullWidth && styles.fullWidth];
     }
   })(function (_ref6) {
-    var ownerState = _ref6.ownerState,
-      theme = _ref6.theme;
-    return _extends({
+    var theme = _ref6.theme;
+    return {
       display: 'inline-flex',
-      borderRadius: (theme.vars || theme).shape.borderRadius
-    }, ownerState.orientation === 'vertical' && {
-      flexDirection: 'column'
-    }, ownerState.fullWidth && {
-      width: '100%'
-    }, _defineProperty({}, "& .".concat(toggleButtonGroupClasses$1.grouped), _extends({}, ownerState.orientation === 'horizontal' ? _defineProperty({}, "&.".concat(toggleButtonGroupClasses$1.selected, " + .").concat(toggleButtonGroupClasses$1.grouped, ".").concat(toggleButtonGroupClasses$1.selected), {
-      borderLeft: 0,
-      marginLeft: 0
-    }) : _defineProperty({}, "&.".concat(toggleButtonGroupClasses$1.selected, " + .").concat(toggleButtonGroupClasses$1.grouped, ".").concat(toggleButtonGroupClasses$1.selected), {
-      borderTop: 0,
-      marginTop: 0
-    }))), ownerState.orientation === 'horizontal' ? _defineProperty(_defineProperty({}, "& .".concat(toggleButtonGroupClasses$1.firstButton, ",& .").concat(toggleButtonGroupClasses$1.middleButton), {
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0
-    }), "& .".concat(toggleButtonGroupClasses$1.lastButton, ",& .").concat(toggleButtonGroupClasses$1.middleButton), {
-      marginLeft: -1,
-      borderLeft: '1px solid transparent',
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0
-    }) : _defineProperty(_defineProperty({}, "& .".concat(toggleButtonGroupClasses$1.firstButton, ",& .").concat(toggleButtonGroupClasses$1.middleButton), {
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0
-    }), "& .".concat(toggleButtonGroupClasses$1.lastButton, ",& .").concat(toggleButtonGroupClasses$1.middleButton), {
-      marginTop: -1,
-      borderTop: '1px solid transparent',
-      borderTopLeftRadius: 0,
-      borderTopRightRadius: 0
-    }), ownerState.orientation === 'horizontal' ? _defineProperty({}, "& .".concat(toggleButtonGroupClasses$1.lastButton, ".").concat(toggleButtonClasses$1.disabled, ",& .").concat(toggleButtonGroupClasses$1.middleButton, ".").concat(toggleButtonClasses$1.disabled), {
-      borderLeft: '1px solid transparent'
-    }) : _defineProperty({}, "& .".concat(toggleButtonGroupClasses$1.lastButton, ".").concat(toggleButtonClasses$1.disabled, ",& .").concat(toggleButtonGroupClasses$1.middleButton, ".").concat(toggleButtonClasses$1.disabled), {
-      borderTop: '1px solid transparent'
-    }));
+      borderRadius: (theme.vars || theme).shape.borderRadius,
+      variants: [{
+        props: {
+          orientation: 'vertical'
+        },
+        style: _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+          flexDirection: 'column'
+        }, "& .".concat(toggleButtonGroupClasses$1.grouped), _defineProperty({}, "&.".concat(toggleButtonGroupClasses$1.selected, " + .").concat(toggleButtonGroupClasses$1.grouped, ".").concat(toggleButtonGroupClasses$1.selected), {
+          borderTop: 0,
+          marginTop: 0
+        })), "& .".concat(toggleButtonGroupClasses$1.firstButton, ",& .").concat(toggleButtonGroupClasses$1.middleButton), {
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0
+        }), "& .".concat(toggleButtonGroupClasses$1.lastButton, ",& .").concat(toggleButtonGroupClasses$1.middleButton), {
+          marginTop: -1,
+          borderTop: '1px solid transparent',
+          borderTopLeftRadius: 0,
+          borderTopRightRadius: 0
+        }), "& .".concat(toggleButtonGroupClasses$1.lastButton, ".").concat(toggleButtonClasses$1.disabled, ",& .").concat(toggleButtonGroupClasses$1.middleButton, ".").concat(toggleButtonClasses$1.disabled), {
+          borderTop: '1px solid transparent'
+        })
+      }, {
+        props: {
+          fullWidth: true
+        },
+        style: {
+          width: '100%'
+        }
+      }, {
+        props: {
+          orientation: 'horizontal'
+        },
+        style: _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "& .".concat(toggleButtonGroupClasses$1.grouped), _defineProperty({}, "&.".concat(toggleButtonGroupClasses$1.selected, " + .").concat(toggleButtonGroupClasses$1.grouped, ".").concat(toggleButtonGroupClasses$1.selected), {
+          borderLeft: 0,
+          marginLeft: 0
+        })), "& .".concat(toggleButtonGroupClasses$1.firstButton, ",& .").concat(toggleButtonGroupClasses$1.middleButton), {
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0
+        }), "& .".concat(toggleButtonGroupClasses$1.lastButton, ",& .").concat(toggleButtonGroupClasses$1.middleButton), {
+          marginLeft: -1,
+          borderLeft: '1px solid transparent',
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0
+        }), "& .".concat(toggleButtonGroupClasses$1.lastButton, ".").concat(toggleButtonClasses$1.disabled, ",& .").concat(toggleButtonGroupClasses$1.middleButton, ".").concat(toggleButtonClasses$1.disabled), {
+          borderLeft: '1px solid transparent'
+        })
+      }]
+    };
   });
   var ToggleButtonGroup = /*#__PURE__*/React__namespace.forwardRef(function ToggleButtonGroup(inProps, ref) {
-    var props = useThemeProps$G({
+    var props = useThemeProps({
       props: inProps,
       name: 'MuiToggleButtonGroup'
     });
@@ -51763,7 +52227,7 @@
   exports.useStepContext = useStepContext;
   exports.useStepperContext = useStepperContext;
   exports.useTheme = useTheme;
-  exports.useThemeProps = useThemeProps$G;
+  exports.useThemeProps = useThemeProps$M;
   exports.withStyles = withStyles;
   exports.withTheme = withTheme;