@dotss/tictoccroc 0.0.0 → 0.0.2

package/dist/shared/components/ImageZoomDialog/ImageZoomDialog.mjs

@@ -1,37 +1,35 @@
-import { jsxs as N, jsx as d } from "react/jsx-runtime";
+import { jsxs as q, jsx as d } from "react/jsx-runtime";
 import { useState as W, useRef as u, useEffect as A } from "react";
-import pt from "@thedotscorp/ui/core/useTheme";
-import Mt from "@thedotscorp/ui/Dialog";
-import C from "@thedotscorp/ui/Flexbox";
-import yt from "/Users/dong-yeon/Desktop/codes/dots/node_modules/.pnpm/@thedotscorp+ui@1.1.0_@emotion+react@11.14.0_@types+react@19.1.6_react@18.3.1__@emotion_5e74bcb90e85c612e05d311f1928ebed/node_modules/@thedotscorp/ui/IconButton/index.es.js";
-import Ct from "@thedotscorp/ui/Typography";
+import { Flexbox as w, Typography as et, IconButton as pt } from "@dotss/ui";
+import yt from "@dotss/ui/core/useTheme";
+import Ct from "@dotss/ui/Dialog";
 import bt from "./ImageBlock/ImageBlock.mjs";
-import St from "../Swiper/Swiper.mjs";
-import wt from "../Swiper/SwiperBlock/SwiperBlock.mjs";
-function Bt({
-  children: et,
+import Tt from "../Swiper/Swiper.mjs";
+import St from "../Swiper/SwiperBlock/SwiperBlock.mjs";
+function Wt({
+  children: nt,
   open: $ = !1,
-  onClose: b,
+  onClose: C,
   onSwipe: P,
   sources: L,
   initialPage: G = 0,
   title: U,
-  fallback: nt,
-  loop: ct = !1
+  fallback: ct,
+  loop: at = !1
 }) {
   const {
     palette: { grey: Z, etc: O }
-  } = pt(), [at, J] = W(!1), [it, st] = W(G), [ut, S] = W(!1), [ot, lt] = W("100vh"), [K, w] = W(1), l = u(null), r = u(1), Q = u(1), V = u(3), g = u(0), x = u(0), B = u(0), D = u(0), e = u(0), n = u(0), o = u(!1), f = u(!1), k = u(null), Y = u(0), p = u(0), ht = (t) => {
+  } = yt(), [it, J] = W(!1), [st, ut] = W(G), [ot, b] = W(!1), [lt, ht] = W("100vh"), [K, T] = W(1), l = u(null), r = u(1), Q = u(1), V = u(3), g = u(0), x = u(0), B = u(0), D = u(0), e = u(0), n = u(0), o = u(!1), f = u(!1), k = u(null), Y = u(0), M = u(0), ft = (t) => {
     o.current && t.stopPropagation(), B.current = t.clientX - e.current, D.current = t.clientY - n.current, f.current = r.current > 1;
-  }, ft = (t) => {
+  }, mt = (t) => {
     if (!f.current) return;
     e.current = t.clientX - B.current, n.current = t.clientY - D.current;
-    const i = t.currentTarget, { width: s, height: a } = i.getBoundingClientRect(), c = s / r.current, M = a / r.current, h = Math.max(
+    const i = t.currentTarget, { width: s, height: a } = i.getBoundingClientRect(), c = s / r.current, p = a / r.current, h = Math.max(
       0,
       (c * r.current - l.current.offsetWidth) / 2
     ), m = Math.max(
       0,
-      (M * r.current - l.current.offsetHeight) / 2
+      (p * r.current - l.current.offsetHeight) / 2
     );
     e.current = Math.min(
       Math.max(e.current, -h),
@@ -39,31 +37,31 @@ function Bt({
     ), n.current = Math.min(
       Math.max(n.current, -m),
       m
-    ), Math.abs(e.current) >= h && (o.current = !1, S(!1)), t.currentTarget.style.cursor = "grabbing", t.currentTarget.style.transition = "none", t.currentTarget.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`;
+    ), Math.abs(e.current) >= h && (o.current = !1, b(!1)), t.currentTarget.style.cursor = "grabbing", t.currentTarget.style.transition = "none", t.currentTarget.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`;
   }, _ = (t) => {
     f.current && (t.currentTarget.style.cursor = "grab"), f.current = !1;
-  }, mt = (t) => {
+  }, dt = (t) => {
     if (B.current = t.touches[0].clientX - e.current, D.current = t.touches[0].clientY - n.current, o.current = t.touches.length === 2, f.current = t.touches.length === 1 && r.current > 1, o.current) {
-      S(!0);
+      b(!0);
       const i = t.touches[1].clientX - t.touches[0].clientX, s = t.touches[1].clientY - t.touches[0].clientY;
-      g.current = Math.sqrt(i ** 2 + s ** 2);
+      g.current = Math.hypot(i, s);
     }
-  }, dt = (t) => {
+  }, gt = (t) => {
     const i = t.touches.length === 2, s = t.touches.length === 1;
     if (o.current && i) {
       const a = t.touches[1].clientX - t.touches[0].clientX, c = t.touches[1].clientY - t.touches[0].clientY;
-      x.current = Math.sqrt(a ** 2 + c ** 2);
-      const M = x.current / g.current, h = Math.min(
-        Math.max(Q.current, r.current * M),
+      x.current = Math.hypot(a, c);
+      const p = x.current / g.current, h = Math.min(
+        Math.max(Q.current, r.current * p),
         V.current
-      ), m = (t.touches[0].clientX + t.touches[1].clientX) / 2, y = (t.touches[0].clientY + t.touches[1].clientY) / 2, { left: T, top: I, width: X, height: v } = t.currentTarget.getBoundingClientRect(), j = X / r.current, q = v / r.current, F = m - T - X / 2, z = y - I - v / 2, R = h / r.current;
-      e.current -= F * (R - 1), n.current -= z * (R - 1), r.current = h, w(h);
+      ), m = (t.touches[0].clientX + t.touches[1].clientX) / 2, y = (t.touches[0].clientY + t.touches[1].clientY) / 2, { left: S, top: I, width: X, height: v } = t.currentTarget.getBoundingClientRect(), j = X / r.current, N = v / r.current, F = m - S - X / 2, z = y - I - v / 2, R = h / r.current;
+      e.current -= F * (R - 1), n.current -= z * (R - 1), r.current = h, T(h);
       const E = Math.max(
         0,
         (j * r.current - l.current.offsetWidth) / 2
       ), H = Math.max(
         0,
-        (q * r.current - l.current.offsetHeight) / 2
+        (N * r.current - l.current.offsetHeight) / 2
       );
       e.current = Math.min(
         Math.max(e.current, -E),
@@ -74,9 +72,9 @@ function Bt({
       ), g.current = x.current, t.currentTarget.style.transition = "none", t.currentTarget.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`;
     } else if (f.current && s) {
       e.current = t.touches[0].clientX - B.current, n.current = t.touches[0].clientY - D.current;
-      const { width: a, height: c } = t.currentTarget.getBoundingClientRect(), M = a / r.current, h = c / r.current, m = Math.max(
+      const { width: a, height: c } = t.currentTarget.getBoundingClientRect(), p = a / r.current, h = c / r.current, m = Math.max(
         0,
-        (M * r.current - l.current.offsetWidth) / 2
+        (p * r.current - l.current.offsetWidth) / 2
       ), y = Math.max(
         0,
         (h * r.current - l.current.offsetHeight) / 2
@@ -88,8 +86,8 @@ function Bt({
         Math.max(n.current, -y),
         y
       );
-      const T = Math.abs(e.current) >= m;
-      S(!T), t.currentTarget.style.transition = "none", t.currentTarget.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`;
+      const S = Math.abs(e.current) >= m;
+      b(!S), t.currentTarget.style.transition = "none", t.currentTarget.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`;
     }
   }, tt = (t) => {
     const i = r.current;
@@ -106,25 +104,25 @@ function Bt({
         Math.max(n.current, -a),
         a
       ), t.currentTarget.style.transition = "transform 0.3s", t.currentTarget.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`;
-    } else o.current && i <= 1.2 && (e.current = 0, n.current = 0, g.current = 0, x.current = 0, r.current = 1, w(1), o.current = !1, f.current = !1, t.currentTarget.style.transition = "transform 0.3s", t.currentTarget.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`, S(!1));
+    } else o.current && i <= 1.2 && (e.current = 0, n.current = 0, g.current = 0, x.current = 0, r.current = 1, T(1), o.current = !1, f.current = !1, t.currentTarget.style.transition = "transform 0.3s", t.currentTarget.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`, b(!1));
     f.current = !1;
-  }, gt = ({ currentPage: t }) => {
+  }, xt = ({ currentPage: t }) => {
     var s;
-    t !== it ? (e.current = 0, n.current = 0, g.current = 0, r.current = 1, w(1), x.current = 0, o.current = !1, f.current = !1, Array.from(((s = k.current) == null ? void 0 : s.getElementsByTagName("img")) || []).forEach((c) => {
+    t !== st ? (e.current = 0, n.current = 0, g.current = 0, r.current = 1, T(1), x.current = 0, o.current = !1, f.current = !1, Array.from(((s = k.current) == null ? void 0 : s.getElementsByTagName("img")) || []).forEach((c) => {
       c.style.cursor = "default", c.style.transition = "transform 0.1s 0.1s", c.style.transform = "translate3d(0, 0, 0) scale(1)";
-    })) : r.current > 1.2 && (o.current = !0), P == null || P(t), st(t);
-  }, xt = () => {
+    })) : r.current > 1.2 && (o.current = !0), P == null || P(t), ut(t);
+  }, Mt = () => {
     f.current = !1;
   };
   return A(() => {
     var s;
     const t = Array.from(((s = k.current) == null ? void 0 : s.getElementsByTagName("img")) || []), i = (a) => {
-      a.preventDefault(), o.current = !0, S(!0);
-      const c = a.currentTarget, M = a.deltaY > 0 ? -0.1 : 0.1, h = Math.min(
-        Math.max(Q.current, r.current + M),
+      a.preventDefault(), o.current = !0, b(!0);
+      const c = a.currentTarget, p = a.deltaY > 0 ? -0.1 : 0.1, h = Math.min(
+        Math.max(Q.current, r.current + p),
         V.current
-      ), { left: m, top: y, width: T, height: I } = c.getBoundingClientRect(), X = T / r.current, v = I / r.current, j = a.clientX - m - T / 2, q = a.clientY - y - I / 2, F = h / r.current;
-      e.current -= j * (F - 1), n.current -= q * (F - 1), r.current = h, w(h);
+      ), { left: m, top: y, width: S, height: I } = c.getBoundingClientRect(), X = S / r.current, v = I / r.current, j = a.clientX - m - S / 2, N = a.clientY - y - I / 2, F = h / r.current;
+      e.current -= j * (F - 1), n.current -= N * (F - 1), r.current = h, T(h);
       const z = Math.max(
         0,
         (X * r.current - l.current.offsetWidth) / 2
@@ -138,7 +136,7 @@ function Bt({
       ), n.current = Math.min(
         Math.max(n.current, -R),
         R
-      ), o.current = !0, c.style.cursor = "grab", c.style.transition = "none", c.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`, p.current && cancelAnimationFrame(p.current), p.current = requestAnimationFrame(() => {
+      ), o.current = !0, c.style.cursor = "grab", c.style.transition = "none", c.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`, M.current && cancelAnimationFrame(M.current), M.current = requestAnimationFrame(() => {
         const E = r.current;
         if (E > 1) {
           const H = Math.max(
@@ -155,21 +153,21 @@ function Bt({
             Math.max(n.current, -rt),
             rt
           ), c.style.cursor = "default", c.style.transition = "transform 0.3s", c.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`;
-        } else E <= 1.2 && (S(!1), e.current = 0, n.current = 0, g.current = 0, x.current = 0, r.current = 1, w(1), o.current = !1, f.current = !1, c.style.cursor = "default", c.style.transition = "transform 0.3s", c.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`);
+        } else E <= 1.2 && (b(!1), e.current = 0, n.current = 0, g.current = 0, x.current = 0, r.current = 1, T(1), o.current = !1, f.current = !1, c.style.cursor = "default", c.style.transition = "transform 0.3s", c.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`);
       });
     };
     return t.forEach((a) => {
       a.addEventListener("wheel", i);
     }), () => {
-      p.current && cancelAnimationFrame(p.current), t.forEach((a) => {
+      M.current && cancelAnimationFrame(M.current), t.forEach((a) => {
         a.removeEventListener("wheel", i);
       });
     };
-  }, [at]), A(() => {
+  }, [it]), A(() => {
     const t = () => {
       var s;
       const i = (s = k.current) == null ? void 0 : s.offsetHeight;
-      i && lt(`${i}px`);
+      i && ht(`${i}px`);
     };
     return t(), window.addEventListener("resize", t), () => {
       window.removeEventListener("resize", t);
@@ -178,16 +176,16 @@ function Bt({
     J(!0);
   }) : J(!1), () => {
     Y.current && cancelAnimationFrame(Y.current);
-  }), [$]), A(() => ($ && (r.current = 1, w(1), e.current = 0, n.current = 0, g.current = 0, x.current = 0, o.current = !1, f.current = !1), () => {
-    p.current && cancelAnimationFrame(p.current), Y.current && cancelAnimationFrame(Y.current);
+  }), [$]), A(() => ($ && (r.current = 1, T(1), e.current = 0, n.current = 0, g.current = 0, x.current = 0, o.current = !1, f.current = !1), () => {
+    M.current && cancelAnimationFrame(M.current), Y.current && cancelAnimationFrame(Y.current);
   }), [$]), A(() => {
-    L.length || b == null || b();
-  }, [L, b]), /* @__PURE__ */ N(
-    Mt,
+    L.length || C == null || C();
+  }, [L, C]), /* @__PURE__ */ q(
+    Ct,
     {
       ref: l,
       open: $,
-      onClose: b,
+      onClose: C,
       fullScreen: !0,
       statusBarColor: Z.black,
       hideSystemNavigationBar: !0,
@@ -208,7 +206,7 @@ function Bt({
       },
       children: [
         /* @__PURE__ */ d(
-          C,
+          w,
           {
             "aria-hidden": !0,
             inlineCSS: {
@@ -223,7 +221,7 @@ function Bt({
           }
         ),
         /* @__PURE__ */ d(
-          C,
+          w,
           {
             tag: "header",
             inlineCSS: {
@@ -234,8 +232,8 @@ function Bt({
               backgroundColor: O.dimmed01,
               zIndex: 2
             },
-            children: /* @__PURE__ */ N(
-              C,
+            children: /* @__PURE__ */ q(
+              w,
               {
                 alignItems: "center",
                 p: 2,
@@ -248,9 +246,9 @@ function Bt({
                   maxHeight: 56
                 },
                 children: [
-                  /* @__PURE__ */ d(C, { "aria-hidden": !0 }),
+                  /* @__PURE__ */ d(w, {}),
                   /* @__PURE__ */ d(
-                    Ct,
+                    et,
                     {
                       id: "image-zoom-dialog-title",
                       tag: "div",
@@ -264,14 +262,14 @@ function Bt({
                       children: U
                     }
                   ),
-                  /* @__PURE__ */ d(C, { justifyContent: "flex-end", children: /* @__PURE__ */ d(yt, { name: "CloseLine", color: "tertiary", onClick: b, "aria-label": "창 닫기" }) })
+                  /* @__PURE__ */ d(w, { justifyContent: "flex-end", children: /* @__PURE__ */ d(pt, { name: "CloseLine", color: "tertiary", onClick: C, "aria-label": "창 닫기" }) })
                 ]
               }
             )
           }
         ),
         /* @__PURE__ */ d(
-          C,
+          w,
           {
             ref: k,
             alignItems: "center",
@@ -283,26 +281,26 @@ function Bt({
               touchAction: "none"
             },
             children: /* @__PURE__ */ d(
-              St,
+              Tt,
               {
-                onSwipe: gt,
-                onSwiping: xt,
+                onSwipe: xt,
+                onSwiping: Mt,
                 initialPage: G,
-                disableSwipe: ut,
-                loop: ct,
-                children: L.map(({ url: t, alt: i }) => /* @__PURE__ */ d(wt, { children: /* @__PURE__ */ d(
+                disableSwipe: ot,
+                loop: at,
+                children: L.map(({ url: t, alt: i }) => /* @__PURE__ */ d(St, { children: /* @__PURE__ */ d(
                   bt,
                   {
                     src: t,
                     alt: i,
-                    containerHeight: ot,
-                    fallback: nt,
-                    onMouseDown: ht,
-                    onMouseMove: ft,
+                    containerHeight: lt,
+                    fallback: ct,
+                    onMouseDown: ft,
+                    onMouseMove: mt,
                     onMouseUp: _,
                     onMouseOut: _,
-                    onTouchStart: mt,
-                    onTouchMove: dt,
+                    onTouchStart: dt,
+                    onTouchMove: gt,
                     onTouchEnd: tt,
                     onTouchCancel: tt
                   }
@@ -311,34 +309,15 @@ function Bt({
             )
           }
         ),
-        et,
-        /* @__PURE__ */ N(
-          C,
-          {
-            role: "status",
-            inlineCSS: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: "1px",
-              height: "1px",
-              padding: 0,
-              margin: "-1px",
-              overflow: "hidden",
-              clip: "rect(0, 0, 0, 0)",
-              whiteSpace: "nowrap",
-              border: 0
-            },
-            children: [
-              K > 1 && "이미지가 확대되었어요.",
-              K <= 1 && "이미지가 원래 크기로 복원되었어요."
-            ]
-          }
-        )
+        nt,
+        /* @__PURE__ */ q(et, { role: "status", visuallyHidden: !0, children: [
+          K > 1 && "이미지가 확대되었어요.",
+          K <= 1 && "이미지가 원래 크기로 복원되었어요."
+        ] })
       ]
     }
   );
 }
 export {
-  Bt as default
+  Wt as default
 };

package/dist/shared/components/ImageZoomDialog/ImageZoomDialogContent/ImageZoomDialogContent.mjs

@@ -1,10 +1,10 @@
 import { jsx as t } from "react/jsx-runtime";
-import e from "@thedotscorp/ui/core/useTheme";
-import i from "@thedotscorp/ui/Typography";
+import { Typography as e } from "@dotss/ui";
+import i from "@dotss/ui/core/useTheme";
 function p({ children: n }) {
-  const { spacing: o } = e();
+  const { spacing: o } = i();
   return /* @__PURE__ */ t(
-    i,
+    e,
     {
       variant: "b2R",
       color: "grey.white",

package/dist/shared/components/ImageZoomDialog/ImageZoomDialogFooter/ImageZoomDialogFooter.mjs

@@ -1,12 +1,12 @@
 import { jsx as e } from "react/jsx-runtime";
-import i from "@thedotscorp/ui/core/useTheme";
-import r from "@thedotscorp/ui/Flexbox";
+import { Flexbox as i } from "@dotss/ui";
+import r from "@dotss/ui/core/useTheme";
 function l({ children: o }) {
   const {
     palette: { etc: t }
-  } = i();
+  } = r();
   return /* @__PURE__ */ e(
-    r,
+    i,
     {
       tag: "footer",
       flexDirection: "column",

package/dist/shared/components/ImageZoomDialog/ImageZoomDialogToolbar/ImageZoomDialogToolbar.mjs

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { Children as n } from "react";
-import r from "@thedotscorp/ui/Flexbox";
+import { Flexbox as r } from "@dotss/ui";
 function l({ children: o }) {
   const t = n.count(o);
   return /* @__PURE__ */ e(

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

@@ -0,0 +1,7 @@
+import { TypographyProps } from 'node_modules/@dotss/ui/Typography/Typography';
+export interface LoadingAnnouncerProps extends Omit<TypographyProps, 'visuallyHidden'> {
+    delay?: number;
+    message?: string;
+}
+declare function LoadingAnnouncer({ delay, message, ...props }: LoadingAnnouncerProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export default LoadingAnnouncer;

package/dist/shared/components/LoadingAnnouncer/LoadingAnnouncer.mjs

@@ -0,0 +1,19 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useState as i, useEffect as l } from "react";
+import { Typography as c } from "@dotss/ui";
+function d({
+  delay: e = 1e3,
+  message: t = "데이터를 불러오는 중입니다.",
+  ...o
+}) {
+  const [n, r] = i(!1);
+  return l(() => {
+    const u = setTimeout(() => {
+      r(!0);
+    }, e);
+    return () => clearTimeout(u);
+  }, [e]), n ? /* @__PURE__ */ s(c, { role: "status", ...o, visuallyHidden: !0, children: t }) : null;
+}
+export {
+  d as default
+};

package/dist/shared/components/LoadingAnnouncer/index.d.ts

@@ -0,0 +1,3 @@
+import { LoadingAnnouncerProps, default as LoadingAnnouncer } from './LoadingAnnouncer';
+export type { LoadingAnnouncerProps };
+export default LoadingAnnouncer;

package/dist/shared/components/LoadingAnnouncer/index.mjs

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

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

@@ -0,0 +1,12 @@
+import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
+export interface MasonryProps extends FlexboxProps {
+    columnCount?: number;
+    rowCount?: number;
+    spacing?: number;
+    edgeSpacing?: number;
+    direction?: 'vertical' | 'horizontal';
+    defaultContainerWidth?: number;
+    defaultContainerHeight?: number;
+}
+declare function Masonry({ children, columnCount, rowCount, spacing, edgeSpacing, direction, defaultContainerWidth, defaultContainerHeight, ...props }: MasonryProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default Masonry;

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

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