@dotss/tictoccroc 0.0.13 → 0.0.15

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

@@ -8,6 +8,7 @@ export { default as Image } from './Image';
 export { default as Calendar } from './Calendar';
 export { default as Masonry } from './Masonry';
 export { default as LoadingAnnouncer } from './LoadingAnnouncer';
+export { Message, SystemMessage, BotMessage, InputBar, Seperator, UnreadMessagePill } from './ChatKit';
 export * from './Scheduler';
 export * from './MediaDialog';
 export * from './Swiper';
@@ -18,3 +19,4 @@ export * from './Image';
 export * from './Calendar';
 export * from './Masonry';
 export * from './LoadingAnnouncer';
+export * from './ChatKit';

package/dist/shared/components/index.mjs

@@ -1,46 +1,73 @@
-import { default as a } from "./Scheduler/Scheduler.mjs";
+import { default as o } from "./Scheduler/Scheduler.mjs";
 import { default as t } from "./Scheduler/ScheduleEvent/ScheduleEvent.mjs";
-import { default as f } from "./Scheduler/ScheduleBlock/ScheduleBlock.mjs";
-import { getAvailableDateRange as u } from "./Scheduler/Scheduler.utils.mjs";
-import { default as s } from "./MediaDialog/MediaDialog.mjs";
+import { default as l } from "./Scheduler/ScheduleBlock/ScheduleBlock.mjs";
+import { getAvailableDateRange as d } from "./Scheduler/Scheduler.utils.mjs";
+import { default as u } from "./MediaDialog/MediaDialog.mjs";
 import { default as x } from "./MediaDialog/MediaBlock/MediaBlock.mjs";
-import { default as n } from "./MediaDialog/MediaDialogContent/MediaDialogContent.mjs";
-import { default as g } from "./MediaDialog/MediaDialogFooter/MediaDialogFooter.mjs";
-import { default as k } from "./MediaDialog/MediaDialogToolbar/MediaDialogToolbar.mjs";
-import { default as B } from "./Swiper/Swiper.mjs";
+import { default as i } from "./MediaDialog/MediaDialogContent/MediaDialogContent.mjs";
+import { default as M } from "./MediaDialog/MediaDialogFooter/MediaDialogFooter.mjs";
+import { default as B } from "./MediaDialog/MediaDialogToolbar/MediaDialogToolbar.mjs";
+import { default as S } from "./Swiper/Swiper.mjs";
 import { default as C } from "./Swiper/SwiperBlock/SwiperBlock.mjs";
