@yamada-ui/modal 1.4.5-dev-20241116143410 → 1.4.5-dev-20241117115416

package/dist/{chunk-U2DBPI7Y.mjs → chunk-3RGLB7UM.mjs}

@@ -1,10 +1,10 @@
 "use client"
 import {
   ModalCloseButton
-} from "./chunk-DT5IIM35.mjs";
+} from "./chunk-PXV3LL5A.mjs";
 import {
   useDialog
-} from "./chunk-EPC5EUXN.mjs";
+} from "./chunk-64A25YOZ.mjs";
 
 // src/dialog-close-button.tsx
 import { forwardRef } from "@yamada-ui/core";
@@ -32,4 +32,4 @@ DialogCloseButton.__ui__ = "DialogCloseButton";
 export {
   DialogCloseButton
 };
-//# sourceMappingURL=chunk-U2DBPI7Y.mjs.map
+//# sourceMappingURL=chunk-3RGLB7UM.mjs.map

package/dist/{chunk-E4FDNJ4R.mjs → chunk-5NLJNYIN.mjs}

@@ -1,7 +1,7 @@
 "use client"
 import {
   useDrawer
-} from "./chunk-EPC5EUXN.mjs";
+} from "./chunk-64A25YOZ.mjs";
 
 // src/drawer-drag-bar.tsx
 import { forwardRef, ui } from "@yamada-ui/core";
@@ -28,4 +28,4 @@ DrawerDragBar.__ui__ = "DrawerDragBar";
 export {
   DrawerDragBar
 };
-//# sourceMappingURL=chunk-E4FDNJ4R.mjs.map
+//# sourceMappingURL=chunk-5NLJNYIN.mjs.map

package/dist/{chunk-EPC5EUXN.mjs → chunk-64A25YOZ.mjs}

@@ -23,4 +23,4 @@ export {
   DrawerProvider,
   useDrawer
 };
-//# sourceMappingURL=chunk-EPC5EUXN.mjs.map
+//# sourceMappingURL=chunk-64A25YOZ.mjs.map

package/dist/chunk-64A25YOZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/modal-context.ts"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type { RefObject } from \"react\"\nimport type { ModalOptions } from \"./modal\"\nimport { createContext } from \"@yamada-ui/utils\"\n\ninterface ModalContext extends ModalOptions {\n  bodyRef: RefObject<HTMLElement>\n  headerRef: RefObject<HTMLElement>\n  styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [ModalProvider, useModal] = createContext<ModalContext>({\n  name: `ModalContext`,\n  errorMessage: `useModal returned is 'undefined'. Seems you forgot to wrap the components in \"<Modal />\" `,\n})\n\ninterface DialogContext {\n  [key: string]: CSSUIObject | undefined\n}\n\nexport const [DialogProvider, useDialog] = createContext<DialogContext>({\n  name: `DialogContext`,\n  errorMessage: `useDialog returned is 'undefined'. Seems you forgot to wrap the components in \"<Dialog />\" `,\n})\n\ninterface DrawerContext {\n  [key: string]: CSSUIObject | undefined\n}\n\nexport const [DrawerProvider, useDrawer] = createContext<DrawerContext>({\n  name: `DrawerContext`,\n  errorMessage: `useDrawer returned is 'undefined'. Seems you forgot to wrap the components in \"<Drawer />\" `,\n})\n"],"mappings":";;;AAGA,SAAS,qBAAqB;AAQvB,IAAM,CAAC,eAAe,QAAQ,IAAI,cAA4B;AAAA,EACnE,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAMM,IAAM,CAAC,gBAAgB,SAAS,IAAI,cAA6B;AAAA,EACtE,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAMM,IAAM,CAAC,gBAAgB,SAAS,IAAI,cAA6B;AAAA,EACtE,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;","names":[]}

package/dist/{chunk-CBL7CH2A.mjs → chunk-6ZTN6KKG.mjs}

@@ -1,10 +1,10 @@
 "use client"
 import {
   ModalHeader
-} from "./chunk-DWQHOEUG.mjs";
+} from "./chunk-A64FIX7X.mjs";
 import {
   useDialog
-} from "./chunk-EPC5EUXN.mjs";
+} from "./chunk-64A25YOZ.mjs";
 
 // src/dialog-header.tsx
 import { forwardRef } from "@yamada-ui/core";
@@ -31,4 +31,4 @@ DialogHeader.__ui__ = "DialogHeader";
 export {
   DialogHeader
 };
-//# sourceMappingURL=chunk-CBL7CH2A.mjs.map
+//# sourceMappingURL=chunk-6ZTN6KKG.mjs.map

package/dist/{chunk-DWQHOEUG.mjs → chunk-A64FIX7X.mjs}

@@ -1,15 +1,15 @@
 "use client"
 import {
   useModal
-} from "./chunk-EPC5EUXN.mjs";
+} from "./chunk-64A25YOZ.mjs";
 
 // src/modal-header.tsx
 import { forwardRef, ui } from "@yamada-ui/core";
