@dotss/tictoccroc 0.4.2 → 0.6.0

package/dist/shared/components/MediaDialog/MediaDialog.mjs

@@ -1,331 +1,217 @@
-import { jsxs as B, jsx as x } from "react/jsx-runtime";
-import { useState as v, useRef as i, Children as nt, isValidElement as ct, useEffect as N, cloneElement as Yt } from "react";
-import { Flexbox as $, Typography as at, IconButton as $t } from "@dotss/ui";
-import wt from "@dotss/ui/core/useTheme";
-import Xt from "@dotss/ui/Dialog";
-import st from "./MediaBlock/MediaBlock.mjs";
-import Rt from "../Swiper/Swiper.mjs";
-function Dt({
-  children: V,
-  open: w = !1,
-  onClose: Z,
-  onSwipe: q,
-  initialPage: J = 0,
-  title: K,
-  loop: ut = !1,
-  fallback: it,
-  ...E
-}) {
-  const {
-    palette: { grey: ot, etc: Q }
-  } = wt(), [lt, _] = v(!1), [G, ft] = v(J), [ht, mt] = v("100vh"), [U, b] = v(1), [gt, Y] = v(!1), o = i(null), e = i(1), k = i(1), tt = i(3), y = i(0), M = i(0), W = i(0), A = i(0), n = i(0), c = i(0), l = i(!1), h = i(!1), D = i(null), X = i(0), C = i(0), dt = nt.toArray(V).filter((r) => ct(r)).filter((r) => r.type === st), pt = nt.toArray(V).filter((r) => ct(r)).filter((r) => r.type !== st), xt = (r) => (t) => {
-    l.current && t.stopPropagation(), W.current = t.clientX - n.current, A.current = t.clientY - c.current, h.current = e.current > 1, r == null || r(t);
-  }, yt = (r) => (t) => {
-    if (!h.current) return;
-    n.current = t.clientX - W.current, c.current = t.clientY - A.current;
-    const u = t.currentTarget, { width: s, height: a } = u.getBoundingClientRect(), d = s / e.current, m = a / e.current, f = Math.max(
-      0,
-      (d * e.current - o.current.offsetWidth) / 2
-    ), g = Math.max(
-      0,
-      (m * e.current - o.current.offsetHeight) / 2
-    );
-    n.current = Math.min(
-      Math.max(n.current, -f),
-      f
-    ), c.current = Math.min(
-      Math.max(c.current, -g),
-      g
-    ), t.currentTarget.style.cursor = "grabbing", t.currentTarget.style.transition = "none", t.currentTarget.style.transform = `translate3d(${n.current}px, ${c.current}px, 0) scale(${e.current})`, r == null || r(t);
-  }, rt = (r) => (t) => {
-    h.current && (t.currentTarget.style.cursor = "grab"), h.current = !1, r == null || r(t);
-  }, Mt = (r) => (t) => {
-    if (W.current = t.touches[0].clientX - n.current, A.current = t.touches[0].clientY - c.current, l.current = t.touches.length === 2, h.current = t.touches.length === 1 && e.current > 1, l.current) {
-      Y(!0);
-      const u = t.touches[1].clientX - t.touches[0].clientX, s = t.touches[1].clientY - t.touches[0].clientY;
-      y.current = Math.hypot(u, s);
-    }
-    r == null || r(t);
-  }, Ct = (r) => (t) => {
-    const u = t.touches.length === 2, s = t.touches.length === 1;
-    if (l.current && u) {
-      const a = t.touches[1].clientX - t.touches[0].clientX, d = t.touches[1].clientY - t.touches[0].clientY;
-      M.current = Math.hypot(a, d);
-      const m = M.current / y.current, f = Math.min(
-        Math.max(k.current, e.current * m),
-        tt.current
-      ), g = (t.touches[0].clientX + t.touches[1].clientX) / 2, p = (t.touches[0].clientY + t.touches[1].clientY) / 2, { left: S, top: F, width: R, height: I } = t.currentTarget.getBoundingClientRect(), O = R / e.current, z = I / e.current, L = g - S - R / 2, j = p - F - I / 2, T = f / e.current;
-      n.current -= L * (T - 1), c.current -= j * (T - 1), e.current = f, b(f), Y(!0);
-      const H = Math.max(
-        0,
-        (O * e.current - o.current.offsetWidth) / 2
-      ), P = Math.max(
-        0,
-        (z * e.current - o.current.offsetHeight) / 2
-      );
-      n.current = Math.min(
-        Math.max(n.current, -H),
-        H
-      ), c.current = Math.min(
-        Math.max(c.current, -P),
-        P
-      ), y.current = M.current, t.currentTarget.style.transition = "none", t.currentTarget.style.transform = `translate3d(${n.current}px, ${c.current}px, 0) scale(${e.current})`;
-    } else if (h.current && s) {
-      n.current = t.touches[0].clientX - W.current, c.current = t.touches[0].clientY - A.current;
-      const { width: a, height: d } = t.currentTarget.getBoundingClientRect(), m = a / e.current, f = d / e.current, g = Math.max(
-        0,
-        (m * e.current - o.current.offsetWidth) / 2
-      ), p = Math.max(
-        0,
-        (f * e.current - o.current.offsetHeight) / 2
-      );
-      n.current = Math.min(
-        Math.max(n.current, -g),
-        g
-      ), c.current = Math.min(
-        Math.max(c.current, -p),
-        p
-      ), t.currentTarget.style.transition = "none", t.currentTarget.style.transform = `translate3d(${n.current}px, ${c.current}px, 0) scale(${e.current})`;
-    }
-    r == null || r(t);
-  }, et = (r) => (t) => {
-    const u = e.current;
-    if (l.current && u > 1.2) {
-      const s = Math.abs(
-        (t.currentTarget.offsetWidth * e.current - o.current.offsetWidth) / 2
-      ), a = Math.abs(
-        (t.currentTarget.offsetHeight * e.current - o.current.offsetHeight) / 2
-      );
-      n.current = Math.min(
-        Math.max(n.current, -s),
-        s
-      ), c.current = Math.min(
-        Math.max(c.current, -a),
-        a
-      ), t.currentTarget.style.transition = "transform 0.3s", t.currentTarget.style.transform = `translate3d(${n.current}px, ${c.current}px, 0) scale(${e.current})`;
-    } else l.current && u <= 1.2 && (n.current = 0, c.current = 0, y.current = 0, M.current = 0, e.current = 1, l.current = !1, h.current = !1, b(1), Y(!1), t.currentTarget.style.transition = "transform 0.3s", t.currentTarget.style.transform = `translate3d(${n.current}px, ${c.current}px, 0) scale(${e.current})`);
-    h.current = !1, r == null || r(t);
-  }, St = ({ currentPage: r }) => {
-    var u;
-    r !== G ? (n.current = 0, c.current = 0, y.current = 0, e.current = 1, M.current = 0, l.current = !1, h.current = !1, b(1), Array.from(((u = D.current) == null ? void 0 : u.getElementsByTagName("img")) || []).forEach((a) => {
-      a.style.cursor = "default", a.style.transition = "transform 0.1s 0.1s", a.style.transform = "translate3d(0, 0, 0) scale(1)";
-    })) : e.current > 1.2 && (l.current = !0), q == null || q(r), ft(r);
-  }, bt = () => {
-    h.current = !1;
-  };
-  return N(() => {
-    var u;
-    const r = Array.from(((u = D.current) == null ? void 0 : u.getElementsByTagName("img")) || []), t = (s) => {
-      s.preventDefault(), l.current = !0, Y(!0);
-      const a = s.currentTarget, d = s.deltaY > 0 ? -0.1 : 0.1, m = Math.min(
-        Math.max(k.current, e.current + d),
-        tt.current
-      ), { left: f, top: g, width: p, height: S } = a.getBoundingClientRect(), F = p / e.current, R = S / e.current, I = s.clientX - f - p / 2, O = s.clientY - g - S / 2, z = m / e.current;
-      n.current -= I * (z - 1), c.current -= O * (z - 1), e.current = m, b(m);
-      const L = Math.max(
-        0,
-        (F * e.current - o.current.offsetWidth) / 2
-      ), j = Math.max(
-        0,
-        (R * e.current - o.current.offsetHeight) / 2
-      );
-      n.current = Math.min(
-        Math.max(n.current, -L),
-        L
-      ), c.current = Math.min(
-        Math.max(c.current, -j),
-        j
-      ), l.current = !0, a.style.cursor = "grab", a.style.transition = "none", a.style.transform = `translate3d(${n.current}px, ${c.current}px, 0) scale(${e.current})`, C.current && cancelAnimationFrame(C.current), C.current = requestAnimationFrame(() => {
-        const T = e.current;
-        if (T > 1) {
-          const H = Math.max(
-            0,
-            (F * e.current - o.current.offsetWidth) / 2
-          ), P = Math.max(
-            0,
-            (R * e.current - o.current.offsetHeight) / 2
-          );
-          n.current = Math.min(
-            Math.max(n.current, -H),
-            H
-          ), c.current = Math.min(
-            Math.max(c.current, -P),
-            P
-          ), a.style.cursor = "default", a.style.transition = "transform 0.3s", a.style.transform = `translate3d(${n.current}px, ${c.current}px, 0) scale(${e.current})`;
-        } else T <= 1.2 && (n.current = 0, c.current = 0, y.current = 0, M.current = 0, e.current = 1, l.current = !1, h.current = !1, b(1), Y(!1), a.style.cursor = "default", a.style.transition = "transform 0.3s", a.style.transform = `translate3d(${n.current}px, ${c.current}px, 0) scale(${e.current})`);
-      });
-    };
-    return r.forEach((s) => {
-      s.addEventListener("wheel", t);
-    }), () => {
-      C.current && cancelAnimationFrame(C.current), r.forEach((s) => {
-        s.removeEventListener("wheel", t);
-      });
-    };
-  }, [lt]), N(() => {
-    const r = () => {
-      var u;
-      const t = (u = D.current) == null ? void 0 : u.offsetHeight;
-      t && mt(`${t}px`);
-    };
-    return r(), window.addEventListener("resize", r), () => {
-      window.removeEventListener("resize", r);
-    };
-  }, []), N(() => (w ? X.current = requestAnimationFrame(() => {
-    _(!0);
-  }) : _(!1), () => {
-    X.current && cancelAnimationFrame(X.current);
-  }), [w]), N(() => (w && (e.current = 1, b(1), Y(!1), n.current = 0, c.current = 0, y.current = 0, M.current = 0, l.current = !1, h.current = !1), () => {
-    C.current && cancelAnimationFrame(C.current), X.current && cancelAnimationFrame(X.current);
-  }), [w]), /* @__PURE__ */ B(
-    Xt,
-    {
-      ref: o,
-      open: w,
-      onClose: Z,
-      fullScreen: !0,
-      hideStatusBar: !0,
-      hideSystemNavigationBar: !0,
-      "aria-modal": !0,
-      "aria-labelledby": K ? "media-dialog-title" : void 0,
-      ...E,
-      inlineCSS: {
-        backgroundColor: ot.black,
-        scrollbarWidth: "none",
-        "&::-webkit-scrollbar": {
-          display: "none"
-        },
-        "& > div": {
-          scrollbarWidth: "none",
-          "&::-webkit-scrollbar": {
-            display: "none"
-          }
-        },
-        ...E == null ? void 0 : E.inlineCSS
-      },
-      children: [
-        /* @__PURE__ */ x(
-          $,
-          {
-            "aria-hidden": !0,
-            inlineCSS: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: "100%",
-              minHeight: "var(--status-bar-height, 0px)",
-              backgroundColor: Q.dimmed01,
-              zIndex: 2
-            }
-          }
-        ),
-        /* @__PURE__ */ x(
-          $,
-          {
-            tag: "header",
-            inlineCSS: {
-              position: "absolute",
-              top: "var(--status-bar-height, 0px)",
-              left: 0,
-              width: "100%",
-              backgroundColor: Q.dimmed01,
-              zIndex: 2
-            },
-            children: /* @__PURE__ */ B(
-              $,
-              {
-                alignItems: "center",
-                p: 2,
-                inlineCSS: {
-                  position: "relative",
-                  display: "grid",
-                  gridTemplateColumns: "1fr auto 1fr",
-                  width: "100%",
-                  minHeight: 56,
-                  maxHeight: 56
-                },
-                children: [
-                  /* @__PURE__ */ x($, {}),
-                  /* @__PURE__ */ x(
-                    at,
-                    {
-                      id: "media-dialog-title",
-                      tag: "div",
-                      variant: "h4B",
-                      noWrap: !0,
-                      color: "grey.white",
-                      "aria-label": "이미지 확대창",
-                      inlineCSS: {
-                        flexGrow: 1
-                      },
-                      children: K
-                    }
-                  ),
-                  /* @__PURE__ */ x($, { justifyContent: "flex-end", children: /* @__PURE__ */ x($t, { name: "CloseLine", color: "tertiary", onClick: Z, "aria-label": "창 닫기" }) })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ x(
-          $,
-          {
-            ref: D,
-            alignItems: "center",
-            justifyContent: "center",
-            inlineCSS: {
-              position: "relative",
-              width: "100%",
-              height: "100%",
-              touchAction: "none",
-              overflow: "hidden"
-            },
-            children: /* @__PURE__ */ x(
-              Rt,
-              {
-                onSwipe: St,
-                onSwiping: bt,
-                initialPage: J,
-                loop: ut,
-                disableSwipe: gt,
-                children: dt.map(
-                  (r, t) => {
-                    var u, s, a, d, m, f, g, p, S;
-                    return Yt(r, {
-                      fallback: it,
-                      ...r.props,
-                      imageProps: {
-                        ...r.props.imageProps,
-                        lazy: G - 1 > t || G + 1 < t,
-                        onMouseDown: xt((u = r.props.imageProps) == null ? void 0 : u.onMouseDown),
-                        onMouseMove: yt((s = r.props.imageProps) == null ? void 0 : s.onMouseMove),
-                        onMouseUp: rt((a = r.props.imageProps) == null ? void 0 : a.onMouseUp),
-                        onMouseOut: rt((d = r.props.imageProps) == null ? void 0 : d.onMouseOut),
-                        onTouchStart: Mt((m = r.props.imageProps) == null ? void 0 : m.onTouchStart),
-                        onTouchMove: Ct((f = r.props.imageProps) == null ? void 0 : f.onTouchMove),
-                        onTouchEnd: et((g = r.props.imageProps) == null ? void 0 : g.onTouchEnd),
-                        onTouchCancel: et((p = r.props.imageProps) == null ? void 0 : p.onTouchCancel),
-                        style: {
-                          maxHeight: ht,
-                          ...(S = r.props.imageProps) == null ? void 0 : S.style
-                        }
-                      }
-                    });
-                  }
-                )
-              }
-            )
-          }
-        ),
-        pt,
-        /* @__PURE__ */ B(at, { role: "status", visuallyHidden: !0, children: [
-          U > 1 && "이미지가 확대되었어요.",
-          U <= 1 && "이미지가 원래 크기로 복원되었어요."
-        ] })
-      ]
-    }
-  );
+import e from "./MediaBlock/MediaBlock.mjs";
+import t from "../Swiper/index.mjs";
+import { Children as n, cloneElement as r, isValidElement as i, useEffect as a, useRef as o, useState as s } from "react";
+import { Flexbox as c, IconButton as l, Typography as u } from "@dotss/ui";
+import d from "@dotss/ui/core/useTheme";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import m from "@dotss/ui/Dialog";
+//#region shared/components/MediaDialog/MediaDialog.tsx
+function h({ children: h, open: g = !1, onClose: _, onSwipe: ee, initialPage: v = 0, title: y, loop: b = !1, fallback: x, ...S }) {
+	let { palette: { grey: C, etc: w } } = d(), [T, E] = s(!1), [D, te] = s(v), [O, k] = s("100vh"), [A, j] = s(1), [M, N] = s(!1), P = o(null), F = o(1), I = o(1), L = o(3), R = o(0), z = o(0), B = o(0), V = o(0), H = o(0), U = o(0), W = o(!1), G = o(!1), K = o(null), q = o(0), J = o(0), Y = n.toArray(h).filter((e) => i(e)).filter((t) => t.type === e), X = n.toArray(h).filter((e) => i(e)).filter((t) => t.type !== e), Z = (e) => (t) => {
+		W.current && t.stopPropagation(), B.current = t.clientX - H.current, V.current = t.clientY - U.current, G.current = F.current > 1, e?.(t);
+	}, ne = (e) => (t) => {
+		if (!G.current) return;
+		H.current = t.clientX - B.current, U.current = t.clientY - V.current;
+		let { width: n, height: r } = t.currentTarget.getBoundingClientRect(), i = n / F.current, a = r / F.current, o = Math.max(0, (i * F.current - P.current.offsetWidth) / 2), s = Math.max(0, (a * F.current - P.current.offsetHeight) / 2);
+		H.current = Math.min(Math.max(H.current, -o), o), U.current = Math.min(Math.max(U.current, -s), s), t.currentTarget.style.cursor = "grabbing", t.currentTarget.style.transition = "none", t.currentTarget.style.transform = `translate3d(${H.current}px, ${U.current}px, 0) scale(${F.current})`, e?.(t);
+	}, Q = (e) => (t) => {
+		G.current && (t.currentTarget.style.cursor = "grab"), G.current = !1, e?.(t);
+	}, re = (e) => (t) => {
+		if (B.current = t.touches[0].clientX - H.current, V.current = t.touches[0].clientY - U.current, W.current = t.touches.length === 2, G.current = t.touches.length === 1 && F.current > 1, W.current) {
+			N(!0);
+			let e = t.touches[1].clientX - t.touches[0].clientX, n = t.touches[1].clientY - t.touches[0].clientY;
+			R.current = Math.hypot(e, n);
+		}
+		e?.(t);
+	}, ie = (e) => (t) => {
+		let n = t.touches.length === 2, r = t.touches.length === 1;
+		if (W.current && n) {
+			let e = t.touches[1].clientX - t.touches[0].clientX, n = t.touches[1].clientY - t.touches[0].clientY;
+			z.current = Math.hypot(e, n);
+			let r = z.current / R.current, i = Math.min(Math.max(I.current, F.current * r), L.current), a = (t.touches[0].clientX + t.touches[1].clientX) / 2, o = (t.touches[0].clientY + t.touches[1].clientY) / 2, { left: s, top: c, width: l, height: u } = t.currentTarget.getBoundingClientRect(), d = l / F.current, f = u / F.current, p = a - s - l / 2, m = o - c - u / 2, h = i / F.current;
+			H.current -= p * (h - 1), U.current -= m * (h - 1), F.current = i, j(i), N(!0);
+			let g = Math.max(0, (d * F.current - P.current.offsetWidth) / 2), _ = Math.max(0, (f * F.current - P.current.offsetHeight) / 2);
+			H.current = Math.min(Math.max(H.current, -g), g), U.current = Math.min(Math.max(U.current, -_), _), R.current = z.current, t.currentTarget.style.transition = "none", t.currentTarget.style.transform = `translate3d(${H.current}px, ${U.current}px, 0) scale(${F.current})`;
+		} else if (G.current && r) {
+			H.current = t.touches[0].clientX - B.current, U.current = t.touches[0].clientY - V.current;
+			let { width: e, height: n } = t.currentTarget.getBoundingClientRect(), r = e / F.current, i = n / F.current, a = Math.max(0, (r * F.current - P.current.offsetWidth) / 2), o = Math.max(0, (i * F.current - P.current.offsetHeight) / 2);
+			H.current = Math.min(Math.max(H.current, -a), a), U.current = Math.min(Math.max(U.current, -o), o), t.currentTarget.style.transition = "none", t.currentTarget.style.transform = `translate3d(${H.current}px, ${U.current}px, 0) scale(${F.current})`;
+		}
+		e?.(t);
+	}, $ = (e) => (t) => {
+		let n = F.current;
+		if (W.current && n > 1.2) {
+			let e = Math.abs((t.currentTarget.offsetWidth * F.current - P.current.offsetWidth) / 2), n = Math.abs((t.currentTarget.offsetHeight * F.current - P.current.offsetHeight) / 2);
+			H.current = Math.min(Math.max(H.current, -e), e), U.current = Math.min(Math.max(U.current, -n), n), t.currentTarget.style.transition = "transform 0.3s", t.currentTarget.style.transform = `translate3d(${H.current}px, ${U.current}px, 0) scale(${F.current})`;
+		} else W.current && n <= 1.2 && (H.current = 0, U.current = 0, R.current = 0, z.current = 0, F.current = 1, W.current = !1, G.current = !1, j(1), N(!1), t.currentTarget.style.transition = "transform 0.3s", t.currentTarget.style.transform = `translate3d(${H.current}px, ${U.current}px, 0) scale(${F.current})`);
+		G.current = !1, e?.(t);
+	}, ae = ({ currentPage: e }) => {
+		e === D ? F.current > 1.2 && (W.current = !0) : (H.current = 0, U.current = 0, R.current = 0, F.current = 1, z.current = 0, W.current = !1, G.current = !1, j(1), Array.from(K.current?.getElementsByTagName("img") || []).forEach((e) => {
+			e.style.cursor = "default", e.style.transition = "transform 0.1s 0.1s", e.style.transform = "translate3d(0, 0, 0) scale(1)";
+		})), ee?.(e), te(e);
+	}, oe = () => {
+		G.current = !1;
+	};
+	return a(() => {
+		let e = Array.from(K.current?.getElementsByTagName("img") || []), t = (e) => {
+			e.preventDefault(), W.current = !0, N(!0);
+			let t = e.currentTarget, n = e.deltaY > 0 ? -.1 : .1, r = Math.min(Math.max(I.current, F.current + n), L.current), { left: i, top: a, width: o, height: s } = t.getBoundingClientRect(), c = o / F.current, l = s / F.current, u = e.clientX - i - o / 2, d = e.clientY - a - s / 2, f = r / F.current;
+			H.current -= u * (f - 1), U.current -= d * (f - 1), F.current = r, j(r);
+			let p = Math.max(0, (c * F.current - P.current.offsetWidth) / 2), m = Math.max(0, (l * F.current - P.current.offsetHeight) / 2);
+			H.current = Math.min(Math.max(H.current, -p), p), U.current = Math.min(Math.max(U.current, -m), m), W.current = !0, t.style.cursor = "grab", t.style.transition = "none", t.style.transform = `translate3d(${H.current}px, ${U.current}px, 0) scale(${F.current})`, J.current && cancelAnimationFrame(J.current), J.current = requestAnimationFrame(() => {
+				let e = F.current;
+				if (e > 1) {
+					let e = Math.max(0, (c * F.current - P.current.offsetWidth) / 2), n = Math.max(0, (l * F.current - P.current.offsetHeight) / 2);
+					H.current = Math.min(Math.max(H.current, -e), e), U.current = Math.min(Math.max(U.current, -n), n), t.style.cursor = "default", t.style.transition = "transform 0.3s", t.style.transform = `translate3d(${H.current}px, ${U.current}px, 0) scale(${F.current})`;
+				} else e <= 1.2 && (H.current = 0, U.current = 0, R.current = 0, z.current = 0, F.current = 1, W.current = !1, G.current = !1, j(1), N(!1), t.style.cursor = "default", t.style.transition = "transform 0.3s", t.style.transform = `translate3d(${H.current}px, ${U.current}px, 0) scale(${F.current})`);
+			});
+		};
+		return e.forEach((e) => {
+			e.addEventListener("wheel", t);
+		}), () => {
+			J.current && cancelAnimationFrame(J.current), e.forEach((e) => {
+				e.removeEventListener("wheel", t);
+			});
+		};
+	}, [T]), a(() => {
+		let e = () => {
+			let e = K.current?.offsetHeight;
+			e && k(`${e}px`);
+		};
+		return e(), window.addEventListener("resize", e), () => {
+			window.removeEventListener("resize", e);
+		};
+	}, []), a(() => (g ? q.current = requestAnimationFrame(() => {
+		E(!0);
+	}) : E(!1), () => {
+		q.current && cancelAnimationFrame(q.current);
+	}), [g]), a(() => (g && (F.current = 1, j(1), N(!1), H.current = 0, U.current = 0, R.current = 0, z.current = 0, W.current = !1, G.current = !1), () => {
+		J.current && cancelAnimationFrame(J.current), q.current && cancelAnimationFrame(q.current);
+	}), [g]), /* @__PURE__ */ p(m, {
+		ref: P,
+		open: g,
+		onClose: _,
+		fullScreen: !0,
+		hideStatusBar: !0,
+		hideSystemNavigationBar: !0,
+		"aria-modal": !0,
+		"aria-labelledby": y ? "media-dialog-title" : void 0,
+		...S,
+		inlineCSS: {
+			backgroundColor: C.black,
+			scrollbarWidth: "none",
+			"&::-webkit-scrollbar": { display: "none" },
+			"& > div": {
+				scrollbarWidth: "none",
+				"&::-webkit-scrollbar": { display: "none" }
+			},
+			...S?.inlineCSS
+		},
+		children: [
+			/* @__PURE__ */ f(c, {
+				"aria-hidden": !0,
+				inlineCSS: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					minHeight: "var(--status-bar-height, 0px)",
+					backgroundColor: w.dimmed01,
+					zIndex: 2
+				}
+			}),
+			/* @__PURE__ */ f(c, {
+				tag: "header",
+				inlineCSS: {
+					position: "absolute",
+					top: "var(--status-bar-height, 0px)",
+					left: 0,
+					width: "100%",
+					backgroundColor: w.dimmed01,
+					zIndex: 2
+				},
+				children: /* @__PURE__ */ p(c, {
+					alignItems: "center",
+					p: 2,
+					inlineCSS: {
+						position: "relative",
+						display: "grid",
+						gridTemplateColumns: "1fr auto 1fr",
+						width: "100%",
+						minHeight: 56,
+						maxHeight: 56
+					},
+					children: [
+						/* @__PURE__ */ f(c, {}),
+						/* @__PURE__ */ f(u, {
+							id: "media-dialog-title",
+							tag: "div",
+							variant: "h4B",
+							noWrap: !0,
+							color: "grey.white",
+							"aria-label": "이미지 확대창",
+							inlineCSS: { flexGrow: 1 },
+							children: y
+						}),
+						/* @__PURE__ */ f(c, {
+							justifyContent: "flex-end",
+							children: /* @__PURE__ */ f(l, {
+								name: "CloseLine",
+								color: "tertiary",
+								onClick: _,
+								"aria-label": "창 닫기"
+							})
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ f(c, {
+				ref: K,
+				alignItems: "center",
+				justifyContent: "center",
+				inlineCSS: {
+					position: "relative",
+					width: "100%",
+					height: "100%",
+					touchAction: "none",
+					overflow: "hidden"
+				},
+				children: /* @__PURE__ */ f(t, {
+					onSwipe: ae,
+					onSwiping: oe,
+					initialPage: v,
+					loop: b,
+					disableSwipe: M,
+					children: Y.map((e, t) => r(e, {
+						fallback: x,
+						...e.props,
+						imageProps: {
+							...e.props.imageProps,
+							lazy: D - 1 > t || D + 1 < t,
+							onMouseDown: Z(e.props.imageProps?.onMouseDown),
+							onMouseMove: ne(e.props.imageProps?.onMouseMove),
+							onMouseUp: Q(e.props.imageProps?.onMouseUp),
+							onMouseOut: Q(e.props.imageProps?.onMouseOut),
+							onTouchStart: re(e.props.imageProps?.onTouchStart),
+							onTouchMove: ie(e.props.imageProps?.onTouchMove),
+							onTouchEnd: $(e.props.imageProps?.onTouchEnd),
+							onTouchCancel: $(e.props.imageProps?.onTouchCancel),
+							style: {
+								maxHeight: O,
+								...e.props.imageProps?.style
+							}
+						}
+					}))
+				})
+			}),
+			X,
+			/* @__PURE__ */ p(u, {
+				role: "status",
+				visuallyHidden: !0,
+				children: [A > 1 && "이미지가 확대되었어요.", A <= 1 && "이미지가 원래 크기로 복원되었어요."]
+			})
+		]
+	});
 }
-export {
-  Dt as default
-};
+//#endregion
+export { h as default };

package/dist/shared/components/MediaDialog/MediaDialogContent/MediaDialogContent.mjs

@@ -1,23 +1,20 @@
-import { jsx as t } from "react/jsx-runtime";
 import { Typography as e } from "@dotss/ui";
-import i from "@dotss/ui/core/useTheme";
-function c({ children: n }) {
-  const { spacing: o } = i();
-  return /* @__PURE__ */ t(
-    e,
-    {
-      variant: "b2R",
-      color: "grey.white",
-      inlineCSS: {
-        display: "flex",
-        flexDirection: "column",
-        gap: o.content(2),
-        padding: o.content(4)
-      },
-      children: n
-    }
-  );
+import t from "@dotss/ui/core/useTheme";
+import { jsx as n } from "react/jsx-runtime";
+//#region shared/components/MediaDialog/MediaDialogContent/MediaDialogContent.tsx
+function r({ children: r }) {
+	let { spacing: i } = t();
+	return /* @__PURE__ */ n(e, {
+		variant: "b2R",
+		color: "grey.white",
+		inlineCSS: {
+			display: "flex",
+			flexDirection: "column",
+			gap: i.content(2),
+			padding: i.content(4)
+		},
+		children: r
+	});
 }
-export {
-  c as default
-};
+//#endregion
+export { r as default };

package/dist/shared/components/MediaDialog/MediaDialogContent/index.mjs

@@ -1,4 +1,5 @@
-import t from "./MediaDialogContent.mjs";
-export {
-  t as default
-};
+import e from "./MediaDialogContent.mjs";
+//#region shared/components/MediaDialog/MediaDialogContent/index.ts
+var t = e;
+//#endregion
+export { t as default };