@mui/material 5.15.13 → 5.15.15

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.13
+ * @mui/material v5.15.15
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -7169,7 +7169,7 @@
     return resolveProps(theme.components[name].defaultProps, props);
   }
 
-  function useThemeProps$6(_ref) {
+  function useThemeProps$c(_ref) {
     var props = _ref.props,
       name = _ref.name,
       defaultTheme = _ref.defaultTheme,
@@ -7663,7 +7663,7 @@
   }
   function private_safeEmphasize(color, coefficient, warning) {
     try {
-      return private_safeEmphasize(color, coefficient);
+      return emphasize(color, coefficient);
     } catch (error) {
       if (warning && "development" !== 'production') {
         console.warn(warning);
@@ -8738,7 +8738,7 @@
           // do nothing if mode does not change
           return currentState;
         }
-        var newMode = !mode ? defaultMode : mode;
+        var newMode = mode != null ? mode : defaultMode;
         try {
           localStorage.setItem(modeStorageKey, newMode);
         } catch (e) {
@@ -8819,11 +8819,17 @@
         });
       }
     }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
-    var handleMediaQuery = React__namespace.useCallback(function (e) {
+    var handleMediaQuery = React__namespace.useCallback(function (event) {
       if (state.mode === 'system') {
         setState(function (currentState) {
+          var systemMode = event != null && event.matches ? 'dark' : 'light';
+
+          // Early exit, nothing changed.
+          if (currentState.systemMode === systemMode) {
+            return currentState;
+          }
           return _extends({}, currentState, {
-            systemMode: e != null && e.matches ? 'dark' : 'light'
+            systemMode: systemMode
           });
         });
       }
@@ -8844,36 +8850,36 @@
       media.addListener(handler);
       handler(media);
       return function () {
-        return media.removeListener(handler);
+        media.removeListener(handler);
       };
     }, []);
 
     // Handle when localStorage has changed
     React__namespace.useEffect(function () {
-      var handleStorage = function handleStorage(event) {
-        var value = event.newValue;
-        if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
-          // If the key is deleted, value will be null then reset color scheme to the default one.
-          if (event.key.endsWith('light')) {
-            setColorScheme({
-              light: value
-            });
+      if (storageWindow) {
+        var handleStorage = function handleStorage(event) {
+          var value = event.newValue;
+          if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
+            // If the key is deleted, value will be null then reset color scheme to the default one.
+            if (event.key.endsWith('light')) {
+              setColorScheme({
+                light: value
+              });
+            }
+            if (event.key.endsWith('dark')) {
+              setColorScheme({
+                dark: value
+              });
+            }
           }
-          if (event.key.endsWith('dark')) {
-            setColorScheme({
-              dark: value
-            });
+          if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
+            setMode(value || defaultMode);
           }
-        }
-        if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
-          setMode(value || defaultMode);
-        }
-      };
-      if (storageWindow) {
+        };
         // For syncing color-scheme changes between iframes
         storageWindow.addEventListener('storage', handleStorage);
         return function () {
-          return storageWindow.removeEventListener('storage', handleStorage);
+          storageWindow.removeEventListener('storage', handleStorage);
         };
       }
       return undefined;
@@ -8917,53 +8923,53 @@
       }
       return value;
     };
-    function CssVarsProvider(_ref) {
-      var children = _ref.children,
-        _ref$theme = _ref.theme,
-        themeProp = _ref$theme === void 0 ? defaultTheme : _ref$theme,
-        _ref$modeStorageKey = _ref.modeStorageKey,
-        modeStorageKey = _ref$modeStorageKey === void 0 ? defaultModeStorageKey : _ref$modeStorageKey,
-        _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
-        colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? defaultColorSchemeStorageKey : _ref$colorSchemeStora,
-        _ref$attribute = _ref.attribute,
-        attribute = _ref$attribute === void 0 ? defaultAttribute : _ref$attribute,
-        _ref$defaultMode = _ref.defaultMode,
-        defaultMode = _ref$defaultMode === void 0 ? designSystemMode : _ref$defaultMode,
-        _ref$defaultColorSche = _ref.defaultColorScheme,
-        defaultColorScheme = _ref$defaultColorSche === void 0 ? designSystemColorScheme : _ref$defaultColorSche,
-        _ref$disableTransitio = _ref.disableTransitionOnChange,
-        disableTransitionOnChange = _ref$disableTransitio === void 0 ? designSystemTransitionOnChange : _ref$disableTransitio,
-        _ref$storageWindow = _ref.storageWindow,
-        storageWindow = _ref$storageWindow === void 0 ? typeof window === 'undefined' ? undefined : window : _ref$storageWindow,
-        _ref$documentNode = _ref.documentNode,
-        documentNode = _ref$documentNode === void 0 ? typeof document === 'undefined' ? undefined : document : _ref$documentNode,
-        _ref$colorSchemeNode = _ref.colorSchemeNode,
-        colorSchemeNode = _ref$colorSchemeNode === void 0 ? typeof document === 'undefined' ? undefined : document.documentElement : _ref$colorSchemeNode,
-        _ref$colorSchemeSelec = _ref.colorSchemeSelector,
-        colorSchemeSelector = _ref$colorSchemeSelec === void 0 ? ':root' : _ref$colorSchemeSelec,
-        _ref$disableNestedCon = _ref.disableNestedContext,
-        disableNestedContext = _ref$disableNestedCon === void 0 ? false : _ref$disableNestedCon,
-        _ref$disableStyleShee = _ref.disableStyleSheetGeneration,
-        disableStyleSheetGeneration = _ref$disableStyleShee === void 0 ? false : _ref$disableStyleShee;
+    function CssVarsProvider(props) {
+      var children = props.children,
+        _props$theme = props.theme,
+        themeProp = _props$theme === void 0 ? defaultTheme : _props$theme,
+        _props$modeStorageKey = props.modeStorageKey,
+        modeStorageKey = _props$modeStorageKey === void 0 ? defaultModeStorageKey : _props$modeStorageKey,
+        _props$colorSchemeSto = props.colorSchemeStorageKey,
+        colorSchemeStorageKey = _props$colorSchemeSto === void 0 ? defaultColorSchemeStorageKey : _props$colorSchemeSto,
+        _props$attribute = props.attribute,
+        attribute = _props$attribute === void 0 ? defaultAttribute : _props$attribute,
+        _props$defaultMode = props.defaultMode,
+        defaultMode = _props$defaultMode === void 0 ? designSystemMode : _props$defaultMode,
+        _props$defaultColorSc = props.defaultColorScheme,
+        defaultColorScheme = _props$defaultColorSc === void 0 ? designSystemColorScheme : _props$defaultColorSc,
+        _props$disableTransit = props.disableTransitionOnChange,
+        disableTransitionOnChange = _props$disableTransit === void 0 ? designSystemTransitionOnChange : _props$disableTransit,
+        _props$storageWindow = props.storageWindow,
+        storageWindow = _props$storageWindow === void 0 ? typeof window === 'undefined' ? undefined : window : _props$storageWindow,
+        _props$documentNode = props.documentNode,
+        documentNode = _props$documentNode === void 0 ? typeof document === 'undefined' ? undefined : document : _props$documentNode,
+        _props$colorSchemeNod = props.colorSchemeNode,
+        colorSchemeNode = _props$colorSchemeNod === void 0 ? typeof document === 'undefined' ? undefined : document.documentElement : _props$colorSchemeNod,
+        _props$colorSchemeSel = props.colorSchemeSelector,
+        colorSchemeSelector = _props$colorSchemeSel === void 0 ? ':root' : _props$colorSchemeSel,
+        _props$disableNestedC = props.disableNestedContext,
+        disableNestedContext = _props$disableNestedC === void 0 ? false : _props$disableNestedC,
+        _props$disableStyleSh = props.disableStyleSheetGeneration,
+        disableStyleSheetGeneration = _props$disableStyleSh === void 0 ? false : _props$disableStyleSh;
       var hasMounted = React__namespace.useRef(false);
       var upperTheme = useTheme$1();
       var ctx = React__namespace.useContext(ColorSchemeContext);
       var nested = !!ctx && !disableNestedContext;
       var scopedTheme = themeProp[themeId];
-      var _ref2 = scopedTheme || themeProp,
-        _ref2$colorSchemes = _ref2.colorSchemes,
-        colorSchemes = _ref2$colorSchemes === void 0 ? {} : _ref2$colorSchemes,
-        _ref2$components = _ref2.components,
-        components = _ref2$components === void 0 ? {} : _ref2$components,
-        _ref2$generateCssVars = _ref2.generateCssVars,
-        generateCssVars = _ref2$generateCssVars === void 0 ? function () {
+      var _ref = scopedTheme || themeProp,
+        _ref$colorSchemes = _ref.colorSchemes,
+        colorSchemes = _ref$colorSchemes === void 0 ? {} : _ref$colorSchemes,
+        _ref$components = _ref.components,
+        components = _ref$components === void 0 ? {} : _ref$components,
+        _ref$generateCssVars = _ref.generateCssVars,
+        generateCssVars = _ref$generateCssVars === void 0 ? function () {
           return {
             vars: {},
             css: {}
           };
-        } : _ref2$generateCssVars,
-        cssVarPrefix = _ref2.cssVarPrefix,
-        restThemeProp = _objectWithoutProperties(_ref2, ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"]);
+        } : _ref$generateCssVars,
+        cssVarPrefix = _ref.cssVarPrefix,
+        restThemeProp = _objectWithoutProperties(_ref, ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"]);
       var allColorSchemes = Object.keys(colorSchemes);
       var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
       var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -9032,10 +9038,10 @@
       //    The other color schemes uses selector, default as data attribute, to increase the CSS specificity so that they can override the default color scheme stylesheet.
       var defaultColorSchemeStyleSheet = {};
       var otherColorSchemesStyleSheet = {};
-      Object.entries(colorSchemes).forEach(function (_ref3) {
-        var _ref4 = _slicedToArray(_ref3, 2),
-          key = _ref4[0],
-          scheme = _ref4[1];
+      Object.entries(colorSchemes).forEach(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          key = _ref3[0],
+          scheme = _ref3[1];
         var _generateCssVars2 = generateCssVars(key),
           css = _generateCssVars2.css,
           vars = _generateCssVars2.vars;
@@ -9117,14 +9123,14 @@
       }, []);
       var contextValue = React__namespace.useMemo(function () {
         return {
-          mode: mode,
-          systemMode: systemMode,
-          setMode: setMode,
-          lightColorScheme: lightColorScheme,
-          darkColorScheme: darkColorScheme,
+          allColorSchemes: allColorSchemes,
           colorScheme: colorScheme,
+          darkColorScheme: darkColorScheme,
+          lightColorScheme: lightColorScheme,
+          mode: mode,
           setColorScheme: setColorScheme,
-          allColorSchemes: allColorSchemes
+          setMode: setMode,
+          systemMode: systemMode
         };
       }, [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
       var shouldGenerateStyleSheet = true;
@@ -9476,13 +9482,13 @@
     }
   });
   var useThemePropsDefault$2 = function useThemePropsDefault(inProps) {
-    return useThemeProps$6({
+    return useThemeProps$c({
       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);
     };
@@ -9567,7 +9573,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
@@ -9864,7 +9870,7 @@
     }
   });
   function useThemePropsDefault$1(props) {
-    return useThemeProps$6({
+    return useThemeProps$c({
       props: props,
       name: 'MuiGrid',
       defaultTheme: defaultTheme$5
@@ -10031,7 +10037,7 @@
     }
   });
   function useThemePropsDefault(props) {
-    return useThemeProps$6({
+    return useThemeProps$c({
       props: props,
       name: 'MuiStack',
       defaultTheme: defaultTheme$4
@@ -11073,10 +11079,10 @@
     return theme[THEME_ID] || theme;
   }
 
-  function useThemeProps$5(_ref) {
+  function useThemeProps$b(_ref) {
     var props = _ref.props,
       name = _ref.name;
-    return useThemeProps$6({
+    return useThemeProps$c({
       props: props,
       name: name,
       defaultTheme: defaultTheme$3,
@@ -11084,14 +11090,20 @@
     });
   }
 
+  // copied from @mui/system/createStyled
+  function slotShouldForwardProp(prop) {
+    return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
+  }
+
   var rootShouldForwardProp = function rootShouldForwardProp(prop) {
-    return shouldForwardProp(prop) && prop !== 'classes';
+    return slotShouldForwardProp(prop) && prop !== 'classes';
   };
-  var slotShouldForwardProp = shouldForwardProp;
+  var rootShouldForwardProp$1 = rootShouldForwardProp;
+
   var styled = createStyled({
     themeId: THEME_ID,
     defaultTheme: defaultTheme$3,
-    rootShouldForwardProp: rootShouldForwardProp
+    rootShouldForwardProp: rootShouldForwardProp$1
   });
   var styled$1 = styled;
 
@@ -11175,7 +11187,7 @@
     if (!("".concat(key, "Channel") in obj)) {
       // custom channel token is not provided, generate one.
       // if channel token can't be generated, show a warning.
-      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, e.g. \"12 12 12\") or undefined if you want to remove the channel token."));
+      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."));
     }
   }
   var silent = function silent(fn) {
@@ -11523,7 +11535,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;
@@ -11549,7 +11561,7 @@
       height: '1em',
       display: 'inline-block',
       // the <svg> will define the property that has `currentColor`
-      // e.g. heroicons uses fill="none" and stroke="currentColor"
+      // for example heroicons uses fill="none" and stroke="currentColor"
       fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
       flexShrink: 0,
       transition: (_theme$transitions = theme.transitions) == null || (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
@@ -11570,7 +11582,7 @@
     };
   });
   var SvgIcon = /*#__PURE__*/React__namespace.forwardRef(function SvgIcon(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiSvgIcon'
     });
@@ -11603,7 +11615,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),
@@ -11727,6 +11739,11 @@
     return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  function createUseThemeProps(name) {
+    return useThemeProps$b;
+  }
+
   function _setPrototypeOf(o, p) {
     _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
       o.__proto__ = p;
@@ -12736,7 +12753,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 = {
@@ -12814,7 +12831,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$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiCollapse'
     });
@@ -12844,7 +12861,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);
@@ -13106,7 +13123,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,
@@ -13144,7 +13161,7 @@
     }));
   });
   var Paper = /*#__PURE__*/React__namespace.forwardRef(function Paper(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiPaper'
     });
@@ -13164,7 +13181,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();
@@ -13521,7 +13538,8 @@
   var accordionClasses = generateUtilityClasses$1('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
   var accordionClasses$1 = accordionClasses;
 
-  var useUtilityClasses$1L = function useUtilityClasses(ownerState) {
+  var useThemeProps$a = createUseThemeProps();
+  var useUtilityClasses$1M = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       square = ownerState.square,
       expanded = ownerState.expanded,
@@ -13585,29 +13603,40 @@
       backgroundColor: (theme.vars || theme).palette.action.disabledBackground
     });
   }, function (_ref4) {
-    var theme = _ref4.theme,
-      ownerState = _ref4.ownerState;
-    return _extends({}, !ownerState.square && {
-      borderRadius: 0,
-      '&:first-of-type': {
-        borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
-        borderTopRightRadius: (theme.vars || theme).shape.borderRadius
-      },
-      '&:last-of-type': {
-        borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
-        borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
-        // Fix a rendering issue on Edge
-        '@supports (-ms-ime-align: auto)': {
-          borderBottomLeftRadius: 0,
-          borderBottomRightRadius: 0
+    var theme = _ref4.theme;
+    return {
+      variants: [{
+        props: function props(_props) {
+          return !_props.square;
+        },
+        style: {
+          borderRadius: 0,
+          '&:first-of-type': {
+            borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+            borderTopRightRadius: (theme.vars || theme).shape.borderRadius
+          },
+          '&:last-of-type': {
+            borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+            borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
+            // Fix a rendering issue on Edge
+            '@supports (-ms-ime-align: auto)': {
+              borderBottomLeftRadius: 0,
+              borderBottomRightRadius: 0
+            }
+          }
         }
-      }
-    }, !ownerState.disableGutters && _defineProperty({}, "&.".concat(accordionClasses$1.expanded), {
-      margin: '16px 0'
-    }));
+      }, {
+        props: function props(_props2) {
+          return !_props2.disableGutters;
+        },
+        style: _defineProperty({}, "&.".concat(accordionClasses$1.expanded), {
+          margin: '16px 0'
+        })
+      }]
+    };
   });
   var Accordion = /*#__PURE__*/React__namespace.forwardRef(function Accordion(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$a({
       props: inProps,
       name: 'MuiAccordion'
     });
@@ -13663,7 +13692,7 @@
       disableGutters: disableGutters,
       expanded: expanded
     });
-    var classes = useUtilityClasses$1L(ownerState);
+    var classes = useUtilityClasses$1M(ownerState);
     var backwardCompatibleSlots = _extends({
       transition: TransitionComponentProp
     }, slots);
@@ -13801,7 +13830,8 @@
   var accordionActionsClasses = generateUtilityClasses$1('MuiAccordionActions', ['root', 'spacing']);
   var accordionActionsClasses$1 = accordionActionsClasses;
 
-  var useUtilityClasses$1K = function useUtilityClasses(ownerState) {
+  var useThemeProps$9 = createUseThemeProps();
+  var useUtilityClasses$1L = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disableSpacing = ownerState.disableSpacing;
     var slots = {
@@ -13816,21 +13846,24 @@
       var ownerState = props.ownerState;
       return [styles.root, !ownerState.disableSpacing && styles.spacing];
     }
-  })(function (_ref) {
-    var ownerState = _ref.ownerState;
-    return _extends({
-      display: 'flex',
-      alignItems: 'center',
-      padding: 8,
-      justifyContent: 'flex-end'
-    }, !ownerState.disableSpacing && {
-      '& > :not(style) ~ :not(style)': {
-        marginLeft: 8
+  })({
+    display: 'flex',
+    alignItems: 'center',
+    padding: 8,
+    justifyContent: 'flex-end',
+    variants: [{
+      props: function props(_props) {
+        return !_props.disableSpacing;
+      },
+      style: {
+        '& > :not(style) ~ :not(style)': {
+          marginLeft: 8
+        }
       }
-    });
+    }]
   });
   var AccordionActions = /*#__PURE__*/React__namespace.forwardRef(function AccordionActions(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$9({
       props: inProps,
       name: 'MuiAccordionActions'
     });
@@ -13841,7 +13874,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,
@@ -13883,7 +13916,8 @@
   var accordionDetailsClasses = generateUtilityClasses$1('MuiAccordionDetails', ['root']);
   var accordionDetailsClasses$1 = accordionDetailsClasses;
 
-  var useUtilityClasses$1J = function useUtilityClasses(ownerState) {
+  var useThemeProps$8 = createUseThemeProps();
+  var useUtilityClasses$1K = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root']
@@ -13903,14 +13937,14 @@
     };
   });
   var AccordionDetails = /*#__PURE__*/React__namespace.forwardRef(function AccordionDetails(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$8({
       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,
@@ -14083,7 +14117,7 @@
    * TODO v5: Make private
    */
   var TouchRipple = /*#__PURE__*/React__namespace.forwardRef(function TouchRipple(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTouchRipple'
     });
@@ -14295,7 +14329,7 @@
   var buttonBaseClasses = generateUtilityClasses$1('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
   var buttonBaseClasses$1 = buttonBaseClasses;
 
-  var useUtilityClasses$1I = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1J = function useUtilityClasses(ownerState) {
     var disabled = ownerState.disabled,
       focusVisible = ownerState.focusVisible,
       focusVisibleClassName = ownerState.focusVisibleClassName,
@@ -14359,7 +14393,7 @@
    * It contains a load of style reset and some focus/ripple logic.
    */
   var ButtonBase = /*#__PURE__*/React__namespace.forwardRef(function ButtonBase(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiButtonBase'
     });
@@ -14573,7 +14607,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),
@@ -14770,7 +14804,8 @@
   var accordionSummaryClasses = generateUtilityClasses$1('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
   var accordionSummaryClasses$1 = accordionSummaryClasses;
 
-  var useUtilityClasses$1H = function useUtilityClasses(ownerState) {
+  var useThemeProps$7 = createUseThemeProps();
+  var useUtilityClasses$1I = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       expanded = ownerState.expanded,
       disabled = ownerState.disabled,
@@ -14790,12 +14825,11 @@
       return styles.root;
     }
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
+    var theme = _ref.theme;
     var transition = {
       duration: theme.transitions.duration.shortest
     };
-    return _extends(_defineProperty(_defineProperty(_defineProperty({
+    return _defineProperty(_defineProperty(_defineProperty(_defineProperty({
       display: 'flex',
       minHeight: 48,
       padding: theme.spacing(0, 2),
@@ -14806,9 +14840,14 @@
       opacity: (theme.vars || theme).palette.action.disabledOpacity
     }), "&:hover:not(.".concat(accordionSummaryClasses$1.disabled, ")"), {
       cursor: 'pointer'
-    }), !ownerState.disableGutters && _defineProperty({}, "&.".concat(accordionSummaryClasses$1.expanded), {
-      minHeight: 64
-    }));
+    }), "variants", [{
+      props: function props(_props) {
+        return !_props.disableGutters;
+      },
+      style: _defineProperty({}, "&.".concat(accordionSummaryClasses$1.expanded), {
+        minHeight: 64
+      })
+    }]);
   });
   var AccordionSummaryContent = styled$1('div', {
     name: 'MuiAccordionSummary',
@@ -14817,19 +14856,24 @@
       return styles.content;
     }
   })(function (_ref3) {
-    var theme = _ref3.theme,
-      ownerState = _ref3.ownerState;
-    return _extends({
+    var theme = _ref3.theme;
+    return {
       display: 'flex',
       flexGrow: 1,
-      margin: '12px 0'
-    }, !ownerState.disableGutters && _defineProperty({
-      transition: theme.transitions.create(['margin'], {
-        duration: theme.transitions.duration.shortest
-      })
-    }, "&.".concat(accordionSummaryClasses$1.expanded), {
-      margin: '20px 0'
-    }));
+      margin: '12px 0',
+      variants: [{
+        props: function props(_props2) {
+          return !_props2.disableGutters;
+        },
+        style: _defineProperty({
+          transition: theme.transitions.create(['margin'], {
+            duration: theme.transitions.duration.shortest
+          })
+        }, "&.".concat(accordionSummaryClasses$1.expanded), {
+          margin: '20px 0'
+        })
+      }]
+    };
   });
   var AccordionSummaryExpandIconWrapper = styled$1('div', {
     name: 'MuiAccordionSummary',
@@ -14837,8 +14881,8 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.expandIconWrapper;
     }
-  })(function (_ref5) {
-    var theme = _ref5.theme;
+  })(function (_ref4) {
+    var theme = _ref4.theme;
     return _defineProperty({
       display: 'flex',
       color: (theme.vars || theme).palette.action.active,
@@ -14851,7 +14895,7 @@
     });
   });
   var AccordionSummary = /*#__PURE__*/React__namespace.forwardRef(function AccordionSummary(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$7({
       props: inProps,
       name: 'MuiAccordionSummary'
     });
@@ -14880,7 +14924,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,
@@ -14945,11 +14989,6 @@
   } ;
   var AccordionSummary$1 = AccordionSummary;
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  function createUseThemeProps(name) {
-    return useThemeProps$5;
-  }
-
   function getAlertUtilityClass(slot) {
     return generateUtilityClass$1('MuiAlert', slot);
   }
@@ -14962,7 +15001,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,
@@ -15043,7 +15082,7 @@
    * regarding the available icon options.
    */
   var IconButton = /*#__PURE__*/React__namespace.forwardRef(function IconButton(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiIconButton'
     });
@@ -15067,7 +15106,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,
@@ -15170,8 +15209,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$4 = createUseThemeProps();
-  var useUtilityClasses$1F = function useUtilityClasses(ownerState) {
+  var useThemeProps$6 = createUseThemeProps();
+  var useUtilityClasses$1G = function useUtilityClasses(ownerState) {
     var variant = ownerState.variant,
       color = ownerState.color,
       severity = ownerState.severity,
@@ -15318,7 +15357,7 @@
     })
   };
   var Alert = /*#__PURE__*/React__namespace.forwardRef(function Alert(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$6({
       props: inProps,
       name: 'MuiAlert'
     });
@@ -15353,7 +15392,7 @@
       variant: variant,
       colorSeverity: color || severity
     });
-    var classes = useUtilityClasses$1F(ownerState);
+    var classes = useUtilityClasses$1G(ownerState);
     var externalForwardedProps = {
       slots: _extends({
         closeButton: components.CloseButton,
@@ -15538,7 +15577,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,
@@ -15603,7 +15642,7 @@
     return colorTransformations$1[color] || color;
   };
   var Typography = /*#__PURE__*/React__namespace.forwardRef(function Typography(inProps, ref) {
-    var themeProps = useThemeProps$5({
+    var themeProps = useThemeProps$b({
       props: inProps,
       name: 'MuiTypography'
     });
@@ -15638,7 +15677,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,
@@ -15729,8 +15768,8 @@
   var alertTitleClasses = generateUtilityClasses$1('MuiAlertTitle', ['root']);
   var alertTitleClasses$1 = alertTitleClasses;
 
-  var useThemeProps$3 = createUseThemeProps();
-  var useUtilityClasses$1D = function useUtilityClasses(ownerState) {
+  var useThemeProps$5 = createUseThemeProps();
+  var useUtilityClasses$1E = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root']
@@ -15751,14 +15790,14 @@
     };
   });
   var AlertTitle = /*#__PURE__*/React__namespace.forwardRef(function AlertTitle(inProps, ref) {
-    var props = useThemeProps$3({
+    var props = useThemeProps$5({
       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",
@@ -15797,7 +15836,7 @@
   var appBarClasses = generateUtilityClasses$1('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning']);
   var appBarClasses$1 = appBarClasses;
 
-  var useUtilityClasses$1C = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1D = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       position = ownerState.position,
       classes = ownerState.classes;
@@ -15889,7 +15928,7 @@
     }));
   });
   var AppBar = /*#__PURE__*/React__namespace.forwardRef(function AppBar(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiAppBar'
     });
@@ -15906,7 +15945,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",
@@ -16422,7 +16461,7 @@
       doc.addEventListener('keydown', loopFocus, true);
 
       // With Edge, Safari and Firefox, no focus related events are fired when the focused area stops being a focused area.
-      // e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=559561.
+      // for example https://bugzilla.mozilla.org/show_bug.cgi?id=559561.
       // Instead, we can look if the active element was restored on the BODY element.
       //
       // The whatwg spec defines how the browser should behave but does not explicitly mention any events:
@@ -18937,7 +18976,7 @@
   function isVirtualElement(element) {
     return !isHTMLElement(element);
   }
-  var useUtilityClasses$1B = function useUtilityClasses() {
+  var useUtilityClasses$1C = function useUtilityClasses() {
     var slots = {
       root: ['root']
     };
@@ -19051,7 +19090,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,
@@ -20841,7 +20880,7 @@
       React__namespace.useEffect(function () {
         if (!inputRef.current || inputRef.current.nodeName !== 'INPUT') {
           if (inputRef.current && inputRef.current.nodeName === 'TEXTAREA') {
-            console.warn(["A textarea element was provided to ".concat(componentName, " where input was expected."), "This is not a supported scenario but it may work under certain conditions.", "A textarea keyboard navigation may conflict with Autocomplete controls (e.g. enter and arrow keys).", "Make sure to test keyboard navigation and add custom event handlers if necessary."].join('\n'));
+            console.warn(["A textarea element was provided to ".concat(componentName, " where input was expected."), "This is not a supported scenario but it may work under certain conditions.", "A textarea keyboard navigation may conflict with Autocomplete controls (for example enter and arrow keys).", "Make sure to test keyboard navigation and add custom event handlers if necessary."].join('\n'));
           } else {
             console.error(["MUI: Unable to find the input element. It was resolved to ".concat(inputRef.current, " while an HTMLInputElement was expected."), "Instead, ".concat(componentName, " expects an input element."), '', componentName === 'useAutocomplete' ? 'Make sure you have bound getInputProps correctly and that the normal ref/effect resolutions order is guaranteed.' : 'Make sure you have customized the input component correctly.'].join('\n'));
           }
@@ -21406,7 +21445,7 @@
   var Popper = /*#__PURE__*/React__namespace.forwardRef(function Popper(inProps, ref) {
     var _slots$root;
     var theme = useTheme$3();
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiPopper'
     });
@@ -21585,7 +21624,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,
@@ -21631,7 +21670,7 @@
     });
   });
   var ListSubheader = /*#__PURE__*/React__namespace.forwardRef(function ListSubheader(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiListSubheader'
     });
@@ -21654,7 +21693,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),
@@ -21722,7 +21761,7 @@
   var chipClasses = generateUtilityClasses$1('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
   var chipClasses$1 = chipClasses;
 
-  var useUtilityClasses$1z = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1A = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disabled = ownerState.disabled,
       size = ownerState.size,
@@ -21930,7 +21969,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$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiChip'
     });
@@ -22002,7 +22041,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
@@ -22249,7 +22288,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,
@@ -22418,7 +22457,7 @@
    */
   var InputBase = /*#__PURE__*/React__namespace.forwardRef(function InputBase(inProps, ref) {
     var _slotProps$input;
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiInputBase'
     });
@@ -22647,7 +22686,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;
@@ -22957,8 +22996,9 @@
   var autocompleteClasses = generateUtilityClasses$1('MuiAutocomplete', ['root', 'expanded', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'option', 'groupLabel', 'groupUl']);
   var autocompleteClasses$1 = autocompleteClasses;
 
-  var _ClearIcon, _ArrowDropDownIcon;
-  var useUtilityClasses$1x = function useUtilityClasses(ownerState) {
+  var _styled, _ClearIcon, _ArrowDropDownIcon;
+  var useThemeProps$4 = createUseThemeProps();
+  var useUtilityClasses$1y = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disablePortal = ownerState.disablePortal,
       expanded = ownerState.expanded,
@@ -23000,89 +23040,100 @@
         size = ownerState.size;
       return [_defineProperty({}, "& .".concat(autocompleteClasses$1.tag), styles.tag), _defineProperty({}, "& .".concat(autocompleteClasses$1.tag), styles["tagSize".concat(capitalize(size))]), _defineProperty({}, "& .".concat(autocompleteClasses$1.inputRoot), styles.inputRoot), _defineProperty({}, "& .".concat(autocompleteClasses$1.input), styles.input), _defineProperty({}, "& .".concat(autocompleteClasses$1.input), inputFocused && styles.inputFocused), styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
     }
-  })(function (_ref6) {
-    var _extends3;
-    var ownerState = _ref6.ownerState;
-    return _extends(_defineProperty(_defineProperty({}, "&.".concat(autocompleteClasses$1.focused, " .").concat(autocompleteClasses$1.clearIndicator), {
-      visibility: 'visible'
-    }), '@media (pointer: fine)', _defineProperty({}, "&:hover .".concat(autocompleteClasses$1.clearIndicator), {
-      visibility: 'visible'
-    })), ownerState.fullWidth && {
+  })((_styled = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_styled, "&.".concat(autocompleteClasses$1.focused, " .").concat(autocompleteClasses$1.clearIndicator), {
+    visibility: 'visible'
+  }), '@media (pointer: fine)', _defineProperty({}, "&:hover .".concat(autocompleteClasses$1.clearIndicator), {
+    visibility: 'visible'
+  })), "& .".concat(autocompleteClasses$1.tag), {
+    margin: 3,
+    maxWidth: 'calc(100% - 6px)'
+  }), "& .".concat(autocompleteClasses$1.inputRoot), _defineProperty(_defineProperty(_defineProperty({
+    flexWrap: 'wrap'
+  }, ".".concat(autocompleteClasses$1.hasPopupIcon, "&, .").concat(autocompleteClasses$1.hasClearIcon, "&"), {
+    paddingRight: 26 + 4
+  }), ".".concat(autocompleteClasses$1.hasPopupIcon, ".").concat(autocompleteClasses$1.hasClearIcon, "&"), {
+    paddingRight: 52 + 4
+  }), "& .".concat(autocompleteClasses$1.input), {
+    width: 0,
+    minWidth: 30
+  })), "& .".concat(inputClasses$1.root), {
+    paddingBottom: 1,
+    '& .MuiInput-input': {
+      padding: '4px 4px 4px 0px'
+    }
+  }), "& .".concat(inputClasses$1.root, ".").concat(inputBaseClasses$1.sizeSmall), _defineProperty({}, "& .".concat(inputClasses$1.input), {
+    padding: '2px 4px 3px 0'
+  })), "& .".concat(outlinedInputClasses$1.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    padding: 9
+  }, ".".concat(autocompleteClasses$1.hasPopupIcon, "&, .").concat(autocompleteClasses$1.hasClearIcon, "&"), {
+    paddingRight: 26 + 4 + 9
+  }), ".".concat(autocompleteClasses$1.hasPopupIcon, ".").concat(autocompleteClasses$1.hasClearIcon, "&"), {
+    paddingRight: 52 + 4 + 9
+  }), "& .".concat(autocompleteClasses$1.input), {
+    padding: '7.5px 4px 7.5px 5px'
+  }), "& .".concat(autocompleteClasses$1.endAdornment), {
+    right: 9
+  })), "& .".concat(outlinedInputClasses$1.root, ".").concat(inputBaseClasses$1.sizeSmall), _defineProperty({
+    // Don't specify paddingRight, as it overrides the default value set when there is only
+    // one of the popup or clear icon as the specificity is equal so the latter one wins
+    paddingTop: 6,
+    paddingBottom: 6,
+    paddingLeft: 6
+  }, "& .".concat(autocompleteClasses$1.input), {
+    padding: '2.5px 4px 2.5px 8px'
+  })), "& .".concat(filledInputClasses$1.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    paddingTop: 19,
+    paddingLeft: 8
+  }, ".".concat(autocompleteClasses$1.hasPopupIcon, "&, .").concat(autocompleteClasses$1.hasClearIcon, "&"), {
+    paddingRight: 26 + 4 + 9
+  }), ".".concat(autocompleteClasses$1.hasPopupIcon, ".").concat(autocompleteClasses$1.hasClearIcon, "&"), {
+    paddingRight: 52 + 4 + 9
+  }), "& .".concat(filledInputClasses$1.input), {
+    padding: '7px 4px'
+  }), "& .".concat(autocompleteClasses$1.endAdornment), {
+    right: 9
+  })), "& .".concat(filledInputClasses$1.root, ".").concat(inputBaseClasses$1.sizeSmall), _defineProperty({
+    paddingBottom: 1
+  }, "& .".concat(filledInputClasses$1.input), {
+    padding: '2.5px 4px'
+  })), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_styled, "& .".concat(inputBaseClasses$1.hiddenLabel), {
+    paddingTop: 8
+  }), "& .".concat(filledInputClasses$1.root, ".").concat(inputBaseClasses$1.hiddenLabel), _defineProperty({
+    paddingTop: 0,
+    paddingBottom: 0
+  }, "& .".concat(autocompleteClasses$1.input), {
+    paddingTop: 16,
+    paddingBottom: 17
+  })), "& .".concat(filledInputClasses$1.root, ".").concat(inputBaseClasses$1.hiddenLabel, ".").concat(inputBaseClasses$1.sizeSmall), _defineProperty({}, "& .".concat(autocompleteClasses$1.input), {
+    paddingTop: 8,
+    paddingBottom: 9
+  })), "& .".concat(autocompleteClasses$1.input), {
+    flexGrow: 1,
+    textOverflow: 'ellipsis',
+    opacity: 0
+  }), "variants", [{
+    props: {
+      fullWidth: true
+    },
+    style: {
       width: '100%'
-    }, (_extends3 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends3, "& .".concat(autocompleteClasses$1.tag), _extends({
-      margin: 3,
-      maxWidth: 'calc(100% - 6px)'
-    }, ownerState.size === 'small' && {
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: _defineProperty({}, "& .".concat(autocompleteClasses$1.tag), {
       margin: 2,
       maxWidth: 'calc(100% - 4px)'
-    })), "& .".concat(autocompleteClasses$1.inputRoot), _defineProperty(_defineProperty(_defineProperty({
-      flexWrap: 'wrap'
-    }, ".".concat(autocompleteClasses$1.hasPopupIcon, "&, .").concat(autocompleteClasses$1.hasClearIcon, "&"), {
-      paddingRight: 26 + 4
-    }), ".".concat(autocompleteClasses$1.hasPopupIcon, ".").concat(autocompleteClasses$1.hasClearIcon, "&"), {
-      paddingRight: 52 + 4
-    }), "& .".concat(autocompleteClasses$1.input), {
-      width: 0,
-      minWidth: 30
-    })), "& .".concat(inputClasses$1.root), {
-      paddingBottom: 1,
-      '& .MuiInput-input': {
-        padding: '4px 4px 4px 0px'
-      }
-    }), "& .".concat(inputClasses$1.root, ".").concat(inputBaseClasses$1.sizeSmall), _defineProperty({}, "& .".concat(inputClasses$1.input), {
-      padding: '2px 4px 3px 0'
-    })), "& .".concat(outlinedInputClasses$1.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
-      padding: 9
-    }, ".".concat(autocompleteClasses$1.hasPopupIcon, "&, .").concat(autocompleteClasses$1.hasClearIcon, "&"), {
-      paddingRight: 26 + 4 + 9
-    }), ".".concat(autocompleteClasses$1.hasPopupIcon, ".").concat(autocompleteClasses$1.hasClearIcon, "&"), {
-      paddingRight: 52 + 4 + 9
-    }), "& .".concat(autocompleteClasses$1.input), {
-      padding: '7.5px 4px 7.5px 5px'
-    }), "& .".concat(autocompleteClasses$1.endAdornment), {
-      right: 9
-    })), "& .".concat(outlinedInputClasses$1.root, ".").concat(inputBaseClasses$1.sizeSmall), _defineProperty({
-      // Don't specify paddingRight, as it overrides the default value set when there is only
-      // one of the popup or clear icon as the specificity is equal so the latter one wins
-      paddingTop: 6,
-      paddingBottom: 6,
-      paddingLeft: 6
-    }, "& .".concat(autocompleteClasses$1.input), {
-      padding: '2.5px 4px 2.5px 8px'
-    })), "& .".concat(filledInputClasses$1.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
-      paddingTop: 19,
-      paddingLeft: 8
-    }, ".".concat(autocompleteClasses$1.hasPopupIcon, "&, .").concat(autocompleteClasses$1.hasClearIcon, "&"), {
-      paddingRight: 26 + 4 + 9
-    }), ".".concat(autocompleteClasses$1.hasPopupIcon, ".").concat(autocompleteClasses$1.hasClearIcon, "&"), {
-      paddingRight: 52 + 4 + 9
-    }), "& .".concat(filledInputClasses$1.input), {
-      padding: '7px 4px'
-    }), "& .".concat(autocompleteClasses$1.endAdornment), {
-      right: 9
-    })), "& .".concat(filledInputClasses$1.root, ".").concat(inputBaseClasses$1.sizeSmall), _defineProperty({
-      paddingBottom: 1
-    }, "& .".concat(filledInputClasses$1.input), {
-      padding: '2.5px 4px'
-    })), "& .".concat(inputBaseClasses$1.hiddenLabel), {
-      paddingTop: 8
-    }), "& .".concat(filledInputClasses$1.root, ".").concat(inputBaseClasses$1.hiddenLabel), _defineProperty({
-      paddingTop: 0,
-      paddingBottom: 0
-    }, "& .".concat(autocompleteClasses$1.input), {
-      paddingTop: 16,
-      paddingBottom: 17
-    })), _defineProperty(_defineProperty(_extends3, "& .".concat(filledInputClasses$1.root, ".").concat(inputBaseClasses$1.hiddenLabel, ".").concat(inputBaseClasses$1.sizeSmall), _defineProperty({}, "& .".concat(autocompleteClasses$1.input), {
-      paddingTop: 8,
-      paddingBottom: 9
-    })), "& .".concat(autocompleteClasses$1.input), _extends({
-      flexGrow: 1,
-      textOverflow: 'ellipsis',
-      opacity: 0
-    }, ownerState.inputFocused && {
+    })
+  }, {
+    props: {
+      inputFocused: true
+    },
+    style: _defineProperty({}, "& .".concat(autocompleteClasses$1.input), {
       opacity: 1
-    }))));
-  });
+    })
+  }])));
   var AutocompleteEndAdornment = styled$1('div', {
     name: 'MuiAutocomplete',
     slot: 'EndAdornment',
@@ -23110,18 +23161,21 @@
   var AutocompletePopupIndicator = styled$1(IconButton$1, {
     name: 'MuiAutocomplete',
     slot: 'PopupIndicator',
-    overridesResolver: function overridesResolver(_ref7, styles) {
-      var ownerState = _ref7.ownerState;
+    overridesResolver: function overridesResolver(_ref6, styles) {
+      var ownerState = _ref6.ownerState;
       return _extends({}, styles.popupIndicator, ownerState.popupOpen && styles.popupIndicatorOpen);
     }
-  })(function (_ref8) {
-    var ownerState = _ref8.ownerState;
-    return _extends({
-      padding: 2,
-      marginRight: -2
-    }, ownerState.popupOpen && {
-      transform: 'rotate(180deg)'
-    });
+  })({
+    padding: 2,
+    marginRight: -2,
+    variants: [{
+      props: {
+        popupOpen: true
+      },
+      style: {
+        transform: 'rotate(180deg)'
+      }
+    }]
   });
   var AutocompletePopper = styled$1(Popper$1, {
     name: 'MuiAutocomplete',
@@ -23130,14 +23184,19 @@
       var ownerState = props.ownerState;
       return [_defineProperty({}, "& .".concat(autocompleteClasses$1.option), styles.option), styles.popper, ownerState.disablePortal && styles.popperDisablePortal];
     }
-  })(function (_ref10) {
-    var theme = _ref10.theme,
-      ownerState = _ref10.ownerState;
-    return _extends({
-      zIndex: (theme.vars || theme).zIndex.modal
-    }, ownerState.disablePortal && {
-      position: 'absolute'
-    });
+  })(function (_ref8) {
+    var theme = _ref8.theme;
+    return {
+      zIndex: (theme.vars || theme).zIndex.modal,
+      variants: [{
+        props: {
+          disablePortal: true
+        },
+        style: {
+          position: 'absolute'
+        }
+      }]
+    };
   });
   var AutocompletePaper = styled$1(Paper$1, {
     name: 'MuiAutocomplete',
@@ -23145,8 +23204,8 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.paper;
     }
-  })(function (_ref11) {
-    var theme = _ref11.theme;
+  })(function (_ref9) {
+    var theme = _ref9.theme;
     return _extends({}, theme.typography.body1, {
       overflow: 'auto'
     });
@@ -23157,8 +23216,8 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.loading;
     }
-  })(function (_ref12) {
-    var theme = _ref12.theme;
+  })(function (_ref10) {
+    var theme = _ref10.theme;
     return {
       color: (theme.vars || theme).palette.text.secondary,
       padding: '14px 16px'
@@ -23170,8 +23229,8 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.noOptions;
     }
-  })(function (_ref13) {
-    var theme = _ref13.theme;
+  })(function (_ref11) {
+    var theme = _ref11.theme;
     return {
       color: (theme.vars || theme).palette.text.secondary,
       padding: '14px 16px'
@@ -23183,8 +23242,8 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.listbox;
     }
-  })(function (_ref14) {
-    var theme = _ref14.theme;
+  })(function (_ref12) {
+    var theme = _ref12.theme;
     return _defineProperty({
       listStyle: 'none',
       margin: 0,
@@ -23237,8 +23296,8 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.groupLabel;
     }
-  })(function (_ref16) {
-    var theme = _ref16.theme;
+  })(function (_ref14) {
+    var theme = _ref14.theme;
     return {
       backgroundColor: (theme.vars || theme).palette.background.paper,
       top: -8
@@ -23257,7 +23316,7 @@
   }));
   var Autocomplete = /*#__PURE__*/React__namespace.forwardRef(function Autocomplete(inProps, ref) {
     var _slotProps$clearIndic, _slotProps$paper, _slotProps$popper, _slotProps$popupIndic;
-    var props = useThemeProps$5({
+    var props = useThemeProps$4({
       props: inProps,
       name: 'MuiAutocomplete'
     });
@@ -23385,8 +23444,8 @@
     var hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
     var _getInputProps = getInputProps(),
       handleInputMouseDown = _getInputProps.onMouseDown;
-    var _ref17 = ListboxProps != null ? ListboxProps : {},
-      externalListboxRef = _ref17.ref;
+    var _ref15 = ListboxProps != null ? ListboxProps : {},
+      externalListboxRef = _ref15.ref;
     var _getListboxProps = getListboxProps(),
       listboxRef = _getListboxProps.ref,
       otherListboxProps = _objectWithoutProperties(_getListboxProps, ["ref"]);
@@ -23410,7 +23469,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) {
@@ -23504,7 +23563,7 @@
       }));
     };
     var autocompletePopper = null;
-    if (!loading && groupedOptions.length > 0) {
+    if (groupedOptions.length > 0) {
       autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/jsxRuntime_1(AutocompleteListbox, _extends({
         as: ListboxComponent,
         className: classes.listbox,
@@ -23843,7 +23902,7 @@
     ListboxProps: PropTypes.object,
     /**
      * If `true`, the component is in a loading state.
-     * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. `options` are empty).
+     * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty).
      * @default false
      */
     loading: PropTypes.bool,
@@ -24033,8 +24092,8 @@
   var avatarClasses = generateUtilityClasses$1('MuiAvatar', ['root', 'colorDefault', 'circular', 'rounded', 'square', 'img', 'fallback']);
   var avatarClasses$1 = avatarClasses;
 
-  var useThemeProps$2 = createUseThemeProps();
-  var useUtilityClasses$1w = function useUtilityClasses(ownerState) {
+  var useThemeProps$3 = createUseThemeProps();
+  var useUtilityClasses$1x = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       variant = ownerState.variant,
       colorDefault = ownerState.colorDefault;
@@ -24165,7 +24224,7 @@
     return loaded;
   }
   var Avatar = /*#__PURE__*/React__namespace.forwardRef(function Avatar(inProps, ref) {
-    var props = useThemeProps$2({
+    var props = useThemeProps$3({
       props: inProps,
       name: 'MuiAvatar'
     });
@@ -24199,7 +24258,7 @@
       component: component,
       variant: variant
     });
-    var classes = useUtilityClasses$1w(ownerState);
+    var classes = useUtilityClasses$1x(ownerState);
     var _useSlot = useSlot('img', {
         className: classes.img,
         elementType: AvatarImg,
@@ -24326,7 +24385,7 @@
     small: -16,
     medium: null
   };
-  var useUtilityClasses$1v = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1w = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root'],
@@ -24355,7 +24414,7 @@
   });
   var AvatarGroup = /*#__PURE__*/React__namespace.forwardRef(function AvatarGroup(inProps, ref) {
     var _slotProps$additional;
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiAvatarGroup'
     });
@@ -24383,7 +24442,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)) {
@@ -24703,7 +24762,7 @@
   var backdropClasses = generateUtilityClasses$1('MuiBackdrop', ['root', 'invisible']);
   var backdropClasses$1 = backdropClasses;
 
-  var useUtilityClasses$1u = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1v = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       invisible = ownerState.invisible;
     var slots = {
@@ -24737,7 +24796,7 @@
   });
   var Backdrop = /*#__PURE__*/React__namespace.forwardRef(function Backdrop(inProps, ref) {
     var _slotProps$root, _ref2, _slots$root;
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiBackdrop'
     });
@@ -24764,7 +24823,7 @@
       component: component,
       invisible: invisible
     });
-    var classes = useUtilityClasses$1u(ownerState);
+    var classes = useUtilityClasses$1v(ownerState);
     var rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
     return /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
       "in": open,
@@ -24890,8 +24949,8 @@
 
   var RADIUS_STANDARD = 10;
   var RADIUS_DOT = 4;
-  var useThemeProps$1 = createUseThemeProps();
-  var useUtilityClasses$1t = function useUtilityClasses(ownerState) {
+  var useThemeProps$2 = createUseThemeProps();
+  var useUtilityClasses$1u = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       anchorOrigin = ownerState.anchorOrigin,
       invisible = ownerState.invisible,
@@ -25093,7 +25152,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$1({
+    var props = useThemeProps$2({
       props: inProps,
       name: 'MuiBadge'
     });
@@ -25165,7 +25224,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;
@@ -25319,7 +25378,7 @@
   var bottomNavigationClasses = generateUtilityClasses$1('MuiBottomNavigation', ['root']);
   var bottomNavigationClasses$1 = bottomNavigationClasses;
 
-  var useUtilityClasses$1s = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1t = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root']
@@ -25342,7 +25401,7 @@
     };
   });
   var BottomNavigation = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigation(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiBottomNavigation'
     });
@@ -25359,7 +25418,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),
@@ -25437,7 +25496,7 @@
   var bottomNavigationActionClasses = generateUtilityClasses$1('MuiBottomNavigationAction', ['root', 'iconOnly', 'selected', 'label']);
   var bottomNavigationActionClasses$1 = bottomNavigationActionClasses;
 
-  var useUtilityClasses$1r = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1s = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       showLabel = ownerState.showLabel,
       selected = ownerState.selected;
@@ -25498,7 +25557,7 @@
     }));
   });
   var BottomNavigationAction = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigationAction(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiBottomNavigationAction'
     });
