@dotss/tictoccroc 0.0.17 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  import { ReactNode, SyntheticEvent } from 'react';
2
- import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
3
2
  import { ImageProps } from '../../../../shared/components/Image';
3
+ import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
4
4
  import { BannerProps } from '..';
5
5
  export interface Carousel1AccountProps extends Omit<FlexboxProps, 'title'> {
6
6
  id: string;
@@ -1,54 +1,56 @@
1
- import { jsx as e, Fragment as f, jsxs as n } from "react/jsx-runtime";
1
+ import { jsx as r, Fragment as f, jsxs as n } from "react/jsx-runtime";
2
2
  import b from "@dotss/ui/core/useTheme";
3
- import c from "@dotss/ui/Flexbox";
4
- import l from "@dotss/ui/Typography";
3
+ import l from "@dotss/ui/Flexbox";
4
+ import c from "@dotss/ui/Typography";
5
5
  import C from "../../../../shared/components/Carousel/Carousel.mjs";
6
6
  import S from "../../../../shared/components/Carousel/CarouselSlide/CarouselSlide.mjs";
7
- import x from "../../../../shared/components/Image/Image.mjs";
7
+ import w from "../../../../shared/components/Image/Image.mjs";
8
8
  import "@dotss/ui";
9
- function I({
10
- id: d,
11
- title: m,
12
- banners: p,
13
- onClickBanner: r,
9
+ function D({
10
+ id: p,
11
+ title: d,
12
+ banners: m,
13
+ onClickBanner: t,
14
14
  imageProps: s,
15
- ...u
15
+ ...h
16
16
  }) {
17
- const { spacing: i } = b(), g = (o) => (t) => {
18
- r && typeof r == "function" && (t.stopPropagation(), t.preventDefault(), r(o, t));
17
+ const { spacing: a } = b(), u = (i) => (e) => {
18
+ t && typeof t == "function" && (e.stopPropagation(), e.preventDefault(), t(i, e));
19
19
  };
20
- return /* @__PURE__ */ e(f, { children: /* @__PURE__ */ n(c, { flexDirection: "column", inlineCSS: { width: "100%" }, ...u, children: [
21
- /* @__PURE__ */ e(
22
- l,
20
+ return /* @__PURE__ */ r(f, { children: /* @__PURE__ */ n(l, { flexDirection: "column", inlineCSS: { width: "100%" }, ...h, children: [
21
+ /* @__PURE__ */ r(
22
+ c,
23
23
  {
24
- id: `banner-account-carousel1-${d}`,
24
+ id: `banner-account-carousel1-${p}`,
25
25
  variant: "h2B",
26
26
  inlineCSS: {
27
- paddingLeft: i.content(4),
28
- paddingRight: i.content(4),
29
- marginBottom: i.content(3)
27
+ whiteSpace: "pre-wrap",
28
+ wordBreak: "keep-all",
29
+ paddingLeft: a.content(4),
30
+ paddingRight: a.content(4),
31
+ marginBottom: a.content(3)
30
32
  },
31
- children: m
33
+ children: d
32
34
  }
33
35
  ),
34
- /* @__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(
35
- c,
36
+ /* @__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(
37
+ l,
36
38
  {
37
39
  tag: "a",
38
- href: a,
40
+ href: o,
39
41
  alignItems: "center",
40
42
  gap: 4,
41
43
  draggable: !1,
42
- onClick: g(a),
44
+ onClick: u(o),
43
45
  inlineCSS: { width: 264 },
44
46
  children: [
45
- /* @__PURE__ */ e(
46
- x,
47
+ /* @__PURE__ */ r(
48
+ w,
47
49
  {
48
- src: h || "",
50
+ src: g || "",
49
51
  width: 140,
50
52
  height: 98,
51
- alt: `${t} 이미지`,
53
+ alt: `${e} 이미지`,
52
54
  "aria-hidden": !0,
53
55
  draggable: !1,
54
56
  borderRadius: 12,
@@ -58,12 +60,12 @@ function I({
58
60
  ...s
59
61
  }
60
62
  ),
61
- /* @__PURE__ */ e(l, { tag: "p", variant: "b2M", lineClamp: 2, children: t })
63
+ /* @__PURE__ */ r(c, { tag: "p", variant: "b2M", lineClamp: 2, children: e })
62
64
  ]
63
65
  }
64
- ) }, `tictoccroc-carousel1-account-${o}`)) })
66
+ ) }, `tictoccroc-carousel1-account-${i}`)) })
65
67
  ] }) });
66
68
  }
67
69
  export {
68
- I as default
70
+ D as default
69
71
  };
@@ -1,6 +1,6 @@
1
1
  import { ReactNode, SyntheticEvent } from 'react';
2
- import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
3
2
  import { ImageProps } from '../../../../shared/components/Image';
3
+ import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
4
4
  import { BannerProps } from '..';
