@dotss/tictoccroc 0.0.3 → 0.0.4

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

@@ -1,62 +1,62 @@
-import { jsx as T } from "react/jsx-runtime";
-import { useState as p, useRef as i, Children as x, isValidElement as G, useEffect as g, cloneElement as j } from "react";
-import { Box as q, Flexbox as ct } from "@dotss/ui";
-import ut from "@dotss/ui/core/useTheme";
-import { findImageInChildren as z, getHorizontalLayoutRows as lt, getNextIndexHorizontalFromRows as ft, findNextFocusableElement as L } from "./Masonry.utils.mjs";
-import V from "./MasonryBlock/MasonryBlock.mjs";
-import $ from "../../../teacher/profile/components/ActivityGallery/ActivityGalleryItem/ActivityGalleryItem.mjs";
-function bt({
-  children: y,
-  columnCount: S = 2,
-  rowCount: F = 2,
-  spacing: u = 2,
+import { jsx as z } from "react/jsx-runtime";
+import { useState as p, useRef as i, Children as S, isValidElement as j, useEffect as g, cloneElement as q } from "react";
+import { Box as V, Flexbox as ct } from "@dotss/ui";
+import lt from "@dotss/ui/core/useTheme";
+import { findImageInChildren as x, getHorizontalLayoutRows as ft, getNextIndexHorizontalFromRows as pt, findNextFocusableElement as y } from "./Masonry.utils.mjs";
+import $ from "./MasonryBlock/MasonryBlock.mjs";
+import J from "../../../teacher/profile/components/ActivityGallery/ActivityGalleryItem/ActivityGalleryItem.mjs";
+function kt({
+  children: A,
+  columnCount: F = 2,
+  rowCount: B = 2,
+  spacing: s = 2,
   edgeSpacing: d = 0,
-  direction: v = "vertical",
-  defaultContainerWidth: J = 360,
-  defaultContainerHeight: Q = 0,
+  direction: b = "vertical",
+  defaultContainerWidth: Q = 360,
+  defaultContainerHeight: Y = 0,
   ...a
 }) {
-  const { spacing: A } = ut(), [Y, Z] = p(J), [_, K] = p(Q), [H, O] = p(0), w = 4 / 3, l = (Y - u) / S, f = v === "horizontal" ? (_ - u) / F : l * w, o = i(null), c = i([]), b = i([]), E = i(!1), k = i(!0), B = i(0), I = i(0), m = i(0), [h, tt] = p(
-    x.toArray(y).filter(G).filter((e) => e.type === V || e.type === $)
-  ), [W, et] = p(
+  const { spacing: E } = lt(), [Z, _] = p(Q), [K, O] = p(Y), [H, tt] = p(0), k = 4 / 3, l = (Z - s) / F, f = b === "horizontal" ? (K - s) / B : l * k, o = i(null), u = i([]), R = i([]), T = i(!1), M = i(!0), W = i(0), C = i(0), m = i(0), [h, et] = p(
+    S.toArray(A).filter(j).filter((e) => e.type === $ || e.type === J)
+  ), [N, rt] = p(
     h.map((e) => {
       var t;
-      return ((t = z(e.props.children)) == null ? void 0 : t.props.src) ?? "";
+      return ((t = x(e.props.children)) == null ? void 0 : t.props.src) ?? "";
     })
-  ), [C, rt] = p(
+  ), [D, nt] = p(
     h.map((e) => {
       var t;
       return {
-        src: ((t = z(e.props.children)) == null ? void 0 : t.props.src) ?? "",
+        src: ((t = x(e.props.children)) == null ? void 0 : t.props.src) ?? "",
         width: e.props.width ?? l,
         height: e.props.height ?? f
       };
     })
-  ), N = h.length, P = (e) => {
+  ), P = h.length, U = (e) => {
     var t, r;
-    E.current = !0, B.current = e.clientX - (((t = o.current) == null ? void 0 : t.offsetLeft) || 0), I.current = ((r = o.current) == null ? void 0 : r.scrollLeft) || 0;
-  }, U = (e) => {
-    E.current && (e.currentTarget.style.cursor = "grabbing", o.current && (o.current.scrollLeft = I.current - (e.clientX - o.current.offsetLeft - B.current)));
-  }, M = (e) => {
+    T.current = !0, W.current = e.clientX - (((t = o.current) == null ? void 0 : t.offsetLeft) || 0), C.current = ((r = o.current) == null ? void 0 : r.scrollLeft) || 0;
+  }, X = (e) => {
+    T.current && (e.currentTarget.style.cursor = "grabbing", o.current && (o.current.scrollLeft = C.current - (e.clientX - o.current.offsetLeft - W.current)));
+  }, L = (e) => {
     var r;
-    E.current = !1, I.current !== ((r = o.current) == null ? void 0 : r.scrollLeft) ? (e.currentTarget.style.cursor = "grab", k.current = !1, m.current && cancelAnimationFrame(m.current), m.current = requestAnimationFrame(() => {
-      k.current = !0;
-    })) : k.current = !0;
-  }, nt = (e) => (t) => {
+    T.current = !1, C.current !== ((r = o.current) == null ? void 0 : r.scrollLeft) ? (e.currentTarget.style.cursor = "grab", M.current = !1, m.current && cancelAnimationFrame(m.current), m.current = requestAnimationFrame(() => {
+      M.current = !0;
+    })) : M.current = !0;
+  }, ot = (e) => (t) => {
     t.stopPropagation();
     let r = null;
     switch (t.key) {
       case "ArrowRight":
-        t.preventDefault(), r = L(t.currentTarget, "right", c.current);
+        t.preventDefault(), r = y(t.currentTarget, "right", u.current);
         break;
       case "ArrowLeft":
-        t.preventDefault(), r = L(t.currentTarget, "left", c.current);
+        t.preventDefault(), r = y(t.currentTarget, "left", u.current);
         break;
       case "ArrowDown":
-        t.preventDefault(), r = L(t.currentTarget, "down", c.current);
+        t.preventDefault(), r = y(t.currentTarget, "down", u.current);
         break;
       case "ArrowUp":
-        t.preventDefault(), r = L(t.currentTarget, "up", c.current);
+        t.preventDefault(), r = y(t.currentTarget, "up", u.current);
         break;
       case "Enter":
       case " ": {
@@ -67,7 +67,7 @@ function bt({
         return;
     }
     r == null || r.focus(), e == null || e(t);
-  }, ot = (e) => (t) => {
+  }, st = (e) => (t) => {
     if (t.stopPropagation(), t.key === "Enter" || t.key === " ") {
       t.preventDefault(), t.currentTarget.click();
       return;
@@ -78,22 +78,22 @@ function bt({
       return;
     }
     t.preventDefault();
-    const R = ft(
-      b.current,
+    const v = pt(
+      R.current,
       r,
       n
-    ), s = c.current[R ?? -1];
-    s == null || s.focus(), e == null || e(t);
-  }, st = (e) => (t) => {
-    c.current[e] = t;
-  }, at = (e, t, r) => (n) => {
-    b.current[t] || (b.current[t] = []), c.current[e] = n, b.current[t][r] = n;
-  }, X = (e) => (t) => {
-    O(Number(t.currentTarget.getAttribute("aria-posinset")) - 1), e == null || e(t);
+    ), w = u.current[v ?? -1];
+    w == null || w.focus(), e == null || e(t);
+  }, at = (e) => (t) => {
+    u.current[e] = t;
+  }, it = (e, t, r) => (n) => {
+    R.current[t] || (R.current[t] = []), u.current[e] = n, R.current[t][r] = n;
+  }, G = (e) => (t) => {
+    tt(Number(t.currentTarget.getAttribute("aria-posinset")) - 1), e == null || e(t);
   };
   if (g(() => {
     const e = o.current, t = (r) => {
-      k.current || r.stopPropagation();
+      M.current || r.stopPropagation();
     };
     return e == null || e.addEventListener("click", t), () => {
       e == null || e.removeEventListener("click", t);
@@ -106,53 +106,53 @@ function bt({
       e == null || e.removeEventListener("touchmove", t);
     };
   }, []), g(() => {
-    const e = x.toArray(y).filter(G).filter((r) => r.type === V || r.type === $), t = e.map((r) => {
+    const e = S.toArray(A).filter(j).filter((r) => r.type === $ || r.type === J), t = e.map((r) => {
       var n;
-      return ((n = z(r.props.children)) == null ? void 0 : n.props.src) ?? "";
+      return ((n = x(r.props.children)) == null ? void 0 : n.props.src) ?? "";
     }).filter(Boolean);
-    tt(e), et(t);
-  }, [y]), g(() => {
-    f <= 0 || W.forEach((e) => {
+    et(e), rt(t);
+  }, [A]), g(() => {
+    f <= 0 || N.forEach((e) => {
       const t = new window.Image();
       t.src = e, t.onload = () => {
-        rt(
+        nt(
           (r) => r.map((n) => (n.src === e && (n.width = t.width / t.height * (n.height ?? f), n.height = n.height ?? f), n))
         ), t.onload = null;
       }, t.onerror = () => {
         t.onload = null;
       };
     });
-  }, [W, f]), g(() => {
+  }, [N, f]), g(() => {
     const e = () => {
       var t, r, n;
-      Z(((r = (t = o.current) == null ? void 0 : t.parentElement) == null ? void 0 : r.offsetWidth) ?? 0), K(((n = o.current) == null ? void 0 : n.offsetHeight) ?? 0);
+      _(((r = (t = o.current) == null ? void 0 : t.parentElement) == null ? void 0 : r.offsetWidth) ?? 0), O(((n = o.current) == null ? void 0 : n.offsetHeight) ?? 0);
     };
     return e(), window.addEventListener("resize", e), () => {
       window.removeEventListener("resize", e);
     };
   }, []), g(() => () => {
     m.current && cancelAnimationFrame(m.current);
-  }, []), v === "horizontal") {
-    const e = lt(
-      C,
+  }, []), b === "horizontal") {
+    const e = ft(
+      D,
       h,
-      F,
-      l * w / 2
+      B,
+      l * k / 2
     );
-    let t = l * w / 2;
+    let t = l * k / 2;
     t = t <= 0 ? 120 : t;
     let r = 0;
-    return /* @__PURE__ */ T(
-      q,
+    return /* @__PURE__ */ z(
+      V,
       {
         ref: o,
         role: "list",
         "aria-label": "콘텐츠",
         "aria-orientation": "horizontal",
-        onMouseDown: P,
-        onMouseMove: U,
-        onMouseUp: M,
-        onMouseLeave: M,
+        onMouseDown: U,
+        onMouseMove: X,
+        onMouseUp: L,
+        onMouseLeave: L,
         pl: d,
         pr: d,
         ...a,
@@ -170,63 +170,71 @@ function bt({
           },
           ...a == null ? void 0 : a.inlineCSS
         },
-        children: e.map((n, R) => /* @__PURE__ */ T(ct, { gap: u, children: n.map((s, it) => {
-          const D = r++;
-          return j(s, {
-            setInnerRef: at(D, R, it),
-            tabIndex: D === H ? 0 : -1,
-            role: "listitem",
-            "aria-posinset": D + 1,
-            "aria-setsize": N,
-            width: s.props.width ?? t,
-            height: s.props.height ?? f,
-            spacing: A.content(u),
-            direction: v,
-            sourceMetadata: C,
-            onKeyDown: ot(s.props.onKeyDown),
-            onFocus: X(s.props.onFocus),
-            ...s.props
-          });
-        }) }, `masonry-row-${R}`))
+        children: e.map((n, v) => {
+          const w = v === e.length - 1;
+          return /* @__PURE__ */ z(ct, { gap: s, children: n.map((c, ut) => {
+            const I = r++;
+            return q(c, {
+              setInnerRef: it(I, v, ut),
+              tabIndex: I === H ? 0 : -1,
+              role: "listitem",
+              "aria-posinset": I + 1,
+              "aria-setsize": P,
+              width: c.props.width ?? t,
+              height: c.props.height ?? f,
+              direction: b,
+              spacing: s,
+              sourceMetadata: D,
+              onKeyDown: st(c.props.onKeyDown),
+              onFocus: G(c.props.onFocus),
+              style: {
+                marginBottom: w ? 0 : E.content(s),
+                ...c.props.style
+              },
+              ...c.props
+            });
+          }) }, `masonry-row-${v}`);
+        })
       }
     );
   }
-  return /* @__PURE__ */ T(
-    q,
+  return /* @__PURE__ */ z(
+    V,
     {
       ref: o,
       role: "list",
       "aria-label": "콘텐츠",
       "aria-orientation": "vertical",
-      onMouseDown: P,
-      onMouseMove: U,
-      onMouseUp: M,
-      onMouseLeave: M,
+      onMouseDown: U,
+      onMouseMove: X,
+      onMouseUp: L,
+      onMouseLeave: L,
       pt: d,
       pb: d,
       ...a,
       inlineCSS: {
         width: "100%",
         position: "relative",
-        columnCount: S,
-        columnGap: A.content(u),
+        columnCount: F,
+        columnGap: E.content(s),
+        marginTop: -E.content(s),
         ...a == null ? void 0 : a.inlineCSS
       },
-      children: x.map(
+      children: S.map(
         h,
-        (e, t) => j(e, {
-          setInnerRef: st(t),
+        (e, t) => q(e, {
+          setInnerRef: at(t),
           role: "listitem",
           tabIndex: t === H ? 0 : -1,
           "aria-posinset": t + 1,
-          "aria-setsize": N,
+          "aria-setsize": P,
           width: e.props.width ?? l,
-          height: e.props.height ?? l * w / 2,
-          spacing: A.content(u),
-          direction: v,
-          sourceMetadata: C,
-          onKeyDown: nt(e.props.onKeyDown),
-          onFocus: X(e.props.onFocus),
+          height: e.props.height ?? l * k / 2,
+          direction: b,
+          spacing: s,
+          sourceMetadata: D,
+          onKeyDown: ot(e.props.onKeyDown),
+          onFocus: G(e.props.onFocus),
           ...e.props
         })
       )
@@ -234,5 +242,5 @@ function bt({
   );
 }
 export {
-  bt as default
+  kt as default
 };

package/dist/shared/components/Masonry/MasonryBlock/MasonryBlock.d.ts

@@ -1,8 +1,8 @@
 import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
 export interface MasonryBlockProps extends FlexboxProps {
-    spacing?: number;
     width?: number;
     height?: number;
+    spacing?: number;
     borderRadius?: number | string;
     direction?: 'horizontal' | 'vertical';
     sourceMetadata?: {

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
 };

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

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Flexbox as i } from "@dotss/ui";
+import { Flexbox as i } from "/Users/x/WebstormProjects/dotss/node_modules/.pnpm/@dotss+ui@0.0.10_@emotion+react@11.14.0_@types+react@19.1.6_react@18.3.1__@emotion+styl_fdc48194e396bad48e1a88da53a8b49d/node_modules/@dotss/ui/index.es.js";
 import r from "@dotss/ui/core/useTheme";
 function l({ children: o }) {
   const {

package/dist/shared/components/Scheduler/ScheduleEvent/ScheduleEvent.mjs

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Flexbox as l, Typography as n } from "/Users/x/WebstormProjects/dotss/node_modules/.pnpm/@dotss+ui@0.0.10_@emotion+react@11.14.0_@types+react@19.1.6_react@18.3.1__@emotion+styl_fdc48194e396bad48e1a88da53a8b49d/node_modules/@dotss/ui/index.es.js";
+import { Flexbox as l, Typography as n } from "@dotss/ui";
 import p from "@dotss/ui/core/useTheme";
 function s({ children: r, style: t, startDate: f, endDate: i, ...o }) {
   const {

package/dist/shared/components/Swiper/Swiper.mjs

@@ -176,7 +176,7 @@ function hr({
   }, []), k(() => {
     rr(E);
   }, [E]), k(() => {
-    t.current && !H.current && (H.current = !0, t.current.style.transform = `translate3d(calc(-100% * ${E < p + 1 ? E : p + 1}), 0, 0)`);
+    t.current && !H.current && (H.current = !0, t.current.style.transition = "none", t.current.style.transform = `translate3d(calc(-100% * ${E < p + 1 ? E : p + 1}), 0, 0)`);
   }, [p, E]), /* @__PURE__ */ Z(
     K,
     {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dotss/tictoccroc",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",