@@ -25512,7 +25571,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);
@@ -25706,7 +25765,7 @@
   var breadcrumbsClasses = generateUtilityClasses$1('MuiBreadcrumbs', ['root', 'ol', 'li', 'separator']);
   var breadcrumbsClasses$1 = breadcrumbsClasses;
 
-  var useUtilityClasses$1q = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1r = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root'],
@@ -25765,7 +25824,7 @@
     }, []);
   }
   var Breadcrumbs = /*#__PURE__*/React__namespace.forwardRef(function Breadcrumbs(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiBreadcrumbs'
     });
@@ -25800,7 +25859,7 @@
       maxItems: maxItems,
       separator: separator
     });
-    var classes = useUtilityClasses$1q(ownerState);
+    var classes = useUtilityClasses$1r(ownerState);
     var collapsedIconSlotProps = useSlotProps({
       elementType: slots.CollapsedIcon,
       externalSlotProps: slotProps.collapsedIcon,
@@ -25965,7 +26024,7 @@
   }
   var ButtonGroupButtonContext$1 = ButtonGroupButtonContext;
 
-  var useUtilityClasses$1p = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1q = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       disableElevation = ownerState.disableElevation,
       fullWidth = ownerState.fullWidth,
@@ -25998,7 +26057,7 @@
   };
   var ButtonRoot = styled$1(ButtonBase$1, {
     shouldForwardProp: function shouldForwardProp(prop) {
-      return rootShouldForwardProp(prop) || prop === 'classes';
+      return rootShouldForwardProp$1(prop) || prop === 'classes';
     },
     name: 'MuiButton',
     slot: 'Root',
@@ -26164,7 +26223,7 @@
     var contextProps = React__namespace.useContext(ButtonGroupContext$1);
     var buttonGroupButtonContextPositionClassName = React__namespace.useContext(ButtonGroupButtonContext$1);
     var resolvedProps = resolveProps(contextProps, inProps);
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: resolvedProps,
       name: 'MuiButton'
     });
