@mui/material 5.5.3 → 5.6.0

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.5.3
+/** @license MUI v5.6.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -6449,7 +6449,7 @@
   styleFunctionSx.filterProps = ['sx'];
   var defaultStyleFunctionSx = styleFunctionSx;
 
-  const _excluded$2j = ["sx"];
+  const _excluded$2l = ["sx"];
 
   const splitProps = props => {
     const result = {
@@ -6470,7 +6470,7 @@
     const {
       sx: inSx
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2j);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2l);
 
     const {
       systemProps,
@@ -6549,7 +6549,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 +6585,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 +6677,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 +6802,13 @@
     return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
   }
 
-  const systemDefaultTheme$1 = createTheme$1();
+  const systemDefaultTheme$1 = createTheme$2();
 
   function useTheme$1(defaultTheme = systemDefaultTheme$1) {
     return useTheme$2(defaultTheme);
   }
 
-  const _excluded$2g = ["className", "component"];
+  const _excluded$2i = ["className", "component"];
   function createBox(options = {}) {
     const {
       defaultTheme,
@@ -6825,7 +6825,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 +6861,7 @@
     return Box;
   }
 
-  const _excluded$2f = ["variant"];
+  const _excluded$2h = ["variant"];
 
   function isEmpty$2(string) {
     return string.length === 0;
@@ -6877,7 +6877,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 +6890,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 +6952,7 @@
   function shouldForwardProp(prop) {
     return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
   }
-  const systemDefaultTheme = createTheme$1();
+  const systemDefaultTheme = createTheme$2();
 
   const lowercaseFirstLetter = string => {
     return string.charAt(0).toLowerCase() + string.slice(1);
@@ -6973,7 +6973,7 @@
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-            options = _objectWithoutPropertiesLoose(inputOptions, _excluded$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 +7010,7 @@
             let {
               theme: themeInput
             } = _ref,
-                other = _objectWithoutPropertiesLoose(_ref, _excluded2$b);
+                other = _objectWithoutPropertiesLoose(_ref, _excluded2$d);
 
             return stylesArg(_extends({
               theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
@@ -7069,7 +7069,7 @@
             let {
               theme: themeInput
             } = _ref2,
-                other = _objectWithoutPropertiesLoose(_ref2, _excluded3$1);
+                other = _objectWithoutPropertiesLoose(_ref2, _excluded3$2);
 
             return styleArg(_extends({
               theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
@@ -7226,6 +7226,17 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       colorSpace
     };
   }
+  /**
+   * Returns a channel created from the input color.
+   *
+   * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+   * @returns {string} - The channel for the color, that can be used in rgba or hsla colors
+   */
+
+  const colorChannel = color => {
+    const decomposedColor = decomposeColor(color);
+    return decomposedColor.values.slice(0, 3).map((val, idx) => decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? `${val}%` : val).join(' ');
+  };
   /**
    * Converts a color object with type and values to a string.
    * @param {object} color - Decomposed color
@@ -7473,8 +7484,720 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) ;
   }
 
-  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 +8211,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 +8262,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       type: typeInput,
       mode: modeInput
     } = palette,
-          paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2$a);
+          paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2$b);
 
     const finalMode = modeInput || typeInput || 'light';
     theme.palette = _extends({
@@ -8635,46 +9358,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,66 +9434,49 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return result;
   }
 
-  function getBadgeUtilityClass(slot) {
-    return generateUtilityClass('MuiBadge', slot);
+  function getBadgeUtilityClass$1(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 {
-      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, getBadgeUtilityClass$1, undefined);
   };
 
   const BadgeUnstyled = /*#__PURE__*/React__namespace.forwardRef(function BadgeUnstyled(props, ref) {
     const {
-      anchorOrigin: anchorOriginProp = {
-        vertical: 'top',
-        horizontal: 'right'
-      },
-      classes: classesProp,
       component,
       children,
       className,
       components = {},
       componentsProps = {},
       max: maxProp = 99,
-      showZero = false,
-      variant: variantProp = 'standard'
+      showZero = false
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2c);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2d);
 
     const {
-      anchorOrigin,
       badgeContent,
       max,
-      variant,
       displayValue,
       invisible
     } = useBadge(_extends({}, props, {
-      anchorOrigin: anchorOriginProp,
-      max: maxProp,
-      variant: variantProp
+      max: maxProp
     }));
 
     const ownerState = _extends({}, props, {
-      anchorOrigin,
       badgeContent,
-      classes: classesProp,
       invisible,
       max,
-      variant,
       showZero
     });
 
@@ -8813,18 +9503,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     // |     To update them edit the d.ts file and run "yarn proptypes"     |
     // ----------------------------------------------------------------------
 
-    /**
-     * The anchor of the badge.
-     * @default {
-     *   vertical: 'top',
-     *   horizontal: 'right',
-     * }
-     */
-    anchorOrigin: PropTypes.shape({
-      horizontal: PropTypes.oneOf(['left', 'right']).isRequired,
-      vertical: PropTypes.oneOf(['bottom', 'top']).isRequired
-    }),
-
     /**
      * The content rendered within the badge.
      */
@@ -8835,11 +9513,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      */
     children: PropTypes.node,
 
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes: PropTypes.object,
-
     /**
      * @ignore
      */
@@ -8886,13 +9559,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * Controls whether the badge is hidden when `badgeContent` is zero.
      * @default false
      */
-    showZero: PropTypes.bool,
-
-    /**
-     * The variant to use.
-     * @default 'standard'
-     */
-    variant: PropTypes.string
+    showZero: PropTypes.bool
   } ;
   var BadgeUnstyled$1 = BadgeUnstyled;
 
