quirk-ui 0.0.463 → 0.0.464

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../assets/index33.css');const e=require("react/jsx-runtime"),y=require("react"),j=require("react-dom"),x=require("../../../x-Dft9NVe_.cjs"),f="_overlay_140ia_1",h="_modal_140ia_16",g="_closeButton_140ia_26",$="_content_140ia_37",t={overlay:f,modal:h,closeButton:g,content:$};function b({content:d,trigger:u,isOpen:l,onOpen:o,onClose:s,className:c}){const[a,m]=y.useState(!1),i=l!==void 0,r=i?l:a,n=()=>{i?a?s==null||s():o==null||o():m(!r)},_=r?e.jsx("div",{className:t.overlay,onClick:n,children:e.jsxs("div",{className:`${c??""} ${t.modal}`,onClick:v=>v.stopPropagation(),children:[e.jsx("button",{"aria-label":"Close",className:`${t.closeButton} modalClose`,onClick:n,children:e.jsx(x.X,{size:21})}),e.jsx("div",{className:`${t.content} modalContent`,children:d})]})}):null;return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:c??void 0,onClick:n,children:u}),typeof window<"u"&&j.createPortal(_,document.body)]})}exports.Modal=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../assets/index33.css');const e=require("react/jsx-runtime"),u=require("react"),y=require("react-dom"),j=require("../../../x-Dft9NVe_.cjs"),x="_overlay_140ia_1",h="_modal_140ia_16",g="_closeButton_140ia_26",$="_content_140ia_37",s={overlay:x,modal:h,closeButton:g,content:$};function b({content:m,trigger:f,isOpen:i,onOpen:n,onClose:l,className:a}){const[o,v]=u.useState(!1),r=i!==void 0,d=r?i:o,c=()=>{r?o?l==null||l():n==null||n():v(!d)};u.useEffect(()=>{if(typeof document<"u"){const t=document.documentElement;return o?t.classList.add("no-scroll"):t.classList.remove("no-scroll"),()=>{t.classList.remove("no-scroll")}}},[o]);const _=d?e.jsx("div",{className:s.overlay,onClick:c,children:e.jsxs("div",{className:`${a??""} ${s.modal}`,onClick:t=>t.stopPropagation(),children:[e.jsx("button",{"aria-label":"Close",className:`${s.closeButton} modalClose`,onClick:c,children:e.jsx(j.X,{size:21})}),e.jsx("div",{className:`${s.content} modalContent`,children:m})]})}):null;return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a??void 0,onClick:c,children:f}),typeof window<"u"&&y.createPortal(_,document.body)]})}exports.Modal=b;

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