@@ -26202,7 +26261,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,
@@ -26334,7 +26393,7 @@
     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,
@@ -26425,7 +26484,7 @@
     })));
   });
   var ButtonGroup = /*#__PURE__*/React__namespace.forwardRef(function ButtonGroup(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiButtonGroup'
     });
@@ -26464,7 +26523,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,
@@ -26595,7 +26654,7 @@
   var cardClasses = generateUtilityClasses$1('MuiCard', ['root']);
   var cardClasses$1 = cardClasses;
 
-  var useUtilityClasses$1n = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1o = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root']
@@ -26614,7 +26673,7 @@
     };
   });
   var Card = /*#__PURE__*/React__namespace.forwardRef(function Card(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiCard'
     });
@@ -26625,7 +26684,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,
@@ -26673,7 +26732,7 @@
   var cardActionAreaClasses = generateUtilityClasses$1('MuiCardActionArea', ['root', 'focusVisible', 'focusHighlight']);
   var cardActionAreaClasses$1 = cardActionAreaClasses;
 
-  var useUtilityClasses$1m = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1n = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root'],
@@ -26729,7 +26788,7 @@
     };
   });
   var CardActionArea = /*#__PURE__*/React__namespace.forwardRef(function CardActionArea(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiCardActionArea'
     });