-import { cx } from "@yamada-ui/utils";
+import { cx, mergeRefs } from "@yamada-ui/utils";
 import { jsx } from "react/jsx-runtime";
 var ModalHeader = forwardRef(
   ({ className, __css, ...rest }, ref) => {
-    const { labelledbyId, styles } = useModal();
+    const { headerRef, styles } = useModal();
     const css = {
       alignItems: "center",
       display: "flex",
@@ -19,8 +19,7 @@ var ModalHeader = forwardRef(
     return /* @__PURE__ */ jsx(
       ui.header,
       {
-        id: labelledbyId,
-        ref,
+        ref: mergeRefs(headerRef, ref),
         className: cx("ui-modal__header", className),
         __css: css,
         ...rest
@@ -34,4 +33,4 @@ ModalHeader.__ui__ = "ModalHeader";
 export {
   ModalHeader
 };
-//# sourceMappingURL=chunk-DWQHOEUG.mjs.map
+//# sourceMappingURL=chunk-A64FIX7X.mjs.map

package/dist/chunk-A64FIX7X.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/modal-header.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx, mergeRefs } from \"@yamada-ui/utils\"\nimport { useModal } from \"./modal-context\"\n\nexport interface ModalHeaderProps extends HTMLUIProps<\"header\"> {}\n\nexport const ModalHeader = forwardRef<ModalHeaderProps, \"header\">(\n  ({ className, __css, ...rest }, ref) => {\n    const { headerRef, styles } = useModal()\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      display: \"flex\",\n      justifyContent: \"flex-start\",\n      ...(__css ? __css : styles.header),\n    }\n\n    return (\n      <ui.header\n        ref={mergeRefs(headerRef, ref)}\n        className={cx(\"ui-modal__header\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\nModalHeader.displayName = \"ModalHeader\"\nModalHeader.__ui__ = \"ModalHeader\"\n"],"mappings":";;;;;;AACA,SAAS,YAAY,UAAU;AAC/B,SAAS,IAAI,iBAAiB;AAiBxB;AAZC,IAAM,cAAc;AAAA,EACzB,CAAC,EAAE,WAAW,OAAO,GAAG,KAAK,GAAG,QAAQ;AACtC,UAAM,EAAE,WAAW,OAAO,IAAI,SAAS;AAEvC,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,GAAI,QAAQ,QAAQ,OAAO;AAAA,IAC7B;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,KAAK,UAAU,WAAW,GAAG;AAAA,QAC7B,WAAW,GAAG,oBAAoB,SAAS;AAAA,QAC3C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAC1B,YAAY,SAAS;","names":[]}

package/dist/{chunk-DH735WKL.mjs → chunk-AVLVLAM5.mjs}

@@ -1,10 +1,10 @@
 "use client"
 import {
   ModalFooter
-} from "./chunk-X5STF2Y7.mjs";
+} from "./chunk-F6XJWJIF.mjs";
 import {
   useDrawer
-} from "./chunk-EPC5EUXN.mjs";
+} from "./chunk-64A25YOZ.mjs";
 
 // src/drawer-footer.tsx
 import { forwardRef } from "@yamada-ui/core";
@@ -31,4 +31,4 @@ DrawerFooter.__ui__ = "DrawerFooter";
 export {
   DrawerFooter
 };
-//# sourceMappingURL=chunk-DH735WKL.mjs.map
+//# sourceMappingURL=chunk-AVLVLAM5.mjs.map

package/dist/{chunk-4SA2BXAV.mjs → chunk-AZF6QW2S.mjs}

@@ -1,14 +1,14 @@
 "use client"
 import {
   DrawerDragBar
-} from "./chunk-E4FDNJ4R.mjs";
+} from "./chunk-5NLJNYIN.mjs";
 import {
   DrawerCloseButton
-} from "./chunk-UWNNN2FG.mjs";
+} from "./chunk-PXCCIW5O.mjs";
 import {
   useDrawer,
   useModal
-} from "./chunk-EPC5EUXN.mjs";
+} from "./chunk-64A25YOZ.mjs";
 
 // src/drawer-content.tsx
 import { ui } from "@yamada-ui/core";
