@mui/material 5.7.0 → 5.8.0

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.7.0
+/** @license MUI v5.8.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -4724,7 +4724,7 @@
     styles: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func])
   } ;
 
-  function styled$2(tag, options) {
+  function styled$3(tag, options) {
     const stylesFactory = emStyled(tag, options);
 
     {
@@ -5565,6 +5565,74 @@
     return output;
   }
 
+  function composeClasses(slots, getUtilityClass, classes) {
+    const output = {};
+    Object.keys(slots).forEach( // `Objet.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
+    // @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
+    slot => {
+      output[slot] = slots[slot].reduce((acc, key) => {
+        if (key) {
+          if (classes && classes[key]) {
+            acc.push(classes[key]);
+          }
+
+          acc.push(getUtilityClass(key));
+        }
+
+        return acc;
+      }, []).join(' ');
+    });
+    return output;
+  }
+
+  const defaultGenerator = componentName => componentName;
+
+  const createClassNameGenerator = () => {
+    let generate = defaultGenerator;
+    return {
+      configure(generator) {
+        generate = generator;
+      },
+
+      generate(componentName) {
+        return generate(componentName);
+      },
+
+      reset() {
+        generate = defaultGenerator;
+      }
+
+    };
+  };
+
+  const ClassNameGenerator = createClassNameGenerator();
+  var ClassNameGenerator$1 = ClassNameGenerator;
+
+  const globalStateClassesMapping = {
+    active: 'Mui-active',
+    checked: 'Mui-checked',
+    completed: 'Mui-completed',
+    disabled: 'Mui-disabled',
+    error: 'Mui-error',
+    expanded: 'Mui-expanded',
+    focused: 'Mui-focused',
+    focusVisible: 'Mui-focusVisible',
+    required: 'Mui-required',
+    selected: 'Mui-selected'
+  };
+  function generateUtilityClass(componentName, slot) {
+    const globalStateClass = globalStateClassesMapping[slot];
+    return globalStateClass || `${ClassNameGenerator$1.generate(componentName)}-${slot}`;
+  }
+
+  function generateUtilityClasses(componentName, slots) {
+    const result = {};
+    slots.forEach(slot => {
+      result[slot] = generateUtilityClass(componentName, slot);
+    });
+    return result;
+  }
+
   function merge(acc, item) {
     if (!item) {
       return acc;
@@ -6833,7 +6901,7 @@
       generateClassName,
       styleFunctionSx = defaultStyleFunctionSx
     } = options;
-    const BoxRoot = styled$2('div')(styleFunctionSx);
+    const BoxRoot = styled$3('div')(styleFunctionSx);
     const Box = /*#__PURE__*/React__namespace.forwardRef(function Box(inProps, ref) {
       const theme = useTheme$1(defaultTheme);
 
@@ -6988,7 +7056,7 @@
         shouldForwardPropOption = slotShouldForwardProp;
       }
 
-      const defaultStyledResolver = styled$2(tag, _extends({
+      const defaultStyledResolver = styled$3(tag, _extends({
         shouldForwardProp: shouldForwardPropOption,
         label
       }, options));
@@ -7099,6 +7167,9 @@
     };
   }
 
+  const styled$2 = createStyled();
+  var systemStyled = styled$2;
+
   function getThemeProps(params) {
     const {
       theme,
@@ -8232,7 +8303,149 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const _excluded$2e = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+  const _excluded$2e = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
+  const defaultTheme$4 = createTheme$1();
+  const defaultCreateStyledComponent = systemStyled('div', {
+    name: 'MuiContainer',
+    slot: 'Root',
+    overridesResolver: (props, styles) => {
+      const {
+        ownerState
+      } = props;
+      return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
+    }
+  });
+
+  const useThemePropsDefault = inProps => useThemeProps$1({
+    props: inProps,
+    name: 'MuiContainer',
+    defaultTheme: defaultTheme$4
+  });
+
+  const useUtilityClasses$1P = (ownerState, componentName) => {
+    const getContainerUtilityClass = slot => {
+      return generateUtilityClass(componentName, slot);
+    };
+
+    const {
+      classes,
+      fixed,
+      disableGutters,
+      maxWidth
+    } = ownerState;
+    const slots = {
+      root: ['root', maxWidth && `maxWidth${capitalize(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters']
+    };
+    return composeClasses(slots, getContainerUtilityClass, classes);
+  };
+
+  function createContainer(options = {}) {
+    const {
+      // This will allow adding custom styled fn (for example for custom sx style function)
+      createStyledComponent = defaultCreateStyledComponent,
+      useThemeProps = useThemePropsDefault,
+      componentName = 'MuiContainer'
+    } = options;
+    const ContainerRoot = createStyledComponent(({
+      theme,
+      ownerState
+    }) => _extends({
+      width: '100%',
+      marginLeft: 'auto',
+      boxSizing: 'border-box',
+      marginRight: 'auto',
+      display: 'block'
+    }, !ownerState.disableGutters && {
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
+      // @ts-ignore module augmentation fails if custom breakpoints are used
+      [theme.breakpoints.up('sm')]: {
+        paddingLeft: theme.spacing(3),
+        paddingRight: theme.spacing(3)
+      }
+    }), ({
+      theme,
+      ownerState
+    }) => ownerState.fixed && Object.keys(theme.breakpoints.values).reduce((acc, breakpointValueKey) => {
+      const breakpoint = breakpointValueKey;
+      const value = theme.breakpoints.values[breakpoint];
+
+      if (value !== 0) {
+        // @ts-ignore
+        acc[theme.breakpoints.up(breakpoint)] = {
+          maxWidth: `${value}${theme.breakpoints.unit}`
+        };
+      }
+
+      return acc;
+    }, {}), ({
+      theme,
+      ownerState
+    }) => _extends({}, ownerState.maxWidth === 'xs' && {
+      // @ts-ignore module augmentation fails if custom breakpoints are used
+      [theme.breakpoints.up('xs')]: {
+        // @ts-ignore module augmentation fails if custom breakpoints are used
+        maxWidth: Math.max(theme.breakpoints.values.xs, 444)
+      }
+    }, ownerState.maxWidth && // @ts-ignore module augmentation fails if custom breakpoints are used
+    ownerState.maxWidth !== 'xs' && {
+      // @ts-ignore module augmentation fails if custom breakpoints are used
+      [theme.breakpoints.up(ownerState.maxWidth)]: {
+        // @ts-ignore module augmentation fails if custom breakpoints are used
+        maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
+      }
+    }));
+    const Container = /*#__PURE__*/React__namespace.forwardRef(function Container(inProps, ref) {
+      const props = useThemeProps(inProps);
+
+      const {
+        className,
+        component = 'div',
+        disableGutters = false,
+        fixed = false,
+        maxWidth = 'lg'
+      } = props,
+            other = _objectWithoutPropertiesLoose(props, _excluded$2e);
+
+      const ownerState = _extends({}, props, {
+        component,
+        disableGutters,
+        fixed,
+        maxWidth
+      }); // @ts-ignore module augmentation fails if custom breakpoints are used
+
+
+      const classes = useUtilityClasses$1P(ownerState, componentName);
+      return (
+        /*#__PURE__*/
+        // @ts-ignore theme is injected by the styled util
+        jsxRuntime_1(ContainerRoot, _extends({
+          as: component // @ts-ignore module augmentation fails if custom breakpoints are used
+          ,
+          ownerState: ownerState,
+          className: clsx(classes.root, className),
+          ref: ref
+        }, other))
+      );
+    });
+    Container.propTypes
+    /* remove-proptypes */
+    = {
+      children: PropTypes.node,
+      classes: PropTypes.object,
+      className: PropTypes.string,
+      component: PropTypes.elementType,
+      disableGutters: PropTypes.bool,
+      fixed: PropTypes.bool,
+      maxWidth: PropTypes
+      /* @typescript-to-proptypes-ignore */
+      .oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
+      sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+    } ;
+    return Container;
+  }
+
+  const _excluded$2d = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
         _excluded2$b = ["type", "mode"];
   function adaptV4Theme(inputTheme) {
     {
@@ -8247,7 +8460,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       props = {},
       styleOverrides = {}
     } = inputTheme,
-          other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2e);
+          other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2d);
 
     const theme = _extends({}, other, {
       components: {}
@@ -9375,74 +9588,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  function composeClasses(slots, getUtilityClass, classes) {
-    const output = {};
-    Object.keys(slots).forEach( // `Objet.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
-    // @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
-    slot => {
-      output[slot] = slots[slot].reduce((acc, key) => {
-        if (key) {
-          if (classes && classes[key]) {
-            acc.push(classes[key]);
-          }
-
-          acc.push(getUtilityClass(key));
-        }
-
-        return acc;
-      }, []).join(' ');
-    });
-    return output;
-  }
-
-  const defaultGenerator = componentName => componentName;
-
-  const createClassNameGenerator = () => {
-    let generate = defaultGenerator;
-    return {
-      configure(generator) {
-        generate = generator;
-      },
-
-      generate(componentName) {
-        return generate(componentName);
-      },
-
-      reset() {
-        generate = defaultGenerator;
-      }
-
-    };
-  };
-
-  const ClassNameGenerator = createClassNameGenerator();
-  var ClassNameGenerator$1 = ClassNameGenerator;
-
-  const globalStateClassesMapping = {
-    active: 'Mui-active',
-    checked: 'Mui-checked',
-    completed: 'Mui-completed',
-    disabled: 'Mui-disabled',
-    error: 'Mui-error',
-    expanded: 'Mui-expanded',
-    focused: 'Mui-focused',
-    focusVisible: 'Mui-focusVisible',
-    required: 'Mui-required',
-    selected: 'Mui-selected'
-  };
-  function generateUtilityClass(componentName, slot) {
-    const globalStateClass = globalStateClassesMapping[slot];
-    return globalStateClass || `${ClassNameGenerator$1.generate(componentName)}-${slot}`;
-  }
-
-  function generateUtilityClasses(componentName, slots) {
-    const result = {};
-    slots.forEach(slot => {
-      result[slot] = generateUtilityClass(componentName, slot);
-    });
-    return result;
-  }
-
   function useBadge(props) {
     const {
       badgeContent: badgeContentProp,
@@ -9478,9 +9623,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   }
   generateUtilityClasses('BaseBadge', ['root', 'badge', 'invisible']);
 
-  const _excluded$2d = ["badgeContent", "component", "children", "className", "components", "componentsProps", "invisible", "max", "showZero"];
+  const _excluded$2c = ["badgeContent", "component", "children", "className", "components", "componentsProps", "invisible", "max", "showZero"];
 
-  const useUtilityClasses$1P = ownerState => {
+  const useUtilityClasses$1O = ownerState => {
     const {
       invisible
     } = ownerState;
@@ -9501,7 +9646,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       max: maxProp = 99,
       showZero = false
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2d);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2c);
 
     const {
       badgeContent,
@@ -9519,7 +9664,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       showZero
     });
 
-    const classes = useUtilityClasses$1P(ownerState);
+    const classes = useUtilityClasses$1O(ownerState);
     const Root = component || components.Root || 'span';
     const rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root), ownerState);
     const Badge = components.Badge || 'span';
@@ -11833,7 +11978,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   var Portal$1 = Portal;
 
-  const _excluded$2c = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "ownerState", "placement", "popperOptions", "popperRef", "TransitionProps"],
+  const _excluded$2b = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "ownerState", "placement", "popperOptions", "popperRef", "TransitionProps"],
         _excluded2$a = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition"];
 
   function flipPlacement(placement, direction) {
@@ -11879,7 +12024,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       popperRef: popperRefProp,
       TransitionProps
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2c);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2b);
 
     const tooltipRef = React__namespace.useRef(null);
     const ownRef = useForkRef(tooltipRef, ref);
