@mui/system 5.15.13 → 6.0.0-alpha.0

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

@@ -1,5 +1,5 @@
-import style from './style';
-import compose from './compose';
+import style from '../style';
+import compose from '../compose';
 export function paletteTransform(value, userValue) {
   if (userValue === 'grey') {
     return userValue;

package/legacy/positions/index.js

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

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

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

package/legacy/propsToClassKey/index.js

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

package/legacy/responsivePropType/index.js

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

package/legacy/shadows/index.js

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

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

@@ -1,4 +1,4 @@
-import style from './style';
+import style from '../style';
 var boxShadow = style({
   prop: 'boxShadow',
   themeKey: 'shadows'

package/legacy/sizing/index.js

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

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

@@ -1,6 +1,6 @@
-import style from './style';
-import compose from './compose';
-import { handleBreakpoints, values as breakpointsValues } from './breakpoints';
+import style from '../style';
+import compose from '../compose';
+import { handleBreakpoints, values as breakpointsValues } from '../breakpoints';
 export function sizingTransform(value) {
   return value <= 1 && value !== 0 ? "".concat(value * 100, "%") : value;
 }

package/legacy/spacing/index.js

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

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'

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.js → colorManipulator/colorManipulator.js}

@@ -316,7 +316,7 @@ export function emphasize(color, coefficient = 0.15) {
 }
 export function private_safeEmphasize(color, coefficient, warning) {
   try {
-    return private_safeEmphasize(color, coefficient);
+    return emphasize(color, coefficient);
   } catch (error) {
     if (warning && process.env.NODE_ENV !== 'production') {
       console.warn(warning);

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/{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\`.`);
@@ -46,22 +43,23 @@ export default function createCssVarsProvider(options) {
     }
     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 = muiUseTheme();
     const ctx = React.useContext(ColorSchemeContext);
@@ -71,10 +69,6 @@ export default function createCssVarsProvider(options) {
       {
         colorSchemes = {},
         components = {},
-        generateCssVars = () => ({
-          vars: {},
-          css: {}
-        }),
         cssVarPrefix
       } = _ref,
       restThemeProp = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -128,32 +122,19 @@ 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
     });
 
-    // 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 => {
@@ -168,30 +149,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.
@@ -228,30 +201,24 @@ export default 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?.cssVarPrefix === cssVarPrefix) {
       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;