npm - @primer/react-brand - Versions diffs - 0.68.0-rc.b6d410ef → 0.68.1-rc.e248cf2a - Mend

@primer/react-brand 0.68.0-rc.b6d410ef → 0.68.1-rc.e248cf2a

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 (418) 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 = '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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"}
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 const narrowButtonLabel = SubHeadingChild ? activeLinklabel : null\n\n const NarrowButton = useMemo(\n () => (\n <div\n className={clsx(styles['SubNav__overlay-toggle'], isOpenAtNarrow && styles['SubNav__overlay-toggle--open'])}\n >\n <span\n className={clsx(\n styles['SubNav__overlay-toggle-content'],\n !narrowButtonLabel && styles['SubNav__overlay-toggle-content--end'],\n )}\n >\n <button\n ref={narrowButtonRef}\n className={styles['SubNav__overlay-toggle-label']}\n data-testid={testIds.button}\n onClick={isOpenAtNarrow ? closeMenuCallback : handleMenuToggle}\n aria-expanded={isOpenAtNarrow ? 'true' : 'false'}\n aria-controls={idForLinkContainer}\n aria-label={activeLinklabel ? `Navigation menu. Current page: ${activeLinklabel}` : 'Navigation menu'}\n >\n {narrowButtonLabel && (\n <Text as=\"span\" size=\"100\">\n {narrowButtonLabel}\n </Text>\n )}\n {isOpenAtNarrow ? (\n <TriangleUpIcon className={styles['SubNav__overlay-toggle-icon']} size={13} />\n ) : (\n <TriangleDownIcon className={styles['SubNav__overlay-toggle-icon']} size={13} />\n )}\n </button>\n </span>\n </div>\n ),\n [activeLinklabel, closeMenuCallback, handleMenuToggle, idForLinkContainer, isOpenAtNarrow, narrowButtonLabel],\n )\n\n return (\n <div\n ref={rootRef}\n className={clsx(\n styles['SubNav__container'],\n SubHeadingChild && styles['SubNav--has-sub-heading'],\n SubHeadingChild && subHeadingIsActive && styles['SubNav--subHeadingActive'],\n hasAnchoredNav && styles['SubNav__container--with-anchor-nav'],\n )}\n >\n <SubNavProvider>\n <nav\n ref={navRef}\n id={id}\n className={clsx(\n styles.SubNav,\n isOpenAtNarrow && styles['SubNav--open'],\n hasShadow && styles['SubNav--has-shadow'],\n fullWidth && styles['SubNav--full-width'],\n className,\n )}\n data-testid={testId \|\| testIds.root}\n >\n <div ref={innerRootRef} className={styles['SubNav--header-container-outer']}>\n <div className={styles['SubNav__header-container']}>\n {HeadingChild && <div className={styles['SubNav__heading-container']}>{HeadingChild}</div>}\n\n {SubHeadingChild && (\n <div\n className={clsx(\n styles['SubNav__heading-container'],\n styles['SubNav__subheading-container'],\n subHeadingIsActive && styles['SubNav__subheading-container-active'],\n )}\n >\n {SubHeadingChild}\n </div>\n )}\n\n {!isLarge && (!SubHeadingChild \|\| subHeadingIsActive) && NarrowButton}\n\n {MaybeSubNav && MaybeSubNav}\n </div>\n {!isLarge && SubHeadingChild && !subHeadingIsActive && NarrowButton}\n {LinkChildren.length > 0 && (\n <ul\n ref={overlayRef}\n id={idForLinkContainer}\n className={clsx(\n styles['SubNav__links-overlay'],\n isOpenAtNarrow && styles['SubNav__links-overlay--open'],\n )}\n data-testid={testIds.overlay}\n >\n {LinkChildren}\n {ActionChild && <li className={styles['SubNav__action-container']}>{ActionChild}</li>}\n </ul>\n )}\n </div>\n </nav>\n </SubNavProvider>\n </div>\n )\n },\n ),\n)\n\ntype HeadingBaseProps = {\n href: string\n 'data-testid'?: string\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n BaseProps<HTMLAnchorElement>\n\nconst HeadingBase = ({href, children, className, 'data-testid': testID, ...props}: HeadingBaseProps) => {\n return (\n <a\n href={href}\n className={clsx(styles['SubNav__heading'], className)}\n data-testid={testIds.heading \|\| testID}\n {...props}\n >\n {children}\n </a>\n )\n}\n\ntype SubHeadingBaseProps = {\n href: string\n 'data-testid'?: string\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n BaseProps<HTMLAnchorElement>\n\nconst SubHeadingBase = ({href, children, className, 'data-testid': testID, ...props}: SubHeadingBaseProps) => {\n return (\n <a\n href={href}\n className={clsx(styles['SubNav__heading'], styles['SubNav__link'], styles['SubNav__subHeading'], className)}\n data-testid={testIds.heading \|\| testID}\n {...props}\n >\n {children}\n </a>\n )\n}\n\ntype LinkBaseProps = {\n href: string\n 'data-testid'?: string\n variant?: TextProps['variant']\n _subMenuVariant?: SubMenuVariants\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n BaseProps<HTMLAnchorElement>\n\nconst LinkBaseWithSubmenu = forwardRef<HTMLDivElement, LinkBaseProps>(\n (\n {children, href, 'aria-current': ariaCurrent, 'data-testid': testId, className, _subMenuVariant, variant, ...props},\n forwardedRef,\n ) => {\n const submenuId = useId()\n const {isLarge} = useWindowSize()\n\n const [isExpanded, setIsExpanded] = useState(false)\n const ref = useProvidedRefOrCreate(forwardedRef as RefObject<HTMLDivElement>)\n const subMenuChildrenRef = useRef<HTMLDivElement>(null)\n\n useContainsFocus(ref, (containsFocus: boolean) => {\n if (!containsFocus) {\n setIsExpanded(false)\n }\n })\n\n const expand = useCallback(() => setIsExpanded(true), [])\n const collapse = useCallback(() => setIsExpanded(false), [])\n const toggleExpanded = useCallback(() => setIsExpanded(prev => !prev), [])\n const isAriaCurrent = Boolean(ariaCurrent) && ariaCurrent !== 'false'\n\n useKeyboardEscape(collapse)\n\n useEffect(() => {\n if (subMenuChildrenRef.current) {\n // Workaround to avoid React 18 / 19 type mismatches with the `inert` attribute.\n // This approach won't immediately apply the attribute in pure SSR contexts, only post-hydration\n // TODO: Move back to JSX when React 19 is fully adopted in Dotcom.\n // `inert` removes the collapsed submenu from tab order and the accessibility tree\n // without affecting visual appearance\n subMenuChildrenRef.current.toggleAttribute('inert', isLarge && !isExpanded)\n }\n }, [isLarge, isExpanded])\n\n const [label, SubMenuChildren] = children as ReactNode[]\n\n return (\n <div\n className={clsx(\n styles['SubNav__link--has-sub-menu'],\n isExpanded && styles['SubNav__link--expanded'],\n isAriaCurrent && styles['SubNav__link--has-active-sub-menu'],\n )}\n data-testid={testId \|\| testIds.subMenu}\n ref={ref}\n onMouseOver={expand}\n onMouseOut={collapse}\n /\n onFocus and onBlur need to be defined to keep the jsx-a11y/mouse-events-have-key-events\n * eslint rule happy. The focus/blur behaviour is handled by useContainsFocus\n /\n onFocus={() => null}\n onBlur={() => null}\n >\n <a\n href={href}\n className={clsx(styles['SubNav__link'], ariaCurrent && styles['SubNav__link--active'], className)}\n aria-current={ariaCurrent}\n {...props}\n >\n <Text as=\"span\" size=\"100\" weight=\"medium\" className={styles['SubNav__link-label']}>\n {label}\n </Text>\n </a>\n {isLarge && (\n <button\n className={styles['SubNav__sub-menu-toggle']}\n onClick={toggleExpanded}\n aria-expanded={isExpanded ? 'true' : 'false'}\n aria-controls={submenuId}\n aria-label={`${label?.toString().trim()} submenu`}\n >\n <TriangleDownIcon className={styles['SubNav__sub-menu-icon']} size={16} />\n </button>\n )}\n\n <div id={submenuId} className={styles['SubNav__sub-menu-children']} ref={subMenuChildrenRef}>\n {SubMenuChildren}\n </div>\n </div>\n )\n },\n)\n\nconst LinkBase = forwardRef<HTMLAnchorElement \| HTMLDivElement, LinkBaseProps>((props, ref) => {\n const [isInView, setIsInView] = useState(false)\n const childrenArr = Children.toArray(props.children)\n\n const hasSubMenu = childrenArr.some(child => {\n if (isValidElement(child)) {\n return child.type === SubMenuBase\n }\n })\n\n useEffect(() => {\n if (hasSubMenu) return\n const targetId = props.href.replace('#', '')\n const target = document.getElementById(targetId)\n if (!target) return\n\n const topOfWindow = '0px 0px -100%'\n const observerParams = {threshold: 0, root: null, rootMargin: topOfWindow}\n\n const handleIntersectionUpdate: IntersectionObserverCallback = ([entry]) => {\n setIsInView(entry.isIntersecting)\n }\n\n const observer = new IntersectionObserver(handleIntersectionUpdate, observerParams)\n observer.observe(target)\n return () => observer.disconnect()\n }, [hasSubMenu, props.href])\n\n if (hasSubMenu) {\n const isAnchorVariantSubMenu = childrenArr.some(child => {\n return isValidElement<SubMenuProps>(child) && child.type === SubMenuBase && child.props.variant === 'anchor'\n })\n\n return (\n <li>\n <LinkBaseWithSubmenu\n ref={ref as RefObject<HTMLDivElement>}\n {...props}\n _subMenuVariant={isAnchorVariantSubMenu ? 'anchor' : undefined}\n />\n </li>\n )\n }\n\n const {children, href, 'aria-current': ariaCurrent, 'data-testid': testId, variant, className, ...rest} = props\n\n return (\n <li>\n <a\n href={href}\n className={clsx(\n styles['SubNav__link'],\n ariaCurrent && styles['SubNav__link--active'],\n isInView && styles['SubNav__link--is-in-view'],\n className,\n )}\n aria-current={ariaCurrent}\n data-testid={testId \|\| testIds.link}\n ref={ref as RefObject<HTMLAnchorElement>}\n {...rest}\n >\n <Text as=\"span\" size=\"100\" weight=\"medium\" className={styles['SubNav__link-label']}>\n {children}\n </Text>\n </a>\n </li>\n )\n})\n\ntype SubMenuProps = {\n variant?: SubMenuVariants\n} & React.HTMLAttributes<HTMLUListElement> &\n BaseProps<HTMLUListElement>\n\nfunction SubMenuBase({children, className, variant = 'dropdown', ...props}: SubMenuProps) {\n const context = React.useContext(SubNavContext)\n const navRef = useRef<HTMLElement>(null)\n\n const {isLarge} = useWindowSize()\n\n /\n Effect is needed to prevent the bubbling of onClick events to the overlay trigger.\n * Removing this effect will cause clicks on the anchor nav element to toggle the overlay.\n /\n useEffect(() => {\n const handleClick = (e: MouseEvent) => {\n if (navRef.current && !navRef.current.contains(e.target as Node)) {\n return\n }\n\n if (!(e.target instanceof HTMLAnchorElement)) {\n e.stopPropagation()\n }\n }\n\n if (variant === 'anchor') {\n document.addEventListener('click', handleClick, true) // Capture phase\n }\n\n return () => {\n document.removeEventListener('click', handleClick, true)\n }\n }, [variant])\n\n if (variant === 'anchor' && context?.portalRef.current) {\n return createPortal(\n <nav\n ref={navRef}\n className={clsx(styles['SubNav__sub-menu'], styles['SubNav__sub-menu--anchor'], className)}\n role=\"navigation\"\n aria-label=\"Sub navigation\"\n >\n <ul className={styles['SubNav__sub-menu-list']} {...props}>\n {React.Children.map(children, child => {\n if (isValidElement<LinkBaseProps>(child) && child.type === LinkBase) {\n return React.cloneElement(child, {\n onClick: e => {\n child.props.onClick?.(e)\n },\n })\n }\n return null\n })}\n </ul>\n </nav>,\n context.portalRef.current,\n )\n } else {\n const Tag = isLarge ? ThemeProvider : React.Fragment\n\n return (\n <Tag {...(isLarge ? {colorMode: 'light'} : {})}>\n <ul className={clsx(styles['SubNav__sub-menu'], styles[`SubNav__sub-menu--${variant}`], className)} {...props}>\n {children}\n </ul>\n </Tag>\n )\n }\n}\n\ntype SubNavActionProps = {\n /\n Required path or location for the action button to link to.\n /\n href: string\n /\n Optional sizes for the button.\n /\n size?: (typeof ButtonSizes)[number]\n /\n Optional sizes for the button.\n /\n variant?: (typeof ButtonVariants)[number]\n} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>\n\nfunction ActionBase({children, href, variant = 'primary', size = 'small', ...rest}: SubNavActionProps) {\n return (\n <Button\n className={styles['SubNav__action']}\n as=\"a\"\n href={href}\n variant={variant}\n data-testid={testIds.action}\n size={size}\n {...rest}\n >\n {children}\n </Button>\n )\n}\n\n/\n Use SubNav to display a secondary navigation beneath a primary header.\n * @see https://primer.style/brand/components/SubNav\n */\nexport const SubNav = Object.assign(SubNavRoot, {\n Heading: HeadingBase,\n SubHeading: SubHeadingBase,\n Link: LinkBase,\n Action: ActionBase,\n SubMenu: SubMenuBase,\n testIds,\n})\n"],"mappings":"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"}

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

@@ -0,0 +1 @@

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

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

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

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

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

package/esm/Tiles/Tiles.module-BOGZTY7t.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{--tiles-grid-border-color:var(--brand-color-border-muted);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(--tiles-grid-border-color);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}@media screen and (width>=63.25rem){:is(.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP.Primer_Brand__Tiles-module__Tiles--layout-default___szHFY .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:not(:has(>.Primer_Brand__Tiles-module__Tiles-item___YlnUj:nth-child(6))),.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:not(:has(>.Primer_Brand__Tiles-module__Tiles-item___YlnUj:nth-child(8)))){--tiles-grid-border-color:transparent}}.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-DVK0nMCy.css';var e = {
+import './Tiles.module-BOGZTY7t.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 .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 --tiles-grid-border-color: var(--brand-color-border-muted);\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(--tiles-grid-border-color);\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@media screen and (min-width: 63.25rem) {\n .Tiles--variant-gridlines.Tiles--layout-default .Tiles-grid:not(:has(> .Tiles-item:nth-child(6))),\n .Tiles--variant-gridlines.Tiles--layout-compact .Tiles-grid:not(:has(> .Tiles-item:nth-child(8))) {\n --tiles-grid-border-color: transparent;\n }\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/index.d.ts CHANGED Viewed

@@ -6,6 +6,7 @@ export * from './ThemeProvider';
 export * from './Button';
 export * from './ButtonGroup';
 export * from './river';
+export * from './MediaPlaylist';
 export * from './SubdomainNavBar';
 export * from './InlineLink';
 export * from './Link';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AAEjC,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,QAAQ,CAAA;AACtB,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AAGvB,cAAc,uBAAuB,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AAEjC,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,QAAQ,CAAA;AACtB,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AAGvB,cAAc,uBAAuB,CAAA"}

package/esm/index.esm.js CHANGED Viewed

@@ -25,53 +25,54 @@ import { Icon as Ce, defaultIconColor as we, defaultIconSize as Te, iconColors a
 import { BreakpointSize as je, useWindowSize as Me } from "./hooks/useWindowSize.js";
 import { RiverBreakoutTabs as Ne } from "./river/RiverBreakoutTabs/RiverBreakoutTabs.js";
 import { RiverStoryScroll as Pe } from "./river/RiverStoryScroll/RiverStoryScroll.js";
-import { SubdomainNavBar as Fe } from "./SubdomainNavBar/SubdomainNavBar.js";
-import { InlineLink as Ie } from "./InlineLink/InlineLink.js";
-import { Token as Le, TokenVariants as Re, defaultTokenVariant as ze } from "./Token/Token.js";
-import { Accordion as Be, AccordionContent as Ve, AccordionHeading as He, AccordionRoot as Ue, AccordionToggleColors as We } from "./Accordion/Accordion.js";
-import { FAQ as Ge } from "./FAQ/FAQ.js";
-import { FAQGroup as Ke } from "./FAQ/FAQGroup.js";
-import { Checkbox as qe } from "./forms/Checkbox/Checkbox.js";
-import { DEFAULT_TEXTAREA_COLS as Je, DEFAULT_TEXTAREA_RESIZE as Ye, DEFAULT_TEXTAREA_ROWS as Xe, Textarea as Ze } from "./forms/Textarea/Textarea.js";
-import { TextInput as Qe } from "./forms/TextInput/TextInput.js";
-import { Select as $e } from "./forms/Select/Select.js";
-import { Radio as et } from "./forms/Radio/Radio.js";
-import { FormControl as tt } from "./forms/FormControl/FormControl.js";
-import { CheckboxGroup as nt } from "./forms/CheckboxGroup/CheckboxGroup.js";
-import { RadioGroup as rt } from "./forms/RadioGroup/RadioGroup.js";
-import { Avatar as it, AvatarShapes as at, AvatarSizes as ot } from "./Avatar/Avatar.js";
-import { Testimonial as st, TestimonialQuoteMarkColors as ct, TestimonialVariants as lt, defaultQuoteMarkColor as ut, defaultTestimonialVariant as dt } from "./Testimonial/Testimonial.js";
-import { ComparisonTable as ft, _ComparisonTable as pt } from "./ComparisonTable/ComparisonTable.js";
-import { AnchorNav as mt } from "./AnchorNav/AnchorNav.js";
-import { CTABanner as ht, CTABannerBackgroundColors as gt } from "./CTABanner/CTABanner.js";
-import { UnorderedList as _t } from "./list/UnorderedList/UnorderedList.js";
-import { OrderedList as vt } from "./list/OrderedList/OrderedList.js";
-import { CTAForm as yt } from "./CTAForm/CTAForm.js";
-import { MinimalFooter as bt } from "./MinimalFooter/MinimalFooter.js";
-import { Pillar as xt, defaultPillarIconColor as St, defaultPillarIconSize as Ct } from "./Pillar/Pillar.js";
-import { Card as wt, CardBackgroundColors as Tt, CardCTAVariants as Et, CardIconColors as Dt, CardLabelVariants as Ot, CardTokenPositions as kt, CardVariants as At, defaultCardCTAVariant as jt, defaultCardIconColor as Mt, defaultCardLabelVariant as Nt } from "./Card/Card.js";
-import { CardSkewEffect as Pt } from "./Card/CardSkewEffect.js";
-import { SectionIntro as Ft } from "./SectionIntro/SectionIntro.js";
-import { ActionMenu as It, ActionMenuButtonModes as Lt, ActionMenuProvider as Rt, ActionMenuSizes as zt, actionMenuOverlaySides as Bt, useActionMenuContext as Vt } from "./ActionMenu/ActionMenu.js";
-import { Prose as Ht } from "./Prose/Prose.js";
-import { useVideo as Ut } from "./VideoPlayer/hooks/useVideo.js";
-import { VideoPlayer as Wt } from "./VideoPlayer/VideoPlayer.js";
-import { LogoSuite as Gt } from "./LogoSuite/LogoSuite.js";
-import { Timeline as Kt } from "./Timeline/Timeline.js";
-import { Bento as qt } from "./Bento/Bento.js";
-import { EyebrowBanner as Jt, EyebrowBannerIconColors as Yt, EyebrowBannerLabelColors as Xt, defaultEyebrowBannerIconColor as Zt } from "./EyebrowBanner/EyebrowBanner.js";
-import { PricingOptions as Qt } from "./PricingOptions/PricingOptions.js";
-import { SubNav as $t, SubNavSubMenuVariants as en, useSubNavContext as tn } from "./SubNav/SubNav.js";
-import { IDE as nn, IDEDefaultIconMap as rn, IDEFileExtensions as an } from "./IDE/IDE.js";
-import { BreadcrumbVariants as on, Breadcrumbs as sn } from "./Breadcrumbs/Breadcrumbs.js";
-import { Pagination as cn } from "./Pagination/Pagination.js";
-import { Tooltip as ln, TooltipContext as un } from "./Tooltip/Tooltip.js";
-import { Section as dn, SectionBackgroundColors as fn, SectionPaddingVariants as pn } from "./Section/Section.js";
-import { Statistic as mn, StatisticSizes as hn, StatisticSpacingValues as gn } from "./Statistic/Statistic.js";
-import { BreakoutBanner as _n, BreakoutBannerBackgroundColors as vn } from "./BreakoutBanner/BreakoutBanner.js";
-import { Footnotes as yn, FootnotesItemTags as bn, FootnotesTags as xn } from "./Footnotes/Footnotes.js";
-import { FrostedGlassVFX as Sn, FrostedGlassVFXIntensity as Cn, defaultFrostedGlassVFXIntensity as wn } from "./FrostedGlassVFX/FrostedGlassVFX.js";
-import { SectionIntroStacked as Tn, SectionIntroStackedVariants as En } from "./SectionIntroStacked/SectionIntroStacked.js";
-import { Tabs as Dn } from "./Tabs/Tabs.js";
-import { Tiles as On } from "./Tiles/Tiles.js";
-export { Be as Accordion, Ve as AccordionContent, He as AccordionHeading, Ue as AccordionRoot, We as AccordionToggleColors, It as ActionMenu, Lt as ActionMenuButtonModes, Rt as ActionMenuProvider, zt as ActionMenuSizes, mt as AnchorNav, a as Animate, n as AnimationContext, r as AnimationProvider, i as AnimationVariants, it as Avatar, at as AvatarShapes, ot as AvatarSizes, qt as Bento, g as Box, _ as BoxBackgroundColors, v as BoxBorderColorOptions, y as BoxBorderRadiusOptions, b as BoxBorderWidthOptions, x as BoxSpacingValues, on as BreadcrumbVariants, sn as Breadcrumbs, _n as BreakoutBanner, vn as BreakoutBannerBackgroundColors, je as BreakpointSize, J as Button, ae as ButtonGroup, Y as ButtonSizes, X as ButtonVariants, ht as CTABanner, gt as CTABannerBackgroundColors, yt as CTAForm, wt as Card, Tt as CardBackgroundColors, Et as CardCTAVariants, Dt as CardIconColors, Ot as CardLabelVariants, Pt as CardSkewEffect, kt as CardTokenPositions, At as CardVariants, qe as Checkbox, nt as CheckboxGroup, te as ColorModesEnum, ft as ComparisonTable, Je as DEFAULT_TEXTAREA_COLS, Ye as DEFAULT_TEXTAREA_RESIZE, Xe as DEFAULT_TEXTAREA_ROWS, Jt as EyebrowBanner, Yt as EyebrowBannerIconColors, Xt as EyebrowBannerLabelColors, M as EyebrowText, N as EyebrowTextVariants, Ge as FAQ, Ke as FAQGroup, yn as Footnotes, bn as FootnotesItemTags, xn as FootnotesTags, tt as FormControl, Sn as FrostedGlassVFX, Cn as FrostedGlassVFXIntensity, t as Grid, I as Heading, L as HeadingFontVariants, R as HeadingLetterSpacing, z as HeadingSizes, B as HeadingStretch, V as HeadingTags, H as HeadingWeights, ee as Hero, nn as IDE, rn as IDEDefaultIconMap, an as IDEFileExtensions, Ce as Icon, K as Image, q as ImageBorderRadiusOptions, Ie as InlineLink, fe as Label, pe as LabelColors, me as LabelSizes, ce as Link, le as LinkArrowDirections, ue as LinkSizes, de as LinkVariants, Gt as LogoSuite, bt as MinimalFooter, vt as OrderedList, cn as Pagination, xt as Pillar, Qt as PricingOptions, Ht as Prose, et as Radio, rt as RadioGroup, _e as River, oe as RiverAccordion, se as RiverAccordionVariants, xe as RiverBreakout, Ne as RiverBreakoutTabs, Se as RiverBreakoutVariants, Pe as RiverStoryScroll, dn as Section, fn as SectionBackgroundColors, Ft as SectionIntro, Tn as SectionIntroStacked, En as SectionIntroStackedVariants, pn as SectionPaddingVariants, $e as Select, c as Stack, l as StackAlignItemVariants, u as StackDirectionVariants, d as StackFlexWrapVariants, f as StackJustifyContentVariants, p as StackSpacingVariants, mn as Statistic, hn as StatisticSizes, gn as StatisticSpacingValues, $t as SubNav, en as SubNavSubMenuVariants, Fe as SubdomainNavBar, Dn as Tabs, st as Testimonial, ct as TestimonialQuoteMarkColors, lt as TestimonialVariants, S as Text, P as TextCursorAnimation, C as TextFontVariants, Qe as TextInput, s as TextRevealAnimation, w as TextSizes, T as TextTags, E as TextVariants, D as TextWeights, Ze as Textarea, ne as ThemeContext, re as ThemeProvider, On as Tiles, Kt as Timeline, Le as Token, Re as TokenVariants, ln as Tooltip, un as TooltipContext, _t as UnorderedList, Wt as VideoPlayer, Z as _Button, pt as _ComparisonTable, e as _GLOBAL_STYLES, Bt as actionMenuOverlaySides, U as classMap, Q as defaultButtonSize, $ as defaultButtonVariant, jt as defaultCardCTAVariant, Mt as defaultCardIconColor, Nt as defaultCardLabelVariant, Zt as defaultEyebrowBannerIconColor, O as defaultFontVariant, wn as defaultFrostedGlassVFXIntensity, W as defaultHeadingFont, G as defaultHeadingTag, we as defaultIconColor, Te as defaultIconSize, he as defaultLabelColor, ge as defaultLabelSize, St as defaultPillarIconColor, Ct as defaultPillarIconSize, ut as defaultQuoteMarkColor, ve as defaultRiverAlign, ye as defaultRiverImageTextRatio, be as defaultRiverVariant, m as defaultStackDirection, h as defaultStackSpacing, dt as defaultTestimonialVariant, k as defaultTextSize, A as defaultTextTag, j as defaultTextVariant, ze as defaultTokenVariant, Ee as iconColors, De as iconSizeMap, Oe as iconSizes, ke as namedIconSizes, Ae as numericIconSizes, F as testIds, Vt as useActionMenuContext, o as useAnimation, tn as useSubNavContext, ie as useTheme, Ut as useVideo, Me as useWindowSize };
+import { Pagination as Fe } from "./Pagination/Pagination.js";
+import { MediaPlaylist as Ie } from "./MediaPlaylist/MediaPlaylist.js";
+import { SubdomainNavBar as Le } from "./SubdomainNavBar/SubdomainNavBar.js";
+import { InlineLink as Re } from "./InlineLink/InlineLink.js";
+import { Token as ze, TokenVariants as Be, defaultTokenVariant as Ve } from "./Token/Token.js";
+import { Accordion as He, AccordionContent as Ue, AccordionHeading as We, AccordionRoot as Ge, AccordionToggleColors as Ke } from "./Accordion/Accordion.js";
+import { FAQ as qe } from "./FAQ/FAQ.js";
+import { FAQGroup as Je } from "./FAQ/FAQGroup.js";
+import { Checkbox as Ye } from "./forms/Checkbox/Checkbox.js";
+import { DEFAULT_TEXTAREA_COLS as Xe, DEFAULT_TEXTAREA_RESIZE as Ze, DEFAULT_TEXTAREA_ROWS as Qe, Textarea as $e } from "./forms/Textarea/Textarea.js";
+import { TextInput as et } from "./forms/TextInput/TextInput.js";
+import { Select as tt } from "./forms/Select/Select.js";
+import { Radio as nt } from "./forms/Radio/Radio.js";
+import { FormControl as rt } from "./forms/FormControl/FormControl.js";
+import { CheckboxGroup as it } from "./forms/CheckboxGroup/CheckboxGroup.js";
+import { RadioGroup as at } from "./forms/RadioGroup/RadioGroup.js";
+import { Avatar as ot, AvatarShapes as st, AvatarSizes as ct } from "./Avatar/Avatar.js";
+import { Testimonial as lt, TestimonialQuoteMarkColors as ut, TestimonialVariants as dt, defaultQuoteMarkColor as ft, defaultTestimonialVariant as pt } from "./Testimonial/Testimonial.js";
+import { ComparisonTable as mt, _ComparisonTable as ht } from "./ComparisonTable/ComparisonTable.js";
+import { AnchorNav as gt } from "./AnchorNav/AnchorNav.js";
+import { CTABanner as _t, CTABannerBackgroundColors as vt } from "./CTABanner/CTABanner.js";
+import { UnorderedList as yt } from "./list/UnorderedList/UnorderedList.js";
+import { OrderedList as bt } from "./list/OrderedList/OrderedList.js";
+import { CTAForm as xt } from "./CTAForm/CTAForm.js";
+import { MinimalFooter as St } from "./MinimalFooter/MinimalFooter.js";
+import { Pillar as Ct, defaultPillarIconColor as wt, defaultPillarIconSize as Tt } from "./Pillar/Pillar.js";
+import { Card as Et, CardBackgroundColors as Dt, CardCTAVariants as Ot, CardIconColors as kt, CardLabelVariants as At, CardTokenPositions as jt, CardVariants as Mt, defaultCardCTAVariant as Nt, defaultCardIconColor as Pt, defaultCardLabelVariant as Ft } from "./Card/Card.js";
+import { CardSkewEffect as It } from "./Card/CardSkewEffect.js";
+import { SectionIntro as Lt } from "./SectionIntro/SectionIntro.js";
+import { ActionMenu as Rt, ActionMenuButtonModes as zt, ActionMenuProvider as Bt, ActionMenuSizes as Vt, actionMenuOverlaySides as Ht, useActionMenuContext as Ut } from "./ActionMenu/ActionMenu.js";
+import { Prose as Wt } from "./Prose/Prose.js";
+import { useVideo as Gt } from "./VideoPlayer/hooks/useVideo.js";
+import { VideoPlayer as Kt } from "./VideoPlayer/VideoPlayer.js";
+import { LogoSuite as qt } from "./LogoSuite/LogoSuite.js";
+import { Timeline as Jt } from "./Timeline/Timeline.js";
+import { Bento as Yt } from "./Bento/Bento.js";
+import { EyebrowBanner as Xt, EyebrowBannerIconColors as Zt, EyebrowBannerLabelColors as Qt, defaultEyebrowBannerIconColor as $t } from "./EyebrowBanner/EyebrowBanner.js";
+import { PricingOptions as en } from "./PricingOptions/PricingOptions.js";
+import { SubNav as tn, SubNavSubMenuVariants as nn, useSubNavContext as rn } from "./SubNav/SubNav.js";
+import { IDE as an, IDEDefaultIconMap as on, IDEFileExtensions as sn } from "./IDE/IDE.js";
+import { BreadcrumbVariants as cn, Breadcrumbs as ln } from "./Breadcrumbs/Breadcrumbs.js";
+import { Tooltip as un, TooltipContext as dn } from "./Tooltip/Tooltip.js";
+import { Section as fn, SectionBackgroundColors as pn, SectionPaddingVariants as mn } from "./Section/Section.js";
+import { Statistic as hn, StatisticSizes as gn, StatisticSpacingValues as _n } from "./Statistic/Statistic.js";
+import { BreakoutBanner as vn, BreakoutBannerBackgroundColors as yn } from "./BreakoutBanner/BreakoutBanner.js";
+import { Footnotes as bn, FootnotesItemTags as xn, FootnotesTags as Sn } from "./Footnotes/Footnotes.js";
+import { FrostedGlassVFX as Cn, FrostedGlassVFXIntensity as wn, defaultFrostedGlassVFXIntensity as Tn } from "./FrostedGlassVFX/FrostedGlassVFX.js";
+import { SectionIntroStacked as En, SectionIntroStackedVariants as Dn } from "./SectionIntroStacked/SectionIntroStacked.js";
+import { Tabs as On } from "./Tabs/Tabs.js";
+import { Tiles as kn } from "./Tiles/Tiles.js";
+export { He as Accordion, Ue as AccordionContent, We as AccordionHeading, Ge as AccordionRoot, Ke as AccordionToggleColors, Rt as ActionMenu, zt as ActionMenuButtonModes, Bt as ActionMenuProvider, Vt as ActionMenuSizes, gt as AnchorNav, a as Animate, n as AnimationContext, r as AnimationProvider, i as AnimationVariants, ot as Avatar, st as AvatarShapes, ct as AvatarSizes, Yt as Bento, g as Box, _ as BoxBackgroundColors, v as BoxBorderColorOptions, y as BoxBorderRadiusOptions, b as BoxBorderWidthOptions, x as BoxSpacingValues, cn as BreadcrumbVariants, ln as Breadcrumbs, vn as BreakoutBanner, yn as BreakoutBannerBackgroundColors, je as BreakpointSize, J as Button, ae as ButtonGroup, Y as ButtonSizes, X as ButtonVariants, _t as CTABanner, vt as CTABannerBackgroundColors, xt as CTAForm, Et as Card, Dt as CardBackgroundColors, Ot as CardCTAVariants, kt as CardIconColors, At as CardLabelVariants, It as CardSkewEffect, jt as CardTokenPositions, Mt as CardVariants, Ye as Checkbox, it as CheckboxGroup, te as ColorModesEnum, mt as ComparisonTable, Xe as DEFAULT_TEXTAREA_COLS, Ze as DEFAULT_TEXTAREA_RESIZE, Qe as DEFAULT_TEXTAREA_ROWS, Xt as EyebrowBanner, Zt as EyebrowBannerIconColors, Qt as EyebrowBannerLabelColors, M as EyebrowText, N as EyebrowTextVariants, qe as FAQ, Je as FAQGroup, bn as Footnotes, xn as FootnotesItemTags, Sn as FootnotesTags, rt as FormControl, Cn as FrostedGlassVFX, wn as FrostedGlassVFXIntensity, t as Grid, I as Heading, L as HeadingFontVariants, R as HeadingLetterSpacing, z as HeadingSizes, B as HeadingStretch, V as HeadingTags, H as HeadingWeights, ee as Hero, an as IDE, on as IDEDefaultIconMap, sn as IDEFileExtensions, Ce as Icon, K as Image, q as ImageBorderRadiusOptions, Re as InlineLink, fe as Label, pe as LabelColors, me as LabelSizes, ce as Link, le as LinkArrowDirections, ue as LinkSizes, de as LinkVariants, qt as LogoSuite, Ie as MediaPlaylist, St as MinimalFooter, bt as OrderedList, Fe as Pagination, Ct as Pillar, en as PricingOptions, Wt as Prose, nt as Radio, at as RadioGroup, _e as River, oe as RiverAccordion, se as RiverAccordionVariants, xe as RiverBreakout, Ne as RiverBreakoutTabs, Se as RiverBreakoutVariants, Pe as RiverStoryScroll, fn as Section, pn as SectionBackgroundColors, Lt as SectionIntro, En as SectionIntroStacked, Dn as SectionIntroStackedVariants, mn as SectionPaddingVariants, tt as Select, c as Stack, l as StackAlignItemVariants, u as StackDirectionVariants, d as StackFlexWrapVariants, f as StackJustifyContentVariants, p as StackSpacingVariants, hn as Statistic, gn as StatisticSizes, _n as StatisticSpacingValues, tn as SubNav, nn as SubNavSubMenuVariants, Le as SubdomainNavBar, On as Tabs, lt as Testimonial, ut as TestimonialQuoteMarkColors, dt as TestimonialVariants, S as Text, P as TextCursorAnimation, C as TextFontVariants, et as TextInput, s as TextRevealAnimation, w as TextSizes, T as TextTags, E as TextVariants, D as TextWeights, $e as Textarea, ne as ThemeContext, re as ThemeProvider, kn as Tiles, Jt as Timeline, ze as Token, Be as TokenVariants, un as Tooltip, dn as TooltipContext, yt as UnorderedList, Kt as VideoPlayer, Z as _Button, ht as _ComparisonTable, e as _GLOBAL_STYLES, Ht as actionMenuOverlaySides, U as classMap, Q as defaultButtonSize, $ as defaultButtonVariant, Nt as defaultCardCTAVariant, Pt as defaultCardIconColor, Ft as defaultCardLabelVariant, $t as defaultEyebrowBannerIconColor, O as defaultFontVariant, Tn as defaultFrostedGlassVFXIntensity, W as defaultHeadingFont, G as defaultHeadingTag, we as defaultIconColor, Te as defaultIconSize, he as defaultLabelColor, ge as defaultLabelSize, wt as defaultPillarIconColor, Tt as defaultPillarIconSize, ft as defaultQuoteMarkColor, ve as defaultRiverAlign, ye as defaultRiverImageTextRatio, be as defaultRiverVariant, m as defaultStackDirection, h as defaultStackSpacing, pt as defaultTestimonialVariant, k as defaultTextSize, A as defaultTextTag, j as defaultTextVariant, Ve as defaultTokenVariant, Ee as iconColors, De as iconSizeMap, Oe as iconSizes, ke as namedIconSizes, Ae as numericIconSizes, F as testIds, Ut as useActionMenuContext, o as useAnimation, rn as useSubNavContext, ie as useTheme, Gt as useVideo, Me as useWindowSize };

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes-YId8eSZQ.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ :root,[data-color-mode=light]{--brand-MediaPlaylist-bgColor:linear-gradient(180deg, #f2f5f380 0%, #f2f5f300 100%), var(--brand-color-canvas-default)}[data-color-mode=dark]{--brand-MediaPlaylist-bgColor:linear-gradient(180deg, var(--base-color-scale-gray-8) 0%, var(--base-color-scale-black-0) 100%), var(--brand-color-canvas-default)}

package/esm/recipes/Flexsuite/Details/FlexSuiteAIDetailsPlaylist/FlexSuiteAIDetailsPlaylist.content.d.ts ADDED Viewed

@@ -0,0 +1,49 @@
+type FlexSuiteAIDetailsPlaylistCardContent = {
+    tag: string;
+    heading: string;
+    description: string;
+};
+type FlexSuiteAIDetailsPlaylistVideoContent = {
+    id: string;
+    title: string;
+    duration: string;
+    summary: string;
+};
+type FlexSuiteAIDetailsPlaylistSectionContent = {
+    heading: string;
+    playlistHeading: string;
+    videos: FlexSuiteAIDetailsPlaylistVideoContent[];
+};
+export type FlexSuiteAIDetailsPlaylistContent = {
+    common: {
+        learnMore: string;
+    };
+    subNav: {
+        heading: string;
+        links: string[];
+    };
+    hero: {
+        headingPrefix: string;
+        headingEmphasis: string;
+        description: string;
+        primaryAction: string;
+        secondaryText: string;
+        secondaryLinkText: string;
+    };
+    playlists: [FlexSuiteAIDetailsPlaylistSectionContent, FlexSuiteAIDetailsPlaylistSectionContent];
+    resources: {
+        heading: string;
+        cards: FlexSuiteAIDetailsPlaylistCardContent[];
+    };
+    cta: {
+        headingPrefix: string;
+        headingEmphasis: string;
+        description: string;
+        primaryAction: string;
+    };
+};
+export declare const defaultFlexSuiteAIDetailsPlaylistContent: FlexSuiteAIDetailsPlaylistContent;
+type Translate = (key: string) => string;
+export declare function getLocalizedFlexSuiteAIDetailsPlaylistContent(t: Translate): FlexSuiteAIDetailsPlaylistContent;
+export {};
+//# sourceMappingURL=FlexSuiteAIDetailsPlaylist.content.d.ts.map