quirk-ui 0.0.307 → 0.0.308

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 +66 -65
  2. package/package.json +1 -1
package/dist/next/blocks/HeroBlock/index.js CHANGED
@@ -1,28 +1,28 @@
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";
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
4
  import { R as n, I as k } from "../../../index-BDYug81X.js";
5
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";
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";
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 M = [
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 = {
19
- hero: M,
20
- container: T,
21
- eyebrow: q,
22
- disclaimer: G,
23
- text: J,
24
- articleDetails: K,
25
- articleType: Q,
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,
24
+ articleDetails: q,
25
+ articleType: J,
26
26
  articleCategories: X,
27
27
  category: Z,
28
28
  number: O,
@@ -34,36 +34,37 @@ const V = [
34
34
  image: ee,
35
35
  videoControl: le,
36
36
  videoWrapper: re,
37
- videoBackground: te,
37
+ videoBackground: oe,
38
38
  iframe: se
39
39
  };
40
40
  function ye({
41
- heading: t,
41
+ heading: o,
42
42
  imageUrl: d,
43
43
  image: s,
44
44
  video: r,
45
45
  callToAction: u,
46
- pageData: o,
46
+ pageData: c,
47
47
  styleOptions: b
48
48
  }) {
49
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 = {
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 = {
51
52
  default: l.default,
52
53
  split: l.split,
53
54
  "full-bleed": l.fullBleed,
54
55
  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
+ }[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;
56
57
  z(() => {
57
58
  const i = () => {
58
- x(window.scrollY === 0);
59
+ $(window.scrollY === 0);
59
60
  };
60
61
  if (a === "full-bleed" && typeof window < "u")
61
- return x(!0), window.addEventListener("scroll", i), () => window.removeEventListener("scroll", i);
62
+ return $(!0), window.addEventListener("scroll", i), () => window.removeEventListener("scroll", i);
62
63
  }, [a]), z(() => {
63
64
  const i = y.current;
64
65
  i && (m ? i.pause() : i.play());
65
66
  }, [m]);
66
- const P = () => {
67
+ const I = () => {
67
68
  if (!r) return null;
68
69
  const i = r.includes("vimeo.com"), f = r.includes("youtube.com") || r.includes("youtu.be");
69
70
  return i || f ? /* @__PURE__ */ e("div", { className: l.videoWrapper, children: /* @__PURE__ */ e(
@@ -75,7 +76,7 @@ function ye({
75
76
  allow: "autoplay; fullscreen",
76
77
  allowFullScreen: !0
77
78
  }
78
- ) }) : /* @__PURE__ */ c("div", { className: l.videoWrapper, children: [
79
+ ) }) : /* @__PURE__ */ t("div", { className: l.videoWrapper, children: [
79
80
  w,
80
81
  /* @__PURE__ */ e(
81
82
  "video",
@@ -93,21 +94,21 @@ function ye({
93
94
  }, w = /* @__PURE__ */ e(
94
95
  "button",
95
96
  {
96
- title: `${C ? "Pause the video" : "Play the video"}`,
97
+ title: `${x ? "Pause the video" : "Play the video"}`,
97
98
  className: l.videoControl,
98
99
  onClick: () => {
99
100
  const i = y.current;
100
101
  i && (i.paused ? (i.play().catch(() => {
101
- }), $(!0)) : (i.pause(), $(!1)));
102
+ }), C(!0)) : (i.pause(), C(!1)));
102
103
  },
103
- children: C ? /* @__PURE__ */ e(Y, { size: 18 }) : /* @__PURE__ */ e(E, { size: 18 })
104
+ children: x ? /* @__PURE__ */ e(V, { size: 18 }) : /* @__PURE__ */ e(j, { size: 18 })
104
105
  }
105
106
  );
106
107
  function v(i) {
107
108
  const f = i.match(/(?:youtube\.com\/.*v=|youtu\.be\/)([^&?/]+)/);
108
109
  return (f == null ? void 0 : f[1]) || "";
109
110
  }
110
- const I = () => s && d ? /* @__PURE__ */ e("div", { className: l.image, children: /* @__PURE__ */ e(
111
+ const P = () => s && d ? /* @__PURE__ */ e("div", { className: l.image, children: /* @__PURE__ */ e(
111
112
  k,
112
113
  {
113
114
  src: d,
@@ -118,13 +119,13 @@ function ye({
118
119
  }
119
120
  ) }) : null;
120
121
  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: [
124
- t.eyebrow && /* @__PURE__ */ e(n, { className: l.eyebrow, blocks: t.eyebrow }),
125
- /* @__PURE__ */ e(n, { blocks: t.title })
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 })
126
127
  ] }),
127
- t.description && /* @__PURE__ */ e(n, { blocks: t.description }),
128
+ o.description && /* @__PURE__ */ e(n, { blocks: o.description }),
128
129
  u && /* @__PURE__ */ e(
129
130
  _,
130
131
  {
@@ -132,25 +133,25 @@ function ye({
132
133
  alignment: u.alignment
133
134
  }
134
135
  ),
135
- t.disclaimer && /* @__PURE__ */ e(
136
+ o.disclaimer && /* @__PURE__ */ e(
136
137
  n,
137
138
  {
138
139
  className: l.disclaimer,
139
- blocks: t.disclaimer
140
+ blocks: o.disclaimer
140
141
  }
141
142
  )
142
143
  ] }),
143
- r ? P() : I()
144
+ r ? I() : P()
144
145
  ] }) });
145
146
  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: [
150
- t.eyebrow && /* @__PURE__ */ e(n, { className: l.eyebrow, blocks: t.eyebrow }),
151
- /* @__PURE__ */ e(n, { blocks: t.title })
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 })
152
153
  ] }),
153
- t.description && /* @__PURE__ */ e(n, { blocks: t.description }),
154
+ o.description && /* @__PURE__ */ e(n, { blocks: o.description }),
154
155
  u && /* @__PURE__ */ e(
155
156
  _,
156
157
  {
@@ -161,7 +162,7 @@ function ye({
161
162
  ] })
162
163
  ] }) });
