@mui/material 5.15.15 → 6.0.0-alpha.1

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.15
+ * @mui/material v6.0.0-alpha.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -446,7 +446,7 @@
 
   function toPropertyKey(t) {
     var i = toPrimitive(t, "string");
-    return "symbol" == _typeof(i) ? i : String(i);
+    return "symbol" == _typeof(i) ? i : i + "";
   }
 
   function _defineProperty(obj, key, value) {
@@ -516,7 +516,7 @@
     };
   }
 
-  var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
+  var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
 
   var isPropValid = /* #__PURE__ */memoize$1(function (prop) {
     return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
@@ -5511,25 +5511,29 @@
   var spacingKeys = [].concat(marginKeys, paddingKeys);
   function createUnaryUnit(theme, themeKey, defaultValue, propName) {
     var _getPath;
-    var themeSpacing = (_getPath = getPath(theme, themeKey, false)) != null ? _getPath : defaultValue;
-    if (typeof themeSpacing === 'number') {
-      return function (abs) {
-        if (typeof abs === 'string') {
-          return abs;
+    var themeSpacing = (_getPath = getPath(theme, themeKey, true)) != null ? _getPath : defaultValue;
+    if (typeof themeSpacing === 'number' || typeof themeSpacing === 'string') {
+      return function (val) {
+        if (typeof val === 'string') {
+          return val;
         }
         {
-          if (typeof abs !== 'number') {
-            console.error("MUI: Expected ".concat(propName, " argument to be a number or a string, got ").concat(abs, "."));
+          if (typeof val !== 'number') {
+            console.error("MUI: Expected ".concat(propName, " argument to be a number or a string, got ").concat(val, "."));
           }
         }
-        return themeSpacing * abs;
+        if (typeof themeSpacing === 'string') {
+          return "calc(".concat(val, " * ").concat(themeSpacing, ")");
+        }
+        return themeSpacing * val;
       };
     }
     if (Array.isArray(themeSpacing)) {
-      return function (abs) {
-        if (typeof abs === 'string') {
-          return abs;
+      return function (val) {
+        if (typeof val === 'string') {
+          return val;
         }
+        var abs = Math.abs(val);
         {
           if (!Number.isInteger(abs)) {
             console.error(["MUI: The `theme.".concat(themeKey, "` array type cannot be combined with non integer values.") + "You should either use an integer value that can be used as index, or define the `theme.".concat(themeKey, "` as a number.")].join('\n'));
@@ -5537,7 +5541,14 @@
             console.error(["MUI: The value provided (".concat(abs, ") overflows."), "The supported values are: ".concat(JSON.stringify(themeSpacing), "."), "".concat(abs, " > ").concat(themeSpacing.length - 1, ", you need to add the missing values.")].join('\n'));
           }
         }
-        return themeSpacing[abs];
+        var transformed = themeSpacing[abs];
+        if (val >= 0) {
+          return transformed;
+        }
+        if (typeof transformed === 'number') {
+          return -transformed;
+        }
+        return "-".concat(transformed);
       };
     }
     if (typeof themeSpacing === 'function') {
@@ -5557,15 +5568,7 @@
     if (typeof propValue === 'string' || propValue == null) {
       return propValue;
     }
-    var abs = Math.abs(propValue);
-    var transformed = transformer(abs);
-    if (propValue >= 0) {
-      return transformed;
-    }
-    if (typeof transformed === 'number') {
-      return -transformed;
-    }
-    return "-".concat(transformed);
+    return transformer(propValue);
   }
   function getStyleFromPropValue(cssProperties, transformer) {
     return function (propValue) {
@@ -5618,17 +5621,13 @@
 
   function createSpacing() {
     var spacingInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 8;
+    var transform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : createUnarySpacing({
+      spacing: spacingInput
+    });
     // Already transformed.
     if (spacingInput.mui) {
       return spacingInput;
     }
-
-    // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
-    // Smaller components, such as icons, can align to a 4dp grid.
-    // https://m2.material.io/design/layout/understanding-layout.html
-    var transform = createUnarySpacing({
-      spacing: spacingInput
-    });
     var spacing = function spacing() {
       for (var _len = arguments.length, argsInput = new Array(_len), _key = 0; _key < _len; _key++) {
         argsInput[_key] = arguments[_key];
@@ -7169,7 +7168,7 @@
     return resolveProps(theme.components[name].defaultProps, props);
   }
 
-  function useThemeProps$c(_ref) {
+  function useThemeProps$H(_ref) {
     var props = _ref.props,
       name = _ref.name,
       defaultTheme = _ref.defaultTheme,
@@ -8100,7 +8099,7 @@
         return _this.clear;
       };
     }
-    _createClass(Timeout, [{
+    return _createClass(Timeout, [{
       key: "start",
       value:
       /**
@@ -8120,7 +8119,6 @@
         return new Timeout();
       }
     }]);
-    return Timeout;
   }();
   function useTimeout() {
     var timeout = useLazyRef(Timeout.create).current;
@@ -8907,8 +8905,7 @@
       designSystemColorScheme = options.defaultColorScheme,
       _options$disableTrans = options.disableTransitionOnChange,
       designSystemTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
-      resolveTheme = options.resolveTheme,
-      excludeVariablesFromRoot = options.excludeVariablesFromRoot;
+      resolveTheme = options.resolveTheme;
     if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
       console.error("MUI: `".concat(designSystemColorScheme, "` does not exist in `theme.colorSchemes`."));
     }
@@ -8924,6 +8921,7 @@
       return value;
     };
     function CssVarsProvider(props) {
+      var _restThemeProp$genera, _theme$generateStyleS;
       var children = props.children,
         _props$theme = props.theme,
         themeProp = _props$theme === void 0 ? defaultTheme : _props$theme,
@@ -8961,15 +8959,8 @@
         colorSchemes = _ref$colorSchemes === void 0 ? {} : _ref$colorSchemes,
         _ref$components = _ref.components,
         components = _ref$components === void 0 ? {} : _ref$components,
-        _ref$generateCssVars = _ref.generateCssVars,
-        generateCssVars = _ref$generateCssVars === void 0 ? function () {
-          return {
-            vars: {},
-            css: {}
-          };
-        } : _ref$generateCssVars,
         cssVarPrefix = _ref.cssVarPrefix,
-        restThemeProp = _objectWithoutProperties(_ref, ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"]);
+        restThemeProp = _objectWithoutProperties(_ref, ["colorSchemes", "components", "cssVarPrefix"]);
       var allColorSchemes = Object.keys(colorSchemes);
       var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
       var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -9019,33 +9010,25 @@
         return colorScheme;
       }();
 
-      // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
-      var _generateCssVars = generateCssVars(),
-        rootCss = _generateCssVars.css,
-        rootVars = _generateCssVars.vars; // 3. Start composing the theme object
+      // 2. get the `vars` object that refers to the CSS custom properties
+      var themeVars = ((_restThemeProp$genera = restThemeProp.generateThemeVars) == null ? void 0 : _restThemeProp$genera.call(restThemeProp)) || restThemeProp.vars;
+
+      // 3. Start composing the theme object
       var theme = _extends({}, restThemeProp, {
         components: components,
         colorSchemes: colorSchemes,
         cssVarPrefix: cssVarPrefix,
-        vars: rootVars,
-        getColorSchemeSelector: function getColorSchemeSelector(targetColorScheme) {
-          return "[".concat(attribute, "=\"").concat(targetColorScheme, "\"] &");
-        }
+        vars: themeVars
       });
+      if (typeof theme.generateSpacing === 'function') {
+        theme.spacing = theme.generateSpacing();
+      }
 
-      // 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)
-      //    The default color scheme stylesheet is constructed to have the least CSS specificity.
-      //    The other color schemes uses selector, default as data attribute, to increase the CSS specificity so that they can override the default color scheme stylesheet.
-      var defaultColorSchemeStyleSheet = {};
-      var otherColorSchemesStyleSheet = {};
+      // 4. Resolve the color scheme and merge it to the theme
       Object.entries(colorSchemes).forEach(function (_ref2) {
         var _ref3 = _slicedToArray(_ref2, 2),
           key = _ref3[0],
           scheme = _ref3[1];
-        var _generateCssVars2 = generateCssVars(key),
-          css = _generateCssVars2.css,
-          vars = _generateCssVars2.vars;
-        theme.vars = deepmerge(theme.vars, vars);
         if (key === calculatedColorScheme) {
           // 4.1 Merge the selected color scheme to the theme
           Object.keys(scheme).forEach(function (schemeKey) {
@@ -9060,30 +9043,24 @@
             theme.palette.colorScheme = key;
           }
         }
-        var resolvedDefaultColorScheme = function () {
-          if (typeof defaultColorScheme === 'string') {
-            return defaultColorScheme;
-          }
-          if (defaultMode === 'dark') {
-            return defaultColorScheme.dark;
-          }
-          return defaultColorScheme.light;
-        }();
-        if (key === resolvedDefaultColorScheme) {
-          if (excludeVariablesFromRoot) {
-            var excludedVariables = {};
-            excludeVariablesFromRoot(cssVarPrefix).forEach(function (cssVar) {
-              excludedVariables[cssVar] = css[cssVar];
-              delete css[cssVar];
-            });
-            defaultColorSchemeStyleSheet["[".concat(attribute, "=\"").concat(key, "\"]")] = excludedVariables;
-          }
-          defaultColorSchemeStyleSheet["".concat(colorSchemeSelector, ", [").concat(attribute, "=\"").concat(key, "\"]")] = css;
-        } else {
-          otherColorSchemesStyleSheet["".concat(colorSchemeSelector === ':root' ? '' : colorSchemeSelector, "[").concat(attribute, "=\"").concat(key, "\"]")] = css;
-        }
       });
-      theme.vars = deepmerge(theme.vars, rootVars);
+      var resolvedDefaultColorScheme = function () {
+        if (typeof defaultColorScheme === 'string') {
+          return defaultColorScheme;
+        }
+        if (defaultMode === 'dark') {
+          return defaultColorScheme.dark;
+        }
+        return defaultColorScheme.light;
+      }();
+      themeProp.defaultColorScheme = resolvedDefaultColorScheme;
+      themeProp.colorSchemeSelector = colorSchemeSelector;
+      themeProp.attribute = attribute;
+      if (!theme.getColorSchemeSelector) {
+        theme.getColorSchemeSelector = function (targetColorScheme) {
+          return "[".concat(attribute, "=\"").concat(targetColorScheme, "\"] &");
+        };
+      }
 
       // 5. Declaring effects
       // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
@@ -9138,14 +9115,12 @@
         shouldGenerateStyleSheet = false;
       }
       var element = /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
-        children: [shouldGenerateStyleSheet && /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
-          children: [/*#__PURE__*/jsxRuntime_1(GlobalStyles$2, {
-            styles: _defineProperty({}, colorSchemeSelector, rootCss)
-          }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$2, {
-            styles: defaultColorSchemeStyleSheet
-          }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$2, {
-            styles: otherColorSchemesStyleSheet
-          })]
+        children: [shouldGenerateStyleSheet && /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
+          children: (((_theme$generateStyleS = theme.generateStyleSheets) == null ? void 0 : _theme$generateStyleS.call(theme)) || []).map(function (styles, index) {
+            return /*#__PURE__*/jsxRuntime_1(GlobalStyles$2, {
+              styles: styles
+            }, index);
+          })
         }), /*#__PURE__*/jsxRuntime_1(ThemeProvider$1, {
           themeId: scopedTheme ? themeId : undefined,
           theme: resolveTheme ? resolveTheme(theme) : theme,
@@ -9390,9 +9365,10 @@
         if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
           // only create css & var if `shouldSkipGeneratingVar` return false
           var cssVar = "--".concat(prefix ? "".concat(prefix, "-") : '').concat(keys.join('-'));
-          Object.assign(css, _defineProperty({}, cssVar, getCssValue(keys, value)));
+          var resolvedValue = getCssValue(keys, value);
+          Object.assign(css, _defineProperty({}, cssVar, resolvedValue));
           assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"), arrayKeys);
-          assignNestedKeys(varsWithDefaults, keys, "var(".concat(cssVar, ", ").concat(value, ")"), arrayKeys);
+          assignNestedKeys(varsWithDefaults, keys, "var(".concat(cssVar, ", ").concat(resolvedValue, ")"), arrayKeys);
         }
       }
     }, function (keys) {
@@ -9406,7 +9382,10 @@
     };
   }
 
-  function prepareCssVars(theme, parserConfig) {
+  function prepareCssVars(theme) {
+    var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var getSelector = _ref.getSelector,
+      parserConfig = _objectWithoutProperties(_ref, ["getSelector"]);
     // @ts-ignore - ignore components do not exist
     var _theme$colorSchemes = theme.colorSchemes,
       colorSchemes = _theme$colorSchemes === void 0 ? {} : _theme$colorSchemes;
@@ -9420,12 +9399,12 @@
       rootVarsWithDefaults = _cssVarsParser.varsWithDefaults;
     var themeVars = rootVarsWithDefaults;
     var colorSchemesMap = {};
-    var light = colorSchemes[defaultColorScheme],
+    var defaultScheme = colorSchemes[defaultColorScheme],
       otherColorSchemes = _objectWithoutProperties(colorSchemes, [defaultColorScheme].map(toPropertyKey));
-    Object.entries(otherColorSchemes || {}).forEach(function (_ref) {
-      var _ref2 = _slicedToArray(_ref, 2),
-        key = _ref2[0],
-        scheme = _ref2[1];
+    Object.entries(otherColorSchemes || {}).forEach(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        scheme = _ref3[1];
       var _cssVarsParser2 = cssVarsParser(scheme, parserConfig),
         vars = _cssVarsParser2.vars,
         css = _cssVarsParser2.css,
@@ -9436,9 +9415,9 @@
         vars: vars
       };
     });
-    if (light) {
+    if (defaultScheme) {
       // default color scheme vars should be merged last to set as default
-      var _cssVarsParser3 = cssVarsParser(light, parserConfig),
+      var _cssVarsParser3 = cssVarsParser(defaultScheme, parserConfig),
         _css = _cssVarsParser3.css,
         vars = _cssVarsParser3.vars,
         varsWithDefaults = _cssVarsParser3.varsWithDefaults;
@@ -9448,27 +9427,43 @@
         vars: vars
       };
     }
-    var generateCssVars = function generateCssVars(colorScheme) {
-      var _parserConfig$getSele2;
-      if (!colorScheme) {
-        var _parserConfig$getSele;
-        var _css2 = _extends({}, rootCss);
-        return {
-          css: _css2,
-          vars: rootVars,
-          selector: (parserConfig == null || (_parserConfig$getSele = parserConfig.getSelector) == null ? void 0 : _parserConfig$getSele.call(parserConfig, colorScheme, _css2)) || ':root'
-        };
-      }
-      var css = _extends({}, colorSchemesMap[colorScheme].css);
-      return {
-        css: css,
-        vars: colorSchemesMap[colorScheme].vars,
-        selector: (parserConfig == null || (_parserConfig$getSele2 = parserConfig.getSelector) == null ? void 0 : _parserConfig$getSele2.call(parserConfig, colorScheme, css)) || ':root'
-      };
+    var generateThemeVars = function generateThemeVars() {
+      var vars = _extends({}, rootVars);
+      Object.entries(colorSchemesMap).forEach(function (_ref4) {
+        var _ref5 = _slicedToArray(_ref4, 2),
+          schemeVars = _ref5[1].vars;
+        vars = deepmerge(vars, schemeVars);
+      });
+      return vars;
+    };
+    var generateStyleSheets = function generateStyleSheets() {
+      var stylesheets = [];
+      var colorScheme = theme.defaultColorScheme || 'light';
+      function insertStyleSheet(selector, css) {
+        if (Object.keys(css).length) {
+          stylesheets.push(typeof selector === 'string' ? _defineProperty({}, selector, _extends({}, css)) : selector);
+        }
+      }
+      insertStyleSheet((getSelector == null ? void 0 : getSelector(undefined, _extends({}, rootCss))) || ':root', rootCss);
+      var defaultSchemeVal = colorSchemesMap[colorScheme],
+        rest = _objectWithoutProperties(colorSchemesMap, [colorScheme].map(toPropertyKey));
+      if (defaultSchemeVal) {
+        // default color scheme has to come before other color schemes
+        var _css2 = defaultSchemeVal.css;
+        insertStyleSheet((getSelector == null ? void 0 : getSelector(colorScheme, _extends({}, _css2))) || "[".concat(theme.attribute || 'data-color-scheme', "=\"").concat(colorScheme, "\"]"), _css2);
+      }
+      Object.entries(rest).forEach(function (_ref7) {
+        var _ref8 = _slicedToArray(_ref7, 2),
+          key = _ref8[0],
+          css = _ref8[1].css;
+        insertStyleSheet((getSelector == null ? void 0 : getSelector(key, _extends({}, css))) || "[".concat(theme.attribute || 'data-color-scheme', "=\"").concat(key, "\"]"), css);
+      });
+      return stylesheets;
     };
     return {
       vars: themeVars,
-      generateCssVars: generateCssVars
+      generateThemeVars: generateThemeVars,
+      generateStyleSheets: generateStyleSheets
     };
   }
 
@@ -9482,7 +9477,7 @@
     }
   });
   var useThemePropsDefault$2 = function useThemePropsDefault(inProps) {
-    return useThemeProps$c({
+    return useThemeProps$H({
       props: inProps,
       name: 'MuiContainer',
       defaultTheme: defaultTheme$6
@@ -9870,7 +9865,7 @@
     }
   });
   function useThemePropsDefault$1(props) {
-    return useThemeProps$c({
+    return useThemeProps$H({
       props: props,
       name: 'MuiGrid',
       defaultTheme: defaultTheme$5
@@ -10037,7 +10032,7 @@
     }
   });
   function useThemePropsDefault(props) {
-    return useThemeProps$c({
+    return useThemeProps$H({
       props: props,
       name: 'MuiStack',
       defaultTheme: defaultTheme$4
@@ -11079,10 +11074,10 @@
     return theme[THEME_ID] || theme;
   }
 
-  function useThemeProps$b(_ref) {
+  function useThemeProps$G(_ref) {
     var props = _ref.props,
       name = _ref.name;
-    return useThemeProps$c({
+    return useThemeProps$H({
       props: props,
       name: name,
       defaultTheme: defaultTheme$3,
@@ -11158,6 +11153,36 @@
   };
   var getOverlayAlpha$1 = getOverlayAlpha;
 
+  /**
+   * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
+   */
+  var excludeVariablesFromRoot = function excludeVariablesFromRoot(cssVarPrefix) {
+    return [].concat(_toConsumableArray(_toConsumableArray(Array(24)).map(function (_, index) {
+      return "--".concat(cssVarPrefix ? "".concat(cssVarPrefix, "-") : '', "overlays-").concat(index + 1);
+    })), ["--".concat(cssVarPrefix ? "".concat(cssVarPrefix, "-") : '', "palette-AppBar-darkBg"), "--".concat(cssVarPrefix ? "".concat(cssVarPrefix, "-") : '', "palette-AppBar-darkColor")]);
+  };
+  var excludeVariablesFromRoot$1 = excludeVariablesFromRoot;
+
+  var defaultGetSelector = (function (theme) {
+    return function (colorScheme, css) {
+      if (theme.defaultColorScheme === colorScheme) {
+        if (colorScheme === 'dark') {
+          var excludedVariables = {};
+          excludeVariablesFromRoot$1(theme.cssVarPrefix).forEach(function (cssVar) {
+            excludedVariables[cssVar] = css[cssVar];
+            delete css[cssVar];
+          });
+          return _defineProperty(_defineProperty({}, "[".concat(theme.attribute, "=\"").concat(String(colorScheme), "\"]"), excludedVariables), theme.colorSchemeSelector, css);
+        }
+        return "".concat(theme.colorSchemeSelector, ", [").concat(theme.attribute, "=\"").concat(String(colorScheme), "\"]");
+      }
+      if (colorScheme) {
+        return "[".concat(theme.attribute, "=\"").concat(String(colorScheme), "\"]");
+      }
+      return theme.colorSchemeSelector;
+    };
+  });
+
   var defaultDarkOverlays = _toConsumableArray(Array(25)).map(function (_, index) {
     if (index === 0) {
       return undefined;
@@ -11190,6 +11215,21 @@
       obj["".concat(key, "Channel")] = private_safeColorChannel(toRgb(obj[key]), "MUI: Can't create `palette.".concat(key, "Channel` because `palette.").concat(key, "` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().") + '\n' + "To suppress this warning, you need to explicitly provide the `palette.".concat(key, "Channel` as a string (in rgb format, for example \"12 12 12\") or undefined if you want to remove the channel token."));
     }
   }
+  function getSpacingVal(spacingInput) {
+    if (typeof spacingInput === 'number') {
+      return "".concat(spacingInput, "px");
+    }
+    if (typeof spacingInput === 'string') {
+      return spacingInput;
+    }
+    if (typeof spacingInput === 'function') {
+      return getSpacingVal(spacingInput(1));
+    }
+    if (Array.isArray(spacingInput)) {
+      return spacingInput;
+    }
+    return '8px';
+  }
   var silent = function silent(fn) {
     try {
       return fn();
@@ -11211,7 +11251,8 @@
       cssVarPrefix = _options$cssVarPrefix === void 0 ? 'mui' : _options$cssVarPrefix,
       _options$shouldSkipGe = options.shouldSkipGeneratingVar,
       shouldSkipGeneratingVar$1 = _options$shouldSkipGe === void 0 ? shouldSkipGeneratingVar : _options$shouldSkipGe,
-      input = _objectWithoutProperties(options, ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar"]);
+      getSelector = options.getSelector,
+      input = _objectWithoutProperties(options, ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar", "getSelector"]);
     var getCssVar = createGetCssVar(cssVarPrefix);
     var _createThemeWithoutVa = createTheme(_extends({}, input, colorSchemesInput.light && {
         palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
@@ -11224,7 +11265,9 @@
         }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
       }),
       darkPalette = _createThemeWithoutVa2.palette;
-    var theme = _extends({}, muiTheme, {
+    var theme = _extends({
+      defaultColorScheme: 'light'
+    }, muiTheme, {
       cssVarPrefix: cssVarPrefix,
       getCssVar: getCssVar,
       colorSchemes: _extends({}, colorSchemesInput, {
@@ -11248,7 +11291,8 @@
           }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
           overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
         })
-      })
+      }),
+      spacing: getSpacingVal(input.spacing)
     });
     Object.keys(theme.colorSchemes).forEach(function (key) {
       var palette = theme.colorSchemes[key].palette;
@@ -11466,13 +11510,31 @@
     }, theme);
     var parserConfig = {
       prefix: cssVarPrefix,
-      shouldSkipGeneratingVar: shouldSkipGeneratingVar$1
+      shouldSkipGeneratingVar: shouldSkipGeneratingVar$1,
+      getSelector: getSelector || defaultGetSelector(theme)
     };
     var _prepareCssVars = prepareCssVars(theme, parserConfig),
-      themeVars = _prepareCssVars.vars,
-      generateCssVars = _prepareCssVars.generateCssVars;
-    theme.vars = themeVars;
-    theme.generateCssVars = generateCssVars;
+      vars = _prepareCssVars.vars,
+      generateThemeVars = _prepareCssVars.generateThemeVars,
+      generateStyleSheets = _prepareCssVars.generateStyleSheets;
+    theme.attribute = 'data-mui-color-scheme';
+    theme.colorSchemeSelector = ':root';
+    theme.vars = vars;
+    Object.entries(theme.colorSchemes[theme.defaultColorScheme]).forEach(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+      theme[key] = value;
+    });
+    theme.generateThemeVars = generateThemeVars;
+    theme.generateStyleSheets = generateStyleSheets;
+    theme.generateSpacing = function generateSpacing() {
+      return createSpacing(input.spacing, createUnarySpacing(this));
+    };
+    theme.getColorSchemeSelector = function (colorScheme) {
+      return "[".concat(theme.attribute, "=\"").concat(colorScheme, "\"] &");
+    };
+    theme.spacing = theme.generateSpacing();
     theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar$1;
     theme.unstable_sxConfig = _extends({}, defaultSxConfig$1, input == null ? void 0 : input.unstable_sxConfig);
     theme.unstable_sx = function sx(props) {
@@ -11484,16 +11546,6 @@
     return theme;
   }
 
-  /**
-   * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
-   */
-  var excludeVariablesFromRoot = function excludeVariablesFromRoot(cssVarPrefix) {
-    return [].concat(_toConsumableArray(_toConsumableArray(Array(24)).map(function (_, index) {
-      return "--".concat(cssVarPrefix ? "".concat(cssVarPrefix, "-") : '', "overlays-").concat(index + 1);
-    })), ["--".concat(cssVarPrefix ? "".concat(cssVarPrefix, "-") : '', "palette-AppBar-darkBg"), "--".concat(cssVarPrefix ? "".concat(cssVarPrefix, "-") : '', "palette-AppBar-darkColor")]);
-  };
-  var excludeVariablesFromRoot$1 = excludeVariablesFromRoot;
-
   var defaultTheme$1 = extendTheme();
   var _createCssVarsProvide = createCssVarsProvider({
       themeId: THEME_ID,
@@ -11516,8 +11568,7 @@
           });
         };
         return newTheme;
-      },
-      excludeVariablesFromRoot: excludeVariablesFromRoot$1
+      }
     }),
     CssVarsProvider = _createCssVarsProvide.CssVarsProvider,
     useColorScheme = _createCssVarsProvide.useColorScheme,
@@ -11582,7 +11633,7 @@
     };
   });
   var SvgIcon = /*#__PURE__*/React__namespace.forwardRef(function SvgIcon(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiSvgIcon'
     });
@@ -11741,7 +11792,7 @@
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   function createUseThemeProps(name) {
-    return useThemeProps$b;
+    return useThemeProps$G;
   }
 
   function _setPrototypeOf(o, p) {
@@ -12831,7 +12882,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$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiCollapse'
     });
@@ -13161,7 +13212,7 @@
     }));
   });
   var Paper = /*#__PURE__*/React__namespace.forwardRef(function Paper(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiPaper'
     });
@@ -13538,7 +13589,7 @@
   var accordionClasses = generateUtilityClasses$1('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
   var accordionClasses$1 = accordionClasses;
 
-  var useThemeProps$a = createUseThemeProps();
+  var useThemeProps$F = createUseThemeProps();
   var useUtilityClasses$1M = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       square = ownerState.square,
@@ -13636,7 +13687,7 @@
     };
   });
   var Accordion = /*#__PURE__*/React__namespace.forwardRef(function Accordion(inProps, ref) {
-    var props = useThemeProps$a({
+    var props = useThemeProps$F({
       props: inProps,
       name: 'MuiAccordion'
     });
@@ -13830,7 +13881,7 @@
   var accordionActionsClasses = generateUtilityClasses$1('MuiAccordionActions', ['root', 'spacing']);
   var accordionActionsClasses$1 = accordionActionsClasses;
 
-  var useThemeProps$9 = createUseThemeProps();
+  var useThemeProps$E = createUseThemeProps();
   var useUtilityClasses$1L = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disableSpacing = ownerState.disableSpacing;
@@ -13863,7 +13914,7 @@
     }]
   });
   var AccordionActions = /*#__PURE__*/React__namespace.forwardRef(function AccordionActions(inProps, ref) {
-    var props = useThemeProps$9({
+    var props = useThemeProps$E({
       props: inProps,
       name: 'MuiAccordionActions'
     });
@@ -13916,7 +13967,7 @@
   var accordionDetailsClasses = generateUtilityClasses$1('MuiAccordionDetails', ['root']);
   var accordionDetailsClasses$1 = accordionDetailsClasses;
 
-  var useThemeProps$8 = createUseThemeProps();
+  var useThemeProps$D = createUseThemeProps();
   var useUtilityClasses$1K = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -13937,7 +13988,7 @@
     };
   });
   var AccordionDetails = /*#__PURE__*/React__namespace.forwardRef(function AccordionDetails(inProps, ref) {
-    var props = useThemeProps$8({
+    var props = useThemeProps$D({
       props: inProps,
       name: 'MuiAccordionDetails'
     });
@@ -14029,7 +14080,7 @@
       })
     });
   }
-  Ripple.propTypes = {
+  Ripple.propTypes /* remove-proptypes */ = {
     /**
      * Override or extend the styles applied to the component.
      */
@@ -14072,6 +14123,7 @@
   var touchRippleClasses$1 = touchRippleClasses;
 
   var _templateObject$3, _templateObject2$3, _templateObject3$3, _templateObject4$3;
+  var useThemeProps$C = 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"])));
@@ -14117,7 +14169,7 @@
    * TODO v5: Make private
    */
   var TouchRipple = /*#__PURE__*/React__namespace.forwardRef(function TouchRipple(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$C({
       props: inProps,
       name: 'MuiTouchRipple'
     });
@@ -14306,7 +14358,7 @@
       })
     }));
   });
-  TouchRipple.propTypes = {
+  TouchRipple.propTypes /* remove-proptypes */ = {
     /**
      * If `true`, the ripple starts at the center of the component
      * rather than at the point of interaction.
@@ -14329,6 +14381,7 @@
   var buttonBaseClasses = generateUtilityClasses$1('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
   var buttonBaseClasses$1 = buttonBaseClasses;
 
+  var useThemeProps$B = createUseThemeProps();
   var useUtilityClasses$1J = function useUtilityClasses(ownerState) {
     var disabled = ownerState.disabled,
       focusVisible = ownerState.focusVisible,
@@ -14393,7 +14446,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$B({
       props: inProps,
       name: 'MuiButtonBase'
     });
@@ -14804,7 +14857,7 @@
   var accordionSummaryClasses = generateUtilityClasses$1('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
   var accordionSummaryClasses$1 = accordionSummaryClasses;
 
-  var useThemeProps$7 = createUseThemeProps();
+  var useThemeProps$A = createUseThemeProps();
   var useUtilityClasses$1I = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       expanded = ownerState.expanded,
@@ -14895,7 +14948,7 @@
     });
   });
   var AccordionSummary = /*#__PURE__*/React__namespace.forwardRef(function AccordionSummary(inProps, ref) {
-    var props = useThemeProps$7({
+    var props = useThemeProps$A({
       props: inProps,
       name: 'MuiAccordionSummary'
     });
@@ -15082,7 +15135,7 @@
    * regarding the available icon options.
    */
   var IconButton = /*#__PURE__*/React__namespace.forwardRef(function IconButton(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiIconButton'
     });
@@ -15209,7 +15262,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$6 = createUseThemeProps();
+  var useThemeProps$z = createUseThemeProps();
   var useUtilityClasses$1G = function useUtilityClasses(ownerState) {
     var variant = ownerState.variant,
       color = ownerState.color,
@@ -15357,7 +15410,7 @@
     })
   };
   var Alert = /*#__PURE__*/React__namespace.forwardRef(function Alert(inProps, ref) {
-    var props = useThemeProps$6({
+    var props = useThemeProps$z({
       props: inProps,
       name: 'MuiAlert'
     });
@@ -15642,7 +15695,7 @@
     return colorTransformations$1[color] || color;
   };
   var Typography = /*#__PURE__*/React__namespace.forwardRef(function Typography(inProps, ref) {
-    var themeProps = useThemeProps$b({
+    var themeProps = useThemeProps$G({
       props: inProps,
       name: 'MuiTypography'
     });
@@ -15768,7 +15821,7 @@
   var alertTitleClasses = generateUtilityClasses$1('MuiAlertTitle', ['root']);
   var alertTitleClasses$1 = alertTitleClasses;
 
-  var useThemeProps$5 = createUseThemeProps();
+  var useThemeProps$y = createUseThemeProps();
   var useUtilityClasses$1E = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -15790,7 +15843,7 @@
     };
   });
   var AlertTitle = /*#__PURE__*/React__namespace.forwardRef(function AlertTitle(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$y({
       props: inProps,
       name: 'MuiAlertTitle'
     });
@@ -15836,6 +15889,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 useUtilityClasses$1D = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       position = ownerState.position,
@@ -15859,76 +15913,135 @@
       return [styles.root, styles["position".concat(capitalize(ownerState.position))], styles["color".concat(capitalize(ownerState.color))]];
     }
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    var backgroundColorDefault = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
-    return _extends({
+    var _theme$vars;
+    var theme = _ref.theme;
+    return {
       display: 'flex',
       flexDirection: 'column',
       width: '100%',
       boxSizing: 'border-box',
       // Prevent padding issue with the Modal and fixed positioned AppBar.
-      flexShrink: 0
-    }, ownerState.position === 'fixed' && {
-      position: 'fixed',
-      zIndex: (theme.vars || theme).zIndex.appBar,
-      top: 0,
-      left: 'auto',
-      right: 0,
-      '@media print': {
-        // Prevent the app bar to be visible on each printed page.
-        position: 'absolute'
-      }
-    }, ownerState.position === 'absolute' && {
-      position: 'absolute',
-      zIndex: (theme.vars || theme).zIndex.appBar,
-      top: 0,
-      left: 'auto',
-      right: 0
-    }, ownerState.position === 'sticky' && {
-      // ⚠️ sticky is not supported by IE11.
-      position: 'sticky',
-      zIndex: (theme.vars || theme).zIndex.appBar,
-      top: 0,
-      left: 'auto',
-      right: 0
-    }, ownerState.position === 'static' && {
-      position: 'static'
-    }, ownerState.position === 'relative' && {
-      position: 'relative'
-    }, !theme.vars && _extends({}, ownerState.color === 'default' && {
-      backgroundColor: backgroundColorDefault,
-      color: theme.palette.getContrastText(backgroundColorDefault)
-    }, ownerState.color && ownerState.color !== 'default' && ownerState.color !== 'inherit' && ownerState.color !== 'transparent' && {
-      backgroundColor: theme.palette[ownerState.color].main,
-      color: theme.palette[ownerState.color].contrastText
-    }, ownerState.color === 'inherit' && {
-      color: 'inherit'
-    }, theme.palette.mode === 'dark' && !ownerState.enableColorOnDark && {
-      backgroundColor: null,
-      color: null
-    }, ownerState.color === 'transparent' && _extends({
-      backgroundColor: 'transparent',
-      color: 'inherit'
-    }, theme.palette.mode === 'dark' && {
-      backgroundImage: 'none'
-    })), theme.vars && _extends({}, ownerState.color === 'default' && {
-      '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette.AppBar.defaultBg : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette.AppBar.defaultBg),
-      '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette.text.primary : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette.text.primary)
-    }, ownerState.color && !ownerState.color.match(/^(default|inherit|transparent)$/) && {
-      '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].main : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main),
-      '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].contrastText : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette[ownerState.color].contrastText)
-    }, {
-      backgroundColor: 'var(--AppBar-background)',
-      color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)'
-    }, ownerState.color === 'transparent' && {
-      backgroundImage: 'none',
-      backgroundColor: 'transparent',
-      color: 'inherit'
-    }));
+      flexShrink: 0,
+      variants: [{
+        props: {
+          position: 'fixed'
+        },
+        style: {
+          position: 'fixed',
+          zIndex: (theme.vars || theme).zIndex.appBar,
+          top: 0,
+          left: 'auto',
+          right: 0,
+          '@media print': {
+            // Prevent the app bar to be visible on each printed page.
+            position: 'absolute'
+          }
+        }
+      }, {
+        props: {
+          position: 'absolute'
+        },
+        style: {
+          position: 'absolute',
+          zIndex: (theme.vars || theme).zIndex.appBar,
+          top: 0,
+          left: 'auto',
+          right: 0
+        }
+      }, {
+        props: {
+          position: 'sticky'
+        },
+        style: {
+          // ⚠️ sticky is not supported by IE11.
+          position: 'sticky',
+          zIndex: (theme.vars || theme).zIndex.appBar,
+          top: 0,
+          left: 'auto',
+          right: 0
+        }
+      }, {
+        props: {
+          position: 'static'
+        },
+        style: {
+          position: 'static'
+        }
+      }, {
+        props: {
+          position: 'relative'
+        },
+        style: {
+          position: 'relative'
+        }
+      }, {
+        props: {
+          color: 'inherit'
+        },
+        style: {
+          '--AppBar-color': 'inherit'
+        }
+      }, {
+        props: {
+          color: 'default'
+        },
+        style: _extends({
+          '--AppBar-background': theme.vars ? theme.vars.palette.AppBar.defaultBg : theme.palette.grey[100],
+          '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[100])
+        }, theme.applyStyles('dark', {
+          '--AppBar-background': theme.vars ? theme.vars.palette.AppBar.defaultBg : theme.palette.grey[900],
+          '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[900])
+        }))
+      }].concat(_toConsumableArray(Object.keys(((_theme$vars = theme.vars) != null ? _theme$vars : theme).palette).filter(function (key) {
+        var _theme$vars2, _theme$vars3;
+        return ((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette[key].main && ((_theme$vars3 = theme.vars) != null ? _theme$vars3 : theme).palette[key].contrastText;
+      }).map(function (color) {
+        var _theme$vars4, _theme$vars5;
+        return {
+          props: {
+            color: color
+          },
+          style: {
+            '--AppBar-background': ((_theme$vars4 = theme.vars) != null ? _theme$vars4 : theme).palette[color].main,
+            '--AppBar-color': ((_theme$vars5 = theme.vars) != null ? _theme$vars5 : theme).palette[color].contrastText
+          }
+        };
+      })), [{
+        props: {
+          enableColorOnDark: true
+        },
+        style: {
+          backgroundColor: 'var(--AppBar-background)',
+          color: 'var(--AppBar-color)'
+        }
+      }, {
+        props: {
+          enableColorOnDark: false
+        },
+        style: _extends({
+          backgroundColor: 'var(--AppBar-background)',
+          color: 'var(--AppBar-color)'
+        }, theme.applyStyles('dark', {
+          backgroundColor: theme.vars ? joinVars(theme.vars.palette.AppBar.darkBg, 'var(--AppBar-background)') : null,
+          color: theme.vars ? joinVars(theme.vars.palette.AppBar.darkColor, 'var(--AppBar-color)') : null
+        }))
+      }, {
+        props: {
+          color: 'transparent'
+        },
+        style: _extends({
+          '--AppBar-background': 'transparent',
+          '--AppBar-color': 'inherit',
+          backgroundColor: 'var(--AppBar-background)',
+          color: 'var(--AppBar-color)'
+        }, theme.applyStyles('dark', {
+          backgroundImage: 'none'
+        }))
+      }])
+    };
   });
   var AppBar = /*#__PURE__*/React__namespace.forwardRef(function AppBar(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$x({
       props: inProps,
       name: 'MuiAppBar'
     });
@@ -16795,7 +16908,7 @@
       this.modals = [];
       this.containers = [];
     }
-    _createClass(ModalManager, [{
+    return _createClass(ModalManager, [{
       key: "add",
       value: function add(modal, container) {
         var modalIndex = this.modals.indexOf(modal);
@@ -16882,7 +16995,6 @@
         return this.modals.length > 0 && this.modals[this.modals.length - 1] === modal;
       }
     }]);
-    return ModalManager;
   }();
 
   function getContainer(container) {
@@ -21445,7 +21557,7 @@
   var Popper = /*#__PURE__*/React__namespace.forwardRef(function Popper(inProps, ref) {
     var _slots$root;
     var theme = useTheme$3();
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiPopper'
     });
@@ -21670,7 +21782,7 @@
     });
   });
   var ListSubheader = /*#__PURE__*/React__namespace.forwardRef(function ListSubheader(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiListSubheader'
     });
@@ -21761,6 +21873,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 useUtilityClasses$1A = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disabled = ownerState.disabled,
@@ -21793,10 +21906,9 @@
       return [_defineProperty({}, "& .".concat(chipClasses$1.avatar), styles.avatar), _defineProperty({}, "& .".concat(chipClasses$1.avatar), styles["avatar".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses$1.avatar), styles["avatarColor".concat(capitalize(color))]), _defineProperty({}, "& .".concat(chipClasses$1.icon), styles.icon), _defineProperty({}, "& .".concat(chipClasses$1.icon), styles["icon".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses$1.icon), styles["iconColor".concat(capitalize(iconColor))]), _defineProperty({}, "& .".concat(chipClasses$1.deleteIcon), styles.deleteIcon), _defineProperty({}, "& .".concat(chipClasses$1.deleteIcon), styles["deleteIcon".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses$1.deleteIcon), styles["deleteIconColor".concat(capitalize(color))]), _defineProperty({}, "& .".concat(chipClasses$1.deleteIcon), styles["deleteIcon".concat(capitalize(variant), "Color").concat(capitalize(color))]), styles.root, styles["size".concat(capitalize(size))], styles["color".concat(capitalize(color))], clickable && styles.clickable, clickable && color !== 'default' && styles["clickableColor".concat(capitalize(color), ")")], onDelete && styles.deletable, onDelete && color !== 'default' && styles["deletableColor".concat(capitalize(color))], styles[variant], styles["".concat(variant).concat(capitalize(color))]];
     }
   })(function (_ref11) {
-    var theme = _ref11.theme,
-      ownerState = _ref11.ownerState;
+    var theme = _ref11.theme;
     var textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
-    return _extends(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
       maxWidth: '100%',
       fontFamily: theme.typography.fontFamily,
       fontSize: theme.typography.pxToRem(13),
@@ -21842,18 +21954,10 @@
       width: 18,
       height: 18,
       fontSize: theme.typography.pxToRem(10)
-    }), "& .".concat(chipClasses$1.icon), _extends({
+    }), "& .".concat(chipClasses$1.icon), {
       marginLeft: 5,
       marginRight: -6
-    }, ownerState.size === 'small' && {
-      fontSize: 18,
-      marginLeft: 4,
-      marginRight: -4
-    }, ownerState.iconColor === ownerState.color && _extends({
-      color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor
-    }, ownerState.color !== 'default' && {
-      color: 'inherit'
-    }))), "& .".concat(chipClasses$1.deleteIcon), _extends({
+    }), "& .".concat(chipClasses$1.deleteIcon), {
       WebkitTapHighlightColor: 'transparent',
       color: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / 0.26)") : alpha(theme.palette.text.primary, 0.26),
       fontSize: 22,
@@ -21862,77 +21966,163 @@
       '&:hover': {
         color: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / 0.4)") : alpha(theme.palette.text.primary, 0.4)
       }
-    }, ownerState.size === 'small' && {
-      fontSize: 16,
-      marginRight: 4,
-      marginLeft: -4
-    }, ownerState.color !== 'default' && {
-      color: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].contrastTextChannel, " / 0.7)") : alpha(theme.palette[ownerState.color].contrastText, 0.7),
-      '&:hover, &:active': {
-        color: (theme.vars || theme).palette[ownerState.color].contrastText
-      }
-    })), ownerState.size === 'small' && {
-      height: 24
-    }, ownerState.color !== 'default' && {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
-      color: (theme.vars || theme).palette[ownerState.color].contrastText
-    }, ownerState.onDelete && _defineProperty({}, "&.".concat(chipClasses$1.focusVisible), {
-      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
-    }), ownerState.onDelete && ownerState.color !== 'default' && _defineProperty({}, "&.".concat(chipClasses$1.focusVisible), {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
-    }));
-  }, function (_ref14) {
-    var theme = _ref14.theme,
-      ownerState = _ref14.ownerState;
-    return _extends({}, ownerState.clickable && _defineProperty(_defineProperty({
-      userSelect: 'none',
-      WebkitTapHighlightColor: 'transparent',
-      cursor: 'pointer',
-      '&:hover': {
-        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
-      }
-    }, "&.".concat(chipClasses$1.focusVisible), {
-      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
-    }), '&:active', {
-      boxShadow: (theme.vars || theme).shadows[1]
-    }), ownerState.clickable && ownerState.color !== 'default' && _defineProperty({}, "&:hover, &.".concat(chipClasses$1.focusVisible), {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
-    }));
-  }, function (_ref17) {
-    var theme = _ref17.theme,
-      ownerState = _ref17.ownerState;
-    return _extends({}, ownerState.variant === 'outlined' && _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-      backgroundColor: 'transparent',
-      border: theme.vars ? "1px solid ".concat(theme.vars.palette.Chip.defaultBorder) : "1px solid ".concat(theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700])
-    }, "&.".concat(chipClasses$1.clickable, ":hover"), {
-      backgroundColor: (theme.vars || theme).palette.action.hover
-    }), "&.".concat(chipClasses$1.focusVisible), {
-      backgroundColor: (theme.vars || theme).palette.action.focus
-    }), "& .".concat(chipClasses$1.avatar), {
-      marginLeft: 4
-    }), "& .".concat(chipClasses$1.avatarSmall), {
-      marginLeft: 2
-    }), "& .".concat(chipClasses$1.icon), {
-      marginLeft: 4
-    }), "& .".concat(chipClasses$1.iconSmall), {
-      marginLeft: 2
-    }), "& .".concat(chipClasses$1.deleteIcon), {
-      marginRight: 5
-    }), "& .".concat(chipClasses$1.deleteIconSmall), {
-      marginRight: 3
-    }), ownerState.variant === 'outlined' && ownerState.color !== 'default' && _defineProperty(_defineProperty(_defineProperty({
-      color: (theme.vars || theme).palette[ownerState.color].main,
-      border: "1px solid ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.7)") : alpha(theme.palette[ownerState.color].main, 0.7))
-    }, "&.".concat(chipClasses$1.clickable, ":hover"), {
-      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity)
-    }), "&.".concat(chipClasses$1.focusVisible), {
-      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.focusOpacity, ")") : alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
-    }), "& .".concat(chipClasses$1.deleteIcon), {
-      color: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.7)") : alpha(theme.palette[ownerState.color].main, 0.7),
-      '&:hover, &:active': {
-        color: (theme.vars || theme).palette[ownerState.color].main
-      }
-    }));
+    }), "variants", [{
+      props: {
+        size: 'small'
+      },
+      style: _defineProperty(_defineProperty({
+        height: 24
+      }, "& .".concat(chipClasses$1.icon), {
+        fontSize: 18,
+        marginLeft: 4,
+        marginRight: -4
+      }), "& .".concat(chipClasses$1.deleteIcon), {
+        fontSize: 16,
+        marginRight: 4,
+        marginLeft: -4
+      })
+    }].concat(_toConsumableArray(Object.entries(theme.palette).filter(function (_ref12) {
+      var _ref13 = _slicedToArray(_ref12, 2),
+        value = _ref13[1];
+      return value.main && value.contrastText;
+    }).map(function (_ref14) {
+      var _ref15 = _slicedToArray(_ref14, 1),
+        color = _ref15[0];
+      return {
+        props: {
+          color: color
+        },
+        style: _defineProperty({
+          backgroundColor: (theme.vars || theme).palette[color].main,
+          color: (theme.vars || theme).palette[color].contrastText
+        }, "& .".concat(chipClasses$1.deleteIcon), {
+          color: theme.vars ? "rgba(".concat(theme.vars.palette[color].contrastTextChannel, " / 0.7)") : alpha(theme.palette[color].contrastText, 0.7),
+          '&:hover, &:active': {
+            color: (theme.vars || theme).palette[color].contrastText
+          }
+        })
+      };
+    })), [{
+      props: function props(_props) {
+        return _props.iconColor === _props.color;
+      },
+      style: _defineProperty({}, "& .".concat(chipClasses$1.icon), {
+        color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor
+      })
+    }, {
+      props: function props(_props2) {
+        return _props2.iconColor === _props2.color && _props2.color !== 'default';
+      },
+      style: _defineProperty({}, "& .".concat(chipClasses$1.icon), {
+        color: 'inherit'
+      })
+    }, {
+      props: {
+        onDelete: true
+      },
+      style: _defineProperty({}, "&.".concat(chipClasses$1.focusVisible), {
+        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      })
+    }], _toConsumableArray(Object.entries(theme.palette).filter(function (_ref16) {
+      var _ref17 = _slicedToArray(_ref16, 2),
+        value = _ref17[1];
+      return value.dark;
+    }).map(function (_ref18) {
+      var _ref19 = _slicedToArray(_ref18, 1),
+        color = _ref19[0];
+      return {
+        props: {
+          color: color,
+          onDelete: true
+        },
+        style: _defineProperty({}, "&.".concat(chipClasses$1.focusVisible), {
+          background: (theme.vars || theme).palette[color].dark
+        })
+      };
+    })), [{
+      props: {
+        clickable: true
+      },
+      style: _defineProperty(_defineProperty({
+        userSelect: 'none',
+        WebkitTapHighlightColor: 'transparent',
+        cursor: 'pointer',
+        '&:hover': {
+          backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+        }
+      }, "&.".concat(chipClasses$1.focusVisible), {
+        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      }), '&:active', {
+        boxShadow: (theme.vars || theme).shadows[1]
+      })
+    }], _toConsumableArray(Object.entries(theme.palette).filter(function (_ref20) {
+      var _ref21 = _slicedToArray(_ref20, 2),
+        value = _ref21[1];
+      return value.dark;
+    }).map(function (_ref22) {
+      var _ref23 = _slicedToArray(_ref22, 1),
+        color = _ref23[0];
+      return {
+        props: {
+          color: color,
+          clickable: true
+        },
+        style: _defineProperty({}, "&:hover, &.".concat(chipClasses$1.focusVisible), {
+          backgroundColor: (theme.vars || theme).palette[color].dark
+        })
+      };
+    })), [{
+      props: {
+        variant: 'outlined'
+      },
+      style: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+        backgroundColor: 'transparent',
+        border: theme.vars ? "1px solid ".concat(theme.vars.palette.Chip.defaultBorder) : "1px solid ".concat(theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700])
+      }, "&.".concat(chipClasses$1.clickable, ":hover"), {
+        backgroundColor: (theme.vars || theme).palette.action.hover
+      }), "&.".concat(chipClasses$1.focusVisible), {
+        backgroundColor: (theme.vars || theme).palette.action.focus
+      }), "& .".concat(chipClasses$1.avatar), {
+        marginLeft: 4
+      }), "& .".concat(chipClasses$1.avatarSmall), {
+        marginLeft: 2
+      }), "& .".concat(chipClasses$1.icon), {
+        marginLeft: 4
+      }), "& .".concat(chipClasses$1.iconSmall), {
+        marginLeft: 2
+      }), "& .".concat(chipClasses$1.deleteIcon), {
+        marginRight: 5
+      }), "& .".concat(chipClasses$1.deleteIconSmall), {
+        marginRight: 3
+      })
+    }], _toConsumableArray(Object.entries(theme.palette).filter(function (_ref24) {
+      var _ref25 = _slicedToArray(_ref24, 2),
+        value = _ref25[1];
+      return value.main;
+    }) // no need to check for mainChannel as it's calculated from main
+    .map(function (_ref26) {
+      var _ref27 = _slicedToArray(_ref26, 1),
+        color = _ref27[0];
+      return {
+        props: {
+          variant: 'outlined',
+          color: color
+        },
+        style: _defineProperty(_defineProperty(_defineProperty({
+          color: (theme.vars || theme).palette[color].main,
+          border: "1px solid ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.7)") : alpha(theme.palette[color].main, 0.7))
+        }, "&.".concat(chipClasses$1.clickable, ":hover"), {
+          backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+        }), "&.".concat(chipClasses$1.focusVisible), {
+          backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / ").concat(theme.vars.palette.action.focusOpacity, ")") : alpha(theme.palette[color].main, theme.palette.action.focusOpacity)
+        }), "& .".concat(chipClasses$1.deleteIcon), {
+          color: theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.7)") : alpha(theme.palette[color].main, 0.7),
+          '&:hover, &:active': {
+            color: (theme.vars || theme).palette[color].main
+          }
+        })
+      };
+    }))));
   });
   var ChipLabel = styled$1('span', {
     name: 'MuiChip',
@@ -21942,24 +22132,38 @@
       var size = ownerState.size;
       return [styles.label, styles["label".concat(capitalize(size))]];
     }
-  })(function (_ref20) {
-    var ownerState = _ref20.ownerState;
-    return _extends({
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      paddingLeft: 12,
-      paddingRight: 12,
-      whiteSpace: 'nowrap'
-    }, ownerState.variant === 'outlined' && {
-      paddingLeft: 11,
-      paddingRight: 11
-    }, ownerState.size === 'small' && {
-      paddingLeft: 8,
-      paddingRight: 8
-    }, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
-      paddingLeft: 7,
-      paddingRight: 7
-    });
+  })({
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    paddingLeft: 12,
+    paddingRight: 12,
+    whiteSpace: 'nowrap',
+    variants: [{
+      props: {
+        variant: 'outlined'
+      },
+      style: {
+        paddingLeft: 11,
+        paddingRight: 11
+      }
+    }, {
+      props: {
+        size: 'small'
+      },
+      style: {
+        paddingLeft: 8,
+        paddingRight: 8
+      }
+    }, {
+      props: {
+        size: 'small',
+        variant: 'outlined'
+      },
+      style: {
+        paddingLeft: 7,
+        paddingRight: 7
+      }
+    }]
   });
   function isDeleteKeyboardEvent(keyboardEvent) {
     return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
@@ -21969,7 +22173,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$b({
+    var props = useThemeProps$w({
       props: inProps,
       name: 'MuiChip'
     });
@@ -22457,7 +22661,7 @@
    */
   var InputBase = /*#__PURE__*/React__namespace.forwardRef(function InputBase(inProps, ref) {
     var _slotProps$input;
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiInputBase'
     });
@@ -22997,7 +23201,7 @@
   var autocompleteClasses$1 = autocompleteClasses;
 
   var _styled, _ClearIcon, _ArrowDropDownIcon;
-  var useThemeProps$4 = createUseThemeProps();
+  var useThemeProps$v = createUseThemeProps();
   var useUtilityClasses$1y = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disablePortal = ownerState.disablePortal,
@@ -23316,7 +23520,7 @@
   }));
   var Autocomplete = /*#__PURE__*/React__namespace.forwardRef(function Autocomplete(inProps, ref) {
     var _slotProps$clearIndic, _slotProps$paper, _slotProps$popper, _slotProps$popupIndic;
-    var props = useThemeProps$4({
+    var props = useThemeProps$v({
       props: inProps,
       name: 'MuiAutocomplete'
     });
@@ -24092,7 +24296,7 @@
   var avatarClasses = generateUtilityClasses$1('MuiAvatar', ['root', 'colorDefault', 'circular', 'rounded', 'square', 'img', 'fallback']);
   var avatarClasses$1 = avatarClasses;
 
-  var useThemeProps$3 = createUseThemeProps();
+  var useThemeProps$u = createUseThemeProps();
   var useUtilityClasses$1x = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       variant = ownerState.variant,
@@ -24224,7 +24428,7 @@
     return loaded;
   }
   var Avatar = /*#__PURE__*/React__namespace.forwardRef(function Avatar(inProps, ref) {
-    var props = useThemeProps$3({
+    var props = useThemeProps$u({
       props: inProps,
       name: 'MuiAvatar'
     });
@@ -24383,8 +24587,9 @@
 
   var SPACINGS$2 = {
     small: -16,
-    medium: null
+    medium: -8
   };
+  var useThemeProps$t = createUseThemeProps();
   var useUtilityClasses$1w = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -24400,21 +24605,22 @@
       return _extends(_defineProperty({}, "& .".concat(avatarGroupClasses$1.avatar), styles.avatar), styles.root);
     }
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    var marginValue = ownerState.spacing && SPACINGS$2[ownerState.spacing] !== undefined ? SPACINGS$2[ownerState.spacing] : -ownerState.spacing;
-    return _defineProperty(_defineProperty(_defineProperty({}, "& .".concat(avatarClasses$1.root), {
+    var theme = _ref.theme;
+    return _defineProperty({
+      display: 'flex',
+      flexDirection: 'row-reverse'
+    }, "& .".concat(avatarClasses$1.root), {
       border: "2px solid ".concat((theme.vars || theme).palette.background["default"]),
       boxSizing: 'content-box',
-      marginLeft: marginValue != null ? marginValue : -8,
+      marginLeft: 'var(--AvatarGroup-spacing, -8px)',
       '&:last-child': {
         marginLeft: 0
       }
-    }), "display", 'flex'), "flexDirection", 'row-reverse');
+    });
   });
   var AvatarGroup = /*#__PURE__*/React__namespace.forwardRef(function AvatarGroup(inProps, ref) {
     var _slotProps$additional;
-    var props = useThemeProps$b({
+    var props = useThemeProps$t({
       props: inProps,
       name: 'MuiAvatarGroup'
     });
@@ -24460,6 +24666,7 @@
     var extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
     var extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : "+".concat(extraAvatars);
     var additionalAvatarSlotProps = (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
+    var marginValue = ownerState.spacing && SPACINGS$2[ownerState.spacing] !== undefined ? SPACINGS$2[ownerState.spacing] : -ownerState.spacing || -8;
     return /*#__PURE__*/jsxRuntime_2(AvatarGroupRoot, _extends({
       as: component,
       ownerState: ownerState,
@@ -24470,6 +24677,9 @@
         variant: variant
       }, additionalAvatarSlotProps, {
         className: clsx(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
+        style: _extends({
+          '--AvatarRoot-spacing': marginValue ? "".concat(marginValue, "px") : undefined
+        }, other.style),
         children: extraAvatarsElement
       })) : null, children.slice(0, maxAvatars).reverse().map(function (child) {
         return /*#__PURE__*/React__namespace.cloneElement(child, {
@@ -24545,6 +24755,10 @@
      * @default 'medium'
      */
     spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]),
+    /**
+     * @ignore
+     */
+    style: PropTypes.object,
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
@@ -24762,6 +24976,7 @@
   var backdropClasses = generateUtilityClasses$1('MuiBackdrop', ['root', 'invisible']);
   var backdropClasses$1 = backdropClasses;
 
+  var useThemeProps$s = createUseThemeProps();
   var useUtilityClasses$1v = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       invisible = ownerState.invisible;
@@ -24777,26 +24992,28 @@
       var ownerState = props.ownerState;
       return [styles.root, ownerState.invisible && styles.invisible];
     }
-  })(function (_ref) {
-    var ownerState = _ref.ownerState;
-    return _extends({
-      position: 'fixed',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      right: 0,
-      bottom: 0,
-      top: 0,
-      left: 0,
-      backgroundColor: 'rgba(0, 0, 0, 0.5)',
-      WebkitTapHighlightColor: 'transparent'
-    }, ownerState.invisible && {
-      backgroundColor: 'transparent'
-    });
+  })({
+    position: 'fixed',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    right: 0,
+    bottom: 0,
+    top: 0,
+    left: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    WebkitTapHighlightColor: 'transparent',
+    variants: [{
+      props: {
+        invisible: true
+      },
+      style: {
+        backgroundColor: 'transparent'
+      }
+    }]
   });
   var Backdrop = /*#__PURE__*/React__namespace.forwardRef(function Backdrop(inProps, ref) {
-    var _slotProps$root, _ref2, _slots$root;
-    var props = useThemeProps$b({
+    var props = useThemeProps$s({
       props: inProps,
       name: 'MuiBackdrop'
     });
@@ -24804,37 +25021,59 @@
       className = props.className,
       _props$component = props.component,
       component = _props$component === void 0 ? 'div' : _props$component,
+      _props$invisible = props.invisible,
+      invisible = _props$invisible === void 0 ? false : _props$invisible,
+      open = props.open,
       _props$components = props.components,
       components = _props$components === void 0 ? {} : _props$components,
       _props$componentsProp = props.componentsProps,
       componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
-      _props$invisible = props.invisible,
-      invisible = _props$invisible === void 0 ? false : _props$invisible,
-      open = props.open,
       _props$slotProps = props.slotProps,
       slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
       _props$slots = props.slots,
       slots = _props$slots === void 0 ? {} : _props$slots,
-      _props$TransitionComp = props.TransitionComponent,
-      TransitionComponent = _props$TransitionComp === void 0 ? Fade$1 : _props$TransitionComp,
+      TransitionComponentProp = props.TransitionComponent,
       transitionDuration = props.transitionDuration,
-      other = _objectWithoutProperties(props, ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"]);
+      other = _objectWithoutProperties(props, ["children", "className", "component", "invisible", "open", "components", "componentsProps", "slotProps", "slots", "TransitionComponent", "transitionDuration"]);
     var ownerState = _extends({}, props, {
       component: component,
       invisible: invisible
     });
     var classes = useUtilityClasses$1v(ownerState);
-    var rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
-    return /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
+    var backwardCompatibleSlots = _extends({
+      transition: TransitionComponentProp,
+      root: components.Root
+    }, slots);
+    var backwardCompatibleSlotProps = _extends({}, componentsProps, slotProps);
+    var externalForwardedProps = {
+      slots: backwardCompatibleSlots,
+      slotProps: backwardCompatibleSlotProps
+    };
+    var _useSlot = useSlot('root', {
+        elementType: BackdropRoot,
+        externalForwardedProps: externalForwardedProps,
+        className: clsx(classes.root, className),
+        ownerState: ownerState
+      }),
+      _useSlot2 = _slicedToArray(_useSlot, 2),
+      RootSlot = _useSlot2[0],
+      rootProps = _useSlot2[1];
+    var _useSlot3 = useSlot('transition', {
+        elementType: Fade$1,
+        externalForwardedProps: externalForwardedProps,
+        ownerState: ownerState
+      }),
+      _useSlot4 = _slicedToArray(_useSlot3, 2),
+      TransitionSlot = _useSlot4[0],
+      transitionProps = _useSlot4[1];
+    delete transitionProps.ownerState;
+    return /*#__PURE__*/jsxRuntime_1(TransitionSlot, _extends({
       "in": open,
       timeout: transitionDuration
-    }, other, {
-      children: /*#__PURE__*/jsxRuntime_1(BackdropRoot, _extends({
+    }, other, transitionProps, {
+      children: /*#__PURE__*/jsxRuntime_1(RootSlot, _extends({
         "aria-hidden": true
-      }, rootSlotProps, {
-        as: (_ref2 = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref2 : component,
-        className: clsx(classes.root, className, rootSlotProps == null ? void 0 : rootSlotProps.className),
-        ownerState: _extends({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
+      }, rootProps, {
         classes: classes,
         ref: ref,
         children: children
@@ -24897,25 +25136,20 @@
      */
     open: PropTypes.bool.isRequired,
     /**
-     * The extra props for the slot components.
-     * You can override the existing props or add new ones.
-     *
-     * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-     *
+     * The props used for each slot inside.
      * @default {}
      */
     slotProps: PropTypes.shape({
-      root: PropTypes.object
+      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
     }),
     /**
      * The components used for each slot inside.
-     *
-     * This prop is an alias for the `components` prop, which will be deprecated in the future.
-     *
      * @default {}
      */
     slots: PropTypes.shape({
-      root: PropTypes.elementType
+      root: PropTypes.elementType,
+      transition: PropTypes.elementType
     }),
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -24925,6 +25159,7 @@
      * The component used for the transition.
      * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
      * @default Fade
+     * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
      */
     TransitionComponent: PropTypes.elementType,
     /**
@@ -24949,7 +25184,7 @@
 
   var RADIUS_STANDARD = 10;
   var RADIUS_DOT = 4;
-  var useThemeProps$2 = createUseThemeProps();
+  var useThemeProps$r = createUseThemeProps();
   var useUtilityClasses$1u = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       anchorOrigin = ownerState.anchorOrigin,
@@ -25152,7 +25387,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$2({
+    var props = useThemeProps$r({
       props: inProps,
       name: 'MuiBadge'
     });
@@ -25301,8 +25536,7 @@
     /**
      * The components used for each slot inside.
      *
-     * This prop is an alias for the `slots` prop.
-     * It's recommended to use the `slots` prop instead.
+     * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
      *
      * @default {}
      */
@@ -25314,8 +25548,7 @@
      * The extra props for the slot components.
      * You can override the existing props or add new ones.
      *
-     * This prop is an alias for the `slotProps` prop.
-     * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+     * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
      *
      * @default {}
      */
@@ -25378,6 +25611,7 @@
   var bottomNavigationClasses = generateUtilityClasses$1('MuiBottomNavigation', ['root']);
   var bottomNavigationClasses$1 = bottomNavigationClasses;
 
+  var useThemeProps$q = createUseThemeProps();
   var useUtilityClasses$1t = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -25401,7 +25635,7 @@
     };
   });
   var BottomNavigation = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigation(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$q({
       props: inProps,
       name: 'MuiBottomNavigation'
     });
@@ -25496,6 +25730,7 @@
   var bottomNavigationActionClasses = generateUtilityClasses$1('MuiBottomNavigationAction', ['root', 'iconOnly', 'selected', 'label']);
   var bottomNavigationActionClasses$1 = bottomNavigationActionClasses;
 
+  var useThemeProps$p = createUseThemeProps();
   var useUtilityClasses$1s = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       showLabel = ownerState.showLabel,
@@ -25514,9 +25749,8 @@
       return [styles.root, !ownerState.showLabel && !ownerState.selected && styles.iconOnly];
     }
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    return _extends({
+    var theme = _ref.theme;
+    return _defineProperty(_defineProperty({
       transition: theme.transitions.create(['color', 'padding-top'], {
         duration: theme.transitions.duration["short"]
       }),
@@ -25526,13 +25760,28 @@
       color: (theme.vars || theme).palette.text.secondary,
       flexDirection: 'column',
       flex: '1'
-    }, !ownerState.showLabel && !ownerState.selected && {
-      paddingTop: 14
-    }, !ownerState.showLabel && !ownerState.selected && !ownerState.label && {
-      paddingTop: 0
-    }, _defineProperty({}, "&.".concat(bottomNavigationActionClasses$1.selected), {
+    }, "&.".concat(bottomNavigationActionClasses$1.selected), {
       color: (theme.vars || theme).palette.primary.main
-    }));
+    }), "variants", [{
+      props: function props(_ref2) {
+        var showLabel = _ref2.showLabel,
+          selected = _ref2.selected;
+        return !showLabel && !selected;
+      },
+      style: {
+        paddingTop: 14
+      }
+    }, {
+      props: function props(_ref3) {
+        var showLabel = _ref3.showLabel,
+          selected = _ref3.selected,
+          label = _ref3.label;
+        return !showLabel && !selected && !label;
+      },
+      style: {
+        paddingTop: 0
+      }
+    }]);
   });
   var BottomNavigationActionLabel = styled$1('span', {
     name: 'MuiBottomNavigationAction',
@@ -25540,24 +25789,30 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.label;
     }
-  })(function (_ref2) {
-    var theme = _ref2.theme,
-      ownerState = _ref2.ownerState;
-    return _extends({
+  })(function (_ref5) {
+    var theme = _ref5.theme;
+    return _defineProperty(_defineProperty({
       fontFamily: theme.typography.fontFamily,
       fontSize: theme.typography.pxToRem(12),
       opacity: 1,
       transition: 'font-size 0.2s, opacity 0.2s',
       transitionDelay: '0.1s'
-    }, !ownerState.showLabel && !ownerState.selected && {
-      opacity: 0,
-      transitionDelay: '0s'
-    }, _defineProperty({}, "&.".concat(bottomNavigationActionClasses$1.selected), {
+    }, "&.".concat(bottomNavigationActionClasses$1.selected), {
       fontSize: theme.typography.pxToRem(14)
-    }));
+    }), "variants", [{
+      props: function props(_ref6) {
+        var showLabel = _ref6.showLabel,
+          selected = _ref6.selected;
+        return !showLabel && !selected;
+      },
+      style: {
+        opacity: 0,
+        transitionDelay: '0s'
+      }
+    }]);
   });
   var BottomNavigationAction = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigationAction(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$p({
       props: inProps,
       name: 'MuiBottomNavigationAction'
     });
@@ -25765,6 +26020,7 @@
   var breadcrumbsClasses = generateUtilityClasses$1('MuiBreadcrumbs', ['root', 'ol', 'li', 'separator']);
   var breadcrumbsClasses$1 = breadcrumbsClasses;
 
+  var useThemeProps$o = createUseThemeProps();
   var useUtilityClasses$1r = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -25824,7 +26080,7 @@
     }, []);
   }
   var Breadcrumbs = /*#__PURE__*/React__namespace.forwardRef(function Breadcrumbs(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$o({
       props: inProps,
       name: 'MuiBreadcrumbs'
     });
@@ -26024,6 +26280,7 @@
   }
   var ButtonGroupButtonContext$1 = ButtonGroupButtonContext;
 
+  var useThemeProps$n = createUseThemeProps();
   var useUtilityClasses$1q = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       disableElevation = ownerState.disableElevation,
@@ -26040,21 +26297,34 @@
     var composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
     return _extends({}, classes, composedClasses);
   };
-  var commonIconStyles = function commonIconStyles(ownerState) {
-    return _extends({}, ownerState.size === 'small' && {
+  var commonIconStyles = [{
+    props: {
+      size: 'small'
+    },
+    style: {
       '& > *:nth-of-type(1)': {
         fontSize: 18
       }
-    }, ownerState.size === 'medium' && {
+    }
+  }, {
+    props: {
+      size: 'medium'
+    },
+    style: {
       '& > *:nth-of-type(1)': {
         fontSize: 20
       }
-    }, ownerState.size === 'large' && {
+    }
+  }, {
+    props: {
+      size: 'large'
+    },
+    style: {
       '& > *:nth-of-type(1)': {
         fontSize: 22
       }
-    });
-  };
+    }
+  }];
   var ButtonRoot = styled$1(ButtonBase$1, {
     shouldForwardProp: function shouldForwardProp(prop) {
       return rootShouldForwardProp$1(prop) || prop === 'classes';
@@ -26067,122 +26337,191 @@
     }
   })(function (_ref) {
     var _theme$palette$getCon, _theme$palette;
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
+    var theme = _ref.theme;
     var inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
     var inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
     return _extends({}, theme.typography.button, _defineProperty(_defineProperty({
       minWidth: 64,
       padding: '6px 16px',
+      border: 0,
       borderRadius: (theme.vars || theme).shape.borderRadius,
       transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
         duration: theme.transitions.duration["short"]
       }),
-      '&:hover': _extends({
-        textDecoration: 'none',
-        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-        border: "1px solid ".concat((theme.vars || theme).palette[ownerState.color].main),
-        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
+      '&:hover': {
+        textDecoration: 'none'
+      }
+    }, "&.".concat(buttonClasses$1.disabled), {
+      color: (theme.vars || theme).palette.action.disabled
+    }), "variants", [{
+      props: {
+        variant: 'contained'
+      },
+      style: _defineProperty(_defineProperty({
+        color: "var(--variant-containedColor)",
+        backgroundColor: "var(--variant-containedBg)",
+        boxShadow: (theme.vars || theme).shadows[2],
+        '&:hover': {
+          boxShadow: (theme.vars || theme).shadows[4],
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            boxShadow: (theme.vars || theme).shadows[2]
+          }
+        },
+        '&:active': {
+          boxShadow: (theme.vars || theme).shadows[8]
+        }
+      }, "&.".concat(buttonClasses$1.focusVisible), {
+        boxShadow: (theme.vars || theme).shadows[6]
+      }), "&.".concat(buttonClasses$1.disabled), {
+        color: (theme.vars || theme).palette.action.disabled,
+        boxShadow: (theme.vars || theme).shadows[0],
+        backgroundColor: (theme.vars || theme).palette.action.disabledBackground
+      })
+    }, {
+      props: {
+        variant: 'outlined'
+      },
+      style: _defineProperty({
+        padding: '5px 15px',
+        border: '1px solid currentColor',
+        borderColor: "var(--variant-outlinedBorder, currentColor)",
+        backgroundColor: "var(--variant-outlinedBg)",
+        color: "var(--variant-outlinedColor)"
+      }, "&.".concat(buttonClasses$1.disabled), {
+        border: "1px solid ".concat((theme.vars || theme).palette.action.disabledBackground)
+      })
+    }, {
+      props: {
+        variant: 'text'
+      },
+      style: {
+        padding: '6px 8px',
+        color: "var(--variant-textColor)",
+        backgroundColor: "var(--variant-textBg)"
+      }
+    }].concat(_toConsumableArray(Object.entries(theme.palette).filter(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        palette = _ref3[1];
+      return palette.main && palette.dark && palette.contrastText;
+    }).map(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 1),
+        color = _ref5[0];
+      return {
+        props: {
+          color: color
+        },
+        style: {
+          '--variant-textColor': (theme.vars || theme).palette[color].main,
+          '--variant-outlinedColor': (theme.vars || theme).palette[color].main,
+          '--variant-outlinedBorder': theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.5)") : alpha(theme.palette[color].main, 0.5),
+          '--variant-containedColor': (theme.vars || theme).palette[color].contrastText,
+          '--variant-containedBg': (theme.vars || theme).palette[color].main,
+          '@media (hover: hover)': {
+            '&:hover': {
+              '--variant-containedBg': (theme.vars || theme).palette[color].dark,
+              '--variant-textBg': theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
+              '--variant-outlinedBorder': (theme.vars || theme).palette[color].main,
+              '--variant-outlinedBg': theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+            }
+          }
         }
-      }, ownerState.variant === 'contained' && {
-        backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
-        boxShadow: (theme.vars || theme).shadows[4],
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          boxShadow: (theme.vars || theme).shadows[2],
-          backgroundColor: (theme.vars || theme).palette.grey[300]
+      };
+    })), [{
+      props: {
+        color: 'inherit'
+      },
+      style: {
+        '--variant-containedColor': theme.vars ?
+        // this is safe because grey does not change between default light/dark mode
+        theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, inheritContainedBackgroundColor),
+        '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
+        '@media (hover: hover)': {
+          '&:hover': {
+            '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
+            '--variant-textBg': theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+            '--variant-outlinedBg': theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity)
+          }
         }
-      }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-        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
+      }
+    }, {
+      props: {
+        size: 'small',
+        variant: 'text'
+      },
+      style: {
+        padding: '4px 5px',
+        fontSize: theme.typography.pxToRem(13)
+      }
+    }, {
+      props: {
+        size: 'large',
+        variant: 'text'
+      },
+      style: {
+        padding: '8px 11px',
+        fontSize: theme.typography.pxToRem(15)
+      }
+    }, {
+      props: {
+        size: 'small',
+        variant: 'outlined'
+      },
+      style: {
+        padding: '3px 9px',
+        fontSize: theme.typography.pxToRem(13)
+      }
+    }, {
+      props: {
+        size: 'large',
+        variant: 'outlined'
+      },
+      style: {
+        padding: '7px 21px',
+        fontSize: theme.typography.pxToRem(15)
+      }
+    }, {
+      props: {
+        size: 'small',
+        variant: 'contained'
+      },
+      style: {
+        padding: '4px 10px',
+        fontSize: theme.typography.pxToRem(13)
+      }
+    }, {
+      props: {
+        size: 'large',
+        variant: 'contained'
+      },
+      style: {
+        padding: '8px 22px',
+        fontSize: theme.typography.pxToRem(15)
+      }
+    }, {
+      props: {
+        disableElevation: true
+      },
+      style: _defineProperty(_defineProperty(_defineProperty({
+        boxShadow: 'none',
+        '&:hover': {
+          boxShadow: 'none'
         }
-      }),
-      '&:active': _extends({}, ownerState.variant === 'contained' && {
-        boxShadow: (theme.vars || theme).shadows[8]
-      })
-    }, "&.".concat(buttonClasses$1.focusVisible), _extends({}, ownerState.variant === 'contained' && {
-      boxShadow: (theme.vars || theme).shadows[6]
-    })), "&.".concat(buttonClasses$1.disabled), _extends({
-      color: (theme.vars || theme).palette.action.disabled
-    }, ownerState.variant === 'outlined' && {
-      border: "1px solid ".concat((theme.vars || theme).palette.action.disabledBackground)
-    }, ownerState.variant === 'contained' && {
-      color: (theme.vars || theme).palette.action.disabled,
-      boxShadow: (theme.vars || theme).shadows[0],
-      backgroundColor: (theme.vars || theme).palette.action.disabledBackground
-    })), ownerState.variant === 'text' && {
-      padding: '6px 8px'
-    }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-      color: (theme.vars || theme).palette[ownerState.color].main
-    }, ownerState.variant === 'outlined' && {
-      padding: '5px 15px',
-      border: '1px solid currentColor'
-    }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-      color: (theme.vars || theme).palette[ownerState.color].main,
-      border: theme.vars ? "1px solid rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.5)") : "1px solid ".concat(alpha(theme.palette[ownerState.color].main, 0.5))
-    }, ownerState.variant === 'contained' && {
-      color: theme.vars ?
-      // this is safe because grey does not change between default light/dark mode
-      theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
-      backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
-      boxShadow: (theme.vars || theme).shadows[2]
-    }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-      color: (theme.vars || theme).palette[ownerState.color].contrastText,
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-    }, ownerState.color === 'inherit' && {
-      color: 'inherit',
-      borderColor: 'currentColor'
-    }, ownerState.size === 'small' && ownerState.variant === 'text' && {
-      padding: '4px 5px',
-      fontSize: theme.typography.pxToRem(13)
-    }, ownerState.size === 'large' && ownerState.variant === 'text' && {
-      padding: '8px 11px',
-      fontSize: theme.typography.pxToRem(15)
-    }, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
-      padding: '3px 9px',
-      fontSize: theme.typography.pxToRem(13)
-    }, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
-      padding: '7px 21px',
-      fontSize: theme.typography.pxToRem(15)
-    }, ownerState.size === 'small' && ownerState.variant === 'contained' && {
-      padding: '4px 10px',
-      fontSize: theme.typography.pxToRem(13)
-    }, ownerState.size === 'large' && ownerState.variant === 'contained' && {
-      padding: '8px 22px',
-      fontSize: theme.typography.pxToRem(15)
-    }, ownerState.fullWidth && {
-      width: '100%'
-    });
-  }, function (_ref2) {
-    var ownerState = _ref2.ownerState;
-    return ownerState.disableElevation && _defineProperty(_defineProperty(_defineProperty({
-      boxShadow: 'none',
-      '&:hover': {
+      }, "&.".concat(buttonClasses$1.focusVisible), {
+        boxShadow: 'none'
+      }), '&:active', {
         boxShadow: 'none'
+      }), "&.".concat(buttonClasses$1.disabled), {
+        boxShadow: 'none'
+      })
+    }, {
+      props: {
+        fullWidth: true
+      },
+      style: {
+        width: '100%'
       }
-    }, "&.".concat(buttonClasses$1.focusVisible), {
-      boxShadow: 'none'
-    }), '&:active', {
-      boxShadow: 'none'
-    }), "&.".concat(buttonClasses$1.disabled), {
-      boxShadow: 'none'
-    });
+    }])));
   });
   var ButtonStartIcon = styled$1('span', {
     name: 'MuiButton',
@@ -26191,15 +26530,20 @@
       var ownerState = props.ownerState;
       return [styles.startIcon, styles["iconSize".concat(capitalize(ownerState.size))]];
     }
-  })(function (_ref4) {
-    var ownerState = _ref4.ownerState;
-    return _extends({
+  })(function () {
+    return {
       display: 'inherit',
       marginRight: 8,
-      marginLeft: -4
-    }, ownerState.size === 'small' && {
-      marginLeft: -2
-    }, commonIconStyles(ownerState));
+      marginLeft: -4,
+      variants: [{
+        props: {
+          size: 'small'
+        },
+        style: {
+          marginLeft: -2
+        }
+      }].concat(commonIconStyles)
+    };
   });
   var ButtonEndIcon = styled$1('span', {
     name: 'MuiButton',
@@ -26208,22 +26552,27 @@
       var ownerState = props.ownerState;
       return [styles.endIcon, styles["iconSize".concat(capitalize(ownerState.size))]];
     }
-  })(function (_ref5) {
-    var ownerState = _ref5.ownerState;
-    return _extends({
+  })(function () {
+    return {
       display: 'inherit',
       marginRight: -4,
-      marginLeft: 8
-    }, ownerState.size === 'small' && {
-      marginRight: -2
-    }, commonIconStyles(ownerState));
+      marginLeft: 8,
+      variants: [{
+        props: {
+          size: 'small'
+        },
+        style: {
+          marginRight: -2
+        }
+      }].concat(commonIconStyles)
+    };
   });
   var Button = /*#__PURE__*/React__namespace.forwardRef(function Button(inProps, ref) {
     // props priority: `inProps` > `contextProps` > `themeDefaultProps`
     var contextProps = React__namespace.useContext(ButtonGroupContext$1);
     var buttonGroupButtonContextPositionClassName = React__namespace.useContext(ButtonGroupButtonContext$1);
     var resolvedProps = resolveProps(contextProps, inProps);
-    var props = useThemeProps$b({
+    var props = useThemeProps$n({
       props: resolvedProps,
       name: 'MuiButton'
     });
@@ -26386,9 +26735,10 @@
   function getButtonGroupUtilityClass(slot) {
     return generateUtilityClass$1('MuiButtonGroup', slot);
   }
-  var buttonGroupClasses = generateUtilityClasses$1('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'firstButton', 'fullWidth', 'vertical', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', 'lastButton', 'middleButton']);
+  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 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];
@@ -26402,7 +26752,7 @@
       orientation = ownerState.orientation,
       variant = ownerState.variant;
     var slots = {
-      root: ['root', variant, orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth', disableElevation && 'disableElevation'],
+      root: ['root', variant, orientation, fullWidth && 'fullWidth', disableElevation && 'disableElevation', "color".concat(capitalize(color))],
       grouped: ['grouped', "grouped".concat(capitalize(orientation)), "grouped".concat(capitalize(variant)), "grouped".concat(capitalize(variant)).concat(capitalize(orientation)), "grouped".concat(capitalize(variant)).concat(capitalize(color)), disabled && 'disabled'],
       firstButton: ['firstButton'],
       lastButton: ['lastButton'],
@@ -26415,76 +26765,169 @@
     slot: 'Root',
     overridesResolver: overridesResolver$6
   })(function (_ref9) {
-    var theme = _ref9.theme,
-      ownerState = _ref9.ownerState;
-    return _extends({
+    var theme = _ref9.theme;
+    return _defineProperty({
       display: 'inline-flex',
-      borderRadius: (theme.vars || theme).shape.borderRadius
-    }, ownerState.variant === 'contained' && {
-      boxShadow: (theme.vars || theme).shadows[2]
-    }, ownerState.disableElevation && {
-      boxShadow: 'none'
-    }, ownerState.fullWidth && {
-      width: '100%'
-    }, ownerState.orientation === 'vertical' && {
-      flexDirection: 'column'
-    }, _defineProperty(_defineProperty(_defineProperty({}, "& .".concat(buttonGroupClasses$1.grouped), _extends({
+      borderRadius: (theme.vars || theme).shape.borderRadius,
+      variants: [{
+        props: {
+          variant: 'contained'
+        },
+        style: {
+          boxShadow: (theme.vars || theme).shadows[2]
+        }
+      }, {
+        props: {
+          disableElevation: true
+        },
+        style: {
+          boxShadow: 'none'
+        }
+      }, {
+        props: {
+          fullWidth: true
+        },
+        style: {
+          width: '100%'
+        }
+      }, {
+        props: {
+          orientation: 'vertical'
+        },
+        style: _defineProperty(_defineProperty({
+          flexDirection: 'column'
+        }, "& .".concat(buttonGroupClasses$1.lastButton, ",& .").concat(buttonGroupClasses$1.middleButton), {
+          borderTopRightRadius: 0,
+          borderTopLeftRadius: 0
+        }), "& .".concat(buttonGroupClasses$1.firstButton, ",& .").concat(buttonGroupClasses$1.middleButton), {
+          borderBottomRightRadius: 0,
+          borderBottomLeftRadius: 0
+        })
+      }, {
+        props: {
+          orientation: 'horizontal'
+        },
+        style: _defineProperty(_defineProperty({}, "& .".concat(buttonGroupClasses$1.firstButton, ",& .").concat(buttonGroupClasses$1.middleButton), {
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0
+        }), "& .".concat(buttonGroupClasses$1.lastButton, ",& .").concat(buttonGroupClasses$1.middleButton), {
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0
+        })
+      }, {
+        props: {
+          variant: 'text',
+          orientation: 'horizontal'
+        },
+        style: _defineProperty({}, "& .".concat(buttonGroupClasses$1.firstButton, ",& .").concat(buttonGroupClasses$1.middleButton), _defineProperty({
+          borderRight: 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(buttonGroupClasses$1.disabled), {
+          borderRight: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
+        }))
+      }, {
+        props: {
+          variant: 'text',
+          orientation: 'vertical'
+        },
+        style: _defineProperty({}, "& .".concat(buttonGroupClasses$1.firstButton, ",& .").concat(buttonGroupClasses$1.middleButton), _defineProperty({
+          borderBottom: 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(buttonGroupClasses$1.disabled), {
+          borderBottom: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
+        }))
+      }].concat(_toConsumableArray(Object.entries(theme.palette).filter(function (_ref10) {
+        var _ref11 = _slicedToArray(_ref10, 2),
+          value = _ref11[1];
+        return value.main;
+      }).flatMap(function (_ref12) {
+        var _ref13 = _slicedToArray(_ref12, 1),
+          color = _ref13[0];
+        return [{
+          props: {
+            variant: 'text',
+            color: color
+          },
+          style: _defineProperty({}, "& .".concat(buttonGroupClasses$1.firstButton, ",& .").concat(buttonGroupClasses$1.middleButton), {
+            borderColor: theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.5)") : alpha(theme.palette[color].main, 0.5)
+          })
+        }];
+      })), [{
+        props: {
+          variant: 'outlined',
+          orientation: 'horizontal'
+        },
+        style: _defineProperty(_defineProperty({}, "& .".concat(buttonGroupClasses$1.firstButton, ",& .").concat(buttonGroupClasses$1.middleButton), {
+          borderRightColor: 'transparent',
+          '&:hover': {
+            borderRightColor: 'currentColor'
+          }
+        }), "& .".concat(buttonGroupClasses$1.lastButton, ",& .").concat(buttonGroupClasses$1.middleButton), {
+          marginLeft: -1
+        })
+      }, {
+        props: {
+          variant: 'outlined',
+          orientation: 'vertical'
+        },
+        style: _defineProperty(_defineProperty({}, "& .".concat(buttonGroupClasses$1.firstButton, ",& .").concat(buttonGroupClasses$1.middleButton), {
+          borderBottomColor: 'transparent',
+          '&:hover': {
+            borderBottomColor: 'currentColor'
+          }
+        }), "& .".concat(buttonGroupClasses$1.lastButton, ",& .").concat(buttonGroupClasses$1.middleButton), {
+          marginTop: -1
+        })
+      }, {
+        props: {
+          variant: 'contained',
+          orientation: 'horizontal'
+        },
+        style: _defineProperty({}, "& .".concat(buttonGroupClasses$1.firstButton, ",& .").concat(buttonGroupClasses$1.middleButton), _defineProperty({
+          borderRight: "1px solid ".concat((theme.vars || theme).palette.grey[400])
+        }, "&.".concat(buttonGroupClasses$1.disabled), {
+          borderRight: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
+        }))
+      }, {
+        props: {
+          variant: 'contained',
+          orientation: 'vertical'
+        },
+        style: _defineProperty({}, "& .".concat(buttonGroupClasses$1.firstButton, ",& .").concat(buttonGroupClasses$1.middleButton), _defineProperty({
+          borderBottom: "1px solid ".concat((theme.vars || theme).palette.grey[400])
+        }, "&.".concat(buttonGroupClasses$1.disabled), {
+          borderBottom: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
+        }))
+      }], _toConsumableArray(Object.entries(theme.palette).filter(function (_ref14) {
+        var _ref15 = _slicedToArray(_ref14, 2),
+          value = _ref15[1];
+        return value.dark;
+      }).map(function (_ref16) {
+        var _ref17 = _slicedToArray(_ref16, 1),
+          color = _ref17[0];
+        return {
+          props: {
+            variant: 'contained',
+            color: color
+          },
+          style: _defineProperty({}, "& .".concat(buttonGroupClasses$1.firstButton, ",& .").concat(buttonGroupClasses$1.middleButton), {
+            borderColor: (theme.vars || theme).palette[color].dark
+          })
+        };
+      })))
+    }, "& .".concat(buttonGroupClasses$1.grouped), {
       minWidth: 40,
-      '&:hover': _extends({}, ownerState.variant === 'contained' && {
-        boxShadow: 'none'
-      })
-    }, ownerState.variant === 'contained' && {
-      boxShadow: 'none'
-    })), "& .".concat(buttonGroupClasses$1.firstButton, ",& .").concat(buttonGroupClasses$1.middleButton), _extends({}, ownerState.orientation === 'horizontal' && {
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0
-    }, ownerState.orientation === 'vertical' && {
-      borderBottomRightRadius: 0,
-      borderBottomLeftRadius: 0
-    }, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && _defineProperty({
-      borderRight: 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(buttonGroupClasses$1.disabled), {
-      borderRight: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
-    }), ownerState.variant === 'text' && ownerState.orientation === 'vertical' && _defineProperty({
-      borderBottom: 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(buttonGroupClasses$1.disabled), {
-      borderBottom: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
-    }), ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-      borderColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.5)") : alpha(theme.palette[ownerState.color].main, 0.5)
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-      borderRightColor: 'transparent'
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-      borderBottomColor: 'transparent'
-    }, ownerState.variant === 'contained' && ownerState.orientation === 'horizontal' && _defineProperty({
-      borderRight: "1px solid ".concat((theme.vars || theme).palette.grey[400])
-    }, "&.".concat(buttonGroupClasses$1.disabled), {
-      borderRight: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
-    }), ownerState.variant === 'contained' && ownerState.orientation === 'vertical' && _defineProperty({
-      borderBottom: "1px solid ".concat((theme.vars || theme).palette.grey[400])
-    }, "&.".concat(buttonGroupClasses$1.disabled), {
-      borderBottom: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
-    }), ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-      borderColor: (theme.vars || theme).palette[ownerState.color].dark
-    }, {
-      '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-        borderRightColor: 'currentColor'
-      }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-        borderBottomColor: 'currentColor'
-      })
-    })), "& .".concat(buttonGroupClasses$1.lastButton, ",& .").concat(buttonGroupClasses$1.middleButton), _extends({}, ownerState.orientation === 'horizontal' && {
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0
-    }, ownerState.orientation === 'vertical' && {
-      borderTopRightRadius: 0,
-      borderTopLeftRadius: 0
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-      marginLeft: -1
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-      marginTop: -1
-    })));
+      boxShadow: 'none',
+      props: {
+        variant: 'contained'
+      },
+      style: {
+        '&:hover': {
+          boxShadow: 'none'
+        }
+      }
+    });
   });
   var ButtonGroup = /*#__PURE__*/React__namespace.forwardRef(function ButtonGroup(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$m({
       props: inProps,
       name: 'MuiButtonGroup'
     });
@@ -26654,6 +27097,7 @@
   var cardClasses = generateUtilityClasses$1('MuiCard', ['root']);
   var cardClasses$1 = cardClasses;
 
+  var useThemeProps$l = createUseThemeProps();
   var useUtilityClasses$1o = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -26667,13 +27111,11 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.root;
     }
-  })(function () {
-    return {
-      overflow: 'hidden'
-    };
+  })({
+    overflow: 'hidden'
   });
   var Card = /*#__PURE__*/React__namespace.forwardRef(function Card(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$l({
       props: inProps,
       name: 'MuiCard'
     });
@@ -26732,6 +27174,7 @@
   var cardActionAreaClasses = generateUtilityClasses$1('MuiCardActionArea', ['root', 'focusVisible', 'focusHighlight']);
   var cardActionAreaClasses$1 = cardActionAreaClasses;
 
+  var useThemeProps$k = createUseThemeProps();
   var useUtilityClasses$1n = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -26788,7 +27231,7 @@
     };
   });
   var CardActionArea = /*#__PURE__*/React__namespace.forwardRef(function CardActionArea(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$k({
       props: inProps,
       name: 'MuiCardActionArea'
     });
@@ -26844,6 +27287,7 @@
   var cardActionsClasses = generateUtilityClasses$1('MuiCardActions', ['root', 'spacing']);
   var cardActionsClasses$1 = cardActionsClasses;
 
+  var useThemeProps$j = createUseThemeProps();
   var useUtilityClasses$1m = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disableSpacing = ownerState.disableSpacing;
@@ -26859,20 +27303,23 @@
       var ownerState = props.ownerState;
       return [styles.root, !ownerState.disableSpacing && styles.spacing];
     }
-  })(function (_ref) {
-    var ownerState = _ref.ownerState;
-    return _extends({
-      display: 'flex',
-      alignItems: 'center',
-      padding: 8
-    }, !ownerState.disableSpacing && {
-      '& > :not(style) ~ :not(style)': {
-        marginLeft: 8
+  })({
+    display: 'flex',
+    alignItems: 'center',
+    padding: 8,
+    variants: [{
+      props: {
+        disableSpacing: false
+      },
+      style: {
+        '& > :not(style) ~ :not(style)': {
+          marginLeft: 8
+        }
       }
-    });
+    }]
   });
   var CardActions = /*#__PURE__*/React__namespace.forwardRef(function CardActions(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$j({
       props: inProps,
       name: 'MuiCardActions'
     });
@@ -26925,6 +27372,7 @@
   var cardContentClasses = generateUtilityClasses$1('MuiCardContent', ['root']);
   var cardContentClasses$1 = cardContentClasses;
 
+  var useThemeProps$i = createUseThemeProps();
   var useUtilityClasses$1l = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -26938,16 +27386,14 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.root;
     }
-  })(function () {
-    return {
-      padding: 16,
-      '&:last-child': {
-        paddingBottom: 24
-      }
-    };
+  })({
+    padding: 16,
+    '&:last-child': {
+      paddingBottom: 24
+    }
   });
   var CardContent = /*#__PURE__*/React__namespace.forwardRef(function CardContent(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$i({
       props: inProps,
       name: 'MuiCardContent'
     });
@@ -27001,6 +27447,7 @@
   var cardHeaderClasses = generateUtilityClasses$1('MuiCardHeader', ['root', 'avatar', 'action', 'content', 'title', 'subheader']);
   var cardHeaderClasses$1 = cardHeaderClasses;
 
+  var useThemeProps$h = createUseThemeProps();
   var useUtilityClasses$1k = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -27058,7 +27505,7 @@
     flex: '1 1 auto'
   });
   var CardHeader = /*#__PURE__*/React__namespace.forwardRef(function CardHeader(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$h({
       props: inProps,
       name: 'MuiCardHeader'
     });
@@ -27192,6 +27639,7 @@
   var cardMediaClasses = generateUtilityClasses$1('MuiCardMedia', ['root', 'media', 'img']);
   var cardMediaClasses$1 = cardMediaClasses;
 
+  var useThemeProps$g = createUseThemeProps();
   var useUtilityClasses$1j = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       isMediaComponent = ownerState.isMediaComponent,
@@ -27210,24 +27658,32 @@
         isImageComponent = ownerState.isImageComponent;
       return [styles.root, isMediaComponent && styles.media, isImageComponent && styles.img];
     }
-  })(function (_ref) {
-    var ownerState = _ref.ownerState;
-    return _extends({
-      display: 'block',
-      backgroundSize: 'cover',
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: 'center'
-    }, ownerState.isMediaComponent && {
-      width: '100%'
-    }, ownerState.isImageComponent && {
-      // ⚠️ object-fit is not supported by IE11.
-      objectFit: 'cover'
-    });
+  })({
+    display: 'block',
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    variants: [{
+      props: {
+        isMediaComponent: true
+      },
+      style: {
+        width: '100%'
+      }
+    }, {
+      props: {
+        isImageComponent: true
+      },
+      style: {
+        // ⚠️ object-fit is not supported by IE11.
+        objectFit: 'cover'
+      }
+    }]
   });
   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$b({
+    var props = useThemeProps$g({
       props: inProps,
       name: 'MuiCardMedia'
     });
@@ -27638,7 +28094,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$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiCheckbox'
     });
