quirk-ui 0.0.309 → 0.0.311

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 +61 -62
  3. package/dist/next.d.ts +1 -1
  4. 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,30 +1,30 @@
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";
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
4
  import { R as n, I as N } from "../../../index-BDYug81X.js";
5
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";
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 j = [
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
- ], 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,
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
20
  container: V,
21
21
  eyebrow: Y,
22
- disclaimer: G,
23
- text: K,
24
- articleDetails: Q,
25
- articleType: U,
26
- articleCategories: q,
27
- category: J,
22
+ disclaimer: M,
23
+ text: q,
24
+ articleDetails: G,
25
+ articleType: J,
26
+ articleCategories: K,
27
+ category: Q,
28
28
  number: X,
29
29
  default: "_default_c7i2h_113",
30
30
  blog: Z,
@@ -37,22 +37,21 @@ const j = [
37
37
  videoBackground: re,
38
38
  iframe: se
39
39
  };
40
- function ye({
40
+ function me({
41
41
  heading: t,
42
42
  image: r,
43
43
  video: s,
44
44
  callToAction: u,
45
- pageData: c,
45
+ pageData: o,
46
46
  styleOptions: _
47
47
  }) {
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 = {
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 = {
51
50
  default: l.default,
52
51
  split: l.split,
53
52
  "full-bleed": l.fullBleed,
54
53
  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;
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;
56
55
  F(() => {
57
56
  const i = () => {
58
57
  C(window.scrollY === 0);
@@ -60,13 +59,13 @@ function ye({
60
59
  if (d === "full-bleed" && typeof window < "u")
61
60
  return C(!0), window.addEventListener("scroll", i), () => window.removeEventListener("scroll", i);
62
61
  }, [d]), F(() => {
63
- const i = y.current;
62
+ const i = m.current;
64
63
  i && (a ? i.pause() : i.play());
65
64
  }, [a]);
66
65
  const B = () => {
67
66
  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(
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(
70
69
  "iframe",
71
70
  {
72
71
  src: i ? `${s}?autoplay=1&muted=1&loop=1&background=1` : `${s}?autoplay=1&mute=1&loop=1&playlist=${w(
@@ -75,18 +74,18 @@ function ye({
75
74
  allow: "autoplay; fullscreen",
76
75
  allowFullScreen: !0
77
76
  }
78
- ) }) : /* @__PURE__ */ o("div", { className: l.videoWrapper, children: [
77
+ ) }) : /* @__PURE__ */ c("div", { className: l.videoWrapper, children: [
79
78
  h,
80
79
  /* @__PURE__ */ e(
81
80
  "video",
82
81
  {
83
- ref: y,
82
+ ref: m,
84
83
  src: s,
85
84
  autoPlay: !a,
86
85
  loop: !0,
87
86
  muted: !0,
88
87
  playsInline: !0,
89
- poster: (r == null ? void 0 : r.asset.url) || void 0
88
+ poster: (r == null ? void 0 : r.imageUrl) || void 0
90
89
  }
91
90
  )
92
91
  ] });
@@ -96,31 +95,31 @@ function ye({
96
95
  title: `${k ? "Pause the video" : "Play the video"}`,
97
96
  className: l.videoControl,
98
97
  onClick: () => {
99
- const i = y.current;
98
+ const i = m.current;
100
99
  i && (i.paused ? (i.play().catch(() => {
101
100
  }), x(!0)) : (i.pause(), x(!1)));
102
101
  },
103
- children: k ? /* @__PURE__ */ e(L, { size: 18 }) : /* @__PURE__ */ e(W, { size: 18 })
102
+ children: k ? /* @__PURE__ */ e(L, { size: 18 }) : /* @__PURE__ */ e(j, { size: 18 })
104
103
  }
105
104
  );
106
105
  function w(i) {
107
- const m = i.match(/(?:youtube\.com\/.*v=|youtu\.be\/)([^&?/]+)/);
108
- return (m == null ? void 0 : m[1]) || "";
106
+ const y = i.match(/(?:youtube\.com\/.*v=|youtu\.be\/)([^&?/]+)/);
107
+ return (y == null ? void 0 : y[1]) || "";
109
108
  }
110
- const I = () => r ? /* @__PURE__ */ e("div", { className: l.image, children: /* @__PURE__ */ e(
109
+ const P = () => r && r.imageUrl ? /* @__PURE__ */ e("div", { className: l.image, children: /* @__PURE__ */ e(
111
110
  N,
112
111
  {
113
- src: r.asset.url,
114
- alt: (r == null ? void 0 : r.asset.altText) || (r == null ? void 0 : r.asset.description) || "Hero image",
112
+ src: r.imageUrl,
113
+ alt: r.asset.altText || r.asset.description || "Hero image",
115
114
  width: 600,
116
115
  height: 658,
117
116
  priority: !0
118
117
  }
119
118
  ) }) : null;
120
119
  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: [
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: [
124
123
  t.eyebrow && /* @__PURE__ */ e(n, { className: l.eyebrow, blocks: t.eyebrow }),
125
124
  /* @__PURE__ */ e(n, { blocks: t.title })
126
125
  ] }),
@@ -140,13 +139,13 @@ function ye({
140
139
  }
141
140
  )
142
141
  ] }),
143
- s ? B() : I()
142
+ s ? B() : P()
144
143
  ] }) });
145
144
  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: [
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: [
150
149
  t.eyebrow && /* @__PURE__ */ e(n, { className: l.eyebrow, blocks: t.eyebrow }),
151
150
  /* @__PURE__ */ e(n, { blocks: t.title })
152
151
  ] }),
@@ -161,7 +160,7 @@ function ye({
161
160
  ] })
162
161
  ] }) });
163
162
  if (d === "full-bleed")
164
- return /* @__PURE__ */ e("section", { className: `${l.hero} ${b}`, children: /* @__PURE__ */ o("article", { className: l.container, children: [
163
+ return /* @__PURE__ */ e("section", { className: `${l.hero} ${b}`, children: /* @__PURE__ */ c("article", { className: l.container, children: [
165
164
  s ? s.includes("vimeo.com") || s.includes("youtube.com") || s.includes("youtu.be") ? /* @__PURE__ */ e("div", { className: l.videoBackground, children: /* @__PURE__ */ e(
166
165
  "iframe",
167
166
  {
@@ -172,25 +171,25 @@ function ye({
172
171
  allow: "autoplay; fullscreen",
173
172
  allowFullScreen: !0
174
173
  }
175
- ) }) : /* @__PURE__ */ o(v, { children: [
174
+ ) }) : /* @__PURE__ */ c(v, { children: [
176
175
  h,
177
176
  /* @__PURE__ */ e(
178
177
  "video",
179
178
  {
180
- ref: y,
179
+ ref: m,
181
180
  className: l.videoBackground,
182
181
  src: s,
183
182
  autoPlay: !a,
184
183
  loop: !0,
185
184
  muted: !0,
186
185
  playsInline: !0,
187
- poster: (r == null ? void 0 : r.asset.url) || void 0
186
+ poster: (r == null ? void 0 : r.imageUrl) || void 0
188
187
  }
189
188
  )
190
189
  ] }) : /* @__PURE__ */ e(
191
190
  N,
192
191
  {
193
- src: (r == null ? void 0 : r.asset.url) ?? "",
192
+ src: (r == null ? void 0 : r.imageUrl) ?? "",
194
193
  alt: (r == null ? void 0 : r.asset.altText) || (r == null ? void 0 : r.asset.description) || "Card image",
195
194
  fill: !0,
196
195
  priority: !0,
@@ -199,8 +198,8 @@ function ye({
199
198
  sizes: "(min-width: 500px) 500px, 100vw"
200
199
  }
201
200
  ),
202
- /* @__PURE__ */ e("div", { className: l.overlay, children: /* @__PURE__ */ o("div", { className: l.text, children: [
203
- /* @__PURE__ */ o("div", { children: [
201
+ /* @__PURE__ */ e("div", { className: l.overlay, children: /* @__PURE__ */ c("div", { className: l.text, children: [
202
+ /* @__PURE__ */ c("div", { children: [
204
203
  t.eyebrow && /* @__PURE__ */ e(
205
204
  n,
206
205
  {
@@ -221,7 +220,7 @@ function ye({
221
220
  ] }) })
222
221
  ] }) });
223
222
  if (d === "blog")
224
- return /* @__PURE__ */ e("section", { className: `${l.hero} ${b}`, children: /* @__PURE__ */ o("article", { className: l.container, children: [
223
+ return /* @__PURE__ */ e("section", { className: `${l.hero} ${b}`, children: /* @__PURE__ */ c("article", { className: l.container, children: [
225
224
  s ? s.includes("vimeo.com") || s.includes("youtube.com") || s.includes("youtu.be") ? /* @__PURE__ */ e("div", { className: l.videoBackground, children: /* @__PURE__ */ e(
226
225
  "iframe",
227
226
  {
@@ -232,25 +231,25 @@ function ye({
232
231
  allow: "autoplay; fullscreen",
233
232
  allowFullScreen: !0
234
233
  }
235
- ) }) : /* @__PURE__ */ o(v, { children: [
234
+ ) }) : /* @__PURE__ */ c(v, { children: [
236
235
  h,
237
236
  /* @__PURE__ */ e(
238
237
  "video",
239
238
  {
240
- ref: y,
239
+ ref: m,
241
240
  className: l.videoBackground,
242
241
  src: s,
243
242
  autoPlay: !a,
244
243
  loop: !0,
245
244
  muted: !0,
246
245
  playsInline: !0,
247
- poster: (r == null ? void 0 : r.asset.url) || void 0
246
+ poster: (r == null ? void 0 : r.imageUrl) || void 0
248
247
  }
249
248
  )
250
249
  ] }) : /* @__PURE__ */ e(
251
250
  N,
252
251
  {
253
- src: (r == null ? void 0 : r.asset.url) ?? "",
252
+ src: (r == null ? void 0 : r.imageUrl) ?? "",
254
253
  alt: (r == null ? void 0 : r.asset.altText) || (r == null ? void 0 : r.asset.description) || "Card image",
255
254
  fill: !0,
256
255
  priority: !0,
@@ -259,8 +258,8 @@ function ye({
259
258
  sizes: "(min-width: 500px) 500px, 100vw"
260
259
  }
261
260
  ),
262
- /* @__PURE__ */ e("div", { className: l.overlay, children: /* @__PURE__ */ o("div", { className: l.text, children: [
263
- /* @__PURE__ */ o("div", { children: [
261
+ /* @__PURE__ */ e("div", { className: l.overlay, children: /* @__PURE__ */ c("div", { className: l.text, children: [
262
+ /* @__PURE__ */ c("div", { children: [
264
263
  t.eyebrow && /* @__PURE__ */ e(
265
264
  n,
266
265
  {
@@ -268,16 +267,16 @@ function ye({
268
267
  blocks: t.eyebrow
269
268
  }
270
269
  ),
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: [
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: [
274
273
  $ && /* @__PURE__ */ e("span", { className: l.category, children: $.title }),
275
274
  f && f.title.toLowerCase() !== "library" && !f.slug.current.includes(
276
275
  "keywords"
277
276
  ) && /* @__PURE__ */ e("span", { className: l.category, children: f.title })
278
277
  ] }),
279
- c.timeToRead && /* @__PURE__ */ e(v, { children: /* @__PURE__ */ o("span", { children: [
280
- /* @__PURE__ */ e("span", { className: l.number, children: c.timeToRead }),
278
+ o.timeToRead && /* @__PURE__ */ e(v, { children: /* @__PURE__ */ c("span", { children: [
279
+ /* @__PURE__ */ e("span", { className: l.number, children: o.timeToRead }),
281
280
  "min read"
282
281
  ] }) })
283
282
  ] }),
@@ -295,5 +294,5 @@ function ye({
295
294
  ] }) });
296
295
  }
297
296
  export {
298
- ye as HeroBlock
297
+ me as HeroBlock
299
298
  };
package/dist/next.d.ts CHANGED
@@ -17,7 +17,6 @@ declare interface HeroBlockProps {
17
17
  animateText?: boolean;
18
18
  headingLayout?: "horizontal" | "vertical";
19
19
  };
20
- imageUrl?: string;
21
20
  image?: SanityImage;
22
21
  video?: string;
23
22
  callToAction: {
@@ -90,6 +89,7 @@ declare interface SanityImage {
90
89
  title: string;
91
90
  description: string;
92
91
  };
92
+ imageUrl?: string;
93
93
  description?: string;
94
94
  layout?: "cover" | "contain" | "none";
95
95
  position?: "center" | "top" | "bottom" | "left" | "right" | "top left" | "top right" | "bottom left" | "bottom right";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "quirk-ui",
3
3
  "private": false,
4
- "version": "0.0.309",
4
+ "version": "0.0.311",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {