@mui/system 5.15.6 → 5.15.8

package/legacy/createStyled.js

@@ -1,12 +1,12 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 /* eslint-disable no-underscore-dangle */
 import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
-import { getDisplayName, unstable_capitalize as capitalize, isPlainObject, deepmerge } from '@mui/utils';
+import { getDisplayName, unstable_capitalize as capitalize, isPlainObject } from '@mui/utils';
 import createTheme from './createTheme';
-import propsToClassKey from './propsToClassKey';
 import styleFunctionSx from './styleFunctionSx';
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
@@ -20,73 +20,6 @@ function isStringTag(tag) {
   // it's a lowercase character
   tag.charCodeAt(0) > 96;
 }
-var getStyleOverrides = function getStyleOverrides(name, theme) {
-  if (theme.components && theme.components[name] && theme.components[name].styleOverrides) {
-    return theme.components[name].styleOverrides;
-  }
-  return null;
-};
-var transformVariants = function transformVariants(variants) {
-  var numOfCallbacks = 0;
-  var variantsStyles = {};
-  if (variants) {
-    variants.forEach(function (definition) {
-      var key = '';
-      if (typeof definition.props === 'function') {
-        key = "callback".concat(numOfCallbacks);
-        numOfCallbacks += 1;
-      } else {
-        key = propsToClassKey(definition.props);
-      }
-      variantsStyles[key] = definition.style;
-    });
-  }
-  return variantsStyles;
-};
-var getVariantStyles = function getVariantStyles(name, theme) {
-  var variants = [];
-  if (theme && theme.components && theme.components[name] && theme.components[name].variants) {
-    variants = theme.components[name].variants;
-  }
-  return transformVariants(variants);
-};
-var variantsResolver = function variantsResolver(props, styles, variants) {
-  var _props$ownerState = props.ownerState,
-    ownerState = _props$ownerState === void 0 ? {} : _props$ownerState;
-  var variantsStyles = [];
-  var numOfCallbacks = 0;
-  if (variants) {
-    variants.forEach(function (variant) {
-      var isMatch = true;
-      if (typeof variant.props === 'function') {
-        var propsToCheck = _extends({}, props, ownerState);
-        isMatch = variant.props(propsToCheck);
-      } else {
-        Object.keys(variant.props).forEach(function (key) {
-          if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
-            isMatch = false;
-          }
-        });
-      }
-      if (isMatch) {
-        if (typeof variant.props === 'function') {
-          variantsStyles.push(styles["callback".concat(numOfCallbacks)]);
-        } else {
-          variantsStyles.push(styles[propsToClassKey(variant.props)]);
-        }
-      }
-      if (typeof variant.props === 'function') {
-        numOfCallbacks += 1;
-      }
-    });
-  }
-  return variantsStyles;
-};
-var themeVariantsResolver = function themeVariantsResolver(props, styles, theme, name) {
-  var _theme$components;
-  var themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[name]) == null ? void 0 : _theme$components.variants;
-  return variantsResolver(props, styles, themeVariants);
-};
 
 // Update /system/styled/#api in case if this changes
 export function shouldForwardProp(prop) {
@@ -113,28 +46,50 @@ function defaultOverridesResolver(slot) {
     return styles[slot];
   };
 }
-var muiStyledFunctionResolver = function muiStyledFunctionResolver(_ref2) {
-  var styledArg = _ref2.styledArg,
-    props = _ref2.props,
-    defaultTheme = _ref2.defaultTheme,
-    themeId = _ref2.themeId;
-  var resolvedStyles = styledArg(_extends({}, props, {
-    theme: resolveTheme(_extends({}, props, {
-      defaultTheme: defaultTheme,
-      themeId: themeId
-    }))
-  }));
-  var optionalVariants;
-  if (resolvedStyles && resolvedStyles.variants) {
-    optionalVariants = resolvedStyles.variants;
-    delete resolvedStyles.variants;
+function processStyleArg(callableStyle, _ref2) {
+  var ownerState = _ref2.ownerState,
+    props = _objectWithoutProperties(_ref2, ["ownerState"]);
+  var resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle(_extends({
+    ownerState: ownerState
+  }, props)) : callableStyle;
+  if (Array.isArray(resolvedStylesArg)) {
+    return resolvedStylesArg.flatMap(function (resolvedStyle) {
+      return processStyleArg(resolvedStyle, _extends({
+        ownerState: ownerState
+      }, props));
+    });
   }
-  if (optionalVariants) {
-    var variantsStyles = variantsResolver(props, transformVariants(optionalVariants), optionalVariants);
-    return [resolvedStyles].concat(_toConsumableArray(variantsStyles));
+  if (!!resolvedStylesArg && _typeof(resolvedStylesArg) === 'object' && Array.isArray(resolvedStylesArg.variants)) {
+    var _resolvedStylesArg$va = resolvedStylesArg.variants,
+      variants = _resolvedStylesArg$va === void 0 ? [] : _resolvedStylesArg$va,
+      otherStyles = _objectWithoutProperties(resolvedStylesArg, ["variants"]);
+    var result = otherStyles;
+    variants.forEach(function (variant) {
+      var isMatch = true;
+      if (typeof variant.props === 'function') {
+        isMatch = variant.props(_extends({
+          ownerState: ownerState
+        }, props));
+      } else {
+        Object.keys(variant.props).forEach(function (key) {
+          if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
+            isMatch = false;
+          }
+        });
+      }
+      if (isMatch) {
+        if (!Array.isArray(result)) {
+          result = [result];
+        }
+        result.push(typeof variant.style === 'function' ? variant.style(_extends({
+          ownerState: ownerState
+        }, props)) : variant.style);
+      }
+    });
+    return result;
   }
-  return resolvedStyles;
-};
+  return resolvedStylesArg;
+}
 export default function createStyled() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var themeId = input.themeId,
@@ -198,102 +153,65 @@ export default function createStyled() {
       shouldForwardProp: shouldForwardPropOption,
       label: label
     }, options));
