quirk-ui 0.0.310 → 0.0.312

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/index-Dc6Lwt_I.js +2033 -0
  2. package/dist/main.d.ts +1 -1
  3. package/dist/next/blocks/HeroBlock/index.js +158 -125
  4. package/dist/next/ui/PortableTextRenderer/index.js +11 -2031
  5. package/dist/next.d.ts +1 -1
  6. package/package.json +1 -1
package/dist/main.d.ts CHANGED
@@ -747,7 +747,6 @@ declare interface HeroBlockProps {
747
747
  animateText?: boolean;
748
748
  headingLayout?: "horizontal" | "vertical";
749
749
  };
750
- imageUrl?: string;
751
750
  image?: SanityImage;
752
751
  video?: string;
753
752
  callToAction: {
@@ -1097,6 +1096,7 @@ declare interface SanityImage {
1097
1096
  title: string;
1098
1097
  description: string;
1099
1098
  };
1099
+ imageUrl?: string;
1100
1100
  description?: string;
1101
1101
  layout?: "cover" | "contain" | "none";
1102
1102
  position?: "center" | "top" | "bottom" | "left" | "right" | "top left" | "top right" | "bottom left" | "bottom right";
package/dist/next/blocks/HeroBlock/index.js CHANGED
@@ -1,74 +1,75 @@
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";
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
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";
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";
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 E = [
15
+ const H = [
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
- ], 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,
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
22
  disclaimer: M,
23
- text: T,
24
- articleDetails: q,
25
- articleType: G,
26
- articleCategories: J,
27
- category: K,
28
- number: Q,
23
+ text: q,
24
+ articleDetails: G,
25
+ articleType: J,
26
+ articleCategories: K,
27
+ category: Q,
28
+ number: X,
29
29
  default: "_default_c7i2h_113",
30
- blog: U,
31
- overlay: X,
32
- fullBleed: Z,
33
- split: O,
34
- videoControl: A,
35
- videoWrapper: g,
36
- videoBackground: D,
37
- iframe: ee
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
38
39
  };
39
- function ue({
40
- heading: s,
41
- image: u,
42
- video: r,
43
- callToAction: n,
40
+ function me({
41
+ heading: t,
42
+ image: r,
43
+ video: s,
44
+ callToAction: u,
44
45
  pageData: o,
45
- styleOptions: b
46
+ styleOptions: _
46
47
  }) {
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 = {
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 = {
49
50
  default: l.default,
50
51
  split: l.split,
51
52
  "full-bleed": l.fullBleed,
52
53
  blog: l.blog
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);
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(() => {
56
+ const i = () => {
57
+ C(window.scrollY === 0);
57
58
  };
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(
59
+ if (d === "full-bleed" && typeof window < "u")
60
+ return C(!0), window.addEventListener("scroll", i), () => window.removeEventListener("scroll", i);
61
+ }, [d]), F(() => {
62
+ const i = m.current;
63
+ i && (a ? i.pause() : i.play());
64
+ }, [a]);
65
+ const B = () => {
66
+ if (!s) return null;
67
+ const i = s.includes("vimeo.com"), y = s.includes("youtube.com") || s.includes("youtu.be");
68
+ return i || y ? /* @__PURE__ */ e("div", { className: l.videoWrapper, children: /* @__PURE__ */ e(
68
69
  "iframe",
69
70
  {
70
- src: t ? `${r}?autoplay=1&muted=1&loop=1&background=1` : `${r}?autoplay=1&mute=1&loop=1&playlist=${N(
71
- r
71
+ src: i ? `${s}?autoplay=1&muted=1&loop=1&background=1` : `${s}?autoplay=1&mute=1&loop=1&playlist=${w(
72
+ s
72
73
  )}`,
73
74
  allow: "autoplay; fullscreen",
74
75
  allowFullScreen: !0
@@ -79,187 +80,219 @@ function ue({
79
80
  "video",
80
81
  {
81
82
  ref: m,
82
- src: r,
83
- autoPlay: !d,
83
+ src: s,
84
+ autoPlay: !a,
84
85
  loop: !0,
85
86
  muted: !0,
86
87
  playsInline: !0,
87
- poster: (u == null ? void 0 : u.asset.url) || void 0
88
+ poster: (r == null ? void 0 : r.imageUrl) || void 0
88
89
  }
89
90
  )
90
91
  ] });
91
92
  }, h = /* @__PURE__ */ e(
92
93
  "button",
93
94
  {
94
- title: `${v ? "Pause the video" : "Play the video"}`,
95
+ title: `${k ? "Pause the video" : "Play the video"}`,
95
96
  className: l.videoControl,
96
97
  onClick: () => {
97
- const t = m.current;
98
- t && (t.paused ? (t.play().catch(() => {
99
- }), k(!0)) : (t.pause(), k(!1)));
98
+ const i = m.current;
99
+ i && (i.paused ? (i.play().catch(() => {
100
+ }), x(!0)) : (i.pause(), x(!1)));
100
101
  },
101
- children: v ? /* @__PURE__ */ e(H, { size: 18 }) : /* @__PURE__ */ e(L, { size: 18 })
102
+ children: k ? /* @__PURE__ */ e(L, { size: 18 }) : /* @__PURE__ */ e(j, { size: 18 })
102
103
  }
103
104
  );
104
- function N(t) {
105
- const y = t.match(/(?:youtube\.com\/.*v=|youtu\.be\/)([^&?/]+)/);
105
+ function w(i) {
106
+ const y = i.match(/(?:youtube\.com\/.*v=|youtu\.be\/)([^&?/]+)/);
106
107
  return (y == null ? void 0 : y[1]) || "";
107
108
  }
108
- if (a === "split")
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
+ if (d === "split")
109
120
  return /* @__PURE__ */ e("section", { className: `${l.hero} ${l.split}`, children: /* @__PURE__ */ c("article", { className: l.container, children: [
110
121
  /* @__PURE__ */ c("div", { className: l.text, children: [
111
122
  /* @__PURE__ */ c("div", { children: [
112
- s.eyebrow && /* @__PURE__ */ e(i, { className: l.eyebrow, blocks: s.eyebrow }),
113
- /* @__PURE__ */ e(i, { blocks: s.title })
123
+ t.eyebrow && /* @__PURE__ */ e(n, { className: l.eyebrow, blocks: t.eyebrow }),
124
+ /* @__PURE__ */ e(n, { blocks: t.title })
114
125
  ] }),
115
- s.description && /* @__PURE__ */ e(i, { blocks: s.description }),
116
- n && /* @__PURE__ */ e(
117
- f,
126
+ t.description && /* @__PURE__ */ e(n, { blocks: t.description }),
127
+ u && /* @__PURE__ */ e(
128
+ p,
118
129
  {
119
- items: n.items,
120
- alignment: n.alignment
130
+ items: u.items,
131
+ alignment: u.alignment
121
132
  }
122
133
  ),
123
- s.disclaimer && /* @__PURE__ */ e(
124
- i,
134
+ t.disclaimer && /* @__PURE__ */ e(
135
+ n,
125
136
  {
126
137
  className: l.disclaimer,
127
- blocks: s.disclaimer
138
+ blocks: t.disclaimer
128
139
  }
129
140
  )
130
141
  ] }),
131
- r ? C() : null
142
+ s ? B() : P()
132
143
  ] }) });
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,
144
+ if (d === "default")
145
+ return /* @__PURE__ */ e("section", { className: `${l.hero} ${b}`, children: /* @__PURE__ */ c("article", { className: l.container, children: [
146
+ s ? B() : P(),
136
147
  /* @__PURE__ */ c("div", { className: l.text, children: [
137
148
  /* @__PURE__ */ c("div", { children: [
138
- s.eyebrow && /* @__PURE__ */ e(i, { className: l.eyebrow, blocks: s.eyebrow }),
139
- /* @__PURE__ */ e(i, { blocks: s.title })
149
+ t.eyebrow && /* @__PURE__ */ e(n, { className: l.eyebrow, blocks: t.eyebrow }),
150
+ /* @__PURE__ */ e(n, { blocks: t.title })
140
151
  ] }),
141
- s.description && /* @__PURE__ */ e(i, { blocks: s.description }),
142
- n && /* @__PURE__ */ e(
143
- f,
152
+ t.description && /* @__PURE__ */ e(n, { blocks: t.description }),
153
+ u && /* @__PURE__ */ e(
154
+ p,
144
155
  {
145
- items: n.items,
146
- alignment: n.alignment
156
+ items: u.items,
157
+ alignment: u.alignment
147
158
  }
148
159
  )
149
160
  ] })
150
161
  ] }) });
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(
162
+ 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(
154
165
  "iframe",
155
166
  {
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
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
158
169
  )}`,
159
170
  className: l.iframe,
160
171
  allow: "autoplay; fullscreen",
161
172
  allowFullScreen: !0
162
173
  }
163
- ) }) : /* @__PURE__ */ c(w, { children: [
174
+ ) }) : /* @__PURE__ */ c(v, { children: [
164
175
  h,
165
176
  /* @__PURE__ */ e(
166
177
  "video",
167
178
  {
168
179
  ref: m,
169
180
  className: l.videoBackground,
170
- src: r,
171
- autoPlay: !d,
181
+ src: s,
182
+ autoPlay: !a,
172
183
  loop: !0,
173
184
  muted: !0,
174
185
  playsInline: !0,
175
- poster: (u == null ? void 0 : u.asset.url) || void 0
186
+ poster: (r == null ? void 0 : r.imageUrl) || void 0
176
187
  }
177
188
  )
178
- ] }) : null,
189
+ ] }) : /* @__PURE__ */ e(
190
+ N,
191
+ {
192
+ src: (r == null ? void 0 : r.imageUrl) ?? "",
193
+ alt: (r == null ? void 0 : r.asset.altText) || (r == null ? void 0 : r.asset.description) || "Card image",
194
+ fill: !0,
195
+ priority: !0,
196
+ style: { objectFit: "cover" },
197
+ draggable: !1,
198
+ sizes: "(min-width: 500px) 500px, 100vw"
199
+ }
200
+ ),
179
201
  /* @__PURE__ */ e("div", { className: l.overlay, children: /* @__PURE__ */ c("div", { className: l.text, children: [
180
202
  /* @__PURE__ */ c("div", { children: [
181
- s.eyebrow && /* @__PURE__ */ e(
182
- i,
203
+ t.eyebrow && /* @__PURE__ */ e(
204
+ n,
183
205
  {
184
206
  className: l.eyebrow,
185
- blocks: s.eyebrow
207
+ blocks: t.eyebrow
186
208
  }
187
209
  ),
188
- /* @__PURE__ */ e(i, { blocks: s.title })
210
+ /* @__PURE__ */ e(n, { blocks: t.title })
189
211
  ] }),
190
- s.description && /* @__PURE__ */ e(i, { blocks: s.description }),
191
- n && /* @__PURE__ */ e(
192
- f,
212
+ t.description && /* @__PURE__ */ e(n, { blocks: t.description }),
213
+ u && /* @__PURE__ */ e(
214
+ p,
193
215
  {
194
- items: n.items,
195
- alignment: n.alignment
216
+ items: u.items,
217
+ alignment: u.alignment
196
218
  }
197
219
  )
198
220
  ] }) })
199
221
  ] }) });
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(
222
+ 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(
203
225
  "iframe",
204
226
  {
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
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
207
229
  )}`,
208
230
  className: l.iframe,
209
231
  allow: "autoplay; fullscreen",
210
232
  allowFullScreen: !0
211
233
  }
212
- ) }) : /* @__PURE__ */ c(w, { children: [
234
+ ) }) : /* @__PURE__ */ c(v, { children: [
213
235
  h,
214
236
  /* @__PURE__ */ e(
215
237
  "video",
216
238
  {
217
239
  ref: m,
218
240
  className: l.videoBackground,
219
- src: r,
220
- autoPlay: !d,
241
+ src: s,
242
+ autoPlay: !a,
221
243
  loop: !0,
222
244
  muted: !0,
223
245
  playsInline: !0,
224
- poster: (u == null ? void 0 : u.asset.url) || void 0
246
+ poster: (r == null ? void 0 : r.imageUrl) || void 0
225
247
  }
226
248
  )
227
- ] }) : null,
249
+ ] }) : /* @__PURE__ */ e(
250
+ N,
251
+ {
252
+ src: (r == null ? void 0 : r.imageUrl) ?? "",
253
+ alt: (r == null ? void 0 : r.asset.altText) || (r == null ? void 0 : r.asset.description) || "Card image",
254
+ fill: !0,
255
+ priority: !0,
256
+ style: { objectFit: "cover" },
257
+ draggable: !1,
258
+ sizes: "(min-width: 500px) 500px, 100vw"
259
+ }
260
+ ),
228
261
  /* @__PURE__ */ e("div", { className: l.overlay, children: /* @__PURE__ */ c("div", { className: l.text, children: [
229
262
  /* @__PURE__ */ c("div", { children: [
230
- s.eyebrow && /* @__PURE__ */ e(
231
- i,
263
+ t.eyebrow && /* @__PURE__ */ e(
264
+ n,
232
265
  {
233
266
  className: l.eyebrow,
234
- blocks: s.eyebrow
267
+ blocks: t.eyebrow
235
268
  }
236
269
  ),
237
270
  o && /* @__PURE__ */ c("div", { className: l.articleDetails, children: [
238
271
  o.articleType && /* @__PURE__ */ e("div", { className: l.articleType, children: o.articleType }),
239
272
  /* @__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(
273
+ $ && /* @__PURE__ */ e("span", { className: l.category, children: $.title }),
274
+ f && f.title.toLowerCase() !== "library" && !f.slug.current.includes(
242
275
  "keywords"
243
- ) && /* @__PURE__ */ e("span", { className: l.category, children: _.title })
276
+ ) && /* @__PURE__ */ e("span", { className: l.category, children: f.title })
244
277
  ] }),
245
- o.timeToRead && /* @__PURE__ */ e(w, { children: /* @__PURE__ */ c("span", { children: [
278
+ o.timeToRead && /* @__PURE__ */ e(v, { children: /* @__PURE__ */ c("span", { children: [
246
279
  /* @__PURE__ */ e("span", { className: l.number, children: o.timeToRead }),
247
280
  "min read"
248
281
  ] }) })
249
282
  ] }),
250
- /* @__PURE__ */ e(i, { blocks: s.title })
283
+ /* @__PURE__ */ e(n, { blocks: t.title })
251
284
  ] }),
252
- s.description && /* @__PURE__ */ e(i, { blocks: s.description }),
253
- n && /* @__PURE__ */ e(
254
- f,
285
+ t.description && /* @__PURE__ */ e(n, { blocks: t.description }),
286
+ u && /* @__PURE__ */ e(
287
+ p,
255
288
  {
256
- items: n.items,
257
- alignment: n.alignment
289
+ items: u.items,
290
+ alignment: u.alignment
258
291
  }
259
292
  )
260
293
  ] }) })
261
294
  ] }) });
262
295
  }
263
296
  export {
264
- ue as HeroBlock
297
+ me as HeroBlock
265
298
  };