quirk-ui 0.0.203 → 0.0.205

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.
@@ -0,0 +1,113 @@
1
+ import { jsxs as _, jsx as o } from "react/jsx-runtime";
2
+ import { useRef as v } from "react";
3
+ import { E as g } from "./external-link-BOPobeQJ.js";
4
+ import { C as k } from "./chevron-down-DSUzBz9F.js";
5
+ import './assets/NavLink.css';const p = "_navbar_wd0jm_5", f = "_left_wd0jm_18", h = "_container_wd0jm_19", I = "_logo_wd0jm_23", C = "_nav_wd0jm_5", N = "_center_wd0jm_38", T = "_hidden_wd0jm_44", y = "_visible_wd0jm_51", x = "_right_wd0jm_66", E = "_title_wd0jm_72", $ = "_sublinks_wd0jm_82", M = "_sublinksInner_wd0jm_94", W = "_linkItem_wd0jm_108", L = "_minimal_wd0jm_113", z = "_menuToggle_wd0jm_117", R = "_linkWrapper_wd0jm_121", D = "_triangle_wd0jm_159", S = "_transparent_wd0jm_164", q = "_sticky_wd0jm_216", A = "_twoColumn_wd0jm_245", B = "_utilityMobile_wd0jm_292", F = "_utility_wd0jm_292", G = "_navInner_wd0jm_320", H = "_grid_wd0jm_329", J = "_sublinkToggle_wd0jm_355", K = "_link_wd0jm_108", Q = "_newTabIcon_wd0jm_370", U = "_open_wd0jm_378", V = "_show_wd0jm_433", X = "_sublinksColumn_wd0jm_481", Y = "_chevron_wd0jm_491", Z = "_parent_wd0jm_570", e = {
6
+ navbar: p,
7
+ left: f,
8
+ container: h,
9
+ logo: I,
10
+ nav: C,
11
+ center: N,
12
+ hidden: T,
13
+ visible: y,
14
+ right: x,
15
+ title: E,
16
+ default: "_default_wd0jm_81",
17
+ sublinks: $,
18
+ sublinksInner: M,
19
+ linkItem: W,
20
+ minimal: L,
21
+ menuToggle: z,
22
+ linkWrapper: R,
23
+ triangle: D,
24
+ transparent: S,
25
+ sticky: q,
26
+ twoColumn: A,
27
+ utilityMobile: B,
28
+ utility: F,
29
+ navInner: G,
30
+ grid: H,
31
+ sublinkToggle: J,
32
+ link: K,
33
+ newTabIcon: Q,
34
+ open: U,
35
+ show: V,
36
+ sublinksColumn: X,
37
+ chevron: Y,
38
+ parent: Z
39
+ };
40
+ function sn({
41
+ link: n,
42
+ path: s,
43
+ parentPath: r,
44
+ openPath: u,
45
+ togglePath: c,
46
+ updateTriangleIndicator: w,
47
+ setOpenPath: l,
48
+ renderLinks: b,
49
+ buttonRefs: j
50
+ }) {
51
+ var a;
52
+ const i = u === s, t = !!((a = n.sublinks) != null && a.length), m = v(null);
53
+ return j.current.set(s, m.current), /* @__PURE__ */ _(
54
+ "div",
55
+ {
56
+ className: `${e.linkWrapper} ${r ? "" : e.parent}`,
57
+ children: [
58
+ /* @__PURE__ */ o("div", { className: e.linkItem, children: n.href ? /* @__PURE__ */ _(
59
+ "a",
60
+ {
61
+ href: n.href,
62
+ className: e.link,
63
+ target: n.isExternal ? "_blank" : "_self",
64
+ rel: n.isExternal ? "noopener noreferrer" : void 0,
65
+ onClick: () => {
66
+ var d;
67
+ l(null), (d = n.onClick) == null || d.call(n);
68
+ },
69
+ onMouseEnter: () => {
70
+ r || l(null);
71
+ },
72
+ role: "menuitem",
73
+ children: [
74
+ n.label,
75
+ n.isExternal && /* @__PURE__ */ o(g, { className: e.newTabIcon, size: 16 })
76
+ ]
77
+ }
78
+ ) : /* @__PURE__ */ _(
79
+ "button",
80
+ {
81
+ ref: m,
82
+ "aria-haspopup": t ? "true" : void 0,
83
+ "aria-expanded": i,
84
+ className: `${e.sublinkToggle} ${i ? e.open : ""}`,
85
+ onClick: () => c(s),
86
+ onMouseEnter: () => {
87
+ w(s), l(s);
88
+ },
89
+ children: [
90
+ n.label,
91
+ t && /* @__PURE__ */ o(k, { size: 18, className: e.chevron })
92
+ ]
93
+ }
94
+ ) }),
95
+ t && /* @__PURE__ */ o(
96
+ "div",
97
+ {
98
+ className: `${e.sublinks} ${i ? e.show : ""}`,
99
+ onMouseLeave: () => c(s),
100
+ role: "menu",
101
+ "aria-label": `${n.label} submenu`,
102
+ children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o("div", { className: e.sublinksInner, children: /* @__PURE__ */ o("div", { className: e.sublinksColumn, children: b(n.sublinks, s) }) }) })
103
+ }
104
+ )
105
+ ]
106
+ },
107
+ s
108
+ );
109
+ }
110
+ export {
111
+ sn as N,
112
+ e as s
113
+ };
@@ -0,0 +1 @@
1
+ :root{--nav-height: 65px}._navbar_wd0jm_5{position:relative;height:var(--nav-height)}._left_wd0jm_18 ._container_wd0jm_19{justify-content:flex-start}._left_wd0jm_18 ._logo_wd0jm_23{flex:unset}._left_wd0jm_18 ._nav_wd0jm_5{flex:1}@media (max-width: 767px){._left_wd0jm_18 ._logo_wd0jm_23{flex:1}}._center_wd0jm_38 ._nav_wd0jm_5{transition:transform .3s ease-in-out,opacity .3s ease-in-out;will-change:transform,opacity}._center_wd0jm_38 ._nav_wd0jm_5._hidden_wd0jm_44{transform:translateY(-100%);opacity:0;pointer-events:none}@media (min-width: 768px){._center_wd0jm_38 ._nav_wd0jm_5._visible_wd0jm_51{transform:translateY(0);opacity:1;pointer-events:auto}}@media (max-width: 767px){._center_wd0jm_38 ._logo_wd0jm_23{flex:1}}._right_wd0jm_66 ._container_wd0jm_19{justify-content:flex-end}._right_wd0jm_66 ._logo_wd0jm_23,._right_wd0jm_66 ._title_wd0jm_72{flex:1}._right_wd0jm_66 ._nav_wd0jm_5{flex:unset}._default_wd0jm_81 ._sublinks_wd0jm_82{position:fixed;left:0;right:0;top:100%;padding-top:1rem}@media (max-width: 767px){._default_wd0jm_81 ._sublinks_wd0jm_82{position:relative}}._default_wd0jm_81 ._sublinksInner_wd0jm_94{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:calc(100vw - 4rem);width:78rem;min-height:24rem}@media (max-width: 767px){._default_wd0jm_81 ._sublinksInner_wd0jm_94{grid-template-columns:1fr;width:auto;min-height:unset}}._default_wd0jm_81 ._linkItem_wd0jm_108{justify-content:flex-start}._minimal_wd0jm_113{left:0;background-color:#fff}._minimal_wd0jm_113 ._menuToggle_wd0jm_117{grid-area:unset}._minimal_wd0jm_113 ._linkWrapper_wd0jm_121{position:relative}._minimal_wd0jm_113 ._sublinks_wd0jm_82{position:absolute;right:0;width:auto}@media (max-width: 767px){._minimal_wd0jm_113 ._sublinks_wd0jm_82{position:relative;justify-content:center;align-items:center}}._minimal_wd0jm_113 ._sublinksInner_wd0jm_94{display:flex;flex-direction:column;min-width:125px;justify-content:flex-end;align-items:flex-end}@media (max-width: 767px){._minimal_wd0jm_113 ._sublinksInner_wd0jm_94{justify-content:center;align-items:center}}._minimal_wd0jm_113 ._linkItem_wd0jm_108{justify-content:flex-end}@media (max-width: 767px){._minimal_wd0jm_113 ._linkItem_wd0jm_108{justify-content:center;align-items:center}}._minimal_wd0jm_113 ._triangle_wd0jm_159{display:none}._transparent_wd0jm_164{background-color:transparent}._transparent_wd0jm_164 ._nav_wd0jm_5{height:auto;border-radius:var(--radius-full);padding:0 var(--spacing-md);z-index:1001;background:#ffffff80;backdrop-filter:saturate(1.1) blur(1rem);-webkit-backdrop-filter:saturate(1.1) blur(1rem)}@media (max-width: 767px){._transparent_wd0jm_164 ._nav_wd0jm_5{padding:var(--nav-height) 0 0;background:#fffffff2;border-radius:0;top:0!important;left:0!important;height:100vh}._transparent_wd0jm_164 ._nav_wd0jm_5:before{border-radius:0}}._transparent_wd0jm_164 ._menuToggle_wd0jm_117:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:#ffffff80;backdrop-filter:saturate(1.1) blur(1rem);-webkit-backdrop-filter:saturate(1.1) blur(1rem);border-radius:var(--radius-md)}._sticky_wd0jm_216{position:fixed;top:var(--spacing-md);left:0;right:0;z-index:1000;width:100%}._container_wd0jm_19{display:grid;align-items:center;grid-template-areas:"first second third";grid-template-columns:minmax(auto,1fr) auto minmax(auto,1fr);grid-gap:var(--spacing-md);width:100%;max-width:var(--layout-width);height:100%;margin:0 auto;padding:0 var(--spacing-lg);position:relative}@media (max-width: 767px){._container_wd0jm_19{grid-template-areas:"first second third fourth"}}._container_wd0jm_19._twoColumn_wd0jm_245{grid-template-columns:minmax(auto,1fr) auto;grid-template-areas:"first second"}._title_wd0jm_72{grid-area:first;color:var(--color-text-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}._logo_wd0jm_23{grid-area:first;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary);display:flex;align-items:center;justify-content:flex-start;position:relative;z-index:1005}._logo_wd0jm_23 img{height:auto;width:auto}._menuToggle_wd0jm_117{grid-area:fourth;background:none;border:none;cursor:pointer;display:none;color:var(--color-text-primary);z-index:1100;position:relative;width:40px;height:40px}._menuToggle_wd0jm_117 svg{position:relative;z-index:5}._utilityMobile_wd0jm_292{display:none;grid-area:third;justify-content:flex-end}._utility_wd0jm_292{grid-area:third;display:flex;justify-content:flex-end}._utility_wd0jm_292 a{font-size:var(--font-size-sm)}._nav_wd0jm_5{grid-area:second;display:grid;grid-template-columns:minmax(auto,1fr) auto;grid-gap:var(--spacing-sm);transition:transform .3s ease}@media (max-width: 767px){._nav_wd0jm_5{height:100vh}}._navInner_wd0jm_320{position:relative}@media (max-width: 767px){._navInner_wd0jm_320{margin:var(--spacing-xl) auto 0;min-width:300px}}._grid_wd0jm_329{display:grid;align-items:center;grid-auto-flow:column}@media (max-width: 767px){._grid_wd0jm_329{display:flex;flex-direction:column}}._linkItem_wd0jm_108{display:flex;align-items:center;box-sizing:border-box}._navTitle_wd0jm_354,._sublinkToggle_wd0jm_355,._link_wd0jm_108{text-decoration:none;color:var(--color-text-primary);padding:var(--spacing-sm);transition:color .3s ease;font-family:inherit;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);box-sizing:border-box;display:flex;align-items:center;gap:var(--spacing-xs)}._navTitle_wd0jm_354 ._newTabIcon_wd0jm_370,._sublinkToggle_wd0jm_355 ._newTabIcon_wd0jm_370,._link_wd0jm_108 ._newTabIcon_wd0jm_370{color:var(--color-muted);transition:color .3s ease-in-out}._link_wd0jm_108:hover,._sublinkToggle_wd0jm_355:hover,._sublinkToggle_wd0jm_355._open_wd0jm_378,._link_wd0jm_108:hover ._newTabIcon_wd0jm_370,._sublinkToggle_wd0jm_355:hover ._newTabIcon_wd0jm_370,._sublinkToggle_wd0jm_355._open_wd0jm_378 ._newTabIcon_wd0jm_370,._navItem_wd0jm_386:hover{color:var(--color-primary)}._sublinkToggle_wd0jm_355{background:none;border:none;display:flex;align-items:center;cursor:pointer;color:var(--color-text-primary)}._sublinks_wd0jm_82{display:flex;justify-content:center;opacity:0;visibility:hidden;z-index:1000;transition:transform .3s ease-in-out,max-height .3s ease,opacity .3s ease,visibility .3s ease}._sublinks_wd0jm_82._show_wd0jm_433{max-height:500px;opacity:1;pointer-events:auto;visibility:visible;transform:translateY(0)}._triangle_wd0jm_159{visibility:hidden;opacity:0;position:absolute;top:calc(100% + .5rem);transform:translate(-50%);z-index:10;pointer-events:none;transition:top .3s ease-in-out,left .3s ease-in-out,visbility .3s ease-in-out,opacity .3s ease-in-out}._triangle_wd0jm_159._show_wd0jm_433{top:calc(100% + .3rem);opacity:1;visibility:visible}._sublinksInner_wd0jm_94{background-color:var(--color-background);box-shadow:0 6px 8px #0000001a;border-radius:var(--radius-md)}@media (max-width: 767px){._sublinksInner_wd0jm_94{display:flex;flex-direction:column;width:unset;max-width:unset;min-height:unset;background-color:unset;box-shadow:unset;border-radius:unset}}._sublinksColumn_wd0jm_481{display:flex;flex-direction:column;padding:var(--spacing-md)}@media (max-width: 767px){._sublinksColumn_wd0jm_481{padding:0}}._chevron_wd0jm_491{transition:transform .3s ease;display:flex;align-items:center;justify-content:center;margin-top:2px}._sublinkToggle_wd0jm_355._open_wd0jm_378 ._chevron_wd0jm_491{transform:rotate(180deg)}@media (max-width: 767px){._logo_wd0jm_23{flex:1}._menuToggle_wd0jm_117{display:flex;align-items:center;justify-content:center}._utility_wd0jm_292 a:not(._utility_wd0jm_292 a:first-of-type){display:none}._utilityMobile_wd0jm_292{display:block;transform:translateY(100px);position:fixed;bottom:1rem;left:0;right:0;margin:0 auto;width:calc(100% - 2rem);z-index:1001;transition:transform .3s ease-in-out}._utilityMobile_wd0jm_292._open_wd0jm_378{transform:translateY(0)}._nav_wd0jm_5{display:none;position:fixed;top:calc(var(--nav-height) - 1px);left:0;width:100%;height:100%;background-color:var(--color-background);display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-md);padding:var(--spacing-md);border-top:1px solid var(--color-border);z-index:1000;overflow-y:auto;transform:translate(100%)}._nav_wd0jm_5._open_wd0jm_378{transform:translate(0)}._linkWrapper_wd0jm_121{flex-direction:column;width:100%;max-width:300px;margin:0 auto;padding:var(--spacing-sm) 0}._linkWrapper_wd0jm_121._parent_wd0jm_570{border-bottom:1px solid var(--color-border)}._linkWrapper_wd0jm_121._parent_wd0jm_570:last-of-type{border:none}._linkItem_wd0jm_108{width:100%}._chevron_wd0jm_491{display:none}._sublinks_wd0jm_82{position:relative;top:0;box-shadow:none;max-height:fit-content;opacity:1;visibility:visible;align-items:flex-start;justify-content:flex-start;padding:var(--spacing-sm);gap:0;pointer-events:auto}._sublinkToggle_wd0jm_355{cursor:pointer;pointer-events:none;color:var(--color-muted)}}
@@ -1 +1 @@
1
- :root{--nav-height: 65px}._navbar_wd0jm_5{position:relative;height:var(--nav-height)}._left_wd0jm_18 ._container_wd0jm_19{justify-content:flex-start}._left_wd0jm_18 ._logo_wd0jm_23{flex:unset}._left_wd0jm_18 ._nav_wd0jm_5{flex:1}@media (max-width: 767px){._left_wd0jm_18 ._logo_wd0jm_23{flex:1}}._center_wd0jm_38 ._nav_wd0jm_5{transition:transform .3s ease-in-out,opacity .3s ease-in-out;will-change:transform,opacity}._center_wd0jm_38 ._nav_wd0jm_5._hidden_wd0jm_44{transform:translateY(-100%);opacity:0;pointer-events:none}@media (min-width: 768px){._center_wd0jm_38 ._nav_wd0jm_5._visible_wd0jm_51{transform:translateY(0);opacity:1;pointer-events:auto}}@media (max-width: 767px){._center_wd0jm_38 ._logo_wd0jm_23{flex:1}}._right_wd0jm_66 ._container_wd0jm_19{justify-content:flex-end}._right_wd0jm_66 ._logo_wd0jm_23,._right_wd0jm_66 ._title_wd0jm_72{flex:1}._right_wd0jm_66 ._nav_wd0jm_5{flex:unset}._default_wd0jm_81 ._sublinks_wd0jm_82{position:fixed;left:0;right:0;top:100%;padding-top:1rem}@media (max-width: 767px){._default_wd0jm_81 ._sublinks_wd0jm_82{position:relative}}._default_wd0jm_81 ._sublinksInner_wd0jm_94{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:calc(100vw - 4rem);width:78rem;min-height:24rem}@media (max-width: 767px){._default_wd0jm_81 ._sublinksInner_wd0jm_94{grid-template-columns:1fr;width:auto;min-height:unset}}._default_wd0jm_81 ._linkItem_wd0jm_108{justify-content:flex-start}._minimal_wd0jm_113{left:0;background-color:#fff}._minimal_wd0jm_113 ._menuToggle_wd0jm_117{grid-area:unset}._minimal_wd0jm_113 ._linkWrapper_wd0jm_121{position:relative}._minimal_wd0jm_113 ._sublinks_wd0jm_82{position:absolute;right:0;width:auto}@media (max-width: 767px){._minimal_wd0jm_113 ._sublinks_wd0jm_82{position:relative;justify-content:center;align-items:center}}._minimal_wd0jm_113 ._sublinksInner_wd0jm_94{display:flex;flex-direction:column;min-width:125px;justify-content:flex-end;align-items:flex-end}@media (max-width: 767px){._minimal_wd0jm_113 ._sublinksInner_wd0jm_94{justify-content:center;align-items:center}}._minimal_wd0jm_113 ._linkItem_wd0jm_108{justify-content:flex-end}@media (max-width: 767px){._minimal_wd0jm_113 ._linkItem_wd0jm_108{justify-content:center;align-items:center}}._minimal_wd0jm_113 ._triangle_wd0jm_159{display:none}._transparent_wd0jm_164{background-color:transparent}._transparent_wd0jm_164 ._nav_wd0jm_5{height:auto;border-radius:var(--radius-full);padding:0 var(--spacing-md);z-index:1001;background:#ffffff80;backdrop-filter:saturate(1.1) blur(1rem);-webkit-backdrop-filter:saturate(1.1) blur(1rem)}@media (max-width: 767px){._transparent_wd0jm_164 ._nav_wd0jm_5{padding:var(--nav-height) 0 0;background:#fffffff2;border-radius:0;top:0!important;left:0!important;height:100vh}._transparent_wd0jm_164 ._nav_wd0jm_5:before{border-radius:0}}._transparent_wd0jm_164 ._menuToggle_wd0jm_117:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:#ffffff80;backdrop-filter:saturate(1.1) blur(1rem);-webkit-backdrop-filter:saturate(1.1) blur(1rem);border-radius:var(--radius-md)}._sticky_wd0jm_216{position:fixed;top:var(--spacing-md);left:0;right:0;z-index:1000;width:100%}._container_wd0jm_19{display:grid;align-items:center;grid-template-areas:"first second third";grid-template-columns:minmax(auto,1fr) auto minmax(auto,1fr);grid-gap:var(--spacing-md);width:100%;max-width:var(--layout-width);height:100%;margin:0 auto;padding:0 var(--spacing-lg);position:relative}@media (max-width: 767px){._container_wd0jm_19{grid-template-areas:"first second third fourth"}}._container_wd0jm_19._twoColumn_wd0jm_245{grid-template-columns:minmax(auto,1fr) auto;grid-template-areas:"first second"}._title_wd0jm_72{grid-area:first;color:var(--color-text-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}._logo_wd0jm_23{grid-area:first;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary);display:flex;align-items:center;justify-content:flex-start;position:relative;z-index:1005}._logo_wd0jm_23 img{height:auto;width:auto}._menuToggle_wd0jm_117{grid-area:fourth;background:none;border:none;cursor:pointer;display:none;color:var(--color-text-primary);z-index:1100;position:relative;width:40px;height:40px}._menuToggle_wd0jm_117 svg{position:relative;z-index:5}._utilityMobile_wd0jm_292{display:none;grid-area:third;justify-content:flex-end}._utility_wd0jm_292{grid-area:third;display:flex;justify-content:flex-end}._utility_wd0jm_292 a{font-size:var(--font-size-sm)}._nav_wd0jm_5{grid-area:second;display:grid;grid-template-columns:minmax(auto,1fr) auto;grid-gap:var(--spacing-sm);transition:transform .3s ease}@media (max-width: 767px){._nav_wd0jm_5{height:100vh}}._navInner_wd0jm_320{position:relative}@media (max-width: 767px){._navInner_wd0jm_320{margin:var(--spacing-xl) auto 0;min-width:300px}}._grid_wd0jm_329{display:grid;align-items:center;grid-auto-flow:column}@media (max-width: 767px){._grid_wd0jm_329{display:flex;flex-direction:column}}._linkItem_wd0jm_108{display:flex;align-items:center;box-sizing:border-box}._navTitle_wd0jm_354,._sublinkToggle_wd0jm_355,._link_wd0jm_108{text-decoration:none;color:var(--color-text-primary);padding:var(--spacing-sm);transition:color .3s ease;font-family:inherit;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);box-sizing:border-box;display:flex;align-items:center;gap:var(--spacing-xs)}._navTitle_wd0jm_354 ._newTabIcon_wd0jm_370,._sublinkToggle_wd0jm_355 ._newTabIcon_wd0jm_370,._link_wd0jm_108 ._newTabIcon_wd0jm_370{color:var(--color-muted);transition:color .3s ease-in-out}._link_wd0jm_108:hover,._sublinkToggle_wd0jm_355:hover,._sublinkToggle_wd0jm_355._open_wd0jm_378,._link_wd0jm_108:hover ._newTabIcon_wd0jm_370,._sublinkToggle_wd0jm_355:hover ._newTabIcon_wd0jm_370,._sublinkToggle_wd0jm_355._open_wd0jm_378 ._newTabIcon_wd0jm_370,._navItem_wd0jm_386:hover{color:var(--color-primary)}._sublinkToggle_wd0jm_355{background:none;border:none;display:flex;align-items:center;cursor:pointer;color:var(--color-text-primary)}._sublinks_wd0jm_82{display:flex;justify-content:center;opacity:0;visibility:hidden;z-index:1000;transition:transform .3s ease-in-out,max-height .3s ease,opacity .3s ease,visibility .3s ease}._sublinks_wd0jm_82._show_wd0jm_433{max-height:500px;opacity:1;pointer-events:auto;visibility:visible;transform:translateY(0)}._triangle_wd0jm_159{visibility:hidden;opacity:0;position:absolute;top:calc(100% + .5rem);transform:translate(-50%);z-index:10;pointer-events:none;transition:top .3s ease-in-out,left .3s ease-in-out,visbility .3s ease-in-out,opacity .3s ease-in-out}._triangle_wd0jm_159._show_wd0jm_433{top:calc(100% + .3rem);opacity:1;visibility:visible}._sublinksInner_wd0jm_94{background-color:var(--color-background);box-shadow:0 6px 8px #0000001a;border-radius:var(--radius-md)}@media (max-width: 767px){._sublinksInner_wd0jm_94{display:flex;flex-direction:column;width:unset;max-width:unset;min-height:unset;background-color:unset;box-shadow:unset;border-radius:unset}}._sublinksColumn_wd0jm_481{display:flex;flex-direction:column;padding:var(--spacing-md)}@media (max-width: 767px){._sublinksColumn_wd0jm_481{padding:0}}._chevron_wd0jm_491{transition:transform .3s ease;display:flex;align-items:center;justify-content:center;margin-top:2px}._sublinkToggle_wd0jm_355._open_wd0jm_378 ._chevron_wd0jm_491{transform:rotate(180deg)}@media (max-width: 767px){._logo_wd0jm_23{flex:1}._menuToggle_wd0jm_117{display:flex;align-items:center;justify-content:center}._utility_wd0jm_292 a:not(._utility_wd0jm_292 a:first-of-type){display:none}._utilityMobile_wd0jm_292{display:block;transform:translateY(100px);position:fixed;bottom:1rem;left:0;right:0;margin:0 auto;width:calc(100% - 2rem);z-index:1001;transition:transform .3s ease-in-out}._utilityMobile_wd0jm_292._open_wd0jm_378{transform:translateY(0)}._nav_wd0jm_5{display:none;position:fixed;top:calc(var(--nav-height) - 1px);left:0;width:100%;height:100%;background-color:var(--color-background);display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-md);padding:var(--spacing-md);border-top:1px solid var(--color-border);z-index:1000;overflow-y:auto;transform:translate(100%)}._nav_wd0jm_5._open_wd0jm_378{transform:translate(0)}._linkWrapper_wd0jm_121{flex-direction:column;width:100%;max-width:300px;margin:0 auto;padding:var(--spacing-sm) 0}._linkWrapper_wd0jm_121._parent_wd0jm_570{border-bottom:1px solid var(--color-border)}._linkWrapper_wd0jm_121._parent_wd0jm_570:last-of-type{border:none}._linkItem_wd0jm_108{width:100%}._chevron_wd0jm_491{display:none}._sublinks_wd0jm_82{position:relative;top:0;box-shadow:none;max-height:fit-content;opacity:1;visibility:visible;align-items:flex-start;justify-content:flex-start;padding:var(--spacing-sm);gap:0;pointer-events:auto}._sublinkToggle_wd0jm_355{cursor:pointer;pointer-events:none;color:var(--color-muted)}}
1
+ ._label_15ngo_1{font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xs)}._text_15ngo_6{display:inline-flex;align-items:center;gap:var(--spacing-xs)}._sm_15ngo_13{font-size:.75rem}._md_15ngo_17{font-size:.875rem}._lg_15ngo_21{font-size:1rem}._default_15ngo_26{color:var(--color-text-primary)}._muted_15ngo_30{color:var(--color-muted)}._accent_15ngo_34{color:var(--color-primary)}._disabled_15ngo_38{color:var(--color-muted)}._error_15ngo_42{color:var(--color-error)}._required_15ngo_47{color:var(--color-error);margin-left:.25rem}._optional_15ngo_52{color:var(--color-muted);font-style:italic;margin-left:.25rem}._srOnly_15ngo_58{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._icon_15ngo_71{line-height:0;margin-left:var(--spacing-xs)}._tooltipWrapper_15ngo_77{position:relative;display:inline-flex;align-items:center}._tooltipIcon_15ngo_83{line-height:0;font-size:var(--font-size-md);cursor:help;margin-left:var(--spacing-xs);color:var(--color-muted)}._tooltipText_15ngo_91{visibility:hidden;background-color:#111;color:#fff;text-align:center;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);position:absolute;z-index:10;bottom:125%;left:50%;transform:translate(-50%);font-size:var(--font-size-xs);white-space:nowrap;opacity:0;transition:opacity .2s ease}._tooltipWrapper_15ngo_77:hover ._tooltipText_15ngo_91,._tooltipWrapper_15ngo_77:focus-within ._tooltipText_15ngo_91{visibility:visible;opacity:1}
@@ -1 +1 @@
1
- ._label_15ngo_1{font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xs)}._text_15ngo_6{display:inline-flex;align-items:center;gap:var(--spacing-xs)}._sm_15ngo_13{font-size:.75rem}._md_15ngo_17{font-size:.875rem}._lg_15ngo_21{font-size:1rem}._default_15ngo_26{color:var(--color-text-primary)}._muted_15ngo_30{color:var(--color-muted)}._accent_15ngo_34{color:var(--color-primary)}._disabled_15ngo_38{color:var(--color-muted)}._error_15ngo_42{color:var(--color-error)}._required_15ngo_47{color:var(--color-error);margin-left:.25rem}._optional_15ngo_52{color:var(--color-muted);font-style:italic;margin-left:.25rem}._srOnly_15ngo_58{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._icon_15ngo_71{line-height:0;margin-left:var(--spacing-xs)}._tooltipWrapper_15ngo_77{position:relative;display:inline-flex;align-items:center}._tooltipIcon_15ngo_83{line-height:0;font-size:var(--font-size-md);cursor:help;margin-left:var(--spacing-xs);color:var(--color-muted)}._tooltipText_15ngo_91{visibility:hidden;background-color:#111;color:#fff;text-align:center;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);position:absolute;z-index:10;bottom:125%;left:50%;transform:translate(-50%);font-size:var(--font-size-xs);white-space:nowrap;opacity:0;transition:opacity .2s ease}._tooltipWrapper_15ngo_77:hover ._tooltipText_15ngo_91,._tooltipWrapper_15ngo_77:focus-within ._tooltipText_15ngo_91{visibility:visible;opacity:1}
1
+ ._footer_xfxi7_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_xfxi7_8{display:flex;flex-direction:column;align-items:flex-start;gap:2rem}._utilityImage_xfxi7_17{width:100%}._primaryNav_xfxi7_21{display:flex;gap:var(--spacing-xl)}@media (max-width: 767px){._primaryNav_xfxi7_21{flex-direction:column}}._secondaryNav_xfxi7_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)}._secondaryNav_xfxi7_30 a:has(img){height:unset;background-color:transparent}._secondaryNav_xfxi7_30 a:has(img) img{width:175px;height:auto}._secondaryNav_xfxi7_30 a:has(img):hover{background-color:transparent}@media (max-width: 480px){._secondaryNav_xfxi7_30{flex-direction:column-reverse}._secondaryNav_xfxi7_30 nav{width:100%}}._details_xfxi7_62{flex-basis:200px;display:flex;flex-direction:column;gap:var(--spacing-lg)}._nav_xfxi7_69{display:flex;flex-direction:row;align-items:flex-start;gap:var(--spacing-lg);flex:1}._logo_xfxi7_77{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}._socialItems_xfxi7_83{display:flex;align-items:center;justify-content:flex-start;gap:var(--spacing-sm)}._socialItems_xfxi7_83 ._group_xfxi7_90{min-width:unset}._socialItems_xfxi7_83 a{transition:color .3s ease-in-out;font-size:var(--font-size-xl)}._groups_xfxi7_99{display:flex;flex-wrap:wrap;gap:var(--spacing-xl)}._group_xfxi7_90{min-width:140px}._groupTitle_xfxi7_109{font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xs)}._sublinks_xfxi7_114{position:relative;display:flex;flex-direction:column;gap:var(--spacing-sm);margin-top:var(--spacing-md)}._linkList_xfxi7_122{display:flex;flex-direction:column;gap:var(--spacing-xs);list-style:none;padding:0;margin:0}._link_xfxi7_122{color:var(--color-text-primary);text-decoration:none;display:block;transition:color .3s ease-in-out;display:flex;align-items:center;gap:var(--spacing-xs)}._link_xfxi7_122 ._newTabIcon_xfxi7_140{color:var(--color-muted);transition:color .3s ease-in-out}._link_xfxi7_122:hover,._link_xfxi7_122:hover ._newTabIcon_xfxi7_140{color:var(--color-primary)}._bottom_xfxi7_154{text-align:left;font-size:var(--font-size-sm);color:var(--color-muted)}._left_xfxi7_161 ._container_xfxi7_8{justify-content:flex-start}._left_xfxi7_161 ._logo_xfxi7_77{flex:unset}._left_xfxi7_161 ._nav_xfxi7_69{flex:1}@media (max-width: 767px){._left_xfxi7_161 ._logo_xfxi7_77{flex:1}}._center_xfxi7_181 ._nav_xfxi7_69{transition:transform .3s ease-in-out,opacity .3s ease-in-out;will-change:transform,opacity}._center_xfxi7_181 ._nav_xfxi7_69._hidden_xfxi7_187{transform:translateY(-100%);opacity:0;pointer-events:none}@media (min-width: 768px){._center_xfxi7_181 ._nav_xfxi7_69._visible_xfxi7_194{transform:translateY(0);opacity:1;pointer-events:auto}}@media (max-width: 767px){._center_xfxi7_181 ._logo_xfxi7_77{flex:1}}._right_xfxi7_209 ._container_xfxi7_8{justify-content:flex-end}._right_xfxi7_209 ._logo_xfxi7_77,._right_xfxi7_209 ._title_xfxi7_215{flex:1}._right_xfxi7_209 ._nav_xfxi7_69{flex:unset}
@@ -1 +1 @@
1
- ._footer_xfxi7_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_xfxi7_8{display:flex;flex-direction:column;align-items:flex-start;gap:2rem}._utilityImage_xfxi7_17{width:100%}._primaryNav_xfxi7_21{display:flex;gap:var(--spacing-xl)}@media (max-width: 767px){._primaryNav_xfxi7_21{flex-direction:column}}._secondaryNav_xfxi7_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)}._secondaryNav_xfxi7_30 a:has(img){height:unset;background-color:transparent}._secondaryNav_xfxi7_30 a:has(img) img{width:175px;height:auto}._secondaryNav_xfxi7_30 a:has(img):hover{background-color:transparent}@media (max-width: 480px){._secondaryNav_xfxi7_30{flex-direction:column-reverse}._secondaryNav_xfxi7_30 nav{width:100%}}._details_xfxi7_62{flex-basis:200px;display:flex;flex-direction:column;gap:var(--spacing-lg)}._nav_xfxi7_69{display:flex;flex-direction:row;align-items:flex-start;gap:var(--spacing-lg);flex:1}._logo_xfxi7_77{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}._socialItems_xfxi7_83{display:flex;align-items:center;justify-content:flex-start;gap:var(--spacing-sm)}._socialItems_xfxi7_83 ._group_xfxi7_90{min-width:unset}._socialItems_xfxi7_83 a{transition:color .3s ease-in-out;font-size:var(--font-size-xl)}._groups_xfxi7_99{display:flex;flex-wrap:wrap;gap:var(--spacing-xl)}._group_xfxi7_90{min-width:140px}._groupTitle_xfxi7_109{font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xs)}._sublinks_xfxi7_114{position:relative;display:flex;flex-direction:column;gap:var(--spacing-sm);margin-top:var(--spacing-md)}._linkList_xfxi7_122{display:flex;flex-direction:column;gap:var(--spacing-xs);list-style:none;padding:0;margin:0}._link_xfxi7_122{color:var(--color-text-primary);text-decoration:none;display:block;transition:color .3s ease-in-out;display:flex;align-items:center;gap:var(--spacing-xs)}._link_xfxi7_122 ._newTabIcon_xfxi7_140{color:var(--color-muted);transition:color .3s ease-in-out}._link_xfxi7_122:hover,._link_xfxi7_122:hover ._newTabIcon_xfxi7_140{color:var(--color-primary)}._bottom_xfxi7_154{text-align:left;font-size:var(--font-size-sm);color:var(--color-muted)}._left_xfxi7_161 ._container_xfxi7_8{justify-content:flex-start}._left_xfxi7_161 ._logo_xfxi7_77{flex:unset}._left_xfxi7_161 ._nav_xfxi7_69{flex:1}@media (max-width: 767px){._left_xfxi7_161 ._logo_xfxi7_77{flex:1}}._center_xfxi7_181 ._nav_xfxi7_69{transition:transform .3s ease-in-out,opacity .3s ease-in-out;will-change:transform,opacity}._center_xfxi7_181 ._nav_xfxi7_69._hidden_xfxi7_187{transform:translateY(-100%);opacity:0;pointer-events:none}@media (min-width: 768px){._center_xfxi7_181 ._nav_xfxi7_69._visible_xfxi7_194{transform:translateY(0);opacity:1;pointer-events:auto}}@media (max-width: 767px){._center_xfxi7_181 ._logo_xfxi7_77{flex:1}}._right_xfxi7_209 ._container_xfxi7_8{justify-content:flex-end}._right_xfxi7_209 ._logo_xfxi7_77,._right_xfxi7_209 ._title_xfxi7_215{flex:1}._right_xfxi7_209 ._nav_xfxi7_69{flex:unset}
1
+ ._calendar_zbxci_1{padding:var(--spacing-sm);border-radius:var(--radius-md);min-width:250px}._header_zbxci_7{display:flex;justify-content:space-between;margin-bottom:var(--spacing-sm)}._dayName_zbxci_13{font-weight:var(--font-weight-semibold);color:var(--color-text-primary);width:30px;text-align:center;flex:1;font-size:var(--font-size-sm)}._monthName_zbxci_23{font-weight:var(--font-weight-bold);color:var(--color-text-primary)}._week_zbxci_28{display:flex;justify-content:space-between;color:var(--color-text-primary)}._cell_zbxci_34{flex:1;padding:var(--spacing-xs) 0;text-align:center;background:none;color:var(--color-text-primary);border:none;cursor:pointer;width:30px}._outside_zbxci_45{color:var(--color-muted)}._selected_zbxci_49{background-color:var(--color-primary);color:#fff;border-radius:var(--radius-md)}
@@ -1,6 +1,6 @@
1
1
  import { jsx as c } from "react/jsx-runtime";
2
2
  import { d as D, i as s, r as l, g as n, s as a, v as m, f as d } from "../../vi.ClIskdbk-CZ8iFAMK.js";
3
- import { f as y, C as r } from "../../index-BN3GBQOK.js";
3
+ import { f as y, C as r } from "../../index-BM1mGWJK.js";
4
4
  import "../../index-BBIdMcpm.js";
5
5
  D("Calendar", () => {
6
6
  s("renders the current month and year", () => {
@@ -4,7 +4,7 @@ import '../../assets/index.css';/* empty css */
4
4
  import "../IconButton/index.js";
5
5
  import "../../index-CxrBcaoP.js";
6
6
  import "../Tabs/index.js";
7
- import { C as f } from "../../index-BN3GBQOK.js";
7
+ import { C as f } from "../../index-BM1mGWJK.js";
8
8
  import "../../arrow-left-BIJvHwNQ.js";
9
9
  import "../../arrow-right-QEwnX3Sk.js";
10
10
  export {
@@ -2,7 +2,7 @@ import { jsx as n } from "react/jsx-runtime";
2
2
  import { v as r, d as k, i as c, r as d, g as t, s as a, f as l } from "../../vi.ClIskdbk-CZ8iFAMK.js";
3
3
  import { DatePicker as o } from "./index.js";
4
4
  import "../../index-BBIdMcpm.js";
5
- import { f as u } from "../../index-BN3GBQOK.js";
5
+ import { f as u } from "../../index-BM1mGWJK.js";
6
6
  r.mock("../Calendar", () => ({
7
7
  Calendar: ({ onSelectDate: e }) => /* @__PURE__ */ n(
8
8
  "button",
@@ -4,7 +4,7 @@ import '../../assets/index.css';import '../../assets/index42.css';/* empty css
4
4
  import "../../index-CxrBcaoP.js";
5
5
  import "../Tabs/index.js";
6
6
  import { Label as w } from "../Label/index.js";
7
- import { f as x, C as D } from "../../index-BN3GBQOK.js";
7
+ import { f as x, C as D } from "../../index-BM1mGWJK.js";
8
8
  const S = "_wrapper_13tha_1", N = "_input_13tha_7", O = "_popover_13tha_25", o = {
9
9
  wrapper: S,
10
10
  input: N,
@@ -3,7 +3,7 @@ import { CallToAction as C } from "../CallToAction/index.js";
3
3
  import { ButtonGroup as E } from "../ButtonGroup/index.js";
4
4
  import f from "react";
5
5
  import { E as V } from "../../external-link-BOPobeQJ.js";
6
- import '../../assets/index47.css';var P = {
6
+ import '../../assets/index46.css';var P = {
7
7
  color: void 0,
8
8
  size: void 0,
9
9
  className: void 0,
@@ -1,6 +1,6 @@
1
1
  import { jsx as e, jsxs as c } from "react/jsx-runtime";
2
2
  import { c as a } from "../../createLucideIcon-C8GTh_Qx.js";
3
- import '../../assets/index46.css';/**
3
+ import '../../assets/index45.css';/**
4
4
  * @license lucide-react v0.488.0 - ISC
5
5
  *
6
6
  * This source code is licensed under the ISC license.
@@ -1,6 +1,6 @@
1
- import { jsx as l } from "react/jsx-runtime";
2
- import { d as u, i as n, r, g as t, s as a, f as s, w as i } from "../../vi.ClIskdbk-CZ8iFAMK.js";
3
- import { Navbar as o } from "./index.js";
1
+ import { jsx as i } from "react/jsx-runtime";
2
+ import { d as m, i as s, r as l, g as a, s as e, f as n, w as o } from "../../vi.ClIskdbk-CZ8iFAMK.js";
3
+ import { Navbar as r } from "./index.js";
4
4
  const c = [
5
5
  { label: "Home", href: "/" },
6
6
  {
@@ -18,37 +18,76 @@ const c = [
18
18
  ]
19
19
  },
20
20
  { label: "External", href: "https://example.com", isExternal: !0 }
21
+ ], u = [
22
+ {
23
+ title: "Company",
24
+ primaryItems: [
25
+ {
26
+ label: "About",
27
+ sublinks: [
28
+ { label: "Team", href: "/about/team" },
29
+ { label: "Mission", href: "/about/mission" }
30
+ ]
31
+ }
32
+ ],
33
+ secondaryItems: [
34
+ { label: "Careers", href: "/careers" },
35
+ { label: "Blog", href: "/blog" }
36
+ ],
37
+ spotlight: /* @__PURE__ */ i("div", { children: "Spotlight Content" })
38
+ }
21
39
  ];
22
- u("Navbar", () => {
23
- n("renders all top-level nav items", () => {
24
- r(/* @__PURE__ */ l(o, { alignment: "right", items: c })), t(a.getByText("Home")).toBeInTheDocument(), t(a.getByText("Services")).toBeInTheDocument(), t(a.getByText("External")).toBeInTheDocument();
25
- }), n("toggles mobile menu", () => {
26
- r(/* @__PURE__ */ l(o, { alignment: "right", items: c }));
27
- const e = a.getByLabelText("Open menu");
28
- s.click(e), t(e).toHaveAttribute("aria-label", "Close menu"), s.click(e), t(e).toHaveAttribute("aria-label", "Open menu");
29
- }), n("open and closes submenu on click", async () => {
30
- r(/* @__PURE__ */ l(o, { alignment: "right", items: c }));
31
- const e = a.getByText("Services"), m = a.getByRole("menu", { name: "Services submenu" });
32
- s.click(e), await i(() => {
33
- t(m).toHaveClass("show");
34
- }), s.click(e), await i(() => {
35
- t(m).not.toHaveClass("show");
40
+ m("Navbar (default navigation)", () => {
41
+ s("renders all top-level nav items", () => {
42
+ l(/* @__PURE__ */ i(r, { navigationType: "default", alignment: "right", items: c })), a(e.getByText("Home")).toBeInTheDocument(), a(e.getByText("Services")).toBeInTheDocument(), a(e.getByText("External")).toBeInTheDocument();
43
+ }), s("toggles mobile menu", () => {
44
+ l(/* @__PURE__ */ i(r, { navigationType: "default", alignment: "right", items: c }));
45
+ const t = e.getByLabelText("Open menu");
46
+ n.click(t), a(t).toHaveAttribute("aria-label", "Close menu"), n.click(t), a(t).toHaveAttribute("aria-label", "Open menu");
47
+ }), s("open and closes submenu on click", async () => {
48
+ l(/* @__PURE__ */ i(r, { navigationType: "default", alignment: "right", items: c }));
49
+ const t = e.getByText("Services"), g = e.getByRole("menu", { name: "Services submenu" });
50
+ n.click(t), await o(() => {
51
+ a(g).toHaveClass("show");
52
+ }), n.click(t), await o(() => {
53
+ a(g).not.toHaveClass("show");
54
+ });
55
+ }), s("has appropriate aria attributes", async () => {
56
+ l(/* @__PURE__ */ i(r, { navigationType: "default", alignment: "right", items: c }));
57
+ const t = e.getByText("Services");
58
+ n.click(t), await o(() => {
59
+ a(t).toHaveAttribute("aria-expanded", "true");
60
+ }), n.click(t), await o(() => {
61
+ a(t).toHaveAttribute("aria-expanded", "false");
36
62
  });
37
- }), n("has appropriate aria attributes", async () => {
38
- r(/* @__PURE__ */ l(o, { alignment: "right", items: c }));
39
- const e = a.getByText("Services");
40
- s.click(e), await i(() => {
41
- t(e).toHaveAttribute("aria-expanded", "true");
42
- }), s.click(e), await i(() => {
43
- t(e).toHaveAttribute("aria-expanded", "false");
63
+ }), s("only allows one submenu open at a time", async () => {
64
+ l(/* @__PURE__ */ i(r, { navigationType: "default", alignment: "right", items: c }));
65
+ const t = e.getByText("Services"), g = e.getByText("About");
66
+ n.click(t), await o(() => {
67
+ a(
68
+ e.getByRole("menu", { name: "Services submenu" })
69
+ ).toHaveClass("show");
70
+ }), n.click(g), await o(() => {
71
+ a(
72
+ e.getByRole("menu", { name: "Services submenu" })
73
+ ).not.toHaveClass("show");
44
74
  });
45
- }), n("only allows one submenu open at a time", async () => {
46
- r(/* @__PURE__ */ l(o, { alignment: "right", items: c }));
47
- const e = a.getByRole("menu", { name: "Services submenu" });
48
- s.click(a.getByText("Services")), await i(() => {
49
- t(e).toHaveClass("show");
50
- }), s.click(a.getByText("About")), await i(() => {
51
- t(e).not.toHaveClass("show");
75
+ });
76
+ });
77
+ m("Navbar (advanced navigation with groups)", () => {
78
+ s("renders group title", () => {
79
+ l(
80
+ /* @__PURE__ */ i(r, { alignment: "right", groups: u, navigationType: "advanced" })
81
+ ), a(e.getByText("Company")).toBeInTheDocument();
82
+ }), s("renders dropdown on hover and shows all columns", async () => {
83
+ l(
84
+ /* @__PURE__ */ i(r, { alignment: "right", groups: u, navigationType: "advanced" })
85
+ );
86
+ const t = e.getByText("Company");
87
+ n.mouseEnter(t), await o(() => {
88
+ a(e.getByText("About")).toBeInTheDocument();
89
+ }), n.mouseEnter(e.getByText("About")), await o(() => {
90
+ a(e.getByText("Team")).toBeInTheDocument(), a(e.getByText("Careers")).toBeInTheDocument(), a(e.getByText("Spotlight Content")).toBeInTheDocument();
52
91
  });
53
92
  });
54
93
  });
@@ -0,0 +1,8 @@
1
+ import "react/jsx-runtime";
2
+ import "react";
3
+ import { N as a } from "../../NavLink-D8ccaE3T.js";
4
+ import "../../external-link-BOPobeQJ.js";
5
+ import "../../chevron-down-DSUzBz9F.js";
6
+ export {
7
+ a as NavLink
8
+ };
@@ -1,239 +1,180 @@
1
- import { jsx as n, jsxs as _ } from "react/jsx-runtime";
2
- import { useState as u, useRef as b, useCallback as g, useEffect as z } from "react";
3
- import { CallToAction as A } from "../CallToAction/index.js";
4
- import { ButtonGroup as O } from "../ButtonGroup/index.js";
5
- import { X as ee } from "../../x-CnsEH4Ox.js";
6
- import { c as ne } from "../../createLucideIcon-C8GTh_Qx.js";
7
- import { E as ae } from "../../external-link-BOPobeQJ.js";
8
- import { C as le } from "../../chevron-down-DSUzBz9F.js";
9
- import '../../assets/index45.css';/**
1
+ import { jsx as n, jsxs as f } from "react/jsx-runtime";
2
+ import { useState as t, useRef as k, useCallback as b, useEffect as _ } from "react";
3
+ import { s as e, N as se } from "../../NavLink-D8ccaE3T.js";
4
+ import { CallToAction as D } from "../CallToAction/index.js";
5
+ import { ButtonGroup as V } from "../ButtonGroup/index.js";
6
+ import { X as ie } from "../../x-CnsEH4Ox.js";
7
+ import { c as re } from "../../createLucideIcon-C8GTh_Qx.js";
8
+ import { C as ce } from "../../chevron-down-DSUzBz9F.js";
9
+ /**
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 se = [
15
+ const oe = [
16
16
  ["line", { x1: "4", x2: "20", y1: "12", y2: "12", key: "1e0a9i" }],
17
17
  ["line", { x1: "4", x2: "20", y1: "6", y2: "6", key: "1owob3" }],
18
18
  ["line", { x1: "4", x2: "20", y1: "18", y2: "18", key: "yk5zj1" }]
19
- ], te = ne("menu", se), ie = "_navbar_wd0jm_5", re = "_left_wd0jm_18", oe = "_container_wd0jm_19", ce = "_logo_wd0jm_23", de = "_nav_wd0jm_5", me = "_center_wd0jm_38", _e = "_hidden_wd0jm_44", ue = "_visible_wd0jm_51", he = "_right_wd0jm_66", ve = "_title_wd0jm_72", we = "_sublinks_wd0jm_82", fe = "_sublinksInner_wd0jm_94", be = "_linkItem_wd0jm_108", ge = "_minimal_wd0jm_113", pe = "_menuToggle_wd0jm_117", ke = "_linkWrapper_wd0jm_121", Ne = "_triangle_wd0jm_159", je = "_transparent_wd0jm_164", ye = "_sticky_wd0jm_216", $e = "_twoColumn_wd0jm_245", xe = "_utilityMobile_wd0jm_292", Ce = "_utility_wd0jm_292", Te = "_navInner_wd0jm_320", Le = "_grid_wd0jm_329", Me = "_navTitle_wd0jm_354", Ee = "_sublinkToggle_wd0jm_355", Ie = "_link_wd0jm_108", Re = "_newTabIcon_wd0jm_370", Se = "_open_wd0jm_378", We = "_navItem_wd0jm_386", ze = "_show_wd0jm_433", Ae = "_sublinksColumn_wd0jm_481", Oe = "_chevron_wd0jm_491", Be = "_parent_wd0jm_570", e = {
20
- navbar: ie,
21
- left: re,
22
- container: oe,
23
- logo: ce,
24
- nav: de,
25
- center: me,
26
- hidden: _e,
27
- visible: ue,
28
- right: he,
29
- title: ve,
30
- default: "_default_wd0jm_81",
31
- sublinks: we,
32
- sublinksInner: fe,
33
- linkItem: be,
34
- minimal: ge,
35
- menuToggle: pe,
36
- linkWrapper: ke,
37
- triangle: Ne,
38
- transparent: je,
39
- sticky: ye,
40
- twoColumn: $e,
41
- utilityMobile: xe,
42
- utility: Ce,
43
- navInner: Te,
44
- grid: Le,
45
- navTitle: Me,
46
- sublinkToggle: Ee,
47
- link: Ie,
48
- newTabIcon: Re,
49
- open: Se,
50
- navItem: We,
51
- show: ze,
52
- sublinksColumn: Ae,
53
- chevron: Oe,
54
- parent: Be
55
- }, Ge = {
19
+ ], te = re("menu", oe), de = {
56
20
  default: e.default,
57
21
  minimal: e.minimal
58
- }, Xe = {
22
+ }, he = {
59
23
  left: e.left,
60
24
  center: e.center,
61
25
  right: e.right
62
26
  };
63
- function Ke({
64
- title: B,
65
- logo: j,
66
- items: y,
67
- groups: $,
27
+ function Ne({
28
+ title: H,
29
+ logo: y,
30
+ items: x,
31
+ groups: C,
68
32
  utilityItems: l,
69
- isSticky: G = !1,
70
- isTransparent: X = !1,
33
+ isSticky: U = !1,
34
+ isTransparent: q = !1,
71
35
  alignment: p = "right",
72
- variant: P = "default",
73
- navigationType: x = "default",
74
- className: D
36
+ variant: F = "default",
37
+ navigationType: L = "default",
38
+ className: J
75
39
  }) {
76
- const [o, C] = u(!1), [k, c] = u(null), [V, H] = u(0), [U, q] = u(!1), [F, J] = u(null), N = b(null), w = b(null), T = b(/* @__PURE__ */ new Map()), K = () => {
77
- C((a) => !a);
78
- }, Q = (a) => {
79
- const i = T.current.get(a);
80
- if (i && w.current) {
81
- const s = i.getBoundingClientRect(), r = w.current.getBoundingClientRect(), t = s.left - r.left + s.width / 4;
82
- J(t);
40
+ const [o, R] = t(!1), [g, h] = t(null), [K, P] = t(0), [Q, Y] = t(!1), [Z, I] = t(null), w = k(null), m = k(null), S = k(/* @__PURE__ */ new Map()), ee = () => {
41
+ R((a) => !a);
42
+ }, ne = (a) => {
43
+ const s = S.current.get(a);
44
+ if (s && m.current) {
45
+ const c = s.getBoundingClientRect(), d = m.current.getBoundingClientRect(), i = c.left - d.left + c.width / 4;
46
+ I(i);
83
47
  }
84
- }, L = (a) => {
85
- c((i) => i === a ? null : a);
86
- }, M = g((a) => {
87
- N.current && !N.current.contains(a.target) && c(null);
88
- }, []), E = g(() => {
89
- c(null);
90
- }, []), I = g(() => {
91
- R(), typeof window < "u" && window.innerWidth > 768 && (C(!1), c(null), typeof document < "u" && (document.body.style.overflow = ""));
92
- }, []), R = g(() => {
93
- if (w.current) {
94
- const a = w.current.getBoundingClientRect().width;
95
- H(a), q(!0);
48
+ }, ae = (a) => {
49
+ h((s) => s === a ? null : a);
50
+ }, M = b((a) => {
51
+ w.current && !w.current.contains(a.target) && h(null);
52
+ }, []), E = b(() => {
53
+ h(null);
54
+ }, []), A = b(() => {
55
+ T(), typeof window < "u" && window.innerWidth > 768 && (R(!1), h(null), typeof document < "u" && (document.body.style.overflow = ""));
56
+ }, []), T = b(() => {
57
+ if (m.current) {
58
+ const a = m.current.getBoundingClientRect().width;
59
+ P(a), Y(!0);
96
60
  }
97
61
  }, []);
98
- z(() => {
99
- const a = typeof window < "u", i = typeof document < "u";
100
- return a && (window.addEventListener("resize", I), window.addEventListener("scroll", E)), i && document.addEventListener("click", M), R(), () => {
101
- a && (window.removeEventListener("resize", I), window.removeEventListener("scroll", E)), i && document.removeEventListener("click", M);
62
+ _(() => {
63
+ const a = typeof window < "u", s = typeof document < "u";
64
+ return a && (window.addEventListener("resize", A), window.addEventListener("scroll", E)), s && document.addEventListener("click", M), T(), () => {
65
+ a && (window.removeEventListener("resize", A), window.removeEventListener("scroll", E)), s && document.removeEventListener("click", M);
102
66
  };
103
- }, []), z(() => {
67
+ }, []), _(() => {
104
68
  if (typeof document < "u")
105
69
  return document.body.style.overflow = o ? "hidden" : "", () => {
106
70
  document.body.style.overflow = "";
107
71
  };
108
72
  }, [o]);
109
- const Y = (a) => {
110
- const [i, s] = u(null), [r, d] = u(
73
+ const le = (a) => {
74
+ const [s, c] = t(null), [d, N] = t(
111
75
  null
112
76
  );
113
- return console.log("GROUPS", a), a.map((t, v) => {
114
- var f, S;
115
- const m = (f = t.primaryItems) == null ? void 0 : f[i ?? 0];
116
- return /* @__PURE__ */ _(
77
+ return console.log("GROUPS", a), a.map((i, u) => {
78
+ var O, W, B, G;
79
+ const z = `group-${u}`, $ = d === u, r = (O = i.primaryItems) == null ? void 0 : O[s ?? 0];
80
+ return /* @__PURE__ */ f(
117
81
  "div",
118
82
  {
119
- className: e.navItem,
120
- onMouseEnter: () => d(v),
83
+ className: `${e.linkWrapper} ${e.parent}`,
84
+ onMouseEnter: () => N(u),
121
85
  onMouseLeave: () => {
122
- d(null), s(null);
86
+ N(null), c(null);
123
87
  },
124
88
  children: [
125
- /* @__PURE__ */ n("button", { className: e.navTitle, children: t.title }),
126
- r === v && /* @__PURE__ */ _("div", { className: e.dropdownMenu, children: [
127
- /* @__PURE__ */ n("div", { className: e.column, children: (S = t.primaryItems) == null ? void 0 : S.map((Z, W) => /* @__PURE__ */ n(
128
- "div",
129
- {
130
- className: e.linkItem,
131
- onMouseEnter: () => s(W),
132
- children: Z.label
133
- },
134
- W
135
- )) }),
136
- /* @__PURE__ */ n("div", { className: e.column, children: (m == null ? void 0 : m.sublinks) && h(m.sublinks) }),
137
- /* @__PURE__ */ n("div", { className: e.column, children: t.secondaryItems && h(t.secondaryItems) }),
138
- t.spotlight && /* @__PURE__ */ n("div", { className: e.column, children: t.spotlight })
139
- ] }),
140
- t.primaryItems && h(t.primaryItems),
141
- t.secondaryItems && h(t.secondaryItems),
142
- t.spotlight && /* @__PURE__ */ n("div", { className: e.spotlight, children: t.spotlight })
89
+ /* @__PURE__ */ n("div", { className: e.linkItem, children: /* @__PURE__ */ f(
90
+ "button",
91
+ {
92
+ "aria-haspopup": "true",
93
+ "aria-expanded": $,
94
+ className: `${e.sublinkToggle} ${$ ? e.open : ""} `,
95
+ children: [
96
+ i.title,
97
+ /* @__PURE__ */ n(ce, { size: 18, className: e.chevron })
98
+ ]
99
+ }
100
+ ) }),
101
+ $ && /* @__PURE__ */ n(
102
+ "div",
103
+ {
104
+ className: `${e.sublinks} ${e.show}`,
105
+ role: "menu",
106
+ "aria-label": `${i.title} submenu`,
107
+ children: /* @__PURE__ */ n("div", { children: /* @__PURE__ */ f("div", { className: e.sublinksInner, children: [
108
+ /* @__PURE__ */ n("div", { className: e.sublinksColumn, children: (W = i.primaryItems) == null ? void 0 : W.map((j, X) => /* @__PURE__ */ n(
109
+ "div",
110
+ {
111
+ className: e.linkItem,
112
+ onMouseEnter: () => c(X),
113
+ children: j.label
114
+ },
115
+ j._key ?? X
116
+ )) }),
117
+ (r == null ? void 0 : r.sublinks) && ((B = r == null ? void 0 : r.sublinks) == null ? void 0 : B.length) > 0 && /* @__PURE__ */ n("div", { className: e.sublinksColumn, children: (r == null ? void 0 : r.sublinks) && v(
118
+ r.sublinks,
119
+ `${z}-${s}`
120
+ ) }),
121
+ (i == null ? void 0 : i.secondaryItems) && ((G = i == null ? void 0 : i.secondaryItems) == null ? void 0 : G.length) > 0 && /* @__PURE__ */ n("div", { className: e.sublinksColumn, children: v(i.secondaryItems, `${z}-secondary`) }),
122
+ i.spotlight && /* @__PURE__ */ n("div", { className: e.sublinksColumn, children: i.spotlight })
123
+ ] }) })
124
+ }
125
+ )
143
126
  ]
144
127
  },
145
- v
128
+ u
146
129
  );
147
130
  });
148
- }, h = (a, i = "") => a.map((s) => {
149
- var m;
150
- const r = `${i}/${s.label}`, d = k === r, t = (m = s.sublinks) == null ? void 0 : m.length, v = b(null);
151
- return T.current.set(r, v.current), /* @__PURE__ */ _(
152
- "div",
131
+ }, v = (a, s = "") => a.map((c) => {
132
+ const d = `${s}/${c.label}`;
133
+ return /* @__PURE__ */ n(
134
+ se,
153
135
  {
154
- className: `${e.linkWrapper} ${i ? "" : e.parent}`,
155
- children: [
156
- /* @__PURE__ */ n("div", { className: e.linkItem, children: s.href ? /* @__PURE__ */ _(
157
- "a",
158
- {
159
- href: s.href,
160
- className: e.link,
161
- target: s.isExternal ? "_blank" : "_self",
162
- rel: s.isExternal ? "noopener noreferrer" : void 0,
163
- onClick: () => {
164
- var f;
165
- c(null), (f = s.onClick) == null || f.call(s);
166
- },
167
- onMouseEnter: () => {
168
- i || c(null);
169
- },
170
- role: "menuitem",
171
- children: [
172
- s.label,
173
- s.isExternal && /* @__PURE__ */ n(ae, { className: e.newTabIcon, size: 16 })
174
- ]
175
- }
176
- ) : /* @__PURE__ */ _(
177
- "button",
178
- {
179
- ref: v,
180
- "aria-haspopup": t ? "true" : void 0,
181
- "aria-expanded": d,
182
- className: `${e.sublinkToggle} ${d ? e.open : ""}`,
183
- onClick: () => L(r),
184
- onMouseEnter: () => {
185
- Q(r), c(r);
186
- },
187
- children: [
188
- s.label,
189
- t && /* @__PURE__ */ n(le, { size: 18, className: e.chevron })
190
- ]
191
- }
192
- ) }),
193
- t && /* @__PURE__ */ n(
194
- "div",
195
- {
196
- className: `${e.sublinks} ${d ? e.show : ""}`,
197
- onMouseLeave: () => L(r),
198
- role: "menu",
199
- "aria-label": `${s.label} submenu`,
200
- children: /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n("div", { className: e.sublinksInner, children: /* @__PURE__ */ n("div", { className: e.sublinksColumn, children: h(s.sublinks, r) }) }) })
201
- }
202
- )
203
- ]
136
+ link: c,
137
+ path: d,
138
+ parentPath: s,
139
+ openPath: g,
140
+ togglePath: ae,
141
+ updateTriangleIndicator: ne,
142
+ setOpenPath: h,
143
+ renderLinks: v,
144
+ buttonRefs: S
204
145
  },
205
- r
146
+ d
206
147
  );
207
148
  });
208
149
  return /* @__PURE__ */ n(
209
150
  "header",
210
151
  {
211
- ref: N,
212
- className: `${D ?? ""} ${Xe[p]} ${Ge[P]} ${e.navbar} ${G ? e.sticky : ""} ${X ? e.transparent : ""} `,
152
+ ref: w,
153
+ className: `${J ?? ""} ${he[p]} ${de[F]} ${e.navbar} ${U ? e.sticky : ""} ${q ? e.transparent : ""} `,
213
154
  role: "navigation",
214
155
  "aria-label": "Main navigation",
215
- children: /* @__PURE__ */ _(
156
+ children: /* @__PURE__ */ f(
216
157
  "div",
217
158
  {
218
159
  className: `${e.container} ${(!l || l.length === 0) && p !== "center" ? e.twoColumn : ""}`,
219
160
  children: [
220
- j ? /* @__PURE__ */ n("div", { className: e.logo, children: j }) : /* @__PURE__ */ n("div", { className: e.title, children: B }),
161
+ y ? /* @__PURE__ */ n("div", { className: e.logo, children: y }) : /* @__PURE__ */ n("div", { className: e.title, children: H }),
221
162
  /* @__PURE__ */ n(
222
163
  "nav",
223
164
  {
224
- ref: w,
165
+ ref: m,
225
166
  style: {
226
- left: p === "center" ? `calc(50% - ${V / 2}px)` : "0"
167
+ left: p === "center" ? `calc(50% - ${K / 2}px)` : "0"
227
168
  },
228
- className: `${e.nav} ${o ? e.open : ""} ${U ? e.visible : e.hidden}`,
169
+ className: `${e.nav} ${o ? e.open : ""} ${Q ? e.visible : e.hidden}`,
229
170
  id: "main-menu",
230
171
  role: "menubar",
231
- children: /* @__PURE__ */ _("div", { className: e.navInner, children: [
172
+ children: /* @__PURE__ */ f("div", { className: e.navInner, children: [
232
173
  /* @__PURE__ */ n(
233
174
  "svg",
234
175
  {
235
- style: { left: `${F}px` },
236
- className: `${e.triangle} ${k ? e.show : ""}`,
176
+ style: { left: `${Z}px` },
177
+ className: `${e.triangle} ${g ? e.show : ""}`,
237
178
  width: 16,
238
179
  height: 12,
239
180
  viewBox: "0 0 100 75",
@@ -252,16 +193,16 @@ function Ke({
252
193
  /* @__PURE__ */ n(
253
194
  "div",
254
195
  {
255
- className: `${e.triangle} ${k ? e.show : ""}`
196
+ className: `${e.triangle} ${g ? e.show : ""}`
256
197
  }
257
198
  ),
258
- x === "default" && y && /* @__PURE__ */ n("div", { className: e.grid, children: h(y) }),
259
- x === "advanced" && $ && /* @__PURE__ */ n("div", { className: e.grid, children: Y($) })
199
+ L === "default" && x && /* @__PURE__ */ n("div", { className: e.grid, children: v(x) }),
200
+ L === "advanced" && C && /* @__PURE__ */ n("div", { className: e.grid, children: le(C) })
260
201
  ] })
261
202
  }
262
203
  ),
263
- l && /* @__PURE__ */ n("nav", { className: e.utility, children: /* @__PURE__ */ n(O, { children: l.map((a, i) => /* @__PURE__ */ n(
264
- A,
204
+ l && /* @__PURE__ */ n("nav", { className: e.utility, children: /* @__PURE__ */ n(V, { children: l.map((a, s) => /* @__PURE__ */ n(
205
+ D,
265
206
  {
266
207
  as: "a",
267
208
  href: a.href ?? "/",
@@ -279,14 +220,14 @@ function Ke({
279
220
  }
280
221
  ) : l[1].label
281
222
  },
282
- a._key || i
223
+ a._key || s
283
224
  )) }) }),
284
225
  l && /* @__PURE__ */ n(
285
226
  "nav",
286
227
  {
287
228
  className: `${e.utilityMobile} ${o ? e.open : ""}`,
288
- children: /* @__PURE__ */ n(O, { alignment: "center", children: /* @__PURE__ */ n(
289
- A,
229
+ children: /* @__PURE__ */ n(V, { alignment: "center", children: /* @__PURE__ */ n(
230
+ D,
290
231
  {
291
232
  as: "a",
292
233
  href: l[1].href ?? "/",
@@ -311,11 +252,11 @@ function Ke({
311
252
  "button",
312
253
  {
313
254
  className: e.menuToggle,
314
- onClick: K,
255
+ onClick: ee,
315
256
  "aria-label": o ? "Close menu" : "Open menu",
316
257
  "aria-expanded": o,
317
258
  "aria-controls": "main-menu",
318
- children: o ? /* @__PURE__ */ n(ee, { size: 24 }) : /* @__PURE__ */ n(te, { size: 24 })
259
+ children: o ? /* @__PURE__ */ n(ie, { size: 24 }) : /* @__PURE__ */ n(te, { size: 24 })
319
260
  }
320
261
  )
321
262
  ]
@@ -325,5 +266,5 @@ function Ke({
325
266
  );
326
267
  }
327
268
  export {
328
- Ke as Navbar
269
+ Ne as Navbar
329
270
  };
@@ -1,6 +1,6 @@
1
1
  import { jsxs as C, jsx as b } from "react/jsx-runtime";
2
2
  import { useState as $ } from "react";
3
- import './assets/index.css';import './assets/index48.css';/* empty css */
3
+ import './assets/index.css';import './assets/index47.css';/* empty css */
4
4
  import { IconButton as q } from "./components/IconButton/index.js";
5
5
  import "./index-CxrBcaoP.js";
6
6
  import "./components/Tabs/index.js";
@@ -0,0 +1,15 @@
1
+ import { JSX } from 'react';
2
+ import { NavItem } from '.';
3
+ type NavLinkProps = {
4
+ link: NavItem;
5
+ path: string;
6
+ parentPath: string;
7
+ openPath: string | null;
8
+ togglePath: (path: string) => void;
9
+ updateTriangleIndicator: (path: string) => void;
10
+ setOpenPath: (path: string | null) => void;
11
+ renderLinks: (links: NavItem[], parentPath: string) => JSX.Element[];
12
+ buttonRefs: React.RefObject<Map<string, HTMLButtonElement | null>>;
13
+ };
14
+ export declare function NavLink({ link, path, parentPath, openPath, togglePath, updateTriangleIndicator, setOpenPath, renderLinks, buttonRefs, }: NavLinkProps): import("react/jsx-runtime").JSX.Element;
15
+ export {};
@@ -32,6 +32,7 @@ export type NavItem = {
32
32
  icon?: string;
33
33
  };
34
34
  export type NavGroup = {
35
+ _key?: string;
35
36
  title: string;
36
37
  primaryItems?: NavItem[];
37
38
  secondaryItems?: NavItem[];
@@ -48,7 +49,7 @@ type NavbarProps = {
48
49
  variant?: Variant;
49
50
  alignment: Alignment;
50
51
  className?: string;
51
- navigationType?: "default" | "advanced";
52
+ navigationType: "default" | "advanced";
52
53
  };
53
54
  export declare function Navbar({ title, logo, items, groups, utilityItems, isSticky, isTransparent, alignment, variant, navigationType, className, }: NavbarProps): import("react/jsx-runtime").JSX.Element;
54
55
  export {};
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "quirk-ui",
3
3
  "private": false,
4
- "version": "0.0.203",
4
+ "version": "0.0.205",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {
@@ -1 +0,0 @@
1
- ._calendar_zbxci_1{padding:var(--spacing-sm);border-radius:var(--radius-md);min-width:250px}._header_zbxci_7{display:flex;justify-content:space-between;margin-bottom:var(--spacing-sm)}._dayName_zbxci_13{font-weight:var(--font-weight-semibold);color:var(--color-text-primary);width:30px;text-align:center;flex:1;font-size:var(--font-size-sm)}._monthName_zbxci_23{font-weight:var(--font-weight-bold);color:var(--color-text-primary)}._week_zbxci_28{display:flex;justify-content:space-between;color:var(--color-text-primary)}._cell_zbxci_34{flex:1;padding:var(--spacing-xs) 0;text-align:center;background:none;color:var(--color-text-primary);border:none;cursor:pointer;width:30px}._outside_zbxci_45{color:var(--color-muted)}._selected_zbxci_49{background-color:var(--color-primary);color:#fff;border-radius:var(--radius-md)}