@mui/material 5.3.0 → 5.4.2

package/legacy/Select/Select.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 
-var _Input, _FilledInput;
+var _StyledInput, _StyledFilledInput;
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -17,6 +17,7 @@ import FilledInput from '../FilledInput';
 import OutlinedInput from '../OutlinedInput';
 import useThemeProps from '../styles/useThemeProps';
 import useForkRef from '../utils/useForkRef';
+import styled, { rootShouldForwardProp } from '../styles/styled';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -24,6 +25,19 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return classes;
 };
 
+var styledRootConfig = {
+  name: 'MuiSelect',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.root;
+  },
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return rootShouldForwardProp(prop) && prop !== 'variant';
+  },
+  slot: 'Root'
+};
+var StyledInput = styled(Input, styledRootConfig)('');
+var StyledOutlinedInput = styled(OutlinedInput, styledRootConfig)('');
+var StyledFilledInput = styled(FilledInput, styledRootConfig)('');
 var Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
   var props = useThemeProps({
     name: 'MuiSelect',
@@ -58,7 +72,7 @@ var Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       renderValue = props.renderValue,
       SelectDisplayProps = props.SelectDisplayProps,
       _props$variant = props.variant,
-      variantProps = _props$variant === void 0 ? 'outlined' : _props$variant,
+      variantProp = _props$variant === void 0 ? 'outlined' : _props$variant,
       other = _objectWithoutProperties(props, ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"]);
 
   var inputComponent = native ? NativeSelectInput : SelectInput;
@@ -68,16 +82,17 @@ var Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     muiFormControl: muiFormControl,
     states: ['variant']
   });
-  var variant = fcs.variant || variantProps;
+  var variant = fcs.variant || variantProp;
   var InputComponent = input || {
-    standard: _Input || (_Input = /*#__PURE__*/_jsx(Input, {})),
-    outlined: /*#__PURE__*/_jsx(OutlinedInput, {
+    standard: _StyledInput || (_StyledInput = /*#__PURE__*/_jsx(StyledInput, {})),
+    outlined: /*#__PURE__*/_jsx(StyledOutlinedInput, {
       label: label
     }),
-    filled: _FilledInput || (_FilledInput = /*#__PURE__*/_jsx(FilledInput, {}))
+    filled: _StyledFilledInput || (_StyledFilledInput = /*#__PURE__*/_jsx(StyledFilledInput, {}))
   }[variant];
 
   var ownerState = _extends({}, props, {
+    variant: variant,
     classes: classesProp
   });
 
@@ -116,7 +131,8 @@ var Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     notched: true
   } : {}, {
     ref: inputComponentRef,
-    className: clsx(InputComponent.props.className, className)
+    className: clsx(InputComponent.props.className, className),
+    variant: variant
   }, other));
 });
 process.env.NODE_ENV !== "production" ? Select.propTypes

package/legacy/Select/SelectInput.js

