@dotss/tictoccroc 0.0.12 → 0.0.13

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

@@ -8,5 +8,5 @@ export interface BannerAccountProps extends Omit<FlexboxProps, 'title'> {
     }>;
     onClickBanner?: (url: string, e: SyntheticEvent) => void;
 }
-declare function BannerAccount({ id, banners, onClickBanner }: BannerAccountProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function BannerAccount({ id, banners, onClickBanner, ...props }: BannerAccountProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default BannerAccount;

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

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

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

@@ -20,7 +20,7 @@ function s() {
               height: 30,
               inlineCSS: {
                 width: "50%",
-                marginBottom: t.content(2),
+                marginBottom: t.content(3),
                 marginLeft: t.content(4)
               }
             }

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

@@ -1,38 +1,42 @@
-import { jsx as r, Fragment as h, jsxs as n } from "react/jsx-runtime";
+import { jsx as e, Fragment as h, jsxs as n } from "react/jsx-runtime";
 import f from "@dotss/ui/core/useTheme";
-import a 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 x from "../../../../shared/components/Image/Image.mjs";
-function D({ id: l, title: p, banners: d, onClickBanner: e, ...m }) {
-  const { spacing: i } = f(), s = (o) => (t) => {
-    e && typeof e == "function" && (t.stopPropagation(), t.preventDefault(), e(o, t));
+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 "@dotss/ui";
+function D({ id: d, title: m, banners: p, onClickBanner: r, ...s }) {
+  const { spacing: i } = f(), u = (o) => (t) => {
+    r && typeof r == "function" && (t.stopPropagation(), t.preventDefault(), r(o, t));
   };
-  return /* @__PURE__ */ r(h, { children: /* @__PURE__ */ n(a, { tag: "section", flexDirection: "column", ...m, children: [
-    /* @__PURE__ */ r(
-      c,
+  return /* @__PURE__ */ e(h, { children: /* @__PURE__ */ n(c, { flexDirection: "column", inlineCSS: { width: "100%" }, ...s, children: [
+    /* @__PURE__ */ e(
+      l,
       {
-        id: `banner-account-carousel1-${l}`,
+        id: `banner-account-carousel1-${d}`,
         variant: "h2B",
         inlineCSS: {
           paddingLeft: i.content(4),
           paddingRight: i.content(4),
-          marginBottom: i.content(2)
+          marginBottom: i.content(3)
         },
-        children: p
+        children: m
       }
     ),
-    /* @__PURE__ */ r(C, { rowCount: 2, step: 1, spacing: 5, children: d.map(({ id: o, title: t, url: u, image: g }) => /* @__PURE__ */ r(S, { children: /* @__PURE__ */ n(
-      a,
+    /* @__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(
+      c,
       {
+        tag: "a",
+        href: a,
         alignItems: "center",
         gap: 4,
-        onClick: s(u),
+        draggable: !1,
+        onClick: u(a),
         inlineCSS: { width: 264 },
         children: [
-          /* @__PURE__ */ r(
-            x,
+          /* @__PURE__ */ e(
+            S,
             {
               src: g || "",
               width: 140,
@@ -40,15 +44,13 @@ function D({ id: l, title: p, banners: d, onClickBanner: e, ...m }) {
               alt: `${t} 이미지`,
               "aria-hidden": !0,
               draggable: !1,
-              wrapperProps: {
-                inlineCSS: {
-                  borderRadius: 12
-                }
-              },
+              borderRadius: 12,
+              enableFallback: !0,
+              enableErrorFallback: !0,
               style: { objectFit: "cover" }
             }
           ),
-          /* @__PURE__ */ r(c, { tag: "p", variant: "b2M", lineClamp: 2, children: t })
+          /* @__PURE__ */ e(l, { tag: "p", variant: "b2M", lineClamp: 2, children: t })
         ]
       }
     ) }, `tictoccroc-carousel1-account-${o}`)) })

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

@@ -20,7 +20,7 @@ function u() {
               height: 30,
               inlineCSS: {
                 width: "50%",
-                marginBottom: e.content(2),
+                marginBottom: e.content(4),
                 marginLeft: e.content(4)
               }
             }

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

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

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

@@ -1,19 +1,20 @@
-import { jsxs as h, jsx as e } from "react/jsx-runtime";
-import S from "@dotss/ui/core/useTheme";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import b from "@dotss/ui/core/useTheme";
 import i from "@dotss/ui/Flexbox";
-import { useCheckHoverPossible as x } from "@dotss/ui/hooks";
-import C from "@dotss/ui/Icon";
-import m from "@dotss/ui/Typography";
-import b from "../../../../shared/components/Image/Image.mjs";
-function D({ id: c, title: p, banners: s, onClickBanner: n, ...g }) {
-  const { spacing: o, palette: l } = S(), { isHoverPossible: f } = x(), u = (r) => (t) => {
+import { useCheckHoverPossible as S } from "@dotss/ui/hooks";
+import x from "@dotss/ui/Icon";
+import d from "@dotss/ui/Typography";
+import C from "../../../../shared/components/Image/Image.mjs";
+import "@dotss/ui";
+function F({ id: a, title: p, banners: s, onClickBanner: n, ...g }) {
+  const { spacing: o, palette: c } = b(), { isHoverPossible: f } = S(), u = (r) => (t) => {
     n && typeof n == "function" && (t.stopPropagation(), t.preventDefault(), n(r, t));
   };
-  return /* @__PURE__ */ h(i, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...g, children: [
+  return /* @__PURE__ */ m(i, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...g, children: [
     /* @__PURE__ */ e(
-      m,
+      d,
       {
-        id: `banner-account-text-${c}`,
+        id: `banner-account-text-${a}`,
         variant: "h2B",
         inlineCSS: {
           paddingLeft: o.content(4),
@@ -23,28 +24,28 @@ function D({ id: c, title: p, banners: s, onClickBanner: n, ...g }) {
         children: p
       }
     ),
-    /* @__PURE__ */ e(i, { tag: "ul", flexDirection: "column", "aria-labelledby": `banner-account-text-${c}`, children: s.map(({ id: r, title: t, url: a, image: d }) => /* @__PURE__ */ e(i, { tag: "li", alignItems: "center", children: /* @__PURE__ */ h(
+    /* @__PURE__ */ e(i, { tag: "ul", flexDirection: "column", "aria-labelledby": `banner-account-text-${a}`, children: s.map(({ id: r, title: t, url: l, image: h }) => /* @__PURE__ */ e(i, { tag: "li", alignItems: "center", children: /* @__PURE__ */ m(
       i,
       {
         tag: "a",
-        href: a,
+        href: l,
         p: 4,
         gap: 3,
         alignItems: "center",
-        onClick: u(a),
+        onClick: u(l),
         inlineCSS: {
           width: "100%",
           "&:focus-within": {
-            backgroundColor: l.grey[10]
+            backgroundColor: c.grey[10]
           },
           ...f ? {
             "&:hover": {
-              backgroundColor: l.grey[10]
+              backgroundColor: c.grey[10]
             }
           } : {}
         },
         children: [
-          d && /* @__PURE__ */ e(
+          h && /* @__PURE__ */ e(
             i,
             {
               inlineCSS: {
@@ -53,24 +54,24 @@ function D({ id: c, title: p, banners: s, onClickBanner: n, ...g }) {
                 overflow: "hidden"
               },
               children: /* @__PURE__ */ e(
-                b,
+                C,
                 {
                   width: 100,
                   height: 78,
-                  src: d,
+                  src: h,
                   alt: `${t} 이미지`,
-                  "aria-hidden": !0,
-                  lazy: !0
+                  enableFallback: !0,
+                  enableErrorFallback: !0
                 }
               )
             }
           ),
           /* @__PURE__ */ e(
-            m,
+            d,
             {
               tag: "p",
               variant: "b2R",
-              lineClamp: a ? 2 : 1,
+              lineClamp: l ? 2 : 1,
               inlineCSS: {
                 flexGrow: 1
               },
@@ -83,7 +84,7 @@ function D({ id: c, title: p, banners: s, onClickBanner: n, ...g }) {
               inlineCSS: {
                 whiteSpace: "nowrap"
               },
-              children: /* @__PURE__ */ e(C, { name: "ChevronRightLine", size: "xSmall", color: "grey.50" })
+              children: /* @__PURE__ */ e(x, { name: "ChevronRightLine", size: "xSmall", color: "grey.50" })
             }
           )
         ]
@@ -92,5 +93,5 @@ function D({ id: c, title: p, banners: s, onClickBanner: n, ...g }) {
   ] });
 }
 export {
-  D as default
+  F as default
 };

package/dist/teacher/profile/components/StatBadgeCollection/StatBadge/StatBadge.mjs

@@ -1,7 +1,8 @@
 import { jsxs as i, jsx as a } from "react/jsx-runtime";
 import { Label as e } from "@dotss/ui";
 import s from "../../../../../shared/components/Image/Image.mjs";
-function h({ type: l, percent: t, ...r }) {
+import "@dotss/ui/core/useTheme";
+function g({ type: l, percent: t, ...r }) {
   return l === "creativeArt" ? /* @__PURE__ */ i(
     e,
     {
@@ -101,5 +102,5 @@ function h({ type: l, percent: t, ...r }) {
   );
 }
 export {
-  h as default
+  g as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dotss/tictoccroc",
   "type": "module",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -43,6 +43,14 @@
       "import": "./dist/teacher/profile/utils/*/index.mjs",
       "types": "./dist/teacher/profile/utils/*/index.d.ts"
     },
+    "./teacher/home/components": {
+      "import": "./dist/teacher/home/components/index.mjs",
+      "types": "./dist/teacher/home/components/index.d.ts"
+    },
+    "./teacher/home/components/*": {
+      "import": "./dist/teacher/home/components/*/index.mjs",
+      "types": "./dist/teacher/home/components/*/index.d.ts"
+    },
     "./shared/components": {
       "import": "./dist/shared/components/index.mjs",
       "types": "./dist/shared/components/index.d.ts"