@@ -27870,7 +28326,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$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiCircularProgress'
     });
@@ -28011,7 +28467,7 @@
       }
     }),
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$b({
+      return useThemeProps$G({
         props: inProps,
         name: 'MuiContainer'
       });
@@ -28134,7 +28590,7 @@
     return defaultStyles;
   };
   function CssBaseline(inProps) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiCssBaseline'
     });
@@ -28207,6 +28663,7 @@
   var modalClasses = generateUtilityClasses$1('MuiModal', ['root', 'hidden', 'backdrop']);
   var modalClasses$1 = modalClasses;
 
+  var useThemeProps$f = createUseThemeProps();
   var useUtilityClasses$1f = function useUtilityClasses(ownerState) {
     var open = ownerState.open,
       exited = ownerState.exited,
@@ -28225,18 +28682,24 @@
       return [styles.root, !ownerState.open && ownerState.exited && styles.hidden];
     }
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    return _extends({
+    var theme = _ref.theme;
+    return {
       position: 'fixed',
       zIndex: (theme.vars || theme).zIndex.modal,
       right: 0,
       bottom: 0,
       top: 0,
-      left: 0
-    }, !ownerState.open && ownerState.exited && {
-      visibility: 'hidden'
-    });
+      left: 0,
+      variants: [{
+        props: function props(_ref2) {
+          var ownerState = _ref2.ownerState;
+          return !ownerState.open && ownerState.exited;
+        },
+        style: {
+          visibility: 'hidden'
+        }
+      }]
+    };
   });
   var ModalBackdrop = styled$1(Backdrop$1, {
     name: 'MuiModal',
@@ -28262,8 +28725,8 @@
    * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
    */
   var Modal = /*#__PURE__*/React__namespace.forwardRef(function Modal(inProps, ref) {
-    var _ref2, _slots$root, _ref3, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
-    var props = useThemeProps$b({
+    var _ref3, _slots$root, _ref4, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
+    var props = useThemeProps$f({
       name: 'MuiModal',
       props: inProps
     });
@@ -28344,8 +28807,8 @@
       childProps.onEnter = onEnter;
       childProps.onExited = onExited;
     }
-    var RootSlot = (_ref2 = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref2 : ModalRoot;
-    var BackdropSlot = (_ref3 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref3 : BackdropComponent;
+    var RootSlot = (_ref3 = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref3 : ModalRoot;
+    var BackdropSlot = (_ref4 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref4 : BackdropComponent;
     var rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
     var backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
     var rootProps = useSlotProps({
@@ -28717,7 +29180,7 @@
    * Dialogs are overlaid modal paper based components with a backdrop.
    */
   var Dialog = /*#__PURE__*/React__namespace.forwardRef(function Dialog(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiDialog'
     });
@@ -29001,7 +29464,7 @@
     });
   });
   var DialogActions = /*#__PURE__*/React__namespace.forwardRef(function DialogActions(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiDialogActions'
     });
@@ -29093,7 +29556,7 @@
     }));
   });
   var DialogContent = /*#__PURE__*/React__namespace.forwardRef(function DialogContent(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiDialogContent'
     });
@@ -29165,7 +29628,7 @@
     }
   })({});
   var DialogContentText = /*#__PURE__*/React__namespace.forwardRef(function DialogContentText(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiDialogContentText'
     });
