@mui/system 5.14.11 → 5.14.12

package/modern/createStyled.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 /* eslint-disable no-underscore-dangle */
 import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
-import { getDisplayName, unstable_capitalize as capitalize } from '@mui/utils';
+import { getDisplayName, unstable_capitalize as capitalize, isPlainObject, deepmerge } from '@mui/utils';
 import createTheme from './createTheme';
 import propsToClassKey from './propsToClassKey';
 import styleFunctionSx from './styleFunctionSx';
@@ -25,39 +25,47 @@ const getStyleOverrides = (name, theme) => {
   }
   return null;
 };
+const transformVariants = variants => {
+  const variantsStyles = {};
+  if (variants) {
+    variants.forEach(definition => {
+      const key = propsToClassKey(definition.props);
+      variantsStyles[key] = definition.style;
+    });
+  }
+  return variantsStyles;
+};
 const getVariantStyles = (name, theme) => {
   let variants = [];
   if (theme && theme.components && theme.components[name] && theme.components[name].variants) {
     variants = theme.components[name].variants;
   }
-  const variantsStyles = {};
-  variants.forEach(definition => {
-    const key = propsToClassKey(definition.props);
-    variantsStyles[key] = definition.style;
-  });
-  return variantsStyles;
+  return transformVariants(variants);
 };