-    var muiStyledResolver = function muiStyledResolver(styleArg) {
-      for (var _len = arguments.length, expressions = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        expressions[_key - 1] = arguments[_key];
-      }
-      var expressionsWithDefaultTheme = expressions ? expressions.map(function (stylesArg) {
-        // 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.
-        if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg) {
-          return function (props) {
-            return muiStyledFunctionResolver({
-              styledArg: stylesArg,
-              props: props,
-              defaultTheme: defaultTheme,
-              themeId: themeId
-            });
-          };
-        }
-        if (isPlainObject(stylesArg)) {
-          var transformedStylesArg = stylesArg;
-          var styledArgVariants;
-          if (stylesArg && stylesArg.variants) {
-            styledArgVariants = stylesArg.variants;
-            delete transformedStylesArg.variants;
-            transformedStylesArg = function transformedStylesArg(props) {
-              var result = stylesArg;
-              var variantStyles = variantsResolver(props, transformVariants(styledArgVariants), styledArgVariants);
-              variantStyles.forEach(function (variantStyle) {
-                result = deepmerge(result, variantStyle);
-              });
-              return result;
-            };
-          }
-          return transformedStylesArg;
-        }
-        return stylesArg;
-      }) : [];
-      var transformedStyleArg = styleArg;
-      if (isPlainObject(styleArg)) {
-        var styledArgVariants;
-        if (styleArg && styleArg.variants) {
-          styledArgVariants = styleArg.variants;
-          delete transformedStyleArg.variants;
-          transformedStyleArg = function transformedStyleArg(props) {
-            var result = styleArg;
-            var variantStyles = variantsResolver(props, transformVariants(styledArgVariants), styledArgVariants);
-            variantStyles.forEach(function (variantStyle) {
-              result = deepmerge(result, variantStyle);
-            });
-            return result;
-          };
-        }
-      } else if (typeof styleArg === 'function' &&
+    var transformStyleArg = function transformStyleArg(stylesArg) {
       // 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 = function transformedStyleArg(props) {
-          return muiStyledFunctionResolver({
-            styledArg: styleArg,
-            props: props,
-            defaultTheme: defaultTheme,
-            themeId: themeId
-          });
+      if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || isPlainObject(stylesArg)) {
+        return function (props) {
+          return processStyleArg(stylesArg, _extends({}, props, {
+            theme: resolveTheme({
+              theme: props.theme,
+              defaultTheme: defaultTheme,
+              themeId: themeId
+            })
+          }));
         };
       }
+      return stylesArg;
+    };
+    var muiStyledResolver = function muiStyledResolver(styleArg) {
+      var transformedStyleArg = transformStyleArg(styleArg);
+      for (var _len = arguments.length, expressions = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        expressions[_key - 1] = arguments[_key];
+      }
+      var expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(function (props) {
           var theme = resolveTheme(_extends({}, props, {
             defaultTheme: defaultTheme,
             themeId: themeId
           }));
-          var styleOverrides = getStyleOverrides(componentName, theme);
-          if (styleOverrides) {
-            var resolvedStyleOverrides = {};
-            Object.entries(styleOverrides).forEach(function (_ref3) {
-              var _ref4 = _slicedToArray(_ref3, 2),
-                slotKey = _ref4[0],
-                slotStyle = _ref4[1];
-              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends({}, props, {
-                theme: theme
-              })) : slotStyle;
-            });
-            return overridesResolver(props, resolvedStyleOverrides);
+          if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
+            return null;
           }
-          return null;
+          var styleOverrides = theme.components[componentName].styleOverrides;
+          var resolvedStyleOverrides = {};
+          // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
+          Object.entries(styleOverrides).forEach(function (_ref3) {
+            var _ref4 = _slicedToArray(_ref3, 2),
+              slotKey = _ref4[0],
+              slotStyle = _ref4[1];
+            resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, _extends({}, props, {
+              theme: theme
+            }));
+          });
+          return overridesResolver(props, resolvedStyleOverrides);
         });
       }
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(function (props) {
+          var _theme$components;
           var theme = resolveTheme(_extends({}, props, {
             defaultTheme: defaultTheme,
             themeId: themeId
           }));
-          return themeVariantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
+          var themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[componentName]) == null ? void 0 : _theme$components.variants;
+          return processStyleArg({
+            variants: themeVariants
+          }, _extends({}, props, {
+            theme: theme
+          }));
         });
       }
       if (!skipSx) {

package/legacy/createTheme/applyStyles.js

@@ -0,0 +1,73 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+/**
+ * A universal utility to style components with multiple color modes. Always use it from the theme object.
+ * It works with:
+ *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
+ *  - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
+ *  - Zero-runtime engine
+ *
+ * Tips: Use an array over object spread and place `theme.applyStyles()` last.
+ *
+ * ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
+ *
+ * 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
+ *
+ * @example
+ * 1. using with `styled`:
+ * ```jsx
+ *   const Component = styled('div')(({ theme }) => [
+ *     { background: '#e5e5e5' },
+ *     theme.applyStyles('dark', {
+ *       background: '#1c1c1c',
+ *       color: '#fff',
+ *     }),
+ *   ]);
+ * ```
+ *
+ * @example
+ * 2. using with `sx` prop:
+ * ```jsx
+ *   <Box sx={theme => [
+ *     { background: '#e5e5e5' },
+ *     theme.applyStyles('dark', {
+ *        background: '#1c1c1c',
+ *        color: '#fff',
+ *      }),
+ *     ]}
+ *   />
+ * ```
+ *
+ * @example
+ * 3. theming a component:
+ * ```jsx
+ *   extendTheme({
+ *     components: {
+ *       MuiButton: {
+ *         styleOverrides: {
+ *           root: ({ theme }) => [
+ *             { background: '#e5e5e5' },
+ *             theme.applyStyles('dark', {
+ *               background: '#1c1c1c',
+ *               color: '#fff',
+ *             }),
+ *           ],
+ *         },
+ *       }
+ *     }
+ *   })
+ *```
+ */
+export default function applyStyles(key, styles) {
+  // @ts-expect-error this is 'any' type
+  var theme = this;
+  if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {
+    // If CssVarsProvider is used as a provider,
+    // returns '* :where([data-mui-color-scheme="light|dark"]) &'
+    var selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, '*:where($1)');
+    return _defineProperty({}, selector, styles);
+  }
+  if (theme.palette.mode === key) {
+    return styles;
+  }
+  return {};
+}