@@ -29226,7 +29689,7 @@
     flex: '0 0 auto'
   });
   var DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function DialogTitle(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiDialogTitle'
     });
@@ -29281,6 +29744,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 useUtilityClasses$19 = function useUtilityClasses(ownerState) {
     var absolute = ownerState.absolute,
       children = ownerState.children,
@@ -29304,87 +29768,140 @@
       return [styles.root, ownerState.absolute && styles.absolute, styles[ownerState.variant], ownerState.light && styles.light, ownerState.orientation === 'vertical' && styles.vertical, ownerState.flexItem && styles.flexItem, ownerState.children && styles.withChildren, ownerState.children && ownerState.orientation === 'vertical' && styles.withChildrenVertical, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && styles.textAlignRight, ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical' && styles.textAlignLeft];
     }
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    return _extends({
+    var theme = _ref.theme;
+    return {
       margin: 0,
       // Reset browser default style.
       flexShrink: 0,
       borderWidth: 0,
       borderStyle: 'solid',
       borderColor: (theme.vars || theme).palette.divider,
-      borderBottomWidth: 'thin'
-    }, ownerState.absolute && {
-      position: 'absolute',
-      bottom: 0,
-      left: 0,
-      width: '100%'
-    }, ownerState.light && {
-      borderColor: theme.vars ? "rgba(".concat(theme.vars.palette.dividerChannel, " / 0.08)") : alpha(theme.palette.divider, 0.08)
-    }, ownerState.variant === 'inset' && {
-      marginLeft: 72
-    }, ownerState.variant === 'middle' && ownerState.orientation === 'horizontal' && {
-      marginLeft: theme.spacing(2),
-      marginRight: theme.spacing(2)
-    }, ownerState.variant === 'middle' && ownerState.orientation === 'vertical' && {
-      marginTop: theme.spacing(1),
-      marginBottom: theme.spacing(1)
-    }, ownerState.orientation === 'vertical' && {
-      height: '100%',
-      borderBottomWidth: 0,
-      borderRightWidth: 'thin'
-    }, ownerState.flexItem && {
-      alignSelf: 'stretch',
-      height: 'auto'
-    });
-  }, function (_ref2) {
-    var ownerState = _ref2.ownerState;
-    return _extends({}, ownerState.children && {
-      display: 'flex',
-      whiteSpace: 'nowrap',
-      textAlign: 'center',
-      border: 0,
-      '&::before, &::after': {
-        content: '""',
-        alignSelf: 'center'
-      }
-    });
-  }, function (_ref3) {
-    var theme = _ref3.theme,
-      ownerState = _ref3.ownerState;
-    return _extends({}, ownerState.children && ownerState.orientation !== 'vertical' && {
-      '&::before, &::after': {
-        width: '100%',
-        borderTop: "thin solid ".concat((theme.vars || theme).palette.divider)
-      }
-    });
-  }, function (_ref4) {
-    var theme = _ref4.theme,
-      ownerState = _ref4.ownerState;
-    return _extends({}, ownerState.children && ownerState.orientation === 'vertical' && {
-      flexDirection: 'column',
-      '&::before, &::after': {
-        height: '100%',
-        borderLeft: "thin solid ".concat((theme.vars || theme).palette.divider)
-      }
-    });
-  }, function (_ref5) {
-    var ownerState = _ref5.ownerState;
-    return _extends({}, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && {
-      '&::before': {
-        width: '90%'
-      },
-      '&::after': {
-        width: '10%'
-      }
-    }, ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical' && {
-      '&::before': {
-        width: '10%'
-      },
-      '&::after': {
-        width: '90%'
-      }
-    });
+      borderBottomWidth: 'thin',
+      variants: [{
+        props: {
+          absolute: true
+        },
+        style: {
+          position: 'absolute',
+          bottom: 0,
+          left: 0,
+          width: '100%'
+        }
+      }, {
+        props: {
+          light: true
+        },
+        style: {
+          borderColor: theme.vars ? "rgba(".concat(theme.vars.palette.dividerChannel, " / 0.08)") : alpha(theme.palette.divider, 0.08)
+        }
+      }, {
+        props: {
+          variant: 'inset'
+        },
+        style: {
+          marginLeft: 72
+        }
+      }, {
+        props: {
+          variant: 'middle',
+          orientation: 'horizontal'
+        },
+        style: {
+          marginLeft: theme.spacing(2),
+          marginRight: theme.spacing(2)
+        }
+      }, {
+        props: {
+          variant: 'middle',
+          orientation: 'vertical'
+        },
+        style: {
+          marginTop: theme.spacing(1),
+          marginBottom: theme.spacing(1)
+        }
+      }, {
+        props: {
+          orientation: 'vertical'
+        },
+        style: {
+          height: '100%',
+          borderBottomWidth: 0,
+          borderRightWidth: 'thin'
+        }
+      }, {
+        props: {
+          flexItem: true
+        },
+        style: {
+          alignSelf: 'stretch',
+          height: 'auto'
+        }
+      }, {
+        props: function props(_ref2) {
+          var ownerState = _ref2.ownerState;
+          return !!ownerState.children;
+        },
+        style: {
+          display: 'flex',
+          whiteSpace: 'nowrap',
+          textAlign: 'center',
+          border: 0,
+          '&::before, &::after': {
+            content: '""',
+            alignSelf: 'center'
+          }
+        }
+      }, {
+        props: function props(_ref3) {
+          var ownerState = _ref3.ownerState;
+          return ownerState.children && ownerState.orientation !== 'vertical';
+        },
+        style: {
+          '&::before, &::after': {
+            width: '100%',
+            borderTop: "thin solid ".concat((theme.vars || theme).palette.divider)
+          }
+        }
+      }, {
+        props: function props(_ref4) {
+          var ownerState = _ref4.ownerState;
+          return ownerState.orientation === 'vertical' && ownerState.children;
+        },
+        style: {
+          flexDirection: 'column',
+          '&::before, &::after': {
+            height: '100%',
+            borderLeft: "thin solid ".concat((theme.vars || theme).palette.divider)
+          }
+        }
+      }, {
+        props: function props(_ref5) {
+          var ownerState = _ref5.ownerState;
+          return ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical';
+        },
+        style: {
+          '&::before': {
+            width: '90%'
+          },
+          '&::after': {
+            width: '10%'
+          }
+        }
+      }, {
+        props: function props(_ref6) {
+          var ownerState = _ref6.ownerState;
+          return ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical';
+        },
+        style: {
+          '&::before': {
+            width: '10%'
+          },
+          '&::after': {
+            width: '90%'
+          }
+        }
+      }]
+    };
   });
   var DividerWrapper = styled$1('span', {
     name: 'MuiDivider',
@@ -29393,20 +29910,25 @@
       var ownerState = props.ownerState;
       return [styles.wrapper, ownerState.orientation === 'vertical' && styles.wrapperVertical];
     }
-  })(function (_ref6) {
-    var theme = _ref6.theme,
-      ownerState = _ref6.ownerState;
-    return _extends({
+  })(function (_ref7) {
+    var theme = _ref7.theme;
+    return {
       display: 'inline-block',
       paddingLeft: "calc(".concat(theme.spacing(1), " * 1.2)"),
-      paddingRight: "calc(".concat(theme.spacing(1), " * 1.2)")
-    }, ownerState.orientation === 'vertical' && {
-      paddingTop: "calc(".concat(theme.spacing(1), " * 1.2)"),
-      paddingBottom: "calc(".concat(theme.spacing(1), " * 1.2)")
-    });
+      paddingRight: "calc(".concat(theme.spacing(1), " * 1.2)"),
+      variants: [{
+        props: {
+          orientation: 'vertical'
+        },
+        style: {
+          paddingTop: "calc(".concat(theme.spacing(1), " * 1.2)"),
+          paddingBottom: "calc(".concat(theme.spacing(1), " * 1.2)")
+        }
+      }]
+    };
   });
   var Divider = /*#__PURE__*/React__namespace.forwardRef(function Divider(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$e({
       props: inProps,
       name: 'MuiDivider'
     });
@@ -29459,7 +29981,9 @@
    * The following flag is used to ensure that this component isn't tabbable i.e.
    * does not get highlight/focus inside of MUI List.
    */
-  Divider.muiSkipListHighlight = true;
+  if (Divider) {
+    Divider.muiSkipListHighlight = true;
+  }
   Divider.propTypes /* remove-proptypes */ = {
     // ┌────────────────────────────── Warning ──────────────────────────────┐
     // │ These PropTypes are generated from the TypeScript type definitions. │
@@ -29953,7 +30477,7 @@
    * when `variant="temporary"` is set.
    */
   var Drawer = /*#__PURE__*/React__namespace.forwardRef(function Drawer(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiDrawer'
     });
@@ -30253,7 +30777,7 @@
     });
   });
   var Fab = /*#__PURE__*/React__namespace.forwardRef(function Fab(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiFab'
     });