@@ -33,7 +33,8 @@ var DrawerContent = motionForwardRef(
     blankForDragProps,
     ...rest
   }, ref) => {
-    let { describedbyId, duration, isOpen, labelledbyId, open, onClose } = useModal();
+    var _a, _b;
+    let { bodyRef, duration, headerRef, isOpen, open, onClose } = useModal();
     open != null ? open : open = isOpen;
     const styles = useDrawer();
     const placement = useValue(_placement);
@@ -43,8 +44,8 @@ var DrawerContent = motionForwardRef(
       DrawerCloseButton
     );
     const blankForDragBg = useMemo(() => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-      const propBg = (_c = (_b = (_a = rest.backgroundColor) != null ? _a : rest.bgColor) != null ? _b : rest.background) != null ? _c : rest.bg;
+      var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j;
+      const propBg = (_c = (_b2 = (_a2 = rest.backgroundColor) != null ? _a2 : rest.bgColor) != null ? _b2 : 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 isArray(computedBg) ? computedBg : [computedBg];
@@ -139,8 +140,8 @@ var DrawerContent = motionForwardRef(
       {
         ref,
         className: cx("ui-drawer", className),
-        "aria-describedby": describedbyId,
-        "aria-labelledby": labelledbyId,
+        "aria-describedby": (_a = bodyRef.current) == null ? void 0 : _a.id,
+        "aria-labelledby": (_b = headerRef.current) == null ? void 0 : _b.id,
         "aria-modal": "true",
         drag: closeOnDrag ? getDragDirection() : false,
         dragConstraints: getDragDirectionRestriction(dragConstraints),
@@ -185,4 +186,4 @@ DrawerContent.__ui__ = "DrawerContent";
 export {
   DrawerContent
 };
-//# sourceMappingURL=chunk-4SA2BXAV.mjs.map
+//# sourceMappingURL=chunk-AZF6QW2S.mjs.map

package/dist/chunk-AZF6QW2S.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/drawer-content.tsx"],"sourcesContent":["import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport type { MotionPanInfo } from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type { DrawerProps } from \"./drawer\"\nimport { ui } from \"@yamada-ui/core\"\nimport { motionForwardRef } from \"@yamada-ui/motion\"\nimport { Slide } from \"@yamada-ui/transitions\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, findChildren, getValidChildren, isArray } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\nimport { DrawerCloseButton } from \"./drawer-close-button\"\nimport { DrawerDragBar } from \"./drawer-drag-bar\"\nimport { useDrawer, useModal } from \"./modal-context\"\n\nexport interface DrawerContentProps\n  extends Merge<\n    Omit<DrawerProps, \"isOpen\" | \"open\" | \"placement\" | keyof ThemeProps>,\n    Required<\n      Pick<\n        DrawerProps,\n        | \"dragConstraints\"\n        | \"dragElastic\"\n        | \"dragOffset\"\n        | \"dragVelocity\"\n        | \"placement\"\n        | \"placement\"\n      >\n    >\n  > {}\n\nexport const DrawerContent = motionForwardRef<DrawerContentProps, \"div\">(\n  (\n    {\n      className,\n      children,\n      closeOnDrag,\n      dragConstraints,\n      dragElastic,\n      dragOffset,\n      dragVelocity,\n      placement: _placement,\n      withCloseButton,\n      withDragBar,\n      blankForDragProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    let { bodyRef, duration, headerRef, isOpen, open, onClose } = useModal()\n\n    open ??= isOpen\n\n    const styles = useDrawer()\n    const placement = useValue(_placement)\n\n    const validChildren = getValidChildren(children)\n\n    const [customDrawerCloseButton, ...cloneChildren] = findChildren(\n      validChildren,\n      DrawerCloseButton,\n    )\n\n    const blankForDragBg = useMemo(() => {\n      const propBg =\n        rest.backgroundColor ?? rest.bgColor ?? rest.background ?? rest.bg\n      const styleBg =\n        styles.container?.backgroundColor ??\n        styles.container?.bgColor ??\n        styles.container?.background ??\n        styles.container?.bg\n      const computedBg = propBg ?? styleBg\n\n      return isArray(computedBg) ? computedBg : [computedBg]\n    }, [rest, styles])\n\n    const blankForDrag = useMemo<CSSUIObject>(() => {\n      let position: CSSUIObject = {}\n\n      switch (placement) {\n        case \"top\":\n          position = { left: 0, right: 0, top: \"calc(-100dvh + 1px)\" }\n          break\n\n        case \"bottom\":\n          position = { bottom: \"calc(-100dvh + 1px)\", left: 0, right: 0 }\n          break\n\n        case \"left\":\n          position = { bottom: 0, left: \"calc(-100% + 1px)\", top: 0 }\n          break\n\n        case \"right\":\n          position = { bottom: 0, right: \"calc(-100% + 1px)\", top: 0 }\n          break\n      }\n\n      const [lightBg, darkBg] = blankForDragBg\n\n      return {\n        _after: {\n          bg: lightBg,\n          content: '\"\"',\n          display: \"block\",\n          h: \"100dvh\",\n          position: \"absolute\",\n          w: \"100%\",\n          ...position,\n          ...blankForDragProps,\n        },\n        _dark: {\n          _after: {\n            bg: darkBg,\n          },\n        },\n      }\n    }, [placement, blankForDragBg, blankForDragProps])\n\n    const css = useMemo<CSSUIObject>(\n      () => ({\n        display: \"flex\",\n        flexDirection:\n          placement === \"top\" || placement === \"bottom\" ? \"column\" : \"row\",\n        outline: 0,\n        ...(closeOnDrag ? blankForDrag : {}),\n        ...styles.container,\n      }),\n      [blankForDrag, closeOnDrag, placement, styles],\n    )\n\n    const getDragDirectionRestriction = useCallback(\n      (value: number) => {\n        switch (placement) {\n          case \"top\":\n            return { bottom: value }\n          case \"bottom\":\n            return { top: value }\n          case \"left\":\n            return { right: value }\n          case \"right\":\n            return { left: value }\n        }\n      },\n      [placement],\n    )\n\n    const getDragDirection = useCallback(() => {\n      switch (placement) {\n        case \"top\":\n        case \"bottom\":\n          return \"y\"\n        case \"left\":\n        case \"right\":\n          return \"x\"\n      }\n    }, [placement])\n\n    const isCloseByDragInfo = useCallback(\n      (info: MotionPanInfo) => {\n        switch (placement) {\n          case \"top\":\n            return (\n              info.velocity.y <= dragVelocity * -1 ||\n              info.offset.y <= dragOffset * -1\n            )\n          case \"bottom\":\n            return (\n              info.velocity.y >= dragVelocity || info.offset.y >= dragOffset\n            )\n          case \"left\":\n            return (\n              info.velocity.x <= dragVelocity * -1 ||\n              info.offset.x <= dragOffset * -1\n            )\n          case \"right\":\n            return (\n              info.velocity.x >= dragVelocity || info.offset.x >= dragOffset\n            )\n        }\n      },\n      [placement, dragVelocity, dragOffset],\n    )\n\n    return (\n      <Slide\n        ref={ref}\n        className={cx(\"ui-drawer\", className)}\n        aria-describedby={bodyRef.current?.id}\n        aria-labelledby={headerRef.current?.id}\n        aria-modal=\"true\"\n        drag={closeOnDrag ? getDragDirection() : false}\n        dragConstraints={getDragDirectionRestriction(dragConstraints)}\n        dragElastic={getDragDirectionRestriction(dragElastic)}\n        dragMomentum={false}\n        dragSnapToOrigin\n        duration={duration}\n        isOpen={open}\n        placement={placement}\n        role=\"dialog\"\n        tabIndex={-1}\n        onDragEnd={(_, info) => {\n          if (isCloseByDragInfo(info)) onClose?.()\n        }}\n        __css={css}\n        {...rest}\n      >\n        {customDrawerCloseButton ??\n          (withCloseButton && onClose ? <DrawerCloseButton /> : null)}\n\n        {withDragBar &&\n        closeOnDrag &&\n        (placement === \"bottom\" || placement === \"right\") ? (\n          <DrawerDragBar />\n        ) : null}\n\n        <ui.div\n          className=\"ui-drawer__inner\"\n          __css={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            w: \"100%\",\n            ...styles.inner,\n          }}\n        >\n          {cloneChildren}\n        </ui.div>\n\n        {withDragBar &&\n        closeOnDrag &&\n        (placement === \"top\" || placement === \"left\") ? (\n          <DrawerDragBar />\n        ) : null}\n      </Slide>\n    )\n  },\n)\n\nDrawerContent.displayName = \"DrawerContent\"\nDrawerContent.__ui__ = \"DrawerContent\"\n"],"mappings":"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","names":["_a","_b"]}

package/dist/{chunk-X5STF2Y7.mjs → chunk-F6XJWJIF.mjs}

@@ -1,7 +1,7 @@
 "use client"
 import {
   useModal
-} from "./chunk-EPC5EUXN.mjs";
+} from "./chunk-64A25YOZ.mjs";
 
 // src/modal-footer.tsx
 import { forwardRef, ui } from "@yamada-ui/core";
@@ -33,4 +33,4 @@ ModalFooter.__ui__ = "ModalFooter";
 export {
   ModalFooter
 };
-//# sourceMappingURL=chunk-X5STF2Y7.mjs.map
+//# sourceMappingURL=chunk-F6XJWJIF.mjs.map

package/dist/{chunk-SCU75AQJ.mjs → chunk-FXMVCPK5.mjs}

@@ -1,13 +1,13 @@
 "use client"
 import {
   DialogCloseButton
-} from "./chunk-U2DBPI7Y.mjs";
+} from "./chunk-3RGLB7UM.mjs";
 import {
   ModalCloseButton
-} from "./chunk-DT5IIM35.mjs";
+} from "./chunk-PXV3LL5A.mjs";
 import {
   useModal
-} from "./chunk-EPC5EUXN.mjs";
+} from "./chunk-64A25YOZ.mjs";
 
 // src/modal-content.tsx
 import { motion, motionForwardRef } from "@yamada-ui/motion";
