@mui/material 5.5.2 → 5.5.3

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.5.2
+/** @license MUI v5.5.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -6449,7 +6449,7 @@
   styleFunctionSx.filterProps = ['sx'];
   var defaultStyleFunctionSx = styleFunctionSx;
 
-  const _excluded$2k = ["sx"];
+  const _excluded$2j = ["sx"];
 
   const splitProps = props => {
     const result = {
@@ -6470,7 +6470,7 @@
     const {
       sx: inSx
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2k);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2j);
 
     const {
       systemProps,
@@ -6549,7 +6549,7 @@
   	return str;
   }
 
-  const _excluded$2j = ["values", "unit", "step"];
+  const _excluded$2i = ["values", "unit", "step"];
 
   const sortBreakpointsValues = values => {
     const breakpointsAsArray = Object.keys(values).map(key => ({
@@ -6585,7 +6585,7 @@
       unit = 'px',
       step = 5
     } = breakpoints,
-          other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2j);
+          other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2i);
 
     const sortedValues = sortBreakpointsValues(values);
     const keys = Object.keys(sortedValues);
@@ -6677,7 +6677,7 @@
     return spacing;
   }
 
-  const _excluded$2i = ["breakpoints", "palette", "spacing", "shape"];
+  const _excluded$2h = ["breakpoints", "palette", "spacing", "shape"];
 
   function createTheme$1(options = {}, ...args) {
     const {
@@ -6686,7 +6686,7 @@
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-          other = _objectWithoutPropertiesLoose(options, _excluded$2i);
+          other = _objectWithoutPropertiesLoose(options, _excluded$2h);
 
     const breakpoints = createBreakpoints(breakpointsInput);
     const spacing = createSpacing(spacingInput);
@@ -6808,7 +6808,7 @@
     return useTheme$2(defaultTheme);
   }
 
-  const _excluded$2h = ["className", "component"];
+  const _excluded$2g = ["className", "component"];
   function createBox(options = {}) {
     const {
       defaultTheme,
@@ -6825,7 +6825,7 @@
         className,
         component = 'div'
       } = _extendSxProp,
-            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2h);
+            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2g);
 
       return /*#__PURE__*/jsxRuntime_1(BoxRoot, _extends({
         as: component,
@@ -6861,7 +6861,7 @@
     return Box;
   }
 
-  const _excluded$2g = ["variant"];
+  const _excluded$2f = ["variant"];
 
   function isEmpty$2(string) {
     return string.length === 0;
@@ -6877,7 +6877,7 @@
     const {
       variant
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2g);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2f);
 
     let classKey = variant || '';
     Object.keys(other).sort().forEach(key => {
@@ -6890,7 +6890,7 @@
     return classKey;
   }
 
-  const _excluded$2f = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+  const _excluded$2e = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
         _excluded2$b = ["theme"],
         _excluded3$1 = ["theme"];
 
@@ -6973,7 +6973,7 @@
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-            options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2f); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
+            options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2e); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
 
 
       const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
@@ -7156,7 +7156,7 @@
 
 
   function hexToRgb(color) {
-    color = color.substr(1);
+    color = color.slice(1);
     const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, 'g');
     let colors = color.match(re);
 
@@ -7208,7 +7208,7 @@ The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
       colorSpace = values.shift();
 
       if (values.length === 4 && values[3].charAt(0) === '/') {
-        values[3] = values[3].substr(1);
+        values[3] = values[3].slice(1);
       }
 
       if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) {
@@ -7473,7 +7473,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) ;
   }
 