@@ -30524,7 +31048,7 @@
   });
   var FilledInput = /*#__PURE__*/React__namespace.forwardRef(function FilledInput(inProps, ref) {
     var _ref5, _slots$root, _ref6, _slots$input;
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiFilledInput'
     });
@@ -30780,6 +31304,7 @@
   var formControlClasses = generateUtilityClasses$1('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
   var formControlClasses$1 = formControlClasses;
 
+  var useThemeProps$d = createUseThemeProps();
   var useUtilityClasses$15 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       margin = ownerState.margin,
@@ -30796,27 +31321,41 @@
       var ownerState = _ref.ownerState;
       return _extends({}, styles.root, styles["margin".concat(capitalize(ownerState.margin))], ownerState.fullWidth && styles.fullWidth);
     }
-  })(function (_ref2) {
-    var ownerState = _ref2.ownerState;
-    return _extends({
-      display: 'inline-flex',
-      flexDirection: 'column',
-      position: 'relative',
-      // Reset fieldset default style.
-      minWidth: 0,
-      padding: 0,
-      margin: 0,
-      border: 0,
-      verticalAlign: 'top'
-    }, ownerState.margin === 'normal' && {
-      marginTop: 16,
-      marginBottom: 8
-    }, ownerState.margin === 'dense' && {
-      marginTop: 8,
-      marginBottom: 4
-    }, ownerState.fullWidth && {
-      width: '100%'
-    });
+  })({
+    display: 'inline-flex',
+    flexDirection: 'column',
+    position: 'relative',
+    // Reset fieldset default style.
+    minWidth: 0,
+    padding: 0,
+    margin: 0,
+    border: 0,
+    verticalAlign: 'top',
+    // Fix alignment issue on Safari.
+    variants: [{
+      props: {
+        margin: 'normal'
+      },
+      style: {
+        marginTop: 16,
+        marginBottom: 8
+      }
+    }, {
+      props: {
+        margin: 'dense'
+      },
+      style: {
+        marginTop: 8,
+        marginBottom: 4
+      }
+    }, {
+      props: {
+        fullWidth: true
+      },
+      style: {
+        width: '100%'
+      }
+    }]
   });
 
   /**
@@ -30844,7 +31383,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$b({
+    var props = useThemeProps$d({
       props: inProps,
       name: 'MuiFormControl'
     });
@@ -31075,7 +31614,7 @@
       }
     }),
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$b({
+      return useThemeProps$G({
         props: inProps,
         name: 'MuiStack'
       });
@@ -31136,6 +31675,7 @@
   var formControlLabelClasses = generateUtilityClasses$1('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);
   var formControlLabelClasses$1 = formControlLabelClasses;
 
+  var useThemeProps$c = createUseThemeProps();
   var useUtilityClasses$14 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disabled = ownerState.disabled,
@@ -31157,9 +31697,8 @@
       return [_defineProperty({}, "& .".concat(formControlLabelClasses$1.label), styles.label), styles.root, styles["labelPlacement".concat(capitalize(ownerState.labelPlacement))]];
     }
   })(function (_ref2) {
-    var theme = _ref2.theme,
-      ownerState = _ref2.ownerState;
-    return _extends(_defineProperty({
+    var theme = _ref2.theme;
+    return _defineProperty(_defineProperty(_defineProperty({
       display: 'inline-flex',
       alignItems: 'center',
       cursor: 'pointer',
@@ -31170,20 +31709,39 @@
       marginRight: 16
     }, "&.".concat(formControlLabelClasses$1.disabled), {
       cursor: 'default'
-    }), ownerState.labelPlacement === 'start' && {
-      flexDirection: 'row-reverse',
-      marginLeft: 16,
-      // used for row presentation of radio/checkbox
-      marginRight: -11
-    }, ownerState.labelPlacement === 'top' && {
-      flexDirection: 'column-reverse',
-      marginLeft: 16
-    }, ownerState.labelPlacement === 'bottom' && {
-      flexDirection: 'column',
-      marginLeft: 16
-    }, _defineProperty({}, "& .".concat(formControlLabelClasses$1.label), _defineProperty({}, "&.".concat(formControlLabelClasses$1.disabled), {
+    }), "& .".concat(formControlLabelClasses$1.label), _defineProperty({}, "&.".concat(formControlLabelClasses$1.disabled), {
       color: (theme.vars || theme).palette.text.disabled
-    })));
+    })), "variants", [{
+      props: {
+        labelPlacement: 'start'
+      },
+      style: {
+        flexDirection: 'row-reverse',
+        marginRight: -11
+      }
+    }, {
+      props: {
+        labelPlacement: 'top'
+      },
+      style: {
+        flexDirection: 'column-reverse'
+      }
+    }, {
+      props: {
+        labelPlacement: 'bottom'
+      },
+      style: {
+        flexDirection: 'column'
+      }
+    }, {
+      props: function props(_ref3) {
+        var labelPlacement = _ref3.labelPlacement;
+        return labelPlacement === 'start' || labelPlacement === 'top' || labelPlacement === 'bottom';
+      },
+      style: {
+        marginLeft: 16 // used for row presentation of radio/checkbox
+      }
+    }]);
   });
   var AsteriskComponent$1 = styled$1('span', {
     name: 'MuiFormControlLabel',
@@ -31191,8 +31749,8 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.asterisk;
     }
-  })(function (_ref3) {
-    var theme = _ref3.theme;
+  })(function (_ref5) {
+    var theme = _ref5.theme;
     return _defineProperty({}, "&.".concat(formControlLabelClasses$1.error), {
       color: (theme.vars || theme).palette.error.main
     });
@@ -31203,8 +31761,8 @@
    * Use this component if you want to display an extra label.
    */
   var FormControlLabel = /*#__PURE__*/React__namespace.forwardRef(function FormControlLabel(inProps, ref) {
-    var _ref5, _slotProps$typography;
-    var props = useThemeProps$b({
+    var _ref7, _slotProps$typography;
+    var props = useThemeProps$c({
       props: inProps,
       name: 'MuiFormControlLabel'
     });
@@ -31227,7 +31785,7 @@
       props.value;
       var other = _objectWithoutProperties(props, ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"]);
     var muiFormControl = useFormControl();
-    var disabled = (_ref5 = disabledProp != null ? disabledProp : control.props.disabled) != null ? _ref5 : muiFormControl == null ? void 0 : muiFormControl.disabled;
+    var disabled = (_ref7 = disabledProp != null ? disabledProp : control.props.disabled) != null ? _ref7 : muiFormControl == null ? void 0 : muiFormControl.disabled;
     var required = requiredProp != null ? requiredProp : control.props.required;
     var controlProps = {
       disabled: disabled,
@@ -31364,6 +31922,7 @@
   var formGroupClasses = generateUtilityClasses$1('MuiFormGroup', ['root', 'row', 'error']);
   var formGroupClasses$1 = formGroupClasses;
 
+  var useThemeProps$b = createUseThemeProps();
   var useUtilityClasses$13 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       row = ownerState.row,
@@ -31380,15 +31939,18 @@
       var ownerState = props.ownerState;
       return [styles.root, ownerState.row && styles.row];
     }
-  })(function (_ref) {
-    var ownerState = _ref.ownerState;
-    return _extends({
-      display: 'flex',
-      flexDirection: 'column',
-      flexWrap: 'wrap'
-    }, ownerState.row && {
-      flexDirection: 'row'
-    });
+  })({
+    display: 'flex',
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+    variants: [{
+      props: {
+        row: true
+      },
+      style: {
+        flexDirection: 'row'
+      }
+    }]
   });
 
   /**
@@ -31502,7 +32064,7 @@
     });
   });
   var FormHelperText = /*#__PURE__*/React__namespace.forwardRef(function FormHelperText(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiFormHelperText'
     });
@@ -31666,7 +32228,7 @@
     });
   });
   var FormLabel = /*#__PURE__*/React__namespace.forwardRef(function FormLabel(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiFormLabel'
     });
