@dotss/tictoccroc 0.0.3 → 0.0.5

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { default as t } from "./shared/components/Scheduler/Scheduler.mjs";
 import { default as a } from "./shared/components/Scheduler/ScheduleEvent/ScheduleEvent.mjs";
 import { default as l } from "./shared/components/Scheduler/ScheduleBlock/ScheduleBlock.mjs";
 import { getAvailableDateRange as s } from "./shared/components/Scheduler/Scheduler.utils.mjs";
-import { default as u } from "./shared/components/MediaDialog/MediaDialog.mjs";
+import { default as m } from "./shared/components/MediaDialog/MediaDialog.mjs";
 import { default as i } from "./shared/components/MediaDialog/MediaBlock/MediaBlock.mjs";
 import { default as n } from "./shared/components/MediaDialog/MediaDialogContent/MediaDialogContent.mjs";
 import { default as g } from "./shared/components/MediaDialog/MediaDialogFooter/MediaDialogFooter.mjs";
@@ -10,104 +10,105 @@ import { default as y } from "./shared/components/MediaDialog/MediaDialogToolbar
 import { default as C } from "./shared/components/Swiper/Swiper.mjs";
 import { default as b } from "./shared/components/Swiper/SwiperBlock/SwiperBlock.mjs";
 import { default as D } from "./shared/components/Carousel/Carousel.mjs";
-import { default as R } from "./shared/components/Carousel/CarouselSlide/CarouselSlide.mjs";
-import { default as k } from "./shared/components/TimePicker/TimePicker.mjs";
-import { L as P, R as w } from "./LessonNotesSection-Bg1DHFxg.js";
+import { default as h } from "./shared/components/Carousel/CarouselSlide/CarouselSlide.mjs";
+import { default as M } from "./shared/components/TimePicker/TimePicker.mjs";
+import { default as R } from "./shared/components/Roller/Roller.mjs";
 import { default as T } from "./shared/components/Roller/RollerBlock/RollerBlock.mjs";
 import { default as G } from "./shared/components/Image/Image.mjs";
-import { default as N } from "./shared/components/Calendar/Calendar.mjs";
-import { default as j } from "./shared/components/Masonry/Masonry.mjs";
-import { default as U } from "./shared/components/Masonry/MasonryBlock/MasonryBlock.mjs";
-import { default as q } from "./shared/components/LoadingAnnouncer/LoadingAnnouncer.mjs";
-import { default as H } from "./shared/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
-import { default as O } from "./shared/utils/getImageUrl/getImageUrl.mjs";
-import { default as X } from "./shared/utils/isServer/isServer.mjs";
-import { default as Z } from "./shared/utils/getTimeRange/getTimeRange.mjs";
-import { default as $ } from "./shared/utils/getDateRange/getDateRange.mjs";
-import { default as oe } from "./shared/utils/isAndroid/isAndroid.mjs";
-import { default as re } from "./shared/utils/isApp/isApp.mjs";
-import { default as fe } from "./shared/utils/isDesktop/isDesktop.mjs";
-import { default as de } from "./shared/utils/birthDateToAge/birthDateToAge.mjs";
-import { default as me } from "./shared/utils/objectToQueryString/objectToQueryString.mjs";
-import { default as pe } from "./shared/utils/getVimeoId/getVimeoId.mjs";
-import { default as xe } from "./shared/utils/parseQueryString/parseQueryString.mjs";
-import { default as ce } from "./shared/utils/share/share.mjs";
-import { default as Se } from "./teacher/profile/components/ProfileSummary/ProfileSummary.mjs";
-import { default as Ae } from "./teacher/profile/components/StatBadgeCollection/StatBadgeCollection.mjs";
-import { default as ve } from "./teacher/profile/components/StatBadgeCollection/StatBadge/StatBadge.mjs";
-import { default as Be } from "./teacher/profile/components/ActivityGallery/ActivityGallery.mjs";
-import { default as Ie } from "./teacher/profile/components/ActivityGallery/ActivityGalleryItem/ActivityGalleryItem.mjs";
+import { default as K } from "./shared/components/Calendar/Calendar.mjs";
+import { default as Q } from "./shared/components/Masonry/Masonry.mjs";
+import { default as F } from "./shared/components/Masonry/MasonryBlock/MasonryBlock.mjs";
+import { default as V } from "./shared/components/LoadingAnnouncer/LoadingAnnouncer.mjs";
+import { default as z } from "./shared/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
+import { default as J } from "./shared/utils/getImageUrl/getImageUrl.mjs";
+import { default as W } from "./shared/utils/isServer/isServer.mjs";
+import { default as Y } from "./shared/utils/getTimeRange/getTimeRange.mjs";
+import { default as _ } from "./shared/utils/getDateRange/getDateRange.mjs";
+import { default as ee } from "./shared/utils/isAndroid/isAndroid.mjs";
+import { default as te } from "./shared/utils/isApp/isApp.mjs";
+import { default as ae } from "./shared/utils/isDesktop/isDesktop.mjs";
+import { default as le } from "./shared/utils/birthDateToAge/birthDateToAge.mjs";
+import { default as se } from "./shared/utils/objectToQueryString/objectToQueryString.mjs";
+import { default as me } from "./shared/utils/getVimeoId/getVimeoId.mjs";
+import { default as ie } from "./shared/utils/parseQueryString/parseQueryString.mjs";
+import { default as ne } from "./shared/utils/share/share.mjs";
+import { default as ge } from "./teacher/profile/components/ProfileSummary/ProfileSummary.mjs";
+import { default as ye } from "./teacher/profile/components/StatBadgeCollection/StatBadgeCollection.mjs";
+import { default as Ce } from "./teacher/profile/components/StatBadgeCollection/StatBadge/StatBadge.mjs";
+import { default as be } from "./teacher/profile/components/ActivityGallery/ActivityGallery.mjs";
+import { default as De } from "./teacher/profile/components/ActivityGallery/ActivityGalleryItem/ActivityGalleryItem.mjs";
 import { default as he } from "./teacher/profile/components/CertificationSection/CertificationSection.mjs";
 import { default as Me } from "./teacher/profile/components/CertificationSection/CertificationItem/CertificationItem.mjs";
