@mui/material 5.5.1 → 5.6.0

package/Fab/Fab.d.ts

@@ -22,7 +22,9 @@ export type FabTypeMap<P = {}, D extends React.ElementType = 'button'> = ExtendB
      */
     classes?: Partial<FabClasses>;
     /**
-     * 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?: OverridableStringUnion<

package/Fab/Fab.js

@@ -176,7 +176,9 @@ process.env.NODE_ENV !== "production" ? Fab.propTypes
   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']),

package/Fab/fabClasses.d.ts

@@ -1,26 +1,26 @@
-export interface FabClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `color="primary"`. */
-    primary: string;
-    /** Styles applied to the root element if `color="secondary"`. */
-    secondary: string;
-    /** Styles applied to the root element if `variant="extended"`. */
-    extended: string;
-    /** Styles applied to the root element if `variant="circular"`. */
-    circular: string;
-    /** State class applied to the ButtonBase root element if the button is keyboard focused. */
-    focusVisible: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the root element if `color="inherit"`. */
-    colorInherit: string;
-    /** Styles applied to the root element if `size="small"``. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `size="medium"``. */
-    sizeMedium: string;
-}
-export declare type FabClassKey = keyof FabClasses;
-export declare function getFabUtilityClass(slot: string): string;
-declare const fabClasses: FabClasses;
-export default fabClasses;
+export interface FabClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `color="primary"`. */
+    primary: string;
+    /** Styles applied to the root element if `color="secondary"`. */
+    secondary: string;
+    /** Styles applied to the root element if `variant="extended"`. */
+    extended: string;
+    /** Styles applied to the root element if `variant="circular"`. */
+    circular: string;
+    /** State class applied to the ButtonBase root element if the button is keyboard focused. */
+    focusVisible: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the root element if `color="inherit"`. */
+    colorInherit: string;
+    /** Styles applied to the root element if `size="small"``. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `size="medium"``. */
+    sizeMedium: string;
+}
+export declare type FabClassKey = keyof FabClasses;
+export declare function getFabUtilityClass(slot: string): string;
+declare const fabClasses: FabClasses;
+export default fabClasses;

package/FilledInput/FilledInput.js

@@ -236,7 +236,9 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
   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

package/FilledInput/filledInputClasses.d.ts

@@ -1,40 +1,40 @@
-export interface FilledInputClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if color secondary. */
-    colorSecondary: string;
-    /** Styles applied to the root element unless `disableUnderline={true}`. */
-    underline: string;
-    /** State class applied to the root element if the component is focused. */
-    focused: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the root element if `startAdornment` is provided. */
-    adornedStart: string;
-    /** Styles applied to the root element if `endAdornment` is provided. */
-    adornedEnd: string;
-    /** State class applied to the root element if `error={true}`. */
-    error: string;
-    /** Styles applied to the input element if `size="small"`. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `multiline={true}`. */
-    multiline: string;
-    /** Styles applied to the root element if `hiddenLabel={true}`. */
-    hiddenLabel: string;
-    /** Styles applied to the input element. */
-    input: string;
-    /** Styles applied to the input element if `size="small"`. */
-    inputSizeSmall: string;
-    /** Styles applied to the `input` if in `<FormControl hiddenLabel />`. */
-    inputHiddenLabel: string;
-    /** Styles applied to the input element if `multiline={true}`. */
-    inputMultiline: string;
-    /** Styles applied to the input element if `startAdornment` is provided. */
-    inputAdornedStart: string;
-    /** Styles applied to the input element if `endAdornment` is provided. */
-    inputAdornedEnd: string;
-}
-export declare type FilledInputClassKey = keyof FilledInputClasses;
-export declare function getFilledInputUtilityClass(slot: string): string;
-declare const filledInputClasses: FilledInputClasses;
-export default filledInputClasses;
+export interface FilledInputClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if color secondary. */
+    colorSecondary: string;
+    /** Styles applied to the root element unless `disableUnderline={true}`. */
+    underline: string;
+    /** State class applied to the root element if the component is focused. */
+    focused: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the root element if `startAdornment` is provided. */
+    adornedStart: string;
+    /** Styles applied to the root element if `endAdornment` is provided. */
+    adornedEnd: string;
+    /** State class applied to the root element if `error={true}`. */
+    error: string;
+    /** Styles applied to the input element if `size="small"`. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `multiline={true}`. */
+    multiline: string;
+    /** Styles applied to the root element if `hiddenLabel={true}`. */
+    hiddenLabel: string;
+    /** Styles applied to the input element. */
+    input: string;
+    /** Styles applied to the input element if `size="small"`. */
+    inputSizeSmall: string;
+    /** Styles applied to the `input` if in `<FormControl hiddenLabel />`. */
+    inputHiddenLabel: string;
+    /** Styles applied to the input element if `multiline={true}`. */
+    inputMultiline: string;
+    /** Styles applied to the input element if `startAdornment` is provided. */
+    inputAdornedStart: string;
+    /** Styles applied to the input element if `endAdornment` is provided. */
+    inputAdornedEnd: string;
+}
+export declare type FilledInputClassKey = keyof FilledInputClasses;
+export declare function getFilledInputUtilityClass(slot: string): string;
+declare const filledInputClasses: FilledInputClasses;
+export default filledInputClasses;

