@mui/material 5.15.12 → 5.15.14

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.12
+ * @mui/material v5.15.14
  *
  * @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$5(_ref) {
+  function useThemeProps$c(_ref) {
     var props = _ref.props,
       name = _ref.name,
       defaultTheme = _ref.defaultTheme,
@@ -8381,7 +8381,7 @@
     border: 0,
     clip: 'rect(0 0 0 0)',
     height: '1px',
-    margin: -1,
+    margin: '-1px',
     overflow: 'hidden',
     padding: 0,
     position: 'absolute',
@@ -8539,6 +8539,23 @@
     ThemeProvider$2.propTypes = exactProp(ThemeProvider$2.propTypes) ;
   }
 
+  var RtlContext = /*#__PURE__*/React__namespace.createContext();
+  function RtlProvider(_ref) {
+    var value = _ref.value,
+      props = _objectWithoutProperties(_ref, ["value"]);
+    return /*#__PURE__*/jsxRuntime_1(RtlContext.Provider, _extends({
+      value: value != null ? value : true
+    }, props));
+  }
+  RtlProvider.propTypes = {
+    children: PropTypes.node,
+    value: PropTypes.bool
+  } ;
+  var useRtl = function useRtl() {
+    var value = React__namespace.useContext(RtlContext);
+    return value != null ? value : false;
+  };
+
   var EMPTY_THEME = {};
   function useThemeScoping(themeId, upperTheme, localTheme) {
     var isPrivate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
@@ -8580,11 +8597,15 @@
     }
     var engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
     var privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
+    var rtlValue = engineTheme.direction === 'rtl';
     return /*#__PURE__*/jsxRuntime_1(ThemeProvider$2, {
       theme: privateTheme,
       children: /*#__PURE__*/jsxRuntime_1(ThemeContext$2.Provider, {
         value: engineTheme,
-        children: children
+        children: /*#__PURE__*/jsxRuntime_1(RtlProvider, {
+          value: rtlValue,
+          children: children
+        })
       })
     });
   }
@@ -8717,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) {
@@ -8798,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
           });
         });
       }
@@ -8823,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;
@@ -8896,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;
@@ -9011,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;
@@ -9096,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;
@@ -9455,7 +9482,7 @@
     }
   });
   var useThemePropsDefault$2 = function useThemePropsDefault(inProps) {
-    return useThemeProps$5({
+    return useThemeProps$c({
       props: inProps,
       name: 'MuiContainer',
       defaultTheme: defaultTheme$6
@@ -9843,7 +9870,7 @@
     }
   });
   function useThemePropsDefault$1(props) {
-    return useThemeProps$5({
+    return useThemeProps$c({
       props: props,
       name: 'MuiGrid',
       defaultTheme: defaultTheme$5
@@ -10010,7 +10037,7 @@
     }
   });
   function useThemePropsDefault(props) {
-    return useThemeProps$5({
+    return useThemeProps$c({
       props: props,
       name: 'MuiStack',
       defaultTheme: defaultTheme$4
@@ -11052,10 +11079,10 @@
     return theme[THEME_ID] || theme;
   }
 
-  function useThemeProps$4(_ref) {
+  function useThemeProps$b(_ref) {
     var props = _ref.props,
       name = _ref.name;
-    return useThemeProps$5({
+    return useThemeProps$c({
       props: props,
       name: name,
       defaultTheme: defaultTheme$3,
@@ -11063,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;
 
@@ -11154,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) {
@@ -11383,6 +11416,9 @@
 
       // MUI X - DataGrid needs this token.
       setColorChannel(palette.background, 'default');
+
+      // added for consistency with the `background.default` token
+      setColorChannel(palette.background, 'paper');
       setColorChannel(palette.common, 'background');
       setColorChannel(palette.common, 'onBackground');
       setColorChannel(palette, 'divider');
@@ -11525,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', {
@@ -11546,7 +11582,7 @@
     };
   });
   var SvgIcon = /*#__PURE__*/React__namespace.forwardRef(function SvgIcon(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiSvgIcon'
     });
@@ -11703,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;
@@ -12790,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$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiCollapse'
     });
@@ -13120,7 +13161,7 @@
     }));
   });
   var Paper = /*#__PURE__*/React__namespace.forwardRef(function Paper(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiPaper'
     });
@@ -13497,6 +13538,7 @@
   var accordionClasses = generateUtilityClasses$1('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
   var accordionClasses$1 = accordionClasses;
 
+  var useThemeProps$a = createUseThemeProps();
   var useUtilityClasses$1L = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       square = ownerState.square,
@@ -13561,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$4({
+    var props = useThemeProps$a({
       props: inProps,
       name: 'MuiAccordion'
     });
@@ -13777,6 +13830,7 @@
   var accordionActionsClasses = generateUtilityClasses$1('MuiAccordionActions', ['root', 'spacing']);
   var accordionActionsClasses$1 = accordionActionsClasses;
 
+  var useThemeProps$9 = createUseThemeProps();
   var useUtilityClasses$1K = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disableSpacing = ownerState.disableSpacing;
@@ -13792,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$4({
+    var props = useThemeProps$9({
       props: inProps,
       name: 'MuiAccordionActions'
     });
@@ -13859,6 +13916,7 @@
   var accordionDetailsClasses = generateUtilityClasses$1('MuiAccordionDetails', ['root']);
   var accordionDetailsClasses$1 = accordionDetailsClasses;
 
+  var useThemeProps$8 = createUseThemeProps();
   var useUtilityClasses$1J = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -13879,7 +13937,7 @@
     };
   });
   var AccordionDetails = /*#__PURE__*/React__namespace.forwardRef(function AccordionDetails(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$8({
       props: inProps,
       name: 'MuiAccordionDetails'
     });
@@ -14059,7 +14117,7 @@
    * TODO v5: Make private
    */
   var TouchRipple = /*#__PURE__*/React__namespace.forwardRef(function TouchRipple(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTouchRipple'
     });
@@ -14335,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$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiButtonBase'
     });
@@ -14746,6 +14804,7 @@
   var accordionSummaryClasses = generateUtilityClasses$1('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
   var accordionSummaryClasses$1 = accordionSummaryClasses;
 
+  var useThemeProps$7 = createUseThemeProps();
   var useUtilityClasses$1H = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       expanded = ownerState.expanded,
@@ -14766,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),
@@ -14782,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',
@@ -14793,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',
@@ -14813,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,
@@ -14827,7 +14895,7 @@
     });
   });
   var AccordionSummary = /*#__PURE__*/React__namespace.forwardRef(function AccordionSummary(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$7({
       props: inProps,
       name: 'MuiAccordionSummary'
     });
@@ -14921,11 +14989,6 @@
   } ;
   var AccordionSummary$1 = AccordionSummary;
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  function createUseThemeProps(name) {
-    return useThemeProps$4;
-  }
-
   function getAlertUtilityClass(slot) {
     return generateUtilityClass$1('MuiAlert', slot);
   }
@@ -15019,7 +15082,7 @@
    * regarding the available icon options.
    */
   var IconButton = /*#__PURE__*/React__namespace.forwardRef(function IconButton(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiIconButton'
     });
@@ -15146,7 +15209,7 @@
     d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
   }), 'Close');
 
-  var useThemeProps$3 = createUseThemeProps();
+  var useThemeProps$6 = createUseThemeProps();
   var useUtilityClasses$1F = function useUtilityClasses(ownerState) {
     var variant = ownerState.variant,
       color = ownerState.color,
@@ -15294,7 +15357,7 @@
     })
   };
   var Alert = /*#__PURE__*/React__namespace.forwardRef(function Alert(inProps, ref) {
-    var props = useThemeProps$3({
+    var props = useThemeProps$6({
       props: inProps,
       name: 'MuiAlert'
     });
@@ -15579,7 +15642,7 @@
     return colorTransformations$1[color] || color;
   };
   var Typography = /*#__PURE__*/React__namespace.forwardRef(function Typography(inProps, ref) {
-    var themeProps = useThemeProps$4({
+    var themeProps = useThemeProps$b({
       props: inProps,
       name: 'MuiTypography'
     });
@@ -15705,7 +15768,7 @@
   var alertTitleClasses = generateUtilityClasses$1('MuiAlertTitle', ['root']);
   var alertTitleClasses$1 = alertTitleClasses;
 
-  var useThemeProps$2 = createUseThemeProps();
+  var useThemeProps$5 = createUseThemeProps();
   var useUtilityClasses$1D = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -15727,7 +15790,7 @@
     };
   });
   var AlertTitle = /*#__PURE__*/React__namespace.forwardRef(function AlertTitle(inProps, ref) {
-    var props = useThemeProps$2({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiAlertTitle'
     });
@@ -15865,7 +15928,7 @@
     }));
   });
   var AppBar = /*#__PURE__*/React__namespace.forwardRef(function AppBar(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiAppBar'
     });
@@ -16398,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:
@@ -20238,7 +20301,8 @@
         ref: handleRef
         // Apply the rows prop to get a "correct" first SSR paint
         ,
-        rows: minRows
+        rows: minRows,
+        style: style
       }, other)), /*#__PURE__*/jsxRuntime_1("textarea", {
         "aria-hidden": true,
         className: props.className,
@@ -20716,7 +20780,7 @@
         }
       }
     });
-    var checkHighlightedOptionExists = function checkHighlightedOptionExists() {
+    var getPreviousHighlightedOptionIndex = function getPreviousHighlightedOptionIndex() {
       var isSameValue = function isSameValue(value1, value2) {
         var label1 = value1 ? getOptionLabel(value1) : '';
         var label2 = value2 ? getOptionLabel(value2) : '';
@@ -20727,15 +20791,12 @@
       }) : isSameValue(previousProps.value, value))) {
         var previousHighlightedOption = previousProps.filteredOptions[highlightedIndexRef.current];
         if (previousHighlightedOption) {
-          var previousHighlightedOptionExists = filteredOptions.some(function (option) {
+          return findIndex(filteredOptions, function (option) {
             return getOptionLabel(option) === getOptionLabel(previousHighlightedOption);
           });
-          if (previousHighlightedOptionExists) {
-            return true;
-          }
         }
       }
-      return false;
+      return -1;
     };
     var syncHighlightedIndex = React__namespace.useCallback(function () {
       if (!popupOpen) {
@@ -20743,8 +20804,10 @@
       }
 
       // Check if the previously highlighted option still exists in the updated filtered options list and if the value and inputValue haven't changed
-      // If it exists and the value and the inputValue haven't changed, return, otherwise continue execution
-      if (checkHighlightedOptionExists()) {
+      // If it exists and the value and the inputValue haven't changed, just update its index, otherwise continue execution
+      var previousHighlightedOptionIndex = getPreviousHighlightedOptionIndex();
+      if (previousHighlightedOptionIndex !== -1) {
+        highlightedIndexRef.current = previousHighlightedOptionIndex;
         return;
       }
       var valueItem = multiple ? value[0] : value;
@@ -20817,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'));
           }
@@ -21382,7 +21445,7 @@
   var Popper = /*#__PURE__*/React__namespace.forwardRef(function Popper(inProps, ref) {
     var _slots$root;
     var theme = useTheme$3();
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiPopper'
     });
@@ -21607,7 +21670,7 @@
     });
   });
   var ListSubheader = /*#__PURE__*/React__namespace.forwardRef(function ListSubheader(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiListSubheader'
     });
@@ -21906,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$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiChip'
     });
@@ -22394,7 +22457,7 @@
    */
   var InputBase = /*#__PURE__*/React__namespace.forwardRef(function InputBase(inProps, ref) {
     var _slotProps$input;
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiInputBase'
     });
@@ -22933,7 +22996,8 @@
   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 _styled, _ClearIcon, _ArrowDropDownIcon;
+  var useThemeProps$4 = createUseThemeProps();
   var useUtilityClasses$1x = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       disablePortal = ownerState.disablePortal,
@@ -22976,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',
@@ -23086,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',
@@ -23106,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',
@@ -23121,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'
     });
@@ -23133,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'
@@ -23146,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'
@@ -23159,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,
@@ -23213,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
@@ -23361,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"]);
@@ -23457,6 +23540,67 @@
     var paperSlotProps = (_slotProps$paper = slotProps.paper) != null ? _slotProps$paper : componentsProps.paper;
     var popperSlotProps = (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper;
     var popupIndicatorSlotProps = (_slotProps$popupIndic = slotProps.popupIndicator) != null ? _slotProps$popupIndic : componentsProps.popupIndicator;
+    var renderAutocompletePopperChildren = function renderAutocompletePopperChildren(children) {
+      return /*#__PURE__*/jsxRuntime_1(AutocompletePopper, _extends({
+        as: PopperComponent,
+        disablePortal: disablePortal,
+        style: {
+          width: anchorEl ? anchorEl.clientWidth : null
+        },
+        ownerState: ownerState,
+        role: "presentation",
+        anchorEl: anchorEl,
+        open: popupOpen
+      }, popperSlotProps, {
+        className: clsx(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
+        children: /*#__PURE__*/jsxRuntime_1(AutocompletePaper, _extends({
+          ownerState: ownerState,
+          as: PaperComponent
+        }, paperSlotProps, {
+          className: clsx(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
+          children: children
+        }))
+      }));
+    };
+    var autocompletePopper = null;
+    if (!loading && groupedOptions.length > 0) {
+      autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/jsxRuntime_1(AutocompleteListbox, _extends({
+        as: ListboxComponent,
+        className: classes.listbox,
+        ownerState: ownerState
+      }, otherListboxProps, ListboxProps, {
+        ref: combinedListboxRef,
+        children: groupedOptions.map(function (option, index) {
+          if (groupBy) {
+            return renderGroup({
+              key: option.key,
+              group: option.group,
+              children: option.options.map(function (option2, index2) {
+                return renderListOption(option2, option.index + index2);
+              })
+            });
+          }
+          return renderListOption(option, index);
+        })
+      })));
+    } else if (loading && groupedOptions.length === 0) {
+      autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/jsxRuntime_1(AutocompleteLoading, {
+        className: classes.loading,
+        ownerState: ownerState,
+        children: loadingText
+      }));
+    } else if (groupedOptions.length === 0 && !freeSolo && !loading) {
+      autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/jsxRuntime_1(AutocompleteNoOptions, {
+        className: classes.noOptions,
+        ownerState: ownerState,
+        role: "presentation",
+        onMouseDown: function onMouseDown(event) {
+          // Prevent input blur when interacting with the "no options" content
+          event.preventDefault();
+        },
+        children: noOptionsText
+      }));
+    }
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
       children: [/*#__PURE__*/jsxRuntime_1(AutocompleteRoot, _extends({
         ref: ref,
@@ -23506,57 +23650,7 @@
             readOnly: readOnly
           }, getInputProps())
         })