5
5
  export interface Carousel2AccountProps extends Omit<FlexboxProps, 'title'> {
6
6
  id: string;
@@ -1,12 +1,12 @@
1
- import { jsxs as n, jsx as e } from "react/jsx-runtime";
1
+ import { jsxs as a, jsx as t } from "react/jsx-runtime";
2
2
  import b from "@dotss/ui/core/useTheme";
3
- import a from "@dotss/ui/Flexbox";
3
+ import n from "@dotss/ui/Flexbox";
4
4
  import l from "@dotss/ui/Typography";
5
5
  import C from "../../../../shared/components/Carousel/Carousel.mjs";
6
6
  import x from "../../../../shared/components/Carousel/CarouselSlide/CarouselSlide.mjs";
7
7
  import S from "../../../../shared/components/Image/Image.mjs";
8
8
  import "@dotss/ui";
9
- function k({
9
+ function R({
10
10
  id: p,
11
11
  title: d,
12
12
  banners: m,
@@ -14,16 +14,18 @@ function k({
14
14
  imageProps: s,
15
15
  ...u
16
16
  }) {
17
- const { spacing: i } = b(), g = (o) => (t) => {
18
- r && typeof r == "function" && (t.stopPropagation(), t.preventDefault(), r(o, t));
17
+ const { spacing: i } = b(), h = (o) => (e) => {
18
+ r && typeof r == "function" && (e.stopPropagation(), e.preventDefault(), r(o, e));
19
19
  };
20
- return /* @__PURE__ */ n(a, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...u, children: [
21
- /* @__PURE__ */ e(
20
+ return /* @__PURE__ */ a(n, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...u, children: [
21
+ /* @__PURE__ */ t(
22
22
  l,
23
23
  {
24
24
  id: `banner-account-carousel2-${p}`,
25
25
  variant: "h2B",
26
26
  inlineCSS: {
27
+ whiteSpace: "pre-wrap",
28
+ wordBreak: "keep-all",
27
29
  paddingLeft: i.content(4),
28
30
  paddingRight: i.content(4),
29
31
  marginBottom: i.content(4)
@@ -31,24 +33,24 @@ function k({
31
33
  children: d
32
34
  }
33
35
  ),
34
- /* @__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(
35
- a,
36
+ /* @__PURE__ */ t(C, { rowCount: 1, step: 1, spacing: 3, children: m.map(({ id: o, title: e, subtitle: g, url: c, image: f }) => /* @__PURE__ */ t(x, { children: /* @__PURE__ */ a(
37
+ n,
36
38
  {
37
39
  tag: "a",
38
40
  href: c,
39
41
  flexDirection: "column",
40
42
  gap: 3,
41
43
  draggable: !1,
42
- onClick: g(c),
44
+ onClick: h(c),
43
45
  inlineCSS: { width: 240 },
44
46
  children: [
45
- /* @__PURE__ */ e(
47
+ /* @__PURE__ */ t(
46
48
  S,
47
49
  {
48
50
  src: f || "",
49
51
  width: 240,
50
52
  height: 168,
51
- alt: `${t} 이미지`,
53
+ alt: `${e} 이미지`,
52
54
  "aria-hidden": !0,
53
55
  draggable: !1,
54
56
  borderRadius: 12,
@@ -58,9 +60,9 @@ function k({
58
60
  ...s
59
61
  }
60
62
  ),
61
- /* @__PURE__ */ n(a, { flexDirection: "column", gap: 1, children: [
62
- /* @__PURE__ */ e(l, { tag: "p", variant: "h4B", lineClamp: 1, children: t }),
63
- /* @__PURE__ */ e(l, { tag: "p", variant: "b4R", lineClamp: 1, color: "grey.70", children: h })
63
+ /* @__PURE__ */ a(n, { flexDirection: "column", gap: 1, children: [
64
+ /* @__PURE__ */ t(l, { tag: "p", variant: "h4B", lineClamp: 1, children: e }),
65
+ /* @__PURE__ */ t(l, { tag: "p", variant: "b4R", lineClamp: 1, color: "grey.70", children: g })
64
66
  ] })
65
67
  ]
66
68
  }
@@ -68,5 +70,5 @@ function k({
68
70
  ] });
69
71
  }
70
72
  export {
71
- k as default
73
+ R as default
72
74
  };
@@ -1,6 +1,6 @@
1
1
  import { ReactNode, SyntheticEvent } from 'react';
2
- import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
3
2
  import { ImageProps } from '../../../../shared/components/Image';
3
+ import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
4
4
  import { BannerProps } from '..';
5
5
  export interface TextAccountProps extends Omit<FlexboxProps, 'title'> {
6
6
  id: string;
@@ -1,45 +1,47 @@
1
- import { jsxs as m, jsx as e } from "react/jsx-runtime";
2
- import S from "@dotss/ui/core/useTheme";
1
+ import { jsxs as h, jsx as e } from "react/jsx-runtime";
2
+ import b from "@dotss/ui/core/useTheme";
3
3
  import i from "@dotss/ui/Flexbox";
4
4
  import { useCheckHoverPossible as x } from "@dotss/ui/hooks";
5
- import C from "@dotss/ui/Icon";
5
+ import w from "@dotss/ui/Icon";
6
6
  import d from "@dotss/ui/Typography";
7
- import v from "../../../../shared/components/Image/Image.mjs";
7
+ import C from "../../../../shared/components/Image/Image.mjs";
8
8
  import "@dotss/ui";
9
9
  function P({
10
- id: a,
11
- title: p,
10
+ id: l,
11
+ title: m,
12
12
  banners: s,
13
13
  onClickBanner: n,
14
14
  imageProps: g,
15
15
  ...f
16
16
  }) {
17
- const { spacing: o, palette: c } = S(), { isHoverPossible: u } = x(), b = (r) => (t) => {
18
- n && typeof n == "function" && (t.stopPropagation(), t.preventDefault(), n(r, t));
17
+ const { spacing: r, palette: c } = b(), { isHoverPossible: u } = x(), S = (o) => (t) => {
18
+ n && typeof n == "function" && (t.stopPropagation(), t.preventDefault(), n(o, t));
19
19
  };
20
- return /* @__PURE__ */ m(i, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...f, children: [
20
+ return /* @__PURE__ */ h(i, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...f, children: [
21
21
  /* @__PURE__ */ e(
22
22
  d,
23
23
  {
24
- id: `banner-account-text-${a}`,
24
+ id: `banner-account-text-${l}`,
25
25
  variant: "h2B",
26
26
  inlineCSS: {
27
- paddingLeft: o.content(4),
28
- paddingRight: o.content(4),
29
- marginBottom: o.content(2)
27
+ whiteSpace: "pre-wrap",
28
+ wordBreak: "keep-all",
29
+ paddingLeft: r.content(4),
30
+ paddingRight: r.content(4),
31
+ marginBottom: r.content(2)
30
32
  },
31
- children: p
33
+ children: m
32
34
  }
33
35
  ),
34
- /* @__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(
36
+ /* @__PURE__ */ e(i, { tag: "ul", flexDirection: "column", "aria-labelledby": `banner-account-text-${l}`, children: s.map(({ id: o, title: t, url: a, image: p }) => /* @__PURE__ */ e(i, { tag: "li", alignItems: "center", children: /* @__PURE__ */ h(
35
37
  i,
36
38
  {
37
39
  tag: "a",
38
- href: l,
40
+ href: a,
39
41
  p: 4,
40
42
  gap: 3,
41
43
  alignItems: "center",
42
- onClick: b(l),
44
+ onClick: S(a),
43
45
  inlineCSS: {
44
46
  width: "100%",
45
47
  "&:focus-within": {
@@ -52,7 +54,7 @@ function P({
52
54
  } : {}
53
55
  },
54
56
  children: [
55
- h && /* @__PURE__ */ e(
57
+ p && /* @__PURE__ */ e(
56
58
  i,
57
59
  {
58
60
  inlineCSS: {
@@ -61,11 +63,11 @@ function P({
61
63
  overflow: "hidden"
62
64
  },
63
65
  children: /* @__PURE__ */ e(
64
- v,
66
+ C,
65
67
  {
66
68
  width: 100,
67
69
  height: 78,
68
- src: h,
70
+ src: p,
69
71
  alt: `${t} 이미지`,
70
72
  enableFallback: !0,
71
73
  enableErrorFallback: !0,
@@ -79,7 +81,7 @@ function P({
79
81
  {
80
82
  tag: "p",
81
83
  variant: "b2R",
82
- lineClamp: l ? 2 : 1,
84
+ lineClamp: a ? 2 : 1,
83
85
  inlineCSS: {
84
86
  flexGrow: 1
85
87
  },
@@ -92,12 +94,12 @@ function P({
92
94
  inlineCSS: {
93
95
  whiteSpace: "nowrap"
94
96
  },
95
- children: /* @__PURE__ */ e(C, { name: "ChevronRightLine", size: "xSmall", color: "grey.50" })
97
+ children: /* @__PURE__ */ e(w, { name: "ChevronRightLine", size: "xSmall", color: "grey.50" })
96
98
  }
97
99
  )
98
100
  ]
99
101
  }
100
- ) }, `tictoccroc-story-${r}`)) })
102
+ ) }, `tictoccroc-story-${o}`)) })
101
103
  ] });
102
104
  }
103
105
  export {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dotss/tictoccroc",
3
3
  "type": "module",
4
- "version": "0.0.17",
4
+ "version": "0.0.18",
5
5
  "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
6
6
  "main": "./dist/index.mjs",
7
7
  "module": "./dist/index.mjs",