-import { default as R } from "./Carousel/Carousel.mjs";
-import { default as v } from "./Carousel/CarouselSlide/CarouselSlide.mjs";
-import { default as y } from "./TimePicker/TimePicker.mjs";
-import { default as E } from "./Roller/Roller.mjs";
-import { default as T } from "./Roller/RollerBlock/RollerBlock.mjs";
-import { default as L } from "./Image/Image.mjs";
-import { default as j } from "./Image/Image.error.mjs";
-import { default as z } from "./Calendar/Calendar.mjs";
-import { default as H } from "./Masonry/Masonry.mjs";
-import { default as K } from "./Masonry/MasonryBlock/MasonryBlock.mjs";
-import { default as O } from "./LoadingAnnouncer/LoadingAnnouncer.mjs";
+import { default as I } from "./Carousel/Carousel.mjs";
+import { default as y } from "./Carousel/CarouselSlide/CarouselSlide.mjs";
+import { default as R } from "./TimePicker/TimePicker.mjs";
+import { default as F } from "./Roller/Roller.mjs";
+import { default as w } from "./Roller/RollerBlock/RollerBlock.mjs";
+import { default as E } from "./Image/Image.mjs";
+import { default as G } from "./Image/Image.error.mjs";
+import { default as j } from "./Calendar/Calendar.mjs";
+import { default as z } from "./Masonry/Masonry.mjs";
+import { default as J } from "./Masonry/MasonryBlock/MasonryBlock.mjs";
+import { default as N } from "./LoadingAnnouncer/LoadingAnnouncer.mjs";
+import { default as Q } from "./ChatKit/Message/Message.mjs";
+import { default as W } from "./ChatKit/Message/Message.fallback.mjs";
+import { getMessageLabel as Y, markMessageGroupBoundaries as Z } from "./ChatKit/Message/Message.utils.mjs";
+import { default as $ } from "./ChatKit/SystemMessage/SystemMessage.mjs";
+import { default as ae } from "./ChatKit/SystemMessage/(Actions)/DirectTrageRiskInfoBottomSheet/DirectTrageRiskInfoBottomSheet.mjs";
+import { getSystemMessageLabel as re } from "./ChatKit/SystemMessage/SystemMessage.utils.mjs";
+import { default as fe } from "./ChatKit/BotMessage/BotMessage.mjs";
+import { getBotMessageLabel as se, getClassInfo as de, getCtaButtonText as me } from "./ChatKit/BotMessage/BotMessage.utils.mjs";
+import { default as pe } from "./ChatKit/InputBar/InputBar.mjs";
+import { default as ge } from "./ChatKit/InputBar/InputBar.fallback.mjs";
+import { default as ne } from "./ChatKit/Seperator/Seperator.mjs";
+import { default as ce } from "./ChatKit/UnreadMessagePill/UnreadMessagePill.mjs";
 export {
-  z as Calendar,
-  R as Carousel,
-  v as CarouselSlide,
-  L as Image,
-  j as ImageError,
-  O as LoadingAnnouncer,
-  H as Masonry,
-  K as MasonryBlock,
+  fe as BotMessage,
+  j as Calendar,
+  I as Carousel,
+  y as CarouselSlide,
+  ae as DirectTradeRiskInfoBottomSheet,
+  E as Image,
+  G as ImageError,
+  pe as InputBar,
+  ge as InputBarFallback,
+  N as LoadingAnnouncer,
+  z as Masonry,
+  J as MasonryBlock,
   x as MediaBlock,
-  s as MediaDialog,
-  n as MediaDialogContent,
-  g as MediaDialogFooter,
-  k as MediaDialogToolbar,
-  E as Roller,
-  T as RollerBlock,
-  f as ScheduleBlock,
+  u as MediaDialog,
+  i as MediaDialogContent,
+  M as MediaDialogFooter,
+  B as MediaDialogToolbar,
+  Q as Message,
+  W as MessageFallback,
+  F as Roller,
+  w as RollerBlock,
+  l as ScheduleBlock,
   t as ScheduleEvent,
-  a as Scheduler,
-  B as Swiper,
+  o as Scheduler,
+  ne as Seperator,
+  S as Swiper,
   C as SwiperBlock,
-  y as TimePicker,
-  u as getAvailableDateRange
+  $ as SystemMessage,
+  R as TimePicker,
+  ce as UnreadMessagePill,
+  d as getAvailableDateRange,
+  se as getBotMessageLabel,
+  de as getClassInfo,
+  me as getCtaButtonText,
+  Y as getMessageLabel,
+  re as getSystemMessageLabel,
+  Z as markMessageGroupBoundaries
 };

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

@@ -1 +1,2 @@
 export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
+export { default as useInView } from './useInView/useInView';

package/dist/shared/hooks/index.mjs

@@ -1,4 +1,6 @@
 import { default as f } from "./useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
+import { default as a } from "./useInView/useInView.mjs";
 export {
+  a as useInView,
   f as useIsomorphicLayoutEffect
 };

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

@@ -0,0 +1,2 @@
+import { default as useInView } from './useInView';
+export default useInView;

package/dist/shared/hooks/useInView/index.mjs

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

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

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

package/dist/shared/hooks/useInView/useInView.mjs

