quirk-ui 0.0.468 → 0.0.470

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

@@ -13,4 +13,4 @@
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const Se=[["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}],["path",{d:"m21 21-4.3-4.3",key:"1qie3q"}]],_e=G.createLucideIcon("search",Se),Le={standard:e.styles.standard,transparent:e.styles.transparent},Me={left:e.styles.left,center:e.styles.center,right:e.styles.right},Ee=({spotlight:a,renderText:b})=>{var t,C,k,p,j,S,m,_,L,M,y;const w=(t=a.image)==null?void 0:t.asset.altText,x=((C=a.callToAction.linkOptions)==null?void 0:C.linkType)==="external";let u="#";return((k=a.callToAction.linkOptions)==null?void 0:k.linkType)==="external"&&((p=a.callToAction.linkOptions)!=null&&p.externalUrl)?u=(j=a.callToAction.linkOptions)==null?void 0:j.externalUrl:((S=a.callToAction.linkOptions)==null?void 0:S.linkType)==="internal"&&((_=(m=a.callToAction.linkOptions)==null?void 0:m.internalUrl)!=null&&_.slug.current)&&(u=`/${(M=(L=a.callToAction.linkOptions)==null?void 0:L.internalUrl)==null?void 0:M.slug.current}`),s.jsxs("div",{className:e.styles.spotlight,children:[a.image&&s.jsx("div",{className:e.styles.imageWrapper,children:s.jsx("img",{src:(a==null?void 0:a.image.imageUrl)??"",alt:w||a.image.asset.description||"Content image",width:600,height:400})}),s.jsxs("div",{className:e.styles.content,children:[a.title&&s.jsx("div",{className:e.styles.title,children:b==null?void 0:b(a.title,e.styles.title)}),a.description&&s.jsx("div",{className:e.styles.description,children:b==null?void 0:b(a.description,e.styles.description)})]}),((y=a.callToAction)==null?void 0:y.linkOptions)&&s.jsx("div",{className:e.styles.actions,children:s.jsx(O.CallToAction,{as:"a",variant:a.callToAction.variant??"primary",href:u,target:x?"_blank":"_self",rel:x?"noopener noreferrer":"","aria-label":a.callToAction.ariaLabel||a.callToAction.label,children:a.callToAction.label})})]})};function Ae({renderText:a,title:b,logo:w,items:x,groups:u,utilityItems:t,isSticky:C=!1,showSearch:k=!0,showLocaleSelect:p=!0,alignment:j="right",variant:S="standard",navigationType:m="default",searchComponent:_,localeSelectComponent:L,className:M}){const[y,U]=r.useState(!1),[X,f]=r.useState(null),[ce,re]=r.useState(0),[oe,de]=r.useState(!1),[ye,ue]=r.useState(null),[o,N]=r.useState([]),[E,q]=r.useState(0),[he,H]=r.useState(null),[$,be]=r.useState(!1),[A,T]=r.useState("forward"),B=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} ${e.styles.searchWrapper}`,children:s.jsx("div",{className:e.styles.linkItem,children:s.jsx(te.Modal,{className:e.styles.searchModal,trigger:s.jsx("button",{title:"Search","aria-label":"Search",className:e.styles.search,children:s.jsx(_e,{size:16})}),content:_})})}),V=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem,children:s.jsx(te.Modal,{className:e.styles.localeModal,trigger:s.jsx("button",{title:"Locale Select","aria-label":"Locale Select",role:"menuitem",className:e.styles.locale,children:s.jsx(ge,{size:16})}),content:L})})});r.useEffect(()=>{if(typeof window<"u"){const l=()=>{const n=window.innerWidth<768;be(n)};return l(),window.addEventListener("resize",l),()=>window.removeEventListener("resize",l)}},[]);const fe=()=>{N([])},xe=l=>{T("forward"),N([{title:l.title,primary:l.primaryItems??[],secondary:l.secondaryItems??[],description:""}])},J=l=>{T("forward"),N(n=>[...n,{title:l.label,primary:l.sublinks??[],secondary:[],description:l.description}])},me=()=>{T("backward"),N(l=>l.slice(0,-1))},F=r.useRef(null),g=r.useRef(null),W=r.useRef(new Map),ke=()=>{U(l=>{const n=!l;return n||(N([]),T("forward"),f(null)),n})},K=l=>{const n=W.current.get(l);if(n&&g.current){const d=n.getBoundingClientRect(),h=g.current.getBoundingClientRect(),c=d.left-h.left+d.width/2;ue(c)}},je=l=>{f(n=>n===l?null:l)},Q=r.useCallback(l=>{F.current&&!F.current.contains(l.target)&&f(null)},[]),Y=r.useCallback(()=>{Z(),typeof window<"u"&&window.innerWidth>768&&(U(!1),f(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),Z=r.useCallback(()=>{if(g.current){const l=g.current.getBoundingClientRect().width;re(l),de(!0)}},[]);r.useEffect(()=>{const l=typeof window<"u",n=typeof document<"u";return l&&window.addEventListener("resize",Y),n&&document.addEventListener("click",Q),Z(),()=>{l&&window.removeEventListener("resize",Y),n&&document.removeEventListener("click",Q)}},[]),r.useEffect(()=>{if(typeof document<"u")return y?I.lockScroll():I.unlockScroll(),()=>I.unlockScroll()},[y]);const ve=l=>l.map((n,d)=>{var P,ee,se,le,ne;const h=`group-${d}`,z=he===d,c=(P=n.primaryItems)==null?void 0:P[E??0];return s.jsxs("div",{className:`${e.styles.linkWrapper} ${e.styles.parent}`,onMouseEnter:()=>{H(d),f(h),K(h)},onMouseLeave:()=>{H(null),q(0),f(null)},children:[s.jsx("div",{className:e.styles.linkItem,children:s.jsxs("button",{ref:i=>{W.current.set(h,i)},role:"menuitem","aria-haspopup":"true","aria-expanded":z,"aria-controls":`submenu-${d}`,className:`${e.styles.sublinkToggle} ${z?e.styles.open:""} `,children:[n.title,s.jsx(Ne.ChevronDown,{size:18,className:e.styles.chevron})]})}),s.jsx("div",{id:`submenu-${d}`,className:`${e.styles.sublinks} ${z?e.styles.show:""}`,role:"menu","aria-label":`${n.title} submenu`,children:s.jsx("div",{children:s.jsxs("div",{className:`${e.styles.sublinksInner} ${n.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}),(ee=n.primaryItems)==null?void 0:ee.map((i,v)=>i.href?s.jsxs("a",{href:i.href,className:`${e.styles.link} ${E===v?e.styles.open:""}`,target:i.isExternal?"_blank":"_self",rel:i.isExternal?"noopener noreferrer":void 0,onClick:()=>{var ae;f(null),(ae=i.onClick)==null||ae.call(i)},onMouseEnter:()=>i.sublinks?q(v):null,role:"menuitem",children:[s.jsxs("span",{className:e.styles.linkContent,children:[i.label,i.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:i.subtitle})]}),i.isExternal&&s.jsx(D.ExternalLink,{className:e.styles.newTabIcon,size:16})]},i._key??v):s.jsx("button",{className:`${e.styles.sublinkToggle} ${E===v?e.styles.open:""}`,onMouseEnter:()=>q(v),children:s.jsxs("span",{className:e.styles.linkContent,children:[i.label,i.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:i.subtitle})]})},i._key??v))]}),(c==null?void 0:c.sublinks)&&((se=c==null?void 0:c.sublinks)==null?void 0:se.length)>0&&s.jsxs("div",{className:`${e.styles.sublinksColumn} ${e.styles.fadeInFromLeft}`,children:[(c==null?void 0:c.description)&&s.jsxs("div",{className:e.styles.sublinksDescription,children:[s.jsx("p",{children:"TEXT HERE"}),a==null?void 0:a(c.description)]}),(c==null?void 0:c.sublinks)&&R(c.sublinks,`${h}-${E}`)]},`${c.label}-${(le=c==null?void 0:c.sublinks)==null?void 0:le.length}`),(n==null?void 0:n.secondaryItems)&&((ne=n==null?void 0:n.secondaryItems)==null?void 0:ne.length)>0&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.secondaryColumn}`,children:n.secondaryItems&&n.secondaryItems.length>0&&R(n.secondaryItems,`${h}-secondary`)}),n.spotlight&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.spotlightColumn}`,children:s.jsx(Ee,{spotlight:n.spotlight,renderText:a??(i=>String(i))})})]})})})]},n._key??`group-${d}`)}),R=(l,n="")=>l.map(d=>{const h=`${n}/${d.label}`;return s.jsx(e.NavLink,{link:d,path:h,parentPath:n,openPath:X,togglePath:je,updateTriangleIndicator:K,setOpenPath:f,renderLinks:R,buttonRefs:W},d._key??h)});return s.jsx("header",{ref:F,className:`${M??""} ${Me[j]} ${Le[S]} ${e.styles.navbar} ${C?e.styles.sticky:""} ${u&&u.length?e.styles.advanced:e.styles.default}`,"aria-label":"Main navigation",children:s.jsxs("div",{className:`${e.styles.container} ${(!t||t.length===0)&&j!=="center"?e.styles.twoColumn:""}`,children:[w?s.jsx("div",{className:e.styles.logo,children:w}):s.jsx("div",{className:e.styles.title,children:b}),s.jsx("nav",{ref:g,style:{left:j==="center"?`calc(50% - ${ce/2}px)`:"0"},className:`${e.styles.nav} ${y?e.styles.open:""} ${oe?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:`${ye}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"})}),m==="default"&&x&&s.jsxs("div",{className:e.styles.grid,children:[x&&x.length>0&&R(x),k&&!$&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(B,{})]}),p&&s.jsx(V,{})]}),!$&&m==="advanced"&&u&&s.jsxs("div",{className:e.styles.grid,children:[u.length>0&&ve(u),k&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(B,{})]}),p&&s.jsx(V,{})]}),$&&m==="advanced"&&y&&o.length===0&&u&&s.jsx("div",{className:`${e.styles.mobileMenu}`,children:u.map((l,n)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${A==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>xe(l),children:l.title})},l._key??n))}),$&&m==="advanced"&&y&&o.length>0&&s.jsxs("div",{className:`${e.styles.mobileMenuSlide} `,children:[s.jsx("button",{className:e.styles.back,onClick:o.length===1?fe:me,children:s.jsx(O.ChevronLeft,{size:18,"aria-hidden":"true",focusable:"false"})}),o[o.length-1].description&&s.jsx("div",{className:`${e.styles.sublinksDescription} ${A==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:a==null?void 0:a(o[o.length-1].description)}),o[o.length-1].primary.map((l,n)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${A==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:l.sublinks?s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>J(l),children:s.jsxs("span",{className:e.styles.linkContent,children:[l.label,l.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:l.subtitle})]})}):s.jsxs("a",{href:l.href,className:e.styles.link,target:l.isExternal?"_blank":"_self",rel:l.isExternal?"noopener noreferrer":void 0,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(D.ExternalLink,{className:e.styles.newTabIcon,size:16})]})},l._key??`primary-${n}`)),o[o.length-1].secondary.length>0&&s.jsx("hr",{className:e.styles.groupDivider}),o[o.length-1].secondary.map((l,n)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${A==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:l.sublinks?s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>J(l),children:l.label}):s.jsxs("a",{href:l.href,className:e.styles.link,target:l.isExternal?"_blank":"_self",rel:l.isExternal?"noopener noreferrer":void 0,role:"menuitem",children:[l.label,l.isExternal&&s.jsx(D.ExternalLink,{className:e.styles.newTabIcon,size:16})]})},l._key??`secondary-${n}`))]},`stack-${o.length}`)]})}),t&&t.length>0&&s.jsx("nav",{className:e.styles.utility,"aria-label":"Utility navigation",children:s.jsx(ie.ButtonGroup,{children:t.map((l,n)=>s.jsx(O.CallToAction,{as:"a",href:l.href??"/",variant:l.variant??"primary",displayType:l.displayType??"text",imageSrc:l.imageSrc,imageAlt:l.imageAlt,"aria-label":l.ariaLabel??l.label,icon:l.icon,iconAlignment:l.iconAlignment,children:l.imageSrc?s.jsx("img",{src:l.imageSrc,alt:l.imageAlt??l.ariaLabel??l.label}):l.label},l._key||n))})}),t&&t.length>0&&s.jsx("nav",{"aria-label":"Utility navigation",className:`${e.styles.utilityMobile} ${y?e.styles.open:""}`,children:s.jsx(ie.ButtonGroup,{alignment:"center",children:s.jsx(O.CallToAction,{as:"a",href:t[1].href??"/",variant:t[1].variant??"primary",displayType:t[1].displayType??"text",imageSrc:t[1].imageSrc,imageAlt:t[1].imageAlt,"aria-label":t[1].ariaLabel??t[1].label,icon:t[1].icon,iconAlignment:t[1].iconAlignment,children:t[1].imageSrc?s.jsx("img",{src:t[1].imageSrc,"aria-label":t[1].imageAlt??t[1].ariaLabel??t[1].label}):t[1].label})})}),s.jsxs("div",{className:e.styles.mobileButtons,children:[$&&k&&s.jsx(B,{}),s.jsx("button",{className:e.styles.menuToggle,onClick:ke,"aria-label":y?"Close menu":"Open menu","aria-expanded":y,"aria-controls":"main-menu",children:y?s.jsx(pe.X,{size:24}):s.jsx(Ce,{size:24})})]})]})})}exports.Navbar=Ae;
+ */const Se=[["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}],["path",{d:"m21 21-4.3-4.3",key:"1qie3q"}]],_e=G.createLucideIcon("search",Se),Le={standard:e.styles.standard,transparent:e.styles.transparent},Me={left:e.styles.left,center:e.styles.center,right:e.styles.right},Ee=({spotlight:a,renderText:b})=>{var t,C,k,p,j,S,m,_,L,M,y;const w=(t=a.image)==null?void 0:t.asset.altText,x=((C=a.callToAction.linkOptions)==null?void 0:C.linkType)==="external";let u="#";return((k=a.callToAction.linkOptions)==null?void 0:k.linkType)==="external"&&((p=a.callToAction.linkOptions)!=null&&p.externalUrl)?u=(j=a.callToAction.linkOptions)==null?void 0:j.externalUrl:((S=a.callToAction.linkOptions)==null?void 0:S.linkType)==="internal"&&((_=(m=a.callToAction.linkOptions)==null?void 0:m.internalUrl)!=null&&_.slug.current)&&(u=`/${(M=(L=a.callToAction.linkOptions)==null?void 0:L.internalUrl)==null?void 0:M.slug.current}`),s.jsxs("div",{className:e.styles.spotlight,children:[a.image&&s.jsx("div",{className:e.styles.imageWrapper,children:s.jsx("img",{src:(a==null?void 0:a.image.imageUrl)??"",alt:w||a.image.asset.description||"Content image",width:600,height:400})}),s.jsxs("div",{className:e.styles.content,children:[a.title&&s.jsx("div",{className:e.styles.title,children:b==null?void 0:b(a.title,e.styles.title)}),a.description&&s.jsx("div",{className:e.styles.description,children:b==null?void 0:b(a.description,e.styles.description)})]}),((y=a.callToAction)==null?void 0:y.linkOptions)&&s.jsx("div",{className:e.styles.actions,children:s.jsx(O.CallToAction,{as:"a",variant:a.callToAction.variant??"primary",href:u,target:x?"_blank":"_self",rel:x?"noopener noreferrer":"","aria-label":a.callToAction.ariaLabel||a.callToAction.label,children:a.callToAction.label})})]})};function Ae({renderText:a,title:b,logo:w,items:x,groups:u,utilityItems:t,isSticky:C=!1,showSearch:k=!0,showLocaleSelect:p=!0,alignment:j="right",variant:S="standard",navigationType:m="default",searchComponent:_,localeSelectComponent:L,className:M}){const[y,U]=r.useState(!1),[X,f]=r.useState(null),[ce,re]=r.useState(0),[oe,de]=r.useState(!1),[ye,ue]=r.useState(null),[o,N]=r.useState([]),[E,q]=r.useState(0),[he,H]=r.useState(null),[$,be]=r.useState(!1),[A,T]=r.useState("forward"),B=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} ${e.styles.searchWrapper}`,children:s.jsx("div",{className:e.styles.linkItem,children:s.jsx(te.Modal,{className:e.styles.searchModal,trigger:s.jsx("button",{title:"Search","aria-label":"Search",className:e.styles.search,children:s.jsx(_e,{size:16})}),content:_})})}),V=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem,children:s.jsx(te.Modal,{className:e.styles.localeModal,trigger:s.jsx("button",{title:"Locale Select","aria-label":"Locale Select",role:"menuitem",className:e.styles.locale,children:s.jsx(ge,{size:16})}),content:L})})});r.useEffect(()=>{if(typeof window<"u"){const l=()=>{const n=window.innerWidth<768;be(n)};return l(),window.addEventListener("resize",l),()=>window.removeEventListener("resize",l)}},[]);const fe=()=>{N([])},xe=l=>{T("forward"),N([{title:l.title,primary:l.primaryItems??[],secondary:l.secondaryItems??[],description:""}])},J=l=>{T("forward"),N(n=>[...n,{title:l.label,primary:l.sublinks??[],secondary:[],description:l.description}])},me=()=>{T("backward"),N(l=>l.slice(0,-1))},F=r.useRef(null),g=r.useRef(null),W=r.useRef(new Map),ke=()=>{U(l=>{const n=!l;return n||(N([]),T("forward"),f(null)),n})},K=l=>{const n=W.current.get(l);if(n&&g.current){const d=n.getBoundingClientRect(),h=g.current.getBoundingClientRect(),c=d.left-h.left+d.width/2;ue(c)}},je=l=>{f(n=>n===l?null:l)},Q=r.useCallback(l=>{F.current&&!F.current.contains(l.target)&&f(null)},[]),Y=r.useCallback(()=>{Z(),typeof window<"u"&&window.innerWidth>768&&(U(!1),f(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),Z=r.useCallback(()=>{if(g.current){const l=g.current.getBoundingClientRect().width;re(l),de(!0)}},[]);r.useEffect(()=>{const l=typeof window<"u",n=typeof document<"u";return l&&window.addEventListener("resize",Y),n&&document.addEventListener("click",Q),Z(),()=>{l&&window.removeEventListener("resize",Y),n&&document.removeEventListener("click",Q)}},[]),r.useEffect(()=>{if(typeof document<"u")return y?setTimeout(()=>{I.lockScroll()},0):I.unlockScroll(),()=>I.unlockScroll()},[y]);const ve=l=>l.map((n,d)=>{var P,ee,se,le,ne;const h=`group-${d}`,z=he===d,c=(P=n.primaryItems)==null?void 0:P[E??0];return s.jsxs("div",{className:`${e.styles.linkWrapper} ${e.styles.parent}`,onMouseEnter:()=>{H(d),f(h),K(h)},onMouseLeave:()=>{H(null),q(0),f(null)},children:[s.jsx("div",{className:e.styles.linkItem,children:s.jsxs("button",{ref:i=>{W.current.set(h,i)},role:"menuitem","aria-haspopup":"true","aria-expanded":z,"aria-controls":`submenu-${d}`,className:`${e.styles.sublinkToggle} ${z?e.styles.open:""} `,children:[n.title,s.jsx(Ne.ChevronDown,{size:18,className:e.styles.chevron})]})}),s.jsx("div",{id:`submenu-${d}`,className:`${e.styles.sublinks} ${z?e.styles.show:""}`,role:"menu","aria-label":`${n.title} submenu`,children:s.jsx("div",{children:s.jsxs("div",{className:`${e.styles.sublinksInner} ${n.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}),(ee=n.primaryItems)==null?void 0:ee.map((i,v)=>i.href?s.jsxs("a",{href:i.href,className:`${e.styles.link} ${E===v?e.styles.open:""}`,target:i.isExternal?"_blank":"_self",rel:i.isExternal?"noopener noreferrer":void 0,onClick:()=>{var ae;f(null),(ae=i.onClick)==null||ae.call(i)},onMouseEnter:()=>i.sublinks?q(v):null,role:"menuitem",children:[s.jsxs("span",{className:e.styles.linkContent,children:[i.label,i.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:i.subtitle})]}),i.isExternal&&s.jsx(D.ExternalLink,{className:e.styles.newTabIcon,size:16})]},i._key??v):s.jsx("button",{className:`${e.styles.sublinkToggle} ${E===v?e.styles.open:""}`,onMouseEnter:()=>q(v),children:s.jsxs("span",{className:e.styles.linkContent,children:[i.label,i.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:i.subtitle})]})},i._key??v))]}),(c==null?void 0:c.sublinks)&&((se=c==null?void 0:c.sublinks)==null?void 0:se.length)>0&&s.jsxs("div",{className:`${e.styles.sublinksColumn} ${e.styles.fadeInFromLeft}`,children:[(c==null?void 0:c.description)&&s.jsxs("div",{className:e.styles.sublinksDescription,children:[s.jsx("p",{children:"TEXT HERE"}),a==null?void 0:a(c.description)]}),(c==null?void 0:c.sublinks)&&R(c.sublinks,`${h}-${E}`)]},`${c.label}-${(le=c==null?void 0:c.sublinks)==null?void 0:le.length}`),(n==null?void 0:n.secondaryItems)&&((ne=n==null?void 0:n.secondaryItems)==null?void 0:ne.length)>0&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.secondaryColumn}`,children:n.secondaryItems&&n.secondaryItems.length>0&&R(n.secondaryItems,`${h}-secondary`)}),n.spotlight&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.spotlightColumn}`,children:s.jsx(Ee,{spotlight:n.spotlight,renderText:a??(i=>String(i))})})]})})})]},n._key??`group-${d}`)}),R=(l,n="")=>l.map(d=>{const h=`${n}/${d.label}`;return s.jsx(e.NavLink,{link:d,path:h,parentPath:n,openPath:X,togglePath:je,updateTriangleIndicator:K,setOpenPath:f,renderLinks:R,buttonRefs:W},d._key??h)});return s.jsx("header",{ref:F,className:`${M??""} ${Me[j]} ${Le[S]} ${e.styles.navbar} ${C?e.styles.sticky:""} ${u&&u.length?e.styles.advanced:e.styles.default}`,"aria-label":"Main navigation",children:s.jsxs("div",{className:`${e.styles.container} ${(!t||t.length===0)&&j!=="center"?e.styles.twoColumn:""}`,children:[w?s.jsx("div",{className:e.styles.logo,children:w}):s.jsx("div",{className:e.styles.title,children:b}),s.jsx("nav",{ref:g,style:{left:j==="center"?`calc(50% - ${ce/2}px)`:"0"},className:`${e.styles.nav} ${y?e.styles.open:""} ${oe?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:`${ye}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"})}),m==="default"&&x&&s.jsxs("div",{className:e.styles.grid,children:[x&&x.length>0&&R(x),k&&!$&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(B,{})]}),p&&s.jsx(V,{})]}),!$&&m==="advanced"&&u&&s.jsxs("div",{className:e.styles.grid,children:[u.length>0&&ve(u),k&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(B,{})]}),p&&s.jsx(V,{})]}),$&&m==="advanced"&&y&&o.length===0&&u&&s.jsx("div",{className:`${e.styles.mobileMenu}`,children:u.map((l,n)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${A==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>xe(l),children:l.title})},l._key??n))}),$&&m==="advanced"&&y&&o.length>0&&s.jsxs("div",{className:`${e.styles.mobileMenuSlide} `,children:[s.jsx("button",{className:e.styles.back,onClick:o.length===1?fe:me,children:s.jsx(O.ChevronLeft,{size:18,"aria-hidden":"true",focusable:"false"})}),o[o.length-1].description&&s.jsx("div",{className:`${e.styles.sublinksDescription} ${A==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:a==null?void 0:a(o[o.length-1].description)}),o[o.length-1].primary.map((l,n)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${A==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:l.sublinks?s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>J(l),children:s.jsxs("span",{className:e.styles.linkContent,children:[l.label,l.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:l.subtitle})]})}):s.jsxs("a",{href:l.href,className:e.styles.link,target:l.isExternal?"_blank":"_self",rel:l.isExternal?"noopener noreferrer":void 0,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(D.ExternalLink,{className:e.styles.newTabIcon,size:16})]})},l._key??`primary-${n}`)),o[o.length-1].secondary.length>0&&s.jsx("hr",{className:e.styles.groupDivider}),o[o.length-1].secondary.map((l,n)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${A==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:l.sublinks?s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>J(l),children:l.label}):s.jsxs("a",{href:l.href,className:e.styles.link,target:l.isExternal?"_blank":"_self",rel:l.isExternal?"noopener noreferrer":void 0,role:"menuitem",children:[l.label,l.isExternal&&s.jsx(D.ExternalLink,{className:e.styles.newTabIcon,size:16})]})},l._key??`secondary-${n}`))]},`stack-${o.length}`)]})}),t&&t.length>0&&s.jsx("nav",{className:e.styles.utility,"aria-label":"Utility navigation",children:s.jsx(ie.ButtonGroup,{children:t.map((l,n)=>s.jsx(O.CallToAction,{as:"a",href:l.href??"/",variant:l.variant??"primary",displayType:l.displayType??"text",imageSrc:l.imageSrc,imageAlt:l.imageAlt,"aria-label":l.ariaLabel??l.label,icon:l.icon,iconAlignment:l.iconAlignment,children:l.imageSrc?s.jsx("img",{src:l.imageSrc,alt:l.imageAlt??l.ariaLabel??l.label}):l.label},l._key||n))})}),t&&t.length>0&&s.jsx("nav",{"aria-label":"Utility navigation",className:`${e.styles.utilityMobile} ${y?e.styles.open:""}`,children:s.jsx(ie.ButtonGroup,{alignment:"center",children:s.jsx(O.CallToAction,{as:"a",href:t[1].href??"/",variant:t[1].variant??"primary",displayType:t[1].displayType??"text",imageSrc:t[1].imageSrc,imageAlt:t[1].imageAlt,"aria-label":t[1].ariaLabel??t[1].label,icon:t[1].icon,iconAlignment:t[1].iconAlignment,children:t[1].imageSrc?s.jsx("img",{src:t[1].imageSrc,"aria-label":t[1].imageAlt??t[1].ariaLabel??t[1].label}):t[1].label})})}),s.jsxs("div",{className:e.styles.mobileButtons,children:[$&&k&&s.jsx(B,{}),s.jsx("button",{className:e.styles.menuToggle,onClick:ke,"aria-label":y?"Close menu":"Open menu","aria-expanded":y,"aria-controls":"main-menu",children:y?s.jsx(pe.X,{size:24}):s.jsx(Ce,{size:24})})]})]})})}exports.Navbar=Ae;

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

@@ -26,18 +26,18 @@ const ze = [
   ],
   ["path", { d: "M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05", key: "14pb5j" }],
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]
-], xe = V("earth", ze);
+], Te = V("earth", ze);
 /**
  * @license lucide-react v0.488.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Re = [
+const xe = [
   ["line", { x1: "4", x2: "20", y1: "12", y2: "12", key: "1e0a9i" }],
   ["line", { x1: "4", x2: "20", y1: "6", y2: "6", key: "1owob3" }],
   ["line", { x1: "4", x2: "20", y1: "18", y2: "18", key: "yk5zj1" }]
-], Te = V("menu", Re);
+], Re = V("menu", xe);
 /**
  * @license lucide-react v0.488.0 - ISC
  *
@@ -106,9 +106,9 @@ function Ye({
   localeSelectComponent: _,
   className: z
 }) {
-  const [h, q] = b(!1), [J, k] = b(null), [me, fe] = b(0), [be, ue] = b(!1), [ke, ve] = b(null), [t, y] = b([]), [x, F] = b(
+  const [h, q] = b(!1), [J, k] = b(null), [me, fe] = b(0), [be, ue] = b(!1), [ke, ve] = b(null), [t, y] = b([]), [T, F] = b(
     0
-  ), [pe, K] = b(null), [C, Ne] = b(!1), [R, T] = b("forward"), B = () => /* @__PURE__ */ a(
+  ), [pe, K] = b(null), [C, Ne] = b(!1), [x, R] = b("forward"), B = () => /* @__PURE__ */ a(
     "div",
     {
       className: `${e.linkWrapper} ${e.parent} ${e.searchWrapper}`,
@@ -140,7 +140,7 @@ function Ye({
           "aria-label": "Locale Select",
           role: "menuitem",
           className: e.locale,
-          children: /* @__PURE__ */ a(xe, { size: 16 })
+          children: /* @__PURE__ */ a(Te, { size: 16 })
         }
       ),
       content: _
@@ -158,7 +158,7 @@ function Ye({
   const $e = () => {
     y([]);
   }, ge = (n) => {
-    T("forward"), y([
+    R("forward"), y([
       {
         title: n.title,
         primary: n.primaryItems ?? [],
@@ -167,7 +167,7 @@ function Ye({
       }
     ]);
   }, Y = (n) => {
-    T("forward"), y((l) => [
+    R("forward"), y((l) => [
       ...l,
       {
         title: n.label,
@@ -177,11 +177,11 @@ function Ye({
       }
     ]);
   }, we = () => {
-    T("backward"), y((n) => n.slice(0, -1));
+    R("backward"), y((n) => n.slice(0, -1));
   }, j = I(null), L = I(null), D = I(/* @__PURE__ */ new Map()), ye = () => {
     q((n) => {
       const l = !n;
-      return l || (y([]), T("forward"), k(null)), l;
+      return l || (y([]), R("forward"), k(null)), l;
     });
   }, Z = (n) => {
     const l = D.current.get(n);
@@ -208,11 +208,13 @@ function Ye({
     };
   }, []), U(() => {
     if (typeof document < "u")
-      return h ? Ae() : he(), () => he();
+      return h ? setTimeout(() => {
+        Ae();
+      }, 0) : he(), () => he();
   }, [h]);
   const Le = (n) => n.map((l, d) => {
     var ae, le, se, ie, ce;
-    const f = `group-${d}`, W = pe === d, o = (ae = l.primaryItems) == null ? void 0 : ae[x ?? 0];
+    const f = `group-${d}`, W = pe === d, o = (ae = l.primaryItems) == null ? void 0 : ae[T ?? 0];
     return /* @__PURE__ */ c(
       "div",
       {
@@ -264,7 +266,7 @@ function Ye({
                               "a",
                               {
                                 href: r.href,
-                                className: `${e.link} ${x === g ? e.open : ""}`,
+                                className: `${e.link} ${T === g ? e.open : ""}`,
                                 target: r.isExternal ? "_blank" : "_self",
                                 rel: r.isExternal ? "noopener noreferrer" : void 0,
                                 onClick: () => {
@@ -291,7 +293,7 @@ function Ye({
                             ) : /* @__PURE__ */ a(
                               "button",
                               {
-                                className: `${e.sublinkToggle} ${x === g ? e.open : ""}`,
+                                className: `${e.sublinkToggle} ${T === g ? e.open : ""}`,
                                 onMouseEnter: () => F(g),
                                 children: /* @__PURE__ */ c("span", { className: e.linkContent, children: [
                                   r.label,
@@ -315,7 +317,7 @@ function Ye({
                           ] }),
                           (o == null ? void 0 : o.sublinks) && O(
                             o.sublinks,
-                            `${f}-${x}`
+                            `${f}-${T}`
                           )
                         ]
                       },
@@ -431,7 +433,7 @@ function Ye({
                   C && p === "advanced" && h && t.length === 0 && m && /* @__PURE__ */ a("div", { className: `${e.mobileMenu}`, children: m.map((n, l) => /* @__PURE__ */ a(
                     "div",
                     {
-                      className: `${e.mobileMenuItem} ${R === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
+                      className: `${e.mobileMenuItem} ${x === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
                       children: /* @__PURE__ */ a(
                         "button",
                         {
@@ -466,7 +468,7 @@ function Ye({
                         t[t.length - 1].description && /* @__PURE__ */ a(
                           "div",
                           {
-                            className: `${e.sublinksDescription} ${R === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
+                            className: `${e.sublinksDescription} ${x === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
                             children: s == null ? void 0 : s(
                               t[t.length - 1].description
                             )
@@ -475,7 +477,7 @@ function Ye({
                         t[t.length - 1].primary.map((n, l) => /* @__PURE__ */ a(
                           "div",
                           {
-                            className: `${e.mobileMenuItem} ${R === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
+                            className: `${e.mobileMenuItem} ${x === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
                             children: n.sublinks ? /* @__PURE__ */ a(
                               "button",
                               {
@@ -517,7 +519,7 @@ function Ye({
                           (n, l) => /* @__PURE__ */ a(
                             "div",
                             {
-                              className: `${e.mobileMenuItem} ${R === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
+                              className: `${e.mobileMenuItem} ${x === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
                               children: n.sublinks ? /* @__PURE__ */ a(
                                 "button",
                                 {
@@ -616,7 +618,7 @@ function Ye({
                   "aria-label": h ? "Close menu" : "Open menu",
                   "aria-expanded": h,
                   "aria-controls": "main-menu",
-                  children: h ? /* @__PURE__ */ a(Se, { size: 24 }) : /* @__PURE__ */ a(Te, { size: 24 })
+                  children: h ? /* @__PURE__ */ a(Se, { size: 24 }) : /* @__PURE__ */ a(Re, { size: 24 })
                 }
               )
             ] })

package/dist/next/blocks/AdditionalCategoriesBlock/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../assets/index11.css');const i=require("react/jsx-runtime"),s=require("../../ui/LocaleLink/index.cjs"),r="_additionalCategories_1630y_1",a="_container_1630y_6",c="_categories_1630y_12",o="_list_1630y_23",d="_category_1630y_31",t={additionalCategories:r,container:a,categories:c,list:o,category:d};function _({categories:e,type:l}){if((e==null?void 0:e.length)!==0)return i.jsx("section",{className:`${t.additionalCategories} ${l=="article"?"blog":""}`,children:i.jsx("article",{className:t.container,children:i.jsxs("div",{className:t.categories,children:[i.jsx("p",{children:"In this article:"}),i.jsx("div",{className:t.list,children:(e==null?void 0:e.length)&&e.map(n=>n.slug.current.includes("keyword")&&i.jsx(s.LocaleLink,{href:`/blog?category=${n.slug.current}`,className:t.category,children:n.title},n._id))})]})})})}exports.AdditionalCategoriesBlock=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../assets/index11.css');const i=require("react/jsx-runtime"),s=require("../../ui/LocaleLink/index.cjs"),o="_additionalCategories_1630y_1",r="_container_1630y_6",a="_categories_1630y_12",c="_list_1630y_23",d="_category_1630y_31",t={additionalCategories:o,container:r,categories:a,list:c,category:d};function _({categories:e,type:l}){if((e==null?void 0:e.length)!==0)return console.log("CAT",e),i.jsx("section",{className:`${t.additionalCategories} ${l=="article"?"blog":""}`,children:i.jsx("article",{className:t.container,children:i.jsxs("div",{className:t.categories,children:[i.jsx("p",{children:"In this article:"}),i.jsx("div",{className:t.list,children:e&&e.length>0&&e.map(n=>n.slug.current.includes("keyword")&&i.jsx(s.LocaleLink,{href:`/blog?category=${n.slug.current}`,className:t.category,children:n.title},n._id))})]})})})}exports.AdditionalCategoriesBlock=_;

package/dist/next/blocks/AdditionalCategoriesBlock/index.mjs

@@ -1,32 +1,32 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { LocaleLink as r } from "../../ui/LocaleLink/index.mjs";
-import '../../../assets/index11.css';const s = "_additionalCategories_1630y_1", o = "_container_1630y_6", c = "_categories_1630y_12", d = "_list_1630y_23", _ = "_category_1630y_31", n = {
-  additionalCategories: s,
-  container: o,
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { LocaleLink as s } from "../../ui/LocaleLink/index.mjs";
+import '../../../assets/index11.css';const a = "_additionalCategories_1630y_1", r = "_container_1630y_6", c = "_categories_1630y_12", d = "_list_1630y_23", _ = "_category_1630y_31", n = {
+  additionalCategories: a,
+  container: r,
   categories: c,
   list: d,
   category: _
 };
-function y({
+function m({
   categories: i,
-  type: e
+  type: l
 }) {
   if ((i == null ? void 0 : i.length) !== 0)
-    return /* @__PURE__ */ t(
+    return console.log("CAT", i), /* @__PURE__ */ t(
       "section",
       {
-        className: `${n.additionalCategories} ${e == "article" ? "blog" : ""}`,
-        children: /* @__PURE__ */ t("article", { className: n.container, children: /* @__PURE__ */ a("div", { className: n.categories, children: [
+        className: `${n.additionalCategories} ${l == "article" ? "blog" : ""}`,
+        children: /* @__PURE__ */ t("article", { className: n.container, children: /* @__PURE__ */ o("div", { className: n.categories, children: [
           /* @__PURE__ */ t("p", { children: "In this article:" }),
-          /* @__PURE__ */ t("div", { className: n.list, children: (i == null ? void 0 : i.length) && i.map(
-            (l) => l.slug.current.includes("keyword") && /* @__PURE__ */ t(
-              r,
+          /* @__PURE__ */ t("div", { className: n.list, children: i && i.length > 0 && i.map(
+            (e) => e.slug.current.includes("keyword") && /* @__PURE__ */ t(
+              s,
               {
-                href: `/blog?category=${l.slug.current}`,
+                href: `/blog?category=${e.slug.current}`,
                 className: n.category,
-                children: l.title
+                children: e.title
               },
-              l._id
+              e._id
             )
           ) })
         ] }) })
@@ -34,5 +34,5 @@ function y({
     );
 }
 export {
-  y as AdditionalCategoriesBlock
+  m as AdditionalCategoriesBlock
 };

package/package.json

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