@dotss/tictoccroc 0.0.33 → 0.0.35

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

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

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

@@ -1,28 +1,28 @@
-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 { 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 at from "./MediaBlock/MediaBlock.mjs";
+import st from "./MediaBlock/MediaBlock.mjs";
 import Rt from "../Swiper/Swiper.mjs";
 function Dt({
-  children: B,
-  open: $ = !1,
-  onClose: V,
+  children: V,
+  open: w = !1,
+  onClose: Z,
   onSwipe: q,
-  initialPage: Z = 0,
-  title: J,
-  loop: st = !1,
-  fallback: ut,
-  ...v
+  initialPage: J = 0,
+  title: K,
+  loop: ut = !1,
+  fallback: it,
+  ...E
 }) {
   const {
-    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);
+    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 - E.current, c.current = t.clientY - W.current;
+    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
@@ -37,11 +37,11 @@ function Dt({
       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);
-  }, tt = (r) => (t) => {
+  }, rt = (r) => (t) => {
     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);
+    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);
     }
@@ -52,26 +52,26 @@ function Dt({
       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(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(
+        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,
-        (G * e.current - o.current.offsetWidth) / 2
-      ), H = Math.max(
+        (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, -T),
-        T
-      ), c.current = Math.min(
-        Math.max(c.current, -H),
+        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 - E.current, c.current = t.touches[0].clientY - W.current;
+      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
@@ -88,7 +88,7 @@ function Dt({
       ), 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) => {
+  }, et = (r) => (t) => {
     const u = e.current;
     if (l.current && u > 1.2) {
       const s = Math.abs(
@@ -103,11 +103,11 @@ function Dt({
         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, 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})`);
+    } 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 !== 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) => {
+    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 = () => {
@@ -115,19 +115,19 @@ function Dt({
   };
   return N(() => {
     var u;
-    const r = Array.from(((u = A.current) == null ? void 0 : u.getElementsByTagName("img")) || []), t = (s) => {
-      s.preventDefault(), l.current = !0, b(!0);
+    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(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);
+        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,
-        (X * e.current - o.current.offsetHeight) / 2
+        (R * e.current - o.current.offsetHeight) / 2
       );
       n.current = Math.min(
         Math.max(n.current, -L),
@@ -136,23 +136,23 @@ function Dt({
         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(
+        const T = e.current;
+        if (T > 1) {
+          const H = Math.max(
             0,
             (F * e.current - o.current.offsetWidth) / 2
-          ), H = Math.max(
+          ), P = Math.max(
             0,
-            (X * e.current - o.current.offsetHeight) / 2
+            (R * e.current - o.current.offsetHeight) / 2
           );
           n.current = Math.min(
-            Math.max(n.current, -T),
-            T
-          ), c.current = Math.min(
-            Math.max(c.current, -H),
+            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 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})`);
+        } 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) => {
@@ -162,35 +162,35 @@ function Dt({
         s.removeEventListener("wheel", t);
       });
     };
-  }, [ot]), N(() => {
+  }, [lt]), N(() => {
     const r = () => {
       var u;
-      const t = (u = A.current) == null ? void 0 : u.offsetHeight;
+      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.current = requestAnimationFrame(() => {
-    Q(!0);
-  }) : Q(!1), () => {
-    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(
+  }, []), 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: $,
-      onClose: V,
+      open: w,
+      onClose: Z,
       fullScreen: !0,
       hideStatusBar: !0,
       hideSystemNavigationBar: !0,
       "aria-modal": !0,
-      "aria-labelledby": J ? "media-dialog-title" : void 0,
-      ...v,
+      "aria-labelledby": K ? "media-dialog-title" : void 0,
+      ...E,
       inlineCSS: {
-        backgroundColor: it.black,
+        backgroundColor: ot.black,
         scrollbarWidth: "none",
         "&::-webkit-scrollbar": {
           display: "none"
@@ -201,11 +201,11 @@ function Dt({
             display: "none"
           }
         },
-        ...v == null ? void 0 : v.inlineCSS
+        ...E == null ? void 0 : E.inlineCSS
       },
       children: [
         /* @__PURE__ */ x(
-          Y,
+          $,
           {
             "aria-hidden": !0,
             inlineCSS: {
@@ -214,13 +214,13 @@ function Dt({
               left: 0,
               width: "100%",
               minHeight: "var(--status-bar-height, 0px)",
-              backgroundColor: K.dimmed01,
+              backgroundColor: Q.dimmed01,
               zIndex: 2
             }
           }
         ),
         /* @__PURE__ */ x(
-          Y,
+          $,
           {
             tag: "header",
             inlineCSS: {
@@ -228,11 +228,11 @@ function Dt({
               top: "var(--status-bar-height, 0px)",
               left: 0,
               width: "100%",
-              backgroundColor: K.dimmed01,
+              backgroundColor: Q.dimmed01,
               zIndex: 2
             },
-            children: /* @__PURE__ */ O(
-              Y,
+            children: /* @__PURE__ */ B(
+              $,
               {
                 alignItems: "center",
                 p: 2,
@@ -245,9 +245,9 @@ function Dt({
                   maxHeight: 56
                 },
                 children: [
-                  /* @__PURE__ */ x(Y, {}),
+                  /* @__PURE__ */ x($, {}),
                   /* @__PURE__ */ x(
-                    ct,
+                    at,
                     {
                       id: "media-dialog-title",
                       tag: "div",
@@ -258,19 +258,19 @@ function Dt({
                       inlineCSS: {
                         flexGrow: 1
                       },
-                      children: J
+                      children: K
                     }
                   ),
-                  /* @__PURE__ */ x(Y, { justifyContent: "flex-end", children: /* @__PURE__ */ x($t, { name: "CloseLine", color: "tertiary", onClick: V, "aria-label": "창 닫기" }) })
+                  /* @__PURE__ */ x($, { justifyContent: "flex-end", children: /* @__PURE__ */ x($t, { name: "CloseLine", color: "tertiary", onClick: Z, "aria-label": "창 닫기" }) })
                 ]
               }
             )
           }
         ),
         /* @__PURE__ */ x(
-          Y,
+          $,
           {
-            ref: A,
+            ref: D,
             alignItems: "center",
             justifyContent: "center",
             inlineCSS: {
@@ -285,28 +285,29 @@ function Dt({
               {
                 onSwipe: St,
                 onSwiping: bt,
-                initialPage: Z,
-                loop: st,
+                initialPage: J,
+                loop: ut,
                 disableSwipe: gt,
                 children: dt.map(
-                  (r) => {
-                    var t, u, s, a, d, m, f, g, p;
+                  (r, t) => {
+                    var u, s, a, d, m, f, g, p, S;
                     return Yt(r, {
-                      fallback: ut,
+                      fallback: it,
                       ...r.props,
                       imageProps: {
                         ...r.props.imageProps,
-                        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: 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),
+                        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,
-                          ...(p = r.props.imageProps) == null ? void 0 : p.style
+                          ...(S = r.props.imageProps) == null ? void 0 : S.style
                         }
                       }
                     });
@@ -317,9 +318,9 @@ function Dt({
           }
         ),
         pt,
-        /* @__PURE__ */ O(ct, { role: "status", visuallyHidden: !0, children: [
-          _ > 1 && "이미지가 확대되었어요.",
-          _ <= 1 && "이미지가 원래 크기로 복원되었어요."
+        /* @__PURE__ */ B(at, { role: "status", visuallyHidden: !0, children: [
+          U > 1 && "이미지가 확대되었어요.",
+          U <= 1 && "이미지가 원래 크기로 복원되었어요."
         ] })
       ]
     }