@orioncactuscorp/ui 1.4.1 → 1.5.1

package/dist/components/Modal/Modal.js

@@ -1,57 +1,57 @@
 'use client';
 import { jsx as d, jsxs as X } from "react/jsx-runtime";
-import { useCallback as F, useEffect as O, useRef as E, useState as H, useMemo as he } from "react";
-import { Dialog as B } from "@base-ui-components/react/dialog";
-import ge from "@orioncactuscorp/icons/orioncactus/CloseThick";
-import ke from "../Background/Background.js";
-import ve from "../BackgroundIconButton/BackgroundIconButton.js";
-import { ScrollArea as ye, ScrollAreaContainer as Ce } from "../ScrollArea/ScrollArea.js";
-import { useModalContext as Y, ModalProvider as Se } from "./contexts.js";
-import { useControllableState as Me } from "./useControllableState.js";
-import { useMeasuredElement as ue } from "./useElementSize.js";
-import { useModalDrag as Ne } from "./useModalDrag.js";
-import { useModalPlacement as we } from "./useModalPlacement.js";
-import { useModalStackDepth as Fe } from "./useModalStackDepth.js";
-import { getModalScrollState as Re } from "./modalScrollArbitration.js";
-import { resolveModalSnapMetrics as Te, resolveModalPopupSnapPositions as He } from "./snapPoints.js";
+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 A(...e) {
+function H(...e) {
   return e.filter(Boolean).join(" ");
 }
-function Ae(e) {
+function Pe(e) {
   return e != null && e !== !1 && e !== "";
 }
-function le(e, t) {
+function de(e, t) {
   typeof e == "function" ? e(t) : e && (e.current = t);
 }
-function De(e) {
+function xe(e) {
   if (!e) return;
   const t = Object.entries(e).filter(
-    ([n]) => n.startsWith("--")
+    ([r]) => r.startsWith("--")
   );
   if (t.length !== 0)
     return Object.fromEntries(t);
 }
-function Pe(e) {
+function je(e) {
   const t = e.trim();
   return t.endsWith("ms") ? Number.parseFloat(t) || 0 : t.endsWith("s") ? (Number.parseFloat(t) || 0) * 1e3 : 0;
 }
-function me(e) {
-  return e.split(",").reduce((t, n) => Math.max(t, Pe(n)), 0);
+function fe(e) {
+  return e.split(",").reduce((t, r) => Math.max(t, je(r)), 0);
 }
-function Be(e) {
-  const t = window.getComputedStyle(e), n = me(t.animationDuration), a = me(t.animationDelay);
-  return n + a + 250;
+function Ee(e) {
+  const t = window.getComputedStyle(e), r = fe(t.animationDuration), a = fe(t.animationDelay);
+  return r + a + 250;
 }
-function xe({
+function Ie({
   defaultSnapPosition: e,
   node: t,
-  snapPositions: n
+  snapPositions: r
 }) {
-  if (!n?.length) return;
-  const a = He({
+  if (!r?.length) return;
+  const a = De({
     defaultSnapPosition: e,
-    snapPositions: n,
+    snapPositions: r,
     surfaceMotion: t
   });
   a && (t.style.setProperty(
@@ -62,14 +62,14 @@ function xe({
     `${a.defaultTarget.y}px`
   ));
 }
-function je(e) {
+function Oe(e) {
   if (e && typeof e == "object" && "reason" in e && typeof e.reason == "string")
     return e.reason;
 }
-function ae(e) {
+function ce(e) {
   e && typeof e == "object" && "cancel" in e && typeof e.cancel == "function" && e.cancel();
 }
-function Ee(e, t) {
+function qe(e, t) {
   switch (t) {
     case "drag-dismiss":
       return e?.drag ?? "auto";
@@ -87,22 +87,22 @@ function Ee(e, t) {
       return e?.programmatic ?? "auto";
   }
 }
-function Oe(e, t) {
+function Le(e, t) {
   return t > 0 && (e === "drag-dismiss" || e === "backdrop-press" || e === "outside-press");
 }
-function pe(e, t) {
+function he(e, t) {
   return t && (e === "backdrop-press" || e === "outside-press");
 }
-function qe({
+function $e({
   backdrop: e,
   canSnapPopup: t,
-  placement: n,
+  placement: r,
   presentationState: a
 }) {
-  return e !== "auto" ? e : n === "bottom" && a === "peeked" || t ? "hidden" : "visible";
+  return e !== "auto" ? e : r === "bottom" && a === "peeked" || t ? "hidden" : "visible";
 }
-function $e(e) {
-  switch (je(e)) {
+function Ke(e) {
+  switch (Oe(e)) {
     case "close-press":
       return "close-button";
     case "outside-press":
@@ -117,283 +117,289 @@ function $e(e) {
       return "programmatic";
   }
 }
-function fe({
+function be({
   children: e,
   open: t,
-  defaultOpen: n,
+  defaultOpen: r,
   modal: a = !0,
   onOpenChange: p,
-  canCloseAttempt: v,
+  canCloseAttempt: y,
   onCloseAttempt: u,
-  presentationState: b,
+  presentationState: g,
   defaultPresentationState: f = "visible",
-  onPresentationStateChange: S,
+  onPresentationStateChange: M,
   disablePointerDismissal: i,
-  navigationDepth: g = 0,
+  navigationDepth: k = 0,
   dismissBehavior: c
 }) {
-  const k = t !== void 0, [q, $] = H(
-    n ?? !1
-  ), z = k ? t : q, [I, re] = H("bottom"), [o, U] = H(!1), [K, Z] = H(!1), [s, _] = H(!1), [G, ee] = H(0), [L, J] = H(null), [y, M] = H({
+  const v = t !== void 0, [E, I] = 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({
     canScroll: !1,
     scrolledFromTop: !1,
     scrolledToBottom: !0
-  }), [x, R] = Me({
-    value: b,
+  }), [B, S] = Fe({
+    value: g,
     defaultValue: f,
-    onChange: S
-  }), V = ue(), N = ue(), D = Math.max(0, g), P = F(
-    (r, h) => {
-      k || $(r), p?.(r, h);
+    onChange: M
+  }), w = pe(), D = pe(), K = Math.max(0, k), F = R(
+    (n, h) => {
+      v || I(n), p?.(n, h);
     },
-    [p, k]
-  ), w = F(
-    (r = { reason: "programmatic" }) => v?.(r) !== !1,
-    [v]
-  ), T = F(
-    (r = { reason: "programmatic" }) => {
-      ee((h) => h + 1);
+    [p, v]
+  ), P = R(
+    (n = { reason: "programmatic" }) => y?.(n) !== !1,
+    [y]
+  ), b = R(
+    (n = { reason: "programmatic" }) => {
+      J((h) => h + 1);
     },
     []
-  ), C = F(
-    (r = { reason: "programmatic" }) => {
-      if (pe(r.reason, s))
+  ), V = R(
+    (n = { reason: "programmatic" }) => {
+      if (he(n.reason, s))
         return !1;
-      const h = Ee(c, r.reason);
-      return h === "allow" ? !0 : h === "block" ? !1 : !Oe(r.reason, D);
+      const h = qe(c, n.reason);
+      return h === "allow" ? !0 : h === "block" ? !1 : !Le(n.reason, K);
     },
-    [s, c, D]
-  ), W = F(
-    (r = { reason: "programmatic" }, h = {}) => {
+    [s, c, K]
+  ), W = R(
+    (n = { reason: "programmatic" }, h = {}) => {
       const { commit: Q = !0, skipAttempt: m = !1 } = h;
-      return !m && pe(r.reason, s) ? (ae(r.eventDetails), !1) : !m && !C(r) || !m && !w(r) || !m && u?.(r) === !1 ? (ae(r.eventDetails), T(r), !1) : (Q && P(!1, r.eventDetails), !0);
+      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);
     },
     [
-      w,
-      s,
-      C,
       P,
-      T,
+      s,
+      V,
+      F,
+      b,
       u
     ]
-  ), ne = F(
-    (r, h) => {
-      if (r && x === "peeked" && R("visible"), !r) {
+  ), le = R(
+    (n, h) => {
+      if (n && B === "peeked" && S("visible"), !n) {
         W({
-          reason: $e(h),
+          reason: Ke(h),
           eventDetails: h
         });
         return;
       }
-      P(r, h);
+      F(n, h);
     },
-    [P, x, W, R]
-  ), ce = x === "visible" ? a : !1, te = i || I === "bottom" && o, se = he(
+    [F, B, W, S]
+  ), ae = B === "visible" && !ee ? a : !1, ie = i || O === "bottom" && o, re = ge(
     () => ({
-      open: z,
-      placement: I,
-      setPlacement: re,
-      presentationState: x,
-      setPresentationState: R,
+      open: U,
+      placement: O,
+      setPlacement: se,
+      presentationState: B,
+      setPresentationState: S,
       requestClose: W,
-      canDismissByBehavior: C,
-      canCloseAttempt: w,
-      closeAttemptFeedbackKey: G,
-      notifyCloseAttemptRejected: T,
+      canDismissByBehavior: V,
+      canCloseAttempt: P,
+      closeAttemptFeedbackKey: L,
+      notifyCloseAttemptRejected: b,
       disablePointerDismissal: i ?? !1,
-      setBackdropDismissalDisabled: _,
+      setBackdropDismissalDisabled: G,
+      setBackgroundInteractive: te,
       canPeek: o,
-      setCanPeek: U,
-      canRenderHandle: K,
+      setCanPeek: _,
+      canRenderHandle: q,
       setCanRenderHandle: Z,
-      headerHeight: V.height,
-      footerHeight: N.height,
-      setHeaderNode: V.setNode,
-      setFooterNode: N.setNode,
-      bodyNode: L,
-      setBodyNode: J,
-      scrollState: y,
-      setScrollState: M
+      headerHeight: w.height,
+      footerHeight: D.height,
+      setHeaderNode: w.setNode,
+      setFooterNode: D.setNode,
+      bodyNode: C,
+      setBodyNode: N,
+      scrollState: oe,
+      setScrollState: $
     }),
     [
-      L,
-      o,
-      K,
       C,
-      w,
-      G,
-      N.height,
-      N.setNode,
-      V.height,
-      V.setNode,
-      T,
-      z,
-      I,
+      o,
+      q,
+      V,
+      P,
+      L,
+      D.height,
+      D.setNode,
+      w.height,
+      w.setNode,
+      b,
+      U,
+      O,
       W,
-      y,
+      oe,
       i,
-      x,
-      R
+      B,
+      S
     ]
   );
-  return /* @__PURE__ */ d(Se, { value: se, children: /* @__PURE__ */ d(
-    B.Root,
+  return /* @__PURE__ */ d(we, { value: re, children: /* @__PURE__ */ d(
+    A.Root,
     {
-      open: z,
-      modal: ce,
-      onOpenChange: ne,
-      disablePointerDismissal: te,
+      open: U,
+      modal: ae,
+      onOpenChange: le,
+      disablePointerDismissal: ie,
       children: e
     }
   ) });
 }
-function Ie({
+function Ve({
   className: e = "",
   children: t,
-  render: n,
+  render: r,
   nativeButton: a
 }) {
-  return n ? /* @__PURE__ */ d(
-    B.Trigger,
+  return r ? /* @__PURE__ */ d(
+    A.Trigger,
     {
-      render: n,
+      render: r,
       nativeButton: a,
       "data-oc-component": "modal-trigger",
       children: t
     }
   ) : /* @__PURE__ */ d(
-    B.Trigger,
+    A.Trigger,
     {
-      className: A(l.trigger, e),
+      className: H(l.trigger, e),
       nativeButton: a,
       "data-oc-component": "modal-trigger",
       children: t
     }
   );
 }
-function Ke({
+function We({
   className: e = "",
   children: t,
-  variant: n = "adaptive",
+  variant: r = "adaptive",
   size: a = "medium",
   resize: p = "hug",
-  backdrop: v = "auto",
+  backdrop: y = "auto",
   drag: u = "content",
-  peekable: b = !1,
+  peekable: g = !1,
   snapPoints: f,
-  defaultSnapPoint: S,
+  defaultSnapPoint: M,
   snapPositions: i,
-  defaultSnapPosition: g,
+  defaultSnapPosition: k,
   initialFocus: c,
-  peekHeight: k,
-  closeThreshold: q,
-  scrollLockTimeout: $,
-  container: z,
-  style: I,
-  ...re
+  peekHeight: v,
+  closeThreshold: E,
+  scrollLockTimeout: I,
+  container: U,
+  style: O,
+  ...se
 }) {
-  const o = Y("ModalContent"), { setCanPeek: U, setCanRenderHandle: K, setPlacement: Z } = o, s = we(n), _ = E(null), G = E(null), ee = E(null), L = E(null), J = E(0), y = E(null), M = E(null), [x, R] = H(), V = u === "handle" || u === "content", N = s === "popup" && u === "content" && !!i?.length, D = qe({
-    backdrop: v,
-    canSnapPopup: N,
+  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
-  }), P = (s === "bottom" || N) && V, w = s === "bottom" && P && b, T = w && k !== void 0 ? k : o.headerHeight > 0 ? o.headerHeight : void 0, C = he(() => {
+  }), 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 Te({
+      return Be({
         snapPoints: f,
-        defaultSnapPoint: S,
+        defaultSnapPoint: M,
         viewportHeight: window.innerHeight
       });
-  }, [S, f]), W = Fe(o.open);
-  O(() => {
+  }, [M, f]), V = He(o.open);
+  z(() => {
     Z(s);
-  }, [s, Z]), O(() => {
+  }, [s, Z]), z(() => {
     o.open || (L.current = null);
-  }, [o.open]), O(() => (U(w), () => U(!1)), [w, U]), O(() => (K(P), () => K(!1)), [P, K]);
-  const ne = Ne({
+  }, [o.open]), z(() => (_(F), () => _(!1)), [F, _]), z(() => (q(K), () => q(!1)), [K, q]);
+  const W = Re({
     enabled: u !== !1,
     drag: u,
     open: o.open,
     placement: s,
-    surfaceMotionRef: _,
-    backdropRef: ee,
+    surfaceMotionRef: G,
+    backdropRef: te,
     bodyNode: o.bodyNode,
-    snapHeights: C?.snapHeights,
-    peekHeight: w ? k : void 0,
-    peekFallback: w ? "header" : void 0,
+    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: C?.visibleTranslate,
-    snapPositions: N ? i : void 0,
-    defaultSnapPosition: g,
-    closeThreshold: q,
-    scrollLockTimeout: $
-  }), ce = F(
+    visibleTranslate: b?.visibleTranslate,
+    snapPositions: S ? i : void 0,
+    defaultSnapPosition: k,
+    closeThreshold: E,
+    scrollLockTimeout: I
+  }), le = R(
     (m) => {
-      _.current = m, m && o.open && N && L.current !== m && (xe({
-        defaultSnapPosition: g,
+      G.current = m, m && o.open && S && L.current !== m && (Ie({
+        defaultSnapPosition: k,
         node: m,
         snapPositions: i
       }), L.current = m);
     },
-    [N, o.open, g, i]
+    [S, o.open, k, i]
   );
-  O(() => {
+  z(() => {
     const m = o.closeAttemptFeedbackKey;
     if (m === 0 || s !== "popup" || J.current === m) {
-      J.current = m, R(void 0);
+      J.current = m, $(void 0);
       return;
     }
-    const j = G.current;
-    if (!j) return;
-    J.current = m, y.current !== null && window.cancelAnimationFrame(y.current), M.current !== null && window.clearTimeout(M.current), R(void 0);
-    const ie = () => {
-      R(void 0), M.current = null;
-    }, oe = (de) => {
-      de.target === j && de.animationName === "oc-modal-reject-shake" && (j.removeEventListener("animationend", oe), M.current !== null && window.clearTimeout(M.current), ie());
+    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());
     };
-    return j.addEventListener("animationend", oe), y.current = window.requestAnimationFrame(() => {
-      y.current = null, R("reject"), y.current = window.requestAnimationFrame(() => {
-        y.current = null, M.current = window.setTimeout(() => {
-          j.removeEventListener("animationend", oe), ie();
-        }, Be(j));
+    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));
       });
     }), () => {
-      j.removeEventListener("animationend", oe), y.current !== null && (window.cancelAnimationFrame(y.current), y.current = null), M.current !== null && (window.clearTimeout(M.current), M.current = null);
+      x.removeEventListener("animationend", ne), C.current !== null && (window.cancelAnimationFrame(C.current), C.current = null), N.current !== null && (window.clearTimeout(N.current), N.current = null);
     };
   }, [o.closeAttemptFeedbackKey, s]);
-  const te = De(I), se = {
-    ...te,
+  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` } : {},
-    ...T !== void 0 ? { "--oc-modal-peek-height": `${T}px` } : {},
-    ...C?.sheetHeight !== void 0 ? { "--oc-modal-sheet-height": `${C.sheetHeight}px` } : {},
-    ...C?.visibleTranslate !== void 0 ? {
-      "--oc-modal-translate-y": `${C.visibleTranslate}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`
     } : {}
-  }, r = {
+  }, re = {
     // Each modal reserves one backdrop slot and one viewport slot.
-    "--oc-modal-stack-offset": W * 2
-  }, h = c === "content" ? _ : c, { setBackdropDismissalDisabled: Q } = o;
-  return O(() => (Q(D === "hidden"), () => {
-    Q(!1);
-  }), [D, Q]), /* @__PURE__ */ X(B.Portal, { container: z, children: [
+    "--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);
+  }), [
+    D,
+    w,
+    h,
+    Q
+  ]), /* @__PURE__ */ X(A.Portal, { container: U, children: [
     /* @__PURE__ */ d(
-      B.Backdrop,
+      A.Backdrop,
       {
-        ref: ee,
+        ref: te,
         className: l.backdrop,
         "data-oc-part": "backdrop",
         "data-oc-component": "modal-backdrop",
-        "data-oc-modal-backdrop": D,
+        "data-oc-modal-backdrop": w,
         "data-oc-modal-placement": s,
         "data-oc-modal-presentation-state": o.presentationState,
-        style: r,
+        style: re,
         onClick: (m) => {
-          if (D === "hidden") {
+          if (w === "hidden") {
             m.stopPropagation();
             return;
           }
@@ -405,7 +411,7 @@ function Ke({
             o.notifyCloseAttemptRejected({ reason: "backdrop-press" });
             return;
           }
-          if (s === "bottom" && w) {
+          if (s === "bottom" && F) {
             o.presentationState === "visible" && o.setPresentationState("peeked");
             return;
           }
@@ -414,41 +420,41 @@ function Ke({
       }
     ),
     /* @__PURE__ */ d(
-      B.Viewport,
+      A.Viewport,
       {
         className: l.viewport,
         "data-oc-part": "viewport",
         "data-oc-component": "modal-viewport",
         "data-oc-modal-placement": s,
-        style: r,
+        style: re,
         children: /* @__PURE__ */ X(
-          B.Popup,
+          A.Popup,
           {
-            ...re,
-            ...ne,
-            ref: ce,
-            initialFocus: h,
-            className: A(
+            ...se,
+            ...W,
+            ref: le,
+            initialFocus: n,
+            className: H(
               l.surfaceMotion,
               l[a],
               e
             ),
             "data-oc-part": "surface-motion",
             "data-oc-component": "modal-content",
-            "data-oc-modal-backdrop": D,
-            "data-oc-variant": n,
+            "data-oc-modal-backdrop": w,
+            "data-oc-variant": r,
             "data-oc-size": a,
             "data-oc-resize": p,
-            "data-oc-modal-feedback": s === "popup" ? x : void 0,
+            "data-oc-modal-feedback": s === "popup" ? oe : void 0,
             "data-oc-modal-placement": s,
-            "data-oc-modal-snapping": C || N ? "true" : void 0,
-            style: se,
+            "data-oc-modal-snapping": b || S ? "true" : void 0,
+            style: ie,
             children: [
               s === "bottom" ? /* @__PURE__ */ d(
                 "div",
                 {
                   "aria-hidden": "true",
-                  className: A(
+                  className: H(
                     l.bottomFill,
                     l[a],
                     e
@@ -456,24 +462,24 @@ function Ke({
                   "data-oc-part": "bottom-fill",
                   "data-oc-component": "modal-bottom-fill",
                   "data-oc-size": a,
-                  style: te
+                  style: ae
                 }
               ) : null,
               /* @__PURE__ */ d(
                 "div",
                 {
-                  ref: G,
-                  className: A(
+                  ref: ee,
+                  className: H(
                     l.surface,
                     l[p],
                     e
                   ),
                   "data-oc-part": "surface",
-                  "data-oc-variant": n,
+                  "data-oc-variant": r,
                   "data-oc-size": a,
                   "data-oc-resize": p,
                   "data-oc-modal-placement": s,
-                  style: I,
+                  style: O,
                   children: t
                 }
               )
@@ -484,32 +490,32 @@ function Ke({
     )
   ] });
 }
-function Le({
+function ze({
   className: e = "",
   title: t,
-  children: n,
+  children: r,
   leadingContent: a,
   trailingContent: p,
-  closeLabel: v = "닫기",
+  closeLabel: y = "닫기",
   closeButton: u = !0,
-  handle: b = !0,
+  handle: g = !0,
   ref: f,
-  ...S
+  ...M
 }) {
-  const i = Y("ModalHeader"), { setHeaderNode: g, scrollState: c } = i, k = F(
-    ($) => {
-      g($), le(f, $);
+  const i = Y("ModalHeader"), { setHeaderNode: k, scrollState: c } = i, v = R(
+    (I) => {
+      k(I), de(f, I);
     },
-    [f, g]
-  ), q = Ae(a);
+    [f, k]
+  ), E = Pe(a);
   return /* @__PURE__ */ X(
-    ke,
+    Ce,
     {
-      ...S,
+      ...M,
       as: "header",
-      ref: k,
+      ref: v,
       backdrop: "compact",
-      className: A(l.header, e),
+      className: H(l.header, e),
       backColor: "var(--oc-color-theme-background-elevated-normal)",
       frontColor: "transparent",
       "data-oc-part": "header",
@@ -517,7 +523,7 @@ function Le({
       variant: "strong",
       "data-oc-sticky": c.scrolledFromTop ? "true" : "false",
       children: [
-        b && i.canRenderHandle ? /* @__PURE__ */ d(
+        g && i.canRenderHandle ? /* @__PURE__ */ d(
           "div",
           {
             "aria-hidden": "true",
@@ -529,14 +535,14 @@ function Le({
           "div",
           {
             className: l.headerInner,
-            "data-oc-has-leading": q ? "true" : "false",
+            "data-oc-has-leading": E ? "true" : "false",
             "data-oc-part": "header-inner",
             children: [
-              q ? /* @__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(B.Title, { children: t }) : n }),
+              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(be, { label: v }) : null
+                u ? /* @__PURE__ */ d(ke, { label: y }) : null
               ] })
             ]
           }
@@ -545,41 +551,41 @@ function Le({
     }
   );
 }
-function Ve({
+function Ue({
   className: e = "",
   children: t,
-  containerClassName: n = "",
+  containerClassName: r = "",
   containerProps: a,
   ref: p,
-  ...v
+  ...y
 }) {
-  const u = Y("ModalBody"), { bodyNode: b, setBodyNode: f, setScrollState: S } = u, i = F(
+  const u = Y("ModalBody"), { bodyNode: g, setBodyNode: f, setScrollState: M } = u, i = R(
     (c) => {
-      S(Re(c));
+      M(Ae(c));
     },
-    [S]
-  ), g = F(
+    [M]
+  ), k = R(
     (c) => {
-      f(c), le(p, c), i(c);
+      f(c), de(p, c), i(c);
     },
     [p, f, i]
   );
-  return O(() => {
-    const c = b;
+  return z(() => {
+    const c = g;
     if (!c || (i(c), typeof ResizeObserver > "u")) return;
-    const k = new ResizeObserver(() => i(c));
-    return k.observe(c), c.firstElementChild && k.observe(c.firstElementChild), () => k.disconnect();
-  }, [b, i]), /* @__PURE__ */ d(
-    ye,
+    const v = new ResizeObserver(() => i(c));
+    return v.observe(c), c.firstElementChild && v.observe(c.firstElementChild), () => v.disconnect();
+  }, [g, i]), /* @__PURE__ */ d(
+    Me,
     {
-      ...v,
-      className: A(l.body, e),
+      ...y,
+      className: H(l.body, e),
       "data-oc-part": "body",
       "data-oc-component": "modal-body",
       children: /* @__PURE__ */ d(
-        Ce,
+        Ne,
         {
-          ref: g,
+          ref: k,
           className: l.bodyContainer,
           "data-oc-part": "body-container",
           "data-oc-component": "modal-body-container",
@@ -590,7 +596,7 @@ function Ve({
             "section",
             {
               ...a,
-              className: A(l.bodyContent, n),
+              className: H(l.bodyContent, r),
               "data-oc-part": "body-content",
               "data-oc-component": "modal-body-content",
               children: t
@@ -601,75 +607,75 @@ function Ve({
     }
   );
 }
-function We({
+function _e({
   className: e = "",
   children: t,
-  background: n = "auto",
+  background: r = "auto",
   ref: a,
   ...p
 }) {
-  const v = Y("ModalFooter"), { scrollState: u, setFooterNode: b } = v, f = F(
-    (g) => {
-      b(g), le(a, g);
+  const y = Y("ModalFooter"), { scrollState: u, setFooterNode: g } = y, f = R(
+    (k) => {
+      g(k), de(a, k);
     },
-    [a, b]
-  ), S = n === !0 || n === "auto" && u.canScroll && !u.scrolledToBottom;
+    [a, g]
+  ), M = r === !0 || r === "auto" && u.canScroll && !u.scrolledToBottom;
   return /* @__PURE__ */ d(
     "footer",
     {
       ...p,
       ref: f,
-      className: A(l.footer, e),
+      className: H(l.footer, e),
       "data-oc-part": "footer",
       "data-oc-component": "modal-footer",
-      "data-oc-background": S ? "true" : "false",
+      "data-oc-background": M ? "true" : "false",
       children: t
     }
   );
 }
-function be({
+function ke({
   className: e = "",
-  children: t = /* @__PURE__ */ d(ge, {}),
-  label: n = "닫기",
+  children: t = /* @__PURE__ */ d(ye, {}),
+  label: r = "닫기",
   size: a = 24,
   disabled: p,
-  onClick: v,
+  onClick: y,
   ...u
 }) {
-  const b = Y("ModalClose");
+  const g = Y("ModalClose");
   return /* @__PURE__ */ d(
-    ve,
+    Se,
     {
       ...u,
-      className: A(l.close, e),
-      "aria-label": u["aria-label"] ?? n,
+      className: H(l.close, e),
+      "aria-label": u["aria-label"] ?? r,
       "data-oc-part": "close",
       "data-oc-component": "modal-close",
       disabled: p,
       onClick: (f) => {
-        v?.(f), !f.defaultPrevented && !p && b.requestClose({ reason: "close-button" });
+        y?.(f), !f.defaultPrevented && !p && g.requestClose({ reason: "close-button" });
       },
       size: a,
       children: t
     }
   );
 }
-const st = Object.assign(fe, {
-  Root: fe,
-  Trigger: Ie,
-  Content: Ke,
-  Header: Le,
-  Body: Ve,
-  Footer: We,
-  Close: be
+const dt = Object.assign(be, {
+  Root: be,
+  Trigger: Ve,
+  Content: We,
+  Header: ze,
+  Body: Ue,
+  Footer: _e,
+  Close: ke
 });
 export {
-  Ve as ModalBody,
-  be as ModalClose,
-  Ke as ModalContent,
-  We as ModalFooter,
-  Le as ModalHeader,
-  fe as ModalRoot,
-  Ie as ModalTrigger,
-  st as default
+  Ue as ModalBody,
+  ke as ModalClose,
+  We as ModalContent,
+  _e as ModalFooter,
+  ze as ModalHeader,
+  be as ModalRoot,
+  Ve as ModalTrigger,
+  dt as default
 };