@zenpatient-org/healthspan-marketing-ui 0.2.63 → 0.2.64
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 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),j=require("../../utils/cn/cn.cjs.js"),l=require("./constants.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),j=require("../../utils/cn/cn.cjs.js"),l=require("./constants.cjs.js"),i=require("../../src/modules/ImageWithText/imageWithText.module.css"),b=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),n=require("../../components/Typography/Typography.cjs.js"),m=require("./components/ButtonWithColors/ButtonWithColors.cjs.js"),T=({image:g,text:t,title:s,view:e,colorScheme:u,textColor:p,mobileTextColor:x,titleColor:c,mobileTitleColor:o,titleHighlightColor:r,mobileTitleHighlightColor:h,mobileImage:y,button:d})=>a.jsx("section",{className:i.root,"data-scheme":u,children:a.jsxs("div",{className:i.container,"data-view":e,children:[a.jsxs("div",{className:i.imageContainer,children:[a.jsx("img",{src:g,alt:"background image",className:i.image,"data-color":p}),a.jsx("img",{src:y||g,alt:"mobile background image",className:i.mobileImage})]}),a.jsxs("div",{className:j.cn(i.content,{[i.textAlignLeft]:e==="plain"||e==="plain_with_title",[i.textAlignRight]:e==="complex"}),"data-view":e,"data-text-color":p,"data-mobile-text-color":x,"data-title-color":c,"data-mobile-title-color":o,"data-title-highlight-color":r,"data-mobile-title-highlight-color":h,children:[e==="complex"&&a.jsxs("div",{className:i.richTextContainer,style:{"--highlight-color-custom":l.COLORS[c||"white"],"--highlight-emphasize-custom":l.COLORS[r||"white"],"--highlight-color-custom-mobile":l.COLORS[o||"white"],"--highlight-emphasize-custom-mobile":l.COLORS[h||"white"]},children:[s&&a.jsx(b.HighlightedTitle,{colorScheme:c||r||o||h?"custom":"dark",className:i.richTextTitle,title:s,as:"div",defaultVariant:"displayXs",mobileVariant:"headingXl"}),t&&a.jsx(n.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",children:t}),a.jsx(m.ButtonWithColors,{...d})]}),e==="plain"&&t&&a.jsxs("div",{className:i.textContainer,children:[a.jsx(n.Typography,{as:"p",defaultVariant:"headingXl",mobileVariant:"headingXs",className:i.textOfPlain,children:t}),a.jsx(m.ButtonWithColors,{...d})]}),e==="plain_with_title"&&a.jsxs("div",{className:i.plainWithTitleContainer,children:[s&&a.jsx(n.Typography,{as:"h3",defaultVariant:"displaySm",mobileVariant:"headingXl",className:i.titleOfPlainWithTitle,children:s}),t&&a.jsx(n.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodyMd",className:i.textOfPlainWithTitle,children:t}),a.jsx(m.ButtonWithColors,{...d})]})]})]})});exports.ImageWithText=T;
|
|
@@ -1,94 +1,103 @@
|
|
|
1
1
|
import { jsx as i, jsxs as l } from "react/jsx-runtime";
|
|
2
2
|
import { cn as y } from "../../utils/cn/cn.es.js";
|
|
3
|
-
import { COLORS as
|
|
3
|
+
import { COLORS as c } from "./constants.es.js";
|
|
4
4
|
import a from "../../modules/ImageWithText/imageWithText.module.css";
|
|
5
|
-
import { HighlightedTitle as
|
|
6
|
-
import { Typography as
|
|
5
|
+
import { HighlightedTitle as V } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
|
|
6
|
+
import { Typography as r } from "../../components/Typography/Typography.es.js";
|
|
7
7
|
import { ButtonWithColors as p } from "./components/ButtonWithColors/ButtonWithColors.es.js";
|
|
8
8
|
const k = ({
|
|
9
9
|
image: g,
|
|
10
|
-
text:
|
|
11
|
-
title:
|
|
12
|
-
view:
|
|
10
|
+
text: t,
|
|
11
|
+
title: m,
|
|
12
|
+
view: e,
|
|
13
13
|
colorScheme: N,
|
|
14
14
|
textColor: f,
|
|
15
|
-
mobileTextColor:
|
|
16
|
-
titleColor:
|
|
15
|
+
mobileTextColor: b,
|
|
16
|
+
titleColor: s,
|
|
17
17
|
mobileTitleColor: n,
|
|
18
18
|
titleHighlightColor: d,
|
|
19
19
|
mobileTitleHighlightColor: o,
|
|
20
|
-
mobileImage:
|
|
20
|
+
mobileImage: u,
|
|
21
21
|
button: h
|
|
22
|
-
}) => /* @__PURE__ */ i("section", { className: a.root, "data-scheme": N, children: /* @__PURE__ */ l("div", { className: a.container, "data-view":
|
|
22
|
+
}) => /* @__PURE__ */ i("section", { className: a.root, "data-scheme": N, children: /* @__PURE__ */ l("div", { className: a.container, "data-view": e, children: [
|
|
23
23
|
/* @__PURE__ */ l("div", { className: a.imageContainer, children: [
|
|
24
24
|
/* @__PURE__ */ i("img", { src: g, alt: "background image", className: a.image, "data-color": f }),
|
|
25
|
-
/* @__PURE__ */ i("img", { src:
|
|
25
|
+
/* @__PURE__ */ i("img", { src: u || g, alt: "mobile background image", className: a.mobileImage })
|
|
26
26
|
] }),
|
|
27
27
|
/* @__PURE__ */ l(
|
|
28
28
|
"div",
|
|
29
29
|
{
|
|
30
30
|
className: y(a.content, {
|
|
31
|
-
[a.textAlignLeft]:
|
|
32
|
-
[a.textAlignRight]:
|
|
31
|
+
[a.textAlignLeft]: e === "plain" || e === "plain_with_title",
|
|
32
|
+
[a.textAlignRight]: e === "complex"
|
|
33
33
|
}),
|
|
34
|
-
"data-view":
|
|
34
|
+
"data-view": e,
|
|
35
35
|
"data-text-color": f,
|
|
36
|
-
"data-mobile-text-color":
|
|
37
|
-
"data-title-color":
|
|
36
|
+
"data-mobile-text-color": b,
|
|
37
|
+
"data-title-color": s,
|
|
38
38
|
"data-mobile-title-color": n,
|
|
39
39
|
"data-title-highlight-color": d,
|
|
40
40
|
"data-mobile-title-highlight-color": o,
|
|
41
41
|
children: [
|
|
42
|
-
|
|
42
|
+
e === "complex" && /* @__PURE__ */ l(
|
|
43
43
|
"div",
|
|
44
44
|
{
|
|
45
45
|
className: a.richTextContainer,
|
|
46
46
|
style: {
|
|
47
|
-
"--highlight-color-custom":
|
|
48
|
-
"--highlight-emphasize-custom":
|
|
49
|
-
"--highlight-color-custom-mobile":
|
|
50
|
-
"--highlight-emphasize-custom-mobile":
|
|
47
|
+
"--highlight-color-custom": c[s || "white"],
|
|
48
|
+
"--highlight-emphasize-custom": c[d || "white"],
|
|
49
|
+
"--highlight-color-custom-mobile": c[n || "white"],
|
|
50
|
+
"--highlight-emphasize-custom-mobile": c[o || "white"]
|
|
51
51
|
},
|
|
52
52
|
children: [
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
m && /* @__PURE__ */ i(
|
|
54
|
+
V,
|
|
55
55
|
{
|
|
56
|
-
colorScheme:
|
|
56
|
+
colorScheme: s || d || n || o ? "custom" : "dark",
|
|
57
57
|
className: a.richTextTitle,
|
|
58
|
-
title:
|
|
58
|
+
title: m,
|
|
59
59
|
as: "div",
|
|
60
60
|
defaultVariant: "displayXs",
|
|
61
61
|
mobileVariant: "headingXl"
|
|
62
62
|
}
|
|
63
63
|
),
|
|
64
|
-
|
|
64
|
+
t && /* @__PURE__ */ i(r, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", children: t }),
|
|
65
65
|
/* @__PURE__ */ i(p, { ...h })
|
|
66
66
|
]
|
|
67
67
|
}
|
|
68
68
|
),
|
|
69
|
-
|
|
69
|
+
e === "plain" && t && /* @__PURE__ */ l("div", { className: a.textContainer, children: [
|
|
70
70
|
/* @__PURE__ */ i(
|
|
71
|
-
|
|
71
|
+
r,
|
|
72
72
|
{
|
|
73
73
|
as: "p",
|
|
74
74
|
defaultVariant: "headingXl",
|
|
75
75
|
mobileVariant: "headingXs",
|
|
76
76
|
className: a.textOfPlain,
|
|
77
|
-
children:
|
|
77
|
+
children: t
|
|
78
78
|
}
|
|
79
79
|
),
|
|
80
80
|
/* @__PURE__ */ i(p, { ...h })
|
|
81
81
|
] }),
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
82
|
+
e === "plain_with_title" && /* @__PURE__ */ l("div", { className: a.plainWithTitleContainer, children: [
|
|
83
|
+
m && /* @__PURE__ */ i(
|
|
84
|
+
r,
|
|
85
|
+
{
|
|
86
|
+
as: "h3",
|
|
87
|
+
defaultVariant: "displaySm",
|
|
88
|
+
mobileVariant: "headingXl",
|
|
89
|
+
className: a.titleOfPlainWithTitle,
|
|
90
|
+
children: m
|
|
91
|
+
}
|
|
92
|
+
),
|
|
93
|
+
t && /* @__PURE__ */ i(
|
|
94
|
+
r,
|
|
86
95
|
{
|
|
87
96
|
as: "p",
|
|
88
97
|
defaultVariant: "bodyMd",
|
|
89
98
|
mobileVariant: "bodyMd",
|
|
90
99
|
className: a.textOfPlainWithTitle,
|
|
91
|
-
children:
|
|
100
|
+
children: t
|
|
92
101
|
}
|
|
93
102
|
),
|
|
94
103
|
/* @__PURE__ */ i(p, { ...h })
|