@mui/material 6.0.0-alpha.9 → 6.0.0-beta.1

package/node/Backdrop/Backdrop.js

@@ -11,13 +11,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _Fade = _interopRequireDefault(require("../Fade"));
 var _backdropClasses = require("./backdropClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 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)('MuiBackdrop');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -58,7 +58,7 @@ const BackdropRoot = (0, _zeroStyled.styled)('div', {
   }]
 });
 const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiBackdrop'
   });
@@ -146,8 +146,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @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 {}
    */
@@ -158,8 +157,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @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 {}
    */
@@ -200,7 +198,6 @@ 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. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionComponent: _propTypes.default.elementType,
   /**

package/node/Badge/Badge.js

@@ -11,9 +11,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _usePreviousProps = _interopRequireDefault(require("@mui/utils/usePreviousProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _useBadge = require("@mui/base/useBadge");
-var _utils = require("@mui/base/utils");
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _useBadge = _interopRequireDefault(require("./useBadge"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _badgeClasses = _interopRequireWildcard(require("./badgeClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -21,7 +22,6 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -218,7 +218,7 @@ const BadgeBadge = (0, _zeroStyled.styled)('span', {
 }));
 const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   var _ref, _slots$root, _ref2, _slots$badge, _slotProps$root, _slotProps$badge;
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiBadge'
   });
@@ -249,7 +249,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     invisible: invisibleFromHook,
     max,
     displayValue: displayValueFromHook
-  } = (0, _useBadge.useBadge)({
+  } = (0, _useBadge.default)({
     max: maxProp,
     invisible: invisibleProp,
     badgeContent: badgeContentProp,
@@ -289,7 +289,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const BadgeSlot = (_ref2 = (_slots$badge = slots == null ? void 0 : slots.badge) != null ? _slots$badge : components.Badge) != null ? _ref2 : BadgeBadge;
   const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
   const badgeSlotProps = (_slotProps$badge = slotProps == null ? void 0 : slotProps.badge) != null ? _slotProps$badge : componentsProps.badge;
-  const rootProps = (0, _utils.useSlotProps)({
+  const rootProps = (0, _useSlotProps.default)({
     elementType: RootSlot,
     externalSlotProps: rootSlotProps,
     externalForwardedProps: other,
@@ -300,7 +300,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     ownerState,
     className: (0, _clsx.default)(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className)
   });
-  const badgeProps = (0, _utils.useSlotProps)({
+  const badgeProps = (0, _useSlotProps.default)({
     elementType: BadgeSlot,
     externalSlotProps: badgeSlotProps,
     ownerState,

package/node/Badge/useBadge.js

@@ -0,0 +1,46 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _utils = require("@mui/utils");
+/**
+ *
+ * Demos:
+ *
+ * - [Badge](https://next.mui.com/base-ui/react-badge/#hook)
+ *
+ * API:
+ *
+ * - [useBadge API](https://next.mui.com/base-ui/react-badge/hooks-api/#use-badge)
+ */
+function useBadge(parameters) {
+  const {
+    badgeContent: badgeContentProp,
+    invisible: invisibleProp = false,
+    max: maxProp = 99,
+    showZero = false
+  } = parameters;
+  const prevProps = (0, _utils.usePreviousProps)({
+    badgeContent: badgeContentProp,
+    max: maxProp
+  });
+  let invisible = invisibleProp;
+  if (invisibleProp === false && badgeContentProp === 0 && !showZero) {
+    invisible = true;
+  }
+  const {
+    badgeContent,
+    max = maxProp
+  } = invisible ? prevProps : parameters;
+  const displayValue = badgeContent && Number(badgeContent) > max ? `${max}+` : badgeContent;
+  return {
+    badgeContent,
+    invisible,
+    max,
+    displayValue
+  };
+}
+var _default = exports.default = useBadge;

package/node/Badge/useBadge.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/BottomNavigation/BottomNavigation.js

