@yamada-ui/modal 0.1.12 → 0.2.0

package/dist/index.js

@@ -29,7 +29,6 @@ __export(src_exports, {
   Drawer: () => Drawer,
   DrawerBody: () => DrawerBody,
   DrawerCloseButton: () => DrawerCloseButton,
-  DrawerContent: () => DrawerContent,
   DrawerFooter: () => DrawerFooter,
   DrawerHeader: () => DrawerHeader,
   DrawerOverlay: () => DrawerOverlay,
@@ -38,28 +37,180 @@ __export(src_exports, {
   ModalCloseButton: () => ModalCloseButton,
   ModalFooter: () => ModalFooter,
   ModalHeader: () => ModalHeader,
-  ModalOverlay: () => ModalOverlay,
-  useModal: () => useModal
+  ModalOverlay: () => ModalOverlay
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/modal.tsx
-var import_core = require("@yamada-ui/core");
+var import_core2 = require("@yamada-ui/core");
 var import_focus_lock = require("@yamada-ui/focus-lock");
 var import_motion = require("@yamada-ui/motion");
 var import_portal = require("@yamada-ui/portal");
-var import_transitions = require("@yamada-ui/transitions");
+var import_transitions2 = require("@yamada-ui/transitions");
 var import_use_value = require("@yamada-ui/use-value");
-var import_utils = require("@yamada-ui/utils");
+var import_utils2 = require("@yamada-ui/utils");
 var import_react = require("react");
 var import_react_remove_scroll = require("react-remove-scroll");
+
+// src/drawer.tsx
+var import_core = require("@yamada-ui/core");
+var import_transitions = require("@yamada-ui/transitions");
+var import_utils = require("@yamada-ui/utils");
 var import_jsx_runtime = require("react/jsx-runtime");
-var [ModalProvider, useModal] = (0, import_utils.createContext)({
+var [DrawerProvider, useDrawer] = (0, import_utils.createContext)({
+  name: `DrawerContext`,
+  errorMessage: `useDrawer returned is 'undefined'. Seems you forgot to wrap the components in "<Drawer />" `
+});
+var Drawer = (0, import_core.forwardRef)(({ size, ...props }, ref) => {
+  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Drawer", { size, ...props });
+  const {
+    className,
+    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_core.omitThemeProps)(mergedProps);
+  const validChildren = (0, import_utils.getValidChildren)(children);
+  const [customDrawerOverlay, ...cloneChildren] = (0, import_utils.findChildren)(validChildren, DrawerOverlay);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)(DrawerOverlay, {}) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerContent, { ...{ placement, withCloseButton, ...rest }, children: cloneChildren })
+      ]
+    }
+  ) });
+});
+var DrawerContent = (0, import_core.forwardRef)(
+  ({ className, children, placement, withCloseButton, ...rest }, ref) => {
+    const { isOpen, onClose, duration } = useModal();
+    const styles = useDrawer();
+    const validChildren = (0, import_utils.getValidChildren)(children);
+    const [customDrawerCloseButton, ...cloneChildren] = (0, import_utils.findChildren)(
+      validChildren,
+      DrawerCloseButton
+    );
+    const css = {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      outline: 0,
+      ...styles.container
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_transitions.Slide,
+      {
+        ref,
+        className: (0, import_utils.cx)("ui-drawer", className),
+        tabIndex: -1,
+        isOpen,
+        placement,
+        duration,
+        __css: css,
+        ...rest,
+        children: [
+          customDrawerCloseButton != null ? customDrawerCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerCloseButton, {}) : null,
+          cloneChildren
+        ]
+      }
+    );
+  }
+);
+var DrawerOverlay = (0, import_core.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const styles = useDrawer();
+    const css = { ...styles.overlay };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ModalOverlay,
+      {
+        ref,
+        className: (0, import_utils.cx)("ui-drawer-overlay", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+var DrawerCloseButton = (0, import_core.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const styles = useDrawer();
+    const css = { ...styles.closeButton };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ModalCloseButton,
+      {
+        ref,
+        className: (0, import_utils.cx)("ui-drawer-close-button", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+var DrawerHeader = (0, import_core.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const styles = useDrawer();
+    const css = { ...styles.header };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalHeader, { ref, className: (0, import_utils.cx)("ui-drawer-header", className), __css: css, ...rest });
+  }
+);
+var DrawerBody = (0, import_core.forwardRef)(({ className, ...rest }, ref) => {
+  const styles = useDrawer();
+  const css = { ...styles.body };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalBody, { ref, className: (0, import_utils.cx)("ui-drawer-body", className), __css: css, ...rest });
+});
+var DrawerFooter = (0, import_core.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const styles = useDrawer();
+    const css = { ...styles.footer };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalFooter, { ref, className: (0, import_utils.cx)("ui-drawer-footer", className), __css: css, ...rest });
+  }
+);
+
+// src/modal.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var [ModalProvider, useModal] = (0, import_utils2.createContext)({
   name: `ModalContext`,
   errorMessage: `useModal returned is 'undefined'. Seems you forgot to wrap the components in "<Modal />" `
 });
