@mui/material 5.2.2 → 5.2.3

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.2
+/** @license MUI v5.2.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -5434,6 +5434,23 @@
   validator.isRequired = requiredInteger;
   var integerPropType = validator;
 
+  /**
+   * Add keys, values of `defaultProps` that does not exist in `props`
+   * @param {object} defaultProps
+   * @param {object} props
+   * @returns {object} resolved props
+   */
+  function resolveProps(defaultProps, props) {
+    const output = _extends({}, props);
+
+    Object.keys(defaultProps).forEach(propName => {
+      if (output[propName] === undefined) {
+        output[propName] = defaultProps[propName];
+      }
+    });
+    return output;
+  }
+
   function merge(acc, item) {
     if (!item) {
       return acc;
@@ -6906,7 +6923,6 @@
     };
   }
 
-  /* eslint-disable no-restricted-syntax */
   function getThemeProps(params) {
     const {
       theme,
@@ -6918,20 +6934,7 @@
       return props;
     }
 
-    const output = _extends({}, props); // Resolve default props, code borrow from React source.
-    // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
-
-
-    const defaultProps = theme.components[name].defaultProps;
-    let propName;
-
-    for (propName in defaultProps) {
-      if (output[propName] === undefined) {
-        output[propName] = defaultProps[propName];
-      }
-    }
-
-    return output;
+    return resolveProps(theme.components[name].defaultProps, props);
   }
 
   function useThemeProps$1({
@@ -7369,6 +7372,49 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return theme;
   }
 
+  /**
+   * Determines if a given element is a DOM element name (i.e. not a React component).
+   */
+  function isHostComponent(element) {
+    return typeof element === 'string';
+  }
+
+  /**
+   * Appends the ownerState object to the props, merging with the existing one if necessary.
+   *
+   * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node, `ownerState` are not applied.
+   * @param existingProps Props of the element.
+   * @param ownerState
+   */
+
+  function appendOwnerState(elementType, existingProps = {}, ownerState) {
+    if (isHostComponent(elementType)) {
+      return existingProps;
+    }
+
+    return _extends({}, existingProps, {
+      ownerState: _extends({}, existingProps.ownerState, ownerState)
+    });
+  }
+
+  /**
+   * Extracts event handlers from a given object.
+   * A prop is considered an event handler if it is a function and its name starts with `on`.
+   *
+   * @param object An object to extract event handlers from.
+   */
+  function extractEventHandlers(object, excludeKeys = []) {
+    if (object === undefined) {
+      return {};
+    }
+
+    const result = {};
+    Object.keys(object).filter(prop => prop.match(/^on[A-Z]/) && typeof object[prop] === 'function' && !excludeKeys.includes(prop)).forEach(prop => {
+      result[prop] = object[prop];
+    });
+    return result;
+  }
+
   // Give up on IE11 support for this feature
 
   function stripDiacritics(string) {
@@ -8414,13 +8460,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return output;
   }
 
-  /**
-   * Determines if a given element is a DOM element name (i.e. not a React component).
-   */
-  function isHostComponent(element) {
-    return typeof element === 'string';
-  }
-
   const defaultGenerator = componentName => componentName;
 
   const createClassNameGenerator = () => {
@@ -8780,24 +8819,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   const buttonUnstyledClasses = generateUtilityClasses('ButtonUnstyled', ['root', 'active', 'disabled', 'focusVisible']);
   var buttonUnstyledClasses$1 = buttonUnstyledClasses;
 
-  /**
-   * Extracts event handlers from a given object.
-   * A prop is considered an event handler if it is a function and its name starts with `on`.
-   *
-   * @param object An object to extract event handlers from.
-   */
-  function extractEventHandlers(object, excludeKeys = []) {
-    if (object === undefined) {
-      return {};
-    }
-
-    const result = {};
-    Object.keys(object).filter(prop => prop.match(/^on[A-Z]/) && typeof object[prop] === 'function' && !excludeKeys.includes(prop)).forEach(prop => {
-      result[prop] = object[prop];
-    });
-    return result;
-  }
-
   function useButton(props) {
     var _ref;
 
@@ -8999,24 +9020,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  /**
-   * Appends the ownerState object to the props, merging with the existing one if necessary.
-   *
-   * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node, `ownerState` are not applied.
-   * @param existingProps Props of the element.
-   * @param ownerState
-   */
-
-  function appendOwnerState(elementType, existingProps, ownerState) {
-    if (isHostComponent(elementType)) {
-      return existingProps;
-    }
-
-    return _extends({}, existingProps, {
-      ownerState: _extends({}, existingProps.ownerState, ownerState)
-    });
-  }
-
   const _excluded$2k = ["className", "component", "components", "componentsProps", "children", "disabled", "action", "onBlur", "onClick", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseLeave"];
 
   const useUtilityClasses$1R = ownerState => {
@@ -9153,6 +9156,192 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var ButtonUnstyled$1 = ButtonUnstyled;
 
+  function mapEventPropToEvent(eventProp) {
+    return eventProp.substring(2).toLowerCase();
+  }
+
+  function clickedRootScrollbar(event, doc) {
+    return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;
+  }
+
+  /**
+   * Listen for click events that occur somewhere in the document, outside of the element itself.
+   * For instance, if you need to hide a menu when people click anywhere else on your page.
+   *
+   * Demos:
+   *
+   * - [Click Away Listener](https://mui.com/components/click-away-listener/)
+   * - [Menus](https://mui.com/components/menus/)
+   *
+   * API:
+   *
+   * - [ClickAwayListener API](https://mui.com/api/click-away-listener/)
+   */
+  function ClickAwayListener(props) {
+    const {
+      children,
+      disableReactTree = false,
+      mouseEvent = 'onClick',
+      onClickAway,
+      touchEvent = 'onTouchEnd'
+    } = props;
+    const movedRef = React__namespace.useRef(false);
+    const nodeRef = React__namespace.useRef(null);
+    const activatedRef = React__namespace.useRef(false);
+    const syntheticEventRef = React__namespace.useRef(false);
+    React__namespace.useEffect(() => {
+      // Ensure that this component is not "activated" synchronously.
+      // https://github.com/facebook/react/issues/20074
+      setTimeout(() => {
+        activatedRef.current = true;
+      }, 0);
+      return () => {
+        activatedRef.current = false;
+      };
+    }, []);
+    const handleRef = useForkRef( // @ts-expect-error TODO upstream fix
+    children.ref, nodeRef); // The handler doesn't take event.defaultPrevented into account:
+    //
+    // event.preventDefault() is meant to stop default behaviors like
+    // clicking a checkbox to check it, hitting a button to submit a form,
+    // and hitting left arrow to move the cursor in a text input etc.
+    // Only special HTML elements have these default behaviors.
+
+    const handleClickAway = useEventCallback(event => {
+      // Given developers can stop the propagation of the synthetic event,
+      // we can only be confident with a positive value.
+      const insideReactTree = syntheticEventRef.current;
+      syntheticEventRef.current = false;
+      const doc = ownerDocument(nodeRef.current); // 1. IE11 support, which trigger the handleClickAway even after the unbind
+      // 2. The child might render null.
+      // 3. Behave like a blur listener.
+
+      if (!activatedRef.current || !nodeRef.current || 'clientX' in event && clickedRootScrollbar(event, doc)) {
+        return;
+      } // Do not act if user performed touchmove
+
+
+      if (movedRef.current) {
+        movedRef.current = false;
+        return;
+      }
+
+      let insideDOM; // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
+
+      if (event.composedPath) {
+        insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
+      } else {
+        insideDOM = !doc.documentElement.contains( // @ts-expect-error returns `false` as intended when not dispatched from a Node
+        event.target) || nodeRef.current.contains( // @ts-expect-error returns `false` as intended when not dispatched from a Node
+        event.target);
+      }
+
+      if (!insideDOM && (disableReactTree || !insideReactTree)) {
+        onClickAway(event);
+      }
+    }); // Keep track of mouse/touch events that bubbled up through the portal.
+
+    const createHandleSynthetic = handlerName => event => {
+      syntheticEventRef.current = true;
+      const childrenPropsHandler = children.props[handlerName];
+
+      if (childrenPropsHandler) {
+        childrenPropsHandler(event);
+      }
+    };
+
+    const childrenProps = {
+      ref: handleRef
+    };
+
+    if (touchEvent !== false) {
+      childrenProps[touchEvent] = createHandleSynthetic(touchEvent);
+    }
+
+    React__namespace.useEffect(() => {
+      if (touchEvent !== false) {
+        const mappedTouchEvent = mapEventPropToEvent(touchEvent);
+        const doc = ownerDocument(nodeRef.current);
+
+        const handleTouchMove = () => {
+          movedRef.current = true;
+        };
+
+        doc.addEventListener(mappedTouchEvent, handleClickAway);
+        doc.addEventListener('touchmove', handleTouchMove);
+        return () => {
+          doc.removeEventListener(mappedTouchEvent, handleClickAway);
+          doc.removeEventListener('touchmove', handleTouchMove);
+        };
+      }
+
+      return undefined;
+    }, [handleClickAway, touchEvent]);
+
+    if (mouseEvent !== false) {
+      childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);
+    }
+
+    React__namespace.useEffect(() => {
+      if (mouseEvent !== false) {
+        const mappedMouseEvent = mapEventPropToEvent(mouseEvent);
+        const doc = ownerDocument(nodeRef.current);
+        doc.addEventListener(mappedMouseEvent, handleClickAway);
+        return () => {
+          doc.removeEventListener(mappedMouseEvent, handleClickAway);
+        };
+      }
+
+      return undefined;
+    }, [handleClickAway, mouseEvent]);
+    return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
+      children: /*#__PURE__*/React__namespace.cloneElement(children, childrenProps)
+    });
+  }
+
+  ClickAwayListener.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
+    // ----------------------------------------------------------------------
+
+    /**
+     * The wrapped element.
+     */
+    children: elementAcceptingRef$1.isRequired,
+
+    /**
+     * If `true`, the React tree is ignored and only the DOM tree is considered.
+     * This prop changes how portaled elements are handled.
+     * @default false
+     */
+    disableReactTree: propTypes.bool,
+
+    /**
+     * The mouse event to listen to. You can disable the listener by providing `false`.
+     * @default 'onClick'
+     */
+    mouseEvent: propTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', false]),
+
+    /**
+     * Callback fired when a "click away" event is detected.
+     */
+    onClickAway: propTypes.func.isRequired,
+
+    /**
+     * The touch event to listen to. You can disable the listener by providing `false`.
+     * @default 'onTouchEnd'
+     */
+    touchEvent: propTypes.oneOf(['onTouchEnd', 'onTouchStart', false])
+  } ;
+
+  {
+    // eslint-disable-next-line
+    ClickAwayListener['propTypes' + ''] = exactProp(ClickAwayListener.propTypes);
+  }
+
   /**
    * @ignore - internal component.
    */
@@ -14556,220 +14745,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var SwitchUnstyled$1 = SwitchUnstyled;
 
-  const _excluded$2d = ["onChange", "maxRows", "minRows", "style", "value"];
-
-  function getStyleValue(computedStyle, property) {
-    return parseInt(computedStyle[property], 10) || 0;
+  function getTabPanelUnstyledUtilityClass(slot) {
+    return generateUtilityClass('TabPanelUnstyled', slot);
   }
-
-  const styles$5 = {
-    shadow: {
-      // Visibility needed to hide the extra text area on iPads
-      visibility: 'hidden',
-      // Remove from the content flow
-      position: 'absolute',
-      // Ignore the scrollbar width
-      overflow: 'hidden',
-      height: 0,
-      top: 0,
-      left: 0,
-      // Create a new layer, increase the isolation of the computed values
-      transform: 'translateZ(0)'
-    }
-  };
-  const TextareaAutosize = /*#__PURE__*/React__namespace.forwardRef(function TextareaAutosize(props, ref) {
-    const {
-      onChange,
-      maxRows,
-      minRows = 1,
-      style,
-      value
-    } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2d);
-
-    const {
-      current: isControlled
-    } = React__namespace.useRef(value != null);
-    const inputRef = React__namespace.useRef(null);
-    const handleRef = useForkRef(ref, inputRef);
-    const shadowRef = React__namespace.useRef(null);
-    const renders = React__namespace.useRef(0);
-    const [state, setState] = React__namespace.useState({});
-    const syncHeight = React__namespace.useCallback(() => {
-      const input = inputRef.current;
-      const containerWindow = ownerWindow(input);
-      const computedStyle = containerWindow.getComputedStyle(input); // If input's width is shrunk and it's not visible, don't sync height.
-
-      if (computedStyle.width === '0px') {
-        return;
-      }
-
-      const inputShallow = shadowRef.current;
-      inputShallow.style.width = computedStyle.width;
-      inputShallow.value = input.value || props.placeholder || 'x';
-
-      if (inputShallow.value.slice(-1) === '\n') {
-        // Certain fonts which overflow the line height will cause the textarea
-        // to report a different scrollHeight depending on whether the last line
-        // is empty. Make it non-empty to avoid this issue.
-        inputShallow.value += ' ';
-      }
-
-      const boxSizing = computedStyle['box-sizing'];
-      const padding = getStyleValue(computedStyle, 'padding-bottom') + getStyleValue(computedStyle, 'padding-top');
-      const border = getStyleValue(computedStyle, 'border-bottom-width') + getStyleValue(computedStyle, 'border-top-width'); // The height of the inner content
-
-      const innerHeight = inputShallow.scrollHeight; // Measure height of a textarea with a single row
-
-      inputShallow.value = 'x';
-      const singleRowHeight = inputShallow.scrollHeight; // The height of the outer content
-
-      let outerHeight = innerHeight;
-
-      if (minRows) {
-        outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
-      }
-
-      if (maxRows) {
-        outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
-      }
-
-      outerHeight = Math.max(outerHeight, singleRowHeight); // Take the box sizing into account for applying this value as a style.
-
-      const outerHeightStyle = outerHeight + (boxSizing === 'border-box' ? padding + border : 0);
-      const overflow = Math.abs(outerHeight - innerHeight) <= 1;
-      setState(prevState => {
-        // Need a large enough difference to update the height.
-        // This prevents infinite rendering loop.
-        if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) {
-          renders.current += 1;
-          return {
-            overflow,
-            outerHeightStyle
-          };
-        }
-
-        {
-          if (renders.current === 20) {
-            console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n'));
-          }
-        }
-
-        return prevState;
-      });
-    }, [maxRows, minRows, props.placeholder]);
-    React__namespace.useEffect(() => {
-      const handleResize = debounce$1(() => {
-        renders.current = 0;
-        syncHeight();
-      });
-      const containerWindow = ownerWindow(inputRef.current);
-      containerWindow.addEventListener('resize', handleResize);
-      let resizeObserver;
-
-      if (typeof ResizeObserver !== 'undefined') {
-        resizeObserver = new ResizeObserver(handleResize);
-        resizeObserver.observe(inputRef.current);
-      }
-
-      return () => {
-        handleResize.clear();
-        containerWindow.removeEventListener('resize', handleResize);
-
-        if (resizeObserver) {
-          resizeObserver.disconnect();
-        }
-      };
-    }, [syncHeight]);
-    useEnhancedEffect$1(() => {
-      syncHeight();
-    });
-    React__namespace.useEffect(() => {
-      renders.current = 0;
-    }, [value]);
-
-    const handleChange = event => {
-      renders.current = 0;
-
-      if (!isControlled) {
-        syncHeight();
-      }
-
-      if (onChange) {
-        onChange(event);
-      }
-    };
-
-    return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime_1("textarea", _extends({
-        value: value,
-        onChange: handleChange,
-        ref: handleRef // Apply the rows prop to get a "correct" first SSR paint
-        ,
-        rows: minRows,
-        style: _extends({
-          height: state.outerHeightStyle,
-          // Need a large enough difference to allow scrolling.
-          // This prevents infinite rendering loop.
-          overflow: state.overflow ? 'hidden' : null
-        }, style)
-      }, other)), /*#__PURE__*/jsxRuntime_1("textarea", {
-        "aria-hidden": true,
-        className: props.className,
-        readOnly: true,
-        ref: shadowRef,
-        tabIndex: -1,
-        style: _extends({}, styles$5.shadow, style, {
-          padding: 0
-        })
-      })]
-    });
-  });
-  TextareaAutosize.propTypes
-  /* remove-proptypes */
-  = {
-    // ----------------------------- Warning --------------------------------
-    // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
-    // ----------------------------------------------------------------------
-
-    /**
-     * @ignore
-     */
-    className: propTypes.string,
-
-    /**
-     * Maximum number of rows to display.
-     */
-    maxRows: propTypes.oneOfType([propTypes.number, propTypes.string]),
-
-    /**
-     * Minimum number of rows to display.
-     * @default 1
-     */
-    minRows: propTypes.oneOfType([propTypes.number, propTypes.string]),
-
-    /**
-     * @ignore
-     */
-    onChange: propTypes.func,
-
-    /**
-     * @ignore
-     */
-    placeholder: propTypes.string,
-
-    /**
-     * @ignore
-     */
-    style: propTypes.object,
-
-    /**
-     * @ignore
-     */
-    value: propTypes.oneOfType([propTypes.arrayOf(propTypes.string), propTypes.number, propTypes.string])
-  } ;
-  var TextareaAutosize$1 = TextareaAutosize;
+  const tabPanelUnstyledClasses = generateUtilityClasses('TabPanelUnstyled', ['root', 'hidden']);
+  var tabPanelUnstyledClasses$1 = tabPanelUnstyledClasses;
 
   function getTabsUnstyledUtilityClass(slot) {
     return generateUtilityClass('TabsUnstyled', slot);
@@ -14863,7 +14843,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   }
   var Context$1 = Context;
 