@@ -0,0 +1,30 @@
+import { useState as d, useRef as o, useEffect as s } from "react";
+function a(n, t) {
+  const [r, c] = d(!1), i = o(!1);
+  return s(() => {
+    let e;
+    return n.current && (e = new IntersectionObserver(
+      ([u]) => {
+        c(u.isIntersecting && !i.current);
+      },
+      {
+        threshold: 0.7,
+        ...t
+      }
+    ), e.observe(n.current)), () => {
+      e == null || e.disconnect();
+    };
+  }, [n, t]), s(() => {
+    const e = () => {
+      i.current = document.hidden;
+    };
+    return document.addEventListener("visibilitychange", e), () => {
+      document.removeEventListener("visibilitychange", e);
+    };
+  }, []), {
+    isInView: r
+  };
+}
+export {
+  a as default
+};

package/dist/shared/utils/getCareTypeLabel/getCareTypeLabel.d.ts

@@ -0,0 +1 @@
+export default function getCareTypeLabel(careType?: string | null): "" | "놀이" | "등하원∙이동" | "학습" | "창의미술" | "영어" | "패키지";

package/dist/shared/utils/getCareTypeLabel/getCareTypeLabel.mjs

@@ -0,0 +1,21 @@
+function r(e) {
+  switch (e) {
+    case "1":
+      return "놀이";
+    case "2":
+      return "등하원∙이동";
+    case "3":
+      return "학습";
+    case "4":
+      return "창의미술";
+    case "5":
+      return "영어";
+    case "6":
+      return "패키지";
+    default:
+      return "";
+  }
+}
+export {
+  r as default
+};

package/dist/shared/utils/getCareTypeLabel/getCareTypeLabel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/shared/utils/getCareTypeLabel/index.d.ts

@@ -0,0 +1,2 @@
+import { default as getCareTypeLabel } from './getCareTypeLabel';
+export default getCareTypeLabel;

package/dist/shared/utils/getCareTypeLabel/index.mjs

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

package/dist/shared/utils/index.d.ts

@@ -11,3 +11,4 @@ export { default as getVimeoId } from './getVimeoId';
 export { default as parseQueryString } from './parseQueryString';
 export { default as share } from './share';
 export { default as dayFlagToDay } from './dayFlagToDay';
+export { default as getCareTypeLabel } from './getCareTypeLabel';

package/dist/shared/utils/index.mjs

@@ -1,28 +1,30 @@
-import { default as t } from "./getImageUrl/getImageUrl.mjs";
+import { default as r } from "./getImageUrl/getImageUrl.mjs";
 import { default as o } from "./isServer/isServer.mjs";
 import { default as s } from "./getTimeRange/getTimeRange.mjs";
-import { default as p } from "./getDateRange/getDateRange.mjs";
-import { default as l } from "./isAndroid/isAndroid.mjs";
+import { default as d } from "./getDateRange/getDateRange.mjs";
+import { default as m } from "./isAndroid/isAndroid.mjs";
 import { default as x } from "./isApp/isApp.mjs";
 import { default as i } from "./isDesktop/isDesktop.mjs";
 import { default as y } from "./birthDateToAge/birthDateToAge.mjs";
-import { default as T } from "./objectToQueryString/objectToQueryString.mjs";
-import { default as S } from "./getVimeoId/getVimeoId.mjs";
+import { default as D } from "./objectToQueryString/objectToQueryString.mjs";
+import { default as A } from "./getVimeoId/getVimeoId.mjs";
 import { default as h } from "./parseQueryString/parseQueryString.mjs";
 import { default as Q } from "./share/share.mjs";
 import { default as c } from "./dayFlagToDay/dayFlagToDay.mjs";
+import { default as k } from "./getCareTypeLabel/getCareTypeLabel.mjs";
 export {
   y as birthDateToAge,
   c as dayFlagToDay,
-  p as getDateRange,
-  t as getImageUrl,
+  k as getCareTypeLabel,
+  d as getDateRange,
+  r as getImageUrl,
   s as getTimeRange,
-  S as getVimeoId,
-  l as isAndroid,
+  A as getVimeoId,
+  m as isAndroid,
   x as isApp,
   i as isDesktop,
   o as isServer,
-  T as objectToQueryString,
+  D as objectToQueryString,
   h as parseQueryString,
   Q as share
 };

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

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

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

