quirk-ui 0.0.408 → 0.0.409

package/dist/NavLink-CkJJdirp.js

@@ -0,0 +1,113 @@
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import { useRef as k } from "react";
+import { E as h } from "./external-link-BOPobeQJ.js";
+import { C as g } from "./chevron-down-DSUzBz9F.js";
+import './assets/NavLink.css';const f = "_navbar_1bon6_5", I = "_sticky_1bon6_19", w = "_left_1bon6_34", C = "_container_1bon6_35", N = "_logo_1bon6_39", x = "_nav_1bon6_5", T = "_center_1bon6_54", E = "_hidden_1bon6_60", W = "_visible_1bon6_67", $ = "_right_1bon6_82", y = "_title_1bon6_89", L = "_linkWrapper_1bon6_99", M = "_parent_1bon6_99", j = "_linkItem_1bon6_107", z = "_link_1bon6_99", R = "_sublinkToggle_1bon6_111", D = "_standard_1bon6_159", S = "_triangle_1bon6_167", q = "_transparent_1bon6_172", A = "_twoColumn_1bon6_276", B = "_navInner_1bon6_398", F = "_grid_1bon6_409", G = "_separator_1bon6_444", H = "_newTabIcon_1bon6_474", J = "_open_1bon6_500", K = "_sublinks_1bon6_486", Q = "_show_1bon6_571", U = "_sublinksInner_1bon6_629", V = "_sublinksColumn_1bon6_647", X = "_chevron_1bon6_657", Y = "_advanced_1bon6_839", Z = "_searchWrapper_1bon6_940", o = {
+  navbar: f,
+  sticky: I,
+  left: w,
+  container: C,
+  logo: N,
+  nav: x,
+  center: T,
+  hidden: E,
+  visible: W,
+  right: $,
+  title: y,
+  linkWrapper: L,
+  parent: M,
+  linkItem: j,
+  link: z,
+  sublinkToggle: R,
+  standard: D,
+  triangle: S,
+  transparent: q,
+  twoColumn: A,
+  navInner: B,
+  grid: F,
+  separator: G,
+  newTabIcon: H,
+  open: J,
+  sublinks: K,
+  show: Q,
+  sublinksInner: U,
+  sublinksColumn: V,
+  chevron: X,
+  default: "_default_1bon6_773",
+  advanced: Y,
+  searchWrapper: Z
+};
+function en({
+  link: n,
+  path: e,
+  parentPath: l,
+  openPath: d,
+  togglePath: c,
+  updateTriangleIndicator: m,
+  setOpenPath: r,
+  renderLinks: v,
+  buttonRefs: p
+}) {
+  var b;
+  const _ = d === e, t = !!((b = n.sublinks) != null && b.length), i = k(null);
+  return p.current.set(e, i.current), /* @__PURE__ */ a(
+    "div",
+    {
+      className: `${o.linkWrapper} ${l ? "" : o.parent}`,
+      children: [
+        /* @__PURE__ */ s("div", { className: o.linkItem, children: n.href ? /* @__PURE__ */ a(
+          "a",
+          {
+            href: n.href,
+            className: o.link,
+            target: n.isExternal ? "_blank" : "_self",
+            rel: n.isExternal ? "noopener noreferrer" : void 0,
+            onClick: () => {
+              var u;
+              r(null), (u = n.onClick) == null || u.call(n);
+            },
+            onMouseEnter: () => {
+              l || r(null);
+            },
+            role: "menuitem",
+            children: [
+              n.label,
+              n.isExternal && /* @__PURE__ */ s(h, { className: o.newTabIcon, size: 16 })
+            ]
+          }
+        ) : /* @__PURE__ */ a(
+          "button",
+          {
+            ref: i,
+            "aria-haspopup": t ? "true" : void 0,
+            "aria-expanded": _,
+            className: `${o.sublinkToggle} ${_ ? o.open : ""}`,
+            onClick: () => c(e),
+            onMouseEnter: () => {
+              m(e), r(e);
+            },
+            children: [
+              n.label,
+              t && /* @__PURE__ */ s(g, { size: 18, className: o.chevron })
+            ]
+          }
+        ) }),
+        t && /* @__PURE__ */ s(
+          "div",
+          {
+            className: `${o.sublinks} ${_ ? o.show : ""}`,
+            onMouseLeave: () => c(e),
+            role: "menu",
+            "aria-label": `${n.label} submenu`,
+            children: /* @__PURE__ */ s("div", { children: /* @__PURE__ */ s("div", { className: o.sublinksInner, children: /* @__PURE__ */ s("div", { className: o.sublinksColumn, children: v(n.sublinks, e) }) }) })
+          }
+        )
+      ]
+    },
+    e
+  );
+}
+export {
+  en as N,
+  o as s
+};

