@mui/material 5.11.12 → 5.11.14

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.12
+ * @mui/material v5.11.14
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -2292,7 +2292,7 @@
     return output;
   }
 
-  function composeClasses(slots, getUtilityClass, classes) {
+  function composeClasses(slots, getUtilityClass, classes = undefined) {
     const output = {};
     Object.keys(slots).forEach(
     // `Objet.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
@@ -2300,7 +2300,10 @@
     slot => {
       output[slot] = slots[slot].reduce((acc, key) => {
         if (key) {
-          acc.push(getUtilityClass(key));
+          const utilityClass = getUtilityClass(key);
+          if (utilityClass !== '') {
+            acc.push(utilityClass);
+          }
           if (classes && classes[key]) {
             acc.push(classes[key]);
           }
@@ -6447,6 +6450,36 @@
   });
   compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
 
+  const createFontStyleFunction = prop => {
+    return props => {
+      if (props[prop] !== undefined && props[prop] !== null) {
+        const styleFromPropValue = propValue => {
+          var _props$theme$typograp;
+          // fetch the value directly defined in the theme, like fontWeightLight
+          let value = (_props$theme$typograp = props.theme.typography) == null ? void 0 : _props$theme$typograp[propValue];
+          if (typeof value === 'object') {
+            // typography variant was pulled, but these props can't be an object
+            value = null;
+          }
+          if (!value) {
+            var _props$theme$typograp2, _props$prop;
+            // fetch fontWeightLight when the value is 'light'
+            value = (_props$theme$typograp2 = props.theme.typography) == null ? void 0 : _props$theme$typograp2[`${prop}${props[prop] === 'default' || props[prop] === prop ? '' : capitalize((_props$prop = props[prop]) == null ? void 0 : _props$prop.toString())}`];
+          }
+          if (!value) {
+            var _props$theme$typograp3, _props$theme$typograp4, _props$theme$typograp5;
+            // fetch the value from the typography variant or default to the propValue
+            value = (_props$theme$typograp3 = (_props$theme$typograp4 = props.theme.typography) == null ? void 0 : (_props$theme$typograp5 = _props$theme$typograp4[propValue]) == null ? void 0 : _props$theme$typograp5[prop]) != null ? _props$theme$typograp3 : propValue;
+          }
+          return {
+            [prop]: value
+          };
+        };
+        return handleBreakpoints(props, props[prop], styleFromPropValue);
+      }
+      return null;
+    };
+  };
   const defaultSxConfig = {
     // borders
     border: {
@@ -6705,16 +6738,19 @@
     boxSizing: {},
     // typography
     fontFamily: {
-      themeKey: 'typography'
+      themeKey: 'typography',
+      style: createFontStyleFunction('fontFamily')
     },
     fontSize: {
-      themeKey: 'typography'
+      themeKey: 'typography',
+      style: createFontStyleFunction('fontSize')
     },
     fontStyle: {
       themeKey: 'typography'
     },
     fontWeight: {
-      themeKey: 'typography'
+      themeKey: 'typography',
+      style: createFontStyleFunction('fontWeight')
     },
     letterSpacing: {},
     textTransform: {},
@@ -6844,7 +6880,7 @@
   styleFunctionSx.filterProps = ['sx'];
   var styleFunctionSx$1 = styleFunctionSx;
 
-  const _excluded$2n = ["sx"];
+  const _excluded$2o = ["sx"];
   const splitProps = props => {
     var _props$theme$unstable, _props$theme;
     const result = {
@@ -6865,7 +6901,7 @@
     const {
         sx: inSx
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$2n);
+      other = _objectWithoutPropertiesLoose(props, _excluded$2o);
     const {
       systemProps,
       otherProps
@@ -6891,7 +6927,7 @@
 
   function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-  const _excluded$2m = ["values", "unit", "step"];
+  const _excluded$2n = ["values", "unit", "step"];
   const sortBreakpointsValues = values => {
     const breakpointsAsArray = Object.keys(values).map(key => ({
       key,
@@ -6926,7 +6962,7 @@
         unit = 'px',
         step = 5
       } = breakpoints,
-      other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2m);
+      other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2n);
     const sortedValues = sortBreakpointsValues(values);
     const keys = Object.keys(sortedValues);
     function up(key) {
@@ -7005,7 +7041,7 @@
     return spacing;
   }
 
-  const _excluded$2l = ["breakpoints", "palette", "spacing", "shape"];
+  const _excluded$2m = ["breakpoints", "palette", "spacing", "shape"];
   function createTheme$1(options = {}, ...args) {
     const {
         breakpoints: breakpointsInput = {},
@@ -7013,7 +7049,7 @@
         spacing: spacingInput,
         shape: shapeInput = {}
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$2l);
+      other = _objectWithoutPropertiesLoose(options, _excluded$2m);
     const breakpoints = createBreakpoints(breakpointsInput);
     const spacing = createSpacing(spacingInput);
     let muiTheme = deepmerge({
@@ -7124,7 +7160,7 @@
     return useTheme$2(defaultTheme);
   }
 
-  const _excluded$2k = ["className", "component"];
+  const _excluded$2l = ["className", "component"];
   function createBox(options = {}) {
     const {
       defaultTheme,
@@ -7141,7 +7177,7 @@
           className,
           component = 'div'
         } = _extendSxProp,
-        other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2k);
+        other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2l);
       return /*#__PURE__*/jsxRuntime_1(BoxRoot, _extends({
         as: component,
         ref: ref,
@@ -7152,7 +7188,7 @@
     return Box;
   }
 
-  const _excluded$2j = ["variant"];
+  const _excluded$2k = ["variant"];
   function isEmpty$3(string) {
     return string.length === 0;
   }
@@ -7166,7 +7202,7 @@
     const {
         variant
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$2j);
+      other = _objectWithoutPropertiesLoose(props, _excluded$2k);
     let classKey = variant || '';
     Object.keys(other).sort().forEach(key => {
       if (key === 'color') {
@@ -7178,7 +7214,7 @@
     return classKey;
   }
 
-  const _excluded$2i = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+  const _excluded$2j = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
     _excluded2$d = ["theme"],
     _excluded3$1 = ["theme"];
   function isEmpty$2(obj) {
@@ -7265,7 +7301,7 @@
           skipSx: inputSkipSx,
           overridesResolver
         } = inputOptions,
-        options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2i);
+        options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2j);
 
       // 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;
@@ -8035,7 +8071,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  const _excluded$2h = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
+  const _excluded$2i = ["colorSchemes", "components", "generateCssVars", "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 {
@@ -8089,7 +8125,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           }),
           cssVarPrefix
         } = themeProp,
-        restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$2h);
+        restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$2i);
       const allColorSchemes = Object.keys(colorSchemes);
       const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
       const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -8508,14 +8544,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const _excluded$2g = ["colorSchemes", "components"],
+  const _excluded$2h = ["colorSchemes", "components"],
     _excluded2$c = ["light"];
   function prepareCssVars(theme, parserConfig) {
     // @ts-ignore - ignore components do not exist
     const {
         colorSchemes = {}
       } = theme,
-      otherTheme = _objectWithoutPropertiesLoose(theme, _excluded$2g);
+      otherTheme = _objectWithoutPropertiesLoose(theme, _excluded$2h);
     const {
       vars: rootVars,
       css: rootCss,
@@ -8567,7 +8603,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const _excluded$2f = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
+  const _excluded$2g = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
   const defaultTheme$6 = createTheme$1();
   const defaultCreateStyledComponent$2 = systemStyled('div', {
     name: 'MuiContainer',
@@ -8663,7 +8699,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           fixed = false,
           maxWidth = 'lg'
         } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$2f);
+        other = _objectWithoutPropertiesLoose(props, _excluded$2g);
       const ownerState = _extends({}, props, {
         component,
         disableGutters,
@@ -8950,7 +8986,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return [`direction-xs-${String(direction)}`];
   };
 
-  const _excluded$2e = ["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$5 = createTheme$1();
 
   // widening Theme to any so that the consumer can own the theme structure.
@@ -9008,7 +9044,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           columnSpacing: columnSpacingProp = spacingProp,
           disableEqualOverflow: themeDisableEqualOverflow
         } = props,
-        rest = _objectWithoutPropertiesLoose(props, _excluded$2e);
+        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 (level && themeDisableEqualOverflow !== undefined) {
@@ -9098,7 +9134,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return Grid;
   }
 
-  const _excluded$2d = ["component", "direction", "spacing", "divider", "children", "className"];
+  const _excluded$2e = ["component", "direction", "spacing", "divider", "children", "className"];
   const defaultTheme$4 = createTheme$1();
   // widening Theme to any so that the consumer can own the theme structure.
   const defaultCreateStyledComponent = systemStyled('div', {
@@ -9221,7 +9257,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           children,
           className
         } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$2d);
+        other = _objectWithoutPropertiesLoose(props, _excluded$2e);
       const ownerState = {
         direction,
         spacing
@@ -9246,7 +9282,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return Stack;
   }
 
-  const _excluded$2c = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+  const _excluded$2d = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
     _excluded2$b = ["type", "mode"];
   function adaptV4Theme(inputTheme) {
     {
@@ -9260,7 +9296,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         props = {},
         styleOverrides = {}
       } = inputTheme,
-      other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2c);
+      other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2d);
     const theme = _extends({}, other, {
       components: {}
     });
@@ -9341,7 +9377,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }, mixins);
   }
 
-  const _excluded$2b = ["mode", "contrastThreshold", "tonalOffset"];
+  const _excluded$2c = ["mode", "contrastThreshold", "tonalOffset"];
   const light = {
     // The colors used to style the text.
     text: {
@@ -9510,7 +9546,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         contrastThreshold = 3,
         tonalOffset = 0.2
       } = palette,
-      other = _objectWithoutPropertiesLoose(palette, _excluded$2b);
+      other = _objectWithoutPropertiesLoose(palette, _excluded$2c);
     const primary = palette.primary || getDefaultPrimary(mode);
     const secondary = palette.secondary || getDefaultSecondary(mode);
     const error = palette.error || getDefaultError(mode);
@@ -9634,7 +9670,7 @@ const theme2 = createTheme({ palette: {
     return paletteOutput;
   }
 
-  const _excluded$2a = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+  const _excluded$2b = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
   function round$2(value) {
     return Math.round(value * 1e5) / 1e5;
   }
@@ -9665,7 +9701,7 @@ const theme2 = createTheme({ palette: {
         allVariants,
         pxToRem: pxToRem2
       } = _ref,
-      other = _objectWithoutPropertiesLoose(_ref, _excluded$2a);
+      other = _objectWithoutPropertiesLoose(_ref, _excluded$2b);
     {
       if (typeof fontSize !== 'number') {
         console.error('MUI: `fontSize` is required to be a number.');
@@ -9698,7 +9734,14 @@ const theme2 = createTheme({ palette: {
       body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
       button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
       caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
-      overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps)
+      overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps),
+      inherit: {
+        fontFamily: 'inherit',
+        fontWeight: 'inherit',
+        fontSize: 'inherit',
+        lineHeight: 'inherit',
+        letterSpacing: 'inherit'
+      }
     };
     return deepmerge(_extends({
       htmlFontSize,
@@ -9725,7 +9768,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$29 = ["duration", "easing", "delay"];
+  const _excluded$2a = ["duration", "easing", "delay"];
   // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
   // to learn the context in which each easing should be used.
   const easing = {
@@ -9776,7 +9819,7 @@ const theme2 = createTheme({ palette: {
           easing: easingOption = mergedEasing.easeInOut,
           delay = 0
         } = options,
-        other = _objectWithoutPropertiesLoose(options, _excluded$29);
+        other = _objectWithoutPropertiesLoose(options, _excluded$2a);
       {
         const isString = value => typeof value === 'string';
         // IE11 support, replace with Number.isNaN
@@ -9823,7 +9866,7 @@ const theme2 = createTheme({ palette: {
   };
   var zIndex$1 = zIndex;
 
-  const _excluded$28 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+  const _excluded$29 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
   function createTheme(options = {}, ...args) {
     const {
         mixins: mixinsInput = {},
@@ -9831,7 +9874,7 @@ const theme2 = createTheme({ palette: {
         transitions: transitionsInput = {},
         typography: typographyInput = {}
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$28);
+      other = _objectWithoutPropertiesLoose(options, _excluded$29);
     if (options.vars) {
       throw new Error(`MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` );
@@ -10148,6 +10191,13 @@ You have to import it from @mui/styles.
 See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
 
+  function shouldSkipGeneratingVar(keys) {
+    var _keys$;
+    return !!keys[0].match(/(cssVarPrefix|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+    // ends with sxConfig
+    keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+  }
+
   // Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
   const getOverlayAlpha = elevation => {
     let alphaValue;
@@ -10160,7 +10210,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   };
   var getOverlayAlpha$1 = getOverlayAlpha;
 
-  const _excluded$27 = ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar"],
+  const _excluded$28 = ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar"],
     _excluded2$a = ["palette"];
   const defaultDarkOverlays = [...Array(25)].map((_, index) => {
     if (index === 0) {
@@ -10197,20 +10247,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return undefined;
   };
   const createGetCssVar = (cssVarPrefix = 'mui') => createGetCssVar$1(cssVarPrefix);
-  const defaultShouldSkipGeneratingVar = keys => {
-    var _keys$;
-    return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
-    // ends with sxConfig
-    keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
-  };
   function extendTheme(options = {}, ...args) {
     var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
     const {
         colorSchemes: colorSchemesInput = {},
         cssVarPrefix = 'mui',
-        shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar
+        shouldSkipGeneratingVar: shouldSkipGeneratingVar$1 = shouldSkipGeneratingVar
       } = options,
-      input = _objectWithoutPropertiesLoose(options, _excluded$27);
+      input = _objectWithoutPropertiesLoose(options, _excluded$28);
     const getCssVar = createGetCssVar(cssVarPrefix);
     const _createThemeWithoutVa = createTheme(_extends({}, input, colorSchemesInput.light && {
         palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
@@ -10436,7 +10480,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);
     const parserConfig = {
       prefix: cssVarPrefix,
-      shouldSkipGeneratingVar
+      shouldSkipGeneratingVar: shouldSkipGeneratingVar$1
     };
     const {
       vars: themeVars,
@@ -10444,7 +10488,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     } = prepareCssVars(theme, parserConfig);
     theme.vars = themeVars;
     theme.generateCssVars = generateCssVars;
-    theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
+    theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar$1;
     theme.unstable_sxConfig = _extends({}, defaultSxConfig$1, input == null ? void 0 : input.unstable_sxConfig);
     theme.unstable_sx = function sx(props) {
       return styleFunctionSx$1({
@@ -10525,6 +10569,30 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
   }
 
+  const defaultContextValue = {
+    disableDefaultClasses: false
+  };
+  const ClassNameConfiguratorContext = /*#__PURE__*/React__namespace.createContext(defaultContextValue);
+  /**
+   * @ignore - internal hook.
+   *
+   * Wraps the `generateUtilityClass` function and controls how the classes are generated.
+   * Currently it only affects whether the classes are applied or not.
+   *
+   * @returns Function to be called with the `generateUtilityClass` function specific to a component to generate the classes.
+   */
+  function useClassNamesOverride(generateUtilityClass) {
+    const {
+      disableDefaultClasses
+    } = React__namespace.useContext(ClassNameConfiguratorContext);
+    return slot => {
+      if (disableDefaultClasses) {
+        return '';
+      }
+      return generateUtilityClass(slot);
+    };
+  }
+
   /**
    * Extracts event handlers from a given object.
    * A prop is considered an event handler if it is a function and its name starts with `on`.
@@ -10638,7 +10706,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
   }
 
-  const _excluded$26 = ["elementType", "externalSlotProps", "ownerState"];
+  const _excluded$27 = ["elementType", "externalSlotProps", "ownerState"];
   /**
    * @ignore - do not document.
    * Builds the props to be passed into the slot of an unstyled component.
@@ -10654,7 +10722,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         externalSlotProps,
         ownerState
       } = parameters,
-      rest = _objectWithoutPropertiesLoose(parameters, _excluded$26);
+      rest = _objectWithoutPropertiesLoose(parameters, _excluded$27);
     const resolvedComponentsProps = resolveComponentProps(externalSlotProps, ownerState);
     const {
       props: mergedProps,
@@ -10876,6 +10944,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ClickAwayListener['propTypes' + ''] = exactProp(ClickAwayListener.propTypes);
   }
 
+  /* eslint-disable consistent-return, jsx-a11y/no-noninteractive-tabindex */
   // Inspired by https://github.com/focus-trap/tabbable
   const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
   function getTabIndex(node) {
@@ -13259,7 +13328,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
   generateUtilityClasses('MuiPopper', ['root']);
 
-  const _excluded$25 = ["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') {
@@ -13291,7 +13360,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const slots = {
       root: ['root']
     };
-    return composeClasses(slots, getPopperUnstyledUtilityClass, {});
+    return composeClasses(slots, useClassNamesOverride(getPopperUnstyledUtilityClass));
   };
   const defaultPopperOptions = {};
   const PopperTooltip = /*#__PURE__*/React__namespace.forwardRef(function PopperTooltip(props, ref) {
@@ -13312,7 +13381,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         slots = {},
         TransitionProps
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$25);
+      other = _objectWithoutPropertiesLoose(props, _excluded$26);
     const tooltipRef = React__namespace.useRef(null);
     const ownRef = useForkRef(tooltipRef, ref);
     const popperRef = React__namespace.useRef(null);
@@ -13844,7 +13913,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const modalUnstyledClasses = generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
   var modalUnstyledClasses$1 = modalUnstyledClasses;
 
-  const _excluded$24 = ["children", "closeAfterTransition", "component", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
+  const _excluded$25 = ["children", "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,
@@ -13854,7 +13923,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       root: ['root', !open && exited && 'hidden'],
       backdrop: ['backdrop']
     };
-    return composeClasses(slots, getModalUtilityClass, undefined);
+    return composeClasses(slots, useClassNamesOverride(getModalUtilityClass));
   };
   function getContainer(container) {
     return typeof container === 'function' ? container() : container;
@@ -13914,7 +13983,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         slotProps = {},
         slots = {}
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$24);
+      other = _objectWithoutPropertiesLoose(props, _excluded$25);
     const [exited, setExited] = React__namespace.useState(!open);
     const modal = React__namespace.useRef({});
     const mountNodeRef = React__namespace.useRef(null);
@@ -15015,7 +15084,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
   }
 
-  const _excluded$23 = ["onChange", "maxRows", "minRows", "style", "value"];
+  const _excluded$24 = ["onChange", "maxRows", "minRows", "style", "value"];
   function getStyleValue(value) {
     return parseInt(value, 10) || 0;
   }
@@ -15057,7 +15126,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         style,
         value
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$23);
+      other = _objectWithoutPropertiesLoose(props, _excluded$24);
     const {
       current: isControlled
     } = React__namespace.useRef(value != null);
@@ -16054,7 +16123,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         reason: 'mouse'
       });
     };
-    const handleOptionTouchStart = () => {
+    const handleOptionTouchStart = event => {
+      setHighlightedIndex({
+        event,
+        index: Number(event.currentTarget.getAttribute('data-option-index')),
+        reason: 'touch'
+      });
       isTouch.current = true;
     };
     const handleOptionClick = event => {
@@ -16213,6 +16287,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       inputValue,
       value,
       dirty,
+      expanded: popupOpen && anchorEl,
       popupOpen,
       focused: focused || focusedTag !== -1,
       anchorEl,
@@ -16228,7 +16303,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const svgIconClasses = generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
   var svgIconClasses$1 = svgIconClasses;
 
-  const _excluded$22 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+  const _excluded$23 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
   const useUtilityClasses$1M = ownerState => {
     const {
       color,
@@ -16294,7 +16369,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         titleAccess,
         viewBox = '0 0 24 24'
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$22);
+      other = _objectWithoutPropertiesLoose(props, _excluded$23);
     const ownerState = _extends({}, props, {
       color,
       component,
@@ -17435,7 +17510,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const collapseClasses = generateUtilityClasses('MuiCollapse', ['root', 'horizontal', 'vertical', 'entered', 'hidden', 'wrapper', 'wrapperInner']);
   var collapseClasses$1 = collapseClasses;
 
-  const _excluded$21 = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
+  const _excluded$22 = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
   const useUtilityClasses$1L = ownerState => {
     const {
       orientation,
@@ -17535,7 +17610,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         // eslint-disable-next-line react/prop-types
         TransitionComponent = Transition$1
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$21);
+      other = _objectWithoutPropertiesLoose(props, _excluded$22);
     const ownerState = _extends({}, props, {
       orientation,
       collapsedSize: collapsedSizeProp
@@ -17803,7 +17878,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const paperClasses = generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
   var paperClasses$1 = paperClasses;
 
-  const _excluded$20 = ["className", "component", "elevation", "square", "variant"];
+  const _excluded$21 = ["className", "component", "elevation", "square", "variant"];
   const useUtilityClasses$1K = ownerState => {
     const {
       square,
@@ -17858,7 +17933,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         square = false,
         variant = 'elevation'
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$20);
+      other = _objectWithoutPropertiesLoose(props, _excluded$21);
     const ownerState = _extends({}, props, {
       component,
       elevation,
@@ -17950,7 +18025,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const accordionClasses = generateUtilityClasses('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
   var accordionClasses$1 = accordionClasses;
 
-  const _excluded$1$ = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
+  const _excluded$20 = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
   const useUtilityClasses$1J = ownerState => {
     const {
       classes,
@@ -18063,7 +18138,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         TransitionComponent = Collapse$1,
         TransitionProps
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1$);
+      other = _objectWithoutPropertiesLoose(props, _excluded$20);
     const [expanded, setExpandedState] = useControlled({
       controlled: expandedProp,
       default: defaultExpanded,
@@ -18195,7 +18270,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const accordionActionsClasses = generateUtilityClasses('MuiAccordionActions', ['root', 'spacing']);
   var accordionActionsClasses$1 = accordionActionsClasses;
 
-  const _excluded$1_ = ["className", "disableSpacing"];
+  const _excluded$1$ = ["className", "disableSpacing"];
   const useUtilityClasses$1I = ownerState => {
     const {
       classes,
@@ -18236,7 +18311,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         className,
         disableSpacing = false
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1_);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1$);
     const ownerState = _extends({}, props, {
       disableSpacing
     });
@@ -18282,7 +18357,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const accordionDetailsClasses = generateUtilityClasses('MuiAccordionDetails', ['root']);
   var accordionDetailsClasses$1 = accordionDetailsClasses;
 
-  const _excluded$1Z = ["className"];
+  const _excluded$1_ = ["className"];
   const useUtilityClasses$1H = ownerState => {
     const {
       classes
@@ -18309,7 +18384,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
         className
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1Z);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1_);
     const ownerState = props;
     const classes = useUtilityClasses$1H(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionDetailsRoot, _extends({
@@ -18427,7 +18502,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
   var touchRippleClasses$1 = touchRippleClasses;
 
-  const _excluded$1Y = ["center", "classes", "className"];
+  const _excluded$1Z = ["center", "classes", "className"];
   let _$3 = t => t,
     _t$3,
     _t2$3,
@@ -18556,7 +18631,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         classes = {},
         className
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1Y);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1Z);
     const [ripples, setRipples] = React__namespace.useState([]);
     const nextKey = React__namespace.useRef(0);
     const rippleCallback = React__namespace.useRef(null);
@@ -18757,7 +18832,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
   var buttonBaseClasses$1 = buttonBaseClasses;
 
-  const _excluded$1X = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
+  const _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$1G = ownerState => {
     const {
       disabled,
@@ -18859,7 +18934,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         touchRippleRef,
         type
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1X);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1Y);
     const buttonRef = React__namespace.useRef(null);
     const rippleRef = React__namespace.useRef(null);
     const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -19223,7 +19298,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const accordionSummaryClasses = generateUtilityClasses('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
   var accordionSummaryClasses$1 = accordionSummaryClasses;
 
-  const _excluded$1W = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
+  const _excluded$1X = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
   const useUtilityClasses$1F = ownerState => {
     const {
       classes,
@@ -19318,7 +19393,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         focusVisibleClassName,
         onClick
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1W);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1X);
     const {
       disabled = false,
       disableGutters,
@@ -19415,7 +19490,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
   var iconButtonClasses$1 = iconButtonClasses;
 
-  const _excluded$1V = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
+  const _excluded$1W = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
   const useUtilityClasses$1E = ownerState => {
     const {
       classes,
@@ -19516,7 +19591,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         disableFocusRipple = false,
         size = 'medium'
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1V);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1W);
     const ownerState = _extends({}, props, {
       edge,
       color,
@@ -19625,7 +19700,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
   }), 'Close');
 
-  const _excluded$1U = ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "slotProps", "slots", "variant"];
+  const _excluded$1V = ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "slotProps", "slots", "variant"];
   const useUtilityClasses$1D = ownerState => {
     const {
       variant,
@@ -19755,7 +19830,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         slots = {},
         variant = 'standard'
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1U);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1V);
     const ownerState = _extends({}, props, {
       color,
       severity,
@@ -19936,7 +20011,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const typographyClasses = generateUtilityClasses('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
   var typographyClasses$1 = typographyClasses;
 
-  const _excluded$1T = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+  const _excluded$1U = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
   const useUtilityClasses$1C = ownerState => {
     const {
       align,
@@ -20020,7 +20095,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         variant = 'body1',
         variantMapping = defaultVariantMapping
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1T);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1U);
     const ownerState = _extends({}, props, {
       align,
       color,
@@ -20124,7 +20199,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const alertTitleClasses = generateUtilityClasses('MuiAlertTitle', ['root']);
   var alertTitleClasses$1 = alertTitleClasses;
 
-  const _excluded$1S = ["className"];
+  const _excluded$1T = ["className"];
   const useUtilityClasses$1B = ownerState => {
     const {
       classes
@@ -20154,7 +20229,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
         className
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1S);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1T);
     const ownerState = props;
     const classes = useUtilityClasses$1B(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AlertTitleRoot, _extends({
@@ -20195,7 +20270,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const appBarClasses = generateUtilityClasses('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent']);
   var appBarClasses$1 = appBarClasses;
 
-  const _excluded$1R = ["className", "color", "enableColorOnDark", "position"];
+  const _excluded$1S = ["className", "color", "enableColorOnDark", "position"];
   const useUtilityClasses$1A = ownerState => {
     const {
       color,
@@ -20301,7 +20376,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         enableColorOnDark = false,
         position = 'fixed'
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1R);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1S);
     const ownerState = _extends({}, props, {
       color,
       position,
@@ -20360,7 +20435,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var AppBar$1 = AppBar;
 
-  const _excluded$1Q = ["components", "componentsProps", "slots", "slotProps"];
+  const _excluded$1R = ["components", "componentsProps", "slots", "slotProps"];
   const PopperRoot = styled$1(PopperUnstyled$1, {
     name: 'MuiPopper',
     slot: 'Root',
@@ -20392,7 +20467,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         slots,
         slotProps
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1Q);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1R);
     const RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
     return /*#__PURE__*/jsxRuntime_1(PopperRoot, _extends({
       direction: theme == null ? void 0 : theme.direction,
@@ -20539,7 +20614,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const listSubheaderClasses = generateUtilityClasses('MuiListSubheader', ['root', 'colorPrimary', 'colorInherit', 'gutters', 'inset', 'sticky']);
   var listSubheaderClasses$1 = listSubheaderClasses;
 
-  const _excluded$1P = ["className", "color", "component", "disableGutters", "disableSticky", "inset"];
+  const _excluded$1Q = ["className", "color", "component", "disableGutters", "disableSticky", "inset"];
   const useUtilityClasses$1z = ownerState => {
     const {
       classes,
@@ -20601,7 +20676,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         disableSticky = false,
         inset = false
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1P);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1Q);
     const ownerState = _extends({}, props, {
       color,
       component,
@@ -20677,7 +20752,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const chipClasses = generateUtilityClasses('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
   var chipClasses$1 = chipClasses;
 
-  const _excluded$1O = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"];
+  const _excluded$1P = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"];
   const useUtilityClasses$1y = ownerState => {
     const {
       classes,
@@ -20958,7 +21033,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         tabIndex,
         skipFocusWhenDisabled = false
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1O);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1P);
     const chipRef = React__namespace.useRef(null);
     const handleRef = useForkRef(chipRef, ref);
     const handleDeleteIconClick = event => {
@@ -21244,7 +21319,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
   var inputBaseClasses$1 = inputBaseClasses;
 
-  const _excluded$1N = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
+  const _excluded$1O = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
   const rootOverridesResolver = (props, styles) => {
     const {
       ownerState
@@ -21475,7 +21550,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         type = 'text',
         value: valueProp
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1N);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1O);
     const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
     const {
       current: isControlled
@@ -21960,7 +22035,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var autocompleteClasses$1 = autocompleteClasses;
 
   var _ClearIcon, _ArrowDropDownIcon;
-  const _excluded$1M = ["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 _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$1w = ownerState => {
     const {
       classes,
@@ -22360,7 +22435,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         size = 'medium',
         slotProps = {}
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1M);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1N);
     /* eslint-enable @typescript-eslint/no-unused-vars */
 
     const {
@@ -22979,7 +23054,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const avatarClasses = generateUtilityClasses('MuiAvatar', ['root', 'colorDefault', 'circular', 'rounded', 'square', 'img', 'fallback']);
   var avatarClasses$1 = avatarClasses;
 
-  const _excluded$1L = ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"];
+  const _excluded$1M = ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"];
   const useUtilityClasses$1v = ownerState => {
     const {
       classes,
@@ -23107,7 +23182,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         srcSet,
         variant = 'circular'
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1L);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1M);
     let children = null;
 
     // Use a hook instead of onError on the img element to support server-side rendering.
@@ -23215,7 +23290,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const avatarGroupClasses = generateUtilityClasses('MuiAvatarGroup', ['root', 'avatar']);
   var avatarGroupClasses$1 = avatarGroupClasses;
 
-  const _excluded$1K = ["children", "className", "component", "componentsProps", "max", "slotProps", "spacing", "total", "variant"];
+  const _excluded$1L = ["children", "className", "component", "componentsProps", "max", "slotProps", "spacing", "total", "variant"];
   const SPACINGS$2 = {
     small: -16,
     medium: null
@@ -23281,7 +23356,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         total,
         variant = 'circular'
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1K);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1L);
     let clampedMax = max < 2 ? 2 : max;
     const ownerState = _extends({}, props, {
       max,
@@ -23412,7 +23487,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var AvatarGroup$1 = AvatarGroup;
 
-  const _excluded$1J = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+  const _excluded$1K = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
   const styles$4 = {
     entering: {
       opacity: 1
@@ -23449,7 +23524,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         // eslint-disable-next-line react/prop-types
         TransitionComponent = Transition$1
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1J);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1K);
     const nodeRef = React__namespace.useRef(null);
     const handleRef = useForkRef(nodeRef, children.ref, ref);
     const normalizedTransitionCallback = callback => maybeIsAppearing => {
@@ -23611,7 +23686,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const backdropClasses = generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
   var backdropClasses$1 = backdropClasses;
 
-  const _excluded$1I = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
+  const _excluded$1J = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
   const useUtilityClasses$1t = ownerState => {
     const {
       classes,
@@ -23666,7 +23741,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         TransitionComponent = Fade$1,
         transitionDuration
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1I);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1J);
     const ownerState = _extends({}, props, {
       component,
       invisible
@@ -23795,7 +23870,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']);
   var badgeClasses$1 = badgeClasses;
 
-  const _excluded$1H = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
+  const _excluded$1I = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
   const RADIUS_STANDARD = 10;
   const RADIUS_DOT = 4;
   const useUtilityClasses$1s = ownerState => {
@@ -23963,7 +24038,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         showZero = false,
         variant: variantProp = 'standard'
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1H);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1I);
     const {
       badgeContent,
       invisible: invisibleFromHook,
@@ -24155,7 +24230,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const bottomNavigationClasses = generateUtilityClasses('MuiBottomNavigation', ['root']);
   var bottomNavigationClasses$1 = bottomNavigationClasses;
 
-  const _excluded$1G = ["children", "className", "component", "onChange", "showLabels", "value"];
+  const _excluded$1H = ["children", "className", "component", "onChange", "showLabels", "value"];
   const useUtilityClasses$1r = ownerState => {
     const {
       classes
@@ -24190,7 +24265,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         showLabels = false,
         value
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1G);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1H);
     const ownerState = _extends({}, props, {
       component,
       showLabels
@@ -24273,7 +24348,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const bottomNavigationActionClasses = generateUtilityClasses('MuiBottomNavigationAction', ['root', 'iconOnly', 'selected', 'label']);
   var bottomNavigationActionClasses$1 = bottomNavigationActionClasses;
 
-  const _excluded$1F = ["className", "icon", "label", "onChange", "onClick", "selected", "showLabel", "value"];
+  const _excluded$1G = ["className", "icon", "label", "onChange", "onClick", "selected", "showLabel", "value"];
   const useUtilityClasses$1q = ownerState => {
     const {
       classes,
@@ -24351,7 +24426,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         onClick,
         value
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1F);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1G);
     const ownerState = props;
     const classes = useUtilityClasses$1q(ownerState);
     const handleChange = event => {
@@ -24460,6 +24535,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
   }), 'MoreHoriz');
 
+  const _excluded$1F = ["slots", "slotProps"];
   const BreadcrumbCollapsedButton = styled$1(ButtonBase$1)(({
     theme
   }) => _extends({
@@ -24496,19 +24572,40 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    * @ignore - internal component.
    */
   function BreadcrumbCollapsed(props) {
+    const {
+        slots = {},
+        slotProps = {}
+      } = props,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$1F);
     const ownerState = props;
     return /*#__PURE__*/jsxRuntime_1("li", {
       children: /*#__PURE__*/jsxRuntime_1(BreadcrumbCollapsedButton, _extends({
         focusRipple: true
-      }, props, {
+      }, otherProps, {
         ownerState: ownerState,
-        children: /*#__PURE__*/jsxRuntime_1(BreadcrumbCollapsedIcon, {
+        children: /*#__PURE__*/jsxRuntime_1(BreadcrumbCollapsedIcon, _extends({
+          as: slots.CollapsedIcon,
           ownerState: ownerState
-        })
+        }, slotProps.collapsedIcon))
       }))
     });
   }
   BreadcrumbCollapsed.propTypes = {
+    /**
+     * The props used for the CollapsedIcon slot.
+     * @default {}
+     */
+    slotProps: PropTypes.shape({
+      collapsedIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    }),
+    /**
+     * The components used for each slot inside the BreadcumbCollapsed.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    slots: PropTypes.shape({
+      CollapsedIcon: PropTypes.elementType
+    }),
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
@@ -24521,7 +24618,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const breadcrumbsClasses = generateUtilityClasses('MuiBreadcrumbs', ['root', 'ol', 'li', 'separator']);
   var breadcrumbsClasses$1 = breadcrumbsClasses;
 
-  const _excluded$1E = ["children", "className", "component", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
+  const _excluded$1E = ["children", "className", "component", "slots", "slotProps", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
   const useUtilityClasses$1p = ownerState => {
     const {
       classes
@@ -24589,6 +24686,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         children,
         className,
         component = 'nav',
+        slots = {},
+        slotProps = {},
         expandText = 'Show path',
         itemsAfterCollapse = 1,
         itemsBeforeCollapse = 1,
@@ -24607,6 +24706,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       separator
     });
     const classes = useUtilityClasses$1p(ownerState);
+    const collapsedIconSlotProps = useSlotProps({
+      elementType: slots.CollapsedIcon,
+      externalSlotProps: slotProps.collapsedIcon,
+      ownerState
+    });
     const listRef = React__namespace.useRef(null);
     const renderItemsBeforeAndAfter = allItems => {
       const handleClickExpand = () => {
@@ -24632,6 +24736,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
       return [...allItems.slice(0, itemsBeforeCollapse), /*#__PURE__*/jsxRuntime_1(BreadcrumbCollapsed, {
         "aria-label": expandText,
+        slots: {
+          CollapsedIcon: slots.CollapsedIcon
+        },
+        slotProps: {
+          collapsedIcon: collapsedIconSlotProps
+        },
         onClick: handleClickExpand
       }, "ellipsis"), ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)];
     };
@@ -24712,6 +24822,21 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * @default '/'
      */
     separator: PropTypes.node,
+    /**
+     * The props used for each slot inside the Breadcumb.
+     * @default {}
+     */
+    slotProps: PropTypes.shape({
+      collapsedIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    }),
+    /**
+     * The components used for each slot inside the Breadcumb.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    slots: PropTypes.shape({
+      CollapsedIcon: PropTypes.elementType
+    }),
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
@@ -34018,8 +34143,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       value: childContext,
       children: /*#__PURE__*/jsxRuntime_1(ListItemButtonRoot, _extends({
         ref: handleRef,
-        href: other.href || other.to,
-        component: (other.href || other.to) && component === 'div' ? 'a' : component,
+        href: other.href || other.to
+        // `ButtonBase` processes `href` or `to` if `component` is set to 'button'
+        ,
+        component: (other.href || other.to) && component === 'div' ? 'button' : component,
         focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
         ownerState: ownerState,
         className: clsx(classes.root, className)
@@ -43933,7 +44060,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$p);
     const {
-      disabled
+      disabled,
+      active
     } = React__namespace.useContext(StepContext$1);
     const {
       orientation
@@ -43957,7 +44085,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       },
       className: clsx(classes.root, className),
       ref: ref,
-      ownerState: ownerState
+      ownerState: ownerState,
+      "aria-current": active ? 'step' : undefined
     }, other, {
       children: child
     }));
@@ -46405,7 +46534,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     d: "M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
   }), 'KeyboardArrowRight');
 
-  var _LastPageIcon, _FirstPageIcon, _KeyboardArrowRight$1, _KeyboardArrowLeft$1, _KeyboardArrowLeft2, _KeyboardArrowRight2, _FirstPageIcon2, _LastPageIcon2;
+  var _LastPageIcon, _FirstPageIcon, _KeyboardArrowRight, _KeyboardArrowLeft, _KeyboardArrowLeft2, _KeyboardArrowRight2, _FirstPageIcon2, _LastPageIcon2;
   const _excluded$a = ["backIconButtonProps", "count", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton"];
   const TablePaginationActions = /*#__PURE__*/React__namespace.forwardRef(function TablePaginationActions(props, ref) {
     const {
@@ -46449,7 +46578,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         "aria-label": getItemAriaLabel('previous', page),
         title: getItemAriaLabel('previous', page)
       }, backIconButtonProps, {
-        children: theme.direction === 'rtl' ? _KeyboardArrowRight$1 || (_KeyboardArrowRight$1 = /*#__PURE__*/jsxRuntime_1(KeyboardArrowRight, {})) : _KeyboardArrowLeft$1 || (_KeyboardArrowLeft$1 = /*#__PURE__*/jsxRuntime_1(KeyboardArrowLeft, {}))
+        children: theme.direction === 'rtl' ? _KeyboardArrowRight || (_KeyboardArrowRight = /*#__PURE__*/jsxRuntime_1(KeyboardArrowRight, {})) : _KeyboardArrowLeft || (_KeyboardArrowLeft = /*#__PURE__*/jsxRuntime_1(KeyboardArrowLeft, {}))
       })), /*#__PURE__*/jsxRuntime_1(IconButton$1, _extends({
         onClick: handleNextButtonClick,
         disabled: count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false,
@@ -47273,8 +47402,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const tabScrollButtonClasses = generateUtilityClasses('MuiTabScrollButton', ['root', 'vertical', 'horizontal', 'disabled']);
   var tabScrollButtonClasses$1 = tabScrollButtonClasses;
 
-  var _KeyboardArrowLeft, _KeyboardArrowRight;
-  const _excluded$5 = ["className", "direction", "orientation", "disabled"];
+  const _excluded$5 = ["className", "slots", "slotProps", "direction", "orientation", "disabled"];
   const useUtilityClasses$4 = ownerState => {
     const {
       classes,
@@ -47312,12 +47440,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   }));
   const TabScrollButton = /*#__PURE__*/React__namespace.forwardRef(function TabScrollButton(inProps, ref) {
+    var _slots$StartScrollBut, _slots$EndScrollButto;
     const props = useThemeProps({
       props: inProps,
       name: 'MuiTabScrollButton'
     });
     const {
         className,
+        slots = {},
+        slotProps = {},
         direction
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$5);
@@ -47327,6 +47458,24 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       isRtl
     }, props);
     const classes = useUtilityClasses$4(ownerState);
+    const StartButtonIcon = (_slots$StartScrollBut = slots.StartScrollButtonIcon) != null ? _slots$StartScrollBut : KeyboardArrowLeft;
+    const EndButtonIcon = (_slots$EndScrollButto = slots.EndScrollButtonIcon) != null ? _slots$EndScrollButto : KeyboardArrowRight;
+    const startButtonIconProps = useSlotProps({
+      elementType: StartButtonIcon,
+      externalSlotProps: slotProps.startScrollButtonIcon,
+      additionalProps: {
+        fontSize: 'small'
+      },
+      ownerState
+    });
+    const endButtonIconProps = useSlotProps({
+      elementType: EndButtonIcon,
+      externalSlotProps: slotProps.endScrollButtonIcon,
+      additionalProps: {
+        fontSize: 'small'
+      },
+      ownerState
+    });
     return /*#__PURE__*/jsxRuntime_1(TabScrollButtonRoot, _extends({
       component: "div",
       className: clsx(classes.root, className),
@@ -47335,11 +47484,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ownerState: ownerState,
       tabIndex: null
     }, other, {
-      children: direction === 'left' ? _KeyboardArrowLeft || (_KeyboardArrowLeft = /*#__PURE__*/jsxRuntime_1(KeyboardArrowLeft, {
-        fontSize: "small"
-      })) : _KeyboardArrowRight || (_KeyboardArrowRight = /*#__PURE__*/jsxRuntime_1(KeyboardArrowRight, {
-        fontSize: "small"
-      }))
+      children: direction === 'left' ? /*#__PURE__*/jsxRuntime_1(StartButtonIcon, _extends({}, startButtonIconProps)) : /*#__PURE__*/jsxRuntime_1(EndButtonIcon, _extends({}, endButtonIconProps))
     }));
   });
   TabScrollButton.propTypes /* remove-proptypes */ = {
@@ -47372,6 +47517,23 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component orientation (layout flow direction).
      */
     orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
+    /**
+     * The extra props for the slot components.
+     * You can override the existing props or add new ones.
+     * @default {}
+     */
+    slotProps: PropTypes.shape({
+      endScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      startScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    }),
+    /**
+     * The components used for each slot inside.
+     * @default {}
+     */
+    slots: PropTypes.shape({
+      EndScrollButtonIcon: PropTypes.elementType,
+      StartScrollButtonIcon: PropTypes.elementType
+    }),
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
@@ -47385,7 +47547,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const tabsClasses = generateUtilityClasses('MuiTabs', ['root', 'vertical', 'flexContainer', 'flexContainerVertical', 'centered', 'scroller', 'fixed', 'scrollableX', 'scrollableY', 'hideScrollbar', 'scrollButtons', 'scrollButtonsHideMobile', 'indicator']);
   var tabsClasses$1 = tabsClasses;
 
-  const _excluded$4 = ["aria-label", "aria-labelledby", "action", "centered", "children", "className", "component", "allowScrollButtonsMobile", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant", "visibleScrollbar"];
+  const _excluded$4 = ["aria-label", "aria-labelledby", "action", "centered", "children", "className", "component", "allowScrollButtonsMobile", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "slots", "slotProps", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant", "visibleScrollbar"];
   const nextItem = (list, item) => {
     if (list === item) {
       return list.firstChild;
@@ -47591,6 +47753,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         ScrollButtonComponent = TabScrollButton$1,
         scrollButtons = 'auto',
         selectionFollowsFocus,
+        slots = {},
+        slotProps = {},
         TabIndicatorProps = {},
         TabScrollButtonProps = {},
         textColor = 'primary',
@@ -47624,6 +47788,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       scrollButtonsHideMobile: !allowScrollButtonsMobile
     });
     const classes = useUtilityClasses$3(ownerState);
+    const startScrollButtonIconProps = useSlotProps({
+      elementType: slots.StartScrollButtonIcon,
+      externalSlotProps: slotProps.startScrollButtonIcon,
+      ownerState
+    });
+    const endScrollButtonIconProps = useSlotProps({
+      elementType: slots.EndScrollButtonIcon,
+      externalSlotProps: slotProps.endScrollButtonIcon,
+      ownerState
+    });
     {
       if (centered && scrollable) {
         console.error('MUI: You can not use the `centered={true}` and `variant="scrollable"` properties ' + 'at the same time on a `Tabs` component.');
@@ -47788,6 +47962,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       const scrollButtonsActive = displayScroll.start || displayScroll.end;
       const showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === true);
       conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/jsxRuntime_1(ScrollButtonComponent, _extends({
+        slots: {
+          StartScrollButtonIcon: slots.StartScrollButtonIcon
+        },
+        slotProps: {
+          startScrollButtonIcon: startScrollButtonIconProps
+        },
         orientation: orientation,
         direction: isRtl ? 'right' : 'left',
         onClick: handleStartScrollClick,
@@ -47796,6 +47976,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
       })) : null;
       conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/jsxRuntime_1(ScrollButtonComponent, _extends({
+        slots: {
+          EndScrollButtonIcon: slots.EndScrollButtonIcon
+        },
+        slotProps: {
+          endScrollButtonIcon: endScrollButtonIconProps
+        },
         orientation: orientation,
         direction: isRtl ? 'left' : 'right',
         onClick: handleEndScrollClick,
@@ -48095,6 +48281,23 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * changes on activation.
      */
     selectionFollowsFocus: PropTypes.bool,
+    /**
+     * The extra props for the slot components.
+     * You can override the existing props or add new ones.
+     * @default {}
+     */
+    slotProps: PropTypes.shape({
+      endScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      startScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    }),
+    /**
+     * The components used for each slot inside.
+     * @default {}
+     */
+    slots: PropTypes.shape({
+      EndScrollButtonIcon: PropTypes.elementType,
+      StartScrollButtonIcon: PropTypes.elementType
+    }),
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
@@ -49377,6 +49580,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.scopedCssBaselineClasses = scopedCssBaselineClasses$1;
   exports.selectClasses = selectClasses$1;
   exports.setRef = setRef;
+  exports.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
   exports.skeletonClasses = skeletonClasses$1;
   exports.sliderClasses = sliderClasses$1;
   exports.snackbarClasses = snackbarClasses$1;