@mui/system 6.0.0-alpha.1 → 6.0.0-alpha.3

package/legacy/cssVars/createCssVarsProvider.js

@@ -1,338 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { GlobalStyles } from '@mui/styled-engine';
-import { useTheme as muiUseTheme } from '@mui/private-theming';
-import ThemeProvider from '../ThemeProvider';
-import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
-import useCurrentColorScheme from './useCurrentColorScheme';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export var DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
-export default function createCssVarsProvider(options) {
-  var themeId = options.themeId,
-    _options$theme = options.theme,
-    defaultTheme = _options$theme === void 0 ? {} : _options$theme,
-    _options$attribute = options.attribute,
-    defaultAttribute = _options$attribute === void 0 ? DEFAULT_ATTRIBUTE : _options$attribute,
-    _options$modeStorageK = options.modeStorageKey,
-    defaultModeStorageKey = _options$modeStorageK === void 0 ? DEFAULT_MODE_STORAGE_KEY : _options$modeStorageK,
-    _options$colorSchemeS = options.colorSchemeStorageKey,
-    defaultColorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS,
-    _options$defaultMode = options.defaultMode,
-    designSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
-    designSystemColorScheme = options.defaultColorScheme,
-    _options$disableTrans = options.disableTransitionOnChange,
-    designSystemTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
-    resolveTheme = options.resolveTheme;
-  if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
-    console.error("MUI: `".concat(designSystemColorScheme, "` does not exist in `theme.colorSchemes`."));
-  }
-  var ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
-  if (process.env.NODE_ENV !== 'production') {
-    ColorSchemeContext.displayName = 'ColorSchemeContext';
-  }
-  var useColorScheme = function useColorScheme() {
-    var value = React.useContext(ColorSchemeContext);
-    if (!value) {
-      throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `useColorScheme` must be called under <CssVarsProvider />" : _formatMuiErrorMessage(19));
-    }
-    return value;
-  };
-  function CssVarsProvider(props) {
-    var _restThemeProp$genera, _theme$generateStyleS;
-    var children = props.children,
-      _props$theme = props.theme,
-      themeProp = _props$theme === void 0 ? defaultTheme : _props$theme,
-      _props$modeStorageKey = props.modeStorageKey,
-      modeStorageKey = _props$modeStorageKey === void 0 ? defaultModeStorageKey : _props$modeStorageKey,
-      _props$colorSchemeSto = props.colorSchemeStorageKey,
-      colorSchemeStorageKey = _props$colorSchemeSto === void 0 ? defaultColorSchemeStorageKey : _props$colorSchemeSto,
-      _props$attribute = props.attribute,
-      attribute = _props$attribute === void 0 ? defaultAttribute : _props$attribute,
-      _props$defaultMode = props.defaultMode,
-      defaultMode = _props$defaultMode === void 0 ? designSystemMode : _props$defaultMode,
-      _props$defaultColorSc = props.defaultColorScheme,
-      defaultColorScheme = _props$defaultColorSc === void 0 ? designSystemColorScheme : _props$defaultColorSc,
-      _props$disableTransit = props.disableTransitionOnChange,
-      disableTransitionOnChange = _props$disableTransit === void 0 ? designSystemTransitionOnChange : _props$disableTransit,
-      _props$storageWindow = props.storageWindow,
-      storageWindow = _props$storageWindow === void 0 ? typeof window === 'undefined' ? undefined : window : _props$storageWindow,
-      _props$documentNode = props.documentNode,
-      documentNode = _props$documentNode === void 0 ? typeof document === 'undefined' ? undefined : document : _props$documentNode,
-      _props$colorSchemeNod = props.colorSchemeNode,
-      colorSchemeNode = _props$colorSchemeNod === void 0 ? typeof document === 'undefined' ? undefined : document.documentElement : _props$colorSchemeNod,
-      _props$colorSchemeSel = props.colorSchemeSelector,
-      colorSchemeSelector = _props$colorSchemeSel === void 0 ? ':root' : _props$colorSchemeSel,
-      _props$disableNestedC = props.disableNestedContext,
-      disableNestedContext = _props$disableNestedC === void 0 ? false : _props$disableNestedC,
-      _props$disableStyleSh = props.disableStyleSheetGeneration,
-      disableStyleSheetGeneration = _props$disableStyleSh === void 0 ? false : _props$disableStyleSh;
-    var hasMounted = React.useRef(false);
-    var upperTheme = muiUseTheme();
-    var ctx = React.useContext(ColorSchemeContext);
-    var nested = !!ctx && !disableNestedContext;
-    var scopedTheme = themeProp[themeId];
-    var _ref = scopedTheme || themeProp,
-      _ref$colorSchemes = _ref.colorSchemes,
-      colorSchemes = _ref$colorSchemes === void 0 ? {} : _ref$colorSchemes,
-      _ref$components = _ref.components,
-      components = _ref$components === void 0 ? {} : _ref$components,
-      cssVarPrefix = _ref.cssVarPrefix,
-      restThemeProp = _objectWithoutProperties(_ref, ["colorSchemes", "components", "cssVarPrefix"]);
-    var allColorSchemes = Object.keys(colorSchemes);
-    var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
-    var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
-
-    // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
-    var _useCurrentColorSchem = useCurrentColorScheme({
-        supportedColorSchemes: allColorSchemes,
-        defaultLightColorScheme: defaultLightColorScheme,
-        defaultDarkColorScheme: defaultDarkColorScheme,
-        modeStorageKey: modeStorageKey,
-        colorSchemeStorageKey: colorSchemeStorageKey,
-        defaultMode: defaultMode,
-        storageWindow: storageWindow
-      }),
-      stateMode = _useCurrentColorSchem.mode,
-      setMode = _useCurrentColorSchem.setMode,
-      systemMode = _useCurrentColorSchem.systemMode,
-      lightColorScheme = _useCurrentColorSchem.lightColorScheme,
-      darkColorScheme = _useCurrentColorSchem.darkColorScheme,
-      stateColorScheme = _useCurrentColorSchem.colorScheme,
-      setColorScheme = _useCurrentColorSchem.setColorScheme;
-    var mode = stateMode;
-    var colorScheme = stateColorScheme;
-    if (nested) {
-      mode = ctx.mode;
-      colorScheme = ctx.colorScheme;
-    }
-    var calculatedMode = function () {
-      if (mode) {
-        return mode;
-      }
-      // This scope occurs on the server
-      if (defaultMode === 'system') {
-        return designSystemMode;
-      }
-      return defaultMode;
-    }();
-    var calculatedColorScheme = function () {
-      if (!colorScheme) {
-        // This scope occurs on the server
-        if (calculatedMode === 'dark') {
-          return defaultDarkColorScheme;
-        }
-        // use light color scheme, if default mode is 'light' | 'system'
-        return defaultLightColorScheme;
-      }
-      return colorScheme;
-    }();
-
-    // 2. get the `vars` object that refers to the CSS custom properties
-    var themeVars = ((_restThemeProp$genera = restThemeProp.generateThemeVars) == null ? void 0 : _restThemeProp$genera.call(restThemeProp)) || restThemeProp.vars;
-
-    // 3. Start composing the theme object
-    var theme = _extends({}, restThemeProp, {
-      components: components,
-      colorSchemes: colorSchemes,
-      cssVarPrefix: cssVarPrefix,
-      vars: themeVars
-    });
-    if (typeof theme.generateSpacing === 'function') {
-      theme.spacing = theme.generateSpacing();
-    }
-
-    // 4. Resolve the color scheme and merge it to the theme
-    Object.entries(colorSchemes).forEach(function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        key = _ref3[0],
-        scheme = _ref3[1];
-      if (key === calculatedColorScheme) {
-        // 4.1 Merge the selected color scheme to the theme
-        Object.keys(scheme).forEach(function (schemeKey) {
-          if (scheme[schemeKey] && _typeof(scheme[schemeKey]) === 'object') {
-            // shallow merge the 1st level structure of the theme.
-            theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);
-          } else {
-            theme[schemeKey] = scheme[schemeKey];
-          }
-        });
-        if (theme.palette) {
-          theme.palette.colorScheme = key;
-        }
-      }
-    });
-    var resolvedDefaultColorScheme = function () {
-      if (typeof defaultColorScheme === 'string') {
-        return defaultColorScheme;
-      }
-      if (defaultMode === 'dark') {
-        return defaultColorScheme.dark;
-      }
-      return defaultColorScheme.light;
-    }();
-    themeProp.defaultColorScheme = resolvedDefaultColorScheme;
-    themeProp.colorSchemeSelector = colorSchemeSelector;
-    themeProp.attribute = attribute;
-    if (!theme.getColorSchemeSelector) {
-      theme.getColorSchemeSelector = function (targetColorScheme) {
-        return "[".concat(attribute, "=\"").concat(targetColorScheme, "\"] &");
-      };
-    }
-
-    // 5. Declaring effects
-    // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
-    React.useEffect(function () {
-      if (colorScheme && colorSchemeNode) {
-        // attaches attribute to <html> because the css variables are attached to :root (html)
-        colorSchemeNode.setAttribute(attribute, colorScheme);
-      }
-    }, [colorScheme, attribute, colorSchemeNode]);
-
-    // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
-    // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
-    React.useEffect(function () {
-      var timer;
-      if (disableTransitionOnChange && hasMounted.current && documentNode) {
-        var css = documentNode.createElement('style');
-        css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
-        documentNode.head.appendChild(css);
-
-        // Force browser repaint
-        (function () {
-          return window.getComputedStyle(documentNode.body);
-        })();
-        timer = setTimeout(function () {
-          documentNode.head.removeChild(css);
-        }, 1);
-      }
-      return function () {
-        clearTimeout(timer);
-      };
-    }, [colorScheme, disableTransitionOnChange, documentNode]);
-    React.useEffect(function () {
-      hasMounted.current = true;
-      return function () {
-        hasMounted.current = false;
-      };
-    }, []);
-    var contextValue = React.useMemo(function () {
-      return {
-        allColorSchemes: allColorSchemes,
-        colorScheme: colorScheme,
-        darkColorScheme: darkColorScheme,
-        lightColorScheme: lightColorScheme,
-        mode: mode,
-        setColorScheme: setColorScheme,
-        setMode: setMode,
-        systemMode: systemMode
-      };
-    }, [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
-    var shouldGenerateStyleSheet = true;
-    if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
-      shouldGenerateStyleSheet = false;
-    }
-    var element = /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsx(React.Fragment, {
-        children: (((_theme$generateStyleS = theme.generateStyleSheets) == null ? void 0 : _theme$generateStyleS.call(theme)) || []).map(function (styles, index) {
-          return /*#__PURE__*/_jsx(GlobalStyles, {
-            styles: styles
-          }, index);
-        })
-      }), /*#__PURE__*/_jsx(ThemeProvider, {
-        themeId: scopedTheme ? themeId : undefined,
-        theme: resolveTheme ? resolveTheme(theme) : theme,
-        children: children
-      })]
-    });
-    if (nested) {
-      return element;
-    }
-    return /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {
-      value: contextValue,
-      children: element
-    });
-  }
-  process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
-    /**
-     * The body attribute name to attach colorScheme.
-     */
-    attribute: PropTypes.string,
-    /**
-     * The component tree.
-     */
-    children: PropTypes.node,
-    /**
-     * The node used to attach the color-scheme attribute
-     */
-    colorSchemeNode: PropTypes.any,
-    /**
-     * The CSS selector for attaching the generated custom properties
-     */
-    colorSchemeSelector: PropTypes.string,
-    /**
-     * localStorage key used to store `colorScheme`
-     */
-    colorSchemeStorageKey: PropTypes.string,
-    /**
-     * The initial color scheme used.
-     */
-    defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    /**
-     * The initial mode used.
-     */
-    defaultMode: PropTypes.string,
-    /**
-     * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
-     */
-    disableNestedContext: PropTypes.bool,
-    /**
-     * If `true`, the style sheet won't be generated.
-     *
-     * This is useful for controlling nested CssVarsProvider behavior.
-     */
-    disableStyleSheetGeneration: PropTypes.bool,
-    /**
-     * Disable CSS transitions when switching between modes or color schemes.
-     */
-    disableTransitionOnChange: PropTypes.bool,
-    /**
-     * The document to attach the attribute to.
-     */
-    documentNode: PropTypes.any,
-    /**
-     * The key in the local storage used to store current color scheme.
-     */
-    modeStorageKey: PropTypes.string,
-    /**
-     * The window that attaches the 'storage' event listener.
-     * @default window
-     */
-    storageWindow: PropTypes.any,
-    /**
-     * The calculated theme object that will be passed through context.
-     */
-    theme: PropTypes.object
-  } : void 0;
-  var defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
-  var defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
-  var getInitColorSchemeScript = function getInitColorSchemeScript(params) {
-    return systemGetInitColorSchemeScript(_extends({
-      attribute: defaultAttribute,
-      colorSchemeStorageKey: defaultColorSchemeStorageKey,
-      defaultMode: designSystemMode,
-      defaultLightColorScheme: defaultLightColorScheme,
-      defaultDarkColorScheme: defaultDarkColorScheme,
-      modeStorageKey: defaultModeStorageKey
-    }, params));
-  };
-  return {
-    CssVarsProvider: CssVarsProvider,
-    useColorScheme: useColorScheme,
-    getInitColorSchemeScript: getInitColorSchemeScript
-  };
-}

package/legacy/cssVars/createCssVarsTheme.js

@@ -1,13 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import prepareCssVars from './prepareCssVars';
-function createCssVarsTheme(theme) {
-  var output = theme;
-  var result = prepareCssVars(output, _extends({}, theme, {
-    prefix: theme.cssVarPrefix
-  }));
-  output.vars = result.vars;
-  output.generateThemeVars = result.generateThemeVars;
-  output.generateStyleSheets = result.generateStyleSheets;
-  return output;
-}
-export default createCssVarsTheme;

package/legacy/cssVars/createGetCssVar.js

@@ -1,30 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-/**
- * 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).
- */
-export default function createGetCssVar() {
-  var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  function appendVar() {
-    for (var _len = arguments.length, vars = new Array(_len), _key = 0; _key < _len; _key++) {
-      vars[_key] = arguments[_key];
-    }
-    if (!vars.length) {
-      return '';
-    }
-    var 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))|^(-?(\d*\.)?\d+)$|(\d+ \d+ \d+)/)) {
-      return ", var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(value).concat(appendVar.apply(void 0, _toConsumableArray(vars.slice(1))), ")");
-    }
-    return ", ".concat(value);
-  }
-
-  // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
-  var getCssVar = function getCssVar(field) {
-    for (var _len2 = arguments.length, fallbacks = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      fallbacks[_key2 - 1] = arguments[_key2];
-    }
-    return "var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(field).concat(appendVar.apply(void 0, fallbacks), ")");
-  };
-  return getCssVar;
-}

