@mui/material 5.1.1 → 5.2.3

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.1.1
+/** @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.
@@ -2008,7 +2008,7 @@
 
   var pkg = {
   	name: "@emotion/react",
-  	version: "11.6.0",
+  	version: "11.7.0",
   	main: "dist/emotion-react.cjs.js",
   	module: "dist/emotion-react.esm.js",
   	browser: {
@@ -4659,9 +4659,7 @@
   }
 
   function isPlainObject(item) {
-    return item !== null && typeof item === 'object' && // TS thinks `item is possibly null` even though this was our first guard.
-    // @ts-expect-error
-    item.constructor === Object;
+    return item !== null && typeof item === 'object' && item.constructor === Object;
   }
   function deepmerge(target, source, options = {
     clone: true
@@ -5000,15 +4998,18 @@
   const useEnhancedEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
   var useEnhancedEffect$1 = useEnhancedEffect;
 
+  let globalId = 0;
   function useId(idOverride) {
     const [defaultId, setDefaultId] = React__namespace.useState(idOverride);
     const id = idOverride || defaultId;
     React__namespace.useEffect(() => {
       if (defaultId == null) {
         // Fallback to this default id when possible.
-        // Use the random value for client-side rendering only.
+        // Use the incrementing value for client-side rendering only.
         // We can't use it server-side.
-        setDefaultId(`mui-${Math.round(Math.random() * 1e9)}`);
+        // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
+        globalId += 1;
+        setDefaultId(`mui-${globalId}`);
       }
     }, [defaultId]);
     return id;
@@ -5097,7 +5098,7 @@
   // based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js
   let hadKeyboardEvent = true;
   let hadFocusVisibleRecently = false;
-  let hadFocusVisibleRecentlyTimeout = null;
+  let hadFocusVisibleRecentlyTimeout;
   const inputTypesWhitelist = {
     text: true,
     search: true,
@@ -5433,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;
@@ -5508,7 +5526,7 @@
   function removeUnusedBreakpoints(breakpointKeys, style) {
     return breakpointKeys.reduce((acc, key) => {
       const breakpointOutput = acc[key];
-      const isBreakpointUnused = Object.keys(breakpointOutput).length === 0;
+      const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
 
       if (isBreakpointUnused) {
         delete acc[key];
@@ -6264,27 +6282,29 @@
       Object.keys(sxObject).forEach(styleKey => {
         const value = callIfFn(sxObject[styleKey], theme);
 
-        if (typeof value === 'object') {
-          if (propToStyleFunction[styleKey]) {
-            css = merge(css, getThemeValue(styleKey, value, theme));
-          } else {
-            const breakpointsValues = handleBreakpoints({
-              theme
-            }, value, x => ({
-              [styleKey]: x
-            }));
-
-            if (objectsHaveSameKeys(breakpointsValues, value)) {
-              css[styleKey] = styleFunctionSx({
-                sx: value,
-                theme
-              });
+        if (value !== null && value !== undefined) {
+          if (typeof value === 'object') {
+            if (propToStyleFunction[styleKey]) {
+              css = merge(css, getThemeValue(styleKey, value, theme));
             } else {
-              css = merge(css, breakpointsValues);
+              const breakpointsValues = handleBreakpoints({
+                theme
+              }, value, x => ({
+                [styleKey]: x
+              }));
+
+              if (objectsHaveSameKeys(breakpointsValues, value)) {
+                css[styleKey] = styleFunctionSx({
+                  sx: value,
+                  theme
+                });
+              } else {
+                css = merge(css, breakpointsValues);
+              }
             }
+          } else {
+            css = merge(css, getThemeValue(styleKey, value, theme));
           }
-        } else {
-          css = merge(css, getThemeValue(styleKey, value, theme));
         }
       });
       return removeUnusedBreakpoints(breakpointsKeys, css);
@@ -6295,7 +6315,7 @@
 
   styleFunctionSx.filterProps = ['sx'];
 
-  const _excluded$2o = ["sx"];
+  const _excluded$2t = ["sx"];
 
   const splitProps = props => {
     const result = {
@@ -6316,7 +6336,7 @@
     const {
       sx: inSx
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2o);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2t);
 
     const {
       systemProps,
@@ -6345,6 +6365,15 @@
     });
   }
 
+  function sx(styles) {
+    return ({
+      theme
+    }) => styleFunctionSx({
+      sx: styles,
+      theme
+    });
+  }
+
   function toVal(mix) {
   	var k, y, str='';
 
@@ -6386,7 +6415,7 @@
   	return str;
   }
 
-  const _excluded$2n = ["values", "unit", "step"];
+  const _excluded$2s = ["values", "unit", "step"];
 
   function createBreakpoints(breakpoints) {
     const {
@@ -6407,7 +6436,7 @@
       unit = 'px',
       step = 5
     } = breakpoints,
-          other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2n);
+          other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2s);
 
     const keys = Object.keys(values);
 
@@ -6482,7 +6511,7 @@
     return spacing;
   }
 
-  const _excluded$2m = ["breakpoints", "palette", "spacing", "shape"];
+  const _excluded$2r = ["breakpoints", "palette", "spacing", "shape"];
 
   function createTheme$1(options = {}, ...args) {
     const {
@@ -6491,7 +6520,7 @@
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-          other = _objectWithoutPropertiesLoose(options, _excluded$2m);
+          other = _objectWithoutPropertiesLoose(options, _excluded$2r);
 
     const breakpoints = createBreakpoints(breakpointsInput);
     const spacing = createSpacing(spacingInput);
@@ -6613,7 +6642,7 @@
     return useTheme$2(defaultTheme);
   }
 
-  const _excluded$2l = ["className", "component"];
+  const _excluded$2q = ["className", "component"];
   function createBox(options = {}) {
     const {
       defaultTheme,
@@ -6629,7 +6658,7 @@
         className,
         component = 'div'
       } = _extendSxProp,
-            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2l);
+            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2q);
 
       return /*#__PURE__*/jsxRuntime_1(BoxRoot, _extends({
         as: component,
@@ -6660,12 +6689,12 @@
       /**
        * @ignore
        */
-      sx: propTypes.oneOfType([propTypes.object, propTypes.array])
+      sx: propTypes.oneOfType([propTypes.object, propTypes.array, propTypes.func])
     } ;
     return Box;
   }
 
-  const _excluded$2k = ["variant"];
+  const _excluded$2p = ["variant"];
 
   function isEmpty$2(string) {
     return string.length === 0;
@@ -6681,7 +6710,7 @@
     const {
       variant
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2k);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2p);
 
     let classKey = variant || '';
     Object.keys(other).sort().forEach(key => {
@@ -6694,7 +6723,7 @@
     return classKey;
   }
 
-  const _excluded$2j = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+  const _excluded$2o = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
         _excluded2$b = ["theme"],
         _excluded3$1 = ["theme"];
 
@@ -6775,7 +6804,7 @@
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-            options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2j); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
+            options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2o); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
 
 
       const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
