@mui/material 5.15.12 → 5.15.13

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.12
+ * @mui/material v5.15.13
  *
  * @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$6(_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
+        })
       })
     });
   }
@@ -9455,7 +9476,7 @@
     }
   });
   var useThemePropsDefault$2 = function useThemePropsDefault(inProps) {
-    return useThemeProps$5({
+    return useThemeProps$6({
       props: inProps,
       name: 'MuiContainer',
       defaultTheme: defaultTheme$6
@@ -9843,7 +9864,7 @@
     }
   });
   function useThemePropsDefault$1(props) {
-    return useThemeProps$5({
+    return useThemeProps$6({
       props: props,
       name: 'MuiGrid',
       defaultTheme: defaultTheme$5
@@ -10010,7 +10031,7 @@
     }
   });
   function useThemePropsDefault(props) {
-    return useThemeProps$5({
+    return useThemeProps$6({
       props: props,
       name: 'MuiStack',
       defaultTheme: defaultTheme$4
@@ -11052,10 +11073,10 @@
     return theme[THEME_ID] || theme;
   }
 
-  function useThemeProps$4(_ref) {
+  function useThemeProps$5(_ref) {
     var props = _ref.props,
       name = _ref.name;
-    return useThemeProps$5({
+    return useThemeProps$6({
       props: props,
       name: name,
       defaultTheme: defaultTheme$3,
@@ -11383,6 +11404,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');
@@ -11546,7 +11570,7 @@
     };
   });
   var SvgIcon = /*#__PURE__*/React__namespace.forwardRef(function SvgIcon(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiSvgIcon'
     });
@@ -12790,7 +12814,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$5({
       props: inProps,
       name: 'MuiCollapse'
     });
@@ -13120,7 +13144,7 @@
     }));
   });
   var Paper = /*#__PURE__*/React__namespace.forwardRef(function Paper(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiPaper'
     });
@@ -13583,7 +13607,7 @@
     }));
   });
   var Accordion = /*#__PURE__*/React__namespace.forwardRef(function Accordion(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiAccordion'
     });
@@ -13806,7 +13830,7 @@
     });
   });
   var AccordionActions = /*#__PURE__*/React__namespace.forwardRef(function AccordionActions(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiAccordionActions'
     });
@@ -13879,7 +13903,7 @@
     };
   });
   var AccordionDetails = /*#__PURE__*/React__namespace.forwardRef(function AccordionDetails(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiAccordionDetails'
     });
@@ -14059,7 +14083,7 @@
    * TODO v5: Make private
    */
   var TouchRipple = /*#__PURE__*/React__namespace.forwardRef(function TouchRipple(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiTouchRipple'
     });
@@ -14335,7 +14359,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$5({
       props: inProps,
       name: 'MuiButtonBase'
     });
@@ -14827,7 +14851,7 @@
     });
   });
   var AccordionSummary = /*#__PURE__*/React__namespace.forwardRef(function AccordionSummary(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiAccordionSummary'
     });