@@ -8910,9 +9577,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 +11794,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   var Portal$1 = Portal;
 
-  const _excluded$2b = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "ownerState", "placement", "popperOptions", "popperRef", "TransitionProps"],
-        _excluded2$9 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition"];
+  const _excluded$2c = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "ownerState", "placement", "popperOptions", "popperRef", "TransitionProps"],
+        _excluded2$a = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition"];
 
   function flipPlacement(placement, direction) {
     if (direction === 'ltr') {
@@ -11175,7 +11840,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       popperRef: popperRefProp,
       TransitionProps
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2b);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2c);
 
     const tooltipRef = React__namespace.useRef(null);
     const ownRef = useForkRef(tooltipRef, ref);
@@ -11296,7 +11961,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       style,
       transition = false
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded2$9);
+          other = _objectWithoutPropertiesLoose(props, _excluded2$a);
 
     const [exited, setExited] = React__namespace.useState(true);
 
@@ -12065,7 +12730,7 @@ 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 {
@@ -12137,7 +12802,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       onTransitionEnter,
       onTransitionExited
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2a);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2b);
 
     const [exited, setExited] = React__namespace.useState(true);
     const modal = React__namespace.useRef({});
@@ -13285,7 +13950,7 @@ 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;
 
@@ -13346,7 +14011,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       components = {},
       componentsProps = {}
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$29); // all props with defaults
+          other = _objectWithoutPropertiesLoose(props, _excluded$2a); // all props with defaults
     // consider extracting to hook an reusing the lint rule for the varints
 
 
@@ -13745,7 +14410,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var SliderUnstyled$1 = SliderUnstyled;
 
-  const _excluded$28 = ["onChange", "maxRows", "minRows", "style", "value"];
+  const _excluded$29 = ["onChange", "maxRows", "minRows", "style", "value"];
 
   function getStyleValue(computedStyle, property) {
     return parseInt(computedStyle[property], 10) || 0;
@@ -13774,7 +14439,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       style,
       value
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$28);
+          other = _objectWithoutPropertiesLoose(props, _excluded$29);
 
     const {
       current: isControlled
@@ -13974,7 +14639,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }, mixins);
   }
 
