@zenpatient-org/healthspan-marketing-ui 0.2.30 → 0.2.32
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.
- package/dist/modules/Citation/citation.module.css +4 -3
- package/dist/modules/ComparisonV2/ComparisonV2.cjs.js +1 -1
- package/dist/modules/ComparisonV2/ComparisonV2.es.js +99 -83
- package/dist/modules/ComparisonV2/comparisonV2.module.css +50 -17
- package/dist/modules/ComparisonV2/components/ComparisonV2Tooltip/ComparisonV2Tooltip.cjs.js +1 -1
- package/dist/modules/ComparisonV2/components/ComparisonV2Tooltip/ComparisonV2Tooltip.es.js +3 -3
- package/dist/styles/core.css +1 -1
- package/dist/styles/reset.css +1 -0
- package/package.json +4 -1
- package/dist/modules/ComparisonV2/components/ComparisonV2Description/ComparisonV2Description.cjs.js +0 -1
- package/dist/modules/ComparisonV2/components/ComparisonV2Description/ComparisonV2Description.d.ts +0 -4
- package/dist/modules/ComparisonV2/components/ComparisonV2Description/ComparisonV2Description.es.js +0 -22
- package/dist/modules/ComparisonV2/components/ComparisonV2Description/index.d.ts +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.root {
|
|
2
2
|
width: 100%;
|
|
3
|
-
padding:
|
|
3
|
+
padding: 48px 10vw;
|
|
4
4
|
max-width: var(--content-max-width);
|
|
5
5
|
margin: 0 auto;
|
|
6
6
|
}
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
.text {
|
|
9
9
|
width: 100%;
|
|
10
10
|
color: var(--color-text-secondary);
|
|
11
|
+
padding-bottom: 4px;
|
|
11
12
|
}
|
|
12
13
|
|
|
13
14
|
.text sup {
|
|
@@ -17,7 +18,7 @@
|
|
|
17
18
|
}
|
|
18
19
|
|
|
19
20
|
@media (width <= 768px) {
|
|
20
|
-
.
|
|
21
|
-
padding:
|
|
21
|
+
.root {
|
|
22
|
+
padding: 48px 6vw;
|
|
22
23
|
}
|
|
23
24
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),T=require("react"),g=require("../../types/analytics/analytics.cjs.js"),V=require("../../utils/useIsMobile.cjs.js"),f=require("../Comparison/assets/company-logo.svg.cjs.js"),q=require("../Comparison/utils.cjs.js"),e=require("../../src/modules/ComparisonV2/comparisonV2.module.css"),r=require("../../utils/cn/cn.cjs.js"),_=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),c=require("../../components/Typography/Typography.cjs.js"),M=require("./components/ComparisonV2Tooltip/ComparisonV2Tooltip.cjs.js"),H=require("../../components/Icon/Icon.cjs.js"),B=require("../../components/Icon/constants.cjs.js"),D=require("../../components/Button/Button.cjs.js"),E=({title:j,description:u,ctaBlock:h,getStartedLink:p,comparisonV2Columns:x})=>{const[t,d]=T.useState(null),[m,n]=T.useState(null),b=V.useIsMobile(768),C=a=>{var l;(l=window.eventBus)==null||l.emit("analytics",{event:g.EAnalyticsEvent.ctaClicked,type:g.EAnalyticsEventType.interaction,component:"Comparison V2",payload:{link:p}})},N=a=>{b&&(t===a?(n(a),setTimeout(()=>{d(null),n(null)},250)):t?(n(t),setTimeout(()=>{n(null),d(a)},250)):d(a))},v=a=>{a==null||a.stopPropagation(),t&&(n(t),setTimeout(()=>{d(null),n(null)},250))};return s.jsx("div",{className:e.root,children:s.jsxs("div",{className:e.container,children:[s.jsxs("div",{className:e.header,children:[s.jsx(_.HighlightedTitle,{title:j,defaultVariant:"displayMd",mobileVariant:"headingXl",className:e.title}),u&&s.jsx(c.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodySm",className:e.description,children:u})]}),s.jsxs("div",{className:e.tableContainer,children:[s.jsx("div",{className:e.table,children:x.map((a,l)=>s.jsxs("div",{className:r.cn(e.alternativeCol,{[e.featuredCol]:a.featured}),children:[s.jsx("div",{className:r.cn(e.alternativeHeaderCell,{[e.featuredHeaderCell]:a.featured}),children:q.isHealthspan(a.comparisonV2Header.type)?s.jsx(f.default,{className:e.logo,"aria-label":"Healthspan logo"}):s.jsx(c.Typography,{as:"h3",defaultVariant:"headingLg",mobileVariant:"preambleMd",className:e.headerText,children:a.comparisonV2Header.title})}),a.comparisonV2Cells.map((o,y)=>{const i=`comparison-${l}-${y}`;return s.jsxs("div",{className:e.alternativeContent,onClick:()=>N(i),children:[(t===i||m===i)&&s.jsx(M.ComparisonV2Tooltip,{title:o.title,description:o.description||"",onClose:v,isOpening:t===i&&!m,isClosing:m===i}),s.jsx(c.Typography,{as:"p",defaultVariant:"preambleMd",mobileVariant:"bodyXl",className:r.cn(e.alternativeTitle,{[e.activeTitle]:t===i}),children:o.title}),o.description&&s.jsxs("div",{className:e.rowDescriptionContainer,children:[s.jsx(c.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:r.cn(e.featuredDescription,e.hideMobile),children:o.description}),s.jsx(H.Icon,{name:B.EIconName.DOT,className:r.cn(e.dot,e.hideDesktop,{[e.activeDot]:t===i})})]})]},y)})]},l))}),h&&p&&s.jsx("div",{className:e.ctaContainer,children:s.jsxs("div",{className:e.ctaBlock,children:[s.jsx(c.Typography,{as:"p",defaultVariant:"preambleMd",className:e.ctaText,children:h}),s.jsx("div",{className:e.ctaButton,children:s.jsx(D.Button,{as:"a",href:p||"#",size:"lg",onClick:C,children:"Get started"})})]})})]})]})})};exports.ComparisonV2=E;
|
|
@@ -1,145 +1,161 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { useState as
|
|
4
|
-
import { EAnalyticsEventType as
|
|
5
|
-
import { useIsMobile as
|
|
2
|
+
import { jsx as i, jsxs as o } from "react/jsx-runtime";
|
|
3
|
+
import { useState as N } from "react";
|
|
4
|
+
import { EAnalyticsEventType as M, EAnalyticsEvent as H } from "../../types/analytics/analytics.es.js";
|
|
5
|
+
import { useIsMobile as D } from "../../utils/useIsMobile.es.js";
|
|
6
6
|
import E from "../Comparison/assets/company-logo.svg.es.js";
|
|
7
7
|
import { isHealthspan as k } from "../Comparison/utils.es.js";
|
|
8
8
|
import e from "../../modules/ComparisonV2/comparisonV2.module.css";
|
|
9
|
-
import { cn as
|
|
10
|
-
import { HighlightedTitle as
|
|
11
|
-
import { Typography as
|
|
12
|
-
import { ComparisonV2Tooltip as
|
|
13
|
-
import {
|
|
9
|
+
import { cn as c } from "../../utils/cn/cn.es.js";
|
|
10
|
+
import { HighlightedTitle as B } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
|
|
11
|
+
import { Typography as m } from "../../components/Typography/Typography.es.js";
|
|
12
|
+
import { ComparisonV2Tooltip as x } from "./components/ComparisonV2Tooltip/ComparisonV2Tooltip.es.js";
|
|
13
|
+
import { Icon as O } from "../../components/Icon/Icon.es.js";
|
|
14
|
+
import { EIconName as j } from "../../components/Icon/constants.es.js";
|
|
14
15
|
import { Button as A } from "../../components/Button/Button.es.js";
|
|
15
|
-
const
|
|
16
|
-
title:
|
|
17
|
-
description:
|
|
18
|
-
ctaBlock:
|
|
19
|
-
getStartedLink:
|
|
20
|
-
comparisonV2Columns:
|
|
16
|
+
const U = ({
|
|
17
|
+
title: v,
|
|
18
|
+
description: f,
|
|
19
|
+
ctaBlock: u,
|
|
20
|
+
getStartedLink: p,
|
|
21
|
+
comparisonV2Columns: b
|
|
21
22
|
}) => {
|
|
22
|
-
const [t,
|
|
23
|
-
var
|
|
24
|
-
(
|
|
25
|
-
event:
|
|
26
|
-
type:
|
|
23
|
+
const [t, d] = N(null), [h, s] = N(null), T = D(768), g = (a) => {
|
|
24
|
+
var n;
|
|
25
|
+
(n = window.eventBus) == null || n.emit("analytics", {
|
|
26
|
+
event: H.ctaClicked,
|
|
27
|
+
type: M.interaction,
|
|
27
28
|
component: "Comparison V2",
|
|
28
29
|
payload: {
|
|
29
|
-
link:
|
|
30
|
+
link: p
|
|
30
31
|
}
|
|
31
32
|
});
|
|
32
|
-
}, y = (
|
|
33
|
-
T && (t ===
|
|
34
|
-
|
|
35
|
-
}, 250)) : t ? (
|
|
36
|
-
|
|
37
|
-
}, 250)) :
|
|
38
|
-
},
|
|
39
|
-
|
|
40
|
-
|
|
33
|
+
}, y = (a) => {
|
|
34
|
+
T && (t === a ? (s(a), setTimeout(() => {
|
|
35
|
+
d(null), s(null);
|
|
36
|
+
}, 250)) : t ? (s(t), setTimeout(() => {
|
|
37
|
+
s(null), d(a);
|
|
38
|
+
}, 250)) : d(a));
|
|
39
|
+
}, V = (a) => {
|
|
40
|
+
a == null || a.stopPropagation(), t && (s(t), setTimeout(() => {
|
|
41
|
+
d(null), s(null);
|
|
41
42
|
}, 250));
|
|
42
43
|
};
|
|
43
|
-
return /* @__PURE__ */
|
|
44
|
-
/* @__PURE__ */
|
|
45
|
-
/* @__PURE__ */
|
|
46
|
-
|
|
47
|
-
|
|
44
|
+
return /* @__PURE__ */ i("div", { className: e.root, children: /* @__PURE__ */ o("div", { className: e.container, children: [
|
|
45
|
+
/* @__PURE__ */ o("div", { className: e.header, children: [
|
|
46
|
+
/* @__PURE__ */ i(
|
|
47
|
+
B,
|
|
48
|
+
{
|
|
49
|
+
title: v,
|
|
50
|
+
defaultVariant: "displayMd",
|
|
51
|
+
mobileVariant: "headingXl",
|
|
52
|
+
className: e.title
|
|
53
|
+
}
|
|
54
|
+
),
|
|
55
|
+
f && /* @__PURE__ */ i(
|
|
56
|
+
m,
|
|
48
57
|
{
|
|
49
58
|
as: "p",
|
|
50
59
|
defaultVariant: "bodyLg",
|
|
51
60
|
mobileVariant: "bodySm",
|
|
52
61
|
className: e.description,
|
|
53
|
-
children:
|
|
62
|
+
children: f
|
|
54
63
|
}
|
|
55
64
|
)
|
|
56
65
|
] }),
|
|
57
|
-
/* @__PURE__ */
|
|
58
|
-
/* @__PURE__ */
|
|
66
|
+
/* @__PURE__ */ o("div", { className: e.tableContainer, children: [
|
|
67
|
+
/* @__PURE__ */ i("div", { className: e.table, children: b.map((a, n) => /* @__PURE__ */ o(
|
|
59
68
|
"div",
|
|
60
69
|
{
|
|
61
|
-
className:
|
|
62
|
-
[e.featuredCol]:
|
|
70
|
+
className: c(e.alternativeCol, {
|
|
71
|
+
[e.featuredCol]: a.featured
|
|
63
72
|
}),
|
|
64
73
|
children: [
|
|
65
|
-
/* @__PURE__ */
|
|
74
|
+
/* @__PURE__ */ i(
|
|
66
75
|
"div",
|
|
67
76
|
{
|
|
68
|
-
className:
|
|
69
|
-
[e.featuredHeaderCell]:
|
|
77
|
+
className: c(e.alternativeHeaderCell, {
|
|
78
|
+
[e.featuredHeaderCell]: a.featured
|
|
70
79
|
}),
|
|
71
|
-
children: k(
|
|
72
|
-
|
|
80
|
+
children: k(a.comparisonV2Header.type) ? /* @__PURE__ */ i(E, { className: e.logo, "aria-label": "Healthspan logo" }) : /* @__PURE__ */ i(
|
|
81
|
+
m,
|
|
73
82
|
{
|
|
74
83
|
as: "h3",
|
|
75
84
|
defaultVariant: "headingLg",
|
|
76
85
|
mobileVariant: "preambleMd",
|
|
77
86
|
className: e.headerText,
|
|
78
|
-
children:
|
|
87
|
+
children: a.comparisonV2Header.title
|
|
79
88
|
}
|
|
80
89
|
)
|
|
81
90
|
}
|
|
82
91
|
),
|
|
83
|
-
|
|
84
|
-
const
|
|
85
|
-
return /* @__PURE__ */
|
|
92
|
+
a.comparisonV2Cells.map((r, C) => {
|
|
93
|
+
const l = `comparison-${n}-${C}`;
|
|
94
|
+
return /* @__PURE__ */ o(
|
|
86
95
|
"div",
|
|
87
96
|
{
|
|
88
97
|
className: e.alternativeContent,
|
|
89
|
-
onClick: () => y(
|
|
98
|
+
onClick: () => y(l),
|
|
90
99
|
children: [
|
|
91
|
-
(t ===
|
|
92
|
-
|
|
100
|
+
(t === l || h === l) && /* @__PURE__ */ i(
|
|
101
|
+
x,
|
|
93
102
|
{
|
|
94
|
-
title:
|
|
95
|
-
description:
|
|
96
|
-
onClose:
|
|
97
|
-
isOpening: t ===
|
|
98
|
-
isClosing:
|
|
103
|
+
title: r.title,
|
|
104
|
+
description: r.description || "",
|
|
105
|
+
onClose: V,
|
|
106
|
+
isOpening: t === l && !h,
|
|
107
|
+
isClosing: h === l
|
|
99
108
|
}
|
|
100
109
|
),
|
|
101
|
-
/* @__PURE__ */
|
|
102
|
-
|
|
110
|
+
/* @__PURE__ */ i(
|
|
111
|
+
m,
|
|
103
112
|
{
|
|
104
113
|
as: "p",
|
|
105
114
|
defaultVariant: "preambleMd",
|
|
106
115
|
mobileVariant: "bodyXl",
|
|
107
|
-
className: e.alternativeTitle,
|
|
108
|
-
|
|
116
|
+
className: c(e.alternativeTitle, {
|
|
117
|
+
[e.activeTitle]: t === l
|
|
118
|
+
}),
|
|
119
|
+
children: r.title
|
|
109
120
|
}
|
|
110
121
|
),
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
122
|
+
r.description && /* @__PURE__ */ o("div", { className: e.rowDescriptionContainer, children: [
|
|
123
|
+
/* @__PURE__ */ i(
|
|
124
|
+
m,
|
|
125
|
+
{
|
|
126
|
+
as: "p",
|
|
127
|
+
defaultVariant: "bodyMd",
|
|
128
|
+
mobileVariant: "bodySm",
|
|
129
|
+
className: c(e.featuredDescription, e.hideMobile),
|
|
130
|
+
children: r.description
|
|
131
|
+
}
|
|
132
|
+
),
|
|
133
|
+
/* @__PURE__ */ i(
|
|
134
|
+
O,
|
|
135
|
+
{
|
|
136
|
+
name: j.DOT,
|
|
137
|
+
className: c(e.dot, e.hideDesktop, {
|
|
138
|
+
[e.activeDot]: t === l
|
|
139
|
+
})
|
|
140
|
+
}
|
|
141
|
+
)
|
|
142
|
+
] })
|
|
118
143
|
]
|
|
119
144
|
},
|
|
120
|
-
|
|
145
|
+
C
|
|
121
146
|
);
|
|
122
147
|
})
|
|
123
148
|
]
|
|
124
149
|
},
|
|
125
|
-
|
|
150
|
+
n
|
|
126
151
|
)) }),
|
|
127
|
-
|
|
128
|
-
/* @__PURE__ */
|
|
129
|
-
|
|
130
|
-
{
|
|
131
|
-
as: "p",
|
|
132
|
-
defaultVariant: "preambleMd",
|
|
133
|
-
mobileVariant: "bodyXl",
|
|
134
|
-
className: e.ctaText,
|
|
135
|
-
children: f
|
|
136
|
-
}
|
|
137
|
-
),
|
|
138
|
-
/* @__PURE__ */ a("div", { className: e.ctaButton, children: /* @__PURE__ */ a(A, { as: "a", href: d || "#", size: "lg", onClick: V, children: "Get started" }) })
|
|
152
|
+
u && p && /* @__PURE__ */ i("div", { className: e.ctaContainer, children: /* @__PURE__ */ o("div", { className: e.ctaBlock, children: [
|
|
153
|
+
/* @__PURE__ */ i(m, { as: "p", defaultVariant: "preambleMd", className: e.ctaText, children: u }),
|
|
154
|
+
/* @__PURE__ */ i("div", { className: e.ctaButton, children: /* @__PURE__ */ i(A, { as: "a", href: p || "#", size: "lg", onClick: g, children: "Get started" }) })
|
|
139
155
|
] }) })
|
|
140
156
|
] })
|
|
141
157
|
] }) });
|
|
142
158
|
};
|
|
143
159
|
export {
|
|
144
|
-
|
|
160
|
+
U as ComparisonV2
|
|
145
161
|
};
|
|
@@ -18,12 +18,6 @@
|
|
|
18
18
|
padding: 5vw;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
@media (max-width: 768px) {
|
|
22
|
-
.container {
|
|
23
|
-
padding: 2vw;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
21
|
.header {
|
|
28
22
|
display: flex;
|
|
29
23
|
align-items: center;
|
|
@@ -39,6 +33,15 @@
|
|
|
39
33
|
max-width: 570px;
|
|
40
34
|
}
|
|
41
35
|
|
|
36
|
+
.dot {
|
|
37
|
+
height: 8px;
|
|
38
|
+
width: 8px;
|
|
39
|
+
color: var(--color-text-primary-disabled);
|
|
40
|
+
border-radius: 50%;
|
|
41
|
+
display: inline-block;
|
|
42
|
+
margin-right: 8px;
|
|
43
|
+
}
|
|
44
|
+
|
|
42
45
|
.tableContainer {
|
|
43
46
|
width: 100%;
|
|
44
47
|
background-color: var(--color-bg-neutral-light);
|
|
@@ -76,7 +79,10 @@
|
|
|
76
79
|
.alternativeCol, .featuredCol {
|
|
77
80
|
padding-right: 0;
|
|
78
81
|
padding-bottom: 32px;
|
|
82
|
+
}
|
|
79
83
|
|
|
84
|
+
.alternativeCol:not(.featuredCol) {
|
|
85
|
+
border-top: 1px solid transparent;
|
|
80
86
|
}
|
|
81
87
|
|
|
82
88
|
.featuredCol {
|
|
@@ -86,10 +92,6 @@
|
|
|
86
92
|
border-radius: var(--border-radius-lg);
|
|
87
93
|
}
|
|
88
94
|
|
|
89
|
-
.alternativeCol {
|
|
90
|
-
border: 1px solid transparent;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
95
|
.alternativeContent, .featuredContent {
|
|
94
96
|
cursor: pointer;
|
|
95
97
|
width: 100%;
|
|
@@ -125,11 +127,8 @@
|
|
|
125
127
|
padding-inline: 3vw;
|
|
126
128
|
}
|
|
127
129
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
color: var(--color-text-secondary);
|
|
131
|
-
}
|
|
132
|
-
}
|
|
130
|
+
|
|
131
|
+
|
|
133
132
|
|
|
134
133
|
.featuredDescription, .alternativeDescription {
|
|
135
134
|
color: var(--color-text-secondary);
|
|
@@ -180,6 +179,38 @@
|
|
|
180
179
|
}
|
|
181
180
|
}
|
|
182
181
|
|
|
182
|
+
@media (max-width: 768px) {
|
|
183
|
+
.container {
|
|
184
|
+
padding: 0 2vw;
|
|
185
|
+
gap: var(--spacing-40, 40px);
|
|
186
|
+
}
|
|
187
|
+
.header {
|
|
188
|
+
gap: var(--spacing-16, 16px);
|
|
189
|
+
}
|
|
190
|
+
.title {
|
|
191
|
+
padding: 4rem;
|
|
192
|
+
}
|
|
193
|
+
.featuredTitle, .alternativeTitle {
|
|
194
|
+
color: var(--color-text-secondary);
|
|
195
|
+
}
|
|
196
|
+
.activeDot, .activeTitle {
|
|
197
|
+
color: var(--color-text-primary);
|
|
198
|
+
}
|
|
199
|
+
.ctaContainer {
|
|
200
|
+
padding: 0;
|
|
201
|
+
}
|
|
202
|
+
.ctaBlock {
|
|
203
|
+
flex-direction: column;
|
|
204
|
+
align-items: center;
|
|
205
|
+
background-color: transparent;
|
|
206
|
+
padding: var(--spacing-24, 24px) 32px;
|
|
207
|
+
}
|
|
208
|
+
.ctaText {
|
|
209
|
+
text-align: center;
|
|
210
|
+
text-wrap: pretty;
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
|
|
183
214
|
/* Tooltip */
|
|
184
215
|
|
|
185
216
|
.tooltip {
|
|
@@ -223,12 +254,14 @@
|
|
|
223
254
|
cursor: pointer;
|
|
224
255
|
display: flex;
|
|
225
256
|
align-items: center;
|
|
257
|
+
color: inherit;
|
|
226
258
|
}
|
|
227
259
|
|
|
228
260
|
.closeIcon {
|
|
229
|
-
width:
|
|
230
|
-
height:
|
|
261
|
+
width: 1.5rem;
|
|
262
|
+
height: 1.5rem;
|
|
231
263
|
padding-inline: 8px;
|
|
264
|
+
color: inherit;
|
|
232
265
|
}
|
|
233
266
|
|
|
234
267
|
@keyframes slideInDown {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),o=require("../../../../src/modules/ComparisonV2/comparisonV2.module.css"),h=require("../../../../utils/cn/cn.cjs.js"),l=require("../../../../components/Typography/Typography.cjs.js"),s=require("../../../../components/Icon/Icon.cjs.js"),c=require("../../../../components/Icon/constants.cjs.js"),y=({title:p,description:m,onClose:n,isOpening:u,isClosing:d})=>{const t=a.useRef(null);return a.useEffect(()=>{const i=r=>{r.stopPropagation(),t.current&&!t.current.contains(r.target)&&n()};return document.addEventListener("mousedown",i),()=>{document.removeEventListener("mousedown",i)}},[n]),e.jsxs("div",{className:h.cn(o.tooltip,u&&o.tooltipOpening,d&&o.tooltipClosing),ref:t,children:[e.jsxs("div",{className:o.tooltipHeader,children:[e.jsx(l.Typography,{as:"h4",defaultVariant:"headingSm",mobileVariant:"headingXs",className:o.tooltipTitle,children:p}),e.jsxs("button",{className:o.closeButtonWrapper,onClick:n,children:[e.jsx(s.Icon,{name:c.EIconName.BRACKET_LEFT}),e.jsx(s.Icon,{className:o.closeIcon,name:c.EIconName.
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),o=require("../../../../src/modules/ComparisonV2/comparisonV2.module.css"),h=require("../../../../utils/cn/cn.cjs.js"),l=require("../../../../components/Typography/Typography.cjs.js"),s=require("../../../../components/Icon/Icon.cjs.js"),c=require("../../../../components/Icon/constants.cjs.js"),y=({title:p,description:m,onClose:n,isOpening:u,isClosing:d})=>{const t=a.useRef(null);return a.useEffect(()=>{const i=r=>{r.stopPropagation(),t.current&&!t.current.contains(r.target)&&n()};return document.addEventListener("mousedown",i),()=>{document.removeEventListener("mousedown",i)}},[n]),e.jsxs("div",{className:h.cn(o.tooltip,u&&o.tooltipOpening,d&&o.tooltipClosing),ref:t,children:[e.jsxs("div",{className:o.tooltipHeader,children:[e.jsx(l.Typography,{as:"h4",defaultVariant:"headingSm",mobileVariant:"headingXs",className:o.tooltipTitle,children:p}),e.jsxs("button",{className:o.closeButtonWrapper,onClick:n,children:[e.jsx(s.Icon,{name:c.EIconName.BRACKET_LEFT}),e.jsx(s.Icon,{className:o.closeIcon,name:c.EIconName.CLOSE_BOLD}),e.jsx(s.Icon,{name:c.EIconName.BRACKET_RIGHT})]})]}),e.jsx(l.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:o.tooltipDescription,children:m})]})};exports.ComparisonV2Tooltip=y;
|
|
@@ -5,7 +5,7 @@ import { cn as E } from "../../../../utils/cn/cn.es.js";
|
|
|
5
5
|
import { Typography as l } from "../../../../components/Typography/Typography.es.js";
|
|
6
6
|
import { Icon as n } from "../../../../components/Icon/Icon.es.js";
|
|
7
7
|
import { EIconName as a } from "../../../../components/Icon/constants.es.js";
|
|
8
|
-
const
|
|
8
|
+
const R = ({
|
|
9
9
|
title: c,
|
|
10
10
|
description: p,
|
|
11
11
|
onClose: e,
|
|
@@ -39,7 +39,7 @@ const V = ({
|
|
|
39
39
|
),
|
|
40
40
|
/* @__PURE__ */ r("button", { className: o.closeButtonWrapper, onClick: e, children: [
|
|
41
41
|
/* @__PURE__ */ t(n, { name: a.BRACKET_LEFT }),
|
|
42
|
-
/* @__PURE__ */ t(n, { className: o.closeIcon, name: a.
|
|
42
|
+
/* @__PURE__ */ t(n, { className: o.closeIcon, name: a.CLOSE_BOLD }),
|
|
43
43
|
/* @__PURE__ */ t(n, { name: a.BRACKET_RIGHT })
|
|
44
44
|
] })
|
|
45
45
|
] }),
|
|
@@ -49,5 +49,5 @@ const V = ({
|
|
|
49
49
|
);
|
|
50
50
|
};
|
|
51
51
|
export {
|
|
52
|
-
|
|
52
|
+
R as ComparisonV2Tooltip
|
|
53
53
|
};
|
package/dist/styles/core.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
:root{--color-black: #000000;--color-white: #ffffff;--color-midnight-50: #f1f0f4;--color-midnight-100: #e3e1ea;--color-midnight-200: #aaa6bf;--color-midnight-300: #5b5676;--color-midnight-400: #2e2b3b;--color-midnight-500: #111016;--color-navy-50: #e9f5fc;--color-navy-100: #d2eaf9;--color-navy-200: #79c0ec;--color-navy-300: #1a78b2;--color-navy-400: #0d3c59;--color-navy-500: #092a3e;--color-copper-50: #f8f1ec;--color-copper-100: #f1e3da;--color-copper-200: #d5ac90;--color-copper-300: #955d37;--color-copper-400: #835231;--color-copper-500: #4a2e1c;--color-orchre-50: #fff5e6;--color-orchre-100: #feeacd;--color-orchre-200: #fcc169;--color-orchre-300: #fba626;--color-orchre-400: #c87a04;--color-orchre-500: #643d02;--color-indigo-50: #eaf2fa;--color-indigo-100: #cadff3;--color-indigo-200: #81b1e2;--color-indigo-300: #5999d9;--color-indigo-400: #2666a6;--color-indigo-500: #133353;--color-sage-50: #f1f8ed;--color-sage-100: #e3f1da;--color-sage-200: #a5d088;--color-sage-300: #90c56d;--color-sage-400: #5d923a;--color-sage-500: #2f491d;--color-solar-50: #fffce6;--color-solar-100: #fffacc;--color-solar-200: #fef38e;--color-solar-300: #feef67;--color-solar-400: #cab602;--color-solar-500: #655b01;--color-ivory-50: #fbf3e9;--color-ivory-100: #fbf1e6;--color-ivory-200: #f1cda7;--color-ivory-300: #e39b4f;--color-ivory-400: #b0681c;--color-ivory-500: #58340e;--color-lilac-50: #d6cefb;--color-lilac-100: #bdb0f8;--color-lilac-200: #b0a4e8;--color-lilac-300: #625793;--color-lilac-400: #4e4879;--color-lilac-500: #0a151c;--color-neutral-100: #f7f7f7;--color-neutral-200: #e5e5e5;--color-neutral-300: #adadad;--color-neutral-400: #888888;--color-neutral-500: #676767;--color-neutral-900: #1a1a1a;--color-urgent-red-100: #ffe2e1;--color-urgent-red-200: #ffcabe;--color-urgent-red-300: #ff5850;--color-urgent-red-400: #e4271d;--color-urgent-red-500: #841d18;--color-calm-green-100: #e1f7e6;--color-calm-green-200: #beecc8;--color-calm-green-300: #56d391;--color-calm-green-400: #0d9051;--color-calm-green-500: #084b2e;--color-powder-blue-100: #deecfa;--color-powder-blue-200: #c4e0f8;--color-powder-blue-300: #5a9bea;--color-powder-blue-400: #3375dc;--color-powder-blue-500: #264582;--color-heal-yellow-100: #fff8c8;--color-heal-yellow-200: #ffec88;--color-heal-yellow-300: #f6c64f;--color-heal-yellow-400: #eeab04;--color-heal-yellow-500: #733b10;--color-cell-pink-100: #fee5f1;--color-cell-pink-200: #fed7ea;--color-cell-pink-300: #ff81b8;--color-cell-pink-400: #eb1664;--color-cell-pink-500: #8d0e37;--color-bg-base-light: var(--color-white);--color-bg-base-dark: var(--color-black);--color-bg-neutral-light: var(--color-neutral-100);--color-bg-neutral-medium: var(--color-neutral-200);--color-bg-success: var(--color-calm-green-100);--color-bg-warning: var(--color-heal-yellow-100);--color-bg-danger: var(--color-urgent-red-300);--color-bg-info: var(--color-powder-blue-100);--color-bg-supportive: var(--color-cell-pink-100);--color-bg-success-fill: var(--color-calm-green-300);--color-bg-warning-fill: var(--color-heal-yellow-300);--color-bg-danger-fill: var(--color-urgent-red-300);--color-bg-info-fill: var(--color-powder-blue-300);--color-bg-supportive-fill: var(--color-cell-pink-300);--color-bg-fill-primary: var(--color-black);--color-bg-fill-brand-solar: var(--color-solar-200);--color-bg-fill-brand-indigo: var(--color-indigo-200);--color-bg-fill-brand-sage: var(--color-sage-200);--color-bg-fill-brand-orchre: var(--color-orchre-300);--color-bg-fill-brand-lilac: var(--color-lilac-100);--color-bg-fill-brand-disabled: var(--color-neutral-400);--color-bg-fill-brand-inverse: var(--color-white);--color-bg-fill-neutral-dark: var(--color-neutral-900);--color-bg-fill-alpha-white-10: rgba(255, 255, 255, .1);--color-bg-fill-alpha-white-20: rgba(255, 255, 255, .2);--color-bg-fill-alpha-black-10: rgba(0, 0, 0, .1);--color-bg-fill-alpha-black-40: rgba(0, 0, 0, .4);--color-text-primary: var(--color-black);--color-text-primary-brand-solar: var(--color-solar-200);--color-text-primary-brand-indigo: var(--color-indigo-300);--color-text-primary-brand-lilac: var(--color-lilac-300);--color-text-primary-disabled: var(--color-neutral-300);--color-text-primary-inverted: var(--color-white);--color-text-secondary: var(--color-neutral-500);--color-text-secondary-hover: var(--color-neutral-400);--color-text-secondary-disabled: var(--color-neutral-300);--color-text-secondary-inverted: var(--color-neutral-200);--color-text-success-dark: var(--color-calm-green-500);--color-text-success-light: var(--color-calm-green-400);--color-text-success-hover: var(--color-calm-green-300);--color-text-success-disabled: var(--color-calm-green-200);--color-text-warning-dark: var(--color-heal-yellow-500);--color-text-warning-light: var(--color-heal-yellow-400);--color-text-warning-hover: var(--color-heal-yellow-300);--color-text-warning-disabled: var(--color-heal-yellow-200);--color-text-danger-dark: var(--color-urgent-red-500);--color-text-danger-light: var(--color-urgent-red-400);--color-text-danger-hover: var(--color-urgent-red-300);--color-text-danger-disabled: var(--color-urgent-red-200);--color-text-info-dark: var(--color-powder-blue-500);--color-text-info-light: var(--color-powder-blue-400);--color-text-info-hover: var(--color-powder-blue-300);--color-text-info-disabled: var(--color-powder-blue-200);--color-text-supportive-dark: var(--color-cell-pink-500);--color-text-supportive-light: var(--color-cell-pink-400);--color-text-supportive-hover: var(--color-cell-pink-300);--color-text-supportive-disabled: var(--color-cell-pink-200);--border-color-light: var(--color-neutral-200);--border-color-medium: var(--color-neutral-300);--border-color-dark: var(--color-black);--border-color-indigo: var(--color-indigo-200);--border-color-solar: var(--color-solar-200);--border-color-lilac: var(--color-lilac-100);--border-color-invert: var(--color-white);--border-color-alpha-white-10: rgba(255, 255, 255, .1);--border-color-alpha-white-20: rgba(255, 255, 255, .2);--border-color-alpha-white-50: rgba(255, 255, 255, .5);--border-color-alpha-black-10: rgba(0, 0, 0, .1);--border-color-alpha-black-20: rgba(0, 0, 0, .2);--border-color-success: var(--color-calm-green-300);--border-color-success-en: var(--color-calm-green-500);--border-color-warning: var(--color-heal-yellow-300);--border-color-warning-en: var(--color-heal-yellow-500);--border-color-danger: var(--color-urgent-red-300);--border-color-danger-en: var(--color-urgent-red-500);--border-color-info: var(--color-powder-blue-300);--border-color-info-en: var(--color-powder-blue-500);--border-color-decorative: var(--color-cell-pink-300);--border-color-decorative-en: var(--color-cell-pink-500)}:root{--font-default: "Suisse Intl", sans-serif;--font-decorative: "Soehne Mono", monospace;--font-size-xxs: 10px;--font-size-xs: 12px;--font-size-sm: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-xxl: 24px;--font-size-heading-xxs: 18px;--font-size-heading-xs: 20px;--font-size-heading-sm: 24px;--font-size-heading-md: 28px;--font-size-heading-lg: 32px;--font-size-heading-xl: 40px;--font-size-display-xs: 48px;--font-size-display-sm: 56px;--font-size-display-md: 64px;--font-size-display-lg: 96px;--font-size-display-xl: 120px;--line-height-xxs: .9;--line-height-xs: 1;--line-height-sm: 1.1;--line-height-md: 1.2;--line-height-lg: 1.35;--line-height-xl: 1.4;--line-height-xxl: 1.5;--letter-spacing-negative-xxl: -.06em;--letter-spacing-negative-xl: -.04em;--letter-spacing-negative-lg: -.03em;--letter-spacing-negative-md: -.02em;--letter-spacing-negative-sm: -.01em;--letter-spacing-null: 0;--letter-spacing-sm: .01em;--letter-spacing-md: .02em;--letter-spacing-lg: .03em;--letter-spacing-xl: .05em;--letter-spacing-xxl: .1em;--font-weight-extra-light: 200;--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semi-bold: 600;--font-weight-bold: 700;--font-weight-extra-bold: 800}:root{--border-radius-none: 0;--border-radius-xxs: 4px;--border-radius-xs: 8px;--border-radius-sm: 12px;--border-radius-md: 16px;--border-radius-lg: 24px;--border-radius-xl: 40px;--border-radius-xxl: 48px;--border-radius-xxxl: 120px;--border-radius-full: 999px;--border-width-sm: 1px;--border-width-md: 2px}:root{--spacing-0: 0;--spacing-4: 4px;--spacing-8: 8px;--spacing-12: 12px;--spacing-14: 14px;--spacing-16: 16px;--spacing-18: 18px;--spacing-20: 20px;--spacing-24: 24px;--spacing-28: 28px;--spacing-32: 32px;--spacing-36: 36px;--spacing-40: 40px;--spacing-48: 48px;--spacing-52: 52px;--spacing-56: 56px;--spacing-64: 64px;--spacing-72: 72px;--spacing-80: 80px;--spacing-88: 88px;--spacing-96: 96px;--spacing-104: 104px;--spacing-112: 112px;--spacing-120: 120px;--spacing-180: 180px;--content-max-width: 1440px;--content-max-height: 1285px}html{scroll-behavior:smooth}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zenpatient-org/healthspan-marketing-ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.32",
|
|
4
4
|
"description": "Design system",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.es.js",
|
|
@@ -721,6 +721,9 @@
|
|
|
721
721
|
"./styles/core": {
|
|
722
722
|
"import": "./dist/styles/core.css"
|
|
723
723
|
},
|
|
724
|
+
"./styles/reset": {
|
|
725
|
+
"import": "./dist/styles/reset.css"
|
|
726
|
+
},
|
|
724
727
|
"./analytics": {
|
|
725
728
|
"types": "./dist/types/analytics.d.ts",
|
|
726
729
|
"import": "./dist/types/analytics/analytics.es.js",
|
package/dist/modules/ComparisonV2/components/ComparisonV2Description/ComparisonV2Description.cjs.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),n=require("../../../../utils/cn/cn.cjs.js"),e=require("../../../../src/modules/ComparisonV2/comparisonV2.module.css"),r=require("../../../../components/Typography/Typography.cjs.js"),t=require("../../../../components/Icon/Icon.cjs.js"),c=require("../../../../components/Icon/constants.cjs.js"),i=({description:s})=>o.jsxs("div",{className:e.rowDescriptionContainer,children:[o.jsx(r.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:n.cn(e.featuredDescription,e.hideMobile),children:s}),o.jsx(t.Icon,{name:c.EIconName.DOT,className:n.cn(e.dot,e.hideDesktop)})]});exports.ComparisonV2Description=i;
|
package/dist/modules/ComparisonV2/components/ComparisonV2Description/ComparisonV2Description.es.js
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { jsxs as m, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { cn as i } from "../../../../utils/cn/cn.es.js";
|
|
3
|
-
import o from "../../../../modules/ComparisonV2/comparisonV2.module.css";
|
|
4
|
-
import { Typography as t } from "../../../../components/Typography/Typography.es.js";
|
|
5
|
-
import { Icon as a } from "../../../../components/Icon/Icon.es.js";
|
|
6
|
-
import { EIconName as s } from "../../../../components/Icon/constants.es.js";
|
|
7
|
-
const h = ({ description: e }) => /* @__PURE__ */ m("div", { className: o.rowDescriptionContainer, children: [
|
|
8
|
-
/* @__PURE__ */ r(
|
|
9
|
-
t,
|
|
10
|
-
{
|
|
11
|
-
as: "p",
|
|
12
|
-
defaultVariant: "bodyMd",
|
|
13
|
-
mobileVariant: "bodySm",
|
|
14
|
-
className: i(o.featuredDescription, o.hideMobile),
|
|
15
|
-
children: e
|
|
16
|
-
}
|
|
17
|
-
),
|
|
18
|
-
/* @__PURE__ */ r(a, { name: s.DOT, className: i(o.dot, o.hideDesktop) })
|
|
19
|
-
] });
|
|
20
|
-
export {
|
|
21
|
-
h as ComparisonV2Description
|
|
22
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { ComparisonV2Description } from './ComparisonV2Description';
|