@@ -14923,7 +14947,7 @@
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   function createUseThemeProps(name) {
-    return useThemeProps$4;
+    return useThemeProps$5;
   }
 
   function getAlertUtilityClass(slot) {
@@ -15019,7 +15043,7 @@
    * regarding the available icon options.
    */
   var IconButton = /*#__PURE__*/React__namespace.forwardRef(function IconButton(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiIconButton'
     });
@@ -15146,7 +15170,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$4 = createUseThemeProps();
   var useUtilityClasses$1F = function useUtilityClasses(ownerState) {
     var variant = ownerState.variant,
       color = ownerState.color,
@@ -15294,7 +15318,7 @@
     })
   };
   var Alert = /*#__PURE__*/React__namespace.forwardRef(function Alert(inProps, ref) {
-    var props = useThemeProps$3({
+    var props = useThemeProps$4({
       props: inProps,
       name: 'MuiAlert'
     });
@@ -15579,7 +15603,7 @@
     return colorTransformations$1[color] || color;
   };
   var Typography = /*#__PURE__*/React__namespace.forwardRef(function Typography(inProps, ref) {
-    var themeProps = useThemeProps$4({
+    var themeProps = useThemeProps$5({
       props: inProps,
       name: 'MuiTypography'
     });
@@ -15705,7 +15729,7 @@
   var alertTitleClasses = generateUtilityClasses$1('MuiAlertTitle', ['root']);
   var alertTitleClasses$1 = alertTitleClasses;
 
-  var useThemeProps$2 = createUseThemeProps();
+  var useThemeProps$3 = createUseThemeProps();
   var useUtilityClasses$1D = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes;
     var slots = {
@@ -15727,7 +15751,7 @@
     };
   });
   var AlertTitle = /*#__PURE__*/React__namespace.forwardRef(function AlertTitle(inProps, ref) {
-    var props = useThemeProps$2({
+    var props = useThemeProps$3({
       props: inProps,
       name: 'MuiAlertTitle'
     });
@@ -15865,7 +15889,7 @@
     }));
   });
   var AppBar = /*#__PURE__*/React__namespace.forwardRef(function AppBar(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiAppBar'
     });
@@ -20238,7 +20262,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 +20741,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 +20752,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 +20765,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;
@@ -21382,7 +21406,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$5({
       props: inProps,
       name: 'MuiPopper'
     });
@@ -21607,7 +21631,7 @@
     });
   });
   var ListSubheader = /*#__PURE__*/React__namespace.forwardRef(function ListSubheader(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiListSubheader'
     });
@@ -21906,7 +21930,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$5({
       props: inProps,
       name: 'MuiChip'
     });
@@ -22394,7 +22418,7 @@
    */
   var InputBase = /*#__PURE__*/React__namespace.forwardRef(function InputBase(inProps, ref) {
     var _slotProps$input;
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiInputBase'
     });
@@ -23233,7 +23257,7 @@
   }));
   var Autocomplete = /*#__PURE__*/React__namespace.forwardRef(function Autocomplete(inProps, ref) {
     var _slotProps$clearIndic, _slotProps$paper, _slotProps$popper, _slotProps$popupIndic;
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiAutocomplete'
     });
@@ -23457,6 +23481,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 +23591,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 */ = {
@@ -23998,7 +24033,7 @@
   var avatarClasses = generateUtilityClasses$1('MuiAvatar', ['root', 'colorDefault', 'circular', 'rounded', 'square', 'img', 'fallback']);
   var avatarClasses$1 = avatarClasses;
 
-  var useThemeProps$1 = createUseThemeProps();
+  var useThemeProps$2 = createUseThemeProps();
   var useUtilityClasses$1w = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
       variant = ownerState.variant,
@@ -24130,7 +24165,7 @@
     return loaded;
   }
   var Avatar = /*#__PURE__*/React__namespace.forwardRef(function Avatar(inProps, ref) {
-    var props = useThemeProps$1({
+    var props = useThemeProps$2({
       props: inProps,
       name: 'MuiAvatar'
     });
@@ -24320,7 +24355,7 @@
   });
   var AvatarGroup = /*#__PURE__*/React__namespace.forwardRef(function AvatarGroup(inProps, ref) {
     var _slotProps$additional;
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiAvatarGroup'
     });
@@ -24702,7 +24737,7 @@
   });
   var Backdrop = /*#__PURE__*/React__namespace.forwardRef(function Backdrop(inProps, ref) {
     var _slotProps$root, _ref2, _slots$root;
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiBackdrop'
     });
@@ -24855,7 +24890,7 @@
 
   var RADIUS_STANDARD = 10;
   var RADIUS_DOT = 4;
-  var useThemeProps = createUseThemeProps();
+  var useThemeProps$1 = createUseThemeProps();
   var useUtilityClasses$1t = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       anchorOrigin = ownerState.anchorOrigin,
@@ -25058,7 +25093,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$1({
       props: inProps,
       name: 'MuiBadge'
     });
@@ -25307,7 +25342,7 @@
     };
   });
   var BottomNavigation = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigation(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiBottomNavigation'
     });
@@ -25463,7 +25498,7 @@
     }));
   });
   var BottomNavigationAction = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigationAction(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiBottomNavigationAction'
     });
@@ -25730,7 +25765,7 @@
     }, []);
   }
   var Breadcrumbs = /*#__PURE__*/React__namespace.forwardRef(function Breadcrumbs(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiBreadcrumbs'
     });
