quirk-ui 0.1.136 → 0.1.138
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"});require('../../../index17.css');const s=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index17.css');const s=require("react/jsx-runtime"),p=require("../../../core/components/Modal/index.cjs"),q=require("../../utils/resolveLinkUrl.cjs"),S=require("../../hooks/useMediaQuery.cjs"),$=require("../../hooks/useStyleClasses.cjs"),U=require("../../../core/context/ThemeContext.cjs"),u=require("../../utils/mediaUtils.cjs"),P=require("../../../play-CQBnZgNa.cjs"),F=require("../../../arrow-right-DO6S4vfx.cjs"),W="_cardLink_14uy9_1",z="_card_14uy9_1",G="_container_14uy9_21",D="_content_14uy9_31",E="_icon_14uy9_38",Q="_modalTrigger_14uy9_60",Y="_callToAction_14uy9_65",H="_label_14uy9_66",J="_cardIcon_14uy9_71",K="_title_14uy9_78",X="_description_14uy9_101",Z="_imageWrapper_14uy9_116",V="_metric_14uy9_205",R="_outerCircle_14uy9_222",A="_innerCircle_14uy9_227",T="_metricLabel_14uy9_233",ee="_textOnly_14uy9_241",se="_imageOnly_14uy9_278",te="_fullBleed_14uy9_303",ae="_imageTop_14uy9_344",ne="_imageBottom_14uy9_363",re="_imageLeft_14uy9_391",oe="_imageRight_14uy9_401",ie="_containImage_14uy9_459",le="_fullBleedImage_14uy9_467",ce="_image_14uy9_116",_e="_eyebrow_14uy9_563",me="_cta_14uy9_575",ue="_secondary_14uy9_576",e={cardLink:W,card:z,container:G,content:D,icon:E,modalTrigger:Q,callToAction:Y,label:H,cardIcon:J,title:K,description:X,imageWrapper:Z,metric:V,outerCircle:R,innerCircle:A,metricLabel:T,textOnly:ee,imageOnly:se,fullBleed:te,imageTop:ae,imageBottom:ne,imageLeft:re,imageRight:oe,containImage:ie,fullBleedImage:le,image:ce,eyebrow:_e,cta:me,secondary:ue},b={"full-bleed":e.fullBleed,text:e.textOnly,metric:e.metric,"image-left":e.imageLeft,"image-right":e.imageRight,"image-top":e.imageTop,"image-bottom":e.imageBottom,"image-only":e.imageOnly};function de({value:t}){if(!t.includes("%"))return s.jsx("div",{className:e.metric});const a=125,n=(a-10)/2,r=2*Math.PI*n,l=r-parseFloat(t)/100*r;return s.jsxs("svg",{width:a,height:a,viewBox:`0 0 ${a} ${a}`,children:[s.jsx("circle",{className:e.outerCircle,cx:a/2,cy:a/2,r:n,fill:"none"}),s.jsx("circle",{className:e.innerCircle,cx:a/2,cy:a/2,r:n,fill:"none",strokeDasharray:r,strokeDashoffset:l,strokeLinecap:"round",transform:`rotate(-90 ${a/2} ${a/2})`}),s.jsx("text",{className:e.metricLabel,x:"50%",y:"52%",dominantBaseline:"middle",textAnchor:"middle",children:t})]})}function ge({callToAction:t,resolvedUrl:a,children:n}){var r,l;switch(t==null?void 0:t.type){case"link":return s.jsx("a",{className:e.cardLink,"aria-label":t.ariaLabel||t.label,href:a,target:((r=t.linkOptions)==null?void 0:r.linkType)==="external"?"_blank":"_self",rel:((l=t.linkOptions)==null?void 0:l.linkType)==="external"?"noopener noreferrer":"",children:n});case"modal":return s.jsx(p.Modal,{className:e.modalTrigger,trigger:n,content:t.modalContent});case"video":return s.jsx(p.Modal,{className:e.modalTrigger,trigger:n,content:s.jsx("video",{src:t.videoUrl,controls:!0,autoPlay:!0})});case"download":return s.jsx("a",{className:e.cardLink,"aria-label":t.ariaLabel||t.label,href:a,download:!0,target:"_blank",rel:"noopener noreferrer",children:n});default:return s.jsx(s.Fragment,{children:n})}}function ye({style:t,variant:a="noImage",metricValue:n,eyebrow:r,title:l,description:_,image:c,icon:d,callToAction:o,onHover:h,onLeave:v,gridArea:g,styleOptions:N,renderImage:y,renderRichText:i}){const{mode:x}=U.useTheme(),f=S.useMediaQuery("(max-width: 767px)"),k=$.useStyleClasses(N),L=q.resolveLinkURL(o),m=u.resolveImageUrl(c,x),j=u.resolveAltText(c,x),C=u.resolveImageStyle(c,f),B=(c==null?void 0:c.layout)==="cover",I=b[t??"image-top"]??b["image-top"],w=c&&m?s.jsx("div",{className:e.imageWrapper,children:y?y({src:m,alt:j,width:600,height:658,style:C}):s.jsx("img",{src:m,alt:j,width:600,height:658})}):null,M=!n&&!r&&!l&&!_,O=s.jsxs(s.Fragment,{children:[s.jsxs("div",{className:`${e.container} ${B?e.fullBleedImage:e.containImage}`,children:[a!=="image"&&!M&&s.jsxs("div",{className:e.content,children:[d&&s.jsx("div",{className:e.icon,children:s.jsx("i",{className:d})}),n&&s.jsx(de,{value:n}),r&&(i==null?void 0:i({blocks:r,className:e.eyebrow})),l&&(i==null?void 0:i({blocks:l,className:e.title})),_&&(i==null?void 0:i({blocks:_,className:e.description}))]}),w]}),(o==null?void 0:o.videoUrl)&&s.jsxs("div",{className:e.callToAction,children:[s.jsx("div",{className:e.label,children:o.label}),s.jsx("div",{className:e.cardIcon,children:s.jsx(P.Play,{size:45})})]}),(o==null?void 0:o.type)==="link"&&s.jsxs("div",{className:e.callToAction,children:[s.jsx("div",{className:e.label,children:o.label}),s.jsx("div",{className:e.cardIcon,children:s.jsx(F.ArrowRight,{size:45})})]})]});return s.jsx("div",{className:[k,e.card,I,e[a]??""].filter(Boolean).join(" "),onMouseEnter:h,onMouseLeave:v,style:g&&!f?{gridArea:g}:{},children:s.jsx(ge,{callToAction:o,resolvedUrl:L,children:O})})}exports.GridCard=ye;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Modal as
|
|
1
|
+
import { jsx as a, jsxs as m, Fragment as h } from "react/jsx-runtime";
|
|
2
|
+
import { Modal as N } from "../../../core/components/Modal/index.mjs";
|
|
3
3
|
import { resolveLinkURL as P } from "../../utils/resolveLinkUrl.mjs";
|
|
4
4
|
import { useMediaQuery as U } from "../../hooks/useMediaQuery.mjs";
|
|
5
5
|
import { useStyleClasses as W } from "../../hooks/useStyleClasses.mjs";
|
|
@@ -7,7 +7,7 @@ import { useTheme as j } from "../../../core/context/ThemeContext.mjs";
|
|
|
7
7
|
import { resolveImageUrl as z, resolveAltText as F, resolveImageStyle as D } from "../../utils/mediaUtils.mjs";
|
|
8
8
|
import { P as E } from "../../../play-DYgKiSaf.js";
|
|
9
9
|
import { A as G } from "../../../arrow-right-QEwnX3Sk.js";
|
|
10
|
-
import '../../../index17.css';const Q = "_cardLink_14uy9_1", Y = "_card_14uy9_1", q = "_container_14uy9_21", H = "_content_14uy9_31", J = "_icon_14uy9_38", K = "_modalTrigger_14uy9_60", X = "_callToAction_14uy9_65", Z = "_label_14uy9_66", V = "_cardIcon_14uy9_71", R = "_title_14uy9_78", A = "_description_14uy9_101", T = "_imageWrapper_14uy9_116", ee = "_metric_14uy9_205",
|
|
10
|
+
import '../../../index17.css';const Q = "_cardLink_14uy9_1", Y = "_card_14uy9_1", q = "_container_14uy9_21", H = "_content_14uy9_31", J = "_icon_14uy9_38", K = "_modalTrigger_14uy9_60", X = "_callToAction_14uy9_65", Z = "_label_14uy9_66", V = "_cardIcon_14uy9_71", R = "_title_14uy9_78", A = "_description_14uy9_101", T = "_imageWrapper_14uy9_116", ee = "_metric_14uy9_205", ae = "_outerCircle_14uy9_222", te = "_innerCircle_14uy9_227", se = "_metricLabel_14uy9_233", re = "_textOnly_14uy9_241", ne = "_imageOnly_14uy9_278", oe = "_fullBleed_14uy9_303", ie = "_imageTop_14uy9_344", le = "_imageBottom_14uy9_363", ce = "_imageLeft_14uy9_391", me = "_imageRight_14uy9_401", _e = "_containImage_14uy9_459", de = "_fullBleedImage_14uy9_467", ue = "_image_14uy9_116", ge = "_eyebrow_14uy9_563", ye = "_cta_14uy9_575", fe = "_secondary_14uy9_576", e = {
|
|
11
11
|
cardLink: Q,
|
|
12
12
|
card: Y,
|
|
13
13
|
container: q,
|
|
@@ -21,14 +21,14 @@ import '../../../index17.css';const Q = "_cardLink_14uy9_1", Y = "_card_14uy9_1"
|
|
|
21
21
|
description: A,
|
|
22
22
|
imageWrapper: T,
|
|
23
23
|
metric: ee,
|
|
24
|
-
outerCircle:
|
|
25
|
-
innerCircle:
|
|
24
|
+
outerCircle: ae,
|
|
25
|
+
innerCircle: te,
|
|
26
26
|
metricLabel: se,
|
|
27
27
|
textOnly: re,
|
|
28
28
|
imageOnly: ne,
|
|
29
29
|
fullBleed: oe,
|
|
30
|
-
imageTop:
|
|
31
|
-
imageBottom:
|
|
30
|
+
imageTop: ie,
|
|
31
|
+
imageBottom: le,
|
|
32
32
|
imageLeft: ce,
|
|
33
33
|
imageRight: me,
|
|
34
34
|
containImage: _e,
|
|
@@ -37,7 +37,7 @@ import '../../../index17.css';const Q = "_cardLink_14uy9_1", Y = "_card_14uy9_1"
|
|
|
37
37
|
eyebrow: ge,
|
|
38
38
|
cta: ye,
|
|
39
39
|
secondary: fe
|
|
40
|
-
},
|
|
40
|
+
}, v = {
|
|
41
41
|
"full-bleed": e.fullBleed,
|
|
42
42
|
text: e.textOnly,
|
|
43
43
|
metric: e.metric,
|
|
@@ -47,11 +47,11 @@ import '../../../index17.css';const Q = "_cardLink_14uy9_1", Y = "_card_14uy9_1"
|
|
|
47
47
|
"image-bottom": e.imageBottom,
|
|
48
48
|
"image-only": e.imageOnly
|
|
49
49
|
};
|
|
50
|
-
function pe({ value:
|
|
51
|
-
if (!
|
|
52
|
-
const s = 125, r = (s - 10) / 2, n = 2 * Math.PI * r,
|
|
50
|
+
function pe({ value: t }) {
|
|
51
|
+
if (!t.includes("%")) return /* @__PURE__ */ a("div", { className: e.metric });
|
|
52
|
+
const s = 125, r = (s - 10) / 2, n = 2 * Math.PI * r, l = n - parseFloat(t) / 100 * n;
|
|
53
53
|
return /* @__PURE__ */ m("svg", { width: s, height: s, viewBox: `0 0 ${s} ${s}`, children: [
|
|
54
|
-
/* @__PURE__ */
|
|
54
|
+
/* @__PURE__ */ a(
|
|
55
55
|
"circle",
|
|
56
56
|
{
|
|
57
57
|
className: e.outerCircle,
|
|
@@ -61,7 +61,7 @@ function pe({ value: a }) {
|
|
|
61
61
|
fill: "none"
|
|
62
62
|
}
|
|
63
63
|
),
|
|
64
|
-
/* @__PURE__ */
|
|
64
|
+
/* @__PURE__ */ a(
|
|
65
65
|
"circle",
|
|
66
66
|
{
|
|
67
67
|
className: e.innerCircle,
|
|
@@ -70,12 +70,12 @@ function pe({ value: a }) {
|
|
|
70
70
|
r,
|
|
71
71
|
fill: "none",
|
|
72
72
|
strokeDasharray: n,
|
|
73
|
-
strokeDashoffset:
|
|
73
|
+
strokeDashoffset: l,
|
|
74
74
|
strokeLinecap: "round",
|
|
75
75
|
transform: `rotate(-90 ${s / 2} ${s / 2})`
|
|
76
76
|
}
|
|
77
77
|
),
|
|
78
|
-
/* @__PURE__ */
|
|
78
|
+
/* @__PURE__ */ a(
|
|
79
79
|
"text",
|
|
80
80
|
{
|
|
81
81
|
className: e.metricLabel,
|
|
@@ -83,54 +83,54 @@ function pe({ value: a }) {
|
|
|
83
83
|
y: "52%",
|
|
84
84
|
dominantBaseline: "middle",
|
|
85
85
|
textAnchor: "middle",
|
|
86
|
-
children:
|
|
86
|
+
children: t
|
|
87
87
|
}
|
|
88
88
|
)
|
|
89
89
|
] });
|
|
90
90
|
}
|
|
91
91
|
function be({
|
|
92
|
-
callToAction:
|
|
92
|
+
callToAction: t,
|
|
93
93
|
resolvedUrl: s,
|
|
94
94
|
children: r
|
|
95
95
|
}) {
|
|
96
|
-
var n,
|
|
97
|
-
switch (
|
|
96
|
+
var n, l;
|
|
97
|
+
switch (t == null ? void 0 : t.type) {
|
|
98
98
|
case "link":
|
|
99
|
-
return /* @__PURE__ */
|
|
99
|
+
return /* @__PURE__ */ a(
|
|
100
100
|
"a",
|
|
101
101
|
{
|
|
102
102
|
className: e.cardLink,
|
|
103
|
-
"aria-label":
|
|
103
|
+
"aria-label": t.ariaLabel || t.label,
|
|
104
104
|
href: s,
|
|
105
|
-
target: ((n =
|
|
106
|
-
rel: ((
|
|
105
|
+
target: ((n = t.linkOptions) == null ? void 0 : n.linkType) === "external" ? "_blank" : "_self",
|
|
106
|
+
rel: ((l = t.linkOptions) == null ? void 0 : l.linkType) === "external" ? "noopener noreferrer" : "",
|
|
107
107
|
children: r
|
|
108
108
|
}
|
|
109
109
|
);
|
|
110
110
|
case "modal":
|
|
111
|
-
return /* @__PURE__ */
|
|
112
|
-
|
|
111
|
+
return /* @__PURE__ */ a(
|
|
112
|
+
N,
|
|
113
113
|
{
|
|
114
114
|
className: e.modalTrigger,
|
|
115
115
|
trigger: r,
|
|
116
|
-
content:
|
|
116
|
+
content: t.modalContent
|
|
117
117
|
}
|
|
118
118
|
);
|
|
119
119
|
case "video":
|
|
120
|
-
return /* @__PURE__ */
|
|
121
|
-
|
|
120
|
+
return /* @__PURE__ */ a(
|
|
121
|
+
N,
|
|
122
122
|
{
|
|
123
123
|
className: e.modalTrigger,
|
|
124
124
|
trigger: r,
|
|
125
|
-
content: /* @__PURE__ */
|
|
125
|
+
content: /* @__PURE__ */ a("video", { src: t.videoUrl, controls: !0, autoPlay: !0 })
|
|
126
126
|
}
|
|
127
127
|
);
|
|
128
128
|
case "download":
|
|
129
|
-
return /* @__PURE__ */
|
|
129
|
+
return /* @__PURE__ */ a(
|
|
130
130
|
"a",
|
|
131
131
|
{
|
|
132
132
|
className: e.cardLink,
|
|
133
|
-
"aria-label":
|
|
133
|
+
"aria-label": t.ariaLabel || t.label,
|
|
134
134
|
href: s,
|
|
135
135
|
download: !0,
|
|
136
136
|
target: "_blank",
|
|
@@ -139,53 +139,52 @@ function be({
|
|
|
139
139
|
}
|
|
140
140
|
);
|
|
141
141
|
default:
|
|
142
|
-
return /* @__PURE__ */
|
|
142
|
+
return /* @__PURE__ */ a(h, { children: r });
|
|
143
143
|
}
|
|
144
144
|
}
|
|
145
145
|
function Oe({
|
|
146
|
-
style:
|
|
146
|
+
style: t,
|
|
147
147
|
variant: s = "noImage",
|
|
148
148
|
metricValue: r,
|
|
149
149
|
eyebrow: n,
|
|
150
|
-
title:
|
|
150
|
+
title: l,
|
|
151
151
|
description: _,
|
|
152
152
|
image: c,
|
|
153
153
|
icon: u,
|
|
154
154
|
callToAction: o,
|
|
155
|
-
onHover:
|
|
156
|
-
onLeave:
|
|
155
|
+
onHover: k,
|
|
156
|
+
onLeave: L,
|
|
157
157
|
gridArea: g,
|
|
158
|
-
styleOptions:
|
|
158
|
+
styleOptions: B,
|
|
159
159
|
renderImage: y,
|
|
160
|
-
renderRichText:
|
|
160
|
+
renderRichText: i
|
|
161
161
|
}) {
|
|
162
|
-
const { mode: f } = j(), p = U("(max-width: 767px)"),
|
|
162
|
+
const { mode: f } = j(), p = U("(max-width: 767px)"), I = W(B), C = P(o), d = z(c, f), b = F(c, f), w = D(c, p), O = (c == null ? void 0 : c.layout) === "cover", M = v[t ?? "image-top"] ?? v["image-top"], x = c && d ? /* @__PURE__ */ a("div", { className: e.imageWrapper, children: y ? y({
|
|
163
163
|
src: d,
|
|
164
164
|
alt: b,
|
|
165
165
|
width: 600,
|
|
166
166
|
height: 658,
|
|
167
|
-
style:
|
|
168
|
-
}) : /* @__PURE__ */
|
|
167
|
+
style: w
|
|
168
|
+
}) : /* @__PURE__ */ a(
|
|
169
169
|
"img",
|
|
170
170
|
{
|
|
171
171
|
src: d,
|
|
172
172
|
alt: b,
|
|
173
173
|
width: 600,
|
|
174
|
-
height: 658
|
|
175
|
-
style: N
|
|
174
|
+
height: 658
|
|
176
175
|
}
|
|
177
|
-
) }) : null, S = !r && !n && !
|
|
176
|
+
) }) : null, S = !r && !n && !l && !_, $ = /* @__PURE__ */ m(h, { children: [
|
|
178
177
|
/* @__PURE__ */ m(
|
|
179
178
|
"div",
|
|
180
179
|
{
|
|
181
180
|
className: `${e.container} ${O ? e.fullBleedImage : e.containImage}`,
|
|
182
181
|
children: [
|
|
183
182
|
s !== "image" && !S && /* @__PURE__ */ m("div", { className: e.content, children: [
|
|
184
|
-
u && /* @__PURE__ */
|
|
185
|
-
r && /* @__PURE__ */
|
|
186
|
-
n && (
|
|
187
|
-
|
|
188
|
-
_ && (
|
|
183
|
+
u && /* @__PURE__ */ a("div", { className: e.icon, children: /* @__PURE__ */ a("i", { className: u }) }),
|
|
184
|
+
r && /* @__PURE__ */ a(pe, { value: r }),
|
|
185
|
+
n && (i == null ? void 0 : i({ blocks: n, className: e.eyebrow })),
|
|
186
|
+
l && (i == null ? void 0 : i({ blocks: l, className: e.title })),
|
|
187
|
+
_ && (i == null ? void 0 : i({
|
|
189
188
|
blocks: _,
|
|
190
189
|
className: e.description
|
|
191
190
|
}))
|
|
@@ -195,27 +194,27 @@ function Oe({
|
|
|
195
194
|
}
|
|
196
195
|
),
|
|
197
196
|
(o == null ? void 0 : o.videoUrl) && /* @__PURE__ */ m("div", { className: e.callToAction, children: [
|
|
198
|
-
/* @__PURE__ */
|
|
199
|
-
/* @__PURE__ */
|
|
197
|
+
/* @__PURE__ */ a("div", { className: e.label, children: o.label }),
|
|
198
|
+
/* @__PURE__ */ a("div", { className: e.cardIcon, children: /* @__PURE__ */ a(E, { size: 45 }) })
|
|
200
199
|
] }),
|
|
201
200
|
(o == null ? void 0 : o.type) === "link" && /* @__PURE__ */ m("div", { className: e.callToAction, children: [
|
|
202
|
-
/* @__PURE__ */
|
|
203
|
-
/* @__PURE__ */
|
|
201
|
+
/* @__PURE__ */ a("div", { className: e.label, children: o.label }),
|
|
202
|
+
/* @__PURE__ */ a("div", { className: e.cardIcon, children: /* @__PURE__ */ a(G, { size: 45 }) })
|
|
204
203
|
] })
|
|
205
204
|
] });
|
|
206
|
-
return /* @__PURE__ */
|
|
205
|
+
return /* @__PURE__ */ a(
|
|
207
206
|
"div",
|
|
208
207
|
{
|
|
209
208
|
className: [
|
|
210
|
-
|
|
209
|
+
I,
|
|
211
210
|
e.card,
|
|
212
211
|
M,
|
|
213
212
|
e[s] ?? ""
|
|
214
213
|
].filter(Boolean).join(" "),
|
|
215
|
-
onMouseEnter:
|
|
216
|
-
onMouseLeave:
|
|
214
|
+
onMouseEnter: k,
|
|
215
|
+
onMouseLeave: L,
|
|
217
216
|
style: g && !p ? { gridArea: g } : {},
|
|
218
|
-
children: /* @__PURE__ */
|
|
217
|
+
children: /* @__PURE__ */ a(be, { callToAction: o, resolvedUrl: C, children: $ })
|
|
219
218
|
}
|
|
220
219
|
);
|
|
221
220
|
}
|