@mui/material 5.1.1 → 5.2.0

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.1.1
+/** @license MUI v5.2.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -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,7 +4998,7 @@
   const useEnhancedEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
   var useEnhancedEffect$1 = useEnhancedEffect;
 
-  function useId(idOverride) {
+  function useRandomId(idOverride) {
     const [defaultId, setDefaultId] = React__namespace.useState(idOverride);
     const id = idOverride || defaultId;
     React__namespace.useEffect(() => {
@@ -5013,6 +5011,24 @@
     }, [defaultId]);
     return id;
   }
+  /**
+   *
+   * @example <div id={useId()} />
+   * @param idOverride
+   * @returns {string}
+   */
+
+
+  function useReactId(idOverride) {
+    // TODO: Remove `React as any` once `useId` is part of stable types.
+    if (React__namespace.useId !== undefined) {
+      const reactId = React__namespace.useId();
+      return idOverride != null ? idOverride : reactId;
+    } // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
+
+
+    return useRandomId(idOverride);
+  }
 
   function unsupportedProp(props, propName, componentName, location, propFullName) {
 
@@ -5508,7 +5524,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 +6280,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 +6313,7 @@
 
   styleFunctionSx.filterProps = ['sx'];
 
-  const _excluded$2o = ["sx"];
+  const _excluded$2t = ["sx"];
 
   const splitProps = props => {
     const result = {
@@ -6316,7 +6334,7 @@
     const {
       sx: inSx
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2o);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2t);
 
     const {
       systemProps,
@@ -6386,7 +6404,7 @@
   	return str;
   }
 
-  const _excluded$2n = ["values", "unit", "step"];
+  const _excluded$2s = ["values", "unit", "step"];
 
   function createBreakpoints(breakpoints) {
     const {
@@ -6407,7 +6425,7 @@
       unit = 'px',
       step = 5
     } = breakpoints,
-          other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2n);
+          other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2s);
 
     const keys = Object.keys(values);
 
@@ -6482,7 +6500,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 +6509,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 +6631,7 @@
     return useTheme$2(defaultTheme);
   }
 
