@mui/system 5.15.7 → 5.15.8

package/CHANGELOG.md

@@ -1,5 +1,84 @@
 # [Versions](https://mui.com/versions/)
 
+## v5.15.8<!-- generated comparing v5.15.7..master -->
+
+_Feb 6, 2024_
+
+A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Added a redesigned [landing page template](https://mui.com/material-ui/getting-started/templates/landing-page/) (#37557) @zanivan
+- ✨ Added support for Arrow Down/Up + Shift and Page Up/Down keys for faster stepping in the Slider component (#40676) @mnajdova
+- many 🐛 bug fixes and 📚 documentation improvements
+
+### `@mui/material@5.15.8`
+
+- &#8203;<!-- 36 -->[Avatar] Simplify valid children assertion (#40834) @oliviertassinari
+
+### `@mui/codemod@5.15.8`
+
+- &#8203;<!-- 37 -->[Accordion] Update props actual.js test case (#40879) @DiegoAndai
+- &#8203;<!-- 12 -->Fix `findComponentJSX` util (#40855) @sai6855
+
+### `@mui/system@5.15.8`
+
+- &#8203;<!-- 10 -->Add blend color manipulator (#40258) @romgrk
+- &#8203;<!-- 38 -->Support variants in `theme.styleOverrides` (#40690) @siriwatknp
+- &#8203;<!-- 02 -->[zero] Always replace the `createUseThemeProps` call (#40885) @siriwatknp
+- &#8203;<!-- 01 -->[zero] Add README with installation and basic usage (#40761) @brijeshb42
+
+### `@mui/base@5.0.0-beta.34`
+
+- &#8203;<!-- 35 -->[Button] Add support for `hostElementName` prop to improve SSR (#40507) @mj12albert
+- &#8203;<!-- 30 -->[Menu] Use Popup instead of Popper (#40731) @michaldudak
+- &#8203;<!-- 29 -->[useNumberInput] Integrate useNumberInput with useControllableReducer (#40206) @mj12albert
+- &#8203;<!-- 11 -->[Slider] Add support for Arrow Down/Up + Shift and Page Up/Down keys (#40676) @mnajdova
+
+### Docs
+
+- &#8203;<!-- 34 -->[base-ui] Update usage.md (#40916) @adebiyial
+- &#8203;<!-- 33 -->[base-ui] Improve Base UI traffic from Material UI (#40875) @oliviertassinari
+- &#8203;<!-- 32 -->[base-ui] Change Radio component terminology from Button to Group (#40888) @danilo-leal
+- &#8203;<!-- 42 -->[base-ui] Remove redundant "Styled" prefix (#40478) @oliviertassinari
+- &#8203;<!-- 48 -->[base-ui] Update listbox slot style in demo (#40952) @sai6855
+- &#8203;<!-- 14 -->[material-ui] Fix createTheme import and markdown format in the Next.js guide (#40895) @hsmtkk
+- &#8203;<!-- 13 -->[material-ui] Correct Google font CDN URL as Roboto 600 weight is not used (#40852) @xuhdev
+- &#8203;<!-- 14 -->[material-ui] Replace the Album template with a landing page (#37557) @zanivan
+- &#8203;<!-- 21 -->[material-ui] Add deprecations migration guide (#40767) @DiegoAndai
+- &#8203;<!-- 22 -->[material-ui] Improve aria-label throughout the Button Group demos (#40892) @danilo-leal
+- &#8203;<!-- 17 -->[joy-ui] Update the Overview callout (#40900) @danilo-leal
+- &#8203;<!-- 22 -->Fix image size and dark mode @oliviertassinari
+- &#8203;<!-- 21 -->Migrate links from legacy.reactjs.org to react.dev @oliviertassinari
+- &#8203;<!-- 20 -->Fix 301 links @oliviertassinari
+- &#8203;<!-- 19 -->Fix outdated link @oliviertassinari
+- &#8203;<!-- 18 -->Fix URL and typo in CONTRIBUTING.md (#40899) @Smileek
+
+### Core
+
+- &#8203;<!-- 28 -->[blog] Optimize images for /blog/mui-x-v7-beta/ @oliviertassinari
+- &#8203;<!-- 27 -->[blog] Clarify barrel index tree-shaking @oliviertassinari
+- &#8203;<!-- 26 -->[code-infra] Simplify bug reproduction (#40833) @oliviertassinari
+- &#8203;<!-- 25 -->[code-infra] Prepare publishing @mui-internal/typescript-to-proptypes to npm (#40842) @michaldudak
+- &#8203;<!-- 40 -->[code-infra] Remove babel alias from the docs (#40792) @Janpot
+- &#8203;<!-- 24 -->[core] Use Google Font v2 API @oliviertassinari
+- &#8203;<!-- 23 -->[core] Add missing change to v5.15.7 changelog (#40872) @DiegoAndai
+- &#8203;<!-- 31 -->[core] Normalize `<meta name="viewport" />`` @oliviertassinari
+- &#8203;<!-- 28 -->[dependencies] Do not update envinfo test dependencies (#40950) @michaldudak
+- &#8203;<!-- 17 -->[docs-infra] Fix arbitrary gap between paragraphs in callouts (#40911) @oliviertassinari
+- &#8203;<!-- 16 -->[docs-infra] Allow developers to build their CodeSandbox export (#40878) @oliviertassinari
+- &#8203;<!-- 15 -->[docs-infra] Improve StackBlitz support (#40832) @oliviertassinari
+- &#8203;<!-- 21 -->[docs-infra] Improve support for absolute locale URL (#40940) @oliviertassinari
+- &#8203;<!-- 31 -->[Menu][base-ui] Fix improperly merged tests (#40896) @michaldudak
+- &#8203;<!-- 09 -->[utils] Use consistent build approach (#40837) @siriwatknp
+- &#8203;<!-- 08 -->[website] Fix React missing key console error @oliviertassinari
+- &#8203;<!-- 07 -->[website] Fix broken link @oliviertassinari
+- &#8203;<!-- 06 -->[website] Fix heading structure (#40912) @oliviertassinari
+- &#8203;<!-- 05 -->[website] Add Customer Support Agent role to careers page (#40890) @rluzists1
+- &#8203;<!-- 04 -->[website] Refine the Material UI homepage demo (#40881) @danilo-leal
+- &#8203;<!-- 03 -->[website] Use em-dash when relevant over hyphen @oliviertassinari
+- &#8203;<!-- 03 -->[zero] Fix build for demo next.js app (#40854) @brijeshb42
+
+All contributors of this release in alphabetical order: @adebiyial, @brijeshb42, @danilo-leal, @DiegoAndai, @hsmtkk, @Janpot, @michaldudak, @mj12albert, @mnajdova, @oliviertassinari, @rluzists1, @romgrk, @sai6855, @siriwatknp, @Smileek, @xuhdev, @zanivan
+
 ## v5.15.7
 
 <!-- generated comparing v5.15.6..master -->
@@ -48,6 +127,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements
 
 ### Docs
 
+- &#8203;<!-- 57 -->[material-ui] Fix the icon preview dialog (#40863) @danilo-leal
 - &#8203;<!-- 53 -->[material-ui] Fix typo on styled-components guide (#40858) @dancielos
 - &#8203;<!-- 49 -->[base-ui] Fix CSS vars from the plain CSS theme stylesheet (#40762) @zanivan
 - &#8203;<!-- 31 -->[material-ui][Divider] Remove light prop references from docs (#40782) @sai6855
@@ -149,7 +229,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements
 - &#8203;<!-- 19 -->[core] Polish issue templates @oliviertassinari
 - &#8203;<!-- 13 -->[docs-infra] Support markdown link in slots descriptions (#40679) @alexfauquette
 - &#8203;<!-- 08 -->[examples] Simplify Next.js example (#40661) @oliviertassinari
-- &#8203;<!-- 03 -->[website] Fix broken styles on Base UI page (#40683) @michaldudak
+- &#8203;<!-- 03 -->[website] Fix broken styles on Base UI page (#40683) @michaldudak
 
 All contributors of this release in alphabetical order: @alexfauquette, @anle9650, @ANUGLYPLUGIN, @brijeshb42, @danilo-leal, @devhik0, @DiegoAndai, @DonikaV, @joserodolfofreitas, @michaldudak, @mj12albert, @mnajdova, @mohamedsaiedd, @oliviertassinari, @pcorpet, @sai6855, @zanivan
 
@@ -1630,7 +1710,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som
 ### Core
 
 - [changelog] Fix issues in highlight @oliviertassinari
-- [core] Remove redundant `@material-ui/` aliases from regression test webpack config (#38574) @ZeeshanTamboli
+- [core] Remove redundant `@material-ui/` aliases from regression test Webpack config (#38574) @ZeeshanTamboli
 - [core] Fix CI error @oliviertassinari
 - [core] Remove unnecessary Box (#38461) @oliviertassinari
 - [core] Set GitHub Action top level permission @oliviertassinari
@@ -4767,7 +4847,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som
 - [docs] Fix typo in `Grid` docs (#34475) @Dustin-Digitar
 - [docs] Fix typo in `Back to top` section in AppBar docs (#34479) @Dustin-Digitar
 - [docs] Standardize all "Installation" pages (#34168) @samuelsycamore
-- [docs] Fix webpack file name to the standard: `webpack.config.js` (#34446) @CodingItWrong
+- [docs] Fix Webpack file name to the standard: `webpack.config.js` (#34446) @CodingItWrong
 - [docs] Fix Select `onChange` call (#34408) @siriwatknp
 - [docs] Notification for pickers blog - v5 stable (#34400) @joserodolfofreitas
 - [docs] Improve social sharing of docs pages (#34346) @oliviertassinari
@@ -5442,7 +5522,7 @@ A big thanks to the 19 contributors who made this release possible. Here are som
 - [docs] Update to React 18 (#33196) @mnajdova
 - [docs] Simplify "Upload button" demo (#33326) @baharalidurrani
 - [docs] Add "refine" demo to showcase (#33240) @omeraplak
-- [docs] Add webpack alias for legacy utils package (#33376) @jgbae
+- [docs] Add Webpack alias for legacy utils package (#33376) @jgbae
 - [docs] Improve external link icons synonyms (#33257) @davidgarciab
 - [examples] Update Base UI with Tailwind CSS to use the latest versions of the dependencies (#33401) @mnajdova
 - [examples] Add Base UI example (#33154) @siriwatknp
@@ -8209,7 +8289,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som
 - &#8203;<!-- 42 -->[core] Remove code handling JSS components (#28421) @eps1lon
 - &#8203;<!-- 41 -->[core] Remove unused dependencies (#28468) @eps1lon
 - &#8203;<!-- 40 -->[core] Ensure both docs bundles are analyzeable (#28410) @eps1lon
-- &#8203;<!-- 39 -->[core] Switch to webpack 5 (#28248) @eps1lon
+- &#8203;<!-- 39 -->[core] Switch to Webpack 5 (#28248) @eps1lon
 - &#8203;<!-- 38 -->[core] Batch small changes (#28177) @oliviertassinari
 - &#8203;<!-- 37 -->[core] Update publish tag to latest (#28382) @mnajdova
 - &#8203;<!-- 19 -->[framer] Update @mui/\* dependencies (#28469) @eps1lon
@@ -8957,7 +9037,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som
 - [docs] Sort the size in a more logical order (#27186) @oliviertassinari
 - [docs] Use actual link to paperbase (#27063) @eps1lon
 - [docs] Use custom markdown loader for landing page (#27065) @eps1lon
-- [docs] Use webpack 5 (#27077) @eps1lon
+- [docs] Use Webpack 5 (#27077) @eps1lon
 - [examples] Fix CDN warning (#27229) @oliviertassinari
 - [examples] Remove `StyledEngineProvider` as JSS is not used (#27133) @mnajdova
 - [examples] Remove forgotten StyledEngineProvider (#27163) @oliviertassinari
@@ -9087,7 +9167,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som
 - &#8203;<!-- 35 -->[docs] Fix /components/hidden merge conflict (#26997) @eps1lon
 - &#8203;<!-- 26 -->[docs] Fix 404 links (#26963) @oliviertassinari
 - &#8203;<!-- 24 -->[docs] Remove link that points to v4 blog post (#26960) @steveafrost
-- &#8203;<!-- 16 -->[docs] Use custom webpack loader for markdown (#26774) @eps1lon
+- &#8203;<!-- 16 -->[docs] Use custom Webpack loader for markdown (#26774) @eps1lon
 - &#8203;<!-- 11 -->[docs] Fix 301 links (#26942) @oliviertassinari
 - &#8203;<!-- 01 -->[docs] Add page for the `sx` prop (#26769) @mnajdova
 - &#8203;<!-- 52 -->[docs] pre-fill issue when a demo crashes (#27034) @eps1lon
@@ -11938,7 +12018,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som
   );
   ```
 
-  This enforces emotion being injected first. [More details](https://mui.com/material-ui/guides/interoperability/#css-injection-order) in the documentation.
+  This enforces emotion being injected first. [More details](https://mui.com/material-ui/integrations/interoperability/#css-injection-order) in the documentation.
 
 - [Autocomplete] Rename `closeIcon` prop with `clearIcon` to avoid confusion (#23617) @akhilmhdh.
 
@@ -13187,7 +13267,7 @@ Here are some highlights ✨:
 #### Breaking changes
 
 - [Modal] Remove `onRendered` prop from Modal and Portal (#22464) @eps1lon
-  Depending on your use case either use a [callback ref](https://legacy.reactjs.org/docs/refs-and-the-dom.html#callback-refs) on the child element or an effect hook in the child component.
+  Depending on your use case either use a [callback ref](https://react.dev/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback) on the child element or an effect hook in the child component.
 
 #### Changes
 

package/colorManipulator.d.ts

@@ -27,3 +27,4 @@ export function darken(color: string, coefficient: number): string;
 export function private_safeDarken(color: string, coefficient: number, warning?: string): string;
 export function lighten(color: string, coefficient: number): string;
 export function private_safeLighten(color: string, coefficient: number, warning?: string): string;
+export function blend(background: string, overlay: string, opacity: number, gamma?: number): string;

package/colorManipulator.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.alpha = alpha;
+exports.blend = blend;
 exports.colorChannel = void 0;
 exports.darken = darken;
 exports.decomposeColor = decomposeColor;
@@ -349,4 +350,23 @@ 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.
+ */
+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
+  });
 }

package/createStyled.js

@@ -7,14 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = createStyled;
 exports.shouldForwardProp = shouldForwardProp;
 exports.systemDefaultTheme = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _styledEngine = _interopRequireWildcard(require("@mui/styled-engine"));
 var _utils = require("@mui/utils");
 var _createTheme = _interopRequireDefault(require("./createTheme"));
-var _propsToClassKey = _interopRequireDefault(require("./propsToClassKey"));
 var _styleFunctionSx = _interopRequireDefault(require("./styleFunctionSx"));
-const _excluded = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+const _excluded = ["ownerState"],
+  _excluded2 = ["variants"],
+  _excluded3 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 /* eslint-disable no-underscore-dangle */
 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; }
@@ -30,74 +31,6 @@ function isStringTag(tag) {
   // it's a lowercase character
   tag.charCodeAt(0) > 96;
 }
-const getStyleOverrides = (name, theme) => {
-  if (theme.components && theme.components[name] && theme.components[name].styleOverrides) {
-    return theme.components[name].styleOverrides;
-  }
-  return null;
-};
-const transformVariants = variants => {
-  let numOfCallbacks = 0;
-  const variantsStyles = {};
-  if (variants) {
-    variants.forEach(definition => {
-      let key = '';
-      if (typeof definition.props === 'function') {
-        key = `callback${numOfCallbacks}`;
-        numOfCallbacks += 1;
-      } else {
-        key = (0, _propsToClassKey.default)(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;
-  }
-  return transformVariants(variants);
-};
-const variantsResolver = (props, styles, variants) => {
-  const {
-    ownerState = {}
-  } = props;
-  const variantsStyles = [];
-  let numOfCallbacks = 0;
-  if (variants) {
-    variants.forEach(variant => {
-      let isMatch = true;
-      if (typeof variant.props === 'function') {
-        const propsToCheck = (0, _extends2.default)({}, props, ownerState);
-        isMatch = variant.props(propsToCheck);
-      } else {
-        Object.keys(variant.props).forEach(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${numOfCallbacks}`]);
-        } else {
-          variantsStyles.push(styles[(0, _propsToClassKey.default)(variant.props)]);
-        }
-      }
-      if (typeof variant.props === 'function') {
-        numOfCallbacks += 1;
-      }
-    });
-  }
-  return variantsStyles;
-};
-const themeVariantsResolver = (props, styles, theme, name) => {
-  var _theme$components;
-  const 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
 function shouldForwardProp(prop) {
@@ -123,29 +56,51 @@ function defaultOverridesResolver(slot) {
   }
   return (props, styles) => styles[slot];
 }
-const muiStyledFunctionResolver = ({
-  styledArg,
-  props,
-  defaultTheme,
-  themeId
-}) => {
-  const resolvedStyles = styledArg((0, _extends2.default)({}, props, {
-    theme: resolveTheme((0, _extends2.default)({}, props, {
-      defaultTheme,
-      themeId
-    }))
-  }));
-  let optionalVariants;
-  if (resolvedStyles && resolvedStyles.variants) {
-    optionalVariants = resolvedStyles.variants;
-    delete resolvedStyles.variants;
+function processStyleArg(callableStyle, _ref) {
+  let {
+      ownerState
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle((0, _extends2.default)({
+    ownerState
+  }, props)) : callableStyle;
+  if (Array.isArray(resolvedStylesArg)) {
+    return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, (0, _extends2.default)({
+      ownerState
+    }, props)));
   }
-  if (optionalVariants) {
-    const variantsStyles = variantsResolver(props, transformVariants(optionalVariants), optionalVariants);
-    return [resolvedStyles, ...variantsStyles];
+  if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
+    const {
+        variants = []
+      } = resolvedStylesArg,
+      otherStyles = (0, _objectWithoutPropertiesLoose2.default)(resolvedStylesArg, _excluded2);
+    let result = otherStyles;
+    variants.forEach(variant => {
+      let isMatch = true;
+      if (typeof variant.props === 'function') {
+        isMatch = variant.props((0, _extends2.default)({
+          ownerState
+        }, props));
+      } else {
+        Object.keys(variant.props).forEach(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((0, _extends2.default)({
+          ownerState
+        }, props)) : variant.style);
+      }
+    });
+    return result;
   }
-  return resolvedStyles;
-};
+  return resolvedStylesArg;
+}
 function createStyled(input = {}) {
   const {
     themeId,
@@ -174,7 +129,7 @@ function createStyled(input = {}) {
         // For more details: https://github.com/mui/material-ui/pull/37908
         overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
       } = inputOptions,
-      options = (0, _objectWithoutPropertiesLoose2.default)(inputOptions, _excluded);
+      options = (0, _objectWithoutPropertiesLoose2.default)(inputOptions, _excluded3);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -207,92 +162,57 @@ function createStyled(input = {}) {
       shouldForwardProp: shouldForwardPropOption,
       label
     }, options));
-    const muiStyledResolver = (styleArg, ...expressions) => {
-      const expressionsWithDefaultTheme = expressions ? expressions.map(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 props => muiStyledFunctionResolver({
-            styledArg: stylesArg,
-            props,
-            defaultTheme,
-            themeId
-          });
-        }
-        if ((0, _utils.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 = (0, _utils.deepmerge)(result, variantStyle);
-              });
-              return result;
-            };
-          }
-          return transformedStylesArg;
-        }
-        return stylesArg;
-      }) : [];
-      let transformedStyleArg = styleArg;
-      if ((0, _utils.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 = (0, _utils.deepmerge)(result, variantStyle);
-            });
-            return result;
-          };
-        }
-      } else if (typeof styleArg === 'function' &&
+    const 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 = props => muiStyledFunctionResolver({
-          styledArg: styleArg,
-          props,
-          defaultTheme,
-          themeId
-        });
+      if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || (0, _utils.isPlainObject)(stylesArg)) {
+        return props => processStyleArg(stylesArg, (0, _extends2.default)({}, props, {
+          theme: resolveTheme({
+            theme: props.theme,
+            defaultTheme,
+            themeId
+          })
+        }));
       }
+      return stylesArg;
+    };
+    const muiStyledResolver = (styleArg, ...expressions) => {
+      let transformedStyleArg = transformStyleArg(styleArg);
+      const expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
           const theme = resolveTheme((0, _extends2.default)({}, props, {
             defaultTheme,
             themeId
           }));
-          const styleOverrides = getStyleOverrides(componentName, theme);
-          if (styleOverrides) {
-            const resolvedStyleOverrides = {};
-            Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle((0, _extends2.default)({}, props, {
-                theme
-              })) : slotStyle;
-            });
-            return overridesResolver(props, resolvedStyleOverrides);
+          if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
+            return null;
           }
-          return null;
+          const styleOverrides = theme.components[componentName].styleOverrides;
+          const resolvedStyleOverrides = {};
+          // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
+          Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
+            resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, (0, _extends2.default)({}, props, {
+              theme
+            }));
+          });
+          return overridesResolver(props, resolvedStyleOverrides);
         });
       }
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(props => {
+          var _theme$components;
           const theme = resolveTheme((0, _extends2.default)({}, props, {
             defaultTheme,
             themeId
           }));
-          return themeVariantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
+          const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[componentName]) == null ? void 0 : _theme$components.variants;
+          return processStyleArg({
+            variants: themeVariants
+          }, (0, _extends2.default)({}, props, {
+            theme
+          }));
         });
       }
       if (!skipSx) {

package/esm/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
+  });
 }