163
164
  if (a === "full-bleed")
164
- return /* @__PURE__ */ e("section", { className: `${l.hero} ${h}`, children: /* @__PURE__ */ c("article", { className: l.container, children: [
165
+ return /* @__PURE__ */ e("section", { className: `${l.hero} ${h}`, children: /* @__PURE__ */ t("article", { className: l.container, children: [
165
166
  r ? r.includes("vimeo.com") || r.includes("youtube.com") || r.includes("youtu.be") ? /* @__PURE__ */ e("div", { className: l.videoBackground, children: /* @__PURE__ */ e(
166
167
  "iframe",
167
168
  {
@@ -172,7 +173,7 @@ function ye({
172
173
  allow: "autoplay; fullscreen",
173
174
  allowFullScreen: !0
174
175
  }
175
- ) }) : /* @__PURE__ */ c(N, { children: [
176
+ ) }) : /* @__PURE__ */ t(N, { children: [
176
177
  w,
177
178
  /* @__PURE__ */ e(
178
179
  "video",
@@ -199,18 +200,18 @@ function ye({
199
200
  sizes: "(min-width: 500px) 500px, 100vw"
200
201
  }
201
202
  ),
202
- /* @__PURE__ */ e("div", { className: l.overlay, children: /* @__PURE__ */ c("div", { className: l.text, children: [
203
- /* @__PURE__ */ c("div", { children: [
204
- t.eyebrow && /* @__PURE__ */ e(
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(
205
206
  n,
206
207
  {
207
208
  className: l.eyebrow,
208
- blocks: t.eyebrow
209
+ blocks: o.eyebrow
209
210
  }
210
211
  ),
211
- /* @__PURE__ */ e(n, { blocks: t.title })
212
+ /* @__PURE__ */ e(n, { blocks: o.title })
212
213
  ] }),
213
- t.description && /* @__PURE__ */ e(n, { blocks: t.description }),
214
+ o.description && /* @__PURE__ */ e(n, { blocks: o.description }),
214
215
  u && /* @__PURE__ */ e(
215
216
  _,
216
217
  {
@@ -221,7 +222,7 @@ function ye({
221
222
  ] }) })
222
223
  ] }) });
223
224
  if (a === "blog")
224
- return /* @__PURE__ */ e("section", { className: `${l.hero} ${h}`, children: /* @__PURE__ */ c("article", { className: l.container, children: [
225
+ return /* @__PURE__ */ e("section", { className: `${l.hero} ${h}`, children: /* @__PURE__ */ t("article", { className: l.container, children: [
225
226
  r ? r.includes("vimeo.com") || r.includes("youtube.com") || r.includes("youtu.be") ? /* @__PURE__ */ e("div", { className: l.videoBackground, children: /* @__PURE__ */ e(
226
227
  "iframe",
227
228
  {
@@ -232,7 +233,7 @@ function ye({
232
233
  allow: "autoplay; fullscreen",
233
234
  allowFullScreen: !0
234
235
  }
235
- ) }) : /* @__PURE__ */ c(N, { children: [
236
+ ) }) : /* @__PURE__ */ t(N, { children: [
236
237
  w,
237
238
  /* @__PURE__ */ e(
238
239
  "video",
@@ -259,31 +260,31 @@ function ye({
259
260
  sizes: "(min-width: 500px) 500px, 100vw"
260
261
  }
261
262
  ),
262
- /* @__PURE__ */ e("div", { className: l.overlay, children: /* @__PURE__ */ c("div", { className: l.text, children: [
263
- /* @__PURE__ */ c("div", { children: [
264
- t.eyebrow && /* @__PURE__ */ e(
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(
265
266
  n,
266
267
  {
267
268
  className: l.eyebrow,
268
- blocks: t.eyebrow
269
+ blocks: o.eyebrow
269
270
  }
270
271
  ),
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: [
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: [
274
275
  B && /* @__PURE__ */ e("span", { className: l.category, children: B.title }),
275
276
  p && p.title.toLowerCase() !== "library" && !p.slug.current.includes(
276
277
  "keywords"
277
278
  ) && /* @__PURE__ */ e("span", { className: l.category, children: p.title })
278
279
  ] }),
279
- o.timeToRead && /* @__PURE__ */ e(N, { children: /* @__PURE__ */ c("span", { children: [
280
- /* @__PURE__ */ e("span", { className: l.number, children: o.timeToRead }),
280
+ c.timeToRead && /* @__PURE__ */ e(N, { children: /* @__PURE__ */ t("span", { children: [
281
+ /* @__PURE__ */ e("span", { className: l.number, children: c.timeToRead }),
281
282
  "min read"
282
283
  ] }) })
283
284
  ] }),
284
- /* @__PURE__ */ e(n, { blocks: t.title })
285
+ /* @__PURE__ */ e(n, { blocks: o.title })
285
286
  ] }),
286
- t.description && /* @__PURE__ */ e(n, { blocks: t.description }),
287
+ o.description && /* @__PURE__ */ e(n, { blocks: o.description }),
287
288
  u && /* @__PURE__ */ e(
288
289
  _,
289
290
  {
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.308",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {