@mui/material 5.15.15 → 6.0.0-alpha.1

package/legacy/ButtonGroup/ButtonGroup.js

@@ -1,7 +1,9 @@
 'use client';
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -10,12 +12,12 @@ import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import getValidReactChildren from '@mui/utils/getValidReactChildren';
 import capitalize from '../utils/capitalize';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses';
 import ButtonGroupContext from './ButtonGroupContext';
 import ButtonGroupButtonContext from './ButtonGroupButtonContext';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiButtonGroup');
 var overridesResolver = function overridesResolver(props, styles) {
   var ownerState = props.ownerState;
   return [_defineProperty({}, "& .".concat(buttonGroupClasses.grouped), styles.grouped), _defineProperty({}, "& .".concat(buttonGroupClasses.grouped), styles["grouped".concat(capitalize(ownerState.orientation))]), _defineProperty({}, "& .".concat(buttonGroupClasses.grouped), styles["grouped".concat(capitalize(ownerState.variant))]), _defineProperty({}, "& .".concat(buttonGroupClasses.grouped), styles["grouped".concat(capitalize(ownerState.variant)).concat(capitalize(ownerState.orientation))]), _defineProperty({}, "& .".concat(buttonGroupClasses.grouped), styles["grouped".concat(capitalize(ownerState.variant)).concat(capitalize(ownerState.color))]), _defineProperty({}, "& .".concat(buttonGroupClasses.firstButton), styles.firstButton), _defineProperty({}, "& .".concat(buttonGroupClasses.lastButton), styles.lastButton), _defineProperty({}, "& .".concat(buttonGroupClasses.middleButton), styles.middleButton), styles.root, styles[ownerState.variant], ownerState.disableElevation === true && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.orientation === 'vertical' && styles.vertical];
@@ -29,7 +31,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     orientation = ownerState.orientation,
     variant = ownerState.variant;
   var slots = {
-    root: ['root', variant, orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth', disableElevation && 'disableElevation'],
+    root: ['root', variant, orientation, fullWidth && 'fullWidth', disableElevation && 'disableElevation', "color".concat(capitalize(color))],
     grouped: ['grouped', "grouped".concat(capitalize(orientation)), "grouped".concat(capitalize(variant)), "grouped".concat(capitalize(variant)).concat(capitalize(orientation)), "grouped".concat(capitalize(variant)).concat(capitalize(color)), disabled && 'disabled'],
     firstButton: ['firstButton'],
     lastButton: ['lastButton'],
@@ -42,73 +44,166 @@ var ButtonGroupRoot = styled('div', {
   slot: 'Root',
   overridesResolver: overridesResolver
 })(function (_ref9) {
-  var theme = _ref9.theme,
-    ownerState = _ref9.ownerState;
-  return _extends({
+  var theme = _ref9.theme;
+  return _defineProperty({
     display: 'inline-flex',
-    borderRadius: (theme.vars || theme).shape.borderRadius
-  }, ownerState.variant === 'contained' && {
-    boxShadow: (theme.vars || theme).shadows[2]
-  }, ownerState.disableElevation && {
-    boxShadow: 'none'
-  }, ownerState.fullWidth && {
-    width: '100%'
-  }, ownerState.orientation === 'vertical' && {
-    flexDirection: 'column'
-  }, _defineProperty(_defineProperty(_defineProperty({}, "& .".concat(buttonGroupClasses.grouped), _extends({
+    borderRadius: (theme.vars || theme).shape.borderRadius,
+    variants: [{
+      props: {
+        variant: 'contained'
+      },
+      style: {
+        boxShadow: (theme.vars || theme).shadows[2]
+      }
+    }, {
+      props: {
+        disableElevation: true
+      },
+      style: {
+        boxShadow: 'none'
+      }
+    }, {
+      props: {
+        fullWidth: true
+      },
+      style: {
+        width: '100%'
+      }
+    }, {
+      props: {
+        orientation: 'vertical'
+      },
+      style: _defineProperty(_defineProperty({
+        flexDirection: 'column'
+      }, "& .".concat(buttonGroupClasses.lastButton, ",& .").concat(buttonGroupClasses.middleButton), {
+        borderTopRightRadius: 0,
+        borderTopLeftRadius: 0
+      }), "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), {
+        borderBottomRightRadius: 0,
+        borderBottomLeftRadius: 0
+      })
+    }, {
+      props: {
+        orientation: 'horizontal'
+      },
+      style: _defineProperty(_defineProperty({}, "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      }), "& .".concat(buttonGroupClasses.lastButton, ",& .").concat(buttonGroupClasses.middleButton), {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+      })
+    }, {
+      props: {
+        variant: 'text',
+        orientation: 'horizontal'
+      },
+      style: _defineProperty({}, "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), _defineProperty({
+        borderRight: theme.vars ? "1px solid rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
+      }, "&.".concat(buttonGroupClasses.disabled), {
+        borderRight: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
+      }))
+    }, {
+      props: {
+        variant: 'text',
+        orientation: 'vertical'
+      },
+      style: _defineProperty({}, "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), _defineProperty({
+        borderBottom: theme.vars ? "1px solid rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
+      }, "&.".concat(buttonGroupClasses.disabled), {
+        borderBottom: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
+      }))
+    }].concat(_toConsumableArray(Object.entries(theme.palette).filter(function (_ref10) {
+      var _ref11 = _slicedToArray(_ref10, 2),
+        value = _ref11[1];
+      return value.main;
+    }).flatMap(function (_ref12) {
+      var _ref13 = _slicedToArray(_ref12, 1),
+        color = _ref13[0];
+      return [{
+        props: {
+          variant: 'text',
+          color: color
+        },
+        style: _defineProperty({}, "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), {
+          borderColor: theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.5)") : alpha(theme.palette[color].main, 0.5)
+        })
+      }];
+    })), [{
+      props: {
+        variant: 'outlined',
+        orientation: 'horizontal'
+      },
+      style: _defineProperty(_defineProperty({}, "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), {
+        borderRightColor: 'transparent',
+        '&:hover': {
+          borderRightColor: 'currentColor'
+        }
+      }), "& .".concat(buttonGroupClasses.lastButton, ",& .").concat(buttonGroupClasses.middleButton), {
+        marginLeft: -1
+      })
+    }, {
+      props: {
+        variant: 'outlined',
+        orientation: 'vertical'
+      },
+      style: _defineProperty(_defineProperty({}, "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), {
+        borderBottomColor: 'transparent',
+        '&:hover': {
+          borderBottomColor: 'currentColor'
+        }
+      }), "& .".concat(buttonGroupClasses.lastButton, ",& .").concat(buttonGroupClasses.middleButton), {
+        marginTop: -1
+      })
+    }, {
+      props: {
+        variant: 'contained',
+        orientation: 'horizontal'
+      },
+      style: _defineProperty({}, "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), _defineProperty({
+        borderRight: "1px solid ".concat((theme.vars || theme).palette.grey[400])
+      }, "&.".concat(buttonGroupClasses.disabled), {
+        borderRight: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
+      }))
+    }, {
+      props: {
+        variant: 'contained',
+        orientation: 'vertical'
+      },
+      style: _defineProperty({}, "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), _defineProperty({
+        borderBottom: "1px solid ".concat((theme.vars || theme).palette.grey[400])
+      }, "&.".concat(buttonGroupClasses.disabled), {
+        borderBottom: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
+      }))
+    }], _toConsumableArray(Object.entries(theme.palette).filter(function (_ref14) {
+      var _ref15 = _slicedToArray(_ref14, 2),
+        value = _ref15[1];
+      return value.dark;
+    }).map(function (_ref16) {
+      var _ref17 = _slicedToArray(_ref16, 1),
+        color = _ref17[0];
+      return {
+        props: {
+          variant: 'contained',
+          color: color
+        },
+        style: _defineProperty({}, "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), {
+          borderColor: (theme.vars || theme).palette[color].dark
+        })
+      };
+    })))
+  }, "& .".concat(buttonGroupClasses.grouped), {
     minWidth: 40,
-    '&:hover': _extends({}, ownerState.variant === 'contained' && {
-      boxShadow: 'none'
-    })
-  }, ownerState.variant === 'contained' && {
-    boxShadow: 'none'
-  })), "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), _extends({}, ownerState.orientation === 'horizontal' && {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-  }, ownerState.orientation === 'vertical' && {
-    borderBottomRightRadius: 0,
-    borderBottomLeftRadius: 0
-  }, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && _defineProperty({
-    borderRight: theme.vars ? "1px solid rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
-  }, "&.".concat(buttonGroupClasses.disabled), {
-    borderRight: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
-  }), ownerState.variant === 'text' && ownerState.orientation === 'vertical' && _defineProperty({
-    borderBottom: theme.vars ? "1px solid rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
-  }, "&.".concat(buttonGroupClasses.disabled), {
-    borderBottom: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
-  }), ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-    borderColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.5)") : alpha(theme.palette[ownerState.color].main, 0.5)
-  }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-    borderRightColor: 'transparent'
-  }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-    borderBottomColor: 'transparent'
-  }, ownerState.variant === 'contained' && ownerState.orientation === 'horizontal' && _defineProperty({
-    borderRight: "1px solid ".concat((theme.vars || theme).palette.grey[400])
-  }, "&.".concat(buttonGroupClasses.disabled), {
-    borderRight: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
-  }), ownerState.variant === 'contained' && ownerState.orientation === 'vertical' && _defineProperty({
-    borderBottom: "1px solid ".concat((theme.vars || theme).palette.grey[400])
-  }, "&.".concat(buttonGroupClasses.disabled), {
-    borderBottom: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
-  }), ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-    borderColor: (theme.vars || theme).palette[ownerState.color].dark
-  }, {
-    '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-      borderRightColor: 'currentColor'
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-      borderBottomColor: 'currentColor'
-    })
-  })), "& .".concat(buttonGroupClasses.lastButton, ",& .").concat(buttonGroupClasses.middleButton), _extends({}, ownerState.orientation === 'horizontal' && {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0
-  }, ownerState.orientation === 'vertical' && {
-    borderTopRightRadius: 0,
-    borderTopLeftRadius: 0
-  }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-    marginLeft: -1
-  }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-    marginTop: -1
-  })));
+    boxShadow: 'none',
+    props: {
+      variant: 'contained'
+    },
+    style: {
+      '&:hover': {
+        boxShadow: 'none'
+      }
+    }
+  });
 });
 var ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, ref) {
   var props = useThemeProps({

package/legacy/ButtonGroup/buttonGroupClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getButtonGroupUtilityClass(slot) {
   return generateUtilityClass('MuiButtonGroup', slot);
 }
-var buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'firstButton', 'fullWidth', 'vertical', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', 'lastButton', 'middleButton']);
+var buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'firstButton', 'fullWidth', 'horizontal', 'vertical', 'colorPrimary', 'colorSecondary', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', 'lastButton', 'middleButton']);
 export default buttonGroupClasses;

package/legacy/Card/Card.js

@@ -7,11 +7,11 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Paper from '../Paper';
 import { getCardUtilityClass } from './cardClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiCard');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {
@@ -25,10 +25,8 @@ var CardRoot = styled(Paper, {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.root;
   }
-})(function () {
-  return {
-    overflow: 'hidden'
-  };
+})({
+  overflow: 'hidden'
 });
 var Card = /*#__PURE__*/React.forwardRef(function Card(inProps, ref) {
   var props = useThemeProps({

package/legacy/CardActionArea/CardActionArea.js

@@ -7,12 +7,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import cardActionAreaClasses, { getCardActionAreaUtilityClass } from './cardActionAreaClasses';
 import ButtonBase from '../ButtonBase';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiCardActionArea');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {

package/legacy/CardActions/CardActions.js

@@ -1,15 +1,15 @@
 'use client';
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getCardActionsUtilityClass } from './cardActionsClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiCardActions');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     disableSpacing = ownerState.disableSpacing;
@@ -25,17 +25,20 @@ var CardActionsRoot = styled('div', {
     var ownerState = props.ownerState;
     return [styles.root, !ownerState.disableSpacing && styles.spacing];
   }
-})(function (_ref) {
-  var ownerState = _ref.ownerState;
-  return _extends({
-    display: 'flex',
-    alignItems: 'center',
-    padding: 8
-  }, !ownerState.disableSpacing && {
-    '& > :not(style) ~ :not(style)': {
-      marginLeft: 8
+})({
+  display: 'flex',
+  alignItems: 'center',
+  padding: 8,
+  variants: [{
+    props: {
+      disableSpacing: false
+    },
+    style: {
+      '& > :not(style) ~ :not(style)': {
+        marginLeft: 8
+      }
     }
-  });
+  }]
 });
 var CardActions = /*#__PURE__*/React.forwardRef(function CardActions(inProps, ref) {
   var props = useThemeProps({

package/legacy/CardContent/CardContent.js

@@ -6,10 +6,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getCardContentUtilityClass } from './cardContentClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiCardContent');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {
@@ -23,13 +23,11 @@ var CardContentRoot = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.root;
   }
-})(function () {
-  return {
-    padding: 16,
-    '&:last-child': {
-      paddingBottom: 24
-    }
-  };
+})({
+  padding: 16,
+  '&:last-child': {
+    paddingBottom: 24
+  }
 });
 var CardContent = /*#__PURE__*/React.forwardRef(function CardContent(inProps, ref) {
   var props = useThemeProps({

package/legacy/CardHeader/CardHeader.js

@@ -8,11 +8,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Typography from '../Typography';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import cardHeaderClasses, { getCardHeaderUtilityClass } from './cardHeaderClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiCardHeader');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {

package/legacy/CardMedia/CardMedia.js

@@ -1,16 +1,16 @@
 'use client';
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getCardMediaUtilityClass } from './cardMediaClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiCardMedia');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     isMediaComponent = ownerState.isMediaComponent,
@@ -29,19 +29,27 @@ var CardMediaRoot = styled('div', {
       isImageComponent = ownerState.isImageComponent;
     return [styles.root, isMediaComponent && styles.media, isImageComponent && styles.img];
   }
-})(function (_ref) {
-  var ownerState = _ref.ownerState;
-  return _extends({
-    display: 'block',
-    backgroundSize: 'cover',
-    backgroundRepeat: 'no-repeat',
-    backgroundPosition: 'center'
-  }, ownerState.isMediaComponent && {
-    width: '100%'
-  }, ownerState.isImageComponent && {
-    // ⚠️ object-fit is not supported by IE11.
-    objectFit: 'cover'
-  });
+})({
+  display: 'block',
+  backgroundSize: 'cover',
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: 'center',
+  variants: [{
+    props: {
+      isMediaComponent: true
+    },
+    style: {
+      width: '100%'
+    }
+  }, {
+    props: {
+      isImageComponent: true
+    },
+    style: {
+      // ⚠️ object-fit is not supported by IE11.
+      objectFit: 'cover'
+    }
+  }]
 });
 var MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
 var IMAGE_COMPONENTS = ['picture', 'img'];