@@ -1,16 +1,16 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import t from "@dotss/ui/Flexbox";
-import u from "@dotss/ui/Typography";
-import { useTheme as b } from "@emotion/react";
-import f from "../../../../shared/components/Image/Image.mjs";
+import b from "@dotss/ui/Typography";
+import { useTheme as f } from "@emotion/react";
+import g from "../../../../shared/components/Image/Image.mjs";
 import "@dotss/ui";
 import "@dotss/ui/core/useTheme";
-import g from "../../../../shared/components/Swiper/Swiper.mjs";
-import S from "../../../../shared/components/Swiper/SwiperBlock/SwiperBlock.mjs";
-function R({ id: o, banners: c, onClickBanner: n, ...l }) {
-  const { palette: d } = b(), p = (i) => (r) => {
+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));
-  }, h = ({ page: i, totalPages: r }) => r <= 1 ? null : /* @__PURE__ */ e(
+  }, m = ({ page: i, totalPages: r }) => r <= 1 ? null : /* @__PURE__ */ e(
     t,
     {
       alignItems: "center",
@@ -26,10 +26,10 @@ function R({ id: o, banners: c, onClickBanner: n, ...l }) {
         minWidth: 36,
         minHeight: 20,
         borderRadius: 24,
-        backgroundColor: d.etc.dimmed02
+        backgroundColor: p.etc.dimmed02
       },
       children: /* @__PURE__ */ a(
-        u,
+        b,
         {
           tag: "p",
           variant: "c5R",
@@ -49,28 +49,28 @@ function R({ id: o, banners: c, onClickBanner: n, ...l }) {
       )
     }
   );
-  return /* @__PURE__ */ a(t, { inlineCSS: { width: "100%" }, ...l, children: [
+  return /* @__PURE__ */ a(t, { inlineCSS: { width: "100%" }, ...d, children: [
     /* @__PURE__ */ e(t, { id: `tictoccroc-banner-${o}`, visuallyHidden: !0, children: "배너" }),
     /* @__PURE__ */ e(
-      g,
+      S,
       {
-        renderPagination: h,
+        renderPagination: m,
         loop: !0,
         inlineCSS: { borderRadius: 12, overflow: "hidden" },
         "aria-describedby": `tictoccroc-banner-${o}`,
-        children: c.map(({ id: i, url: r, image: m }, s) => /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(
+        children: c.map(({ id: i, url: r, image: s }, u) => /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(
           t,
           {
             tag: "a",
             href: r,
             draggable: !1,
-            onClick: p(r),
+            onClick: h(r),
             inlineCSS: { width: "100%" },
             children: /* @__PURE__ */ e(
-              f,
+              g,
               {
-                src: m || "",
-                alt: `배너 ${s + 1}`,
+                src: s || "",
+                alt: `배너 ${u + 1}`,
                 width: 328,
                 height: 100,
                 draggable: !1,
@@ -78,7 +78,8 @@ function R({ id: o, banners: c, onClickBanner: n, ...l }) {
                 enableErrorFallback: !0,
                 withIntrinsicRatio: !0,
                 wrapperProps: { inlineCSS: { width: "100%" } },
-                style: { width: "100%", objectFit: "cover" }
+                style: { width: "100%", objectFit: "cover" },
+                ...l
               }
             )
           }
@@ -88,5 +89,5 @@ function R({ id: o, banners: c, onClickBanner: n, ...l }) {
   ] });
 }
 export {
-  R as default
+  I as default
 };

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

@@ -1,5 +1,6 @@
 import { ReactNode, SyntheticEvent } from 'react';
 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: string;
@@ -8,6 +9,7 @@ export interface Carousel1AccountProps extends Omit<FlexboxProps, 'title'> {
         image?: string;
     }>;
     onClickBanner?: (url: string, e: SyntheticEvent) => void;
+    imageProps?: Partial<ImageProps>;
 }
-declare function Carousel1Account({ id, title, banners, onClickBanner, ...props }: Carousel1AccountProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Carousel1Account({ id, title, banners, onClickBanner, imageProps, ...props }: Carousel1AccountProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default Carousel1Account;

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

@@ -1,16 +1,23 @@
-import { jsx as e, Fragment as h, jsxs as n } from "react/jsx-runtime";
-import f from "@dotss/ui/core/useTheme";
+import { jsx as e, Fragment as f, jsxs as n } from "react/jsx-runtime";
+import b from "@dotss/ui/core/useTheme";
 import c from "@dotss/ui/Flexbox";
 import l from "@dotss/ui/Typography";
-import b from "../../../../shared/components/Carousel/Carousel.mjs";
-import C from "../../../../shared/components/Carousel/CarouselSlide/CarouselSlide.mjs";
-import S from "../../../../shared/components/Image/Image.mjs";
+import C from "../../../../shared/components/Carousel/Carousel.mjs";
+import S from "../../../../shared/components/Carousel/CarouselSlide/CarouselSlide.mjs";
+import x from "../../../../shared/components/Image/Image.mjs";
 import "@dotss/ui";
-function D({ id: d, title: m, banners: p, onClickBanner: r, ...s }) {
-  const { spacing: i } = f(), u = (o) => (t) => {
+function I({
+  id: d,
+  title: m,
+  banners: p,
+  onClickBanner: r,
+  imageProps: s,
+  ...u
+}) {
+  const { spacing: i } = b(), g = (o) => (t) => {
     r && typeof r == "function" && (t.stopPropagation(), t.preventDefault(), r(o, t));
   };
-  return /* @__PURE__ */ e(h, { children: /* @__PURE__ */ n(c, { flexDirection: "column", inlineCSS: { width: "100%" }, ...s, children: [
+  return /* @__PURE__ */ e(f, { children: /* @__PURE__ */ n(c, { flexDirection: "column", inlineCSS: { width: "100%" }, ...u, children: [
     /* @__PURE__ */ e(
       l,
       {
@@ -24,7 +31,7 @@ function D({ id: d, title: m, banners: p, onClickBanner: r, ...s }) {
         children: m
       }
     ),
-    /* @__PURE__ */ e(b, { rowCount: 2, step: 1, spacing: 5, children: p.map(({ id: o, title: t, url: a, image: g }) => /* @__PURE__ */ e(C, { children: /* @__PURE__ */ n(
+    /* @__PURE__ */ e(C, { rowCount: 2, step: 1, spacing: 5, children: p.map(({ id: o, title: t, url: a, image: h }) => /* @__PURE__ */ e(S, { children: /* @__PURE__ */ n(
       c,
       {
         tag: "a",
@@ -32,13 +39,13 @@ function D({ id: d, title: m, banners: p, onClickBanner: r, ...s }) {
         alignItems: "center",
         gap: 4,
         draggable: !1,
-        onClick: u(a),
+        onClick: g(a),
         inlineCSS: { width: 264 },
         children: [
           /* @__PURE__ */ e(
-            S,
+            x,
             {
-              src: g || "",
+              src: h || "",
               width: 140,
               height: 98,
               alt: `${t} 이미지`,
@@ -47,7 +54,8 @@ function D({ id: d, title: m, banners: p, onClickBanner: r, ...s }) {
               borderRadius: 12,
               enableFallback: !0,
               enableErrorFallback: !0,
-              style: { objectFit: "cover" }
+              style: { objectFit: "cover" },
+              ...s
             }
           ),
           /* @__PURE__ */ e(l, { tag: "p", variant: "b2M", lineClamp: 2, children: t })
@@ -57,5 +65,5 @@ function D({ id: d, title: m, banners: p, onClickBanner: r, ...s }) {
   ] }) });
 }
 export {
-  D as default
+  I as default
 };

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

@@ -1,5 +1,6 @@
 import { ReactNode, SyntheticEvent } from 'react';
 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: string;
@@ -10,6 +11,7 @@ export interface Carousel2AccountProps extends Omit<FlexboxProps, 'title'> {
     }>;
     onClickBanner?: (url: string, e: SyntheticEvent) => void;
     bannerWidth?: number;
+    imageProps?: Partial<ImageProps>;
 }
-declare function Carousel2Account({ id, title, banners, onClickBanner, ...props }: Carousel2AccountProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Carousel2Account({ id, title, banners, onClickBanner, imageProps, ...props }: Carousel2AccountProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default Carousel2Account;

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

@@ -1,16 +1,23 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import f from "@dotss/ui/core/useTheme";
+import b from "@dotss/ui/core/useTheme";
 import a from "@dotss/ui/Flexbox";
 import l from "@dotss/ui/Typography";
-import b from "../../../../shared/components/Carousel/Carousel.mjs";
-import C from "../../../../shared/components/Carousel/CarouselSlide/CarouselSlide.mjs";
-import x from "../../../../shared/components/Image/Image.mjs";
+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 $({ id: p, title: d, banners: m, onClickBanner: r, ...s }) {
-  const { spacing: i } = f(), u = (o) => (t) => {
+function k({
+  id: p,
+  title: d,
+  banners: m,
+  onClickBanner: r,
+  imageProps: s,
+  ...u
+}) {
+  const { spacing: i } = b(), g = (o) => (t) => {
     r && typeof r == "function" && (t.stopPropagation(), t.preventDefault(), r(o, t));
   };
-  return /* @__PURE__ */ n(a, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...s, children: [
+  return /* @__PURE__ */ n(a, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...u, children: [
     /* @__PURE__ */ e(
       l,
       {
@@ -24,7 +31,7 @@ function $({ id: p, title: d, banners: m, onClickBanner: r, ...s }) {
         children: d
       }
     ),
-    /* @__PURE__ */ e(b, { rowCount: 1, step: 1, spacing: 3, children: m.map(({ id: o, title: t, subtitle: g, url: c, image: h }) => /* @__PURE__ */ e(C, { children: /* @__PURE__ */ n(
+    /* @__PURE__ */ e(C, { rowCount: 1, step: 1, spacing: 3, children: m.map(({ id: o, title: t, subtitle: h, url: c, image: f }) => /* @__PURE__ */ e(x, { children: /* @__PURE__ */ n(
       a,
       {
         tag: "a",
@@ -32,13 +39,13 @@ function $({ id: p, title: d, banners: m, onClickBanner: r, ...s }) {
         flexDirection: "column",
         gap: 3,
         draggable: !1,
-        onClick: u(c),
+        onClick: g(c),
         inlineCSS: { width: 240 },
         children: [
           /* @__PURE__ */ e(
-            x,
+            S,
             {
-              src: h || "",
+              src: f || "",
               width: 240,
               height: 168,
               alt: `${t} 이미지`,
@@ -47,12 +54,13 @@ function $({ id: p, title: d, banners: m, onClickBanner: r, ...s }) {
               borderRadius: 12,
               enableFallback: !0,
               enableErrorFallback: !0,
-              style: { objectFit: "cover" }
+              style: { objectFit: "cover" },
+              ...s
             }
           ),
           /* @__PURE__ */ n(a, { flexDirection: "column", gap: 1, children: [
             /* @__PURE__ */ e(l, { tag: "p", variant: "h4B", lineClamp: 1, children: t }),
-            /* @__PURE__ */ e(l, { tag: "p", variant: "b4R", lineClamp: 1, color: "grey.70", children: g })
+            /* @__PURE__ */ e(l, { tag: "p", variant: "b4R", lineClamp: 1, color: "grey.70", children: h })
           ] })
         ]
       }
@@ -60,5 +68,5 @@ function $({ id: p, title: d, banners: m, onClickBanner: r, ...s }) {
   ] });
 }
 export {
-  $ as default
+  k as default
 };

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

@@ -1,5 +1,6 @@
 import { ReactNode, SyntheticEvent } from 'react';
 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: string;
@@ -8,6 +9,7 @@ export interface TextAccountProps extends Omit<FlexboxProps, 'title'> {
         image?: string;
     }>;
     onClickBanner?: (url: string, e: SyntheticEvent) => void;
+    imageProps?: Partial<ImageProps>;
 }
-declare function TextAccount({ id, title, banners, onClickBanner, ...props }: TextAccountProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TextAccount({ id, title, banners, onClickBanner, imageProps, ...props }: TextAccountProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default TextAccount;