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

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-alpha.0
+ * @mui/material v6.0.0-alpha.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -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,
@@ -9021,6 +9020,9 @@
         cssVarPrefix: cssVarPrefix,
         vars: themeVars
       });
+      if (typeof theme.generateSpacing === 'function') {
+        theme.spacing = theme.generateSpacing();
+      }
 
       // 4. Resolve the color scheme and merge it to the theme
       Object.entries(colorSchemes).forEach(function (_ref2) {
@@ -9363,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) {
@@ -9474,13 +9477,13 @@
     }
   });
   var useThemePropsDefault$2 = function useThemePropsDefault(inProps) {
-    return useThemeProps$C({
+    return useThemeProps$H({
       props: inProps,
       name: 'MuiContainer',
       defaultTheme: defaultTheme$6
     });
   };
-  var useUtilityClasses$1P = function useUtilityClasses(ownerState, componentName) {
+  var useUtilityClasses$1Q = function useUtilityClasses(ownerState, componentName) {
     var getContainerUtilityClass = function getContainerUtilityClass(slot) {
       return generateUtilityClass$1(componentName, slot);
     };
@@ -9565,7 +9568,7 @@
       });
 
       // @ts-ignore module augmentation fails if custom breakpoints are used
-      var classes = useUtilityClasses$1P(ownerState, componentName);
+      var classes = useUtilityClasses$1Q(ownerState, componentName);
       return (
         /*#__PURE__*/
         // @ts-ignore theme is injected by the styled util
@@ -9862,7 +9865,7 @@
     }
   });
   function useThemePropsDefault$1(props) {
-    return useThemeProps$C({
+    return useThemeProps$H({
       props: props,
       name: 'MuiGrid',
       defaultTheme: defaultTheme$5
@@ -10029,7 +10032,7 @@
     }
   });
   function useThemePropsDefault(props) {
-    return useThemeProps$C({
+    return useThemeProps$H({
       props: props,
       name: 'MuiStack',
       defaultTheme: defaultTheme$4
@@ -11071,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,
@@ -11212,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();
@@ -11273,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;
@@ -11509,9 +11528,13 @@
     });
     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) {
@@ -11563,7 +11586,7 @@
   var svgIconClasses = generateUtilityClasses$1('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
   var svgIconClasses$1 = svgIconClasses;
 
-  var useUtilityClasses$1O = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1P = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       fontSize = ownerState.fontSize,
       classes = ownerState.classes;
@@ -11610,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'
     });
@@ -11643,7 +11666,7 @@
     if (!inheritViewBox) {
       more.viewBox = viewBox;
     }
-    var classes = useUtilityClasses$1O(ownerState);
+    var classes = useUtilityClasses$1P(ownerState);
     return /*#__PURE__*/jsxRuntime_2(SvgIconRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -11769,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) {
@@ -12781,7 +12804,7 @@
   var collapseClasses = generateUtilityClasses$1('MuiCollapse', ['root', 'horizontal', 'vertical', 'entered', 'hidden', 'wrapper', 'wrapperInner']);
   var collapseClasses$1 = collapseClasses;
 
-  var useUtilityClasses$1N = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1O = function useUtilityClasses(ownerState) {
     var orientation = ownerState.orientation,
       classes = ownerState.classes;
     var slots = {
@@ -12859,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'
     });
@@ -12889,7 +12912,7 @@
       orientation: orientation,
       collapsedSize: collapsedSizeProp
     });
-    var classes = useUtilityClasses$1N(ownerState);
+    var classes = useUtilityClasses$1O(ownerState);
     var theme = useTheme();
     var timer = useTimeout();
     var wrapperRef = React__namespace.useRef(null);
@@ -13151,7 +13174,7 @@
   var paperClasses = generateUtilityClasses$1('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
   var paperClasses$1 = paperClasses;
 
-  var useUtilityClasses$1M = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1N = function useUtilityClasses(ownerState) {
     var square = ownerState.square,
       elevation = ownerState.elevation,
       variant = ownerState.variant,
@@ -13189,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'
     });
@@ -13209,7 +13232,7 @@
       square: square,
       variant: variant
     });
-    var classes = useUtilityClasses$1M(ownerState);
+    var classes = useUtilityClasses$1N(ownerState);
     {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       var theme = useTheme();
@@ -13566,8 +13589,8 @@
   var accordionClasses = generateUtilityClasses$1('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
   var accordionClasses$1 = accordionClasses;
 
-  var useThemeProps$A = createUseThemeProps();
-  var useUtilityClasses$1L = function useUtilityClasses(ownerState) {
+  var useThemeProps$F = createUseThemeProps();
+  var useUtilityClasses$1M = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       square = ownerState.square,
       expanded = ownerState.expanded,
@@ -13664,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'
     });
@@ -13720,7 +13743,7 @@
       disableGutters: disableGutters,
       expanded: expanded
     });
-    var classes = useUtilityClasses$1L(ownerState);
+    var classes = useUtilityClasses$1M(ownerState);
     var backwardCompatibleSlots = _extends({
       transition: TransitionComponentProp
     }, slots);
@@ -13858,8 +13881,8 @@
   var accordionActionsClasses = generateUtilityClasses$1('MuiAccordionActions', ['root', 'spacing']);
   var accordionActionsClasses$1 = accordionActionsClasses;
 