@@ -45,11 +45,12 @@ var getModalContentProps = (animation = "scale", duration) => {
 };
 var ModalContent = motionForwardRef(
   ({ className, children, __css, ...rest }, ref) => {
+    var _a, _b;
     const {
       animation,
-      describedbyId,
+      bodyRef,
       duration,
-      labelledbyId,
+      headerRef,
       scrollBehavior,
       styles,
       withCloseButton,
@@ -76,8 +77,8 @@ var ModalContent = motionForwardRef(
       {
         ref,
         className: cx("ui-modal", className),
-        "aria-describedby": describedbyId,
-        "aria-labelledby": labelledbyId,
+        "aria-describedby": (_a = bodyRef.current) == null ? void 0 : _a.id,
+        "aria-labelledby": (_b = headerRef.current) == null ? void 0 : _b.id,
         "aria-modal": "true",
         role: "dialog",
         tabIndex: -1,
@@ -98,4 +99,4 @@ ModalContent.__ui__ = "ModalContent";
 export {
   ModalContent
 };
-//# sourceMappingURL=chunk-SCU75AQJ.mjs.map
+//# sourceMappingURL=chunk-FXMVCPK5.mjs.map

package/dist/chunk-FXMVCPK5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/modal-content.tsx"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type { MotionProps, MotionTransitionProps } from \"@yamada-ui/motion\"\nimport type { PropsWithChildren } from \"react\"\nimport type { ModalProps } from \"./modal\"\nimport { motion, motionForwardRef } from \"@yamada-ui/motion\"\nimport { scaleFadeProps, slideFadeProps } from \"@yamada-ui/transitions\"\nimport { cx, findChildren, getValidChildren } from \"@yamada-ui/utils\"\nimport { DialogCloseButton } from \"./dialog-close-button\"\nimport { ModalCloseButton } from \"./modal-close-button\"\nimport { useModal } from \"./modal-context\"\n\nconst getModalContentProps = (\n  animation: ModalProps[\"animation\"] = \"scale\",\n  duration?: MotionTransitionProps[\"duration\"],\n) => {\n  switch (animation) {\n    case \"scale\":\n      return {\n        ...scaleFadeProps,\n        custom: { duration, reverse: true, scale: 0.95 },\n      }\n    case \"top\":\n      return {\n        ...slideFadeProps,\n        custom: { duration, offsetY: -16, reverse: true },\n      }\n    case \"right\":\n      return {\n        ...slideFadeProps,\n        custom: { duration, offsetX: 16, reverse: true },\n      }\n    case \"left\":\n      return {\n        ...slideFadeProps,\n        custom: { duration, offsetX: -16, reverse: true },\n      }\n    case \"bottom\":\n      return {\n        ...slideFadeProps,\n        custom: { duration, offsetY: 16, reverse: true },\n      }\n  }\n}\n\nexport interface ModalContentProps\n  extends Omit<\n      MotionProps<\"section\">,\n      \"animation\" | \"children\" | \"scrollBehavior\" | \"transition\"\n    >,\n    PropsWithChildren {}\n\nexport const ModalContent = motionForwardRef<ModalContentProps, \"section\">(\n  ({ className, children, __css, ...rest }, ref) => {\n    const {\n      animation,\n      bodyRef,\n      duration,\n      headerRef,\n      scrollBehavior,\n      styles,\n      withCloseButton,\n      onClose,\n    } = useModal()\n\n    const validChildren = getValidChildren(children)\n\n    const [customModalCloseButton, ...cloneChildren] = findChildren(\n      validChildren,\n      ModalCloseButton,\n      DialogCloseButton,\n    )\n\n    const props =\n      animation !== \"none\" ? getModalContentProps(animation, duration) : {}\n\n    const css: CSSUIObject = {\n      display: \"flex\",\n      flexDirection: \"column\",\n      maxH: \"100%\",\n      outline: 0,\n      overflow: scrollBehavior === \"inside\" ? \"hidden\" : \"auto\",\n      position: \"relative\",\n      ...(__css ? __css : styles.container),\n    }\n\n    return (\n      <motion.section\n        ref={ref}\n        className={cx(\"ui-modal\", className)}\n        aria-describedby={bodyRef.current?.id}\n        aria-labelledby={headerRef.current?.id}\n        aria-modal=\"true\"\n        role=\"dialog\"\n        tabIndex={-1}\n        __css={css}\n        {...props}\n        {...rest}\n      >\n        {customModalCloseButton ??\n          (withCloseButton && onClose ? <ModalCloseButton /> : null)}\n\n        {cloneChildren}\n      </motion.section>\n    )\n  },\n)\n\nModalContent.displayName = \"ModalContent\"\nModalContent.__ui__ = \"ModalContent\"\n"],"mappings":";;;;;;;;;;;;AAIA,SAAS,QAAQ,wBAAwB;AACzC,SAAS,gBAAgB,sBAAsB;AAC/C,SAAS,IAAI,cAAc,wBAAwB;AAgF7C,SAakC,KAblC;AA3EN,IAAM,uBAAuB,CAC3B,YAAqC,SACrC,aACG;AACH,UAAQ,WAAW;AAAA,IACjB,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,MACjD;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,UAAU,SAAS,KAAK,SAAS,KAAK;AAAA,MAClD;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,UAAU,SAAS,IAAI,SAAS,KAAK;AAAA,MACjD;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,UAAU,SAAS,KAAK,SAAS,KAAK;AAAA,MAClD;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,UAAU,SAAS,IAAI,SAAS,KAAK;AAAA,MACjD;AAAA,EACJ;AACF;AASO,IAAM,eAAe;AAAA,EAC1B,CAAC,EAAE,WAAW,UAAU,OAAO,GAAG,KAAK,GAAG,QAAQ;AApDpD;AAqDI,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,SAAS;AAEb,UAAM,gBAAgB,iBAAiB,QAAQ;AAE/C,UAAM,CAAC,wBAAwB,GAAG,aAAa,IAAI;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,QACJ,cAAc,SAAS,qBAAqB,WAAW,QAAQ,IAAI,CAAC;AAEtE,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,eAAe;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU,mBAAmB,WAAW,WAAW;AAAA,MACnD,UAAU;AAAA,MACV,GAAI,QAAQ,QAAQ,OAAO;AAAA,IAC7B;AAEA,WACE;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC;AAAA,QACA,WAAW,GAAG,YAAY,SAAS;AAAA,QACnC,qBAAkB,aAAQ,YAAR,mBAAiB;AAAA,QACnC,oBAAiB,eAAU,YAAV,mBAAmB;AAAA,QACpC,cAAW;AAAA,QACX,MAAK;AAAA,QACL,UAAU;AAAA,QACV,OAAO;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA,oEACE,mBAAmB,UAAU,oBAAC,oBAAiB,IAAK;AAAA,UAEtD;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;AAC3B,aAAa,SAAS;","names":[]}

package/dist/{chunk-W4G2GVI7.mjs → chunk-GMWH5UP2.mjs}

@@ -1,25 +1,25 @@
 "use client"
 import {
   Modal
-} from "./chunk-WKDYYNHI.mjs";
+} from "./chunk-YK2YBJMG.mjs";
 import {
   DialogBody
-} from "./chunk-EITLQG4B.mjs";
+} from "./chunk-I7XUEPCF.mjs";
 import {
   DialogCloseButton
-} from "./chunk-U2DBPI7Y.mjs";
+} from "./chunk-3RGLB7UM.mjs";
 import {
   DialogFooter
-} from "./chunk-Z7MBETMY.mjs";
+} from "./chunk-XOD2SYPV.mjs";
 import {
   DialogHeader
-} from "./chunk-CBL7CH2A.mjs";
+} from "./chunk-6ZTN6KKG.mjs";
 import {
   DialogOverlay
-} from "./chunk-CTBGRQX2.mjs";
+} from "./chunk-V6LGJTK2.mjs";
 import {
   DialogProvider
-} from "./chunk-EPC5EUXN.mjs";
+} from "./chunk-64A25YOZ.mjs";
 
 // src/dialog.tsx
 import { Button } from "@yamada-ui/button";
