@orioncactuscorp/ui 1.7.0 → 1.8.0

package/dist/components/Modal/Modal.js

@@ -1,7 +1,7 @@
 'use client';
-import { jsx as s, jsxs as Z } from "react/jsx-runtime";
-import { useCallback as R, useEffect as ne, useRef as Y, useState as T, useMemo as be, useLayoutEffect as Ce, useId as Me } from "react";
-import { Dialog as L } from "@base-ui-components/react/dialog";
+import { jsx as c, jsxs as Z } from "react/jsx-runtime";
+import { useCallback as P, useEffect as ne, useRef as Y, useState as T, useMemo as be, useLayoutEffect as Ce, useId as Me } from "react";
+import { Dialog as $ } from "@base-ui-components/react/dialog";
 import Pe from "@orioncactuscorp/icons/orioncactus/CloseThick";
 import { MotionExpand as Re } from "../../react/motion.js";
 import He from "../Background/Background.js";
@@ -19,7 +19,7 @@ import { useModalStackDepth as Ie } from "./useModalStackDepth.js";
 import { getModalScrollState as Ee } from "./modalScrollArbitration.js";
 import { resolveModalSnapMetrics as je, resolveModalPopupSnapPositions as Le } from "./snapPoints.js";
 import n from "./Modal.module.scss.js";
