@orioncactuscorp/ui 1.12.2 → 1.14.0

package/dist/components/Modal/Modal.js

@@ -1,34 +1,25 @@
 '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 { 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 { jsx as u, jsxs as Oe } from "react/jsx-runtime";
+import { useRef as A, useState as l, useMemo as Z, useLayoutEffect as ue, useEffect as Y, useCallback as g } from "react";
+import { Dialog as L } from "@base-ui-components/react/dialog";
+import lt from "@orioncactuscorp/icons/orioncactus/CloseThick";
+import ut from "../BackgroundIconButton/BackgroundIconButton.js";
+import { mergeRefs as Be } from "../../utils/mergeRefs.js";
+import { useModalContext as ee, ModalProvider as mt } from "./contexts.js";
+import { useControllableState as pt } from "./useControllableState.js";
+import { useModalContentBlockTransition as ft } from "./useModalContentBlockTransition.js";
+import { useMeasuredElement as qe } from "./useElementSize.js";
+import { useModalDrag as ht } from "./useModalDrag.js";
+import { useModalPlacement as gt } from "./useModalPlacement.js";
+import { useModalStackDepth as bt } from "./useModalStackDepth.js";
+import { resolveContentSizedBottomSheetHeight as St } from "./bottomSheetGeometry.js";
+import { getModalScrollState as vt } from "./modalScrollArbitration.js";
+import { resolveModalInitialFocus as kt } from "./initialFocus.js";
+import { useModalBodyScrollState as yt, ModalBodyFrame as wt, ModalSurfaceFrame as Mt, resolveModalFooterBackground as Ct, ModalFooterFrame as Ht, ModalHeaderFrame as Nt, ModalNavigationSectionFrame as Tt, mergeModalClassName as xt } from "../internal/ModalPresentation.js";
+import { resolveModalSnapMetrics as Ft, resolveModalPopupSnapPositions as Rt } from "./snapPoints.js";
+import x from "./Modal.module.scss.js";
+const ke = xt;
+function Bt(e) {
   if (!e) return;
   const t = Object.entries(e).filter(
     ([n]) => n.startsWith("--")
@@ -36,10 +27,10 @@ function Pt(e) {
   if (t.length !== 0)
     return Object.fromEntries(t);
 }
-function Oe() {
+function $e() {
   return typeof window > "u" ? 0 : window.visualViewport?.height ?? window.innerHeight;
 }
-function Ft(e) {
+function Pt(e) {
   const t = e.trim();
   if (!t.endsWith("px")) return;
   const n = Number.parseFloat(t);
@@ -47,80 +38,80 @@ function Ft(e) {
 }
 function Dt(e) {
   if (!(!e || typeof window > "u"))
-    return Ft(window.getComputedStyle(e).maxHeight);
+    return Pt(window.getComputedStyle(e).maxHeight);
 }
-function Et({
+function At({
   contentTransition: e,
   placement: t,
   resize: n
 }) {
   return e !== "auto" || n !== "content" || t === "full" ? "none" : t === "bottom" ? "sheet" : "surface";
 }
-function qe(e, t) {
+function Ke(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(() => {
+function Et(e) {
+  const [t, n] = l($e);
+  return ue(() => {
     if (!e || typeof window > "u") return;
-    const a = () => {
-      n(Oe());
+    const r = () => {
+      n($e());
     };
-    return a(), window.addEventListener("resize", a), window.visualViewport?.addEventListener("resize", a), () => {
-      window.removeEventListener("resize", a), window.visualViewport?.removeEventListener(
+    return r(), window.addEventListener("resize", r), window.visualViewport?.addEventListener("resize", r), () => {
+      window.removeEventListener("resize", r), window.visualViewport?.removeEventListener(
         "resize",
-        a
+        r
       );
     };
   }, [e]), t;
 }
-function It(e) {
+function Vt(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);
-}
-function Vt(e) {
-  const t = window.getComputedStyle(e), n = we(t.animationDuration), a = we(t.animationDelay);
-  return n + a + 250;
+function ye(e) {
+  return e.split(",").reduce((t, n) => Math.max(t, Vt(n)), 0);
 }
 function Lt(e) {
-  const t = window.getComputedStyle(e), n = we(t.transitionDuration), a = we(t.transitionDelay);
-  return n + a + 250;
+  const t = window.getComputedStyle(e), n = ye(t.animationDuration), r = ye(t.animationDelay);
+  return n + r + 250;
 }
-function zt({
+function jt(e) {
+  const t = window.getComputedStyle(e), n = ye(t.transitionDuration), r = ye(t.transitionDelay);
+  return n + r + 250;
+}
+function It({
   defaultSnapPosition: e,
   node: t,
   snapPositions: n
 }) {
   if (!n?.length) return;
-  const a = Bt({
+  const r = Rt({
     defaultSnapPosition: e,
     snapPositions: n,
     surfaceMotion: t
   });
-  if (!a) return;
-  const l = a.defaultTarget;
+  if (!r) return;
+  const i = r.defaultTarget;
   t.style.setProperty(
     "--oc-modal-translate-x",
-    l.settledTranslate?.x ?? `${l.x}px`
+    i.settledTranslate?.x ?? `${i.x}px`
   ), t.style.setProperty(
     "--oc-modal-translate-y",
-    l.settledTranslate?.y ?? `${l.y}px`
+    i.settledTranslate?.y ?? `${i.y}px`
   );
 }
-function jt(e) {
+function zt(e) {
   if (e && typeof e == "object" && "reason" in e && typeof e.reason == "string")
     return e.reason;
 }
-function Ce(e) {
+function ve(e) {
   e && typeof e == "object" && "cancel" in e && typeof e.cancel == "function" && e.cancel();
 }
-function $t(e, t) {
+function Ot(e, t) {
   switch (t) {
     case "drag-dismiss":
       return e?.drag ?? "auto";
@@ -138,22 +129,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 We(e, t) {
   return t && (e === "backdrop-press" || e === "outside-press");
 }
-function qt({
+function $t({
   backdrop: e,
   canSnapPopup: t,
   placement: n,
-  presentationState: a
+  presentationState: r
 }) {
-  return e !== "auto" ? e : n === "bottom" && a === "peeked" || t ? "hidden" : "visible";
+  return e !== "auto" ? e : n === "bottom" && r === "peeked" || t ? "hidden" : "visible";
 }
 function Kt(e) {
-  switch (jt(e)) {
+  switch (zt(e)) {
     case "close-press":
       return "close-button";
     case "outside-press":
@@ -168,429 +159,437 @@ 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: r = !0,
+  onOpenChange: i,
+  canCloseAttempt: f,
+  onCloseAttempt: b,
+  presentationState: S,
+  defaultPresentationState: m = "visible",
+  onPresentationStateChange: F,
+  disablePointerDismissal: v,
+  navigationDepth: R = 0,
+  dismissBehavior: k
 }) {
-  const p = t !== void 0, [T, G] = v(
+  const y = t !== void 0, [te, j] = 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({
+  ), oe = y ? t : te, [ne, we] = l("bottom"), [I, Me] = l(!1), [o, re] = l(!1), [E, me] = l(!1), [c, pe] = l(!1), [ae, se] = l(0), [K, W] = l(0), [fe, Ce] = l(null), [he, U] = l(null), [w, C] = 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);
+  }), [H, _] = pt({
+    value: S,
+    defaultValue: m,
+    onChange: F
+  }), B = qe(), z = qe(), N = Math.max(0, R), d = g(
+    (a, h) => {
+      y || j(a), i?.(a, h);
     },
-    [l, p]
-  ), w = k(
-    (s = { reason: "programmatic" }) => N?.(s) !== !1,
-    [N]
-  ), u = k(
-    (s = { reason: "programmatic" }) => {
-      Y((g) => g + 1);
+    [i, y]
+  ), P = g(
+    (a = { reason: "programmatic" }) => f?.(a) !== !1,
+    [f]
+  ), D = g(
+    (a = { reason: "programmatic" }) => {
+      se((h) => h + 1);
     },
     []
-  ), V = k(() => {
-    Z((s) => s + 1);
-  }, []), L = k(
-    (s = { reason: "programmatic" }) => {
-      if (Ke(s.reason, F))
+  ), O = g(() => {
+    W((a) => a + 1);
+  }, []), V = g(
+    (a = { reason: "programmatic" }) => {
+      if (We(a.reason, E))
         return !1;
-      const g = $t(x, s.reason);
-      return g === "allow" ? !0 : g === "block" ? !1 : !Ot(s.reason, I);
+      const h = Ot(k, a.reason);
+      return h === "allow" ? !0 : h === "block" ? !1 : !qt(a.reason, N);
     },
-    [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);
+    [E, k, N]
+  ), q = g(
+    (a = { reason: "programmatic" }, h = {}) => {
+      const { commit: M = !0, skipAttempt: G = !1 } = h;
+      return !G && We(a.reason, E) ? (ve(a.eventDetails), !1) : !G && !V(a) || !G && !P(a) || !G && b?.(a) === !1 ? (ve(a.eventDetails), D(a), !1) : (M && d(!1, a.eventDetails), !0);
     },
     [
-      w,
-      F,
-      L,
+      P,
+      E,
+      V,
+      d,
       D,
-      u,
-      m
+      b
     ]
-  ), oe = k(
-    (s, g) => {
-      if (s && b === "peeked" && y("visible"), !s) {
-        P({
-          reason: Kt(g),
-          eventDetails: g
+  ), ie = g(
+    (a, h) => {
+      if (a && H === "peeked" && _("visible"), !a) {
+        q({
+          reason: Kt(h),
+          eventDetails: h
         });
         return;
       }
-      D(s, g);
+      d(a, h);
     },
-    [D, b, P, y]
-  ), z = b === "visible" && !r ? a : !1, ge = h || J === "bottom" && (A || r), _ = pe(
+    [d, H, q, _]
+  ), T = H === "visible" && !c ? r : !1, ge = v || ne === "bottom" && (I || c), $ = Z(
     () => ({
-      open: O,
-      placement: J,
-      setPlacement: fe,
-      presentationState: b,
-      setPresentationState: y,
-      requestClose: P,
-      canDismissByBehavior: L,
-      canCloseAttempt: w,
-      closeAttemptFeedbackKey: X,
-      notifyCloseAttemptRejected: u,
-      disablePointerDismissal: h ?? !1,
-      setBackdropDismissalDisabled: K,
-      setBackgroundInteractive: Q,
-      canPeek: A,
-      setCanPeek: re,
+      open: oe,
+      modal: T,
+      placement: ne,
+      setPlacement: we,
+      presentationState: H,
+      setPresentationState: _,
+      requestClose: q,
+      canDismissByBehavior: V,
+      canCloseAttempt: P,
+      closeAttemptFeedbackKey: ae,
+      notifyCloseAttemptRejected: D,
+      disablePointerDismissal: v ?? !1,
+      setBackdropDismissalDisabled: me,
+      setBackgroundInteractive: pe,
+      canPeek: I,
+      setCanPeek: Me,
       canRenderHandle: o,
-      setCanRenderHandle: q,
-      popupSnapLayoutVersion: W,
-      notifyPopupSnapLayoutChange: V,
+      setCanRenderHandle: re,
+      popupSnapLayoutVersion: K,
+      notifyPopupSnapLayoutChange: O,
       headerHeight: B.height,
-      footerHeight: U.height,
+      footerHeight: z.height,
       setHeaderNode: B.setNode,
-      setFooterNode: U.setNode,
-      bodyNode: ie,
-      setBodyNode: he,
-      scrollState: ee,
-      setScrollState: te
+      titleNode: he,
+      setTitleNode: U,
+      setFooterNode: z.setNode,
+      bodyNode: fe,
+      setBodyNode: Ce,
+      scrollState: w,
+      setScrollState: C
     }),
     [
-      ie,
-      A,
+      fe,
+      I,
       o,
-      L,
-      w,
-      X,
-      U.height,
-      U.setNode,
+      V,
+      P,
+      ae,
+      z.height,
+      z.setNode,
       B.height,
       B.setNode,
-      u,
-      V,
-      W,
+      T,
+      D,
       O,
-      J,
-      P,
-      ee,
-      h,
-      b,
-      y
+      K,
+      oe,
+      ne,
+      q,
+      w,
+      v,
+      H,
+      _,
+      U,
+      he
     ]
   );
-  return /* @__PURE__ */ d(Ct, { value: _, children: /* @__PURE__ */ d(
-    $.Root,
+  return /* @__PURE__ */ u(mt, { value: $, children: /* @__PURE__ */ u(
+    L.Root,
     {
-      open: O,
-      modal: z,
-      onOpenChange: oe,
+      open: oe,
+      modal: T,
+      onOpenChange: ie,
       disablePointerDismissal: ge,
       children: e
     }
   ) });
 }
-function Ut({
+function Wt({
   className: e = "",
   children: t,
   render: n,
-  nativeButton: a
+  nativeButton: r
 }) {
-  return n ? /* @__PURE__ */ d(
-    $.Trigger,
+  return n ? /* @__PURE__ */ u(
+    L.Trigger,
     {
       render: n,
-      nativeButton: a,
+      nativeButton: r,
       "data-oc-component": "modal-trigger",
       children: t
     }
-  ) : /* @__PURE__ */ d(
-    $.Trigger,
+  ) : /* @__PURE__ */ u(
+    L.Trigger,
     {
-      className: R(c.trigger, e),
-      nativeButton: a,
+      className: ke(x.trigger, e),
+      nativeButton: r,
       "data-oc-component": "modal-trigger",
       children: t
     }
   );
 }
-function _t({
+function Ut({
   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: r = "medium",
+  resize: i = "content",
+  contentTransition: f = "auto",
+  backdrop: b = "auto",
+  backdropFrom: S,
+  drag: m = "content",
+  peekable: F = !1,
+  snapPoints: v,
+  defaultSnapPoint: R,
+  snapPositions: k,
+  defaultSnapPosition: y,
+  initialFocus: te,
+  peekHeight: j,
+  closeThreshold: oe,
+  scrollLockTimeout: ne,
+  container: we,
+  style: I,
+  ...Me
 }) {
-  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 = ee("ModalContent"), { setCanPeek: re, setCanRenderHandle: E, setPlacement: me } = o, c = gt(n), pe = A(null), ae = A(null), se = A(null), K = A(null), [W, fe] = l(null), [Ce, 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,
+  ), U = A(0), w = A(null), C = A(null), H = A(null), [_, B] = l(), z = m === "handle" || m === "content", N = c === "popup" && z && !!k?.length, d = $t({
+    backdrop: b,
+    canSnapPopup: N,
+    placement: c,
     presentationState: o.presentationState
-  }), [V, L] = v(() => ({
-    resolvedBackdrop: u,
+  }), [P, D] = 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
+  })), O = Z(
+    () => Ke(P, d),
+    [P, d]
+  ), V = O.exiting, q = N && d === "hidden", ie = (c === "bottom" || N) && z, T = c === "bottom" && ie && F, ge = T && j !== void 0 ? j : o.headerHeight > 0 ? o.headerHeight : void 0, $ = c === "bottom" && i !== "fixed", a = Et(
+    !!v?.length || $
+  ), h = Z(() => {
+    if (!(!v?.length || a <= 0))
+      return Ft({
+        snapPoints: v,
+        defaultSnapPoint: R,
+        backdropFrom: S,
+        viewportHeight: a
       });
-  }, [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, R, v, a]), M = c === "bottom" ? h : void 0, G = bt(o.open), [be, Ge] = l(0), Se = A(!1), Je = M !== void 0 && $, He = $ && be > 0 ? be : void 0, J = M ? Je && He !== void 0 ? He : M.sheetHeight : He, Qe = M && J !== void 0 ? Math.max(0, J - M.defaultHeight) : void 0, Xe = J !== void 0, Ne = At({
+    contentTransition: f,
+    placement: c,
+    resize: i
+  }), Ye = Ne === "surface" ? "auto" : "none", Ze = Ne === "sheet" ? "auto" : "none", Pe = o.bodyNode;
+  ft({
+    enabled: o.open && Ne === "surface",
+    node: Ce
+  }), ue(() => {
+    if (!$) {
+      Se.current = !1;
       return;
     }
-    const i = De?.firstElementChild;
-    if (!i) {
-      Ne.current = !1;
+    const s = Pe?.firstElementChild;
+    if (!s) {
+      Se.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 p = () => {
+      const X = s.getBoundingClientRect().height, le = St({
+        contentHeight: X,
+        maxHeight: Dt(W),
+        snapHeight: M?.sheetHeight
+      }), ze = Math.abs(be - le) > 0.5;
+      Se.current = ze, ze && Ge(le);
     };
-    if (H(), typeof ResizeObserver > "u") return;
-    const be = new ResizeObserver(H);
-    return be.observe(i), () => be.disconnect();
+    if (p(), typeof ResizeObserver > "u") return;
+    const de = new ResizeObserver(p);
+    return de.observe(s), () => de.disconnect();
   }, [
-    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,
+    Pe,
+    $,
+    M?.sheetHeight,
+    be,
+    a,
+    W
+  ]), Y(() => {
+    me(c);
+  }, [c, me]), Y(() => {
+    o.open || (K.current = null);
+  }, [o.open]), Y(() => (re(T), () => re(!1)), [T, re]), Y(() => (E(ie), () => E(!1)), [ie, E]);
+  const et = g(
+    () => Se.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);
+  ), De = o.bodyNode, Ae = o.setScrollState, tt = g(() => {
+    Ae(vt(De));
+  }, [De, Ae]), Ee = M?.backdropFromHeight, [Ve, Le] = l(!1), ot = g((s) => {
+    Le(!s);
   }, []);
   !o.open && Ve && Le(!1);
-  const xe = Ie !== void 0 && Ve, { collapseBottomSheetToUndimmedSnap: Te, handlers: st } = Ht({
-    enabled: f !== !1,
-    drag: f,
+  const Te = Ee !== void 0 && Ve, { collapseBottomSheetToUndimmedSnap: xe, handlers: nt } = ht({
+    enabled: m !== !1,
+    drag: m,
     open: o.open,
-    placement: r,
-    surfaceMotionRef: Q,
-    surfaceMotionNode: Z,
-    backdropRef: Y,
+    placement: c,
+    surfaceMotionRef: pe,
+    surfaceMotionNode: W,
+    backdropRef: se,
     bodyNode: o.bodyNode,
-    snapHeights: E?.snapHeights,
-    sheetHeight: de,
-    backdropFromHeight: Ie,
-    onBackdropDimRestChange: ct,
-    peekHeight: _ ? G : void 0,
-    peekFallback: _ ? "header" : void 0,
+    snapHeights: M?.snapHeights,
+    sheetHeight: J,
+    backdropFromHeight: Ee,
+    onBackdropDimRestChange: ot,
+    peekHeight: T ? j : void 0,
+    peekFallback: T ? "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,
-    shouldDeferBottomSettle: rt,
-    refreshScrollState: it,
-    snapPositions: w ? x : void 0,
-    defaultSnapPosition: p,
-    closeThreshold: O,
-    scrollLockTimeout: J,
+    backdropHidden: d === "hidden",
+    visibleTranslate: Qe,
+    shouldDeferBottomSettle: et,
+    refreshScrollState: tt,
+    snapPositions: N ? k : void 0,
+    defaultSnapPosition: y,
+    closeThreshold: oe,
+    scrollLockTimeout: ne,
     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);
+  }), rt = g(
+    (s) => {
+      pe.current = s, fe(s), s && o.open && N && K.current !== s && (It({
+        defaultSnapPosition: y,
+        node: s,
+        snapPositions: k
+      }), K.current = s);
     },
-    [w, o.open, p, x]
-  ), lt = k((i) => {
-    X.current = i, ee(i);
+    [N, o.open, y, k]
+  ), at = g((s) => {
+    ae.current = s, he(s);
   }, []);
-  ne(() => {
-    const i = o.closeAttemptFeedbackKey;
-    if (i === 0 || r !== "popup" || te.current === i) {
-      te.current = i, I(void 0);
+  Y(() => {
+    const s = o.closeAttemptFeedbackKey;
+    if (s === 0 || c !== "popup" || U.current === s) {
+      U.current = s, B(void 0);
       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());
+    const p = ae.current;
+    if (!p) return;
+    U.current = s, w.current !== null && window.cancelAnimationFrame(w.current), C.current !== null && window.clearTimeout(C.current), B(void 0);
+    const de = () => {
+      B(void 0), C.current = null;
+    }, X = (le) => {
+      le.target === p && le.animationName === "oc-modal-reject-shake" && (p.removeEventListener("animationend", X), C.current !== null && window.clearTimeout(C.current), de());
     };
-    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 p.addEventListener("animationend", X), w.current = window.requestAnimationFrame(() => {
+      w.current = null, B("reject"), w.current = window.requestAnimationFrame(() => {
+        w.current = null, C.current = window.setTimeout(() => {
+          p.removeEventListener("animationend", X), de();
+        }, Lt(p));
       });
     }), () => {
-      H.removeEventListener("animationend", ue), b.current !== null && (window.cancelAnimationFrame(b.current), b.current = null), y.current !== null && (window.clearTimeout(y.current), y.current = null);
+      p.removeEventListener("animationend", X), w.current !== null && (window.cancelAnimationFrame(w.current), w.current = null), C.current !== null && (window.clearTimeout(C.current), C.current = null);
     };
-  }, [o.closeAttemptFeedbackKey, r]);
-  const ze = Pt(A), ut = {
-    ...ze,
+  }, [o.closeAttemptFeedbackKey, c]);
+  const je = Bt(I), st = {
+    ...je,
     ...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` } : {}
+    ...ge !== void 0 ? { "--oc-modal-peek-height": `${ge}px` } : {},
+    ...J !== void 0 ? { "--oc-modal-sheet-height": `${J}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 = {
+  }, Ie = {
     // 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": G * 2
+  }, it = o.headerHeight > 0 ? {
+    ...I,
     "--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
+  } : I, ct = kt({
+    contentNode: W,
+    initialFocus: te,
+    modal: o.modal,
+    titleNode: o.titleNode
+  }), { setBackdropDismissalDisabled: Fe, setBackgroundInteractive: Re } = o, dt = d !== "hidden" || V;
+  ue(() => {
+    O !== P && D(O);
+  }, [P, O]);
+  const Q = g(() => {
+    H.current !== null && (window.clearTimeout(H.current), H.current = null);
+  }, []), ce = g(() => {
+    d === "hidden" && (Q(), D((s) => {
+      const p = Ke(
+        s,
+        d
       );
-      return H.resolvedBackdrop !== "hidden" || !H.exiting ? H : {
-        ...H,
+      return p.resolvedBackdrop !== "hidden" || !p.exiting ? p : {
+        ...p,
         exiting: !1
       };
     }));
-  }, [le, u]);
-  return ne(
+  }, [Q, d]);
+  return Y(
     () => () => {
-      le();
+      Q();
     },
-    [le]
-  ), ye(() => {
-    if (!oe || u !== "hidden") return;
-    const i = Y.current;
-    if (!i) {
-      B.current = window.setTimeout(ve, 0);
+    [Q]
+  ), ue(() => {
+    if (!V || d !== "hidden") return;
+    const s = se.current;
+    if (!s) {
+      H.current = window.setTimeout(ce, 0);
       return;
     }
-    le(), B.current = window.setTimeout(
-      ve,
-      Lt(i)
+    Q(), H.current = window.setTimeout(
+      ce,
+      jt(s)
     );
   }, [
-    le,
-    ve,
-    oe,
-    u
-  ]), ye(() => (Re(u === "hidden"), Be(z || xe), () => {
-    Re(!1), Be(!1);
+    Q,
+    ce,
+    V,
+    d
+  ]), ue(() => (Fe(d === "hidden"), Re(q || Te), () => {
+    Fe(!1), Re(!1);
   }), [
-    xe,
-    z,
-    u,
-    Re,
-    Be
-  ]), /* @__PURE__ */ ae($.Portal, { container: fe, children: [
-    ft ? /* @__PURE__ */ d(
-      $.Backdrop,
+    Te,
+    q,
+    d,
+    Fe,
+    Re
+  ]), /* @__PURE__ */ Oe(L.Portal, { container: we, children: [
+    dt ? /* @__PURE__ */ u(
+      L.Backdrop,
       {
-        ref: Y,
-        className: c.backdrop,
+        ref: se,
+        className: x.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": Te ? "true" : void 0,
+        "data-oc-modal-placement": c,
         "data-oc-modal-presentation-state": o.presentationState,
-        style: je,
-        onTransitionCancel: (i) => {
-          i.currentTarget === i.target && i.propertyName === "opacity" && ve();
+        style: Ie,
+        onTransitionCancel: (s) => {
+          s.currentTarget === s.target && s.propertyName === "opacity" && ce();
         },
-        onTransitionEnd: (i) => {
-          i.currentTarget === i.target && i.propertyName === "opacity" && ve();
+        onTransitionEnd: (s) => {
+          s.currentTarget === s.target && s.propertyName === "opacity" && ce();
         },
         onClick: () => {
           if (o.disablePointerDismissal) {
-            if (Te()) return;
+            if (xe()) return;
             o.notifyCloseAttemptRejected({ reason: "backdrop-press" });
             return;
           }
           if (!o.canDismissByBehavior({ reason: "backdrop-press" })) {
-            if (Te()) return;
+            if (xe()) return;
             o.notifyCloseAttemptRejected({ reason: "backdrop-press" });
             return;
           }
-          if (r === "bottom" && _) {
+          if (c === "bottom" && T) {
             if (o.presentationState === "visible") {
-              if (Te()) return;
+              if (xe()) return;
               o.setPresentationState("peeked");
             }
             return;
@@ -599,71 +598,66 @@ function _t({
         }
       }
     ) : null,
-    /* @__PURE__ */ d(
-      $.Viewport,
+    /* @__PURE__ */ u(
+      L.Viewport,
       {
-        className: c.viewport,
+        className: x.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": c,
+        style: Ie,
+        children: /* @__PURE__ */ Oe(
+          L.Popup,
           {
-            ...re,
-            ...st,
-            ref: dt,
-            initialFocus: mt,
-            className: R(
-              c.surfaceMotion,
-              c[a],
+            ...Me,
+            ...nt,
+            ref: rt,
+            initialFocus: ct,
+            className: ke(
+              x.surfaceMotion,
+              x[r],
               e
             ),
             "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,
+            "data-oc-size": r,
+            "data-oc-resize": i,
+            "data-oc-modal-feedback": c === "popup" ? _ : void 0,
+            "data-oc-modal-placement": c,
+            "data-oc-modal-snapping": M || N ? "true" : void 0,
+            "data-oc-modal-sheet-sizing": Xe ? "managed" : void 0,
+            "data-oc-modal-sheet-transition": Ze === "auto" ? "auto" : void 0,
+            style: st,
             children: [
-              r === "bottom" ? /* @__PURE__ */ d(
+              c === "bottom" ? /* @__PURE__ */ u(
                 "div",
                 {
                   "aria-hidden": "true",
-                  className: R(
-                    c.bottomFill,
-                    c[a],
+                  className: ke(
+                    x.bottomFill,
+                    x[r],
                     e
                   ),
                   "data-oc-part": "bottom-fill",
                   "data-oc-component": "modal-bottom-fill",
-                  "data-oc-size": a,
-                  style: ze
+                  "data-oc-size": r,
+                  style: je
                 }
               ) : null,
-              /* @__PURE__ */ d(
-                "div",
+              /* @__PURE__ */ u(
+                Mt,
                 {
-                  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: at,
+                  className: e,
+                  contentTransition: Ye === "auto" ? "auto" : void 0,
+                  placement: c,
+                  resize: i,
+                  scrollable: o.scrollState.canScroll,
+                  size: r,
+                  style: it,
+                  variant: n,
                   children: t
                 }
               )
@@ -674,352 +668,177 @@ function _t({
     )
   ] });
 }
-function Gt({
+function _t({
   className: e = "",
   title: t,
   children: n,
-  leadingContent: a,
-  trailingContent: l,
-  closeLabel: N = "닫기",
-  closeButton: m = !0,
-  handle: C = !0,
-  ref: f,
-  ...M
+  leadingContent: r,
+  trailingContent: i,
+  closeLabel: f = "닫기",
+  closeButton: b = !0,
+  handle: S = !0,
+  ref: m,
+  ...F
 }) {
-  const h = me("ModalHeader"), { setHeaderNode: S, scrollState: x } = h, p = pe(
-    () => Fe(S, f),
-    [f, S]
-  ), T = Qe(a);
-  return /* @__PURE__ */ ae(
-    bt,
+  const v = ee("ModalHeader"), { setHeaderNode: R, setTitleNode: k, scrollState: y } = v, te = Z(
+    () => Be(R, m),
+    [m, R]
+  ), j = Z(
+    () => Be(k),
+    [k]
+  );
+  return /* @__PURE__ */ u(
+    Nt,
     {
-      ...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
-              ] })
-            ]
-          }
-        )
-      ]
+      ...F,
+      ref: te,
+      className: e,
+      closeContent: b ? /* @__PURE__ */ u(_e, { label: f }) : null,
+      handleContent: S && v.canRenderHandle ? /* @__PURE__ */ u(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: x.handle,
+          "data-oc-part": "handle"
+        }
+      ) : null,
+      leadingContent: r,
+      sticky: y.scrolledFromTop,
+      titleContent: t ? /* @__PURE__ */ u(
+        L.Title,
+        {
+          ref: j,
+          className: x.initialFocusTitle,
+          tabIndex: -1,
+          children: t
+        }
+      ) : void 0,
+      trailingContent: i,
+      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 Gt({
+  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 = ee("ModalNavigationSection"), {
+    canRenderHandle: r,
+    notifyPopupSnapLayoutChange: i,
+    placement: f
+  } = n;
+  return /* @__PURE__ */ u(
+    Tt,
     {
-      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 && r,
+      onPanelMotionStateChange: () => {
+        f === "popup" && i();
+      }
     }
   );
 }
-function Qt({
+function Jt({
   className: e = "",
   children: t,
   layout: n = "content",
-  containerClassName: a = "",
-  containerProps: l,
-  ref: N,
-  ...m
+  containerClassName: r = "",
+  containerProps: i,
+  ref: f,
+  ...b
 }) {
-  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 = ee("ModalBody"), { bodyNode: m, setBodyNode: F, setScrollState: v } = S, { setBodyRef: R, updateScrollState: k } = yt({
+    bodyNode: m,
+    bodyRef: f,
+    setBodyNode: F,
+    setScrollState: v
+  });
+  return /* @__PURE__ */ u(
+    wt,
     {
-      ...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: R,
+        onScroll: (y) => {
+          i?.onScroll?.(y), k(y.currentTarget);
         }
-      )
+      },
+      bodyContentProps: { ...i, className: r },
+      layout: n,
+      scrollAreaProps: { ...b, className: e },
+      children: t
     }
   );
 }
-function Xt({
+function Qt({
   className: e = "",
   children: t,
   background: n = "auto",
-  ref: a,
-  ...l
+  ref: r,
+  ...i
 }) {
-  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 f = ee("ModalFooter"), { scrollState: b, setFooterNode: S } = f, m = Z(
+    () => Be(S, r),
+    [r, S]
+  ), F = Ct(
+    n,
+    b
+  );
+  return /* @__PURE__ */ u(
+    Ht,
     {
-      ...l,
-      ref: f,
-      className: R(c.footer, e),
-      "data-oc-part": "footer",
-      "data-oc-component": "modal-footer",
-      "data-oc-background": M ? "true" : "false",
+      ...i,
+      ref: m,
+      backgroundActive: F,
+      className: e,
       children: t
     }
   );
 }
-function Xe({
+function _e({
   className: e = "",
-  children: t = /* @__PURE__ */ d(gt, {}),
+  children: t = /* @__PURE__ */ u(lt, {}),
   label: n = "닫기",
-  size: a = 24,
-  disabled: l,
-  onClick: N,
-  ...m
+  size: r = 24,
+  disabled: i,
+  onClick: f,
+  ...b
 }) {
-  const C = me("ModalClose");
-  return /* @__PURE__ */ d(
-    St,
+  const S = ee("ModalClose");
+  return /* @__PURE__ */ u(
+    ut,
     {
-      ...m,
-      className: R(c.close, e),
-      "aria-label": m["aria-label"] ?? n,
+      ...b,
+      className: ke(x.close, e),
+      "aria-label": b["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: i,
+      onClick: (m) => {
+        f?.(m), !m.defaultPrevented && !i && S.requestClose({ reason: "close-button" });
       },
-      size: a,
+      size: r,
       children: t
     }
   );
 }
-const No = Object.assign(We, {
-  Root: We,
-  Trigger: Ut,
-  Content: _t,
-  Header: Gt,
-  NavigationSection: Jt,
-  Body: Qt,
-  Footer: Xt,
-  Close: Xe
+const bo = Object.assign(Ue, {
+  Root: Ue,
+  Trigger: Wt,
+  Content: Ut,
+  Header: _t,
+  NavigationSection: Gt,
+  Body: Jt,
+  Footer: Qt,
+  Close: _e
 });
 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
+  Jt as ModalBody,
+  _e as ModalClose,
+  Ut as ModalContent,
+  Qt as ModalFooter,
+  _t as ModalHeader,
+  Gt as ModalNavigationSection,
+  Ue as ModalRoot,
+  Wt as ModalTrigger,
+  bo as default
 };