package/dist/NavLink-D2MSB11f.cjs

@@ -0,0 +1 @@
+"use strict";require('./assets/NavLink.css');const s=require("react/jsx-runtime"),m=require("react"),p=require("./external-link-DDShu-48.cjs"),h=require("./chevron-down-DfK1XBl3.cjs"),g="_navbar_1bon6_5",x="_sticky_1bon6_19",f="_left_1bon6_34",I="_container_1bon6_35",w="_logo_1bon6_39",C="_nav_1bon6_5",N="_center_1bon6_54",j="_hidden_1bon6_60",$="_visible_1bon6_67",T="_right_1bon6_82",W="_title_1bon6_89",E="_linkWrapper_1bon6_99",q="_parent_1bon6_99",y="_linkItem_1bon6_107",L="_link_1bon6_99",M="_sublinkToggle_1bon6_111",R="_standard_1bon6_159",z="_triangle_1bon6_167",D="_transparent_1bon6_172",S="_twoColumn_1bon6_276",A="_navInner_1bon6_398",B="_grid_1bon6_409",F="_separator_1bon6_444",G="_newTabIcon_1bon6_474",H="_open_1bon6_500",J="_sublinks_1bon6_486",K="_show_1bon6_571",Q="_sublinksInner_1bon6_629",U="_sublinksColumn_1bon6_647",V="_chevron_1bon6_657",X="_advanced_1bon6_839",Y="_searchWrapper_1bon6_940",e={navbar:g,sticky:x,left:f,container:I,logo:w,nav:C,center:N,hidden:j,visible:$,right:T,title:W,linkWrapper:E,parent:q,linkItem:y,link:L,sublinkToggle:M,standard:R,triangle:z,transparent:D,twoColumn:S,navInner:A,grid:B,separator:F,newTabIcon:G,open:H,sublinks:J,show:K,sublinksInner:Q,sublinksColumn:U,chevron:V,default:"_default_1bon6_773",advanced:X,searchWrapper:Y};function Z({link:n,path:o,parentPath:a,openPath:u,togglePath:l,updateTriangleIndicator:d,setOpenPath:r,renderLinks:v,buttonRefs:k}){var i;const _=u===o,t=!!((i=n.sublinks)!=null&&i.length),c=m.useRef(null);return k.current.set(o,c.current),s.jsxs("div",{className:`${e.linkWrapper} ${a?"":e.parent}`,children:[s.jsx("div",{className:e.linkItem,children:n.href?s.jsxs("a",{href:n.href,className:e.link,target:n.isExternal?"_blank":"_self",rel:n.isExternal?"noopener noreferrer":void 0,onClick:()=>{var b;r(null),(b=n.onClick)==null||b.call(n)},onMouseEnter:()=>{a||r(null)},role:"menuitem",children:[n.label,n.isExternal&&s.jsx(p.ExternalLink,{className:e.newTabIcon,size:16})]}):s.jsxs("button",{ref:c,"aria-haspopup":t?"true":void 0,"aria-expanded":_,className:`${e.sublinkToggle} ${_?e.open:""}`,onClick:()=>l(o),onMouseEnter:()=>{d(o),r(o)},children:[n.label,t&&s.jsx(h.ChevronDown,{size:18,className:e.chevron})]})}),t&&s.jsx("div",{className:`${e.sublinks} ${_?e.show:""}`,onMouseLeave:()=>l(o),role:"menu","aria-label":`${n.label} submenu`,children:s.jsx("div",{children:s.jsx("div",{className:e.sublinksInner,children:s.jsx("div",{className:e.sublinksColumn,children:v(n.sublinks,o)})})})})]},o)}exports.NavLink=Z;exports.styles=e;

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

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

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),s=require("../../../NavLink-C5ZCMRQ6.cjs"),ts=require("../../../chevron-down-DfK1XBl3.cjs"),ls=require("../../../external-link-DDShu-48.cjs"),as={standard:s.styles.standard,transparent:s.styles.transparent},is={left:s.styles.left,center:s.styles.center,right:s.styles.right};function cs({title:H,logo:g,items:y,groups:u,utilityItems:C,isSticky:V=!1,showSearch:L=!0,showLocaleSelect:E=!0,alignment:$="right",variant:A="standard",navigationType:R="default",className:J}){const[M,K]=i.useState(0),[j,r]=i.useState(null),[f,Q]=i.useState(!1),[p,U]=i.useState(!1),[S,Y]=i.useState(!1),[Z,P]=i.useState(null),[v,m]=i.useState(0),[ss,W]=i.useState(null),N=i.useRef(null),h=i.useRef(null),k=i.useRef(new Map),_=()=>e.jsx("div",{className:`${s.styles.linkWrapper} ${s.styles.parent} ${s.styles.searchWrapper}`,children:e.jsx("div",{className:s.styles.linkItem})}),z=()=>e.jsx("div",{className:`${s.styles.linkWrapper} ${s.styles.parent} `,children:e.jsx("div",{className:s.styles.linkItem})}),w=l=>{const n=k.current.get(l);if(n&&h.current){const c=n.getBoundingClientRect(),o=h.current.getBoundingClientRect(),t=c.left-o.left+c.width/2;P(t)}};console.log(w);const es=l=>{r(n=>n===l?null:l)},ns=l=>l.map((n,c)=>{var I,T,D,F,G;const o=`group-${c}`,b=ss===c,t=(I=n.primaryItems)==null?void 0:I[v??0];return e.jsxs("div",{className:`${s.styles.linkWrapper} ${s.styles.parent}`,onMouseEnter:()=>{W(c),r(o),w(o)},onMouseLeave:()=>{W(null),m(0),r(null)},children:[e.jsx("div",{className:s.styles.linkItem,children:e.jsxs("button",{ref:a=>{k.current.set(o,a)},role:"menuitem","aria-haspopup":"true","aria-expanded":b,"aria-controls":`submenu-${c}`,className:`${s.styles.sublinkToggle} ${b?s.styles.open:""} `,children:[n.title,e.jsx(ts.ChevronDown,{size:18,className:s.styles.chevron})]})}),e.jsx("div",{id:`submenu-${c}`,className:`${s.styles.sublinks} ${b?s.styles.show:""}`,role:"menu","aria-label":`${n.title} submenu`,children:e.jsx("div",{children:e.jsxs("div",{className:`${s.styles.sublinksInner} ${n.spotlight?s.styles.withSpotlight:s.styles.withoutSpotlight}`,children:[e.jsxs("div",{className:`${s.styles.sublinksColumn} ${s.styles.primaryColumn}`,children:[e.jsx("div",{className:s.styles.linkItem}),(T=n.primaryItems)==null?void 0:T.map((a,d)=>a.href?e.jsxs("a",{href:a.href,className:`${s.styles.link} ${v===d?s.styles.open:""}`,target:a.isExternal?"_blank":"_self",rel:a.isExternal?"noopener noreferrer":void 0,onClick:()=>{var X;r(null),(X=a.onClick)==null||X.call(a)},onMouseEnter:()=>a.sublinks?m(d):null,role:"menuitem",children:[e.jsxs("span",{className:s.styles.linkContent,children:[a.label,a.subtitle&&e.jsx("span",{className:s.styles.subtitle,children:a.subtitle})]}),a.isExternal&&e.jsx(ls.ExternalLink,{className:s.styles.newTabIcon,size:16})]},a._key??d):e.jsx("button",{className:`${s.styles.sublinkToggle} ${v===d?s.styles.open:""}`,onMouseEnter:()=>m(d),children:e.jsxs("span",{className:s.styles.linkContent,children:[a.label,a.subtitle&&e.jsx("span",{className:s.styles.subtitle,children:a.subtitle})]})},a._key??d))]}),(t==null?void 0:t.sublinks)&&((D=t==null?void 0:t.sublinks)==null?void 0:D.length)>0&&e.jsxs("div",{className:`${s.styles.sublinksColumn} ${s.styles.fadeInFromLeft}`,children:[(t==null?void 0:t.description)&&e.jsx("div",{className:s.styles.sublinksDescription,children:t==null?void 0:t.description}),(t==null?void 0:t.sublinks)&&x(t.sublinks,`${o}-${v}`)]},`${t.label}-${(F=t==null?void 0:t.sublinks)==null?void 0:F.length}`),(n==null?void 0:n.secondaryItems)&&((G=n==null?void 0:n.secondaryItems)==null?void 0:G.length)>0&&e.jsx("div",{className:`${s.styles.sublinksColumn} ${s.styles.secondaryColumn}`,children:n.secondaryItems&&n.secondaryItems.length>0&&x(n.secondaryItems,`${o}-secondary`)}),n.spotlight&&e.jsx("div",{className:`${s.styles.sublinksColumn} ${s.styles.spotlightColumn}`,children:n.spotlight})]})})})]},n._key??`group-${c}`)}),x=(l,n="")=>l.map(c=>{const o=`${n}/${c.label}`;return e.jsx(s.NavLink,{link:c,path:o,parentPath:n,openPath:j,togglePath:es,updateTriangleIndicator:w,setOpenPath:r,renderLinks:x,buttonRefs:k},c._key??o)}),B=i.useCallback(l=>{N.current&&!N.current.contains(l.target)&&r(null)},[]),O=i.useCallback(()=>{q(),typeof window<"u"&&window.innerWidth>768&&(Q(!1),r(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),q=i.useCallback(()=>{if(h.current){const l=h.current.getBoundingClientRect().width;K(l),Y(!0)}},[]);return i.useEffect(()=>{const l=typeof window<"u",n=typeof document<"u";return l&&window.addEventListener("resize",O),n&&document.addEventListener("click",B),q(),()=>{l&&window.removeEventListener("resize",O),n&&document.removeEventListener("click",B)}},[]),i.useEffect(()=>{if(typeof window<"u"){const l=()=>{const n=window.innerWidth<768;U(n)};return l(),window.addEventListener("resize",l),()=>window.removeEventListener("resize",l)}},[]),i.useEffect(()=>{if(typeof document<"u")return document.body.style.overflow=f?"hidden":"",()=>{document.body.style.overflow=""}},[f]),e.jsx("header",{ref:N,className:`${J??""} ${is[$]} ${as[A]} ${s.styles.navbar} ${V?s.styles.sticky:""} ${u&&u.length?s.styles.advanced:s.styles.default}`,role:"navigation","aria-label":"Main navigation",children:e.jsxs("div",{className:`${s.styles.container} ${(!C||C.length===0)&&$!=="center"?s.styles.twoColumn:""}`,children:[g?e.jsx("div",{className:s.styles.logo,children:g}):e.jsx("div",{className:s.styles.title,children:H}),e.jsx("nav",{ref:h,style:{left:$==="center"?`calc(50% - ${M/2}px)`:"0"},className:`${s.styles.nav} ${f?s.styles.open:""} ${S?s.styles.visible:s.styles.hidden}`,id:"main-menu",role:"menubar","aria-label":"Main navigation",children:e.jsxs("div",{className:s.styles.navInner,children:[e.jsx("svg",{style:{left:`${Z}px`},className:`${s.styles.triangle} ${j?s.styles.show:""}`,width:16,height:12,viewBox:"0 0 100 75",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("polygon",{points:"50,5 95,70 5,70",strokeLinejoin:"round",fill:"white",stroke:"white"})}),R==="default"&&y&&e.jsxs("div",{className:s.styles.grid,children:[y&&y.length>0&&x(y),L&&!p&&e.jsxs(e.Fragment,{children:[e.jsx("span",{className:s.styles.separator}),e.jsx(_,{})]}),E&&e.jsx(z,{})]}),!p&&R==="advanced"&&u&&e.jsxs("div",{className:s.styles.grid,children:[u.length>0&&ns(u),L&&e.jsxs(e.Fragment,{children:[e.jsx("span",{className:s.styles.separator}),e.jsx(_,{})]}),E&&e.jsx(z,{})]}),e.jsx("p",{children:"HELLO"}),e.jsxs("p",{children:["vis: ",S]}),e.jsxs("p",{children:["open: ",f]}),e.jsxs("p",{children:["path: ",j]}),e.jsxs("p",{children:["nav: ",M]}),e.jsxs("p",{children:["mobile: ",p]})]})})]})})}exports.Navbar=cs;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),n=require("react"),e=require("../../../NavLink-D2MSB11f.cjs"),V={standard:e.styles.standard,transparent:e.styles.transparent},D={left:e.styles.left,center:e.styles.center,right:e.styles.right};function H({title:W,logo:p,items:r,groups:u,utilityItems:m,isSticky:B=!1,showSearch:w=!0,showLocaleSelect:x=!0,alignment:f="right",variant:S="standard",navigationType:g="default",className:z}){const[j,I]=n.useState(0),[v,c]=n.useState(null),[o,O]=n.useState(!1),[h,q]=n.useState(!1),[N,_]=n.useState(!1),[P,X]=n.useState(null),y=n.useRef(null),i=n.useRef(null),b=n.useRef(new Map),$=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} ${e.styles.searchWrapper}`,children:s.jsx("div",{className:e.styles.linkItem})}),k=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem})}),L=t=>{const l=b.current.get(t);if(l&&i.current){const a=l.getBoundingClientRect(),d=i.current.getBoundingClientRect(),T=a.left-d.left+a.width/2;X(T)}};console.log(L);const F=t=>{c(l=>l===t?null:t)},R=(t,l="")=>t.map(a=>{const d=`${l}/${a.label}`;return s.jsx(e.NavLink,{link:a,path:d,parentPath:l,openPath:v,togglePath:F,updateTriangleIndicator:L,setOpenPath:c,renderLinks:R,buttonRefs:b},a._key??d)}),C=n.useCallback(t=>{y.current&&!y.current.contains(t.target)&&c(null)},[]),E=n.useCallback(()=>{M(),typeof window<"u"&&window.innerWidth>768&&(O(!1),c(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),M=n.useCallback(()=>{if(i.current){const t=i.current.getBoundingClientRect().width;I(t),_(!0)}},[]);return n.useEffect(()=>{const t=typeof window<"u",l=typeof document<"u";return t&&window.addEventListener("resize",E),l&&document.addEventListener("click",C),M(),()=>{t&&window.removeEventListener("resize",E),l&&document.removeEventListener("click",C)}},[]),n.useEffect(()=>{if(typeof window<"u"){const t=()=>{const l=window.innerWidth<768;q(l)};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)}},[]),n.useEffect(()=>{if(typeof document<"u")return document.body.style.overflow=o?"hidden":"",()=>{document.body.style.overflow=""}},[o]),s.jsx("header",{ref:y,className:`${z??""} ${D[f]} ${V[S]} ${e.styles.navbar} ${B?e.styles.sticky:""} ${u&&u.length?e.styles.advanced:e.styles.default}`,role:"navigation","aria-label":"Main navigation",children:s.jsxs("div",{className:`${e.styles.container} ${(!m||m.length===0)&&f!=="center"?e.styles.twoColumn:""}`,children:[p?s.jsx("div",{className:e.styles.logo,children:p}):s.jsx("div",{className:e.styles.title,children:W}),s.jsx("nav",{ref:i,style:{left:f==="center"?`calc(50% - ${j/2}px)`:"0"},className:`${e.styles.nav} ${o?e.styles.open:""} ${N?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:`${P}px`},className:`${e.styles.triangle} ${v?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"})}),g==="default"&&r&&s.jsxs("div",{className:e.styles.grid,children:[r&&r.length>0&&R(r),w&&!h&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx($,{})]}),x&&s.jsx(k,{})]}),!h&&g==="advanced"&&u&&s.jsxs("div",{className:e.styles.grid,children:[w&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx($,{})]}),x&&s.jsx(k,{})]}),s.jsx("p",{children:"HELLO"}),s.jsxs("p",{children:["vis: ",N]}),s.jsxs("p",{children:["open: ",o]}),s.jsxs("p",{children:["path: ",v]}),s.jsxs("p",{children:["nav: ",j]}),s.jsxs("p",{children:["mobile: ",h]})]})})]})})}exports.Navbar=H;

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

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

package/package.json

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

package/dist/NavLink-C5ZCMRQ6.cjs

@@ -1 +0,0 @@
-"use strict";require('./assets/NavLink.css');const s=require("react/jsx-runtime"),h=require("react"),k=require("./external-link-DDShu-48.cjs"),v=require("./chevron-down-DfK1XBl3.cjs"),g="_navbar_1bon6_5",C="_sticky_1bon6_19",f="_left_1bon6_34",w="_container_1bon6_35",I="_logo_1bon6_39",x="_nav_1bon6_5",y="_center_1bon6_54",N="_hidden_1bon6_60",j="_visible_1bon6_67",$="_right_1bon6_82",L="_title_1bon6_89",T="_linkWrapper_1bon6_99",S="_parent_1bon6_99",W="_linkItem_1bon6_107",E="_link_1bon6_99",q="_sublinkToggle_1bon6_111",D="_standard_1bon6_159",F="_triangle_1bon6_167",M="_transparent_1bon6_172",R="_twoColumn_1bon6_276",z="_navInner_1bon6_398",A="_grid_1bon6_409",B="_separator_1bon6_444",G="_newTabIcon_1bon6_474",H="_sublinksDescription_1bon6_486",J="_linkContent_1bon6_489",K="_open_1bon6_500",Q="_sublinks_1bon6_486",U="_show_1bon6_571",V="_primaryColumn_1bon6_612",X="_secondaryColumn_1bon6_621",Y="_spotlightColumn_1bon6_625",Z="_sublinksInner_1bon6_629",O="_sublinksColumn_1bon6_647",P="_chevron_1bon6_657",nn="_advanced_1bon6_839",on="_subtitle_1bon6_848",sn="_withSpotlight_1bon6_890",en="_withoutSpotlight_1bon6_894",tn="_searchWrapper_1bon6_940",rn="_fadeInFromLeft_1bon6_962",o={navbar:g,sticky:C,left:f,container:w,logo:I,nav:x,center:y,hidden:N,visible:j,right:$,title:L,linkWrapper:T,parent:S,linkItem:W,link:E,sublinkToggle:q,standard:D,triangle:F,transparent:M,twoColumn:R,navInner:z,grid:A,separator:B,newTabIcon:G,sublinksDescription:H,linkContent:J,open:K,sublinks:Q,show:U,primaryColumn:V,secondaryColumn:X,spotlightColumn:Y,sublinksInner:Z,sublinksColumn:O,chevron:P,default:"_default_1bon6_773",advanced:nn,subtitle:on,withSpotlight:sn,withoutSpotlight:en,searchWrapper:tn,fadeInFromLeft:rn};function _n({link:n,path:e,parentPath:i,openPath:u,togglePath:l,updateTriangleIndicator:d,setOpenPath:t,renderLinks:m,buttonRefs:p}){var a;const r=u===e,_=!!((a=n.sublinks)!=null&&a.length),c=h.useRef(null);return p.current.set(e,c.current),s.jsxs("div",{className:`${o.linkWrapper} ${i?"":o.parent}`,children:[s.jsx("div",{className:o.linkItem,children:n.href?s.jsxs("a",{href:n.href,className:o.link,target:n.isExternal?"_blank":"_self",rel:n.isExternal?"noopener noreferrer":void 0,onClick:()=>{var b;t(null),(b=n.onClick)==null||b.call(n)},onMouseEnter:()=>{i||t(null)},role:"menuitem",children:[n.label,n.isExternal&&s.jsx(k.ExternalLink,{className:o.newTabIcon,size:16})]}):s.jsxs("button",{ref:c,"aria-haspopup":_?"true":void 0,"aria-expanded":r,className:`${o.sublinkToggle} ${r?o.open:""}`,onClick:()=>l(e),onMouseEnter:()=>{d(e),t(e)},children:[n.label,_&&s.jsx(v.ChevronDown,{size:18,className:o.chevron})]})}),_&&s.jsx("div",{className:`${o.sublinks} ${r?o.show:""}`,onMouseLeave:()=>l(e),role:"menu","aria-label":`${n.label} submenu`,children:s.jsx("div",{children:s.jsx("div",{className:o.sublinksInner,children:s.jsx("div",{className:o.sublinksColumn,children:m(n.sublinks,e)})})})})]},e)}exports.NavLink=_n;exports.styles=o;

package/dist/NavLink-CfAA47R1.js

@@ -1,122 +0,0 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { useRef as k } from "react";
-import { E as v } from "./external-link-BOPobeQJ.js";
-import { C as g } from "./chevron-down-DSUzBz9F.js";
-import './assets/NavLink.css';const f = "_navbar_1bon6_5", C = "_sticky_1bon6_19", w = "_left_1bon6_34", I = "_container_1bon6_35", N = "_logo_1bon6_39", y = "_nav_1bon6_5", x = "_center_1bon6_54", T = "_hidden_1bon6_60", E = "_visible_1bon6_67", S = "_right_1bon6_82", W = "_title_1bon6_89", $ = "_linkWrapper_1bon6_99", L = "_parent_1bon6_99", D = "_linkItem_1bon6_107", F = "_link_1bon6_99", M = "_sublinkToggle_1bon6_111", j = "_standard_1bon6_159", z = "_triangle_1bon6_167", R = "_transparent_1bon6_172", q = "_twoColumn_1bon6_276", A = "_navInner_1bon6_398", B = "_grid_1bon6_409", G = "_separator_1bon6_444", H = "_newTabIcon_1bon6_474", J = "_sublinksDescription_1bon6_486", K = "_linkContent_1bon6_489", Q = "_open_1bon6_500", U = "_sublinks_1bon6_486", V = "_show_1bon6_571", X = "_primaryColumn_1bon6_612", Y = "_secondaryColumn_1bon6_621", Z = "_spotlightColumn_1bon6_625", O = "_sublinksInner_1bon6_629", P = "_sublinksColumn_1bon6_647", nn = "_chevron_1bon6_657", on = "_advanced_1bon6_839", sn = "_subtitle_1bon6_848", en = "_withSpotlight_1bon6_890", tn = "_withoutSpotlight_1bon6_894", _n = "_searchWrapper_1bon6_940", rn = "_fadeInFromLeft_1bon6_962", o = {
-  navbar: f,
-  sticky: C,
-  left: w,
-  container: I,
-  logo: N,
-  nav: y,
-  center: x,
-  hidden: T,
-  visible: E,
-  right: S,
-  title: W,
-  linkWrapper: $,
-  parent: L,
-  linkItem: D,
-  link: F,
-  sublinkToggle: M,
-  standard: j,
-  triangle: z,
-  transparent: R,
-  twoColumn: q,
-  navInner: A,
-  grid: B,
-  separator: G,
-  newTabIcon: H,
-  sublinksDescription: J,
-  linkContent: K,
-  open: Q,
-  sublinks: U,
-  show: V,
-  primaryColumn: X,
-  secondaryColumn: Y,
-  spotlightColumn: Z,
-  sublinksInner: O,
-  sublinksColumn: P,
-  chevron: nn,
-  default: "_default_1bon6_773",
-  advanced: on,
-  subtitle: sn,
-  withSpotlight: en,
-  withoutSpotlight: tn,
-  searchWrapper: _n,
-  fadeInFromLeft: rn
-};
-function un({
-  link: n,
-  path: s,
-  parentPath: i,
-  openPath: d,
-  togglePath: a,
-  updateTriangleIndicator: m,
-  setOpenPath: t,
-  renderLinks: p,
-  buttonRefs: h
-}) {
-  var b;
-  const _ = d === s, r = !!((b = n.sublinks) != null && b.length), c = k(null);
-  return h.current.set(s, c.current), /* @__PURE__ */ l(
-    "div",
-    {
-      className: `${o.linkWrapper} ${i ? "" : o.parent}`,
-      children: [
-        /* @__PURE__ */ e("div", { className: o.linkItem, children: n.href ? /* @__PURE__ */ l(
-          "a",
-          {
-            href: n.href,
-            className: o.link,
-            target: n.isExternal ? "_blank" : "_self",
-            rel: n.isExternal ? "noopener noreferrer" : void 0,
-            onClick: () => {
-              var u;
-              t(null), (u = n.onClick) == null || u.call(n);
-            },
-            onMouseEnter: () => {
-              i || t(null);
-            },
-            role: "menuitem",
-            children: [
-              n.label,
-              n.isExternal && /* @__PURE__ */ e(v, { className: o.newTabIcon, size: 16 })
-            ]
-          }
-        ) : /* @__PURE__ */ l(
-          "button",
-          {
-            ref: c,
-            "aria-haspopup": r ? "true" : void 0,
-            "aria-expanded": _,
-            className: `${o.sublinkToggle} ${_ ? o.open : ""}`,
-            onClick: () => a(s),
-            onMouseEnter: () => {
-              m(s), t(s);
-            },
-            children: [
-              n.label,
-              r && /* @__PURE__ */ e(g, { size: 18, className: o.chevron })
-            ]
-          }
-        ) }),
-        r && /* @__PURE__ */ e(
-          "div",
-          {
-            className: `${o.sublinks} ${_ ? o.show : ""}`,
-            onMouseLeave: () => a(s),
-            role: "menu",
-            "aria-label": `${n.label} submenu`,
-            children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: o.sublinksInner, children: /* @__PURE__ */ e("div", { className: o.sublinksColumn, children: p(n.sublinks, s) }) }) })
-          }
-        )
-      ]
-    },
-    s
-  );
-}
-export {
-  un as N,
-  o as s
-};