@yamada-ui/modal 1.3.12-next-20241005220055 → 1.3.12

package/dist/index.js

@@ -42,20 +42,20 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/modal.tsx
-var import_core6 = require("@yamada-ui/core");
-var import_focus_lock = require("@yamada-ui/focus-lock");
-var import_motion6 = require("@yamada-ui/motion");
-var import_portal = require("@yamada-ui/portal");
-var import_use_value2 = require("@yamada-ui/use-value");
-var import_utils11 = require("@yamada-ui/utils");
-var import_react2 = require("react");
-var import_react_remove_scroll = require("react-remove-scroll");
+// src/dialog.tsx
+var import_button = require("@yamada-ui/button");
+var import_core13 = require("@yamada-ui/core");
+var import_motion7 = require("@yamada-ui/motion");
+var import_utils18 = require("@yamada-ui/utils");
 
-// src/dialog-overlay.tsx
-var import_motion2 = require("@yamada-ui/motion");
+// src/dialog-body.tsx
+var import_core2 = require("@yamada-ui/core");
 var import_utils3 = require("@yamada-ui/utils");
 
+// src/modal-body.tsx
+var import_core = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+
 // src/modal-context.ts
 var import_utils = require("@yamada-ui/utils");
 var [ModalProvider, useModal] = (0, import_utils.createContext)({
@@ -71,88 +71,62 @@ var [DrawerProvider, useDrawer] = (0, import_utils.createContext)({
   errorMessage: `useDrawer returned is 'undefined'. Seems you forgot to wrap the components in "<Drawer />" `
 });
 
-// src/modal-overlay.tsx
-var import_motion = require("@yamada-ui/motion");
-var import_transitions = require("@yamada-ui/transitions");
-var import_utils2 = require("@yamada-ui/utils");
+// src/modal-body.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var ModalOverlay = (0, import_motion.motionForwardRef)(
-  ({ className, __css, onClick, ...rest }, ref) => {
-    const {
-      styles,
-      closeOnOverlay,
-      onOverlayClick,
-      onClose,
-      animation,
-      duration
-    } = useModal();
+var ModalBody = (0, import_core.forwardRef)(
+  ({ className, __css, ...rest }, ref) => {
+    const { scrollBehavior, styles } = useModal();
     const css = {
-      position: "fixed",
-      top: 0,
-      left: 0,
-      w: "100vw",
-      h: "100dvh",
-      ...__css ? __css : styles.overlay
+      alignItems: "flex-start",
+      display: "flex",
+      flexDirection: "column",
+      overflow: scrollBehavior === "inside" ? "auto" : void 0,
+      ...__css ? __css : styles.body
     };
-    const props = animation !== "none" ? import_transitions.fadeProps : {};
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_motion.motion.div,
+      import_core.ui.div,
       {
         ref,
-        className: (0, import_utils2.cx)("ui-modal__overlay", className),
-        custom: { duration },
+        className: (0, import_utils2.cx)("ui-modal__body", className),
         __css: css,
-        onClick: (0, import_utils2.handlerAll)(onClick, onOverlayClick, (ev) => {
-          ev.stopPropagation();
-          if (closeOnOverlay) onClose == null ? void 0 : onClose();
-        }),
-        ...props,
         ...rest
       }
     );
   }
 );
-ModalOverlay.displayName = "ModalOverlay";
-ModalOverlay.__ui__ = "ModalOverlay";
+ModalBody.displayName = "ModalBody";
+ModalBody.__ui__ = "ModalBody";
 
-// src/dialog-overlay.tsx
+// src/dialog-body.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var DialogOverlay = (0, import_motion2.motionForwardRef)(
+var DialogBody = (0, import_core2.forwardRef)(
   ({ className, ...rest }, ref) => {
     const styles = useDialog();
-    const css = { ...styles.overlay };
+    const css = { ...styles.body };
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      ModalOverlay,
+      ModalBody,
       {
         ref,
-        className: (0, import_utils3.cx)("ui-dialog__overlay", className),
+        className: (0, import_utils3.cx)("ui-dialog__body", className),
         __css: css,
         ...rest
       }
     );
   }
 );
-DialogOverlay.displayName = "DialogOverlay";
-DialogOverlay.__ui__ = "DialogOverlay";
+DialogBody.displayName = "DialogBody";
+DialogBody.__ui__ = "DialogBody";
 
-// src/drawer-content.tsx
+// src/dialog-close-button.tsx
 var import_core4 = require("@yamada-ui/core");
-var import_motion3 = require("@yamada-ui/motion");
-var import_transitions2 = require("@yamada-ui/transitions");
-var import_use_value = require("@yamada-ui/use-value");
-var import_utils7 = require("@yamada-ui/utils");
-var import_react = require("react");
-
-// src/drawer-close-button.tsx
-var import_core2 = require("@yamada-ui/core");
 var import_utils5 = require("@yamada-ui/utils");
 
 // src/modal-close-button.tsx
 var import_close_button = require("@yamada-ui/close-button");
-var import_core = require("@yamada-ui/core");
+var import_core3 = require("@yamada-ui/core");
 var import_utils4 = require("@yamada-ui/utils");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var ModalCloseButton = (0, import_core.forwardRef)(
+var ModalCloseButton = (0, import_core3.forwardRef)(
   ({ onClick, __css, ...rest }, ref) => {
     const { styles, onClose } = useModal();
     const css = {
@@ -164,11 +138,11 @@ var ModalCloseButton = (0, import_core.forwardRef)(
       {
         ref,
         className: (0, import_utils4.cx)("ui-modal__close-button"),
-        __css: css,
         onClick: (0, import_utils4.handlerAll)(onClick, (ev) => {
           ev.stopPropagation();
           onClose == null ? void 0 : onClose();
         }),
+        __css: css,
         ...rest
       }
     );
@@ -177,17 +151,227 @@ var ModalCloseButton = (0, import_core.forwardRef)(
 ModalCloseButton.displayName = "ModalCloseButton";
 ModalCloseButton.__ui__ = "ModalCloseButton";
 
-// src/drawer-close-button.tsx
+// src/dialog-close-button.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var DrawerCloseButton = (0, import_core2.forwardRef)(
+var DialogCloseButton = (0, import_core4.forwardRef)(
   ({ className, ...rest }, ref) => {
-    const styles = useDrawer();
+    const styles = useDialog();
     const css = { ...styles.closeButton };
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       ModalCloseButton,
       {
         ref,
-        className: (0, import_utils5.cx)("ui-drawer__close-button", className),
+        className: (0, import_utils5.cx)("ui-dialog__close-button", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+DialogCloseButton.displayName = "DialogCloseButton";
+DialogCloseButton.__ui__ = "DialogCloseButton";
+
+// src/dialog-footer.tsx
+var import_core6 = require("@yamada-ui/core");
+var import_utils7 = require("@yamada-ui/utils");
+
+// src/modal-footer.tsx
+var import_core5 = require("@yamada-ui/core");
+var import_utils6 = require("@yamada-ui/utils");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ModalFooter = (0, import_core5.forwardRef)(
+  ({ className, __css, ...rest }, ref) => {
+    const { styles } = useModal();
+    const css = {
+      alignItems: "center",
+      display: "flex",
+      justifyContent: "flex-end",
+      ...__css ? __css : styles.footer
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_core5.ui.footer,
+      {
+        ref,
+        className: (0, import_utils6.cx)("ui-modal__footer", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+ModalFooter.displayName = "ModalFooter";
+ModalFooter.__ui__ = "ModalFooter";
+
+// src/dialog-footer.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var DialogFooter = (0, import_core6.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const styles = useDialog();
+    const css = { ...styles.footer };
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ModalFooter,
+      {
+        ref,
+        className: (0, import_utils7.cx)("ui-dialog__footer", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+DialogFooter.__ui__ = "DialogFooter";
+
+// src/dialog-header.tsx
+var import_core8 = require("@yamada-ui/core");
+var import_utils9 = require("@yamada-ui/utils");
+
+// src/modal-header.tsx
+var import_core7 = require("@yamada-ui/core");
+var import_utils8 = require("@yamada-ui/utils");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ModalHeader = (0, import_core7.forwardRef)(
+  ({ className, __css, ...rest }, ref) => {
+    const { styles } = useModal();
+    const css = {
+      alignItems: "center",
+      display: "flex",
+      justifyContent: "flex-start",
+      ...__css ? __css : styles.header
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_core7.ui.header,
+      {
+        ref,
+        className: (0, import_utils8.cx)("ui-modal__header", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+ModalHeader.displayName = "ModalHeader";
+ModalHeader.__ui__ = "ModalHeader";
+
+// src/dialog-header.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var DialogHeader = (0, import_core8.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const styles = useDialog();
+    const css = { ...styles.header };
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      ModalHeader,
+      {
+        ref,
+        className: (0, import_utils9.cx)("ui-dialog__header", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+DialogHeader.__ui__ = "DialogHeader";
+
+// src/dialog-overlay.tsx
+var import_motion2 = require("@yamada-ui/motion");
+var import_utils11 = require("@yamada-ui/utils");
+
+// src/modal-overlay.tsx
+var import_motion = require("@yamada-ui/motion");
+var import_transitions = require("@yamada-ui/transitions");
+var import_utils10 = require("@yamada-ui/utils");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ModalOverlay = (0, import_motion.motionForwardRef)(
+  ({ className, onClick, __css, ...rest }, ref) => {
+    const {
+      animation,
+      closeOnOverlay,
+      duration,
+      styles,
+      onClose,
+      onOverlayClick
+    } = useModal();
+    const css = {
+      h: "100dvh",
+      left: 0,
+      position: "fixed",
+      top: 0,
+      w: "100vw",
+      ...__css ? __css : styles.overlay
+    };
+    const props = animation !== "none" ? import_transitions.fadeProps : {};
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_motion.motion.div,
+      {
+        ref,
+        className: (0, import_utils10.cx)("ui-modal__overlay", className),
+        custom: { duration },
+        onClick: (0, import_utils10.handlerAll)(onClick, onOverlayClick, (ev) => {
+          ev.stopPropagation();
+          if (closeOnOverlay) onClose == null ? void 0 : onClose();
+        }),
+        __css: css,
+        ...props,
+        ...rest
+      }
+    );
+  }
+);
+ModalOverlay.displayName = "ModalOverlay";
+ModalOverlay.__ui__ = "ModalOverlay";
+
+// src/dialog-overlay.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var DialogOverlay = (0, import_motion2.motionForwardRef)(
+  ({ className, ...rest }, ref) => {
+    const styles = useDialog();
+    const css = { ...styles.overlay };
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      ModalOverlay,
+      {
+        ref,
+        className: (0, import_utils11.cx)("ui-dialog__overlay", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+DialogOverlay.displayName = "DialogOverlay";
+DialogOverlay.__ui__ = "DialogOverlay";
+
+// src/modal.tsx
+var import_core12 = require("@yamada-ui/core");
+var import_focus_lock = require("@yamada-ui/focus-lock");
+var import_motion6 = require("@yamada-ui/motion");
+var import_portal = require("@yamada-ui/portal");
+var import_use_value2 = require("@yamada-ui/use-value");
+var import_utils17 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+var import_react_remove_scroll = require("react-remove-scroll");
+
+// src/drawer-content.tsx
+var import_core11 = require("@yamada-ui/core");
+var import_motion3 = require("@yamada-ui/motion");
+var import_transitions2 = require("@yamada-ui/transitions");
+var import_use_value = require("@yamada-ui/use-value");
+var import_utils14 = require("@yamada-ui/utils");
+var import_react = require("react");
+
+// src/drawer-close-button.tsx
+var import_core9 = require("@yamada-ui/core");
+var import_utils12 = require("@yamada-ui/utils");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var DrawerCloseButton = (0, import_core9.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const styles = useDrawer();
+    const css = { ...styles.closeButton };
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      ModalCloseButton,
+      {
+        ref,
+        className: (0, import_utils12.cx)("ui-drawer__close-button", className),
         __css: css,
         ...rest
       }
@@ -198,18 +382,18 @@ DrawerCloseButton.displayName = "DrawerCloseButton";
 DrawerCloseButton.__ui__ = "DrawerCloseButton";
 
 // src/drawer-drag-bar.tsx
-var import_core3 = require("@yamada-ui/core");
-var import_utils6 = require("@yamada-ui/utils");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var DrawerDragBar = (0, import_core3.forwardRef)(
+var import_core10 = require("@yamada-ui/core");
+var import_utils13 = require("@yamada-ui/utils");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var DrawerDragBar = (0, import_core10.forwardRef)(
   ({ className, __css, ...rest }, ref) => {
     const styles = useDrawer();
     const css = { ...styles.dragBar };
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_core3.ui.div,
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_core10.ui.div,
       {
         ref,
-        className: (0, import_utils6.cx)("ui-drawer__drag-bar", className),
+        className: (0, import_utils13.cx)("ui-drawer__drag-bar", className),
         __css: css,
         ...rest
       }
@@ -220,27 +404,27 @@ DrawerDragBar.displayName = "DrawerDragBar";
 DrawerDragBar.__ui__ = "DrawerDragBar";
 
 // src/drawer-content.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var DrawerContent = (0, import_motion3.motionForwardRef)(
   ({
     className,
     children,
-    placement: _placement,
-    withCloseButton,
-    withDragBar,
     closeOnDrag,
     dragConstraints,
     dragElastic,
     dragOffset,
     dragVelocity,
+    placement: _placement,
+    withCloseButton,
+    withDragBar,
     blankForDragProps,
     ...rest
   }, ref) => {
-    const { isOpen, onClose, duration } = useModal();
+    const { duration, isOpen, onClose } = useModal();
     const styles = useDrawer();
     const placement = (0, import_use_value.useValue)(_placement);
-    const validChildren = (0, import_utils7.getValidChildren)(children);
-    const [customDrawerCloseButton, ...cloneChildren] = (0, import_utils7.findChildren)(
+    const validChildren = (0, import_utils14.getValidChildren)(children);
+    const [customDrawerCloseButton, ...cloneChildren] = (0, import_utils14.findChildren)(
       validChildren,
       DrawerCloseButton
     );
@@ -249,33 +433,33 @@ var DrawerContent = (0, import_motion3.motionForwardRef)(
       const propBg = (_c = (_b = (_a = rest.backgroundColor) != null ? _a : rest.bgColor) != null ? _b : rest.background) != null ? _c : rest.bg;
       const styleBg = (_j = (_h = (_f = (_d = styles.container) == null ? void 0 : _d.backgroundColor) != null ? _f : (_e = styles.container) == null ? void 0 : _e.bgColor) != null ? _h : (_g = styles.container) == null ? void 0 : _g.background) != null ? _j : (_i = styles.container) == null ? void 0 : _i.bg;
       const computedBg = propBg != null ? propBg : styleBg;
-      return (0, import_utils7.isArray)(computedBg) ? computedBg : [computedBg];
+      return (0, import_utils14.isArray)(computedBg) ? computedBg : [computedBg];
     }, [rest, styles]);
     const blankForDrag = (0, import_react.useMemo)(() => {
       let position = {};
       switch (placement) {
         case "top":
-          position = { top: "calc(-100dvh + 1px)", left: 0, right: 0 };
+          position = { left: 0, right: 0, top: "calc(-100dvh + 1px)" };
           break;
         case "bottom":
           position = { bottom: "calc(-100dvh + 1px)", left: 0, right: 0 };
           break;
         case "left":
-          position = { left: "calc(-100% + 1px)", top: 0, bottom: 0 };
+          position = { bottom: 0, left: "calc(-100% + 1px)", top: 0 };
           break;
         case "right":
-          position = { right: "calc(-100% + 1px)", top: 0, bottom: 0 };
+          position = { bottom: 0, right: "calc(-100% + 1px)", top: 0 };
           break;
       }
       const [lightBg, darkBg] = blankForDragBg;
       return {
         _after: {
+          bg: lightBg,
           content: '""',
           display: "block",
-          w: "100%",
           h: "100dvh",
-          bg: lightBg,
           position: "absolute",
+          w: "100%",
           ...position,
           ...blankForDragProps
         },
@@ -336,30 +520,30 @@ var DrawerContent = (0, import_motion3.motionForwardRef)(
       },
       [placement, dragVelocity, dragOffset]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       import_transitions2.Slide,
       {
         ref,
-        className: (0, import_utils7.cx)("ui-drawer", className),
-        isOpen,
-        placement,
-        duration,
+        className: (0, import_utils14.cx)("ui-drawer", className),
         drag: closeOnDrag ? getDragDirection() : false,
         dragConstraints: getDragDirectionRestriction(dragConstraints),
         dragElastic: getDragDirectionRestriction(dragElastic),
-        dragSnapToOrigin: true,
         dragMomentum: false,
+        dragSnapToOrigin: true,
+        duration,
+        isOpen,
+        placement,
+        tabIndex: -1,
         onDragEnd: (_, info) => {
           if (isCloseByDragInfo(info)) onClose == null ? void 0 : onClose();
         },
-        tabIndex: -1,
         __css: css,
         ...rest,
         children: [
-          customDrawerCloseButton != null ? customDrawerCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DrawerCloseButton, {}) : null,
-          withDragBar && closeOnDrag && (placement === "bottom" || placement === "right") ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DrawerDragBar, {}) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_core4.ui.div,
+          customDrawerCloseButton != null ? customDrawerCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DrawerCloseButton, {}) : null,
+          withDragBar && closeOnDrag && (placement === "bottom" || placement === "right") ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DrawerDragBar, {}) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_core11.ui.div,
             {
               className: "ui-drawer__inner",
               __css: {
@@ -371,7 +555,7 @@ var DrawerContent = (0, import_motion3.motionForwardRef)(
               children: cloneChildren
             }
           ),
-          withDragBar && closeOnDrag && (placement === "top" || placement === "left") ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DrawerDragBar, {}) : null
+          withDragBar && closeOnDrag && (placement === "top" || placement === "left") ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DrawerDragBar, {}) : null
         ]
       }
     );
@@ -382,17 +566,17 @@ DrawerContent.__ui__ = "DrawerContent";
 
 // src/drawer-overlay.tsx
 var import_motion4 = require("@yamada-ui/motion");
-var import_utils8 = require("@yamada-ui/utils");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_utils15 = require("@yamada-ui/utils");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var DrawerOverlay = (0, import_motion4.motionForwardRef)(
   ({ className, ...rest }, ref) => {
     const styles = useDrawer();
     const css = { ...styles.overlay };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       ModalOverlay,
       {
         ref,
-        className: (0, import_utils8.cx)("ui-drawer__overlay", className),
+        className: (0, import_utils15.cx)("ui-drawer__overlay", className),
         __css: css,
         ...rest
       }
@@ -405,100 +589,76 @@ DrawerOverlay.__ui__ = "DrawerOverlay";
 // src/modal-content.tsx
 var import_motion5 = require("@yamada-ui/motion");
 var import_transitions3 = require("@yamada-ui/transitions");
-var import_utils10 = require("@yamada-ui/utils");
-
-// src/dialog-close-button.tsx
-var import_core5 = require("@yamada-ui/core");
-var import_utils9 = require("@yamada-ui/utils");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var DialogCloseButton = (0, import_core5.forwardRef)(
-  ({ className, ...rest }, ref) => {
-    const styles = useDialog();
-    const css = { ...styles.closeButton };
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      ModalCloseButton,
-      {
-        ref,
-        className: (0, import_utils9.cx)("ui-dialog__close-button", className),
-        __css: css,
-        ...rest
-      }
-    );
-  }
-);
-DialogCloseButton.displayName = "DialogCloseButton";
-DialogCloseButton.__ui__ = "DialogCloseButton";
-
-// src/modal-content.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_utils16 = require("@yamada-ui/utils");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var getModalContentProps = (animation = "scale", duration) => {
   switch (animation) {
     case "scale":
       return {
         ...import_transitions3.scaleFadeProps,
-        custom: { scale: 0.95, reverse: true, duration }
+        custom: { duration, reverse: true, scale: 0.95 }
       };
     case "top":
       return {
         ...import_transitions3.slideFadeProps,
-        custom: { offsetY: -16, reverse: true, duration }
+        custom: { duration, offsetY: -16, reverse: true }
       };
     case "right":
       return {
         ...import_transitions3.slideFadeProps,
-        custom: { offsetX: 16, reverse: true, duration }
+        custom: { duration, offsetX: 16, reverse: true }
       };
     case "left":
       return {
         ...import_transitions3.slideFadeProps,
-        custom: { offsetX: -16, reverse: true, duration }
+        custom: { duration, offsetX: -16, reverse: true }
       };
     case "bottom":
       return {
         ...import_transitions3.slideFadeProps,
-        custom: { offsetY: 16, reverse: true, duration }
+        custom: { duration, offsetY: 16, reverse: true }
       };
   }
 };
 var ModalContent = (0, import_motion5.motionForwardRef)(
   ({ className, children, __css, ...rest }, ref) => {
     const {
-      styles,
+      animation,
+      duration,
       scrollBehavior,
+      styles,
       withCloseButton,
-      onClose,
-      animation,
-      duration
+      onClose
     } = useModal();
-    const validChildren = (0, import_utils10.getValidChildren)(children);
-    const [customModalCloseButton, ...cloneChildren] = (0, import_utils10.findChildren)(
+    const validChildren = (0, import_utils16.getValidChildren)(children);
+    const [customModalCloseButton, ...cloneChildren] = (0, import_utils16.findChildren)(
       validChildren,
       ModalCloseButton,
       DialogCloseButton
     );
     const props = animation !== "none" ? getModalContentProps(animation, duration) : {};
     const css = {
-      position: "relative",
-      maxH: "100%",
       display: "flex",
       flexDirection: "column",
-      overflow: scrollBehavior === "inside" ? "hidden" : "auto",
+      maxH: "100%",
       outline: 0,
+      overflow: scrollBehavior === "inside" ? "hidden" : "auto",
+      position: "relative",
       ...__css ? __css : styles.container
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       import_motion5.motion.section,
       {
-        role: "dialog",
-        "aria-modal": "true",
         ref,
-        className: (0, import_utils10.cx)("ui-modal", className),
+        className: (0, import_utils16.cx)("ui-modal", className),
+        "aria-modal": "true",
+        role: "dialog",
         tabIndex: -1,
         __css: css,
         ...props,
         ...rest,
         children: [
-          customModalCloseButton != null ? customModalCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ModalCloseButton, {}) : null,
+          customModalCloseButton != null ? customModalCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModalCloseButton, {}) : null,
           cloneChildren
         ]
       }
@@ -509,41 +669,41 @@ ModalContent.displayName = "ModalContent";
 ModalContent.__ui__ = "ModalContent";
 
 // src/modal.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var Modal = (0, import_motion6.motionForwardRef)(
   ({ size, ...props }, ref) => {
-    const [styles, mergedProps] = (0, import_core6.useComponentMultiStyle)("Modal", {
+    const [styles, mergedProps] = (0, import_core12.useComponentMultiStyle)("Modal", {
       size,
       ...props
     });
     const {
       className,
-      children,
-      isOpen,
-      onClose,
-      onOverlayClick,
-      onEsc,
-      onCloseComplete,
-      placement: _placement = "center",
-      outside = "fallback(4, 1rem)",
-      withCloseButton = true,
-      withOverlay = true,
       allowPinchZoom = false,
-      scrollBehavior = "inside",
+      animation = "scale",
       autoFocus,
-      restoreFocus,
-      initialFocusRef,
-      finalFocusRef,
       blockScrollOnMount = true,
-      closeOnOverlay = true,
+      children,
       closeOnEsc = true,
-      lockFocusAcrossFrames = true,
-      animation = "scale",
+      closeOnOverlay = true,
       duration,
-      portalProps,
+      finalFocusRef,
+      initialFocusRef,
+      isOpen,
+      lockFocusAcrossFrames = true,
+      outside = "fallback(4, 1rem)",
+      placement: _placement = "center",
+      restoreFocus,
+      scrollBehavior = "inside",
+      withCloseButton = true,
+      withOverlay = true,
       containerProps,
+      portalProps,
+      onClose,
+      onCloseComplete,
+      onEsc,
+      onOverlayClick,
       ...rest
-    } = (0, import_core6.omitThemeProps)(mergedProps);
+    } = (0, import_core12.omitThemeProps)(mergedProps);
     const onKeyDown = (0, import_react2.useCallback)(
       (ev) => {
         if (ev.key !== "Escape") return;
@@ -553,60 +713,60 @@ var Modal = (0, import_motion6.motionForwardRef)(
       },
       [closeOnEsc, onClose, onEsc]
     );
-    const validChildren = (0, import_utils11.getValidChildren)(children);
-    const [customModalOverlay, ...cloneChildren] = (0, import_utils11.findChildren)(
+    const validChildren = (0, import_utils17.getValidChildren)(children);
+    const [customModalOverlay, ...cloneChildren] = (0, import_utils17.findChildren)(
       validChildren,
       ModalOverlay,
       DialogOverlay,
       DrawerOverlay
     );
-    let drawerContent = (0, import_utils11.findChild)(validChildren, DrawerContent);
+    let drawerContent = (0, import_utils17.findChild)(validChildren, DrawerContent);
     if (drawerContent)
       drawerContent = (0, import_react2.cloneElement)(drawerContent, { onKeyDown });
     const placement = (0, import_use_value2.useValue)(_placement);
     const css = {
+      alignItems: placement.includes("top") ? "flex-start" : placement.includes("bottom") ? "flex-end" : "center",
+      display: "flex",
+      h: "100dvh",
+      justifyContent: placement.includes("left") ? "flex-start" : placement.includes("right") ? "flex-end" : "center",
+      left: 0,
+      p: size !== "full" ? outside : void 0,
       position: "fixed",
       top: 0,
-      left: 0,
-      zIndex: "fallback(jeice, 110)",
       w: "100vw",
-      h: "100dvh",
-      p: size !== "full" ? outside : void 0,
-      display: "flex",
-      justifyContent: placement.includes("left") ? "flex-start" : placement.includes("right") ? "flex-end" : "center",
-      alignItems: placement.includes("top") ? "flex-start" : placement.includes("bottom") ? "flex-end" : "center"
+      zIndex: "fallback(jeice, 110)"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       ModalProvider,
       {
         value: {
-          isOpen,
-          onClose,
-          onOverlayClick,
-          withCloseButton,
-          scrollBehavior,
-          closeOnOverlay,
           animation,
+          closeOnOverlay,
           duration,
-          styles
+          isOpen,
+          scrollBehavior,
+          styles,
+          withCloseButton,
+          onClose,
+          onOverlayClick
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_motion6.AnimatePresence, { onExitComplete: onCloseComplete, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_motion6.AnimatePresence, { onExitComplete: onCloseComplete, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           import_focus_lock.FocusLock,
           {
             autoFocus,
-            initialFocusRef,
             finalFocusRef,
-            restoreFocus,
+            initialFocusRef,
             lockFocusAcrossFrames,
-            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            restoreFocus,
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               import_react_remove_scroll.RemoveScroll,
               {
                 allowPinchZoom,
                 enabled: blockScrollOnMount,
                 forwardProps: true,
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core6.ui.div, { __css: css, ...containerProps, children: [
-                  customModalOverlay != null ? customModalOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ModalOverlay, {}) : null,
-                  drawerContent != null ? drawerContent : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core12.ui.div, { __css: css, ...containerProps, children: [
+                  customModalOverlay != null ? customModalOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ModalOverlay, {}) : null,
+                  drawerContent != null ? drawerContent : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                     ModalContent,
                     {
                       ref,
@@ -626,160 +786,6 @@ var Modal = (0, import_motion6.motionForwardRef)(
   }
 );
 
-// src/modal-header.tsx
-var import_core7 = require("@yamada-ui/core");
-var import_utils12 = require("@yamada-ui/utils");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var ModalHeader = (0, import_core7.forwardRef)(
-  ({ className, __css, ...rest }, ref) => {
-    const { styles } = useModal();
-    const css = {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      ...__css ? __css : styles.header
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_core7.ui.header,
-      {
-        ref,
-        className: (0, import_utils12.cx)("ui-modal__header", className),
-        __css: css,
-        ...rest
-      }
-    );
-  }
-);
-ModalHeader.displayName = "ModalHeader";
-ModalHeader.__ui__ = "ModalHeader";
-
-// src/modal-body.tsx
-var import_core8 = require("@yamada-ui/core");
-var import_utils13 = require("@yamada-ui/utils");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var ModalBody = (0, import_core8.forwardRef)(
-  ({ className, __css, ...rest }, ref) => {
-    const { styles, scrollBehavior } = useModal();
-    const css = {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      overflow: scrollBehavior === "inside" ? "auto" : void 0,
-      ...__css ? __css : styles.body
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_core8.ui.div,
-      {
-        ref,
-        className: (0, import_utils13.cx)("ui-modal__body", className),
-        __css: css,
-        ...rest
-      }
-    );
-  }
-);
-ModalBody.displayName = "ModalBody";
-ModalBody.__ui__ = "ModalBody";
-
-// src/modal-footer.tsx
-var import_core9 = require("@yamada-ui/core");
-var import_utils14 = require("@yamada-ui/utils");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var ModalFooter = (0, import_core9.forwardRef)(
-  ({ className, __css, ...rest }, ref) => {
-    const { styles } = useModal();
-    const css = {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end",
-      ...__css ? __css : styles.footer
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_core9.ui.footer,
-      {
-        ref,
-        className: (0, import_utils14.cx)("ui-modal__footer", className),
-        __css: css,
-        ...rest
-      }
-    );
-  }
-);
-ModalFooter.displayName = "ModalFooter";
-ModalFooter.__ui__ = "ModalFooter";
-
-// src/dialog.tsx
-var import_button = require("@yamada-ui/button");
-var import_core13 = require("@yamada-ui/core");
-var import_motion7 = require("@yamada-ui/motion");
-var import_utils18 = require("@yamada-ui/utils");
-
-// src/dialog-body.tsx
-var import_core10 = require("@yamada-ui/core");
-var import_utils15 = require("@yamada-ui/utils");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var DialogBody = (0, import_core10.forwardRef)(
-  ({ className, ...rest }, ref) => {
-    const styles = useDialog();
-    const css = { ...styles.body };
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      ModalBody,
-      {
-        ref,
-        className: (0, import_utils15.cx)("ui-dialog__body", className),
-        __css: css,
-        ...rest
-      }
-    );
-  }
-);
-DialogBody.displayName = "DialogBody";
-DialogBody.__ui__ = "DialogBody";
-
-// src/dialog-footer.tsx
-var import_core11 = require("@yamada-ui/core");
-var import_utils16 = require("@yamada-ui/utils");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var DialogFooter = (0, import_core11.forwardRef)(
-  ({ className, ...rest }, ref) => {
-    const styles = useDialog();
-    const css = { ...styles.footer };
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      ModalFooter,
-      {
-        ref,
-        className: (0, import_utils16.cx)("ui-dialog__footer", className),
-        __css: css,
-        ...rest
-      }
-    );
-  }
-);
-DialogFooter.displayName = "DialogFooter";
-DialogFooter.__ui__ = "DialogFooter";
-
-// src/dialog-header.tsx
-var import_core12 = require("@yamada-ui/core");
-var import_utils17 = require("@yamada-ui/utils");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var DialogHeader = (0, import_core12.forwardRef)(
-  ({ className, ...rest }, ref) => {
-    const styles = useDialog();
-    const css = { ...styles.header };
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      ModalHeader,
-      {
-        ref,
-        className: (0, import_utils17.cx)("ui-dialog__header", className),
-        __css: css,
-        ...rest
-      }
-    );
-  }
-);
-DialogHeader.displayName = "DialogHeader";
-DialogHeader.__ui__ = "DialogHeader";
-
 // src/dialog.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var Dialog = (0, import_motion7.motionForwardRef)(
@@ -790,19 +796,19 @@ var Dialog = (0, import_motion7.motionForwardRef)(
     });
     const {
       className,
+      cancel,
       children,
-      withOverlay = true,
-      withCloseButton = true,
-      header,
       footer,
-      cancel,
+      header,
       other,
       success,
-      onClose,
+      withCloseButton = true,
+      withOverlay = true,
+      containerProps,
       onCancel,
+      onClose,
       onOther,
       onSuccess,
-      containerProps,
       ...rest
     } = (0, import_core13.omitThemeProps)(mergedProps);
     const validChildren = (0, import_utils18.getValidChildren)(children);
@@ -820,15 +826,18 @@ var Dialog = (0, import_motion7.motionForwardRef)(
       DialogFooter
     ) : children;
     const css = { ...styles.container };
-    const cancelButtonProps = (0, import_utils18.isValidElement)(cancel) ? { children: cancel } : cancel;
-    const otherButtonProps = (0, import_utils18.isValidElement)(other) ? { children: other } : other;
-    const successButtonProps = (0, import_utils18.isValidElement)(success) ? { children: success } : success;
-    if (cancelButtonProps && !cancelButtonProps.variant)
-      cancelButtonProps.variant = "ghost";
-    if (otherButtonProps && !otherButtonProps.colorScheme)
+    const cancelButtonProps = (0, import_utils18.isValidElement)(cancel) || (0, import_utils18.isUndefined)(cancel) ? { children: cancel } : cancel;
+    const otherButtonProps = (0, import_utils18.isValidElement)(other) || (0, import_utils18.isUndefined)(other) ? { children: other } : other;
+    const successButtonProps = (0, import_utils18.isValidElement)(success) || (0, import_utils18.isUndefined)(success) ? { children: success } : success;
+    if (!cancelButtonProps.variant) cancelButtonProps.variant = "ghost";
+    if (!otherButtonProps.colorScheme)
       otherButtonProps.colorScheme = "secondary";
-    if (successButtonProps && !successButtonProps.colorScheme)
+    if (!successButtonProps.colorScheme)
       successButtonProps.colorScheme = "primary";
+    const hasCancelButton = !!cancelButtonProps.children;
+    const hasOtherButton = !!otherButtonProps.children;
+    const hasSuccessButton = !!successButtonProps.children;
+    const hasFooter = hasCancelButton || hasOtherButton || hasSuccessButton;
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       Modal,
       {
@@ -836,10 +845,10 @@ var Dialog = (0, import_motion7.motionForwardRef)(
         className: (0, import_utils18.cx)("ui-dialog", className),
         __css: css,
         ...{
-          onClose,
-          withOverlay: false,
           withCloseButton: false,
+          withOverlay: false,
           containerProps,
+          onClose,
           ...rest,
           size
         },
@@ -848,22 +857,22 @@ var Dialog = (0, import_motion7.motionForwardRef)(
           customDialogCloseButton != null ? customDialogCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogCloseButton, {}) : null,
           customDialogHeader != null ? customDialogHeader : header ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogHeader, { children: header }) : null,
           customDialogBody != null ? customDialogBody : cloneChildren ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogBody, { children: cloneChildren }) : null,
-          customDialogFooter != null ? customDialogFooter : footer || cancelButtonProps || otherButtonProps || successButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogFooter, { children: footer != null ? footer : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-            cancelButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          customDialogFooter != null ? customDialogFooter : footer || hasFooter ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogFooter, { children: footer != null ? footer : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+            hasCancelButton ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               import_button.Button,
               {
                 onClick: () => onCancel == null ? void 0 : onCancel(onClose),
                 ...cancelButtonProps
               }
             ) : null,
-            otherButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            hasOtherButton ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               import_button.Button,
               {
                 onClick: () => onOther == null ? void 0 : onOther(onClose),
                 ...otherButtonProps
               }
             ) : null,
-            successButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            hasSuccessButton ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               import_button.Button,
               {
                 onClick: () => onSuccess == null ? void 0 : onSuccess(onClose),
@@ -885,40 +894,40 @@ var import_motion8 = require("@yamada-ui/motion");
 var import_utils19 = require("@yamada-ui/utils");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var Drawer = (0, import_motion8.motionForwardRef)(
-  ({ size, placement = "right", closeOnDrag = false, ...props }, ref) => {
+  ({ size, closeOnDrag = false, placement = "right", ...props }, ref) => {
     const [styles, mergedProps] = (0, import_core14.useComponentMultiStyle)("Drawer", {
       size,
-      placement,
       closeOnDrag,
+      placement,
       ...props
     });
     const {
-      children,
-      isOpen,
-      onClose,
-      onOverlayClick,
-      onEsc,
-      onCloseComplete,
-      withCloseButton = !closeOnDrag,
-      withOverlay = true,
-      withDragBar = true,
       allowPinchZoom,
       autoFocus,
-      restoreFocus,
-      initialFocusRef,
-      finalFocusRef,
       blockScrollOnMount,
-      closeOnOverlay,
+      children,
       closeOnEsc,
-      lockFocusAcrossFrames,
-      duration = { enter: 0.4, exit: 0.3 },
+      closeOnOverlay,
       dragConstraints = 0,
       dragElastic = 0.1,
       dragOffset = 80,
       dragVelocity = 100,
+      duration = { enter: 0.4, exit: 0.3 },
+      finalFocusRef,
+      initialFocusRef,
+      isOpen,
+      lockFocusAcrossFrames,
+      restoreFocus,
+      withCloseButton = !closeOnDrag,
+      withDragBar = true,
+      withOverlay = true,
       blankForDragProps,
-      portalProps,
       containerProps,
+      portalProps,
+      onClose,
+      onCloseComplete,
+      onEsc,
+      onOverlayClick,
       ...rest
     } = (0, import_core14.omitThemeProps)(mergedProps, ["isFullHeight"]);
     const validChildren = (0, import_utils19.getValidChildren)(children);
@@ -931,25 +940,25 @@ var Drawer = (0, import_motion8.motionForwardRef)(
       {
         ref,
         ...{
-          isOpen,
-          onClose,
-          onOverlayClick,
-          onEsc,
-          onCloseComplete,
-          withCloseButton: false,
-          withOverlay: false,
           allowPinchZoom,
           autoFocus,
-          restoreFocus,
-          initialFocusRef,
-          finalFocusRef,
           blockScrollOnMount,
-          closeOnOverlay,
           closeOnEsc,
-          lockFocusAcrossFrames,
+          closeOnOverlay,
           duration,
+          finalFocusRef,
+          initialFocusRef,
+          isOpen,
+          lockFocusAcrossFrames,
+          restoreFocus,
+          withCloseButton: false,
+          withOverlay: false,
+          containerProps,
           portalProps,
-          containerProps
+          onClose,
+          onCloseComplete,
+          onEsc,
+          onOverlayClick
         },
         children: [
           customDrawerOverlay != null ? customDrawerOverlay : withOverlay ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DrawerOverlay, {}) : null,
@@ -965,8 +974,8 @@ var Drawer = (0, import_motion8.motionForwardRef)(
                 withDragBar,
                 blankForDragProps,
                 ...rest,
-                placement,
-                closeOnDrag
+                closeOnDrag,
+                placement
               },
               children: cloneChildren
             }
@@ -979,71 +988,71 @@ var Drawer = (0, import_motion8.motionForwardRef)(
 Drawer.displayName = "Drawer";
 Drawer.__ui__ = "Drawer";
 
-// src/drawer-header.tsx
+// src/drawer-body.tsx
 var import_core15 = require("@yamada-ui/core");
 var import_utils20 = require("@yamada-ui/utils");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var DrawerHeader = (0, import_core15.forwardRef)(
+var DrawerBody = (0, import_core15.forwardRef)(
   ({ className, ...rest }, ref) => {
     const styles = useDrawer();
-    const css = { ...styles.header };
+    const css = { ...styles.body };
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      ModalHeader,
+      ModalBody,
       {
         ref,
-        className: (0, import_utils20.cx)("ui-drawer__header", className),
+        className: (0, import_utils20.cx)("ui-drawer__body", className),
         __css: css,
         ...rest
       }
     );
   }
 );
-DrawerHeader.displayName = "DrawerHeader";
-DrawerHeader.__ui__ = "DrawerHeader";
+DrawerBody.displayName = "DrawerBody";
+DrawerBody.__ui__ = "DrawerBody";
 
-// src/drawer-body.tsx
+// src/drawer-footer.tsx
 var import_core16 = require("@yamada-ui/core");
 var import_utils21 = require("@yamada-ui/utils");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var DrawerBody = (0, import_core16.forwardRef)(
+var DrawerFooter = (0, import_core16.forwardRef)(
   ({ className, ...rest }, ref) => {
     const styles = useDrawer();
-    const css = { ...styles.body };
+    const css = { ...styles.footer };
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      ModalBody,
+      ModalFooter,
       {
         ref,
-        className: (0, import_utils21.cx)("ui-drawer__body", className),
+        className: (0, import_utils21.cx)("ui-drawer__footer", className),
         __css: css,
         ...rest
       }
     );
   }
 );
-DrawerBody.displayName = "DrawerBody";
-DrawerBody.__ui__ = "DrawerBody";
+DrawerFooter.displayName = "DrawerFooter";
+DrawerFooter.__ui__ = "DrawerFooter";
 
-// src/drawer-footer.tsx
+// src/drawer-header.tsx
 var import_core17 = require("@yamada-ui/core");
 var import_utils22 = require("@yamada-ui/utils");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var DrawerFooter = (0, import_core17.forwardRef)(
+var DrawerHeader = (0, import_core17.forwardRef)(
   ({ className, ...rest }, ref) => {
     const styles = useDrawer();
-    const css = { ...styles.footer };
+    const css = { ...styles.header };
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      ModalFooter,
+      ModalHeader,
       {
         ref,
-        className: (0, import_utils22.cx)("ui-drawer__footer", className),
+        className: (0, import_utils22.cx)("ui-drawer__header", className),
         __css: css,
         ...rest
       }
     );
   }
 );
-DrawerFooter.displayName = "DrawerFooter";
-DrawerFooter.__ui__ = "DrawerFooter";
+DrawerHeader.displayName = "DrawerHeader";
+DrawerHeader.__ui__ = "DrawerHeader";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Dialog,