@orioncactuscorp/ui 1.13.0 → 1.15.0

package/dist/components/Modal/Modal.js

@@ -1,34 +1,31 @@
 'use client';
-import { jsx as d, jsxs as ae } from "react/jsx-runtime";
-import { useCallback as k, useMemo as pe, useEffect as ne, useRef as j, useState as v, useLayoutEffect as ye, useId as ht } from "react";
-import { Dialog as $ } from "@base-ui-components/react/dialog";
-import gt from "@orioncactuscorp/icons/orioncactus/CloseThick";
-import { MotionExpand as vt } from "../../react/motion.js";
-import bt from "../Background/Background.js";
-import St from "../BackgroundIconButton/BackgroundIconButton.js";
-import yt from "../Interaction/Interaction.js";
-import { ScrollArea as Ue, ScrollAreaContainer as _e } from "../ScrollArea/ScrollArea.js";
-import { DisclosureIndicator as kt } from "../internal/DisclosureIndicator.js";
-import { normalizeSlotIcon as Nt } from "../internal/slot.js";
-import { mergeRefs as Fe } from "../../utils/mergeRefs.js";
-import { useModalContext as me, ModalProvider as Ct } from "./contexts.js";
-import { useControllableState as Ge } from "./useControllableState.js";
-import { useModalContentBlockTransition as wt } from "./useModalContentBlockTransition.js";
-import { useMeasuredElement as Pe } from "./useElementSize.js";
-import { useModalDrag as Ht } from "./useModalDrag.js";
+import { jsx as u, jsxs as _e } from "react/jsx-runtime";
+import { useRef as A, useState as l, useMemo as Y, useLayoutEffect as Me, useEffect as X, useCallback as v } from "react";
+import { Dialog as I } from "@base-ui-components/react/dialog";
+import ht from "@orioncactuscorp/icons/orioncactus/CloseThick";
+import gt from "../BackgroundIconButton/BackgroundIconButton.js";
+import { mergeRefs as De } from "../../utils/mergeRefs.js";
+import { useModalContext as Z, ModalProvider as bt } from "./contexts.js";
+import { useControllableState as vt } from "./useControllableState.js";
+import { useModalContentBlockTransition as yt } from "./useModalContentBlockTransition.js";
+import { useMeasuredElement as We } from "./useElementSize.js";
+import { useModalDrag as St } from "./useModalDrag.js";
+import { useModalKeyboardAvoidance as kt } from "./useModalKeyboardAvoidance.js";
 import { useModalPlacement as Mt } from "./useModalPlacement.js";