package/legacy/cssVars/cssVarsParser.js

@@ -1,141 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-/**
- * 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)' } }
- */
-export var assignNestedKeys = function assignNestedKeys(obj, keys, value) {
-  var arrayKeys = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
-  var temp = obj;
-  keys.forEach(function (k, index) {
-    if (index === keys.length - 1) {
-      if (Array.isArray(temp)) {
-        temp[Number(k)] = value;
-      } else if (temp && _typeof(temp) === 'object') {
-        temp[k] = value;
-      }
-    } else if (temp && _typeof(temp) === 'object') {
-      if (!temp[k]) {
-        temp[k] = arrayKeys.includes(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'
- */
-export var walkObjectDeep = function walkObjectDeep(obj, callback, shouldSkipPaths) {
-  function recurse(object) {
-    var parentKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-    var arrayKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-    Object.entries(object).forEach(function (_ref) {
-      var _ref2 = _slicedToArray(_ref, 2),
-        key = _ref2[0],
-        value = _ref2[1];
-      if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([].concat(_toConsumableArray(parentKeys), [key]))) {
-        if (value !== undefined && value !== null) {
-          if (_typeof(value) === 'object' && Object.keys(value).length > 0) {
-            recurse(value, [].concat(_toConsumableArray(parentKeys), [key]), Array.isArray(value) ? [].concat(_toConsumableArray(arrayKeys), [key]) : arrayKeys);
-          } else {
-            callback([].concat(_toConsumableArray(parentKeys), [key]), value, arrayKeys);
-          }
-        }
-      }
-    });
-  }
-  recurse(obj);
-};
-var getCssValue = function getCssValue(keys, value) {
-  if (typeof value === 'number') {
-    if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(function (prop) {
-      return keys.includes(prop);
-    })) {
-      // CSS property that are unitless
-      return value;
-    }
-    var lastKey = keys[keys.length - 1];
-    if (lastKey.toLowerCase().indexOf('opacity') >= 0) {
-      // opacity values are unitless
-      return value;
-    }
-    return "".concat(value, "px");
-  }
-  return value;
-};
-
-/**
- * a function that parse theme and return { css, vars }
- *
- * @param {Object} theme
- * @param {{
- *  prefix?: string,
- *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
- * }} options.
- *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
- *
- * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
- *
- * @example
- * const { css, vars } = 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(--color)' }
- * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- */
-export default function cssVarsParser(theme, options) {
-  var _ref3 = options || {},
-    prefix = _ref3.prefix,
-    shouldSkipGeneratingVar = _ref3.shouldSkipGeneratingVar;
-  var css = {};
-  var vars = {};
-  var varsWithDefaults = {};
-  walkObjectDeep(theme, function (keys, value, arrayKeys) {
-    if (typeof value === 'string' || typeof value === 'number') {
-      if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
-        // only create css & var if `shouldSkipGeneratingVar` return false
-        var cssVar = "--".concat(prefix ? "".concat(prefix, "-") : '').concat(keys.join('-'));
-        var resolvedValue = getCssValue(keys, value);
-        _extends(css, _defineProperty({}, cssVar, resolvedValue));
-        assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"), arrayKeys);
-        assignNestedKeys(varsWithDefaults, keys, "var(".concat(cssVar, ", ").concat(resolvedValue, ")"), arrayKeys);
-      }
-    }
-  }, function (keys) {
-    return keys[0] === 'vars';
-  } // skip 'vars/*' paths
-  );
-  return {
-    css: css,
-    vars: vars,
-    varsWithDefaults: varsWithDefaults
-  };
-}

package/legacy/cssVars/getInitColorSchemeScript.js

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-export var DEFAULT_MODE_STORAGE_KEY = 'mode';
-export var DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
-export var DEFAULT_ATTRIBUTE = 'data-color-scheme';
-export default function getInitColorSchemeScript(options) {
-  var _ref = options || {},
-    _ref$defaultMode = _ref.defaultMode,
-    defaultMode = _ref$defaultMode === void 0 ? 'light' : _ref$defaultMode,
-    _ref$defaultLightColo = _ref.defaultLightColorScheme,
-    defaultLightColorScheme = _ref$defaultLightColo === void 0 ? 'light' : _ref$defaultLightColo,
-    _ref$defaultDarkColor = _ref.defaultDarkColorScheme,
-    defaultDarkColorScheme = _ref$defaultDarkColor === void 0 ? 'dark' : _ref$defaultDarkColor,
-    _ref$modeStorageKey = _ref.modeStorageKey,
-    modeStorageKey = _ref$modeStorageKey === void 0 ? DEFAULT_MODE_STORAGE_KEY : _ref$modeStorageKey,
-    _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
-    colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _ref$colorSchemeStora,
-    _ref$attribute = _ref.attribute,
-    attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute,
-    _ref$colorSchemeNode = _ref.colorSchemeNode,
-    colorSchemeNode = _ref$colorSchemeNode === void 0 ? 'document.documentElement' : _ref$colorSchemeNode;
-  return /*#__PURE__*/_jsx("script", {
-    // eslint-disable-next-line react/no-danger
-    dangerouslySetInnerHTML: {
-      __html: "(function() {\ntry {\n  var mode = localStorage.getItem('".concat(modeStorageKey, "') || '").concat(defaultMode, "';\n  var colorScheme = '';\n  if (mode === 'system') {\n    // handle system mode\n    var mql = window.matchMedia('(prefers-color-scheme: dark)');\n    if (mql.matches) {\n      colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n    } else {\n      colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n    }\n  }\n  if (mode === 'light') {\n    colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n  }\n  if (mode === 'dark') {\n    colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n  }\n  if (colorScheme) {\n    ").concat(colorSchemeNode, ".setAttribute('").concat(attribute, "', colorScheme);\n  }\n} catch(e){}})();")
-    }
-  }, "mui-color-scheme-init");
-}

package/legacy/cssVars/index.js

@@ -1,6 +0,0 @@
-'use client';
-
-export { default } from './createCssVarsProvider';
-export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
-export { default as prepareCssVars } from './prepareCssVars';
-export { default as createCssVarsTheme } from './createCssVarsTheme';

package/legacy/cssVars/prepareCssVars.js

@@ -1,92 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import deepmerge from '@mui/utils/deepmerge';
-import cssVarsParser from './cssVarsParser';
-function prepareCssVars(theme) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var getSelector = _ref.getSelector,
-    parserConfig = _objectWithoutProperties(_ref, ["getSelector"]);
-  // @ts-ignore - ignore components do not exist
-  var _theme$colorSchemes = theme.colorSchemes,
-    colorSchemes = _theme$colorSchemes === void 0 ? {} : _theme$colorSchemes,
-    components = theme.components,
-    _theme$defaultColorSc = theme.defaultColorScheme,
-    defaultColorScheme = _theme$defaultColorSc === void 0 ? 'light' : _theme$defaultColorSc,
-    otherTheme = _objectWithoutProperties(theme, ["colorSchemes", "components", "defaultColorScheme"]);
-  var _cssVarsParser = cssVarsParser(otherTheme, parserConfig),
-    rootVars = _cssVarsParser.vars,
-    rootCss = _cssVarsParser.css,
-    rootVarsWithDefaults = _cssVarsParser.varsWithDefaults;
-  var themeVars = rootVarsWithDefaults;
-  var colorSchemesMap = {};
-  var defaultScheme = colorSchemes[defaultColorScheme],
-    otherColorSchemes = _objectWithoutProperties(colorSchemes, [defaultColorScheme].map(_toPropertyKey));
-  Object.entries(otherColorSchemes || {}).forEach(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-      key = _ref3[0],
-      scheme = _ref3[1];
-    var _cssVarsParser2 = cssVarsParser(scheme, parserConfig),
-      vars = _cssVarsParser2.vars,
-      css = _cssVarsParser2.css,
-      varsWithDefaults = _cssVarsParser2.varsWithDefaults;
-    themeVars = deepmerge(themeVars, varsWithDefaults);
-    colorSchemesMap[key] = {
-      css: css,
-      vars: vars
-    };
-  });
-  if (defaultScheme) {
-    // default color scheme vars should be merged last to set as default
-    var _cssVarsParser3 = cssVarsParser(defaultScheme, parserConfig),
-      _css = _cssVarsParser3.css,
-      vars = _cssVarsParser3.vars,
-      varsWithDefaults = _cssVarsParser3.varsWithDefaults;
-    themeVars = deepmerge(themeVars, varsWithDefaults);
-    colorSchemesMap[defaultColorScheme] = {
-      css: _css,
-      vars: vars
-    };
-  }
-  var generateThemeVars = function generateThemeVars() {
-    var vars = _extends({}, rootVars);
-    Object.entries(colorSchemesMap).forEach(function (_ref4) {
-      var _ref5 = _slicedToArray(_ref4, 2),
-        schemeVars = _ref5[1].vars;
-      vars = deepmerge(vars, schemeVars);
-    });
-    return vars;
-  };
-  var generateStyleSheets = function generateStyleSheets() {
-    var stylesheets = [];
-    var colorScheme = theme.defaultColorScheme || 'light';
-    function insertStyleSheet(selector, css) {
-      if (Object.keys(css).length) {
-        stylesheets.push(typeof selector === 'string' ? _defineProperty({}, selector, _extends({}, css)) : selector);
-      }
-    }
-    insertStyleSheet((getSelector == null ? void 0 : getSelector(undefined, _extends({}, rootCss))) || ':root', rootCss);
-    var defaultSchemeVal = colorSchemesMap[colorScheme],
-      rest = _objectWithoutProperties(colorSchemesMap, [colorScheme].map(_toPropertyKey));
-    if (defaultSchemeVal) {
-      // default color scheme has to come before other color schemes
-      var _css2 = defaultSchemeVal.css;
-      insertStyleSheet((getSelector == null ? void 0 : getSelector(colorScheme, _extends({}, _css2))) || "[".concat(theme.attribute || 'data-color-scheme', "=\"").concat(colorScheme, "\"]"), _css2);
-    }
-    Object.entries(rest).forEach(function (_ref7) {
-      var _ref8 = _slicedToArray(_ref7, 2),
-        key = _ref8[0],
-        css = _ref8[1].css;
-      insertStyleSheet((getSelector == null ? void 0 : getSelector(key, _extends({}, css))) || "[".concat(theme.attribute || 'data-color-scheme', "=\"").concat(key, "\"]"), css);
-    });
-    return stylesheets;
-  };
-  return {
-    vars: themeVars,
-    generateThemeVars: generateThemeVars,
-    generateStyleSheets: generateStyleSheets
-  };
-}
-export default prepareCssVars;