-      })), anchorEl ? /*#__PURE__*/jsxRuntime_1(AutocompletePopper, _extends({
-        as: PopperComponent,
-        disablePortal: disablePortal,
-        style: {
-          width: anchorEl ? anchorEl.clientWidth : null
-        },
-        ownerState: ownerState,
-        role: "presentation",
-        anchorEl: anchorEl,
-        open: popupOpen
-      }, popperSlotProps, {
-        className: clsx(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
-        children: /*#__PURE__*/jsxRuntime_2(AutocompletePaper, _extends({
-          ownerState: ownerState,
-          as: PaperComponent
-        }, paperSlotProps, {
-          className: clsx(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
-          children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/jsxRuntime_1(AutocompleteLoading, {
-            className: classes.loading,
-            ownerState: ownerState,
-            children: loadingText
-          }) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/jsxRuntime_1(AutocompleteNoOptions, {
-            className: classes.noOptions,
-            ownerState: ownerState,
-            role: "presentation",
-            onMouseDown: function onMouseDown(event) {
-              // Prevent input blur when interacting with the "no options" content
-              event.preventDefault();
-            },
-            children: noOptionsText
-          }) : null, groupedOptions.length > 0 ? /*#__PURE__*/jsxRuntime_1(AutocompleteListbox, _extends({
-            as: ListboxComponent,
-            className: classes.listbox,
-            ownerState: ownerState
-          }, otherListboxProps, ListboxProps, {
-            ref: combinedListboxRef,
-            children: groupedOptions.map(function (option, index) {
-              if (groupBy) {
-                return renderGroup({
-                  key: option.key,
-                  group: option.group,
-                  children: option.options.map(function (option2, index2) {
-                    return renderListOption(option2, option.index + index2);
-                  })
-                });
-              }
-              return renderListOption(option, index);
-            })
-          })) : null]
-        }))
-      })) : null]
+      })), anchorEl ? autocompletePopper : null]
     });
   });
   Autocomplete.propTypes /* remove-proptypes */ = {
@@ -23808,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,
@@ -23998,7 +24092,7 @@
   var avatarClasses = generateUtilityClasses$1('MuiAvatar', ['root', 'colorDefault', 'circular', 'rounded', 'square', 'img', 'fallback']);
   var avatarClasses$1 = avatarClasses;
 
-  var useThemeProps$1 = createUseThemeProps();
+  var useThemeProps$3 = createUseThemeProps();
   var useUtilityClasses$1w = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       variant = ownerState.variant,
@@ -24130,7 +24224,7 @@
     return loaded;
   }
   var Avatar = /*#__PURE__*/React__namespace.forwardRef(function Avatar(inProps, ref) {
-    var props = useThemeProps$1({
+    var props = useThemeProps$3({
       props: inProps,
       name: 'MuiAvatar'
     });
@@ -24320,7 +24414,7 @@
   });
   var AvatarGroup = /*#__PURE__*/React__namespace.forwardRef(function AvatarGroup(inProps, ref) {
     var _slotProps$additional;
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiAvatarGroup'
     });
@@ -24702,7 +24796,7 @@
   });
   var Backdrop = /*#__PURE__*/React__namespace.forwardRef(function Backdrop(inProps, ref) {
     var _slotProps$root, _ref2, _slots$root;
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiBackdrop'
     });
@@ -24855,7 +24949,7 @@
 
   var RADIUS_STANDARD = 10;
   var RADIUS_DOT = 4;
-  var useThemeProps = createUseThemeProps();
+  var useThemeProps$2 = createUseThemeProps();
   var useUtilityClasses$1t = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       anchorOrigin = ownerState.anchorOrigin,
@@ -25058,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({
+    var props = useThemeProps$2({
       props: inProps,
       name: 'MuiBadge'
     });
@@ -25307,7 +25401,7 @@
     };
   });
   var BottomNavigation = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigation(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiBottomNavigation'
     });
@@ -25463,7 +25557,7 @@
     }));
   });
   var BottomNavigationAction = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigationAction(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiBottomNavigationAction'
     });
@@ -25730,7 +25824,7 @@
     }, []);
   }
   var Breadcrumbs = /*#__PURE__*/React__namespace.forwardRef(function Breadcrumbs(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiBreadcrumbs'
     });
@@ -25963,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',
@@ -26129,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$4({
+    var props = useThemeProps$b({
       props: resolvedProps,
       name: 'MuiButton'
     });
@@ -26390,7 +26484,7 @@
     })));
   });
   var ButtonGroup = /*#__PURE__*/React__namespace.forwardRef(function ButtonGroup(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiButtonGroup'
     });
@@ -26579,7 +26673,7 @@
     };
   });
   var Card = /*#__PURE__*/React__namespace.forwardRef(function Card(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiCard'
     });
@@ -26694,7 +26788,7 @@
     };
   });
   var CardActionArea = /*#__PURE__*/React__namespace.forwardRef(function CardActionArea(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiCardActionArea'
     });
@@ -26778,7 +26872,7 @@
     });
   });
   var CardActions = /*#__PURE__*/React__namespace.forwardRef(function CardActions(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiCardActions'
     });
@@ -26853,7 +26947,7 @@
     };
   });
   var CardContent = /*#__PURE__*/React__namespace.forwardRef(function CardContent(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiCardContent'
     });
@@ -26964,7 +27058,7 @@
     flex: '1 1 auto'
   });
   var CardHeader = /*#__PURE__*/React__namespace.forwardRef(function CardHeader(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiCardHeader'
     });
@@ -27133,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$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiCardMedia'
     });
@@ -27245,7 +27339,7 @@
     });
   });
   var SwitchBaseInput = styled$1('input', {
-    shouldForwardProp: rootShouldForwardProp
+    shouldForwardProp: rootShouldForwardProp$1
   })({
     cursor: 'inherit',
     position: 'absolute',
@@ -27512,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',
@@ -27544,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$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiCheckbox'
     });
@@ -27776,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$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiCircularProgress'
     });
@@ -27875,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]),
@@ -27917,7 +28011,7 @@
       }
     }),
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$4({
+      return useThemeProps$b({
         props: inProps,
         name: 'MuiContainer'
       });
@@ -28040,7 +28134,7 @@
     return defaultStyles;
   };
   function CssBaseline(inProps) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiCssBaseline'
     });
@@ -28169,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$4({
+    var props = useThemeProps$b({
       name: 'MuiModal',
       props: inProps
     });
@@ -28623,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$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiDialog'
     });
@@ -28907,7 +29001,7 @@
     });
   });
   var DialogActions = /*#__PURE__*/React__namespace.forwardRef(function DialogActions(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiDialogActions'
     });
@@ -28999,7 +29093,7 @@
     }));
   });
   var DialogContent = /*#__PURE__*/React__namespace.forwardRef(function DialogContent(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiDialogContent'
     });
