@mui/material 5.15.11 → 5.15.13

package/TablePagination/TablePaginationActions.js

@@ -5,9 +5,9 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["backIconButtonProps", "count", "disabled", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useRtl } from '@mui/system/RtlProvider';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
-import useTheme from '../styles/useTheme';
 import IconButton from '../IconButton';
 import LastPageIconDefault from '../internal/svg-icons/LastPage';
 import FirstPageIconDefault from '../internal/svg-icons/FirstPage';
@@ -34,7 +34,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       slotProps = {}
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const theme = useTheme();
+  const isRtl = useRtl();
   const handleFirstPageButtonClick = event => {
     onPageChange(event, 0);
   };
@@ -55,14 +55,14 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
   const LastButtonIcon = (_slots$lastButtonIcon = slots.lastButtonIcon) != null ? _slots$lastButtonIcon : LastPageIconDefault;
   const NextButtonIcon = (_slots$nextButtonIcon = slots.nextButtonIcon) != null ? _slots$nextButtonIcon : KeyboardArrowRight;
   const PreviousButtonIcon = (_slots$previousButton2 = slots.previousButtonIcon) != null ? _slots$previousButton2 : KeyboardArrowLeft;
-  const FirstButtonSlot = theme.direction === 'rtl' ? LastButton : FirstButton;
-  const PreviousButtonSlot = theme.direction === 'rtl' ? NextButton : PreviousButton;
-  const NextButtonSlot = theme.direction === 'rtl' ? PreviousButton : NextButton;
-  const LastButtonSlot = theme.direction === 'rtl' ? FirstButton : LastButton;
-  const firstButtonSlotProps = theme.direction === 'rtl' ? slotProps.lastButton : slotProps.firstButton;
-  const previousButtonSlotProps = theme.direction === 'rtl' ? slotProps.nextButton : slotProps.previousButton;
-  const nextButtonSlotProps = theme.direction === 'rtl' ? slotProps.previousButton : slotProps.nextButton;
-  const lastButtonSlotProps = theme.direction === 'rtl' ? slotProps.firstButton : slotProps.lastButton;
+  const FirstButtonSlot = isRtl ? LastButton : FirstButton;
+  const PreviousButtonSlot = isRtl ? NextButton : PreviousButton;
+  const NextButtonSlot = isRtl ? PreviousButton : NextButton;
+  const LastButtonSlot = isRtl ? FirstButton : LastButton;
+  const firstButtonSlotProps = isRtl ? slotProps.lastButton : slotProps.firstButton;
+  const previousButtonSlotProps = isRtl ? slotProps.nextButton : slotProps.previousButton;
+  const nextButtonSlotProps = isRtl ? slotProps.previousButton : slotProps.nextButton;
+  const lastButtonSlotProps = isRtl ? slotProps.firstButton : slotProps.lastButton;
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: ref
   }, other, {
@@ -72,7 +72,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       "aria-label": getItemAriaLabel('first', page),
       title: getItemAriaLabel('first', page)
     }, firstButtonSlotProps, {
-      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(LastButtonIcon, _extends({}, slotProps.lastButtonIcon)) : /*#__PURE__*/_jsx(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon))
+      children: isRtl ? /*#__PURE__*/_jsx(LastButtonIcon, _extends({}, slotProps.lastButtonIcon)) : /*#__PURE__*/_jsx(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon))
     })), /*#__PURE__*/_jsx(PreviousButtonSlot, _extends({
       onClick: handleBackButtonClick,
       disabled: disabled || page === 0,
@@ -80,7 +80,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       "aria-label": getItemAriaLabel('previous', page),
       title: getItemAriaLabel('previous', page)
     }, previousButtonSlotProps != null ? previousButtonSlotProps : backIconButtonProps, {
-      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon)) : /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon))
+      children: isRtl ? /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon)) : /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon))
     })), /*#__PURE__*/_jsx(NextButtonSlot, _extends({
       onClick: handleNextButtonClick,
       disabled: disabled || (count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false),
@@ -88,14 +88,14 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       "aria-label": getItemAriaLabel('next', page),
       title: getItemAriaLabel('next', page)
     }, nextButtonSlotProps != null ? nextButtonSlotProps : nextIconButtonProps, {
-      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon)) : /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon))
+      children: isRtl ? /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon)) : /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon))
     })), showLastButton && /*#__PURE__*/_jsx(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__*/_jsx(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon)) : /*#__PURE__*/_jsx(LastButtonIcon, _extends({}, slotProps.lastButtonIcon))
+      children: isRtl ? /*#__PURE__*/_jsx(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon)) : /*#__PURE__*/_jsx(LastButtonIcon, _extends({}, slotProps.lastButtonIcon))
     }))]
   }));
 });

package/Tabs/Tabs.js

@@ -10,6 +10,7 @@ import clsx from 'clsx';
 import refType from '@mui/utils/refType';
 import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
