quirk-ui 0.0.309 → 0.0.310

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.
Files changed (4) hide show
  1. package/dist/next/blocks/HeroBlock/index.js +146 -180
  2. package/dist/next/ui/PortableTextRenderer/index.js +2031 -11
  3. package/package.json +1 -1
  4. package/dist/index-BDYug81X.js +0 -2036
package/dist/next/blocks/HeroBlock/index.js CHANGED
@@ -1,299 +1,265 @@
1
- import { jsx as e, jsxs as o, Fragment as v } from "react/jsx-runtime";
2
- import { useState as z, useRef as E, useEffect as F } from "react";
3
- import { useHeroContext as H } from "./HeroContext.js";
4
- import { R as n, I as N } from "../../../index-BDYug81X.js";
5
- import { CallToActions as p } from "../../ui/CallToActions/index.js";
6
- import { usePrefersReducedMotion as S } from "../../hooks/usePrefersReducedMotion.js";
7
- import { c as T } from "../../../createLucideIcon-C8GTh_Qx.js";
8
- import { P as W } from "../../../index-ClN4LY9C.js";
1
+ import { jsx as e, jsxs as c, Fragment as w } from "react/jsx-runtime";
2
+ import { useState as R, useRef as F, useEffect as I } from "react";
3
+ import { useHeroContext as S } from "./HeroContext.js";
4
+ import { RichText as i } from "../../ui/PortableTextRenderer/index.js";
5
+ import { CallToActions as f } from "../../ui/CallToActions/index.js";
6
+ import { usePrefersReducedMotion as W } from "../../hooks/usePrefersReducedMotion.js";
7
+ import { c as z } from "../../../createLucideIcon-C8GTh_Qx.js";
8
+ import { P as L } from "../../../index-ClN4LY9C.js";
9
9
  import '../../../assets/index45.css';/**
10
10
  * @license lucide-react v0.488.0 - ISC
11
11
  *
12
12
  * This source code is licensed under the ISC license.
13
13
  * See the LICENSE file in the root directory of this source tree.
14
14
  */
