impact-ui 5.0.0-alpha.1 → 5.0.0-beta.2

package/dist/node_modules/@mui/material/List/List.js

@@ -4,11 +4,11 @@ import * as React from "react";
 import PropTypes from "../../../prop-types/index.js";
 import { clsx } from "../../../clsx/dist/clsx.js";
 import styled from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
 import ListContext from "./ListContext.js";
 import { getListUtilityClass } from "./listClasses.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import composeClasses from "../../utils/composeClasses/composeClasses.js";
+import { useDefaultProps } from "../DefaultPropsProvider/DefaultPropsProvider.js";
+import composeClasses from "../node_modules/@mui/utils/esm/composeClasses/composeClasses.js";
 const _excluded = ["children", "className", "component", "dense", "disablePadding", "subheader"];
 const useUtilityClasses = (ownerState) => {
   const {
@@ -45,7 +45,7 @@ const ListRoot = styled("ul", {
   paddingTop: 0
 }));
 const List = /* @__PURE__ */ React.forwardRef(function List2(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: "MuiList"
   });
@@ -79,10 +79,10 @@ const List = /* @__PURE__ */ React.forwardRef(function List2(inProps, ref) {
   });
 });
 process.env.NODE_ENV !== "production" ? List.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The content of the component.
    */

package/dist/node_modules/@mui/material/List/listClasses.js

@@ -1,5 +1,5 @@
-import generateUtilityClass from "../../utils/generateUtilityClass/generateUtilityClass.js";
-import generateUtilityClasses from "../../utils/generateUtilityClasses/generateUtilityClasses.js";
+import generateUtilityClass from "../node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js";
+import generateUtilityClasses from "../node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js";
 function getListUtilityClass(slot) {
   return generateUtilityClass("MuiList", slot);
 }

package/dist/node_modules/@mui/material/ListItemIcon/ListItemIcon.js

@@ -4,11 +4,11 @@ import * as React from "react";
 import PropTypes from "../../../prop-types/index.js";
 import { clsx } from "../../../clsx/dist/clsx.js";
 import styled from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
 import { getListItemIconUtilityClass } from "./listItemIconClasses.js";
 import ListContext from "../List/ListContext.js";
 import { jsx } from "react/jsx-runtime";
-import composeClasses from "../../utils/composeClasses/composeClasses.js";
+import { useDefaultProps } from "../DefaultPropsProvider/DefaultPropsProvider.js";
+import composeClasses from "../node_modules/@mui/utils/esm/composeClasses/composeClasses.js";
 const _excluded = ["className"];
 const useUtilityClasses = (ownerState) => {
   const {
@@ -41,7 +41,7 @@ const ListItemIconRoot = styled("div", {
   marginTop: 8
 }));
 const ListItemIcon = /* @__PURE__ */ React.forwardRef(function ListItemIcon2(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: "MuiListItemIcon"
   });
@@ -60,10 +60,10 @@ const ListItemIcon = /* @__PURE__ */ React.forwardRef(function ListItemIcon2(inP
   }, other));
 });
 process.env.NODE_ENV !== "production" ? ListItemIcon.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The content of the component, normally `Icon`, `SvgIcon`,
    * or a `@mui/icons-material` SVG icon element.

package/dist/node_modules/@mui/material/ListItemIcon/listItemIconClasses.js

@@ -1,5 +1,5 @@
-import generateUtilityClasses from "../../utils/generateUtilityClasses/generateUtilityClasses.js";
-import generateUtilityClass from "../../utils/generateUtilityClass/generateUtilityClass.js";
+import generateUtilityClasses from "../node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js";
+import generateUtilityClass from "../node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js";
 function getListItemIconUtilityClass(slot) {
   return generateUtilityClass("MuiListItemIcon", slot);
 }

package/dist/node_modules/@mui/material/ListItemText/listItemTextClasses.js

