@mui/system 5.15.15 → 6.0.0-alpha.1

package/spacing/package.json

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

package/{spacing.d.ts → spacing/spacing.d.ts}

@@ -1,4 +1,4 @@
-import { SimpleStyleFunction, spacing, PropsFor } from './Box';
+import { SimpleStyleFunction, spacing, PropsFor } from '../Box';
 
 export type SpacingValueType = string | number | null | undefined;
 export type SpacingProps = PropsFor<typeof spacing>;

package/{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,25 +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) {
-  const themeSpacing = getPath(theme, themeKey, false) ?? 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'));
@@ -69,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') {
@@ -87,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/style/index.d.ts

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

package/style/index.js

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

package/style/package.json

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

package/{style.d.ts → style/style.d.ts}

@@ -1,5 +1,5 @@
 import { CSSObject } from '@mui/styled-engine';
-import { StyleFunction } from './Box';
+import { StyleFunction } from '../Box';
 
 export type TransformFunction = (
   cssValue: unknown,

package/{esm → 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/styleFunctionSx/defaultSxConfig.js

@@ -1,35 +1,29 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _spacing = require("../spacing");
-var _borders = require("../borders");
-var _cssGrid = require("../cssGrid");
-var _palette = require("../palette");
-var _sizing = require("../sizing");
+import { padding, margin } from '../spacing';
+import { borderRadius, borderTransform } from '../borders';
+import { gap, rowGap, columnGap } from '../cssGrid';
+import { paletteTransform } from '../palette';
+import { maxWidth, sizingTransform } from '../sizing';
 const defaultSxConfig = {
   // borders
   border: {
     themeKey: 'borders',
-    transform: _borders.borderTransform
+    transform: borderTransform
   },
   borderTop: {
     themeKey: 'borders',
-    transform: _borders.borderTransform
+    transform: borderTransform
   },
   borderRight: {
     themeKey: 'borders',
-    transform: _borders.borderTransform
+    transform: borderTransform
   },
   borderBottom: {
     themeKey: 'borders',
-    transform: _borders.borderTransform
+    transform: borderTransform
   },
   borderLeft: {
     themeKey: 'borders',
-    transform: _borders.borderTransform
+    transform: borderTransform
   },
   borderColor: {
     themeKey: 'palette'
@@ -48,149 +42,149 @@ const defaultSxConfig = {
   },
   outline: {
     themeKey: 'borders',
-    transform: _borders.borderTransform
+    transform: borderTransform
   },
   outlineColor: {
     themeKey: 'palette'
   },
   borderRadius: {
     themeKey: 'shape.borderRadius',
-    style: _borders.borderRadius
+    style: borderRadius
   },
   // palette
   color: {
     themeKey: 'palette',
-    transform: _palette.paletteTransform
+    transform: paletteTransform
   },
   bgcolor: {
     themeKey: 'palette',
     cssProperty: 'backgroundColor',
-    transform: _palette.paletteTransform
+    transform: paletteTransform
   },
   backgroundColor: {
     themeKey: 'palette',
-    transform: _palette.paletteTransform
+    transform: paletteTransform
   },
   // spacing
   p: {
-    style: _spacing.padding
+    style: padding
   },
   pt: {
-    style: _spacing.padding
+    style: padding
   },
   pr: {
-    style: _spacing.padding
+    style: padding
   },
   pb: {
-    style: _spacing.padding
+    style: padding
   },
   pl: {
-    style: _spacing.padding
+    style: padding
   },
   px: {
-    style: _spacing.padding
+    style: padding
   },
   py: {
-    style: _spacing.padding
+    style: padding
   },
   padding: {
-    style: _spacing.padding
+    style: padding
   },
   paddingTop: {
-    style: _spacing.padding
+    style: padding
   },
   paddingRight: {
-    style: _spacing.padding
+    style: padding
   },
   paddingBottom: {
-    style: _spacing.padding
+    style: padding
   },
   paddingLeft: {
-    style: _spacing.padding
+    style: padding
   },
   paddingX: {
-    style: _spacing.padding
+    style: padding
   },
   paddingY: {
-    style: _spacing.padding
+    style: padding
   },
   paddingInline: {
-    style: _spacing.padding
+    style: padding
   },
   paddingInlineStart: {
-    style: _spacing.padding
+    style: padding
   },
   paddingInlineEnd: {
-    style: _spacing.padding
+    style: padding
   },
   paddingBlock: {
-    style: _spacing.padding
+    style: padding
   },
   paddingBlockStart: {
-    style: _spacing.padding
+    style: padding
   },
   paddingBlockEnd: {
-    style: _spacing.padding
+    style: padding
   },
   m: {
-    style: _spacing.margin
+    style: margin
   },
   mt: {
-    style: _spacing.margin
+    style: margin
   },
   mr: {
-    style: _spacing.margin
+    style: margin
   },
   mb: {
-    style: _spacing.margin
+    style: margin
   },
   ml: {
-    style: _spacing.margin
+    style: margin
   },
   mx: {
-    style: _spacing.margin
+    style: margin
   },
   my: {
-    style: _spacing.margin
+    style: margin
   },
   margin: {
-    style: _spacing.margin
+    style: margin
   },
   marginTop: {
-    style: _spacing.margin
+    style: margin
   },
   marginRight: {
-    style: _spacing.margin
+    style: margin
   },
   marginBottom: {
-    style: _spacing.margin
+    style: margin
   },
   marginLeft: {
-    style: _spacing.margin
+    style: margin
   },
   marginX: {
-    style: _spacing.margin
+    style: margin
   },
   marginY: {
-    style: _spacing.margin
+    style: margin
   },
   marginInline: {
-    style: _spacing.margin
+    style: margin
   },
   marginInlineStart: {
-    style: _spacing.margin
+    style: margin
   },
   marginInlineEnd: {
-    style: _spacing.margin
+    style: margin
   },
   marginBlock: {
-    style: _spacing.margin
+    style: margin
   },
   marginBlockStart: {
-    style: _spacing.margin
+    style: margin
   },
   marginBlockEnd: {
-    style: _spacing.margin
+    style: margin
   },
   // display
   displayPrint: {
@@ -222,13 +216,13 @@ const defaultSxConfig = {
   justifySelf: {},
   // grid
   gap: {
-    style: _cssGrid.gap
+    style: gap
   },
   rowGap: {
-    style: _cssGrid.rowGap
+    style: rowGap
   },
   columnGap: {
-    style: _cssGrid.columnGap
+    style: columnGap
   },
   gridColumn: {},
   gridRow: {},
@@ -254,22 +248,22 @@ const defaultSxConfig = {
   },
   // sizing
   width: {
-    transform: _sizing.sizingTransform
+    transform: sizingTransform
   },
   maxWidth: {
-    style: _sizing.maxWidth
+    style: maxWidth
   },
   minWidth: {
-    transform: _sizing.sizingTransform
+    transform: sizingTransform
   },
   height: {
-    transform: _sizing.sizingTransform
+    transform: sizingTransform
   },
   maxHeight: {
-    transform: _sizing.sizingTransform
+    transform: sizingTransform
   },
   minHeight: {
-    transform: _sizing.sizingTransform
+    transform: sizingTransform
   },
   boxSizing: {},
   // typography
@@ -294,4 +288,4 @@ const defaultSxConfig = {
     themeKey: 'typography'
   }
 };
-var _default = exports.default = defaultSxConfig;
+export default defaultSxConfig;

package/styleFunctionSx/extendSxProp.js

@@ -1,22 +1,14 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = extendSxProp;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _deepmerge = require("@mui/utils/deepmerge");
-var _defaultSxConfig = _interopRequireDefault(require("./defaultSxConfig"));
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["sx"];
+import { isPlainObject } from '@mui/utils/deepmerge';
+import defaultSxConfig from './defaultSxConfig';
 const splitProps = props => {
-  var _props$theme$unstable, _props$theme;
   const result = {
     systemProps: {},
     otherProps: {}
   };
-  const config = (_props$theme$unstable = props == null || (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : _defaultSxConfig.default;
+  const config = props?.theme?.unstable_sxConfig ?? defaultSxConfig;
   Object.keys(props).forEach(prop => {
     if (config[prop]) {
       result.systemProps[prop] = props[prop];
@@ -26,11 +18,11 @@ const splitProps = props => {
   });
   return result;
 };
-function extendSxProp(props) {
+export default function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     systemProps,
     otherProps
@@ -41,15 +33,15 @@ function extendSxProp(props) {
   } else if (typeof inSx === 'function') {
     finalSx = (...args) => {
       const result = inSx(...args);
-      if (!(0, _deepmerge.isPlainObject)(result)) {
+      if (!isPlainObject(result)) {
         return systemProps;
       }
-      return (0, _extends2.default)({}, systemProps, result);
+      return _extends({}, systemProps, result);
     };
   } else {
-    finalSx = (0, _extends2.default)({}, systemProps, inSx);
+    finalSx = _extends({}, systemProps, inSx);
   }
-  return (0, _extends2.default)({}, otherProps, {
+  return _extends({}, otherProps, {
     sx: finalSx
   });
 }

package/styleFunctionSx/index.js

@@ -1,35 +1,4 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _styleFunctionSx.default;
-  }
-});
-Object.defineProperty(exports, "extendSxProp", {
-  enumerable: true,
-  get: function () {
-    return _extendSxProp.default;
-  }
-});
-Object.defineProperty(exports, "unstable_createStyleFunctionSx", {
-  enumerable: true,
-  get: function () {
-    return _styleFunctionSx.unstable_createStyleFunctionSx;
-  }
-});
-Object.defineProperty(exports, "unstable_defaultSxConfig", {
-  enumerable: true,
-  get: function () {
-    return _defaultSxConfig.default;
-  }
-});
-var _styleFunctionSx = _interopRequireWildcard(require("./styleFunctionSx"));
-var _extendSxProp = _interopRequireDefault(require("./extendSxProp"));
-var _defaultSxConfig = _interopRequireDefault(require("./defaultSxConfig"));
-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; }
+export { default } from './styleFunctionSx';
+export { unstable_createStyleFunctionSx } from './styleFunctionSx';
+export { default as extendSxProp } from './extendSxProp';
+export { default as unstable_defaultSxConfig } from './defaultSxConfig';

package/styleFunctionSx/package.json

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

package/styleFunctionSx/styleFunctionSx.js

@@ -1,16 +1,8 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-exports.unstable_createStyleFunctionSx = unstable_createStyleFunctionSx;
-var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
-var _merge = _interopRequireDefault(require("../merge"));
-var _style = require("../style");
-var _breakpoints = require("../breakpoints");
-var _defaultSxConfig = _interopRequireDefault(require("./defaultSxConfig"));
+import capitalize from '@mui/utils/capitalize';
+import merge from '../merge';
+import { getPath, getStyleValue as getValue } from '../style';
+import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from '../breakpoints';
+import defaultSxConfig from './defaultSxConfig';
 function objectsHaveSameKeys(...objects) {
   const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
   const union = new Set(allKeys);
@@ -21,7 +13,7 @@ function callIfFn(maybeFn, arg) {
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-function unstable_createStyleFunctionSx() {
+export function unstable_createStyleFunctionSx() {
   function getThemeValue(prop, val, theme, config) {
     const props = {
       [prop]: val,
@@ -49,15 +41,15 @@ function unstable_createStyleFunctionSx() {
         [prop]: val
       };
     }
-    const themeMapping = (0, _style.getPath)(theme, themeKey) || {};
+    const themeMapping = getPath(theme, themeKey) || {};
     if (style) {
       return style(props);
     }
     const styleFromPropValue = propValueFinal => {
-      let value = (0, _style.getStyleValue)(themeMapping, transform, propValueFinal);
+      let value = getValue(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === 'string') {
         // Haven't found value
-        value = (0, _style.getStyleValue)(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : (0, _capitalize.default)(propValueFinal)}`, propValueFinal);
+        value = getValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
       }
       if (cssProperty === false) {
         return value;
@@ -66,10 +58,9 @@ function unstable_createStyleFunctionSx() {
         [cssProperty]: value
       };
     };
-    return (0, _breakpoints.handleBreakpoints)(props, val, styleFromPropValue);
+    return handleBreakpoints(props, val, styleFromPropValue);
   }
   function styleFunctionSx(props) {
-    var _theme$unstable_sxCon;
     const {
       sx,
       theme = {}
@@ -77,7 +68,7 @@ function unstable_createStyleFunctionSx() {
     if (!sx) {
       return null; // Emotion & styled-components will neglect null
     }
-    const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : _defaultSxConfig.default;
+    const config = theme.unstable_sxConfig ?? defaultSxConfig;
 
     /*
      * Receive `sxInput` as object or callback
@@ -95,7 +86,7 @@ function unstable_createStyleFunctionSx() {
       if (!sxObject) {
         return null;
       }
-      const emptyBreakpoints = (0, _breakpoints.createEmptyBreakpointObject)(theme.breakpoints);
+      const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
       const breakpointsKeys = Object.keys(emptyBreakpoints);
       let css = emptyBreakpoints;
       Object.keys(sxObject).forEach(styleKey => {
@@ -103,9 +94,9 @@ function unstable_createStyleFunctionSx() {
         if (value !== null && value !== undefined) {
           if (typeof value === 'object') {
             if (config[styleKey]) {
-              css = (0, _merge.default)(css, getThemeValue(styleKey, value, theme, config));
+              css = merge(css, getThemeValue(styleKey, value, theme, config));
             } else {
-              const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
+              const breakpointsValues = handleBreakpoints({
                 theme
               }, value, x => ({
                 [styleKey]: x
@@ -116,15 +107,15 @@ function unstable_createStyleFunctionSx() {
                   theme
                 });
               } else {
-                css = (0, _merge.default)(css, breakpointsValues);
+                css = merge(css, breakpointsValues);
               }
             }
           } else {
-            css = (0, _merge.default)(css, getThemeValue(styleKey, value, theme, config));
+            css = merge(css, getThemeValue(styleKey, value, theme, config));
           }
         }
       });
-      return (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css);
+      return removeUnusedBreakpoints(breakpointsKeys, css);
     }
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
   }
@@ -132,4 +123,4 @@ function unstable_createStyleFunctionSx() {
 }
 const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
-var _default = exports.default = styleFunctionSx;
+export default styleFunctionSx;

package/styled/index.d.ts

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

package/styled/index.js

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

package/styled/package.json

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