15
- const j = [
15
+ const E = [
16
16
  ["rect", { x: "14", y: "4", width: "4", height: "16", rx: "1", key: "zuxfzm" }],
17
17
  ["rect", { x: "6", y: "4", width: "4", height: "16", rx: "1", key: "1okwgv" }]
18
- ], L = T("pause", j), M = "_hero_c7i2h_1", V = "_container_c7i2h_7", Y = "_eyebrow_c7i2h_27", G = "_disclaimer_c7i2h_31", K = "_text_c7i2h_36", Q = "_articleDetails_c7i2h_43", U = "_articleType_c7i2h_56", q = "_articleCategories_c7i2h_69", J = "_category_c7i2h_75", X = "_number_c7i2h_90", Z = "_blog_c7i2h_117", O = "_overlay_c7i2h_141", A = "_fullBleed_c7i2h_211", D = "_split_c7i2h_305", g = "_image_c7i2h_310", ee = "_videoControl_c7i2h_333", le = "_videoWrapper_c7i2h_354", re = "_videoBackground_c7i2h_374", se = "_iframe_c7i2h_375", l = {
19
- hero: M,
20
- container: V,
21
- eyebrow: Y,
22
- disclaimer: G,
23
- text: K,
24
- articleDetails: Q,
25
- articleType: U,
26
- articleCategories: q,
27
- category: J,
28
- number: X,
18
+ ], H = z("pause", E), V = "_hero_c7i2h_1", Y = "_container_c7i2h_7", j = "_eyebrow_c7i2h_27", M = "_disclaimer_c7i2h_31", T = "_text_c7i2h_36", q = "_articleDetails_c7i2h_43", G = "_articleType_c7i2h_56", J = "_articleCategories_c7i2h_69", K = "_category_c7i2h_75", Q = "_number_c7i2h_90", U = "_blog_c7i2h_117", X = "_overlay_c7i2h_141", Z = "_fullBleed_c7i2h_211", O = "_split_c7i2h_305", A = "_videoControl_c7i2h_333", g = "_videoWrapper_c7i2h_354", D = "_videoBackground_c7i2h_374", ee = "_iframe_c7i2h_375", l = {
19
+ hero: V,
20
+ container: Y,
21
+ eyebrow: j,
22
+ disclaimer: M,
23
+ text: T,
24
+ articleDetails: q,
25
+ articleType: G,
26
+ articleCategories: J,
27
+ category: K,
28
+ number: Q,
29
29
  default: "_default_c7i2h_113",
30
- blog: Z,
31
- overlay: O,
32
- fullBleed: A,
33
- split: D,
34
- image: g,
35
- videoControl: ee,
36
- videoWrapper: le,
37
- videoBackground: re,
38
- iframe: se
30
+ blog: U,
31
+ overlay: X,
32
+ fullBleed: Z,
33
+ split: O,
34
+ videoControl: A,
35
+ videoWrapper: g,
36
+ videoBackground: D,
37
+ iframe: ee
39
38
  };
40
- function ye({
41
- heading: t,
42
- image: r,
43
- video: s,
44
- callToAction: u,
45
- pageData: c,
46
- styleOptions: _
39
+ function ue({
40
+ heading: s,
41
+ image: u,
42
+ video: r,
43
+ callToAction: n,
44
+ pageData: o,
45
+ styleOptions: b
47
46
  }) {
48
- var P, R;
49
- console.log("QUIRK HERO"), console.log("IMAGE", r);
50
- const a = S(), [k, x] = z(!a), { setIsFullbleedHeroAtTop: C } = H(), y = E(null), d = (_ == null ? void 0 : _.layout) ?? "default", b = {
47
+ var B, P;
48
+ const d = W(), [v, k] = R(!d), { setIsFullbleedHeroAtTop: $ } = S(), m = F(null), a = (b == null ? void 0 : b.layout) ?? "default", p = {
51
49
  default: l.default,
52
50
  split: l.split,
53
51
  "full-bleed": l.fullBleed,
54
52
  blog: l.blog
55
- }[d], $ = (P = c == null ? void 0 : c.categories) != null && P.length ? c == null ? void 0 : c.categories[0] : null, f = (R = c == null ? void 0 : c.categories) != null && R.length ? c == null ? void 0 : c.categories[1] : null;
56
- F(() => {
57
- const i = () => {
58
- C(window.scrollY === 0);
53
+ }[a], x = (B = o == null ? void 0 : o.categories) != null && B.length ? o == null ? void 0 : o.categories[0] : null, _ = (P = o == null ? void 0 : o.categories) != null && P.length ? o == null ? void 0 : o.categories[1] : null;
54
+ I(() => {
55
+ const t = () => {
56
+ $(window.scrollY === 0);
59
57
  };
60
- if (d === "full-bleed" && typeof window < "u")
61
- return C(!0), window.addEventListener("scroll", i), () => window.removeEventListener("scroll", i);
62
- }, [d]), F(() => {
63
- const i = y.current;
64
- i && (a ? i.pause() : i.play());
65
- }, [a]);
66
- const B = () => {
67
- if (!s) return null;
68
- const i = s.includes("vimeo.com"), m = s.includes("youtube.com") || s.includes("youtu.be");
69
- return i || m ? /* @__PURE__ */ e("div", { className: l.videoWrapper, children: /* @__PURE__ */ e(
58
+ if (a === "full-bleed" && typeof window < "u")
59
+ return $(!0), window.addEventListener("scroll", t), () => window.removeEventListener("scroll", t);
60
+ }, [a]), I(() => {
61
+ const t = m.current;
62
+ t && (d ? t.pause() : t.play());
63
+ }, [d]);
64
+ const C = () => {
65
+ if (!r) return null;
66
+ const t = r.includes("vimeo.com"), y = r.includes("youtube.com") || r.includes("youtu.be");
67
+ return t || y ? /* @__PURE__ */ e("div", { className: l.videoWrapper, children: /* @__PURE__ */ e(
70
68
  "iframe",
71
69
  {
72
- src: i ? `${s}?autoplay=1&muted=1&loop=1&background=1` : `${s}?autoplay=1&mute=1&loop=1&playlist=${w(
73
- s
70
+ src: t ? `${r}?autoplay=1&muted=1&loop=1&background=1` : `${r}?autoplay=1&mute=1&loop=1&playlist=${N(
71
+ r
74
72
  )}`,
75
73
  allow: "autoplay; fullscreen",
76
74
  allowFullScreen: !0
77
75
  }
78
- ) }) : /* @__PURE__ */ o("div", { className: l.videoWrapper, children: [
76
+ ) }) : /* @__PURE__ */ c("div", { className: l.videoWrapper, children: [
79
77
  h,
80
78
  /* @__PURE__ */ e(
81
79
  "video",
82
80
  {
83
- ref: y,
84
- src: s,
85
- autoPlay: !a,
81
+ ref: m,
82
+ src: r,
83
+ autoPlay: !d,
86
84
  loop: !0,
87
85
  muted: !0,
88
86
  playsInline: !0,
89
- poster: (r == null ? void 0 : r.asset.url) || void 0
87
+ poster: (u == null ? void 0 : u.asset.url) || void 0
90
88
  }
91
89
  )
92
90
  ] });
93
91
  }, h = /* @__PURE__ */ e(
94
92
  "button",
95
93
  {
96
- title: `${k ? "Pause the video" : "Play the video"}`,
94
+ title: `${v ? "Pause the video" : "Play the video"}`,
97
95
  className: l.videoControl,
98
96
  onClick: () => {
99
- const i = y.current;
100
- i && (i.paused ? (i.play().catch(() => {
101
- }), x(!0)) : (i.pause(), x(!1)));
97
+ const t = m.current;
98
+ t && (t.paused ? (t.play().catch(() => {
99
+ }), k(!0)) : (t.pause(), k(!1)));
102
100
  },
103
- children: k ? /* @__PURE__ */ e(L, { size: 18 }) : /* @__PURE__ */ e(W, { size: 18 })
101
+ children: v ? /* @__PURE__ */ e(H, { size: 18 }) : /* @__PURE__ */ e(L, { size: 18 })
104
102
  }
105
103
  );
106
- function w(i) {
107
- const m = i.match(/(?:youtube\.com\/.*v=|youtu\.be\/)([^&?/]+)/);
108
- return (m == null ? void 0 : m[1]) || "";
104
+ function N(t) {
105
+ const y = t.match(/(?:youtube\.com\/.*v=|youtu\.be\/)([^&?/]+)/);
106
+ return (y == null ? void 0 : y[1]) || "";
109
107
  }
110
- const I = () => r ? /* @__PURE__ */ e("div", { className: l.image, children: /* @__PURE__ */ e(
111
- N,
112
- {
113
- src: r.asset.url,
114
- alt: (r == null ? void 0 : r.asset.altText) || (r == null ? void 0 : r.asset.description) || "Hero image",
115
- width: 600,
116
- height: 658,
117
- priority: !0
118
- }
119
- ) }) : null;
120
- if (d === "split")
121
- return /* @__PURE__ */ e("section", { className: `${l.hero} ${l.split}`, children: /* @__PURE__ */ o("article", { className: l.container, children: [
122
- /* @__PURE__ */ o("div", { className: l.text, children: [
123
- /* @__PURE__ */ o("div", { children: [
124
- t.eyebrow && /* @__PURE__ */ e(n, { className: l.eyebrow, blocks: t.eyebrow }),
125
- /* @__PURE__ */ e(n, { blocks: t.title })
108
+ if (a === "split")
109
+ return /* @__PURE__ */ e("section", { className: `${l.hero} ${l.split}`, children: /* @__PURE__ */ c("article", { className: l.container, children: [
110
+ /* @__PURE__ */ c("div", { className: l.text, children: [
111
+ /* @__PURE__ */ c("div", { children: [
112
+ s.eyebrow && /* @__PURE__ */ e(i, { className: l.eyebrow, blocks: s.eyebrow }),
113
+ /* @__PURE__ */ e(i, { blocks: s.title })
126
114
  ] }),
127
- t.description && /* @__PURE__ */ e(n, { blocks: t.description }),
128
- u && /* @__PURE__ */ e(
129
- p,
115
+ s.description && /* @__PURE__ */ e(i, { blocks: s.description }),
116
+ n && /* @__PURE__ */ e(
117
+ f,
130
118
  {
131
- items: u.items,
132
- alignment: u.alignment
119
+ items: n.items,
120
+ alignment: n.alignment
133
121
  }
134
122
  ),
135
- t.disclaimer && /* @__PURE__ */ e(
136
- n,
123
+ s.disclaimer && /* @__PURE__ */ e(
124
+ i,
137
125
  {
138
126
  className: l.disclaimer,
139
- blocks: t.disclaimer
127
+ blocks: s.disclaimer
140
128
  }
141
129
  )
142
130
  ] }),
143
- s ? B() : I()
131
+ r ? C() : null
144
132
  ] }) });
145
- if (d === "default")
146
- return /* @__PURE__ */ e("section", { className: `${l.hero} ${b}`, children: /* @__PURE__ */ o("article", { className: l.container, children: [
147
- s ? B() : I(),
148
- /* @__PURE__ */ o("div", { className: l.text, children: [
149
- /* @__PURE__ */ o("div", { children: [
150
- t.eyebrow && /* @__PURE__ */ e(n, { className: l.eyebrow, blocks: t.eyebrow }),
151
- /* @__PURE__ */ e(n, { blocks: t.title })
133
+ if (a === "default")
134
+ return /* @__PURE__ */ e("section", { className: `${l.hero} ${p}`, children: /* @__PURE__ */ c("article", { className: l.container, children: [
135
+ r ? C() : null,
136
+ /* @__PURE__ */ c("div", { className: l.text, children: [
137
+ /* @__PURE__ */ c("div", { children: [
138
+ s.eyebrow && /* @__PURE__ */ e(i, { className: l.eyebrow, blocks: s.eyebrow }),
139
+ /* @__PURE__ */ e(i, { blocks: s.title })
152
140
  ] }),
153
- t.description && /* @__PURE__ */ e(n, { blocks: t.description }),
154
- u && /* @__PURE__ */ e(
155
- p,
141
+ s.description && /* @__PURE__ */ e(i, { blocks: s.description }),
142
+ n && /* @__PURE__ */ e(
143
+ f,
156
144
  {
157
- items: u.items,
158
- alignment: u.alignment
145
+ items: n.items,
146
+ alignment: n.alignment
159
147
  }
160
148
  )
161
149
  ] })
162
150
  ] }) });
163
- if (d === "full-bleed")
164
- return /* @__PURE__ */ e("section", { className: `${l.hero} ${b}`, children: /* @__PURE__ */ o("article", { className: l.container, children: [
165
- s ? s.includes("vimeo.com") || s.includes("youtube.com") || s.includes("youtu.be") ? /* @__PURE__ */ e("div", { className: l.videoBackground, children: /* @__PURE__ */ e(
151
+ if (a === "full-bleed")
152
+ return /* @__PURE__ */ e("section", { className: `${l.hero} ${p}`, children: /* @__PURE__ */ c("article", { className: l.container, children: [
153
+ r ? r.includes("vimeo.com") || r.includes("youtube.com") || r.includes("youtu.be") ? /* @__PURE__ */ e("div", { className: l.videoBackground, children: /* @__PURE__ */ e(
166
154
  "iframe",
167
155
  {
168
- src: s.includes("vimeo.com") ? `${s}?autoplay=1&muted=1&loop=1&background=1` : `${s}?autoplay=1&mute=1&loop=1&playlist=${w(
169
- s
156
+ src: r.includes("vimeo.com") ? `${r}?autoplay=1&muted=1&loop=1&background=1` : `${r}?autoplay=1&mute=1&loop=1&playlist=${N(
157
+ r
170
158
  )}`,
171
159
  className: l.iframe,
172
160
  allow: "autoplay; fullscreen",
173
161
  allowFullScreen: !0
174
162
  }
175
- ) }) : /* @__PURE__ */ o(v, { children: [
163
+ ) }) : /* @__PURE__ */ c(w, { children: [
176
164
  h,
177
165
  /* @__PURE__ */ e(
178
166
  "video",
179
167
  {
180
- ref: y,
168
+ ref: m,
181
169
  className: l.videoBackground,
182
- src: s,
183
- autoPlay: !a,
170
+ src: r,
171
+ autoPlay: !d,
184
172
  loop: !0,
185
173
  muted: !0,
186
174
  playsInline: !0,
187
- poster: (r == null ? void 0 : r.asset.url) || void 0
175
+ poster: (u == null ? void 0 : u.asset.url) || void 0
188
176
  }
189
177
  )
190
- ] }) : /* @__PURE__ */ e(
191
- N,
192
- {
193
- src: (r == null ? void 0 : r.asset.url) ?? "",
194
- alt: (r == null ? void 0 : r.asset.altText) || (r == null ? void 0 : r.asset.description) || "Card image",
195
- fill: !0,
196
- priority: !0,
197
- style: { objectFit: "cover" },
198
- draggable: !1,
199
- sizes: "(min-width: 500px) 500px, 100vw"
200
- }
201
- ),
202
- /* @__PURE__ */ e("div", { className: l.overlay, children: /* @__PURE__ */ o("div", { className: l.text, children: [
203
- /* @__PURE__ */ o("div", { children: [
204
- t.eyebrow && /* @__PURE__ */ e(
205
- n,
178
+ ] }) : null,
179
+ /* @__PURE__ */ e("div", { className: l.overlay, children: /* @__PURE__ */ c("div", { className: l.text, children: [
180
+ /* @__PURE__ */ c("div", { children: [
181
+ s.eyebrow && /* @__PURE__ */ e(
182
+ i,
206
183
  {
207
184
  className: l.eyebrow,
208
- blocks: t.eyebrow
185
+ blocks: s.eyebrow
209
186
  }
210
187
  ),
211
- /* @__PURE__ */ e(n, { blocks: t.title })
188
+ /* @__PURE__ */ e(i, { blocks: s.title })
212
189
  ] }),
213
- t.description && /* @__PURE__ */ e(n, { blocks: t.description }),
214
- u && /* @__PURE__ */ e(
215
- p,
190
+ s.description && /* @__PURE__ */ e(i, { blocks: s.description }),
191
+ n && /* @__PURE__ */ e(
192
+ f,
216
193
  {
217
- items: u.items,
218
- alignment: u.alignment
194
+ items: n.items,
195
+ alignment: n.alignment
219
196
  }
220
197
  )
221
198
  ] }) })
222
199
  ] }) });
223
- if (d === "blog")
224
- return /* @__PURE__ */ e("section", { className: `${l.hero} ${b}`, children: /* @__PURE__ */ o("article", { className: l.container, children: [
225
- s ? s.includes("vimeo.com") || s.includes("youtube.com") || s.includes("youtu.be") ? /* @__PURE__ */ e("div", { className: l.videoBackground, children: /* @__PURE__ */ e(
200
+ if (a === "blog")
201
+ return /* @__PURE__ */ e("section", { className: `${l.hero} ${p}`, children: /* @__PURE__ */ c("article", { className: l.container, children: [
202
+ r ? r.includes("vimeo.com") || r.includes("youtube.com") || r.includes("youtu.be") ? /* @__PURE__ */ e("div", { className: l.videoBackground, children: /* @__PURE__ */ e(
226
203
  "iframe",
227
204
  {
228
- src: s.includes("vimeo.com") ? `${s}?autoplay=1&muted=1&loop=1&background=1` : `${s}?autoplay=1&mute=1&loop=1&playlist=${w(
229
- s
205
+ src: r.includes("vimeo.com") ? `${r}?autoplay=1&muted=1&loop=1&background=1` : `${r}?autoplay=1&mute=1&loop=1&playlist=${N(
206
+ r
230
207
  )}`,
231
208
  className: l.iframe,
232
209
  allow: "autoplay; fullscreen",
233
210
  allowFullScreen: !0
234
211
  }
235
- ) }) : /* @__PURE__ */ o(v, { children: [
212
+ ) }) : /* @__PURE__ */ c(w, { children: [
236
213
  h,
237
214
  /* @__PURE__ */ e(
238
215
  "video",
239
216
  {
240
- ref: y,
217
+ ref: m,
241
218
  className: l.videoBackground,
242
- src: s,
243
- autoPlay: !a,
219
+ src: r,
220
+ autoPlay: !d,
244
221
  loop: !0,
245
222
  muted: !0,
246
223
  playsInline: !0,
247
- poster: (r == null ? void 0 : r.asset.url) || void 0
224
+ poster: (u == null ? void 0 : u.asset.url) || void 0
248
225
  }
249
226
  )
250
- ] }) : /* @__PURE__ */ e(
251
- N,
252
- {
253
- src: (r == null ? void 0 : r.asset.url) ?? "",
254
- alt: (r == null ? void 0 : r.asset.altText) || (r == null ? void 0 : r.asset.description) || "Card image",
255
- fill: !0,
256
- priority: !0,
257
- style: { objectFit: "cover" },
258
- draggable: !1,
259
- sizes: "(min-width: 500px) 500px, 100vw"
260
- }
261
- ),
262
- /* @__PURE__ */ e("div", { className: l.overlay, children: /* @__PURE__ */ o("div", { className: l.text, children: [
263
- /* @__PURE__ */ o("div", { children: [
264
- t.eyebrow && /* @__PURE__ */ e(
265
- n,
227
+ ] }) : null,
228
+ /* @__PURE__ */ e("div", { className: l.overlay, children: /* @__PURE__ */ c("div", { className: l.text, children: [
229
+ /* @__PURE__ */ c("div", { children: [
230
+ s.eyebrow && /* @__PURE__ */ e(
231
+ i,
266
232
  {
267
233
  className: l.eyebrow,
268
- blocks: t.eyebrow
234
+ blocks: s.eyebrow
269
235
  }
270
236
  ),
271
- c && /* @__PURE__ */ o("div", { className: l.articleDetails, children: [
272
- c.articleType && /* @__PURE__ */ e("div", { className: l.articleType, children: c.articleType }),
273
- /* @__PURE__ */ o("div", { className: l.articleCategories, children: [
274
- $ && /* @__PURE__ */ e("span", { className: l.category, children: $.title }),
275
- f && f.title.toLowerCase() !== "library" && !f.slug.current.includes(
237
+ o && /* @__PURE__ */ c("div", { className: l.articleDetails, children: [
238
+ o.articleType && /* @__PURE__ */ e("div", { className: l.articleType, children: o.articleType }),
239
+ /* @__PURE__ */ c("div", { className: l.articleCategories, children: [
240
+ x && /* @__PURE__ */ e("span", { className: l.category, children: x.title }),
241
+ _ && _.title.toLowerCase() !== "library" && !_.slug.current.includes(
276
242
  "keywords"
277
- ) && /* @__PURE__ */ e("span", { className: l.category, children: f.title })
243
+ ) && /* @__PURE__ */ e("span", { className: l.category, children: _.title })
278
244
  ] }),
279
- c.timeToRead && /* @__PURE__ */ e(v, { children: /* @__PURE__ */ o("span", { children: [
280
- /* @__PURE__ */ e("span", { className: l.number, children: c.timeToRead }),
245
+ o.timeToRead && /* @__PURE__ */ e(w, { children: /* @__PURE__ */ c("span", { children: [
246
+ /* @__PURE__ */ e("span", { className: l.number, children: o.timeToRead }),
281
247
  "min read"
282
248
  ] }) })
283
249
  ] }),
284
- /* @__PURE__ */ e(n, { blocks: t.title })
250
+ /* @__PURE__ */ e(i, { blocks: s.title })
285
251
  ] }),
286
- t.description && /* @__PURE__ */ e(n, { blocks: t.description }),
287
- u && /* @__PURE__ */ e(
288
- p,
252
+ s.description && /* @__PURE__ */ e(i, { blocks: s.description }),
253
+ n && /* @__PURE__ */ e(
254
+ f,
289
255
  {
290
- items: u.items,
291
- alignment: u.alignment
256
+ items: n.items,
257
+ alignment: n.alignment
292
258
  }
293
259
  )
294
260
  ] }) })
295
261
  ] }) });
296
262
  }
297
263
  export {
298
- ye as HeroBlock
264
+ ue as HeroBlock
299
265
  };