@mui/material 6.0.0-beta.0 → 6.0.0-beta.1

package/modern/utils/PolymorphicComponent.js

@@ -0,0 +1 @@
+export {};

package/modern/utils/areArraysEqual.js

@@ -0,0 +1,4 @@
+function areArraysEqual(array1, array2, itemComparer = (a, b) => a === b) {
+  return array1.length === array2.length && array1.every((value, index) => itemComparer(value, array2[index]));
+}
+export default areArraysEqual;

package/modern/utils/index.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/base/ClassNameGenerator';
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/utils';
 export { default as capitalize } from './capitalize';
 export { default as createChainedFunction } from './createChainedFunction';
 export { default as createSvgIcon } from './createSvgIcon';

package/modern/utils/isHostComponent.js

@@ -0,0 +1,7 @@
+/**
+ * Determines if a given element is a DOM element name (i.e. not a React component).
+ */
+function isHostComponent(element) {
+  return typeof element === 'string';
+}
+export default isHostComponent;

package/modern/utils/omitEventHandlers.js

@@ -0,0 +1,18 @@
+/**
+ * Removes event handlers from the given object.
+ * A field is considered an event handler if it is a function with a name beginning with `on`.
+ *
+ * @param object Object to remove event handlers from.
+ * @returns Object with event handlers removed.
+ */
+function omitEventHandlers(object) {
+  if (object === undefined) {
+    return {};
+  }
+  const result = {};
+  Object.keys(object).filter(prop => !(prop.match(/^on[A-Z]/) && typeof object[prop] === 'function')).forEach(prop => {
+    result[prop] = object[prop];
+  });
+  return result;
+}
+export default omitEventHandlers;

package/modern/utils/shouldSpreadAdditionalProps.js

@@ -1,4 +1,4 @@
-import { isHostComponent } from '@mui/base/utils';
+import isHostComponent from './isHostComponent';
 const shouldSpreadAdditionalProps = Slot => {
   return !Slot || !isHostComponent(Slot);
 };

package/modern/utils/useSlot.js

@@ -1,7 +1,9 @@
 'use client';
 
 import useForkRef from '@mui/utils/useForkRef';
