quirk-ui 0.0.185 → 0.0.187

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.
@@ -1 +1 @@
1
- ._footer_5udop_1{background-color:var(--color-background);padding:var(--spacing-xl) var(--spacing-md);font-size:var(--font-size-sm);color:var(--color-text-primary)}._container_5udop_8{display:flex;flex-direction:column;align-items:flex-start;gap:2rem}._primaryNav_5udop_17{display:flex;gap:var(--spacing-xl)}@media (max-width: 767px){._primaryNav_5udop_17{flex-direction:column}}._secondaryNav_5udop_26{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;width:100%;gap:var(--spacing-xl);margin-top:var(--spacing-xl)}@media (max-width: 480px){._secondaryNav_5udop_26{flex-direction:column-reverse}._secondaryNav_5udop_26 nav{width:100%}}._details_5udop_44{flex-basis:200px;display:flex;flex-direction:column;gap:var(--spacing-md)}._nav_5udop_51{display:flex;flex-direction:row;align-items:flex-start;gap:var(--spacing-lg);flex:1}._logo_5udop_59{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}._socialItems_5udop_65{display:flex;align-items:center;justify-content:flex-start;gap:var(--spacing-sm)}._socialItems_5udop_65 ._group_5udop_72{min-width:unset}._socialItems_5udop_65 a{transition:color .3s ease-in-out}._groups_5udop_80{display:flex;flex-wrap:wrap;gap:var(--spacing-xl)}._group_5udop_72{min-width:140px}._groupTitle_5udop_90{font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xs)}._sublinks_5udop_95{position:relative}._linkList_5udop_99{display:flex;flex-direction:column;gap:var(--spacing-xs);list-style:none;padding:0;margin:0}._link_5udop_99{color:var(--color-text-primary);text-decoration:none;display:block;transition:color .3s ease-in-out}._link_5udop_99:hover{color:var(--color-primary)}._bottom_5udop_119{text-align:left;font-size:var(--font-size-sm);color:var(--color-muted)}._left_5udop_126 ._container_5udop_8{justify-content:flex-start}._left_5udop_126 ._logo_5udop_59{flex:unset}._left_5udop_126 ._nav_5udop_51{flex:1}@media (max-width: 767px){._left_5udop_126 ._logo_5udop_59{flex:1}}._center_5udop_146 ._nav_5udop_51{transition:transform .3s ease-in-out,opacity .3s ease-in-out;will-change:transform,opacity}._center_5udop_146 ._nav_5udop_51._hidden_5udop_152{transform:translateY(-100%);opacity:0;pointer-events:none}@media (min-width: 768px){._center_5udop_146 ._nav_5udop_51._visible_5udop_159{transform:translateY(0);opacity:1;pointer-events:auto}}@media (max-width: 767px){._center_5udop_146 ._logo_5udop_59{flex:1}}._right_5udop_174 ._container_5udop_8{justify-content:flex-end}._right_5udop_174 ._logo_5udop_59,._right_5udop_174 ._title_5udop_180{flex:1}._right_5udop_174 ._nav_5udop_51{flex:unset}
1
+ ._footer_1r04b_1{background-color:var(--color-background);padding:var(--spacing-xl) var(--spacing-md);font-size:var(--font-size-sm);color:var(--color-text-primary)}._container_1r04b_8{display:flex;flex-direction:column;align-items:flex-start;gap:2rem}._utilityImage_1r04b_17{width:100%}._primaryNav_1r04b_21{display:flex;gap:var(--spacing-xl)}@media (max-width: 767px){._primaryNav_1r04b_21{flex-direction:column}}._secondaryNav_1r04b_30{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;width:100%;gap:var(--spacing-xl);margin-top:var(--spacing-xl)}@media (max-width: 480px){._secondaryNav_1r04b_30{flex-direction:column-reverse}._secondaryNav_1r04b_30 nav{width:100%}}._details_1r04b_48{flex-basis:200px;display:flex;flex-direction:column;gap:var(--spacing-md)}._nav_1r04b_55{display:flex;flex-direction:row;align-items:flex-start;gap:var(--spacing-lg);flex:1}._logo_1r04b_63{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}._socialItems_1r04b_69{display:flex;align-items:center;justify-content:flex-start;gap:var(--spacing-sm)}._socialItems_1r04b_69 ._group_1r04b_76{min-width:unset}._socialItems_1r04b_69 a{transition:color .3s ease-in-out}._groups_1r04b_84{display:flex;flex-wrap:wrap;gap:var(--spacing-xl)}._group_1r04b_76{min-width:140px}._groupTitle_1r04b_94{font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xs)}._sublinks_1r04b_99{position:relative}._linkList_1r04b_103{display:flex;flex-direction:column;gap:var(--spacing-xs);list-style:none;padding:0;margin:0}._link_1r04b_103{color:var(--color-text-primary);text-decoration:none;display:block;transition:color .3s ease-in-out}._link_1r04b_103:hover{color:var(--color-primary)}._bottom_1r04b_123{text-align:left;font-size:var(--font-size-sm);color:var(--color-muted)}._left_1r04b_130 ._container_1r04b_8{justify-content:flex-start}._left_1r04b_130 ._logo_1r04b_63{flex:unset}._left_1r04b_130 ._nav_1r04b_55{flex:1}@media (max-width: 767px){._left_1r04b_130 ._logo_1r04b_63{flex:1}}._center_1r04b_150 ._nav_1r04b_55{transition:transform .3s ease-in-out,opacity .3s ease-in-out;will-change:transform,opacity}._center_1r04b_150 ._nav_1r04b_55._hidden_1r04b_156{transform:translateY(-100%);opacity:0;pointer-events:none}@media (min-width: 768px){._center_1r04b_150 ._nav_1r04b_55._visible_1r04b_163{transform:translateY(0);opacity:1;pointer-events:auto}}@media (max-width: 767px){._center_1r04b_150 ._logo_1r04b_63{flex:1}}._right_1r04b_178 ._container_1r04b_8{justify-content:flex-end}._right_1r04b_178 ._logo_1r04b_63,._right_1r04b_178 ._title_1r04b_184{flex:1}._right_1r04b_178 ._nav_1r04b_55{flex:unset}
@@ -1,37 +1,38 @@
1
- import { jsx as r, jsxs as s } from "react/jsx-runtime";
1
+ import { jsx as s, jsxs as l } from "react/jsx-runtime";
2
2
  import { CallToAction as $ } from "../CallToAction/index.js";
