@mui/system 5.15.13 → 6.0.0-alpha.0

package/cssVars/createCssVarsProvider.js

@@ -1,28 +1,17 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DISABLE_CSS_TRANSITION = void 0;
-exports.default = createCssVarsProvider;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
-var _styledEngine = require("@mui/styled-engine");
-var _privateTheming = require("@mui/private-theming");
-var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
-var _getInitColorSchemeScript = _interopRequireWildcard(require("./getInitColorSchemeScript"));
-var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const DISABLE_CSS_TRANSITION = exports.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) {
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
+const _excluded = ["colorSchemes", "components", "cssVarPrefix"];
+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 const 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) {
   const {
     themeId,
     /**
@@ -32,16 +21,15 @@ function createCssVarsProvider(options) {
      * It should also ideally have a vars object created using `prepareCssVars`.
      */
     theme: defaultTheme = {},
-    attribute: defaultAttribute = _getInitColorSchemeScript.DEFAULT_ATTRIBUTE,
-    modeStorageKey: defaultModeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey: defaultColorSchemeStorageKey = _getInitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
+    modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     defaultMode: designSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
-    resolveTheme,
-    excludeVariablesFromRoot
+    resolveTheme
   } = options;
-  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]) {
+  if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme?.light] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme?.dark]) {
     console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
   }
   const ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
@@ -51,28 +39,29 @@ function createCssVarsProvider(options) {
   const useColorScheme = () => {
     const value = React.useContext(ColorSchemeContext);
     if (!value) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`useColorScheme\` must be called under <CssVarsProvider />` : (0, _formatMuiErrorMessage2.default)(19));
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`useColorScheme\` must be called under <CssVarsProvider />` : _formatMuiErrorMessage(19));
     }
     return value;
   };
