quirk-ui 0.0.417 → 0.0.418

package/dist/{NavLink-BTwMRfGl.js → NavLink-CHG0iIum.js}

@@ -2,15 +2,15 @@ import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { useRef as v } from "react";
 import { E as g } from "./external-link-BOPobeQJ.js";
 import { C as k } from "./chevron-down-DSUzBz9F.js";
-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 = "_spotlightColumn_1bon6_625", Z = "_sublinksInner_1bon6_629", O = "_sublinksColumn_1bon6_647", P = "_chevron_1bon6_657", nn = "_advanced_1bon6_839", on = "_subtitle_1bon6_848", sn = "_withSpotlight_1bon6_890", en = "_withoutSpotlight_1bon6_894", tn = "_searchWrapper_1bon6_940", o = {
+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", 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", 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 = "_spotlightColumn_1bon6_625", Y = "_sublinksInner_1bon6_629", Z = "_sublinksColumn_1bon6_647", O = "_chevron_1bon6_657", P = "_advanced_1bon6_839", nn = "_subtitle_1bon6_848", on = "_withSpotlight_1bon6_890", sn = "_withoutSpotlight_1bon6_894", en = "_searchWrapper_1bon6_940", o = {
   navbar: C,
   sticky: f,
   left: w,
   container: I,
   logo: N,
-  nav: y,
-  center: x,
-  hidden: T,
+  nav: x,
+  center: T,
+  hidden: y,
   visible: E,
   right: S,
   title: W,
@@ -32,19 +32,18 @@ import './assets/NavLink.css';const C = "_navbar_1bon6_5", f = "_sticky_1bon6_19
   sublinks: Q,
   show: U,
   primaryColumn: V,
-  secondaryColumn: X,
-  spotlightColumn: Y,
-  sublinksInner: Z,
-  sublinksColumn: O,
-  chevron: P,
+  spotlightColumn: X,
+  sublinksInner: Y,
+  sublinksColumn: Z,
+  chevron: O,
   default: "_default_1bon6_773",
-  advanced: nn,
-  subtitle: on,
-  withSpotlight: sn,
-  withoutSpotlight: en,
-  searchWrapper: tn
+  advanced: P,
+  subtitle: nn,
+  withSpotlight: on,
+  withoutSpotlight: sn,
+  searchWrapper: en
 };
-function cn({
+function an({
   link: n,
   path: s,
   parentPath: i,
@@ -115,6 +114,6 @@ function cn({
   );
 }
 export {
-  cn as N,
+  an as N,
   o as s
 };

package/dist/NavLink-Dr7pguuT.cjs

@@ -0,0 +1 @@
+"use strict";require('./assets/NavLink.css');const e=require("react/jsx-runtime"),m=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",N="_center_1bon6_54",j="_hidden_1bon6_60",$="_visible_1bon6_67",y="_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="_spotlightColumn_1bon6_625",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:N,hidden:j,visible:$,right:y,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,spotlightColumn: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:p}){var c;const r=u===s,_=!!((c=n.sublinks)!=null&&c.length),a=m.useRef(null);return p.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;

package/dist/core/components/NavBar/NavLink.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("react");const e=require("../../../NavLink-VkWDBdck.cjs");require("../../../external-link-DDShu-48.cjs");require("../../../chevron-down-DfK1XBl3.cjs");exports.NavLink=e.NavLink;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("react");const e=require("../../../NavLink-Dr7pguuT.cjs");require("../../../external-link-DDShu-48.cjs");require("../../../chevron-down-DfK1XBl3.cjs");exports.NavLink=e.NavLink;

package/dist/core/components/NavBar/NavLink.mjs

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { N as a } from "../../../NavLink-BTwMRfGl.js";
+import { N as a } from "../../../NavLink-CHG0iIum.js";
 import "../../../external-link-BOPobeQJ.js";
 import "../../../chevron-down-DSUzBz9F.js";
 export {

package/dist/core/components/NavBar/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),a=require("react"),e=require("../../../NavLink-VkWDBdck.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),[m,A]=a.useState(!1),[L,H]=a.useState(!1),[J,K]=a.useState(!1),[Q,U]=a.useState(null),[v,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 i=t.getBoundingClientRect(),r=u.current.getBoundingClientRect(),w=i.left-r.left+i.width/2;U(w)}};console.log(j);const Z=n=>{c(t=>t===n?null:n)},ee=n=>n.map((t,i)=>{var B,q,O;const r=`group-${i}`,h=Y===i,w=(B=t.primaryItems)==null?void 0:B[v??0];return console.log(w),s.jsxs("div",{className:`${e.styles.linkWrapper} ${e.styles.parent}`,onMouseEnter:()=>{R(i),c(r),j(r)},onMouseLeave:()=>{R(null),x(0),c(null)},children:[s.jsx("div",{className:e.styles.linkItem,children:s.jsxs("button",{ref:l=>{$.current.set(r,l)},role:"menuitem","aria-haspopup":"true","aria-expanded":h,"aria-controls":`submenu-${i}`,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-${i}`,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} ${v===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} ${v===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,`${r}-secondary`)}),t.spotlight&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.spotlightColumn}`,children:t.spotlight})]})})})]},t._key??`group-${i}`)}),N=(n,t="")=>n.map(i=>{const r=`${t}/${i.label}`;return s.jsx(e.NavLink,{link:i,path:r,parentPath:t,openPath:E,togglePath:Z,updateTriangleIndicator:j,setOpenPath:c,renderLinks:N,buttonRefs:$},i._key??r)}),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=m?"hidden":"",()=>{document.body.style.overflow=""}},[m]),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} ${m?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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),a=require("react"),e=require("../../../NavLink-Dr7pguuT.cjs"),ee=require("../../../chevron-down-DfK1XBl3.cjs"),se=require("../../../external-link-DDShu-48.cjs"),te={standard:e.styles.standard,transparent:e.styles.transparent},ne={left:e.styles.left,center:e.styles.center,right:e.styles.right};function le({title:P,logo:N,items:y,groups:d,utilityItems:w,isSticky:T=!1,showSearch:k=!0,showLocaleSelect:g=!0,alignment:f="right",variant:D="standard",navigationType:C="default",className:G}){const[X,F]=a.useState(0),[E,o]=a.useState(null),[v,V]=a.useState(!1),[L,A]=a.useState(!1),[H,J]=a.useState(!1),[K,Q]=a.useState(null),[m,p]=a.useState(0),[U,R]=a.useState(null),x=a.useRef(null),u=a.useRef(null),b=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})}),I=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem})}),$=n=>{const t=b.current.get(n);if(t&&u.current){const r=t.getBoundingClientRect(),i=u.current.getBoundingClientRect(),j=r.left-i.left+r.width/2;Q(j)}};console.log($);const Y=n=>{o(t=>t===n?null:n)},Z=n=>n.map((t,r)=>{var B,q;const i=`group-${r}`,h=U===r,j=(B=t.primaryItems)==null?void 0:B[m??0];return console.log(j),s.jsxs("div",{className:`${e.styles.linkWrapper} ${e.styles.parent}`,onMouseEnter:()=>{R(r),o(i),$(i)},onMouseLeave:()=>{R(null),p(0),o(null)},children:[s.jsx("div",{className:e.styles.linkItem,children:s.jsxs("button",{ref:l=>{b.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(ee.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,c)=>l.href?s.jsxs("a",{href:l.href,className:`${e.styles.link} ${m===c?e.styles.open:""}`,target:l.isExternal?"_blank":"_self",rel:l.isExternal?"noopener noreferrer":void 0,onClick:()=>{var O;o(null),(O=l.onClick)==null||O.call(l)},onMouseEnter:()=>l.sublinks?p(c):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(se.ExternalLink,{className:e.styles.newTabIcon,size:16})]},l._key??c):s.jsx("button",{className:`${e.styles.sublinkToggle} ${m===c?e.styles.open:""}`,onMouseEnter:()=>p(c),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??c))]}),t.spotlight&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.spotlightColumn}`,children:t.spotlight})]})})})]},t._key??`group-${r}`)}),S=(n,t="")=>n.map(r=>{const i=`${t}/${r.label}`;return s.jsx(e.NavLink,{link:r,path:i,parentPath:t,openPath:E,togglePath:Y,updateTriangleIndicator:$,setOpenPath:o,renderLinks:S,buttonRefs:b},r._key??i)}),W=a.useCallback(n=>{x.current&&!x.current.contains(n.target)&&o(null)},[]),_=a.useCallback(()=>{z(),typeof window<"u"&&window.innerWidth>768&&(V(!1),o(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),z=a.useCallback(()=>{if(u.current){const n=u.current.getBoundingClientRect().width;F(n),J(!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;A(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:x,className:`${G??""} ${ne[f]} ${te[D]} ${e.styles.navbar} ${T?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} ${(!w||w.length===0)&&f!=="center"?e.styles.twoColumn:""}`,children:[N?s.jsx("div",{className:e.styles.logo,children:N}):s.jsx("div",{className:e.styles.title,children:P}),s.jsx("nav",{ref:u,style:{left:f==="center"?`calc(50% - ${X/2}px)`:"0"},className:`${e.styles.nav} ${v?e.styles.open:""} ${H?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:`${K}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"})}),C==="default"&&y&&s.jsxs("div",{className:e.styles.grid,children:[y&&y.length>0&&S(y),k&&!L&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(M,{})]}),g&&s.jsx(I,{})]}),!L&&C==="advanced"&&d&&s.jsxs("div",{className:e.styles.grid,children:[d.length>0&&Z(d),k&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(M,{})]}),g&&s.jsx(I,{})]})]})})]})})}exports.Navbar=le;

