@mui/material 5.5.2 → 5.6.1

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.5.2
+/** @license MUI v5.6.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -1628,7 +1628,7 @@
   };
 
   {
-    var contentValuePattern = /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
+    var contentValuePattern = /(var|attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
     var contentValues = ['normal', 'none', 'initial', 'inherit', 'unset'];
     var oldProcessStyleValue = processStyleValue;
     var msPattern = /^-ms-/;
@@ -2042,7 +2042,7 @@
 
   var pkg = {
   	name: "@emotion/react",
-  	version: "11.8.2",
+  	version: "11.9.0",
   	main: "dist/emotion-react.cjs.js",
   	module: "dist/emotion-react.esm.js",
   	browser: {
@@ -2071,7 +2071,7 @@
   		"@babel/runtime": "^7.13.10",
   		"@emotion/babel-plugin": "^11.7.1",
   		"@emotion/cache": "^11.7.1",
-  		"@emotion/serialize": "^1.0.2",
+  		"@emotion/serialize": "^1.0.3",
   		"@emotion/utils": "^1.1.0",
   		"@emotion/weak-memoize": "^0.2.5",
   		"hoist-non-react-statics": "^3.3.1"
@@ -2090,7 +2090,7 @@
   	},
   	devDependencies: {
   		"@babel/core": "^7.13.10",
-  		"@emotion/css": "11.7.1",
+  		"@emotion/css": "11.9.0",
   		"@emotion/css-prettifier": "1.0.1",
   		"@emotion/server": "11.4.0",
   		"@emotion/styled": "11.8.1",
@@ -6449,7 +6449,7 @@
   styleFunctionSx.filterProps = ['sx'];
   var defaultStyleFunctionSx = styleFunctionSx;
 
-  const _excluded$2k = ["sx"];
+  const _excluded$2l = ["sx"];
 
   const splitProps = props => {
     const result = {
@@ -6470,7 +6470,7 @@
     const {
       sx: inSx
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2k);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2l);
 
     const {
       systemProps,
@@ -6549,7 +6549,7 @@
   	return str;
   }
 
-  const _excluded$2j = ["values", "unit", "step"];
+  const _excluded$2k = ["values", "unit", "step"];
 
   const sortBreakpointsValues = values => {
     const breakpointsAsArray = Object.keys(values).map(key => ({
@@ -6585,7 +6585,7 @@
       unit = 'px',
       step = 5
     } = breakpoints,
-          other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2j);
+          other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2k);
 
     const sortedValues = sortBreakpointsValues(values);
     const keys = Object.keys(sortedValues);
@@ -6677,16 +6677,16 @@
     return spacing;
   }
 
-  const _excluded$2i = ["breakpoints", "palette", "spacing", "shape"];
+  const _excluded$2j = ["breakpoints", "palette", "spacing", "shape"];
 
-  function createTheme$1(options = {}, ...args) {
+  function createTheme$2(options = {}, ...args) {
     const {
       breakpoints: breakpointsInput = {},
       palette: paletteInput = {},
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-          other = _objectWithoutPropertiesLoose(options, _excluded$2i);
+          other = _objectWithoutPropertiesLoose(options, _excluded$2j);
 
     const breakpoints = createBreakpoints(breakpointsInput);
     const spacing = createSpacing(spacingInput);
@@ -6802,13 +6802,13 @@
     return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
   }
 
-  const systemDefaultTheme$1 = createTheme$1();
+  const systemDefaultTheme$1 = createTheme$2();
 
   function useTheme$1(defaultTheme = systemDefaultTheme$1) {
     return useTheme$2(defaultTheme);
   }
 
-  const _excluded$2h = ["className", "component"];
+  const _excluded$2i = ["className", "component"];
   function createBox(options = {}) {
     const {
       defaultTheme,
@@ -6825,7 +6825,7 @@
         className,
         component = 'div'
       } = _extendSxProp,
-            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2h);
+            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2i);
 
       return /*#__PURE__*/jsxRuntime_1(BoxRoot, _extends({
         as: component,
@@ -6861,7 +6861,7 @@
     return Box;
   }
 
-  const _excluded$2g = ["variant"];
+  const _excluded$2h = ["variant"];
 
   function isEmpty$2(string) {
     return string.length === 0;
@@ -6877,7 +6877,7 @@
     const {
       variant
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2g);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2h);
 
     let classKey = variant || '';
     Object.keys(other).sort().forEach(key => {
@@ -6890,9 +6890,9 @@
     return classKey;
   }
 
-  const _excluded$2f = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
-        _excluded2$b = ["theme"],
-        _excluded3$1 = ["theme"];
+  const _excluded$2g = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+        _excluded2$d = ["theme"],
+        _excluded3$2 = ["theme"];
 
   function isEmpty$1(obj) {
     return Object.keys(obj).length === 0;
@@ -6952,7 +6952,7 @@
   function shouldForwardProp(prop) {
     return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
   }
-  const systemDefaultTheme = createTheme$1();
+  const systemDefaultTheme = createTheme$2();
 
   const lowercaseFirstLetter = string => {
     return string.charAt(0).toLowerCase() + string.slice(1);
@@ -6973,7 +6973,7 @@
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-            options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2f); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
+            options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2g); // 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;
@@ -7010,7 +7010,7 @@
             let {
               theme: themeInput
             } = _ref,
-                other = _objectWithoutPropertiesLoose(_ref, _excluded2$b);
+                other = _objectWithoutPropertiesLoose(_ref, _excluded2$d);
 
             return stylesArg(_extends({
               theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
@@ -7069,7 +7069,7 @@
             let {
               theme: themeInput
             } = _ref2,
-                other = _objectWithoutPropertiesLoose(_ref2, _excluded3$1);
+                other = _objectWithoutPropertiesLoose(_ref2, _excluded3$2);
 
             return styleArg(_extends({
               theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
@@ -7156,7 +7156,7 @@
 
 
   function hexToRgb(color) {
-    color = color.substr(1);
+    color = color.slice(1);
     const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, 'g');
     let colors = color.match(re);
 
@@ -7208,7 +7208,7 @@ The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
       colorSpace = values.shift();
 
       if (values.length === 4 && values[3].charAt(0) === '/') {
-        values[3] = values[3].substr(1);
+        values[3] = values[3].slice(1);
       }
 
       if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) {
@@ -7226,6 +7226,17 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       colorSpace
     };
   }
+  /**
+   * Returns a channel created from the input color.
+   *
+   * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+   * @returns {string} - The channel for the color, that can be used in rgba or hsla colors
+   */
+
+  const colorChannel = color => {
+    const decomposedColor = decomposeColor(color);
+    return decomposedColor.values.slice(0, 3).map((val, idx) => decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? `${val}%` : val).join(' ');
+  };
   /**
    * Converts a color object with type and values to a string.
    * @param {object} color - Decomposed color
@@ -7473,8 +7484,720 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) ;
   }
 
+  /**
+   * This function create an object from keys, value and then assign to target
+   *
+   * @param {Object} obj : the target object to be assigned
+   * @param {string[]} keys
+   * @param {string | number} value
+   *
+   * @example
+   * const source = {}
+   * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
+   * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
+   *
+   * @example
+   * const source = { palette: { primary: 'var(--palette-primary)' } }
+   * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
+   * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
+   */
+  const assignNestedKeys = (obj, keys, value) => {
+    let temp = obj;
+    keys.forEach((k, index) => {
+      if (index === keys.length - 1) {
+        if (temp && typeof temp === 'object') {
+          temp[k] = value;
+        }
+      } else if (temp && typeof temp === 'object') {
+        if (!temp[k]) {
+          temp[k] = {};
+        }
+
+        temp = temp[k];
+      }
+    });
+  };
+  /**
+   *
+   * @param {Object} obj : source object
+   * @param {Function} callback : a function that will be called when
+   *                   - the deepest key in source object is reached
+   *                   - the value of the deepest key is NOT `undefined` | `null`
+   *
+   * @example
+   * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
+   * // ['palette', 'primary', 'main'] '#000000'
+   */
+
+  const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
+    function recurse(object, parentKeys = []) {
+      Object.entries(object).forEach(([key, value]) => {
+        if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
+          if (value !== undefined && value !== null) {
+            if (typeof value === 'object' && Object.keys(value).length > 0) {
+              recurse(value, [...parentKeys, key]);
+            } else {
+              callback([...parentKeys, key], value, object);
+            }
+          }
+        }
+      });
+    }
+
+    recurse(obj);
+  };
+
+  const getCssValue = (keys, value) => {
+    if (typeof value === 'number') {
+      if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
+        // CSS property that are unitless
+        return value;
+      }
+
+      const lastKey = keys[keys.length - 1];
+
+      if (lastKey.toLowerCase().indexOf('opacity') >= 0) {
+        // opacity values are unitless
+        return value;
+      }
+
+      return `${value}px`;
+    }
+
+    return value;
+  };
+  /**
+   * a function that parse theme and return { css, vars }
+   *
+   * @param {Object} theme
+   * @param {{
+   *  prefix?: string,
+   *  basePrefix?: string,
+   *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
+   * }} options.
+   *  `basePrefix`: defined by design system.
+   *  `prefix`: defined by application
+   *
+   *   the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
+   *
+   * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
+   *
+   * @example
+   * const { css, vars, parsedTheme } = parser({
+   *   fontSize: 12,
+   *   lineHeight: 1.2,
+   *   palette: { primary: { 500: 'var(--color)' } }
+   * }, { prefix: 'foo' })
+   *
+   * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--foo-color)' }
+   * console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+   * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
+   */
+
+
+  function cssVarsParser(theme, options) {
+    const {
+      prefix,
+      basePrefix = '',
+      shouldSkipGeneratingVar
+    } = options || {};
+    const css = {};
+    const vars = {};
+    const parsedTheme = {};
+    walkObjectDeep(theme, (keys, value) => {
+      if (typeof value === 'string' || typeof value === 'number') {
+        if (typeof value === 'string' && value.match(/var\(\s*--/)) {
+          // for CSS variable, apply prefix or remove basePrefix from the variable
+          if (!basePrefix && prefix) {
+            value = value.replace(/var\(\s*--/g, `var(--${prefix}-`);
+          } else {
+            value = prefix ? value.replace(new RegExp(`var\\(\\s*--${basePrefix}`, 'g'), `var(--${prefix}`) // removing spaces
+            : value.replace(new RegExp(`var\\(\\s*--${basePrefix}-`, 'g'), 'var(--');
+          }
+        }
+
+        if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
+          // only create css & var if `shouldSkipGeneratingVar` return false
+          const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
+          Object.assign(css, {
+            [cssVar]: getCssValue(keys, value)
+          });
+          assignNestedKeys(vars, keys, `var(${cssVar})`);
+        }
+      }
+
+      assignNestedKeys(parsedTheme, keys, value);
+    }, keys => keys[0] === 'vars' // skip 'vars/*' paths
+    );
+    return {
+      css,
+      vars,
+      parsedTheme
+    };
+  }
+
+  const DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
+  const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
+  const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
+  function getInitColorSchemeScript$1(options) {
+    const {
+      enableSystem,
+      defaultLightColorScheme = 'light',
+      defaultDarkColorScheme = 'dark',
+      modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+      colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+      attribute = DEFAULT_ATTRIBUTE
+    } = options || {};
+    return /*#__PURE__*/jsxRuntime_1("script", {
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML: {
+        __html: `(function() { try {
+        var mode = localStorage.getItem('${modeStorageKey}');
+        var colorScheme = '';
+        if (mode === 'system' || (!mode && !!${enableSystem})) {
+          // handle system mode
+          var mql = window.matchMedia('(prefers-color-scheme: dark)');
+          if (mql.matches) {
+            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
+          } else {
+            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
+          }
+        }
+        if (mode === 'light') {
+          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
+        }
+        if (mode === 'dark') {
+          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
+        }
+        if (colorScheme) {
+          document.documentElement.setAttribute('${attribute}', colorScheme);
+        }
+      } catch (e) {} })();`
+      }
+    });
+  }
+
+  function getSystemMode(mode) {
+    if (typeof window !== 'undefined' && mode === 'system') {
+      const mql = window.matchMedia('(prefers-color-scheme: dark)');
+
+      if (mql.matches) {
+        return 'dark';
+      }
+
+      return 'light';
+    }
+
+    return undefined;
+  }
+
+  function processState(state, callback) {
+    if (state.mode === 'light' || state.mode === 'system' && state.systemMode === 'light') {
+      return callback('light');
+    }
+
+    if (state.mode === 'dark' || state.mode === 'system' && state.systemMode === 'dark') {
+      return callback('dark');
+    }
+
+    return undefined;
+  }
+
+  function getColorScheme(state) {
+    return processState(state, mode => {
+      if (mode === 'light') {
+        return state.lightColorScheme;
+      }
+
+      if (mode === 'dark') {
+        return state.darkColorScheme;
+      }
+
+      return undefined;
+    });
+  }
+
+  function resolveValue(key, defaultValue) {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+
+    let value;
+
+    try {
+      value = localStorage.getItem(key) || undefined;
+    } catch (e) {// Unsupported
+    }
+
+    return value || defaultValue;
+  }
+
+  function useCurrentColorScheme(options) {
+    const {
+      defaultMode = 'light',
+      defaultLightColorScheme,
+      defaultDarkColorScheme,
+      supportedColorSchemes = [],
+      modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+      colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY
+    } = options;
+    const joinedColorSchemes = supportedColorSchemes.join(',');
+    const [state, setState] = React__namespace.useState(() => {
+      const initialMode = resolveValue(modeStorageKey, defaultMode);
+      return {
+        mode: initialMode,
+        systemMode: getSystemMode(initialMode),
+        lightColorScheme: resolveValue(`${colorSchemeStorageKey}-light`) || defaultLightColorScheme,
+        darkColorScheme: resolveValue(`${colorSchemeStorageKey}-dark`) || defaultDarkColorScheme
+      };
+    });
+    const colorScheme = getColorScheme(state);
+    const setMode = React__namespace.useCallback(mode => {
+      setState(currentState => {
+        const newMode = !mode ? defaultMode : mode;
+
+        if (typeof localStorage !== 'undefined') {
+          localStorage.setItem(modeStorageKey, newMode);
+        }
+
+        return _extends({}, currentState, {
+          mode: newMode,
+          systemMode: getSystemMode(newMode)
+        });
+      });
+    }, [modeStorageKey, defaultMode]);
+    const setColorScheme = React__namespace.useCallback(value => {
+      if (!value || typeof value === 'string') {
+        if (value && !supportedColorSchemes.includes(value)) {
+          console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
+        } else {
+          setState(currentState => {
+            const newState = _extends({}, currentState);
+
+            if (!value) {
+              // reset to default color scheme
+              newState.lightColorScheme = defaultLightColorScheme;
+              newState.darkColorScheme = defaultDarkColorScheme;
+              return newState;
+            }
+
+            processState(currentState, mode => {
+              localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
+
+              if (mode === 'light') {
+                newState.lightColorScheme = value;
+              }
+
+              if (mode === 'dark') {
+                newState.darkColorScheme = value;
+              }
+            });
+            return newState;
+          });
+        }
+      } else if (value.light && !supportedColorSchemes.includes(value.light) || value.dark && !supportedColorSchemes.includes(value.dark)) {
+        console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
+      } else {
+        setState(currentState => {
+          const newState = _extends({}, currentState);
+
+          if (value.light || value.light === null) {
+            newState.lightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
+          }
+
+          if (value.dark || value.dark === null) {
+            newState.darkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+          }
+
+          return newState;
+        });
+
+        if (value.light) {
+          localStorage.setItem(`${colorSchemeStorageKey}-light`, value.light);
+        }
+
+        if (value.dark) {
+          localStorage.setItem(`${colorSchemeStorageKey}-dark`, value.dark);
+        }
+      }
+    }, [colorSchemeStorageKey, supportedColorSchemes, defaultLightColorScheme, defaultDarkColorScheme]);
+    const handleMediaQuery = React__namespace.useCallback(e => {
+      if (state.mode === 'system') {
+        setState(currentState => _extends({}, currentState, {
+          systemMode: e.matches ? 'dark' : 'light'
+        }));
+      }
+    }, [state.mode]); // Ref hack to avoid adding handleMediaQuery as a dep
+
+    const mediaListener = React__namespace.useRef(handleMediaQuery);
+    mediaListener.current = handleMediaQuery;
+    React__namespace.useEffect(() => {
+      const handler = (...args) => mediaListener.current(...args); // Always listen to System preference
+
+
+      const media = window.matchMedia('(prefers-color-scheme: dark)'); // Intentionally use deprecated listener methods to support iOS & old browsers
+
+      media.addListener(handler);
+      handler(media);
+      return () => media.removeListener(handler);
+    }, []); // Save mode, lightColorScheme & darkColorScheme to localStorage
+
+    React__namespace.useEffect(() => {
+      if (state.mode) {
+        localStorage.setItem(modeStorageKey, state.mode);
+      }
+
+      processState(state, mode => {
+        if (mode === 'light') {
+          localStorage.setItem(`${colorSchemeStorageKey}-light`, state.lightColorScheme);
+        }
+
+        if (mode === 'dark') {
+          localStorage.setItem(`${colorSchemeStorageKey}-dark`, state.darkColorScheme);
+        }
+      });
+    }, [state, colorSchemeStorageKey, modeStorageKey]); // Handle when localStorage has changed
+
+    React__namespace.useEffect(() => {
+      const handleStorage = event => {
+        const value = event.newValue;
+
+        if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
+          // If the key is deleted, value will be null then reset color scheme to the default one.
+          if (event.key.endsWith('light')) {
+            setColorScheme({
+              light: value
+            });
+          }
+
+          if (event.key.endsWith('dark')) {
+            setColorScheme({
+              dark: value
+            });
+          }
+        }
+
+        if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
+          setMode(value || defaultMode);
+        }
+      };
+
+      window.addEventListener('storage', handleStorage);
+      return () => window.removeEventListener('storage', handleStorage);
+    }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode]);
+    return _extends({}, state, {
+      colorScheme,
+      setMode,
+      setColorScheme
+    });
+  }
+
+  /**
+   * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+   * and they does not need to remember the prefix (defined once).
+   */
+  function createGetCssVar(prefix = '') {
+    function appendVar(...vars) {
+      if (!vars.length) {
+        return '';
+      }
+
+      const value = vars[0];
+
+      if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))/)) {
+        return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;
+      }
+
+      return `, ${value}`;
+    } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
+
+
+    const getCssVar = (field, ...vars) => {
+      return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
+    };
+
+    return getCssVar;
+  }
+
+  const _excluded$2f = ["colorSchemes"],
+        _excluded2$c = ["colorSchemes"],
+        _excluded3$1 = ["components"];
+  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) {
+    var _baseTheme$breakpoint;
+
+    const {
+      theme: baseTheme = {},
+      defaultMode: desisgnSystemMode = 'light',
+      defaultColorScheme: designSystemColorScheme,
+      disableTransitionOnChange: designSystemTransitionOnChange = false,
+      enableColorScheme: designSystemEnableColorScheme = true,
+      prefix: designSystemPrefix = '',
+      shouldSkipGeneratingVar,
+      resolveTheme
+    } = options;
+    const systemSpacing = createSpacing(baseTheme.spacing);
+    const systemBreakpoints = createBreakpoints((_baseTheme$breakpoint = baseTheme.breakpoints) != null ? _baseTheme$breakpoint : {});
+
+    if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
+      console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+    }
+
+    const ColorSchemeContext = /*#__PURE__*/React__namespace.createContext(undefined);
+
+    const useColorScheme = () => {
+      const value = React__namespace.useContext(ColorSchemeContext);
+
+      if (!value) {
+        throw new Error(`MUI: \`useColorScheme\` must be called under <CssVarsProvider />` );
+      }
+
+      return value;
+    };
+
+    function CssVarsProvider({
+      children,
+      theme: themeProp = {},
+      prefix = designSystemPrefix,
+      modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+      attribute = DEFAULT_ATTRIBUTE,
+      defaultMode = desisgnSystemMode,
+      defaultColorScheme = designSystemColorScheme,
+      disableTransitionOnChange = designSystemTransitionOnChange,
+      enableColorScheme = designSystemEnableColorScheme
+    }) {
+      const {
+        colorSchemes: baseColorSchemes = {}
+      } = baseTheme,
+            restBaseTheme = _objectWithoutPropertiesLoose(baseTheme, _excluded$2f);
+
+      const {
+        colorSchemes: colorSchemesProp = {}
+      } = themeProp,
+            restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded2$c);
+
+      const hasMounted = React__namespace.useRef(false); // eslint-disable-next-line prefer-const
+
+      let _deepmerge = deepmerge(restBaseTheme, restThemeProp),
+          {
+        components = {}
+      } = _deepmerge,
+          mergedTheme = _objectWithoutPropertiesLoose(_deepmerge, _excluded3$1);
+
+      const colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
+      const allColorSchemes = Object.keys(colorSchemes);
+      const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
+      const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+      const {
+        mode,
+        setMode,
+        systemMode,
+        lightColorScheme,
+        darkColorScheme,
+        colorScheme,
+        setColorScheme
+      } = useCurrentColorScheme({
+        supportedColorSchemes: allColorSchemes,
+        defaultLightColorScheme,
+        defaultDarkColorScheme,
+        modeStorageKey,
+        defaultMode
+      });
+
+      const resolvedColorScheme = (() => {
+        if (!colorScheme) {
+          // This scope occurs on the server
+          if (defaultMode === 'dark') {
+            return defaultDarkColorScheme;
+          } // use light color scheme, if default mode is 'light' | 'auto'
+
+
+          return defaultLightColorScheme;
+        }
+
+        return colorScheme;
+      })();
+
+      const {
+        css: rootCss,
+        vars: rootVars,
+        parsedTheme
+      } = cssVarsParser(mergedTheme, {
+        prefix,
+        basePrefix: designSystemPrefix,
+        shouldSkipGeneratingVar
+      });
+      mergedTheme = _extends({}, parsedTheme, {
+        components,
+        colorSchemes,
+        prefix,
+        vars: rootVars,
+        spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
+        breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
+        getCssVar: createGetCssVar(prefix)
+      });
+      const styleSheet = {};
+      Object.entries(colorSchemes).forEach(([key, scheme]) => {
+        const {
+          css,
+          vars,
+          parsedTheme: parsedScheme
+        } = cssVarsParser(scheme, {
+          prefix,
+          basePrefix: designSystemPrefix,
+          shouldSkipGeneratingVar
+        });
+        mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
+
+        if (key === resolvedColorScheme) {
+          mergedTheme = _extends({}, mergedTheme, parsedScheme);
+        }
+
+        const resolvedDefaultColorScheme = (() => {
+          if (typeof defaultColorScheme === 'string') {
+            return defaultColorScheme;
+          }
+
+          if (defaultMode === 'dark') {
+            return defaultColorScheme.dark;
+          }
+
+          return defaultColorScheme.light;
+        })();
+
+        if (key === resolvedDefaultColorScheme) {
+          styleSheet[':root'] = css;
+        } else {
+          styleSheet[`[${attribute}="${key}"]`] = css;
+        }
+      });
+      React__namespace.useEffect(() => {
+        if (colorScheme) {
+          // attaches attribute to <html> because the css variables are attached to :root (html)
+          document.documentElement.setAttribute(attribute, colorScheme);
+        }
+      }, [colorScheme, attribute]);
+      useEnhancedEffect$1(() => {
+        if (!mode || !enableColorScheme) {
+          return undefined;
+        }
+
+        const priorColorScheme = document.documentElement.style.getPropertyValue('color-scheme'); // `color-scheme` tells browser to render built-in elements according to its value: `light` or `dark`
+
+        if (mode === 'system') {
+          document.documentElement.style.setProperty('color-scheme', systemMode);
+        } else {
+          document.documentElement.style.setProperty('color-scheme', mode);
+        }
+
+        return () => {
+          document.documentElement.style.setProperty('color-scheme', priorColorScheme);
+        };
+      }, [mode, systemMode, enableColorScheme]);
+      React__namespace.useEffect(() => {
+        let timer;
+
+        if (disableTransitionOnChange && hasMounted.current) {
+          // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
+          const css = document.createElement('style');
+          css.appendChild(document.createTextNode(DISABLE_CSS_TRANSITION));
+          document.head.appendChild(css); // Force browser repaint
+
+          (() => window.getComputedStyle(document.body))();
+
+          timer = setTimeout(() => {
+            document.head.removeChild(css);
+          }, 1);
+        }
+
+        return () => {
+          clearTimeout(timer);
+        };
+      }, [colorScheme, disableTransitionOnChange]);
+      React__namespace.useEffect(() => {
+        hasMounted.current = true;
+        return () => {
+          hasMounted.current = false;
+        };
+      }, []);
+      return /*#__PURE__*/jsxRuntime_2(ColorSchemeContext.Provider, {
+        value: {
+          mode,
+          setMode,
+          lightColorScheme,
+          darkColorScheme,
+          colorScheme,
+          setColorScheme,
+          allColorSchemes
+        },
+        children: [/*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
+          styles: {
+            ':root': rootCss
+          }
+        }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
+          styles: styleSheet
+        }), /*#__PURE__*/jsxRuntime_1(ThemeProvider, {
+          theme: resolveTheme ? resolveTheme(mergedTheme) : mergedTheme,
+          children: children
+        })]
+      });
+    }
+
+    CssVarsProvider.propTypes = {
+      /**
+       * The body attribute name to attach colorScheme.
+       */
+      attribute: PropTypes.string,
+
+      /**
+       * The component tree.
+       */
+      children: PropTypes.node,
+
+      /**
+       * The initial color scheme used.
+       */
+      defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+
+      /**
+       * The initial mode used.
+       */
+      defaultMode: PropTypes.string,
+
+      /**
+       * Disable CSS transitions when switching between modes or color schemes
+       */
+      disableTransitionOnChange: PropTypes.bool,
+
+      /**
+       * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI
+       */
+      enableColorScheme: PropTypes.bool,
+
+      /**
+       * The key in the local storage used to store current color scheme.
+       */
+      modeStorageKey: PropTypes.string,
+
+      /**
+       * CSS variable prefix.
+       */
+      prefix: PropTypes.string,
+
+      /**
+       * The calculated theme object that will be passed through context.
+       */
+      theme: PropTypes.object
+    } ;
+    return {
+      CssVarsProvider,
+      useColorScheme,
+      getInitColorSchemeScript: getInitColorSchemeScript$1
+    };
+  }
+
   const _excluded$2e = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