-import { default as we } from "./teacher/profile/components/CareerSection/CareerSection.mjs";
+import { default as Re } from "./teacher/profile/components/CareerSection/CareerSection.mjs";
 import { default as Te } from "./teacher/profile/components/CareerSection/CareerItem/CareerItem.mjs";
 import { default as Ge } from "./teacher/profile/components/EducationSection/EducationSection.mjs";
-import { default as Ne } from "./teacher/profile/components/EducationSection/EducationItem/EducationItem.mjs";
-import { default as je } from "./teacher/profile/components/PreferredActivityKeywordGroup/PreferredActivityKeywordGroup.mjs";
-import { default as Ue } from "./teacher/profile/components/PreferredAgeGroup/PreferredAgeGroup.mjs";
-import { getPreferredAgeKeywords as qe } from "./teacher/profile/components/PreferredAgeGroup/PreferredAgeGroup.utils.mjs";
-import { default as He } from "./teacher/profile/components/AbilityCollection/AbilityCollection.mjs";
-import { default as Oe } from "./teacher/profile/components/AbilityCollection/AbilityBadge/AbilityBadge.mjs";
-import { getAbilityCollection as Xe } from "./teacher/profile/components/AbilityCollection/AbilityCollection.utils.mjs";
-import { default as Ze } from "./teacher/profile/components/AvailableScheduleSection/AvailableScheduleSection.mjs";
-import { default as $e } from "./teacher/profile/components/LessonNotesSection/LessonNote/LessonNote.mjs";
-import { default as oo } from "./teacher/profile/components/ParentReviewSection/ParentReviewSection.mjs";
-import { default as ro } from "./teacher/profile/components/ParentReviewSection/ParentReviewCard/ParentReviewCard.mjs";
+import { default as Ke } from "./teacher/profile/components/EducationSection/EducationItem/EducationItem.mjs";
+import { default as Qe } from "./teacher/profile/components/PreferredActivityKeywordGroup/PreferredActivityKeywordGroup.mjs";
+import { default as Fe } from "./teacher/profile/components/PreferredAgeGroup/PreferredAgeGroup.mjs";
+import { getPreferredAgeKeywords as Ve } from "./teacher/profile/components/PreferredAgeGroup/PreferredAgeGroup.utils.mjs";
+import { default as ze } from "./teacher/profile/components/AbilityCollection/AbilityCollection.mjs";
+import { default as Je } from "./teacher/profile/components/AbilityCollection/AbilityBadge/AbilityBadge.mjs";
+import { getAbilityCollection as We } from "./teacher/profile/components/AbilityCollection/AbilityCollection.utils.mjs";
+import { default as Ye } from "./teacher/profile/components/AvailableScheduleSection/AvailableScheduleSection.mjs";
+import { default as _e } from "./teacher/profile/components/LessonNotesSection/LessonNotesSection.mjs";
+import { default as eo } from "./teacher/profile/components/LessonNotesSection/LessonNote/LessonNote.mjs";
+import { default as to } from "./teacher/profile/components/ParentReviewSection/ParentReviewSection.mjs";
+import { default as ao } from "./teacher/profile/components/ParentReviewSection/ParentReviewCard/ParentReviewCard.mjs";
 export {
-  Oe as AbilityBadge,
-  He as AbilityCollection,
-  Be as ActivityGallery,
-  Ie as ActivityGalleryItem,
-  Ze as AvailableScheduleSection,
-  N as Calendar,
+  Je as AbilityBadge,
+  ze as AbilityCollection,
+  be as ActivityGallery,
+  De as ActivityGalleryItem,
+  Ye as AvailableScheduleSection,
+  K as Calendar,
   Te as CareerItem,
-  we as CareerSection,
+  Re as CareerSection,
   D as Carousel,
-  R as CarouselSlide,
+  h as CarouselSlide,
   Me as CertificationItem,
   he as CertificationSection,
-  Ne as EducationItem,
+  Ke as EducationItem,
   Ge as EducationSection,
   G as Image,
-  $e as LessonNote,
-  P as LessonNotesSection,
-  q as LoadingAnnouncer,
-  j as Masonry,
-  U as MasonryBlock,
+  eo as LessonNote,
+  _e as LessonNotesSection,
+  V as LoadingAnnouncer,
+  Q as Masonry,
+  F as MasonryBlock,
   i as MediaBlock,
-  u as MediaDialog,
+  m as MediaDialog,
   n as MediaDialogContent,
   g as MediaDialogFooter,
   y as MediaDialogToolbar,
-  ro as ParentReviewCard,
-  oo as ParentReviewSection,
-  je as PreferredActivityKeywordGroup,
-  Ue as PreferredAgeGroup,
-  Se as ProfileSummary,
-  w as Roller,
+  ao as ParentReviewCard,
+  to as ParentReviewSection,
+  Qe as PreferredActivityKeywordGroup,
+  Fe as PreferredAgeGroup,
+  ge as ProfileSummary,
+  R as Roller,
   T as RollerBlock,
   l as ScheduleBlock,
   a as ScheduleEvent,
   t as Scheduler,
-  ve as StatBadge,
-  Ae as StatBadgeCollection,
+  Ce as StatBadge,
+  ye as StatBadgeCollection,
   C as Swiper,
   b as SwiperBlock,
-  k as TimePicker,
-  de as birthDateToAge,
-  Xe as getAbilityCollection,
+  M as TimePicker,
+  le as birthDateToAge,
+  We as getAbilityCollection,
   s as getAvailableDateRange,
-  $ as getDateRange,
-  O as getImageUrl,
-  qe as getPreferredAgeKeywords,
-  Z as getTimeRange,
-  pe as getVimeoId,
-  oe as isAndroid,
-  re as isApp,
-  fe as isDesktop,
-  X as isServer,
-  me as objectToQueryString,
-  xe as parseQueryString,
-  ce as share,
-  H as useIsomorphicLayoutEffect
+  _ as getDateRange,
+  J as getImageUrl,
+  Ve as getPreferredAgeKeywords,
+  Y as getTimeRange,
+  me as getVimeoId,
+  ee as isAndroid,
+  te as isApp,
+  ae as isDesktop,
+  W as isServer,
+  se as objectToQueryString,
+  ie as parseQueryString,
+  ne as share,
+  z as useIsomorphicLayoutEffect
 };

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?: {