@@ -29062,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',
@@ -29071,7 +29165,7 @@
     }
   })({});
   var DialogContentText = /*#__PURE__*/React__namespace.forwardRef(function DialogContentText(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiDialogContentText'
     });
@@ -29132,7 +29226,7 @@
     flex: '0 0 auto'
   });
   var DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function DialogTitle(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiDialogTitle'
     });
@@ -29312,7 +29406,7 @@
     });
   });
   var Divider = /*#__PURE__*/React__namespace.forwardRef(function Divider(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiDivider'
     });
@@ -29779,7 +29873,7 @@
     };
   });
   var DrawerDockedRoot = styled$1('div', {
-    shouldForwardProp: rootShouldForwardProp,
+    shouldForwardProp: rootShouldForwardProp$1,
     name: 'MuiDrawer',
     slot: 'Docked',
     skipVariantsResolver: false,
@@ -29849,8 +29943,9 @@
   function isHorizontal(anchor) {
     return ['left', 'right'].indexOf(anchor) !== -1;
   }
-  function getAnchor(theme, anchor) {
-    return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
+  function getAnchor(_ref3, anchor) {
+    var direction = _ref3.direction;
+    return direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
   }
 
   /**
@@ -29858,11 +29953,12 @@
    * when `variant="temporary"` is set.
    */
   var Drawer = /*#__PURE__*/React__namespace.forwardRef(function Drawer(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiDrawer'
     });
     var theme = useTheme();
+    var isRtl = useRtl();
     var defaultTransitionDuration = {
       enter: theme.transitions.duration.enteringScreen,
       exit: theme.transitions.duration.leavingScreen
@@ -29899,7 +29995,9 @@
     React__namespace.useEffect(function () {
       mounted.current = true;
     }, []);
-    var anchorInvariant = getAnchor(theme, anchorProp);
+    var anchorInvariant = getAnchor({
+      direction: isRtl ? 'rtl' : 'ltr'
+    }, anchorProp);
     var anchor = anchorProp;
     var ownerState = _extends({}, props, {
       anchor: anchor,
@@ -30067,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;
@@ -30155,7 +30253,7 @@
     });
   });
   var Fab = /*#__PURE__*/React__namespace.forwardRef(function Fab(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiFab'
     });
@@ -30279,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',
@@ -30426,7 +30524,7 @@
   });
   var FilledInput = /*#__PURE__*/React__namespace.forwardRef(function FilledInput(inProps, ref) {
     var _ref5, _slots$root, _ref6, _slots$input;
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiFilledInput'
     });
@@ -30746,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$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiFormControl'
     });
@@ -30977,7 +31075,7 @@
       }
     }),
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$4({
+      return useThemeProps$b({
         props: inProps,
         name: 'MuiStack'
       });
@@ -31106,7 +31204,7 @@
    */
   var FormControlLabel = /*#__PURE__*/React__namespace.forwardRef(function FormControlLabel(inProps, ref) {
     var _ref5, _slotProps$typography;
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiFormControlLabel'
     });
@@ -31299,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$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiFormGroup'
     });
@@ -31404,7 +31502,7 @@
     });
   });
   var FormHelperText = /*#__PURE__*/React__namespace.forwardRef(function FormHelperText(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiFormHelperText'
     });
@@ -31568,7 +31666,7 @@
     });
   });
   var FormLabel = /*#__PURE__*/React__namespace.forwardRef(function FormLabel(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiFormLabel'
     });
@@ -32024,7 +32122,7 @@
     return composeClasses(slots, getGridUtilityClass, classes);
   };
   var Grid = /*#__PURE__*/React__namespace.forwardRef(function Grid(inProps, ref) {
-    var themeProps = useThemeProps$4({
+    var themeProps = useThemeProps$b({
       props: inProps,
       name: 'MuiGrid'
     });
@@ -32242,7 +32340,7 @@
     }),
     componentName: 'MuiGrid2',
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$4({
+      return useThemeProps$b({
         props: inProps,
         name: 'MuiGrid2'
       });
@@ -33094,7 +33192,7 @@
     };
   });
   var Icon = /*#__PURE__*/React__namespace.forwardRef(function Icon(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiIcon'
     });
@@ -33133,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,
@@ -33219,7 +33317,7 @@
     });
   });
   var ImageList = /*#__PURE__*/React__namespace.forwardRef(function ImageList(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiImageList'
     });
@@ -33380,7 +33478,7 @@
     })));
   });
   var ImageListItem = /*#__PURE__*/React__namespace.forwardRef(function ImageListItem(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiImageListItem'
     });
@@ -33608,7 +33706,7 @@
     });
   });
   var ImageListItemBar = /*#__PURE__*/React__namespace.forwardRef(function ImageListItemBar(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiImageListItemBar'
     });
@@ -33707,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',
@@ -33782,7 +33880,7 @@
   })({});
   var Input = /*#__PURE__*/React__namespace.forwardRef(function Input(inProps, ref) {
     var _ref3, _slots$root, _ref4, _slots$input;
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiInput'
     });
@@ -34070,7 +34168,7 @@
     });
   });
   var InputAdornment = /*#__PURE__*/React__namespace.forwardRef(function InputAdornment(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiInputAdornment'
     });
@@ -34198,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',
@@ -34270,7 +34368,7 @@
     }));
   });
   var InputLabel = /*#__PURE__*/React__namespace.forwardRef(function InputLabel(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       name: 'MuiInputLabel',
       props: inProps
     });
@@ -34542,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$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiLinearProgress'
     });
@@ -34559,7 +34657,7 @@
       variant: variant
     });
     var classes = useUtilityClasses$S(ownerState);
-    var theme = useTheme();
+    var isRtl = useRtl();
     var rootProps = {};
     var inlineStyles = {
       bar1: {},
@@ -34571,7 +34669,7 @@
         rootProps['aria-valuemin'] = 0;
         rootProps['aria-valuemax'] = 100;
         var transform = value - 100;
-        if (theme.direction === 'rtl') {
+        if (isRtl) {
           transform = -transform;
         }
         inlineStyles.bar1.transform = "translateX(".concat(transform, "%)");
@@ -34582,7 +34680,7 @@
     if (variant === 'buffer') {
       if (valueBuffer !== undefined) {
         var _transform = (valueBuffer || 0) - 100;
-        if (theme.direction === 'rtl') {
+        if (isRtl) {
           _transform = -_transform;
         }
         inlineStyles.bar2.transform = "translateX(".concat(_transform, "%)");
@@ -34749,7 +34847,7 @@
     }));
   });
   var Link = /*#__PURE__*/React__namespace.forwardRef(function Link(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiLink'
     });
@@ -34920,7 +35018,7 @@
     });
   });
   var List = /*#__PURE__*/React__namespace.forwardRef(function List(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiList'
     });
@@ -35034,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',
@@ -35093,7 +35191,7 @@
     });
   });
   var ListItemButton = /*#__PURE__*/React__namespace.forwardRef(function ListItemButton(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiListItemButton'
     });
@@ -35276,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$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiListItemSecondaryAction'
     });
@@ -35421,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$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiListItem'
     });
@@ -35755,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$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiListItemAvatar'
     });
