@primer/react-brand 0.68.0-rc.0963e67e → 0.68.0-rc.20c2136f

package/esm/SubNav/SubNav.js

@@ -95,7 +95,7 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 			return !1;
 		}));
 	}, [W]);
-	let { heading: J, subheading: Y, links: X, action: ne } = W.reduce((e, t) => {
+	let { heading: J, subheading: Y, links: ne, action: re } = W.reduce((e, t) => {
 		if (v(t)) if (t.type === F) e.heading = t;
 		else if (t.type === I) e.subheading = t;
 		else if (t.type === R) {
@@ -111,10 +111,10 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 		subheading: void 0,
 		links: [],
 		action: void 0
-	}), re = q ? h.toArray(q.props.children) : [], Z = re[0], Q = re[1], ie = v(Q) && Q.type === z && Q.props.variant === "anchor" ? Q : null, $ = v(Y) && Y.type === I && !!Y.props["aria-current"], ae = C(() => /* @__PURE__ */ E("div", {
+	}), ie = q ? h.toArray(q.props.children) : [], X = ie[0], Z = ie[1], ae = v(Z) && Z.type === z && Z.props.variant === "anchor" ? Z : null, Q = v(Y) && Y.type === I && !!Y.props["aria-current"], $ = Y ? X : null, oe = C(() => /* @__PURE__ */ E("div", {
 		className: e(p["SubNav__overlay-toggle"], L && p["SubNav__overlay-toggle--open"]),
 		children: /* @__PURE__ */ E("span", {
-			className: e(p["SubNav__overlay-toggle-content"], !Z && p["SubNav__overlay-toggle-content--end"]),
+			className: e(p["SubNav__overlay-toggle-content"], !$ && p["SubNav__overlay-toggle-content--end"]),
 			children: /* @__PURE__ */ D("button", {
 				ref: P,
 				className: p["SubNav__overlay-toggle-label"],
@@ -122,11 +122,11 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 				onClick: L ? G : K,
 				"aria-expanded": L ? "true" : "false",
 				"aria-controls": H,
-				"aria-label": Z ? `Navigation menu. Current page: ${Z}` : "Navigation menu",
-				children: [Z && /* @__PURE__ */ E(r, {
+				"aria-label": X ? `Navigation menu. Current page: ${X}` : "Navigation menu",
+				children: [$ && /* @__PURE__ */ E(r, {
 					as: "span",
 					size: "100",
-					children: Z
+					children: $
 				}), E(L ? a : i, {
 					className: p["SubNav__overlay-toggle-icon"],
 					size: 13
@@ -134,15 +134,16 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 			})
 		})
 	}), [
-		Z,
+		X,
 		G,
 		K,
 		H,
-		L
+		L,
+		$
 	]);
 	return /* @__PURE__ */ E("div", {
 		ref: O,
-		className: e(p.SubNav__container, Y && p["SubNav--has-sub-heading"], Y && $ && p["SubNav--subHeadingActive"], ee && p["SubNav__container--with-anchor-nav"]),
+		className: e(p.SubNav__container, Y && p["SubNav--has-sub-heading"], Y && Q && p["SubNav--subHeadingActive"], ee && p["SubNav__container--with-anchor-nav"]),
 		children: /* @__PURE__ */ E(N, { children: /* @__PURE__ */ E("nav", {
 			ref: j,
 			id: o,
@@ -160,22 +161,22 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 								children: J
 							}),
 							Y && /* @__PURE__ */ E("div", {
-								className: e(p["SubNav__heading-container"], p["SubNav__subheading-container"], $ && p["SubNav__subheading-container-active"]),
+								className: e(p["SubNav__heading-container"], p["SubNav__subheading-container"], Q && p["SubNav__subheading-container-active"]),
 								children: Y
 							}),
-							!U && (!Y || $) && ae,
-							ie && ie
+							!U && (!Y || Q) && oe,
+							ae && ae
 						]
 					}),
-					!U && Y && !$ && ae,
-					X.length > 0 && /* @__PURE__ */ D("ul", {
+					!U && Y && !Q && oe,
+					ne.length > 0 && /* @__PURE__ */ D("ul", {
 						ref: M,
 						id: H,
 						className: e(p["SubNav__links-overlay"], L && p["SubNav__links-overlay--open"]),
 						"data-testid": k.overlay,
-						children: [X, ne && /* @__PURE__ */ E("li", {
+						children: [ne, re && /* @__PURE__ */ E("li", {
 							className: p["SubNav__action-container"],
-							children: ne
+							children: re
 						})]
 					})
 				]

package/esm/SubNav/SubNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubNav.js","names":[],"sources":["../../src/SubNav/SubNav.tsx"],"sourcesContent":["import React, {\n  Children,\n  createContext,\n  forwardRef,\n  isValidElement,\n  memo,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type PropsWithChildren,\n  type ReactNode,\n  type RefObject,\n} from 'react'\nimport {Button, ButtonSizes, ButtonVariants, Text, TextProps, ThemeProvider, useWindowSize} from '..'\n\nimport {clsx} from 'clsx'\nimport {TriangleDownIcon, TriangleUpIcon} from '@primer/octicons-react'\nimport {useId} from '../hooks/useId'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport {useFocusTrap} from '../hooks/useFocusTrap'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {useContainsFocus} from './useContainsFocus'\n\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './SubNav.module.css'\nimport {createPortal} from 'react-dom'\n\nconst testIds = {\n  root: 'SubNav-root',\n  get button() {\n    return `${this.root}-button`\n  },\n  get overlay() {\n    return `${this.root}-overlay`\n  },\n  get link() {\n    return `${this.root}-link`\n  },\n  get heading() {\n    return `${this.root}-heading`\n  },\n  get action() {\n    return `${this.root}-action`\n  },\n  get subMenu() {\n    return `${this.root}-sub-menu`\n  },\n}\n\nexport const SubNavSubMenuVariants = ['dropdown', 'anchor'] as const\ntype SubMenuVariants = (typeof SubNavSubMenuVariants)[number]\n\ntype SubNavContextType = {\n  portalRef: RefObject<HTMLDivElement | null>\n}\n\nconst SubNavContext = createContext<SubNavContextType | undefined>(undefined)\n\nexport const useSubNavContext = () => {\n  const context = useContext(SubNavContext)\n  if (!context) {\n    throw new Error('useSubNavContext must be used within a SubNavProvider')\n  }\n  return context\n}\n\nfunction SubNavProvider({children}: {children: React.ReactNode}) {\n  const anchoredNavOuterPortalRef = React.useRef<HTMLDivElement>(null)\n  const anchoredNavPortalRef = React.useRef<HTMLDivElement>(null)\n\n  const value = useMemo(\n    () => ({\n      portalRef: anchoredNavPortalRef,\n    }),\n    [],\n  )\n\n  useEffect(() => {\n    const menuContainer = anchoredNavOuterPortalRef.current\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        entry.target.classList.toggle(styles['SubNav__anchor-menu-outer-container--stuck'], entry.intersectionRatio < 1)\n      },\n      {threshold: [1]},\n    )\n\n    if (menuContainer) {\n      observer.observe(menuContainer)\n    }\n\n    return () => {\n      if (menuContainer) {\n        observer.unobserve(menuContainer)\n      }\n    }\n  }, [])\n\n  return (\n    <SubNavContext.Provider value={value}>\n      {children}\n\n      <div className={styles['SubNav__anchor-menu-outer-container']} ref={anchoredNavOuterPortalRef}>\n        <div className={clsx(styles['SubNav__anchor-menu-container'])} ref={anchoredNavPortalRef} />\n      </div>\n    </SubNavContext.Provider>\n  )\n}\n\nexport type SubNavProps = {\n  /**\n   * @deprecated The hasShadow prop is deprecated and will be removed in a future release.\n   */\n  hasShadow?: boolean\n  /**\n   * Allows the SubNav to be used at full width,\n   * removing any internal padding and guttering.\n   */\n  fullWidth?: boolean\n  'data-testid'?: string\n} & PropsWithChildren<BaseProps<HTMLDivElement>>\n\nconst SubNavRoot = memo(\n  forwardRef<HTMLDivElement, SubNavProps>(\n    ({id, children, className, 'data-testid': testId, fullWidth, hasShadow}, ref) => {\n      const rootRef = useProvidedRefOrCreate<HTMLDivElement>(ref as RefObject<HTMLDivElement>)\n      const innerRootRef = React.useRef<HTMLDivElement>(null)\n      const navRef = React.useRef<HTMLElement>(null)\n      const overlayRef = React.useRef<HTMLUListElement>(null)\n      const narrowButtonRef = useRef<HTMLButtonElement>(null)\n      const [isOpenAtNarrow, setIsOpenAtNarrow] = useState(false)\n      const idForLinkContainer = useId()\n      const [hasAnchoredNav, setHasAnchoredNav] = useState(false)\n\n      const {isLarge} = useWindowSize()\n\n      useFocusTrap({containerRef: innerRootRef, disabled: !isOpenAtNarrow})\n\n      const childrenArr = Children.toArray(children)\n\n      const closeMenuCallback = useCallback(() => {\n        if (isLarge) return\n        setIsOpenAtNarrow(false)\n      }, [isLarge])\n\n      const handleMenuToggle = useCallback(() => {\n        if (isLarge) return\n        setIsOpenAtNarrow(prev => !prev)\n      }, [isLarge])\n\n      useOnClickOutside(innerRootRef, closeMenuCallback)\n      useKeyboardEscape(closeMenuCallback)\n\n      useEffect(() => {\n        const navElement = navRef.current\n\n        const updateAvailableHeight = () => {\n          if (navElement) {\n            const navTop = navElement.getBoundingClientRect().top\n            navElement.style.setProperty('--subnav-available-height', `${window.innerHeight - navTop}px`)\n          }\n        }\n\n        if (isOpenAtNarrow && !isLarge) {\n          document.body.style.overflow = 'hidden'\n          updateAvailableHeight()\n          // eslint-disable-next-line github/prefer-observers\n          window.addEventListener('resize', updateAvailableHeight)\n        } else {\n          document.body.style.overflow = 'auto'\n\n          if (navElement) {\n            navElement.style.removeProperty('--subnav-available-height')\n          }\n        }\n\n        return () => {\n          document.body.style.overflow = 'auto'\n          window.removeEventListener('resize', updateAvailableHeight)\n\n          if (navElement) {\n            navElement.style.removeProperty('--subnav-available-height')\n          }\n        }\n      }, [isOpenAtNarrow, isLarge])\n\n      const activeLink = childrenArr.find(child => {\n        return isValidElement<LinkBaseProps>(child) && Boolean(child.props['aria-current'])\n      }) as React.ReactElement<LinkBaseProps> | undefined\n\n      useEffect(() => {\n        // check if there is an anchored nav in the SubNav.SubMenu child\n        const hasAnchorVariant = childrenArr.some(child => {\n          if (isValidElement<LinkBaseProps>(child) && child.type === LinkBase) {\n            const childNodes = Children.toArray(child.props.children)\n            const maybeSubMenu = childNodes[1]\n            if (\n              isValidElement<SubMenuProps>(maybeSubMenu) &&\n              maybeSubMenu.type === SubMenuBase &&\n              maybeSubMenu.props.variant === 'anchor'\n            ) {\n              return true\n            }\n          }\n          return false\n        })\n        setHasAnchoredNav(hasAnchorVariant)\n      }, [childrenArr])\n\n      const {\n        heading: HeadingChild,\n        subheading: SubHeadingChild,\n        links: LinkChildren,\n        action: ActionChild,\n      } = childrenArr.reduce(\n        (\n          acc: {\n            heading?: React.ReactElement<HeadingBaseProps>\n            subheading?: React.ReactElement<SubHeadingBaseProps>\n            links: React.ReactElement<LinkBaseProps>[]\n            action?: React.ReactElement<SubNavActionProps>\n          },\n          child,\n        ) => {\n          if (isValidElement(child)) {\n            if (child.type === HeadingBase) {\n              acc.heading = child as React.ReactElement<HeadingBaseProps>\n            } else if (child.type === SubHeadingBase) {\n              acc.subheading = child as React.ReactElement<SubHeadingBaseProps>\n            } else if (child.type === LinkBase) {\n              const linkChild = child as React.ReactElement<LinkBaseProps>\n              const childNodes = Children.toArray(linkChild.props.children)\n              const [link, subMenu] = childNodes\n              const isAnchorVariant =\n                isValidElement<SubMenuProps>(subMenu) &&\n                subMenu.type === SubMenuBase &&\n                subMenu.props.variant === 'anchor'\n\n              acc.links.push(\n                React.cloneElement(linkChild, {\n                  ...(isAnchorVariant ? {children: [link]} : {}),\n                  onClick: linkChild.props['aria-current'] ? closeMenuCallback : linkChild.props.onClick,\n                }),\n              )\n            } else if (child.type === ActionBase) {\n              acc.action = child as React.ReactElement<SubNavActionProps>\n            }\n          }\n          return acc\n        },\n        {heading: undefined, subheading: undefined, links: [], action: undefined},\n      )\n\n      const activeLinkChildren = activeLink ? Children.toArray(activeLink.props.children) : []\n      const activeLinklabel = activeLinkChildren[0]\n\n      // needed to prevent rendering of anchor subnav inside the narrow <button> element\n      const maybeSubMenu = activeLinkChildren[1]\n      const MaybeSubNav =\n        isValidElement<SubMenuProps>(maybeSubMenu) &&\n        maybeSubMenu.type === SubMenuBase &&\n        maybeSubMenu.props.variant === 'anchor'\n          ? maybeSubMenu\n          : null\n\n      const subHeadingIsActive =\n        isValidElement<SubHeadingBaseProps>(SubHeadingChild) &&\n        SubHeadingChild.type === SubHeadingBase &&\n        Boolean(SubHeadingChild.props['aria-current'])\n\n      const NarrowButton = useMemo(\n        () => (\n          <div\n            className={clsx(styles['SubNav__overlay-toggle'], isOpenAtNarrow && styles['SubNav__overlay-toggle--open'])}\n          >\n            <span\n              className={clsx(\n                styles['SubNav__overlay-toggle-content'],\n                !activeLinklabel && styles['SubNav__overlay-toggle-content--end'],\n              )}\n            >\n              <button\n                ref={narrowButtonRef}\n                className={styles['SubNav__overlay-toggle-label']}\n                data-testid={testIds.button}\n                onClick={isOpenAtNarrow ? closeMenuCallback : handleMenuToggle}\n                aria-expanded={isOpenAtNarrow ? 'true' : 'false'}\n                aria-controls={idForLinkContainer}\n                aria-label={activeLinklabel ? `Navigation menu. Current page: ${activeLinklabel}` : 'Navigation menu'}\n              >\n                {activeLinklabel && (\n                  <Text as=\"span\" size=\"100\">\n                    {activeLinklabel}\n                  </Text>\n                )}\n                {isOpenAtNarrow ? (\n                  <TriangleUpIcon className={styles['SubNav__overlay-toggle-icon']} size={13} />\n                ) : (\n                  <TriangleDownIcon className={styles['SubNav__overlay-toggle-icon']} size={13} />\n                )}\n              </button>\n            </span>\n          </div>\n        ),\n        [activeLinklabel, closeMenuCallback, handleMenuToggle, idForLinkContainer, isOpenAtNarrow],\n      )\n\n      return (\n        <div\n          ref={rootRef}\n          className={clsx(\n            styles['SubNav__container'],\n            SubHeadingChild && styles['SubNav--has-sub-heading'],\n            SubHeadingChild && subHeadingIsActive && styles['SubNav--subHeadingActive'],\n            hasAnchoredNav && styles['SubNav__container--with-anchor-nav'],\n          )}\n        >\n          <SubNavProvider>\n            <nav\n              ref={navRef}\n              id={id}\n              className={clsx(\n                styles.SubNav,\n                isOpenAtNarrow && styles['SubNav--open'],\n                hasShadow && styles['SubNav--has-shadow'],\n                fullWidth && styles['SubNav--full-width'],\n                className,\n              )}\n              data-testid={testId || testIds.root}\n            >\n              <div ref={innerRootRef} className={styles['SubNav--header-container-outer']}>\n                <div className={styles['SubNav__header-container']}>\n                  {HeadingChild && <div className={styles['SubNav__heading-container']}>{HeadingChild}</div>}\n\n                  {SubHeadingChild && (\n                    <div\n                      className={clsx(\n                        styles['SubNav__heading-container'],\n                        styles['SubNav__subheading-container'],\n                        subHeadingIsActive && styles['SubNav__subheading-container-active'],\n                      )}\n                    >\n                      {SubHeadingChild}\n                    </div>\n                  )}\n\n                  {!isLarge && (!SubHeadingChild || subHeadingIsActive) && NarrowButton}\n\n                  {MaybeSubNav && MaybeSubNav}\n                </div>\n                {!isLarge && SubHeadingChild && !subHeadingIsActive && NarrowButton}\n                {LinkChildren.length > 0 && (\n                  <ul\n                    ref={overlayRef}\n                    id={idForLinkContainer}\n                    className={clsx(\n                      styles['SubNav__links-overlay'],\n                      isOpenAtNarrow && styles['SubNav__links-overlay--open'],\n                    )}\n                    data-testid={testIds.overlay}\n                  >\n                    {LinkChildren}\n                    {ActionChild && <li className={styles['SubNav__action-container']}>{ActionChild}</li>}\n                  </ul>\n                )}\n              </div>\n            </nav>\n          </SubNavProvider>\n        </div>\n      )\n    },\n  ),\n)\n\ntype HeadingBaseProps = {\n  href: string\n  'data-testid'?: string\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n  BaseProps<HTMLAnchorElement>\n\nconst HeadingBase = ({href, children, className, 'data-testid': testID, ...props}: HeadingBaseProps) => {\n  return (\n    <a\n      href={href}\n      className={clsx(styles['SubNav__heading'], className)}\n      data-testid={testIds.heading || testID}\n      {...props}\n    >\n      {children}\n    </a>\n  )\n}\n\ntype SubHeadingBaseProps = {\n  href: string\n  'data-testid'?: string\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n  BaseProps<HTMLAnchorElement>\n\nconst SubHeadingBase = ({href, children, className, 'data-testid': testID, ...props}: SubHeadingBaseProps) => {\n  return (\n    <a\n      href={href}\n      className={clsx(styles['SubNav__heading'], styles['SubNav__link'], styles['SubNav__subHeading'], className)}\n      data-testid={testIds.heading || testID}\n      {...props}\n    >\n      {children}\n    </a>\n  )\n}\n\ntype LinkBaseProps = {\n  href: string\n  'data-testid'?: string\n  variant?: TextProps['variant']\n  _subMenuVariant?: SubMenuVariants\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n  BaseProps<HTMLAnchorElement>\n\nconst LinkBaseWithSubmenu = forwardRef<HTMLDivElement, LinkBaseProps>(\n  (\n    {children, href, 'aria-current': ariaCurrent, 'data-testid': testId, className, _subMenuVariant, variant, ...props},\n    forwardedRef,\n  ) => {\n    const submenuId = useId()\n    const {isLarge} = useWindowSize()\n\n    const [isExpanded, setIsExpanded] = useState(false)\n    const ref = useProvidedRefOrCreate(forwardedRef as RefObject<HTMLDivElement>)\n    const subMenuChildrenRef = useRef<HTMLDivElement>(null)\n\n    useContainsFocus(ref, (containsFocus: boolean) => {\n      if (!containsFocus) {\n        setIsExpanded(false)\n      }\n    })\n\n    const expand = useCallback(() => setIsExpanded(true), [])\n    const collapse = useCallback(() => setIsExpanded(false), [])\n    const toggleExpanded = useCallback(() => setIsExpanded(prev => !prev), [])\n    const isAriaCurrent = Boolean(ariaCurrent) && ariaCurrent !== 'false'\n\n    useKeyboardEscape(collapse)\n\n    useEffect(() => {\n      if (subMenuChildrenRef.current) {\n        // Workaround to avoid React 18 / 19 type mismatches with the `inert` attribute.\n        // This approach won't immediately apply the attribute in pure SSR contexts, only post-hydration\n        // TODO: Move back to JSX when React 19 is fully adopted in Dotcom.\n        // `inert` removes the collapsed submenu from tab order and the accessibility tree\n        // without affecting visual appearance\n        subMenuChildrenRef.current.toggleAttribute('inert', isLarge && !isExpanded)\n      }\n    }, [isLarge, isExpanded])\n\n    const [label, SubMenuChildren] = children as ReactNode[]\n\n    return (\n      <div\n        className={clsx(\n          styles['SubNav__link--has-sub-menu'],\n          isExpanded && styles['SubNav__link--expanded'],\n          isAriaCurrent && styles['SubNav__link--has-active-sub-menu'],\n        )}\n        data-testid={testId || testIds.subMenu}\n        ref={ref}\n        onMouseOver={expand}\n        onMouseOut={collapse}\n        /**\n         * onFocus and onBlur need to be defined to keep the jsx-a11y/mouse-events-have-key-events\n         * eslint rule happy. The focus/blur behaviour is handled by useContainsFocus\n         */\n        onFocus={() => null}\n        onBlur={() => null}\n      >\n        <a\n          href={href}\n          className={clsx(styles['SubNav__link'], ariaCurrent && styles['SubNav__link--active'], className)}\n          aria-current={ariaCurrent}\n          {...props}\n        >\n          <Text as=\"span\" size=\"100\" weight=\"medium\" className={styles['SubNav__link-label']}>\n            {label}\n          </Text>\n        </a>\n        {isLarge && (\n          <button\n            className={styles['SubNav__sub-menu-toggle']}\n            onClick={toggleExpanded}\n            aria-expanded={isExpanded ? 'true' : 'false'}\n            aria-controls={submenuId}\n            aria-label={`${label?.toString().trim()} submenu`}\n          >\n            <TriangleDownIcon className={styles['SubNav__sub-menu-icon']} size={16} />\n          </button>\n        )}\n\n        <div id={submenuId} className={styles['SubNav__sub-menu-children']} ref={subMenuChildrenRef}>\n          {SubMenuChildren}\n        </div>\n      </div>\n    )\n  },\n)\n\nconst LinkBase = forwardRef<HTMLAnchorElement | HTMLDivElement, LinkBaseProps>((props, ref) => {\n  const [isInView, setIsInView] = useState(false)\n  const childrenArr = Children.toArray(props.children)\n\n  const hasSubMenu = childrenArr.some(child => {\n    if (isValidElement(child)) {\n      return child.type === SubMenuBase\n    }\n  })\n\n  useEffect(() => {\n    if (hasSubMenu) return\n    const targetId = props.href.replace('#', '')\n    const target = document.getElementById(targetId)\n    if (!target) return\n\n    const topOfWindow = '0px 0px -100%'\n    const observerParams = {threshold: 0, root: null, rootMargin: topOfWindow}\n\n    const handleIntersectionUpdate: IntersectionObserverCallback = ([entry]) => {\n      setIsInView(entry.isIntersecting)\n    }\n\n    const observer = new IntersectionObserver(handleIntersectionUpdate, observerParams)\n    observer.observe(target)\n    return () => observer.disconnect()\n  }, [hasSubMenu, props.href])\n\n  if (hasSubMenu) {\n    const isAnchorVariantSubMenu = childrenArr.some(child => {\n      return isValidElement<SubMenuProps>(child) && child.type === SubMenuBase && child.props.variant === 'anchor'\n    })\n\n    return (\n      <li>\n        <LinkBaseWithSubmenu\n          ref={ref as RefObject<HTMLDivElement>}\n          {...props}\n          _subMenuVariant={isAnchorVariantSubMenu ? 'anchor' : undefined}\n        />\n      </li>\n    )\n  }\n\n  const {children, href, 'aria-current': ariaCurrent, 'data-testid': testId, variant, className, ...rest} = props\n\n  return (\n    <li>\n      <a\n        href={href}\n        className={clsx(\n          styles['SubNav__link'],\n          ariaCurrent && styles['SubNav__link--active'],\n          isInView && styles['SubNav__link--is-in-view'],\n          className,\n        )}\n        aria-current={ariaCurrent}\n        data-testid={testId || testIds.link}\n        ref={ref as RefObject<HTMLAnchorElement>}\n        {...rest}\n      >\n        <Text as=\"span\" size=\"100\" weight=\"medium\" className={styles['SubNav__link-label']}>\n          {children}\n        </Text>\n      </a>\n    </li>\n  )\n})\n\ntype SubMenuProps = {\n  variant?: SubMenuVariants\n} & React.HTMLAttributes<HTMLUListElement> &\n  BaseProps<HTMLUListElement>\n\nfunction SubMenuBase({children, className, variant = 'dropdown', ...props}: SubMenuProps) {\n  const context = React.useContext(SubNavContext)\n  const navRef = useRef<HTMLElement>(null)\n\n  const {isLarge} = useWindowSize()\n\n  /**\n   * Effect is needed to prevent the bubbling of onClick events to the overlay trigger.\n   * Removing this effect will cause clicks on the anchor nav element to toggle the overlay.\n   */\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (navRef.current && !navRef.current.contains(e.target as Node)) {\n        return\n      }\n\n      if (!(e.target instanceof HTMLAnchorElement)) {\n        e.stopPropagation()\n      }\n    }\n\n    if (variant === 'anchor') {\n      document.addEventListener('click', handleClick, true) // Capture phase\n    }\n\n    return () => {\n      document.removeEventListener('click', handleClick, true)\n    }\n  }, [variant])\n\n  if (variant === 'anchor' && context?.portalRef.current) {\n    return createPortal(\n      <nav\n        ref={navRef}\n        className={clsx(styles['SubNav__sub-menu'], styles['SubNav__sub-menu--anchor'], className)}\n        role=\"navigation\"\n        aria-label=\"Sub navigation\"\n      >\n        <ul className={styles['SubNav__sub-menu-list']} {...props}>\n          {React.Children.map(children, child => {\n            if (isValidElement<LinkBaseProps>(child) && child.type === LinkBase) {\n              return React.cloneElement(child, {\n                onClick: e => {\n                  child.props.onClick?.(e)\n                },\n              })\n            }\n            return null\n          })}\n        </ul>\n      </nav>,\n      context.portalRef.current,\n    )\n  } else {\n    const Tag = isLarge ? ThemeProvider : React.Fragment\n\n    return (\n      <Tag {...(isLarge ? {colorMode: 'light'} : {})}>\n        <ul className={clsx(styles['SubNav__sub-menu'], styles[`SubNav__sub-menu--${variant}`], className)} {...props}>\n          {children}\n        </ul>\n      </Tag>\n    )\n  }\n}\n\ntype SubNavActionProps = {\n  /**\n   * Required path or location for the action button to link to.\n   */\n  href: string\n  /**\n   * Optional sizes for the button.\n   */\n  size?: (typeof ButtonSizes)[number]\n  /**\n   * Optional sizes for the button.\n   */\n  variant?: (typeof ButtonVariants)[number]\n} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>\n\nfunction ActionBase({children, href, variant = 'primary', size = 'small', ...rest}: SubNavActionProps) {\n  return (\n    <Button\n      className={styles['SubNav__action']}\n      as=\"a\"\n      href={href}\n      variant={variant}\n      data-testid={testIds.action}\n      size={size}\n      {...rest}\n    >\n      {children}\n    </Button>\n  )\n}\n\n/**\n * Use SubNav to display a secondary navigation beneath a primary header.\n * @see https://primer.style/brand/components/SubNav\n */\nexport const SubNav = Object.assign(SubNavRoot, {\n  Heading: HeadingBase,\n  SubHeading: SubHeadingBase,\n  Link: LinkBase,\n  Action: ActionBase,\n  SubMenu: SubMenuBase,\n  testIds,\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuCA,IAAM,IAAU;CACd,MAAM;CACN,IAAI,SAAS;AACX,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,UAAU;AACZ,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,OAAO;AACT,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,UAAU;AACZ,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,SAAS;AACX,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,UAAU;AACZ,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAEY,IAAwB,CAAC,YAAY,SAAS,EAOrD,IAAgB,EAA6C,KAAA,EAAU,EAEhE,UAAyB;CACpC,IAAM,IAAU,EAAW,EAAc;AACzC,KAAI,CAAC,EACH,OAAU,MAAM,wDAAwD;AAE1E,QAAO;;AAGT,SAAS,EAAe,EAAC,eAAwC;CAC/D,IAAM,IAA4B,EAAM,OAAuB,KAAK,EAC9D,IAAuB,EAAM,OAAuB,KAAK,EAEzD,IAAQ,SACL,EACL,WAAW,GACZ,GACD,EAAE,CACH;AAuBD,QArBA,QAAgB;EACd,IAAM,IAAgB,EAA0B,SAE1C,IAAW,IAAI,sBAClB,CAAC,OAAW;AACX,KAAM,OAAO,UAAU,OAAO,EAAO,+CAA+C,EAAM,oBAAoB,EAAE;KAElH,EAAC,WAAW,CAAC,EAAE,EAAC,CACjB;AAMD,SAJI,KACF,EAAS,QAAQ,EAAc,QAGpB;AACX,GAAI,KACF,EAAS,UAAU,EAAc;;IAGpC,EAAE,CAAC,EAGJ,kBAAC,EAAc,UAAf;EAA+B;YAA/B,CACG,GAED,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAwC,KAAK;aAClE,kBAAC,OAAD;IAAK,WAAW,EAAK,EAAO,iCAAiC;IAAE,KAAK;IAAwB,CAAA;GACxF,CAAA,CACiB;;;AAiB7B,IAAM,IAAa,EACjB,GACG,EAAC,OAAI,aAAU,cAAW,eAAe,GAAQ,cAAW,gBAAY,MAAQ;CAC/E,IAAM,IAAU,EAAuC,EAAiC,EAClF,IAAe,EAAM,OAAuB,KAAK,EACjD,IAAS,EAAM,OAAoB,KAAK,EACxC,IAAa,EAAM,OAAyB,KAAK,EACjD,IAAkB,EAA0B,KAAK,EACjD,CAAC,GAAgB,KAAqB,EAAS,GAAM,EACrD,IAAqB,GAAO,EAC5B,CAAC,IAAgB,MAAqB,EAAS,GAAM,EAErD,EAAC,eAAW,GAAe;AAEjC,GAAa;EAAC,cAAc;EAAc,UAAU,CAAC;EAAe,CAAC;CAErE,IAAM,IAAc,EAAS,QAAQ,EAAS,EAExC,IAAoB,QAAkB;AACtC,OACJ,EAAkB,GAAM;IACvB,CAAC,EAAQ,CAAC,EAEP,IAAmB,QAAkB;AACrC,OACJ,GAAkB,MAAQ,CAAC,EAAK;IAC/B,CAAC,EAAQ,CAAC;AAKb,CAHA,EAAkB,GAAc,EAAkB,EAClD,EAAkB,EAAkB,EAEpC,QAAgB;EACd,IAAM,IAAa,EAAO,SAEpB,UAA8B;AAClC,OAAI,GAAY;IACd,IAAM,IAAS,EAAW,uBAAuB,CAAC;AAClD,MAAW,MAAM,YAAY,6BAA6B,GAAG,OAAO,cAAc,EAAO,IAAI;;;AAiBjG,SAbI,KAAkB,CAAC,KACrB,SAAS,KAAK,MAAM,WAAW,UAC/B,GAAuB,EAEvB,OAAO,iBAAiB,UAAU,EAAsB,KAExD,SAAS,KAAK,MAAM,WAAW,QAE3B,KACF,EAAW,MAAM,eAAe,4BAA4B,SAInD;AAIX,GAHA,SAAS,KAAK,MAAM,WAAW,QAC/B,OAAO,oBAAoB,UAAU,EAAsB,EAEvD,KACF,EAAW,MAAM,eAAe,4BAA4B;;IAG/D,CAAC,GAAgB,EAAQ,CAAC;CAE7B,IAAM,IAAa,EAAY,MAAK,MAC3B,EAA8B,EAAM,IAAI,EAAQ,EAAM,MAAM,gBACnE;AAEF,SAAgB;AAgBd,KAdyB,EAAY,MAAK,MAAS;AACjD,OAAI,EAA8B,EAAM,IAAI,EAAM,SAAS,GAAU;IAEnE,IAAM,IADa,EAAS,QAAQ,EAAM,MAAM,SAC3B,CAAW;AAChC,QACE,EAA6B,EAAa,IAC1C,EAAa,SAAS,KACtB,EAAa,MAAM,YAAY,SAE/B,QAAO;;AAGX,UAAO;IAES,CAAiB;IAClC,CAAC,EAAY,CAAC;CAEjB,IAAM,EACJ,SAAS,GACT,YAAY,GACZ,OAAO,GACP,QAAQ,OACN,EAAY,QAEZ,GAMA,MACG;AACH,MAAI,EAAe,EAAM,MACnB,EAAM,SAAS,EACjB,GAAI,UAAU;WACL,EAAM,SAAS,EACxB,GAAI,aAAa;WACR,EAAM,SAAS,GAAU;GAClC,IAAM,IAAY,GAEZ,CAAC,GAAM,KADM,EAAS,QAAQ,EAAU,MAAM,SAC5B,EAClB,IACJ,EAA6B,EAAQ,IACrC,EAAQ,SAAS,KACjB,EAAQ,MAAM,YAAY;AAE5B,KAAI,MAAM,KACR,EAAM,aAAa,GAAW;IAC5B,GAAI,IAAkB,EAAC,UAAU,CAAC,EAAK,EAAC,GAAG,EAAE;IAC7C,SAAS,EAAU,MAAM,kBAAkB,IAAoB,EAAU,MAAM;IAChF,CAAC,CACH;SACQ,EAAM,SAAS,MACxB,EAAI,SAAS;AAGjB,SAAO;IAET;EAAC,SAAS,KAAA;EAAW,YAAY,KAAA;EAAW,OAAO,EAAE;EAAE,QAAQ,KAAA;EAAU,CAC1E,EAEK,KAAqB,IAAa,EAAS,QAAQ,EAAW,MAAM,SAAS,GAAG,EAAE,EAClF,IAAkB,GAAmB,IAGrC,IAAe,GAAmB,IAClC,KACJ,EAA6B,EAAa,IAC1C,EAAa,SAAS,KACtB,EAAa,MAAM,YAAY,WAC3B,IACA,MAEA,IACJ,EAAoC,EAAgB,IACpD,EAAgB,SAAS,KACzB,EAAQ,EAAgB,MAAM,iBAE1B,KAAe,QAEjB,kBAAC,OAAD;EACE,WAAW,EAAK,EAAO,2BAA2B,KAAkB,EAAO,gCAAgC;YAE3G,kBAAC,QAAD;GACE,WAAW,EACT,EAAO,mCACP,CAAC,KAAmB,EAAO,uCAC5B;aAED,kBAAC,UAAD;IACE,KAAK;IACL,WAAW,EAAO;IAClB,eAAa,EAAQ;IACrB,SAAS,IAAiB,IAAoB;IAC9C,iBAAe,IAAiB,SAAS;IACzC,iBAAe;IACf,cAAY,IAAkB,kCAAkC,MAAoB;cAPtF,CASG,KACC,kBAAC,GAAD;KAAM,IAAG;KAAO,MAAK;eAClB;KACI,CAAA,EAGP,EADD,IACE,IAEA,GAFD;KAAgB,WAAW,EAAO;KAAgC,MAAM;KAAM,CAEE,CAE3E;;GACJ,CAAA;EACH,CAAA,EAER;EAAC;EAAiB;EAAmB;EAAkB;EAAoB;EAAe,CAC3F;AAED,QACE,kBAAC,OAAD;EACE,KAAK;EACL,WAAW,EACT,EAAO,mBACP,KAAmB,EAAO,4BAC1B,KAAmB,KAAsB,EAAO,6BAChD,MAAkB,EAAO,sCAC1B;YAED,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;GACE,KAAK;GACD;GACJ,WAAW,EACT,EAAO,QACP,KAAkB,EAAO,iBACzB,KAAa,EAAO,uBACpB,KAAa,EAAO,uBACpB,EACD;GACD,eAAa,KAAU,EAAQ;aAE/B,kBAAC,OAAD;IAAK,KAAK;IAAc,WAAW,EAAO;cAA1C;KACE,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB;OACG,KAAgB,kBAAC,OAAD;QAAK,WAAW,EAAO;kBAA+B;QAAmB,CAAA;OAEzF,KACC,kBAAC,OAAD;QACE,WAAW,EACT,EAAO,8BACP,EAAO,iCACP,KAAsB,EAAO,uCAC9B;kBAEA;QACG,CAAA;OAGP,CAAC,MAAY,CAAC,KAAmB,MAAuB;OAExD,MAAe;OACZ;;KACL,CAAC,KAAW,KAAmB,CAAC,KAAsB;KACtD,EAAa,SAAS,KACrB,kBAAC,MAAD;MACE,KAAK;MACL,IAAI;MACJ,WAAW,EACT,EAAO,0BACP,KAAkB,EAAO,+BAC1B;MACD,eAAa,EAAQ;gBAPvB,CASG,GACA,MAAe,kBAAC,MAAD;OAAI,WAAW,EAAO;iBAA8B;OAAiB,CAAA,CAClF;;KAEH;;GACF,CAAA,EACS,CAAA;EACb,CAAA;EAGX,CACF,EAQK,KAAe,EAAC,SAAM,aAAU,cAAW,eAAe,GAAQ,GAAG,QAEvE,kBAAC,KAAD;CACQ;CACN,WAAW,EAAK,EAAO,iBAAoB,EAAU;CACrD,eAAa,EAAQ,WAAW;CAChC,GAAI;CAEH;CACC,CAAA,EAUF,KAAkB,EAAC,SAAM,aAAU,cAAW,eAAe,GAAQ,GAAG,QAE1E,kBAAC,KAAD;CACQ;CACN,WAAW,EAAK,EAAO,iBAAoB,EAAO,cAAiB,EAAO,oBAAuB,EAAU;CAC3G,eAAa,EAAQ,WAAW;CAChC,GAAI;CAEH;CACC,CAAA,EAYF,IAAsB,GAExB,EAAC,aAAU,SAAM,gBAAgB,GAAa,eAAe,GAAQ,cAAW,oBAAiB,YAAS,GAAG,KAC7G,MACG;CACH,IAAM,IAAY,GAAO,EACnB,EAAC,eAAW,GAAe,EAE3B,CAAC,GAAY,KAAiB,EAAS,GAAM,EAC7C,IAAM,EAAuB,EAA0C,EACvE,IAAqB,EAAuB,KAAK;AAEvD,GAAiB,IAAM,MAA2B;AAChD,EAAK,KACH,EAAc,GAAM;GAEtB;CAEF,IAAM,IAAS,QAAkB,EAAc,GAAK,EAAE,EAAE,CAAC,EACnD,IAAW,QAAkB,EAAc,GAAM,EAAE,EAAE,CAAC,EACtD,IAAiB,QAAkB,GAAc,MAAQ,CAAC,EAAK,EAAE,EAAE,CAAC,EACpE,IAAgB,EAAQ,KAAgB,MAAgB;AAI9D,CAFA,EAAkB,EAAS,EAE3B,QAAgB;AACd,EAAI,EAAmB,WAMrB,EAAmB,QAAQ,gBAAgB,SAAS,KAAW,CAAC,EAAW;IAE5E,CAAC,GAAS,EAAW,CAAC;CAEzB,IAAM,CAAC,GAAO,KAAmB;AAEjC,QACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,+BACP,KAAc,EAAO,2BACrB,KAAiB,EAAO,qCACzB;EACD,eAAa,KAAU,EAAQ;EAC1B;EACL,aAAa;EACb,YAAY;EAKZ,eAAe;EACf,cAAc;YAfhB;GAiBE,kBAAC,KAAD;IACQ;IACN,WAAW,EAAK,EAAO,cAAiB,KAAe,EAAO,yBAAyB,EAAU;IACjG,gBAAc;IACd,GAAI;cAEJ,kBAAC,GAAD;KAAM,IAAG;KAAO,MAAK;KAAM,QAAO;KAAS,WAAW,EAAO;eAC1D;KACI,CAAA;IACL,CAAA;GACH,KACC,kBAAC,UAAD;IACE,WAAW,EAAO;IAClB,SAAS;IACT,iBAAe,IAAa,SAAS;IACrC,iBAAe;IACf,cAAY,GAAG,GAAO,UAAU,CAAC,MAAM,CAAC;cAExC,kBAAC,GAAD;KAAkB,WAAW,EAAO;KAA0B,MAAM;KAAM,CAAA;IACnE,CAAA;GAGX,kBAAC,OAAD;IAAK,IAAI;IAAW,WAAW,EAAO;IAA8B,KAAK;cACtE;IACG,CAAA;GACF;;EAGX,EAEK,IAAW,GAA+D,GAAO,MAAQ;CAC7F,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,IAAc,EAAS,QAAQ,EAAM,SAAS,EAE9C,IAAa,EAAY,MAAK,MAAS;AAC3C,MAAI,EAAe,EAAM,CACvB,QAAO,EAAM,SAAS;GAExB;AAoBF,KAlBA,QAAgB;AACd,MAAI,EAAY;EAChB,IAAM,IAAW,EAAM,KAAK,QAAQ,KAAK,GAAG,EACtC,IAAS,SAAS,eAAe,EAAS;AAChD,MAAI,CAAC,EAAQ;EASb,IAAM,IAAW,IAAI,sBAJ2C,CAAC,OAAW;AAC1E,KAAY,EAAM,eAAe;KAGiC;GAN5C,WAAW;GAAG,MAAM;GAAM,YAAY;GAMM,CAAe;AAEnF,SADA,EAAS,QAAQ,EAAO,QACX,EAAS,YAAY;IACjC,CAAC,GAAY,EAAM,KAAK,CAAC,EAExB,GAAY;EACd,IAAM,IAAyB,EAAY,MAAK,MACvC,EAA6B,EAAM,IAAI,EAAM,SAAS,KAAe,EAAM,MAAM,YAAY,SACpG;AAEF,SACE,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;GACO;GACL,GAAI;GACJ,iBAAiB,IAAyB,WAAW,KAAA;GACrD,CAAA,EACC,CAAA;;CAIT,IAAM,EAAC,aAAU,SAAM,gBAAgB,GAAa,eAAe,GAAQ,YAAS,cAAW,GAAG,MAAQ;AAE1G,QACE,kBAAC,MAAD,EAAA,UACE,kBAAC,KAAD;EACQ;EACN,WAAW,EACT,EAAO,cACP,KAAe,EAAO,yBACtB,KAAY,EAAO,6BACnB,EACD;EACD,gBAAc;EACd,eAAa,KAAU,EAAQ;EAC1B;EACL,GAAI;YAEJ,kBAAC,GAAD;GAAM,IAAG;GAAO,MAAK;GAAM,QAAO;GAAS,WAAW,EAAO;GAC1D;GACI,CAAA;EACL,CAAA,EACD,CAAA;EAEP;AAOF,SAAS,EAAY,EAAC,aAAU,cAAW,aAAU,YAAY,GAAG,KAAsB;CACxF,IAAM,IAAU,EAAM,WAAW,EAAc,EACzC,IAAS,EAAoB,KAAK,EAElC,EAAC,eAAW,GAAe;AAoD/B,QA9CF,QAAgB;EACd,IAAM,KAAe,MAAkB;AACjC,KAAO,WAAW,CAAC,EAAO,QAAQ,SAAS,EAAE,OAAe,IAI1D,EAAE,kBAAkB,qBACxB,EAAE,iBAAiB;;AAQvB,SAJI,MAAY,YACd,SAAS,iBAAiB,SAAS,GAAa,GAAK,QAG1C;AACX,YAAS,oBAAoB,SAAS,GAAa,GAAK;;IAEzD,CAAC,EAAQ,CAAC,EAET,MAAY,YAAY,GAAS,UAAU,UACtC,EACL,kBAAC,OAAD;EACE,KAAK;EACL,WAAW,EAAK,EAAO,qBAAqB,EAAO,6BAA6B,EAAU;EAC1F,MAAK;EACL,cAAW;YAEX,kBAAC,MAAD;GAAI,WAAW,EAAO;GAA0B,GAAI;aACjD,EAAM,SAAS,IAAI,IAAU,MACxB,EAA8B,EAAM,IAAI,EAAM,SAAS,IAClD,EAAM,aAAa,GAAO,EAC/B,UAAS,MAAK;AACZ,MAAM,MAAM,UAAU,EAAE;MAE3B,CAAC,GAEG,KACP;GACC,CAAA;EACD,CAAA,EACN,EAAQ,UAAU,QACnB,GAKC,kBAHU,IAAU,IAAgB,EAAM,UAG1C;EAAK,GAAK,IAAU,EAAC,WAAW,SAAQ,GAAG,EAAE;YAC3C,kBAAC,MAAD;GAAI,WAAW,EAAK,EAAO,qBAAqB,EAAO,qBAAqB,MAAY,EAAU;GAAE,GAAI;GACrG;GACE,CAAA;EACD,CAAA;;AAoBZ,SAAS,EAAW,EAAC,aAAU,SAAM,aAAU,WAAW,UAAO,SAAS,GAAG,KAA0B;AACrG,QACE,kBAAC,GAAD;EACE,WAAW,EAAO;EAClB,IAAG;EACG;EACG;EACT,eAAa,EAAQ;EACf;EACN,GAAI;EAEH;EACM,CAAA;;AAQb,IAAa,IAAS,OAAO,OAAO,GAAY;CAC9C,SAAS;CACT,YAAY;CACZ,MAAM;CACN,QAAQ;CACR,SAAS;CACT;CACD,CAAC"}
+{"version":3,"file":"SubNav.js","names":[],"sources":["../../src/SubNav/SubNav.tsx"],"sourcesContent":["import React, {\n  Children,\n  createContext,\n  forwardRef,\n  isValidElement,\n  memo,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type PropsWithChildren,\n  type ReactNode,\n  type RefObject,\n} from 'react'\nimport {Button, ButtonSizes, ButtonVariants, Text, TextProps, ThemeProvider, useWindowSize} from '..'\n\nimport {clsx} from 'clsx'\nimport {TriangleDownIcon, TriangleUpIcon} from '@primer/octicons-react'\nimport {useId} from '../hooks/useId'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport {useFocusTrap} from '../hooks/useFocusTrap'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {useContainsFocus} from './useContainsFocus'\n\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './SubNav.module.css'\nimport {createPortal} from 'react-dom'\n\nconst testIds = {\n  root: 'SubNav-root',\n  get button() {\n    return `${this.root}-button`\n  },\n  get overlay() {\n    return `${this.root}-overlay`\n  },\n  get link() {\n    return `${this.root}-link`\n  },\n  get heading() {\n    return `${this.root}-heading`\n  },\n  get action() {\n    return `${this.root}-action`\n  },\n  get subMenu() {\n    return `${this.root}-sub-menu`\n  },\n}\n\nexport const SubNavSubMenuVariants = ['dropdown', 'anchor'] as const\ntype SubMenuVariants = (typeof SubNavSubMenuVariants)[number]\n\ntype SubNavContextType = {\n  portalRef: RefObject<HTMLDivElement | null>\n}\n\nconst SubNavContext = createContext<SubNavContextType | undefined>(undefined)\n\nexport const useSubNavContext = () => {\n  const context = useContext(SubNavContext)\n  if (!context) {\n    throw new Error('useSubNavContext must be used within a SubNavProvider')\n  }\n  return context\n}\n\nfunction SubNavProvider({children}: {children: React.ReactNode}) {\n  const anchoredNavOuterPortalRef = React.useRef<HTMLDivElement>(null)\n  const anchoredNavPortalRef = React.useRef<HTMLDivElement>(null)\n\n  const value = useMemo(\n    () => ({\n      portalRef: anchoredNavPortalRef,\n    }),\n    [],\n  )\n\n  useEffect(() => {\n    const menuContainer = anchoredNavOuterPortalRef.current\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        entry.target.classList.toggle(styles['SubNav__anchor-menu-outer-container--stuck'], entry.intersectionRatio < 1)\n      },\n      {threshold: [1]},\n    )\n\n    if (menuContainer) {\n      observer.observe(menuContainer)\n    }\n\n    return () => {\n      if (menuContainer) {\n        observer.unobserve(menuContainer)\n      }\n    }\n  }, [])\n\n  return (\n    <SubNavContext.Provider value={value}>\n      {children}\n\n      <div className={styles['SubNav__anchor-menu-outer-container']} ref={anchoredNavOuterPortalRef}>\n        <div className={clsx(styles['SubNav__anchor-menu-container'])} ref={anchoredNavPortalRef} />\n      </div>\n    </SubNavContext.Provider>\n  )\n}\n\nexport type SubNavProps = {\n  /**\n   * @deprecated The hasShadow prop is deprecated and will be removed in a future release.\n   */\n  hasShadow?: boolean\n  /**\n   * Allows the SubNav to be used at full width,\n   * removing any internal padding and guttering.\n   */\n  fullWidth?: boolean\n  'data-testid'?: string\n} & PropsWithChildren<BaseProps<HTMLDivElement>>\n\nconst SubNavRoot = memo(\n  forwardRef<HTMLDivElement, SubNavProps>(\n    ({id, children, className, 'data-testid': testId, fullWidth, hasShadow}, ref) => {\n      const rootRef = useProvidedRefOrCreate<HTMLDivElement>(ref as RefObject<HTMLDivElement>)\n      const innerRootRef = React.useRef<HTMLDivElement>(null)\n      const navRef = React.useRef<HTMLElement>(null)\n      const overlayRef = React.useRef<HTMLUListElement>(null)\n      const narrowButtonRef = useRef<HTMLButtonElement>(null)\n      const [isOpenAtNarrow, setIsOpenAtNarrow] = useState(false)\n      const idForLinkContainer = useId()\n      const [hasAnchoredNav, setHasAnchoredNav] = useState(false)\n\n      const {isLarge} = useWindowSize()\n\n      useFocusTrap({containerRef: innerRootRef, disabled: !isOpenAtNarrow})\n\n      const childrenArr = Children.toArray(children)\n\n      const closeMenuCallback = useCallback(() => {\n        if (isLarge) return\n        setIsOpenAtNarrow(false)\n      }, [isLarge])\n\n      const handleMenuToggle = useCallback(() => {\n        if (isLarge) return\n        setIsOpenAtNarrow(prev => !prev)\n      }, [isLarge])\n\n      useOnClickOutside(innerRootRef, closeMenuCallback)\n      useKeyboardEscape(closeMenuCallback)\n\n      useEffect(() => {\n        const navElement = navRef.current\n\n        const updateAvailableHeight = () => {\n          if (navElement) {\n            const navTop = navElement.getBoundingClientRect().top\n            navElement.style.setProperty('--subnav-available-height', `${window.innerHeight - navTop}px`)\n          }\n        }\n\n        if (isOpenAtNarrow && !isLarge) {\n          document.body.style.overflow = 'hidden'\n          updateAvailableHeight()\n          // eslint-disable-next-line github/prefer-observers\n          window.addEventListener('resize', updateAvailableHeight)\n        } else {\n          document.body.style.overflow = 'auto'\n\n          if (navElement) {\n            navElement.style.removeProperty('--subnav-available-height')\n          }\n        }\n\n        return () => {\n          document.body.style.overflow = 'auto'\n          window.removeEventListener('resize', updateAvailableHeight)\n\n          if (navElement) {\n            navElement.style.removeProperty('--subnav-available-height')\n          }\n        }\n      }, [isOpenAtNarrow, isLarge])\n\n      const activeLink = childrenArr.find(child => {\n        return isValidElement<LinkBaseProps>(child) && Boolean(child.props['aria-current'])\n      }) as React.ReactElement<LinkBaseProps> | undefined\n\n      useEffect(() => {\n        // check if there is an anchored nav in the SubNav.SubMenu child\n        const hasAnchorVariant = childrenArr.some(child => {\n          if (isValidElement<LinkBaseProps>(child) && child.type === LinkBase) {\n            const childNodes = Children.toArray(child.props.children)\n            const maybeSubMenu = childNodes[1]\n            if (\n              isValidElement<SubMenuProps>(maybeSubMenu) &&\n              maybeSubMenu.type === SubMenuBase &&\n              maybeSubMenu.props.variant === 'anchor'\n            ) {\n              return true\n            }\n          }\n          return false\n        })\n        setHasAnchoredNav(hasAnchorVariant)\n      }, [childrenArr])\n\n      const {\n        heading: HeadingChild,\n        subheading: SubHeadingChild,\n        links: LinkChildren,\n        action: ActionChild,\n      } = childrenArr.reduce(\n        (\n          acc: {\n            heading?: React.ReactElement<HeadingBaseProps>\n            subheading?: React.ReactElement<SubHeadingBaseProps>\n            links: React.ReactElement<LinkBaseProps>[]\n            action?: React.ReactElement<SubNavActionProps>\n          },\n          child,\n        ) => {\n          if (isValidElement(child)) {\n            if (child.type === HeadingBase) {\n              acc.heading = child as React.ReactElement<HeadingBaseProps>\n            } else if (child.type === SubHeadingBase) {\n              acc.subheading = child as React.ReactElement<SubHeadingBaseProps>\n            } else if (child.type === LinkBase) {\n              const linkChild = child as React.ReactElement<LinkBaseProps>\n              const childNodes = Children.toArray(linkChild.props.children)\n              const [link, subMenu] = childNodes\n              const isAnchorVariant =\n                isValidElement<SubMenuProps>(subMenu) &&\n                subMenu.type === SubMenuBase &&\n                subMenu.props.variant === 'anchor'\n\n              acc.links.push(\n                React.cloneElement(linkChild, {\n                  ...(isAnchorVariant ? {children: [link]} : {}),\n                  onClick: linkChild.props['aria-current'] ? closeMenuCallback : linkChild.props.onClick,\n                }),\n              )\n            } else if (child.type === ActionBase) {\n              acc.action = child as React.ReactElement<SubNavActionProps>\n            }\n          }\n          return acc\n        },\n        {heading: undefined, subheading: undefined, links: [], action: undefined},\n      )\n\n      const activeLinkChildren = activeLink ? Children.toArray(activeLink.props.children) : []\n      const activeLinklabel = activeLinkChildren[0]\n\n      // needed to prevent rendering of anchor subnav inside the narrow <button> element\n      const maybeSubMenu = activeLinkChildren[1]\n      const MaybeSubNav =\n        isValidElement<SubMenuProps>(maybeSubMenu) &&\n        maybeSubMenu.type === SubMenuBase &&\n        maybeSubMenu.props.variant === 'anchor'\n          ? maybeSubMenu\n          : null\n\n      const subHeadingIsActive =\n        isValidElement<SubHeadingBaseProps>(SubHeadingChild) &&\n        SubHeadingChild.type === SubHeadingBase &&\n        Boolean(SubHeadingChild.props['aria-current'])\n      const narrowButtonLabel = SubHeadingChild ? activeLinklabel : null\n\n      const NarrowButton = useMemo(\n        () => (\n          <div\n            className={clsx(styles['SubNav__overlay-toggle'], isOpenAtNarrow && styles['SubNav__overlay-toggle--open'])}\n          >\n            <span\n              className={clsx(\n                styles['SubNav__overlay-toggle-content'],\n                !narrowButtonLabel && styles['SubNav__overlay-toggle-content--end'],\n              )}\n            >\n              <button\n                ref={narrowButtonRef}\n                className={styles['SubNav__overlay-toggle-label']}\n                data-testid={testIds.button}\n                onClick={isOpenAtNarrow ? closeMenuCallback : handleMenuToggle}\n                aria-expanded={isOpenAtNarrow ? 'true' : 'false'}\n                aria-controls={idForLinkContainer}\n                aria-label={activeLinklabel ? `Navigation menu. Current page: ${activeLinklabel}` : 'Navigation menu'}\n              >\n                {narrowButtonLabel && (\n                  <Text as=\"span\" size=\"100\">\n                    {narrowButtonLabel}\n                  </Text>\n                )}\n                {isOpenAtNarrow ? (\n                  <TriangleUpIcon className={styles['SubNav__overlay-toggle-icon']} size={13} />\n                ) : (\n                  <TriangleDownIcon className={styles['SubNav__overlay-toggle-icon']} size={13} />\n                )}\n              </button>\n            </span>\n          </div>\n        ),\n        [activeLinklabel, closeMenuCallback, handleMenuToggle, idForLinkContainer, isOpenAtNarrow, narrowButtonLabel],\n      )\n\n      return (\n        <div\n          ref={rootRef}\n          className={clsx(\n            styles['SubNav__container'],\n            SubHeadingChild && styles['SubNav--has-sub-heading'],\n            SubHeadingChild && subHeadingIsActive && styles['SubNav--subHeadingActive'],\n            hasAnchoredNav && styles['SubNav__container--with-anchor-nav'],\n          )}\n        >\n          <SubNavProvider>\n            <nav\n              ref={navRef}\n              id={id}\n              className={clsx(\n                styles.SubNav,\n                isOpenAtNarrow && styles['SubNav--open'],\n                hasShadow && styles['SubNav--has-shadow'],\n                fullWidth && styles['SubNav--full-width'],\n                className,\n              )}\n              data-testid={testId || testIds.root}\n            >\n              <div ref={innerRootRef} className={styles['SubNav--header-container-outer']}>\n                <div className={styles['SubNav__header-container']}>\n                  {HeadingChild && <div className={styles['SubNav__heading-container']}>{HeadingChild}</div>}\n\n                  {SubHeadingChild && (\n                    <div\n                      className={clsx(\n                        styles['SubNav__heading-container'],\n                        styles['SubNav__subheading-container'],\n                        subHeadingIsActive && styles['SubNav__subheading-container-active'],\n                      )}\n                    >\n                      {SubHeadingChild}\n                    </div>\n                  )}\n\n                  {!isLarge && (!SubHeadingChild || subHeadingIsActive) && NarrowButton}\n\n                  {MaybeSubNav && MaybeSubNav}\n                </div>\n                {!isLarge && SubHeadingChild && !subHeadingIsActive && NarrowButton}\n                {LinkChildren.length > 0 && (\n                  <ul\n                    ref={overlayRef}\n                    id={idForLinkContainer}\n                    className={clsx(\n                      styles['SubNav__links-overlay'],\n                      isOpenAtNarrow && styles['SubNav__links-overlay--open'],\n                    )}\n                    data-testid={testIds.overlay}\n                  >\n                    {LinkChildren}\n                    {ActionChild && <li className={styles['SubNav__action-container']}>{ActionChild}</li>}\n                  </ul>\n                )}\n              </div>\n            </nav>\n          </SubNavProvider>\n        </div>\n      )\n    },\n  ),\n)\n\ntype HeadingBaseProps = {\n  href: string\n  'data-testid'?: string\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n  BaseProps<HTMLAnchorElement>\n\nconst HeadingBase = ({href, children, className, 'data-testid': testID, ...props}: HeadingBaseProps) => {\n  return (\n    <a\n      href={href}\n      className={clsx(styles['SubNav__heading'], className)}\n      data-testid={testIds.heading || testID}\n      {...props}\n    >\n      {children}\n    </a>\n  )\n}\n\ntype SubHeadingBaseProps = {\n  href: string\n  'data-testid'?: string\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n  BaseProps<HTMLAnchorElement>\n\nconst SubHeadingBase = ({href, children, className, 'data-testid': testID, ...props}: SubHeadingBaseProps) => {\n  return (\n    <a\n      href={href}\n      className={clsx(styles['SubNav__heading'], styles['SubNav__link'], styles['SubNav__subHeading'], className)}\n      data-testid={testIds.heading || testID}\n      {...props}\n    >\n      {children}\n    </a>\n  )\n}\n\ntype LinkBaseProps = {\n  href: string\n  'data-testid'?: string\n  variant?: TextProps['variant']\n  _subMenuVariant?: SubMenuVariants\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n  BaseProps<HTMLAnchorElement>\n\nconst LinkBaseWithSubmenu = forwardRef<HTMLDivElement, LinkBaseProps>(\n  (\n    {children, href, 'aria-current': ariaCurrent, 'data-testid': testId, className, _subMenuVariant, variant, ...props},\n    forwardedRef,\n  ) => {\n    const submenuId = useId()\n    const {isLarge} = useWindowSize()\n\n    const [isExpanded, setIsExpanded] = useState(false)\n    const ref = useProvidedRefOrCreate(forwardedRef as RefObject<HTMLDivElement>)\n    const subMenuChildrenRef = useRef<HTMLDivElement>(null)\n\n    useContainsFocus(ref, (containsFocus: boolean) => {\n      if (!containsFocus) {\n        setIsExpanded(false)\n      }\n    })\n\n    const expand = useCallback(() => setIsExpanded(true), [])\n    const collapse = useCallback(() => setIsExpanded(false), [])\n    const toggleExpanded = useCallback(() => setIsExpanded(prev => !prev), [])\n    const isAriaCurrent = Boolean(ariaCurrent) && ariaCurrent !== 'false'\n\n    useKeyboardEscape(collapse)\n\n    useEffect(() => {\n      if (subMenuChildrenRef.current) {\n        // Workaround to avoid React 18 / 19 type mismatches with the `inert` attribute.\n        // This approach won't immediately apply the attribute in pure SSR contexts, only post-hydration\n        // TODO: Move back to JSX when React 19 is fully adopted in Dotcom.\n        // `inert` removes the collapsed submenu from tab order and the accessibility tree\n        // without affecting visual appearance\n        subMenuChildrenRef.current.toggleAttribute('inert', isLarge && !isExpanded)\n      }\n    }, [isLarge, isExpanded])\n\n    const [label, SubMenuChildren] = children as ReactNode[]\n\n    return (\n      <div\n        className={clsx(\n          styles['SubNav__link--has-sub-menu'],\n          isExpanded && styles['SubNav__link--expanded'],\n          isAriaCurrent && styles['SubNav__link--has-active-sub-menu'],\n        )}\n        data-testid={testId || testIds.subMenu}\n        ref={ref}\n        onMouseOver={expand}\n        onMouseOut={collapse}\n        /**\n         * onFocus and onBlur need to be defined to keep the jsx-a11y/mouse-events-have-key-events\n         * eslint rule happy. The focus/blur behaviour is handled by useContainsFocus\n         */\n        onFocus={() => null}\n        onBlur={() => null}\n      >\n        <a\n          href={href}\n          className={clsx(styles['SubNav__link'], ariaCurrent && styles['SubNav__link--active'], className)}\n          aria-current={ariaCurrent}\n          {...props}\n        >\n          <Text as=\"span\" size=\"100\" weight=\"medium\" className={styles['SubNav__link-label']}>\n            {label}\n          </Text>\n        </a>\n        {isLarge && (\n          <button\n            className={styles['SubNav__sub-menu-toggle']}\n            onClick={toggleExpanded}\n            aria-expanded={isExpanded ? 'true' : 'false'}\n            aria-controls={submenuId}\n            aria-label={`${label?.toString().trim()} submenu`}\n          >\n            <TriangleDownIcon className={styles['SubNav__sub-menu-icon']} size={16} />\n          </button>\n        )}\n\n        <div id={submenuId} className={styles['SubNav__sub-menu-children']} ref={subMenuChildrenRef}>\n          {SubMenuChildren}\n        </div>\n      </div>\n    )\n  },\n)\n\nconst LinkBase = forwardRef<HTMLAnchorElement | HTMLDivElement, LinkBaseProps>((props, ref) => {\n  const [isInView, setIsInView] = useState(false)\n  const childrenArr = Children.toArray(props.children)\n\n  const hasSubMenu = childrenArr.some(child => {\n    if (isValidElement(child)) {\n      return child.type === SubMenuBase\n    }\n  })\n\n  useEffect(() => {\n    if (hasSubMenu) return\n    const targetId = props.href.replace('#', '')\n    const target = document.getElementById(targetId)\n    if (!target) return\n\n    const topOfWindow = '0px 0px -100%'\n    const observerParams = {threshold: 0, root: null, rootMargin: topOfWindow}\n\n    const handleIntersectionUpdate: IntersectionObserverCallback = ([entry]) => {\n      setIsInView(entry.isIntersecting)\n    }\n\n    const observer = new IntersectionObserver(handleIntersectionUpdate, observerParams)\n    observer.observe(target)\n    return () => observer.disconnect()\n  }, [hasSubMenu, props.href])\n\n  if (hasSubMenu) {\n    const isAnchorVariantSubMenu = childrenArr.some(child => {\n      return isValidElement<SubMenuProps>(child) && child.type === SubMenuBase && child.props.variant === 'anchor'\n    })\n\n    return (\n      <li>\n        <LinkBaseWithSubmenu\n          ref={ref as RefObject<HTMLDivElement>}\n          {...props}\n          _subMenuVariant={isAnchorVariantSubMenu ? 'anchor' : undefined}\n        />\n      </li>\n    )\n  }\n\n  const {children, href, 'aria-current': ariaCurrent, 'data-testid': testId, variant, className, ...rest} = props\n\n  return (\n    <li>\n      <a\n        href={href}\n        className={clsx(\n          styles['SubNav__link'],\n          ariaCurrent && styles['SubNav__link--active'],\n          isInView && styles['SubNav__link--is-in-view'],\n          className,\n        )}\n        aria-current={ariaCurrent}\n        data-testid={testId || testIds.link}\n        ref={ref as RefObject<HTMLAnchorElement>}\n        {...rest}\n      >\n        <Text as=\"span\" size=\"100\" weight=\"medium\" className={styles['SubNav__link-label']}>\n          {children}\n        </Text>\n      </a>\n    </li>\n  )\n})\n\ntype SubMenuProps = {\n  variant?: SubMenuVariants\n} & React.HTMLAttributes<HTMLUListElement> &\n  BaseProps<HTMLUListElement>\n\nfunction SubMenuBase({children, className, variant = 'dropdown', ...props}: SubMenuProps) {\n  const context = React.useContext(SubNavContext)\n  const navRef = useRef<HTMLElement>(null)\n\n  const {isLarge} = useWindowSize()\n\n  /**\n   * Effect is needed to prevent the bubbling of onClick events to the overlay trigger.\n   * Removing this effect will cause clicks on the anchor nav element to toggle the overlay.\n   */\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (navRef.current && !navRef.current.contains(e.target as Node)) {\n        return\n      }\n\n      if (!(e.target instanceof HTMLAnchorElement)) {\n        e.stopPropagation()\n      }\n    }\n\n    if (variant === 'anchor') {\n      document.addEventListener('click', handleClick, true) // Capture phase\n    }\n\n    return () => {\n      document.removeEventListener('click', handleClick, true)\n    }\n  }, [variant])\n\n  if (variant === 'anchor' && context?.portalRef.current) {\n    return createPortal(\n      <nav\n        ref={navRef}\n        className={clsx(styles['SubNav__sub-menu'], styles['SubNav__sub-menu--anchor'], className)}\n        role=\"navigation\"\n        aria-label=\"Sub navigation\"\n      >\n        <ul className={styles['SubNav__sub-menu-list']} {...props}>\n          {React.Children.map(children, child => {\n            if (isValidElement<LinkBaseProps>(child) && child.type === LinkBase) {\n              return React.cloneElement(child, {\n                onClick: e => {\n                  child.props.onClick?.(e)\n                },\n              })\n            }\n            return null\n          })}\n        </ul>\n      </nav>,\n      context.portalRef.current,\n    )\n  } else {\n    const Tag = isLarge ? ThemeProvider : React.Fragment\n\n    return (\n      <Tag {...(isLarge ? {colorMode: 'light'} : {})}>\n        <ul className={clsx(styles['SubNav__sub-menu'], styles[`SubNav__sub-menu--${variant}`], className)} {...props}>\n          {children}\n        </ul>\n      </Tag>\n    )\n  }\n}\n\ntype SubNavActionProps = {\n  /**\n   * Required path or location for the action button to link to.\n   */\n  href: string\n  /**\n   * Optional sizes for the button.\n   */\n  size?: (typeof ButtonSizes)[number]\n  /**\n   * Optional sizes for the button.\n   */\n  variant?: (typeof ButtonVariants)[number]\n} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>\n\nfunction ActionBase({children, href, variant = 'primary', size = 'small', ...rest}: SubNavActionProps) {\n  return (\n    <Button\n      className={styles['SubNav__action']}\n      as=\"a\"\n      href={href}\n      variant={variant}\n      data-testid={testIds.action}\n      size={size}\n      {...rest}\n    >\n      {children}\n    </Button>\n  )\n}\n\n/**\n * Use SubNav to display a secondary navigation beneath a primary header.\n * @see https://primer.style/brand/components/SubNav\n */\nexport const SubNav = Object.assign(SubNavRoot, {\n  Heading: HeadingBase,\n  SubHeading: SubHeadingBase,\n  Link: LinkBase,\n  Action: ActionBase,\n  SubMenu: SubMenuBase,\n  testIds,\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuCA,IAAM,IAAU;CACd,MAAM;CACN,IAAI,SAAS;AACX,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,UAAU;AACZ,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,OAAO;AACT,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,UAAU;AACZ,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,SAAS;AACX,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,UAAU;AACZ,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAEY,IAAwB,CAAC,YAAY,SAAS,EAOrD,IAAgB,EAA6C,KAAA,EAAU,EAEhE,UAAyB;CACpC,IAAM,IAAU,EAAW,EAAc;AACzC,KAAI,CAAC,EACH,OAAU,MAAM,wDAAwD;AAE1E,QAAO;;AAGT,SAAS,EAAe,EAAC,eAAwC;CAC/D,IAAM,IAA4B,EAAM,OAAuB,KAAK,EAC9D,IAAuB,EAAM,OAAuB,KAAK,EAEzD,IAAQ,SACL,EACL,WAAW,GACZ,GACD,EAAE,CACH;AAuBD,QArBA,QAAgB;EACd,IAAM,IAAgB,EAA0B,SAE1C,IAAW,IAAI,sBAClB,CAAC,OAAW;AACX,KAAM,OAAO,UAAU,OAAO,EAAO,+CAA+C,EAAM,oBAAoB,EAAE;KAElH,EAAC,WAAW,CAAC,EAAE,EAAC,CACjB;AAMD,SAJI,KACF,EAAS,QAAQ,EAAc,QAGpB;AACX,GAAI,KACF,EAAS,UAAU,EAAc;;IAGpC,EAAE,CAAC,EAGJ,kBAAC,EAAc,UAAf;EAA+B;YAA/B,CACG,GAED,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAwC,KAAK;aAClE,kBAAC,OAAD;IAAK,WAAW,EAAK,EAAO,iCAAiC;IAAE,KAAK;IAAwB,CAAA;GACxF,CAAA,CACiB;;;AAiB7B,IAAM,IAAa,EACjB,GACG,EAAC,OAAI,aAAU,cAAW,eAAe,GAAQ,cAAW,gBAAY,MAAQ;CAC/E,IAAM,IAAU,EAAuC,EAAiC,EAClF,IAAe,EAAM,OAAuB,KAAK,EACjD,IAAS,EAAM,OAAoB,KAAK,EACxC,IAAa,EAAM,OAAyB,KAAK,EACjD,IAAkB,EAA0B,KAAK,EACjD,CAAC,GAAgB,KAAqB,EAAS,GAAM,EACrD,IAAqB,GAAO,EAC5B,CAAC,IAAgB,MAAqB,EAAS,GAAM,EAErD,EAAC,eAAW,GAAe;AAEjC,GAAa;EAAC,cAAc;EAAc,UAAU,CAAC;EAAe,CAAC;CAErE,IAAM,IAAc,EAAS,QAAQ,EAAS,EAExC,IAAoB,QAAkB;AACtC,OACJ,EAAkB,GAAM;IACvB,CAAC,EAAQ,CAAC,EAEP,IAAmB,QAAkB;AACrC,OACJ,GAAkB,MAAQ,CAAC,EAAK;IAC/B,CAAC,EAAQ,CAAC;AAKb,CAHA,EAAkB,GAAc,EAAkB,EAClD,EAAkB,EAAkB,EAEpC,QAAgB;EACd,IAAM,IAAa,EAAO,SAEpB,UAA8B;AAClC,OAAI,GAAY;IACd,IAAM,IAAS,EAAW,uBAAuB,CAAC;AAClD,MAAW,MAAM,YAAY,6BAA6B,GAAG,OAAO,cAAc,EAAO,IAAI;;;AAiBjG,SAbI,KAAkB,CAAC,KACrB,SAAS,KAAK,MAAM,WAAW,UAC/B,GAAuB,EAEvB,OAAO,iBAAiB,UAAU,EAAsB,KAExD,SAAS,KAAK,MAAM,WAAW,QAE3B,KACF,EAAW,MAAM,eAAe,4BAA4B,SAInD;AAIX,GAHA,SAAS,KAAK,MAAM,WAAW,QAC/B,OAAO,oBAAoB,UAAU,EAAsB,EAEvD,KACF,EAAW,MAAM,eAAe,4BAA4B;;IAG/D,CAAC,GAAgB,EAAQ,CAAC;CAE7B,IAAM,IAAa,EAAY,MAAK,MAC3B,EAA8B,EAAM,IAAI,EAAQ,EAAM,MAAM,gBACnE;AAEF,SAAgB;AAgBd,KAdyB,EAAY,MAAK,MAAS;AACjD,OAAI,EAA8B,EAAM,IAAI,EAAM,SAAS,GAAU;IAEnE,IAAM,IADa,EAAS,QAAQ,EAAM,MAAM,SAC3B,CAAW;AAChC,QACE,EAA6B,EAAa,IAC1C,EAAa,SAAS,KACtB,EAAa,MAAM,YAAY,SAE/B,QAAO;;AAGX,UAAO;IAES,CAAiB;IAClC,CAAC,EAAY,CAAC;CAEjB,IAAM,EACJ,SAAS,GACT,YAAY,GACZ,OAAO,IACP,QAAQ,OACN,EAAY,QAEZ,GAMA,MACG;AACH,MAAI,EAAe,EAAM,MACnB,EAAM,SAAS,EACjB,GAAI,UAAU;WACL,EAAM,SAAS,EACxB,GAAI,aAAa;WACR,EAAM,SAAS,GAAU;GAClC,IAAM,IAAY,GAEZ,CAAC,GAAM,KADM,EAAS,QAAQ,EAAU,MAAM,SAC5B,EAClB,IACJ,EAA6B,EAAQ,IACrC,EAAQ,SAAS,KACjB,EAAQ,MAAM,YAAY;AAE5B,KAAI,MAAM,KACR,EAAM,aAAa,GAAW;IAC5B,GAAI,IAAkB,EAAC,UAAU,CAAC,EAAK,EAAC,GAAG,EAAE;IAC7C,SAAS,EAAU,MAAM,kBAAkB,IAAoB,EAAU,MAAM;IAChF,CAAC,CACH;SACQ,EAAM,SAAS,MACxB,EAAI,SAAS;AAGjB,SAAO;IAET;EAAC,SAAS,KAAA;EAAW,YAAY,KAAA;EAAW,OAAO,EAAE;EAAE,QAAQ,KAAA;EAAU,CAC1E,EAEK,KAAqB,IAAa,EAAS,QAAQ,EAAW,MAAM,SAAS,GAAG,EAAE,EAClF,IAAkB,GAAmB,IAGrC,IAAe,GAAmB,IAClC,KACJ,EAA6B,EAAa,IAC1C,EAAa,SAAS,KACtB,EAAa,MAAM,YAAY,WAC3B,IACA,MAEA,IACJ,EAAoC,EAAgB,IACpD,EAAgB,SAAS,KACzB,EAAQ,EAAgB,MAAM,iBAC1B,IAAoB,IAAkB,IAAkB,MAExD,KAAe,QAEjB,kBAAC,OAAD;EACE,WAAW,EAAK,EAAO,2BAA2B,KAAkB,EAAO,gCAAgC;YAE3G,kBAAC,QAAD;GACE,WAAW,EACT,EAAO,mCACP,CAAC,KAAqB,EAAO,uCAC9B;aAED,kBAAC,UAAD;IACE,KAAK;IACL,WAAW,EAAO;IAClB,eAAa,EAAQ;IACrB,SAAS,IAAiB,IAAoB;IAC9C,iBAAe,IAAiB,SAAS;IACzC,iBAAe;IACf,cAAY,IAAkB,kCAAkC,MAAoB;cAPtF,CASG,KACC,kBAAC,GAAD;KAAM,IAAG;KAAO,MAAK;eAClB;KACI,CAAA,EAGP,EADD,IACE,IAEA,GAFD;KAAgB,WAAW,EAAO;KAAgC,MAAM;KAAM,CAEE,CAE3E;;GACJ,CAAA;EACH,CAAA,EAER;EAAC;EAAiB;EAAmB;EAAkB;EAAoB;EAAgB;EAAkB,CAC9G;AAED,QACE,kBAAC,OAAD;EACE,KAAK;EACL,WAAW,EACT,EAAO,mBACP,KAAmB,EAAO,4BAC1B,KAAmB,KAAsB,EAAO,6BAChD,MAAkB,EAAO,sCAC1B;YAED,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;GACE,KAAK;GACD;GACJ,WAAW,EACT,EAAO,QACP,KAAkB,EAAO,iBACzB,KAAa,EAAO,uBACpB,KAAa,EAAO,uBACpB,EACD;GACD,eAAa,KAAU,EAAQ;aAE/B,kBAAC,OAAD;IAAK,KAAK;IAAc,WAAW,EAAO;cAA1C;KACE,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB;OACG,KAAgB,kBAAC,OAAD;QAAK,WAAW,EAAO;kBAA+B;QAAmB,CAAA;OAEzF,KACC,kBAAC,OAAD;QACE,WAAW,EACT,EAAO,8BACP,EAAO,iCACP,KAAsB,EAAO,uCAC9B;kBAEA;QACG,CAAA;OAGP,CAAC,MAAY,CAAC,KAAmB,MAAuB;OAExD,MAAe;OACZ;;KACL,CAAC,KAAW,KAAmB,CAAC,KAAsB;KACtD,GAAa,SAAS,KACrB,kBAAC,MAAD;MACE,KAAK;MACL,IAAI;MACJ,WAAW,EACT,EAAO,0BACP,KAAkB,EAAO,+BAC1B;MACD,eAAa,EAAQ;gBAPvB,CASG,IACA,MAAe,kBAAC,MAAD;OAAI,WAAW,EAAO;iBAA8B;OAAiB,CAAA,CAClF;;KAEH;;GACF,CAAA,EACS,CAAA;EACb,CAAA;EAGX,CACF,EAQK,KAAe,EAAC,SAAM,aAAU,cAAW,eAAe,GAAQ,GAAG,QAEvE,kBAAC,KAAD;CACQ;CACN,WAAW,EAAK,EAAO,iBAAoB,EAAU;CACrD,eAAa,EAAQ,WAAW;CAChC,GAAI;CAEH;CACC,CAAA,EAUF,KAAkB,EAAC,SAAM,aAAU,cAAW,eAAe,GAAQ,GAAG,QAE1E,kBAAC,KAAD;CACQ;CACN,WAAW,EAAK,EAAO,iBAAoB,EAAO,cAAiB,EAAO,oBAAuB,EAAU;CAC3G,eAAa,EAAQ,WAAW;CAChC,GAAI;CAEH;CACC,CAAA,EAYF,IAAsB,GAExB,EAAC,aAAU,SAAM,gBAAgB,GAAa,eAAe,GAAQ,cAAW,oBAAiB,YAAS,GAAG,KAC7G,MACG;CACH,IAAM,IAAY,GAAO,EACnB,EAAC,eAAW,GAAe,EAE3B,CAAC,GAAY,KAAiB,EAAS,GAAM,EAC7C,IAAM,EAAuB,EAA0C,EACvE,IAAqB,EAAuB,KAAK;AAEvD,GAAiB,IAAM,MAA2B;AAChD,EAAK,KACH,EAAc,GAAM;GAEtB;CAEF,IAAM,IAAS,QAAkB,EAAc,GAAK,EAAE,EAAE,CAAC,EACnD,IAAW,QAAkB,EAAc,GAAM,EAAE,EAAE,CAAC,EACtD,IAAiB,QAAkB,GAAc,MAAQ,CAAC,EAAK,EAAE,EAAE,CAAC,EACpE,IAAgB,EAAQ,KAAgB,MAAgB;AAI9D,CAFA,EAAkB,EAAS,EAE3B,QAAgB;AACd,EAAI,EAAmB,WAMrB,EAAmB,QAAQ,gBAAgB,SAAS,KAAW,CAAC,EAAW;IAE5E,CAAC,GAAS,EAAW,CAAC;CAEzB,IAAM,CAAC,GAAO,KAAmB;AAEjC,QACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,+BACP,KAAc,EAAO,2BACrB,KAAiB,EAAO,qCACzB;EACD,eAAa,KAAU,EAAQ;EAC1B;EACL,aAAa;EACb,YAAY;EAKZ,eAAe;EACf,cAAc;YAfhB;GAiBE,kBAAC,KAAD;IACQ;IACN,WAAW,EAAK,EAAO,cAAiB,KAAe,EAAO,yBAAyB,EAAU;IACjG,gBAAc;IACd,GAAI;cAEJ,kBAAC,GAAD;KAAM,IAAG;KAAO,MAAK;KAAM,QAAO;KAAS,WAAW,EAAO;eAC1D;KACI,CAAA;IACL,CAAA;GACH,KACC,kBAAC,UAAD;IACE,WAAW,EAAO;IAClB,SAAS;IACT,iBAAe,IAAa,SAAS;IACrC,iBAAe;IACf,cAAY,GAAG,GAAO,UAAU,CAAC,MAAM,CAAC;cAExC,kBAAC,GAAD;KAAkB,WAAW,EAAO;KAA0B,MAAM;KAAM,CAAA;IACnE,CAAA;GAGX,kBAAC,OAAD;IAAK,IAAI;IAAW,WAAW,EAAO;IAA8B,KAAK;cACtE;IACG,CAAA;GACF;;EAGX,EAEK,IAAW,GAA+D,GAAO,MAAQ;CAC7F,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,IAAc,EAAS,QAAQ,EAAM,SAAS,EAE9C,IAAa,EAAY,MAAK,MAAS;AAC3C,MAAI,EAAe,EAAM,CACvB,QAAO,EAAM,SAAS;GAExB;AAoBF,KAlBA,QAAgB;AACd,MAAI,EAAY;EAChB,IAAM,IAAW,EAAM,KAAK,QAAQ,KAAK,GAAG,EACtC,IAAS,SAAS,eAAe,EAAS;AAChD,MAAI,CAAC,EAAQ;EASb,IAAM,IAAW,IAAI,sBAJ2C,CAAC,OAAW;AAC1E,KAAY,EAAM,eAAe;KAGiC;GAN5C,WAAW;GAAG,MAAM;GAAM,YAAY;GAMM,CAAe;AAEnF,SADA,EAAS,QAAQ,EAAO,QACX,EAAS,YAAY;IACjC,CAAC,GAAY,EAAM,KAAK,CAAC,EAExB,GAAY;EACd,IAAM,IAAyB,EAAY,MAAK,MACvC,EAA6B,EAAM,IAAI,EAAM,SAAS,KAAe,EAAM,MAAM,YAAY,SACpG;AAEF,SACE,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;GACO;GACL,GAAI;GACJ,iBAAiB,IAAyB,WAAW,KAAA;GACrD,CAAA,EACC,CAAA;;CAIT,IAAM,EAAC,aAAU,SAAM,gBAAgB,GAAa,eAAe,GAAQ,YAAS,cAAW,GAAG,MAAQ;AAE1G,QACE,kBAAC,MAAD,EAAA,UACE,kBAAC,KAAD;EACQ;EACN,WAAW,EACT,EAAO,cACP,KAAe,EAAO,yBACtB,KAAY,EAAO,6BACnB,EACD;EACD,gBAAc;EACd,eAAa,KAAU,EAAQ;EAC1B;EACL,GAAI;YAEJ,kBAAC,GAAD;GAAM,IAAG;GAAO,MAAK;GAAM,QAAO;GAAS,WAAW,EAAO;GAC1D;GACI,CAAA;EACL,CAAA,EACD,CAAA;EAEP;AAOF,SAAS,EAAY,EAAC,aAAU,cAAW,aAAU,YAAY,GAAG,KAAsB;CACxF,IAAM,IAAU,EAAM,WAAW,EAAc,EACzC,IAAS,EAAoB,KAAK,EAElC,EAAC,eAAW,GAAe;AAoD/B,QA9CF,QAAgB;EACd,IAAM,KAAe,MAAkB;AACjC,KAAO,WAAW,CAAC,EAAO,QAAQ,SAAS,EAAE,OAAe,IAI1D,EAAE,kBAAkB,qBACxB,EAAE,iBAAiB;;AAQvB,SAJI,MAAY,YACd,SAAS,iBAAiB,SAAS,GAAa,GAAK,QAG1C;AACX,YAAS,oBAAoB,SAAS,GAAa,GAAK;;IAEzD,CAAC,EAAQ,CAAC,EAET,MAAY,YAAY,GAAS,UAAU,UACtC,EACL,kBAAC,OAAD;EACE,KAAK;EACL,WAAW,EAAK,EAAO,qBAAqB,EAAO,6BAA6B,EAAU;EAC1F,MAAK;EACL,cAAW;YAEX,kBAAC,MAAD;GAAI,WAAW,EAAO;GAA0B,GAAI;aACjD,EAAM,SAAS,IAAI,IAAU,MACxB,EAA8B,EAAM,IAAI,EAAM,SAAS,IAClD,EAAM,aAAa,GAAO,EAC/B,UAAS,MAAK;AACZ,MAAM,MAAM,UAAU,EAAE;MAE3B,CAAC,GAEG,KACP;GACC,CAAA;EACD,CAAA,EACN,EAAQ,UAAU,QACnB,GAKC,kBAHU,IAAU,IAAgB,EAAM,UAG1C;EAAK,GAAK,IAAU,EAAC,WAAW,SAAQ,GAAG,EAAE;YAC3C,kBAAC,MAAD;GAAI,WAAW,EAAK,EAAO,qBAAqB,EAAO,qBAAqB,MAAY,EAAU;GAAE,GAAI;GACrG;GACE,CAAA;EACD,CAAA;;AAoBZ,SAAS,EAAW,EAAC,aAAU,SAAM,aAAU,WAAW,UAAO,SAAS,GAAG,KAA0B;AACrG,QACE,kBAAC,GAAD;EACE,WAAW,EAAO;EAClB,IAAG;EACG;EACG;EACT,eAAa,EAAQ;EACf;EACN,GAAI;EAEH;EACM,CAAA;;AAQb,IAAa,IAAS,OAAO,OAAO,GAAY;CAC9C,SAAS;CACT,YAAY;CACZ,MAAM;CACN,QAAQ;CACR,SAAS;CACT;CACD,CAAC"}

package/esm/SubNav/SubNav.module-D-gLr0JO.css

@@ -0,0 +1 @@
+.Primer_Brand__SubNav-module__SubNav__container___e4u9B{z-index:2;border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);width:100%;position:absolute}.Primer_Brand__SubNav-module__SubNav__container--with-anchor-nav___jf8vj{display:inline;display:initial;position:relative}.Primer_Brand__SubNav-module__SubNav__container--with-anchor-nav___jf8vj .Primer_Brand__SubNav-module__SubNav___txUks{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__SubNav-module__SubNav___txUks{z-index:1;background-color:var(--brand-SubNav-bgColor);width:100%;display:flex}[data-color-mode=dark] .Primer_Brand__SubNav-module__SubNav___txUks{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.Primer_Brand__SubNav-module__SubNav__heading___d8v1r,.Primer_Brand__SubNav-module__SubNav__subHeading___cmfhs{font-size:calc(var(--base-size-16) - 1px);line-height:calc(var(--base-size-16) - 1px);font-weight:var(--brand-text-subhead-weight-medium);color:var(--brand-color-text-default);font-family:var(--brand-heading-fontFamily);-webkit-text-decoration:none;text-decoration:none;display:block}.Primer_Brand__SubNav-module__SubNav__heading___d8v1r:hover,.Primer_Brand__SubNav-module__SubNav__subHeading___cmfhs:hover,.Primer_Brand__SubNav-module__SubNav__link___rY_yE:hover .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{color:var(--brand-color-text-muted);-webkit-text-decoration:none!important;text-decoration:none!important}.Primer_Brand__SubNav-module__SubNav--header-container-outer___TODOB{width:100%}.Primer_Brand__SubNav-module__SubNav__heading-container___09GuE{z-index:9998;min-height:60px;padding:var(--base-size-16);border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);align-items:center;display:flex;position:relative}.Primer_Brand__SubNav-module__SubNav__heading-container___09GuE+.Primer_Brand__SubNav-module__SubNav__heading-container___09GuE{padding-inline-start:var(--base-size-24)}.Primer_Brand__SubNav-module__SubNav--has-shadow___9iM59{box-shadow:var(--brand-SubNav-shadow);background-color:var(--brand-color-canvas-default)}.Primer_Brand__SubNav-module__SubNav--full-width___PoXey{padding-inline:0}.Primer_Brand__SubNav-module__SubNav__action-container___Od_kP{margin-left:auto}.Primer_Brand__SubNav-module__SubNav__sub-menu-icon___5Gkyb{display:none!important}.Primer_Brand__SubNav-module__SubNav__sub-menu-children___5gfUK{display:contents}.Primer_Brand__SubNav-module__SubNav__links-overlay___IL2F1{margin:0;padding:0;list-style:none}.Primer_Brand__SubNav-module__SubNav__links-overlay___IL2F1>span,.Primer_Brand__SubNav-module__SubNav__sub-menu-toggle___ys018{display:none}.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container___Mt06f{z-index:91;position:sticky;top:-1px}.Primer_Brand__SubNav-module__SubNav__anchor-menu-container___mSc6_{opacity:0;transform:translateY(var(--brand-animation-variant-slideInDown-distance));transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), background-color var(--brand-animation-duration-default) var(--brand-animation-easing-default);background-color:#0000}.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container___Mt06f:focus-within .Primer_Brand__SubNav-module__SubNav__anchor-menu-container___mSc6_,.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container--stuck___KKSlj .Primer_Brand__SubNav-module__SubNav__anchor-menu-container___mSc6_{opacity:1;background-color:var(--brand-color-canvas-default);transform:translateY(0)}.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container___Mt06f{height:0;transition:height var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container___Mt06f:focus-within,.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container--stuck___KKSlj{height:auto}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI{opacity:0;transform:translateY(var(--brand-animation-variant-slideInDown-distance));transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), height var(--brand-animation-duration-default) var(--brand-animation-easing-default), transform var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container___Mt06f:focus-within .Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI,.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container--stuck___KKSlj .Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI{visibility:visible;opacity:1;transform:translateY(0)}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI{padding-block:var(--base-size-12);border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);display:flex}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI .Primer_Brand__SubNav-module__SubNav__sub-menu-list___3rKmh{gap:var(--base-size-20);margin:0;padding:0;list-style-type:none;display:inline-flex}.Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{font-weight:450}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{padding:var(--base-size-6) var(--base-size-12);border-radius:var(--brand-borderRadius-full);transition:background-color var(--brand-animation-duration-default) var(--brand-animation-easing-default), color var(--brand-animation-duration-default) var(--brand-animation-easing-default);background-color:#0000}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI .Primer_Brand__SubNav-module__SubNav__link--is-in-view___5HQNs .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{background-color:var(--brand-SubNav-color-link-bgColor)}.Primer_Brand__SubNav-module__SubNav__link___rY_yE:focus-visible .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG:after,.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI .Primer_Brand__SubNav-module__SubNav__link--is-in-view___5HQNs:focus-visible .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG:after{opacity:0}.Primer_Brand__SubNav-module__SubNav__link___rY_yE[aria-current]:not([aria-current=false]) *{color:var(--brand-SubNav-color-link-active);-webkit-text-decoration:none!important;text-decoration:none!important}.Primer_Brand__SubNav-module__SubNav__link___rY_yE:hover .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{transition:color var(--brand-animation-duration-fast) var(--brand-animation-easing-default)}.Primer_Brand__SubNav-module__SubNav__link___rY_yE:hover .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG:after{border-color:var(--brand-color-text-default)}@media screen and (width<=63.24rem){.Primer_Brand__SubNav-module__SubNav___txUks{position:relative}.Primer_Brand__SubNav-module__SubNav___txUks:before{content:"";opacity:0;z-index:9997;position:absolute;inset:0}.Primer_Brand__SubNav-module__SubNav___txUks:after{content:"";z-index:-1;background-color:var(--base-color-scale-black-0);opacity:0;visibility:hidden;width:100%;height:100%;position:fixed;inset:0}.Primer_Brand__SubNav-module__SubNav--open___uMKHN:after{opacity:.3;visibility:visible;transition:visibility var(--brand-animation-duration-default) var(--brand-animation-easing-default), opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__SubNav-module__SubNav__heading___d8v1r{font-size:var(--base-size-16);line-height:var(--base-size-24)}.Primer_Brand__SubNav-module__SubNav--open___uMKHN{display:block}.Primer_Brand__SubNav-module__SubNav--open___uMKHN .Primer_Brand__SubNav-module__SubNav--header-container-outer___TODOB{max-height:100dvh;max-height:var(--subnav-available-height,100dvh);flex-direction:column;display:flex;overflow:hidden}.Primer_Brand__SubNav-module__SubNav--open___uMKHN .Primer_Brand__SubNav-module__SubNav__header-container___seaW6{flex-shrink:0}.Primer_Brand__SubNav-module__SubNav--open___uMKHN+.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container___Mt06f{z-index:-1}.Primer_Brand__SubNav-module__SubNav--open___uMKHN:before{background-color:var(--brand-color-canvas-default);animation:Primer_Brand__SubNav-module__fade-in___6VxHj .3s var(--brand-animation-easing-glide) forwards}.Primer_Brand__SubNav-module__SubNav__heading-separator--main___6nQIi:not(.Primer_Brand__SubNav-module__SubNav__heading-separator--has-adjacent-label____My0U),.Primer_Brand__SubNav-module__SubNav__heading-separator--subheading-active___TGiD4,.Primer_Brand__SubNav-module__SubNav__subheading-container-active___NAyYL{display:none}.Primer_Brand__SubNav-module__SubNav__header-container___seaW6{white-space:pre;z-index:9998;width:100%;display:flex;position:relative}.Primer_Brand__SubNav-module__SubNav__heading-container___09GuE+.Primer_Brand__SubNav-module__SubNav__heading-container___09GuE{padding-inline-start:var(--base-size-16)}.Primer_Brand__SubNav-module__SubNav__heading-separator___LratU{z-index:9998;margin-inline-end:var(--base-size-16)}.Primer_Brand__SubNav-module__SubNav__links-overlay___IL2F1{z-index:9998;padding-inline:var(--base-size-8);flex-direction:column;flex:auto;justify-content:center;display:none;position:relative}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn{gap:var(--base-size-8);padding-block:var(--base-size-16);border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);flex-direction:column;justify-content:flex-start;min-height:0;display:flex;overflow-y:auto}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__link___rY_yE:hover .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{color:var(--brand-color-text-default)}.Primer_Brand__SubNav-module__SubNav__overlay-toggle___37Xw7{z-index:9999;width:100%;justify-content:flex-end;padding-inline-end:var(--base-size-16);display:flex;position:relative}.Primer_Brand__SubNav-module__SubNav--has-sub-heading___u6kR9:not(.Primer_Brand__SubNav-module__SubNav--subHeadingActive___C7_mM) .Primer_Brand__SubNav-module__SubNav__overlay-toggle___37Xw7{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block:var(--base-size-12);margin-block:0;display:block}.Primer_Brand__SubNav-module__SubNav__overlay-toggle-content___r7g9W{width:100%;padding-inline-start:var(--base-size-16)}.Primer_Brand__SubNav-module__SubNav__overlay-toggle-label___FRenU{background-color:var(--brand-SubNav-color-link-bgColor);border-radius:var(--brand-borderRadius-full);padding:var(--base-size-4) var(--base-size-12);gap:var(--base-size-6);cursor:pointer;font:inherit;border:none;align-items:center;display:flex}.Primer_Brand__SubNav-module__SubNav--full-width___PoXey .Primer_Brand__SubNav-module__SubNav__overlay-toggle___37Xw7{right:0}.Primer_Brand__SubNav-module__SubNav__link___rY_yE,.Primer_Brand__SubNav-module__SubNav__action-container___Od_kP{-webkit-text-decoration:none;text-decoration:none;display:none}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{position:relative}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__link___rY_yE[aria-current]:not([aria-current=false]) *{color:var(--brand-SubNav-color-link-active)}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__link___rY_yE{padding:var(--base-size-4) var(--base-size-12);margin-inline-start:var(--base-size-8)}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__link___rY_yE[aria-current]:not([aria-current=false]),.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__link___rY_yE:hover{background-color:var(--brand-SubNav-color-link-bgColor);border-radius:var(--brand-borderRadius-full);display:inline-flex}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__link___rY_yE{animation:Primer_Brand__SubNav-module__fade-in___6VxHj .3s var(--brand-animation-easing-glide) forwards;display:inline-flex}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__action-container___Od_kP{animation:Primer_Brand__SubNav-module__fade-in___6VxHj .3s var(--brand-animation-easing-glide) forwards;display:block}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__link--has-sub-menu___Sy_3p{padding-block:0}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__action-container___Od_kP,.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__action___Yrrhg{width:100%}.Primer_Brand__SubNav-module__SubNav__sub-menu___b8DSd{gap:var(--base-size-8);flex-direction:column;margin:0;padding:0;padding-block-start:var(--base-size-8);padding-inline-start:var(--base-size-16);list-style:none;display:flex}.Primer_Brand__SubNav-module__SubNav__sub-menu___b8DSd .Primer_Brand__SubNav-module__SubNav__link___rY_yE{margin-inline-start:0}.Primer_Brand__SubNav-module__SubNav__sub-menu--dropdown___uiVDU .Primer_Brand__SubNav-module__SubNav__link___rY_yE:hover .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{color:var(--brand-color-text-default)!important}.Primer_Brand__SubNav-module__SubNav__anchor-menu-container___mSc6_{z-index:99;width:100%;overflow:auto hidden}.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container___Mt06f{position:sticky;top:-1px}.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container___Mt06f:after{content:"";width:var(--base-size-32);background:linear-gradient(to left, var(--brand-color-canvas-default), transparent);pointer-events:none;z-index:100;position:absolute;top:0;bottom:0;right:0}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI{padding-inline:var(--base-size-16);padding-block-start:var(--base-size-16);padding-block-end:var(--base-size-16)}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);letter-spacing:var(--brand-text-letterSpacing-100)}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI .Primer_Brand__SubNav-module__SubNav__sub-menu-list___3rKmh{padding-inline-end:var(--base-size-32)}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI .Primer_Brand__SubNav-module__SubNav__link___rY_yE{white-space:pre;top:var(--base-size-2);display:block;position:relative}}.Primer_Brand__SubNav-module__SubNav__overlay-toggle-icon___Fo5xs{fill:var(--brand-color-text-default)}.Primer_Brand__SubNav-module__SubNav__overlay-toggle-content___r7g9W{align-items:center;gap:var(--base-size-8);display:flex}.Primer_Brand__SubNav-module__SubNav__overlay-toggle-content--end___zLnlL{justify-content:flex-end}.Primer_Brand__SubNav-module__SubNav__link___rY_yE:focus-visible,.Primer_Brand__SubNav-module__SubNav__heading___d8v1r:focus-visible,.Primer_Brand__SubNav-module__SubNav__subHeading___cmfhs:focus-visible,.Primer_Brand__SubNav-module__SubNav__sub-menu-toggle___ys018:focus-visible,.Primer_Brand__SubNav-module__SubNav__overlay-toggle-label___FRenU:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__SubNav-module__SubNav__subHeading___cmfhs{white-space:nowrap;display:block;position:relative}.Primer_Brand__SubNav-module__SubNav__subHeading___cmfhs[aria-current]:not([aria-current=false]){background-color:var(--brand-SubNav-color-link-bgColor);border-radius:var(--brand-borderRadius-full);padding:var(--base-size-6) var(--base-size-12);border:none}@media screen and (width>=48rem){.Primer_Brand__SubNav-module__SubNav__heading-container___09GuE{padding-inline:var(--base-size-24)}.Primer_Brand__SubNav-module__SubNav__overlay-toggle-content___r7g9W{padding-inline-start:var(--base-size-24)}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn{padding:var(--base-size-24)}.Primer_Brand__SubNav-module__SubNav--full-width___PoXey{padding-inline:0}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI{padding-inline:var(--base-size-24)}}.Primer_Brand__SubNav-module__SubNav__heading-label___Bv69i{white-space:pre}@media screen and (width>=63.25rem){.Primer_Brand__SubNav-module__SubNav___txUks{z-index:92;padding-inline:var(--base-size-32);align-items:center;display:flex}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn{padding:0}.Primer_Brand__SubNav-module__SubNav___txUks:has(+.Primer_Brand__SubNav-module__SubNav__anchor-menu-container___mSc6_){padding-block-end:0}.Primer_Brand__SubNav-module__SubNav__heading-container___09GuE{padding-inline-start:0}.Primer_Brand__SubNav-module__SubNav--full-width___PoXey{padding-inline:0}.Primer_Brand__SubNav-module__SubNav__overlay-toggle___37Xw7{display:none}.Primer_Brand__SubNav-module__SubNav__container--with-anchor-nav___jf8vj .Primer_Brand__SubNav-module__SubNav__heading___d8v1r{padding-block-end:1px}.Primer_Brand__SubNav-module__SubNav__heading-separator___LratU{margin-inline-end:var(--base-size-20);display:inline-flex;top:0}.Primer_Brand__SubNav-module__SubNav__container--with-anchor-nav___jf8vj .Primer_Brand__SubNav-module__SubNav__heading-separator___LratU{top:-1px}.Primer_Brand__SubNav-module__SubNav--header-container-outer___TODOB,.Primer_Brand__SubNav-module__SubNav__header-container___seaW6{align-items:center;display:flex}.Primer_Brand__SubNav-module__SubNav__links-overlay___IL2F1{align-items:center;gap:var(--base-size-2);z-index:92;flex-grow:1;padding-inline-start:var(--base-size-24);display:flex}.Primer_Brand__SubNav-module__SubNav__link___rY_yE{transition:color .2s var(--brand-animation-easing-glide);padding:var(--base-size-4) var(--base-size-12);border-radius:var(--brand-borderRadius-full);position:relative;-webkit-text-decoration:none!important;text-decoration:none!important}.Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100)}.Primer_Brand__SubNav-module__SubNav__link--has-sub-menu___Sy_3p{padding:var(--base-size-4) 0}.Primer_Brand__SubNav-module__SubNav__link--has-sub-menu___Sy_3p:after{content:"";bottom:calc(var(--base-size-12) * -1);width:100%;height:var(--base-size-12);background:0 0;position:absolute;left:0}.Primer_Brand__SubNav-module__SubNav__sub-menu___b8DSd.Primer_Brand__SubNav-module__SubNav__sub-menu--dropdown___uiVDU{background-clip:padding-box;background-color:var(--brand-color-canvas-default);border:var(--brand-color-border-muted) solid var(--brand-borderWidth-thin);border-radius:var(--brand-borderRadius-medium);padding:var(--base-size-8);z-index:9998;transition-timing-function:var(--brand-animation-easing-glide);transition-duration:var(--brand-animation-duration-fast);top:90%;left:0;left:var(--base-size-4);visibility:hidden;opacity:0;transform-origin:top;gap:var(--base-size-8);width:var(--brand-SubNav-width-subMenu);flex-direction:column;margin-block-start:var(--base-size-8);list-style:none;transition-property:opacity,transform;display:flex;position:absolute;transform:scale(.99)translateY(-.7em)translate(-8px)}.Primer_Brand__SubNav-module__SubNav__link--expanded___pUtmL .Primer_Brand__SubNav-module__SubNav__sub-menu___b8DSd.Primer_Brand__SubNav-module__SubNav__sub-menu--dropdown___uiVDU{visibility:visible;opacity:1;transform:scale(1)translateY(0)translate(-8px)}.Primer_Brand__SubNav-module__SubNav__sub-menu-toggle___ys018{width:var(--base-size-24);height:var(--base-size-24);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:0;margin-inline-end:calc(-1 * var(--base-size-8));padding:0;padding-inline-end:var(--base-size-8);display:inline-flex}.Primer_Brand__SubNav-module__SubNav__sub-menu___b8DSd .Primer_Brand__SubNav-module__SubNav__link___rY_yE{display:block}.Primer_Brand__SubNav-module__SubNav__sub-menu--dropdown___uiVDU .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG:after{opacity:1;transform:scale(0)}.Primer_Brand__SubNav-module__SubNav__link--has-sub-menu___Sy_3p{align-items:center;gap:var(--base-size-4);cursor:pointer;display:inline-flex;position:relative}.Primer_Brand__SubNav-module__SubNav__link--has-sub-menu___Sy_3p>.Primer_Brand__SubNav-module__SubNav__link___rY_yE{padding-inline-end:0}.Primer_Brand__SubNav-module__SubNav__sub-menu--dropdown___uiVDU .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{padding:var(--base-size-4) 0;position:relative}.Primer_Brand__SubNav-module__SubNav__link--has-active-sub-menu___GyXf4{background-color:var(--brand-SubNav-color-link-bgColor);border-radius:var(--brand-borderRadius-full);padding:0 var(--base-size-8) 0 0;gap:0}.Primer_Brand__SubNav-module__SubNav__link--has-active-sub-menu___GyXf4>.Primer_Brand__SubNav-module__SubNav__link___rY_yE{padding:var(--base-size-4) 0 var(--base-size-4) var(--base-size-12)}.Primer_Brand__SubNav-module__SubNav__sub-menu___b8DSd.Primer_Brand__SubNav-module__SubNav__sub-menu--dropdown___uiVDU .Primer_Brand__SubNav-module__SubNav__link___rY_yE{padding:var(--base-size-12)}.Primer_Brand__SubNav-module__SubNav__links-overlay___IL2F1 .Primer_Brand__SubNav-module__SubNav__link___rY_yE[aria-current]:not([aria-current=false]){background-color:var(--brand-SubNav-color-link-bgColor);line-height:1.1em}@supports ((-moz-appearance:none)){.Primer_Brand__SubNav-module__SubNav__links-overlay___IL2F1 .Primer_Brand__SubNav-module__SubNav__link--has-sub-menu___Sy_3p .Primer_Brand__SubNav-module__SubNav__link___rY_yE[aria-current]:not([aria-current=false]) .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{top:0}}.Primer_Brand__SubNav-module__SubNav__links-overlay___IL2F1 .Primer_Brand__SubNav-module__SubNav__link--has-active-sub-menu___GyXf4 .Primer_Brand__SubNav-module__SubNav__link___rY_yE[aria-current]:not([aria-current=false]){padding-inline-end:var(--base-size-4)}.Primer_Brand__SubNav-module__SubNav__sub-menu___b8DSd.Primer_Brand__SubNav-module__SubNav__sub-menu--dropdown___uiVDU .Primer_Brand__SubNav-module__SubNav__link___rY_yE[aria-current]:not([aria-current=false]){border-radius:var(--brand-borderRadius-medium);padding:var(--base-size-4) var(--base-size-8) var(--base-size-4) var(--base-size-12);top:auto;top:initial;background-color:#0000}.Primer_Brand__SubNav-module__SubNav__sub-menu___b8DSd.Primer_Brand__SubNav-module__SubNav__sub-menu--dropdown___uiVDU .Primer_Brand__SubNav-module__SubNav__link___rY_yE:hover{background-color:var(--brand-SubNav-color-link-bgColor);border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__SubNav-module__SubNav__sub-menu-icon___5Gkyb{fill:var(--brand-color-text-muted);transition:transform var(--brand-animation-duration-fast);display:inline-block!important}.Primer_Brand__SubNav-module__SubNav__link--has-sub-menu___Sy_3p:not(.Primer_Brand__SubNav-module__SubNav__link--has-active-sub-menu___GyXf4) .Primer_Brand__SubNav-module__SubNav__sub-menu-icon___5Gkyb{top:calc(-1 * var(--brand-borderWidth-thin));position:relative}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI{padding-inline:var(--base-size-32)}}@keyframes Primer_Brand__SubNav-module__fade-in___6VxHj{0%{opacity:0}to{opacity:1}}@keyframes Primer_Brand__SubNav-module__fade-in-down___UKi30{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.Primer_Brand__SubNav-module__SubNav___txUks,.Primer_Brand__SubNav-module__SubNav___txUks:before,.Primer_Brand__SubNav-module__SubNav___txUks:after,.Primer_Brand__SubNav-module__SubNav___txUks *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/SubNav/SubNav.module.js

@@ -1,4 +1,4 @@
-import './SubNav.module-CFXuWNmS.css';var e = {
+import './SubNav.module-D-gLr0JO.css';var e = {
 	SubNav__container: "Primer_Brand__SubNav-module__SubNav__container___e4u9B",
 	"SubNav__container--with-anchor-nav": "Primer_Brand__SubNav-module__SubNav__container--with-anchor-nav___jf8vj",
 	SubNav: "Primer_Brand__SubNav-module__SubNav___txUks",

package/esm/SubNav/SubNav.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubNav.module.js","names":[],"sources":["../../src/SubNav/SubNav.module.css"],"sourcesContent":[".SubNav__container {\n  position: absolute;\n  width: 100%;\n  z-index: 2;\n  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubNav__container--with-anchor-nav {\n  display: unset;\n  position: relative;\n}\n\n.SubNav__container--with-anchor-nav .SubNav {\n  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubNav {\n  width: 100%;\n  display: flex;\n  z-index: 1;\n  background-color: var(--brand-SubNav-bgColor);\n}\n\n[data-color-mode='dark'] .SubNav {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.SubNav__heading,\n.SubNav__subHeading {\n  display: block;\n  font-size: calc(var(--base-size-16) - 1px); /* One-off override to match design */\n  line-height: calc(var(--base-size-16) - 1px); /* One-off override to match design */\n  font-weight: var(--brand-text-subhead-weight-medium);\n  color: var(--brand-color-text-default);\n  font-family: var(--brand-heading-fontFamily);\n  text-decoration: none;\n}\n\n.SubNav__heading:hover,\n.SubNav__subHeading:hover,\n.SubNav__link:hover .SubNav__link-label {\n  color: var(--brand-color-text-muted);\n  text-decoration: none !important; /* dotcom override */\n}\n\n.SubNav--header-container-outer {\n  width: 100%;\n}\n\n.SubNav__heading-container {\n  min-height: 60px;\n  position: relative;\n  z-index: 9998;\n  display: flex;\n  align-items: center;\n  padding: var(--base-size-16);\n  border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubNav__heading-container + .SubNav__heading-container {\n  padding-inline-start: var(--base-size-24);\n}\n\n.SubNav--has-shadow {\n  box-shadow: var(--brand-SubNav-shadow);\n  background-color: var(--brand-color-canvas-default);\n}\n\n.SubNav--full-width {\n  padding-inline: 0;\n}\n\n.SubNav__action-container {\n  margin-left: auto;\n}\n\n.SubNav__sub-menu-icon {\n  display: none !important;\n}\n\n.SubNav__sub-menu-children {\n  display: contents;\n}\n\n.SubNav__links-overlay {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.SubNav__links-overlay > span {\n  display: none;\n}\n\n.SubNav__sub-menu-toggle {\n  display: none;\n}\n\n/*\n   * Anchor Nav Submenu\n   */\n\n.SubNav__anchor-menu-outer-container {\n  position: sticky;\n  top: -1px;\n  z-index: 91; /* must be higher than subdomain nav bar */\n}\n\n.SubNav__anchor-menu-container {\n  opacity: 0;\n  background-color: transparent;\n  transform: translateY(var(--brand-animation-variant-slideInDown-distance));\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    background-color var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.SubNav__anchor-menu-outer-container:focus-within .SubNav__anchor-menu-container,\n.SubNav__anchor-menu-outer-container--stuck .SubNav__anchor-menu-container {\n  transform: translateY(0);\n  opacity: 1;\n  background-color: var(--brand-color-canvas-default);\n}\n\n.SubNav__anchor-menu-outer-container {\n  height: 0;\n  transition: height var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.SubNav__anchor-menu-outer-container:focus-within,\n.SubNav__anchor-menu-outer-container--stuck {\n  height: auto;\n}\n\n.SubNav__sub-menu--anchor {\n  opacity: 0;\n  transform: translateY(var(--brand-animation-variant-slideInDown-distance));\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    height var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.SubNav__anchor-menu-outer-container:focus-within .SubNav__sub-menu--anchor,\n.SubNav__anchor-menu-outer-container--stuck .SubNav__sub-menu--anchor {\n  visibility: visible;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.SubNav__sub-menu--anchor {\n  display: flex;\n  padding-block: var(--base-size-12);\n  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubNav__sub-menu--anchor .SubNav__sub-menu-list {\n  display: inline-flex;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  gap: var(--base-size-20);\n}\n\n.SubNav__link-label {\n  font-weight: 450; /* FIXME: unsupported in our font weight primitives */\n}\n\n.SubNav__sub-menu--anchor .SubNav__link-label {\n  padding: var(--base-size-6) var(--base-size-12);\n  background-color: transparent;\n  border-radius: var(--brand-borderRadius-full);\n  transition: background-color var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    color var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.SubNav__sub-menu--anchor .SubNav__link--is-in-view .SubNav__link-label {\n  background-color: var(--brand-SubNav-color-link-bgColor);\n}\n\n.SubNav__link:focus-visible .SubNav__link-label::after,\n.SubNav__sub-menu--anchor .SubNav__link--is-in-view:focus-visible .SubNav__link-label::after {\n  opacity: 0;\n}\n\n.SubNav__link[aria-current]:not([aria-current='false']) * {\n  color: var(--brand-SubNav-color-link-active);\n  text-decoration: none !important; /* dotcom override */\n}\n\n.SubNav__link:hover .SubNav__link-label {\n  transition: color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.SubNav__link:hover .SubNav__link-label::after {\n  border-color: var(--brand-color-text-default);\n}\n\n/*\n * Narrow breakpoint\n */\n\n@media screen and (max-width: 63.24rem) {\n  .SubNav {\n    position: relative;\n  }\n\n  .SubNav::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    opacity: 0;\n    z-index: 9997;\n  }\n\n  .SubNav::after {\n    content: '';\n    z-index: -1;\n    position: fixed;\n    background-color: var(--base-color-scale-black-0);\n    opacity: 0;\n    visibility: hidden;\n    top: 0;\n    right: 0;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .SubNav--open::after {\n    opacity: 0.3;\n    visibility: visible;\n    transition: visibility var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n      opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n  }\n\n  .SubNav__heading {\n    font-size: var(--base-size-16);\n    line-height: var(--base-size-24);\n  }\n\n  .SubNav--open {\n    display: block;\n  }\n\n  .SubNav--open .SubNav--header-container-outer {\n    display: flex;\n    flex-direction: column;\n    max-height: var(--subnav-available-height, 100dvh);\n    overflow: hidden;\n  }\n\n  .SubNav--open .SubNav__header-container {\n    flex-shrink: 0;\n  }\n\n  .SubNav--open + .SubNav__anchor-menu-outer-container {\n    z-index: -1;\n  }\n\n  .SubNav--open::before {\n    background-color: var(--brand-color-canvas-default);\n    animation: fade-in 0.3s var(--brand-animation-easing-glide) forwards;\n  }\n\n  .SubNav__heading-separator--main:not(.SubNav__heading-separator--has-adjacent-label),\n  .SubNav__heading-separator--subheading-active,\n  .SubNav__subheading-container-active {\n    display: none;\n  }\n\n  .SubNav__header-container {\n    display: flex;\n    width: 100%;\n    white-space: pre;\n    position: relative;\n    z-index: 9998;\n  }\n\n  .SubNav__heading-container + .SubNav__heading-container {\n    padding-inline-start: var(--base-size-16);\n  }\n\n  .SubNav__heading-separator {\n    margin-inline-end: var(--base-size-16);\n    z-index: 9998;\n  }\n\n  .SubNav__links-overlay {\n    position: relative;\n    display: flex;\n    flex: auto;\n    flex-direction: column;\n    justify-content: center;\n    z-index: 9998;\n    display: none;\n    padding-inline: var(--base-size-8);\n  }\n\n  .SubNav__links-overlay--open {\n    display: flex;\n    flex-direction: column;\n    gap: var(--base-size-8);\n    padding-block: var(--base-size-16);\n    border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    justify-content: flex-start;\n    overflow-y: auto;\n    min-height: 0;\n  }\n\n  .SubNav__links-overlay--open .SubNav__link:hover .SubNav__link-label {\n    color: var(--brand-color-text-default);\n  }\n\n  .SubNav__overlay-toggle {\n    display: flex;\n    position: relative;\n    width: 100%;\n    z-index: 9999;\n    justify-content: flex-end;\n    padding-inline-end: var(--base-size-16);\n  }\n\n  .SubNav--has-sub-heading:not(.SubNav--subHeadingActive) .SubNav__overlay-toggle {\n    border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    display: block;\n    padding-block: var(--base-size-12);\n    margin-block: 0;\n  }\n\n  .SubNav__overlay-toggle-content {\n    width: 100%;\n    padding-inline-start: var(--base-size-16);\n  }\n\n  .SubNav__overlay-toggle-label {\n    background-color: var(--brand-SubNav-color-link-bgColor);\n    border: none;\n    border-radius: var(--brand-borderRadius-full);\n    padding: var(--base-size-4) var(--base-size-12);\n    gap: var(--base-size-6);\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    font: inherit;\n  }\n\n  .SubNav--full-width .SubNav__overlay-toggle {\n    right: 0;\n  }\n\n  .SubNav__link,\n  .SubNav__action-container {\n    display: none;\n    text-decoration: none;\n  }\n\n  .SubNav__links-overlay--open .SubNav__link-label {\n    position: relative;\n  }\n\n  .SubNav__links-overlay--open .SubNav__link[aria-current]:not([aria-current='false']) * {\n    color: var(--brand-SubNav-color-link-active);\n  }\n\n  .SubNav__links-overlay--open .SubNav__link {\n    padding: var(--base-size-8);\n  }\n\n  .SubNav__links-overlay--open .SubNav__link[aria-current]:not([aria-current='false']) {\n    display: inline-block;\n    background-color: var(--brand-SubNav-color-link-bgColor);\n    border-radius: var(--brand-borderRadius-full);\n    padding: var(--base-size-2) var(--base-size-12) var(--base-size-4);\n    margin-inline-start: var(--base-size-8);\n  }\n\n  .SubNav__links-overlay--open .SubNav__link:hover {\n    background-color: var(--brand-SubNav-color-link-bgColor);\n    border-radius: var(--brand-borderRadius-medium);\n  }\n\n  .SubNav__links-overlay--open .SubNav__link,\n  .SubNav__links-overlay--open .SubNav__action-container {\n    display: block;\n    animation: fade-in 0.3s var(--brand-animation-easing-glide) forwards;\n  }\n\n  .SubNav__links-overlay--open .SubNav__link--has-sub-menu {\n    padding-block: 0;\n  }\n\n  .SubNav__links-overlay--open .SubNav__action-container {\n    width: 100%;\n  }\n\n  .SubNav__links-overlay--open .SubNav__action {\n    width: 100%;\n  }\n\n  .SubNav__sub-menu {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    padding-inline-start: var(--base-size-16);\n    padding-block-start: var(--base-size-8);\n  }\n\n  .SubNav__sub-menu--dropdown .SubNav__link:hover .SubNav__link-label {\n    color: var(--brand-color-text-default) !important;\n  }\n\n  .SubNav__anchor-menu-container {\n    z-index: 99;\n    overflow-x: auto;\n    overflow-y: hidden;\n    width: 100%;\n  }\n\n  .SubNav__anchor-menu-outer-container {\n    position: sticky;\n    top: -1px;\n  }\n\n  .SubNav__anchor-menu-outer-container::after {\n    content: '';\n    position: absolute;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    width: var(--base-size-32);\n    background: linear-gradient(to left, var(--brand-color-canvas-default), transparent);\n    pointer-events: none;\n    z-index: 100;\n  }\n\n  .SubNav__link-label {\n    padding-block-end: var(--base-size-6);\n  }\n\n  .SubNav__sub-menu--anchor {\n    padding-inline: var(--base-size-16);\n    padding-block-end: var(--base-size-16);\n    padding-block-start: var(--base-size-16);\n  }\n\n  .SubNav__sub-menu--anchor .SubNav__link-label {\n    font-size: var(--brand-text-size-100);\n    line-height: var(--brand-text-lineHeight-100);\n    letter-spacing: var(--brand-text-letterSpacing-100);\n  }\n\n  .SubNav__sub-menu--anchor .SubNav__sub-menu-list {\n    padding-inline-end: var(--base-size-32);\n  }\n\n  .SubNav__sub-menu--anchor .SubNav__link {\n    display: block;\n    white-space: pre;\n    position: relative;\n    top: var(--base-size-2);\n  }\n}\n\n.SubNav__overlay-toggle-icon {\n  fill: var(--brand-color-text-default);\n}\n\n.SubNav__overlay-toggle-content {\n  display: flex;\n  align-items: center;\n  gap: var(--base-size-8);\n}\n\n.SubNav__overlay-toggle-content--end {\n  justify-content: flex-end;\n}\n\n.SubNav__link:focus-visible,\n.SubNav__heading:focus-visible,\n.SubNav__subHeading:focus-visible,\n.SubNav__sub-menu-toggle:focus-visible,\n.SubNav__overlay-toggle-label:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\n.SubNav__subHeading {\n  display: block;\n  position: relative;\n  white-space: nowrap;\n}\n\n.SubNav__subHeading[aria-current]:not([aria-current='false']) {\n  background-color: var(--brand-SubNav-color-link-bgColor);\n  border: none;\n  border-radius: var(--brand-borderRadius-full);\n  padding: var(--base-size-6) var(--base-size-12);\n}\n\n@media screen and (min-width: 48rem) {\n  .SubNav__heading-container {\n    padding-inline: var(--base-size-24);\n  }\n\n  .SubNav__overlay-toggle-content {\n    padding-inline-start: var(--base-size-24);\n  }\n\n  .SubNav__links-overlay--open {\n    padding: var(--base-size-24);\n  }\n\n  .SubNav--full-width {\n    padding-inline: 0;\n  }\n\n  .SubNav__sub-menu--anchor {\n    padding-inline: var(--base-size-24);\n  }\n}\n\n.SubNav__heading-label {\n  white-space: pre;\n}\n\n/*\n * Wide breakpoint\n */\n\n@media screen and (min-width: 63.25rem) {\n  .SubNav {\n    align-items: center;\n    display: flex;\n    z-index: 92;\n    padding-inline: var(--base-size-32);\n  }\n\n  .SubNav__links-overlay--open {\n    padding: 0;\n  }\n\n  .SubNav:has(+ .SubNav__anchor-menu-container) {\n    padding-block-end: 0;\n  }\n\n  .SubNav__heading-container {\n    padding-inline-start: 0;\n  }\n\n  .SubNav--full-width {\n    padding-inline: 0;\n  }\n\n  .SubNav__overlay-toggle {\n    display: none;\n  }\n\n  .SubNav__container--with-anchor-nav .SubNav__heading {\n    padding-block-end: 1px;\n  }\n\n  .SubNav__heading-separator {\n    margin-inline-end: var(--base-size-20);\n    display: inline-flex;\n    top: 0;\n  }\n\n  .SubNav__container--with-anchor-nav .SubNav__heading-separator {\n    top: -1px;\n  }\n\n  .SubNav--header-container-outer {\n    display: flex;\n    align-items: center;\n  }\n\n  .SubNav__header-container {\n    display: flex;\n    align-items: center;\n  }\n\n  .SubNav__links-overlay {\n    align-items: center;\n    display: flex;\n    gap: var(--base-size-2);\n    z-index: 92;\n    flex-grow: 1;\n    padding-inline-start: var(--base-size-24);\n  }\n\n  .SubNav__link {\n    text-decoration: none !important; /* dotcom override */\n    transition: color 0.2s var(--brand-animation-easing-glide);\n    position: relative;\n    padding: var(--base-size-4) var(--base-size-12);\n    border-radius: var(--brand-borderRadius-full);\n  }\n\n  .SubNav__link-label {\n    font-size: var(--brand-text-size-100);\n    line-height: var(--brand-text-lineHeight-100);\n  }\n\n  .SubNav__link--has-sub-menu {\n    padding: var(--base-size-4) 0;\n  }\n\n  /* To fix hover distance between link and dropdown */\n  .SubNav__link--has-sub-menu::after {\n    content: '';\n    position: absolute;\n    bottom: calc(var(--base-size-12) * -1);\n    left: 0;\n    width: 100%;\n    height: var(--base-size-12);\n    background: transparent;\n  }\n\n  .SubNav__sub-menu.SubNav__sub-menu--dropdown {\n    background-clip: padding-box;\n    background-color: var(--brand-color-canvas-default);\n    border: var(--brand-color-border-muted) solid var(--brand-borderWidth-thin);\n    border-radius: var(--brand-borderRadius-medium);\n    left: 0;\n    list-style: none;\n    margin-block-start: var(--base-size-8);\n    padding: var(--base-size-8);\n    position: absolute;\n    top: 90%;\n    z-index: 9998;\n    transition-timing-function: var(--brand-animation-easing-glide);\n    transition-duration: var(--brand-animation-duration-fast);\n    transition-property: opacity, transform;\n    left: var(--base-size-4);\n    visibility: hidden;\n    opacity: 0;\n    transform: scale(0.99) translateY(-0.7em) translateX(-8px);\n    transform-origin: top;\n    display: flex;\n    flex-direction: column;\n    gap: var(--base-size-8);\n    width: var(--brand-SubNav-width-subMenu);\n  }\n\n  .SubNav__link--expanded .SubNav__sub-menu.SubNav__sub-menu--dropdown {\n    visibility: visible;\n    opacity: 1;\n    transform: scale(1) translateY(0) translateX(-8px);\n  }\n\n  .SubNav__sub-menu-toggle {\n    width: var(--base-size-24);\n    height: var(--base-size-24);\n    border: none;\n    padding: 0;\n    margin: 0;\n    padding-inline-end: var(--base-size-8);\n    margin-inline-end: calc(-1 * var(--base-size-8));\n    background: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n\n  .SubNav__sub-menu .SubNav__link {\n    display: block;\n  }\n\n  .SubNav__sub-menu--dropdown .SubNav__link-label::after {\n    opacity: 1;\n    transform: scale(0);\n  }\n\n  .SubNav__link--has-sub-menu {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--base-size-4);\n    cursor: pointer;\n  }\n\n  .SubNav__sub-menu--dropdown .SubNav__link-label {\n    position: relative;\n    padding: var(--base-size-4) 0;\n  }\n\n  /* Show pill on submenu parent */\n  .SubNav__link--has-active-sub-menu {\n    background-color: var(--brand-SubNav-color-link-bgColor);\n    border-radius: var(--brand-borderRadius-full);\n    padding: 0 var(--base-size-8) 0 0;\n    gap: 0;\n  }\n\n  .SubNav__link--has-active-sub-menu > .SubNav__link {\n    padding: var(--base-size-4) 0 var(--base-size-4) var(--base-size-12);\n  }\n\n  .SubNav__sub-menu.SubNav__sub-menu--dropdown .SubNav__link {\n    padding: var(--base-size-12);\n  }\n\n  /* Active link pill styling */\n  .SubNav__links-overlay .SubNav__link[aria-current]:not([aria-current='false']) {\n    background-color: var(--brand-SubNav-color-link-bgColor);\n    line-height: 1.1em;\n    padding: var(--base-size-2) var(--base-size-12) var(--base-size-4);\n  }\n\n  /* Firefox optical alignment fix */\n  @supports (-moz-appearance: none) {\n    .SubNav__links-overlay\n      .SubNav__link--has-sub-menu\n      .SubNav__link[aria-current]:not([aria-current='false'])\n      .SubNav__link-label {\n      top: 0;\n    }\n  }\n\n  .SubNav__links-overlay .SubNav__link--has-active-sub-menu .SubNav__link[aria-current]:not([aria-current='false']) {\n    padding-inline-end: var(--base-size-4);\n  }\n\n  .SubNav__sub-menu.SubNav__sub-menu--dropdown .SubNav__link[aria-current]:not([aria-current='false']) {\n    background-color: transparent;\n    border-radius: var(--brand-borderRadius-medium);\n    padding: var(--base-size-4) var(--base-size-8) var(--base-size-4) var(--base-size-12);\n    top: unset;\n  }\n\n  .SubNav__sub-menu.SubNav__sub-menu--dropdown .SubNav__link:hover {\n    background-color: var(--brand-SubNav-color-link-bgColor);\n    border-radius: var(--brand-borderRadius-medium);\n  }\n\n  .SubNav__sub-menu-icon {\n    display: inline-block !important;\n    fill: var(--brand-color-text-muted);\n    transition: transform var(--brand-animation-duration-fast);\n  }\n\n  .SubNav__sub-menu--anchor {\n    padding-inline: var(--base-size-32);\n  }\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes fade-in-down {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .SubNav,\n  .SubNav::before,\n  .SubNav::after,\n  .SubNav * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"SubNav.module.js","names":[],"sources":["../../src/SubNav/SubNav.module.css"],"sourcesContent":[".SubNav__container {\n  position: absolute;\n  width: 100%;\n  z-index: 2;\n  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubNav__container--with-anchor-nav {\n  display: unset;\n  position: relative;\n}\n\n.SubNav__container--with-anchor-nav .SubNav {\n  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubNav {\n  width: 100%;\n  display: flex;\n  z-index: 1;\n  background-color: var(--brand-SubNav-bgColor);\n}\n\n[data-color-mode='dark'] .SubNav {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.SubNav__heading,\n.SubNav__subHeading {\n  display: block;\n  font-size: calc(var(--base-size-16) - 1px); /* One-off override to match design */\n  line-height: calc(var(--base-size-16) - 1px); /* One-off override to match design */\n  font-weight: var(--brand-text-subhead-weight-medium);\n  color: var(--brand-color-text-default);\n  font-family: var(--brand-heading-fontFamily);\n  text-decoration: none;\n}\n\n.SubNav__heading:hover,\n.SubNav__subHeading:hover,\n.SubNav__link:hover .SubNav__link-label {\n  color: var(--brand-color-text-muted);\n  text-decoration: none !important; /* dotcom override */\n}\n\n.SubNav--header-container-outer {\n  width: 100%;\n}\n\n.SubNav__heading-container {\n  min-height: 60px;\n  position: relative;\n  z-index: 9998;\n  display: flex;\n  align-items: center;\n  padding: var(--base-size-16);\n  border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubNav__heading-container + .SubNav__heading-container {\n  padding-inline-start: var(--base-size-24);\n}\n\n.SubNav--has-shadow {\n  box-shadow: var(--brand-SubNav-shadow);\n  background-color: var(--brand-color-canvas-default);\n}\n\n.SubNav--full-width {\n  padding-inline: 0;\n}\n\n.SubNav__action-container {\n  margin-left: auto;\n}\n\n.SubNav__sub-menu-icon {\n  display: none !important;\n}\n\n.SubNav__sub-menu-children {\n  display: contents;\n}\n\n.SubNav__links-overlay {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.SubNav__links-overlay > span {\n  display: none;\n}\n\n.SubNav__sub-menu-toggle {\n  display: none;\n}\n\n/*\n   * Anchor Nav Submenu\n   */\n\n.SubNav__anchor-menu-outer-container {\n  position: sticky;\n  top: -1px;\n  z-index: 91; /* must be higher than subdomain nav bar */\n}\n\n.SubNav__anchor-menu-container {\n  opacity: 0;\n  background-color: transparent;\n  transform: translateY(var(--brand-animation-variant-slideInDown-distance));\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    background-color var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.SubNav__anchor-menu-outer-container:focus-within .SubNav__anchor-menu-container,\n.SubNav__anchor-menu-outer-container--stuck .SubNav__anchor-menu-container {\n  transform: translateY(0);\n  opacity: 1;\n  background-color: var(--brand-color-canvas-default);\n}\n\n.SubNav__anchor-menu-outer-container {\n  height: 0;\n  transition: height var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.SubNav__anchor-menu-outer-container:focus-within,\n.SubNav__anchor-menu-outer-container--stuck {\n  height: auto;\n}\n\n.SubNav__sub-menu--anchor {\n  opacity: 0;\n  transform: translateY(var(--brand-animation-variant-slideInDown-distance));\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    height var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.SubNav__anchor-menu-outer-container:focus-within .SubNav__sub-menu--anchor,\n.SubNav__anchor-menu-outer-container--stuck .SubNav__sub-menu--anchor {\n  visibility: visible;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.SubNav__sub-menu--anchor {\n  display: flex;\n  padding-block: var(--base-size-12);\n  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubNav__sub-menu--anchor .SubNav__sub-menu-list {\n  display: inline-flex;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  gap: var(--base-size-20);\n}\n\n.SubNav__link-label {\n  font-weight: 450; /* FIXME: unsupported in our font weight primitives */\n}\n\n.SubNav__sub-menu--anchor .SubNav__link-label {\n  padding: var(--base-size-6) var(--base-size-12);\n  background-color: transparent;\n  border-radius: var(--brand-borderRadius-full);\n  transition: background-color var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    color var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.SubNav__sub-menu--anchor .SubNav__link--is-in-view .SubNav__link-label {\n  background-color: var(--brand-SubNav-color-link-bgColor);\n}\n\n.SubNav__link:focus-visible .SubNav__link-label::after,\n.SubNav__sub-menu--anchor .SubNav__link--is-in-view:focus-visible .SubNav__link-label::after {\n  opacity: 0;\n}\n\n.SubNav__link[aria-current]:not([aria-current='false']) * {\n  color: var(--brand-SubNav-color-link-active);\n  text-decoration: none !important; /* dotcom override */\n}\n\n.SubNav__link:hover .SubNav__link-label {\n  transition: color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.SubNav__link:hover .SubNav__link-label::after {\n  border-color: var(--brand-color-text-default);\n}\n\n/*\n * Narrow breakpoint\n */\n\n@media screen and (max-width: 63.24rem) {\n  .SubNav {\n    position: relative;\n  }\n\n  .SubNav::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    opacity: 0;\n    z-index: 9997;\n  }\n\n  .SubNav::after {\n    content: '';\n    z-index: -1;\n    position: fixed;\n    background-color: var(--base-color-scale-black-0);\n    opacity: 0;\n    visibility: hidden;\n    top: 0;\n    right: 0;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .SubNav--open::after {\n    opacity: 0.3;\n    visibility: visible;\n    transition: visibility var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n      opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n  }\n\n  .SubNav__heading {\n    font-size: var(--base-size-16);\n    line-height: var(--base-size-24);\n  }\n\n  .SubNav--open {\n    display: block;\n  }\n\n  .SubNav--open .SubNav--header-container-outer {\n    display: flex;\n    flex-direction: column;\n    max-height: var(--subnav-available-height, 100dvh);\n    overflow: hidden;\n  }\n\n  .SubNav--open .SubNav__header-container {\n    flex-shrink: 0;\n  }\n\n  .SubNav--open + .SubNav__anchor-menu-outer-container {\n    z-index: -1;\n  }\n\n  .SubNav--open::before {\n    background-color: var(--brand-color-canvas-default);\n    animation: fade-in 0.3s var(--brand-animation-easing-glide) forwards;\n  }\n\n  .SubNav__heading-separator--main:not(.SubNav__heading-separator--has-adjacent-label),\n  .SubNav__heading-separator--subheading-active,\n  .SubNav__subheading-container-active {\n    display: none;\n  }\n\n  .SubNav__header-container {\n    display: flex;\n    width: 100%;\n    white-space: pre;\n    position: relative;\n    z-index: 9998;\n  }\n\n  .SubNav__heading-container + .SubNav__heading-container {\n    padding-inline-start: var(--base-size-16);\n  }\n\n  .SubNav__heading-separator {\n    margin-inline-end: var(--base-size-16);\n    z-index: 9998;\n  }\n\n  .SubNav__links-overlay {\n    position: relative;\n    display: flex;\n    flex: auto;\n    flex-direction: column;\n    justify-content: center;\n    z-index: 9998;\n    display: none;\n    padding-inline: var(--base-size-8);\n  }\n\n  .SubNav__links-overlay--open {\n    display: flex;\n    flex-direction: column;\n    gap: var(--base-size-8);\n    padding-block: var(--base-size-16);\n    border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    justify-content: flex-start;\n    overflow-y: auto;\n    min-height: 0;\n  }\n\n  .SubNav__links-overlay--open .SubNav__link:hover .SubNav__link-label {\n    color: var(--brand-color-text-default);\n  }\n\n  .SubNav__overlay-toggle {\n    display: flex;\n    position: relative;\n    width: 100%;\n    z-index: 9999;\n    justify-content: flex-end;\n    padding-inline-end: var(--base-size-16);\n  }\n\n  .SubNav--has-sub-heading:not(.SubNav--subHeadingActive) .SubNav__overlay-toggle {\n    border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    display: block;\n    padding-block: var(--base-size-12);\n    margin-block: 0;\n  }\n\n  .SubNav__overlay-toggle-content {\n    width: 100%;\n    padding-inline-start: var(--base-size-16);\n  }\n\n  .SubNav__overlay-toggle-label {\n    background-color: var(--brand-SubNav-color-link-bgColor);\n    border: none;\n    border-radius: var(--brand-borderRadius-full);\n    padding: var(--base-size-4) var(--base-size-12);\n    gap: var(--base-size-6);\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    font: inherit;\n  }\n\n  .SubNav--full-width .SubNav__overlay-toggle {\n    right: 0;\n  }\n\n  .SubNav__link,\n  .SubNav__action-container {\n    display: none;\n    text-decoration: none;\n  }\n\n  .SubNav__links-overlay--open .SubNav__link-label {\n    position: relative;\n  }\n\n  .SubNav__links-overlay--open .SubNav__link[aria-current]:not([aria-current='false']) * {\n    color: var(--brand-SubNav-color-link-active);\n  }\n\n  .SubNav__links-overlay--open .SubNav__link {\n    margin-inline-start: var(--base-size-8);\n    padding: var(--base-size-4) var(--base-size-12);\n  }\n\n  .SubNav__links-overlay--open .SubNav__link[aria-current]:not([aria-current='false']) {\n    display: inline-flex;\n    background-color: var(--brand-SubNav-color-link-bgColor);\n    border-radius: var(--brand-borderRadius-full);\n  }\n\n  .SubNav__links-overlay--open .SubNav__link:hover {\n    display: inline-flex;\n    background-color: var(--brand-SubNav-color-link-bgColor);\n    border-radius: var(--brand-borderRadius-full);\n  }\n\n  .SubNav__links-overlay--open .SubNav__link {\n    display: inline-flex;\n    animation: fade-in 0.3s var(--brand-animation-easing-glide) forwards;\n  }\n\n  .SubNav__links-overlay--open .SubNav__action-container {\n    display: block;\n    animation: fade-in 0.3s var(--brand-animation-easing-glide) forwards;\n  }\n\n  .SubNav__links-overlay--open .SubNav__link--has-sub-menu {\n    padding-block: 0;\n  }\n\n  .SubNav__links-overlay--open .SubNav__action-container {\n    width: 100%;\n  }\n\n  .SubNav__links-overlay--open .SubNav__action {\n    width: 100%;\n  }\n\n  .SubNav__sub-menu {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    padding-inline-start: var(--base-size-16);\n    padding-block-start: var(--base-size-8);\n    display: flex;\n    flex-direction: column;\n    gap: var(--base-size-8);\n  }\n\n  .SubNav__sub-menu .SubNav__link {\n    margin-inline-start: 0;\n  }\n\n  .SubNav__sub-menu--dropdown .SubNav__link:hover .SubNav__link-label {\n    color: var(--brand-color-text-default) !important;\n  }\n\n  .SubNav__anchor-menu-container {\n    z-index: 99;\n    overflow-x: auto;\n    overflow-y: hidden;\n    width: 100%;\n  }\n\n  .SubNav__anchor-menu-outer-container {\n    position: sticky;\n    top: -1px;\n  }\n\n  .SubNav__anchor-menu-outer-container::after {\n    content: '';\n    position: absolute;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    width: var(--base-size-32);\n    background: linear-gradient(to left, var(--brand-color-canvas-default), transparent);\n    pointer-events: none;\n    z-index: 100;\n  }\n\n  .SubNav__sub-menu--anchor {\n    padding-inline: var(--base-size-16);\n    padding-block-end: var(--base-size-16);\n    padding-block-start: var(--base-size-16);\n  }\n\n  .SubNav__sub-menu--anchor .SubNav__link-label {\n    font-size: var(--brand-text-size-100);\n    line-height: var(--brand-text-lineHeight-100);\n    letter-spacing: var(--brand-text-letterSpacing-100);\n  }\n\n  .SubNav__sub-menu--anchor .SubNav__sub-menu-list {\n    padding-inline-end: var(--base-size-32);\n  }\n\n  .SubNav__sub-menu--anchor .SubNav__link {\n    display: block;\n    white-space: pre;\n    position: relative;\n    top: var(--base-size-2);\n  }\n}\n\n.SubNav__overlay-toggle-icon {\n  fill: var(--brand-color-text-default);\n}\n\n.SubNav__overlay-toggle-content {\n  display: flex;\n  align-items: center;\n  gap: var(--base-size-8);\n}\n\n.SubNav__overlay-toggle-content--end {\n  justify-content: flex-end;\n}\n\n.SubNav__link:focus-visible,\n.SubNav__heading:focus-visible,\n.SubNav__subHeading:focus-visible,\n.SubNav__sub-menu-toggle:focus-visible,\n.SubNav__overlay-toggle-label:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\n.SubNav__subHeading {\n  display: block;\n  position: relative;\n  white-space: nowrap;\n}\n\n.SubNav__subHeading[aria-current]:not([aria-current='false']) {\n  background-color: var(--brand-SubNav-color-link-bgColor);\n  border: none;\n  border-radius: var(--brand-borderRadius-full);\n  padding: var(--base-size-6) var(--base-size-12);\n}\n\n@media screen and (min-width: 48rem) {\n  .SubNav__heading-container {\n    padding-inline: var(--base-size-24);\n  }\n\n  .SubNav__overlay-toggle-content {\n    padding-inline-start: var(--base-size-24);\n  }\n\n  .SubNav__links-overlay--open {\n    padding: var(--base-size-24);\n  }\n\n  .SubNav--full-width {\n    padding-inline: 0;\n  }\n\n  .SubNav__sub-menu--anchor {\n    padding-inline: var(--base-size-24);\n  }\n}\n\n.SubNav__heading-label {\n  white-space: pre;\n}\n\n/*\n * Wide breakpoint\n */\n\n@media screen and (min-width: 63.25rem) {\n  .SubNav {\n    align-items: center;\n    display: flex;\n    z-index: 92;\n    padding-inline: var(--base-size-32);\n  }\n\n  .SubNav__links-overlay--open {\n    padding: 0;\n  }\n\n  .SubNav:has(+ .SubNav__anchor-menu-container) {\n    padding-block-end: 0;\n  }\n\n  .SubNav__heading-container {\n    padding-inline-start: 0;\n  }\n\n  .SubNav--full-width {\n    padding-inline: 0;\n  }\n\n  .SubNav__overlay-toggle {\n    display: none;\n  }\n\n  .SubNav__container--with-anchor-nav .SubNav__heading {\n    padding-block-end: 1px;\n  }\n\n  .SubNav__heading-separator {\n    margin-inline-end: var(--base-size-20);\n    display: inline-flex;\n    top: 0;\n  }\n\n  .SubNav__container--with-anchor-nav .SubNav__heading-separator {\n    top: -1px;\n  }\n\n  .SubNav--header-container-outer {\n    display: flex;\n    align-items: center;\n  }\n\n  .SubNav__header-container {\n    display: flex;\n    align-items: center;\n  }\n\n  .SubNav__links-overlay {\n    align-items: center;\n    display: flex;\n    gap: var(--base-size-2);\n    z-index: 92;\n    flex-grow: 1;\n    padding-inline-start: var(--base-size-24);\n  }\n\n  .SubNav__link {\n    text-decoration: none !important; /* dotcom override */\n    transition: color 0.2s var(--brand-animation-easing-glide);\n    position: relative;\n    padding: var(--base-size-4) var(--base-size-12);\n    border-radius: var(--brand-borderRadius-full);\n  }\n\n  .SubNav__link-label {\n    font-size: var(--brand-text-size-100);\n    line-height: var(--brand-text-lineHeight-100);\n  }\n\n  .SubNav__link--has-sub-menu {\n    padding: var(--base-size-4) 0;\n  }\n\n  /* To fix hover distance between link and dropdown */\n  .SubNav__link--has-sub-menu::after {\n    content: '';\n    position: absolute;\n    bottom: calc(var(--base-size-12) * -1);\n    left: 0;\n    width: 100%;\n    height: var(--base-size-12);\n    background: transparent;\n  }\n\n  .SubNav__sub-menu.SubNav__sub-menu--dropdown {\n    background-clip: padding-box;\n    background-color: var(--brand-color-canvas-default);\n    border: var(--brand-color-border-muted) solid var(--brand-borderWidth-thin);\n    border-radius: var(--brand-borderRadius-medium);\n    left: 0;\n    list-style: none;\n    margin-block-start: var(--base-size-8);\n    padding: var(--base-size-8);\n    position: absolute;\n    top: 90%;\n    z-index: 9998;\n    transition-timing-function: var(--brand-animation-easing-glide);\n    transition-duration: var(--brand-animation-duration-fast);\n    transition-property: opacity, transform;\n    left: var(--base-size-4);\n    visibility: hidden;\n    opacity: 0;\n    transform: scale(0.99) translateY(-0.7em) translateX(-8px);\n    transform-origin: top;\n    display: flex;\n    flex-direction: column;\n    gap: var(--base-size-8);\n    width: var(--brand-SubNav-width-subMenu);\n  }\n\n  .SubNav__link--expanded .SubNav__sub-menu.SubNav__sub-menu--dropdown {\n    visibility: visible;\n    opacity: 1;\n    transform: scale(1) translateY(0) translateX(-8px);\n  }\n\n  .SubNav__sub-menu-toggle {\n    width: var(--base-size-24);\n    height: var(--base-size-24);\n    border: none;\n    padding: 0;\n    margin: 0;\n    padding-inline-end: var(--base-size-8);\n    margin-inline-end: calc(-1 * var(--base-size-8));\n    background: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n\n  .SubNav__sub-menu .SubNav__link {\n    display: block;\n  }\n\n  .SubNav__sub-menu--dropdown .SubNav__link-label::after {\n    opacity: 1;\n    transform: scale(0);\n  }\n\n  .SubNav__link--has-sub-menu {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--base-size-4);\n    cursor: pointer;\n  }\n\n  .SubNav__link--has-sub-menu > .SubNav__link {\n    padding-inline-end: 0;\n  }\n\n  .SubNav__sub-menu--dropdown .SubNav__link-label {\n    position: relative;\n    padding: var(--base-size-4) 0;\n  }\n\n  /* Show pill on submenu parent */\n  .SubNav__link--has-active-sub-menu {\n    background-color: var(--brand-SubNav-color-link-bgColor);\n    border-radius: var(--brand-borderRadius-full);\n    padding: 0 var(--base-size-8) 0 0;\n    gap: 0;\n  }\n\n  .SubNav__link--has-active-sub-menu > .SubNav__link {\n    padding: var(--base-size-4) 0 var(--base-size-4) var(--base-size-12);\n  }\n\n  .SubNav__sub-menu.SubNav__sub-menu--dropdown .SubNav__link {\n    padding: var(--base-size-12);\n  }\n\n  /* Active link pill styling */\n  .SubNav__links-overlay .SubNav__link[aria-current]:not([aria-current='false']) {\n    background-color: var(--brand-SubNav-color-link-bgColor);\n    line-height: 1.1em;\n  }\n\n  /* Firefox optical alignment fix */\n  @supports (-moz-appearance: none) {\n    .SubNav__links-overlay\n      .SubNav__link--has-sub-menu\n      .SubNav__link[aria-current]:not([aria-current='false'])\n      .SubNav__link-label {\n      top: 0;\n    }\n  }\n\n  .SubNav__links-overlay .SubNav__link--has-active-sub-menu .SubNav__link[aria-current]:not([aria-current='false']) {\n    padding-inline-end: var(--base-size-4);\n  }\n\n  .SubNav__sub-menu.SubNav__sub-menu--dropdown .SubNav__link[aria-current]:not([aria-current='false']) {\n    background-color: transparent;\n    border-radius: var(--brand-borderRadius-medium);\n    padding: var(--base-size-4) var(--base-size-8) var(--base-size-4) var(--base-size-12);\n    top: unset;\n  }\n\n  .SubNav__sub-menu.SubNav__sub-menu--dropdown .SubNav__link:hover {\n    background-color: var(--brand-SubNav-color-link-bgColor);\n    border-radius: var(--brand-borderRadius-medium);\n  }\n\n  .SubNav__sub-menu-icon {\n    display: inline-block !important;\n    fill: var(--brand-color-text-muted);\n    transition: transform var(--brand-animation-duration-fast);\n  }\n\n  .SubNav__link--has-sub-menu:not(.SubNav__link--has-active-sub-menu) .SubNav__sub-menu-icon {\n    position: relative;\n    top: calc(-1 * var(--brand-borderWidth-thin));\n  }\n\n  .SubNav__sub-menu--anchor {\n    padding-inline: var(--base-size-32);\n  }\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes fade-in-down {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .SubNav,\n  .SubNav::before,\n  .SubNav::after,\n  .SubNav * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/esm/Tiles/Tiles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tiles.d.ts","sourceRoot":"","sources":["../../src/Tiles/Tiles.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgF,MAAM,OAAO,CAAA;AAEpG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD,sBAAsB;AACtB,OAAO,yGAAyG,CAAA;AAehH,KAAK,YAAY,GAAG,SAAS,GAAG,WAAW,CAAA;AAE3C,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,CAAA;AAIxC,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,SAAS,CAAC,cAAc,CAAC,GAC3B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAoCtC,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,SAAS,CAAC,aAAa,CAAC,GAC1B,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAoCH;;;GAGG;AACH,eAAO,MAAM,KAAK;;;;;;;CAGhB,CAAA"}
+{"version":3,"file":"Tiles.d.ts","sourceRoot":"","sources":["../../src/Tiles/Tiles.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgF,MAAM,OAAO,CAAA;AAEpG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAInD,sBAAsB;AACtB,OAAO,yGAAyG,CAAA;AAehH,KAAK,YAAY,GAAG,SAAS,GAAG,WAAW,CAAA;AAE3C,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,CAAA;AAIxC,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,SAAS,CAAC,cAAc,CAAC,GAC3B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAqCtC,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,SAAS,CAAC,aAAa,CAAC,GAC1B,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAoCH;;;GAGG;AACH,eAAO,MAAM,KAAK;;;;;;;CAGhB,CAAA"}

package/esm/Tiles/Tiles.js

@@ -1,12 +1,13 @@
 import e from "../node_modules/clsx/dist/clsx.js";
 import { Text as t } from "../Text/Text.js";
 import { ArrowUpRightIcon as n } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import r from "../component-helpers/shared.module.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes-DTTqGOfy.css';/* empty css                                                                                                   */
-import r from "./Tiles.module.js";
-import { createContext as i, forwardRef as a, useContext as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import i from "./Tiles.module.js";
+import { createContext as a, forwardRef as o, useContext as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/Tiles/Tiles.tsx
-var l = {
+var u = {
 	root: "Tiles",
 	get grid() {
 		return `${this.root}-grid`;
@@ -14,56 +15,56 @@ var l = {
 	get item() {
 		return `${this.root}-item`;
 	}
-}, u = i("default"), d = a(({ variant: t = "default", layout: n = "default", children: i, className: a, "data-testid": o, ...c }, d) => /* @__PURE__ */ s(u.Provider, {
+}, d = a("default"), f = o(({ variant: t = "default", layout: n = "default", children: a, className: o, "data-testid": s, ...l }, f) => /* @__PURE__ */ c(d.Provider, {
 	value: n,
-	children: /* @__PURE__ */ s("div", {
-		ref: d,
-		className: e(r.Tiles, r[`Tiles--variant-${t}`], r[`Tiles--layout-${n}`], a),
-		"data-testid": o || l.root,
-		...c,
-		children: /* @__PURE__ */ s("ul", {
-			className: r["Tiles-grid"],
-			"data-testid": l.grid,
-			children: i
+	children: /* @__PURE__ */ c("div", {
+		ref: f,
+		className: e(i.Tiles, i[`Tiles--variant-${t}`], i[`Tiles--layout-${n}`], t === "gridlines" && r.gridline, o),
+		"data-testid": s || u.root,
+		...l,
+		children: /* @__PURE__ */ c("ul", {
+			className: i["Tiles-grid"],
+			"data-testid": u.grid,
+			children: a
 		})
 	})
-})), f = a(({ name: i, href: a, children: d, className: f, "data-testid": p, ...m }, h) => {
-	let g = o(u), _ = !!a, v = g === "compact" && !_, y = /* @__PURE__ */ c("span", {
-		className: r["Tiles-item-content"],
-		children: [/* @__PURE__ */ s("span", {
-			className: r["Tiles-item-media"],
+})), p = o(({ name: r, href: a, children: o, className: f, "data-testid": p, ...m }, h) => {
+	let g = s(d), _ = !!a, v = g === "compact" && !_, y = /* @__PURE__ */ l("span", {
+		className: i["Tiles-item-content"],
+		children: [/* @__PURE__ */ c("span", {
+			className: i["Tiles-item-media"],
 			"aria-hidden": "true",
-			children: d
-		}), /* @__PURE__ */ c("span", {
-			className: e(r["Tiles-item-label"], v && "visually-hidden"),
-			children: [/* @__PURE__ */ s(t, {
+			children: o
+		}), /* @__PURE__ */ l("span", {
+			className: e(i["Tiles-item-label"], v && "visually-hidden"),
+			children: [/* @__PURE__ */ c(t, {
 				as: "span",
 				size: "100",
-				className: r["Tiles-item-name"],
-				children: i
-			}), _ && /* @__PURE__ */ s(n, {
+				className: i["Tiles-item-name"],
+				children: r
+			}), _ && /* @__PURE__ */ c(n, {
 				size: 16,
-				className: r["Tiles-item-icon"],
+				className: i["Tiles-item-icon"],
 				"aria-hidden": "true"
 			})]
 		})]
 	});
-	return /* @__PURE__ */ s("li", {
+	return /* @__PURE__ */ c("li", {
 		ref: h,
-		className: e(r["Tiles-item"], f),
-		"data-testid": p || l.item,
+		className: e(i["Tiles-item"], f),
+		"data-testid": p || u.item,
 		...m,
-		children: _ ? /* @__PURE__ */ s("a", {
+		children: _ ? /* @__PURE__ */ c("a", {
 			href: a,
-			className: r["Tiles-item-link"],
+			className: i["Tiles-item-link"],
 			children: y
 		}) : y
 	});
-}), p = Object.assign(d, {
-	Item: f,
-	testIds: l
+}), m = Object.assign(f, {
+	Item: p,
+	testIds: u
 });
 //#endregion
-export { p as Tiles };
+export { m as Tiles };
 
 //# sourceMappingURL=Tiles.js.map

package/esm/Tiles/Tiles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tiles.js","names":[],"sources":["../../src/Tiles/Tiles.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {createContext, forwardRef, type PropsWithChildren, type Ref, useContext} from 'react'\nimport {ArrowUpRightIcon} from '@primer/octicons-react'\nimport type {BaseProps} from '../component-helpers'\nimport {Text} from '../Text'\n\n/** * Design Tokens */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Tiles.module.css'\n\nconst testIds = {\n  root: 'Tiles',\n  get grid() {\n    return `${this.root}-grid`\n  },\n  get item() {\n    return `${this.root}-item`\n  },\n}\n\ntype TilesVariant = 'default' | 'gridlines'\n\ntype TilesLayout = 'default' | 'compact'\n\nconst TilesContext = createContext<TilesLayout>('default')\n\nexport type TilesProps = {\n  /**\n   * The visual variant of the Tiles component.\n   */\n  variant?: TilesVariant\n  /**\n   * The layout density of the Tiles grid.\n   */\n  layout?: TilesLayout\n  /**\n   * Test id for the root Tiles element.\n   */\n  'data-testid'?: string\n} & BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst TilesRoot = forwardRef(\n  (\n    {\n      variant = 'default',\n      layout = 'default',\n      children,\n      className,\n      'data-testid': testId,\n      ...rest\n    }: PropsWithChildren<TilesProps>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    return (\n      <TilesContext.Provider value={layout}>\n        <div\n          ref={ref}\n          className={clsx(\n            styles.Tiles,\n            styles[`Tiles--variant-${variant}`],\n            styles[`Tiles--layout-${layout}`],\n            className,\n          )}\n          data-testid={testId || testIds.root}\n          {...rest}\n        >\n          <ul className={styles['Tiles-grid']} data-testid={testIds.grid}>\n            {children}\n          </ul>\n        </div>\n      </TilesContext.Provider>\n    )\n  },\n)\n\nexport type TilesItemProps = {\n  /**\n   * The accessible name for the tile item.\n   */\n  name: string\n  /**\n   * Optional URL to link the tile to.\n   */\n  href?: string\n  /**\n   * Test id for the tile item element.\n   */\n  'data-testid'?: string\n} & BaseProps<HTMLLIElement> &\n  Omit<React.HTMLAttributes<HTMLLIElement>, 'children'> & {\n    children: React.ReactNode\n  }\n\nconst _Item = forwardRef(\n  ({name, href, children, className, 'data-testid': testId, ...rest}: TilesItemProps, ref: Ref<HTMLLIElement>) => {\n    const layout = useContext(TilesContext)\n    const hasLink = Boolean(href)\n    const isLabelHidden = layout === 'compact' && !hasLink\n\n    const content = (\n      <span className={styles['Tiles-item-content']}>\n        <span className={styles['Tiles-item-media']} aria-hidden=\"true\">\n          {children}\n        </span>\n        <span className={clsx(styles['Tiles-item-label'], isLabelHidden && 'visually-hidden')}>\n          <Text as=\"span\" size=\"100\" className={styles['Tiles-item-name']}>\n            {name}\n          </Text>\n          {hasLink && <ArrowUpRightIcon size={16} className={styles['Tiles-item-icon']} aria-hidden=\"true\" />}\n        </span>\n      </span>\n    )\n\n    return (\n      <li ref={ref} className={clsx(styles['Tiles-item'], className)} data-testid={testId || testIds.item} {...rest}>\n        {hasLink ? (\n          <a href={href} className={styles['Tiles-item-link']}>\n            {content}\n          </a>\n        ) : (\n          content\n        )}\n      </li>\n    )\n  },\n)\n\n/**\n * Use Tiles to display a grid of logos or icons with optional links.\n * @see https://primer.style/brand/components/Tiles\n */\nexport const Tiles = Object.assign(TilesRoot, {\n  Item: _Item,\n  testIds,\n})\n"],"mappings":";;;;;;;;AAYA,IAAM,IAAU;CACd,MAAM;CACN,IAAI,OAAO;AACT,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,OAAO;AACT,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAMK,IAAe,EAA2B,UAAU,EAkBpD,IAAY,GAEd,EACE,aAAU,WACV,YAAS,WACT,aACA,cACA,eAAe,GACf,GAAG,KAEL,MAGE,kBAAC,EAAa,UAAd;CAAuB,OAAO;WAC5B,kBAAC,OAAD;EACO;EACL,WAAW,EACT,EAAO,OACP,EAAO,kBAAkB,MACzB,EAAO,iBAAiB,MACxB,EACD;EACD,eAAa,KAAU,EAAQ;EAC/B,GAAI;YAEJ,kBAAC,MAAD;GAAI,WAAW,EAAO;GAAe,eAAa,EAAQ;GACvD;GACE,CAAA;EACD,CAAA;CACgB,CAAA,CAG7B,EAoBK,IAAQ,GACX,EAAC,SAAM,SAAM,aAAU,cAAW,eAAe,GAAQ,GAAG,KAAuB,MAA4B;CAC9G,IAAM,IAAS,EAAW,EAAa,EACjC,IAAU,EAAQ,GAClB,IAAgB,MAAW,aAAa,CAAC,GAEzC,IACJ,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAqB,eAAY;GACtD;GACI,CAAA,EACP,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,qBAAqB,KAAiB,kBAAkB;aAArF,CACE,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAK;IAAM,WAAW,EAAO;cAC1C;IACI,CAAA,EACN,KAAW,kBAAC,GAAD;IAAkB,MAAM;IAAI,WAAW,EAAO;IAAoB,eAAY;IAAS,CAAA,CAC9F;KACF;;AAGT,QACE,kBAAC,MAAD;EAAS;EAAK,WAAW,EAAK,EAAO,eAAe,EAAU;EAAE,eAAa,KAAU,EAAQ;EAAM,GAAI;YACtG,IACC,kBAAC,KAAD;GAAS;GAAM,WAAW,EAAO;aAC9B;GACC,CAAA,GAEJ;EAEC,CAAA;EAGV,EAMY,IAAQ,OAAO,OAAO,GAAW;CAC5C,MAAM;CACN;CACD,CAAC"}
+{"version":3,"file":"Tiles.js","names":[],"sources":["../../src/Tiles/Tiles.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {createContext, forwardRef, type PropsWithChildren, type Ref, useContext} from 'react'\nimport {ArrowUpRightIcon} from '@primer/octicons-react'\nimport type {BaseProps} from '../component-helpers'\nimport gridlineStyles from '../component-helpers/shared.module.css'\nimport {Text} from '../Text'\n\n/** * Design Tokens */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Tiles.module.css'\n\nconst testIds = {\n  root: 'Tiles',\n  get grid() {\n    return `${this.root}-grid`\n  },\n  get item() {\n    return `${this.root}-item`\n  },\n}\n\ntype TilesVariant = 'default' | 'gridlines'\n\ntype TilesLayout = 'default' | 'compact'\n\nconst TilesContext = createContext<TilesLayout>('default')\n\nexport type TilesProps = {\n  /**\n   * The visual variant of the Tiles component.\n   */\n  variant?: TilesVariant\n  /**\n   * The layout density of the Tiles grid.\n   */\n  layout?: TilesLayout\n  /**\n   * Test id for the root Tiles element.\n   */\n  'data-testid'?: string\n} & BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst TilesRoot = forwardRef(\n  (\n    {\n      variant = 'default',\n      layout = 'default',\n      children,\n      className,\n      'data-testid': testId,\n      ...rest\n    }: PropsWithChildren<TilesProps>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    return (\n      <TilesContext.Provider value={layout}>\n        <div\n          ref={ref}\n          className={clsx(\n            styles.Tiles,\n            styles[`Tiles--variant-${variant}`],\n            styles[`Tiles--layout-${layout}`],\n            variant === 'gridlines' && gridlineStyles.gridline,\n            className,\n          )}\n          data-testid={testId || testIds.root}\n          {...rest}\n        >\n          <ul className={styles['Tiles-grid']} data-testid={testIds.grid}>\n            {children}\n          </ul>\n        </div>\n      </TilesContext.Provider>\n    )\n  },\n)\n\nexport type TilesItemProps = {\n  /**\n   * The accessible name for the tile item.\n   */\n  name: string\n  /**\n   * Optional URL to link the tile to.\n   */\n  href?: string\n  /**\n   * Test id for the tile item element.\n   */\n  'data-testid'?: string\n} & BaseProps<HTMLLIElement> &\n  Omit<React.HTMLAttributes<HTMLLIElement>, 'children'> & {\n    children: React.ReactNode\n  }\n\nconst _Item = forwardRef(\n  ({name, href, children, className, 'data-testid': testId, ...rest}: TilesItemProps, ref: Ref<HTMLLIElement>) => {\n    const layout = useContext(TilesContext)\n    const hasLink = Boolean(href)\n    const isLabelHidden = layout === 'compact' && !hasLink\n\n    const content = (\n      <span className={styles['Tiles-item-content']}>\n        <span className={styles['Tiles-item-media']} aria-hidden=\"true\">\n          {children}\n        </span>\n        <span className={clsx(styles['Tiles-item-label'], isLabelHidden && 'visually-hidden')}>\n          <Text as=\"span\" size=\"100\" className={styles['Tiles-item-name']}>\n            {name}\n          </Text>\n          {hasLink && <ArrowUpRightIcon size={16} className={styles['Tiles-item-icon']} aria-hidden=\"true\" />}\n        </span>\n      </span>\n    )\n\n    return (\n      <li ref={ref} className={clsx(styles['Tiles-item'], className)} data-testid={testId || testIds.item} {...rest}>\n        {hasLink ? (\n          <a href={href} className={styles['Tiles-item-link']}>\n            {content}\n          </a>\n        ) : (\n          content\n        )}\n      </li>\n    )\n  },\n)\n\n/**\n * Use Tiles to display a grid of logos or icons with optional links.\n * @see https://primer.style/brand/components/Tiles\n */\nexport const Tiles = Object.assign(TilesRoot, {\n  Item: _Item,\n  testIds,\n})\n"],"mappings":";;;;;;;;;AAaA,IAAM,IAAU;CACd,MAAM;CACN,IAAI,OAAO;AACT,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,OAAO;AACT,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAMK,IAAe,EAA2B,UAAU,EAkBpD,IAAY,GAEd,EACE,aAAU,WACV,YAAS,WACT,aACA,cACA,eAAe,GACf,GAAG,KAEL,MAGE,kBAAC,EAAa,UAAd;CAAuB,OAAO;WAC5B,kBAAC,OAAD;EACO;EACL,WAAW,EACT,EAAO,OACP,EAAO,kBAAkB,MACzB,EAAO,iBAAiB,MACxB,MAAY,eAAe,EAAe,UAC1C,EACD;EACD,eAAa,KAAU,EAAQ;EAC/B,GAAI;YAEJ,kBAAC,MAAD;GAAI,WAAW,EAAO;GAAe,eAAa,EAAQ;GACvD;GACE,CAAA;EACD,CAAA;CACgB,CAAA,CAG7B,EAoBK,IAAQ,GACX,EAAC,SAAM,SAAM,aAAU,cAAW,eAAe,GAAQ,GAAG,KAAuB,MAA4B;CAC9G,IAAM,IAAS,EAAW,EAAa,EACjC,IAAU,EAAQ,GAClB,IAAgB,MAAW,aAAa,CAAC,GAEzC,IACJ,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAqB,eAAY;GACtD;GACI,CAAA,EACP,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,qBAAqB,KAAiB,kBAAkB;aAArF,CACE,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAK;IAAM,WAAW,EAAO;cAC1C;IACI,CAAA,EACN,KAAW,kBAAC,GAAD;IAAkB,MAAM;IAAI,WAAW,EAAO;IAAoB,eAAY;IAAS,CAAA,CAC9F;KACF;;AAGT,QACE,kBAAC,MAAD;EAAS;EAAK,WAAW,EAAK,EAAO,eAAe,EAAU;EAAE,eAAa,KAAU,EAAQ;EAAM,GAAI;YACtG,IACC,kBAAC,KAAD;GAAS;GAAM,WAAW,EAAO;aAC9B;GACC,CAAA,GAEJ;EAEC,CAAA;EAGV,EAMY,IAAQ,OAAO,OAAO,GAAW;CAC5C,MAAM;CACN;CACD,CAAC"}

package/esm/Tiles/Tiles.module-DVK0nMCy.css

@@ -0,0 +1 @@
+.Primer_Brand__Tiles-module__Tiles___RhWBm{width:100%;color:var(--brand-color-text-default)}.Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:2;flex-wrap:wrap;justify-content:center;margin:0;padding:0;list-style:none;display:flex}@media screen and (width>=48rem){.Primer_Brand__Tiles-module__Tiles--layout-default___szHFY .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:4}}@media screen and (width>=63.25rem){.Primer_Brand__Tiles-module__Tiles--layout-default___szHFY .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:6}}@media screen and (width>=48rem){.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:4}}@media screen and (width>=63.25rem){.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:8}}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{padding-right:var(--brand-borderWidth-thin);padding-bottom:var(--brand-borderWidth-thin);position:relative}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:before,.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:after{content:"";border-left:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);z-index:1;pointer-events:none;width:0;position:absolute;top:0;bottom:0}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:before{left:0}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:after{right:0}.Primer_Brand__Tiles-module__Tiles-item___YlnUj{--tiles-inset-shadow:inset 0 0 0 transparent;width:calc(100% / var(--tiles-columns));box-sizing:border-box;background-color:var(--brand-tiles-bgColor-rest);border-top:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);border-left:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);box-shadow:var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted), 0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), inset 0 0 0 transparent;box-shadow:var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted), 0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), var(--tiles-inset-shadow);transition:background-color var(--brand-animation-duration-faster) var(--brand-animation-easing-default), box-shadow var(--brand-animation-duration-faster) var(--brand-animation-easing-default);flex-direction:column;display:flex;position:relative}:is(.Primer_Brand__Tiles-module__Tiles-item___YlnUj:has(.Primer_Brand__Tiles-module__Tiles-item-link___NcK69):hover,.Primer_Brand__Tiles-module__Tiles-item___YlnUj:has(.Primer_Brand__Tiles-module__Tiles-item-link___NcK69):focus-within){--tiles-inset-shadow:inset 0 var(--base-size-2) 0 var(--brand-tiles-highlightColor);background-color:var(--brand-tiles-bgColor-hover)}.Primer_Brand__Tiles-module__Tiles-item-link___NcK69{width:100%;color:inherit;flex:1;-webkit-text-decoration:none;text-decoration:none;display:flex}.Primer_Brand__Tiles-module__Tiles-item-link___NcK69:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:calc(-1 * var(--base-size-4));border-radius:var(--brand-borderRadius-small)}.Primer_Brand__Tiles-module__Tiles-item-content___YIq8M{aspect-ratio:1;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.Primer_Brand__Tiles-module__Tiles-item-media___QH9l2{justify-content:center;align-items:center;display:flex}.Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 svg,.Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 img{width:auto;height:var(--base-size-40);max-width:100%}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 svg,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 img{height:var(--base-size-32)}.Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{justify-content:space-between;align-items:center;gap:var(--base-size-4);padding:var(--base-size-12) var(--base-size-16);display:flex;position:absolute;bottom:0;left:0;right:0}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2{transition:transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default)}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:hover .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:focus-visible .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2{transform:translateY(calc(-1 * var(--base-size-4)))}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{opacity:0;transform:translateY(var(--base-size-4));transition:opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-default), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);pointer-events:none}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:hover .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:focus-visible .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{opacity:1;transform:translateY(0)}.Primer_Brand__Tiles-module__Tiles-item-name___47ZMU{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.Primer_Brand__Tiles-module__Tiles-item-icon___2Hu6M{color:var(--brand-color-text-default);flex-shrink:0}@media (prefers-reduced-motion:reduce){.Primer_Brand__Tiles-module__Tiles-item___YlnUj,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{transition:none}}

package/esm/Tiles/Tiles.module.js

@@ -1,4 +1,4 @@
-import './Tiles.module-D7UJKhKM.css';var e = {
+import './Tiles.module-DVK0nMCy.css';var e = {
 	Tiles: "Primer_Brand__Tiles-module__Tiles___RhWBm",
 	"Tiles-grid": "Primer_Brand__Tiles-module__Tiles-grid___lAoQw",
 	"Tiles--layout-default": "Primer_Brand__Tiles-module__Tiles--layout-default___szHFY",