@mui/material 5.15.12 → 5.15.14

package/legacy/Autocomplete/Autocomplete.js

@@ -3,7 +3,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _ClearIcon, _ArrowDropDownIcon;
+var _styled, _ClearIcon, _ArrowDropDownIcon;
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -23,14 +23,14 @@ import outlinedInputClasses from '../OutlinedInput/outlinedInputClasses';
 import filledInputClasses from '../FilledInput/filledInputClasses';
 import ClearIcon from '../internal/svg-icons/Close';
 import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses';
 import capitalize from '../utils/capitalize';
 import useForkRef from '../utils/useForkRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
+var useThemeProps = createUseThemeProps('MuiAutocomplete');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     disablePortal = ownerState.disablePortal,
@@ -73,89 +73,100 @@ var AutocompleteRoot = styled('div', {
       size = ownerState.size;
     return [_defineProperty({}, "& .".concat(autocompleteClasses.tag), styles.tag), _defineProperty({}, "& .".concat(autocompleteClasses.tag), styles["tagSize".concat(capitalize(size))]), _defineProperty({}, "& .".concat(autocompleteClasses.inputRoot), styles.inputRoot), _defineProperty({}, "& .".concat(autocompleteClasses.input), styles.input), _defineProperty({}, "& .".concat(autocompleteClasses.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.focused, " .").concat(autocompleteClasses.clearIndicator), {
-    visibility: 'visible'
-  }), '@media (pointer: fine)', _defineProperty({}, "&:hover .".concat(autocompleteClasses.clearIndicator), {
-    visibility: 'visible'
-  })), ownerState.fullWidth && {
+})((_styled = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_styled, "&.".concat(autocompleteClasses.focused, " .").concat(autocompleteClasses.clearIndicator), {
+  visibility: 'visible'
+}), '@media (pointer: fine)', _defineProperty({}, "&:hover .".concat(autocompleteClasses.clearIndicator), {
+  visibility: 'visible'
+})), "& .".concat(autocompleteClasses.tag), {
+  margin: 3,
+  maxWidth: 'calc(100% - 6px)'
+}), "& .".concat(autocompleteClasses.inputRoot), _defineProperty(_defineProperty(_defineProperty({
+  flexWrap: 'wrap'
+}, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
+  paddingRight: 26 + 4
+}), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
+  paddingRight: 52 + 4
+}), "& .".concat(autocompleteClasses.input), {
+  width: 0,
+  minWidth: 30
+})), "& .".concat(inputClasses.root), {
+  paddingBottom: 1,
+  '& .MuiInput-input': {
+    padding: '4px 4px 4px 0px'
+  }
+}), "& .".concat(inputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(inputClasses.input), {
+  padding: '2px 4px 3px 0'
+})), "& .".concat(outlinedInputClasses.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  padding: 9
+}, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
+  paddingRight: 26 + 4 + 9
+}), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
+  paddingRight: 52 + 4 + 9
+}), "& .".concat(autocompleteClasses.input), {
+  padding: '7.5px 4px 7.5px 5px'
+}), "& .".concat(autocompleteClasses.endAdornment), {
+  right: 9
+})), "& .".concat(outlinedInputClasses.root, ".").concat(inputBaseClasses.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.input), {
+  padding: '2.5px 4px 2.5px 8px'
+})), "& .".concat(filledInputClasses.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  paddingTop: 19,
+  paddingLeft: 8
+}, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
+  paddingRight: 26 + 4 + 9
+}), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
+  paddingRight: 52 + 4 + 9
+}), "& .".concat(filledInputClasses.input), {
+  padding: '7px 4px'
+}), "& .".concat(autocompleteClasses.endAdornment), {
+  right: 9
+})), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
+  paddingBottom: 1
+}, "& .".concat(filledInputClasses.input), {
+  padding: '2.5px 4px'
+})), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_styled, "& .".concat(inputBaseClasses.hiddenLabel), {
+  paddingTop: 8
+}), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel), _defineProperty({
+  paddingTop: 0,
+  paddingBottom: 0
+}, "& .".concat(autocompleteClasses.input), {
+  paddingTop: 16,
+  paddingBottom: 17
+})), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(autocompleteClasses.input), {
+  paddingTop: 8,
+  paddingBottom: 9
+})), "& .".concat(autocompleteClasses.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.tag), _extends({
-    margin: 3,
-    maxWidth: 'calc(100% - 6px)'
-  }, ownerState.size === 'small' && {
+  }
+}, {
+  props: {
+    size: 'small'
+  },
+  style: _defineProperty({}, "& .".concat(autocompleteClasses.tag), {
     margin: 2,
     maxWidth: 'calc(100% - 4px)'
-  })), "& .".concat(autocompleteClasses.inputRoot), _defineProperty(_defineProperty(_defineProperty({
-    flexWrap: 'wrap'
-  }, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
-    paddingRight: 26 + 4
-  }), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
-    paddingRight: 52 + 4
-  }), "& .".concat(autocompleteClasses.input), {
-    width: 0,
-    minWidth: 30
-  })), "& .".concat(inputClasses.root), {
-    paddingBottom: 1,
-    '& .MuiInput-input': {
-      padding: '4px 4px 4px 0px'
-    }
-  }), "& .".concat(inputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(inputClasses.input), {
-    padding: '2px 4px 3px 0'
-  })), "& .".concat(outlinedInputClasses.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    padding: 9
-  }, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
-    paddingRight: 26 + 4 + 9
-  }), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
-    paddingRight: 52 + 4 + 9
-  }), "& .".concat(autocompleteClasses.input), {
-    padding: '7.5px 4px 7.5px 5px'
-  }), "& .".concat(autocompleteClasses.endAdornment), {
-    right: 9
-  })), "& .".concat(outlinedInputClasses.root, ".").concat(inputBaseClasses.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.input), {
-    padding: '2.5px 4px 2.5px 8px'
-  })), "& .".concat(filledInputClasses.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    paddingTop: 19,
-    paddingLeft: 8
-  }, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
-    paddingRight: 26 + 4 + 9
-  }), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
-    paddingRight: 52 + 4 + 9
-  }), "& .".concat(filledInputClasses.input), {
-    padding: '7px 4px'
-  }), "& .".concat(autocompleteClasses.endAdornment), {
-    right: 9
-  })), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
-    paddingBottom: 1
-  }, "& .".concat(filledInputClasses.input), {
-    padding: '2.5px 4px'
-  })), "& .".concat(inputBaseClasses.hiddenLabel), {
-    paddingTop: 8
-  }), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel), _defineProperty({
-    paddingTop: 0,
-    paddingBottom: 0
-  }, "& .".concat(autocompleteClasses.input), {
-    paddingTop: 16,
-    paddingBottom: 17
-  })), _defineProperty(_defineProperty(_extends3, "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(autocompleteClasses.input), {
-    paddingTop: 8,
-    paddingBottom: 9
-  })), "& .".concat(autocompleteClasses.input), _extends({
-    flexGrow: 1,
-    textOverflow: 'ellipsis',
-    opacity: 0
-  }, ownerState.inputFocused && {
+  })
+}, {
+  props: {
+    inputFocused: true
+  },
+  style: _defineProperty({}, "& .".concat(autocompleteClasses.input), {
     opacity: 1
-  }))));
-});
+  })
+}])));
 var AutocompleteEndAdornment = styled('div', {
   name: 'MuiAutocomplete',
   slot: 'EndAdornment',
@@ -183,18 +194,21 @@ var AutocompleteClearIndicator = styled(IconButton, {
 var AutocompletePopupIndicator = styled(IconButton, {
   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(Popper, {
   name: 'MuiAutocomplete',
@@ -203,14 +217,19 @@ var AutocompletePopper = styled(Popper, {
     var ownerState = props.ownerState;
     return [_defineProperty({}, "& .".concat(autocompleteClasses.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(Paper, {
   name: 'MuiAutocomplete',
@@ -218,8 +237,8 @@ var AutocompletePaper = styled(Paper, {
   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'
   });
@@ -230,8 +249,8 @@ var AutocompleteLoading = styled('div', {
   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'
@@ -243,8 +262,8 @@ var AutocompleteNoOptions = styled('div', {
   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'
@@ -256,8 +275,8 @@ var AutocompleteListbox = styled('div', {
   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,
@@ -310,8 +329,8 @@ var AutocompleteGroupLabel = styled(ListSubheader, {
   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
@@ -470,8 +489,8 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
   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"]);
@@ -566,6 +585,67 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
   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__*/_jsx(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__*/_jsx(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__*/_jsx(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__*/_jsx(AutocompleteLoading, {
+      className: classes.loading,
+      ownerState: ownerState,
+      children: loadingText
+    }));
+  } else if (groupedOptions.length === 0 && !freeSolo && !loading) {
+    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(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__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(AutocompleteRoot, _extends({
       ref: ref,
@@ -615,57 +695,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
           readOnly: readOnly
         }, getInputProps())
       })
-    })), anchorEl ? /*#__PURE__*/_jsx(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__*/_jsxs(AutocompletePaper, _extends({
-        ownerState: ownerState,
-        as: PaperComponent
-      }, paperSlotProps, {
-        className: clsx(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
-        children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
-          className: classes.loading,
-          ownerState: ownerState,
-          children: loadingText
-        }) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/_jsx(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__*/_jsx(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]
   });
 });
 process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptypes */ = {
@@ -917,7 +947,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   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,

package/legacy/CircularProgress/CircularProgress.js

@@ -191,7 +191,7 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-pro
   /**
    * 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]),

package/legacy/Drawer/Drawer.js

@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import composeClasses from '@mui/utils/composeClasses';
+import { useRtl } from '@mui/system/RtlProvider';
 import Modal from '../Modal';
 import Slide from '../Slide';
 import Paper from '../Paper';
@@ -113,8 +114,9 @@ var oppositeDirection = {
 export function isHorizontal(anchor) {
   return ['left', 'right'].indexOf(anchor) !== -1;
 }
-export function getAnchor(theme, anchor) {
-  return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
+export function getAnchor(_ref3, anchor) {
+  var direction = _ref3.direction;
+  return direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
 }
 
 /**
@@ -127,6 +129,7 @@ var Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     name: 'MuiDrawer'
   });
   var theme = useTheme();
+  var isRtl = useRtl();
   var defaultTransitionDuration = {
     enter: theme.transitions.duration.enteringScreen,
     exit: theme.transitions.duration.leavingScreen
@@ -163,7 +166,9 @@ var Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
   React.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,

package/legacy/Icon/Icon.js

@@ -102,7 +102,7 @@ process.env.NODE_ENV !== "production" ? Icon.propTypes /* remove-proptypes */ =
   // └─────────────────────────────────────────────────────────────────────┘
   /**
    * 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,

package/legacy/LinearProgress/LinearProgress.js

@@ -10,8 +10,8 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { keyframes, css } from '@mui/system';
 import { darken, lighten } from '@mui/system/colorManipulator';
+import { useRtl } from '@mui/system/RtlProvider';
 import capitalize from '../utils/capitalize';
-import useTheme from '../styles/useTheme';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getLinearProgressUtilityClass } from './linearProgressClasses';
@@ -190,7 +190,7 @@ var LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inPro
     variant: variant
   });
   var classes = useUtilityClasses(ownerState);
-  var theme = useTheme();
+  var isRtl = useRtl();
   var rootProps = {};
   var inlineStyles = {
     bar1: {},
@@ -202,7 +202,7 @@ var LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inPro
       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, "%)");
@@ -213,7 +213,7 @@ var LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inPro
   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, "%)");

package/legacy/Menu/Menu.js

@@ -9,10 +9,10 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { useSlotProps } from '@mui/base/utils';
 import HTMLElementType from '@mui/utils/HTMLElementType';
+import { useRtl } from '@mui/system/RtlProvider';
 import MenuList from '../MenuList';
 import Popover, { PopoverPaper } from '../Popover';
 import styled, { rootShouldForwardProp } from '../styles/styled';
-import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
 import { getMenuUtilityClass } from './menuClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -99,8 +99,7 @@ var Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     _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,
@@ -116,7 +115,9 @@ var Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
   var menuListActionsRef = React.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);

package/legacy/MenuList/MenuList.js

@@ -108,13 +108,14 @@ var MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
   }, [autoFocus]);
   React.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;

package/legacy/PaginationItem/PaginationItem.js

@@ -8,9 +8,9 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
+import { useRtl } from '@mui/system/RtlProvider';
 import useThemeProps from '../styles/useThemeProps';
 import paginationItemClasses, { getPaginationItemUtilityClass } from './paginationItemClasses';
-import useTheme from '../styles/useTheme';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import FirstPageIcon from '../internal/svg-icons/FirstPage';
@@ -226,9 +226,9 @@ var PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inPro
     type: type,
     variant: variant
   });
-  var theme = useTheme();
+  var isRtl = useRtl();
   var classes = useUtilityClasses(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 || FirstPageIcon,

package/legacy/Rating/Rating.js

@@ -11,7 +11,7 @@ import clamp from '@mui/utils/clamp';
 import visuallyHidden from '@mui/utils/visuallyHidden';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import useTheme from '../styles/useTheme';
+import { useRtl } from '@mui/system/RtlProvider';
 import { capitalize, useForkRef, useIsFocusVisible, useControlled, unstable_useId as useId } from '../utils';
 import Star from '../internal/svg-icons/Star';
 import StarBorder from '../internal/svg-icons/StarBorder';
@@ -306,7 +306,7 @@ var Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     valueDerived = _useControlled2[0],
     setValueState = _useControlled2[1];
   var valueRounded = roundValueToPrecision(valueDerived, precision);
-  var theme = useTheme();
+  var isRtl = useRtl();
   var _React$useState = React.useState({
       hover: -1,
       focus: -1
@@ -342,7 +342,7 @@ var Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
       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;