@dotss/tictoccroc 0.0.29 → 0.0.31

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

@@ -1,9 +1,9 @@
 import { jsxs as n, jsx as e, Fragment as q } from "react/jsx-runtime";
-import { useRef as x, useImperativeHandle as A, useEffect as y } from "react";
-import { Flexbox as d, Typography as v, Button as J, Icon as I, Menu as Q, MenuBlock as P, CircularProgressIndicator as X } from "@dotss/ui";
-import Y from "@dotss/ui/core/useTheme";
-import { useCheckHoverPossible as Z } from "@dotss/ui/hooks";
-import { MenuButton as _ } from "@dotss/ui/Menu";
+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 Z from "@dotss/ui/core/useTheme";
+import { useCheckHoverPossible as _ } from "@dotss/ui/hooks";
+import { MenuButton as A } from "@dotss/ui/Menu";
 import V from "dayjs";
 import U from "../../Image/Image.mjs";
 import M from "../../../hooks/useInView/useInView.mjs";
@@ -32,8 +32,8 @@ function de({
   const {
     palette: { brand: k, grey: a, etc: H },
     spacing: E
-  } = Y(), { isHoverPossible: K } = Z(), o = x(null), D = x(null), p = x(null);
-  A(R, () => o.current);
+  } = 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();
@@ -119,7 +119,6 @@ function de({
                   {
                     tag: "p",
                     variant: "b3R",
-                    textAlign: i ? "right" : "left",
                     inlineCSS: {
                       whiteSpace: "pre-wrap",
                       wordBreak: "break-all"
@@ -128,7 +127,7 @@ function de({
                   }
                 ),
                 N && /* @__PURE__ */ e(
-                  J,
+                  Q,
                   {
                     variant: "text",
                     size: "xSmall",
@@ -146,7 +145,7 @@ function de({
         ] }),
         s && /* @__PURE__ */ n(q, { children: [
           /* @__PURE__ */ n(
-            _,
+            A,
             {
               ref: D,
               isMenuOpen: !!g,
@@ -195,7 +194,7 @@ function de({
             }
           ),
           /* @__PURE__ */ n(
-            Q,
+            X,
             {
               id: `message-${C}-menu`,
               anchorRef: D,
@@ -233,7 +232,7 @@ function de({
                 }
               ),
               i && u > 0 && l === "PENDING" && /* @__PURE__ */ e(
-                X,
+                Y,
                 {
                   size: "small",
                   loop: !0,

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

@@ -1,33 +1,33 @@
-import c from "dayjs";
-function l(a) {
-  return a.map(([o, s]) => {
-    const n = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
+import w from "dayjs";
+function h(a) {
+  return a.map(([c, s]) => {
+    const r = /* @__PURE__ */ new Map(), e = /* @__PURE__ */ new Map(), I = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map();
     for (let t = 0; t < s.length; t += 1) {
-      const e = s[t], i = e.senderId;
-      i == null || e.status === "FAILED" || e.type !== "USER" || (n.has(i) || n.set(i, e.id), r.set(i, e.id));
+      const n = s[t], d = n.senderId, i = s[t - 1], o = s[t + 1];
+      d == null || n.status === "FAILED" || n.type !== "USER" || (i && (i == null ? void 0 : i.senderId) !== d && u.set(`${d}-${n.id}`, n.id), o && (o == null ? void 0 : o.senderId) !== d && I.set(`${d}-${n.id}`, n.id), r.has(d) || r.set(d, n.id), e.set(d, n.id));
     }
-    const d = new Set(n.values()), u = new Set(r.values());
+    const f = new Set(r.values()), l = new Set(e.values()), p = new Set(I.values()), $ = new Set(u.values());
     return [
-      o,
+      c,
       s.map((t) => ({
         ...t,
         // 역방향 스크롤에 따른 역순 처리
-        isFirstInGroup: u.has(t.id),
-        isLastInGroup: d.has(t.id)
+        isFirstInGroup: l.has(t.id) || p.has(t.id),
+        isLastInGroup: f.has(t.id) || $.has(t.id)
       }))
     ];
   });
 }
-function I({
+function E({
   mine: a,
-  status: o,
+  status: c,
   unreadUserCount: s,
-  content: n,
-  regDatetime: r
+  content: r,
+  regDatetime: e
 }) {
-  return `${a ? "나" : "상대방"}, ${n}, ${s && s > 0 ? "읽지 않음" : "읽음"}, ${o === "SUCCEEDED" ? "전송됨" : "전송 실패"}, ${c(r).format("YYYY년 MM월 DD일 A h:mm")}`;
+  return `${a ? "나" : "상대방"}, ${r}, ${s && s > 0 ? "읽지 않음" : "읽음"}, ${c === "SUCCEEDED" ? "전송됨" : "전송 실패"}, ${w(e).format("YYYY년 MM월 DD일 A h:mm")}`;
 }
 export {
-  I as getMessageLabel,
-  l as markMessageGroupBoundaries
+  E as getMessageLabel,
+  h as markMessageGroupBoundaries
 };

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

@@ -1,13 +1,13 @@
 import { SyntheticEvent } from 'react';
-import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
 import { ImageProps } from '../../../../shared/components/Image';
+import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
 import { BannerProps } from '..';
-export interface BannerAccountProps extends Omit<FlexboxProps, 'title'> {
-    id: string;
+export interface BannerAccountProps extends Omit<FlexboxProps, 'title' | 'id'> {
+    id: number;
     banners: Array<BannerProps & {
         image?: string;
     }>;
-    onClickBanner?: (url: string, e: SyntheticEvent) => void;
+    onClickBanner?: (url: string, bannerId: number, e: SyntheticEvent) => void;
     imageProps?: Partial<ImageProps>;
 }
 declare function BannerAccount({ id, banners, onClickBanner, imageProps, ...props }: BannerAccountProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import t from "@dotss/ui/Flexbox";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import n from "@dotss/ui/Flexbox";
 import b from "@dotss/ui/Typography";
 import { useTheme as f } from "@emotion/react";
 import g from "../../../../shared/components/Image/Image.mjs";
@@ -7,11 +7,11 @@ import "@dotss/ui";
 import "@dotss/ui/core/useTheme";
 import S from "../../../../shared/components/Swiper/Swiper.mjs";
 import w from "../../../../shared/components/Swiper/SwiperBlock/SwiperBlock.mjs";
-function I({ id: o, banners: c, onClickBanner: n, imageProps: l, ...d }) {
-  const { palette: p } = f(), h = (i) => (r) => {
-    n && typeof n == "function" && (r.stopPropagation(), r.preventDefault(), n(i, r));
-  }, m = ({ page: i, totalPages: r }) => r <= 1 ? null : /* @__PURE__ */ e(
-    t,
+function I({ id: a, banners: l, onClickBanner: o, imageProps: d, ...p }) {
+  const { palette: h } = f(), m = (e, r) => (t) => {
+    o && typeof o == "function" && (t.stopPropagation(), t.preventDefault(), o(e, r, t));
+  }, s = ({ page: e, totalPages: r }) => r <= 1 ? null : /* @__PURE__ */ i(
+    n,
     {
       alignItems: "center",
       justifyContent: "center",
@@ -26,9 +26,9 @@ function I({ id: o, banners: c, onClickBanner: n, imageProps: l, ...d }) {
         minWidth: 36,
         minHeight: 20,
         borderRadius: 24,
-        backgroundColor: p.etc.dimmed02
+        backgroundColor: h.etc.dimmed02
       },
-      children: /* @__PURE__ */ a(
+      children: /* @__PURE__ */ c(
         b,
         {
           tag: "p",
@@ -39,9 +39,9 @@ function I({ id: o, banners: c, onClickBanner: n, imageProps: l, ...d }) {
               fontWeight: 700
             }
           },
-          "aria-label": `${r} 중 ${i + 1}`,
+          "aria-label": `${r} 중 ${e + 1}`,
           children: [
-            /* @__PURE__ */ e("span", { children: i + 1 }),
+            /* @__PURE__ */ i("span", { children: e + 1 }),
             "/",
             r
           ]
@@ -49,27 +49,27 @@ function I({ id: o, banners: c, onClickBanner: n, imageProps: l, ...d }) {
       )
     }
   );
-  return /* @__PURE__ */ a(t, { inlineCSS: { width: "100%" }, ...d, children: [
-    /* @__PURE__ */ e(t, { id: `tictoccroc-banner-${o}`, visuallyHidden: !0, children: "배너" }),
-    /* @__PURE__ */ e(
+  return /* @__PURE__ */ c(n, { inlineCSS: { width: "100%" }, ...p, children: [
+    /* @__PURE__ */ i(n, { id: `tictoccroc-banner-${a}`, visuallyHidden: !0, children: "배너" }),
+    /* @__PURE__ */ i(
       S,
       {
-        renderPagination: m,
+        renderPagination: s,
         loop: !0,
         inlineCSS: { borderRadius: 12, overflow: "hidden" },
-        "aria-describedby": `tictoccroc-banner-${o}`,
-        children: c.map(({ id: i, url: r, image: s }, u) => /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(
-          t,
+        "aria-describedby": `tictoccroc-banner-${a}`,
+        children: l.map(({ id: e, url: r, image: t }, u) => /* @__PURE__ */ i(w, { children: /* @__PURE__ */ i(
+          n,
           {
             tag: "a",
             href: r,
             draggable: !1,
-            onClick: h(r),
+            onClick: m(r, e),
             inlineCSS: { width: "100%" },
-            children: /* @__PURE__ */ e(
+            children: /* @__PURE__ */ i(
               g,
               {
-                src: s || "",
+                src: t || "",
                 alt: `배너 ${u + 1}`,
                 width: 328,
                 height: 100,
@@ -79,11 +79,11 @@ function I({ id: o, banners: c, onClickBanner: n, imageProps: l, ...d }) {
                 withIntrinsicRatio: !0,
                 wrapperProps: { inlineCSS: { width: "100%" } },
                 style: { width: "100%", objectFit: "cover" },
-                ...l
+                ...d
               }
             )
           }
-        ) }, `tictoccroc-banner-account-${i}`))
+        ) }, `tictoccroc-banner-account-${e}`))
       }
     )
   ] });

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

@@ -1,14 +1,14 @@
 import { ReactNode, SyntheticEvent } from 'react';
-import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
 import { ImageProps } from '../../../../shared/components/Image';
+import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
 import { BannerProps } from '..';
-export interface Carousel1AccountProps extends Omit<FlexboxProps, 'title'> {
-    id: string;
+export interface Carousel1AccountProps extends Omit<FlexboxProps, 'title' | 'id'> {
+    id: number;
     title: ReactNode;
     banners: Array<BannerProps & {
         image?: string;
     }>;
-    onClickBanner?: (url: string, e: SyntheticEvent) => void;
+    onClickBanner?: (url: string, bannerId: number, e: SyntheticEvent) => void;
     imageProps?: Partial<ImageProps>;
 }
 declare function Carousel1Account({ id, title, banners, onClickBanner, imageProps, ...props }: Carousel1AccountProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -10,12 +10,12 @@ function D({
   id: p,
   title: d,
   banners: m,
-  onClickBanner: t,
+  onClickBanner: i,
   imageProps: s,
   ...h
 }) {
-  const { spacing: a } = b(), u = (i) => (e) => {
-    t && typeof t == "function" && (e.stopPropagation(), e.preventDefault(), t(i, e));
+  const { spacing: o } = b(), u = (t, a) => (e) => {
+    i && typeof i == "function" && (e.stopPropagation(), e.preventDefault(), i(t, a, e));
   };
   return /* @__PURE__ */ r(f, { children: /* @__PURE__ */ n(l, { flexDirection: "column", inlineCSS: { width: "100%" }, ...h, children: [
     /* @__PURE__ */ r(
@@ -26,22 +26,22 @@ function D({
         inlineCSS: {
           whiteSpace: "pre-wrap",
           wordBreak: "keep-all",
-          paddingLeft: a.content(4),
-          paddingRight: a.content(4),
-          marginBottom: a.content(3)
+          paddingLeft: o.content(4),
+          paddingRight: o.content(4),
+          marginBottom: o.content(3)
         },
         children: d
       }
     ),
-    /* @__PURE__ */ r(C, { rowCount: 2, step: 1, spacing: 5, children: m.map(({ id: i, title: e, url: o, image: g }) => /* @__PURE__ */ r(S, { children: /* @__PURE__ */ n(
+    /* @__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,
       {
         tag: "a",
-        href: o,
+        href: e,
         alignItems: "center",
         gap: 4,
         draggable: !1,
-        onClick: u(o),
+        onClick: u(e, t),
         inlineCSS: { width: 264 },
         children: [
           /* @__PURE__ */ r(
@@ -50,7 +50,7 @@ function D({
               src: g || "",
               width: 140,
               height: 98,
-              alt: `${e} 이미지`,
+              alt: `${a} 이미지`,
               "aria-hidden": !0,
               draggable: !1,
               borderRadius: 12,
@@ -60,10 +60,10 @@ function D({
               ...s
             }
           ),
-          /* @__PURE__ */ r(c, { tag: "p", variant: "b2M", lineClamp: 2, children: e })
+          /* @__PURE__ */ r(c, { tag: "p", variant: "b2M", lineClamp: 2, children: a })
         ]
       }
-    ) }, `tictoccroc-carousel1-account-${i}`)) })
+    ) }, `tictoccroc-carousel1-account-${t}`)) })
   ] }) });
 }
 export {

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

@@ -1,15 +1,15 @@
 import { ReactNode, SyntheticEvent } from 'react';
-import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
 import { ImageProps } from '../../../../shared/components/Image';
+import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
 import { BannerProps } from '..';
-export interface Carousel2AccountProps extends Omit<FlexboxProps, 'title'> {
-    id: string;
+export interface Carousel2AccountProps extends Omit<FlexboxProps, 'title' | 'id'> {
+    id: number;
     title: ReactNode;
     banners: Array<BannerProps & {
         image?: string;
         subTitle?: ReactNode;
     }>;
-    onClickBanner?: (url: string, e: SyntheticEvent) => void;
+    onClickBanner?: (url: string, bannerId: number, e: SyntheticEvent) => void;
     bannerWidth?: number;
     imageProps?: Partial<ImageProps>;
 }

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

@@ -1,72 +1,72 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import b from "@dotss/ui/core/useTheme";
-import n from "@dotss/ui/Flexbox";
-import l from "@dotss/ui/Typography";
+import l from "@dotss/ui/Flexbox";
+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 "@dotss/ui";
 function R({
-  id: p,
-  title: d,
-  banners: m,
-  onClickBanner: t,
-  imageProps: s,
-  ...u
+  id: d,
+  title: m,
+  banners: s,
+  onClickBanner: o,
+  imageProps: u,
+  ...h
 }) {
-  const { spacing: i } = b(), h = (o) => (e) => {
-    t && typeof t == "function" && (e.stopPropagation(), e.preventDefault(), t(o, e));
+  const { spacing: a } = b(), g = (t, i) => (r) => {
+    o && typeof o == "function" && (r.stopPropagation(), r.preventDefault(), o(t, i, r));
   };
-  return /* @__PURE__ */ a(n, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...u, children: [
-    /* @__PURE__ */ r(
-      l,
+  return /* @__PURE__ */ n(l, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...h, children: [
+    /* @__PURE__ */ e(
+      c,
       {
-        id: `banner-account-carousel2-${p}`,
+        id: `banner-account-carousel2-${d}`,
         variant: "h2B",
         inlineCSS: {
           whiteSpace: "pre-wrap",
           wordBreak: "keep-all",
-          paddingLeft: i.content(4),
-          paddingRight: i.content(4),
-          marginBottom: i.content(4)
+          paddingLeft: a.content(4),
+          paddingRight: a.content(4),
+          marginBottom: a.content(4)
         },
-        children: d
+        children: m
       }
     ),
-    /* @__PURE__ */ r(C, { rowCount: 1, step: 1, spacing: 3, children: m.map(({ id: o, title: e, subTitle: g, url: c, image: f }) => /* @__PURE__ */ r(x, { children: /* @__PURE__ */ a(
-      n,
+    /* @__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(
+      l,
       {
         tag: "a",
-        href: c,
+        href: p,
         flexDirection: "column",
         gap: 3,
         draggable: !1,
-        onClick: h(c),
+        onClick: g(p, t),
         inlineCSS: { width: 240 },
         children: [
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ e(
             S,
             {
               src: f || "",
               width: 240,
               height: 168,
-              alt: `${e} 이미지`,
+              alt: `${i} 이미지`,
               "aria-hidden": !0,
               draggable: !1,
               borderRadius: 12,
               enableFallback: !0,
               enableErrorFallback: !0,
               style: { objectFit: "cover" },
-              ...s
+              ...u
             }
           ),
-          /* @__PURE__ */ a(n, { flexDirection: "column", gap: 1, children: [
-            /* @__PURE__ */ r(l, { tag: "p", variant: "h4B", lineClamp: 1, children: e }),
-            /* @__PURE__ */ r(l, { tag: "p", variant: "b4R", lineClamp: 1, color: "grey.70", children: 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 })
           ] })
         ]
       }
-    ) }, `tictoccroc-carousel2-account-${o}`)) })
+    ) }, `tictoccroc-carousel2-account-${t}`)) })
   ] });
 }
 export {

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

@@ -1,14 +1,14 @@
 import { ReactNode, SyntheticEvent } from 'react';
-import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
 import { ImageProps } from '../../../../shared/components/Image';
+import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
 import { BannerProps } from '..';
-export interface TextAccountProps extends Omit<FlexboxProps, 'title'> {
-    id: string;
+export interface TextAccountProps extends Omit<FlexboxProps, 'title' | 'id'> {
+    id: number;
     title: ReactNode;
     banners: Array<BannerProps & {
         image?: string;
     }>;
-    onClickBanner?: (url: string, e: SyntheticEvent) => void;
+    onClickBanner?: (url: string, bannerId: number, e: SyntheticEvent) => void;
     imageProps?: Partial<ImageProps>;
 }
 declare function TextAccount({ id, title, banners, onClickBanner, imageProps, ...props }: TextAccountProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -7,37 +7,37 @@ import h from "@dotss/ui/Typography";
 import C from "../../../../shared/components/Image/Image.mjs";
 import "@dotss/ui";
 function P({
-  id: a,
+  id: c,
   title: s,
   banners: m,
-  onClickBanner: i,
+  onClickBanner: l,
   imageProps: g,
   ...f
 }) {
-  const { spacing: o, palette: c } = S(), { isHoverPossible: u } = x(), b = (l) => (t) => {
-    i && typeof i == "function" && (t.stopPropagation(), t.preventDefault(), i(l, t));
+  const { spacing: a, palette: p } = S(), { isHoverPossible: u } = x(), b = (o, i) => (t) => {
+    l && typeof l == "function" && (t.stopPropagation(), t.preventDefault(), l(o, i, t));
   };
   return /* @__PURE__ */ d(r, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...f, children: [
     /* @__PURE__ */ e(
       h,
       {
-        id: `banner-account-text-${a}`,
+        id: `banner-account-text-${c}`,
         variant: "h2B",
         inlineCSS: {
           whiteSpace: "pre-wrap",
           wordBreak: "keep-all",
-          paddingLeft: o.content(4),
-          paddingRight: o.content(4),
-          marginBottom: o.content(2)
+          paddingLeft: a.content(4),
+          paddingRight: a.content(4),
+          marginBottom: a.content(2)
         },
         children: s
       }
     ),
-    /* @__PURE__ */ e(r, { tag: "ul", flexDirection: "column", "aria-labelledby": `banner-account-text-${a}`, children: m.map(({ id: l, title: t, url: p, image: n }) => /* @__PURE__ */ e(r, { tag: "li", alignItems: "center", children: /* @__PURE__ */ d(
+    /* @__PURE__ */ e(r, { tag: "ul", flexDirection: "column", "aria-labelledby": `banner-account-text-${c}`, children: m.map(({ id: o, title: i, url: t, image: n }) => /* @__PURE__ */ e(r, { tag: "li", alignItems: "center", children: /* @__PURE__ */ d(
       r,
       {
         tag: "a",
-        href: p,
+        href: t,
         pt: n ? 3 : 4,
         pl: 4,
         pb: n ? 3 : 4,
@@ -45,15 +45,15 @@ function P({
         gap: 3,
         alignItems: "center",
         draggable: !1,
-        onClick: b(p),
+        onClick: b(t, o),
         inlineCSS: {
           width: "100%",
           "&:focus-within": {
-            backgroundColor: c.grey[10]
+            backgroundColor: p.grey[10]
           },
           ...u ? {
             "&:hover": {
-              backgroundColor: c.grey[10]
+              backgroundColor: p.grey[10]
             }
           } : {}
         },
@@ -72,7 +72,7 @@ function P({
                   width: 100,
                   height: 70,
                   src: n,
-                  alt: `${t} 이미지`,
+                  alt: `${i} 이미지`,
                   draggable: !1,
                   enableFallback: !0,
                   enableErrorFallback: !0,
@@ -90,7 +90,7 @@ function P({
               inlineCSS: {
                 flexGrow: 1
               },
-              children: t
+              children: i
             }
           ),
           /* @__PURE__ */ e(
@@ -104,7 +104,7 @@ function P({
           )
         ]
       }
-    ) }, `tictoccroc-story-${l}`)) })
+    ) }, `tictoccroc-story-${o}`)) })
   ] });
 }
 export {

package/dist/teacher/profile/components/CareerSection/CareerItem/CareerItem.mjs

@@ -1,7 +1,7 @@
 import { jsx as i, jsxs as e, Fragment as s } from "react/jsx-runtime";
-import { Flexbox as a, Label as E, Typography as f, Icon as b } from "@dotss/ui";
-import R from "@dotss/ui/core/useTheme";
-import { useCheckHoverPossible as p } from "@dotss/ui/hooks";
+import { Flexbox as a, Label as p, Typography as f, Icon as b } from "@dotss/ui";
+import w from "@dotss/ui/core/useTheme";
+import { useCheckHoverPossible as E } from "@dotss/ui/hooks";
 import c from "dayjs";
 function T({
   title: x,
@@ -12,10 +12,10 @@ function T({
   id: S,
   ...n
 }) {
-  const { isHoverPossible: I } = p(), {
+  const { isHoverPossible: I } = E(), {
     palette: { grey: m },
     spacing: g
-  } = R(), l = typeof n.onClick == "function", r = c(Y), u = o ? c(o) : c(), h = u.diff(r, "month"), d = Math.floor(h / 12), C = r.isSame(u, "year") && h % 12 < 1 ? 1 : h % 12;
+  } = w(), l = typeof n.onClick == "function", r = c(Y), u = o ? c(o) : c(), h = u.diff(r, "month"), d = Math.floor(h / 12), C = r.isSame(u, "year") && h % 12 < 1 ? 1 : h % 12;
   return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ e(
     a,
     {
@@ -53,12 +53,13 @@ function T({
         /* @__PURE__ */ e(a, { flexDirection: "column", gap: 1, flexGrow: 1, children: [
           /* @__PURE__ */ e(a, { alignItems: "center", gap: 1, children: [
             k && /* @__PURE__ */ i(
-              E,
+              p,
               {
                 variant: "outlined",
                 size: "small",
                 color: "orange",
                 inlineCSS: {
+                  whiteSpace: "nowrap",
                   marginRight: g.content(1)
                 },
                 children: "대표"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dotss/tictoccroc",
   "type": "module",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -106,8 +106,8 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "dayjs": "^1.11.13",
-    "react": "^18.0.0 || 19.0.0",
-    "react-dom": "^18.0.0 || 19.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
     "heic2any": "^0.0.4"
   },
   "publishConfig": {