@yamada-ui/modal 0.2.7 → 0.2.9

package/dist/modal-close-button.js

@@ -51,7 +51,14 @@ var import_utils = require("@yamada-ui/utils");
 var import_jsx_runtime = require("react/jsx-runtime");
 var ModalOverlay = (0, import_core.forwardRef)(
   ({ className, __css, onClick, ...rest }, ref) => {
-    const { styles, closeOnOverlay, onOverlayClick, onClose, animation, duration } = useModal();
+    const {
+      styles,
+      closeOnOverlay,
+      onOverlayClick,
+      onClose,
+      animation,
+      duration
+    } = useModal();
     const css = {
       position: "fixed",
       top: 0,
@@ -94,7 +101,15 @@ var ModalHeader = (0, import_core2.forwardRef)(
       justifyContent: "flex-start",
       ...__css ? __css : styles.header
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.header, { ref, className: (0, import_utils2.cx)("ui-modal-header", className), __css: css, ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core2.ui.header,
+      {
+        ref,
+        className: (0, import_utils2.cx)("ui-modal-header", className),
+        __css: css,
+        ...rest
+      }
+    );
   }
 );
 
@@ -112,7 +127,15 @@ var ModalBody = (0, import_core3.forwardRef)(
       overflow: scrollBehavior === "inside" ? "auto" : void 0,
       ...__css ? __css : styles.body
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.main, { ref, className: (0, import_utils3.cx)("ui-modal-body", className), __css: css, ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_core3.ui.main,
+      {
+        ref,
+        className: (0, import_utils3.cx)("ui-modal-body", className),
+        __css: css,
+        ...rest
+      }
+    );
   }
 );
 
@@ -129,7 +152,15 @@ var ModalFooter = (0, import_core4.forwardRef)(
       justifyContent: "flex-end",
       ...__css ? __css : styles.footer
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.footer, { ref, className: (0, import_utils4.cx)("ui-modal-footer", className), __css: css, ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_core4.ui.footer,
+      {
+        ref,
+        className: (0, import_utils4.cx)("ui-modal-footer", className),
+        __css: css,
+        ...rest
+      }
+    );
   }
 );
 
@@ -142,69 +173,101 @@ var [DialogProvider, useDialog] = (0, import_utils5.createContext)({
   name: `DialogContext`,
   errorMessage: `useDialog returned is 'undefined'. Seems you forgot to wrap the components in "<Dialog />" `
 });