@@ -138,4 +138,4 @@ Dialog.__ui__ = "Dialog";
 export {
   Dialog
 };
-//# sourceMappingURL=chunk-W4G2GVI7.mjs.map
+//# sourceMappingURL=chunk-GMWH5UP2.mjs.map

package/dist/{chunk-EITLQG4B.mjs → chunk-I7XUEPCF.mjs}

@@ -1,10 +1,10 @@
 "use client"
 import {
   ModalBody
-} from "./chunk-GBZ3BEXX.mjs";
+} from "./chunk-OPXWQC3M.mjs";
 import {
   useDialog
-} from "./chunk-EPC5EUXN.mjs";
+} from "./chunk-64A25YOZ.mjs";
 
 // src/dialog-body.tsx
 import { forwardRef } from "@yamada-ui/core";
@@ -31,4 +31,4 @@ DialogBody.__ui__ = "DialogBody";
 export {
   DialogBody
 };
-//# sourceMappingURL=chunk-EITLQG4B.mjs.map
+//# sourceMappingURL=chunk-I7XUEPCF.mjs.map

package/dist/{chunk-GBZ3BEXX.mjs → chunk-OPXWQC3M.mjs}

@@ -1,15 +1,15 @@
 "use client"
 import {
   useModal
-} from "./chunk-EPC5EUXN.mjs";
+} from "./chunk-64A25YOZ.mjs";
 
 // src/modal-body.tsx
 import { forwardRef, ui } from "@yamada-ui/core";
-import { cx } from "@yamada-ui/utils";
+import { cx, mergeRefs } from "@yamada-ui/utils";
 import { jsx } from "react/jsx-runtime";
 var ModalBody = forwardRef(
   ({ className, __css, ...rest }, ref) => {
-    const { describedbyId, scrollBehavior, styles } = useModal();
+    const { bodyRef, scrollBehavior, styles } = useModal();
     const css = {
       alignItems: "flex-start",
       display: "flex",
@@ -20,8 +20,7 @@ var ModalBody = forwardRef(
     return /* @__PURE__ */ jsx(
       ui.div,
       {
-        id: describedbyId,
-        ref,
+        ref: mergeRefs(bodyRef, ref),
         className: cx("ui-modal__body", className),
         __css: css,
         ...rest
@@ -35,4 +34,4 @@ ModalBody.__ui__ = "ModalBody";
 export {
   ModalBody
 };
-//# sourceMappingURL=chunk-GBZ3BEXX.mjs.map
+//# sourceMappingURL=chunk-OPXWQC3M.mjs.map

package/dist/chunk-OPXWQC3M.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/modal-body.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx, mergeRefs } from \"@yamada-ui/utils\"\nimport { useModal } from \"./modal-context\"\n\nexport interface ModalBodyProps extends HTMLUIProps {}\n\nexport const ModalBody = forwardRef<ModalBodyProps, \"div\">(\n  ({ className, __css, ...rest }, ref) => {\n    const { bodyRef, scrollBehavior, styles } = useModal()\n\n    const css: CSSUIObject = {\n      alignItems: \"flex-start\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      overflow: scrollBehavior === \"inside\" ? \"auto\" : undefined,\n      ...(__css ? __css : styles.body),\n    }\n\n    return (\n      <ui.div\n        ref={mergeRefs(bodyRef, ref)}\n        className={cx(\"ui-modal__body\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\nModalBody.displayName = \"ModalBody\"\nModalBody.__ui__ = \"ModalBody\"\n"],"mappings":";;;;;;AACA,SAAS,YAAY,UAAU;AAC/B,SAAS,IAAI,iBAAiB;AAkBxB;AAbC,IAAM,YAAY;AAAA,EACvB,CAAC,EAAE,WAAW,OAAO,GAAG,KAAK,GAAG,QAAQ;AACtC,UAAM,EAAE,SAAS,gBAAgB,OAAO,IAAI,SAAS;AAErD,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,eAAe;AAAA,MACf,UAAU,mBAAmB,WAAW,SAAS;AAAA,MACjD,GAAI,QAAQ,QAAQ,OAAO;AAAA,IAC7B;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,KAAK,UAAU,SAAS,GAAG;AAAA,QAC3B,WAAW,GAAG,kBAAkB,SAAS;AAAA,QACzC,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;","names":[]}

package/dist/{chunk-UWNNN2FG.mjs → chunk-PXCCIW5O.mjs}

@@ -1,10 +1,10 @@
 "use client"
 import {
   ModalCloseButton
-} from "./chunk-DT5IIM35.mjs";
+} from "./chunk-PXV3LL5A.mjs";
 import {
   useDrawer
-} from "./chunk-EPC5EUXN.mjs";
+} from "./chunk-64A25YOZ.mjs";
 
 // src/drawer-close-button.tsx
 import { forwardRef } from "@yamada-ui/core";
@@ -31,4 +31,4 @@ DrawerCloseButton.__ui__ = "DrawerCloseButton";
 export {
   DrawerCloseButton
 };
-//# sourceMappingURL=chunk-UWNNN2FG.mjs.map
+//# sourceMappingURL=chunk-PXCCIW5O.mjs.map

package/dist/{chunk-DT5IIM35.mjs → chunk-PXV3LL5A.mjs}

@@ -1,7 +1,7 @@
 "use client"
 import {
   useModal
-} from "./chunk-EPC5EUXN.mjs";
+} from "./chunk-64A25YOZ.mjs";
 
 // src/modal-close-button.tsx
 import { CloseButton } from "@yamada-ui/close-button";