@@ -31803,6 +32365,9 @@
 
   function getOffset(val) {
     var parse = parseFloat(val);
+    if (Number.isNaN(parse)) {
+      return val;
+    }
     return "".concat(parse).concat(String(val).replace(String(parse), '') || 'px');
   }
   function generateGrid(_ref) {
@@ -32122,7 +32687,7 @@
     return composeClasses(slots, getGridUtilityClass, classes);
   };
   var Grid = /*#__PURE__*/React__namespace.forwardRef(function Grid(inProps, ref) {
-    var themeProps = useThemeProps$b({
+    var themeProps = useThemeProps$G({
       props: inProps,
       name: 'MuiGrid'
     });
@@ -32340,7 +32905,7 @@
     }),
     componentName: 'MuiGrid2',
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$b({
+      return useThemeProps$G({
         props: inProps,
         name: 'MuiGrid2'
       });
@@ -33192,7 +33757,7 @@
     };
   });
   var Icon = /*#__PURE__*/React__namespace.forwardRef(function Icon(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiIcon'
     });
@@ -33317,7 +33882,7 @@
     });
   });
   var ImageList = /*#__PURE__*/React__namespace.forwardRef(function ImageList(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiImageList'
     });
@@ -33478,7 +34043,7 @@
     })));
   });
   var ImageListItem = /*#__PURE__*/React__namespace.forwardRef(function ImageListItem(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiImageListItem'
     });