@@ -12,11 +12,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _bottomNavigationClasses = require("./bottomNavigationClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 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)('MuiBottomNavigation');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -39,7 +39,7 @@ const BottomNavigationRoot = (0, _zeroStyled.styled)('div', {
   backgroundColor: (theme.vars || theme).palette.background.paper
 }));
 const BottomNavigation = /*#__PURE__*/React.forwardRef(function BottomNavigation(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiBottomNavigation'
   });

package/node/BottomNavigationAction/BottomNavigationAction.js

@@ -11,13 +11,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _unsupportedProp = _interopRequireDefault(require("../utils/unsupportedProp"));
 var _bottomNavigationActionClasses = _interopRequireWildcard(require("./bottomNavigationActionClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 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)('MuiBottomNavigationAction');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -100,7 +100,7 @@ const BottomNavigationActionLabel = (0, _zeroStyled.styled)('span', {
   }]
 }));
 const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavigationAction(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiBottomNavigationAction'
   });

package/node/Breadcrumbs/Breadcrumbs.js

@@ -11,16 +11,16 @@ var _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
-var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _BreadcrumbCollapsed = _interopRequireDefault(require("./BreadcrumbCollapsed"));
 var _breadcrumbsClasses = _interopRequireWildcard(require("./breadcrumbsClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 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)('MuiBreadcrumbs');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -80,7 +80,7 @@ function insertSeparators(items, className, separator, ownerState) {
   }, []);
 }
 const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiBreadcrumbs'
   });
@@ -109,7 +109,7 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
     separator
   };
   const classes = useUtilityClasses(ownerState);
