@mui/system 5.15.15 → 6.0.0-alpha.1

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
@@ -121,11 +111,12 @@ function cssVarsParser(theme, options) {
       if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
         // only create css & var if `shouldSkipGeneratingVar` return false
         const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
+        const resolvedValue = getCssValue(keys, value);
         Object.assign(css, {
-          [cssVar]: getCssValue(keys, value)
+          [cssVar]: resolvedValue
         });
         assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
-        assignNestedKeys(varsWithDefaults, keys, `var(${cssVar}, ${value})`, arrayKeys);
+        assignNestedKeys(varsWithDefaults, keys, `var(${cssVar}, ${resolvedValue})`, arrayKeys);
       }
     }
   }, keys => keys[0] === 'vars' // skip 'vars/*' paths

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;

package/cssVars/prepareCssVars.js

@@ -1,80 +1,99 @@
-"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 _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
-var _cssVarsParser = _interopRequireDefault(require("./cssVarsParser"));
-const _excluded = ["colorSchemes", "components", "defaultColorScheme"];
-function prepareCssVars(theme, parserConfig) {
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["getSelector"],
+  _excluded2 = ["colorSchemes", "components", "defaultColorScheme"];
+import deepmerge from '@mui/utils/deepmerge';
+import cssVarsParser from './cssVarsParser';
+function prepareCssVars(theme, _ref = {}) {
+  let {
+      getSelector
+    } = _ref,
+    parserConfig = _objectWithoutPropertiesLoose(_ref, _excluded);
   // @ts-ignore - ignore components do not exist
   const {
       colorSchemes = {},
       defaultColorScheme = 'light'
     } = theme,
-    otherTheme = (0, _objectWithoutPropertiesLoose2.default)(theme, _excluded);
+    otherTheme = _objectWithoutPropertiesLoose(theme, _excluded2);
   const {
     vars: rootVars,
     css: rootCss,
     varsWithDefaults: rootVarsWithDefaults
-  } = (0, _cssVarsParser.default)(otherTheme, parserConfig);
+  } = cssVarsParser(otherTheme, parserConfig);
   let themeVars = rootVarsWithDefaults;
   const colorSchemesMap = {};
   const {
-      [defaultColorScheme]: light
+      [defaultColorScheme]: defaultScheme
     } = colorSchemes,
-    otherColorSchemes = (0, _objectWithoutPropertiesLoose2.default)(colorSchemes, [defaultColorScheme].map(_toPropertyKey2.default));
+    otherColorSchemes = _objectWithoutPropertiesLoose(colorSchemes, [defaultColorScheme].map(_toPropertyKey));
   Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
     const {
       vars,
       css,
       varsWithDefaults
-    } = (0, _cssVarsParser.default)(scheme, parserConfig);
-    themeVars = (0, _deepmerge.default)(themeVars, varsWithDefaults);
+    } = cssVarsParser(scheme, parserConfig);
+    themeVars = deepmerge(themeVars, varsWithDefaults);
     colorSchemesMap[key] = {
       css,
       vars
     };
   });
-  if (light) {
+  if (defaultScheme) {
     // default color scheme vars should be merged last to set as default
     const {
       css,
       vars,
       varsWithDefaults
-    } = (0, _cssVarsParser.default)(light, parserConfig);
-    themeVars = (0, _deepmerge.default)(themeVars, varsWithDefaults);
+    } = cssVarsParser(defaultScheme, parserConfig);
+    themeVars = deepmerge(themeVars, varsWithDefaults);
     colorSchemesMap[defaultColorScheme] = {
       css,
       vars
     };
   }