+import { useRtl } from '@mui/system/RtlProvider';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import useTheme from '../styles/useTheme';
@@ -209,7 +210,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     name: 'MuiTabs'
   });
   const theme = useTheme();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
@@ -297,7 +298,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         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,

package/Tooltip/Tooltip.js

@@ -11,6 +11,7 @@ import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import { appendOwnerState } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
+import { useRtl } from '@mui/system/RtlProvider';
 import styled from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
@@ -206,11 +207,11 @@ export function testReset() {
   hystersisTimer.clear();
 }
 function composeEventHandler(handler, eventHandler) {
-  return event => {
+  return (event, ...params) => {
     if (eventHandler) {
-      eventHandler(event);
+      eventHandler(event, ...params);
     }
-    handler(event);
+    handler(event, ...params);
   };
 }
 
@@ -257,7 +258,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     children: childrenProp
   });
   const theme = useTheme();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const [childNode, setChildNode] = React.useState();
   const [arrowRef, setArrowRef] = React.useState(null);
   const ignoreNonTouchEvents = React.useRef(false);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.11
+ * @mui/material v5.15.13
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/Alert/Alert.js

@@ -1,16 +1,16 @@
 'use client';
 
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { darken, lighten } from '@mui/system';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import composeClasses from '@mui/utils/composeClasses';
+import { darken, lighten } from '@mui/system/colorManipulator';
+import { styled, createUseThemeProps } from '../zero-styled';
 import useSlot from '../utils/useSlot';
 import capitalize from '../utils/capitalize';
 import Paper from '../Paper';
