@orioncactuscorp/ui 1.14.0 → 1.15.1

package/dist/components/Modal/Modal.js

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