@@ -1,45 +1,54 @@
-import { jsxs as r, Fragment as h, jsx as o } from "react/jsx-runtime";
-import { useState as p } from "react";
-import { createPortal as y } from "react-dom";
-import { X as C } from "../../../x-CnsEH4Ox.js";
-import '../../../assets/index33.css';const g = "_overlay_140ia_1", k = "_modal_140ia_16", B = "_closeButton_140ia_26", N = "_content_140ia_37", t = {
-  overlay: g,
-  modal: k,
-  closeButton: B,
-  content: N
+import { jsxs as m, Fragment as p, jsx as t } from "react/jsx-runtime";
+import { useState as y, useEffect as h } from "react";
+import { createPortal as C } from "react-dom";
+import { X as g } from "../../../x-CnsEH4Ox.js";
+import '../../../assets/index33.css';const k = "_overlay_140ia_1", B = "_modal_140ia_16", N = "_closeButton_140ia_26", $ = "_content_140ia_37", l = {
+  overlay: k,
+  modal: B,
+  closeButton: N,
+  content: $
 };
 function w({
-  content: m,
-  trigger: _,
-  isOpen: a,
-  onOpen: e,
-  onClose: l,
-  className: i
+  content: u,
+  trigger: f,
+  isOpen: i,
+  onOpen: n,
+  onClose: s,
+  className: a
 }) {
-  const [s, u] = p(!1), c = a !== void 0, d = c ? a : s, n = () => {
-    c ? s ? l == null || l() : e == null || e() : u(!d);
-  }, f = d ? /* @__PURE__ */ o("div", { className: t.overlay, onClick: n, children: /* @__PURE__ */ r(
+  const [e, v] = y(!1), r = i !== void 0, d = r ? i : e, c = () => {
+    r ? e ? s == null || s() : n == null || n() : v(!d);
+  };
+  h(() => {
+    if (typeof document < "u") {
+      const o = document.documentElement;
+      return e ? o.classList.add("no-scroll") : o.classList.remove("no-scroll"), () => {
+        o.classList.remove("no-scroll");
+      };
+    }
+  }, [e]);
+  const _ = d ? /* @__PURE__ */ t("div", { className: l.overlay, onClick: c, children: /* @__PURE__ */ m(
     "div",
     {
-      className: `${i ?? ""} ${t.modal}`,
-      onClick: (v) => v.stopPropagation(),
+      className: `${a ?? ""} ${l.modal}`,
+      onClick: (o) => o.stopPropagation(),
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ t(
           "button",
           {
             "aria-label": "Close",
-            className: `${t.closeButton} modalClose`,
-            onClick: n,
-            children: /* @__PURE__ */ o(C, { size: 21 })
+            className: `${l.closeButton} modalClose`,
+            onClick: c,
+            children: /* @__PURE__ */ t(g, { size: 21 })
           }
         ),
-        /* @__PURE__ */ o("div", { className: `${t.content} modalContent`, children: m })
+        /* @__PURE__ */ t("div", { className: `${l.content} modalContent`, children: u })
       ]
     }
   ) }) : null;
-  return /* @__PURE__ */ r(h, { children: [
-    /* @__PURE__ */ o("div", { className: i ?? void 0, onClick: n, children: _ }),
-    typeof window < "u" && y(f, document.body)
+  return /* @__PURE__ */ m(p, { children: [
+    /* @__PURE__ */ t("div", { className: a ?? void 0, onClick: c, children: f }),
+    typeof window < "u" && C(_, document.body)
   ] });
 }
 export {

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

@@ -1,16 +1,16 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),ie=require("../Modal/index.cjs"),q=require("../../../index-DpYgzTme.cjs"),ce=require("../ButtonGroup/index.cjs"),e=require("../../../NavLink-By_lBPb-.cjs"),G=require("../../../external-link-DDShu-48.cjs"),Ne=require("../../../x-Dft9NVe_.cjs"),U=require("../../../createLucideIcon-DpotSgUx.cjs"),$e=require("../../../chevron-down-DfK1XBl3.cjs");/**
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),ae=require("../Modal/index.cjs"),O=require("../../../index-DpYgzTme.cjs"),te=require("../ButtonGroup/index.cjs"),e=require("../../../NavLink-By_lBPb-.cjs"),I=require("../../../external-link-DDShu-48.cjs"),ve=require("../../../x-Dft9NVe_.cjs"),D=require("../../../createLucideIcon-DpotSgUx.cjs"),pe=require("../../../chevron-down-DfK1XBl3.cjs");/**
  * @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 ge=[["path",{d:"M21.54 15H17a2 2 0 0 0-2 2v4.54",key:"1djwo0"}],["path",{d:"M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17",key:"1tzkfa"}],["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"}]],we=U.createLucideIcon("earth",ge);/**
+ */const Ne=[["path",{d:"M21.54 15H17a2 2 0 0 0-2 2v4.54",key:"1djwo0"}],["path",{d:"M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17",key:"1tzkfa"}],["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"}]],$e=D.createLucideIcon("earth",Ne);/**
  * @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 Ce=[["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"}]],Le=U.createLucideIcon("menu",Ce);/**
+ */const ge=[["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"}]],we=D.createLucideIcon("menu",ge);/**
  * @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 _e=[["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}],["path",{d:"m21 21-4.3-4.3",key:"1qie3q"}]],Me=U.createLucideIcon("search",_e),Se={standard:e.styles.standard,transparent:e.styles.transparent},Ee={left:e.styles.left,center:e.styles.center,right:e.styles.right},Ae=({spotlight:a,renderText:b})=>{var t,C,j,p,v,L,m,_,M,S,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((j=a.callToAction.linkOptions)==null?void 0:j.linkType)==="external"&&((p=a.callToAction.linkOptions)!=null&&p.externalUrl)?u=(v=a.callToAction.linkOptions)==null?void 0:v.externalUrl:((L=a.callToAction.linkOptions)==null?void 0:L.linkType)==="internal"&&((_=(m=a.callToAction.linkOptions)==null?void 0:m.internalUrl)!=null&&_.slug.current)&&(u=`/${(S=(M=a.callToAction.linkOptions)==null?void 0:M.internalUrl)==null?void 0:S.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(q.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 Oe({renderText:a,title:b,logo:w,items:x,groups:u,utilityItems:t,isSticky:C=!1,showSearch:j=!0,showLocaleSelect:p=!0,alignment:v="right",variant:L="standard",navigationType:m="default",searchComponent:_,localeSelectComponent:M,className:S}){const[y,X]=r.useState(!1),[B,E]=r.useState(!1),[H,f]=r.useState(null),[re,oe]=r.useState(0),[de,ye]=r.useState(!1),[ue,he]=r.useState(null),[o,N]=r.useState([]),[A,F]=r.useState(0),[be,V]=r.useState(null),[$,fe]=r.useState(!1),[O,T]=r.useState("forward"),W=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} ${e.styles.searchWrapper}`,children:s.jsx("div",{className:e.styles.linkItem,children:s.jsx(ie.Modal,{className:e.styles.searchModal,onOpen:()=>E(!0),onClose:()=>E(!1),trigger:s.jsx("button",{title:"Search","aria-label":"Search",className:e.styles.search,children:s.jsx(Me,{size:16})}),content:_})})}),J=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem,children:s.jsx(ie.Modal,{className:e.styles.localeModal,onOpen:()=>E(!0),onClose:()=>E(!1),trigger:s.jsx("button",{title:"Locale Select","aria-label":"Locale Select",role:"menuitem",className:e.styles.locale,children:s.jsx(we,{size:16})}),content:M})})});r.useEffect(()=>{if(typeof window<"u"){const n=()=>{const l=window.innerWidth<768;fe(l)};return n(),window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)}},[]);const xe=()=>{N([])},me=n=>{T("forward"),N([{title:n.title,primary:n.primaryItems??[],secondary:n.secondaryItems??[],description:""}])},K=n=>{T("forward"),N(l=>[...l,{title:n.label,primary:n.sublinks??[],secondary:[],description:n.description}])},je=()=>{T("backward"),N(n=>n.slice(0,-1))},I=r.useRef(null),g=r.useRef(null),D=r.useRef(new Map),ve=()=>{X(n=>{const l=!n;return l||(N([]),T("forward"),f(null)),l})},Q=n=>{const l=D.current.get(n);if(l&&g.current){const d=l.getBoundingClientRect(),h=g.current.getBoundingClientRect(),c=d.left-h.left+d.width/2;he(c)}},ke=n=>{f(l=>l===n?null:n)},Y=r.useCallback(n=>{I.current&&!I.current.contains(n.target)&&f(null)},[]),Z=r.useCallback(()=>{P(),typeof window<"u"&&window.innerWidth>768&&(X(!1),f(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),P=r.useCallback(()=>{if(g.current){const n=g.current.getBoundingClientRect().width;oe(n),ye(!0)}},[]);r.useEffect(()=>{const n=typeof window<"u",l=typeof document<"u";return n&&window.addEventListener("resize",Z),l&&document.addEventListener("click",Y),P(),()=>{n&&window.removeEventListener("resize",Z),l&&document.removeEventListener("click",Y)}},[]),r.useEffect(()=>{if(console.log("MODAL",B),typeof document<"u"){const n=document.documentElement;return y||B?(n.style.overflow="hidden",n.style.height="100%"):(n.style.overflow="",n.style.height=""),()=>{n.style.overflow="",n.style.height=""}}},[y,B]);const pe=n=>n.map((l,d)=>{var ee,se,ne,le,ae;const h=`group-${d}`,z=be===d,c=(ee=l.primaryItems)==null?void 0:ee[A??0];return s.jsxs("div",{className:`${e.styles.linkWrapper} ${e.styles.parent}`,onMouseEnter:()=>{V(d),f(h),Q(h)},onMouseLeave:()=>{V(null),F(0),f(null)},children:[s.jsx("div",{className:e.styles.linkItem,children:s.jsxs("button",{ref:i=>{D.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:[l.title,s.jsx($e.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":`${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}),(se=l.primaryItems)==null?void 0:se.map((i,k)=>i.href?s.jsxs("a",{href:i.href,className:`${e.styles.link} ${A===k?e.styles.open:""}`,target:i.isExternal?"_blank":"_self",rel:i.isExternal?"noopener noreferrer":void 0,onClick:()=>{var te;f(null),(te=i.onClick)==null||te.call(i)},onMouseEnter:()=>i.sublinks?F(k):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(G.ExternalLink,{className:e.styles.newTabIcon,size:16})]},i._key??k):s.jsx("button",{className:`${e.styles.sublinkToggle} ${A===k?e.styles.open:""}`,onMouseEnter:()=>F(k),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??k))]}),(c==null?void 0:c.sublinks)&&((ne=c==null?void 0:c.sublinks)==null?void 0:ne.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}-${A}`)]},`${c.label}-${(le=c==null?void 0:c.sublinks)==null?void 0:le.length}`),(l==null?void 0:l.secondaryItems)&&((ae=l==null?void 0:l.secondaryItems)==null?void 0:ae.length)>0&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.secondaryColumn}`,children:l.secondaryItems&&l.secondaryItems.length>0&&R(l.secondaryItems,`${h}-secondary`)}),l.spotlight&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.spotlightColumn}`,children:s.jsx(Ae,{spotlight:l.spotlight,renderText:a??(i=>String(i))})})]})})})]},l._key??`group-${d}`)}),R=(n,l="")=>n.map(d=>{const h=`${l}/${d.label}`;return s.jsx(e.NavLink,{link:d,path:h,parentPath:l,openPath:H,togglePath:ke,updateTriangleIndicator:Q,setOpenPath:f,renderLinks:R,buttonRefs:D},d._key??h)});return s.jsx("header",{ref:I,className:`${S??""} ${Ee[v]} ${Se[L]} ${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)&&v!=="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:v==="center"?`calc(50% - ${re/2}px)`:"0"},className:`${e.styles.nav} ${y?e.styles.open:""} ${de?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:`${ue}px`},className:`${e.styles.triangle} ${H?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),j&&!$&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(W,{})]}),p&&s.jsx(J,{})]}),!$&&m==="advanced"&&u&&s.jsxs("div",{className:e.styles.grid,children:[u.length>0&&pe(u),j&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(W,{})]}),p&&s.jsx(J,{})]}),$&&m==="advanced"&&y&&o.length===0&&u&&s.jsx("div",{className:`${e.styles.mobileMenu}`,children:u.map((n,l)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${O==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>me(n),children:n.title})},n._key??l))}),$&&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?xe:je,children:s.jsx(q.ChevronLeft,{size:18,"aria-hidden":"true",focusable:"false"})}),o[o.length-1].description&&s.jsx("div",{className:`${e.styles.sublinksDescription} ${O==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:a==null?void 0:a(o[o.length-1].description)}),o[o.length-1].primary.map((n,l)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${O==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:n.sublinks?s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>K(n),children:s.jsxs("span",{className:e.styles.linkContent,children:[n.label,n.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:n.subtitle})]})}):s.jsxs("a",{href:n.href,className:e.styles.link,target:n.isExternal?"_blank":"_self",rel:n.isExternal?"noopener noreferrer":void 0,role:"menuitem",children:[s.jsxs("span",{className:e.styles.linkContent,children:[n.label,n.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:n.subtitle})]}),n.isExternal&&s.jsx(G.ExternalLink,{className:e.styles.newTabIcon,size:16})]})},n._key??`primary-${l}`)),o[o.length-1].secondary.length>0&&s.jsx("hr",{className:e.styles.groupDivider}),o[o.length-1].secondary.map((n,l)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${O==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:n.sublinks?s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>K(n),children:n.label}):s.jsxs("a",{href:n.href,className:e.styles.link,target:n.isExternal?"_blank":"_self",rel:n.isExternal?"noopener noreferrer":void 0,role:"menuitem",children:[n.label,n.isExternal&&s.jsx(G.ExternalLink,{className:e.styles.newTabIcon,size:16})]})},n._key??`secondary-${l}`))]},`stack-${o.length}`)]})}),t&&t.length>0&&s.jsx("nav",{className:e.styles.utility,"aria-label":"Utility navigation",children:s.jsx(ce.ButtonGroup,{children:t.map((n,l)=>s.jsx(q.CallToAction,{as:"a",href:n.href??"/",variant:n.variant??"primary",displayType:n.displayType??"text",imageSrc:n.imageSrc,imageAlt:n.imageAlt,"aria-label":n.ariaLabel??n.label,icon:n.icon,iconAlignment:n.iconAlignment,children:n.imageSrc?s.jsx("img",{src:n.imageSrc,alt:n.imageAlt??n.ariaLabel??n.label}):n.label},n._key||l))})}),t&&t.length>0&&s.jsx("nav",{"aria-label":"Utility navigation",className:`${e.styles.utilityMobile} ${y?e.styles.open:""}`,children:s.jsx(ce.ButtonGroup,{alignment:"center",children:s.jsx(q.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:[$&&j&&s.jsx(W,{}),s.jsx("button",{className:e.styles.menuToggle,onClick:ve,"aria-label":y?"Close menu":"Open menu","aria-expanded":y,"aria-controls":"main-menu",children:y?s.jsx(Ne.X,{size:24}):s.jsx(Le,{size:24})})]})]})})}exports.Navbar=Oe;
+ */const Ce=[["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}],["path",{d:"m21 21-4.3-4.3",key:"1qie3q"}]],Le=D.createLucideIcon("search",Ce),_e={standard:e.styles.standard,transparent:e.styles.transparent},Se={left:e.styles.left,center:e.styles.center,right:e.styles.right},Ee=({spotlight:a,renderText:b})=>{var t,C,j,p,k,L,x,_,S,E,y;const w=(t=a.image)==null?void 0:t.asset.altText,f=((C=a.callToAction.linkOptions)==null?void 0:C.linkType)==="external";let u="#";return((j=a.callToAction.linkOptions)==null?void 0:j.linkType)==="external"&&((p=a.callToAction.linkOptions)!=null&&p.externalUrl)?u=(k=a.callToAction.linkOptions)==null?void 0:k.externalUrl:((L=a.callToAction.linkOptions)==null?void 0:L.linkType)==="internal"&&((_=(x=a.callToAction.linkOptions)==null?void 0:x.internalUrl)!=null&&_.slug.current)&&(u=`/${(E=(S=a.callToAction.linkOptions)==null?void 0:S.internalUrl)==null?void 0:E.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:f?"_blank":"_self",rel:f?"noopener noreferrer":"","aria-label":a.callToAction.ariaLabel||a.callToAction.label,children:a.callToAction.label})})]})};function Me({renderText:a,title:b,logo:w,items:f,groups:u,utilityItems:t,isSticky:C=!1,showSearch:j=!0,showLocaleSelect:p=!0,alignment:k="right",variant:L="standard",navigationType:x="default",searchComponent:_,localeSelectComponent:S,className:E}){const[y,G]=r.useState(!1),[U,m]=r.useState(null),[ie,ce]=r.useState(0),[re,oe]=r.useState(!1),[de,ye]=r.useState(null),[o,N]=r.useState([]),[M,q]=r.useState(0),[ue,X]=r.useState(null),[$,he]=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(ae.Modal,{className:e.styles.searchModal,trigger:s.jsx("button",{title:"Search","aria-label":"Search",className:e.styles.search,children:s.jsx(Le,{size:16})}),content:_})})}),H=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem,children:s.jsx(ae.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($e,{size:16})}),content:S})})});r.useEffect(()=>{if(typeof window<"u"){const n=()=>{const l=window.innerWidth<768;he(l)};return n(),window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)}},[]);const be=()=>{N([])},me=n=>{T("forward"),N([{title:n.title,primary:n.primaryItems??[],secondary:n.secondaryItems??[],description:""}])},V=n=>{T("forward"),N(l=>[...l,{title:n.label,primary:n.sublinks??[],secondary:[],description:n.description}])},fe=()=>{T("backward"),N(n=>n.slice(0,-1))},F=r.useRef(null),g=r.useRef(null),W=r.useRef(new Map),xe=()=>{G(n=>{const l=!n;return l||(N([]),T("forward"),m(null)),l})},J=n=>{const l=W.current.get(n);if(l&&g.current){const d=l.getBoundingClientRect(),h=g.current.getBoundingClientRect(),c=d.left-h.left+d.width/2;ye(c)}},je=n=>{m(l=>l===n?null:n)},K=r.useCallback(n=>{F.current&&!F.current.contains(n.target)&&m(null)},[]),Q=r.useCallback(()=>{Y(),typeof window<"u"&&window.innerWidth>768&&(G(!1),m(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),Y=r.useCallback(()=>{if(g.current){const n=g.current.getBoundingClientRect().width;ce(n),oe(!0)}},[]);r.useEffect(()=>{const n=typeof window<"u",l=typeof document<"u";return n&&window.addEventListener("resize",Q),l&&document.addEventListener("click",K),Y(),()=>{n&&window.removeEventListener("resize",Q),l&&document.removeEventListener("click",K)}},[]),r.useEffect(()=>{if(typeof document<"u"){const n=document.documentElement;return y?n.classList.add("no-scroll"):n.classList.remove("no-scroll"),()=>{n.classList.remove("no-scroll")}}},[y]);const ke=n=>n.map((l,d)=>{var Z,P,ee,se,ne;const h=`group-${d}`,z=ue===d,c=(Z=l.primaryItems)==null?void 0:Z[M??0];return s.jsxs("div",{className:`${e.styles.linkWrapper} ${e.styles.parent}`,onMouseEnter:()=>{X(d),m(h),J(h)},onMouseLeave:()=>{X(null),q(0),m(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:[l.title,s.jsx(pe.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":`${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}),(P=l.primaryItems)==null?void 0:P.map((i,v)=>i.href?s.jsxs("a",{href:i.href,className:`${e.styles.link} ${M===v?e.styles.open:""}`,target:i.isExternal?"_blank":"_self",rel:i.isExternal?"noopener noreferrer":void 0,onClick:()=>{var le;m(null),(le=i.onClick)==null||le.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(I.ExternalLink,{className:e.styles.newTabIcon,size:16})]},i._key??v):s.jsx("button",{className:`${e.styles.sublinkToggle} ${M===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)&&((ee=c==null?void 0:c.sublinks)==null?void 0:ee.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}-${M}`)]},`${c.label}-${(se=c==null?void 0:c.sublinks)==null?void 0:se.length}`),(l==null?void 0:l.secondaryItems)&&((ne=l==null?void 0:l.secondaryItems)==null?void 0:ne.length)>0&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.secondaryColumn}`,children:l.secondaryItems&&l.secondaryItems.length>0&&R(l.secondaryItems,`${h}-secondary`)}),l.spotlight&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.spotlightColumn}`,children:s.jsx(Ee,{spotlight:l.spotlight,renderText:a??(i=>String(i))})})]})})})]},l._key??`group-${d}`)}),R=(n,l="")=>n.map(d=>{const h=`${l}/${d.label}`;return s.jsx(e.NavLink,{link:d,path:h,parentPath:l,openPath:U,togglePath:je,updateTriangleIndicator:J,setOpenPath:m,renderLinks:R,buttonRefs:W},d._key??h)});return s.jsx("header",{ref:F,className:`${E??""} ${Se[k]} ${_e[L]} ${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)&&k!=="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:k==="center"?`calc(50% - ${ie/2}px)`:"0"},className:`${e.styles.nav} ${y?e.styles.open:""} ${re?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:`${de}px`},className:`${e.styles.triangle} ${U?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"})}),x==="default"&&f&&s.jsxs("div",{className:e.styles.grid,children:[f&&f.length>0&&R(f),j&&!$&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(B,{})]}),p&&s.jsx(H,{})]}),!$&&x==="advanced"&&u&&s.jsxs("div",{className:e.styles.grid,children:[u.length>0&&ke(u),j&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(B,{})]}),p&&s.jsx(H,{})]}),$&&x==="advanced"&&y&&o.length===0&&u&&s.jsx("div",{className:`${e.styles.mobileMenu}`,children:u.map((n,l)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${A==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>me(n),children:n.title})},n._key??l))}),$&&x==="advanced"&&y&&o.length>0&&s.jsxs("div",{className:`${e.styles.mobileMenuSlide} `,children:[s.jsx("button",{className:e.styles.back,onClick:o.length===1?be:fe,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((n,l)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${A==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:n.sublinks?s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>V(n),children:s.jsxs("span",{className:e.styles.linkContent,children:[n.label,n.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:n.subtitle})]})}):s.jsxs("a",{href:n.href,className:e.styles.link,target:n.isExternal?"_blank":"_self",rel:n.isExternal?"noopener noreferrer":void 0,role:"menuitem",children:[s.jsxs("span",{className:e.styles.linkContent,children:[n.label,n.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:n.subtitle})]}),n.isExternal&&s.jsx(I.ExternalLink,{className:e.styles.newTabIcon,size:16})]})},n._key??`primary-${l}`)),o[o.length-1].secondary.length>0&&s.jsx("hr",{className:e.styles.groupDivider}),o[o.length-1].secondary.map((n,l)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${A==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:n.sublinks?s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>V(n),children:n.label}):s.jsxs("a",{href:n.href,className:e.styles.link,target:n.isExternal?"_blank":"_self",rel:n.isExternal?"noopener noreferrer":void 0,role:"menuitem",children:[n.label,n.isExternal&&s.jsx(I.ExternalLink,{className:e.styles.newTabIcon,size:16})]})},n._key??`secondary-${l}`))]},`stack-${o.length}`)]})}),t&&t.length>0&&s.jsx("nav",{className:e.styles.utility,"aria-label":"Utility navigation",children:s.jsx(te.ButtonGroup,{children:t.map((n,l)=>s.jsx(O.CallToAction,{as:"a",href:n.href??"/",variant:n.variant??"primary",displayType:n.displayType??"text",imageSrc:n.imageSrc,imageAlt:n.imageAlt,"aria-label":n.ariaLabel??n.label,icon:n.icon,iconAlignment:n.iconAlignment,children:n.imageSrc?s.jsx("img",{src:n.imageSrc,alt:n.imageAlt??n.ariaLabel??n.label}):n.label},n._key||l))})}),t&&t.length>0&&s.jsx("nav",{"aria-label":"Utility navigation",className:`${e.styles.utilityMobile} ${y?e.styles.open:""}`,children:s.jsx(te.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:[$&&j&&s.jsx(B,{}),s.jsx("button",{className:e.styles.menuToggle,onClick:xe,"aria-label":y?"Close menu":"Open menu","aria-expanded":y,"aria-controls":"main-menu",children:y?s.jsx(ve.X,{size:24}):s.jsx(we,{size:24})})]})]})})}exports.Navbar=Me;

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

@@ -1,20 +1,20 @@
-import { jsx as a, jsxs as c, Fragment as de } from "react/jsx-runtime";
-import { useState as f, useEffect as G, useRef as X, useCallback as H } from "react";
-import { Modal as he } from "../Modal/index.mjs";
-import { a as Ee, C as q } from "../../../index-CIb65n0z.js";
-import { ButtonGroup as me } from "../ButtonGroup/index.mjs";
-import { s as e, N as Ae } from "../../../NavLink-CQpDLYjg.js";
-import { E as V } from "../../../external-link-BOPobeQJ.js";
-import { X as _e } from "../../../x-CnsEH4Ox.js";
-import { c as J } from "../../../createLucideIcon-C8GTh_Qx.js";
-import { C as Se } from "../../../chevron-down-DSUzBz9F.js";
+import { jsx as a, jsxs as c, Fragment as oe } from "react/jsx-runtime";
+import { useState as b, useEffect as U, useRef as I, useCallback as G } from "react";
+import { Modal as te } from "../Modal/index.mjs";
+import { a as Le, C as H } from "../../../index-CIb65n0z.js";
+import { ButtonGroup as de } from "../ButtonGroup/index.mjs";
+import { s as e, N as Ee } from "../../../NavLink-CQpDLYjg.js";
+import { E as X } from "../../../external-link-BOPobeQJ.js";
+import { X as Me } from "../../../x-CnsEH4Ox.js";
+import { c as V } from "../../../createLucideIcon-C8GTh_Qx.js";
+import { C as Ae } from "../../../chevron-down-DSUzBz9F.js";
 /**
  * @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 Oe = [
+const _e = [
   ["path", { d: "M21.54 15H17a2 2 0 0 0-2 2v4.54", key: "1djwo0" }],
   [
     "path",
@@ -25,47 +25,47 @@ const Oe = [
   ],
   ["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" }]
-], ze = J("earth", Oe);
+], Se = V("earth", _e);
 /**
  * @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 xe = [
+const ze = [
   ["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" }]
-], Re = J("menu", xe);
+], xe = V("menu", 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 Te = [
+const Re = [
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
   ["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]
-], We = J("search", Te), Fe = {
+], Te = V("search", Re), Oe = {
   standard: e.standard,
   transparent: e.transparent
-}, Be = {
+}, We = {
   left: e.left,
   center: e.center,
   right: e.right
-}, De = ({
+}, Fe = ({
   spotlight: s,
   renderText: u
 }) => {
-  var i, E, N, y, $, A, p, _, S, O, h;
-  const L = (i = s.image) == null ? void 0 : i.asset.altText, k = ((E = s.callToAction.linkOptions) == null ? void 0 : E.linkType) === "external";
+  var i, M, N, w, $, A, p, _, S, z, h;
+  const E = (i = s.image) == null ? void 0 : i.asset.altText, k = ((M = s.callToAction.linkOptions) == null ? void 0 : M.linkType) === "external";
   let m = "#";
-  return ((N = s.callToAction.linkOptions) == null ? void 0 : N.linkType) === "external" && ((y = s.callToAction.linkOptions) != null && y.externalUrl) ? m = ($ = s.callToAction.linkOptions) == null ? void 0 : $.externalUrl : ((A = s.callToAction.linkOptions) == null ? void 0 : A.linkType) === "internal" && ((_ = (p = s.callToAction.linkOptions) == null ? void 0 : p.internalUrl) != null && _.slug.current) && (m = `/${(O = (S = s.callToAction.linkOptions) == null ? void 0 : S.internalUrl) == null ? void 0 : O.slug.current}`), /* @__PURE__ */ c("div", { className: e.spotlight, children: [
+  return ((N = s.callToAction.linkOptions) == null ? void 0 : N.linkType) === "external" && ((w = s.callToAction.linkOptions) != null && w.externalUrl) ? m = ($ = s.callToAction.linkOptions) == null ? void 0 : $.externalUrl : ((A = s.callToAction.linkOptions) == null ? void 0 : A.linkType) === "internal" && ((_ = (p = s.callToAction.linkOptions) == null ? void 0 : p.internalUrl) != null && _.slug.current) && (m = `/${(z = (S = s.callToAction.linkOptions) == null ? void 0 : S.internalUrl) == null ? void 0 : z.slug.current}`), /* @__PURE__ */ c("div", { className: e.spotlight, children: [
     s.image && /* @__PURE__ */ a("div", { className: e.imageWrapper, children: /* @__PURE__ */ a(
       "img",
       {
         src: (s == null ? void 0 : s.image.imageUrl) ?? "",
-        alt: L || s.image.asset.description || "Content image",
+        alt: E || s.image.asset.description || "Content image",
         width: 600,
         height: 400
       }
@@ -75,7 +75,7 @@ const Te = [
       s.description && /* @__PURE__ */ a("div", { className: e.description, children: u == null ? void 0 : u(s.description, e.description) })
     ] }),
     ((h = s.callToAction) == null ? void 0 : h.linkOptions) && /* @__PURE__ */ a("div", { className: e.actions, children: /* @__PURE__ */ a(
-      q,
+      H,
       {
         as: "a",
         variant: s.callToAction.variant ?? "primary",
@@ -88,54 +88,50 @@ const Te = [
     ) })
   ] });
 };
-function Qe({
+function Je({
   renderText: s,
   title: u,
-  logo: L,
+  logo: E,
   items: k,
   groups: m,
   utilityItems: i,
-  isSticky: E = !1,
+  isSticky: M = !1,
   showSearch: N = !0,
-  showLocaleSelect: y = !0,
+  showLocaleSelect: w = !0,
   alignment: $ = "right",
   variant: A = "standard",
   navigationType: p = "default",
   searchComponent: _,
   localeSelectComponent: S,
-  className: O
+  className: z
 }) {
-  const [h, K] = f(!1), [B, z] = f(!1), [Q, v] = f(null), [fe, be] = f(0), [ue, ve] = f(!1), [ke, pe] = f(null), [t, w] = f([]), [x, D] = f(
+  const [h, q] = b(!1), [J, v] = b(null), [he, me] = b(0), [fe, be] = b(!1), [ue, ve] = b(null), [t, y] = b([]), [x, F] = b(
     0
-  ), [Ne, Y] = f(null), [C, $e] = f(!1), [R, T] = f("forward"), j = () => /* @__PURE__ */ a(
+  ), [ke, K] = b(null), [C, pe] = b(!1), [R, T] = b("forward"), B = () => /* @__PURE__ */ a(
     "div",
     {
       className: `${e.linkWrapper} ${e.parent} ${e.searchWrapper}`,
       children: /* @__PURE__ */ a("div", { className: e.linkItem, children: /* @__PURE__ */ a(
-        he,
+        te,
         {
           className: e.searchModal,
-          onOpen: () => z(!0),
-          onClose: () => z(!1),
           trigger: /* @__PURE__ */ a(
             "button",
             {
               title: "Search",
               "aria-label": "Search",
               className: e.search,
-              children: /* @__PURE__ */ a(We, { size: 16 })
+              children: /* @__PURE__ */ a(Te, { size: 16 })
             }
           ),
           content: _
         }
       ) })
     }
-  ), Z = () => /* @__PURE__ */ a("div", { className: `${e.linkWrapper} ${e.parent} `, children: /* @__PURE__ */ a("div", { className: e.linkItem, children: /* @__PURE__ */ a(
-    he,
+  ), Q = () => /* @__PURE__ */ a("div", { className: `${e.linkWrapper} ${e.parent} `, children: /* @__PURE__ */ a("div", { className: e.linkItem, children: /* @__PURE__ */ a(
+    te,
     {
       className: e.localeModal,
-      onOpen: () => z(!0),
-      onClose: () => z(!1),
       trigger: /* @__PURE__ */ a(
         "button",
         {
@@ -143,25 +139,25 @@ function Qe({
           "aria-label": "Locale Select",
           role: "menuitem",
           className: e.locale,
-          children: /* @__PURE__ */ a(ze, { size: 16 })
+          children: /* @__PURE__ */ a(Se, { size: 16 })
         }
       ),
       content: S
     }
   ) }) });
-  G(() => {
+  U(() => {
     if (typeof window < "u") {
       const n = () => {
         const l = window.innerWidth < 768;
-        $e(l);
+        pe(l);
       };
       return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
     }
   }, []);
-  const ge = () => {
-    w([]);
-  }, ye = (n) => {
-    T("forward"), w([
+  const Ne = () => {
+    y([]);
+  }, $e = (n) => {
+    T("forward"), y([
       {
         title: n.title,
         primary: n.primaryItems ?? [],
@@ -169,8 +165,8 @@ function Qe({
         description: ""
       }
     ]);
-  }, P = (n) => {
-    T("forward"), w((l) => [
+  }, Y = (n) => {
+    T("forward"), y((l) => [
       ...l,
       {
         title: n.label,
@@ -179,72 +175,72 @@ function Qe({
         description: n.description
       }
     ]);
-  }, we = () => {
-    T("backward"), w((n) => n.slice(0, -1));
-  }, I = X(null), M = X(null), U = X(/* @__PURE__ */ new Map()), Ce = () => {
-    K((n) => {
+  }, ge = () => {
+    T("backward"), y((n) => n.slice(0, -1));
+  }, j = I(null), L = I(null), D = I(/* @__PURE__ */ new Map()), we = () => {
+    q((n) => {
       const l = !n;
-      return l || (w([]), T("forward"), v(null)), l;
+      return l || (y([]), T("forward"), v(null)), l;
     });
-  }, ee = (n) => {
-    const l = U.current.get(n);
-    if (l && M.current) {
-      const d = l.getBoundingClientRect(), b = M.current.getBoundingClientRect(), o = d.left - b.left + d.width / 2;
-      pe(o);
+  }, Z = (n) => {
+    const l = D.current.get(n);
+    if (l && L.current) {
+      const d = l.getBoundingClientRect(), f = L.current.getBoundingClientRect(), o = d.left - f.left + d.width / 2;
+      ve(o);
     }
-  }, Me = (n) => {
+  }, ye = (n) => {
     v((l) => l === n ? null : n);
-  }, ne = H((n) => {
-    I.current && !I.current.contains(n.target) && v(null);
-  }, []), ae = H(() => {
-    le(), typeof window < "u" && window.innerWidth > 768 && (K(!1), v(null), typeof document < "u" && (document.body.style.overflow = ""));
-  }, []), le = H(() => {
-    if (M.current) {
-      const n = M.current.getBoundingClientRect().width;
-      be(n), ve(!0);
+  }, P = G((n) => {
+    j.current && !j.current.contains(n.target) && v(null);
+  }, []), ee = G(() => {
+    ne(), typeof window < "u" && window.innerWidth > 768 && (q(!1), v(null), typeof document < "u" && (document.body.style.overflow = ""));
+  }, []), ne = G(() => {
+    if (L.current) {
+      const n = L.current.getBoundingClientRect().width;
+      me(n), be(!0);
     }
   }, []);
-  G(() => {
+  U(() => {
     const n = typeof window < "u", l = typeof document < "u";
-    return n && window.addEventListener("resize", ae), l && document.addEventListener("click", ne), le(), () => {
-      n && window.removeEventListener("resize", ae), l && document.removeEventListener("click", ne);
+    return n && window.addEventListener("resize", ee), l && document.addEventListener("click", P), ne(), () => {
+      n && window.removeEventListener("resize", ee), l && document.removeEventListener("click", P);
     };
-  }, []), G(() => {
-    if (console.log("MODAL", B), typeof document < "u") {
+  }, []), U(() => {
+    if (typeof document < "u") {
       const n = document.documentElement;
-      return h || B ? (n.style.overflow = "hidden", n.style.height = "100%") : (n.style.overflow = "", n.style.height = ""), () => {
-        n.style.overflow = "", n.style.height = "";
+      return h ? n.classList.add("no-scroll") : n.classList.remove("no-scroll"), () => {
+        n.classList.remove("no-scroll");
       };
     }
-  }, [h, B]);
-  const Le = (n) => n.map((l, d) => {
-    var se, ie, ce, re, oe;
-    const b = `group-${d}`, F = Ne === d, o = (se = l.primaryItems) == null ? void 0 : se[x ?? 0];
+  }, [h]);
+  const Ce = (n) => n.map((l, d) => {
+    var ae, le, se, ie, ce;
+    const f = `group-${d}`, W = ke === d, o = (ae = l.primaryItems) == null ? void 0 : ae[x ?? 0];
     return /* @__PURE__ */ c(
       "div",
       {
         className: `${e.linkWrapper} ${e.parent}`,
         onMouseEnter: () => {
-          Y(d), v(b), ee(b);
+          K(d), v(f), Z(f);
         },
         onMouseLeave: () => {
-          Y(null), D(0), v(null);
+          K(null), F(0), v(null);
         },
         children: [
           /* @__PURE__ */ a("div", { className: e.linkItem, children: /* @__PURE__ */ c(
             "button",
             {
               ref: (r) => {
-                U.current.set(b, r);
+                D.current.set(f, r);
               },
               role: "menuitem",
               "aria-haspopup": "true",
-              "aria-expanded": F,
+              "aria-expanded": W,
               "aria-controls": `submenu-${d}`,
-              className: `${e.sublinkToggle} ${F ? e.open : ""} `,
+              className: `${e.sublinkToggle} ${W ? e.open : ""} `,
               children: [
                 l.title,
-                /* @__PURE__ */ a(Se, { size: 18, className: e.chevron })
+                /* @__PURE__ */ a(Ae, { size: 18, className: e.chevron })
               ]
             }
           ) }),
@@ -252,7 +248,7 @@ function Qe({
             "div",
             {
               id: `submenu-${d}`,
-              className: `${e.sublinks} ${F ? e.show : ""}`,
+              className: `${e.sublinks} ${W ? e.show : ""}`,
               role: "menu",
               "aria-label": `${l.title} submenu`,
               children: /* @__PURE__ */ a("div", { children: /* @__PURE__ */ c(
@@ -266,7 +262,7 @@ function Qe({
                         className: `${e.sublinksColumn} ${e.primaryColumn}`,
                         children: [
                           /* @__PURE__ */ a("div", { className: e.linkItem }),
-                          (ie = l.primaryItems) == null ? void 0 : ie.map(
+                          (le = l.primaryItems) == null ? void 0 : le.map(
                             (r, g) => r.href ? /* @__PURE__ */ c(
                               "a",
                               {
@@ -275,10 +271,10 @@ function Qe({
                                 target: r.isExternal ? "_blank" : "_self",
                                 rel: r.isExternal ? "noopener noreferrer" : void 0,
                                 onClick: () => {
-                                  var te;
-                                  v(null), (te = r.onClick) == null || te.call(r);
+                                  var re;
+                                  v(null), (re = r.onClick) == null || re.call(r);
                                 },
-                                onMouseEnter: () => r.sublinks ? D(g) : null,
+                                onMouseEnter: () => r.sublinks ? F(g) : null,
                                 role: "menuitem",
                                 children: [
                                   /* @__PURE__ */ c("span", { className: e.linkContent, children: [
@@ -286,7 +282,7 @@ function Qe({
                                     r.subtitle && /* @__PURE__ */ a("span", { className: e.subtitle, children: r.subtitle })
                                   ] }),
                                   r.isExternal && /* @__PURE__ */ a(
-                                    V,
+                                    X,
                                     {
                                       className: e.newTabIcon,
                                       size: 16
@@ -299,7 +295,7 @@ function Qe({
                               "button",
                               {
                                 className: `${e.sublinkToggle} ${x === g ? e.open : ""}`,
-                                onMouseEnter: () => D(g),
+                                onMouseEnter: () => F(g),
                                 children: /* @__PURE__ */ c("span", { className: e.linkContent, children: [
                                   r.label,
                                   r.subtitle && /* @__PURE__ */ a("span", { className: e.subtitle, children: r.subtitle })
@@ -311,7 +307,7 @@ function Qe({
                         ]
                       }
                     ),
-                    (o == null ? void 0 : o.sublinks) && ((ce = o == null ? void 0 : o.sublinks) == null ? void 0 : ce.length) > 0 && /* @__PURE__ */ c(
+                    (o == null ? void 0 : o.sublinks) && ((se = o == null ? void 0 : o.sublinks) == null ? void 0 : se.length) > 0 && /* @__PURE__ */ c(
                       "div",
                       {
                         className: `${e.sublinksColumn} ${e.fadeInFromLeft}`,
@@ -320,19 +316,19 @@ function Qe({
                             /* @__PURE__ */ a("p", { children: "TEXT HERE" }),
                             s == null ? void 0 : s(o.description)
                           ] }),
-                          (o == null ? void 0 : o.sublinks) && W(
+                          (o == null ? void 0 : o.sublinks) && O(
                             o.sublinks,
-                            `${b}-${x}`
+                            `${f}-${x}`
                           )
                         ]
                       },
-                      `${o.label}-${(re = o == null ? void 0 : o.sublinks) == null ? void 0 : re.length}`
+                      `${o.label}-${(ie = o == null ? void 0 : o.sublinks) == null ? void 0 : ie.length}`
                     ),
-                    (l == null ? void 0 : l.secondaryItems) && ((oe = l == null ? void 0 : l.secondaryItems) == null ? void 0 : oe.length) > 0 && /* @__PURE__ */ a(
+                    (l == null ? void 0 : l.secondaryItems) && ((ce = l == null ? void 0 : l.secondaryItems) == null ? void 0 : ce.length) > 0 && /* @__PURE__ */ a(
                       "div",
                       {
                         className: `${e.sublinksColumn} ${e.secondaryColumn}`,
-                        children: l.secondaryItems && l.secondaryItems.length > 0 && W(l.secondaryItems, `${b}-secondary`)
+                        children: l.secondaryItems && l.secondaryItems.length > 0 && O(l.secondaryItems, `${f}-secondary`)
                       }
                     ),
                     l.spotlight && /* @__PURE__ */ a(
@@ -340,7 +336,7 @@ function Qe({
                       {
                         className: `${e.sublinksColumn} ${e.spotlightColumn}`,
                         children: /* @__PURE__ */ a(
-                          De,
+                          Fe,
                           {
                             spotlight: l.spotlight,
                             renderText: s ?? ((r) => String(r))
@@ -357,44 +353,44 @@ function Qe({
       },
       l._key ?? `group-${d}`
     );
-  }), W = (n, l = "") => n.map((d) => {
-    const b = `${l}/${d.label}`;
+  }), O = (n, l = "") => n.map((d) => {
+    const f = `${l}/${d.label}`;
     return /* @__PURE__ */ a(
-      Ae,
+      Ee,
       {
         link: d,
-        path: b,
+        path: f,
         parentPath: l,
-        openPath: Q,
-        togglePath: Me,
-        updateTriangleIndicator: ee,
+        openPath: J,
+        togglePath: ye,
+        updateTriangleIndicator: Z,
         setOpenPath: v,
-        renderLinks: W,
-        buttonRefs: U
+        renderLinks: O,
+        buttonRefs: D
       },
-      d._key ?? b
+      d._key ?? f
     );
   });
   return /* @__PURE__ */ a(
     "header",
     {
-      ref: I,
-      className: `${O ?? ""} ${Be[$]} ${Fe[A]} ${e.navbar} ${E ? e.sticky : ""} ${m && m.length ? e.advanced : e.default}`,
+      ref: j,
+      className: `${z ?? ""} ${We[$]} ${Oe[A]} ${e.navbar} ${M ? e.sticky : ""} ${m && m.length ? e.advanced : e.default}`,
       "aria-label": "Main navigation",
       children: /* @__PURE__ */ c(
         "div",
         {
           className: `${e.container} ${(!i || i.length === 0) && $ !== "center" ? e.twoColumn : ""}`,
           children: [
-            L ? /* @__PURE__ */ a("div", { className: e.logo, children: L }) : /* @__PURE__ */ a("div", { className: e.title, children: u }),
+            E ? /* @__PURE__ */ a("div", { className: e.logo, children: E }) : /* @__PURE__ */ a("div", { className: e.title, children: u }),
             /* @__PURE__ */ a(
               "nav",
               {
-                ref: M,
+                ref: L,
                 style: {
-                  left: $ === "center" ? `calc(50% - ${fe / 2}px)` : "0"
+                  left: $ === "center" ? `calc(50% - ${he / 2}px)` : "0"
                 },
-                className: `${e.nav} ${h ? e.open : ""} ${ue ? e.visible : e.hidden}`,
+                className: `${e.nav} ${h ? e.open : ""} ${fe ? e.visible : e.hidden}`,
                 id: "main-menu",
                 role: "menubar",
                 "aria-label": "Main navigation",
@@ -402,8 +398,8 @@ function Qe({
                   /* @__PURE__ */ a(
                     "svg",
                     {
-                      style: { left: `${ke}px` },
-                      className: `${e.triangle} ${Q ? e.show : ""}`,
+                      style: { left: `${ue}px` },
+                      className: `${e.triangle} ${J ? e.show : ""}`,
                       width: 16,
                       height: 12,
                       viewBox: "0 0 100 75",
@@ -420,20 +416,20 @@ function Qe({
                     }
                   ),
                   p === "default" && k && /* @__PURE__ */ c("div", { className: e.grid, children: [
-                    k && k.length > 0 && W(k),
-                    N && !C && /* @__PURE__ */ c(de, { children: [
+                    k && k.length > 0 && O(k),
+                    N && !C && /* @__PURE__ */ c(oe, { children: [
                       /* @__PURE__ */ a("span", { className: e.separator }),
-                      /* @__PURE__ */ a(j, {})
+                      /* @__PURE__ */ a(B, {})
                     ] }),
-                    y && /* @__PURE__ */ a(Z, {})
+                    w && /* @__PURE__ */ a(Q, {})
                   ] }),
                   !C && p === "advanced" && m && /* @__PURE__ */ c("div", { className: e.grid, children: [
-                    m.length > 0 && Le(m),
-                    N && /* @__PURE__ */ c(de, { children: [
+                    m.length > 0 && Ce(m),
+                    N && /* @__PURE__ */ c(oe, { children: [
                       /* @__PURE__ */ a("span", { className: e.separator }),
-                      /* @__PURE__ */ a(j, {})
+                      /* @__PURE__ */ a(B, {})
                     ] }),
-                    y && /* @__PURE__ */ a(Z, {})
+                    w && /* @__PURE__ */ a(Q, {})
                   ] }),
                   C && p === "advanced" && h && t.length === 0 && m && /* @__PURE__ */ a("div", { className: `${e.mobileMenu}`, children: m.map((n, l) => /* @__PURE__ */ a(
                     "div",
@@ -443,7 +439,7 @@ function Qe({
                         "button",
                         {
                           className: e.sublinkToggle,
-                          onClick: () => ye(n),
+                          onClick: () => $e(n),
                           children: n.title
                         }
                       )
@@ -459,9 +455,9 @@ function Qe({
                           "button",
                           {
                             className: e.back,
-                            onClick: t.length === 1 ? ge : we,
+                            onClick: t.length === 1 ? Ne : ge,
                             children: /* @__PURE__ */ a(
-                              Ee,
+                              Le,
                               {
                                 size: 18,
                                 "aria-hidden": "true",
@@ -487,7 +483,7 @@ function Qe({
                               "button",
                               {
                                 className: e.sublinkToggle,
-                                onClick: () => P(n),
+                                onClick: () => Y(n),
                                 children: /* @__PURE__ */ c("span", { className: e.linkContent, children: [
                                   n.label,
                                   n.subtitle && /* @__PURE__ */ a("span", { className: e.subtitle, children: n.subtitle })
@@ -507,7 +503,7 @@ function Qe({
                                     n.subtitle && /* @__PURE__ */ a("span", { className: e.subtitle, children: n.subtitle })
                                   ] }),
                                   n.isExternal && /* @__PURE__ */ a(
-                                    V,
+                                    X,
                                     {
                                       className: e.newTabIcon,
                                       size: 16
@@ -529,7 +525,7 @@ function Qe({
                                 "button",
                                 {
                                   className: e.sublinkToggle,
-                                  onClick: () => P(n),
+                                  onClick: () => Y(n),
                                   children: n.label
                                 }
                               ) : /* @__PURE__ */ c(
@@ -543,7 +539,7 @@ function Qe({
                                   children: [
                                     n.label,
                                     n.isExternal && /* @__PURE__ */ a(
-                                      V,
+                                      X,
                                       {
                                         className: e.newTabIcon,
                                         size: 16
@@ -563,8 +559,8 @@ function Qe({
                 ] })
               }
             ),
-            i && i.length > 0 && /* @__PURE__ */ a("nav", { className: e.utility, "aria-label": "Utility navigation", children: /* @__PURE__ */ a(me, { children: i.map((n, l) => /* @__PURE__ */ a(
-              q,
+            i && i.length > 0 && /* @__PURE__ */ a("nav", { className: e.utility, "aria-label": "Utility navigation", children: /* @__PURE__ */ a(de, { children: i.map((n, l) => /* @__PURE__ */ a(
+              H,
               {
                 as: "a",
                 href: n.href ?? "/",
@@ -590,8 +586,8 @@ function Qe({
               {
                 "aria-label": "Utility navigation",
                 className: `${e.utilityMobile} ${h ? e.open : ""}`,
-                children: /* @__PURE__ */ a(me, { alignment: "center", children: /* @__PURE__ */ a(
-                  q,
+                children: /* @__PURE__ */ a(de, { alignment: "center", children: /* @__PURE__ */ a(
+                  H,
                   {
                     as: "a",
                     href: i[1].href ?? "/",
@@ -614,16 +610,16 @@ function Qe({
               }
             ),
             /* @__PURE__ */ c("div", { className: e.mobileButtons, children: [
-              C && N && /* @__PURE__ */ a(j, {}),
+              C && N && /* @__PURE__ */ a(B, {}),
               /* @__PURE__ */ a(
                 "button",
                 {
                   className: e.menuToggle,
-                  onClick: Ce,
+                  onClick: we,
                   "aria-label": h ? "Close menu" : "Open menu",
                   "aria-expanded": h,
                   "aria-controls": "main-menu",
-                  children: h ? /* @__PURE__ */ a(_e, { size: 24 }) : /* @__PURE__ */ a(Re, { size: 24 })
+                  children: h ? /* @__PURE__ */ a(Me, { size: 24 }) : /* @__PURE__ */ a(xe, { size: 24 })
                 }
               )
             ] })
@@ -634,5 +630,5 @@ function Qe({
   );
 }
 export {
-  Qe as Navbar
+  Je as Navbar
 };

package/package.json

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