@mui/material 5.15.13 → 5.15.14

package/SvgIcon/SvgIcon.js

@@ -44,7 +44,7 @@ const SvgIconRoot = styled('svg', {
     height: '1em',
     display: 'inline-block',
     // the <svg> will define the property that has `currentColor`
-    // e.g. heroicons uses fill="none" and stroke="currentColor"
+    // for example heroicons uses fill="none" and stroke="currentColor"
     fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
     flexShrink: 0,
     transition: (_theme$transitions = theme.transitions) == null || (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.13
+ * @mui/material v5.15.14
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/Accordion/Accordion.js

@@ -1,9 +1,9 @@
 'use client';
 
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _toArray from "@babel/runtime/helpers/esm/toArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
 import { isFragment } from 'react-is';
@@ -11,8 +11,7 @@ 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 Collapse from '../Collapse';
 import Paper from '../Paper';
 import AccordionContext from './AccordionContext';
@@ -21,6 +20,7 @@ import useSlot from '../utils/useSlot';
 import accordionClasses, { getAccordionUtilityClass } from './accordionClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiAccordion');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     square = ownerState.square,
@@ -85,26 +85,37 @@ var AccordionRoot = styled(Paper, {
     backgroundColor: (theme.vars || theme).palette.action.disabledBackground
   });
 }, function (_ref4) {
-  var theme = _ref4.theme,
-    ownerState = _ref4.ownerState;
-  return _extends({}, !ownerState.square && {
-    borderRadius: 0,
-    '&:first-of-type': {
-      borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
-      borderTopRightRadius: (theme.vars || theme).shape.borderRadius
-    },
-    '&:last-of-type': {
-      borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
-      borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
-      // Fix a rendering issue on Edge
-      '@supports (-ms-ime-align: auto)': {
-        borderBottomLeftRadius: 0,
-        borderBottomRightRadius: 0
+  var theme = _ref4.theme;
+  return {
+    variants: [{
+      props: function props(_props) {
+        return !_props.square;
+      },
+      style: {
+        borderRadius: 0,
+        '&:first-of-type': {
+          borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+          borderTopRightRadius: (theme.vars || theme).shape.borderRadius
+        },
+        '&:last-of-type': {
+          borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+          borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
+          // Fix a rendering issue on Edge
+          '@supports (-ms-ime-align: auto)': {
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0
+          }
+        }
       }
-    }
-  }, !ownerState.disableGutters && _defineProperty({}, "&.".concat(accordionClasses.expanded), {
-    margin: '16px 0'
-  }));
+    }, {
+      props: function props(_props2) {
+        return !_props2.disableGutters;
+      },
+      style: _defineProperty({}, "&.".concat(accordionClasses.expanded), {
+        margin: '16px 0'
+      })
+    }]
+  };
 });
 var Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {
   var props = useThemeProps({

package/legacy/AccordionActions/AccordionActions.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 { getAccordionActionsUtilityClass } from './accordionActionsClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiAccordionActions');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     disableSpacing = ownerState.disableSpacing;
@@ -25,18 +25,21 @@ var AccordionActionsRoot = 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,
-    justifyContent: 'flex-end'
-  }, !ownerState.disableSpacing && {
-    '& > :not(style) ~ :not(style)': {
-      marginLeft: 8
+})({
+  display: 'flex',
+  alignItems: 'center',
+  padding: 8,
+  justifyContent: 'flex-end',
+  variants: [{
+    props: function props(_props) {
+      return !_props.disableSpacing;
+    },
+    style: {
+      '& > :not(style) ~ :not(style)': {
+        marginLeft: 8
+      }
     }
-  });
+  }]
 });
 var AccordionActions = /*#__PURE__*/React.forwardRef(function AccordionActions(inProps, ref) {
   var props = useThemeProps({

package/legacy/AccordionDetails/AccordionDetails.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 { getAccordionDetailsUtilityClass } from './accordionDetailsClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiAccordionDetails');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {

package/legacy/AccordionSummary/AccordionSummary.js

@@ -1,19 +1,19 @@
 'use client';
 
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
 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 ButtonBase from '../ButtonBase';
 import AccordionContext from '../Accordion/AccordionContext';
 import accordionSummaryClasses, { getAccordionSummaryUtilityClass } from './accordionSummaryClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiAccordionSummary');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     expanded = ownerState.expanded,
@@ -34,12 +34,11 @@ var AccordionSummaryRoot = styled(ButtonBase, {
     return styles.root;
   }
 })(function (_ref) {
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
+  var theme = _ref.theme;
   var transition = {
     duration: theme.transitions.duration.shortest
   };
-  return _extends(_defineProperty(_defineProperty(_defineProperty({
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty({
     display: 'flex',
     minHeight: 48,
     padding: theme.spacing(0, 2),
@@ -50,9 +49,14 @@ var AccordionSummaryRoot = styled(ButtonBase, {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
   }), "&:hover:not(.".concat(accordionSummaryClasses.disabled, ")"), {
     cursor: 'pointer'
-  }), !ownerState.disableGutters && _defineProperty({}, "&.".concat(accordionSummaryClasses.expanded), {
-    minHeight: 64
-  }));
+  }), "variants", [{
+    props: function props(_props) {
+      return !_props.disableGutters;
+    },
+    style: _defineProperty({}, "&.".concat(accordionSummaryClasses.expanded), {
+      minHeight: 64
+    })
+  }]);
 });
 var AccordionSummaryContent = styled('div', {
   name: 'MuiAccordionSummary',
@@ -61,19 +65,24 @@ var AccordionSummaryContent = styled('div', {
     return styles.content;
   }
 })(function (_ref3) {
-  var theme = _ref3.theme,
-    ownerState = _ref3.ownerState;
-  return _extends({
+  var theme = _ref3.theme;
+  return {
     display: 'flex',
     flexGrow: 1,
-    margin: '12px 0'
-  }, !ownerState.disableGutters && _defineProperty({
-    transition: theme.transitions.create(['margin'], {
-      duration: theme.transitions.duration.shortest
-    })
-  }, "&.".concat(accordionSummaryClasses.expanded), {
-    margin: '20px 0'
-  }));
+    margin: '12px 0',
+    variants: [{
+      props: function props(_props2) {
+        return !_props2.disableGutters;
+      },
+      style: _defineProperty({
+        transition: theme.transitions.create(['margin'], {
+          duration: theme.transitions.duration.shortest
+        })
+      }, "&.".concat(accordionSummaryClasses.expanded), {
+        margin: '20px 0'
+      })
+    }]
+  };
 });
 var AccordionSummaryExpandIconWrapper = styled('div', {
   name: 'MuiAccordionSummary',
@@ -81,8 +90,8 @@ var AccordionSummaryExpandIconWrapper = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.expandIconWrapper;
   }
-})(function (_ref5) {
-  var theme = _ref5.theme;
+})(function (_ref4) {
+  var theme = _ref4.theme;
   return _defineProperty({
     display: 'flex',
     color: (theme.vars || theme).palette.action.active,

package/legacy/Autocomplete/Autocomplete.js

@@ -3,7 +3,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _ClearIcon, _ArrowDropDownIcon;
+var _styled, _ClearIcon, _ArrowDropDownIcon;
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -23,14 +23,14 @@ import outlinedInputClasses from '../OutlinedInput/outlinedInputClasses';
 import filledInputClasses from '../FilledInput/filledInputClasses';
 import ClearIcon from '../internal/svg-icons/Close';
 import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses';
 import capitalize from '../utils/capitalize';
 import useForkRef from '../utils/useForkRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
+var useThemeProps = createUseThemeProps('MuiAutocomplete');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     disablePortal = ownerState.disablePortal,
@@ -73,89 +73,100 @@ var AutocompleteRoot = styled('div', {
       size = ownerState.size;
     return [_defineProperty({}, "& .".concat(autocompleteClasses.tag), styles.tag), _defineProperty({}, "& .".concat(autocompleteClasses.tag), styles["tagSize".concat(capitalize(size))]), _defineProperty({}, "& .".concat(autocompleteClasses.inputRoot), styles.inputRoot), _defineProperty({}, "& .".concat(autocompleteClasses.input), styles.input), _defineProperty({}, "& .".concat(autocompleteClasses.input), inputFocused && styles.inputFocused), styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
   }
-})(function (_ref6) {
-  var _extends3;
-  var ownerState = _ref6.ownerState;
-  return _extends(_defineProperty(_defineProperty({}, "&.".concat(autocompleteClasses.focused, " .").concat(autocompleteClasses.clearIndicator), {
-    visibility: 'visible'
-  }), '@media (pointer: fine)', _defineProperty({}, "&:hover .".concat(autocompleteClasses.clearIndicator), {
-    visibility: 'visible'
-  })), ownerState.fullWidth && {
+})((_styled = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_styled, "&.".concat(autocompleteClasses.focused, " .").concat(autocompleteClasses.clearIndicator), {
+  visibility: 'visible'
+}), '@media (pointer: fine)', _defineProperty({}, "&:hover .".concat(autocompleteClasses.clearIndicator), {
+  visibility: 'visible'
+})), "& .".concat(autocompleteClasses.tag), {
+  margin: 3,
+  maxWidth: 'calc(100% - 6px)'
+}), "& .".concat(autocompleteClasses.inputRoot), _defineProperty(_defineProperty(_defineProperty({
+  flexWrap: 'wrap'
+}, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
+  paddingRight: 26 + 4
+}), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
+  paddingRight: 52 + 4
+}), "& .".concat(autocompleteClasses.input), {
+  width: 0,
+  minWidth: 30
+})), "& .".concat(inputClasses.root), {
+  paddingBottom: 1,
+  '& .MuiInput-input': {
+    padding: '4px 4px 4px 0px'
+  }
+}), "& .".concat(inputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(inputClasses.input), {
+  padding: '2px 4px 3px 0'
+})), "& .".concat(outlinedInputClasses.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  padding: 9
+}, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
+  paddingRight: 26 + 4 + 9
+}), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
+  paddingRight: 52 + 4 + 9
+}), "& .".concat(autocompleteClasses.input), {
+  padding: '7.5px 4px 7.5px 5px'
+}), "& .".concat(autocompleteClasses.endAdornment), {
+  right: 9
+})), "& .".concat(outlinedInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
+  // Don't specify paddingRight, as it overrides the default value set when there is only
+  // one of the popup or clear icon as the specificity is equal so the latter one wins
+  paddingTop: 6,
+  paddingBottom: 6,
+  paddingLeft: 6
+}, "& .".concat(autocompleteClasses.input), {
+  padding: '2.5px 4px 2.5px 8px'
+})), "& .".concat(filledInputClasses.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  paddingTop: 19,
+  paddingLeft: 8
+}, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
+  paddingRight: 26 + 4 + 9
+}), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
+  paddingRight: 52 + 4 + 9
+}), "& .".concat(filledInputClasses.input), {
+  padding: '7px 4px'
+}), "& .".concat(autocompleteClasses.endAdornment), {
+  right: 9
+})), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
+  paddingBottom: 1
+}, "& .".concat(filledInputClasses.input), {
+  padding: '2.5px 4px'
+})), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_styled, "& .".concat(inputBaseClasses.hiddenLabel), {
+  paddingTop: 8
+}), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel), _defineProperty({
+  paddingTop: 0,
+  paddingBottom: 0
+}, "& .".concat(autocompleteClasses.input), {
+  paddingTop: 16,
+  paddingBottom: 17
+})), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(autocompleteClasses.input), {
+  paddingTop: 8,
+  paddingBottom: 9
+})), "& .".concat(autocompleteClasses.input), {
+  flexGrow: 1,
+  textOverflow: 'ellipsis',
+  opacity: 0
+}), "variants", [{
+  props: {
+    fullWidth: true
+  },
+  style: {
     width: '100%'
-  }, (_extends3 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends3, "& .".concat(autocompleteClasses.tag), _extends({
-    margin: 3,
-    maxWidth: 'calc(100% - 6px)'
-  }, ownerState.size === 'small' && {
+  }
+}, {
+  props: {
+    size: 'small'
+  },
+  style: _defineProperty({}, "& .".concat(autocompleteClasses.tag), {
     margin: 2,
     maxWidth: 'calc(100% - 4px)'
-  })), "& .".concat(autocompleteClasses.inputRoot), _defineProperty(_defineProperty(_defineProperty({
-    flexWrap: 'wrap'
-  }, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
-    paddingRight: 26 + 4
-  }), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
-    paddingRight: 52 + 4
-  }), "& .".concat(autocompleteClasses.input), {
-    width: 0,
-    minWidth: 30
-  })), "& .".concat(inputClasses.root), {
-    paddingBottom: 1,
-    '& .MuiInput-input': {
-      padding: '4px 4px 4px 0px'
-    }
-  }), "& .".concat(inputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(inputClasses.input), {
-    padding: '2px 4px 3px 0'
-  })), "& .".concat(outlinedInputClasses.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    padding: 9
-  }, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
-    paddingRight: 26 + 4 + 9
-  }), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
-    paddingRight: 52 + 4 + 9
-  }), "& .".concat(autocompleteClasses.input), {
-    padding: '7.5px 4px 7.5px 5px'
-  }), "& .".concat(autocompleteClasses.endAdornment), {
-    right: 9
-  })), "& .".concat(outlinedInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
-    // Don't specify paddingRight, as it overrides the default value set when there is only
-    // one of the popup or clear icon as the specificity is equal so the latter one wins
-    paddingTop: 6,
-    paddingBottom: 6,
-    paddingLeft: 6
-  }, "& .".concat(autocompleteClasses.input), {
-    padding: '2.5px 4px 2.5px 8px'
-  })), "& .".concat(filledInputClasses.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    paddingTop: 19,
-    paddingLeft: 8
-  }, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
-    paddingRight: 26 + 4 + 9
-  }), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
-    paddingRight: 52 + 4 + 9
-  }), "& .".concat(filledInputClasses.input), {
-    padding: '7px 4px'
-  }), "& .".concat(autocompleteClasses.endAdornment), {
-    right: 9
-  })), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
-    paddingBottom: 1
-  }, "& .".concat(filledInputClasses.input), {
-    padding: '2.5px 4px'
-  })), "& .".concat(inputBaseClasses.hiddenLabel), {
-    paddingTop: 8
-  }), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel), _defineProperty({
-    paddingTop: 0,
-    paddingBottom: 0
-  }, "& .".concat(autocompleteClasses.input), {
-    paddingTop: 16,
-    paddingBottom: 17
-  })), _defineProperty(_defineProperty(_extends3, "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(autocompleteClasses.input), {
-    paddingTop: 8,
-    paddingBottom: 9
-  })), "& .".concat(autocompleteClasses.input), _extends({
-    flexGrow: 1,
-    textOverflow: 'ellipsis',
-    opacity: 0
-  }, ownerState.inputFocused && {
+  })
+}, {
+  props: {
+    inputFocused: true
+  },
+  style: _defineProperty({}, "& .".concat(autocompleteClasses.input), {
     opacity: 1
-  }))));
-});
+  })
+}])));
 var AutocompleteEndAdornment = styled('div', {
   name: 'MuiAutocomplete',
   slot: 'EndAdornment',
@@ -183,18 +194,21 @@ var AutocompleteClearIndicator = styled(IconButton, {
 var AutocompletePopupIndicator = styled(IconButton, {
   name: 'MuiAutocomplete',
   slot: 'PopupIndicator',
-  overridesResolver: function overridesResolver(_ref7, styles) {
-    var ownerState = _ref7.ownerState;
+  overridesResolver: function overridesResolver(_ref6, styles) {
+    var ownerState = _ref6.ownerState;
     return _extends({}, styles.popupIndicator, ownerState.popupOpen && styles.popupIndicatorOpen);
   }
-})(function (_ref8) {
-  var ownerState = _ref8.ownerState;
-  return _extends({
-    padding: 2,
-    marginRight: -2
-  }, ownerState.popupOpen && {
-    transform: 'rotate(180deg)'
-  });
+})({
+  padding: 2,
+  marginRight: -2,
+  variants: [{
+    props: {
+      popupOpen: true
+    },
+    style: {
+      transform: 'rotate(180deg)'
+    }
+  }]
 });
 var AutocompletePopper = styled(Popper, {
   name: 'MuiAutocomplete',
@@ -203,14 +217,19 @@ var AutocompletePopper = styled(Popper, {
     var ownerState = props.ownerState;
     return [_defineProperty({}, "& .".concat(autocompleteClasses.option), styles.option), styles.popper, ownerState.disablePortal && styles.popperDisablePortal];
   }
-})(function (_ref10) {
-  var theme = _ref10.theme,
-    ownerState = _ref10.ownerState;
-  return _extends({
-    zIndex: (theme.vars || theme).zIndex.modal
-  }, ownerState.disablePortal && {
-    position: 'absolute'
-  });
+})(function (_ref8) {
+  var theme = _ref8.theme;
+  return {
+    zIndex: (theme.vars || theme).zIndex.modal,
+    variants: [{
+      props: {
+        disablePortal: true
+      },
+      style: {
+        position: 'absolute'
+      }
+    }]
+  };
 });
 var AutocompletePaper = styled(Paper, {
   name: 'MuiAutocomplete',
@@ -218,8 +237,8 @@ var AutocompletePaper = styled(Paper, {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.paper;
   }
-})(function (_ref11) {
-  var theme = _ref11.theme;
+})(function (_ref9) {
+  var theme = _ref9.theme;
   return _extends({}, theme.typography.body1, {
     overflow: 'auto'
   });
@@ -230,8 +249,8 @@ var AutocompleteLoading = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.loading;
   }
-})(function (_ref12) {
-  var theme = _ref12.theme;
+})(function (_ref10) {
+  var theme = _ref10.theme;
   return {
     color: (theme.vars || theme).palette.text.secondary,
     padding: '14px 16px'
@@ -243,8 +262,8 @@ var AutocompleteNoOptions = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.noOptions;
   }
-})(function (_ref13) {
-  var theme = _ref13.theme;
+})(function (_ref11) {
+  var theme = _ref11.theme;
   return {
     color: (theme.vars || theme).palette.text.secondary,
     padding: '14px 16px'
@@ -256,8 +275,8 @@ var AutocompleteListbox = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.listbox;
   }
-})(function (_ref14) {
-  var theme = _ref14.theme;
+})(function (_ref12) {
+  var theme = _ref12.theme;
   return _defineProperty({
     listStyle: 'none',
     margin: 0,
@@ -310,8 +329,8 @@ var AutocompleteGroupLabel = styled(ListSubheader, {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.groupLabel;
   }
-})(function (_ref16) {
-  var theme = _ref16.theme;
+})(function (_ref14) {
+  var theme = _ref14.theme;
   return {
     backgroundColor: (theme.vars || theme).palette.background.paper,
     top: -8
@@ -470,8 +489,8 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
   var hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
   var _getInputProps = getInputProps(),
     handleInputMouseDown = _getInputProps.onMouseDown;
-  var _ref17 = ListboxProps != null ? ListboxProps : {},
-    externalListboxRef = _ref17.ref;
+  var _ref15 = ListboxProps != null ? ListboxProps : {},
+    externalListboxRef = _ref15.ref;
   var _getListboxProps = getListboxProps(),
     listboxRef = _getListboxProps.ref,
     otherListboxProps = _objectWithoutProperties(_getListboxProps, ["ref"]);
@@ -928,7 +947,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   ListboxProps: PropTypes.object,
   /**
    * If `true`, the component is in a loading state.
-   * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. `options` are empty).
+   * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty).
    * @default false
    */
   loading: PropTypes.bool,

package/legacy/CircularProgress/CircularProgress.js

@@ -191,7 +191,7 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-pro
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.
-   * If using a string, you need to provide the CSS unit, e.g. '3rem'.
+   * If using a string, you need to provide the CSS unit, for example '3rem'.
    * @default 40
    */
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/legacy/Icon/Icon.js

@@ -102,7 +102,7 @@ process.env.NODE_ENV !== "production" ? Icon.propTypes /* remove-proptypes */ =
   // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The base class applied to the icon. Defaults to 'material-icons', but can be changed to any
-   * other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc).
+   * other base class that suits the icon font you're using (for example material-icons-rounded, fas, etc).
    * @default 'material-icons'
    */
   baseClassName: PropTypes.string,