@dotss/tictoccroc 0.0.34 → 0.0.36

package/dist/shared/components/ChatKit/BotMessage/BotMessage.d.ts

@@ -1,6 +1,6 @@
 import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
 export type BotMessageType = 'MATCHING_SUCCEEDED' | 'TEACHER_INQUIRED' | 'PARENT_CHANGED_OFFER_SCHEDULE' | 'PARENT_CHANGED_MATCHING_SCHEDULE' | 'TEACHER_APPLIED' | 'PARENT_SENT_OFFER' | 'KOK_MATCHING_SUCCEEDED' | 'APPLICATION_MATCHING_SUCCEEDED' | 'ASSIGNMENT_MATCHING_SUCCEEDED' | 'PARENT_REJECTED_APPLICATION' | 'TEACHER_REFUSED_OFFER' | 'PARENT_CANCELED_MATCHING' | 'TEACHER_CANCELED_MATCHING' | 'TEACHER_COMPLETED_CARE' | 'ADMIN_CANCELED_MATCHING';
-export type BotMessageCtaType = 'MY_CLASS_CHECK' | 'OFFER_CHECK' | 'CHANGE_INFO_CHECK' | 'MY_APPLICATION_INFO_VIEW' | 'CARE_NOTE_CHECK' | 'TEACHER_SELECTION';
+export type BotMessageCtaType = 'MY_CLASS_CHECK' | 'OFFER_CHECK' | 'CHANGE_INFO_CHECK' | 'MY_APPLICATION_INFO_VIEW' | 'CARE_NOTE_CHECK' | 'TEACHER_SELECTION' | 'PLAY_CONTENT_EXPLORE';
 export type BotMessageCtaTargetTable = 'OFFER' | 'MATCHING';
 export type BotMessageSubCtaTargetTable = 'OFFER' | 'MATCHING';
 export interface BotMessageOffer {

package/dist/shared/components/ChatKit/BotMessage/BotMessage.mjs

@@ -2,11 +2,11 @@ import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import { useRef as F, useEffect as L } from "react";
 import { Flexbox as n, Typography as e, Button as $ } from "@dotss/ui";
 import q from "@dotss/ui/core/useTheme";
-import z from "dayjs";
-import { getClassInfo as G, getCtaButtonText as J } from "./BotMessage.utils.mjs";
-import K from "../../Image/Image.mjs";
-import N from "../../../hooks/useInView/useInView.mjs";
+import { getClassInfo as z, getCtaButtonText as G } from "./BotMessage.utils.mjs";
+import J from "../../Image/Image.mjs";
+import K from "../../../hooks/useInView/useInView.mjs";
 import S from "../../../utils/getCareTypeLabel/getCareTypeLabel.mjs";
+import N from "dayjs";
 function V({
   id: P,
   botMessageType: y,
@@ -30,10 +30,10 @@ function V({
   const {
     palette: { brand: D, grey: m, background: k },
     spacing: d
-  } = q(), f = F(null), { isInView: u } = N(f), x = J(s), i = w, H = [
+  } = q(), f = F(null), { isInView: u } = K(f), x = G(s), i = w, H = [
     S(i == null ? void 0 : i.firstCareType),
     S(i == null ? void 0 : i.secondCareType)
-  ].filter(Boolean).filter((E) => E !== "-").join("+"), c = G(i), M = () => o == null ? void 0 : o({
+  ].filter(Boolean).filter((E) => E !== "-").join("+"), c = z(i), M = () => o == null ? void 0 : o({
     botMessageType: y,
     ctaType: s,
     ctaTargetId: C,
@@ -91,7 +91,7 @@ function V({
                   inlineCSS: {
                     whiteSpace: "nowrap"
                   },
-                  children: z(I).format("A h:mm")
+                  children: N(I).format("A h:mm")
                 }
               )
             ]
@@ -112,7 +112,7 @@ function V({
             },
             children: [
               g && /* @__PURE__ */ r(
-                K,
+                J,
                 {
                   src: g,
                   width: 32,

package/dist/shared/components/ChatKit/BotMessage/BotMessage.utils.d.ts

@@ -1,5 +1,5 @@
 import { BotMessageCtaType, BotMessageProps } from '.';
-export declare function getCtaButtonText(ctaType?: BotMessageCtaType | null): "" | "내 수업 확인하기" | "공고 확인하기" | "변경내용 확인하기" | "나의 지원 내역 보러가기" | "돌봄노트 확인하기" | "선생님 선택하러 가기";
+export declare function getCtaButtonText(ctaType?: BotMessageCtaType | null): "" | "내 수업 확인하기" | "공고 확인하기" | "변경내용 확인하기" | "나의 지원 내역 보러가기" | "돌봄노트 확인하기" | "선생님 선택하러 가기" | "놀이콘텐츠 둘러보기";
 export declare function getClassInfo(offer: object): {
     dateRangeText: string;
     timeRangeText: string;

package/dist/shared/components/ChatKit/BotMessage/BotMessage.utils.mjs

@@ -1,5 +1,5 @@
+import o from "../../../utils/getCareTypeLabel/getCareTypeLabel.mjs";
 import n from "dayjs";
-import c from "../../../utils/getCareTypeLabel/getCareTypeLabel.mjs";
 function u(r) {
   switch (r) {
     case "MY_CLASS_CHECK":
@@ -14,6 +14,8 @@ function u(r) {
       return "돌봄노트 확인하기";
     case "TEACHER_SELECTION":
       return "선생님 선택하러 가기";
+    case "PLAY_CONTENT_EXPLORE":
+      return "놀이콘텐츠 둘러보기";
     default:
       return "";
   }
@@ -24,28 +26,28 @@ function C(r) {
     return null;
   let a;
   e.totalCareCount > 1 ? a = `${n(e.careStartDate).format("M월 D일(ddd)")}부터 / 총 ${e.totalCareCount}회` : a = n(e.careStartDate).format("M월 D일(ddd)");
-  const o = n(`${e.careStartDate} ${e.careStartTime}`).format(
+  const c = n(`${e.careStartDate} ${e.careStartTime}`).format(
     "A h:mm"
   ), t = n(`${e.careStartDate} ${e.careEndTime}`).format(
     "A h:mm"
   );
   return {
     dateRangeText: a,
-    timeRangeText: `${o} ~ ${t}`,
-    careType: c(e.firstCareType)
+    timeRangeText: `${c} ~ ${t}`,
+    careType: o(e.firstCareType)
   };
 }
-function f({
+function T({
   title: r,
   content: e,
   offer: a,
-  regDatetime: o
+  regDatetime: c
 }) {
   const t = C(a);
-  return `안내, ${r}, ${e ? `${e}, ` : ""}${t ? `${t.dateRangeText}, ${t.timeRangeText}, ${t.careType}, ` : ""}${n(o).format("YYYY년 MM월 DD일 A h:mm")}`;
+  return `안내, ${r}, ${e ? `${e}, ` : ""}${t ? `${t.dateRangeText}, ${t.timeRangeText}, ${t.careType}, ` : ""}${n(c).format("YYYY년 MM월 DD일 A h:mm")}`;
 }
 export {
-  f as getBotMessageLabel,
+  T as getBotMessageLabel,
   C as getClassInfo,
   u as getCtaButtonText
 };

package/dist/shared/components/Image/Image.mjs

@@ -1,119 +1,121 @@
-import { jsxs as T, jsx as s, Fragment as tt } from "react/jsx-runtime";
-import { forwardRef as et, useRef as U, useImperativeHandle as nt, useState as g, useEffect as V } from "react";
+import { jsxs as H, jsx as l, Fragment as nt } from "react/jsx-runtime";
+import { forwardRef as ot, useRef as U, useImperativeHandle as it, useState as S, useEffect as V } from "react";
 import { Flexbox as _, Skeleton as z } from "@dotss/ui";
-import ot from "../../hooks/useInView/useInView.mjs";
-import it from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
+import st from "../../hooks/useInView/useInView.mjs";
+import lt from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
 import O from "../../utils/getImageUrl/getImageUrl.mjs";
 import B from "./Image.error.mjs";
-const mt = et(
+const rt = ot(
   ({
-    src: l,
+    src: s,
     width: e,
     height: o,
-    fit: m = "cover",
-    position: y = "center",
-    alt: b,
-    scale: W = 2,
-    onLoad: q,
-    onLazyLoad: j,
-    lazy: A = !1,
-    borderRadius: u,
-    disabledResizing: S = !1,
-    withIntrinsicRatio: D = !1,
+    fit: y = "cover",
+    position: m = "center",
+    alt: q,
+    scale: T = 2,
+    onLoad: A,
+    onLazyLoad: $,
+    lazy: D = !1,
+    borderRadius: c,
+    disabledResizing: L = !1,
+    withIntrinsicRatio: G = !1,
     enableBlurPlaceholder: r = !1,
-    enableFallback: G = !1,
-    enableErrorFallback: J = !0,
-    renderErrorFallback: c,
+    enableFallback: J = !1,
+    enableErrorFallback: K = !0,
+    renderErrorFallback: u,
     wrapperProps: n = {},
-    onError: K,
-    ...L
+    onError: M,
+    ...g
   }, w) => {
-    const C = U(null), M = U(!1), i = U(null);
-    nt(w, () => i.current);
-    const { isInView: F } = ot(C, {
+    const C = U(null), N = U(!1), I = U(null);
+    it(w, () => I.current);
+    const { isInView: p } = st(C, {
       threshold: 0.4
-    }), [v, k] = g(!1), [I, d] = g(!1), [h, a] = g(!1), [x, p] = g(!1), [N, Q] = g(
+    }), [v, F] = S(!1), [h, d] = S(!1), [x, a] = S(!1), [W, k] = S(!1), [Q, R] = S(
       O({
         mode: "original",
-        src: l,
+        src: s,
         width: e,
         height: o,
-        fit: m,
-        position: y,
-        scale: W,
-        disabledResizing: S
+        fit: y,
+        position: m,
+        scale: T,
+        disabledResizing: L
       })
-    ), R = l == null ? void 0 : l.endsWith(".heic"), E = r ? O({
+    ), b = s == null ? void 0 : s.endsWith(".heic"), E = r ? O({
       mode: "blur",
-      src: l,
+      src: s,
       width: e,
-      fit: m,
-      position: y,
+      fit: y,
+      position: m,
       scale: 1 / 3,
-      disabledResizing: S
+      disabledResizing: L
     }) : null, X = (t) => {
-      d(!0), a(!1), typeof q == "function" && q(t);
+      d(!0), a(!1), typeof A == "function" && A(t);
     }, Y = (t) => {
-      typeof K == "function" && K(t.nativeEvent), a(!0), d(!1);
-    }, Z = () => p(!0);
+      typeof M == "function" && M(t.nativeEvent), a(!0), d(!1);
+    }, Z = () => k(!0);
     return V(() => {
-      if (A && C.current) {
+      if (D && C.current) {
         const t = () => {
-          F && k(!0);
-        }, $ = () => {
+          p && F(!0);
+        }, j = () => {
           var f;
           (f = window.appScreenContent) == null || f.addEventListener("scroll", t), window.addEventListener("resize", t), window.addEventListener("orientationchange", t);
-        }, H = () => {
+        }, i = () => {
           var f;
           (f = window.appScreenContent) == null || f.removeEventListener("scroll", t), window.removeEventListener("resize", t), window.removeEventListener("orientationchange", t);
         };
-        return t(), $(), H;
+        return t(), j(), i;
       }
     }), V(() => {
-      typeof j == "function" && v && !M.current && (M.current = !0, j());
-    }, [j, v]), it(() => {
-      const t = i.current;
-      return t != null && t.complete ? t.naturalWidth > 0 ? (t.style.transition = "none", t.style.opacity = "1", d(!0)) : (t.style.opacity = "0", a(!0)) : t && (t.style.transition = "opacity 0.3s", t.style.opacity = "0", t.onload = () => {
+      typeof $ == "function" && v && !N.current && (N.current = !0, $());
+    }, [$, v]), lt(() => {
+      const t = I.current, j = (i) => {
+        window.fetch(s).then(async (f) => {
+          const P = await f.blob(), tt = (await import("heic2any")).default, et = await tt({ blob: P, toType: "image/png" });
+          R(URL.createObjectURL(et)), i.onload = () => {
+            i.style.opacity = "1", d(!0), a(!1), i.onload = null, i.onerror = null;
+          }, i.onerror = () => {
+            a(!0), d(!1), i.onload = null, i.onerror = null;
+          };
+        });
+      };
+      return t != null && t.complete ? b ? t.src.startsWith("blob:") || (t.style.transition = "opacity 0.3s", t.style.opacity = "0", j(t)) : t.naturalWidth > 0 ? (t.style.transition = "none", t.style.opacity = "1", d(!0)) : (t.style.opacity = "0", a(!0)) : t && (t.style.transition = "opacity 0.3s", t.style.opacity = "0", t.onload = () => {
         t.style.opacity = "1", d(!0), t.onload = null;
       }, t.onerror = () => {
-        if (!R) {
+        if (!b) {
           a(!0), t.onerror = null;
           return;
         }
-        a(!1), window.fetch(l).then(async ($) => {
-          const H = await $.blob(), f = (await import("heic2any")).default, P = await f({ blob: H, toType: "image/png" });
-          Q(URL.createObjectURL(P)), i.current.onload = () => {
-            t.style.opacity = "1", d(!0), a(!1), i.current.onload = null, i.current.onerror = null;
-          }, i.current.onerror = () => {
-            a(!0), d(!1), i.current.onload = null, i.current.onerror = null;
-          };
-        });
+        a(!1), t.style.transition = "opacity 0.3s", t.style.opacity = "0", j(t);
       }), () => {
         t && (t.onload = null, t.onerror = null);
       };
-    }, [v, l, R]), V(() => {
-      Q(
+    }, [v, s, b]), V(() => {
+      R(
         O({
           mode: "original",
-          src: l,
+          src: s,
           width: e,
           height: o,
-          fit: m,
-          position: y,
-          scale: W,
-          disabledResizing: S
+          fit: y,
+          position: m,
+          scale: T,
+          disabledResizing: L
         })
       );
-    }, [l, e, o, m, y, W, S]), A ? /* @__PURE__ */ T(
+    }, [s, e, o, y, m, T, L]), D ? /* @__PURE__ */ H(
       _,
       {
         ...n,
         ref: C,
-        inlineCSS: D ? {
+        inlineCSS: G ? {
           position: "relative",
           paddingTop: `calc(100% / ${e} * ${o})`,
           minWidth: "100%",
-          borderRadius: u,
+          borderRadius: c,
           overflow: "hidden",
           ...n == null ? void 0 : n.inlineCSS
         } : {
@@ -121,27 +123,27 @@ const mt = et(
           width: e,
           minWidth: e,
           height: o,
-          borderRadius: u,
+          borderRadius: c,
           overflow: "hidden",
           ...n == null ? void 0 : n.inlineCSS
         },
         children: [
-          G && /* @__PURE__ */ s(
+          J && /* @__PURE__ */ l(
             z,
             {
               width: "100%",
               height: "100%",
-              borderRadius: u || 0,
+              borderRadius: c || 0,
               inlineCSS: {
                 position: "absolute",
                 top: 0,
                 left: 0,
-                opacity: I || r && x ? 0 : 1,
+                opacity: h || r && W ? 0 : 1,
                 transition: "opacity 0.3s"
               }
             }
           ),
-          r && E && v && /* @__PURE__ */ s(
+          r && E && v && /* @__PURE__ */ l(
             "img",
             {
               src: E,
@@ -157,27 +159,27 @@ const mt = et(
                 width: "100%",
                 height: "100%",
                 filter: "blur(5px)",
-                opacity: x && !I ? 1 : 0,
+                opacity: W && !h ? 1 : 0,
                 transition: "opacity 0.3s",
-                objectFit: m,
-                objectPosition: y
+                objectFit: y,
+                objectPosition: m
               }
             }
           ),
-          v && /* @__PURE__ */ T(tt, { children: [
-            /* @__PURE__ */ s(
+          v && /* @__PURE__ */ H(nt, { children: [
+            /* @__PURE__ */ l(
               "img",
               {
-                ref: i,
-                src: N,
-                alt: b,
+                ref: I,
+                src: Q,
+                alt: q,
                 width: e,
                 height: o,
                 onLoad: X,
                 onError: Y,
-                "aria-hidden": h,
+                "aria-hidden": x,
                 draggable: !1,
-                ...L,
+                ...g,
                 style: {
                   position: "absolute",
                   top: 0,
@@ -185,25 +187,25 @@ const mt = et(
                   width: "100%",
                   height: "100%",
                   transition: "opacity 0.3s",
-                  ...L.style
+                  ...g.style
                 }
               }
             ),
-            J && h && ((c == null ? void 0 : c()) || /* @__PURE__ */ s(B, {}))
+            K && x && ((u == null ? void 0 : u()) || /* @__PURE__ */ l(B, {}))
           ] })
         ]
       }
-    ) : /* @__PURE__ */ T(
+    ) : /* @__PURE__ */ H(
       _,
       {
         ...n,
         ref: C,
-        inlineCSS: D ? {
+        inlineCSS: G ? {
           position: "relative",
           paddingTop: `calc(100% / ${e} * ${o})`,
           minWidth: "100%",
           transition: "padding-top 0.2s",
-          borderRadius: u,
+          borderRadius: c,
           overflow: "hidden",
           ...n == null ? void 0 : n.inlineCSS
         } : {
@@ -211,27 +213,27 @@ const mt = et(
           width: e,
           minWidth: e,
           height: o,
-          borderRadius: u,
+          borderRadius: c,
           overflow: "hidden",
           ...n == null ? void 0 : n.inlineCSS
         },
         children: [
-          G && /* @__PURE__ */ s(
+          J && /* @__PURE__ */ l(
             z,
             {
               width: "100%",
               height: "100%",
-              borderRadius: u || 0,
+              borderRadius: c || 0,
               inlineCSS: {
                 position: "absolute",
                 top: 0,
                 left: 0,
-                opacity: I || r && x ? 0 : 1,
+                opacity: h || r && W ? 0 : 1,
                 transition: "opacity 0.3s"
               }
             }
           ),
-          r && E && /* @__PURE__ */ s(
+          r && E && /* @__PURE__ */ l(
             "img",
             {
               src: E,
@@ -247,24 +249,24 @@ const mt = et(
                 width: "100%",
                 height: "100%",
                 filter: "blur(5px)",
-                opacity: x && !I ? 1 : 0,
+                opacity: W && !h ? 1 : 0,
                 transition: "opacity 0.3s"
               }
             }
           ),
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ l(
             "img",
             {
-              ref: i,
-              src: N,
-              alt: b,
+              ref: I,
+              src: Q,
+              alt: q,
               width: e,
               height: o,
               onLoad: X,
               onError: Y,
-              "aria-hidden": h,
+              "aria-hidden": x,
               draggable: !1,
-              ...L,
+              ...g,
               style: {
                 position: "absolute",
                 top: 0,
@@ -272,16 +274,16 @@ const mt = et(
                 width: "100%",
                 height: "100%",
                 transition: "opacity 0.3s",
-                ...L.style
+                ...g.style
               }
             }
           ),
-          J && h && ((c == null ? void 0 : c()) || /* @__PURE__ */ s(B, {}))
+          K && x && ((u == null ? void 0 : u()) || /* @__PURE__ */ l(B, {}))
         ]
       }
     );
   }
 );
 export {
-  mt as default
+  rt as default
 };

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

@@ -18,7 +18,7 @@ function zt({
   defaultContainerHeight: tt = 0,
   ...l
 }) {
-  const { spacing: H } = gt(), [rt, B] = v(O), [et, U] = v(tt), [N, nt] = v(0), b = 4 / 3, g = (rt - c) / x, p = L === "horizontal" ? (et - c) / F : g * b, s = u(null), f = u([]), R = u([]), I = u(!1), k = u(!0), P = u(0), C = u(0), m = u(0), h = u(
+  const { spacing: H } = gt(), [rt, B] = v(O), [et, U] = v(tt), [N, nt] = v(0), b = 4 / 3, f = (rt - c) / x, p = L === "horizontal" ? (et - c) / F : f * b, s = u(null), g = u([]), R = u([]), I = u(!1), k = u(!0), P = u(0), C = u(0), m = u(0), h = u(
     /* @__PURE__ */ new Map()
   ), [y, ot] = v(
     S.toArray(A).filter(Q).filter((t) => t.type === _ || t.type === K)
@@ -27,7 +27,7 @@ function zt({
       var o;
       const r = ((o = pt(t.props.children)) == null ? void 0 : o.props.src) || "";
       if (!r) return null;
-      const e = t.props.width ?? g, n = t.props.height ?? p;
+      const e = t.props.width ?? f, n = t.props.height ?? p;
       return {
         originalSrc: r,
         originWidth: e,
@@ -56,16 +56,16 @@ function zt({
     let e = null;
     switch (r.key) {
       case "ArrowRight":
-        r.preventDefault(), e = z(r.currentTarget, "right", f.current);
+        r.preventDefault(), e = z(r.currentTarget, "right", g.current);
         break;
       case "ArrowLeft":
-        r.preventDefault(), e = z(r.currentTarget, "left", f.current);
+        r.preventDefault(), e = z(r.currentTarget, "left", g.current);
         break;
       case "ArrowDown":
-        r.preventDefault(), e = z(r.currentTarget, "down", f.current);
+        r.preventDefault(), e = z(r.currentTarget, "down", g.current);
         break;
       case "ArrowUp":
-        r.preventDefault(), e = z(r.currentTarget, "up", f.current);
+        r.preventDefault(), e = z(r.currentTarget, "up", g.current);
         break;
       case "Enter":
       case " ": {
@@ -91,12 +91,12 @@ function zt({
       R.current,
       e,
       n
-    ), a = f.current[o ?? -1];
+    ), a = g.current[o ?? -1];
     a == null || a.focus(), t == null || t(r);
   }, it = (t) => (r) => {
-    f.current[t] = r;
+    g.current[t] = r;
   }, ut = (t, r, e) => (n) => {
-    R.current[r] || (R.current[r] = []), f.current[t] = n, R.current[r][e] = n;
+    R.current[r] || (R.current[r] = []), g.current[t] = n, R.current[r][e] = n;
   }, $ = (t) => (r) => {
     nt(Number(r.currentTarget.getAttribute("aria-posinset")) - 1), t == null || t(r);
   }, T = (t) => {
@@ -106,7 +106,7 @@ function zt({
         const i = h.current.get(a.src);
         return i ? {
           ...a,
-          width: i.naturalWidth / i.naturalHeight * (a.height ?? p),
+          width: i.naturalWidth / i.naturalHeight * (a.height ?? p) || f,
           height: a.height ?? p,
           loaded: !0
         } : a;
@@ -118,7 +118,7 @@ function zt({
         const a = h.current.get(o.src);
         return a ? {
           ...o,
-          width: a.naturalWidth / a.naturalHeight * (o.height ?? p),
+          width: a.naturalWidth / a.naturalHeight * (o.height ?? p) || f,
           height: o.height ?? p,
           loaded: !0
         } : o;
@@ -161,9 +161,9 @@ function zt({
       d,
       y,
       F,
-      g * b / 2
+      f * b / 2
     );
-    let r = g * b / 2;
+    let r = f * b / 2;
     r = r <= 0 ? 120 : r;
     let e = 0;
     return /* @__PURE__ */ W(
@@ -256,8 +256,8 @@ function zt({
           tabIndex: r === N ? 0 : -1,
           "aria-posinset": r + 1,
           "aria-setsize": G,
-          width: t.props.width ?? g,
-          height: t.props.height ?? g * b / 2,
+          width: t.props.width ?? f,
+          height: t.props.height ?? f * b / 2,
           direction: L,
           spacing: c,
           sourceMetadataMap: j ?? void 0,

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

@@ -3,6 +3,8 @@ import { ImageProps } from '../Image';
 import { MasonryBlockProps } from './MasonryBlock';
 export declare function getHorizontalLayoutRows(images: {
     src: string;
+    originalSrc?: string;
+    originalWidth?: number;
     width: number;
     height: number;
 }[], blocks: ReactElement<MasonryBlockProps>[], rowCount: number, fallbackWidth: number): ReactElement<MasonryBlockProps, string | import('react').JSXElementConstructor<any>>[][];

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

@@ -3,69 +3,69 @@ import I from "../Image/Image.mjs";
 import "react/jsx-runtime";
 import "@dotss/ui";
 import "@dotss/ui/core/useTheme";
-function Y(n, l, e, f) {
-  const t = Array.from({ length: e }, () => []), g = new Map(n.map((i) => [i.src, i])), m = Array(e).fill(0), a = Array.from({ length: e }, (i, c) => c);
-  return l.forEach((i) => {
-    var o;
-    const c = ((o = E(i.props.children)) == null ? void 0 : o.props.src) ?? "", h = g.get(c), d = a[0];
-    t[d].push(i), m[d] += (h == null ? void 0 : h.width) ?? f;
+function S(n, l, e, f) {
+  const t = Array.from({ length: e }, () => []), g = new Map(n.map((o) => [o.originalSrc ?? o.src, o])), h = Array(e).fill(0), a = Array.from({ length: e }, (o, c) => c);
+  return l.forEach((o) => {
+    var i;
+    const c = ((i = w(o.props.children)) == null ? void 0 : i.props.src) || "", p = g.get(c), d = a[0];
+    t[d].push(o), h[d] += (p == null ? void 0 : p.width) ?? o.props.width ?? f;
     let s = 1;
-    const r = m[d];
-    for (; s < a.length && r >= m[a[s]]; )
+    const r = h[d];
+    for (; s < a.length && h[a[s]] < r; )
       a[s - 1] = a[s], s += 1;
     a[s - 1] = d;
   }), t;
 }
-function z(n, l, e) {
+function Y(n, l, e) {
   const f = n.getBoundingClientRect(), t = (f.left + f.right) / 2, g = (f.top + f.bottom) / 2;
-  let m = null, a = 1 / 0;
-  for (const i of e) {
-    if (!i || i === n) continue;
-    const c = i.getBoundingClientRect(), h = (c.left + c.right) / 2, d = (c.top + c.bottom) / 2, s = h - t, r = d - g, o = Math.abs(r) < c.height * 0.75, u = Math.abs(s) < c.width * 0.75, p = l === "right" && s > 0 && o || l === "left" && s < 0 && o || l === "down" && r > 0 && u || l === "up" && r < 0 && u, b = Math.hypot(s, r);
-    p && b < a && (a = b, m = i);
+  let h = null, a = 1 / 0;
+  for (const o of e) {
+    if (!o || o === n) continue;
+    const c = o.getBoundingClientRect(), p = (c.left + c.right) / 2, d = (c.top + c.bottom) / 2, s = p - t, r = d - g, i = Math.abs(r) < c.height * 0.75, u = Math.abs(s) < c.width * 0.75, m = l === "right" && s > 0 && i || l === "left" && s < 0 && i || l === "down" && r > 0 && u || l === "up" && r < 0 && u, b = Math.hypot(s, r);
+    m && b < a && (a = b, h = o);
   }
-  return m;
+  return h;
 }
-function F(n, l, e) {
-  var c, h, d, s;
+function z(n, l, e) {
+  var c, p, d, s;
   if (!n.length || l < 0) return null;
   const f = n.length;
   let t = -1, g = -1;
   for (let r = 0; r < f; r++) {
-    for (let o = 0; o < n[r].length; o++) {
-      const u = n[r][o];
+    for (let i = 0; i < n[r].length; i++) {
+      const u = n[r][i];
       if (Number(u == null ? void 0 : u.getAttribute("aria-posinset")) - 1 === l) {
-        t = r, g = o;
+        t = r, g = i;
         break;
       }
     }
     if (t !== -1) break;
   }
   if (t === -1 || g === -1) return null;
-  const a = n[t][g].getBoundingClientRect(), i = (a.left + a.right) / 2;
+  const a = n[t][g].getBoundingClientRect(), o = (a.left + a.right) / 2;
   if (e === "left" && g > 0)
     return Number((c = n[t][g - 1]) == null ? void 0 : c.getAttribute("aria-posinset")) - 1;
   if (e === "right" && g < n[t].length - 1)
-    return Number((h = n[t][g + 1]) == null ? void 0 : h.getAttribute("aria-posinset")) - 1;
+    return Number((p = n[t][g + 1]) == null ? void 0 : p.getAttribute("aria-posinset")) - 1;
   if (e === "up" && t > 0) {
     const r = n[t - 1];
-    let o = 0, u = 1 / 0;
-    return r.forEach((p, b) => {
-      const R = p.getBoundingClientRect(), C = (R.left + R.right) / 2, A = Math.abs(i - C);
-      A < u && (u = A, o = b);
-    }), Number((d = r[o]) == null ? void 0 : d.getAttribute("aria-posinset")) - 1;
+    let i = 0, u = 1 / 0;
+    return r.forEach((m, b) => {
+      const R = m.getBoundingClientRect(), C = (R.left + R.right) / 2, A = Math.abs(o - C);
+      A < u && (u = A, i = b);
+    }), Number((d = r[i]) == null ? void 0 : d.getAttribute("aria-posinset")) - 1;
   }
   if (e === "down" && t < f - 1) {
     const r = n[t + 1];
-    let o = 0, u = 1 / 0;
-    return r.forEach((p, b) => {
-      const R = p.getBoundingClientRect(), C = (R.left + R.right) / 2, A = Math.abs(i - C);
-      A < u && (u = A, o = b);
-    }), Number((s = r[o]) == null ? void 0 : s.getAttribute("aria-posinset")) - 1;
+    let i = 0, u = 1 / 0;
+    return r.forEach((m, b) => {
+      const R = m.getBoundingClientRect(), C = (R.left + R.right) / 2, A = Math.abs(o - C);
+      A < u && (u = A, i = b);
+    }), Number((s = r[i]) == null ? void 0 : s.getAttribute("aria-posinset")) - 1;
   }
   return null;
 }
-function E(n) {
+function w(n) {
   const l = M.toArray(n).filter(y).find((e) => e.type === I || e.type === "img");
   if (l)
     return l;
@@ -78,8 +78,8 @@ function E(n) {
   return null;
 }
 export {
-  E as findImageInChildren,
-  z as findNextFocusableElement,
-  Y as getHorizontalLayoutRows,
-  F as getNextIndexHorizontalFromRows
+  w as findImageInChildren,
+  Y as findNextFocusableElement,
+  S as getHorizontalLayoutRows,
+  z as getNextIndexHorizontalFromRows
 };

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

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

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

@@ -515,7 +515,7 @@ function je({
                                 }),
                                 $.map(
                                   ({ children: c, startDate: a, endDate: t, totalColumns: r, columnIndex: l }) => {
-                                    const u = be(a), f = be(t), H = Math.floor((u - 7 * 60) / 30), Ae = (u - 7 * 60) / 30 * (Number(X) || E), Fe = (f - u) / 30 * (Number(X) || E), pe = 100 / r, xe = l * pe, te = c;
+                                    const u = be(a), f = be(t), H = Math.floor((u - 420) / 30), Ae = (u - 420) / 30 * (Number(X) || E), Fe = (f - u) / 30 * (Number(X) || E), pe = 100 / r, xe = l * pe, te = c;
                                     return /* @__PURE__ */ h(
                                       m,
                                       {

package/package.json

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