@@ -26738,7 +26797,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),
@@ -26785,7 +26844,7 @@
   var cardActionsClasses = generateUtilityClasses$1('MuiCardActions', ['root', 'spacing']);
   var cardActionsClasses$1 = cardActionsClasses;
 
-  var useUtilityClasses$1l = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1m = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disableSpacing = ownerState.disableSpacing;
     var slots = {
@@ -26813,7 +26872,7 @@
     });
   });
   var CardActions = /*#__PURE__*/React__namespace.forwardRef(function CardActions(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiCardActions'
     });
@@ -26824,7 +26883,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,
@@ -26866,7 +26925,7 @@
   var cardContentClasses = generateUtilityClasses$1('MuiCardContent', ['root']);
   var cardContentClasses$1 = cardContentClasses;
 
-  var useUtilityClasses$1k = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1l = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root']
@@ -26888,7 +26947,7 @@
     };
   });
   var CardContent = /*#__PURE__*/React__namespace.forwardRef(function CardContent(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiCardContent'
     });
@@ -26899,7 +26958,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),
@@ -26942,7 +27001,7 @@
   var cardHeaderClasses = generateUtilityClasses$1('MuiCardHeader', ['root', 'avatar', 'action', 'content', 'title', 'subheader']);
   var cardHeaderClasses$1 = cardHeaderClasses;
 
-  var useUtilityClasses$1j = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1k = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root'],
@@ -26999,7 +27058,7 @@
     flex: '1 1 auto'
   });
   var CardHeader = /*#__PURE__*/React__namespace.forwardRef(function CardHeader(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiCardHeader'
     });
