@mui/material 5.11.3 → 5.11.5

package/umd/material-ui.development.js

@@ -1,5 +1,7 @@
-/** @license MUI v5.11.3
+/**
+ * @mui/material v5.11.5
  *
+ * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
@@ -6845,7 +6847,7 @@
   styleFunctionSx.filterProps = ['sx'];
   var styleFunctionSx$1 = styleFunctionSx;
 
-  const _excluded$2o = ["sx"];
+  const _excluded$2n = ["sx"];
   const splitProps = props => {
     var _props$theme$unstable, _props$theme;
     const result = {
@@ -6866,7 +6868,7 @@
     const {
         sx: inSx
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$2o);
+      other = _objectWithoutPropertiesLoose(props, _excluded$2n);
     const {
       systemProps,
       otherProps
@@ -6892,7 +6894,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$2n = ["values", "unit", "step"];
+  const _excluded$2m = ["values", "unit", "step"];
   const sortBreakpointsValues = values => {
     const breakpointsAsArray = Object.keys(values).map(key => ({
       key,
@@ -6927,7 +6929,7 @@
         unit = 'px',
         step = 5
       } = breakpoints,
-      other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2n);
+      other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2m);
     const sortedValues = sortBreakpointsValues(values);
     const keys = Object.keys(sortedValues);
     function up(key) {
@@ -7006,7 +7008,7 @@
     return spacing;
   }
 
-  const _excluded$2m = ["breakpoints", "palette", "spacing", "shape"];
+  const _excluded$2l = ["breakpoints", "palette", "spacing", "shape"];
   function createTheme$1(options = {}, ...args) {
     const {
         breakpoints: breakpointsInput = {},
@@ -7014,7 +7016,7 @@
         spacing: spacingInput,
         shape: shapeInput = {}
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$2m);
+      other = _objectWithoutPropertiesLoose(options, _excluded$2l);
     const breakpoints = createBreakpoints(breakpointsInput);
     const spacing = createSpacing(spacingInput);
     let muiTheme = deepmerge({
@@ -7125,7 +7127,7 @@
     return useTheme$2(defaultTheme);
   }
 
-  const _excluded$2l = ["className", "component"];
+  const _excluded$2k = ["className", "component"];
   function createBox(options = {}) {
     const {
       defaultTheme,
@@ -7142,7 +7144,7 @@
           className,
           component = 'div'
         } = _extendSxProp,
-        other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2l);
+        other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2k);
       return /*#__PURE__*/jsxRuntime_1(BoxRoot, _extends({
         as: component,
         ref: ref,
@@ -7153,7 +7155,7 @@
     return Box;
   }
 
-  const _excluded$2k = ["variant"];
+  const _excluded$2j = ["variant"];
   function isEmpty$3(string) {
     return string.length === 0;
   }
@@ -7167,7 +7169,7 @@
     const {
         variant
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$2k);
+      other = _objectWithoutPropertiesLoose(props, _excluded$2j);
     let classKey = variant || '';
     Object.keys(other).sort().forEach(key => {
       if (key === 'color') {
@@ -7179,7 +7181,7 @@
     return classKey;
   }
 
-  const _excluded$2j = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+  const _excluded$2i = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
     _excluded2$c = ["theme"],
     _excluded3$1 = ["theme"];
   function isEmpty$2(obj) {
@@ -7266,7 +7268,7 @@
           skipSx: inputSkipSx,
           overridesResolver
         } = inputOptions,
-        options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2j);
+        options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2i);
 
       // 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;
@@ -8163,7 +8165,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  const _excluded$2i = ["colorSchemes", "components", "cssVarPrefix"];
+  const _excluded$2h = ["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 {
@@ -8215,7 +8217,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           components = {},
           cssVarPrefix
         } = themeProp,
-        restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$2i);
+        restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$2h);
       const allColorSchemes = Object.keys(colorSchemes);
       const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
       const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -8513,7 +8515,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return getCssVar;
   }
 
-  const _excluded$2h = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
+  const _excluded$2g = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
   const defaultTheme$5 = createTheme$1();
   const defaultCreateStyledComponent$1 = systemStyled('div', {
     name: 'MuiContainer',
@@ -8609,7 +8611,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           fixed = false,
           maxWidth = 'lg'
         } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$2h);
+        other = _objectWithoutPropertiesLoose(props, _excluded$2g);
       const ownerState = _extends({}, props, {
         component,
         disableGutters,
@@ -8874,7 +8876,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return [`direction-xs-${String(direction)}`];
   };
 
-  const _excluded$2g = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"];
+  const _excluded$2f = ["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.
@@ -8932,7 +8934,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           columnSpacing: columnSpacingProp = spacingProp,
           disableEqualOverflow: themeDisableEqualOverflow
         } = props,
-        rest = _objectWithoutPropertiesLoose(props, _excluded$2g);
+        rest = _objectWithoutPropertiesLoose(props, _excluded$2f);
       // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
       let disableEqualOverflow = themeDisableEqualOverflow;
       if (nested && themeDisableEqualOverflow !== undefined) {
@@ -9022,7 +9024,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return Grid;
   }
 
-  const _excluded$2f = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+  const _excluded$2e = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
     _excluded2$b = ["type", "mode"];
   function adaptV4Theme(inputTheme) {
     {
@@ -9036,7 +9038,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         props = {},
         styleOverrides = {}
       } = inputTheme,
-      other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2f);
+      other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2e);
     const theme = _extends({}, other, {
       components: {}
     });
@@ -9117,7 +9119,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }, mixins);
   }
 