@@ -37,4 +37,4 @@ ModalCloseButton.__ui__ = "ModalCloseButton";
 export {
   ModalCloseButton
 };
-//# sourceMappingURL=chunk-DT5IIM35.mjs.map
+//# sourceMappingURL=chunk-PXV3LL5A.mjs.map

package/dist/{chunk-KRAXUNBU.mjs → chunk-QIRIQ2KT.mjs}

@@ -1,16 +1,16 @@
 "use client"
 import {
   Modal
-} from "./chunk-WKDYYNHI.mjs";
+} from "./chunk-YK2YBJMG.mjs";
 import {
   DrawerContent
-} from "./chunk-4SA2BXAV.mjs";
+} from "./chunk-AZF6QW2S.mjs";
 import {
   DrawerOverlay
-} from "./chunk-4L4JX6MZ.mjs";
+} from "./chunk-ZMEZYJLF.mjs";
 import {
   DrawerProvider
-} from "./chunk-EPC5EUXN.mjs";
+} from "./chunk-64A25YOZ.mjs";
 
 // src/drawer.tsx
 import { omitThemeProps, useComponentMultiStyle } from "@yamada-ui/core";
@@ -118,4 +118,4 @@ Drawer.__ui__ = "Drawer";
 export {
   Drawer
 };
-//# sourceMappingURL=chunk-KRAXUNBU.mjs.map
+//# sourceMappingURL=chunk-QIRIQ2KT.mjs.map

package/dist/{chunk-4MSKF3NP.mjs → chunk-R2TMPSE3.mjs}

@@ -1,10 +1,10 @@
 "use client"
 import {
   ModalBody
-} from "./chunk-GBZ3BEXX.mjs";
+} from "./chunk-OPXWQC3M.mjs";
 import {
   useDrawer
-} from "./chunk-EPC5EUXN.mjs";
+} from "./chunk-64A25YOZ.mjs";
 
 // src/drawer-body.tsx
 import { forwardRef } from "@yamada-ui/core";
@@ -31,4 +31,4 @@ DrawerBody.__ui__ = "DrawerBody";
 export {
   DrawerBody
 };
-//# sourceMappingURL=chunk-4MSKF3NP.mjs.map
+//# sourceMappingURL=chunk-R2TMPSE3.mjs.map

package/dist/{chunk-CTBGRQX2.mjs → chunk-V6LGJTK2.mjs}

@@ -1,10 +1,10 @@
 "use client"
 import {
   ModalOverlay
-} from "./chunk-4VGCDKI3.mjs";
+} from "./chunk-XDFGVPCC.mjs";
 import {
   useDialog
-} from "./chunk-EPC5EUXN.mjs";
+} from "./chunk-64A25YOZ.mjs";
 
 // src/dialog-overlay.tsx
 import { motionForwardRef } from "@yamada-ui/motion";
@@ -31,4 +31,4 @@ DialogOverlay.__ui__ = "DialogOverlay";
 export {
   DialogOverlay
 };
-//# sourceMappingURL=chunk-CTBGRQX2.mjs.map
+//# sourceMappingURL=chunk-V6LGJTK2.mjs.map

package/dist/{chunk-4VGCDKI3.mjs → chunk-XDFGVPCC.mjs}

@@ -1,7 +1,7 @@
 "use client"
 import {
   useModal
-} from "./chunk-EPC5EUXN.mjs";
+} from "./chunk-64A25YOZ.mjs";
 
 // src/modal-overlay.tsx
 import { motion, motionForwardRef } from "@yamada-ui/motion";
@@ -51,4 +51,4 @@ ModalOverlay.__ui__ = "ModalOverlay";
 export {
   ModalOverlay
 };
-//# sourceMappingURL=chunk-4VGCDKI3.mjs.map
+//# sourceMappingURL=chunk-XDFGVPCC.mjs.map

package/dist/{chunk-Z7MBETMY.mjs → chunk-XOD2SYPV.mjs}

@@ -1,10 +1,10 @@
 "use client"
 import {
   ModalFooter
-} from "./chunk-X5STF2Y7.mjs";
+} from "./chunk-F6XJWJIF.mjs";
 import {
   useDialog
-} from "./chunk-EPC5EUXN.mjs";
+} from "./chunk-64A25YOZ.mjs";
 
 // src/dialog-footer.tsx
 import { forwardRef } from "@yamada-ui/core";