@@ -27019,7 +27078,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({
@@ -27133,7 +27192,7 @@
   var cardMediaClasses = generateUtilityClasses$1('MuiCardMedia', ['root', 'media', 'img']);
   var cardMediaClasses$1 = cardMediaClasses;
 
-  var useUtilityClasses$1i = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1j = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       isMediaComponent = ownerState.isMediaComponent,
       isImageComponent = ownerState.isImageComponent;
@@ -27168,7 +27227,7 @@
   var MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
   var IMAGE_COMPONENTS = ['picture', 'img'];
   var CardMedia = /*#__PURE__*/React__namespace.forwardRef(function CardMedia(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiCardMedia'
     });
@@ -27189,7 +27248,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,
@@ -27257,7 +27316,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,
@@ -27280,7 +27339,7 @@
     });
   });
   var SwitchBaseInput = styled$1('input', {
-    shouldForwardProp: rootShouldForwardProp
+    shouldForwardProp: rootShouldForwardProp$1
   })({
     cursor: 'inherit',
     position: 'absolute',
@@ -27374,7 +27433,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),
@@ -27534,7 +27593,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,
@@ -27547,7 +27606,7 @@
   };
   var CheckboxRoot = styled$1(SwitchBase$1, {
     shouldForwardProp: function shouldForwardProp(prop) {
-      return rootShouldForwardProp(prop) || prop === 'classes';
+      return rootShouldForwardProp$1(prop) || prop === 'classes';
     },
     name: 'MuiCheckbox',
     slot: 'Root',
@@ -27579,7 +27638,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$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiCheckbox'
     });
@@ -27605,7 +27664,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({
@@ -27737,7 +27796,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,
@@ -27811,7 +27870,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$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiCircularProgress'
     });
@@ -27838,7 +27897,7 @@
       value: value,
       variant: variant
     });
-    var classes = useUtilityClasses$1f(ownerState);
+    var classes = useUtilityClasses$1g(ownerState);
     var circleStyle = {};
     var rootStyle = {};
     var rootProps = {};
@@ -27910,7 +27969,7 @@
     /**
      * The size of the component.
      * If using a number, the pixel unit is assumed.
-     * If using a string, you need to provide the CSS unit, e.g. '3rem'.
+     * If using a string, you need to provide the CSS unit, for example '3rem'.
      * @default 40
      */
     size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -27952,7 +28011,7 @@
       }
     }),
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$5({
+      return useThemeProps$b({
         props: inProps,
         name: 'MuiContainer'
       });
@@ -28075,7 +28134,7 @@
     return defaultStyles;
   };
   function CssBaseline(inProps) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiCssBaseline'
     });
@@ -28148,7 +28207,7 @@
   var modalClasses = generateUtilityClasses$1('MuiModal', ['root', 'hidden', 'backdrop']);
   var modalClasses$1 = modalClasses;
 
-  var useUtilityClasses$1e = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$1f = function useUtilityClasses(ownerState) {
     var open = ownerState.open,
       exited = ownerState.exited,
       classes = ownerState.classes;
@@ -28204,7 +28263,7 @@
    */
   var Modal = /*#__PURE__*/React__namespace.forwardRef(function Modal(inProps, ref) {
     var _ref2, _slots$root, _ref3, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       name: 'MuiModal',
       props: inProps
     });
@@ -28271,7 +28330,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';
@@ -28544,7 +28603,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,
@@ -28658,7 +28717,7 @@
    * Dialogs are overlaid modal paper based components with a backdrop.
    */
   var Dialog = /*#__PURE__*/React__namespace.forwardRef(function Dialog(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiDialog'
     });
@@ -28703,7 +28762,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.
@@ -28912,7 +28971,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 = {
@@ -28942,7 +29001,7 @@
     });
   });
   var DialogActions = /*#__PURE__*/React__namespace.forwardRef(function DialogActions(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiDialogActions'
     });
@@ -28953,7 +29012,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,
@@ -29001,7 +29060,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 = {
@@ -29034,7 +29093,7 @@
     }));
   });
   var DialogContent = /*#__PURE__*/React__namespace.forwardRef(function DialogContent(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiDialogContent'
     });
@@ -29045,7 +29104,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,
@@ -29087,7 +29146,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']
@@ -29097,7 +29156,7 @@
   };
   var DialogContentTextRoot = styled$1(Typography$1, {
     shouldForwardProp: function shouldForwardProp(prop) {
-      return rootShouldForwardProp(prop) || prop === 'classes';
+      return rootShouldForwardProp$1(prop) || prop === 'classes';
     },
     name: 'MuiDialogContentText',
     slot: 'Root',
@@ -29106,14 +29165,14 @@
     }
   })({});
   var DialogContentText = /*#__PURE__*/React__namespace.forwardRef(function DialogContentText(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       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",
@@ -29149,7 +29208,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']
@@ -29167,7 +29226,7 @@
     flex: '0 0 auto'
   });
   var DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function DialogTitle(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiDialogTitle'
     });
@@ -29175,7 +29234,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;
@@ -29222,7 +29281,7 @@
   var dividerClasses = generateUtilityClasses$1('MuiDivider', ['root', 'absolute', 'fullWidth', 'inset', 'middle', 'flexItem', 'light', 'vertical', 'withChildren', 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper', 'wrapperVertical']);
   var dividerClasses$1 = dividerClasses;
 
-  var useUtilityClasses$18 = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$19 = function useUtilityClasses(ownerState) {
     var absolute = ownerState.absolute,
       children = ownerState.children,
       classes = ownerState.classes,
@@ -29347,7 +29406,7 @@
     });
   });
   var Divider = /*#__PURE__*/React__namespace.forwardRef(function Divider(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiDivider'
     });
@@ -29380,7 +29439,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),
@@ -29791,7 +29850,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;
@@ -29814,7 +29873,7 @@
     };
   });
   var DrawerDockedRoot = styled$1('div', {
-    shouldForwardProp: rootShouldForwardProp,
+    shouldForwardProp: rootShouldForwardProp$1,
     name: 'MuiDrawer',
     slot: 'Docked',
     skipVariantsResolver: false,
@@ -29894,7 +29953,7 @@
    * when `variant="temporary"` is set.
    */
   var Drawer = /*#__PURE__*/React__namespace.forwardRef(function Drawer(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiDrawer'
     });
@@ -29946,7 +30005,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
@@ -30091,7 +30150,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,
@@ -30106,7 +30165,7 @@
     name: 'MuiFab',
     slot: 'Root',
     shouldForwardProp: function shouldForwardProp(prop) {
-      return rootShouldForwardProp(prop) || prop === 'classes';
+      return rootShouldForwardProp$1(prop) || prop === 'classes';
     },
     overridesResolver: function overridesResolver(props, styles) {
       var ownerState = props.ownerState;
@@ -30194,7 +30253,7 @@
     });
   });
   var Fab = /*#__PURE__*/React__namespace.forwardRef(function Fab(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiFab'
     });
@@ -30222,7 +30281,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,
@@ -30306,7 +30365,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 = {
@@ -30318,7 +30377,7 @@
   };
   var FilledInputRoot = styled$1(InputBaseRoot, {
     shouldForwardProp: function shouldForwardProp(prop) {
-      return rootShouldForwardProp(prop) || prop === 'classes';
+      return rootShouldForwardProp$1(prop) || prop === 'classes';
     },
     name: 'MuiFilledInput',
     slot: 'Root',
@@ -30465,7 +30524,7 @@
   });
   var FilledInput = /*#__PURE__*/React__namespace.forwardRef(function FilledInput(inProps, ref) {
     var _ref5, _slots$root, _ref6, _slots$input;
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiFilledInput'
     });
@@ -30492,7 +30551,7 @@
       multiline: multiline,
       type: type
     });
-    var classes = useUtilityClasses$15(props);
+    var classes = useUtilityClasses$16(props);
     var filledInputComponentsProps = {
       root: {
         ownerState: ownerState
@@ -30721,7 +30780,7 @@
   var formControlClasses = generateUtilityClasses$1('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
   var formControlClasses$1 = formControlClasses;
 
-  var useUtilityClasses$14 = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$15 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       margin = ownerState.margin,
       fullWidth = ownerState.fullWidth;
@@ -30785,7 +30844,7 @@
    * For instance, only one input can be focused at the same time, the state shouldn't be shared.
    */
   var FormControl = /*#__PURE__*/React__namespace.forwardRef(function FormControl(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiFormControl'
     });
@@ -30825,7 +30884,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.
@@ -31016,7 +31075,7 @@
       }
     }),
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$5({
+      return useThemeProps$b({
         props: inProps,
         name: 'MuiStack'
       });
@@ -31077,7 +31136,7 @@
   var formControlLabelClasses = generateUtilityClasses$1('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);
   var formControlLabelClasses$1 = formControlLabelClasses;
 
-  var useUtilityClasses$13 = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$14 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disabled = ownerState.disabled,
       labelPlacement = ownerState.labelPlacement,
@@ -31145,7 +31204,7 @@
    */
   var FormControlLabel = /*#__PURE__*/React__namespace.forwardRef(function FormControlLabel(inProps, ref) {
     var _ref5, _slotProps$typography;
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiFormControlLabel'
     });
@@ -31190,7 +31249,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) {
@@ -31305,7 +31364,7 @@
   var formGroupClasses = generateUtilityClasses$1('MuiFormGroup', ['root', 'row', 'error']);
   var formGroupClasses$1 = formGroupClasses;
 
-  var useUtilityClasses$12 = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$13 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       row = ownerState.row,
       error = ownerState.error;
@@ -31338,7 +31397,7 @@
    * For the `Radio`, you should be using the `RadioGroup` component instead of this one.
    */
   var FormGroup = /*#__PURE__*/React__namespace.forwardRef(function FormGroup(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiFormGroup'
     });
@@ -31356,7 +31415,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,
@@ -31399,7 +31458,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,
@@ -31443,7 +31502,7 @@
     });
   });
   var FormHelperText = /*#__PURE__*/React__namespace.forwardRef(function FormHelperText(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiFormHelperText'
     });
@@ -31476,7 +31535,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,
@@ -31556,7 +31615,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,
@@ -31607,7 +31666,7 @@
     });
   });
   var FormLabel = /*#__PURE__*/React__namespace.forwardRef(function FormLabel(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiFormLabel'
     });
@@ -31637,7 +31696,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,
@@ -32035,7 +32094,7 @@
     });
     return classes;
   }
-  var useUtilityClasses$$ = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$10 = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       container = ownerState.container,
       direction = ownerState.direction,
@@ -32063,7 +32122,7 @@
     return composeClasses(slots, getGridUtilityClass, classes);
   };
   var Grid = /*#__PURE__*/React__namespace.forwardRef(function Grid(inProps, ref) {
-    var themeProps = useThemeProps$5({
+    var themeProps = useThemeProps$b({
       props: inProps,
       name: 'MuiGrid'
     });
@@ -32116,7 +32175,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({
@@ -32281,7 +32340,7 @@
     }),
     componentName: 'MuiGrid2',
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$5({
+      return useThemeProps$b({
         props: inProps,
         name: 'MuiGrid2'
       });
@@ -32788,7 +32847,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 = {
@@ -32874,7 +32933,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,
@@ -33081,7 +33140,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;
@@ -33133,7 +33192,7 @@
     };
   });
   var Icon = /*#__PURE__*/React__namespace.forwardRef(function Icon(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiIcon'
     });
@@ -33153,7 +33212,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,
@@ -33172,7 +33231,7 @@
     // └─────────────────────────────────────────────────────────────────────┘
     /**
      * The base class applied to the icon. Defaults to 'material-icons', but can be changed to any
-     * other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc).
+     * other base class that suits the icon font you're using (for example material-icons-rounded, fas, etc).
      * @default 'material-icons'
      */
     baseClassName: PropTypes.string,
@@ -33229,7 +33288,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 = {
@@ -33258,7 +33317,7 @@
     });
   });
   var ImageList = /*#__PURE__*/React__namespace.forwardRef(function ImageList(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiImageList'
     });
@@ -33304,7 +33363,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),
@@ -33377,7 +33436,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 = {
@@ -33419,7 +33478,7 @@
     })));
   });
   var ImageListItem = /*#__PURE__*/React__namespace.forwardRef(function ImageListItem(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiImageListItem'
     });
@@ -33454,7 +33513,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),
@@ -33535,7 +33594,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,
@@ -33647,7 +33706,7 @@
     });
   });
   var ImageListItemBar = /*#__PURE__*/React__namespace.forwardRef(function ImageListItemBar(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiImageListItemBar'
     });
@@ -33664,7 +33723,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),
@@ -33734,7 +33793,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 = {
@@ -33746,7 +33805,7 @@
   };
   var InputRoot = styled$1(InputBaseRoot, {
     shouldForwardProp: function shouldForwardProp(prop) {
-      return rootShouldForwardProp(prop) || prop === 'classes';
+      return rootShouldForwardProp$1(prop) || prop === 'classes';
     },
     name: 'MuiInput',
     slot: 'Root',
@@ -33821,7 +33880,7 @@
   })({});
   var Input = /*#__PURE__*/React__namespace.forwardRef(function Input(inProps, ref) {
     var _ref3, _slots$root, _ref4, _slots$input;
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiInput'
     });
@@ -33841,7 +33900,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
     };
@@ -34068,7 +34127,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,
@@ -34109,7 +34168,7 @@
     });
   });
   var InputAdornment = /*#__PURE__*/React__namespace.forwardRef(function InputAdornment(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiInputAdornment'
     });
@@ -34143,7 +34202,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({
@@ -34220,7 +34279,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,
@@ -34237,7 +34296,7 @@
   };
   var InputLabelRoot = styled$1(FormLabel$1, {
     shouldForwardProp: function shouldForwardProp(prop) {
-      return rootShouldForwardProp(prop) || prop === 'classes';
+      return rootShouldForwardProp$1(prop) || prop === 'classes';
     },
     name: 'MuiInputLabel',
     slot: 'Root',
@@ -34309,7 +34368,7 @@
     }));
   });
   var InputLabel = /*#__PURE__*/React__namespace.forwardRef(function InputLabel(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       name: 'MuiInputLabel',
       props: inProps
     });