package/FormControl/FormControl.d.ts

@@ -19,7 +19,9 @@ export interface FormControlTypeMap<P = {}, D extends React.ElementType = 'div'>
      */
     classes?: Partial<FormControlClasses>;
     /**
-     * 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?: OverridableStringUnion<

package/FormControl/FormControl.js

@@ -247,7 +247,9 @@ process.env.NODE_ENV !== "production" ? FormControl.propTypes
   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

package/FormControl/formControlClasses.d.ts

@@ -1,14 +1,14 @@
-export interface FormControlClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `margin="normal"`. */
-    marginNormal: string;
-    /** Styles applied to the root element if `margin="dense"`. */
-    marginDense: string;
-    /** Styles applied to the root element if `fullWidth={true}`. */
-    fullWidth: string;
-}
-export declare type FormControlClassKey = keyof FormControlClasses;
-export declare function getFormControlUtilityClasses(slot: string): string;
-declare const formControlClasses: FormControlClasses;
-export default formControlClasses;
+export interface FormControlClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `margin="normal"`. */
+    marginNormal: string;
+    /** Styles applied to the root element if `margin="dense"`. */
+    marginDense: string;
+    /** Styles applied to the root element if `fullWidth={true}`. */
+    fullWidth: string;
+}
+export declare type FormControlClassKey = keyof FormControlClasses;
+export declare function getFormControlUtilityClasses(slot: string): string;
+declare const formControlClasses: FormControlClasses;
+export default formControlClasses;

package/FormControlLabel/FormControlLabel.d.ts

@@ -45,7 +45,7 @@ export interface FormControlLabelProps
   /**
    * A text or an element to be used in an enclosing label element.
    */
-  label: string | number | React.ReactElement;
+  label: React.ReactNode;
   /**
    * The position of the label.
    * @default 'end'

package/FormControlLabel/FormControlLabel.js

@@ -92,7 +92,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     control,
     disabled: disabledProp,
     disableTypography,
-    label,
+    label: labelProp,
     labelPlacement = 'end'
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -124,23 +124,28 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
 
   const ownerState = _extends({}, props, {
     disabled,
-    label,
     labelPlacement,
     error: fcs.error
   });
 
   const classes = useUtilityClasses(ownerState);
+  let label = labelProp;
+
+  if (label != null && label.type !== Typography && !disableTypography) {
+    label = /*#__PURE__*/_jsx(Typography, _extends({
+      component: "span",
+      className: classes.label
+    }, componentsProps.typography, {
+      children: label
+    }));
+  }
+
   return /*#__PURE__*/_jsxs(FormControlLabelRoot, _extends({
     className: clsx(classes.root, className),
     ownerState: ownerState,
     ref: ref
   }, other, {
-    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label.type === Typography || disableTypography ? label : /*#__PURE__*/_jsx(Typography, _extends({
-      component: "span",
-      className: classes.label
-    }, componentsProps.typography, {
-      children: label
-    }))]
+    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label]
   }));
 });
 process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
@@ -197,7 +202,7 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
   /**
    * 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.

package/FormControlLabel/formControlLabelClasses.d.ts

@@ -1,20 +1,20 @@
-export interface FormControlLabelClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `labelPlacement="start"`. */
-    labelPlacementStart: string;
-    /** Styles applied to the root element if `labelPlacement="top"`. */
-    labelPlacementTop: string;
-    /** Styles applied to the root element if `labelPlacement="bottom"`. */
-    labelPlacementBottom: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the label's Typography component. */
-    label: string;
-    /** State class applied to the root element if `error={true}`. */
-    error: string;
-}
-export declare type FormControlLabelClassKey = keyof FormControlLabelClasses;
-export declare function getFormControlLabelUtilityClasses(slot: string): string;
-declare const formControlLabelClasses: FormControlLabelClasses;
-export default formControlLabelClasses;
+export interface FormControlLabelClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `labelPlacement="start"`. */
+    labelPlacementStart: string;
+    /** Styles applied to the root element if `labelPlacement="top"`. */
+    labelPlacementTop: string;
+    /** Styles applied to the root element if `labelPlacement="bottom"`. */
+    labelPlacementBottom: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the label's Typography component. */
+    label: string;
+    /** State class applied to the root element if `error={true}`. */
+    error: string;
+}
+export declare type FormControlLabelClassKey = keyof FormControlLabelClasses;
+export declare function getFormControlLabelUtilityClasses(slot: string): string;
+declare const formControlLabelClasses: FormControlLabelClasses;
+export default formControlLabelClasses;

package/FormGroup/formGroupClasses.d.ts

@@ -1,12 +1,12 @@
-export interface FormGroupClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `row={true}`. */
-    row: string;
-    /** State class applied to the root element if `error={true}`. */
-    error: string;
-}
-export declare type FormGroupClassKey = keyof FormGroupClasses;
-export declare function getFormGroupUtilityClass(slot: string): string;
-declare const formGroupClasses: FormGroupClasses;
-export default formGroupClasses;
+export interface FormGroupClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `row={true}`. */
+    row: string;
+    /** State class applied to the root element if `error={true}`. */
+    error: string;
+}
+export declare type FormGroupClassKey = keyof FormGroupClasses;
+export declare function getFormGroupUtilityClass(slot: string): string;
+declare const formGroupClasses: FormGroupClasses;
+export default formGroupClasses;

package/FormHelperText/formHelperTextClasses.d.ts

@@ -1,22 +1,22 @@
-export interface FormHelperTextClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** State class applied to the root element if `error={true}`. */
-    error: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the root element if `size="small"`. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `variant="filled"` or `variant="outlined"`. */
-    contained: string;
-    /** State class applied to the root element if `focused={true}`. */
-    focused: string;
-    /** State class applied to the root element if `filled={true}`. */
-    filled: string;
-    /** State class applied to the root element if `required={true}`. */
-    required: string;
-}
-export declare type FormHelperTextClassKey = keyof FormHelperTextClasses;
-export declare function getFormHelperTextUtilityClasses(slot: string): string;
-declare const formHelperTextClasses: FormHelperTextClasses;
-export default formHelperTextClasses;
+export interface FormHelperTextClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** State class applied to the root element if `error={true}`. */
+    error: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the root element if `size="small"`. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `variant="filled"` or `variant="outlined"`. */
+    contained: string;
+    /** State class applied to the root element if `focused={true}`. */
+    focused: string;
+    /** State class applied to the root element if `filled={true}`. */
+    filled: string;
+    /** State class applied to the root element if `required={true}`. */
+    required: string;
+}
+export declare type FormHelperTextClassKey = keyof FormHelperTextClasses;
+export declare function getFormHelperTextUtilityClasses(slot: string): string;
+declare const formHelperTextClasses: FormHelperTextClasses;
+export default formHelperTextClasses;

package/FormLabel/FormLabel.d.ts

@@ -19,7 +19,9 @@ export interface FormLabelTypeMap<P = {}, D extends React.ElementType = 'label'>
        */
       classes?: Partial<FormLabelClasses>;
       /**
-       * 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?: OverridableStringUnion<
         'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',

package/FormLabel/FormLabel.js

@@ -137,7 +137,9 @@ process.env.NODE_ENV !== "production" ? FormLabel.propTypes
   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 */

package/FormLabel/formLabelClasses.d.ts

@@ -1,22 +1,22 @@
-export interface FormLabelClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if the color is secondary. */
-    colorSecondary: string;
-    /** State class applied to the root element if `focused={true}`. */
-    focused: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** State class applied to the root element if `error={true}`. */
-    error: string;
-    /** State class applied to the root element if `filled={true}`. */
-    filled: string;
-    /** State class applied to the root element if `required={true}`. */
-    required: string;
-    /** Styles applied to the asterisk element. */
-    asterisk: string;
-}
-export declare type FormLabelClassKey = keyof FormLabelClasses;
-export declare function getFormLabelUtilityClasses(slot: string): string;
-declare const formLabelClasses: FormLabelClasses;
-export default formLabelClasses;
+export interface FormLabelClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if the color is secondary. */
+    colorSecondary: string;
+    /** State class applied to the root element if `focused={true}`. */
+    focused: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** State class applied to the root element if `error={true}`. */
+    error: string;
+    /** State class applied to the root element if `filled={true}`. */
+    filled: string;
+    /** State class applied to the root element if `required={true}`. */
+    required: string;
+    /** Styles applied to the asterisk element. */
+    asterisk: string;
+}
+export declare type FormLabelClassKey = keyof FormLabelClasses;
+export declare function getFormLabelUtilityClasses(slot: string): string;
+declare const formLabelClasses: FormLabelClasses;
+export default formLabelClasses;

package/Grid/gridClasses.d.ts

@@ -1,48 +1,48 @@
-export interface GridClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `container={true}`. */
-    container: string;
-    /** Styles applied to the root element if `item={true}`. */
-    item: string;
-    /** Styles applied to the root element if `zeroMinWidth={true}`. */
-    zeroMinWidth: string;
-    /** Styles applied to the root element if `direction="column"`. */
-    'direction-xs-column': string;
-    /** Styles applied to the root element if `direction="column-reverse"`. */
-    'direction-xs-column-reverse': string;
-    /** Styles applied to the root element if `direction="row-reverse"`. */
-    'direction-xs-row-reverse': string;
-    /** Styles applied to the root element if `wrap="nowrap"`. */
-    'wrap-xs-nowrap': string;
-    /** Styles applied to the root element if `wrap="reverse"`. */
-    'wrap-xs-wrap-reverse': string;
-    'spacing-xs-1': string;
-    'spacing-xs-2': string;
-    'spacing-xs-3': string;
-    'spacing-xs-4': string;
-    'spacing-xs-5': string;
-    'spacing-xs-6': string;
-    'spacing-xs-7': string;
-    'spacing-xs-8': string;
-    'spacing-xs-9': string;
-    'spacing-xs-10': string;
-    'grid-xs-auto': string;
-    'grid-xs-true': string;
-    'grid-xs-1': string;
-    'grid-xs-2': string;
-    'grid-xs-3': string;
-    'grid-xs-4': string;
-    'grid-xs-5': string;
-    'grid-xs-6': string;
-    'grid-xs-7': string;
-    'grid-xs-8': string;
-    'grid-xs-9': string;
-    'grid-xs-10': string;
-    'grid-xs-11': string;
-    'grid-xs-12': string;
-}
-export declare type GridClassKey = keyof GridClasses;
-export declare function getGridUtilityClass(slot: string): string;
-declare const gridClasses: GridClasses;
-export default gridClasses;
+export interface GridClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `container={true}`. */
+    container: string;
+    /** Styles applied to the root element if `item={true}`. */
+    item: string;
+    /** Styles applied to the root element if `zeroMinWidth={true}`. */
+    zeroMinWidth: string;
+    /** Styles applied to the root element if `direction="column"`. */
+    'direction-xs-column': string;
+    /** Styles applied to the root element if `direction="column-reverse"`. */
+    'direction-xs-column-reverse': string;
+    /** Styles applied to the root element if `direction="row-reverse"`. */
+    'direction-xs-row-reverse': string;
+    /** Styles applied to the root element if `wrap="nowrap"`. */
+    'wrap-xs-nowrap': string;
+    /** Styles applied to the root element if `wrap="reverse"`. */
+    'wrap-xs-wrap-reverse': string;
+    'spacing-xs-1': string;
+    'spacing-xs-2': string;
+    'spacing-xs-3': string;
+    'spacing-xs-4': string;
+    'spacing-xs-5': string;
+    'spacing-xs-6': string;
+    'spacing-xs-7': string;
+    'spacing-xs-8': string;
+    'spacing-xs-9': string;
+    'spacing-xs-10': string;
+    'grid-xs-auto': string;
+    'grid-xs-true': string;
+    'grid-xs-1': string;
+    'grid-xs-2': string;
+    'grid-xs-3': string;
+    'grid-xs-4': string;
+    'grid-xs-5': string;
+    'grid-xs-6': string;
+    'grid-xs-7': string;
+    'grid-xs-8': string;
+    'grid-xs-9': string;
+    'grid-xs-10': string;
+    'grid-xs-11': string;
+    'grid-xs-12': string;
+}
+export declare type GridClassKey = keyof GridClasses;
+export declare function getGridUtilityClass(slot: string): string;
+declare const gridClasses: GridClasses;
+export default gridClasses;

package/Grow/Grow.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { elementAcceptingRef } from '@mui/utils';
 import { Transition } from 'react-transition-group';
 import useTheme from '../styles/useTheme';
-import { reflow, getTransitionProps } from '../transitions/utils';
+import { getTransitionProps, reflow } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -24,6 +24,12 @@ const styles = {
     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.
@@ -97,7 +103,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       duration,
       delay
     }), theme.transitions.create('transform', {
-      duration: duration * 0.666,
+      duration: isSafari154 ? duration : duration * 0.666,
       delay,
       easing: transitionTimingFunction
     })].join(',');
@@ -133,11 +139,11 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       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) {

package/Icon/Icon.d.ts

@@ -26,7 +26,9 @@ export interface IconTypeMap<P = {}, D extends React.ElementType = 'span'> {
      */
     classes?: Partial<IconClasses>;
     /**
-     * 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?: OverridableStringUnion<

package/Icon/Icon.js

@@ -130,7 +130,9 @@ process.env.NODE_ENV !== "production" ? Icon.propTypes
   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