-var Modal = (0, import_core.forwardRef)(({ size, ...props }, ref) => {
-  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Modal", { size, ...props });
+var Modal = (0, import_core2.forwardRef)(({ size, ...props }, ref) => {
+  const [styles, mergedProps] = (0, import_core2.useMultiComponentStyle)("Modal", { size, ...props });
   const {
     className,
     children,
@@ -85,7 +236,7 @@ var Modal = (0, import_core.forwardRef)(({ size, ...props }, ref) => {
     animation = "scale",
     duration,
     ...rest
-  } = (0, import_core.omitThemeProps)(mergedProps);
+  } = (0, import_core2.omitThemeProps)(mergedProps);
   const onKeyDown = (0, import_react.useCallback)(
     (event) => {
       if (event.key !== "Escape")
@@ -97,14 +248,14 @@ var Modal = (0, import_core.forwardRef)(({ size, ...props }, ref) => {
     },
     [closeOnEsc, onClose, onEsc]
   );
-  const validChildren = (0, import_utils.getValidChildren)(children);
-  const [customModalOverlay, ...cloneChildren] = (0, import_utils.findChildren)(
+  const validChildren = (0, import_utils2.getValidChildren)(children);
+  const [customModalOverlay, ...cloneChildren] = (0, import_utils2.findChildren)(
     validChildren,
     ModalOverlay,
     DialogOverlay,
     DrawerOverlay
   );
-  let [drawerContent] = (0, import_utils.findChildren)(validChildren, DrawerContent);
+  let [drawerContent] = (0, import_utils2.findChildren)(validChildren, DrawerContent);
   if (drawerContent)
     drawerContent = (0, import_react.cloneElement)(drawerContent, { onKeyDown });
   const placement = (0, import_use_value.useValue)(_placement);
@@ -120,7 +271,7 @@ var Modal = (0, import_core.forwardRef)(({ size, ...props }, ref) => {
     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_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     ModalProvider,
     {
       value: {
@@ -134,7 +285,7 @@ var Modal = (0, import_core.forwardRef)(({ size, ...props }, ref) => {
         duration,
         styles
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { onExitComplete: onCloseComplete, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_motion.AnimatePresence, { onExitComplete: onCloseComplete, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         import_focus_lock.FocusLock,
         {
           autoFocus,
@@ -142,15 +293,15 @@ var Modal = (0, import_core.forwardRef)(({ size, ...props }, ref) => {
           finalFocusRef,
           restoreFocus,
           lockFocusAcrossFrames,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             import_react_remove_scroll.RemoveScroll,
             {
               allowPinchZoom,
               enabled: blockScrollOnMount,
               forwardProps: true,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.ui.div, { __css: css, children: [
-                customModalOverlay != null ? customModalOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalOverlay, {}) : null,
-                drawerContent != null ? drawerContent : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalContent, { ref, className, onKeyDown, ...rest, children: cloneChildren })
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_core2.ui.div, { __css: css, children: [
+                customModalOverlay != null ? customModalOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ModalOverlay, {}) : null,
+                drawerContent != null ? drawerContent : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ModalContent, { ref, className, onKeyDown, ...rest, children: cloneChildren })
               ] })
             }
           )
@@ -163,36 +314,36 @@ var getModalContentProps = (animation = "scale", duration) => {
   switch (animation) {
     case "scale":
       return {
-        ...import_transitions.scaleFadeProps,
+        ...import_transitions2.scaleFadeProps,
         custom: { scale: 0.95, reverse: true, duration }
       };
     case "top":
       return {
-        ...import_transitions.slideFadeProps,
+        ...import_transitions2.slideFadeProps,
         custom: { offsetY: -16, reverse: true, duration }
       };
     case "right":
       return {
-        ...import_transitions.slideFadeProps,
+        ...import_transitions2.slideFadeProps,
         custom: { offsetX: 16, reverse: true, duration }
       };
     case "left":
       return {
-        ...import_transitions.slideFadeProps,
+        ...import_transitions2.slideFadeProps,
         custom: { offsetX: -16, reverse: true, duration }
       };
     case "bottom":
       return {
-        ...import_transitions.slideFadeProps,
+        ...import_transitions2.slideFadeProps,
         custom: { offsetY: 16, reverse: true, duration }
       };
   }
 };
-var ModalContent = (0, import_core.forwardRef)(
+var ModalContent = (0, import_core2.forwardRef)(
   ({ className, children, __css, ...rest }, ref) => {
     const { styles, scrollBehavior, withCloseButton, onClose, animation, duration } = useModal();
-    const validChildren = (0, import_utils.getValidChildren)(children);
-    const [customModalCloseButton, ...cloneChildren] = (0, import_utils.findChildren)(
+    const validChildren = (0, import_utils2.getValidChildren)(children);
+    const [customModalCloseButton, ...cloneChildren] = (0, import_utils2.findChildren)(
       validChildren,
       ModalCloseButton,
       DialogCloseButton
@@ -207,18 +358,18 @@ var ModalContent = (0, import_core.forwardRef)(
       outline: 0,
       ...__css ? __css : styles.container
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_core.ui.section,
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_core2.ui.section,
       {
         as: import_motion.motion.section,
         ref,
-        className: (0, import_utils.cx)("ui-modal", className),
+        className: (0, import_utils2.cx)("ui-modal", className),
         tabIndex: -1,
         __css: css,
         ...props,
         ...rest,
         children: [
-          customModalCloseButton != null ? customModalCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalCloseButton, {}) : null,
+          customModalCloseButton != null ? customModalCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ModalCloseButton, {}) : null,
           cloneChildren
         ]
       }
@@ -227,12 +378,12 @@ var ModalContent = (0, import_core.forwardRef)(
 );
 
 // src/modal-overlay.tsx
-var import_core2 = require("@yamada-ui/core");
+var import_core3 = require("@yamada-ui/core");
 var import_motion2 = require("@yamada-ui/motion");
-var import_transitions2 = require("@yamada-ui/transitions");
-var import_utils2 = require("@yamada-ui/utils");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ModalOverlay = (0, import_core2.forwardRef)(
+var import_transitions3 = require("@yamada-ui/transitions");
+var import_utils3 = require("@yamada-ui/utils");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ModalOverlay = (0, import_core3.forwardRef)(
   ({ className, __css, onClick, ...rest }, ref) => {
     const { styles, closeOnOverlay, onOverlayClick, onClose, animation, duration } = useModal();
     const css = {
@@ -243,16 +394,16 @@ var ModalOverlay = (0, import_core2.forwardRef)(
       h: "100vh",
       ...__css ? __css : styles.overlay
     };
-    const props = animation !== "none" ? import_transitions2.fadeProps : {};
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_core2.ui.div,
+    const props = animation !== "none" ? import_transitions3.fadeProps : {};
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_core3.ui.div,
       {
         as: import_motion2.motion.div,
         ref,
-        className: (0, import_utils2.cx)("ui-modal-overlay", className),
+        className: (0, import_utils3.cx)("ui-modal-overlay", className),
         custom: { duration },
         __css: css,
-        onClick: (0, import_utils2.handlerAll)(onClick, onOverlayClick, (event) => {
+        onClick: (0, import_utils3.handlerAll)(onClick, onOverlayClick, (event) => {
           event.stopPropagation();
           if (closeOnOverlay)
             onClose == null ? void 0 : onClose();
@@ -266,23 +417,23 @@ var ModalOverlay = (0, import_core2.forwardRef)(
 
 // src/modal-close-button.tsx
 var import_close_button = require("@yamada-ui/close-button");
-var import_core3 = require("@yamada-ui/core");
-var import_utils3 = require("@yamada-ui/utils");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var ModalCloseButton = (0, import_core3.forwardRef)(
+var import_core4 = require("@yamada-ui/core");
+var import_utils4 = require("@yamada-ui/utils");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ModalCloseButton = (0, import_core4.forwardRef)(
   ({ onClick, __css, ...rest }, ref) => {
     const { styles, onClose } = useModal();
     const css = {
       position: "absolute",
       ...__css ? __css : styles.closeButton
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_close_button.CloseButton,
       {
         ref,
-        className: (0, import_utils3.cx)("ui-modal-close-button"),
+        className: (0, import_utils4.cx)("ui-modal-close-button"),
         __css: css,
-        onClick: (0, import_utils3.handlerAll)(onClick, (event) => {
+        onClick: (0, import_utils4.handlerAll)(onClick, (event) => {
           event.stopPropagation();
           onClose == null ? void 0 : onClose();
         }),
@@ -293,10 +444,10 @@ var ModalCloseButton = (0, import_core3.forwardRef)(
 );
 
 // src/modal-header.tsx
-var import_core4 = require("@yamada-ui/core");
-var import_utils4 = require("@yamada-ui/utils");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var ModalHeader = (0, import_core4.forwardRef)(
+var import_core5 = require("@yamada-ui/core");
+var import_utils5 = require("@yamada-ui/utils");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ModalHeader = (0, import_core5.forwardRef)(
   ({ className, __css, ...rest }, ref) => {
     const { styles } = useModal();
     const css = {
@@ -305,15 +456,15 @@ var ModalHeader = (0, import_core4.forwardRef)(
       justifyContent: "flex-start",
       ...__css ? __css : styles.header
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.header, { ref, className: (0, import_utils4.cx)("ui-modal-header", className), __css: css, ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.ui.header, { ref, className: (0, import_utils5.cx)("ui-modal-header", className), __css: css, ...rest });
   }
 );
 
 // src/modal-body.tsx
-var import_core5 = require("@yamada-ui/core");
-var import_utils5 = require("@yamada-ui/utils");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var ModalBody = (0, import_core5.forwardRef)(
+var import_core6 = require("@yamada-ui/core");
+var import_utils6 = require("@yamada-ui/utils");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ModalBody = (0, import_core6.forwardRef)(
   ({ className, __css, ...rest }, ref) => {
     const { styles, scrollBehavior } = useModal();
     const css = {
@@ -323,15 +474,15 @@ var ModalBody = (0, import_core5.forwardRef)(
       overflow: scrollBehavior === "inside" ? "auto" : void 0,
       ...__css ? __css : styles.body
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.ui.main, { ref, className: (0, import_utils5.cx)("ui-modal-body", className), __css: css, ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.ui.main, { ref, className: (0, import_utils6.cx)("ui-modal-body", className), __css: css, ...rest });
   }
 );
 
 // src/modal-footer.tsx
-var import_core6 = require("@yamada-ui/core");
-var import_utils6 = require("@yamada-ui/utils");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var ModalFooter = (0, import_core6.forwardRef)(
+var import_core7 = require("@yamada-ui/core");
+var import_utils7 = require("@yamada-ui/utils");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ModalFooter = (0, import_core7.forwardRef)(
   ({ className, __css, ...rest }, ref) => {
     const { styles } = useModal();
     const css = {
@@ -340,21 +491,21 @@ var ModalFooter = (0, import_core6.forwardRef)(
       justifyContent: "flex-end",
       ...__css ? __css : styles.footer
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.ui.footer, { ref, className: (0, import_utils6.cx)("ui-modal-footer", className), __css: css, ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.ui.footer, { ref, className: (0, import_utils7.cx)("ui-modal-footer", className), __css: css, ...rest });
   }
 );
 
 // src/dialog.tsx
 var import_button = require("@yamada-ui/button");
-var import_core7 = require("@yamada-ui/core");
-var import_utils7 = require("@yamada-ui/utils");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var [DialogProvider, useDialog] = (0, import_utils7.createContext)({
+var import_core8 = require("@yamada-ui/core");
+var import_utils8 = require("@yamada-ui/utils");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var [DialogProvider, useDialog] = (0, import_utils8.createContext)({
   name: `DialogContext`,
   errorMessage: `useDialog returned is 'undefined'. Seems you forgot to wrap the components in "<Dialog />" `
 });
-var Dialog = (0, import_core7.forwardRef)(({ size, ...props }, ref) => {
-  const [styles, mergedProps] = (0, import_core7.useMultiComponentStyle)("Dialog", { size, ...props });
+var Dialog = (0, import_core8.forwardRef)(({ size, ...props }, ref) => {
+  const [styles, mergedProps] = (0, import_core8.useMultiComponentStyle)("Dialog", { size, ...props });
   const {
     className,
     children,
@@ -370,14 +521,14 @@ var Dialog = (0, import_core7.forwardRef)(({ size, ...props }, ref) => {
     onOther,
     onSuccess,
     ...rest
-  } = (0, import_core7.omitThemeProps)(mergedProps);
-  const validChildren = (0, import_utils7.getValidChildren)(children);
-  const [customDialogOverlay] = (0, import_utils7.findChildren)(validChildren, DialogOverlay);
-  const [customDialogCloseButton] = (0, import_utils7.findChildren)(validChildren, DialogCloseButton);
-  const [customDialogHeader] = (0, import_utils7.findChildren)(validChildren, DialogHeader);
-  const [customDialogBody] = (0, import_utils7.findChildren)(validChildren, DialogBody);
-  const [customDialogFooter] = (0, import_utils7.findChildren)(validChildren, DialogFooter);
-  const cloneChildren = !(0, import_utils7.isEmpty)(validChildren) ? (0, import_utils7.omitChildren)(
+  } = (0, import_core8.omitThemeProps)(mergedProps);
+  const validChildren = (0, import_utils8.getValidChildren)(children);
+  const [customDialogOverlay] = (0, import_utils8.findChildren)(validChildren, DialogOverlay);
+  const [customDialogCloseButton] = (0, import_utils8.findChildren)(validChildren, DialogCloseButton);
+  const [customDialogHeader] = (0, import_utils8.findChildren)(validChildren, DialogHeader);
+  const [customDialogBody] = (0, import_utils8.findChildren)(validChildren, DialogBody);
+  const [customDialogFooter] = (0, import_utils8.findChildren)(validChildren, DialogFooter);
+  const cloneChildren = !(0, import_utils8.isEmpty)(validChildren) ? (0, import_utils8.omitChildren)(
     validChildren,
     DialogOverlay,
     DialogCloseButton,
@@ -386,233 +537,82 @@ var Dialog = (0, import_core7.forwardRef)(({ size, ...props }, ref) => {
     DialogFooter
   ) : children;
   const css = { ...styles.container };
-  const cancelButtonProps = (0, import_utils7.isValidElement)(cancel) ? { children: cancel } : cancel;
-  const otherButtonProps = (0, import_utils7.isValidElement)(other) ? { children: other } : other;
-  const successButtonProps = (0, import_utils7.isValidElement)(success) ? { children: success } : success;
+  const cancelButtonProps = (0, import_utils8.isValidElement)(cancel) ? { children: cancel } : cancel;
+  const otherButtonProps = (0, import_utils8.isValidElement)(other) ? { children: other } : other;
+  const successButtonProps = (0, import_utils8.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_runtime7.jsx)(DialogProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     Modal,
     {
       ref,
       __css: css,
       ...{ size, onClose, withOverlay: false, withCloseButton: false, ...rest },
       children: [
-        customDialogOverlay != null ? customDialogOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogOverlay, {}) : null,
-        customDialogCloseButton != null ? customDialogCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogCloseButton, {}) : null,
-        customDialogHeader != null ? customDialogHeader : header ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogHeader, { children: header }) : null,
-        customDialogBody != null ? customDialogBody : cloneChildren ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogBody, { children: cloneChildren }) : null,
-        customDialogFooter != null ? customDialogFooter : footer || cancelButtonProps || otherButtonProps || successButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogFooter, { children: footer != null ? footer : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-          cancelButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_button.Button, { onClick: () => onCancel == null ? void 0 : onCancel(onClose), ...cancelButtonProps }) : null,
-          otherButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_button.Button, { onClick: () => onOther == null ? void 0 : onOther(onClose), ...otherButtonProps }) : null,
-          successButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_button.Button, { onClick: () => onSuccess == null ? void 0 : onSuccess(onClose), ...successButtonProps }) : null
+        customDialogOverlay != null ? customDialogOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogOverlay, {}) : null,
+        customDialogCloseButton != null ? customDialogCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogCloseButton, {}) : null,
+        customDialogHeader != null ? customDialogHeader : header ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogHeader, { children: header }) : null,
+        customDialogBody != null ? customDialogBody : cloneChildren ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogBody, { children: cloneChildren }) : null,
+        customDialogFooter != null ? customDialogFooter : footer || cancelButtonProps || otherButtonProps || successButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogFooter, { children: footer != null ? footer : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+          cancelButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_button.Button, { onClick: () => onCancel == null ? void 0 : onCancel(onClose), ...cancelButtonProps }) : null,
+          otherButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_button.Button, { onClick: () => onOther == null ? void 0 : onOther(onClose), ...otherButtonProps }) : null,
+          successButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_button.Button, { onClick: () => onSuccess == null ? void 0 : onSuccess(onClose), ...successButtonProps }) : null
         ] }) }) : null
       ]
     }
   ) });
 });
-var DialogOverlay = (0, import_core7.forwardRef)(
+var DialogOverlay = (0, import_core8.forwardRef)(
   ({ className, ...rest }, ref) => {
     const styles = useDialog();
     const css = { ...styles.overlay };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       ModalOverlay,
       {
         ref,
-        className: (0, import_utils7.cx)("ui-dialog-overlay", className),
+        className: (0, import_utils8.cx)("ui-dialog-overlay", className),
         __css: css,
         ...rest
       }
     );
   }
 );
-var DialogCloseButton = (0, import_core7.forwardRef)(
+var DialogCloseButton = (0, import_core8.forwardRef)(
   ({ className, ...rest }, ref) => {
     const styles = useDialog();
     const css = { ...styles.closeButton };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       ModalCloseButton,
       {
         ref,
-        className: (0, import_utils7.cx)("ui-dialog-close-button", className),
+        className: (0, import_utils8.cx)("ui-dialog-close-button", className),
         __css: css,
         ...rest
       }
     );
   }
 );
-var DialogHeader = (0, import_core7.forwardRef)(
+var DialogHeader = (0, import_core8.forwardRef)(
   ({ className, ...rest }, ref) => {
     const styles = useDialog();
     const css = { ...styles.header };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ModalHeader, { ref, className: (0, import_utils7.cx)("ui-dialog-header", className), __css: css, ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalHeader, { ref, className: (0, import_utils8.cx)("ui-dialog-header", className), __css: css, ...rest });
   }
 );
-var DialogBody = (0, import_core7.forwardRef)(({ className, ...rest }, ref) => {
+var DialogBody = (0, import_core8.forwardRef)(({ className, ...rest }, ref) => {
   const styles = useDialog();
   const css = { ...styles.body };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ModalBody, { ref, className: (0, import_utils7.cx)("ui-dialog-body", className), __css: css, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalBody, { ref, className: (0, import_utils8.cx)("ui-dialog-body", className), __css: css, ...rest });
 });
-var DialogFooter = (0, import_core7.forwardRef)(
+var DialogFooter = (0, import_core8.forwardRef)(
   ({ className, ...rest }, ref) => {
     const styles = useDialog();
     const css = { ...styles.footer };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ModalFooter, { ref, className: (0, import_utils7.cx)("ui-dialog-footer", className), __css: css, ...rest });
-  }
-);
-
-// src/drawer.tsx
-var import_core8 = require("@yamada-ui/core");
-var import_transitions3 = require("@yamada-ui/transitions");
-var import_utils8 = require("@yamada-ui/utils");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var [DrawerProvider, useDrawer] = (0, import_utils8.createContext)({
-  name: `DrawerContext`,
-  errorMessage: `useDrawer returned is 'undefined'. Seems you forgot to wrap the components in "<Drawer />" `
-});
-var Drawer = (0, import_core8.forwardRef)(({ size, ...props }, ref) => {
-  const [styles, mergedProps] = (0, import_core8.useMultiComponentStyle)("Drawer", { size, ...props });
-  const {
-    className,
-    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_core8.omitThemeProps)(mergedProps);
-  const validChildren = (0, import_utils8.getValidChildren)(children);
-  const [customDrawerOverlay, ...cloneChildren] = (0, import_utils8.findChildren)(validChildren, DrawerOverlay);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DrawerProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(DrawerOverlay, {}) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DrawerContent, { ...{ placement, withCloseButton, ...rest }, children: cloneChildren })
-      ]
-    }
-  ) });
-});
-var DrawerContent = (0, import_core8.forwardRef)(
-  ({ className, children, placement, withCloseButton, ...rest }, ref) => {
-    const { isOpen, onClose, duration } = useModal();
-    const styles = useDrawer();
-    const validChildren = (0, import_utils8.getValidChildren)(children);
-    const [customDrawerCloseButton, ...cloneChildren] = (0, import_utils8.findChildren)(
-      validChildren,
-      DrawerCloseButton
-    );
-    const css = {
-      display: "flex",
-      flexDirection: "column",
-      width: "100%",
-      outline: 0,
-      ...styles.container
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-      import_transitions3.Slide,
-      {
-        ref,
-        className: (0, import_utils8.cx)("ui-drawer", className),
-        tabIndex: -1,
-        isOpen,
-        placement,
-        duration,
-        __css: css,
-        ...rest,
-        children: [
-          customDrawerCloseButton != null ? customDrawerCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DrawerCloseButton, {}) : null,
-          cloneChildren
-        ]
-      }
-    );
-  }
-);
-var DrawerOverlay = (0, import_core8.forwardRef)(
-  ({ className, ...rest }, ref) => {
-    const styles = useDrawer();
-    const css = { ...styles.overlay };
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      ModalOverlay,
-      {
-        ref,
-        className: (0, import_utils8.cx)("ui-drawer-overlay", className),
-        __css: css,
-        ...rest
-      }
-    );
-  }
-);
-var DrawerCloseButton = (0, import_core8.forwardRef)(
-  ({ className, ...rest }, ref) => {
-    const styles = useDrawer();
-    const css = { ...styles.closeButton };
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      ModalCloseButton,
-      {
-        ref,
-        className: (0, import_utils8.cx)("ui-drawer-close-button", className),
-        __css: css,
-        ...rest
-      }
-    );
-  }
-);
-var DrawerHeader = (0, import_core8.forwardRef)(
-  ({ className, ...rest }, ref) => {
-    const styles = useDrawer();
-    const css = { ...styles.header };
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalHeader, { ref, className: (0, import_utils8.cx)("ui-drawer-header", className), __css: css, ...rest });
-  }
-);
-var DrawerBody = (0, import_core8.forwardRef)(({ className, ...rest }, ref) => {
-  const styles = useDrawer();
-  const css = { ...styles.body };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalBody, { ref, className: (0, import_utils8.cx)("ui-drawer-body", className), __css: css, ...rest });
-});
-var DrawerFooter = (0, import_core8.forwardRef)(
-  ({ className, ...rest }, ref) => {
-    const styles = useDrawer();
-    const css = { ...styles.footer };
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalFooter, { ref, className: (0, import_utils8.cx)("ui-drawer-footer", className), __css: css, ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalFooter, { ref, className: (0, import_utils8.cx)("ui-dialog-footer", className), __css: css, ...rest });
   }
 );
 // Annotate the CommonJS export names for ESM import in node:
@@ -626,7 +626,6 @@ var DrawerFooter = (0, import_core8.forwardRef)(
   Drawer,
   DrawerBody,
   DrawerCloseButton,
-  DrawerContent,
   DrawerFooter,
   DrawerHeader,
   DrawerOverlay,
@@ -635,6 +634,5 @@ var DrawerFooter = (0, import_core8.forwardRef)(
   ModalCloseButton,
   ModalFooter,
   ModalHeader,
-  ModalOverlay,
-  useModal
+  ModalOverlay
 });