@mui/material 5.11.9 → 5.11.10

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.9
+ * @mui/material v5.11.10
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -6848,7 +6848,7 @@
   styleFunctionSx.filterProps = ['sx'];
   var styleFunctionSx$1 = styleFunctionSx;
 
-  const _excluded$2n = ["sx"];
+  const _excluded$2m = ["sx"];
   const splitProps = props => {
     var _props$theme$unstable, _props$theme;
     const result = {
@@ -6869,7 +6869,7 @@
     const {
         sx: inSx
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$2n);
+      other = _objectWithoutPropertiesLoose(props, _excluded$2m);
     const {
       systemProps,
       otherProps
@@ -6895,7 +6895,7 @@
 
   function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-  const _excluded$2m = ["values", "unit", "step"];
+  const _excluded$2l = ["values", "unit", "step"];
   const sortBreakpointsValues = values => {
     const breakpointsAsArray = Object.keys(values).map(key => ({
       key,
@@ -6930,7 +6930,7 @@
         unit = 'px',
         step = 5
       } = breakpoints,
-      other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2m);
+      other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2l);
     const sortedValues = sortBreakpointsValues(values);
     const keys = Object.keys(sortedValues);
     function up(key) {
@@ -7009,7 +7009,7 @@
     return spacing;
   }
 
-  const _excluded$2l = ["breakpoints", "palette", "spacing", "shape"];
+  const _excluded$2k = ["breakpoints", "palette", "spacing", "shape"];
   function createTheme$1(options = {}, ...args) {
     const {
         breakpoints: breakpointsInput = {},
@@ -7017,7 +7017,7 @@
         spacing: spacingInput,
         shape: shapeInput = {}
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$2l);
+      other = _objectWithoutPropertiesLoose(options, _excluded$2k);
     const breakpoints = createBreakpoints(breakpointsInput);
     const spacing = createSpacing(spacingInput);
     let muiTheme = deepmerge({
@@ -7128,7 +7128,7 @@
     return useTheme$2(defaultTheme);
   }
 
-  const _excluded$2k = ["className", "component"];
+  const _excluded$2j = ["className", "component"];
   function createBox(options = {}) {
     const {
       defaultTheme,
@@ -7145,7 +7145,7 @@
           className,
           component = 'div'
         } = _extendSxProp,
-        other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2k);
+        other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2j);
       return /*#__PURE__*/jsxRuntime_1(BoxRoot, _extends({
         as: component,
         ref: ref,
@@ -7156,7 +7156,7 @@
     return Box;
   }
 
-  const _excluded$2j = ["variant"];
+  const _excluded$2i = ["variant"];
   function isEmpty$3(string) {
     return string.length === 0;
   }
@@ -7170,7 +7170,7 @@
     const {
         variant
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$2j);
+      other = _objectWithoutPropertiesLoose(props, _excluded$2i);
     let classKey = variant || '';
     Object.keys(other).sort().forEach(key => {
       if (key === 'color') {
@@ -7182,7 +7182,7 @@
     return classKey;
   }
 
-  const _excluded$2i = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+  const _excluded$2h = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
     _excluded2$c = ["theme"],
     _excluded3$1 = ["theme"];
   function isEmpty$2(obj) {
@@ -7269,7 +7269,7 @@
           skipSx: inputSkipSx,
           overridesResolver
         } = inputOptions,
-        options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2i);
+        options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2h);
 
       // 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;
@@ -8166,7 +8166,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  const _excluded$2h = ["colorSchemes", "components", "cssVarPrefix"];
+  const _excluded$2g = ["colorSchemes", "components", "cssVarPrefix"];
   const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
   function createCssVarsProvider(options) {
     const {
@@ -8218,7 +8218,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           components = {},
           cssVarPrefix
         } = themeProp,
-        restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$2h);
+        restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$2g);
       const allColorSchemes = Object.keys(colorSchemes);
       const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
       const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -8516,7 +8516,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return getCssVar;
   }
 
-  const _excluded$2g = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
+  const _excluded$2f = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
   const defaultTheme$5 = createTheme$1();
   const defaultCreateStyledComponent$1 = systemStyled('div', {
     name: 'MuiContainer',
@@ -8533,7 +8533,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     name: 'MuiContainer',
     defaultTheme: defaultTheme$5
   });
-  const useUtilityClasses$1Q = (ownerState, componentName) => {
+  const useUtilityClasses$1P = (ownerState, componentName) => {
     const getContainerUtilityClass = slot => {
       return generateUtilityClass(componentName, slot);
     };
@@ -8612,7 +8612,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           fixed = false,
           maxWidth = 'lg'
         } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$2g);
+        other = _objectWithoutPropertiesLoose(props, _excluded$2f);
       const ownerState = _extends({}, props, {
         component,
         disableGutters,
@@ -8621,7 +8621,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       });
 
       // @ts-ignore module augmentation fails if custom breakpoints are used
-      const classes = useUtilityClasses$1Q(ownerState, componentName);
+      const classes = useUtilityClasses$1P(ownerState, componentName);
       return (
         /*#__PURE__*/
         // @ts-ignore theme is injected by the styled util
@@ -8899,7 +8899,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return [`direction-xs-${String(direction)}`];
   };
 
-  const _excluded$2f = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"];
+  const _excluded$2e = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"];
   const defaultTheme$4 = createTheme$1();
 
   // widening Theme to any so that the consumer can own the theme structure.
@@ -8957,7 +8957,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           columnSpacing: columnSpacingProp = spacingProp,
           disableEqualOverflow: themeDisableEqualOverflow
         } = props,
-        rest = _objectWithoutPropertiesLoose(props, _excluded$2f);
+        rest = _objectWithoutPropertiesLoose(props, _excluded$2e);
       // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
       let disableEqualOverflow = themeDisableEqualOverflow;
       if (level && themeDisableEqualOverflow !== undefined) {
@@ -9047,7 +9047,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return Grid;
   }
 
-  const _excluded$2e = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+  const _excluded$2d = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
     _excluded2$b = ["type", "mode"];
   function adaptV4Theme(inputTheme) {
     {
@@ -9061,7 +9061,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: {}
     });
@@ -9142,7 +9142,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }, mixins);
   }
 
-  const _excluded$2d = ["mode", "contrastThreshold", "tonalOffset"];
+  const _excluded$2c = ["mode", "contrastThreshold", "tonalOffset"];
   const light = {
     // The colors used to style the text.
     text: {
@@ -9311,7 +9311,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         contrastThreshold = 3,
         tonalOffset = 0.2
       } = palette,
-      other = _objectWithoutPropertiesLoose(palette, _excluded$2d);
+      other = _objectWithoutPropertiesLoose(palette, _excluded$2c);
     const primary = palette.primary || getDefaultPrimary(mode);
     const secondary = palette.secondary || getDefaultSecondary(mode);
     const error = palette.error || getDefaultError(mode);
@@ -9435,7 +9435,7 @@ const theme2 = createTheme({ palette: {
     return paletteOutput;
   }
 
-  const _excluded$2c = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+  const _excluded$2b = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
   function round$2(value) {
     return Math.round(value * 1e5) / 1e5;
   }
@@ -9466,7 +9466,7 @@ const theme2 = createTheme({ palette: {
         allVariants,
         pxToRem: pxToRem2
       } = _ref,
-      other = _objectWithoutPropertiesLoose(_ref, _excluded$2c);
+      other = _objectWithoutPropertiesLoose(_ref, _excluded$2b);
     {
       if (typeof fontSize !== 'number') {
         console.error('MUI: `fontSize` is required to be a number.');
@@ -9526,7 +9526,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$2b = ["duration", "easing", "delay"];
+  const _excluded$2a = ["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 = {
@@ -9577,7 +9577,7 @@ const theme2 = createTheme({ palette: {
           easing: easingOption = mergedEasing.easeInOut,
           delay = 0
         } = options,
-        other = _objectWithoutPropertiesLoose(options, _excluded$2b);
+        other = _objectWithoutPropertiesLoose(options, _excluded$2a);
       {
         const isString = value => typeof value === 'string';
         // IE11 support, replace with Number.isNaN
@@ -9624,7 +9624,7 @@ const theme2 = createTheme({ palette: {
   };
   var zIndex$1 = zIndex;
 
-  const _excluded$2a = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+  const _excluded$29 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
   function createTheme(options = {}, ...args) {
     const {
         mixins: mixinsInput = {},
@@ -9632,7 +9632,7 @@ const theme2 = createTheme({ palette: {
         transitions: transitionsInput = {},
         typography: typographyInput = {}
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$2a);
+      other = _objectWithoutPropertiesLoose(options, _excluded$29);
     if (options.vars) {
       throw new Error(`MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` );
@@ -9960,7 +9960,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   };
   var getOverlayAlpha$1 = getOverlayAlpha;
 
-  const _excluded$29 = ["colorSchemes", "cssVarPrefix"],
+  const _excluded$28 = ["colorSchemes", "cssVarPrefix"],
     _excluded2$a = ["palette"];
   const defaultDarkOverlays = [...Array(25)].map((_, index) => {
     if (index === 0) {
@@ -10003,7 +10003,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         colorSchemes: colorSchemesInput = {},
         cssVarPrefix = 'mui'
       } = options,
-      input = _objectWithoutPropertiesLoose(options, _excluded$29);
+      input = _objectWithoutPropertiesLoose(options, _excluded$28);
     const getCssVar = createGetCssVar(cssVarPrefix);
     const _createThemeWithoutVa = createTheme(_extends({}, input, colorSchemesInput.light && {
         palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
@@ -10421,7 +10421,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
   }
 
-  const _excluded$28 = ["elementType", "externalSlotProps", "ownerState"];
+  const _excluded$27 = ["elementType", "externalSlotProps", "ownerState"];
   /**
    * @ignore - do not document.
    * Builds the props to be passed into the slot of an unstyled component.
@@ -10437,7 +10437,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         externalSlotProps,
         ownerState
       } = parameters,
-      rest = _objectWithoutPropertiesLoose(parameters, _excluded$28);
+      rest = _objectWithoutPropertiesLoose(parameters, _excluded$27);
     const resolvedComponentsProps = resolveComponentProps(externalSlotProps, ownerState);
     const {
       props: mergedProps,
@@ -11444,134 +11444,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
   }
 
-  function getBadgeUnstyledUtilityClass(slot) {
-    return generateUtilityClass('MuiBadge', slot);
-  }
-  generateUtilityClasses('MuiBadge', ['root', 'badge', 'invisible']);
-
-  const _excluded$27 = ["badgeContent", "component", "children", "invisible", "max", "slotProps", "slots", "showZero"];
-  const useUtilityClasses$1P = ownerState => {
-    const {
-      invisible
-    } = ownerState;
-    const slots = {
-      root: ['root'],
-      badge: ['badge', invisible && 'invisible']
-    };
-    return composeClasses(slots, getBadgeUnstyledUtilityClass, undefined);
-  };
-  /**
-   *
-   * Demos:
-   *
-   * - [Unstyled badge](https://mui.com/base/react-badge/)
-   *
-   * API:
-   *
-   * - [BadgeUnstyled API](https://mui.com/base/api/badge-unstyled/)
-   */
-  const BadgeUnstyled = /*#__PURE__*/React__namespace.forwardRef(function BadgeUnstyled(props, ref) {
-    const {
-        component,
-        children,
-        max: maxProp = 99,
-        slotProps = {},
-        slots = {},
-        showZero = false
-      } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$27);
-    const {
-      badgeContent,
-      max,
-      displayValue,
-      invisible
-    } = useBadge(_extends({}, props, {
-      max: maxProp
-    }));
-    const ownerState = _extends({}, props, {
-      badgeContent,
-      invisible,
-      max,
-      showZero
-    });
-    const classes = useUtilityClasses$1P(ownerState);
-    const Root = component || slots.root || 'span';
-    const rootProps = useSlotProps({
-      elementType: Root,
-      externalSlotProps: slotProps.root,
-      externalForwardedProps: other,
-      additionalProps: {
-        ref
-      },
-      ownerState,
-      className: classes.root
-    });
-    const Badge = slots.badge || 'span';
-    const badgeProps = useSlotProps({
-      elementType: Badge,
-      externalSlotProps: slotProps.badge,
-      ownerState,
-      className: classes.badge
-    });
-    return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, {
-      children: [children, /*#__PURE__*/jsxRuntime_1(Badge, _extends({}, badgeProps, {
-        children: displayValue
-      }))]
-    }));
-  });
-  BadgeUnstyled.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 rendered within the badge.
-     */
-    badgeContent: PropTypes.node,
-    /**
-     * The badge will be added relative to this node.
-     */
-    children: PropTypes.node,
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component: PropTypes.elementType,
-    /**
-     * If `true`, the badge is invisible.
-     * @default false
-     */
-    invisible: PropTypes.bool,
-    /**
-     * Max count to show.
-     * @default 99
-     */
-    max: PropTypes.number,
-    /**
-     * Controls whether the badge is hidden when `badgeContent` is zero.
-     * @default false
-     */
-    showZero: PropTypes.bool,
-    /**
-     * The props used for each slot inside the Badge.
-     * @default {}
-     */
-    slotProps: PropTypes.shape({
-      badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-    }),
-    /**
-     * The components used for each slot inside the Badge.
-     * Either a string to use a HTML element or a component.
-     * @default {}
-     */
-    slots: PropTypes.shape({
-      badge: PropTypes.elementType,
-      root: PropTypes.elementType
-    })
-  } ;
-  var BadgeUnstyled$1 = BadgeUnstyled;
-
   function mapEventPropToEvent(eventProp) {
     return eventProp.substring(2).toLowerCase();
   }
@@ -15756,8 +15628,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
 
   const _excluded$24 = ["onChange", "maxRows", "minRows", "style", "value"];
-  function getStyleValue(computedStyle, property) {
-    return parseInt(computedStyle[property], 10) || 0;
+  function getStyleValue(value) {
+    return parseInt(value, 10) || 0;
   }
   const styles$5 = {
     shadow: {
@@ -15775,8 +15647,20 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   };
   function isEmpty$1(obj) {
-    return obj === undefined || obj === null || Object.keys(obj).length === 0;
+    return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflow;
   }
+
+  /**
+   *
+   * Demos:
+   *
+   * - [Textarea Autosize](https://mui.com/base/react-textarea-autosize/)
+   * - [Textarea Autosize](https://mui.com/material-ui/react-textarea-autosize/)
+   *
+   * API:
+   *
+   * - [TextareaAutosize API](https://mui.com/base/api/textarea-autosize/)
+   */
   const TextareaAutosize = /*#__PURE__*/React__namespace.forwardRef(function TextareaAutosize(props, ref) {
     const {
         onChange,
@@ -15793,7 +15677,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const handleRef = useForkRef(ref, inputRef);
     const shadowRef = React__namespace.useRef(null);
     const renders = React__namespace.useRef(0);
-    const [state, setState] = React__namespace.useState({});
+    const [state, setState] = React__namespace.useState({
+      outerHeightStyle: 0
+    });
     const getUpdatedState = React__namespace.useCallback(() => {
       const input = inputRef.current;
       const containerWindow = ownerWindow(input);
@@ -15801,7 +15687,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       // If input's width is shrunk and it's not visible, don't sync height.
       if (computedStyle.width === '0px') {
-        return {};
+        return {
+          outerHeightStyle: 0
+        };
       }
       const inputShallow = shadowRef.current;
       inputShallow.style.width = computedStyle.width;
@@ -15812,9 +15700,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         // is empty. Make it non-empty to avoid this issue.
         inputShallow.value += ' ';
       }
-      const boxSizing = computedStyle['box-sizing'];
-      const padding = getStyleValue(computedStyle, 'padding-bottom') + getStyleValue(computedStyle, 'padding-top');
-      const border = getStyleValue(computedStyle, 'border-bottom-width') + getStyleValue(computedStyle, 'border-top-width');
+      const boxSizing = computedStyle.boxSizing;
+      const padding = getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
+      const border = getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
 
       // The height of the inner content
       const innerHeight = inputShallow.scrollHeight;
@@ -15880,7 +15768,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
       // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
       // Related issue - https://github.com/facebook/react/issues/24331
-      ReactDOM.flushSync(() => {
+      ReactDOM__namespace.flushSync(() => {
         setState(prevState => {
           return updateState(prevState, newState);
         });
@@ -15898,12 +15786,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           syncHeightWithFlushSycn();
         }
       });
-      const containerWindow = ownerWindow(inputRef.current);
-      containerWindow.addEventListener('resize', handleResize);
       let resizeObserver;
+      const input = inputRef.current;
+      const containerWindow = ownerWindow(input);
+      containerWindow.addEventListener('resize', handleResize);
       if (typeof ResizeObserver !== 'undefined') {
         resizeObserver = new ResizeObserver(handleResize);
-        resizeObserver.observe(inputRef.current);
+        resizeObserver.observe(input);
       }
       return () => {
         handleResize.clear();
@@ -15940,7 +15829,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           height: state.outerHeightStyle,
           // Need a large enough difference to allow scrolling.
           // This prevents infinite rendering loop.
-          overflow: state.overflow ? 'hidden' : null
+          overflow: state.overflow ? 'hidden' : undefined
         }, style)
       }, other)), /*#__PURE__*/jsxRuntime_1("textarea", {
         "aria-hidden": true,
@@ -15957,7 +15846,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   TextareaAutosize.propTypes /* remove-proptypes */ = {
     // ----------------------------- Warning --------------------------------
     // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
     // ----------------------------------------------------------------------
     /**
      * @ignore
@@ -22903,6 +22792,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       children = alt[0];
     } else {
       children = /*#__PURE__*/jsxRuntime_1(AvatarFallback, {
+        ownerState: ownerState,
         className: classes.fallback
       });
     }
@@ -23375,7 +23265,7 @@ 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$1J = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "slotProps", "slots", "transitionDuration", "TransitionComponent"];
+  const _excluded$1J = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
   const useUtilityClasses$1t = ownerState => {
     const {
       classes,
@@ -23419,17 +23309,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const {
         children,
+        className,
         component = 'div',
         components = {},
         componentsProps = {},
-        className,
         invisible = false,
         open,
         slotProps = {},
         slots = {},
-        transitionDuration,
-        // eslint-disable-next-line react/prop-types
-        TransitionComponent = Fade$1
+        TransitionComponent = Fade$1,
+        transitionDuration
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$1J);
     const ownerState = _extends({}, props, {
@@ -23534,6 +23423,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+    /**
+     * The component used for the transition.
+     * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+     * @default Fade
+     */
+    TransitionComponent: PropTypes.elementType,
     /**
      * The duration for the transition, in milliseconds.
      * You may specify a single timeout for all transitions, or individually with an object.
@@ -23546,11 +23441,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var Backdrop$1 = Backdrop;
 
-  const shouldSpreadAdditionalProps = Slot => {
-    return !Slot || !isHostComponent(Slot);
-  };
-  var shouldSpreadAdditionalProps$1 = shouldSpreadAdditionalProps;
-
   function getBadgeUtilityClass(slot) {
     return generateUtilityClass('MuiBadge', slot);
   }
@@ -23559,7 +23449,7 @@ 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$1I = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
+  const _excluded$1I = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
   const RADIUS_STANDARD = 10;
   const RADIUS_DOT = 4;
   const useUtilityClasses$1s = ownerState => {
@@ -23713,13 +23603,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           horizontal: 'right'
         },
         className,
-        component = 'span',
+        component,
         components = {},
         componentsProps = {},
+        children,
         overlap: overlapProp = 'rectangular',
         color: colorProp = 'default',
         invisible: invisibleProp = false,
-        max,
+        max: maxProp = 99,
         badgeContent: badgeContentProp,
         slots,
         slotProps,
@@ -23727,73 +23618,71 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         variant: variantProp = 'standard'
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$1I);
+    const {
+      badgeContent,
+      invisible: invisibleFromHook,
+      max,
+      displayValue: displayValueFromHook
+    } = useBadge({
+      max: maxProp,
+      invisible: invisibleProp,
+      badgeContent: badgeContentProp,
+      showZero
+    });
     const prevProps = usePreviousProps$1({
       anchorOrigin: anchorOriginProp,
       color: colorProp,
       overlap: overlapProp,
-      variant: variantProp
+      variant: variantProp,
+      badgeContent: badgeContentProp
     });
-    let invisible = invisibleProp;
-    if (invisibleProp === false && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
-      invisible = true;
-    }
+    const invisible = invisibleFromHook || badgeContent == null && variantProp !== 'dot';
     const {
       color = colorProp,
       overlap = overlapProp,
       anchorOrigin = anchorOriginProp,
       variant = variantProp
     } = invisible ? prevProps : props;
+    const displayValue = variant !== 'dot' ? displayValueFromHook : undefined;
     const ownerState = _extends({}, props, {
-      anchorOrigin,
+      badgeContent,
       invisible,
+      max,
+      displayValue,
+      showZero,
+      anchorOrigin,
       color,
       overlap,
       variant
     });
     const classes = useUtilityClasses$1s(ownerState);
-    let displayValue;
-    if (variant !== 'dot') {
-      displayValue = badgeContentProp && Number(badgeContentProp) > max ? `${max}+` : badgeContentProp;
-    }
 
     // support both `slots` and `components` for backward compatibility
     const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : BadgeRoot;
     const BadgeSlot = (_ref2 = (_slots$badge = slots == null ? void 0 : slots.badge) != null ? _slots$badge : components.Badge) != null ? _ref2 : BadgeBadge;
     const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
     const badgeSlotProps = (_slotProps$badge = slotProps == null ? void 0 : slotProps.badge) != null ? _slotProps$badge : componentsProps.badge;
-    return /*#__PURE__*/jsxRuntime_1(BadgeUnstyled$1, _extends({
-      invisible: invisibleProp,
-      badgeContent: displayValue,
-      showZero: showZero,
-      max: max
-    }, other, {
-      slots: {
-        root: RootSlot,
-        badge: BadgeSlot
-      },
-      className: clsx(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className),
-      slotProps: {
-        root: _extends({}, rootSlotProps, shouldSpreadAdditionalProps$1(RootSlot) && {
-          as: component,
-          ownerState: _extends({}, rootSlotProps == null ? void 0 : rootSlotProps.ownerState, {
-            anchorOrigin,
-            color,
-            overlap,
-            variant
-          })
-        }),
-        badge: _extends({}, badgeSlotProps, {
-          className: clsx(classes.badge, badgeSlotProps == null ? void 0 : badgeSlotProps.className)
-        }, shouldSpreadAdditionalProps$1(BadgeSlot) && {
-          ownerState: _extends({}, badgeSlotProps == null ? void 0 : badgeSlotProps.ownerState, {
-            anchorOrigin,
-            color,
-            overlap,
-            variant
-          })
-        })
+    const rootProps = useSlotProps({
+      elementType: RootSlot,
+      externalSlotProps: rootSlotProps,
+      externalForwardedProps: other,
+      additionalProps: {
+        ref,
+        as: component
       },
-      ref: ref
+      ownerState,
+      className: clsx(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className)
+    });
+    const badgeProps = useSlotProps({
+      elementType: BadgeSlot,
+      externalSlotProps: badgeSlotProps,
+      ownerState,
+      className: clsx(classes.badge, badgeSlotProps == null ? void 0 : badgeSlotProps.className)
+    });
+    return /*#__PURE__*/jsxRuntime_2(RootSlot, _extends({}, rootProps, {
+      children: [children, /*#__PURE__*/jsxRuntime_1(BadgeSlot, _extends({}, badgeProps, {
+        children: displayValue
+      }))]
     }));
   });
   Badge.propTypes /* remove-proptypes */ = {
@@ -25917,7 +25806,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         defaultChecked: defaultChecked,
         className: classes.input,
         disabled: disabled,
-        id: hasLabelFor && id,
+        id: hasLabelFor ? id : undefined,
         name: name,
         onChange: handleInputChange,
         readOnly: readOnly,
@@ -26982,7 +26871,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const dialogClasses = generateUtilityClasses('MuiDialog', ['root', 'scrollPaper', 'scrollBody', 'container', 'paper', 'paperScrollPaper', 'paperScrollBody', 'paperWidthFalse', 'paperWidthXs', 'paperWidthSm', 'paperWidthMd', 'paperWidthLg', 'paperWidthXl', 'paperFullWidth', 'paperFullScreen']);
   var dialogClasses$1 = dialogClasses;
 
-  const DialogContext = /*#__PURE__*/React.createContext({});
+  const DialogContext = /*#__PURE__*/React__namespace.createContext({});
   {
     DialogContext.displayName = 'DialogContext';
   }
@@ -30947,9 +30836,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    */
 
   function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
-    const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
     const [match, setMatch] = React__namespace.useState(() => {
-      if (noSsr && supportMatchMedia) {
+      if (noSsr && matchMedia) {
         return matchMedia(query).matches;
       }
       if (ssrMatchMedia) {
@@ -30962,7 +30850,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     useEnhancedEffect$1(() => {
       let active = true;
-      if (!supportMatchMedia) {
+      if (!matchMedia) {
         return undefined;
       }
       const queryList = matchMedia(query);
@@ -30981,15 +30869,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         active = false;
         queryList.removeListener(updateMatch);
       };
-    }, [query, matchMedia, supportMatchMedia]);
+    }, [query, matchMedia]);
     return match;
   }
 
   // eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
   const maybeReactUseSyncExternalStore = React__namespace['useSyncExternalStore' + ''];
-  function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
+  function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
     const getDefaultSnapshot = React__namespace.useCallback(() => defaultMatches, [defaultMatches]);
     const getServerSnapshot = React__namespace.useMemo(() => {
+      if (noSsr && matchMedia) {
+        return () => matchMedia(query).matches;
+      }
       if (ssrMatchMedia !== null) {
         const {
           matches
@@ -30997,7 +30888,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         return () => matches;
       }
       return getDefaultSnapshot;
-    }, [getDefaultSnapshot, query, ssrMatchMedia]);
+    }, [getDefaultSnapshot, query, ssrMatchMedia, noSsr, matchMedia]);
     const [getSnapshot, subscribe] = React__namespace.useMemo(() => {
       if (matchMedia === null) {
         return [getDefaultSnapshot, () => () => {}];
@@ -31025,7 +30916,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       defaultMatches = false,
       matchMedia = supportMatchMedia ? window.matchMedia : null,
       ssrMatchMedia = null,
-      noSsr
+      noSsr = false
     } = getThemeProps({
       name: 'MuiUseMediaQuery',
       props: options,
@@ -39813,6 +39704,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var Skeleton$1 = Skeleton;
 
+  const shouldSpreadAdditionalProps = Slot => {
+    return !Slot || !isHostComponent(Slot);
+  };
+  var shouldSpreadAdditionalProps$1 = shouldSpreadAdditionalProps;
+
   function getSliderUtilityClass(slot) {
     return generateUtilityClass('MuiSlider', slot);
   }
@@ -44617,7 +44513,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
       claimedSwipeInstance = null;
       touchDetected.current = false;
-      ReactDOM.flushSync(() => {
+      ReactDOM__namespace.flushSync(() => {
         setMaybeSwiping(false);
       });
 
@@ -44669,7 +44565,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         // this is because Safari Mobile will not fire any mouse events (still fires touch though) if the DOM changes during mousemove.
         // so do this change on first touchmove instead of touchstart
         if (force || !(disableDiscovery && allowSwipeInChildren)) {
-          ReactDOM.flushSync(() => {
+          ReactDOM__namespace.flushSync(() => {
             setMaybeSwiping(true);
           });
         }