@@ -35834,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$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiListItemIcon'
     });
@@ -35917,7 +36015,7 @@
     });
   });
   var ListItemText = /*#__PURE__*/React__namespace.forwardRef(function ListItemText(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiListItemText'
     });
@@ -36125,13 +36223,14 @@
     }, [autoFocus]);
     React__namespace.useImperativeHandle(actions, function () {
       return {
-        adjustStyleForScrollbar: function adjustStyleForScrollbar(containerElement, theme) {
+        adjustStyleForScrollbar: function adjustStyleForScrollbar(containerElement, _ref) {
+          var direction = _ref.direction;
           // Let's ignore that piece of logic if users are already overriding the width
           // of the menu.
           var noExplicitWidth = !listRef.current.style.width;
           if (containerElement.clientHeight < listRef.current.clientHeight && noExplicitWidth) {
             var scrollbarSize = "".concat(getScrollbarSize(ownerDocument(containerElement)), "px");
-            listRef.current.style[theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = scrollbarSize;
+            listRef.current.style[direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = scrollbarSize;
             listRef.current.style.width = "calc(100% + ".concat(scrollbarSize, ")");
           }
           return listRef.current;
@@ -36372,7 +36471,7 @@
   });
   var Popover = /*#__PURE__*/React__namespace.forwardRef(function Popover(inProps, ref) {
     var _slotProps$paper, _slots$root, _slots$paper;
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiPopover'
     });
@@ -36855,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',
@@ -36889,7 +36988,7 @@
   });
   var Menu = /*#__PURE__*/React__namespace.forwardRef(function Menu(inProps, ref) {
     var _slots$paper, _slotProps$paper;
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiMenu'
     });
@@ -36919,8 +37018,7 @@
       _props$slotProps = props.slotProps,
       slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
       other = _objectWithoutProperties(props, ["autoFocus", "children", "className", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant", "slots", "slotProps"]);
-    var theme = useTheme();
-    var isRtl = theme.direction === 'rtl';
+    var isRtl = useRtl();
     var ownerState = _extends({}, props, {
       autoFocus: autoFocus,
       disableAutoFocusItem: disableAutoFocusItem,
@@ -36936,7 +37034,9 @@
     var menuListActionsRef = React__namespace.useRef(null);
     var handleEntering = function handleEntering(element, isAppearing) {
       if (menuListActionsRef.current) {
-        menuListActionsRef.current.adjustStyleForScrollbar(element, theme);
+        menuListActionsRef.current.adjustStyleForScrollbar(element, {
+          direction: isRtl ? 'rtl' : 'ltr'
+        });
       }
       if (onEntering) {
         onEntering(element, isAppearing);
@@ -37160,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',
@@ -37232,7 +37332,7 @@
     })));
   });
   var MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiMenuItem'
     });
@@ -37474,7 +37574,7 @@
     });
   });
   var MobileStepper = /*#__PURE__*/React__namespace.forwardRef(function MobileStepper(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiMobileStepper'
     });
@@ -37653,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)];
@@ -37791,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$4({
+    var props = useThemeProps$b({
       name: 'MuiNativeSelect',
       props: inProps
     });
@@ -37894,7 +37994,7 @@
 
   var _span$1;
   var NotchedOutlineRoot$1 = styled$1('fieldset', {
-    shouldForwardProp: rootShouldForwardProp
+    shouldForwardProp: rootShouldForwardProp$1
   })({
     textAlign: 'left',
     position: 'absolute',
@@ -37912,7 +38012,7 @@
     minWidth: '0%'
   });
   var NotchedOutlineLegend = styled$1('legend', {
-    shouldForwardProp: rootShouldForwardProp
+    shouldForwardProp: rootShouldForwardProp$1
   })(function (_ref) {
     var ownerState = _ref.ownerState,
       theme = _ref.theme;
@@ -38032,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',
@@ -38116,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$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiOutlinedInput'
     });
@@ -38428,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
@@ -38666,7 +38766,7 @@
     });
   });
   var PaginationItem = /*#__PURE__*/React__namespace.forwardRef(function PaginationItem(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiPaginationItem'
     });
@@ -38701,9 +38801,9 @@
       type: type,
       variant: variant
     });
-    var theme = useTheme();
+    var isRtl = useRtl();
     var classes = useUtilityClasses$C(ownerState);
-    var normalizedIcons = theme.direction === 'rtl' ? {
+    var normalizedIcons = isRtl ? {
       previous: slots.next || components.next || NavigateNextIcon,
       next: slots.previous || components.previous || NavigateBeforeIcon,
       last: slots.first || components.first || FirstPageIconDefault,
@@ -38869,7 +38969,7 @@
     return "Go to ".concat(type, " page");
   }
   var Pagination = /*#__PURE__*/React__namespace.forwardRef(function Pagination(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiPagination'
     });
@@ -39082,7 +39182,7 @@
   }), 'RadioButtonChecked');
 
   var RadioButtonIconRoot = styled$1('span', {
-    shouldForwardProp: rootShouldForwardProp
+    shouldForwardProp: rootShouldForwardProp$1
   })({
     position: 'relative',
     display: 'flex'
@@ -39183,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',
@@ -39224,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$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiRadio'
     });
@@ -39705,7 +39805,7 @@
     return "".concat(value, " Star").concat(value !== 1 ? 's' : '');
   }
   var Rating = /*#__PURE__*/React__namespace.forwardRef(function Rating(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       name: 'MuiRating',
       props: inProps
     });
@@ -39751,7 +39851,7 @@
       valueDerived = _useControlled2[0],
       setValueState = _useControlled2[1];
     var valueRounded = roundValueToPrecision(valueDerived, precision);
-    var theme = useTheme();
+    var isRtl = useRtl();
     var _React$useState = React__namespace.useState({
         hover: -1,
         focus: -1
@@ -39787,7 +39887,7 @@
         left = _rootNode$getBounding.left,
         containerWidth = _rootNode$getBounding.width;
       var percent;
-      if (theme.direction === 'rtl') {
+      if (isRtl) {
         percent = (right - event.clientX) / containerWidth;
       } else {
         percent = (event.clientX - left) / containerWidth;
@@ -40146,7 +40246,7 @@
     }, colorSchemeStyles);
   });
   var ScopedCssBaseline = /*#__PURE__*/React__namespace.forwardRef(function ScopedCssBaseline(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiScopedCssBaseline'
     });
@@ -40860,7 +40960,7 @@
       return styles.root;
     },
     shouldForwardProp: function shouldForwardProp(prop) {
-      return rootShouldForwardProp(prop) && prop !== 'variant';
+      return rootShouldForwardProp$1(prop) && prop !== 'variant';
     },
     slot: 'Root'
   };
@@ -40868,7 +40968,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$4({
+    var props = useThemeProps$b({
       name: 'MuiSelect',
       props: inProps
     });
@@ -41191,7 +41291,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$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiSkeleton'
     });
@@ -41333,6 +41433,7 @@
     value: PropTypes.node
   } ;
 
+  var useThemeProps$1 = createUseThemeProps();
   function Identity(x) {
     return x;
   }
@@ -41344,44 +41445,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'
       }
