@mui/material 5.6.1 → 5.6.4

package/internal/switchBaseClasses.d.ts

@@ -1,12 +1,12 @@
-export interface SwitchBaseClasses {
-    root: string;
-    checked: string;
-    disabled: string;
-    input: string;
-    edgeStart: string;
-    edgeEnd: string;
-}
-export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
-export declare function getSwitchBaseUtilityClass(slot: string): string;
-declare const switchBaseClasses: SwitchBaseClasses;
-export default switchBaseClasses;
+export interface SwitchBaseClasses {
+    root: string;
+    checked: string;
+    disabled: string;
+    input: string;
+    edgeStart: string;
+    edgeEnd: string;
+}
+export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
+export declare function getSwitchBaseUtilityClass(slot: string): string;
+declare const switchBaseClasses: SwitchBaseClasses;
+export default switchBaseClasses;

package/legacy/Accordion/Accordion.js

@@ -59,7 +59,7 @@ var AccordionRoot = styled(Paper, {
       height: 1,
       content: '""',
       opacity: 1,
-      backgroundColor: theme.palette.divider,
+      backgroundColor: (theme.vars || theme).palette.divider,
       transition: theme.transitions.create(['opacity', 'background-color'], transition)
     },
     '&:first-of-type': {
@@ -83,7 +83,7 @@ var AccordionRoot = styled(Paper, {
       }
     }
   }), _defineProperty(_ref3, "&.".concat(accordionClasses.disabled), {
-    backgroundColor: theme.palette.action.disabledBackground
+    backgroundColor: (theme.vars || theme).palette.action.disabledBackground
   }), _ref3;
 }, function (_ref4) {
   var theme = _ref4.theme,
@@ -91,12 +91,12 @@ var AccordionRoot = styled(Paper, {
   return _extends({}, !ownerState.square && {
     borderRadius: 0,
     '&:first-of-type': {
-      borderTopLeftRadius: theme.shape.borderRadius,
-      borderTopRightRadius: theme.shape.borderRadius
+      borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+      borderTopRightRadius: (theme.vars || theme).shape.borderRadius
     },
     '&:last-of-type': {
-      borderBottomLeftRadius: theme.shape.borderRadius,
-      borderBottomRightRadius: theme.shape.borderRadius,
+      borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+      borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
       // Fix a rendering issue on Edge
       '@supports (-ms-ime-align: auto)': {
         borderBottomLeftRadius: 0,

package/legacy/AccordionSummary/AccordionSummary.js

@@ -47,9 +47,9 @@ var AccordionSummaryRoot = styled(ButtonBase, {
     padding: theme.spacing(0, 2),
     transition: theme.transitions.create(['min-height', 'background-color'], transition)
   }, _defineProperty(_extends2, "&.".concat(accordionSummaryClasses.focusVisible), {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   }), _defineProperty(_extends2, "&.".concat(accordionSummaryClasses.disabled), {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   }), _defineProperty(_extends2, "&:hover:not(.".concat(accordionSummaryClasses.disabled, ")"), {
     cursor: 'pointer'
   }), _extends2), !ownerState.disableGutters && _defineProperty({}, "&.".concat(accordionSummaryClasses.expanded), {
@@ -87,7 +87,7 @@ var AccordionSummaryExpandIconWrapper = styled('div', {
   var theme = _ref5.theme;
   return _defineProperty({
     display: 'flex',
-    color: theme.palette.action.active,
+    color: (theme.vars || theme).palette.action.active,
     transform: 'rotate(0deg)',
     transition: theme.transitions.create('transform', {
       duration: theme.transitions.duration.shortest

package/legacy/Autocomplete/Autocomplete.js

@@ -844,6 +844,8 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * Used to determine the string value for a given option.
    * It's used to fill the input (and the list box options if `renderOption` is not provided).
    *
+   * If used in free solo mode, it must accept both the type of the options and a string.
+   *
    * @param {T} option
    * @returns {string}
    * @default (option) => option.label ?? option

package/legacy/AvatarGroup/AvatarGroup.js

@@ -37,7 +37,7 @@ var AvatarGroupRoot = styled('div', {
 
   var theme = _ref.theme;
   return _ref2 = {}, _defineProperty(_ref2, "& .".concat(avatarClasses.root), {
-    border: "2px solid ".concat(theme.palette.background.default),
+    border: "2px solid ".concat((theme.vars || theme).palette.background.default),
     boxSizing: 'content-box',
     marginLeft: -8,
     '&:last-child': {
@@ -54,7 +54,7 @@ var AvatarGroupAvatar = styled(Avatar, {
 })(function (_ref3) {
   var theme = _ref3.theme;
   return {
-    border: "2px solid ".concat(theme.palette.background.default),
+    border: "2px solid ".concat((theme.vars || theme).palette.background.default),
     boxSizing: 'content-box',
     marginLeft: -8,
     '&:last-child': {

package/legacy/Badge/Badge.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { usePreviousProps } from '@mui/utils';
+import composeClasses from '@mui/base/composeClasses';
 import BadgeUnstyled from '@mui/base/BadgeUnstyled';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
@@ -15,7 +16,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var RADIUS_STANDARD = 10;
 var RADIUS_DOT = 4;
 
-var extendUtilityClasses = function extendUtilityClasses(ownerState) {
+var useUtilityClasses = function useUtilityClasses(ownerState) {
   var color = ownerState.color,
       anchorOrigin = ownerState.anchorOrigin,
       invisible = ownerState.invisible,
@@ -23,10 +24,11 @@ var extendUtilityClasses = function extendUtilityClasses(ownerState) {
       variant = ownerState.variant,
       _ownerState$classes = ownerState.classes,
       classes = _ownerState$classes === void 0 ? {} : _ownerState$classes;
-  return {
-    root: clsx(classes.root, 'root'),
-    badge: clsx(classes.badge, getBadgeUtilityClass('badge'), getBadgeUtilityClass(variant), "anchorOrigin".concat(capitalize(anchorOrigin.vertical)).concat(capitalize(anchorOrigin.horizontal)), getBadgeUtilityClass("anchorOrigin".concat(capitalize(anchorOrigin.vertical)).concat(capitalize(anchorOrigin.horizontal)).concat(capitalize(overlap))), getBadgeUtilityClass("overlap".concat(capitalize(overlap))), color !== 'default' && [getBadgeUtilityClass("color".concat(capitalize(color))), classes["color".concat(capitalize(color))]], invisible && getBadgeUtilityClass('invisible'))
+  var slots = {
+    root: ['root'],
+    badge: ['badge', variant, invisible && 'invisible', "anchorOrigin".concat(capitalize(anchorOrigin.vertical)).concat(capitalize(anchorOrigin.horizontal)), "anchorOrigin".concat(capitalize(anchorOrigin.vertical)).concat(capitalize(anchorOrigin.horizontal)).concat(capitalize(overlap)), "overlap".concat(capitalize(overlap)), color !== 'default' && "color".concat(capitalize(color))]
   };
+  return composeClasses(slots, getBadgeUtilityClass, classes);
 };
 
 var BadgeRoot = styled('span', {
@@ -76,8 +78,8 @@ var BadgeBadge = styled('span', {
       duration: theme.transitions.duration.enteringScreen
     })
   }, ownerState.color !== 'default' && {
-    backgroundColor: theme.palette[ownerState.color].main,
-    color: theme.palette[ownerState.color].contrastText
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
+    color: (theme.vars || theme).palette[ownerState.color].contrastText
   }, ownerState.variant === 'dot' && {
     borderRadius: RADIUS_DOT,
     height: RADIUS_DOT * 2,
@@ -210,7 +212,7 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     variant: variant
   });
 
-  var classes = extendUtilityClasses(ownerState);
+  var classes = useUtilityClasses(ownerState);
   var displayValue;
 
   if (variant !== 'dot') {

package/legacy/BottomNavigation/BottomNavigation.js

@@ -30,7 +30,7 @@ var BottomNavigationRoot = styled('div', {
     display: 'flex',
     justifyContent: 'center',
     height: 56,
-    backgroundColor: theme.palette.background.paper
+    backgroundColor: (theme.vars || theme).palette.background.paper
   };
 });
 var BottomNavigation = /*#__PURE__*/React.forwardRef(function BottomNavigation(inProps, ref) {

package/legacy/BottomNavigationAction/BottomNavigationAction.js

@@ -38,17 +38,18 @@ var BottomNavigationActionRoot = styled(ButtonBase, {
     transition: theme.transitions.create(['color', 'padding-top'], {
       duration: theme.transitions.duration.short
     }),
-    padding: '6px 12px 8px',
+    padding: '0px 12px',
     minWidth: 80,
     maxWidth: 168,
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     flexDirection: 'column',
     flex: '1'
   }, !ownerState.showLabel && !ownerState.selected && {
-    paddingTop: 16
+    paddingTop: 14
+  }, !ownerState.showLabel && !ownerState.selected && !ownerState.label && {
+    paddingTop: 0
   }, _defineProperty({}, "&.".concat(bottomNavigationActionClasses.selected), {
-    paddingTop: 6,
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   }));
 });
 var BottomNavigationActionLabel = styled('span', {

package/legacy/Box/Box.js

@@ -1,14 +1,35 @@
+import PropTypes from 'prop-types';
 import { createBox } from '@mui/system';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '../className';
 import { createTheme } from '../styles';
 var defaultTheme = createTheme();
-/**
- * @ignore - do not document.
- */
-
 var Box = createBox({
   defaultTheme: defaultTheme,
   defaultClassName: 'MuiBox-root',
   generateClassName: ClassNameGenerator.generate
 });
+process.env.NODE_ENV !== "production" ? Box.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
 export default Box;

package/legacy/CircularProgress/CircularProgress.js

@@ -47,7 +47,7 @@ var CircularProgressRoot = styled('span', {
   }, ownerState.variant === 'determinate' && {
     transition: theme.transitions.create('transform')
   }, ownerState.color !== 'inherit' && {
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   });
 }, function (_ref2) {
   var ownerState = _ref2.ownerState;

package/legacy/Dialog/Dialog.js

@@ -351,6 +351,7 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
 
   /**
    * Callback fired when the backdrop is clicked.
+   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
    */
   onBackdropClick: PropTypes.func,
 

package/legacy/FilledInput/FilledInput.js

@@ -35,7 +35,7 @@ var FilledInputRoot = styled(InputBaseRoot, {
     return [].concat(_toConsumableArray(inputBaseRootOverridesResolver(props, styles)), [!ownerState.disableUnderline && styles.underline]);
   }
 })(function (_ref) {
-  var _extends2, _ref2;
+  var _extends2, _theme$palette, _ref2;
 
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
@@ -64,7 +64,7 @@ var FilledInputRoot = styled(InputBaseRoot, {
     backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)'
   }), _extends2), !ownerState.disableUnderline && (_ref2 = {
     '&:after': {
-      borderBottom: "2px solid ".concat(theme.palette[ownerState.color].main),
+      borderBottom: "2px solid ".concat((_theme$palette = theme.palette[ownerState.color || 'primary']) == null ? void 0 : _theme$palette.main),
       left: 0,
       bottom: 0,
       // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -80,7 +80,9 @@ var FilledInputRoot = styled(InputBaseRoot, {
 
     }
   }, _defineProperty(_ref2, "&.".concat(filledInputClasses.focused, ":after"), {
-    transform: 'scaleX(1)'
+    // translateX(0) is a workaround for Safari transform scale bug
+    // See https://github.com/mui/material-ui/issues/31766
+    transform: 'scaleX(1) translateX(0)'
   }), _defineProperty(_ref2, "&.".concat(filledInputClasses.error, ":after"), {
     borderBottomColor: theme.palette.error.main,
     transform: 'scaleX(1)' // error is always underlined in red

package/legacy/Input/Input.js

@@ -65,7 +65,9 @@ var InputRoot = styled(InputBaseRoot, {
 
     }
   }, _defineProperty(_ref2, "&.".concat(inputClasses.focused, ":after"), {
-    transform: 'scaleX(1)'
+    // translateX(0) is a workaround for Safari transform scale bug
+    // See https://github.com/mui/material-ui/issues/31766
+    transform: 'scaleX(1) translateX(0)'
   }), _defineProperty(_ref2, "&.".concat(inputClasses.error, ":after"), {
     borderBottomColor: theme.palette.error.main,
     transform: 'scaleX(1)' // error is always underlined in red

package/legacy/Modal/Modal.js

@@ -270,6 +270,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * Callback fired when the backdrop is clicked.
+   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
    */
   onBackdropClick: PropTypes.func,
 

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.1
+/** @license MUI v5.6.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/locale/index.js

@@ -636,7 +636,7 @@ export var csCZ = {
         'aria-label': 'Navigace stránkováním',
         getItemAriaLabel: function getItemAriaLabel(type, page, selected) {
           if (type === 'page') {
-            return "".concat(selected ? '' : 'Jít na ').concat(page, " str\xE1nku");
+            return "".concat(selected ? '' : 'Jít na ').concat(page, ". str\xE1nku");
           }
 
           if (type === 'first') {

package/locale/index.d.ts

@@ -1,71 +1,71 @@
-import { ComponentsPropsList } from '../styles/props';
-export interface Localization {
-    components?: {
-        MuiAlert?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
-        };
-        MuiBreadcrumbs?: {
-            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
-        };
-        MuiTablePagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
-        };
-        MuiRating?: {
-            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
-        };
-        MuiAutocomplete?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
-        };
-        MuiPagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
-        };
-    };
-}
-export declare const amET: Localization;
-export declare const arEG: Localization;
-export declare const arSD: Localization;
-export declare const azAZ: Localization;
-export declare const bnBD: Localization;
-export declare const bgBG: Localization;
-export declare const caES: Localization;
-export declare const csCZ: Localization;
-export declare const daDK: Localization;
-export declare const deDE: Localization;
-export declare const elGR: Localization;
-export declare const enUS: Localization;
-export declare const esES: Localization;
-export declare const etEE: Localization;
-export declare const faIR: Localization;
-export declare const fiFI: Localization;
-export declare const frFR: Localization;
-export declare const heIL: Localization;
-export declare const hiIN: Localization;
-export declare const hrHR: Localization;
-export declare const huHU: Localization;
-export declare const hyAM: Localization;
-export declare const idID: Localization;
-export declare const isIS: Localization;
-export declare const itIT: Localization;
-export declare const jaJP: Localization;
-export declare const khKH: Localization;
-export declare const koKR: Localization;
-export declare const kzKZ: Localization;
-export declare const mkMK: Localization;
-export declare const nbNO: Localization;
-export declare const nlNL: Localization;
-export declare const plPL: Localization;
-export declare const ptBR: Localization;
-export declare const ptPT: Localization;
-export declare const roRO: Localization;
-export declare const srRS: Localization;
-export declare const ruRU: Localization;
-export declare const siLK: Localization;
-export declare const skSK: Localization;
-export declare const svSE: Localization;
-export declare const thTH: Localization;
-export declare const trTR: Localization;
-export declare const ukUA: Localization;
-export declare const viVN: Localization;
-export declare const zhCN: Localization;
-export declare const zhHK: Localization;
-export declare const zhTW: Localization;
+import { ComponentsPropsList } from '../styles/props';
+export interface Localization {
+    components?: {
+        MuiAlert?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
+        };
+        MuiBreadcrumbs?: {
+            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
+        };
+        MuiTablePagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
+        };
+        MuiRating?: {
+            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
+        };
+        MuiAutocomplete?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
+        };
+        MuiPagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
+        };
+    };
+}
+export declare const amET: Localization;
+export declare const arEG: Localization;
+export declare const arSD: Localization;
+export declare const azAZ: Localization;
+export declare const bnBD: Localization;
+export declare const bgBG: Localization;
+export declare const caES: Localization;
+export declare const csCZ: Localization;
+export declare const daDK: Localization;
+export declare const deDE: Localization;
+export declare const elGR: Localization;
+export declare const enUS: Localization;
+export declare const esES: Localization;
+export declare const etEE: Localization;
+export declare const faIR: Localization;
+export declare const fiFI: Localization;
+export declare const frFR: Localization;
+export declare const heIL: Localization;
+export declare const hiIN: Localization;
+export declare const hrHR: Localization;
+export declare const huHU: Localization;
+export declare const hyAM: Localization;
+export declare const idID: Localization;
+export declare const isIS: Localization;
+export declare const itIT: Localization;
+export declare const jaJP: Localization;
+export declare const khKH: Localization;
+export declare const koKR: Localization;
+export declare const kzKZ: Localization;
+export declare const mkMK: Localization;
+export declare const nbNO: Localization;
+export declare const nlNL: Localization;
+export declare const plPL: Localization;
+export declare const ptBR: Localization;
+export declare const ptPT: Localization;
+export declare const roRO: Localization;
+export declare const srRS: Localization;
+export declare const ruRU: Localization;
+export declare const siLK: Localization;
+export declare const skSK: Localization;
+export declare const svSE: Localization;
+export declare const thTH: Localization;
+export declare const trTR: Localization;
+export declare const ukUA: Localization;
+export declare const viVN: Localization;
+export declare const zhCN: Localization;
+export declare const zhHK: Localization;
+export declare const zhTW: Localization;

package/locale/index.js

@@ -619,7 +619,7 @@ export const csCZ = {
         'aria-label': 'Navigace stránkováním',
         getItemAriaLabel: (type, page, selected) => {
           if (type === 'page') {
-            return `${selected ? '' : 'Jít na '}${page} stránku`;
+            return `${selected ? '' : 'Jít na '}${page}. stránku`;
           }
 
           if (type === 'first') {

package/modern/Accordion/Accordion.js

@@ -62,7 +62,7 @@ const AccordionRoot = styled(Paper, {
       height: 1,
       content: '""',
       opacity: 1,
-      backgroundColor: theme.palette.divider,
+      backgroundColor: (theme.vars || theme).palette.divider,
       transition: theme.transitions.create(['opacity', 'background-color'], transition)
     },
     '&:first-of-type': {
@@ -87,7 +87,7 @@ const AccordionRoot = styled(Paper, {
       }
     },
     [`&.${accordionClasses.disabled}`]: {
-      backgroundColor: theme.palette.action.disabledBackground
+      backgroundColor: (theme.vars || theme).palette.action.disabledBackground
     }
   };
 }, ({
@@ -96,12 +96,12 @@ const AccordionRoot = styled(Paper, {
 }) => _extends({}, !ownerState.square && {
   borderRadius: 0,
   '&:first-of-type': {
-    borderTopLeftRadius: theme.shape.borderRadius,
-    borderTopRightRadius: theme.shape.borderRadius
+    borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+    borderTopRightRadius: (theme.vars || theme).shape.borderRadius
   },
   '&:last-of-type': {
-    borderBottomLeftRadius: theme.shape.borderRadius,
-    borderBottomRightRadius: theme.shape.borderRadius,
+    borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+    borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
     // Fix a rendering issue on Edge
     '@supports (-ms-ime-align: auto)': {
       borderBottomLeftRadius: 0,

package/modern/AccordionSummary/AccordionSummary.js

@@ -46,10 +46,10 @@ const AccordionSummaryRoot = styled(ButtonBase, {
     padding: theme.spacing(0, 2),
     transition: theme.transitions.create(['min-height', 'background-color'], transition),
     [`&.${accordionSummaryClasses.focusVisible}`]: {
-      backgroundColor: theme.palette.action.focus
+      backgroundColor: (theme.vars || theme).palette.action.focus
     },
     [`&.${accordionSummaryClasses.disabled}`]: {
-      opacity: theme.palette.action.disabledOpacity
+      opacity: (theme.vars || theme).palette.action.disabledOpacity
     },
     [`&:hover:not(.${accordionSummaryClasses.disabled})`]: {
       cursor: 'pointer'
@@ -87,7 +87,7 @@ const AccordionSummaryExpandIconWrapper = styled('div', {
   theme
 }) => ({
   display: 'flex',
-  color: theme.palette.action.active,
+  color: (theme.vars || theme).palette.action.active,
   transform: 'rotate(0deg)',
   transition: theme.transitions.create('transform', {
     duration: theme.transitions.duration.shortest

package/modern/Autocomplete/Autocomplete.js

@@ -809,6 +809,8 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * Used to determine the string value for a given option.
    * It's used to fill the input (and the list box options if `renderOption` is not provided).
    *
+   * If used in free solo mode, it must accept both the type of the options and a string.
+   *
    * @param {T} option
    * @returns {string}
    * @default (option) => option.label ?? option

package/modern/AvatarGroup/AvatarGroup.js

@@ -38,7 +38,7 @@ const AvatarGroupRoot = styled('div', {
   theme
 }) => ({
   [`& .${avatarClasses.root}`]: {
-    border: `2px solid ${theme.palette.background.default}`,
+    border: `2px solid ${(theme.vars || theme).palette.background.default}`,
     boxSizing: 'content-box',
     marginLeft: -8,
     '&:last-child': {
@@ -55,7 +55,7 @@ const AvatarGroupAvatar = styled(Avatar, {
 })(({
   theme
 }) => ({
-  border: `2px solid ${theme.palette.background.default}`,
+  border: `2px solid ${(theme.vars || theme).palette.background.default}`,
   boxSizing: 'content-box',
   marginLeft: -8,
   '&:last-child': {

package/modern/Badge/Badge.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { usePreviousProps } from '@mui/utils';
+import composeClasses from '@mui/base/composeClasses';
 import BadgeUnstyled from '@mui/base/BadgeUnstyled';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
@@ -15,7 +16,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
 
-const extendUtilityClasses = ownerState => {
+const useUtilityClasses = ownerState => {
   const {
     color,
     anchorOrigin,
@@ -24,10 +25,11 @@ const extendUtilityClasses = ownerState => {
     variant,
     classes = {}
   } = ownerState;
-  return {
-    root: clsx(classes.root, 'root'),
-    badge: clsx(classes.badge, getBadgeUtilityClass('badge'), getBadgeUtilityClass(variant), `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, getBadgeUtilityClass(`anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`), getBadgeUtilityClass(`overlap${capitalize(overlap)}`), color !== 'default' && [getBadgeUtilityClass(`color${capitalize(color)}`), classes[`color${capitalize(color)}`]], invisible && getBadgeUtilityClass('invisible'))
+  const slots = {
+    root: ['root'],
+    badge: ['badge', variant, invisible && 'invisible', `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`, `overlap${capitalize(overlap)}`, color !== 'default' && `color${capitalize(color)}`]
   };
+  return composeClasses(slots, getBadgeUtilityClass, classes);
 };
 
 const BadgeRoot = styled('span', {
@@ -77,8 +79,8 @@ const BadgeBadge = styled('span', {
     duration: theme.transitions.duration.enteringScreen
   })
 }, ownerState.color !== 'default' && {
-  backgroundColor: theme.palette[ownerState.color].main,
-  color: theme.palette[ownerState.color].contrastText
+  backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
+  color: (theme.vars || theme).palette[ownerState.color].contrastText
 }, ownerState.variant === 'dot' && {
   borderRadius: RADIUS_DOT,
   height: RADIUS_DOT * 2,
@@ -206,7 +208,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     variant
   });
 
-  const classes = extendUtilityClasses(ownerState);
+  const classes = useUtilityClasses(ownerState);
   let displayValue;
 
   if (variant !== 'dot') {

package/modern/BottomNavigation/BottomNavigation.js

@@ -31,7 +31,7 @@ const BottomNavigationRoot = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   height: 56,
-  backgroundColor: theme.palette.background.paper
+  backgroundColor: (theme.vars || theme).palette.background.paper
 }));
 const BottomNavigation = /*#__PURE__*/React.forwardRef(function BottomNavigation(inProps, ref) {
   const props = useThemeProps({