-const variantsResolver = (props, styles, theme, name) => {
+const variantsResolver = (props, styles, variants) => {
   const {
     ownerState = {}
   } = props;
   const variantsStyles = [];
-  const themeVariants = theme?.components?.[name]?.variants;
-  if (themeVariants) {
-    themeVariants.forEach(themeVariant => {
+  if (variants) {
+    variants.forEach(variant => {
       let isMatch = true;
-      Object.keys(themeVariant.props).forEach(key => {
-        if (ownerState[key] !== themeVariant.props[key] && props[key] !== themeVariant.props[key]) {
+      Object.keys(variant.props).forEach(key => {
+        if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
           isMatch = false;
         }
       });
       if (isMatch) {
-        variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);
+        variantsStyles.push(styles[propsToClassKey(variant.props)]);
       }
     });
   }
   return variantsStyles;
 };
+const themeVariantsResolver = (props, styles, theme, name) => {
+  const themeVariants = theme?.components?.[name]?.variants;
+  return variantsResolver(props, styles, themeVariants);
+};
 
 // Update /system/styled/#api in case if this changes
 export function shouldForwardProp(prop) {
@@ -83,6 +91,29 @@ function defaultOverridesResolver(slot) {
   }
   return (props, styles) => styles[slot];
 }
+const muiStyledFunctionResolver = ({
+  styledArg,
+  props,
+  defaultTheme,
+  themeId
+}) => {
+  const resolvedStyles = styledArg(_extends({}, props, {
+    theme: resolveTheme(_extends({}, props, {
+      defaultTheme,
+      themeId
+    }))
+  }));
+  let optionalVariants;
+  if (resolvedStyles && resolvedStyles.variants) {
+    optionalVariants = resolvedStyles.variants;
+    delete resolvedStyles.variants;
+  }
+  if (optionalVariants) {
+    const variantsStyles = variantsResolver(props, transformVariants(optionalVariants), optionalVariants);
+    return [resolvedStyles, ...variantsStyles];
+  }
+  return resolvedStyles;
+};
 export default function createStyled(input = {}) {
   const {
     themeId,
@@ -149,16 +180,61 @@ export default function createStyled(input = {}) {
         // On the server Emotion doesn't use React.forwardRef for creating components, so the created
         // component stays as a function. This condition makes sure that we do not interpolate functions
         // which are basically components used as a selectors.
-        return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? props => {
-          return stylesArg(_extends({}, props, {
-            theme: resolveTheme(_extends({}, props, {
-              defaultTheme,
-              themeId
-            }))
-          }));
-        } : stylesArg;
+        if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg) {
+          return props => muiStyledFunctionResolver({
+            styledArg: stylesArg,
+            props,
+            defaultTheme,
+            themeId
+          });
+        }
+        if (isPlainObject(stylesArg)) {
+          let transformedStylesArg = stylesArg;
+          let styledArgVariants;
+          if (stylesArg && stylesArg.variants) {
+            styledArgVariants = stylesArg.variants;
+            delete transformedStylesArg.variants;
+            transformedStylesArg = props => {
+              let result = stylesArg;
+              const variantStyles = variantsResolver(props, transformVariants(styledArgVariants), styledArgVariants);
+              variantStyles.forEach(variantStyle => {
+                result = deepmerge(result, variantStyle);
+              });
+              return result;
+            };
+          }
+          return transformedStylesArg;
+        }
+        return stylesArg;
       }) : [];
       let transformedStyleArg = styleArg;
+      if (isPlainObject(styleArg)) {
+        let styledArgVariants;
+        if (styleArg && styleArg.variants) {
+          styledArgVariants = styleArg.variants;
+          delete transformedStyleArg.variants;
+          transformedStyleArg = props => {
+            let result = styleArg;
+            const variantStyles = variantsResolver(props, transformVariants(styledArgVariants), styledArgVariants);
+            variantStyles.forEach(variantStyle => {
+              result = deepmerge(result, variantStyle);
+            });
+            return result;
+          };
+        }
+      } else if (typeof styleArg === 'function' &&
+      // On the server Emotion doesn't use React.forwardRef for creating components, so the created
+      // component stays as a function. This condition makes sure that we do not interpolate functions
+      // which are basically components used as a selectors.
+      styleArg.__emotion_real !== styleArg) {
+        // If the type is function, we need to define the default theme.
+        transformedStyleArg = props => muiStyledFunctionResolver({
+          styledArg: styleArg,
+          props,
+          defaultTheme,
+          themeId
+        });
+      }
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
           const theme = resolveTheme(_extends({}, props, {
@@ -184,7 +260,7 @@ export default function createStyled(input = {}) {
             defaultTheme,
             themeId
           }));
-          return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
+          return themeVariantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
         });
       }
       if (!skipSx) {
@@ -196,18 +272,6 @@ export default function createStyled(input = {}) {
         // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
         transformedStyleArg = [...styleArg, ...placeholders];
         transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
-      } else if (typeof styleArg === 'function' &&
-      // On the server Emotion doesn't use React.forwardRef for creating components, so the created
-      // component stays as a function. This condition makes sure that we do not interpolate functions
-      // which are basically components used as a selectors.
-      styleArg.__emotion_real !== styleArg) {
-        // If the type is function, we need to define the default theme.
-        transformedStyleArg = props => styleArg(_extends({}, props, {
-          theme: resolveTheme(_extends({}, props, {
-            defaultTheme,
-            themeId
-          }))
-        }));
       }
       const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
       if (process.env.NODE_ENV !== 'production') {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.14.11
+ * @mui/system v5.14.12
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.14.11",
+  "version": "5.14.12",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -26,11 +26,11 @@
     "url": "https://opencollective.com/mui"
   },
   "dependencies": {
-    "@babel/runtime": "^7.22.15",
-    "@mui/private-theming": "^5.14.11",
-    "@mui/styled-engine": "^5.14.11",
-    "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.14.11",
+    "@babel/runtime": "^7.23.1",
+    "@mui/private-theming": "^5.14.12",
+    "@mui/styled-engine": "^5.14.12",
+    "@mui/types": "^7.2.5",
+    "@mui/utils": "^5.14.12",
     "clsx": "^2.0.0",
     "csstype": "^3.1.2",
     "prop-types": "^15.8.1"

package/palette.js

@@ -14,25 +14,21 @@ function paletteTransform(value, userValue) {
   }
   return value;
 }
-const color = (0, _style.default)({
+const color = exports.color = (0, _style.default)({
   prop: 'color',
   themeKey: 'palette',
   transform: paletteTransform
 });
-exports.color = color;
-const bgcolor = (0, _style.default)({
+const bgcolor = exports.bgcolor = (0, _style.default)({
   prop: 'bgcolor',
   cssProperty: 'backgroundColor',
   themeKey: 'palette',
   transform: paletteTransform
 });
-exports.bgcolor = bgcolor;
-const backgroundColor = (0, _style.default)({
+const backgroundColor = exports.backgroundColor = (0, _style.default)({
   prop: 'backgroundColor',
   themeKey: 'palette',
   transform: paletteTransform
 });
-exports.backgroundColor = backgroundColor;
 const palette = (0, _compose.default)(color, bgcolor, backgroundColor);
-var _default = palette;
-exports.default = _default;
+var _default = exports.default = palette;

package/positions.js

@@ -7,30 +7,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.zIndex = exports.top = exports.right = exports.position = exports.left = exports.default = exports.bottom = void 0;
 var _style = _interopRequireDefault(require("./style"));
 var _compose = _interopRequireDefault(require("./compose"));
-const position = (0, _style.default)({
+const position = exports.position = (0, _style.default)({
   prop: 'position'
 });
-exports.position = position;
-const zIndex = (0, _style.default)({
+const zIndex = exports.zIndex = (0, _style.default)({
   prop: 'zIndex',
   themeKey: 'zIndex'
 });
-exports.zIndex = zIndex;
-const top = (0, _style.default)({
+const top = exports.top = (0, _style.default)({
   prop: 'top'
 });
-exports.top = top;
-const right = (0, _style.default)({
+const right = exports.right = (0, _style.default)({
   prop: 'right'
 });
-exports.right = right;
-const bottom = (0, _style.default)({
+const bottom = exports.bottom = (0, _style.default)({
   prop: 'bottom'
 });
-exports.bottom = bottom;
-const left = (0, _style.default)({
+const left = exports.left = (0, _style.default)({
   prop: 'left'
 });
-exports.left = left;
-var _default = (0, _compose.default)(position, zIndex, top, right, bottom, left);
-exports.default = _default;
+var _default = exports.default = (0, _compose.default)(position, zIndex, top, right, bottom, left);

package/responsivePropType.js

@@ -7,5 +7,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 const responsivePropType = process.env.NODE_ENV !== 'production' ? _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.object, _propTypes.default.array]) : {};
-var _default = responsivePropType;
-exports.default = _default;
+var _default = exports.default = responsivePropType;

package/shadows.js

@@ -10,5 +10,4 @@ const boxShadow = (0, _style.default)({
   prop: 'boxShadow',
   themeKey: 'shadows'
 });
-var _default = boxShadow;
-exports.default = _default;
+var _default = exports.default = boxShadow;

package/sizing.js

@@ -13,11 +13,10 @@ var _breakpoints = require("./breakpoints");
 function sizingTransform(value) {
   return value <= 1 && value !== 0 ? `${value * 100}%` : value;
 }
-const width = (0, _style.default)({
+const width = exports.width = (0, _style.default)({
   prop: 'width',
   transform: sizingTransform
 });
-exports.width = width;
 const maxWidth = props => {
   if (props.maxWidth !== undefined && props.maxWidth !== null) {
     const styleFromPropValue = propValue => {
@@ -43,42 +42,34 @@ const maxWidth = props => {
 };
 exports.maxWidth = maxWidth;
 maxWidth.filterProps = ['maxWidth'];
-const minWidth = (0, _style.default)({
+const minWidth = exports.minWidth = (0, _style.default)({
   prop: 'minWidth',
   transform: sizingTransform
 });
-exports.minWidth = minWidth;
-const height = (0, _style.default)({
+const height = exports.height = (0, _style.default)({
   prop: 'height',
   transform: sizingTransform
 });
-exports.height = height;
-const maxHeight = (0, _style.default)({
+const maxHeight = exports.maxHeight = (0, _style.default)({
   prop: 'maxHeight',
   transform: sizingTransform
 });
-exports.maxHeight = maxHeight;
-const minHeight = (0, _style.default)({
+const minHeight = exports.minHeight = (0, _style.default)({
   prop: 'minHeight',
   transform: sizingTransform
 });
-exports.minHeight = minHeight;
-const sizeWidth = (0, _style.default)({
+const sizeWidth = exports.sizeWidth = (0, _style.default)({
   prop: 'size',
   cssProperty: 'width',
   transform: sizingTransform
 });
-exports.sizeWidth = sizeWidth;
-const sizeHeight = (0, _style.default)({
+const sizeHeight = exports.sizeHeight = (0, _style.default)({
   prop: 'size',
   cssProperty: 'height',
   transform: sizingTransform
 });
-exports.sizeHeight = sizeHeight;
-const boxSizing = (0, _style.default)({
+const boxSizing = exports.boxSizing = (0, _style.default)({
   prop: 'boxSizing'
 });
-exports.boxSizing = boxSizing;
 const sizing = (0, _compose.default)(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
-var _default = sizing;
-exports.default = _default;
+var _default = exports.default = sizing;

package/spacing.js

@@ -54,10 +54,8 @@ const getCssProperties = (0, _memoize.default)(prop => {
   const direction = directions[b] || '';
   return Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
 });
-const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
-exports.marginKeys = marginKeys;
-const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
-exports.paddingKeys = paddingKeys;
+const marginKeys = exports.marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
+const paddingKeys = exports.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];
 function createUnaryUnit(theme, themeKey, defaultValue, propName) {
   var _getPath;
@@ -160,5 +158,4 @@ spacing.propTypes = process.env.NODE_ENV !== 'production' ? spacingKeys.reduce((
   return obj;
 }, {}) : {};
 spacing.filterProps = spacingKeys;
-var _default = spacing;
-exports.default = _default;
+var _default = exports.default = spacing;

package/style.js

@@ -81,5 +81,4 @@ function style(options) {
   fn.filterProps = [prop];
   return fn;
 }
-var _default = style;
-exports.default = _default;
+var _default = exports.default = style;

package/styleFunctionSx/defaultSxConfig.js

@@ -287,5 +287,4 @@ const defaultSxConfig = {
     themeKey: 'typography'
   }
 };
-var _default = defaultSxConfig;
-exports.default = _default;
+var _default = exports.default = defaultSxConfig;

package/styleFunctionSx/styleFunctionSx.js

@@ -133,5 +133,4 @@ function unstable_createStyleFunctionSx() {
 }
 const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
-var _default = styleFunctionSx;
-exports.default = _default;
+var _default = exports.default = styleFunctionSx;

package/styled.js

@@ -7,5 +7,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _createStyled = _interopRequireDefault(require("./createStyled"));
 const styled = (0, _createStyled.default)();
-var _default = styled;
-exports.default = _default;
+var _default = exports.default = styled;

package/typography.js

@@ -7,48 +7,38 @@ Object.defineProperty(exports, "__esModule", {
 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 = (0, _style.default)({
+const fontFamily = exports.fontFamily = (0, _style.default)({
   prop: 'fontFamily',
   themeKey: 'typography'
 });
-exports.fontFamily = fontFamily;
-const fontSize = (0, _style.default)({
+const fontSize = exports.fontSize = (0, _style.default)({
   prop: 'fontSize',
   themeKey: 'typography'
 });
-exports.fontSize = fontSize;
-const fontStyle = (0, _style.default)({
+const fontStyle = exports.fontStyle = (0, _style.default)({
   prop: 'fontStyle',
   themeKey: 'typography'
 });
-exports.fontStyle = fontStyle;
-const fontWeight = (0, _style.default)({
+const fontWeight = exports.fontWeight = (0, _style.default)({
   prop: 'fontWeight',
   themeKey: 'typography'
 });
-exports.fontWeight = fontWeight;
-const letterSpacing = (0, _style.default)({
+const letterSpacing = exports.letterSpacing = (0, _style.default)({
   prop: 'letterSpacing'
 });
-exports.letterSpacing = letterSpacing;
-const textTransform = (0, _style.default)({
+const textTransform = exports.textTransform = (0, _style.default)({
   prop: 'textTransform'
 });
-exports.textTransform = textTransform;
-const lineHeight = (0, _style.default)({
+const lineHeight = exports.lineHeight = (0, _style.default)({
   prop: 'lineHeight'
 });
-exports.lineHeight = lineHeight;
-const textAlign = (0, _style.default)({
+const textAlign = exports.textAlign = (0, _style.default)({
   prop: 'textAlign'
 });
-exports.textAlign = textAlign;
-const typographyVariant = (0, _style.default)({
+const typographyVariant = exports.typographyVariant = (0, _style.default)({
   prop: 'typography',
   cssProperty: false,
   themeKey: 'typography'
 });
-exports.typographyVariant = typographyVariant;
 const typography = (0, _compose.default)(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textTransform);
-var _default = typography;
-exports.default = _default;
+var _default = exports.default = typography;

package/useTheme.js

@@ -8,10 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.systemDefaultTheme = exports.default = void 0;
 var _createTheme = _interopRequireDefault(require("./createTheme"));
 var _useThemeWithoutDefault = _interopRequireDefault(require("./useThemeWithoutDefault"));
-const systemDefaultTheme = (0, _createTheme.default)();
-exports.systemDefaultTheme = systemDefaultTheme;
+const systemDefaultTheme = exports.systemDefaultTheme = (0, _createTheme.default)();
 function useTheme(defaultTheme = systemDefaultTheme) {
   return (0, _useThemeWithoutDefault.default)(defaultTheme);
 }
-var _default = useTheme;
-exports.default = _default;
+var _default = exports.default = useTheme;

package/useThemeWithoutDefault.js

@@ -16,5 +16,4 @@ function useTheme(defaultTheme = null) {
   const contextTheme = React.useContext(_styledEngine.ThemeContext);
   return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
 }
-var _default = useTheme;
-exports.default = _default;
+var _default = exports.default = useTheme;