-import { useModalStackDepth as xt } from "./useModalStackDepth.js";
-import { resolveContentSizedBottomSheetHeight as Tt } from "./bottomSheetGeometry.js";
-import { getModalScrollState as Je } from "./modalScrollArbitration.js";
-import { resolveModalSnapMetrics as Rt, resolveModalPopupSnapPositions as Bt } from "./snapPoints.js";
-import c from "./Modal.module.scss.js";
-function R(...e) {
-  return e.filter(Boolean).join(" ");
-}
-function Qe(e) {
-  return e != null && e !== !1 && e !== "";
-}
-function Pt(e) {
+import { useModalStackDepth as Ct } from "./useModalStackDepth.js";
+import { useModalViewportGeometry as Nt } from "./useModalViewportGeometry.js";
+import { resolveContentSizedBottomSheetHeight as wt } from "./bottomSheetGeometry.js";
+import { getModalScrollState as Ht } from "./modalScrollArbitration.js";
+import { resolveModalInitialFocus as xt } from "./initialFocus.js";
+import { useModalBodyScrollState as Tt, ModalBodyFrame as Rt, ModalSurfaceFrame as Ft, resolveModalFooterBackground as Bt, ModalFooterFrame as Pt, ModalHeaderFrame as At, ModalNavigationSectionFrame as Dt, mergeModalClassName as Et } from "../internal/ModalPresentation.js";
+import { OverlayPortalProvider as Vt } from "../internal/OverlayPortalContext.js";
+import { resolveModalSnapMetrics as jt, resolveModalPopupSnapPositions as It } from "./snapPoints.js";
+import N from "./Modal.module.scss.js";
+const $t = /* @__PURE__ */ new Set([
+  "oc-modal-reject-shake",
+  "oc-modal-reject-shake-replay"
+]), Ne = Et;
+function Lt(e) {
   if (!e) return;
   const t = Object.entries(e).filter(
     ([n]) => n.startsWith("--")
@@ -36,91 +33,73 @@ function Pt(e) {
   if (t.length !== 0)
     return Object.fromEntries(t);
 }
-function Oe() {
-  return typeof window > "u" ? 0 : window.visualViewport?.height ?? window.innerHeight;
-}
-function Ft(e) {
+function Ot(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 Dt(e) {
+function Kt(e) {
   if (!(!e || typeof window > "u"))
-    return Ft(window.getComputedStyle(e).maxHeight);
+    return Ot(window.getComputedStyle(e).maxHeight);
 }
-function Et({
+function qt({
   contentTransition: e,
   placement: t,
   resize: n
 }) {
   return e !== "auto" || n !== "content" || t === "full" ? "none" : t === "bottom" ? "sheet" : "surface";
 }
-function qe(e, t) {
+function ze(e, t) {
   return e.resolvedBackdrop === t ? e : {
     resolvedBackdrop: t,
     exiting: t === "hidden" && e.resolvedBackdrop !== "hidden"
   };
 }
-function At(e) {
-  const [t, n] = v(Oe);
-  return ye(() => {
-    if (!e || typeof window > "u") return;
-    const a = () => {
-      n(Oe());
-    };
-    return a(), window.addEventListener("resize", a), window.visualViewport?.addEventListener("resize", a), () => {
-      window.removeEventListener("resize", a), window.visualViewport?.removeEventListener(
-        "resize",
-        a
-      );
-    };
-  }, [e]), t;
-}
-function It(e) {
+function _t(e) {
   const t = e.trim();
   return t.endsWith("ms") ? Number.parseFloat(t) || 0 : t.endsWith("s") ? (Number.parseFloat(t) || 0) * 1e3 : 0;
 }
 function we(e) {
-  return e.split(",").reduce((t, n) => Math.max(t, It(n)), 0);
+  return e.split(",").reduce((t, n) => Math.max(t, _t(n)), 0);
 }
-function Vt(e) {
-  const t = window.getComputedStyle(e), n = we(t.animationDuration), a = we(t.animationDelay);
-  return n + a + 250;
+function Wt(e) {
+  const t = window.getComputedStyle(e), n = we(t.animationDuration), s = we(t.animationDelay);
+  return n + s + 250;
 }
-function Lt(e) {
-  const t = window.getComputedStyle(e), n = we(t.transitionDuration), a = we(t.transitionDelay);
-  return n + a + 250;
+function zt(e) {
+  const t = window.getComputedStyle(e), n = we(t.transitionDuration), s = we(t.transitionDelay);
+  return n + s + 250;
 }
-function zt({
+function Gt({
   defaultSnapPosition: e,
   node: t,
   snapPositions: n
 }) {
   if (!n?.length) return;
-  const a = Bt({
+  const s = It({
     defaultSnapPosition: e,
     snapPositions: n,
     surfaceMotion: t
   });
-  if (!a) return;
-  const l = a.defaultTarget;
+  if (!s) return;
+  const c = s.defaultTarget;
   t.style.setProperty(
     "--oc-modal-translate-x",
-    l.settledTranslate?.x ?? `${l.x}px`
+    c.settledTranslate?.x ?? `${c.x}px`
   ), t.style.setProperty(
     "--oc-modal-translate-y",
-    l.settledTranslate?.y ?? `${l.y}px`
+    c.settledTranslate?.y ?? `${c.y}px`
   );
 }
-function jt(e) {
+function Ut(e) {
   if (e && typeof e == "object" && "reason" in e && typeof e.reason == "string")
     return e.reason;
 }
 function Ce(e) {
   e && typeof e == "object" && "cancel" in e && typeof e.cancel == "function" && e.cancel();
 }
-function $t(e, t) {
+function Jt(e, t) {
   switch (t) {
     case "drag-dismiss":
       return e?.drag ?? "auto";
@@ -138,22 +117,22 @@ function $t(e, t) {
       return e?.programmatic ?? "auto";
   }
 }
-function Ot(e, t) {
+function Qt(e, t) {
   return t > 0 && (e === "drag-dismiss" || e === "backdrop-press" || e === "outside-press");
 }
-function Ke(e, t) {
+function Ge(e, t) {
   return t && (e === "backdrop-press" || e === "outside-press");
 }
-function qt({
+function Xt({
   backdrop: e,
   canSnapPopup: t,
   placement: n,
-  presentationState: a
+  presentationState: s
 }) {
-  return e !== "auto" ? e : n === "bottom" && a === "peeked" || t ? "hidden" : "visible";
+  return e !== "auto" ? e : n === "bottom" && s === "peeked" || t ? "hidden" : "visible";
 }
-function Kt(e) {
-  switch (jt(e)) {
+function Yt(e) {
+  switch (Ut(e)) {
     case "close-press":
       return "close-button";
     case "outside-press":
@@ -168,429 +147,460 @@ function Kt(e) {
       return "programmatic";
   }
 }
-function Wt(e) {
-  return e >= 2 && e <= 6;
-}
-function We({
+function Ue({
   children: e,
   open: t,
   defaultOpen: n,
-  modal: a = !0,
-  onOpenChange: l,
-  canCloseAttempt: N,
-  onCloseAttempt: m,
-  presentationState: C,
-  defaultPresentationState: f = "visible",
-  onPresentationStateChange: M,
-  disablePointerDismissal: h,
-  navigationDepth: S = 0,
-  dismissBehavior: x
+  modal: s = !0,
+  onOpenChange: c,
+  canCloseAttempt: h,
+  onCloseAttempt: y,
+  presentationState: S,
+  defaultPresentationState: p = "visible",
+  onPresentationStateChange: H,
+  disablePointerDismissal: w,
+  navigationDepth: B = 0,
+  dismissBehavior: M
 }) {
-  const p = t !== void 0, [T, G] = v(
+  const k = t !== void 0, [ee, $] = l(
     n ?? !1
-  ), O = p ? t : T, [J, fe] = v("bottom"), [A, re] = v(!1), [o, q] = v(!1), [F, K] = v(!1), [r, Q] = v(!1), [X, Y] = v(0), [W, Z] = v(0), [ie, he] = v(null), [ee, te] = v({
+  ), L = k ? t : ee, [te, He] = l("bottom"), [O, xe] = l(!1), [o, oe] = l(!1), [D, ue] = l(!1), [i, me] = l(!1), [pe, ne] = l(0), [W, E] = l(0), [fe, re] = l(null), [he, ge] = l(null), [be, ae] = l({
     canScroll: !1,
     scrolledFromTop: !1,
     scrolledToBottom: !0
-  }), [b, y] = Ge({
-    value: C,
-    defaultValue: f,
-    onChange: M
-  }), B = Pe(), U = Pe(), I = Math.max(0, S), D = k(
-    (s, g) => {
-      p || G(s), l?.(s, g);
+  }), [f, g] = vt({
+    value: S,
+    defaultValue: p,
+    onChange: H
+  }), x = We(), V = We(), se = Math.max(0, B), K = v(
+    (a, m) => {
+      k || $(a), c?.(a, m);
     },
-    [l, p]
-  ), w = k(
-    (s = { reason: "programmatic" }) => N?.(s) !== !1,
-    [N]
-  ), u = k(
-    (s = { reason: "programmatic" }) => {
-      Y((g) => g + 1);
+    [c, k]
+  ), C = v(
+    (a = { reason: "programmatic" }) => h?.(a) !== !1,
+    [h]
+  ), d = v(
+    (a = { reason: "programmatic" }) => {
+      ne((m) => m + 1);
     },
     []
-  ), V = k(() => {
-    Z((s) => s + 1);
-  }, []), L = k(
-    (s = { reason: "programmatic" }) => {
-      if (Ke(s.reason, F))
+  ), q = v(() => {
+    E((a) => a + 1);
+  }, []), _ = v(
+    (a = { reason: "programmatic" }) => {
+      if (Ge(a.reason, D))
         return !1;
-      const g = $t(x, s.reason);
-      return g === "allow" ? !0 : g === "block" ? !1 : !Ot(s.reason, I);
+      const m = Jt(M, a.reason);
+      return m === "allow" ? !0 : m === "block" ? !1 : !Qt(a.reason, se);
     },
-    [F, x, I]
-  ), P = k(
-    (s = { reason: "programmatic" }, g = {}) => {
-      const { commit: ce = !0, skipAttempt: se = !1 } = g;
-      return !se && Ke(s.reason, F) ? (Ce(s.eventDetails), !1) : !se && !L(s) || !se && !w(s) || !se && m?.(s) === !1 ? (Ce(s.eventDetails), u(s), !1) : (ce && D(!1, s.eventDetails), !0);
+    [D, M, se]
+  ), P = v(
+    (a = { reason: "programmatic" }, m = {}) => {
+      const { commit: ve = !0, skipAttempt: T = !1 } = m;
+      return !T && Ge(a.reason, D) ? (Ce(a.eventDetails), !1) : !T && !_(a) || !T && !C(a) || !T && y?.(a) === !1 ? (Ce(a.eventDetails), d(a), !1) : (ve && K(!1, a.eventDetails), !0);
     },
     [
-      w,
-      F,
-      L,
+      C,
       D,
-      u,
-      m
+      _,
+      K,
+      d,
+      y
     ]
-  ), oe = k(
-    (s, g) => {
-      if (s && b === "peeked" && y("visible"), !s) {
+  ), ce = v(
+    (a, m) => {
+      if (a && f === "peeked" && g("visible"), !a) {
         P({
-          reason: Kt(g),
-          eventDetails: g
+          reason: Yt(m),
+          eventDetails: m
         });
         return;
       }
-      D(s, g);
+      K(a, m);
     },
-    [D, b, P, y]
-  ), z = b === "visible" && !r ? a : !1, ge = h || J === "bottom" && (A || r), _ = pe(
+    [K, f, P, g]
+  ), z = f === "visible" && !i ? s : !1, ie = w || te === "bottom" && (O || i), j = Y(
     () => ({
-      open: O,
-      placement: J,
-      setPlacement: fe,
-      presentationState: b,
-      setPresentationState: y,
+      open: L,
+      modal: z,
+      placement: te,
+      setPlacement: He,
+      presentationState: f,
+      setPresentationState: g,
       requestClose: P,
-      canDismissByBehavior: L,
-      canCloseAttempt: w,
-      closeAttemptFeedbackKey: X,
-      notifyCloseAttemptRejected: u,
-      disablePointerDismissal: h ?? !1,
-      setBackdropDismissalDisabled: K,
-      setBackgroundInteractive: Q,
-      canPeek: A,
-      setCanPeek: re,
+      canDismissByBehavior: _,
+      canCloseAttempt: C,
+      closeAttemptFeedbackKey: pe,
+      notifyCloseAttemptRejected: d,
+      disablePointerDismissal: w ?? !1,
+      setBackdropDismissalDisabled: ue,
+      setBackgroundInteractive: me,
+      canPeek: O,
+      setCanPeek: xe,
       canRenderHandle: o,
-      setCanRenderHandle: q,
+      setCanRenderHandle: oe,
       popupSnapLayoutVersion: W,
-      notifyPopupSnapLayoutChange: V,
-      headerHeight: B.height,
-      footerHeight: U.height,
-      setHeaderNode: B.setNode,
-      setFooterNode: U.setNode,
-      bodyNode: ie,
-      setBodyNode: he,
-      scrollState: ee,
-      setScrollState: te
+      notifyPopupSnapLayoutChange: q,
+      headerHeight: x.height,
+      footerHeight: V.height,
+      setHeaderNode: x.setNode,
+      titleNode: he,
+      setTitleNode: ge,
+      setFooterNode: V.setNode,
+      bodyNode: fe,
+      setBodyNode: re,
+      scrollState: be,
+      setScrollState: ae
     }),
     [
-      ie,
-      A,
+      fe,
+      O,
       o,
-      L,
-      w,
-      X,
-      U.height,
-      U.setNode,
-      B.height,
-      B.setNode,
-      u,
-      V,
+      _,
+      C,
+      pe,
+      V.height,
+      V.setNode,
+      x.height,
+      x.setNode,
+      z,
+      d,
+      q,
       W,
-      O,
-      J,
+      L,
+      te,
       P,
-      ee,
-      h,
-      b,
-      y
+      be,
+      w,
+      f,
+      g,
+      ge,
+      he
     ]
   );
-  return /* @__PURE__ */ d(Ct, { value: _, children: /* @__PURE__ */ d(
-    $.Root,
+  return /* @__PURE__ */ u(bt, { value: j, children: /* @__PURE__ */ u(
+    I.Root,
     {
-      open: O,
+      open: L,
       modal: z,
-      onOpenChange: oe,
-      disablePointerDismissal: ge,
+      onOpenChange: ce,
+      disablePointerDismissal: ie,
       children: e
     }
   ) });
 }
-function Ut({
+function Zt({
   className: e = "",
   children: t,
   render: n,
-  nativeButton: a
+  nativeButton: s
 }) {
-  return n ? /* @__PURE__ */ d(
-    $.Trigger,
+  return n ? /* @__PURE__ */ u(
+    I.Trigger,
     {
       render: n,
-      nativeButton: a,
+      nativeButton: s,
       "data-oc-component": "modal-trigger",
       children: t
     }
-  ) : /* @__PURE__ */ d(
-    $.Trigger,
+  ) : /* @__PURE__ */ u(
+    I.Trigger,
     {
-      className: R(c.trigger, e),
-      nativeButton: a,
+      className: Ne(N.trigger, e),
+      nativeButton: s,
       "data-oc-component": "modal-trigger",
       children: t
     }
   );
 }
-function _t({
+function eo({
   className: e = "",
   children: t,
   variant: n = "adaptive",
-  size: a = "medium",
-  resize: l = "content",
-  contentTransition: N = "auto",
-  backdrop: m = "auto",
-  backdropFrom: C,
-  drag: f = "content",
-  peekable: M = !1,
-  snapPoints: h,
-  defaultSnapPoint: S,
-  snapPositions: x,
-  defaultSnapPosition: p,
-  initialFocus: T,
-  peekHeight: G,
-  closeThreshold: O,
-  scrollLockTimeout: J,
-  container: fe,
-  style: A,
-  ...re
+  size: s = "medium",
+  resize: c = "content",
+  contentTransition: h = "auto",
+  backdrop: y = "auto",
+  backdropFrom: S,
+  drag: p = "content",
+  peekable: H = !1,
+  snapPoints: w,
+  defaultSnapPoint: B,
+  snapPositions: M,
+  defaultSnapPosition: k,
+  initialFocus: ee,
+  peekHeight: $,
+  closeThreshold: L,
+  scrollLockTimeout: te,
+  container: He,
+  style: O,
+  ...xe
 }) {
-  const o = me("ModalContent"), { setCanPeek: q, setCanRenderHandle: F, setPlacement: K } = o, r = Mt(n), Q = j(null), X = j(null), Y = j(null), W = j(null), [Z, ie] = v(null), [he, ee] = v(
+  const o = Z("ModalContent"), { setCanPeek: oe, setCanRenderHandle: D, setPlacement: ue } = o, i = Mt(n), me = A(null), pe = A(null), ne = A(null), W = A(null), [E, fe] = l(null), [re, he] = l(
     null
-  ), te = j(0), b = j(null), y = j(null), B = j(null), [U, I] = v(), D = f === "handle" || f === "content", w = r === "popup" && D && !!x?.length, u = qt({
-    backdrop: m,
-    canSnapPopup: w,
-    placement: r,
+  ), [ge, be] = l(null), ae = A(0), f = A(null), g = A(null), x = A(null), [V, se] = l(), K = p === "handle" || p === "content", C = i === "popup" && K && !!M?.length, d = Xt({
+    backdrop: y,
+    canSnapPopup: C,
+    placement: i,
     presentationState: o.presentationState
-  }), [V, L] = v(() => ({
-    resolvedBackdrop: u,
+  }), [q, _] = l(() => ({
+    resolvedBackdrop: d,
     exiting: !1
-  })), P = pe(
-    () => qe(V, u),
-    [V, u]
-  ), oe = P.exiting, z = w && u === "hidden", ge = (r === "bottom" || w) && D, _ = r === "bottom" && ge && M, s = _ && G !== void 0 ? G : o.headerHeight > 0 ? o.headerHeight : void 0, g = r === "bottom" && l !== "fixed", ce = At(
-    !!h?.length || g
-  ), se = pe(() => {
-    if (!(!h?.length || ce <= 0))
-      return Rt({
-        snapPoints: h,
-        defaultSnapPoint: S,
-        backdropFrom: C,
-        viewportHeight: ce
+  })), P = Y(
+    () => ze(q, d),
+    [q, d]
+  ), ce = P.exiting, z = C && d === "hidden", ie = (i === "bottom" || C) && K, j = i === "bottom" && ie && H, a = j && $ !== void 0 ? $ : o.headerHeight > 0 ? o.headerHeight : void 0, m = i === "bottom" && c !== "fixed", ve = Nt(o.open), T = kt({
+    bodyNode: o.bodyNode,
+    enabled: o.open && i === "bottom",
+    footerHeight: o.footerHeight,
+    surfaceNode: E,
+    viewportGeometry: ve,
+    viewportNode: ge
+  }), G = i === "bottom" ? T.viewportGeometry : ve, ye = G?.height ?? 0, Qe = Y(() => {
+    if (!(!w?.length || ye <= 0))
+      return jt({
+        snapPoints: w,
+        defaultSnapPoint: B,
+        backdropFrom: S,
+        viewportHeight: ye
       });
-  }, [C, S, h, ce]), E = r === "bottom" ? se : void 0, Ye = xt(o.open), [ke, Ze] = v(0), Ne = j(!1), et = E !== void 0 && g, He = g && ke > 0 ? ke : void 0, de = E ? et && He !== void 0 ? He : E.sheetHeight : He, tt = E && de !== void 0 ? Math.max(0, de - E.defaultHeight) : void 0, ot = de !== void 0, Me = Et({
-    contentTransition: N,
-    placement: r,
-    resize: l
-  }), nt = Me === "surface" ? "auto" : "none", at = Me === "sheet" ? "auto" : "none", De = o.bodyNode;
-  wt({
-    enabled: o.open && Me === "surface",
-    node: he
-  }), ye(() => {
-    if (!g) {
-      Ne.current = !1;
+  }, [S, B, w, ye]), R = i === "bottom" ? Qe : void 0, Xe = Ct(o.open), [Se, Ye] = l(0), ke = A(!1), Ze = R !== void 0 && m, Te = m && Se > 0 ? Se : void 0, U = R ? Ze && Te !== void 0 ? Te : R.sheetHeight : Te, et = R && U !== void 0 ? Math.max(0, U - R.defaultHeight) : void 0, tt = U !== void 0, Re = qt({
+    contentTransition: h,
+    placement: i,
+    resize: c
+  }), ot = Re === "surface" ? "auto" : "none", nt = Re === "sheet" ? "auto" : "none", Ee = o.bodyNode;
+  yt({
+    enabled: o.open && Re === "surface",
+    node: re
+  }), Me(() => {
+    if (!m) {
+      ke.current = !1;
       return;
     }
-    const i = De?.firstElementChild;
-    if (!i) {
-      Ne.current = !1;
+    const r = Ee?.firstElementChild;
+    if (!r) {
+      ke.current = !1;
       return;
     }
-    const H = () => {
-      const ue = i.getBoundingClientRect().height, Se = Tt({
-        contentHeight: ue,
-        maxHeight: Dt(Z),
-        snapHeight: E?.sheetHeight
-      }), $e = Math.abs(ke - Se) > 0.5;
-      Ne.current = $e, $e && Ze(Se);
+    const b = () => {
+      const Q = r.getBoundingClientRect().height, le = wt({
+        contentHeight: Q,
+        maxHeight: Kt(E),
+        snapHeight: R?.sheetHeight
+      }), qe = Math.abs(Se - le) > 0.5;
+      ke.current = qe, qe && Ye(le);
     };
-    if (H(), typeof ResizeObserver > "u") return;
-    const be = new ResizeObserver(H);
-    return be.observe(i), () => be.disconnect();
+    if (b(), typeof ResizeObserver > "u") return;
+    const F = new ResizeObserver(b);
+    return F.observe(r), () => F.disconnect();
   }, [
-    De,
-    g,
-    E?.sheetHeight,
-    ke,
-    ce,
-    Z
-  ]), ne(() => {
-    K(r);
-  }, [r, K]), ne(() => {
+    Ee,
+    m,
+    R?.sheetHeight,
+    Se,
+    ye,
+    E
+  ]), X(() => {
+    ue(i);
+  }, [i, ue]), X(() => {
     o.open || (W.current = null);
-  }, [o.open]), ne(() => (q(_), () => q(!1)), [_, q]), ne(() => (F(ge), () => F(!1)), [ge, F]);
-  const rt = k(
-    () => Ne.current,
+  }, [o.open]), X(() => (oe(j), () => oe(!1)), [j, oe]), X(() => (D(ie), () => D(!1)), [ie, D]);
+  const rt = v(
+    () => ke.current,
     []
-  ), Ee = o.bodyNode, Ae = o.setScrollState, it = k(() => {
-    Ae(Je(Ee));
-  }, [Ee, Ae]), Ie = E?.backdropFromHeight, [Ve, Le] = v(!1), ct = k((i) => {
-    Le(!i);
+  ), Ve = o.bodyNode, je = o.setScrollState, at = v(() => {
+    je(Ht(Ve));
+  }, [Ve, je]), Ie = R?.backdropFromHeight, [$e, Le] = l(!1), st = v((r) => {
+    Le(!r);
   }, []);
-  !o.open && Ve && Le(!1);
-  const xe = Ie !== void 0 && Ve, { collapseBottomSheetToUndimmedSnap: Te, handlers: st } = Ht({
-    enabled: f !== !1,
-    drag: f,
+  !o.open && $e && Le(!1);
+  const Fe = Ie !== void 0 && $e, { collapseBottomSheetToUndimmedSnap: Be, handlers: ct } = St({
+    enabled: p !== !1 && !T.active,
+    drag: p,
     open: o.open,
-    placement: r,
-    surfaceMotionRef: Q,
-    surfaceMotionNode: Z,
-    backdropRef: Y,
+    placement: i,
+    surfaceMotionRef: me,
+    surfaceMotionNode: E,
+    backdropRef: ne,
     bodyNode: o.bodyNode,
-    snapHeights: E?.snapHeights,
-    sheetHeight: de,
+    snapHeights: R?.snapHeights,
+    sheetHeight: U,
     backdropFromHeight: Ie,
-    onBackdropDimRestChange: ct,
-    peekHeight: _ ? G : void 0,
-    peekFallback: _ ? "header" : void 0,
+    onBackdropDimRestChange: st,
+    peekHeight: j ? $ : 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" }),
-    backdropHidden: u === "hidden",
-    visibleTranslate: tt,
+    backdropHidden: d === "hidden",
+    visibleTranslate: et,
     shouldDeferBottomSettle: rt,
-    refreshScrollState: it,
-    snapPositions: w ? x : void 0,
-    defaultSnapPosition: p,
-    closeThreshold: O,
-    scrollLockTimeout: J,
+    refreshScrollState: at,
+    snapPositions: C ? M : void 0,
+    defaultSnapPosition: k,
+    closeThreshold: L,
+    scrollLockTimeout: te,
     popupSnapLayoutVersion: o.popupSnapLayoutVersion
-  }), dt = k(
-    (i) => {
-      Q.current = i, ie(i), i && o.open && w && W.current !== i && (zt({
-        defaultSnapPosition: p,
-        node: i,
-        snapPositions: x
-      }), W.current = i);
+  }), it = v(
+    (r) => {
+      me.current = r, fe(r), r && o.open && C && W.current !== r && (Gt({
+        defaultSnapPosition: k,
+        node: r,
+        snapPositions: M
+      }), W.current = r);
     },
-    [w, o.open, p, x]
-  ), lt = k((i) => {
-    X.current = i, ee(i);
+    [C, o.open, k, M]
+  ), dt = v((r) => {
+    pe.current = r, he(r);
   }, []);
-  ne(() => {
-    const i = o.closeAttemptFeedbackKey;
-    if (i === 0 || r !== "popup" || te.current === i) {
-      te.current = i, I(void 0);
+  X(() => {
+    const r = o.closeAttemptFeedbackKey, b = () => {
+      se(void 0), g.current = null;
+    };
+    if (r === 0) {
+      ae.current = r, b();
+      return;
+    }
+    if (i !== "popup") {
+      b();
       return;
     }
-    const H = X.current;
-    if (!H) return;
-    te.current = i, b.current !== null && window.cancelAnimationFrame(b.current), y.current !== null && window.clearTimeout(y.current), I(void 0);
-    const be = () => {
-      I(void 0), y.current = null;
-    }, ue = (Se) => {
-      Se.target === H && Se.animationName === "oc-modal-reject-shake" && (H.removeEventListener("animationend", ue), y.current !== null && window.clearTimeout(y.current), be());
+    if (ae.current === r) {
+      b();
+      return;
+    }
+    const F = re;
+    if (!F) return;
+    ae.current = r, f.current !== null && window.cancelAnimationFrame(f.current), g.current !== null && window.clearTimeout(g.current), b();
+    const Q = (le) => {
+      le.target === F && $t.has(le.animationName) && (F.removeEventListener("animationend", Q), g.current !== null && window.clearTimeout(g.current), b());
     };
-    return H.addEventListener("animationend", ue), b.current = window.requestAnimationFrame(() => {
-      b.current = null, I("reject"), b.current = window.requestAnimationFrame(() => {
-        b.current = null, y.current = window.setTimeout(() => {
-          H.removeEventListener("animationend", ue), be();
-        }, Vt(H));
+    return F.addEventListener("animationend", Q), f.current = window.requestAnimationFrame(() => {
+      f.current = null, se(r), f.current = window.requestAnimationFrame(() => {
+        f.current = null, g.current = window.setTimeout(() => {
+          F.removeEventListener("animationend", Q), b();
+        }, Wt(F));
       });
     }), () => {
-      H.removeEventListener("animationend", ue), b.current !== null && (window.cancelAnimationFrame(b.current), b.current = null), y.current !== null && (window.clearTimeout(y.current), y.current = null);
+      F.removeEventListener("animationend", Q), f.current !== null && (window.cancelAnimationFrame(f.current), f.current = null), g.current !== null && (window.clearTimeout(g.current), g.current = null);
     };
-  }, [o.closeAttemptFeedbackKey, r]);
-  const ze = Pt(A), ut = {
-    ...ze,
+  }, [o.closeAttemptFeedbackKey, i, re]);
+  const Oe = Lt(O), lt = {
+    ...Oe,
     ...o.headerHeight > 0 ? { "--oc-modal-header-height": `${o.headerHeight}px` } : {},
     ...o.footerHeight > 0 ? { "--oc-modal-footer-height": `${o.footerHeight}px` } : {},
-    ...s !== void 0 ? { "--oc-modal-peek-height": `${s}px` } : {},
-    ...de !== void 0 ? { "--oc-modal-sheet-height": `${de}px` } : {}
+    ...a !== void 0 ? { "--oc-modal-peek-height": `${a}px` } : {},
+    ...U !== void 0 ? { "--oc-modal-sheet-height": `${U}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`.
-  }, je = {
+  }, Ke = {
     // Each modal reserves one backdrop slot and one viewport slot.
-    "--oc-modal-stack-offset": Ye * 2
-  }, pt = o.headerHeight > 0 ? {
-    ...A,
+    "--oc-modal-stack-offset": Xe * 2
+  }, ut = {
+    ...Ke,
+    "--_-modal-keyboard-inset": `${T.keyboardInset}px`,
+    "--_-modal-keyboard-inset-settled": `${T.settledKeyboardInset}px`,
+    ...G ? {
+      "--_-modal-viewport-height": `${G.height}px`,
+      "--_-modal-viewport-offset-left": `${G.offsetLeft}px`,
+      "--_-modal-viewport-offset-top": `${G.offsetTop}px`,
+      "--_-modal-viewport-width": `${G.width}px`
+    } : {}
+  }, mt = o.headerHeight > 0 ? {
+    ...O,
     "--oc-modal-header-height": `${o.headerHeight}px`
-  } : A, mt = T === "content" ? Q : T, { setBackdropDismissalDisabled: Re, setBackgroundInteractive: Be } = o, ft = u !== "hidden" || oe;
-  ye(() => {
-    P !== V && L(P);
-  }, [V, P]);
-  const le = k(() => {
-    B.current !== null && (window.clearTimeout(B.current), B.current = null);
-  }, []), ve = k(() => {
-    u === "hidden" && (le(), L((i) => {
-      const H = qe(
-        i,
-        u
+  } : O, pt = xt({
+    contentNode: E,
+    initialFocus: ee,
+    modal: o.modal,
+    titleNode: o.titleNode
+  }), { setBackdropDismissalDisabled: Pe, setBackgroundInteractive: Ae } = o, ft = d !== "hidden" || ce;
+  Me(() => {
+    P !== q && _(P);
+  }, [q, P]);
+  const J = v(() => {
+    x.current !== null && (window.clearTimeout(x.current), x.current = null);
+  }, []), de = v(() => {
+    d === "hidden" && (J(), _((r) => {
+      const b = ze(
+        r,
+        d
       );
-      return H.resolvedBackdrop !== "hidden" || !H.exiting ? H : {
-        ...H,
+      return b.resolvedBackdrop !== "hidden" || !b.exiting ? b : {
+        ...b,
         exiting: !1
       };
     }));
-  }, [le, u]);
-  return ne(
+  }, [J, d]);
+  return X(
     () => () => {
-      le();
+      J();
     },
-    [le]
-  ), ye(() => {
-    if (!oe || u !== "hidden") return;
-    const i = Y.current;
-    if (!i) {
-      B.current = window.setTimeout(ve, 0);
+    [J]
+  ), Me(() => {
+    if (!ce || d !== "hidden") return;
+    const r = ne.current;
+    if (!r) {
+      x.current = window.setTimeout(de, 0);
       return;
     }
-    le(), B.current = window.setTimeout(
-      ve,
-      Lt(i)
+    J(), x.current = window.setTimeout(
+      de,
+      zt(r)
     );
   }, [
-    le,
-    ve,
-    oe,
-    u
-  ]), ye(() => (Re(u === "hidden"), Be(z || xe), () => {
-    Re(!1), Be(!1);
+    J,
+    de,
+    ce,
+    d
+  ]), Me(() => (Pe(d === "hidden"), Ae(z || Fe), () => {
+    Pe(!1), Ae(!1);
   }), [
-    xe,
+    Fe,
     z,
-    u,
-    Re,
-    Be
-  ]), /* @__PURE__ */ ae($.Portal, { container: fe, children: [
-    ft ? /* @__PURE__ */ d(
-      $.Backdrop,
+    d,
+    Pe,
+    Ae
+  ]), /* @__PURE__ */ _e(I.Portal, { container: He, children: [
+    ft ? /* @__PURE__ */ u(
+      I.Backdrop,
       {
-        ref: Y,
-        className: c.backdrop,
+        ref: ne,
+        className: N.backdrop,
         "data-oc-part": "backdrop",
         "data-oc-component": "modal-backdrop",
-        "data-oc-modal-backdrop": u,
-        "data-oc-modal-backdrop-passthrough": xe ? "true" : void 0,
-        "data-oc-modal-placement": r,
+        "data-oc-modal-backdrop": d,
+        "data-oc-modal-backdrop-passthrough": Fe ? "true" : void 0,
+        "data-oc-modal-placement": i,
         "data-oc-modal-presentation-state": o.presentationState,
-        style: je,
-        onTransitionCancel: (i) => {
-          i.currentTarget === i.target && i.propertyName === "opacity" && ve();
+        style: Ke,
+        onTransitionCancel: (r) => {
+          r.currentTarget === r.target && r.propertyName === "opacity" && de();
         },
-        onTransitionEnd: (i) => {
-          i.currentTarget === i.target && i.propertyName === "opacity" && ve();
+        onTransitionEnd: (r) => {
+          r.currentTarget === r.target && r.propertyName === "opacity" && de();
         },
         onClick: () => {
           if (o.disablePointerDismissal) {
-            if (Te()) return;
+            if (Be()) return;
             o.notifyCloseAttemptRejected({ reason: "backdrop-press" });
             return;
           }
           if (!o.canDismissByBehavior({ reason: "backdrop-press" })) {
-            if (Te()) return;
+            if (Be()) return;
             o.notifyCloseAttemptRejected({ reason: "backdrop-press" });
             return;
           }
-          if (r === "bottom" && _) {
+          if (i === "bottom" && j) {
             if (o.presentationState === "visible") {
-              if (Te()) return;
+              if (Be()) return;
               o.setPresentationState("peeked");
             }
             return;
@@ -599,427 +609,252 @@ function _t({
         }
       }
     ) : null,
-    /* @__PURE__ */ d(
-      $.Viewport,
+    /* @__PURE__ */ u(
+      I.Viewport,
       {
-        className: c.viewport,
+        ref: be,
+        className: N.viewport,
         "data-oc-part": "viewport",
         "data-oc-component": "modal-viewport",
-        "data-oc-modal-placement": r,
-        style: je,
-        children: /* @__PURE__ */ ae(
-          $.Popup,
+        "data-oc-modal-placement": i,
+        "data-oc-modal-keyboard-avoiding": T.active ? "true" : void 0,
+        style: ut,
+        children: /* @__PURE__ */ u(
+          I.Popup,
           {
-            ...re,
-            ...st,
-            ref: dt,
-            initialFocus: mt,
-            className: R(
-              c.surfaceMotion,
-              c[a],
-              e
+            ...xe,
+            ...ct,
+            ref: it,
+            initialFocus: pt,
+            className: Ne(
+              N.surfaceMotion,
+              N[s],
+              e,
+              V === void 0 ? void 0 : V % 2 === 0 ? N.feedbackEven : N.feedbackOdd
             ),
             "data-oc-part": "surface-motion",
             "data-oc-component": "modal-content",
-            "data-oc-modal-backdrop": u,
+            "data-oc-modal-backdrop": d,
             "data-oc-variant": n,
-            "data-oc-size": a,
-            "data-oc-resize": l,
-            "data-oc-modal-feedback": r === "popup" ? U : void 0,
-            "data-oc-modal-placement": r,
-            "data-oc-modal-snapping": E || w ? "true" : void 0,
-            "data-oc-modal-sheet-sizing": ot ? "managed" : void 0,
-            "data-oc-modal-sheet-transition": at === "auto" ? "auto" : void 0,
-            style: ut,
-            children: [
-              r === "bottom" ? /* @__PURE__ */ d(
+            "data-oc-size": s,
+            "data-oc-resize": c,
+            "data-oc-modal-feedback": i === "popup" && V !== void 0 ? "reject" : void 0,
+            "data-oc-modal-placement": i,
+            "data-oc-modal-snapping": R || C ? "true" : void 0,
+            "data-oc-modal-sheet-sizing": tt ? "managed" : void 0,
+            "data-oc-modal-sheet-transition": nt === "auto" ? "auto" : void 0,
+            style: lt,
+            children: /* @__PURE__ */ _e(Vt, { container: E, children: [
+              i === "bottom" ? /* @__PURE__ */ u(
                 "div",
                 {
                   "aria-hidden": "true",
-                  className: R(
-                    c.bottomFill,
-                    c[a],
+                  className: Ne(
+                    N.bottomFill,
+                    N[s],
                     e
                   ),
                   "data-oc-part": "bottom-fill",
                   "data-oc-component": "modal-bottom-fill",
-                  "data-oc-size": a,
-                  style: ze
+                  "data-oc-size": s,
+                  style: Oe
                 }
               ) : null,
-              /* @__PURE__ */ d(
-                "div",
+              /* @__PURE__ */ u(
+                Ft,
                 {
-                  ref: lt,
-                  className: R(
-                    c.surface,
-                    c[l],
-                    e
-                  ),
-                  "data-oc-part": "surface",
-                  "data-oc-variant": n,
-                  "data-oc-size": a,
-                  "data-oc-resize": l,
-                  "data-oc-content-transition": nt === "auto" ? "auto" : void 0,
-                  "data-oc-modal-placement": r,
-                  "data-oc-scrollable": o.scrollState.canScroll ? "true" : "false",
-                  style: pt,
+                  ref: dt,
+                  className: e,
+                  contentTransition: ot === "auto" ? "auto" : void 0,
+                  placement: i,
+                  resize: c,
+                  scrollable: o.scrollState.canScroll,
+                  size: s,
+                  style: mt,
+                  variant: n,
                   children: t
                 }
               )
-            ]
+            ] })
           }
         )
       }
     )
   ] });
 }
-function Gt({
+function to({
   className: e = "",
   title: t,
   children: n,
-  leadingContent: a,
-  trailingContent: l,
-  closeLabel: N = "닫기",
-  closeButton: m = !0,
-  handle: C = !0,
-  ref: f,
-  ...M
+  leadingContent: s,
+  trailingContent: c,
+  bottomContent: h,
+  closeLabel: y = "닫기",
+  closeButton: S = !0,
+  handle: p = !0,
+  ref: H,
+  ...w
 }) {
-  const h = me("ModalHeader"), { setHeaderNode: S, scrollState: x } = h, p = pe(
-    () => Fe(S, f),
-    [f, S]
-  ), T = Qe(a);
-  return /* @__PURE__ */ ae(
-    bt,
+  const B = Z("ModalHeader"), { setHeaderNode: M, setTitleNode: k, scrollState: ee } = B, $ = Y(
+    () => De(M, H),
+    [H, M]
+  ), L = Y(
+    () => De(k),
+    [k]
+  );
+  return /* @__PURE__ */ u(
+    At,
     {
-      ...M,
-      as: "header",
-      ref: p,
-      backdrop: "compact",
-      className: R(c.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": x.scrolledFromTop ? "true" : "false",
-      children: [
-        C && h.canRenderHandle ? /* @__PURE__ */ d(
-          "div",
-          {
-            "aria-hidden": "true",
-            className: c.handle,
-            "data-oc-part": "handle"
-          }
-        ) : null,
-        /* @__PURE__ */ ae(
-          "div",
-          {
-            className: c.headerInner,
-            "data-oc-has-leading": T ? "true" : "false",
-            "data-oc-part": "header-inner",
-            children: [
-              T ? /* @__PURE__ */ d("div", { className: c.headerLeading, "data-oc-part": "header-leading", children: a }) : null,
-              /* @__PURE__ */ d("div", { className: c.headerTitle, "data-oc-part": "header-title", children: t ? /* @__PURE__ */ d($.Title, { children: t }) : n }),
-              /* @__PURE__ */ ae("div", { className: c.headerTrailing, "data-oc-part": "header-trailing", children: [
-                l,
-                m ? /* @__PURE__ */ d(Xe, { label: N }) : null
-              ] })
-            ]
-          }
-        )
-      ]
+      ...w,
+      ref: $,
+      bottomSlot: h,
+      className: e,
+      closeContent: S ? /* @__PURE__ */ u(Je, { label: y }) : null,
+      handleContent: p && B.canRenderHandle ? /* @__PURE__ */ u(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: N.handle,
+          "data-oc-part": "handle"
+        }
+      ) : null,
+      leadingContent: s,
+      sticky: ee.scrolledFromTop,
+      titleContent: t ? /* @__PURE__ */ u(
+        I.Title,
+        {
+          ref: L,
+          className: N.initialFocusTitle,
+          tabIndex: -1,
+          children: t
+        }
+      ) : void 0,
+      trailingContent: c,
+      children: n
     }
   );
 }
-function Jt({
-  className: e = "",
-  title: t,
-  children: n,
-  expanded: a,
-  defaultExpanded: l = !0,
-  onExpandedChange: N,
-  disabled: m = !1,
-  forceMount: C = !0,
-  handle: f = !0,
-  headingLevel: M = 2,
-  indicator: h,
-  titleAsDialogTitle: S = !0,
-  navigationProps: x,
-  panelProps: p,
-  panelContentProps: T,
-  ref: G,
-  style: O,
-  ...J
+function oo({
+  handle: e = !0,
+  ...t
 }) {
-  const fe = me("ModalNavigationSection"), {
-    canRenderHandle: A,
-    notifyPopupSnapLayoutChange: re,
-    placement: o
-  } = fe, { height: q, setNode: F } = Pe(), K = ht(), [r, Q] = Ge({
-    value: a,
-    defaultValue: l,
-    onChange: N
-  }), [X, Y] = v(
-    r ? "open" : "closed"
-  ), W = `h${Wt(M) ? M : 2}`, {
-    className: Z = "",
-    id: ie,
-    onClick: he,
-    ...ee
-  } = x ?? {}, {
-    className: te = "",
-    id: b,
-    role: y,
-    ...B
-  } = p ?? {}, { className: U = "", ...I } = T ?? {}, D = ie ?? `${K}-navigation`, w = b ?? `${K}-panel`, u = `${K}-dialog-title`, V = Qe(t), L = f && A, P = q > 0 ? {
-    ...O,
-    "--oc-modal-navigation-block-size": `${q}px`
-  } : O, oe = k(
-    (z) => {
-      Y(z), o === "popup" && re();
-    },
-    [re, o]
-  );
-  return /* @__PURE__ */ ae(
-    "section",
+  const n = Z("ModalNavigationSection"), {
+    canRenderHandle: s,
+    notifyPopupSnapLayoutChange: c,
+    placement: h
+  } = n;
+  return /* @__PURE__ */ u(
+    Dt,
     {
-      ref: G,
-      className: R(c.navigationSection, e),
-      style: P,
-      ...J,
-      "data-oc-component": "modal-navigation-section",
-      "data-oc-motion-state": X,
-      "data-oc-state": r ? "open" : "closed",
-      children: [
-        S && V ? /* @__PURE__ */ d(
-          $.Title,
-          {
-            className: c.navigationDialogTitle,
-            id: u,
-            children: t
-          }
-        ) : null,
-        L ? /* @__PURE__ */ d(
-          "div",
-          {
-            "aria-hidden": "true",
-            className: c.handle,
-            "data-oc-part": "handle"
-          }
-        ) : null,
-        /* @__PURE__ */ d(W, { className: c.navigationHeading, "data-oc-part": "heading", children: /* @__PURE__ */ ae(
-          "button",
-          {
-            ...ee,
-            ref: F,
-            id: D,
-            className: R(c.navigation, Z),
-            type: "button",
-            disabled: m,
-            "aria-disabled": m ? "true" : ee["aria-disabled"],
-            "aria-expanded": r,
-            "aria-controls": w,
-            onClick: (z) => {
-              he?.(z), !(z.defaultPrevented || m) && Q(!r);
-            },
-            "data-oc-component": "modal-navigation",
-            "data-oc-part": "navigation",
-            "data-oc-state": r ? "open" : "closed",
-            children: [
-              /* @__PURE__ */ d("span", { className: c.navigationTitle, "data-oc-part": "title", children: t }),
-              h === void 0 ? /* @__PURE__ */ d(
-                kt,
-                {
-                  className: c.navigationIndicator,
-                  open: r
-                }
-              ) : h ? /* @__PURE__ */ d(
-                "span",
-                {
-                  className: c.navigationIndicator,
-                  "data-oc-part": "indicator",
-                  "data-oc-state": r ? "open" : "closed",
-                  children: /* @__PURE__ */ d("span", { "data-oc-part": "indicator-frame", children: Nt(h) })
-                }
-              ) : null,
-              m ? null : /* @__PURE__ */ d(yt, { variant: "light" })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ d(
-          vt,
-          {
-            className: R(c.navigationPanel, te),
-            open: r,
-            forceMount: C,
-            intent: "expand",
-            measureBlockSize: "rendered",
-            onMotionStateChange: oe,
-            contentProps: {
-              className: c.navigationPanelFrame,
-              "data-oc-part": "panel-inner"
-            },
-            ...B,
-            "aria-hidden": r ? void 0 : !0,
-            "aria-labelledby": D,
-            id: w,
-            inert: r ? void 0 : !0,
-            role: y ?? "region",
-            "data-oc-component": "modal-navigation-panel",
-            "data-oc-state": r ? "open" : "closed",
-            children: /* @__PURE__ */ d(
-              Ue,
-              {
-                className: c.navigationPanelScroll,
-                "data-oc-component": "modal-navigation-panel-scroll-area",
-                "data-oc-part": "panel-scroll-area",
-                children: /* @__PURE__ */ d(
-                  _e,
-                  {
-                    ...I,
-                    className: R(
-                      c.navigationPanelInner,
-                      U
-                    ),
-                    "data-oc-component": "modal-navigation-panel-content",
-                    children: n
-                  }
-                )
-              }
-            )
-          }
-        )
-      ]
+      ...t,
+      canRenderHandle: e && s,
+      onPanelMotionStateChange: () => {
+        h === "popup" && c();
+      }
     }
   );
 }
-function Qt({
+function no({
   className: e = "",
   children: t,
   layout: n = "content",
-  containerClassName: a = "",
-  containerProps: l,
-  ref: N,
-  ...m
+  containerClassName: s = "",
+  containerProps: c,
+  ref: h,
+  ...y
 }) {
-  const C = me("ModalBody"), { bodyNode: f, setBodyNode: M, setScrollState: h } = C, S = k(
-    (p) => {
-      h(Je(p));
-    },
-    [h]
-  ), x = pe(
-    () => Fe(M, N, S),
-    [N, M, S]
-  );
-  return ne(() => {
-    const p = f;
-    if (!p || (S(p), typeof ResizeObserver > "u")) return;
-    const T = new ResizeObserver(() => S(p));
-    return T.observe(p), p.firstElementChild && T.observe(p.firstElementChild), () => T.disconnect();
-  }, [f, S]), /* @__PURE__ */ d(
-    Ue,
+  const S = Z("ModalBody"), { bodyNode: p, setBodyNode: H, setScrollState: w } = S, { setBodyRef: B, updateScrollState: M } = Tt({
+    bodyNode: p,
+    bodyRef: h,
+    setBodyNode: H,
+    setScrollState: w
+  });
+  return /* @__PURE__ */ u(
+    Rt,
     {
-      ...m,
-      className: R(c.body, e),
-      "data-oc-part": "body",
-      "data-oc-component": "modal-body",
-      children: /* @__PURE__ */ d(
-        _e,
-        {
-          ref: x,
-          className: c.bodyContainer,
-          "data-oc-part": "body-container",
-          "data-oc-component": "modal-body-container",
-          onScroll: (p) => {
-            l?.onScroll?.(p), S(p.currentTarget);
-          },
-          children: /* @__PURE__ */ d(
-            "section",
-            {
-              ...l,
-              className: R(c.bodyContent, a),
-              "data-oc-part": "body-content",
-              "data-oc-component": "modal-body-content",
-              "data-oc-layout": n,
-              children: t
-            }
-          )
+      bodyContainerProps: {
+        ref: B,
+        onScroll: (k) => {
+          c?.onScroll?.(k), M(k.currentTarget);
         }
-      )
+      },
+      bodyContentProps: { ...c, className: s },
+      layout: n,
+      scrollAreaProps: { ...y, className: e },
+      children: t
     }
   );
 }
-function Xt({
+function ro({
   className: e = "",
   children: t,
   background: n = "auto",
-  ref: a,
-  ...l
+  ref: s,
+  ...c
 }) {
-  const N = me("ModalFooter"), { scrollState: m, setFooterNode: C } = N, f = pe(
-    () => Fe(C, a),
-    [a, C]
-  ), M = n === !0 || n === "auto" && m.canScroll && !m.scrolledToBottom;
-  return /* @__PURE__ */ d(
-    "footer",
+  const h = Z("ModalFooter"), { scrollState: y, setFooterNode: S } = h, p = Y(
+    () => De(S, s),
+    [s, S]
+  ), H = Bt(
+    n,
+    y
+  );
+  return /* @__PURE__ */ u(
+    Pt,
     {
-      ...l,
-      ref: f,
-      className: R(c.footer, e),
-      "data-oc-part": "footer",
-      "data-oc-component": "modal-footer",
-      "data-oc-background": M ? "true" : "false",
+      ...c,
+      ref: p,
+      backgroundActive: H,
+      className: e,
       children: t
     }
   );
 }
-function Xe({
+function Je({
   className: e = "",
-  children: t = /* @__PURE__ */ d(gt, {}),
+  children: t = /* @__PURE__ */ u(ht, {}),
   label: n = "닫기",
-  size: a = 24,
-  disabled: l,
-  onClick: N,
-  ...m
+  size: s = 24,
+  disabled: c,
+  onClick: h,
+  ...y
 }) {
-  const C = me("ModalClose");
-  return /* @__PURE__ */ d(
-    St,
+  const S = Z("ModalClose");
+  return /* @__PURE__ */ u(
+    gt,
     {
-      ...m,
-      className: R(c.close, e),
-      "aria-label": m["aria-label"] ?? n,
+      ...y,
+      className: Ne(N.close, e),
+      "aria-label": y["aria-label"] ?? n,
       "data-oc-part": "close",
       "data-oc-component": "modal-close",
-      disabled: l,
-      onClick: (f) => {
-        N?.(f), !f.defaultPrevented && !l && C.requestClose({ reason: "close-button" });
+      disabled: c,
+      onClick: (p) => {
+        h?.(p), !p.defaultPrevented && !c && S.requestClose({ reason: "close-button" });
       },
-      size: a,
+      size: s,
       children: t
     }
   );
 }
-const No = Object.assign(We, {
-  Root: We,
-  Trigger: Ut,
-  Content: _t,
-  Header: Gt,
-  NavigationSection: Jt,
-  Body: Qt,
-  Footer: Xt,
-  Close: Xe
+const To = Object.assign(Ue, {
+  Root: Ue,
+  Trigger: Zt,
+  Content: eo,
+  Header: to,
+  NavigationSection: oo,
+  Body: no,
+  Footer: ro,
+  Close: Je
 });
 export {
-  Qt as ModalBody,
-  Xe as ModalClose,
-  _t as ModalContent,
-  Xt as ModalFooter,
-  Gt as ModalHeader,
-  Jt as ModalNavigationSection,
-  We as ModalRoot,
-  Ut as ModalTrigger,
-  No as default
+  no as ModalBody,
+  Je as ModalClose,
+  eo as ModalContent,
+  ro as ModalFooter,
+  to as ModalHeader,
+  oo as ModalNavigationSection,
+  Ue as ModalRoot,
+  Zt as ModalTrigger,
+  To as default
 };