@mui/material 5.15.13 → 6.0.0-alpha.0

package/node/Autocomplete/Autocomplete.js

@@ -34,8 +34,7 @@ var _outlinedInputClasses = _interopRequireDefault(require("../OutlinedInput/out
 var _filledInputClasses = _interopRequireDefault(require("../FilledInput/filledInputClasses"));
 var _Close = _interopRequireDefault(require("../internal/svg-icons/Close"));
 var _ArrowDropDown = _interopRequireDefault(require("../internal/svg-icons/ArrowDropDown"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _autocompleteClasses = _interopRequireWildcard(require("./autocompleteClasses"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
@@ -44,7 +43,8 @@ var _ClearIcon, _ArrowDropDownIcon;
 const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionKey", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"],
   _excluded2 = ["ref"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiAutocomplete');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -77,7 +77,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _autocompleteClasses.getAutocompleteUtilityClass, classes);
 };
-const AutocompleteRoot = (0, _styled.default)('div', {
+const AutocompleteRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiAutocomplete',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -103,9 +103,7 @@ const AutocompleteRoot = (0, _styled.default)('div', {
       [`& .${_autocompleteClasses.default.input}`]: inputFocused && styles.inputFocused
     }, styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   [`&.${_autocompleteClasses.default.focused} .${_autocompleteClasses.default.clearIndicator}`]: {
     visibility: 'visible'
   },
@@ -114,17 +112,11 @@ const AutocompleteRoot = (0, _styled.default)('div', {
     [`&:hover .${_autocompleteClasses.default.clearIndicator}`]: {
       visibility: 'visible'
     }
-  }
-}, ownerState.fullWidth && {
-  width: '100%'
-}, {
-  [`& .${_autocompleteClasses.default.tag}`]: (0, _extends2.default)({
+  },
+  [`& .${_autocompleteClasses.default.tag}`]: {
     margin: 3,
     maxWidth: 'calc(100% - 6px)'
-  }, ownerState.size === 'small' && {
-    margin: 2,
-    maxWidth: 'calc(100% - 4px)'
-  }),
+  },
   [`& .${_autocompleteClasses.default.inputRoot}`]: {
     flexWrap: 'wrap',
     [`.${_autocompleteClasses.default.hasPopupIcon}&, .${_autocompleteClasses.default.hasClearIcon}&`]: {
@@ -213,15 +205,40 @@ const AutocompleteRoot = (0, _styled.default)('div', {
       paddingBottom: 9
     }
   },
-  [`& .${_autocompleteClasses.default.input}`]: (0, _extends2.default)({
+  [`& .${_autocompleteClasses.default.input}`]: {
     flexGrow: 1,
     textOverflow: 'ellipsis',
     opacity: 0
-  }, ownerState.inputFocused && {
-    opacity: 1
-  })
-}));
-const AutocompleteEndAdornment = (0, _styled.default)('div', {
+  },
+  variants: [{
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      [`& .${_autocompleteClasses.default.tag}`]: {
+        margin: 2,
+        maxWidth: 'calc(100% - 4px)'
+      }
+    }
+  }, {
+    props: {
+      inputFocused: true
+    },
+    style: {
+      [`& .${_autocompleteClasses.default.input}`]: {
+        opacity: 1
+      }
+    }
+  }]
+});
+const AutocompleteEndAdornment = (0, _zeroStyled.styled)('div', {
   name: 'MuiAutocomplete',
   slot: 'EndAdornment',
   overridesResolver: (props, styles) => styles.endAdornment
@@ -232,7 +249,7 @@ const AutocompleteEndAdornment = (0, _styled.default)('div', {
   top: '50%',
   transform: 'translate(0, -50%)'
 });
-const AutocompleteClearIndicator = (0, _styled.default)(_IconButton.default, {
+const AutocompleteClearIndicator = (0, _zeroStyled.styled)(_IconButton.default, {
   name: 'MuiAutocomplete',
   slot: 'ClearIndicator',
   overridesResolver: (props, styles) => styles.clearIndicator
@@ -241,21 +258,25 @@ const AutocompleteClearIndicator = (0, _styled.default)(_IconButton.default, {
   padding: 4,
   visibility: 'hidden'
 });
-const AutocompletePopupIndicator = (0, _styled.default)(_IconButton.default, {
+const AutocompletePopupIndicator = (0, _zeroStyled.styled)(_IconButton.default, {
   name: 'MuiAutocomplete',
   slot: 'PopupIndicator',
   overridesResolver: ({
     ownerState
   }, styles) => (0, _extends2.default)({}, styles.popupIndicator, ownerState.popupOpen && styles.popupIndicatorOpen)
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   padding: 2,
-  marginRight: -2
-}, ownerState.popupOpen && {
-  transform: 'rotate(180deg)'
-}));
-const AutocompletePopper = (0, _styled.default)(_Popper.default, {
+  marginRight: -2,
+  variants: [{
+    props: {
+      popupOpen: true
+    },
+    style: {
+      transform: 'rotate(180deg)'
+    }
+  }]
+});
+const AutocompletePopper = (0, _zeroStyled.styled)(_Popper.default, {
   name: 'MuiAutocomplete',
   slot: 'Popper',
   overridesResolver: (props, styles) => {
@@ -267,14 +288,19 @@ const AutocompletePopper = (0, _styled.default)(_Popper.default, {
     }, styles.popper, ownerState.disablePortal && styles.popperDisablePortal];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
-  zIndex: (theme.vars || theme).zIndex.modal
-}, ownerState.disablePortal && {
-  position: 'absolute'
+  theme
+}) => ({
+  zIndex: (theme.vars || theme).zIndex.modal,
+  variants: [{
+    props: {
+      disablePortal: true
+    },
+    style: {
+      position: 'absolute'
+    }
+  }]
 }));
-const AutocompletePaper = (0, _styled.default)(_Paper.default, {
+const AutocompletePaper = (0, _zeroStyled.styled)(_Paper.default, {
   name: 'MuiAutocomplete',
   slot: 'Paper',
   overridesResolver: (props, styles) => styles.paper
@@ -283,7 +309,7 @@ const AutocompletePaper = (0, _styled.default)(_Paper.default, {
 }) => (0, _extends2.default)({}, theme.typography.body1, {
   overflow: 'auto'
 }));
-const AutocompleteLoading = (0, _styled.default)('div', {
+const AutocompleteLoading = (0, _zeroStyled.styled)('div', {
   name: 'MuiAutocomplete',
   slot: 'Loading',
   overridesResolver: (props, styles) => styles.loading
@@ -293,7 +319,7 @@ const AutocompleteLoading = (0, _styled.default)('div', {
   color: (theme.vars || theme).palette.text.secondary,
   padding: '14px 16px'
 }));
-const AutocompleteNoOptions = (0, _styled.default)('div', {
+const AutocompleteNoOptions = (0, _zeroStyled.styled)('div', {
   name: 'MuiAutocomplete',
   slot: 'NoOptions',
   overridesResolver: (props, styles) => styles.noOptions
@@ -303,7 +329,7 @@ const AutocompleteNoOptions = (0, _styled.default)('div', {
   color: (theme.vars || theme).palette.text.secondary,
   padding: '14px 16px'
 }));
-const AutocompleteListbox = (0, _styled.default)('div', {
+const AutocompleteListbox = (0, _zeroStyled.styled)('div', {
   name: 'MuiAutocomplete',
   slot: 'Listbox',
   overridesResolver: (props, styles) => styles.listbox
@@ -362,7 +388,7 @@ const AutocompleteListbox = (0, _styled.default)('div', {
     }
   }
 }));
-const AutocompleteGroupLabel = (0, _styled.default)(_ListSubheader.default, {
+const AutocompleteGroupLabel = (0, _zeroStyled.styled)(_ListSubheader.default, {
   name: 'MuiAutocomplete',
   slot: 'GroupLabel',
   overridesResolver: (props, styles) => styles.groupLabel
@@ -372,7 +398,7 @@ const AutocompleteGroupLabel = (0, _styled.default)(_ListSubheader.default, {
   backgroundColor: (theme.vars || theme).palette.background.paper,
   top: -8
 }));
-const AutocompleteGroupUl = (0, _styled.default)('ul', {
+const AutocompleteGroupUl = (0, _zeroStyled.styled)('ul', {
   name: 'MuiAutocomplete',
   slot: 'GroupUl',
   overridesResolver: (props, styles) => styles.groupUl
@@ -384,7 +410,7 @@ const AutocompleteGroupUl = (0, _styled.default)('ul', {
 });
 const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps, ref) {
   var _slotProps$clearIndic, _slotProps$paper, _slotProps$popper, _slotProps$popupIndic;
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiAutocomplete'
   });
@@ -587,7 +613,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     }))
   }));
   let autocompletePopper = null;
-  if (!loading && groupedOptions.length > 0) {
+  if (groupedOptions.length > 0) {
     autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteListbox, (0, _extends2.default)({
       as: ListboxComponent,
       className: classes.listbox,
@@ -924,7 +950,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   ListboxProps: _propTypes.default.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.default.bool,

package/node/Autocomplete/index.js

@@ -40,4 +40,4 @@ Object.keys(_autocompleteClasses).forEach(function (key) {
   });
 });
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/node/Avatar/Avatar.js

@@ -19,7 +19,7 @@ var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["alt", "children", "className", "component", "slots", "slotProps", "imgProps", "sizes", "src", "srcSet", "variant"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiAvatar');
 const useUtilityClasses = ownerState => {
   const {

package/node/Avatar/index.js

@@ -34,4 +34,4 @@ Object.keys(_avatarClasses).forEach(function (key) {
   });
 });
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/node/AvatarGroup/AvatarGroup.js

@@ -14,18 +14,18 @@ var _reactIs = require("react-is");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _Avatar = _interopRequireWildcard(require("../Avatar"));
 var _avatarGroupClasses = _interopRequireWildcard(require("./avatarGroupClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "component", "componentsProps", "max", "renderSurplus", "slotProps", "spacing", "total", "variant"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const SPACINGS = {
   small: -16,
-  medium: null
+  medium: -8
 };
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiAlert');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -36,33 +36,29 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _avatarGroupClasses.getAvatarGroupUtilityClass, classes);
 };
-const AvatarGroupRoot = (0, _styled.default)('div', {
+const AvatarGroupRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiAvatarGroup',
   slot: 'Root',
   overridesResolver: (props, styles) => (0, _extends2.default)({
     [`& .${_avatarGroupClasses.default.avatar}`]: styles.avatar
   }, styles.root)
 })(({
-  theme,
-  ownerState
-}) => {
-  const marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing;
-  return {
-    [`& .${_Avatar.avatarClasses.root}`]: {
-      border: `2px solid ${(theme.vars || theme).palette.background.default}`,
-      boxSizing: 'content-box',
-      marginLeft: marginValue != null ? marginValue : -8,
-      '&:last-child': {
-        marginLeft: 0
-      }
-    },
-    display: 'flex',
-    flexDirection: 'row-reverse'
-  };
-});
+  theme
+}) => ({
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  [`& .${_Avatar.avatarClasses.root}`]: {
+    border: `2px solid ${(theme.vars || theme).palette.background.default}`,
+    boxSizing: 'content-box',
+    marginLeft: 'var(--AvatarGroup-spacing, -8px)',
+    '&:last-child': {
+      marginLeft: 0
+    }
+  }
+}));
 const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
   var _slotProps$additional;
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiAvatarGroup'
   });
@@ -104,6 +100,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   const extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : `+${extraAvatars}`;
   const additionalAvatarSlotProps = (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
+  const marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing || -8;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AvatarGroupRoot, (0, _extends2.default)({
     as: component,
     ownerState: ownerState,
@@ -114,6 +111,9 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
       variant: variant
     }, additionalAvatarSlotProps, {
       className: (0, _clsx.default)(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
+      style: (0, _extends2.default)({
+        '--AvatarRoot-spacing': marginValue ? `${marginValue}px` : undefined
+      }, other.style),
       children: extraAvatarsElement
     })) : null, children.slice(0, maxAvatars).reverse().map(child => {
       return /*#__PURE__*/React.cloneElement(child, {
@@ -189,6 +189,10 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes /* remove-proptype
    * @default 'medium'
    */
   spacing: _propTypes.default.oneOfType([_propTypes.default.oneOf(['medium', 'small']), _propTypes.default.number]),
+  /**
+   * @ignore
+   */
+  style: _propTypes.default.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/AvatarGroup/index.js

@@ -34,4 +34,4 @@ Object.keys(_avatarGroupClasses).forEach(function (key) {
   });
 });
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/node/Backdrop/Backdrop.js

@@ -6,20 +6,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _Fade = _interopRequireDefault(require("../Fade"));
 var _backdropClasses = require("./backdropClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
+const _excluded = ["children", "className", "component", "invisible", "open", "components", "componentsProps", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiBackdrop');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -30,7 +31,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _backdropClasses.getBackdropUtilityClass, classes);
 };
-const BackdropRoot = (0, _styled.default)('div', {
+const BackdropRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiBackdrop',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -39,9 +40,7 @@ const BackdropRoot = (0, _styled.default)('div', {
     } = props;
     return [styles.root, ownerState.invisible && styles.invisible];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   position: 'fixed',
   display: 'flex',
   alignItems: 'center',
@@ -51,13 +50,18 @@ const BackdropRoot = (0, _styled.default)('div', {
   top: 0,
   left: 0,
   backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  WebkitTapHighlightColor: 'transparent'
-}, ownerState.invisible && {
-  backgroundColor: 'transparent'
-}));
+  WebkitTapHighlightColor: 'transparent',
+  variants: [{
+    props: {
+      invisible: true
+    },
+    style: {
+      backgroundColor: 'transparent'
+    }
+  }]
+});
 const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
-  var _slotProps$root, _ref, _slots$root;
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiBackdrop'
   });
@@ -65,13 +69,13 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
       children,
       className,
       component = 'div',
-      components = {},
-      componentsProps = {},
       invisible = false,
       open,
+      components = {},
+      componentsProps = {},
       slotProps = {},
       slots = {},
-      TransitionComponent = _Fade.default,
+      TransitionComponent: TransitionComponentProp,
       transitionDuration
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -80,17 +84,34 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     invisible
   });
   const classes = useUtilityClasses(ownerState);
-  const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
+  const backwardCompatibleSlots = (0, _extends2.default)({
+    transition: TransitionComponentProp,
+    root: components.Root
+  }, slots);
+  const backwardCompatibleSlotProps = (0, _extends2.default)({}, componentsProps, slotProps);
+  const externalForwardedProps = {
+    slots: backwardCompatibleSlots,
+    slotProps: backwardCompatibleSlotProps
+  };
+  const [RootSlot, rootProps] = (0, _useSlot.default)('root', {
+    elementType: BackdropRoot,
+    externalForwardedProps,
+    className: (0, _clsx.default)(classes.root, className),
+    ownerState
+  });
+  const [TransitionSlot, transitionProps] = (0, _useSlot.default)('transition', {
+    elementType: _Fade.default,
+    externalForwardedProps,
+    ownerState
+  });
+  delete transitionProps.ownerState;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionSlot, (0, _extends2.default)({
     in: open,
     timeout: transitionDuration
-  }, other, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BackdropRoot, (0, _extends2.default)({
+  }, other, transitionProps, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RootSlot, (0, _extends2.default)({
       "aria-hidden": true
-    }, rootSlotProps, {
-      as: (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : component,
-      className: (0, _clsx.default)(classes.root, className, rootSlotProps == null ? void 0 : rootSlotProps.className),
-      ownerState: (0, _extends2.default)({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
+    }, rootProps, {
       classes: classes,
       ref: ref,
       children: children
@@ -153,25 +174,20 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    */
   open: _propTypes.default.bool.isRequired,
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-   *
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: _propTypes.default.shape({
-    root: _propTypes.default.object
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
   /**
    * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: _propTypes.default.shape({
-    root: _propTypes.default.elementType
+    root: _propTypes.default.elementType,
+    transition: _propTypes.default.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -181,6 +197,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Fade
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   TransitionComponent: _propTypes.default.elementType,
   /**

package/node/Backdrop/index.js

@@ -34,4 +34,4 @@ Object.keys(_backdropClasses).forEach(function (key) {
   });
 });
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/node/Badge/Badge.js

@@ -21,7 +21,7 @@ var _badgeClasses = _interopRequireWildcard(require("./badgeClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
 const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiBadge');

package/node/Badge/index.js

@@ -34,4 +34,4 @@ Object.keys(_badgeClasses).forEach(function (key) {
   });
 });
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/node/BottomNavigation/BottomNavigation.js

@@ -13,13 +13,13 @@ var _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _bottomNavigationClasses = require("./bottomNavigationClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "component", "onChange", "showLabels", "value"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiBottomNavigation');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -29,7 +29,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _bottomNavigationClasses.getBottomNavigationUtilityClass, classes);
 };
-const BottomNavigationRoot = (0, _styled.default)('div', {
+const BottomNavigationRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiBottomNavigation',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -42,7 +42,7 @@ const BottomNavigationRoot = (0, _styled.default)('div', {
   backgroundColor: (theme.vars || theme).palette.background.paper
 }));
 const BottomNavigation = /*#__PURE__*/React.forwardRef(function BottomNavigation(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiBottomNavigation'
   });

package/node/BottomNavigation/index.js

@@ -34,4 +34,4 @@ Object.keys(_bottomNavigationClasses).forEach(function (key) {
   });
 });
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }