@mui/material 5.11.13 → 5.11.15

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.13
+ * @mui/material v5.11.15
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -6450,28 +6450,6 @@
   });
   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, _props$prop;
-          let value = (_props$theme$typograp = props.theme.typography) == null ? void 0 : _props$theme$typograp[`${prop}${props[prop] === 'default' || props[prop] === prop ? '' : capitalize((_props$prop = props[prop]) == null ? void 0 : _props$prop.toString())}`];
-          if (!value) {
-            var _props$theme$typograp2, _props$theme$typograp3;
-            value = (_props$theme$typograp2 = props.theme.typography) == null ? void 0 : (_props$theme$typograp3 = _props$theme$typograp2[propValue]) == null ? void 0 : _props$theme$typograp3[prop];
-          }
-          if (!value) {
-            value = propValue;
-          }
-          return {
-            [prop]: value
-          };
-        };
-        return handleBreakpoints(props, props[prop], styleFromPropValue);
-      }
-      return null;
-    };
-  };
   const defaultSxConfig = {
     // borders
     border: {
@@ -6730,19 +6708,16 @@
     boxSizing: {},
     // typography
     fontFamily: {
-      themeKey: 'typography',
-      style: createFontStyleFunction('fontFamily')
+      themeKey: 'typography'
     },
     fontSize: {
-      themeKey: 'typography',
-      style: createFontStyleFunction('fontSize')
+      themeKey: 'typography'
     },
     fontStyle: {
       themeKey: 'typography'
     },
     fontWeight: {
-      themeKey: 'typography',
-      style: createFontStyleFunction('fontWeight')
+      themeKey: 'typography'
     },
     letterSpacing: {},
     textTransform: {},
@@ -6786,6 +6761,11 @@
       if (val == null) {
         return null;
       }
+      if (themeKey === 'typography' && val === 'inherit') {
+        return {
+          [prop]: val
+        };
+      }
       const themeMapping = getPath(theme, themeKey) || {};
       if (style) {
         return style(props);
@@ -6872,7 +6852,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 = {
@@ -6893,7 +6873,7 @@
     const {
         sx: inSx
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$2n);
+      other = _objectWithoutPropertiesLoose(props, _excluded$2o);
     const {
       systemProps,
       otherProps
@@ -6919,7 +6899,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,
@@ -6954,7 +6934,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) {
@@ -7033,7 +7013,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 = {},
@@ -7041,7 +7021,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({
@@ -7152,7 +7132,7 @@
     return useTheme$2(defaultTheme);
   }
 
-  const _excluded$2k = ["className", "component"];
+  const _excluded$2l = ["className", "component"];
   function createBox(options = {}) {
     const {
       defaultTheme,
@@ -7169,7 +7149,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,
@@ -7180,7 +7160,7 @@
     return Box;
   }
 
-  const _excluded$2j = ["variant"];
+  const _excluded$2k = ["variant"];
   function isEmpty$3(string) {
     return string.length === 0;
   }
@@ -7194,7 +7174,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') {
@@ -7206,7 +7186,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) {
@@ -7293,7 +7273,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;
@@ -8063,7 +8043,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 {
@@ -8117,7 +8097,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;
@@ -8536,14 +8516,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,
@@ -8595,7 +8575,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',
@@ -8691,7 +8671,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,
@@ -8727,12 +8707,18 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return Container;
   }
 
+  function appendLevel(level) {
+    if (!level) {
+      return '';
+    }
+    return `Level${level}`;
+  }
   function isNestedContainer(ownerState) {
     return ownerState.level > 0 && ownerState.container;
   }
   function createGetSelfSpacing(ownerState) {
     return function getSelfSpacing(axis) {
-      return `var(--Grid-${axis}Spacing${ownerState.level || ''})`;
+      return `var(--Grid-${axis}Spacing${appendLevel(ownerState.level)})`;
     };
   }
   function createGetParentSpacing(ownerState) {
@@ -8740,9 +8726,15 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       if (ownerState.level === 0) {
         return `var(--Grid-${axis}Spacing)`;
       }
-      return `var(--Grid-${axis}Spacing${ownerState.level - 1 || ''})`;
+      return `var(--Grid-${axis}Spacing${appendLevel(ownerState.level - 1)})`;
     };
   }
+  function getParentColumns(ownerState) {
+    if (ownerState.level === 0) {
+      return `var(--Grid-columns)`;
+    }
+    return `var(--Grid-columns${appendLevel(ownerState.level - 1)})`;
+  }
   const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
   const traverseBreakpoints = (breakpoints, responsive, iterator) => {
     const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
@@ -8813,7 +8805,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         style = {
           flexGrow: 0,
           flexBasis: 'auto',
-          width: `calc(100% * ${value} / var(--Grid-columns)${isNestedContainer(ownerState) ? ` + ${getSelfSpacing('column')}` : ''})`
+          width: `calc(100% * ${value} / ${getParentColumns(ownerState)}${isNestedContainer(ownerState) ? ` + ${getSelfSpacing('column')}` : ''})`
         };
       }
       appendStyle(styles, style);
@@ -8834,7 +8826,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }
       if (typeof value === 'number') {
         style = {
-          marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / var(--Grid-columns))`
+          marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / ${getParentColumns(ownerState)})`
         };
       }
       appendStyle(styles, style);
@@ -8848,12 +8840,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     if (!ownerState.container) {
       return {};
     }
-    const styles = {
+    const styles = isNestedContainer(ownerState) ? {
+      [`--Grid-columns${appendLevel(ownerState.level)}`]: getParentColumns(ownerState)
+    } : {
       '--Grid-columns': 12
     };
     traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
       appendStyle(styles, {
-        '--Grid-columns': value
+        [`--Grid-columns${appendLevel(ownerState.level)}`]: value
       });
     });
     return styles;
@@ -8869,12 +8863,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const styles = isNestedContainer(ownerState) ? {
       // Set the default spacing as its parent spacing.
       // It will be overridden if spacing props are provided
-      [`--Grid-rowSpacing${ownerState.level || ''}`]: getParentSpacing('row')
+      [`--Grid-rowSpacing${appendLevel(ownerState.level)}`]: getParentSpacing('row')
     } : {};
     traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
       var _theme$spacing;
       appendStyle(styles, {
-        [`--Grid-rowSpacing${ownerState.level || ''}`]: typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
+        [`--Grid-rowSpacing${appendLevel(ownerState.level)}`]: typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
       });
     });
     return styles;
@@ -8890,12 +8884,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const styles = isNestedContainer(ownerState) ? {
       // Set the default spacing as its parent spacing.
       // It will be overridden if spacing props are provided
-      [`--Grid-columnSpacing${ownerState.level || ''}`]: getParentSpacing('column')
+      [`--Grid-columnSpacing${appendLevel(ownerState.level)}`]: getParentSpacing('column')
     } : {};
     traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
       var _theme$spacing2;
       appendStyle(styles, {
-        [`--Grid-columnSpacing${ownerState.level || ''}`]: typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
+        [`--Grid-columnSpacing${appendLevel(ownerState.level)}`]: typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
       });
     });
     return styles;