-var Dialog = (0, import_core5.forwardRef)(({ size, ...props }, ref) => {
-  const [styles, mergedProps] = (0, import_core5.useMultiComponentStyle)("Dialog", { size, ...props });
-  const {
-    className,
-    children,
-    withOverlay = true,
-    withCloseButton = true,
-    header,
-    footer,
-    cancel,
-    other,
-    success,
-    onClose,
-    onCancel,
-    onOther,
-    onSuccess,
-    ...rest
-  } = (0, import_core5.omitThemeProps)(mergedProps);
-  const validChildren = (0, import_utils5.getValidChildren)(children);
-  const [customDialogOverlay] = (0, import_utils5.findChildren)(validChildren, DialogOverlay);
-  const [customDialogCloseButton] = (0, import_utils5.findChildren)(validChildren, DialogCloseButton);
-  const [customDialogHeader] = (0, import_utils5.findChildren)(validChildren, DialogHeader);
-  const [customDialogBody] = (0, import_utils5.findChildren)(validChildren, DialogBody);
-  const [customDialogFooter] = (0, import_utils5.findChildren)(validChildren, DialogFooter);
-  const cloneChildren = !(0, import_utils5.isEmpty)(validChildren) ? (0, import_utils5.omitChildren)(
-    validChildren,
-    DialogOverlay,
-    DialogCloseButton,
-    DialogHeader,
-    DialogBody,
-    DialogFooter
-  ) : children;
-  const css = { ...styles.container };
-  const cancelButtonProps = (0, import_utils5.isValidElement)(cancel) ? { children: cancel } : cancel;
-  const otherButtonProps = (0, import_utils5.isValidElement)(other) ? { children: other } : other;
-  const successButtonProps = (0, import_utils5.isValidElement)(success) ? { children: success } : success;
-  if (cancelButtonProps && !cancelButtonProps.variant)
-    cancelButtonProps.variant = "ghost";
-  if (otherButtonProps && !otherButtonProps.colorScheme)
-    otherButtonProps.colorScheme = "secondary";
-  if (successButtonProps && !successButtonProps.colorScheme)
-    successButtonProps.colorScheme = "primary";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    Modal,
-    {
-      ref,
-      className: (0, import_utils5.cx)("ui-dialog", className),
-      __css: css,
-      ...{ size, onClose, withOverlay: false, withCloseButton: false, ...rest },
-      children: [
-        customDialogOverlay != null ? customDialogOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogOverlay, {}) : null,
-        customDialogCloseButton != null ? customDialogCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogCloseButton, {}) : null,
-        customDialogHeader != null ? customDialogHeader : header ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogHeader, { children: header }) : null,
-        customDialogBody != null ? customDialogBody : cloneChildren ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogBody, { children: cloneChildren }) : null,
-        customDialogFooter != null ? customDialogFooter : footer || cancelButtonProps || otherButtonProps || successButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogFooter, { children: footer != null ? footer : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-          cancelButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_button.Button, { onClick: () => onCancel == null ? void 0 : onCancel(onClose), ...cancelButtonProps }) : null,
-          otherButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_button.Button, { onClick: () => onOther == null ? void 0 : onOther(onClose), ...otherButtonProps }) : null,
-          successButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_button.Button, { onClick: () => onSuccess == null ? void 0 : onSuccess(onClose), ...successButtonProps }) : null
-        ] }) }) : null
-      ]
-    }
-  ) });
-});
+var Dialog = (0, import_core5.forwardRef)(
+  ({ size, ...props }, ref) => {
+    const [styles, mergedProps] = (0, import_core5.useMultiComponentStyle)("Dialog", {
+      size,
+      ...props
+    });
+    const {
+      className,
+      children,
+      withOverlay = true,
+      withCloseButton = true,
+      header,
+      footer,
+      cancel,
+      other,
+      success,
+      onClose,
+      onCancel,
+      onOther,
+      onSuccess,
+      ...rest
+    } = (0, import_core5.omitThemeProps)(mergedProps);
+    const validChildren = (0, import_utils5.getValidChildren)(children);
+    const [customDialogOverlay] = (0, import_utils5.findChildren)(validChildren, DialogOverlay);
+    const [customDialogCloseButton] = (0, import_utils5.findChildren)(
+      validChildren,
+      DialogCloseButton
+    );
+    const [customDialogHeader] = (0, import_utils5.findChildren)(validChildren, DialogHeader);
+    const [customDialogBody] = (0, import_utils5.findChildren)(validChildren, DialogBody);
+    const [customDialogFooter] = (0, import_utils5.findChildren)(validChildren, DialogFooter);
+    const cloneChildren = !(0, import_utils5.isEmpty)(validChildren) ? (0, import_utils5.omitChildren)(
+      validChildren,
+      DialogOverlay,
+      DialogCloseButton,
+      DialogHeader,
+      DialogBody,
+      DialogFooter
+    ) : children;
+    const css = { ...styles.container };
+    const cancelButtonProps = (0, import_utils5.isValidElement)(cancel) ? { children: cancel } : cancel;
+    const otherButtonProps = (0, import_utils5.isValidElement)(other) ? { children: other } : other;
+    const successButtonProps = (0, import_utils5.isValidElement)(success) ? { children: success } : success;
+    if (cancelButtonProps && !cancelButtonProps.variant)
+      cancelButtonProps.variant = "ghost";
+    if (otherButtonProps && !otherButtonProps.colorScheme)
+      otherButtonProps.colorScheme = "secondary";
+    if (successButtonProps && !successButtonProps.colorScheme)
+      successButtonProps.colorScheme = "primary";
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      Modal,
+      {
+        ref,
+        className: (0, import_utils5.cx)("ui-dialog", className),
+        __css: css,
+        ...{
+          size,
+          onClose,
+          withOverlay: false,
+          withCloseButton: false,
+          ...rest
+        },
+        children: [
+          customDialogOverlay != null ? customDialogOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogOverlay, {}) : null,
+          customDialogCloseButton != null ? customDialogCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogCloseButton, {}) : null,
+          customDialogHeader != null ? customDialogHeader : header ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogHeader, { children: header }) : null,
+          customDialogBody != null ? customDialogBody : cloneChildren ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogBody, { children: cloneChildren }) : null,
+          customDialogFooter != null ? customDialogFooter : footer || cancelButtonProps || otherButtonProps || successButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogFooter, { children: footer != null ? footer : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+            cancelButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_button.Button,
+              {
+                onClick: () => onCancel == null ? void 0 : onCancel(onClose),
+                ...cancelButtonProps
+              }
+            ) : null,
+            otherButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_button.Button,
+              {
+                onClick: () => onOther == null ? void 0 : onOther(onClose),
+                ...otherButtonProps
+              }
+            ) : null,
+            successButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_button.Button,
+              {
+                onClick: () => onSuccess == null ? void 0 : onSuccess(onClose),
+                ...successButtonProps
+              }
+            ) : null
+          ] }) }) : null
+        ]
+      }
+    ) });
+  }
+);
 var DialogOverlay = (0, import_core5.forwardRef)(
   ({ className, ...rest }, ref) => {
     const styles = useDialog();
@@ -239,19 +302,45 @@ var DialogHeader = (0, import_core5.forwardRef)(
   ({ className, ...rest }, ref) => {
     const styles = useDialog();
     const css = { ...styles.header };
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ModalHeader, { ref, className: (0, import_utils5.cx)("ui-dialog-header", className), __css: css, ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      ModalHeader,
+      {
+        ref,
+        className: (0, import_utils5.cx)("ui-dialog-header", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+var DialogBody = (0, import_core5.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const styles = useDialog();
+    const css = { ...styles.body };
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      ModalBody,
+      {
+        ref,
+        className: (0, import_utils5.cx)("ui-dialog-body", className),
+        __css: css,
+        ...rest
+      }
+    );
   }
 );
-var DialogBody = (0, import_core5.forwardRef)(({ className, ...rest }, ref) => {
-  const styles = useDialog();
-  const css = { ...styles.body };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ModalBody, { ref, className: (0, import_utils5.cx)("ui-dialog-body", className), __css: css, ...rest });
-});
 var DialogFooter = (0, import_core5.forwardRef)(
   ({ className, ...rest }, ref) => {
     const styles = useDialog();
     const css = { ...styles.footer };
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ModalFooter, { ref, className: (0, import_utils5.cx)("ui-dialog-footer", className), __css: css, ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      ModalFooter,
+      {
+        ref,
+        className: (0, import_utils5.cx)("ui-dialog-footer", className),
+        __css: css,
+        ...rest
+      }
+    );
   }
 );
 
@@ -261,62 +350,70 @@ var [DrawerProvider, useDrawer] = (0, import_utils6.createContext)({
   name: `DrawerContext`,
   errorMessage: `useDrawer returned is 'undefined'. Seems you forgot to wrap the components in "<Drawer />" `
 });
-var Drawer = (0, import_core6.forwardRef)(({ size, ...props }, ref) => {
-  const [styles, mergedProps] = (0, import_core6.useMultiComponentStyle)("Drawer", { size, ...props });
-  const {
-    children,
-    isOpen,
-    placement = "right",
-    onClose,
-    onOverlayClick,
-    onEsc,
-    onCloseComplete,
-    withCloseButton = true,
-    withOverlay = true,
-    allowPinchZoom,
-    autoFocus,
-    restoreFocus,
-    initialFocusRef,
-    finalFocusRef,
-    blockScrollOnMount,
-    closeOnOverlay,
-    closeOnEsc,
-    lockFocusAcrossFrames,
-    duration = { enter: 0.4, exit: 0.3 },
-    ...rest
-  } = (0, import_core6.omitThemeProps)(mergedProps);
-  const validChildren = (0, import_utils6.getValidChildren)(children);
-  const [customDrawerOverlay, ...cloneChildren] = (0, import_utils6.findChildren)(validChildren, DrawerOverlay);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DrawerProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    Modal,
-    {
-      ref,
-      ...{
-        isOpen,
-        onClose,
-        onOverlayClick,
-        onEsc,
-        onCloseComplete,
-        withCloseButton: false,
-        withOverlay: false,
-        allowPinchZoom,
-        autoFocus,
-        restoreFocus,
-        initialFocusRef,
-        finalFocusRef,
-        blockScrollOnMount,
-        closeOnOverlay,
-        closeOnEsc,
-        lockFocusAcrossFrames,
-        duration
-      },
-      children: [
-        customDrawerOverlay != null ? customDrawerOverlay : withOverlay ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DrawerOverlay, {}) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DrawerContent, { ...{ placement, withCloseButton, ...rest }, children: cloneChildren })
-      ]
-    }
-  ) });
-});
+var Drawer = (0, import_core6.forwardRef)(
+  ({ size, ...props }, ref) => {
+    const [styles, mergedProps] = (0, import_core6.useMultiComponentStyle)("Drawer", {
+      size,
+      ...props
+    });
+    const {
+      children,
+      isOpen,
+      placement = "right",
+      onClose,
+      onOverlayClick,
+      onEsc,
+      onCloseComplete,
+      withCloseButton = true,
+      withOverlay = true,
+      allowPinchZoom,
+      autoFocus,
+      restoreFocus,
+      initialFocusRef,
+      finalFocusRef,
+      blockScrollOnMount,
+      closeOnOverlay,
+      closeOnEsc,
+      lockFocusAcrossFrames,
+      duration = { enter: 0.4, exit: 0.3 },
+      ...rest
+    } = (0, import_core6.omitThemeProps)(mergedProps);
+    const validChildren = (0, import_utils6.getValidChildren)(children);
+    const [customDrawerOverlay, ...cloneChildren] = (0, import_utils6.findChildren)(
+      validChildren,
+      DrawerOverlay
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DrawerProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      Modal,
+      {
+        ref,
+        ...{
+          isOpen,
+          onClose,
+          onOverlayClick,
+          onEsc,
+          onCloseComplete,
+          withCloseButton: false,
+          withOverlay: false,
+          allowPinchZoom,
+          autoFocus,
+          restoreFocus,
+          initialFocusRef,
+          finalFocusRef,
+          blockScrollOnMount,
+          closeOnOverlay,
+          closeOnEsc,
+          lockFocusAcrossFrames,
+          duration
+        },
+        children: [
+          customDrawerOverlay != null ? customDrawerOverlay : withOverlay ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DrawerOverlay, {}) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DrawerContent, { ...{ placement, withCloseButton, ...rest }, children: cloneChildren })
+        ]
+      }
+    ) });
+  }
+);
 var DrawerContent = (0, import_core6.forwardRef)(
   ({ className, children, placement, withCloseButton, ...rest }, ref) => {
     const { isOpen, onClose, duration } = useModal();
@@ -386,19 +483,45 @@ var DrawerHeader = (0, import_core6.forwardRef)(
   ({ className, ...rest }, ref) => {
     const styles = useDrawer();
     const css = { ...styles.header };
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ModalHeader, { ref, className: (0, import_utils6.cx)("ui-drawer-header", className), __css: css, ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ModalHeader,
+      {
+        ref,
+        className: (0, import_utils6.cx)("ui-drawer-header", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+var DrawerBody = (0, import_core6.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const styles = useDrawer();
+    const css = { ...styles.body };
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ModalBody,
+      {
+        ref,
+        className: (0, import_utils6.cx)("ui-drawer-body", className),
+        __css: css,
+        ...rest
+      }
+    );
   }
 );
-var DrawerBody = (0, import_core6.forwardRef)(({ className, ...rest }, ref) => {
-  const styles = useDrawer();
-  const css = { ...styles.body };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ModalBody, { ref, className: (0, import_utils6.cx)("ui-drawer-body", className), __css: css, ...rest });
-});
 var DrawerFooter = (0, import_core6.forwardRef)(
   ({ className, ...rest }, ref) => {
     const styles = useDrawer();
     const css = { ...styles.footer };
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ModalFooter, { ref, className: (0, import_utils6.cx)("ui-drawer-footer", className), __css: css, ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ModalFooter,
+      {
+        ref,
+        className: (0, import_utils6.cx)("ui-drawer-footer", className),
+        __css: css,
+        ...rest
+      }
+    );
   }
 );
 
@@ -408,107 +531,121 @@ var [ModalProvider, useModal] = (0, import_utils7.createContext)({
   name: `ModalContext`,
   errorMessage: `useModal returned is 'undefined'. Seems you forgot to wrap the components in "<Modal />" `
 });
-var Modal = (0, import_core7.forwardRef)(({ size, ...props }, ref) => {
-  const [styles, mergedProps] = (0, import_core7.useMultiComponentStyle)("Modal", { size, ...props });
-  const {
-    className,
-    children,
-    isOpen,
-    onClose,
-    onOverlayClick,
-    onEsc,
-    onCloseComplete,
-    placement: _placement = "center",
-    outside = "md",
-    withCloseButton = true,
-    withOverlay = true,
-    allowPinchZoom = false,
-    scrollBehavior = "inside",
-    autoFocus,
-    restoreFocus,
-    initialFocusRef,
-    finalFocusRef,
-    blockScrollOnMount = true,
-    closeOnOverlay = true,
-    closeOnEsc = true,
-    lockFocusAcrossFrames = true,
-    animation = "scale",
-    duration,
-    ...rest
-  } = (0, import_core7.omitThemeProps)(mergedProps);
-  const onKeyDown = (0, import_react.useCallback)(
-    (event) => {
-      if (event.key !== "Escape")
-        return;
-      event.stopPropagation();
-      if (closeOnEsc)
-        onClose == null ? void 0 : onClose();
-      onEsc == null ? void 0 : onEsc();
-    },
-    [closeOnEsc, onClose, onEsc]
-  );
-  const validChildren = (0, import_utils7.getValidChildren)(children);
-  const [customModalOverlay, ...cloneChildren] = (0, import_utils7.findChildren)(
-    validChildren,
-    ModalOverlay,
-    DialogOverlay,
-    DrawerOverlay
-  );
-  let [drawerContent] = (0, import_utils7.findChildren)(validChildren, DrawerContent);
-  if (drawerContent)
-    drawerContent = (0, import_react.cloneElement)(drawerContent, { onKeyDown });
-  const placement = (0, import_use_value.useValue)(_placement);
-  const css = {
-    position: "fixed",
-    top: 0,
-    left: 0,
-    zIndex: "beerus",
-    w: "100vw",
-    h: "100vh",
-    p: size !== "full" ? outside : void 0,
-    display: "flex",
-    justifyContent: placement.includes("right") ? "flex-start" : placement.includes("left") ? "flex-end" : "center",
-    alignItems: placement.includes("top") ? "flex-start" : placement.includes("bottom") ? "flex-end" : "center"
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    ModalProvider,
-    {
-      value: {
-        isOpen,
-        onClose,
-        onOverlayClick,
-        withCloseButton,
-        scrollBehavior,
-        closeOnOverlay,
-        animation,
-        duration,
-        styles
+var Modal = (0, import_core7.forwardRef)(
+  ({ size, ...props }, ref) => {
+    const [styles, mergedProps] = (0, import_core7.useMultiComponentStyle)("Modal", {
+      size,
+      ...props
+    });
+    const {
+      className,
+      children,
+      isOpen,
+      onClose,
+      onOverlayClick,
+      onEsc,
+      onCloseComplete,
+      placement: _placement = "center",
+      outside = "md",
+      withCloseButton = true,
+      withOverlay = true,
+      allowPinchZoom = false,
+      scrollBehavior = "inside",
+      autoFocus,
+      restoreFocus,
+      initialFocusRef,
+      finalFocusRef,
+      blockScrollOnMount = true,
+      closeOnOverlay = true,
+      closeOnEsc = true,
+      lockFocusAcrossFrames = true,
+      animation = "scale",
+      duration,
+      ...rest
+    } = (0, import_core7.omitThemeProps)(mergedProps);
+    const onKeyDown = (0, import_react.useCallback)(
+      (event) => {
+        if (event.key !== "Escape")
+          return;
+        event.stopPropagation();
+        if (closeOnEsc)
+          onClose == null ? void 0 : onClose();
+        onEsc == null ? void 0 : onEsc();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_motion2.AnimatePresence, { onExitComplete: onCloseComplete, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_focus_lock.FocusLock,
-        {
-          autoFocus,
-          initialFocusRef,
-          finalFocusRef,
-          restoreFocus,
-          lockFocusAcrossFrames,
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            import_react_remove_scroll.RemoveScroll,
-            {
-              allowPinchZoom,
-              enabled: blockScrollOnMount,
-              forwardProps: true,
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.ui.div, { __css: css, children: [
-                customModalOverlay != null ? customModalOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ModalOverlay, {}) : null,
-                drawerContent != null ? drawerContent : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ModalContent, { ref, className, onKeyDown, ...rest, children: cloneChildren })
-              ] })
-            }
-          )
-        }
-      ) }) : null })
-    }
-  );
-});
+      [closeOnEsc, onClose, onEsc]
+    );
+    const validChildren = (0, import_utils7.getValidChildren)(children);
+    const [customModalOverlay, ...cloneChildren] = (0, import_utils7.findChildren)(
+      validChildren,
+      ModalOverlay,
+      DialogOverlay,
+      DrawerOverlay
+    );
+    let [drawerContent] = (0, import_utils7.findChildren)(validChildren, DrawerContent);
+    if (drawerContent)
+      drawerContent = (0, import_react.cloneElement)(drawerContent, { onKeyDown });
+    const placement = (0, import_use_value.useValue)(_placement);
+    const css = {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      zIndex: "beerus",
+      w: "100vw",
+      h: "100vh",
+      p: size !== "full" ? outside : void 0,
+      display: "flex",
+      justifyContent: placement.includes("right") ? "flex-start" : placement.includes("left") ? "flex-end" : "center",
+      alignItems: placement.includes("top") ? "flex-start" : placement.includes("bottom") ? "flex-end" : "center"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ModalProvider,
+      {
+        value: {
+          isOpen,
+          onClose,
+          onOverlayClick,
+          withCloseButton,
+          scrollBehavior,
+          closeOnOverlay,
+          animation,
+          duration,
+          styles
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_motion2.AnimatePresence, { onExitComplete: onCloseComplete, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_focus_lock.FocusLock,
+          {
+            autoFocus,
+            initialFocusRef,
+            finalFocusRef,
+            restoreFocus,
+            lockFocusAcrossFrames,
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              import_react_remove_scroll.RemoveScroll,
+              {
+                allowPinchZoom,
+                enabled: blockScrollOnMount,
+                forwardProps: true,
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.ui.div, { __css: css, children: [
+                  customModalOverlay != null ? customModalOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ModalOverlay, {}) : null,
+                  drawerContent != null ? drawerContent : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    ModalContent,
+                    {
+                      ref,
+                      className,
+                      onKeyDown,
+                      ...rest,
+                      children: cloneChildren
+                    }
+                  )
+                ] })
+              }
+            )
+          }
+        ) }) : null })
+      }
+    );
+  }
+);
 var getModalContentProps = (animation = "scale", duration) => {
   switch (animation) {
     case "scale":
@@ -540,7 +677,14 @@ var getModalContentProps = (animation = "scale", duration) => {
 };
 var ModalContent = (0, import_core7.forwardRef)(
   ({ className, children, __css, ...rest }, ref) => {
-    const { styles, scrollBehavior, withCloseButton, onClose, animation, duration } = useModal();
+    const {
+      styles,
+      scrollBehavior,
+      withCloseButton,
+      onClose,
+      animation,
+      duration
+    } = useModal();
     const validChildren = (0, import_utils7.getValidChildren)(children);
     const [customModalCloseButton, ...cloneChildren] = (0, import_utils7.findChildren)(
       validChildren,