@mui/material 6.0.0-alpha.5 → 6.0.0-alpha.7

package/node/Autocomplete/Autocomplete.js

@@ -37,11 +37,12 @@ var _ArrowDropDown = _interopRequireDefault(require("../internal/svg-icons/Arrow
 var _zeroStyled = require("../zero-styled");
 var _autocompleteClasses = _interopRequireWildcard(require("./autocompleteClasses"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 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"];
+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", "slots", "slotProps", "value"],
+  _excluded2 = ["ref"],
+  _excluded3 = ["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 && {}.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');
@@ -104,21 +105,11 @@ const AutocompleteRoot = (0, _zeroStyled.styled)('div', {
     }, styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
   }
 })({
-  [`&.${_autocompleteClasses.default.focused} .${_autocompleteClasses.default.clearIndicator}`]: {
-    visibility: 'visible'
-  },
-  /* Avoid double tap issue on iOS */
-  '@media (pointer: fine)': {
-    [`&:hover .${_autocompleteClasses.default.clearIndicator}`]: {
-      visibility: 'visible'
-    }
-  },
   [`& .${_autocompleteClasses.default.tag}`]: {
     margin: 3,
     maxWidth: 'calc(100% - 6px)'
   },
   [`& .${_autocompleteClasses.default.inputRoot}`]: {
-    flexWrap: 'wrap',
     [`.${_autocompleteClasses.default.hasPopupIcon}&, .${_autocompleteClasses.default.hasClearIcon}&`]: {
       paddingRight: 26 + 4
     },
@@ -130,6 +121,23 @@ const AutocompleteRoot = (0, _zeroStyled.styled)('div', {
       minWidth: 30
     }
   },
+  [`&.${_autocompleteClasses.default.focused}`]: {
+    [`& .${_autocompleteClasses.default.clearIndicator}`]: {
+      visibility: 'visible'
+    },
+    [`& .${_autocompleteClasses.default.input}`]: {
+      minWidth: 0
+    }
+  },
+  /* Avoid double tap issue on iOS */
+  '@media (pointer: fine)': {
+    [`&:hover .${_autocompleteClasses.default.clearIndicator}`]: {
+      visibility: 'visible'
+    },
+    [`&:hover .${_autocompleteClasses.default.input}`]: {
+      minWidth: 0
+    }
+  },
   [`& .${_inputClasses.default.root}`]: {
     paddingBottom: 1,
     '& .MuiInput-input': {
@@ -236,6 +244,15 @@ const AutocompleteRoot = (0, _zeroStyled.styled)('div', {
         opacity: 1
       }
     }
+  }, {
+    props: {
+      multiple: true
+    },
+    style: {
+      [`& .${_autocompleteClasses.default.inputRoot}`]: {
+        flexWrap: 'wrap'
+      }
+    }
   }]
 });
 const AutocompleteEndAdornment = (0, _zeroStyled.styled)('div', {
@@ -409,7 +426,6 @@ const AutocompleteGroupUl = (0, _zeroStyled.styled)('ul', {
   }
 });
 const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps, ref) {
-  var _slotProps$clearIndic, _slotProps$paper, _slotProps$popper, _slotProps$popupIndic;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiAutocomplete'
@@ -421,7 +437,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       autoHighlight = false,
       autoSelect = false,
       blurOnSelect = false,
-      ChipProps,
+      ChipProps: ChipPropsProp,
       className,
       clearIcon = _ClearIcon || (_ClearIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
         fontSize: "small"
@@ -430,7 +446,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       clearOnEscape = false,
       clearText = 'Clear',
       closeText = 'Close',
-      componentsProps = {},
+      componentsProps,
       defaultValue = props.multiple ? [] : null,
       disableClearable = false,
       disableCloseOnSelect = false,
@@ -448,16 +464,16 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       handleHomeEndKeys = !props.freeSolo,
       includeInputInList = false,
       limitTags = -1,
-      ListboxComponent = 'ul',
-      ListboxProps,
+      ListboxComponent: ListboxComponentProp,
+      ListboxProps: ListboxPropsProp,
       loading = false,
       loadingText = 'Loading…',
       multiple = false,
       noOptionsText = 'No options',
       openOnFocus = false,
       openText = 'Open',
-      PaperComponent = _Paper.default,
-      PopperComponent = _Popper.default,
+      PaperComponent: PaperComponentProp,
+      PopperComponent: PopperComponentProp,
       popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropDown.default, {})),
       readOnly = false,
       renderGroup: renderGroupProp,
@@ -466,6 +482,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       renderTags,
       selectOnFocus = !props.freeSolo,
       size = 'medium',
+      slots = {},
       slotProps = {}
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -499,15 +516,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const {
     onMouseDown: handleInputMouseDown
   } = getInputProps();
-  const {
-    ref: externalListboxRef
-  } = ListboxProps != null ? ListboxProps : {};
   const _getListboxProps = getListboxProps(),
     {
       ref: listboxRef
     } = _getListboxProps,
     otherListboxProps = (0, _objectWithoutPropertiesLoose2.default)(_getListboxProps, _excluded2);
-  const combinedListboxRef = (0, _useForkRef.default)(listboxRef, externalListboxRef);
   const defaultGetOptionLabel = option => {
     var _option$label;
     return (_option$label = option.label) != null ? _option$label : option;
@@ -528,6 +541,46 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     size
   });
   const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = {
+    slots: (0, _extends2.default)({
+      listbox: ListboxComponentProp,
+      paper: PaperComponentProp,
+      popper: PopperComponentProp
+    }, slots),
+    slotProps: (0, _extends2.default)({
+      chip: ChipPropsProp,
+      listbox: ListboxPropsProp
+    }, componentsProps, slotProps)
+  };
+  const [ListboxSlot, listboxProps] = (0, _useSlot.default)('listbox', {
+    elementType: 'ul',
+    externalForwardedProps,
+    ownerState,
+    className: classes.listbox,
+    additionalProps: otherListboxProps,
+    ref: listboxRef
+  });
+  const [PaperSlot, paperProps] = (0, _useSlot.default)('paper', {
+    elementType: _Paper.default,
+    externalForwardedProps,
+    ownerState,
+    className: classes.paper
+  });
+  const [PopperSlot, popperProps] = (0, _useSlot.default)('popper', {
+    elementType: _Popper.default,
+    externalForwardedProps,
+    ownerState,
+    className: classes.popper,
+    additionalProps: {
+      disablePortal,
+      style: {
+        width: anchorEl ? anchorEl.clientWidth : null
+      },
+      role: 'presentation',
+      anchorEl,
+      open: popupOpen
+    }
+  });
   let startAdornment;
   if (multiple && value.length > 0) {
     const getCustomizedTagProps = params => (0, _extends2.default)({
@@ -537,12 +590,19 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     if (renderTags) {
       startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
     } else {
-      startAdornment = value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, (0, _extends2.default)({
-        label: getOptionLabel(option),
-        size: size
-      }, getCustomizedTagProps({
-        index
-      }), ChipProps)));
+      startAdornment = value.map((option, index) => {
+        const _getCustomizedTagProp = getCustomizedTagProps({
+            index
+          }),
+          {
+            key
+          } = _getCustomizedTagProp,
+          customTagProps = (0, _objectWithoutPropertiesLoose2.default)(_getCustomizedTagProp, _excluded3);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, (0, _extends2.default)({
+          label: getOptionLabel(option),
+          size: size
+        }, customTagProps, externalForwardedProps.slotProps.chip), key);
+      });
     }
   }
   if (limitTags > -1 && Array.isArray(startAdornment)) {
@@ -588,38 +648,22 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       inputValue
     }, ownerState);
   };