@@ -41391,7 +41464,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',
@@ -41399,27 +41544,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',
@@ -41428,12 +41586,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',
@@ -41441,23 +41596,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',
@@ -41467,9 +41661,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,
@@ -41482,27 +41676,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: '""',
@@ -41514,18 +41696,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',
@@ -41533,17 +41757,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,
@@ -41551,37 +41774,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', {
@@ -41594,26 +41847,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',
@@ -41624,28 +41891,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) {
@@ -41673,18 +41954,17 @@
     };
     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$4({
+    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'
     });
-    var theme = useTheme();
-    var isRtl = theme.direction === 'rtl';
+    var isRtl = useRtl();
     var ariaLabel = props['aria-label'],
       ariaValuetext = props['aria-valuetext'],
       ariaLabelledby = props['aria-labelledby'],
@@ -41778,14 +42058,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;
@@ -42257,7 +42537,7 @@
     marginRight: -8
   });
   var SnackbarContent = /*#__PURE__*/React__namespace.forwardRef(function SnackbarContent(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiSnackbarContent'
     });
@@ -42379,7 +42659,7 @@
     })));
   });
   var Snackbar = /*#__PURE__*/React__namespace.forwardRef(function Snackbar(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiSnackbar'
     });
@@ -42914,7 +43194,7 @@
     });
   });
   var SpeedDial = /*#__PURE__*/React__namespace.forwardRef(function SpeedDial(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiSpeedDial'
     });
@@ -43463,17 +43743,20 @@
   };
   function composeEventHandler(handler, eventHandler) {
     return function (event) {
+      for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        params[_key - 1] = arguments[_key];
+      }
       if (eventHandler) {
-        eventHandler(event);
+        eventHandler.apply(void 0, [event].concat(params));
       }
-      handler(event);
+      handler.apply(void 0, [event].concat(params));
     };
   }
 
   // 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$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTooltip'
     });
@@ -43529,7 +43812,7 @@
       children: childrenProp
     });
     var theme = useTheme();
-    var isRtl = theme.direction === 'rtl';
+    var isRtl = useRtl();
     var _React$useState = React__namespace.useState(),
       childNode = _React$useState[0],
       setChildNode = _React$useState[1];
@@ -44146,7 +44429,7 @@
     });
   });
   var SpeedDialAction = /*#__PURE__*/React__namespace.forwardRef(function SpeedDialAction(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiSpeedDialAction'
     });
@@ -44340,7 +44623,7 @@
     }));
   });
   var SpeedDialIcon = /*#__PURE__*/React__namespace.forwardRef(function SpeedDialIcon(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiSpeedDialIcon'
     });
@@ -44471,7 +44754,7 @@
     });
   });
   var Step = /*#__PURE__*/React__namespace.forwardRef(function Step(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiStep'
     });
@@ -44662,7 +44945,7 @@
     };
   });
   var StepIcon = /*#__PURE__*/React__namespace.forwardRef(function StepIcon(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiStepIcon'
     });
@@ -44861,7 +45144,7 @@
   });
   var StepLabel = /*#__PURE__*/React__namespace.forwardRef(function StepLabel(inProps, ref) {
     var _slotProps$label;
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiStepLabel'
     });
@@ -45025,7 +45308,7 @@
     }));
   });
   var StepButton = /*#__PURE__*/React__namespace.forwardRef(function StepButton(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiStepButton'
     });
@@ -45159,7 +45442,7 @@
     });
   });
   var StepConnector = /*#__PURE__*/React__namespace.forwardRef(function StepConnector(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiStepConnector'
     });
@@ -45256,7 +45539,7 @@
     }
   })({});
   var StepContent = /*#__PURE__*/React__namespace.forwardRef(function StepContent(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiStepContent'
     });
@@ -45388,7 +45671,7 @@
   });
   var defaultConnector = /*#__PURE__*/jsxRuntime_1(StepConnector$1, {});
   var Stepper = /*#__PURE__*/React__namespace.forwardRef(function Stepper(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiStepper'
     });