-  const generateCssVars = colorScheme => {
-    var _parserConfig$getSele2;
-    if (!colorScheme) {
-      var _parserConfig$getSele;
-      const css = (0, _extends2.default)({}, rootCss);
-      return {
-        css,
-        vars: rootVars,
-        selector: (parserConfig == null || (_parserConfig$getSele = parserConfig.getSelector) == null ? void 0 : _parserConfig$getSele.call(parserConfig, colorScheme, css)) || ':root'
-      };
+  const generateThemeVars = () => {
+    let vars = _extends({}, rootVars);
+    Object.entries(colorSchemesMap).forEach(([, {
+      vars: schemeVars
+    }]) => {
+      vars = deepmerge(vars, schemeVars);
+    });
+    return vars;
+  };
+  const generateStyleSheets = () => {
+    const stylesheets = [];
+    const colorScheme = theme.defaultColorScheme || 'light';
+    function insertStyleSheet(selector, css) {
+      if (Object.keys(css).length) {
+        stylesheets.push(typeof selector === 'string' ? {
+          [selector]: _extends({}, css)
+        } : selector);
+      }
     }
-    const css = (0, _extends2.default)({}, colorSchemesMap[colorScheme].css);
-    return {
-      css,
-      vars: colorSchemesMap[colorScheme].vars,
-      selector: (parserConfig == null || (_parserConfig$getSele2 = parserConfig.getSelector) == null ? void 0 : _parserConfig$getSele2.call(parserConfig, colorScheme, css)) || ':root'
-    };
+    insertStyleSheet(getSelector?.(undefined, _extends({}, rootCss)) || ':root', rootCss);
+    const {
+        [colorScheme]: defaultSchemeVal
+      } = colorSchemesMap,
+      rest = _objectWithoutPropertiesLoose(colorSchemesMap, [colorScheme].map(_toPropertyKey));
+    if (defaultSchemeVal) {
+      // default color scheme has to come before other color schemes
+      const {
+        css
+      } = defaultSchemeVal;
+      insertStyleSheet(getSelector?.(colorScheme, _extends({}, css)) || `[${theme.attribute || 'data-color-scheme'}="${colorScheme}"]`, css);
+    }
+    Object.entries(rest).forEach(([key, {
+      css
+    }]) => {
+      insertStyleSheet(getSelector?.(key, _extends({}, css)) || `[${theme.attribute || 'data-color-scheme'}="${key}"]`, css);
+    });
+    return stylesheets;
   };
   return {
     vars: themeVars,
-    generateCssVars
+    generateThemeVars,
+    generateStyleSheets
   };
 }
-var _default = exports.default = prepareCssVars;
+export default prepareCssVars;

package/cssVars/useCurrentColorScheme.js

@@ -1,19 +1,9 @@
-"use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useCurrentColorScheme;
-exports.getColorScheme = getColorScheme;
-exports.getSystemMode = getSystemMode;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _getInitColorSchemeScript = require("./getInitColorSchemeScript");
-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; }
-function getSystemMode(mode) {
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from './getInitColorSchemeScript';
+export function getSystemMode(mode) {
   if (typeof window !== 'undefined' && mode === 'system') {
     const mql = window.matchMedia('(prefers-color-scheme: dark)');
     if (mql.matches) {
@@ -32,7 +22,7 @@ function processState(state, callback) {
   }
   return undefined;
 }
-function getColorScheme(state) {
+export function getColorScheme(state) {
   return processState(state, mode => {
     if (mode === 'light') {
       return state.lightColorScheme;
@@ -59,14 +49,14 @@ function initializeValue(key, defaultValue) {
   }
   return value || defaultValue;
 }
-function useCurrentColorScheme(options) {
+export default function useCurrentColorScheme(options) {
   const {
     defaultMode = 'light',
     defaultLightColorScheme,
     defaultDarkColorScheme,
     supportedColorSchemes = [],
-    modeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey = _getInitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     storageWindow = typeof window === 'undefined' ? undefined : window
   } = options;
   const joinedColorSchemes = supportedColorSchemes.join(',');
@@ -88,13 +78,13 @@ function useCurrentColorScheme(options) {
         // do nothing if mode does not change
         return currentState;
       }
-      const newMode = mode != null ? mode : defaultMode;
+      const newMode = mode ?? defaultMode;
       try {
         localStorage.setItem(modeStorageKey, newMode);
       } catch (e) {
         // Unsupported
       }
-      return (0, _extends2.default)({}, currentState, {
+      return _extends({}, currentState, {
         mode: newMode,
         systemMode: getSystemMode(newMode)
       });
@@ -109,7 +99,7 @@ function useCurrentColorScheme(options) {
         } catch (e) {
           // Unsupported
         }
-        return (0, _extends2.default)({}, currentState, {
+        return _extends({}, currentState, {
           lightColorScheme: defaultLightColorScheme,
           darkColorScheme: defaultDarkColorScheme
         });
@@ -119,7 +109,7 @@ function useCurrentColorScheme(options) {
         console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
       } else {
         setState(currentState => {
-          const newState = (0, _extends2.default)({}, currentState);
+          const newState = _extends({}, currentState);
           processState(currentState, mode => {
             try {
               localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
@@ -138,7 +128,7 @@ function useCurrentColorScheme(options) {
       }
     } else {
       setState(currentState => {
-        const newState = (0, _extends2.default)({}, currentState);
+        const newState = _extends({}, currentState);
         const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
         const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
         if (newLightColorScheme) {
@@ -172,13 +162,13 @@ function useCurrentColorScheme(options) {
   const handleMediaQuery = React.useCallback(event => {
     if (state.mode === 'system') {
       setState(currentState => {
-        const systemMode = event != null && event.matches ? 'dark' : 'light';
+        const systemMode = event?.matches ? 'dark' : 'light';
 
         // Early exit, nothing changed.
         if (currentState.systemMode === systemMode) {
           return currentState;
         }
-        return (0, _extends2.default)({}, currentState, {
+        return _extends({}, currentState, {
           systemMode
         });
       });
@@ -232,7 +222,7 @@ function useCurrentColorScheme(options) {
     }
     return undefined;
   }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
-  return (0, _extends2.default)({}, state, {
+  return _extends({}, state, {
     colorScheme,
     setMode,
     setColorScheme

package/display/display.d.ts

@@ -0,0 +1,3 @@
+import { PropsFor, display } from '../Box';
+
+export type DisplayProps = PropsFor<typeof display>;

package/{esm → display}/display.js

@@ -1,5 +1,5 @@
-import style from './style';
-import compose from './compose';
+import style from '../style';
+import compose from '../compose';
 export const displayPrint = style({
   prop: 'displayPrint',
   cssProperty: false,

package/display/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './display';
+export * from './display';

package/display/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './display';
+export * from './display';

package/display/package.json

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

package/flexbox/flexbox.d.ts

@@ -0,0 +1,3 @@
+import { PropsFor, flexbox } from '../Box';
+
+export type FlexboxProps = PropsFor<typeof flexbox>;

package/{modern → flexbox}/flexbox.js

@@ -1,5 +1,5 @@
-import style from './style';
-import compose from './compose';
+import style from '../style';
+import compose from '../compose';
 export const flexBasis = style({
   prop: 'flexBasis'
 });

package/flexbox/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './flexbox';
+export * from './flexbox';

package/flexbox/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './flexbox';
+export * from './flexbox';

package/flexbox/package.json

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

package/getThemeValue/getThemeValue.d.ts

@@ -0,0 +1 @@
+export default function getThemeValue(prop: string, value: any, theme: object): any;

package/{esm → getThemeValue}/getThemeValue.js

@@ -1,13 +1,13 @@
-import borders from './borders';
-import display from './display';
-import flexbox from './flexbox';
-import grid from './cssGrid';
-import positions from './positions';
-import palette from './palette';
-import shadows from './shadows';
-import sizing from './sizing';
-import spacing from './spacing';
-import typography from './typography';
+import borders from '../borders';
+import display from '../display';
+import flexbox from '../flexbox';
+import grid from '../cssGrid';
+import positions from '../positions';
+import palette from '../palette';
+import shadows from '../shadows';
+import sizing from '../sizing';
+import spacing from '../spacing';
+import typography from '../typography';
 const filterPropsMapping = {
   borders: borders.filterProps,
   display: display.filterProps,

package/getThemeValue/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './getThemeValue';
+export * from './getThemeValue';

package/getThemeValue/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './getThemeValue';
+export * from './getThemeValue';

package/getThemeValue/package.json

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