@mui/system 6.1.2 → 6.1.4

package/styleFunctionSx/defaultSxConfig.js

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

package/styleFunctionSx/extendSxProp.js

@@ -1,11 +1,18 @@
-import { isPlainObject } from '@mui/utils/deepmerge';
-import defaultSxConfig from "./defaultSxConfig.js";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = extendSxProp;
+var _deepmerge = require("@mui/utils/deepmerge");
+var _defaultSxConfig = _interopRequireDefault(require("./defaultSxConfig"));
 const splitProps = props => {
   const result = {
     systemProps: {},
     otherProps: {}
   };
-  const config = props?.theme?.unstable_sxConfig ?? defaultSxConfig;
+  const config = props?.theme?.unstable_sxConfig ?? _defaultSxConfig.default;
   Object.keys(props).forEach(prop => {
     if (config[prop]) {
       result.systemProps[prop] = props[prop];
@@ -15,7 +22,7 @@ const splitProps = props => {
   });
   return result;
 };
-export default function extendSxProp(props) {
+function extendSxProp(props) {
   const {
     sx: inSx,
     ...other
@@ -30,7 +37,7 @@ export default function extendSxProp(props) {
   } else if (typeof inSx === 'function') {
     finalSx = (...args) => {
       const result = inSx(...args);
-      if (!isPlainObject(result)) {
+      if (!(0, _deepmerge.isPlainObject)(result)) {
         return systemProps;
       }
       return {

package/styleFunctionSx/index.js

@@ -1,4 +1,34 @@
-export { default } from "./styleFunctionSx.js";
-export { unstable_createStyleFunctionSx } from "./styleFunctionSx.js";
-export { default as extendSxProp } from "./extendSxProp.js";
-export { default as unstable_defaultSxConfig } from "./defaultSxConfig.js";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+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"));

package/styleFunctionSx/package.json

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

package/styleFunctionSx/styleFunctionSx.d.ts

@@ -51,7 +51,7 @@ export type SystemCssProperties<Theme extends object = {}> = {
   [K in keyof AllSystemCSSProperties]:
     | ResponsiveStyleValue<AllSystemCSSProperties[K]>
     | ((theme: Theme) => ResponsiveStyleValue<AllSystemCSSProperties[K]>)
-    | SystemStyleObject<Theme>;
+    | null;
 };
 
 /**

package/styleFunctionSx/styleFunctionSx.js

@@ -1,9 +1,17 @@
-import capitalize from '@mui/utils/capitalize';
-import merge from "../merge/index.js";
-import { getPath, getStyleValue as getValue } from "../style/index.js";
-import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from "../breakpoints/index.js";
-import { sortContainerQueries } from "../cssContainerQueries/index.js";
-import defaultSxConfig from "./defaultSxConfig.js";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+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 _cssContainerQueries = require("../cssContainerQueries");
+var _defaultSxConfig = _interopRequireDefault(require("./defaultSxConfig"));
 function objectsHaveSameKeys(...objects) {
   const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
   const union = new Set(allKeys);
@@ -14,7 +22,7 @@ function callIfFn(maybeFn, arg) {
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export function unstable_createStyleFunctionSx() {
+function unstable_createStyleFunctionSx() {
   function getThemeValue(prop, val, theme, config) {
     const props = {
       [prop]: val,
@@ -42,15 +50,15 @@ export function unstable_createStyleFunctionSx() {
         [prop]: val
       };
     }
-    const themeMapping = getPath(theme, themeKey) || {};
+    const themeMapping = (0, _style.getPath)(theme, themeKey) || {};
     if (style) {
       return style(props);
     }
     const styleFromPropValue = propValueFinal => {
-      let value = getValue(themeMapping, transform, propValueFinal);
+      let value = (0, _style.getStyleValue)(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === 'string') {
         // Haven't found value
-        value = getValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
+        value = (0, _style.getStyleValue)(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : (0, _capitalize.default)(propValueFinal)}`, propValueFinal);
       }
       if (cssProperty === false) {
         return value;
@@ -59,7 +67,7 @@ export function unstable_createStyleFunctionSx() {
         [cssProperty]: value
       };
     };
-    return handleBreakpoints(props, val, styleFromPropValue);
+    return (0, _breakpoints.handleBreakpoints)(props, val, styleFromPropValue);
   }
   function styleFunctionSx(props) {
     const {
@@ -69,7 +77,7 @@ export function unstable_createStyleFunctionSx() {
     if (!sx) {
       return null; // Emotion & styled-components will neglect null
     }
-    const config = theme.unstable_sxConfig ?? defaultSxConfig;
+    const config = theme.unstable_sxConfig ?? _defaultSxConfig.default;
 
     /*
      * Receive `sxInput` as object or callback
@@ -87,7 +95,7 @@ export function unstable_createStyleFunctionSx() {
       if (!sxObject) {
         return null;
       }
-      const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
+      const emptyBreakpoints = (0, _breakpoints.createEmptyBreakpointObject)(theme.breakpoints);
       const breakpointsKeys = Object.keys(emptyBreakpoints);
       let css = emptyBreakpoints;
       Object.keys(sxObject).forEach(styleKey => {
@@ -95,9 +103,9 @@ export function unstable_createStyleFunctionSx() {
         if (value !== null && value !== undefined) {
           if (typeof value === 'object') {
             if (config[styleKey]) {
-              css = merge(css, getThemeValue(styleKey, value, theme, config));
+              css = (0, _merge.default)(css, getThemeValue(styleKey, value, theme, config));
             } else {
-              const breakpointsValues = handleBreakpoints({
+              const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
                 theme
               }, value, x => ({
                 [styleKey]: x
@@ -108,15 +116,15 @@ export function unstable_createStyleFunctionSx() {
                   theme
                 });
               } else {
-                css = merge(css, breakpointsValues);
+                css = (0, _merge.default)(css, breakpointsValues);
               }
             }
           } else {
-            css = merge(css, getThemeValue(styleKey, value, theme, config));
+            css = (0, _merge.default)(css, getThemeValue(styleKey, value, theme, config));
           }
         }
       });
-      return sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css));
+      return (0, _cssContainerQueries.sortContainerQueries)(theme, (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css));
     }
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
   }
@@ -124,4 +132,4 @@ export function unstable_createStyleFunctionSx() {
 }
 const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
-export default styleFunctionSx;
+var _default = exports.default = styleFunctionSx;

package/styled/index.js

@@ -1 +1,13 @@
-export { default } from "./styled.js";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _styled.default;
+  }
+});
+var _styled = _interopRequireDefault(require("./styled"));

package/styled/package.json

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

package/styled/styled.js

@@ -1,3 +1,10 @@
-import createStyled from "../createStyled/index.js";
-const styled = createStyled();
-export default styled;
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createStyled = _interopRequireDefault(require("../createStyled"));
+const styled = (0, _createStyled.default)();
+var _default = exports.default = styled;

package/typography/index.js

@@ -1,2 +1,25 @@
-export { default } from "./typography.js";
-export * from "./typography.js";
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _typography.default;
+  }
+});
+var _typography = _interopRequireWildcard(require("./typography"));
+Object.keys(_typography).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _typography[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _typography[key];
+    }
+  });
+});

package/typography/package.json

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

package/typography/typography.js

@@ -1,37 +1,44 @@
-import style from "../style/index.js";
-import compose from "../compose/index.js";
-export const fontFamily = style({
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.typographyVariant = exports.textTransform = exports.textAlign = exports.lineHeight = exports.letterSpacing = exports.fontWeight = exports.fontStyle = exports.fontSize = exports.fontFamily = exports.default = void 0;
+var _style = _interopRequireDefault(require("../style"));
+var _compose = _interopRequireDefault(require("../compose"));
+const fontFamily = exports.fontFamily = (0, _style.default)({
   prop: 'fontFamily',
   themeKey: 'typography'
 });
-export const fontSize = style({
+const fontSize = exports.fontSize = (0, _style.default)({
   prop: 'fontSize',
   themeKey: 'typography'
 });
-export const fontStyle = style({
+const fontStyle = exports.fontStyle = (0, _style.default)({
   prop: 'fontStyle',
   themeKey: 'typography'
 });
-export const fontWeight = style({
+const fontWeight = exports.fontWeight = (0, _style.default)({
   prop: 'fontWeight',
   themeKey: 'typography'
 });
-export const letterSpacing = style({
+const letterSpacing = exports.letterSpacing = (0, _style.default)({
   prop: 'letterSpacing'
 });
-export const textTransform = style({
+const textTransform = exports.textTransform = (0, _style.default)({
   prop: 'textTransform'
 });
-export const lineHeight = style({
+const lineHeight = exports.lineHeight = (0, _style.default)({
   prop: 'lineHeight'
 });
-export const textAlign = style({
+const textAlign = exports.textAlign = (0, _style.default)({
   prop: 'textAlign'
 });
-export const typographyVariant = style({
+const typographyVariant = exports.typographyVariant = (0, _style.default)({
   prop: 'typography',
   cssProperty: false,
   themeKey: 'typography'
 });
-const typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textTransform);
-export default typography;
+const typography = (0, _compose.default)(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textTransform);
+var _default = exports.default = typography;

package/useMediaQuery/index.js

@@ -1,2 +1,25 @@
-export { default } from "./useMediaQuery.js";
-export * from "./useMediaQuery.js";
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useMediaQuery.default;
+  }
+});
+var _useMediaQuery = _interopRequireWildcard(require("./useMediaQuery"));
+Object.keys(_useMediaQuery).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useMediaQuery[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useMediaQuery[key];
+    }
+  });
+});