quirk-ui 0.1.39 → 0.1.40
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/index7.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._content_1v4an_1{width:100%;padding-top:var(--spacing-xl);padding-bottom:var(--spacing-xl)}._container_1v4an_7{display:flex;align-items:center;justify-content:space-between;flex-direction:column;width:100%;max-width:var(--container-max-width, var(--layout-width));margin:0 auto;padding-left:var(--spacing-md);padding-right:var(--spacing-md)}._container_1v4an_7 h1,._container_1v4an_7 h2,._container_1v4an_7 h3,._container_1v4an_7 h4,._container_1v4an_7 h5,._container_1v4an_7 h6{width:100%;margin-block:0}@media (max-width: 767px){._container_1v4an_7{gap:var(--spacing-xl)}}._eyebrow_1v4an_34{font-weight:var(--font-weight-bold)}._metrics_1v4an_38{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--spacing-md);padding:var(--spacing-md)}@media (max-width: 767px){._metrics_1v4an_38{flex-direction:column}}._metric_1v4an_38{flex:1}._metricValue_1v4an_54{font-size:2.5rem;font-weight:var(--font-weight-bold);position:relative;z-index:1;color:var(--color-text-primary)}._metricValue_1v4an_54:after{content:"";display:block;background-color:var(--color-primary-10);width:35px;height:35px;position:absolute;top:-3px;left:-.5rem;z-index:-1;border-radius:var(--radius-md)}._disclaimer_1v4an_75{color:var(--color-text-primary);font-size:var(--font-size-sm)}._layoutHImageRight_1v4an_80{flex-direction:row;gap:var(--gap, 5rem)}._layoutHImageRight_1v4an_80 ._heading_1v4an_84{gap:var(--spacing-md);flex:.65}._layoutHImageRight_1v4an_80 ._image_1v4an_89{flex:.5}@media (max-width: 768px){._layoutHImageRight_1v4an_80{flex-direction:column-reverse;gap:var(--spacing-lg)}}._noImage_1v4an_99{flex-direction:column}._layoutHImageLeft_1v4an_103{flex-direction:row-reverse;gap:var(--gap, 5rem)}._layoutHImageLeft_1v4an_103 ._heading_1v4an_84{gap:var(--spacing-md);flex:.65}._layoutHImageLeft_1v4an_103 ._image_1v4an_89{flex:.5}@media (max-width: 768px){._layoutHImageLeft_1v4an_103{flex-direction:column-reverse;gap:var(--spacing-lg)}}._layoutVImageTop_1v4an_122{flex-direction:column-reverse;gap:var(--gap, var(--spacing-md))}._layoutVImageTop_1v4an_122 ._heading_1v4an_84{gap:var(--spacing-md)}@media (max-width: 768px){._layoutVImageTop_1v4an_122{gap:var(--spacing-lg)}}._layoutVImageBottom_1v4an_135{flex-direction:column;gap:var(--gap, var(--spacing-md))}._layoutVImageBottom_1v4an_135 ._heading_1v4an_84{gap:var(--spacing-md)}@media (max-width: 768px){._layoutVImageBottom_1v4an_135{gap:var(--spacing-lg)}}._heading_1v4an_84{display:flex;flex-direction:column;width:100%;gap:var(--spacing-md)}._heading_1v4an_84:not(:has(._text_1v4an_154 .portableTextContainer)){gap:var(--spacing-lg)}._title_1v4an_159{text-wrap:pretty}._text_1v4an_154{flex:1;display:flex;justify-content:center;flex-direction:column;gap:var(--spacing-lg)}@media (max-width: 767px){._text_1v4an_154{flex:1;width:100%;align-items:flex-start}}._cta_1v4an_178{width:100%}@media (max-width: 767px){._cta_1v4an_178{justify-content:flex-start}}._headingHorizontal_1v4an_186{flex-direction:row;justify-content:space-between;gap:5rem}@media (max-width: 767px){._headingHorizontal_1v4an_186{gap:var(--spacing-md)}}._headingHorizontal_1v4an_186 ._titleWrapper_1v4an_195,._headingHorizontal_1v4an_186 .portableTextContainer{flex:1}._headingHorizontal_1v4an_186 ._title_1v4an_159{margin-bottom:0}._headingHorizontal_1v4an_186 p._title_1v4an_159{margin-top:1rem}@media (max-width: 768px){._headingHorizontal_1v4an_186{flex-direction:column}}._headingVertical_1v4an_216{flex-direction:column;justify-content:flex-start}._image_1v4an_89{display:flex;align-items:center;justify-content:center;flex:1;width:100%;margin:0 auto;line-height:0}._image_1v4an_89 img{width:100%;height:auto}._videoWrapper_1v4an_237{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius-md);flex:1}._videoWrapper_1v4an_237 iframe,._videoWrapper_1v4an_237 video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}._default_1v4an_257{display:block}._default_1v4an_257 img{border-radius:var(--radius-md)}._maxWidth_1v4an_265{margin:0 auto}._maxWidth_1v4an_265 img{max-width:var(--max-width, var(--layout-width));border-radius:var(--radius-md);height:auto}._fullBleed_1v4an_275{width:100%;max-width:unset;border-radius:var(--radius-md);overflow:hidden}.blog ._container_1v4an_7{max-width:var(--blog-width)}.centered ._heading_1v4an_84{gap:var(--spacing-md);align-items:center;justify-content:center}.centered ._text_1v4an_154{align-items:center}.centered ._cta_1v4an_178{justify-content:center}.backgroundPrimary ._text_1v4an_154 p,.backgroundPrimary ._text_1v4an_154 p a,.backgroundPrimary ._metricValue_1v4an_54{color:#fff}.backgroundPrimary ._metricValue_1v4an_54:after{background-color:var(--color-secondary-100)}.backgroundPrimary ._cta_1v4an_178 ._secondary_1v4an_316{background-color:#fff}.split-35-65 ._heading_1v4an_84{flex:.35}._layoutSplitText_1v4an_329{flex-direction:row;align-items:flex-start;gap:var(--gap, 5rem)}@media (max-width: 768px){._layoutSplitText_1v4an_329{flex-direction:column;gap:var(--spacing-lg)}}._layoutSplitText_1v4an_329 ._heading_1v4an_84{flex:.5}._additionalContent_1v4an_344{flex:.5;display:flex;flex-direction:column;gap:var(--spacing-md)}@media (max-width: 768px){._additionalContent_1v4an_344{flex:1;width:100%}}._imageRadius-sm_1v4an_356{border-radius:var(--radius-sm)}._imageRadius-md_1v4an_359{border-radius:var(--radius-md)}._imageRadius-lg_1v4an_362{border-radius:var(--radius-lg)}._imageRadius-full_1v4an_365{border-radius:var(--radius-full)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index7.css');const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index7.css');const a=require("react/jsx-runtime"),k=require("../../hooks/useStyleClasses.cjs"),H=require("../../../core/context/ThemeContext.cjs"),W=require("../../hooks/useMediaQuery.cjs"),v=require("../../utils/mediaUtils.cjs"),z="_content_1v4an_1",$="_container_1v4an_7",L="_eyebrow_1v4an_34",B="_metrics_1v4an_38",C="_metric_1v4an_38",q="_metricValue_1v4an_54",M="_disclaimer_1v4an_75",U="_layoutHImageRight_1v4an_80",D="_heading_1v4an_84",E="_image_1v4an_89",Q="_noImage_1v4an_99",Y="_layoutHImageLeft_1v4an_103",F="_layoutVImageTop_1v4an_122",G="_layoutVImageBottom_1v4an_135",P="_text_1v4an_154",J="_title_1v4an_159",K="_cta_1v4an_178",X="_headingHorizontal_1v4an_186",Z="_titleWrapper_1v4an_195",O="_headingVertical_1v4an_216",A="_videoWrapper_1v4an_237",T="_layoutSplitText_1v4an_329",R="_additionalContent_1v4an_344",t={content:z,container:$,eyebrow:L,metrics:B,metric:C,metricValue:q,disclaimer:M,layoutHImageRight:U,heading:D,image:E,noImage:Q,layoutHImageLeft:Y,layoutVImageTop:F,layoutVImageBottom:G,text:P,title:J,cta:K,headingHorizontal:X,titleWrapper:Z,headingVertical:O,videoWrapper:A,layoutSplitText:T,additionalContent:R},tt={"no-image":t.noImage,"split-text":t.layoutSplitText,"horizontal-image-right":t.layoutHImageRight,"horizontal-image-left":t.layoutHImageLeft,"vertical-image-top":t.layoutVImageTop,"vertical-image-bottom":t.layoutVImageBottom},st={horizontal:t.headingHorizontal,vertical:t.headingVertical};function at(s,n,i){const e=s.includes("vimeo.com"),c=s.includes("youtube.com")||s.includes("youtu.be");return e||c?a.jsx("div",{style:{maxWidth:i??"unset",flex:.65},children:a.jsx("div",{className:t.videoWrapper,children:a.jsx("iframe",{src:e?`${s}?autoplay=0&muted=0&loop=0`:`${s}?autoplay=0&mute=0&loop=0`,allow:"autoplay; fullscreen",allowFullScreen:!0})})}):a.jsx("div",{style:{maxWidth:i??"unset",width:"100%",flex:.65},children:a.jsx("div",{className:t.videoWrapper,children:a.jsx("video",{src:s,controls:!0,poster:n})})})}function et({metrics:s,renderRichText:n}){return a.jsx("div",{className:t.metrics,children:s.map(i=>a.jsxs("div",{className:t.metric,children:[a.jsx("div",{className:t.metricValue,children:i.metricValue}),i.metricDescription&&(n==null?void 0:n({blocks:i.metricDescription}))]},i._key))})}function ot({layout:s,heading:n,additionalContent:i,image:e,video:c,metrics:r,callToAction:l,disclaimer:g,styleOptions:_,id:b,renderImage:p,renderRichText:o,renderCallToAction:u}){var V;const{mode:d}=H.useTheme(),j=k.useStyleClasses(_),x=W.useMediaQuery("(max-width: 768px)")??!1,m=v.resolveImageUrl(e,d),h=v.resolveAltText(e,d),y=v.resolveImageStyle(e,x),w=tt[(s==null?void 0:s.orientation)??"horizontal-image-right"],S=st[n.headingLayout??"horizontal"],f={"--container-max-width":(_==null?void 0:_.maxWidth)??"unset","--gap":s==null?void 0:s.gap,"--max-width":(e==null?void 0:e.sizing)==="inset"?e==null?void 0:e.maxWidth:"unset"},I=(s==null?void 0:s.orientation)==="split-text",N=!I&&(s==null?void 0:s.orientation)!=="no-image";return a.jsx("section",{id:b,className:`${j} ${t.content}`,children:a.jsxs("article",{className:`${t.container} ${w}`,style:f,children:[a.jsxs("div",{className:`${t.heading} ${S}`,children:[a.jsxs("div",{className:t.titleWrapper,children:[n.eyebrow&&(o==null?void 0:o({blocks:n.eyebrow,className:t.eyebrow})),n.title&&(o==null?void 0:o({blocks:n.title,className:t.title}))]}),n.description||(V=l==null?void 0:l.items)!=null&&V.length?a.jsxs("div",{className:t.text,children:[n.description&&(o==null?void 0:o({blocks:n.description})),r&&r.length>0&&a.jsx(et,{metrics:r,renderRichText:o}),l&&(u==null?void 0:u({items:l.items,alignment:l.alignment,className:t.cta})),g&&(o==null?void 0:o({blocks:g,className:t.disclaimer}))]}):null]}),I&&i&&a.jsx("div",{className:t.additionalContent,children:o==null?void 0:o({blocks:i})}),N&&c?at(c,m,e==null?void 0:e.maxWidth):N&&e&&m?a.jsx("div",{className:t.image,children:p?p({src:m,alt:h,width:600,height:400,priority:!0,style:y}):a.jsx("img",{src:m,alt:h,width:600,height:400,style:{width:"100%",height:"auto",...y}})}):null]})})}exports.ContentBlock=ot;
|
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useStyleClasses as
|
|
3
|
-
import { useTheme as
|
|
4
|
-
import { useMediaQuery as
|
|
5
|
-
import { resolveImageUrl as
|
|
6
|
-
import '../../../index7.css';const
|
|
7
|
-
content:
|
|
8
|
-
container:
|
|
9
|
-
eyebrow:
|
|
10
|
-
metrics:
|
|
11
|
-
metric:
|
|
12
|
-
metricValue:
|
|
13
|
-
disclaimer:
|
|
14
|
-
layoutHImageRight:
|
|
15
|
-
heading:
|
|
16
|
-
image:
|
|
17
|
-
noImage:
|
|
18
|
-
layoutHImageLeft:
|
|
19
|
-
layoutVImageTop:
|
|
20
|
-
layoutVImageBottom:
|
|
21
|
-
text:
|
|
22
|
-
title:
|
|
23
|
-
cta:
|
|
1
|
+
import { jsx as n, jsxs as c } from "react/jsx-runtime";
|
|
2
|
+
import { useStyleClasses as k } from "../../hooks/useStyleClasses.mjs";
|
|
3
|
+
import { useTheme as z } from "../../../core/context/ThemeContext.mjs";
|
|
4
|
+
import { useMediaQuery as L } from "../../hooks/useMediaQuery.mjs";
|
|
5
|
+
import { resolveImageUrl as $, resolveAltText as B, resolveImageStyle as C } from "../../utils/mediaUtils.mjs";
|
|
6
|
+
import '../../../index7.css';const M = "_content_1v4an_1", D = "_container_1v4an_7", U = "_eyebrow_1v4an_34", j = "_metrics_1v4an_38", E = "_metric_1v4an_38", Y = "_metricValue_1v4an_54", F = "_disclaimer_1v4an_75", G = "_layoutHImageRight_1v4an_80", Q = "_heading_1v4an_84", q = "_image_1v4an_89", J = "_noImage_1v4an_99", K = "_layoutHImageLeft_1v4an_103", P = "_layoutVImageTop_1v4an_122", X = "_layoutVImageBottom_1v4an_135", Z = "_text_1v4an_154", O = "_title_1v4an_159", x = "_cta_1v4an_178", A = "_headingHorizontal_1v4an_186", R = "_titleWrapper_1v4an_195", T = "_headingVertical_1v4an_216", tt = "_videoWrapper_1v4an_237", at = "_layoutSplitText_1v4an_329", ot = "_additionalContent_1v4an_344", t = {
|
|
7
|
+
content: M,
|
|
8
|
+
container: D,
|
|
9
|
+
eyebrow: U,
|
|
10
|
+
metrics: j,
|
|
11
|
+
metric: E,
|
|
12
|
+
metricValue: Y,
|
|
13
|
+
disclaimer: F,
|
|
14
|
+
layoutHImageRight: G,
|
|
15
|
+
heading: Q,
|
|
16
|
+
image: q,
|
|
17
|
+
noImage: J,
|
|
18
|
+
layoutHImageLeft: K,
|
|
19
|
+
layoutVImageTop: P,
|
|
20
|
+
layoutVImageBottom: X,
|
|
21
|
+
text: Z,
|
|
22
|
+
title: O,
|
|
23
|
+
cta: x,
|
|
24
24
|
headingHorizontal: A,
|
|
25
25
|
titleWrapper: R,
|
|
26
26
|
headingVertical: T,
|
|
27
27
|
videoWrapper: tt,
|
|
28
|
-
layoutSplitText:
|
|
29
|
-
additionalContent:
|
|
28
|
+
layoutSplitText: at,
|
|
29
|
+
additionalContent: ot
|
|
30
30
|
}, st = {
|
|
31
31
|
"no-image": t.noImage,
|
|
32
32
|
"split-text": t.layoutSplitText,
|
|
@@ -38,54 +38,54 @@ import '../../../index7.css';const B = "_content_xj7w9_1", C = "_container_xj7w9
|
|
|
38
38
|
horizontal: t.headingHorizontal,
|
|
39
39
|
vertical: t.headingVertical
|
|
40
40
|
};
|
|
41
|
-
function
|
|
42
|
-
const
|
|
43
|
-
return
|
|
41
|
+
function nt(a, e, i) {
|
|
42
|
+
const o = a.includes("vimeo.com"), m = a.includes("youtube.com") || a.includes("youtu.be");
|
|
43
|
+
return o || m ? /* @__PURE__ */ n("div", { style: { maxWidth: i ?? "unset", flex: 0.65 }, children: /* @__PURE__ */ n("div", { className: t.videoWrapper, children: /* @__PURE__ */ n(
|
|
44
44
|
"iframe",
|
|
45
45
|
{
|
|
46
|
-
src:
|
|
46
|
+
src: o ? `${a}?autoplay=0&muted=0&loop=0` : `${a}?autoplay=0&mute=0&loop=0`,
|
|
47
47
|
allow: "autoplay; fullscreen",
|
|
48
48
|
allowFullScreen: !0
|
|
49
49
|
}
|
|
50
|
-
) }) }) : /* @__PURE__ */
|
|
50
|
+
) }) }) : /* @__PURE__ */ n("div", { style: { maxWidth: i ?? "unset", width: "100%", flex: 0.65 }, children: /* @__PURE__ */ n("div", { className: t.videoWrapper, children: /* @__PURE__ */ n("video", { src: a, controls: !0, poster: e }) }) });
|
|
51
51
|
}
|
|
52
|
-
function
|
|
53
|
-
metrics:
|
|
52
|
+
function it({
|
|
53
|
+
metrics: a,
|
|
54
54
|
renderRichText: e
|
|
55
55
|
}) {
|
|
56
|
-
return /* @__PURE__ */
|
|
57
|
-
/* @__PURE__ */
|
|
58
|
-
|
|
59
|
-
] },
|
|
56
|
+
return /* @__PURE__ */ n("div", { className: t.metrics, children: a.map((i) => /* @__PURE__ */ c("div", { className: t.metric, children: [
|
|
57
|
+
/* @__PURE__ */ n("div", { className: t.metricValue, children: i.metricValue }),
|
|
58
|
+
i.metricDescription && (e == null ? void 0 : e({ blocks: i.metricDescription }))
|
|
59
|
+
] }, i._key)) });
|
|
60
60
|
}
|
|
61
61
|
function pt({
|
|
62
|
-
layout:
|
|
62
|
+
layout: a,
|
|
63
63
|
heading: e,
|
|
64
|
-
additionalContent:
|
|
65
|
-
image:
|
|
64
|
+
additionalContent: i,
|
|
65
|
+
image: o,
|
|
66
66
|
video: m,
|
|
67
67
|
metrics: p,
|
|
68
|
-
callToAction:
|
|
69
|
-
disclaimer:
|
|
68
|
+
callToAction: l,
|
|
69
|
+
disclaimer: v,
|
|
70
70
|
styleOptions: _,
|
|
71
|
-
id:
|
|
72
|
-
renderImage:
|
|
71
|
+
id: f,
|
|
72
|
+
renderImage: g,
|
|
73
73
|
renderRichText: s,
|
|
74
74
|
renderCallToAction: u
|
|
75
75
|
}) {
|
|
76
|
-
var
|
|
77
|
-
const { mode: d } =
|
|
76
|
+
var V;
|
|
77
|
+
const { mode: d } = z(), b = k(_), w = L("(max-width: 768px)") ?? !1, r = $(o, d), I = B(o, d), h = C(o, w), H = st[(a == null ? void 0 : a.orientation) ?? "horizontal-image-right"], S = et[e.headingLayout ?? "horizontal"], W = {
|
|
78
78
|
"--container-max-width": (_ == null ? void 0 : _.maxWidth) ?? "unset",
|
|
79
|
-
"--gap":
|
|
80
|
-
"--max-width": (
|
|
81
|
-
},
|
|
82
|
-
return /* @__PURE__ */
|
|
79
|
+
"--gap": a == null ? void 0 : a.gap,
|
|
80
|
+
"--max-width": (o == null ? void 0 : o.sizing) === "inset" ? o == null ? void 0 : o.maxWidth : "unset"
|
|
81
|
+
}, y = (a == null ? void 0 : a.orientation) === "split-text", N = !y && (a == null ? void 0 : a.orientation) !== "no-image";
|
|
82
|
+
return /* @__PURE__ */ n("section", { id: f, className: `${b} ${t.content}`, children: /* @__PURE__ */ c(
|
|
83
83
|
"article",
|
|
84
84
|
{
|
|
85
|
-
className: `${t.container} ${
|
|
86
|
-
style:
|
|
85
|
+
className: `${t.container} ${H}`,
|
|
86
|
+
style: W,
|
|
87
87
|
children: [
|
|
88
|
-
/* @__PURE__ */ c("div", { className: `${t.heading} ${
|
|
88
|
+
/* @__PURE__ */ c("div", { className: `${t.heading} ${S}`, children: [
|
|
89
89
|
/* @__PURE__ */ c("div", { className: t.titleWrapper, children: [
|
|
90
90
|
e.eyebrow && (s == null ? void 0 : s({
|
|
91
91
|
blocks: e.eyebrow,
|
|
@@ -96,42 +96,42 @@ function pt({
|
|
|
96
96
|
className: t.title
|
|
97
97
|
}))
|
|
98
98
|
] }),
|
|
99
|
-
e.description || (
|
|
99
|
+
e.description || (V = l == null ? void 0 : l.items) != null && V.length ? /* @__PURE__ */ c("div", { className: t.text, children: [
|
|
100
100
|
e.description && (s == null ? void 0 : s({ blocks: e.description })),
|
|
101
|
-
p && p.length > 0 && /* @__PURE__ */
|
|
102
|
-
|
|
101
|
+
p && p.length > 0 && /* @__PURE__ */ n(
|
|
102
|
+
it,
|
|
103
103
|
{
|
|
104
104
|
metrics: p,
|
|
105
105
|
renderRichText: s
|
|
106
106
|
}
|
|
107
107
|
),
|
|
108
|
-
|
|
109
|
-
items:
|
|
110
|
-
alignment:
|
|
108
|
+
l && (u == null ? void 0 : u({
|
|
109
|
+
items: l.items,
|
|
110
|
+
alignment: l.alignment,
|
|
111
111
|
className: t.cta
|
|
112
112
|
})),
|
|
113
|
-
|
|
114
|
-
blocks:
|
|
113
|
+
v && (s == null ? void 0 : s({
|
|
114
|
+
blocks: v,
|
|
115
115
|
className: t.disclaimer
|
|
116
116
|
}))
|
|
117
117
|
] }) : null
|
|
118
118
|
] }),
|
|
119
|
-
|
|
120
|
-
|
|
119
|
+
y && i && /* @__PURE__ */ n("div", { className: t.additionalContent, children: s == null ? void 0 : s({ blocks: i }) }),
|
|
120
|
+
N && m ? nt(m, r, o == null ? void 0 : o.maxWidth) : N && o && r ? /* @__PURE__ */ n("div", { className: t.image, children: g ? g({
|
|
121
121
|
src: r,
|
|
122
|
-
alt:
|
|
122
|
+
alt: I,
|
|
123
123
|
width: 600,
|
|
124
124
|
height: 400,
|
|
125
125
|
priority: !0,
|
|
126
|
-
style:
|
|
127
|
-
}) : /* @__PURE__ */
|
|
126
|
+
style: h
|
|
127
|
+
}) : /* @__PURE__ */ n(
|
|
128
128
|
"img",
|
|
129
129
|
{
|
|
130
130
|
src: r,
|
|
131
|
-
alt:
|
|
131
|
+
alt: I,
|
|
132
132
|
width: 600,
|
|
133
133
|
height: 400,
|
|
134
|
-
style: { width: "100%", height: "auto", ...
|
|
134
|
+
style: { width: "100%", height: "auto", ...h }
|
|
135
135
|
}
|
|
136
136
|
) }) : null
|
|
137
137
|
]
|