@@ -45498,7 +45781,7 @@
   var Stepper$1 = Stepper;
 
   var SwipeAreaRoot = styled$1('div', {
-    shouldForwardProp: rootShouldForwardProp
+    shouldForwardProp: rootShouldForwardProp$1
   })(function (_ref) {
     var theme = _ref.theme,
       ownerState = _ref.ownerState;
@@ -45654,7 +45937,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$5({
+    var props = useThemeProps$c({
       name: 'MuiSwipeableDrawer',
       props: inProps
     });
@@ -46165,6 +46448,7 @@
   var switchClasses = generateUtilityClasses$1('MuiSwitch', ['root', 'edgeStart', 'edgeEnd', 'switchBase', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium', 'checked', 'disabled', 'input', 'thumb', 'track']);
   var switchClasses$1 = switchClasses;
 
+  var useThemeProps = createUseThemeProps();
   var useUtilityClasses$g = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       edge = ownerState.edge,
@@ -46189,40 +46473,53 @@
       var ownerState = props.ownerState;
       return [styles.root, ownerState.edge && styles["edge".concat(capitalize(ownerState.edge))], styles["size".concat(capitalize(ownerState.size))]];
     }
-  })(function (_ref) {
-    var ownerState = _ref.ownerState;
-    return _extends({
-      display: 'inline-flex',
-      width: 34 + 12 * 2,
-      height: 14 + 12 * 2,
-      overflow: 'hidden',
-      padding: 12,
-      boxSizing: 'border-box',
-      position: 'relative',
-      flexShrink: 0,
-      zIndex: 0,
-      // Reset the stacking context.
-      verticalAlign: 'middle',
-      // For correct alignment with the text.
-      '@media print': {
-        colorAdjust: 'exact'
+  })({
+    display: 'inline-flex',
+    width: 34 + 12 * 2,
+    height: 14 + 12 * 2,
+    overflow: 'hidden',
+    padding: 12,
+    boxSizing: 'border-box',
+    position: 'relative',
+    flexShrink: 0,
+    zIndex: 0,
+    // Reset the stacking context.
+    verticalAlign: 'middle',
+    // For correct alignment with the text.
+    '@media print': {
+      colorAdjust: 'exact'
+    },
+    variants: [{
+      props: {
+        edge: 'start'
+      },
+      style: {
+        marginLeft: -8
       }
-    }, ownerState.edge === 'start' && {
-      marginLeft: -8
-    }, ownerState.edge === 'end' && {
-      marginRight: -8
-    }, ownerState.size === 'small' && _defineProperty(_defineProperty({
-      width: 40,
-      height: 24,
-      padding: 7
-    }, "& .".concat(switchClasses$1.thumb), {
-      width: 16,
-      height: 16
-    }), "& .".concat(switchClasses$1.switchBase), _defineProperty({
-      padding: 4
-    }, "&.".concat(switchClasses$1.checked), {
-      transform: 'translateX(16px)'
-    })));
+    }, {
+      props: {
+        edge: 'end'
+      },
+      style: {
+        marginRight: -8
+      }
+    }, {
+      props: {
+        size: 'small'
+      },
+      style: _defineProperty(_defineProperty({
+        width: 40,
+        height: 24,
+        padding: 7
+      }, "& .".concat(switchClasses$1.thumb), {
+        width: 16,
+        height: 16
+      }), "& .".concat(switchClasses$1.switchBase), _defineProperty({
+        padding: 4
+      }, "&.".concat(switchClasses$1.checked), {
+        transform: 'translateX(16px)'
+      }))
+    }]
   });
   var SwitchSwitchBase = styled$1(SwitchBase$1, {
     name: 'MuiSwitch',
@@ -46231,8 +46528,8 @@
       var ownerState = props.ownerState;
       return [styles.switchBase, _defineProperty({}, "& .".concat(switchClasses$1.input), styles.input), ownerState.color !== 'default' && styles["color".concat(capitalize(ownerState.color))]];
     }
-  })(function (_ref4) {
-    var theme = _ref4.theme;
+  })(function (_ref2) {
+    var theme = _ref2.theme;
     return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
       position: 'absolute',
       top: 0,
@@ -46255,30 +46552,44 @@
       left: '-100%',
       width: '300%'
     });
-  }, function (_ref6) {
-    var theme = _ref6.theme,
-      ownerState = _ref6.ownerState;
-    return _extends({
+  }, function (_ref4) {
+    var theme = _ref4.theme;
+    return {
       '&:hover': {
         backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.activeChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         }
-      }
-    }, ownerState.color !== 'default' && _defineProperty(_defineProperty({}, "&.".concat(switchClasses$1.checked), _defineProperty({
-      color: (theme.vars || theme).palette[ownerState.color].main,
-      '&:hover': {
-        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }
-    }, "&.".concat(switchClasses$1.disabled), {
-      color: theme.vars ? theme.vars.palette.Switch["".concat(ownerState.color, "DisabledColor")] : "".concat(theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.55))
-    })), "&.".concat(switchClasses$1.checked, " + .").concat(switchClasses$1.track), {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-    }));
+      },
+      variants: _toConsumableArray(Object.entries(theme.palette).filter(function (_ref5) {
+        var _ref6 = _slicedToArray(_ref5, 2),
+          value = _ref6[1];
+        return value.main && value.light;
+      }) // check all the used fields in the style below
+      .map(function (_ref7) {
+        var _ref8 = _slicedToArray(_ref7, 1),
+          color = _ref8[0];
+        return {
+          props: {
+            color: color
+          },
+          style: _defineProperty(_defineProperty({}, "&.".concat(switchClasses$1.checked), _defineProperty({
+            color: (theme.vars || theme).palette[color].main,
+            '&:hover': {
+              backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
+              '@media (hover: none)': {
+                backgroundColor: 'transparent'
+              }
+            }
+          }, "&.".concat(switchClasses$1.disabled), {
+            color: theme.vars ? theme.vars.palette.Switch["".concat(color, "DisabledColor")] : "".concat(theme.palette.mode === 'light' ? lighten(theme.palette[color].main, 0.62) : darken(theme.palette[color].main, 0.55))
+          })), "&.".concat(switchClasses$1.checked, " + .").concat(switchClasses$1.track), {
+            backgroundColor: (theme.vars || theme).palette[color].main
+          })
+        };
+      }))
+    };
   });
   var SwitchTrack = styled$1('span', {
     name: 'MuiSwitch',
@@ -46286,8 +46597,8 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.track;
     }
-  })(function (_ref8) {
-    var theme = _ref8.theme;
+  })(function (_ref9) {
+    var theme = _ref9.theme;
     return {
       height: '100%',
       width: '100%',
@@ -46306,8 +46617,8 @@
     overridesResolver: function overridesResolver(props, styles) {
       return styles.thumb;
     }
-  })(function (_ref9) {
-    var theme = _ref9.theme;
+  })(function (_ref10) {
+    var theme = _ref10.theme;
     return {
       boxShadow: (theme.vars || theme).shadows[1],
       backgroundColor: 'currentColor',
@@ -46317,7 +46628,7 @@
     };
   });
   var Switch = /*#__PURE__*/React__namespace.forwardRef(function Switch(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps({
       props: inProps,
       name: 'MuiSwitch'
     });
@@ -46542,7 +46853,7 @@
     });
   });
   var Tab = /*#__PURE__*/React__namespace.forwardRef(function Tab(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTab'
     });
@@ -46746,7 +47057,7 @@
   });
   var defaultComponent$4 = 'table';
   var Table = /*#__PURE__*/React__namespace.forwardRef(function Table(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTable'
     });
@@ -46867,7 +47178,7 @@
   };
   var defaultComponent$3 = 'tbody';
   var TableBody = /*#__PURE__*/React__namespace.forwardRef(function TableBody(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTableBody'
     });
@@ -47002,7 +47313,7 @@
    * or otherwise a `<td>` element.
    */
   var TableCell = /*#__PURE__*/React__namespace.forwardRef(function TableCell(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTableCell'
     });
@@ -47141,7 +47452,7 @@
     overflowX: 'auto'
   });
   var TableContainer = /*#__PURE__*/React__namespace.forwardRef(function TableContainer(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTableContainer'
     });
@@ -47216,7 +47527,7 @@
   };
   var defaultComponent$2 = 'tfoot';
   var TableFooter = /*#__PURE__*/React__namespace.forwardRef(function TableFooter(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTableFooter'
     });
@@ -47295,7 +47606,7 @@
   };
   var defaultComponent$1 = 'thead';
   var TableHead = /*#__PURE__*/React__namespace.forwardRef(function TableHead(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTableHead'
     });
@@ -47391,7 +47702,7 @@
     return ownerState.variant === 'regular' && theme.mixins.toolbar;
   });
   var Toolbar = /*#__PURE__*/React__namespace.forwardRef(function Toolbar(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiToolbar'
     });
@@ -47482,7 +47793,7 @@
       _props$slotProps = props.slotProps,
       slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
       other = _objectWithoutProperties(props, ["backIconButtonProps", "count", "disabled", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "slots", "slotProps"]);
-    var theme = useTheme();
+    var isRtl = useRtl();
     var handleFirstPageButtonClick = function handleFirstPageButtonClick(event) {
       onPageChange(event, 0);
     };
@@ -47503,14 +47814,14 @@
     var LastButtonIcon = (_slots$lastButtonIcon = slots.lastButtonIcon) != null ? _slots$lastButtonIcon : LastPageIconDefault;
     var NextButtonIcon = (_slots$nextButtonIcon = slots.nextButtonIcon) != null ? _slots$nextButtonIcon : KeyboardArrowRight;
     var PreviousButtonIcon = (_slots$previousButton2 = slots.previousButtonIcon) != null ? _slots$previousButton2 : KeyboardArrowLeft;