@@ -34339,7 +34398,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,
@@ -34429,7 +34488,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;
@@ -34581,7 +34640,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$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiLinearProgress'
     });
@@ -34597,7 +34656,7 @@
       color: color,
       variant: variant
     });
-    var classes = useUtilityClasses$S(ownerState);
+    var classes = useUtilityClasses$T(ownerState);
     var isRtl = useRtl();
     var rootProps = {};
     var inlineStyles = {
@@ -34722,7 +34781,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,
@@ -34788,7 +34847,7 @@
     }));
   });
   var Link = /*#__PURE__*/React__namespace.forwardRef(function Link(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiLink'
     });
@@ -34840,7 +34899,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),
@@ -34927,7 +34986,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,
@@ -34959,7 +35018,7 @@
     });
   });
   var List = /*#__PURE__*/React__namespace.forwardRef(function List(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiList'
     });
@@ -34983,7 +35042,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({
@@ -35057,7 +35116,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,
@@ -35073,7 +35132,7 @@
   };
   var ListItemButtonRoot = styled$1(ButtonBase$1, {
     shouldForwardProp: function shouldForwardProp(prop) {
-      return rootShouldForwardProp(prop) || prop === 'classes';
+      return rootShouldForwardProp$1(prop) || prop === 'classes';
     },
     name: 'MuiListItemButton',
     slot: 'Root',
@@ -35132,7 +35191,7 @@
     });
   });
   var ListItemButton = /*#__PURE__*/React__namespace.forwardRef(function ListItemButton(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiListItemButton'
     });
@@ -35179,7 +35238,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,
@@ -35284,7 +35343,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 = {
@@ -35315,7 +35374,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$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiListItemSecondaryAction'
     });
@@ -35325,7 +35384,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,
@@ -35361,7 +35420,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,
@@ -35460,7 +35519,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$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiListItem'
     });
@@ -35536,7 +35595,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 || {};
@@ -35765,7 +35824,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 = {
@@ -35794,7 +35853,7 @@
    * A simple wrapper to apply `List` styles to an `Avatar`.
    */
   var ListItemAvatar = /*#__PURE__*/React__namespace.forwardRef(function ListItemAvatar(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiListItemAvatar'
     });
@@ -35804,7 +35863,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,
@@ -35841,7 +35900,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 = {
@@ -35873,7 +35932,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$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiListItemIcon'
     });
@@ -35883,7 +35942,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,
@@ -35921,7 +35980,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,
@@ -35956,7 +36015,7 @@
     });
   });
   var ListItemText = /*#__PURE__*/React__namespace.forwardRef(function ListItemText(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiListItemText'
     });
@@ -35982,7 +36041,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',
@@ -36376,7 +36435,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'],
@@ -36412,7 +36471,7 @@
   });
   var Popover = /*#__PURE__*/React__namespace.forwardRef(function Popover(inProps, ref) {
     var _slotProps$paper, _slots$root, _slots$paper;
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiPopover'
     });
@@ -36468,7 +36527,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)
@@ -36884,7 +36943,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'],
@@ -36895,7 +36954,7 @@
   };
   var MenuRoot = styled$1(Popover$1, {
     shouldForwardProp: function shouldForwardProp(prop) {
-      return rootShouldForwardProp(prop) || prop === 'classes';
+      return rootShouldForwardProp$1(prop) || prop === 'classes';
     },
     name: 'MuiMenu',
     slot: 'Root',
@@ -36929,7 +36988,7 @@
   });
   var Menu = /*#__PURE__*/React__namespace.forwardRef(function Menu(inProps, ref) {
     var _slots$paper, _slotProps$paper;
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiMenu'
     });
@@ -36970,7 +37029,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) {
@@ -37186,7 +37245,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,
@@ -37201,7 +37260,7 @@
   };
   var MenuItemRoot = styled$1(ButtonBase$1, {
     shouldForwardProp: function shouldForwardProp(prop) {
-      return rootShouldForwardProp(prop) || prop === 'classes';
+      return rootShouldForwardProp$1(prop) || prop === 'classes';
     },
     name: 'MuiMenuItem',
     slot: 'Root',
@@ -37273,7 +37332,7 @@
     })));
   });
   var MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiMenuItem'
     });
@@ -37315,7 +37374,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) {
@@ -37419,7 +37478,7 @@
   var mobileStepperClasses = generateUtilityClasses$1('MuiMobileStepper', ['root', 'positionBottom', 'positionTop', 'positionStatic', 'dots', 'dot', 'dotActive', 'progress']);
   var mobileStepperClasses$1 = mobileStepperClasses;
 
-  var useUtilityClasses$G = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$H = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       position = ownerState.position;
     var slots = {
@@ -37515,7 +37574,7 @@
     });
   });
   var MobileStepper = /*#__PURE__*/React__namespace.forwardRef(function MobileStepper(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiMobileStepper'
     });
@@ -37544,7 +37603,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,
@@ -37630,7 +37689,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,
@@ -37694,7 +37753,7 @@
   var NativeSelectSelect = styled$1('select', {
     name: 'MuiNativeSelect',
     slot: 'Select',
-    shouldForwardProp: rootShouldForwardProp,
+    shouldForwardProp: rootShouldForwardProp$1,
     overridesResolver: function overridesResolver(props, styles) {
       var ownerState = props.ownerState;
       return [styles.select, styles[ownerState.variant], ownerState.error && styles.error, _defineProperty({}, "&.".concat(nativeSelectClasses$1.multiple), styles.multiple)];
@@ -37749,7 +37808,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,
@@ -37820,7 +37879,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']
@@ -37832,7 +37891,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$5({
+    var props = useThemeProps$b({
       name: 'MuiNativeSelect',
       props: inProps
     });
@@ -37856,7 +37915,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, {
@@ -37935,7 +37994,7 @@
 
   var _span$1;
   var NotchedOutlineRoot$1 = styled$1('fieldset', {
-    shouldForwardProp: rootShouldForwardProp
+    shouldForwardProp: rootShouldForwardProp$1
   })({
     textAlign: 'left',
     position: 'absolute',
@@ -37953,7 +38012,7 @@
     minWidth: '0%'
   });
   var NotchedOutlineLegend = styled$1('legend', {
-    shouldForwardProp: rootShouldForwardProp
+    shouldForwardProp: rootShouldForwardProp$1
   })(function (_ref) {
     var ownerState = _ref.ownerState,
       theme = _ref.theme;
@@ -38061,7 +38120,7 @@
     style: PropTypes.object
   } ;
 
-  var useUtilityClasses$D = function useUtilityClasses(ownerState) {
+  var useUtilityClasses$E = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
       root: ['root'],
@@ -38073,7 +38132,7 @@
   };
   var OutlinedInputRoot = styled$1(InputBaseRoot, {
     shouldForwardProp: function shouldForwardProp(prop) {
-      return rootShouldForwardProp(prop) || prop === 'classes';
+      return rootShouldForwardProp$1(prop) || prop === 'classes';
     },
     name: 'MuiOutlinedInput',
     slot: 'Root',
@@ -38157,7 +38216,7 @@
   });
   var OutlinedInput = /*#__PURE__*/React__namespace.forwardRef(function OutlinedInput(inProps, ref) {
     var _ref5, _slots$root, _ref6, _slots$input, _React$Fragment;
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiOutlinedInput'
     });
@@ -38176,7 +38235,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,
@@ -38469,7 +38528,7 @@
     endPages.length > 0 ? endPages[0] - 2 : count - 1);
 
     // Basic list of items to render
-    // e.g. itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
+    // for example itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
     var itemList = [].concat(_toConsumableArray(showFirstButton ? ['first'] : []), _toConsumableArray(hidePrevButton ? [] : ['previous']), _toConsumableArray(startPages), _toConsumableArray(siblingsStart > boundaryCount + 2 ? ['start-ellipsis'] : boundaryCount + 1 < count - boundaryCount ? [boundaryCount + 1] : []), _toConsumableArray(range(siblingsStart, siblingsEnd)), _toConsumableArray(siblingsEnd < count - boundaryCount - 1 ? ['end-ellipsis'] : count - boundaryCount > boundaryCount ? [count - boundaryCount] : []), _toConsumableArray(endPages), _toConsumableArray(hideNextButton ? [] : ['next']), _toConsumableArray(showLastButton ? ['last'] : []));
 
     // Map the button type to its page number
@@ -38540,7 +38599,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,
@@ -38707,7 +38766,7 @@
     });
   });
   var PaginationItem = /*#__PURE__*/React__namespace.forwardRef(function PaginationItem(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiPaginationItem'
     });
@@ -38743,7 +38802,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,
@@ -38872,7 +38931,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 = {
@@ -38910,7 +38969,7 @@
     return "Go to ".concat(type, " page");
   }
   var Pagination = /*#__PURE__*/React__namespace.forwardRef(function Pagination(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiPagination'
     });
@@ -38971,7 +39030,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),
@@ -39123,7 +39182,7 @@
   }), 'RadioButtonChecked');
 
   var RadioButtonIconRoot = styled$1('span', {
-    shouldForwardProp: rootShouldForwardProp
+    shouldForwardProp: rootShouldForwardProp$1
   })({
     position: 'relative',
     display: 'flex'
@@ -39213,7 +39272,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;
@@ -39224,7 +39283,7 @@
   };
   var RadioRoot = styled$1(SwitchBase$1, {
     shouldForwardProp: function shouldForwardProp(prop) {
-      return rootShouldForwardProp(prop) || prop === 'classes';
+      return rootShouldForwardProp$1(prop) || prop === 'classes';
     },
     name: 'MuiRadio',
     slot: 'Root',
@@ -39265,7 +39324,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$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiRadio'
     });
@@ -39286,7 +39345,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);
@@ -39405,15 +39464,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,
@@ -39453,7 +39529,8 @@
       value: contextValue,
       children: /*#__PURE__*/jsxRuntime_1(FormGroup$1, _extends({
         role: "radiogroup",
-        ref: handleRef
+        ref: handleRef,
+        className: clsx(classes.root, className)
       }, other, {
         children: children
       }))
@@ -39468,6 +39545,10 @@
      * The content of the component.
      */
     children: PropTypes.node,
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
     /**
      * The default value. Use when the component is not controlled.
      */
@@ -39746,7 +39827,7 @@
     return "".concat(value, " Star").concat(value !== 1 ? 's' : '');
   }
   var Rating = /*#__PURE__*/React__namespace.forwardRef(function Rating(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       name: 'MuiRating',
       props: inProps
     });
@@ -40187,7 +40268,7 @@
     }, colorSchemeStyles);
   });
   var ScopedCssBaseline = /*#__PURE__*/React__namespace.forwardRef(function ScopedCssBaseline(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiScopedCssBaseline'
     });
@@ -40901,7 +40982,7 @@
       return styles.root;
     },
     shouldForwardProp: function shouldForwardProp(prop) {
-      return rootShouldForwardProp(prop) && prop !== 'variant';
+      return rootShouldForwardProp$1(prop) && prop !== 'variant';
     },
     slot: 'Root'
   };
@@ -40909,7 +40990,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$5({
+    var props = useThemeProps$b({
       name: 'MuiSelect',
       props: inProps
     });
@@ -41232,7 +41313,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$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiSkeleton'
     });
@@ -41374,6 +41455,7 @@
     value: PropTypes.node
   } ;
 
+  var useThemeProps$1 = createUseThemeProps();
   function Identity(x) {
     return x;
   }