@@ -33706,7 +34271,7 @@
     });
   });
   var ImageListItemBar = /*#__PURE__*/React__namespace.forwardRef(function ImageListItemBar(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiImageListItemBar'
     });
@@ -33880,7 +34445,7 @@
   })({});
   var Input = /*#__PURE__*/React__namespace.forwardRef(function Input(inProps, ref) {
     var _ref3, _slots$root, _ref4, _slots$input;
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiInput'
     });
@@ -34168,7 +34733,7 @@
     });
   });
   var InputAdornment = /*#__PURE__*/React__namespace.forwardRef(function InputAdornment(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiInputAdornment'
     });
@@ -34368,7 +34933,7 @@
     }));
   });
   var InputLabel = /*#__PURE__*/React__namespace.forwardRef(function InputLabel(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       name: 'MuiInputLabel',
       props: inProps
     });
@@ -34640,7 +35205,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$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiLinearProgress'
     });
@@ -34847,7 +35412,7 @@
     }));
   });
   var Link = /*#__PURE__*/React__namespace.forwardRef(function Link(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiLink'
     });
@@ -35018,7 +35583,7 @@
     });
   });
   var List = /*#__PURE__*/React__namespace.forwardRef(function List(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiList'
     });
@@ -35191,7 +35756,7 @@
     });
   });
   var ListItemButton = /*#__PURE__*/React__namespace.forwardRef(function ListItemButton(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiListItemButton'
     });