-  const _excluded$2l = ["className", "component"];
+  const _excluded$2q = ["className", "component"];
   function createBox(options = {}) {
     const {
       defaultTheme,
@@ -6629,7 +6647,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 +6678,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 +6699,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 +6712,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 +6793,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;
@@ -7277,7 +7295,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 +7310,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: {}
@@ -7458,7 +7476,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       selectOnFocus = !props.freeSolo,
       value: valueProp
     } = props;
-    const id = useId(idProp);
+    const id = useReactId(idProp);
     let getOptionLabel = getOptionLabelProp;
 
     getOptionLabel = option => {
@@ -8463,9 +8481,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 +8506,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 +8587,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 +8626,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 +8665,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';
@@ -9005,9 +9023,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  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 +9060,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 +9086,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
@@ -9158,7 +9176,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 +9226,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 +9558,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 +9595,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 +10539,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 +10611,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 +10688,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 +12870,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 +12896,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 +12916,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 +12948,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 +12989,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 +13056,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 +13104,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 +13274,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 +13434,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 +13496,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 +13926,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 +14392,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 +14422,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,7 +14562,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var SwitchUnstyled$1 = SwitchUnstyled;
 
-  const _excluded$28 = ["onChange", "maxRows", "minRows", "style", "value"];
+  const _excluded$2d = ["onChange", "maxRows", "minRows", "style", "value"];
 
   function getStyleValue(computedStyle, property) {
     return parseInt(computedStyle[property], 10) || 0;
@@ -14573,7 +14591,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       style,
       value
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$28);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2d);
 
     const {
       current: isControlled
@@ -14759,6 +14777,895 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var TextareaAutosize$1 = TextareaAutosize;
 
+  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 = useReactId();
+    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$2c = ["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$2c);
+
+    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;
+
+  function getTabUnstyledUtilityClass(slot) {
+    return generateUtilityClass('TabUnstyled', slot);
+  }
+  const tabUnstyledClasses = generateUtilityClasses('TabUnstyled', ['root', 'selected', 'disabled']);
+  var tabUnstyledClasses$1 = tabUnstyledClasses;
+
+  const _excluded$2b = ["getRootProps"];
+
+  const useTab = props => {
+    const {
+      value: valueProp,
+      onChange,
+      onClick,
+      onFocus
+    } = props;
+
+    const _useButton = useButton(props),
+          {
+      getRootProps: getRootPropsButton
+    } = _useButton,
+          otherButtonProps = _objectWithoutPropertiesLoose(_useButton, _excluded$2b);
+
+    const context = useTabContext();
+
+    if (context === null) {
+      throw new Error('No TabContext provided');
+    }
+
+    const value = valueProp != null ? valueProp : 0;
+    const selected = context.value === value;
+    const selectionFollowsFocus = context.selectionFollowsFocus;
+    const a11yAttributes = {
+      role: 'tab',
+      'aria-controls': getPanelId(context, value),
+      id: getTabId(context, value),
+      'aria-selected': selected,
+      disabled: otherButtonProps.disabled
+    };
+
+    const handleFocus = event => {
+      if (selectionFollowsFocus && !selected) {
+        if (onChange) {
+          onChange(event, value);
+        }
+
+        context.onSelected(event, value);
+      }
+
+      if (onFocus) {
+        onFocus(event);
+      }
+    };
+
+    const handleClick = event => {
+      if (!selected) {
+        if (onChange) {
+          onChange(event, value);
+        }
+
+        context.onSelected(event, value);
+      }
+
+      if (onClick) {
+        onClick(event);
+      }
+    };
+
+    const 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$2a = ["action", "children", "value", "className", "disabled", "onChange", "onClick", "onFocus", "component", "components", "componentsProps"];
+
+  const useUtilityClasses$1N = 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$2a);
+
+    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$1N(ownerState);
+    const TabRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'button';
+    const tabRootProps = appendOwnerState(TabRoot, _extends({}, other, componentsProps.root), ownerState);
+    return /*#__PURE__*/jsxRuntime_1(TabRoot, _extends({}, getRootProps(), tabRootProps, {
+      className: clsx(classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, className),
+      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;
+
+  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$29 = ["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$29);
+
+    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 getTabPanelUnstyledUtilityClass(slot) {
+    return generateUtilityClass('TabPanelUnstyled', slot);
+  }
+  const tabPanelUnstyledClasses = generateUtilityClasses('TabPanelUnstyled', ['root', 'hidden']);
+  var tabPanelUnstyledClasses$1 = tabPanelUnstyledClasses;
+
+  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$28 = ["children", "className", "value", "components", "componentsProps", "component"];
+
+  const useUtilityClasses$1L = 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$28);
+
+    const {
+      hidden,
+      getRootProps
+    } = useTabPanel$1(props);
+
+    const ownerState = _extends({}, props, {
+      hidden
+    });
+
+    const classes = useUtilityClasses$1L(ownerState);
+    const TabPanelRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
+    const tabPanelRootProps = appendOwnerState(TabPanelRoot, _extends({}, other, componentsProps.root), ownerState);
+    return /*#__PURE__*/jsxRuntime_1(TabPanelRoot, _extends({}, getRootProps(), {
+      ref: ref,
+      role: "tabpanel"
+    }, tabPanelRootProps, {
+      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 createMixins(breakpoints, spacing, mixins) {
     return _extends({
       toolbar: {
@@ -19072,7 +19979,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 +19997,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 +20007,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' && {
@@ -19999,11 +20908,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 +20922,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.
@@ -26851,7 +27741,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
     };
 
-    const ariaLabelledby = useId(ariaLabelledbyProp);
+    const ariaLabelledby = useReactId(ariaLabelledbyProp);
     const dialogContextValue = React__namespace.useMemo(() => {
       return {
         titleId: ariaLabelledby
@@ -31507,32 +32397,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
    * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
    */
 
-  function useMediaQuery(queryInput, options = {}) {
-    const theme = useTheme$2(); // Wait for jsdom to support the match media feature.
-    // All the browsers MUI support have this built-in.
-    // This defensive check is here for simplicity.
-    // Most of the time, the match media logic isn't central to people tests.
-
+  function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
     const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
-    const {
-      defaultMatches = false,
-      matchMedia = supportMatchMedia ? window.matchMedia : null,
-      noSsr = false,
-      ssrMatchMedia = null
-    } = getThemeProps({
-      name: 'MuiUseMediaQuery',
-      props: options,
-      theme
-    });
-
-    {
-      if (typeof queryInput === 'function' && theme === null) {
-        console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
-      }
-    }
-
-    let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
-    query = query.replace(/^@media( ?)/m, '');
     const [match, setMatch] = React__namespace.useState(() => {
       if (noSsr && supportMatchMedia) {
         return matchMedia(query).matches;
@@ -31564,13 +32430,76 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         }
       };
 
-      updateMatch();
+      updateMatch(); // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+
       queryList.addListener(updateMatch);
       return () => {
         active = false;
         queryList.removeListener(updateMatch);
       };
     }, [query, matchMedia, supportMatchMedia]);
+    return match;
+  }
+
+  function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
+    const getDefaultSnapshot = React__namespace.useCallback(() => defaultMatches, [defaultMatches]);
+    const getServerSnapshot = React__namespace.useMemo(() => {
+      if (ssrMatchMedia !== null) {
+        const {
+          matches
+        } = ssrMatchMedia(query);
+        return () => matches;
+      }
+
+      return getDefaultSnapshot;
+    }, [getDefaultSnapshot, query, ssrMatchMedia]);
+    const [getSnapshot, subscribe] = React__namespace.useMemo(() => {
+      if (matchMedia === null) {
+        return [getDefaultSnapshot, () => () => {}];
+      }
+
+      const mediaQueryList = matchMedia(query);
+      return [() => mediaQueryList.matches, notify => {
+        // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+        mediaQueryList.addListener(notify);
+        return () => {
+          mediaQueryList.removeListener(notify);
+        };
+      }];
+    }, [getDefaultSnapshot, matchMedia, query]);
+    const match = React__namespace.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+    return match;
+  }
+
+  function useMediaQuery(queryInput, options = {}) {
+    const theme = useTheme$2(); // Wait for jsdom to support the match media feature.
+    // All the browsers MUI support have this built-in.
+    // This defensive check is here for simplicity.
+    // Most of the time, the match media logic isn't central to people tests.
+
+    const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
+    const {
+      defaultMatches = false,
+      matchMedia = supportMatchMedia ? window.matchMedia : null,
+      ssrMatchMedia = null,
+      noSsr
+    } = getThemeProps({
+      name: 'MuiUseMediaQuery',
+      props: options,
+      theme
+    });
+
+    {
+      if (typeof queryInput === 'function' && theme === null) {
+        console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
+      }
+    }
+
+    let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
+    query = query.replace(/^@media( ?)/m, ''); // TODO: Drop `useMediaQueryOld` and use  `use-sync-external-store` shim in `useMediaQueryNew` once the package is stable
+
+    const useMediaQueryImplementation = React__namespace.useSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
+    const match = useMediaQueryImplementation(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
 
     {
       // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -39009,7 +39938,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
     };
 
-    const name = useId(nameProp);
+    const name = useReactId(nameProp);
     return /*#__PURE__*/jsxRuntime_1(RadioGroupContext$1.Provider, {
       value: {
         name,
@@ -39267,7 +40196,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     const isHovered = itemValue <= hover;
     const isFocused = itemValue <= focus;
     const isChecked = itemValue === ratingValueRounded;
-    const id = useId();
+    const id = useReactId();
 
     const container = /*#__PURE__*/jsxRuntime_1(RatingIcon, {
       as: IconContainerComponent,
@@ -39381,7 +40310,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded2$3);
 
-    const name = useId(nameProp);
+    const name = useReactId(nameProp);
     const [valueDerived, setValueState] = useControlled({
       controlled: valueProp,
       default: defaultValue,
@@ -40238,7 +41167,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 === ' ') {
@@ -43270,7 +44199,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }, [title, childNode, isControlled]);
     }
 
-    const id = useId(idProp);
+    const id = useReactId(idProp);
     const prevUserSelect = React__namespace.useRef();
     const stopTouchInteraction = React__namespace.useCallback(() => {
       if (prevUserSelect.current !== undefined) {
@@ -48060,8 +48989,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       colSpan = colSpanProp || 1000; // col-span over everything
     }
 
-    const selectId = useId(SelectProps.id);
-    const labelId = useId(SelectProps.labelId);
+    const selectId = useReactId(SelectProps.id);
+    const labelId = useReactId(SelectProps.labelId);
 
     const getLabelDisplayedRowsTo = () => {
       if (count === -1) {
@@ -50782,7 +51711,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 +51724,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;
@@ -50950,6 +51884,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 +51908,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 +51922,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 +52002,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 +52015,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;
@@ -51086,7 +52030,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.unstable_getUnit = getUnit;
   exports.unstable_toUnitless = toUnitless;
   exports.unstable_useEnhancedEffect = useEnhancedEffect$1;
-  exports.unstable_useId = useId;
+  exports.unstable_useId = useReactId;
   exports.unsupportedProp = unsupportedProp;
   exports.useAutocomplete = useAutocomplete;
   exports.useButton = useButton;
@@ -51102,6 +52046,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;