@mui/system 5.14.10 → 5.14.12

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,
@@ -312,11 +311,11 @@ function createCssVarsProvider(options) {
      */
     disableStyleSheetGeneration: _propTypes.default.bool,
     /**
-     * Disable CSS transitions when switching between modes or color schemes
+     * Disable CSS transitions when switching between modes or color schemes.
      */
     disableTransitionOnChange: _propTypes.default.bool,
     /**
-     * The document to attach the attribute to
+     * The document to attach the attribute to.
      */
     documentNode: _propTypes.default.any,
     /**
@@ -324,7 +323,7 @@ function createCssVarsProvider(options) {
      */
     modeStorageKey: _propTypes.default.string,
     /**
-     * The window that attaches the 'storage' event listener
+     * The window that attaches the 'storage' event listener.
      * @default window
      */
     storageWindow: _propTypes.default.any,

package/cssVars/createCssVarsTheme.js

@@ -20,5 +20,4 @@ function createCssVarsTheme(theme) {
     shouldSkipGeneratingVar
   }));
 }
-var _default = createCssVarsTheme;
-exports.default = _default;
+var _default = exports.default = createCssVarsTheme;

package/cssVars/getInitColorSchemeScript.js

@@ -9,12 +9,9 @@ var React = _interopRequireWildcard(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
 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 DEFAULT_MODE_STORAGE_KEY = 'mode';
-exports.DEFAULT_MODE_STORAGE_KEY = DEFAULT_MODE_STORAGE_KEY;
-const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
-exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = DEFAULT_COLOR_SCHEME_STORAGE_KEY;
-const DEFAULT_ATTRIBUTE = 'data-color-scheme';
-exports.DEFAULT_ATTRIBUTE = DEFAULT_ATTRIBUTE;
+const DEFAULT_MODE_STORAGE_KEY = exports.DEFAULT_MODE_STORAGE_KEY = 'mode';
+const DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
+const DEFAULT_ATTRIBUTE = exports.DEFAULT_ATTRIBUTE = 'data-color-scheme';
 function getInitColorSchemeScript(options) {
   const {
     defaultMode = 'light',

package/cssVars/prepareCssVars.js

@@ -70,5 +70,4 @@ function prepareCssVars(theme, parserConfig) {
     generateCssVars
   };
 }
-var _default = prepareCssVars;
-exports.default = _default;
+var _default = exports.default = prepareCssVars;

package/display.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.whiteSpace = exports.visibility = exports.textOverflow = exports.overflow = exports.displayRaw = exports.displayPrint = exports.default = void 0;
 var _style = _interopRequireDefault(require("./style"));
 var _compose = _interopRequireDefault(require("./compose"));
-const displayPrint = (0, _style.default)({
+const displayPrint = exports.displayPrint = (0, _style.default)({
   prop: 'displayPrint',
   cssProperty: false,
   transform: value => ({
@@ -16,26 +16,19 @@ const displayPrint = (0, _style.default)({
     }
   })
 });
-exports.displayPrint = displayPrint;
-const displayRaw = (0, _style.default)({
+const displayRaw = exports.displayRaw = (0, _style.default)({
   prop: 'display'
 });
-exports.displayRaw = displayRaw;
-const overflow = (0, _style.default)({
+const overflow = exports.overflow = (0, _style.default)({
   prop: 'overflow'
 });
-exports.overflow = overflow;
-const textOverflow = (0, _style.default)({
+const textOverflow = exports.textOverflow = (0, _style.default)({
   prop: 'textOverflow'
 });
-exports.textOverflow = textOverflow;
-const visibility = (0, _style.default)({
+const visibility = exports.visibility = (0, _style.default)({
   prop: 'visibility'
 });
-exports.visibility = visibility;
-const whiteSpace = (0, _style.default)({
+const whiteSpace = exports.whiteSpace = (0, _style.default)({
   prop: 'whiteSpace'
 });
-exports.whiteSpace = whiteSpace;
-var _default = (0, _compose.default)(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);
-exports.default = _default;
+var _default = exports.default = (0, _compose.default)(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);

package/esm/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,40 +25,48 @@ 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) => {
-  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[propsToClassKey(themeVariant.props)]);
+        variantsStyles.push(styles[propsToClassKey(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
 export function shouldForwardProp(prop) {
@@ -84,6 +92,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,
@@ -150,16 +181,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, {
@@ -185,7 +261,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) {
@@ -197,18 +273,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/esm/cssVars/createCssVarsProvider.js

@@ -303,11 +303,11 @@ export default function createCssVarsProvider(options) {
      */
     disableStyleSheetGeneration: PropTypes.bool,
     /**
-     * Disable CSS transitions when switching between modes or color schemes
+     * Disable CSS transitions when switching between modes or color schemes.
      */
     disableTransitionOnChange: PropTypes.bool,
     /**
-     * The document to attach the attribute to
+     * The document to attach the attribute to.
      */
     documentNode: PropTypes.any,
     /**
@@ -315,7 +315,7 @@ export default function createCssVarsProvider(options) {
      */
     modeStorageKey: PropTypes.string,
     /**
-     * The window that attaches the 'storage' event listener
+     * The window that attaches the 'storage' event listener.
      * @default window
      */
     storageWindow: PropTypes.any,

package/flexbox.js

@@ -7,58 +7,44 @@ Object.defineProperty(exports, "__esModule", {
 exports.order = exports.justifySelf = exports.justifyItems = exports.justifyContent = exports.flexWrap = exports.flexShrink = exports.flexGrow = exports.flexDirection = exports.flexBasis = exports.flex = exports.default = exports.alignSelf = exports.alignItems = exports.alignContent = void 0;
 var _style = _interopRequireDefault(require("./style"));
 var _compose = _interopRequireDefault(require("./compose"));
-const flexBasis = (0, _style.default)({
+const flexBasis = exports.flexBasis = (0, _style.default)({
   prop: 'flexBasis'
 });
-exports.flexBasis = flexBasis;
-const flexDirection = (0, _style.default)({
+const flexDirection = exports.flexDirection = (0, _style.default)({
   prop: 'flexDirection'
 });
-exports.flexDirection = flexDirection;
-const flexWrap = (0, _style.default)({
+const flexWrap = exports.flexWrap = (0, _style.default)({
   prop: 'flexWrap'
 });
-exports.flexWrap = flexWrap;
-const justifyContent = (0, _style.default)({
+const justifyContent = exports.justifyContent = (0, _style.default)({
   prop: 'justifyContent'
 });
-exports.justifyContent = justifyContent;
-const alignItems = (0, _style.default)({
+const alignItems = exports.alignItems = (0, _style.default)({
   prop: 'alignItems'
 });
-exports.alignItems = alignItems;
-const alignContent = (0, _style.default)({
+const alignContent = exports.alignContent = (0, _style.default)({
   prop: 'alignContent'
 });
-exports.alignContent = alignContent;
-const order = (0, _style.default)({
+const order = exports.order = (0, _style.default)({
   prop: 'order'
 });
-exports.order = order;
-const flex = (0, _style.default)({
+const flex = exports.flex = (0, _style.default)({
   prop: 'flex'
 });
-exports.flex = flex;
-const flexGrow = (0, _style.default)({
+const flexGrow = exports.flexGrow = (0, _style.default)({
   prop: 'flexGrow'
 });
-exports.flexGrow = flexGrow;
-const flexShrink = (0, _style.default)({
+const flexShrink = exports.flexShrink = (0, _style.default)({
   prop: 'flexShrink'
 });
-exports.flexShrink = flexShrink;
-const alignSelf = (0, _style.default)({
+const alignSelf = exports.alignSelf = (0, _style.default)({
   prop: 'alignSelf'
 });
-exports.alignSelf = alignSelf;
-const justifyItems = (0, _style.default)({
+const justifyItems = exports.justifyItems = (0, _style.default)({
   prop: 'justifyItems'
 });
-exports.justifyItems = justifyItems;
-const justifySelf = (0, _style.default)({
+const justifySelf = exports.justifySelf = (0, _style.default)({
   prop: 'justifySelf'
 });
-exports.justifySelf = justifySelf;
 const flexbox = (0, _compose.default)(flexBasis, flexDirection, flexWrap, justifyContent, alignItems, alignContent, order, flex, flexGrow, flexShrink, alignSelf, justifyItems, justifySelf);
-var _default = flexbox;
-exports.default = _default;
+var _default = exports.default = flexbox;

package/getThemeValue.js

@@ -27,7 +27,7 @@ const filterPropsMapping = {
   spacing: _spacing.default.filterProps,
   typography: _typography.default.filterProps
 };
-const styleFunctionMapping = {
+const styleFunctionMapping = exports.styleFunctionMapping = {
   borders: _borders.default,
   display: _display.default,
   flexbox: _flexbox.default,
@@ -39,14 +39,12 @@ const styleFunctionMapping = {
   spacing: _spacing.default,
   typography: _typography.default
 };
-exports.styleFunctionMapping = styleFunctionMapping;
-const propToStyleFunction = Object.keys(filterPropsMapping).reduce((acc, styleFnName) => {
+const propToStyleFunction = exports.propToStyleFunction = Object.keys(filterPropsMapping).reduce((acc, styleFnName) => {
   filterPropsMapping[styleFnName].forEach(propName => {
     acc[propName] = styleFunctionMapping[styleFnName];
   });
   return acc;
 }, {});
-exports.propToStyleFunction = propToStyleFunction;
 function getThemeValue(prop, value, theme) {
   const inputProps = {
     [prop]: value,
@@ -57,5 +55,4 @@ function getThemeValue(prop, value, theme) {
     [prop]: value
   };
 }
-var _default = getThemeValue;
-exports.default = _default;
+var _default = exports.default = getThemeValue;

package/index.js

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

package/legacy/createStyled.js

@@ -1,10 +1,10 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 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 _extends from "@babel/runtime/helpers/esm/extends";
 /* 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';
@@ -26,39 +26,47 @@ var getStyleOverrides = function getStyleOverrides(name, theme) {
   }
   return null;
 };
+var transformVariants = function transformVariants(variants) {
+  var variantsStyles = {};
+  if (variants) {
+    variants.forEach(function (definition) {
+      var 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;
   }
-  var variantsStyles = {};
-  variants.forEach(function (definition) {
-    var key = propsToClassKey(definition.props);
-    variantsStyles[key] = definition.style;
-  });
-  return variantsStyles;
+  return transformVariants(variants);
 };
-var variantsResolver = function variantsResolver(props, styles, theme, name) {
-  var _theme$components;
+var variantsResolver = function variantsResolver(props, styles, variants) {
   var _props$ownerState = props.ownerState,
     ownerState = _props$ownerState === void 0 ? {} : _props$ownerState;
   var variantsStyles = [];
-  var themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[name]) == null ? void 0 : _theme$components.variants;
-  if (themeVariants) {
-    themeVariants.forEach(function (themeVariant) {
+  if (variants) {
+    variants.forEach(function (variant) {
       var isMatch = true;
-      Object.keys(themeVariant.props).forEach(function (key) {
-        if (ownerState[key] !== themeVariant.props[key] && props[key] !== themeVariant.props[key]) {
+      Object.keys(variant.props).forEach(function (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;
 };
+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) {
@@ -85,6 +93,28 @@ 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;
+  }
+  if (optionalVariants) {
+    var variantsStyles = variantsResolver(props, transformVariants(optionalVariants), optionalVariants);
+    return [resolvedStyles].concat(_toConsumableArray(variantsStyles));
+  }
+  return resolvedStyles;
+};
 export default function createStyled() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var themeId = input.themeId,
@@ -156,16 +186,65 @@ export default function createStyled() {
         // 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 ? function (props) {
-          return stylesArg(_extends({}, props, {
-            theme: resolveTheme(_extends({}, props, {
+        if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg) {
+          return function (props) {
+            return muiStyledFunctionResolver({
+              styledArg: stylesArg,
+              props: props,
               defaultTheme: defaultTheme,
               themeId: themeId
-            }))
-          }));
-        } : stylesArg;
+            });
+          };
+        }
+        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' &&
+      // 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 (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(function (props) {
           var theme = resolveTheme(_extends({}, props, {
@@ -175,10 +254,10 @@ export default function createStyled() {
           var styleOverrides = getStyleOverrides(componentName, theme);
           if (styleOverrides) {
             var resolvedStyleOverrides = {};
-            Object.entries(styleOverrides).forEach(function (_ref2) {
-              var _ref3 = _slicedToArray(_ref2, 2),
-                slotKey = _ref3[0],
-                slotStyle = _ref3[1];
+            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;
@@ -194,7 +273,7 @@ export default function createStyled() {
             defaultTheme: defaultTheme,
             themeId: themeId
           }));
-          return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
+          return themeVariantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
         });
       }
       if (!skipSx) {
@@ -206,20 +285,6 @@ export default function createStyled() {
         // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
         transformedStyleArg = [].concat(_toConsumableArray(styleArg), _toConsumableArray(placeholders));
         transformedStyleArg.raw = [].concat(_toConsumableArray(styleArg.raw), _toConsumableArray(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 = function transformedStyleArg(props) {
-          return styleArg(_extends({}, props, {
-            theme: resolveTheme(_extends({}, props, {
-              defaultTheme: defaultTheme,
-              themeId: themeId
-            }))
-          }));
-        };
       }
       var Component = defaultStyledResolver.apply(void 0, [transformedStyleArg].concat(_toConsumableArray(expressionsWithDefaultTheme)));
       if (process.env.NODE_ENV !== 'production') {