@orioncactuscorp/ui 1.8.0 → 1.9.1

package/dist/components/Modal/Modal.js

@@ -1,81 +1,128 @@
 'use client';
-import { jsx as c, jsxs as Z } from "react/jsx-runtime";
-import { useCallback as P, useEffect as ne, useRef as Y, useState as T, useMemo as be, useLayoutEffect as Ce, useId as Me } from "react";
-import { Dialog as $ } from "@base-ui-components/react/dialog";
-import Pe from "@orioncactuscorp/icons/orioncactus/CloseThick";
-import { MotionExpand as Re } from "../../react/motion.js";
-import He from "../Background/Background.js";
-import Te from "../BackgroundIconButton/BackgroundIconButton.js";
-import we from "../Interaction/Interaction.js";
-import { ScrollArea as ve, ScrollAreaContainer as ye } from "../ScrollArea/ScrollArea.js";
-import { DisclosureIndicator as Fe } from "../internal/DisclosureIndicator.js";
-import { normalizeSlotIcon as xe } from "../internal/slot.js";
-import { useModalContext as re, ModalProvider as Ae } from "./contexts.js";
-import { useControllableState as ke } from "./useControllableState.js";
-import { useMeasuredElement as ue } from "./useElementSize.js";
-import { useModalDrag as Be } from "./useModalDrag.js";
-import { useModalPlacement as De } from "./useModalPlacement.js";
-import { useModalStackDepth as Ie } from "./useModalStackDepth.js";
-import { getModalScrollState as Ee } from "./modalScrollArbitration.js";
-import { resolveModalSnapMetrics as je, resolveModalPopupSnapPositions as Le } from "./snapPoints.js";
-import n from "./Modal.module.scss.js";
-function R(...e) {
+import { jsx as s, jsxs as ne } from "react/jsx-runtime";
+import { useCallback as k, useEffect as oe, useRef as $, useState as S, useMemo as Te, useLayoutEffect as ge, useId as at } from "react";
+import { Dialog as O } from "@base-ui-components/react/dialog";
+import rt from "@orioncactuscorp/icons/orioncactus/CloseThick";
+import { MotionExpand as it } from "../../react/motion.js";
+import ct from "../Background/Background.js";
+import st from "../BackgroundIconButton/BackgroundIconButton.js";
+import lt from "../Interaction/Interaction.js";
+import { ScrollArea as Le, ScrollAreaContainer as ze } from "../ScrollArea/ScrollArea.js";
+import { DisclosureIndicator as dt } from "../internal/DisclosureIndicator.js";
+import { normalizeSlotIcon as ut } from "../internal/slot.js";
+import { useModalContext as de, ModalProvider as pt } from "./contexts.js";
+import { useControllableState as je } from "./useControllableState.js";
+import { useModalContentBlockTransition as mt } from "./useModalContentBlockTransition.js";
+import { useMeasuredElement as xe } from "./useElementSize.js";
+import { useModalDrag as ft } from "./useModalDrag.js";
+import { useModalPlacement as ht } from "./useModalPlacement.js";
+import { useModalStackDepth as gt } from "./useModalStackDepth.js";
+import { resolveContentSizedBottomSheetHeight as vt } from "./bottomSheetGeometry.js";
+import { getModalScrollState as bt } from "./modalScrollArbitration.js";
+import { resolveModalSnapMetrics as yt, resolveModalPopupSnapPositions as St } from "./snapPoints.js";
+import i from "./Modal.module.scss.js";
+function B(...e) {
   return e.filter(Boolean).join(" ");
 }
-function Se(e) {
+function $e(e) {
   return e != null && e !== !1 && e !== "";
 }
-function pe(e, t) {
+function Pe(e, t) {
   typeof e == "function" ? e(t) : e && (e.current = t);
 }
-function $e(e) {
+function kt(e) {
   if (!e) return;
   const t = Object.entries(e).filter(
-    ([r]) => r.startsWith("--")
+    ([n]) => n.startsWith("--")
   );
   if (t.length !== 0)
     return Object.fromEntries(t);
 }
-function Ve(e) {
+function Ee() {
+  return typeof window > "u" ? 0 : window.visualViewport?.height ?? window.innerHeight;
+}
+function Nt(e) {
+  const t = e.trim();
+  if (!t.endsWith("px")) return;
+  const n = Number.parseFloat(t);
+  return Number.isFinite(n) && n > 0 ? n : void 0;
+}
+function Ct(e) {
+  if (!(!e || typeof window > "u"))
+    return Nt(window.getComputedStyle(e).maxHeight);
+}
+function wt({
+  contentTransition: e,
+  placement: t,
+  resize: n
+}) {
+  return e !== "auto" || n !== "content" || t === "full" ? "none" : t === "bottom" ? "sheet" : "surface";
+}
+function Ae(e, t) {
+  return e.resolvedBackdrop === t ? e : {
+    resolvedBackdrop: t,
+    exiting: t === "hidden" && e.resolvedBackdrop !== "hidden"
+  };
+}
+function Mt(e) {
+  const [t, n] = S(Ee);
+  return ge(() => {
+    if (!e || typeof window > "u") return;
+    const a = () => {
+      n(Ee());
+    };
+    return a(), window.addEventListener("resize", a), window.visualViewport?.addEventListener("resize", a), () => {
+      window.removeEventListener("resize", a), window.visualViewport?.removeEventListener(
+        "resize",
+        a
+      );
+    };
+  }, [e]), t;
+}
+function Ht(e) {
   const t = e.trim();
   return t.endsWith("ms") ? Number.parseFloat(t) || 0 : t.endsWith("s") ? (Number.parseFloat(t) || 0) * 1e3 : 0;
 }
-function fe(e) {
-  return e.split(",").reduce((t, r) => Math.max(t, Ve(r)), 0);
+function ke(e) {
+  return e.split(",").reduce((t, n) => Math.max(t, Ht(n)), 0);
+}
+function Tt(e) {
+  const t = window.getComputedStyle(e), n = ke(t.animationDuration), a = ke(t.animationDelay);
+  return n + a + 250;
 }
-function Oe(e) {
-  const t = window.getComputedStyle(e), r = fe(t.animationDuration), s = fe(t.animationDelay);
-  return r + s + 250;
+function xt(e) {
+  const t = window.getComputedStyle(e), n = ke(t.transitionDuration), a = ke(t.transitionDelay);
+  return n + a + 250;
 }
-function qe({
+function Pt({
   defaultSnapPosition: e,
   node: t,
-  snapPositions: r
+  snapPositions: n
 }) {
-  if (!r?.length) return;
-  const s = Le({
+  if (!n?.length) return;
+  const a = St({
     defaultSnapPosition: e,
-    snapPositions: r,
+    snapPositions: n,
     surfaceMotion: t
   });
-  if (!s) return;
-  const l = s.defaultTarget;
+  if (!a) return;
+  const d = a.defaultTarget;
   t.style.setProperty(
     "--oc-modal-translate-x",
-    l.settledTranslate?.x ?? `${l.x}px`
+    d.settledTranslate?.x ?? `${d.x}px`
   ), t.style.setProperty(
     "--oc-modal-translate-y",
-    l.settledTranslate?.y ?? `${l.y}px`
+    d.settledTranslate?.y ?? `${d.y}px`
   );
 }
-function Ke(e) {
+function Rt(e) {
   if (e && typeof e == "object" && "reason" in e && typeof e.reason == "string")
     return e.reason;
 }
-function de(e) {
+function Se(e) {
   e && typeof e == "object" && "cancel" in e && typeof e.cancel == "function" && e.cancel();
 }
-function ze(e, t) {
+function Bt(e, t) {
   switch (t) {
     case "drag-dismiss":
       return e?.drag ?? "auto";
@@ -93,22 +140,22 @@ function ze(e, t) {
       return e?.programmatic ?? "auto";
   }
 }
-function We(e, t) {
+function Ft(e, t) {
   return t > 0 && (e === "drag-dismiss" || e === "backdrop-press" || e === "outside-press");
 }
-function ge(e, t) {
+function Ie(e, t) {
   return t && (e === "backdrop-press" || e === "outside-press");
 }
-function Ue({
+function Dt({
   backdrop: e,
   canSnapPopup: t,
-  placement: r,
-  presentationState: s
+  placement: n,
+  presentationState: a
 }) {
-  return e !== "auto" ? e : r === "bottom" && s === "peeked" || t ? "hidden" : "visible";
+  return e !== "auto" ? e : n === "bottom" && a === "peeked" || t ? "hidden" : "visible";
 }
-function _e(e) {
-  switch (Ke(e)) {
+function Et(e) {
+  switch (Rt(e)) {
     case "close-press":
       return "close-button";
     case "outside-press":
@@ -123,380 +170,484 @@ function _e(e) {
       return "programmatic";
   }
 }
-function Ge(e) {
+function At(e) {
   return e >= 2 && e <= 6;
 }
-function he({
+function Ve({
   children: e,
   open: t,
-  defaultOpen: r,
-  modal: s = !0,
-  onOpenChange: l,
-  canCloseAttempt: b,
-  onCloseAttempt: u,
-  presentationState: y,
-  defaultPresentationState: g = "visible",
-  onPresentationStateChange: k,
-  disablePointerDismissal: f,
-  navigationDepth: p = 0,
-  dismissBehavior: w
+  defaultOpen: n,
+  modal: a = !0,
+  onOpenChange: d,
+  canCloseAttempt: w,
+  onCloseAttempt: f,
+  presentationState: h,
+  defaultPresentationState: N = "visible",
+  onPresentationStateChange: C,
+  disablePointerDismissal: g,
+  navigationDepth: m = 0,
+  dismissBehavior: F
 }) {
-  const i = t !== void 0, [H, V] = T(
-    r ?? !1
-  ), O = i ? t : H, [q, ce] = T("bottom"), [a, K] = T(!1), [B, J] = T(!1), [d, D] = T(!1), [h, ee] = T(!1), [z, Q] = T(0), [S, C] = T(0), [te, W] = T(null), [U, F] = T({
+  const l = t !== void 0, [T, q] = S(
+    n ?? !1
+  ), K = l ? t : T, [Q, X] = S("bottom"), [Y, o] = S(!1), [L, W] = S(!1), [z, u] = S(!1), [v, ae] = S(!1), [U, Z] = S(0), [_, ue] = S(0), [re, pe] = S(null), [j, P] = S({
     canScroll: !1,
     scrolledFromTop: !1,
     scrolledToBottom: !0
-  }), [N, I] = ke({
-    value: y,
-    defaultValue: g,
-    onChange: k
-  }), x = ue(), M = ue(), X = Math.max(0, p), v = P(
-    (o, m) => {
-      i || V(o), l?.(o, m);
+  }), [b, D] = je({
+    value: h,
+    defaultValue: N,
+    onChange: C
+  }), G = xe(), E = xe(), ee = Math.max(0, m), M = k(
+    (r, y) => {
+      l || q(r), d?.(r, y);
     },
-    [l, i]
-  ), E = P(
-    (o = { reason: "programmatic" }) => b?.(o) !== !1,
-    [b]
-  ), A = P(
-    (o = { reason: "programmatic" }) => {
-      Q((m) => m + 1);
+    [d, l]
+  ), p = k(
+    (r = { reason: "programmatic" }) => w?.(r) !== !1,
+    [w]
+  ), R = k(
+    (r = { reason: "programmatic" }) => {
+      Z((y) => y + 1);
     },
     []
-  ), oe = P(() => {
-    C((o) => o + 1);
-  }, []), j = P(
-    (o = { reason: "programmatic" }) => {
-      if (ge(o.reason, d))
+  ), te = k(() => {
+    ue((r) => r + 1);
+  }, []), A = k(
+    (r = { reason: "programmatic" }) => {
+      if (Ie(r.reason, z))
         return !1;
-      const m = ze(w, o.reason);
-      return m === "allow" ? !0 : m === "block" ? !1 : !We(o.reason, X);
+      const y = Bt(F, r.reason);
+      return y === "allow" ? !0 : y === "block" ? !1 : !Ft(r.reason, ee);
     },
-    [d, w, X]
-  ), _ = P(
-    (o = { reason: "programmatic" }, m = {}) => {
-      const { commit: le = !0, skipAttempt: L = !1 } = m;
-      return !L && ge(o.reason, d) ? (de(o.eventDetails), !1) : !L && !j(o) || !L && !E(o) || !L && u?.(o) === !1 ? (de(o.eventDetails), A(o), !1) : (le && v(!1, o.eventDetails), !0);
+    [z, F, ee]
+  ), I = k(
+    (r = { reason: "programmatic" }, y = {}) => {
+      const { commit: Ne = !0, skipAttempt: x = !1 } = y;
+      return !x && Ie(r.reason, z) ? (Se(r.eventDetails), !1) : !x && !A(r) || !x && !p(r) || !x && f?.(r) === !1 ? (Se(r.eventDetails), R(r), !1) : (Ne && M(!1, r.eventDetails), !0);
     },
     [
-      E,
-      d,
-      j,
-      v,
+      p,
+      z,
       A,
-      u
+      M,
+      R,
+      f
     ]
-  ), ae = P(
-    (o, m) => {
-      if (o && N === "peeked" && I("visible"), !o) {
-        _({
-          reason: _e(m),
-          eventDetails: m
+  ), ie = k(
+    (r, y) => {
+      if (r && b === "peeked" && D("visible"), !r) {
+        I({
+          reason: Et(y),
+          eventDetails: y
         });
         return;
       }
-      v(o, m);
+      M(r, y);
     },
-    [v, N, _, I]
-  ), G = N === "visible" && !h ? s : !1, se = f || q === "bottom" && a, ie = be(
+    [M, b, I, D]
+  ), V = b === "visible" && !v ? a : !1, J = g || Q === "bottom" && Y, ve = Te(
     () => ({
-      open: O,
-      placement: q,
-      setPlacement: ce,
-      presentationState: N,
-      setPresentationState: I,
-      requestClose: _,
-      canDismissByBehavior: j,
-      canCloseAttempt: E,
-      closeAttemptFeedbackKey: z,
-      notifyCloseAttemptRejected: A,
-      disablePointerDismissal: f ?? !1,
-      setBackdropDismissalDisabled: D,
-      setBackgroundInteractive: ee,
-      canPeek: a,
-      setCanPeek: K,
-      canRenderHandle: B,
-      setCanRenderHandle: J,
-      popupSnapLayoutVersion: S,
-      notifyPopupSnapLayoutChange: oe,
-      headerHeight: x.height,
-      footerHeight: M.height,
-      setHeaderNode: x.setNode,
-      setFooterNode: M.setNode,
-      bodyNode: te,
-      setBodyNode: W,
-      scrollState: U,
-      setScrollState: F
+      open: K,
+      placement: Q,
+      setPlacement: X,
+      presentationState: b,
+      setPresentationState: D,
+      requestClose: I,
+      canDismissByBehavior: A,
+      canCloseAttempt: p,
+      closeAttemptFeedbackKey: U,
+      notifyCloseAttemptRejected: R,
+      disablePointerDismissal: g ?? !1,
+      setBackdropDismissalDisabled: u,
+      setBackgroundInteractive: ae,
+      canPeek: Y,
+      setCanPeek: o,
+      canRenderHandle: L,
+      setCanRenderHandle: W,
+      popupSnapLayoutVersion: _,
+      notifyPopupSnapLayoutChange: te,
+      headerHeight: G.height,
+      footerHeight: E.height,
+      setHeaderNode: G.setNode,
+      setFooterNode: E.setNode,
+      bodyNode: re,
+      setBodyNode: pe,
+      scrollState: j,
+      setScrollState: P
     }),
     [
-      te,
-      a,
-      B,
-      j,
-      E,
-      z,
-      M.height,
-      M.setNode,
-      x.height,
-      x.setNode,
+      re,
+      Y,
+      L,
       A,
-      oe,
-      S,
-      O,
-      q,
-      _,
+      p,
       U,
-      f,
-      N,
-      I
+      E.height,
+      E.setNode,
+      G.height,
+      G.setNode,
+      R,
+      te,
+      _,
+      K,
+      Q,
+      I,
+      j,
+      g,
+      b,
+      D
     ]
   );
-  return /* @__PURE__ */ c(Ae, { value: ie, children: /* @__PURE__ */ c(
-    $.Root,
+  return /* @__PURE__ */ s(pt, { value: ve, children: /* @__PURE__ */ s(
+    O.Root,
     {
-      open: O,
-      modal: G,
-      onOpenChange: ae,
-      disablePointerDismissal: se,
+      open: K,
+      modal: V,
+      onOpenChange: ie,
+      disablePointerDismissal: J,
       children: e
     }
   ) });
 }
-function Je({
+function It({
   className: e = "",
   children: t,
-  render: r,
-  nativeButton: s
+  render: n,
+  nativeButton: a
 }) {
-  return r ? /* @__PURE__ */ c(
-    $.Trigger,
+  return n ? /* @__PURE__ */ s(
+    O.Trigger,
     {
-      render: r,
-      nativeButton: s,
+      render: n,
+      nativeButton: a,
       "data-oc-component": "modal-trigger",
       children: t
     }
-  ) : /* @__PURE__ */ c(
-    $.Trigger,
+  ) : /* @__PURE__ */ s(
+    O.Trigger,
     {
-      className: R(n.trigger, e),
-      nativeButton: s,
+      className: B(i.trigger, e),
+      nativeButton: a,
       "data-oc-component": "modal-trigger",
       children: t
     }
   );
 }
-function Qe({
+function Vt({
   className: e = "",
   children: t,
-  variant: r = "adaptive",
-  size: s = "medium",
-  resize: l = "content",
-  backdrop: b = "auto",
-  drag: u = "content",
-  peekable: y = !1,
-  snapPoints: g,
-  defaultSnapPoint: k,
-  snapPositions: f,
-  defaultSnapPosition: p,
-  initialFocus: w,
-  peekHeight: i,
-  closeThreshold: H,
-  scrollLockTimeout: V,
-  container: O,
-  style: q,
-  ...ce
+  variant: n = "adaptive",
+  size: a = "medium",
+  resize: d = "content",
+  contentTransition: w = "auto",
+  backdrop: f = "auto",
+  drag: h = "content",
+  peekable: N = !1,
+  snapPoints: C,
+  defaultSnapPoint: g,
+  snapPositions: m,
+  defaultSnapPosition: F,
+  initialFocus: l,
+  peekHeight: T,
+  closeThreshold: q,
+  scrollLockTimeout: K,
+  container: Q,
+  style: X,
+  ...Y
 }) {
-  const a = re("ModalContent"), { setCanPeek: K, setCanRenderHandle: B, setPlacement: J } = a, d = De(r), D = Y(null), h = Y(null), ee = Y(null), z = Y(null), Q = Y(0), S = Y(null), C = Y(null), [te, W] = T(), U = u === "handle" || u === "content", F = d === "popup" && U && !!f?.length, N = Ue({
-    backdrop: b,
-    canSnapPopup: F,
-    placement: d,
-    presentationState: a.presentationState
-  }), I = F && N === "hidden", x = (d === "bottom" || F) && U, M = d === "bottom" && x && y, X = M && i !== void 0 ? i : a.headerHeight > 0 ? a.headerHeight : void 0, v = be(() => {
-    if (!(!g?.length || typeof window > "u"))
-      return je({
-        snapPoints: g,
-        defaultSnapPoint: k,
-        viewportHeight: window.innerHeight
+  const o = de("ModalContent"), { setCanPeek: L, setCanRenderHandle: W, setPlacement: z } = o, u = ht(n), v = $(null), ae = $(null), U = $(null), Z = $(null), [_, ue] = S(null), [re, pe] = S(
+    null
+  ), j = $(0), P = $(null), b = $(null), D = $(null), [G, E] = S(), ee = h === "handle" || h === "content", M = u === "popup" && ee && !!m?.length, p = Dt({
+    backdrop: f,
+    canSnapPopup: M,
+    placement: u,
+    presentationState: o.presentationState
+  }), [R, te] = S(() => ({
+    resolvedBackdrop: p,
+    exiting: !1
+  })), A = Te(
+    () => Ae(R, p),
+    [R, p]
+  ), I = A.exiting, ie = M && p === "hidden", V = (u === "bottom" || M) && ee, J = u === "bottom" && V && N, ve = J && T !== void 0 ? T : o.headerHeight > 0 ? o.headerHeight : void 0, r = u === "bottom" && d !== "fixed", y = Mt(
+    !!C?.length || r
+  ), Ne = Te(() => {
+    if (!(!C?.length || y <= 0))
+      return yt({
+        snapPoints: C,
+        defaultSnapPoint: g,
+        viewportHeight: y
       });
-  }, [k, g]), E = Ie(a.open);
-  ne(() => {
-    J(d);
-  }, [d, J]), ne(() => {
-    a.open || (z.current = null);
-  }, [a.open]), ne(() => (K(M), () => K(!1)), [M, K]), ne(() => (B(x), () => B(!1)), [x, B]);
-  const A = Be({
-    enabled: u !== !1,
-    drag: u,
-    open: a.open,
-    placement: d,
-    surfaceMotionRef: D,
-    backdropRef: ee,
-    bodyNode: a.bodyNode,
-    snapHeights: v?.snapHeights,
-    peekHeight: M ? i : void 0,
-    peekFallback: M ? "header" : void 0,
-    presentationState: a.presentationState,
-    setPresentationState: a.setPresentationState,
-    requestClose: a.requestClose,
-    canCloseAttempt: a.canCloseAttempt,
-    dismissible: !a.disablePointerDismissal && a.canDismissByBehavior({ reason: "drag-dismiss" }),
-    visibleTranslate: v?.visibleTranslate,
-    snapPositions: F ? f : void 0,
-    defaultSnapPosition: p,
-    closeThreshold: H,
-    scrollLockTimeout: V,
-    popupSnapLayoutVersion: a.popupSnapLayoutVersion
-  }), oe = P(
-    (o) => {
-      D.current = o, o && a.open && F && z.current !== o && (qe({
-        defaultSnapPosition: p,
-        node: o,
-        snapPositions: f
-      }), z.current = o);
+  }, [g, C, y]), x = u === "bottom" ? Ne : void 0, qe = gt(o.open), [be, Ke] = S(0), ye = $(!1), We = x !== void 0 && r, Ce = r && be > 0 ? be : void 0, ce = x ? We && Ce !== void 0 ? Ce : x.sheetHeight : Ce, Ue = x && ce !== void 0 ? Math.max(0, ce - x.defaultHeight) : void 0, _e = ce !== void 0, we = wt({
+    contentTransition: w,
+    placement: u,
+    resize: d
+  }), Ge = we === "surface" ? "auto" : "none", Je = we === "sheet" ? "auto" : "none", Re = o.bodyNode;
+  mt({
+    enabled: o.open && we === "surface",
+    node: re
+  }), ge(() => {
+    if (!r) {
+      ye.current = !1;
+      return;
+    }
+    const c = Re?.firstElementChild;
+    if (!c) {
+      ye.current = !1;
+      return;
+    }
+    const H = () => {
+      const le = c.getBoundingClientRect().height, he = vt({
+        contentHeight: le,
+        maxHeight: Ct(_),
+        snapHeight: x?.sheetHeight
+      }), De = Math.abs(be - he) > 0.5;
+      ye.current = De, De && Ke(he);
+    };
+    if (H(), typeof ResizeObserver > "u") return;
+    const fe = new ResizeObserver(H);
+    return fe.observe(c), () => fe.disconnect();
+  }, [
+    Re,
+    r,
+    x?.sheetHeight,
+    be,
+    y,
+    _
+  ]), oe(() => {
+    z(u);
+  }, [u, z]), oe(() => {
+    o.open || (Z.current = null);
+  }, [o.open]), oe(() => (L(J), () => L(!1)), [J, L]), oe(() => (W(V), () => W(!1)), [V, W]);
+  const Qe = k(
+    () => ye.current,
+    []
+  ), Xe = ft({
+    enabled: h !== !1,
+    drag: h,
+    open: o.open,
+    placement: u,
+    surfaceMotionRef: v,
+    surfaceMotionNode: _,
+    backdropRef: U,
+    bodyNode: o.bodyNode,
+    snapHeights: x?.snapHeights,
+    sheetHeight: ce,
+    peekHeight: J ? T : void 0,
+    peekFallback: J ? "header" : void 0,
+    presentationState: o.presentationState,
+    setPresentationState: o.setPresentationState,
+    requestClose: o.requestClose,
+    canCloseAttempt: o.canCloseAttempt,
+    dismissible: !o.disablePointerDismissal && o.canDismissByBehavior({ reason: "drag-dismiss" }),
+    preserveShadowOpacity: p === "hidden",
+    visibleTranslate: Ue,
+    shouldDeferBottomSettle: Qe,
+    snapPositions: M ? m : void 0,
+    defaultSnapPosition: F,
+    closeThreshold: q,
+    scrollLockTimeout: K,
+    popupSnapLayoutVersion: o.popupSnapLayoutVersion
+  }), Ye = k(
+    (c) => {
+      v.current = c, ue(c), c && o.open && M && Z.current !== c && (Pt({
+        defaultSnapPosition: F,
+        node: c,
+        snapPositions: m
+      }), Z.current = c);
     },
-    [F, a.open, p, f]
-  );
-  ne(() => {
-    const o = a.closeAttemptFeedbackKey;
-    if (o === 0 || d !== "popup" || Q.current === o) {
-      Q.current = o, W(void 0);
+    [M, o.open, F, m]
+  ), Ze = k((c) => {
+    ae.current = c, pe(c);
+  }, []);
+  oe(() => {
+    const c = o.closeAttemptFeedbackKey;
+    if (c === 0 || u !== "popup" || j.current === c) {
+      j.current = c, E(void 0);
       return;
     }
-    const m = h.current;
-    if (!m) return;
-    Q.current = o, S.current !== null && window.cancelAnimationFrame(S.current), C.current !== null && window.clearTimeout(C.current), W(void 0);
-    const le = () => {
-      W(void 0), C.current = null;
-    }, L = (me) => {
-      me.target === m && me.animationName === "oc-modal-reject-shake" && (m.removeEventListener("animationend", L), C.current !== null && window.clearTimeout(C.current), le());
+    const H = ae.current;
+    if (!H) return;
+    j.current = c, P.current !== null && window.cancelAnimationFrame(P.current), b.current !== null && window.clearTimeout(b.current), E(void 0);
+    const fe = () => {
+      E(void 0), b.current = null;
+    }, le = (he) => {
+      he.target === H && he.animationName === "oc-modal-reject-shake" && (H.removeEventListener("animationend", le), b.current !== null && window.clearTimeout(b.current), fe());
     };
-    return m.addEventListener("animationend", L), S.current = window.requestAnimationFrame(() => {
-      S.current = null, W("reject"), S.current = window.requestAnimationFrame(() => {
-        S.current = null, C.current = window.setTimeout(() => {
-          m.removeEventListener("animationend", L), le();
-        }, Oe(m));
+    return H.addEventListener("animationend", le), P.current = window.requestAnimationFrame(() => {
+      P.current = null, E("reject"), P.current = window.requestAnimationFrame(() => {
+        P.current = null, b.current = window.setTimeout(() => {
+          H.removeEventListener("animationend", le), fe();
+        }, Tt(H));
       });
     }), () => {
-      m.removeEventListener("animationend", L), S.current !== null && (window.cancelAnimationFrame(S.current), S.current = null), C.current !== null && (window.clearTimeout(C.current), C.current = null);
+      H.removeEventListener("animationend", le), P.current !== null && (window.cancelAnimationFrame(P.current), P.current = null), b.current !== null && (window.clearTimeout(b.current), b.current = null);
     };
-  }, [a.closeAttemptFeedbackKey, d]);
-  const j = $e(q), _ = {
-    ...j,
-    ...a.headerHeight > 0 ? { "--oc-modal-header-height": `${a.headerHeight}px` } : {},
-    ...a.footerHeight > 0 ? { "--oc-modal-footer-height": `${a.footerHeight}px` } : {},
-    ...X !== void 0 ? { "--oc-modal-peek-height": `${X}px` } : {},
-    ...v?.sheetHeight !== void 0 ? { "--oc-modal-sheet-height": `${v.sheetHeight}px` } : {},
-    ...v?.visibleTranslate !== void 0 ? {
-      "--oc-modal-translate-y": `${v.visibleTranslate}px`
-    } : {}
-  }, ae = {
+  }, [o.closeAttemptFeedbackKey, u]);
+  const Be = kt(X), et = {
+    ...Be,
+    ...o.headerHeight > 0 ? { "--oc-modal-header-height": `${o.headerHeight}px` } : {},
+    ...o.footerHeight > 0 ? { "--oc-modal-footer-height": `${o.footerHeight}px` } : {},
+    ...ve !== void 0 ? { "--oc-modal-peek-height": `${ve}px` } : {},
+    ...ce !== void 0 ? { "--oc-modal-sheet-height": `${ce}px` } : {}
+    // `--oc-modal-translate-y` and the inline `height` are owned imperatively
+    // by the drag hook: content-size transitions pin the surface to a canvas
+    // height and compensate the translate in the same frame. Rendering the
+    // height here would commit the new size before that compensation runs and
+    // make the sheet jump a frame early. The managed sizing CSS rule renders
+    // the resting height from `--oc-modal-sheet-height`.
+  }, Fe = {
     // Each modal reserves one backdrop slot and one viewport slot.
-    "--oc-modal-stack-offset": E * 2
-  }, G = w === "content" ? D : w, { setBackdropDismissalDisabled: se, setBackgroundInteractive: ie } = a;
-  return Ce(() => (se(N === "hidden"), ie(I), () => {
-    se(!1), ie(!1);
-  }), [
-    I,
-    N,
+    "--oc-modal-stack-offset": qe * 2
+  }, tt = o.headerHeight > 0 ? {
+    ...X,
+    "--oc-modal-header-height": `${o.headerHeight}px`
+  } : X, ot = l === "content" ? v : l, { setBackdropDismissalDisabled: Me, setBackgroundInteractive: He } = o, nt = p !== "hidden" || I;
+  ge(() => {
+    A !== R && te(A);
+  }, [R, A]);
+  const se = k(() => {
+    D.current !== null && (window.clearTimeout(D.current), D.current = null);
+  }, []), me = k(() => {
+    p === "hidden" && (se(), te((c) => {
+      const H = Ae(
+        c,
+        p
+      );
+      return H.resolvedBackdrop !== "hidden" || !H.exiting ? H : {
+        ...H,
+        exiting: !1
+      };
+    }));
+  }, [se, p]);
+  return oe(
+    () => () => {
+      se();
+    },
+    [se]
+  ), ge(() => {
+    if (!I || p !== "hidden") return;
+    const c = U.current;
+    if (!c) {
+      D.current = window.setTimeout(me, 0);
+      return;
+    }
+    se(), D.current = window.setTimeout(
+      me,
+      xt(c)
+    );
+  }, [
     se,
-    ie
-  ]), /* @__PURE__ */ Z($.Portal, { container: O, children: [
-    /* @__PURE__ */ c(
-      $.Backdrop,
+    me,
+    I,
+    p
+  ]), ge(() => (Me(p === "hidden"), He(ie), () => {
+    Me(!1), He(!1);
+  }), [
+    ie,
+    p,
+    Me,
+    He
+  ]), /* @__PURE__ */ ne(O.Portal, { container: Q, children: [
+    nt ? /* @__PURE__ */ s(
+      O.Backdrop,
       {
-        ref: ee,
-        className: n.backdrop,
+        ref: U,
+        className: i.backdrop,
         "data-oc-part": "backdrop",
         "data-oc-component": "modal-backdrop",
-        "data-oc-modal-backdrop": N,
-        "data-oc-modal-placement": d,
-        "data-oc-modal-presentation-state": a.presentationState,
-        style: ae,
-        onClick: (o) => {
-          if (N === "hidden") {
-            o.stopPropagation();
-            return;
-          }
-          if (a.disablePointerDismissal) {
-            a.notifyCloseAttemptRejected({ reason: "backdrop-press" });
+        "data-oc-modal-backdrop": p,
+        "data-oc-modal-placement": u,
+        "data-oc-modal-presentation-state": o.presentationState,
+        style: Fe,
+        onTransitionCancel: (c) => {
+          c.currentTarget === c.target && c.propertyName === "opacity" && me();
+        },
+        onTransitionEnd: (c) => {
+          c.currentTarget === c.target && c.propertyName === "opacity" && me();
+        },
+        onClick: () => {
+          if (o.disablePointerDismissal) {
+            o.notifyCloseAttemptRejected({ reason: "backdrop-press" });
             return;
           }
-          if (!a.canDismissByBehavior({ reason: "backdrop-press" })) {
-            a.notifyCloseAttemptRejected({ reason: "backdrop-press" });
+          if (!o.canDismissByBehavior({ reason: "backdrop-press" })) {
+            o.notifyCloseAttemptRejected({ reason: "backdrop-press" });
             return;
           }
-          if (d === "bottom" && M) {
-            a.presentationState === "visible" && a.setPresentationState("peeked");
+          if (u === "bottom" && J) {
+            o.presentationState === "visible" && o.setPresentationState("peeked");
             return;
           }
-          a.requestClose({ reason: "backdrop-press" });
+          o.requestClose({ reason: "backdrop-press" });
         }
       }
-    ),
-    /* @__PURE__ */ c(
-      $.Viewport,
+    ) : null,
+    /* @__PURE__ */ s(
+      O.Viewport,
       {
-        className: n.viewport,
+        className: i.viewport,
         "data-oc-part": "viewport",
         "data-oc-component": "modal-viewport",
-        "data-oc-modal-placement": d,
-        style: ae,
-        children: /* @__PURE__ */ Z(
-          $.Popup,
+        "data-oc-modal-placement": u,
+        style: Fe,
+        children: /* @__PURE__ */ ne(
+          O.Popup,
           {
-            ...ce,
-            ...A,
-            ref: oe,
-            initialFocus: G,
-            className: R(
-              n.surfaceMotion,
-              n[s],
+            ...Y,
+            ...Xe,
+            ref: Ye,
+            initialFocus: ot,
+            className: B(
+              i.surfaceMotion,
+              i[a],
               e
             ),
             "data-oc-part": "surface-motion",
             "data-oc-component": "modal-content",
-            "data-oc-modal-backdrop": N,
-            "data-oc-variant": r,
-            "data-oc-size": s,
-            "data-oc-resize": l,
-            "data-oc-modal-feedback": d === "popup" ? te : void 0,
-            "data-oc-modal-placement": d,
-            "data-oc-modal-snapping": v || F ? "true" : void 0,
-            style: _,
+            "data-oc-modal-backdrop": p,
+            "data-oc-variant": n,
+            "data-oc-size": a,
+            "data-oc-resize": d,
+            "data-oc-modal-feedback": u === "popup" ? G : void 0,
+            "data-oc-modal-placement": u,
+            "data-oc-modal-snapping": x || M ? "true" : void 0,
+            "data-oc-modal-sheet-sizing": _e ? "managed" : void 0,
+            "data-oc-modal-sheet-transition": Je === "auto" ? "auto" : void 0,
+            style: et,
             children: [
-              d === "bottom" ? /* @__PURE__ */ c(
+              u === "bottom" ? /* @__PURE__ */ s(
                 "div",
                 {
                   "aria-hidden": "true",
-                  className: R(
-                    n.bottomFill,
-                    n[s],
+                  className: B(
+                    i.bottomFill,
+                    i[a],
                     e
                   ),
                   "data-oc-part": "bottom-fill",
                   "data-oc-component": "modal-bottom-fill",
-                  "data-oc-size": s,
-                  style: j
+                  "data-oc-size": a,
+                  style: Be
                 }
               ) : null,
-              /* @__PURE__ */ c(
+              /* @__PURE__ */ s(
                 "div",
                 {
-                  ref: h,
-                  className: R(
-                    n.surface,
-                    n[l],
+                  ref: Ze,
+                  className: B(
+                    i.surface,
+                    i[d],
                     e
                   ),
                   "data-oc-part": "surface",
-                  "data-oc-variant": r,
-                  "data-oc-size": s,
-                  "data-oc-resize": l,
-                  "data-oc-modal-placement": d,
-                  "data-oc-scrollable": a.scrollState.canScroll ? "true" : "false",
-                  style: q,
+                  "data-oc-variant": n,
+                  "data-oc-size": a,
+                  "data-oc-resize": d,
+                  "data-oc-content-transition": Ge === "auto" ? "auto" : void 0,
+                  "data-oc-modal-placement": u,
+                  "data-oc-scrollable": o.scrollState.canScroll ? "true" : "false",
+                  style: tt,
                   children: t
                 }
               )
@@ -507,59 +658,59 @@ function Qe({
     )
   ] });
 }
-function Xe({
+function Lt({
   className: e = "",
   title: t,
-  children: r,
-  leadingContent: s,
-  trailingContent: l,
-  closeLabel: b = "닫기",
-  closeButton: u = !0,
-  handle: y = !0,
-  ref: g,
-  ...k
+  children: n,
+  leadingContent: a,
+  trailingContent: d,
+  closeLabel: w = "닫기",
+  closeButton: f = !0,
+  handle: h = !0,
+  ref: N,
+  ...C
 }) {
-  const f = re("ModalHeader"), { setHeaderNode: p, scrollState: w } = f, i = P(
-    (V) => {
-      p(V), pe(g, V);
+  const g = de("ModalHeader"), { setHeaderNode: m, scrollState: F } = g, l = k(
+    (q) => {
+      m(q), Pe(N, q);
     },
-    [g, p]
-  ), H = Se(s);
-  return /* @__PURE__ */ Z(
-    He,
+    [N, m]
+  ), T = $e(a);
+  return /* @__PURE__ */ ne(
+    ct,
     {
-      ...k,
+      ...C,
       as: "header",
-      ref: i,
+      ref: l,
       backdrop: "compact",
-      className: R(n.header, e),
+      className: B(i.header, e),
       backColor: "var(--oc-color-theme-background-elevated-normal)",
       frontColor: "transparent",
       "data-oc-part": "header",
       "data-oc-component": "modal-header",
       variant: "strong",
-      "data-oc-sticky": w.scrolledFromTop ? "true" : "false",
+      "data-oc-sticky": F.scrolledFromTop ? "true" : "false",
       children: [
-        y && f.canRenderHandle ? /* @__PURE__ */ c(
+        h && g.canRenderHandle ? /* @__PURE__ */ s(
           "div",
           {
             "aria-hidden": "true",
-            className: n.handle,
+            className: i.handle,
             "data-oc-part": "handle"
           }
         ) : null,
-        /* @__PURE__ */ Z(
+        /* @__PURE__ */ ne(
           "div",
           {
-            className: n.headerInner,
-            "data-oc-has-leading": H ? "true" : "false",
+            className: i.headerInner,
+            "data-oc-has-leading": T ? "true" : "false",
             "data-oc-part": "header-inner",
             children: [
-              H ? /* @__PURE__ */ c("div", { className: n.headerLeading, "data-oc-part": "header-leading", children: s }) : null,
-              /* @__PURE__ */ c("div", { className: n.headerTitle, "data-oc-part": "header-title", children: t ? /* @__PURE__ */ c($.Title, { children: t }) : r }),
-              /* @__PURE__ */ Z("div", { className: n.headerTrailing, "data-oc-part": "header-trailing", children: [
-                l,
-                u ? /* @__PURE__ */ c(Ne, { label: b }) : null
+              T ? /* @__PURE__ */ s("div", { className: i.headerLeading, "data-oc-part": "header-leading", children: a }) : null,
+              /* @__PURE__ */ s("div", { className: i.headerTitle, "data-oc-part": "header-title", children: t ? /* @__PURE__ */ s(O.Title, { children: t }) : n }),
+              /* @__PURE__ */ ne("div", { className: i.headerTrailing, "data-oc-part": "header-trailing", children: [
+                d,
+                f ? /* @__PURE__ */ s(Oe, { label: w }) : null
               ] })
             ]
           }
@@ -568,158 +719,158 @@ function Xe({
     }
   );
 }
-function Ye({
+function zt({
   className: e = "",
   title: t,
-  children: r,
-  expanded: s,
-  defaultExpanded: l = !0,
-  onExpandedChange: b,
-  disabled: u = !1,
-  forceMount: y = !0,
-  handle: g = !0,
-  headingLevel: k = 2,
-  indicator: f,
-  titleAsDialogTitle: p = !0,
-  navigationProps: w,
-  panelProps: i,
-  panelContentProps: H,
-  ref: V,
-  style: O,
-  ...q
+  children: n,
+  expanded: a,
+  defaultExpanded: d = !0,
+  onExpandedChange: w,
+  disabled: f = !1,
+  forceMount: h = !0,
+  handle: N = !0,
+  headingLevel: C = 2,
+  indicator: g,
+  titleAsDialogTitle: m = !0,
+  navigationProps: F,
+  panelProps: l,
+  panelContentProps: T,
+  ref: q,
+  style: K,
+  ...Q
 }) {
-  const ce = re("ModalNavigationSection"), {
-    canRenderHandle: a,
-    notifyPopupSnapLayoutChange: K,
-    placement: B
-  } = ce, { height: J, setNode: d } = ue(), D = Me(), [h, ee] = ke({
-    value: s,
-    defaultValue: l,
-    onChange: b
-  }), [z, Q] = T(
-    h ? "open" : "closed"
-  ), S = `h${Ge(k) ? k : 2}`, {
-    className: C = "",
-    id: te,
-    onClick: W,
-    ...U
-  } = w ?? {}, {
-    className: F = "",
-    id: N,
-    role: I,
-    ...x
-  } = i ?? {}, { className: M = "", ...X } = H ?? {}, v = te ?? `${D}-navigation`, E = N ?? `${D}-panel`, A = `${D}-dialog-title`, oe = Se(t), j = g && a, _ = J > 0 ? {
-    ...O,
-    "--oc-modal-navigation-block-size": `${J}px`
-  } : O, ae = P(
-    (G) => {
-      Q(G), B === "popup" && K();
+  const X = de("ModalNavigationSection"), {
+    canRenderHandle: Y,
+    notifyPopupSnapLayoutChange: o,
+    placement: L
+  } = X, { height: W, setNode: z } = xe(), u = at(), [v, ae] = je({
+    value: a,
+    defaultValue: d,
+    onChange: w
+  }), [U, Z] = S(
+    v ? "open" : "closed"
+  ), _ = `h${At(C) ? C : 2}`, {
+    className: ue = "",
+    id: re,
+    onClick: pe,
+    ...j
+  } = F ?? {}, {
+    className: P = "",
+    id: b,
+    role: D,
+    ...G
+  } = l ?? {}, { className: E = "", ...ee } = T ?? {}, M = re ?? `${u}-navigation`, p = b ?? `${u}-panel`, R = `${u}-dialog-title`, te = $e(t), A = N && Y, I = W > 0 ? {
+    ...K,
+    "--oc-modal-navigation-block-size": `${W}px`
+  } : K, ie = k(
+    (V) => {
+      Z(V), L === "popup" && o();
     },
-    [K, B]
+    [o, L]
   );
-  return /* @__PURE__ */ Z(
+  return /* @__PURE__ */ ne(
     "section",
     {
-      ref: V,
-      className: R(n.navigationSection, e),
-      style: _,
-      ...q,
+      ref: q,
+      className: B(i.navigationSection, e),
+      style: I,
+      ...Q,
       "data-oc-component": "modal-navigation-section",
-      "data-oc-motion-state": z,
-      "data-oc-state": h ? "open" : "closed",
+      "data-oc-motion-state": U,
+      "data-oc-state": v ? "open" : "closed",
       children: [
-        p && oe ? /* @__PURE__ */ c(
-          $.Title,
+        m && te ? /* @__PURE__ */ s(
+          O.Title,
           {
-            className: n.navigationDialogTitle,
-            id: A,
+            className: i.navigationDialogTitle,
+            id: R,
             children: t
           }
         ) : null,
-        j ? /* @__PURE__ */ c(
+        A ? /* @__PURE__ */ s(
           "div",
           {
             "aria-hidden": "true",
-            className: n.handle,
+            className: i.handle,
             "data-oc-part": "handle"
           }
         ) : null,
-        /* @__PURE__ */ c(S, { className: n.navigationHeading, "data-oc-part": "heading", children: /* @__PURE__ */ Z(
+        /* @__PURE__ */ s(_, { className: i.navigationHeading, "data-oc-part": "heading", children: /* @__PURE__ */ ne(
           "button",
           {
-            ...U,
-            ref: d,
-            id: v,
-            className: R(n.navigation, C),
+            ...j,
+            ref: z,
+            id: M,
+            className: B(i.navigation, ue),
             type: "button",
-            disabled: u,
-            "aria-disabled": u ? "true" : U["aria-disabled"],
-            "aria-expanded": h,
-            "aria-controls": E,
-            onClick: (G) => {
-              W?.(G), !(G.defaultPrevented || u) && ee(!h);
+            disabled: f,
+            "aria-disabled": f ? "true" : j["aria-disabled"],
+            "aria-expanded": v,
+            "aria-controls": p,
+            onClick: (V) => {
+              pe?.(V), !(V.defaultPrevented || f) && ae(!v);
             },
             "data-oc-component": "modal-navigation",
             "data-oc-part": "navigation",
-            "data-oc-state": h ? "open" : "closed",
+            "data-oc-state": v ? "open" : "closed",
             children: [
-              /* @__PURE__ */ c("span", { className: n.navigationTitle, "data-oc-part": "title", children: t }),
-              f === void 0 ? /* @__PURE__ */ c(
-                Fe,
+              /* @__PURE__ */ s("span", { className: i.navigationTitle, "data-oc-part": "title", children: t }),
+              g === void 0 ? /* @__PURE__ */ s(
+                dt,
                 {
-                  className: n.navigationIndicator,
-                  open: h
+                  className: i.navigationIndicator,
+                  open: v
                 }
-              ) : f ? /* @__PURE__ */ c(
+              ) : g ? /* @__PURE__ */ s(
                 "span",
                 {
-                  className: n.navigationIndicator,
+                  className: i.navigationIndicator,
                   "data-oc-part": "indicator",
-                  "data-oc-state": h ? "open" : "closed",
-                  children: /* @__PURE__ */ c("span", { "data-oc-part": "indicator-frame", children: xe(f) })
+                  "data-oc-state": v ? "open" : "closed",
+                  children: /* @__PURE__ */ s("span", { "data-oc-part": "indicator-frame", children: ut(g) })
                 }
               ) : null,
-              u ? null : /* @__PURE__ */ c(we, { variant: "light" })
+              f ? null : /* @__PURE__ */ s(lt, { variant: "light" })
             ]
           }
         ) }),
-        /* @__PURE__ */ c(
-          Re,
+        /* @__PURE__ */ s(
+          it,
           {
-            className: R(n.navigationPanel, F),
-            open: h,
-            forceMount: y,
+            className: B(i.navigationPanel, P),
+            open: v,
+            forceMount: h,
             intent: "expand",
             measureBlockSize: "rendered",
-            onMotionStateChange: ae,
+            onMotionStateChange: ie,
             contentProps: {
-              className: n.navigationPanelFrame,
+              className: i.navigationPanelFrame,
               "data-oc-part": "panel-inner"
             },
-            ...x,
-            "aria-hidden": h ? void 0 : !0,
-            "aria-labelledby": v,
-            id: E,
-            inert: h ? void 0 : !0,
-            role: I ?? "region",
+            ...G,
+            "aria-hidden": v ? void 0 : !0,
+            "aria-labelledby": M,
+            id: p,
+            inert: v ? void 0 : !0,
+            role: D ?? "region",
             "data-oc-component": "modal-navigation-panel",
-            "data-oc-state": h ? "open" : "closed",
-            children: /* @__PURE__ */ c(
-              ve,
+            "data-oc-state": v ? "open" : "closed",
+            children: /* @__PURE__ */ s(
+              Le,
               {
-                className: n.navigationPanelScroll,
+                className: i.navigationPanelScroll,
                 "data-oc-component": "modal-navigation-panel-scroll-area",
                 "data-oc-part": "panel-scroll-area",
-                children: /* @__PURE__ */ c(
-                  ye,
+                children: /* @__PURE__ */ s(
+                  ze,
                   {
-                    ...X,
-                    className: R(
-                      n.navigationPanelInner,
-                      M
+                    ...ee,
+                    className: B(
+                      i.navigationPanelInner,
+                      E
                     ),
                     "data-oc-component": "modal-navigation-panel-content",
-                    children: r
+                    children: n
                   }
                 )
               }
@@ -730,56 +881,56 @@ function Ye({
     }
   );
 }
-function Ze({
+function jt({
   className: e = "",
   children: t,
-  layout: r = "content",
-  containerClassName: s = "",
-  containerProps: l,
-  ref: b,
-  ...u
+  layout: n = "content",
+  containerClassName: a = "",
+  containerProps: d,
+  ref: w,
+  ...f
 }) {
-  const y = re("ModalBody"), { bodyNode: g, setBodyNode: k, setScrollState: f } = y, p = P(
-    (i) => {
-      f(Ee(i));
+  const h = de("ModalBody"), { bodyNode: N, setBodyNode: C, setScrollState: g } = h, m = k(
+    (l) => {
+      g(bt(l));
     },
-    [f]
-  ), w = P(
-    (i) => {
-      k(i), pe(b, i), p(i);
+    [g]
+  ), F = k(
+    (l) => {
+      C(l), Pe(w, l), m(l);
     },
-    [b, k, p]
+    [w, C, m]
   );
-  return ne(() => {
-    const i = g;
-    if (!i || (p(i), typeof ResizeObserver > "u")) return;
-    const H = new ResizeObserver(() => p(i));
-    return H.observe(i), i.firstElementChild && H.observe(i.firstElementChild), () => H.disconnect();
-  }, [g, p]), /* @__PURE__ */ c(
-    ve,
+  return oe(() => {
+    const l = N;
+    if (!l || (m(l), typeof ResizeObserver > "u")) return;
+    const T = new ResizeObserver(() => m(l));
+    return T.observe(l), l.firstElementChild && T.observe(l.firstElementChild), () => T.disconnect();
+  }, [N, m]), /* @__PURE__ */ s(
+    Le,
     {
-      ...u,
-      className: R(n.body, e),
+      ...f,
+      className: B(i.body, e),
       "data-oc-part": "body",
       "data-oc-component": "modal-body",
-      children: /* @__PURE__ */ c(
-        ye,
+      children: /* @__PURE__ */ s(
+        ze,
         {
-          ref: w,
-          className: n.bodyContainer,
+          ref: F,
+          className: i.bodyContainer,
           "data-oc-part": "body-container",
           "data-oc-component": "modal-body-container",
-          onScroll: (i) => {
-            l?.onScroll?.(i), p(i.currentTarget);
+          onScroll: (l) => {
+            d?.onScroll?.(l), m(l.currentTarget);
           },
-          children: /* @__PURE__ */ c(
+          children: /* @__PURE__ */ s(
             "section",
             {
-              ...l,
-              className: R(n.bodyContent, s),
+              ...d,
+              className: B(i.bodyContent, a),
               "data-oc-part": "body-content",
               "data-oc-component": "modal-body-content",
-              "data-oc-layout": r,
+              "data-oc-layout": n,
               children: t
             }
           )
@@ -788,77 +939,77 @@ function Ze({
     }
   );
 }
-function et({
+function $t({
   className: e = "",
   children: t,
-  background: r = "auto",
-  ref: s,
-  ...l
+  background: n = "auto",
+  ref: a,
+  ...d
 }) {
-  const b = re("ModalFooter"), { scrollState: u, setFooterNode: y } = b, g = P(
-    (p) => {
-      y(p), pe(s, p);
+  const w = de("ModalFooter"), { scrollState: f, setFooterNode: h } = w, N = k(
+    (m) => {
+      h(m), Pe(a, m);
     },
-    [s, y]
-  ), k = r === !0 || r === "auto" && u.canScroll && !u.scrolledToBottom;
-  return /* @__PURE__ */ c(
+    [a, h]
+  ), C = n === !0 || n === "auto" && f.canScroll && !f.scrolledToBottom;
+  return /* @__PURE__ */ s(
     "footer",
     {
-      ...l,
-      ref: g,
-      className: R(n.footer, e),
+      ...d,
+      ref: N,
+      className: B(i.footer, e),
       "data-oc-part": "footer",
       "data-oc-component": "modal-footer",
-      "data-oc-background": k ? "true" : "false",
+      "data-oc-background": C ? "true" : "false",
       children: t
     }
   );
 }
-function Ne({
+function Oe({
   className: e = "",
-  children: t = /* @__PURE__ */ c(Pe, {}),
-  label: r = "닫기",
-  size: s = 24,
-  disabled: l,
-  onClick: b,
-  ...u
+  children: t = /* @__PURE__ */ s(rt, {}),
+  label: n = "닫기",
+  size: a = 24,
+  disabled: d,
+  onClick: w,
+  ...f
 }) {
-  const y = re("ModalClose");
-  return /* @__PURE__ */ c(
-    Te,
+  const h = de("ModalClose");
+  return /* @__PURE__ */ s(
+    st,
     {
-      ...u,
-      className: R(n.close, e),
-      "aria-label": u["aria-label"] ?? r,
+      ...f,
+      className: B(i.close, e),
+      "aria-label": f["aria-label"] ?? n,
       "data-oc-part": "close",
       "data-oc-component": "modal-close",
-      disabled: l,
-      onClick: (g) => {
-        b?.(g), !g.defaultPrevented && !l && y.requestClose({ reason: "close-button" });
+      disabled: d,
+      onClick: (N) => {
+        w?.(N), !N.defaultPrevented && !d && h.requestClose({ reason: "close-button" });
       },
-      size: s,
+      size: a,
       children: t
     }
   );
 }
-const St = Object.assign(he, {
-  Root: he,
-  Trigger: Je,
-  Content: Qe,
-  Header: Xe,
-  NavigationSection: Ye,
-  Body: Ze,
-  Footer: et,
-  Close: Ne
+const uo = Object.assign(Ve, {
+  Root: Ve,
+  Trigger: It,
+  Content: Vt,
+  Header: Lt,
+  NavigationSection: zt,
+  Body: jt,
+  Footer: $t,
+  Close: Oe
 });
 export {
-  Ze as ModalBody,
-  Ne as ModalClose,
-  Qe as ModalContent,
-  et as ModalFooter,
-  Xe as ModalHeader,
-  Ye as ModalNavigationSection,
-  he as ModalRoot,
-  Je as ModalTrigger,
-  St as default
+  jt as ModalBody,
+  Oe as ModalClose,
+  Vt as ModalContent,
+  $t as ModalFooter,
+  Lt as ModalHeader,
+  zt as ModalNavigationSection,
+  Ve as ModalRoot,
+  It as ModalTrigger,
+  uo as default
 };