@radix-ui/react-navigation-menu 0.1.3-rc.5 → 0.1.3-rc.50

package/dist/index.module.js

@@ -1,2 +1,827 @@
-import*as e from"@radix-ui/react-visually-hidden";import{useCallbackRef as t}from"@radix-ui/react-use-callback-ref";import{useLayoutEffect as n}from"@radix-ui/react-use-layout-effect";import{usePrevious as o}from"@radix-ui/react-use-previous";import{DismissableLayer as r}from"@radix-ui/react-dismissable-layer";import{createCollection as a}from"@radix-ui/react-collection";import{useId as i}from"@radix-ui/react-id";import{Presence as u}from"@radix-ui/react-presence";import{useDirection as s}from"@radix-ui/react-direction";import{composeRefs as c,useComposedRefs as l}from"@radix-ui/react-compose-refs";import{useControllableState as d}from"@radix-ui/react-use-controllable-state";import{Primitive as v}from"@radix-ui/react-primitive";import{composeEventHandlers as f}from"@radix-ui/primitive";import{createContextScope as m}from"@radix-ui/react-context";import p from"react-dom";import*as g from"react";import M from"@babel/runtime/helpers/esm/extends";const[E,w,N]=a("NavigationMenu"),[x,R,h]=a("NavigationMenu"),[C,b]=m("NavigationMenu",[N,h]);export{b as createNavigationMenuScope};const[_,y]=C("NavigationMenu"),[I,P]=C("NavigationMenu");export const NavigationMenu=/*#__PURE__*/g.forwardRef(((e,t)=>{const{__scopeNavigationMenu:n,value:o,onValueChange:r,defaultValue:a,orientation:i="horizontal",dir:u,...c}=e,[d,f]=g.useState(null),m=l(t,(e=>f(e))),p=s(u);/*#__PURE__*/return g.createElement(T,{scope:n,isRootMenu:!0,value:o,onValueChange:r,defaultValue:a,dir:p,orientation:i,rootNavigationMenu:d},/*#__PURE__*/g.createElement(v.nav,M({"aria-label":"Main","data-orientation":i,dir:p},c,{ref:m})))}));/*#__PURE__*/export const NavigationMenuSub=/*#__PURE__*/g.forwardRef(((e,t)=>{const{__scopeNavigationMenu:n,value:o,onValueChange:r,defaultValue:a,orientation:i="horizontal",...u}=e,s=y("NavigationMenuSub",n);/*#__PURE__*/return g.createElement(T,{scope:n,isRootMenu:!1,value:o,onValueChange:r,defaultValue:a,dir:s.dir,orientation:i,rootNavigationMenu:s.rootNavigationMenu},/*#__PURE__*/g.createElement(v.div,M({"data-orientation":i},u,{ref:t})))}));/*#__PURE__*/const T=e=>{const{scope:t,isRootMenu:n,rootNavigationMenu:r,value:a,onValueChange:u,defaultValue:s,dir:c,orientation:l,children:v}=e,[f,m]=g.useState(null),[p,M]=g.useState(new Map),[w,N]=g.useState(null),x=g.useRef(0),[R="",h]=d({prop:a,onChange:u,defaultProp:s});return g.useEffect((()=>()=>window.clearTimeout(x.current)),[x]),/*#__PURE__*/g.createElement(_,{scope:t,isRootMenu:n,rootNavigationMenu:r,value:R,previousValue:o(R),baseId:i(),dir:c,orientation:l,viewport:f,onViewportChange:m,indicatorTrack:w,onIndicatorTrackChange:N,onItemOver:g.useCallback((e=>{n&&window.clearTimeout(x.current),h(e)}),[h,n]),onItemLeave:g.useCallback((()=>{n&&(window.clearTimeout(x.current),x.current=window.setTimeout((()=>h("")),150))}),[h,n]),onItemSelect:g.useCallback((e=>{h((t=>n&&t===e?"":e))}),[h,n]),onItemDismiss:g.useCallback((()=>h("")),[h]),onViewportContentChange:g.useCallback(((e,t)=>{M((n=>(n.set(e,t),new Map(n))))}),[]),onViewportContentRemove:g.useCallback((e=>{M((t=>t.has(e)?(t.delete(e),new Map(t)):t))}),[])},/*#__PURE__*/g.createElement(E.Provider,{scope:t},/*#__PURE__*/g.createElement(I,{scope:t,items:p},v)))};export const NavigationMenuList=/*#__PURE__*/g.forwardRef(((e,t)=>{const{__scopeNavigationMenu:n,...o}=e,r=y("NavigationMenuList",n),a=/*#__PURE__*/g.createElement(v.ul,M({"data-orientation":r.orientation},o,{ref:t}));/*#__PURE__*/return g.createElement(v.div,{style:{position:"relative"},ref:r.onIndicatorTrackChange},/*#__PURE__*/g.createElement(E.Slot,{scope:n},r.isRootMenu?/*#__PURE__*/g.createElement(S,{asChild:!0},a):a))}));/*#__PURE__*/const[L,k]=C("NavigationMenuItem");export const NavigationMenuItem=/*#__PURE__*/g.forwardRef(((e,t)=>{const{__scopeNavigationMenu:n,value:o,...r}=e,a=i(),u=o||a||"LEGACY_REACT_AUTO_VALUE",s=g.useRef(null),c=g.useRef(null),l=g.useRef(null),d=g.useRef((()=>{})),f=g.useCallback(((e="start")=>{if(s.current){d.current();const t=z(s.current);t.length&&$("start"===e?t:t.reverse())}}),[]),m=g.useCallback((()=>{if(s.current){const e=z(s.current);e.length&&(d.current=function(e){return e.forEach((e=>{e.dataset.tabindex=e.getAttribute("tabindex")||"",e.setAttribute("tabindex","-1")})),()=>{e.forEach((e=>{const t=e.dataset.tabindex;e.setAttribute("tabindex",t)}))}}(e))}}),[]);/*#__PURE__*/return g.createElement(L,{scope:n,value:u,triggerRef:c,contentRef:s,focusProxyRef:l,onEntryKeyDown:f,onFocusProxyEnter:f,onRootContentClose:m,onContentFocusOutside:m},/*#__PURE__*/g.createElement(v.li,M({},r,{ref:t})))}));/*#__PURE__*/export const NavigationMenuTrigger=/*#__PURE__*/g.forwardRef(((t,n)=>{const{__scopeNavigationMenu:o,disabled:r,...a}=t,i=y("NavigationMenuTrigger",t.__scopeNavigationMenu),u=k("NavigationMenuTrigger",t.__scopeNavigationMenu),s=g.useRef(null),c=l(s,u.triggerRef,n),d=H(i.baseId,u.value),m=W(i.baseId,u.value),p=g.useRef(!1),w=u.value===i.value;/*#__PURE__*/return g.createElement(g.Fragment,null,/*#__PURE__*/g.createElement(E.ItemSlot,{scope:o,value:u.value},/*#__PURE__*/g.createElement(K,{asChild:!0},/*#__PURE__*/g.createElement(v.button,M({id:d,disabled:r,"data-disabled":r?"":void 0,"data-state":B(w),"aria-expanded":w,"aria-controls":m},a,{ref:c,onPointerEnter:f(t.onPointerEnter,(()=>{p.current=!1})),onPointerMove:f(t.onPointerMove,G((()=>{r||p.current||i.onItemOver(u.value)}))),onPointerLeave:f(t.onPointerLeave,G((()=>{r||i.onItemLeave()}))),onClick:f(t.onClick,(()=>{i.onItemSelect(u.value),p.current=w})),onKeyDown:f(t.onKeyDown,(e=>{const t={horizontal:"ArrowDown",vertical:"rtl"===i.dir?"ArrowLeft":"ArrowRight"}[i.orientation];w&&e.key===t&&(u.onEntryKeyDown(),e.preventDefault())}))})))),w&&/*#__PURE__*/g.createElement(g.Fragment,null,/*#__PURE__*/g.createElement(e.Root,{"aria-hidden":!0,tabIndex:0,ref:u.focusProxyRef,onFocus:e=>{const t=u.contentRef.current,n=e.relatedTarget,o=n===s.current,r=null==t?void 0:t.contains(n);!o&&r||u.onFocusProxyEnter(o?"start":"end")}}),i.viewport&&/*#__PURE__*/g.createElement("span",{"aria-owns":m})))}));/*#__PURE__*/export const NavigationMenuLink=/*#__PURE__*/g.forwardRef(((e,t)=>{const{__scopeNavigationMenu:n,active:o,...r}=e;/*#__PURE__*/return g.createElement(K,{asChild:!0},/*#__PURE__*/g.createElement(v.a,M({"data-active":o?"":void 0,"aria-current":o?"page":void 0},r,{ref:t})))}));/*#__PURE__*/export const NavigationMenuIndicator=/*#__PURE__*/g.forwardRef(((e,t)=>{const{forceMount:n,...o}=e,r=y("NavigationMenuIndicator",e.__scopeNavigationMenu),a=Boolean(r.value);return r.indicatorTrack?/*#__PURE__*/p.createPortal(/*#__PURE__*/g.createElement(u,{present:n||a},/*#__PURE__*/g.createElement(V,M({},o,{ref:t}))),r.indicatorTrack):null}));/*#__PURE__*/const V=/*#__PURE__*/g.forwardRef(((e,t)=>{const{__scopeNavigationMenu:n,...o}=e,r=y("NavigationMenuIndicator",n),a=w(n),[i,u]=g.useState(null),[s,c]=g.useState(null),l="horizontal"===r.orientation,d=Boolean(r.value);g.useEffect((()=>{var e;const t=null===(e=a().find((e=>e.value===r.value)))||void 0===e?void 0:e.ref.current;t&&u(t)}),[a,r.value]);const f=()=>{i&&c({size:l?i.offsetWidth:i.offsetHeight,offset:l?i.offsetLeft:i.offsetTop})};return U(i,f),U(r.indicatorTrack,f),s?/*#__PURE__*/g.createElement(v.div,M({"aria-hidden":!0,"data-state":d?"visible":"hidden","data-orientation":r.orientation},o,{ref:t,style:{position:"absolute",...l?{left:0,width:s.size+"px",transform:`translateX(${s.offset}px)`}:{top:0,height:s.size+"px",transform:`translateY(${s.offset}px)`},...o.style}})):null}));export const NavigationMenuContent=/*#__PURE__*/g.forwardRef(((e,t)=>{const{forceMount:n,...o}=e,r=y("NavigationMenuContent",e.__scopeNavigationMenu),a=k("NavigationMenuContent",e.__scopeNavigationMenu),i=l(a.contentRef,t),s=a.value===r.value,c={value:a.value,triggerRef:a.triggerRef,focusProxyRef:a.focusProxyRef,onContentFocusOutside:a.onContentFocusOutside,onRootContentClose:a.onRootContentClose,...o};return r.viewport?/*#__PURE__*/g.createElement(D,M({forceMount:n},c,{ref:i})):/*#__PURE__*/g.createElement(u,{present:n||s},/*#__PURE__*/g.createElement(F,M({"data-state":B(s)},c,{ref:i,onPointerEnter:f(e.onPointerEnter,(()=>{r.onItemOver(a.value)})),onPointerLeave:f(e.onPointerLeave,G(r.onItemLeave)),style:{pointerEvents:!s&&r.isRootMenu?"none":void 0,...c.style}})))}));/*#__PURE__*/const D=/*#__PURE__*/g.forwardRef(((e,t)=>{const o=y("NavigationMenuContent",e.__scopeNavigationMenu),{onViewportContentChange:r,onViewportContentRemove:a}=o;return n((()=>{r(e.value,{ref:t,...e})}),[e,t,r]),n((()=>()=>a(e.value)),[e.value,a]),null})),F=/*#__PURE__*/g.forwardRef(((e,t)=>{const{__scopeNavigationMenu:n,value:o,triggerRef:a,focusProxyRef:i,onRootContentClose:u,onContentFocusOutside:s,...c}=e,d=y("NavigationMenuContent",n),v=g.useRef(null),m=l(v,t),p=H(d.baseId,o),E=W(d.baseId,o),N=w(n),x=g.useRef(null),{onItemDismiss:R}=d;g.useEffect((()=>{const e=v.current;if(d.isRootMenu&&e){const t=()=>{var t;R(),u(),e.contains(document.activeElement)&&(null===(t=a.current)||void 0===t||t.focus())};return e.addEventListener("navigationMenu.contentDismiss",t),()=>e.removeEventListener("navigationMenu.contentDismiss",t)}}),[d.isRootMenu,e.value,a,R,u]);const h=g.useMemo((()=>{const e=N().map((e=>e.value));"rtl"===d.dir&&e.reverse();const t=e.indexOf(d.value),n=e.indexOf(d.previousValue),r=o===d.value,a=n===e.indexOf(o);if(!r&&!a)return x.current;const i=(()=>{if(t!==n){if(r&&-1!==n)return t>n?"from-end":"from-start";if(a&&-1!==t)return t>n?"to-start":"to-end"}return null})();return x.current=i,i}),[d.previousValue,d.value,d.dir,N,o]);/*#__PURE__*/return g.createElement(S,{asChild:!0},/*#__PURE__*/g.createElement(r,M({id:E,"aria-labelledby":p,"data-motion":h,"data-orientation":d.orientation},c,{ref:m,onDismiss:()=>{var e;const t=new Event("navigationMenu.contentDismiss",{bubbles:!0,cancelable:!0});null===(e=v.current)||void 0===e||e.dispatchEvent(t)},onFocusOutside:f(e.onFocusOutside,(e=>{var t;s();const n=e.target;null!==(t=d.rootNavigationMenu)&&void 0!==t&&t.contains(n)&&e.preventDefault()})),onPointerDownOutside:f(e.onPointerDownOutside,(e=>{var t;const n=e.target,o=N().some((e=>{var t;return null===(t=e.ref.current)||void 0===t?void 0:t.contains(n)})),r=d.isRootMenu&&(null===(t=d.viewport)||void 0===t?void 0:t.contains(n));(o||r||!d.isRootMenu)&&e.preventDefault()})),onKeyDown:f(e.onKeyDown,(e=>{const t=e.altKey||e.ctrlKey||e.metaKey;if("Tab"===e.key&&!t){const t=z(e.currentTarget),o=document.activeElement,r=t.findIndex((e=>e===o));var n;if($(e.shiftKey?t.slice(0,r).reverse():t.slice(r+1,t.length)))e.preventDefault();else null===(n=i.current)||void 0===n||n.focus()}}))})))}));export const NavigationMenuViewport=/*#__PURE__*/g.forwardRef(((e,t)=>{const{forceMount:n,...o}=e,r=y("NavigationMenuViewport",e.__scopeNavigationMenu),a=Boolean(r.value);/*#__PURE__*/return g.createElement(u,{present:n||a},/*#__PURE__*/g.createElement(A,M({},o,{ref:t})))}));/*#__PURE__*/const A=/*#__PURE__*/g.forwardRef(((e,t)=>{const{__scopeNavigationMenu:n,children:o,...r}=e,a=y("NavigationMenuViewport",n),i=l(t,a.onViewportChange),s=P("NavigationMenuContent",e.__scopeNavigationMenu),[d,m]=g.useState(null),[p,E]=g.useState(null),w=d?(null==d?void 0:d.width)+"px":void 0,N=d?(null==d?void 0:d.height)+"px":void 0,x=Boolean(a.value),R=x?a.value:a.previousValue;return U(p,(()=>{p&&m({width:p.offsetWidth,height:p.offsetHeight})})),/*#__PURE__*/g.createElement(v.div,M({"data-state":B(x),"data-orientation":a.orientation},r,{ref:i,style:{pointerEvents:!x&&a.isRootMenu?"none":void 0,"--radix-navigation-menu-viewport-width":w,"--radix-navigation-menu-viewport-height":N,...r.style},onPointerEnter:f(e.onPointerEnter,(()=>{a.onItemOver(R)})),onPointerLeave:f(e.onPointerLeave,G(a.onItemLeave))}),Array.from(s.items).map((([e,{ref:t,forceMount:n,...o}])=>{const r=R===e;/*#__PURE__*/return g.createElement(u,{key:e,present:n||r},/*#__PURE__*/g.createElement(F,M({},o,{ref:c(t,(e=>{r&&e&&E(e)}))})))})))})),S=/*#__PURE__*/g.forwardRef(((e,t)=>{const{__scopeNavigationMenu:n,...o}=e,r=y("FocusGroup",n);/*#__PURE__*/return g.createElement(x.Provider,{scope:n},/*#__PURE__*/g.createElement(x.Slot,{scope:n},/*#__PURE__*/g.createElement(v.div,M({dir:r.dir},o,{ref:t}))))})),O=["ArrowRight","ArrowLeft","ArrowUp","ArrowDown"],K=/*#__PURE__*/g.forwardRef(((e,t)=>{const{__scopeNavigationMenu:n,...o}=e,r=R(n),a=y("FocusGroupItem",n);/*#__PURE__*/return g.createElement(x.ItemSlot,{scope:n},/*#__PURE__*/g.createElement(v.button,M({},o,{ref:t,onKeyDown:f(e.onKeyDown,(e=>{if(["Home","End",...O].includes(e.key)){let t=r().map((e=>e.ref.current));if(["rtl"===a.dir?"ArrowRight":"ArrowLeft","ArrowUp","End"].includes(e.key)&&t.reverse(),O.includes(e.key)){const n=t.indexOf(e.currentTarget);t=t.slice(n+1)}setTimeout((()=>$(t))),e.preventDefault()}}))})))}));function z(e){const t=[],n=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:e=>{const t="INPUT"===e.tagName&&"hidden"===e.type;return e.disabled||e.hidden||t?NodeFilter.FILTER_SKIP:e.tabIndex>=0?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP}});for(;n.nextNode();)t.push(n.currentNode);return t}function $(e){const t=document.activeElement;return e.some((e=>e===t||(e.focus(),document.activeElement!==t)))}function U(e,o){const r=t(o);n((()=>{let t=0;if(e){const n=new ResizeObserver((()=>{cancelAnimationFrame(t),t=window.requestAnimationFrame(r)}));return n.observe(e),()=>{window.cancelAnimationFrame(t),n.unobserve(e)}}}),[e,r])}function B(e){return e?"open":"closed"}function H(e,t){return`${e}-trigger-${t}`}function W(e,t){return`${e}-content-${t}`}function G(e){return t=>"mouse"===t.pointerType?e(t):void 0}export const Root=NavigationMenu;export const Sub=NavigationMenuSub;export const List=NavigationMenuList;export const Item=NavigationMenuItem;export const Trigger=NavigationMenuTrigger;export const Link=NavigationMenuLink;export const Indicator=NavigationMenuIndicator;export const Content=NavigationMenuContent;export const Viewport=NavigationMenuViewport;
+import $yHMN2$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
+import {forwardRef as $yHMN2$forwardRef, useState as $yHMN2$useState, createElement as $yHMN2$createElement, useRef as $yHMN2$useRef, useEffect as $yHMN2$useEffect, useCallback as $yHMN2$useCallback, Fragment as $yHMN2$Fragment, useMemo as $yHMN2$useMemo} from "react";
+import $yHMN2$reactdom from "react-dom";
+import {createContextScope as $yHMN2$createContextScope} from "@radix-ui/react-context";
+import {composeEventHandlers as $yHMN2$composeEventHandlers} from "@radix-ui/primitive";
+import {Primitive as $yHMN2$Primitive, dispatchDiscreteCustomEvent as $yHMN2$dispatchDiscreteCustomEvent} from "@radix-ui/react-primitive";
+import {useControllableState as $yHMN2$useControllableState} from "@radix-ui/react-use-controllable-state";
+import {useComposedRefs as $yHMN2$useComposedRefs, composeRefs as $yHMN2$composeRefs} from "@radix-ui/react-compose-refs";
+import {useDirection as $yHMN2$useDirection} from "@radix-ui/react-direction";
+import {Presence as $yHMN2$Presence} from "@radix-ui/react-presence";
+import {useId as $yHMN2$useId} from "@radix-ui/react-id";
+import {createCollection as $yHMN2$createCollection} from "@radix-ui/react-collection";
+import {DismissableLayer as $yHMN2$DismissableLayer} from "@radix-ui/react-dismissable-layer";
+import {usePrevious as $yHMN2$usePrevious} from "@radix-ui/react-use-previous";
+import {useLayoutEffect as $yHMN2$useLayoutEffect} from "@radix-ui/react-use-layout-effect";
+import {useCallbackRef as $yHMN2$useCallbackRef} from "@radix-ui/react-use-callback-ref";
+import {Root as $yHMN2$Root} from "@radix-ui/react-visually-hidden";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* -------------------------------------------------------------------------------------------------
+ * NavigationMenu
+ * -----------------------------------------------------------------------------------------------*/ const $322c88a641701f3b$var$NAVIGATION_MENU_NAME = 'NavigationMenu';
+const [$322c88a641701f3b$var$Collection, $322c88a641701f3b$var$useCollection, $322c88a641701f3b$var$createCollectionScope] = $yHMN2$createCollection($322c88a641701f3b$var$NAVIGATION_MENU_NAME);
+const [$322c88a641701f3b$var$FocusGroupCollection, $322c88a641701f3b$var$useFocusGroupCollection, $322c88a641701f3b$var$createFocusGroupCollectionScope] = $yHMN2$createCollection($322c88a641701f3b$var$NAVIGATION_MENU_NAME);
+const [$322c88a641701f3b$var$createNavigationMenuContext, $322c88a641701f3b$export$fb8ea5af8c9fcdf0] = $yHMN2$createContextScope($322c88a641701f3b$var$NAVIGATION_MENU_NAME, [
+    $322c88a641701f3b$var$createCollectionScope,
+    $322c88a641701f3b$var$createFocusGroupCollectionScope
+]);
+const [$322c88a641701f3b$var$NavigationMenuProviderImpl, $322c88a641701f3b$var$useNavigationMenuContext] = $322c88a641701f3b$var$createNavigationMenuContext($322c88a641701f3b$var$NAVIGATION_MENU_NAME);
+const [$322c88a641701f3b$var$ViewportContentProvider, $322c88a641701f3b$var$useViewportContentContext] = $322c88a641701f3b$var$createNavigationMenuContext($322c88a641701f3b$var$NAVIGATION_MENU_NAME);
+const $322c88a641701f3b$export$5b2278cf1e8bcae2 = /*#__PURE__*/ $yHMN2$forwardRef((props, forwardedRef)=>{
+    const { __scopeNavigationMenu: __scopeNavigationMenu , value: value , onValueChange: onValueChange , defaultValue: defaultValue , orientation: orientation = 'horizontal' , dir: dir , ...NavigationMenuProps } = props;
+    const [navigationMenu, setNavigationMenu] = $yHMN2$useState(null);
+    const composedRef = $yHMN2$useComposedRefs(forwardedRef, (node)=>setNavigationMenu(node)
+    );
+    const direction = $yHMN2$useDirection(dir);
+    return /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$NavigationMenuProvider, {
+        scope: __scopeNavigationMenu,
+        isRootMenu: true,
+        value: value,
+        onValueChange: onValueChange,
+        defaultValue: defaultValue,
+        dir: direction,
+        orientation: orientation,
+        rootNavigationMenu: navigationMenu
+    }, /*#__PURE__*/ $yHMN2$createElement($yHMN2$Primitive.nav, $yHMN2$babelruntimehelpersesmextends({
+        "aria-label": "Main",
+        "data-orientation": orientation,
+        dir: direction
+    }, NavigationMenuProps, {
+        ref: composedRef
+    })));
+});
+/*#__PURE__*/ Object.assign($322c88a641701f3b$export$5b2278cf1e8bcae2, {
+    displayName: $322c88a641701f3b$var$NAVIGATION_MENU_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * NavigationMenuSub
+ * -----------------------------------------------------------------------------------------------*/ const $322c88a641701f3b$var$SUB_NAME = 'NavigationMenuSub';
+const $322c88a641701f3b$export$5958edd6c4ee7c79 = /*#__PURE__*/ $yHMN2$forwardRef((props, forwardedRef)=>{
+    const { __scopeNavigationMenu: __scopeNavigationMenu , value: value , onValueChange: onValueChange , defaultValue: defaultValue , orientation: orientation = 'horizontal' , ...subProps } = props;
+    const context = $322c88a641701f3b$var$useNavigationMenuContext($322c88a641701f3b$var$SUB_NAME, __scopeNavigationMenu);
+    return /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$NavigationMenuProvider, {
+        scope: __scopeNavigationMenu,
+        isRootMenu: false,
+        value: value,
+        onValueChange: onValueChange,
+        defaultValue: defaultValue,
+        dir: context.dir,
+        orientation: orientation,
+        rootNavigationMenu: context.rootNavigationMenu
+    }, /*#__PURE__*/ $yHMN2$createElement($yHMN2$Primitive.div, $yHMN2$babelruntimehelpersesmextends({
+        "data-orientation": orientation
+    }, subProps, {
+        ref: forwardedRef
+    })));
+});
+/*#__PURE__*/ Object.assign($322c88a641701f3b$export$5958edd6c4ee7c79, {
+    displayName: $322c88a641701f3b$var$SUB_NAME
+});
+/* -----------------------------------------------------------------------------------------------*/ const $322c88a641701f3b$var$NavigationMenuProvider = (props)=>{
+    const { scope: scope , isRootMenu: isRootMenu , rootNavigationMenu: rootNavigationMenu , value: valueProp , onValueChange: onValueChange , defaultValue: defaultValue , dir: dir , orientation: orientation , children: children  } = props;
+    const [viewport, setViewport] = $yHMN2$useState(null);
+    const [viewportContent, setViewportContent] = $yHMN2$useState(new Map());
+    const [indicatorTrack, setIndicatorTrack] = $yHMN2$useState(null);
+    const closeTimerRef = $yHMN2$useRef(0);
+    const [value = '', setValue] = $yHMN2$useControllableState({
+        prop: valueProp,
+        onChange: onValueChange,
+        defaultProp: defaultValue
+    });
+    $yHMN2$useEffect(()=>{
+        return ()=>window.clearTimeout(closeTimerRef.current)
+        ;
+    }, [
+        closeTimerRef
+    ]);
+    return /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$NavigationMenuProviderImpl, {
+        scope: scope,
+        isRootMenu: isRootMenu,
+        rootNavigationMenu: rootNavigationMenu,
+        value: value,
+        previousValue: $yHMN2$usePrevious(value),
+        baseId: $yHMN2$useId(),
+        dir: dir,
+        orientation: orientation,
+        viewport: viewport,
+        onViewportChange: setViewport,
+        indicatorTrack: indicatorTrack,
+        onIndicatorTrackChange: setIndicatorTrack,
+        onItemOver: $yHMN2$useCallback((itemValue)=>{
+            if (isRootMenu) window.clearTimeout(closeTimerRef.current);
+            setValue(itemValue);
+        }, [
+            setValue,
+            isRootMenu
+        ]),
+        onItemLeave: $yHMN2$useCallback(()=>{
+            if (isRootMenu) {
+                window.clearTimeout(closeTimerRef.current);
+                closeTimerRef.current = window.setTimeout(()=>setValue('')
+                , 150);
+            }
+        }, [
+            setValue,
+            isRootMenu
+        ]),
+        onItemSelect: $yHMN2$useCallback((itemValue)=>{
+            setValue((prevValue)=>{
+                return isRootMenu ? prevValue === itemValue ? '' : itemValue : itemValue;
+            });
+        }, [
+            setValue,
+            isRootMenu
+        ]),
+        onItemDismiss: $yHMN2$useCallback(()=>setValue('')
+        , [
+            setValue
+        ]),
+        onViewportContentChange: $yHMN2$useCallback((contentValue, contentData)=>{
+            setViewportContent((prevContent)=>{
+                prevContent.set(contentValue, contentData);
+                return new Map(prevContent);
+            });
+        }, []),
+        onViewportContentRemove: $yHMN2$useCallback((contentValue)=>{
+            setViewportContent((prevContent)=>{
+                if (!prevContent.has(contentValue)) return prevContent;
+                prevContent.delete(contentValue);
+                return new Map(prevContent);
+            });
+        }, [])
+    }, /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$Collection.Provider, {
+        scope: scope
+    }, /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$ViewportContentProvider, {
+        scope: scope,
+        items: viewportContent
+    }, children)));
+};
+/* -------------------------------------------------------------------------------------------------
+ * NavigationMenuList
+ * -----------------------------------------------------------------------------------------------*/ const $322c88a641701f3b$var$LIST_NAME = 'NavigationMenuList';
+const $322c88a641701f3b$export$c361068a95fd2286 = /*#__PURE__*/ $yHMN2$forwardRef((props, forwardedRef)=>{
+    const { __scopeNavigationMenu: __scopeNavigationMenu , ...listProps } = props;
+    const context = $322c88a641701f3b$var$useNavigationMenuContext($322c88a641701f3b$var$LIST_NAME, __scopeNavigationMenu);
+    const list = /*#__PURE__*/ $yHMN2$createElement($yHMN2$Primitive.ul, $yHMN2$babelruntimehelpersesmextends({
+        "data-orientation": context.orientation
+    }, listProps, {
+        ref: forwardedRef
+    }));
+    return /*#__PURE__*/ $yHMN2$createElement($yHMN2$Primitive.div, {
+        style: {
+            position: 'relative'
+        },
+        ref: context.onIndicatorTrackChange
+    }, /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$Collection.Slot, {
+        scope: __scopeNavigationMenu
+    }, context.isRootMenu ? /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$FocusGroup, {
+        asChild: true
+    }, list) : list));
+});
+/*#__PURE__*/ Object.assign($322c88a641701f3b$export$c361068a95fd2286, {
+    displayName: $322c88a641701f3b$var$LIST_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * NavigationMenuItem
+ * -----------------------------------------------------------------------------------------------*/ const $322c88a641701f3b$var$ITEM_NAME = 'NavigationMenuItem';
+const [$322c88a641701f3b$var$NavigationMenuItemContextProvider, $322c88a641701f3b$var$useNavigationMenuItemContext] = $322c88a641701f3b$var$createNavigationMenuContext($322c88a641701f3b$var$ITEM_NAME);
+const $322c88a641701f3b$export$ffdbb83a2de845c2 = /*#__PURE__*/ $yHMN2$forwardRef((props, forwardedRef)=>{
+    const { __scopeNavigationMenu: __scopeNavigationMenu , value: valueProp , ...itemProps } = props;
+    const autoValue = $yHMN2$useId(); // We need to provide an initial deterministic value as `useId` will return
+    // empty string on the first render and we don't want to match our internal "closed" value.
+    const value = valueProp || autoValue || 'LEGACY_REACT_AUTO_VALUE';
+    const contentRef = $yHMN2$useRef(null);
+    const triggerRef = $yHMN2$useRef(null);
+    const focusProxyRef = $yHMN2$useRef(null);
+    const restoreContentTabOrderRef = $yHMN2$useRef(()=>{});
+    const handleContentEntry = $yHMN2$useCallback((side = 'start')=>{
+        if (contentRef.current) {
+            restoreContentTabOrderRef.current();
+            const candidates = $322c88a641701f3b$var$getTabbableCandidates(contentRef.current);
+            if (candidates.length) $322c88a641701f3b$var$focusFirst(side === 'start' ? candidates : candidates.reverse());
+        }
+    }, []);
+    const handleContentExit = $yHMN2$useCallback(()=>{
+        if (contentRef.current) {
+            const candidates = $322c88a641701f3b$var$getTabbableCandidates(contentRef.current);
+            if (candidates.length) restoreContentTabOrderRef.current = $322c88a641701f3b$var$removeFromTabOrder(candidates);
+        }
+    }, []);
+    return /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$NavigationMenuItemContextProvider, {
+        scope: __scopeNavigationMenu,
+        value: value,
+        triggerRef: triggerRef,
+        contentRef: contentRef,
+        focusProxyRef: focusProxyRef,
+        onEntryKeyDown: handleContentEntry,
+        onFocusProxyEnter: handleContentEntry,
+        onRootContentClose: handleContentExit,
+        onContentFocusOutside: handleContentExit
+    }, /*#__PURE__*/ $yHMN2$createElement($yHMN2$Primitive.li, $yHMN2$babelruntimehelpersesmextends({}, itemProps, {
+        ref: forwardedRef
+    })));
+});
+/*#__PURE__*/ Object.assign($322c88a641701f3b$export$ffdbb83a2de845c2, {
+    displayName: $322c88a641701f3b$var$ITEM_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * NavigationMenuTrigger
+ * -----------------------------------------------------------------------------------------------*/ const $322c88a641701f3b$var$TRIGGER_NAME = 'NavigationMenuTrigger';
+const $322c88a641701f3b$export$37fe8002734d8f2 = /*#__PURE__*/ $yHMN2$forwardRef((props, forwardedRef)=>{
+    const { __scopeNavigationMenu: __scopeNavigationMenu , disabled: disabled , ...triggerProps } = props;
+    const context = $322c88a641701f3b$var$useNavigationMenuContext($322c88a641701f3b$var$TRIGGER_NAME, props.__scopeNavigationMenu);
+    const itemContext = $322c88a641701f3b$var$useNavigationMenuItemContext($322c88a641701f3b$var$TRIGGER_NAME, props.__scopeNavigationMenu);
+    const ref = $yHMN2$useRef(null);
+    const composedRefs = $yHMN2$useComposedRefs(ref, itemContext.triggerRef, forwardedRef);
+    const triggerId = $322c88a641701f3b$var$makeTriggerId(context.baseId, itemContext.value);
+    const contentId = $322c88a641701f3b$var$makeContentId(context.baseId, itemContext.value);
+    const wasClickCloseRef = $yHMN2$useRef(false);
+    const open = itemContext.value === context.value;
+    return /*#__PURE__*/ $yHMN2$createElement($yHMN2$Fragment, null, /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$Collection.ItemSlot, {
+        scope: __scopeNavigationMenu,
+        value: itemContext.value
+    }, /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$FocusGroupItem, {
+        asChild: true
+    }, /*#__PURE__*/ $yHMN2$createElement($yHMN2$Primitive.button, $yHMN2$babelruntimehelpersesmextends({
+        id: triggerId,
+        disabled: disabled,
+        "data-disabled": disabled ? '' : undefined,
+        "data-state": $322c88a641701f3b$var$getOpenState(open),
+        "aria-expanded": open,
+        "aria-controls": contentId
+    }, triggerProps, {
+        ref: composedRefs,
+        onPointerEnter: $yHMN2$composeEventHandlers(props.onPointerEnter, ()=>{
+            wasClickCloseRef.current = false;
+        }),
+        onPointerMove: $yHMN2$composeEventHandlers(props.onPointerMove, $322c88a641701f3b$var$whenMouse(()=>{
+            if (disabled || wasClickCloseRef.current) return;
+            context.onItemOver(itemContext.value);
+        })),
+        onPointerLeave: $yHMN2$composeEventHandlers(props.onPointerLeave, $322c88a641701f3b$var$whenMouse(()=>{
+            if (disabled) return;
+            context.onItemLeave();
+        })),
+        onClick: $yHMN2$composeEventHandlers(props.onClick, ()=>{
+            context.onItemSelect(itemContext.value);
+            wasClickCloseRef.current = open;
+        }),
+        onKeyDown: $yHMN2$composeEventHandlers(props.onKeyDown, (event)=>{
+            const verticalEntryKey = context.dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+            const entryKey = {
+                horizontal: 'ArrowDown',
+                vertical: verticalEntryKey
+            }[context.orientation];
+            if (open && event.key === entryKey) {
+                itemContext.onEntryKeyDown(); // Prevent FocusGroupItem from handling the event
+                event.preventDefault();
+            }
+        })
+    })))), open && /*#__PURE__*/ $yHMN2$createElement($yHMN2$Fragment, null, /*#__PURE__*/ $yHMN2$createElement($yHMN2$Root, {
+        "aria-hidden": true,
+        tabIndex: 0,
+        ref: itemContext.focusProxyRef,
+        onFocus: (event)=>{
+            const content = itemContext.contentRef.current;
+            const prevFocusedElement = event.relatedTarget;
+            const wasTriggerFocused = prevFocusedElement === ref.current;
+            const wasFocusFromContent = content === null || content === void 0 ? void 0 : content.contains(prevFocusedElement);
+            if (wasTriggerFocused || !wasFocusFromContent) itemContext.onFocusProxyEnter(wasTriggerFocused ? 'start' : 'end');
+        }
+    }), context.viewport && /*#__PURE__*/ $yHMN2$createElement("span", {
+        "aria-owns": contentId
+    })));
+});
+/*#__PURE__*/ Object.assign($322c88a641701f3b$export$37fe8002734d8f2, {
+    displayName: $322c88a641701f3b$var$TRIGGER_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * NavigationMenuLink
+ * -----------------------------------------------------------------------------------------------*/ const $322c88a641701f3b$var$LINK_NAME = 'NavigationMenuLink';
+const $322c88a641701f3b$var$LINK_SELECT = 'navigationMenu.linkSelect';
+const $322c88a641701f3b$export$6893bf21536567da = /*#__PURE__*/ $yHMN2$forwardRef((props, forwardedRef)=>{
+    const { __scopeNavigationMenu: __scopeNavigationMenu , active: active , onSelect: onSelect , ...linkProps } = props;
+    return /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$FocusGroupItem, {
+        asChild: true
+    }, /*#__PURE__*/ $yHMN2$createElement($yHMN2$Primitive.a, $yHMN2$babelruntimehelpersesmextends({
+        "data-active": active ? '' : undefined,
+        "aria-current": active ? 'page' : undefined
+    }, linkProps, {
+        ref: forwardedRef,
+        onClick: $yHMN2$composeEventHandlers(props.onClick, (event1)=>{
+            const target = event1.target;
+            const linkSelectEvent = new CustomEvent($322c88a641701f3b$var$LINK_SELECT, {
+                bubbles: true,
+                cancelable: true
+            });
+            target.addEventListener($322c88a641701f3b$var$LINK_SELECT, (event)=>onSelect === null || onSelect === void 0 ? void 0 : onSelect(event)
+            , {
+                once: true
+            });
+            $yHMN2$dispatchDiscreteCustomEvent(target, linkSelectEvent);
+            if (!linkSelectEvent.defaultPrevented) {
+                const rootContentDismissEvent = new CustomEvent($322c88a641701f3b$var$ROOT_CONTENT_DISMISS, {
+                    bubbles: true,
+                    cancelable: true
+                });
+                $yHMN2$dispatchDiscreteCustomEvent(target, rootContentDismissEvent);
+            }
+        }, {
+            checkForDefaultPrevented: false
+        })
+    })));
+});
+/*#__PURE__*/ Object.assign($322c88a641701f3b$export$6893bf21536567da, {
+    displayName: $322c88a641701f3b$var$LINK_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * NavigationMenuIndicator
+ * -----------------------------------------------------------------------------------------------*/ const $322c88a641701f3b$var$INDICATOR_NAME = 'NavigationMenuIndicator';
+const $322c88a641701f3b$export$8ddb526647c0d8fb = /*#__PURE__*/ $yHMN2$forwardRef((props, forwardedRef)=>{
+    const { forceMount: forceMount , ...indicatorProps } = props;
+    const context = $322c88a641701f3b$var$useNavigationMenuContext($322c88a641701f3b$var$INDICATOR_NAME, props.__scopeNavigationMenu);
+    const isVisible = Boolean(context.value);
+    return context.indicatorTrack ? /*#__PURE__*/ $yHMN2$reactdom.createPortal(/*#__PURE__*/ $yHMN2$createElement($yHMN2$Presence, {
+        present: forceMount || isVisible
+    }, /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$NavigationMenuIndicatorImpl, $yHMN2$babelruntimehelpersesmextends({}, indicatorProps, {
+        ref: forwardedRef
+    }))), context.indicatorTrack) : null;
+});
+/*#__PURE__*/ Object.assign($322c88a641701f3b$export$8ddb526647c0d8fb, {
+    displayName: $322c88a641701f3b$var$INDICATOR_NAME
+});
+const $322c88a641701f3b$var$NavigationMenuIndicatorImpl = /*#__PURE__*/ $yHMN2$forwardRef((props, forwardedRef)=>{
+    const { __scopeNavigationMenu: __scopeNavigationMenu , ...indicatorProps } = props;
+    const context = $322c88a641701f3b$var$useNavigationMenuContext($322c88a641701f3b$var$INDICATOR_NAME, __scopeNavigationMenu);
+    const getItems = $322c88a641701f3b$var$useCollection(__scopeNavigationMenu);
+    const [activeTrigger, setActiveTrigger] = $yHMN2$useState(null);
+    const [position, setPosition] = $yHMN2$useState(null);
+    const isHorizontal = context.orientation === 'horizontal';
+    const isVisible = Boolean(context.value);
+    $yHMN2$useEffect(()=>{
+        var _items$find;
+        const items = getItems();
+        const triggerNode = (_items$find = items.find((item)=>item.value === context.value
+        )) === null || _items$find === void 0 ? void 0 : _items$find.ref.current;
+        if (triggerNode) setActiveTrigger(triggerNode);
+    }, [
+        getItems,
+        context.value
+    ]);
+    /**
+   * Update position when the indicator or parent track size changes
+   */ const handlePositionChange = ()=>{
+        if (activeTrigger) setPosition({
+            size: isHorizontal ? activeTrigger.offsetWidth : activeTrigger.offsetHeight,
+            offset: isHorizontal ? activeTrigger.offsetLeft : activeTrigger.offsetTop
+        });
+    };
+    $322c88a641701f3b$var$useResizeObserver(activeTrigger, handlePositionChange);
+    $322c88a641701f3b$var$useResizeObserver(context.indicatorTrack, handlePositionChange); // We need to wait for the indicator position to be available before rendering to
+    // snap immediately into position rather than transitioning from initial
+    return position ? /*#__PURE__*/ $yHMN2$createElement($yHMN2$Primitive.div, $yHMN2$babelruntimehelpersesmextends({
+        "aria-hidden": true,
+        "data-state": isVisible ? 'visible' : 'hidden',
+        "data-orientation": context.orientation
+    }, indicatorProps, {
+        ref: forwardedRef,
+        style: {
+            position: 'absolute',
+            ...isHorizontal ? {
+                left: 0,
+                width: position.size + 'px',
+                transform: `translateX(${position.offset}px)`
+            } : {
+                top: 0,
+                height: position.size + 'px',
+                transform: `translateY(${position.offset}px)`
+            },
+            ...indicatorProps.style
+        }
+    })) : null;
+});
+/* -------------------------------------------------------------------------------------------------
+ * NavigationMenuContent
+ * -----------------------------------------------------------------------------------------------*/ const $322c88a641701f3b$var$CONTENT_NAME = 'NavigationMenuContent';
+const $322c88a641701f3b$export$38e00e996c2f93f7 = /*#__PURE__*/ $yHMN2$forwardRef((props, forwardedRef)=>{
+    const { forceMount: forceMount , ...contentProps } = props;
+    const context = $322c88a641701f3b$var$useNavigationMenuContext($322c88a641701f3b$var$CONTENT_NAME, props.__scopeNavigationMenu);
+    const itemContext = $322c88a641701f3b$var$useNavigationMenuItemContext($322c88a641701f3b$var$CONTENT_NAME, props.__scopeNavigationMenu);
+    const composedRefs = $yHMN2$useComposedRefs(itemContext.contentRef, forwardedRef);
+    const open = itemContext.value === context.value;
+    const commonProps = {
+        value: itemContext.value,
+        triggerRef: itemContext.triggerRef,
+        focusProxyRef: itemContext.focusProxyRef,
+        onContentFocusOutside: itemContext.onContentFocusOutside,
+        onRootContentClose: itemContext.onRootContentClose,
+        ...contentProps
+    };
+    return !context.viewport ? /*#__PURE__*/ $yHMN2$createElement($yHMN2$Presence, {
+        present: forceMount || open
+    }, /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$NavigationMenuContentImpl, $yHMN2$babelruntimehelpersesmextends({
+        "data-state": $322c88a641701f3b$var$getOpenState(open)
+    }, commonProps, {
+        ref: composedRefs,
+        onPointerEnter: $yHMN2$composeEventHandlers(props.onPointerEnter, ()=>{
+            context.onItemOver(itemContext.value);
+        }),
+        onPointerLeave: $yHMN2$composeEventHandlers(props.onPointerLeave, $322c88a641701f3b$var$whenMouse(context.onItemLeave)),
+        style: {
+            // Prevent interaction when animating out
+            pointerEvents: !open && context.isRootMenu ? 'none' : undefined,
+            ...commonProps.style
+        }
+    }))) : /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$ViewportContentMounter, $yHMN2$babelruntimehelpersesmextends({
+        forceMount: forceMount
+    }, commonProps, {
+        ref: composedRefs
+    }));
+});
+/*#__PURE__*/ Object.assign($322c88a641701f3b$export$38e00e996c2f93f7, {
+    displayName: $322c88a641701f3b$var$CONTENT_NAME
+});
+/* -----------------------------------------------------------------------------------------------*/ const $322c88a641701f3b$var$ViewportContentMounter = /*#__PURE__*/ $yHMN2$forwardRef((props, forwardedRef)=>{
+    const context = $322c88a641701f3b$var$useNavigationMenuContext($322c88a641701f3b$var$CONTENT_NAME, props.__scopeNavigationMenu);
+    const { onViewportContentChange: onViewportContentChange , onViewportContentRemove: onViewportContentRemove  } = context;
+    $yHMN2$useLayoutEffect(()=>{
+        onViewportContentChange(props.value, {
+            ref: forwardedRef,
+            ...props
+        });
+    }, [
+        props,
+        forwardedRef,
+        onViewportContentChange
+    ]);
+    $yHMN2$useLayoutEffect(()=>{
+        return ()=>onViewportContentRemove(props.value)
+        ;
+    }, [
+        props.value,
+        onViewportContentRemove
+    ]); // Content is proxied into the viewport
+    return null;
+});
+/* -----------------------------------------------------------------------------------------------*/ const $322c88a641701f3b$var$ROOT_CONTENT_DISMISS = 'navigationMenu.rootContentDismiss';
+const $322c88a641701f3b$var$NavigationMenuContentImpl = /*#__PURE__*/ $yHMN2$forwardRef((props, forwardedRef)=>{
+    const { __scopeNavigationMenu: __scopeNavigationMenu , value: value , triggerRef: triggerRef , focusProxyRef: focusProxyRef , onRootContentClose: onRootContentClose , onContentFocusOutside: onContentFocusOutside , ...contentProps } = props;
+    const context = $322c88a641701f3b$var$useNavigationMenuContext($322c88a641701f3b$var$CONTENT_NAME, __scopeNavigationMenu);
+    const ref = $yHMN2$useRef(null);
+    const composedRefs = $yHMN2$useComposedRefs(ref, forwardedRef);
+    const triggerId = $322c88a641701f3b$var$makeTriggerId(context.baseId, value);
+    const contentId = $322c88a641701f3b$var$makeContentId(context.baseId, value);
+    const getItems = $322c88a641701f3b$var$useCollection(__scopeNavigationMenu);
+    const prevMotionAttributeRef = $yHMN2$useRef(null);
+    const { onItemDismiss: onItemDismiss  } = context;
+    $yHMN2$useEffect(()=>{
+        const content = ref.current; // Bubble dismiss to the root content node and focus its trigger
+        if (context.isRootMenu && content) {
+            const handleClose = ()=>{
+                var _triggerRef$current;
+                onItemDismiss();
+                onRootContentClose();
+                if (content.contains(document.activeElement)) (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
+            };
+            content.addEventListener($322c88a641701f3b$var$ROOT_CONTENT_DISMISS, handleClose);
+            return ()=>content.removeEventListener($322c88a641701f3b$var$ROOT_CONTENT_DISMISS, handleClose)
+            ;
+        }
+    }, [
+        context.isRootMenu,
+        props.value,
+        triggerRef,
+        onItemDismiss,
+        onRootContentClose
+    ]);
+    const motionAttribute = $yHMN2$useMemo(()=>{
+        const items = getItems();
+        const values = items.map((item)=>item.value
+        );
+        if (context.dir === 'rtl') values.reverse();
+        const index = values.indexOf(context.value);
+        const prevIndex = values.indexOf(context.previousValue);
+        const isSelected = value === context.value;
+        const wasSelected = prevIndex === values.indexOf(value); // We only want to update selected and the last selected content
+        // this avoids animations being interrupted outside of that range
+        if (!isSelected && !wasSelected) return prevMotionAttributeRef.current;
+        const attribute = (()=>{
+            // Don't provide a direction on the initial open
+            if (index !== prevIndex) {
+                // If we're moving to this item from another
+                if (isSelected && prevIndex !== -1) return index > prevIndex ? 'from-end' : 'from-start'; // If we're leaving this item for another
+                if (wasSelected && index !== -1) return index > prevIndex ? 'to-start' : 'to-end';
+            } // Otherwise we're entering from closed or leaving the list
+            // entirely and should not animate in any direction
+            return null;
+        })();
+        prevMotionAttributeRef.current = attribute;
+        return attribute;
+    }, [
+        context.previousValue,
+        context.value,
+        context.dir,
+        getItems,
+        value
+    ]);
+    return /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$FocusGroup, {
+        asChild: true
+    }, /*#__PURE__*/ $yHMN2$createElement($yHMN2$DismissableLayer, $yHMN2$babelruntimehelpersesmextends({
+        id: contentId,
+        "aria-labelledby": triggerId,
+        "data-motion": motionAttribute,
+        "data-orientation": context.orientation
+    }, contentProps, {
+        ref: composedRefs,
+        onDismiss: ()=>{
+            var _ref$current;
+            const rootContentDismissEvent = new Event($322c88a641701f3b$var$ROOT_CONTENT_DISMISS, {
+                bubbles: true,
+                cancelable: true
+            });
+            (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.dispatchEvent(rootContentDismissEvent);
+        },
+        onFocusOutside: $yHMN2$composeEventHandlers(props.onFocusOutside, (event)=>{
+            var _context$rootNavigati;
+            onContentFocusOutside();
+            const target = event.target; // Only dismiss content when focus moves outside of the menu
+            if ((_context$rootNavigati = context.rootNavigationMenu) !== null && _context$rootNavigati !== void 0 && _context$rootNavigati.contains(target)) event.preventDefault();
+        }),
+        onPointerDownOutside: $yHMN2$composeEventHandlers(props.onPointerDownOutside, (event)=>{
+            var _context$viewport;
+            const target = event.target;
+            const isTrigger = getItems().some((item)=>{
+                var _item$ref$current;
+                return (_item$ref$current = item.ref.current) === null || _item$ref$current === void 0 ? void 0 : _item$ref$current.contains(target);
+            });
+            const isRootViewport = context.isRootMenu && ((_context$viewport = context.viewport) === null || _context$viewport === void 0 ? void 0 : _context$viewport.contains(target));
+            if (isTrigger || isRootViewport || !context.isRootMenu) event.preventDefault();
+        }),
+        onKeyDown: $yHMN2$composeEventHandlers(props.onKeyDown, (event)=>{
+            const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
+            const isTabKey = event.key === 'Tab' && !isMetaKey;
+            if (isTabKey) {
+                const candidates = $322c88a641701f3b$var$getTabbableCandidates(event.currentTarget);
+                const focusedElement = document.activeElement;
+                const index = candidates.findIndex((candidate)=>candidate === focusedElement
+                );
+                const isMovingBackwards = event.shiftKey;
+                const nextCandidates = isMovingBackwards ? candidates.slice(0, index).reverse() : candidates.slice(index + 1, candidates.length);
+                if ($322c88a641701f3b$var$focusFirst(nextCandidates)) // prevent browser tab keydown because we've handled focus
+                event.preventDefault();
+                else {
+                    var _focusProxyRef$curren;
+                    // If we can't focus that means we're at the edges
+                    // so focus the proxy and let browser handle
+                    // tab/shift+tab keypress on the proxy instead
+                    (_focusProxyRef$curren = focusProxyRef.current) === null || _focusProxyRef$curren === void 0 || _focusProxyRef$curren.focus();
+                }
+            }
+        })
+    })));
+});
+/* -------------------------------------------------------------------------------------------------
+ * NavigationMenuViewport
+ * -----------------------------------------------------------------------------------------------*/ const $322c88a641701f3b$var$VIEWPORT_NAME = 'NavigationMenuViewport';
+const $322c88a641701f3b$export$ee880b97cc6d44a5 = /*#__PURE__*/ $yHMN2$forwardRef((props, forwardedRef)=>{
+    const { forceMount: forceMount , ...viewportProps } = props;
+    const context = $322c88a641701f3b$var$useNavigationMenuContext($322c88a641701f3b$var$VIEWPORT_NAME, props.__scopeNavigationMenu);
+    const open = Boolean(context.value);
+    return /*#__PURE__*/ $yHMN2$createElement($yHMN2$Presence, {
+        present: forceMount || open
+    }, /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$NavigationMenuViewportImpl, $yHMN2$babelruntimehelpersesmextends({}, viewportProps, {
+        ref: forwardedRef
+    })));
+});
+/*#__PURE__*/ Object.assign($322c88a641701f3b$export$ee880b97cc6d44a5, {
+    displayName: $322c88a641701f3b$var$VIEWPORT_NAME
+});
+/* -----------------------------------------------------------------------------------------------*/ const $322c88a641701f3b$var$NavigationMenuViewportImpl = /*#__PURE__*/ $yHMN2$forwardRef((props1, forwardedRef)=>{
+    const { __scopeNavigationMenu: __scopeNavigationMenu , children: children , ...viewportImplProps } = props1;
+    const context = $322c88a641701f3b$var$useNavigationMenuContext($322c88a641701f3b$var$VIEWPORT_NAME, __scopeNavigationMenu);
+    const composedRefs = $yHMN2$useComposedRefs(forwardedRef, context.onViewportChange);
+    const viewportContentContext = $322c88a641701f3b$var$useViewportContentContext($322c88a641701f3b$var$CONTENT_NAME, props1.__scopeNavigationMenu);
+    const [size, setSize] = $yHMN2$useState(null);
+    const [content, setContent] = $yHMN2$useState(null);
+    const viewportWidth = size ? (size === null || size === void 0 ? void 0 : size.width) + 'px' : undefined;
+    const viewportHeight = size ? (size === null || size === void 0 ? void 0 : size.height) + 'px' : undefined;
+    const open = Boolean(context.value); // We persist the last active content value as the viewport may be animating out
+    // and we want the content to remain mounted for the lifecycle of the viewport.
+    const activeContentValue = open ? context.value : context.previousValue;
+    /**
+   * Update viewport size to match the active content node.
+   * We prefer offset dimensions over `getBoundingClientRect` as the latter respects CSS transform.
+   * For example, if content animates in from `scale(0.5)` the dimensions would be anything
+   * from `0.5` to `1` of the intended size.
+   */ const handleSizeChange = ()=>{
+        if (content) setSize({
+            width: content.offsetWidth,
+            height: content.offsetHeight
+        });
+    };
+    $322c88a641701f3b$var$useResizeObserver(content, handleSizeChange);
+    return /*#__PURE__*/ $yHMN2$createElement($yHMN2$Primitive.div, $yHMN2$babelruntimehelpersesmextends({
+        "data-state": $322c88a641701f3b$var$getOpenState(open),
+        "data-orientation": context.orientation
+    }, viewportImplProps, {
+        ref: composedRefs,
+        style: {
+            // Prevent interaction when animating out
+            pointerEvents: !open && context.isRootMenu ? 'none' : undefined,
+            ['--radix-navigation-menu-viewport-width']: viewportWidth,
+            ['--radix-navigation-menu-viewport-height']: viewportHeight,
+            ...viewportImplProps.style
+        },
+        onPointerEnter: $yHMN2$composeEventHandlers(props1.onPointerEnter, ()=>{
+            context.onItemOver(activeContentValue);
+        }),
+        onPointerLeave: $yHMN2$composeEventHandlers(props1.onPointerLeave, $322c88a641701f3b$var$whenMouse(context.onItemLeave))
+    }), Array.from(viewportContentContext.items).map(([value, { ref: ref , forceMount: forceMount , ...props }])=>{
+        const isActive = activeContentValue === value;
+        return /*#__PURE__*/ $yHMN2$createElement($yHMN2$Presence, {
+            key: value,
+            present: forceMount || isActive
+        }, /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$NavigationMenuContentImpl, $yHMN2$babelruntimehelpersesmextends({}, props, {
+            ref: $yHMN2$composeRefs(ref, (node)=>{
+                // We only want to update the stored node when another is available
+                // as we need to smoothly transition between them.
+                if (isActive && node) setContent(node);
+            })
+        })));
+    }));
+});
+/* -----------------------------------------------------------------------------------------------*/ const $322c88a641701f3b$var$FOCUS_GROUP_NAME = 'FocusGroup';
+const $322c88a641701f3b$var$FocusGroup = /*#__PURE__*/ $yHMN2$forwardRef((props, forwardedRef)=>{
+    const { __scopeNavigationMenu: __scopeNavigationMenu , ...groupProps } = props;
+    const context = $322c88a641701f3b$var$useNavigationMenuContext($322c88a641701f3b$var$FOCUS_GROUP_NAME, __scopeNavigationMenu);
+    return /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$FocusGroupCollection.Provider, {
+        scope: __scopeNavigationMenu
+    }, /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$FocusGroupCollection.Slot, {
+        scope: __scopeNavigationMenu
+    }, /*#__PURE__*/ $yHMN2$createElement($yHMN2$Primitive.div, $yHMN2$babelruntimehelpersesmextends({
+        dir: context.dir
+    }, groupProps, {
+        ref: forwardedRef
+    }))));
+});
+/* -----------------------------------------------------------------------------------------------*/ const $322c88a641701f3b$var$ARROW_KEYS = [
+    'ArrowRight',
+    'ArrowLeft',
+    'ArrowUp',
+    'ArrowDown'
+];
+const $322c88a641701f3b$var$FOCUS_GROUP_ITEM_NAME = 'FocusGroupItem';
+const $322c88a641701f3b$var$FocusGroupItem = /*#__PURE__*/ $yHMN2$forwardRef((props, forwardedRef)=>{
+    const { __scopeNavigationMenu: __scopeNavigationMenu , ...groupProps } = props;
+    const getItems = $322c88a641701f3b$var$useFocusGroupCollection(__scopeNavigationMenu);
+    const context = $322c88a641701f3b$var$useNavigationMenuContext($322c88a641701f3b$var$FOCUS_GROUP_ITEM_NAME, __scopeNavigationMenu);
+    return /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$FocusGroupCollection.ItemSlot, {
+        scope: __scopeNavigationMenu
+    }, /*#__PURE__*/ $yHMN2$createElement($yHMN2$Primitive.button, $yHMN2$babelruntimehelpersesmextends({}, groupProps, {
+        ref: forwardedRef,
+        onKeyDown: $yHMN2$composeEventHandlers(props.onKeyDown, (event)=>{
+            const isFocusNavigationKey = [
+                'Home',
+                'End',
+                ...$322c88a641701f3b$var$ARROW_KEYS
+            ].includes(event.key);
+            if (isFocusNavigationKey) {
+                let candidateNodes = getItems().map((item)=>item.ref.current
+                );
+                const prevItemKey = context.dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+                const prevKeys = [
+                    prevItemKey,
+                    'ArrowUp',
+                    'End'
+                ];
+                if (prevKeys.includes(event.key)) candidateNodes.reverse();
+                if ($322c88a641701f3b$var$ARROW_KEYS.includes(event.key)) {
+                    const currentIndex = candidateNodes.indexOf(event.currentTarget);
+                    candidateNodes = candidateNodes.slice(currentIndex + 1);
+                }
+                /**
+         * Imperative focus during keydown is risky so we prevent React's batching updates
+         * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332
+         */ setTimeout(()=>$322c88a641701f3b$var$focusFirst(candidateNodes)
+                ); // Prevent page scroll while navigating
+                event.preventDefault();
+            }
+        })
+    })));
+});
+/**
+ * Returns a list of potential tabbable candidates.
+ *
+ * NOTE: This is only a close approximation. For example it doesn't take into account cases like when
+ * elements are not visible. This cannot be worked out easily by just reading a property, but rather
+ * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+ * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
+ */ function $322c88a641701f3b$var$getTabbableCandidates(container) {
+    const nodes = [];
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+        acceptNode: (node)=>{
+            const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';
+            if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP; // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
+            // runtime's understanding of tabbability, so this automatically accounts
+            // for any kind of element that could be tabbed to.
+            return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+        }
+    });
+    while(walker.nextNode())nodes.push(walker.currentNode); // we do not take into account the order of nodes with positive `tabIndex` as it
+    // hinders accessibility to have tab order different from visual order.
+    return nodes;
+}
+function $322c88a641701f3b$var$focusFirst(candidates) {
+    const previouslyFocusedElement = document.activeElement;
+    return candidates.some((candidate)=>{
+        // if focus is already where we want to go, we don't want to keep going through the candidates
+        if (candidate === previouslyFocusedElement) return true;
+        candidate.focus();
+        return document.activeElement !== previouslyFocusedElement;
+    });
+}
+function $322c88a641701f3b$var$removeFromTabOrder(candidates) {
+    candidates.forEach((candidate)=>{
+        candidate.dataset.tabindex = candidate.getAttribute('tabindex') || '';
+        candidate.setAttribute('tabindex', '-1');
+    });
+    return ()=>{
+        candidates.forEach((candidate)=>{
+            const prevTabIndex = candidate.dataset.tabindex;
+            candidate.setAttribute('tabindex', prevTabIndex);
+        });
+    };
+}
+function $322c88a641701f3b$var$useResizeObserver(element, onResize) {
+    const handleResize = $yHMN2$useCallbackRef(onResize);
+    $yHMN2$useLayoutEffect(()=>{
+        let rAF = 0;
+        if (element) {
+            /**
+       * Resize Observer will throw an often benign error that says `ResizeObserver loop
+       * completed with undelivered notifications`. This means that ResizeObserver was not
+       * able to deliver all observations within a single animation frame, so we use
+       * `requestAnimationFrame` to ensure we don't deliver unnecessary observations.
+       * Further reading: https://github.com/WICG/resize-observer/issues/38
+       */ const resizeObserver = new ResizeObserver(()=>{
+                cancelAnimationFrame(rAF);
+                rAF = window.requestAnimationFrame(handleResize);
+            });
+            resizeObserver.observe(element);
+            return ()=>{
+                window.cancelAnimationFrame(rAF);
+                resizeObserver.unobserve(element);
+            };
+        }
+    }, [
+        element,
+        handleResize
+    ]);
+}
+function $322c88a641701f3b$var$getOpenState(open) {
+    return open ? 'open' : 'closed';
+}
+function $322c88a641701f3b$var$makeTriggerId(baseId, value) {
+    return `${baseId}-trigger-${value}`;
+}
+function $322c88a641701f3b$var$makeContentId(baseId, value) {
+    return `${baseId}-content-${value}`;
+}
+function $322c88a641701f3b$var$whenMouse(handler) {
+    return (event)=>event.pointerType === 'mouse' ? handler(event) : undefined
+    ;
+}
+/* -----------------------------------------------------------------------------------------------*/ const $322c88a641701f3b$export$be92b6f5f03c0fe9 = $322c88a641701f3b$export$5b2278cf1e8bcae2;
+const $322c88a641701f3b$export$d7a01e11500dfb6f = $322c88a641701f3b$export$5958edd6c4ee7c79;
+const $322c88a641701f3b$export$54c2e3dc7acea9f5 = $322c88a641701f3b$export$c361068a95fd2286;
+const $322c88a641701f3b$export$6d08773d2e66f8f2 = $322c88a641701f3b$export$ffdbb83a2de845c2;
+const $322c88a641701f3b$export$41fb9f06171c75f4 = $322c88a641701f3b$export$37fe8002734d8f2;
+const $322c88a641701f3b$export$a6c7ac8248d6e38a = $322c88a641701f3b$export$6893bf21536567da;
+const $322c88a641701f3b$export$adb584737d712b70 = $322c88a641701f3b$export$8ddb526647c0d8fb;
+const $322c88a641701f3b$export$7c6e2c02157bb7d2 = $322c88a641701f3b$export$38e00e996c2f93f7;
+const $322c88a641701f3b$export$d5c6c08dc2d3ca7 = $322c88a641701f3b$export$ee880b97cc6d44a5;
+
+
+
+
+export {$322c88a641701f3b$export$fb8ea5af8c9fcdf0 as createNavigationMenuScope, $322c88a641701f3b$export$5b2278cf1e8bcae2 as NavigationMenu, $322c88a641701f3b$export$5958edd6c4ee7c79 as NavigationMenuSub, $322c88a641701f3b$export$c361068a95fd2286 as NavigationMenuList, $322c88a641701f3b$export$ffdbb83a2de845c2 as NavigationMenuItem, $322c88a641701f3b$export$37fe8002734d8f2 as NavigationMenuTrigger, $322c88a641701f3b$export$6893bf21536567da as NavigationMenuLink, $322c88a641701f3b$export$8ddb526647c0d8fb as NavigationMenuIndicator, $322c88a641701f3b$export$38e00e996c2f93f7 as NavigationMenuContent, $322c88a641701f3b$export$ee880b97cc6d44a5 as NavigationMenuViewport, $322c88a641701f3b$export$be92b6f5f03c0fe9 as Root, $322c88a641701f3b$export$d7a01e11500dfb6f as Sub, $322c88a641701f3b$export$54c2e3dc7acea9f5 as List, $322c88a641701f3b$export$6d08773d2e66f8f2 as Item, $322c88a641701f3b$export$41fb9f06171c75f4 as Trigger, $322c88a641701f3b$export$a6c7ac8248d6e38a as Link, $322c88a641701f3b$export$adb584737d712b70 as Indicator, $322c88a641701f3b$export$7c6e2c02157bb7d2 as Content, $322c88a641701f3b$export$d5c6c08dc2d3ca7 as Viewport};
 //# sourceMappingURL=index.module.js.map