-import { appendOwnerState, resolveComponentProps, mergeSlotProps } from '@mui/base/utils';
+import appendOwnerState from '@mui/utils/appendOwnerState';
+import resolveComponentProps from '@mui/utils/resolveComponentProps';
+import mergeSlotProps from '@mui/utils/mergeSlotProps';
 /**
  * An internal function to create a Material UI slot.
  *

package/node/Autocomplete/Autocomplete.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "createFilterOptions", {
   enumerable: true,
   get: function () {
-    return _base.createFilterOptions;
+    return _useAutocomplete.createFilterOptions;
   }
 });
 exports.default = void 0;
@@ -17,9 +17,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
-var _base = require("@mui/base");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
+var _useAutocomplete = _interopRequireWildcard(require("../useAutocomplete"));
 var _Popper = _interopRequireDefault(require("../Popper"));
 var _ListSubheader = _interopRequireDefault(require("../ListSubheader"));
 var _Paper = _interopRequireDefault(require("../Paper"));
@@ -512,7 +512,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     setAnchorEl,
     inputValue,
     groupedOptions
-  } = (0, _base.useAutocomplete)({
+  } = (0, _useAutocomplete.default)({
     ...props,
     componentName: 'Autocomplete'
   });

package/node/Badge/Badge.js

@@ -11,8 +11,8 @@ 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"));
@@ -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/Breadcrumbs/Breadcrumbs.js

@@ -11,8 +11,8 @@ 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"));
@@ -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/ClickAwayListener/ClickAwayListener.js

@@ -0,0 +1,184 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ClickAwayListener = ClickAwayListener;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@mui/utils");
+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; }
+// TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase<EventName> : never` once generatePropTypes runs with TS 4.1
+function mapEventPropToEvent(eventProp) {
+  return eventProp.substring(2).toLowerCase();
+}
+function clickedRootScrollbar(event, doc) {
+  return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;
+}
+/**
+ * Listen for click events that occur somewhere in the document, outside of the element itself.
+ * For instance, if you need to hide a menu when people click anywhere else on your page.
+ *
+ * Demos:
+ *
+ * - [Click-Away Listener](https://next.mui.com/material-ui/react-click-away-listener/)
+ * - [Menu](https://next.mui.com/material-ui/react-menu/)
+ *
+ * API:
+ *
+ * - [ClickAwayListener API](https://next.mui.com/material-ui/api/click-away-listener/)
+ */
+function ClickAwayListener(props) {
+  const {
+    children,
+    disableReactTree = false,
+    mouseEvent = 'onClick',
+    onClickAway,
+    touchEvent = 'onTouchEnd'
+  } = props;
+  const movedRef = React.useRef(false);
+  const nodeRef = React.useRef(null);
+  const activatedRef = React.useRef(false);
+  const syntheticEventRef = React.useRef(false);
+  React.useEffect(() => {
+    // Ensure that this component is not "activated" synchronously.
+    // https://github.com/facebook/react/issues/20074
+    setTimeout(() => {
+      activatedRef.current = true;
+    }, 0);
+    return () => {
+      activatedRef.current = false;
+    };
+  }, []);
+  const handleRef = (0, _utils.unstable_useForkRef)(
+  // @ts-expect-error TODO upstream fix
+  children.ref, nodeRef);
+
+  // The handler doesn't take event.defaultPrevented into account:
+  //
+  // event.preventDefault() is meant to stop default behaviors like
+  // clicking a checkbox to check it, hitting a button to submit a form,
+  // and hitting left arrow to move the cursor in a text input etc.
+  // Only special HTML elements have these default behaviors.
+  const handleClickAway = (0, _utils.unstable_useEventCallback)(event => {
+    // Given developers can stop the propagation of the synthetic event,
+    // we can only be confident with a positive value.
+    const insideReactTree = syntheticEventRef.current;
+    syntheticEventRef.current = false;
+    const doc = (0, _utils.unstable_ownerDocument)(nodeRef.current);
+
+    // 1. IE11 support, which trigger the handleClickAway even after the unbind
+    // 2. The child might render null.
+    // 3. Behave like a blur listener.
+    if (!activatedRef.current || !nodeRef.current || 'clientX' in event && clickedRootScrollbar(event, doc)) {
+      return;
+    }
+
+    // Do not act if user performed touchmove
+    if (movedRef.current) {
+      movedRef.current = false;
+      return;
+    }
+    let insideDOM;
+
+    // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
+    if (event.composedPath) {
+      insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
+    } else {
+      insideDOM = !doc.documentElement.contains(
+      // @ts-expect-error returns `false` as intended when not dispatched from a Node
+      event.target) || nodeRef.current.contains(
+      // @ts-expect-error returns `false` as intended when not dispatched from a Node
+      event.target);
+    }
+    if (!insideDOM && (disableReactTree || !insideReactTree)) {
+      onClickAway(event);
+    }
+  });
+
+  // Keep track of mouse/touch events that bubbled up through the portal.
+  const createHandleSynthetic = handlerName => event => {
+    syntheticEventRef.current = true;
+    const childrenPropsHandler = children.props[handlerName];
+    if (childrenPropsHandler) {
+      childrenPropsHandler(event);
+    }
+  };
+  const childrenProps = {
+    ref: handleRef
+  };
+  if (touchEvent !== false) {
+    childrenProps[touchEvent] = createHandleSynthetic(touchEvent);
+  }
+  React.useEffect(() => {
+    if (touchEvent !== false) {
+      const mappedTouchEvent = mapEventPropToEvent(touchEvent);
+      const doc = (0, _utils.unstable_ownerDocument)(nodeRef.current);
+      const handleTouchMove = () => {
+        movedRef.current = true;
+      };
+      doc.addEventListener(mappedTouchEvent, handleClickAway);
+      doc.addEventListener('touchmove', handleTouchMove);
+      return () => {
+        doc.removeEventListener(mappedTouchEvent, handleClickAway);
+        doc.removeEventListener('touchmove', handleTouchMove);
+      };
+    }
+    return undefined;
+  }, [handleClickAway, touchEvent]);
+  if (mouseEvent !== false) {
+    childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);
+  }
+  React.useEffect(() => {
+    if (mouseEvent !== false) {
+      const mappedMouseEvent = mapEventPropToEvent(mouseEvent);
+      const doc = (0, _utils.unstable_ownerDocument)(nodeRef.current);
+      doc.addEventListener(mappedMouseEvent, handleClickAway);
+      return () => {
+        doc.removeEventListener(mappedMouseEvent, handleClickAway);
+      };
+    }
+    return undefined;
+  }, [handleClickAway, mouseEvent]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: /*#__PURE__*/React.cloneElement(children, childrenProps)
+  });
+}
+process.env.NODE_ENV !== "production" ? ClickAwayListener.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The wrapped element.
+   */
+  children: _utils.elementAcceptingRef.isRequired,
+  /**
+   * If `true`, the React tree is ignored and only the DOM tree is considered.
+   * This prop changes how portaled elements are handled.
+   * @default false
+   */
+  disableReactTree: _propTypes.default.bool,
+  /**
+   * The mouse event to listen to. You can disable the listener by providing `false`.
+   * @default 'onClick'
+   */
+  mouseEvent: _propTypes.default.oneOf(['onClick', 'onMouseDown', 'onMouseUp', 'onPointerDown', 'onPointerUp', false]),
+  /**
+   * Callback fired when a "click away" event is detected.
+   */
+  onClickAway: _propTypes.default.func.isRequired,
+  /**
+   * The touch event to listen to. You can disable the listener by providing `false`.
+   * @default 'onTouchEnd'
+   */
+  touchEvent: _propTypes.default.oneOf(['onTouchEnd', 'onTouchStart', false])
+} : void 0;
+if (process.env.NODE_ENV !== 'production') {
+  // eslint-disable-next-line
+  ClickAwayListener['propTypes' + ''] = (0, _utils.exactProp)(ClickAwayListener.propTypes);
+}