@@ -41385,44 +41467,16 @@
       return [styles.root, styles["color".concat(capitalize(ownerState.color))], ownerState.size !== 'medium' && styles["size".concat(capitalize(ownerState.size))], ownerState.marked && styles.marked, ownerState.orientation === 'vertical' && styles.vertical, ownerState.track === 'inverted' && styles.trackInverted, ownerState.track === false && styles.trackFalse];
     }
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    return _extends({
+    var _theme$vars;
+    var theme = _ref.theme;
+    return _defineProperty(_defineProperty(_defineProperty({
       borderRadius: 12,
       boxSizing: 'content-box',
       display: 'inline-block',
       position: 'relative',
       cursor: 'pointer',
       touchAction: 'none',
-      color: (theme.vars || theme).palette[ownerState.color].main,
-      WebkitTapHighlightColor: 'transparent'
-    }, ownerState.orientation === 'horizontal' && _extends({
-      height: 4,
-      width: '100%',
-      padding: '13px 0',
-      // The primary input mechanism of the device includes a pointing device of limited accuracy.
-      '@media (pointer: coarse)': {
-        // Reach 42px touch target, about ~8mm on screen.
-        padding: '20px 0'
-      }
-    }, ownerState.size === 'small' && {
-      height: 2
-    }, ownerState.marked && {
-      marginBottom: 20
-    }), ownerState.orientation === 'vertical' && _extends({
-      height: '100%',
-      width: 4,
-      padding: '0 13px',
-      // The primary input mechanism of the device includes a pointing device of limited accuracy.
-      '@media (pointer: coarse)': {
-        // Reach 42px touch target, about ~8mm on screen.
-        padding: '0 20px'
-      }
-    }, ownerState.size === 'small' && {
-      width: 2
-    }, ownerState.marked && {
-      marginRight: 44
-    }), _defineProperty(_defineProperty({
+      WebkitTapHighlightColor: 'transparent',
       '@media print': {
         colorAdjust: 'exact'
       }
@@ -41432,7 +41486,79 @@
       color: (theme.vars || theme).palette.grey[400]
     }), "&.".concat(sliderClasses$1.dragging), _defineProperty({}, "& .".concat(sliderClasses$1.thumb, ", & .").concat(sliderClasses$1.track), {
       transition: 'none'
-    })));
+    })), "variants", [].concat(_toConsumableArray(Object.keys(((_theme$vars = theme.vars) != null ? _theme$vars : theme).palette).filter(function (key) {
+      var _theme$vars2;
+      return ((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette[key].main;
+    }).map(function (color) {
+      return {
+        props: {
+          color: color
+        },
+        style: {
+          color: (theme.vars || theme).palette[color].main
+        }
+      };
+    })), [{
+      props: {
+        orientation: 'horizontal'
+      },
+      style: {
+        height: 4,
+        width: '100%',
+        padding: '13px 0',
+        // The primary input mechanism of the device includes a pointing device of limited accuracy.
+        '@media (pointer: coarse)': {
+          // Reach 42px touch target, about ~8mm on screen.
+          padding: '20px 0'
+        }
+      }
+    }, {
+      props: {
+        orientation: 'horizontal',
+        size: 'small'
+      },
+      style: {
+        height: 2
+      }
+    }, {
+      props: {
+        orientation: 'horizontal',
+        marked: true
+      },
+      style: {
+        marginBottom: 20
+      }
+    }, {
+      props: {
+        orientation: 'vertical'
+      },
+      style: {
+        height: '100%',
+        width: 4,
+        padding: '0 13px',
+        // The primary input mechanism of the device includes a pointing device of limited accuracy.
+        '@media (pointer: coarse)': {
+          // Reach 42px touch target, about ~8mm on screen.
+          padding: '0 20px'
+        }
+      }
+    }, {
+      props: {
+        orientation: 'vertical',
+        size: 'small'
+      },
+      style: {
+        width: 2
+      }
+    }, {
+      props: {
+        orientation: 'vertical',
+        marked: true
+      },
+      style: {
+        marginRight: 44
+      }
+    }]));
   });
   var SliderRail = styled$1('span', {
     name: 'MuiSlider',
@@ -41440,27 +41566,40 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.rail;
     }
-  })(function (_ref2) {
-    var ownerState = _ref2.ownerState;
-    return _extends({
-      display: 'block',
-      position: 'absolute',
-      borderRadius: 'inherit',
-      backgroundColor: 'currentColor',
-      opacity: 0.38
-    }, ownerState.orientation === 'horizontal' && {
-      width: '100%',
-      height: 'inherit',
-      top: '50%',
-      transform: 'translateY(-50%)'
-    }, ownerState.orientation === 'vertical' && {
-      height: '100%',
-      width: 'inherit',
-      left: '50%',
-      transform: 'translateX(-50%)'
-    }, ownerState.track === 'inverted' && {
-      opacity: 1
-    });
+  })({
+    display: 'block',
+    position: 'absolute',
+    borderRadius: 'inherit',
+    backgroundColor: 'currentColor',
+    opacity: 0.38,
+    variants: [{
+      props: {
+        orientation: 'horizontal'
+      },
+      style: {
+        width: '100%',
+        height: 'inherit',
+        top: '50%',
+        transform: 'translateY(-50%)'
+      }
+    }, {
+      props: {
+        orientation: 'vertical'
+      },
+      style: {
+        height: '100%',
+        width: 'inherit',
+        left: '50%',
+        transform: 'translateX(-50%)'
+      }
+    }, {
+      props: {
+        track: 'inverted'
+      },
+      style: {
+        opacity: 1
+      }
+    }]
   });
   var SliderTrack = styled$1('span', {
     name: 'MuiSlider',
@@ -41469,12 +41608,9 @@
       return styles.track;
     }
   })(function (_ref3) {
-    var theme = _ref3.theme,
-      ownerState = _ref3.ownerState;
-    var color =
-    // Same logic as the LinearProgress track color
-    theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.5);
-    return _extends({
+    var _theme$vars3;
+    var theme = _ref3.theme;
+    return {
       display: 'block',
       position: 'absolute',
       borderRadius: 'inherit',
@@ -41482,23 +41618,62 @@
       backgroundColor: 'currentColor',
       transition: theme.transitions.create(['left', 'width', 'bottom', 'height'], {
         duration: theme.transitions.duration.shortest
-      })
-    }, ownerState.size === 'small' && {
-      border: 'none'
-    }, ownerState.orientation === 'horizontal' && {
-      height: 'inherit',
-      top: '50%',
-      transform: 'translateY(-50%)'
-    }, ownerState.orientation === 'vertical' && {
-      width: 'inherit',
-      left: '50%',
-      transform: 'translateX(-50%)'
-    }, ownerState.track === false && {
-      display: 'none'
-    }, ownerState.track === 'inverted' && {
-      backgroundColor: theme.vars ? theme.vars.palette.Slider["".concat(ownerState.color, "Track")] : color,
-      borderColor: theme.vars ? theme.vars.palette.Slider["".concat(ownerState.color, "Track")] : color
-    });
+      }),
+      variants: [{
+        props: {
+          size: 'small'
+        },
+        style: {
+          border: 'none'
+        }
+      }, {
+        props: {
+          orientation: 'horizontal'
+        },
+        style: {
+          height: 'inherit',
+          top: '50%',
+          transform: 'translateY(-50%)'
+        }
+      }, {
+        props: {
+          orientation: 'vertical'
+        },
+        style: {
+          width: 'inherit',
+          left: '50%',
+          transform: 'translateX(-50%)'
+        }
+      }, {
+        props: {
+          track: false
+        },
+        style: {
+          display: 'none'
+        }
+      }].concat(_toConsumableArray(Object.keys(((_theme$vars3 = theme.vars) != null ? _theme$vars3 : theme).palette).filter(function (key) {
+        var _theme$vars4;
+        return ((_theme$vars4 = theme.vars) != null ? _theme$vars4 : theme).palette[key].main;
+      }).map(function (color) {
+        return {
+          props: {
+            color: color,
+            track: 'inverted'
+          },
+          style: _extends({}, theme.vars ? {
+            backgroundColor: theme.vars.palette.Slider["".concat(color, "Track")],
+            borderColor: theme.vars.palette.Slider["".concat(color, "Track")]
+          } : _extends({
+            backgroundColor: lighten(theme.palette[color].main, 0.62),
+            borderColor: lighten(theme.palette[color].main, 0.62)
+          }, theme.applyStyles('dark', {
+            backgroundColor: darken(theme.palette[color].main, 0.5)
+          }), theme.applyStyles('dark', {
+            borderColor: darken(theme.palette[color].main, 0.5)
+          })))
+        };
+      })))
+    };
   });
   var SliderThumb = styled$1('span', {
     name: 'MuiSlider',
@@ -41508,9 +41683,9 @@
       return [styles.thumb, styles["thumbColor".concat(capitalize(ownerState.color))], ownerState.size !== 'medium' && styles["thumbSize".concat(capitalize(ownerState.size))]];
     }
   })(function (_ref4) {
-    var theme = _ref4.theme,
-      ownerState = _ref4.ownerState;
-    return _extends({
+    var _theme$vars5;
+    var theme = _ref4.theme;
+    return _defineProperty(_defineProperty({
       position: 'absolute',
       width: 20,
       height: 20,
@@ -41523,27 +41698,15 @@
       justifyContent: 'center',
       transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
         duration: theme.transitions.duration.shortest
-      })
-    }, ownerState.size === 'small' && {
-      width: 12,
-      height: 12
-    }, ownerState.orientation === 'horizontal' && {
-      top: '50%',
-      transform: 'translate(-50%, -50%)'
-    }, ownerState.orientation === 'vertical' && {
-      left: '50%',
-      transform: 'translate(-50%, 50%)'
-    }, _defineProperty(_defineProperty(_defineProperty({
-      '&::before': _extends({
+      }),
+      '&::before': {
         position: 'absolute',
         content: '""',
         borderRadius: 'inherit',
         width: '100%',
         height: '100%',
         boxShadow: (theme.vars || theme).shadows[2]
-      }, ownerState.size === 'small' && {
-        boxShadow: 'none'
-      }),
+      },
       '&::after': {
         position: 'absolute',
         content: '""',
@@ -41555,18 +41718,60 @@
         left: '50%',
         transform: 'translate(-50%, -50%)'
       }
-    }, "&:hover, &.".concat(sliderClasses$1.focusVisible), {
-      boxShadow: "0px 0px 0px 8px ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.16)") : alpha(theme.palette[ownerState.color].main, 0.16)),
-      '@media (hover: none)': {
-        boxShadow: 'none'
-      }
-    }), "&.".concat(sliderClasses$1.active), {
-      boxShadow: "0px 0px 0px 14px ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.16)") : alpha(theme.palette[ownerState.color].main, 0.16))
-    }), "&.".concat(sliderClasses$1.disabled), {
+    }, "&.".concat(sliderClasses$1.disabled), {
       '&: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))
+        }))
+      };
+    })), [{
+      props: {
+        size: 'small'
+      },
+      style: {
+        width: 12,
+        height: 12,
+        '&::before': {
+          boxShadow: 'none'
+        }
+      }
+    }, {
+      props: {
+        orientation: 'horizontal'
+      },
+      style: {
+        top: '50%',
+        transform: 'translate(-50%, -50%)'
+      }
+    }, {
+      props: {
+        orientation: 'vertical'
+      },
+      style: {
+        left: '50%',
+        transform: 'translate(-50%, 50%)'
+      }
+    }]));
   });
   var SliderValueLabel = styled$1(SliderValueLabel$1, {
     name: 'MuiSlider',
@@ -41574,17 +41779,16 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.valueLabel;
     }
-  })(function (_ref5) {
-    var theme = _ref5.theme,
-      ownerState = _ref5.ownerState;
-    return _extends(_defineProperty(_defineProperty(_defineProperty({}, "&.".concat(sliderClasses$1.valueLabelOpen), {
-      transform: "".concat(ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)', " scale(1)")
-    }), "zIndex", 1), "whiteSpace", 'nowrap'), theme.typography.body2, {
+  })(function (_ref6) {
+    var theme = _ref6.theme;
+    return _extends({
+      zIndex: 1,
+      whiteSpace: 'nowrap'
+    }, theme.typography.body2, {
       fontWeight: 500,
       transition: theme.transitions.create(['transform'], {
         duration: theme.transitions.duration.shortest
       }),
-      transform: "".concat(ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)', " scale(0)"),
       position: 'absolute',
       backgroundColor: (theme.vars || theme).palette.grey[600],
       borderRadius: 2,
@@ -41592,37 +41796,67 @@
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      padding: '0.25rem 0.75rem'
-    }, ownerState.orientation === 'horizontal' && {
-      top: '-10px',
-      transformOrigin: 'bottom center',
-      '&::before': {
-        position: 'absolute',
-        content: '""',
-        width: 8,
-        height: 8,
-        transform: 'translate(-50%, 50%) rotate(45deg)',
-        backgroundColor: 'inherit',
-        bottom: 0,
-        left: '50%'
-      }
-    }, ownerState.orientation === 'vertical' && {
-      right: ownerState.size === 'small' ? '20px' : '30px',
-      top: '50%',
-      transformOrigin: 'right center',
-      '&::before': {
-        position: 'absolute',
-        content: '""',
-        width: 8,
-        height: 8,
-        transform: 'translate(-50%, -50%) rotate(45deg)',
-        backgroundColor: 'inherit',
-        right: -8,
-        top: '50%'
-      }
-    }, ownerState.size === 'small' && {
-      fontSize: theme.typography.pxToRem(12),
-      padding: '0.25rem 0.5rem'
+      padding: '0.25rem 0.75rem',
+      variants: [{
+        props: {
+          orientation: 'horizontal'
+        },
+        style: _defineProperty({
+          transform: 'translateY(-100%) scale(0)',
+          top: '-10px',
+          transformOrigin: 'bottom center',
+          '&::before': {
+            position: 'absolute',
+            content: '""',
+            width: 8,
+            height: 8,
+            transform: 'translate(-50%, 50%) rotate(45deg)',
+            backgroundColor: 'inherit',
+            bottom: 0,
+            left: '50%'
+          }
+        }, "&.".concat(sliderClasses$1.valueLabelOpen), {
+          transform: 'translateY(-100%) scale(1)'
+        })
+      }, {
+        props: {
+          orientation: 'vertical'
+        },
+        style: _defineProperty({
+          transform: 'translateY(-50%) scale(0)',
+          right: '30px',
+          top: '50%',
+          transformOrigin: 'right center',
+          '&::before': {
+            position: 'absolute',
+            content: '""',
+            width: 8,
+            height: 8,
+            transform: 'translate(-50%, -50%) rotate(45deg)',
+            backgroundColor: 'inherit',
+            right: -8,
+            top: '50%'
+          }
+        }, "&.".concat(sliderClasses$1.valueLabelOpen), {
+          transform: 'translateY(-50%) scale(1)'
+        })
+      }, {
+        props: {
+          size: 'small'
+        },
+        style: {
+          fontSize: theme.typography.pxToRem(12),
+          padding: '0.25rem 0.5rem'
+        }
+      }, {
+        props: {
+          orientation: 'vertical',
+          size: 'small'
+        },
+        style: {
+          right: '20px'
+        }
+      }]
     });
   });
   var SliderMark = styled$1('span', {
@@ -41635,26 +41869,40 @@
       var markActive = props.markActive;
       return [styles.mark, markActive && styles.markActive];
     }
-  })(function (_ref6) {
-    var theme = _ref6.theme,
-      ownerState = _ref6.ownerState,
-      markActive = _ref6.markActive;
-    return _extends({
+  })(function (_ref7) {
+    var theme = _ref7.theme;
+    return {
       position: 'absolute',
       width: 2,
       height: 2,
       borderRadius: 1,
-      backgroundColor: 'currentColor'
-    }, ownerState.orientation === 'horizontal' && {
-      top: '50%',
-      transform: 'translate(-1px, -50%)'
-    }, ownerState.orientation === 'vertical' && {
-      left: '50%',
-      transform: 'translate(-50%, 1px)'
-    }, markActive && {
-      backgroundColor: (theme.vars || theme).palette.background.paper,
-      opacity: 0.8
-    });
+      backgroundColor: 'currentColor',
+      variants: [{
+        props: {
+          orientation: 'horizontal'
+        },
+        style: {
+          top: '50%',
+          transform: 'translate(-1px, -50%)'
+        }
+      }, {
+        props: {
+          orientation: 'vertical'
+        },
+        style: {
+          left: '50%',
+          transform: 'translate(-50%, 1px)'
+        }
+      }, {
+        props: {
+          markActive: true
+        },
+        style: {
+          backgroundColor: (theme.vars || theme).palette.background.paper,
+          opacity: 0.8
+        }
+      }]
+    };
   });
   var SliderMarkLabel = styled$1('span', {
     name: 'MuiSlider',
@@ -41665,28 +41913,42 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.markLabel;
     }
-  })(function (_ref7) {
-    var theme = _ref7.theme,
-      ownerState = _ref7.ownerState,
-      markLabelActive = _ref7.markLabelActive;
+  })(function (_ref8) {
+    var theme = _ref8.theme;
     return _extends({}, theme.typography.body2, {
       color: (theme.vars || theme).palette.text.secondary,
       position: 'absolute',
-      whiteSpace: 'nowrap'
-    }, ownerState.orientation === 'horizontal' && {
-      top: 30,
-      transform: 'translateX(-50%)',
-      '@media (pointer: coarse)': {
-        top: 40
-      }
-    }, ownerState.orientation === 'vertical' && {
-      left: 36,
-      transform: 'translateY(50%)',
-      '@media (pointer: coarse)': {
-        left: 44
-      }
-    }, markLabelActive && {
-      color: (theme.vars || theme).palette.text.primary
+      whiteSpace: 'nowrap',
+      variants: [{
+        props: {
+          orientation: 'horizontal'
+        },
+        style: {
+          top: 30,
+          transform: 'translateX(-50%)',
+          '@media (pointer: coarse)': {
+            top: 40
+          }
+        }
+      }, {
+        props: {
+          orientation: 'vertical'
+        },
+        style: {
+          left: 36,
+          transform: 'translateY(50%)',
+          '@media (pointer: coarse)': {
+            left: 44
+          }
+        }
+      }, {
+        props: {
+          markLabelActive: true
+        },
+        style: {
+          color: (theme.vars || theme).palette.text.primary
+        }
+      }]
     });
   });
   var useUtilityClasses$u = function useUtilityClasses(ownerState) {
@@ -41714,13 +41976,13 @@
     };
     return composeClasses(slots, getSliderUtilityClass, classes);
   };
