@mui/material 5.15.18 → 5.15.20

package/AlertTitle/AlertTitle.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps, Theme } from '..';
+import { Theme, TypographyProps } from '..';
 import { AlertTitleClasses } from './alertTitleClasses';
 
-export interface AlertTitleProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+export interface AlertTitleProps extends TypographyProps<'div'> {
   /**
    * The content of the component.
    */

package/Autocomplete/Autocomplete.js

@@ -4,7 +4,9 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 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", "getOptionKey", "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", "slotProps", "value"],
-  _excluded2 = ["ref"];
+  _excluded2 = ["ref"],
+  _excluded3 = ["key"],
+  _excluded4 = ["key"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -30,7 +32,6 @@ 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";
 const useThemeProps = createUseThemeProps('MuiAutocomplete');
 const useUtilityClasses = ownerState => {
   const {
@@ -91,6 +92,15 @@ const AutocompleteRoot = styled('div', {
     }, styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
   }
 })({
+  [`&.${autocompleteClasses.focused} .${autocompleteClasses.clearIndicator}`]: {
+    visibility: 'visible'
+  },
+  /* Avoid double tap issue on iOS */
+  '@media (pointer: fine)': {
+    [`&:hover .${autocompleteClasses.clearIndicator}`]: {
+      visibility: 'visible'
+    }
+  },
   [`& .${autocompleteClasses.tag}`]: {
     margin: 3,
     maxWidth: 'calc(100% - 6px)'
@@ -107,23 +117,6 @@ const AutocompleteRoot = styled('div', {
       minWidth: 30
     }
   },
-  [`&.${autocompleteClasses.focused}`]: {
-    [`& .${autocompleteClasses.clearIndicator}`]: {
-      visibility: 'visible'
-    },
-    [`& .${autocompleteClasses.input}`]: {
-      minWidth: 0
-    }
-  },
-  /* Avoid double tap issue on iOS */
-  '@media (pointer: fine)': {
-    [`&:hover .${autocompleteClasses.clearIndicator}`]: {
-      visibility: 'visible'
-    },
-    [`&:hover .${autocompleteClasses.input}`]: {
-      minWidth: 0
-    }
-  },
   [`& .${inputClasses.root}`]: {
     paddingBottom: 1,
     '& .MuiInput-input': {
@@ -541,12 +534,19 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     if (renderTags) {
       startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
     } else {
-      startAdornment = value.map((option, index) => /*#__PURE__*/_jsx(Chip, _extends({
-        label: getOptionLabel(option),
-        size: size
-      }, getCustomizedTagProps({
-        index
-      }), ChipProps)));
+      startAdornment = value.map((option, index) => {
+        const _getCustomizedTagProp = getCustomizedTagProps({
+            index
+          }),
+          {
+            key
+          } = _getCustomizedTagProp,
+          customTagProps = _objectWithoutPropertiesLoose(_getCustomizedTagProp, _excluded3);
+        return /*#__PURE__*/_jsx(Chip, _extends({
+          label: getOptionLabel(option),
+          size: size
+        }, customTagProps, ChipProps), key);
+      });
     }
   }
   if (limitTags > -1 && Array.isArray(startAdornment)) {
@@ -574,9 +574,13 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const renderGroup = renderGroupProp || defaultRenderGroup;
   const defaultRenderOption = (props2, option) => {
     // Need to clearly apply key because of https://github.com/vercel/next.js/issues/55642
-    return /*#__PURE__*/_createElement("li", _extends({}, props2, {
-      key: props2.key
-    }), getOptionLabel(option));
+    const {
+        key
+      } = props2,
+      otherProps = _objectWithoutPropertiesLoose(props2, _excluded4);
+    return /*#__PURE__*/_jsx("li", _extends({}, otherProps, {
+      children: getOptionLabel(option)
+    }), key);
   };
   const renderOption = renderOptionProp || defaultRenderOption;
   const renderListOption = (option, index) => {

package/CHANGELOG.md

@@ -1,5 +1,85 @@
 # [Versions](https://mui.com/versions/)
 
+## v5.15.20
+
+<!-- generated comparing v5.15.19..master -->
+
+_Jun 12, 2024_
+
+A big thanks to the 9 contributors who made this release possible.
+
+### `@mui/material@5.15.20`
+
+- &#8203;<!-- 17 -->[Autocomplete] Shouldn't resize when hovering (@ZeeshanTamboli) (#42535) @ZeeshanTamboli
+- &#8203;<!-- 07 -->[Tab] Fix applying `iconWrapper` styles from theme and update its description (@sai6855) (#42570) @sai6855
+
+### `@mui/utils@5.15.15`
+
+- &#8203;<!-- 06 -->Allow passing `NaN` as `defaultValue` to `useControlled` (@iammminzzy) (#42571) @iammminzzy
+- &#8203;<!-- 17 -->Fix GitHub-reported prototype pollution vulnerability in `deepmerge` (#41652) (#42608) @DiegoAndai
+
+### Docs
+
+- &#8203;<!-- 16 -->[docs] Add Pigment CSS and Base UI logos SVGs (#42513) @danilo-leal
+- &#8203;<!-- 15 -->[docs] Update twitter.com to x.com @oliviertassinari
+- &#8203;<!-- 14 -->[docs] Simplify Example projects page @oliviertassinari
+- &#8203;<!-- 13 -->[material-ui] Add docs for complementary stepper components (@anle9650) (#42613) @anle9650
+- &#8203;<!-- 12 -->[docs] Add changelog section to the design kits page (@danilo-leal) (#42463) @danilo-leal
+- &#8203;<!-- 11 -->[material-ui] Fix sentence in the All components page (@danilo-leal) (#42462) @danilo-leal
+- &#8203;<!-- 10 -->[material-ui] Update Figma design kit doc redirect link (@danilo-leal) (#42456) @danilo-leal
+- &#8203;<!-- 09 -->[system] Add "dynamic values" section to sx prop page (@aarongarciah) (#42453) @aarongarciah
+
+### Core
+
+- &#8203;<!-- 18 -->[website] Move the `React Engineer - X` role to future roles (#42532) @DanailH
+- &#8203;<!-- 08 -->[examples] Remove Pigment CSS examples (#42538) @sai6855
+- &#8203;<!-- 05 -->[website] Close Developer Advocate / Content Engineer role @oliviertassinari
+- &#8203;<!-- 04 -->[website] Update DoiT description and link in Sponsors section (@erezstmn-doit) (#42511) @erezstmn-doit
+- &#8203;<!-- 03 -->[website] Clean up the docs-infra job ad (@danilo-leal) (#42509) @danilo-leal
+- &#8203;<!-- 02 -->[website] Open the Docs-infra engineer role (@danilo-leal) (#42496) @danilo-leal
+- &#8203;<!-- 01 -->[website] Fix locationCountry in about page @oliviertassinari
+
+All contributors of this release in alphabetical order: @aarongarciah, @anle9650, @DanailH, @danilo-leal, @erezstmn-doit, @iammminzzy, @oliviertassinari, @sai6855, @ZeeshanTamboli
+
+## v5.15.19
+
+<!-- generated comparing v5.15.18..master -->
+
+_May 29, 2024_
+
+A big thanks to the 12 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.15.19`
+
+- &#8203;<!-- 19 -->[AlertTitle] Enable extending Typography props (@lucasgmelo) (#42334) @github-actions[bot]
+- &#8203;<!-- 06 -->[responsiveFontSizes] Handled undefined variants (@brijeshb42) (#42419) @github-actions[bot]
+- &#8203;<!-- 05 -->[Slider] Fix wrong CSS value (@mnajdova) (#42373) @github-actions[bot]
+
+### Docs
+
+- &#8203;<!-- 13 -->Link to pnpm installation docs (#42420) @aarongarciah
+- &#8203;<!-- 12 -->Remove LocalMonero (@oliviertassinari) (#42315) @github-actions[bot]
+- &#8203;<!-- 10 -->[material-ui] Fix typo in style interoperability with Tailwind CSS docs (@ZeeshanTamboli) (#42312) @github-actions[bot]
+- &#8203;<!-- 09 -->[material-ui][Pagination] Clarify pagination `page` prop API (@Mandar-Pandya) (#42265) @github-actions[bot]
+- &#8203;<!-- 08 -->[material-ui][Tabs] Improve the Basic Tabs demo (@MatheusEli) (#42426) @github-actions[bot]
+- &#8203;<!-- 07 -->[pigment-css] Fix duplication of content (#42410) @oliviertassinari
+
+### Core
+
+- &#8203;<!-- 18 -->[blog] Add the "Product" tag to the Pigment CSS post (@danilo-leal) (#42366) @github-actions[bot]
+- &#8203;<!-- 17 -->[blog] Update blog post OG image (@danilo-leal) (#42306) @github-actions[bot]
+- &#8203;<!-- 16 -->[blog] Update Pigment CSS post (@danilo-leal) (#42267) @github-actions[bot]
+- &#8203;<!-- 15 -->[core] Fix React 18.3 warnings about spreading keys in the Material UI `Autocomplete` component (#42099) (#42241) @DiegoAndai
+- &#8203;<!-- 14 -->[core] Fix a few more key spread issues (@oliviertassinari) (#42318) @github-actions[bot]
+- &#8203;<!-- 11 -->[docs-infra] Allow JSDoc tags (#42327) @aarongarciah
+- &#8203;<!-- 04 -->[website] Add Nikita to the about page (@nikitaa24) (#42421) @github-actions[bot]
+- &#8203;<!-- 03 -->[website] Fix hero spacing changes applying at the wrong breakpoint (@KenanYusuf) (#42357) @github-actions[bot]
+- &#8203;<!-- 02 -->[website] Adds Kenan Yusuf to about page (@KenanYusuf) (#42330) @github-actions[bot]
+- &#8203;<!-- 01 -->[website] Improve about page @oliviertassinari
+
+All contributors of this release in alphabetical order: @aarongarciah, @brijeshb42, @danilo-leal, @DiegoAndai, @KenanYusuf, @lucasgmelo, @Mandar-Pandya, @MatheusEli, @mnajdova, @nikitaa24, @oliviertassinari, @ZeeshanTamboli
+
 ## v5.15.18
 
 <!-- generated comparing v5.15.17..master -->
@@ -8337,7 +8417,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som
 
 - &#8203;<!-- 27 -->[core] Rename mui/core to mui/base (#29585) @michaldudak
 
-  Based on the results of the [poll](https://twitter.com/michaldudak/status/1452630484706635779) and our internal discussions, we decided to rename the `@mui/core` package to `@mui/base`. The main rationale for this is the fact that we use the term "Core" to refer to the core components product family, the one that includes Material Design components, unstyled components, System utilities, etc. Therefore, @mui/core was effectively a subset of MUI Core. This was confusing.
+  Based on the results of the [poll](https://x.com/michaldudak/status/1452630484706635779) and our internal discussions, we decided to rename the `@mui/core` package to `@mui/base`. The main rationale for this is the fact that we use the term "Core" to refer to the core components product family, the one that includes Material Design components, unstyled components, System utilities, etc. Therefore, @mui/core was effectively a subset of MUI Core. This was confusing.
 
   The new name better reflects the purpose of the package: it contains unstyled components, hooks, and utilities that serve as a **base** to build on.
 
@@ -12754,7 +12834,7 @@ A big thanks to the 34 contributors who made this release possible. Here are som
   ```
 
 - [Autocomplete] Remove `debug` in favor of `open` and dev tools (#23377) @eps1lon
-  There are a couple of simpler alternatives: `open={true}`, Chrome devtools ["Emulate focused"](https://twitter.com/sulco/status/1305841873945272321), or React devtools props.
+  There are a couple of simpler alternatives: `open={true}`, Chrome devtools ["Emulate focused"](https://x.com/sulco/status/1305841873945272321), or React devtools props.
 
 #### Changes
 

package/Hidden/Hidden.d.ts

@@ -90,6 +90,8 @@ export interface HiddenProps {
  * API:
  *
  * - [Hidden API](https://mui.com/material-ui/api/hidden/)
+ *
+ * @deprecated The Hidden component was deprecated in Material UI v5. To learn more, see [the Hidden section](/material-ui/migration/v5-component-changes/#hidden) of the migration docs.
  */
 declare const Hidden: React.JSXElementConstructor<HiddenProps>;
 

package/Hidden/Hidden.js

@@ -10,6 +10,8 @@ import HiddenCss from './HiddenCss';
 
 /**
  * Responsively hides children based on the selected implementation.
+ *
+ * @deprecated The Hidden component was deprecated in Material UI v5. To learn more, see [the Hidden section](/material-ui/migration/v5-component-changes/#hidden) of the migration docs.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 function Hidden(props) {

package/Pagination/Pagination.js

@@ -193,7 +193,7 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes /* remove-proptypes
    */
   onChange: PropTypes.func,
   /**
-   * The current page.
+   * The current page. Unlike `TablePagination`, which starts numbering from `0`, this pagination starts from `1`.
    */
   page: integerPropType,
   /**

package/Slider/Slider.js

@@ -337,7 +337,7 @@ export const SliderThumb = styled('span', {
           }
         }),
         [`&.${sliderClasses.active}`]: _extends({}, theme.vars ? {
-          boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`
+          boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
         } : {
           boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[color].main, 0.16)}`
         })

package/Tab/Tab.js

@@ -38,7 +38,9 @@ const TabRoot = styled(ButtonBase, {
     const {
       ownerState
     } = props;
-    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${capitalize(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped];
+    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${capitalize(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped, {
+      [`& .${tabClasses.iconWrapper}`]: styles.iconWrapper
+    }];
   }
 })(({
   theme,

package/Tab/tabClasses.d.ts

@@ -17,7 +17,7 @@ export interface TabClasses {
     fullWidth: string;
     /** Styles applied to the root element if `wrapped={true}`. */
     wrapped: string;
-    /** Styles applied to the wrapper element of `icon` if `icon` is provided. */
+    /** Styles applied to the `icon` HTML element if both `icon` and `label` are provided. */
     iconWrapper: string;
 }
 export type TabClassKey = keyof TabClasses;

package/index.js

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

package/legacy/Autocomplete/Autocomplete.js

@@ -29,7 +29,6 @@ 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,
@@ -73,7 +72,11 @@ 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];
   }
-})((_styled = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_styled, "& .".concat(autocompleteClasses.tag), {
+})((_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({}, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
@@ -83,14 +86,6 @@ var AutocompleteRoot = styled('div', {
 }), "& .".concat(autocompleteClasses.input), {
   width: 0,
   minWidth: 30
-})), "&.".concat(autocompleteClasses.focused), _defineProperty(_defineProperty({}, "& .".concat(autocompleteClasses.clearIndicator), {
-  visibility: 'visible'
-}), "& .".concat(autocompleteClasses.input), {
-  minWidth: 0
-})), '@media (pointer: fine)', _defineProperty(_defineProperty({}, "&:hover .".concat(autocompleteClasses.clearIndicator), {
-  visibility: 'visible'
-}), "&:hover .".concat(autocompleteClasses.input), {
-  minWidth: 0
 })), "& .".concat(inputClasses.root), {
   paddingBottom: 1,
   '& .MuiInput-input': {
@@ -536,12 +531,15 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
       startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
     } else {
       startAdornment = value.map(function (option, index) {
+        var _getCustomizedTagProp = getCustomizedTagProps({
+            index: index
+          }),
+          key = _getCustomizedTagProp.key,
+          customTagProps = _objectWithoutProperties(_getCustomizedTagProp, ["key"]);
         return /*#__PURE__*/_jsx(Chip, _extends({
           label: getOptionLabel(option),
           size: size
-        }, getCustomizedTagProps({
-          index: index
-        }), ChipProps));
+        }, customTagProps, ChipProps), key);
       });
     }
   }
@@ -572,9 +570,11 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
   var renderGroup = renderGroupProp || defaultRenderGroup;
   var defaultRenderOption = function defaultRenderOption(props2, option) {
     // Need to clearly apply key because of https://github.com/vercel/next.js/issues/55642
-    return /*#__PURE__*/_createElement("li", _extends({}, props2, {
-      key: props2.key
-    }), getOptionLabel(option));
+    var key = props2.key,
+      otherProps = _objectWithoutProperties(props2, ["key"]);
+    return /*#__PURE__*/_jsx("li", _extends({}, otherProps, {
+      children: getOptionLabel(option)
+    }), key);
   };
   var renderOption = renderOptionProp || defaultRenderOption;
   var renderListOption = function renderListOption(option, index) {

package/legacy/Hidden/Hidden.js

@@ -9,6 +9,8 @@ import HiddenCss from './HiddenCss';
 
 /**
  * Responsively hides children based on the selected implementation.
+ *
+ * @deprecated The Hidden component was deprecated in Material UI v5. To learn more, see [the Hidden section](/material-ui/migration/v5-component-changes/#hidden) of the migration docs.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 function Hidden(props) {

package/legacy/Pagination/Pagination.js

@@ -208,7 +208,7 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes /* remove-proptypes
    */
   onChange: PropTypes.func,
   /**
-   * The current page.
+   * The current page. Unlike `TablePagination`, which starts numbering from `0`, this pagination starts from `1`.
    */
   page: integerPropType,
   /**

package/legacy/Slider/Slider.js

@@ -332,7 +332,7 @@ export var SliderThumb = styled('span', {
           boxShadow: 'none'
         }
       })), "&.".concat(sliderClasses.active), _extends({}, theme.vars ? {
-        boxShadow: "0px 0px 0px 14px rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.16)}")
+        boxShadow: "0px 0px 0px 14px rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.16)")
       } : {
         boxShadow: "0px 0px 0px 14px ".concat(alpha(theme.palette[color].main, 0.16))
       }))

package/legacy/Tab/Tab.js

@@ -1,8 +1,8 @@
 'use client';
 
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -34,11 +34,11 @@ var TabRoot = styled(ButtonBase, {
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     var ownerState = props.ownerState;
-    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles["textColor".concat(capitalize(ownerState.textColor))], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped];
+    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles["textColor".concat(capitalize(ownerState.textColor))], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped, _defineProperty({}, "& .".concat(tabClasses.iconWrapper), styles.iconWrapper)];
   }
-})(function (_ref) {
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
+})(function (_ref2) {
+  var theme = _ref2.theme,
+    ownerState = _ref2.ownerState;
   return _extends({}, theme.typography.button, {
     maxWidth: 360,
     minWidth: 90,

package/legacy/index.js

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

package/legacy/styles/responsiveFontSizes.js

@@ -23,6 +23,9 @@ export default function responsiveFontSizes(themeInput) {
   });
   variants.forEach(function (variant) {
     var style = typography[variant];
+    if (!style) {
+      return;
+    }
     var remFontSize = parseFloat(convert(style.fontSize, 'rem'));
     if (remFontSize <= 1) {
       return;

package/modern/Autocomplete/Autocomplete.js

@@ -4,7 +4,9 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 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", "getOptionKey", "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", "slotProps", "value"],
-  _excluded2 = ["ref"];
+  _excluded2 = ["ref"],
+  _excluded3 = ["key"],
+  _excluded4 = ["key"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -30,7 +32,6 @@ 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";
 const useThemeProps = createUseThemeProps('MuiAutocomplete');
 const useUtilityClasses = ownerState => {
   const {
@@ -91,6 +92,15 @@ const AutocompleteRoot = styled('div', {
     }, styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
   }
 })({
+  [`&.${autocompleteClasses.focused} .${autocompleteClasses.clearIndicator}`]: {
+    visibility: 'visible'
+  },
+  /* Avoid double tap issue on iOS */
+  '@media (pointer: fine)': {
+    [`&:hover .${autocompleteClasses.clearIndicator}`]: {
+      visibility: 'visible'
+    }
+  },
   [`& .${autocompleteClasses.tag}`]: {
     margin: 3,
     maxWidth: 'calc(100% - 6px)'
@@ -107,23 +117,6 @@ const AutocompleteRoot = styled('div', {
       minWidth: 30
     }
   },
-  [`&.${autocompleteClasses.focused}`]: {
-    [`& .${autocompleteClasses.clearIndicator}`]: {
-      visibility: 'visible'
-    },
-    [`& .${autocompleteClasses.input}`]: {
-      minWidth: 0
-    }
-  },
-  /* Avoid double tap issue on iOS */
-  '@media (pointer: fine)': {
-    [`&:hover .${autocompleteClasses.clearIndicator}`]: {
-      visibility: 'visible'
-    },
-    [`&:hover .${autocompleteClasses.input}`]: {
-      minWidth: 0
-    }
-  },
   [`& .${inputClasses.root}`]: {
     paddingBottom: 1,
     '& .MuiInput-input': {
@@ -537,12 +530,19 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     if (renderTags) {
       startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
     } else {
-      startAdornment = value.map((option, index) => /*#__PURE__*/_jsx(Chip, _extends({
-        label: getOptionLabel(option),
-        size: size
-      }, getCustomizedTagProps({
-        index
-      }), ChipProps)));
+      startAdornment = value.map((option, index) => {
+        const _getCustomizedTagProp = getCustomizedTagProps({
+            index
+          }),
+          {
+            key
+          } = _getCustomizedTagProp,
+          customTagProps = _objectWithoutPropertiesLoose(_getCustomizedTagProp, _excluded3);
+        return /*#__PURE__*/_jsx(Chip, _extends({
+          label: getOptionLabel(option),
+          size: size
+        }, customTagProps, ChipProps), key);
+      });
     }
   }
   if (limitTags > -1 && Array.isArray(startAdornment)) {
@@ -570,9 +570,13 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const renderGroup = renderGroupProp || defaultRenderGroup;
   const defaultRenderOption = (props2, option) => {
     // Need to clearly apply key because of https://github.com/vercel/next.js/issues/55642
-    return /*#__PURE__*/_createElement("li", _extends({}, props2, {
-      key: props2.key
-    }), getOptionLabel(option));
+    const {
+        key
+      } = props2,
+      otherProps = _objectWithoutPropertiesLoose(props2, _excluded4);
+    return /*#__PURE__*/_jsx("li", _extends({}, otherProps, {
+      children: getOptionLabel(option)
+    }), key);
   };
   const renderOption = renderOptionProp || defaultRenderOption;
   const renderListOption = (option, index) => {

package/modern/Hidden/Hidden.js

@@ -10,6 +10,8 @@ import HiddenCss from './HiddenCss';
 
 /**
  * Responsively hides children based on the selected implementation.
+ *
+ * @deprecated The Hidden component was deprecated in Material UI v5. To learn more, see [the Hidden section](/material-ui/migration/v5-component-changes/#hidden) of the migration docs.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 function Hidden(props) {

package/modern/Pagination/Pagination.js

@@ -193,7 +193,7 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes /* remove-proptypes
    */
   onChange: PropTypes.func,
   /**
-   * The current page.
+   * The current page. Unlike `TablePagination`, which starts numbering from `0`, this pagination starts from `1`.
    */
   page: integerPropType,
   /**

package/modern/Slider/Slider.js

@@ -322,7 +322,7 @@ export const SliderThumb = styled('span', {
         }
       }),
       [`&.${sliderClasses.active}`]: _extends({}, theme.vars ? {
-        boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`
+        boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
       } : {
         boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[color].main, 0.16)}`
       })

package/modern/Tab/Tab.js

@@ -38,7 +38,9 @@ const TabRoot = styled(ButtonBase, {
     const {
       ownerState
     } = props;
-    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${capitalize(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped];
+    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${capitalize(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped, {
+      [`& .${tabClasses.iconWrapper}`]: styles.iconWrapper
+    }];
   }
 })(({
   theme,

package/modern/index.js

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

package/modern/styles/responsiveFontSizes.js

@@ -18,6 +18,9 @@ export default function responsiveFontSizes(themeInput, options = {}) {
   const breakpointValues = breakpoints.map(x => theme.breakpoints.values[x]);
   variants.forEach(variant => {
     const style = typography[variant];
+    if (!style) {
+      return;
+    }
     const remFontSize = parseFloat(convert(style.fontSize, 'rem'));
     if (remFontSize <= 1) {
       return;