@mui/system 5.14.11 → 5.14.13

package/Box/Box.d.ts

@@ -105,6 +105,12 @@ export declare const spacing: SimpleStyleFunction<
   | 'marginLeft'
   | 'marginX'
   | 'marginY'
+  | 'marginInline'
+  | 'marginInlineStart'
+  | 'marginInlineEnd'
+  | 'marginBlock'
+  | 'marginBlockStart'
+  | 'marginBlockEnd'
   | 'padding'
   | 'paddingTop'
   | 'paddingRight'
@@ -112,6 +118,12 @@ export declare const spacing: SimpleStyleFunction<
   | 'paddingLeft'
   | 'paddingX'
   | 'paddingY'
+  | 'paddingInline'
+  | 'paddingInlineStart'
+  | 'paddingInlineEnd'
+  | 'paddingBlock'
+  | 'paddingBlockStart'
+  | 'paddingBlockEnd'
 >;
 
 export declare const typography: SimpleStyleFunction<

package/Box/Box.js

@@ -28,5 +28,4 @@ process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
-var _default = Box;
-exports.default = _default;
+var _default = exports.default = Box;

package/CHANGELOG.md

@@ -1,5 +1,152 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.14.13
+
+<!-- generated comparing v5.14.12..master -->
+
+_Oct 10, 2023_
+
+A big thanks to the 22 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Added support for `styled-components` v6 (#39042) @mnajdova
+
+### `@mui/material@5.14.13`
+
+- [Checkbox] Fix checkbox hover bg with extendTheme (#39319) @brijeshb42
+- [Chip] Outlined Chip variant is wider than the Filled counterpart (#39342) @chirag3003
+- [Select] Add notice about select's a11y improvement on v5.14.12 changelog (#39310) @DiegoAndai
+- [Typography] Color prop check for primitive type (#39071) @DarhkVoyd
+- [Pagination] Fix background color on hover and keyboard focus when using CSS theme variables (#39220) @ValkonX33
+- [Popper] Add missing `styleOverrides` Popper type in theme (#39154) @axelbostrom
+- [Slider] Support all default palette colors in TypeScript (#39058) @gugudwt
+
+### `@mui/base@5.0.0-beta.19`
+
+- [Menu] Add the anchor prop (#39297) @michaldudak
+
+### `@mui/material-next@6.0.0-alpha.105`
+
+- [Menu] Copy v5 Menu components (#39301) @mnajdova
+
+### `@mui/joy@5.0.0-beta.10`
+
+- [Autocomplete] Add `type=button` to clear button (#39263) @brijeshb42
+- [Button] Fix the text wrap issue (#38696) @atharva3333
+- [Drawer] Apply color inversion to content slot instead (#39312) @siriwatknp
+- [Switch] Fix missing class name (#39327) @Bestwebdesign
+
+### `@mui/styled-engine-sc@6.0.0-alpha.1`
+
+- &#8203;<!-- 03 -->[system] Add support for `styled-components` v6 (#39042) @mnajdova
+
+### Docs
+
+- [joy-ui] Adjust the templates page card design (#39369) @danilo-leal
+- Rename the Data Grid "Quick filter" to "Search" (#37724) @alexfauquette
+- Remove obsolete translations (#39221) @mbrookes
+- Update link to add custom color in palette (#39359) @ZeeshanTamboli
+- Denser code demo @oliviertassinari
+- Set up MD3 experiments pages (#39323) @mj12albert
+- [Drawer] Fix right anchored persistent drawer intercepts click when it is closed (#39318) @ZeeshanTamboli
+- [joy-ui] Revise the Color Inversion page (#39306) @danilo-leal
+- [joy-ui] Remove redundant `error` prop from input validation demo (#39280) @sai6855
+- [material-ui] Rename themed components doc, fix typos (#39368) @samuelsycamore
+- [material-ui] Adjust the Material You Chip section (#39325) @danilo-leal
+- [system] Add documentation on how to augment custom theme types for the `sx` prop callback (#39259) @3xp10it3r
+- [joy-ui][Input] Add debounce input demo (#39300) @sai6855
+
+### Core
+
+- [docs-infra] Improve the open diamond sponsor spot callout (#39332) @danilo-leal
+- [docs-infra] Fix Code Sandbox download issue (#39317) @ARJ2160
+- [docs-infra] Remove overflow: hidden for demo gradient bg (#39225) @oliviertassinari
+- [website] Fix footer responsiveness (#39355) @danilo-leal
+- [website] Host Figma redirections in the store for now @oliviertassinari
+
+All contributors of this release in alphabetical order: @3xp10it3r, @alexfauquette, @ARJ2160, @atharva3333, @axelbostrom, @Bestwebdesign, @brijeshb42, @chirag3003, @danilo-leal, @DarhkVoyd, @DiegoAndai, @gugudwt, @mbrookes, @michaldudak, @mj12albert, @mnajdova, @oliviertassinari, @sai6855, @samuelsycamore, @siriwatknp, @ValkonX33, @ZeeshanTamboli
+
+## 5.14.12
+
+<!-- generated comparing v5.14.11..master -->
+
+_Oct 3, 2023_
+
+A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎨 Introduced color inversion utilities to Joy UI (#38916) @siriwatknp
+- 🚀 Added Chip and related TextField components to Material You @DiegoAndai, @mj12albert
+- 🏗️ Improve the Select's component a11y by adding the combobox role and aria-controls attribute (#38785) @xulingzhihou. If your tests require selecting the trigger element by the "button" role, then you'll have to change it to use the "combobox" role instead
+
+### `@mui/material@5.14.12`
+
+- [DialogActions] Apply margin-left when children is not of `button` type (#39189) @sai6855
+- [Select] Improve a11y by adding combobox role and aria-controls attribute (#38785) @xulingzhihou
+- [Select] Fix MenuProps slotProps forwarding (#39177) @DiegoAndai
+- [TextField] Polish types in Textfield demo (#39140) @sai6855
+- [ButtonGroup] Fix rendering with conditional elements (#38989) @ZeeshanTamboli
+
+### `@mui/system@5.14.12`
+
+- [system] Add support for `variants` in the styled() util (#39073) @mnajdova
+- [Box] Add missing logical spacing property types (#39169) @Semigradsky
+
+### `@mui/base@5.0.0-beta.18`
+
+- [useSlider] Align externalProps handling (#38854) @mj12albert
+- [useTabs] Align external props handling for useTab/useTabPanel/useTabsList (#39037) @mj12albert
+- [test] Fix import paths in useTab tests (#39291) @mj12albert
+
+### `@mui/material-next@6.0.0-alpha.104`
+
+- [Chip] Add Material You Chip component (#38927) @DiegoAndai
+- [Divider] Copy v5 Divider (#39197) @mj12albert
+- [FilledInput] Copy v5 FilledInput (#39040) @mj12albert
+- [FormControl] Add FormControl component (#39032) @mj12albert
+- [Select] Copy Select files from v5 (#39188) @DiegoAndai
+- [TextField] Copy v5 TextField's inner components (#39166) @mj12albert
+
+### `@mui/joy@5.0.0-beta.9`
+
+- Introduce color inversion utilities (#38916) @siriwatknp
+- Replace margin with `gap` property (#39147) @siriwatknp
+- [CssBaseline] use Joy `GlobalStyles` (#39278) @siriwatknp
+- [Drawer] Apply content styles from theme to content slot (#39199) @sai6855
+- [List] Add gap and missing active styles (#39146) @siriwatknp
+- [Switch] Slight adjustments to the design (#39276) @danilo-leal
+
+### Docs
+
+- [docs] Update Autocomplete demo for React 18 (#39162) @oliviertassinari
+- [docs-infra] Tweak feedback footer section design (#36556) @danilo-leal
+- [docs-infra] Improve code syntax highlight (#39181) @oliviertassinari
+- [docs][base] Add Tailwind CSS + plain CSS demo on the TextArea page (#39046) @alisasanib
+- [docs][base-ui] Fix style for root div of multiline input (#39182) @ttlpta
+- [docs][base-ui] Improve Select's country select demo (#38983) @oliviertassinari
+- [docs][joy-ui] Add scrollable tabs example (#39260) @siriwatknp
+- [docs][joy-ui] Match `Autocomplete` github label demo to actual github label dropdown (#39228) @sai6855
+- [docs][joy-ui] Refine the Rental dashboard template (#39059) @zanivan
+- [docs][joy-ui] Removed incomplete sentence in the Aspect Ratio page (#39227) @Erik-McKelvey
+- [docs][joy-ui] Fix typo in the Accordion page (#39226) @Erik-McKelvey
+- [docs][joy-ui] Update and standardize template Sidemenus (#39271) @zanivan
+- [docs][joy-ui] Add a roadmap page (#39163) @danilo-leal
+- [docs][material-ui] Replace `Box` with `Stack` in applicable demos (#39174) @sai6855
+- [docs][material-ui] Add small polish to the Templates page (#39224) @danilo-leal
+- [docs][material-ui] Small revision to the Icons page (#38840) @danilo-leal
+
+### Core
+
+- Add next lint config to eslint (#39183) @Janpot
+- [core] Update eslint rules (#39178) @romgrk
+- [core] Fix Greg GitHub slug @oliviertassinari
+- [core] Priority Support casing normalization @oliviertassinari
+- [website] Add Heat map in pricing page (#39269) @oliviertassinari
+- [website] Update `React Engineer - xCharts` Ashby link (#39172) @DanailH
+- [website] Add Charts to the pricing table (#38680) @alexfauquette
+- [website] Polish career experience @oliviertassinari
+- [website] Simplify the Core products file (#39194) @danilo-leal
+
+All contributors of this release in alphabetical order: @alexfauquette, @brijeshb42, @DanailH, @danilo-leal, @DiegoAndai, @Erik-McKelvey, @Janpot, @mj12albert, @mnajdova, @oliviertassinari, @romgrk, @sai6855, @Semigradsky, @siriwatknp, @xulingzhihou, @zanivan, @ZeeshanTamboli
+
 ## 5.14.11
 
 <!-- generated comparing v5.14.10..master -->

package/Container/Container.js

@@ -63,5 +63,4 @@ process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
-var _default = Container;
-exports.default = _default;
+var _default = exports.default = Container;

package/Container/containerClasses.js

@@ -10,5 +10,4 @@ function getContainerUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiContainer', slot);
 }
 const containerClasses = (0, _utils.unstable_generateUtilityClasses)('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
-var _default = containerClasses;
-exports.default = _default;
+var _default = exports.default = containerClasses;

package/GlobalStyles/GlobalStyles.js

@@ -42,5 +42,4 @@ process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes /* remove-proptyp
    */
   themeId: _propTypes.default.string
 } : void 0;
-var _default = GlobalStyles;
-exports.default = _default;
+var _default = exports.default = GlobalStyles;

package/Stack/Stack.js

@@ -65,5 +65,4 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ =
    */
   useFlexGap: _propTypes.default.bool
 } : void 0;
-var _default = Stack;
-exports.default = _default;
+var _default = exports.default = Stack;

package/Stack/stackClasses.js

@@ -10,5 +10,4 @@ function getStackUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiStack', slot);
 }
 const stackClasses = (0, _utils.unstable_generateUtilityClasses)('MuiStack', ['root']);
-var _default = stackClasses;
-exports.default = _default;
+var _default = exports.default = stackClasses;

package/ThemeProvider/ThemeProvider.js

@@ -89,5 +89,4 @@ process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes /* remove-propty
 if (process.env.NODE_ENV !== 'production') {
   process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = (0, _utils.exactProp)(ThemeProvider.propTypes) : void 0;
 }
-var _default = ThemeProvider;
-exports.default = _default;
+var _default = exports.default = ThemeProvider;

package/Unstable_Grid/Grid.js

@@ -179,5 +179,4 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ =
    */
   xsOffset: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
 } : void 0;
-var _default = Grid;
-exports.default = _default;
+var _default = exports.default = Grid;

package/Unstable_Grid/gridClasses.js

@@ -22,5 +22,4 @@ const gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiGrid', ['roo
 ...WRAPS.map(wrap => `wrap-xs-${wrap}`),
 // grid sizes for all breakpoints
 ...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
-var _default = gridClasses;
-exports.default = _default;
+var _default = exports.default = gridClasses;

package/borders.js

@@ -18,64 +18,54 @@ function borderTransform(value) {
   }
   return `${value}px solid`;
 }
-const border = (0, _style.default)({
+const border = exports.border = (0, _style.default)({
   prop: 'border',
   themeKey: 'borders',
   transform: borderTransform
 });
-exports.border = border;
-const borderTop = (0, _style.default)({
+const borderTop = exports.borderTop = (0, _style.default)({
   prop: 'borderTop',
   themeKey: 'borders',
   transform: borderTransform
 });
-exports.borderTop = borderTop;
-const borderRight = (0, _style.default)({
+const borderRight = exports.borderRight = (0, _style.default)({
   prop: 'borderRight',
   themeKey: 'borders',
   transform: borderTransform
 });
-exports.borderRight = borderRight;
-const borderBottom = (0, _style.default)({
+const borderBottom = exports.borderBottom = (0, _style.default)({
   prop: 'borderBottom',
   themeKey: 'borders',
   transform: borderTransform
 });
-exports.borderBottom = borderBottom;
-const borderLeft = (0, _style.default)({
+const borderLeft = exports.borderLeft = (0, _style.default)({
   prop: 'borderLeft',
   themeKey: 'borders',
   transform: borderTransform
 });
-exports.borderLeft = borderLeft;
-const borderColor = (0, _style.default)({
+const borderColor = exports.borderColor = (0, _style.default)({
   prop: 'borderColor',
   themeKey: 'palette'
 });
-exports.borderColor = borderColor;
-const borderTopColor = (0, _style.default)({
+const borderTopColor = exports.borderTopColor = (0, _style.default)({
   prop: 'borderTopColor',
   themeKey: 'palette'
 });
-exports.borderTopColor = borderTopColor;
-const borderRightColor = (0, _style.default)({
+const borderRightColor = exports.borderRightColor = (0, _style.default)({
   prop: 'borderRightColor',
   themeKey: 'palette'
 });
-exports.borderRightColor = borderRightColor;
-const borderBottomColor = (0, _style.default)({
+const borderBottomColor = exports.borderBottomColor = (0, _style.default)({
   prop: 'borderBottomColor',
   themeKey: 'palette'
 });
-exports.borderBottomColor = borderBottomColor;
-const borderLeftColor = (0, _style.default)({
+const borderLeftColor = exports.borderLeftColor = (0, _style.default)({
   prop: 'borderLeftColor',
   themeKey: 'palette'
 });
 
 // false positive
 // eslint-disable-next-line react/function-component-definition
-exports.borderLeftColor = borderLeftColor;
 const borderRadius = props => {
   if (props.borderRadius !== undefined && props.borderRadius !== null) {
     const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'shape.borderRadius', 4, 'borderRadius');
@@ -92,5 +82,4 @@ borderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {
 } : {};
 borderRadius.filterProps = ['borderRadius'];
 const borders = (0, _compose.default)(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius);
-var _default = borders;
-exports.default = _default;
+var _default = exports.default = borders;

package/breakpoints.js

@@ -18,7 +18,7 @@ var _utils = require("@mui/utils");
 var _merge = _interopRequireDefault(require("./merge"));
 // The breakpoint **start** at this value.
 // For instance with the first breakpoint xs: [xs, sm[.
-const values = {
+const values = exports.values = {
   xs: 0,
   // phone
   sm: 600,
@@ -29,7 +29,7 @@ const values = {
   // desktop
   xl: 1536 // large screen
 };
-exports.values = values;
+
 const defaultBreakpoints = {
   // Sorted ASC by size. That's important.
   // It can't be configured as it's used statically for propTypes.
@@ -164,5 +164,4 @@ function resolveBreakpointValues({
     return acc;
   }, {});
 }
-var _default = breakpoints;
-exports.default = _default;
+var _default = exports.default = breakpoints;

package/compose.js

@@ -28,5 +28,4 @@ function compose(...styles) {
   fn.filterProps = styles.reduce((acc, style) => acc.concat(style.filterProps), []);
   return fn;
 }
-var _default = compose;
-exports.default = _default;
+var _default = exports.default = compose;

package/createStyled.js

@@ -36,47 +36,54 @@ const getStyleOverrides = (name, theme) => {
   }
   return null;
 };
+const transformVariants = variants => {
+  const variantsStyles = {};
+  if (variants) {
+    variants.forEach(definition => {
+      const 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;
   }
-  const variantsStyles = {};
-  variants.forEach(definition => {
-    const key = (0, _propsToClassKey.default)(definition.props);
-    variantsStyles[key] = definition.style;
-  });
-  return variantsStyles;
+  return transformVariants(variants);
 };
-const variantsResolver = (props, styles, theme, name) => {
-  var _theme$components;
+const variantsResolver = (props, styles, variants) => {
   const {
     ownerState = {}
   } = props;
   const variantsStyles = [];
-  const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[name]) == null ? void 0 : _theme$components.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[(0, _propsToClassKey.default)(themeVariant.props)]);
+        variantsStyles.push(styles[(0, _propsToClassKey.default)(variant.props)]);
       }
     });
   }
   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) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
 }
-const systemDefaultTheme = (0, _createTheme.default)();
-exports.systemDefaultTheme = systemDefaultTheme;
+const systemDefaultTheme = exports.systemDefaultTheme = (0, _createTheme.default)();
 const lowercaseFirstLetter = string => {
   if (!string) {
     return string;
@@ -96,6 +103,29 @@ 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;
+  }
+  if (optionalVariants) {
+    const variantsStyles = variantsResolver(props, transformVariants(optionalVariants), optionalVariants);
+    return [resolvedStyles, ...variantsStyles];
+  }
+  return resolvedStyles;
+};
 function createStyled(input = {}) {
   const {
     themeId,
@@ -162,16 +192,61 @@ 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((0, _extends2.default)({}, props, {
-            theme: resolveTheme((0, _extends2.default)({}, props, {
-              defaultTheme,
-              themeId
-            }))
-          }));
-        } : stylesArg;
+        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' &&
+      // 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((0, _extends2.default)({}, props, {
@@ -197,7 +272,7 @@ function createStyled(input = {}) {
             defaultTheme,
             themeId
           }));
-          return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
+          return themeVariantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
         });
       }
       if (!skipSx) {
@@ -209,18 +284,6 @@ 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((0, _extends2.default)({}, props, {
-          theme: resolveTheme((0, _extends2.default)({}, props, {
-            defaultTheme,
-            themeId
-          }))
-        }));
       }
       const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
       if (process.env.NODE_ENV !== 'production') {

package/createTheme/createBreakpoints.js

@@ -11,8 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 const _excluded = ["values", "unit", "step"];
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
-const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
-exports.breakpointKeys = breakpointKeys;
+const breakpointKeys = exports.breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,

package/createTheme/createTheme.js

@@ -45,5 +45,4 @@ function createTheme(options = {}, ...args) {
   };
   return muiTheme;
 }
-var _default = createTheme;
-exports.default = _default;
+var _default = exports.default = createTheme;

package/createTheme/shape.js

@@ -7,5 +7,4 @@ exports.default = void 0;
 const shape = {
   borderRadius: 4
 };
-var _default = shape;
-exports.default = _default;
+var _default = exports.default = shape;

package/cssGrid.js

@@ -63,42 +63,32 @@ rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {
   rowGap: _responsivePropType.default
 } : {};
 rowGap.filterProps = ['rowGap'];
-const gridColumn = (0, _style.default)({
+const gridColumn = exports.gridColumn = (0, _style.default)({
   prop: 'gridColumn'
 });
-exports.gridColumn = gridColumn;
-const gridRow = (0, _style.default)({
+const gridRow = exports.gridRow = (0, _style.default)({
   prop: 'gridRow'
 });
-exports.gridRow = gridRow;
-const gridAutoFlow = (0, _style.default)({
+const gridAutoFlow = exports.gridAutoFlow = (0, _style.default)({
   prop: 'gridAutoFlow'
 });
-exports.gridAutoFlow = gridAutoFlow;
-const gridAutoColumns = (0, _style.default)({
+const gridAutoColumns = exports.gridAutoColumns = (0, _style.default)({
   prop: 'gridAutoColumns'
 });
-exports.gridAutoColumns = gridAutoColumns;
-const gridAutoRows = (0, _style.default)({
+const gridAutoRows = exports.gridAutoRows = (0, _style.default)({
   prop: 'gridAutoRows'
 });
-exports.gridAutoRows = gridAutoRows;
-const gridTemplateColumns = (0, _style.default)({
+const gridTemplateColumns = exports.gridTemplateColumns = (0, _style.default)({
   prop: 'gridTemplateColumns'
 });
-exports.gridTemplateColumns = gridTemplateColumns;
-const gridTemplateRows = (0, _style.default)({
+const gridTemplateRows = exports.gridTemplateRows = (0, _style.default)({
   prop: 'gridTemplateRows'
 });
-exports.gridTemplateRows = gridTemplateRows;
-const gridTemplateAreas = (0, _style.default)({
+const gridTemplateAreas = exports.gridTemplateAreas = (0, _style.default)({
   prop: 'gridTemplateAreas'
 });
-exports.gridTemplateAreas = gridTemplateAreas;
-const gridArea = (0, _style.default)({
+const gridArea = exports.gridArea = (0, _style.default)({
   prop: 'gridArea'
 });
-exports.gridArea = gridArea;
 const grid = (0, _compose.default)(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
-var _default = grid;
-exports.default = _default;
+var _default = exports.default = grid;

package/cssVars/createCssVarsProvider.js

@@ -20,8 +20,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
-exports.DISABLE_CSS_TRANSITION = DISABLE_CSS_TRANSITION;
+const DISABLE_CSS_TRANSITION = exports.DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
 function createCssVarsProvider(options) {
   const {
     themeId,