-    var FirstButtonSlot = theme.direction === 'rtl' ? LastButton : FirstButton;
-    var PreviousButtonSlot = theme.direction === 'rtl' ? NextButton : PreviousButton;
-    var NextButtonSlot = theme.direction === 'rtl' ? PreviousButton : NextButton;
-    var LastButtonSlot = theme.direction === 'rtl' ? FirstButton : LastButton;
-    var firstButtonSlotProps = theme.direction === 'rtl' ? slotProps.lastButton : slotProps.firstButton;
-    var previousButtonSlotProps = theme.direction === 'rtl' ? slotProps.nextButton : slotProps.previousButton;
-    var nextButtonSlotProps = theme.direction === 'rtl' ? slotProps.previousButton : slotProps.nextButton;
-    var lastButtonSlotProps = theme.direction === 'rtl' ? slotProps.firstButton : slotProps.lastButton;
+    var FirstButtonSlot = isRtl ? LastButton : FirstButton;
+    var PreviousButtonSlot = isRtl ? NextButton : PreviousButton;
+    var NextButtonSlot = isRtl ? PreviousButton : NextButton;
+    var LastButtonSlot = isRtl ? FirstButton : LastButton;
+    var firstButtonSlotProps = isRtl ? slotProps.lastButton : slotProps.firstButton;
+    var previousButtonSlotProps = isRtl ? slotProps.nextButton : slotProps.previousButton;
+    var nextButtonSlotProps = isRtl ? slotProps.previousButton : slotProps.nextButton;
+    var lastButtonSlotProps = isRtl ? slotProps.firstButton : slotProps.lastButton;
     return /*#__PURE__*/jsxRuntime_2("div", _extends({
       ref: ref
     }, other, {
@@ -47520,7 +47831,7 @@
         "aria-label": getItemAriaLabel('first', page),
         title: getItemAriaLabel('first', page)
       }, firstButtonSlotProps, {
-        children: theme.direction === 'rtl' ? /*#__PURE__*/jsxRuntime_1(LastButtonIcon, _extends({}, slotProps.lastButtonIcon)) : /*#__PURE__*/jsxRuntime_1(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon))
+        children: isRtl ? /*#__PURE__*/jsxRuntime_1(LastButtonIcon, _extends({}, slotProps.lastButtonIcon)) : /*#__PURE__*/jsxRuntime_1(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon))
       })), /*#__PURE__*/jsxRuntime_1(PreviousButtonSlot, _extends({
         onClick: handleBackButtonClick,
         disabled: disabled || page === 0,
@@ -47528,7 +47839,7 @@
         "aria-label": getItemAriaLabel('previous', page),
         title: getItemAriaLabel('previous', page)
       }, previousButtonSlotProps != null ? previousButtonSlotProps : backIconButtonProps, {
-        children: theme.direction === 'rtl' ? /*#__PURE__*/jsxRuntime_1(NextButtonIcon, _extends({}, slotProps.nextButtonIcon)) : /*#__PURE__*/jsxRuntime_1(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon))
+        children: isRtl ? /*#__PURE__*/jsxRuntime_1(NextButtonIcon, _extends({}, slotProps.nextButtonIcon)) : /*#__PURE__*/jsxRuntime_1(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon))
       })), /*#__PURE__*/jsxRuntime_1(NextButtonSlot, _extends({
         onClick: handleNextButtonClick,
         disabled: disabled || (count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false),
@@ -47536,14 +47847,14 @@
         "aria-label": getItemAriaLabel('next', page),
         title: getItemAriaLabel('next', page)
       }, nextButtonSlotProps != null ? nextButtonSlotProps : nextIconButtonProps, {
-        children: theme.direction === 'rtl' ? /*#__PURE__*/jsxRuntime_1(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon)) : /*#__PURE__*/jsxRuntime_1(NextButtonIcon, _extends({}, slotProps.nextButtonIcon))
+        children: isRtl ? /*#__PURE__*/jsxRuntime_1(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon)) : /*#__PURE__*/jsxRuntime_1(NextButtonIcon, _extends({}, slotProps.nextButtonIcon))
       })), showLastButton && /*#__PURE__*/jsxRuntime_1(LastButtonSlot, _extends({
         onClick: handleLastPageButtonClick,
         disabled: disabled || page >= Math.ceil(count / rowsPerPage) - 1,
         "aria-label": getItemAriaLabel('last', page),
         title: getItemAriaLabel('last', page)
       }, lastButtonSlotProps, {
-        children: theme.direction === 'rtl' ? /*#__PURE__*/jsxRuntime_1(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon)) : /*#__PURE__*/jsxRuntime_1(LastButtonIcon, _extends({}, slotProps.lastButtonIcon))
+        children: isRtl ? /*#__PURE__*/jsxRuntime_1(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon)) : /*#__PURE__*/jsxRuntime_1(LastButtonIcon, _extends({}, slotProps.lastButtonIcon))
       }))]
     }));
   });
@@ -47765,7 +48076,7 @@
    */
   var TablePagination = /*#__PURE__*/React__namespace.forwardRef(function TablePagination(inProps, ref) {
     var _slotProps$select;
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTablePagination'
     });
@@ -48121,7 +48432,7 @@
    * based on the material table element parent (head, body, etc).
    */
   var TableRow = /*#__PURE__*/React__namespace.forwardRef(function TableRow(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTableRow'
     });
@@ -48269,7 +48580,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$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTableSortLabel'
     });
@@ -48480,7 +48791,7 @@
   });
   var TabScrollButton = /*#__PURE__*/React__namespace.forwardRef(function TabScrollButton(inProps, ref) {
     var _slots$StartScrollBut, _slots$EndScrollButto;
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTabScrollButton'
     });
@@ -48493,8 +48804,7 @@
       props.orientation;
       props.disabled;
       var other = _objectWithoutProperties(props, ["className", "slots", "slotProps", "direction", "orientation", "disabled"]);
-    var theme = useTheme();
-    var isRtl = theme.direction === 'rtl';
+    var isRtl = useRtl();
     var ownerState = _extends({
       isRtl: isRtl
     }, props);
@@ -48758,12 +49068,12 @@
   var defaultIndicatorStyle = {};
   var warnedOnceTabPresent = false;
   var Tabs = /*#__PURE__*/React__namespace.forwardRef(function Tabs(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTabs'
     });
     var theme = useTheme();
-    var isRtl = theme.direction === 'rtl';
+    var isRtl = useRtl();
     var ariaLabel = props['aria-label'],
       ariaLabelledBy = props['aria-labelledby'],
       action = props.action,
@@ -48875,7 +49185,7 @@
           clientWidth: tabsNode.clientWidth,
           scrollLeft: tabsNode.scrollLeft,
           scrollTop: tabsNode.scrollTop,
-          scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, theme.direction),
+          scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, isRtl ? 'rtl' : 'ltr'),
           scrollWidth: tabsNode.scrollWidth,
           top: rect.top,
           bottom: rect.bottom,
@@ -49469,7 +49779,7 @@
    * - using the underlying components directly as shown in the demos
    */
   var TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiTextField'
     });
@@ -49885,7 +50195,7 @@
     var resolvedProps = resolveProps(_extends({}, contextProps, {
       selected: isValueSelected(inProps.value, contextValue)
     }), inProps);
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: resolvedProps,
       name: 'MuiToggleButton'
     });
@@ -50089,7 +50399,7 @@
     }));
   });
   var ToggleButtonGroup = /*#__PURE__*/React__namespace.forwardRef(function ToggleButtonGroup(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$b({
       props: inProps,
       name: 'MuiToggleButtonGroup'
     });
@@ -50758,7 +51068,7 @@
   exports.useStepContext = useStepContext;
   exports.useStepperContext = useStepperContext;
   exports.useTheme = useTheme;
-  exports.useThemeProps = useThemeProps$4;
+  exports.useThemeProps = useThemeProps$b;
   exports.withStyles = withStyles;
   exports.withTheme = withTheme;