package/legacy/createTheme/createTheme.js

@@ -6,6 +6,7 @@ import shape from './shape';
 import createSpacing from './createSpacing';
 import styleFunctionSx from '../styleFunctionSx/styleFunctionSx';
 import defaultSxConfig from '../styleFunctionSx/defaultSxConfig';
+import applyStyles from './applyStyles';
 function createTheme() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _options$breakpoints = options.breakpoints,
@@ -29,6 +30,7 @@ function createTheme() {
     spacing: spacing,
     shape: _extends({}, shape, shapeInput)
   }, other);
+  muiTheme.applyStyles = applyStyles;
   for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     args[_key - 1] = arguments[_key];
   }

package/legacy/createTheme/index.js

@@ -1,2 +1,3 @@
 export { default } from './createTheme';
-export { default as private_createBreakpoints } from './createBreakpoints';
+export { default as private_createBreakpoints } from './createBreakpoints';
+export { default as unstable_applyStyles } from './applyStyles';

package/legacy/index.js

@@ -1,12 +1,10 @@
 /**
- * @mui/system v5.15.6
+ * @mui/system v5.15.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use client';
-
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export { css, keyframes, StyledEngineProvider } from '@mui/styled-engine';
 export { default as GlobalStyles } from './GlobalStyles';

package/modern/colorManipulator.js

@@ -323,4 +323,23 @@ export function private_safeEmphasize(color, coefficient, warning) {
     }
     return color;
   }
+}
+
+/**
+ * Blend a transparent overlay color with a background color, resulting in a single
+ * RGB color.
+ * @param {string} background - CSS color
+ * @param {string} overlay - CSS color
+ * @param {number} opacity - Opacity multiplier in the range 0 - 1
+ * @param {number} [gamma=1.0] - Gamma correction factor. For gamma-correct blending, 2.2 is usual.
+ */
+export function blend(background, overlay, opacity, gamma = 1.0) {
+  const blendChannel = (b, o) => Math.round((b ** (1 / gamma) * (1 - opacity) + o ** (1 / gamma) * opacity) ** gamma);
+  const backgroundColor = decomposeColor(background);
+  const overlayColor = decomposeColor(overlay);
+  const rgb = [blendChannel(backgroundColor.values[0], overlayColor.values[0]), blendChannel(backgroundColor.values[1], overlayColor.values[1]), blendChannel(backgroundColor.values[2], overlayColor.values[2])];
+  return recomposeColor({
+    type: 'rgb',
+    values: rgb
+  });
 }