@dotss/tictoccroc 0.0.30 → 0.0.31

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/package.json

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