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