-        _excluded2$a = ["type", "mode"];
+        _excluded2$b = ["type", "mode"];
   function adaptV4Theme(inputTheme) {
     {
       console.warn(['MUI: adaptV4Theme() is deprecated.', 'Follow the upgrade guide on https://mui.com/r/migration-v4#theme.'].join('\n'));
@@ -7539,7 +8262,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       type: typeInput,
       mode: modeInput
     } = palette,
-          paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2$a);
+          paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2$b);
 
     const finalMode = modeInput || typeInput || 'light';
     theme.palette = _extends({
@@ -8633,6 +9356,36 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return output;
   }
 
+  function useBadge(props) {
+    const {
+      badgeContent: badgeContentProp,
+      invisible: invisibleProp = false,
+      max: maxProp = 99,
+      showZero = false
+    } = props;
+    const prevProps = usePreviousProps$1({
+      badgeContent: badgeContentProp,
+      max: maxProp
+    });
+    let invisible = invisibleProp;
+
+    if (invisibleProp === false && badgeContentProp === 0 && !showZero) {
+      invisible = true;
+    }
+
+    const {
+      badgeContent,
+      max = maxProp
+    } = invisible ? prevProps : props;
+    const displayValue = badgeContent && Number(badgeContent) > max ? `${max}+` : badgeContent;
+    return {
+      badgeContent,
+      invisible,
+      max,
+      displayValue
+    };
+  }
+
   const defaultGenerator = componentName => componentName;
 
   const createClassNameGenerator = () => {
@@ -8681,224 +9434,53 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return result;
   }
 
-  function getBackdropUtilityClass(slot) {
-    return generateUtilityClass('MuiBackdrop', slot);
+  function getBadgeUtilityClass$1(slot) {
+    return generateUtilityClass('BaseBadge', slot);
   }
-  const backdropUnstyledClasses = generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
-  var backdropUnstyledClasses$1 = backdropUnstyledClasses;
+  generateUtilityClasses('BaseBadge', ['root', 'badge', 'invisible']);
 
-  const _excluded$2d = ["classes", "className", "invisible", "component", "components", "componentsProps", "theme"];
+  const _excluded$2d = ["badgeContent", "component", "children", "className", "components", "componentsProps", "invisible", "max", "showZero"];
 
   const useUtilityClasses$1O = ownerState => {
     const {
-      classes,
-      invisible
-    } = ownerState;
-    const slots = {
-      root: ['root', invisible && 'invisible']
-    };
-    return composeClasses(slots, getBackdropUtilityClass, classes);
-  };
-
-  const BackdropUnstyled = /*#__PURE__*/React__namespace.forwardRef(function BackdropUnstyled(props, ref) {
-    const {
-      classes: classesProp,
-      className,
-      invisible = false,
-      component = 'div',
-      components = {},
-      componentsProps = {},
-
-      /* eslint-disable react/prop-types */
-      theme
-    } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2d);
-
-    const ownerState = _extends({}, props, {
-      classes: classesProp,
       invisible
-    });
-
-    const classes = useUtilityClasses$1O(ownerState);
-    const Root = components.Root || component;
-    const rootProps = componentsProps.root || {};
-    return /*#__PURE__*/jsxRuntime_1(Root, _extends({
-      "aria-hidden": true
-    }, rootProps, !isHostComponent(Root) && {
-      as: component,
-      ownerState: _extends({}, ownerState, rootProps.ownerState),
-      theme
-    }, {
-      ref: ref
-    }, other, {
-      className: clsx(classes.root, rootProps.className, className)
-    }));
-  });
-  BackdropUnstyled.propTypes
-  /* remove-proptypes */
-  = {
-    // ----------------------------- Warning --------------------------------
-    // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
-    // ----------------------------------------------------------------------
-
-    /**
-     * The content of the component.
-     */
-    children: PropTypes.node,
-
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes: PropTypes.object,
-
-    /**
-     * @ignore
-     */
-    className: PropTypes.string,
-
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component: PropTypes.elementType,
-
-    /**
-     * The components used for each slot inside the Backdrop.
-     * Either a string to use a HTML element or a component.
-     * @default {}
-     */
-    components: PropTypes.shape({
-      Root: PropTypes.elementType
-    }),
-
-    /**
-     * The props used for each slot inside the Backdrop.
-     * @default {}
-     */
-    componentsProps: PropTypes.shape({
-      root: PropTypes.object
-    }),
-
-    /**
-     * If `true`, the backdrop is invisible.
-     * It can be used when rendering a popover or a custom select component.
-     * @default false
-     */
-    invisible: PropTypes.bool
-  } ;
-  var BackdropUnstyled$1 = BackdropUnstyled;
-
-  function useBadge(props) {
-    const {
-      anchorOrigin: anchorOriginProp = {
-        vertical: 'top',
-        horizontal: 'right'
-      },
-      badgeContent: badgeContentProp,
-      invisible: invisibleProp = false,
-      max: maxProp = 99,
-      showZero = false,
-      variant: variantProp = 'standard'
-    } = props;
-    const prevProps = usePreviousProps$1({
-      anchorOrigin: anchorOriginProp,
-      badgeContent: badgeContentProp,
-      max: maxProp,
-      variant: variantProp
-    });
-    let invisible = invisibleProp;
-
-    if (invisibleProp === false && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
-      invisible = true;
-    }
-
-    const {
-      anchorOrigin = anchorOriginProp,
-      badgeContent,
-      max = maxProp,
-      variant = variantProp
-    } = invisible ? prevProps : props;
-    let displayValue = '';
-
-    if (variant !== 'dot') {
-      displayValue = badgeContent && Number(badgeContent) > max ? `${max}+` : badgeContent;
-    }
-
-    return {
-      anchorOrigin,
-      badgeContent,
-      invisible,
-      max,
-      variant,
-      displayValue
-    };
-  }
-
-  function getBadgeUtilityClass(slot) {
-    return generateUtilityClass('MuiBadge', slot);
-  }
-  const badgeUnstyledClasses = generateUtilityClasses('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopLeft', 'anchorOriginTopRight', 'anchorOriginBottomLeft', 'anchorOriginBottomRight', 'invisible']);
-  var badgeUnstyledClasses$1 = badgeUnstyledClasses;
-
-  const _excluded$2c = ["anchorOrigin", "classes", "badgeContent", "component", "children", "className", "components", "componentsProps", "invisible", "max", "showZero", "variant"];
-
-  const useUtilityClasses$1N = ownerState => {
-    const {
-      variant,
-      anchorOrigin,
-      invisible,
-      classes
     } = ownerState;
     const slots = {
       root: ['root'],
-      badge: ['badge', variant, `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, invisible && 'invisible']
+      badge: ['badge', invisible && 'invisible']
     };
-    return composeClasses(slots, getBadgeUtilityClass, classes);
+    return composeClasses(slots, getBadgeUtilityClass$1, undefined);
   };
 
   const BadgeUnstyled = /*#__PURE__*/React__namespace.forwardRef(function BadgeUnstyled(props, ref) {
     const {
-      anchorOrigin: anchorOriginProp = {
-        vertical: 'top',
-        horizontal: 'right'
-      },
-      classes: classesProp,
       component,
       children,
       className,
       components = {},
       componentsProps = {},
       max: maxProp = 99,
-      showZero = false,
-      variant: variantProp = 'standard'
+      showZero = false
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2c);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2d);
 
     const {
-      anchorOrigin,
       badgeContent,
       max,
-      variant,
       displayValue,
       invisible
     } = useBadge(_extends({}, props, {
-      anchorOrigin: anchorOriginProp,
-      max: maxProp,
-      variant: variantProp
+      max: maxProp
     }));
 
     const ownerState = _extends({}, props, {
-      anchorOrigin,
       badgeContent,
-      classes: classesProp,
       invisible,
       max,
-      variant,
       showZero
     });
 
-    const classes = useUtilityClasses$1N(ownerState);
+    const classes = useUtilityClasses$1O(ownerState);
     const Root = component || components.Root || 'span';
     const rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root), ownerState);
     const Badge = components.Badge || 'span';
@@ -8921,18 +9503,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     // |     To update them edit the d.ts file and run "yarn proptypes"     |
     // ----------------------------------------------------------------------
 
-    /**
-     * The anchor of the badge.
-     * @default {
-     *   vertical: 'top',
-     *   horizontal: 'right',
-     * }
-     */
-    anchorOrigin: PropTypes.shape({
-      horizontal: PropTypes.oneOf(['left', 'right']).isRequired,
-      vertical: PropTypes.oneOf(['bottom', 'top']).isRequired
-    }),
-
     /**
      * The content rendered within the badge.
      */
@@ -8943,11 +9513,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      */
     children: PropTypes.node,
 
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes: PropTypes.object,
-
     /**
      * @ignore
      */
@@ -8994,13 +9559,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * Controls whether the badge is hidden when `badgeContent` is zero.
      * @default false
      */
-    showZero: PropTypes.bool,
-
-    /**
-     * The variant to use.
-     * @default 'standard'
-     */
-    variant: PropTypes.string
+    showZero: PropTypes.bool
   } ;
   var BadgeUnstyled$1 = BadgeUnstyled;
 
@@ -9018,12 +9577,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *
    * Demos:
    *
-   * - [Click Away Listener](https://mui.com/components/click-away-listener/)
-   * - [Menus](https://mui.com/components/menus/)
+   * - [Click Away Listener](https://mui.com/base/react-click-away-listener/)
    *
    * API:
    *
-   * - [ClickAwayListener API](https://mui.com/api/click-away-listener/)
+   * - [ClickAwayListener API](https://mui.com/base/api/click-away-listener/)
    */
   function ClickAwayListener(props) {
     const {
@@ -11236,8 +11794,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   var Portal$1 = Portal;
 
-  const _excluded$2b = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "ownerState", "placement", "popperOptions", "popperRef", "TransitionProps"],
-        _excluded2$9 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition"];
+  const _excluded$2c = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "ownerState", "placement", "popperOptions", "popperRef", "TransitionProps"],
+        _excluded2$a = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition"];
 
   function flipPlacement(placement, direction) {
     if (direction === 'ltr') {
@@ -11282,7 +11840,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       popperRef: popperRefProp,
       TransitionProps
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2b);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2c);
 
     const tooltipRef = React__namespace.useRef(null);
     const ownRef = useForkRef(tooltipRef, ref);
@@ -11403,7 +11961,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       style,
       transition = false
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded2$9);
+          other = _objectWithoutPropertiesLoose(props, _excluded2$a);
 
     const [exited, setExited] = React__namespace.useState(true);
 
@@ -11892,7 +12450,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    */
 
 
-  function Unstable_TrapFocus(props) {
+  function TrapFocus(props) {
     const {
       children,
       disableAutoFocus = false,
@@ -12097,7 +12655,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  Unstable_TrapFocus.propTypes
+  TrapFocus.propTypes
   /* remove-proptypes */
   = {
     // ----------------------------- Warning --------------------------------
@@ -12163,7 +12721,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   {
     // eslint-disable-next-line
-    Unstable_TrapFocus['propTypes' + ''] = exactProp(Unstable_TrapFocus.propTypes);
+    TrapFocus['propTypes' + ''] = exactProp(TrapFocus.propTypes);
   }
 
   function getModalUtilityClass(slot) {
@@ -12172,9 +12730,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   const modalUnstyledClasses = generateUtilityClasses('MuiModal', ['root', 'hidden']);
   var modalUnstyledClasses$1 = modalUnstyledClasses;
 
-  const _excluded$2a = ["BackdropComponent", "BackdropProps", "children", "classes", "className", "closeAfterTransition", "component", "components", "componentsProps", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "theme", "onTransitionEnter", "onTransitionExited"];
+  const _excluded$2b = ["BackdropComponent", "BackdropProps", "children", "classes", "className", "closeAfterTransition", "component", "components", "componentsProps", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "theme", "onTransitionEnter", "onTransitionExited"];
 
-  const useUtilityClasses$1M = ownerState => {
+  const useUtilityClasses$1N = ownerState => {
     const {
       open,
       exited,
@@ -12200,12 +12758,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   /**
    * Modal is a lower-level construct that is leveraged by the following components:
    *
-   * - [Dialog](/api/dialog/)
-   * - [Drawer](/api/drawer/)
-   * - [Menu](/api/menu/)
-   * - [Popover](/api/popover/)
+   * - [Dialog](/material-ui/api/dialog/)
+   * - [Drawer](/material-ui/api/drawer/)
+   * - [Menu](/material-ui/api/menu/)
+   * - [Popover](/material-ui/api/popover/)
    *
-   * If you are creating a modal dialog, you probably want to use the [Dialog](/api/dialog/) component
+   * If you are creating a modal dialog, you probably want to use the [Dialog](/material-ui/api/dialog/) component
    * rather than directly using Modal.
    *
    * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
@@ -12244,7 +12802,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       onTransitionEnter,
       onTransitionExited
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2a);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2b);
 
     const [exited, setExited] = React__namespace.useState(true);
     const modal = React__namespace.useRef({});
@@ -12321,7 +12879,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       keepMounted
     });
 
-    const classes = useUtilityClasses$1M(ownerState);
+    const classes = useUtilityClasses$1N(ownerState);
 
     if (!keepMounted && !open && (!hasTransition || exited)) {
       return null;
@@ -12415,9 +12973,10 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         onKeyDown: handleKeyDown,
         className: clsx(classes.root, rootProps.className, className),
         children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/jsxRuntime_1(BackdropComponent, _extends({
+          "aria-hidden": true,
           open: open,
           onClick: handleBackdropClick
-        }, BackdropProps)) : null, /*#__PURE__*/jsxRuntime_1(Unstable_TrapFocus, {
+        }, BackdropProps)) : null, /*#__PURE__*/jsxRuntime_1(TrapFocus, {
           disableEnforceFocus: disableEnforceFocus,
           disableAutoFocus: disableAutoFocus,
           disableRestoreFocus: disableRestoreFocus,
@@ -12442,7 +13001,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     BackdropComponent: PropTypes.elementType,
 
     /**
-     * Props applied to the [`BackdropUnstyled`](/api/backdrop-unstyled/) element.
+     * Props applied to the backdrop element.
      */
     BackdropProps: PropTypes.object,
 
@@ -13391,11 +13950,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const _excluded$29 = ["aria-label", "aria-valuetext", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
+  const _excluded$2a = ["aria-label", "aria-valuetext", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
 
   const Identity = x => x;
 
-  const useUtilityClasses$1L = ownerState => {
+  const useUtilityClasses$1M = ownerState => {
     const {
       disabled,
       dragging,
@@ -13452,7 +14011,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       components = {},
       componentsProps = {}
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$29); // all props with defaults
+          other = _objectWithoutPropertiesLoose(props, _excluded$2a); // all props with defaults
     // consider extracting to hook an reusing the lint rule for the varints
 
 
@@ -13511,7 +14070,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const Input = components.Input || 'input';
     const inputProps = appendOwnerState(Input, componentsProps.input, ownerState);
     const hiddenInputProps = getHiddenInputProps();
-    const classes = useUtilityClasses$1L(ownerState);
+    const classes = useUtilityClasses$1M(ownerState);
     return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, getRootProps({
       onMouseDown
     }), {
@@ -13851,7 +14410,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var SliderUnstyled$1 = SliderUnstyled;
 
-  const _excluded$28 = ["onChange", "maxRows", "minRows", "style", "value"];
+  const _excluded$29 = ["onChange", "maxRows", "minRows", "style", "value"];
 
   function getStyleValue(computedStyle, property) {
     return parseInt(computedStyle[property], 10) || 0;
@@ -13880,7 +14439,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       style,
       value
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$28);
+          other = _objectWithoutPropertiesLoose(props, _excluded$29);
 
     const {
       current: isControlled
@@ -14080,7 +14639,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }, mixins);
   }
 
-  const _excluded$27 = ["mode", "contrastThreshold", "tonalOffset"];
+  const _excluded$28 = ["mode", "contrastThreshold", "tonalOffset"];
   const light = {
     // The colors used to style the text.
     text: {
@@ -14264,7 +14823,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-          other = _objectWithoutPropertiesLoose(palette, _excluded$27);
+          other = _objectWithoutPropertiesLoose(palette, _excluded$28);
 
     const primary = palette.primary || getDefaultPrimary(mode);
     const secondary = palette.secondary || getDefaultSecondary(mode);
@@ -14400,7 +14959,7 @@ const theme2 = createTheme({ palette: {
     return paletteOutput;
   }
 
-  const _excluded$26 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+  const _excluded$27 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 
   function round$1(value) {
     return Math.round(value * 1e5) / 1e5;
@@ -14433,7 +14992,7 @@ const theme2 = createTheme({ palette: {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-          other = _objectWithoutPropertiesLoose(_ref, _excluded$26);
+          other = _objectWithoutPropertiesLoose(_ref, _excluded$27);
 
     {
       if (typeof fontSize !== 'number') {
@@ -14501,7 +15060,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$25 = ["duration", "easing", "delay"];
+  const _excluded$26 = ["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 = {
@@ -14556,7 +15115,7 @@ const theme2 = createTheme({ palette: {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-            other = _objectWithoutPropertiesLoose(options, _excluded$25);
+            other = _objectWithoutPropertiesLoose(options, _excluded$26);
 
       {
         const isString = value => typeof value === 'string'; // IE11 support, replace with Number.isNaN
@@ -14612,19 +15171,19 @@ const theme2 = createTheme({ palette: {
   };
   var zIndex$1 = zIndex;
 
-  const _excluded$24 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+  const _excluded$25 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 
-  function createTheme(options = {}, ...args) {
+  function createTheme$1(options = {}, ...args) {
     const {
       mixins: mixinsInput = {},
       palette: paletteInput = {},
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-          other = _objectWithoutPropertiesLoose(options, _excluded$24);
+          other = _objectWithoutPropertiesLoose(options, _excluded$25);
 
     const palette = createPalette(paletteInput);
-    const systemTheme = createTheme$1(options);
+    const systemTheme = createTheme$2(options);
     let muiTheme = deepmerge(systemTheme, {
       mixins: createMixins(systemTheme.breakpoints, systemTheme.spacing, mixinsInput),
       palette,
@@ -14683,11 +15242,11 @@ const theme2 = createTheme({ palette: {
       }
     }
 
-    return createTheme(...args);
+    return createTheme$1(...args);
   }
 
   function createMuiStrictModeTheme(options, ...args) {
-    return createTheme(deepmerge({
+    return createTheme$1(deepmerge({
       unstable_strictMode: true
     }, options), ...args);
   }
@@ -14894,11 +15453,11 @@ Use unitless line heights instead.` );
     return theme;
   }
 
-  const defaultTheme$1 = createTheme();
-  var defaultTheme$2 = defaultTheme$1;
+  const defaultTheme$2 = createTheme$1();
+  var defaultTheme$3 = defaultTheme$2;
 
   function useTheme() {
-    const theme = useTheme$1(defaultTheme$2);
+    const theme = useTheme$1(defaultTheme$3);
 
     {
       // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -14915,14 +15474,14 @@ Use unitless line heights instead.` );
     return useThemeProps$1({
       props,
       name,
-      defaultTheme: defaultTheme$2
+      defaultTheme: defaultTheme$3
     });
   }
 
   const rootShouldForwardProp = prop => shouldForwardProp(prop) && prop !== 'classes';
   const slotShouldForwardProp = shouldForwardProp;
   const styled = createStyled({
-    defaultTheme: defaultTheme$2,
+    defaultTheme: defaultTheme$3,
     rootShouldForwardProp
   });
   var styled$1 = styled;
@@ -14945,6 +15504,112 @@ You have to import it from @mui/styles.
 See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
 
+  const _excluded$24 = ["colorSchemes", "opacity"],
+        _excluded2$9 = ["palette"];
+  const defaultOpacity = {
+    active: 0.54,
+    hover: 0.04,
+    selected: 0.08,
+    disabled: 0.26,
+    focus: 0.12
+  };
+
+  function createTheme(options = {}, ...args) {
+    var _colorSchemesInput$li, _colorSchemesInput$da;
+
+    const {
+      colorSchemes: colorSchemesInput = {},
+      opacity: opacityInput = {}
+    } = options,
+          input = _objectWithoutPropertiesLoose(options, _excluded$24); // eslint-disable-next-line prefer-const
+
+
+    let _createThemeWithoutVa = createTheme$1(_extends({}, input, colorSchemesInput.light && {
+      palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
+    })),
+        {
+      palette: lightPalette
+    } = _createThemeWithoutVa,
+        muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2$9);
+
+    const {
+      palette: darkPalette
+    } = createTheme$1({
+      palette: _extends({
+        mode: 'dark'
+      }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
+    });
+    colorSchemesInput.light = {
+      palette: lightPalette
+    };
+    colorSchemesInput.dark = {
+      palette: darkPalette
+    };
+    const colorSchemes = {};
+    Object.keys(colorSchemesInput).forEach(key => {
+      const palette = createPalette(colorSchemesInput[key].palette);
+      Object.keys(palette).forEach(color => {
+        const colors = palette[color];
+
+        if (colors.main) {
+          palette[color].mainChannel = colorChannel(colors.main);
+        }
+
+        if (colors.light) {
+          palette[color].lightChannel = colorChannel(colors.light);
+        }
+
+        if (colors.dark) {
+          palette[color].darkChannel = colorChannel(colors.dark);
+        }
+
+        if (colors.primary) {
+          palette[color].primaryChannel = colorChannel(colors.primary);
+        }
+
+        if (colors.secondary) {
+          palette[color].secondaryChannel = colorChannel(colors.secondary);
+        }
+
+        if (colors.disabled) {
+          palette[color].disabledChannel = colorChannel(colors.disabled);
+        }
+      });
+      colorSchemes[key] = {
+        palette
+      };
+    });
+
+    const opacity = _extends({}, defaultOpacity, opacityInput);
+
+    muiTheme.colorSchemes = colorSchemes;
+    muiTheme.opacity = opacity;
+    muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+    return muiTheme;
+  }
+
+  const defaultTheme$1 = createTheme();
+  const {
+    CssVarsProvider: Experimental_CssVarsProvider,
+    useColorScheme,
+    getInitColorSchemeScript
+  } = createCssVarsProvider({
+    theme: defaultTheme$1,
+    defaultColorScheme: {
+      light: 'light',
+      dark: 'dark'
+    },
+    prefix: 'md',
+    resolveTheme: theme => {
+      const newTheme = _extends({}, theme, {
+        typography: createTypography(theme.palette, theme.typography)
+      });
+
+      return newTheme;
+    },
+    shouldSkipGeneratingVar: keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/)
+  });
+
   function getSvgIconUtilityClass(slot) {
     return generateUtilityClass('MuiSvgIcon', slot);
   }
@@ -14953,7 +15618,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$23 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 
-  const useUtilityClasses$1K = ownerState => {
+  const useUtilityClasses$1L = ownerState => {
     const {
       color,
       fontSize,
@@ -15038,7 +15703,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       more.viewBox = viewBox;
     }
 
-    const classes = useUtilityClasses$1K(ownerState);
+    const classes = useUtilityClasses$1L(ownerState);
     return /*#__PURE__*/jsxRuntime_2(SvgIconRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -15078,7 +15743,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
      * @default 'inherit'
      */
@@ -16173,7 +16840,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$22 = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
 
-  const useUtilityClasses$1J = ownerState => {
+  const useUtilityClasses$1K = ownerState => {
     const {
       orientation,
       classes
@@ -16244,7 +16911,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }));
   /**
    * The Collapse transition is used by the
-   * [Vertical Stepper](/components/steppers/#vertical-stepper) StepContent component.
+   * [Vertical Stepper](/material-ui/react-stepper/#vertical-stepper) StepContent component.
    * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
    */
 
@@ -16281,7 +16948,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       collapsedSize: collapsedSizeProp
     });
 
-    const classes = useUtilityClasses$1J(ownerState);
+    const classes = useUtilityClasses$1K(ownerState);
     const theme = useTheme();
     const timer = React__namespace.useRef();
     const wrapperRef = React__namespace.useRef(null);
@@ -16595,7 +17262,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return (alphaValue / 100).toFixed(2);
   };
 
-  const useUtilityClasses$1I = ownerState => {
+  const useUtilityClasses$1J = ownerState => {
     const {
       square,
       elevation,
@@ -16655,7 +17322,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1I(ownerState);
+    const classes = useUtilityClasses$1J(ownerState);
 
     {
       // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -16762,7 +17429,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$20 = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
 
-  const useUtilityClasses$1H = ownerState => {
+  const useUtilityClasses$1I = ownerState => {
     const {
       classes,
       square,
@@ -16906,7 +17573,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       expanded
     });
 
-    const classes = useUtilityClasses$1H(ownerState);
+    const classes = useUtilityClasses$1I(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AccordionRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -17010,7 +17677,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * The component used for the transition.
-     * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+     * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
      * @default Collapse
      */
     TransitionComponent: PropTypes.elementType,
@@ -17031,7 +17698,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1$ = ["className", "disableSpacing"];
 
-  const useUtilityClasses$1G = ownerState => {
+  const useUtilityClasses$1H = ownerState => {
     const {
       classes,
       disableSpacing
@@ -17079,7 +17746,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableSpacing
     });
 
-    const classes = useUtilityClasses$1G(ownerState);
+    const classes = useUtilityClasses$1H(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionActionsRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -17130,7 +17797,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1_ = ["className"];
 
-  const useUtilityClasses$1F = ownerState => {
+  const useUtilityClasses$1G = ownerState => {
     const {
       classes
     } = ownerState;
@@ -17161,7 +17828,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           other = _objectWithoutPropertiesLoose(props, _excluded$1_);
 
     const ownerState = props;
-    const classes = useUtilityClasses$1F(ownerState);
+    const classes = useUtilityClasses$1G(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionDetailsRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -17634,7 +18301,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   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$1E = ownerState => {
+  const useUtilityClasses$1F = ownerState => {
     const {
       disabled,
       focusVisible,
@@ -17762,11 +18429,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         buttonRef.current.focus();
       }
     }), []);
+    const [mountedState, setMountedState] = React__namespace.useState(false);
+    React__namespace.useEffect(() => {
+      setMountedState(true);
+    }, []);
+    const enableTouchRipple = mountedState && !disableRipple && !disabled;
     React__namespace.useEffect(() => {
-      if (focusVisible && focusRipple && !disableRipple) {
+      if (focusVisible && focusRipple && !disableRipple && mountedState) {
         rippleRef.current.pulsate();
       }
-    }, [disableRipple, focusRipple, focusVisible]);
+    }, [disableRipple, focusRipple, focusVisible, mountedState]);
 
     function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {
       return useEventCallback(event => {
@@ -17910,11 +18582,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
     const handleRef = useForkRef(ref, handleOwnRef);
-    const [mountedState, setMountedState] = React__namespace.useState(false);
-    React__namespace.useEffect(() => {
-      setMountedState(true);
-    }, []);
-    const enableTouchRipple = mountedState && !disableRipple && !disabled;
 
     {
       // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -17936,7 +18603,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       focusVisible
     });
 
-    const classes = useUtilityClasses$1E(ownerState);
+    const classes = useUtilityClasses$1F(ownerState);
     return /*#__PURE__*/jsxRuntime_2(ButtonBaseRoot, _extends({
       as: ComponentProp,
       className: clsx(classes.root, className),
@@ -18172,7 +18839,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1X = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
 
-  const useUtilityClasses$1D = ownerState => {
+  const useUtilityClasses$1E = ownerState => {
     const {
       classes,
       expanded,
@@ -18293,7 +18960,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableGutters
     });
 
-    const classes = useUtilityClasses$1D(ownerState);
+    const classes = useUtilityClasses$1E(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AccordionSummaryRoot, _extends({
       focusRipple: false,
       disableRipple: true,
@@ -18381,7 +19048,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1W = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
 
-  const useUtilityClasses$1C = ownerState => {
+  const useUtilityClasses$1D = ownerState => {
     const {
       classes,
       disabled,
@@ -18459,7 +19126,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   }));
   /**
-   * Refer to the [Icons](/components/icons/) section of the documentation
+   * Refer to the [Icons](/material-ui/icons/) section of the documentation
    * regarding the available icon options.
    */
 
@@ -18488,7 +19155,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size
     });
 
-    const classes = useUtilityClasses$1C(ownerState);
+    const classes = useUtilityClasses$1D(ownerState);
     return /*#__PURE__*/jsxRuntime_1(IconButtonRoot, _extends({
       className: clsx(classes.root, className),
       centerRipple: true,
@@ -18532,7 +19199,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'default'
      */
     color: PropTypes
@@ -18609,7 +19278,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1V = ["action", "children", "className", "closeText", "color", "icon", "iconMapping", "onClose", "role", "severity", "variant"];
 
-  const useUtilityClasses$1B = ownerState => {
+  const useUtilityClasses$1C = ownerState => {
     const {
       variant,
       color,
@@ -18733,7 +19402,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1B(ownerState);
+    const classes = useUtilityClasses$1C(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AlertRoot, _extends({
       role: role,
       elevation: 0,
@@ -18799,13 +19468,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Override the default label for the *close popup* icon button.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @default 'Close'
      */
     closeText: PropTypes.string,
 
     /**
-     * The main color for the alert. Unless provided, the value is taken from the `severity` prop.
+     * The color of the component. Unless provided, the value is taken from the `severity` prop.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      */
     color: PropTypes
     /* @typescript-to-proptypes-ignore */
@@ -18873,7 +19544,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1U = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
 
-  const useUtilityClasses$1A = ownerState => {
+  const useUtilityClasses$1B = ownerState => {
     const {
       align,
       gutterBottom,
@@ -18974,7 +19645,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
 
     const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-    const classes = useUtilityClasses$1A(ownerState);
+    const classes = useUtilityClasses$1B(ownerState);
     return /*#__PURE__*/jsxRuntime_1(TypographyRoot, _extends({
       as: Component,
       ref: ref,
@@ -19084,7 +19755,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1T = ["className"];
 
-  const useUtilityClasses$1z = ownerState => {
+  const useUtilityClasses$1A = ownerState => {
     const {
       classes
     } = ownerState;
@@ -19118,7 +19789,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           other = _objectWithoutPropertiesLoose(props, _excluded$1T);
 
     const ownerState = props;
-    const classes = useUtilityClasses$1z(ownerState);
+    const classes = useUtilityClasses$1A(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AlertTitleRoot, _extends({
       gutterBottom: true,
       component: "div",
@@ -19165,7 +19836,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1S = ["className", "color", "enableColorOnDark", "position"];
 
-  const useUtilityClasses$1y = ownerState => {
+  const useUtilityClasses$1z = ownerState => {
     const {
       color,
       position,
@@ -19263,7 +19934,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       enableColorOnDark
     });
 
-    const classes = useUtilityClasses$1y(ownerState);
+    const classes = useUtilityClasses$1z(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AppBarRoot, _extends({
       square: true,
       component: "header",
@@ -19297,7 +19968,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -19334,13 +20007,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *
    * Demos:
    *
-   * - [Autocomplete](https://mui.com/components/autocomplete/)
-   * - [Menus](https://mui.com/components/menus/)
-   * - [Popper](https://mui.com/components/popper/)
+   * - [Autocomplete](https://mui.com/material-ui/react-autocomplete/)
+   * - [Menus](https://mui.com/material-ui/react-menu/)
+   * - [Popper](https://mui.com/material-ui/react-popper/)
    *
    * API:
    *
-   * - [Popper API](https://mui.com/api/popper/)
+   * - [Popper API](https://mui.com/material-ui/api/popper/)
    */
 
   const Popper = /*#__PURE__*/React__namespace.forwardRef(function Popper(inProps, ref) {
@@ -19474,7 +20147,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1R = ["className", "color", "component", "disableGutters", "disableSticky", "inset"];
 
-  const useUtilityClasses$1x = ownerState => {
+  const useUtilityClasses$1y = ownerState => {
     const {
       classes,
       color,
@@ -19547,7 +20220,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       inset
     });
 
-    const classes = useUtilityClasses$1x(ownerState);
+    const classes = useUtilityClasses$1y(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListSubheaderRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -19627,7 +20300,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1Q = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant"];
 
-  const useUtilityClasses$1w = ownerState => {
+  const useUtilityClasses$1x = ownerState => {
     const {
       classes,
       disabled,
@@ -19961,7 +20634,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1w(ownerState);
+    const classes = useUtilityClasses$1x(ownerState);
     const moreProps = component === ButtonBase$1 ? _extends({
       component: ComponentProp || 'div',
       focusVisibleClassName: classes.focusVisible
@@ -20060,7 +20733,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     clickable: PropTypes.bool,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'default'
      */
     color: PropTypes
@@ -20174,7 +20849,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   function GlobalStyles(props) {
     return /*#__PURE__*/jsxRuntime_1(GlobalStyles$1, _extends({}, props, {
-      defaultTheme: defaultTheme$2
+      defaultTheme: defaultTheme$3
     }));
   }
 
@@ -20243,7 +20918,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return [styles.input, ownerState.size === 'small' && styles.inputSizeSmall, ownerState.multiline && styles.inputMultiline, ownerState.type === 'search' && styles.inputTypeSearch, ownerState.startAdornment && styles.inputAdornedStart, ownerState.endAdornment && styles.inputAdornedEnd, ownerState.hiddenLabel && styles.inputHiddenLabel];
   };
 
-  const useUtilityClasses$1v = ownerState => {
+  const useUtilityClasses$1w = ownerState => {
     const {
       classes,
       color,
@@ -20655,7 +21330,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       type
     });
 
-    const classes = useUtilityClasses$1v(ownerState);
+    const classes = useUtilityClasses$1w(ownerState);
     const Root = components.Root || InputBaseRoot;
     const rootProps = componentsProps.root || {};
     const Input = components.Input || InputBaseComponent;
@@ -20741,7 +21416,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
      */
     color: PropTypes
@@ -20843,7 +21520,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
     /**
-     * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
+     * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
      * @default false
      */
     multiline: PropTypes.bool,
@@ -20983,7 +21660,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1O = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "value"];
 
-  const useUtilityClasses$1u = ownerState => {
+  const useUtilityClasses$1v = ownerState => {
     const {
       classes,
       disablePortal,
@@ -21406,7 +22083,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size
     });
 
-    const classes = useUtilityClasses$1u(ownerState);
+    const classes = useUtilityClasses$1v(ownerState);
     let startAdornment;
 
     if (multiple && value.length > 0) {
@@ -21607,7 +22284,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     blurOnSelect: PropTypes.oneOfType([PropTypes.oneOf(['mouse', 'touch']), PropTypes.bool]),
 
     /**
-     * Props applied to the [`Chip`](/api/chip/) element.
+     * Props applied to the [`Chip`](/material-ui/api/chip/) element.
      */
     ChipProps: PropTypes.object,
 
@@ -21645,7 +22322,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Override the default text for the *clear* icon button.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @default 'Clear'
      */
     clearText: PropTypes.string,
@@ -21653,7 +22330,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Override the default text for the *close popup* icon button.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @default 'Close'
      */
     closeText: PropTypes.string,
@@ -21716,7 +22393,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     disablePortal: PropTypes.bool,
 
     /**
-     * A filter function that determines the options that are eligible.
+     * A function that determines the filtered options to be rendered on search.
      *
      * @param {T[]} options The options to render.
      * @param {object} state The state of the component.
@@ -21847,7 +22524,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Text to display when in a loading state.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @default 'Loading…'
      */
     loadingText: PropTypes.node,
@@ -21861,7 +22538,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Text to display when there are no options.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @default 'No options'
      */
     noOptionsText: PropTypes.node,
@@ -21925,7 +22602,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Override the default text for the *open popup* icon button.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @default 'Open'
      */
     openText: PropTypes.string,
@@ -22042,7 +22719,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1N = ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"];
 
-  const useUtilityClasses$1t = ownerState => {
+  const useUtilityClasses$1u = ownerState => {
     const {
       classes,
       variant,
@@ -22195,7 +22872,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1t(ownerState);
+    const classes = useUtilityClasses$1u(ownerState);
 
     if (hasImgNotFailing) {
       children = /*#__PURE__*/jsxRuntime_1(AvatarImg, _extends({
@@ -22310,7 +22987,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     medium: null
   };
 
-  const useUtilityClasses$1s = ownerState => {
+  const useUtilityClasses$1t = ownerState => {
     const {
       classes
     } = ownerState;
@@ -22382,7 +23059,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1s(ownerState);
+    const classes = useUtilityClasses$1t(ownerState);
     const children = React__namespace.Children.toArray(childrenProp).filter(child => {
       {
         if (reactIs_2(child)) {
@@ -22509,7 +23186,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   };
   /**
-   * The Fade transition is used by the [Modal](/components/modal/) component.
+   * The Fade transition is used by the [Modal](/material-ui/react-modal/) component.
    * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
    */
 
@@ -22714,14 +23391,23 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var Fade$1 = Fade;
 
-  const _excluded$1K = ["children", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
-  const backdropClasses = backdropUnstyledClasses$1;
+  function getBackdropUtilityClass(slot) {
+    return generateUtilityClass('MuiBackdrop', slot);
+  }
+  const backdropClasses = generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
+  var backdropClasses$1 = backdropClasses;
+
+  const _excluded$1K = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
 
-  const extendUtilityClasses$3 = ownerState => {
+  const useUtilityClasses$1s = ownerState => {
     const {
-      classes
+      classes,
+      invisible
     } = ownerState;
-    return classes;
+    const slots = {
+      root: ['root', invisible && 'invisible']
+    };
+    return composeClasses(slots, getBackdropUtilityClass, classes);
   };
 
   const BackdropRoot = styled$1('div', {
@@ -22750,7 +23436,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     backgroundColor: 'transparent'
   }));
   const Backdrop = /*#__PURE__*/React__namespace.forwardRef(function Backdrop(inProps, ref) {
-    var _componentsProps$root;
+    var _components$Root, _componentsProps$root;
 
     const props = useThemeProps({
       props: inProps,
@@ -22759,6 +23445,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const {
       children,
+      component = 'div',
       components = {},
       componentsProps = {},
       className,
@@ -22771,25 +23458,20 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           other = _objectWithoutPropertiesLoose(props, _excluded$1K);
 
     const ownerState = _extends({}, props, {
+      component,
       invisible
     });
 
-    const classes = extendUtilityClasses$3(ownerState);
+    const classes = useUtilityClasses$1s(ownerState);
     return /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
       in: open,
       timeout: transitionDuration
     }, other, {
-      children: /*#__PURE__*/jsxRuntime_1(BackdropUnstyled$1, {
-        className: className,
-        invisible: invisible,
-        components: _extends({
-          Root: BackdropRoot
-        }, components),
-        componentsProps: {
-          root: _extends({}, componentsProps.root, (!components.Root || !isHostComponent(components.Root)) && {
-            ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState)
-          })
-        },
+      children: /*#__PURE__*/jsxRuntime_1(BackdropRoot, {
+        "aria-hidden": true,
+        as: (_components$Root = components.Root) != null ? _components$Root : component,
+        className: clsx(classes.root, className),
+        ownerState: _extends({}, ownerState, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState),
         classes: classes,
         ref: ref,
         children: children
@@ -22819,6 +23501,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     className: PropTypes.string,
 
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: PropTypes.elementType,
+
     /**
      * The components used for each slot inside the Backdrop.
      * Either a string to use a HTML element or a component.
@@ -22871,9 +23559,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   var shouldSpreadAdditionalProps$1 = shouldSpreadAdditionalProps;
 
-  const _excluded$1J = ["anchorOrigin", "component", "components", "componentsProps", "overlap", "color", "invisible", "badgeContent", "showZero", "variant"];
-  const badgeClasses = _extends({}, badgeUnstyledClasses$1, generateUtilityClasses('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
-  'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']));
+  function getBadgeUtilityClass(slot) {
+    return generateUtilityClass('MuiBadge', slot);
+  }
+  const badgeClasses = generateUtilityClasses('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft', 'invisible', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
+  'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']);
+  var badgeClasses$1 = badgeClasses;
+
+  const _excluded$1J = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "showZero", "variant"];
   const RADIUS_STANDARD = 10;
   const RADIUS_DOT = 4;
 
@@ -22881,12 +23574,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
       color,
       anchorOrigin,
+      invisible,
       overlap,
+      variant,
       classes = {}
     } = ownerState;
-    return _extends({}, classes, {
-      badge: clsx(classes.badge, getBadgeUtilityClass(`anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`), getBadgeUtilityClass(`overlap${capitalize(overlap)}`), color !== 'default' && [getBadgeUtilityClass(`color${capitalize(color)}`), classes[`color${capitalize(color)}`]])
-    });
+    return {
+      root: clsx(classes.root, 'root'),
+      badge: clsx(classes.badge, getBadgeUtilityClass('badge'), getBadgeUtilityClass(variant), `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, getBadgeUtilityClass(`anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`), getBadgeUtilityClass(`overlap${capitalize(overlap)}`), color !== 'default' && [getBadgeUtilityClass(`color${capitalize(color)}`), classes[`color${capitalize(color)}`]], invisible && getBadgeUtilityClass('invisible'))
+    };
   };
 
   const BadgeRoot = styled$1('span', {
@@ -22948,7 +23644,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     right: 0,
     transform: 'scale(1) translate(50%, -50%)',
     transformOrigin: '100% 0%',
-    [`&.${badgeClasses.invisible}`]: {
+    [`&.${badgeClasses$1.invisible}`]: {
       transform: 'scale(0) translate(50%, -50%)'
     }
   }, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular' && {
@@ -22956,7 +23652,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     right: 0,
     transform: 'scale(1) translate(50%, 50%)',
     transformOrigin: '100% 100%',
-    [`&.${badgeClasses.invisible}`]: {
+    [`&.${badgeClasses$1.invisible}`]: {
       transform: 'scale(0) translate(50%, 50%)'
     }
   }, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular' && {
@@ -22964,7 +23660,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     left: 0,
     transform: 'scale(1) translate(-50%, -50%)',
     transformOrigin: '0% 0%',
-    [`&.${badgeClasses.invisible}`]: {
+    [`&.${badgeClasses$1.invisible}`]: {
       transform: 'scale(0) translate(-50%, -50%)'
     }
   }, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular' && {
@@ -22972,7 +23668,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     left: 0,
     transform: 'scale(1) translate(-50%, 50%)',
     transformOrigin: '0% 100%',
-    [`&.${badgeClasses.invisible}`]: {
+    [`&.${badgeClasses$1.invisible}`]: {
       transform: 'scale(0) translate(-50%, 50%)'
     }
   }, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular' && {
@@ -22980,7 +23676,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     right: '14%',
     transform: 'scale(1) translate(50%, -50%)',
     transformOrigin: '100% 0%',
-    [`&.${badgeClasses.invisible}`]: {
+    [`&.${badgeClasses$1.invisible}`]: {
       transform: 'scale(0) translate(50%, -50%)'
     }
   }, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular' && {
@@ -22988,7 +23684,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     right: '14%',
     transform: 'scale(1) translate(50%, 50%)',
     transformOrigin: '100% 100%',
-    [`&.${badgeClasses.invisible}`]: {
+    [`&.${badgeClasses$1.invisible}`]: {
       transform: 'scale(0) translate(50%, 50%)'
     }
   }, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular' && {
@@ -22996,7 +23692,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     left: '14%',
     transform: 'scale(1) translate(-50%, -50%)',
     transformOrigin: '0% 0%',
-    [`&.${badgeClasses.invisible}`]: {
+    [`&.${badgeClasses$1.invisible}`]: {
       transform: 'scale(0) translate(-50%, -50%)'
     }
   }, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular' && {
@@ -23004,7 +23700,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     left: '14%',
     transform: 'scale(1) translate(-50%, 50%)',
     transformOrigin: '0% 100%',
-    [`&.${badgeClasses.invisible}`]: {
+    [`&.${badgeClasses$1.invisible}`]: {
       transform: 'scale(0) translate(-50%, 50%)'
     }
   }, ownerState.invisible && {
@@ -23014,7 +23710,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     })
   }));
   const Badge = /*#__PURE__*/React__namespace.forwardRef(function Badge(inProps, ref) {
-    var _componentsProps$root, _componentsProps$badg;
+    var _componentsProps$root, _componentsProps$root2, _componentsProps$badg, _componentsProps$badg2;
 
     const props = useThemeProps({
       props: inProps,
@@ -23026,12 +23722,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         vertical: 'top',
         horizontal: 'right'
       },
+      className,
       component = 'span',
       components = {},
       componentsProps = {},
       overlap: overlapProp = 'rectangular',
       color: colorProp = 'default',
       invisible: invisibleProp = false,
+      max,
       badgeContent: badgeContentProp,
       showZero = false,
       variant: variantProp = 'standard'
@@ -23041,7 +23739,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const prevProps = usePreviousProps$1({
       anchorOrigin: anchorOriginProp,
       color: colorProp,
-      overlap: overlapProp
+      overlap: overlapProp,
+      variant: variantProp
     });
     let invisible = invisibleProp;
 
@@ -23052,44 +23751,57 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
       color = colorProp,
       overlap = overlapProp,
-      anchorOrigin = anchorOriginProp
+      anchorOrigin = anchorOriginProp,
+      variant = variantProp
     } = invisible ? prevProps : props;
 
     const ownerState = _extends({}, props, {
       anchorOrigin,
       invisible,
       color,
-      overlap
+      overlap,
+      variant
     });
 
     const classes = extendUtilityClasses$2(ownerState);
+    let displayValue;
+
+    if (variant !== 'dot') {
+      displayValue = badgeContentProp && Number(badgeContentProp) > max ? `${max}+` : badgeContentProp;
+    }
+
     return /*#__PURE__*/jsxRuntime_1(BadgeUnstyled$1, _extends({
-      anchorOrigin: anchorOrigin,
       invisible: invisibleProp,
-      badgeContent: badgeContentProp,
+      badgeContent: displayValue,
       showZero: showZero,
-      variant: variantProp
+      max: max
     }, other, {
       components: _extends({
         Root: BadgeRoot,
         Badge: BadgeBadge
       }, components),
+      className: clsx(className, classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className),
       componentsProps: {
         root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps$1(components.Root) && {
           as: component,
-          ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
+          ownerState: _extends({}, (_componentsProps$root2 = componentsProps.root) == null ? void 0 : _componentsProps$root2.ownerState, {
+            anchorOrigin,
             color,
-            overlap
+            overlap,
+            variant
           })
         }),
-        badge: _extends({}, componentsProps.badge, shouldSpreadAdditionalProps$1(components.Badge) && {
-          ownerState: _extends({}, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.ownerState, {
+        badge: _extends({}, componentsProps.badge, {
+          className: clsx(classes.badge, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.className)
+        }, shouldSpreadAdditionalProps$1(components.Badge) && {
+          ownerState: _extends({}, (_componentsProps$badg2 = componentsProps.badge) == null ? void 0 : _componentsProps$badg2.ownerState, {
+            anchorOrigin,
             color,
-            overlap
+            overlap,
+            variant
           })
         })
       },
-      classes: classes,
       ref: ref
     }));
   });
@@ -23129,7 +23841,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     classes: PropTypes.object,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * @ignore
+     */
+    className: PropTypes.string,
+
+    /**
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'default'
      */
     color: PropTypes
@@ -23515,7 +24234,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var BottomNavigationAction$1 = BottomNavigationAction;
 
-  const defaultTheme = createTheme();
+  const defaultTheme = createTheme$1();
   /**
    * @ignore - do not document.
    */
@@ -23779,7 +24498,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Override the default label for the expand button.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @default 'Show path'
      */
     expandText: PropTypes.string,
@@ -23882,106 +24601,111 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   })(({
     theme,
     ownerState
-  }) => _extends({}, theme.typography.button, {
-    minWidth: 64,
-    padding: '6px 16px',
-    borderRadius: theme.shape.borderRadius,
-    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
-      duration: theme.transitions.duration.short
-    }),
-    '&:hover': _extends({
-      textDecoration: 'none',
-      backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
+  }) => {
+    var _theme$palette$getCon, _theme$palette;
+
+    return _extends({}, theme.typography.button, {
+      minWidth: 64,
+      padding: '6px 16px',
+      borderRadius: (theme.vars || theme).shape.borderRadius,
+      transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
+        duration: theme.transitions.duration.short
+      }),
+      '&:hover': _extends({
+        textDecoration: 'none',
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
+        border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }, ownerState.variant === 'contained' && {
+        backgroundColor: (theme.vars || theme).palette.grey.A100,
+        boxShadow: (theme.vars || theme).shadows[4],
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          boxShadow: (theme.vars || theme).shadows[2],
+          backgroundColor: (theme.vars || theme).palette.grey[300]
+        }
+      }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+        }
+      }),
+      '&:active': _extends({}, ownerState.variant === 'contained' && {
+        boxShadow: (theme.vars || theme).shadows[8]
+      }),
+      [`&.${buttonClasses$1.focusVisible}`]: _extends({}, ownerState.variant === 'contained' && {
+        boxShadow: (theme.vars || theme).shadows[6]
+      }),
+      [`&.${buttonClasses$1.disabled}`]: _extends({
+        color: (theme.vars || theme).palette.action.disabled
+      }, ownerState.variant === 'outlined' && {
+        border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
+      }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
+        border: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+      }, ownerState.variant === 'contained' && {
+        color: (theme.vars || theme).palette.action.disabled,
+        boxShadow: (theme.vars || theme).shadows[0],
+        backgroundColor: (theme.vars || theme).palette.action.disabledBackground
+      })
+    }, ownerState.variant === 'text' && {
+      padding: '6px 8px'
     }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-      backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
+      color: (theme.vars || theme).palette[ownerState.color].main
+    }, ownerState.variant === 'outlined' && {
+      padding: '5px 15px',
+      border: '1px solid currentColor'
     }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-      border: `1px solid ${theme.palette[ownerState.color].main}`,
-      backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
+      color: (theme.vars || theme).palette[ownerState.color].main,
+      border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`
     }, ownerState.variant === 'contained' && {
-      backgroundColor: theme.palette.grey.A100,
-      boxShadow: theme.shadows[4],
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        boxShadow: theme.shadows[2],
-        backgroundColor: theme.palette.grey[300]
-      }
+      color: theme.vars ? // this is safe because grey does not change between default light/dark mode
+      theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
+      backgroundColor: (theme.vars || theme).palette.grey[300],
+      boxShadow: (theme.vars || theme).shadows[2]
     }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-      backgroundColor: theme.palette[ownerState.color].dark,
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: theme.palette[ownerState.color].main
-      }
-    }),
-    '&:active': _extends({}, ownerState.variant === 'contained' && {
-      boxShadow: theme.shadows[8]
-    }),
-    [`&.${buttonClasses$1.focusVisible}`]: _extends({}, ownerState.variant === 'contained' && {
-      boxShadow: theme.shadows[6]
-    }),
-    [`&.${buttonClasses$1.disabled}`]: _extends({
-      color: theme.palette.action.disabled
-    }, ownerState.variant === 'outlined' && {
-      border: `1px solid ${theme.palette.action.disabledBackground}`
-    }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
-      border: `1px solid ${theme.palette.action.disabled}`
-    }, ownerState.variant === 'contained' && {
-      color: theme.palette.action.disabled,
-      boxShadow: theme.shadows[0],
-      backgroundColor: theme.palette.action.disabledBackground
-    })
-  }, ownerState.variant === 'text' && {
-    padding: '6px 8px'
-  }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-    color: theme.palette[ownerState.color].main
-  }, ownerState.variant === 'outlined' && {
-    padding: '5px 15px',
-    border: `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
-  }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-    color: theme.palette[ownerState.color].main,
-    border: `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`
-  }, ownerState.variant === 'contained' && {
-    color: theme.palette.getContrastText(theme.palette.grey[300]),
-    backgroundColor: theme.palette.grey[300],
-    boxShadow: theme.shadows[2]
-  }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-    color: theme.palette[ownerState.color].contrastText,
-    backgroundColor: theme.palette[ownerState.color].main
-  }, ownerState.color === 'inherit' && {
-    color: 'inherit',
-    borderColor: 'currentColor'
-  }, ownerState.size === 'small' && ownerState.variant === 'text' && {
-    padding: '4px 5px',
-    fontSize: theme.typography.pxToRem(13)
-  }, ownerState.size === 'large' && ownerState.variant === 'text' && {
-    padding: '8px 11px',
-    fontSize: theme.typography.pxToRem(15)
-  }, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
-    padding: '3px 9px',
-    fontSize: theme.typography.pxToRem(13)
-  }, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
-    padding: '7px 21px',
-    fontSize: theme.typography.pxToRem(15)
-  }, ownerState.size === 'small' && ownerState.variant === 'contained' && {
-    padding: '4px 10px',
-    fontSize: theme.typography.pxToRem(13)
-  }, ownerState.size === 'large' && ownerState.variant === 'contained' && {
-    padding: '8px 22px',
-    fontSize: theme.typography.pxToRem(15)
-  }, ownerState.fullWidth && {
-    width: '100%'
-  }), ({
+      color: (theme.vars || theme).palette[ownerState.color].contrastText,
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+    }, ownerState.color === 'inherit' && {
+      color: 'inherit',
+      borderColor: 'currentColor'
+    }, ownerState.size === 'small' && ownerState.variant === 'text' && {
+      padding: '4px 5px',
+      fontSize: theme.typography.pxToRem(13)
+    }, ownerState.size === 'large' && ownerState.variant === 'text' && {
+      padding: '8px 11px',
+      fontSize: theme.typography.pxToRem(15)
+    }, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
+      padding: '3px 9px',
+      fontSize: theme.typography.pxToRem(13)
+    }, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
+      padding: '7px 21px',
+      fontSize: theme.typography.pxToRem(15)
+    }, ownerState.size === 'small' && ownerState.variant === 'contained' && {
+      padding: '4px 10px',
+      fontSize: theme.typography.pxToRem(13)
+    }, ownerState.size === 'large' && ownerState.variant === 'contained' && {
+      padding: '8px 22px',
+      fontSize: theme.typography.pxToRem(15)
+    }, ownerState.fullWidth && {
+      width: '100%'
+    });
+  }, ({
     ownerState
   }) => ownerState.disableElevation && {
     boxShadow: 'none',
@@ -24125,7 +24849,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -24421,7 +25147,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -25699,7 +26427,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     classes: PropTypes.object,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -25998,7 +26728,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -26387,12 +27119,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   /**
    * Modal is a lower-level construct that is leveraged by the following components:
    *
-   * - [Dialog](/api/dialog/)
-   * - [Drawer](/api/drawer/)
-   * - [Menu](/api/menu/)
-   * - [Popover](/api/popover/)
+   * - [Dialog](/material-ui/api/dialog/)
+   * - [Drawer](/material-ui/api/drawer/)
+   * - [Menu](/material-ui/api/menu/)
+   * - [Popover](/material-ui/api/popover/)
    *
-   * If you are creating a modal dialog, you probably want to use the [Dialog](/api/dialog/) component
+   * If you are creating a modal dialog, you probably want to use the [Dialog](/material-ui/api/dialog/) component
    * rather than directly using Modal.
    *
    * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
@@ -26483,7 +27215,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     BackdropComponent: PropTypes.elementType,
 
     /**
-     * Props applied to the [`Backdrop`](/api/backdrop/) element.
+     * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
      */
     BackdropProps: PropTypes.object,
 
@@ -26988,7 +27720,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     PaperComponent: PropTypes.elementType,
 
     /**
-     * Props applied to the [`Paper`](/api/paper/) element.
+     * Props applied to the [`Paper`](/material-ui/api/paper/) element.
      * @default {}
      */
     PaperProps: PropTypes.object,
@@ -27006,7 +27738,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * The component used for the transition.
-     * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+     * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
      * @default Fade
      */
     TransitionComponent: PropTypes.elementType,
@@ -27726,7 +28458,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   }
   /**
-   * The Slide transition is used by the [Drawer](/components/drawers/) component.
+   * The Slide transition is used by the [Drawer](/material-ui/react-drawer/) component.
    * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
    */
 
@@ -28130,7 +28862,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
   }
   /**
-   * The props of the [Modal](/api/modal/) component are available
+   * The props of the [Modal](/material-ui/api/modal/) component are available
    * when `variant="temporary"` is set.
    */
 
@@ -28286,7 +29018,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     hideBackdrop: PropTypes.bool,
 
     /**
-     * Props applied to the [`Modal`](/api/modal/) element.
+     * Props applied to the [`Modal`](/material-ui/api/modal/) element.
      * @default {}
      */
     ModalProps: PropTypes.object,
@@ -28305,13 +29037,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     open: PropTypes.bool,
 
     /**
-     * Props applied to the [`Paper`](/api/paper/) element.
+     * Props applied to the [`Paper`](/material-ui/api/paper/) element.
      * @default {}
      */
     PaperProps: PropTypes.object,
 
     /**
-     * Props applied to the [`Slide`](/api/slide/) element.
+     * Props applied to the [`Slide`](/material-ui/api/slide/) element.
      */
     SlideProps: PropTypes.object,
 
@@ -28514,7 +29246,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'default'
      */
     color: PropTypes.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
@@ -28803,7 +29537,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     classes: PropTypes.object,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
      */
     color: PropTypes
@@ -28911,7 +29647,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
     /**
-     * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
+     * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
      * @default false
      */
     multiline: PropTypes.bool,
@@ -29035,7 +29771,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *  - Input
    *  - InputLabel
    *
-   * You can find one composition example below and more going to [the demos](/components/text-fields/#components).
+   * You can find one composition example below and more going to [the demos](/material-ui/react-text-field/#components).
    *
    * ```jsx
    * <FormControl>
@@ -29216,7 +29952,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -29377,7 +30115,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       control,
       disabled: disabledProp,
       disableTypography,
-      label,
+      label: labelProp,
       labelPlacement = 'end'
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$1h);
@@ -29409,23 +30147,28 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const ownerState = _extends({}, props, {
       disabled,
-      label,
       labelPlacement,
       error: fcs.error
     });
 
     const classes = useUtilityClasses$12(ownerState);
+    let label = labelProp;
+
+    if (label != null && label.type !== Typography$1 && !disableTypography) {
+      label = /*#__PURE__*/jsxRuntime_1(Typography$1, _extends({
+        component: "span",
+        className: classes.label
+      }, componentsProps.typography, {
+        children: label
+      }));
+    }
+
     return /*#__PURE__*/jsxRuntime_2(FormControlLabelRoot, _extends({
       className: clsx(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other, {
-      children: [/*#__PURE__*/React__namespace.cloneElement(control, controlProps), label.type === Typography$1 || disableTypography ? label : /*#__PURE__*/jsxRuntime_1(Typography$1, _extends({
-        component: "span",
-        className: classes.label
-      }, componentsProps.typography, {
-        children: label
-      }))]
+      children: [/*#__PURE__*/React__namespace.cloneElement(control, controlProps), label]
     }));
   });
   FormControlLabel.propTypes
@@ -29482,7 +30225,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * A text or an element to be used in an enclosing label element.
      */
-    label: PropTypes.oneOfType([PropTypes.element, PropTypes.number, PropTypes.string]).isRequired,
+    label: PropTypes.node,
 
     /**
      * The position of the label.
@@ -29937,7 +30680,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      */
     color: PropTypes
     /* @typescript-to-proptypes-ignore */
@@ -30515,8 +31260,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   };
   /**
-   * The Grow transition is used by the [Tooltip](/components/tooltips/) and
-   * [Popover](/components/popover/) components.
+   * Conditionally apply a workaround for the CSS transition bug in Safari 15.4 / WebKit browsers.
+   * Remove this workaround once the WebKit bug fix is released.
+   */
+
+  const isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)[4-9]/i.test(navigator.userAgent);
+  /**
+   * The Grow transition is used by the [Tooltip](/material-ui/react-tooltip/) and
+   * [Popover](/material-ui/react-popover/) components.
    * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
    */
 
@@ -30587,7 +31338,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         duration,
         delay
       }), theme.transitions.create('transform', {
-        duration: duration * 0.666,
+        duration: isWebKit154 ? duration : duration * 0.666,
         delay,
         easing: transitionTimingFunction
       })].join(',');
@@ -30623,11 +31374,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         duration,
         delay
       }), theme.transitions.create('transform', {
-        duration: duration * 0.666,
-        delay: delay || duration * 0.333,
+        duration: isWebKit154 ? duration : duration * 0.666,
+        delay: isWebKit154 ? delay : delay || duration * 0.333,
         easing: transitionTimingFunction
       })].join(',');
-      node.style.opacity = '0';
+      node.style.opacity = 0;
       node.style.transform = getScale(0.75);
 
       if (onExit) {
@@ -31621,7 +32372,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'inherit'
      */
     color: PropTypes
@@ -32408,7 +33161,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     classes: PropTypes.object,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
      */
     color: PropTypes
@@ -32508,7 +33263,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
     /**
-     * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
+     * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
      * @default false
      */
     multiline: PropTypes.bool,
@@ -32918,7 +33673,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     classes: PropTypes.object,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      */
     color: PropTypes
     /* @typescript-to-proptypes-ignore */
@@ -33303,7 +34060,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -33342,7 +34101,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const linkClasses = generateUtilityClasses('MuiLink', ['root', 'underlineNone', 'underlineHover', 'underlineAlways', 'button', 'focusVisible']);
   var linkClasses$1 = linkClasses;
 
-  const _excluded$10 = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant"];
+  const _excluded$10 = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
   const colorTransformations = {
     primary: 'primary.main',
     textPrimary: 'text.primary',
@@ -33425,6 +34184,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
   });
   const Link = /*#__PURE__*/React__namespace.forwardRef(function Link(inProps, ref) {
+    const theme = useTheme();
     const props = useThemeProps({
       props: inProps,
       name: 'MuiLink'
@@ -33438,10 +34198,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       onFocus,
       TypographyClasses,
       underline = 'always',
-      variant = 'inherit'
+      variant = 'inherit',
+      sx
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$10);
 
+    const sxColor = typeof sx === 'function' ? sx(theme).color : sx == null ? void 0 : sx.color;
     const {
       isFocusVisibleRef,
       onBlur: handleBlurVisible,
@@ -33476,7 +34238,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
 
     const ownerState = _extends({}, props, {
-      color,
+      // It is too complex to support any types of `sx`.
+      // Need to find a better way to get rid of the color manipulation for `textDecorationColor`.
+      color: (typeof sxColor === 'function' ? sxColor(theme) : sxColor) || color,
       component,
       focusVisible,
       underline,
@@ -33485,15 +34249,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const classes = useUtilityClasses$Q(ownerState);
     return /*#__PURE__*/jsxRuntime_1(LinkRoot, _extends({
+      color: color,
       className: clsx(classes.root, className),
       classes: TypographyClasses,
-      color: color,
       component: component,
       onBlur: handleBlur,
       onFocus: handleFocus,
       ref: handlerRef,
       ownerState: ownerState,
-      variant: variant
+      variant: variant,
+      sx: [...(inProps.color ? [{
+        color: colorTransformations[color] || color
+      }] : []), ...(Array.isArray(sx) ? sx : [sx])]
     }, other));
   });
   Link.propTypes
@@ -33549,7 +34316,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
     /**
-     * `classes` prop applied to the [`Typography`](/api/typography/) element.
+     * `classes` prop applied to the [`Typography`](/material-ui/api/typography/) element.
      */
     TypographyClasses: PropTypes.object,
 
@@ -33770,6 +34537,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     alignItems: 'center',
     position: 'relative',
     textDecoration: 'none',
+    minWidth: 0,
     boxSizing: 'border-box',
     textAlign: 'left',
     paddingTop: 8,
@@ -34319,7 +35087,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * If `true`, the list item is focused during the first mount.
      * Focus will also be triggered if the value changes from false to true.
      * @default false
-     * @deprecated checkout [ListItemButton](/api/list-item-button/) instead
+     * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
      */
     autoFocus: PropTypes.bool,
 
@@ -34327,7 +35095,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * If `true`, the list item is a button (using `ButtonBase`). Props intended
      * for `ButtonBase` can then be applied to `ListItem`.
      * @default false
-     * @deprecated checkout [ListItemButton](/api/list-item-button/) instead
+     * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
      */
     button: PropTypes.bool,
 
@@ -34414,7 +35182,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * If `true`, the component is disabled.
      * @default false
-     * @deprecated checkout [ListItemButton](/api/list-item-button/) instead
+     * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
      */
     disabled: PropTypes.bool,
 
@@ -34449,7 +35217,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Use to apply selected styling.
      * @default false
-     * @deprecated checkout [ListItemButton](/api/list-item-button/) instead
+     * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
      */
     selected: PropTypes.bool,
 
@@ -34915,7 +35683,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
   /**
    * A permanently displayed menu following https://www.w3.org/TR/wai-aria-practices/#menubutton.
-   * It's exposed to help customization of the [`Menu`](/api/menu/) component if you
+   * It's exposed to help customization of the [`Menu`](/material-ui/api/menu/) component if you
    * use it separately you need to move focus into the component manually. Once
    * the focus is placed inside the component it is fully keyboard accessible.
    */
@@ -35572,7 +36340,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     open: PropTypes.bool.isRequired,
 
     /**
-     * Props applied to the [`Paper`](/api/paper/) element.
+     * Props applied to the [`Paper`](/material-ui/api/paper/) element.
      * @default {}
      */
     PaperProps: PropTypes
@@ -35605,7 +36373,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * The component used for the transition.
-     * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+     * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
      * @default Grow
      */
     TransitionComponent: PropTypes.elementType,
@@ -35856,7 +36624,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     disableAutoFocusItem: PropTypes.bool,
 
     /**
-     * Props applied to the [`MenuList`](/api/menu-list/) element.
+     * Props applied to the [`MenuList`](/material-ui/api/menu-list/) element.
      * @default {}
      */
     MenuListProps: PropTypes.object,
@@ -35880,7 +36648,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     PaperProps: PropTypes.object,
 
     /**
-     * `classes` prop applied to the [`Popover`](/api/popover/) element.
+     * `classes` prop applied to the [`Popover`](/material-ui/api/popover/) element.
      */
     PopoverClasses: PropTypes.object,
 
@@ -37045,7 +37813,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     classes: PropTypes.object,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
      */
     color: PropTypes
@@ -37137,7 +37907,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
     /**
-     * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
+     * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
      * @default false
      */
     multiline: PropTypes.bool,
@@ -37625,6 +38395,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * The active color.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'standard'
      */
     color: PropTypes
@@ -37849,6 +38621,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * The active color.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'standard'
      */
     color: PropTypes
@@ -37877,7 +38651,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * Accepts a function which returns a string value that provides a user-friendly name for the current page.
      * This is important for screen reader users.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
      * @param {number} page The page number to format.
      * @param {bool} selected If true, the current page is selected.
@@ -38210,7 +38984,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     classes: PropTypes.object,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -39000,7 +39776,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * Accepts a function which returns a string value that provides a user-friendly name for the current value of the rating.
      * This is important for screen reader users.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @param {number} value The rating label's value to format.
      * @returns {string}
      * @default function defaultLabelText(value) {
@@ -39545,7 +40321,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     }
 
-    const items = childrenArray.map(child => {
+    const items = childrenArray.map((child, index, arr) => {
       if (! /*#__PURE__*/React__namespace.isValidElement(child)) {
         return null;
       }
@@ -39580,6 +40356,27 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         foundMatch = true;
       }
 
+      if (child.props.value === undefined) {
+        return /*#__PURE__*/React__namespace.cloneElement(child, {
+          'aria-readonly': true,
+          role: 'option'
+        });
+      }
+
+      const isFirstSelectableElement = () => {
+        if (value) {
+          return selected;
+        }
+
+        const firstSelectableElement = arr.find(item => item.props.value !== undefined && item.props.disabled !== true);
+
+        if (child === firstSelectableElement) {
+          return true;
+        }
+
+        return selected;
+      };
+
       return /*#__PURE__*/React__namespace.cloneElement(child, {
         'aria-selected': selected ? 'true' : 'false',
         onClick: handleItemClick(child),
@@ -39596,7 +40393,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           }
         },
         role: 'option',
-        selected,
+        selected: arr[0].props.value === undefined || arr[0].props.disabled === true ? isFirstSelectableElement() : selected,
         value: undefined,
         // The value is most likely not a valid HTML attribute.
         'data-value': child.props.value // Instead, we provide it as a data attribute.
@@ -39804,7 +40601,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     labelId: PropTypes.string,
 
     /**
-     * Props applied to the [`Menu`](/api/menu/) element.
+     * Props applied to the [`Menu`](/material-ui/api/menu/) element.
      */
     MenuProps: PropTypes.object,
 
@@ -40090,7 +40887,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     inputProps: PropTypes.object,
 
     /**
-     * See [OutlinedInput#label](/api/outlined-input/#props)
+     * See [OutlinedInput#label](/material-ui/api/outlined-input/#props)
      */
     label: PropTypes.node,
 
@@ -40101,7 +40898,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     labelId: PropTypes.string,
 
     /**
-     * Props applied to the [`Menu`](/api/menu/) element.
+     * Props applied to the [`Menu`](/material-ui/api/menu/) element.
      */
     MenuProps: PropTypes.object,
 
@@ -40934,7 +41731,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     classes: PropTypes.object,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -41645,7 +42444,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ClickAwayListenerProps: PropTypes.object,
 
     /**
-     * Props applied to the [`SnackbarContent`](/api/snackbar-content/) element.
+     * Props applied to the [`SnackbarContent`](/material-ui/api/snackbar-content/) element.
      */
     ContentProps: PropTypes.object,
 
@@ -41720,7 +42519,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * The component used for the transition.
-     * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+     * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
      * @default Grow
      */
     TransitionComponent: PropTypes.elementType,
@@ -41759,7 +42558,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   };
   /**
    * The Zoom transition can be used for the floating variant of the
-   * [Button](/components/buttons/#floating-action-buttons) component.
+   * [Button](/material-ui/react-button/#floating-action-buttons) component.
    * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
    */
 
@@ -42414,7 +43213,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     direction: PropTypes.oneOf(['down', 'left', 'right', 'up']),
 
     /**
-     * Props applied to the [`Fab`](/api/fab/) element.
+     * Props applied to the [`Fab`](/material-ui/api/fab/) element.
      * @default {}
      */
     FabProps: PropTypes.object,
@@ -42489,7 +43288,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * The component used for the transition.
-     * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+     * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
      * @default Zoom
      */
     TransitionComponent: PropTypes.elementType,
@@ -43294,7 +44093,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     PopperComponent: PropTypes.elementType,
 
     /**
-     * Props applied to the [`Popper`](/api/popper/) element.
+     * Props applied to the [`Popper`](/material-ui/api/popper/) element.
      * @default {}
      */
     PopperProps: PropTypes.object,
@@ -43313,7 +44112,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * The component used for the transition.
-     * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+     * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
      * @default Grow
      */
     TransitionComponent: PropTypes.elementType,
@@ -43537,7 +44336,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     delay: PropTypes.number,
 
     /**
-     * Props applied to the [`Fab`](/api/fab/) component.
+     * Props applied to the [`Fab`](/material-ui/api/fab/) component.
      * @default {}
      */
     FabProps: PropTypes.object,
@@ -43564,7 +44363,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
     /**
-     * `classes` prop applied to the [`Tooltip`](/api/tooltip/) element.
+     * `classes` prop applied to the [`Tooltip`](/material-ui/api/tooltip/) element.
      */
     TooltipClasses: PropTypes.object,
 
@@ -44494,12 +45293,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     optional: PropTypes.node,
 
     /**
-     * The component to render in place of the [`StepIcon`](/api/step-icon/).
+     * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
      */
     StepIconComponent: PropTypes.elementType,
 
     /**
-     * Props applied to the [`StepIcon`](/api/step-icon/) element.
+     * Props applied to the [`StepIcon`](/material-ui/api/step-icon/) element.
      */
     StepIconProps: PropTypes.object,
 
@@ -44915,7 +45714,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * The component used for the transition.
-     * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+     * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
      * @default Collapse
      */
     TransitionComponent: PropTypes.elementType,
@@ -46026,7 +46825,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -47359,7 +48160,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   });
   TablePaginationActions.propTypes = {
     /**
-     * Props applied to the back arrow [`IconButton`](/api/icon-button/) element.
+     * Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) element.
      */
     backIconButtonProps: PropTypes.object,
 
@@ -47371,7 +48172,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Accepts a function which returns a string value that provides a user-friendly name for the current page.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      *
      * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
      * @param {number} page The page number to format.
@@ -47380,7 +48181,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     getItemAriaLabel: PropTypes.func.isRequired,
 
     /**
-     * Props applied to the next arrow [`IconButton`](/api/icon-button/) element.
+     * Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element.
      */
     nextIconButtonProps: PropTypes.object,
 
@@ -47672,7 +48473,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ActionsComponent: PropTypes.elementType,
 
     /**
-     * Props applied to the back arrow [`IconButton`](/api/icon-button/) component.
+     * Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) component.
      */
     backIconButtonProps: PropTypes.object,
 
@@ -47708,7 +48509,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * Accepts a function which returns a string value that provides a user-friendly name for the current page.
      * This is important for screen reader users.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous').
      * @returns {string}
      * @default function defaultGetAriaLabel(type) {
@@ -47721,7 +48522,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * Customize the displayed rows label. Invoked with a `{ from, to, count, page }`
      * object.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @default function defaultLabelDisplayedRows({ from, to, count }) {
      *   return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
      * }
@@ -47731,13 +48532,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Customize the rows per page label.
      *
-     * For localization purposes, you can use the provided [translations](/guides/localization/).
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
      * @default 'Rows per page:'
      */
     labelRowsPerPage: PropTypes.node,
 
     /**
-     * Props applied to the next arrow [`IconButton`](/api/icon-button/) element.
+     * Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element.
      */
     nextIconButtonProps: PropTypes.object,
 
@@ -47798,7 +48599,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     })]).isRequired),
 
     /**
-     * Props applied to the rows per page [`Select`](/api/select/) element.
+     * Props applied to the rows per page [`Select`](/material-ui/api/select/) element.
      * @default {}
      */
     SelectProps: PropTypes.object,
@@ -49171,7 +49972,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     TabIndicatorProps: PropTypes.object,
 
     /**
-     * Props applied to the [`TabScrollButton`](/api/tab-scroll-button/) element.
+     * Props applied to the [`TabScrollButton`](/material-ui/api/tab-scroll-button/) element.
      * @default {}
      */
     TabScrollButtonProps: PropTypes.object,
@@ -49246,12 +50047,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    * It's important to understand that the text field is a simple abstraction
    * on top of the following components:
    *
-   * - [FormControl](/api/form-control/)
-   * - [InputLabel](/api/input-label/)
-   * - [FilledInput](/api/filled-input/)
-   * - [OutlinedInput](/api/outlined-input/)
-   * - [Input](/api/input/)
-   * - [FormHelperText](/api/form-helper-text/)
+   * - [FormControl](/material-ui/api/form-control/)
+   * - [InputLabel](/material-ui/api/input-label/)
+   * - [FilledInput](/material-ui/api/filled-input/)
+   * - [OutlinedInput](/material-ui/api/outlined-input/)
+   * - [Input](/material-ui/api/input/)
+   * - [FormHelperText](/material-ui/api/form-helper-text/)
    *
    * If you wish to alter the props applied to the `input` element, you can do so as follows:
    *
@@ -49446,7 +50247,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -49471,7 +50274,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     error: PropTypes.bool,
 
     /**
-     * Props applied to the [`FormHelperText`](/api/form-helper-text/) element.
+     * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
      */
     FormHelperTextProps: PropTypes.object,
 
@@ -49493,7 +50296,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     id: PropTypes.string,
 
     /**
-     * Props applied to the [`InputLabel`](/api/input-label/) element.
+     * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
      * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
      */
     InputLabelProps: PropTypes.object,
@@ -49505,8 +50308,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * Props applied to the Input element.
-     * It will be a [`FilledInput`](/api/filled-input/),
-     * [`OutlinedInput`](/api/outlined-input/) or [`Input`](/api/input/)
+     * It will be a [`FilledInput`](/material-ui/api/filled-input/),
+     * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
      * component depending on the `variant` prop value.
      */
     InputProps: PropTypes.object,
@@ -49583,14 +50386,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
     /**
-     * Render a [`Select`](/api/select/) element while passing the Input element to `Select` as `input` parameter.
+     * Render a [`Select`](/material-ui/api/select/) element while passing the Input element to `Select` as `input` parameter.
      * If this option is set you must pass the options of the select as children.
      * @default false
      */
     select: PropTypes.bool,
 
     /**
-     * Props applied to the [`Select`](/api/select/) element.
+     * Props applied to the [`Select`](/material-ui/api/select/) element.
      */
     SelectProps: PropTypes.object,
 
@@ -49786,6 +50589,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * The color of the button when it is in an active state.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'standard'
      */
     color: PropTypes
@@ -50062,7 +50867,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     className: PropTypes.string,
 
     /**
-     * The color of a button when it is selected.
+     * The color of the button when it is selected.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'standard'
      */
     color: PropTypes
@@ -50217,6 +51024,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.DialogTitle = DialogTitle$1;
   exports.Divider = Divider$1;
   exports.Drawer = Drawer$1;
+  exports.Experimental_CssVarsProvider = Experimental_CssVarsProvider;
   exports.Fab = Fab$1;
   exports.Fade = Fade$1;
   exports.FilledInput = FilledInput$1;
@@ -50330,8 +51138,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.autocompleteClasses = autocompleteClasses$1;
   exports.avatarClasses = avatarClasses$1;
   exports.avatarGroupClasses = avatarGroupClasses$1;
-  exports.backdropClasses = backdropClasses;
-  exports.badgeClasses = badgeClasses;
+  exports.backdropClasses = backdropClasses$1;
+  exports.badgeClasses = badgeClasses$1;
   exports.bottomNavigationActionClasses = bottomNavigationActionClasses$1;
   exports.bottomNavigationClasses = bottomNavigationClasses$1;
   exports.breadcrumbsClasses = breadcrumbsClasses$1;
@@ -50356,7 +51164,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.createMuiTheme = createMuiTheme;
   exports.createStyles = createStyles;
   exports.createSvgIcon = createSvgIcon;
-  exports.createTheme = createTheme;
+  exports.createTheme = createTheme$1;
   exports.css = css;
   exports.darkScrollbar = darkScrollbar;
   exports.darken = darken;
@@ -50374,6 +51182,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.easing = easing;
   exports.emphasize = emphasize;
   exports.experimentalStyled = styled$1;
+  exports.experimental_extendTheme = createTheme;
   exports.experimental_sx = sx;
   exports.fabClasses = fabClasses$1;
   exports.filledInputClasses = filledInputClasses$1;
@@ -50394,6 +51203,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.getAutocompleteUtilityClass = getAutocompleteUtilityClass;
   exports.getAvatarGroupUtilityClass = getAvatarGroupUtilityClass;
   exports.getAvatarUtilityClass = getAvatarUtilityClass;
+  exports.getBackdropUtilityClass = getBackdropUtilityClass;
+  exports.getBadgeUtilityClass = getBadgeUtilityClass;
   exports.getBottomNavigationActionUtilityClass = getBottomNavigationActionUtilityClass;
   exports.getBottomNavigationUtilityClass = getBottomNavigationUtilityClass;
   exports.getBreadcrumbsUtilityClass = getBreadcrumbsUtilityClass;
@@ -50432,6 +51243,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.getImageListItemBarUtilityClass = getImageListItemBarUtilityClass;
   exports.getImageListItemUtilityClass = getImageListItemUtilityClass;
   exports.getImageListUtilityClass = getImageListUtilityClass;
+  exports.getInitColorSchemeScript = getInitColorSchemeScript;
   exports.getInputAdornmentUtilityClass = getInputAdornmentUtilityClass;
   exports.getInputBaseUtilityClass = getInputBaseUtilityClass;
   exports.getInputLabelUtilityClasses = getInputLabelUtilityClasses;
@@ -50588,6 +51400,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.unstable_useId = useId;
   exports.unsupportedProp = unsupportedProp;
   exports.useAutocomplete = useAutocomplete;
+  exports.useColorScheme = useColorScheme;
   exports.useControlled = useControlled;
   exports.useEventCallback = useEventCallback;
   exports.useForkRef = useForkRef;