@@ -23,13 +23,14 @@ import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined';
 import CloseIcon from '../internal/svg-icons/Close';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiAlert');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var variant = ownerState.variant,
     color = ownerState.color,
     severity = ownerState.severity,
     classes = ownerState.classes;
   var slots = {
-    root: ['root', "".concat(variant).concat(capitalize(color || severity)), "".concat(variant)],
+    root: ['root', "color".concat(capitalize(color || severity)), "".concat(variant).concat(capitalize(color || severity)), "".concat(variant)],
     icon: ['icon'],
     message: ['message'],
     action: ['action']
@@ -44,38 +45,79 @@ var AlertRoot = styled(Paper, {
     return [styles.root, styles[ownerState.variant], styles["".concat(ownerState.variant).concat(capitalize(ownerState.color || ownerState.severity))]];
   }
 })(function (_ref) {
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
+  var theme = _ref.theme;
   var getColor = theme.palette.mode === 'light' ? darken : lighten;
   var getBackgroundColor = theme.palette.mode === 'light' ? lighten : darken;
-  var color = ownerState.color || ownerState.severity;
   return _extends({}, theme.typography.body2, {
     backgroundColor: 'transparent',
     display: 'flex',
-    padding: '6px 16px'
-  }, color && ownerState.variant === 'standard' && _defineProperty({
-    color: theme.vars ? theme.vars.palette.Alert["".concat(color, "Color")] : getColor(theme.palette[color].light, 0.6),
-    backgroundColor: theme.vars ? theme.vars.palette.Alert["".concat(color, "StandardBg")] : getBackgroundColor(theme.palette[color].light, 0.9)
-  }, "& .".concat(alertClasses.icon), theme.vars ? {
-    color: theme.vars.palette.Alert["".concat(color, "IconColor")]
-  } : {
-    color: theme.palette[color].main
-  }), color && ownerState.variant === 'outlined' && _defineProperty({
-    color: theme.vars ? theme.vars.palette.Alert["".concat(color, "Color")] : getColor(theme.palette[color].light, 0.6),
-    border: "1px solid ".concat((theme.vars || theme).palette[color].light)
-  }, "& .".concat(alertClasses.icon), theme.vars ? {
-    color: theme.vars.palette.Alert["".concat(color, "IconColor")]
-  } : {
-    color: theme.palette[color].main
-  }), color && ownerState.variant === 'filled' && _extends({
-    fontWeight: theme.typography.fontWeightMedium
-  }, theme.vars ? {
-    color: theme.vars.palette.Alert["".concat(color, "FilledColor")],
-    backgroundColor: theme.vars.palette.Alert["".concat(color, "FilledBg")]
-  } : {
-    backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
-    color: theme.palette.getContrastText(theme.palette[color].main)
-  }));
+    padding: '6px 16px',
+    variants: [].concat(_toConsumableArray(Object.entries(theme.palette).filter(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        value = _ref3[1];
+      return value.main && value.light;
+    }).map(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 1),
+        color = _ref5[0];
+      return {
+        props: {
+          colorSeverity: color,
+          variant: 'standard'
+        },
+        style: _defineProperty({
+          color: theme.vars ? theme.vars.palette.Alert["".concat(color, "Color")] : getColor(theme.palette[color].light, 0.6),
+          backgroundColor: theme.vars ? theme.vars.palette.Alert["".concat(color, "StandardBg")] : getBackgroundColor(theme.palette[color].light, 0.9)
+        }, "& .".concat(alertClasses.icon), theme.vars ? {
+          color: theme.vars.palette.Alert["".concat(color, "IconColor")]
+        } : {
+          color: theme.palette[color].main
+        })
+      };
+    })), _toConsumableArray(Object.entries(theme.palette).filter(function (_ref6) {
+      var _ref7 = _slicedToArray(_ref6, 2),
+        value = _ref7[1];
+      return value.main && value.light;
+    }).map(function (_ref8) {
+      var _ref9 = _slicedToArray(_ref8, 1),
+        color = _ref9[0];
+      return {
+        props: {
+          colorSeverity: color,
+          variant: 'outlined'
+        },
+        style: _defineProperty({
+          color: theme.vars ? theme.vars.palette.Alert["".concat(color, "Color")] : getColor(theme.palette[color].light, 0.6),
+          border: "1px solid ".concat((theme.vars || theme).palette[color].light)
+        }, "& .".concat(alertClasses.icon), theme.vars ? {
+          color: theme.vars.palette.Alert["".concat(color, "IconColor")]
+        } : {
+          color: theme.palette[color].main
+        })
+      };
+    })), _toConsumableArray(Object.entries(theme.palette).filter(function (_ref10) {
+      var _ref11 = _slicedToArray(_ref10, 2),
+        value = _ref11[1];
+      return value.main && value.dark;
+    }).map(function (_ref12) {
+      var _ref13 = _slicedToArray(_ref12, 1),
+        color = _ref13[0];
+      return {
+        props: {
+          colorSeverity: color,
+          variant: 'filled'
+        },
+        style: _extends({
+          fontWeight: theme.typography.fontWeightMedium
+        }, theme.vars ? {
+          color: theme.vars.palette.Alert["".concat(color, "FilledColor")],
+          backgroundColor: theme.vars.palette.Alert["".concat(color, "FilledBg")]
+        } : {
+          backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
+          color: theme.palette.getContrastText(theme.palette[color].main)
+        })
+      };
+    })))
+  });
 });
 var AlertIcon = styled('div', {
   name: 'MuiAlert',
@@ -161,7 +203,8 @@ var Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
   var ownerState = _extends({}, props, {
     color: color,
     severity: severity,
-    variant: variant
+    variant: variant,
+    colorSeverity: color || severity
   });
   var classes = useUtilityClasses(ownerState);
   var externalForwardedProps = {

package/legacy/Alert/alertClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getAlertUtilityClass(slot) {
   return generateUtilityClass('MuiAlert', slot);
 }
-var alertClasses = generateUtilityClasses('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);
+var alertClasses = generateUtilityClasses('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'colorSuccess', 'colorInfo', 'colorWarning', 'colorError', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);
 export default alertClasses;

package/legacy/AlertTitle/AlertTitle.js

@@ -6,11 +6,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Typography from '../Typography';
 import { getAlertTitleUtilityClass } from './alertTitleClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiAlertTitle');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {

package/legacy/Autocomplete/Autocomplete.js

@@ -566,6 +566,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 +676,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 */ = {

package/legacy/Avatar/Avatar.js

@@ -7,12 +7,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Person from '../internal/svg-icons/Person';
 import { getAvatarUtilityClass } from './avatarClasses';
 import useSlot from '../utils/useSlot';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiAvatar');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     variant = ownerState.variant,

package/legacy/Button/Button.js

@@ -26,10 +26,10 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     variant = ownerState.variant,
     classes = ownerState.classes;
   var slots = {
-    root: ['root', variant, "".concat(variant).concat(capitalize(color)), "size".concat(capitalize(size)), "".concat(variant, "Size").concat(capitalize(size)), color === 'inherit' && 'colorInherit', disableElevation && 'disableElevation', fullWidth && 'fullWidth'],
+    root: ['root', variant, "".concat(variant).concat(capitalize(color)), "size".concat(capitalize(size)), "".concat(variant, "Size").concat(capitalize(size)), "color".concat(capitalize(color)), disableElevation && 'disableElevation', fullWidth && 'fullWidth'],
     label: ['label'],
-    startIcon: ['startIcon', "iconSize".concat(capitalize(size))],
-    endIcon: ['endIcon', "iconSize".concat(capitalize(size))]
+    startIcon: ['icon', 'startIcon', "iconSize".concat(capitalize(size))],
+    endIcon: ['icon', 'endIcon', "iconSize".concat(capitalize(size))]
   };
   var composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
   return _extends({}, classes, composedClasses);

package/legacy/Button/buttonClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getButtonUtilityClass(slot) {
   return generateUtilityClass('MuiButton', slot);
 }
-var buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
+var buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorError', 'colorInfo', 'colorWarning', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'icon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
 export default buttonClasses;

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/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;