-  var Forward = function Forward(_ref8) {
-    var children = _ref8.children;
+  var Forward = function Forward(_ref9) {
+    var children = _ref9.children;
     return children;
   };
   var Slider = /*#__PURE__*/React__namespace.forwardRef(function Slider(inputProps, ref) {
-    var _ref9, _slots$root, _ref10, _slots$rail, _ref11, _slots$track, _ref12, _slots$thumb, _ref13, _slots$valueLabel, _ref14, _slots$mark, _ref15, _slots$markLabel, _ref16, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
-    var props = useThemeProps$5({
+    var _ref10, _slots$root, _ref11, _slots$rail, _ref12, _slots$track, _ref13, _slots$thumb, _ref14, _slots$valueLabel, _ref15, _slots$mark, _ref16, _slots$markLabel, _ref17, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
+    var props = useThemeProps$1({
       props: inputProps,
       name: 'MuiSlider'
     });
@@ -41818,14 +42080,14 @@
     var classes = useUtilityClasses$u(ownerState);
 
     // support both `slots` and `components` for backward compatibility
-    var RootSlot = (_ref9 = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref9 : SliderRoot;
-    var RailSlot = (_ref10 = (_slots$rail = slots == null ? void 0 : slots.rail) != null ? _slots$rail : components.Rail) != null ? _ref10 : SliderRail;
-    var TrackSlot = (_ref11 = (_slots$track = slots == null ? void 0 : slots.track) != null ? _slots$track : components.Track) != null ? _ref11 : SliderTrack;
-    var ThumbSlot = (_ref12 = (_slots$thumb = slots == null ? void 0 : slots.thumb) != null ? _slots$thumb : components.Thumb) != null ? _ref12 : SliderThumb;
-    var ValueLabelSlot = (_ref13 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref13 : SliderValueLabel;
-    var MarkSlot = (_ref14 = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : components.Mark) != null ? _ref14 : SliderMark;
-    var MarkLabelSlot = (_ref15 = (_slots$markLabel = slots == null ? void 0 : slots.markLabel) != null ? _slots$markLabel : components.MarkLabel) != null ? _ref15 : SliderMarkLabel;
-    var InputSlot = (_ref16 = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input) != null ? _ref16 : 'input';
+    var RootSlot = (_ref10 = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref10 : SliderRoot;
+    var RailSlot = (_ref11 = (_slots$rail = slots == null ? void 0 : slots.rail) != null ? _slots$rail : components.Rail) != null ? _ref11 : SliderRail;
+    var TrackSlot = (_ref12 = (_slots$track = slots == null ? void 0 : slots.track) != null ? _slots$track : components.Track) != null ? _ref12 : SliderTrack;
+    var ThumbSlot = (_ref13 = (_slots$thumb = slots == null ? void 0 : slots.thumb) != null ? _slots$thumb : components.Thumb) != null ? _ref13 : SliderThumb;
+    var ValueLabelSlot = (_ref14 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref14 : SliderValueLabel;
+    var MarkSlot = (_ref15 = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : components.Mark) != null ? _ref15 : SliderMark;
+    var MarkLabelSlot = (_ref16 = (_slots$markLabel = slots == null ? void 0 : slots.markLabel) != null ? _slots$markLabel : components.MarkLabel) != null ? _ref16 : SliderMarkLabel;
+    var InputSlot = (_ref17 = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input) != null ? _ref17 : 'input';
     var rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
     var railSlotProps = (_slotProps$rail = slotProps == null ? void 0 : slotProps.rail) != null ? _slotProps$rail : componentsProps.rail;
     var trackSlotProps = (_slotProps$track = slotProps == null ? void 0 : slotProps.track) != null ? _slotProps$track : componentsProps.track;
@@ -42297,7 +42559,7 @@
     marginRight: -8
   });
   var SnackbarContent = /*#__PURE__*/React__namespace.forwardRef(function SnackbarContent(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiSnackbarContent'
     });
@@ -42419,7 +42681,7 @@
     })));
   });
   var Snackbar = /*#__PURE__*/React__namespace.forwardRef(function Snackbar(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiSnackbar'
     });
@@ -42954,7 +43216,7 @@
     });
   });
   var SpeedDial = /*#__PURE__*/React__namespace.forwardRef(function SpeedDial(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiSpeedDial'
     });
@@ -43516,7 +43778,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$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTooltip'
     });
@@ -44189,7 +44451,7 @@
     });
   });
   var SpeedDialAction = /*#__PURE__*/React__namespace.forwardRef(function SpeedDialAction(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiSpeedDialAction'
     });
@@ -44383,7 +44645,7 @@
     }));
   });
   var SpeedDialIcon = /*#__PURE__*/React__namespace.forwardRef(function SpeedDialIcon(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiSpeedDialIcon'
     });
@@ -44514,7 +44776,7 @@
     });
   });
   var Step = /*#__PURE__*/React__namespace.forwardRef(function Step(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiStep'
     });
@@ -44705,7 +44967,7 @@
     };
   });
   var StepIcon = /*#__PURE__*/React__namespace.forwardRef(function StepIcon(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiStepIcon'
     });
@@ -44904,7 +45166,7 @@
   });
   var StepLabel = /*#__PURE__*/React__namespace.forwardRef(function StepLabel(inProps, ref) {
     var _slotProps$label;
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiStepLabel'
     });
@@ -45068,7 +45330,7 @@
     }));
   });
   var StepButton = /*#__PURE__*/React__namespace.forwardRef(function StepButton(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiStepButton'
     });
@@ -45202,7 +45464,7 @@
     });
   });
   var StepConnector = /*#__PURE__*/React__namespace.forwardRef(function StepConnector(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiStepConnector'
     });
@@ -45299,7 +45561,7 @@
     }
   })({});
   var StepContent = /*#__PURE__*/React__namespace.forwardRef(function StepContent(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiStepContent'
     });
@@ -45431,7 +45693,7 @@
   });
   var defaultConnector = /*#__PURE__*/jsxRuntime_1(StepConnector$1, {});
   var Stepper = /*#__PURE__*/React__namespace.forwardRef(function Stepper(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiStepper'
     });
@@ -45541,7 +45803,7 @@
   var Stepper$1 = Stepper;
 
   var SwipeAreaRoot = styled$1('div', {
-    shouldForwardProp: rootShouldForwardProp
+    shouldForwardProp: rootShouldForwardProp$1
   })(function (_ref) {
     var theme = _ref.theme,
       ownerState = _ref.ownerState;
@@ -45697,7 +45959,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$6({
+    var props = useThemeProps$c({
       name: 'MuiSwipeableDrawer',
       props: inProps
     });
@@ -46613,7 +46875,7 @@
     });
   });
   var Tab = /*#__PURE__*/React__namespace.forwardRef(function Tab(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTab'
     });
@@ -46817,7 +47079,7 @@
   });
   var defaultComponent$4 = 'table';
   var Table = /*#__PURE__*/React__namespace.forwardRef(function Table(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTable'
     });
@@ -46938,7 +47200,7 @@
   };
   var defaultComponent$3 = 'tbody';
   var TableBody = /*#__PURE__*/React__namespace.forwardRef(function TableBody(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTableBody'
     });
@@ -47073,7 +47335,7 @@
    * or otherwise a `<td>` element.
    */
   var TableCell = /*#__PURE__*/React__namespace.forwardRef(function TableCell(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTableCell'
     });
@@ -47212,7 +47474,7 @@
     overflowX: 'auto'
   });
   var TableContainer = /*#__PURE__*/React__namespace.forwardRef(function TableContainer(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTableContainer'
     });
@@ -47287,7 +47549,7 @@
   };
   var defaultComponent$2 = 'tfoot';
   var TableFooter = /*#__PURE__*/React__namespace.forwardRef(function TableFooter(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTableFooter'
     });
@@ -47366,7 +47628,7 @@
   };
   var defaultComponent$1 = 'thead';
   var TableHead = /*#__PURE__*/React__namespace.forwardRef(function TableHead(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTableHead'
     });
@@ -47462,7 +47724,7 @@
     return ownerState.variant === 'regular' && theme.mixins.toolbar;
   });
   var Toolbar = /*#__PURE__*/React__namespace.forwardRef(function Toolbar(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiToolbar'
     });
@@ -47836,7 +48098,7 @@
    */
   var TablePagination = /*#__PURE__*/React__namespace.forwardRef(function TablePagination(inProps, ref) {
     var _slotProps$select;
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTablePagination'
     });
@@ -48192,7 +48454,7 @@
    * based on the material table element parent (head, body, etc).
    */
   var TableRow = /*#__PURE__*/React__namespace.forwardRef(function TableRow(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTableRow'
     });
@@ -48340,7 +48602,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$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTableSortLabel'
     });
@@ -48551,7 +48813,7 @@
   });
   var TabScrollButton = /*#__PURE__*/React__namespace.forwardRef(function TabScrollButton(inProps, ref) {
     var _slots$StartScrollBut, _slots$EndScrollButto;
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTabScrollButton'
     });
@@ -48828,7 +49090,7 @@
   var defaultIndicatorStyle = {};
   var warnedOnceTabPresent = false;
   var Tabs = /*#__PURE__*/React__namespace.forwardRef(function Tabs(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTabs'
     });
@@ -49539,7 +49801,7 @@
    * - using the underlying components directly as shown in the demos
    */
   var TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTextField'
     });
@@ -49955,7 +50217,7 @@
     var resolvedProps = resolveProps(_extends({}, contextProps, {
       selected: isValueSelected(inProps.value, contextValue)
     }), inProps);
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: resolvedProps,
       name: 'MuiToggleButton'
     });
@@ -50159,7 +50421,7 @@
     }));
   });
   var ToggleButtonGroup = /*#__PURE__*/React__namespace.forwardRef(function ToggleButtonGroup(inProps, ref) {
-    var props = useThemeProps$5({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiToggleButtonGroup'
     });
@@ -50678,6 +50940,7 @@
   exports.getPaginationUtilityClass = getPaginationUtilityClass;
   exports.getPaperUtilityClass = getPaperUtilityClass;
   exports.getPopoverUtilityClass = getPopoverUtilityClass;
+  exports.getRadioGroupUtilityClass = getRadioGroupUtilityClass;
   exports.getRadioUtilityClass = getRadioUtilityClass;
   exports.getRatingUtilityClass = getRatingUtilityClass;
   exports.getScopedCssBaselineUtilityClass = getScopedCssBaselineUtilityClass;
@@ -50760,6 +51023,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;
@@ -50828,7 +51092,7 @@
   exports.useStepContext = useStepContext;
   exports.useStepperContext = useStepperContext;
   exports.useTheme = useTheme;
-  exports.useThemeProps = useThemeProps$5;
+  exports.useThemeProps = useThemeProps$b;
   exports.withStyles = withStyles;
   exports.withTheme = withTheme;