@dotss/tictoccroc 0.3.0 → 0.3.2

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

@@ -7,5 +7,5 @@ export interface CalendarProps extends Omit<FlexboxProps, 'onChange' | 'value'>,
     weekHeadInlineCSS?: FlexboxProps['inlineCSS'];
     datePickerProps?: Omit<DatePickerProps, 'onChange' | 'value' | 'date'>;
 }
-declare const Calendar: any;
+declare const Calendar: import('react').ForwardRefExoticComponent<Omit<CalendarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default Calendar;

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 { getClassInfo as z, getCtaButtonText as G } from "./BotMessage.utils.mjs";
-import J from "../../Image/Image.mjs";
-import K from "../../../hooks/useInView/useInView.mjs";
+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 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 } = K(f), x = G(s), i = w, H = [
+  } = q(), f = F(null), { isInView: u } = N(f), x = J(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 = z(i), M = () => o == null ? void 0 : o({
+  ].filter(Boolean).filter((E) => E !== "-").join("+"), c = G(i), M = () => o == null ? void 0 : o({
     botMessageType: y,
     ctaType: s,
     ctaTargetId: C,
@@ -91,7 +91,7 @@ function V({
                   inlineCSS: {
                     whiteSpace: "nowrap"
                   },
-                  children: N(I).format("A h:mm")
+                  children: z(I).format("A h:mm")
                 }
               )
             ]
@@ -112,7 +112,7 @@ function V({
             },
             children: [
               g && /* @__PURE__ */ r(
-                J,
+                K,
                 {
                   src: g,
                   width: 32,

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 o from "../../../utils/getCareTypeLabel/getCareTypeLabel.mjs";
 function u(r) {
   switch (r) {
     case "MY_CLASS_CHECK":

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

@@ -1,6 +1,6 @@
 import { jsxs as n, jsx as e, Fragment as q } from "react/jsx-runtime";
-import { useRef as x, useImperativeHandle as J, useEffect as y } from "react";
-import { Flexbox as d, Typography as v, Button as Q, Icon as I, Menu as X, MenuBlock as P, CircularProgressIndicator as Y } from "@dotss/ui";
+import { useRef as y, useImperativeHandle as J, useEffect as v } from "react";
+import { Flexbox as d, Typography as I, Button as Q, Icon as C, Menu as X, MenuBlock as T, CircularProgressIndicator as Y } from "@dotss/ui";
 import Z from "@dotss/ui/core/useTheme";
 import { useCheckHoverPossible as _ } from "@dotss/ui/hooks";
 import { MenuButton as A } from "@dotss/ui/Menu";
@@ -8,48 +8,48 @@ import V from "dayjs";
 import U from "../../Image/Image.mjs";
 import M from "../../../hooks/useInView/useInView.mjs";
 function de({
-  id: C,
-  content: f = "",
+  id: k,
+  content: u = "",
   mine: i = !1,
   avatarUrl: h = "",
-  unreadUserCount: u = 0,
-  regDatetime: T,
+  unreadUserCount: g = 0,
+  regDatetime: $,
   status: l,
   onView: m,
-  openMenu: g,
-  onClickAvatar: c,
+  openMenu: S,
+  onClickAvatar: a,
   onCloseMenu: t,
-  onClickMenu: $,
-  onResend: S,
-  onDelete: b,
-  onViewAll: z,
+  onClickMenu: z,
+  onResend: b,
+  onDelete: x,
+  onViewAll: B,
   showAvatar: w,
-  showTime: B,
-  ref: R,
-  inlineCSS: j,
-  ...G
+  showTime: R,
+  ref: j,
+  inlineCSS: G,
+  ...H
 }) {
   const {
-    palette: { brand: k, grey: a, etc: H },
+    palette: { brand: p, grey: c, etc: K },
     spacing: E
-  } = Z(), { isHoverPossible: K } = _(), o = x(null), D = x(null), p = x(null);
-  J(R, () => o.current);
-  const F = M(o), L = 300, s = l === "FAILED", N = f.length > L, O = (r) => {
-    r === "resend" ? (t == null || t(), p.current = setTimeout(() => {
-      S == null || S();
-    }, 200)) : r === "delete" && (t == null || t(), p.current = setTimeout(() => {
+  } = Z(), { isHoverPossible: D } = _(), o = y(null), F = y(null), s = y(null);
+  J(j, () => o.current);
+  const L = M(o), N = 300, f = l === "FAILED", P = u.length > N, O = (r) => {
+    r === "resend" ? (t == null || t(), s.current = setTimeout(() => {
       b == null || b();
+    }, 200)) : r === "delete" && (t == null || t(), s.current = setTimeout(() => {
+      x == null || x();
     }, 200));
   }, W = (r) => {
     (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.currentTarget.click());
   };
-  return y(() => {
-    F && (m == null || m());
-  }, [F, m]), y(() => {
+  return v(() => {
+    L && (m == null || m());
+  }, [L, m]), v(() => {
     var r;
-    s && ((r = o == null ? void 0 : o.current) == null || r.scrollIntoView());
-  }, [s]), y(() => () => {
-    p.current && clearTimeout(p.current);
+    f && ((r = o == null ? void 0 : o.current) == null || r.scrollIntoView());
+  }, [f]), v(() => () => {
+    s.current && clearTimeout(s.current);
   }, []), /* @__PURE__ */ n(
     d,
     {
@@ -60,27 +60,27 @@ function de({
       pr: 4,
       gap: 1,
       "aria-busy": l === "PENDING",
-      ...G,
+      ...H,
       inlineCSS: {
         cursor: l === "PENDING" ? "wait" : "default",
         overflowAnchor: "none",
-        ...j
+        ...G
       },
       children: [
         /* @__PURE__ */ n(d, { alignItems: "flex-start", gap: 2.5, children: [
           !i && w && h && /* @__PURE__ */ e(
             d,
             {
-              role: typeof c == "function" ? "button" : void 0,
-              tabIndex: typeof c == "function" ? 0 : -1,
-              onClick: c,
+              role: typeof a == "function" ? "button" : void 0,
+              tabIndex: typeof a == "function" ? 0 : -1,
+              onClick: a,
               onKeyDown: W,
-              "aria-label": typeof c == "function" ? "선생님 프로필 보기" : void 0,
+              "aria-label": typeof a == "function" ? "선생님 프로필 보기" : void 0,
               inlineCSS: {
                 position: "relative",
                 overflow: "hidden",
                 minWidth: 32,
-                cursor: typeof c == "function" ? "pointer" : void 0
+                cursor: typeof a == "function" ? "pointer" : void 0
               },
               children: /* @__PURE__ */ e(
                 U,
@@ -111,30 +111,42 @@ function de({
               gap: 2.5,
               inlineCSS: {
                 borderRadius: 12,
-                backgroundColor: i ? k.primary.pageControl : a[10]
+                backgroundColor: i ? p.primary.pageControl : c[10]
               },
               children: [
                 /* @__PURE__ */ e(
-                  v,
+                  I,
                   {
                     tag: "p",
                     variant: "b3R",
                     inlineCSS: {
                       whiteSpace: "pre-wrap",
-                      wordBreak: "break-all"
+                      wordBreak: "break-all",
+                      userSelect: "text",
+                      "& *": {
+                        userSelect: "text"
+                      }
                     },
-                    children: N ? f.slice(0, L) + "..." : f
+                    children: P ? u.slice(0, N) + "..." : u
                   }
                 ),
-                N && /* @__PURE__ */ e(
+                P && /* @__PURE__ */ e(
                   Q,
                   {
                     variant: "text",
                     size: "xSmall",
-                    endAdornment: /* @__PURE__ */ e(I, { name: "ChevronRightLine" }),
-                    onClick: z,
+                    endAdornment: /* @__PURE__ */ e(C, { name: "ChevronRightLine" }),
+                    onClick: B,
                     inlineCSS: {
-                      marginLeft: "auto"
+                      marginLeft: "auto",
+                      '&:active:not([aria-disabled="true"])': {
+                        backgroundColor: p.primary.main
+                      },
+                      ...D && {
+                        '&:hover:not([aria-disabled="true"])': {
+                          backgroundColor: p.primary.main
+                        }
+                      }
                     },
                     children: "전체보기"
                   }
@@ -143,50 +155,50 @@ function de({
             }
           )
         ] }),
-        s && /* @__PURE__ */ n(q, { children: [
+        f && /* @__PURE__ */ n(q, { children: [
           /* @__PURE__ */ n(
             A,
             {
-              ref: D,
-              isMenuOpen: !!g,
-              menuId: `message-${C}-menu`,
-              onClick: $,
+              ref: F,
+              isMenuOpen: !!S,
+              menuId: `message-${k}-menu`,
+              onClick: z,
               size: "xSmall",
               inlineCSS: {
                 padding: E.content(0.5),
                 gap: E.content(0.5),
                 borderRadius: 200,
-                backgroundColor: g ? a[10] : "transparent",
+                backgroundColor: S ? c[10] : "transparent",
                 cursor: "pointer",
-                ...K && {
+                ...D && {
                   "&:hover": {
-                    backgroundColor: `${a[10]} !important`
+                    backgroundColor: `${c[10]} !important`
                   }
                 },
                 "&:active": {
-                  backgroundColor: `${a[10]} !important`
+                  backgroundColor: `${c[10]} !important`
                 }
               },
               children: [
                 /* @__PURE__ */ e(
-                  I,
+                  C,
                   {
                     name: "ResetLine",
                     size: "xSmall",
                     color: "grey.70",
                     inlineCSS: {
-                      color: `${a[70]} !important`
+                      color: `${c[70]} !important`
                     }
                   }
                 ),
                 /* @__PURE__ */ e(
-                  I,
+                  C,
                   {
                     name: "CloseLine",
                     size: "xSmall",
                     color: "etc.red",
                     inlineCSS: {
-                      color: `${H.red} !important`
+                      color: `${K.red} !important`
                     }
                   }
                 )
@@ -196,21 +208,21 @@ function de({
           /* @__PURE__ */ n(
             X,
             {
-              id: `message-${C}-menu`,
-              anchorRef: D,
-              open: g,
+              id: `message-${k}-menu`,
+              anchorRef: F,
+              open: S,
               onClose: t,
               onChange: O,
               width: 160,
               placement: "bottom-left",
               children: [
-                /* @__PURE__ */ e(P, { value: "resend", children: "재전송" }),
-                /* @__PURE__ */ e(P, { value: "delete", children: "삭제" })
+                /* @__PURE__ */ e(T, { value: "resend", children: "재전송" }),
+                /* @__PURE__ */ e(T, { value: "delete", children: "삭제" })
               ]
             }
           )
         ] }),
-        !s && /* @__PURE__ */ n(
+        !f && /* @__PURE__ */ n(
           d,
           {
             flexDirection: "column",
@@ -219,19 +231,19 @@ function de({
               whiteSpace: "nowrap"
             },
             children: [
-              i && u > 0 && l === "SUCCEEDED" && /* @__PURE__ */ e(
-                v,
+              i && g > 0 && l === "SUCCEEDED" && /* @__PURE__ */ e(
+                I,
                 {
                   tag: "span",
                   variant: "c5B",
                   "aria-hidden": !0,
                   inlineCSS: {
-                    color: k.primary.text
+                    color: p.primary.text
                   },
-                  children: u
+                  children: g
                 }
               ),
-              i && u > 0 && l === "PENDING" && /* @__PURE__ */ e(
+              i && g > 0 && l === "PENDING" && /* @__PURE__ */ e(
                 Y,
                 {
                   size: "small",
@@ -243,15 +255,15 @@ function de({
                 }
               ),
               /* @__PURE__ */ e(
-                v,
+                I,
                 {
                   tag: "span",
                   variant: "c5R",
                   color: "etc.dimmed01",
                   inlineCSS: {
-                    display: B ? void 0 : "none"
+                    display: R ? void 0 : "none"
                   },
-                  children: V(T).format("A h:mm")
+                  children: V($).format("A h:mm")
                 }
               )
             ]

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

@@ -20,5 +20,5 @@ export interface ImageProps extends Omit<HTMLProps<HTMLImageElement>, 'onError'>
     enableErrorFallback?: boolean;
     renderErrorFallback?: () => ReactNode;
 }
-declare const Image: any;
+declare const Image: import('react').ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import('react').RefAttributes<HTMLImageElement>>;
 export default Image;

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

@@ -7,7 +7,7 @@ export declare function getHorizontalLayoutRows(images: {
     originalWidth?: number;
     width: number;
     height: number;
-}[], blocks: ReactElement<MasonryBlockProps>[], rowCount: number, fallbackWidth: number): ReactElement<MasonryBlockProps>[][];
+}[], blocks: ReactElement<MasonryBlockProps>[], rowCount: number, fallbackWidth: number): ReactElement<MasonryBlockProps, string | import('react').JSXElementConstructor<any>>[][];
 export declare function findNextFocusableElement(currentElement: HTMLDivElement, keyDirection: 'left' | 'right' | 'up' | 'down', candidates: (HTMLDivElement | null)[]): HTMLDivElement | null;
 export declare function getNextIndexHorizontalFromRows(rows: HTMLDivElement[][], currentIndex: number, keyDirection: 'up' | 'down' | 'left' | 'right'): number | null;
 export declare function findImageInChildren(children: ReactNode): ReactElement<ImageProps> | null;

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

@@ -17,5 +17,5 @@ export interface MasonryBlockProps extends FlexboxProps {
     }>;
     setInnerRef?: (ref: HTMLDivElement | null) => void;
 }
-declare const MasonryBlock: any;
+declare const MasonryBlock: import('react').ForwardRefExoticComponent<Omit<MasonryBlockProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default MasonryBlock;

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

@@ -19,5 +19,5 @@ export interface TimePickerProps extends Omit<FlexboxProps, 'onChange'> {
     renderStartTimeLabel?: (item: TimePickerItem, isSelected: boolean) => ReactNode;
     renderEndTimeLabel?: (item: TimePickerItem, isSelected: boolean) => ReactNode;
 }
-declare const TimePicker: any;
+declare const TimePicker: import('react').ForwardRefExoticComponent<Omit<TimePickerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default TimePicker;

package/dist/shared/components/TimePicker/TimePicker.mjs

@@ -1,9 +1,9 @@
 import { jsxs as R, jsx as c } from "react/jsx-runtime";
-import { forwardRef as O, useState as j, useRef as w, useEffect as r } from "react";
-import { ChainPicker as I, Typography as S, Flexbox as Q } from "@dotss/ui";
+import { forwardRef as O, useState as j, useRef as w, useCallback as Q, useEffect as r } from "react";
+import { Flexbox as U, Typography as S, ChainPicker as I } from "@dotss/ui";
 import z from "@emotion/styled";
-import b from "../../utils/getTimeRange/getTimeRange.mjs";
-const U = z.div`
+import x from "../../utils/getTimeRange/getTimeRange.mjs";
+const V = z.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -11,36 +11,36 @@ const U = z.div`
   gap: ${({ theme: { spacing: o } }) => o.content(7)}px;
   width: 100%;
   padding: ${({ theme: { spacing: o } }) => o.content(2)}px 0;
-`, V = z.div`
+`, W = z.div`
   position: absolute;
   width: 100%;
   height: 54px;
   background: ${({ theme: o }) => o.palette.background.primary};
   border-radius: 12px;
-`, k = O(function({
+`, C = O(function({
   onChange: F,
   onChangeStartTime: p,
   onChangeEndTime: s,
   startTime: l = 9,
-  endTime: n = 12,
-  range: t = [0, 24],
+  endTime: t = 12,
+  range: n = [0, 24],
   step: i = 1,
-  startTimeChainPickerProps: m,
-  endTimeChainPickerProps: f,
+  startTimeChainPickerProps: u,
+  endTimeChainPickerProps: d,
   timePickerHighlightProps: H,
   renderStartTimeLabel: N,
   renderEndTimeLabel: q,
   inlineCSS: A,
   ...B
 }, D) {
-  const [a, y] = j(l), [u, x] = j(n), E = w(
-    b(0, 24, { minTime: t[0], maxTime: t[1] - i })
-  ), d = w(
-    b(0, 24, { minTime: l + i, maxTime: t[1] })
-  ), $ = (e, h) => {
+  const [f, y] = j(l), [m, b] = j(t), E = w(
+    x(0, 24, { minTime: n[0], maxTime: n[1] - i })
+  ), a = w(
+    x(0, 24, { minTime: l + i, maxTime: n[1] })
+  ), h = Q((e, $) => {
     const [v, M] = e.label.split(":").map(Number), K = v >= 12, g = v % 12 || 12, L = K ? "오후" : "오전";
     return /* @__PURE__ */ R(
-      Q,
+      U,
       {
         gap: 1,
         alignItems: "center",
@@ -48,75 +48,73 @@ const U = z.div`
         "aria-label": `${L} ${g}시 ${M}분`,
         inlineCSS: { width: "82px" },
         children: [
-          /* @__PURE__ */ c(S, { tag: "span", variant: h ? "h5M" : "b5M", children: L }),
-          /* @__PURE__ */ c(S, { tag: "span", variant: h ? "h2M" : "h4M", children: `${g}:${M.toString().padStart(2, "0")}` })
+          /* @__PURE__ */ c(S, { tag: "span", variant: $ ? "h5M" : "b5M", children: L }),
+          /* @__PURE__ */ c(S, { tag: "span", variant: $ ? "h2M" : "h4M", children: `${g}:${M.toString().padStart(2, "0")}` })
         ]
       }
     );
-  }, G = (e) => {
-    y(e), d.current = b(0, 24, {
-      minTime: e + i > t[1] ? t[1] : e + i,
-      maxTime: t[1]
-    }), e >= n - 0.5 && x(d.current[0].value);
+  }, []), G = (e) => {
+    y(e), a.current = x(0, 24, {
+      minTime: e + i > n[1] ? n[1] : e + i,
+      maxTime: n[1]
+    }), e >= t - 0.5 && b(a.current[0].value);
   }, J = (e) => {
-    x(e);
+    b(e);
   };
   return r(() => {
-    d.current = b(0, 24, {
-      minTime: l + i > t[1] ? t[1] : l + i,
-      maxTime: t[1]
+    a.current = x(0, 24, {
+      minTime: l + i > n[1] ? n[1] : l + i,
+      maxTime: n[1]
     });
-  }, [l, n, t, i]), r(() => {
+  }, [l, t, n, i]), r(() => {
     y(l);
   }, [l]), r(() => {
-    l >= n - 0.5 ? x(d.current[0].value) : x(n);
-  }, [l, n]), r(() => {
-    F(a, u);
-  }, [a, u]), r(() => {
-    p == null || p(a);
-  }, [a]), r(() => {
-    s == null || s(u);
-  }, [u]), /* @__PURE__ */ R(U, { ref: D, css: A, role: "group", "aria-label": "시간 선택", ...B, children: [
-    /* @__PURE__ */ c(V, { ...H, "aria-hidden": !0 }),
+    l >= t - 0.5 ? b(a.current[0].value) : b(t);
+  }, [l, t]), r(() => {
+    F(f, m);
+  }, [f, m]), r(() => {
+    p == null || p(f);
+  }, [f]), r(() => {
+    s == null || s(m);
+  }, [m]), /* @__PURE__ */ R(V, { ref: D, css: A, role: "group", "aria-label": "시간 선택", ...B, children: [
+    /* @__PURE__ */ c(W, { ...H, "aria-hidden": !0 }),
     /* @__PURE__ */ c(
       I,
       {
         column: E.current,
         value: l,
         onChange: G,
-        renderLabel: N || $,
+        renderLabel: N || h,
         "aria-label": "시작 시간 선택",
         inlineCSS: {
           "& > li": {
             padding: 0
           },
-          ...m == null ? void 0 : m.inlineCSS
+          ...u == null ? void 0 : u.inlineCSS
         },
-        ...m
-      },
-      `start-time-${a}`
+        ...u
+      }
     ),
     /* @__PURE__ */ c(S, { variant: "h5M", color: "grey.50", "aria-hidden": !0, inlineCSS: { zIndex: 1 }, children: "부터" }),
     /* @__PURE__ */ c(
       I,
       {
-        column: d.current,
-        value: n,
+        column: a.current,
+        value: t,
         onChange: J,
-        renderLabel: q || $,
+        renderLabel: q || h,
         "aria-label": "종료 시간 선택",
         inlineCSS: {
           "& > li": {
             padding: 0
           },
-          ...f == null ? void 0 : f.inlineCSS
+          ...d == null ? void 0 : d.inlineCSS
         },
-        ...f
-      },
-      `end-time-${u}`
+        ...d
+      }
     )
   ] });
 });
 export {
-  k as default
+  C as default
 };

package/dist/shared/hooks/useInView/useInView.d.ts

@@ -1,4 +1,4 @@
 import { RefObject } from 'react';
 export default function useInView(targetRef: RefObject<HTMLElement | null>, options?: IntersectionObserverInit): {
-    isInView: any;
+    isInView: boolean;
 };

package/dist/shared/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.ts

@@ -1,2 +1,3 @@
-declare const useIsomorphicLayoutEffect: any;
+import { useEffect } from 'react';
+declare const useIsomorphicLayoutEffect: typeof useEffect;
 export default useIsomorphicLayoutEffect;

package/dist/teacher/home/components/Carousel1Account/Carousel1Account.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode, SyntheticEvent } from 'react';
-import { ImageProps } from '../../../../shared/components/Image';
 import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
+import { ImageProps } from '../../../../shared/components/Image';
 import { BannerProps } from '..';
 export interface Carousel1AccountProps extends Omit<FlexboxProps, 'title' | 'id'> {
     id: number;

package/dist/teacher/home/components/Carousel1Account/Carousel1Account.mjs

@@ -1,71 +1,83 @@
-import { jsx as r, Fragment as f, jsxs as n } from "react/jsx-runtime";
-import b from "@dotss/ui/core/useTheme";
-import l from "@dotss/ui/Flexbox";
-import c from "@dotss/ui/Typography";
-import C from "../../../../shared/components/Carousel/Carousel.mjs";
-import S from "../../../../shared/components/Carousel/CarouselSlide/CarouselSlide.mjs";
-import w from "../../../../shared/components/Image/Image.mjs";
+import { jsx as e, Fragment as C, jsxs as l } from "react/jsx-runtime";
+import k from "@dotss/ui/core/useTheme";
+import c from "@dotss/ui/Flexbox";
+import v from "@dotss/ui/hooks/useCheckHoverPossible/useCheckHoverPossible";
+import d from "@dotss/ui/Typography";
+import S from "../../../../shared/components/Carousel/Carousel.mjs";
+import w from "../../../../shared/components/Carousel/CarouselSlide/CarouselSlide.mjs";
+import x from "../../../../shared/components/Image/Image.mjs";
 import "@dotss/ui";
-function D({
+function I({
   id: p,
-  title: d,
+  title: s,
   banners: m,
-  onClickBanner: i,
-  imageProps: s,
-  ...h
+  onClickBanner: a,
+  imageProps: u,
+  ...g
 }) {
-  const { spacing: o } = b(), u = (t, a) => (e) => {
-    i && typeof i == "function" && (e.stopPropagation(), e.preventDefault(), i(t, a, e));
+  const { spacing: i, palette: n } = k(), { isHoverPossible: h } = v(), b = (o, t) => (r) => {
+    a && typeof a == "function" && (r.stopPropagation(), r.preventDefault(), a(o, t, r));
   };
-  return /* @__PURE__ */ r(f, { children: /* @__PURE__ */ n(l, { flexDirection: "column", inlineCSS: { width: "100%" }, ...h, children: [
-    /* @__PURE__ */ r(
-      c,
+  return /* @__PURE__ */ e(C, { children: /* @__PURE__ */ l(c, { flexDirection: "column", inlineCSS: { width: "100%" }, ...g, children: [
+    /* @__PURE__ */ e(
+      d,
       {
         id: `banner-account-carousel1-${p}`,
         variant: "h2B",
         inlineCSS: {
           whiteSpace: "pre-wrap",
           wordBreak: "keep-all",
-          paddingLeft: o.content(4),
-          paddingRight: o.content(4),
-          marginBottom: o.content(3)
+          paddingLeft: i.content(4),
+          paddingRight: i.content(4),
+          marginBottom: i.content(3)
         },
-        children: d
+        children: s
       }
     ),
-    /* @__PURE__ */ r(C, { rowCount: 2, step: 1, spacing: 5, children: m.map(({ id: t, title: a, url: e, image: g }) => /* @__PURE__ */ r(S, { children: /* @__PURE__ */ n(
-      l,
+    /* @__PURE__ */ e(S, { rowCount: 2, step: 1, spacing: 5, children: m.map(({ id: o, title: t, url: r, image: f }) => /* @__PURE__ */ e(w, { children: /* @__PURE__ */ l(
+      c,
       {
         tag: "a",
-        href: e,
+        href: r,
         alignItems: "center",
         gap: 4,
         draggable: !1,
-        onClick: u(e, t),
-        inlineCSS: { width: 264 },
+        onClick: b(r, o),
+        inlineCSS: {
+          width: 264,
+          borderRadius: 12,
+          '&:active:not([aria-disabled="true"])': {
+            backgroundColor: n.background.primary
+          },
+          ...h && {
+            '&:hover:not([aria-disabled="true"])': {
+              backgroundColor: n.background.primary
+            }
+          }
+        },
         children: [
-          /* @__PURE__ */ r(
-            w,
+          /* @__PURE__ */ e(
+            x,
             {
-              src: g || "",
+              src: f || "",
               width: 140,
               height: 98,
-              alt: `${a} 이미지`,
+              alt: `${t} 이미지`,
               "aria-hidden": !0,
               draggable: !1,
               borderRadius: 12,
               enableFallback: !0,
               enableErrorFallback: !0,
               style: { objectFit: "cover" },
-              ...s
+              ...u
             }
           ),
-          /* @__PURE__ */ r(c, { tag: "p", variant: "b2M", lineClamp: 2, children: a })
+          /* @__PURE__ */ e(d, { tag: "p", variant: "b2M", lineClamp: 2, children: t })
         ]
       }
-    ) }, `tictoccroc-carousel1-account-${t}`)) })
+    ) }, `tictoccroc-carousel1-account-${o}`)) })
   ] }) });
 }
 export {
-  D as default
+  I as default
 };

package/dist/teacher/home/components/Carousel2Account/Carousel2Account.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode, SyntheticEvent } from 'react';
-import { ImageProps } from '../../../../shared/components/Image';
 import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
+import { ImageProps } from '../../../../shared/components/Image';
 import { BannerProps } from '..';
 export interface Carousel2AccountProps extends Omit<FlexboxProps, 'title' | 'id'> {
     id: number;

package/dist/teacher/home/components/Carousel2Account/Carousel2Account.mjs

@@ -1,39 +1,40 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import b from "@dotss/ui/core/useTheme";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import k from "@dotss/ui/core/useTheme";
 import l from "@dotss/ui/Flexbox";
+import v from "@dotss/ui/hooks/useCheckHoverPossible/useCheckHoverPossible";
 import c from "@dotss/ui/Typography";
-import C from "../../../../shared/components/Carousel/Carousel.mjs";
-import x from "../../../../shared/components/Carousel/CarouselSlide/CarouselSlide.mjs";
-import S from "../../../../shared/components/Image/Image.mjs";
+import x from "../../../../shared/components/Carousel/Carousel.mjs";
+import S from "../../../../shared/components/Carousel/CarouselSlide/CarouselSlide.mjs";
+import w from "../../../../shared/components/Image/Image.mjs";
 import "@dotss/ui";
-function R({
-  id: d,
-  title: m,
-  banners: s,
-  onClickBanner: o,
-  imageProps: u,
+function T({
+  id: s,
+  title: u,
+  banners: m,
+  onClickBanner: a,
+  imageProps: g,
   ...h
 }) {
-  const { spacing: a } = b(), g = (t, i) => (r) => {
-    o && typeof o == "function" && (r.stopPropagation(), r.preventDefault(), o(t, i, r));
+  const { spacing: i, palette: d } = k(), { isHoverPossible: f } = v(), b = (o, t) => (e) => {
+    a && typeof a == "function" && (e.stopPropagation(), e.preventDefault(), a(o, t, e));
   };
   return /* @__PURE__ */ n(l, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...h, children: [
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ r(
       c,
       {
-        id: `banner-account-carousel2-${d}`,
+        id: `banner-account-carousel2-${s}`,
         variant: "h2B",
         inlineCSS: {
           whiteSpace: "pre-wrap",
           wordBreak: "keep-all",
-          paddingLeft: a.content(4),
-          paddingRight: a.content(4),
-          marginBottom: a.content(4)
+          paddingLeft: i.content(4),
+          paddingRight: i.content(4),
+          marginBottom: i.content(4)
         },
-        children: m
+        children: u
       }
     ),
-    /* @__PURE__ */ e(C, { rowCount: 1, step: 1, spacing: 3, children: s.map(({ id: t, title: i, subTitle: r, url: p, image: f }) => /* @__PURE__ */ e(x, { children: /* @__PURE__ */ n(
+    /* @__PURE__ */ r(x, { rowCount: 1, step: 1, spacing: 3, children: m.map(({ id: o, title: t, subTitle: e, url: p, image: C }) => /* @__PURE__ */ r(S, { children: /* @__PURE__ */ n(
       l,
       {
         tag: "a",
@@ -41,34 +42,45 @@ function R({
         flexDirection: "column",
         gap: 3,
         draggable: !1,
-        onClick: g(p, t),
-        inlineCSS: { width: 240 },
+        onClick: b(p, o),
+        inlineCSS: {
+          width: 240,
+          borderRadius: 12,
+          '&:active:not([aria-disabled="true"])': {
+            backgroundColor: d.background.primary
+          },
+          ...f && {
+            '&:hover:not([aria-disabled="true"])': {
+              backgroundColor: d.background.primary
+            }
+          }
+        },
         children: [
-          /* @__PURE__ */ e(
-            S,
+          /* @__PURE__ */ r(
+            w,
             {
-              src: f || "",
+              src: C || "",
               width: 240,
               height: 168,
-              alt: `${i} 이미지`,
+              alt: `${t} 이미지`,
               "aria-hidden": !0,
               draggable: !1,
               borderRadius: 12,
               enableFallback: !0,
               enableErrorFallback: !0,
               style: { objectFit: "cover" },
-              ...u
+              ...g
             }
           ),
           /* @__PURE__ */ n(l, { flexDirection: "column", gap: 1, children: [
-            /* @__PURE__ */ e(c, { tag: "p", variant: "h4B", lineClamp: 1, children: i }),
-            /* @__PURE__ */ e(c, { tag: "p", variant: "b4R", lineClamp: 1, color: "grey.70", children: r })
+            /* @__PURE__ */ r(c, { tag: "p", variant: "h4B", lineClamp: 1, children: t }),
+            /* @__PURE__ */ r(c, { tag: "p", variant: "b4R", lineClamp: 1, color: "grey.70", children: e })
           ] })
         ]
       }
-    ) }, `tictoccroc-carousel2-account-${t}`)) })
+    ) }, `tictoccroc-carousel2-account-${o}`)) })
   ] });
 }
 export {
-  R as default
+  T as default
 };

package/dist/teacher/home/components/TextAccount/TextAccount.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode, SyntheticEvent } from 'react';
-import { ImageProps } from '../../../../shared/components/Image';
 import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
+import { ImageProps } from '../../../../shared/components/Image';
 import { BannerProps } from '..';
 export interface TextAccountProps extends Omit<FlexboxProps, 'title' | 'id'> {
     id: number;

package/dist/teacher/profile/components/AvailableScheduleSection/AvailableScheduleSection.d.ts

@@ -18,5 +18,5 @@ export interface AvailableScheduleSectionProps extends FlexboxProps {
         };
     };
 }
-declare const AvailableScheduleSection: any;
+declare const AvailableScheduleSection: import('react').ForwardRefExoticComponent<Omit<AvailableScheduleSectionProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default AvailableScheduleSection;

package/dist/teacher/profile/components/CareNoteSection/CareNoteSection.d.ts

@@ -3,5 +3,5 @@ export interface CareNoteSectionProps extends FlexboxProps {
     totalCount: number;
     onClickViewAll?: () => void;
 }
-declare const CareNoteSection: any;
+declare const CareNoteSection: import('react').ForwardRefExoticComponent<Omit<CareNoteSectionProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default CareNoteSection;

package/dist/teacher/profile/components/ParentReviewSection/ParentReviewSection.d.ts

@@ -3,5 +3,5 @@ export interface ParentReviewSectionProps extends FlexboxProps {
     totalCount: number;
     onClickViewAll?: () => void;
 }
-declare const ParentReviewSection: any;
+declare const ParentReviewSection: import('react').ForwardRefExoticComponent<Omit<ParentReviewSectionProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default ParentReviewSection;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dotss/tictoccroc",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -103,6 +103,7 @@
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@storybook/addon-docs": "^9.0.4",
     "@storybook/addon-onboarding": "^9.0.4",
     "@storybook/react-vite": "^9.0.4",
     "@types/node": "^22.15.29",
@@ -111,7 +112,11 @@
     "glob": "^10.4.2",
     "storybook": "^9.0.4",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^1.6.0"
+    "vitest": "^1.6.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0"
   },
   "peerDependencies": {
     "@dotss/ui": ">=1.0.3",