@dotss/tictoccroc 0.0.2 → 0.0.4

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

@@ -1,77 +1,128 @@
-import { jsx as p } from "react/jsx-runtime";
-import { forwardRef as h, useState as m, useRef as k, useImperativeHandle as w, useEffect as c, Children as x, isValidElement as B, cloneElement as S } from "react";
-import { Flexbox as f } from "@dotss/ui";
-import C from "../../Image/Image.mjs";
-const j = h(
+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 P = a(
   ({
-    children: g,
-    spacing: s = 2,
-    width: e = 0,
-    height: i = 0,
-    borderRadius: d,
-    direction: u = "vertical",
+    children: m,
+    width: r = 0,
+    height: s = 0,
+    spacing: x = 2,
+    borderRadius: S,
+    direction: v = "vertical",
     setInnerRef: o,
-    ...r
-  }, v) => {
-    const [l, y] = m(e ?? 0), [a, b] = m(i ?? 0), n = k(null);
-    return w(v, () => n.current), c(() => {
-      y(e), b(i);
-    }, [e, i]), c(() => {
-      o == null || o(n.current);
-    }, [o]), /* @__PURE__ */ p(
-      f,
+    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(n);
+      };
+    }, []), p(() => {
+      o == null || o(h.current);
+    }, [o]), /* @__PURE__ */ k(
+      t,
       {
-        ref: n,
-        ...r,
+        ref: h,
+        flexDirection: "column",
+        ...e,
         inlineCSS: {
-          scrollbarWidth: "none",
-          transform: "translate3d(0, 0, 0)",
-          "&::-webkit-scrollbar": {
-            display: "none"
-          }
+          breakInside: "avoid",
+          ...e == null ? void 0 : e.inlineCSS
         },
-        style: u === "vertical" ? {
-          ...r.style,
-          position: "relative",
-          marginBottom: s,
-          borderRadius: d,
-          paddingTop: `calc(${a / l} * 100%)`,
-          transition: "padding-top 0.3s 0.1s",
-          overflow: "hidden"
-        } : {
-          ...r.style,
-          position: "relative",
-          marginBottom: s,
-          borderRadius: d,
-          paddingLeft: l,
-          paddingTop: a,
-          transition: "padding-top 0.3s 0.1s, padding-left 0.3s 0.1s",
-          overflow: "hidden"
-        },
-        children: /* @__PURE__ */ p(
-          f,
-          {
-            inlineCSS: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: "100%",
-              height: "100%",
-              overflow: "auto",
-              zIndex: 1
-            },
-            children: x.toArray(g).filter(B).map((t) => t.type === C || t.type === "img" ? S(t, {
-              width: l,
-              height: a,
-              draggable: !1,
-              ...t.props
-            }) : t)
-          }
-        )
+        children: [
+          v === "vertical" && /* @__PURE__ */ g(
+            t,
+            {
+              inlineCSS: {
+                minHeight: E.content(x)
+              }
+            }
+          ),
+          /* @__PURE__ */ k(
+            t,
+            {
+              onTransitionEnd: I,
+              inlineCSS: {
+                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
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ]
       }
     );
   }
 );
 export {
-  j as default
+  P as default
 };

package/dist/shared/components/MediaDialog/MediaBlock/MediaBlock.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { ImageProps } from '../../Image';
+import { SwiperBlockProps } from '../../Swiper';
+export interface MediaBlockProps extends SwiperBlockProps {
+    fallback?: ReactNode;
+    imageProps?: Partial<ImageProps>;
+}
+declare function MediaBlock({ children, fallback, imageProps, ...props }: MediaBlockProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default MediaBlock;

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

@@ -0,0 +1,70 @@
+import { jsxs as p, jsx as d } from "react/jsx-runtime";
+import { useState as S, Children as u, isValidElement as y, cloneElement as c } from "react";
+import { Flexbox as x } from "@dotss/ui";
+import b from "../../Image/Image.mjs";
+import w from "../../Swiper/SwiperBlock/SwiperBlock.mjs";
+function j({ children: i, fallback: l, imageProps: t, ...n }) {
+  const [r, s] = S(!1), f = () => s(!0);
+  return /* @__PURE__ */ p(
+    w,
+    {
+      ...n,
+      inlineCSS: {
+        marginTop: "calc(var(--status-bar-height, 0px) * -1)",
+        "& > div:nth-of-type(1)": {
+          zIndex: 1
+        },
+        ...n == null ? void 0 : n.inlineCSS
+      },
+      children: [
+        u.toArray(i).filter(y).map((e) => {
+          var a, o;
+          return e.type === b || e.type === "img" ? c(e, {
+            ...t,
+            onLoad: f,
+            disabledResizing: !0,
+            draggable: !1,
+            wrapperProps: {
+              ...t == null ? void 0 : t.wrapperProps,
+              ...e.props.wrapperProps,
+              inlineCSS: {
+                overflow: "visible",
+                margin: "0 auto",
+                ...(a = t == null ? void 0 : t.wrapperProps) == null ? void 0 : a.inlineCSS,
+                ...(o = e.props.wrapperProps) == null ? void 0 : o.inlineCSS
+              }
+            },
+            style: {
+              position: "static",
+              maxWidth: "100%",
+              objectFit: "contain",
+              transform: "translate3d(0, 0, 0) scale(1)",
+              zIndex: 1,
+              ...t == null ? void 0 : t.style,
+              ...e.props.style
+            },
+            ...e.props
+          }) : e;
+        }),
+        !r && /* @__PURE__ */ d(
+          x,
+          {
+            "aria-busy": !0,
+            inlineCSS: {
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              opacity: r ? 0 : 1,
+              transition: "opacity 0.3s"
+            },
+            children: l
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  j as default
+};

package/dist/shared/components/MediaDialog/MediaBlock/index.d.ts

@@ -0,0 +1,2 @@
+import { default as MediaBlock } from './MediaBlock';
+export default MediaBlock;

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

@@ -0,0 +1,4 @@
+import a from "./MediaBlock.mjs";
+export {
+  a as default
+};

package/dist/shared/components/MediaDialog/MediaDialog.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { DialogProps } from 'node_modules/@dotss/ui/Dialog/Dialog';
+export interface MediaDialogProps extends Omit<DialogProps, 'title'> {
+    open?: boolean;
+    onClose?: () => void;
+    onSwipe?: (page: number) => void;
+    initialPage?: number;
+    title?: ReactNode;
+    loop?: boolean;
+    fallback?: ReactNode;
+}
+declare function MediaDialog({ children, open, onClose, onSwipe, initialPage, title, loop, fallback, ...props }: PropsWithChildren<MediaDialogProps>): import("@emotion/react/jsx-runtime").JSX.Element;
+export default MediaDialog;

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

@@ -0,0 +1,330 @@
+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 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,
+  ...v
+}) {
+  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);
+  }, 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 - 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);
+  }, tt = (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);
+      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(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,
+        (G * e.current - o.current.offsetWidth) / 2
+      ), H = 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),
+        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,
+        (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);
+  }, rt = (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, 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 !== 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), q == null || q(r), ft(r);
+  }, bt = () => {
+    h.current = !1;
+  };
+  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 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,
+        (F * e.current - o.current.offsetWidth) / 2
+      ), j = Math.max(
+        0,
+        (X * 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 R = e.current;
+        if (R > 1) {
+          const T = Math.max(
+            0,
+            (F * e.current - o.current.offsetWidth) / 2
+          ), H = Math.max(
+            0,
+            (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, -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, 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);
+    }), () => {
+      C.current && cancelAnimationFrame(C.current), r.forEach((s) => {
+        s.removeEventListener("wheel", t);
+      });
+    };
+  }, [ot]), N(() => {
+    const r = () => {
+      var u;
+      const t = (u = A.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(
+    Xt,
+    {
+      ref: o,
+      open: $,
+      onClose: V,
+      fullScreen: !0,
+      hideStatusBar: !0,
+      hideSystemNavigationBar: !0,
+      "aria-modal": !0,
+      "aria-labelledby": J ? "media-dialog-title" : void 0,
+      ...v,
+      inlineCSS: {
+        backgroundColor: it.black,
+        scrollbarWidth: "none",
+        "&::-webkit-scrollbar": {
+          display: "none"
+        },
+        "& > div": {
+          scrollbarWidth: "none",
+          "&::-webkit-scrollbar": {
+            display: "none"
+          }
+        },
+        ...v == null ? void 0 : v.inlineCSS
+      },
+      children: [
+        /* @__PURE__ */ x(
+          Y,
+          {
+            "aria-hidden": !0,
+            inlineCSS: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              minHeight: "var(--status-bar-height, 0px)",
+              backgroundColor: K.dimmed01,
+              zIndex: 2
+            }
+          }
+        ),
+        /* @__PURE__ */ x(
+          Y,
+          {
+            tag: "header",
+            inlineCSS: {
+              position: "absolute",
+              top: "var(--status-bar-height, 0px)",
+              left: 0,
+              width: "100%",
+              backgroundColor: K.dimmed01,
+              zIndex: 2
+            },
+            children: /* @__PURE__ */ O(
+              Y,
+              {
+                alignItems: "center",
+                p: 2,
+                inlineCSS: {
+                  position: "relative",
+                  display: "grid",
+                  gridTemplateColumns: "1fr auto 1fr",
+                  width: "100%",
+                  minHeight: 56,
+                  maxHeight: 56
+                },
+                children: [
+                  /* @__PURE__ */ x(Y, {}),
+                  /* @__PURE__ */ x(
+                    ct,
+                    {
+                      id: "media-dialog-title",
+                      tag: "div",
+                      variant: "h4B",
+                      noWrap: !0,
+                      color: "grey.white",
+                      "aria-label": "이미지 확대창",
+                      inlineCSS: {
+                        flexGrow: 1
+                      },
+                      children: J
+                    }
+                  ),
+                  /* @__PURE__ */ x(Y, { justifyContent: "flex-end", children: /* @__PURE__ */ x($t, { name: "CloseLine", color: "tertiary", onClick: V, "aria-label": "창 닫기" }) })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ x(
+          Y,
+          {
+            ref: A,
+            alignItems: "center",
+            justifyContent: "center",
+            inlineCSS: {
+              position: "relative",
+              width: "100%",
+              height: "100%",
+              touchAction: "none",
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ x(
+              Rt,
+              {
+                onSwipe: St,
+                onSwiping: bt,
+                initialPage: Z,
+                loop: st,
+                disableSwipe: gt,
+                children: dt.map(
+                  (r) => {
+                    var t, u, s, a, d, m, f, g, p;
+                    return Yt(r, {
+                      fallback: ut,
+                      ...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),
+                        style: {
+                          maxHeight: ht,
+                          ...(p = r.props.imageProps) == null ? void 0 : p.style
+                        }
+                      }
+                    });
+                  }
+                )
+              }
+            )
+          }
+        ),
+        pt,
+        /* @__PURE__ */ O(ct, { role: "status", visuallyHidden: !0, children: [
+          _ > 1 && "이미지가 확대되었어요.",
+          _ <= 1 && "이미지가 원래 크기로 복원되었어요."
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Dt as default
+};

package/dist/shared/components/MediaDialog/MediaDialogContent/MediaDialogContent.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+declare function MediaDialogContent({ children }: PropsWithChildren): import("@emotion/react/jsx-runtime").JSX.Element;
+export default MediaDialogContent;

package/dist/shared/components/{ImageZoomDialog/ImageZoomDialogContent/ImageZoomDialogContent.mjs → MediaDialog/MediaDialogContent/MediaDialogContent.mjs}

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
 import { Typography as e } from "@dotss/ui";
 import i from "@dotss/ui/core/useTheme";
-function p({ children: n }) {
+function c({ children: n }) {
   const { spacing: o } = i();
   return /* @__PURE__ */ t(
     e,
@@ -19,5 +19,5 @@ function p({ children: n }) {
   );
 }
 export {
-  p as default
+  c as default
 };

package/dist/shared/components/MediaDialog/MediaDialogContent/index.d.ts

@@ -0,0 +1,2 @@
+import { default as MediaDialogContent } from './MediaDialogContent';
+export default MediaDialogContent;

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

@@ -0,0 +1,4 @@
+import t from "./MediaDialogContent.mjs";
+export {
+  t as default
+};

package/dist/shared/components/MediaDialog/MediaDialogFooter/MediaDialogFooter.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+declare function MediaDialogFooter({ children }: PropsWithChildren): import("@emotion/react/jsx-runtime").JSX.Element;
+export default MediaDialogFooter;