package/node/ClickAwayListener/index.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "default", {
     return _ClickAwayListener.ClickAwayListener;
   }
 });
-var _ClickAwayListener = require("@mui/base/ClickAwayListener");
+var _ClickAwayListener = require("./ClickAwayListener");

package/node/InputBase/InputBase.js

@@ -12,9 +12,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
-var _base = require("@mui/base");
-var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _TextareaAutosize = _interopRequireDefault(require("../TextareaAutosize"));
+var _isHostComponent = _interopRequireDefault(require("../utils/isHostComponent"));
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 var _FormControlContext = _interopRequireDefault(require("../FormControl/FormControlContext"));
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
@@ -23,7 +23,7 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
-var _utils2 = require("./utils");
+var _utils = require("./utils");
 var _inputBaseClasses = _interopRequireWildcard(require("./inputBaseClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _InputGlobalStyles;
@@ -336,7 +336,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   const onFilled = muiFormControl && muiFormControl.onFilled;
   const onEmpty = muiFormControl && muiFormControl.onEmpty;
   const checkDirty = React.useCallback(obj => {
-    if ((0, _utils2.isFilled)(obj)) {
+    if ((0, _utils.isFilled)(obj)) {
       if (onFilled) {
         onFilled();
       }
@@ -434,7 +434,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
         ...inputProps
       };
     }
-    InputComponent = _base.TextareaAutosize;
+    InputComponent = _TextareaAutosize.default;
   }
   const handleAutoFill = event => {
     // Provide a fake value as Chrome might not let you access it for security reasons.
@@ -478,7 +478,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       ref: ref,
       onClick: handleClick,
       ...other,
-      ...(!(0, _utils.isHostComponent)(Root) && {
+      ...(!(0, _isHostComponent.default)(Root) && {
         ownerState: {
           ...ownerState,
           ...rootProps.ownerState
@@ -506,7 +506,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
           onKeyUp: onKeyUp,
           type: type,
           ...inputProps,
-          ...(!(0, _utils.isHostComponent)(Input) && {
+          ...(!(0, _isHostComponent.default)(Input) && {
             as: InputComponent,
             ownerState: {
               ...ownerState,

package/node/ListItem/ListItem.js

@@ -9,11 +9,11 @@ exports.overridesResolver = exports.default = exports.ListItemRoot = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _colorManipulator = require("@mui/system/colorManipulator");
+var _isHostComponent = _interopRequireDefault(require("../utils/isHostComponent"));
 var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
@@ -286,7 +286,7 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
         ...ContainerProps,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
           ...rootProps,
-          ...(!(0, _utils.isHostComponent)(Root) && {
+          ...(!(0, _isHostComponent.default)(Root) && {
             as: Component,
             ownerState: {
               ...ownerState,
@@ -305,7 +305,7 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
       ...rootProps,
       as: Component,
       ref: handleRef,
-      ...(!(0, _utils.isHostComponent)(Root) && {
+      ...(!(0, _isHostComponent.default)(Root) && {
         ownerState: {
           ...ownerState,
           ...rootProps.ownerState

package/node/Menu/Menu.js

@@ -11,9 +11,9 @@ var _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _utils = require("@mui/base/utils");
 var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _MenuList = _interopRequireDefault(require("../MenuList"));
 var _Popover = _interopRequireWildcard(require("../Popover"));
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
@@ -156,13 +156,13 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
   });
   const PaperSlot = (_slots$paper = slots.paper) != null ? _slots$paper : MenuPaper;
   const paperExternalSlotProps = (_slotProps$paper = slotProps.paper) != null ? _slotProps$paper : PaperProps;
-  const rootSlotProps = (0, _utils.useSlotProps)({
+  const rootSlotProps = (0, _useSlotProps.default)({
     elementType: slots.root,
     externalSlotProps: slotProps.root,
     ownerState,
     className: [classes.root, className]
   });
-  const paperSlotProps = (0, _utils.useSlotProps)({
+  const paperSlotProps = (0, _useSlotProps.default)({
     elementType: PaperSlot,
     externalSlotProps: paperExternalSlotProps,
     ownerState,

package/node/Modal/Modal.js

@@ -11,13 +11,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
-var _unstable_useModal = require("@mui/base/unstable_useModal");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _Unstable_TrapFocus = _interopRequireDefault(require("../Unstable_TrapFocus"));
 var _Portal = _interopRequireDefault(require("../Portal"));
 var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Backdrop = _interopRequireDefault(require("../Backdrop"));
+var _useModal = _interopRequireDefault(require("./useModal"));
 var _modalClasses = require("./modalClasses");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _utils = require("../utils");
@@ -141,7 +141,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     isTopModal,
     exited,
     hasTransition
-  } = (0, _unstable_useModal.unstable_useModal)({
+  } = (0, _useModal.default)({
     ...propsWithDefaults,
     rootRef: ref
   });