-  var useThemeProps$z = createUseThemeProps();
-  var useUtilityClasses$1K = function useUtilityClasses(ownerState) {
+  var useThemeProps$E = createUseThemeProps();
+  var useUtilityClasses$1L = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disableSpacing = ownerState.disableSpacing;
     var slots = {
@@ -13891,7 +13914,7 @@
     }]
   });
   var AccordionActions = /*#__PURE__*/React__namespace.forwardRef(function AccordionActions(inProps, ref) {
-    var props = useThemeProps$z({
+    var props = useThemeProps$E({
       props: inProps,
       name: 'MuiAccordionActions'
     });
@@ -13902,7 +13925,7 @@
     var ownerState = _extends({}, props, {
       disableSpacing: disableSpacing
     });
-    var classes = useUtilityClasses$1K(ownerState);
+    var classes = useUtilityClasses$1L(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionActionsRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -13944,8 +13967,8 @@
   var accordionDetailsClasses = generateUtilityClasses$1('MuiAccordionDetails', ['root']);
   var accordionDetailsClasses$1 = accordionDetailsClasses;
 
-  var useThemeProps$y = createUseThemeProps();
-  var useUtilityClasses$1J = function useUtilityClasses(ownerState) {
+  var useThemeProps$D = createUseThemeProps();
+  var useUtilityClasses$1K = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root']
@@ -13965,14 +13988,14 @@
     };
   });
   var AccordionDetails = /*#__PURE__*/React__namespace.forwardRef(function AccordionDetails(inProps, ref) {
-    var props = useThemeProps$y({
+    var props = useThemeProps$D({
       props: inProps,
       name: 'MuiAccordionDetails'
     });
     var className = props.className,
       other = _objectWithoutProperties(props, ["className"]);
     var ownerState = props;
-    var classes = useUtilityClasses$1J(ownerState);
+    var classes = useUtilityClasses$1K(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionDetailsRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -14057,7 +14080,7 @@
       })
     });
   }
-  Ripple.propTypes = {
+  Ripple.propTypes /* remove-proptypes */ = {
     /**
      * Override or extend the styles applied to the component.
      */
@@ -14100,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"])));
@@ -14145,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'
     });
@@ -14334,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.
@@ -14357,7 +14381,8 @@
   var buttonBaseClasses = generateUtilityClasses$1('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
   var buttonBaseClasses$1 = buttonBaseClasses;
 
-  var useUtilityClasses$1I = function useUtilityClasses(ownerState) {
+  var useThemeProps$B = createUseThemeProps();
+  var useUtilityClasses$1J = function useUtilityClasses(ownerState) {
     var disabled = ownerState.disabled,
       focusVisible = ownerState.focusVisible,
       focusVisibleClassName = ownerState.focusVisibleClassName,
@@ -14635,7 +14660,7 @@
       tabIndex: tabIndex,
       focusVisible: focusVisible
     });
-    var classes = useUtilityClasses$1I(ownerState);
+    var classes = useUtilityClasses$1J(ownerState);
     return /*#__PURE__*/jsxRuntime_2(ButtonBaseRoot, _extends({
       as: ComponentProp,
       className: clsx(classes.root, className),
@@ -14832,8 +14857,8 @@
   var accordionSummaryClasses = generateUtilityClasses$1('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
   var accordionSummaryClasses$1 = accordionSummaryClasses;
 
-  var useThemeProps$x = createUseThemeProps();
-  var useUtilityClasses$1H = function useUtilityClasses(ownerState) {
+  var useThemeProps$A = createUseThemeProps();
+  var useUtilityClasses$1I = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       expanded = ownerState.expanded,
       disabled = ownerState.disabled,
@@ -14923,7 +14948,7 @@
     });
   });
   var AccordionSummary = /*#__PURE__*/React__namespace.forwardRef(function AccordionSummary(inProps, ref) {
-    var props = useThemeProps$x({
+    var props = useThemeProps$A({
       props: inProps,
       name: 'MuiAccordionSummary'
     });
@@ -14952,7 +14977,7 @@
       disabled: disabled,
       disableGutters: disableGutters
     });
-    var classes = useUtilityClasses$1H(ownerState);
+    var classes = useUtilityClasses$1I(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AccordionSummaryRoot, _extends({
       focusRipple: false,
       disableRipple: true,
@@ -15029,7 +15054,7 @@
   var iconButtonClasses = generateUtilityClasses$1('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
   var iconButtonClasses$1 = iconButtonClasses;
 
-  var useUtilityClasses$1G = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1H = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disabled = ownerState.disabled,
       color = ownerState.color,
@@ -15110,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'
     });
@@ -15134,7 +15159,7 @@
       disableFocusRipple: disableFocusRipple,
       size: size
     });
-    var classes = useUtilityClasses$1G(ownerState);
+    var classes = useUtilityClasses$1H(ownerState);
     return /*#__PURE__*/jsxRuntime_1(IconButtonRoot, _extends({
       className: clsx(classes.root, className),
       centerRipple: true,
@@ -15237,8 +15262,8 @@
     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$w = createUseThemeProps();
-  var useUtilityClasses$1F = function useUtilityClasses(ownerState) {
+  var useThemeProps$z = createUseThemeProps();
+  var useUtilityClasses$1G = function useUtilityClasses(ownerState) {
     var variant = ownerState.variant,
       color = ownerState.color,
       severity = ownerState.severity,
@@ -15385,7 +15410,7 @@
     })
   };
   var Alert = /*#__PURE__*/React__namespace.forwardRef(function Alert(inProps, ref) {
-    var props = useThemeProps$w({
+    var props = useThemeProps$z({
       props: inProps,
       name: 'MuiAlert'
     });
@@ -15420,7 +15445,7 @@
       variant: variant,
       colorSeverity: color || severity
     });
-    var classes = useUtilityClasses$1F(ownerState);
+    var classes = useUtilityClasses$1G(ownerState);
     var externalForwardedProps = {
       slots: _extends({
         closeButton: components.CloseButton,
@@ -15605,7 +15630,7 @@
   var typographyClasses = generateUtilityClasses$1('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
   var typographyClasses$1 = typographyClasses;
 
-  var useUtilityClasses$1E = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1F = function useUtilityClasses(ownerState) {
     var align = ownerState.align,
       gutterBottom = ownerState.gutterBottom,
       noWrap = ownerState.noWrap,
@@ -15670,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'
     });
@@ -15705,7 +15730,7 @@
       variantMapping: variantMapping
     });
     var Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-    var classes = useUtilityClasses$1E(ownerState);
+    var classes = useUtilityClasses$1F(ownerState);
     return /*#__PURE__*/jsxRuntime_1(TypographyRoot, _extends({
       as: Component,
       ref: ref,
@@ -15796,8 +15821,8 @@
   var alertTitleClasses = generateUtilityClasses$1('MuiAlertTitle', ['root']);
   var alertTitleClasses$1 = alertTitleClasses;
 
-  var useThemeProps$v = createUseThemeProps();
-  var useUtilityClasses$1D = function useUtilityClasses(ownerState) {
+  var useThemeProps$y = createUseThemeProps();
+  var useUtilityClasses$1E = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root']
@@ -15818,14 +15843,14 @@
     };
   });
   var AlertTitle = /*#__PURE__*/React__namespace.forwardRef(function AlertTitle(inProps, ref) {
-    var props = useThemeProps$v({
+    var props = useThemeProps$y({
       props: inProps,
       name: 'MuiAlertTitle'
     });
     var className = props.className,
       other = _objectWithoutProperties(props, ["className"]);
     var ownerState = props;
-    var classes = useUtilityClasses$1D(ownerState);
+    var classes = useUtilityClasses$1E(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AlertTitleRoot, _extends({
       gutterBottom: true,
       component: "div",
@@ -15864,7 +15889,8 @@
   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 useUtilityClasses$1C = function useUtilityClasses(ownerState) {
+  var useThemeProps$x = createUseThemeProps();
+  var useUtilityClasses$1D = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       position = ownerState.position,
       classes = ownerState.classes;
@@ -15887,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'
     });
@@ -15973,7 +16058,7 @@
       position: position,
       enableColorOnDark: enableColorOnDark
     });
-    var classes = useUtilityClasses$1C(ownerState);
+    var classes = useUtilityClasses$1D(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AppBarRoot, _extends({
       square: true,
       component: "header",
@@ -19003,7 +19088,7 @@
   function isVirtualElement(element) {
     return !isHTMLElement(element);
   }
-  var useUtilityClasses$1B = function useUtilityClasses() {
+  var useUtilityClasses$1C = function useUtilityClasses() {
     var slots = {
       root: ['root']
     };
@@ -19117,7 +19202,7 @@
     if (TransitionProps !== null) {
       childProps.TransitionProps = TransitionProps;
     }
-    var classes = useUtilityClasses$1B();
+    var classes = useUtilityClasses$1C();
     var Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
     var rootProps = useSlotProps({
       elementType: Root,
@@ -21472,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'
     });
@@ -21651,7 +21736,7 @@
   var listSubheaderClasses = generateUtilityClasses$1('MuiListSubheader', ['root', 'colorPrimary', 'colorInherit', 'gutters', 'inset', 'sticky']);
   var listSubheaderClasses$1 = listSubheaderClasses;
 
-  var useUtilityClasses$1A = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1B = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       color = ownerState.color,
       disableGutters = ownerState.disableGutters,
@@ -21697,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'
     });
@@ -21720,7 +21805,7 @@
       disableSticky: disableSticky,
       inset: inset
     });
-    var classes = useUtilityClasses$1A(ownerState);
+    var classes = useUtilityClasses$1B(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListSubheaderRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -21788,8 +21873,8 @@
   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$u = createUseThemeProps();
-  var useUtilityClasses$1z = function useUtilityClasses(ownerState) {
+  var useThemeProps$w = createUseThemeProps();
+  var useUtilityClasses$1A = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disabled = ownerState.disabled,
       size = ownerState.size,
@@ -22088,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$u({
+    var props = useThemeProps$w({
       props: inProps,
       name: 'MuiChip'
     });
@@ -22160,7 +22245,7 @@
       clickable: clickable,
       variant: variant
     });
-    var classes = useUtilityClasses$1z(ownerState);
+    var classes = useUtilityClasses$1A(ownerState);
     var moreProps = component === ButtonBase$1 ? _extends({
       component: ComponentProp || 'div',
       focusVisibleClassName: classes.focusVisible
@@ -22407,7 +22492,7 @@
     var ownerState = props.ownerState;
     return [styles.input, ownerState.size === 'small' && styles.inputSizeSmall, ownerState.multiline && styles.inputMultiline, ownerState.type === 'search' && styles.inputTypeSearch, ownerState.startAdornment && styles.inputAdornedStart, ownerState.endAdornment && styles.inputAdornedEnd, ownerState.hiddenLabel && styles.inputHiddenLabel];
   };
-  var useUtilityClasses$1y = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1z = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       color = ownerState.color,
       disabled = ownerState.disabled,
@@ -22576,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'
     });
@@ -22805,7 +22890,7 @@
       startAdornment: startAdornment,
       type: type
     });
-    var classes = useUtilityClasses$1y(ownerState);
+    var classes = useUtilityClasses$1z(ownerState);
     var Root = slots.root || components.Root || InputBaseRoot;
     var rootProps = slotProps.root || componentsProps.root || {};
     var Input = slots.input || components.Input || InputBaseComponent;
@@ -23116,8 +23201,8 @@
   var autocompleteClasses$1 = autocompleteClasses;
 
   var _styled, _ClearIcon, _ArrowDropDownIcon;
-  var useThemeProps$t = createUseThemeProps();
-  var useUtilityClasses$1x = function useUtilityClasses(ownerState) {
+  var useThemeProps$v = createUseThemeProps();
+  var useUtilityClasses$1y = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disablePortal = ownerState.disablePortal,
       expanded = ownerState.expanded,
@@ -23435,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$t({
+    var props = useThemeProps$v({
       props: inProps,
       name: 'MuiAutocomplete'
     });
@@ -23588,7 +23673,7 @@
       popupOpen: popupOpen,
       size: size
     });
-    var classes = useUtilityClasses$1x(ownerState);
+    var classes = useUtilityClasses$1y(ownerState);
     var startAdornment;
     if (multiple && value.length > 0) {
       var getCustomizedTagProps = function getCustomizedTagProps(params) {
@@ -24211,8 +24296,8 @@
   var avatarClasses = generateUtilityClasses$1('MuiAvatar', ['root', 'colorDefault', 'circular', 'rounded', 'square', 'img', 'fallback']);
   var avatarClasses$1 = avatarClasses;
 
-  var useThemeProps$s = createUseThemeProps();
-  var useUtilityClasses$1w = function useUtilityClasses(ownerState) {
+  var useThemeProps$u = createUseThemeProps();
+  var useUtilityClasses$1x = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       variant = ownerState.variant,
       colorDefault = ownerState.colorDefault;
@@ -24343,7 +24428,7 @@
     return loaded;
   }
   var Avatar = /*#__PURE__*/React__namespace.forwardRef(function Avatar(inProps, ref) {
-    var props = useThemeProps$s({
+    var props = useThemeProps$u({
       props: inProps,
       name: 'MuiAvatar'
     });
@@ -24377,7 +24462,7 @@
       component: component,
       variant: variant
     });
-    var classes = useUtilityClasses$1w(ownerState);
+    var classes = useUtilityClasses$1x(ownerState);
     var _useSlot = useSlot('img', {
         className: classes.img,
         elementType: AvatarImg,
@@ -24504,8 +24589,8 @@
     small: -16,
     medium: -8
   };
-  var useThemeProps$r = createUseThemeProps();
-  var useUtilityClasses$1v = function useUtilityClasses(ownerState) {
+  var useThemeProps$t = createUseThemeProps();
+  var useUtilityClasses$1w = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root'],
@@ -24535,7 +24620,7 @@
   });
   var AvatarGroup = /*#__PURE__*/React__namespace.forwardRef(function AvatarGroup(inProps, ref) {
     var _slotProps$additional;
-    var props = useThemeProps$r({
+    var props = useThemeProps$t({
       props: inProps,
       name: 'MuiAvatarGroup'
     });
@@ -24563,7 +24648,7 @@
       component: component,
       variant: variant
     });
-    var classes = useUtilityClasses$1v(ownerState);
+    var classes = useUtilityClasses$1w(ownerState);
     var children = React__namespace.Children.toArray(childrenProp).filter(function (child) {
       {
         if (reactIs_2(child)) {
@@ -24891,8 +24976,8 @@
   var backdropClasses = generateUtilityClasses$1('MuiBackdrop', ['root', 'invisible']);
   var backdropClasses$1 = backdropClasses;
 
-  var useThemeProps$q = createUseThemeProps();
-  var useUtilityClasses$1u = function useUtilityClasses(ownerState) {
+  var useThemeProps$s = createUseThemeProps();
+  var useUtilityClasses$1v = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       invisible = ownerState.invisible;
     var slots = {
@@ -24928,7 +25013,7 @@
     }]
   });
   var Backdrop = /*#__PURE__*/React__namespace.forwardRef(function Backdrop(inProps, ref) {
-    var props = useThemeProps$q({
+    var props = useThemeProps$s({
       props: inProps,
       name: 'MuiBackdrop'
     });
@@ -24954,7 +25039,7 @@
       component: component,
       invisible: invisible
     });
-    var classes = useUtilityClasses$1u(ownerState);
+    var classes = useUtilityClasses$1v(ownerState);
     var backwardCompatibleSlots = _extends({
       transition: TransitionComponentProp,
       root: components.Root
@@ -25099,8 +25184,8 @@
 
   var RADIUS_STANDARD = 10;
   var RADIUS_DOT = 4;
-  var useThemeProps$p = createUseThemeProps();
-  var useUtilityClasses$1t = function useUtilityClasses(ownerState) {
+  var useThemeProps$r = createUseThemeProps();
+  var useUtilityClasses$1u = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       anchorOrigin = ownerState.anchorOrigin,
       invisible = ownerState.invisible,
@@ -25302,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$p({
+    var props = useThemeProps$r({
       props: inProps,
       name: 'MuiBadge'
     });
@@ -25374,7 +25459,7 @@
       overlap: overlap,
       variant: variant
     });
-    var classes = useUtilityClasses$1t(ownerState);
+    var classes = useUtilityClasses$1u(ownerState);
 
     // support both `slots` and `components` for backward compatibility
     var RootSlot = (_ref11 = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref11 : BadgeRoot;
@@ -25451,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 {}
      */
@@ -25464,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 {}
      */
@@ -25528,8 +25611,8 @@
   var bottomNavigationClasses = generateUtilityClasses$1('MuiBottomNavigation', ['root']);
   var bottomNavigationClasses$1 = bottomNavigationClasses;
 
-  var useThemeProps$o = createUseThemeProps();
-  var useUtilityClasses$1s = function useUtilityClasses(ownerState) {
+  var useThemeProps$q = createUseThemeProps();
+  var useUtilityClasses$1t = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root']
@@ -25552,7 +25635,7 @@
     };
   });
   var BottomNavigation = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigation(inProps, ref) {
-    var props = useThemeProps$o({
+    var props = useThemeProps$q({
       props: inProps,
       name: 'MuiBottomNavigation'
     });
@@ -25569,7 +25652,7 @@
       component: component,
       showLabels: showLabels
     });
-    var classes = useUtilityClasses$1s(ownerState);
+    var classes = useUtilityClasses$1t(ownerState);
     return /*#__PURE__*/jsxRuntime_1(BottomNavigationRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -25647,8 +25730,8 @@
   var bottomNavigationActionClasses = generateUtilityClasses$1('MuiBottomNavigationAction', ['root', 'iconOnly', 'selected', 'label']);
   var bottomNavigationActionClasses$1 = bottomNavigationActionClasses;
 
-  var useThemeProps$n = createUseThemeProps();
-  var useUtilityClasses$1r = function useUtilityClasses(ownerState) {
+  var useThemeProps$p = createUseThemeProps();
+  var useUtilityClasses$1s = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       showLabel = ownerState.showLabel,
       selected = ownerState.selected;
@@ -25729,7 +25812,7 @@
     }]);
   });
   var BottomNavigationAction = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigationAction(inProps, ref) {
-    var props = useThemeProps$n({
+    var props = useThemeProps$p({
       props: inProps,
       name: 'MuiBottomNavigationAction'
     });
@@ -25743,7 +25826,7 @@
       var value = props.value,
       other = _objectWithoutProperties(props, ["className", "icon", "label", "onChange", "onClick", "selected", "showLabel", "value"]);
     var ownerState = props;
-    var classes = useUtilityClasses$1r(ownerState);
+    var classes = useUtilityClasses$1s(ownerState);
     var handleChange = function handleChange(event) {
       if (onChange) {
         onChange(event, value);
@@ -25937,8 +26020,8 @@
   var breadcrumbsClasses = generateUtilityClasses$1('MuiBreadcrumbs', ['root', 'ol', 'li', 'separator']);
   var breadcrumbsClasses$1 = breadcrumbsClasses;
 
-  var useThemeProps$m = createUseThemeProps();
-  var useUtilityClasses$1q = function useUtilityClasses(ownerState) {
+  var useThemeProps$o = createUseThemeProps();
+  var useUtilityClasses$1r = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root'],
@@ -25997,7 +26080,7 @@
     }, []);
   }
   var Breadcrumbs = /*#__PURE__*/React__namespace.forwardRef(function Breadcrumbs(inProps, ref) {
-    var props = useThemeProps$m({
+    var props = useThemeProps$o({
       props: inProps,
       name: 'MuiBreadcrumbs'
     });
@@ -26032,7 +26115,7 @@
       maxItems: maxItems,
       separator: separator
     });
-    var classes = useUtilityClasses$1q(ownerState);
+    var classes = useUtilityClasses$1r(ownerState);
     var collapsedIconSlotProps = useSlotProps({
       elementType: slots.CollapsedIcon,
       externalSlotProps: slotProps.collapsedIcon,
@@ -26197,7 +26280,8 @@
   }
   var ButtonGroupButtonContext$1 = ButtonGroupButtonContext;
 
-  var useUtilityClasses$1p = function useUtilityClasses(ownerState) {
+  var useThemeProps$n = createUseThemeProps();
+  var useUtilityClasses$1q = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       disableElevation = ownerState.disableElevation,
       fullWidth = ownerState.fullWidth,
@@ -26213,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';
@@ -26240,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',
@@ -26364,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',
@@ -26381,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'
     });
@@ -26434,7 +26610,7 @@
       type: type,
       variant: variant
     });
-    var classes = useUtilityClasses$1p(ownerState);
+    var classes = useUtilityClasses$1q(ownerState);
     var startIcon = startIconProp && /*#__PURE__*/jsxRuntime_1(ButtonStartIcon, {
       className: classes.startIcon,
       ownerState: ownerState,
@@ -26562,11 +26738,12 @@
   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];
   };
-  var useUtilityClasses$1o = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1p = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       color = ownerState.color,
       disabled = ownerState.disabled,
@@ -26588,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'
     });
@@ -26696,7 +26966,7 @@
       size: size,
       variant: variant
     });
-    var classes = useUtilityClasses$1o(ownerState);
+    var classes = useUtilityClasses$1p(ownerState);
     var context = React__namespace.useMemo(function () {
       return {
         className: classes.grouped,
@@ -26828,7 +27098,7 @@
   var cardClasses$1 = cardClasses;
 
   var useThemeProps$l = createUseThemeProps();
-  var useUtilityClasses$1n = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1o = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root']
@@ -26856,7 +27126,7 @@
     var ownerState = _extends({}, props, {
       raised: raised
     });
-    var classes = useUtilityClasses$1n(ownerState);
+    var classes = useUtilityClasses$1o(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardRoot, _extends({
       className: clsx(classes.root, className),
       elevation: raised ? 8 : undefined,
@@ -26905,7 +27175,7 @@
   var cardActionAreaClasses$1 = cardActionAreaClasses;
 
   var useThemeProps$k = createUseThemeProps();
-  var useUtilityClasses$1m = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1n = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root'],
@@ -26970,7 +27240,7 @@
       focusVisibleClassName = props.focusVisibleClassName,
       other = _objectWithoutProperties(props, ["children", "className", "focusVisibleClassName"]);
     var ownerState = props;
-    var classes = useUtilityClasses$1m(ownerState);
+    var classes = useUtilityClasses$1n(ownerState);
     return /*#__PURE__*/jsxRuntime_2(CardActionAreaRoot, _extends({
       className: clsx(classes.root, className),
       focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible),
@@ -27018,7 +27288,7 @@
   var cardActionsClasses$1 = cardActionsClasses;
 
   var useThemeProps$j = createUseThemeProps();
-  var useUtilityClasses$1l = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1m = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disableSpacing = ownerState.disableSpacing;
     var slots = {
@@ -27060,7 +27330,7 @@
     var ownerState = _extends({}, props, {
       disableSpacing: disableSpacing
     });
-    var classes = useUtilityClasses$1l(ownerState);
+    var classes = useUtilityClasses$1m(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardActionsRoot, _extends({
       className: clsx(classes.root, className),
       ownerState: ownerState,
@@ -27103,7 +27373,7 @@
   var cardContentClasses$1 = cardContentClasses;
 
   var useThemeProps$i = createUseThemeProps();
-  var useUtilityClasses$1k = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1l = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root']
@@ -27134,7 +27404,7 @@
     var ownerState = _extends({}, props, {
       component: component
     });
-    var classes = useUtilityClasses$1k(ownerState);
+    var classes = useUtilityClasses$1l(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardContentRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -27178,7 +27448,7 @@
   var cardHeaderClasses$1 = cardHeaderClasses;
 
   var useThemeProps$h = createUseThemeProps();
-  var useUtilityClasses$1j = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1k = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root'],
@@ -27255,7 +27525,7 @@
       component: component,
       disableTypography: disableTypography
     });
-    var classes = useUtilityClasses$1j(ownerState);
+    var classes = useUtilityClasses$1k(ownerState);
     var title = titleProp;
     if (title != null && title.type !== Typography$1 && !disableTypography) {
       title = /*#__PURE__*/jsxRuntime_1(Typography$1, _extends({
@@ -27370,7 +27640,7 @@
   var cardMediaClasses$1 = cardMediaClasses;
 
   var useThemeProps$g = createUseThemeProps();
-  var useUtilityClasses$1i = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1j = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       isMediaComponent = ownerState.isMediaComponent,
       isImageComponent = ownerState.isImageComponent;
@@ -27434,7 +27704,7 @@
       isMediaComponent: isMediaComponent,
       isImageComponent: IMAGE_COMPONENTS.indexOf(component) !== -1
     });
-    var classes = useUtilityClasses$1i(ownerState);
+    var classes = useUtilityClasses$1j(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardMediaRoot, _extends({
       className: clsx(classes.root, className),
       as: component,
@@ -27502,7 +27772,7 @@
   }
   generateUtilityClasses$1('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
 
-  var useUtilityClasses$1h = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1i = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       checked = ownerState.checked,
       disabled = ownerState.disabled,
@@ -27619,7 +27889,7 @@
       disableFocusRipple: disableFocusRipple,
       edge: edge
     });
-    var classes = useUtilityClasses$1h(ownerState);
+    var classes = useUtilityClasses$1i(ownerState);
     return /*#__PURE__*/jsxRuntime_2(SwitchBaseRoot, _extends({
       component: "span",
       className: clsx(classes.root, className),
@@ -27779,7 +28049,7 @@
   var checkboxClasses = generateUtilityClasses$1('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium']);
   var checkboxClasses$1 = checkboxClasses;
 
-  var useUtilityClasses$1g = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1h = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       indeterminate = ownerState.indeterminate,
       color = ownerState.color,
@@ -27824,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'
     });
@@ -27850,7 +28120,7 @@
       indeterminate: indeterminate,
       size: size
     });
-    var classes = useUtilityClasses$1g(ownerState);
+    var classes = useUtilityClasses$1h(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CheckboxRoot, _extends({
       type: "checkbox",
       inputProps: _extends({
@@ -27982,7 +28252,7 @@
   var SIZE = 44;
   var circularRotateKeyframe = keyframes(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
   var circularDashKeyframe = keyframes(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0;\n  }\n\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"])));
-  var useUtilityClasses$1f = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1g = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       variant = ownerState.variant,
       color = ownerState.color,
@@ -28056,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'
     });
@@ -28083,7 +28353,7 @@
       value: value,
       variant: variant
     });
-    var classes = useUtilityClasses$1f(ownerState);
+    var classes = useUtilityClasses$1g(ownerState);
     var circleStyle = {};
     var rootStyle = {};
     var rootProps = {};
@@ -28197,7 +28467,7 @@
       }
     }),
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$B({
+      return useThemeProps$G({
         props: inProps,
         name: 'MuiContainer'
       });
@@ -28320,7 +28590,7 @@
     return defaultStyles;
   };
   function CssBaseline(inProps) {
-    var props = useThemeProps$B({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiCssBaseline'
     });
@@ -28394,7 +28664,7 @@
   var modalClasses$1 = modalClasses;
 
   var useThemeProps$f = createUseThemeProps();
-  var useUtilityClasses$1e = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1f = function useUtilityClasses(ownerState) {
     var open = ownerState.open,
       exited = ownerState.exited,
       classes = ownerState.classes;
@@ -28523,7 +28793,7 @@
     var ownerState = _extends({}, propsWithDefaults, {
       exited: exited
     });
-    var classes = useUtilityClasses$1e(ownerState);
+    var classes = useUtilityClasses$1f(ownerState);
     var childProps = {};
     if (children.props.tabIndex === undefined) {
       childProps.tabIndex = '-1';
@@ -28796,7 +29066,7 @@
     // Improve scrollable dialog support.
     zIndex: -1
   });
-  var useUtilityClasses$1d = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1e = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       scroll = ownerState.scroll,
       maxWidth = ownerState.maxWidth,
@@ -28910,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'
     });
@@ -28955,7 +29225,7 @@
       maxWidth: maxWidth,
       scroll: scroll
     });
-    var classes = useUtilityClasses$1d(ownerState);
+    var classes = useUtilityClasses$1e(ownerState);
     var backdropClick = React__namespace.useRef();
     var handleMouseDown = function handleMouseDown(event) {
       // We don't want to close the dialog when clicking the dialog content.
@@ -29164,7 +29434,7 @@
   var dialogActionsClasses = generateUtilityClasses$1('MuiDialogActions', ['root', 'spacing']);
   var dialogActionsClasses$1 = dialogActionsClasses;
 
-  var useUtilityClasses$1c = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1d = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disableSpacing = ownerState.disableSpacing;
     var slots = {
@@ -29194,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'
     });
@@ -29205,7 +29475,7 @@
     var ownerState = _extends({}, props, {
       disableSpacing: disableSpacing
     });
-    var classes = useUtilityClasses$1c(ownerState);
+    var classes = useUtilityClasses$1d(ownerState);
     return /*#__PURE__*/jsxRuntime_1(DialogActionsRoot, _extends({
       className: clsx(classes.root, className),
       ownerState: ownerState,
@@ -29253,7 +29523,7 @@
   var dialogTitleClasses = generateUtilityClasses$1('MuiDialogTitle', ['root']);
   var dialogTitleClasses$1 = dialogTitleClasses;
 
-  var useUtilityClasses$1b = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1c = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       dividers = ownerState.dividers;
     var slots = {
@@ -29286,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'
     });
@@ -29297,7 +29567,7 @@
     var ownerState = _extends({}, props, {
       dividers: dividers
     });
-    var classes = useUtilityClasses$1b(ownerState);
+    var classes = useUtilityClasses$1c(ownerState);
     return /*#__PURE__*/jsxRuntime_1(DialogContentRoot, _extends({
       className: clsx(classes.root, className),
       ownerState: ownerState,
@@ -29339,7 +29609,7 @@
   var dialogContentTextClasses = generateUtilityClasses$1('MuiDialogContentText', ['root']);
   var dialogContentTextClasses$1 = dialogContentTextClasses;
 
-  var useUtilityClasses$1a = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1b = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root']
@@ -29358,14 +29628,14 @@
     }
   })({});
   var DialogContentText = /*#__PURE__*/React__namespace.forwardRef(function DialogContentText(inProps, ref) {
-    var props = useThemeProps$B({
+    var props = useThemeProps$G({
       props: inProps,
       name: 'MuiDialogContentText'
     });
     props.children;
       var className = props.className,
       ownerState = _objectWithoutProperties(props, ["children", "className"]);
-    var classes = useUtilityClasses$1a(ownerState);
+    var classes = useUtilityClasses$1b(ownerState);
     return /*#__PURE__*/jsxRuntime_1(DialogContentTextRoot, _extends({
       component: "p",
       variant: "body1",
@@ -29401,7 +29671,7 @@
   } ;
   var DialogContentText$1 = DialogContentText;
 
-  var useUtilityClasses$19 = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1a = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root']
@@ -29419,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'
     });
@@ -29427,7 +29697,7 @@
       idProp = props.id,
       other = _objectWithoutProperties(props, ["className", "id"]);
     var ownerState = props;
-    var classes = useUtilityClasses$19(ownerState);
+    var classes = useUtilityClasses$1a(ownerState);
     var _React$useContext = React__namespace.useContext(DialogContext$1),
       _React$useContext$tit = _React$useContext.titleId,
       titleId = _React$useContext$tit === void 0 ? idProp : _React$useContext$tit;
@@ -29475,7 +29745,7 @@
   var dividerClasses$1 = dividerClasses;
 
   var useThemeProps$e = createUseThemeProps();
-  var useUtilityClasses$18 = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$19 = function useUtilityClasses(ownerState) {
     var absolute = ownerState.absolute,
       children = ownerState.children,
       classes = ownerState.classes,
@@ -29691,7 +29961,7 @@
       textAlign: textAlign,
       variant: variant
     });
-    var classes = useUtilityClasses$18(ownerState);
+    var classes = useUtilityClasses$19(ownerState);
     return /*#__PURE__*/jsxRuntime_1(DividerRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -30104,7 +30374,7 @@
     var ownerState = props.ownerState;
     return [styles.root, (ownerState.variant === 'permanent' || ownerState.variant === 'persistent') && styles.docked, styles.modal];
   };
-  var useUtilityClasses$17 = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$18 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       anchor = ownerState.anchor,
       variant = ownerState.variant;
@@ -30207,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'
     });
@@ -30259,7 +30529,7 @@
       open: open,
       variant: variant
     }, other);
-    var classes = useUtilityClasses$17(ownerState);
+    var classes = useUtilityClasses$18(ownerState);
     var drawer = /*#__PURE__*/jsxRuntime_1(DrawerPaper, _extends({
       elevation: variant === 'temporary' ? elevation : 0,
       square: true
@@ -30404,7 +30674,7 @@
   var fabClasses = generateUtilityClasses$1('MuiFab', ['root', 'primary', 'secondary', 'extended', 'circular', 'focusVisible', 'disabled', 'colorInherit', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'info', 'error', 'warning', 'success']);
   var fabClasses$1 = fabClasses;
 
-  var useUtilityClasses$16 = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$17 = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       variant = ownerState.variant,
       classes = ownerState.classes,
@@ -30507,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'
     });
@@ -30535,7 +30805,7 @@
       size: size,
       variant: variant
     });
-    var classes = useUtilityClasses$16(ownerState);
+    var classes = useUtilityClasses$17(ownerState);
     return /*#__PURE__*/jsxRuntime_1(FabRoot, _extends({
       className: clsx(classes.root, className),
       component: component,
@@ -30619,7 +30889,7 @@
   } ;
   var Fab$1 = Fab;
 
-  var useUtilityClasses$15 = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$16 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disableUnderline = ownerState.disableUnderline;
     var slots = {
@@ -30778,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'
     });
@@ -30805,7 +31075,7 @@
       multiline: multiline,
       type: type
     });
-    var classes = useUtilityClasses$15(props);
+    var classes = useUtilityClasses$16(props);
     var filledInputComponentsProps = {
       root: {
         ownerState: ownerState
@@ -31035,7 +31305,7 @@
   var formControlClasses$1 = formControlClasses;
 
   var useThemeProps$d = createUseThemeProps();
-  var useUtilityClasses$14 = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$15 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       margin = ownerState.margin,
       fullWidth = ownerState.fullWidth;
@@ -31153,7 +31423,7 @@
       size: size,
       variant: variant
     });
-    var classes = useUtilityClasses$14(ownerState);
+    var classes = useUtilityClasses$15(ownerState);
     var _React$useState = React__namespace.useState(function () {
         // We need to iterate through the children and find the Input in order
         // to fully support server-side rendering.
@@ -31344,7 +31614,7 @@
       }
     }),
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$B({
+      return useThemeProps$G({
         props: inProps,
         name: 'MuiStack'
       });
@@ -31406,7 +31676,7 @@
   var formControlLabelClasses$1 = formControlLabelClasses;
 
   var useThemeProps$c = createUseThemeProps();
-  var useUtilityClasses$13 = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$14 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disabled = ownerState.disabled,
       labelPlacement = ownerState.labelPlacement,
@@ -31537,7 +31807,7 @@
       required: required,
       error: fcs.error
     });
-    var classes = useUtilityClasses$13(ownerState);
+    var classes = useUtilityClasses$14(ownerState);
     var typographySlotProps = (_slotProps$typography = slotProps.typography) != null ? _slotProps$typography : componentsProps.typography;
     var label = labelProp;
     if (label != null && label.type !== Typography$1 && !disableTypography) {
@@ -31653,7 +31923,7 @@
   var formGroupClasses$1 = formGroupClasses;
 
   var useThemeProps$b = createUseThemeProps();
-  var useUtilityClasses$12 = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$13 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       row = ownerState.row,
       error = ownerState.error;
@@ -31707,7 +31977,7 @@
       row: row,
       error: fcs.error
     });
-    var classes = useUtilityClasses$12(ownerState);
+    var classes = useUtilityClasses$13(ownerState);
     return /*#__PURE__*/jsxRuntime_1(FormGroupRoot, _extends({
       className: clsx(classes.root, className),
       ownerState: ownerState,
@@ -31750,7 +32020,7 @@
   var formHelperTextClasses$1 = formHelperTextClasses;
 
   var _span$3;
-  var useUtilityClasses$11 = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$12 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       contained = ownerState.contained,
       size = ownerState.size,
@@ -31794,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'
     });
@@ -31827,7 +32097,7 @@
       focused: fcs.focused,
       required: fcs.required
     });
-    var classes = useUtilityClasses$11(ownerState);
+    var classes = useUtilityClasses$12(ownerState);
     return /*#__PURE__*/jsxRuntime_1(FormHelperTextRoot, _extends({
       as: component,
       ownerState: ownerState,
@@ -31907,7 +32177,7 @@
   var formLabelClasses = generateUtilityClasses$1('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
   var formLabelClasses$1 = formLabelClasses;
 
-  var useUtilityClasses$10 = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$11 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       color = ownerState.color,
       focused = ownerState.focused,
@@ -31958,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'
     });
@@ -31988,7 +32258,7 @@
       focused: fcs.focused,
       required: fcs.required
     });
-    var classes = useUtilityClasses$10(ownerState);
+    var classes = useUtilityClasses$11(ownerState);
     return /*#__PURE__*/jsxRuntime_2(FormLabelRoot, _extends({
       as: component,
       ownerState: ownerState,
@@ -32095,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) {
@@ -32386,7 +32659,7 @@
     });
     return classes;
   }
-  var useUtilityClasses$$ = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$10 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       container = ownerState.container,
       direction = ownerState.direction,
@@ -32414,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'
     });
@@ -32467,7 +32740,7 @@
     }, breakpointsValues, {
       breakpoints: breakpoints.keys
     });
-    var classes = useUtilityClasses$$(ownerState);
+    var classes = useUtilityClasses$10(ownerState);
     return /*#__PURE__*/jsxRuntime_1(GridContext$1.Provider, {
       value: columns,
       children: /*#__PURE__*/jsxRuntime_1(GridRoot, _extends({
@@ -32632,7 +32905,7 @@
     }),
     componentName: 'MuiGrid2',
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$B({
+      return useThemeProps$G({
         props: inProps,
         name: 'MuiGrid2'
       });
@@ -33139,7 +33412,7 @@
   }
   generateUtilityClasses$1('PrivateHiddenCss', ['root', 'xlDown', 'xlUp', 'onlyXl', 'lgDown', 'lgUp', 'onlyLg', 'mdDown', 'mdUp', 'onlyMd', 'smDown', 'smUp', 'onlySm', 'xsDown', 'xsUp', 'onlyXs']);
 
-  var useUtilityClasses$_ = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$$ = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       breakpoints = ownerState.breakpoints;
     var slots = {
@@ -33225,7 +33498,7 @@
     var ownerState = _extends({}, props, {
       breakpoints: breakpoints
     });
-    var classes = useUtilityClasses$_(ownerState);
+    var classes = useUtilityClasses$$(ownerState);
     return /*#__PURE__*/jsxRuntime_1(HiddenCssRoot, {
       className: clsx(classes.root, className),
       ownerState: ownerState,
@@ -33432,7 +33705,7 @@
   var iconClasses = generateUtilityClasses$1('MuiIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
   var iconClasses$1 = iconClasses;
 
-  var useUtilityClasses$Z = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$_ = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       fontSize = ownerState.fontSize,
       classes = ownerState.classes;
@@ -33484,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'
     });
@@ -33504,7 +33777,7 @@
       component: Component,
       fontSize: fontSize
     });
-    var classes = useUtilityClasses$Z(ownerState);
+    var classes = useUtilityClasses$_(ownerState);
     return /*#__PURE__*/jsxRuntime_1(IconRoot, _extends({
       as: Component,
       className: clsx(baseClassName,
@@ -33580,7 +33853,7 @@
   }
   var ImageListContext$1 = ImageListContext;
 
-  var useUtilityClasses$Y = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$Z = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       variant = ownerState.variant;
     var slots = {
@@ -33609,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'
     });
@@ -33655,7 +33928,7 @@
       rowHeight: rowHeight,
       variant: variant
     });
-    var classes = useUtilityClasses$Y(ownerState);
+    var classes = useUtilityClasses$Z(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ImageListRoot, _extends({
       as: component,
       className: clsx(classes.root, classes[variant], className),
@@ -33728,7 +34001,7 @@
   var imageListItemClasses = generateUtilityClasses$1('MuiImageListItem', ['root', 'img', 'standard', 'woven', 'masonry', 'quilted']);
   var imageListItemClasses$1 = imageListItemClasses;
 
-  var useUtilityClasses$X = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$Y = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       variant = ownerState.variant;
     var slots = {
@@ -33770,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'
     });
@@ -33805,7 +34078,7 @@
       rows: rows,
       variant: variant
     });
-    var classes = useUtilityClasses$X(ownerState);
+    var classes = useUtilityClasses$Y(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ImageListItemRoot, _extends({
       as: component,
       className: clsx(classes.root, classes[variant], className),
@@ -33886,7 +34159,7 @@
   var imageListItemBarClasses = generateUtilityClasses$1('MuiImageListItemBar', ['root', 'positionBottom', 'positionTop', 'positionBelow', 'titleWrap', 'titleWrapBottom', 'titleWrapTop', 'titleWrapBelow', 'titleWrapActionPosLeft', 'titleWrapActionPosRight', 'title', 'subtitle', 'actionIcon', 'actionIconActionPosLeft', 'actionIconActionPosRight']);
   var imageListItemBarClasses$1 = imageListItemBarClasses;
 
-  var useUtilityClasses$W = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$X = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       position = ownerState.position,
       actionIcon = ownerState.actionIcon,
@@ -33998,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'
     });
@@ -34015,7 +34288,7 @@
       position: position,
       actionPosition: actionPosition
     });
-    var classes = useUtilityClasses$W(ownerState);
+    var classes = useUtilityClasses$X(ownerState);
     return /*#__PURE__*/jsxRuntime_2(ImageListItemBarRoot, _extends({
       ownerState: ownerState,
       className: clsx(classes.root, className),
@@ -34085,7 +34358,7 @@
   } ;
   var ImageListItemBar$1 = ImageListItemBar;
 
-  var useUtilityClasses$V = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$W = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disableUnderline = ownerState.disableUnderline;
     var slots = {
@@ -34172,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'
     });
@@ -34192,7 +34465,7 @@
       _props$type = props.type,
       type = _props$type === void 0 ? 'text' : _props$type,
       other = _objectWithoutProperties(props, ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"]);
-    var classes = useUtilityClasses$V(props);
+    var classes = useUtilityClasses$W(props);
     var ownerState = {
       disableUnderline: disableUnderline
     };
@@ -34419,7 +34692,7 @@
     var ownerState = props.ownerState;
     return [styles.root, styles["position".concat(capitalize(ownerState.position))], ownerState.disablePointerEvents === true && styles.disablePointerEvents, styles[ownerState.variant]];
   };
-  var useUtilityClasses$U = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$V = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disablePointerEvents = ownerState.disablePointerEvents,
       hiddenLabel = ownerState.hiddenLabel,
@@ -34460,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'
     });
@@ -34494,7 +34767,7 @@
       position: position,
       variant: variant
     });
-    var classes = useUtilityClasses$U(ownerState);
+    var classes = useUtilityClasses$V(ownerState);
     return /*#__PURE__*/jsxRuntime_1(FormControlContext$1.Provider, {
       value: null,
       children: /*#__PURE__*/jsxRuntime_1(InputAdornmentRoot, _extends({
@@ -34571,7 +34844,7 @@
   var inputLabelClasses = generateUtilityClasses$1('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
   var inputLabelClasses$1 = inputLabelClasses;
 
-  var useUtilityClasses$T = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$U = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       formControl = ownerState.formControl,
       size = ownerState.size,
@@ -34660,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
     });
@@ -34690,7 +34963,7 @@
       required: fcs.required,
       focused: fcs.focused
     });
-    var classes = useUtilityClasses$T(ownerState);
+    var classes = useUtilityClasses$U(ownerState);
     return /*#__PURE__*/jsxRuntime_1(InputLabelRoot, _extends({
       "data-shrink": shrink,
       ownerState: ownerState,
@@ -34780,7 +35053,7 @@
   var indeterminate1Keyframe = keyframes(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  0% {\n    left: -35%;\n    right: 100%;\n  }\n\n  60% {\n    left: 100%;\n    right: -90%;\n  }\n\n  100% {\n    left: 100%;\n    right: -90%;\n  }\n"])));
   var indeterminate2Keyframe = keyframes(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  0% {\n    left: -200%;\n    right: 100%;\n  }\n\n  60% {\n    left: 107%;\n    right: -8%;\n  }\n\n  100% {\n    left: 107%;\n    right: -8%;\n  }\n"])));
   var bufferKeyframe = keyframes(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 1;\n    background-position: 0 -23px;\n  }\n\n  60% {\n    opacity: 0;\n    background-position: 0 -23px;\n  }\n\n  100% {\n    opacity: 1;\n    background-position: -200px -23px;\n  }\n"])));
-  var useUtilityClasses$S = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$T = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       variant = ownerState.variant,
       color = ownerState.color;
@@ -34932,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'
     });
@@ -34948,7 +35221,7 @@
       color: color,
       variant: variant
     });
-    var classes = useUtilityClasses$S(ownerState);
+    var classes = useUtilityClasses$T(ownerState);
     var isRtl = useRtl();
     var rootProps = {};
     var inlineStyles = {
@@ -35073,7 +35346,7 @@
   };
   var getTextDecoration$1 = getTextDecoration;
 
-  var useUtilityClasses$R = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$S = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       component = ownerState.component,
       focusVisible = ownerState.focusVisible,
@@ -35139,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'
     });
@@ -35191,7 +35464,7 @@
       underline: underline,
       variant: variant
     });
-    var classes = useUtilityClasses$R(ownerState);
+    var classes = useUtilityClasses$S(ownerState);
     return /*#__PURE__*/jsxRuntime_1(LinkRoot, _extends({
       color: color,
       className: clsx(classes.root, className),
@@ -35278,7 +35551,7 @@
   var listClasses = generateUtilityClasses$1('MuiList', ['root', 'padding', 'dense', 'subheader']);
   var listClasses$1 = listClasses;
 
-  var useUtilityClasses$Q = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$R = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disablePadding = ownerState.disablePadding,
       dense = ownerState.dense,
@@ -35310,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'
     });
@@ -35334,7 +35607,7 @@
       dense: dense,
       disablePadding: disablePadding
     });
-    var classes = useUtilityClasses$Q(ownerState);
+    var classes = useUtilityClasses$R(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListContext$1.Provider, {
       value: context,
       children: /*#__PURE__*/jsxRuntime_2(ListRoot, _extends({
@@ -35408,7 +35681,7 @@
     var ownerState = props.ownerState;
     return [styles.root, ownerState.dense && styles.dense, ownerState.alignItems === 'flex-start' && styles.alignItemsFlexStart, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters];
   };
-  var useUtilityClasses$P = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$Q = function useUtilityClasses(ownerState) {
     var alignItems = ownerState.alignItems,
       classes = ownerState.classes,
       dense = ownerState.dense,
@@ -35483,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'
     });
@@ -35530,7 +35803,7 @@
       divider: divider,
       selected: selected
     });
-    var classes = useUtilityClasses$P(ownerState);
+    var classes = useUtilityClasses$Q(ownerState);
     var handleRef = useForkRef(listItemRef, ref);
     return /*#__PURE__*/jsxRuntime_1(ListContext$1.Provider, {
       value: childContext,
@@ -35635,7 +35908,7 @@
   var listItemSecondaryActionClasses = generateUtilityClasses$1('MuiListItemSecondaryAction', ['root', 'disableGutters']);
   var listItemSecondaryActionClasses$1 = listItemSecondaryActionClasses;
 
-  var useUtilityClasses$O = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$P = function useUtilityClasses(ownerState) {
     var disableGutters = ownerState.disableGutters,
       classes = ownerState.classes;
     var slots = {
@@ -35666,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'
     });
@@ -35676,7 +35949,7 @@
     var ownerState = _extends({}, props, {
       disableGutters: context.disableGutters
     });
-    var classes = useUtilityClasses$O(ownerState);
+    var classes = useUtilityClasses$P(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListItemSecondaryActionRoot, _extends({
       className: clsx(classes.root, className),
       ownerState: ownerState,
@@ -35712,7 +35985,7 @@
     var ownerState = props.ownerState;
     return [styles.root, ownerState.dense && styles.dense, ownerState.alignItems === 'flex-start' && styles.alignItemsFlexStart, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters, !ownerState.disablePadding && styles.padding, ownerState.button && styles.button, ownerState.hasSecondaryAction && styles.secondaryAction];
   };
-  var useUtilityClasses$N = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$O = function useUtilityClasses(ownerState) {
     var alignItems = ownerState.alignItems,
       button = ownerState.button,
       classes = ownerState.classes,
@@ -35811,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'
     });
@@ -35887,7 +36160,7 @@
       hasSecondaryAction: hasSecondaryAction,
       selected: selected
     });
-    var classes = useUtilityClasses$N(ownerState);
+    var classes = useUtilityClasses$O(ownerState);
     var handleRef = useForkRef(listItemRef, ref);
     var Root = slots.root || components.Root || ListItemRoot;
     var rootProps = slotProps.root || componentsProps.root || {};
@@ -36116,7 +36389,7 @@
   var listItemAvatarClasses = generateUtilityClasses$1('MuiListItemAvatar', ['root', 'alignItemsFlexStart']);
   var listItemAvatarClasses$1 = listItemAvatarClasses;
 
-  var useUtilityClasses$M = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$N = function useUtilityClasses(ownerState) {
     var alignItems = ownerState.alignItems,
       classes = ownerState.classes;
     var slots = {
@@ -36145,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'
     });
@@ -36155,7 +36428,7 @@
     var ownerState = _extends({}, props, {
       alignItems: context.alignItems
     });
-    var classes = useUtilityClasses$M(ownerState);
+    var classes = useUtilityClasses$N(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListItemAvatarRoot, _extends({
       className: clsx(classes.root, className),
       ownerState: ownerState,
@@ -36192,7 +36465,7 @@
   var listItemIconClasses = generateUtilityClasses$1('MuiListItemIcon', ['root', 'alignItemsFlexStart']);
   var listItemIconClasses$1 = listItemIconClasses;
 
-  var useUtilityClasses$L = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$M = function useUtilityClasses(ownerState) {
     var alignItems = ownerState.alignItems,
       classes = ownerState.classes;
     var slots = {
@@ -36224,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'
     });
@@ -36234,7 +36507,7 @@
     var ownerState = _extends({}, props, {
       alignItems: context.alignItems
     });
-    var classes = useUtilityClasses$L(ownerState);
+    var classes = useUtilityClasses$M(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListItemIconRoot, _extends({
       className: clsx(classes.root, className),
       ownerState: ownerState,
@@ -36272,7 +36545,7 @@
   var listItemTextClasses = generateUtilityClasses$1('MuiListItemText', ['root', 'multiline', 'dense', 'inset', 'primary', 'secondary']);
   var listItemTextClasses$1 = listItemTextClasses;
 
-  var useUtilityClasses$K = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$L = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       inset = ownerState.inset,
       primary = ownerState.primary,
@@ -36307,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'
     });
@@ -36333,7 +36606,7 @@
       secondary: !!secondary,
       dense: dense
     });
-    var classes = useUtilityClasses$K(ownerState);
+    var classes = useUtilityClasses$L(ownerState);
     if (primary != null && primary.type !== Typography$1 && !disableTypography) {
       primary = /*#__PURE__*/jsxRuntime_1(Typography$1, _extends({
         variant: dense ? 'body2' : 'body1',
@@ -36728,7 +37001,7 @@
   function resolveAnchorEl(anchorEl) {
     return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
   }
-  var useUtilityClasses$J = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$K = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root'],
@@ -36820,7 +37093,7 @@
       transitionDuration: transitionDurationProp,
       TransitionProps: TransitionProps
     });
-    var classes = useUtilityClasses$J(ownerState);
+    var classes = useUtilityClasses$K(ownerState);
 
     // Returns the top/left offset of the position
     // to attach to on the anchor element (or body if none is provided)
@@ -37236,7 +37509,7 @@
     vertical: 'top',
     horizontal: 'left'
   };
-  var useUtilityClasses$I = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$J = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root'],
@@ -37281,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'
     });
@@ -37322,7 +37595,7 @@
       TransitionProps: TransitionProps,
       variant: variant
     });
-    var classes = useUtilityClasses$I(ownerState);
+    var classes = useUtilityClasses$J(ownerState);
     var autoFocusItem = autoFocus && !disableAutoFocusItem && open;
     var menuListActionsRef = React__namespace.useRef(null);
     var handleEntering = function handleEntering(element, isAppearing) {
@@ -37538,7 +37811,7 @@
     var ownerState = props.ownerState;
     return [styles.root, ownerState.dense && styles.dense, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters];
   };
-  var useUtilityClasses$H = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$I = function useUtilityClasses(ownerState) {
     var disabled = ownerState.disabled,
       dense = ownerState.dense,
       divider = ownerState.divider,
@@ -37625,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'
     });
@@ -37667,7 +37940,7 @@
       divider: divider,
       disableGutters: disableGutters
     });
-    var classes = useUtilityClasses$H(props);
+    var classes = useUtilityClasses$I(props);
     var handleRef = useForkRef(menuItemRef, ref);
     var tabIndex;
     if (!props.disabled) {
@@ -37772,7 +38045,7 @@
   var mobileStepperClasses$1 = mobileStepperClasses;
 
   var useThemeProps$9 = createUseThemeProps();
-  var useUtilityClasses$G = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$H = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       position = ownerState.position;
     var slots = {
@@ -37929,7 +38202,7 @@
         value = Math.ceil(activeStep / (steps - 1) * 100);
       }
     }
-    var classes = useUtilityClasses$G(ownerState);
+    var classes = useUtilityClasses$H(ownerState);
     return /*#__PURE__*/jsxRuntime_2(MobileStepperRoot, _extends({
       square: true,
       elevation: 0,
@@ -38015,7 +38288,7 @@
   var nativeSelectClasses = generateUtilityClasses$1('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
   var nativeSelectClasses$1 = nativeSelectClasses;
 
-  var useUtilityClasses$F = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$G = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       variant = ownerState.variant,
       disabled = ownerState.disabled,
@@ -38134,7 +38407,7 @@
       variant: variant,
       error: error
     });
-    var classes = useUtilityClasses$F(ownerState);
+    var classes = useUtilityClasses$G(ownerState);
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
       children: [/*#__PURE__*/jsxRuntime_1(NativeSelectSelect, _extends({
         ownerState: ownerState,
@@ -38205,7 +38478,7 @@
   } ;
   var NativeSelectInput$1 = NativeSelectInput;
 
-  var useUtilityClasses$E = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$F = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root']
@@ -38217,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
     });
@@ -38241,7 +38514,7 @@
     var ownerState = _extends({}, props, {
       classes: classesProp
     });
-    var classes = useUtilityClasses$E(ownerState);
+    var classes = useUtilityClasses$F(ownerState);
     classesProp.root;
       var otherClasses = _objectWithoutProperties(classesProp, ["root"]);
     return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
@@ -38446,7 +38719,7 @@
     style: PropTypes.object
   } ;
 
-  var useUtilityClasses$D = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$E = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root'],
@@ -38542,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'
     });
@@ -38561,7 +38834,7 @@
       _props$type = props.type,
       type = _props$type === void 0 ? 'text' : _props$type,
       other = _objectWithoutProperties(props, ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"]);
-    var classes = useUtilityClasses$D(props);
+    var classes = useUtilityClasses$E(props);
     var muiFormControl = useFormControl();
     var fcs = formControlState({
       props: props,
@@ -38925,7 +39198,7 @@
     var ownerState = props.ownerState;
     return [styles.root, styles[ownerState.variant], styles["size".concat(capitalize(ownerState.size))], ownerState.variant === 'text' && styles["text".concat(capitalize(ownerState.color))], ownerState.variant === 'outlined' && styles["outlined".concat(capitalize(ownerState.color))], ownerState.shape === 'rounded' && styles.rounded, ownerState.type === 'page' && styles.page, (ownerState.type === 'start-ellipsis' || ownerState.type === 'end-ellipsis') && styles.ellipsis, (ownerState.type === 'previous' || ownerState.type === 'next') && styles.previousNext, (ownerState.type === 'first' || ownerState.type === 'last') && styles.firstLast];
   };
-  var useUtilityClasses$C = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$D = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       color = ownerState.color,
       disabled = ownerState.disabled,
@@ -39092,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'
     });
@@ -39128,7 +39401,7 @@
       variant: variant
     });
     var isRtl = useRtl();
-    var classes = useUtilityClasses$C(ownerState);
+    var classes = useUtilityClasses$D(ownerState);
     var normalizedIcons = isRtl ? {
       previous: slots.next || components.next || NavigateNextIcon,
       next: slots.previous || components.previous || NavigateBeforeIcon,
@@ -39257,7 +39530,7 @@
   } ;
   var PaginationItem$1 = PaginationItem;
 
-  var useUtilityClasses$B = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$C = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       variant = ownerState.variant;
     var slots = {
@@ -39295,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'
     });
@@ -39356,7 +39629,7 @@
       size: size,
       variant: variant
     });
-    var classes = useUtilityClasses$B(ownerState);
+    var classes = useUtilityClasses$C(ownerState);
     return /*#__PURE__*/jsxRuntime_1(PaginationRoot, _extends({
       "aria-label": "pagination navigation",
       className: clsx(classes.root, className),
@@ -39598,7 +39871,7 @@
   var radioClasses = generateUtilityClasses$1('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
   var radioClasses$1 = radioClasses;
 
-  var useUtilityClasses$A = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$B = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       color = ownerState.color,
       size = ownerState.size;
@@ -39650,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'
     });
@@ -39671,7 +39944,7 @@
       color: color,
       size: size
     });
-    var classes = useUtilityClasses$A(ownerState);
+    var classes = useUtilityClasses$B(ownerState);
     var radioGroup = useRadioGroup();
     var checked = checkedProp;
     var onChange = createChainedFunction(onChangeProp, radioGroup && radioGroup.onChange);
@@ -39790,15 +40063,32 @@
   } ;
   var Radio$1 = Radio;
 
+  function getRadioGroupUtilityClass(slot) {
+    return generateUtilityClass$1('MuiRadioGroup', slot);
+  }
+  var radioGroupClasses = generateUtilityClasses$1('MuiRadioGroup', ['root', 'row', 'error']);
+  var radioGroupClasses$1 = radioGroupClasses;
+
+  var useUtilityClasses$A = function useUtilityClasses(props) {
+    var classes = props.classes,
+      row = props.row,
+      error = props.error;
+    var slots = {
+      root: ['root', row && 'row', error && 'error']
+    };
+    return composeClasses(slots, getRadioGroupUtilityClass, classes);
+  };
   var RadioGroup = /*#__PURE__*/React__namespace.forwardRef(function RadioGroup(props, ref) {
     var actions = props.actions,
       children = props.children,
+      className = props.className,
       defaultValue = props.defaultValue,
       nameProp = props.name,
       _onChange = props.onChange,
       valueProp = props.value,
-      other = _objectWithoutProperties(props, ["actions", "children", "defaultValue", "name", "onChange", "value"]);
+      other = _objectWithoutProperties(props, ["actions", "children", "className", "defaultValue", "name", "onChange", "value"]);
     var rootRef = React__namespace.useRef(null);
+    var classes = useUtilityClasses$A(props);
     var _useControlled = useControlled({
         controlled: valueProp,
         "default": defaultValue,
@@ -39838,7 +40128,8 @@
       value: contextValue,
       children: /*#__PURE__*/jsxRuntime_1(FormGroup$1, _extends({
         role: "radiogroup",
-        ref: handleRef
+        ref: handleRef,
+        className: clsx(classes.root, className)
       }, other, {
         children: children
       }))
@@ -39853,6 +40144,10 @@
      * The content of the component.
      */
     children: PropTypes.node,
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
     /**
      * The default value. Use when the component is not controlled.
      */
@@ -40131,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
     });
@@ -40572,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'
     });
@@ -41294,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
     });
@@ -41617,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'
     });
@@ -42026,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'
       },
@@ -42075,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',
@@ -42863,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'
     });
@@ -42985,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'
     });
@@ -43520,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'
     });
@@ -44082,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'
     });
@@ -44755,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'
     });
@@ -44949,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'
     });
@@ -46337,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
     });
