@dotss/tictoccroc 0.0.13 → 0.0.14

package/dist/shared/components/Image/Image.mjs

@@ -1,69 +1,71 @@
-import { jsxs as g, jsx as d, Fragment as Z } from "react/jsx-runtime";
-import { forwardRef as r, useRef as L, useImperativeHandle as w, useState as h, useEffect as M } from "react";
-import { Flexbox as U, Skeleton as V } from "@dotss/ui";
+import { jsxs as L, jsx as d, Fragment as Y } from "react/jsx-runtime";
+import { forwardRef as Z, useRef as h, useImperativeHandle as w, useState as C, useEffect as R } from "react";
+import { Flexbox as M, Skeleton as U } from "@dotss/ui";
 import F from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
 import b from "../../utils/getImageUrl/getImageUrl.mjs";
-import _ from "./Image.error.mjs";
-const k = 100, ot = r(
+import V from "./Image.error.mjs";
+const k = 100, ot = Z(
   ({
-    src: q,
+    src: _,
     width: n,
     height: o,
-    fit: A = "cover",
-    position: D = "center",
-    alt: C,
-    scale: G = 2,
+    fit: q = "cover",
+    position: A = "center",
+    alt: r,
+    scale: D = 2,
     onLoad: E,
-    onLazyLoad: S,
+    onLazyLoad: g,
     lazy: I = !1,
     borderRadius: l,
-    disabledResizing: J = !1,
+    disabledResizing: G = !1,
     withIntrinsicRatio: x = !1,
     enableFallback: T = !1,
-    enableErrorFallback: H = !0,
+    enableErrorFallback: W = !0,
     renderErrorFallback: c,
     wrapperProps: e = {},
-    onError: W,
-    ...a
-  }, K) => {
-    const u = L(null), $ = L(!1), m = L(null);
-    w(K, () => m.current);
-    const [y, N] = h(!1), [O, v] = h(!1), [f, j] = h(!1), z = b({ src: q, width: n, height: o, fit: A, position: D, scale: G, disabledResizing: J }), B = (t) => {
-      v(!0), j(!1), typeof E == "function" && E(t);
-    }, R = (t) => {
-      j(!0), v(!1), typeof W == "function" && W(t.nativeEvent);
+    onError: H,
+    ...u
+  }, J) => {
+    const a = h(null), $ = h(!1), m = h(null);
+    w(J, () => m.current);
+    const [y, K] = C(!1), [O, v] = C(!1), [f, S] = C(!1), j = b({ src: _, width: n, height: o, fit: q, position: A, scale: D, disabledResizing: G }), z = (t) => {
+      v(!0), S(!1), typeof E == "function" && E(t);
+    }, B = (t) => {
+      S(!0), v(!1), typeof H == "function" && H(t.nativeEvent);
     };
-    return M(() => {
-      if (I && u.current) {
-        const t = u.current, Q = () => {
+    return R(() => {
+      if (I && a.current) {
+        const t = a.current, N = () => {
           if (!t) return !1;
           const i = t.getBoundingClientRect();
           return i.bottom >= 0 && i.top <= (window.innerHeight || document.documentElement.clientHeight) + k;
         }, s = () => {
-          Q() && N(!0);
-        }, X = () => {
+          N() && K(!0);
+        }, Q = () => {
           var i;
           (i = window.appScreenContent) == null || i.addEventListener("scroll", s), window.addEventListener("resize", s), window.addEventListener("orientationchange", s);
-        }, Y = () => {
+        }, X = () => {
           var i;
           (i = window.appScreenContent) == null || i.removeEventListener("scroll", s), window.removeEventListener("resize", s), window.removeEventListener("orientationchange", s);
         };
-        return s(), X(), Y;
+        return s(), Q(), X;
       }
-    }), M(() => {
-      typeof S == "function" && y && !$.current && ($.current = !0, S());
-    }, [S, y]), F(() => {
+    }), R(() => {
+      typeof g == "function" && y && !$.current && ($.current = !0, g());
+    }, [g, y]), F(() => {
       const t = m.current;
-      return t != null && t.complete ? (t.style.transition = "none", t.style.opacity = "1", v(!0)) : t && (t.style.transition = "opacity 0.3s", t.style.opacity = "0", t.onload = () => {
+      return t != null && t.complete ? t.naturalWidth > 0 ? (t.style.transition = "none", t.style.opacity = "1", v(!0)) : (t.style.opacity = "0", S(!0)) : t && (t.style.transition = "opacity 0.3s", t.style.opacity = "0", t.onload = () => {
         t.style.opacity = "1", v(!0), t.onload = null;
+      }, t.onerror = () => {
+        S(!0), t.onerror = null;
       }), () => {
-        t && (t.onload = null);
+        t && (t.onload = null, t.onerror = null);
       };
-    }, [y]), I ? /* @__PURE__ */ g(
-      U,
+    }, [y]), I ? /* @__PURE__ */ L(
+      M,
       {
         ...e,
-        ref: u,
+        ref: a,
         inlineCSS: x ? {
           position: "relative",
           paddingTop: `calc(100% / ${n} * ${o})`,
@@ -82,7 +84,7 @@ const k = 100, ot = r(
         },
         children: [
           T && /* @__PURE__ */ d(
-            V,
+            U,
             {
               width: "100%",
               height: "100%",
@@ -96,19 +98,19 @@ const k = 100, ot = r(
               }
             }
           ),
-          y && /* @__PURE__ */ g(Z, { children: [
+          y && /* @__PURE__ */ L(Y, { children: [
             /* @__PURE__ */ d(
               "img",
               {
                 ref: m,
-                src: z,
-                alt: C,
+                src: j,
+                alt: r,
                 width: n,
                 height: o,
-                onLoad: B,
-                onError: R,
+                onLoad: z,
+                onError: B,
                 "aria-hidden": f,
-                ...a,
+                ...u,
                 style: {
                   position: "absolute",
                   top: 0,
@@ -116,19 +118,19 @@ const k = 100, ot = r(
                   width: "100%",
                   height: "100%",
                   transition: "opacity 0.3s",
-                  ...a.style
+                  ...u.style
                 }
               }
             ),
-            H && ((c == null ? void 0 : c(f)) || /* @__PURE__ */ d(_, { style: { opacity: f ? 1 : 0, transition: "opacity 0.3s" } }))
+            W && ((c == null ? void 0 : c(f)) || /* @__PURE__ */ d(V, { style: { opacity: f ? 1 : 0, transition: "opacity 0.3s" } }))
           ] })
         ]
       }
-    ) : /* @__PURE__ */ g(
-      U,
+    ) : /* @__PURE__ */ L(
+      M,
       {
         ...e,
-        ref: u,
+        ref: a,
         inlineCSS: x ? {
           position: "relative",
           paddingTop: `calc(100% / ${n} * ${o})`,
@@ -148,7 +150,7 @@ const k = 100, ot = r(
         },
         children: [
           T && /* @__PURE__ */ d(
-            V,
+            U,
             {
               width: "100%",
               height: "100%",
@@ -166,14 +168,14 @@ const k = 100, ot = r(
             "img",
             {
               ref: m,
-              src: z,
-              alt: C,
+              src: j,
+              alt: r,
               width: n,
               height: o,
-              onLoad: B,
-              onError: R,
+              onLoad: z,
+              onError: B,
               "aria-hidden": f,
-              ...a,
+              ...u,
               style: {
                 position: "absolute",
                 top: 0,
@@ -181,11 +183,11 @@ const k = 100, ot = r(
                 width: "100%",
                 height: "100%",
                 transition: "opacity 0.3s",
-                ...a.style
+                ...u.style
               }
             }
           ),
-          H && ((c == null ? void 0 : c(f)) || /* @__PURE__ */ d(_, { style: { opacity: f ? 1 : 0, transition: "opacity 0.3s" } }))
+          W && ((c == null ? void 0 : c(f)) || /* @__PURE__ */ d(V, { style: { opacity: f ? 1 : 0, transition: "opacity 0.3s" } }))
         ]
       }
     );

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;

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

@@ -1,16 +1,23 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import b from "@dotss/ui/core/useTheme";
+import S from "@dotss/ui/core/useTheme";
 import i from "@dotss/ui/Flexbox";
-import { useCheckHoverPossible as S } from "@dotss/ui/hooks";
-import x from "@dotss/ui/Icon";
+import { useCheckHoverPossible as x } from "@dotss/ui/hooks";
+import C from "@dotss/ui/Icon";
 import d from "@dotss/ui/Typography";
-import C from "../../../../shared/components/Image/Image.mjs";
+import v 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) => {
+function P({
+  id: a,
+  title: p,
+  banners: s,
+  onClickBanner: n,
+  imageProps: g,
+  ...f
+}) {
+  const { spacing: o, palette: c } = S(), { isHoverPossible: u } = x(), b = (r) => (t) => {
     n && typeof n == "function" && (t.stopPropagation(), t.preventDefault(), n(r, t));
   };
-  return /* @__PURE__ */ m(i, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...g, children: [
+  return /* @__PURE__ */ m(i, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...f, children: [
     /* @__PURE__ */ e(
       d,
       {
@@ -32,13 +39,13 @@ function F({ id: a, title: p, banners: s, onClickBanner: n, ...g }) {
         p: 4,
         gap: 3,
         alignItems: "center",
-        onClick: u(l),
+        onClick: b(l),
         inlineCSS: {
           width: "100%",
           "&:focus-within": {
             backgroundColor: c.grey[10]
           },
-          ...f ? {
+          ...u ? {
             "&:hover": {
               backgroundColor: c.grey[10]
             }
@@ -54,14 +61,15 @@ function F({ id: a, title: p, banners: s, onClickBanner: n, ...g }) {
                 overflow: "hidden"
               },
               children: /* @__PURE__ */ e(
-                C,
+                v,
                 {
                   width: 100,
                   height: 78,
                   src: h,
                   alt: `${t} 이미지`,
                   enableFallback: !0,
-                  enableErrorFallback: !0
+                  enableErrorFallback: !0,
+                  ...g
                 }
               )
             }
@@ -84,7 +92,7 @@ function F({ id: a, title: p, banners: s, onClickBanner: n, ...g }) {
               inlineCSS: {
                 whiteSpace: "nowrap"
               },
-              children: /* @__PURE__ */ e(x, { name: "ChevronRightLine", size: "xSmall", color: "grey.50" })
+              children: /* @__PURE__ */ e(C, { name: "ChevronRightLine", size: "xSmall", color: "grey.50" })
             }
           )
         ]
@@ -93,5 +101,5 @@ function F({ id: a, title: p, banners: s, onClickBanner: n, ...g }) {
   ] });
 }
 export {
-  F as default
+  P as default
 };

package/package.json

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