-  const _excluded$2c = ["children", "className", "value", "defaultValue", "orientation", "direction", "component", "components", "componentsProps", "onChange", "selectionFollowsFocus"];
+  const _excluded$2d = ["children", "className", "value", "defaultValue", "orientation", "direction", "component", "components", "componentsProps", "onChange", "selectionFollowsFocus"];
 
   const useUtilityClasses$1O = ownerState => {
     const {
@@ -14898,7 +14878,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       components = {},
       componentsProps = {}
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2c);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2d);
 
     const {
       tabsContextValue,
@@ -14997,101 +14977,46 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var TabsUnstyled$1 = TabsUnstyled;
 
-  function getTabUnstyledUtilityClass(slot) {
-    return generateUtilityClass('TabUnstyled', slot);
-  }
-  const tabUnstyledClasses = generateUtilityClasses('TabUnstyled', ['root', 'selected', 'disabled']);
-  var tabUnstyledClasses$1 = tabUnstyledClasses;
-
-  const _excluded$2b = ["getRootProps"];
-
-  const useTab = props => {
+  const useTabPanel = props => {
     const {
-      value: valueProp,
-      onChange,
-      onClick,
-      onFocus
+      value
     } = props;
-
-    const _useButton = useButton(props),
-          {
-      getRootProps: getRootPropsButton
-    } = _useButton,
-          otherButtonProps = _objectWithoutPropertiesLoose(_useButton, _excluded$2b);
-
     const context = useTabContext();
 
     if (context === null) {
       throw new Error('No TabContext provided');
     }
 
-    const value = valueProp != null ? valueProp : 0;
-    const selected = context.value === value;
-    const selectionFollowsFocus = context.selectionFollowsFocus;
-    const a11yAttributes = {
-      role: 'tab',
-      'aria-controls': getPanelId(context, value),
-      id: getTabId(context, value),
-      'aria-selected': selected,
-      disabled: otherButtonProps.disabled
-    };
-
-    const handleFocus = event => {
-      if (selectionFollowsFocus && !selected) {
-        if (onChange) {
-          onChange(event, value);
-        }
-
-        context.onSelected(event, value);
-      }
-
-      if (onFocus) {
-        onFocus(event);
-      }
-    };
-
-    const handleClick = event => {
-      if (!selected) {
-        if (onChange) {
-          onChange(event, value);
-        }
-
-        context.onSelected(event, value);
-      }
-
-      if (onClick) {
-        onClick(event);
-      }
-    };
+    const hidden = value !== context.value;
+    const id = getPanelId(context, value);
+    const tabId = getTabId(context, value);
 
-    const getRootProps = otherHandlers => {
-      const buttonResolvedProps = getRootPropsButton(_extends({
-        onClick: handleClick,
-        onFocus: handleFocus
-      }, otherHandlers));
-      return _extends({}, buttonResolvedProps, a11yAttributes);
+    const getRootProps = () => {
+      return {
+        'aria-labelledby': tabId,
+        hidden,
+        id
+      };
     };
 
-    return _extends({
+    return {
+      hidden,
       getRootProps
-    }, otherButtonProps, {
-      selected
-    });
+    };
   };
 
-  var useTab$1 = useTab;
+  var useTabPanel$1 = useTabPanel;
 
-  const _excluded$2a = ["action", "children", "value", "className", "disabled", "onChange", "onClick", "onFocus", "component", "components", "componentsProps"];
+  const _excluded$2c = ["children", "className", "value", "components", "componentsProps", "component"];
 
   const useUtilityClasses$1N = ownerState => {
     const {
-      selected,
-      disabled
+      hidden
     } = ownerState;
     const slots = {
-      root: ['root', selected && 'selected', disabled && 'disabled']
+      root: ['root', hidden && 'hidden']
     };
-    return composeClasses(slots, getTabUnstyledUtilityClass, {});
+    return composeClasses(slots, getTabPanelUnstyledUtilityClass, {});
   };
   /**
    *
@@ -15101,59 +15026,43 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *
    * API:
    *
-   * - [TabUnstyled API](https://mui.com/api/tab-unstyled/)
+   * - [TabPanelUnstyled API](https://mui.com/api/tab-panel-unstyled/)
    */
 
 
-  const TabUnstyled = /*#__PURE__*/React__namespace.forwardRef(function TabUnstyled(props, ref) {
+  const TabPanelUnstyled = /*#__PURE__*/React__namespace.forwardRef(function TabPanelUnstyled(props, ref) {
     var _ref, _componentsProps$root;
 
     const {
-      action,
       children,
       className,
-      disabled = false,
-      component,
       components = {},
-      componentsProps = {}
+      componentsProps = {},
+      component
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2a);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2c);
 
-    const tabRef = React__namespace.useRef();
-    const handleRef = useForkRef(tabRef, ref);
     const {
-      active,
-      focusVisible,
-      setFocusVisible,
-      selected,
+      hidden,
       getRootProps
-    } = useTab$1(_extends({}, props, {
-      ref: handleRef
-    }));
-    React__namespace.useImperativeHandle(action, () => ({
-      focusVisible: () => {
-        setFocusVisible(true);
-        tabRef.current.focus();
-      }
-    }), [setFocusVisible]);
+    } = useTabPanel$1(props);
 
     const ownerState = _extends({}, props, {
-      active,
-      focusVisible,
-      disabled,
-      selected
+      hidden
     });
 
     const classes = useUtilityClasses$1N(ownerState);
-    const TabRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'button';
-    const tabRootProps = appendOwnerState(TabRoot, _extends({}, other, componentsProps.root), ownerState);
-    return /*#__PURE__*/jsxRuntime_1(TabRoot, _extends({}, getRootProps(), tabRootProps, {
-      className: clsx(classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, className),
+    const TabPanelRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
+    const tabPanelRootProps = appendOwnerState(TabPanelRoot, _extends({}, other, componentsProps.root), ownerState);
+    return /*#__PURE__*/jsxRuntime_1(TabPanelRoot, _extends({}, getRootProps(), {
       ref: ref,
-      children: children
+      role: "tabpanel"
+    }, tabPanelRootProps, {
+      className: clsx(classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, className),
+      children: !hidden && children
     }));
   });
-  TabUnstyled.propTypes
+  TabPanelUnstyled.propTypes
   /* remove-proptypes */
   = {
     // ----------------------------- Warning --------------------------------
@@ -15162,16 +15071,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     // ----------------------------------------------------------------------
 
     /**
-     * A ref for imperative actions. It currently only supports `focusVisible()` action.
-     */
-    action: propTypes.oneOfType([propTypes.func, propTypes.shape({
-      current: propTypes.shape({
-        focusVisible: propTypes.func.isRequired
-      })
-    })]),
-
-    /**
-     * @ignore
+     * The content of the component.
      */
     children: propTypes.node,
 
@@ -15187,7 +15087,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     component: propTypes.elementType,
 
     /**
-     * The components used for each slot inside the Tab.
+     * The components used for each slot inside the TabPanel.
      * Either a string to use a HTML element or a component.
      * @default {}
      */
@@ -15196,38 +15096,17 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }),
 
     /**
-     * The props used for each slot inside the Tab.
+     * The props used for each slot inside the TabPanel.
      * @default {}
      */
     componentsProps: propTypes.object,
 
     /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled: propTypes.bool,
-
-    /**
-     * Callback invoked when new value is being set.
-     */
-    onChange: propTypes.func,
-
-    /**
-     * @ignore
-     */
-    onClick: propTypes.func,
-
-    /**
-     * @ignore
-     */
-    onFocus: propTypes.func,
-
-    /**
-     * You can provide your own value. Otherwise, we fall back to the child position index.
+     * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
      */
-    value: propTypes.oneOfType([propTypes.number, propTypes.string])
+    value: propTypes.oneOfType([propTypes.number, propTypes.string]).isRequired
   } ;
-  var TabUnstyled$1 = TabUnstyled;
+  var TabPanelUnstyled$1 = TabPanelUnstyled;
 
   function getTabsListUnstyledUtilityClass(slot) {
     return generateUtilityClass('TabsListUnstyled', slot);
@@ -15425,7 +15304,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   var useTabsList$1 = useTabsList;
 
-  const _excluded$29 = ["className", "children", "component", "components", "componentsProps"];
+  const _excluded$2b = ["className", "children", "component", "components", "componentsProps"];
 
   const useUtilityClasses$1M = ownerState => {
     const {
@@ -15457,7 +15336,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       components = {},
       componentsProps = {}
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$29);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2b);
 
     const {
       isRtl,
@@ -15523,52 +15402,101 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var TabsListUnstyled$1 = TabsListUnstyled;
 
-  function getTabPanelUnstyledUtilityClass(slot) {
-    return generateUtilityClass('TabPanelUnstyled', slot);
+  function getTabUnstyledUtilityClass(slot) {
+    return generateUtilityClass('TabUnstyled', slot);
   }
-  const tabPanelUnstyledClasses = generateUtilityClasses('TabPanelUnstyled', ['root', 'hidden']);
-  var tabPanelUnstyledClasses$1 = tabPanelUnstyledClasses;
+  const tabUnstyledClasses = generateUtilityClasses('TabUnstyled', ['root', 'selected', 'disabled']);
+  var tabUnstyledClasses$1 = tabUnstyledClasses;
 
-  const useTabPanel = props => {
+  const _excluded$2a = ["getRootProps"];
+
+  const useTab = props => {
     const {
-      value
+      value: valueProp,
+      onChange,
+      onClick,
+      onFocus
     } = props;
+
+    const _useButton = useButton(props),
+          {
+      getRootProps: getRootPropsButton
+    } = _useButton,
+          otherButtonProps = _objectWithoutPropertiesLoose(_useButton, _excluded$2a);
+
     const context = useTabContext();
 
     if (context === null) {
       throw new Error('No TabContext provided');
     }
 
-    const hidden = value !== context.value;
-    const id = getPanelId(context, value);
-    const tabId = getTabId(context, value);
+    const value = valueProp != null ? valueProp : 0;
+    const selected = context.value === value;
+    const selectionFollowsFocus = context.selectionFollowsFocus;
+    const a11yAttributes = {
+      role: 'tab',
+      'aria-controls': getPanelId(context, value),
+      id: getTabId(context, value),
+      'aria-selected': selected,
+      disabled: otherButtonProps.disabled
+    };
 
-    const getRootProps = () => {
-      return {
-        'aria-labelledby': tabId,
-        hidden,
-        id
-      };
+    const handleFocus = event => {
+      if (selectionFollowsFocus && !selected) {
+        if (onChange) {
+          onChange(event, value);
+        }
+
+        context.onSelected(event, value);
+      }
+
+      if (onFocus) {
+        onFocus(event);
+      }
     };
 
-    return {
-      hidden,
-      getRootProps
+    const handleClick = event => {
+      if (!selected) {
+        if (onChange) {
+          onChange(event, value);
+        }
+
+        context.onSelected(event, value);
+      }
+
+      if (onClick) {
+        onClick(event);
+      }
+    };
+
+    const getRootProps = otherHandlers => {
+      const buttonResolvedProps = getRootPropsButton(_extends({
+        onClick: handleClick,
+        onFocus: handleFocus
+      }, otherHandlers));
+      return _extends({}, buttonResolvedProps, a11yAttributes);
     };
+
+    return _extends({
+      getRootProps
+    }, otherButtonProps, {
+      selected
+    });
   };
 
-  var useTabPanel$1 = useTabPanel;
+  var useTab$1 = useTab;
 
-  const _excluded$28 = ["children", "className", "value", "components", "componentsProps", "component"];
+  const _excluded$29 = ["action", "children", "value", "className", "disabled", "onChange", "onClick", "onFocus", "component", "components", "componentsProps"];
 
   const useUtilityClasses$1L = ownerState => {
     const {
-      hidden
+      selected,
+      disabled
     } = ownerState;
     const slots = {
-      root: ['root', hidden && 'hidden']
+      root: ['root', selected && 'selected', disabled && 'disabled']
     };
-    return composeClasses(slots, getTabPanelUnstyledUtilityClass, {});
+    return composeClasses(slots, getTabUnstyledUtilityClass, {});
   };
   /**
    *
@@ -15578,43 +15506,59 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *
    * API:
    *
-   * - [TabPanelUnstyled API](https://mui.com/api/tab-panel-unstyled/)
+   * - [TabUnstyled API](https://mui.com/api/tab-unstyled/)
    */
 
 
-  const TabPanelUnstyled = /*#__PURE__*/React__namespace.forwardRef(function TabPanelUnstyled(props, ref) {
+  const TabUnstyled = /*#__PURE__*/React__namespace.forwardRef(function TabUnstyled(props, ref) {
     var _ref, _componentsProps$root;
 
     const {
+      action,
       children,
       className,
+      disabled = false,
+      component,
       components = {},
-      componentsProps = {},
-      component
+      componentsProps = {}
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$28);
+          other = _objectWithoutPropertiesLoose(props, _excluded$29);
 
+    const tabRef = React__namespace.useRef();
+    const handleRef = useForkRef(tabRef, ref);
     const {
-      hidden,
+      active,
+      focusVisible,
+      setFocusVisible,
+      selected,
       getRootProps
-    } = useTabPanel$1(props);
+    } = useTab$1(_extends({}, props, {
+      ref: handleRef
+    }));
+    React__namespace.useImperativeHandle(action, () => ({
+      focusVisible: () => {
+        setFocusVisible(true);
+        tabRef.current.focus();
+      }
+    }), [setFocusVisible]);
 
     const ownerState = _extends({}, props, {
-      hidden
+      active,
+      focusVisible,
+      disabled,
+      selected
     });
 
     const classes = useUtilityClasses$1L(ownerState);
-    const TabPanelRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
-    const tabPanelRootProps = appendOwnerState(TabPanelRoot, _extends({}, other, componentsProps.root), ownerState);
-    return /*#__PURE__*/jsxRuntime_1(TabPanelRoot, _extends({}, getRootProps(), {
-      ref: ref,
-      role: "tabpanel"
-    }, tabPanelRootProps, {
+    const TabRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'button';
+    const tabRootProps = appendOwnerState(TabRoot, _extends({}, other, componentsProps.root), ownerState);
+    return /*#__PURE__*/jsxRuntime_1(TabRoot, _extends({}, getRootProps(), tabRootProps, {
       className: clsx(classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, className),
-      children: !hidden && children
+      ref: ref,
+      children: children
     }));
   });
-  TabPanelUnstyled.propTypes
+  TabUnstyled.propTypes
   /* remove-proptypes */
   = {
     // ----------------------------- Warning --------------------------------
@@ -15623,7 +15567,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     // ----------------------------------------------------------------------
 
     /**
-     * The content of the component.
+     * A ref for imperative actions. It currently only supports `focusVisible()` action.
+     */
+    action: propTypes.oneOfType([propTypes.func, propTypes.shape({
+      current: propTypes.shape({
+        focusVisible: propTypes.func.isRequired
+      })
+    })]),
+
+    /**
+     * @ignore
      */
     children: propTypes.node,
 
@@ -15639,7 +15592,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     component: propTypes.elementType,
 
     /**
-     * The components used for each slot inside the TabPanel.
+     * The components used for each slot inside the Tab.
      * Either a string to use a HTML element or a component.
      * @default {}
      */
@@ -15648,17 +15601,253 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }),
 
     /**
-     * The props used for each slot inside the TabPanel.
+     * The props used for each slot inside the Tab.
      * @default {}
      */
     componentsProps: propTypes.object,
 
     /**
-     * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
+     * If `true`, the component is disabled.
+     * @default false
      */
-    value: propTypes.oneOfType([propTypes.number, propTypes.string]).isRequired
+    disabled: propTypes.bool,
+
+    /**
+     * Callback invoked when new value is being set.
+     */
+    onChange: propTypes.func,
+
+    /**
+     * @ignore
+     */
+    onClick: propTypes.func,
+
+    /**
+     * @ignore
+     */
+    onFocus: propTypes.func,
+
+    /**
+     * You can provide your own value. Otherwise, we fall back to the child position index.
+     */
+    value: propTypes.oneOfType([propTypes.number, propTypes.string])
   } ;
-  var TabPanelUnstyled$1 = TabPanelUnstyled;
+  var TabUnstyled$1 = TabUnstyled;
+
+  const _excluded$28 = ["onChange", "maxRows", "minRows", "style", "value"];
+
+  function getStyleValue(computedStyle, property) {
+    return parseInt(computedStyle[property], 10) || 0;
+  }
+
+  const styles$5 = {
+    shadow: {
+      // Visibility needed to hide the extra text area on iPads
+      visibility: 'hidden',
+      // Remove from the content flow
+      position: 'absolute',
+      // Ignore the scrollbar width
+      overflow: 'hidden',
+      height: 0,
+      top: 0,
+      left: 0,
+      // Create a new layer, increase the isolation of the computed values
+      transform: 'translateZ(0)'
+    }
+  };
+  const TextareaAutosize = /*#__PURE__*/React__namespace.forwardRef(function TextareaAutosize(props, ref) {
+    const {
+      onChange,
+      maxRows,
+      minRows = 1,
+      style,
+      value
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded$28);
+
+    const {
+      current: isControlled
+    } = React__namespace.useRef(value != null);
+    const inputRef = React__namespace.useRef(null);
+    const handleRef = useForkRef(ref, inputRef);
+    const shadowRef = React__namespace.useRef(null);
+    const renders = React__namespace.useRef(0);
+    const [state, setState] = React__namespace.useState({});
+    const syncHeight = React__namespace.useCallback(() => {
+      const input = inputRef.current;
+      const containerWindow = ownerWindow(input);
+      const computedStyle = containerWindow.getComputedStyle(input); // If input's width is shrunk and it's not visible, don't sync height.
+
+      if (computedStyle.width === '0px') {
+        return;
+      }
+
+      const inputShallow = shadowRef.current;
+      inputShallow.style.width = computedStyle.width;
+      inputShallow.value = input.value || props.placeholder || 'x';
+
+      if (inputShallow.value.slice(-1) === '\n') {
+        // Certain fonts which overflow the line height will cause the textarea
+        // to report a different scrollHeight depending on whether the last line
+        // is empty. Make it non-empty to avoid this issue.
+        inputShallow.value += ' ';
+      }
+
+      const boxSizing = computedStyle['box-sizing'];
+      const padding = getStyleValue(computedStyle, 'padding-bottom') + getStyleValue(computedStyle, 'padding-top');
+      const border = getStyleValue(computedStyle, 'border-bottom-width') + getStyleValue(computedStyle, 'border-top-width'); // The height of the inner content
+
+      const innerHeight = inputShallow.scrollHeight; // Measure height of a textarea with a single row
+
+      inputShallow.value = 'x';
+      const singleRowHeight = inputShallow.scrollHeight; // The height of the outer content
+
+      let outerHeight = innerHeight;
+
+      if (minRows) {
+        outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
+      }
+
+      if (maxRows) {
+        outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
+      }
+
+      outerHeight = Math.max(outerHeight, singleRowHeight); // Take the box sizing into account for applying this value as a style.
+
+      const outerHeightStyle = outerHeight + (boxSizing === 'border-box' ? padding + border : 0);
+      const overflow = Math.abs(outerHeight - innerHeight) <= 1;
+      setState(prevState => {
+        // Need a large enough difference to update the height.
+        // This prevents infinite rendering loop.
+        if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) {
+          renders.current += 1;
+          return {
+            overflow,
+            outerHeightStyle
+          };
+        }
+
+        {
+          if (renders.current === 20) {
+            console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n'));
+          }
+        }
+
+        return prevState;
+      });
+    }, [maxRows, minRows, props.placeholder]);
+    React__namespace.useEffect(() => {
+      const handleResize = debounce$1(() => {
+        renders.current = 0;
+        syncHeight();
+      });
+      const containerWindow = ownerWindow(inputRef.current);
+      containerWindow.addEventListener('resize', handleResize);
+      let resizeObserver;
+
+      if (typeof ResizeObserver !== 'undefined') {
+        resizeObserver = new ResizeObserver(handleResize);
+        resizeObserver.observe(inputRef.current);
+      }
+
+      return () => {
+        handleResize.clear();
+        containerWindow.removeEventListener('resize', handleResize);
+
+        if (resizeObserver) {
+          resizeObserver.disconnect();
+        }
+      };
+    }, [syncHeight]);
+    useEnhancedEffect$1(() => {
+      syncHeight();
+    });
+    React__namespace.useEffect(() => {
+      renders.current = 0;
+    }, [value]);
+
+    const handleChange = event => {
+      renders.current = 0;
+
+      if (!isControlled) {
+        syncHeight();
+      }
+
+      if (onChange) {
+        onChange(event);
+      }
+    };
+
+    return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime_1("textarea", _extends({
+        value: value,
+        onChange: handleChange,
+        ref: handleRef // Apply the rows prop to get a "correct" first SSR paint
+        ,
+        rows: minRows,
+        style: _extends({
+          height: state.outerHeightStyle,
+          // Need a large enough difference to allow scrolling.
+          // This prevents infinite rendering loop.
+          overflow: state.overflow ? 'hidden' : null
+        }, style)
+      }, other)), /*#__PURE__*/jsxRuntime_1("textarea", {
+        "aria-hidden": true,
+        className: props.className,
+        readOnly: true,
+        ref: shadowRef,
+        tabIndex: -1,
+        style: _extends({}, styles$5.shadow, style, {
+          padding: 0
+        })
+      })]
+    });
+  });
+  TextareaAutosize.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // ----------------------------------------------------------------------
+
+    /**
+     * @ignore
+     */
+    className: propTypes.string,
+
+    /**
+     * Maximum number of rows to display.
+     */
+    maxRows: propTypes.oneOfType([propTypes.number, propTypes.string]),
+
+    /**
+     * Minimum number of rows to display.
+     * @default 1
+     */
+    minRows: propTypes.oneOfType([propTypes.number, propTypes.string]),
+
+    /**
+     * @ignore
+     */
+    onChange: propTypes.func,
+
+    /**
+     * @ignore
+     */
+    placeholder: propTypes.string,
+
+    /**
+     * @ignore
+     */
+    style: propTypes.object,
+
+    /**
+     * @ignore
+     */
+    value: propTypes.oneOfType([propTypes.arrayOf(propTypes.string), propTypes.number, propTypes.string])
+  } ;
+  var TextareaAutosize$1 = TextareaAutosize;
 
   function createMixins(breakpoints, spacing, mixins) {
     return _extends({
@@ -16700,7 +16889,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Provides a human-readable title for the element that contains it.
@@ -18124,7 +18313,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The duration for the transition, in milliseconds.
@@ -18296,7 +18485,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -18573,7 +18762,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The component used for the transition.
@@ -18584,7 +18773,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
      */
     TransitionProps: propTypes.object
   } ;
@@ -18685,7 +18874,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var AccordionActions$1 = AccordionActions;
 
@@ -18761,7 +18950,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var AccordionDetails$1 = AccordionDetails;
 
@@ -19607,7 +19796,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * This prop can help identify which element has keyboard focus.
      * The class name will be applied when the element gains the focus through keyboard interaction.
      * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md).
+     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
      * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
      * if needed.
      */
@@ -19700,7 +19889,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * @default 0
@@ -19904,7 +20093,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * This prop can help identify which element has keyboard focus.
      * The class name will be applied when the element gains the focus through keyboard interaction.
      * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md).
+     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
      * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
      * if needed.
      */
@@ -19918,7 +20107,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var AccordionSummary$1 = AccordionSummary;
 
@@ -20136,7 +20325,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var IconButton$1 = IconButton;
 
@@ -20197,7 +20386,6 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     const getBackgroundColor = theme.palette.mode === 'light' ? lighten : darken;
     const color = ownerState.color || ownerState.severity;
     return _extends({}, theme.typography.body2, {
-      borderRadius: theme.shape.borderRadius,
       backgroundColor: 'transparent',
       display: 'flex',
       padding: '6px 16px'
@@ -20292,7 +20480,6 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     const classes = useUtilityClasses$1B(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AlertRoot, _extends({
       role: role,
-      square: true,
       elevation: 0,
       ownerState: ownerState,
       className: clsx(classes.root, className),
@@ -20410,7 +20597,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -20598,7 +20785,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Applies the theme typography styles.
@@ -20710,7 +20897,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var AlertTitle$1 = AlertTitle;
 
@@ -20878,7 +21065,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var AppBar$1 = AppBar;
 
@@ -21153,7 +21340,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var ListSubheader$1 = ListSubheader;
 
@@ -21667,7 +21854,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -22734,7 +22921,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the autocomplete.
@@ -23008,7 +23195,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The shape of the avatar.
@@ -23026,7 +23213,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   const avatarGroupClasses = generateUtilityClasses('MuiAvatarGroup', ['root', 'avatar']);
   var avatarGroupClasses$1 = avatarGroupClasses;
 
-  const _excluded$1N = ["children", "className", "max", "spacing", "variant"];
+  const _excluded$1N = ["children", "className", "max", "spacing", "total", "variant"];
   const SPACINGS$1 = {
     small: -16,
     medium: null
@@ -23088,11 +23275,12 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       className,
       max = 5,
       spacing = 'medium',
+      total,
       variant = 'circular'
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$1N);
 
-    const clampedMax = max < 2 ? 2 : max;
+    let clampedMax = max < 2 ? 2 : max;
 
     const ownerState = _extends({}, props, {
       max,
@@ -23110,7 +23298,15 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
       return /*#__PURE__*/React__namespace.isValidElement(child);
     });
-    const extraAvatars = children.length > clampedMax ? children.length - clampedMax + 1 : 0;
+    const totalAvatars = total || children.length;
+
+    if (totalAvatars === clampedMax) {
+      clampedMax += 1;
+    }
+
+    clampedMax = Math.min(totalAvatars + 1, clampedMax);
+    const maxAvatars = Math.min(children.length, clampedMax - 1);
+    const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
     const marginLeft = spacing && SPACINGS$1[spacing] !== undefined ? SPACINGS$1[spacing] : -spacing;
     return /*#__PURE__*/jsxRuntime_2(AvatarGroupRoot, _extends({
       ownerState: ownerState,
@@ -23125,7 +23321,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         },
         variant: variant,
         children: ["+", extraAvatars]
-      }) : null, children.slice(0, children.length - extraAvatars).reverse().map(child => {
+      }) : null, children.slice(0, maxAvatars).reverse().map(child => {
         return /*#__PURE__*/React__namespace.cloneElement(child, {
           className: clsx(child.props.className, classes.avatar),
           style: _extends({
@@ -23180,7 +23376,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
+
+    /**
+     * The total number of avatars. Used for calculating the number of extra avatars.
+     * @default children.length
+     */
+    total: propTypes.number,
 
     /**
      * The variant to use.
@@ -23542,7 +23744,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The duration for the transition, in milliseconds.
@@ -23844,7 +24046,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -23982,7 +24184,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the currently selected `BottomNavigationAction`.
@@ -24162,7 +24364,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * You can provide your own value. Otherwise, we fallback to the child position index.
@@ -24471,7 +24673,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var Breadcrumbs$1 = Breadcrumbs;
 
@@ -24492,7 +24694,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
   var ButtonGroupContext$1 = ButtonGroupContext;
 
-  const _excluded$1G = ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
+  const _excluded$1G = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 
   const useUtilityClasses$1p = ownerState => {
     const {
@@ -24693,51 +24895,32 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     marginRight: -2
   }, commonIconStyles(ownerState)));
   const Button = /*#__PURE__*/React__namespace.forwardRef(function Button(inProps, ref) {
+    // props priority: `inProps` > `contextProps` > `themeDefaultProps`
+    const contextProps = React__namespace.useContext(ButtonGroupContext$1);
+    const resolvedProps = resolveProps(contextProps, inProps);
     const props = useThemeProps({
-      props: inProps,
+      props: resolvedProps,
       name: 'MuiButton'
     });
-    const {
-      className: classNameContext,
-      color: colorContext,
-      disabled: disabledContext,
-      disableElevation: disableElevationContext,
-      disableFocusRipple: disableFocusRippleContext,
-      disableRipple: disableRippleContext,
-      fullWidth: fullWidthContext,
-      size: sizeContext,
-      variant: variantContext
-    } = React__namespace.useContext(ButtonGroupContext$1);
 
     const {
       children,
-      className,
-      color: colorProp,
+      color = 'primary',
       component = 'button',
-      disabled: disabledProp,
-      disableElevation: disableElevationProp,
-      disableFocusRipple: disableFocusRippleProp,
-      disableRipple: disableRippleProp,
+      className,
+      disabled = false,
+      disableElevation = false,
+      disableFocusRipple = false,
       endIcon: endIconProp,
       focusVisibleClassName,
-      fullWidth: fullWidthProp,
-      size: sizeProp,
+      fullWidth = false,
+      size = 'medium',
       startIcon: startIconProp,
       type,
-      variant: variantProp
+      variant = 'text'
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$1G);
 
-    const color = colorProp || colorContext || 'primary'; // TODO v6: Use nullish coalescing (??) instead of OR operator for these boolean props so that these boolean props for Button with ButtonGroup context take priority. See conversation from https://github.com/mui-org/material-ui/pull/28645#discussion_r738380902.
-
-    const disabled = disabledProp || disabledContext || false;
-    const disableElevation = disableElevationProp || disableElevationContext || false;
-    const disableFocusRipple = disableFocusRippleProp || disableFocusRippleContext || false;
-    const fullWidth = fullWidthProp || fullWidthContext || false;
-    const size = sizeProp || sizeContext || 'medium';
-    const variant = variantProp || variantContext || 'text';
-    const disableRipple = disableRippleProp || disableRippleContext || false;
-
     const ownerState = _extends({}, props, {
       color,
       component,
@@ -24766,10 +24949,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     return /*#__PURE__*/jsxRuntime_2(ButtonRoot, _extends({
       ownerState: ownerState,
-      className: clsx(className, classNameContext),
+      className: clsx(className, contextProps.className),
       component: component,
       disabled: disabled,
-      disableRipple: disableRipple,
       focusRipple: !disableFocusRipple,
       focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
       ref: ref,
@@ -24882,7 +25064,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * @ignore
@@ -25160,7 +25342,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -25261,7 +25443,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var Card$1 = Card;
 
@@ -25383,7 +25565,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var CardActionArea$1 = CardActionArea;
 
@@ -25481,7 +25663,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var CardActions$1 = CardActions;
 
@@ -25571,7 +25753,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var CardContent$1 = CardContent;
 
@@ -25774,7 +25956,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The content of the component.
@@ -25934,7 +26116,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var CardMedia$1 = CardMedia;
 
@@ -26480,7 +26662,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the component. The DOM API casts this to a string.
@@ -26732,7 +26914,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The thickness of the circle.
@@ -26756,192 +26938,6 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   } ;
   var CircularProgress$1 = CircularProgress;
 
-  function mapEventPropToEvent(eventProp) {
-    return eventProp.substring(2).toLowerCase();
-  }
-
-  function clickedRootScrollbar(event, doc) {
-    return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;
-  }
-
-  /**
-   * Listen for click events that occur somewhere in the document, outside of the element itself.
-   * For instance, if you need to hide a menu when people click anywhere else on your page.
-   *
-   * Demos:
-   *
-   * - [Click Away Listener](https://mui.com/components/click-away-listener/)
-   * - [Menus](https://mui.com/components/menus/)
-   *
-   * API:
-   *
-   * - [ClickAwayListener API](https://mui.com/api/click-away-listener/)
-   */
-  function ClickAwayListener(props) {
-    const {
-      children,
-      disableReactTree = false,
-      mouseEvent = 'onClick',
-      onClickAway,
-      touchEvent = 'onTouchEnd'
-    } = props;
-    const movedRef = React__namespace.useRef(false);
-    const nodeRef = React__namespace.useRef(null);
-    const activatedRef = React__namespace.useRef(false);
-    const syntheticEventRef = React__namespace.useRef(false);
-    React__namespace.useEffect(() => {
-      // Ensure that this component is not "activated" synchronously.
-      // https://github.com/facebook/react/issues/20074
-      setTimeout(() => {
-        activatedRef.current = true;
-      }, 0);
-      return () => {
-        activatedRef.current = false;
-      };
-    }, []);
-    const handleRef = useForkRef( // @ts-expect-error TODO upstream fix
-    children.ref, nodeRef); // The handler doesn't take event.defaultPrevented into account:
-    //
-    // event.preventDefault() is meant to stop default behaviors like
-    // clicking a checkbox to check it, hitting a button to submit a form,
-    // and hitting left arrow to move the cursor in a text input etc.
-    // Only special HTML elements have these default behaviors.
-
-    const handleClickAway = useEventCallback(event => {
-      // Given developers can stop the propagation of the synthetic event,
-      // we can only be confident with a positive value.
-      const insideReactTree = syntheticEventRef.current;
-      syntheticEventRef.current = false;
-      const doc = ownerDocument(nodeRef.current); // 1. IE11 support, which trigger the handleClickAway even after the unbind
-      // 2. The child might render null.
-      // 3. Behave like a blur listener.
-
-      if (!activatedRef.current || !nodeRef.current || 'clientX' in event && clickedRootScrollbar(event, doc)) {
-        return;
-      } // Do not act if user performed touchmove
-
-
-      if (movedRef.current) {
-        movedRef.current = false;
-        return;
-      }
-
-      let insideDOM; // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
-
-      if (event.composedPath) {
-        insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
-      } else {
-        insideDOM = !doc.documentElement.contains( // @ts-expect-error returns `false` as intended when not dispatched from a Node
-        event.target) || nodeRef.current.contains( // @ts-expect-error returns `false` as intended when not dispatched from a Node
-        event.target);
-      }
-
-      if (!insideDOM && (disableReactTree || !insideReactTree)) {
-        onClickAway(event);
-      }
-    }); // Keep track of mouse/touch events that bubbled up through the portal.
-
-    const createHandleSynthetic = handlerName => event => {
-      syntheticEventRef.current = true;
-      const childrenPropsHandler = children.props[handlerName];
-
-      if (childrenPropsHandler) {
-        childrenPropsHandler(event);
-      }
-    };
-
-    const childrenProps = {
-      ref: handleRef
-    };
-
-    if (touchEvent !== false) {
-      childrenProps[touchEvent] = createHandleSynthetic(touchEvent);
-    }
-
-    React__namespace.useEffect(() => {
-      if (touchEvent !== false) {
-        const mappedTouchEvent = mapEventPropToEvent(touchEvent);
-        const doc = ownerDocument(nodeRef.current);
-
-        const handleTouchMove = () => {
-          movedRef.current = true;
-        };
-
-        doc.addEventListener(mappedTouchEvent, handleClickAway);
-        doc.addEventListener('touchmove', handleTouchMove);
-        return () => {
-          doc.removeEventListener(mappedTouchEvent, handleClickAway);
-          doc.removeEventListener('touchmove', handleTouchMove);
-        };
-      }
-
-      return undefined;
-    }, [handleClickAway, touchEvent]);
-
-    if (mouseEvent !== false) {
-      childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);
-    }
-
-    React__namespace.useEffect(() => {
-      if (mouseEvent !== false) {
-        const mappedMouseEvent = mapEventPropToEvent(mouseEvent);
-        const doc = ownerDocument(nodeRef.current);
-        doc.addEventListener(mappedMouseEvent, handleClickAway);
-        return () => {
-          doc.removeEventListener(mappedMouseEvent, handleClickAway);
-        };
-      }
-
-      return undefined;
-    }, [handleClickAway, mouseEvent]);
-    return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
-      children: /*#__PURE__*/React__namespace.cloneElement(children, childrenProps)
-    });
-  }
-
-  ClickAwayListener.propTypes
-  /* remove-proptypes */
-  = {
-    // ----------------------------- Warning --------------------------------
-    // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit TypeScript types and run "yarn proptypes"  |
-    // ----------------------------------------------------------------------
-
-    /**
-     * The wrapped element.
-     */
-    children: elementAcceptingRef$1.isRequired,
-
-    /**
-     * If `true`, the React tree is ignored and only the DOM tree is considered.
-     * This prop changes how portaled elements are handled.
-     * @default false
-     */
-    disableReactTree: propTypes.bool,
-
-    /**
-     * The mouse event to listen to. You can disable the listener by providing `false`.
-     * @default 'onClick'
-     */
-    mouseEvent: propTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', false]),
-
-    /**
-     * Callback fired when a "click away" event is detected.
-     */
-    onClickAway: propTypes.func.isRequired,
-
-    /**
-     * The touch event to listen to. You can disable the listener by providing `false`.
-     * @default 'onTouchEnd'
-     */
-    touchEvent: propTypes.oneOf(['onTouchEnd', 'onTouchStart', false])
-  } ;
-
-  {
-    // eslint-disable-next-line
-    ClickAwayListener['propTypes' + ''] = exactProp(ClickAwayListener.propTypes);
-  }
-
   function getContainerUtilityClass(slot) {
     return generateUtilityClass('MuiContainer', slot);
   }
@@ -27100,7 +27096,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var Container$1 = Container;
 
@@ -27516,7 +27512,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var Modal$1 = Modal;
 
@@ -27905,7 +27901,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The component used for the transition.
@@ -27927,7 +27923,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
      */
     TransitionProps: propTypes.object
   } ;
@@ -28029,7 +28025,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var DialogActions$1 = DialogActions;
 
@@ -28140,7 +28136,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var DialogContent$1 = DialogContent;
 
@@ -28209,7 +28205,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var DialogContentText$1 = DialogContentText;
 
@@ -28290,7 +28286,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var DialogTitle$1 = DialogTitle;
 
@@ -28538,7 +28534,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The text alignment.
@@ -29217,7 +29213,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The duration for the transition, in milliseconds.
@@ -29472,7 +29468,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -30221,7 +30217,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
@@ -30615,7 +30611,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
@@ -30939,7 +30935,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -31153,7 +31149,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the component.
@@ -31260,7 +31256,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var FormGroup$1 = FormGroup;
 
@@ -31437,7 +31433,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -31618,7 +31614,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var FormLabel$1 = FormLabel;
 
@@ -31812,6 +31808,27 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     }
 
     return styles;
+  }
+  function resolveSpacingClasses(spacing, container, styles = {}) {
+    // in case of grid item or undefined/null or `spacing` <= 0
+    if (!container || !spacing || spacing <= 0) {
+      return [];
+    } // in case of string/number `spacing`
+
+
+    if (typeof spacing === 'string' && !Number.isNaN(Number(spacing)) || typeof spacing === 'number') {
+      return [styles[`spacing-xs-${String(spacing)}`] || `spacing-xs-${String(spacing)}`];
+    } // in case of object `spacing`
+
+
+    const {
+      xs,
+      sm,
+      md,
+      lg,
+      xl
+    } = spacing;
+    return [Number(xs) > 0 && (styles[`spacing-xs-${String(xs)}`] || `spacing-xs-${String(xs)}`), Number(sm) > 0 && (styles[`spacing-sm-${String(sm)}`] || `spacing-sm-${String(sm)}`), Number(md) > 0 && (styles[`spacing-md-${String(md)}`] || `spacing-md-${String(md)}`), Number(lg) > 0 && (styles[`spacing-lg-${String(lg)}`] || `spacing-lg-${String(lg)}`), Number(xl) > 0 && (styles[`spacing-xl-${String(xl)}`] || `spacing-xl-${String(xl)}`)];
   } // Default CSS values
   // flex: '0 1 auto',
   // flexDirection: 'row',
@@ -31836,7 +31853,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         xs,
         zeroMinWidth
       } = props.ownerState;
-      return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth, container && spacing !== 0 && styles[`spacing-xs-${String(spacing)}`], direction !== 'row' && styles[`direction-xs-${String(direction)}`], wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`], xs !== false && styles[`grid-xs-${String(xs)}`], sm !== false && styles[`grid-sm-${String(sm)}`], md !== false && styles[`grid-md-${String(md)}`], lg !== false && styles[`grid-lg-${String(lg)}`], xl !== false && styles[`grid-xl-${String(xl)}`]];
+      return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth, ...resolveSpacingClasses(spacing, container, styles), direction !== 'row' && styles[`direction-xs-${String(direction)}`], wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`], xs !== false && styles[`grid-xs-${String(xs)}`], sm !== false && styles[`grid-sm-${String(sm)}`], md !== false && styles[`grid-md-${String(md)}`], lg !== false && styles[`grid-lg-${String(lg)}`], xl !== false && styles[`grid-xl-${String(xl)}`]];
     }
   })(({
     ownerState
@@ -31880,7 +31897,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       zeroMinWidth
     } = ownerState;
     const slots = {
-      root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth', container && spacing !== 0 && `spacing-xs-${String(spacing)}`, direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, xs !== false && `grid-xs-${String(xs)}`, sm !== false && `grid-sm-${String(sm)}`, md !== false && `grid-md-${String(md)}`, lg !== false && `grid-lg-${String(lg)}`, xl !== false && `grid-xl-${String(xl)}`]
+      root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth', ...resolveSpacingClasses(spacing, container), direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, xs !== false && `grid-xs-${String(xs)}`, sm !== false && `grid-sm-${String(sm)}`, md !== false && `grid-md-${String(md)}`, lg !== false && `grid-lg-${String(lg)}`, xl !== false && `grid-xl-${String(xl)}`]
     };
     return composeClasses(slots, getGridUtilityClass, classes);
   };
@@ -32060,7 +32077,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Defines the `flex-wrap` style property.
@@ -33221,7 +33238,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   Icon.muiName = 'Icon';
   var Icon$1 = Icon;
@@ -33398,7 +33415,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -33586,7 +33603,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var ImageListItem$1 = ImageListItem;
 
@@ -33812,7 +33829,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Title to be displayed.
@@ -34127,7 +34144,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
@@ -34322,7 +34339,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -34535,7 +34552,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -34884,7 +34901,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the progress indicator for the determinate and buffer variants.
@@ -35117,7 +35134,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * `classes` prop applied to the [`Typography`](/api/typography/) element.
@@ -35285,7 +35302,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var List$1 = List;
 
@@ -35513,7 +35530,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * This prop can help identify which element has keyboard focus.
      * The class name will be applied when the element gains the focus through keyboard interaction.
      * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md).
+     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
      * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
      * if needed.
      */
@@ -35528,7 +35545,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var ListItemButton$1 = ListItemButton;
 
@@ -35624,7 +35641,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   ListItemSecondaryAction.muiName = 'ListItemSecondaryAction';
   var ListItemSecondaryAction$1 = ListItemSecondaryAction;
@@ -36025,7 +36042,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var ListItem$1 = ListItem;
 
@@ -36119,7 +36136,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var ListItemAvatar$1 = ListItemAvatar;
 
@@ -36217,7 +36234,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var ListItemIcon$1 = ListItemIcon;
 
@@ -36399,7 +36416,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var ListItemText$1 = ListItemText;
 
@@ -37153,7 +37170,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * This is the point on the popover which
@@ -37191,7 +37208,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
      * @default {}
      */
     TransitionProps: propTypes.object
@@ -37456,7 +37473,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The length of the transition in `ms`, or 'auto'
@@ -37470,7 +37487,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
      * @default {}
      */
     TransitionProps: propTypes.object,
@@ -37718,7 +37735,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * This prop can help identify which element has keyboard focus.
      * The class name will be applied when the element gains the focus through keyboard interaction.
      * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md).
+     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
      * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
      * if needed.
      */
@@ -37739,7 +37756,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * @default 0
@@ -37952,7 +37969,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -38300,7 +38317,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The `input` value. The DOM API casts this to a string.
@@ -38748,7 +38765,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
@@ -39245,7 +39262,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The type of pagination item.
@@ -39511,7 +39528,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -39841,7 +39858,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the component. The DOM API casts this to a string.
@@ -40658,7 +40675,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The rating value.
@@ -41157,7 +41174,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     if (computeDisplay) {
       if (multiple) {
-        display = displayMultiple.reduce((prev, curr) => [prev, ', ', curr]);
+        if (value.length === 0) {
+          display = '';
+        } else {
+          display = displayMultiple.reduce((prev, curr) => [prev, ', ', curr]);
+        }
       } else {
         display = displaySingle;
       }
@@ -41674,7 +41695,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The `input` value. Providing an empty string will select no options.
@@ -41904,7 +41925,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The type of content that will be rendered.
@@ -42543,7 +42564,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Tab index attribute of the hidden `input` element.
@@ -42725,7 +42746,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var SnackbarContent$1 = SnackbarContent;
 
@@ -43153,7 +43174,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The component used for the transition.
@@ -43178,7 +43199,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
      * @default {}
      */
     TransitionProps: propTypes.object
@@ -43919,7 +43940,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The component used for the transition.
@@ -43944,7 +43965,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
      */
     TransitionProps: propTypes.object
   } ;
@@ -44731,7 +44752,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Tooltip title. Zero-length titles string are never displayed.
@@ -44749,7 +44770,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
      */
     TransitionProps: propTypes.object
   } ;
@@ -44990,7 +45011,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * `classes` prop applied to the [`Tooltip`](/api/tooltip/) element.
@@ -45160,7 +45181,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   SpeedDialIcon.muiName = 'SpeedDialIcon';
   var SpeedDialIcon$1 = SpeedDialIcon;
@@ -45315,7 +45336,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop, which allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var Stack$1 = Stack;
 
@@ -45513,7 +45534,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var Step$1 = Step;
 
@@ -45692,7 +45713,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var StepIcon$1 = StepIcon;
 
@@ -45926,7 +45947,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   StepLabel.muiName = 'StepLabel';
   var StepLabel$1 = StepLabel;
@@ -46060,7 +46081,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var StepButton$1 = StepButton;
 
@@ -46195,7 +46216,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var StepConnector$1 = StepConnector;
 
@@ -46331,7 +46352,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The component used for the transition.
@@ -46355,7 +46376,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
      */
     TransitionProps: propTypes.object
   } ;
@@ -46511,7 +46532,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var Stepper$1 = Stepper;
 
@@ -47522,7 +47543,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the component. The DOM API casts this to a string.
@@ -47797,7 +47818,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * You can provide your own value. Otherwise, we fallback to the child position index.
@@ -47964,7 +47985,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var Table$1 = Table;
 
@@ -48069,7 +48090,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var TableBody$1 = TableBody;
 
@@ -48289,7 +48310,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Specify the cell type.
@@ -48381,7 +48402,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var TableContainer$1 = TableContainer;
 
@@ -48474,7 +48495,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var TableFooter$1 = TableFooter;
 
@@ -48567,7 +48588,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var TableHead$1 = TableHead;
 
@@ -48687,7 +48708,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -49237,7 +49258,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var TablePagination$1 = TablePagination;
 
@@ -49373,7 +49394,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var TableRow$1 = TableRow;
 
@@ -49554,7 +49575,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var TableSortLabel$1 = TableSortLabel;
 
@@ -49787,7 +49808,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var TabScrollButton$1 = TabScrollButton;
 
@@ -50581,7 +50602,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Props applied to the tab indicator element.
@@ -51029,7 +51050,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
@@ -51271,7 +51292,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The value to associate with the button when selected in a
@@ -51533,7 +51554,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * 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.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The currently selected value within the group or an array of selected