npm - @primer/react-brand - Versions diffs - 0.68.0-rc.5bd56cbb → 0.68.0-rc.982c487b - Mend

@primer/react-brand 0.68.0-rc.5bd56cbb → 0.68.0-rc.982c487b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (441) hide show

package/esm/SubNav/SubNav.js.map CHANGED Viewed

	@@ -1 +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 = 'accent', size = 'small', ...rest}: SubNavActionProps) {\n return (\n <Button\n className={styles['SubNav__action']}\n as=\"a\"\n href={href}\n variant={variant}\n hasArrow={false}\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":"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"}
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":"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"}

package/esm/SubdomainNavBar/SubdomainNavBar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SubdomainNavBar.d.ts","sourceRoot":"","sources":["../../src/SubdomainNavBar/SubdomainNavBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgC,iBAAiB,EAAiC,MAAM,OAAO,CAAA;AAW7G;;GAEG;AACH,OAAO,qHAAqH,CAAA;AAM5H,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,KAAK,CAAC,YAAY,CAAC,wBAAwB,CAAC,GAC5C,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,GAC/B,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CAC/C,CAAA;AAiBD,iBAAS,IAAI,CAAC,EACZ,QAAQ,EACR,SAAS,EACT,KAAY,EACZ,SAAiB,EACjB,QAA+B,EAC/B,KAAK,EACL,SAAe,EACf,kBAAkB,EAClB,GAAG,IAAI,EACR,EAAE,oBAAoB,2CAgRtB;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,GAAG,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,aAAa,CAAC,CAAA;AAEjF,iBAAS,IAAI,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,CAAC,wBAAwB,CAAC,2CAS1G;AAED,MAAM,MAAM,gCAAgC,GAAG;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,KAAK,YAAY,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,CAAA;AAExD,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;IACvD,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC1D,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACtC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAA;IACzC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,gCAAgC,EAAE,CAAA;IAClD,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAsND,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;AAE3C,iBAAS,aAAa,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,~~2CAclF~~;AAED,iBAAS,eAAe,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,~~2CAapF~~;AAED,eAAO,MAAM,eAAe;;;;;;;;;;;;CAM1B,CAAA"}
1	+ {"version":3,"file":"SubdomainNavBar.d.ts","sourceRoot":"","sources":["../../src/SubdomainNavBar/SubdomainNavBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgC,iBAAiB,EAAiC,MAAM,OAAO,CAAA;AAW7G;;GAEG;AACH,OAAO,qHAAqH,CAAA;AAM5H,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,KAAK,CAAC,YAAY,CAAC,wBAAwB,CAAC,GAC5C,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,GAC/B,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CAC/C,CAAA;AAiBD,iBAAS,IAAI,CAAC,EACZ,QAAQ,EACR,SAAS,EACT,KAAY,EACZ,SAAiB,EACjB,QAA+B,EAC/B,KAAK,EACL,SAAe,EACf,kBAAkB,EAClB,GAAG,IAAI,EACR,EAAE,oBAAoB,2CAgRtB;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,GAAG,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,aAAa,CAAC,CAAA;AAEjF,iBAAS,IAAI,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,CAAC,wBAAwB,CAAC,2CAS1G;AAED,MAAM,MAAM,gCAAgC,GAAG;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,KAAK,YAAY,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,CAAA;AAExD,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;IACvD,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC1D,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACtC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAA;IACzC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,gCAAgC,EAAE,CAAA;IAClD,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAsND,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;AAE3C,iBAAS,aAAa,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,2CAalF;AAED,iBAAS,eAAe,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,2CAYpF;AAED,eAAO,MAAM,eAAe;;;;;;;;;;;;CAM1B,CAAA"}

package/esm/SubdomainNavBar/SubdomainNavBar.js CHANGED Viewed

@@ -367,7 +367,6 @@ function j({ children: t, href: n, ...r }) {
 		href: n,
 		className: e(d["SubdomainNavBar-cta-button"]),
 		variant: "primary",
-		hasArrow: !1,
 		size: "small",
 		...r,
 		children: t
@@ -378,7 +377,6 @@ function M({ children: t, href: n, ...r }) {
 		as: "a",
 		href: n,
 		className: e(d["SubdomainNavBar-cta-button"], d["SubdomainNavBar-cta-button--secondary"]),
-		hasArrow: !1,
 		size: "small",
 		...r,
 		children: t

package/esm/SubdomainNavBar/SubdomainNavBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SubdomainNavBar.js","names":[],"sources":["../../src/SubdomainNavBar/SubdomainNavBar.tsx"],"sourcesContent":["import React, {useState, useCallback, useRef, PropsWithChildren, forwardRef, useMemo, useEffect} from 'react'\nimport {clsx} from 'clsx'\nimport {ChevronLeftIcon, LinkExternalIcon, MarkGithubIcon, SearchIcon, XIcon} from '@primer/octicons-react'\n\nimport {Button, FormControl, Text, TextInput} from '..'\nimport {NavigationVisbilityObserver} from './NavigationVisbilityObserver'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport {useFocusTrap} from '../hooks/useFocusTrap'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\nimport {useWindowSize} from '../hooks/useWindowSize'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/subdomain-nav-bar/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './SubdomainNavBar.module.css'\nimport {useId} from '../hooks/useId'\n\nexport type SubdomainNavBarProps = {\n /\n Valid child elements are `SubdomainNavBar.Link`, `SubdomainNavBar.PrimaryAction`,\n * `SubdomainNavBar.SecondaryAction` and `SubdomainNavBar.Search`\n /\n children?:\n \| React.ReactNode\n \| React.ReactElement<SubdomainNavBarLinkProps>\n \| React.ReactElement<SearchProps>\n \| React.ReactElement<CTAActionProps>\n /\n Forward a custom HTML class attribute\n /\n className?: string\n /\n Fixes the navigation bar to the top of the viewport. Defaults to `true`.\n /\n fixed?: boolean\n /\n Fill the maximum width of the parent container. Defaults to `false`.\n /\n fullWidth?: boolean\n /\n The title or name of the subdomain. Appears adjacent to the logo and is required for communicating content to assisitive technologies.\n /\n title: string\n /\n The URL for the site. Typically used to link the titleText prop value to the site root.\n /\n titleHref?: string\n /\n Optionally change the URL of the logo\n /\n logoHref?: string\n /\n When the menu is opened or closed on narrow viewports, this callback is called with the new open state.\n */\n onNarrowMenuToggle?: (isOpen: boolean) => void\n}\nconst testIds = {\n root: 'SubdomainNavBar',\n get innerContainer() {\n return `${this.root}-inner-container`\n },\n get menuButton() {\n return `${this.root}-menuButton`\n },\n get menuLinks() {\n return `${this.root}-menuLinks`\n },\n get liveRegion() {\n return `${this.root}-search-live-region`\n },\n}\n\nfunction Root({\n children,\n className,\n fixed = true,\n fullWidth = false,\n logoHref = 'https://github.com',\n title,\n titleHref = '/',\n onNarrowMenuToggle,\n ...rest\n}: SubdomainNavBarProps) {\n const [menuHidden, setMenuHidden] = useState(true)\n const [searchVisible, setSearchVisible] = useState(false)\n const {isSmall, isMedium} = useWindowSize()\n const [startOfContentButtonFocused, setStartOfContentButtonFocused] = useState(false)\n const mainElRef = useRef<HTMLElement \| null>(null)\n const startOfContentID = useId('start-of-content')\n\n const handleMobileMenuClick = () => {\n const nextMenuHidden = !menuHidden\n setMenuHidden(nextMenuHidden)\n\n onNarrowMenuToggle?.(!nextMenuHidden)\n }\n const handleSearchVisibility = () => setSearchVisible(!searchVisible)\n const focusTrapRef = useRef<HTMLDivElement \| null>(null)\n\n useEffect(() => {\n const mainEl = document.querySelector('main')\n if (mainEl) {\n mainEl.id = mainEl.id \|\| startOfContentID\n mainElRef.current = mainEl\n }\n }, [startOfContentID])\n\n useFocusTrap({containerRef: focusTrapRef, restoreFocusOnCleanUp: true, disabled: menuHidden})\n useKeyboardEscape(() => {\n setMenuHidden(true)\n onNarrowMenuToggle?.(false)\n })\n\n useEffect(() => {\n if (isMedium) {\n setMenuHidden(true)\n onNarrowMenuToggle?.(false)\n }\n }, [isMedium, menuHidden, onNarrowMenuToggle])\n\n useEffect(() => {\n const newOverflowState = menuHidden ? 'auto' : 'hidden'\n document.body.style.overflow = newOverflowState\n }, [menuHidden])\n\n const setStartOfContentButtonFocusedTrue = useCallback(() => setStartOfContentButtonFocused(true), [])\n const setStartOfContentButtonFocusedFalse = useCallback(() => setStartOfContentButtonFocused(false), [])\n\n const hasLinks =\n useMemo(\n () =>\n React.Children.toArray(children).filter(\n child => React.isValidElement(child) && typeof child.type !== 'string' && child.type === Link,\n ),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [],\n ).length > 0\n\n const menuItems = useMemo(\n () =>\n React.Children.toArray(children)\n .map((child, index) => {\n if (React.isValidElement<SubdomainNavBarLinkProps>(child) && child.type === Link) {\n const navItemId = typeof child.props.children === 'string' ? child.props.children : `${index}`\n return React.cloneElement(child, {\n 'data-navitemid': navItemId,\n href: child.props.href,\n children: child.props.children,\n style: {\n '--animation-order': index,\n } as React.CSSProperties,\n })\n }\n return null\n })\n .filter(Boolean),\n [children],\n )\n\n const hasAllActions: boolean = useMemo(() => {\n const primaryAction = React.Children.toArray(children).find(\n child => React.isValidElement(child) && child.type === PrimaryAction,\n )\n const secondaryAction = React.Children.toArray(children).find(\n child => React.isValidElement(child) && child.type === SecondaryAction,\n )\n return !!primaryAction && !!secondaryAction\n }, [children])\n\n return (\n <>\n <div\n className={clsx(\n styles['SubdomainNavBar-outer-container'],\n fixed && styles['SubdomainNavBar-outer-container--fixed'],\n hasAllActions && styles['SubdomainNavBar-outer-container--has-actions'],\n )}\n >\n <Button\n as=\"a\"\n href={`#${mainElRef.current?.id \|\| startOfContentID}`}\n variant=\"primary\"\n className={clsx(styles['SubdomainNavBar-skip-to-content'], !startOfContentButtonFocused && 'visually-hidden')}\n onFocus={setStartOfContentButtonFocusedTrue}\n onBlur={setStartOfContentButtonFocusedFalse}\n >\n Skip to content\n </Button>\n <header className={clsx(styles['SubdomainNavBar'], className)} data-testid={testIds.root} {...rest}>\n <div\n ref={focusTrapRef}\n className={clsx(\n styles['SubdomainNavBar-inner-container'],\n searchVisible && styles['SubdomainNavBar-inner-container--search-open'],\n !fullWidth && styles['SubdomainNavBar-inner-container--centered'],\n )}\n data-testid={testIds.innerContainer}\n >\n <nav aria-label=\"Header logo and title\">\n <ol className={styles['SubdomainNavBar-title-area']}>\n <li>\n <a href={logoHref} aria-label=\"Github Home\" className={styles['SubdomainNavBar-logo-mark']}>\n <span className={clsx(styles['SubdomainNavBar-back-arrow'])}>\n <ChevronLeftIcon fill=\"currentColor\" size={24} />\n </span>\n <MarkGithubIcon fill=\"currentColor\" size={24} />\n </a>\n </li>\n {title && isSmall && (\n <>\n <li role=\"separator\" className={styles['SubdomainNavBar-title-separator']} aria-hidden>\n /\n </li>\n <li>\n <a\n href={titleHref}\n aria-label={`${title} home`}\n className={clsx(styles['SubdomainNavBar-title'])}\n >\n <Text size=\"400\" weight=\"medium\">\n {title}\n </Text>\n </a>\n </li>\n </>\n )}\n </ol>\n </nav>\n {hasLinks && (\n <nav\n id=\"menu-navigation\"\n aria-label={title}\n className={styles['SubdomainNavBar-primary-nav']}\n data-testid={testIds.menuLinks}\n >\n <NavigationVisbilityObserver className={clsx(styles['SubdomainNavBar-primary-nav-list--invisible'])}>\n {menuItems}\n </NavigationVisbilityObserver>\n </nav>\n )}\n\n <div className={clsx(styles['SubdomainNavBar-secondary-nav'])}>\n {React.Children.toArray(children)\n .map(child => {\n if (React.isValidElement<SearchProps>(child) && child.type === Search) {\n return React.cloneElement(child, {\n active: searchVisible,\n handlerFn: handleSearchVisibility,\n title,\n })\n }\n return null\n })\n .filter(Boolean)}\n\n {hasLinks && (\n <button\n aria-expanded={!menuHidden}\n aria-label=\"Menu\"\n aria-controls=\"menu-navigation\"\n aria-haspopup=\"true\"\n className={clsx(\n styles['SubdomainNavBar-menu-button'],\n styles['SubdomainNavBar-mobile-menu-button'],\n !menuHidden && styles['SubdomainNavBar-menu-button--close'],\n )}\n data-testid={testIds.menuButton}\n onClick={handleMobileMenuClick}\n >\n <div className={clsx(styles['SubdomainNavBar-menu-button-bar'])}></div>\n <div className={clsx(styles['SubdomainNavBar-menu-button-bar'])}></div>\n <div className={clsx(styles['SubdomainNavBar-menu-button-bar'])}></div>\n </button>\n )}\n\n {isMedium && (\n <div\n className={clsx(\n styles['SubdomainNavBar-button-area'],\n styles['SubdomainNavBar-button-area--visible'],\n )}\n >\n <div className={styles['SubdomainNavBar-button-area-inner']}>\n {React.Children.toArray(children)\n .map(child => {\n if (\n React.isValidElement<CTAActionProps>(child) &&\n (child.type === PrimaryAction \|\| child.type === SecondaryAction)\n ) {\n return child\n }\n return null\n })\n .filter(Boolean)}\n </div>\n </div>\n )}\n\n {!isMedium && (\n <div\n className={clsx(\n styles['SubdomainNavBar-menu-wrapper'],\n menuHidden && styles['SubdomainNavBar-menu-wrapper--close'],\n )}\n >\n <div>\n {title && titleHref && (\n <Text as=\"p\">\n <a\n href={titleHref}\n aria-label={`${title} home`}\n className={clsx(styles['SubdomainNavBar-link'], styles['SubdomainNavBar-link--title'])}\n >\n {title}\n </a>\n </Text>\n )}\n {hasLinks && !menuHidden && (\n <NavigationVisbilityObserver\n className={clsx(styles['SubdomainNavBar-primary-nav-list--visible'])}\n >\n {menuItems}\n </NavigationVisbilityObserver>\n )}\n </div>\n <div\n className={clsx(\n styles['SubdomainNavBar-button-area'],\n styles['SubdomainNavBar-button-area--visible'],\n )}\n >\n <div className={styles['SubdomainNavBar-button-area-inner']}>\n {React.Children.toArray(children)\n .map(child => {\n if (\n React.isValidElement<CTAActionProps>(child) &&\n (child.type === PrimaryAction \|\| child.type === SecondaryAction)\n ) {\n return child\n }\n return null\n })\n .filter(Boolean)}\n </div>\n </div>\n </div>\n )}\n </div>\n </div>\n </header>\n </div>\n {!mainElRef.current && <div id={`${startOfContentID}`} tabIndex={-1} />}\n </>\n )\n}\n\nexport type SubdomainNavBarLinkProps = {\n href: string\n isExternal?: boolean\n 'data-navitemid'?: string\n} & React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>\n\nfunction Link({href, className, children, isExternal, ...rest}: PropsWithChildren<SubdomainNavBarLinkProps>) {\n return (\n <li className={clsx(styles['SubdomainNavBar-primary-nav-list-item'], className)} {...rest}>\n <a href={href} className={styles['SubdomainNavBar-link']}>\n <span className={styles['SubdomainNavBar-link-text']}>{children}</span>\n {isExternal && <LinkExternalIcon size={16} aria-label=\"External link\" />}\n </a>\n </li>\n )\n}\n\nexport type SubdomainNavBarSearchResultProps = {\n title: string\n description: string\n url: string\n date: string\n category?: string\n}\n\ntype HandlerEvent = MouseEvent \| TouchEvent \| FocusEvent\n\ntype SearchProps = {\n onSubmit: (e: React.FormEvent<HTMLFormElement>) => void\n onChange: (e: React.ChangeEvent<HTMLInputElement>) => void\n ref: React.RefObject<HTMLInputElement>\n active?: boolean\n title?: string\n handlerFn?: (event: HandlerEvent) => void\n autoComplete?: boolean\n searchResults?: SubdomainNavBarSearchResultProps[]\n searchTerm?: string\n}\n\nconst _SearchInternal = forwardRef<HTMLDivElement, SearchProps>(\n ({active, title, searchResults, searchTerm, handlerFn, onSubmit, onChange}, ref) => {\n const dialogRef = useRef<HTMLDivElement \| null>(null)\n\n useFocusTrap({containerRef: dialogRef, restoreFocusOnCleanUp: true, disabled: !active})\n useOnClickOutside(dialogRef, handlerFn)\n\n const [activeDescendant, setActiveDescendant] = useState<number>(-1)\n const [listboxActive, setListboxActive] = useState<boolean>()\n const [liveRegion, setLiveRegion] = useState<boolean>(false)\n\n const handleClose = useCallback(\n (event?: React.MouseEvent<HTMLButtonElement, MouseEvent> \| HandlerEvent \| null) => {\n if (handlerFn) handlerFn(event as HandlerEvent)\n setActiveDescendant(-1)\n },\n [handlerFn],\n )\n\n useOnClickOutside(dialogRef, handleClose as (event) => void)\n useKeyboardEscape(() => {\n // Close the dialog if combobox is already collapsed\n if (!listboxActive && active) {\n handleClose()\n return false\n }\n\n setListboxActive(false)\n setActiveDescendant(-1)\n })\n\n const handleAriaFocus = useCallback(\n event => {\n const supportedKeys = ['ArrowDown', 'ArrowUp', 'Escape', 'Enter']\n const currentCount = activeDescendant\n const searchResultsLength = searchResults ? searchResults.length : 0\n const dialog = dialogRef.current\n let count\n\n // Prevent any other keys outside of supported from being prevented.\n // Only prevent \"Enter\" if activeDescendant is greater than -1.\n if (!supportedKeys.includes(event.key) \|\| (event.key === 'Enter' && activeDescendant === -1) \|\| !dialog) {\n return false\n }\n\n event.preventDefault()\n\n if (event.key === 'ArrowDown') {\n // If count reaches last search result item, reset to -1\n count = currentCount < searchResultsLength - 1 ? currentCount + 1 : -1\n setActiveDescendant(count)\n } else if (event.key === 'ArrowUp') {\n // Reset to last search result item if\n count = currentCount === -1 ? searchResultsLength - 1 : currentCount - 1\n setActiveDescendant(count)\n }\n\n if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n dialog.querySelector(`#subdomainnavbar-search-result-${count}`)?.scrollIntoView()\n }\n\n if (event.key === 'Enter') {\n const link = dialog.querySelector(`#subdomainnavbar-search-result-${activeDescendant} a`) as HTMLAnchorElement\n link.click()\n }\n },\n [searchResults, activeDescendant],\n )\n\n const searchLiveRegion = useCallback(() => {\n // Adding a non-breaking space and then removing it will force screen readers to announce the text,\n // as it thinks that there was a change within the live region.\n setLiveRegion(true)\n\n setTimeout(() => {\n if (active) setLiveRegion(false)\n }, 200)\n }, [active])\n\n useEffect(() => {\n // We want to set \"listboxActive\" when search results are present,\n // or the user pressed \"Escape\". We watch for \"searchTerm\", as we -\n // want the listbox to become active if they pressed \"Escape\", and -\n // adjusted their existing value.\n const search = searchResults && searchResults.length ? true : false\n setListboxActive(search)\n searchLiveRegion()\n }, [searchResults, searchTerm, searchLiveRegion])\n\n return (\n <>\n <div className={clsx(styles['SubdomainNavBar-search-trigger'])}>\n <button\n aria-label=\"Toggle search bar\"\n className={styles['SubdomainNavBar-search-button']}\n onClick={handlerFn as (event) => void}\n data-testid=\"toggle-search\"\n >\n <SearchIcon aria-label=\"Search icon\" />\n </button>\n </div>\n {active && (\n <div\n ref={dialogRef}\n role=\"dialog\"\n aria-label={`Search ${title}`}\n aria-modal=\"true\"\n tabIndex={-1}\n className={clsx(styles['SubdomainNavBar-search-dialog'])}\n >\n <div className={clsx(styles['SubdomainNavBar-search-dialog-control-area'])}>\n <form className={clsx(styles['SubdomainNavBar-search-form'])} onSubmit={onSubmit} role=\"search\">\n <FormControl fullWidth size=\"medium\">\n <FormControl.Label visuallyHidden>Search</FormControl.Label>\n <TextInput\n ref={ref}\n className={clsx(styles['SubdomainNavBar-search-text-input'])}\n name=\"search\"\n role=\"combobox\"\n aria-expanded={listboxActive}\n aria-controls=\"listbox-search-results\"\n placeholder={`Search ${title}`}\n onChange={onChange}\n defaultValue={searchTerm}\n invisible\n leadingVisual={<SearchIcon size={16} />}\n aria-activedescendant={\n activeDescendant === -1 ? undefined : `subdomainnavbar-search-result-${activeDescendant}`\n }\n onKeyDown={handleAriaFocus}\n />\n </FormControl>\n </form>\n <button\n aria-label=\"Close\"\n className={clsx(styles['SubdomainNavBar-menu-button'], styles['SubdomainNavBar-menu-button--close'])}\n onClick={handleClose}\n >\n <XIcon size={24} />\n </button>\n </div>\n\n <div id=\"listbox-search-results\">\n {listboxActive && (\n <div className={clsx(styles['SubdomainNavBar-search-results-container'])}>\n <Text\n id=\"subdomainnavbar-search-results-heading\"\n className={styles['SubdomainNavBar-search-results-heading']}\n >\n Results for “{searchTerm}”\n </Text>\n <ul\n role=\"listbox\"\n tabIndex={0}\n aria-labelledby=\"subdomainnavbar-search-results-heading\"\n className={clsx(styles['SubdomainNavBar-search-results'])}\n >\n {searchResults?.map((result, index) => (\n <li\n key={`${result.title}-${index}`}\n id={`subdomainnavbar-search-result-${index}`}\n className={styles['SubdomainNavBar-search-result-item']}\n role=\"option\"\n aria-selected={index === activeDescendant}\n >\n <div className={styles['SubdomainNavBar-search-result-item-container']}>\n <a href={result.url}>{result.title}</a>\n </div>\n\n <Text\n as=\"p\"\n size=\"200\"\n id={`subdomainnavbar-search-result-item-desc${index}`}\n className={styles['SubdomainNavBar-search-result-item-desc']}\n >\n {result.description}\n </Text>\n <div>\n <Text size=\"100\" className={styles['SubdomainNavBar-search-result-item-desc']}>\n {result.date}\n </Text>\n {result.category && (\n <>\n <Text size=\"100\" className={styles['SubdomainNavBar-search-result-item-desc']}>\n {' '}\n •{' '}\n </Text>\n <Text size=\"100\" className={styles['SubdomainNavBar-search-result-item-desc']}>\n {result.category}\n </Text>\n </>\n )}\n </div>\n </li>\n ))}\n </ul>\n </div>\n )}\n <div aria-live=\"polite\" aria-atomic=\"true\" data-testid={testIds.liveRegion} className=\"visually-hidden\">\n {`${searchResults?.length} suggestions.`}\n {liveRegion && <span> </span>}\n </div>\n </div>\n </div>\n )}\n </>\n )\n },\n)\n\nconst Search = _SearchInternal\n\ntype CTAActionProps = {\n href: string\n} & React.HTMLAttributes<HTMLAnchorElement>\n\nfunction PrimaryAction({children, href, ...rest}: PropsWithChildren<CTAActionProps>) {\n return (\n <Button\n as=\"a\"\n href={href}\n className={clsx(styles['SubdomainNavBar-cta-button'])}\n variant=\"primary\"\n hasArrow={false}\n size=\"small\"\n {...rest}\n >\n {children}\n </Button>\n )\n}\n\nfunction SecondaryAction({children, href, ...rest}: PropsWithChildren<CTAActionProps>) {\n return (\n <Button\n as=\"a\"\n href={href}\n className={clsx(styles['SubdomainNavBar-cta-button'], styles['SubdomainNavBar-cta-button--secondary'])}\n hasArrow={false}\n size=\"small\"\n {...rest}\n >\n {children}\n </Button>\n )\n}\n\nexport const SubdomainNavBar = Object.assign(Root, {\n Link,\n Search,\n PrimaryAction,\n SecondaryAction,\n testIds,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"SubdomainNavBar.js","names":[],"sources":["../../src/SubdomainNavBar/SubdomainNavBar.tsx"],"sourcesContent":["import React, {useState, useCallback, useRef, PropsWithChildren, forwardRef, useMemo, useEffect} from 'react'\nimport {clsx} from 'clsx'\nimport {ChevronLeftIcon, LinkExternalIcon, MarkGithubIcon, SearchIcon, XIcon} from '@primer/octicons-react'\n\nimport {Button, FormControl, Text, TextInput} from '..'\nimport {NavigationVisbilityObserver} from './NavigationVisbilityObserver'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport {useFocusTrap} from '../hooks/useFocusTrap'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\nimport {useWindowSize} from '../hooks/useWindowSize'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/subdomain-nav-bar/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './SubdomainNavBar.module.css'\nimport {useId} from '../hooks/useId'\n\nexport type SubdomainNavBarProps = {\n /\n Valid child elements are `SubdomainNavBar.Link`, `SubdomainNavBar.PrimaryAction`,\n * `SubdomainNavBar.SecondaryAction` and `SubdomainNavBar.Search`\n /\n children?:\n \| React.ReactNode\n \| React.ReactElement<SubdomainNavBarLinkProps>\n \| React.ReactElement<SearchProps>\n \| React.ReactElement<CTAActionProps>\n /\n Forward a custom HTML class attribute\n /\n className?: string\n /\n Fixes the navigation bar to the top of the viewport. Defaults to `true`.\n /\n fixed?: boolean\n /\n Fill the maximum width of the parent container. Defaults to `false`.\n /\n fullWidth?: boolean\n /\n The title or name of the subdomain. Appears adjacent to the logo and is required for communicating content to assisitive technologies.\n /\n title: string\n /\n The URL for the site. Typically used to link the titleText prop value to the site root.\n /\n titleHref?: string\n /\n Optionally change the URL of the logo\n /\n logoHref?: string\n /\n When the menu is opened or closed on narrow viewports, this callback is called with the new open state.\n */\n onNarrowMenuToggle?: (isOpen: boolean) => void\n}\nconst testIds = {\n root: 'SubdomainNavBar',\n get innerContainer() {\n return `${this.root}-inner-container`\n },\n get menuButton() {\n return `${this.root}-menuButton`\n },\n get menuLinks() {\n return `${this.root}-menuLinks`\n },\n get liveRegion() {\n return `${this.root}-search-live-region`\n },\n}\n\nfunction Root({\n children,\n className,\n fixed = true,\n fullWidth = false,\n logoHref = 'https://github.com',\n title,\n titleHref = '/',\n onNarrowMenuToggle,\n ...rest\n}: SubdomainNavBarProps) {\n const [menuHidden, setMenuHidden] = useState(true)\n const [searchVisible, setSearchVisible] = useState(false)\n const {isSmall, isMedium} = useWindowSize()\n const [startOfContentButtonFocused, setStartOfContentButtonFocused] = useState(false)\n const mainElRef = useRef<HTMLElement \| null>(null)\n const startOfContentID = useId('start-of-content')\n\n const handleMobileMenuClick = () => {\n const nextMenuHidden = !menuHidden\n setMenuHidden(nextMenuHidden)\n\n onNarrowMenuToggle?.(!nextMenuHidden)\n }\n const handleSearchVisibility = () => setSearchVisible(!searchVisible)\n const focusTrapRef = useRef<HTMLDivElement \| null>(null)\n\n useEffect(() => {\n const mainEl = document.querySelector('main')\n if (mainEl) {\n mainEl.id = mainEl.id \|\| startOfContentID\n mainElRef.current = mainEl\n }\n }, [startOfContentID])\n\n useFocusTrap({containerRef: focusTrapRef, restoreFocusOnCleanUp: true, disabled: menuHidden})\n useKeyboardEscape(() => {\n setMenuHidden(true)\n onNarrowMenuToggle?.(false)\n })\n\n useEffect(() => {\n if (isMedium) {\n setMenuHidden(true)\n onNarrowMenuToggle?.(false)\n }\n }, [isMedium, menuHidden, onNarrowMenuToggle])\n\n useEffect(() => {\n const newOverflowState = menuHidden ? 'auto' : 'hidden'\n document.body.style.overflow = newOverflowState\n }, [menuHidden])\n\n const setStartOfContentButtonFocusedTrue = useCallback(() => setStartOfContentButtonFocused(true), [])\n const setStartOfContentButtonFocusedFalse = useCallback(() => setStartOfContentButtonFocused(false), [])\n\n const hasLinks =\n useMemo(\n () =>\n React.Children.toArray(children).filter(\n child => React.isValidElement(child) && typeof child.type !== 'string' && child.type === Link,\n ),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [],\n ).length > 0\n\n const menuItems = useMemo(\n () =>\n React.Children.toArray(children)\n .map((child, index) => {\n if (React.isValidElement<SubdomainNavBarLinkProps>(child) && child.type === Link) {\n const navItemId = typeof child.props.children === 'string' ? child.props.children : `${index}`\n return React.cloneElement(child, {\n 'data-navitemid': navItemId,\n href: child.props.href,\n children: child.props.children,\n style: {\n '--animation-order': index,\n } as React.CSSProperties,\n })\n }\n return null\n })\n .filter(Boolean),\n [children],\n )\n\n const hasAllActions: boolean = useMemo(() => {\n const primaryAction = React.Children.toArray(children).find(\n child => React.isValidElement(child) && child.type === PrimaryAction,\n )\n const secondaryAction = React.Children.toArray(children).find(\n child => React.isValidElement(child) && child.type === SecondaryAction,\n )\n return !!primaryAction && !!secondaryAction\n }, [children])\n\n return (\n <>\n <div\n className={clsx(\n styles['SubdomainNavBar-outer-container'],\n fixed && styles['SubdomainNavBar-outer-container--fixed'],\n hasAllActions && styles['SubdomainNavBar-outer-container--has-actions'],\n )}\n >\n <Button\n as=\"a\"\n href={`#${mainElRef.current?.id \|\| startOfContentID}`}\n variant=\"primary\"\n className={clsx(styles['SubdomainNavBar-skip-to-content'], !startOfContentButtonFocused && 'visually-hidden')}\n onFocus={setStartOfContentButtonFocusedTrue}\n onBlur={setStartOfContentButtonFocusedFalse}\n >\n Skip to content\n </Button>\n <header className={clsx(styles['SubdomainNavBar'], className)} data-testid={testIds.root} {...rest}>\n <div\n ref={focusTrapRef}\n className={clsx(\n styles['SubdomainNavBar-inner-container'],\n searchVisible && styles['SubdomainNavBar-inner-container--search-open'],\n !fullWidth && styles['SubdomainNavBar-inner-container--centered'],\n )}\n data-testid={testIds.innerContainer}\n >\n <nav aria-label=\"Header logo and title\">\n <ol className={styles['SubdomainNavBar-title-area']}>\n <li>\n <a href={logoHref} aria-label=\"Github Home\" className={styles['SubdomainNavBar-logo-mark']}>\n <span className={clsx(styles['SubdomainNavBar-back-arrow'])}>\n <ChevronLeftIcon fill=\"currentColor\" size={24} />\n </span>\n <MarkGithubIcon fill=\"currentColor\" size={24} />\n </a>\n </li>\n {title && isSmall && (\n <>\n <li role=\"separator\" className={styles['SubdomainNavBar-title-separator']} aria-hidden>\n /\n </li>\n <li>\n <a\n href={titleHref}\n aria-label={`${title} home`}\n className={clsx(styles['SubdomainNavBar-title'])}\n >\n <Text size=\"400\" weight=\"medium\">\n {title}\n </Text>\n </a>\n </li>\n </>\n )}\n </ol>\n </nav>\n {hasLinks && (\n <nav\n id=\"menu-navigation\"\n aria-label={title}\n className={styles['SubdomainNavBar-primary-nav']}\n data-testid={testIds.menuLinks}\n >\n <NavigationVisbilityObserver className={clsx(styles['SubdomainNavBar-primary-nav-list--invisible'])}>\n {menuItems}\n </NavigationVisbilityObserver>\n </nav>\n )}\n\n <div className={clsx(styles['SubdomainNavBar-secondary-nav'])}>\n {React.Children.toArray(children)\n .map(child => {\n if (React.isValidElement<SearchProps>(child) && child.type === Search) {\n return React.cloneElement(child, {\n active: searchVisible,\n handlerFn: handleSearchVisibility,\n title,\n })\n }\n return null\n })\n .filter(Boolean)}\n\n {hasLinks && (\n <button\n aria-expanded={!menuHidden}\n aria-label=\"Menu\"\n aria-controls=\"menu-navigation\"\n aria-haspopup=\"true\"\n className={clsx(\n styles['SubdomainNavBar-menu-button'],\n styles['SubdomainNavBar-mobile-menu-button'],\n !menuHidden && styles['SubdomainNavBar-menu-button--close'],\n )}\n data-testid={testIds.menuButton}\n onClick={handleMobileMenuClick}\n >\n <div className={clsx(styles['SubdomainNavBar-menu-button-bar'])}></div>\n <div className={clsx(styles['SubdomainNavBar-menu-button-bar'])}></div>\n <div className={clsx(styles['SubdomainNavBar-menu-button-bar'])}></div>\n </button>\n )}\n\n {isMedium && (\n <div\n className={clsx(\n styles['SubdomainNavBar-button-area'],\n styles['SubdomainNavBar-button-area--visible'],\n )}\n >\n <div className={styles['SubdomainNavBar-button-area-inner']}>\n {React.Children.toArray(children)\n .map(child => {\n if (\n React.isValidElement<CTAActionProps>(child) &&\n (child.type === PrimaryAction \|\| child.type === SecondaryAction)\n ) {\n return child\n }\n return null\n })\n .filter(Boolean)}\n </div>\n </div>\n )}\n\n {!isMedium && (\n <div\n className={clsx(\n styles['SubdomainNavBar-menu-wrapper'],\n menuHidden && styles['SubdomainNavBar-menu-wrapper--close'],\n )}\n >\n <div>\n {title && titleHref && (\n <Text as=\"p\">\n <a\n href={titleHref}\n aria-label={`${title} home`}\n className={clsx(styles['SubdomainNavBar-link'], styles['SubdomainNavBar-link--title'])}\n >\n {title}\n </a>\n </Text>\n )}\n {hasLinks && !menuHidden && (\n <NavigationVisbilityObserver\n className={clsx(styles['SubdomainNavBar-primary-nav-list--visible'])}\n >\n {menuItems}\n </NavigationVisbilityObserver>\n )}\n </div>\n <div\n className={clsx(\n styles['SubdomainNavBar-button-area'],\n styles['SubdomainNavBar-button-area--visible'],\n )}\n >\n <div className={styles['SubdomainNavBar-button-area-inner']}>\n {React.Children.toArray(children)\n .map(child => {\n if (\n React.isValidElement<CTAActionProps>(child) &&\n (child.type === PrimaryAction \|\| child.type === SecondaryAction)\n ) {\n return child\n }\n return null\n })\n .filter(Boolean)}\n </div>\n </div>\n </div>\n )}\n </div>\n </div>\n </header>\n </div>\n {!mainElRef.current && <div id={`${startOfContentID}`} tabIndex={-1} />}\n </>\n )\n}\n\nexport type SubdomainNavBarLinkProps = {\n href: string\n isExternal?: boolean\n 'data-navitemid'?: string\n} & React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>\n\nfunction Link({href, className, children, isExternal, ...rest}: PropsWithChildren<SubdomainNavBarLinkProps>) {\n return (\n <li className={clsx(styles['SubdomainNavBar-primary-nav-list-item'], className)} {...rest}>\n <a href={href} className={styles['SubdomainNavBar-link']}>\n <span className={styles['SubdomainNavBar-link-text']}>{children}</span>\n {isExternal && <LinkExternalIcon size={16} aria-label=\"External link\" />}\n </a>\n </li>\n )\n}\n\nexport type SubdomainNavBarSearchResultProps = {\n title: string\n description: string\n url: string\n date: string\n category?: string\n}\n\ntype HandlerEvent = MouseEvent \| TouchEvent \| FocusEvent\n\ntype SearchProps = {\n onSubmit: (e: React.FormEvent<HTMLFormElement>) => void\n onChange: (e: React.ChangeEvent<HTMLInputElement>) => void\n ref: React.RefObject<HTMLInputElement>\n active?: boolean\n title?: string\n handlerFn?: (event: HandlerEvent) => void\n autoComplete?: boolean\n searchResults?: SubdomainNavBarSearchResultProps[]\n searchTerm?: string\n}\n\nconst _SearchInternal = forwardRef<HTMLDivElement, SearchProps>(\n ({active, title, searchResults, searchTerm, handlerFn, onSubmit, onChange}, ref) => {\n const dialogRef = useRef<HTMLDivElement \| null>(null)\n\n useFocusTrap({containerRef: dialogRef, restoreFocusOnCleanUp: true, disabled: !active})\n useOnClickOutside(dialogRef, handlerFn)\n\n const [activeDescendant, setActiveDescendant] = useState<number>(-1)\n const [listboxActive, setListboxActive] = useState<boolean>()\n const [liveRegion, setLiveRegion] = useState<boolean>(false)\n\n const handleClose = useCallback(\n (event?: React.MouseEvent<HTMLButtonElement, MouseEvent> \| HandlerEvent \| null) => {\n if (handlerFn) handlerFn(event as HandlerEvent)\n setActiveDescendant(-1)\n },\n [handlerFn],\n )\n\n useOnClickOutside(dialogRef, handleClose as (event) => void)\n useKeyboardEscape(() => {\n // Close the dialog if combobox is already collapsed\n if (!listboxActive && active) {\n handleClose()\n return false\n }\n\n setListboxActive(false)\n setActiveDescendant(-1)\n })\n\n const handleAriaFocus = useCallback(\n event => {\n const supportedKeys = ['ArrowDown', 'ArrowUp', 'Escape', 'Enter']\n const currentCount = activeDescendant\n const searchResultsLength = searchResults ? searchResults.length : 0\n const dialog = dialogRef.current\n let count\n\n // Prevent any other keys outside of supported from being prevented.\n // Only prevent \"Enter\" if activeDescendant is greater than -1.\n if (!supportedKeys.includes(event.key) \|\| (event.key === 'Enter' && activeDescendant === -1) \|\| !dialog) {\n return false\n }\n\n event.preventDefault()\n\n if (event.key === 'ArrowDown') {\n // If count reaches last search result item, reset to -1\n count = currentCount < searchResultsLength - 1 ? currentCount + 1 : -1\n setActiveDescendant(count)\n } else if (event.key === 'ArrowUp') {\n // Reset to last search result item if\n count = currentCount === -1 ? searchResultsLength - 1 : currentCount - 1\n setActiveDescendant(count)\n }\n\n if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n dialog.querySelector(`#subdomainnavbar-search-result-${count}`)?.scrollIntoView()\n }\n\n if (event.key === 'Enter') {\n const link = dialog.querySelector(`#subdomainnavbar-search-result-${activeDescendant} a`) as HTMLAnchorElement\n link.click()\n }\n },\n [searchResults, activeDescendant],\n )\n\n const searchLiveRegion = useCallback(() => {\n // Adding a non-breaking space and then removing it will force screen readers to announce the text,\n // as it thinks that there was a change within the live region.\n setLiveRegion(true)\n\n setTimeout(() => {\n if (active) setLiveRegion(false)\n }, 200)\n }, [active])\n\n useEffect(() => {\n // We want to set \"listboxActive\" when search results are present,\n // or the user pressed \"Escape\". We watch for \"searchTerm\", as we -\n // want the listbox to become active if they pressed \"Escape\", and -\n // adjusted their existing value.\n const search = searchResults && searchResults.length ? true : false\n setListboxActive(search)\n searchLiveRegion()\n }, [searchResults, searchTerm, searchLiveRegion])\n\n return (\n <>\n <div className={clsx(styles['SubdomainNavBar-search-trigger'])}>\n <button\n aria-label=\"Toggle search bar\"\n className={styles['SubdomainNavBar-search-button']}\n onClick={handlerFn as (event) => void}\n data-testid=\"toggle-search\"\n >\n <SearchIcon aria-label=\"Search icon\" />\n </button>\n </div>\n {active && (\n <div\n ref={dialogRef}\n role=\"dialog\"\n aria-label={`Search ${title}`}\n aria-modal=\"true\"\n tabIndex={-1}\n className={clsx(styles['SubdomainNavBar-search-dialog'])}\n >\n <div className={clsx(styles['SubdomainNavBar-search-dialog-control-area'])}>\n <form className={clsx(styles['SubdomainNavBar-search-form'])} onSubmit={onSubmit} role=\"search\">\n <FormControl fullWidth size=\"medium\">\n <FormControl.Label visuallyHidden>Search</FormControl.Label>\n <TextInput\n ref={ref}\n className={clsx(styles['SubdomainNavBar-search-text-input'])}\n name=\"search\"\n role=\"combobox\"\n aria-expanded={listboxActive}\n aria-controls=\"listbox-search-results\"\n placeholder={`Search ${title}`}\n onChange={onChange}\n defaultValue={searchTerm}\n invisible\n leadingVisual={<SearchIcon size={16} />}\n aria-activedescendant={\n activeDescendant === -1 ? undefined : `subdomainnavbar-search-result-${activeDescendant}`\n }\n onKeyDown={handleAriaFocus}\n />\n </FormControl>\n </form>\n <button\n aria-label=\"Close\"\n className={clsx(styles['SubdomainNavBar-menu-button'], styles['SubdomainNavBar-menu-button--close'])}\n onClick={handleClose}\n >\n <XIcon size={24} />\n </button>\n </div>\n\n <div id=\"listbox-search-results\">\n {listboxActive && (\n <div className={clsx(styles['SubdomainNavBar-search-results-container'])}>\n <Text\n id=\"subdomainnavbar-search-results-heading\"\n className={styles['SubdomainNavBar-search-results-heading']}\n >\n Results for “{searchTerm}”\n </Text>\n <ul\n role=\"listbox\"\n tabIndex={0}\n aria-labelledby=\"subdomainnavbar-search-results-heading\"\n className={clsx(styles['SubdomainNavBar-search-results'])}\n >\n {searchResults?.map((result, index) => (\n <li\n key={`${result.title}-${index}`}\n id={`subdomainnavbar-search-result-${index}`}\n className={styles['SubdomainNavBar-search-result-item']}\n role=\"option\"\n aria-selected={index === activeDescendant}\n >\n <div className={styles['SubdomainNavBar-search-result-item-container']}>\n <a href={result.url}>{result.title}</a>\n </div>\n\n <Text\n as=\"p\"\n size=\"200\"\n id={`subdomainnavbar-search-result-item-desc${index}`}\n className={styles['SubdomainNavBar-search-result-item-desc']}\n >\n {result.description}\n </Text>\n <div>\n <Text size=\"100\" className={styles['SubdomainNavBar-search-result-item-desc']}>\n {result.date}\n </Text>\n {result.category && (\n <>\n <Text size=\"100\" className={styles['SubdomainNavBar-search-result-item-desc']}>\n {' '}\n •{' '}\n </Text>\n <Text size=\"100\" className={styles['SubdomainNavBar-search-result-item-desc']}>\n {result.category}\n </Text>\n </>\n )}\n </div>\n </li>\n ))}\n </ul>\n </div>\n )}\n <div aria-live=\"polite\" aria-atomic=\"true\" data-testid={testIds.liveRegion} className=\"visually-hidden\">\n {`${searchResults?.length} suggestions.`}\n {liveRegion && <span> </span>}\n </div>\n </div>\n </div>\n )}\n </>\n )\n },\n)\n\nconst Search = _SearchInternal\n\ntype CTAActionProps = {\n href: string\n} & React.HTMLAttributes<HTMLAnchorElement>\n\nfunction PrimaryAction({children, href, ...rest}: PropsWithChildren<CTAActionProps>) {\n return (\n <Button\n as=\"a\"\n href={href}\n className={clsx(styles['SubdomainNavBar-cta-button'])}\n variant=\"primary\"\n size=\"small\"\n {...rest}\n >\n {children}\n </Button>\n )\n}\n\nfunction SecondaryAction({children, href, ...rest}: PropsWithChildren<CTAActionProps>) {\n return (\n <Button\n as=\"a\"\n href={href}\n className={clsx(styles['SubdomainNavBar-cta-button'], styles['SubdomainNavBar-cta-button--secondary'])}\n size=\"small\"\n {...rest}\n >\n {children}\n </Button>\n )\n}\n\nexport const SubdomainNavBar = Object.assign(Root, {\n Link,\n Search,\n PrimaryAction,\n SecondaryAction,\n testIds,\n})\n"],"mappings":"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"}

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

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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",

package/esm/Tiles/Tiles.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tiles.module.js","names":[],"sources":["../../src/Tiles/Tiles.module.css"],"sourcesContent":[".Tiles {\n width: 100%;\n color: var(--brand-color-text-default);\n}\n\n.Tiles-grid {\n --tiles-columns: 2;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n@media screen and (min-width: 48rem) {\n .Tiles--layout-default .Tiles-grid {\n --tiles-columns: 4;\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .Tiles--layout-default .Tiles-grid {\n --tiles-columns: 6;\n }\n}\n\n@media screen and (min-width: 48rem) {\n .Tiles--layout-compact .Tiles-grid {\n --tiles-columns: 4;\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .Tiles--layout-compact .Tiles-grid {\n --tiles-columns: 8;\n }\n}\n\n.Tiles--variant-gridlines ~~{\n position: relative;\n}\n\n~~.Tiles~~--variant~~-gridlines::before,\n.Tiles--variant-gridlines::after {\n content: '';\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: 100vw;\n height: 0;\n border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.Tiles--variant-gridlines::before {\n top: 0;\n}\n\n.Tiles--variant-gridlines::after {\n bottom: 0;\n}\n\n.Tiles--variant-gridlines .Tiles-grid {\n position: relative;\n padding-right: var(--brand-borderWidth-thin);\n padding-bottom: var(--brand-borderWidth-thin);\n}\n\n.Tiles--variant-gridlines .Tiles-grid::before,\n.Tiles--variant-gridlines .Tiles-grid::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n width: 0;\n border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n z-index: 1;\n pointer-events: none;\n}\n\n.Tiles--variant-gridlines .Tiles-grid::before {\n left: 0;\n}\n\n.Tiles--variant-gridlines .Tiles-grid::after {\n right: 0;\n}\n\n.Tiles-item {\n --tiles-inset-shadow: inset 0 0 0 transparent;\n position: relative;\n display: flex;\n flex-direction: column;\n width: calc(100% / var(--tiles-columns));\n box-sizing: border-box;\n background-color: var(--brand-tiles-bgColor-rest);\n border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n box-shadow: var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted),\n 0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), var(--tiles-inset-shadow);\n transition: background-color var(--brand-animation-duration-faster) var(--brand-animation-easing-default),\n box-shadow var(--brand-animation-duration-faster) var(--brand-animation-easing-default);\n}\n\n.Tiles-item:has(.Tiles-item-link):hover,\n.Tiles-item:has(.Tiles-item-link):focus-within {\n --tiles-inset-shadow: inset 0 var(--base-size-2) 0 var(--brand-tiles-highlightColor);\n background-color: var(--brand-tiles-bgColor-hover);\n}\n\n.Tiles-item-link {\n display: flex;\n width: 100%;\n flex: 1;\n text-decoration: none;\n color: inherit;\n}\n\n.Tiles-item-link:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: calc(-1 * var(--base-size-4));\n border-radius: var(--brand-borderRadius-small);\n}\n\n.Tiles-item-content {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n aspect-ratio: 1;\n}\n\n.Tiles-item-media {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.Tiles-item-media svg,\n.Tiles-item-media img {\n width: auto;\n height: var(--base-size-40);\n max-width: 100%;\n}\n\n.Tiles--layout-compact .Tiles-item-media svg,\n.Tiles--layout-compact .Tiles-item-media img {\n height: var(--base-size-32);\n}\n\n.Tiles-item-label {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--base-size-4);\n padding: var(--base-size-12) var(--base-size-16);\n}\n\n.Tiles--layout-compact .Tiles-item-media {\n transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-media,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-media {\n transform: translateY(calc(-1 * var(--base-size-4)));\n}\n\n.Tiles--layout-compact .Tiles-item-label {\n opacity: 0;\n transform: translateY(var(--base-size-4));\n transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n pointer-events: none;\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-label,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-label {\n opacity: 1;\n transform: translateY(0);\n}\n\n.Tiles-item-name {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n}\n\n.Tiles-item-icon {\n flex-shrink: 0;\n color: var(--brand-color-text-default);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .Tiles-item {\n transition: none;\n }\n\n .Tiles--layout-compact .Tiles-item-media {\n transition: none;\n }\n\n .Tiles--layout-compact .Tiles-item-label {\n transition: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Tiles.module.js","names":[],"sources":["../../src/Tiles/Tiles.module.css"],"sourcesContent":[".Tiles {\n width: 100%;\n color: var(--brand-color-text-default);\n}\n\n.Tiles-grid {\n --tiles-columns: 2;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n@media screen and (min-width: 48rem) {\n .Tiles--layout-default .Tiles-grid {\n --tiles-columns: 4;\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .Tiles--layout-default .Tiles-grid {\n --tiles-columns: 6;\n }\n}\n\n@media screen and (min-width: 48rem) {\n .Tiles--layout-compact .Tiles-grid {\n --tiles-columns: 4;\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .Tiles--layout-compact .Tiles-grid {\n --tiles-columns: 8;\n }\n}\n\n.Tiles--variant-gridlines .Tiles-grid {\n position: relative;\n padding-right: var(--brand-borderWidth-thin);\n padding-bottom: var(--brand-borderWidth-thin);\n}\n\n.Tiles--variant-gridlines .Tiles-grid::before,\n.Tiles--variant-gridlines .Tiles-grid::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n width: 0;\n border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n z-index: 1;\n pointer-events: none;\n}\n\n.Tiles--variant-gridlines .Tiles-grid::before {\n left: 0;\n}\n\n.Tiles--variant-gridlines .Tiles-grid::after {\n right: 0;\n}\n\n.Tiles-item {\n --tiles-inset-shadow: inset 0 0 0 transparent;\n position: relative;\n display: flex;\n flex-direction: column;\n width: calc(100% / var(--tiles-columns));\n box-sizing: border-box;\n background-color: var(--brand-tiles-bgColor-rest);\n border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n box-shadow: var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted),\n 0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), var(--tiles-inset-shadow);\n transition: background-color var(--brand-animation-duration-faster) var(--brand-animation-easing-default),\n box-shadow var(--brand-animation-duration-faster) var(--brand-animation-easing-default);\n}\n\n.Tiles-item:has(.Tiles-item-link):hover,\n.Tiles-item:has(.Tiles-item-link):focus-within {\n --tiles-inset-shadow: inset 0 var(--base-size-2) 0 var(--brand-tiles-highlightColor);\n background-color: var(--brand-tiles-bgColor-hover);\n}\n\n.Tiles-item-link {\n display: flex;\n width: 100%;\n flex: 1;\n text-decoration: none;\n color: inherit;\n}\n\n.Tiles-item-link:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: calc(-1 * var(--base-size-4));\n border-radius: var(--brand-borderRadius-small);\n}\n\n.Tiles-item-content {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n aspect-ratio: 1;\n}\n\n.Tiles-item-media {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.Tiles-item-media svg,\n.Tiles-item-media img {\n width: auto;\n height: var(--base-size-40);\n max-width: 100%;\n}\n\n.Tiles--layout-compact .Tiles-item-media svg,\n.Tiles--layout-compact .Tiles-item-media img {\n height: var(--base-size-32);\n}\n\n.Tiles-item-label {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--base-size-4);\n padding: var(--base-size-12) var(--base-size-16);\n}\n\n.Tiles--layout-compact .Tiles-item-media {\n transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-media,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-media {\n transform: translateY(calc(-1 * var(--base-size-4)));\n}\n\n.Tiles--layout-compact .Tiles-item-label {\n opacity: 0;\n transform: translateY(var(--base-size-4));\n transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n pointer-events: none;\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-label,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-label {\n opacity: 1;\n transform: translateY(0);\n}\n\n.Tiles-item-name {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n}\n\n.Tiles-item-icon {\n flex-shrink: 0;\n color: var(--brand-color-text-default);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .Tiles-item {\n transition: none;\n }\n\n .Tiles--layout-compact .Tiles-item-media {\n transition: none;\n }\n\n .Tiles--layout-compact .Tiles-item-label {\n transition: none;\n }\n}\n"],"mappings":""}

package/esm/component-helpers/shared.module-CrdMh7Vf.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__shared-module__gridline___FDR_5{position:relative}.Primer_Brand__shared-module__gridline___FDR_5:before,.Primer_Brand__shared-module__gridline___FDR_5:after{content:"";border-top:var(--brand-borderWidth-thin) solid;-o-border-image:linear-gradient(var(--brand-color-border-muted), var(--brand-color-border-muted)) 1;border-image:linear-gradient(var(--brand-color-border-muted), var(--brand-color-border-muted)) 1;z-index:1;pointer-events:none;border-image-outset:0 100vw;height:0;position:absolute;left:0;right:0}.Primer_Brand__shared-module__gridline___FDR_5:before{top:0}.Primer_Brand__shared-module__gridline___FDR_5:after{bottom:0}

package/esm/component-helpers/shared.module.js ADDED Viewed

@@ -0,0 +1,5 @@
+import './shared.module-CrdMh7Vf.css';var e = { gridline: "Primer_Brand__shared-module__gridline___FDR_5" };
+//#endregion
+export { e as default };
+//# sourceMappingURL=shared.module.js.map

package/esm/component-helpers/shared.module.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"shared.module.js","names":[],"sources":["../../src/component-helpers/shared.module.css"],"sourcesContent":["/*\n * .gridline: horizontal gridlines that span the visible viewport, breaking\n * out of constrained-width parents. Uses border-image-outset to extend the\n * line visually without affecting layout or causing scrollbar overflow.\n */\n\n.gridline {\n position: relative;\n}\n\n.gridline::before,\n.gridline::after {\n content: '';\n position: absolute;\n left: 0;\n right: 0;\n height: 0;\n border-top: var(--brand-borderWidth-thin) solid;\n border-image: linear-gradient(var(--brand-color-border-muted), var(--brand-color-border-muted)) 1;\n border-image-outset: 0 100vw;\n z-index: 1;\n pointer-events: none;\n}\n\n.gridline::before {\n top: 0;\n}\n\n.gridline::after {\n bottom: 0;\n}\n"],"mappings":""}

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes-DPvZ0fhp.css ADDED Viewed

@@ -0,0 +1 @@

+ :root,[data-color-mode=light]{--brand-button-primary-bgColor-rest:var(--base-color-scale-green-6);--brand-button-primary-bgColor-hover:linear-gradient(0deg, #00000029 0%, #00000029 100%), var(--base-color-scale-green-6);--brand-button-primary-bgColor-active:linear-gradient(0deg, #0000003d 0%, #0000003d 100%), var(--base-color-scale-green-6);--brand-button-primary-bgColor-disabled:var(--base-color-scale-gray-4);--brand-button-primary-borderColor-rest:transparent;--brand-button-primary-borderColor-hover:transparent;--brand-button-primary-borderColor-active:var(--base-color-scale-green-7);--brand-button-primary-borderColor-disabled:transparent;--brand-button-primary-fgColor-rest:var(--base-color-scale-white-0);--brand-button-primary-fgColor-disabled:var(--base-color-scale-gray-2);--brand-button-primary-shadow-active:none;--brand-button-secondary-bgColor-rest:#0000000f;--brand-button-secondary-bgColor-hover:linear-gradient(0deg, #0000000f 0%, #0000000f 100%), #0000000f;--brand-button-secondary-bgColor-active:linear-gradient(0deg, #00000029 0%, #00000029 100%), #0000000f;--brand-button-secondary-borderColor-rest:var(--base-color-scale-gray-2);--brand-button-secondary-borderColor-hover:var(--base-color-scale-gray-2);--brand-button-secondary-borderColor-active:var(--base-color-scale-gray-2);--brand-button-secondary-fgColor-rest:var(--brand-color-text-default);--brand-button-secondary-fgColor-disabled:var(--base-color-scale-gray-3);--brand-button-subtle-bgColor-rest:#00000003;--brand-button-subtle-bgColor-hover:linear-gradient(0deg, #0000000f 0%, #0000000f 100%), #0000000f;--brand-button-subtle-bgColor-active:linear-gradient(0deg, #00000029 0%, #00000029 100%), #0000000f;--brand-button-subtle-borderColor-rest:var(--base-color-scale-gray-2);--brand-button-subtle-borderColor-hover:var(--base-color-scale-gray-2);--brand-button-subtle-borderColor-active:var(--base-color-scale-gray-2);--brand-button-subtle-fgColor-rest:var(--brand-color-text-default);--brand-button-subtle-fgColor-disabled:var(--base-color-scale-gray-3)}[data-color-mode=dark]{--brand-button-primary-bgColor-rest:var(--base-color-scale-green-5);--brand-button-primary-bgColor-hover:linear-gradient(0deg, #00000029 0%, #00000029 100%), var(--base-color-scale-green-5);--brand-button-primary-bgColor-active:linear-gradient(0deg, #0000003d 0%, #0000003d 100%), var(--base-color-scale-green-5);--brand-button-primary-bgColor-disabled:var(--base-color-scale-gray-4);--brand-button-primary-borderColor-rest:transparent;--brand-button-primary-borderColor-hover:transparent;--brand-button-primary-borderColor-active:var(--base-color-scale-green-6);--brand-button-primary-borderColor-disabled:transparent;--brand-button-primary-fgColor-rest:var(--base-color-scale-white-0);--brand-button-primary-fgColor-disabled:var(--base-color-scale-gray-2);--brand-button-primary-shadow-active:none;--brand-button-secondary-bgColor-rest:#ffffff1f;--brand-button-secondary-bgColor-hover:#ffffff29;--brand-button-secondary-bgColor-active:#ffffff42;--brand-button-secondary-borderColor-rest:#ffffff0f;--brand-button-secondary-borderColor-hover:#ffffff1f;--brand-button-secondary-borderColor-active:#ffffff1f;--brand-button-secondary-fgColor-rest:var(--brand-color-text-default);--brand-button-secondary-fgColor-disabled:var(--base-color-scale-gray-4);--brand-button-subtle-bgColor-rest:#00000003;--brand-button-subtle-bgColor-hover:#ffffff29;--brand-button-subtle-bgColor-active:#ffffff3d;--brand-button-subtle-borderColor-rest:var(--base-color-scale-gray-6);--brand-button-subtle-borderColor-hover:#ffffff1f;--brand-button-subtle-borderColor-active:#ffffff1f;--brand-button-subtle-fgColor-rest:var(--brand-color-text-default);--brand-button-subtle-fgColor-disabled:var(--base-color-scale-gray-4)}