@mui/material 5.5.3 → 5.6.2

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.5.3
+/** @license MUI v5.6.2
  *
  * 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",
@@ -5706,6 +5706,15 @@
   function getPath(obj, path) {
     if (!path || typeof path !== 'string') {
       return null;
+    } // Check if CSS variables are used
+
+
+    if (obj && obj.vars) {
+      const val = `vars.${path}`.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
+
+      if (val != null) {
+        return val;
+      }
     }
 
     return path.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
@@ -6449,7 +6458,7 @@
   styleFunctionSx.filterProps = ['sx'];
   var defaultStyleFunctionSx = styleFunctionSx;
 
-  const _excluded$2j = ["sx"];
+  const _excluded$2l = ["sx"];
 
   const splitProps = props => {
     const result = {
@@ -6470,7 +6479,7 @@
     const {
       sx: inSx
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2j);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2l);
 
     const {
       systemProps,
@@ -6549,7 +6558,7 @@
   	return str;
   }
 
-  const _excluded$2i = ["values", "unit", "step"];
+  const _excluded$2k = ["values", "unit", "step"];
 
   const sortBreakpointsValues = values => {
     const breakpointsAsArray = Object.keys(values).map(key => ({
@@ -6585,7 +6594,7 @@
       unit = 'px',
       step = 5
     } = breakpoints,
-          other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2i);
+          other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2k);
 
     const sortedValues = sortBreakpointsValues(values);
     const keys = Object.keys(sortedValues);
@@ -6677,16 +6686,16 @@
     return spacing;
   }
 
-  const _excluded$2h = ["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$2h);
+          other = _objectWithoutPropertiesLoose(options, _excluded$2j);
 
     const breakpoints = createBreakpoints(breakpointsInput);
     const spacing = createSpacing(spacingInput);
@@ -6802,13 +6811,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$2g = ["className", "component"];
+  const _excluded$2i = ["className", "component"];
   function createBox(options = {}) {
     const {
       defaultTheme,
@@ -6825,7 +6834,7 @@
         className,
         component = 'div'
       } = _extendSxProp,
-            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2g);
+            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2i);
 
       return /*#__PURE__*/jsxRuntime_1(BoxRoot, _extends({
         as: component,
@@ -6861,7 +6870,7 @@
     return Box;
   }
 
-  const _excluded$2f = ["variant"];
+  const _excluded$2h = ["variant"];
 
   function isEmpty$2(string) {
     return string.length === 0;
@@ -6877,7 +6886,7 @@
     const {
       variant
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2f);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2h);
 
     let classKey = variant || '';
     Object.keys(other).sort().forEach(key => {
@@ -6890,9 +6899,9 @@
     return classKey;
   }
 
-  const _excluded$2e = ["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 +6961,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 +6982,7 @@
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-            options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2e); // 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 +7019,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 +7078,7 @@
             let {
               theme: themeInput
             } = _ref2,
-                other = _objectWithoutPropertiesLoose(_ref2, _excluded3$1);
+                other = _objectWithoutPropertiesLoose(_ref2, _excluded3$2);
 
             return styleArg(_extends({
               theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
@@ -7226,6 +7235,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 +7493,720 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) ;
   }
 
-  const _excluded$2d = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
-        _excluded2$a = ["type", "mode"];
+  /**
+   * 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$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'));
@@ -7488,7 +8220,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       props = {},
       styleOverrides = {}
     } = inputTheme,
-          other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2d);
+          other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2e);
 
     const theme = _extends({}, other, {
       components: {}
@@ -7539,7 +8271,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({
@@ -8635,46 +9367,30 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   function useBadge(props) {
     const {
-      anchorOrigin: anchorOriginProp = {
-        vertical: 'top',
-        horizontal: 'right'
-      },
       badgeContent: badgeContentProp,
       invisible: invisibleProp = false,
       max: maxProp = 99,
-      showZero = false,
-      variant: variantProp = 'standard'
+      showZero = false
     } = props;
     const prevProps = usePreviousProps$1({
-      anchorOrigin: anchorOriginProp,
       badgeContent: badgeContentProp,
-      max: maxProp,
-      variant: variantProp
+      max: maxProp
     });
     let invisible = invisibleProp;
 
-    if (invisibleProp === false && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
+    if (invisibleProp === false && badgeContentProp === 0 && !showZero) {
       invisible = true;
     }
 
     const {
-      anchorOrigin = anchorOriginProp,
       badgeContent,
-      max = maxProp,
-      variant = variantProp
+      max = maxProp
     } = invisible ? prevProps : props;
-    let displayValue = '';
-
-    if (variant !== 'dot') {
-      displayValue = badgeContent && Number(badgeContent) > max ? `${max}+` : badgeContent;
-    }
-
+    const displayValue = badgeContent && Number(badgeContent) > max ? `${max}+` : badgeContent;
     return {
-      anchorOrigin,
       badgeContent,
       invisible,
       max,
-      variant,
       displayValue
     };
   }
@@ -8727,70 +9443,53 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return result;
   }
 
-  function getBadgeUtilityClass(slot) {
-    return generateUtilityClass('MuiBadge', slot);
+  function getBadgeUnstyledUtilityClass(slot) {
+    return generateUtilityClass('BaseBadge', slot);
   }
-  const badgeUnstyledClasses = generateUtilityClasses('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopLeft', 'anchorOriginTopRight', 'anchorOriginBottomLeft', 'anchorOriginBottomRight', 'invisible']);
-  var badgeUnstyledClasses$1 = badgeUnstyledClasses;
+  generateUtilityClasses('BaseBadge', ['root', 'badge', 'invisible']);
 
-  const _excluded$2c = ["anchorOrigin", "classes", "badgeContent", "component", "children", "className", "components", "componentsProps", "invisible", "max", "showZero", "variant"];
+  const _excluded$2d = ["badgeContent", "component", "children", "className", "components", "componentsProps", "invisible", "max", "showZero"];
 
-  const useUtilityClasses$1O = ownerState => {
+  const useUtilityClasses$1P = ownerState => {
     const {
-      variant,
-      anchorOrigin,
-      invisible,
-      classes
+      invisible
     } = 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, getBadgeUnstyledUtilityClass, 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$1O(ownerState);
+    const classes = useUtilityClasses$1P(ownerState);
     const Root = component || components.Root || 'span';
     const rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root), ownerState);
     const Badge = components.Badge || 'span';
@@ -8813,18 +9512,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.
      */
@@ -8835,11 +9522,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
      */
@@ -8886,13 +9568,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;
 
@@ -8910,9 +9586,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *
    * Demos:
    *
-   * - [Click Away Listener](https://mui.com/base/components/click-away-listener/)
-   * - [Click Away Listener](https://mui.com/material-ui/react-click-away-listener/)
-   * - [Menus](https://mui.com/material-ui/react-menu/)
+   * - [Click away listener](https://mui.com/base/react-click-away-listener/)
    *
    * API:
    *
@@ -11129,8 +11803,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') {
@@ -11175,7 +11849,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);
@@ -11296,7 +11970,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);
 
@@ -12065,9 +12739,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$1N = ownerState => {
+  const useUtilityClasses$1O = ownerState => {
     const {
       open,
       exited,
@@ -12093,12 +12767,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).
@@ -12137,7 +12811,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({});
@@ -12214,7 +12888,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       keepMounted
     });
 
-    const classes = useUtilityClasses$1N(ownerState);
+    const classes = useUtilityClasses$1O(ownerState);
 
     if (!keepMounted && !open && (!hasTransition || exited)) {
       return null;
@@ -12456,6 +13130,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     /**
      * Callback fired when the backdrop is clicked.
+     * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
      */
     onBackdropClick: PropTypes.func,
 
@@ -13285,11 +13960,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$1M = ownerState => {
+  const useUtilityClasses$1N = ownerState => {
     const {
       disabled,
       dragging,
@@ -13346,7 +14021,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
 
 
@@ -13405,7 +14080,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$1M(ownerState);
+    const classes = useUtilityClasses$1N(ownerState);
     return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, getRootProps({
       onMouseDown
     }), {
@@ -13745,7 +14420,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;
@@ -13774,7 +14449,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
@@ -13974,7 +14649,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: {
@@ -14158,7 +14833,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);
@@ -14294,7 +14969,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;
@@ -14327,7 +15002,7 @@ const theme2 = createTheme({ palette: {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-          other = _objectWithoutPropertiesLoose(_ref, _excluded$26);
+          other = _objectWithoutPropertiesLoose(_ref, _excluded$27);
 
     {
       if (typeof fontSize !== 'number') {
@@ -14395,7 +15070,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 = {
@@ -14450,7 +15125,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
@@ -14506,19 +15181,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,
@@ -14577,11 +15252,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);
   }
@@ -14788,11 +15463,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
@@ -14809,14 +15484,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;
@@ -14839,6 +15514,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);
   }
@@ -14847,7 +15628,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$1L = ownerState => {
+  const useUtilityClasses$1M = ownerState => {
     const {
       color,
       fontSize,
@@ -14932,7 +15713,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       more.viewBox = viewBox;
     }
 
-    const classes = useUtilityClasses$1L(ownerState);
+    const classes = useUtilityClasses$1M(ownerState);
     return /*#__PURE__*/jsxRuntime_2(SvgIconRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -14974,7 +15755,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [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'
      */
@@ -16069,7 +16850,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$1K = ownerState => {
+  const useUtilityClasses$1L = ownerState => {
     const {
       orientation,
       classes
@@ -16140,7 +16921,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.
    */
 
@@ -16177,7 +16958,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       collapsedSize: collapsedSizeProp
     });
 
-    const classes = useUtilityClasses$1K(ownerState);
+    const classes = useUtilityClasses$1L(ownerState);
     const theme = useTheme();
     const timer = React__namespace.useRef();
     const wrapperRef = React__namespace.useRef(null);
@@ -16491,7 +17272,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return (alphaValue / 100).toFixed(2);
   };
 
-  const useUtilityClasses$1J = ownerState => {
+  const useUtilityClasses$1K = ownerState => {
     const {
       square,
       elevation,
@@ -16551,7 +17332,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1J(ownerState);
+    const classes = useUtilityClasses$1K(ownerState);
 
     {
       // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -16658,7 +17439,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$1I = ownerState => {
+  const useUtilityClasses$1J = ownerState => {
     const {
       classes,
       square,
@@ -16802,7 +17583,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       expanded
     });
 
-    const classes = useUtilityClasses$1I(ownerState);
+    const classes = useUtilityClasses$1J(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AccordionRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -16906,7 +17687,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,
@@ -16927,7 +17708,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1$ = ["className", "disableSpacing"];
 
-  const useUtilityClasses$1H = ownerState => {
+  const useUtilityClasses$1I = ownerState => {
     const {
       classes,
       disableSpacing
@@ -16975,7 +17756,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableSpacing
     });
 
-    const classes = useUtilityClasses$1H(ownerState);
+    const classes = useUtilityClasses$1I(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionActionsRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -17026,7 +17807,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1_ = ["className"];
 
-  const useUtilityClasses$1G = ownerState => {
+  const useUtilityClasses$1H = ownerState => {
     const {
       classes
     } = ownerState;
@@ -17057,7 +17838,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$1G(ownerState);
+    const classes = useUtilityClasses$1H(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionDetailsRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -17530,7 +18311,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$1F = ownerState => {
+  const useUtilityClasses$1G = ownerState => {
     const {
       disabled,
       focusVisible,
@@ -17832,7 +18613,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       focusVisible
     });
 
-    const classes = useUtilityClasses$1F(ownerState);
+    const classes = useUtilityClasses$1G(ownerState);
     return /*#__PURE__*/jsxRuntime_2(ButtonBaseRoot, _extends({
       as: ComponentProp,
       className: clsx(classes.root, className),
@@ -18068,7 +18849,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1X = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
 
-  const useUtilityClasses$1E = ownerState => {
+  const useUtilityClasses$1F = ownerState => {
     const {
       classes,
       expanded,
@@ -18189,7 +18970,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableGutters
     });
 
-    const classes = useUtilityClasses$1E(ownerState);
+    const classes = useUtilityClasses$1F(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AccordionSummaryRoot, _extends({
       focusRipple: false,
       disableRipple: true,
@@ -18277,7 +19058,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$1D = ownerState => {
+  const useUtilityClasses$1E = ownerState => {
     const {
       classes,
       disabled,
@@ -18355,7 +19136,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.
    */
 
@@ -18384,7 +19165,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size
     });
 
-    const classes = useUtilityClasses$1D(ownerState);
+    const classes = useUtilityClasses$1E(ownerState);
     return /*#__PURE__*/jsxRuntime_1(IconButtonRoot, _extends({
       className: clsx(classes.root, className),
       centerRipple: true,
@@ -18430,7 +19211,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'default'
      */
     color: PropTypes
@@ -18507,7 +19288,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$1C = ownerState => {
+  const useUtilityClasses$1D = ownerState => {
     const {
       variant,
       color,
@@ -18631,7 +19412,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1C(ownerState);
+    const classes = useUtilityClasses$1D(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AlertRoot, _extends({
       role: role,
       elevation: 0,
@@ -18697,7 +19478,7 @@ 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,
@@ -18705,7 +19486,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      */
     color: PropTypes
     /* @typescript-to-proptypes-ignore */
@@ -18773,7 +19554,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$1B = ownerState => {
+  const useUtilityClasses$1C = ownerState => {
     const {
       align,
       gutterBottom,
@@ -18874,7 +19655,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$1B(ownerState);
+    const classes = useUtilityClasses$1C(ownerState);
     return /*#__PURE__*/jsxRuntime_1(TypographyRoot, _extends({
       as: Component,
       ref: ref,
@@ -18984,7 +19765,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1T = ["className"];
 
-  const useUtilityClasses$1A = ownerState => {
+  const useUtilityClasses$1B = ownerState => {
     const {
       classes
     } = ownerState;
@@ -19018,7 +19799,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$1A(ownerState);
+    const classes = useUtilityClasses$1B(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AlertTitleRoot, _extends({
       gutterBottom: true,
       component: "div",
@@ -19065,7 +19846,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1S = ["className", "color", "enableColorOnDark", "position"];
 
-  const useUtilityClasses$1z = ownerState => {
+  const useUtilityClasses$1A = ownerState => {
     const {
       color,
       position,
@@ -19163,7 +19944,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       enableColorOnDark
     });
 
-    const classes = useUtilityClasses$1z(ownerState);
+    const classes = useUtilityClasses$1A(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AppBarRoot, _extends({
       square: true,
       component: "header",
@@ -19199,7 +19980,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -19236,13 +20017,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) {
@@ -19376,7 +20157,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$1y = ownerState => {
+  const useUtilityClasses$1z = ownerState => {
     const {
       classes,
       color,
@@ -19449,7 +20230,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       inset
     });
 
-    const classes = useUtilityClasses$1y(ownerState);
+    const classes = useUtilityClasses$1z(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListSubheaderRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -19529,7 +20310,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$1x = ownerState => {
+  const useUtilityClasses$1y = ownerState => {
     const {
       classes,
       disabled,
@@ -19863,7 +20644,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1x(ownerState);
+    const classes = useUtilityClasses$1y(ownerState);
     const moreProps = component === ButtonBase$1 ? _extends({
       component: ComponentProp || 'div',
       focusVisibleClassName: classes.focusVisible
@@ -19964,7 +20745,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'default'
      */
     color: PropTypes
@@ -20078,7 +20859,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
     }));
   }
 
@@ -20147,7 +20928,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$1w = ownerState => {
+  const useUtilityClasses$1x = ownerState => {
     const {
       classes,
       color,
@@ -20559,7 +21340,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       type
     });
 
-    const classes = useUtilityClasses$1w(ownerState);
+    const classes = useUtilityClasses$1x(ownerState);
     const Root = components.Root || InputBaseRoot;
     const rootProps = componentsProps.root || {};
     const Input = components.Input || InputBaseComponent;
@@ -20647,7 +21428,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [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
@@ -20749,7 +21530,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,
@@ -20889,7 +21670,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$1v = ownerState => {
+  const useUtilityClasses$1w = ownerState => {
     const {
       classes,
       disablePortal,
@@ -21312,7 +22093,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size
     });
 
-    const classes = useUtilityClasses$1v(ownerState);
+    const classes = useUtilityClasses$1w(ownerState);
     let startAdornment;
 
     if (multiple && value.length > 0) {
@@ -21513,7 +22294,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,
 
@@ -21551,7 +22332,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,
@@ -21559,7 +22340,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,
@@ -21675,6 +22456,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * Used to determine the string value for a given option.
      * It's used to fill the input (and the list box options if `renderOption` is not provided).
      *
+     * If used in free solo mode, it must accept both the type of the options and a string.
+     *
      * @param {T} option
      * @returns {string}
      * @default (option) => option.label ?? option
@@ -21753,7 +22536,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,
@@ -21767,7 +22550,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,
@@ -21831,7 +22614,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,
@@ -21948,7 +22731,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$1u = ownerState => {
+  const useUtilityClasses$1v = ownerState => {
     const {
       classes,
       variant,
@@ -22101,7 +22884,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1u(ownerState);
+    const classes = useUtilityClasses$1v(ownerState);
 
     if (hasImgNotFailing) {
       children = /*#__PURE__*/jsxRuntime_1(AvatarImg, _extends({
@@ -22216,7 +22999,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     medium: null
   };
 
-  const useUtilityClasses$1t = ownerState => {
+  const useUtilityClasses$1u = ownerState => {
     const {
       classes
     } = ownerState;
@@ -22288,7 +23071,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);
     const children = React__namespace.Children.toArray(childrenProp).filter(child => {
       {
         if (reactIs_2(child)) {
@@ -22415,7 +23198,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.
    */
 
@@ -22628,7 +23411,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1K = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
 
-  const useUtilityClasses$1s = ownerState => {
+  const useUtilityClasses$1t = ownerState => {
     const {
       classes,
       invisible
@@ -22691,7 +23474,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       invisible
     });
 
-    const classes = useUtilityClasses$1s(ownerState);
+    const classes = useUtilityClasses$1t(ownerState);
     return /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
       in: open,
       timeout: transitionDuration
@@ -22788,22 +23571,31 @@ 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;
 
-  const extendUtilityClasses$2 = ownerState => {
+  const useUtilityClasses$1s = ownerState => {
     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)}`]])
-    });
+    const slots = {
+      root: ['root'],
+      badge: ['badge', variant, invisible && 'invisible', `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`, `overlap${capitalize(overlap)}`, color !== 'default' && `color${capitalize(color)}`]
+    };
+    return composeClasses(slots, getBadgeUtilityClass, classes);
   };
 
   const BadgeRoot = styled$1('span', {
@@ -22865,7 +23657,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' && {
@@ -22873,7 +23665,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' && {
@@ -22881,7 +23673,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' && {
@@ -22889,7 +23681,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' && {
@@ -22897,7 +23689,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' && {
@@ -22905,7 +23697,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' && {
@@ -22913,7 +23705,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' && {
@@ -22921,7 +23713,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 && {
@@ -22931,7 +23723,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,
@@ -22943,12 +23735,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'
@@ -22958,7 +23752,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;
 
@@ -22969,44 +23764,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);
+    const classes = useUtilityClasses$1s(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
     }));
   });
@@ -23045,10 +23853,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     classes: PropTypes.object,
 
+    /**
+     * @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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'default'
      */
     color: PropTypes
@@ -23434,7 +24247,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.
    */
@@ -23698,7 +24511,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,
@@ -23801,106 +24614,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',
@@ -24046,7 +24864,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -24344,7 +25162,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -25624,7 +26442,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -25925,7 +26743,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -26314,12 +27132,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).
@@ -26410,7 +27228,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,
 
@@ -26519,6 +27337,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * Callback fired when the backdrop is clicked.
+     * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
      */
     onBackdropClick: PropTypes.func,
 
@@ -26892,6 +27711,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * Callback fired when the backdrop is clicked.
+     * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
      */
     onBackdropClick: PropTypes.func,
 
@@ -26915,7 +27735,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,
@@ -26933,7 +27753,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,
@@ -27653,7 +28473,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.
    */
 
@@ -28057,7 +28877,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.
    */
 
@@ -28213,7 +29033,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,
@@ -28232,13 +29052,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,
 
@@ -28443,7 +29263,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [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']),
@@ -28578,7 +29398,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       },
       [`&.${filledInputClasses$1.focused}:after`]: {
-        transform: 'scaleX(1)'
+        // translateX(0) is a workaround for Safari transform scale bug
+        // See https://github.com/mui/material-ui/issues/31766
+        transform: 'scaleX(1) translateX(0)'
       },
       [`&.${filledInputClasses$1.error}:after`]: {
         borderBottomColor: theme.palette.error.main,
@@ -28734,7 +29556,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [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
@@ -28842,7 +29664,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,
@@ -28966,7 +29788,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>
@@ -29149,7 +29971,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -29877,7 +30699,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      */
     color: PropTypes
     /* @typescript-to-proptypes-ignore */
@@ -30455,14 +31277,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   };
   /**
-   * Conditionally apply a workaround for the CSS transition bug in Safari 15.4.
-   * Remove this workaround once the Safari bug is fixed.
+   * 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 isSafari154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*safari/i.test(navigator.userAgent) && /version\/15\.[4-9]/i.test(navigator.userAgent);
+  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](/components/tooltips/) and
-   * [Popover](/components/popover/) components.
+   * 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.
    */
 
@@ -30533,7 +31355,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         duration,
         delay
       }), theme.transitions.create('transform', {
-        duration: isSafari154 ? duration : duration * 0.666,
+        duration: isWebKit154 ? duration : duration * 0.666,
         delay,
         easing: transitionTimingFunction
       })].join(',');
@@ -30569,8 +31391,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         duration,
         delay
       }), theme.transitions.create('transform', {
-        duration: isSafari154 ? duration : duration * 0.666,
-        delay: isSafari154 ? 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;
@@ -31569,7 +32391,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'inherit'
      */
     color: PropTypes
@@ -32250,7 +33072,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       },
       [`&.${inputClasses$1.focused}:after`]: {
-        transform: 'scaleX(1)'
+        // translateX(0) is a workaround for Safari transform scale bug
+        // See https://github.com/mui/material-ui/issues/31766
+        transform: 'scaleX(1) translateX(0)'
       },
       [`&.${inputClasses$1.error}:after`]: {
         borderBottomColor: theme.palette.error.main,
@@ -32358,7 +33182,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [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
@@ -32458,7 +33282,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,
@@ -32870,7 +33694,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      */
     color: PropTypes
     /* @typescript-to-proptypes-ignore */
@@ -33257,7 +34081,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -33296,7 +34120,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',
@@ -33379,6 +34203,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'
@@ -33392,10 +34217,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,
@@ -33430,7 +34257,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,
@@ -33439,15 +34268,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
@@ -33503,7 +34335,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,
 
@@ -33724,6 +34556,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,
@@ -34273,7 +35106,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,
 
@@ -34281,7 +35114,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,
 
@@ -34368,7 +35201,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,
 
@@ -34403,7 +35236,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,
 
@@ -34869,7 +35702,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.
    */
@@ -35526,7 +36359,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
@@ -35559,7 +36392,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,
@@ -35810,7 +36643,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,
@@ -35834,7 +36667,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,
 
@@ -37001,7 +37834,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [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
@@ -37093,7 +37926,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,
@@ -37582,7 +38415,7 @@ 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'standard'
      */
     color: PropTypes
@@ -37808,7 +38641,7 @@ 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'standard'
      */
     color: PropTypes
@@ -37837,7 +38670,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.
@@ -38172,7 +39005,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -38962,7 +39795,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) {
@@ -39507,7 +40340,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;
       }
@@ -39542,6 +40375,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),
@@ -39558,7 +40412,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.
@@ -39766,7 +40620,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,
 
@@ -40052,7 +40906,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,
 
@@ -40063,7 +40917,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,
 
@@ -40898,7 +41752,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -41609,7 +42463,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,
 
@@ -41684,7 +42538,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,
@@ -41723,7 +42577,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.
    */
 
@@ -42378,7 +43232,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,
@@ -42453,7 +43307,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,
@@ -43258,7 +44112,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,
@@ -43277,7 +44131,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,
@@ -43501,7 +44355,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,
@@ -43528,7 +44382,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,
 
@@ -44458,12 +45312,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,
 
@@ -44879,7 +45733,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,
@@ -45992,7 +46846,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -47325,7 +48179,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,
 
@@ -47337,7 +48191,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.
@@ -47346,7 +48200,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,
 
@@ -47638,7 +48492,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,
 
@@ -47674,7 +48528,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) {
@@ -47687,7 +48541,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}`}`;
      * }
@@ -47697,13 +48551,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,
 
@@ -47764,7 +48618,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,
@@ -49137,7 +49991,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,
@@ -49212,12 +50066,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:
    *
@@ -49414,7 +50268,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'primary'
      */
     color: PropTypes
@@ -49439,7 +50293,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,
 
@@ -49461,7 +50315,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,
@@ -49473,8 +50327,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,
@@ -49551,14 +50405,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,
 
@@ -49755,7 +50609,7 @@ 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'standard'
      */
     color: PropTypes
@@ -50034,7 +50888,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'standard'
      */
     color: PropTypes
@@ -50189,6 +51043,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;
@@ -50303,7 +51158,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.avatarClasses = avatarClasses$1;
   exports.avatarGroupClasses = avatarGroupClasses$1;
   exports.backdropClasses = backdropClasses$1;
-  exports.badgeClasses = badgeClasses;
+  exports.badgeClasses = badgeClasses$1;
   exports.bottomNavigationActionClasses = bottomNavigationActionClasses$1;
   exports.bottomNavigationClasses = bottomNavigationClasses$1;
   exports.breadcrumbsClasses = breadcrumbsClasses$1;
@@ -50328,7 +51183,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;
@@ -50346,6 +51201,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;
@@ -50367,6 +51223,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.getAvatarGroupUtilityClass = getAvatarGroupUtilityClass;
   exports.getAvatarUtilityClass = getAvatarUtilityClass;
   exports.getBackdropUtilityClass = getBackdropUtilityClass;
+  exports.getBadgeUtilityClass = getBadgeUtilityClass;
   exports.getBottomNavigationActionUtilityClass = getBottomNavigationActionUtilityClass;
   exports.getBottomNavigationUtilityClass = getBottomNavigationUtilityClass;
   exports.getBreadcrumbsUtilityClass = getBreadcrumbsUtilityClass;
@@ -50405,6 +51262,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;
@@ -50561,6 +51419,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;