quirk-ui 0.0.413 → 0.0.415

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 @@
1
+ "use strict";require('./assets/NavLink.css');const e=require("react/jsx-runtime"),p=require("react"),v=require("./external-link-DDShu-48.cjs"),k=require("./chevron-down-DfK1XBl3.cjs"),g="_navbar_1bon6_5",C="_sticky_1bon6_19",w="_left_1bon6_34",x="_container_1bon6_35",f="_logo_1bon6_39",I="_nav_1bon6_5",y="_center_1bon6_54",N="_hidden_1bon6_60",j="_visible_1bon6_67",$="_right_1bon6_82",T="_title_1bon6_89",S="_linkWrapper_1bon6_99",W="_parent_1bon6_99",E="_linkItem_1bon6_107",q="_link_1bon6_99",L="_sublinkToggle_1bon6_111",M="_standard_1bon6_159",R="_triangle_1bon6_167",z="_transparent_1bon6_172",D="_twoColumn_1bon6_276",A="_navInner_1bon6_398",B="_grid_1bon6_409",F="_separator_1bon6_444",G="_newTabIcon_1bon6_474",H="_linkContent_1bon6_489",J="_open_1bon6_500",K="_sublinks_1bon6_486",Q="_show_1bon6_571",U="_primaryColumn_1bon6_612",V="_secondaryColumn_1bon6_621",X="_sublinksInner_1bon6_629",Y="_sublinksColumn_1bon6_647",Z="_chevron_1bon6_657",O="_advanced_1bon6_839",P="_subtitle_1bon6_848",nn="_withSpotlight_1bon6_890",on="_withoutSpotlight_1bon6_894",en="_searchWrapper_1bon6_940",o={navbar:g,sticky:C,left:w,container:x,logo:f,nav:I,center:y,hidden:N,visible:j,right:$,title:T,linkWrapper:S,parent:W,linkItem:E,link:q,sublinkToggle:L,standard:M,triangle:R,transparent:z,twoColumn:D,navInner:A,grid:B,separator:F,newTabIcon:G,linkContent:H,open:J,sublinks:K,show:Q,primaryColumn:U,secondaryColumn:V,sublinksInner:X,sublinksColumn:Y,chevron:Z,default:"_default_1bon6_773",advanced:O,subtitle:P,withSpotlight:nn,withoutSpotlight:on,searchWrapper:en};function sn({link:n,path:s,parentPath:l,openPath:u,togglePath:i,updateTriangleIndicator:d,setOpenPath:t,renderLinks:h,buttonRefs:m}){var c;const r=u===s,_=!!((c=n.sublinks)!=null&&c.length),a=p.useRef(null);return m.current.set(s,a.current),e.jsxs("div",{className:`${o.linkWrapper} ${l?"":o.parent}`,children:[e.jsx("div",{className:o.linkItem,children:n.href?e.jsxs("a",{href:n.href,className:o.link,target:n.isExternal?"_blank":"_self",rel:n.isExternal?"noopener noreferrer":void 0,onClick:()=>{var b;t(null),(b=n.onClick)==null||b.call(n)},onMouseEnter:()=>{l||t(null)},role:"menuitem",children:[n.label,n.isExternal&&e.jsx(v.ExternalLink,{className:o.newTabIcon,size:16})]}):e.jsxs("button",{ref:a,"aria-haspopup":_?"true":void 0,"aria-expanded":r,className:`${o.sublinkToggle} ${r?o.open:""}`,onClick:()=>i(s),onMouseEnter:()=>{d(s),t(s)},children:[n.label,_&&e.jsx(k.ChevronDown,{size:18,className:o.chevron})]})}),_&&e.jsx("div",{className:`${o.sublinks} ${r?o.show:""}`,onMouseLeave:()=>i(s),role:"menu","aria-label":`${n.label} submenu`,children:e.jsx("div",{children:e.jsx("div",{className:o.sublinksInner,children:e.jsx("div",{className:o.sublinksColumn,children:h(n.sublinks,s)})})})})]},s)}exports.NavLink=sn;exports.styles=o;
@@ -1,38 +1,38 @@
1
- import { jsxs as i, jsx as s } from "react/jsx-runtime";
2
- import { useRef as k } from "react";
3
- import { E as v } from "./external-link-BOPobeQJ.js";
1
+ import { jsxs as l, jsx as s } from "react/jsx-runtime";
2
+ import { useRef as v } from "react";
3
+ import { E as k } from "./external-link-BOPobeQJ.js";
4
4
  import { C as g } from "./chevron-down-DSUzBz9F.js";
