@orioncactuscorp/ui 1.0.0 → 1.2.0

package/dist/components/Modal/Modal.js

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