@@ -26129,7 +26164,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$5({
       props: resolvedProps,
       name: 'MuiButton'
     });
@@ -26390,7 +26425,7 @@
     })));
   });
   var ButtonGroup = /*#__PURE__*/React__namespace.forwardRef(function ButtonGroup(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiButtonGroup'
     });
@@ -26579,7 +26614,7 @@
     };
   });
   var Card = /*#__PURE__*/React__namespace.forwardRef(function Card(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiCard'
     });
@@ -26694,7 +26729,7 @@
     };
   });
   var CardActionArea = /*#__PURE__*/React__namespace.forwardRef(function CardActionArea(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiCardActionArea'
     });
@@ -26778,7 +26813,7 @@
     });
   });
   var CardActions = /*#__PURE__*/React__namespace.forwardRef(function CardActions(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiCardActions'
     });
@@ -26853,7 +26888,7 @@
     };
   });
   var CardContent = /*#__PURE__*/React__namespace.forwardRef(function CardContent(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiCardContent'
     });
@@ -26964,7 +26999,7 @@
     flex: '1 1 auto'
   });
   var CardHeader = /*#__PURE__*/React__namespace.forwardRef(function CardHeader(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiCardHeader'
     });
@@ -27133,7 +27168,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$5({
       props: inProps,
       name: 'MuiCardMedia'
     });
@@ -27544,7 +27579,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$5({
       props: inProps,
       name: 'MuiCheckbox'
     });
@@ -27776,7 +27811,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$5({
       props: inProps,
       name: 'MuiCircularProgress'
     });
@@ -27917,7 +27952,7 @@
       }
     }),
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$4({
+      return useThemeProps$5({
         props: inProps,
         name: 'MuiContainer'
       });
@@ -28040,7 +28075,7 @@
     return defaultStyles;
   };
   function CssBaseline(inProps) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiCssBaseline'
     });
@@ -28169,7 +28204,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$5({
       name: 'MuiModal',
       props: inProps
     });
@@ -28623,7 +28658,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$5({
       props: inProps,
       name: 'MuiDialog'
     });
@@ -28907,7 +28942,7 @@
     });
   });
   var DialogActions = /*#__PURE__*/React__namespace.forwardRef(function DialogActions(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiDialogActions'
     });
@@ -28999,7 +29034,7 @@
     }));
   });
   var DialogContent = /*#__PURE__*/React__namespace.forwardRef(function DialogContent(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiDialogContent'
     });
@@ -29071,7 +29106,7 @@
     }
   })({});
   var DialogContentText = /*#__PURE__*/React__namespace.forwardRef(function DialogContentText(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiDialogContentText'
     });
@@ -29132,7 +29167,7 @@
     flex: '0 0 auto'
   });
   var DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function DialogTitle(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiDialogTitle'
     });
@@ -29312,7 +29347,7 @@
     });
   });
   var Divider = /*#__PURE__*/React__namespace.forwardRef(function Divider(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiDivider'
     });
@@ -29849,8 +29884,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 +29894,12 @@
    * when `variant="temporary"` is set.
    */
   var Drawer = /*#__PURE__*/React__namespace.forwardRef(function Drawer(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiDrawer'
     });
     var theme = useTheme();
+    var isRtl = useRtl();
     var defaultTransitionDuration = {
       enter: theme.transitions.duration.enteringScreen,
       exit: theme.transitions.duration.leavingScreen
@@ -29899,7 +29936,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,
@@ -30155,7 +30194,7 @@
     });
   });
   var Fab = /*#__PURE__*/React__namespace.forwardRef(function Fab(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiFab'
     });
@@ -30426,7 +30465,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$5({
       props: inProps,
       name: 'MuiFilledInput'
     });
@@ -30746,7 +30785,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$5({
       props: inProps,
       name: 'MuiFormControl'
     });