@@ -35374,7 +35939,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$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiListItemSecondaryAction'
     });
@@ -35519,7 +36084,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$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiListItem'
     });
@@ -35853,7 +36418,7 @@
    * A simple wrapper to apply `List` styles to an `Avatar`.
    */
   var ListItemAvatar = /*#__PURE__*/React__namespace.forwardRef(function ListItemAvatar(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiListItemAvatar'
     });
@@ -35932,7 +36497,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$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiListItemIcon'
     });
@@ -36015,7 +36580,7 @@
     });
   });
   var ListItemText = /*#__PURE__*/React__namespace.forwardRef(function ListItemText(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiListItemText'
     });
@@ -36405,6 +36970,7 @@
   var popoverClasses = generateUtilityClasses$1('MuiPopover', ['root', 'paper']);
   var popoverClasses$1 = popoverClasses;
 
+  var useThemeProps$a = createUseThemeProps();
   function getOffsetTop(rect, vertical) {
     var offset = 0;
     if (typeof vertical === 'number') {
@@ -36471,7 +37037,7 @@
   });
   var Popover = /*#__PURE__*/React__namespace.forwardRef(function Popover(inProps, ref) {
     var _slotProps$paper, _slots$root, _slots$paper;
-    var props = useThemeProps$b({
+    var props = useThemeProps$a({
       props: inProps,
       name: 'MuiPopover'
     });
@@ -36988,7 +37554,7 @@
   });
   var Menu = /*#__PURE__*/React__namespace.forwardRef(function Menu(inProps, ref) {
     var _slots$paper, _slotProps$paper;
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiMenu'
     });
@@ -37332,7 +37898,7 @@
     })));
   });
   var MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiMenuItem'
     });
@@ -37478,6 +38044,7 @@
   var mobileStepperClasses = generateUtilityClasses$1('MuiMobileStepper', ['root', 'positionBottom', 'positionTop', 'positionStatic', 'dots', 'dot', 'dotActive', 'progress']);
   var mobileStepperClasses$1 = mobileStepperClasses;
 
+  var useThemeProps$9 = createUseThemeProps();
   var useUtilityClasses$H = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       position = ownerState.position;
@@ -37498,28 +38065,41 @@
       return [styles.root, styles["position".concat(capitalize(ownerState.position))]];
     }
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    return _extends({
+    var theme = _ref.theme;
+    return {
       display: 'flex',
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
       background: (theme.vars || theme).palette.background["default"],
-      padding: 8
-    }, ownerState.position === 'bottom' && {
-      position: 'fixed',
-      bottom: 0,
-      left: 0,
-      right: 0,
-      zIndex: (theme.vars || theme).zIndex.mobileStepper
-    }, ownerState.position === 'top' && {
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      right: 0,
-      zIndex: (theme.vars || theme).zIndex.mobileStepper
-    });
+      padding: 8,
+      variants: [{
+        props: function props(_ref2) {
+          var position = _ref2.position;
+          return position === 'top' || position === 'bottom';
+        },
+        style: {
+          position: 'fixed',
+          left: 0,
+          right: 0,
+          zIndex: (theme.vars || theme).zIndex.mobileStepper
+        }
+      }, {
+        props: {
+          position: 'top'
+        },
+        style: {
+          top: 0
+        }
+      }, {
+        props: {
+          position: 'bottom'
+        },
+        style: {
+          bottom: 0
+        }
+      }]
+    };
   });
   var MobileStepperDots = styled$1('div', {
     name: 'MuiMobileStepper',
@@ -37527,12 +38107,16 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.dots;
     }
-  })(function (_ref2) {
-    var ownerState = _ref2.ownerState;
-    return _extends({}, ownerState.variant === 'dots' && {
-      display: 'flex',
-      flexDirection: 'row'
-    });
+  })({
+    variants: [{
+      props: {
+        variant: 'dots'
+      },
+      style: {
+        display: 'flex',
+        flexDirection: 'row'
+      }
+    }]
   });
   var MobileStepperDot = styled$1('div', {
     name: 'MuiMobileStepper',
@@ -37545,21 +38129,32 @@
       return [styles.dot, dotActive && styles.dotActive];
     }
   })(function (_ref3) {
-    var theme = _ref3.theme,
-      ownerState = _ref3.ownerState,
-      dotActive = _ref3.dotActive;
-    return _extends({}, ownerState.variant === 'dots' && _extends({
-      transition: theme.transitions.create('background-color', {
-        duration: theme.transitions.duration.shortest
-      }),
-      backgroundColor: (theme.vars || theme).palette.action.disabled,
-      borderRadius: '50%',
-      width: 8,
-      height: 8,
-      margin: '0 2px'
-    }, dotActive && {
-      backgroundColor: (theme.vars || theme).palette.primary.main
-    }));
+    var theme = _ref3.theme;
+    return {
+      variants: [{
+        props: {
+          variant: 'dots'
+        },
+        style: {
+          transition: theme.transitions.create('background-color', {
+            duration: theme.transitions.duration.shortest
+          }),
+          backgroundColor: (theme.vars || theme).palette.action.disabled,
+          borderRadius: '50%',
+          width: 8,
+          height: 8,
+          margin: '0 2px'
+        }
+      }, {
+        props: {
+          variant: 'dots',
+          dotActive: true
+        },
+        style: {
+          backgroundColor: (theme.vars || theme).palette.primary.main
+        }
+      }]
+    };
   });
   var MobileStepperProgress = styled$1(LinearProgress$1, {
     name: 'MuiMobileStepper',
@@ -37567,14 +38162,18 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.progress;
     }
-  })(function (_ref4) {
-    var ownerState = _ref4.ownerState;
-    return _extends({}, ownerState.variant === 'progress' && {
-      width: '50%'
-    });
+  })({
+    variants: [{
+      props: {
+        variant: 'progress'
+      },
+      style: {
+        width: '50%'
+      }
+    }]
   });
   var MobileStepper = /*#__PURE__*/React__namespace.forwardRef(function MobileStepper(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$9({
       props: inProps,
       name: 'MuiMobileStepper'
     });
@@ -37891,7 +38490,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$b({
+    var props = useThemeProps$G({
       name: 'MuiNativeSelect',
       props: inProps
     });
@@ -38216,7 +38815,7 @@
   });
   var OutlinedInput = /*#__PURE__*/React__namespace.forwardRef(function OutlinedInput(inProps, ref) {
     var _ref5, _slots$root, _ref6, _slots$input, _React$Fragment;
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiOutlinedInput'
     });
@@ -38766,7 +39365,7 @@
     });
   });
   var PaginationItem = /*#__PURE__*/React__namespace.forwardRef(function PaginationItem(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiPaginationItem'
     });
@@ -38969,7 +39568,7 @@
     return "Go to ".concat(type, " page");
   }
   var Pagination = /*#__PURE__*/React__namespace.forwardRef(function Pagination(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiPagination'
     });
@@ -39324,7 +39923,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$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiRadio'
     });
@@ -39827,7 +40426,7 @@
     return "".concat(value, " Star").concat(value !== 1 ? 's' : '');
   }
   var Rating = /*#__PURE__*/React__namespace.forwardRef(function Rating(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       name: 'MuiRating',
       props: inProps
     });
@@ -40268,7 +40867,7 @@
     }, colorSchemeStyles);
   });
   var ScopedCssBaseline = /*#__PURE__*/React__namespace.forwardRef(function ScopedCssBaseline(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiScopedCssBaseline'
     });
@@ -40990,7 +41589,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$b({
+    var props = useThemeProps$G({
       name: 'MuiSelect',
       props: inProps
     });
@@ -41313,7 +41912,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$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiSkeleton'
     });
@@ -41455,7 +42054,7 @@
     value: PropTypes.node
   } ;
 
-  var useThemeProps$1 = createUseThemeProps();
+  var useThemeProps$8 = createUseThemeProps();
   function Identity(x) {
     return x;
   }
@@ -41722,29 +42321,7 @@
       '&:hover': {
         boxShadow: 'none'
       }
-    }), "variants", [].concat(_toConsumableArray(Object.keys(((_theme$vars5 = theme.vars) != null ? _theme$vars5 : theme).palette).filter(function (key) {
-      var _theme$vars6;
-      return ((_theme$vars6 = theme.vars) != null ? _theme$vars6 : theme).palette[key].main;
-    }).map(function (color) {
-      return {
-        props: {
-          color: color
-        },
-        style: _defineProperty(_defineProperty({}, "&:hover, &.".concat(sliderClasses$1.focusVisible), _extends({}, theme.vars ? {
-          boxShadow: "0px 0px 0px 8px rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.16)")
-        } : {
-          boxShadow: "0px 0px 0px 8px ".concat(alpha(theme.palette[color].main, 0.16))
-        }, {
-          '@media (hover: none)': {
-            boxShadow: 'none'
-          }
-        })), "&.".concat(sliderClasses$1.active), _extends({}, theme.vars ? {
-          boxShadow: "0px 0px 0px 14px rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.16)}")
-        } : {
-          boxShadow: "0px 0px 0px 14px ".concat(alpha(theme.palette[color].main, 0.16))
-        }))
-      };
-    })), [{
+    }), "variants", [{
       props: {
         size: 'small'
       },
@@ -41771,7 +42348,29 @@
         left: '50%',
         transform: 'translate(-50%, 50%)'
       }
-    }]));
+    }].concat(_toConsumableArray(Object.keys(((_theme$vars5 = theme.vars) != null ? _theme$vars5 : theme).palette).filter(function (key) {
+      var _theme$vars6;
+      return ((_theme$vars6 = theme.vars) != null ? _theme$vars6 : theme).palette[key].main;
+    }).map(function (color) {
+      return {
+        props: {
+          color: color
+        },
+        style: _defineProperty(_defineProperty({}, "&:hover, &.".concat(sliderClasses$1.focusVisible), _extends({}, theme.vars ? {
+          boxShadow: "0px 0px 0px 8px rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.16)")
+        } : {
+          boxShadow: "0px 0px 0px 8px ".concat(alpha(theme.palette[color].main, 0.16))
+        }, {
+          '@media (hover: none)': {
+            boxShadow: 'none'
+          }
+        })), "&.".concat(sliderClasses$1.active), _extends({}, theme.vars ? {
+          boxShadow: "0px 0px 0px 14px rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.16)}")
+        } : {
+          boxShadow: "0px 0px 0px 14px ".concat(alpha(theme.palette[color].main, 0.16))
+        }))
+      };
+    }))));
   });
   var SliderValueLabel = styled$1(SliderValueLabel$1, {
     name: 'MuiSlider',
@@ -41982,7 +42581,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$1({
+    var props = useThemeProps$8({
       props: inputProps,
       name: 'MuiSlider'
     });
@@ -42559,7 +43158,7 @@
     marginRight: -8
   });
   var SnackbarContent = /*#__PURE__*/React__namespace.forwardRef(function SnackbarContent(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiSnackbarContent'
     });
@@ -42681,7 +43280,7 @@
     })));
   });
   var Snackbar = /*#__PURE__*/React__namespace.forwardRef(function Snackbar(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiSnackbar'
     });
@@ -43216,7 +43815,7 @@
     });
   });
   var SpeedDial = /*#__PURE__*/React__namespace.forwardRef(function SpeedDial(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiSpeedDial'
     });
@@ -43778,7 +44377,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$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiTooltip'
     });
@@ -44451,7 +45050,7 @@
     });
   });
   var SpeedDialAction = /*#__PURE__*/React__namespace.forwardRef(function SpeedDialAction(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiSpeedDialAction'
     });
@@ -44645,7 +45244,7 @@
     }));
   });
   var SpeedDialIcon = /*#__PURE__*/React__namespace.forwardRef(function SpeedDialIcon(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiSpeedDialIcon'
     });
@@ -44748,6 +45347,7 @@
   var stepClasses = generateUtilityClasses$1('MuiStep', ['root', 'horizontal', 'vertical', 'alternativeLabel', 'completed']);
   var stepClasses$1 = stepClasses;
 
+  var useThemeProps$7 = createUseThemeProps();
   var useUtilityClasses$n = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       orientation = ownerState.orientation,
@@ -44765,18 +45365,27 @@
       var ownerState = props.ownerState;
       return [styles.root, styles[ownerState.orientation], ownerState.alternativeLabel && styles.alternativeLabel, ownerState.completed && styles.completed];
     }