@@ -6894,7 +6923,6 @@
     };
   }
 
-  /* eslint-disable no-restricted-syntax */
   function getThemeProps(params) {
     const {
       theme,
@@ -6906,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({
@@ -7277,7 +7292,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) ;
   }
 
-  const _excluded$2i = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+  const _excluded$2n = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
         _excluded2$a = ["type", "mode"];
   function adaptV4Theme(inputTheme) {
     {
@@ -7292,7 +7307,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       props = {},
       styleOverrides = {}
     } = inputTheme,
-          other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2i);
+          other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2n);
 
     const theme = _extends({}, other, {
       components: {}
@@ -7308,7 +7323,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       const componentValue = theme.components[component] || {};
       componentValue.defaultProps = props[component];
       theme.components[component] = componentValue;
-    }); // css overrides
+    }); // CSS overrides
 
     Object.keys(styleOverrides).forEach(component => {
       const componentValue = theme.components[component] || {};
@@ -7357,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) {
@@ -8402,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 = () => {
@@ -8463,9 +8514,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   const backdropUnstyledClasses = generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
   var backdropUnstyledClasses$1 = backdropUnstyledClasses;
 
-  const _excluded$2h = ["classes", "className", "invisible", "component", "components", "componentsProps", "theme"];
+  const _excluded$2m = ["classes", "className", "invisible", "component", "components", "componentsProps", "theme"];
 
-  const useUtilityClasses$1P = ownerState => {
+  const useUtilityClasses$1T = ownerState => {
     const {
       classes,
       invisible
@@ -8488,14 +8539,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       /* eslint-disable react/prop-types */
       theme
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2h);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2m);
 
     const ownerState = _extends({}, props, {
       classes: classesProp,
       invisible
     });
 
-    const classes = useUtilityClasses$1P(ownerState);
+    const classes = useUtilityClasses$1T(ownerState);
     const Root = components.Root || component;
     const rootProps = componentsProps.root || {};
     return /*#__PURE__*/jsxRuntime_1(Root, _extends({
@@ -8569,9 +8620,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   const badgeUnstyledClasses = generateUtilityClasses('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular', 'invisible']);
   var badgeUnstyledClasses$1 = badgeUnstyledClasses;
 
-  const _excluded$2g = ["anchorOrigin", "classes", "badgeContent", "component", "children", "className", "components", "componentsProps", "invisible", "max", "overlap", "showZero", "variant", "theme"];
+  const _excluded$2l = ["anchorOrigin", "classes", "badgeContent", "component", "children", "className", "components", "componentsProps", "invisible", "max", "overlap", "showZero", "variant", "theme"];
 
-  const useUtilityClasses$1O = ownerState => {
+  const useUtilityClasses$1S = ownerState => {
     const {
       variant,
       anchorOrigin,
@@ -8608,7 +8659,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       /* eslint-disable react/prop-types */
       theme
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2g);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2l);
 
     const prevProps = usePreviousProps$1({
       anchorOrigin: anchorOriginProp,
@@ -8647,7 +8698,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       displayValue = badgeContent > max ? `${max}+` : badgeContent;
     }
 
-    const classes = useUtilityClasses$1O(ownerState);
+    const classes = useUtilityClasses$1S(ownerState);
     const Root = components.Root || component;
     const rootProps = componentsProps.root || {};
     const Badge = components.Badge || 'span';
@@ -8768,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;
 
@@ -8987,27 +9020,9 @@ 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$2f = ["className", "component", "components", "componentsProps", "children", "disabled", "action", "onBlur", "onClick", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseLeave"];
+  const _excluded$2k = ["className", "component", "components", "componentsProps", "children", "disabled", "action", "onBlur", "onClick", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseLeave"];
 
-  const useUtilityClasses$1N = ownerState => {
+  const useUtilityClasses$1R = ownerState => {
     const {
       active,
       disabled,
@@ -9042,7 +9057,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       children,
       action
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2f);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2k);
 
     const buttonRef = React__namespace.useRef();
     const handleRef = useForkRef(buttonRef, ref);
@@ -9068,7 +9083,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     const ButtonRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'button';
     const buttonRootProps = appendOwnerState(ButtonRoot, _extends({}, other, componentsProps.root), ownerState);
-    const classes = useUtilityClasses$1N(ownerState);
+    const classes = useUtilityClasses$1R(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ButtonRoot, _extends({}, getRootProps(), buttonRootProps, {
       className: clsx(classes.root, className, buttonRootProps.className),
       children: children
@@ -9141,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.
    */
@@ -9158,7 +9359,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   const formControlUnstyledClasses = generateUtilityClasses('MuiFormControl', ['root', 'disabled']);
   var classes$2 = formControlUnstyledClasses;
 
-  const _excluded$2e = ["defaultValue", "children", "className", "component", "components", "componentsProps", "disabled", "error", "focused", "onChange", "required", "value"];
+  const _excluded$2j = ["defaultValue", "children", "className", "component", "components", "componentsProps", "disabled", "error", "focused", "onChange", "required", "value"];
 
   function hasValue$1(value) {
     return value != null && !(Array.isArray(value) && value.length === 0) && value !== '';
@@ -9208,12 +9409,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       componentsProps = {},
       disabled = false,
       error = false,
-      focused: visuallyFocused = false,
+      focused: visuallyFocused,
       onChange,
       required = false,
       value: incomingValue
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2e);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2j);
 
     const [value, setValue] = useControlled({
       controlled: incomingValue,
@@ -9540,7 +9741,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const _excluded$2d = ["aria-describedby", "aria-label", "aria-labelledby", "autoComplete", "autoFocus", "className", "component", "components", "componentsProps", "defaultValue", "disabled", "endAdornment", "error", "id", "maxRows", "minRows", "multiline", "name", "onClick", "onChange", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "placeholder", "readOnly", "required", "rows", "type", "startAdornment", "value"];
+  const _excluded$2i = ["aria-describedby", "aria-label", "aria-labelledby", "autoComplete", "autoFocus", "className", "component", "components", "componentsProps", "defaultValue", "disabled", "endAdornment", "error", "id", "maxRows", "minRows", "multiline", "name", "onClick", "onChange", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "placeholder", "readOnly", "required", "rows", "type", "startAdornment", "value"];
   const InputUnstyled = /*#__PURE__*/React__namespace.forwardRef(function InputUnstyled(props, ref) {
     var _componentsProps$inpu, _ref, _componentsProps$root, _components$Input, _componentsProps$inpu2;
 
@@ -9577,7 +9778,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       startAdornment,
       value
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2d);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2i);
 
     const {
       getRootProps,
@@ -10521,9 +10722,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   const modalUnstyledClasses = generateUtilityClasses('MuiModal', ['root', 'hidden']);
   var modalUnstyledClasses$1 = modalUnstyledClasses;
 
-  const _excluded$2c = ["BackdropComponent", "BackdropProps", "children", "classes", "className", "closeAfterTransition", "component", "components", "componentsProps", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "theme", "onTransitionEnter", "onTransitionExited"];
+  const _excluded$2h = ["BackdropComponent", "BackdropProps", "children", "classes", "className", "closeAfterTransition", "component", "components", "componentsProps", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "theme", "onTransitionEnter", "onTransitionExited"];
 
-  const useUtilityClasses$1M = ownerState => {
+  const useUtilityClasses$1Q = ownerState => {
     const {
       open,
       exited,
@@ -10593,7 +10794,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       onTransitionEnter,
       onTransitionExited
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2c);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2h);
 
     const [exited, setExited] = React__namespace.useState(true);
     const modal = React__namespace.useRef({});
@@ -10670,7 +10871,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       keepMounted
     });
 
-    const classes = useUtilityClasses$1M(ownerState);
+    const classes = useUtilityClasses$1Q(ownerState);
 
     if (!keepMounted && !open && (!hasTransition || exited)) {
       return null;
@@ -12852,7 +13053,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     defaultModifiers: defaultModifiers
   }); // eslint-disable-next-line import/no-unused-modules
 
-  const _excluded$2b = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "TransitionProps"],
+  const _excluded$2g = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "TransitionProps"],
         _excluded2$9 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition"];
 
   function flipPlacement(placement, direction) {
@@ -12878,7 +13079,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }
   }
 
-  function resolveAnchorEl$2(anchorEl) {
+  function resolveAnchorEl$1(anchorEl) {
     return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
   }
 
@@ -12898,7 +13099,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       popperRef: popperRefProp,
       TransitionProps
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2b);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2g);
 
     const tooltipRef = React__namespace.useRef(null);
     const ownRef = useForkRef(tooltipRef, ref);
@@ -12930,7 +13131,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         setPlacement(data.placement);
       };
 
-      const resolvedAnchorEl = resolveAnchorEl$2(anchorEl);
+      const resolvedAnchorEl = resolveAnchorEl$1(anchorEl);
 
       {
         if (resolvedAnchorEl && resolvedAnchorEl.nodeType === 1) {
@@ -12971,7 +13172,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         popperModifiers = popperModifiers.concat(popperOptions.modifiers);
       }
 
-      const popper = createPopper(resolveAnchorEl$2(anchorEl), tooltipRef.current, _extends({
+      const popper = createPopper(resolveAnchorEl$1(anchorEl), tooltipRef.current, _extends({
         placement: rtlPlacement
       }, popperOptions, {
         modifiers: popperModifiers
@@ -13038,7 +13239,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     // If neither are provided let the Modal take care of choosing the container
 
 
-    const container = containerProp || (anchorEl ? ownerDocument(resolveAnchorEl$2(anchorEl)).body : undefined);
+    const container = containerProp || (anchorEl ? ownerDocument(resolveAnchorEl$1(anchorEl)).body : undefined);
     return /*#__PURE__*/jsxRuntime_1(Portal$1, {
       disablePortal: disablePortal,
       container: container,
@@ -13086,7 +13287,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      */
     anchorEl: chainPropTypes(propTypes.oneOfType([HTMLElementType, propTypes.object, propTypes.func]), props => {
       if (props.open) {
-        const resolvedAnchorEl = resolveAnchorEl$2(props.anchorEl);
+        const resolvedAnchorEl = resolveAnchorEl$1(props.anchorEl);
 
         if (resolvedAnchorEl && resolvedAnchorEl.nodeType === 1) {
           const box = resolvedAnchorEl.getBoundingClientRect();
@@ -13256,7 +13457,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     value: propTypes.node
   } ;
 
-  const _excluded$2a = ["aria-label", "aria-labelledby", "aria-valuetext", "className", "component", "classes", "defaultValue", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
+  const _excluded$2f = ["aria-label", "aria-labelledby", "aria-valuetext", "className", "component", "classes", "defaultValue", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
   const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
 
   function asc(a, b) {
@@ -13416,7 +13617,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return cachedSupportsTouchActionNone;
   }
 
-  const useUtilityClasses$1L = ownerState => {
+  const useUtilityClasses$1P = ownerState => {
     const {
       disabled,
       dragging,
@@ -13478,7 +13679,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       components = {},
       componentsProps = {}
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2a);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2f);
 
     const touchId = React__namespace.useRef(); // We can't use the :active browser pseudo-classes.
     // - The active state isn't triggered when clicking on the rail.
@@ -13908,7 +14109,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       valueLabelFormat
     });
 
-    const classes = useUtilityClasses$1L(ownerState);
+    const classes = useUtilityClasses$1P(ownerState);
     return /*#__PURE__*/jsxRuntime_2(Root, _extends({
       ref: handleRef,
       onMouseDown: handleMouseDown
@@ -14374,7 +14575,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   const switchUnstyledClasses = generateUtilityClasses('MuiSwitch', ['root', 'input', 'track', 'thumb', 'checked', 'disabled', 'focusVisible', 'readOnly']);
   var classes = switchUnstyledClasses;
 
-  const _excluded$29 = ["checked", "className", "component", "components", "componentsProps", "defaultChecked", "disabled", "onBlur", "onChange", "onFocus", "onFocusVisible", "readOnly", "required"];
+  const _excluded$2e = ["checked", "className", "component", "components", "componentsProps", "defaultChecked", "disabled", "onBlur", "onChange", "onFocus", "onFocusVisible", "readOnly", "required"];
 
   /**
    * The foundation for building custom-styled switches.
@@ -14404,7 +14605,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       onFocusVisible,
       readOnly: readOnlyProp
     } = props,
-          otherProps = _objectWithoutPropertiesLoose(props, _excluded$29);
+          otherProps = _objectWithoutPropertiesLoose(props, _excluded$2e);
 
     const useSwitchProps = {
       checked: checkedProp,
@@ -14544,6 +14745,895 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var SwitchUnstyled$1 = SwitchUnstyled;
 
+  function getTabPanelUnstyledUtilityClass(slot) {
+    return generateUtilityClass('TabPanelUnstyled', slot);
+  }
+  const tabPanelUnstyledClasses = generateUtilityClasses('TabPanelUnstyled', ['root', 'hidden']);
+  var tabPanelUnstyledClasses$1 = tabPanelUnstyledClasses;
+
+  function getTabsUnstyledUtilityClass(slot) {
+    return generateUtilityClass('TabsUnstyled', slot);
+  }
+  const tabsUnstyledClasses = generateUtilityClasses('TabsUnstyled', ['root', 'horizontal', 'vertical']);
+  var tabsUnstyledClasses$1 = tabsUnstyledClasses;
+
+  const useTabs = props => {
+    const {
+      value: valueProp,
+      defaultValue,
+      onChange,
+      orientation,
+      direction,
+      selectionFollowsFocus
+    } = props;
+    const [value, setValue] = useControlled({
+      controlled: valueProp,
+      default: defaultValue,
+      name: 'Tabs',
+      state: 'value'
+    });
+    const idPrefix = useId();
+    const onSelected = React__namespace.useCallback((e, newValue) => {
+      setValue(newValue);
+
+      if (onChange) {
+        onChange(e, newValue);
+      }
+    }, [onChange, setValue]);
+
+    const getRootProps = () => {
+      return {};
+    };
+
+    const tabsContextValue = React__namespace.useMemo(() => {
+      return {
+        idPrefix,
+        value,
+        onSelected,
+        orientation,
+        direction,
+        selectionFollowsFocus
+      };
+    }, [idPrefix, value, onSelected, orientation, direction, selectionFollowsFocus]);
+    return {
+      getRootProps,
+      tabsContextValue
+    };
+  };
+
+  var useTabs$1 = useTabs;
+
+  /**
+   * @ignore - internal component.
+   */
+  const Context = /*#__PURE__*/React__namespace.createContext(null);
+
+  {
+    Context.displayName = 'TabsContext';
+  }
+  /**
+   * @returns {unknown}
+   */
+
+
+  function useTabContext() {
+    return React__namespace.useContext(Context);
+  }
+  function getPanelId(context, value) {
+    const {
+      idPrefix
+    } = context;
+
+    if (idPrefix === null) {
+      return null;
+    }
+
+    return `${context.idPrefix}-P-${value}`;
+  }
+  function getTabId(context, value) {
+    const {
+      idPrefix
+    } = context;
+
+    if (idPrefix === null) {
+      return null;
+    }
+
+    return `${context.idPrefix}-T-${value}`;
+  }
+  var Context$1 = Context;
+
+  const _excluded$2d = ["children", "className", "value", "defaultValue", "orientation", "direction", "component", "components", "componentsProps", "onChange", "selectionFollowsFocus"];
+
+  const useUtilityClasses$1O = ownerState => {
+    const {
+      orientation
+    } = ownerState;
+    const slots = {
+      root: ['root', orientation]
+    };
+    return composeClasses(slots, getTabsUnstyledUtilityClass, {});
+  };
+  /**
+   *
+   * Demos:
+   *
+   * - [Tabs](https://mui.com/components/tabs/)
+   *
+   * API:
+   *
+   * - [TabsUnstyled API](https://mui.com/api/tabs-unstyled/)
+   */
+
+
+  const TabsUnstyled = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
+    var _ref, _componentsProps$root;
+
+    const {
+      children,
+      className,
+      orientation = 'horizontal',
+      direction = 'ltr',
+      component,
+      components = {},
+      componentsProps = {}
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded$2d);
+
+    const {
+      tabsContextValue,
+      getRootProps
+    } = useTabs$1(props);
+
+    const ownerState = _extends({}, props, {
+      orientation,
+      direction
+    });
+
+    const classes = useUtilityClasses$1O(ownerState);
+    const TabsRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
+    const tabsRootProps = appendOwnerState(TabsRoot, _extends({}, other, componentsProps.root), ownerState);
+    return /*#__PURE__*/jsxRuntime_1(TabsRoot, _extends({}, getRootProps(), tabsRootProps, {
+      ref: ref,
+      className: clsx(classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, className),
+      children: /*#__PURE__*/jsxRuntime_1(Context$1.Provider, {
+        value: tabsContextValue,
+        children: children
+      })
+    }));
+  });
+  TabsUnstyled.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
+    // ----------------------------------------------------------------------
+
+    /**
+     * The content of the component.
+     */
+    children: propTypes.node,
+
+    /**
+     * @ignore
+     */
+    className: propTypes.string,
+
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: propTypes.elementType,
+
+    /**
+     * The components used for each slot inside the Tabs.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components: propTypes.shape({
+      Root: propTypes.elementType
+    }),
+
+    /**
+     * The props used for each slot inside the Tabs.
+     * @default {}
+     */
+    componentsProps: propTypes.object,
+
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue: propTypes.oneOfType([propTypes.oneOf([false]), propTypes.number, propTypes.string]),
+
+    /**
+     * The direction of the text.
+     * @default 'ltr'
+     */
+    direction: propTypes.oneOf(['ltr', 'rtl']),
+
+    /**
+     * Callback invoked when new value is being set.
+     */
+    onChange: propTypes.func,
+
+    /**
+     * The component orientation (layout flow direction).
+     * @default 'horizontal'
+     */
+    orientation: propTypes.oneOf(['horizontal', 'vertical']),
+
+    /**
+     * If `true` the selected tab changes on focus. Otherwise it only
+     * changes on activation.
+     */
+    selectionFollowsFocus: propTypes.bool,
+
+    /**
+     * The value of the currently selected `Tab`.
+     * If you don't want any selected `Tab`, you can set this prop to `false`.
+     */
+    value: propTypes.oneOfType([propTypes.oneOf([false]), propTypes.number, propTypes.string])
+  } ;
+  var TabsUnstyled$1 = TabsUnstyled;
+
+  const useTabPanel = props => {
+    const {
+      value
+    } = props;
+    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 getRootProps = () => {
+      return {
+        'aria-labelledby': tabId,
+        hidden,
+        id
+      };
+    };
+
+    return {
+      hidden,
+      getRootProps
+    };
+  };
+
+  var useTabPanel$1 = useTabPanel;
+
+  const _excluded$2c = ["children", "className", "value", "components", "componentsProps", "component"];
+
+  const useUtilityClasses$1N = ownerState => {
+    const {
+      hidden
+    } = ownerState;
+    const slots = {
+      root: ['root', hidden && 'hidden']
+    };
+    return composeClasses(slots, getTabPanelUnstyledUtilityClass, {});
+  };
+  /**
+   *
+   * Demos:
+   *
+   * - [Tabs](https://mui.com/components/tabs/)
+   *
+   * API:
+   *
+   * - [TabPanelUnstyled API](https://mui.com/api/tab-panel-unstyled/)
+   */
+
+
+  const TabPanelUnstyled = /*#__PURE__*/React__namespace.forwardRef(function TabPanelUnstyled(props, ref) {
+    var _ref, _componentsProps$root;
+
+    const {
+      children,
+      className,
+      components = {},
+      componentsProps = {},
+      component
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded$2c);
+
+    const {
+      hidden,
+      getRootProps
+    } = useTabPanel$1(props);
+
+    const ownerState = _extends({}, props, {
+      hidden
+    });
+
+    const classes = useUtilityClasses$1N(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, {
+      className: clsx(classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, className),
+      children: !hidden && children
+    }));
+  });
+  TabPanelUnstyled.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
+    // ----------------------------------------------------------------------
+
+    /**
+     * The content of the component.
+     */
+    children: propTypes.node,
+
+    /**
+     * @ignore
+     */
+    className: propTypes.string,
+
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: propTypes.elementType,
+
+    /**
+     * The components used for each slot inside the TabPanel.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components: propTypes.shape({
+      Root: propTypes.elementType
+    }),
+
+    /**
+     * The props used for each slot inside the TabPanel.
+     * @default {}
+     */
+    componentsProps: propTypes.object,
+
+    /**
+     * 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]).isRequired
+  } ;
+  var TabPanelUnstyled$1 = TabPanelUnstyled;
+
+  function getTabsListUnstyledUtilityClass(slot) {
+    return generateUtilityClass('TabsListUnstyled', slot);
+  }
+  const tabsListUnstyledClasses = generateUtilityClasses('TabsListUnstyled', ['root', 'horizontal', 'vertical']);
+  var tabsListUnstyledClasses$1 = tabsListUnstyledClasses;
+
+  const nextItem$2 = (list, item) => {
+    if (!list) {
+      return null;
+    }
+
+    if (list === item) {
+      return list.firstChild;
+    }
+
+    if (item && item.nextElementSibling) {
+      return item.nextElementSibling;
+    }
+
+    return list.firstChild;
+  };
+
+  const previousItem$2 = (list, item) => {
+    if (!list) {
+      return null;
+    }
+
+    if (list === item) {
+      return list.lastChild;
+    }
+
+    if (item && item.previousElementSibling) {
+      return item.previousElementSibling;
+    }
+
+    return list.lastChild;
+  };
+
+  const moveFocus$2 = (list, currentFocus, traversalFunction) => {
+    let wrappedOnce = false;
+    let nextFocus = traversalFunction(list, currentFocus);
+
+    while (list && nextFocus) {
+      // Prevent infinite loop.
+      if (nextFocus === list.firstChild) {
+        if (wrappedOnce) {
+          return;
+        }
+
+        wrappedOnce = true;
+      } // Same logic as useAutocomplete.js
+
+
+      const nextFocusDisabled = nextFocus.disabled || nextFocus.getAttribute('aria-disabled') === 'true';
+
+      if (!nextFocus.hasAttribute('tabindex') || nextFocusDisabled) {
+        // Move to the next element.
+        nextFocus = traversalFunction(list, nextFocus);
+      } else {
+        nextFocus.focus();
+        return;
+      }
+    }
+  };
+
+  const useTabsList = props => {
+    const {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+      children,
+      ref
+    } = props;
+    const tabsListRef = /*#__PURE__*/React__namespace.createRef();
+    const handleRef = useForkRef(tabsListRef, ref);
+    const context = useTabContext();
+
+    if (context === null) {
+      throw new Error('No TabContext provided');
+    }
+
+    const {
+      value,
+      orientation = 'horizontal',
+      direction = 'ltr'
+    } = context;
+    const isRtl = direction === 'rtl';
+
+    const handleKeyDown = event => {
+      const list = tabsListRef.current;
+      const currentFocus = ownerDocument(list).activeElement; // Keyboard navigation assumes that [role="tab"] are siblings
+      // though we might warn in the future about nested, interactive elements
+      // as a a11y violation
+
+      const role = currentFocus == null ? void 0 : currentFocus.getAttribute('role');
+
+      if (role !== 'tab') {
+        return;
+      }
+
+      let previousItemKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+      let nextItemKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+
+      if (orientation === 'horizontal' && isRtl) {
+        // swap previousItemKey with nextItemKey
+        previousItemKey = 'ArrowRight';
+        nextItemKey = 'ArrowLeft';
+      }
+
+      switch (event.key) {
+        case previousItemKey:
+          event.preventDefault();
+          moveFocus$2(list, currentFocus, previousItem$2);
+          break;
+
+        case nextItemKey:
+          event.preventDefault();
+          moveFocus$2(list, currentFocus, nextItem$2);
+          break;
+
+        case 'Home':
+          event.preventDefault();
+          moveFocus$2(list, null, nextItem$2);
+          break;
+
+        case 'End':
+          event.preventDefault();
+          moveFocus$2(list, null, previousItem$2);
+          break;
+      }
+    };
+
+    const createHandleKeyDown = otherHandlers => event => {
+      var _otherHandlers$onKeyD;
+
+      handleKeyDown(event);
+      (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null ? void 0 : _otherHandlers$onKeyD.call(otherHandlers, event);
+    };
+
+    const getRootProps = otherHandlers => {
+      const propsEventHandlers = extractEventHandlers(props);
+
+      const externalEventHandlers = _extends({}, propsEventHandlers, otherHandlers);
+
+      const ownEventHandlers = {
+        onKeyDown: createHandleKeyDown(externalEventHandlers)
+      };
+
+      const mergedEventHandlers = _extends({}, externalEventHandlers, ownEventHandlers);
+
+      return _extends({
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy,
+        'aria-orientation': orientation === 'vertical' ? 'vertical' : null,
+        role: 'tablist',
+        ref: handleRef
+      }, mergedEventHandlers);
+    };
+
+    const processChildren = React__namespace.useCallback(() => {
+      const valueToIndex = new Map();
+      let childIndex = 0;
+      const processedChildren = React__namespace.Children.map(children, child => {
+        if (! /*#__PURE__*/React__namespace.isValidElement(child)) {
+          return null;
+        }
+
+        {
+          if (reactIs_2(child)) {
+            console.error(["MUI: The Tabs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+          }
+        }
+
+        const childValue = child.props.value === undefined ? childIndex : child.props.value;
+        valueToIndex.set(childValue, childIndex);
+        childIndex += 1;
+        return /*#__PURE__*/React__namespace.cloneElement(child, _extends({
+          value: childValue
+        }, childIndex === 1 && value === false && !child.props.tabIndex || value === childValue ? {
+          tabIndex: 0
+        } : {
+          tabIndex: -1
+        }));
+      });
+      return processedChildren;
+    }, [children, value]);
+    return {
+      isRtl,
+      orientation,
+      value,
+      processChildren,
+      getRootProps
+    };
+  };
+
+  var useTabsList$1 = useTabsList;
+
+  const _excluded$2b = ["className", "children", "component", "components", "componentsProps"];
+
+  const useUtilityClasses$1M = ownerState => {
+    const {
+      orientation
+    } = ownerState;
+    const slots = {
+      root: ['root', orientation]
+    };
+    return composeClasses(slots, getTabsListUnstyledUtilityClass, {});
+  };
+  /**
+   *
+   * Demos:
+   *
+   * - [Tabs](https://mui.com/components/tabs/)
+   *
+   * API:
+   *
+   * - [TabsListUnstyled API](https://mui.com/api/tabs-list-unstyled/)
+   */
+
+
+  const TabsListUnstyled = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
+    var _ref, _componentsProps$root;
+
+    const {
+      className,
+      component,
+      components = {},
+      componentsProps = {}
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded$2b);
+
+    const {
+      isRtl,
+      orientation,
+      getRootProps,
+      processChildren
+    } = useTabsList$1(_extends({}, props, {
+      ref
+    }));
+
+    const ownerState = _extends({}, props, {
+      isRtl,
+      orientation
+    });
+
+    const classes = useUtilityClasses$1M(ownerState);
+    const TabsListRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
+    const tabsListRootProps = appendOwnerState(TabsListRoot, _extends({}, other, componentsProps.root), ownerState);
+    const processedChildren = processChildren();
+    return /*#__PURE__*/jsxRuntime_1(TabsListRoot, _extends({}, getRootProps(), tabsListRootProps, {
+      className: clsx(className, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, classes.root),
+      children: processedChildren
+    }));
+  });
+  TabsListUnstyled.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
+    // ----------------------------------------------------------------------
+
+    /**
+     * The content of the component.
+     */
+    children: propTypes.node,
+
+    /**
+     * @ignore
+     */
+    className: propTypes.string,
+
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: propTypes.elementType,
+
+    /**
+     * The components used for each slot inside the TabsList.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components: propTypes.shape({
+      Root: propTypes.elementType
+    }),
+
+    /**
+     * The props used for each slot inside the TabsList.
+     * @default {}
+     */
+    componentsProps: propTypes.object
+  } ;
+  var TabsListUnstyled$1 = TabsListUnstyled;
+
+  function getTabUnstyledUtilityClass(slot) {
+    return generateUtilityClass('TabUnstyled', slot);
+  }
+  const tabUnstyledClasses = generateUtilityClasses('TabUnstyled', ['root', 'selected', 'disabled']);
+  var tabUnstyledClasses$1 = tabUnstyledClasses;
+
+  const _excluded$2a = ["getRootProps"];
+
+  const useTab = props => {
+    const {
+      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 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 getRootProps = otherHandlers => {
+      const buttonResolvedProps = getRootPropsButton(_extends({
+        onClick: handleClick,
+        onFocus: handleFocus
+      }, otherHandlers));
+      return _extends({}, buttonResolvedProps, a11yAttributes);
+    };
+
+    return _extends({
+      getRootProps
+    }, otherButtonProps, {
+      selected
+    });
+  };
+
+  var useTab$1 = useTab;
+
+  const _excluded$29 = ["action", "children", "value", "className", "disabled", "onChange", "onClick", "onFocus", "component", "components", "componentsProps"];
+
+  const useUtilityClasses$1L = ownerState => {
+    const {
+      selected,
+      disabled
+    } = ownerState;
+    const slots = {
+      root: ['root', selected && 'selected', disabled && 'disabled']
+    };
+    return composeClasses(slots, getTabUnstyledUtilityClass, {});
+  };
+  /**
+   *
+   * Demos:
+   *
+   * - [Tabs](https://mui.com/components/tabs/)
+   *
+   * API:
+   *
+   * - [TabUnstyled API](https://mui.com/api/tab-unstyled/)
+   */
+
+
+  const TabUnstyled = /*#__PURE__*/React__namespace.forwardRef(function TabUnstyled(props, ref) {
+    var _ref, _componentsProps$root;
+
+    const {
+      action,
+      children,
+      className,
+      disabled = false,
+      component,
+      components = {},
+      componentsProps = {}
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded$29);
+
+    const tabRef = React__namespace.useRef();
+    const handleRef = useForkRef(tabRef, ref);
+    const {
+      active,
+      focusVisible,
+      setFocusVisible,
+      selected,
+      getRootProps
+    } = useTab$1(_extends({}, props, {
+      ref: handleRef
+    }));
+    React__namespace.useImperativeHandle(action, () => ({
+      focusVisible: () => {
+        setFocusVisible(true);
+        tabRef.current.focus();
+      }
+    }), [setFocusVisible]);
+
+    const ownerState = _extends({}, props, {
+      active,
+      focusVisible,
+      disabled,
+      selected
+    });
+
+    const classes = useUtilityClasses$1L(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),
+      ref: ref,
+      children: children
+    }));
+  });
+  TabUnstyled.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
+    // ----------------------------------------------------------------------
+
+    /**
+     * 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,
+
+    /**
+     * @ignore
+     */
+    className: propTypes.string,
+
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: propTypes.elementType,
+
+    /**
+     * The components used for each slot inside the Tab.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components: propTypes.shape({
+      Root: propTypes.elementType
+    }),
+
+    /**
+     * The props used for each slot inside the Tab.
+     * @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.
+     */
+    value: propTypes.oneOfType([propTypes.number, propTypes.string])
+  } ;
+  var TabUnstyled$1 = TabUnstyled;
+
   const _excluded$28 = ["onChange", "maxRows", "minRows", "style", "value"];
 
   function getStyleValue(computedStyle, property) {
@@ -15532,7 +16622,7 @@ const theme2 = createTheme({ palette: {
     const theme = _extends({}, themeInput);
 
     theme.typography = _extends({}, theme.typography);
-    const typography = theme.typography; // Convert between css lengths e.g. em->px or px->rem
+    const typography = theme.typography; // Convert between CSS lengths e.g. em->px or px->rem
     // Set the baseFontSize for your project. Defaults to 16px (also the browser default).
 
     const convert = convertLength(typography.htmlFontSize);
@@ -15799,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.
@@ -17223,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.
@@ -17395,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.
@@ -17672,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.
@@ -17683,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
   } ;
@@ -17784,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;
 
@@ -17860,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;
 
@@ -18706,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.
      */
@@ -18799,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
@@ -19003,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.
      */
@@ -19017,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;
 
@@ -19072,7 +20162,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     color: theme.palette.action.active,
     transition: theme.transitions.create('background-color', {
       duration: theme.transitions.duration.shortest
-    }),
+    })
+  }, !ownerState.disableRipple && {
     '&:hover': {
       backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
@@ -19089,8 +20180,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     ownerState
   }) => _extends({}, ownerState.color === 'inherit' && {
     color: 'inherit'
-  }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && {
-    color: theme.palette[ownerState.color].main,
+  }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends({
+    color: theme.palette[ownerState.color].main
+  }, !ownerState.disableRipple && {
     '&:hover': {
       backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
@@ -19098,7 +20190,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         backgroundColor: 'transparent'
       }
     }
-  }, ownerState.size === 'small' && {
+  }), ownerState.size === 'small' && {
     padding: 5,
     fontSize: theme.typography.pxToRem(18)
   }, ownerState.size === 'large' && {
@@ -19233,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;
 
@@ -19294,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'
@@ -19389,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),
@@ -19507,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.
@@ -19695,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.
@@ -19807,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;
 
@@ -19975,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;
 
@@ -19999,11 +21089,6 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       ref: ref
     }));
   });
-
-  function resolveAnchorEl$1(anchorEl) {
-    return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
-  }
-
   Popper.propTypes
   /* remove-proptypes */
   = {
@@ -20018,23 +21103,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * It's used to set the position of the popper.
      * The return value will passed as the reference object of the Popper instance.
      */
-    anchorEl: chainPropTypes(propTypes.oneOfType([HTMLElementType, propTypes.object, propTypes.func]), props => {
-      if (props.open) {
-        const resolvedAnchorEl = resolveAnchorEl$1(props.anchorEl);
-
-        if (resolvedAnchorEl && resolvedAnchorEl.nodeType === 1) {
-          const box = resolvedAnchorEl.getBoundingClientRect();
-
-          if (box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
-            return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
-          }
-        } else if (!resolvedAnchorEl || typeof resolvedAnchorEl.getBoundingClientRect !== 'function' || resolvedAnchorEl.contextElement != null && resolvedAnchorEl.contextElement.nodeType !== 1) {
-          return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', 'It should be an HTML element instance or a virtualElement ', '(https://popper.js.org/docs/v2/virtual-elements/).'].join('\n'));
-        }
-      }
-
-      return null;
-    }),
+    anchorEl: propTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([HTMLElementType, propTypes.object, propTypes.func]),
 
     /**
      * Popper render function or node.
@@ -20269,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;
 
@@ -20783,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.
@@ -21850,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.
@@ -22124,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.
@@ -22142,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
@@ -22204,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,
@@ -22226,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,
@@ -22241,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({
@@ -22296,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.
@@ -22658,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.
@@ -22960,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.
@@ -23098,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`.
@@ -23278,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.
@@ -23587,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;
 
@@ -23608,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 {
@@ -23809,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,
@@ -23882,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,
@@ -23998,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
@@ -24276,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.
@@ -24377,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;
 
@@ -24499,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;
 
@@ -24597,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;
 
@@ -24687,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;
 
@@ -24890,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.
@@ -25050,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;
 
@@ -25596,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.
@@ -25848,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.
@@ -25872,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);
   }
@@ -26216,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;
 
@@ -26327,7 +27207,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     children: propTypes.node,
 
     /**
-     * Enable `color-scheme` css property to use `theme.palette.mode`.
+     * Enable `color-scheme` CSS property to use `theme.palette.mode`.
      * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
      * For browser support, check out https://caniuse.com/?search=color-scheme
      * @default false
@@ -26632,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;
 
@@ -27021,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.
@@ -27043,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
   } ;
@@ -27145,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;
 
@@ -27256,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;
 
@@ -27325,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;
 
@@ -27406,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;
 
@@ -27654,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.
@@ -28333,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.
@@ -28588,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.
@@ -29337,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).
@@ -29731,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).
@@ -30055,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.
@@ -30269,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.
@@ -30376,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;
 
@@ -30553,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.
@@ -30734,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;
 
@@ -30928,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',
@@ -30952,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
@@ -30996,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);
   };
@@ -31176,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.
@@ -32337,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;
@@ -32514,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.
@@ -32702,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;
 
@@ -32928,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.
@@ -33243,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).
@@ -33438,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.
@@ -33651,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.
@@ -34000,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.
@@ -34233,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.
@@ -34401,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;
 
@@ -34629,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.
      */
@@ -34644,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;
 
@@ -34740,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;
@@ -35141,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;
 
@@ -35235,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;
 
@@ -35333,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;
 
@@ -35515,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;
 
@@ -36269,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
@@ -36307,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
@@ -36572,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'
@@ -36586,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,
@@ -36834,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.
      */
@@ -36855,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
@@ -37068,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.
@@ -37416,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.
@@ -37864,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).
@@ -38361,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.
@@ -38627,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.
@@ -38957,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.
@@ -39774,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.
@@ -39872,7 +40773,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     component: propTypes.elementType,
 
     /**
-     * Enable `color-scheme` css property to use `theme.palette.mode`.
+     * Enable `color-scheme` CSS property to use `theme.palette.mode`.
      * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
      * For browser support, check out https://caniuse.com/?search=color-scheme
      */
@@ -40238,7 +41139,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
 
       return /*#__PURE__*/React__namespace.cloneElement(child, {
-        'aria-selected': selected ? 'true' : undefined,
+        'aria-selected': selected ? 'true' : 'false',
         onClick: handleItemClick(child),
         onKeyUp: event => {
           if (event.key === ' ') {
@@ -40272,7 +41173,15 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     }
 
     if (computeDisplay) {
-      display = multiple ? displayMultiple.join(', ') : displaySingle;
+      if (multiple) {
+        if (value.length === 0) {
+          display = '';
+        } else {
+          display = displayMultiple.reduce((prev, curr) => [prev, ', ', curr]);
+        }
+      } else {
+        display = displaySingle;
+      }
     } // Avoid performing a layout computation in the render method.
 
 
@@ -40786,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.
@@ -41016,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.
@@ -41655,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.
@@ -41837,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;
 
@@ -41848,7 +42757,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   var snackbarClasses$1 = snackbarClasses;
 
   const _excluded$z = ["onEnter", "onExited"],
-        _excluded2$2 = ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onClose", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"];
+        _excluded2$2 = ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"];
 
   const useUtilityClasses$s = ownerState => {
     const {
@@ -41942,7 +42851,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       ContentProps,
       disableWindowBlurListener = false,
       message,
+      onBlur,
       onClose,
+      onFocus,
       onMouseEnter,
       onMouseLeave,
       open,
@@ -42012,6 +42923,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
     }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
 
+    const handleFocus = event => {
+      if (onFocus) {
+        onFocus(event);
+      }
+
+      handlePause();
+    };
+
     const handleMouseEnter = event => {
       if (onMouseEnter) {
         onMouseEnter(event);
@@ -42020,6 +42939,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       handlePause();
     };
 
+    const handleBlur = event => {
+      if (onBlur) {
+        onBlur(event);
+      }
+
+      handleResume();
+    };
+
     const handleMouseLeave = event => {
       if (onMouseLeave) {
         onMouseLeave(event);
@@ -42062,7 +42989,33 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
 
       return undefined;
-    }, [disableWindowBlurListener, handleResume, open]); // So we only render active snackbars.
+    }, [disableWindowBlurListener, handleResume, open]);
+    React__namespace.useEffect(() => {
+      if (!open) {
+        return undefined;
+      }
+      /**
+       * @param {KeyboardEvent} nativeEvent
+       */
+
+
+      function handleKeyDown(nativeEvent) {
+        if (!nativeEvent.defaultPrevented) {
+          // IE11, Edge (prior to using Bink?) use 'Esc'
+          if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
+            // not calling `preventDefault` since we don't know if people may ignore this event e.g. a permanently open snackbar
+            if (onClose) {
+              onClose(nativeEvent, 'escapeKeyDown');
+            }
+          }
+        }
+      }
+
+      document.addEventListener('keydown', handleKeyDown);
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+      };
+    }, [exited, open, onClose]); // So we only render active snackbars.
 
     if (!open && exited) {
       return null;
@@ -42073,6 +43026,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     }, ClickAwayListenerProps, {
       children: /*#__PURE__*/jsxRuntime_1(SnackbarRoot, _extends({
         className: clsx(classes.root, className),
+        onBlur: handleBlur,
+        onFocus: handleFocus,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         ownerState: ownerState,
@@ -42171,6 +43126,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      */
     message: propTypes.node,
 
+    /**
+     * @ignore
+     */
+    onBlur: propTypes.func,
+
     /**
      * Callback fired when the component requests to be closed.
      * Typically `onClose` is used to set state in the parent component,
@@ -42178,11 +43138,16 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * The `reason` parameter can optionally be used to control the response to `onClose`,
      * for example ignoring `clickaway`.
      *
-     * @param {React.SyntheticEvent<any>} event The event source of the callback.
-     * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`.
+     * @param {React.SyntheticEvent<any> | Event} event The event source of the callback.
+     * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`.
      */
     onClose: propTypes.func,
 
+    /**
+     * @ignore
+     */
+    onFocus: propTypes.func,
+
     /**
      * @ignore
      */
@@ -42209,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.
@@ -42234,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
@@ -42975,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.
@@ -43000,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
   } ;
@@ -43787,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.
@@ -43805,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
   } ;
@@ -44046,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.
@@ -44216,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;
@@ -44371,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;
 
@@ -44569,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;
 
@@ -44748,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;
 
@@ -44982,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;
@@ -45116,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;
 
@@ -45251,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;
 
@@ -45387,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.
@@ -45411,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
   } ;
@@ -45567,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;
 
@@ -46578,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.
@@ -46853,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.
@@ -47020,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;
 
@@ -47125,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;
 
@@ -47345,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.
@@ -47437,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;
 
@@ -47530,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;
 
@@ -47623,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;
 
@@ -47743,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.
@@ -48293,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;
 
@@ -48429,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;
 
@@ -48610,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;
 
@@ -48843,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;
 
@@ -49637,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.
@@ -49763,7 +50728,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       FormHelperTextProps,
       fullWidth = false,
       helperText,
-      id,
+      id: idOverride,
       InputLabelProps,
       inputProps,
       InputProps,
@@ -49833,6 +50798,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       InputMore['aria-describedby'] = undefined;
     }
 
+    const id = useId(idOverride);
     const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
     const inputLabelId = label && id ? `${id}-label` : undefined;
     const InputComponent = variantComponent[variant];
@@ -50084,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).
@@ -50326,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
@@ -50588,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
@@ -50782,7 +51748,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.Switch = Switch$1;
   exports.SwitchUnstyled = SwitchUnstyled$1;
   exports.Tab = Tab$1;
+  exports.TabPanelUnstyled = TabPanelUnstyled$1;
   exports.TabScrollButton = TabScrollButton$1;
+  exports.TabUnstyled = TabUnstyled$1;
   exports.Table = Table$1;
   exports.TableBody = TableBody$1;
   exports.TableCell = TableCell$1;
@@ -50793,6 +51761,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.TableRow = TableRow$1;
   exports.TableSortLabel = TableSortLabel$1;
   exports.Tabs = Tabs$1;
+  exports.TabsContext = Context$1;
+  exports.TabsListUnstyled = TabsListUnstyled$1;
+  exports.TabsUnstyled = TabsUnstyled$1;
   exports.TextField = TextField$1;
   exports.TextareaAutosize = TextareaAutosize$1;
   exports.ThemeProvider = ThemeProvider;
@@ -50863,6 +51834,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.easing = easing;
   exports.emphasize = emphasize;
   exports.experimentalStyled = styled$1;
+  exports.experimental_sx = sx;
   exports.extractEventHandlers = extractEventHandlers;
   exports.fabClasses = fabClasses$1;
   exports.filledInputClasses = filledInputClasses$1;
@@ -50950,6 +51922,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.getOutlinedInputUtilityClass = getOutlinedInputUtilityClass;
   exports.getPaginationItemUtilityClass = getPaginationItemUtilityClass;
   exports.getPaginationUtilityClass = getPaginationUtilityClass;
+  exports.getPanelId = getPanelId;
   exports.getPaperUtilityClass = getPaperUtilityClass;
   exports.getPopoverUtilityClass = getPopoverUtilityClass;
   exports.getRadioUtilityClass = getRadioUtilityClass;
@@ -50973,7 +51946,10 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.getSvgIconUtilityClass = getSvgIconUtilityClass;
   exports.getSwitchUnstyledUtilityClass = getSwitchUnstyledUtilityClass;
   exports.getSwitchUtilityClass = getSwitchUtilityClass;
+  exports.getTabId = getTabId;
+  exports.getTabPanelUnstyledUtilityClass = getTabPanelUnstyledUtilityClass;
   exports.getTabScrollButtonUtilityClass = getTabScrollButtonUtilityClass;
+  exports.getTabUnstyledUtilityClass = getTabUnstyledUtilityClass;
   exports.getTabUtilityClass = getTabUtilityClass;
   exports.getTableBodyUtilityClass = getTableBodyUtilityClass;
   exports.getTableCellUtilityClass = getTableCellUtilityClass;
@@ -50984,6 +51960,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.getTableRowUtilityClass = getTableRowUtilityClass;
   exports.getTableSortLabelUtilityClass = getTableSortLabelUtilityClass;
   exports.getTableUtilityClass = getTableUtilityClass;
+  exports.getTabsListUnstyledUtilityClass = getTabsListUnstyledUtilityClass;
+  exports.getTabsUnstyledUtilityClass = getTabsUnstyledUtilityClass;
   exports.getTabsUtilityClass = getTabsUtilityClass;
   exports.getTextFieldUtilityClass = getTextFieldUtilityClass;
   exports.getToggleButtonGroupUtilityClass = getToggleButtonGroupUtilityClass;
@@ -51062,7 +52040,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.switchClasses = switchClasses$1;
   exports.switchUnstyledClasses = classes;
   exports.tabClasses = tabClasses$1;
+  exports.tabPanelUnstyledClasses = tabPanelUnstyledClasses$1;
   exports.tabScrollButtonClasses = tabScrollButtonClasses$1;
+  exports.tabUnstyledClasses = tabUnstyledClasses$1;
   exports.tableBodyClasses = tableBodyClasses$1;
   exports.tableCellClasses = tableCellClasses$1;
   exports.tableClasses = tableClasses$1;
@@ -51073,6 +52053,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.tableRowClasses = tableRowClasses$1;
   exports.tableSortLabelClasses = tableSortLabelClasses$1;
   exports.tabsClasses = tabsClasses$1;
+  exports.tabsListUnstyledClasses = tabsListUnstyledClasses$1;
+  exports.tabsUnstyledClasses = tabsUnstyledClasses$1;
   exports.textFieldClasses = textFieldClasses$1;
   exports.toggleButtonClasses = toggleButtonClasses$1;
   exports.toggleButtonGroupClasses = toggleButtonGroupClasses$1;
@@ -51102,6 +52084,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.useRadioGroup = useRadioGroup;
   exports.useScrollTrigger = useScrollTrigger;
   exports.useSwitch = useSwitch;
+  exports.useTab = useTab$1;
+  exports.useTabContext = useTabContext;
+  exports.useTabPanel = useTabPanel$1;
+  exports.useTabs = useTabs$1;
+  exports.useTabsList = useTabsList$1;
   exports.useTheme = useTheme;
   exports.useThemeProps = useThemeProps;
   exports.withStyles = withStyles;