@orioncactuscorp/ui 1.9.2 → 1.11.0

package/dist/components/Modal/Modal.js

@@ -1,36 +1,34 @@
 'use client';
-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) {
+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 { 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 $e(e) {
+function Qe(e) {
   return e != null && e !== !1 && e !== "";
 }
-function Pe(e, t) {
-  typeof e == "function" ? e(t) : e && (e.current = t);
-}
-function kt(e) {
+function Pt(e) {
   if (!e) return;
   const t = Object.entries(e).filter(
     ([n]) => n.startsWith("--")
@@ -38,38 +36,38 @@ function kt(e) {
   if (t.length !== 0)
     return Object.fromEntries(t);
 }
-function Ee() {
+function Oe() {
   return typeof window > "u" ? 0 : window.visualViewport?.height ?? window.innerHeight;
 }
-function Nt(e) {
+function Ft(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) {
+function Dt(e) {
   if (!(!e || typeof window > "u"))
-    return Nt(window.getComputedStyle(e).maxHeight);
+    return Ft(window.getComputedStyle(e).maxHeight);
 }
-function wt({
+function Et({
   contentTransition: e,
   placement: t,
   resize: n
 }) {
   return e !== "auto" || n !== "content" || t === "full" ? "none" : t === "bottom" ? "sheet" : "surface";
 }
-function Ae(e, t) {
+function qe(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(() => {
+function At(e) {
+  const [t, n] = v(Oe);
+  return ye(() => {
     if (!e || typeof window > "u") return;
     const a = () => {
-      n(Ee());
+      n(Oe());
     };
     return a(), window.addEventListener("resize", a), window.visualViewport?.addEventListener("resize", a), () => {
       window.removeEventListener("resize", a), window.visualViewport?.removeEventListener(
@@ -79,50 +77,50 @@ function Mt(e) {
     };
   }, [e]), t;
 }
-function Ht(e) {
+function It(e) {
   const t = e.trim();
   return t.endsWith("ms") ? Number.parseFloat(t) || 0 : t.endsWith("s") ? (Number.parseFloat(t) || 0) * 1e3 : 0;
 }
-function ke(e) {
-  return e.split(",").reduce((t, n) => Math.max(t, Ht(n)), 0);
+function we(e) {
+  return e.split(",").reduce((t, n) => Math.max(t, It(n)), 0);
 }
-function Tt(e) {
-  const t = window.getComputedStyle(e), n = ke(t.animationDuration), a = ke(t.animationDelay);
+function Vt(e) {
+  const t = window.getComputedStyle(e), n = we(t.animationDuration), a = we(t.animationDelay);
   return n + a + 250;
 }
-function xt(e) {
-  const t = window.getComputedStyle(e), n = ke(t.transitionDuration), a = ke(t.transitionDelay);
+function Lt(e) {
+  const t = window.getComputedStyle(e), n = we(t.transitionDuration), a = we(t.transitionDelay);
   return n + a + 250;
 }
-function Pt({
+function zt({
   defaultSnapPosition: e,
   node: t,
   snapPositions: n
 }) {
   if (!n?.length) return;
-  const a = St({
+  const a = Bt({
     defaultSnapPosition: e,
     snapPositions: n,
     surfaceMotion: t
   });
   if (!a) return;
-  const d = a.defaultTarget;
+  const l = a.defaultTarget;
   t.style.setProperty(
     "--oc-modal-translate-x",
-    d.settledTranslate?.x ?? `${d.x}px`
+    l.settledTranslate?.x ?? `${l.x}px`
   ), t.style.setProperty(
     "--oc-modal-translate-y",
-    d.settledTranslate?.y ?? `${d.y}px`
+    l.settledTranslate?.y ?? `${l.y}px`
   );
 }
-function Rt(e) {
+function jt(e) {
   if (e && typeof e == "object" && "reason" in e && typeof e.reason == "string")
     return e.reason;
 }
-function Se(e) {
+function Ce(e) {
   e && typeof e == "object" && "cancel" in e && typeof e.cancel == "function" && e.cancel();
 }
-function Bt(e, t) {
+function $t(e, t) {
   switch (t) {
     case "drag-dismiss":
       return e?.drag ?? "auto";
@@ -140,13 +138,13 @@ function Bt(e, t) {
       return e?.programmatic ?? "auto";
   }
 }
-function Ft(e, t) {
+function Ot(e, t) {
   return t > 0 && (e === "drag-dismiss" || e === "backdrop-press" || e === "outside-press");
 }
-function Ie(e, t) {
+function Ke(e, t) {
   return t && (e === "backdrop-press" || e === "outside-press");
 }
-function Dt({
+function qt({
   backdrop: e,
   canSnapPopup: t,
   placement: n,
@@ -154,8 +152,8 @@ function Dt({
 }) {
   return e !== "auto" ? e : n === "bottom" && a === "peeked" || t ? "hidden" : "visible";
 }
-function Et(e) {
-  switch (Rt(e)) {
+function Kt(e) {
+  switch (jt(e)) {
     case "close-press":
       return "close-button";
     case "outside-press":
@@ -170,484 +168,502 @@ function Et(e) {
       return "programmatic";
   }
 }
-function At(e) {
+function Wt(e) {
   return e >= 2 && e <= 6;
 }
-function Ve({
+function We({
   children: e,
   open: t,
   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
+  onOpenChange: l,
+  canCloseAttempt: N,
+  onCloseAttempt: m,
+  presentationState: C,
+  defaultPresentationState: f = "visible",
+  onPresentationStateChange: M,
+  disablePointerDismissal: h,
+  navigationDepth: S = 0,
+  dismissBehavior: x
 }) {
-  const l = t !== void 0, [T, q] = S(
+  const p = t !== void 0, [T, G] = v(
     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({
+  ), 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({
     canScroll: !1,
     scrolledFromTop: !1,
     scrolledToBottom: !0
-  }), [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);
+  }), [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);
     },
-    [d, l]
-  ), p = k(
-    (r = { reason: "programmatic" }) => w?.(r) !== !1,
-    [w]
-  ), R = k(
-    (r = { reason: "programmatic" }) => {
-      Z((y) => y + 1);
+    [l, p]
+  ), w = k(
+    (s = { reason: "programmatic" }) => N?.(s) !== !1,
+    [N]
+  ), u = k(
+    (s = { reason: "programmatic" }) => {
+      Y((g) => g + 1);
     },
     []
-  ), te = k(() => {
-    ue((r) => r + 1);
-  }, []), A = k(
-    (r = { reason: "programmatic" }) => {
-      if (Ie(r.reason, z))
+  ), V = k(() => {
+    Z((s) => s + 1);
+  }, []), L = k(
+    (s = { reason: "programmatic" }) => {
+      if (Ke(s.reason, F))
         return !1;
-      const y = Bt(F, r.reason);
-      return y === "allow" ? !0 : y === "block" ? !1 : !Ft(r.reason, ee);
+      const g = $t(x, s.reason);
+      return g === "allow" ? !0 : g === "block" ? !1 : !Ot(s.reason, I);
     },
-    [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);
+    [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);
     },
     [
-      p,
-      z,
-      A,
-      M,
-      R,
-      f
+      w,
+      F,
+      L,
+      D,
+      u,
+      m
     ]
-  ), ie = k(
-    (r, y) => {
-      if (r && b === "peeked" && D("visible"), !r) {
-        I({
-          reason: Et(y),
-          eventDetails: y
+  ), oe = k(
+    (s, g) => {
+      if (s && b === "peeked" && y("visible"), !s) {
+        P({
+          reason: Kt(g),
+          eventDetails: g
         });
         return;
       }
-      M(r, y);
+      D(s, g);
     },
-    [M, b, I, D]
-  ), V = b === "visible" && !v ? a : !1, J = g || Q === "bottom" && Y, ve = Te(
+    [D, b, P, y]
+  ), z = b === "visible" && !r ? a : !1, ge = h || J === "bottom" && (A || r), _ = pe(
     () => ({
-      open: K,
-      placement: Q,
-      setPlacement: X,
+      open: O,
+      placement: J,
+      setPlacement: fe,
       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
+      setPresentationState: y,
+      requestClose: P,
+      canDismissByBehavior: L,
+      canCloseAttempt: w,
+      closeAttemptFeedbackKey: X,
+      notifyCloseAttemptRejected: u,
+      disablePointerDismissal: h ?? !1,
+      setBackdropDismissalDisabled: K,
+      setBackgroundInteractive: Q,
+      canPeek: A,
+      setCanPeek: re,
+      canRenderHandle: o,
+      setCanRenderHandle: q,
+      popupSnapLayoutVersion: W,
+      notifyPopupSnapLayoutChange: V,
+      headerHeight: B.height,
+      footerHeight: U.height,
+      setHeaderNode: B.setNode,
+      setFooterNode: U.setNode,
+      bodyNode: ie,
+      setBodyNode: he,
+      scrollState: ee,
+      setScrollState: te
     }),
     [
-      re,
-      Y,
-      L,
+      ie,
       A,
-      p,
-      U,
-      E.height,
-      E.setNode,
-      G.height,
-      G.setNode,
-      R,
-      te,
-      _,
-      K,
-      Q,
-      I,
-      j,
-      g,
+      o,
+      L,
+      w,
+      X,
+      U.height,
+      U.setNode,
+      B.height,
+      B.setNode,
+      u,
+      V,
+      W,
+      O,
+      J,
+      P,
+      ee,
+      h,
       b,
-      D
+      y
     ]
   );
-  return /* @__PURE__ */ s(pt, { value: ve, children: /* @__PURE__ */ s(
-    O.Root,
+  return /* @__PURE__ */ d(Ct, { value: _, children: /* @__PURE__ */ d(
+    $.Root,
     {
-      open: K,
-      modal: V,
-      onOpenChange: ie,
-      disablePointerDismissal: J,
+      open: O,
+      modal: z,
+      onOpenChange: oe,
+      disablePointerDismissal: ge,
       children: e
     }
   ) });
 }
-function It({
+function Ut({
   className: e = "",
   children: t,
   render: n,
   nativeButton: a
 }) {
-  return n ? /* @__PURE__ */ s(
-    O.Trigger,
+  return n ? /* @__PURE__ */ d(
+    $.Trigger,
     {
       render: n,
       nativeButton: a,
       "data-oc-component": "modal-trigger",
       children: t
     }
-  ) : /* @__PURE__ */ s(
-    O.Trigger,
+  ) : /* @__PURE__ */ d(
+    $.Trigger,
     {
-      className: B(i.trigger, e),
+      className: R(c.trigger, e),
       nativeButton: a,
       "data-oc-component": "modal-trigger",
       children: t
     }
   );
 }
-function Vt({
+function _t({
   className: e = "",
   children: t,
   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
+  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
 }) {
-  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(
+  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(
     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,
+  ), 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,
     presentationState: o.presentationState
-  }), [R, te] = S(() => ({
-    resolvedBackdrop: p,
+  }), [V, L] = v(() => ({
+    resolvedBackdrop: u,
     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
+  })), 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
       });
-  }, [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;
+  }, [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;
       return;
     }
-    const c = Re?.firstElementChild;
-    if (!c) {
-      ye.current = !1;
+    const i = De?.firstElementChild;
+    if (!i) {
+      Ne.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);
+      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);
     };
     if (H(), typeof ResizeObserver > "u") return;
-    const fe = new ResizeObserver(H);
-    return fe.observe(c), () => fe.disconnect();
+    const be = new ResizeObserver(H);
+    return be.observe(i), () => be.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,
+    De,
+    g,
+    E?.sheetHeight,
+    ke,
+    ce,
+    Z
+  ]), ne(() => {
+    K(r);
+  }, [r, K]), ne(() => {
+    o.open || (W.current = null);
+  }, [o.open]), ne(() => (q(_), () => q(!1)), [_, q]), ne(() => (F(ge), () => F(!1)), [ge, F]);
+  const rt = k(
+    () => Ne.current,
     []
-  ), Xe = ft({
-    enabled: h !== !1,
-    drag: h,
+  ), 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);
+  }, []);
+  !o.open && Ve && Le(!1);
+  const xe = Ie !== void 0 && Ve, { collapseBottomSheetToUndimmedSnap: Te, handlers: st } = Ht({
+    enabled: f !== !1,
+    drag: f,
     open: o.open,
-    placement: u,
-    surfaceMotionRef: v,
-    surfaceMotionNode: _,
-    backdropRef: U,
+    placement: r,
+    surfaceMotionRef: Q,
+    surfaceMotionNode: Z,
+    backdropRef: Y,
     bodyNode: o.bodyNode,
-    snapHeights: x?.snapHeights,
-    sheetHeight: ce,
-    peekHeight: J ? T : void 0,
-    peekFallback: J ? "header" : void 0,
+    snapHeights: E?.snapHeights,
+    sheetHeight: de,
+    backdropFromHeight: Ie,
+    onBackdropDimRestChange: ct,
+    peekHeight: _ ? G : void 0,
+    peekFallback: _ ? "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,
+    backdropHidden: u === "hidden",
+    visibleTranslate: tt,
+    shouldDeferBottomSettle: rt,
+    refreshScrollState: it,
+    snapPositions: w ? x : void 0,
+    defaultSnapPosition: p,
+    closeThreshold: O,
+    scrollLockTimeout: J,
     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);
+  }), 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);
     },
-    [M, o.open, F, m]
-  ), Ze = k((c) => {
-    ae.current = c, pe(c);
+    [w, o.open, p, x]
+  ), lt = k((i) => {
+    X.current = i, ee(i);
   }, []);
-  oe(() => {
-    const c = o.closeAttemptFeedbackKey;
-    if (c === 0 || u !== "popup" || j.current === c) {
-      j.current = c, E(void 0);
+  ne(() => {
+    const i = o.closeAttemptFeedbackKey;
+    if (i === 0 || r !== "popup" || te.current === i) {
+      te.current = i, I(void 0);
       return;
     }
-    const H = ae.current;
+    const H = X.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());
+    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());
     };
-    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));
+    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));
       });
     }), () => {
-      H.removeEventListener("animationend", le), P.current !== null && (window.cancelAnimationFrame(P.current), P.current = null), b.current !== null && (window.clearTimeout(b.current), b.current = null);
+      H.removeEventListener("animationend", ue), b.current !== null && (window.cancelAnimationFrame(b.current), b.current = null), y.current !== null && (window.clearTimeout(y.current), y.current = null);
     };
-  }, [o.closeAttemptFeedbackKey, u]);
-  const Be = kt(X), et = {
-    ...Be,
+  }, [o.closeAttemptFeedbackKey, r]);
+  const ze = Pt(A), ut = {
+    ...ze,
     ...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` } : {}
+    ...s !== void 0 ? { "--oc-modal-peek-height": `${s}px` } : {},
+    ...de !== void 0 ? { "--oc-modal-sheet-height": `${de}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 = {
+  }, je = {
     // Each modal reserves one backdrop slot and one viewport slot.
-    "--oc-modal-stack-offset": qe * 2
-  }, tt = o.headerHeight > 0 ? {
-    ...X,
+    "--oc-modal-stack-offset": Ye * 2
+  }, pt = o.headerHeight > 0 ? {
+    ...A,
     "--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
+  } : 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
       );
       return H.resolvedBackdrop !== "hidden" || !H.exiting ? H : {
         ...H,
         exiting: !1
       };
     }));
-  }, [se, p]);
-  return oe(
+  }, [le, u]);
+  return ne(
     () => () => {
-      se();
+      le();
     },
-    [se]
-  ), ge(() => {
-    if (!I || p !== "hidden") return;
-    const c = U.current;
-    if (!c) {
-      D.current = window.setTimeout(me, 0);
+    [le]
+  ), ye(() => {
+    if (!oe || u !== "hidden") return;
+    const i = Y.current;
+    if (!i) {
+      B.current = window.setTimeout(ve, 0);
       return;
     }
-    se(), D.current = window.setTimeout(
-      me,
-      xt(c)
+    le(), B.current = window.setTimeout(
+      ve,
+      Lt(i)
     );
   }, [
-    se,
-    me,
-    I,
-    p
-  ]), ge(() => (Me(p === "hidden"), He(ie), () => {
-    Me(!1), He(!1);
+    le,
+    ve,
+    oe,
+    u
+  ]), ye(() => (Re(u === "hidden"), Be(z || xe), () => {
+    Re(!1), Be(!1);
   }), [
-    ie,
-    p,
-    Me,
-    He
-  ]), /* @__PURE__ */ ne(O.Portal, { container: Q, children: [
-    nt ? /* @__PURE__ */ s(
-      O.Backdrop,
+    xe,
+    z,
+    u,
+    Re,
+    Be
+  ]), /* @__PURE__ */ ae($.Portal, { container: fe, children: [
+    ft ? /* @__PURE__ */ d(
+      $.Backdrop,
       {
-        ref: U,
-        className: i.backdrop,
+        ref: Y,
+        className: c.backdrop,
         "data-oc-part": "backdrop",
         "data-oc-component": "modal-backdrop",
-        "data-oc-modal-backdrop": p,
-        "data-oc-modal-placement": u,
+        "data-oc-modal-backdrop": u,
+        "data-oc-modal-backdrop-passthrough": xe ? "true" : void 0,
+        "data-oc-modal-placement": r,
         "data-oc-modal-presentation-state": o.presentationState,
-        style: Fe,
-        onTransitionCancel: (c) => {
-          c.currentTarget === c.target && c.propertyName === "opacity" && me();
+        style: je,
+        onTransitionCancel: (i) => {
+          i.currentTarget === i.target && i.propertyName === "opacity" && ve();
         },
-        onTransitionEnd: (c) => {
-          c.currentTarget === c.target && c.propertyName === "opacity" && me();
+        onTransitionEnd: (i) => {
+          i.currentTarget === i.target && i.propertyName === "opacity" && ve();
         },
         onClick: () => {
           if (o.disablePointerDismissal) {
+            if (Te()) return;
             o.notifyCloseAttemptRejected({ reason: "backdrop-press" });
             return;
           }
           if (!o.canDismissByBehavior({ reason: "backdrop-press" })) {
+            if (Te()) return;
             o.notifyCloseAttemptRejected({ reason: "backdrop-press" });
             return;
           }
-          if (u === "bottom" && J) {
-            o.presentationState === "visible" && o.setPresentationState("peeked");
+          if (r === "bottom" && _) {
+            if (o.presentationState === "visible") {
+              if (Te()) return;
+              o.setPresentationState("peeked");
+            }
             return;
           }
           o.requestClose({ reason: "backdrop-press" });
         }
       }
     ) : null,
-    /* @__PURE__ */ s(
-      O.Viewport,
+    /* @__PURE__ */ d(
+      $.Viewport,
       {
-        className: i.viewport,
+        className: c.viewport,
         "data-oc-part": "viewport",
         "data-oc-component": "modal-viewport",
-        "data-oc-modal-placement": u,
-        style: Fe,
-        children: /* @__PURE__ */ ne(
-          O.Popup,
+        "data-oc-modal-placement": r,
+        style: je,
+        children: /* @__PURE__ */ ae(
+          $.Popup,
           {
-            ...Y,
-            ...Xe,
-            ref: Ye,
-            initialFocus: ot,
-            className: B(
-              i.surfaceMotion,
-              i[a],
+            ...re,
+            ...st,
+            ref: dt,
+            initialFocus: mt,
+            className: R(
+              c.surfaceMotion,
+              c[a],
               e
             ),
             "data-oc-part": "surface-motion",
             "data-oc-component": "modal-content",
-            "data-oc-modal-backdrop": p,
+            "data-oc-modal-backdrop": u,
             "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,
+            "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: [
-              u === "bottom" ? /* @__PURE__ */ s(
+              r === "bottom" ? /* @__PURE__ */ d(
                 "div",
                 {
                   "aria-hidden": "true",
-                  className: B(
-                    i.bottomFill,
-                    i[a],
+                  className: R(
+                    c.bottomFill,
+                    c[a],
                     e
                   ),
                   "data-oc-part": "bottom-fill",
                   "data-oc-component": "modal-bottom-fill",
                   "data-oc-size": a,
-                  style: Be
+                  style: ze
                 }
               ) : null,
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ d(
                 "div",
                 {
-                  ref: Ze,
-                  className: B(
-                    i.surface,
-                    i[d],
+                  ref: lt,
+                  className: R(
+                    c.surface,
+                    c[l],
                     e
                   ),
                   "data-oc-part": "surface",
                   "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-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: tt,
+                  style: pt,
                   children: t
                 }
               )
@@ -658,59 +674,57 @@ function Vt({
     )
   ] });
 }
-function Lt({
+function Gt({
   className: e = "",
   title: t,
   children: n,
   leadingContent: a,
-  trailingContent: d,
-  closeLabel: w = "닫기",
-  closeButton: f = !0,
-  handle: h = !0,
-  ref: N,
-  ...C
+  trailingContent: l,
+  closeLabel: N = "닫기",
+  closeButton: m = !0,
+  handle: C = !0,
+  ref: f,
+  ...M
 }) {
-  const g = de("ModalHeader"), { setHeaderNode: m, scrollState: F } = g, l = k(
-    (q) => {
-      m(q), Pe(N, q);
-    },
-    [N, m]
-  ), T = $e(a);
-  return /* @__PURE__ */ ne(
-    ct,
+  const h = me("ModalHeader"), { setHeaderNode: S, scrollState: x } = h, p = pe(
+    () => Fe(S, f),
+    [f, S]
+  ), T = Qe(a);
+  return /* @__PURE__ */ ae(
+    bt,
     {
-      ...C,
+      ...M,
       as: "header",
-      ref: l,
+      ref: p,
       backdrop: "compact",
-      className: B(i.header, e),
+      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": F.scrolledFromTop ? "true" : "false",
+      "data-oc-sticky": x.scrolledFromTop ? "true" : "false",
       children: [
-        h && g.canRenderHandle ? /* @__PURE__ */ s(
+        C && h.canRenderHandle ? /* @__PURE__ */ d(
           "div",
           {
             "aria-hidden": "true",
-            className: i.handle,
+            className: c.handle,
             "data-oc-part": "handle"
           }
         ) : null,
-        /* @__PURE__ */ ne(
+        /* @__PURE__ */ ae(
           "div",
           {
-            className: i.headerInner,
+            className: c.headerInner,
             "data-oc-has-leading": T ? "true" : "false",
             "data-oc-part": "header-inner",
             children: [
-              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
+              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
               ] })
             ]
           }
@@ -719,155 +733,155 @@ function Lt({
     }
   );
 }
-function zt({
+function Jt({
   className: e = "",
   title: t,
   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,
+  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: q,
-  style: K,
-  ...Q
+  ref: G,
+  style: O,
+  ...J
 }) {
-  const X = de("ModalNavigationSection"), {
-    canRenderHandle: Y,
-    notifyPopupSnapLayoutChange: o,
-    placement: L
-  } = X, { height: W, setNode: z } = xe(), u = at(), [v, ae] = je({
+  const fe = me("ModalNavigationSection"), {
+    canRenderHandle: A,
+    notifyPopupSnapLayoutChange: re,
+    placement: o
+  } = fe, { height: q, setNode: F } = Pe(), K = ht(), [r, Q] = Ge({
     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 = "",
+    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: 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();
+    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();
     },
-    [o, L]
+    [re, o]
   );
-  return /* @__PURE__ */ ne(
+  return /* @__PURE__ */ ae(
     "section",
     {
-      ref: q,
-      className: B(i.navigationSection, e),
-      style: I,
-      ...Q,
+      ref: G,
+      className: R(c.navigationSection, e),
+      style: P,
+      ...J,
       "data-oc-component": "modal-navigation-section",
-      "data-oc-motion-state": U,
-      "data-oc-state": v ? "open" : "closed",
+      "data-oc-motion-state": X,
+      "data-oc-state": r ? "open" : "closed",
       children: [
-        m && te ? /* @__PURE__ */ s(
-          O.Title,
+        S && V ? /* @__PURE__ */ d(
+          $.Title,
           {
-            className: i.navigationDialogTitle,
-            id: R,
+            className: c.navigationDialogTitle,
+            id: u,
             children: t
           }
         ) : null,
-        A ? /* @__PURE__ */ s(
+        L ? /* @__PURE__ */ d(
           "div",
           {
             "aria-hidden": "true",
-            className: i.handle,
+            className: c.handle,
             "data-oc-part": "handle"
           }
         ) : null,
-        /* @__PURE__ */ s(_, { className: i.navigationHeading, "data-oc-part": "heading", children: /* @__PURE__ */ ne(
+        /* @__PURE__ */ d(W, { className: c.navigationHeading, "data-oc-part": "heading", children: /* @__PURE__ */ ae(
           "button",
           {
-            ...j,
-            ref: z,
-            id: M,
-            className: B(i.navigation, ue),
+            ...ee,
+            ref: F,
+            id: D,
+            className: R(c.navigation, Z),
             type: "button",
-            disabled: f,
-            "aria-disabled": f ? "true" : j["aria-disabled"],
-            "aria-expanded": v,
-            "aria-controls": p,
-            onClick: (V) => {
-              pe?.(V), !(V.defaultPrevented || f) && ae(!v);
+            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": v ? "open" : "closed",
+            "data-oc-state": r ? "open" : "closed",
             children: [
-              /* @__PURE__ */ s("span", { className: i.navigationTitle, "data-oc-part": "title", children: t }),
-              g === void 0 ? /* @__PURE__ */ s(
-                dt,
+              /* @__PURE__ */ d("span", { className: c.navigationTitle, "data-oc-part": "title", children: t }),
+              h === void 0 ? /* @__PURE__ */ d(
+                kt,
                 {
-                  className: i.navigationIndicator,
-                  open: v
+                  className: c.navigationIndicator,
+                  open: r
                 }
-              ) : g ? /* @__PURE__ */ s(
+              ) : h ? /* @__PURE__ */ d(
                 "span",
                 {
-                  className: i.navigationIndicator,
+                  className: c.navigationIndicator,
                   "data-oc-part": "indicator",
-                  "data-oc-state": v ? "open" : "closed",
-                  children: /* @__PURE__ */ s("span", { "data-oc-part": "indicator-frame", children: ut(g) })
+                  "data-oc-state": r ? "open" : "closed",
+                  children: /* @__PURE__ */ d("span", { "data-oc-part": "indicator-frame", children: Nt(h) })
                 }
               ) : null,
-              f ? null : /* @__PURE__ */ s(lt, { variant: "light" })
+              m ? null : /* @__PURE__ */ d(yt, { variant: "light" })
             ]
           }
         ) }),
-        /* @__PURE__ */ s(
-          it,
+        /* @__PURE__ */ d(
+          vt,
           {
-            className: B(i.navigationPanel, P),
-            open: v,
-            forceMount: h,
+            className: R(c.navigationPanel, te),
+            open: r,
+            forceMount: C,
             intent: "expand",
             measureBlockSize: "rendered",
-            onMotionStateChange: ie,
+            onMotionStateChange: oe,
             contentProps: {
-              className: i.navigationPanelFrame,
+              className: c.navigationPanelFrame,
               "data-oc-part": "panel-inner"
             },
-            ...G,
-            "aria-hidden": v ? void 0 : !0,
-            "aria-labelledby": M,
-            id: p,
-            inert: v ? void 0 : !0,
-            role: D ?? "region",
+            ...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": v ? "open" : "closed",
-            children: /* @__PURE__ */ s(
-              Le,
+            "data-oc-state": r ? "open" : "closed",
+            children: /* @__PURE__ */ d(
+              Ue,
               {
-                className: i.navigationPanelScroll,
+                className: c.navigationPanelScroll,
                 "data-oc-component": "modal-navigation-panel-scroll-area",
                 "data-oc-part": "panel-scroll-area",
-                children: /* @__PURE__ */ s(
-                  ze,
+                children: /* @__PURE__ */ d(
+                  _e,
                   {
-                    ...ee,
-                    className: B(
-                      i.navigationPanelInner,
-                      E
+                    ...I,
+                    className: R(
+                      c.navigationPanelInner,
+                      U
                     ),
                     "data-oc-component": "modal-navigation-panel-content",
                     children: n
@@ -881,53 +895,51 @@ function zt({
     }
   );
 }
-function jt({
+function Qt({
   className: e = "",
   children: t,
   layout: n = "content",
   containerClassName: a = "",
-  containerProps: d,
-  ref: w,
-  ...f
+  containerProps: l,
+  ref: N,
+  ...m
 }) {
-  const h = de("ModalBody"), { bodyNode: N, setBodyNode: C, setScrollState: g } = h, m = k(
-    (l) => {
-      g(bt(l));
+  const C = me("ModalBody"), { bodyNode: f, setBodyNode: M, setScrollState: h } = C, S = k(
+    (p) => {
+      h(Je(p));
     },
-    [g]
-  ), F = k(
-    (l) => {
-      C(l), Pe(w, l), m(l);
-    },
-    [w, C, m]
+    [h]
+  ), x = pe(
+    () => Fe(M, N, S),
+    [N, M, S]
   );
-  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,
+  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,
     {
-      ...f,
-      className: B(i.body, e),
+      ...m,
+      className: R(c.body, e),
       "data-oc-part": "body",
       "data-oc-component": "modal-body",
-      children: /* @__PURE__ */ s(
-        ze,
+      children: /* @__PURE__ */ d(
+        _e,
         {
-          ref: F,
-          className: i.bodyContainer,
+          ref: x,
+          className: c.bodyContainer,
           "data-oc-part": "body-container",
           "data-oc-component": "modal-body-container",
-          onScroll: (l) => {
-            d?.onScroll?.(l), m(l.currentTarget);
+          onScroll: (p) => {
+            l?.onScroll?.(p), S(p.currentTarget);
           },
-          children: /* @__PURE__ */ s(
+          children: /* @__PURE__ */ d(
             "section",
             {
-              ...d,
-              className: B(i.bodyContent, a),
+              ...l,
+              className: R(c.bodyContent, a),
               "data-oc-part": "body-content",
               "data-oc-component": "modal-body-content",
               "data-oc-layout": n,
@@ -939,77 +951,75 @@ function jt({
     }
   );
 }
-function $t({
+function Xt({
   className: e = "",
   children: t,
   background: n = "auto",
   ref: a,
-  ...d
+  ...l
 }) {
-  const w = de("ModalFooter"), { scrollState: f, setFooterNode: h } = w, N = k(
-    (m) => {
-      h(m), Pe(a, m);
-    },
-    [a, h]
-  ), C = n === !0 || n === "auto" && f.canScroll && !f.scrolledToBottom;
-  return /* @__PURE__ */ s(
+  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",
     {
-      ...d,
-      ref: N,
-      className: B(i.footer, e),
+      ...l,
+      ref: f,
+      className: R(c.footer, e),
       "data-oc-part": "footer",
       "data-oc-component": "modal-footer",
-      "data-oc-background": C ? "true" : "false",
+      "data-oc-background": M ? "true" : "false",
       children: t
     }
   );
 }
-function Oe({
+function Xe({
   className: e = "",
-  children: t = /* @__PURE__ */ s(rt, {}),
+  children: t = /* @__PURE__ */ d(gt, {}),
   label: n = "닫기",
   size: a = 24,
-  disabled: d,
-  onClick: w,
-  ...f
+  disabled: l,
+  onClick: N,
+  ...m
 }) {
-  const h = de("ModalClose");
-  return /* @__PURE__ */ s(
-    st,
+  const C = me("ModalClose");
+  return /* @__PURE__ */ d(
+    St,
     {
-      ...f,
-      className: B(i.close, e),
-      "aria-label": f["aria-label"] ?? n,
+      ...m,
+      className: R(c.close, e),
+      "aria-label": m["aria-label"] ?? n,
       "data-oc-part": "close",
       "data-oc-component": "modal-close",
-      disabled: d,
-      onClick: (N) => {
-        w?.(N), !N.defaultPrevented && !d && h.requestClose({ reason: "close-button" });
+      disabled: l,
+      onClick: (f) => {
+        N?.(f), !f.defaultPrevented && !l && C.requestClose({ reason: "close-button" });
       },
       size: a,
       children: t
     }
   );
 }
-const uo = Object.assign(Ve, {
-  Root: Ve,
-  Trigger: It,
-  Content: Vt,
-  Header: Lt,
-  NavigationSection: zt,
-  Body: jt,
-  Footer: $t,
-  Close: Oe
+const No = Object.assign(We, {
+  Root: We,
+  Trigger: Ut,
+  Content: _t,
+  Header: Gt,
+  NavigationSection: Jt,
+  Body: Qt,
+  Footer: Xt,
+  Close: Xe
 });
 export {
-  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
+  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
 };