@mui/system 5.15.15 → 6.0.0-alpha.1

package/modern/cssVars/prepareCssVars.js

@@ -1,16 +1,21 @@
 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 = ["colorSchemes", "components", "defaultColorScheme"];
+const _excluded = ["getSelector"],
+  _excluded2 = ["colorSchemes", "components", "defaultColorScheme"];
 import deepmerge from '@mui/utils/deepmerge';
 import cssVarsParser from './cssVarsParser';
-function prepareCssVars(theme, parserConfig) {
+function prepareCssVars(theme, _ref = {}) {
+  let {
+      getSelector
+    } = _ref,
+    parserConfig = _objectWithoutPropertiesLoose(_ref, _excluded);
   // @ts-ignore - ignore components do not exist
   const {
       colorSchemes = {},
       defaultColorScheme = 'light'
     } = theme,
-    otherTheme = _objectWithoutPropertiesLoose(theme, _excluded);
+    otherTheme = _objectWithoutPropertiesLoose(theme, _excluded2);
   const {
     vars: rootVars,
     css: rootCss,
@@ -19,7 +24,7 @@ function prepareCssVars(theme, parserConfig) {
   let themeVars = rootVarsWithDefaults;
   const colorSchemesMap = {};
   const {
-      [defaultColorScheme]: light
+      [defaultColorScheme]: defaultScheme
     } = colorSchemes,
     otherColorSchemes = _objectWithoutPropertiesLoose(colorSchemes, [defaultColorScheme].map(_toPropertyKey));
   Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
@@ -34,38 +39,61 @@ function prepareCssVars(theme, parserConfig) {
       vars
     };
   });
-  if (light) {
+  if (defaultScheme) {
     // default color scheme vars should be merged last to set as default
     const {
       css,
       vars,
       varsWithDefaults
-    } = cssVarsParser(light, parserConfig);
+    } = cssVarsParser(defaultScheme, parserConfig);
     themeVars = deepmerge(themeVars, varsWithDefaults);
     colorSchemesMap[defaultColorScheme] = {
       css,
       vars
     };
   }
-  const generateCssVars = colorScheme => {
-    if (!colorScheme) {
-      const css = _extends({}, rootCss);
-      return {
-        css,
-        vars: rootVars,
-        selector: parserConfig?.getSelector?.(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 = _extends({}, colorSchemesMap[colorScheme].css);
-    return {
-      css,
-      vars: colorSchemesMap[colorScheme].vars,
-      selector: parserConfig?.getSelector?.(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
   };
 }
 export default prepareCssVars;

package/modern/{display.js → 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/modern/display/index.js

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

package/{esm → 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/modern/flexbox/index.js

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

package/modern/{getThemeValue.js → 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/modern/getThemeValue/index.js

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

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.15.15
+ * @mui/system v6.0.0-alpha.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/memoize/index.js

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

package/modern/merge/index.js

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

package/modern/palette/index.js

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

package/{esm → modern/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/modern/positions/index.js

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

package/modern/{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 const position = style({
   prop: 'position'
 });

package/modern/propsToClassKey/index.js

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

package/modern/responsivePropType/index.js

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

package/modern/shadows/index.js

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

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

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

package/modern/sizing/index.js

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

package/modern/{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 ? `${value * 100}%` : value;
 }

package/modern/spacing/index.js

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

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

@@ -1,8 +1,8 @@
-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';
 const properties = {
   m: 'margin',
   p: 'padding'
@@ -43,26 +43,29 @@ export const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'm
 export const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
 const spacingKeys = [...marginKeys, ...paddingKeys];
 export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
-  var _getPath;
-  const themeSpacing = (_getPath = getPath(theme, themeKey, false)) != null ? _getPath : defaultValue;
-  if (typeof themeSpacing === 'number') {
-    return abs => {
-      if (typeof abs === 'string') {
-        return abs;
+  const themeSpacing = getPath(theme, themeKey, true) ?? defaultValue;
+  if (typeof themeSpacing === 'number' || typeof themeSpacing === 'string') {
+    return val => {
+      if (typeof val === 'string') {
+        return val;
       }
       if (process.env.NODE_ENV !== 'production') {
-        if (typeof abs !== 'number') {
-          console.error(`MUI: Expected ${propName} argument to be a number or a string, got ${abs}.`);
+        if (typeof val !== 'number') {
+          console.error(`MUI: Expected ${propName} argument to be a number or a string, got ${val}.`);
         }
       }
-      return themeSpacing * abs;
+      if (typeof themeSpacing === 'string') {
+        return `calc(${val} * ${themeSpacing})`;
+      }
+      return themeSpacing * val;
     };
   }
   if (Array.isArray(themeSpacing)) {
-    return abs => {
-      if (typeof abs === 'string') {
-        return abs;
+    return val => {
+      if (typeof val === 'string') {
+        return val;
       }
+      const abs = Math.abs(val);
       if (process.env.NODE_ENV !== 'production') {
         if (!Number.isInteger(abs)) {
           console.error([`MUI: The \`theme.${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.${themeKey}\` as a number.`].join('\n'));
@@ -70,7 +73,14 @@ export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
           console.error([`MUI: The value provided (${abs}) overflows.`, `The supported values are: ${JSON.stringify(themeSpacing)}.`, `${abs} > ${themeSpacing.length - 1}, you need to add the missing values.`].join('\n'));
         }
       }
-      return themeSpacing[abs];
+      const transformed = themeSpacing[abs];
+      if (val >= 0) {
+        return transformed;
+      }
+      if (typeof transformed === 'number') {
+        return -transformed;
+      }
+      return `-${transformed}`;
     };
   }
   if (typeof themeSpacing === 'function') {
@@ -88,15 +98,7 @@ export function getValue(transformer, propValue) {
   if (typeof propValue === 'string' || propValue == null) {
     return propValue;
   }
-  const abs = Math.abs(propValue);
-  const transformed = transformer(abs);
-  if (propValue >= 0) {
-    return transformed;
-  }
-  if (typeof transformed === 'number') {
-    return -transformed;
-  }
-  return `-${transformed}`;
+  return transformer(propValue);
 }
 export function getStyleFromPropValue(cssProperties, transformer) {
   return propValue => cssProperties.reduce((acc, cssProperty) => {

package/modern/style/index.js

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

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

@@ -1,6 +1,6 @@
 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, checkVars = true) {
   if (!path || typeof path !== 'string') {
     return null;

package/modern/styled/index.js

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

package/modern/styled/styled.js

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

package/modern/typography/index.js

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

package/modern/{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 const fontFamily = style({
   prop: 'fontFamily',
   themeKey: 'typography'

package/modern/useTheme/index.js

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

package/{esm → modern/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 const systemDefaultTheme = createTheme();
 function useTheme(defaultTheme = systemDefaultTheme) {
   return useThemeWithoutDefault(defaultTheme);

package/modern/useThemeWithoutDefault/index.js

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

package/node/Box/Box.js

@@ -0,0 +1,36 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ClassNameGenerator = _interopRequireDefault(require("@mui/utils/ClassNameGenerator"));
+var _createBox = _interopRequireDefault(require("../createBox"));
+var _boxClasses = _interopRequireDefault(require("./boxClasses"));
+const Box = (0, _createBox.default)({
+  defaultClassName: _boxClasses.default.root,
+  generateClassName: _ClassNameGenerator.default.generate
+});
+process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: _propTypes.default.elementType,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;
+var _default = exports.default = Box;

package/node/Box/boxClasses.js

@@ -0,0 +1,10 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+const boxClasses = (0, _generateUtilityClasses.default)('MuiBox', ['root']);
+var _default = exports.default = boxClasses;

package/node/Box/index.js

@@ -0,0 +1,37 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  boxClasses: true
+};
+Object.defineProperty(exports, "boxClasses", {
+  enumerable: true,
+  get: function () {
+    return _boxClasses.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Box.default;
+  }
+});
+var _Box = _interopRequireDefault(require("./Box"));
+var _boxClasses = _interopRequireWildcard(require("./boxClasses"));
+Object.keys(_boxClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _boxClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _boxClasses[key];
+    }
+  });
+});
+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 && {}.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; }

package/{esm → node}/Container/Container.js

@@ -1,8 +1,13 @@
+"use strict";
 'use client';
 
-import PropTypes from 'prop-types';
-import createContainer from './createContainer';
-
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _createContainer = _interopRequireDefault(require("./createContainer"));
 /**
  *
  * Demos:
@@ -14,7 +19,7 @@ import createContainer from './createContainer';
  *
  * - [Container API](https://mui.com/system/api/container/)
  */
-const Container = createContainer();
+const Container = (0, _createContainer.default)();
 process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
@@ -23,21 +28,21 @@ process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes
   /**
    * @ignore
    */
-  children: PropTypes.node,
+  children: _propTypes.default.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: PropTypes.object,
+  classes: _propTypes.default.object,
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes.elementType,
+  component: _propTypes.default.elementType,
   /**
    * If `true`, the left and right padding is removed.
    * @default false
    */
-  disableGutters: PropTypes.bool,
+  disableGutters: _propTypes.default.bool,
   /**
    * Set the max-width to match the min-width of the current breakpoint.
    * This is useful if you'd prefer to design for a fixed set of sizes
@@ -45,17 +50,17 @@ process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes
    * It's fluid by default.
    * @default false
    */
-  fixed: PropTypes.bool,
+  fixed: _propTypes.default.bool,
   /**
    * Determine the max-width of the container.
    * The container width grows with the size of the screen.
    * Set to `false` to disable `maxWidth`.
    * @default 'lg'
    */
-  maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
+  maxWidth: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), _propTypes.default.string]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
-export default Container;
+var _default = exports.default = Container;

package/node/Container/ContainerProps.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/Container/containerClasses.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.getContainerUtilityClass = getContainerUtilityClass;
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+function getContainerUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiContainer', slot);
+}
+const containerClasses = (0, _generateUtilityClasses.default)('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
+var _default = exports.default = containerClasses;