@@ -4,6 +4,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+
+var _span;
+
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
@@ -196,6 +199,10 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
     }
   }, [autoFocus]);
   React.useEffect(function () {
+    if (!labelId) {
+      return undefined;
+    }
+
     var label = ownerDocument(displayRef.current).getElementById(labelId);
 
     if (label) {
@@ -295,7 +302,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
         if (onChange) {
           // Redefine target to allow name and value to be read.
           // This allows seamless integration with the most popular form libraries.
-          // https://github.com/mui-org/material-ui/issues/13485#issuecomment-676048492
+          // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
           // Clone the event to not override `target` of the original event.
           var nativeEvent = event.nativeEvent || event;
           var clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
@@ -504,16 +511,11 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       className: clsx(classes.select, className, SelectDisplayProps.className) // The id is required for proper a11y
       ,
       id: buttonId,
-      children: isEmpty(display) ?
-      /*#__PURE__*/
-      // notranslate needed while Google Translate will not fix zero-width space issue
-      // eslint-disable-next-line react/no-danger
-      _jsx("span", {
+      children: isEmpty(display) ? // notranslate needed while Google Translate will not fix zero-width space issue
+      _span || (_span = /*#__PURE__*/_jsx("span", {
         className: "notranslate",
-        dangerouslySetInnerHTML: {
-          __html: '​'
-        }
-      }) : display
+        children: "\u200B"
+      })) : display
     })), /*#__PURE__*/_jsx(SelectNativeInput, _extends({
       value: Array.isArray(value) ? value.join(',') : value,
       name: name,

package/legacy/Slider/Slider.js

@@ -707,7 +707,9 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * The size of the slider.
    * @default 'medium'
    */
-  size: PropTypes.oneOf(['small', 'medium']),
+  size: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.oneOf(['small', 'medium']), PropTypes.string]),
 
   /**
    * The granularity with which the slider can step through values. (A "discrete" slider.)

package/legacy/Snackbar/Snackbar.js

@@ -289,7 +289,10 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       ownerState: ownerState,
-      ref: ref
+      ref: ref // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
+      // See https://github.com/mui-org/material-ui/issues/29080
+      ,
+      role: "presentation"
     }, other, {
       children: /*#__PURE__*/_jsx(TransitionComponent, _extends({
         appear: true,

package/legacy/SvgIcon/SvgIcon.js

@@ -29,7 +29,7 @@ var SvgIconRoot = styled('svg', {
     return [styles.root, ownerState.color !== 'inherit' && styles["color".concat(capitalize(ownerState.color))], styles["fontSize".concat(capitalize(ownerState.fontSize))]];
   }
 })(function (_ref) {
-  var _theme$palette$ownerS, _theme$palette$ownerS2;
+  var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _theme$palette$ownerS, _theme$palette, _theme$palette$ownerS2, _theme$palette2, _theme$palette2$actio, _theme$palette3, _theme$palette3$actio;
 
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
@@ -40,19 +40,19 @@ var SvgIconRoot = styled('svg', {
     display: 'inline-block',
     fill: 'currentColor',
     flexShrink: 0,
-    transition: theme.transitions.create('fill', {
-      duration: theme.transitions.duration.shorter
+    transition: (_theme$transitions = theme.transitions) == null ? void 0 : (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
+      duration: (_theme$transitions2 = theme.transitions) == null ? void 0 : (_theme$transitions2$d = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2$d.shorter
     }),
     fontSize: {
       inherit: 'inherit',
-      small: theme.typography.pxToRem(20),
-      medium: theme.typography.pxToRem(24),
-      large: theme.typography.pxToRem(35)
+      small: ((_theme$typography = theme.typography) == null ? void 0 : (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
+      medium: ((_theme$typography2 = theme.typography) == null ? void 0 : (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
+      large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875'
     }[ownerState.fontSize],
     // TODO v5 deprecate, v6 remove for sx
-    color: (_theme$palette$ownerS = (_theme$palette$ownerS2 = theme.palette[ownerState.color]) == null ? void 0 : _theme$palette$ownerS2.main) != null ? _theme$palette$ownerS : {
-      action: theme.palette.action.active,
-      disabled: theme.palette.action.disabled,
+    color: (_theme$palette$ownerS = (_theme$palette = theme.palette) == null ? void 0 : (_theme$palette$ownerS2 = _theme$palette[ownerState.color]) == null ? void 0 : _theme$palette$ownerS2.main) != null ? _theme$palette$ownerS : {
+      action: (_theme$palette2 = theme.palette) == null ? void 0 : (_theme$palette2$actio = _theme$palette2.action) == null ? void 0 : _theme$palette2$actio.active,
+      disabled: (_theme$palette3 = theme.palette) == null ? void 0 : (_theme$palette3$actio = _theme$palette3.action) == null ? void 0 : _theme$palette3$actio.disabled,
       inherit: undefined
     }[ownerState.color]
   };

package/legacy/SwipeableDrawer/SwipeArea.js

@@ -8,9 +8,7 @@ import styled from '../styles/styled';
 import capitalize from '../utils/capitalize';
 import { isHorizontal } from '../Drawer/Drawer';
 import { jsx as _jsx } from "react/jsx-runtime";
-var SwipeAreaRoot = styled('div', {
-  skipSx: true
-})(function (_ref) {
+var SwipeAreaRoot = styled('div')(function (_ref) {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({

package/legacy/TextField/TextField.js

@@ -197,7 +197,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
     variant: variant,
     ownerState: ownerState
   }, other, {
-    children: [label && /*#__PURE__*/_jsx(InputLabel, _extends({
+    children: [label != null && label !== '' && /*#__PURE__*/_jsx(InputLabel, _extends({
       htmlFor: id,
       id: inputLabelId
     }, InputLabelProps, {

package/legacy/ToggleButton/ToggleButton.js

@@ -196,12 +196,18 @@ process.env.NODE_ENV !== "production" ? ToggleButton.propTypes
   fullWidth: PropTypes.bool,
 
   /**
-   * @ignore
+   * Callback fired when the state changes.
+   *
+   * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+   * @param {any} value of the selected button.
    */
   onChange: PropTypes.func,
 
   /**
-   * @ignore
+   * Callback fired when the button is clicked.
+   *
+   * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+   * @param {any} value of the selected button.
    */
   onClick: PropTypes.func,
 

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.3.0
+/** @license MUI v5.4.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,7 +8,6 @@ import * as colors from './colors';
 export { colors };
 export * from './styles';
 export * from './utils';
-export * from '@mui/base';
 export { default as Accordion } from './Accordion';
 export * from './Accordion';
 export { default as AccordionActions } from './AccordionActions';
@@ -175,6 +174,8 @@ export { default as Popover } from './Popover';
 export * from './Popover';
 export { default as Popper } from './Popper';
 export * from './Popper';
+export { default as Portal } from './Portal';
+export * from './Portal';
 export { default as Radio } from './Radio';
 export * from './Radio';
 export { default as RadioGroup } from './RadioGroup';
@@ -273,4 +274,8 @@ export * from './Zoom'; // createFilterOptions is exported from Autocomplete
 export { default as useAutocomplete } from './useAutocomplete';
 export { default as GlobalStyles } from './GlobalStyles';
 export * from './GlobalStyles';
-export { StyledEngineProvider } from './styles';
+export { StyledEngineProvider } from './styles';
+export { default as unstable_composeClasses } from '@mui/base/composeClasses';
+export { default as generateUtilityClass } from '@mui/base/generateUtilityClass';
+export * from '@mui/base/generateUtilityClass';
+export { default as generateUtilityClasses } from '@mui/base/generateUtilityClasses';

package/legacy/internal/SwitchBase.js

@@ -27,9 +27,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getSwitchBaseUtilityClass, classes);
 };
 
-var SwitchBaseRoot = styled(ButtonBase, {
-  skipSx: true
-})(function (_ref) {
+var SwitchBaseRoot = styled(ButtonBase)(function (_ref) {
   var ownerState = _ref.ownerState;
   return _extends({
     padding: 9,
@@ -40,9 +38,7 @@ var SwitchBaseRoot = styled(ButtonBase, {
     marginRight: ownerState.size === 'small' ? -3 : -12
   });
 });
-var SwitchBaseInput = styled('input', {
-  skipSx: true
-})({
+var SwitchBaseInput = styled('input')({
   cursor: 'inherit',
   position: 'absolute',
   opacity: 0,

package/legacy/styles/makeStyles.js

@@ -1,4 +1,4 @@
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 export default function makeStyles() {
-  throw new Error(process.env.NODE_ENV !== "production" ? "MUI: makeStyles is not longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#material-ui-core-styles for more details." : _formatMuiErrorMessage(14));
+  throw new Error(process.env.NODE_ENV !== "production" ? "MUI: makeStyles is not longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#mui-material-styles for more details." : _formatMuiErrorMessage(14));
 }

package/legacy/styles/withStyles.js

@@ -1,4 +1,4 @@
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 export default function withStyles() {
-  throw new Error(process.env.NODE_ENV !== "production" ? "MUI: withStyles is not longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#material-ui-core-styles for more details." : _formatMuiErrorMessage(15));
+  throw new Error(process.env.NODE_ENV !== "production" ? "MUI: withStyles is not longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#mui-material-styles for more details." : _formatMuiErrorMessage(15));
 }

package/legacy/styles/withTheme.js

@@ -1,4 +1,4 @@
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 export default function withTheme() {
-  throw new Error(process.env.NODE_ENV !== "production" ? "MUI: withTheme is not longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#material-ui-core-styles for more details." : _formatMuiErrorMessage(16));
+  throw new Error(process.env.NODE_ENV !== "production" ? "MUI: withTheme is not longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#mui-material-styles for more details." : _formatMuiErrorMessage(16));
 }

package/legacy/useMediaQuery/useMediaQuery.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import { getThemeProps, useThemeWithoutDefault as useTheme } from '@mui/system';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
@@ -5,38 +6,9 @@ import useEnhancedEffect from '../utils/useEnhancedEffect';
  * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
  */
 
-export default function useMediaQuery(queryInput) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var theme = useTheme(); // Wait for jsdom to support the match media feature.
-  // All the browsers MUI support have this built-in.
-  // This defensive check is here for simplicity.
-  // Most of the time, the match media logic isn't central to people tests.
-
+function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   var supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
 
-  var _getThemeProps = getThemeProps({
-    name: 'MuiUseMediaQuery',
-    props: options,
-    theme: theme
-  }),
-      _getThemeProps$defaul = _getThemeProps.defaultMatches,
-      defaultMatches = _getThemeProps$defaul === void 0 ? false : _getThemeProps$defaul,
-      _getThemeProps$matchM = _getThemeProps.matchMedia,
-      matchMedia = _getThemeProps$matchM === void 0 ? supportMatchMedia ? window.matchMedia : null : _getThemeProps$matchM,
-      _getThemeProps$noSsr = _getThemeProps.noSsr,
-      noSsr = _getThemeProps$noSsr === void 0 ? false : _getThemeProps$noSsr,
-      _getThemeProps$ssrMat = _getThemeProps.ssrMatchMedia,
-      ssrMatchMedia = _getThemeProps$ssrMat === void 0 ? null : _getThemeProps$ssrMat;
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (typeof queryInput === 'function' && theme === null) {
-      console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
-    }
-  }
-
-  var query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
-  query = query.replace(/^@media( ?)/m, '');
-
   var _React$useState = React.useState(function () {
     if (noSsr && supportMatchMedia) {
       return matchMedia(query).matches;
@@ -67,19 +39,102 @@ export default function useMediaQuery(queryInput) {
     var updateMatch = function updateMatch() {
       // Workaround Safari wrong implementation of matchMedia
       // TODO can we remove it?
-      // https://github.com/mui-org/material-ui/pull/17315#issuecomment-528286677
+      // https://github.com/mui/material-ui/pull/17315#issuecomment-528286677
       if (active) {
         setMatch(queryList.matches);
       }
     };
 
-    updateMatch();
+    updateMatch(); // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+
     queryList.addListener(updateMatch);
     return function () {
       active = false;
       queryList.removeListener(updateMatch);
     };
   }, [query, matchMedia, supportMatchMedia]);
+  return match;
+} // eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
+
+
+var maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];
+
+function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
+  var getDefaultSnapshot = React.useCallback(function () {
+    return defaultMatches;
+  }, [defaultMatches]);
+  var getServerSnapshot = React.useMemo(function () {
+    if (ssrMatchMedia !== null) {
+      var _ssrMatchMedia = ssrMatchMedia(query),
+          matches = _ssrMatchMedia.matches;
+
+      return function () {
+        return matches;
+      };
+    }
+
+    return getDefaultSnapshot;
+  }, [getDefaultSnapshot, query, ssrMatchMedia]);
+
+  var _React$useMemo = React.useMemo(function () {
+    if (matchMedia === null) {
+      return [getDefaultSnapshot, function () {
+        return function () {};
+      }];
+    }
+
+    var mediaQueryList = matchMedia(query);
+    return [function () {
+      return mediaQueryList.matches;
+    }, function (notify) {
+      // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+      mediaQueryList.addListener(notify);
+      return function () {
+        mediaQueryList.removeListener(notify);
+      };
+    }];
+  }, [getDefaultSnapshot, matchMedia, query]),
+      _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
+      getSnapshot = _React$useMemo2[0],
+      subscribe = _React$useMemo2[1];
+
+  var match = maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return match;
+}
+
+export default function useMediaQuery(queryInput) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var theme = useTheme(); // Wait for jsdom to support the match media feature.
+  // All the browsers MUI support have this built-in.
+  // This defensive check is here for simplicity.
+  // Most of the time, the match media logic isn't central to people tests.
+
+  var supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
+
+  var _getThemeProps = getThemeProps({
+    name: 'MuiUseMediaQuery',
+    props: options,
+    theme: theme
+  }),
+      _getThemeProps$defaul = _getThemeProps.defaultMatches,
+      defaultMatches = _getThemeProps$defaul === void 0 ? false : _getThemeProps$defaul,
+      _getThemeProps$matchM = _getThemeProps.matchMedia,
+      matchMedia = _getThemeProps$matchM === void 0 ? supportMatchMedia ? window.matchMedia : null : _getThemeProps$matchM,
+      _getThemeProps$ssrMat = _getThemeProps.ssrMatchMedia,
+      ssrMatchMedia = _getThemeProps$ssrMat === void 0 ? null : _getThemeProps$ssrMat,
+      noSsr = _getThemeProps.noSsr;
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof queryInput === 'function' && theme === null) {
+      console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
+    }
+  }
+
+  var query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
+  query = query.replace(/^@media( ?)/m, ''); // TODO: Drop `useMediaQueryOld` and use  `use-sync-external-store` shim in `useMediaQueryNew` once the package is stable
+
+  var useMediaQueryImplementation = maybeReactUseSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
+  var match = useMediaQueryImplementation(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
 
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/modern/Autocomplete/Autocomplete.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
 var _ClearIcon, _ArrowDropDownIcon;
 
-const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "value"];
+const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -398,6 +398,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     PaperComponent = Paper,
     PopperComponent = Popper,
     popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/_jsx(ArrowDropDownIcon, {})),
+    readOnly = false,
     renderGroup: renderGroupProp,
     renderInput,
     renderOption: renderOptionProp,
@@ -431,7 +432,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   } = useAutocomplete(_extends({}, props, {
     componentName: 'Autocomplete'
   }));
-  const hasClearIcon = !disableClearable && !disabled && dirty;
+  const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
 
   const ownerState = _extends({}, props, {
@@ -550,7 +551,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
         },
         inputProps: _extends({
           className: clsx(classes.input),
-          disabled
+          disabled,
+          readOnly
         }, getInputProps())
       })
     })), popupOpen && anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, {
@@ -669,7 +671,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * If `true`, the input's text is cleared on blur if no value is selected.
    *
    * Set to `true` if you want to help the user enter a new value.
-   * Set to `false` if you want to help the user resume his search.
+   * Set to `false` if you want to help the user resume their search.
    * @default !props.freeSolo
    */
   clearOnBlur: PropTypes.bool,
@@ -991,6 +993,12 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    */
   popupIcon: PropTypes.node,
 
+  /**
+   * If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
+   * @default false
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Render the group.
    *

package/modern/AvatarGroup/AvatarGroup.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "max", "spacing", "total", "variant"];
+const _excluded = ["children", "className", "componentsProps", "max", "spacing", "total", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { isFragment } from 'react-is';
@@ -71,6 +71,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const {
     children: childrenProp,
     className,
+    componentsProps = {},
     max = 5,
     spacing = 'medium',
     total,
@@ -111,15 +112,16 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className: clsx(classes.root, className),
     ref: ref
   }, other, {
-    children: [extraAvatars ? /*#__PURE__*/_jsxs(AvatarGroupAvatar, {
+    children: [extraAvatars ? /*#__PURE__*/_jsxs(AvatarGroupAvatar, _extends({
       ownerState: ownerState,
-      className: classes.avatar,
-      style: {
+      variant: variant
+    }, componentsProps.additionalAvatar, {
+      className: clsx(classes.avatar, componentsProps.additionalAvatar?.className),
+      style: _extends({
         marginLeft
-      },
-      variant: variant,
+      }, componentsProps.additionalAvatar?.style),
       children: ["+", extraAvatars]
-    }) : null, children.slice(0, maxAvatars).reverse().map(child => {
+    })) : null, children.slice(0, maxAvatars).reverse().map(child => {
       return /*#__PURE__*/React.cloneElement(child, {
         className: clsx(child.props.className, classes.avatar),
         style: _extends({
@@ -153,6 +155,14 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * The props used for each slot inside the AvatarGroup.
+   * @default {}
+   */
+  componentsProps: PropTypes.shape({
+    additionalAvatar: PropTypes.object
+  }),
+
   /**
    * Max avatars to show before +x.
    * @default 5

package/modern/Badge/Badge.js

@@ -169,7 +169,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     componentsProps = {},
     overlap: overlapProp = 'rectangular',
     color: colorProp = 'default',
-    invisible: invisibleProp,
+    invisible: invisibleProp = false,
     badgeContent: badgeContentProp,
     showZero = false,
     variant: variantProp = 'standard'
@@ -183,7 +183,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   });
   let invisible = invisibleProp;
 
-  if (invisibleProp == null && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
+  if (invisibleProp === false && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
     invisible = true;
   }
 
@@ -301,6 +301,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
 
   /**
    * If `true`, the badge is invisible.
+   * @default false
    */
   invisible: PropTypes.bool,
 

package/modern/Breadcrumbs/BreadcrumbCollapsed.js

@@ -6,9 +6,7 @@ import styled from '../styles/styled';
 import MoreHorizIcon from '../internal/svg-icons/MoreHoriz';
 import ButtonBase from '../ButtonBase';
 import { jsx as _jsx } from "react/jsx-runtime";
-const BreadcrumbCollapsedButton = styled(ButtonBase, {
-  skipSx: true
-})(({
+const BreadcrumbCollapsedButton = styled(ButtonBase)(({
   theme
 }) => _extends({
   display: 'flex',