@orioncactuscorp/ui 1.2.0 → 1.4.0

package/dist/components/Modal/Modal.js

@@ -1,49 +1,57 @@
 'use client';
-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 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) {
+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 l from "./Modal.module.scss.js";
+function A(...e) {
   return e.filter(Boolean).join(" ");
 }
-function Re(e) {
+function Ae(e) {
   return e != null && e !== !1 && e !== "";
 }
-function ce(e, t) {
+function le(e, t) {
   typeof e == "function" ? e(t) : e && (e.current = t);
 }
-function Te(e) {
+function De(e) {
+  if (!e) return;
+  const t = Object.entries(e).filter(
+    ([n]) => n.startsWith("--")
+  );
+  if (t.length !== 0)
+    return Object.fromEntries(t);
+}
+function Pe(e) {
   const t = e.trim();
   return t.endsWith("ms") ? Number.parseFloat(t) || 0 : t.endsWith("s") ? (Number.parseFloat(t) || 0) * 1e3 : 0;
 }
-function de(e) {
-  return e.split(",").reduce((t, r) => Math.max(t, Te(r)), 0);
+function me(e) {
+  return e.split(",").reduce((t, n) => Math.max(t, Pe(n)), 0);
 }
-function He(e) {
-  const t = window.getComputedStyle(e), r = de(t.animationDuration), a = de(t.animationDelay);
-  return r + a + 250;
+function Be(e) {
+  const t = window.getComputedStyle(e), n = me(t.animationDuration), a = me(t.animationDelay);
+  return n + a + 250;
 }
-function Ae({
+function xe({
   defaultSnapPosition: e,
   node: t,
-  snapPositions: r
+  snapPositions: n
 }) {
-  if (!r?.length) return;
-  const a = Fe({
+  if (!n?.length) return;
+  const a = He({
     defaultSnapPosition: e,
-    snapPositions: r,
+    snapPositions: n,
     surfaceMotion: t
   });
   a && (t.style.setProperty(
@@ -54,14 +62,14 @@ function Ae({
     `${a.defaultTarget.y}px`
   ));
 }
-function xe(e) {
+function je(e) {
   if (e && typeof e == "object" && "reason" in e && typeof e.reason == "string")
     return e.reason;
 }
-function ne(e) {
+function ae(e) {
   e && typeof e == "object" && "cancel" in e && typeof e.cancel == "function" && e.cancel();
 }
-function Pe(e, t) {
+function Ee(e, t) {
   switch (t) {
     case "drag-dismiss":
       return e?.drag ?? "auto";
@@ -79,19 +87,22 @@ function Pe(e, t) {
       return e?.programmatic ?? "auto";
   }
 }
-function Be(e, t) {
+function Oe(e, t) {
   return t > 0 && (e === "drag-dismiss" || e === "backdrop-press" || e === "outside-press");
 }
-function De({
+function pe(e, t) {
+  return t && (e === "backdrop-press" || e === "outside-press");
+}
+function qe({
   backdrop: e,
   canSnapPopup: t,
-  placement: r,
+  placement: n,
   presentationState: a
 }) {
-  return e !== "auto" ? e : r === "bottom" && a === "peeked" || t ? "hidden" : "visible";
+  return e !== "auto" ? e : n === "bottom" && a === "peeked" || t ? "hidden" : "visible";
 }
-function je(e) {
-  switch (xe(e)) {
+function $e(e) {
+  switch (je(e)) {
     case "close-press":
       return "close-button";
     case "outside-press":
@@ -106,275 +117,286 @@ function je(e) {
       return "programmatic";
   }
 }
-function ue({
+function fe({
   children: e,
   open: t,
-  defaultOpen: r,
+  defaultOpen: n,
   modal: a = !0,
-  onOpenChange: m,
-  canCloseAttempt: C,
+  onOpenChange: p,
+  canCloseAttempt: v,
   onCloseAttempt: u,
-  presentationState: k,
-  defaultPresentationState: p = "visible",
+  presentationState: b,
+  defaultPresentationState: f = "visible",
   onPresentationStateChange: S,
-  disablePointerDismissal: l,
-  navigationDepth: v = 0,
+  disablePointerDismissal: i,
+  navigationDepth: g = 0,
   dismissBehavior: c
 }) {
-  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({
+  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({
     canScroll: !1,
     scrolledFromTop: !1,
     scrolledToBottom: !0
-  }), [f, b] = ye({
-    value: k,
-    defaultValue: p,
+  }), [x, R] = Me({
+    value: b,
+    defaultValue: f,
     onChange: S
-  }), L = ie(), R = ie(), Y = Math.max(0, v), N = w(
-    (n, h) => {
-      y || q(n), m?.(n, h);
+  }), V = ue(), N = ue(), D = Math.max(0, g), P = F(
+    (r, h) => {
+      k || $(r), p?.(r, h);
     },
-    [m, y]
-  ), P = w(
-    (n = { reason: "programmatic" }) => C?.(n) !== !1,
-    [C]
-  ), F = w(
-    (n = { reason: "programmatic" }) => {
-      W((h) => h + 1);
+    [p, k]
+  ), w = F(
+    (r = { reason: "programmatic" }) => v?.(r) !== !1,
+    [v]
+  ), T = F(
+    (r = { reason: "programmatic" }) => {
+      ee((h) => h + 1);
     },
     []
-  ), M = w(
-    (n = { reason: "programmatic" }) => {
-      const h = Pe(c, n.reason);
-      return h === "allow" ? !0 : h === "block" ? !1 : !Be(n.reason, Y);
+  ), C = F(
+    (r = { reason: "programmatic" }) => {
+      if (pe(r.reason, s))
+        return !1;
+      const h = Ee(c, r.reason);
+      return h === "allow" ? !0 : h === "block" ? !1 : !Oe(r.reason, D);
     },
-    [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, c, D]
+  ), W = F(
+    (r = { 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);
     },
     [
+      w,
+      s,
+      C,
       P,
-      M,
-      N,
-      F,
+      T,
       u
     ]
-  ), T = w(
-    (n, h) => {
-      if (n && f === "peeked" && b("visible"), !n) {
-        B({
-          reason: je(h),
+  ), ne = F(
+    (r, h) => {
+      if (r && x === "peeked" && R("visible"), !r) {
+        W({
+          reason: $e(h),
           eventDetails: h
         });
         return;
       }
-      N(n, h);
+      P(r, h);
     },
-    [N, f, B, b]
-  ), te = f === "visible" ? a : !1, oe = l || V === "bottom" && o, ae = me(
+    [P, x, W, R]
+  ), ce = x === "visible" ? a : !1, te = i || I === "bottom" && o, se = he(
     () => ({
-      open: I,
-      placement: V,
-      setPlacement: ee,
-      presentationState: f,
-      setPresentationState: b,
-      requestClose: B,
-      canDismissByBehavior: M,
-      canCloseAttempt: P,
-      closeAttemptFeedbackKey: i,
-      notifyCloseAttemptRejected: F,
-      disablePointerDismissal: l ?? !1,
+      open: z,
+      placement: I,
+      setPlacement: re,
+      presentationState: x,
+      setPresentationState: R,
+      requestClose: W,
+      canDismissByBehavior: C,
+      canCloseAttempt: w,
+      closeAttemptFeedbackKey: G,
+      notifyCloseAttemptRejected: T,
+      disablePointerDismissal: i ?? !1,
+      setBackdropDismissalDisabled: _,
       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: _
+      setCanPeek: U,
+      canRenderHandle: K,
+      setCanRenderHandle: Z,
+      headerHeight: V.height,
+      footerHeight: N.height,
+      setHeaderNode: V.setNode,
+      setFooterNode: N.setNode,
+      bodyNode: L,
+      setBodyNode: J,
+      scrollState: y,
+      setScrollState: M
     }),
     [
-      U,
+      L,
       o,
-      $,
-      M,
-      P,
-      i,
-      R.height,
-      R.setNode,
-      L.height,
-      L.setNode,
-      F,
-      I,
-      V,
-      B,
       K,
-      l,
-      f,
-      b
+      C,
+      w,
+      G,
+      N.height,
+      N.setNode,
+      V.height,
+      V.setNode,
+      T,
+      z,
+      I,
+      W,
+      y,
+      i,
+      x,
+      R
     ]
   );
-  return /* @__PURE__ */ d(ve, { value: ae, children: /* @__PURE__ */ d(
-    x.Root,
+  return /* @__PURE__ */ d(Se, { value: se, children: /* @__PURE__ */ d(
+    B.Root,
     {
-      open: I,
-      modal: te,
-      onOpenChange: T,
-      disablePointerDismissal: oe,
+      open: z,
+      modal: ce,
+      onOpenChange: ne,
+      disablePointerDismissal: te,
       children: e
     }
   ) });
 }
-function Ee({
+function Ie({
   className: e = "",
   children: t,
-  render: r,
+  render: n,
   nativeButton: a
 }) {
-  return r ? /* @__PURE__ */ d(
-    x.Trigger,
+  return n ? /* @__PURE__ */ d(
+    B.Trigger,
     {
-      render: r,
+      render: n,
       nativeButton: a,
       "data-oc-component": "modal-trigger",
       children: t
     }
   ) : /* @__PURE__ */ d(
-    x.Trigger,
+    B.Trigger,
     {
-      className: H(s.trigger, e),
+      className: A(l.trigger, e),
       nativeButton: a,
       "data-oc-component": "modal-trigger",
       children: t
     }
   );
 }
-function qe({
+function Ke({
   className: e = "",
   children: t,
-  variant: r = "adaptive",
+  variant: n = "adaptive",
   size: a = "medium",
-  resize: m = "hug",
-  backdrop: C = "auto",
+  resize: p = "hug",
+  backdrop: v = "auto",
   drag: u = "content",
-  peekable: k = !1,
-  snapPoints: p,
+  peekable: b = !1,
+  snapPoints: f,
   defaultSnapPoint: S,
-  snapPositions: l,
-  defaultSnapPosition: v,
+  snapPositions: i,
+  defaultSnapPosition: g,
   initialFocus: c,
-  peekHeight: y,
-  closeThreshold: E,
-  scrollLockTimeout: q,
-  container: I,
-  style: V,
-  ...ee
+  peekHeight: k,
+  closeThreshold: q,
+  scrollLockTimeout: $,
+  container: z,
+  style: I,
+  ...re
 }) {
-  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,
+  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,
-    placement: i,
+    placement: s,
     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,
+  }), 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(() => {
+    if (!(!f?.length || typeof window > "u"))
+      return Te({
+        snapPoints: f,
         defaultSnapPoint: S,
         viewportHeight: window.innerHeight
       });
-  }, [S, p]), te = Ne(o.open);
+  }, [S, f]), W = Fe(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({
+    Z(s);
+  }, [s, Z]), O(() => {
+    o.open || (L.current = null);
+  }, [o.open]), O(() => (U(w), () => U(!1)), [w, U]), O(() => (K(P), () => K(!1)), [P, K]);
+  const ne = Ne({
     enabled: u !== !1,
     drag: u,
     open: o.open,
-    placement: i,
-    surfaceMotionRef: W,
-    backdropRef: X,
+    placement: s,
+    surfaceMotionRef: _,
+    backdropRef: ee,
     bodyNode: o.bodyNode,
-    snapHeights: T?.snapHeights,
-    peekHeight: M ? y : void 0,
-    peekFallback: M ? "header" : void 0,
+    snapHeights: C?.snapHeights,
+    peekHeight: w ? k : void 0,
+    peekFallback: w ? "header" : void 0,
     presentationState: o.presentationState,
     setPresentationState: o.setPresentationState,
     requestClose: o.requestClose,
     canCloseAttempt: o.canCloseAttempt,
     dismissible: !o.disablePointerDismissal && o.canDismissByBehavior({ reason: "drag-dismiss" }),
-    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);
+    visibleTranslate: C?.visibleTranslate,
+    snapPositions: N ? i : void 0,
+    defaultSnapPosition: g,
+    closeThreshold: q,
+    scrollLockTimeout: $
+  }), ce = F(
+    (m) => {
+      _.current = m, m && o.open && N && L.current !== m && (xe({
+        defaultSnapPosition: g,
+        node: m,
+        snapPositions: i
+      }), L.current = m);
     },
-    [N, o.open, v, l]
+    [N, o.open, g, i]
   );
   O(() => {
-    const g = o.closeAttemptFeedbackKey;
-    if (g === 0 || i !== "popup" || _.current === g) {
-      _.current = g, R(void 0);
+    const m = o.closeAttemptFeedbackKey;
+    if (m === 0 || s !== "popup" || J.current === m) {
+      J.current = m, R(void 0);
       return;
     }
-    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());
+    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());
     };
-    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));
+    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));
       });
     }), () => {
-      D.removeEventListener("animationend", Z), f.current !== null && (window.cancelAnimationFrame(f.current), f.current = null), b.current !== null && (window.clearTimeout(b.current), b.current = null);
+      j.removeEventListener("animationend", oe), y.current !== null && (window.cancelAnimationFrame(y.current), y.current = null), M.current !== null && (window.clearTimeout(M.current), M.current = null);
     };
-  }, [o.closeAttemptFeedbackKey, i]);
-  const n = {
+  }, [o.closeAttemptFeedbackKey, s]);
+  const te = De(I), se = {
+    ...te,
     ...o.headerHeight > 0 ? { "--oc-modal-header-height": `${o.headerHeight}px` } : {},
     ...o.footerHeight > 0 ? { "--oc-modal-footer-height": `${o.footerHeight}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`
+    ...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`
     } : {}
-  }, h = {
+  }, r = {
     // Each modal reserves one backdrop slot and one viewport slot.
-    "--oc-modal-stack-offset": te * 2
-  }, re = c === "content" ? W : c;
-  return /* @__PURE__ */ G(x.Portal, { container: I, children: [
+    "--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: [
     /* @__PURE__ */ d(
-      x.Backdrop,
+      B.Backdrop,
       {
-        ref: X,
-        className: s.backdrop,
+        ref: ee,
+        className: l.backdrop,
         "data-oc-part": "backdrop",
         "data-oc-component": "modal-backdrop",
-        "data-oc-modal-backdrop": P,
-        "data-oc-modal-placement": i,
+        "data-oc-modal-backdrop": D,
+        "data-oc-modal-placement": s,
         "data-oc-modal-presentation-state": o.presentationState,
-        style: h,
-        onClick: () => {
+        style: r,
+        onClick: (m) => {
+          if (D === "hidden") {
+            m.stopPropagation();
+            return;
+          }
           if (o.disablePointerDismissal) {
             o.notifyCloseAttemptRejected({ reason: "backdrop-press" });
             return;
@@ -383,7 +405,7 @@ function qe({
             o.notifyCloseAttemptRejected({ reason: "backdrop-press" });
             return;
           }
-          if (i === "bottom" && M) {
+          if (s === "bottom" && w) {
             o.presentationState === "visible" && o.setPresentationState("peeked");
             return;
           }
@@ -391,94 +413,103 @@ function qe({
         }
       }
     ),
-    /* @__PURE__ */ G(
-      x.Viewport,
+    /* @__PURE__ */ d(
+      B.Viewport,
       {
-        className: s.viewport,
+        className: l.viewport,
         "data-oc-part": "viewport",
         "data-oc-component": "modal-viewport",
-        "data-oc-modal-placement": i,
-        style: h,
-        children: [
-          i === "bottom" ? /* @__PURE__ */ d(
-            "div",
-            {
-              "aria-hidden": "true",
-              className: H(s.bottomFill, s[a]),
-              "data-oc-part": "bottom-fill",
-              "data-oc-component": "modal-bottom-fill",
-              "data-oc-size": a
-            }
-          ) : null,
-          /* @__PURE__ */ d(
-            x.Popup,
-            {
-              ...ee,
-              ...oe,
-              ref: ae,
-              initialFocus: re,
-              className: H(s.surfaceMotion, s[a]),
-              "data-oc-part": "surface-motion",
-              "data-oc-component": "modal-content",
-              "data-oc-modal-backdrop": P,
-              "data-oc-variant": r,
-              "data-oc-size": a,
-              "data-oc-resize": m,
-              "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(
+        "data-oc-modal-placement": s,
+        style: r,
+        children: /* @__PURE__ */ X(
+          B.Popup,
+          {
+            ...re,
+            ...ne,
+            ref: ce,
+            initialFocus: h,
+            className: A(
+              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-size": a,
+            "data-oc-resize": p,
+            "data-oc-modal-feedback": s === "popup" ? x : void 0,
+            "data-oc-modal-placement": s,
+            "data-oc-modal-snapping": C || N ? "true" : void 0,
+            style: se,
+            children: [
+              s === "bottom" ? /* @__PURE__ */ d(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: A(
+                    l.bottomFill,
+                    l[a],
+                    e
+                  ),
+                  "data-oc-part": "bottom-fill",
+                  "data-oc-component": "modal-bottom-fill",
+                  "data-oc-size": a,
+                  style: te
+                }
+              ) : null,
+              /* @__PURE__ */ d(
                 "div",
                 {
-                  ref: U,
-                  className: H(
-                    s.surface,
-                    s[m],
+                  ref: G,
+                  className: A(
+                    l.surface,
+                    l[p],
                     e
                   ),
                   "data-oc-part": "surface",
-                  "data-oc-variant": r,
+                  "data-oc-variant": n,
                   "data-oc-size": a,
-                  "data-oc-resize": m,
-                  "data-oc-modal-placement": i,
-                  style: V,
+                  "data-oc-resize": p,
+                  "data-oc-modal-placement": s,
+                  style: I,
                   children: t
                 }
               )
-            }
-          )
-        ]
+            ]
+          }
+        )
       }
     )
   ] });
 }
-function $e({
+function Le({
   className: e = "",
   title: t,
-  children: r,
+  children: n,
   leadingContent: a,
-  trailingContent: m,
-  closeLabel: C = "닫기",
+  trailingContent: p,
+  closeLabel: v = "닫기",
   closeButton: u = !0,
-  handle: k = !0,
-  ref: p,
+  handle: b = !0,
+  ref: f,
   ...S
 }) {
-  const l = J("ModalHeader"), { setHeaderNode: v, scrollState: c } = l, y = w(
-    (q) => {
-      v(q), ce(p, q);
+  const i = Y("ModalHeader"), { setHeaderNode: g, scrollState: c } = i, k = F(
+    ($) => {
+      g($), le(f, $);
     },
-    [p, v]
-  ), E = Re(a);
-  return /* @__PURE__ */ G(
-    he,
+    [f, g]
+  ), q = Ae(a);
+  return /* @__PURE__ */ X(
+    ke,
     {
       ...S,
       as: "header",
-      ref: y,
+      ref: k,
       backdrop: "compact",
-      className: H(s.header, e),
+      className: A(l.header, e),
       backColor: "var(--oc-color-theme-background-elevated-normal)",
       frontColor: "transparent",
       "data-oc-part": "header",
@@ -486,26 +517,26 @@ function $e({
       variant: "strong",
       "data-oc-sticky": c.scrolledFromTop ? "true" : "false",
       children: [
-        k && l.canRenderHandle ? /* @__PURE__ */ d(
+        b && i.canRenderHandle ? /* @__PURE__ */ d(
           "div",
           {
             "aria-hidden": "true",
-            className: s.handle,
+            className: l.handle,
             "data-oc-part": "handle"
           }
         ) : null,
-        /* @__PURE__ */ G(
+        /* @__PURE__ */ X(
           "div",
           {
-            className: s.headerInner,
-            "data-oc-has-leading": E ? "true" : "false",
+            className: l.headerInner,
+            "data-oc-has-leading": q ? "true" : "false",
             "data-oc-part": "header-inner",
             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,
-                u ? /* @__PURE__ */ d(pe, { label: C }) : null
+              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 }),
+              /* @__PURE__ */ X("div", { className: l.headerTrailing, "data-oc-part": "header-trailing", children: [
+                p,
+                u ? /* @__PURE__ */ d(be, { label: v }) : null
               ] })
             ]
           }
@@ -514,52 +545,52 @@ function $e({
     }
   );
 }
-function Ke({
+function Ve({
   className: e = "",
   children: t,
-  containerClassName: r = "",
+  containerClassName: n = "",
   containerProps: a,
-  ref: m,
-  ...C
+  ref: p,
+  ...v
 }) {
-  const u = J("ModalBody"), { bodyNode: k, setBodyNode: p, setScrollState: S } = u, l = w(
+  const u = Y("ModalBody"), { bodyNode: b, setBodyNode: f, setScrollState: S } = u, i = F(
     (c) => {
-      S(Me(c));
+      S(Re(c));
     },
     [S]
-  ), v = w(
+  ), g = F(
     (c) => {
-      p(c), ce(m, c), l(c);
+      f(c), le(p, c), i(c);
     },
-    [m, p, l]
+    [p, f, i]
   );
   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,
+    const c = b;
+    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,
     {
-      ...C,
-      className: H(s.body, e),
+      ...v,
+      className: A(l.body, e),
       "data-oc-part": "body",
       "data-oc-component": "modal-body",
       children: /* @__PURE__ */ d(
-        ke,
+        Ce,
         {
-          ref: v,
-          className: s.bodyContainer,
+          ref: g,
+          className: l.bodyContainer,
           "data-oc-part": "body-container",
           "data-oc-component": "modal-body-container",
           onScroll: (c) => {
-            a?.onScroll?.(c), l(c.currentTarget);
+            a?.onScroll?.(c), i(c.currentTarget);
           },
           children: /* @__PURE__ */ d(
             "section",
             {
               ...a,
-              className: H(s.bodyContent, r),
+              className: A(l.bodyContent, n),
               "data-oc-part": "body-content",
               "data-oc-component": "modal-body-content",
               children: t
@@ -570,25 +601,25 @@ function Ke({
     }
   );
 }
-function Le({
+function We({
   className: e = "",
   children: t,
-  background: r = "auto",
+  background: n = "auto",
   ref: a,
-  ...m
+  ...p
 }) {
-  const C = J("ModalFooter"), { scrollState: u, setFooterNode: k } = C, p = w(
-    (v) => {
-      k(v), ce(a, v);
+  const v = Y("ModalFooter"), { scrollState: u, setFooterNode: b } = v, f = F(
+    (g) => {
+      b(g), le(a, g);
     },
-    [a, k]
-  ), S = r === !0 || r === "auto" && u.canScroll && !u.scrolledToBottom;
+    [a, b]
+  ), S = n === !0 || n === "auto" && u.canScroll && !u.scrolledToBottom;
   return /* @__PURE__ */ d(
     "footer",
     {
-      ...m,
-      ref: p,
-      className: H(s.footer, e),
+      ...p,
+      ref: f,
+      className: A(l.footer, e),
       "data-oc-part": "footer",
       "data-oc-component": "modal-footer",
       "data-oc-background": S ? "true" : "false",
@@ -596,49 +627,49 @@ function Le({
     }
   );
 }
-function pe({
+function be({
   className: e = "",
-  children: t = /* @__PURE__ */ d(fe, {}),
-  label: r = "닫기",
+  children: t = /* @__PURE__ */ d(ge, {}),
+  label: n = "닫기",
   size: a = 24,
-  disabled: m,
-  onClick: C,
+  disabled: p,
+  onClick: v,
   ...u
 }) {
-  const k = J("ModalClose");
+  const b = Y("ModalClose");
   return /* @__PURE__ */ d(
-    be,
+    ve,
     {
       ...u,
-      className: H(s.close, e),
-      "aria-label": u["aria-label"] ?? r,
+      className: A(l.close, e),
+      "aria-label": u["aria-label"] ?? n,
       "data-oc-part": "close",
       "data-oc-component": "modal-close",
-      disabled: m,
-      onClick: (p) => {
-        C?.(p), !p.defaultPrevented && !m && k.requestClose({ reason: "close-button" });
+      disabled: p,
+      onClick: (f) => {
+        v?.(f), !f.defaultPrevented && !p && b.requestClose({ reason: "close-button" });
       },
       size: a,
       children: t
     }
   );
 }
-const at = Object.assign(ue, {
-  Root: ue,
-  Trigger: Ee,
-  Content: qe,
-  Header: $e,
-  Body: Ke,
-  Footer: Le,
-  Close: pe
+const st = Object.assign(fe, {
+  Root: fe,
+  Trigger: Ie,
+  Content: Ke,
+  Header: Le,
+  Body: Ve,
+  Footer: We,
+  Close: be
 });
 export {
-  Ke as ModalBody,
-  pe as ModalClose,
-  qe as ModalContent,
-  Le as ModalFooter,
-  $e as ModalHeader,
-  ue as ModalRoot,
-  Ee as ModalTrigger,
-  at as default
+  Ve as ModalBody,
+  be as ModalClose,
+  Ke as ModalContent,
+  We as ModalFooter,
+  Le as ModalHeader,
+  fe as ModalRoot,
+  Ie as ModalTrigger,
+  st as default
 };