quirk-ui 0.0.307 → 0.0.309

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