-  const _excluded$2e = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+  const _excluded$2d = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
         _excluded2$a = ["type", "mode"];
   function adaptV4Theme(inputTheme) {
     {
@@ -7488,7 +7488,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       props = {},
       styleOverrides = {}
     } = inputTheme,
-          other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2e);
+          other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2d);
 
     const theme = _extends({}, other, {
       components: {}
@@ -8633,6 +8633,52 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return output;
   }
 
+  function useBadge(props) {
+    const {
+      anchorOrigin: anchorOriginProp = {
+        vertical: 'top',
+        horizontal: 'right'
+      },
+      badgeContent: badgeContentProp,
+      invisible: invisibleProp = false,
+      max: maxProp = 99,
+      showZero = false,
+      variant: variantProp = 'standard'
+    } = props;
+    const prevProps = usePreviousProps$1({
+      anchorOrigin: anchorOriginProp,
+      badgeContent: badgeContentProp,
+      max: maxProp,
+      variant: variantProp
+    });
+    let invisible = invisibleProp;
+
+    if (invisibleProp === false && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
+      invisible = true;
+    }
+
+    const {
+      anchorOrigin = anchorOriginProp,
+      badgeContent,
+      max = maxProp,
+      variant = variantProp
+    } = invisible ? prevProps : props;
+    let displayValue = '';
+
+    if (variant !== 'dot') {
+      displayValue = badgeContent && Number(badgeContent) > max ? `${max}+` : badgeContent;
+    }
+
+    return {
+      anchorOrigin,
+      badgeContent,
+      invisible,
+      max,
+      variant,
+      displayValue
+    };
+  }
+
   const defaultGenerator = componentName => componentName;
 
   const createClassNameGenerator = () => {
@@ -8681,160 +8727,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return result;
   }
 
-  function getBackdropUtilityClass(slot) {
-    return generateUtilityClass('MuiBackdrop', slot);
-  }
-  const backdropUnstyledClasses = generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
-  var backdropUnstyledClasses$1 = backdropUnstyledClasses;
-
-  const _excluded$2d = ["classes", "className", "invisible", "component", "components", "componentsProps", "theme"];
-
-  const useUtilityClasses$1O = ownerState => {
-    const {
-      classes,
-      invisible
-    } = ownerState;
-    const slots = {
-      root: ['root', invisible && 'invisible']
-    };
-    return composeClasses(slots, getBackdropUtilityClass, classes);
-  };
-
-  const BackdropUnstyled = /*#__PURE__*/React__namespace.forwardRef(function BackdropUnstyled(props, ref) {
-    const {
-      classes: classesProp,
-      className,
-      invisible = false,
-      component = 'div',
-      components = {},
-      componentsProps = {},
-
-      /* eslint-disable react/prop-types */
-      theme
-    } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2d);
-
-    const ownerState = _extends({}, props, {
-      classes: classesProp,
-      invisible
-    });
-
-    const classes = useUtilityClasses$1O(ownerState);
-    const Root = components.Root || component;
-    const rootProps = componentsProps.root || {};
-    return /*#__PURE__*/jsxRuntime_1(Root, _extends({
-      "aria-hidden": true
-    }, rootProps, !isHostComponent(Root) && {
-      as: component,
-      ownerState: _extends({}, ownerState, rootProps.ownerState),
-      theme
-    }, {
-      ref: ref
-    }, other, {
-      className: clsx(classes.root, rootProps.className, className)
-    }));
-  });
-  BackdropUnstyled.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"     |
-    // ----------------------------------------------------------------------
-
-    /**
-     * The content of the component.
-     */
-    children: PropTypes.node,
-
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes: PropTypes.object,
-
-    /**
-     * @ignore
-     */
-    className: PropTypes.string,
-
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component: PropTypes.elementType,
-
-    /**
-     * The components used for each slot inside the Backdrop.
-     * Either a string to use a HTML element or a component.
-     * @default {}
-     */
-    components: PropTypes.shape({
-      Root: PropTypes.elementType
-    }),
-
-    /**
-     * The props used for each slot inside the Backdrop.
-     * @default {}
-     */
-    componentsProps: PropTypes.shape({
-      root: PropTypes.object
-    }),
-
-    /**
-     * If `true`, the backdrop is invisible.
-     * It can be used when rendering a popover or a custom select component.
-     * @default false
-     */
-    invisible: PropTypes.bool
-  } ;
-  var BackdropUnstyled$1 = BackdropUnstyled;
-
-  function useBadge(props) {
-    const {
-      anchorOrigin: anchorOriginProp = {
-        vertical: 'top',
-        horizontal: 'right'
-      },
-      badgeContent: badgeContentProp,
-      invisible: invisibleProp = false,
-      max: maxProp = 99,
-      showZero = false,
-      variant: variantProp = 'standard'
-    } = props;
-    const prevProps = usePreviousProps$1({
-      anchorOrigin: anchorOriginProp,
-      badgeContent: badgeContentProp,
-      max: maxProp,
-      variant: variantProp
-    });
-    let invisible = invisibleProp;
-
-    if (invisibleProp === false && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
-      invisible = true;
-    }
-
-    const {
-      anchorOrigin = anchorOriginProp,
-      badgeContent,
-      max = maxProp,
-      variant = variantProp
-    } = invisible ? prevProps : props;
-    let displayValue = '';
-
-    if (variant !== 'dot') {
-      displayValue = badgeContent && Number(badgeContent) > max ? `${max}+` : badgeContent;
-    }
-
-    return {
-      anchorOrigin,
-      badgeContent,
-      invisible,
-      max,
-      variant,
-      displayValue
-    };
-  }
-
   function getBadgeUtilityClass(slot) {
     return generateUtilityClass('MuiBadge', slot);
   }
