@mui/system 5.15.15 → 6.0.0-alpha.1

package/legacy/{spacing.js → spacing/spacing.js}

@@ -1,9 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import responsivePropType from './responsivePropType';
-import { handleBreakpoints } from './breakpoints';
-import { getPath } from './style';
-import merge from './merge';
-import memoize from './memoize';
+import responsivePropType from '../responsivePropType';
+import { handleBreakpoints } from '../breakpoints';
+import { getPath } from '../style';
+import merge from '../merge';
+import memoize from '../memoize';
 var properties = {
   m: 'margin',
   p: 'padding'
@@ -50,25 +50,29 @@ export var paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'p
 var spacingKeys = [].concat(marginKeys, paddingKeys);
 export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
   var _getPath;
-  var themeSpacing = (_getPath = getPath(theme, themeKey, false)) != null ? _getPath : defaultValue;
-  if (typeof themeSpacing === 'number') {
-    return function (abs) {
-      if (typeof abs === 'string') {
-        return abs;
+  var themeSpacing = (_getPath = getPath(theme, themeKey, true)) != null ? _getPath : defaultValue;
+  if (typeof themeSpacing === 'number' || typeof themeSpacing === 'string') {
+    return function (val) {
+      if (typeof val === 'string') {
+        return val;
       }
       if (process.env.NODE_ENV !== 'production') {
-        if (typeof abs !== 'number') {
-          console.error("MUI: Expected ".concat(propName, " argument to be a number or a string, got ").concat(abs, "."));
+        if (typeof val !== 'number') {
+          console.error("MUI: Expected ".concat(propName, " argument to be a number or a string, got ").concat(val, "."));
         }
       }
-      return themeSpacing * abs;
+      if (typeof themeSpacing === 'string') {
+        return "calc(".concat(val, " * ").concat(themeSpacing, ")");
+      }
+      return themeSpacing * val;
     };
   }
   if (Array.isArray(themeSpacing)) {
-    return function (abs) {
-      if (typeof abs === 'string') {
-        return abs;
+    return function (val) {
+      if (typeof val === 'string') {
+        return val;
       }
+      var abs = Math.abs(val);
       if (process.env.NODE_ENV !== 'production') {
         if (!Number.isInteger(abs)) {
           console.error(["MUI: The `theme.".concat(themeKey, "` array type cannot be combined with non integer values.") + "You should either use an integer value that can be used as index, or define the `theme.".concat(themeKey, "` as a number.")].join('\n'));
@@ -76,7 +80,14 @@ export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
           console.error(["MUI: The value provided (".concat(abs, ") overflows."), "The supported values are: ".concat(JSON.stringify(themeSpacing), "."), "".concat(abs, " > ").concat(themeSpacing.length - 1, ", you need to add the missing values.")].join('\n'));
         }
       }
-      return themeSpacing[abs];
+      var transformed = themeSpacing[abs];
+      if (val >= 0) {
+        return transformed;
+      }
+      if (typeof transformed === 'number') {
+        return -transformed;
+      }
+      return "-".concat(transformed);
     };
   }
   if (typeof themeSpacing === 'function') {
@@ -96,15 +107,7 @@ export function getValue(transformer, propValue) {
   if (typeof propValue === 'string' || propValue == null) {
     return propValue;
   }
-  var abs = Math.abs(propValue);
-  var transformed = transformer(abs);
-  if (propValue >= 0) {
-    return transformed;
-  }
-  if (typeof transformed === 'number') {
-    return -transformed;
-  }
-  return "-".concat(transformed);
+  return transformer(propValue);
 }
 export function getStyleFromPropValue(cssProperties, transformer) {
   return function (propValue) {

package/legacy/style/index.js

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

package/legacy/{style.js → style/style.js}

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import capitalize from '@mui/utils/capitalize';
-import responsivePropType from './responsivePropType';
-import { handleBreakpoints } from './breakpoints';
+import responsivePropType from '../responsivePropType';
+import { handleBreakpoints } from '../breakpoints';
 export function getPath(obj, path) {
   var checkVars = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   if (!path || typeof path !== 'string') {

package/legacy/styled/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './styled';

package/legacy/styled/styled.js

@@ -0,0 +1,3 @@
+import createStyled from '../createStyled';
+var styled = createStyled();
+export default styled;

package/legacy/typography/index.js

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

package/legacy/{typography.js → typography/typography.js}

@@ -1,5 +1,5 @@
-import style from './style';
-import compose from './compose';
+import style from '../style';
+import compose from '../compose';
 export var fontFamily = style({
   prop: 'fontFamily',
   themeKey: 'typography'

package/legacy/useTheme/index.js

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

package/legacy/{useTheme.js → useTheme/useTheme.js}

@@ -1,7 +1,7 @@
 'use client';
 
-import createTheme from './createTheme';
-import useThemeWithoutDefault from './useThemeWithoutDefault';
+import createTheme from '../createTheme';
+import useThemeWithoutDefault from '../useThemeWithoutDefault';
 export var systemDefaultTheme = createTheme();
 function useTheme() {
   var defaultTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : systemDefaultTheme;

package/legacy/useThemeWithoutDefault/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './useThemeWithoutDefault';

package/memoize/index.d.ts

@@ -0,0 +1 @@
+export { default } from './memoize';

package/memoize/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './memoize';

package/memoize/memoize.d.ts

@@ -0,0 +1,3 @@
+export default function memoize<ArgType = any, ReturnType = any>(
+  fn: (arg: ArgType) => ReturnType,
+): (arg: ArgType) => ReturnType;

package/memoize/package.json

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

package/merge/index.d.ts

@@ -0,0 +1 @@
+export { default } from './merge';

package/merge/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './merge';

package/merge/package.json

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

package/modern/{borders.js → borders/borders.js}

@@ -1,8 +1,8 @@
-import responsivePropType from './responsivePropType';
-import style from './style';
-import compose from './compose';
-import { createUnaryUnit, getValue } from './spacing';
-import { handleBreakpoints } from './breakpoints';
+import responsivePropType from '../responsivePropType';
+import style from '../style';
+import compose from '../compose';
+import { createUnaryUnit, getValue } from '../spacing';
+import { handleBreakpoints } from '../breakpoints';
 export function borderTransform(value) {
   if (typeof value !== 'number') {
     return value;

package/modern/borders/index.js

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

package/{esm → modern/breakpoints}/breakpoints.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
 import deepmerge from '@mui/utils/deepmerge';
-import merge from './merge';
+import merge from '../merge';
 
 // The breakpoint **start** at this value.
 // For instance with the first breakpoint xs: [xs, sm[.
@@ -77,8 +77,7 @@ function breakpoints(styleFunction) {
   return newStyleFunction;
 }
 export function createEmptyBreakpointObject(breakpointsInput = {}) {
-  var _breakpointsInput$key;
-  const breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
+  const breakpointsInOrder = breakpointsInput.keys?.reduce((acc, key) => {
     const breakpointStyleKey = breakpointsInput.up(key);
     acc[breakpointStyleKey] = {};
     return acc;

package/modern/breakpoints/index.js

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

package/modern/colorManipulator/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export * from './colorManipulator';

package/{esm → modern/compose}/compose.js

@@ -1,4 +1,4 @@
-import merge from './merge';
+import merge from '../merge';
 function compose(...styles) {
   const handlers = styles.reduce((acc, style) => {
     style.filterProps.forEach(prop => {

package/modern/compose/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './compose';

package/{esm → modern/createBox}/createBox.js

@@ -6,8 +6,8 @@ const _excluded = ["className", "component"];
 import * as React from 'react';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
-import styleFunctionSx, { extendSxProp } from './styleFunctionSx';
-import useTheme from './useTheme';
+import styleFunctionSx, { extendSxProp } from '../styleFunctionSx';
+import useTheme from '../useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createBox(options = {}) {
   const {

package/modern/createBox/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './createBox';

package/{esm → modern/createStyled}/createStyled.js

@@ -8,8 +8,8 @@ import styledEngineStyled, { internal_processStyles as processStyles } from '@mu
 import { isPlainObject } from '@mui/utils/deepmerge';
 import capitalize from '@mui/utils/capitalize';
 import getDisplayName from '@mui/utils/getDisplayName';
-import createTheme from './createTheme';
-import styleFunctionSx from './styleFunctionSx';
+import createTheme from '../createTheme';
+import styleFunctionSx from '../styleFunctionSx';
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -74,7 +74,7 @@ function processStyleArg(callableStyle, _ref) {
         }, props, ownerState));
       } else {
         Object.keys(variant.props).forEach(key => {
-          if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
+          if (ownerState?.[key] !== variant.props[key] && props[key] !== variant.props[key]) {
             isMatch = false;
           }
         });
@@ -110,7 +110,7 @@ export default function createStyled(input = {}) {
   systemSx.__mui_systemSx = true;
   return (tag, inputOptions = {}) => {
     // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
-    processStyles(tag, styles => styles.filter(style => !(style != null && style.__mui_systemSx)));
+    processStyles(tag, styles => styles.filter(style => !style?.__mui_systemSx));
     const {
         name: componentName,
         slot: componentSlot,
@@ -193,12 +193,11 @@ export default function createStyled(input = {}) {
       }
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(props => {
-          var _theme$components;
           const theme = resolveTheme(_extends({}, props, {
             defaultTheme,
             themeId
           }));
-          const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[componentName]) == null ? void 0 : _theme$components.variants;
+          const themeVariants = theme?.components?.[componentName]?.variants;
           return processStyleArg({
             variants: themeVariants
           }, _extends({}, props, {

package/modern/createStyled/index.js

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

package/modern/createTheme/createSpacing.js

@@ -3,18 +3,17 @@ import { createUnarySpacing } from '../spacing';
 // The different signatures imply different meaning for their arguments that can't be expressed structurally.
 // We express the difference with variable names.
 
-export default function createSpacing(spacingInput = 8) {
+export default function createSpacing(spacingInput = 8,
+// Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
+// Smaller components, such as icons, can align to a 4dp grid.
+// https://m2.material.io/design/layout/understanding-layout.html
+transform = createUnarySpacing({
+  spacing: spacingInput
+})) {
   // Already transformed.
   if (spacingInput.mui) {
     return spacingInput;
   }
-
-  // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
-  // Smaller components, such as icons, can align to a 4dp grid.
-  // https://m2.material.io/design/layout/understanding-layout.html
-  const transform = createUnarySpacing({
-    spacing: spacingInput
-  });
   const spacing = (...argsInput) => {
     if (process.env.NODE_ENV !== 'production') {
       if (!(argsInput.length <= 4)) {

package/modern/{cssGrid.js → cssGrid/cssGrid.js}

@@ -1,8 +1,8 @@
-import style from './style';
-import compose from './compose';
-import { createUnaryUnit, getValue } from './spacing';
-import { handleBreakpoints } from './breakpoints';
-import responsivePropType from './responsivePropType';
+import style from '../style';
+import compose from '../compose';
+import { createUnaryUnit, getValue } from '../spacing';
+import { handleBreakpoints } from '../breakpoints';
+import responsivePropType from '../responsivePropType';
 
 // false positive
 // eslint-disable-next-line react/function-component-definition

package/modern/cssGrid/index.js

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

package/modern/cssVars/createCssVarsProvider.js

@@ -1,17 +1,15 @@
 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", "generateCssVars", "cssVarPrefix"];
+const _excluded = ["colorSchemes", "components", "cssVarPrefix"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import deepmerge from '@mui/utils/deepmerge';
 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 } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+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 {
@@ -29,8 +27,7 @@ export default function createCssVarsProvider(options) {
     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?.light] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme?.dark]) {
     console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
@@ -72,10 +69,6 @@ export default function createCssVarsProvider(options) {
       {
         colorSchemes = {},
         components = {},
-        generateCssVars = () => ({
-          vars: {},
-          css: {}
-        }),
         cssVarPrefix
       } = _ref,
       restThemeProp = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -129,32 +122,22 @@ export default 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 = _extends({}, restThemeProp, {
       components,
       colorSchemes,
       cssVarPrefix,
-      vars: rootVars,
-      getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
+      vars: themeVars
     });
+    if (typeof theme.generateSpacing === 'function') {
+      theme.spacing = theme.generateSpacing();
+    }
 
-    // 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 = deepmerge(theme.vars, vars);
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
         Object.keys(scheme).forEach(schemeKey => {
@@ -169,30 +152,22 @@ export default 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 = deepmerge(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.
@@ -243,16 +218,10 @@ export default function createCssVarsProvider(options) {
       shouldGenerateStyleSheet = false;
     }
     const element = /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [/*#__PURE__*/_jsx(GlobalStyles, {
-          styles: {
-            [colorSchemeSelector]: rootCss
-          }
-        }), /*#__PURE__*/_jsx(GlobalStyles, {
-          styles: defaultColorSchemeStyleSheet
-        }), /*#__PURE__*/_jsx(GlobalStyles, {
-          styles: otherColorSchemesStyleSheet
-        })]
+      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,

package/modern/cssVars/createCssVarsTheme.js

@@ -1,16 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["cssVarPrefix", "shouldSkipGeneratingVar"];
 import prepareCssVars from './prepareCssVars';
 function createCssVarsTheme(theme) {
-  const {
-      cssVarPrefix,
-      shouldSkipGeneratingVar
-    } = theme,
-    otherTheme = _objectWithoutPropertiesLoose(theme, _excluded);
-  return _extends({}, theme, prepareCssVars(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;
 }
 export default createCssVarsTheme;

package/modern/cssVars/cssVarsParser.js

@@ -111,11 +111,12 @@ export default 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