(NAVIGATION_MENU_NAME);\n\ntype ScopedProps = P & { __scopeNavigationMenu?: Scope };\nconst [createNavigationMenuContext, createNavigationMenuScope] = createContextScope(\n NAVIGATION_MENU_NAME,\n [createCollectionScope, createFocusGroupCollectionScope]\n);\n\ntype ContentData = {\n ref?: React.Ref;\n} & ViewportContentMounterProps;\n\ntype NavigationMenuContextValue = {\n isRootMenu: boolean;\n value: string;\n previousValue: string;\n baseId: string;\n dir: Direction;\n orientation: Orientation;\n rootNavigationMenu: NavigationMenuElement | null;\n indicatorTrack: HTMLDivElement | null;\n onIndicatorTrackChange(indicatorTrack: HTMLDivElement | null): void;\n viewport: NavigationMenuViewportElement | null;\n onViewportChange(viewport: NavigationMenuViewportElement | null): void;\n onViewportContentChange(contentValue: string, contentData: ContentData): void;\n onViewportContentRemove(contentValue: string): void;\n onTriggerEnter(itemValue: string): void;\n onTriggerLeave(): void;\n onContentEnter(): void;\n onContentLeave(): void;\n onItemSelect(itemValue: string): void;\n onItemDismiss(): void;\n};\n\nconst [NavigationMenuProviderImpl, useNavigationMenuContext] =\n createNavigationMenuContext(NAVIGATION_MENU_NAME);\n\nconst [ViewportContentProvider, useViewportContentContext] = createNavigationMenuContext<{\n items: Map;\n}>(NAVIGATION_MENU_NAME);\n\ntype NavigationMenuElement = React.ElementRef;\ntype PrimitiveNavProps = React.ComponentPropsWithoutRef;\ninterface NavigationMenuProps\n extends Omit,\n PrimitiveNavProps {\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n dir?: Direction;\n orientation?: Orientation;\n /**\n * The duration from when the pointer enters the trigger until the tooltip gets opened.\n * @defaultValue 200\n */\n delayDuration?: number;\n /**\n * How much time a user has to enter another trigger without incurring a delay again.\n * @defaultValue 300\n */\n skipDelayDuration?: number;\n}\n\nconst NavigationMenu = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const {\n __scopeNavigationMenu,\n value: valueProp,\n onValueChange,\n defaultValue,\n delayDuration = 200,\n skipDelayDuration = 300,\n orientation = 'horizontal',\n dir,\n ...NavigationMenuProps\n } = props;\n const [navigationMenu, setNavigationMenu] = React.useState(null);\n const composedRef = useComposedRefs(forwardedRef, (node) => setNavigationMenu(node));\n const direction = useDirection(dir);\n const openTimerRef = React.useRef(0);\n const closeTimerRef = React.useRef(0);\n const skipDelayTimerRef = React.useRef(0);\n const [isOpenDelayed, setIsOpenDelayed] = React.useState(true);\n const [value = '', setValue] = useControllableState({\n prop: valueProp,\n onChange: (value) => {\n const isOpen = value !== '';\n const hasSkipDelayDuration = skipDelayDuration > 0;\n\n if (isOpen) {\n window.clearTimeout(skipDelayTimerRef.current);\n if (hasSkipDelayDuration) setIsOpenDelayed(false);\n } else {\n window.clearTimeout(skipDelayTimerRef.current);\n skipDelayTimerRef.current = window.setTimeout(\n () => setIsOpenDelayed(true),\n skipDelayDuration\n );\n }\n\n onValueChange?.(value);\n },\n defaultProp: defaultValue,\n });\n\n const startCloseTimer = React.useCallback(() => {\n window.clearTimeout(closeTimerRef.current);\n closeTimerRef.current = window.setTimeout(() => setValue(''), 150);\n }, [setValue]);\n\n const handleOpen = React.useCallback(\n (itemValue: string) => {\n window.clearTimeout(closeTimerRef.current);\n setValue(itemValue);\n },\n [setValue]\n );\n\n const handleDelayedOpen = React.useCallback(\n (itemValue: string) => {\n const isOpenItem = value === itemValue;\n if (isOpenItem) {\n // If the item is already open (e.g. we're transitioning from the content to the trigger)\n // then we want to clear the close timer immediately.\n window.clearTimeout(closeTimerRef.current);\n } else {\n openTimerRef.current = window.setTimeout(() => {\n window.clearTimeout(closeTimerRef.current);\n setValue(itemValue);\n }, delayDuration);\n }\n },\n [value, setValue, delayDuration]\n );\n\n React.useEffect(() => {\n return () => {\n window.clearTimeout(openTimerRef.current);\n window.clearTimeout(closeTimerRef.current);\n window.clearTimeout(skipDelayTimerRef.current);\n };\n }, []);\n\n return (\n {\n window.clearTimeout(openTimerRef.current);\n if (isOpenDelayed) handleDelayedOpen(itemValue);\n else handleOpen(itemValue);\n }}\n onTriggerLeave={() => {\n window.clearTimeout(openTimerRef.current);\n startCloseTimer();\n }}\n onContentEnter={() => window.clearTimeout(closeTimerRef.current)}\n onContentLeave={startCloseTimer}\n onItemSelect={(itemValue) => {\n setValue((prevValue) => (prevValue === itemValue ? '' : itemValue));\n }}\n onItemDismiss={() => setValue('')}\n >\n \n \n );\n }\n);\n\nNavigationMenu.displayName = NAVIGATION_MENU_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuSub\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUB_NAME = 'NavigationMenuSub';\n\ntype NavigationMenuSubElement = React.ElementRef;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef;\ninterface NavigationMenuSubProps\n extends Omit,\n PrimitiveDivProps {\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n orientation?: Orientation;\n}\n\nconst NavigationMenuSub = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const {\n __scopeNavigationMenu,\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = 'horizontal',\n ...subProps\n } = props;\n const context = useNavigationMenuContext(SUB_NAME, __scopeNavigationMenu);\n const [value = '', setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue,\n });\n\n return (\n setValue(itemValue)}\n onItemSelect={(itemValue) => setValue(itemValue)}\n onItemDismiss={() => setValue('')}\n >\n \n \n );\n }\n);\n\nNavigationMenuSub.displayName = SUB_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ninterface NavigationMenuProviderPrivateProps {\n isRootMenu: boolean;\n scope: Scope;\n children: React.ReactNode;\n orientation: Orientation;\n dir: Direction;\n rootNavigationMenu: NavigationMenuElement | null;\n value: string;\n onTriggerEnter(itemValue: string): void;\n onTriggerLeave?(): void;\n onContentEnter?(): void;\n onContentLeave?(): void;\n onItemSelect(itemValue: string): void;\n onItemDismiss(): void;\n}\n\ninterface NavigationMenuProviderProps extends NavigationMenuProviderPrivateProps {}\n\nconst NavigationMenuProvider: React.FC = (\n props: ScopedProps\n) => {\n const {\n scope,\n isRootMenu,\n rootNavigationMenu,\n dir,\n orientation,\n children,\n value,\n onItemSelect,\n onItemDismiss,\n onTriggerEnter,\n onTriggerLeave,\n onContentEnter,\n onContentLeave,\n } = props;\n const [viewport, setViewport] = React.useState(null);\n const [viewportContent, setViewportContent] = React.useState>(new Map());\n const [indicatorTrack, setIndicatorTrack] = React.useState(null);\n\n return (\n {\n setViewportContent((prevContent) => {\n prevContent.set(contentValue, contentData);\n return new Map(prevContent);\n });\n }, [])}\n onViewportContentRemove={React.useCallback((contentValue) => {\n setViewportContent((prevContent) => {\n if (!prevContent.has(contentValue)) return prevContent;\n prevContent.delete(contentValue);\n return new Map(prevContent);\n });\n }, [])}\n >\n \n \n {children}\n \n \n \n );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuList\n * -----------------------------------------------------------------------------------------------*/\n\nconst LIST_NAME = 'NavigationMenuList';\n\ntype NavigationMenuListElement = React.ElementRef;\ntype PrimitiveUnorderedListProps = React.ComponentPropsWithoutRef;\ninterface NavigationMenuListProps extends PrimitiveUnorderedListProps {}\n\nconst NavigationMenuList = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeNavigationMenu, ...listProps } = props;\n const context = useNavigationMenuContext(LIST_NAME, __scopeNavigationMenu);\n\n const list = (\n \n );\n\n return (\n \n \n {context.isRootMenu ? {list} : list}\n \n \n );\n }\n);\n\nNavigationMenuList.displayName = LIST_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'NavigationMenuItem';\n\ntype FocusProxyElement = React.ElementRef;\n\ntype NavigationMenuItemContextValue = {\n value: string;\n triggerRef: React.RefObject;\n contentRef: React.RefObject;\n focusProxyRef: React.RefObject;\n wasEscapeCloseRef: React.MutableRefObject;\n onEntryKeyDown(): void;\n onFocusProxyEnter(side: 'start' | 'end'): void;\n onRootContentClose(): void;\n onContentFocusOutside(): void;\n};\n\nconst [NavigationMenuItemContextProvider, useNavigationMenuItemContext] =\n createNavigationMenuContext(ITEM_NAME);\n\ntype NavigationMenuItemElement = React.ElementRef;\ntype PrimitiveListItemProps = React.ComponentPropsWithoutRef;\ninterface NavigationMenuItemProps extends PrimitiveListItemProps {\n value?: string;\n}\n\nconst NavigationMenuItem = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeNavigationMenu, value: valueProp, ...itemProps } = props;\n const autoValue = useId();\n // We need to provide an initial deterministic value as `useId` will return\n // empty string on the first render and we don't want to match our internal \"closed\" value.\n const value = valueProp || autoValue || 'LEGACY_REACT_AUTO_VALUE';\n const contentRef = React.useRef(null);\n const triggerRef = React.useRef(null);\n const focusProxyRef = React.useRef(null);\n const restoreContentTabOrderRef = React.useRef(() => {});\n const wasEscapeCloseRef = React.useRef(false);\n\n const handleContentEntry = React.useCallback((side = 'start') => {\n if (contentRef.current) {\n restoreContentTabOrderRef.current();\n const candidates = getTabbableCandidates(contentRef.current);\n if (candidates.length) focusFirst(side === 'start' ? candidates : candidates.reverse());\n }\n }, []);\n\n const handleContentExit = React.useCallback(() => {\n if (contentRef.current) {\n const candidates = getTabbableCandidates(contentRef.current);\n if (candidates.length) restoreContentTabOrderRef.current = removeFromTabOrder(candidates);\n }\n }, []);\n\n return (\n \n \n \n );\n }\n);\n\nNavigationMenuItem.displayName = ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'NavigationMenuTrigger';\n\ntype NavigationMenuTriggerElement = React.ElementRef;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef;\ninterface NavigationMenuTriggerProps extends PrimitiveButtonProps {}\n\nconst NavigationMenuTrigger = React.forwardRef<\n NavigationMenuTriggerElement,\n NavigationMenuTriggerProps\n>((props: ScopedProps, forwardedRef) => {\n const { __scopeNavigationMenu, disabled, ...triggerProps } = props;\n const context = useNavigationMenuContext(TRIGGER_NAME, props.__scopeNavigationMenu);\n const itemContext = useNavigationMenuItemContext(TRIGGER_NAME, props.__scopeNavigationMenu);\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(ref, itemContext.triggerRef, forwardedRef);\n const triggerId = makeTriggerId(context.baseId, itemContext.value);\n const contentId = makeContentId(context.baseId, itemContext.value);\n const hasPointerMoveOpenedRef = React.useRef(false);\n const wasClickCloseRef = React.useRef(false);\n const open = itemContext.value === context.value;\n\n return (\n <>\n \n \n {\n wasClickCloseRef.current = false;\n itemContext.wasEscapeCloseRef.current = false;\n })}\n onPointerMove={composeEventHandlers(\n props.onPointerMove,\n whenMouse(() => {\n if (\n disabled ||\n wasClickCloseRef.current ||\n itemContext.wasEscapeCloseRef.current ||\n hasPointerMoveOpenedRef.current\n )\n return;\n context.onTriggerEnter(itemContext.value);\n hasPointerMoveOpenedRef.current = true;\n })\n )}\n onPointerLeave={composeEventHandlers(\n props.onPointerLeave,\n whenMouse(() => {\n if (disabled) return;\n context.onTriggerLeave();\n hasPointerMoveOpenedRef.current = false;\n })\n )}\n onClick={composeEventHandlers(props.onClick, () => {\n context.onItemSelect(itemContext.value);\n wasClickCloseRef.current = open;\n })}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n const verticalEntryKey = context.dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n const entryKey = { horizontal: 'ArrowDown', vertical: verticalEntryKey }[\n context.orientation\n ];\n if (open && event.key === entryKey) {\n itemContext.onEntryKeyDown();\n // Prevent FocusGroupItem from handling the event\n event.preventDefault();\n }\n })}\n />\n \n \n\n {/* Proxy tab order between trigger and content */}\n {open && (\n <>\n {\n const content = itemContext.contentRef.current;\n const prevFocusedElement = event.relatedTarget as HTMLElement | null;\n const wasTriggerFocused = prevFocusedElement === ref.current;\n const wasFocusFromContent = content?.contains(prevFocusedElement);\n\n if (wasTriggerFocused || !wasFocusFromContent) {\n itemContext.onFocusProxyEnter(wasTriggerFocused ? 'start' : 'end');\n }\n }}\n />\n\n {/* Restructure a11y tree to make content accessible to screen reader when using the viewport */}\n {context.viewport && }\n \n )}\n \n );\n});\n\nNavigationMenuTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuLink\n * -----------------------------------------------------------------------------------------------*/\n\nconst LINK_NAME = 'NavigationMenuLink';\nconst LINK_SELECT = 'navigationMenu.linkSelect';\n\ntype NavigationMenuLinkElement = React.ElementRef;\ntype PrimitiveLinkProps = React.ComponentPropsWithoutRef;\ninterface NavigationMenuLinkProps extends Omit {\n active?: boolean;\n onSelect?: (event: Event) => void;\n}\n\nconst NavigationMenuLink = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeNavigationMenu, active, onSelect, ...linkProps } = props;\n\n return (\n \n {\n const target = event.target as HTMLElement;\n const linkSelectEvent = new CustomEvent(LINK_SELECT, {\n bubbles: true,\n cancelable: true,\n });\n target.addEventListener(LINK_SELECT, (event) => onSelect?.(event), { once: true });\n dispatchDiscreteCustomEvent(target, linkSelectEvent);\n\n if (!linkSelectEvent.defaultPrevented && !event.metaKey) {\n const rootContentDismissEvent = new CustomEvent(ROOT_CONTENT_DISMISS, {\n bubbles: true,\n cancelable: true,\n });\n dispatchDiscreteCustomEvent(target, rootContentDismissEvent);\n }\n },\n { checkForDefaultPrevented: false }\n )}\n />\n \n );\n }\n);\n\nNavigationMenuLink.displayName = LINK_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'NavigationMenuIndicator';\n\ntype NavigationMenuIndicatorElement = NavigationMenuIndicatorImplElement;\ninterface NavigationMenuIndicatorProps extends NavigationMenuIndicatorImplProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst NavigationMenuIndicator = React.forwardRef<\n NavigationMenuIndicatorElement,\n NavigationMenuIndicatorProps\n>((props: ScopedProps, forwardedRef) => {\n const { forceMount, ...indicatorProps } = props;\n const context = useNavigationMenuContext(INDICATOR_NAME, props.__scopeNavigationMenu);\n const isVisible = Boolean(context.value);\n\n return context.indicatorTrack\n ? ReactDOM.createPortal(\n \n \n ,\n context.indicatorTrack\n )\n : null;\n});\n\nNavigationMenuIndicator.displayName = INDICATOR_NAME;\n\ntype NavigationMenuIndicatorImplElement = React.ElementRef;\ninterface NavigationMenuIndicatorImplProps extends PrimitiveDivProps {}\n\nconst NavigationMenuIndicatorImpl = React.forwardRef<\n NavigationMenuIndicatorImplElement,\n NavigationMenuIndicatorImplProps\n>((props: ScopedProps, forwardedRef) => {\n const { __scopeNavigationMenu, ...indicatorProps } = props;\n const context = useNavigationMenuContext(INDICATOR_NAME, __scopeNavigationMenu);\n const getItems = useCollection(__scopeNavigationMenu);\n const [activeTrigger, setActiveTrigger] = React.useState(\n null\n );\n const [position, setPosition] = React.useState<{ size: number; offset: number } | null>(null);\n const isHorizontal = context.orientation === 'horizontal';\n const isVisible = Boolean(context.value);\n\n React.useEffect(() => {\n const items = getItems();\n const triggerNode = items.find((item) => item.value === context.value)?.ref.current;\n if (triggerNode) setActiveTrigger(triggerNode);\n }, [getItems, context.value]);\n\n /**\n * Update position when the indicator or parent track size changes\n */\n const handlePositionChange = () => {\n if (activeTrigger) {\n setPosition({\n size: isHorizontal ? activeTrigger.offsetWidth : activeTrigger.offsetHeight,\n offset: isHorizontal ? activeTrigger.offsetLeft : activeTrigger.offsetTop,\n });\n }\n };\n useResizeObserver(activeTrigger, handlePositionChange);\n useResizeObserver(context.indicatorTrack, handlePositionChange);\n\n // We need to wait for the indicator position to be available before rendering to\n // snap immediately into position rather than transitioning from initial\n return position ? (\n \n ) : null;\n});\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'NavigationMenuContent';\n\ntype NavigationMenuContentElement = NavigationMenuContentImplElement;\ninterface NavigationMenuContentProps\n extends Omit {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst NavigationMenuContent = React.forwardRef<\n NavigationMenuContentElement,\n NavigationMenuContentProps\n>((props: ScopedProps, forwardedRef) => {\n const { forceMount, ...contentProps } = props;\n const context = useNavigationMenuContext(CONTENT_NAME, props.__scopeNavigationMenu);\n const itemContext = useNavigationMenuItemContext(CONTENT_NAME, props.__scopeNavigationMenu);\n const composedRefs = useComposedRefs(itemContext.contentRef, forwardedRef);\n const open = itemContext.value === context.value;\n\n const commonProps = {\n value: itemContext.value,\n triggerRef: itemContext.triggerRef,\n focusProxyRef: itemContext.focusProxyRef,\n wasEscapeCloseRef: itemContext.wasEscapeCloseRef,\n onContentFocusOutside: itemContext.onContentFocusOutside,\n onRootContentClose: itemContext.onRootContentClose,\n ...contentProps,\n };\n\n return !context.viewport ? (\n \n \n \n ) : (\n \n );\n});\n\nNavigationMenuContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ViewportContentMounterElement = NavigationMenuContentImplElement;\ninterface ViewportContentMounterProps extends NavigationMenuContentImplProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst ViewportContentMounter = React.forwardRef<\n ViewportContentMounterElement,\n ViewportContentMounterProps\n>((props: ScopedProps, forwardedRef) => {\n const context = useNavigationMenuContext(CONTENT_NAME, props.__scopeNavigationMenu);\n const { onViewportContentChange, onViewportContentRemove } = context;\n\n useLayoutEffect(() => {\n onViewportContentChange(props.value, {\n ref: forwardedRef,\n ...props,\n });\n }, [props, forwardedRef, onViewportContentChange]);\n\n useLayoutEffect(() => {\n return () => onViewportContentRemove(props.value);\n }, [props.value, onViewportContentRemove]);\n\n // Content is proxied into the viewport\n return null;\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst ROOT_CONTENT_DISMISS = 'navigationMenu.rootContentDismiss';\n\ntype MotionAttribute = 'to-start' | 'to-end' | 'from-start' | 'from-end';\ntype NavigationMenuContentImplElement = React.ElementRef;\ntype DismissableLayerProps = React.ComponentPropsWithoutRef;\n\ninterface NavigationMenuContentImplPrivateProps {\n value: string;\n triggerRef: React.RefObject;\n focusProxyRef: React.RefObject;\n wasEscapeCloseRef: React.MutableRefObject;\n onContentFocusOutside(): void;\n onRootContentClose(): void;\n}\ninterface NavigationMenuContentImplProps\n extends Omit,\n NavigationMenuContentImplPrivateProps {}\n\nconst NavigationMenuContentImpl = React.forwardRef<\n NavigationMenuContentImplElement,\n NavigationMenuContentImplProps\n>((props: ScopedProps, forwardedRef) => {\n const {\n __scopeNavigationMenu,\n value,\n triggerRef,\n focusProxyRef,\n wasEscapeCloseRef,\n onRootContentClose,\n onContentFocusOutside,\n ...contentProps\n } = props;\n const context = useNavigationMenuContext(CONTENT_NAME, __scopeNavigationMenu);\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(ref, forwardedRef);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const getItems = useCollection(__scopeNavigationMenu);\n const prevMotionAttributeRef = React.useRef(null);\n\n const { onItemDismiss } = context;\n\n React.useEffect(() => {\n const content = ref.current;\n\n // Bubble dismiss to the root content node and focus its trigger\n if (context.isRootMenu && content) {\n const handleClose = () => {\n onItemDismiss();\n onRootContentClose();\n if (content.contains(document.activeElement)) triggerRef.current?.focus();\n };\n content.addEventListener(ROOT_CONTENT_DISMISS, handleClose);\n return () => content.removeEventListener(ROOT_CONTENT_DISMISS, handleClose);\n }\n }, [context.isRootMenu, props.value, triggerRef, onItemDismiss, onRootContentClose]);\n\n const motionAttribute = React.useMemo(() => {\n const items = getItems();\n const values = items.map((item) => item.value);\n if (context.dir === 'rtl') values.reverse();\n const index = values.indexOf(context.value);\n const prevIndex = values.indexOf(context.previousValue);\n const isSelected = value === context.value;\n const wasSelected = prevIndex === values.indexOf(value);\n\n // We only want to update selected and the last selected content\n // this avoids animations being interrupted outside of that range\n if (!isSelected && !wasSelected) return prevMotionAttributeRef.current;\n\n const attribute = (() => {\n // Don't provide a direction on the initial open\n if (index !== prevIndex) {\n // If we're moving to this item from another\n if (isSelected && prevIndex !== -1) return index > prevIndex ? 'from-end' : 'from-start';\n // If we're leaving this item for another\n if (wasSelected && index !== -1) return index > prevIndex ? 'to-start' : 'to-end';\n }\n // Otherwise we're entering from closed or leaving the list\n // entirely and should not animate in any direction\n return null;\n })();\n\n prevMotionAttributeRef.current = attribute;\n return attribute;\n }, [context.previousValue, context.value, context.dir, getItems, value]);\n\n return (\n \n {\n const rootContentDismissEvent = new Event(ROOT_CONTENT_DISMISS, {\n bubbles: true,\n cancelable: true,\n });\n ref.current?.dispatchEvent(rootContentDismissEvent);\n }}\n onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) => {\n onContentFocusOutside();\n const target = event.target as HTMLElement;\n // Only dismiss content when focus moves outside of the menu\n if (context.rootNavigationMenu?.contains(target)) event.preventDefault();\n })}\n onPointerDownOutside={composeEventHandlers(props.onPointerDownOutside, (event) => {\n const target = event.target as HTMLElement;\n const isTrigger = getItems().some((item) => item.ref.current?.contains(target));\n const isRootViewport = context.isRootMenu && context.viewport?.contains(target);\n if (isTrigger || isRootViewport || !context.isRootMenu) event.preventDefault();\n })}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;\n const isTabKey = event.key === 'Tab' && !isMetaKey;\n if (isTabKey) {\n const candidates = getTabbableCandidates(event.currentTarget);\n const focusedElement = document.activeElement;\n const index = candidates.findIndex((candidate) => candidate === focusedElement);\n const isMovingBackwards = event.shiftKey;\n const nextCandidates = isMovingBackwards\n ? candidates.slice(0, index).reverse()\n : candidates.slice(index + 1, candidates.length);\n\n if (focusFirst(nextCandidates)) {\n // prevent browser tab keydown because we've handled focus\n event.preventDefault();\n } else {\n // If we can't focus that means we're at the edges\n // so focus the proxy and let browser handle\n // tab/shift+tab keypress on the proxy instead\n focusProxyRef.current?.focus();\n }\n }\n })}\n onEscapeKeyDown={composeEventHandlers(props.onEscapeKeyDown, (_event) => {\n // prevent the dropdown from reopening\n // after the escape key has been pressed\n wasEscapeCloseRef.current = true;\n })}\n />\n \n );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuViewport\n * -----------------------------------------------------------------------------------------------*/\n\nconst VIEWPORT_NAME = 'NavigationMenuViewport';\n\ntype NavigationMenuViewportElement = NavigationMenuViewportImplElement;\ninterface NavigationMenuViewportProps\n extends Omit {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst NavigationMenuViewport = React.forwardRef<\n NavigationMenuViewportElement,\n NavigationMenuViewportProps\n>((props: ScopedProps, forwardedRef) => {\n const { forceMount, ...viewportProps } = props;\n const context = useNavigationMenuContext(VIEWPORT_NAME, props.__scopeNavigationMenu);\n const open = Boolean(context.value);\n\n return (\n \n \n \n );\n});\n\nNavigationMenuViewport.displayName = VIEWPORT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype NavigationMenuViewportImplElement = React.ElementRef;\ninterface NavigationMenuViewportImplProps extends PrimitiveDivProps {}\n\nconst NavigationMenuViewportImpl = React.forwardRef<\n NavigationMenuViewportImplElement,\n NavigationMenuViewportImplProps\n>((props: ScopedProps, forwardedRef) => {\n const { __scopeNavigationMenu, children, ...viewportImplProps } = props;\n const context = useNavigationMenuContext(VIEWPORT_NAME, __scopeNavigationMenu);\n const composedRefs = useComposedRefs(forwardedRef, context.onViewportChange);\n const viewportContentContext = useViewportContentContext(\n CONTENT_NAME,\n props.__scopeNavigationMenu\n );\n const [size, setSize] = React.useState<{ width: number; height: number } | null>(null);\n const [content, setContent] = React.useState(null);\n const viewportWidth = size ? size?.width + 'px' : undefined;\n const viewportHeight = size ? size?.height + 'px' : undefined;\n const open = Boolean(context.value);\n // We persist the last active content value as the viewport may be animating out\n // and we want the content to remain mounted for the lifecycle of the viewport.\n const activeContentValue = open ? context.value : context.previousValue;\n\n /**\n * Update viewport size to match the active content node.\n * We prefer offset dimensions over `getBoundingClientRect` as the latter respects CSS transform.\n * For example, if content animates in from `scale(0.5)` the dimensions would be anything\n * from `0.5` to `1` of the intended size.\n */\n const handleSizeChange = () => {\n if (content) setSize({ width: content.offsetWidth, height: content.offsetHeight });\n };\n useResizeObserver(content, handleSizeChange);\n\n return (\n \n {Array.from(viewportContentContext.items).map(([value, { ref, forceMount, ...props }]) => {\n const isActive = activeContentValue === value;\n return (\n \n {\n // We only want to update the stored node when another is available\n // as we need to smoothly transition between them.\n if (isActive && node) setContent(node);\n })}\n />\n \n );\n })}\n \n );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst FOCUS_GROUP_NAME = 'FocusGroup';\n\ntype FocusGroupElement = React.ElementRef;\ninterface FocusGroupProps extends PrimitiveDivProps {}\n\nconst FocusGroup = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeNavigationMenu, ...groupProps } = props;\n const context = useNavigationMenuContext(FOCUS_GROUP_NAME, __scopeNavigationMenu);\n\n return (\n \n \n \n \n \n );\n }\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_KEYS = ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'];\nconst FOCUS_GROUP_ITEM_NAME = 'FocusGroupItem';\n\ntype FocusGroupItemElement = React.ElementRef;\ninterface FocusGroupItemProps extends PrimitiveButtonProps {}\n\nconst FocusGroupItem = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeNavigationMenu, ...groupProps } = props;\n const getItems = useFocusGroupCollection(__scopeNavigationMenu);\n const context = useNavigationMenuContext(FOCUS_GROUP_ITEM_NAME, __scopeNavigationMenu);\n\n return (\n \n {\n const isFocusNavigationKey = ['Home', 'End', ...ARROW_KEYS].includes(event.key);\n if (isFocusNavigationKey) {\n let candidateNodes = getItems().map((item) => item.ref.current!);\n const prevItemKey = context.dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n const prevKeys = [prevItemKey, 'ArrowUp', 'End'];\n if (prevKeys.includes(event.key)) candidateNodes.reverse();\n if (ARROW_KEYS.includes(event.key)) {\n const currentIndex = candidateNodes.indexOf(event.currentTarget);\n candidateNodes = candidateNodes.slice(currentIndex + 1);\n }\n /**\n * Imperative focus during keydown is risky so we prevent React's batching updates\n * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332\n */\n setTimeout(() => focusFirst(candidateNodes));\n\n // Prevent page scroll while navigating\n event.preventDefault();\n }\n })}\n />\n \n );\n }\n);\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nfunction getTabbableCandidates(container: HTMLElement) {\n const nodes: HTMLElement[] = [];\n const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n acceptNode: (node: any) => {\n const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';\n if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;\n // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n // runtime's understanding of tabbability, so this automatically accounts\n // for any kind of element that could be tabbed to.\n return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;\n },\n });\n while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement);\n // we do not take into account the order of nodes with positive `tabIndex` as it\n // hinders accessibility to have tab order different from visual order.\n return nodes;\n}\n\nfunction focusFirst(candidates: HTMLElement[]) {\n const previouslyFocusedElement = document.activeElement;\n return candidates.some((candidate) => {\n // if focus is already where we want to go, we don't want to keep going through the candidates\n if (candidate === previouslyFocusedElement) return true;\n candidate.focus();\n return document.activeElement !== previouslyFocusedElement;\n });\n}\n\nfunction removeFromTabOrder(candidates: HTMLElement[]) {\n candidates.forEach((candidate) => {\n candidate.dataset.tabindex = candidate.getAttribute('tabindex') || '';\n candidate.setAttribute('tabindex', '-1');\n });\n return () => {\n candidates.forEach((candidate) => {\n const prevTabIndex = candidate.dataset.tabindex as string;\n candidate.setAttribute('tabindex', prevTabIndex);\n });\n };\n}\n\nfunction useResizeObserver(element: HTMLElement | null, onResize: () => void) {\n const handleResize = useCallbackRef(onResize);\n useLayoutEffect(() => {\n let rAF = 0;\n if (element) {\n /**\n * Resize Observer will throw an often benign error that says `ResizeObserver loop\n * completed with undelivered notifications`. This means that ResizeObserver was not\n * able to deliver all observations within a single animation frame, so we use\n * `requestAnimationFrame` to ensure we don't deliver unnecessary observations.\n * Further reading: https://github.com/WICG/resize-observer/issues/38\n */\n const resizeObserver = new ResizeObserver(() => {\n cancelAnimationFrame(rAF);\n rAF = window.requestAnimationFrame(handleResize);\n });\n resizeObserver.observe(element);\n return () => {\n window.cancelAnimationFrame(rAF);\n resizeObserver.unobserve(element);\n };\n }\n }, [element, handleResize]);\n}\n\nfunction getOpenState(open: boolean) {\n return open ? 'open' : 'closed';\n}\n\nfunction makeTriggerId(baseId: string, value: string) {\n return `${baseId}-trigger-${value}`;\n}\n\nfunction makeContentId(baseId: string, value: string) {\n return `${baseId}-content-${value}`;\n}\n\nfunction whenMouse(handler: React.PointerEventHandler): React.PointerEventHandler {\n return (event) => (event.pointerType === 'mouse' ? handler(event) : undefined);\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = NavigationMenu;\nconst Sub = NavigationMenuSub;\nconst List = NavigationMenuList;\nconst Item = NavigationMenuItem;\nconst Trigger = NavigationMenuTrigger;\nconst Link = NavigationMenuLink;\nconst Indicator = NavigationMenuIndicator;\nconst Content = NavigationMenuContent;\nconst Viewport = NavigationMenuViewport;\n\nexport {\n createNavigationMenuScope,\n //\n NavigationMenu,\n NavigationMenuSub,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuContent,\n NavigationMenuViewport,\n //\n Root,\n Sub,\n List,\n Item,\n Trigger,\n Link,\n Indicator,\n Content,\n Viewport,\n};\nexport type {\n NavigationMenuProps,\n NavigationMenuSubProps,\n NavigationMenuListProps,\n NavigationMenuItemProps,\n NavigationMenuTriggerProps,\n NavigationMenuLinkProps,\n NavigationMenuIndicatorProps,\n NavigationMenuContentProps,\n NavigationMenuViewportProps,\n};\n","import * as React from 'react';\nimport { useState, useRef, useEffect } from 'react';\nimport { LazyContext } from '../../context/LazyContext.mjs';\nimport { loadFeatures } from '../../motion/features/load-features.mjs';\n\n/**\n * Used in conjunction with the `m` component to reduce bundle size.\n *\n * `m` is a version of the `motion` component that only loads functionality\n * critical for the initial render.\n *\n * `LazyMotion` can then be used to either synchronously or asynchronously\n * load animation and gesture support.\n *\n * ```jsx\n * // Synchronous loading\n * import { LazyMotion, m, domAnimation } from \"framer-motion\"\n *\n * function App() {\n * return (\n * \n * \n * \n * )\n * }\n *\n * // Asynchronous loading\n * import { LazyMotion, m } from \"framer-motion\"\n *\n * function App() {\n * return (\n * import('./path/to/domAnimation')}>\n * \n * \n * )\n * }\n * ```\n *\n * @public\n */\nfunction LazyMotion({ children, features, strict = false }) {\n const [, setIsLoaded] = useState(!isLazyBundle(features));\n const loadedRenderer = useRef(undefined);\n /**\n * If this is a synchronous load, load features immediately\n */\n if (!isLazyBundle(features)) {\n const { renderer, ...loadedFeatures } = features;\n loadedRenderer.current = renderer;\n loadFeatures(loadedFeatures);\n }\n useEffect(() => {\n if (isLazyBundle(features)) {\n features().then(({ renderer, ...loadedFeatures }) => {\n loadFeatures(loadedFeatures);\n loadedRenderer.current = renderer;\n setIsLoaded(true);\n });\n }\n }, []);\n return (React.createElement(LazyContext.Provider, { value: { renderer: loadedRenderer.current, strict } }, children));\n}\nfunction isLazyBundle(features) {\n return typeof features === \"function\";\n}\n\nexport { LazyMotion };\n","import { createMotionProxy } from './motion-proxy.mjs';\nimport { createDomMotionConfig } from './utils/create-config.mjs';\n\n/**\n * @public\n */\nconst m = createMotionProxy(createDomMotionConfig);\n\nexport { m };\n","import { invariant } from '../../../utils/errors.mjs';\n\nfunction resolveElements(elements, scope, selectorCache) {\n var _a;\n if (typeof elements === \"string\") {\n let root = document;\n if (scope) {\n invariant(Boolean(scope.current), \"Scope provided, but no element detected.\");\n root = scope.current;\n }\n if (selectorCache) {\n (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = root.querySelectorAll(elements));\n elements = selectorCache[elements];\n }\n else {\n elements = root.querySelectorAll(elements);\n }\n }\n else if (elements instanceof Element) {\n elements = [elements];\n }\n /**\n * Return an empty array\n */\n return Array.from(elements || []);\n}\n\nexport { resolveElements };\n","import { resolveElements } from '../utils/resolve-element.mjs';\n\nconst resizeHandlers = new WeakMap();\nlet observer;\nfunction getElementSize(target, borderBoxSize) {\n if (borderBoxSize) {\n const { inlineSize, blockSize } = borderBoxSize[0];\n return { width: inlineSize, height: blockSize };\n }\n else if (target instanceof SVGElement && \"getBBox\" in target) {\n return target.getBBox();\n }\n else {\n return {\n width: target.offsetWidth,\n height: target.offsetHeight,\n };\n }\n}\nfunction notifyTarget({ target, contentRect, borderBoxSize, }) {\n var _a;\n (_a = resizeHandlers.get(target)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => {\n handler({\n target,\n contentSize: contentRect,\n get size() {\n return getElementSize(target, borderBoxSize);\n },\n });\n });\n}\nfunction notifyAll(entries) {\n entries.forEach(notifyTarget);\n}\nfunction createResizeObserver() {\n if (typeof ResizeObserver === \"undefined\")\n return;\n observer = new ResizeObserver(notifyAll);\n}\nfunction resizeElement(target, handler) {\n if (!observer)\n createResizeObserver();\n const elements = resolveElements(target);\n elements.forEach((element) => {\n let elementHandlers = resizeHandlers.get(element);\n if (!elementHandlers) {\n elementHandlers = new Set();\n resizeHandlers.set(element, elementHandlers);\n }\n elementHandlers.add(handler);\n observer === null || observer === void 0 ? void 0 : observer.observe(element);\n });\n return () => {\n elements.forEach((element) => {\n const elementHandlers = resizeHandlers.get(element);\n elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.delete(handler);\n if (!(elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.size)) {\n observer === null || observer === void 0 ? void 0 : observer.unobserve(element);\n }\n });\n };\n}\n\nexport { resizeElement };\n","const windowCallbacks = new Set();\nlet windowResizeHandler;\nfunction createWindowResizeHandler() {\n windowResizeHandler = () => {\n const size = {\n width: window.innerWidth,\n height: window.innerHeight,\n };\n const info = {\n target: window,\n size,\n contentSize: size,\n };\n windowCallbacks.forEach((callback) => callback(info));\n };\n window.addEventListener(\"resize\", windowResizeHandler);\n}\nfunction resizeWindow(callback) {\n windowCallbacks.add(callback);\n if (!windowResizeHandler)\n createWindowResizeHandler();\n return () => {\n windowCallbacks.delete(callback);\n if (!windowCallbacks.size && windowResizeHandler) {\n windowResizeHandler = undefined;\n }\n };\n}\n\nexport { resizeWindow };\n","import { resizeElement } from './handle-element.mjs';\nimport { resizeWindow } from './handle-window.mjs';\n\nfunction resize(a, b) {\n return typeof a === \"function\" ? resizeWindow(a) : resizeElement(a, b);\n}\n\nexport { resize };\n","import { progress } from '../../../utils/progress.mjs';\nimport { velocityPerSecond } from '../../../utils/velocity-per-second.mjs';\n\n/**\n * A time in milliseconds, beyond which we consider the scroll velocity to be 0.\n */\nconst maxElapsed = 50;\nconst createAxisInfo = () => ({\n current: 0,\n offset: [],\n progress: 0,\n scrollLength: 0,\n targetOffset: 0,\n targetLength: 0,\n containerLength: 0,\n velocity: 0,\n});\nconst createScrollInfo = () => ({\n time: 0,\n x: createAxisInfo(),\n y: createAxisInfo(),\n});\nconst keys = {\n x: {\n length: \"Width\",\n position: \"Left\",\n },\n y: {\n length: \"Height\",\n position: \"Top\",\n },\n};\nfunction updateAxisInfo(element, axisName, info, time) {\n const axis = info[axisName];\n const { length, position } = keys[axisName];\n const prev = axis.current;\n const prevTime = info.time;\n axis.current = element[\"scroll\" + position];\n axis.scrollLength = element[\"scroll\" + length] - element[\"client\" + length];\n axis.offset.length = 0;\n axis.offset[0] = 0;\n axis.offset[1] = axis.scrollLength;\n axis.progress = progress(0, axis.scrollLength, axis.current);\n const elapsed = time - prevTime;\n axis.velocity =\n elapsed > maxElapsed\n ? 0\n : velocityPerSecond(axis.current - prev, elapsed);\n}\nfunction updateScrollInfo(element, info, time) {\n updateAxisInfo(element, \"x\", info, time);\n updateAxisInfo(element, \"y\", info, time);\n info.time = time;\n}\n\nexport { createScrollInfo, updateScrollInfo };\n","function calcInset(element, container) {\n const inset = { x: 0, y: 0 };\n let current = element;\n while (current && current !== container) {\n if (current instanceof HTMLElement) {\n inset.x += current.offsetLeft;\n inset.y += current.offsetTop;\n current = current.offsetParent;\n }\n else if (current.tagName === \"svg\") {\n /**\n * This isn't an ideal approach to measuring the offset of tags.\n * It would be preferable, given they behave like HTMLElements in most ways\n * to use offsetLeft/Top. But these don't exist on . Likewise we\n * can't use .getBBox() like most SVG elements as these provide the offset\n * relative to the SVG itself, which for is usually 0x0.\n */\n const svgBoundingBox = current.getBoundingClientRect();\n current = current.parentElement;\n const parentBoundingBox = current.getBoundingClientRect();\n inset.x += svgBoundingBox.left - parentBoundingBox.left;\n inset.y += svgBoundingBox.top - parentBoundingBox.top;\n }\n else if (current instanceof SVGGraphicsElement) {\n const { x, y } = current.getBBox();\n inset.x += x;\n inset.y += y;\n let svg = null;\n let parent = current.parentNode;\n while (!svg) {\n if (parent.tagName === \"svg\") {\n svg = parent;\n }\n parent = current.parentNode;\n }\n current = svg;\n }\n else {\n break;\n }\n }\n return inset;\n}\n\nexport { calcInset };\n","const ScrollOffset = {\n Enter: [\n [0, 1],\n [1, 1],\n ],\n Exit: [\n [0, 0],\n [1, 0],\n ],\n Any: [\n [1, 0],\n [0, 1],\n ],\n All: [\n [0, 0],\n [1, 1],\n ],\n};\n\nexport { ScrollOffset };\n","const namedEdges = {\n start: 0,\n center: 0.5,\n end: 1,\n};\nfunction resolveEdge(edge, length, inset = 0) {\n let delta = 0;\n /**\n * If we have this edge defined as a preset, replace the definition\n * with the numerical value.\n */\n if (namedEdges[edge] !== undefined) {\n edge = namedEdges[edge];\n }\n /**\n * Handle unit values\n */\n if (typeof edge === \"string\") {\n const asNumber = parseFloat(edge);\n if (edge.endsWith(\"px\")) {\n delta = asNumber;\n }\n else if (edge.endsWith(\"%\")) {\n edge = asNumber / 100;\n }\n else if (edge.endsWith(\"vw\")) {\n delta = (asNumber / 100) * document.documentElement.clientWidth;\n }\n else if (edge.endsWith(\"vh\")) {\n delta = (asNumber / 100) * document.documentElement.clientHeight;\n }\n else {\n edge = asNumber;\n }\n }\n /**\n * If the edge is defined as a number, handle as a progress value.\n */\n if (typeof edge === \"number\") {\n delta = length * edge;\n }\n return inset + delta;\n}\n\nexport { namedEdges, resolveEdge };\n","import { namedEdges, resolveEdge } from './edge.mjs';\n\nconst defaultOffset = [0, 0];\nfunction resolveOffset(offset, containerLength, targetLength, targetInset) {\n let offsetDefinition = Array.isArray(offset) ? offset : defaultOffset;\n let targetPoint = 0;\n let containerPoint = 0;\n if (typeof offset === \"number\") {\n /**\n * If we're provided offset: [0, 0.5, 1] then each number x should become\n * [x, x], so we default to the behaviour of mapping 0 => 0 of both target\n * and container etc.\n */\n offsetDefinition = [offset, offset];\n }\n else if (typeof offset === \"string\") {\n offset = offset.trim();\n if (offset.includes(\" \")) {\n offsetDefinition = offset.split(\" \");\n }\n else {\n /**\n * If we're provided a definition like \"100px\" then we want to apply\n * that only to the top of the target point, leaving the container at 0.\n * Whereas a named offset like \"end\" should be applied to both.\n */\n offsetDefinition = [offset, namedEdges[offset] ? offset : `0`];\n }\n }\n targetPoint = resolveEdge(offsetDefinition[0], targetLength, targetInset);\n containerPoint = resolveEdge(offsetDefinition[1], containerLength);\n return targetPoint - containerPoint;\n}\n\nexport { resolveOffset };\n","import { calcInset } from './inset.mjs';\nimport { ScrollOffset } from './presets.mjs';\nimport { resolveOffset } from './offset.mjs';\nimport { interpolate } from '../../../../utils/interpolate.mjs';\nimport { defaultOffset } from '../../../../utils/offsets/default.mjs';\n\nconst point = { x: 0, y: 0 };\nfunction getTargetSize(target) {\n return \"getBBox\" in target && target.tagName !== \"svg\"\n ? target.getBBox()\n : { width: target.clientWidth, height: target.clientHeight };\n}\nfunction resolveOffsets(container, info, options) {\n let { offset: offsetDefinition = ScrollOffset.All } = options;\n const { target = container, axis = \"y\" } = options;\n const lengthLabel = axis === \"y\" ? \"height\" : \"width\";\n const inset = target !== container ? calcInset(target, container) : point;\n /**\n * Measure the target and container. If they're the same thing then we\n * use the container's scrollWidth/Height as the target, from there\n * all other calculations can remain the same.\n */\n const targetSize = target === container\n ? { width: container.scrollWidth, height: container.scrollHeight }\n : getTargetSize(target);\n const containerSize = {\n width: container.clientWidth,\n height: container.clientHeight,\n };\n /**\n * Reset the length of the resolved offset array rather than creating a new one.\n * TODO: More reusable data structures for targetSize/containerSize would also be good.\n */\n info[axis].offset.length = 0;\n /**\n * Populate the offset array by resolving the user's offset definition into\n * a list of pixel scroll offets.\n */\n let hasChanged = !info[axis].interpolate;\n const numOffsets = offsetDefinition.length;\n for (let i = 0; i < numOffsets; i++) {\n const offset = resolveOffset(offsetDefinition[i], containerSize[lengthLabel], targetSize[lengthLabel], inset[axis]);\n if (!hasChanged && offset !== info[axis].interpolatorOffsets[i]) {\n hasChanged = true;\n }\n info[axis].offset[i] = offset;\n }\n /**\n * If the pixel scroll offsets have changed, create a new interpolator function\n * to map scroll value into a progress.\n */\n if (hasChanged) {\n info[axis].interpolate = interpolate(info[axis].offset, defaultOffset(offsetDefinition));\n info[axis].interpolatorOffsets = [...info[axis].offset];\n }\n info[axis].progress = info[axis].interpolate(info[axis].current);\n}\n\nexport { resolveOffsets };\n","import { updateScrollInfo } from './info.mjs';\nimport { resolveOffsets } from './offsets/index.mjs';\n\nfunction measure(container, target = container, info) {\n /**\n * Find inset of target within scrollable container\n */\n info.x.targetOffset = 0;\n info.y.targetOffset = 0;\n if (target !== container) {\n let node = target;\n while (node && node !== container) {\n info.x.targetOffset += node.offsetLeft;\n info.y.targetOffset += node.offsetTop;\n node = node.offsetParent;\n }\n }\n info.x.targetLength =\n target === container ? target.scrollWidth : target.clientWidth;\n info.y.targetLength =\n target === container ? target.scrollHeight : target.clientHeight;\n info.x.containerLength = container.clientWidth;\n info.y.containerLength = container.clientHeight;\n}\nfunction createOnScrollHandler(element, onScroll, info, options = {}) {\n return {\n measure: () => measure(element, options.target, info),\n update: (time) => {\n updateScrollInfo(element, info, time);\n if (options.offset || options.target) {\n resolveOffsets(element, info, options);\n }\n },\n notify: () => onScroll(info),\n };\n}\n\nexport { createOnScrollHandler };\n","import { resize } from '../resize/index.mjs';\nimport { createScrollInfo } from './info.mjs';\nimport { createOnScrollHandler } from './on-scroll-handler.mjs';\nimport { frame, cancelFrame, frameData } from '../../../frameloop/frame.mjs';\n\nconst scrollListeners = new WeakMap();\nconst resizeListeners = new WeakMap();\nconst onScrollHandlers = new WeakMap();\nconst getEventTarget = (element) => element === document.documentElement ? window : element;\nfunction scrollInfo(onScroll, { container = document.documentElement, ...options } = {}) {\n let containerHandlers = onScrollHandlers.get(container);\n /**\n * Get the onScroll handlers for this container.\n * If one isn't found, create a new one.\n */\n if (!containerHandlers) {\n containerHandlers = new Set();\n onScrollHandlers.set(container, containerHandlers);\n }\n /**\n * Create a new onScroll handler for the provided callback.\n */\n const info = createScrollInfo();\n const containerHandler = createOnScrollHandler(container, onScroll, info, options);\n containerHandlers.add(containerHandler);\n /**\n * Check if there's a scroll event listener for this container.\n * If not, create one.\n */\n if (!scrollListeners.has(container)) {\n const measureAll = () => {\n for (const handler of containerHandlers)\n handler.measure();\n };\n const updateAll = () => {\n for (const handler of containerHandlers) {\n handler.update(frameData.timestamp);\n }\n };\n const notifyAll = () => {\n for (const handler of containerHandlers)\n handler.notify();\n };\n const listener = () => {\n frame.read(measureAll, false, true);\n frame.update(updateAll, false, true);\n frame.update(notifyAll, false, true);\n };\n scrollListeners.set(container, listener);\n const target = getEventTarget(container);\n window.addEventListener(\"resize\", listener, { passive: true });\n if (container !== document.documentElement) {\n resizeListeners.set(container, resize(container, listener));\n }\n target.addEventListener(\"scroll\", listener, { passive: true });\n }\n const listener = scrollListeners.get(container);\n frame.read(listener, false, true);\n return () => {\n var _a;\n cancelFrame(listener);\n /**\n * Check if we even have any handlers for this container.\n */\n const currentHandlers = onScrollHandlers.get(container);\n if (!currentHandlers)\n return;\n currentHandlers.delete(containerHandler);\n if (currentHandlers.size)\n return;\n /**\n * If no more handlers, remove the scroll listener too.\n */\n const scrollListener = scrollListeners.get(container);\n scrollListeners.delete(container);\n if (scrollListener) {\n getEventTarget(container).removeEventListener(\"scroll\", scrollListener);\n (_a = resizeListeners.get(container)) === null || _a === void 0 ? void 0 : _a();\n window.removeEventListener(\"resize\", scrollListener);\n }\n };\n}\n\nexport { scrollInfo };\n","import { motionValue } from './index.mjs';\nimport { useConstant } from '../utils/use-constant.mjs';\nimport { useEffect } from 'react';\nimport { warning } from '../utils/errors.mjs';\nimport { scrollInfo } from '../render/dom/scroll/track.mjs';\nimport { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';\n\nfunction refWarning(name, ref) {\n warning(Boolean(!ref || ref.current), `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref, or setting its \\`layoutEffect: false\\` option.`);\n}\nconst createScrollMotionValues = () => ({\n scrollX: motionValue(0),\n scrollY: motionValue(0),\n scrollXProgress: motionValue(0),\n scrollYProgress: motionValue(0),\n});\nfunction useScroll({ container, target, layoutEffect = true, ...options } = {}) {\n const values = useConstant(createScrollMotionValues);\n const useLifecycleEffect = layoutEffect\n ? useIsomorphicLayoutEffect\n : useEffect;\n useLifecycleEffect(() => {\n refWarning(\"target\", target);\n refWarning(\"container\", container);\n return scrollInfo(({ x, y }) => {\n values.scrollX.set(x.current);\n values.scrollXProgress.set(x.progress);\n values.scrollY.set(y.current);\n values.scrollYProgress.set(y.progress);\n }, {\n ...options,\n container: (container === null || container === void 0 ? void 0 : container.current) || undefined,\n target: (target === null || target === void 0 ? void 0 : target.current) || undefined,\n });\n }, [container, target, JSON.stringify(options.offset)]);\n return values;\n}\n\nexport { useScroll };\n"],"names":["useIsomorphicLayoutEffect","isBrowser","useLayoutEffect","useEffect","defaultState","x","y","width","height","top","left","bottom","right","esm_useMeasure","window","ResizeObserver","_a","useState","element","ref","_b","rect","setRect","observer","useMemo","entries","contentRect","observe","disconnect","noop","esm_useEffectOnce","effect","esm_useUnmount","fn","fnRef","useRef","current","useEffectOnce","esm_useRafState","initialState","frame","state","setState","setRafState","useCallback","value","cancelAnimationFrame","requestAnimationFrame","useUnmount","esm_useScroll","useRafState","handler","scrollLeft","scrollTop","on","capture","passive","off","NAVIGATION_MENU_NAME","Collection","useCollection","createCollectionScope","createCollection","FocusGroupCollection","useFocusGroupCollection","createFocusGroupCollectionScope","createNavigationMenuContext","createNavigationMenuScope","createContextScope","NavigationMenuProviderImpl","useNavigationMenuContext","ViewportContentProvider","useViewportContentContext","NavigationMenu","React","props","forwardedRef","__scopeNavigationMenu","valueProp","onValueChange","defaultValue","delayDuration","skipDelayDuration","orientation","dir","NavigationMenuProps","navigationMenu","setNavigationMenu","composedRef","useComposedRefs","node","direction","useDirection","openTimerRef","closeTimerRef","skipDelayTimerRef","isOpenDelayed","setIsOpenDelayed","setValue","useControllableState","prop","onChange","hasSkipDelayDuration","clearTimeout","setTimeout","defaultProp","startCloseTimer","handleOpen","itemValue","handleDelayedOpen","jsx","NavigationMenuProvider","scope","isRootMenu","rootNavigationMenu","onTriggerEnter","onTriggerLeave","onContentEnter","onContentLeave","onItemSelect","prevValue","onItemDismiss","children","Primitive","nav","displayName","SUB_NAME","NavigationMenuSub","subProps","context","div","viewport","setViewport","viewportContent","setViewportContent","Map","indicatorTrack","setIndicatorTrack","previousValue","usePrevious","baseId","useId","onViewportChange","onIndicatorTrackChange","useCallbackRef","onViewportContentChange","contentValue","contentData","prevContent","set","onViewportContentRemove","has","delete","Provider","items","LIST_NAME","NavigationMenuList","listProps","list","ul","style","position","Slot","FocusGroup","asChild","ITEM_NAME","NavigationMenuItemContextProvider","useNavigationMenuItemContext","NavigationMenuItem","itemProps","autoValue","contentRef","triggerRef","focusProxyRef","restoreContentTabOrderRef","wasEscapeCloseRef","handleContentEntry","side","candidates","getTabbableCandidates","length","focusFirst","reverse","handleContentExit","forEach","candidate","dataset","tabindex","getAttribute","setAttribute","prevTabIndex","onEntryKeyDown","onFocusProxyEnter","onRootContentClose","onContentFocusOutside","li","TRIGGER_NAME","NavigationMenuTrigger","disabled","triggerProps","itemContext","composedRefs","triggerId","makeTriggerId","contentId","makeContentId","hasPointerMoveOpenedRef","wasClickCloseRef","open","jsxs","Fragment","ItemSlot","FocusGroupItem","button","id","getOpenState","onPointerEnter","composeEventHandlers","onPointerMove","whenMouse","onPointerLeave","onClick","onKeyDown","entryKey","horizontal","vertical","event","key","preventDefault","VisuallyHiddenPrimitive","tabIndex","onFocus","content","prevFocusedElement","relatedTarget","wasTriggerFocused","wasFocusFromContent","contains","LINK_SELECT","NavigationMenuLink","active","onSelect","linkProps","a","target","linkSelectEvent","CustomEvent","bubbles","cancelable","addEventListener","once","dispatchDiscreteCustomEvent","defaultPrevented","metaKey","rootContentDismissEvent","ROOT_CONTENT_DISMISS","checkForDefaultPrevented","INDICATOR_NAME","NavigationMenuIndicator","forceMount","indicatorProps","isVisible","Boolean","ReactDOM","Presence","present","NavigationMenuIndicatorImpl","getItems","activeTrigger","setActiveTrigger","setPosition","isHorizontal","triggerNode","find","item","handlePositionChange","size","offsetWidth","offsetHeight","offset","offsetLeft","offsetTop","useResizeObserver","transform","concat","CONTENT_NAME","NavigationMenuContent","contentProps","commonProps","ViewportContentMounter","NavigationMenuContentImpl","pointerEvents","prevMotionAttributeRef","handleClose","document","activeElement","focus","removeEventListener","motionAttribute","values","map","index","indexOf","prevIndex","isSelected","wasSelected","attribute","DismissableLayer","disableOutsidePointerEvents","onDismiss","Event","dispatchEvent","onFocusOutside","onPointerDownOutside","isTrigger","some","isRootViewport","isMetaKey","altKey","ctrlKey","currentTarget","focusedElement","findIndex","isMovingBackwards","shiftKey","slice","onEscapeKeyDown","VIEWPORT_NAME","NavigationMenuViewport","viewportProps","NavigationMenuViewportImpl","viewportImplProps","viewportContentContext","setSize","setContent","viewportWidth","viewportHeight","activeContentValue","Array","from","param","isActive","composeRefs","groupProps","ARROW_KEYS","includes","candidateNodes","prevKeys","currentIndex","container","nodes","walker","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","isHiddenInput","tagName","type","hidden","FILTER_SKIP","FILTER_ACCEPT","nextNode","push","currentNode","previouslyFocusedElement","onResize","handleResize","rAF","resizeObserver","unobserve","pointerType","Root","List","Item","Trigger","Link","Content","Viewport","LazyMotion","features","strict","setIsLoaded","react__WEBPACK_IMPORTED_MODULE_0__","isLazyBundle","loadedRenderer","undefined","renderer","loadedFeatures","_motion_features_load_features_mjs__WEBPACK_IMPORTED_MODULE_1__","K","then","createElement","_context_LazyContext_mjs__WEBPACK_IMPORTED_MODULE_2__","u","m","_motion_proxy_mjs__WEBPACK_IMPORTED_MODULE_0__","D","_utils_create_config_mjs__WEBPACK_IMPORTED_MODULE_1__","w","windowResizeHandler","resizeHandlers","WeakMap","notifyTarget","borderBoxSize","get","contentSize","getElementSize","inlineSize","blockSize","SVGElement","getBBox","notifyAll","windowCallbacks","Set","createAxisInfo","progress","scrollLength","targetOffset","targetLength","containerLength","velocity","createScrollInfo","time","keys","updateAxisInfo","axisName","info","axis","prev","prevTime","Y","elapsed","velocity_per_second","R","namedEdges","start","center","end","resolveEdge","edge","inset","delta","asNumber","parseFloat","endsWith","documentElement","clientWidth","clientHeight","defaultOffset","point","scrollListeners","resizeListeners","onScrollHandlers","getEventTarget","refWarning","name","errors","createScrollMotionValues","scrollX","BX","scrollY","scrollXProgress","scrollYProgress","useScroll","layoutEffect","options","use_constant","h","useLifecycleEffect","use_isomorphic_effect","L","react","scrollInfo","onScroll","containerHandlers","containerHandler","createOnScrollHandler","measure","offsetParent","scrollWidth","scrollHeight","update","resolveOffsets","offsetDefinition","lengthLabel","calcInset","HTMLElement","svgBoundingBox","getBoundingClientRect","parentBoundingBox","parentElement","SVGGraphicsElement","svg","parent","parentNode","targetSize","containerSize","hasChanged","interpolate","numOffsets","i","resolveOffset","targetInset","isArray","targetPoint","trim","split","interpolatorOffsets","s","offsets_default","notify","add","measureAll","updateAll","frameloop_frame","frameData","timestamp","listener","Wi","read","innerWidth","innerHeight","callback","resizeElement","elements","root","querySelectorAll","Element","elementHandlers","Pn","currentHandlers","scrollListener","JSON","stringify"],"sourceRoot":""}