@@ -30977,7 +31016,7 @@
       }
     }),
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$4({
+      return useThemeProps$5({
         props: inProps,
         name: 'MuiStack'
       });
@@ -31106,7 +31145,7 @@
    */
   var FormControlLabel = /*#__PURE__*/React__namespace.forwardRef(function FormControlLabel(inProps, ref) {
     var _ref5, _slotProps$typography;
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiFormControlLabel'
     });
@@ -31299,7 +31338,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$5({
       props: inProps,
       name: 'MuiFormGroup'
     });
@@ -31404,7 +31443,7 @@
     });
   });
   var FormHelperText = /*#__PURE__*/React__namespace.forwardRef(function FormHelperText(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiFormHelperText'
     });
@@ -31568,7 +31607,7 @@
     });
   });
   var FormLabel = /*#__PURE__*/React__namespace.forwardRef(function FormLabel(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiFormLabel'
     });
@@ -32024,7 +32063,7 @@
     return composeClasses(slots, getGridUtilityClass, classes);
   };
   var Grid = /*#__PURE__*/React__namespace.forwardRef(function Grid(inProps, ref) {
-    var themeProps = useThemeProps$4({
+    var themeProps = useThemeProps$5({
       props: inProps,
       name: 'MuiGrid'
     });
@@ -32242,7 +32281,7 @@
     }),
     componentName: 'MuiGrid2',
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$4({
+      return useThemeProps$5({
         props: inProps,
         name: 'MuiGrid2'
       });
@@ -33094,7 +33133,7 @@
     };
   });
   var Icon = /*#__PURE__*/React__namespace.forwardRef(function Icon(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiIcon'
     });
@@ -33219,7 +33258,7 @@
     });
   });
   var ImageList = /*#__PURE__*/React__namespace.forwardRef(function ImageList(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiImageList'
     });
@@ -33380,7 +33419,7 @@
     })));
   });
   var ImageListItem = /*#__PURE__*/React__namespace.forwardRef(function ImageListItem(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiImageListItem'
     });
@@ -33608,7 +33647,7 @@
     });
   });
   var ImageListItemBar = /*#__PURE__*/React__namespace.forwardRef(function ImageListItemBar(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiImageListItemBar'
     });
@@ -33782,7 +33821,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$5({
       props: inProps,
       name: 'MuiInput'
     });
@@ -34070,7 +34109,7 @@
     });
   });
   var InputAdornment = /*#__PURE__*/React__namespace.forwardRef(function InputAdornment(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiInputAdornment'
     });
@@ -34270,7 +34309,7 @@
     }));
   });
   var InputLabel = /*#__PURE__*/React__namespace.forwardRef(function InputLabel(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       name: 'MuiInputLabel',
       props: inProps
     });
@@ -34542,7 +34581,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$5({
       props: inProps,
       name: 'MuiLinearProgress'
     });
@@ -34559,7 +34598,7 @@
       variant: variant
     });
     var classes = useUtilityClasses$S(ownerState);
-    var theme = useTheme();
+    var isRtl = useRtl();
     var rootProps = {};
     var inlineStyles = {
       bar1: {},
@@ -34571,7 +34610,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 +34621,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 +34788,7 @@
     }));
   });
   var Link = /*#__PURE__*/React__namespace.forwardRef(function Link(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiLink'
     });
@@ -34920,7 +34959,7 @@
     });
   });
   var List = /*#__PURE__*/React__namespace.forwardRef(function List(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiList'
     });
@@ -35093,7 +35132,7 @@
     });
   });
   var ListItemButton = /*#__PURE__*/React__namespace.forwardRef(function ListItemButton(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiListItemButton'
     });
@@ -35276,7 +35315,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$5({
       props: inProps,
       name: 'MuiListItemSecondaryAction'
     });
@@ -35421,7 +35460,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$5({
       props: inProps,
       name: 'MuiListItem'
     });
@@ -35755,7 +35794,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$5({
       props: inProps,
       name: 'MuiListItemAvatar'
     });
@@ -35834,7 +35873,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$5({
       props: inProps,
       name: 'MuiListItemIcon'
     });
@@ -35917,7 +35956,7 @@
     });
   });
   var ListItemText = /*#__PURE__*/React__namespace.forwardRef(function ListItemText(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiListItemText'
     });
@@ -36125,13 +36164,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 +36412,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$5({
       props: inProps,
       name: 'MuiPopover'
     });