-function H(...e) {
+function R(...e) {
   return e.filter(Boolean).join(" ");
 }
 function Se(e) {
@@ -44,8 +44,8 @@ function fe(e) {
   return e.split(",").reduce((t, r) => Math.max(t, Ve(r)), 0);
 }
 function Oe(e) {
-  const t = window.getComputedStyle(e), r = fe(t.animationDuration), c = fe(t.animationDelay);
-  return r + c + 250;
+  const t = window.getComputedStyle(e), r = fe(t.animationDuration), s = fe(t.animationDelay);
+  return r + s + 250;
 }
 function qe({
   defaultSnapPosition: e,
@@ -53,13 +53,13 @@ function qe({
   snapPositions: r
 }) {
   if (!r?.length) return;
-  const c = Le({
+  const s = Le({
     defaultSnapPosition: e,
     snapPositions: r,
     surfaceMotion: t
   });
-  if (!c) return;
-  const l = c.defaultTarget;
+  if (!s) return;
+  const l = s.defaultTarget;
   t.style.setProperty(
     "--oc-modal-translate-x",
     l.settledTranslate?.x ?? `${l.x}px`
@@ -103,9 +103,9 @@ function Ue({
   backdrop: e,
   canSnapPopup: t,
   placement: r,
-  presentationState: c
+  presentationState: s
 }) {
-  return e !== "auto" ? e : r === "bottom" && c === "peeked" || t ? "hidden" : "visible";
+  return e !== "auto" ? e : r === "bottom" && s === "peeked" || t ? "hidden" : "visible";
 }
 function _e(e) {
   switch (Ke(e)) {
@@ -130,130 +130,130 @@ function he({
   children: e,
   open: t,
   defaultOpen: r,
-  modal: c = !0,
+  modal: s = !0,
   onOpenChange: l,
-  canCloseAttempt: k,
-  onCloseAttempt: p,
-  presentationState: h,
-  defaultPresentationState: f = "visible",
-  onPresentationStateChange: S,
-  disablePointerDismissal: d,
-  navigationDepth: b = 0,
-  dismissBehavior: i
+  canCloseAttempt: b,
+  onCloseAttempt: u,
+  presentationState: y,
+  defaultPresentationState: g = "visible",
+  onPresentationStateChange: k,
+  disablePointerDismissal: f,
+  navigationDepth: p = 0,
+  dismissBehavior: w
 }) {
-  const v = t !== void 0, [$, V] = T(
+  const i = t !== void 0, [H, V] = T(
     r ?? !1
-  ), O = v ? t : $, [q, ce] = T("bottom"), [a, K] = T(!1), [A, J] = T(!1), [u, B] = T(!1), [g, ee] = T(!1), [z, Q] = T(0), [N, M] = T(0), [te, W] = T(null), [U, w] = T({
+  ), O = i ? t : H, [q, ce] = T("bottom"), [a, K] = T(!1), [B, J] = T(!1), [d, D] = T(!1), [h, ee] = T(!1), [z, Q] = T(0), [S, C] = T(0), [te, W] = T(null), [U, F] = T({
     canScroll: !1,
     scrolledFromTop: !1,
     scrolledToBottom: !0
-  }), [C, D] = ke({
-    value: h,
-    defaultValue: f,
-    onChange: S
-  }), F = ue(), P = ue(), X = Math.max(0, b), y = R(
+  }), [N, I] = ke({
+    value: y,
+    defaultValue: g,
+    onChange: k
+  }), x = ue(), M = ue(), X = Math.max(0, p), v = P(
     (o, m) => {
-      v || V(o), l?.(o, m);
+      i || V(o), l?.(o, m);
     },
-    [l, v]
-  ), I = R(
-    (o = { reason: "programmatic" }) => k?.(o) !== !1,
-    [k]
-  ), x = R(
+    [l, i]
+  ), E = P(
+    (o = { reason: "programmatic" }) => b?.(o) !== !1,
+    [b]
+  ), A = P(
     (o = { reason: "programmatic" }) => {
       Q((m) => m + 1);
     },
     []
-  ), oe = R(() => {
-    M((o) => o + 1);
-  }, []), E = R(
+  ), oe = P(() => {
+    C((o) => o + 1);
+  }, []), j = P(
     (o = { reason: "programmatic" }) => {
-      if (ge(o.reason, u))
+      if (ge(o.reason, d))
         return !1;
-      const m = ze(i, o.reason);
+      const m = ze(w, o.reason);
       return m === "allow" ? !0 : m === "block" ? !1 : !We(o.reason, X);
     },
-    [u, i, X]
-  ), _ = R(
+    [d, w, X]
+  ), _ = P(
     (o = { reason: "programmatic" }, m = {}) => {
-      const { commit: le = !0, skipAttempt: j = !1 } = m;
-      return !j && ge(o.reason, u) ? (de(o.eventDetails), !1) : !j && !E(o) || !j && !I(o) || !j && p?.(o) === !1 ? (de(o.eventDetails), x(o), !1) : (le && y(!1, o.eventDetails), !0);
+      const { commit: le = !0, skipAttempt: L = !1 } = m;
+      return !L && ge(o.reason, d) ? (de(o.eventDetails), !1) : !L && !j(o) || !L && !E(o) || !L && u?.(o) === !1 ? (de(o.eventDetails), A(o), !1) : (le && v(!1, o.eventDetails), !0);
     },
     [
-      I,
-      u,
       E,
-      y,
-      x,
-      p
+      d,
+      j,
+      v,
+      A,
+      u
     ]
-  ), ae = R(
+  ), ae = P(
     (o, m) => {
-      if (o && C === "peeked" && D("visible"), !o) {
+      if (o && N === "peeked" && I("visible"), !o) {
         _({
           reason: _e(m),
           eventDetails: m
         });
         return;
       }
-      y(o, m);
+      v(o, m);
     },
-    [y, C, _, D]
-  ), G = C === "visible" && !g ? c : !1, se = d || q === "bottom" && a, ie = be(
+    [v, N, _, I]
+  ), G = N === "visible" && !h ? s : !1, se = f || q === "bottom" && a, ie = be(
     () => ({
       open: O,
       placement: q,
       setPlacement: ce,
-      presentationState: C,
-      setPresentationState: D,
+      presentationState: N,
+      setPresentationState: I,
       requestClose: _,
-      canDismissByBehavior: E,
-      canCloseAttempt: I,
+      canDismissByBehavior: j,
+      canCloseAttempt: E,
       closeAttemptFeedbackKey: z,
-      notifyCloseAttemptRejected: x,
-      disablePointerDismissal: d ?? !1,
-      setBackdropDismissalDisabled: B,
+      notifyCloseAttemptRejected: A,
+      disablePointerDismissal: f ?? !1,
+      setBackdropDismissalDisabled: D,
       setBackgroundInteractive: ee,
       canPeek: a,
       setCanPeek: K,
-      canRenderHandle: A,
+      canRenderHandle: B,
       setCanRenderHandle: J,
-      popupSnapLayoutVersion: N,
+      popupSnapLayoutVersion: S,
       notifyPopupSnapLayoutChange: oe,
-      headerHeight: F.height,
-      footerHeight: P.height,
-      setHeaderNode: F.setNode,
-      setFooterNode: P.setNode,
+      headerHeight: x.height,
+      footerHeight: M.height,
+      setHeaderNode: x.setNode,
+      setFooterNode: M.setNode,
       bodyNode: te,
       setBodyNode: W,
       scrollState: U,
-      setScrollState: w
+      setScrollState: F
     }),
     [
       te,
       a,
-      A,
+      B,
+      j,
       E,
-      I,
       z,
-      P.height,
-      P.setNode,
-      F.height,
-      F.setNode,
-      x,
+      M.height,
+      M.setNode,
+      x.height,
+      x.setNode,
+      A,
       oe,
-      N,
+      S,
       O,
       q,
       _,
       U,
-      d,
-      C,
-      D
+      f,
+      N,
+      I
     ]
   );
-  return /* @__PURE__ */ s(Ae, { value: ie, children: /* @__PURE__ */ s(
-    L.Root,
+  return /* @__PURE__ */ c(Ae, { value: ie, children: /* @__PURE__ */ c(
+    $.Root,
     {
       open: O,
       modal: G,
@@ -267,21 +267,21 @@ function Je({
   className: e = "",
   children: t,
   render: r,
-  nativeButton: c
+  nativeButton: s
 }) {
-  return r ? /* @__PURE__ */ s(
-    L.Trigger,
+  return r ? /* @__PURE__ */ c(
+    $.Trigger,
     {
       render: r,
-      nativeButton: c,
+      nativeButton: s,
       "data-oc-component": "modal-trigger",
       children: t
     }
-  ) : /* @__PURE__ */ s(
-    L.Trigger,
+  ) : /* @__PURE__ */ c(
+    $.Trigger,
     {
-      className: H(n.trigger, e),
-      nativeButton: c,
+      className: R(n.trigger, e),
+      nativeButton: s,
       "data-oc-component": "modal-trigger",
       children: t
     }
@@ -291,131 +291,131 @@ function Qe({
   className: e = "",
   children: t,
   variant: r = "adaptive",
-  size: c = "medium",
-  resize: l = "hug",
-  backdrop: k = "auto",
-  drag: p = "content",
-  peekable: h = !1,
-  snapPoints: f,
-  defaultSnapPoint: S,
-  snapPositions: d,
-  defaultSnapPosition: b,
-  initialFocus: i,
-  peekHeight: v,
-  closeThreshold: $,
+  size: s = "medium",
+  resize: l = "content",
+  backdrop: b = "auto",
+  drag: u = "content",
+  peekable: y = !1,
+  snapPoints: g,
+  defaultSnapPoint: k,
+  snapPositions: f,
+  defaultSnapPosition: p,
+  initialFocus: w,
+  peekHeight: i,
+  closeThreshold: H,
   scrollLockTimeout: V,
   container: O,
   style: q,
   ...ce
 }) {
-  const a = re("ModalContent"), { setCanPeek: K, setCanRenderHandle: A, setPlacement: J } = a, u = De(r), B = Y(null), g = Y(null), ee = Y(null), z = Y(null), Q = Y(0), N = Y(null), M = Y(null), [te, W] = T(), U = p === "handle" || p === "content", w = u === "popup" && U && !!d?.length, C = Ue({
-    backdrop: k,
-    canSnapPopup: w,
-    placement: u,
+  const a = re("ModalContent"), { setCanPeek: K, setCanRenderHandle: B, setPlacement: J } = a, d = De(r), D = Y(null), h = Y(null), ee = Y(null), z = Y(null), Q = Y(0), S = Y(null), C = Y(null), [te, W] = T(), U = u === "handle" || u === "content", F = d === "popup" && U && !!f?.length, N = Ue({
+    backdrop: b,
+    canSnapPopup: F,
+    placement: d,
     presentationState: a.presentationState
-  }), D = w && C === "hidden", F = (u === "bottom" || w) && U, P = u === "bottom" && F && h, X = P && v !== void 0 ? v : a.headerHeight > 0 ? a.headerHeight : void 0, y = be(() => {
-    if (!(!f?.length || typeof window > "u"))
+  }), I = F && N === "hidden", x = (d === "bottom" || F) && U, M = d === "bottom" && x && y, X = M && i !== void 0 ? i : a.headerHeight > 0 ? a.headerHeight : void 0, v = be(() => {
+    if (!(!g?.length || typeof window > "u"))
       return je({
-        snapPoints: f,
-        defaultSnapPoint: S,
+        snapPoints: g,
+        defaultSnapPoint: k,
         viewportHeight: window.innerHeight
       });
-  }, [S, f]), I = Ie(a.open);
+  }, [k, g]), E = Ie(a.open);
   ne(() => {
-    J(u);
-  }, [u, J]), ne(() => {
+    J(d);
+  }, [d, J]), ne(() => {
     a.open || (z.current = null);
-  }, [a.open]), ne(() => (K(P), () => K(!1)), [P, K]), ne(() => (A(F), () => A(!1)), [F, A]);
-  const x = Be({
-    enabled: p !== !1,
-    drag: p,
+  }, [a.open]), ne(() => (K(M), () => K(!1)), [M, K]), ne(() => (B(x), () => B(!1)), [x, B]);
+  const A = Be({
+    enabled: u !== !1,
+    drag: u,
     open: a.open,
-    placement: u,
-    surfaceMotionRef: B,
+    placement: d,
+    surfaceMotionRef: D,
     backdropRef: ee,
     bodyNode: a.bodyNode,
-    snapHeights: y?.snapHeights,
-    peekHeight: P ? v : void 0,
-    peekFallback: P ? "header" : void 0,
+    snapHeights: v?.snapHeights,
+    peekHeight: M ? i : void 0,
+    peekFallback: M ? "header" : void 0,
     presentationState: a.presentationState,
     setPresentationState: a.setPresentationState,
     requestClose: a.requestClose,
     canCloseAttempt: a.canCloseAttempt,
     dismissible: !a.disablePointerDismissal && a.canDismissByBehavior({ reason: "drag-dismiss" }),
-    visibleTranslate: y?.visibleTranslate,
-    snapPositions: w ? d : void 0,
-    defaultSnapPosition: b,
-    closeThreshold: $,
+    visibleTranslate: v?.visibleTranslate,
+    snapPositions: F ? f : void 0,
+    defaultSnapPosition: p,
+    closeThreshold: H,
     scrollLockTimeout: V,
     popupSnapLayoutVersion: a.popupSnapLayoutVersion
-  }), oe = R(
+  }), oe = P(
     (o) => {
-      B.current = o, o && a.open && w && z.current !== o && (qe({
-        defaultSnapPosition: b,
+      D.current = o, o && a.open && F && z.current !== o && (qe({
+        defaultSnapPosition: p,
         node: o,
-        snapPositions: d
+        snapPositions: f
       }), z.current = o);
     },
-    [w, a.open, b, d]
+    [F, a.open, p, f]
   );
   ne(() => {
     const o = a.closeAttemptFeedbackKey;
-    if (o === 0 || u !== "popup" || Q.current === o) {
+    if (o === 0 || d !== "popup" || Q.current === o) {
       Q.current = o, W(void 0);
       return;
     }
-    const m = g.current;
+    const m = h.current;
     if (!m) return;
-    Q.current = o, N.current !== null && window.cancelAnimationFrame(N.current), M.current !== null && window.clearTimeout(M.current), W(void 0);
+    Q.current = o, S.current !== null && window.cancelAnimationFrame(S.current), C.current !== null && window.clearTimeout(C.current), W(void 0);
     const le = () => {
-      W(void 0), M.current = null;
-    }, j = (me) => {
-      me.target === m && me.animationName === "oc-modal-reject-shake" && (m.removeEventListener("animationend", j), M.current !== null && window.clearTimeout(M.current), le());
+      W(void 0), C.current = null;
+    }, L = (me) => {
+      me.target === m && me.animationName === "oc-modal-reject-shake" && (m.removeEventListener("animationend", L), C.current !== null && window.clearTimeout(C.current), le());
     };
-    return m.addEventListener("animationend", j), N.current = window.requestAnimationFrame(() => {
-      N.current = null, W("reject"), N.current = window.requestAnimationFrame(() => {
-        N.current = null, M.current = window.setTimeout(() => {
-          m.removeEventListener("animationend", j), le();
+    return m.addEventListener("animationend", L), S.current = window.requestAnimationFrame(() => {
+      S.current = null, W("reject"), S.current = window.requestAnimationFrame(() => {
+        S.current = null, C.current = window.setTimeout(() => {
+          m.removeEventListener("animationend", L), le();
         }, Oe(m));
       });
     }), () => {
-      m.removeEventListener("animationend", j), N.current !== null && (window.cancelAnimationFrame(N.current), N.current = null), M.current !== null && (window.clearTimeout(M.current), M.current = null);
+      m.removeEventListener("animationend", L), S.current !== null && (window.cancelAnimationFrame(S.current), S.current = null), C.current !== null && (window.clearTimeout(C.current), C.current = null);
     };
-  }, [a.closeAttemptFeedbackKey, u]);
-  const E = $e(q), _ = {
-    ...E,
+  }, [a.closeAttemptFeedbackKey, d]);
+  const j = $e(q), _ = {
+    ...j,
     ...a.headerHeight > 0 ? { "--oc-modal-header-height": `${a.headerHeight}px` } : {},
     ...a.footerHeight > 0 ? { "--oc-modal-footer-height": `${a.footerHeight}px` } : {},
     ...X !== void 0 ? { "--oc-modal-peek-height": `${X}px` } : {},
-    ...y?.sheetHeight !== void 0 ? { "--oc-modal-sheet-height": `${y.sheetHeight}px` } : {},
-    ...y?.visibleTranslate !== void 0 ? {
-      "--oc-modal-translate-y": `${y.visibleTranslate}px`
+    ...v?.sheetHeight !== void 0 ? { "--oc-modal-sheet-height": `${v.sheetHeight}px` } : {},
+    ...v?.visibleTranslate !== void 0 ? {
+      "--oc-modal-translate-y": `${v.visibleTranslate}px`
     } : {}
   }, ae = {
     // Each modal reserves one backdrop slot and one viewport slot.
-    "--oc-modal-stack-offset": I * 2
-  }, G = i === "content" ? B : i, { setBackdropDismissalDisabled: se, setBackgroundInteractive: ie } = a;
-  return Ce(() => (se(C === "hidden"), ie(D), () => {
+    "--oc-modal-stack-offset": E * 2
+  }, G = w === "content" ? D : w, { setBackdropDismissalDisabled: se, setBackgroundInteractive: ie } = a;
+  return Ce(() => (se(N === "hidden"), ie(I), () => {
     se(!1), ie(!1);
   }), [
-    D,
-    C,
+    I,
+    N,
     se,
     ie
-  ]), /* @__PURE__ */ Z(L.Portal, { container: O, children: [
-    /* @__PURE__ */ s(
-      L.Backdrop,
+  ]), /* @__PURE__ */ Z($.Portal, { container: O, children: [
+    /* @__PURE__ */ c(
+      $.Backdrop,
       {
         ref: ee,
         className: n.backdrop,
         "data-oc-part": "backdrop",
         "data-oc-component": "modal-backdrop",
-        "data-oc-modal-backdrop": C,
-        "data-oc-modal-placement": u,
+        "data-oc-modal-backdrop": N,
+        "data-oc-modal-placement": d,
         "data-oc-modal-presentation-state": a.presentationState,
         style: ae,
         onClick: (o) => {
-          if (C === "hidden") {
+          if (N === "hidden") {
             o.stopPropagation();
             return;
           }
@@ -427,7 +427,7 @@ function Qe({
             a.notifyCloseAttemptRejected({ reason: "backdrop-press" });
             return;
           }
-          if (u === "bottom" && P) {
+          if (d === "bottom" && M) {
             a.presentationState === "visible" && a.setPresentationState("peeked");
             return;
           }
@@ -435,66 +435,66 @@ function Qe({
         }
       }
     ),
-    /* @__PURE__ */ s(
-      L.Viewport,
+    /* @__PURE__ */ c(
+      $.Viewport,
       {
         className: n.viewport,
         "data-oc-part": "viewport",
         "data-oc-component": "modal-viewport",
-        "data-oc-modal-placement": u,
+        "data-oc-modal-placement": d,
         style: ae,
         children: /* @__PURE__ */ Z(
-          L.Popup,
+          $.Popup,
           {
             ...ce,
-            ...x,
+            ...A,
             ref: oe,
             initialFocus: G,
-            className: H(
+            className: R(
               n.surfaceMotion,
-              n[c],
+              n[s],
               e
             ),
             "data-oc-part": "surface-motion",
             "data-oc-component": "modal-content",
-            "data-oc-modal-backdrop": C,
+            "data-oc-modal-backdrop": N,
             "data-oc-variant": r,
-            "data-oc-size": c,
+            "data-oc-size": s,
             "data-oc-resize": l,
-            "data-oc-modal-feedback": u === "popup" ? te : void 0,
-            "data-oc-modal-placement": u,
-            "data-oc-modal-snapping": y || w ? "true" : void 0,
+            "data-oc-modal-feedback": d === "popup" ? te : void 0,
+            "data-oc-modal-placement": d,
+            "data-oc-modal-snapping": v || F ? "true" : void 0,
             style: _,
             children: [
-              u === "bottom" ? /* @__PURE__ */ s(
+              d === "bottom" ? /* @__PURE__ */ c(
                 "div",
                 {
                   "aria-hidden": "true",
-                  className: H(
+                  className: R(
                     n.bottomFill,
-                    n[c],
+                    n[s],
                     e
                   ),
                   "data-oc-part": "bottom-fill",
                   "data-oc-component": "modal-bottom-fill",
-                  "data-oc-size": c,
-                  style: E
+                  "data-oc-size": s,
+                  style: j
                 }
               ) : null,
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ c(
                 "div",
                 {
-                  ref: g,
-                  className: H(
+                  ref: h,
+                  className: R(
                     n.surface,
                     n[l],
                     e
                   ),
                   "data-oc-part": "surface",
                   "data-oc-variant": r,
-                  "data-oc-size": c,
+                  "data-oc-size": s,
                   "data-oc-resize": l,
-                  "data-oc-modal-placement": u,
+                  "data-oc-modal-placement": d,
                   "data-oc-scrollable": a.scrollState.canScroll ? "true" : "false",
                   style: q,
                   children: t
@@ -511,36 +511,36 @@ function Xe({
   className: e = "",
   title: t,
   children: r,
-  leadingContent: c,
+  leadingContent: s,
   trailingContent: l,
-  closeLabel: k = "닫기",
-  closeButton: p = !0,
-  handle: h = !0,
-  ref: f,
-  ...S
+  closeLabel: b = "닫기",
+  closeButton: u = !0,
+  handle: y = !0,
+  ref: g,
+  ...k
 }) {
-  const d = re("ModalHeader"), { setHeaderNode: b, scrollState: i } = d, v = R(
+  const f = re("ModalHeader"), { setHeaderNode: p, scrollState: w } = f, i = P(
     (V) => {
-      b(V), pe(f, V);
+      p(V), pe(g, V);
     },
-    [f, b]
-  ), $ = Se(c);
+    [g, p]
+  ), H = Se(s);
   return /* @__PURE__ */ Z(
     He,
     {
-      ...S,
+      ...k,
       as: "header",
-      ref: v,
+      ref: i,
       backdrop: "compact",
-      className: H(n.header, e),
+      className: R(n.header, e),
       backColor: "var(--oc-color-theme-background-elevated-normal)",
       frontColor: "transparent",
       "data-oc-part": "header",
       "data-oc-component": "modal-header",
       variant: "strong",
-      "data-oc-sticky": i.scrolledFromTop ? "true" : "false",
+      "data-oc-sticky": w.scrolledFromTop ? "true" : "false",
       children: [
-        h && d.canRenderHandle ? /* @__PURE__ */ s(
+        y && f.canRenderHandle ? /* @__PURE__ */ c(
           "div",
           {
             "aria-hidden": "true",
@@ -552,14 +552,14 @@ function Xe({
           "div",
           {
             className: n.headerInner,
-            "data-oc-has-leading": $ ? "true" : "false",
+            "data-oc-has-leading": H ? "true" : "false",
             "data-oc-part": "header-inner",
             children: [
-              $ ? /* @__PURE__ */ s("div", { className: n.headerLeading, "data-oc-part": "header-leading", children: c }) : null,
-              /* @__PURE__ */ s("div", { className: n.headerTitle, "data-oc-part": "header-title", children: t ? /* @__PURE__ */ s(L.Title, { children: t }) : r }),
+              H ? /* @__PURE__ */ c("div", { className: n.headerLeading, "data-oc-part": "header-leading", children: s }) : null,
+              /* @__PURE__ */ c("div", { className: n.headerTitle, "data-oc-part": "header-title", children: t ? /* @__PURE__ */ c($.Title, { children: t }) : r }),
               /* @__PURE__ */ Z("div", { className: n.headerTrailing, "data-oc-part": "header-trailing", children: [
                 l,
-                p ? /* @__PURE__ */ s(Ne, { label: k }) : null
+                u ? /* @__PURE__ */ c(Ne, { label: b }) : null
               ] })
             ]
           }
@@ -572,18 +572,18 @@ function Ye({
   className: e = "",
   title: t,
   children: r,
-  expanded: c,
+  expanded: s,
   defaultExpanded: l = !0,
-  onExpandedChange: k,
-  disabled: p = !1,
-  forceMount: h = !0,
-  handle: f = !0,
-  headingLevel: S = 2,
-  indicator: d,
-  titleAsDialogTitle: b = !0,
-  navigationProps: i,
-  panelProps: v,
-  panelContentProps: $,
+  onExpandedChange: b,
+  disabled: u = !1,
+  forceMount: y = !0,
+  handle: g = !0,
+  headingLevel: k = 2,
+  indicator: f,
+  titleAsDialogTitle: p = !0,
+  navigationProps: w,
+  panelProps: i,
+  panelContentProps: H,
   ref: V,
   style: O,
   ...q
@@ -591,52 +591,52 @@ function Ye({
   const ce = re("ModalNavigationSection"), {
     canRenderHandle: a,
     notifyPopupSnapLayoutChange: K,
-    placement: A
-  } = ce, { height: J, setNode: u } = ue(), B = Me(), [g, ee] = ke({
-    value: c,
+    placement: B
+  } = ce, { height: J, setNode: d } = ue(), D = Me(), [h, ee] = ke({
+    value: s,
     defaultValue: l,
-    onChange: k
+    onChange: b
   }), [z, Q] = T(
-    g ? "open" : "closed"
-  ), N = `h${Ge(S) ? S : 2}`, {
-    className: M = "",
+    h ? "open" : "closed"
+  ), S = `h${Ge(k) ? k : 2}`, {
+    className: C = "",
     id: te,
     onClick: W,
     ...U
-  } = i ?? {}, {
-    className: w = "",
-    id: C,
-    role: D,
-    ...F
-  } = v ?? {}, { className: P = "", ...X } = $ ?? {}, y = te ?? `${B}-navigation`, I = C ?? `${B}-panel`, x = `${B}-dialog-title`, oe = Se(t), E = f && a, _ = J > 0 ? {
+  } = w ?? {}, {
+    className: F = "",
+    id: N,
+    role: I,
+    ...x
+  } = i ?? {}, { className: M = "", ...X } = H ?? {}, v = te ?? `${D}-navigation`, E = N ?? `${D}-panel`, A = `${D}-dialog-title`, oe = Se(t), j = g && a, _ = J > 0 ? {
     ...O,
     "--oc-modal-navigation-block-size": `${J}px`
-  } : O, ae = R(
+  } : O, ae = P(
     (G) => {
-      Q(G), A === "popup" && K();
+      Q(G), B === "popup" && K();
     },
-    [K, A]
+    [K, B]
   );
   return /* @__PURE__ */ Z(
     "section",
     {
       ref: V,
-      className: H(n.navigationSection, e),
+      className: R(n.navigationSection, e),
       style: _,
       ...q,
       "data-oc-component": "modal-navigation-section",
       "data-oc-motion-state": z,
-      "data-oc-state": g ? "open" : "closed",
+      "data-oc-state": h ? "open" : "closed",
       children: [
-        b && oe ? /* @__PURE__ */ s(
-          L.Title,
+        p && oe ? /* @__PURE__ */ c(
+          $.Title,
           {
             className: n.navigationDialogTitle,
-            id: x,
+            id: A,
             children: t
           }
         ) : null,
-        E ? /* @__PURE__ */ s(
+        j ? /* @__PURE__ */ c(
           "div",
           {
             "aria-hidden": "true",
@@ -644,51 +644,51 @@ function Ye({
             "data-oc-part": "handle"
           }
         ) : null,
-        /* @__PURE__ */ s(N, { className: n.navigationHeading, "data-oc-part": "heading", children: /* @__PURE__ */ Z(
+        /* @__PURE__ */ c(S, { className: n.navigationHeading, "data-oc-part": "heading", children: /* @__PURE__ */ Z(
           "button",
           {
             ...U,
-            ref: u,
-            id: y,
-            className: H(n.navigation, M),
+            ref: d,
+            id: v,
+            className: R(n.navigation, C),
             type: "button",
-            disabled: p,
-            "aria-disabled": p ? "true" : U["aria-disabled"],
-            "aria-expanded": g,
-            "aria-controls": I,
+            disabled: u,
+            "aria-disabled": u ? "true" : U["aria-disabled"],
+            "aria-expanded": h,
+            "aria-controls": E,
             onClick: (G) => {
-              W?.(G), !(G.defaultPrevented || p) && ee(!g);
+              W?.(G), !(G.defaultPrevented || u) && ee(!h);
             },
             "data-oc-component": "modal-navigation",
             "data-oc-part": "navigation",
-            "data-oc-state": g ? "open" : "closed",
+            "data-oc-state": h ? "open" : "closed",
             children: [
-              /* @__PURE__ */ s("span", { className: n.navigationTitle, "data-oc-part": "title", children: t }),
-              d === void 0 ? /* @__PURE__ */ s(
+              /* @__PURE__ */ c("span", { className: n.navigationTitle, "data-oc-part": "title", children: t }),
+              f === void 0 ? /* @__PURE__ */ c(
                 Fe,
                 {
                   className: n.navigationIndicator,
-                  open: g
+                  open: h
                 }
-              ) : d ? /* @__PURE__ */ s(
+              ) : f ? /* @__PURE__ */ c(
                 "span",
                 {
                   className: n.navigationIndicator,
                   "data-oc-part": "indicator",
-                  "data-oc-state": g ? "open" : "closed",
-                  children: xe(d)
+                  "data-oc-state": h ? "open" : "closed",
+                  children: /* @__PURE__ */ c("span", { "data-oc-part": "indicator-frame", children: xe(f) })
                 }
               ) : null,
-              p ? null : /* @__PURE__ */ s(we, { variant: "light" })
+              u ? null : /* @__PURE__ */ c(we, { variant: "light" })
             ]
           }
         ) }),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           Re,
           {
-            className: H(n.navigationPanel, w),
-            open: g,
-            forceMount: h,
+            className: R(n.navigationPanel, F),
+            open: h,
+            forceMount: y,
             intent: "expand",
             measureBlockSize: "rendered",
             onMotionStateChange: ae,
@@ -696,27 +696,27 @@ function Ye({
               className: n.navigationPanelFrame,
               "data-oc-part": "panel-inner"
             },
-            ...F,
-            "aria-hidden": g ? void 0 : !0,
-            "aria-labelledby": y,
-            id: I,
-            inert: g ? void 0 : !0,
-            role: D ?? "region",
+            ...x,
+            "aria-hidden": h ? void 0 : !0,
+            "aria-labelledby": v,
+            id: E,
+            inert: h ? void 0 : !0,
+            role: I ?? "region",
             "data-oc-component": "modal-navigation-panel",
-            "data-oc-state": g ? "open" : "closed",
-            children: /* @__PURE__ */ s(
+            "data-oc-state": h ? "open" : "closed",
+            children: /* @__PURE__ */ c(
               ve,
               {
                 className: n.navigationPanelScroll,
                 "data-oc-component": "modal-navigation-panel-scroll-area",
                 "data-oc-part": "panel-scroll-area",
-                children: /* @__PURE__ */ s(
+                children: /* @__PURE__ */ c(
                   ye,
                   {
                     ...X,
-                    className: H(
+                    className: R(
                       n.navigationPanelInner,
-                      P
+                      M
                     ),
                     "data-oc-component": "modal-navigation-panel-content",
                     children: r
@@ -733,51 +733,53 @@ function Ye({
 function Ze({
   className: e = "",
   children: t,
-  containerClassName: r = "",
-  containerProps: c,
-  ref: l,
-  ...k
+  layout: r = "content",
+  containerClassName: s = "",
+  containerProps: l,
+  ref: b,
+  ...u
 }) {
-  const p = re("ModalBody"), { bodyNode: h, setBodyNode: f, setScrollState: S } = p, d = R(
+  const y = re("ModalBody"), { bodyNode: g, setBodyNode: k, setScrollState: f } = y, p = P(
     (i) => {
-      S(Ee(i));
+      f(Ee(i));
     },
-    [S]
-  ), b = R(
+    [f]
+  ), w = P(
     (i) => {
-      f(i), pe(l, i), d(i);
+      k(i), pe(b, i), p(i);
     },
-    [l, f, d]
+    [b, k, p]
   );
   return ne(() => {
-    const i = h;
-    if (!i || (d(i), typeof ResizeObserver > "u")) return;
-    const v = new ResizeObserver(() => d(i));
-    return v.observe(i), i.firstElementChild && v.observe(i.firstElementChild), () => v.disconnect();
-  }, [h, d]), /* @__PURE__ */ s(
+    const i = g;
+    if (!i || (p(i), typeof ResizeObserver > "u")) return;
+    const H = new ResizeObserver(() => p(i));
+    return H.observe(i), i.firstElementChild && H.observe(i.firstElementChild), () => H.disconnect();
+  }, [g, p]), /* @__PURE__ */ c(
     ve,
     {
-      ...k,
-      className: H(n.body, e),
+      ...u,
+      className: R(n.body, e),
       "data-oc-part": "body",
       "data-oc-component": "modal-body",
-      children: /* @__PURE__ */ s(
+      children: /* @__PURE__ */ c(
         ye,
         {
-          ref: b,
+          ref: w,
           className: n.bodyContainer,
           "data-oc-part": "body-container",
           "data-oc-component": "modal-body-container",
           onScroll: (i) => {
-            c?.onScroll?.(i), d(i.currentTarget);
+            l?.onScroll?.(i), p(i.currentTarget);
           },
-          children: /* @__PURE__ */ s(
+          children: /* @__PURE__ */ c(
             "section",
             {
-              ...c,
-              className: H(n.bodyContent, r),
+              ...l,
+              className: R(n.bodyContent, s),
               "data-oc-part": "body-content",
               "data-oc-component": "modal-body-content",
+              "data-oc-layout": r,
               children: t
             }
           )
@@ -790,51 +792,51 @@ function et({
   className: e = "",
   children: t,
   background: r = "auto",
-  ref: c,
+  ref: s,
   ...l
 }) {
-  const k = re("ModalFooter"), { scrollState: p, setFooterNode: h } = k, f = R(
-    (b) => {
-      h(b), pe(c, b);
+  const b = re("ModalFooter"), { scrollState: u, setFooterNode: y } = b, g = P(
+    (p) => {
+      y(p), pe(s, p);
     },
-    [c, h]
-  ), S = r === !0 || r === "auto" && p.canScroll && !p.scrolledToBottom;
-  return /* @__PURE__ */ s(
+    [s, y]
+  ), k = r === !0 || r === "auto" && u.canScroll && !u.scrolledToBottom;
+  return /* @__PURE__ */ c(
     "footer",
     {
       ...l,
-      ref: f,
-      className: H(n.footer, e),
+      ref: g,
+      className: R(n.footer, e),
       "data-oc-part": "footer",
       "data-oc-component": "modal-footer",
-      "data-oc-background": S ? "true" : "false",
+      "data-oc-background": k ? "true" : "false",
       children: t
     }
   );
 }
 function Ne({
   className: e = "",
-  children: t = /* @__PURE__ */ s(Pe, {}),
+  children: t = /* @__PURE__ */ c(Pe, {}),
   label: r = "닫기",
-  size: c = 24,
+  size: s = 24,
   disabled: l,
-  onClick: k,
-  ...p
+  onClick: b,
+  ...u
 }) {
-  const h = re("ModalClose");
-  return /* @__PURE__ */ s(
+  const y = re("ModalClose");
+  return /* @__PURE__ */ c(
     Te,
     {
-      ...p,
-      className: H(n.close, e),
-      "aria-label": p["aria-label"] ?? r,
+      ...u,
+      className: R(n.close, e),
+      "aria-label": u["aria-label"] ?? r,
       "data-oc-part": "close",
       "data-oc-component": "modal-close",
       disabled: l,
-      onClick: (f) => {
-        k?.(f), !f.defaultPrevented && !l && h.requestClose({ reason: "close-button" });
+      onClick: (g) => {
+        b?.(g), !g.defaultPrevented && !l && y.requestClose({ reason: "close-button" });
       },
-      size: c,
+      size: s,
       children: t
     }
   );