-  })(function (_ref) {
-    var ownerState = _ref.ownerState;
-    return _extends({}, ownerState.orientation === 'horizontal' && {
-      paddingLeft: 8,
-      paddingRight: 8
-    }, ownerState.alternativeLabel && {
-      flex: 1,
-      position: 'relative'
-    });
+  })({
+    variants: [{
+      props: {
+        orientation: 'horizontal'
+      },
+      style: {
+        paddingLeft: 8,
+        paddingRight: 8
+      }
+    }, {
+      props: {
+        alternativeLabel: true
+      },
+      style: {
+        flex: 1,
+        position: 'relative'
+      }
+    }]
   });
   var Step = /*#__PURE__*/React__namespace.forwardRef(function Step(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$7({
       props: inProps,
       name: 'MuiStep'
     });
@@ -44919,6 +45528,7 @@
   var stepIconClasses$1 = stepIconClasses;
 
   var _circle;
+  var useThemeProps$6 = createUseThemeProps();
   var useUtilityClasses$m = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       active = ownerState.active,
@@ -44967,7 +45577,7 @@
     };
   });
   var StepIcon = /*#__PURE__*/React__namespace.forwardRef(function StepIcon(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$6({
       props: inProps,
       name: 'MuiStepIcon'
     });
@@ -45071,6 +45681,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 useUtilityClasses$l = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       orientation = ownerState.orientation,
@@ -45094,28 +45705,30 @@
       var ownerState = props.ownerState;
       return [styles.root, styles[ownerState.orientation]];
     }
-  })(function (_ref) {
-    var ownerState = _ref.ownerState;
-    return _extends(_defineProperty(_defineProperty({
-      display: 'flex',
-      alignItems: 'center'
-    }, "&.".concat(stepLabelClasses$1.alternativeLabel), {
-      flexDirection: 'column'
-    }), "&.".concat(stepLabelClasses$1.disabled), {
-      cursor: 'default'
-    }), ownerState.orientation === 'vertical' && {
+  })(_defineProperty(_defineProperty(_defineProperty({
+    display: 'flex',
+    alignItems: 'center'
+  }, "&.".concat(stepLabelClasses$1.alternativeLabel), {
+    flexDirection: 'column'
+  }), "&.".concat(stepLabelClasses$1.disabled), {
+    cursor: 'default'
+  }), "variants", [{
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
       textAlign: 'left',
       padding: '8px 0'
-    });
-  });
+    }
+  }]));
   var StepLabelLabel = styled$1('span', {
     name: 'MuiStepLabel',
     slot: 'Label',
     overridesResolver: function overridesResolver(props, styles) {
       return styles.label;
     }
-  })(function (_ref2) {
-    var theme = _ref2.theme;
+  })(function (_ref) {
+    var theme = _ref.theme;
     return _extends({}, theme.typography.body2, _defineProperty(_defineProperty(_defineProperty(_defineProperty({
       display: 'block',
       transition: theme.transitions.create('color', {
@@ -45139,24 +45752,22 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.iconContainer;
     }
-  })(function () {
-    return _defineProperty({
-      flexShrink: 0,
-      // Fix IE11 issue
-      display: 'flex',
-      paddingRight: 8
-    }, "&.".concat(stepLabelClasses$1.alternativeLabel), {
-      paddingRight: 0
-    });
-  });
+  })(_defineProperty({
+    flexShrink: 0,
+    // Fix IE11 issue
+    display: 'flex',
+    paddingRight: 8
+  }, "&.".concat(stepLabelClasses$1.alternativeLabel), {
+    paddingRight: 0
+  }));
   var StepLabelLabelContainer = styled$1('span', {
     name: 'MuiStepLabel',
     slot: 'LabelContainer',
     overridesResolver: function overridesResolver(props, styles) {
       return styles.labelContainer;
     }
-  })(function (_ref4) {
-    var theme = _ref4.theme;
+  })(function (_ref2) {
+    var theme = _ref2.theme;
     return _defineProperty({
       width: '100%',
       color: (theme.vars || theme).palette.text.secondary
@@ -45165,8 +45776,7 @@
     });
   });
   var StepLabel = /*#__PURE__*/React__namespace.forwardRef(function StepLabel(inProps, ref) {
-    var _slotProps$label;
-    var props = useThemeProps$b({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiStepLabel'
     });
@@ -45178,11 +45788,13 @@
       error = _props$error === void 0 ? false : _props$error,
       iconProp = props.icon,
       optional = props.optional,
+      _props$slots = props.slots,
+      slots = _props$slots === void 0 ? {} : _props$slots,
       _props$slotProps = props.slotProps,
       slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
       StepIconComponentProp = props.StepIconComponent,
       StepIconProps = props.StepIconProps,
-      other = _objectWithoutProperties(props, ["children", "className", "componentsProps", "error", "icon", "optional", "slotProps", "StepIconComponent", "StepIconProps"]);
+      other = _objectWithoutProperties(props, ["children", "className", "componentsProps", "error", "icon", "optional", "slots", "slotProps", "StepIconComponent", "StepIconProps"]);
     var _React$useContext = React__namespace.useContext(StepperContext$1),
       alternativeLabel = _React$useContext.alternativeLabel,
       orientation = _React$useContext.orientation;
@@ -45205,7 +45817,18 @@
       orientation: orientation
     });
     var classes = useUtilityClasses$l(ownerState);
-    var labelSlotProps = (_slotProps$label = slotProps.label) != null ? _slotProps$label : componentsProps.label;
+    var externalForwardedProps = {
+      slots: slots,
+      slotProps: _extends({}, componentsProps, slotProps)
+    };
+    var _useSlot = useSlot('label', {
+        elementType: StepLabelLabel,
+        externalForwardedProps: externalForwardedProps,
+        ownerState: ownerState
+      }),
+      _useSlot2 = _slicedToArray(_useSlot, 2),
+      LabelSlot = _useSlot2[0],
+      labelProps = _useSlot2[1];
     return /*#__PURE__*/jsxRuntime_2(StepLabelRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -45223,10 +45846,8 @@
       }) : null, /*#__PURE__*/jsxRuntime_2(StepLabelLabelContainer, {
         className: classes.labelContainer,
         ownerState: ownerState,
-        children: [children ? /*#__PURE__*/jsxRuntime_1(StepLabelLabel, _extends({
-          ownerState: ownerState
-        }, labelSlotProps, {
-          className: clsx(classes.label, labelSlotProps == null ? void 0 : labelSlotProps.className),
+        children: [children ? /*#__PURE__*/jsxRuntime_1(LabelSlot, _extends({}, labelProps, {
+          className: clsx(classes.label, labelProps == null ? void 0 : labelProps.className),
           children: children
         })) : null, optional]
       })]
@@ -45252,6 +45873,7 @@
     /**
      * The props used for each slot inside.
      * @default {}
+     * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
      */
     componentsProps: PropTypes.shape({
       label: PropTypes.object
@@ -45274,7 +45896,14 @@
      * @default {}
      */
     slotProps: PropTypes.shape({
-      label: PropTypes.object
+      label: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    }),
+    /**
+     * The components used for each slot inside.
+     * @default {}
+     */
+    slots: PropTypes.shape({
+      label: PropTypes.elementType
     }),
     /**
      * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
@@ -45289,7 +45918,9 @@
      */
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
   } ;
-  StepLabel.muiName = 'StepLabel';
+  if (StepLabel) {
+    StepLabel.muiName = 'StepLabel';
+  }
   var StepLabel$1 = StepLabel;
 
   function getStepButtonUtilityClass(slot) {
@@ -45298,6 +45929,7 @@
   var stepButtonClasses = generateUtilityClasses$1('MuiStepButton', ['root', 'horizontal', 'vertical', 'touchRipple']);
   var stepButtonClasses$1 = stepButtonClasses;
 
+  var useThemeProps$4 = createUseThemeProps();
   var useUtilityClasses$k = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       orientation = ownerState.orientation;
@@ -45314,23 +45946,25 @@
       var ownerState = props.ownerState;
       return [_defineProperty({}, "& .".concat(stepButtonClasses$1.touchRipple), styles.touchRipple), styles.root, styles[ownerState.orientation]];
     }
-  })(function (_ref2) {
-    var ownerState = _ref2.ownerState;
-    return _extends({
-      width: '100%',
-      padding: '24px 16px',
-      margin: '-24px -16px',
-      boxSizing: 'content-box'
-    }, ownerState.orientation === 'vertical' && {
+  })(_defineProperty(_defineProperty({
+    width: '100%',
+    padding: '24px 16px',
+    margin: '-24px -16px',
+    boxSizing: 'content-box'
+  }, "& .".concat(stepButtonClasses$1.touchRipple), {
+    color: 'rgba(0, 0, 0, 0.3)'
+  }), "variants", [{
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
       justifyContent: 'flex-start',
       padding: '8px',
       margin: '-8px'
-    }, _defineProperty({}, "& .".concat(stepButtonClasses$1.touchRipple), {
-      color: 'rgba(0, 0, 0, 0.3)'
-    }));
-  });
+    }
+  }]));
   var StepButton = /*#__PURE__*/React__namespace.forwardRef(function StepButton(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$4({
       props: inProps,
       name: 'MuiStepButton'
     });
@@ -45407,6 +46041,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 useUtilityClasses$j = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       orientation = ownerState.orientation,
@@ -45427,18 +46062,26 @@
       var ownerState = props.ownerState;
       return [styles.root, styles[ownerState.orientation], ownerState.alternativeLabel && styles.alternativeLabel, ownerState.completed && styles.completed];
     }
-  })(function (_ref) {
-    var ownerState = _ref.ownerState;
-    return _extends({
-      flex: '1 1 auto'
-    }, ownerState.orientation === 'vertical' && {
-      marginLeft: 12 // half icon
-    }, ownerState.alternativeLabel && {
-      position: 'absolute',
-      top: 8 + 4,
-      left: 'calc(-50% + 20px)',
-      right: 'calc(50% + 20px)'
-    });
+  })({
+    flex: '1 1 auto',
+    variants: [{
+      props: {
+        orientation: 'vertical'
+      },
+      style: {
+        marginLeft: 12 // half icon
+      }
+    }, {
+      props: {
+        alternativeLabel: true
+      },
+      style: {
+        position: 'absolute',
+        top: 8 + 4,
+        left: 'calc(-50% + 20px)',
+        right: 'calc(50% + 20px)'
+      }
+    }]
   });
   var StepConnectorLine = styled$1('span', {
     name: 'MuiStepConnector',
@@ -45447,24 +46090,34 @@
       var ownerState = props.ownerState;
       return [styles.line, styles["line".concat(capitalize(ownerState.orientation))]];
     }
-  })(function (_ref2) {
-    var ownerState = _ref2.ownerState,
-      theme = _ref2.theme;
+  })(function (_ref) {
+    var theme = _ref.theme;
     var borderColor = theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600];
-    return _extends({
+    return {
       display: 'block',
-      borderColor: theme.vars ? theme.vars.palette.StepConnector.border : borderColor
-    }, ownerState.orientation === 'horizontal' && {
-      borderTopStyle: 'solid',
-      borderTopWidth: 1
-    }, ownerState.orientation === 'vertical' && {
-      borderLeftStyle: 'solid',
-      borderLeftWidth: 1,
-      minHeight: 24
-    });
+      borderColor: theme.vars ? theme.vars.palette.StepConnector.border : borderColor,
+      variants: [{
+        props: {
+          orientation: 'horizontal'
+        },
+        style: {
+          borderTopStyle: 'solid',
+          borderTopWidth: 1
+        }
+      }, {
+        props: {
+          orientation: 'vertical'
+        },
+        style: {
+          borderLeftStyle: 'solid',
+          borderLeftWidth: 1,
+          minHeight: 24
+        }
+      }]
+    };
   });
   var StepConnector = /*#__PURE__*/React__namespace.forwardRef(function StepConnector(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$3({
       props: inProps,
       name: 'MuiStepConnector'
     });
@@ -45523,6 +46176,7 @@
   var stepContentClasses = generateUtilityClasses$1('MuiStepContent', ['root', 'last', 'transition']);
   var stepContentClasses$1 = stepContentClasses;
 
+  var useThemeProps$2 = createUseThemeProps();
   var useUtilityClasses$i = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       last = ownerState.last;
@@ -45540,18 +46194,23 @@
       return [styles.root, ownerState.last && styles.last];
     }
   })(function (_ref) {
-    var ownerState = _ref.ownerState,
-      theme = _ref.theme;
-    return _extends({
+    var theme = _ref.theme;
+    return {
       marginLeft: 12,
       // half icon
       paddingLeft: 8 + 12,
       // margin + half icon
       paddingRight: 8,
-      borderLeft: theme.vars ? "1px solid ".concat(theme.vars.palette.StepContent.border) : "1px solid ".concat(theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600])
-    }, ownerState.last && {
-      borderLeft: 'none'
-    });
+      borderLeft: theme.vars ? "1px solid ".concat(theme.vars.palette.StepContent.border) : "1px solid ".concat(theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]),
+      variants: [{
+        props: {
+          last: true
+        },
+        style: {
+          borderLeft: 'none'
+        }
+      }]
+    };
   });
   var StepContentTransition = styled$1(Collapse$1, {
     name: 'MuiStepContent',
@@ -45561,7 +46220,7 @@
     }
   })({});
   var StepContent = /*#__PURE__*/React__namespace.forwardRef(function StepContent(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$2({
       props: inProps,
       name: 'MuiStepContent'
     });
@@ -45662,6 +46321,7 @@
   var stepperClasses = generateUtilityClasses$1('MuiStepper', ['root', 'horizontal', 'vertical', 'alternativeLabel']);
   var stepperClasses$1 = stepperClasses;
 
+  var useThemeProps$1 = createUseThemeProps();
   var useUtilityClasses$h = function useUtilityClasses(ownerState) {
     var orientation = ownerState.orientation,
       alternativeLabel = ownerState.alternativeLabel,
@@ -45678,22 +46338,35 @@
       var ownerState = props.ownerState;
       return [styles.root, styles[ownerState.orientation], ownerState.alternativeLabel && styles.alternativeLabel];
     }
-  })(function (_ref) {
-    var ownerState = _ref.ownerState;
-    return _extends({
-      display: 'flex'
-    }, ownerState.orientation === 'horizontal' && {
-      flexDirection: 'row',
-      alignItems: 'center'
-    }, ownerState.orientation === 'vertical' && {
-      flexDirection: 'column'
-    }, ownerState.alternativeLabel && {
-      alignItems: 'flex-start'
-    });
+  })({
+    display: 'flex',
+    variants: [{
+      props: {
+        orientation: 'horizontal'
+      },
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      }
+    }, {
+      props: {
+        orientation: 'vertical'
+      },
+      style: {
+        flexDirection: 'column'
+      }
+    }, {
+      props: {
+        alternativeLabel: true
+      },
+      style: {
+        alignItems: 'flex-start'
+      }
+    }]
   });
   var defaultConnector = /*#__PURE__*/jsxRuntime_1(StepConnector$1, {});
   var Stepper = /*#__PURE__*/React__namespace.forwardRef(function Stepper(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiStepper'
     });
@@ -45959,7 +46632,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$c({
+    var props = useThemeProps$H({
       name: 'MuiSwipeableDrawer',
       props: inProps
     });
@@ -46875,7 +47548,7 @@
     });
   });
   var Tab = /*#__PURE__*/React__namespace.forwardRef(function Tab(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiTab'
     });
@@ -47079,7 +47752,7 @@
   });
   var defaultComponent$4 = 'table';
   var Table = /*#__PURE__*/React__namespace.forwardRef(function Table(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiTable'
     });
@@ -47152,8 +47825,6 @@
     size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
     /**
      * Set the header sticky.
-     *
-     * ⚠️ It doesn't work with IE11.
      * @default false
      */
     stickyHeader: PropTypes.bool,
@@ -47200,7 +47871,7 @@
   };
   var defaultComponent$3 = 'tbody';
   var TableBody = /*#__PURE__*/React__namespace.forwardRef(function TableBody(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiTableBody'
     });
@@ -47335,7 +48006,7 @@
    * or otherwise a `<td>` element.
    */
   var TableCell = /*#__PURE__*/React__namespace.forwardRef(function TableCell(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiTableCell'
     });
@@ -47474,7 +48145,7 @@
     overflowX: 'auto'
   });
   var TableContainer = /*#__PURE__*/React__namespace.forwardRef(function TableContainer(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiTableContainer'
     });
@@ -47549,7 +48220,7 @@
   };
   var defaultComponent$2 = 'tfoot';
   var TableFooter = /*#__PURE__*/React__namespace.forwardRef(function TableFooter(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiTableFooter'
     });
@@ -47628,7 +48299,7 @@
   };
   var defaultComponent$1 = 'thead';
   var TableHead = /*#__PURE__*/React__namespace.forwardRef(function TableHead(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiTableHead'
     });
@@ -47724,7 +48395,7 @@
     return ownerState.variant === 'regular' && theme.mixins.toolbar;
   });
   var Toolbar = /*#__PURE__*/React__namespace.forwardRef(function Toolbar(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiToolbar'
     });
@@ -48098,7 +48769,7 @@
    */
   var TablePagination = /*#__PURE__*/React__namespace.forwardRef(function TablePagination(inProps, ref) {
     var _slotProps$select;
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiTablePagination'
     });
@@ -48454,7 +49125,7 @@
    * based on the material table element parent (head, body, etc).
    */
   var TableRow = /*#__PURE__*/React__namespace.forwardRef(function TableRow(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiTableRow'
     });
@@ -48602,7 +49273,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$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiTableSortLabel'
     });
@@ -48813,7 +49484,7 @@
   });
   var TabScrollButton = /*#__PURE__*/React__namespace.forwardRef(function TabScrollButton(inProps, ref) {
     var _slots$StartScrollBut, _slots$EndScrollButto;
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiTabScrollButton'
     });
@@ -49090,7 +49761,7 @@
   var defaultIndicatorStyle = {};
   var warnedOnceTabPresent = false;
   var Tabs = /*#__PURE__*/React__namespace.forwardRef(function Tabs(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiTabs'
     });
@@ -49801,7 +50472,7 @@
    * - using the underlying components directly as shown in the demos
    */
   var TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiTextField'
     });
@@ -50217,7 +50888,7 @@
     var resolvedProps = resolveProps(_extends({}, contextProps, {
       selected: isValueSelected(inProps.value, contextValue)
     }), inProps);
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: resolvedProps,
       name: 'MuiToggleButton'
     });
@@ -50421,7 +51092,7 @@
     }));
   });
   var ToggleButtonGroup = /*#__PURE__*/React__namespace.forwardRef(function ToggleButtonGroup(inProps, ref) {
-    var props = useThemeProps$b({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiToggleButtonGroup'
     });
@@ -51092,7 +51763,7 @@
   exports.useStepContext = useStepContext;
   exports.useStepperContext = useStepperContext;
   exports.useTheme = useTheme;
-  exports.useThemeProps = useThemeProps$b;
+  exports.useThemeProps = useThemeProps$G;
   exports.withStyles = withStyles;
   exports.withTheme = withTheme;