@orioncactuscorp/ui 1.6.0 → 1.8.0

package/dist/components/Modal/Modal.js

@@ -1,30 +1,34 @@
 'use client';
-import { jsx as d, jsxs as X } from "react/jsx-runtime";
-import { useCallback as R, useEffect as z, useRef as j, useState as T, useMemo as ge, useLayoutEffect as ve } from "react";
-import { Dialog as A } from "@base-ui-components/react/dialog";
-import ye from "@orioncactuscorp/icons/orioncactus/CloseThick";
-import Ce from "../Background/Background.js";
-import Se from "../BackgroundIconButton/BackgroundIconButton.js";
-import { ScrollArea as Me, ScrollAreaContainer as Ne } from "../ScrollArea/ScrollArea.js";
-import { useModalContext as Y, ModalProvider as we } from "./contexts.js";
-import { useControllableState as Fe } from "./useControllableState.js";
-import { useMeasuredElement as pe } from "./useElementSize.js";
-import { useModalDrag as Re } from "./useModalDrag.js";
-import { useModalPlacement as Te } from "./useModalPlacement.js";
-import { useModalStackDepth as He } from "./useModalStackDepth.js";
-import { getModalScrollState as Ae } from "./modalScrollArbitration.js";
-import { resolveModalSnapMetrics as Be, resolveModalPopupSnapPositions as De } from "./snapPoints.js";
-import l from "./Modal.module.scss.js";
-function H(...e) {
+import { jsx as c, jsxs as Z } from "react/jsx-runtime";
+import { useCallback as P, useEffect as ne, useRef as Y, useState as T, useMemo as be, useLayoutEffect as Ce, useId as Me } from "react";
+import { Dialog as $ } from "@base-ui-components/react/dialog";
+import Pe from "@orioncactuscorp/icons/orioncactus/CloseThick";
+import { MotionExpand as Re } from "../../react/motion.js";
+import He from "../Background/Background.js";
+import Te from "../BackgroundIconButton/BackgroundIconButton.js";
+import we from "../Interaction/Interaction.js";
+import { ScrollArea as ve, ScrollAreaContainer as ye } from "../ScrollArea/ScrollArea.js";
+import { DisclosureIndicator as Fe } from "../internal/DisclosureIndicator.js";
+import { normalizeSlotIcon as xe } from "../internal/slot.js";
+import { useModalContext as re, ModalProvider as Ae } from "./contexts.js";
+import { useControllableState as ke } from "./useControllableState.js";
+import { useMeasuredElement as ue } from "./useElementSize.js";
+import { useModalDrag as Be } from "./useModalDrag.js";
+import { useModalPlacement as De } from "./useModalPlacement.js";
+import { useModalStackDepth as Ie } from "./useModalStackDepth.js";
+import { getModalScrollState as Ee } from "./modalScrollArbitration.js";
+import { resolveModalSnapMetrics as je, resolveModalPopupSnapPositions as Le } from "./snapPoints.js";
+import n from "./Modal.module.scss.js";
+function R(...e) {
   return e.filter(Boolean).join(" ");
 }
-function Pe(e) {
+function Se(e) {
   return e != null && e !== !1 && e !== "";
 }
-function de(e, t) {
+function pe(e, t) {
   typeof e == "function" ? e(t) : e && (e.current = t);
 }
-function xe(e) {
+function $e(e) {
   if (!e) return;
   const t = Object.entries(e).filter(
     ([r]) => r.startsWith("--")
@@ -32,44 +36,46 @@ function xe(e) {
   if (t.length !== 0)
     return Object.fromEntries(t);
 }
-function je(e) {
+function Ve(e) {
   const t = e.trim();
   return t.endsWith("ms") ? Number.parseFloat(t) || 0 : t.endsWith("s") ? (Number.parseFloat(t) || 0) * 1e3 : 0;
 }
 function fe(e) {
-  return e.split(",").reduce((t, r) => Math.max(t, je(r)), 0);
+  return e.split(",").reduce((t, r) => Math.max(t, Ve(r)), 0);
 }
-function Ee(e) {
-  const t = window.getComputedStyle(e), r = fe(t.animationDuration), a = fe(t.animationDelay);
-  return r + a + 250;
+function Oe(e) {
+  const t = window.getComputedStyle(e), r = fe(t.animationDuration), s = fe(t.animationDelay);
+  return r + s + 250;
 }
-function Ie({
+function qe({
   defaultSnapPosition: e,
   node: t,
   snapPositions: r
 }) {
   if (!r?.length) return;
-  const a = De({
+  const s = Le({
     defaultSnapPosition: e,
     snapPositions: r,
     surfaceMotion: t
   });
-  a && (t.style.setProperty(
+  if (!s) return;
+  const l = s.defaultTarget;
+  t.style.setProperty(
     "--oc-modal-translate-x",
-    `${a.defaultTarget.x}px`
+    l.settledTranslate?.x ?? `${l.x}px`
   ), t.style.setProperty(
     "--oc-modal-translate-y",
-    `${a.defaultTarget.y}px`
-  ));
+    l.settledTranslate?.y ?? `${l.y}px`
+  );
 }
-function Oe(e) {
+function Ke(e) {
   if (e && typeof e == "object" && "reason" in e && typeof e.reason == "string")
     return e.reason;
 }
-function ce(e) {
+function de(e) {
   e && typeof e == "object" && "cancel" in e && typeof e.cancel == "function" && e.cancel();
 }
-function qe(e, t) {
+function ze(e, t) {
   switch (t) {
     case "drag-dismiss":
       return e?.drag ?? "auto";
@@ -87,22 +93,22 @@ function qe(e, t) {
       return e?.programmatic ?? "auto";
   }
 }
-function Le(e, t) {
+function We(e, t) {
   return t > 0 && (e === "drag-dismiss" || e === "backdrop-press" || e === "outside-press");
 }
-function he(e, t) {
+function ge(e, t) {
   return t && (e === "backdrop-press" || e === "outside-press");
 }
-function $e({
+function Ue({
   backdrop: e,
   canSnapPopup: t,
   placement: r,
-  presentationState: a
+  presentationState: s
 }) {
-  return e !== "auto" ? e : r === "bottom" && a === "peeked" || t ? "hidden" : "visible";
+  return e !== "auto" ? e : r === "bottom" && s === "peeked" || t ? "hidden" : "visible";
 }
-function Ke(e) {
-  switch (Oe(e)) {
+function _e(e) {
+  switch (Ke(e)) {
     case "close-press":
       return "close-button";
     case "outside-press":
@@ -117,370 +123,380 @@ function Ke(e) {
       return "programmatic";
   }
 }
-function be({
+function Ge(e) {
+  return e >= 2 && e <= 6;
+}
+function he({
   children: e,
   open: t,
   defaultOpen: r,
-  modal: a = !0,
-  onOpenChange: p,
-  canCloseAttempt: y,
+  modal: s = !0,
+  onOpenChange: l,
+  canCloseAttempt: b,
   onCloseAttempt: u,
-  presentationState: g,
-  defaultPresentationState: f = "visible",
-  onPresentationStateChange: M,
-  disablePointerDismissal: i,
-  navigationDepth: k = 0,
-  dismissBehavior: c
+  presentationState: y,
+  defaultPresentationState: g = "visible",
+  onPresentationStateChange: k,
+  disablePointerDismissal: f,
+  navigationDepth: p = 0,
+  dismissBehavior: w
 }) {
-  const v = t !== void 0, [E, I] = T(
+  const i = t !== void 0, [H, V] = T(
     r ?? !1
-  ), U = v ? t : E, [O, se] = T("bottom"), [o, _] = T(!1), [q, Z] = T(!1), [s, G] = T(!1), [ee, te] = T(!1), [L, J] = T(0), [C, N] = T(null), [oe, $] = T({
+  ), O = i ? t : H, [q, ce] = T("bottom"), [a, K] = T(!1), [B, J] = T(!1), [d, D] = T(!1), [h, ee] = T(!1), [z, Q] = T(0), [S, C] = T(0), [te, W] = T(null), [U, F] = T({
     canScroll: !1,
     scrolledFromTop: !1,
     scrolledToBottom: !0
-  }), [B, S] = Fe({
-    value: g,
-    defaultValue: f,
-    onChange: M
-  }), w = pe(), D = pe(), K = Math.max(0, k), F = R(
-    (n, h) => {
-      v || I(n), p?.(n, h);
+  }), [N, I] = ke({
+    value: y,
+    defaultValue: g,
+    onChange: k
+  }), x = ue(), M = ue(), X = Math.max(0, p), v = P(
+    (o, m) => {
+      i || V(o), l?.(o, m);
     },
-    [p, v]
-  ), P = R(
-    (n = { reason: "programmatic" }) => y?.(n) !== !1,
-    [y]
-  ), b = R(
-    (n = { reason: "programmatic" }) => {
-      J((h) => h + 1);
+    [l, i]
+  ), E = P(
+    (o = { reason: "programmatic" }) => b?.(o) !== !1,
+    [b]
+  ), A = P(
+    (o = { reason: "programmatic" }) => {
+      Q((m) => m + 1);
     },
     []
-  ), V = R(
-    (n = { reason: "programmatic" }) => {
-      if (he(n.reason, s))
+  ), oe = P(() => {
+    C((o) => o + 1);
+  }, []), j = P(
+    (o = { reason: "programmatic" }) => {
+      if (ge(o.reason, d))
         return !1;
-      const h = qe(c, n.reason);
-      return h === "allow" ? !0 : h === "block" ? !1 : !Le(n.reason, K);
+      const m = ze(w, o.reason);
+      return m === "allow" ? !0 : m === "block" ? !1 : !We(o.reason, X);
     },
-    [s, c, K]
-  ), W = R(
-    (n = { reason: "programmatic" }, h = {}) => {
-      const { commit: Q = !0, skipAttempt: m = !1 } = h;
-      return !m && he(n.reason, s) ? (ce(n.eventDetails), !1) : !m && !V(n) || !m && !P(n) || !m && u?.(n) === !1 ? (ce(n.eventDetails), b(n), !1) : (Q && F(!1, n.eventDetails), !0);
+    [d, w, X]
+  ), _ = P(
+    (o = { reason: "programmatic" }, m = {}) => {
+      const { commit: le = !0, skipAttempt: L = !1 } = m;
+      return !L && ge(o.reason, d) ? (de(o.eventDetails), !1) : !L && !j(o) || !L && !E(o) || !L && u?.(o) === !1 ? (de(o.eventDetails), A(o), !1) : (le && v(!1, o.eventDetails), !0);
     },
     [
-      P,
-      s,
-      V,
-      F,
-      b,
+      E,
+      d,
+      j,
+      v,
+      A,
       u
     ]
-  ), le = R(
-    (n, h) => {
-      if (n && B === "peeked" && S("visible"), !n) {
-        W({
-          reason: Ke(h),
-          eventDetails: h
+  ), ae = P(
+    (o, m) => {
+      if (o && N === "peeked" && I("visible"), !o) {
+        _({
+          reason: _e(m),
+          eventDetails: m
         });
         return;
       }
-      F(n, h);
+      v(o, m);
     },
-    [F, B, W, S]
-  ), ae = B === "visible" && !ee ? a : !1, ie = i || O === "bottom" && o, re = ge(
+    [v, N, _, I]
+  ), G = N === "visible" && !h ? s : !1, se = f || q === "bottom" && a, ie = be(
     () => ({
-      open: U,
-      placement: O,
-      setPlacement: se,
-      presentationState: B,
-      setPresentationState: S,
-      requestClose: W,
-      canDismissByBehavior: V,
-      canCloseAttempt: P,
-      closeAttemptFeedbackKey: L,
-      notifyCloseAttemptRejected: b,
-      disablePointerDismissal: i ?? !1,
-      setBackdropDismissalDisabled: G,
-      setBackgroundInteractive: te,
-      canPeek: o,
-      setCanPeek: _,
-      canRenderHandle: q,
-      setCanRenderHandle: Z,
-      headerHeight: w.height,
-      footerHeight: D.height,
-      setHeaderNode: w.setNode,
-      setFooterNode: D.setNode,
-      bodyNode: C,
-      setBodyNode: N,
-      scrollState: oe,
-      setScrollState: $
+      open: O,
+      placement: q,
+      setPlacement: ce,
+      presentationState: N,
+      setPresentationState: I,
+      requestClose: _,
+      canDismissByBehavior: j,
+      canCloseAttempt: E,
+      closeAttemptFeedbackKey: z,
+      notifyCloseAttemptRejected: A,
+      disablePointerDismissal: f ?? !1,
+      setBackdropDismissalDisabled: D,
+      setBackgroundInteractive: ee,
+      canPeek: a,
+      setCanPeek: K,
+      canRenderHandle: B,
+      setCanRenderHandle: J,
+      popupSnapLayoutVersion: S,
+      notifyPopupSnapLayoutChange: oe,
+      headerHeight: x.height,
+      footerHeight: M.height,
+      setHeaderNode: x.setNode,
+      setFooterNode: M.setNode,
+      bodyNode: te,
+      setBodyNode: W,
+      scrollState: U,
+      setScrollState: F
     }),
     [
-      C,
-      o,
+      te,
+      a,
+      B,
+      j,
+      E,
+      z,
+      M.height,
+      M.setNode,
+      x.height,
+      x.setNode,
+      A,
+      oe,
+      S,
+      O,
       q,
-      V,
-      P,
-      L,
-      D.height,
-      D.setNode,
-      w.height,
-      w.setNode,
-      b,
+      _,
       U,
-      O,
-      W,
-      oe,
-      i,
-      B,
-      S
+      f,
+      N,
+      I
     ]
   );
-  return /* @__PURE__ */ d(we, { value: re, children: /* @__PURE__ */ d(
-    A.Root,
+  return /* @__PURE__ */ c(Ae, { value: ie, children: /* @__PURE__ */ c(
+    $.Root,
     {
-      open: U,
-      modal: ae,
-      onOpenChange: le,
-      disablePointerDismissal: ie,
+      open: O,
+      modal: G,
+      onOpenChange: ae,
+      disablePointerDismissal: se,
       children: e
     }
   ) });
 }
-function Ve({
+function Je({
   className: e = "",
   children: t,
   render: r,
-  nativeButton: a
+  nativeButton: s
 }) {
-  return r ? /* @__PURE__ */ d(
-    A.Trigger,
+  return r ? /* @__PURE__ */ c(
+    $.Trigger,
     {
       render: r,
-      nativeButton: a,
+      nativeButton: s,
       "data-oc-component": "modal-trigger",
       children: t
     }
-  ) : /* @__PURE__ */ d(
-    A.Trigger,
+  ) : /* @__PURE__ */ c(
+    $.Trigger,
     {
-      className: H(l.trigger, e),
-      nativeButton: a,
+      className: R(n.trigger, e),
+      nativeButton: s,
       "data-oc-component": "modal-trigger",
       children: t
     }
   );
 }
-function We({
+function Qe({
   className: e = "",
   children: t,
   variant: r = "adaptive",
-  size: a = "medium",
-  resize: p = "hug",
-  backdrop: y = "auto",
+  size: s = "medium",
+  resize: l = "content",
+  backdrop: b = "auto",
   drag: u = "content",
-  peekable: g = !1,
-  snapPoints: f,
-  defaultSnapPoint: M,
-  snapPositions: i,
-  defaultSnapPosition: k,
-  initialFocus: c,
-  peekHeight: v,
-  closeThreshold: E,
-  scrollLockTimeout: I,
-  container: U,
-  style: O,
-  ...se
+  peekable: y = !1,
+  snapPoints: g,
+  defaultSnapPoint: k,
+  snapPositions: f,
+  defaultSnapPosition: p,
+  initialFocus: w,
+  peekHeight: i,
+  closeThreshold: H,
+  scrollLockTimeout: V,
+  container: O,
+  style: q,
+  ...ce
 }) {
-  const o = Y("ModalContent"), { setCanPeek: _, setCanRenderHandle: q, setPlacement: Z } = o, s = Te(r), G = j(null), ee = j(null), te = j(null), L = j(null), J = j(0), C = j(null), N = j(null), [oe, $] = T(), B = u === "handle" || u === "content", S = s === "popup" && u === "content" && !!i?.length, w = $e({
-    backdrop: y,
-    canSnapPopup: S,
-    placement: s,
-    presentationState: o.presentationState
-  }), D = S && w === "hidden", K = (s === "bottom" || S) && B, F = s === "bottom" && K && g, P = F && v !== void 0 ? v : o.headerHeight > 0 ? o.headerHeight : void 0, b = ge(() => {
-    if (!(!f?.length || typeof window > "u"))
-      return Be({
-        snapPoints: f,
-        defaultSnapPoint: M,
+  const a = re("ModalContent"), { setCanPeek: K, setCanRenderHandle: B, setPlacement: J } = a, d = De(r), D = Y(null), h = Y(null), ee = Y(null), z = Y(null), Q = Y(0), S = Y(null), C = Y(null), [te, W] = T(), U = u === "handle" || u === "content", F = d === "popup" && U && !!f?.length, N = Ue({
+    backdrop: b,
+    canSnapPopup: F,
+    placement: d,
+    presentationState: a.presentationState
+  }), I = F && N === "hidden", x = (d === "bottom" || F) && U, M = d === "bottom" && x && y, X = M && i !== void 0 ? i : a.headerHeight > 0 ? a.headerHeight : void 0, v = be(() => {
+    if (!(!g?.length || typeof window > "u"))
+      return je({
+        snapPoints: g,
+        defaultSnapPoint: k,
         viewportHeight: window.innerHeight
       });
-  }, [M, f]), V = He(o.open);
-  z(() => {
-    Z(s);
-  }, [s, Z]), z(() => {
-    o.open || (L.current = null);
-  }, [o.open]), z(() => (_(F), () => _(!1)), [F, _]), z(() => (q(K), () => q(!1)), [K, q]);
-  const W = Re({
+  }, [k, g]), E = Ie(a.open);
+  ne(() => {
+    J(d);
+  }, [d, J]), ne(() => {
+    a.open || (z.current = null);
+  }, [a.open]), ne(() => (K(M), () => K(!1)), [M, K]), ne(() => (B(x), () => B(!1)), [x, B]);
+  const A = Be({
     enabled: u !== !1,
     drag: u,
-    open: o.open,
-    placement: s,
-    surfaceMotionRef: G,
-    backdropRef: te,
-    bodyNode: o.bodyNode,
-    snapHeights: b?.snapHeights,
-    peekHeight: F ? v : void 0,
-    peekFallback: F ? "header" : void 0,
-    presentationState: o.presentationState,
-    setPresentationState: o.setPresentationState,
-    requestClose: o.requestClose,
-    canCloseAttempt: o.canCloseAttempt,
-    dismissible: !o.disablePointerDismissal && o.canDismissByBehavior({ reason: "drag-dismiss" }),
-    visibleTranslate: b?.visibleTranslate,
-    snapPositions: S ? i : void 0,
-    defaultSnapPosition: k,
-    closeThreshold: E,
-    scrollLockTimeout: I
-  }), le = R(
-    (m) => {
-      G.current = m, m && o.open && S && L.current !== m && (Ie({
-        defaultSnapPosition: k,
-        node: m,
-        snapPositions: i
-      }), L.current = m);
+    open: a.open,
+    placement: d,
+    surfaceMotionRef: D,
+    backdropRef: ee,
+    bodyNode: a.bodyNode,
+    snapHeights: v?.snapHeights,
+    peekHeight: M ? i : void 0,
+    peekFallback: M ? "header" : void 0,
+    presentationState: a.presentationState,
+    setPresentationState: a.setPresentationState,
+    requestClose: a.requestClose,
+    canCloseAttempt: a.canCloseAttempt,
+    dismissible: !a.disablePointerDismissal && a.canDismissByBehavior({ reason: "drag-dismiss" }),
+    visibleTranslate: v?.visibleTranslate,
+    snapPositions: F ? f : void 0,
+    defaultSnapPosition: p,
+    closeThreshold: H,
+    scrollLockTimeout: V,
+    popupSnapLayoutVersion: a.popupSnapLayoutVersion
+  }), oe = P(
+    (o) => {
+      D.current = o, o && a.open && F && z.current !== o && (qe({
+        defaultSnapPosition: p,
+        node: o,
+        snapPositions: f
+      }), z.current = o);
     },
-    [S, o.open, k, i]
+    [F, a.open, p, f]
   );
-  z(() => {
-    const m = o.closeAttemptFeedbackKey;
-    if (m === 0 || s !== "popup" || J.current === m) {
-      J.current = m, $(void 0);
+  ne(() => {
+    const o = a.closeAttemptFeedbackKey;
+    if (o === 0 || d !== "popup" || Q.current === o) {
+      Q.current = o, W(void 0);
       return;
     }
-    const x = ee.current;
-    if (!x) return;
-    J.current = m, C.current !== null && window.cancelAnimationFrame(C.current), N.current !== null && window.clearTimeout(N.current), $(void 0);
-    const ue = () => {
-      $(void 0), N.current = null;
-    }, ne = (me) => {
-      me.target === x && me.animationName === "oc-modal-reject-shake" && (x.removeEventListener("animationend", ne), N.current !== null && window.clearTimeout(N.current), ue());
+    const m = h.current;
+    if (!m) return;
+    Q.current = o, S.current !== null && window.cancelAnimationFrame(S.current), C.current !== null && window.clearTimeout(C.current), W(void 0);
+    const le = () => {
+      W(void 0), C.current = null;
+    }, L = (me) => {
+      me.target === m && me.animationName === "oc-modal-reject-shake" && (m.removeEventListener("animationend", L), C.current !== null && window.clearTimeout(C.current), le());
     };
-    return x.addEventListener("animationend", ne), C.current = window.requestAnimationFrame(() => {
-      C.current = null, $("reject"), C.current = window.requestAnimationFrame(() => {
-        C.current = null, N.current = window.setTimeout(() => {
-          x.removeEventListener("animationend", ne), ue();
-        }, Ee(x));
+    return m.addEventListener("animationend", L), S.current = window.requestAnimationFrame(() => {
+      S.current = null, W("reject"), S.current = window.requestAnimationFrame(() => {
+        S.current = null, C.current = window.setTimeout(() => {
+          m.removeEventListener("animationend", L), le();
+        }, Oe(m));
       });
     }), () => {
-      x.removeEventListener("animationend", ne), C.current !== null && (window.cancelAnimationFrame(C.current), C.current = null), N.current !== null && (window.clearTimeout(N.current), N.current = null);
+      m.removeEventListener("animationend", L), S.current !== null && (window.cancelAnimationFrame(S.current), S.current = null), C.current !== null && (window.clearTimeout(C.current), C.current = null);
     };
-  }, [o.closeAttemptFeedbackKey, s]);
-  const ae = xe(O), ie = {
-    ...ae,
-    ...o.headerHeight > 0 ? { "--oc-modal-header-height": `${o.headerHeight}px` } : {},
-    ...o.footerHeight > 0 ? { "--oc-modal-footer-height": `${o.footerHeight}px` } : {},
-    ...P !== void 0 ? { "--oc-modal-peek-height": `${P}px` } : {},
-    ...b?.sheetHeight !== void 0 ? { "--oc-modal-sheet-height": `${b.sheetHeight}px` } : {},
-    ...b?.visibleTranslate !== void 0 ? {
-      "--oc-modal-translate-y": `${b.visibleTranslate}px`
+  }, [a.closeAttemptFeedbackKey, d]);
+  const j = $e(q), _ = {
+    ...j,
+    ...a.headerHeight > 0 ? { "--oc-modal-header-height": `${a.headerHeight}px` } : {},
+    ...a.footerHeight > 0 ? { "--oc-modal-footer-height": `${a.footerHeight}px` } : {},
+    ...X !== void 0 ? { "--oc-modal-peek-height": `${X}px` } : {},
+    ...v?.sheetHeight !== void 0 ? { "--oc-modal-sheet-height": `${v.sheetHeight}px` } : {},
+    ...v?.visibleTranslate !== void 0 ? {
+      "--oc-modal-translate-y": `${v.visibleTranslate}px`
     } : {}
-  }, re = {
+  }, ae = {
     // Each modal reserves one backdrop slot and one viewport slot.
-    "--oc-modal-stack-offset": V * 2
-  }, n = c === "content" ? G : c, { setBackdropDismissalDisabled: h, setBackgroundInteractive: Q } = o;
-  return ve(() => (h(w === "hidden"), Q(D), () => {
-    h(!1), Q(!1);
+    "--oc-modal-stack-offset": E * 2
+  }, G = w === "content" ? D : w, { setBackdropDismissalDisabled: se, setBackgroundInteractive: ie } = a;
+  return Ce(() => (se(N === "hidden"), ie(I), () => {
+    se(!1), ie(!1);
   }), [
-    D,
-    w,
-    h,
-    Q
-  ]), /* @__PURE__ */ X(A.Portal, { container: U, children: [
-    /* @__PURE__ */ d(
-      A.Backdrop,
+    I,
+    N,
+    se,
+    ie
+  ]), /* @__PURE__ */ Z($.Portal, { container: O, children: [
+    /* @__PURE__ */ c(
+      $.Backdrop,
       {
-        ref: te,
-        className: l.backdrop,
+        ref: ee,
+        className: n.backdrop,
         "data-oc-part": "backdrop",
         "data-oc-component": "modal-backdrop",
-        "data-oc-modal-backdrop": w,
-        "data-oc-modal-placement": s,
-        "data-oc-modal-presentation-state": o.presentationState,
-        style: re,
-        onClick: (m) => {
-          if (w === "hidden") {
-            m.stopPropagation();
+        "data-oc-modal-backdrop": N,
+        "data-oc-modal-placement": d,
+        "data-oc-modal-presentation-state": a.presentationState,
+        style: ae,
+        onClick: (o) => {
+          if (N === "hidden") {
+            o.stopPropagation();
             return;
           }
-          if (o.disablePointerDismissal) {
-            o.notifyCloseAttemptRejected({ reason: "backdrop-press" });
+          if (a.disablePointerDismissal) {
+            a.notifyCloseAttemptRejected({ reason: "backdrop-press" });
             return;
           }
-          if (!o.canDismissByBehavior({ reason: "backdrop-press" })) {
-            o.notifyCloseAttemptRejected({ reason: "backdrop-press" });
+          if (!a.canDismissByBehavior({ reason: "backdrop-press" })) {
+            a.notifyCloseAttemptRejected({ reason: "backdrop-press" });
             return;
           }
-          if (s === "bottom" && F) {
-            o.presentationState === "visible" && o.setPresentationState("peeked");
+          if (d === "bottom" && M) {
+            a.presentationState === "visible" && a.setPresentationState("peeked");
             return;
           }
-          o.requestClose({ reason: "backdrop-press" });
+          a.requestClose({ reason: "backdrop-press" });
         }
       }
     ),
-    /* @__PURE__ */ d(
-      A.Viewport,
+    /* @__PURE__ */ c(
+      $.Viewport,
       {
-        className: l.viewport,
+        className: n.viewport,
         "data-oc-part": "viewport",
         "data-oc-component": "modal-viewport",
-        "data-oc-modal-placement": s,
-        style: re,
-        children: /* @__PURE__ */ X(
-          A.Popup,
+        "data-oc-modal-placement": d,
+        style: ae,
+        children: /* @__PURE__ */ Z(
+          $.Popup,
           {
-            ...se,
-            ...W,
-            ref: le,
-            initialFocus: n,
-            className: H(
-              l.surfaceMotion,
-              l[a],
+            ...ce,
+            ...A,
+            ref: oe,
+            initialFocus: G,
+            className: R(
+              n.surfaceMotion,
+              n[s],
               e
             ),
             "data-oc-part": "surface-motion",
             "data-oc-component": "modal-content",
-            "data-oc-modal-backdrop": w,
+            "data-oc-modal-backdrop": N,
             "data-oc-variant": r,
-            "data-oc-size": a,
-            "data-oc-resize": p,
-            "data-oc-modal-feedback": s === "popup" ? oe : void 0,
-            "data-oc-modal-placement": s,
-            "data-oc-modal-snapping": b || S ? "true" : void 0,
-            style: ie,
+            "data-oc-size": s,
+            "data-oc-resize": l,
+            "data-oc-modal-feedback": d === "popup" ? te : void 0,
+            "data-oc-modal-placement": d,
+            "data-oc-modal-snapping": v || F ? "true" : void 0,
+            style: _,
             children: [
-              s === "bottom" ? /* @__PURE__ */ d(
+              d === "bottom" ? /* @__PURE__ */ c(
                 "div",
                 {
                   "aria-hidden": "true",
-                  className: H(
-                    l.bottomFill,
-                    l[a],
+                  className: R(
+                    n.bottomFill,
+                    n[s],
                     e
                   ),
                   "data-oc-part": "bottom-fill",
                   "data-oc-component": "modal-bottom-fill",
-                  "data-oc-size": a,
-                  style: ae
+                  "data-oc-size": s,
+                  style: j
                 }
               ) : null,
-              /* @__PURE__ */ d(
+              /* @__PURE__ */ c(
                 "div",
                 {
-                  ref: ee,
-                  className: H(
-                    l.surface,
-                    l[p],
+                  ref: h,
+                  className: R(
+                    n.surface,
+                    n[l],
                     e
                   ),
                   "data-oc-part": "surface",
                   "data-oc-variant": r,
-                  "data-oc-size": a,
-                  "data-oc-resize": p,
-                  "data-oc-modal-placement": s,
-                  "data-oc-scrollable": o.scrollState.canScroll ? "true" : "false",
-                  style: O,
+                  "data-oc-size": s,
+                  "data-oc-resize": l,
+                  "data-oc-modal-placement": d,
+                  "data-oc-scrollable": a.scrollState.canScroll ? "true" : "false",
+                  style: q,
                   children: t
                 }
               )
@@ -491,59 +507,59 @@ function We({
     )
   ] });
 }
-function ze({
+function Xe({
   className: e = "",
   title: t,
   children: r,
-  leadingContent: a,
-  trailingContent: p,
-  closeLabel: y = "닫기",
+  leadingContent: s,
+  trailingContent: l,
+  closeLabel: b = "닫기",
   closeButton: u = !0,
-  handle: g = !0,
-  ref: f,
-  ...M
+  handle: y = !0,
+  ref: g,
+  ...k
 }) {
-  const i = Y("ModalHeader"), { setHeaderNode: k, scrollState: c } = i, v = R(
-    (I) => {
-      k(I), de(f, I);
+  const f = re("ModalHeader"), { setHeaderNode: p, scrollState: w } = f, i = P(
+    (V) => {
+      p(V), pe(g, V);
     },
-    [f, k]
-  ), E = Pe(a);
-  return /* @__PURE__ */ X(
-    Ce,
+    [g, p]
+  ), H = Se(s);
+  return /* @__PURE__ */ Z(
+    He,
     {
-      ...M,
+      ...k,
       as: "header",
-      ref: v,
+      ref: i,
       backdrop: "compact",
-      className: H(l.header, e),
+      className: R(n.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": c.scrolledFromTop ? "true" : "false",
+      "data-oc-sticky": w.scrolledFromTop ? "true" : "false",
       children: [
-        g && i.canRenderHandle ? /* @__PURE__ */ d(
+        y && f.canRenderHandle ? /* @__PURE__ */ c(
           "div",
           {
             "aria-hidden": "true",
-            className: l.handle,
+            className: n.handle,
             "data-oc-part": "handle"
           }
         ) : null,
-        /* @__PURE__ */ X(
+        /* @__PURE__ */ Z(
           "div",
           {
-            className: l.headerInner,
-            "data-oc-has-leading": E ? "true" : "false",
+            className: n.headerInner,
+            "data-oc-has-leading": H ? "true" : "false",
             "data-oc-part": "header-inner",
             children: [
-              E ? /* @__PURE__ */ d("div", { className: l.headerLeading, "data-oc-part": "header-leading", children: a }) : null,
-              /* @__PURE__ */ d("div", { className: l.headerTitle, "data-oc-part": "header-title", children: t ? /* @__PURE__ */ d(A.Title, { children: t }) : r }),
-              /* @__PURE__ */ X("div", { className: l.headerTrailing, "data-oc-part": "header-trailing", children: [
-                p,
-                u ? /* @__PURE__ */ d(ke, { label: y }) : null
+              H ? /* @__PURE__ */ c("div", { className: n.headerLeading, "data-oc-part": "header-leading", children: s }) : null,
+              /* @__PURE__ */ c("div", { className: n.headerTitle, "data-oc-part": "header-title", children: t ? /* @__PURE__ */ c($.Title, { children: t }) : r }),
+              /* @__PURE__ */ Z("div", { className: n.headerTrailing, "data-oc-part": "header-trailing", children: [
+                l,
+                u ? /* @__PURE__ */ c(Ne, { label: b }) : null
               ] })
             ]
           }
@@ -552,54 +568,218 @@ function ze({
     }
   );
 }
-function Ue({
+function Ye({
+  className: e = "",
+  title: t,
+  children: r,
+  expanded: s,
+  defaultExpanded: l = !0,
+  onExpandedChange: b,
+  disabled: u = !1,
+  forceMount: y = !0,
+  handle: g = !0,
+  headingLevel: k = 2,
+  indicator: f,
+  titleAsDialogTitle: p = !0,
+  navigationProps: w,
+  panelProps: i,
+  panelContentProps: H,
+  ref: V,
+  style: O,
+  ...q
+}) {
+  const ce = re("ModalNavigationSection"), {
+    canRenderHandle: a,
+    notifyPopupSnapLayoutChange: K,
+    placement: B
+  } = ce, { height: J, setNode: d } = ue(), D = Me(), [h, ee] = ke({
+    value: s,
+    defaultValue: l,
+    onChange: b
+  }), [z, Q] = T(
+    h ? "open" : "closed"
+  ), S = `h${Ge(k) ? k : 2}`, {
+    className: C = "",
+    id: te,
+    onClick: W,
+    ...U
+  } = w ?? {}, {
+    className: F = "",
+    id: N,
+    role: I,
+    ...x
+  } = i ?? {}, { className: M = "", ...X } = H ?? {}, v = te ?? `${D}-navigation`, E = N ?? `${D}-panel`, A = `${D}-dialog-title`, oe = Se(t), j = g && a, _ = J > 0 ? {
+    ...O,
+    "--oc-modal-navigation-block-size": `${J}px`
+  } : O, ae = P(
+    (G) => {
+      Q(G), B === "popup" && K();
+    },
+    [K, B]
+  );
+  return /* @__PURE__ */ Z(
+    "section",
+    {
+      ref: V,
+      className: R(n.navigationSection, e),
+      style: _,
+      ...q,
+      "data-oc-component": "modal-navigation-section",
+      "data-oc-motion-state": z,
+      "data-oc-state": h ? "open" : "closed",
+      children: [
+        p && oe ? /* @__PURE__ */ c(
+          $.Title,
+          {
+            className: n.navigationDialogTitle,
+            id: A,
+            children: t
+          }
+        ) : null,
+        j ? /* @__PURE__ */ c(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: n.handle,
+            "data-oc-part": "handle"
+          }
+        ) : null,
+        /* @__PURE__ */ c(S, { className: n.navigationHeading, "data-oc-part": "heading", children: /* @__PURE__ */ Z(
+          "button",
+          {
+            ...U,
+            ref: d,
+            id: v,
+            className: R(n.navigation, C),
+            type: "button",
+            disabled: u,
+            "aria-disabled": u ? "true" : U["aria-disabled"],
+            "aria-expanded": h,
+            "aria-controls": E,
+            onClick: (G) => {
+              W?.(G), !(G.defaultPrevented || u) && ee(!h);
+            },
+            "data-oc-component": "modal-navigation",
+            "data-oc-part": "navigation",
+            "data-oc-state": h ? "open" : "closed",
+            children: [
+              /* @__PURE__ */ c("span", { className: n.navigationTitle, "data-oc-part": "title", children: t }),
+              f === void 0 ? /* @__PURE__ */ c(
+                Fe,
+                {
+                  className: n.navigationIndicator,
+                  open: h
+                }
+              ) : f ? /* @__PURE__ */ c(
+                "span",
+                {
+                  className: n.navigationIndicator,
+                  "data-oc-part": "indicator",
+                  "data-oc-state": h ? "open" : "closed",
+                  children: /* @__PURE__ */ c("span", { "data-oc-part": "indicator-frame", children: xe(f) })
+                }
+              ) : null,
+              u ? null : /* @__PURE__ */ c(we, { variant: "light" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ c(
+          Re,
+          {
+            className: R(n.navigationPanel, F),
+            open: h,
+            forceMount: y,
+            intent: "expand",
+            measureBlockSize: "rendered",
+            onMotionStateChange: ae,
+            contentProps: {
+              className: n.navigationPanelFrame,
+              "data-oc-part": "panel-inner"
+            },
+            ...x,
+            "aria-hidden": h ? void 0 : !0,
+            "aria-labelledby": v,
+            id: E,
+            inert: h ? void 0 : !0,
+            role: I ?? "region",
+            "data-oc-component": "modal-navigation-panel",
+            "data-oc-state": h ? "open" : "closed",
+            children: /* @__PURE__ */ c(
+              ve,
+              {
+                className: n.navigationPanelScroll,
+                "data-oc-component": "modal-navigation-panel-scroll-area",
+                "data-oc-part": "panel-scroll-area",
+                children: /* @__PURE__ */ c(
+                  ye,
+                  {
+                    ...X,
+                    className: R(
+                      n.navigationPanelInner,
+                      M
+                    ),
+                    "data-oc-component": "modal-navigation-panel-content",
+                    children: r
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function Ze({
   className: e = "",
   children: t,
-  containerClassName: r = "",
-  containerProps: a,
-  ref: p,
-  ...y
+  layout: r = "content",
+  containerClassName: s = "",
+  containerProps: l,
+  ref: b,
+  ...u
 }) {
-  const u = Y("ModalBody"), { bodyNode: g, setBodyNode: f, setScrollState: M } = u, i = R(
-    (c) => {
-      M(Ae(c));
+  const y = re("ModalBody"), { bodyNode: g, setBodyNode: k, setScrollState: f } = y, p = P(
+    (i) => {
+      f(Ee(i));
     },
-    [M]
-  ), k = R(
-    (c) => {
-      f(c), de(p, c), i(c);
+    [f]
+  ), w = P(
+    (i) => {
+      k(i), pe(b, i), p(i);
     },
-    [p, f, i]
+    [b, k, p]
   );
-  return z(() => {
-    const c = g;
-    if (!c || (i(c), typeof ResizeObserver > "u")) return;
-    const v = new ResizeObserver(() => i(c));
-    return v.observe(c), c.firstElementChild && v.observe(c.firstElementChild), () => v.disconnect();
-  }, [g, i]), /* @__PURE__ */ d(
-    Me,
+  return ne(() => {
+    const i = g;
+    if (!i || (p(i), typeof ResizeObserver > "u")) return;
+    const H = new ResizeObserver(() => p(i));
+    return H.observe(i), i.firstElementChild && H.observe(i.firstElementChild), () => H.disconnect();
+  }, [g, p]), /* @__PURE__ */ c(
+    ve,
     {
-      ...y,
-      className: H(l.body, e),
+      ...u,
+      className: R(n.body, e),
       "data-oc-part": "body",
       "data-oc-component": "modal-body",
-      children: /* @__PURE__ */ d(
-        Ne,
+      children: /* @__PURE__ */ c(
+        ye,
         {
-          ref: k,
-          className: l.bodyContainer,
+          ref: w,
+          className: n.bodyContainer,
           "data-oc-part": "body-container",
           "data-oc-component": "modal-body-container",
-          onScroll: (c) => {
-            a?.onScroll?.(c), i(c.currentTarget);
+          onScroll: (i) => {
+            l?.onScroll?.(i), p(i.currentTarget);
           },
-          children: /* @__PURE__ */ d(
+          children: /* @__PURE__ */ c(
             "section",
             {
-              ...a,
-              className: H(l.bodyContent, r),
+              ...l,
+              className: R(n.bodyContent, s),
               "data-oc-part": "body-content",
               "data-oc-component": "modal-body-content",
+              "data-oc-layout": r,
               children: t
             }
           )
@@ -608,75 +788,77 @@ function Ue({
     }
   );
 }
-function _e({
+function et({
   className: e = "",
   children: t,
   background: r = "auto",
-  ref: a,
-  ...p
+  ref: s,
+  ...l
 }) {
-  const y = Y("ModalFooter"), { scrollState: u, setFooterNode: g } = y, f = R(
-    (k) => {
-      g(k), de(a, k);
+  const b = re("ModalFooter"), { scrollState: u, setFooterNode: y } = b, g = P(
+    (p) => {
+      y(p), pe(s, p);
     },
-    [a, g]
-  ), M = r === !0 || r === "auto" && u.canScroll && !u.scrolledToBottom;
-  return /* @__PURE__ */ d(
+    [s, y]
+  ), k = r === !0 || r === "auto" && u.canScroll && !u.scrolledToBottom;
+  return /* @__PURE__ */ c(
     "footer",
     {
-      ...p,
-      ref: f,
-      className: H(l.footer, e),
+      ...l,
+      ref: g,
+      className: R(n.footer, e),
       "data-oc-part": "footer",
       "data-oc-component": "modal-footer",
-      "data-oc-background": M ? "true" : "false",
+      "data-oc-background": k ? "true" : "false",
       children: t
     }
   );
 }
-function ke({
+function Ne({
   className: e = "",
-  children: t = /* @__PURE__ */ d(ye, {}),
+  children: t = /* @__PURE__ */ c(Pe, {}),
   label: r = "닫기",
-  size: a = 24,
-  disabled: p,
-  onClick: y,
+  size: s = 24,
+  disabled: l,
+  onClick: b,
   ...u
 }) {
-  const g = Y("ModalClose");
-  return /* @__PURE__ */ d(
-    Se,
+  const y = re("ModalClose");
+  return /* @__PURE__ */ c(
+    Te,
     {
       ...u,
-      className: H(l.close, e),
+      className: R(n.close, e),
       "aria-label": u["aria-label"] ?? r,
       "data-oc-part": "close",
       "data-oc-component": "modal-close",
-      disabled: p,
-      onClick: (f) => {
-        y?.(f), !f.defaultPrevented && !p && g.requestClose({ reason: "close-button" });
+      disabled: l,
+      onClick: (g) => {
+        b?.(g), !g.defaultPrevented && !l && y.requestClose({ reason: "close-button" });
       },
-      size: a,
+      size: s,
       children: t
     }
   );
 }
-const dt = Object.assign(be, {
-  Root: be,
-  Trigger: Ve,
-  Content: We,
-  Header: ze,
-  Body: Ue,
-  Footer: _e,
-  Close: ke
+const St = Object.assign(he, {
+  Root: he,
+  Trigger: Je,
+  Content: Qe,
+  Header: Xe,
+  NavigationSection: Ye,
+  Body: Ze,
+  Footer: et,
+  Close: Ne
 });
 export {
-  Ue as ModalBody,
-  ke as ModalClose,
-  We as ModalContent,
-  _e as ModalFooter,
-  ze as ModalHeader,
-  be as ModalRoot,
-  Ve as ModalTrigger,
-  dt as default
+  Ze as ModalBody,
+  Ne as ModalClose,
+  Qe as ModalContent,
+  et as ModalFooter,
+  Xe as ModalHeader,
+  Ye as ModalNavigationSection,
+  he as ModalRoot,
+  Je as ModalTrigger,
+  St as default
 };