quirk-ui 0.0.313 → 0.0.315

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