@@ -1,4 +1,4 @@
-import generateUtilityClasses from "../../utils/generateUtilityClasses/generateUtilityClasses.js";
+import generateUtilityClasses from "../node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js";
 const listItemTextClasses = generateUtilityClasses("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]);
 export {
   listItemTextClasses as default

package/dist/node_modules/@mui/material/Menu/Menu.js

@@ -1,19 +1,20 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import * as React from "react";
-import { r as reactIsExports } from "../node_modules/react-is/index.js";
+import { r as reactIsExports } from "../../../react-is/index.js";
 import PropTypes from "../../../prop-types/index.js";
 import { clsx } from "../../../clsx/dist/clsx.js";
-import styled, { rootShouldForwardProp } from "../styles/styled.js";
-import useTheme from "../styles/useTheme.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { useRtl } from "../../system/esm/RtlProvider/index.js";
+import styled from "../styles/styled.js";
 import { getMenuUtilityClass } from "./menuClasses.js";
 import { jsx } from "react/jsx-runtime";
-import { useSlotProps } from "../node_modules/@mui/base/utils/useSlotProps.js";
-import composeClasses from "../../utils/composeClasses/composeClasses.js";
+import { useDefaultProps } from "../DefaultPropsProvider/DefaultPropsProvider.js";
+import useSlotProps from "../node_modules/@mui/utils/esm/useSlotProps/useSlotProps.js";
+import composeClasses from "../node_modules/@mui/utils/esm/composeClasses/composeClasses.js";
 import Popover, { PopoverPaper } from "../Popover/Popover.js";
+import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import MenuList from "../MenuList/MenuList.js";
-import HTMLElementType from "../../utils/HTMLElementType/HTMLElementType.js";
+import HTMLElementType from "../node_modules/@mui/utils/esm/HTMLElementType/HTMLElementType.js";
 const _excluded = ["onEntering"], _excluded2 = ["autoFocus", "children", "className", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant", "slots", "slotProps"];
 const RTL_ORIGIN = {
   vertical: "top",
@@ -62,7 +63,7 @@ const MenuMenuList = styled(MenuList, {
 });
 const Menu = /* @__PURE__ */ React.forwardRef(function Menu2(inProps, ref) {
   var _slots$paper, _slotProps$paper;
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: "MuiMenu"
   });
@@ -84,8 +85,7 @@ const Menu = /* @__PURE__ */ React.forwardRef(function Menu2(inProps, ref) {
     slots = {},
     slotProps = {}
   } = props, TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded), other = _objectWithoutPropertiesLoose(props, _excluded2);
-  const theme = useTheme();
-  const isRtl = theme.direction === "rtl";
+  const isRtl = useRtl();
   const ownerState = _extends({}, props, {
     autoFocus,
     disableAutoFocusItem,
@@ -101,7 +101,9 @@ const Menu = /* @__PURE__ */ React.forwardRef(function Menu2(inProps, ref) {
   const menuListActionsRef = React.useRef(null);
   const handleEntering = (element, isAppearing) => {
     if (menuListActionsRef.current) {
-      menuListActionsRef.current.adjustStyleForScrollbar(element, theme);
+      menuListActionsRef.current.adjustStyleForScrollbar(element, {
+        direction: isRtl ? "rtl" : "ltr"
+      });
     }
     if (onEntering) {
       onEntering(element, isAppearing);
@@ -184,10 +186,10 @@ const Menu = /* @__PURE__ */ React.forwardRef(function Menu2(inProps, ref) {
   }));
 });
 process.env.NODE_ENV !== "production" ? Menu.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * An HTML element, or a function that returns one.
    * It's used to set the position of the menu.
@@ -279,7 +281,7 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes = {
   })]),
   /**
    * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
+   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
    * @default {}
    */
   TransitionProps: PropTypes.object,

package/dist/node_modules/@mui/material/Menu/menuClasses.js

@@ -1,5 +1,5 @@
-import generateUtilityClass from "../../utils/generateUtilityClass/generateUtilityClass.js";
-import generateUtilityClasses from "../../utils/generateUtilityClasses/generateUtilityClasses.js";
+import generateUtilityClass from "../node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js";
+import generateUtilityClasses from "../node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js";
 function getMenuUtilityClass(slot) {
   return generateUtilityClass("MuiMenu", slot);
 }

package/dist/node_modules/@mui/material/MenuItem/MenuItem.js

@@ -3,19 +3,20 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from "react";
 import PropTypes from "../../../prop-types/index.js";
 import { clsx } from "../../../clsx/dist/clsx.js";
-import styled, { rootShouldForwardProp } from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { alpha as alpha_1 } from "../../system/colorManipulator.js";
+import styled from "../styles/styled.js";
 import ListContext from "../List/ListContext.js";
 import menuItemClasses, { getMenuItemUtilityClass } from "./menuItemClasses.js";
 import { jsx } from "react/jsx-runtime";
-import useEnhancedEffect from "../../utils/useEnhancedEffect/useEnhancedEffect.js";
-import useForkRef from "../../utils/useForkRef/useForkRef.js";
-import composeClasses from "../../utils/composeClasses/composeClasses.js";
+import { useDefaultProps } from "../DefaultPropsProvider/DefaultPropsProvider.js";
+import useEnhancedEffect from "../node_modules/@mui/utils/esm/useEnhancedEffect/useEnhancedEffect.js";
+import useForkRef from "../node_modules/@mui/utils/esm/useForkRef/useForkRef.js";
+import composeClasses from "../node_modules/@mui/utils/esm/composeClasses/composeClasses.js";
 import ButtonBase from "../ButtonBase/ButtonBase.js";
+import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import listItemIconClasses from "../ListItemIcon/listItemIconClasses.js";
 import listItemTextClasses from "../ListItemText/listItemTextClasses.js";
 import dividerClasses from "../Divider/dividerClasses.js";
-import { alpha } from "../../system/esm/colorManipulator.js";
 const _excluded = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"];
 const overridesResolver = (props, styles) => {
   const {
@@ -73,16 +74,16 @@ const MenuItemRoot = styled(ButtonBase, {
     }
   },
   [`&.${menuItemClasses.selected}`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha_1(theme.palette.primary.main, theme.palette.action.selectedOpacity),
     [`&.${menuItemClasses.focusVisible}`]: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha_1(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
     }
   },
   [`&.${menuItemClasses.selected}:hover`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha_1(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     "@media (hover: none)": {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha_1(theme.palette.primary.main, theme.palette.action.selectedOpacity)
     }
   },
   [`&.${menuItemClasses.focusVisible}`]: {
@@ -123,7 +124,7 @@ const MenuItemRoot = styled(ButtonBase, {
   }
 })));
 const MenuItem = /* @__PURE__ */ React.forwardRef(function MenuItem2(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: "MuiMenuItem"
   });
@@ -180,10 +181,10 @@ const MenuItem = /* @__PURE__ */ React.forwardRef(function MenuItem2(inProps, re
   });
 });
 process.env.NODE_ENV !== "production" ? MenuItem.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * If `true`, the list item is focused during the first mount.
    * Focus will also be triggered if the value changes from false to true.

package/dist/node_modules/@mui/material/MenuItem/menuItemClasses.js

@@ -1,5 +1,5 @@
-import generateUtilityClass from "../../utils/generateUtilityClass/generateUtilityClass.js";
-import generateUtilityClasses from "../../utils/generateUtilityClasses/generateUtilityClasses.js";
+import generateUtilityClass from "../node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js";
+import generateUtilityClasses from "../node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js";
 function getMenuItemUtilityClass(slot) {
   return generateUtilityClass("MuiMenuItem", slot);
 }

package/dist/node_modules/@mui/material/MenuList/MenuList.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import * as React from "react";
-import { r as reactIsExports } from "../node_modules/react-is/index.js";
+import { r as reactIsExports } from "../../../react-is/index.js";
 import PropTypes from "../../../prop-types/index.js";
 import { jsx } from "react/jsx-runtime";
-import useEnhancedEffect from "../../utils/useEnhancedEffect/useEnhancedEffect.js";
-import getScrollbarSize from "../../utils/getScrollbarSize/getScrollbarSize.js";
-import ownerDocument from "../../utils/ownerDocument/ownerDocument.js";
-import useForkRef from "../../utils/useForkRef/useForkRef.js";
+import useEnhancedEffect from "../node_modules/@mui/utils/esm/useEnhancedEffect/useEnhancedEffect.js";
+import getScrollbarSize from "../node_modules/@mui/utils/esm/getScrollbarSize/getScrollbarSize.js";
+import ownerDocument from "../node_modules/@mui/utils/esm/ownerDocument/ownerDocument.js";
+import useForkRef from "../node_modules/@mui/utils/esm/useForkRef/useForkRef.js";
 import List from "../List/List.js";
 const _excluded = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
 function nextItem(list, item, disableListWrap) {
@@ -92,11 +92,13 @@ const MenuList = /* @__PURE__ */ React.forwardRef(function MenuList2(props, ref)
     }
   }, [autoFocus]);
   React.useImperativeHandle(actions, () => ({
-    adjustStyleForScrollbar: (containerElement, theme) => {
+    adjustStyleForScrollbar: (containerElement, {
+      direction
+    }) => {
       const noExplicitWidth = !listRef.current.style.width;
       if (containerElement.clientHeight < listRef.current.clientHeight && noExplicitWidth) {
         const scrollbarSize = `${getScrollbarSize(ownerDocument(containerElement))}px`;
-        listRef.current.style[theme.direction === "rtl" ? "paddingLeft" : "paddingRight"] = scrollbarSize;
+        listRef.current.style[direction === "rtl" ? "paddingLeft" : "paddingRight"] = scrollbarSize;
         listRef.current.style.width = `calc(100% + ${scrollbarSize})`;
       }
       return listRef.current;
@@ -199,10 +201,10 @@ const MenuList = /* @__PURE__ */ React.forwardRef(function MenuList2(props, ref)
   }));
 });
 process.env.NODE_ENV !== "production" ? MenuList.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * If `true`, will focus the `[role="menu"]` container and move into tab order.
    * @default false

package/dist/node_modules/@mui/material/Modal/Modal.js

@@ -4,15 +4,30 @@ import * as React from "react";
 import PropTypes from "../../../prop-types/index.js";
 import { clsx } from "../../../clsx/dist/clsx.js";
 import styled from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
-import { jsx } from "react/jsx-runtime";
-import { Modal as Modal$1 } from "../node_modules/@mui/base/Modal/Modal.js";
-import { resolveComponentProps } from "../node_modules/@mui/base/utils/resolveComponentProps.js";
-import { isHostComponent } from "../node_modules/@mui/base/utils/isHostComponent.js";
+import useModal from "./useModal.js";
+import { getModalUtilityClass } from "./modalClasses.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDefaultProps } from "../DefaultPropsProvider/DefaultPropsProvider.js";
+import useSlotProps from "../node_modules/@mui/utils/esm/useSlotProps/useSlotProps.js";
+import Portal from "../Portal/Portal.js";
+import FocusTrap from "../Unstable_TrapFocus/FocusTrap.js";
 import Backdrop from "../Backdrop/Backdrop.js";
-import elementAcceptingRef from "../../utils/elementAcceptingRef/elementAcceptingRef.js";
-import HTMLElementType from "../../utils/HTMLElementType/HTMLElementType.js";
-const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
+import composeClasses from "../node_modules/@mui/utils/esm/composeClasses/composeClasses.js";
+import elementAcceptingRef from "../node_modules/@mui/utils/esm/elementAcceptingRef/elementAcceptingRef.js";
+import HTMLElementType from "../node_modules/@mui/utils/esm/HTMLElementType/HTMLElementType.js";
+const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
+const useUtilityClasses = (ownerState) => {
+  const {
+    open,
+    exited,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ["root", !open && exited && "hidden"],
+    backdrop: ["backdrop"]
+  };
+  return composeClasses(slots, getModalUtilityClass, classes);
+};
 const ModalRoot = styled("div", {
   name: "MuiModal",
   slot: "Root",
@@ -46,14 +61,13 @@ const ModalBackdrop = styled(Backdrop, {
 });
 const Modal = /* @__PURE__ */ React.forwardRef(function Modal2(inProps, ref) {
   var _ref, _slots$root, _ref2, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
-  const props = useThemeProps({
+  const props = useDefaultProps({
     name: "MuiModal",
     props: inProps
   });
   const {
     BackdropComponent = ModalBackdrop,
     BackdropProps,
-    classes,
     className,
     closeAfterTransition = false,
     children,
@@ -70,16 +84,12 @@ const Modal = /* @__PURE__ */ React.forwardRef(function Modal2(inProps, ref) {
     hideBackdrop = false,
     keepMounted = false,
     onBackdropClick,
-    onClose,
     open,
     slotProps,
-    slots,
+    slots
     // eslint-disable-next-line react/prop-types
-    theme
   } = props, other = _objectWithoutPropertiesLoose(props, _excluded);
-  const [exited, setExited] = React.useState(true);
-  const commonProps = {
-    container,
+  const propsWithDefaults = _extends({}, props, {
     closeAfterTransition,
     disableAutoFocus,
     disableEnforceFocus,
@@ -88,46 +98,94 @@ const Modal = /* @__PURE__ */ React.forwardRef(function Modal2(inProps, ref) {
     disableRestoreFocus,
     disableScrollLock,
     hideBackdrop,
-    keepMounted,
-    onBackdropClick,
-    onClose,
-    open
-  };
-  const ownerState = _extends({}, props, commonProps, {
+    keepMounted
+  });
+  const {
+    getRootProps,
+    getBackdropProps,
+    getTransitionProps,
+    portalRef,
+    isTopModal,
+    exited,
+    hasTransition
+  } = useModal(_extends({}, propsWithDefaults, {
+    rootRef: ref
+  }));
+  const ownerState = _extends({}, propsWithDefaults, {
     exited
   });
+  const classes = useUtilityClasses(ownerState);
+  const childProps = {};
+  if (children.props.tabIndex === void 0) {
+    childProps.tabIndex = "-1";
+  }
+  if (hasTransition) {
+    const {
+      onEnter,
+      onExited
+    } = getTransitionProps();
+    childProps.onEnter = onEnter;
+    childProps.onExited = onExited;
+  }
   const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : ModalRoot;
   const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
   const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
   const backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
-  return /* @__PURE__ */ jsx(Modal$1, _extends({
-    slots: {
-      root: RootSlot,
-      backdrop: BackdropSlot
+  const rootProps = useSlotProps({
+    elementType: RootSlot,
+    externalSlotProps: rootSlotProps,
+    externalForwardedProps: other,
+    getSlotProps: getRootProps,
+    additionalProps: {
+      ref,
+      as: component
     },
-    slotProps: {
-      root: () => _extends({}, resolveComponentProps(rootSlotProps, ownerState), !isHostComponent(RootSlot) && {
-        as: component,
-        theme
-      }, {
-        className: clsx(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
-      }),
-      backdrop: () => _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState), {
-        className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop)
-      })
+    ownerState,
+    className: clsx(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
+  });
+  const backdropProps = useSlotProps({
+    elementType: BackdropSlot,
+    externalSlotProps: backdropSlotProps,
+    additionalProps: BackdropProps,
+    getSlotProps: (otherHandlers) => {
+      return getBackdropProps(_extends({}, otherHandlers, {
+        onClick: (e) => {
+          if (onBackdropClick) {
+            onBackdropClick(e);
+          }
+          if (otherHandlers != null && otherHandlers.onClick) {
+            otherHandlers.onClick(e);
+          }
+        }
+      }));
     },
-    onTransitionEnter: () => setExited(false),
-    onTransitionExited: () => setExited(true),
-    ref
-  }, other, commonProps, {
-    children
-  }));
+    className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop),
+    ownerState
+  });
+  if (!keepMounted && !open && (!hasTransition || exited)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Portal, {
+    ref: portalRef,
+    container,
+    disablePortal,
+    children: /* @__PURE__ */ jsxs(RootSlot, _extends({}, rootProps, {
+      children: [!hideBackdrop && BackdropComponent ? /* @__PURE__ */ jsx(BackdropSlot, _extends({}, backdropProps)) : null, /* @__PURE__ */ jsx(FocusTrap, {
+        disableEnforceFocus,
+        disableAutoFocus,
+        disableRestoreFocus,
+        isEnabled: isTopModal,
+        open,
+        children: /* @__PURE__ */ React.cloneElement(children, childProps)
+      })]
+    }))
+  });
 });
 process.env.NODE_ENV !== "production" ? Modal.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
    * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
@@ -199,6 +257,9 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes = {
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
    *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */

package/dist/node_modules/@mui/material/{node_modules/@mui/base/unstable_useModal → Modal}/ModalManager.js

@@ -1,6 +1,6 @@
-import getScrollbarSize from "../../../../../utils/getScrollbarSize/getScrollbarSize.js";
-import ownerDocument from "../../../../../utils/ownerDocument/ownerDocument.js";
-import ownerWindow from "../../../../../utils/ownerWindow/ownerWindow.js";
+import getScrollbarSize from "../node_modules/@mui/utils/esm/getScrollbarSize/getScrollbarSize.js";
+import ownerDocument from "../node_modules/@mui/utils/esm/ownerDocument/ownerDocument.js";
+import ownerWindow from "../node_modules/@mui/utils/esm/ownerWindow/ownerWindow.js";
 function isOverflowing(container) {
   const doc = ownerDocument(container);
   if (doc.body === container) {

package/dist/node_modules/@mui/material/Modal/modalClasses.js

@@ -0,0 +1,9 @@
+import generateUtilityClass from "../node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js";
+import generateUtilityClasses from "../node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js";
+function getModalUtilityClass(slot) {
+  return generateUtilityClass("MuiModal", slot);
+}
+generateUtilityClasses("MuiModal", ["root", "hidden", "backdrop"]);
+export {
+  getModalUtilityClass
+};

package/dist/node_modules/@mui/material/{node_modules/@mui/base/unstable_useModal → Modal}/useModal.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from "react";
 import { ModalManager, ariaHidden } from "./ModalManager.js";
-import useForkRef from "../../../../../utils/useForkRef/useForkRef.js";
-import useEventCallback from "../../../../../utils/useEventCallback/useEventCallback.js";
-import ownerDocument from "../../../../../utils/ownerDocument/ownerDocument.js";
-import createChainedFunction from "../../../../../utils/createChainedFunction/createChainedFunction.js";
-import { extractEventHandlers } from "../utils/extractEventHandlers.js";
+import useForkRef from "../node_modules/@mui/utils/esm/useForkRef/useForkRef.js";
+import useEventCallback from "../node_modules/@mui/utils/esm/useEventCallback/useEventCallback.js";
+import createChainedFunction from "../node_modules/@mui/utils/esm/createChainedFunction/createChainedFunction.js";
+import extractEventHandlers from "../node_modules/@mui/utils/esm/extractEventHandlers/extractEventHandlers.js";
+import ownerDocument from "../node_modules/@mui/utils/esm/ownerDocument/ownerDocument.js";
 function getContainer(container) {
   return typeof container === "function" ? container() : container;
 }
@@ -88,8 +88,9 @@ function useModal(parameters) {
   }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
   const createHandleKeyDown = (otherHandlers) => (event) => {
     var _otherHandlers$onKeyD;
-    (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null ? void 0 : _otherHandlers$onKeyD.call(otherHandlers, event);
-    if (event.key !== "Escape" || !isTopModal()) {
+    (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null || _otherHandlers$onKeyD.call(otherHandlers, event);
+    if (event.key !== "Escape" || event.which === 229 || // Wait until IME is settled.
+    !isTopModal()) {
       return;
     }
     if (!disableEscapeKeyDown) {
@@ -101,7 +102,7 @@ function useModal(parameters) {
   };
   const createHandleBackdropClick = (otherHandlers) => (event) => {
     var _otherHandlers$onClic;
-    (_otherHandlers$onClic = otherHandlers.onClick) == null ? void 0 : _otherHandlers$onClic.call(otherHandlers, event);
+    (_otherHandlers$onClic = otherHandlers.onClick) == null || _otherHandlers$onClic.call(otherHandlers, event);
     if (event.target !== event.currentTarget) {
       return;
     }
@@ -147,8 +148,8 @@ function useModal(parameters) {
       }
     };
     return {
-      onEnter: createChainedFunction(handleEnter, children.props.onEnter),
-      onExited: createChainedFunction(handleExited, children.props.onExited)
+      onEnter: createChainedFunction(handleEnter, children == null ? void 0 : children.props.onEnter),
+      onExited: createChainedFunction(handleExited, children == null ? void 0 : children.props.onExited)
     };
   };
   return {
@@ -163,5 +164,5 @@ function useModal(parameters) {
   };
 }
 export {
-  useModal
+  useModal as default
 };