@@ -36889,7 +36929,7 @@
   });
   var Menu = /*#__PURE__*/React__namespace.forwardRef(function Menu(inProps, ref) {
     var _slots$paper, _slotProps$paper;
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiMenu'
     });
@@ -36919,8 +36959,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 +36975,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);
@@ -37232,7 +37273,7 @@
     })));
   });
   var MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiMenuItem'
     });
@@ -37474,7 +37515,7 @@
     });
   });
   var MobileStepper = /*#__PURE__*/React__namespace.forwardRef(function MobileStepper(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiMobileStepper'
     });
@@ -37791,7 +37832,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$5({
       name: 'MuiNativeSelect',
       props: inProps
     });
@@ -38116,7 +38157,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$5({
       props: inProps,
       name: 'MuiOutlinedInput'
     });
@@ -38666,7 +38707,7 @@
     });
   });
   var PaginationItem = /*#__PURE__*/React__namespace.forwardRef(function PaginationItem(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiPaginationItem'
     });
@@ -38701,9 +38742,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 +38910,7 @@
     return "Go to ".concat(type, " page");
   }
   var Pagination = /*#__PURE__*/React__namespace.forwardRef(function Pagination(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiPagination'
     });
@@ -39224,7 +39265,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$5({
       props: inProps,
       name: 'MuiRadio'
     });
@@ -39705,7 +39746,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$5({
       name: 'MuiRating',
       props: inProps
     });
@@ -39751,7 +39792,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 +39828,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 +40187,7 @@
     }, colorSchemeStyles);
   });
   var ScopedCssBaseline = /*#__PURE__*/React__namespace.forwardRef(function ScopedCssBaseline(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiScopedCssBaseline'
     });
@@ -40868,7 +40909,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$5({
       name: 'MuiSelect',
       props: inProps
     });
@@ -41191,7 +41232,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$5({
       props: inProps,
       name: 'MuiSkeleton'
     });
@@ -41679,12 +41720,11 @@
   };
   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 props = useThemeProps$5({
       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'],
@@ -42257,7 +42297,7 @@
     marginRight: -8
   });
   var SnackbarContent = /*#__PURE__*/React__namespace.forwardRef(function SnackbarContent(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiSnackbarContent'
     });
@@ -42379,7 +42419,7 @@
     })));
   });
   var Snackbar = /*#__PURE__*/React__namespace.forwardRef(function Snackbar(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiSnackbar'
     });
@@ -42914,7 +42954,7 @@
     });
   });
   var SpeedDial = /*#__PURE__*/React__namespace.forwardRef(function SpeedDial(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiSpeedDial'
     });
@@ -43463,17 +43503,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$5({
       props: inProps,
       name: 'MuiTooltip'
     });
@@ -43529,7 +43572,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 +44189,7 @@
     });
   });
   var SpeedDialAction = /*#__PURE__*/React__namespace.forwardRef(function SpeedDialAction(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiSpeedDialAction'
     });
@@ -44340,7 +44383,7 @@
     }));
   });
   var SpeedDialIcon = /*#__PURE__*/React__namespace.forwardRef(function SpeedDialIcon(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiSpeedDialIcon'
     });
@@ -44471,7 +44514,7 @@
     });
   });
   var Step = /*#__PURE__*/React__namespace.forwardRef(function Step(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiStep'
     });
@@ -44662,7 +44705,7 @@
     };
   });
   var StepIcon = /*#__PURE__*/React__namespace.forwardRef(function StepIcon(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiStepIcon'
     });
@@ -44861,7 +44904,7 @@
   });
   var StepLabel = /*#__PURE__*/React__namespace.forwardRef(function StepLabel(inProps, ref) {
     var _slotProps$label;
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiStepLabel'
     });
@@ -45025,7 +45068,7 @@
     }));
   });
   var StepButton = /*#__PURE__*/React__namespace.forwardRef(function StepButton(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiStepButton'
     });
@@ -45159,7 +45202,7 @@
     });
   });
   var StepConnector = /*#__PURE__*/React__namespace.forwardRef(function StepConnector(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiStepConnector'
     });
@@ -45256,7 +45299,7 @@
     }
   })({});
   var StepContent = /*#__PURE__*/React__namespace.forwardRef(function StepContent(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiStepContent'
     });