5
- import './assets/NavLink.css';const f = "_navbar_1bon6_5", w = "_sticky_1bon6_19", C = "_left_1bon6_34", I = "_container_1bon6_35", N = "_logo_1bon6_39", x = "_nav_1bon6_5", T = "_center_1bon6_54", y = "_hidden_1bon6_60", E = "_visible_1bon6_67", S = "_right_1bon6_82", W = "_title_1bon6_89", $ = "_linkWrapper_1bon6_99", L = "_parent_1bon6_99", D = "_linkItem_1bon6_107", F = "_link_1bon6_99", M = "_sublinkToggle_1bon6_111", j = "_standard_1bon6_159", z = "_triangle_1bon6_167", R = "_transparent_1bon6_172", q = "_twoColumn_1bon6_276", A = "_navInner_1bon6_398", B = "_grid_1bon6_409", G = "_separator_1bon6_444", H = "_newTabIcon_1bon6_474", J = "_sublinksDescription_1bon6_486", K = "_linkContent_1bon6_489", Q = "_open_1bon6_500", U = "_sublinks_1bon6_486", V = "_show_1bon6_571", X = "_primaryColumn_1bon6_612", Y = "_sublinksInner_1bon6_629", Z = "_sublinksColumn_1bon6_647", O = "_chevron_1bon6_657", P = "_advanced_1bon6_839", nn = "_subtitle_1bon6_848", on = "_withSpotlight_1bon6_890", en = "_withoutSpotlight_1bon6_894", sn = "_searchWrapper_1bon6_940", tn = "_fadeInFromLeft_1bon6_962", o = {
6
- navbar: f,
7
- sticky: w,
8
- left: C,
5
+ import './assets/NavLink.css';const C = "_navbar_1bon6_5", f = "_sticky_1bon6_19", w = "_left_1bon6_34", I = "_container_1bon6_35", N = "_logo_1bon6_39", y = "_nav_1bon6_5", x = "_center_1bon6_54", T = "_hidden_1bon6_60", E = "_visible_1bon6_67", S = "_right_1bon6_82", W = "_title_1bon6_89", $ = "_linkWrapper_1bon6_99", L = "_parent_1bon6_99", M = "_linkItem_1bon6_107", j = "_link_1bon6_99", z = "_sublinkToggle_1bon6_111", R = "_standard_1bon6_159", D = "_triangle_1bon6_167", q = "_transparent_1bon6_172", A = "_twoColumn_1bon6_276", B = "_navInner_1bon6_398", F = "_grid_1bon6_409", G = "_separator_1bon6_444", H = "_newTabIcon_1bon6_474", J = "_linkContent_1bon6_489", K = "_open_1bon6_500", Q = "_sublinks_1bon6_486", U = "_show_1bon6_571", V = "_primaryColumn_1bon6_612", X = "_secondaryColumn_1bon6_621", Y = "_sublinksInner_1bon6_629", Z = "_sublinksColumn_1bon6_647", O = "_chevron_1bon6_657", P = "_advanced_1bon6_839", nn = "_subtitle_1bon6_848", on = "_withSpotlight_1bon6_890", en = "_withoutSpotlight_1bon6_894", sn = "_searchWrapper_1bon6_940", o = {
6
+ navbar: C,
7
+ sticky: f,
8
+ left: w,
9
9
  container: I,
10
10
  logo: N,
11
- nav: x,
12
- center: T,
13
- hidden: y,
11
+ nav: y,
12
+ center: x,
13
+ hidden: T,
14
14
  visible: E,
15
15
  right: S,
16
16
  title: W,
17
17
  linkWrapper: $,
18
18
  parent: L,
19
- linkItem: D,
20
- link: F,
21
- sublinkToggle: M,
22
- standard: j,
23
- triangle: z,
24
- transparent: R,
25
- twoColumn: q,
26
- navInner: A,
27
- grid: B,
19
+ linkItem: M,
20
+ link: j,
21
+ sublinkToggle: z,
22
+ standard: R,
23
+ triangle: D,
24
+ transparent: q,
25
+ twoColumn: A,
26
+ navInner: B,
27
+ grid: F,
28
28
  separator: G,
29
29
  newTabIcon: H,
30
- sublinksDescription: J,
31
- linkContent: K,
32
- open: Q,
33
- sublinks: U,
34
- show: V,
35
- primaryColumn: X,
30
+ linkContent: J,
31
+ open: K,
32
+ sublinks: Q,
33
+ show: U,
34
+ primaryColumn: V,
35
+ secondaryColumn: X,
36
36
  sublinksInner: Y,
37
37
  sublinksColumn: Z,
38
38
  chevron: O,
@@ -41,13 +41,12 @@ import './assets/NavLink.css';const f = "_navbar_1bon6_5", w = "_sticky_1bon6_19
41
41
  subtitle: nn,
42
42
  withSpotlight: on,
43
43
  withoutSpotlight: en,
44
- searchWrapper: sn,
45
- fadeInFromLeft: tn
44
+ searchWrapper: sn
46
45
  };
47
- function cn({
46
+ function an({
48
47
  link: n,
49
48
  path: e,
50
- parentPath: l,
49
+ parentPath: i,
51
50
  openPath: d,
52
51
  togglePath: a,
53
52
  updateTriangleIndicator: m,
@@ -56,13 +55,13 @@ function cn({
56
55
  buttonRefs: h
57
56
  }) {
58
57
  var b;
59
- const r = d === e, _ = !!((b = n.sublinks) != null && b.length), c = k(null);
60
- return h.current.set(e, c.current), /* @__PURE__ */ i(
58
+ const r = d === e, _ = !!((b = n.sublinks) != null && b.length), c = v(null);
59
+ return h.current.set(e, c.current), /* @__PURE__ */ l(
61
60
  "div",
62
61
  {
63
- className: `${o.linkWrapper} ${l ? "" : o.parent}`,
62
+ className: `${o.linkWrapper} ${i ? "" : o.parent}`,
64
63
  children: [
65
- /* @__PURE__ */ s("div", { className: o.linkItem, children: n.href ? /* @__PURE__ */ i(
64
+ /* @__PURE__ */ s("div", { className: o.linkItem, children: n.href ? /* @__PURE__ */ l(
66
65
  "a",
67
66
  {
68
67
  href: n.href,
@@ -74,15 +73,15 @@ function cn({
74
73
  t(null), (u = n.onClick) == null || u.call(n);
75
74
  },
76
75
  onMouseEnter: () => {
77
- l || t(null);
76
+ i || t(null);
78
77
  },
79
78
  role: "menuitem",
80
79
  children: [
81
80
  n.label,
82
- n.isExternal && /* @__PURE__ */ s(v, { className: o.newTabIcon, size: 16 })
81
+ n.isExternal && /* @__PURE__ */ s(k, { className: o.newTabIcon, size: 16 })
83
82
  ]
84
83
  }
85
- ) : /* @__PURE__ */ i(
84
+ ) : /* @__PURE__ */ l(
86
85
  "button",
87
86
  {
88
87
  ref: c,
@@ -115,6 +114,6 @@ function cn({
115
114
  );
116
115
  }
117
116
  export {
118
- cn as N,
117
+ an as N,
119
118
  o as s
120
119
  };
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("react");const e=require("../../../NavLink-RigeMjDg.cjs");require("../../../external-link-DDShu-48.cjs");require("../../../chevron-down-DfK1XBl3.cjs");exports.NavLink=e.NavLink;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("react");const e=require("../../../NavLink-B-VlTZ4z.cjs");require("../../../external-link-DDShu-48.cjs");require("../../../chevron-down-DfK1XBl3.cjs");exports.NavLink=e.NavLink;
@@ -1,6 +1,6 @@
1
1
  import "react/jsx-runtime";
2
2
  import "react";
3
- import { N as a } from "../../../NavLink-BlhKWQ4q.js";
3
+ import { N as a } from "../../../NavLink-DIfybFk5.js";
4
4
  import "../../../external-link-BOPobeQJ.js";
5
5
  import "../../../chevron-down-DSUzBz9F.js";
6
6
  export {
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("react"),e=require("../../../NavLink-RigeMjDg.cjs"),ne=require("../../../chevron-down-DfK1XBl3.cjs"),te=require("../../../external-link-DDShu-48.cjs"),le={standard:e.styles.standard,transparent:e.styles.transparent},ae={left:e.styles.left,center:e.styles.center,right:e.styles.right};function ie({title:H,logo:m,items:f,groups:u,utilityItems:C,isSticky:V=!1,showSearch:L=!0,showLocaleSelect:E=!0,alignment:b="right",variant:A="standard",navigationType:R="default",className:J}){const[M,K]=i.useState(0),[x,r]=i.useState(null),[y,Q]=i.useState(!1),[j,U]=i.useState(!1),[S,Y]=i.useState(!1),[Z,I]=i.useState(null),[v,$]=i.useState(0),[P,W]=i.useState(null),k=i.useRef(null),h=i.useRef(null),N=i.useRef(new Map),_=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} ${e.styles.searchWrapper}`,children:s.jsx("div",{className:e.styles.linkItem})}),z=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem})}),w=t=>{const l=N.current.get(t);if(l&&h.current){const o=l.getBoundingClientRect(),c=h.current.getBoundingClientRect(),n=o.left-c.left+o.width/2;I(n)}};console.log(w);const ee=t=>{r(l=>l===t?null:t)},se=t=>t.map((l,o)=>{var T,D,F,G;const c=`group-${o}`,p=P===o,n=(T=l.primaryItems)==null?void 0:T[v??0];return s.jsxs("div",{className:`${e.styles.linkWrapper} ${e.styles.parent}`,onMouseEnter:()=>{W(o),r(c),w(c)},onMouseLeave:()=>{W(null),$(0),r(null)},children:[s.jsx("div",{className:e.styles.linkItem,children:s.jsxs("button",{ref:a=>{N.current.set(c,a)},role:"menuitem","aria-haspopup":"true","aria-expanded":p,"aria-controls":`submenu-${o}`,className:`${e.styles.sublinkToggle} ${p?e.styles.open:""} `,children:[l.title,s.jsx(ne.ChevronDown,{size:18,className:e.styles.chevron})]})}),s.jsx("div",{id:`submenu-${o}`,className:`${e.styles.sublinks} ${p?e.styles.show:""}`,role:"menu","aria-label":`${l.title} submenu`,children:s.jsx("div",{children:s.jsxs("div",{className:`${e.styles.sublinksInner} ${l.spotlight?e.styles.withSpotlight:e.styles.withoutSpotlight}`,children:[s.jsxs("div",{className:`${e.styles.sublinksColumn} ${e.styles.primaryColumn}`,children:[s.jsx("div",{className:e.styles.linkItem}),(D=l.primaryItems)==null?void 0:D.map((a,d)=>a.href?s.jsxs("a",{href:a.href,className:`${e.styles.link} ${v===d?e.styles.open:""}`,target:a.isExternal?"_blank":"_self",rel:a.isExternal?"noopener noreferrer":void 0,onClick:()=>{var X;r(null),(X=a.onClick)==null||X.call(a)},onMouseEnter:()=>a.sublinks?$(d):null,role:"menuitem",children:[s.jsxs("span",{className:e.styles.linkContent,children:[a.label,a.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:a.subtitle})]}),a.isExternal&&s.jsx(te.ExternalLink,{className:e.styles.newTabIcon,size:16})]},a._key??d):s.jsx("button",{className:`${e.styles.sublinkToggle} ${v===d?e.styles.open:""}`,onMouseEnter:()=>$(d),children:s.jsxs("span",{className:e.styles.linkContent,children:[a.label,a.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:a.subtitle})]})},a._key??d))]}),(n==null?void 0:n.sublinks)&&((F=n==null?void 0:n.sublinks)==null?void 0:F.length)>0&&s.jsxs("div",{className:`${e.styles.sublinksColumn} ${e.styles.fadeInFromLeft}`,children:[(n==null?void 0:n.description)&&s.jsx("div",{className:e.styles.sublinksDescription,children:n==null?void 0:n.description}),(n==null?void 0:n.sublinks)&&(n==null?void 0:n.sublinks.length)>0&&g(n.sublinks,`${c}-${v}`)]},`${n.label}-${(G=n==null?void 0:n.sublinks)==null?void 0:G.length}`)]})})})]},l._key??`group-${o}`)}),g=(t,l="")=>t.map(o=>{const c=`${l}/${o.label}`;return s.jsx(e.NavLink,{link:o,path:c,parentPath:l,openPath:x,togglePath:ee,updateTriangleIndicator:w,setOpenPath:r,renderLinks:g,buttonRefs:N},o._key??c)}),B=i.useCallback(t=>{k.current&&!k.current.contains(t.target)&&r(null)},[]),O=i.useCallback(()=>{q(),typeof window<"u"&&window.innerWidth>768&&(Q(!1),r(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),q=i.useCallback(()=>{if(h.current){const t=h.current.getBoundingClientRect().width;K(t),Y(!0)}},[]);return i.useEffect(()=>{const t=typeof window<"u",l=typeof document<"u";return t&&window.addEventListener("resize",O),l&&document.addEventListener("click",B),q(),()=>{t&&window.removeEventListener("resize",O),l&&document.removeEventListener("click",B)}},[]),i.useEffect(()=>{if(typeof window<"u"){const t=()=>{const l=window.innerWidth<768;U(l)};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)}},[]),i.useEffect(()=>{if(typeof document<"u")return document.body.style.overflow=y?"hidden":"",()=>{document.body.style.overflow=""}},[y]),s.jsx("header",{ref:k,className:`${J??""} ${ae[b]} ${le[A]} ${e.styles.navbar} ${V?e.styles.sticky:""} ${u&&u.length?e.styles.advanced:e.styles.default}`,role:"navigation","aria-label":"Main navigation",children:s.jsxs("div",{className:`${e.styles.container} ${(!C||C.length===0)&&b!=="center"?e.styles.twoColumn:""}`,children:[m?s.jsx("div",{className:e.styles.logo,children:m}):s.jsx("div",{className:e.styles.title,children:H}),s.jsx("nav",{ref:h,style:{left:b==="center"?`calc(50% - ${M/2}px)`:"0"},className:`${e.styles.nav} ${y?e.styles.open:""} ${S?e.styles.visible:e.styles.hidden}`,id:"main-menu",role:"menubar","aria-label":"Main navigation",children:s.jsxs("div",{className:e.styles.navInner,children:[s.jsx("svg",{style:{left:`${Z}px`},className:`${e.styles.triangle} ${x?e.styles.show:""}`,width:16,height:12,viewBox:"0 0 100 75",xmlns:"http://www.w3.org/2000/svg",children:s.jsx("polygon",{points:"50,5 95,70 5,70",strokeLinejoin:"round",fill:"white",stroke:"white"})}),R==="default"&&f&&s.jsxs("div",{className:e.styles.grid,children:[f&&f.length>0&&g(f),L&&!j&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(_,{})]}),E&&s.jsx(z,{})]}),!j&&R==="advanced"&&u&&s.jsxs("div",{className:e.styles.grid,children:[u.length>0&&se(u),L&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(_,{})]}),E&&s.jsx(z,{})]}),s.jsx("p",{children:"HELLO"}),s.jsxs("p",{children:["vis: ",S]}),s.jsxs("p",{children:["open: ",y]}),s.jsxs("p",{children:["path: ",x]}),s.jsxs("p",{children:["nav: ",M]}),s.jsxs("p",{children:["mobile: ",j]})]})})]})})}exports.Navbar=ie;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),a=require("react"),e=require("../../../NavLink-B-VlTZ4z.cjs"),se=require("../../../chevron-down-DfK1XBl3.cjs"),te=require("../../../external-link-DDShu-48.cjs"),ne={standard:e.styles.standard,transparent:e.styles.transparent},le={left:e.styles.left,center:e.styles.center,right:e.styles.right};function ae({title:T,logo:p,items:y,groups:d,utilityItems:k,isSticky:D=!1,showSearch:g=!0,showLocaleSelect:C=!0,alignment:f="right",variant:G="standard",navigationType:I="default",className:X}){const[F,V]=a.useState(0),[E,c]=a.useState(null),[v,A]=a.useState(!1),[L,H]=a.useState(!1),[J,K]=a.useState(!1),[Q,U]=a.useState(null),[m,x]=a.useState(0),[Y,R]=a.useState(null),b=a.useRef(null),u=a.useRef(null),$=a.useRef(new Map),M=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} ${e.styles.searchWrapper}`,children:s.jsx("div",{className:e.styles.linkItem})}),S=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem})}),j=n=>{const t=$.current.get(n);if(t&&u.current){const r=t.getBoundingClientRect(),i=u.current.getBoundingClientRect(),w=r.left-i.left+r.width/2;U(w)}};console.log(j);const Z=n=>{c(t=>t===n?null:n)},ee=n=>n.map((t,r)=>{var B,q,O;const i=`group-${r}`,h=Y===r,w=(B=t.primaryItems)==null?void 0:B[m??0];return console.log(w),s.jsxs("div",{className:`${e.styles.linkWrapper} ${e.styles.parent}`,onMouseEnter:()=>{R(r),c(i),j(i)},onMouseLeave:()=>{R(null),x(0),c(null)},children:[s.jsx("div",{className:e.styles.linkItem,children:s.jsxs("button",{ref:l=>{$.current.set(i,l)},role:"menuitem","aria-haspopup":"true","aria-expanded":h,"aria-controls":`submenu-${r}`,className:`${e.styles.sublinkToggle} ${h?e.styles.open:""} `,children:[t.title,s.jsx(se.ChevronDown,{size:18,className:e.styles.chevron})]})}),s.jsx("div",{id:`submenu-${r}`,className:`${e.styles.sublinks} ${h?e.styles.show:""}`,role:"menu","aria-label":`${t.title} submenu`,children:s.jsx("div",{children:s.jsxs("div",{className:`${e.styles.sublinksInner} ${t.spotlight?e.styles.withSpotlight:e.styles.withoutSpotlight}`,children:[s.jsxs("div",{className:`${e.styles.sublinksColumn} ${e.styles.primaryColumn}`,children:[s.jsx("div",{className:e.styles.linkItem}),(q=t.primaryItems)==null?void 0:q.map((l,o)=>l.href?s.jsxs("a",{href:l.href,className:`${e.styles.link} ${m===o?e.styles.open:""}`,target:l.isExternal?"_blank":"_self",rel:l.isExternal?"noopener noreferrer":void 0,onClick:()=>{var P;c(null),(P=l.onClick)==null||P.call(l)},onMouseEnter:()=>l.sublinks?x(o):null,role:"menuitem",children:[s.jsxs("span",{className:e.styles.linkContent,children:[l.label,l.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:l.subtitle})]}),l.isExternal&&s.jsx(te.ExternalLink,{className:e.styles.newTabIcon,size:16})]},l._key??o):s.jsx("button",{className:`${e.styles.sublinkToggle} ${m===o?e.styles.open:""}`,onMouseEnter:()=>x(o),children:s.jsxs("span",{className:e.styles.linkContent,children:[l.label,l.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:l.subtitle})]})},l._key??o))]}),(t==null?void 0:t.secondaryItems)&&((O=t==null?void 0:t.secondaryItems)==null?void 0:O.length)>0&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.secondaryColumn}`,children:t.secondaryItems&&t.secondaryItems.length>0&&N(t.secondaryItems,`${i}-secondary`)})]})})})]},t._key??`group-${r}`)}),N=(n,t="")=>n.map(r=>{const i=`${t}/${r.label}`;return s.jsx(e.NavLink,{link:r,path:i,parentPath:t,openPath:E,togglePath:Z,updateTriangleIndicator:j,setOpenPath:c,renderLinks:N,buttonRefs:$},r._key??i)}),W=a.useCallback(n=>{b.current&&!b.current.contains(n.target)&&c(null)},[]),_=a.useCallback(()=>{z(),typeof window<"u"&&window.innerWidth>768&&(A(!1),c(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),z=a.useCallback(()=>{if(u.current){const n=u.current.getBoundingClientRect().width;V(n),K(!0)}},[]);return a.useEffect(()=>{const n=typeof window<"u",t=typeof document<"u";return n&&window.addEventListener("resize",_),t&&document.addEventListener("click",W),z(),()=>{n&&window.removeEventListener("resize",_),t&&document.removeEventListener("click",W)}},[]),a.useEffect(()=>{if(typeof window<"u"){const n=()=>{const t=window.innerWidth<768;H(t)};return n(),window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)}},[]),a.useEffect(()=>{if(typeof document<"u")return document.body.style.overflow=v?"hidden":"",()=>{document.body.style.overflow=""}},[v]),s.jsx("header",{ref:b,className:`${X??""} ${le[f]} ${ne[G]} ${e.styles.navbar} ${D?e.styles.sticky:""} ${d&&d.length?e.styles.advanced:e.styles.default}`,role:"navigation","aria-label":"Main navigation",children:s.jsxs("div",{className:`${e.styles.container} ${(!k||k.length===0)&&f!=="center"?e.styles.twoColumn:""}`,children:[p?s.jsx("div",{className:e.styles.logo,children:p}):s.jsx("div",{className:e.styles.title,children:T}),s.jsx("nav",{ref:u,style:{left:f==="center"?`calc(50% - ${F/2}px)`:"0"},className:`${e.styles.nav} ${v?e.styles.open:""} ${J?e.styles.visible:e.styles.hidden}`,id:"main-menu",role:"menubar","aria-label":"Main navigation",children:s.jsxs("div",{className:e.styles.navInner,children:[s.jsx("svg",{style:{left:`${Q}px`},className:`${e.styles.triangle} ${E?e.styles.show:""}`,width:16,height:12,viewBox:"0 0 100 75",xmlns:"http://www.w3.org/2000/svg",children:s.jsx("polygon",{points:"50,5 95,70 5,70",strokeLinejoin:"round",fill:"white",stroke:"white"})}),I==="default"&&y&&s.jsxs("div",{className:e.styles.grid,children:[y&&y.length>0&&N(y),g&&!L&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(M,{})]}),C&&s.jsx(S,{})]}),!L&&I==="advanced"&&d&&s.jsxs("div",{className:e.styles.grid,children:[d.length>0&&ee(d),g&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(M,{})]}),C&&s.jsx(S,{})]})]})})]})})}exports.Navbar=ae;
@@ -1,120 +1,120 @@
1
- import { jsx as n, jsxs as a, Fragment as K } from "react/jsx-runtime";
2
- import { useState as c, useRef as y, useCallback as M, useEffect as x } from "react";
3
- import { s as e, N as oe } from "../../../NavLink-BlhKWQ4q.js";
1
+ import { jsx as t, jsxs as i, Fragment as A } from "react/jsx-runtime";
2
+ import { useState as o, useRef as g, useCallback as I, useEffect as E } from "react";
3
+ import { s as e, N as ie } from "../../../NavLink-DIfybFk5.js";
4
4
  import { C as re } from "../../../chevron-down-DSUzBz9F.js";
5
- import { E as ce } from "../../../external-link-BOPobeQJ.js";
6
- const de = {
5
+ import { E as oe } from "../../../external-link-BOPobeQJ.js";
6
+ const ce = {
7
7
  standard: e.standard,
8
8
  transparent: e.transparent
9
- }, ue = {
9
+ }, de = {
10
10
  left: e.left,
11
11
  center: e.center,
12
12
  right: e.right
13
13
  };
14
14
  function $e({
15
- title: Q,
16
- logo: R,
17
- items: p,
18
- groups: h,
19
- utilityItems: W,
20
- isSticky: U = !1,
21
- showSearch: z = !0,
22
- showLocaleSelect: B = !0,
23
- alignment: N = "right",
24
- variant: Y = "standard",
25
- navigationType: O = "default",
15
+ title: F,
16
+ logo: L,
17
+ items: m,
18
+ groups: u,
19
+ utilityItems: M,
20
+ isSticky: H = !1,
21
+ showSearch: x = !0,
22
+ showLocaleSelect: R = !0,
23
+ alignment: v = "right",
24
+ variant: q = "standard",
25
+ navigationType: W = "default",
26
26
  // searchComponent,
27
27
  // localeSelectComponent,
28
- className: Z
28
+ className: J
29
29
  }) {
30
- const [_, I] = c(0), [m, d] = c(null), [v, P] = c(!1), [w, ee] = c(!1), [T, ne] = c(!1), [se, le] = c(null), [b, k] = c(
30
+ const [K, Q] = o(0), [z, c] = o(null), [$, U] = o(!1), [B, Y] = o(!1), [Z, ee] = o(!1), [ne, te] = o(null), [p, b] = o(
31
31
  0
32
- ), [te, j] = c(null), g = y(null), f = y(null), C = y(/* @__PURE__ */ new Map()), D = () => /* @__PURE__ */ n(
32
+ ), [se, _] = o(null), w = g(null), h = g(null), N = g(/* @__PURE__ */ new Map()), O = () => /* @__PURE__ */ t(
33
33
  "div",
34
34
  {
35
35
  className: `${e.linkWrapper} ${e.parent} ${e.searchWrapper}`,
36
- children: /* @__PURE__ */ n("div", { className: e.linkItem })
36
+ children: /* @__PURE__ */ t("div", { className: e.linkItem })
37
37
  }
38
- ), G = () => /* @__PURE__ */ n("div", { className: `${e.linkWrapper} ${e.parent} `, children: /* @__PURE__ */ n("div", { className: e.linkItem }) }), E = (l) => {
39
- const t = C.current.get(l);
40
- if (t && f.current) {
41
- const o = t.getBoundingClientRect(), r = f.current.getBoundingClientRect(), s = o.left - r.left + o.width / 2;
42
- le(s);
38
+ ), P = () => /* @__PURE__ */ t("div", { className: `${e.linkWrapper} ${e.parent} `, children: /* @__PURE__ */ t("div", { className: e.linkItem }) }), y = (s) => {
39
+ const n = N.current.get(s);
40
+ if (n && h.current) {
41
+ const l = n.getBoundingClientRect(), r = h.current.getBoundingClientRect(), C = l.left - r.left + l.width / 2;
42
+ te(C);
43
43
  }
44
44
  };
45
- console.log(E);
46
- const ie = (l) => {
47
- d((t) => t === l ? null : l);
48
- }, ae = (l) => l.map((t, o) => {
49
- var S, V, A, q;
50
- const r = `group-${o}`, $ = te === o, s = (S = t.primaryItems) == null ? void 0 : S[b ?? 0];
51
- return /* @__PURE__ */ a(
45
+ console.log(y);
46
+ const ae = (s) => {
47
+ c((n) => n === s ? null : s);
48
+ }, le = (s) => s.map((n, l) => {
49
+ var X, D, S;
50
+ const r = `group-${l}`, f = se === l, C = (X = n.primaryItems) == null ? void 0 : X[p ?? 0];
51
+ return console.log(C), /* @__PURE__ */ i(
52
52
  "div",
53
53
  {
54
54
  className: `${e.linkWrapper} ${e.parent}`,
55
55
  onMouseEnter: () => {
56
- j(o), d(r), E(r);
56
+ _(l), c(r), y(r);
57
57
  },
58
58
  onMouseLeave: () => {
59
- j(null), k(0), d(null);
59
+ _(null), b(0), c(null);
60
60
  },
61
61
  children: [
62
- /* @__PURE__ */ n("div", { className: e.linkItem, children: /* @__PURE__ */ a(
62
+ /* @__PURE__ */ t("div", { className: e.linkItem, children: /* @__PURE__ */ i(
63
63
  "button",
64
64
  {
65
- ref: (i) => {
66
- C.current.set(r, i);
65
+ ref: (a) => {
66
+ N.current.set(r, a);
67
67
  },
68
68
  role: "menuitem",
69
69
  "aria-haspopup": "true",
70
- "aria-expanded": $,
71
- "aria-controls": `submenu-${o}`,
72
- className: `${e.sublinkToggle} ${$ ? e.open : ""} `,
70
+ "aria-expanded": f,
71
+ "aria-controls": `submenu-${l}`,
72
+ className: `${e.sublinkToggle} ${f ? e.open : ""} `,
73
73
  children: [
74
- t.title,
75
- /* @__PURE__ */ n(re, { size: 18, className: e.chevron })
74
+ n.title,
75
+ /* @__PURE__ */ t(re, { size: 18, className: e.chevron })
76
76
  ]
77
77
  }
78
78
  ) }),
79
- /* @__PURE__ */ n(
79
+ /* @__PURE__ */ t(
80
80
  "div",
81
81
  {
82
- id: `submenu-${o}`,
83
- className: `${e.sublinks} ${$ ? e.show : ""}`,
82
+ id: `submenu-${l}`,
83
+ className: `${e.sublinks} ${f ? e.show : ""}`,
84
84
  role: "menu",
85
- "aria-label": `${t.title} submenu`,
86
- children: /* @__PURE__ */ n("div", { children: /* @__PURE__ */ a(
85
+ "aria-label": `${n.title} submenu`,
86
+ children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ i(
87
87
  "div",
88
88
  {
89
- className: `${e.sublinksInner} ${t.spotlight ? e.withSpotlight : e.withoutSpotlight}`,
89
+ className: `${e.sublinksInner} ${n.spotlight ? e.withSpotlight : e.withoutSpotlight}`,
90
90
  children: [
91
- /* @__PURE__ */ a(
91
+ /* @__PURE__ */ i(
92
92
  "div",
93
93
  {
94
94
  className: `${e.sublinksColumn} ${e.primaryColumn}`,
95
95
  children: [
96
- /* @__PURE__ */ n("div", { className: e.linkItem }),
97
- (V = t.primaryItems) == null ? void 0 : V.map(
98
- (i, u) => i.href ? /* @__PURE__ */ a(
96
+ /* @__PURE__ */ t("div", { className: e.linkItem }),
97
+ (D = n.primaryItems) == null ? void 0 : D.map(
98
+ (a, d) => a.href ? /* @__PURE__ */ i(
99
99
  "a",
100
100
  {
101
- href: i.href,
102
- className: `${e.link} ${b === u ? e.open : ""}`,
103
- target: i.isExternal ? "_blank" : "_self",
104
- rel: i.isExternal ? "noopener noreferrer" : void 0,
101
+ href: a.href,
102
+ className: `${e.link} ${p === d ? e.open : ""}`,
103
+ target: a.isExternal ? "_blank" : "_self",
104
+ rel: a.isExternal ? "noopener noreferrer" : void 0,
105
105
  onClick: () => {
106
- var J;
107
- d(null), (J = i.onClick) == null || J.call(i);
106
+ var V;
107
+ c(null), (V = a.onClick) == null || V.call(a);
108
108
  },
109
- onMouseEnter: () => i.sublinks ? k(u) : null,
109
+ onMouseEnter: () => a.sublinks ? b(d) : null,
110
110
  role: "menuitem",
111
111
  children: [
112
- /* @__PURE__ */ a("span", { className: e.linkContent, children: [
113
- i.label,
114
- i.subtitle && /* @__PURE__ */ n("span", { className: e.subtitle, children: i.subtitle })
112
+ /* @__PURE__ */ i("span", { className: e.linkContent, children: [
113
+ a.label,
114
+ a.subtitle && /* @__PURE__ */ t("span", { className: e.subtitle, children: a.subtitle })
115
115
  ] }),
116
- i.isExternal && /* @__PURE__ */ n(
117
- ce,
116
+ a.isExternal && /* @__PURE__ */ t(
117
+ oe,
118
118
  {
119
119
  className: e.newTabIcon,
120
120
  size: 16
@@ -122,36 +122,29 @@ function $e({
122
122
  )
123
123
  ]
124
124
  },
125
- i._key ?? u
126
- ) : /* @__PURE__ */ n(
125
+ a._key ?? d
126
+ ) : /* @__PURE__ */ t(
127
127
  "button",
128
128
  {
129
- className: `${e.sublinkToggle} ${b === u ? e.open : ""}`,
130
- onMouseEnter: () => k(u),
131
- children: /* @__PURE__ */ a("span", { className: e.linkContent, children: [
132
- i.label,
133
- i.subtitle && /* @__PURE__ */ n("span", { className: e.subtitle, children: i.subtitle })
129
+ className: `${e.sublinkToggle} ${p === d ? e.open : ""}`,
130
+ onMouseEnter: () => b(d),
131
+ children: /* @__PURE__ */ i("span", { className: e.linkContent, children: [
132
+ a.label,
133
+ a.subtitle && /* @__PURE__ */ t("span", { className: e.subtitle, children: a.subtitle })
134
134
  ] })
135
135
  },
136
- i._key ?? u
136
+ a._key ?? d
137
137
  )
138
138
  )
139
139
  ]
140
140
  }
141
141
  ),
142
- (s == null ? void 0 : s.sublinks) && ((A = s == null ? void 0 : s.sublinks) == null ? void 0 : A.length) > 0 && /* @__PURE__ */ a(
142
+ (n == null ? void 0 : n.secondaryItems) && ((S = n == null ? void 0 : n.secondaryItems) == null ? void 0 : S.length) > 0 && /* @__PURE__ */ t(
143
143
  "div",
144
144
  {
145
- className: `${e.sublinksColumn} ${e.fadeInFromLeft}`,
146
- children: [
147
- (s == null ? void 0 : s.description) && /* @__PURE__ */ n("div", { className: e.sublinksDescription, children: s == null ? void 0 : s.description }),
148
- (s == null ? void 0 : s.sublinks) && (s == null ? void 0 : s.sublinks.length) > 0 && L(
149
- s.sublinks,
150
- `${r}-${b}`
151
- )
152
- ]
153
- },
154
- `${s.label}-${(q = s == null ? void 0 : s.sublinks) == null ? void 0 : q.length}`
145
+ className: `${e.sublinksColumn} ${e.secondaryColumn}`,
146
+ children: n.secondaryItems && n.secondaryItems.length > 0 && k(n.secondaryItems, `${r}-secondary`)
147
+ }
155
148
  )
156
149
  ]
157
150
  }
@@ -160,88 +153,88 @@ function $e({
160
153
  )
161
154
  ]
162
155
  },
163
- t._key ?? `group-${o}`
156
+ n._key ?? `group-${l}`
164
157
  );
165
- }), L = (l, t = "") => l.map((o) => {
166
- const r = `${t}/${o.label}`;
167
- return /* @__PURE__ */ n(
168
- oe,
158
+ }), k = (s, n = "") => s.map((l) => {
159
+ const r = `${n}/${l.label}`;
160
+ return /* @__PURE__ */ t(
161
+ ie,
169
162
  {
170
- link: o,
163
+ link: l,
171
164
  path: r,
172
- parentPath: t,
173
- openPath: m,
174
- togglePath: ie,
175
- updateTriangleIndicator: E,
176
- setOpenPath: d,
177
- renderLinks: L,
178
- buttonRefs: C
165
+ parentPath: n,
166
+ openPath: z,
167
+ togglePath: ae,
168
+ updateTriangleIndicator: y,
169
+ setOpenPath: c,
170
+ renderLinks: k,
171
+ buttonRefs: N
179
172
  },
180
- o._key ?? r
173
+ l._key ?? r
181
174
  );
182
- }), X = M((l) => {
183
- g.current && !g.current.contains(l.target) && d(null);
184
- }, []), F = M(() => {
185
- H(), typeof window < "u" && window.innerWidth > 768 && (P(!1), d(null), typeof document < "u" && (document.body.style.overflow = ""));
186
- }, []), H = M(() => {
187
- if (f.current) {
188
- const l = f.current.getBoundingClientRect().width;
189
- I(l), ne(!0);
175
+ }), T = I((s) => {
176
+ w.current && !w.current.contains(s.target) && c(null);
177
+ }, []), j = I(() => {
178
+ G(), typeof window < "u" && window.innerWidth > 768 && (U(!1), c(null), typeof document < "u" && (document.body.style.overflow = ""));
179
+ }, []), G = I(() => {
180
+ if (h.current) {
181
+ const s = h.current.getBoundingClientRect().width;
182
+ Q(s), ee(!0);
190
183
  }
191
184
  }, []);
192
- return x(() => {
193
- const l = typeof window < "u", t = typeof document < "u";
194
- return l && window.addEventListener("resize", F), t && document.addEventListener("click", X), H(), () => {
195
- l && window.removeEventListener("resize", F), t && document.removeEventListener("click", X);
185
+ return E(() => {
186
+ const s = typeof window < "u", n = typeof document < "u";
187
+ return s && window.addEventListener("resize", j), n && document.addEventListener("click", T), G(), () => {
188
+ s && window.removeEventListener("resize", j), n && document.removeEventListener("click", T);
196
189
  };
197
- }, []), x(() => {
190
+ }, []), E(() => {
198
191
  if (typeof window < "u") {
199
- const l = () => {
200
- const t = window.innerWidth < 768;
201
- ee(t);
192
+ const s = () => {
193
+ const n = window.innerWidth < 768;
194
+ Y(n);
202
195
  };
203
- return l(), window.addEventListener("resize", l), () => window.removeEventListener("resize", l);
196
+ return s(), window.addEventListener("resize", s), () => window.removeEventListener("resize", s);
204
197
  }
205
- }, []), x(() => {
198
+ }, []), E(() => {
206
199
  if (typeof document < "u")
207
- return document.body.style.overflow = v ? "hidden" : "", () => {
200
+ return document.body.style.overflow = $ ? "hidden" : "", () => {
208
201
  document.body.style.overflow = "";
209
202
  };
210
- }, [v]), /* @__PURE__ */ n(
203
+ }, [$]), /* @__PURE__ */ t(
211
204
  "header",
212
205
  {
213
- ref: g,
214
- className: `${Z ?? ""} ${ue[N]} ${de[Y]} ${e.navbar} ${U ? e.sticky : ""} ${h && h.length ? e.advanced : e.default}`,
206
+ ref: w,
207
+ className: `${J ?? ""} ${de[v]} ${ce[q]} ${e.navbar} ${H ? e.sticky : ""} ${u && u.length ? e.advanced : e.default}`,
215
208
  role: "navigation",
216
209
  "aria-label": "Main navigation",
217
- children: /* @__PURE__ */ a(
210
+ children: /* @__PURE__ */ i(
218
211
  "div",
219
212
  {
220
- className: `${e.container} ${(!W || W.length === 0) && N !== "center" ? e.twoColumn : ""}`,
213
+ className: `${e.container} ${(!M || M.length === 0) && v !== "center" ? e.twoColumn : ""}`,
221
214
  children: [
222
- R ? /* @__PURE__ */ n("div", { className: e.logo, children: R }) : /* @__PURE__ */ n("div", { className: e.title, children: Q }),
223
- /* @__PURE__ */ n(
215
+ L ? /* @__PURE__ */ t("div", { className: e.logo, children: L }) : /* @__PURE__ */ t("div", { className: e.title, children: F }),
216
+ /* @__PURE__ */ t(
224
217
  "nav",
225
218
  {
226
- ref: f,
219
+ ref: h,
227
220
  style: {
228
- left: N === "center" ? `calc(50% - ${_ / 2}px)` : "0"
221
+ left: v === "center" ? `calc(50% - ${K / 2}px)` : "0"
229
222
  },
230
- className: `${e.nav} ${v ? e.open : ""} ${T ? e.visible : e.hidden}`,
223
+ className: `${e.nav} ${$ ? e.open : ""} ${Z ? e.visible : e.hidden}`,
231
224
  id: "main-menu",
232
225
  role: "menubar",
233
226
  "aria-label": "Main navigation",
234
- children: /* @__PURE__ */ a("div", { className: e.navInner, children: [
235
- /* @__PURE__ */ n(
227
+ children: /* @__PURE__ */ i("div", { className: e.navInner, children: [
228
+ /* @__PURE__ */ t(
236
229
  "svg",
237
230
  {
238
- style: { left: `${se}px` },
239
- className: `${e.triangle} ${m ? e.show : ""}`,
231
+ style: { left: `${ne}px` },
232
+ className: `${e.triangle} ${z ? e.show : ""}`,
240
233
  width: 16,
241
234
  height: 12,
242
235
  viewBox: "0 0 100 75",
243
236
  xmlns: "http://www.w3.org/2000/svg",
244
- children: /* @__PURE__ */ n(
237
+ children: /* @__PURE__ */ t(
245
238
  "polygon",
246
239
  {
247
240
  points: "50,5 95,70 5,70",
@@ -252,42 +245,21 @@ function $e({
252
245
  )
253
246
  }
254
247
  ),
255
- O === "default" && p && /* @__PURE__ */ a("div", { className: e.grid, children: [
256
- p && p.length > 0 && L(p),
257
- z && !w && /* @__PURE__ */ a(K, { children: [
258
- /* @__PURE__ */ n("span", { className: e.separator }),
259
- /* @__PURE__ */ n(D, {})
248
+ W === "default" && m && /* @__PURE__ */ i("div", { className: e.grid, children: [
249
+ m && m.length > 0 && k(m),
250
+ x && !B && /* @__PURE__ */ i(A, { children: [
251
+ /* @__PURE__ */ t("span", { className: e.separator }),
252
+ /* @__PURE__ */ t(O, {})
260
253
  ] }),
261
- B && /* @__PURE__ */ n(G, {})
254
+ R && /* @__PURE__ */ t(P, {})
262
255
  ] }),
263
- !w && O === "advanced" && h && /* @__PURE__ */ a("div", { className: e.grid, children: [
264
- h.length > 0 && ae(h),
265
- z && /* @__PURE__ */ a(K, { children: [
266
- /* @__PURE__ */ n("span", { className: e.separator }),
267
- /* @__PURE__ */ n(D, {})
256
+ !B && W === "advanced" && u && /* @__PURE__ */ i("div", { className: e.grid, children: [
257
+ u.length > 0 && le(u),
258
+ x && /* @__PURE__ */ i(A, { children: [
259
+ /* @__PURE__ */ t("span", { className: e.separator }),
260
+ /* @__PURE__ */ t(O, {})
268
261
  ] }),
269
- B && /* @__PURE__ */ n(G, {})
270
- ] }),
271
- /* @__PURE__ */ n("p", { children: "HELLO" }),
272
- /* @__PURE__ */ a("p", { children: [
273
- "vis: ",
274
- T
275
- ] }),
276
- /* @__PURE__ */ a("p", { children: [
277
- "open: ",
278
- v
279
- ] }),
280
- /* @__PURE__ */ a("p", { children: [
281
- "path: ",
282
- m
283
- ] }),
284
- /* @__PURE__ */ a("p", { children: [
285
- "nav: ",
286
- _
287
- ] }),
288
- /* @__PURE__ */ a("p", { children: [
289
- "mobile: ",
290
- w
262
+ R && /* @__PURE__ */ t(P, {})
291
263
  ] })
292
264
  ] })
293
265
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "quirk-ui",
3
3
  "private": false,
4
- "version": "0.0.413",
4
+ "version": "0.0.415",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {
@@ -1 +0,0 @@
1
- "use strict";require('./assets/NavLink.css');const e=require("react/jsx-runtime"),k=require("react"),m=require("./external-link-DDShu-48.cjs"),v=require("./chevron-down-DfK1XBl3.cjs"),g="_navbar_1bon6_5",f="_sticky_1bon6_19",w="_left_1bon6_34",I="_container_1bon6_35",C="_logo_1bon6_39",x="_nav_1bon6_5",N="_center_1bon6_54",j="_hidden_1bon6_60",$="_visible_1bon6_67",y="_right_1bon6_82",L="_title_1bon6_89",T="_linkWrapper_1bon6_99",S="_parent_1bon6_99",W="_linkItem_1bon6_107",E="_link_1bon6_99",q="_sublinkToggle_1bon6_111",D="_standard_1bon6_159",F="_triangle_1bon6_167",M="_transparent_1bon6_172",R="_twoColumn_1bon6_276",z="_navInner_1bon6_398",A="_grid_1bon6_409",B="_separator_1bon6_444",G="_newTabIcon_1bon6_474",H="_sublinksDescription_1bon6_486",J="_linkContent_1bon6_489",K="_open_1bon6_500",Q="_sublinks_1bon6_486",U="_show_1bon6_571",V="_primaryColumn_1bon6_612",X="_sublinksInner_1bon6_629",Y="_sublinksColumn_1bon6_647",Z="_chevron_1bon6_657",O="_advanced_1bon6_839",P="_subtitle_1bon6_848",nn="_withSpotlight_1bon6_890",on="_withoutSpotlight_1bon6_894",en="_searchWrapper_1bon6_940",sn="_fadeInFromLeft_1bon6_962",o={navbar:g,sticky:f,left:w,container:I,logo:C,nav:x,center:N,hidden:j,visible:$,right:y,title:L,linkWrapper:T,parent:S,linkItem:W,link:E,sublinkToggle:q,standard:D,triangle:F,transparent:M,twoColumn:R,navInner:z,grid:A,separator:B,newTabIcon:G,sublinksDescription:H,linkContent:J,open:K,sublinks:Q,show:U,primaryColumn:V,sublinksInner:X,sublinksColumn:Y,chevron:Z,default:"_default_1bon6_773",advanced:O,subtitle:P,withSpotlight:nn,withoutSpotlight:on,searchWrapper:en,fadeInFromLeft:sn};function tn({link:n,path:s,parentPath:i,openPath:u,togglePath:l,updateTriangleIndicator:d,setOpenPath:t,renderLinks:p,buttonRefs:h}){var c;const r=u===s,_=!!((c=n.sublinks)!=null&&c.length),a=k.useRef(null);return h.current.set(s,a.current),e.jsxs("div",{className:`${o.linkWrapper} ${i?"":o.parent}`,children:[e.jsx("div",{className:o.linkItem,children:n.href?e.jsxs("a",{href:n.href,className:o.link,target:n.isExternal?"_blank":"_self",rel:n.isExternal?"noopener noreferrer":void 0,onClick:()=>{var b;t(null),(b=n.onClick)==null||b.call(n)},onMouseEnter:()=>{i||t(null)},role:"menuitem",children:[n.label,n.isExternal&&e.jsx(m.ExternalLink,{className:o.newTabIcon,size:16})]}):e.jsxs("button",{ref:a,"aria-haspopup":_?"true":void 0,"aria-expanded":r,className:`${o.sublinkToggle} ${r?o.open:""}`,onClick:()=>l(s),onMouseEnter:()=>{d(s),t(s)},children:[n.label,_&&e.jsx(v.ChevronDown,{size:18,className:o.chevron})]})}),_&&e.jsx("div",{className:`${o.sublinks} ${r?o.show:""}`,onMouseLeave:()=>l(s),role:"menu","aria-label":`${n.label} submenu`,children:e.jsx("div",{children:e.jsx("div",{className:o.sublinksInner,children:e.jsx("div",{className:o.sublinksColumn,children:p(n.sublinks,s)})})})})]},s)}exports.NavLink=tn;exports.styles=o;