@@ -31,4 +31,4 @@ DialogFooter.__ui__ = "DialogFooter";
 export {
   DialogFooter
 };
-//# sourceMappingURL=chunk-Z7MBETMY.mjs.map
+//# sourceMappingURL=chunk-XOD2SYPV.mjs.map

package/dist/{chunk-WKDYYNHI.mjs → chunk-YK2YBJMG.mjs}

@@ -1,22 +1,22 @@
 "use client"
 import {
   ModalContent
-} from "./chunk-SCU75AQJ.mjs";
+} from "./chunk-FXMVCPK5.mjs";
 import {
   DrawerContent
-} from "./chunk-4SA2BXAV.mjs";
+} from "./chunk-AZF6QW2S.mjs";
 import {
   DrawerOverlay
-} from "./chunk-4L4JX6MZ.mjs";
+} from "./chunk-ZMEZYJLF.mjs";
 import {
   DialogOverlay
-} from "./chunk-CTBGRQX2.mjs";
+} from "./chunk-V6LGJTK2.mjs";
 import {
   ModalOverlay
-} from "./chunk-4VGCDKI3.mjs";
+} from "./chunk-XDFGVPCC.mjs";
 import {
   ModalProvider
-} from "./chunk-EPC5EUXN.mjs";
+} from "./chunk-64A25YOZ.mjs";
 
 // src/modal.tsx
 import { omitThemeProps, ui, useComponentMultiStyle } from "@yamada-ui/core";
@@ -25,7 +25,7 @@ import { AnimatePresence, motionForwardRef } from "@yamada-ui/motion";
 import { Portal } from "@yamada-ui/portal";
 import { useValue } from "@yamada-ui/use-value";
 import { findChild, findChildren, getValidChildren } from "@yamada-ui/utils";
