@mui/material 5.4.2 → 5.5.0

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/AvatarGroup/AvatarGroup.js

@@ -125,11 +125,13 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
         marginLeft: marginLeft
       }, (_componentsProps$addi2 = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi2.style),
       children: ["+", extraAvatars]
-    })) : null, children.slice(0, maxAvatars).reverse().map(function (child) {
+    })) : null, children.slice(0, maxAvatars).reverse().map(function (child, index) {
       return /*#__PURE__*/React.cloneElement(child, {
         className: clsx(child.props.className, classes.avatar),
         style: _extends({
-          marginLeft: marginLeft
+          // Consistent with "&:last-child" styling for the default spacing,
+          // we do not apply custom marginLeft spacing on the last child
+          marginLeft: index === maxAvatars - 1 ? undefined : marginLeft
         }, child.props.style),
         variant: child.props.variant || variant
       });

package/legacy/Box/Box.js

@@ -1,5 +1,5 @@
 import { createBox } from '@mui/system';
-import { unstable_ClassNameGenerator as ClassNameGenerator } from '../utils';
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '../className';
 import { createTheme } from '../styles';
 var defaultTheme = createTheme();
 /**

package/legacy/ButtonBase/ButtonBase.js

@@ -547,7 +547,7 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes
   TouchRippleProps: PropTypes.object,
 
   /**
-   * A ref that points to the `TouchRippple` element.
+   * A ref that points to the `TouchRipple` element.
    */
   touchRippleRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.shape({

package/legacy/Chip/Chip.js

@@ -54,6 +54,7 @@ var ChipRoot = styled('div', {
       ownerState = _ref11.ownerState;
   var deleteIconColor = alpha(theme.palette.text.primary, 0.26);
   return _extends((_extends2 = {
+    maxWidth: '100%',
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(13),
     display: 'inline-flex',

package/legacy/Dialog/Dialog.js

@@ -9,13 +9,13 @@ import { unstable_useId as useId } from '@mui/utils';
 import capitalize from '../utils/capitalize';
 import Modal from '../Modal';
 import Fade from '../Fade';
-import { duration } from '../styles/createTransitions';
 import Paper from '../Paper';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import dialogClasses, { getDialogUtilityClass } from './dialogClasses';
 import DialogContext from './DialogContext';
 import Backdrop from '../Backdrop';
+import useTheme from '../styles/useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 var DialogBackdrop = styled(Backdrop, {
   name: 'MuiDialog',
@@ -139,10 +139,6 @@ var DialogPaper = styled(Paper, {
     maxWidth: '100%'
   }));
 });
-var defaultTransitionDuration = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 /**
  * Dialogs are overlaid modal paper based components with a backdrop.
  */
@@ -152,6 +148,11 @@ var Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     props: inProps,
     name: 'MuiDialog'
   });
+  var theme = useTheme();
+  var defaultTransitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
 
   var ariaDescribedby = props['aria-describedby'],
       ariaLabelledbyProp = props['aria-labelledby'],
@@ -399,7 +400,10 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
-   * @default { enter: duration.enteringScreen, exit: duration.leavingScreen }
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
    */
   transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
     appear: PropTypes.number,

package/legacy/Drawer/Drawer.js

@@ -9,7 +9,6 @@ import Modal from '../Modal';
 import Slide from '../Slide';
 import Paper from '../Paper';
 import capitalize from '../utils/capitalize';
-import { duration } from '../styles/createTransitions';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { rootShouldForwardProp } from '../styles/styled';
@@ -118,10 +117,6 @@ export function isHorizontal(anchor) {
 export function getAnchor(theme, anchor) {
   return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
 }
-var defaultTransitionDuration = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 /**
  * The props of the [Modal](/api/modal/) component are available
  * when `variant="temporary"` is set.
@@ -132,6 +127,11 @@ var Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     props: inProps,
     name: 'MuiDrawer'
   });
+  var theme = useTheme();
+  var defaultTransitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
   var _props$anchor = props.anchor,
       anchorProp = _props$anchor === void 0 ? 'left' : _props$anchor,
       BackdropProps = props.BackdropProps,
@@ -158,12 +158,11 @@ var Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       transitionDuration = _props$transitionDura === void 0 ? defaultTransitionDuration : _props$transitionDura,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'temporary' : _props$variant,
-      other = _objectWithoutProperties(props, ["anchor", "BackdropProps", "children", "className", "elevation", "hideBackdrop", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"]);
-
-  var theme = useTheme(); // Let's assume that the Drawer will always be rendered on user space.
+      other = _objectWithoutProperties(props, ["anchor", "BackdropProps", "children", "className", "elevation", "hideBackdrop", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"]); // Let's assume that the Drawer will always be rendered on user space.
   // We use this state is order to skip the appear transition during the
   // initial mount of the component.
 
+
   var mounted = React.useRef(false);
   React.useEffect(function () {
     mounted.current = true;
@@ -317,7 +316,10 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
-   * @default { enter: duration.enteringScreen, exit: duration.leavingScreen }
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
    */
   transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
     appear: PropTypes.number,

package/legacy/Fade/Fade.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import { elementAcceptingRef } from '@mui/utils';
-import { duration } from '../styles/createTransitions';
 import useTheme from '../styles/useTheme';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
@@ -17,16 +16,18 @@ var styles = {
     opacity: 1
   }
 };
-var defaultTimeout = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 /**
  * The Fade transition is used by the [Modal](/components/modal/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 
 var Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
+  var theme = useTheme();
+  var defaultTimeout = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
+
   var addEndListener = props.addEndListener,
       _props$appear = props.appear,
       appear = _props$appear === void 0 ? true : _props$appear,
@@ -46,7 +47,6 @@ var Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
       TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
       other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
 
-  var theme = useTheme();
   var enableStrictModeCompat = true;
   var nodeRef = React.useRef(null);
   var foreignRef = useForkRef(_children.ref, ref);
@@ -214,8 +214,8 @@ process.env.NODE_ENV !== "production" ? Fade.propTypes
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({

package/legacy/FilledInput/filledInputClasses.js

@@ -1,6 +1,10 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { generateUtilityClasses, generateUtilityClass } from '@mui/base';
+import { inputBaseClasses } from '../InputBase';
 export function getFilledInputUtilityClass(slot) {
   return generateUtilityClass('MuiFilledInput', slot);
 }
-var filledInputClasses = generateUtilityClasses('MuiFilledInput', ['root', 'colorSecondary', 'underline', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'hiddenLabel', 'input', 'inputSizeSmall', 'inputHiddenLabel', 'inputMultiline', 'inputAdornedStart', 'inputAdornedEnd']);
+
+var filledInputClasses = _extends({}, inputBaseClasses, generateUtilityClasses('MuiFilledInput', ['root', 'underline', 'input']));
+
 export default filledInputClasses;

package/legacy/Input/inputClasses.js

@@ -1,6 +1,10 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { generateUtilityClasses, generateUtilityClass } from '@mui/base';
+import { inputBaseClasses } from '../InputBase';
 export function getInputUtilityClass(slot) {
   return generateUtilityClass('MuiInput', slot);
 }
-var inputClasses = generateUtilityClasses('MuiInput', ['root', 'formControl', 'focused', 'disabled', 'colorSecondary', 'underline', 'error', 'sizeSmall', 'multiline', 'fullWidth', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch']);
+
+var inputClasses = _extends({}, inputBaseClasses, generateUtilityClasses('MuiInput', ['root', 'underline', 'input']));
+
 export default inputClasses;

package/legacy/OutlinedInput/NotchedOutline.js

@@ -27,7 +27,9 @@ var NotchedOutlineLegend = styled('legend')(function (_ref) {
   var ownerState = _ref.ownerState,
       theme = _ref.theme;
   return _extends({
-    float: 'unset'
+    float: 'unset',
+    // Fix conflict with bootstrap
+    overflow: 'hidden'
   }, !ownerState.withLabel && {
     padding: 0,
     lineHeight: '11px',

package/legacy/OutlinedInput/outlinedInputClasses.js

@@ -1,6 +1,10 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { generateUtilityClasses, generateUtilityClass } from '@mui/base';
+import { inputBaseClasses } from '../InputBase';
 export function getOutlinedInputUtilityClass(slot) {
   return generateUtilityClass('MuiOutlinedInput', slot);
 }
-var outlinedInputClasses = generateUtilityClasses('MuiOutlinedInput', ['root', 'colorSecondary', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'notchedOutline', 'input', 'inputSizeSmall', 'inputMultiline', 'inputAdornedStart', 'inputAdornedEnd']);
+
+var outlinedInputClasses = _extends({}, inputBaseClasses, generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
+
 export default outlinedInputClasses;

package/legacy/Popper/Popper.js

@@ -90,7 +90,7 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes
     effect: PropTypes.func,
     enabled: PropTypes.bool,
     fn: PropTypes.func,
-    name: PropTypes.any.isRequired,
+    name: PropTypes.any,
     options: PropTypes.object,
     phase: PropTypes.oneOf(['afterMain', 'afterRead', 'afterWrite', 'beforeMain', 'beforeRead', 'beforeWrite', 'main', 'read', 'write']),
     requires: PropTypes.arrayOf(PropTypes.string),

package/legacy/Slide/Slide.js

@@ -7,7 +7,6 @@ import { elementAcceptingRef, HTMLElementType, chainPropTypes } from '@mui/utils
 import debounce from '../utils/debounce';
 import useForkRef from '../utils/useForkRef';
 import useTheme from '../styles/useTheme';
-import { duration, easing } from '../styles/createTransitions';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import { ownerWindow } from '../utils'; // Translate the node so it can't be seen on the screen.
 // Later, we're going to translate the node back to its original location with `none`.
@@ -81,20 +80,22 @@ export function setTranslateValue(direction, node, containerProp) {
     node.style.transform = transform;
   }
 }
-var defaultEasing = {
-  enter: easing.easeOut,
-  exit: easing.sharp
-};
-var defaultTimeout = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 /**
  * The Slide transition is used by the [Drawer](/components/drawers/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 
 var Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
+  var theme = useTheme();
+  var defaultEasing = {
+    enter: theme.transitions.easing.easeOut,
+    exit: theme.transitions.easing.sharp
+  };
+  var defaultTimeout = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
+
   var addEndListener = props.addEndListener,
       _props$appear = props.appear,
       appear = _props$appear === void 0 ? true : _props$appear,
@@ -118,7 +119,6 @@ var Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
       TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
       other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
 
-  var theme = useTheme();
   var childrenRef = React.useRef(null);
   var handleRefIntermediary = useForkRef(_children.ref, childrenRef);
   var handleRef = useForkRef(handleRefIntermediary, ref);
@@ -308,8 +308,8 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.
    * @default {
-   *   enter: easing.easeOut,
-   *   exit: easing.sharp,
+   *   enter: theme.transitions.easing.easeOut,
+   *   exit: theme.transitions.easing.sharp,
    * }
    */
   easing: PropTypes.oneOfType([PropTypes.shape({
@@ -361,8 +361,8 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({

package/legacy/Snackbar/Snackbar.js

@@ -9,7 +9,6 @@ import ClickAwayListener from '@mui/base/ClickAwayListener';
 import styled from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
-import { duration } from '../styles/createTransitions';
 import useEventCallback from '../utils/useEventCallback';
 import capitalize from '../utils/capitalize';
 import Grow from '../Grow';
@@ -86,6 +85,11 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     props: inProps,
     name: 'MuiSnackbar'
   });
+  var theme = useTheme();
+  var defaultTransitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
   var action = props.action,
       _props$anchorOrigin = props.anchorOrigin;
   _props$anchorOrigin = _props$anchorOrigin === void 0 ? {
@@ -113,10 +117,7 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
       _props$TransitionComp = props.TransitionComponent,
       TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
       _props$transitionDura = props.transitionDuration,
-      transitionDuration = _props$transitionDura === void 0 ? {
-    enter: duration.enteringScreen,
-    exit: duration.leavingScreen
-  } : _props$transitionDura,
+      transitionDuration = _props$transitionDura === void 0 ? defaultTransitionDuration : _props$transitionDura,
       _props$TransitionProp = props.TransitionProps;
   _props$TransitionProp = _props$TransitionProp === void 0 ? {} : _props$TransitionProp;
 
@@ -125,7 +126,6 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
       TransitionProps = _objectWithoutProperties(_props$TransitionProp, ["onEnter", "onExited"]),
       other = _objectWithoutProperties(props, ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"]);
 
-  var theme = useTheme();
   var isRtl = theme.direction === 'rtl';
 
   var ownerState = _extends({}, props, {
@@ -450,8 +450,8 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({

package/legacy/SpeedDial/SpeedDial.js

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
-import { duration } from '../styles/createTransitions';
+import useTheme from '../styles/useTheme';
 import Zoom from '../Zoom';
 import Fab from '../Fab';
 import capitalize from '../utils/capitalize';
@@ -132,6 +132,11 @@ var SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref) {
     props: inProps,
     name: 'MuiSpeedDial'
   });
+  var theme = useTheme();
+  var defaultTransitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
   var ariaLabel = props.ariaLabel,
       _props$FabProps = props.FabProps;
   _props$FabProps = _props$FabProps === void 0 ? {} : _props$FabProps;
@@ -157,10 +162,7 @@ var SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref) {
       _props$TransitionComp = props.TransitionComponent,
       TransitionComponent = _props$TransitionComp === void 0 ? Zoom : _props$TransitionComp,
       _props$transitionDura = props.transitionDuration,
-      transitionDuration = _props$transitionDura === void 0 ? {
-    enter: duration.enteringScreen,
-    exit: duration.leavingScreen
-  } : _props$transitionDura,
+      transitionDuration = _props$transitionDura === void 0 ? defaultTransitionDuration : _props$transitionDura,
       TransitionProps = props.TransitionProps,
       other = _objectWithoutProperties(props, ["ariaLabel", "FabProps", "children", "className", "direction", "hidden", "icon", "onBlur", "onClose", "onFocus", "onKeyDown", "onMouseEnter", "onMouseLeave", "onOpen", "open", "openIcon", "TransitionComponent", "transitionDuration", "TransitionProps"]);
 
@@ -541,8 +543,8 @@ process.env.NODE_ENV !== "production" ? SpeedDial.propTypes
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({

package/legacy/Step/StepContext.js

@@ -1,12 +1,20 @@
 import * as React from 'react';
+
 /**
- * @ignore - internal component.
+ * Provides information about the current step in Stepper.
  */
-
 var StepContext = /*#__PURE__*/React.createContext({});
 
 if (process.env.NODE_ENV !== 'production') {
   StepContext.displayName = 'StepContext';
 }
+/**
+ * Returns the current StepContext or an empty object if no StepContext
+ * has been defined in the component tree.
+ */
+
 
+export function useStepContext() {
+  return React.useContext(StepContext);
+}
 export default StepContext;

package/legacy/Step/index.js

@@ -1,3 +1,5 @@
 export { default } from './Step';
 export { default as stepClasses } from './stepClasses';
-export * from './stepClasses';
+export * from './stepClasses';
+export { default as StepContext } from './StepContext';
+export * from './StepContext';

package/legacy/SvgIcon/SvgIcon.js

@@ -83,6 +83,7 @@ var SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
     color: color,
     component: component,
     fontSize: fontSize,
+    instanceFontSize: inProps.fontSize,
     inheritViewBox: inheritViewBox,
     viewBox: viewBox
   });

package/legacy/SwipeableDrawer/SwipeableDrawer.js

@@ -10,7 +10,6 @@ import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
 import useEventCallback from '../utils/useEventCallback';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
-import { duration } from '../styles/createTransitions';
 import useTheme from '../styles/useTheme';
 import { getTransitionProps } from '../transitions/utils';
 import SwipeArea from './SwipeArea'; // This value is closed to what browsers are using internally to
@@ -122,16 +121,16 @@ function computeHasNativeHandler(_ref) {
 }
 
 var iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
-var transitionDurationDefault = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inProps, ref) {
   var props = useThemeProps({
     name: 'MuiSwipeableDrawer',
     props: inProps
   });
   var theme = useTheme();
+  var transitionDurationDefault = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
   var _props$anchor = props.anchor,
       anchor = _props$anchor === void 0 ? 'left' : _props$anchor,
       _props$disableBackdro = props.disableBackdropTransition,
@@ -623,7 +622,10 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
-   * @default { enter: duration.enteringScreen, exit: duration.leavingScreen }
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
    */
   transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
     appear: PropTypes.number,

package/legacy/Zoom/Zoom.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import { elementAcceptingRef } from '@mui/utils';
-import { duration } from '../styles/createTransitions';
 import useTheme from '../styles/useTheme';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
@@ -17,10 +16,6 @@ var styles = {
     transform: 'none'
   }
 };
-var defaultTimeout = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 /**
  * The Zoom transition can be used for the floating variant of the
  * [Button](/components/buttons/#floating-action-buttons) component.
@@ -28,6 +23,12 @@ var defaultTimeout = {
  */
 
 var Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
+  var theme = useTheme();
+  var defaultTimeout = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
+
   var addEndListener = props.addEndListener,
       _props$appear = props.appear,
       appear = _props$appear === void 0 ? true : _props$appear,
@@ -47,7 +48,6 @@ var Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
       TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
       other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
 
-  var theme = useTheme();
   var nodeRef = React.useRef(null);
   var foreignRef = useForkRef(_children.ref, ref);
   var handleRef = useForkRef(nodeRef, foreignRef);
@@ -214,8 +214,8 @@ process.env.NODE_ENV !== "production" ? Zoom.propTypes
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({

package/legacy/className/index.js

@@ -0,0 +1,9 @@
+/**
+ * Caution! this module must not include unstyled components import from `@mui/base`, otherwise, it will break the ClassNameGenerator.
+ * ❌ import { ... } from '@mui/base';
+ * ✅ import { ... } from '@mui/base/utils'; // must be specific base module
+ *
+ * Issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401
+ */
+// eslint-disable-next-line import/prefer-default-export
+export { unstable_ClassNameGenerator } from '@mui/base/className';

package/legacy/index.js

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