package/dist/core/components/NavBar/index.mjs

@@ -1,120 +1,120 @@
-import { jsx as t, jsxs as i, Fragment as A } from "react/jsx-runtime";
-import { useState as o, useRef as g, useCallback as I, useEffect as E } from "react";
-import { s as e, N as ie } from "../../../NavLink-BTwMRfGl.js";
-import { C as re } from "../../../chevron-down-DSUzBz9F.js";
-import { E as oe } from "../../../external-link-BOPobeQJ.js";
-const ce = {
+import { jsx as n, jsxs as i, Fragment as V } from "react/jsx-runtime";
+import { useState as o, useRef as y, useCallback as C, useEffect as E } from "react";
+import { s as e, N as ae } from "../../../NavLink-CHG0iIum.js";
+import { C as ie } from "../../../chevron-down-DSUzBz9F.js";
+import { E as re } from "../../../external-link-BOPobeQJ.js";
+const oe = {
   standard: e.standard,
   transparent: e.transparent
-}, de = {
+}, ce = {
   left: e.left,
   center: e.center,
   right: e.right
 };
-function $e({
-  title: F,
+function ve({
+  title: A,
   logo: L,
-  items: m,
+  items: f,
   groups: u,
-  utilityItems: M,
-  isSticky: H = !1,
-  showSearch: x = !0,
-  showLocaleSelect: R = !0,
+  utilityItems: I,
+  isSticky: F = !1,
+  showSearch: M = !0,
+  showLocaleSelect: x = !0,
   alignment: v = "right",
-  variant: q = "standard",
-  navigationType: W = "default",
+  variant: H = "standard",
+  navigationType: R = "default",
   // searchComponent,
   // localeSelectComponent,
-  className: J
+  className: q
 }) {
-  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(
+  const [J, K] = o(0), [W, c] = o(null), [p, Q] = o(!1), [z, U] = o(!1), [Y, Z] = o(!1), [ee, ne] = o(null), [$, b] = o(
     0
-  ), [se, _] = o(null), N = g(null), h = g(null), w = g(/* @__PURE__ */ new Map()), O = () => /* @__PURE__ */ t(
+  ), [te, B] = o(null), w = y(null), h = y(null), N = y(/* @__PURE__ */ new Map()), _ = () => /* @__PURE__ */ n(
     "div",
     {
       className: `${e.linkWrapper} ${e.parent} ${e.searchWrapper}`,
-      children: /* @__PURE__ */ t("div", { className: e.linkItem })
+      children: /* @__PURE__ */ n("div", { className: e.linkItem })
     }
-  ), P = () => /* @__PURE__ */ t("div", { className: `${e.linkWrapper} ${e.parent} `, children: /* @__PURE__ */ t("div", { className: e.linkItem }) }), k = (s) => {
-    const n = w.current.get(s);
-    if (n && h.current) {
-      const l = n.getBoundingClientRect(), r = h.current.getBoundingClientRect(), C = l.left - r.left + l.width / 2;
-      te(C);
+  ), O = () => /* @__PURE__ */ n("div", { className: `${e.linkWrapper} ${e.parent} `, children: /* @__PURE__ */ n("div", { className: e.linkItem }) }), k = (s) => {
+    const t = N.current.get(s);
+    if (t && h.current) {
+      const a = t.getBoundingClientRect(), r = h.current.getBoundingClientRect(), g = a.left - r.left + a.width / 2;
+      ne(g);
     }
   };
   console.log(k);
-  const ae = (s) => {
-    c((n) => n === s ? null : s);
-  }, le = (s) => s.map((n, l) => {
-    var X, D, S;
-    const r = `group-${l}`, f = se === l, C = (X = n.primaryItems) == null ? void 0 : X[p ?? 0];
-    return console.log(C), /* @__PURE__ */ i(
+  const se = (s) => {
+    c((t) => t === s ? null : s);
+  }, le = (s) => s.map((t, a) => {
+    var X, D;
+    const r = `group-${a}`, m = te === a, g = (X = t.primaryItems) == null ? void 0 : X[$ ?? 0];
+    return console.log(g), /* @__PURE__ */ i(
       "div",
       {
         className: `${e.linkWrapper} ${e.parent}`,
         onMouseEnter: () => {
-          _(l), c(r), k(r);
+          B(a), c(r), k(r);
         },
         onMouseLeave: () => {
-          _(null), b(0), c(null);
+          B(null), b(0), c(null);
         },
         children: [
-          /* @__PURE__ */ t("div", { className: e.linkItem, children: /* @__PURE__ */ i(
+          /* @__PURE__ */ n("div", { className: e.linkItem, children: /* @__PURE__ */ i(
             "button",
             {
-              ref: (a) => {
-                w.current.set(r, a);
+              ref: (l) => {
+                N.current.set(r, l);
               },
               role: "menuitem",
               "aria-haspopup": "true",
-              "aria-expanded": f,
-              "aria-controls": `submenu-${l}`,
-              className: `${e.sublinkToggle} ${f ? e.open : ""} `,
+              "aria-expanded": m,
+              "aria-controls": `submenu-${a}`,
+              className: `${e.sublinkToggle} ${m ? e.open : ""} `,
               children: [
-                n.title,
-                /* @__PURE__ */ t(re, { size: 18, className: e.chevron })
+                t.title,
+                /* @__PURE__ */ n(ie, { size: 18, className: e.chevron })
               ]
             }
           ) }),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ n(
             "div",
             {
-              id: `submenu-${l}`,
-              className: `${e.sublinks} ${f ? e.show : ""}`,
+              id: `submenu-${a}`,
+              className: `${e.sublinks} ${m ? e.show : ""}`,
               role: "menu",
-              "aria-label": `${n.title} submenu`,
-              children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ i(
+              "aria-label": `${t.title} submenu`,
+              children: /* @__PURE__ */ n("div", { children: /* @__PURE__ */ i(
                 "div",
                 {
-                  className: `${e.sublinksInner} ${n.spotlight ? e.withSpotlight : e.withoutSpotlight}`,
+                  className: `${e.sublinksInner} ${t.spotlight ? e.withSpotlight : e.withoutSpotlight}`,
                   children: [
                     /* @__PURE__ */ i(
                       "div",
                       {
                         className: `${e.sublinksColumn} ${e.primaryColumn}`,
                         children: [
-                          /* @__PURE__ */ t("div", { className: e.linkItem }),
-                          (D = n.primaryItems) == null ? void 0 : D.map(
-                            (a, d) => a.href ? /* @__PURE__ */ i(
+                          /* @__PURE__ */ n("div", { className: e.linkItem }),
+                          (D = t.primaryItems) == null ? void 0 : D.map(
+                            (l, d) => l.href ? /* @__PURE__ */ i(
                               "a",
                               {
-                                href: a.href,
-                                className: `${e.link} ${p === d ? e.open : ""}`,
-                                target: a.isExternal ? "_blank" : "_self",
-                                rel: a.isExternal ? "noopener noreferrer" : void 0,
+                                href: l.href,
+                                className: `${e.link} ${$ === d ? e.open : ""}`,
+                                target: l.isExternal ? "_blank" : "_self",
+                                rel: l.isExternal ? "noopener noreferrer" : void 0,
                                 onClick: () => {
-                                  var V;
-                                  c(null), (V = a.onClick) == null || V.call(a);
+                                  var S;
+                                  c(null), (S = l.onClick) == null || S.call(l);
                                 },
-                                onMouseEnter: () => a.sublinks ? b(d) : null,
+                                onMouseEnter: () => l.sublinks ? b(d) : null,
                                 role: "menuitem",
                                 children: [
                                   /* @__PURE__ */ i("span", { className: e.linkContent, children: [
-                                    a.label,
-                                    a.subtitle && /* @__PURE__ */ t("span", { className: e.subtitle, children: a.subtitle })
+                                    l.label,
+                                    l.subtitle && /* @__PURE__ */ n("span", { className: e.subtitle, children: l.subtitle })
                                   ] }),
-                                  a.isExternal && /* @__PURE__ */ t(
-                                    oe,
+                                  l.isExternal && /* @__PURE__ */ n(
+                                    re,
                                     {
                                       className: e.newTabIcon,
                                       size: 16
@@ -122,35 +122,28 @@ function $e({
                                   )
                                 ]
                               },
-                              a._key ?? d
-                            ) : /* @__PURE__ */ t(
+                              l._key ?? d
+                            ) : /* @__PURE__ */ n(
                               "button",
                               {
-                                className: `${e.sublinkToggle} ${p === d ? e.open : ""}`,
+                                className: `${e.sublinkToggle} ${$ === d ? e.open : ""}`,
                                 onMouseEnter: () => b(d),
                                 children: /* @__PURE__ */ i("span", { className: e.linkContent, children: [
-                                  a.label,
-                                  a.subtitle && /* @__PURE__ */ t("span", { className: e.subtitle, children: a.subtitle })
+                                  l.label,
+                                  l.subtitle && /* @__PURE__ */ n("span", { className: e.subtitle, children: l.subtitle })
                                 ] })
                               },
-                              a._key ?? d
+                              l._key ?? d
                             )
                           )
                         ]
                       }
                     ),
-                    (n == null ? void 0 : n.secondaryItems) && ((S = n == null ? void 0 : n.secondaryItems) == null ? void 0 : S.length) > 0 && /* @__PURE__ */ t(
-                      "div",
-                      {
-                        className: `${e.sublinksColumn} ${e.secondaryColumn}`,
-                        children: n.secondaryItems && n.secondaryItems.length > 0 && y(n.secondaryItems, `${r}-secondary`)
-                      }
-                    ),
-                    n.spotlight && /* @__PURE__ */ t(
+                    t.spotlight && /* @__PURE__ */ n(
                       "div",
                       {
                         className: `${e.sublinksColumn} ${e.spotlightColumn}`,
-                        children: n.spotlight
+                        children: t.spotlight
                       }
                     )
                   ]
@@ -160,88 +153,88 @@ function $e({
           )
         ]
       },
-      n._key ?? `group-${l}`
+      t._key ?? `group-${a}`
     );
-  }), y = (s, n = "") => s.map((l) => {
-    const r = `${n}/${l.label}`;
-    return /* @__PURE__ */ t(
-      ie,
+  }), P = (s, t = "") => s.map((a) => {
+    const r = `${t}/${a.label}`;
+    return /* @__PURE__ */ n(
+      ae,
       {
-        link: l,
+        link: a,
         path: r,
-        parentPath: n,
-        openPath: z,
-        togglePath: ae,
+        parentPath: t,
+        openPath: W,
+        togglePath: se,
         updateTriangleIndicator: k,
         setOpenPath: c,
-        renderLinks: y,
-        buttonRefs: w
+        renderLinks: P,
+        buttonRefs: N
       },
-      l._key ?? r
+      a._key ?? r
     );
-  }), T = I((s) => {
-    N.current && !N.current.contains(s.target) && c(null);
-  }, []), j = I(() => {
-    G(), typeof window < "u" && window.innerWidth > 768 && (U(!1), c(null), typeof document < "u" && (document.body.style.overflow = ""));
-  }, []), G = I(() => {
+  }), T = C((s) => {
+    w.current && !w.current.contains(s.target) && c(null);
+  }, []), j = C(() => {
+    G(), typeof window < "u" && window.innerWidth > 768 && (Q(!1), c(null), typeof document < "u" && (document.body.style.overflow = ""));
+  }, []), G = C(() => {
     if (h.current) {
       const s = h.current.getBoundingClientRect().width;
-      Q(s), ee(!0);
+      K(s), Z(!0);
     }
   }, []);
   return E(() => {
-    const s = typeof window < "u", n = typeof document < "u";
-    return s && window.addEventListener("resize", j), n && document.addEventListener("click", T), G(), () => {
-      s && window.removeEventListener("resize", j), n && document.removeEventListener("click", T);
+    const s = typeof window < "u", t = typeof document < "u";
+    return s && window.addEventListener("resize", j), t && document.addEventListener("click", T), G(), () => {
+      s && window.removeEventListener("resize", j), t && document.removeEventListener("click", T);
     };
   }, []), E(() => {
     if (typeof window < "u") {
       const s = () => {
-        const n = window.innerWidth < 768;
-        Y(n);
+        const t = window.innerWidth < 768;
+        U(t);
       };
       return s(), window.addEventListener("resize", s), () => window.removeEventListener("resize", s);
     }
   }, []), E(() => {
     if (typeof document < "u")
-      return document.body.style.overflow = $ ? "hidden" : "", () => {
+      return document.body.style.overflow = p ? "hidden" : "", () => {
         document.body.style.overflow = "";
       };
-  }, [$]), /* @__PURE__ */ t(
+  }, [p]), /* @__PURE__ */ n(
     "header",
     {
-      ref: N,
-      className: `${J ?? ""} ${de[v]} ${ce[q]} ${e.navbar} ${H ? e.sticky : ""} ${u && u.length ? e.advanced : e.default}`,
+      ref: w,
+      className: `${q ?? ""} ${ce[v]} ${oe[H]} ${e.navbar} ${F ? e.sticky : ""} ${u && u.length ? e.advanced : e.default}`,
       role: "navigation",
       "aria-label": "Main navigation",
       children: /* @__PURE__ */ i(
         "div",
         {
-          className: `${e.container} ${(!M || M.length === 0) && v !== "center" ? e.twoColumn : ""}`,
+          className: `${e.container} ${(!I || I.length === 0) && v !== "center" ? e.twoColumn : ""}`,
           children: [
-            L ? /* @__PURE__ */ t("div", { className: e.logo, children: L }) : /* @__PURE__ */ t("div", { className: e.title, children: F }),
-            /* @__PURE__ */ t(
+            L ? /* @__PURE__ */ n("div", { className: e.logo, children: L }) : /* @__PURE__ */ n("div", { className: e.title, children: A }),
+            /* @__PURE__ */ n(
               "nav",
               {
                 ref: h,
                 style: {
-                  left: v === "center" ? `calc(50% - ${K / 2}px)` : "0"
+                  left: v === "center" ? `calc(50% - ${J / 2}px)` : "0"
                 },
-                className: `${e.nav} ${$ ? e.open : ""} ${Z ? e.visible : e.hidden}`,
+                className: `${e.nav} ${p ? e.open : ""} ${Y ? e.visible : e.hidden}`,
                 id: "main-menu",
                 role: "menubar",
                 "aria-label": "Main navigation",
                 children: /* @__PURE__ */ i("div", { className: e.navInner, children: [
-                  /* @__PURE__ */ t(
+                  /* @__PURE__ */ n(
                     "svg",
                     {
-                      style: { left: `${ne}px` },
-                      className: `${e.triangle} ${z ? e.show : ""}`,
+                      style: { left: `${ee}px` },
+                      className: `${e.triangle} ${W ? e.show : ""}`,
                       width: 16,
                       height: 12,
                       viewBox: "0 0 100 75",
                       xmlns: "http://www.w3.org/2000/svg",
-                      children: /* @__PURE__ */ t(
+                      children: /* @__PURE__ */ n(
                         "polygon",
                         {
                           points: "50,5 95,70 5,70",
@@ -252,21 +245,21 @@ function $e({
                       )
                     }
                   ),
-                  W === "default" && m && /* @__PURE__ */ i("div", { className: e.grid, children: [
-                    m && m.length > 0 && y(m),
-                    x && !B && /* @__PURE__ */ i(A, { children: [
-                      /* @__PURE__ */ t("span", { className: e.separator }),
-                      /* @__PURE__ */ t(O, {})
+                  R === "default" && f && /* @__PURE__ */ i("div", { className: e.grid, children: [
+                    f && f.length > 0 && P(f),
+                    M && !z && /* @__PURE__ */ i(V, { children: [
+                      /* @__PURE__ */ n("span", { className: e.separator }),
+                      /* @__PURE__ */ n(_, {})
                     ] }),
-                    R && /* @__PURE__ */ t(P, {})
+                    x && /* @__PURE__ */ n(O, {})
                   ] }),
-                  !B && W === "advanced" && u && /* @__PURE__ */ i("div", { className: e.grid, children: [
+                  !z && R === "advanced" && u && /* @__PURE__ */ i("div", { className: e.grid, children: [
                     u.length > 0 && le(u),
-                    x && /* @__PURE__ */ i(A, { children: [
-                      /* @__PURE__ */ t("span", { className: e.separator }),
-                      /* @__PURE__ */ t(O, {})
+                    M && /* @__PURE__ */ i(V, { children: [
+                      /* @__PURE__ */ n("span", { className: e.separator }),
+                      /* @__PURE__ */ n(_, {})
                     ] }),
-                    R && /* @__PURE__ */ t(P, {})
+                    x && /* @__PURE__ */ n(O, {})
                   ] })
                 ] })
               }
@@ -278,5 +271,5 @@ function $e({
   );
 }
 export {
-  $e as Navbar
+  ve as Navbar
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quirk-ui",
   "private": false,
-  "version": "0.0.417",
+  "version": "0.0.418",
   "type": "module",
   "exports": {
     ".": {

package/dist/NavLink-VkWDBdck.cjs

@@ -1 +0,0 @@
-"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="_spotlightColumn_1bon6_625",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={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,spotlightColumn:X,sublinksInner:Y,sublinksColumn:Z,chevron:O,default:"_default_1bon6_773",advanced:P,subtitle:nn,withSpotlight:on,withoutSpotlight:en,searchWrapper:sn};function tn({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=tn;exports.styles=o;