3
3
  import { ButtonGroup as T } from "../ButtonGroup/index.js";
4
- import '../../assets/index35.css';const x = "_footer_5udop_1", k = "_container_5udop_8", A = "_primaryNav_5udop_17", L = "_secondaryNav_5udop_26", S = "_details_5udop_44", j = "_nav_5udop_51", E = "_logo_5udop_59", I = "_socialItems_5udop_65", w = "_group_5udop_72", z = "_groups_5udop_80", B = "_groupTitle_5udop_90", C = "_sublinks_5udop_95", F = "_link_5udop_99", G = "_bottom_5udop_119", a = {
4
+ import '../../assets/index35.css';const x = "_footer_1r04b_1", I = "_container_1r04b_8", S = "_utilityImage_1r04b_17", A = "_primaryNav_1r04b_21", L = "_secondaryNav_1r04b_30", k = "_details_1r04b_48", j = "_nav_1r04b_55", E = "_logo_1r04b_63", w = "_socialItems_1r04b_69", z = "_group_1r04b_76", B = "_groups_1r04b_84", C = "_groupTitle_1r04b_94", F = "_sublinks_1r04b_99", G = "_link_1r04b_103", P = "_bottom_1r04b_123", a = {
5
5
  footer: x,
6
- container: k,
6
+ container: I,
7
+ utilityImage: S,
7
8
  primaryNav: A,
8
9
  secondaryNav: L,
9
- details: S,
10
+ details: k,
10
11
  nav: j,
11
12
  logo: E,
12
- socialItems: I,
13
- group: w,
14
- groups: z,
15
- groupTitle: B,
16
- sublinks: C,
17
- link: F,
18
- bottom: G
13
+ socialItems: w,
14
+ group: z,
15
+ groups: B,
16
+ groupTitle: C,
17
+ sublinks: F,
18
+ link: G,
19
+ bottom: P
19
20
  };
20
- function D({
21
+ function H({
21
22
  // title,
22
23
  logo: c,
23
- items: b,
24
+ items: g,
24
25
  primaryInfo: t,
25
- secondaryInfo: d,
26
- utilityItems: p,
27
- socialItems: u,
26
+ secondaryInfo: _,
27
+ utilityItems: d,
28
+ socialItems: b,
28
29
  // alignment = "right",
29
- copyright: _,
30
- className: N
30
+ copyright: m,
31
+ className: h
31
32
  }) {
32
- const l = (o, n = "", g = !1) => o.map((e) => {
33
- var h;
34
- const m = `${n}/${e.label}`, v = (h = e.sublinks) == null ? void 0 : h.length, i = !!e.href, f = i ? "a" : "div", y = i ? {
33
+ const o = (r, n = "", N = !1) => r.map((e) => {
34
+ var v;
35
+ const u = `${n}/${e.label}`, p = (v = e.sublinks) == null ? void 0 : v.length, i = !!e.href, f = i ? "a" : "div", y = i ? {
35
36
  href: e.href,
36
37
  target: e.isExternal ? "_blank" : "_self",
37
38
  rel: e.isExternal ? "noopener noreferrer" : void 0,
@@ -41,61 +42,68 @@ function D({
41
42
  role: "menuitem",
42
43
  "aria-label": e.label
43
44
  };
44
- return /* @__PURE__ */ s("div", { className: `${a.group}`, children: [
45
- /* @__PURE__ */ s(
45
+ return /* @__PURE__ */ l("div", { className: `${a.group}`, children: [
46
+ /* @__PURE__ */ l(
46
47
  f,
47
48
  {
48
- className: `${i ? a.link : ""} ${v ? a.groupTitle : ""}`,
49
+ className: `${i ? a.link : ""} ${p ? a.groupTitle : ""}`,
49
50
  ...y,
50
51
  children: [
51
- !g && e.label,
52
+ !N && e.label,
52
53
  e.icon && e.icon
53
54
  ]
54
55
  }
55
56
  ),
56
- v && /* @__PURE__ */ r(
57
+ p && /* @__PURE__ */ s(
57
58
  "div",
58
59
  {
59
60
  className: `${a.sublinks}`,
60
61
  role: "menu",
61
62
  "aria-label": `${e.label} submenu`,
62
- children: l(e.sublinks, m)
63
+ children: o(e.sublinks, u)
63
64
  }
64
65
  )
65
- ] }, m);
66
+ ] }, u);
66
67
  });
67
- return /* @__PURE__ */ r("footer", { className: `${N ?? ""} ${a.footer}`, children: /* @__PURE__ */ s("div", { className: a.container, children: [
68
- /* @__PURE__ */ s("div", { className: a.primaryNav, children: [
69
- /* @__PURE__ */ s("div", { className: a.details, children: [
70
- c && /* @__PURE__ */ s("div", { className: a.logo, children: [
68
+ return /* @__PURE__ */ s("footer", { className: `${h ?? ""} ${a.footer}`, children: /* @__PURE__ */ l("div", { className: a.container, children: [
69
+ /* @__PURE__ */ l("div", { className: a.primaryNav, children: [
70
+ /* @__PURE__ */ l("div", { className: a.details, children: [
71
+ c && /* @__PURE__ */ l("div", { className: a.logo, children: [
71
72
  " ",
72
73
  c
73
74
  ] }),
74
- u && /* @__PURE__ */ r("div", { className: a.socialItems, children: l(u, "", !0) }),
75
- t && /* @__PURE__ */ r("div", { className: a.primaryInfo, children: t }),
76
- d && /* @__PURE__ */ r("div", { className: a.secondaryInfo, children: d })
75
+ b && /* @__PURE__ */ s("div", { className: a.socialItems, children: o(b, "", !0) }),
76
+ t && /* @__PURE__ */ s("div", { className: a.primaryInfo, children: t }),
77
+ _ && /* @__PURE__ */ s("div", { className: a.secondaryInfo, children: _ })
77
78
  ] }),
78
- /* @__PURE__ */ r("nav", { className: a.nav, id: "footer-menu", role: "menubar", children: /* @__PURE__ */ r("div", { className: a.groups, children: l(b, "", !1) }) })
79
+ /* @__PURE__ */ s("nav", { className: a.nav, id: "footer-menu", role: "menubar", children: /* @__PURE__ */ s("div", { className: a.groups, children: o(g, "", !1) }) })
79
80
  ] }),
80
- /* @__PURE__ */ s("div", { className: a.secondaryNav, children: [
81
- _ && /* @__PURE__ */ r("div", { className: a.bottom, children: /* @__PURE__ */ r("span", { children: _ }) }),
82
- p && /* @__PURE__ */ r("nav", { className: a.utility, children: /* @__PURE__ */ r(T, { orientation: "horizontal", children: p.map((o, n) => /* @__PURE__ */ r(
81
+ /* @__PURE__ */ l("div", { className: a.secondaryNav, children: [
82
+ m && /* @__PURE__ */ s("div", { className: a.bottom, children: /* @__PURE__ */ s("span", { children: m }) }),
83
+ d && /* @__PURE__ */ s("nav", { className: a.utility, children: /* @__PURE__ */ s(T, { orientation: "horizontal", children: d.map((r, n) => /* @__PURE__ */ s(
83
84
  $,
84
85
  {
85
86
  as: "a",
86
- href: o.href ?? "/",
87
- variant: o.variant ?? "primary",
88
- displayType: o.displayType ?? "text",
89
- imageSrc: o.imageSrc,
90
- imageAlt: o.imageAlt,
91
- "aria-label": o.ariaLabel ?? o.label,
92
- children: o.displayType === "image" ? null : o.label
87
+ href: r.href ?? "/",
88
+ variant: r.variant ?? "primary",
89
+ displayType: r.displayType ?? "text",
90
+ imageSrc: r.imageSrc,
91
+ imageAlt: r.imageAlt,
92
+ "aria-label": r.ariaLabel ?? r.label,
93
+ children: r.imageSrc ? /* @__PURE__ */ s(
94
+ "img",
95
+ {
96
+ className: a.utilityImage,
97
+ src: r.imageSrc,
98
+ "aria-label": r.imageAlt ?? r.ariaLabel ?? r.label
99
+ }
100
+ ) : r.label
93
101
  },
94
- o._key || n
102
+ r._key || n
95
103
  )) }) })
96
104
  ] })
97
105
  ] }) });
98
106
  }
99
107
  export {
100
- D as Footer
108
+ H as Footer
101
109
  };
@@ -1,31 +1,31 @@
1
- import { jsx as t, jsxs as _ } from "react/jsx-runtime";
1
+ import { jsx as n, jsxs as _ } from "react/jsx-runtime";
2
2
  import { useState as u, useRef as m, useCallback as f, useEffect as R } from "react";
3
- import { CallToAction as W } from "../CallToAction/index.js";
4
- import { ButtonGroup as z } from "../ButtonGroup/index.js";
5
- import { X as J } from "../../x-CnsEH4Ox.js";
6
- import { c as K } from "../../createLucideIcon-C8GTh_Qx.js";
7
- import { C as Q } from "../../chevron-down-DSUzBz9F.js";
3
+ import { CallToAction as S } from "../CallToAction/index.js";
4
+ import { ButtonGroup as W } from "../ButtonGroup/index.js";
5
+ import { X as K } from "../../x-CnsEH4Ox.js";
6
+ import { c as Q } from "../../createLucideIcon-C8GTh_Qx.js";
7
+ import { C as U } from "../../chevron-down-DSUzBz9F.js";
8
8
  import '../../assets/index46.css';/**
9
9
  * @license lucide-react v0.488.0 - ISC
10
10
  *
11
11
  * This source code is licensed under the ISC license.
12
12
  * See the LICENSE file in the root directory of this source tree.
13
13
  */
14
- const U = [
14
+ const Y = [
15
15
  ["line", { x1: "4", x2: "20", y1: "12", y2: "12", key: "1e0a9i" }],
16
16
  ["line", { x1: "4", x2: "20", y1: "6", y2: "6", key: "1owob3" }],
17
17
  ["line", { x1: "4", x2: "20", y1: "18", y2: "18", key: "yk5zj1" }]
18
- ], Y = K("menu", U), Z = "_navbar_937v2_5", ee = "_left_937v2_18", ne = "_container_937v2_19", te = "_logo_937v2_23", le = "_nav_937v2_5", ie = "_center_937v2_38", ae = "_hidden_937v2_44", oe = "_visible_937v2_51", se = "_right_937v2_66", re = "_title_937v2_72", ce = "_sublinks_937v2_82", de = "_sublinksInner_937v2_94", ue = "_linkItem_937v2_108", ve = "_minimal_937v2_113", _e = "_menuToggle_937v2_117", me = "_linkWrapper_937v2_121", fe = "_triangle_937v2_159", he = "_transparent_937v2_164", pe = "_sticky_937v2_216", ge = "_twoColumn_937v2_245", be = "_utilityMobile_937v2_292", we = "_utility_937v2_292", ye = "_navInner_937v2_320", ke = "_grid_937v2_329", $e = "_sublinkToggle_937v2_354", Ne = "_link_937v2_108", Ce = "_open_937v2_368", xe = "_show_937v2_419", Te = "_sublinksColumn_937v2_467", Le = "_chevron_937v2_477", Me = "_parent_937v2_556", e = {
19
- navbar: Z,
18
+ ], Z = Q("menu", Y), I = "_navbar_937v2_5", ee = "_left_937v2_18", ne = "_container_937v2_19", ae = "_logo_937v2_23", le = "_nav_937v2_5", re = "_center_937v2_38", oe = "_hidden_937v2_44", te = "_visible_937v2_51", ie = "_right_937v2_66", se = "_title_937v2_72", ce = "_sublinks_937v2_82", de = "_sublinksInner_937v2_94", ue = "_linkItem_937v2_108", ve = "_minimal_937v2_113", _e = "_menuToggle_937v2_117", me = "_linkWrapper_937v2_121", fe = "_triangle_937v2_159", ge = "_transparent_937v2_164", he = "_sticky_937v2_216", be = "_twoColumn_937v2_245", pe = "_utilityMobile_937v2_292", we = "_utility_937v2_292", ke = "_navInner_937v2_320", Ne = "_grid_937v2_329", ye = "_sublinkToggle_937v2_354", $e = "_link_937v2_108", Ce = "_open_937v2_368", xe = "_show_937v2_419", Le = "_sublinksColumn_937v2_467", Te = "_chevron_937v2_477", Me = "_parent_937v2_556", e = {
19
+ navbar: I,
20
20
  left: ee,
21
21
  container: ne,
22
- logo: te,
22
+ logo: ae,
23
23
  nav: le,
24
- center: ie,
25
- hidden: ae,
26
- visible: oe,
27
- right: se,
28
- title: re,
24
+ center: re,
25
+ hidden: oe,
26
+ visible: te,
27
+ right: ie,
28
+ title: se,
29
29
  default: "_default_937v2_81",
30
30
  sublinks: ce,
31
31
  sublinksInner: de,
@@ -34,19 +34,19 @@ const U = [
34
34
  menuToggle: _e,
35
35
  linkWrapper: me,
36
36
  triangle: fe,
37
- transparent: he,
38
- sticky: pe,
39
- twoColumn: ge,
40
- utilityMobile: be,
37
+ transparent: ge,
38
+ sticky: he,
39
+ twoColumn: be,
40
+ utilityMobile: pe,
41
41
  utility: we,
42
- navInner: ye,
43
- grid: ke,
44
- sublinkToggle: $e,
45
- link: Ne,
42
+ navInner: ke,
43
+ grid: Ne,
44
+ sublinkToggle: ye,
45
+ link: $e,
46
46
  open: Ce,
47
47
  show: xe,
48
- sublinksColumn: Te,
49
- chevron: Le,
48
+ sublinksColumn: Le,
49
+ chevron: Te,
50
50
  parent: Me
51
51
  }, Ee = {
52
52
  default: e.default,
@@ -57,140 +57,140 @@ const U = [
57
57
  right: e.right
58
58
  };
59
59
  function Xe({
60
- title: S,
61
- logo: b,
62
- items: O,
63
- utilityItems: i,
64
- isSticky: A = !1,
60
+ title: z,
61
+ logo: p,
62
+ items: A,
63
+ utilityItems: a,
64
+ isSticky: O = !1,
65
65
  isTransparent: B = !1,
66
- alignment: h = "right",
66
+ alignment: g = "right",
67
67
  variant: j = "default",
68
68
  className: X
69
69
  }) {
70
- const [s, w] = u(!1), [p, r] = u(null), [I, D] = u(0), [V, G] = u(!1), [P, q] = u(null), g = m(null), c = m(null), y = m(/* @__PURE__ */ new Map()), F = () => {
71
- w((n) => !n);
72
- }, H = (n) => {
73
- const a = y.current.get(n);
74
- if (a && c.current) {
75
- const l = a.getBoundingClientRect(), o = c.current.getBoundingClientRect(), d = l.left - o.left + l.width / 4;
76
- q(d);
70
+ const [i, w] = u(!1), [h, s] = u(null), [D, V] = u(0), [G, P] = u(!1), [q, F] = u(null), b = m(null), c = m(null), k = m(/* @__PURE__ */ new Map()), H = () => {
71
+ w((l) => !l);
72
+ }, J = (l) => {
73
+ const o = k.current.get(l);
74
+ if (o && c.current) {
75
+ const r = o.getBoundingClientRect(), t = c.current.getBoundingClientRect(), d = r.left - t.left + r.width / 4;
76
+ F(d);
77
77
  }
78
- }, k = (n) => {
79
- r((a) => a === n ? null : n);
80
- }, $ = f((n) => {
81
- g.current && !g.current.contains(n.target) && r(null);
82
- }, []), N = f(() => {
83
- r(null);
78
+ }, N = (l) => {
79
+ s((o) => o === l ? null : l);
80
+ }, y = f((l) => {
81
+ b.current && !b.current.contains(l.target) && s(null);
82
+ }, []), $ = f(() => {
83
+ s(null);
84
84
  }, []), C = f(() => {
85
- x(), typeof window < "u" && window.innerWidth > 768 && (w(!1), r(null), typeof document < "u" && (document.body.style.overflow = ""));
85
+ x(), typeof window < "u" && window.innerWidth > 768 && (w(!1), s(null), typeof document < "u" && (document.body.style.overflow = ""));
86
86
  }, []), x = f(() => {
87
87
  if (c.current) {
88
- const n = c.current.getBoundingClientRect().width;
89
- D(n), G(!0);
88
+ const l = c.current.getBoundingClientRect().width;
89
+ V(l), P(!0);
90
90
  }
91
91
  }, []);
92
92
  R(() => {
93
- const n = typeof window < "u", a = typeof document < "u";
94
- return n && (window.addEventListener("resize", C), window.addEventListener("scroll", N)), a && document.addEventListener("click", $), x(), () => {
95
- n && (window.removeEventListener("resize", C), window.removeEventListener("scroll", N)), a && document.removeEventListener("click", $);
93
+ const l = typeof window < "u", o = typeof document < "u";
94
+ return l && (window.addEventListener("resize", C), window.addEventListener("scroll", $)), o && document.addEventListener("click", y), x(), () => {
95
+ l && (window.removeEventListener("resize", C), window.removeEventListener("scroll", $)), o && document.removeEventListener("click", y);
96
96
  };
97
97
  }, []), R(() => {
98
98
  if (typeof document < "u")
99
- return document.body.style.overflow = s ? "hidden" : "", () => {
99
+ return document.body.style.overflow = i ? "hidden" : "", () => {
100
100
  document.body.style.overflow = "";
101
101
  };
102
- }, [s]);
103
- const T = (n, a = "") => n.map((l) => {
102
+ }, [i]);
103
+ const L = (l, o = "") => l.map((r) => {
104
104
  var M;
105
- const o = `${a}/${l.label}`, v = p === o, d = (M = l.sublinks) == null ? void 0 : M.length, L = m(null);
106
- return y.current.set(o, L.current), /* @__PURE__ */ _(
105
+ const t = `${o}/${r.label}`, v = h === t, d = (M = r.sublinks) == null ? void 0 : M.length, T = m(null);
106
+ return k.current.set(t, T.current), /* @__PURE__ */ _(
107
107
  "div",
108
108
  {
109
- className: `${e.linkWrapper} ${a ? "" : e.parent}`,
109
+ className: `${e.linkWrapper} ${o ? "" : e.parent}`,
110
110
  children: [
111
- /* @__PURE__ */ t("div", { className: e.linkItem, children: l.href ? /* @__PURE__ */ t(
111
+ /* @__PURE__ */ n("div", { className: e.linkItem, children: r.href ? /* @__PURE__ */ n(
112
112
  "a",
113
113
  {
114
- href: l.href,
114
+ href: r.href,
115
115
  className: e.link,
116
- target: l.isExternal ? "_blank" : "_self",
117
- rel: l.isExternal ? "noopener noreferrer" : void 0,
116
+ target: r.isExternal ? "_blank" : "_self",
117
+ rel: r.isExternal ? "noopener noreferrer" : void 0,
118
118
  onClick: () => {
119
119
  var E;
120
- r(null), (E = l.onClick) == null || E.call(l);
120
+ s(null), (E = r.onClick) == null || E.call(r);
121
121
  },
122
122
  onMouseEnter: () => {
123
- a || r(null);
123
+ o || s(null);
124
124
  },
125
125
  role: "menuitem",
126
- children: l.label
126
+ children: r.label
127
127
  }
128
128
  ) : /* @__PURE__ */ _(
129
129
  "button",
130
130
  {
131
- ref: L,
131
+ ref: T,
132
132
  "aria-haspopup": d ? "true" : void 0,
133
133
  "aria-expanded": v,
134
134
  className: `${e.sublinkToggle} ${v ? e.open : ""}`,
135
- onClick: () => k(o),
135
+ onClick: () => N(t),
136
136
  onMouseEnter: () => {
137
- H(o), r(o);
137
+ J(t), s(t);
138
138
  },
139
139
  children: [
140
- l.label,
141
- d && /* @__PURE__ */ t(Q, { size: 18, className: e.chevron })
140
+ r.label,
141
+ d && /* @__PURE__ */ n(U, { size: 18, className: e.chevron })
142
142
  ]
143
143
  }
144
144
  ) }),
145
- d && /* @__PURE__ */ t(
145
+ d && /* @__PURE__ */ n(
146
146
  "div",
147
147
  {
148
148
  className: `${e.sublinks} ${v ? e.show : ""}`,
149
- onMouseLeave: () => k(o),
149
+ onMouseLeave: () => N(t),
150
150
  role: "menu",
151
- "aria-label": `${l.label} submenu`,
152
- children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t("div", { className: e.sublinksInner, children: /* @__PURE__ */ t("div", { className: e.sublinksColumn, children: T(l.sublinks, o) }) }) })
151
+ "aria-label": `${r.label} submenu`,
152
+ children: /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n("div", { className: e.sublinksInner, children: /* @__PURE__ */ n("div", { className: e.sublinksColumn, children: L(r.sublinks, t) }) }) })
153
153
  }
154
154
  )
155
155
  ]
156
156
  },
157
- o
157
+ t
158
158
  );
159
159
  });
160
- return /* @__PURE__ */ t(
160
+ return /* @__PURE__ */ n(
161
161
  "header",
162
162
  {
163
- ref: g,
164
- className: `${X ?? ""} ${Re[h]} ${Ee[j]} ${e.navbar} ${A ? e.sticky : ""} ${B ? e.transparent : ""} `,
163
+ ref: b,
164
+ className: `${X ?? ""} ${Re[g]} ${Ee[j]} ${e.navbar} ${O ? e.sticky : ""} ${B ? e.transparent : ""} `,
165
165
  role: "navigation",
166
166
  "aria-label": "Main navigation",
167
167
  children: /* @__PURE__ */ _(
168
168
  "div",
169
169
  {
170
- className: `${e.container} ${(!i || i.length === 0) && h !== "center" ? e.twoColumn : ""}`,
170
+ className: `${e.container} ${(!a || a.length === 0) && g !== "center" ? e.twoColumn : ""}`,
171
171
  children: [
172
- b ? /* @__PURE__ */ t("div", { className: e.logo, children: b }) : /* @__PURE__ */ t("div", { className: e.title, children: S }),
173
- /* @__PURE__ */ t(
172
+ p ? /* @__PURE__ */ n("div", { className: e.logo, children: p }) : /* @__PURE__ */ n("div", { className: e.title, children: z }),
173
+ /* @__PURE__ */ n(
174
174
  "nav",
175
175
  {
176
176
  ref: c,
177
177
  style: {
178
- left: h === "center" ? `calc(50% - ${I / 2}px)` : "0"
178
+ left: g === "center" ? `calc(50% - ${D / 2}px)` : "0"
179
179
  },
180
- className: `${e.nav} ${s ? e.open : ""} ${V ? e.visible : e.hidden}`,
180
+ className: `${e.nav} ${i ? e.open : ""} ${G ? e.visible : e.hidden}`,
181
181
  id: "main-menu",
182
182
  role: "menubar",
183
183
  children: /* @__PURE__ */ _("div", { className: e.navInner, children: [
184
- /* @__PURE__ */ t(
184
+ /* @__PURE__ */ n(
185
185
  "svg",
186
186
  {
187
- style: { left: `${P}px` },
188
- className: `${e.triangle} ${p ? e.show : ""}`,
187
+ style: { left: `${q}px` },
188
+ className: `${e.triangle} ${h ? e.show : ""}`,
189
189
  width: 16,
190
190
  height: 12,
191
191
  viewBox: "0 0 100 75",
192
192
  xmlns: "http://www.w3.org/2000/svg",
193
- children: /* @__PURE__ */ t(
193
+ children: /* @__PURE__ */ n(
194
194
  "polygon",
195
195
  {
196
196
  points: "50,5 95,70 5,70",
@@ -201,58 +201,72 @@ function Xe({
201
201
  )
202
202
  }
203
203
  ),
204
- /* @__PURE__ */ t(
204
+ /* @__PURE__ */ n(
205
205
  "div",
206
206
  {
207
- className: `${e.triangle} ${p ? e.show : ""}`
207
+ className: `${e.triangle} ${h ? e.show : ""}`
208
208
  }
209
209
  ),
210
- /* @__PURE__ */ t("div", { className: e.grid, children: T(O) })
210
+ /* @__PURE__ */ n("div", { className: e.grid, children: L(A) })
211
211
  ] })
212
212
  }
213
213
  ),
214
- i && /* @__PURE__ */ t("nav", { className: e.utility, children: /* @__PURE__ */ t(z, { children: i.map((n, a) => /* @__PURE__ */ t(
215
- W,
214
+ a && /* @__PURE__ */ n("nav", { className: e.utility, children: /* @__PURE__ */ n(W, { children: a.map((l, o) => /* @__PURE__ */ n(
215
+ S,
216
216
  {
217
217
  as: "a",
218
- href: n.href ?? "/",
219
- variant: n.variant ?? "primary",
220
- displayType: n.displayType ?? "text",
221
- imageSrc: n.imageSrc,
222
- imageAlt: n.imageAlt,
223
- "aria-label": n.ariaLabel ?? n.label,
224
- children: n.displayType === "image" ? null : n.label
218
+ href: l.href ?? "/",
219
+ variant: l.variant ?? "primary",
220
+ displayType: l.displayType ?? "text",
221
+ imageSrc: l.imageSrc,
222
+ imageAlt: l.imageAlt,
223
+ "aria-label": l.ariaLabel ?? l.label,
224
+ children: a[1].imageSrc ? /* @__PURE__ */ n(
225
+ "img",
226
+ {
227
+ className: e.utilityImage,
228
+ src: a[1].imageSrc,
229
+ "aria-label": a[1].imageAlt ?? a[1].ariaLabel ?? a[1].label
230
+ }
231
+ ) : a[1].label
225
232
  },
226
- n._key || a
233
+ l._key || o
227
234
  )) }) }),
228
- i && /* @__PURE__ */ t(
235
+ a && /* @__PURE__ */ n(
229
236
  "nav",
230
237
  {
231
- className: `${e.utilityMobile} ${s ? e.open : ""}`,
232
- children: /* @__PURE__ */ t(z, { alignment: "center", children: /* @__PURE__ */ t(
233
- W,
238
+ className: `${e.utilityMobile} ${i ? e.open : ""}`,
239
+ children: /* @__PURE__ */ n(W, { alignment: "center", children: /* @__PURE__ */ n(
240
+ S,
234
241
  {
235
242
  as: "a",
236
- href: i[1].href ?? "/",
237
- variant: i[1].variant ?? "primary",
238
- displayType: i[1].displayType ?? "text",
239
- imageSrc: i[1].imageSrc,
240
- imageAlt: i[1].imageAlt,
241
- "aria-label": i[1].ariaLabel ?? i[1].label,
242
- children: i[1].displayType === "image" ? null : i[1].label
243
+ href: a[1].href ?? "/",
244
+ variant: a[1].variant ?? "primary",
245
+ displayType: a[1].displayType ?? "text",
246
+ imageSrc: a[1].imageSrc,
247
+ imageAlt: a[1].imageAlt,
248
+ "aria-label": a[1].ariaLabel ?? a[1].label,
249
+ children: a[1].imageSrc ? /* @__PURE__ */ n(
250
+ "img",
251
+ {
252
+ className: e.utilityImage,
253
+ src: a[1].imageSrc,
254
+ "aria-label": a[1].imageAlt ?? a[1].ariaLabel ?? a[1].label
255
+ }
256
+ ) : a[1].label
243
257
  }
244
258
  ) })
245
259
  }
246
260
  ),
247
- /* @__PURE__ */ t(
261
+ /* @__PURE__ */ n(
248
262
  "button",
249
263
  {
250
264
  className: e.menuToggle,
251
- onClick: F,
252
- "aria-label": s ? "Close menu" : "Open menu",
253
- "aria-expanded": s,
265
+ onClick: H,
266
+ "aria-label": i ? "Close menu" : "Open menu",
267
+ "aria-expanded": i,
254
268
  "aria-controls": "main-menu",
255
- children: s ? /* @__PURE__ */ t(J, { size: 24 }) : /* @__PURE__ */ t(Y, { size: 24 })
269
+ children: i ? /* @__PURE__ */ n(K, { size: 24 }) : /* @__PURE__ */ n(Z, { size: 24 })
256
270
  }
257
271
  )
258
272
  ]
package/dist/styles.css CHANGED
@@ -32,7 +32,7 @@ ul._list_4w9h5_1{list-style-type:none;padding:0;margin:0}ol._list_4w9h5_1{list-s
32
32
  ._drawer_55xty_1{position:fixed;background-color:var(--color-background);transition:transform .3s ease-in-out;z-index:1000;width:300px;height:100%;box-shadow:0 0 10px #00000026;padding:var(--spacing-md)}._right_55xty_12{top:0;right:0;transform:translate(100%)}._left_55xty_18{top:0;left:0;transform:translate(-100%)}._top_55xty_24{top:0;left:0;width:100%;height:auto;transform:translateY(-100%)}._bottom_55xty_32{bottom:0;left:0;width:100%;height:auto;transform:translateY(100%)}._open_55xty_40._right_55xty_12,._open_55xty_40._left_55xty_18{transform:translate(0)}._open_55xty_40._top_55xty_24,._open_55xty_40._bottom_55xty_32{transform:translateY(0)}._overlay_55xty_50{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0000004d;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out;z-index:999}._overlay_55xty_50._show_55xty_60{opacity:1;pointer-events:all}
33
33
  ._tabs_1eb1d_1{display:flex;flex-direction:column;width:100%}._tabsList_1eb1d_7{display:flex;width:100%;background-color:var(--color-tab-background);border-radius:calc(var(--radius-md) + 5px);position:relative;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}._tabsList_1eb1d_7::-webkit-scrollbar{display:none}._horizontal_1eb1d_24{flex-direction:column}._horizontal_1eb1d_24 ._tabsPanel_1eb1d_26{padding:var(--spacing-lg) var(--spacing-md)}._vertical_1eb1d_31{flex-direction:row;align-items:flex-start;gap:3rem}._vertical_1eb1d_31 ._tabsList_1eb1d_7{flex-direction:column;overflow-x:visible;flex:.25 0 150px}._vertical_1eb1d_31 ._tabsTrigger_1eb1d_42{white-space:normal;text-align:left}._vertical_1eb1d_31 ._tabsPanelWrapper_1eb1d_47{flex:1;width:100%}@media (max-width: 767px){._vertical_1eb1d_31{flex-direction:column}}._left_1eb1d_58{justify-content:flex-start}._center_1eb1d_62{justify-content:center}._right_1eb1d_66{justify-content:flex-end}._indicator_1eb1d_70{position:absolute;left:0;top:0;border-radius:var(--radius-md);transition:transform .3s ease-in-out,width .3s ease-in-out;z-index:0;border:5px solid var(--color-tab-background)}._indicator_1eb1d_70:after{content:"";border-radius:var(--radius-md);background-color:var(--color-primary);display:block;position:absolute;width:100%;height:100%}._tabsTrigger_1eb1d_42{padding:var(--spacing-md);border:none;background:none;cursor:pointer;color:var(--color-muted);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);transition:color .3s ease;position:relative;z-index:1;white-space:nowrap;text-align:center;width:100%}._tabsTrigger_1eb1d_42._active_1eb1d_117{color:#fff}@media (max-width: 767px){._tabsList_1eb1d_7{flex-direction:column;overflow-x:visible}._tabsTrigger_1eb1d_42{white-space:normal;text-align:left}}._tabsPanelWrapper_1eb1d_47{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_1eb1d_26{animation:_fadeSlide_1eb1d_1 .3s ease both;position:relative;width:100%;color:var(--color-text-primary)}@keyframes _fadeSlide_1eb1d_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}._default_1eb1d_161{background-color:transparent}._dark_1eb1d_165{background-color:var(--color-tab-background)}._dark_1eb1d_165 ._indicator_1eb1d_70{border:5px solid transparent}._dark_1eb1d_165 ._tabsTrigger_1eb1d_42{color:var(--color-muted)}._light_1eb1d_177{background-color:#fff}._light_1eb1d_177 ._indicator_1eb1d_70{border:5px solid transparent}._light_1eb1d_177 ._tabsList_1eb1d_7{background-color:#fff}._light_1eb1d_177 ._tabsTrigger_1eb1d_42{color:var(--color-text-primary)}._light_1eb1d_177 ._tabsTrigger_1eb1d_42:hover{color:var(--color-primary)}._light_1eb1d_177 ._tabsTrigger_1eb1d_42._active_1eb1d_117{color:#fff}._transparent_1eb1d_201{background-color:transparent}._transparent_1eb1d_201 ._indicator_1eb1d_70{border:5px solid transparent}._transparent_1eb1d_201 ._tabsList_1eb1d_7{background-color:transparent}._transparent_1eb1d_201 ._tabsTrigger_1eb1d_42{color:var(--color-text-primary)}._transparent_1eb1d_201 ._tabsTrigger_1eb1d_42:hover{color:var(--color-primary)}._transparent_1eb1d_201 ._tabsTrigger_1eb1d_42._active_1eb1d_117{color:#fff}
34
34
  ._breadcrumbs_1nbgu_1{display:block;font-size:var(--font-size-sm);line-height:1.5}._list_1nbgu_7{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0}._item_1nbgu_15{display:flex;align-items:center}._separator_1nbgu_20{margin:0 var(--spacing-xs);color:var(--color-muted)}._link_1nbgu_25{color:var(--color-muted);text-decoration:none;transition:color .3s ease}._link_1nbgu_25:hover{color:var(--color-primary)}._label_1nbgu_35{color:var(--color-muted)}._active_1nbgu_39{font-weight:var(--font-weight-bold);color:var(--color-primary)}
35
- ._footer_5udop_1{background-color:var(--color-background);padding:var(--spacing-xl) var(--spacing-md);font-size:var(--font-size-sm);color:var(--color-text-primary)}._container_5udop_8{display:flex;flex-direction:column;align-items:flex-start;gap:2rem}._primaryNav_5udop_17{display:flex;gap:var(--spacing-xl)}@media (max-width: 767px){._primaryNav_5udop_17{flex-direction:column}}._secondaryNav_5udop_26{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;width:100%;gap:var(--spacing-xl);margin-top:var(--spacing-xl)}@media (max-width: 480px){._secondaryNav_5udop_26{flex-direction:column-reverse}._secondaryNav_5udop_26 nav{width:100%}}._details_5udop_44{flex-basis:200px;display:flex;flex-direction:column;gap:var(--spacing-md)}._nav_5udop_51{display:flex;flex-direction:row;align-items:flex-start;gap:var(--spacing-lg);flex:1}._logo_5udop_59{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}._socialItems_5udop_65{display:flex;align-items:center;justify-content:flex-start;gap:var(--spacing-sm)}._socialItems_5udop_65 ._group_5udop_72{min-width:unset}._socialItems_5udop_65 a{transition:color .3s ease-in-out}._groups_5udop_80{display:flex;flex-wrap:wrap;gap:var(--spacing-xl)}._group_5udop_72{min-width:140px}._groupTitle_5udop_90{font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xs)}._sublinks_5udop_95{position:relative}._linkList_5udop_99{display:flex;flex-direction:column;gap:var(--spacing-xs);list-style:none;padding:0;margin:0}._link_5udop_99{color:var(--color-text-primary);text-decoration:none;display:block;transition:color .3s ease-in-out}._link_5udop_99:hover{color:var(--color-primary)}._bottom_5udop_119{text-align:left;font-size:var(--font-size-sm);color:var(--color-muted)}._left_5udop_126 ._container_5udop_8{justify-content:flex-start}._left_5udop_126 ._logo_5udop_59{flex:unset}._left_5udop_126 ._nav_5udop_51{flex:1}@media (max-width: 767px){._left_5udop_126 ._logo_5udop_59{flex:1}}._center_5udop_146 ._nav_5udop_51{transition:transform .3s ease-in-out,opacity .3s ease-in-out;will-change:transform,opacity}._center_5udop_146 ._nav_5udop_51._hidden_5udop_152{transform:translateY(-100%);opacity:0;pointer-events:none}@media (min-width: 768px){._center_5udop_146 ._nav_5udop_51._visible_5udop_159{transform:translateY(0);opacity:1;pointer-events:auto}}@media (max-width: 767px){._center_5udop_146 ._logo_5udop_59{flex:1}}._right_5udop_174 ._container_5udop_8{justify-content:flex-end}._right_5udop_174 ._logo_5udop_59,._right_5udop_174 ._title_5udop_180{flex:1}._right_5udop_174 ._nav_5udop_51{flex:unset}
35
+ ._footer_1r04b_1{background-color:var(--color-background);padding:var(--spacing-xl) var(--spacing-md);font-size:var(--font-size-sm);color:var(--color-text-primary)}._container_1r04b_8{display:flex;flex-direction:column;align-items:flex-start;gap:2rem}._utilityImage_1r04b_17{width:100%}._primaryNav_1r04b_21{display:flex;gap:var(--spacing-xl)}@media (max-width: 767px){._primaryNav_1r04b_21{flex-direction:column}}._secondaryNav_1r04b_30{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;width:100%;gap:var(--spacing-xl);margin-top:var(--spacing-xl)}@media (max-width: 480px){._secondaryNav_1r04b_30{flex-direction:column-reverse}._secondaryNav_1r04b_30 nav{width:100%}}._details_1r04b_48{flex-basis:200px;display:flex;flex-direction:column;gap:var(--spacing-md)}._nav_1r04b_55{display:flex;flex-direction:row;align-items:flex-start;gap:var(--spacing-lg);flex:1}._logo_1r04b_63{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}._socialItems_1r04b_69{display:flex;align-items:center;justify-content:flex-start;gap:var(--spacing-sm)}._socialItems_1r04b_69 ._group_1r04b_76{min-width:unset}._socialItems_1r04b_69 a{transition:color .3s ease-in-out}._groups_1r04b_84{display:flex;flex-wrap:wrap;gap:var(--spacing-xl)}._group_1r04b_76{min-width:140px}._groupTitle_1r04b_94{font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xs)}._sublinks_1r04b_99{position:relative}._linkList_1r04b_103{display:flex;flex-direction:column;gap:var(--spacing-xs);list-style:none;padding:0;margin:0}._link_1r04b_103{color:var(--color-text-primary);text-decoration:none;display:block;transition:color .3s ease-in-out}._link_1r04b_103:hover{color:var(--color-primary)}._bottom_1r04b_123{text-align:left;font-size:var(--font-size-sm);color:var(--color-muted)}._left_1r04b_130 ._container_1r04b_8{justify-content:flex-start}._left_1r04b_130 ._logo_1r04b_63{flex:unset}._left_1r04b_130 ._nav_1r04b_55{flex:1}@media (max-width: 767px){._left_1r04b_130 ._logo_1r04b_63{flex:1}}._center_1r04b_150 ._nav_1r04b_55{transition:transform .3s ease-in-out,opacity .3s ease-in-out;will-change:transform,opacity}._center_1r04b_150 ._nav_1r04b_55._hidden_1r04b_156{transform:translateY(-100%);opacity:0;pointer-events:none}@media (min-width: 768px){._center_1r04b_150 ._nav_1r04b_55._visible_1r04b_163{transform:translateY(0);opacity:1;pointer-events:auto}}@media (max-width: 767px){._center_1r04b_150 ._logo_1r04b_63{flex:1}}._right_1r04b_178 ._container_1r04b_8{justify-content:flex-end}._right_1r04b_178 ._logo_1r04b_63,._right_1r04b_178 ._title_1r04b_184{flex:1}._right_1r04b_178 ._nav_1r04b_55{flex:unset}
36
36
  ._form_s0yvj_1{display:flex;flex-direction:column;gap:var(--spacing-md)}
37
37
  ._wrapper_1fwv5_1{display:flex;flex-direction:column;gap:.25rem}._input_1fwv5_7{padding:var(--spacing-sm) var(--spacing-sm);border:2px solid var(--color-border, #ccc);border-radius:var(--radius-md);font-size:var(--font-size-md);outline:none;background-color:var(--color-background);color:var(--color-text-primary)}._input_1fwv5_7::placeholder{color:var(--color-muted)}._input_1fwv5_7:focus{border-color:var(--color-primary)}._error_1fwv5_25{border-color:var(--color-error, #e00)}._errorMessage_1fwv5_29{border-color:var(--color-error, #e00);font-size:var(--font-size-sm)}
38
38
  ._fieldset_1i2zv_1{border:1px solid var(--color-border, #ccc);padding:var(--spacing-md);border-radius:var(--radius-md);margin:0}._legend_1i2zv_8{font-weight:700;margin-bottom:var(--spacing-sm);padding:0 var(--spacing-xs)}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "quirk-ui",
3
3
  "private": false,
4
- "version": "0.0.185",
4
+ "version": "0.0.187",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {