@mui/material 5.5.0 → 5.5.3

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.5.0
+/** @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.
@@ -2042,7 +2042,7 @@
 
   var pkg = {
   	name: "@emotion/react",
-  	version: "11.8.1",
+  	version: "11.8.2",
   	main: "dist/emotion-react.cjs.js",
   	module: "dist/emotion-react.esm.js",
   	browser: {
@@ -2072,7 +2072,6 @@
   		"@emotion/babel-plugin": "^11.7.1",
   		"@emotion/cache": "^11.7.1",
   		"@emotion/serialize": "^1.0.2",
-  		"@emotion/sheet": "^1.1.0",
   		"@emotion/utils": "^1.1.0",
   		"@emotion/weak-memoize": "^0.2.5",
   		"hoist-non-react-statics": "^3.3.1"
@@ -2096,10 +2095,11 @@
   		"@emotion/server": "11.4.0",
   		"@emotion/styled": "11.8.1",
   		"@types/react": "^16.9.11",
-  		dtslint: "^0.3.0",
+  		dtslint: "^4.2.1",
   		"html-tag-names": "^1.1.2",
   		react: "16.14.0",
-  		"svg-tag-names": "^1.1.1"
+  		"svg-tag-names": "^1.1.1",
+  		typescript: "^4.5.5"
   	},
   	repository: "https://github.com/emotion-js/emotion/tree/main/packages/react",
   	publishConfig: {
@@ -2169,8 +2169,9 @@
 
     var sheetRef = React.useRef();
     useInsertionEffect$1(function () {
-      var key = cache.key + "-global";
-      var sheet = new StyleSheet({
+      var key = cache.key + "-global"; // use case of https://github.com/emotion-js/emotion/issues/2675
+
+      var sheet = new cache.sheet.constructor({
         key: key,
         nonce: cache.sheet.nonce,
         container: cache.sheet.container,
@@ -6448,7 +6449,7 @@
   styleFunctionSx.filterProps = ['sx'];
   var defaultStyleFunctionSx = styleFunctionSx;
 
-  const _excluded$2k = ["sx"];
+  const _excluded$2j = ["sx"];
 
   const splitProps = props => {
     const result = {
@@ -6469,7 +6470,7 @@
     const {
       sx: inSx
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2k);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2j);
 
     const {
       systemProps,
@@ -6548,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 => ({
@@ -6584,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);
@@ -6676,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 {
@@ -6685,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);
@@ -6807,7 +6808,7 @@
     return useTheme$2(defaultTheme);
   }
 
-  const _excluded$2h = ["className", "component"];
+  const _excluded$2g = ["className", "component"];
   function createBox(options = {}) {
     const {
       defaultTheme,
@@ -6824,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,
@@ -6860,7 +6861,7 @@
     return Box;
   }
 
-  const _excluded$2g = ["variant"];
+  const _excluded$2f = ["variant"];
 
   function isEmpty$2(string) {
     return string.length === 0;
@@ -6876,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 => {
@@ -6889,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"];
 
@@ -6972,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;
@@ -7155,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);
 
@@ -7207,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) {
@@ -7472,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) {
     {
@@ -7487,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: {}
@@ -8632,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 = () => {
@@ -8680,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);
   }
@@ -8842,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,
@@ -8897,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';
@@ -9017,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 {
@@ -9489,6 +9383,10 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     var currentNode = getParentNode(element);
 
+    if (isShadowRoot(currentNode)) {
+      currentNode = currentNode.host;
+    }
+
     while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
       var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
       // create a containing block.
@@ -9721,7 +9619,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
       if (placement === top || (placement === left || placement === right) && variation === end) {
         sideY = bottom;
-        var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+        var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
         offsetParent[heightProp];
         y -= offsetY - popperRect.height;
         y *= gpuAcceleration ? 1 : -1;
@@ -9729,7 +9627,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
       if (placement === left || (placement === top || placement === bottom) && variation === end) {
         sideX = right;
-        var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+        var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
         offsetParent[widthProp];
         x -= offsetX - popperRect.width;
         x *= gpuAcceleration ? 1 : -1;
@@ -11887,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,
@@ -12092,7 +11990,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  Unstable_TrapFocus.propTypes
+  TrapFocus.propTypes
   /* remove-proptypes */
   = {
     // ----------------------------- Warning --------------------------------
@@ -12158,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) {
@@ -12169,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,
@@ -12316,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;
@@ -12410,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,
@@ -12437,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,
 
@@ -13177,7 +13076,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       stopListening();
     });
     const handleTouchStart = useEventCallback(nativeEvent => {
-      // If touch-action: none; is not supported we need to prevent the scroll manually.
+      if (disabled) {
+        return;
+      } // If touch-action: none; is not supported we need to prevent the scroll manually.
+
+
       if (!doesSupportTouchActionNone()) {
         nativeEvent.preventDefault();
       }
@@ -13249,6 +13152,10 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
       (_otherHandlers$onMous = otherHandlers.onMouseDown) == null ? void 0 : _otherHandlers$onMous.call(otherHandlers, event);
 
+      if (disabled) {
+        return;
+      }
+
       if (event.defaultPrevented) {
         return;
       } // Only handle left clicks
@@ -13382,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,
@@ -13498,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
     }), {
@@ -14589,6 +14496,7 @@ const theme2 = createTheme({ palette: {
   // like global values in the browser.
   const zIndex = {
     mobileStepper: 1000,
+    fab: 1050,
     speedDial: 1050,
     appBar: 1100,
     drawer: 1200,
@@ -14939,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,
@@ -15024,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),
@@ -15064,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'
      */
@@ -16159,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
@@ -16267,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);
@@ -16581,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,
@@ -16641,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
@@ -16748,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,
@@ -16892,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,
@@ -17017,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
@@ -17065,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,
@@ -17116,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;
@@ -17147,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,
@@ -17620,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,
@@ -17748,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(() => {
+      setMountedState(true);
+    }, []);
+    const enableTouchRipple = mountedState && !disableRipple && !disabled;
     React__namespace.useEffect(() => {
-      if (focusVisible && focusRipple && !disableRipple) {
+      if (focusVisible && focusRipple && !disableRipple && mountedState) {
         rippleRef.current.pulsate();
       }
-    }, [disableRipple, focusRipple, focusVisible]);
+    }, [disableRipple, focusRipple, focusVisible, mountedState]);
 
     function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {
       return useEventCallback(event => {
@@ -17896,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
@@ -17922,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),
@@ -18158,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,
@@ -18279,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,
@@ -18367,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,
@@ -18474,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,
@@ -18518,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
@@ -18595,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,
@@ -18719,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,
@@ -18791,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 */
@@ -18859,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,
@@ -18960,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,
@@ -19070,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;
@@ -19104,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",
@@ -19151,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,
@@ -19249,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",
@@ -19283,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
@@ -19311,6 +19227,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var AppBar$1 = AppBar;
 
+  const PopperRoot = styled$1(PopperUnstyled$1, {
+    name: 'MuiPopper',
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+  })({});
   /**
    *
    * Demos:
@@ -19323,9 +19244,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *
    * - [Popper API](https://mui.com/api/popper/)
    */
-  const Popper = /*#__PURE__*/React__namespace.forwardRef(function Popper(props, ref) {
+
+  const Popper = /*#__PURE__*/React__namespace.forwardRef(function Popper(inProps, ref) {
     const theme = useTheme$2();
-    return /*#__PURE__*/jsxRuntime_1(PopperUnstyled$1, _extends({
+    const props = useThemeProps({
+      props: inProps,
+      name: 'MuiPopper'
+    });
+    return /*#__PURE__*/jsxRuntime_1(PopperRoot, _extends({
       direction: theme == null ? void 0 : theme.direction
     }, props, {
       ref: ref
@@ -19429,6 +19355,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     popperRef: refType$1,
 
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+
     /**
      * Help supporting a react-transition-group/Transition component.
      * @default false
@@ -19445,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,
@@ -19518,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),
@@ -19598,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,
@@ -19932,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
@@ -20031,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
@@ -20214,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,
@@ -20626,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;
@@ -20712,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
@@ -20814,7 +20749,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
     /**
-     * If `true`, a `textarea` element is rendered.
+     * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
      * @default false
      */
     multiline: PropTypes.bool,
@@ -20954,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,
@@ -21377,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) {
@@ -21687,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.
@@ -22013,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,
@@ -22166,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({
@@ -22281,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;
@@ -22353,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)) {
@@ -22685,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', {
@@ -22721,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,
@@ -22730,6 +22674,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const {
       children,
+      component = 'div',
       components = {},
       componentsProps = {},
       className,
@@ -22742,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
@@ -22790,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.
@@ -23100,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
@@ -24096,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
@@ -24392,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
@@ -25670,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
@@ -25969,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
@@ -28356,6 +28312,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     minWidth: 0,
     width: 56,
     height: 56,
+    zIndex: theme.zIndex.fab,
     boxShadow: theme.shadows[6],
     '&:active': {
       boxShadow: theme.shadows[12]
@@ -28484,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']),
@@ -28773,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
@@ -28881,7 +28842,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
     /**
-     * If `true`, a `textarea` element is rendered.
+     * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
      * @default false
      */
     multiline: PropTypes.bool,
@@ -29186,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
@@ -29347,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);
@@ -29379,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
@@ -29452,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.
@@ -29907,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 */
@@ -30270,10 +30240,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const rowSpacing = rowSpacingProp || spacing;
     const columnSpacing = columnSpacingProp || spacing;
-    const columnsContext = React__namespace.useContext(GridContext$1); // setting prop before context to accomodate nesting
-    // colums set with default breakpoint unit of 12
+    const columnsContext = React__namespace.useContext(GridContext$1); // columns set with default breakpoint unit of 12
 
-    const columns = columnsProp || columnsContext || 12;
+    const columns = container ? columnsProp || 12 : columnsContext;
 
     const ownerState = _extends({}, props, {
       columns,
@@ -30292,18 +30261,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
 
     const classes = useUtilityClasses$_(ownerState);
-
-    const wrapChild = element => columns !== 12 ? /*#__PURE__*/jsxRuntime_1(GridContext$1.Provider, {
+    return /*#__PURE__*/jsxRuntime_1(GridContext$1.Provider, {
       value: columns,
-      children: element
-    }) : element;
-
-    return wrapChild( /*#__PURE__*/jsxRuntime_1(GridRoot, _extends({
-      ownerState: ownerState,
-      className: clsx(classes.root, className),
-      as: component,
-      ref: ref
-    }, other)));
+      children: /*#__PURE__*/jsxRuntime_1(GridRoot, _extends({
+        ownerState: ownerState,
+        className: clsx(classes.root, className),
+        as: component,
+        ref: ref
+      }, other))
+    });
   });
   Grid.propTypes
   /* remove-proptypes */
@@ -30488,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.
@@ -30561,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(',');
@@ -30597,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) {
@@ -31595,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
@@ -32382,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
@@ -32482,7 +32458,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
     /**
-     * If `true`, a `textarea` element is rendered.
+     * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
      * @default false
      */
     multiline: PropTypes.bool,
@@ -32892,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 */
@@ -33277,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
@@ -36773,7 +36753,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     '& > span': {
       paddingLeft: 5,
       paddingRight: 5,
-      display: 'inline-block'
+      display: 'inline-block',
+      opacity: 0,
+      visibility: 'visible'
     }
   }, ownerState.notched && {
     maxWidth: '100%',
@@ -37017,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
@@ -37109,7 +37093,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
     /**
-     * If `true`, a `textarea` element is rendered.
+     * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
      * @default false
      */
     multiline: PropTypes.bool,
@@ -37597,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
@@ -37821,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
@@ -38182,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
@@ -40906,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
@@ -41543,7 +41535,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         onMouseLeave: handleMouseLeave,
         ownerState: ownerState,
         ref: ref // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
-        // See https://github.com/mui-org/material-ui/issues/29080
+        // See https://github.com/mui/material-ui/issues/29080
         ,
         role: "presentation"
       }, other, {
@@ -45998,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
@@ -49418,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
@@ -49758,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
@@ -50034,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
@@ -50302,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;
@@ -50366,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;