-import { cloneElement, useCallback, useId } from "react";
+import { cloneElement, useCallback, useRef } from "react";
 import { RemoveScroll } from "react-remove-scroll";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Modal = motionForwardRef(
@@ -63,9 +63,9 @@ var Modal = motionForwardRef(
       onOverlayClick,
       ...rest
     } = omitThemeProps(mergedProps);
+    const headerRef = useRef(null);
+    const bodyRef = useRef(null);
     open != null ? open : open = isOpen;
-    const labelledbyId = useId();
-    const describedbyId = useId();
     const onKeyDown = useCallback(
       (ev) => {
         if (ev.key !== "Escape") return;
@@ -103,11 +103,11 @@ var Modal = motionForwardRef(
       {
         value: {
           animation,
+          bodyRef,
           closeOnOverlay,
-          describedbyId,
           duration,
+          headerRef,
           isOpen,
-          labelledbyId,
           open,
           scrollBehavior,
           styles,
@@ -154,4 +154,4 @@ var Modal = motionForwardRef(
 export {
   Modal
 };
-//# sourceMappingURL=chunk-WKDYYNHI.mjs.map
+//# sourceMappingURL=chunk-YK2YBJMG.mjs.map

package/dist/chunk-YK2YBJMG.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/modal.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  CSSUIProps,\n  HTMLUIProps,\n  ThemeProps,\n  Token,\n} from \"@yamada-ui/core\"\nimport type { FocusLockProps } from \"@yamada-ui/focus-lock\"\nimport type { MotionTransitionProps } from \"@yamada-ui/motion\"\nimport type { PortalProps } from \"@yamada-ui/portal\"\nimport type { KeyboardEvent } from \"react\"\nimport type { ModalContentProps } from \"./modal-content\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { FocusLock } from \"@yamada-ui/focus-lock\"\nimport { AnimatePresence, motionForwardRef } from \"@yamada-ui/motion\"\nimport { Portal } from \"@yamada-ui/portal\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { findChild, findChildren, getValidChildren } from \"@yamada-ui/utils\"\nimport { cloneElement, useCallback, useRef } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { DialogOverlay } from \"./dialog-overlay\"\nimport { DrawerContent } from \"./drawer-content\"\nimport { DrawerOverlay } from \"./drawer-overlay\"\nimport { ModalContent } from \"./modal-content\"\nimport { ModalProvider } from \"./modal-context\"\nimport { ModalOverlay } from \"./modal-overlay\"\n\nexport interface ModalOptions\n  extends Pick<\n    FocusLockProps,\n    | \"autoFocus\"\n    | \"finalFocusRef\"\n    | \"initialFocusRef\"\n    | \"lockFocusAcrossFrames\"\n    | \"restoreFocus\"\n  > {\n  /**\n   * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n   *\n   * @default false.\n   */\n  allowPinchZoom?: boolean\n  /**\n   * The animation of the tooltip.\n   *\n   * @default 'scale'\n   */\n  animation?: \"bottom\" | \"left\" | \"none\" | \"right\" | \"scale\" | \"top\"\n  /**\n   * If `true`, scrolling will be disabled on the `body` when the modal opens.\n   *\n   * @default true\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * If `true`, the modal will close when the `Esc` key is pressed.\n   *\n   * @default true\n   */\n  closeOnEsc?: boolean\n  /**\n   * If `true`, the modal will close when the overlay is clicked.\n   *\n   * @default true\n   */\n  closeOnOverlay?: boolean\n  /**\n   * The animation duration.\n   */\n  duration?: MotionTransitionProps[\"duration\"]\n  /**\n   * If `true`, the open will be opened.\n   *\n   * @deprecated Use `open` instead.\n   */\n  isOpen?: boolean\n  /**\n   * If `true`, the open will be opened.\n   */\n  open?: boolean\n  /**\n   * The CSS `padding` property.\n   */\n  outside?: CSSUIProps[\"p\"]\n  /**\n   * The placement of the modal.\n   *\n   * @default 'center'\n   */\n  placement?: Token<\n    | \"bottom\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"center\"\n    | \"left\"\n    | \"right\"\n    | \"top\"\n    | \"top-left\"\n    | \"top-right\"\n  >\n  /**\n   * Where scroll behavior should originate.\n   *\n   * - `inside`: scroll only occurs within the `ModalBody`.\n   * - `outside`: the entire `ModalContent` will scroll within the viewport.\n   *\n   * @default 'inside'\n   */\n  scrollBehavior?: \"inside\" | \"outside\"\n  /**\n   * If `true`, display the modal close button.\n   *\n   * @default true\n   */\n  withCloseButton?: boolean\n  /**\n   * If `true`, display the modal overlay.\n   *\n   * @default true\n   */\n  withOverlay?: boolean\n  /**\n   * Props for modal container element.\n   */\n  containerProps?: HTMLUIProps\n  /**\n   * Props to be forwarded to the portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Callback invoked to close the modal.\n   */\n  onClose?: () => void\n  /**\n   * Callback function to run side effects after the modal has closed.\n   */\n  onCloseComplete?: () => void\n  /**\n   * Callback fired when the escape key is pressed and focus is within modal.\n   */\n  onEsc?(): void\n  /**\n   * Callback fired when the overlay is clicked.\n   */\n  onOverlayClick?: () => void\n}\n\nexport interface ModalProps\n  extends ModalContentProps,\n    ThemeProps<\"Modal\">,\n    ModalOptions {}\n\n/**\n * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n *\n * @see Docs https://yamada-ui.com/components/overlay/modal\n */\nexport const Modal = motionForwardRef<ModalProps, \"section\">(\n  ({ size, ...props }, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\"Modal\", {\n      size,\n      ...props,\n    })\n    let {\n      className,\n      allowPinchZoom = false,\n      animation = \"scale\",\n      autoFocus,\n      blockScrollOnMount = true,\n      children,\n      closeOnEsc = true,\n      closeOnOverlay = true,\n      duration,\n      finalFocusRef,\n      initialFocusRef,\n      isOpen,\n      lockFocusAcrossFrames = true,\n      open,\n      outside = \"fallback(4, 1rem)\",\n      placement: _placement = \"center\",\n      restoreFocus,\n      scrollBehavior = \"inside\",\n      withCloseButton = true,\n      withOverlay = true,\n      containerProps,\n      portalProps,\n      onClose,\n      onCloseComplete,\n      onEsc,\n      onOverlayClick,\n      ...rest\n    } = omitThemeProps(mergedProps)\n    const headerRef = useRef<HTMLElement>(null)\n    const bodyRef = useRef<HTMLElement>(null)\n\n    open ??= isOpen\n\n    const onKeyDown = useCallback(\n      (ev: KeyboardEvent) => {\n        if (ev.key !== \"Escape\") return\n\n        ev.stopPropagation()\n\n        if (closeOnEsc) onClose?.()\n\n        onEsc?.()\n      },\n      [closeOnEsc, onClose, onEsc],\n    )\n\n    const validChildren = getValidChildren(children)\n\n    const [customModalOverlay, ...cloneChildren] = findChildren(\n      validChildren,\n      ModalOverlay,\n      DialogOverlay,\n      DrawerOverlay,\n    )\n\n    let drawerContent = findChild(validChildren, DrawerContent)\n\n    if (drawerContent)\n      drawerContent = cloneElement(drawerContent, { onKeyDown })\n\n    const placement = useValue(_placement)\n\n    const css: CSSUIObject = {\n      alignItems: placement.includes(\"top\")\n        ? \"flex-start\"\n        : placement.includes(\"bottom\")\n          ? \"flex-end\"\n          : \"center\",\n      display: \"flex\",\n      h: \"100dvh\",\n      justifyContent: placement.includes(\"left\")\n        ? \"flex-start\"\n        : placement.includes(\"right\")\n          ? \"flex-end\"\n          : \"center\",\n      left: 0,\n      p: size !== \"full\" ? outside : undefined,\n      position: \"fixed\",\n      top: 0,\n      w: \"100vw\",\n      zIndex: \"fallback(jeice, 110)\",\n    }\n\n    return (\n      <ModalProvider\n        value={{\n          animation,\n          bodyRef,\n          closeOnOverlay,\n          duration,\n          headerRef,\n          isOpen,\n          open,\n          scrollBehavior,\n          styles,\n          withCloseButton,\n          onClose,\n          onOverlayClick,\n        }}\n      >\n        <AnimatePresence onExitComplete={onCloseComplete}>\n          {open ? (\n            <Portal {...portalProps}>\n              <FocusLock\n                autoFocus={autoFocus}\n                finalFocusRef={finalFocusRef}\n                initialFocusRef={initialFocusRef}\n                lockFocusAcrossFrames={lockFocusAcrossFrames}\n                restoreFocus={restoreFocus}\n              >\n                <RemoveScroll\n                  allowPinchZoom={allowPinchZoom}\n                  enabled={blockScrollOnMount}\n                  forwardProps\n                >\n                  <ui.div __css={css} {...containerProps}>\n                    {customModalOverlay ??\n                      (withOverlay && size !== \"full\" ? (\n                        <ModalOverlay />\n                      ) : null)}\n\n                    {drawerContent ?? (\n                      <ModalContent\n                        ref={ref}\n                        className={className}\n                        onKeyDown={onKeyDown}\n                        {...rest}\n                      >\n                        {cloneChildren}\n                      </ModalContent>\n                    )}\n                  </ui.div>\n                </RemoveScroll>\n              </FocusLock>\n            </Portal>\n          ) : null}\n        </AnimatePresence>\n      </ModalProvider>\n    )\n  },\n)\n"],"mappings":"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","names":[]}

package/dist/{chunk-O6TYHALA.mjs → chunk-ZG6MHJXG.mjs}

@@ -1,10 +1,10 @@
 "use client"
 import {
   ModalHeader
-} from "./chunk-DWQHOEUG.mjs";
+} from "./chunk-A64FIX7X.mjs";
 import {
   useDrawer
-} from "./chunk-EPC5EUXN.mjs";
+} from "./chunk-64A25YOZ.mjs";
 
 // src/drawer-header.tsx
 import { forwardRef } from "@yamada-ui/core";
@@ -31,4 +31,4 @@ DrawerHeader.__ui__ = "DrawerHeader";
 export {
   DrawerHeader
 };
-//# sourceMappingURL=chunk-O6TYHALA.mjs.map
+//# sourceMappingURL=chunk-ZG6MHJXG.mjs.map