-  const collapsedIconSlotProps = (0, _utils.useSlotProps)({
+  const collapsedIconSlotProps = (0, _useSlotProps.default)({
     elementType: slots.CollapsedIcon,
     externalSlotProps: slotProps.collapsedIcon,
     ownerState

package/node/Button/Button.js

@@ -14,6 +14,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _buttonClasses = _interopRequireWildcard(require("./buttonClasses"));
@@ -22,7 +23,6 @@ var _ButtonGroupButtonContext = _interopRequireDefault(require("../ButtonGroup/B
 var _jsxRuntime = require("react/jsx-runtime");
 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)('MuiButton');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -322,7 +322,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
   const contextProps = React.useContext(_ButtonGroupContext.default);
   const buttonGroupButtonContextPositionClassName = React.useContext(_ButtonGroupButtonContext.default);
   const resolvedProps = (0, _resolveProps.default)(contextProps, inProps);
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: resolvedProps,
     name: 'MuiButton'
   });

package/node/ButtonBase/ButtonBase.js

@@ -12,16 +12,17 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _isFocusVisible = _interopRequireDefault(require("@mui/utils/isFocusVisible"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
-var _useIsFocusVisible = _interopRequireDefault(require("../utils/useIsFocusVisible"));
+var _useLazyRipple = _interopRequireDefault(require("../useLazyRipple"));
 var _TouchRipple = _interopRequireDefault(require("./TouchRipple"));
 var _buttonBaseClasses = _interopRequireWildcard(require("./buttonBaseClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 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)('MuiButtonBase');
 const useUtilityClasses = ownerState => {
   const {
     disabled,
@@ -88,7 +89,7 @@ const ButtonBaseRoot = exports.ButtonBaseRoot = (0, _zeroStyled.styled)('button'
  * It contains a load of style reset and some focus/ripple logic.
  */
 const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiButtonBase'
   });
@@ -125,14 +126,8 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     ...other
   } = props;
   const buttonRef = React.useRef(null);
-  const rippleRef = React.useRef(null);
-  const handleRippleRef = (0, _useForkRef.default)(rippleRef, touchRippleRef);
-  const {
-    isFocusVisibleRef,
-    onFocus: handleFocusVisible,
-    onBlur: handleBlurVisible,
-    ref: focusVisibleRef
-  } = (0, _useIsFocusVisible.default)();
+  const ripple = (0, _useLazyRipple.default)();
+  const handleRippleRef = (0, _useForkRef.default)(ripple.ref, touchRippleRef);
   const [focusVisible, setFocusVisible] = React.useState(false);
   if (disabled && focusVisible) {
     setFocusVisible(false);
@@ -143,24 +138,20 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       buttonRef.current.focus();
     }
   }), []);
-  const [mountedState, setMountedState] = React.useState(false);
-  React.useEffect(() => {
-    setMountedState(true);
-  }, []);
-  const enableTouchRipple = mountedState && !disableRipple && !disabled;
+  const enableTouchRipple = ripple.shouldMount && !disableRipple && !disabled;
   React.useEffect(() => {
-    if (focusVisible && focusRipple && !disableRipple && mountedState) {
-      rippleRef.current.pulsate();
+    if (focusVisible && focusRipple && !disableRipple) {
+      ripple.pulsate();
     }
-  }, [disableRipple, focusRipple, focusVisible, mountedState]);
+  }, [disableRipple, focusRipple, focusVisible, ripple]);
   function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {
     return (0, _useEventCallback.default)(event => {
       if (eventCallback) {
         eventCallback(event);
       }
       const ignore = skipRippleAction;
-      if (!ignore && rippleRef.current) {
-        rippleRef.current[rippleAction](event);
+      if (!ignore) {
+        ripple[rippleAction](event);
       }
       return true;
     });
@@ -181,8 +172,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
   const handleTouchEnd = useRippleHandler('stop', onTouchEnd);
   const handleTouchMove = useRippleHandler('stop', onTouchMove);
   const handleBlur = useRippleHandler('stop', event => {
-    handleBlurVisible(event);
-    if (isFocusVisibleRef.current === false) {
+    if (!(0, _isFocusVisible.default)(event.target)) {
       setFocusVisible(false);
     }
     if (onBlur) {
@@ -194,8 +184,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     if (!buttonRef.current) {
       buttonRef.current = event.currentTarget;
     }
-    handleFocusVisible(event);
-    if (isFocusVisibleRef.current === true) {
+    if ((0, _isFocusVisible.default)(event.target)) {
       setFocusVisible(true);
       if (onFocusVisible) {
         onFocusVisible(event);
@@ -209,17 +198,11 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     const button = buttonRef.current;
     return component && component !== 'button' && !(button.tagName === 'A' && button.href);
   };
-
-  /**
-   * IE11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
-   */
-  const keydownRef = React.useRef(false);
   const handleKeyDown = (0, _useEventCallback.default)(event => {
     // Check if key is already down to avoid repeats being counted as multiple activations
-    if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
-      keydownRef.current = true;
-      rippleRef.current.stop(event, () => {
-        rippleRef.current.start(event);
+    if (focusRipple && !event.repeat && focusVisible && event.key === ' ') {
+      ripple.stop(event, () => {
+        ripple.start(event);
       });
     }
     if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {
@@ -240,10 +223,9 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
   const handleKeyUp = (0, _useEventCallback.default)(event => {
     // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
     // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
-    if (focusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
-      keydownRef.current = false;
-      rippleRef.current.stop(event, () => {
-        rippleRef.current.pulsate(event);
+    if (focusRipple && event.key === ' ' && focusVisible && !event.defaultPrevented) {
+      ripple.stop(event, () => {
+        ripple.pulsate(event);
       });
     }
     if (onKeyUp) {
@@ -271,15 +253,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       buttonProps['aria-disabled'] = disabled;
     }
   }
-  const handleRef = (0, _useForkRef.default)(ref, focusVisibleRef, buttonRef);
-  if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useEffect(() => {
-      if (enableTouchRipple && !rippleRef.current) {
-        console.error(['MUI: The `component` prop provided to ButtonBase is invalid.', 'Please make sure the children prop is rendered in this custom component.'].join('\n'));
-      }
-    }, [enableTouchRipple]);
-  }
+  const handleRef = (0, _useForkRef.default)(ref, buttonRef);
   const ownerState = {
     ...props,
     centerRipple,
@@ -314,10 +288,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     type: type,
     ...buttonProps,
     ...other,
-    children: [children, enableTouchRipple ?
-    /*#__PURE__*/
-    /* TouchRipple is only needed client-side, x2 boost on the server. */
-    (0, _jsxRuntime.jsx)(_TouchRipple.default, {
+    children: [children, enableTouchRipple ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchRipple.default, {
       ref: handleRippleRef,
       center: centerRipple,
       ...TouchRippleProps

package/node/ButtonBase/TouchRipple.js

@@ -12,12 +12,12 @@ var _reactTransitionGroup = require("react-transition-group");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Ripple = _interopRequireDefault(require("./Ripple"));
 var _touchRippleClasses = _interopRequireDefault(require("./touchRippleClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 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)('MuiTouchRipple');
 const DURATION = 550;
 const DELAY_RIPPLE = exports.DELAY_RIPPLE = 80;
 const enterKeyframe = (0, _zeroStyled.keyframes)`
@@ -132,7 +132,7 @@ const TouchRippleRipple = exports.TouchRippleRipple = (0, _zeroStyled.styled)(_R
  * TODO v5: Make private
  */
 const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiTouchRipple'
   });

package/node/ButtonGroup/ButtonGroup.js

@@ -14,13 +14,13 @@ var _colorManipulator = require("@mui/system/colorManipulator");
 var _getValidReactChildren = _interopRequireDefault(require("@mui/utils/getValidReactChildren"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _buttonGroupClasses = _interopRequireWildcard(require("./buttonGroupClasses"));
 var _ButtonGroupContext = _interopRequireDefault(require("./ButtonGroupContext"));
 var _ButtonGroupButtonContext = _interopRequireDefault(require("./ButtonGroupButtonContext"));
 var _jsxRuntime = require("react/jsx-runtime");
 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)('MuiButtonGroup');
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -240,7 +240,7 @@ const ButtonGroupRoot = (0, _zeroStyled.styled)('div', {
   }
 }));
 const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiButtonGroup'
   });

package/node/Card/Card.js

@@ -12,12 +12,12 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Paper = _interopRequireDefault(require("../Paper"));
 var _cardClasses = require("./cardClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 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)('MuiCard');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -35,7 +35,7 @@ const CardRoot = (0, _zeroStyled.styled)(_Paper.default, {
   overflow: 'hidden'
 });
 const Card = /*#__PURE__*/React.forwardRef(function Card(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiCard'
   });

package/node/CardActionArea/CardActionArea.js

@@ -11,12 +11,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _cardActionAreaClasses = _interopRequireWildcard(require("./cardActionAreaClasses"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _jsxRuntime = require("react/jsx-runtime");
 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)('MuiCardActionArea');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -71,7 +71,7 @@ const CardActionAreaFocusHighlight = (0, _zeroStyled.styled)('span', {
   })
 }));
 const CardActionArea = /*#__PURE__*/React.forwardRef(function CardActionArea(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiCardActionArea'
   });

package/node/CardActions/CardActions.js

@@ -11,11 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _cardActionsClasses = require("./cardActionsClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 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)('MuiCardActions');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -51,7 +51,7 @@ const CardActionsRoot = (0, _zeroStyled.styled)('div', {
   }]
 });
 const CardActions = /*#__PURE__*/React.forwardRef(function CardActions(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiCardActions'
   });

package/node/CardContent/CardContent.js

@@ -11,11 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _cardContentClasses = require("./cardContentClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 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)('MuiCardContent');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -36,7 +36,7 @@ const CardContentRoot = (0, _zeroStyled.styled)('div', {
   }
 });
 const CardContent = /*#__PURE__*/React.forwardRef(function CardContent(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiCardContent'
   });

package/node/CardHeader/CardHeader.js

@@ -12,11 +12,11 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _cardHeaderClasses = _interopRequireWildcard(require("./cardHeaderClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 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)('MuiCardHeader');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -72,7 +72,7 @@ const CardHeaderContent = (0, _zeroStyled.styled)('div', {
   flex: '1 1 auto'
 });
 const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiCardHeader'
   });

package/node/CardMedia/CardMedia.js

@@ -12,11 +12,11 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _cardMediaClasses = require("./cardMediaClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 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)('MuiCardMedia');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -65,7 +65,7 @@ const CardMediaRoot = (0, _zeroStyled.styled)('div', {
 const MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
 const IMAGE_COMPONENTS = ['picture', 'img'];
 const CardMedia = /*#__PURE__*/React.forwardRef(function CardMedia(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiCardMedia'
   });