-  function CssVarsProvider({
-    children,
-    theme: themeProp = defaultTheme,
-    modeStorageKey = defaultModeStorageKey,
-    colorSchemeStorageKey = defaultColorSchemeStorageKey,
-    attribute = defaultAttribute,
-    defaultMode = designSystemMode,
-    defaultColorScheme = designSystemColorScheme,
-    disableTransitionOnChange = designSystemTransitionOnChange,
-    storageWindow = typeof window === 'undefined' ? undefined : window,
-    documentNode = typeof document === 'undefined' ? undefined : document,
-    colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
-    colorSchemeSelector = ':root',
-    disableNestedContext = false,
-    disableStyleSheetGeneration = false
-  }) {
+  function CssVarsProvider(props) {
+    const {
+      children,
+      theme: themeProp = defaultTheme,
+      modeStorageKey = defaultModeStorageKey,
+      colorSchemeStorageKey = defaultColorSchemeStorageKey,
+      attribute = defaultAttribute,
+      defaultMode = designSystemMode,
+      defaultColorScheme = designSystemColorScheme,
+      disableTransitionOnChange = designSystemTransitionOnChange,
+      storageWindow = typeof window === 'undefined' ? undefined : window,
+      documentNode = typeof document === 'undefined' ? undefined : document,
+      colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
+      colorSchemeSelector = ':root',
+      disableNestedContext = false,
+      disableStyleSheetGeneration = false
+    } = props;
     const hasMounted = React.useRef(false);
-    const upperTheme = (0, _privateTheming.useTheme)();
+    const upperTheme = muiUseTheme();
     const ctx = React.useContext(ColorSchemeContext);
     const nested = !!ctx && !disableNestedContext;
     const scopedTheme = themeProp[themeId];
@@ -80,13 +69,9 @@ function createCssVarsProvider(options) {
       {
         colorSchemes = {},
         components = {},
-        generateCssVars = () => ({
-          vars: {},
-          css: {}
-        }),
         cssVarPrefix
       } = _ref,
-      restThemeProp = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+      restThemeProp = _objectWithoutPropertiesLoose(_ref, _excluded);
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -100,7 +85,7 @@ function createCssVarsProvider(options) {
       darkColorScheme,
       colorScheme: stateColorScheme,
       setColorScheme
-    } = (0, _useCurrentColorScheme.default)({
+    } = useCurrentColorScheme({
       supportedColorSchemes: allColorSchemes,
       defaultLightColorScheme,
       defaultDarkColorScheme,
@@ -137,38 +122,25 @@ function createCssVarsProvider(options) {
       return colorScheme;
     })();
 
-    // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
-    const {
-      css: rootCss,
-      vars: rootVars
-    } = generateCssVars();
+    // 2. get the `vars` object that refers to the CSS custom properties
+    const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
 
     // 3. Start composing the theme object
-    const theme = (0, _extends2.default)({}, restThemeProp, {
+    const theme = _extends({}, restThemeProp, {
       components,
       colorSchemes,
       cssVarPrefix,
-      vars: rootVars,
-      getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
+      vars: themeVars
     });
 
-    // 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)
-    //    The default color scheme stylesheet is constructed to have the least CSS specificity.
-    //    The other color schemes uses selector, default as data attribute, to increase the CSS specificity so that they can override the default color scheme stylesheet.
-    const defaultColorSchemeStyleSheet = {};
-    const otherColorSchemesStyleSheet = {};
+    // 4. Resolve the color scheme and merge it to the theme
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
-      const {
-        css,
-        vars
-      } = generateCssVars(key);
-      theme.vars = (0, _deepmerge.default)(theme.vars, vars);
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
         Object.keys(scheme).forEach(schemeKey => {
           if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
             // shallow merge the 1st level structure of the theme.
-            theme[schemeKey] = (0, _extends2.default)({}, theme[schemeKey], scheme[schemeKey]);
+            theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);
           } else {
             theme[schemeKey] = scheme[schemeKey];
           }
@@ -177,30 +149,22 @@ function createCssVarsProvider(options) {
           theme.palette.colorScheme = key;
         }
       }
-      const resolvedDefaultColorScheme = (() => {
-        if (typeof defaultColorScheme === 'string') {
-          return defaultColorScheme;
-        }
-        if (defaultMode === 'dark') {
-          return defaultColorScheme.dark;
-        }
-        return defaultColorScheme.light;
-      })();
-      if (key === resolvedDefaultColorScheme) {
-        if (excludeVariablesFromRoot) {
-          const excludedVariables = {};
-          excludeVariablesFromRoot(cssVarPrefix).forEach(cssVar => {
-            excludedVariables[cssVar] = css[cssVar];
-            delete css[cssVar];
-          });
-          defaultColorSchemeStyleSheet[`[${attribute}="${key}"]`] = excludedVariables;
-        }
-        defaultColorSchemeStyleSheet[`${colorSchemeSelector}, [${attribute}="${key}"]`] = css;
-      } else {
-        otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
-      }
     });
-    theme.vars = (0, _deepmerge.default)(theme.vars, rootVars);
+    const resolvedDefaultColorScheme = (() => {
+      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 = targetColorScheme => `[${attribute}="${targetColorScheme}"] &`;
+    }
 
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
@@ -237,31 +201,25 @@ function createCssVarsProvider(options) {
       };
     }, []);
     const contextValue = React.useMemo(() => ({
-      mode,
-      systemMode,
-      setMode,
-      lightColorScheme,
-      darkColorScheme,
+      allColorSchemes,
       colorScheme,
+      darkColorScheme,
+      lightColorScheme,
+      mode,
       setColorScheme,
-      allColorSchemes
+      setMode,
+      systemMode
     }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
     let shouldGenerateStyleSheet = true;
-    if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
+    if (disableStyleSheetGeneration || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
       shouldGenerateStyleSheet = false;
     }
-    const element = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-      children: [shouldGenerateStyleSheet && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
-          styles: {
-            [colorSchemeSelector]: rootCss
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
-          styles: defaultColorSchemeStyleSheet
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
-          styles: otherColorSchemesStyleSheet
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
+    const element = /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsx(React.Fragment, {
+        children: (theme.generateStyleSheets?.() || []).map((styles, index) => /*#__PURE__*/_jsx(GlobalStyles, {
+          styles: styles
+        }, index))
+      }), /*#__PURE__*/_jsx(ThemeProvider, {
         themeId: scopedTheme ? themeId : undefined,
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
@@ -270,7 +228,7 @@ function createCssVarsProvider(options) {
     if (nested) {
       return element;
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorSchemeContext.Provider, {
+    return /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {
       value: contextValue,
       children: element
     });
@@ -279,66 +237,66 @@ function createCssVarsProvider(options) {
     /**
      * The body attribute name to attach colorScheme.
      */
-    attribute: _propTypes.default.string,
+    attribute: PropTypes.string,
     /**
      * The component tree.
      */
-    children: _propTypes.default.node,
+    children: PropTypes.node,
     /**
      * The node used to attach the color-scheme attribute
      */
-    colorSchemeNode: _propTypes.default.any,
+    colorSchemeNode: PropTypes.any,
     /**
      * The CSS selector for attaching the generated custom properties
      */
-    colorSchemeSelector: _propTypes.default.string,
+    colorSchemeSelector: PropTypes.string,
     /**
      * localStorage key used to store `colorScheme`
      */
-    colorSchemeStorageKey: _propTypes.default.string,
+    colorSchemeStorageKey: PropTypes.string,
     /**
      * The initial color scheme used.
      */
-    defaultColorScheme: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+    defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     /**
      * The initial mode used.
      */
-    defaultMode: _propTypes.default.string,
+    defaultMode: PropTypes.string,
     /**
      * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
      */
-    disableNestedContext: _propTypes.default.bool,
+    disableNestedContext: PropTypes.bool,
     /**
      * If `true`, the style sheet won't be generated.
      *
      * This is useful for controlling nested CssVarsProvider behavior.
      */
-    disableStyleSheetGeneration: _propTypes.default.bool,
+    disableStyleSheetGeneration: PropTypes.bool,
     /**
      * Disable CSS transitions when switching between modes or color schemes.
      */
-    disableTransitionOnChange: _propTypes.default.bool,
+    disableTransitionOnChange: PropTypes.bool,
     /**
      * The document to attach the attribute to.
      */
-    documentNode: _propTypes.default.any,
+    documentNode: PropTypes.any,
     /**
      * The key in the local storage used to store current color scheme.
      */
-    modeStorageKey: _propTypes.default.string,
+    modeStorageKey: PropTypes.string,
     /**
      * The window that attaches the 'storage' event listener.
      * @default window
      */
-    storageWindow: _propTypes.default.any,
+    storageWindow: PropTypes.any,
     /**
      * The calculated theme object that will be passed through context.
      */
-    theme: _propTypes.default.object
+    theme: PropTypes.object
   } : void 0;
   const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
   const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
-  const getInitColorSchemeScript = params => (0, _getInitColorSchemeScript.default)((0, _extends2.default)({
+  const getInitColorSchemeScript = params => systemGetInitColorSchemeScript(_extends({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
     defaultMode: designSystemMode,

package/cssVars/createCssVarsTheme.d.ts

@@ -5,12 +5,7 @@ interface Theme extends DefaultCssVarsTheme {
 }
 declare function createCssVarsTheme<T extends Theme, ThemeVars extends Record<string, any>>(theme: T): T & {
     vars: ThemeVars;
-    generateCssVars: (colorScheme?: string | undefined) => {
-        css: {
-            [x: string]: string | number;
-        };
-        vars: ThemeVars;
-        selector: any;
-    };
+    generateThemeVars: () => ThemeVars;
+    generateStyleSheets: () => Record<string, any>[];
 };
 export default createCssVarsTheme;

package/cssVars/createCssVarsTheme.js

@@ -1,23 +1,13 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _prepareCssVars = _interopRequireDefault(require("./prepareCssVars"));
-const _excluded = ["cssVarPrefix", "shouldSkipGeneratingVar"];
+import _extends from "@babel/runtime/helpers/esm/extends";
+import prepareCssVars from './prepareCssVars';
 function createCssVarsTheme(theme) {
-  const {
-      cssVarPrefix,
-      shouldSkipGeneratingVar
-    } = theme,
-    otherTheme = (0, _objectWithoutPropertiesLoose2.default)(theme, _excluded);
-  return (0, _extends2.default)({}, theme, (0, _prepareCssVars.default)(otherTheme, {
-    prefix: cssVarPrefix,
-    shouldSkipGeneratingVar
+  const output = theme;
+  const result = prepareCssVars(output, _extends({}, theme, {
+    prefix: theme.cssVarPrefix
   }));
+  output.vars = result.vars;
+  output.generateThemeVars = result.generateThemeVars;
+  output.generateStyleSheets = result.generateStyleSheets;
+  return output;
 }
-var _default = exports.default = createCssVarsTheme;
+export default createCssVarsTheme;

package/cssVars/createGetCssVar.js

@@ -1,14 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = createGetCssVar;
 /**
  * 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 = '') {
+export default function createGetCssVar(prefix = '') {
   function appendVar(...vars) {
     if (!vars.length) {
       return '';

package/cssVars/cssVarsParser.js

@@ -1,11 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.assignNestedKeys = void 0;
-exports.default = cssVarsParser;
-exports.walkObjectDeep = void 0;
 /**
  * This function create an object from keys, value and then assign to target
  *
@@ -23,7 +15,7 @@ exports.walkObjectDeep = void 0;
  * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
  * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
  */
-const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
+export const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
   let temp = obj;
   keys.forEach((k, index) => {
     if (index === keys.length - 1) {
@@ -52,8 +44,7 @@ const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
  * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
  * // ['palette', 'primary', 'main'] '#000000'
  */
-exports.assignNestedKeys = assignNestedKeys;
-const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
+export const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   function recurse(object, parentKeys = [], arrayKeys = []) {
     Object.entries(object).forEach(([key, value]) => {
       if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
@@ -69,7 +60,6 @@ const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   }
   recurse(obj);
 };
-exports.walkObjectDeep = walkObjectDeep;
 const getCssValue = (keys, value) => {
   if (typeof value === 'number') {
     if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
@@ -108,7 +98,7 @@ const getCssValue = (keys, value) => {
  * 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)' } } }
  */
-function cssVarsParser(theme, options) {
+export default function cssVarsParser(theme, options) {
   const {
     prefix,
     shouldSkipGeneratingVar

package/cssVars/getInitColorSchemeScript.js

@@ -1,18 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DEFAULT_MODE_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_ATTRIBUTE = void 0;
-exports.default = getInitColorSchemeScript;
-var React = _interopRequireWildcard(require("react"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const DEFAULT_MODE_STORAGE_KEY = exports.DEFAULT_MODE_STORAGE_KEY = 'mode';
-const DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
-const DEFAULT_ATTRIBUTE = exports.DEFAULT_ATTRIBUTE = 'data-color-scheme';
-function getInitColorSchemeScript(options) {
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DEFAULT_MODE_STORAGE_KEY = 'mode';
+export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
+export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
+export default function getInitColorSchemeScript(options) {
   const {
     defaultMode = 'light',
     defaultLightColorScheme = 'light',
@@ -22,7 +13,7 @@ function getInitColorSchemeScript(options) {
     attribute = DEFAULT_ATTRIBUTE,
     colorSchemeNode = 'document.documentElement'
   } = options || {};
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
+  return /*#__PURE__*/_jsx("script", {
     // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML: {
       __html: `(function() {

package/cssVars/index.js

@@ -1,35 +1,6 @@
-"use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "createCssVarsTheme", {
-  enumerable: true,
-  get: function () {
-    return _createCssVarsTheme.default;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _createCssVarsProvider.default;
-  }
-});
-Object.defineProperty(exports, "getInitColorSchemeScript", {
-  enumerable: true,
-  get: function () {
-    return _getInitColorSchemeScript.default;
-  }
-});
-Object.defineProperty(exports, "prepareCssVars", {
-  enumerable: true,
-  get: function () {
-    return _prepareCssVars.default;
-  }
-});
-var _createCssVarsProvider = _interopRequireDefault(require("./createCssVarsProvider"));
-var _getInitColorSchemeScript = _interopRequireDefault(require("./getInitColorSchemeScript"));
-var _prepareCssVars = _interopRequireDefault(require("./prepareCssVars"));
-var _createCssVarsTheme = _interopRequireDefault(require("./createCssVarsTheme"));
+export { default } from './createCssVarsProvider';
+export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
+export { default as prepareCssVars } from './prepareCssVars';
+export { default as createCssVarsTheme } from './createCssVarsTheme';

package/cssVars/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../esm/cssVars/index.js",
-  "main": "./index.js",
+  "module": "./index.js",
+  "main": "../node/cssVars/index.js",
   "types": "./index.d.ts"
 }

package/cssVars/prepareCssVars.d.ts

@@ -1,19 +1,15 @@
 export interface DefaultCssVarsTheme {
+    attribute?: string;
     colorSchemes?: Record<string, any>;
     defaultColorScheme?: string;
 }
-declare function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<string, any>, Selector = any>(theme: T, parserConfig?: {
+declare function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<string, any>>(theme: T, { getSelector, ...parserConfig }?: {
     prefix?: string;
     shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
-    getSelector?: (colorScheme: string | undefined, css: Record<string, any>) => Selector;
+    getSelector?: (colorScheme: keyof T['colorSchemes'] | undefined, css: Record<string, any>) => string | Record<string, any>;
 }): {
     vars: ThemeVars;
-    generateCssVars: (colorScheme?: string) => {
-        css: {
-            [x: string]: string | number;
-        };
-        vars: ThemeVars;
-        selector: string | NonNullable<Selector>;
-    };
+    generateThemeVars: () => ThemeVars;
+    generateStyleSheets: () => Record<string, any>[];
 };
 export default prepareCssVars;