@@ -45388,7 +45431,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$5({
       props: inProps,
       name: 'MuiStepper'
     });
@@ -45654,7 +45697,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$6({
       name: 'MuiSwipeableDrawer',
       props: inProps
     });
@@ -46165,6 +46208,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 +46233,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 +46288,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 +46312,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 +46357,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 +46377,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 +46388,7 @@
     };
   });
   var Switch = /*#__PURE__*/React__namespace.forwardRef(function Switch(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps({
       props: inProps,
       name: 'MuiSwitch'
     });
@@ -46542,7 +46613,7 @@
     });
   });
   var Tab = /*#__PURE__*/React__namespace.forwardRef(function Tab(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiTab'
     });
@@ -46746,7 +46817,7 @@
   });
   var defaultComponent$4 = 'table';
   var Table = /*#__PURE__*/React__namespace.forwardRef(function Table(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiTable'
     });
@@ -46867,7 +46938,7 @@
   };
   var defaultComponent$3 = 'tbody';
   var TableBody = /*#__PURE__*/React__namespace.forwardRef(function TableBody(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiTableBody'
     });
@@ -47002,7 +47073,7 @@
    * or otherwise a `<td>` element.
    */
   var TableCell = /*#__PURE__*/React__namespace.forwardRef(function TableCell(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiTableCell'
     });
@@ -47141,7 +47212,7 @@
     overflowX: 'auto'
   });
   var TableContainer = /*#__PURE__*/React__namespace.forwardRef(function TableContainer(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiTableContainer'
     });
@@ -47216,7 +47287,7 @@
   };
   var defaultComponent$2 = 'tfoot';
   var TableFooter = /*#__PURE__*/React__namespace.forwardRef(function TableFooter(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiTableFooter'
     });
@@ -47295,7 +47366,7 @@
   };
   var defaultComponent$1 = 'thead';
   var TableHead = /*#__PURE__*/React__namespace.forwardRef(function TableHead(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiTableHead'
     });
@@ -47391,7 +47462,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$5({
       props: inProps,
       name: 'MuiToolbar'
     });
@@ -47482,7 +47553,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 +47574,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 +47591,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 +47599,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 +47607,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 +47836,7 @@
    */
   var TablePagination = /*#__PURE__*/React__namespace.forwardRef(function TablePagination(inProps, ref) {
     var _slotProps$select;
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiTablePagination'
     });
@@ -48121,7 +48192,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$5({
       props: inProps,
       name: 'MuiTableRow'
     });
@@ -48269,7 +48340,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$5({
       props: inProps,
       name: 'MuiTableSortLabel'
     });
@@ -48480,7 +48551,7 @@
   });
   var TabScrollButton = /*#__PURE__*/React__namespace.forwardRef(function TabScrollButton(inProps, ref) {
     var _slots$StartScrollBut, _slots$EndScrollButto;
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiTabScrollButton'
     });
@@ -48493,8 +48564,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 +48828,12 @@
   var defaultIndicatorStyle = {};
   var warnedOnceTabPresent = false;
   var Tabs = /*#__PURE__*/React__namespace.forwardRef(function Tabs(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       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 +48945,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 +49539,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$5({
       props: inProps,
       name: 'MuiTextField'
     });
@@ -49885,7 +49955,7 @@
     var resolvedProps = resolveProps(_extends({}, contextProps, {
       selected: isValueSelected(inProps.value, contextValue)
     }), inProps);
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: resolvedProps,
       name: 'MuiToggleButton'
     });
@@ -50089,7 +50159,7 @@
     }));
   });
   var ToggleButtonGroup = /*#__PURE__*/React__namespace.forwardRef(function ToggleButtonGroup(inProps, ref) {
-    var props = useThemeProps$4({
+    var props = useThemeProps$5({
       props: inProps,
       name: 'MuiToggleButtonGroup'
     });
@@ -50758,7 +50828,7 @@
   exports.useStepContext = useStepContext;
   exports.useStepperContext = useStepperContext;
   exports.useTheme = useTheme;
-  exports.useThemeProps = useThemeProps$4;
+  exports.useThemeProps = useThemeProps$5;
   exports.withStyles = withStyles;
   exports.withTheme = withTheme;