@@ -12769,9 +12914,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$2b = ["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$2a = ["BackdropComponent", "BackdropProps", "children", "classes", "className", "closeAfterTransition", "component", "components", "componentsProps", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "theme", "onTransitionEnter", "onTransitionExited"];
 
-  const useUtilityClasses$1O = ownerState => {
+  const useUtilityClasses$1N = ownerState => {
     const {
       open,
       exited,
@@ -12841,7 +12986,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       onTransitionEnter,
       onTransitionExited
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2b);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2a);
 
     const [exited, setExited] = React__namespace.useState(true);
     const modal = React__namespace.useRef({});
@@ -12918,7 +13063,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       keepMounted
     });
 
-    const classes = useUtilityClasses$1O(ownerState);
+    const classes = useUtilityClasses$1N(ownerState);
 
     if (!keepMounted && !open && (!hasTransition || exited)) {
       return null;
@@ -13990,11 +14135,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const _excluded$2a = ["aria-label", "aria-valuetext", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
+  const _excluded$29 = ["aria-label", "aria-valuetext", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
 
   const Identity = x => x;
 
-  const useUtilityClasses$1N = ownerState => {
+  const useUtilityClasses$1M = ownerState => {
     const {
       disabled,
       dragging,
@@ -14051,7 +14196,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       components = {},
       componentsProps = {}
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2a); // all props with defaults
+          other = _objectWithoutPropertiesLoose(props, _excluded$29); // all props with defaults
     // consider extracting to hook an reusing the lint rule for the varints
 
 
@@ -14110,7 +14255,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const Input = components.Input || 'input';
     const inputProps = appendOwnerState(Input, componentsProps.input, ownerState);
     const hiddenInputProps = getHiddenInputProps();
-    const classes = useUtilityClasses$1N(ownerState);
+    const classes = useUtilityClasses$1M(ownerState);
     return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, getRootProps({
       onMouseDown
     }), {
@@ -14450,7 +14595,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var SliderUnstyled$1 = SliderUnstyled;
 
-  const _excluded$29 = ["onChange", "maxRows", "minRows", "style", "value"];
+  const _excluded$28 = ["onChange", "maxRows", "minRows", "style", "value"];
 
   function getStyleValue(computedStyle, property) {
     return parseInt(computedStyle[property], 10) || 0;
@@ -14479,7 +14624,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       style,
       value
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$29);
+          other = _objectWithoutPropertiesLoose(props, _excluded$28);
 
     const {
       current: isControlled
@@ -14665,7 +14810,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var TextareaAutosize$1 = TextareaAutosize;
 
-  function createMixins(breakpoints, spacing, mixins) {
+  function createMixins(breakpoints, mixins) {
     return _extends({
       toolbar: {
         minHeight: 56,
@@ -14679,7 +14824,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }, mixins);
   }
 
-  const _excluded$28 = ["mode", "contrastThreshold", "tonalOffset"];
+  const _excluded$27 = ["mode", "contrastThreshold", "tonalOffset"];
   const light = {
     // The colors used to style the text.
     text: {
@@ -14863,7 +15008,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-          other = _objectWithoutPropertiesLoose(palette, _excluded$28);
+          other = _objectWithoutPropertiesLoose(palette, _excluded$27);
 
     const primary = palette.primary || getDefaultPrimary(mode);
     const secondary = palette.secondary || getDefaultSecondary(mode);
@@ -15000,7 +15145,7 @@ const theme2 = createTheme({ palette: {
     return paletteOutput;
   }
 
-  const _excluded$27 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+  const _excluded$26 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 
   function round$1(value) {
     return Math.round(value * 1e5) / 1e5;
@@ -15033,7 +15178,7 @@ const theme2 = createTheme({ palette: {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-          other = _objectWithoutPropertiesLoose(_ref, _excluded$27);
+          other = _objectWithoutPropertiesLoose(_ref, _excluded$26);
 
     {
       if (typeof fontSize !== 'number') {
@@ -15101,7 +15246,7 @@ const theme2 = createTheme({ palette: {
   const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
   var shadows$1 = shadows;
 
-  const _excluded$26 = ["duration", "easing", "delay"];
+  const _excluded$25 = ["duration", "easing", "delay"];
   // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
   // to learn the context in which each easing should be used.
   const easing = {
@@ -15156,7 +15301,7 @@ const theme2 = createTheme({ palette: {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-            other = _objectWithoutPropertiesLoose(options, _excluded$26);
+            other = _objectWithoutPropertiesLoose(options, _excluded$25);
 
       {
         const isString = value => typeof value === 'string'; // IE11 support, replace with Number.isNaN
@@ -15212,7 +15357,7 @@ const theme2 = createTheme({ palette: {
   };
   var zIndex$1 = zIndex;
 
-  const _excluded$25 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+  const _excluded$24 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 
   function createTheme(options = {}, ...args) {
     const {
@@ -15221,12 +15366,12 @@ const theme2 = createTheme({ palette: {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-          other = _objectWithoutPropertiesLoose(options, _excluded$25);
+          other = _objectWithoutPropertiesLoose(options, _excluded$24);
 
     const palette = createPalette(paletteInput);
     const systemTheme = createTheme$1(options);
     let muiTheme = deepmerge(systemTheme, {
-      mixins: createMixins(systemTheme.breakpoints, systemTheme.spacing, mixinsInput),
+      mixins: createMixins(systemTheme.breakpoints, mixinsInput),
       palette,
       // Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
       shadows: shadows$1.slice(),
@@ -15545,7 +15690,7 @@ You have to import it from @mui/styles.
 See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
 
-  const _excluded$24 = ["colorSchemes"],
+  const _excluded$23 = ["colorSchemes"],
         _excluded2$9 = ["palette"];
   function extendTheme(options = {}, ...args) {
     var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$da2;
@@ -15553,7 +15698,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
       colorSchemes: colorSchemesInput = {}
     } = options,
-          input = _objectWithoutPropertiesLoose(options, _excluded$24);
+          input = _objectWithoutPropertiesLoose(options, _excluded$23);
 
     const _createThemeWithoutVa = createTheme(_extends({}, input, colorSchemesInput.light && {
       palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
@@ -15671,9 +15816,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const svgIconClasses = generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
   var svgIconClasses$1 = svgIconClasses;
 
-  const _excluded$23 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+  const _excluded$22 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 
-  const useUtilityClasses$1M = ownerState => {
+  const useUtilityClasses$1L = ownerState => {
     const {
       color,
       fontSize,
@@ -15741,7 +15886,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       titleAccess,
       viewBox = '0 0 24 24'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$23);
+          other = _objectWithoutPropertiesLoose(props, _excluded$22);
 
     const ownerState = _extends({}, props, {
       color,
@@ -15758,7 +15903,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       more.viewBox = viewBox;
     }
 
-    const classes = useUtilityClasses$1M(ownerState);
+    const classes = useUtilityClasses$1L(ownerState);
     return /*#__PURE__*/jsxRuntime_2(SvgIconRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -16893,9 +17038,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const collapseClasses = generateUtilityClasses('MuiCollapse', ['root', 'horizontal', 'vertical', 'entered', 'hidden', 'wrapper', 'wrapperInner']);
   var collapseClasses$1 = collapseClasses;
 
-  const _excluded$22 = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
+  const _excluded$21 = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
 
-  const useUtilityClasses$1L = ownerState => {
+  const useUtilityClasses$1K = ownerState => {
     const {
       orientation,
       classes
@@ -16996,14 +17141,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition$1
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$22);
+          other = _objectWithoutPropertiesLoose(props, _excluded$21);
 
     const ownerState = _extends({}, props, {
       orientation,
       collapsedSize: collapsedSizeProp
     });
 
-    const classes = useUtilityClasses$1L(ownerState);
+    const classes = useUtilityClasses$1K(ownerState);
     const theme = useTheme();
     const timer = React__namespace.useRef();
     const wrapperRef = React__namespace.useRef(null);
@@ -17303,7 +17448,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const paperClasses = generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
   var paperClasses$1 = paperClasses;
 
-  const _excluded$21 = ["className", "component", "elevation", "square", "variant"];
+  const _excluded$20 = ["className", "component", "elevation", "square", "variant"];
 
   const getOverlayAlpha = elevation => {
     let alphaValue;
@@ -17317,7 +17462,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return (alphaValue / 100).toFixed(2);
   };
 
-  const useUtilityClasses$1K = ownerState => {
+  const useUtilityClasses$1J = ownerState => {
     const {
       square,
       elevation,
@@ -17368,7 +17513,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       square = false,
       variant = 'elevation'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$21);
+          other = _objectWithoutPropertiesLoose(props, _excluded$20);
 
     const ownerState = _extends({}, props, {
       component,
@@ -17377,7 +17522,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1K(ownerState);
+    const classes = useUtilityClasses$1J(ownerState);
 
     {
       // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -17482,9 +17627,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const accordionClasses = generateUtilityClasses('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
   var accordionClasses$1 = accordionClasses;
 
-  const _excluded$20 = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
+  const _excluded$1$ = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
 
-  const useUtilityClasses$1J = ownerState => {
+  const useUtilityClasses$1I = ownerState => {
     const {
       classes,
       square,
@@ -17598,7 +17743,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       TransitionComponent = Collapse$1,
       TransitionProps
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$20);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1$);
 
     const [expanded, setExpandedState] = useControlled({
       controlled: expandedProp,
@@ -17628,7 +17773,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       expanded
     });
 
-    const classes = useUtilityClasses$1J(ownerState);
+    const classes = useUtilityClasses$1I(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AccordionRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -17751,9 +17896,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const accordionActionsClasses = generateUtilityClasses('MuiAccordionActions', ['root', 'spacing']);
   var accordionActionsClasses$1 = accordionActionsClasses;
 
-  const _excluded$1$ = ["className", "disableSpacing"];
+  const _excluded$1_ = ["className", "disableSpacing"];
 
-  const useUtilityClasses$1I = ownerState => {
+  const useUtilityClasses$1H = ownerState => {
     const {
       classes,
       disableSpacing
@@ -17795,13 +17940,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       className,
       disableSpacing = false
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1$);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1_);
 
     const ownerState = _extends({}, props, {
       disableSpacing
     });
 
-    const classes = useUtilityClasses$1I(ownerState);
+    const classes = useUtilityClasses$1H(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionActionsRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -17850,9 +17995,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const accordionDetailsClasses = generateUtilityClasses('MuiAccordionDetails', ['root']);
   var accordionDetailsClasses$1 = accordionDetailsClasses;
 
-  const _excluded$1_ = ["className"];
+  const _excluded$1Z = ["className"];
 
-  const useUtilityClasses$1H = ownerState => {
+  const useUtilityClasses$1G = ownerState => {
     const {
       classes
     } = ownerState;
@@ -17880,10 +18025,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
       className
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1_);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1Z);
 
     const ownerState = props;
-    const classes = useUtilityClasses$1H(ownerState);
+    const classes = useUtilityClasses$1G(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionDetailsRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -18016,7 +18161,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
   var touchRippleClasses$1 = touchRippleClasses;
 
-  const _excluded$1Z = ["center", "classes", "className"];
+  const _excluded$1Y = ["center", "classes", "className"];
 
   let _$3 = t => t,
       _t$3,
@@ -18146,7 +18291,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       classes = {},
       className
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1Z);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1Y);
 
     const [ripples, setRipples] = React__namespace.useState([]);
     const nextKey = React__namespace.useRef(0);
@@ -18354,9 +18499,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
   var buttonBaseClasses$1 = buttonBaseClasses;
 
-  const _excluded$1Y = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
+  const _excluded$1X = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
 
-  const useUtilityClasses$1G = ownerState => {
+  const useUtilityClasses$1F = ownerState => {
     const {
       disabled,
       focusVisible,
@@ -18461,7 +18606,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       touchRippleRef,
       type
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1Y);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1X);
 
     const buttonRef = React__namespace.useRef(null);
     const rippleRef = React__namespace.useRef(null);
@@ -18658,7 +18803,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       focusVisible
     });
 
-    const classes = useUtilityClasses$1G(ownerState);
+    const classes = useUtilityClasses$1F(ownerState);
     return /*#__PURE__*/jsxRuntime_2(ButtonBaseRoot, _extends({
       as: ComponentProp,
       className: clsx(classes.root, className),
@@ -18892,9 +19037,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const accordionSummaryClasses = generateUtilityClasses('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
   var accordionSummaryClasses$1 = accordionSummaryClasses;
 
-  const _excluded$1X = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
+  const _excluded$1W = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
 
-  const useUtilityClasses$1F = ownerState => {
+  const useUtilityClasses$1E = ownerState => {
     const {
       classes,
       expanded,
@@ -18990,7 +19135,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       focusVisibleClassName,
       onClick
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1X);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1W);
 
     const {
       disabled = false,
@@ -19015,7 +19160,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableGutters
     });
 
-    const classes = useUtilityClasses$1F(ownerState);
+    const classes = useUtilityClasses$1E(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AccordionSummaryRoot, _extends({
       focusRipple: false,
       disableRipple: true,
@@ -19101,9 +19246,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
   var iconButtonClasses$1 = iconButtonClasses;
 
-  const _excluded$1W = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
+  const _excluded$1V = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
 
-  const useUtilityClasses$1E = ownerState => {
+  const useUtilityClasses$1D = ownerState => {
     const {
       classes,
       disabled,
@@ -19200,7 +19345,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableFocusRipple = false,
       size = 'medium'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1W);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1V);
 
     const ownerState = _extends({}, props, {
       edge,
@@ -19210,7 +19355,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size
     });
 
-    const classes = useUtilityClasses$1E(ownerState);
+    const classes = useUtilityClasses$1D(ownerState);
     return /*#__PURE__*/jsxRuntime_1(IconButtonRoot, _extends({
       className: clsx(classes.root, className),
       centerRipple: true,
@@ -19331,9 +19476,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   var _CloseIcon;
 
-  const _excluded$1V = ["action", "children", "className", "closeText", "color", "icon", "iconMapping", "onClose", "role", "severity", "variant"];
+  const _excluded$1U = ["action", "children", "className", "closeText", "color", "icon", "iconMapping", "onClose", "role", "severity", "variant"];
 
-  const useUtilityClasses$1D = ownerState => {
+  const useUtilityClasses$1C = ownerState => {
     const {
       variant,
       color,
@@ -19449,7 +19594,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       severity = 'success',
       variant = 'standard'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1V);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1U);
 
     const ownerState = _extends({}, props, {
       color,
@@ -19457,7 +19602,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1D(ownerState);
+    const classes = useUtilityClasses$1C(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AlertRoot, _extends({
       role: role,
       elevation: 0,
@@ -19597,9 +19742,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const typographyClasses = generateUtilityClasses('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
   var typographyClasses$1 = typographyClasses;
 
-  const _excluded$1U = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+  const _excluded$1T = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
 
-  const useUtilityClasses$1C = ownerState => {
+  const useUtilityClasses$1B = ownerState => {
     const {
       align,
       gutterBottom,
@@ -19685,7 +19830,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant = 'body1',
       variantMapping = defaultVariantMapping
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1U);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1T);
 
     const ownerState = _extends({}, props, {
       align,
@@ -19700,7 +19845,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
 
     const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-    const classes = useUtilityClasses$1C(ownerState);
+    const classes = useUtilityClasses$1B(ownerState);
     return /*#__PURE__*/jsxRuntime_1(TypographyRoot, _extends({
       as: Component,
       ref: ref,
@@ -19808,9 +19953,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const alertTitleClasses = generateUtilityClasses('MuiAlertTitle', ['root']);
   var alertTitleClasses$1 = alertTitleClasses;
 
-  const _excluded$1T = ["className"];
+  const _excluded$1S = ["className"];
 
-  const useUtilityClasses$1B = ownerState => {
+  const useUtilityClasses$1A = ownerState => {
     const {
       classes
     } = ownerState;
@@ -19841,10 +19986,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
       className
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1T);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1S);
 
     const ownerState = props;
-    const classes = useUtilityClasses$1B(ownerState);
+    const classes = useUtilityClasses$1A(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AlertTitleRoot, _extends({
       gutterBottom: true,
       component: "div",
@@ -19889,9 +20034,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const appBarClasses = generateUtilityClasses('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent']);
   var appBarClasses$1 = appBarClasses;
 
-  const _excluded$1S = ["className", "color", "enableColorOnDark", "position"];
+  const _excluded$1R = ["className", "color", "enableColorOnDark", "position"];
 
-  const useUtilityClasses$1A = ownerState => {
+  const useUtilityClasses$1z = ownerState => {
     const {
       color,
       position,
@@ -19981,7 +20126,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       enableColorOnDark = false,
       position = 'fixed'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1S);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1R);
 
     const ownerState = _extends({}, props, {
       color,
@@ -19989,7 +20134,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       enableColorOnDark
     });
 
-    const classes = useUtilityClasses$1A(ownerState);
+    const classes = useUtilityClasses$1z(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AppBarRoot, _extends({
       square: true,
       component: "header",
@@ -20200,9 +20345,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const listSubheaderClasses = generateUtilityClasses('MuiListSubheader', ['root', 'colorPrimary', 'colorInherit', 'gutters', 'inset', 'sticky']);
   var listSubheaderClasses$1 = listSubheaderClasses;
 
-  const _excluded$1R = ["className", "color", "component", "disableGutters", "disableSticky", "inset"];
+  const _excluded$1Q = ["className", "color", "component", "disableGutters", "disableSticky", "inset"];
 
-  const useUtilityClasses$1z = ownerState => {
+  const useUtilityClasses$1y = ownerState => {
     const {
       classes,
       color,
@@ -20265,7 +20410,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableSticky = false,
       inset = false
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1R);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1Q);
 
     const ownerState = _extends({}, props, {
       color,
@@ -20275,7 +20420,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       inset
     });
 
-    const classes = useUtilityClasses$1z(ownerState);
+    const classes = useUtilityClasses$1y(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListSubheaderRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -20353,9 +20498,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const chipClasses = generateUtilityClasses('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorPrimary', 'colorSecondary', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'focusVisible']);
   var chipClasses$1 = chipClasses;
 
-  const _excluded$1Q = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant"];
+  const _excluded$1P = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant"];
 
-  const useUtilityClasses$1y = ownerState => {
+  const useUtilityClasses$1x = ownerState => {
     const {
       classes,
       disabled,
@@ -20633,7 +20778,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size = 'medium',
       variant = 'filled'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1Q);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1P);
 
     const chipRef = React__namespace.useRef(null);
     const handleRef = useForkRef(chipRef, ref);
@@ -20689,7 +20834,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1y(ownerState);
+    const classes = useUtilityClasses$1x(ownerState);
     const moreProps = component === ButtonBase$1 ? _extends({
       component: ComponentProp || 'div',
       focusVisibleClassName: classes.focusVisible
@@ -20959,7 +21104,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
   var inputBaseClasses$1 = inputBaseClasses;
 
-  const _excluded$1P = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "startAdornment", "type", "value"];
+  const _excluded$1O = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "startAdornment", "type", "value"];
   const rootOverridesResolver = (props, styles) => {
     const {
       ownerState
@@ -20973,7 +21118,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return [styles.input, ownerState.size === 'small' && styles.inputSizeSmall, ownerState.multiline && styles.inputMultiline, ownerState.type === 'search' && styles.inputTypeSearch, ownerState.startAdornment && styles.inputAdornedStart, ownerState.endAdornment && styles.inputAdornedEnd, ownerState.hiddenLabel && styles.inputHiddenLabel];
   };
 
-  const useUtilityClasses$1x = ownerState => {
+  const useUtilityClasses$1w = ownerState => {
     const {
       classes,
       color,
@@ -21193,7 +21338,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       type = 'text',
       value: valueProp
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1P);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1O);
 
     const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
     const {
@@ -21393,7 +21538,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       type
     });
 
-    const classes = useUtilityClasses$1x(ownerState);
+    const classes = useUtilityClasses$1w(ownerState);
     const Root = components.Root || InputBaseRoot;
     const rootProps = componentsProps.root || {};
     const Input = components.Input || InputBaseComponent;
@@ -21721,9 +21866,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   var _ClearIcon, _ArrowDropDownIcon;
 
-  const _excluded$1O = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "value"];
+  const _excluded$1N = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "value"];
 
-  const useUtilityClasses$1w = ownerState => {
+  const useUtilityClasses$1v = ownerState => {
     const {
       classes,
       disablePortal,
@@ -22106,7 +22251,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       selectOnFocus = !props.freeSolo,
       size = 'medium'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1O);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1N);
     /* eslint-enable @typescript-eslint/no-unused-vars */
 
 
@@ -22133,7 +22278,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       componentName: 'Autocomplete'
     }));
     const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
-    const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
+    const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false; // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
 
     const ownerState = _extends({}, props, {
       disablePortal,
@@ -22146,7 +22291,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size
     });
 
-    const classes = useUtilityClasses$1w(ownerState);
+    const classes = useUtilityClasses$1v(ownerState);
     let startAdornment;
 
     if (multiple && value.length > 0) {
@@ -22156,7 +22301,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }, getTagProps(params));
 
       if (renderTags) {
-        startAdornment = renderTags(value, getCustomizedTagProps);
+        startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
       } else {
         startAdornment = value.map((option, index) => /*#__PURE__*/jsxRuntime_1(Chip$1, _extends({
           label: getOptionLabel(option),
@@ -22733,6 +22878,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      *
      * @param {T[]} value The `value` provided to the component.
      * @param {function} getTagProps A tag props getter.
+     * @param {object} ownerState The state of the Autocomplete component.
      * @returns {ReactNode}
      */
     renderTags: PropTypes.func,
@@ -22783,9 +22929,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const avatarClasses = generateUtilityClasses('MuiAvatar', ['root', 'colorDefault', 'circular', 'rounded', 'square', 'img', 'fallback']);
   var avatarClasses$1 = avatarClasses;
 
-  const _excluded$1N = ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"];
+  const _excluded$1M = ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"];
 
-  const useUtilityClasses$1v = ownerState => {
+  const useUtilityClasses$1u = ownerState => {
     const {
       classes,
       variant,
@@ -22921,7 +23067,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       srcSet,
       variant = 'circular'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1N);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1M);
 
     let children = null; // Use a hook instead of onError on the img element to support server-side rendering.
 
@@ -22938,7 +23084,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1v(ownerState);
+    const classes = useUtilityClasses$1u(ownerState);
 
     if (hasImgNotFailing) {
       children = /*#__PURE__*/jsxRuntime_1(AvatarImg, _extends({
@@ -23047,13 +23193,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const avatarGroupClasses = generateUtilityClasses('MuiAvatarGroup', ['root', 'avatar']);
   var avatarGroupClasses$1 = avatarGroupClasses;
 
-  const _excluded$1M = ["children", "className", "componentsProps", "max", "spacing", "total", "variant"];
+  const _excluded$1L = ["children", "className", "componentsProps", "max", "spacing", "total", "variant"];
   const SPACINGS$1 = {
     small: -16,
     medium: null
   };
 
-  const useUtilityClasses$1u = ownerState => {
+  const useUtilityClasses$1t = ownerState => {
     const {
       classes
     } = ownerState;
@@ -23115,7 +23261,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       total,
       variant = 'circular'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1M);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1L);
 
     let clampedMax = max < 2 ? 2 : max;
 
@@ -23125,7 +23271,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1u(ownerState);
+    const classes = useUtilityClasses$1t(ownerState);
     const children = React__namespace.Children.toArray(childrenProp).filter(child => {
       {
         if (reactIs_2(child)) {
@@ -23242,7 +23388,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var AvatarGroup$1 = AvatarGroup;
 
-  const _excluded$1L = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+  const _excluded$1K = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
   const styles$4 = {
     entering: {
       opacity: 1
@@ -23280,7 +23426,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition$1
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1L);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1K);
     const nodeRef = React__namespace.useRef(null);
     const foreignRef = useForkRef(children.ref, ref);
     const handleRef = useForkRef(nodeRef, foreignRef);
@@ -23463,9 +23609,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const backdropClasses = generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
   var backdropClasses$1 = backdropClasses;
 
-  const _excluded$1K = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
+  const _excluded$1J = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
 
-  const useUtilityClasses$1t = ownerState => {
+  const useUtilityClasses$1s = ownerState => {
     const {
       classes,
       invisible
@@ -23521,14 +23667,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Fade$1
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1K);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1J);
 
     const ownerState = _extends({}, props, {
       component,
       invisible
     });
 
-    const classes = useUtilityClasses$1t(ownerState);
+    const classes = useUtilityClasses$1s(ownerState);
     return /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
       in: open,
       timeout: transitionDuration
@@ -23632,11 +23778,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']);
   var badgeClasses$1 = badgeClasses;
 
-  const _excluded$1J = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "showZero", "variant"];
+  const _excluded$1I = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "showZero", "variant"];
   const RADIUS_STANDARD = 10;
   const RADIUS_DOT = 4;
 
-  const useUtilityClasses$1s = ownerState => {
+  const useUtilityClasses$1r = ownerState => {
     const {
       color,
       anchorOrigin,
@@ -23801,7 +23947,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       showZero = false,
       variant: variantProp = 'standard'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1J);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1I);
 
     const prevProps = usePreviousProps$1({
       anchorOrigin: anchorOriginProp,
@@ -23830,7 +23976,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1s(ownerState);
+    const classes = useUtilityClasses$1r(ownerState);
     let displayValue;
 
     if (variant !== 'dot') {
@@ -23992,9 +24138,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const bottomNavigationClasses = generateUtilityClasses('MuiBottomNavigation', ['root']);
   var bottomNavigationClasses$1 = bottomNavigationClasses;
 
-  const _excluded$1I = ["children", "className", "component", "onChange", "showLabels", "value"];
+  const _excluded$1H = ["children", "className", "component", "onChange", "showLabels", "value"];
 
-  const useUtilityClasses$1r = ownerState => {
+  const useUtilityClasses$1q = ownerState => {
     const {
       classes
     } = ownerState;
@@ -24030,14 +24176,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       showLabels = false,
       value
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1I);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1H);
 
     const ownerState = _extends({}, props, {
       component,
       showLabels
     });
 
-    const classes = useUtilityClasses$1r(ownerState);
+    const classes = useUtilityClasses$1q(ownerState);
     return /*#__PURE__*/jsxRuntime_1(BottomNavigationRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -24127,9 +24273,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const bottomNavigationActionClasses = generateUtilityClasses('MuiBottomNavigationAction', ['root', 'iconOnly', 'selected', 'label']);
   var bottomNavigationActionClasses$1 = bottomNavigationActionClasses;
 
-  const _excluded$1H = ["className", "icon", "label", "onChange", "onClick", "selected", "showLabel", "value"];
+  const _excluded$1G = ["className", "icon", "label", "onChange", "onClick", "selected", "showLabel", "value"];
 
-  const useUtilityClasses$1q = ownerState => {
+  const useUtilityClasses$1p = ownerState => {
     const {
       classes,
       showLabel,
@@ -24208,10 +24354,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       onClick,
       value
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1H);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1G);
 
     const ownerState = props;
-    const classes = useUtilityClasses$1q(ownerState);
+    const classes = useUtilityClasses$1p(ownerState);
 
     const handleChange = event => {
       if (onChange) {
@@ -24400,9 +24546,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const breadcrumbsClasses = generateUtilityClasses('MuiBreadcrumbs', ['root', 'ol', 'li', 'separator']);
   var breadcrumbsClasses$1 = breadcrumbsClasses;
 
-  const _excluded$1G = ["children", "className", "component", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
+  const _excluded$1F = ["children", "className", "component", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
 
-  const useUtilityClasses$1p = ownerState => {
+  const useUtilityClasses$1o = ownerState => {
     const {
       classes
     } = ownerState;
@@ -24480,7 +24626,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       maxItems = 8,
       separator = '/'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1G);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1F);
 
     const [expanded, setExpanded] = React__namespace.useState(false);
 
@@ -24494,7 +24640,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       separator
     });
 
-    const classes = useUtilityClasses$1p(ownerState);
+    const classes = useUtilityClasses$1o(ownerState);
     const listRef = React__namespace.useRef(null);
 
     const renderItemsBeforeAndAfter = allItems => {
@@ -24641,9 +24787,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   var ButtonGroupContext$1 = ButtonGroupContext;
 
-  const _excluded$1F = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
+  const _excluded$1E = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 
-  const useUtilityClasses$1o = ownerState => {
+  const useUtilityClasses$1n = ownerState => {
     const {
       color,
       disableElevation,
@@ -24871,7 +25017,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       type,
       variant = 'text'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1F);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1E);
 
     const ownerState = _extends({}, props, {
       color,
@@ -24885,7 +25031,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1o(ownerState);
+    const classes = useUtilityClasses$1n(ownerState);
 
     const startIcon = startIconProp && /*#__PURE__*/jsxRuntime_1(ButtonStartIcon, {
       className: classes.startIcon,
@@ -25041,7 +25187,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'fullWidth', 'vertical', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary']);
   var buttonGroupClasses$1 = buttonGroupClasses;
 
-  const _excluded$1E = ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "fullWidth", "orientation", "size", "variant"];
+  const _excluded$1D = ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "fullWidth", "orientation", "size", "variant"];
 
   const overridesResolver$6 = (props, styles) => {
     const {
@@ -25060,7 +25206,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }, styles.root, styles[ownerState.variant], ownerState.disableElevation === true && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.orientation === 'vertical' && styles.vertical];
   };
 
-  const useUtilityClasses$1n = ownerState => {
+  const useUtilityClasses$1m = ownerState => {
     const {
       classes,
       color,
@@ -25171,7 +25317,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size = 'medium',
       variant = 'outlined'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1E);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1D);
 
     const ownerState = _extends({}, props, {
       color,
@@ -25186,7 +25332,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1n(ownerState);
+    const classes = useUtilityClasses$1m(ownerState);
     const context = React__namespace.useMemo(() => ({
       className: classes.grouped,
       color,
@@ -25316,9 +25462,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const cardClasses = generateUtilityClasses('MuiCard', ['root']);
   var cardClasses$1 = cardClasses;
 
-  const _excluded$1D = ["className", "raised"];
+  const _excluded$1C = ["className", "raised"];
 
-  const useUtilityClasses$1m = ownerState => {
+  const useUtilityClasses$1l = ownerState => {
     const {
       classes
     } = ownerState;
@@ -25347,13 +25493,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       className,
       raised = false
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1D);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1C);
 
     const ownerState = _extends({}, props, {
       raised
     });
 
-    const classes = useUtilityClasses$1m(ownerState);
+    const classes = useUtilityClasses$1l(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardRoot, _extends({
       className: clsx(classes.root, className),
       elevation: raised ? 8 : undefined,
@@ -25409,9 +25555,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const cardActionAreaClasses = generateUtilityClasses('MuiCardActionArea', ['root', 'focusVisible', 'focusHighlight']);
   var cardActionAreaClasses$1 = cardActionAreaClasses;
 
-  const _excluded$1C = ["children", "className", "focusVisibleClassName"];
+  const _excluded$1B = ["children", "className", "focusVisibleClassName"];
 
-  const useUtilityClasses$1l = ownerState => {
+  const useUtilityClasses$1k = ownerState => {
     const {
       classes
     } = ownerState;
@@ -25474,10 +25620,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       className,
       focusVisibleClassName
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1C);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1B);
 
     const ownerState = props;
-    const classes = useUtilityClasses$1l(ownerState);
+    const classes = useUtilityClasses$1k(ownerState);
     return /*#__PURE__*/jsxRuntime_2(CardActionAreaRoot, _extends({
       className: clsx(classes.root, className),
       focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible),
@@ -25531,9 +25677,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const cardActionsClasses = generateUtilityClasses('MuiCardActions', ['root', 'spacing']);
   var cardActionsClasses$1 = cardActionsClasses;
 
-  const _excluded$1B = ["disableSpacing", "className"];
+  const _excluded$1A = ["disableSpacing", "className"];
 
-  const useUtilityClasses$1k = ownerState => {
+  const useUtilityClasses$1j = ownerState => {
     const {
       classes,
       disableSpacing
@@ -25574,13 +25720,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableSpacing = false,
       className
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1B);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1A);
 
     const ownerState = _extends({}, props, {
       disableSpacing
     });
 
-    const classes = useUtilityClasses$1k(ownerState);
+    const classes = useUtilityClasses$1j(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardActionsRoot, _extends({
       className: clsx(classes.root, className),
       ownerState: ownerState,
@@ -25629,9 +25775,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const cardContentClasses = generateUtilityClasses('MuiCardContent', ['root']);
   var cardContentClasses$1 = cardContentClasses;
 
-  const _excluded$1A = ["className", "component"];
+  const _excluded$1z = ["className", "component"];
 
-  const useUtilityClasses$1j = ownerState => {
+  const useUtilityClasses$1i = ownerState => {
     const {
       classes
     } = ownerState;
@@ -25663,13 +25809,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       className,
       component = 'div'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1A);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1z);
 
     const ownerState = _extends({}, props, {
       component
     });
 
-    const classes = useUtilityClasses$1j(ownerState);
+    const classes = useUtilityClasses$1i(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardContentRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -25719,9 +25865,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const cardHeaderClasses = generateUtilityClasses('MuiCardHeader', ['root', 'avatar', 'action', 'content', 'title', 'subheader']);
   var cardHeaderClasses$1 = cardHeaderClasses;
 
-  const _excluded$1z = ["action", "avatar", "className", "component", "disableTypography", "subheader", "subheaderTypographyProps", "title", "titleTypographyProps"];
+  const _excluded$1y = ["action", "avatar", "className", "component", "disableTypography", "subheader", "subheaderTypographyProps", "title", "titleTypographyProps"];
 
-  const useUtilityClasses$1i = ownerState => {
+  const useUtilityClasses$1h = ownerState => {
     const {
       classes
     } = ownerState;
@@ -25792,14 +25938,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       title: titleProp,
       titleTypographyProps
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1z);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1y);
 
     const ownerState = _extends({}, props, {
       component,
       disableTypography
     });
 
-    const classes = useUtilityClasses$1i(ownerState);
+    const classes = useUtilityClasses$1h(ownerState);
     let title = titleProp;
 
     if (title != null && title.type !== Typography$1 && !disableTypography) {
@@ -25933,9 +26079,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const cardMediaClasses = generateUtilityClasses('MuiCardMedia', ['root', 'media', 'img']);
   var cardMediaClasses$1 = cardMediaClasses;
 
-  const _excluded$1y = ["children", "className", "component", "image", "src", "style"];
+  const _excluded$1x = ["children", "className", "component", "image", "src", "style"];
 
-  const useUtilityClasses$1h = ownerState => {
+  const useUtilityClasses$1g = ownerState => {
     const {
       classes,
       isMediaComponent,
@@ -25989,7 +26135,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       src,
       style
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1y);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1x);
 
     const isMediaComponent = MEDIA_COMPONENTS.indexOf(component) !== -1;
     const composedStyle = !isMediaComponent && image ? _extends({
@@ -26002,7 +26148,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       isImageComponent: IMAGE_COMPONENTS.indexOf(component) !== -1
     });
 
-    const classes = useUtilityClasses$1h(ownerState);
+    const classes = useUtilityClasses$1g(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardMediaRoot, _extends({
       className: clsx(classes.root, className),
       as: component,
@@ -26081,9 +26227,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
   generateUtilityClasses('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
 
-  const _excluded$1x = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
+  const _excluded$1w = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
 
-  const useUtilityClasses$1g = ownerState => {
+  const useUtilityClasses$1f = ownerState => {
     const {
       classes,
       checked,
@@ -26147,7 +26293,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       type,
       value
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1x);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1w);
 
     const [checked, setCheckedState] = useControlled({
       controlled: checkedProp,
@@ -26209,7 +26355,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       edge
     });
 
-    const classes = useUtilityClasses$1g(ownerState);
+    const classes = useUtilityClasses$1f(ownerState);
     return /*#__PURE__*/jsxRuntime_2(SwitchBaseRoot, _extends({
       component: "span",
       className: clsx(classes.root, className),
@@ -26391,9 +26537,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const checkboxClasses = generateUtilityClasses('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary']);
   var checkboxClasses$1 = checkboxClasses;
 
-  const _excluded$1w = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size"];
+  const _excluded$1v = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size"];
 
-  const useUtilityClasses$1f = ownerState => {
+  const useUtilityClasses$1e = ownerState => {
     const {
       classes,
       indeterminate,
@@ -26461,7 +26607,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       inputProps,
       size = 'medium'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1w);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1v);
 
     const icon = indeterminate ? indeterminateIconProp : iconProp;
     const indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
@@ -26472,7 +26618,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size
     });
 
-    const classes = useUtilityClasses$1f(ownerState);
+    const classes = useUtilityClasses$1e(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CheckboxRoot, _extends({
       type: "checkbox",
       inputProps: _extends({
@@ -26616,7 +26762,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const circularProgressClasses = generateUtilityClasses('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
   var circularProgressClasses$1 = circularProgressClasses;
 
-  const _excluded$1v = ["className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"];
+  const _excluded$1u = ["className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"];
 
   let _$2 = t => t,
       _t$2,
@@ -26650,7 +26796,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
 `));
 
-  const useUtilityClasses$1e = ownerState => {
+  const useUtilityClasses$1d = ownerState => {
     const {
       classes,
       variant,
@@ -26746,7 +26892,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       value = 0,
       variant = 'indeterminate'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1v);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1u);
 
     const ownerState = _extends({}, props, {
       color,
@@ -26757,7 +26903,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1e(ownerState);
+    const classes = useUtilityClasses$1d(ownerState);
     const circleStyle = {};
     const rootStyle = {};
     const rootProps = {};
@@ -26878,106 +27024,21 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var CircularProgress$1 = CircularProgress;
 
-  function getContainerUtilityClass(slot) {
-    return generateUtilityClass('MuiContainer', slot);
-  }
-  const containerClasses = generateUtilityClasses('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
-  var containerClasses$1 = containerClasses;
-
-  const _excluded$1u = ["className", "component", "disableGutters", "fixed", "maxWidth"];
-
-  const useUtilityClasses$1d = ownerState => {
-    const {
-      classes,
-      fixed,
-      disableGutters,
-      maxWidth
-    } = ownerState;
-    const slots = {
-      root: ['root', maxWidth && `maxWidth${capitalize(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters']
-    };
-    return composeClasses(slots, getContainerUtilityClass, classes);
-  };
-
-  const ContainerRoot = styled$1('div', {
-    name: 'MuiContainer',
-    slot: 'Root',
-    overridesResolver: (props, styles) => {
-      const {
-        ownerState
-      } = props;
-      return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
-    }
-  })(({
-    theme,
-    ownerState
-  }) => _extends({
-    width: '100%',
-    marginLeft: 'auto',
-    boxSizing: 'border-box',
-    marginRight: 'auto',
-    display: 'block'
-  }, !ownerState.disableGutters && {
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    [theme.breakpoints.up('sm')]: {
-      paddingLeft: theme.spacing(3),
-      paddingRight: theme.spacing(3)
-    }
-  }), ({
-    theme,
-    ownerState
-  }) => ownerState.fixed && Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
-    const value = theme.breakpoints.values[breakpoint];
-
-    if (value !== 0) {
-      acc[theme.breakpoints.up(breakpoint)] = {
-        maxWidth: `${value}${theme.breakpoints.unit}`
-      };
-    }
-
-    return acc;
-  }, {}), ({
-    theme,
-    ownerState
-  }) => _extends({}, ownerState.maxWidth === 'xs' && {
-    [theme.breakpoints.up('xs')]: {
-      maxWidth: Math.max(theme.breakpoints.values.xs, 444)
-    }
-  }, ownerState.maxWidth && ownerState.maxWidth !== 'xs' && {
-    [theme.breakpoints.up(ownerState.maxWidth)]: {
-      maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
-    }
-  }));
-  const Container = /*#__PURE__*/React__namespace.forwardRef(function Container(inProps, ref) {
-    const props = useThemeProps({
+  const Container = createContainer({
+    createStyledComponent: styled$1('div', {
+      name: 'MuiContainer',
+      slot: 'Root',
+      overridesResolver: (props, styles) => {
+        const {
+          ownerState
+        } = props;
+        return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
+      }
+    }),
+    useThemeProps: inProps => useThemeProps({
       props: inProps,
       name: 'MuiContainer'
-    });
-
-    const {
-      className,
-      component = 'div',
-      disableGutters = false,
-      fixed = false,
-      maxWidth = 'lg'
-    } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1u);
-
-    const ownerState = _extends({}, props, {
-      component,
-      disableGutters,
-      fixed,
-      maxWidth
-    });
-
-    const classes = useUtilityClasses$1d(ownerState);
-    return /*#__PURE__*/jsxRuntime_1(ContainerRoot, _extends({
-      as: component,
-      ownerState: ownerState,
-      className: clsx(classes.root, className),
-      ref: ref
-    }, other));
+    })
   });
   Container.propTypes
   /* remove-proptypes */
@@ -26997,11 +27058,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     classes: PropTypes.object,
 
-    /**
-     * @ignore
-     */
-    className: PropTypes.string,
-
     /**
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
@@ -27040,6 +27096,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var Container$1 = Container;
 
+  function getContainerUtilityClass(slot) {
+    return generateUtilityClass('MuiContainer', slot);
+  }
+  const containerClasses = generateUtilityClasses('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
+  var containerClasses$1 = containerClasses;
+
   const html = (theme, enableColorScheme) => _extends({
     WebkitFontSmoothing: 'antialiased',
     // Antialiasing.