@@ -47253,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'
     });
@@ -47457,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'
     });
@@ -47530,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,
@@ -47578,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'
     });
@@ -47713,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'
     });
@@ -47852,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'
     });
@@ -47927,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'
     });
@@ -48006,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'
     });
@@ -48102,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'
     });
@@ -48476,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'
     });
@@ -48832,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'
     });
@@ -48980,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'
     });
@@ -49191,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'
     });
@@ -49468,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'
     });
@@ -50179,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'
     });
@@ -50595,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'
     });
@@ -50799,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'
     });
@@ -51318,6 +51611,7 @@
   exports.getPaginationUtilityClass = getPaginationUtilityClass;
   exports.getPaperUtilityClass = getPaperUtilityClass;
   exports.getPopoverUtilityClass = getPopoverUtilityClass;
+  exports.getRadioGroupUtilityClass = getRadioGroupUtilityClass;
   exports.getRadioUtilityClass = getRadioUtilityClass;
   exports.getRatingUtilityClass = getRatingUtilityClass;
   exports.getScopedCssBaselineUtilityClass = getScopedCssBaselineUtilityClass;
@@ -51400,6 +51694,7 @@
   exports.private_createTypography = createTypography;
   exports.private_excludeVariablesFromRoot = excludeVariablesFromRoot$1;
   exports.radioClasses = radioClasses$1;
+  exports.radioGroupClasses = radioGroupClasses$1;
   exports.ratingClasses = ratingClasses$1;
   exports.recomposeColor = recomposeColor;
   exports.requirePropFactory = requirePropFactory;
@@ -51468,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;