@@ -8843,7 +8735,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   const _excluded$2c = ["anchorOrigin", "classes", "badgeContent", "component", "children", "className", "components", "componentsProps", "invisible", "max", "showZero", "variant"];
 
-  const useUtilityClasses$1N = ownerState => {
+  const useUtilityClasses$1O = ownerState => {
     const {
       variant,
       anchorOrigin,
@@ -8898,7 +8790,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       showZero
     });
 
-    const classes = useUtilityClasses$1N(ownerState);
+    const classes = useUtilityClasses$1O(ownerState);
     const Root = component || components.Root || 'span';
     const rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root), ownerState);
     const Badge = components.Badge || 'span';
@@ -9018,12 +8910,13 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *
    * Demos:
    *
-   * - [Click Away Listener](https://mui.com/components/click-away-listener/)
-   * - [Menus](https://mui.com/components/menus/)
+   * - [Click Away Listener](https://mui.com/base/components/click-away-listener/)
+   * - [Click Away Listener](https://mui.com/material-ui/react-click-away-listener/)
+   * - [Menus](https://mui.com/material-ui/react-menu/)
    *
    * API:
    *
-   * - [ClickAwayListener API](https://mui.com/api/click-away-listener/)
+   * - [ClickAwayListener API](https://mui.com/base/api/click-away-listener/)
    */
   function ClickAwayListener(props) {
     const {
@@ -11892,7 +11785,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    */
 
 
-  function Unstable_TrapFocus(props) {
+  function TrapFocus(props) {
     const {
       children,
       disableAutoFocus = false,
@@ -12097,7 +11990,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  Unstable_TrapFocus.propTypes
+  TrapFocus.propTypes
   /* remove-proptypes */
   = {
     // ----------------------------- Warning --------------------------------
@@ -12163,7 +12056,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   {
     // eslint-disable-next-line
-    Unstable_TrapFocus['propTypes' + ''] = exactProp(Unstable_TrapFocus.propTypes);
+    TrapFocus['propTypes' + ''] = exactProp(TrapFocus.propTypes);
   }
 
   function getModalUtilityClass(slot) {
@@ -12174,7 +12067,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   const _excluded$2a = ["BackdropComponent", "BackdropProps", "children", "classes", "className", "closeAfterTransition", "component", "components", "componentsProps", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "theme", "onTransitionEnter", "onTransitionExited"];
 
-  const useUtilityClasses$1M = ownerState => {
+  const useUtilityClasses$1N = ownerState => {
     const {
       open,
       exited,
@@ -12321,7 +12214,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       keepMounted
     });
 
-    const classes = useUtilityClasses$1M(ownerState);
+    const classes = useUtilityClasses$1N(ownerState);
 
     if (!keepMounted && !open && (!hasTransition || exited)) {
       return null;
@@ -12415,9 +12308,10 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         onKeyDown: handleKeyDown,
         className: clsx(classes.root, rootProps.className, className),
         children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/jsxRuntime_1(BackdropComponent, _extends({
+          "aria-hidden": true,
           open: open,
           onClick: handleBackdropClick
-        }, BackdropProps)) : null, /*#__PURE__*/jsxRuntime_1(Unstable_TrapFocus, {
+        }, BackdropProps)) : null, /*#__PURE__*/jsxRuntime_1(TrapFocus, {
           disableEnforceFocus: disableEnforceFocus,
           disableAutoFocus: disableAutoFocus,
           disableRestoreFocus: disableRestoreFocus,
@@ -12442,7 +12336,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     BackdropComponent: PropTypes.elementType,
 
     /**
-     * Props applied to the [`BackdropUnstyled`](/api/backdrop-unstyled/) element.
+     * Props applied to the backdrop element.
      */
     BackdropProps: PropTypes.object,
 
@@ -13395,7 +13289,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   const Identity = x => x;
 
-  const useUtilityClasses$1L = ownerState => {
+  const useUtilityClasses$1M = ownerState => {
     const {
       disabled,
       dragging,
@@ -13511,7 +13405,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const Input = components.Input || 'input';
     const inputProps = appendOwnerState(Input, componentsProps.input, ownerState);
     const hiddenInputProps = getHiddenInputProps();
-    const classes = useUtilityClasses$1L(ownerState);
+    const classes = useUtilityClasses$1M(ownerState);
     return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, getRootProps({
       onMouseDown
     }), {
@@ -14953,7 +14847,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$23 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 
-  const useUtilityClasses$1K = ownerState => {
+  const useUtilityClasses$1L = ownerState => {
     const {
       color,
       fontSize,
@@ -15038,7 +14932,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       more.viewBox = viewBox;
     }
 
-    const classes = useUtilityClasses$1K(ownerState);
+    const classes = useUtilityClasses$1L(ownerState);
     return /*#__PURE__*/jsxRuntime_2(SvgIconRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -15078,7 +14972,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
      * @default 'inherit'
      */
@@ -16173,7 +16069,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$22 = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
 
-  const useUtilityClasses$1J = ownerState => {
+  const useUtilityClasses$1K = ownerState => {
     const {
       orientation,
       classes
@@ -16281,7 +16177,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       collapsedSize: collapsedSizeProp
     });
 
-    const classes = useUtilityClasses$1J(ownerState);
+    const classes = useUtilityClasses$1K(ownerState);
     const theme = useTheme();
     const timer = React__namespace.useRef();
     const wrapperRef = React__namespace.useRef(null);
@@ -16595,7 +16491,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return (alphaValue / 100).toFixed(2);
   };
 
-  const useUtilityClasses$1I = ownerState => {
+  const useUtilityClasses$1J = ownerState => {
     const {
       square,
       elevation,
@@ -16655,7 +16551,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1I(ownerState);
+    const classes = useUtilityClasses$1J(ownerState);
 
     {
       // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -16762,7 +16658,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$20 = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
 
-  const useUtilityClasses$1H = ownerState => {
+  const useUtilityClasses$1I = ownerState => {
     const {
       classes,
       square,
@@ -16906,7 +16802,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       expanded
     });
 
-    const classes = useUtilityClasses$1H(ownerState);
+    const classes = useUtilityClasses$1I(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AccordionRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -17031,7 +16927,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1$ = ["className", "disableSpacing"];
 
-  const useUtilityClasses$1G = ownerState => {
+  const useUtilityClasses$1H = ownerState => {
     const {
       classes,
       disableSpacing
@@ -17079,7 +16975,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableSpacing
     });
 
-    const classes = useUtilityClasses$1G(ownerState);
+    const classes = useUtilityClasses$1H(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionActionsRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -17130,7 +17026,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1_ = ["className"];
 
-  const useUtilityClasses$1F = ownerState => {
+  const useUtilityClasses$1G = ownerState => {
     const {
       classes
     } = ownerState;
@@ -17161,7 +17057,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           other = _objectWithoutPropertiesLoose(props, _excluded$1_);
 
     const ownerState = props;
-    const classes = useUtilityClasses$1F(ownerState);
+    const classes = useUtilityClasses$1G(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionDetailsRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -17634,7 +17530,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1Y = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
 
-  const useUtilityClasses$1E = ownerState => {
+  const useUtilityClasses$1F = ownerState => {
     const {
       disabled,
       focusVisible,
@@ -17762,11 +17658,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         buttonRef.current.focus();
       }
     }), []);
+    const [mountedState, setMountedState] = React__namespace.useState(false);
     React__namespace.useEffect(() => {
-      if (focusVisible && focusRipple && !disableRipple) {
+      setMountedState(true);
+    }, []);
+    const enableTouchRipple = mountedState && !disableRipple && !disabled;
+    React__namespace.useEffect(() => {
+      if (focusVisible && focusRipple && !disableRipple && mountedState) {
         rippleRef.current.pulsate();
       }
-    }, [disableRipple, focusRipple, focusVisible]);
+    }, [disableRipple, focusRipple, focusVisible, mountedState]);
 
     function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {
       return useEventCallback(event => {
@@ -17910,11 +17811,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
     const handleRef = useForkRef(ref, handleOwnRef);
-    const [mountedState, setMountedState] = React__namespace.useState(false);
-    React__namespace.useEffect(() => {
-      setMountedState(true);
-    }, []);
-    const enableTouchRipple = mountedState && !disableRipple && !disabled;
 
     {
       // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -17936,7 +17832,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       focusVisible
     });
 
-    const classes = useUtilityClasses$1E(ownerState);
+    const classes = useUtilityClasses$1F(ownerState);
     return /*#__PURE__*/jsxRuntime_2(ButtonBaseRoot, _extends({
       as: ComponentProp,
       className: clsx(classes.root, className),
@@ -18172,7 +18068,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1X = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
 
-  const useUtilityClasses$1D = ownerState => {
+  const useUtilityClasses$1E = ownerState => {
     const {
       classes,
       expanded,
@@ -18293,7 +18189,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableGutters
     });
 
-    const classes = useUtilityClasses$1D(ownerState);
+    const classes = useUtilityClasses$1E(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AccordionSummaryRoot, _extends({
       focusRipple: false,
       disableRipple: true,
@@ -18381,7 +18277,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1W = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
 
-  const useUtilityClasses$1C = ownerState => {
+  const useUtilityClasses$1D = ownerState => {
     const {
       classes,
       disabled,
@@ -18488,7 +18384,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size
     });
 
-    const classes = useUtilityClasses$1C(ownerState);
+    const classes = useUtilityClasses$1D(ownerState);
     return /*#__PURE__*/jsxRuntime_1(IconButtonRoot, _extends({
       className: clsx(classes.root, className),
       centerRipple: true,
@@ -18532,7 +18428,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * @default 'default'
      */
     color: PropTypes
@@ -18609,7 +18507,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1V = ["action", "children", "className", "closeText", "color", "icon", "iconMapping", "onClose", "role", "severity", "variant"];
 
-  const useUtilityClasses$1B = ownerState => {
+  const useUtilityClasses$1C = ownerState => {
     const {
       variant,
       color,
@@ -18733,7 +18631,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1B(ownerState);
+    const classes = useUtilityClasses$1C(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AlertRoot, _extends({
       role: role,
       elevation: 0,
@@ -18805,7 +18703,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     closeText: PropTypes.string,
 
     /**
-     * The main color for the alert. Unless provided, the value is taken from the `severity` prop.
+     * The color of the component. Unless provided, the value is taken from the `severity` prop.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      */
     color: PropTypes
     /* @typescript-to-proptypes-ignore */
@@ -18873,7 +18773,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1U = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
 
-  const useUtilityClasses$1A = ownerState => {
+  const useUtilityClasses$1B = ownerState => {
     const {
       align,
       gutterBottom,
@@ -18974,7 +18874,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
 
     const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-    const classes = useUtilityClasses$1A(ownerState);
+    const classes = useUtilityClasses$1B(ownerState);
     return /*#__PURE__*/jsxRuntime_1(TypographyRoot, _extends({
       as: Component,
       ref: ref,
@@ -19084,7 +18984,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1T = ["className"];
 
-  const useUtilityClasses$1z = ownerState => {
+  const useUtilityClasses$1A = ownerState => {
     const {
       classes
     } = ownerState;
@@ -19118,7 +19018,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           other = _objectWithoutPropertiesLoose(props, _excluded$1T);
 
     const ownerState = props;
-    const classes = useUtilityClasses$1z(ownerState);
+    const classes = useUtilityClasses$1A(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AlertTitleRoot, _extends({
       gutterBottom: true,
       component: "div",
@@ -19165,7 +19065,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1S = ["className", "color", "enableColorOnDark", "position"];
 
-  const useUtilityClasses$1y = ownerState => {
+  const useUtilityClasses$1z = ownerState => {
     const {
       color,
       position,
@@ -19263,7 +19163,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       enableColorOnDark
     });
 
-    const classes = useUtilityClasses$1y(ownerState);
+    const classes = useUtilityClasses$1z(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AppBarRoot, _extends({
       square: true,
       component: "header",
@@ -19297,7 +19197,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -19474,7 +19376,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1R = ["className", "color", "component", "disableGutters", "disableSticky", "inset"];
 
-  const useUtilityClasses$1x = ownerState => {
+  const useUtilityClasses$1y = ownerState => {
     const {
       classes,
       color,
@@ -19547,7 +19449,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       inset
     });
 
-    const classes = useUtilityClasses$1x(ownerState);
+    const classes = useUtilityClasses$1y(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListSubheaderRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -19627,7 +19529,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1Q = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant"];
 
-  const useUtilityClasses$1w = ownerState => {
+  const useUtilityClasses$1x = ownerState => {
     const {
       classes,
       disabled,
@@ -19961,7 +19863,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1w(ownerState);
+    const classes = useUtilityClasses$1x(ownerState);
     const moreProps = component === ButtonBase$1 ? _extends({
       component: ComponentProp || 'div',
       focusVisibleClassName: classes.focusVisible
@@ -20060,7 +19962,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     clickable: PropTypes.bool,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * @default 'default'
      */
     color: PropTypes
@@ -20243,7 +20147,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return [styles.input, ownerState.size === 'small' && styles.inputSizeSmall, ownerState.multiline && styles.inputMultiline, ownerState.type === 'search' && styles.inputTypeSearch, ownerState.startAdornment && styles.inputAdornedStart, ownerState.endAdornment && styles.inputAdornedEnd, ownerState.hiddenLabel && styles.inputHiddenLabel];
   };
 
-  const useUtilityClasses$1v = ownerState => {
+  const useUtilityClasses$1w = ownerState => {
     const {
       classes,
       color,
@@ -20655,7 +20559,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       type
     });
 
-    const classes = useUtilityClasses$1v(ownerState);
+    const classes = useUtilityClasses$1w(ownerState);
     const Root = components.Root || InputBaseRoot;
     const rootProps = componentsProps.root || {};
     const Input = components.Input || InputBaseComponent;
@@ -20741,7 +20645,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
      */
     color: PropTypes
@@ -20983,7 +20889,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1O = ["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"];
 
-  const useUtilityClasses$1u = ownerState => {
+  const useUtilityClasses$1v = ownerState => {
     const {
       classes,
       disablePortal,
@@ -21406,7 +21312,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size
     });
 
-    const classes = useUtilityClasses$1u(ownerState);
+    const classes = useUtilityClasses$1v(ownerState);
     let startAdornment;
 
     if (multiple && value.length > 0) {
@@ -21716,7 +21622,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     disablePortal: PropTypes.bool,
 
     /**
-     * A filter function that determines the options that are eligible.
+     * A function that determines the filtered options to be rendered on search.
      *
      * @param {T[]} options The options to render.
      * @param {object} state The state of the component.
@@ -22042,7 +21948,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1N = ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"];
 
-  const useUtilityClasses$1t = ownerState => {
+  const useUtilityClasses$1u = ownerState => {
     const {
       classes,
       variant,
@@ -22195,7 +22101,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1t(ownerState);
+    const classes = useUtilityClasses$1u(ownerState);
 
     if (hasImgNotFailing) {
       children = /*#__PURE__*/jsxRuntime_1(AvatarImg, _extends({
@@ -22310,7 +22216,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     medium: null
   };
 
-  const useUtilityClasses$1s = ownerState => {
+  const useUtilityClasses$1t = ownerState => {
     const {
       classes
     } = ownerState;
@@ -22382,7 +22288,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1s(ownerState);
+    const classes = useUtilityClasses$1t(ownerState);
     const children = React__namespace.Children.toArray(childrenProp).filter(child => {
       {
         if (reactIs_2(child)) {
@@ -22714,14 +22620,23 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var Fade$1 = Fade;
 
-  const _excluded$1K = ["children", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
-  const backdropClasses = backdropUnstyledClasses$1;
+  function getBackdropUtilityClass(slot) {
+    return generateUtilityClass('MuiBackdrop', slot);
+  }
+  const backdropClasses = generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
+  var backdropClasses$1 = backdropClasses;
+
+  const _excluded$1K = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
 
-  const extendUtilityClasses$3 = ownerState => {
+  const useUtilityClasses$1s = ownerState => {
     const {
-      classes
+      classes,
+      invisible
     } = ownerState;
-    return classes;
+    const slots = {
+      root: ['root', invisible && 'invisible']
+    };
+    return composeClasses(slots, getBackdropUtilityClass, classes);
   };
 
   const BackdropRoot = styled$1('div', {
@@ -22750,7 +22665,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     backgroundColor: 'transparent'
   }));
   const Backdrop = /*#__PURE__*/React__namespace.forwardRef(function Backdrop(inProps, ref) {
-    var _componentsProps$root;
+    var _components$Root, _componentsProps$root;
 
     const props = useThemeProps({
       props: inProps,
@@ -22759,6 +22674,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const {
       children,
+      component = 'div',
       components = {},
       componentsProps = {},
       className,
@@ -22771,25 +22687,20 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           other = _objectWithoutPropertiesLoose(props, _excluded$1K);
 
     const ownerState = _extends({}, props, {
+      component,
       invisible
     });
 
-    const classes = extendUtilityClasses$3(ownerState);
+    const classes = useUtilityClasses$1s(ownerState);
     return /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
       in: open,
       timeout: transitionDuration
     }, other, {
-      children: /*#__PURE__*/jsxRuntime_1(BackdropUnstyled$1, {
-        className: className,
-        invisible: invisible,
-        components: _extends({
-          Root: BackdropRoot
-        }, components),
-        componentsProps: {
-          root: _extends({}, componentsProps.root, (!components.Root || !isHostComponent(components.Root)) && {
-            ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState)
-          })
-        },
+      children: /*#__PURE__*/jsxRuntime_1(BackdropRoot, {
+        "aria-hidden": true,
+        as: (_components$Root = components.Root) != null ? _components$Root : component,
+        className: clsx(classes.root, className),
+        ownerState: _extends({}, ownerState, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState),
         classes: classes,
         ref: ref,
         children: children
@@ -22819,6 +22730,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     className: PropTypes.string,
 
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: PropTypes.elementType,
+
     /**
      * The components used for each slot inside the Backdrop.
      * Either a string to use a HTML element or a component.
@@ -23129,7 +23046,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     classes: PropTypes.object,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * @default 'default'
      */
     color: PropTypes
@@ -24125,7 +24044,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -24421,7 +24342,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -25699,7 +25622,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     classes: PropTypes.object,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -25998,7 +25923,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -28514,7 +28441,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * @default 'default'
      */
     color: PropTypes.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
@@ -28803,7 +28732,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     classes: PropTypes.object,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
      */
     color: PropTypes
@@ -29216,7 +29147,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -29377,7 +29310,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       control,
       disabled: disabledProp,
       disableTypography,
-      label,
+      label: labelProp,
       labelPlacement = 'end'
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$1h);
@@ -29409,23 +29342,28 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const ownerState = _extends({}, props, {
       disabled,
-      label,
       labelPlacement,
       error: fcs.error
     });
 
     const classes = useUtilityClasses$12(ownerState);
+    let label = labelProp;
+
+    if (label != null && label.type !== Typography$1 && !disableTypography) {
+      label = /*#__PURE__*/jsxRuntime_1(Typography$1, _extends({
+        component: "span",
+        className: classes.label
+      }, componentsProps.typography, {
+        children: label
+      }));
+    }
+
     return /*#__PURE__*/jsxRuntime_2(FormControlLabelRoot, _extends({
       className: clsx(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other, {
-      children: [/*#__PURE__*/React__namespace.cloneElement(control, controlProps), label.type === Typography$1 || disableTypography ? label : /*#__PURE__*/jsxRuntime_1(Typography$1, _extends({
-        component: "span",
-        className: classes.label
-      }, componentsProps.typography, {
-        children: label
-      }))]
+      children: [/*#__PURE__*/React__namespace.cloneElement(control, controlProps), label]
     }));
   });
   FormControlLabel.propTypes
@@ -29482,7 +29420,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * A text or an element to be used in an enclosing label element.
      */
-    label: PropTypes.oneOfType([PropTypes.element, PropTypes.number, PropTypes.string]).isRequired,
+    label: PropTypes.node,
 
     /**
      * The position of the label.
@@ -29937,7 +29875,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      */
     color: PropTypes
     /* @typescript-to-proptypes-ignore */
@@ -30514,6 +30454,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       transform: 'none'
     }
   };
+  /**
+   * Conditionally apply a workaround for the CSS transition bug in Safari 15.4.
+   * Remove this workaround once the Safari bug is fixed.
+   */
+
+  const isSafari154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*safari/i.test(navigator.userAgent) && /version\/15\.[4-9]/i.test(navigator.userAgent);
   /**
    * The Grow transition is used by the [Tooltip](/components/tooltips/) and
    * [Popover](/components/popover/) components.
@@ -30587,7 +30533,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         duration,
         delay
       }), theme.transitions.create('transform', {
-        duration: duration * 0.666,
+        duration: isSafari154 ? duration : duration * 0.666,
         delay,
         easing: transitionTimingFunction
       })].join(',');
@@ -30623,11 +30569,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         duration,
         delay
       }), theme.transitions.create('transform', {
-        duration: duration * 0.666,
-        delay: delay || duration * 0.333,
+        duration: isSafari154 ? duration : duration * 0.666,
+        delay: isSafari154 ? delay : delay || duration * 0.333,
         easing: transitionTimingFunction
       })].join(',');
-      node.style.opacity = '0';
+      node.style.opacity = 0;
       node.style.transform = getScale(0.75);
 
       if (onExit) {
@@ -31621,7 +31567,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * @default 'inherit'
      */
     color: PropTypes
@@ -32408,7 +32356,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     classes: PropTypes.object,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
      */
     color: PropTypes
@@ -32918,7 +32868,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     classes: PropTypes.object,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      */
     color: PropTypes
     /* @typescript-to-proptypes-ignore */
@@ -33303,7 +33255,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -37045,7 +36999,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     classes: PropTypes.object,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
      */
     color: PropTypes
@@ -37625,6 +37581,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * The active color.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * @default 'standard'
      */
     color: PropTypes
@@ -37849,6 +37807,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * The active color.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * @default 'standard'
      */
     color: PropTypes
@@ -38210,7 +38170,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     classes: PropTypes.object,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -40934,7 +40896,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     classes: PropTypes.object,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -46026,7 +45990,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -49446,7 +49412,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -49786,6 +49754,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * The color of the button when it is in an active state.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * @default 'standard'
      */
     color: PropTypes
@@ -50062,7 +50032,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of a button when it is selected.
+     * The color of the button when it is selected.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
      * @default 'standard'
      */
     color: PropTypes
@@ -50330,7 +50302,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.autocompleteClasses = autocompleteClasses$1;
   exports.avatarClasses = avatarClasses$1;
   exports.avatarGroupClasses = avatarGroupClasses$1;
-  exports.backdropClasses = backdropClasses;
+  exports.backdropClasses = backdropClasses$1;
   exports.badgeClasses = badgeClasses;
   exports.bottomNavigationActionClasses = bottomNavigationActionClasses$1;
   exports.bottomNavigationClasses = bottomNavigationClasses$1;
@@ -50394,6 +50366,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.getAutocompleteUtilityClass = getAutocompleteUtilityClass;
   exports.getAvatarGroupUtilityClass = getAvatarGroupUtilityClass;
   exports.getAvatarUtilityClass = getAvatarUtilityClass;
+  exports.getBackdropUtilityClass = getBackdropUtilityClass;
   exports.getBottomNavigationActionUtilityClass = getBottomNavigationActionUtilityClass;
   exports.getBottomNavigationUtilityClass = getBottomNavigationUtilityClass;
   exports.getBreadcrumbsUtilityClass = getBreadcrumbsUtilityClass;