@dotss/tictoccroc 0.0.3 → 0.0.5

package/dist/shared/components/Masonry/MasonryBlock/MasonryBlock.mjs

@@ -1,104 +1,121 @@
-import { jsxs as B, jsx as w } from "react/jsx-runtime";
-import { forwardRef as A, useState as p, useRef as H, useImperativeHandle as I, useEffect as h, Children as W, isValidElement as z, cloneElement as F } from "react";
-import { Flexbox as k, Skeleton as L } from "@dotss/ui";
+import { jsxs as k, jsx as g } from "react/jsx-runtime";
+import { forwardRef as a, useState as u, useRef as A, useImperativeHandle as B, useEffect as p, Children as W, isValidElement as z, cloneElement as F } from "react";
+import { Flexbox as t, Skeleton as D } from "@dotss/ui";
+import L from "@dotss/ui/core/useTheme";
 import V from "../../Image/Image.mjs";
 import { findImageInChildren as $ } from "../Masonry.utils.mjs";
-const N = A(
+const P = a(
   ({
-    children: g,
-    spacing: u = 2,
-    width: e = 0,
-    height: r = 0,
-    borderRadius: m,
-    direction: x = "vertical",
-    setInnerRef: n,
-    sourceMetadata: s,
-    ...t
-  }, C) => {
-    var S;
-    const l = $(g), y = (S = l == null ? void 0 : l.props) == null ? void 0 : S.src, i = s == null ? void 0 : s.find((o) => o.src === y), [d, E] = p((i == null ? void 0 : i.width) ?? e ?? 0), [c, T] = p((i == null ? void 0 : i.height) ?? r ?? 0), [b, v] = p(!y), f = H(null), j = () => v(!0);
-    return I(C, () => f.current), h(() => {
-      E((i == null ? void 0 : i.width) ?? e ?? 0), T((i == null ? void 0 : i.height) ?? r ?? 0);
-    }, [e, r, i == null ? void 0 : i.width, i == null ? void 0 : i.height]), h(() => {
-      const o = setTimeout(() => {
-        v(!0);
+    children: m,
+    width: r = 0,
+    height: s = 0,
+    spacing: x = 2,
+    borderRadius: S,
+    direction: v = "vertical",
+    setInnerRef: o,
+    sourceMetadata: l,
+    ...e
+  }, T) => {
+    var C;
+    const { spacing: E } = L(), c = $(m), b = (C = c == null ? void 0 : c.props) == null ? void 0 : C.src, i = l == null ? void 0 : l.find((n) => n.src === b), [d, j] = u((i == null ? void 0 : i.width) ?? r ?? 0), [f, H] = u((i == null ? void 0 : i.height) ?? s ?? 0), [y, w] = u(!b), h = A(null), I = () => w(!0);
+    return B(T, () => h.current), p(() => {
+      j((i == null ? void 0 : i.width) ?? r ?? 0), H((i == null ? void 0 : i.height) ?? s ?? 0);
+    }, [r, s, i == null ? void 0 : i.width, i == null ? void 0 : i.height]), p(() => {
+      const n = setTimeout(() => {
+        w(!0);
       }, 300);
       return () => {
-        clearTimeout(o);
+        clearTimeout(n);
       };
-    }, []), h(() => {
-      n == null || n(f.current);
-    }, [n]), /* @__PURE__ */ B(
-      k,
+    }, []), p(() => {
+      o == null || o(h.current);
+    }, [o]), /* @__PURE__ */ k(
+      t,
       {
-        ref: f,
-        ...t,
-        onTransitionEnd: j,
+        ref: h,
+        flexDirection: "column",
+        ...e,
         inlineCSS: {
-          position: "relative",
-          overflow: "hidden",
-          scrollbarWidth: "none",
-          transform: "translate3d(0, 0, 0)",
-          "&::-webkit-scrollbar": {
-            display: "none"
-          },
-          ...t == null ? void 0 : t.inlineCSS
-        },
-        style: x === "vertical" ? {
-          ...t.style,
-          marginBottom: u,
-          borderRadius: m,
-          paddingTop: `calc(${c / d} * 100%)`,
-          transition: "transform 0.3s 0.1s, padding-top 0.3s 0.1s"
-        } : {
-          ...t.style,
-          marginBottom: u,
-          borderRadius: m,
-          paddingLeft: d,
-          paddingTop: c,
-          transition: "transform 0.3s 0.1s, padding-top 0.3s 0.1s, padding-left 0.3s 0.1s"
+          breakInside: "avoid",
+          ...e == null ? void 0 : e.inlineCSS
         },
         children: [
-          /* @__PURE__ */ w(
-            k,
+          v === "vertical" && /* @__PURE__ */ g(
+            t,
             {
               inlineCSS: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                height: "100%",
-                overflow: "hidden",
-                zIndex: 1
-              },
-              children: W.toArray(g).filter(z).map((o) => o.type === V || o.type === "img" ? F(o, {
-                width: d,
-                height: c,
-                draggable: !1,
-                style: {
-                  overflow: "hidden",
-                  objectFit: "cover",
-                  ...o.props.style
-                },
-                ...o.props
-              }) : o)
+                minHeight: E.content(x)
+              }
             }
           ),
-          /* @__PURE__ */ w(
-            L,
+          /* @__PURE__ */ k(
+            t,
             {
-              borderRadius: 0,
+              onTransitionEnd: I,
               inlineCSS: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                height: "100%",
-                zIndex: 2,
-                opacity: b ? 0 : 1,
-                transition: "opacity 0.3s 0.1s",
-                pointerEvents: b ? "none" : void 0
-              }
+                position: "relative",
+                overflow: "hidden",
+                scrollbarWidth: "none",
+                transform: "translate3d(0, 0, 0)",
+                "&::-webkit-scrollbar": {
+                  display: "none"
+                },
+                ...e == null ? void 0 : e.inlineCSS
+              },
+              style: v === "vertical" ? {
+                borderRadius: S,
+                paddingTop: `calc(${f / d} * 100%)`,
+                transition: "transform 0.3s 0.1s, padding-top 0.3s 0.1s"
+              } : {
+                borderRadius: S,
+                paddingLeft: d,
+                paddingTop: f,
+                transition: "transform 0.3s 0.1s, padding-top 0.3s 0.1s, padding-left 0.3s 0.1s"
+              },
+              children: [
+                /* @__PURE__ */ g(
+                  t,
+                  {
+                    inlineCSS: {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: "100%",
+                      height: "100%",
+                      overflow: "hidden",
+                      zIndex: 1
+                    },
+                    children: W.toArray(m).filter(z).map((n) => n.type === V || n.type === "img" ? F(n, {
+                      width: d,
+                      height: f,
+                      draggable: !1,
+                      style: {
+                        overflow: "hidden",
+                        objectFit: "cover",
+                        ...n.props.style
+                      },
+                      ...n.props
+                    }) : n)
+                  }
+                ),
+                /* @__PURE__ */ g(
+                  D,
+                  {
+                    borderRadius: 0,
+                    inlineCSS: {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: "100%",
+                      height: "100%",
+                      zIndex: 2,
+                      opacity: y ? 0 : 1,
+                      transition: "opacity 0.3s 0.1s",
+                      pointerEvents: y ? "none" : void 0
+                    }
+                  }
+                )
+              ]
             }
           )
         ]
@@ -107,5 +124,5 @@ const N = A(
   }
 );
 export {
-  N as default
+  P as default
 };

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

@@ -10,6 +10,7 @@ function j({ children: i, fallback: l, imageProps: t, ...n }) {
     {
       ...n,
       inlineCSS: {
+        marginTop: "calc(var(--status-bar-height, 0px) * -1)",
         "& > div:nth-of-type(1)": {
           zIndex: 1
         },
@@ -38,7 +39,6 @@ function j({ children: i, fallback: l, imageProps: t, ...n }) {
               maxWidth: "100%",
               objectFit: "contain",
               transform: "translate3d(0, 0, 0) scale(1)",
-              marginTop: "calc(var(--status-bar-height, 0px) * -1)",
               zIndex: 1,
               ...t == null ? void 0 : t.style,
               ...e.props.style

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

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