-  const _excluded$2e = ["mode", "contrastThreshold", "tonalOffset"];
+  const _excluded$2d = ["mode", "contrastThreshold", "tonalOffset"];
   const light = {
     // The colors used to style the text.
     text: {
@@ -9286,7 +9288,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         contrastThreshold = 3,
         tonalOffset = 0.2
       } = palette,
-      other = _objectWithoutPropertiesLoose(palette, _excluded$2e);
+      other = _objectWithoutPropertiesLoose(palette, _excluded$2d);
     const primary = palette.primary || getDefaultPrimary(mode);
     const secondary = palette.secondary || getDefaultSecondary(mode);
     const error = palette.error || getDefaultError(mode);
@@ -9410,7 +9412,7 @@ const theme2 = createTheme({ palette: {
     return paletteOutput;
   }
 
-  const _excluded$2d = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+  const _excluded$2c = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
   function round$2(value) {
     return Math.round(value * 1e5) / 1e5;
   }
@@ -9441,7 +9443,7 @@ const theme2 = createTheme({ palette: {
         allVariants,
         pxToRem: pxToRem2
       } = _ref,
-      other = _objectWithoutPropertiesLoose(_ref, _excluded$2d);
+      other = _objectWithoutPropertiesLoose(_ref, _excluded$2c);
     {
       if (typeof fontSize !== 'number') {
         console.error('MUI: `fontSize` is required to be a number.');
@@ -9501,7 +9503,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$2c = ["duration", "easing", "delay"];
+  const _excluded$2b = ["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 = {
@@ -9552,7 +9554,7 @@ const theme2 = createTheme({ palette: {
           easing: easingOption = mergedEasing.easeInOut,
           delay = 0
         } = options,
-        other = _objectWithoutPropertiesLoose(options, _excluded$2c);
+        other = _objectWithoutPropertiesLoose(options, _excluded$2b);
       {
         const isString = value => typeof value === 'string';
         // IE11 support, replace with Number.isNaN
@@ -9599,7 +9601,7 @@ const theme2 = createTheme({ palette: {
   };
   var zIndex$1 = zIndex;
 
-  const _excluded$2b = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+  const _excluded$2a = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
   function createTheme(options = {}, ...args) {
     const {
         mixins: mixinsInput = {},
@@ -9607,7 +9609,7 @@ const theme2 = createTheme({ palette: {
         transitions: transitionsInput = {},
         typography: typographyInput = {}
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$2b);
+      other = _objectWithoutPropertiesLoose(options, _excluded$2a);
     if (options.vars) {
       throw new Error(`MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` );
@@ -9935,7 +9937,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   };
   var getOverlayAlpha$1 = getOverlayAlpha;
 
-  const _excluded$2a = ["colorSchemes", "cssVarPrefix"],
+  const _excluded$29 = ["colorSchemes", "cssVarPrefix"],
     _excluded2$a = ["palette"];
   const defaultDarkOverlays = [...Array(25)].map((_, index) => {
     if (index === 0) {
@@ -9956,6 +9958,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       obj[key] = defaultValue;
     }
   }
+  function setColorChannel(obj, key) {
+    if (!(`${key}Channel` in obj)) {
+      // custom channel token is not provided, generate one.
+      // if channel token can't be generated, show a warning.
+      obj[`${key}Channel`] = private_safeColorChannel(obj[key], `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, e.g. "12 12 12") or undefined if you want to remove the channel token.`);
+    }
+  }
   const silent = fn => {
     try {
       return fn();
@@ -9971,7 +9980,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         colorSchemes: colorSchemesInput = {},
         cssVarPrefix = 'mui'
       } = options,
-      input = _objectWithoutPropertiesLoose(options, _excluded$2a);
+      input = _objectWithoutPropertiesLoose(options, _excluded$29);
     const getCssVar = createGetCssVar(cssVarPrefix);
     const _createThemeWithoutVa = createTheme(_extends({}, input, colorSchemesInput.light && {
         palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
@@ -10146,11 +10155,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.TableCell, 'border', private_safeDarken(private_safeAlpha(palette.divider, 1), 0.68));
         setColor(palette.Tooltip, 'bg', private_safeAlpha(palette.grey[700], 0.92));
       }
-      setColor(palette.background, 'defaultChannel', private_safeColorChannel(palette.background.default, 'MUI: The value of `palette.background.default` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().')); // MUI X - DataGrid needs this token.
 
-      setColor(palette.common, 'backgroundChannel', private_safeColorChannel(palette.common.background, 'MUI: The value of `palette.common.background` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
-      setColor(palette.common, 'onBackgroundChannel', private_safeColorChannel(palette.common.onBackground, 'MUI: The value of `palette.common.onBackground` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
-      setColor(palette, 'dividerChannel', private_safeColorChannel(palette.divider, 'MUI: The value of `palette.divider` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+      // MUI X - DataGrid needs this token.
+      setColorChannel(palette.background, 'default');
+      setColorChannel(palette.common, 'background');
+      setColorChannel(palette.common, 'onBackground');
+      setColorChannel(palette, 'divider');
       Object.keys(palette).forEach(color => {
         const colors = palette[color];
 
@@ -10172,16 +10182,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           }
           if (color === 'text') {
             // Text colors: text.primary, text.secondary
-            setColor(palette[color], 'primaryChannel', private_safeColorChannel(colors.primary, 'MUI: The value of `palette.text.primary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
-            setColor(palette[color], 'secondaryChannel', private_safeColorChannel(colors.secondary, 'MUI: The value of `palette.text.secondary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+            setColorChannel(palette[color], 'primary');
+            setColorChannel(palette[color], 'secondary');
           }
           if (color === 'action') {
             // Action colors: action.active, action.selected
             if (colors.active) {
-              setColor(palette[color], 'activeChannel', private_safeColorChannel(colors.active, 'MUI: The value of `palette.action.active` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+              setColorChannel(palette[color], 'active');
             }
             if (colors.selected) {
-              setColor(palette[color], 'selectedChannel', private_safeColorChannel(colors.selected, 'MUI: The value of `palette.action.selected` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+              setColorChannel(palette[color], 'selected');
             }
           }
         }
@@ -10386,7 +10396,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
   }
 
-  const _excluded$29 = ["elementType", "externalSlotProps", "ownerState"];
+  const _excluded$28 = ["elementType", "externalSlotProps", "ownerState"];
   /**
    * Builds the props to be passed into the slot of an unstyled component.
    * It merges the internal props of the component with the ones supplied by the user, allowing to customize the behavior.
@@ -10401,7 +10411,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         externalSlotProps,
         ownerState
       } = parameters,
-      rest = _objectWithoutPropertiesLoose(parameters, _excluded$29);
+      rest = _objectWithoutPropertiesLoose(parameters, _excluded$28);
     const resolvedComponentsProps = resolveComponentProps(externalSlotProps, ownerState);
     const {
       props: mergedProps,
@@ -10466,7 +10476,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
   const defaultFilterOptions = createFilterOptions();
 
-  // Number of options to jump in list box when pageup and pagedown keys are used.
+  // Number of options to jump in list box when `Page Up` and `Page Down` keys are used.
   const pageSize = 5;
   const defaultIsActiveElementInListbox = listboxRef => {
     var _listboxRef$current$p;
@@ -10852,7 +10862,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           if (inputRef.current && inputRef.current.nodeName === 'TEXTAREA') {
             console.warn([`A textarea element was provided to ${componentName} where input was expected.`, `This is not a supported scenario but it may work under certain conditions.`, `A textarea keyboard navigation may conflict with Autocomplete controls (e.g. enter and arrow keys).`, `Make sure to test keyboard navigation and add custom event handlers if necessary.`].join('\n'));
           } else {
-            console.error([`MUI: Unable to find the input element. It was resolved to ${inputRef.current} while an HTMLInputElement was expected.`, `Instead, ${componentName} expects an input element.`, '', componentName === 'useAutocomplete' ? 'Make sure you have binded getInputProps correctly and that the normal ref/effect resolutions order is guaranteed.' : 'Make sure you have customized the input component correctly.'].join('\n'));
+            console.error([`MUI: Unable to find the input element. It was resolved to ${inputRef.current} while an HTMLInputElement was expected.`, `Instead, ${componentName} expects an input element.`, '', componentName === 'useAutocomplete' ? 'Make sure you have bound getInputProps correctly and that the normal ref/effect resolutions order is guaranteed.' : 'Make sure you have customized the input component correctly.'].join('\n'));
           }
         }
       }, [componentName]);
@@ -10901,7 +10911,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         {
           const matches = newValue.filter(val => isOptionEqualToValue(option, val));
           if (matches.length > 1) {
-            console.error([`MUI: The \`isOptionEqualToValue\` method of ${componentName} do not handle the arguments correctly.`, `The component expects a single value to match a given option but found ${matches.length} matches.`].join('\n'));
+            console.error([`MUI: The \`isOptionEqualToValue\` method of ${componentName} does not handle the arguments correctly.`, `The component expects a single value to match a given option but found ${matches.length} matches.`].join('\n'));
           }
         }
         const itemIndex = findIndex(newValue, valueItem => isOptionEqualToValue(option, valueItem));
@@ -11375,7 +11385,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
   generateUtilityClasses('MuiBadge', ['root', 'badge', 'invisible']);
 
-  const _excluded$28 = ["badgeContent", "component", "children", "invisible", "max", "slotProps", "slots", "showZero"];
+  const _excluded$27 = ["badgeContent", "component", "children", "invisible", "max", "slotProps", "slots", "showZero"];
   const useUtilityClasses$1P = ownerState => {
     const {
       invisible
@@ -11405,7 +11415,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         slots = {},
         showZero = false
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$28);
+      other = _objectWithoutPropertiesLoose(props, _excluded$27);
     const {
       badgeContent,
       max,
@@ -11866,7 +11876,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }
 
         // Make sure the next tab starts from the right place.
-        // doc.activeElement referes to the origin.
+        // doc.activeElement refers to the origin.
         if (doc.activeElement === rootRef.current && nativeEvent.shiftKey) {
           // We need to ignore the next contain as
           // it will try to move the focus back to the rootRef element.
@@ -13970,6 +13980,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   /**
    * Portals provide a first-class way to render children into a DOM node
    * that exists outside the DOM hierarchy of the parent component.
+   *
+   * Demos:
+   *
+   * - [Portal](https://mui.com/base/react-portal/)
+   *
+   * API:
+   *
+   * - [Portal API](https://mui.com/base/api/portal/)
    */
   const Portal = /*#__PURE__*/React__namespace.forwardRef(function Portal(props, ref) {
     const {
@@ -13978,6 +13996,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disablePortal = false
     } = props;
     const [mountNode, setMountNode] = React__namespace.useState(null);
+    // @ts-expect-error TODO upstream fix
     const handleRef = useForkRef( /*#__PURE__*/React__namespace.isValidElement(children) ? children.ref : null, ref);
     useEnhancedEffect$1(() => {
       if (!disablePortal) {
@@ -13995,11 +14014,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }, [ref, mountNode, disablePortal]);
     if (disablePortal) {
       if ( /*#__PURE__*/React__namespace.isValidElement(children)) {
-        return /*#__PURE__*/React__namespace.cloneElement(children, {
+        const newProps = {
           ref: handleRef
-        });
+        };
+        return /*#__PURE__*/React__namespace.cloneElement(children, newProps);
       }
-      return children;
+      return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
+        children: children
+      });
     }
     return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
       children: mountNode ? /*#__PURE__*/ReactDOM__namespace.createPortal(children, mountNode) : mountNode
@@ -14008,7 +14030,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   Portal.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"  |
     // ----------------------------------------------------------------------
     /**
      * The children to render into the `container`.
@@ -14039,7 +14061,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
   generateUtilityClasses('MuiPopperUnstyled', ['root']);
 
-  const _excluded$27 = ["anchorEl", "children", "component", "direction", "disablePortal", "modifiers", "open", "ownerState", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps"],
+  const _excluded$26 = ["anchorEl", "children", "component", "direction", "disablePortal", "modifiers", "open", "ownerState", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps"],
     _excluded2$9 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
   function flipPlacement(placement, direction) {
     if (direction === 'ltr') {
@@ -14092,7 +14114,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         slots = {},
         TransitionProps
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$27);
+      other = _objectWithoutPropertiesLoose(props, _excluded$26);
     const tooltipRef = React__namespace.useRef(null);
     const ownRef = useForkRef(tooltipRef, ref);
     const popperRef = React__namespace.useRef(null);
@@ -14624,7 +14646,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const modalUnstyledClasses = generateUtilityClasses('MuiModal', ['root', 'hidden']);
   var modalUnstyledClasses$1 = modalUnstyledClasses;
 
-  const _excluded$26 = ["children", "classes", "closeAfterTransition", "component", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
+  const _excluded$25 = ["children", "classes", "closeAfterTransition", "component", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
   const useUtilityClasses$1N = ownerState => {
     const {
       open,
@@ -14696,7 +14718,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         slotProps = {},
         slots = {}
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$26);
+      other = _objectWithoutPropertiesLoose(props, _excluded$25);
     const [exited, setExited] = React__namespace.useState(!open);
     const modal = React__namespace.useRef({});
     const mountNodeRef = React__namespace.useRef(null);
@@ -15070,51 +15092,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const sliderUnstyledClasses = generateUtilityClasses('MuiSlider', ['root', 'active', 'focusVisible', 'disabled', 'dragging', 'marked', 'vertical', 'trackInverted', 'trackFalse', 'rail', 'track', 'mark', 'markActive', 'markLabel', 'markLabelActive', 'thumb', 'valueLabel', 'valueLabelOpen', 'valueLabelCircle', 'valueLabelLabel']);
   var sliderUnstyledClasses$1 = sliderUnstyledClasses;
 
-  const useValueLabelClasses = props => {
-    const {
-      open
-    } = props;
-    const utilityClasses = {
-      offset: clsx(open && sliderUnstyledClasses$1.valueLabelOpen),
-      circle: sliderUnstyledClasses$1.valueLabelCircle,
-      label: sliderUnstyledClasses$1.valueLabelLabel
-    };
-    return utilityClasses;
-  };
-
-  /**
-   * @ignore - internal component.
-   */
-  function SliderValueLabelUnstyled(props) {
-    const {
-      children,
-      className,
-      value
-    } = props;
-    const classes = useValueLabelClasses(props);
-    return /*#__PURE__*/React__namespace.cloneElement(children, {
-      className: clsx(children.props.className)
-    }, /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
-      children: [children.props.children, /*#__PURE__*/jsxRuntime_1("span", {
-        className: clsx(classes.offset, className),
-        "aria-hidden": true,
-        children: /*#__PURE__*/jsxRuntime_1("span", {
-          className: classes.circle,
-          children: /*#__PURE__*/jsxRuntime_1("span", {
-            className: classes.label,
-            children: value
-          })
-        })
-      })]
-    }));
-  }
-  SliderValueLabelUnstyled.propTypes = {
-    children: PropTypes.element.isRequired,
-    className: PropTypes.string,
-    theme: PropTypes.any,
-    value: PropTypes.node
-  } ;
-
   const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
   function asc(a, b) {
     return a - b;
@@ -15163,7 +15140,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       y: event.clientY
     };
   }
-  function valueToPercent(value, min, max) {
+  function valueToPercent$1(value, min, max) {
     return (value - min) * 100 / (max - min);
   }
   function percentToValue(percent, min, max) {
@@ -15634,8 +15611,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       doc.addEventListener('mousemove', handleTouchMove);
       doc.addEventListener('mouseup', handleTouchEnd);
     };
-    const trackOffset = valueToPercent(range ? values[0] : min, min, max);
-    const trackLeap = valueToPercent(values[values.length - 1], min, max) - trackOffset;
+    const trackOffset = valueToPercent$1(range ? values[0] : min, min, max);
+    const trackLeap = valueToPercent$1(values[values.length - 1], min, max) - trackOffset;
     const getRootProps = (otherHandlers = {}) => {
       const ownEventHandlers = {
         onMouseDown: createHandleMouseDown(otherHandlers || {})
@@ -15710,444 +15687,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
   }
 
-  const _excluded$25 = ["aria-label", "aria-valuetext", "aria-labelledby", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "slotProps", "slots"];
-  const Identity = x => x;
-  const useUtilityClasses$1M = ownerState => {
-    const {
-      disabled,
-      dragging,
-      marked,
-      orientation,
-      track,
-      classes
-    } = ownerState;
-    const slots = {
-      root: ['root', disabled && 'disabled', dragging && 'dragging', marked && 'marked', orientation === 'vertical' && 'vertical', track === 'inverted' && 'trackInverted', track === false && 'trackFalse'],
-      rail: ['rail'],
-      track: ['track'],
-      mark: ['mark'],
-      markActive: ['markActive'],
-      markLabel: ['markLabel'],
-      markLabelActive: ['markLabelActive'],
-      valueLabel: ['valueLabel'],
-      thumb: ['thumb', disabled && 'disabled'],
-      active: ['active'],
-      disabled: ['disabled'],
-      focusVisible: ['focusVisible']
-    };
-    return composeClasses(slots, getSliderUtilityClass, classes);
-  };
-  const Forward = ({
-    children
-  }) => children;
-  const SliderUnstyled = /*#__PURE__*/React__namespace.forwardRef(function SliderUnstyled(props, ref) {
-    var _ref, _slots$rail, _slots$track, _slots$thumb, _slots$valueLabel, _slots$mark, _slots$markLabel;
-    const {
-        'aria-label': ariaLabel,
-        'aria-valuetext': ariaValuetext,
-        'aria-labelledby': ariaLabelledby,
-        className,
-        component,
-        classes: classesProp,
-        disableSwap = false,
-        disabled = false,
-        getAriaLabel,
-        getAriaValueText,
-        marks: marksProp = false,
-        max = 100,
-        min = 0,
-        orientation = 'horizontal',
-        scale = Identity,
-        step = 1,
-        track = 'normal',
-        valueLabelDisplay = 'off',
-        valueLabelFormat = Identity,
-        isRtl = false,
-        slotProps = {},
-        slots = {}
-      } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$25);
-
-    // all props with defaults
-    // consider extracting to hook an reusing the lint rule for the variants
-    const ownerState = _extends({}, props, {
-      marks: marksProp,
-      classes: classesProp,
-      disabled,
-      isRtl,
-      max,
-      min,
-      orientation,
-      scale,
-      step,
-      track,
-      valueLabelDisplay,
-      valueLabelFormat
-    });
-    const {
-      axisProps,
-      getRootProps,
-      getHiddenInputProps,
-      getThumbProps,
-      open,
-      active,
-      axis,
-      range,
-      focusedThumbIndex,
-      dragging,
-      marks,
-      values,
-      trackOffset,
-      trackLeap
-    } = useSlider(_extends({}, ownerState, {
-      ref
-    }));
-    ownerState.marked = marks.length > 0 && marks.some(mark => mark.label);
-    ownerState.dragging = dragging;
-    ownerState.focusedThumbIndex = focusedThumbIndex;
-    const classes = useUtilityClasses$1M(ownerState);
-    const Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'span';
-    const rootProps = useSlotProps({
-      elementType: Root,
-      getSlotProps: getRootProps,
-      externalSlotProps: slotProps.root,
-      externalForwardedProps: other,
-      ownerState,
-      className: [classes.root, className]
-    });
-    const Rail = (_slots$rail = slots.rail) != null ? _slots$rail : 'span';
-    const railProps = useSlotProps({
-      elementType: Rail,
-      externalSlotProps: slotProps.rail,
-      ownerState,
-      className: classes.rail
-    });
-    const Track = (_slots$track = slots.track) != null ? _slots$track : 'span';
-    const trackProps = useSlotProps({
-      elementType: Track,
-      externalSlotProps: slotProps.track,
-      additionalProps: {
-        style: _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
-      },
-      ownerState,
-      className: classes.track
-    });
-    const Thumb = (_slots$thumb = slots.thumb) != null ? _slots$thumb : 'span';
-    const thumbProps = useSlotProps({
-      elementType: Thumb,
-      getSlotProps: getThumbProps,
-      externalSlotProps: slotProps.thumb,
-      ownerState
-    });
-    const ValueLabel = (_slots$valueLabel = slots.valueLabel) != null ? _slots$valueLabel : SliderValueLabelUnstyled;
-    const valueLabelProps = useSlotProps({
-      elementType: ValueLabel,
-      externalSlotProps: slotProps.valueLabel,
-      ownerState
-    });
-    const Mark = (_slots$mark = slots.mark) != null ? _slots$mark : 'span';
-    const markProps = useSlotProps({
-      elementType: Mark,
-      externalSlotProps: slotProps.mark,
-      ownerState,
-      className: classes.mark
-    });
-    const MarkLabel = (_slots$markLabel = slots.markLabel) != null ? _slots$markLabel : 'span';
-    const markLabelProps = useSlotProps({
-      elementType: MarkLabel,
-      externalSlotProps: slotProps.markLabel,
-      ownerState
-    });
-    const Input = slots.input || 'input';
-    const inputProps = useSlotProps({
-      elementType: Input,
-      getSlotProps: getHiddenInputProps,
-      externalSlotProps: slotProps.input,
-      ownerState
-    });
-    return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, {
-      children: [/*#__PURE__*/jsxRuntime_1(Rail, _extends({}, railProps)), /*#__PURE__*/jsxRuntime_1(Track, _extends({}, trackProps)), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
-        const percent = valueToPercent(mark.value, min, max);
-        const style = axisProps[axis].offset(percent);
-        let markActive;
-        if (track === false) {
-          markActive = values.indexOf(mark.value) !== -1;
-        } else {
-          markActive = track === 'normal' && (range ? mark.value >= values[0] && mark.value <= values[values.length - 1] : mark.value <= values[0]) || track === 'inverted' && (range ? mark.value <= values[0] || mark.value >= values[values.length - 1] : mark.value >= values[0]);
-        }
-        return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
-          children: [/*#__PURE__*/jsxRuntime_1(Mark, _extends({
-            "data-index": index
-          }, markProps, !isHostComponent(Mark) && {
-            markActive
-          }, {
-            style: _extends({}, style, markProps.style),
-            className: clsx(markProps.className, markActive && classes.markActive)
-          })), mark.label != null ? /*#__PURE__*/jsxRuntime_1(MarkLabel, _extends({
-            "aria-hidden": true,
-            "data-index": index
-          }, markLabelProps, !isHostComponent(MarkLabel) && {
-            markLabelActive: markActive
-          }, {
-            style: _extends({}, style, markLabelProps.style),
-            className: clsx(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
-            children: mark.label
-          })) : null]
-        }, index);
-      }), values.map((value, index) => {
-        const percent = valueToPercent(value, min, max);
-        const style = axisProps[axis].offset(percent);
-        const ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabel;
-        return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
-          children: /*#__PURE__*/jsxRuntime_1(ValueLabelComponent, _extends({}, !isHostComponent(ValueLabelComponent) && {
-            valueLabelFormat,
-            valueLabelDisplay,
-            value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
-            index,
-            open: open === index || active === index || valueLabelDisplay === 'on',
-            disabled
-          }, valueLabelProps, {
-            className: clsx(classes.valueLabel, valueLabelProps.className),
-            children: /*#__PURE__*/jsxRuntime_1(Thumb, _extends({
-              "data-index": index,
-              "data-focusvisible": focusedThumbIndex === index
-            }, thumbProps, {
-              className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
-              style: _extends({}, style, {
-                pointerEvents: disableSwap && active !== index ? 'none' : undefined
-              }, thumbProps.style),
-              children: /*#__PURE__*/jsxRuntime_1(Input, _extends({
-                "data-index": index,
-                "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
-                "aria-valuenow": scale(value),
-                "aria-labelledby": ariaLabelledby,
-                "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
-                value: values[index]
-              }, inputProps))
-            }))
-          }))
-        }, index);
-      })]
-    }));
-  });
-  SliderUnstyled.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"     |
-    // ----------------------------------------------------------------------
-    /**
-     * The label of the slider.
-     */
-    'aria-label': chainPropTypes(PropTypes.string, props => {
-      const range = Array.isArray(props.value || props.defaultValue);
-      if (range && props['aria-label'] != null) {
-        return new Error('MUI: You need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.');
-      }
-      return null;
-    }),
-    /**
-     * The id of the element containing a label for the slider.
-     */
-    'aria-labelledby': PropTypes.string,
-    /**
-     * A string value that provides a user-friendly name for the current value of the slider.
-     */
-    'aria-valuetext': chainPropTypes(PropTypes.string, props => {
-      const range = Array.isArray(props.value || props.defaultValue);
-      if (range && props['aria-valuetext'] != null) {
-        return new Error('MUI: You need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.');
-      }
-      return null;
-    }),
-    /**
-     * @ignore
-     */
-    children: PropTypes.node,
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    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.
-     */
-    component: PropTypes.elementType,
-    /**
-     * The default value. Use when the component is not controlled.
-     */
-    defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled: PropTypes.bool,
-    /**
-     * If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
-     * @default false
-     */
-    disableSwap: PropTypes.bool,
-    /**
-     * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.
-     * This is important for screen reader users.
-     * @param {number} index The thumb label's index to format.
-     * @returns {string}
-     */
-    getAriaLabel: PropTypes.func,
-    /**
-     * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.
-     * This is important for screen reader users.
-     * @param {number} value The thumb label's value to format.
-     * @param {number} index The thumb label's index to format.
-     * @returns {string}
-     */
-    getAriaValueText: PropTypes.func,
-    /**
-     * If `true` the Slider will be rendered right-to-left (with the lowest value on the right-hand side).
-     * @default false
-     */
-    isRtl: PropTypes.bool,
-    /**
-     * Marks indicate predetermined values to which the user can move the slider.
-     * If `true` the marks are spaced according the value of the `step` prop.
-     * If an array, it should contain objects with `value` and an optional `label` keys.
-     * @default false
-     */
-    marks: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
-      label: PropTypes.node,
-      value: PropTypes.number.isRequired
-    })), PropTypes.bool]),
-    /**
-     * The maximum allowed value of the slider.
-     * Should not be equal to min.
-     * @default 100
-     */
-    max: PropTypes.number,
-    /**
-     * The minimum allowed value of the slider.
-     * Should not be equal to max.
-     * @default 0
-     */
-    min: PropTypes.number,
-    /**
-     * Name attribute of the hidden `input` element.
-     */
-    name: PropTypes.string,
-    /**
-     * Callback function that is fired when the slider's value changed.
-     *
-     * @param {Event} event The event source of the callback.
-     * You can pull out the new value by accessing `event.target.value` (any).
-     * **Warning**: This is a generic event not a change event.
-     * @param {number | number[]} value The new value.
-     * @param {number} activeThumb Index of the currently moved thumb.
-     */
-    onChange: PropTypes.func,
-    /**
-     * Callback function that is fired when the `mouseup` is triggered.
-     *
-     * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
-     * @param {number | number[]} value The new value.
-     */
-    onChangeCommitted: PropTypes.func,
-    /**
-     * The component orientation.
-     * @default 'horizontal'
-     */
-    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-    /**
-     * A transformation function, to change the scale of the slider.
-     * @default (x) => x
-     */
-    scale: PropTypes.func,
-    /**
-     * The props used for each slot inside the Slider.
-     * @default {}
-     */
-    slotProps: PropTypes.shape({
-      input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-      mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-      markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-      rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-      thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-      track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-      valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-        children: PropTypes.element,
-        className: PropTypes.string,
-        open: PropTypes.bool,
-        style: PropTypes.object,
-        value: PropTypes.number,
-        valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
-      })])
-    }),
-    /**
-     * The components used for each slot inside the Slider.
-     * Either a string to use a HTML element or a component.
-     * @default {}
-     */
-    slots: PropTypes.shape({
-      input: PropTypes.elementType,
-      mark: PropTypes.elementType,
-      markLabel: PropTypes.elementType,
-      rail: PropTypes.elementType,
-      root: PropTypes.elementType,
-      thumb: PropTypes.elementType,
-      track: PropTypes.elementType,
-      valueLabel: PropTypes.elementType
-    }),
-    /**
-     * The granularity with which the slider can step through values. (A "discrete" slider.)
-     * The `min` prop serves as the origin for the valid values.
-     * We recommend (max - min) to be evenly divisible by the step.
-     *
-     * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
-     * @default 1
-     */
-    step: PropTypes.number,
-    /**
-     * Tab index attribute of the hidden `input` element.
-     */
-    tabIndex: PropTypes.number,
-    /**
-     * The track presentation:
-     *
-     * - `normal` the track will render a bar representing the slider value.
-     * - `inverted` the track will render a bar representing the remaining slider value.
-     * - `false` the track will render without a bar.
-     * @default 'normal'
-     */
-    track: PropTypes.oneOf(['inverted', 'normal', false]),
-    /**
-     * The value of the slider.
-     * For ranged sliders, provide an array with two values.
-     */
-    value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
-    /**
-     * Controls when the value label is displayed:
-     *
-     * - `auto` the value label will display when the thumb is hovered or focused.
-     * - `on` will display persistently.
-     * - `off` will never display.
-     * @default 'off'
-     */
-    valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']),
-    /**
-     * The format function the value label's value.
-     *
-     * When a function is provided, it should have the following signature:
-     *
-     * - {number} value The value label's value to format
-     * - {number} index The value label's index to format
-     * @default (x) => x
-     */
-    valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
-  } ;
-  var SliderUnstyled$1 = SliderUnstyled;
-
   const _excluded$24 = ["onChange", "maxRows", "minRows", "style", "value"];
   function getStyleValue(computedStyle, property) {
     return parseInt(computedStyle[property], 10) || 0;
@@ -16391,7 +15930,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var svgIconClasses$1 = svgIconClasses;
 
   const _excluded$23 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
-  const useUtilityClasses$1L = ownerState => {
+  const useUtilityClasses$1M = ownerState => {
     const {
       color,
       fontSize,
@@ -16469,7 +16008,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     if (!inheritViewBox) {
       more.viewBox = viewBox;
     }
-    const classes = useUtilityClasses$1L(ownerState);
+    const classes = useUtilityClasses$1M(ownerState);
     return /*#__PURE__*/jsxRuntime_2(SvgIconRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -17598,7 +17137,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   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 useUtilityClasses$1K = ownerState => {
+  const useUtilityClasses$1L = ownerState => {
     const {
       orientation,
       classes
@@ -17702,7 +17241,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       orientation,
       collapsedSize: collapsedSizeProp
     });
-    const classes = useUtilityClasses$1K(ownerState);
+    const classes = useUtilityClasses$1L(ownerState);
     const theme = useTheme();
     const timer = React__namespace.useRef();
     const wrapperRef = React__namespace.useRef(null);
@@ -17966,7 +17505,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var paperClasses$1 = paperClasses;
 
   const _excluded$21 = ["className", "component", "elevation", "square", "variant"];
-  const useUtilityClasses$1J = ownerState => {
+  const useUtilityClasses$1K = ownerState => {
     const {
       square,
       elevation,
@@ -18027,7 +17566,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       square,
       variant
     });
-    const classes = useUtilityClasses$1J(ownerState);
+    const classes = useUtilityClasses$1K(ownerState);
     {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       const theme = useTheme();
@@ -18113,7 +17652,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var accordionClasses$1 = accordionClasses;
 
   const _excluded$20 = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
-  const useUtilityClasses$1I = ownerState => {
+  const useUtilityClasses$1J = ownerState => {
     const {
       classes,
       square,
@@ -18251,7 +17790,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableGutters,
       expanded
     });
-    const classes = useUtilityClasses$1I(ownerState);
+    const classes = useUtilityClasses$1J(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AccordionRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -18358,7 +17897,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var accordionActionsClasses$1 = accordionActionsClasses;
 
   const _excluded$1$ = ["className", "disableSpacing"];
-  const useUtilityClasses$1H = ownerState => {
+  const useUtilityClasses$1I = ownerState => {
     const {
       classes,
       disableSpacing
@@ -18402,7 +17941,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       disableSpacing
     });
-    const classes = useUtilityClasses$1H(ownerState);
+    const classes = useUtilityClasses$1I(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionActionsRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -18445,7 +17984,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var accordionDetailsClasses$1 = accordionDetailsClasses;
 
   const _excluded$1_ = ["className"];
-  const useUtilityClasses$1G = ownerState => {
+  const useUtilityClasses$1H = ownerState => {
     const {
       classes
     } = ownerState;
@@ -18473,7 +18012,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$1_);
     const ownerState = props;
-    const classes = useUtilityClasses$1G(ownerState);
+    const classes = useUtilityClasses$1H(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionDetailsRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -18920,7 +18459,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   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 useUtilityClasses$1F = ownerState => {
+  const useUtilityClasses$1G = ownerState => {
     const {
       disabled,
       focusVisible,
@@ -19188,7 +18727,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       tabIndex,
       focusVisible
     });
-    const classes = useUtilityClasses$1F(ownerState);
+    const classes = useUtilityClasses$1G(ownerState);
     return /*#__PURE__*/jsxRuntime_2(ButtonBaseRoot, _extends({
       as: ComponentProp,
       className: clsx(classes.root, className),
@@ -19386,7 +18925,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var accordionSummaryClasses$1 = accordionSummaryClasses;
 
   const _excluded$1X = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
-  const useUtilityClasses$1E = ownerState => {
+  const useUtilityClasses$1F = ownerState => {
     const {
       classes,
       expanded,
@@ -19500,7 +19039,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disabled,
       disableGutters
     });
-    const classes = useUtilityClasses$1E(ownerState);
+    const classes = useUtilityClasses$1F(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AccordionSummaryRoot, _extends({
       focusRipple: false,
       disableRipple: true,
@@ -19578,7 +19117,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var iconButtonClasses$1 = iconButtonClasses;
 
   const _excluded$1W = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
-  const useUtilityClasses$1D = ownerState => {
+  const useUtilityClasses$1E = ownerState => {
     const {
       classes,
       disabled,
@@ -19686,7 +19225,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableFocusRipple,
       size
     });
-    const classes = useUtilityClasses$1D(ownerState);
+    const classes = useUtilityClasses$1E(ownerState);
     return /*#__PURE__*/jsxRuntime_1(IconButtonRoot, _extends({
       className: clsx(classes.root, className),
       centerRipple: true,
@@ -19788,7 +19327,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }), 'Close');
 
   const _excluded$1V = ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "slotProps", "slots", "variant"];
-  const useUtilityClasses$1C = ownerState => {
+  const useUtilityClasses$1D = ownerState => {
     const {
       variant,
       color,
@@ -19923,7 +19462,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       severity,
       variant
     });
-    const classes = useUtilityClasses$1C(ownerState);
+    const classes = useUtilityClasses$1D(ownerState);
     const AlertCloseButton = (_ref = (_slots$closeButton = slots.closeButton) != null ? _slots$closeButton : components.CloseButton) != null ? _ref : IconButton$1;
     const AlertCloseIcon = (_ref2 = (_slots$closeIcon = slots.closeIcon) != null ? _slots$closeIcon : components.CloseIcon) != null ? _ref2 : ClearIcon;
     const closeButtonProps = (_slotProps$closeButto = slotProps.closeButton) != null ? _slotProps$closeButto : componentsProps.closeButton;
@@ -20099,7 +19638,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var typographyClasses$1 = typographyClasses;
 
   const _excluded$1U = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
-  const useUtilityClasses$1B = ownerState => {
+  const useUtilityClasses$1C = ownerState => {
     const {
       align,
       gutterBottom,
@@ -20195,7 +19734,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variantMapping
     });
     const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-    const classes = useUtilityClasses$1B(ownerState);
+    const classes = useUtilityClasses$1C(ownerState);
     return /*#__PURE__*/jsxRuntime_1(TypographyRoot, _extends({
       as: Component,
       ref: ref,
@@ -20287,7 +19826,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var alertTitleClasses$1 = alertTitleClasses;
 
   const _excluded$1T = ["className"];
-  const useUtilityClasses$1A = ownerState => {
+  const useUtilityClasses$1B = ownerState => {
     const {
       classes
     } = ownerState;
@@ -20318,7 +19857,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$1T);
     const ownerState = props;
-    const classes = useUtilityClasses$1A(ownerState);
+    const classes = useUtilityClasses$1B(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AlertTitleRoot, _extends({
       gutterBottom: true,
       component: "div",
@@ -20358,7 +19897,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var appBarClasses$1 = appBarClasses;
 
   const _excluded$1S = ["className", "color", "enableColorOnDark", "position"];
-  const useUtilityClasses$1z = ownerState => {
+  const useUtilityClasses$1A = ownerState => {
     const {
       color,
       position,
@@ -20469,7 +20008,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       position,
       enableColorOnDark
     });
-    const classes = useUtilityClasses$1z(ownerState);
+    const classes = useUtilityClasses$1A(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AppBarRoot, _extends({
       square: true,
       component: "header",
@@ -20702,7 +20241,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var listSubheaderClasses$1 = listSubheaderClasses;
 
   const _excluded$1Q = ["className", "color", "component", "disableGutters", "disableSticky", "inset"];
-  const useUtilityClasses$1y = ownerState => {
+  const useUtilityClasses$1z = ownerState => {
     const {
       classes,
       color,
@@ -20771,7 +20310,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableSticky,
       inset
     });
-    const classes = useUtilityClasses$1y(ownerState);
+    const classes = useUtilityClasses$1z(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListSubheaderRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -20839,7 +20378,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var chipClasses$1 = chipClasses;
 
   const _excluded$1P = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"];
-  const useUtilityClasses$1x = ownerState => {
+  const useUtilityClasses$1y = ownerState => {
     const {
       classes,
       disabled,
@@ -21165,7 +20704,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       clickable,
       variant
     });
-    const classes = useUtilityClasses$1x(ownerState);
+    const classes = useUtilityClasses$1y(ownerState);
     const moreProps = component === ButtonBase$1 ? _extends({
       component: ComponentProp || 'div',
       focusVisibleClassName: classes.focusVisible
@@ -21418,7 +20957,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     } = props;
     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$1w = ownerState => {
+  const useUtilityClasses$1x = ownerState => {
     const {
       classes,
       color,
@@ -21810,7 +21349,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       startAdornment,
       type
     });
-    const classes = useUtilityClasses$1w(ownerState);
+    const classes = useUtilityClasses$1x(ownerState);
     const Root = slots.root || components.Root || InputBaseRoot;
     const rootProps = slotProps.root || componentsProps.root || {};
     const Input = slots.input || components.Input || InputBaseComponent;
@@ -22122,7 +21661,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   var _ClearIcon, _ArrowDropDownIcon;
   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", "slotProps", "value"];
-  const useUtilityClasses$1v = ownerState => {
+  const useUtilityClasses$1w = ownerState => {
     const {
       classes,
       disablePortal,
@@ -22545,7 +22084,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       popupOpen,
       size
     });
-    const classes = useUtilityClasses$1v(ownerState);
+    const classes = useUtilityClasses$1w(ownerState);
     let startAdornment;
     if (multiple && value.length > 0) {
       const getCustomizedTagProps = params => _extends({
@@ -22599,6 +22138,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         className: classes.option
       }), option, {
         selected: optionProps['aria-selected'],
+        index,
         inputValue
       });
     };
@@ -23123,7 +22663,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var avatarClasses$1 = avatarClasses;
 
   const _excluded$1M = ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"];
-  const useUtilityClasses$1u = ownerState => {
+  const useUtilityClasses$1v = ownerState => {
     const {
       classes,
       variant,
@@ -23265,7 +22805,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       component,
       variant
     });
-    const classes = useUtilityClasses$1u(ownerState);
+    const classes = useUtilityClasses$1v(ownerState);
     if (hasImgNotFailing) {
       children = /*#__PURE__*/jsxRuntime_1(AvatarImg, _extends({
         alt: alt,
@@ -23362,7 +22902,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     small: -16,
     medium: null
   };
-  const useUtilityClasses$1t = ownerState => {
+  const useUtilityClasses$1u = ownerState => {
     const {
       classes
     } = ownerState;
@@ -23431,7 +22971,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       component,
       variant
     });
-    const classes = useUtilityClasses$1t(ownerState);
+    const classes = useUtilityClasses$1u(ownerState);
     const children = React__namespace.Children.toArray(childrenProp).filter(child => {
       {
         if (reactIs_2(child)) {
@@ -23754,7 +23294,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var backdropClasses$1 = backdropClasses;
 
   const _excluded$1J = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "slotProps", "slots", "transitionDuration", "TransitionComponent"];
-  const useUtilityClasses$1s = ownerState => {
+  const useUtilityClasses$1t = ownerState => {
     const {
       classes,
       invisible
@@ -23814,7 +23354,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       component,
       invisible
     });
-    const classes = useUtilityClasses$1s(ownerState);
+    const classes = useUtilityClasses$1t(ownerState);
     const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
     return /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
       in: open,
@@ -23940,7 +23480,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const _excluded$1I = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
   const RADIUS_STANDARD = 10;
   const RADIUS_DOT = 4;
-  const useUtilityClasses$1r = ownerState => {
+  const useUtilityClasses$1s = ownerState => {
     const {
       color,
       anchorOrigin,
@@ -24128,7 +23668,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       overlap,
       variant
     });
-    const classes = useUtilityClasses$1r(ownerState);
+    const classes = useUtilityClasses$1s(ownerState);
     let displayValue;
     if (variant !== 'dot') {
       displayValue = badgeContentProp && Number(badgeContentProp) > max ? `${max}+` : badgeContentProp;
@@ -24299,7 +23839,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var bottomNavigationClasses$1 = bottomNavigationClasses;
 
   const _excluded$1H = ["children", "className", "component", "onChange", "showLabels", "value"];
-  const useUtilityClasses$1q = ownerState => {
+  const useUtilityClasses$1r = ownerState => {
     const {
       classes
     } = ownerState;
@@ -24338,7 +23878,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       component,
       showLabels
     });
-    const classes = useUtilityClasses$1q(ownerState);
+    const classes = useUtilityClasses$1r(ownerState);
     return /*#__PURE__*/jsxRuntime_1(BottomNavigationRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -24417,7 +23957,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var bottomNavigationActionClasses$1 = bottomNavigationActionClasses;
 
   const _excluded$1G = ["className", "icon", "label", "onChange", "onClick", "selected", "showLabel", "value"];
-  const useUtilityClasses$1p = ownerState => {
+  const useUtilityClasses$1q = ownerState => {
     const {
       classes,
       showLabel,
@@ -24496,7 +24036,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$1G);
     const ownerState = props;
-    const classes = useUtilityClasses$1p(ownerState);
+    const classes = useUtilityClasses$1q(ownerState);
     const handleChange = event => {
       if (onChange) {
         onChange(event, value);
@@ -24665,7 +24205,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var breadcrumbsClasses$1 = breadcrumbsClasses;
 
   const _excluded$1F = ["children", "className", "component", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
-  const useUtilityClasses$1o = ownerState => {
+  const useUtilityClasses$1p = ownerState => {
     const {
       classes
     } = ownerState;
@@ -24749,7 +24289,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       maxItems,
       separator
     });
-    const classes = useUtilityClasses$1o(ownerState);
+    const classes = useUtilityClasses$1p(ownerState);
     const listRef = React__namespace.useRef(null);
     const renderItemsBeforeAndAfter = allItems => {
       const handleClickExpand = () => {
@@ -24878,7 +24418,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var ButtonGroupContext$1 = ButtonGroupContext;
 
   const _excluded$1E = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
-  const useUtilityClasses$1n = ownerState => {
+  const useUtilityClasses$1o = ownerState => {
     const {
       color,
       disableElevation,
@@ -25115,7 +24655,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       type,
       variant
     });
-    const classes = useUtilityClasses$1n(ownerState);
+    const classes = useUtilityClasses$1o(ownerState);
     const startIcon = startIconProp && /*#__PURE__*/jsxRuntime_1(ButtonStartIcon, {
       className: classes.startIcon,
       ownerState: ownerState,
@@ -25259,7 +24799,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       [`& .${buttonGroupClasses$1.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.color)}`]
     }, styles.root, styles[ownerState.variant], ownerState.disableElevation === true && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.orientation === 'vertical' && styles.vertical];
   };
-  const useUtilityClasses$1m = ownerState => {
+  const useUtilityClasses$1n = ownerState => {
     const {
       classes,
       color,
@@ -25381,7 +24921,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size,
       variant
     });
-    const classes = useUtilityClasses$1m(ownerState);
+    const classes = useUtilityClasses$1n(ownerState);
     const context = React__namespace.useMemo(() => ({
       className: classes.grouped,
       color,
@@ -25490,7 +25030,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var cardClasses$1 = cardClasses;
 
   const _excluded$1C = ["className", "raised"];
-  const useUtilityClasses$1l = ownerState => {
+  const useUtilityClasses$1m = ownerState => {
     const {
       classes
     } = ownerState;
@@ -25521,7 +25061,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       raised
     });
-    const classes = useUtilityClasses$1l(ownerState);
+    const classes = useUtilityClasses$1m(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardRoot, _extends({
       className: clsx(classes.root, className),
       elevation: raised ? 8 : undefined,
@@ -25570,7 +25110,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var cardActionAreaClasses$1 = cardActionAreaClasses;
 
   const _excluded$1B = ["children", "className", "focusVisibleClassName"];
-  const useUtilityClasses$1k = ownerState => {
+  const useUtilityClasses$1l = ownerState => {
     const {
       classes
     } = ownerState;
@@ -25633,7 +25173,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$1B);
     const ownerState = props;
-    const classes = useUtilityClasses$1k(ownerState);
+    const classes = useUtilityClasses$1l(ownerState);
     return /*#__PURE__*/jsxRuntime_2(CardActionAreaRoot, _extends({
       className: clsx(classes.root, className),
       focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible),
@@ -25681,7 +25221,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var cardActionsClasses$1 = cardActionsClasses;
 
   const _excluded$1A = ["disableSpacing", "className"];
-  const useUtilityClasses$1j = ownerState => {
+  const useUtilityClasses$1k = ownerState => {
     const {
       classes,
       disableSpacing
@@ -25724,7 +25264,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       disableSpacing
     });
-    const classes = useUtilityClasses$1j(ownerState);
+    const classes = useUtilityClasses$1k(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardActionsRoot, _extends({
       className: clsx(classes.root, className),
       ownerState: ownerState,
@@ -25767,7 +25307,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var cardContentClasses$1 = cardContentClasses;
 
   const _excluded$1z = ["className", "component"];
-  const useUtilityClasses$1i = ownerState => {
+  const useUtilityClasses$1j = ownerState => {
     const {
       classes
     } = ownerState;
@@ -25801,7 +25341,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       component
     });
-    const classes = useUtilityClasses$1i(ownerState);
+    const classes = useUtilityClasses$1j(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardContentRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -25845,7 +25385,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var cardHeaderClasses$1 = cardHeaderClasses;
 
   const _excluded$1y = ["action", "avatar", "className", "component", "disableTypography", "subheader", "subheaderTypographyProps", "title", "titleTypographyProps"];
-  const useUtilityClasses$1h = ownerState => {
+  const useUtilityClasses$1i = ownerState => {
     const {
       classes
     } = ownerState;
@@ -25919,7 +25459,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       component,
       disableTypography
     });
-    const classes = useUtilityClasses$1h(ownerState);
+    const classes = useUtilityClasses$1i(ownerState);
     let title = titleProp;
     if (title != null && title.type !== Typography$1 && !disableTypography) {
       title = /*#__PURE__*/jsxRuntime_1(Typography$1, _extends({
@@ -26034,7 +25574,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var cardMediaClasses$1 = cardMediaClasses;
 
   const _excluded$1x = ["children", "className", "component", "image", "src", "style"];
-  const useUtilityClasses$1g = ownerState => {
+  const useUtilityClasses$1h = ownerState => {
     const {
       classes,
       isMediaComponent,
@@ -26096,7 +25636,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       isMediaComponent,
       isImageComponent: IMAGE_COMPONENTS.indexOf(component) !== -1
     });
-    const classes = useUtilityClasses$1g(ownerState);
+    const classes = useUtilityClasses$1h(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardMediaRoot, _extends({
       className: clsx(classes.root, className),
       as: component,
@@ -26165,7 +25705,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   generateUtilityClasses('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
 
   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$1f = ownerState => {
+  const useUtilityClasses$1g = ownerState => {
     const {
       classes,
       checked,
@@ -26277,7 +25817,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableFocusRipple,
       edge
     });
-    const classes = useUtilityClasses$1f(ownerState);
+    const classes = useUtilityClasses$1g(ownerState);
     return /*#__PURE__*/jsxRuntime_2(SwitchBaseRoot, _extends({
       component: "span",
       className: clsx(classes.root, className),
@@ -26439,7 +25979,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var checkboxClasses$1 = checkboxClasses;
 
   const _excluded$1v = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
-  const useUtilityClasses$1e = ownerState => {
+  const useUtilityClasses$1f = ownerState => {
     const {
       classes,
       indeterminate,
@@ -26509,7 +26049,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       indeterminate,
       size
     });
-    const classes = useUtilityClasses$1e(ownerState);
+    const classes = useUtilityClasses$1f(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CheckboxRoot, _extends({
       type: "checkbox",
       inputProps: _extends({
@@ -26666,7 +26206,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     stroke-dashoffset: -125px;
   }
 `));
-  const useUtilityClasses$1d = ownerState => {
+  const useUtilityClasses$1e = ownerState => {
     const {
       classes,
       variant,
@@ -26768,7 +26308,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       value,
       variant
     });
-    const classes = useUtilityClasses$1d(ownerState);
+    const classes = useUtilityClasses$1e(ownerState);
     const circleStyle = {};
     const rootStyle = {};
     const rootProps = {};
@@ -27068,7 +26608,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1t = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
   const modalClasses = modalUnstyledClasses$1;
-  const extendUtilityClasses$1 = ownerState => {
+  const extendUtilityClasses = ownerState => {
     return ownerState.classes;
   };
   const ModalRoot = styled$1('div', {
@@ -27159,7 +26699,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, commonProps, {
       exited
     });
-    const classes = extendUtilityClasses$1(ownerState);
+    const classes = extendUtilityClasses(ownerState);
     const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : ModalRoot;
     const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
     const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
@@ -27374,7 +26914,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     // Improve scrollable dialog support.
     zIndex: -1
   });
-  const useUtilityClasses$1c = ownerState => {
+  const useUtilityClasses$1d = ownerState => {
     const {
       classes,
       scroll,
@@ -27535,7 +27075,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       maxWidth,
       scroll
     });
-    const classes = useUtilityClasses$1c(ownerState);
+    const classes = useUtilityClasses$1d(ownerState);
     const backdropClick = React__namespace.useRef();
     const handleMouseDown = event => {
       // We don't want to close the dialog when clicking the dialog content.
@@ -27745,7 +27285,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var dialogActionsClasses$1 = dialogActionsClasses;
 
   const _excluded$1r = ["className", "disableSpacing"];
-  const useUtilityClasses$1b = ownerState => {
+  const useUtilityClasses$1c = ownerState => {
     const {
       classes,
       disableSpacing
@@ -27790,7 +27330,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       disableSpacing
     });
-    const classes = useUtilityClasses$1b(ownerState);
+    const classes = useUtilityClasses$1c(ownerState);
     return /*#__PURE__*/jsxRuntime_1(DialogActionsRoot, _extends({
       className: clsx(classes.root, className),
       ownerState: ownerState,
@@ -27839,7 +27379,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var dialogTitleClasses$1 = dialogTitleClasses;
 
   const _excluded$1q = ["className", "dividers"];
-  const useUtilityClasses$1a = ownerState => {
+  const useUtilityClasses$1b = ownerState => {
     const {
       classes,
       dividers
@@ -27889,7 +27429,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       dividers
     });
-    const classes = useUtilityClasses$1a(ownerState);
+    const classes = useUtilityClasses$1b(ownerState);
     return /*#__PURE__*/jsxRuntime_1(DialogContentRoot, _extends({
       className: clsx(classes.root, className),
       ownerState: ownerState,
@@ -27932,7 +27472,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var dialogContentTextClasses$1 = dialogContentTextClasses;
 
   const _excluded$1p = ["children", "className"];
-  const useUtilityClasses$19 = ownerState => {
+  const useUtilityClasses$1a = ownerState => {
     const {
       classes
     } = ownerState;
@@ -27957,7 +27497,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         className
       } = props,
       ownerState = _objectWithoutPropertiesLoose(props, _excluded$1p);
-    const classes = useUtilityClasses$19(ownerState);
+    const classes = useUtilityClasses$1a(ownerState);
     return /*#__PURE__*/jsxRuntime_1(DialogContentTextRoot, _extends({
       component: "p",
       variant: "body1",
@@ -27994,7 +27534,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var DialogContentText$1 = DialogContentText;
 
   const _excluded$1o = ["className", "id"];
-  const useUtilityClasses$18 = ownerState => {
+  const useUtilityClasses$19 = ownerState => {
     const {
       classes
     } = ownerState;
@@ -28022,7 +27562,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$1o);
     const ownerState = props;
-    const classes = useUtilityClasses$18(ownerState);
+    const classes = useUtilityClasses$19(ownerState);
     const {
       titleId: id = idProp
     } = React__namespace.useContext(DialogContext$1);
@@ -28070,7 +27610,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var dividerClasses$1 = dividerClasses;
 
   const _excluded$1n = ["absolute", "children", "className", "component", "flexItem", "light", "orientation", "role", "textAlign", "variant"];
-  const useUtilityClasses$17 = ownerState => {
+  const useUtilityClasses$18 = ownerState => {
     const {
       absolute,
       children,
@@ -28223,7 +27763,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       textAlign,
       variant
     });
-    const classes = useUtilityClasses$17(ownerState);
+    const classes = useUtilityClasses$18(ownerState);
     return /*#__PURE__*/jsxRuntime_1(DividerRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -28628,7 +28168,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     } = props;
     return [styles.root, (ownerState.variant === 'permanent' || ownerState.variant === 'persistent') && styles.docked, styles.modal];
   };
-  const useUtilityClasses$16 = ownerState => {
+  const useUtilityClasses$17 = ownerState => {
     const {
       classes,
       anchor,
@@ -28778,7 +28318,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       open,
       variant
     }, other);
-    const classes = useUtilityClasses$16(ownerState);
+    const classes = useUtilityClasses$17(ownerState);
     const drawer = /*#__PURE__*/jsxRuntime_1(DrawerPaper, _extends({
       elevation: variant === 'temporary' ? elevation : 0,
       square: true
@@ -28922,7 +28462,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var fabClasses$1 = fabClasses;
 
   const _excluded$1k = ["children", "className", "color", "component", "disabled", "disableFocusRipple", "focusVisibleClassName", "size", "variant"];
-  const useUtilityClasses$15 = ownerState => {
+  const useUtilityClasses$16 = ownerState => {
     const {
       color,
       variant,
@@ -29053,7 +28593,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size,
       variant
     });
-    const classes = useUtilityClasses$15(ownerState);
+    const classes = useUtilityClasses$16(ownerState);
     return /*#__PURE__*/jsxRuntime_1(FabRoot, _extends({
       className: clsx(classes.root, className),
       component: component,
@@ -29138,7 +28678,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var Fab$1 = Fab;
 
   const _excluded$1j = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
-  const useUtilityClasses$14 = ownerState => {
+  const useUtilityClasses$15 = ownerState => {
     const {
       classes,
       disableUnderline
@@ -29217,12 +28757,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       [`&.${filledInputClasses$1.error}`]: {
         '&:before, &:after': {
           borderBottomColor: (theme.vars || theme).palette.error.main
-        },
-        '&:focus-within:after': {
-          transform: 'scaleX(1)' // error is always underlined in red
         }
       },
-
       '&:before': {
         borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
         left: 0,
@@ -29332,7 +28868,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       multiline,
       type
     });
-    const classes = useUtilityClasses$14(props);
+    const classes = useUtilityClasses$15(props);
     const filledInputComponentsProps = {
       root: {
         ownerState
@@ -29562,7 +29098,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var formControlClasses$1 = formControlClasses;
 
   const _excluded$1i = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
-  const useUtilityClasses$13 = ownerState => {
+  const useUtilityClasses$14 = ownerState => {
     const {
       classes,
       margin,
@@ -29660,7 +29196,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size,
       variant
     });
-    const classes = useUtilityClasses$13(ownerState);
+    const classes = useUtilityClasses$14(ownerState);
     const [adornedStart, setAdornedStart] = React__namespace.useState(() => {
       // We need to iterate through the children and find the Input in order
       // to fully support server-side rendering.
@@ -29843,7 +29379,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var formControlLabelClasses$1 = formControlLabelClasses;
 
   const _excluded$1h = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "slotProps", "value"];
-  const useUtilityClasses$12 = ownerState => {
+  const useUtilityClasses$13 = ownerState => {
     const {
       classes,
       disabled,
@@ -29949,7 +29485,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       labelPlacement,
       error: fcs.error
     });
-    const classes = useUtilityClasses$12(ownerState);
+    const classes = useUtilityClasses$13(ownerState);
     const typographySlotProps = (_slotProps$typography = slotProps.typography) != null ? _slotProps$typography : componentsProps.typography;
     let label = labelProp;
     if (label != null && label.type !== Typography$1 && !disableTypography) {
@@ -30053,7 +29589,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var formGroupClasses$1 = formGroupClasses;
 
   const _excluded$1g = ["className", "row"];
-  const useUtilityClasses$11 = ownerState => {
+  const useUtilityClasses$12 = ownerState => {
     const {
       classes,
       row,
@@ -30108,7 +29644,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       row,
       error: fcs.error
     });
-    const classes = useUtilityClasses$11(ownerState);
+    const classes = useUtilityClasses$12(ownerState);
     return /*#__PURE__*/jsxRuntime_1(FormGroupRoot, _extends({
       className: clsx(classes.root, className),
       ownerState: ownerState,
@@ -30152,7 +29688,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   var _span$3;
   const _excluded$1f = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
-  const useUtilityClasses$10 = ownerState => {
+  const useUtilityClasses$11 = ownerState => {
     const {
       classes,
       contained,
@@ -30228,7 +29764,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       focused: fcs.focused,
       required: fcs.required
     });
-    const classes = useUtilityClasses$10(ownerState);
+    const classes = useUtilityClasses$11(ownerState);
     return /*#__PURE__*/jsxRuntime_1(FormHelperTextRoot, _extends({
       as: component,
       ownerState: ownerState,
@@ -30309,7 +29845,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var formLabelClasses$1 = formLabelClasses;
 
   const _excluded$1e = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
-  const useUtilityClasses$$ = ownerState => {
+  const useUtilityClasses$10 = ownerState => {
     const {
       classes,
       color,
@@ -30389,7 +29925,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       focused: fcs.focused,
       required: fcs.required
     });
-    const classes = useUtilityClasses$$(ownerState);
+    const classes = useUtilityClasses$10(ownerState);
     return /*#__PURE__*/jsxRuntime_2(FormLabelRoot, _extends({
       as: component,
       ownerState: ownerState,
@@ -30795,7 +30331,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     return classes;
   }
-  const useUtilityClasses$_ = ownerState => {
+  const useUtilityClasses$$ = ownerState => {
     const {
       classes,
       container,
@@ -30874,7 +30410,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }, breakpointsValues, {
       breakpoints: breakpoints.keys
     });
-    const classes = useUtilityClasses$_(ownerState);
+    const classes = useUtilityClasses$$(ownerState);
     return /*#__PURE__*/jsxRuntime_1(GridContext$1.Provider, {
       value: columns,
       children: /*#__PURE__*/jsxRuntime_1(GridRoot, _extends({
@@ -31650,7 +31186,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   generateUtilityClasses('PrivateHiddenCss', ['root', 'xlDown', 'xlUp', 'onlyXl', 'lgDown', 'lgUp', 'onlyLg', 'mdDown', 'mdUp', 'onlyMd', 'smDown', 'smUp', 'onlySm', 'xsDown', 'xsUp', 'onlyXs']);
 
   const _excluded$1a = ["children", "className", "only"];
-  const useUtilityClasses$Z = ownerState => {
+  const useUtilityClasses$_ = ownerState => {
     const {
       classes,
       breakpoints
@@ -31749,7 +31285,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       breakpoints
     });
-    const classes = useUtilityClasses$Z(ownerState);
+    const classes = useUtilityClasses$_(ownerState);
     return /*#__PURE__*/jsxRuntime_1(HiddenCssRoot, {
       className: clsx(classes.root, className),
       ownerState: ownerState,
@@ -31949,7 +31485,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var iconClasses$1 = iconClasses;
 
   const _excluded$18 = ["baseClassName", "className", "color", "component", "fontSize"];
-  const useUtilityClasses$Y = ownerState => {
+  const useUtilityClasses$Z = ownerState => {
     const {
       color,
       fontSize,
@@ -32022,7 +31558,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       component: Component,
       fontSize
     });
-    const classes = useUtilityClasses$Y(ownerState);
+    const classes = useUtilityClasses$Z(ownerState);
     return /*#__PURE__*/jsxRuntime_1(IconRoot, _extends({
       as: Component,
       className: clsx(baseClassName,
@@ -32099,7 +31635,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var ImageListContext$1 = ImageListContext;
 
   const _excluded$17 = ["children", "className", "cols", "component", "rowHeight", "gap", "style", "variant"];
-  const useUtilityClasses$X = ownerState => {
+  const useUtilityClasses$Y = ownerState => {
     const {
       classes,
       variant
@@ -32174,7 +31710,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       rowHeight,
       variant
     });
-    const classes = useUtilityClasses$X(ownerState);
+    const classes = useUtilityClasses$Y(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ImageListRoot, _extends({
       as: component,
       className: clsx(classes.root, classes[variant], className),
@@ -32248,7 +31784,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var imageListItemClasses$1 = imageListItemClasses;
 
   const _excluded$16 = ["children", "className", "cols", "component", "rows", "style"];
-  const useUtilityClasses$W = ownerState => {
+  const useUtilityClasses$X = ownerState => {
     const {
       classes,
       variant
@@ -32331,7 +31867,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       rows,
       variant
     });
-    const classes = useUtilityClasses$W(ownerState);
+    const classes = useUtilityClasses$X(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ImageListItemRoot, _extends({
       as: component,
       className: clsx(classes.root, classes[variant], className),
@@ -32412,7 +31948,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var imageListItemBarClasses$1 = imageListItemBarClasses;
 
   const _excluded$15 = ["actionIcon", "actionPosition", "className", "subtitle", "title", "position"];
-  const useUtilityClasses$V = ownerState => {
+  const useUtilityClasses$W = ownerState => {
     const {
       classes,
       position,
@@ -32550,7 +32086,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       position,
       actionPosition
     });
-    const classes = useUtilityClasses$V(ownerState);
+    const classes = useUtilityClasses$W(ownerState);
     return /*#__PURE__*/jsxRuntime_2(ImageListItemBarRoot, _extends({
       ownerState: ownerState,
       className: clsx(classes.root, className),
@@ -32621,7 +32157,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var ImageListItemBar$1 = ImageListItemBar;
 
   const _excluded$14 = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
-  const useUtilityClasses$U = ownerState => {
+  const useUtilityClasses$V = ownerState => {
     const {
       classes,
       disableUnderline
@@ -32683,12 +32219,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       [`&.${inputClasses$1.error}`]: {
         '&:before, &:after': {
           borderBottomColor: (theme.vars || theme).palette.error.main
-        },
-        '&:focus-within:after': {
-          transform: 'scaleX(1)' // error is always underlined in red
         }
       },
-
       '&:before': {
         borderBottom: `1px solid ${bottomLineColor}`,
         left: 0,
@@ -32704,7 +32236,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       },
 
       [`&:hover:not(.${inputClasses$1.disabled}, .${inputClasses$1.error}):before`]: {
-        borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`,
+        borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           borderBottom: `1px solid ${bottomLineColor}`
@@ -32738,7 +32270,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         type = 'text'
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$14);
-    const classes = useUtilityClasses$U(props);
+    const classes = useUtilityClasses$V(props);
     const ownerState = {
       disableUnderline
     };
@@ -32968,7 +32500,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     } = props;
     return [styles.root, styles[`position${capitalize(ownerState.position)}`], ownerState.disablePointerEvents === true && styles.disablePointerEvents, styles[ownerState.variant]];
   };
-  const useUtilityClasses$T = ownerState => {
+  const useUtilityClasses$U = ownerState => {
     const {
       classes,
       disablePointerEvents,
@@ -33046,7 +32578,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       position,
       variant
     });
-    const classes = useUtilityClasses$T(ownerState);
+    const classes = useUtilityClasses$U(ownerState);
     return /*#__PURE__*/jsxRuntime_1(FormControlContext$1.Provider, {
       value: null,
       children: /*#__PURE__*/jsxRuntime_1(InputAdornmentRoot, _extends({
@@ -33124,7 +32656,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var inputLabelClasses$1 = inputLabelClasses;
 
   const _excluded$12 = ["disableAnimation", "margin", "shrink", "variant", "className"];
-  const useUtilityClasses$S = ownerState => {
+  const useUtilityClasses$T = ownerState => {
     const {
       classes,
       formControl,
@@ -33242,7 +32774,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant: fcs.variant,
       required: fcs.required
     });
-    const classes = useUtilityClasses$S(ownerState);
+    const classes = useUtilityClasses$T(ownerState);
     return /*#__PURE__*/jsxRuntime_1(InputLabelRoot, _extends({
       "data-shrink": shrink,
       ownerState: ownerState,
@@ -33384,7 +32916,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     background-position: -200px -23px;
   }
 `));
-  const useUtilityClasses$R = ownerState => {
+  const useUtilityClasses$S = ownerState => {
     const {
       classes,
       variant,
@@ -33566,7 +33098,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       color,
       variant
     });
-    const classes = useUtilityClasses$R(ownerState);
+    const classes = useUtilityClasses$S(ownerState);
     const theme = useTheme();
     const rootProps = {};
     const inlineStyles = {
@@ -33693,7 +33225,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var getTextDecoration$1 = getTextDecoration;
 
   const _excluded$10 = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
-  const useUtilityClasses$Q = ownerState => {
+  const useUtilityClasses$R = ownerState => {
     const {
       classes,
       component,
@@ -33815,7 +33347,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       underline,
       variant
     });
-    const classes = useUtilityClasses$Q(ownerState);
+    const classes = useUtilityClasses$R(ownerState);
     return /*#__PURE__*/jsxRuntime_1(LinkRoot, _extends({
       color: color,
       className: clsx(classes.root, className),
@@ -33903,7 +33435,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var listClasses$1 = listClasses;
 
   const _excluded$$ = ["children", "className", "component", "dense", "disablePadding", "subheader"];
-  const useUtilityClasses$P = ownerState => {
+  const useUtilityClasses$Q = ownerState => {
     const {
       classes,
       disablePadding,
@@ -33959,7 +33491,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       dense,
       disablePadding
     });
-    const classes = useUtilityClasses$P(ownerState);
+    const classes = useUtilityClasses$Q(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListContext$1.Provider, {
       value: context,
       children: /*#__PURE__*/jsxRuntime_2(ListRoot, _extends({
@@ -34036,7 +33568,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     } = props;
     return [styles.root, ownerState.dense && styles.dense, ownerState.alignItems === 'flex-start' && styles.alignItemsFlexStart, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters];
   };
-  const useUtilityClasses$O = ownerState => {
+  const useUtilityClasses$P = ownerState => {
     const {
       alignItems,
       classes,
@@ -34155,7 +33687,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       divider,
       selected
     });
-    const classes = useUtilityClasses$O(ownerState);
+    const classes = useUtilityClasses$P(ownerState);
     const handleRef = useForkRef(listItemRef, ref);
     return /*#__PURE__*/jsxRuntime_1(ListContext$1.Provider, {
       value: childContext,
@@ -34259,7 +33791,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var listItemSecondaryActionClasses$1 = listItemSecondaryActionClasses;
 
   const _excluded$Z = ["className"];
-  const useUtilityClasses$N = ownerState => {
+  const useUtilityClasses$O = ownerState => {
     const {
       disableGutters,
       classes
@@ -34305,7 +33837,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       disableGutters: context.disableGutters
     });
-    const classes = useUtilityClasses$N(ownerState);
+    const classes = useUtilityClasses$O(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListItemSecondaryActionRoot, _extends({
       className: clsx(classes.root, className),
       ownerState: ownerState,
@@ -34345,7 +33877,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     } = props;
     return [styles.root, ownerState.dense && styles.dense, ownerState.alignItems === 'flex-start' && styles.alignItemsFlexStart, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters, !ownerState.disablePadding && styles.padding, ownerState.button && styles.button, ownerState.hasSecondaryAction && styles.secondaryAction];
   };
-  const useUtilityClasses$M = ownerState => {
+  const useUtilityClasses$N = ownerState => {
     const {
       alignItems,
       button,
@@ -34513,7 +34045,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       hasSecondaryAction,
       selected
     });
-    const classes = useUtilityClasses$M(ownerState);
+    const classes = useUtilityClasses$N(ownerState);
     const handleRef = useForkRef(listItemRef, ref);
     const Root = slots.root || components.Root || ListItemRoot;
     const rootProps = slotProps.root || componentsProps.root || {};
@@ -34743,7 +34275,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var listItemAvatarClasses$1 = listItemAvatarClasses;
 
   const _excluded$X = ["className"];
-  const useUtilityClasses$L = ownerState => {
+  const useUtilityClasses$M = ownerState => {
     const {
       alignItems,
       classes
@@ -34787,7 +34319,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       alignItems: context.alignItems
     });
-    const classes = useUtilityClasses$L(ownerState);
+    const classes = useUtilityClasses$M(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListItemAvatarRoot, _extends({
       className: clsx(classes.root, className),
       ownerState: ownerState,
@@ -34825,7 +34357,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var listItemIconClasses$1 = listItemIconClasses;
 
   const _excluded$W = ["className"];
-  const useUtilityClasses$K = ownerState => {
+  const useUtilityClasses$L = ownerState => {
     const {
       alignItems,
       classes
@@ -34872,7 +34404,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       alignItems: context.alignItems
     });
-    const classes = useUtilityClasses$K(ownerState);
+    const classes = useUtilityClasses$L(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListItemIconRoot, _extends({
       className: clsx(classes.root, className),
       ownerState: ownerState,
@@ -34911,7 +34443,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var listItemTextClasses$1 = listItemTextClasses;
 
   const _excluded$V = ["children", "className", "disableTypography", "inset", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps"];
-  const useUtilityClasses$J = ownerState => {
+  const useUtilityClasses$K = ownerState => {
     const {
       classes,
       inset,
@@ -34980,7 +34512,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       secondary: !!secondary,
       dense
     });
-    const classes = useUtilityClasses$J(ownerState);
+    const classes = useUtilityClasses$K(ownerState);
     if (primary != null && primary.type !== Typography$1 && !disableTypography) {
       primary = /*#__PURE__*/jsxRuntime_1(Typography$1, _extends({
         variant: dense ? 'body2' : 'body1',
@@ -35357,7 +34889,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function resolveAnchorEl(anchorEl) {
     return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
   }
-  const useUtilityClasses$I = ownerState => {
+  const useUtilityClasses$J = ownerState => {
     const {
       classes
     } = ownerState;
@@ -35435,7 +34967,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       transitionDuration: transitionDurationProp,
       TransitionProps
     });
-    const classes = useUtilityClasses$I(ownerState);
+    const classes = useUtilityClasses$J(ownerState);
 
     // Returns the top/left offset of the position
     // to attach to on the anchor element (or body if none is provided)
@@ -35792,7 +35324,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     vertical: 'top',
     horizontal: 'left'
   };
-  const useUtilityClasses$H = ownerState => {
+  const useUtilityClasses$I = ownerState => {
     const {
       classes
     } = ownerState;
@@ -35863,7 +35395,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       TransitionProps,
       variant
     });
-    const classes = useUtilityClasses$H(ownerState);
+    const classes = useUtilityClasses$I(ownerState);
     const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
     const menuListActionsRef = React__namespace.useRef(null);
     const handleEntering = (element, isAppearing) => {
@@ -36043,7 +35575,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     } = props;
     return [styles.root, ownerState.dense && styles.dense, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters];
   };
-  const useUtilityClasses$G = ownerState => {
+  const useUtilityClasses$H = ownerState => {
     const {
       disabled,
       dense,
@@ -36179,7 +35711,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       divider,
       disableGutters
     });
-    const classes = useUtilityClasses$G(props);
+    const classes = useUtilityClasses$H(props);
     const handleRef = useForkRef(menuItemRef, ref);
     let tabIndex;
     if (!props.disabled) {
@@ -36262,7 +35794,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     role: PropTypes /* @typescript-to-proptypes-ignore */.string,
     /**
-     * @ignore
+     * If `true`, the component is selected.
+     * @default false
      */
     selected: PropTypes.bool,
     /**
@@ -36283,7 +35816,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var mobileStepperClasses$1 = mobileStepperClasses;
 
   const _excluded$Q = ["activeStep", "backButton", "className", "LinearProgressProps", "nextButton", "position", "steps", "variant"];
-  const useUtilityClasses$F = ownerState => {
+  const useUtilityClasses$G = ownerState => {
     const {
       classes,
       position
@@ -36395,7 +35928,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       position,
       variant
     });
-    const classes = useUtilityClasses$F(ownerState);
+    const classes = useUtilityClasses$G(ownerState);
     return /*#__PURE__*/jsxRuntime_2(MobileStepperRoot, _extends({
       square: true,
       elevation: 0,
@@ -36480,7 +36013,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var nativeSelectClasses$1 = nativeSelectClasses;
 
   const _excluded$P = ["className", "disabled", "IconComponent", "inputRef", "variant"];
-  const useUtilityClasses$E = ownerState => {
+  const useUtilityClasses$F = ownerState => {
     const {
       classes,
       variant,
@@ -36611,7 +36144,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disabled,
       variant
     });
-    const classes = useUtilityClasses$E(ownerState);
+    const classes = useUtilityClasses$F(ownerState);
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
       children: [/*#__PURE__*/jsxRuntime_1(NativeSelectSelect, _extends({
         ownerState: ownerState,
@@ -36681,7 +36214,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$O = ["className", "children", "classes", "IconComponent", "input", "inputProps", "variant"],
     _excluded2$4 = ["root"];
-  const useUtilityClasses$D = ownerState => {
+  const useUtilityClasses$E = ownerState => {
     const {
       classes
     } = ownerState;
@@ -36717,7 +36250,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       classes: classesProp
     });
-    const classes = useUtilityClasses$D(ownerState);
+    const classes = useUtilityClasses$E(ownerState);
     const otherClasses = _objectWithoutPropertiesLoose(classesProp, _excluded2$4);
     return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
       children: /*#__PURE__*/React__namespace.cloneElement(input, _extends({
@@ -36919,7 +36452,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
 
   const _excluded$M = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
-  const useUtilityClasses$C = ownerState => {
+  const useUtilityClasses$D = ownerState => {
     const {
       classes
     } = ownerState;
@@ -37038,7 +36571,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         type = 'text'
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$M);
-    const classes = useUtilityClasses$C(props);
+    const classes = useUtilityClasses$D(props);
     const muiFormControl = useFormControl();
     const fcs = formControlState({
       props,
@@ -37398,7 +36931,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     } = props;
     return [styles.root, styles[ownerState.variant], styles[`size${capitalize(ownerState.size)}`], ownerState.variant === 'text' && styles[`text${capitalize(ownerState.color)}`], ownerState.variant === 'outlined' && styles[`outlined${capitalize(ownerState.color)}`], ownerState.shape === 'rounded' && styles.rounded, ownerState.type === 'page' && styles.page, (ownerState.type === 'start-ellipsis' || ownerState.type === 'end-ellipsis') && styles.ellipsis, (ownerState.type === 'previous' || ownerState.type === 'next') && styles.previousNext, (ownerState.type === 'first' || ownerState.type === 'last') && styles.firstLast];
   };
-  const useUtilityClasses$B = ownerState => {
+  const useUtilityClasses$C = ownerState => {
     const {
       classes,
       color,
@@ -37607,7 +37140,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
     const theme = useTheme();
-    const classes = useUtilityClasses$B(ownerState);
+    const classes = useUtilityClasses$C(ownerState);
     const normalizedIcons = theme.direction === 'rtl' ? {
       previous: slots.next || components.next || NavigateNextIcon,
       next: slots.previous || components.previous || NavigateBeforeIcon,
@@ -37737,7 +37270,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var PaginationItem$1 = PaginationItem;
 
   const _excluded$J = ["boundaryCount", "className", "color", "count", "defaultPage", "disabled", "getItemAriaLabel", "hideNextButton", "hidePrevButton", "onChange", "page", "renderItem", "shape", "showFirstButton", "showLastButton", "siblingCount", "size", "variant"];
-  const useUtilityClasses$A = ownerState => {
+  const useUtilityClasses$B = ownerState => {
     const {
       classes,
       variant
@@ -37822,7 +37355,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size,
       variant
     });
-    const classes = useUtilityClasses$A(ownerState);
+    const classes = useUtilityClasses$B(ownerState);
     return /*#__PURE__*/jsxRuntime_1(PaginationRoot, _extends({
       "aria-label": "pagination navigation",
       className: clsx(classes.root, className),
@@ -38061,7 +37594,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var radioClasses$1 = radioClasses;
 
   const _excluded$I = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
-  const useUtilityClasses$z = ownerState => {
+  const useUtilityClasses$A = ownerState => {
     const {
       classes,
       color
@@ -38136,7 +37669,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       color,
       size
     });
-    const classes = useUtilityClasses$z(ownerState);
+    const classes = useUtilityClasses$A(ownerState);
     const radioGroup = useRadioGroup();
     let checked = checkedProp;
     const onChange = createChainedFunction(onChangeProp, radioGroup && radioGroup.onChange);
@@ -38374,7 +37907,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const nearest = Math.round(value / precision) * precision;
     return Number(nearest.toFixed(getDecimalPrecision(precision)));
   }
-  const useUtilityClasses$y = ownerState => {
+  const useUtilityClasses$z = ownerState => {
     const {
       classes,
       size,
@@ -38777,7 +38310,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       readOnly,
       size
     });
-    const classes = useUtilityClasses$y(ownerState);
+    const classes = useUtilityClasses$z(ownerState);
     return /*#__PURE__*/jsxRuntime_2(RatingRoot, _extends({
       ref: handleRef,
       onMouseMove: handleMouseMove,
@@ -38989,7 +38522,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var scopedCssBaselineClasses$1 = scopedCssBaselineClasses;
 
   const _excluded$F = ["className", "component", "enableColorScheme"];
-  const useUtilityClasses$x = ownerState => {
+  const useUtilityClasses$y = ownerState => {
     const {
       classes
     } = ownerState;
@@ -39037,7 +38570,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       component
     });
-    const classes = useUtilityClasses$x(ownerState);
+    const classes = useUtilityClasses$y(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ScopedCssBaselineRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -39152,7 +38685,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function isEmpty(display) {
     return display == null || typeof display === 'string' && !display.trim();
   }
-  const useUtilityClasses$w = ownerState => {
+  const useUtilityClasses$x = ownerState => {
     const {
       classes,
       variant,
@@ -39510,7 +39043,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       value,
       open
     });
-    const classes = useUtilityClasses$w(ownerState);
+    const classes = useUtilityClasses$x(ownerState);
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
       children: [/*#__PURE__*/jsxRuntime_1(SelectSelect, _extends({
         ref: handleDisplayRef,
@@ -39725,7 +39258,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   var _StyledInput, _StyledFilledInput;
   const _excluded$D = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
-  const useUtilityClasses$v = ownerState => {
+  const useUtilityClasses$w = ownerState => {
     const {
       classes
     } = ownerState;
@@ -39788,7 +39321,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant,
       classes: classesProp
     });
-    const classes = useUtilityClasses$v(ownerState);
+    const classes = useUtilityClasses$w(ownerState);
     const inputComponentRef = useForkRef(ref, InputComponent.ref);
     return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
       children: /*#__PURE__*/React__namespace.cloneElement(InputComponent, _extends({
@@ -39992,7 +39525,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     _t2,
     _t3,
     _t4;
-  const useUtilityClasses$u = ownerState => {
+  const useUtilityClasses$v = ownerState => {
     const {
       classes,
       variant,
@@ -40128,7 +39661,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant,
       hasChildren: Boolean(other.children)
     });
-    const classes = useUtilityClasses$u(ownerState);
+    const classes = useUtilityClasses$v(ownerState);
     return /*#__PURE__*/jsxRuntime_1(SkeletonRoot, _extends({
       as: component,
       ref: ref,
@@ -40195,8 +39728,58 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var Skeleton$1 = Skeleton;
 
-  const _excluded$B = ["component", "components", "componentsProps", "color", "size", "slotProps", "slots"];
   const sliderClasses = _extends({}, sliderUnstyledClasses$1, generateUtilityClasses('MuiSlider', ['colorPrimary', 'colorSecondary', 'thumbColorPrimary', 'thumbColorSecondary', 'sizeSmall', 'thumbSizeSmall']));
+  var sliderClasses$1 = sliderClasses;
+
+  const useValueLabelClasses = props => {
+    const {
+      open
+    } = props;
+    const utilityClasses = {
+      offset: clsx(open && sliderClasses$1.valueLabelOpen),
+      circle: sliderClasses$1.valueLabelCircle,
+      label: sliderClasses$1.valueLabelLabel
+    };
+    return utilityClasses;
+  };
+
+  /**
+   * @ignore - internal component.
+   */
+  function SliderValueLabel$1(props) {
+    const {
+      children,
+      className,
+      value
+    } = props;
+    const classes = useValueLabelClasses(props);
+    return /*#__PURE__*/React__namespace.cloneElement(children, {
+      className: clsx(children.props.className)
+    }, /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
+      children: [children.props.children, /*#__PURE__*/jsxRuntime_1("span", {
+        className: clsx(classes.offset, className),
+        "aria-hidden": true,
+        children: /*#__PURE__*/jsxRuntime_1("span", {
+          className: classes.circle,
+          children: /*#__PURE__*/jsxRuntime_1("span", {
+            className: classes.label,
+            children: value
+          })
+        })
+      })]
+    }));
+  }
+  SliderValueLabel$1.propTypes = {
+    children: PropTypes.element.isRequired,
+    className: PropTypes.string,
+    value: PropTypes.node
+  } ;
+
+  const _excluded$B = ["aria-label", "aria-valuetext", "aria-labelledby", "component", "components", "componentsProps", "color", "classes", "className", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "size", "step", "scale", "slotProps", "slots", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat"];
+  const valueToPercent = (value, min, max) => (value - min) * 100 / (max - min);
+  function Identity(x) {
+    return x;
+  }
   const SliderRoot = styled$1('span', {
     name: 'MuiSlider',
     slot: 'Root',
@@ -40248,13 +39831,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     '@media print': {
       colorAdjust: 'exact'
     },
-    [`&.${sliderClasses.disabled}`]: {
+    [`&.${sliderClasses$1.disabled}`]: {
       pointerEvents: 'none',
       cursor: 'default',
       color: (theme.vars || theme).palette.grey[400]
     },
-    [`&.${sliderClasses.dragging}`]: {
-      [`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: {
+    [`&.${sliderClasses$1.dragging}`]: {
+      [`& .${sliderClasses$1.thumb}, & .${sliderClasses$1.track}`]: {
         transition: 'none'
       }
     }
@@ -40408,16 +39991,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       left: '50%',
       transform: 'translate(-50%, -50%)'
     },
-    [`&:hover, &.${sliderClasses.focusVisible}`]: {
+    [`&:hover, &.${sliderClasses$1.focusVisible}`]: {
       boxShadow: `0px 0px 0px 8px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : alpha(theme.palette[ownerState.color].main, 0.16)}`,
       '@media (hover: none)': {
         boxShadow: 'none'
       }
     },
-    [`&.${sliderClasses.active}`]: {
+    [`&.${sliderClasses$1.active}`]: {
       boxShadow: `0px 0px 0px 14px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : alpha(theme.palette[ownerState.color].main, 0.16)}`
     },
-    [`&.${sliderClasses.disabled}`]: {
+    [`&.${sliderClasses$1.disabled}`]: {
       '&:hover': {
         boxShadow: 'none'
       }
@@ -40433,7 +40016,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     children: PropTypes.node
   } ;
-  const SliderValueLabel = styled$1(SliderValueLabelUnstyled, {
+  const SliderValueLabel = styled$1(SliderValueLabel$1, {
     name: 'MuiSlider',
     slot: 'ValueLabel',
     overridesResolver: (props, styles) => styles.valueLabel
@@ -40441,7 +40024,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => _extends({
-    [`&.${sliderClasses.valueLabelOpen}`]: {
+    [`&.${sliderClasses$1.valueLabelOpen}`]: {
       transform: 'translateY(-100%) scale(1)'
     },
     zIndex: 1,
@@ -40579,19 +40162,38 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     children: PropTypes.node
   } ;
-  const extendUtilityClasses = ownerState => {
+  const useUtilityClasses$u = ownerState => {
     const {
+      disabled,
+      dragging,
+      marked,
+      orientation,
+      track,
+      classes,
       color,
-      size,
-      classes = {}
+      size
     } = ownerState;
-    return _extends({}, classes, {
-      root: clsx(classes.root, getSliderUtilityClass(`color${capitalize(color)}`), classes[`color${capitalize(color)}`], size && [getSliderUtilityClass(`size${capitalize(size)}`), classes[`size${capitalize(size)}`]]),
-      thumb: clsx(classes.thumb, getSliderUtilityClass(`thumbColor${capitalize(color)}`), classes[`thumbColor${capitalize(color)}`], size && [getSliderUtilityClass(`thumbSize${capitalize(size)}`), classes[`thumbSize${capitalize(size)}`]])
-    });
+    const slots = {
+      root: ['root', disabled && 'disabled', dragging && 'dragging', marked && 'marked', orientation === 'vertical' && 'vertical', track === 'inverted' && 'trackInverted', track === false && 'trackFalse', color && `color${capitalize(color)}`, size && `size${capitalize(size)}`],
+      rail: ['rail'],
+      track: ['track'],
+      mark: ['mark'],
+      markActive: ['markActive'],
+      markLabel: ['markLabel'],
+      markLabelActive: ['markLabelActive'],
+      valueLabel: ['valueLabel'],
+      thumb: ['thumb', disabled && 'disabled', size && `thumbSize${capitalize(size)}`, color && `thumbColor${capitalize(color)}`],
+      active: ['active'],
+      disabled: ['disabled'],
+      focusVisible: ['focusVisible']
+    };
+    return composeClasses(slots, getSliderUtilityClass, classes);
   };
+  const Forward = ({
+    children
+  }) => children;
   const Slider = /*#__PURE__*/React__namespace.forwardRef(function Slider(inputProps, ref) {
-    var _ref, _slots$root, _ref2, _slots$rail, _ref3, _slots$track, _ref4, _slots$thumb, _ref5, _slots$valueLabel, _ref6, _slots$mark, _ref7, _slots$markLabel, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
+    var _ref, _slots$root, _ref2, _slots$rail, _ref3, _slots$track, _ref4, _slots$thumb, _ref5, _slots$valueLabel, _ref6, _slots$mark, _ref7, _slots$markLabel, _ref8, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
     const props = useThemeProps({
       props: inputProps,
       name: 'MuiSlider'
@@ -40599,21 +40201,74 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const theme = useTheme();
     const isRtl = theme.direction === 'rtl';
     const {
+        'aria-label': ariaLabel,
+        'aria-valuetext': ariaValuetext,
+        'aria-labelledby': ariaLabelledby,
         // eslint-disable-next-line react/prop-types
         component = 'span',
         components = {},
         componentsProps = {},
         color = 'primary',
+        classes: classesProp,
+        // eslint-disable-next-line react/prop-types
+        className,
+        disableSwap = false,
+        disabled = false,
+        getAriaLabel,
+        getAriaValueText,
+        marks: marksProp = false,
+        max = 100,
+        min = 0,
+        orientation = 'horizontal',
         size = 'medium',
+        step = 1,
+        scale = Identity,
         slotProps,
-        slots
+        slots,
+        track = 'normal',
+        valueLabelDisplay = 'off',
+        valueLabelFormat = Identity
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$B);
     const ownerState = _extends({}, props, {
+      isRtl,
+      max,
+      min,
+      classes: classesProp,
+      disabled,
+      disableSwap,
+      orientation,
+      marks: marksProp,
       color,
-      size
+      size,
+      step,
+      scale,
+      track,
+      valueLabelDisplay,
+      valueLabelFormat
     });
-    const classes = extendUtilityClasses(ownerState);
+    const {
+      axisProps,
+      getRootProps,
+      getHiddenInputProps,
+      getThumbProps,
+      open,
+      active,
+      axis,
+      focusedThumbIndex,
+      range,
+      dragging,
+      marks,
+      values,
+      trackOffset,
+      trackLeap
+    } = useSlider(_extends({}, ownerState, {
+      ref
+    }));
+    ownerState.marked = marks.length > 0 && marks.some(mark => mark.label);
+    ownerState.dragging = dragging;
+    ownerState.focusedThumbIndex = focusedThumbIndex;
+    const classes = useUtilityClasses$u(ownerState);
 
     // 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 : SliderRoot;
@@ -40623,7 +40278,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ValueLabelSlot = (_ref5 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref5 : SliderValueLabel;
     const MarkSlot = (_ref6 = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : components.Mark) != null ? _ref6 : SliderMark;
     const MarkLabelSlot = (_ref7 = (_slots$markLabel = slots == null ? void 0 : slots.markLabel) != null ? _slots$markLabel : components.MarkLabel) != null ? _ref7 : SliderMarkLabel;
-    const InputSlot = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input;
+    const InputSlot = (_ref8 = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input) != null ? _ref8 : 'input';
     const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
     const railSlotProps = (_slotProps$rail = slotProps == null ? void 0 : slotProps.rail) != null ? _slotProps$rail : componentsProps.rail;
     const trackSlotProps = (_slotProps$track = slotProps == null ? void 0 : slotProps.track) != null ? _slotProps$track : componentsProps.track;
@@ -40632,51 +40287,123 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const markSlotProps = (_slotProps$mark = slotProps == null ? void 0 : slotProps.mark) != null ? _slotProps$mark : componentsProps.mark;
     const markLabelSlotProps = (_slotProps$markLabel = slotProps == null ? void 0 : slotProps.markLabel) != null ? _slotProps$markLabel : componentsProps.markLabel;
     const inputSlotProps = (_slotProps$input = slotProps == null ? void 0 : slotProps.input) != null ? _slotProps$input : componentsProps.input;
-    return /*#__PURE__*/jsxRuntime_1(SliderUnstyled$1, _extends({}, other, {
-      isRtl: isRtl,
-      slots: {
-        root: RootSlot,
-        rail: RailSlot,
-        track: TrackSlot,
-        thumb: ThumbSlot,
-        valueLabel: ValueLabelSlot,
-        mark: MarkSlot,
-        markLabel: MarkLabelSlot,
-        input: InputSlot
-      },
-      slotProps: _extends({}, componentsProps, {
-        root: _extends({}, rootSlotProps, shouldSpreadAdditionalProps$1(RootSlot) && {
-          as: component,
-          ownerState: _extends({}, rootSlotProps == null ? void 0 : rootSlotProps.ownerState, {
-            color,
-            size
-          })
-        }),
-        rail: railSlotProps,
-        thumb: _extends({}, thumbSlotProps, shouldSpreadAdditionalProps$1(ThumbSlot) && {
-          ownerState: _extends({}, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState, {
-            color,
-            size
-          })
-        }),
-        track: _extends({}, trackSlotProps, shouldSpreadAdditionalProps$1(TrackSlot) && {
-          ownerState: _extends({}, trackSlotProps == null ? void 0 : trackSlotProps.ownerState, {
-            color,
-            size
-          })
-        }),
-        valueLabel: _extends({}, valueLabelSlotProps, shouldSpreadAdditionalProps$1(ValueLabelSlot) && {
-          ownerState: _extends({}, valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState, {
-            color,
-            size
-          })
-        }),
-        mark: markSlotProps,
-        markLabel: markLabelSlotProps,
-        input: inputSlotProps
+    const rootProps = useSlotProps({
+      elementType: RootSlot,
+      getSlotProps: getRootProps,
+      externalSlotProps: rootSlotProps,
+      externalForwardedProps: other,
+      additionalProps: _extends({}, shouldSpreadAdditionalProps$1(RootSlot) && {
+        as: component
       }),
-      classes: classes,
-      ref: ref
+      ownerState: _extends({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
+      className: [classes.root, className]
+    });
+    const railProps = useSlotProps({
+      elementType: RailSlot,
+      externalSlotProps: railSlotProps,
+      ownerState,
+      className: classes.rail
+    });
+    const trackProps = useSlotProps({
+      elementType: TrackSlot,
+      externalSlotProps: trackSlotProps,
+      additionalProps: {
+        style: _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
+      },
+      ownerState: _extends({}, ownerState, trackSlotProps == null ? void 0 : trackSlotProps.ownerState),
+      className: classes.track
+    });
+    const thumbProps = useSlotProps({
+      elementType: ThumbSlot,
+      getSlotProps: getThumbProps,
+      externalSlotProps: thumbSlotProps,
+      ownerState: _extends({}, ownerState, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState)
+    });
+    const valueLabelProps = useSlotProps({
+      elementType: ValueLabelSlot,
+      externalSlotProps: valueLabelSlotProps,
+      ownerState: _extends({}, ownerState, valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState),
+      className: classes.valueLabel
+    });
+    const markProps = useSlotProps({
+      elementType: MarkSlot,
+      externalSlotProps: markSlotProps,
+      ownerState,
+      className: classes.mark
+    });
+    const markLabelProps = useSlotProps({
+      elementType: MarkLabelSlot,
+      externalSlotProps: markLabelSlotProps,
+      ownerState
+    });
+    const inputSliderProps = useSlotProps({
+      elementType: InputSlot,
+      getSlotProps: getHiddenInputProps,
+      externalSlotProps: inputSlotProps,
+      ownerState
+    });
+    return /*#__PURE__*/jsxRuntime_2(RootSlot, _extends({}, rootProps, {
+      children: [/*#__PURE__*/jsxRuntime_1(RailSlot, _extends({}, railProps)), /*#__PURE__*/jsxRuntime_1(TrackSlot, _extends({}, trackProps)), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
+        const percent = valueToPercent(mark.value, min, max);
+        const style = axisProps[axis].offset(percent);
+        let markActive;
+        if (track === false) {
+          markActive = values.indexOf(mark.value) !== -1;
+        } else {
+          markActive = track === 'normal' && (range ? mark.value >= values[0] && mark.value <= values[values.length - 1] : mark.value <= values[0]) || track === 'inverted' && (range ? mark.value <= values[0] || mark.value >= values[values.length - 1] : mark.value >= values[0]);
+        }
+        return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime_1(MarkSlot, _extends({
+            "data-index": index
+          }, markProps, !isHostComponent(MarkSlot) && {
+            markActive
+          }, {
+            style: _extends({}, style, markProps.style),
+            className: clsx(markProps.className, markActive && classes.markActive)
+          })), mark.label != null ? /*#__PURE__*/jsxRuntime_1(MarkLabelSlot, _extends({
+            "aria-hidden": true,
+            "data-index": index
+          }, markLabelProps, !isHostComponent(MarkLabelSlot) && {
+            markLabelActive: markActive
+          }, {
+            style: _extends({}, style, markLabelProps.style),
+            className: clsx(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
+            children: mark.label
+          })) : null]
+        }, index);
+      }), values.map((value, index) => {
+        const percent = valueToPercent(value, min, max);
+        const style = axisProps[axis].offset(percent);
+        const ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabelSlot;
+        return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
+          children: /*#__PURE__*/jsxRuntime_1(ValueLabelComponent, _extends({}, !isHostComponent(ValueLabelComponent) && {
+            valueLabelFormat,
+            valueLabelDisplay,
+            value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
+            index,
+            open: open === index || active === index || valueLabelDisplay === 'on',
+            disabled
+          }, valueLabelProps, {
+            children: /*#__PURE__*/jsxRuntime_1(ThumbSlot, _extends({
+              "data-index": index,
+              "data-focusvisible": focusedThumbIndex === index
+            }, thumbProps, {
+              className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
+              style: _extends({}, style, {
+                pointerEvents: disableSwap && active !== index ? 'none' : undefined
+              }, thumbProps.style),
+              children: /*#__PURE__*/jsxRuntime_1(InputSlot, _extends({
+                "data-index": index,
+                "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
+                "aria-valuenow": scale(value),
+                "aria-labelledby": ariaLabelledby,
+                "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
+                value: values[index]
+              }, inputSliderProps))
+            }))
+          }))
+        }, index);
+      })]
     }));
   });
   Slider.propTypes /* remove-proptypes */ = {
@@ -40846,7 +40573,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     orientation: PropTypes.oneOf(['horizontal', 'vertical']),
     /**
      * A transformation function, to change the scale of the slider.
-     * @default (x) => x
+     * @param {any} x
+     * @returns {any}
+     * @default function Identity(x) {
+     *   return x;
+     * }
      */
     scale: PropTypes.func,
     /**
@@ -40937,7 +40668,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      *
      * - {number} value The value label's value to format
      * - {number} index The value label's index to format
-     * @default (x) => x
+     * @param {any} x
+     * @returns {any}
+     * @default function Identity(x) {
+     *   return x;
+     * }
      */
     valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
   } ;
@@ -42706,7 +42441,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }) => /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
           timeout: theme.transitions.duration.shorter
         }, TransitionPropsInner, transitionProps, {
-          "data-foo": "bar",
           children: /*#__PURE__*/jsxRuntime_2(TooltipComponent, _extends({}, tooltipProps, {
             children: [title, arrow ? /*#__PURE__*/jsxRuntime_1(ArrowComponent, _extends({}, tooltipArrowProps, {
               ref: setArrowRef
@@ -47772,7 +47506,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           }
           tabMeta = tab ? tab.getBoundingClientRect() : null;
           {
-            if (!warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0) {
+            if (!warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0 &&
+            // if the whole Tabs component is hidden, don't warn
+            tabsMeta.clientWidth !== 0) {
               tabsMeta = null;
               console.error(['MUI: The `value` provided to the Tabs component is invalid.', `The Tab with this \`value\` ("${value}") is not part of the document layout.`, "Make sure the tab item is present in the document or that it's not `display: none`."].join('\n'));
               warnedOnceTabPresent = true;
@@ -49476,7 +49212,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.setRef = setRef;
   exports.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
   exports.skeletonClasses = skeletonClasses$1;
-  exports.sliderClasses = sliderClasses;
+  exports.sliderClasses = sliderClasses$1;
   exports.snackbarClasses = snackbarClasses$1;
   exports.snackbarContentClasses = snackbarContentClasses$1;
   exports.speedDialActionClasses = speedDialActionClasses$1;