@@ -8978,7 +8972,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.
@@ -9036,7 +9030,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) {
@@ -9126,7 +9120,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", "useFlexGap"];
   const defaultTheme$4 = createTheme$1();
   // widening Theme to any so that the consumer can own the theme structure.
   const defaultCreateStyledComponent = systemStyled('div', {
@@ -9210,6 +9204,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         });
       }
       const styleFromPropValue = (propValue, breakpoint) => {
+        if (ownerState.useFlexGap) {
+          return {
+            gap: getValue(transformer, propValue)
+          };
+        }
         return {
           '& > :not(style) + :not(style)': {
             margin: 0,
@@ -9247,12 +9246,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           spacing = 0,
           divider,
           children,
-          className
+          className,
+          useFlexGap = false
         } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$2d);
+        other = _objectWithoutPropertiesLoose(props, _excluded$2e);
       const ownerState = {
         direction,
-        spacing
+        spacing,
+        useFlexGap
       };
       const classes = useUtilityClasses();
       return /*#__PURE__*/jsxRuntime_1(StackRoot, _extends({
@@ -9274,7 +9275,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) {
     {
@@ -9288,7 +9289,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: {}
     });
@@ -9369,7 +9370,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: {
@@ -9538,7 +9539,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);
@@ -9662,7 +9663,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;
   }
@@ -9693,7 +9694,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.');
@@ -9760,7 +9761,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 = {
@@ -9811,7 +9812,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
@@ -9858,7 +9859,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 = {},
@@ -9866,7 +9867,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.` );
@@ -10202,7 +10203,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) {
@@ -10246,7 +10247,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         cssVarPrefix = 'mui',
         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
@@ -10698,7 +10699,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.
@@ -10714,7 +10715,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,
@@ -11421,7 +11422,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getUAString() {
     var uaData = navigator.userAgentData;
 
-    if (uaData != null && uaData.brands) {
+    if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) {
       return uaData.brands.map(function (item) {
         return item.brand + "/" + item.version;
       }).join(' ');
@@ -11749,10 +11750,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   // Zooming can change the DPR, but it seems to report a value that will
   // cleanly divide the values into the appropriate subpixels.
 
-  function roundOffsetsByDPR(_ref) {
+  function roundOffsetsByDPR(_ref, win) {
     var x = _ref.x,
         y = _ref.y;
-    var win = window;
     var dpr = win.devicePixelRatio || 1;
     return {
       x: round$1(x * dpr) / dpr || 0,
@@ -11835,7 +11835,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
       x: x,
       y: y
-    }) : {
+    }, getWindow(popper)) : {
       x: x,
       y: y
     };
@@ -13320,7 +13320,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') {
@@ -13373,7 +13373,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);
@@ -13905,7 +13905,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,
@@ -13975,7 +13975,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);
@@ -15076,7 +15076,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;
   }
@@ -15118,7 +15118,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);
@@ -16295,7 +16295,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,
@@ -16361,7 +16361,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,
@@ -17502,7 +17502,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,
@@ -17602,7 +17602,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
@@ -17870,7 +17870,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,
@@ -17925,7 +17925,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,
@@ -18017,7 +18017,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,
@@ -18130,7 +18130,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,
@@ -18262,7 +18262,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,
@@ -18303,7 +18303,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
     });
@@ -18349,7 +18349,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
@@ -18376,7 +18376,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({
@@ -18494,7 +18494,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,
@@ -18623,7 +18623,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);
@@ -18824,7 +18824,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,
@@ -18926,7 +18926,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);
@@ -19290,7 +19290,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,
@@ -19385,7 +19385,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,
@@ -19482,7 +19482,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,
@@ -19583,7 +19583,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,
@@ -19692,7 +19692,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,
@@ -19822,7 +19822,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,
@@ -20003,7 +20003,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,
@@ -20087,7 +20087,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,
@@ -20191,7 +20191,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
@@ -20221,7 +20221,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({
@@ -20262,7 +20262,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,
@@ -20368,7 +20368,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,
@@ -20427,7 +20427,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',
@@ -20459,7 +20459,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,
@@ -20606,7 +20606,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,
@@ -20668,7 +20668,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,
@@ -20744,7 +20744,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,
@@ -20806,7 +20806,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => {
-    const deleteIconColor = alpha(theme.palette.text.primary, 0.26);
     const textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
     return _extends({
       maxWidth: '100%',
@@ -20873,12 +20872,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       })),
       [`& .${chipClasses$1.deleteIcon}`]: _extends({
         WebkitTapHighlightColor: 'transparent',
-        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : deleteIconColor,
+        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : alpha(theme.palette.text.primary, 0.26),
         fontSize: 22,
         cursor: 'pointer',
         margin: '0 5px 0 -6px',
         '&:hover': {
-          color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(deleteIconColor, 0.4)
+          color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(theme.palette.text.primary, 0.4)
         }
       }, ownerState.size === 'small' && {
         fontSize: 16,
@@ -21025,7 +21024,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 => {
@@ -21311,7 +21310,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
@@ -21542,7 +21541,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
@@ -22027,7 +22026,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,
@@ -22427,7 +22426,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 {
@@ -22645,6 +22644,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * If `true`, the selected option becomes the value of the input
      * when the Autocomplete loses focus unless the user chooses
      * a different option or changes the character string in the input.
+     *
+     * When using `freeSolo` mode, the typed value will be the input value
+     * if the Autocomplete loses focus without highlighting an option.
      * @default false
      */
     autoSelect: PropTypes.bool,
@@ -23046,7 +23048,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,
@@ -23174,7 +23176,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.
@@ -23282,7 +23284,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
@@ -23348,7 +23350,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,
@@ -23479,7 +23481,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
@@ -23516,7 +23518,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 => {
@@ -23678,7 +23680,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,
@@ -23733,7 +23735,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
@@ -23862,7 +23864,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 => {
@@ -24030,7 +24032,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,
@@ -24222,7 +24224,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
@@ -24257,7 +24259,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
@@ -24340,7 +24342,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,
@@ -24418,7 +24420,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 => {
@@ -24527,6 +24529,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({
@@ -24563,19 +24566,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.
      */
@@ -24588,7 +24612,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
@@ -24656,6 +24680,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,
@@ -24674,6 +24700,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 = () => {
@@ -24699,6 +24730,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)];
     };
@@ -24779,6 +24816,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.
      */
@@ -34085,8 +34137,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)
@@ -43351,7 +43405,17 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The system prop, which allows defining system overrides as well as additional CSS styles.
      */
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+    /**
+     * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+     *
+     * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+     * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+     *
+     * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+     * @default false
+     */
+    useFlexGap: PropTypes.bool
   } ;
   var Stack$1 = Stack;
 
@@ -44000,7 +44064,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
@@ -44024,7 +44089,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
     }));
@@ -46472,7 +46538,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 {
@@ -46516,7 +46582,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,
@@ -47340,8 +47406,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,
@@ -47379,12 +47444,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);
@@ -47394,6 +47462,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),
@@ -47402,11 +47488,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 */ = {
@@ -47439,6 +47521,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.
      */
@@ -47452,7 +47551,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;
@@ -47658,6 +47757,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',
@@ -47691,6 +47792,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.');
@@ -47855,6 +47966,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,
@@ -47863,6 +47980,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,
@@ -48162,6 +48285,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.
      */