-  const _excluded$27 = ["mode", "contrastThreshold", "tonalOffset"];
+  const _excluded$28 = ["mode", "contrastThreshold", "tonalOffset"];
   const light = {
     // The colors used to style the text.
     text: {
@@ -14158,7 +14823,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-          other = _objectWithoutPropertiesLoose(palette, _excluded$27);
+          other = _objectWithoutPropertiesLoose(palette, _excluded$28);
 
     const primary = palette.primary || getDefaultPrimary(mode);
     const secondary = palette.secondary || getDefaultSecondary(mode);
@@ -14294,7 +14959,7 @@ const theme2 = createTheme({ palette: {
     return paletteOutput;
   }
 
-  const _excluded$26 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+  const _excluded$27 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 
   function round$1(value) {
     return Math.round(value * 1e5) / 1e5;
@@ -14327,7 +14992,7 @@ const theme2 = createTheme({ palette: {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-          other = _objectWithoutPropertiesLoose(_ref, _excluded$26);
+          other = _objectWithoutPropertiesLoose(_ref, _excluded$27);
 
     {
       if (typeof fontSize !== 'number') {
@@ -14395,7 +15060,7 @@ const theme2 = createTheme({ palette: {
   const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
   var shadows$1 = shadows;
 
-  const _excluded$25 = ["duration", "easing", "delay"];
+  const _excluded$26 = ["duration", "easing", "delay"];
   // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
   // to learn the context in which each easing should be used.
   const easing = {
@@ -14450,7 +15115,7 @@ const theme2 = createTheme({ palette: {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-            other = _objectWithoutPropertiesLoose(options, _excluded$25);
+            other = _objectWithoutPropertiesLoose(options, _excluded$26);
 
       {
         const isString = value => typeof value === 'string'; // IE11 support, replace with Number.isNaN
@@ -14506,19 +15171,19 @@ const theme2 = createTheme({ palette: {
   };
   var zIndex$1 = zIndex;
 
-  const _excluded$24 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+  const _excluded$25 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 
-  function createTheme(options = {}, ...args) {
+  function createTheme$1(options = {}, ...args) {
     const {
       mixins: mixinsInput = {},
       palette: paletteInput = {},
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-          other = _objectWithoutPropertiesLoose(options, _excluded$24);
+          other = _objectWithoutPropertiesLoose(options, _excluded$25);
 
     const palette = createPalette(paletteInput);
-    const systemTheme = createTheme$1(options);
+    const systemTheme = createTheme$2(options);
     let muiTheme = deepmerge(systemTheme, {
       mixins: createMixins(systemTheme.breakpoints, systemTheme.spacing, mixinsInput),
       palette,
@@ -14577,11 +15242,11 @@ const theme2 = createTheme({ palette: {
       }
     }
 
-    return createTheme(...args);
+    return createTheme$1(...args);
   }
 
   function createMuiStrictModeTheme(options, ...args) {
-    return createTheme(deepmerge({
+    return createTheme$1(deepmerge({
       unstable_strictMode: true
     }, options), ...args);
   }
@@ -14788,11 +15453,11 @@ Use unitless line heights instead.` );
     return theme;
   }
 
-  const defaultTheme$1 = createTheme();
-  var defaultTheme$2 = defaultTheme$1;
+  const defaultTheme$2 = createTheme$1();
+  var defaultTheme$3 = defaultTheme$2;
 
   function useTheme() {
-    const theme = useTheme$1(defaultTheme$2);
+    const theme = useTheme$1(defaultTheme$3);
 
     {
       // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -14809,14 +15474,14 @@ Use unitless line heights instead.` );
     return useThemeProps$1({
       props,
       name,
-      defaultTheme: defaultTheme$2
+      defaultTheme: defaultTheme$3
     });
   }
 
   const rootShouldForwardProp = prop => shouldForwardProp(prop) && prop !== 'classes';
   const slotShouldForwardProp = shouldForwardProp;
   const styled = createStyled({
-    defaultTheme: defaultTheme$2,
+    defaultTheme: defaultTheme$3,
     rootShouldForwardProp
   });
   var styled$1 = styled;
@@ -14839,6 +15504,112 @@ You have to import it from @mui/styles.
 See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
 
+  const _excluded$24 = ["colorSchemes", "opacity"],
+        _excluded2$9 = ["palette"];
+  const defaultOpacity = {
+    active: 0.54,
+    hover: 0.04,
+    selected: 0.08,
+    disabled: 0.26,
+    focus: 0.12
+  };
+
+  function createTheme(options = {}, ...args) {
+    var _colorSchemesInput$li, _colorSchemesInput$da;
+
+    const {
+      colorSchemes: colorSchemesInput = {},
+      opacity: opacityInput = {}
+    } = options,
+          input = _objectWithoutPropertiesLoose(options, _excluded$24); // eslint-disable-next-line prefer-const
+
+
+    let _createThemeWithoutVa = createTheme$1(_extends({}, input, colorSchemesInput.light && {
+      palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
+    })),
+        {
+      palette: lightPalette
+    } = _createThemeWithoutVa,
+        muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2$9);
+
+    const {
+      palette: darkPalette
+    } = createTheme$1({
+      palette: _extends({
+        mode: 'dark'
+      }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
+    });
+    colorSchemesInput.light = {
+      palette: lightPalette
+    };
+    colorSchemesInput.dark = {
+      palette: darkPalette
+    };
+    const colorSchemes = {};
+    Object.keys(colorSchemesInput).forEach(key => {
+      const palette = createPalette(colorSchemesInput[key].palette);
+      Object.keys(palette).forEach(color => {
+        const colors = palette[color];
+
+        if (colors.main) {
+          palette[color].mainChannel = colorChannel(colors.main);
+        }
+
+        if (colors.light) {
+          palette[color].lightChannel = colorChannel(colors.light);
+        }
+
+        if (colors.dark) {
+          palette[color].darkChannel = colorChannel(colors.dark);
+        }
+
+        if (colors.primary) {
+          palette[color].primaryChannel = colorChannel(colors.primary);
+        }
+
+        if (colors.secondary) {
+          palette[color].secondaryChannel = colorChannel(colors.secondary);
+        }
+
+        if (colors.disabled) {
+          palette[color].disabledChannel = colorChannel(colors.disabled);
+        }
+      });
+      colorSchemes[key] = {
+        palette
+      };
+    });
+
+    const opacity = _extends({}, defaultOpacity, opacityInput);
+
+    muiTheme.colorSchemes = colorSchemes;
+    muiTheme.opacity = opacity;
+    muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+    return muiTheme;
+  }
+
+  const defaultTheme$1 = createTheme();
+  const {
+    CssVarsProvider: Experimental_CssVarsProvider,
+    useColorScheme,
+    getInitColorSchemeScript
+  } = createCssVarsProvider({
+    theme: defaultTheme$1,
+    defaultColorScheme: {
+      light: 'light',
+      dark: 'dark'
+    },
+    prefix: 'md',
+    resolveTheme: theme => {
+      const newTheme = _extends({}, theme, {
+        typography: createTypography(theme.palette, theme.typography)
+      });
+
+      return newTheme;
+    },
+    shouldSkipGeneratingVar: keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/)
+  });
+
   function getSvgIconUtilityClass(slot) {
     return generateUtilityClass('MuiSvgIcon', slot);
   }
@@ -20078,7 +20849,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   function GlobalStyles(props) {
     return /*#__PURE__*/jsxRuntime_1(GlobalStyles$1, _extends({}, props, {
-      defaultTheme: defaultTheme$2
+      defaultTheme: defaultTheme$3
     }));
   }
 
@@ -22788,9 +23559,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   var shouldSpreadAdditionalProps$1 = shouldSpreadAdditionalProps;
 
-  const _excluded$1J = ["anchorOrigin", "component", "components", "componentsProps", "overlap", "color", "invisible", "badgeContent", "showZero", "variant"];
-  const badgeClasses = _extends({}, badgeUnstyledClasses$1, generateUtilityClasses('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
-  'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']));
+  function getBadgeUtilityClass(slot) {
+    return generateUtilityClass('MuiBadge', slot);
+  }
+  const badgeClasses = generateUtilityClasses('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft', 'invisible', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
+  'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']);
+  var badgeClasses$1 = badgeClasses;
+
+  const _excluded$1J = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "showZero", "variant"];
   const RADIUS_STANDARD = 10;
   const RADIUS_DOT = 4;
 
@@ -22798,12 +23574,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
       color,
       anchorOrigin,
+      invisible,
       overlap,
+      variant,
       classes = {}
     } = ownerState;
-    return _extends({}, classes, {
-      badge: clsx(classes.badge, getBadgeUtilityClass(`anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`), getBadgeUtilityClass(`overlap${capitalize(overlap)}`), color !== 'default' && [getBadgeUtilityClass(`color${capitalize(color)}`), classes[`color${capitalize(color)}`]])
-    });
+    return {
+      root: clsx(classes.root, 'root'),
+      badge: clsx(classes.badge, getBadgeUtilityClass('badge'), getBadgeUtilityClass(variant), `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, getBadgeUtilityClass(`anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`), getBadgeUtilityClass(`overlap${capitalize(overlap)}`), color !== 'default' && [getBadgeUtilityClass(`color${capitalize(color)}`), classes[`color${capitalize(color)}`]], invisible && getBadgeUtilityClass('invisible'))
+    };
   };
 
   const BadgeRoot = styled$1('span', {
@@ -22865,7 +23644,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     right: 0,
     transform: 'scale(1) translate(50%, -50%)',
     transformOrigin: '100% 0%',
-    [`&.${badgeClasses.invisible}`]: {
+    [`&.${badgeClasses$1.invisible}`]: {
       transform: 'scale(0) translate(50%, -50%)'
     }
   }, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular' && {
@@ -22873,7 +23652,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     right: 0,
     transform: 'scale(1) translate(50%, 50%)',
     transformOrigin: '100% 100%',
-    [`&.${badgeClasses.invisible}`]: {
+    [`&.${badgeClasses$1.invisible}`]: {
       transform: 'scale(0) translate(50%, 50%)'
     }
   }, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular' && {
@@ -22881,7 +23660,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     left: 0,
     transform: 'scale(1) translate(-50%, -50%)',
     transformOrigin: '0% 0%',
-    [`&.${badgeClasses.invisible}`]: {
+    [`&.${badgeClasses$1.invisible}`]: {
       transform: 'scale(0) translate(-50%, -50%)'
     }
   }, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular' && {
@@ -22889,7 +23668,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     left: 0,
     transform: 'scale(1) translate(-50%, 50%)',
     transformOrigin: '0% 100%',
-    [`&.${badgeClasses.invisible}`]: {
+    [`&.${badgeClasses$1.invisible}`]: {
       transform: 'scale(0) translate(-50%, 50%)'
     }
   }, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular' && {
@@ -22897,7 +23676,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     right: '14%',
     transform: 'scale(1) translate(50%, -50%)',
     transformOrigin: '100% 0%',
-    [`&.${badgeClasses.invisible}`]: {
+    [`&.${badgeClasses$1.invisible}`]: {
       transform: 'scale(0) translate(50%, -50%)'
     }
   }, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular' && {
@@ -22905,7 +23684,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     right: '14%',
     transform: 'scale(1) translate(50%, 50%)',
     transformOrigin: '100% 100%',
-    [`&.${badgeClasses.invisible}`]: {
+    [`&.${badgeClasses$1.invisible}`]: {
       transform: 'scale(0) translate(50%, 50%)'
     }
   }, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular' && {
@@ -22913,7 +23692,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     left: '14%',
     transform: 'scale(1) translate(-50%, -50%)',
     transformOrigin: '0% 0%',
-    [`&.${badgeClasses.invisible}`]: {
+    [`&.${badgeClasses$1.invisible}`]: {
       transform: 'scale(0) translate(-50%, -50%)'
     }
   }, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular' && {
@@ -22921,7 +23700,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     left: '14%',
     transform: 'scale(1) translate(-50%, 50%)',
     transformOrigin: '0% 100%',
-    [`&.${badgeClasses.invisible}`]: {
+    [`&.${badgeClasses$1.invisible}`]: {
       transform: 'scale(0) translate(-50%, 50%)'
     }
   }, ownerState.invisible && {
@@ -22931,7 +23710,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     })
   }));
   const Badge = /*#__PURE__*/React__namespace.forwardRef(function Badge(inProps, ref) {
-    var _componentsProps$root, _componentsProps$badg;
+    var _componentsProps$root, _componentsProps$root2, _componentsProps$badg, _componentsProps$badg2;
 
     const props = useThemeProps({
       props: inProps,
@@ -22943,12 +23722,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         vertical: 'top',
         horizontal: 'right'
       },
+      className,
       component = 'span',
       components = {},
       componentsProps = {},
       overlap: overlapProp = 'rectangular',
       color: colorProp = 'default',
       invisible: invisibleProp = false,
+      max,
       badgeContent: badgeContentProp,
       showZero = false,
       variant: variantProp = 'standard'
@@ -22958,7 +23739,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const prevProps = usePreviousProps$1({
       anchorOrigin: anchorOriginProp,
       color: colorProp,
-      overlap: overlapProp
+      overlap: overlapProp,
+      variant: variantProp
     });
     let invisible = invisibleProp;
 
@@ -22969,44 +23751,57 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
       color = colorProp,
       overlap = overlapProp,
-      anchorOrigin = anchorOriginProp
+      anchorOrigin = anchorOriginProp,
+      variant = variantProp
     } = invisible ? prevProps : props;
 
     const ownerState = _extends({}, props, {
       anchorOrigin,
       invisible,
       color,
-      overlap
+      overlap,
+      variant
     });
 
     const classes = extendUtilityClasses$2(ownerState);
+    let displayValue;
+
+    if (variant !== 'dot') {
+      displayValue = badgeContentProp && Number(badgeContentProp) > max ? `${max}+` : badgeContentProp;
+    }
+
     return /*#__PURE__*/jsxRuntime_1(BadgeUnstyled$1, _extends({
-      anchorOrigin: anchorOrigin,
       invisible: invisibleProp,
-      badgeContent: badgeContentProp,
+      badgeContent: displayValue,
       showZero: showZero,
-      variant: variantProp
+      max: max
     }, other, {
       components: _extends({
         Root: BadgeRoot,
         Badge: BadgeBadge
       }, components),
+      className: clsx(className, classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className),
       componentsProps: {
         root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps$1(components.Root) && {
           as: component,
-          ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
+          ownerState: _extends({}, (_componentsProps$root2 = componentsProps.root) == null ? void 0 : _componentsProps$root2.ownerState, {
+            anchorOrigin,
             color,
-            overlap
+            overlap,
+            variant
           })
         }),
-        badge: _extends({}, componentsProps.badge, shouldSpreadAdditionalProps$1(components.Badge) && {
-          ownerState: _extends({}, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.ownerState, {
+        badge: _extends({}, componentsProps.badge, {
+          className: clsx(classes.badge, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.className)
+        }, shouldSpreadAdditionalProps$1(components.Badge) && {
+          ownerState: _extends({}, (_componentsProps$badg2 = componentsProps.badge) == null ? void 0 : _componentsProps$badg2.ownerState, {
+            anchorOrigin,
             color,
-            overlap
+            overlap,
+            variant
           })
         })
       },
-      classes: classes,
       ref: ref
     }));
   });
@@ -23045,6 +23840,11 @@ 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
@@ -23434,7 +24234,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var BottomNavigationAction$1 = BottomNavigationAction;
 
-  const defaultTheme = createTheme();
+  const defaultTheme = createTheme$1();
   /**
    * @ignore - do not document.
    */
@@ -23801,106 +24601,111 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   })(({
     theme,
     ownerState
-  }) => _extends({}, theme.typography.button, {
-    minWidth: 64,
-    padding: '6px 16px',
-    borderRadius: theme.shape.borderRadius,
-    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
-      duration: theme.transitions.duration.short
-    }),
-    '&:hover': _extends({
-      textDecoration: 'none',
-      backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
+  }) => {
+    var _theme$palette$getCon, _theme$palette;
+
+    return _extends({}, theme.typography.button, {
+      minWidth: 64,
+      padding: '6px 16px',
+      borderRadius: (theme.vars || theme).shape.borderRadius,
+      transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
+        duration: theme.transitions.duration.short
+      }),
+      '&:hover': _extends({
+        textDecoration: 'none',
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
+        border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }, ownerState.variant === 'contained' && {
+        backgroundColor: (theme.vars || theme).palette.grey.A100,
+        boxShadow: (theme.vars || theme).shadows[4],
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          boxShadow: (theme.vars || theme).shadows[2],
+          backgroundColor: (theme.vars || theme).palette.grey[300]
+        }
+      }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+        }
+      }),
+      '&:active': _extends({}, ownerState.variant === 'contained' && {
+        boxShadow: (theme.vars || theme).shadows[8]
+      }),
+      [`&.${buttonClasses$1.focusVisible}`]: _extends({}, ownerState.variant === 'contained' && {
+        boxShadow: (theme.vars || theme).shadows[6]
+      }),
+      [`&.${buttonClasses$1.disabled}`]: _extends({
+        color: (theme.vars || theme).palette.action.disabled
+      }, ownerState.variant === 'outlined' && {
+        border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
+      }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
+        border: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+      }, ownerState.variant === 'contained' && {
+        color: (theme.vars || theme).palette.action.disabled,
+        boxShadow: (theme.vars || theme).shadows[0],
+        backgroundColor: (theme.vars || theme).palette.action.disabledBackground
+      })
+    }, ownerState.variant === 'text' && {
+      padding: '6px 8px'
     }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-      backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
+      color: (theme.vars || theme).palette[ownerState.color].main
+    }, ownerState.variant === 'outlined' && {
+      padding: '5px 15px',
+      border: '1px solid currentColor'
     }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-      border: `1px solid ${theme.palette[ownerState.color].main}`,
-      backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
+      color: (theme.vars || theme).palette[ownerState.color].main,
+      border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`
     }, ownerState.variant === 'contained' && {
-      backgroundColor: theme.palette.grey.A100,
-      boxShadow: theme.shadows[4],
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        boxShadow: theme.shadows[2],
-        backgroundColor: theme.palette.grey[300]
-      }
+      color: theme.vars ? // this is safe because grey does not change between default light/dark mode
+      theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
+      backgroundColor: (theme.vars || theme).palette.grey[300],
+      boxShadow: (theme.vars || theme).shadows[2]
     }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-      backgroundColor: theme.palette[ownerState.color].dark,
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: theme.palette[ownerState.color].main
-      }
-    }),
-    '&:active': _extends({}, ownerState.variant === 'contained' && {
-      boxShadow: theme.shadows[8]
-    }),
-    [`&.${buttonClasses$1.focusVisible}`]: _extends({}, ownerState.variant === 'contained' && {
-      boxShadow: theme.shadows[6]
-    }),
-    [`&.${buttonClasses$1.disabled}`]: _extends({
-      color: theme.palette.action.disabled
-    }, ownerState.variant === 'outlined' && {
-      border: `1px solid ${theme.palette.action.disabledBackground}`
-    }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
-      border: `1px solid ${theme.palette.action.disabled}`
-    }, ownerState.variant === 'contained' && {
-      color: theme.palette.action.disabled,
-      boxShadow: theme.shadows[0],
-      backgroundColor: theme.palette.action.disabledBackground
-    })
-  }, ownerState.variant === 'text' && {
-    padding: '6px 8px'
-  }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-    color: theme.palette[ownerState.color].main
-  }, ownerState.variant === 'outlined' && {
-    padding: '5px 15px',
-    border: `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
-  }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-    color: theme.palette[ownerState.color].main,
-    border: `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`
-  }, ownerState.variant === 'contained' && {
-    color: theme.palette.getContrastText(theme.palette.grey[300]),
-    backgroundColor: theme.palette.grey[300],
-    boxShadow: theme.shadows[2]
-  }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-    color: theme.palette[ownerState.color].contrastText,
-    backgroundColor: theme.palette[ownerState.color].main
-  }, ownerState.color === 'inherit' && {
-    color: 'inherit',
-    borderColor: 'currentColor'
-  }, ownerState.size === 'small' && ownerState.variant === 'text' && {
-    padding: '4px 5px',
-    fontSize: theme.typography.pxToRem(13)
-  }, ownerState.size === 'large' && ownerState.variant === 'text' && {
-    padding: '8px 11px',
-    fontSize: theme.typography.pxToRem(15)
-  }, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
-    padding: '3px 9px',
-    fontSize: theme.typography.pxToRem(13)
-  }, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
-    padding: '7px 21px',
-    fontSize: theme.typography.pxToRem(15)
-  }, ownerState.size === 'small' && ownerState.variant === 'contained' && {
-    padding: '4px 10px',
-    fontSize: theme.typography.pxToRem(13)
-  }, ownerState.size === 'large' && ownerState.variant === 'contained' && {
-    padding: '8px 22px',
-    fontSize: theme.typography.pxToRem(15)
-  }, ownerState.fullWidth && {
-    width: '100%'
-  }), ({
+      color: (theme.vars || theme).palette[ownerState.color].contrastText,
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+    }, ownerState.color === 'inherit' && {
+      color: 'inherit',
+      borderColor: 'currentColor'
+    }, ownerState.size === 'small' && ownerState.variant === 'text' && {
+      padding: '4px 5px',
+      fontSize: theme.typography.pxToRem(13)
+    }, ownerState.size === 'large' && ownerState.variant === 'text' && {
+      padding: '8px 11px',
+      fontSize: theme.typography.pxToRem(15)
+    }, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
+      padding: '3px 9px',
+      fontSize: theme.typography.pxToRem(13)
+    }, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
+      padding: '7px 21px',
+      fontSize: theme.typography.pxToRem(15)
+    }, ownerState.size === 'small' && ownerState.variant === 'contained' && {
+      padding: '4px 10px',
+      fontSize: theme.typography.pxToRem(13)
+    }, ownerState.size === 'large' && ownerState.variant === 'contained' && {
+      padding: '8px 22px',
+      fontSize: theme.typography.pxToRem(15)
+    }, ownerState.fullWidth && {
+      width: '100%'
+    });
+  }, ({
     ownerState
   }) => ownerState.disableElevation && {
     boxShadow: 'none',
@@ -33296,7 +34101,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const linkClasses = generateUtilityClasses('MuiLink', ['root', 'underlineNone', 'underlineHover', 'underlineAlways', 'button', 'focusVisible']);
   var linkClasses$1 = linkClasses;
 
-  const _excluded$10 = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant"];
+  const _excluded$10 = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
   const colorTransformations = {
     primary: 'primary.main',
     textPrimary: 'text.primary',
@@ -33379,6 +34184,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
   });
   const Link = /*#__PURE__*/React__namespace.forwardRef(function Link(inProps, ref) {
+    const theme = useTheme();
     const props = useThemeProps({
       props: inProps,
       name: 'MuiLink'
@@ -33392,7 +34198,8 @@ 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);
 
@@ -33430,7 +34237,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 sx === 'function' ? sx(theme).color : sx == null ? void 0 : sx.color) || color,
       component,
       focusVisible,
       underline,
@@ -33441,13 +34250,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return /*#__PURE__*/jsxRuntime_1(LinkRoot, _extends({
       className: clsx(classes.root, className),
       classes: TypographyClasses,
-      color: color,
       component: component,
       onBlur: handleBlur,
       onFocus: handleFocus,
       ref: handlerRef,
       ownerState: ownerState,
-      variant: variant
+      variant: variant,
+      sx: [{
+        color: colorTransformations[color] || color
+      }, ...(Array.isArray(sx) ? sx : [sx])]
     }, other));
   });
   Link.propTypes
@@ -33724,6 +34535,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,
@@ -50189,6 +51001,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 +51116,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 +51141,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 +51159,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 +51181,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 +51220,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 +51377,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;