-  const clearIndicatorSlotProps = (_slotProps$clearIndic = slotProps.clearIndicator) != null ? _slotProps$clearIndic : componentsProps.clearIndicator;
-  const paperSlotProps = (_slotProps$paper = slotProps.paper) != null ? _slotProps$paper : componentsProps.paper;
-  const popperSlotProps = (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper;
-  const popupIndicatorSlotProps = (_slotProps$popupIndic = slotProps.popupIndicator) != null ? _slotProps$popupIndic : componentsProps.popupIndicator;
+  const clearIndicatorSlotProps = externalForwardedProps.slotProps.clearIndicator;
+  const popupIndicatorSlotProps = externalForwardedProps.slotProps.popupIndicator;
   const renderAutocompletePopperChildren = children => /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopper, (0, _extends2.default)({
-    as: PopperComponent,
-    disablePortal: disablePortal,
-    style: {
-      width: anchorEl ? anchorEl.clientWidth : null
-    },
-    ownerState: ownerState,
-    role: "presentation",
-    anchorEl: anchorEl,
-    open: popupOpen
-  }, popperSlotProps, {
-    className: (0, _clsx.default)(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
+    as: PopperSlot
+  }, popperProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePaper, (0, _extends2.default)({
-      ownerState: ownerState,
-      as: PaperComponent
-    }, paperSlotProps, {
-      className: (0, _clsx.default)(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
+      as: PaperSlot
+    }, paperProps, {
       children: children
     }))
   }));
   let autocompletePopper = null;
   if (groupedOptions.length > 0) {
     autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteListbox, (0, _extends2.default)({
-      as: ListboxComponent,
-      className: classes.listbox,
-      ownerState: ownerState
-    }, otherListboxProps, ListboxProps, {
-      ref: combinedListboxRef,
+      as: ListboxSlot
+    }, listboxProps, {
       children: groupedOptions.map((option, index) => {
         if (groupBy) {
           return renderGroup({
@@ -740,6 +784,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   blurOnSelect: _propTypes.default.oneOfType([_propTypes.default.oneOf(['mouse', 'touch']), _propTypes.default.bool]),
   /**
    * Props applied to the [`Chip`](/material-ui/api/chip/) element.
+   * @deprecated Use `slotProps.chip` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   ChipProps: _propTypes.default.object,
   /**
@@ -784,7 +829,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   closeText: _propTypes.default.string,
   /**
    * The props used for each slot inside.
-   * @default {}
+   * @deprecated Use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   componentsProps: _propTypes.default.shape({
     clearIndicator: _propTypes.default.object,
@@ -942,10 +987,12 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   /**
    * The component used to render the listbox.
    * @default 'ul'
+   * @deprecated Use `slots.listbox` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   ListboxComponent: _propTypes.default.elementType,
   /**
    * Props applied to the Listbox element.
+   * @deprecated Use `slotProps.listbox` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   ListboxProps: _propTypes.default.object,
   /**
@@ -1040,11 +1087,13 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   /**
    * The component used to render the body of the popup.
    * @default Paper
+   * @deprecated Use `slots.paper` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   PaperComponent: _propTypes.default.elementType,
   /**
    * The component used to position the popup.
    * @default Popper
+   * @deprecated Use `slots.popper` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   PopperComponent: _propTypes.default.elementType,
   /**
@@ -1105,11 +1154,22 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps: _propTypes.default.shape({
-    clearIndicator: _propTypes.default.object,
-    paper: _propTypes.default.object,
-    popper: _propTypes.default.object,
-    popupIndicator: _propTypes.default.object
+  slotProps: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
+    chip: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    clearIndicator: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    listbox: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    paper: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    popper: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    popupIndicator: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    listbox: _propTypes.default.elementType,
+    paper: _propTypes.default.elementType,
+    popper: _propTypes.default.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.

package/node/Avatar/Avatar.js

@@ -254,7 +254,7 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
    * It can be used to listen for the loading error event.
-   * @deprecated Use `slotProps.img` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated Use `slotProps.img` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   imgProps: _propTypes.default.object,
   /**

package/node/Backdrop/Backdrop.js

@@ -197,7 +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/).
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionComponent: _propTypes.default.elementType,
   /**

package/node/Badge/Badge.js

@@ -366,7 +366,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
   /**
    * The components used for each slot inside.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -378,7 +378,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */

package/node/Breadcrumbs/BreadcrumbCollapsed.js

@@ -11,14 +11,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _colorManipulator = require("@mui/system/colorManipulator");
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _MoreHoriz = _interopRequireDefault(require("../internal/svg-icons/MoreHoriz"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 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 && {}.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 BreadcrumbCollapsedButton = (0, _styled.default)(_ButtonBase.default)(({
+const BreadcrumbCollapsedButton = (0, _zeroStyled.styled)(_ButtonBase.default)(({
   theme
 }) => (0, _extends2.default)({
   display: 'flex',
@@ -45,7 +45,7 @@ const BreadcrumbCollapsedButton = (0, _styled.default)(_ButtonBase.default)(({
     backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.grey[600], 0.12)
   })
 }));
-const BreadcrumbCollapsedIcon = (0, _styled.default)(_MoreHoriz.default)({
+const BreadcrumbCollapsedIcon = (0, _zeroStyled.styled)(_MoreHoriz.default)({
   width: 24,
   height: 16
 });

package/node/Button/Button.js

@@ -14,7 +14,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
-var _styled = require("../styles/styled");
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
@@ -73,7 +73,7 @@ const commonIconStyles = [{
   }
 }];
 const ButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
   name: 'MuiButton',
   slot: 'Root',
   overridesResolver: (props, styles) => {

package/node/Checkbox/Checkbox.js

@@ -23,7 +23,7 @@ var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShoul
 var _checkboxClasses = _interopRequireWildcard(require("./checkboxClasses"));
 var _zeroStyled = require("../zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
+const _excluded = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "disableRipple", "className"];
 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 && {}.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)('MuiCheckbox');
@@ -118,12 +118,14 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
       indeterminateIcon: indeterminateIconProp = defaultIndeterminateIcon,
       inputProps,
       size = 'medium',
+      disableRipple = false,
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const icon = indeterminate ? indeterminateIconProp : iconProp;
   const indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
   const ownerState = (0, _extends2.default)({}, props, {
+    disableRipple,
     color,
     indeterminate,
     size

package/node/Chip/chipClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getChipUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiChip', slot);
 }
-const chipClasses = (0, _generateUtilityClasses.default)('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
+const chipClasses = (0, _generateUtilityClasses.default)('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorDefault', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
 var _default = exports.default = chipClasses;

package/node/Collapse/Collapse.js

@@ -6,8 +6,8 @@ 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 _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -15,8 +15,7 @@ var _reactTransitionGroup = require("react-transition-group");
 var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
 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 _createTransitions = require("../styles/createTransitions");
 var _utils = require("../transitions/utils");
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
@@ -26,6 +25,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
 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 && {}.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)('MuiCollapse');
 const useUtilityClasses = ownerState => {
   const {
     orientation,
@@ -40,7 +40,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _collapseClasses.getCollapseUtilityClass, classes);
 };
-const CollapseRoot = (0, _styled.default)('div', {
+const CollapseRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiCollapse',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -50,50 +50,79 @@ const CollapseRoot = (0, _styled.default)('div', {
     return [styles.root, styles[ownerState.orientation], ownerState.state === 'entered' && styles.entered, ownerState.state === 'exited' && !ownerState.in && ownerState.collapsedSize === '0px' && styles.hidden];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   height: 0,
   overflow: 'hidden',
-  transition: theme.transitions.create('height')
-}, ownerState.orientation === 'horizontal' && {
-  height: 'auto',
-  width: 0,
-  transition: theme.transitions.create('width')
-}, ownerState.state === 'entered' && (0, _extends2.default)({
-  height: 'auto',
-  overflow: 'visible'
-}, ownerState.orientation === 'horizontal' && {
-  width: 'auto'
-}), ownerState.state === 'exited' && !ownerState.in && ownerState.collapsedSize === '0px' && {
-  visibility: 'hidden'
+  transition: theme.transitions.create('height'),
+  variants: [{
+    props: {
+      orientation: 'horizontal'
+    },
+    style: {
+      height: 'auto',
+      width: 0,
+      transition: theme.transitions.create('width')
+    }
+  }, {
+    props: {
+      state: 'entered'
+    },
+    style: {
+      height: 'auto',
+      overflow: 'visible'
+    }
+  }, {
+    props: {
+      state: 'entered',
+      orientation: 'horizontal'
+    },
+    style: {
+      width: 'auto'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.state === 'exited' && !ownerState.in && ownerState.collapsedSize === '0px',
+    style: {
+      visibility: 'hidden'
+    }
+  }]
 }));
-const CollapseWrapper = (0, _styled.default)('div', {
+const CollapseWrapper = (0, _zeroStyled.styled)('div', {
   name: 'MuiCollapse',
   slot: 'Wrapper',
   overridesResolver: (props, styles) => styles.wrapper
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   // Hack to get children with a negative margin to not falsify the height computation.
   display: 'flex',
-  width: '100%'
-}, ownerState.orientation === 'horizontal' && {
-  width: 'auto',
-  height: '100%'
-}));
-const CollapseWrapperInner = (0, _styled.default)('div', {
+  width: '100%',
+  variants: [{
+    props: {
+      orientation: 'horizontal'
+    },
+    style: {
+      width: 'auto',
+      height: '100%'
+    }
+  }]
+});
+const CollapseWrapperInner = (0, _zeroStyled.styled)('div', {
   name: 'MuiCollapse',
   slot: 'WrapperInner',
   overridesResolver: (props, styles) => styles.wrapperInner
-})(({
-  ownerState
-}) => (0, _extends2.default)({
-  width: '100%'
-}, ownerState.orientation === 'horizontal' && {
-  width: 'auto',
-  height: '100%'
-}));
+})({
+  width: '100%',
+  variants: [{
+    props: {
+      orientation: 'horizontal'
+    },
+    style: {
+      width: 'auto',
+      height: '100%'
+    }
+  }]
+});
 
 /**
  * The Collapse transition is used by the
@@ -101,7 +130,7 @@ const CollapseWrapperInner = (0, _styled.default)('div', {
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiCollapse'
   });
@@ -381,5 +410,7 @@ process.env.NODE_ENV !== "production" ? Collapse.propTypes /* remove-proptypes *
     exit: _propTypes.default.number
   })])
 } : void 0;
-Collapse.muiSupportAuto = true;
+if (Collapse) {
+  Collapse.muiSupportAuto = true;
+}
 var _default = exports.default = Collapse;