@orioncactuscorp/ui 1.10.0 → 1.11.0

package/dist/components/Modal/Modal.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as d, jsxs as ae } from "react/jsx-runtime";
-import { useCallback as v, useEffect as ne, useRef as $, useState as S, useMemo as Be, useLayoutEffect as Se, useId as ht } from "react";
-import { Dialog as O } from "@base-ui-components/react/dialog";
+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";
@@ -10,7 +10,8 @@ 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 { useModalContext as pe, ModalProvider as Ct } from "./contexts.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";
@@ -27,9 +28,6 @@ function R(...e) {
 function Qe(e) {
   return e != null && e !== !1 && e !== "";
 }
-function Fe(e, t) {
-  typeof e == "function" ? e(t) : e && (e.current = t);
-}
 function Pt(e) {
   if (!e) return;
   const t = Object.entries(e).filter(
@@ -65,8 +63,8 @@ function qe(e, t) {
   };
 }
 function At(e) {
-  const [t, n] = S(Oe);
-  return Se(() => {
+  const [t, n] = v(Oe);
+  return ye(() => {
     if (!e || typeof window > "u") return;
     const a = () => {
       n(Oe());
@@ -83,15 +81,15 @@ 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 Ce(e) {
+function we(e) {
   return e.split(",").reduce((t, n) => Math.max(t, It(n)), 0);
 }
 function Vt(e) {
-  const t = window.getComputedStyle(e), n = Ce(t.animationDuration), a = Ce(t.animationDelay);
+  const t = window.getComputedStyle(e), n = we(t.animationDuration), a = we(t.animationDelay);
   return n + a + 250;
 }
 function Lt(e) {
-  const t = window.getComputedStyle(e), n = Ce(t.transitionDuration), a = Ce(t.transitionDelay);
+  const t = window.getComputedStyle(e), n = we(t.transitionDuration), a = we(t.transitionDelay);
   return n + a + 250;
 }
 function zt({
@@ -106,20 +104,20 @@ function zt({
     surfaceMotion: t
   });
   if (!a) return;
-  const u = a.defaultTarget;
+  const l = a.defaultTarget;
   t.style.setProperty(
     "--oc-modal-translate-x",
-    u.settledTranslate?.x ?? `${u.x}px`
+    l.settledTranslate?.x ?? `${l.x}px`
   ), t.style.setProperty(
     "--oc-modal-translate-y",
-    u.settledTranslate?.y ?? `${u.y}px`
+    l.settledTranslate?.y ?? `${l.y}px`
   );
 }
 function jt(e) {
   if (e && typeof e == "object" && "reason" in e && typeof e.reason == "string")
     return e.reason;
 }
-function Ne(e) {
+function Ce(e) {
   e && typeof e == "object" && "cancel" in e && typeof e.cancel == "function" && e.cancel();
 }
 function $t(e, t) {
@@ -178,134 +176,134 @@ function We({
   open: t,
   defaultOpen: n,
   modal: a = !0,
-  onOpenChange: u,
+  onOpenChange: l,
   canCloseAttempt: N,
   onCloseAttempt: m,
   presentationState: C,
   defaultPresentationState: f = "visible",
   onPresentationStateChange: M,
   disablePointerDismissal: h,
-  navigationDepth: g = 0,
+  navigationDepth: S = 0,
   dismissBehavior: x
 }) {
-  const l = t !== void 0, [T, F] = S(
+  const p = t !== void 0, [T, G] = v(
     n ?? !1
-  ), q = l ? t : T, [J, me] = S("bottom"), [I, re] = S(!1), [o, K] = S(!1), [D, W] = S(!1), [r, Q] = S(!1), [X, Y] = S(0), [U, Z] = S(0), [ie, fe] = S(null), [ee, te] = 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
-  }), [y, k] = Ge({
+  }), [b, y] = Ge({
     value: C,
     defaultValue: f,
     onChange: M
-  }), B = Pe(), _ = Pe(), V = Math.max(0, g), E = v(
-    (s, b) => {
-      l || F(s), u?.(s, b);
+  }), B = Pe(), U = Pe(), I = Math.max(0, S), D = k(
+    (s, g) => {
+      p || G(s), l?.(s, g);
     },
-    [u, l]
-  ), w = v(
+    [l, p]
+  ), w = k(
     (s = { reason: "programmatic" }) => N?.(s) !== !1,
     [N]
-  ), p = v(
+  ), u = k(
     (s = { reason: "programmatic" }) => {
-      Y((b) => b + 1);
+      Y((g) => g + 1);
     },
     []
-  ), L = v(() => {
+  ), V = k(() => {
     Z((s) => s + 1);
-  }, []), z = v(
+  }, []), L = k(
     (s = { reason: "programmatic" }) => {
-      if (Ke(s.reason, D))
+      if (Ke(s.reason, F))
         return !1;
-      const b = $t(x, s.reason);
-      return b === "allow" ? !0 : b === "block" ? !1 : !Ot(s.reason, V);
+      const g = $t(x, s.reason);
+      return g === "allow" ? !0 : g === "block" ? !1 : !Ot(s.reason, I);
     },
-    [D, x, V]
-  ), P = v(
-    (s = { reason: "programmatic" }, b = {}) => {
-      const { commit: ce = !0, skipAttempt: se = !1 } = b;
-      return !se && Ke(s.reason, D) ? (Ne(s.eventDetails), !1) : !se && !z(s) || !se && !w(s) || !se && m?.(s) === !1 ? (Ne(s.eventDetails), p(s), !1) : (ce && E(!1, s.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);
     },
     [
       w,
+      F,
+      L,
       D,
-      z,
-      E,
-      p,
+      u,
       m
     ]
-  ), oe = v(
-    (s, b) => {
-      if (s && y === "peeked" && k("visible"), !s) {
+  ), oe = k(
+    (s, g) => {
+      if (s && b === "peeked" && y("visible"), !s) {
         P({
-          reason: Kt(b),
-          eventDetails: b
+          reason: Kt(g),
+          eventDetails: g
         });
         return;
       }
-      E(s, b);
+      D(s, g);
     },
-    [E, y, P, k]
-  ), j = y === "visible" && !r ? a : !1, he = h || J === "bottom" && (I || r), G = Be(
+    [D, b, P, y]
+  ), z = b === "visible" && !r ? a : !1, ge = h || J === "bottom" && (A || r), _ = pe(
     () => ({
-      open: q,
+      open: O,
       placement: J,
-      setPlacement: me,
-      presentationState: y,
-      setPresentationState: k,
+      setPlacement: fe,
+      presentationState: b,
+      setPresentationState: y,
       requestClose: P,
-      canDismissByBehavior: z,
+      canDismissByBehavior: L,
       canCloseAttempt: w,
       closeAttemptFeedbackKey: X,
-      notifyCloseAttemptRejected: p,
+      notifyCloseAttemptRejected: u,
       disablePointerDismissal: h ?? !1,
-      setBackdropDismissalDisabled: W,
+      setBackdropDismissalDisabled: K,
       setBackgroundInteractive: Q,
-      canPeek: I,
+      canPeek: A,
       setCanPeek: re,
       canRenderHandle: o,
-      setCanRenderHandle: K,
-      popupSnapLayoutVersion: U,
-      notifyPopupSnapLayoutChange: L,
+      setCanRenderHandle: q,
+      popupSnapLayoutVersion: W,
+      notifyPopupSnapLayoutChange: V,
       headerHeight: B.height,
-      footerHeight: _.height,
+      footerHeight: U.height,
       setHeaderNode: B.setNode,
-      setFooterNode: _.setNode,
+      setFooterNode: U.setNode,
       bodyNode: ie,
-      setBodyNode: fe,
+      setBodyNode: he,
       scrollState: ee,
       setScrollState: te
     }),
     [
       ie,
-      I,
+      A,
       o,
-      z,
+      L,
       w,
       X,
-      _.height,
-      _.setNode,
+      U.height,
+      U.setNode,
       B.height,
       B.setNode,
-      p,
-      L,
-      U,
-      q,
+      u,
+      V,
+      W,
+      O,
       J,
       P,
       ee,
       h,
-      y,
-      k
+      b,
+      y
     ]
   );
-  return /* @__PURE__ */ d(Ct, { value: G, children: /* @__PURE__ */ d(
-    O.Root,
+  return /* @__PURE__ */ d(Ct, { value: _, children: /* @__PURE__ */ d(
+    $.Root,
     {
-      open: q,
-      modal: j,
+      open: O,
+      modal: z,
       onOpenChange: oe,
-      disablePointerDismissal: he,
+      disablePointerDismissal: ge,
       children: e
     }
   ) });
@@ -317,7 +315,7 @@ function Ut({
   nativeButton: a
 }) {
   return n ? /* @__PURE__ */ d(
-    O.Trigger,
+    $.Trigger,
     {
       render: n,
       nativeButton: a,
@@ -325,7 +323,7 @@ function Ut({
       children: t
     }
   ) : /* @__PURE__ */ d(
-    O.Trigger,
+    $.Trigger,
     {
       className: R(c.trigger, e),
       nativeButton: a,
@@ -339,98 +337,98 @@ function _t({
   children: t,
   variant: n = "adaptive",
   size: a = "medium",
-  resize: u = "content",
+  resize: l = "content",
   contentTransition: N = "auto",
   backdrop: m = "auto",
   backdropFrom: C,
   drag: f = "content",
   peekable: M = !1,
   snapPoints: h,
-  defaultSnapPoint: g,
+  defaultSnapPoint: S,
   snapPositions: x,
-  defaultSnapPosition: l,
+  defaultSnapPosition: p,
   initialFocus: T,
-  peekHeight: F,
-  closeThreshold: q,
+  peekHeight: G,
+  closeThreshold: O,
   scrollLockTimeout: J,
-  container: me,
-  style: I,
+  container: fe,
+  style: A,
   ...re
 }) {
-  const o = pe("ModalContent"), { setCanPeek: K, setCanRenderHandle: D, setPlacement: W } = o, r = Mt(n), Q = $(null), X = $(null), Y = $(null), U = $(null), [Z, ie] = S(null), [fe, ee] = 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
-  ), te = $(0), y = $(null), k = $(null), B = $(null), [_, V] = S(), E = f === "handle" || f === "content", w = r === "popup" && E && !!x?.length, p = qt({
+  ), 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
-  }), [L, z] = S(() => ({
-    resolvedBackdrop: p,
+  }), [V, L] = v(() => ({
+    resolvedBackdrop: u,
     exiting: !1
-  })), P = Be(
-    () => qe(L, p),
-    [L, p]
-  ), oe = P.exiting, j = w && p === "hidden", he = (r === "bottom" || w) && E, G = r === "bottom" && he && M, s = G && F !== void 0 ? F : o.headerHeight > 0 ? o.headerHeight : void 0, b = r === "bottom" && u !== "fixed", ce = At(
-    !!h?.length || b
-  ), se = Be(() => {
+  })), 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: g,
+        defaultSnapPoint: S,
         backdropFrom: C,
         viewportHeight: ce
       });
-  }, [C, g, h, ce]), A = r === "bottom" ? se : void 0, Ye = xt(o.open), [ye, Ze] = S(0), ke = $(!1), et = A !== void 0 && b, we = b && ye > 0 ? ye : void 0, de = A ? et && we !== void 0 ? we : A.sheetHeight : we, tt = A && de !== void 0 ? Math.max(0, de - A.defaultHeight) : void 0, ot = de !== void 0, He = Et({
+  }, [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: u
-  }), nt = He === "surface" ? "auto" : "none", at = He === "sheet" ? "auto" : "none", De = o.bodyNode;
+    resize: l
+  }), nt = Me === "surface" ? "auto" : "none", at = Me === "sheet" ? "auto" : "none", De = o.bodyNode;
   wt({
-    enabled: o.open && He === "surface",
-    node: fe
-  }), Se(() => {
-    if (!b) {
-      ke.current = !1;
+    enabled: o.open && Me === "surface",
+    node: he
+  }), ye(() => {
+    if (!g) {
+      Ne.current = !1;
       return;
     }
     const i = De?.firstElementChild;
     if (!i) {
-      ke.current = !1;
+      Ne.current = !1;
       return;
     }
     const H = () => {
-      const ue = i.getBoundingClientRect().height, be = Tt({
+      const ue = i.getBoundingClientRect().height, Se = Tt({
         contentHeight: ue,
         maxHeight: Dt(Z),
-        snapHeight: A?.sheetHeight
-      }), $e = Math.abs(ye - be) > 0.5;
-      ke.current = $e, $e && Ze(be);
+        snapHeight: E?.sheetHeight
+      }), $e = Math.abs(ke - Se) > 0.5;
+      Ne.current = $e, $e && Ze(Se);
     };
     if (H(), typeof ResizeObserver > "u") return;
-    const ve = new ResizeObserver(H);
-    return ve.observe(i), () => ve.disconnect();
+    const be = new ResizeObserver(H);
+    return be.observe(i), () => be.disconnect();
   }, [
     De,
-    b,
-    A?.sheetHeight,
-    ye,
+    g,
+    E?.sheetHeight,
+    ke,
     ce,
     Z
   ]), ne(() => {
-    W(r);
-  }, [r, W]), ne(() => {
-    o.open || (U.current = null);
-  }, [o.open]), ne(() => (K(G), () => K(!1)), [G, K]), ne(() => (D(he), () => D(!1)), [he, D]);
-  const rt = v(
-    () => ke.current,
+    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,
     []
-  ), Ee = o.bodyNode, Ae = o.setScrollState, it = v(() => {
+  ), Ee = o.bodyNode, Ae = o.setScrollState, it = k(() => {
     Ae(Je(Ee));
-  }, [Ee, Ae]), Ie = A?.backdropFromHeight, [Ve, Le] = S(!1), ct = v((i) => {
+  }, [Ee, Ae]), Ie = E?.backdropFromHeight, [Ve, Le] = v(!1), ct = k((i) => {
     Le(!i);
   }, []);
   !o.open && Ve && Le(!1);
-  const Me = Ie !== void 0 && Ve, { collapseBottomSheetToUndimmedSnap: xe, handlers: st } = Ht({
+  const xe = Ie !== void 0 && Ve, { collapseBottomSheetToUndimmedSnap: Te, handlers: st } = Ht({
     enabled: f !== !1,
     drag: f,
     open: o.open,
@@ -439,63 +437,63 @@ function _t({
     surfaceMotionNode: Z,
     backdropRef: Y,
     bodyNode: o.bodyNode,
-    snapHeights: A?.snapHeights,
+    snapHeights: E?.snapHeights,
     sheetHeight: de,
     backdropFromHeight: Ie,
     onBackdropDimRestChange: ct,
-    peekHeight: G ? F : void 0,
-    peekFallback: G ? "header" : void 0,
+    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" }),
-    backdropHidden: p === "hidden",
+    backdropHidden: u === "hidden",
     visibleTranslate: tt,
     shouldDeferBottomSettle: rt,
     refreshScrollState: it,
     snapPositions: w ? x : void 0,
-    defaultSnapPosition: l,
-    closeThreshold: q,
+    defaultSnapPosition: p,
+    closeThreshold: O,
     scrollLockTimeout: J,
     popupSnapLayoutVersion: o.popupSnapLayoutVersion
-  }), dt = v(
+  }), dt = k(
     (i) => {
-      Q.current = i, ie(i), i && o.open && w && U.current !== i && (zt({
-        defaultSnapPosition: l,
+      Q.current = i, ie(i), i && o.open && w && W.current !== i && (zt({
+        defaultSnapPosition: p,
         node: i,
         snapPositions: x
-      }), U.current = i);
+      }), W.current = i);
     },
-    [w, o.open, l, x]
-  ), lt = v((i) => {
+    [w, o.open, p, x]
+  ), lt = k((i) => {
     X.current = i, ee(i);
   }, []);
   ne(() => {
     const i = o.closeAttemptFeedbackKey;
     if (i === 0 || r !== "popup" || te.current === i) {
-      te.current = i, V(void 0);
+      te.current = i, I(void 0);
       return;
     }
     const H = X.current;
     if (!H) return;
-    te.current = i, y.current !== null && window.cancelAnimationFrame(y.current), k.current !== null && window.clearTimeout(k.current), V(void 0);
-    const ve = () => {
-      V(void 0), k.current = null;
-    }, ue = (be) => {
-      be.target === H && be.animationName === "oc-modal-reject-shake" && (H.removeEventListener("animationend", ue), k.current !== null && window.clearTimeout(k.current), ve());
+    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", ue), y.current = window.requestAnimationFrame(() => {
-      y.current = null, V("reject"), y.current = window.requestAnimationFrame(() => {
-        y.current = null, k.current = window.setTimeout(() => {
-          H.removeEventListener("animationend", ue), ve();
+    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", ue), y.current !== null && (window.cancelAnimationFrame(y.current), y.current = null), k.current !== null && (window.clearTimeout(k.current), k.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, r]);
-  const ze = Pt(I), ut = {
+  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` } : {},
@@ -511,88 +509,88 @@ function _t({
     // Each modal reserves one backdrop slot and one viewport slot.
     "--oc-modal-stack-offset": Ye * 2
   }, pt = o.headerHeight > 0 ? {
-    ...I,
+    ...A,
     "--oc-modal-header-height": `${o.headerHeight}px`
-  } : I, mt = T === "content" ? Q : T, { setBackdropDismissalDisabled: Te, setBackgroundInteractive: Re } = o, ft = p !== "hidden" || oe;
-  Se(() => {
-    P !== L && z(P);
-  }, [L, P]);
-  const le = v(() => {
+  } : 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);
-  }, []), ge = v(() => {
-    p === "hidden" && (le(), z((i) => {
+  }, []), ve = k(() => {
+    u === "hidden" && (le(), L((i) => {
       const H = qe(
         i,
-        p
+        u
       );
       return H.resolvedBackdrop !== "hidden" || !H.exiting ? H : {
         ...H,
         exiting: !1
       };
     }));
-  }, [le, p]);
+  }, [le, u]);
   return ne(
     () => () => {
       le();
     },
     [le]
-  ), Se(() => {
-    if (!oe || p !== "hidden") return;
+  ), ye(() => {
+    if (!oe || u !== "hidden") return;
     const i = Y.current;
     if (!i) {
-      B.current = window.setTimeout(ge, 0);
+      B.current = window.setTimeout(ve, 0);
       return;
     }
     le(), B.current = window.setTimeout(
-      ge,
+      ve,
       Lt(i)
     );
   }, [
     le,
-    ge,
+    ve,
     oe,
-    p
-  ]), Se(() => (Te(p === "hidden"), Re(j || Me), () => {
-    Te(!1), Re(!1);
+    u
+  ]), ye(() => (Re(u === "hidden"), Be(z || xe), () => {
+    Re(!1), Be(!1);
   }), [
-    Me,
-    j,
-    p,
-    Te,
-    Re
-  ]), /* @__PURE__ */ ae(O.Portal, { container: me, children: [
+    xe,
+    z,
+    u,
+    Re,
+    Be
+  ]), /* @__PURE__ */ ae($.Portal, { container: fe, children: [
     ft ? /* @__PURE__ */ d(
-      O.Backdrop,
+      $.Backdrop,
       {
         ref: Y,
         className: c.backdrop,
         "data-oc-part": "backdrop",
         "data-oc-component": "modal-backdrop",
-        "data-oc-modal-backdrop": p,
-        "data-oc-modal-backdrop-passthrough": Me ? "true" : void 0,
+        "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: je,
         onTransitionCancel: (i) => {
-          i.currentTarget === i.target && i.propertyName === "opacity" && ge();
+          i.currentTarget === i.target && i.propertyName === "opacity" && ve();
         },
         onTransitionEnd: (i) => {
-          i.currentTarget === i.target && i.propertyName === "opacity" && ge();
+          i.currentTarget === i.target && i.propertyName === "opacity" && ve();
         },
         onClick: () => {
           if (o.disablePointerDismissal) {
-            if (xe()) return;
+            if (Te()) return;
             o.notifyCloseAttemptRejected({ reason: "backdrop-press" });
             return;
           }
           if (!o.canDismissByBehavior({ reason: "backdrop-press" })) {
-            if (xe()) return;
+            if (Te()) return;
             o.notifyCloseAttemptRejected({ reason: "backdrop-press" });
             return;
           }
-          if (r === "bottom" && G) {
+          if (r === "bottom" && _) {
             if (o.presentationState === "visible") {
-              if (xe()) return;
+              if (Te()) return;
               o.setPresentationState("peeked");
             }
             return;
@@ -602,7 +600,7 @@ function _t({
       }
     ) : null,
     /* @__PURE__ */ d(
-      O.Viewport,
+      $.Viewport,
       {
         className: c.viewport,
         "data-oc-part": "viewport",
@@ -610,7 +608,7 @@ function _t({
         "data-oc-modal-placement": r,
         style: je,
         children: /* @__PURE__ */ ae(
-          O.Popup,
+          $.Popup,
           {
             ...re,
             ...st,
@@ -623,13 +621,13 @@ function _t({
             ),
             "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": u,
-            "data-oc-modal-feedback": r === "popup" ? _ : void 0,
+            "data-oc-resize": l,
+            "data-oc-modal-feedback": r === "popup" ? U : void 0,
             "data-oc-modal-placement": r,
-            "data-oc-modal-snapping": A || w ? "true" : void 0,
+            "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,
@@ -655,13 +653,13 @@ function _t({
                   ref: lt,
                   className: R(
                     c.surface,
-                    c[u],
+                    c[l],
                     e
                   ),
                   "data-oc-part": "surface",
                   "data-oc-variant": n,
                   "data-oc-size": a,
-                  "data-oc-resize": 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",
@@ -681,25 +679,23 @@ function Gt({
   title: t,
   children: n,
   leadingContent: a,
-  trailingContent: u,
+  trailingContent: l,
   closeLabel: N = "닫기",
   closeButton: m = !0,
   handle: C = !0,
   ref: f,
   ...M
 }) {
-  const h = pe("ModalHeader"), { setHeaderNode: g, scrollState: x } = h, l = v(
-    (F) => {
-      g(F), Fe(f, F);
-    },
-    [f, g]
+  const h = me("ModalHeader"), { setHeaderNode: S, scrollState: x } = h, p = pe(
+    () => Fe(S, f),
+    [f, S]
   ), T = Qe(a);
   return /* @__PURE__ */ ae(
     bt,
     {
       ...M,
       as: "header",
-      ref: l,
+      ref: p,
       backdrop: "compact",
       className: R(c.header, e),
       backColor: "var(--oc-color-theme-background-elevated-normal)",
@@ -725,9 +721,9 @@ function Gt({
             "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(O.Title, { children: t }) : n }),
+              /* @__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: [
-                u,
+                l,
                 m ? /* @__PURE__ */ d(Xe, { label: N }) : null
               ] })
             ]
@@ -742,54 +738,54 @@ function Jt({
   title: t,
   children: n,
   expanded: a,
-  defaultExpanded: u = !0,
+  defaultExpanded: l = !0,
   onExpandedChange: N,
   disabled: m = !1,
   forceMount: C = !0,
   handle: f = !0,
   headingLevel: M = 2,
   indicator: h,
-  titleAsDialogTitle: g = !0,
+  titleAsDialogTitle: S = !0,
   navigationProps: x,
-  panelProps: l,
+  panelProps: p,
   panelContentProps: T,
-  ref: F,
-  style: q,
+  ref: G,
+  style: O,
   ...J
 }) {
-  const me = pe("ModalNavigationSection"), {
-    canRenderHandle: I,
+  const fe = me("ModalNavigationSection"), {
+    canRenderHandle: A,
     notifyPopupSnapLayoutChange: re,
     placement: o
-  } = me, { height: K, setNode: D } = Pe(), W = ht(), [r, Q] = Ge({
+  } = fe, { height: q, setNode: F } = Pe(), K = ht(), [r, Q] = Ge({
     value: a,
-    defaultValue: u,
+    defaultValue: l,
     onChange: N
-  }), [X, Y] = S(
+  }), [X, Y] = v(
     r ? "open" : "closed"
-  ), U = `h${Wt(M) ? M : 2}`, {
+  ), W = `h${Wt(M) ? M : 2}`, {
     className: Z = "",
     id: ie,
-    onClick: fe,
+    onClick: he,
     ...ee
   } = x ?? {}, {
     className: te = "",
-    id: y,
-    role: k,
+    id: b,
+    role: y,
     ...B
-  } = l ?? {}, { className: _ = "", ...V } = T ?? {}, E = ie ?? `${W}-navigation`, w = y ?? `${W}-panel`, p = `${W}-dialog-title`, L = Qe(t), z = f && I, P = K > 0 ? {
-    ...q,
-    "--oc-modal-navigation-block-size": `${K}px`
-  } : q, oe = v(
-    (j) => {
-      Y(j), o === "popup" && re();
+  } = 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",
     {
-      ref: F,
+      ref: G,
       className: R(c.navigationSection, e),
       style: P,
       ...J,
@@ -797,15 +793,15 @@ function Jt({
       "data-oc-motion-state": X,
       "data-oc-state": r ? "open" : "closed",
       children: [
-        g && L ? /* @__PURE__ */ d(
-          O.Title,
+        S && V ? /* @__PURE__ */ d(
+          $.Title,
           {
             className: c.navigationDialogTitle,
-            id: p,
+            id: u,
             children: t
           }
         ) : null,
-        z ? /* @__PURE__ */ d(
+        L ? /* @__PURE__ */ d(
           "div",
           {
             "aria-hidden": "true",
@@ -813,20 +809,20 @@ function Jt({
             "data-oc-part": "handle"
           }
         ) : null,
-        /* @__PURE__ */ d(U, { className: c.navigationHeading, "data-oc-part": "heading", children: /* @__PURE__ */ ae(
+        /* @__PURE__ */ d(W, { className: c.navigationHeading, "data-oc-part": "heading", children: /* @__PURE__ */ ae(
           "button",
           {
             ...ee,
-            ref: D,
-            id: E,
+            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: (j) => {
-              fe?.(j), !(j.defaultPrevented || m) && Q(!r);
+            onClick: (z) => {
+              he?.(z), !(z.defaultPrevented || m) && Q(!r);
             },
             "data-oc-component": "modal-navigation",
             "data-oc-part": "navigation",
@@ -867,10 +863,10 @@ function Jt({
             },
             ...B,
             "aria-hidden": r ? void 0 : !0,
-            "aria-labelledby": E,
+            "aria-labelledby": D,
             id: w,
             inert: r ? void 0 : !0,
-            role: k ?? "region",
+            role: y ?? "region",
             "data-oc-component": "modal-navigation-panel",
             "data-oc-state": r ? "open" : "closed",
             children: /* @__PURE__ */ d(
@@ -882,10 +878,10 @@ function Jt({
                 children: /* @__PURE__ */ d(
                   _e,
                   {
-                    ...V,
+                    ...I,
                     className: R(
                       c.navigationPanelInner,
-                      _
+                      U
                     ),
                     "data-oc-component": "modal-navigation-panel-content",
                     children: n
@@ -904,27 +900,25 @@ function Qt({
   children: t,
   layout: n = "content",
   containerClassName: a = "",
-  containerProps: u,
+  containerProps: l,
   ref: N,
   ...m
 }) {
-  const C = pe("ModalBody"), { bodyNode: f, setBodyNode: M, setScrollState: h } = C, g = v(
-    (l) => {
-      h(Je(l));
+  const C = me("ModalBody"), { bodyNode: f, setBodyNode: M, setScrollState: h } = C, S = k(
+    (p) => {
+      h(Je(p));
     },
     [h]
-  ), x = v(
-    (l) => {
-      M(l), Fe(N, l), g(l);
-    },
-    [N, M, g]
+  ), x = pe(
+    () => Fe(M, N, S),
+    [N, M, S]
   );
   return ne(() => {
-    const l = f;
-    if (!l || (g(l), typeof ResizeObserver > "u")) return;
-    const T = new ResizeObserver(() => g(l));
-    return T.observe(l), l.firstElementChild && T.observe(l.firstElementChild), () => T.disconnect();
-  }, [f, g]), /* @__PURE__ */ d(
+    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,
     {
       ...m,
@@ -938,13 +932,13 @@ function Qt({
           className: c.bodyContainer,
           "data-oc-part": "body-container",
           "data-oc-component": "modal-body-container",
-          onScroll: (l) => {
-            u?.onScroll?.(l), g(l.currentTarget);
+          onScroll: (p) => {
+            l?.onScroll?.(p), S(p.currentTarget);
           },
           children: /* @__PURE__ */ d(
             "section",
             {
-              ...u,
+              ...l,
               className: R(c.bodyContent, a),
               "data-oc-part": "body-content",
               "data-oc-component": "modal-body-content",
@@ -962,18 +956,16 @@ function Xt({
   children: t,
   background: n = "auto",
   ref: a,
-  ...u
+  ...l
 }) {
-  const N = pe("ModalFooter"), { scrollState: m, setFooterNode: C } = N, f = v(
-    (g) => {
-      C(g), Fe(a, g);
-    },
+  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",
     {
-      ...u,
+      ...l,
       ref: f,
       className: R(c.footer, e),
       "data-oc-part": "footer",
@@ -988,11 +980,11 @@ function Xe({
   children: t = /* @__PURE__ */ d(gt, {}),
   label: n = "닫기",
   size: a = 24,
-  disabled: u,
+  disabled: l,
   onClick: N,
   ...m
 }) {
-  const C = pe("ModalClose");
+  const C = me("ModalClose");
   return /* @__PURE__ */ d(
     St,
     {
@@ -1001,16 +993,16 @@ function Xe({
       "aria-label": m["aria-label"] ?? n,
       "data-oc-part": "close",
       "data-oc-component": "modal-close",
-      disabled: u,
+      disabled: l,
       onClick: (f) => {
-        N?.(f), !f.defaultPrevented && !u && C.requestClose({ reason: "close-button" });
+        N?.(f), !f.defaultPrevented && !l && C.requestClose({ reason: "close-button" });
       },
       size: a,
       children: t
     }
   );
 }
-const ko = Object.assign(We, {
+const No = Object.assign(We, {
   Root: We,
   Trigger: Ut,
   Content: _t,
@@ -1029,5 +1021,5 @@ export {
   Jt as ModalNavigationSection,
   We as ModalRoot,
   Ut as ModalTrigger,
-  ko as default
+  No as default
 };