@primer/react-brand 0.68.0-rc.59bbed40 → 0.68.0-rc.5bd56cbb

package/esm/SubdomainNavBar/SubdomainNavBar.js

@@ -0,0 +1,397 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { useId as t } from "../hooks/useId.js";
+import { Text as n } from "../Text/Text.js";
+import { ChevronLeftIcon as r, LinkExternalIcon as i, MarkGithubIcon as a, SearchIcon as o, XIcon as s } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { Button as c } from "../Button/Button.js";
+import { useWindowSize as l } from "../hooks/useWindowSize.js";
+import { useOnClickOutside as u } from "../hooks/useOnClickOutside.js";
+import d from "./SubdomainNavBar.module.js";
+import { useKeyboardEscape as f } from "../hooks/useKeyboardEscape.js";
+import { NavigationVisbilityObserver as p } from "./NavigationVisbilityObserver.js";
+import { useFocusTrap as m } from "../hooks/useFocusTrap.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/subdomain-nav-bar/colors-with-modes-ehJCoExh.css';/* empty css                                                                                                               */
+import { TextInput as h } from "../forms/TextInput/TextInput.js";
+import { FormControl as g } from "../forms/FormControl/FormControl.js";
+import _, { forwardRef as v, useCallback as y, useEffect as b, useMemo as x, useRef as S, useState as C } from "react";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+//#region src/SubdomainNavBar/SubdomainNavBar.tsx
+var D = {
+	root: "SubdomainNavBar",
+	get innerContainer() {
+		return `${this.root}-inner-container`;
+	},
+	get menuButton() {
+		return `${this.root}-menuButton`;
+	},
+	get menuLinks() {
+		return `${this.root}-menuLinks`;
+	},
+	get liveRegion() {
+		return `${this.root}-search-live-region`;
+	}
+};
+function O({ children: i, className: o, fixed: s = !0, fullWidth: u = !1, logoHref: h = "https://github.com", title: g, titleHref: v = "/", onNarrowMenuToggle: O, ...N }) {
+	let [P, F] = C(!0), [I, L] = C(!1), { isSmall: R, isMedium: z } = l(), [B, V] = C(!1), H = S(null), U = t("start-of-content"), W = () => {
+		let e = !P;
+		F(e), O?.(!e);
+	}, G = () => L(!I), K = S(null);
+	b(() => {
+		let e = document.querySelector("main");
+		e && (e.id = e.id || U, H.current = e);
+	}, [U]), m({
+		containerRef: K,
+		restoreFocusOnCleanUp: !0,
+		disabled: P
+	}), f(() => {
+		F(!0), O?.(!1);
+	}), b(() => {
+		z && (F(!0), O?.(!1));
+	}, [
+		z,
+		P,
+		O
+	]), b(() => {
+		let e = P ? "auto" : "hidden";
+		document.body.style.overflow = e;
+	}, [P]);
+	let q = y(() => V(!0), []), J = y(() => V(!1), []), Y = x(() => _.Children.toArray(i).filter((e) => _.isValidElement(e) && typeof e.type != "string" && e.type === k), []).length > 0, X = x(() => _.Children.toArray(i).map((e, t) => {
+		if (_.isValidElement(e) && e.type === k) {
+			let n = typeof e.props.children == "string" ? e.props.children : `${t}`;
+			return _.cloneElement(e, {
+				"data-navitemid": n,
+				href: e.props.href,
+				children: e.props.children,
+				style: { "--animation-order": t }
+			});
+		}
+		return null;
+	}).filter(Boolean), [i]), Z = x(() => {
+		let e = _.Children.toArray(i).find((e) => _.isValidElement(e) && e.type === j), t = _.Children.toArray(i).find((e) => _.isValidElement(e) && e.type === M);
+		return !!e && !!t;
+	}, [i]);
+	return /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ E("div", {
+		className: e(d["SubdomainNavBar-outer-container"], s && d["SubdomainNavBar-outer-container--fixed"], Z && d["SubdomainNavBar-outer-container--has-actions"]),
+		children: [/* @__PURE__ */ T(c, {
+			as: "a",
+			href: `#${H.current?.id || U}`,
+			variant: "primary",
+			className: e(d["SubdomainNavBar-skip-to-content"], !B && "visually-hidden"),
+			onFocus: q,
+			onBlur: J,
+			children: "Skip to content"
+		}), /* @__PURE__ */ T("header", {
+			className: e(d.SubdomainNavBar, o),
+			"data-testid": D.root,
+			...N,
+			children: /* @__PURE__ */ E("div", {
+				ref: K,
+				className: e(d["SubdomainNavBar-inner-container"], I && d["SubdomainNavBar-inner-container--search-open"], !u && d["SubdomainNavBar-inner-container--centered"]),
+				"data-testid": D.innerContainer,
+				children: [
+					/* @__PURE__ */ T("nav", {
+						"aria-label": "Header logo and title",
+						children: /* @__PURE__ */ E("ol", {
+							className: d["SubdomainNavBar-title-area"],
+							children: [/* @__PURE__ */ T("li", { children: /* @__PURE__ */ E("a", {
+								href: h,
+								"aria-label": "Github Home",
+								className: d["SubdomainNavBar-logo-mark"],
+								children: [/* @__PURE__ */ T("span", {
+									className: e(d["SubdomainNavBar-back-arrow"]),
+									children: /* @__PURE__ */ T(r, {
+										fill: "currentColor",
+										size: 24
+									})
+								}), /* @__PURE__ */ T(a, {
+									fill: "currentColor",
+									size: 24
+								})]
+							}) }), g && R && /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T("li", {
+								role: "separator",
+								className: d["SubdomainNavBar-title-separator"],
+								"aria-hidden": !0,
+								children: "/"
+							}), /* @__PURE__ */ T("li", { children: /* @__PURE__ */ T("a", {
+								href: v,
+								"aria-label": `${g} home`,
+								className: e(d["SubdomainNavBar-title"]),
+								children: /* @__PURE__ */ T(n, {
+									size: "400",
+									weight: "medium",
+									children: g
+								})
+							}) })] })]
+						})
+					}),
+					Y && /* @__PURE__ */ T("nav", {
+						id: "menu-navigation",
+						"aria-label": g,
+						className: d["SubdomainNavBar-primary-nav"],
+						"data-testid": D.menuLinks,
+						children: /* @__PURE__ */ T(p, {
+							className: e(d["SubdomainNavBar-primary-nav-list--invisible"]),
+							children: X
+						})
+					}),
+					/* @__PURE__ */ E("div", {
+						className: e(d["SubdomainNavBar-secondary-nav"]),
+						children: [
+							_.Children.toArray(i).map((e) => _.isValidElement(e) && e.type === A ? _.cloneElement(e, {
+								active: I,
+								handlerFn: G,
+								title: g
+							}) : null).filter(Boolean),
+							Y && /* @__PURE__ */ E("button", {
+								"aria-expanded": !P,
+								"aria-label": "Menu",
+								"aria-controls": "menu-navigation",
+								"aria-haspopup": "true",
+								className: e(d["SubdomainNavBar-menu-button"], d["SubdomainNavBar-mobile-menu-button"], !P && d["SubdomainNavBar-menu-button--close"]),
+								"data-testid": D.menuButton,
+								onClick: W,
+								children: [
+									/* @__PURE__ */ T("div", { className: e(d["SubdomainNavBar-menu-button-bar"]) }),
+									/* @__PURE__ */ T("div", { className: e(d["SubdomainNavBar-menu-button-bar"]) }),
+									/* @__PURE__ */ T("div", { className: e(d["SubdomainNavBar-menu-button-bar"]) })
+								]
+							}),
+							z && /* @__PURE__ */ T("div", {
+								className: e(d["SubdomainNavBar-button-area"], d["SubdomainNavBar-button-area--visible"]),
+								children: /* @__PURE__ */ T("div", {
+									className: d["SubdomainNavBar-button-area-inner"],
+									children: _.Children.toArray(i).map((e) => _.isValidElement(e) && (e.type === j || e.type === M) ? e : null).filter(Boolean)
+								})
+							}),
+							!z && /* @__PURE__ */ E("div", {
+								className: e(d["SubdomainNavBar-menu-wrapper"], P && d["SubdomainNavBar-menu-wrapper--close"]),
+								children: [/* @__PURE__ */ E("div", { children: [g && v && /* @__PURE__ */ T(n, {
+									as: "p",
+									children: /* @__PURE__ */ T("a", {
+										href: v,
+										"aria-label": `${g} home`,
+										className: e(d["SubdomainNavBar-link"], d["SubdomainNavBar-link--title"]),
+										children: g
+									})
+								}), Y && !P && /* @__PURE__ */ T(p, {
+									className: e(d["SubdomainNavBar-primary-nav-list--visible"]),
+									children: X
+								})] }), /* @__PURE__ */ T("div", {
+									className: e(d["SubdomainNavBar-button-area"], d["SubdomainNavBar-button-area--visible"]),
+									children: /* @__PURE__ */ T("div", {
+										className: d["SubdomainNavBar-button-area-inner"],
+										children: _.Children.toArray(i).map((e) => _.isValidElement(e) && (e.type === j || e.type === M) ? e : null).filter(Boolean)
+									})
+								})]
+							})
+						]
+					})
+				]
+			})
+		})]
+	}), !H.current && /* @__PURE__ */ T("div", {
+		id: `${U}`,
+		tabIndex: -1
+	})] });
+}
+function k({ href: t, className: n, children: r, isExternal: a, ...o }) {
+	return /* @__PURE__ */ T("li", {
+		className: e(d["SubdomainNavBar-primary-nav-list-item"], n),
+		...o,
+		children: /* @__PURE__ */ E("a", {
+			href: t,
+			className: d["SubdomainNavBar-link"],
+			children: [/* @__PURE__ */ T("span", {
+				className: d["SubdomainNavBar-link-text"],
+				children: r
+			}), a && /* @__PURE__ */ T(i, {
+				size: 16,
+				"aria-label": "External link"
+			})]
+		})
+	});
+}
+var A = v(({ active: t, title: r, searchResults: i, searchTerm: a, handlerFn: c, onSubmit: l, onChange: p }, _) => {
+	let v = S(null);
+	m({
+		containerRef: v,
+		restoreFocusOnCleanUp: !0,
+		disabled: !t
+	}), u(v, c);
+	let [x, O] = C(-1), [k, A] = C(), [j, M] = C(!1), N = y((e) => {
+		c && c(e), O(-1);
+	}, [c]);
+	u(v, N), f(() => {
+		if (!k && t) return N(), !1;
+		A(!1), O(-1);
+	});
+	let P = y((e) => {
+		let t = [
+			"ArrowDown",
+			"ArrowUp",
+			"Escape",
+			"Enter"
+		], n = x, r = i ? i.length : 0, a = v.current, o;
+		if (!t.includes(e.key) || e.key === "Enter" && x === -1 || !a) return !1;
+		e.preventDefault(), e.key === "ArrowDown" ? (o = n < r - 1 ? n + 1 : -1, O(o)) : e.key === "ArrowUp" && (o = n === -1 ? r - 1 : n - 1, O(o)), ["ArrowDown", "ArrowUp"].includes(e.key) && a.querySelector(`#subdomainnavbar-search-result-${o}`)?.scrollIntoView(), e.key === "Enter" && a.querySelector(`#subdomainnavbar-search-result-${x} a`).click();
+	}, [i, x]), F = y(() => {
+		M(!0), setTimeout(() => {
+			t && M(!1);
+		}, 200);
+	}, [t]);
+	return b(() => {
+		A(!!(i && i.length)), F();
+	}, [
+		i,
+		a,
+		F
+	]), /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T("div", {
+		className: e(d["SubdomainNavBar-search-trigger"]),
+		children: /* @__PURE__ */ T("button", {
+			"aria-label": "Toggle search bar",
+			className: d["SubdomainNavBar-search-button"],
+			onClick: c,
+			"data-testid": "toggle-search",
+			children: /* @__PURE__ */ T(o, { "aria-label": "Search icon" })
+		})
+	}), t && /* @__PURE__ */ E("div", {
+		ref: v,
+		role: "dialog",
+		"aria-label": `Search ${r}`,
+		"aria-modal": "true",
+		tabIndex: -1,
+		className: e(d["SubdomainNavBar-search-dialog"]),
+		children: [/* @__PURE__ */ E("div", {
+			className: e(d["SubdomainNavBar-search-dialog-control-area"]),
+			children: [/* @__PURE__ */ T("form", {
+				className: e(d["SubdomainNavBar-search-form"]),
+				onSubmit: l,
+				role: "search",
+				children: /* @__PURE__ */ E(g, {
+					fullWidth: !0,
+					size: "medium",
+					children: [/* @__PURE__ */ T(g.Label, {
+						visuallyHidden: !0,
+						children: "Search"
+					}), /* @__PURE__ */ T(h, {
+						ref: _,
+						className: e(d["SubdomainNavBar-search-text-input"]),
+						name: "search",
+						role: "combobox",
+						"aria-expanded": k,
+						"aria-controls": "listbox-search-results",
+						placeholder: `Search ${r}`,
+						onChange: p,
+						defaultValue: a,
+						invisible: !0,
+						leadingVisual: /* @__PURE__ */ T(o, { size: 16 }),
+						"aria-activedescendant": x === -1 ? void 0 : `subdomainnavbar-search-result-${x}`,
+						onKeyDown: P
+					})]
+				})
+			}), /* @__PURE__ */ T("button", {
+				"aria-label": "Close",
+				className: e(d["SubdomainNavBar-menu-button"], d["SubdomainNavBar-menu-button--close"]),
+				onClick: N,
+				children: /* @__PURE__ */ T(s, { size: 24 })
+			})]
+		}), /* @__PURE__ */ E("div", {
+			id: "listbox-search-results",
+			children: [k && /* @__PURE__ */ E("div", {
+				className: e(d["SubdomainNavBar-search-results-container"]),
+				children: [/* @__PURE__ */ E(n, {
+					id: "subdomainnavbar-search-results-heading",
+					className: d["SubdomainNavBar-search-results-heading"],
+					children: [
+						"Results for “",
+						a,
+						"”"
+					]
+				}), /* @__PURE__ */ T("ul", {
+					role: "listbox",
+					tabIndex: 0,
+					"aria-labelledby": "subdomainnavbar-search-results-heading",
+					className: e(d["SubdomainNavBar-search-results"]),
+					children: i?.map((e, t) => /* @__PURE__ */ E("li", {
+						id: `subdomainnavbar-search-result-${t}`,
+						className: d["SubdomainNavBar-search-result-item"],
+						role: "option",
+						"aria-selected": t === x,
+						children: [
+							/* @__PURE__ */ T("div", {
+								className: d["SubdomainNavBar-search-result-item-container"],
+								children: /* @__PURE__ */ T("a", {
+									href: e.url,
+									children: e.title
+								})
+							}),
+							/* @__PURE__ */ T(n, {
+								as: "p",
+								size: "200",
+								id: `subdomainnavbar-search-result-item-desc${t}`,
+								className: d["SubdomainNavBar-search-result-item-desc"],
+								children: e.description
+							}),
+							/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(n, {
+								size: "100",
+								className: d["SubdomainNavBar-search-result-item-desc"],
+								children: e.date
+							}), e.category && /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ E(n, {
+								size: "100",
+								className: d["SubdomainNavBar-search-result-item-desc"],
+								children: [
+									" ",
+									"•",
+									" "
+								]
+							}), /* @__PURE__ */ T(n, {
+								size: "100",
+								className: d["SubdomainNavBar-search-result-item-desc"],
+								children: e.category
+							})] })] })
+						]
+					}, `${e.title}-${t}`))
+				})]
+			}), /* @__PURE__ */ E("div", {
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				"data-testid": D.liveRegion,
+				className: "visually-hidden",
+				children: [`${i?.length} suggestions.`, j && /* @__PURE__ */ T("span", { children: "\xA0" })]
+			})]
+		})]
+	})] });
+});
+function j({ children: t, href: n, ...r }) {
+	return /* @__PURE__ */ T(c, {
+		as: "a",
+		href: n,
+		className: e(d["SubdomainNavBar-cta-button"]),
+		variant: "primary",
+		hasArrow: !1,
+		size: "small",
+		...r,
+		children: t
+	});
+}
+function M({ children: t, href: n, ...r }) {
+	return /* @__PURE__ */ T(c, {
+		as: "a",
+		href: n,
+		className: e(d["SubdomainNavBar-cta-button"], d["SubdomainNavBar-cta-button--secondary"]),
+		hasArrow: !1,
+		size: "small",
+		...r,
+		children: t
+	});
+}
+var N = Object.assign(O, {
+	Link: k,
+	Search: A,
+	PrimaryAction: j,
+	SecondaryAction: M,
+	testIds: D
+});
+//#endregion
+export { N as SubdomainNavBar };
+
+//# sourceMappingURL=SubdomainNavBar.js.map

package/esm/SubdomainNavBar/SubdomainNavBar.js.map

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

package/esm/SubdomainNavBar/SubdomainNavBar.module-Rf4qEDka.css

@@ -0,0 +1 @@
+.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar___fdyTJ{z-index:90;background:var(--brand-SubdomainNavBar-canvas-default);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default), border-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);border-bottom:1px solid #0000001a;height:75px;font-weight:550;position:relative}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-outer-container___IgUR_{z-index:90}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-outer-container___IgUR_:not(.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-outer-container--fixed___MRCMj){position:relative}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-outer-container--fixed___MRCMj{position:fixed;top:0;left:0;right:0}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-inner-container___AG_fq{padding:4px 28px;display:flex}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-inner-container--centered___XNZiG{max-width:1280px;margin:0 auto}@media screen and (width>=48rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-inner-container___AG_fq{padding:4px 32px}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-inner-container--search-open___FzHaX{animation:.15s Primer_Brand__SubdomainNavBar-module__fade-out___N4ZdP}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-title-area___nL2Uc{align-items:center;gap:var(--base-size-8);max-width:340px;color:var(--brand-color-text-default);padding:0;padding:var(--base-size-16) 0;margin:0;list-style-type:none;display:inline-flex}@media screen and (width>=63.25rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-title-area___nL2Uc{gap:var(--base-size-16)}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-logo-mark____d4o_{color:var(--brand-color-text-default);position:relative}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-back-arrow___XrY4k{opacity:0;transition:opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast) ease;color:var(--brand-color-text-muted);position:absolute;left:-27px;transform:translate(5px)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-logo-mark____d4o_:hover .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-back-arrow___XrY4k{opacity:1;transform:translate(0)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-title-separator___LZ_qq{color:var(--brand-color-text-muted);font-weight:var(--base-text-weight-normal);font-size:var(--base-size-32);line-height:29px}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-logo-mark____d4o_ svg{width:32px;height:32px}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-title___t_fVh{line-height:var(--base-size-32);padding-right:var(--base-size-16);white-space:nowrap;-webkit-text-decoration:none;text-decoration:none;position:relative;top:1px}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-title___t_fVh:hover{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav___jGodL{align-items:center;margin:0;padding:0;list-style-type:none;display:inline-flex}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___G_T3a{list-style-type:none}@media screen and (width<=767px){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___G_T3a,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list--invisible___x6OZ_{display:none}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list--visible___WzNtG{margin:0;padding:0;display:block}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-wrapper___XgFWC{z-index:2;background-color:var(--brand-color-canvas-default);width:100vw;height:calc(100vh - 75px);animation:.5s Primer_Brand__SubdomainNavBar-module__fade-in-down___OOzma;animation-timing-function:var(--brand-animation-easing-default);flex-direction:column;justify-content:space-between;display:flex;position:absolute;inset:75px 0 0;overflow-y:auto}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-wrapper--close___1RqhN{display:none}}@media screen and (width>=48rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___G_T3a{align-items:center;width:100%;max-width:150px;margin:0 24px 0 0;padding:0;display:flex}}@media screen and (width>=768px){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___G_T3a{max-width:100px}}@media screen and (width>=850px){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___G_T3a{max-width:200px}}@media screen and (width>=1024px){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___G_T3a{max-width:300px}}@media screen and (width>=1280px){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___G_T3a{max-width:520px;margin-right:80px}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-outer-container--has-actions___nygz4 .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___G_T3a{max-width:465px}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list-item___v4aye{white-space:nowrap}@media screen and (width<=767px){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list-item___v4aye{animation-name:Primer_Brand__SubdomainNavBar-module__fade-in-down-staggered___thp2V;animation-duration:.5s;animation-delay:calc(var(--animation-order) * 80ms);animation-fill-mode:both;animation-timing-function:var(--brand-animation-easing-default)}}@media screen and (width>=48rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list-item--visible___3J0tI{visibility:visible;opacity:1;order:0}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list-item--invisible___J07zI{visibility:hidden;pointer-events:none;order:100}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list-item--overflow___mbCpF{order:99;position:relative;right:0}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF{align-items:center;gap:var(--base-size-8);color:var(--brand-color-text-default);font-family:var(--brand-heading-fontFamily);font-weight:var(--base-text-weight-normal);font-size:var(--base-size-20);line-height:var(--base-size-20);padding:var(--base-size-8) var(--base-size-16) var(--base-size-16) var(--base-size-28);flex-direction:row;-webkit-text-decoration:none;text-decoration:none;display:flex;position:relative}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF:hover{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link-text___FIOYx{position:relative}@media screen and (width<=767px){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF:first-of-type{padding-top:var(--base-size-24)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link--title___o6Xts{font-weight:var(--base-text-weight-medium)}}@media screen and (width>=48rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF{font-family:var(--brand-heading-fontFamily);font-weight:var(--base-text-weight-normal);font-size:var(--base-size-16);line-height:var(--base-size-16);padding:var(--base-size-16) var(--base-size-16)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link-text___FIOYx:after{content:"";background-color:var(--brand-SubdomainNavBar-border-nav-default);opacity:0;width:100%;height:2px;transition:opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast);transform-origin:50%;position:absolute;bottom:-6px;left:0;transform:scale(0)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF:hover .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link-text___FIOYx:after,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF:focus .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link-text___FIOYx:after{opacity:1;transform:scale(.75)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF:active .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link-text___FIOYx:after{background-color:var(--brand-SubdomainNavBar-border-nav-pressed);transform:scale(.75)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-overflow-menu-item___gsrhh .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF{transition:background-color var(--brand-animation-easing-default) .25s;background-color:var(--brand-SubdomainNavBar-canvas-overflow-default);color:var(--brand-SubdomainNavBar-fg-overflow-default)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-overflow-menu-item___gsrhh .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link-text___FIOYx:after{display:none}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-overflow-menu-item___gsrhh .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF:hover{background-color:var(--brand-SubdomainNavBar-canvas-overflow-hover)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-overflow-menu-item___gsrhh .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF:focus,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-overflow-menu-item___gsrhh .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF:focus-visible{box-shadow:inset 0px 0px 0px 2px var(--brand-color-focus);outline:none}}@media screen and (width>=63.25rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF{padding:var(--base-size-16) var(--base-size-24)}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-more-link___2UoCu,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-more-link___2UoCu[aria-expanded=true]:hover:after,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-more-link___2UoCu[aria-expanded=true]:focus:after{display:none}@media screen and (width>=48rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-more-link___2UoCu{cursor:pointer;appearance:none;align-items:center;gap:var(--base-size-4);background-color:#0000;border:none;display:inline-flex}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-overflow-menu___1Fpy3{right:0;top:var(--base-size-48);background-color:var(--base-color-scale-white-0);border-radius:var(--brand-borderRadius-large);animation:.25s Primer_Brand__SubdomainNavBar-module__fade-in-down___OOzma,.25s forwards Primer_Brand__SubdomainNavBar-module__enlarge-shadow___iGPSy;animation-timing-function:var(--brand-animation-easing-default);position:absolute;overflow:hidden;box-shadow:0 8px 24px #01040926}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-overflow-menu-list____yMUW{width:max-content;margin:0;padding:0;list-style-type:none;display:grid}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-secondary-nav___cg18b{align-items:center;min-width:0;margin-left:auto;display:flex}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-trigger___luJC1{align-items:center;display:flex}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-button___v1X9R,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button___rah9_{cursor:pointer;appearance:none;border:var(--brand-borderWidth-thick) solid transparent;color:var(--brand-color-text-default);width:calc(48px - var(--brand-borderWidth-thick));height:calc(48px - var(--brand-borderWidth-thick));transition:border .25s var(--brand-animation-easing-default), box-shadow .25s ease;border-radius:var(--brand-borderRadius-medium);background-color:#0000;justify-content:center;align-items:center;display:flex;box-shadow:0 0 0 2px #0000}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-button___v1X9R svg,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button___rah9_ svg{width:24px;height:24px}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button___rah9_{align-self:center;display:inline-block}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button-bar___XSuBz{background-color:var(--brand-color-text-default);width:22px;height:2px;margin:var(--base-size-4) auto;border-radius:var(--brand-borderRadius-large);display:block}@media (prefers-reduced-motion:no-preference){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button-bar___XSuBz{transition-timing-function:var(--brand-animation-easing-default);transition-property:opacity,transform;transition-duration:.5s}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button-bar___XSuBz:first-of-type{transform-origin:100% 100%}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button-bar___XSuBz:nth-of-type(3){transform-origin:100% 0}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button--close___ofAoR .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button-bar___XSuBz:first-of-type{transform:rotate(-45deg)translateY(-3px)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button--close___ofAoR .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button-bar___XSuBz:nth-of-type(2){opacity:0;transform:scale(0)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button--close___ofAoR .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button-bar___XSuBz:nth-of-type(3){transform:rotate(45deg)translateY(3px)}@media screen and (width>=48rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-button___v1X9R:hover,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button___rah9_:hover{border:var(--brand-borderWidth-thick) solid var(--brand-SubdomainNavBar-border-button-hover)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-button___v1X9R:active,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button___rah9_:active{box-shadow:0 0 0 1px var(--brand-SubdomainNavBar-border-button-hover)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-mobile-menu-button___von6y{display:none}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-dialog-control-area___pG07_ .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-button___v1X9R,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-dialog-control-area___pG07_ .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button___rah9_{width:48px;display:inline-flex}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-button___v1X9R{margin:0 var(--base-size-16) 0 auto}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-button-area___8f5K5{gap:var(--base-size-16);align-items:center;min-width:0;display:inline-flex}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-button-area-inner___UBvrS{gap:var(--base-size-8);min-width:0;display:flex}@media screen and (width<=48rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-button-area___8f5K5{display:none}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-button-area--visible___ryXWp{z-index:99;width:100%;height:auto;animation-name:Primer_Brand__SubdomainNavBar-module__fade-in-down-staggered___thp2V;animation-duration:.5s;animation-delay:.8s;animation-fill-mode:both;animation-timing-function:var(--brand-animation-easing-default);display:flex;left:0}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-inner-container--search-open___FzHaX .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-button-area--visible___ryXWp{display:none}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-button-area-inner___UBvrS{flex-direction:column;width:100%;min-width:0;margin:24px}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-cta-button___12YEw{white-space:nowrap}@media screen and (width>=1024px){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-cta-button--secondary___yseqR{display:inline-flex}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-form___gg9BC{width:100%;display:flex}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-dialog___b9d4h{z-index:99;position:absolute}@media screen and (width<=767px){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-dialog___b9d4h{background:var(--brand-SubdomainNavBar-canvas-search);-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);width:100vw;height:100vh;animation:Primer_Brand__SubdomainNavBar-module__fade-in-down___OOzma var(--brand-animation-duration-fast);animation-timing-function:var(--brand-animation-easing-default);top:0;left:0;right:0}}@media screen and (width>=48rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-dialog___b9d4h{background-color:var(--brand-SubdomainNavBar-canvas-search);position:absolute;inset:0 0 1px}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-dialog___b9d4h .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-trigger___luJC1 .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-button___v1X9R{margin-right:0}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-dialog-control-area___pG07_{background:var(--brand-SubdomainNavBar-canvas-default);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);height:74px;padding:var(--base-size-12) var(--base-size-28);align-items:center;gap:var(--base-size-4);animation:.5s Primer_Brand__SubdomainNavBar-module__fade-in-down___OOzma;display:flex}@media screen and (width>=48rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-dialog-control-area___pG07_{max-width:570px;margin:0 auto}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-text-input___3vzlg{border-color:#0000}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-results-container___JOfOM{padding:var(--base-size-24);background-color:var(--base-color-scale-white-0);border-radius:var(--brand-borderRadius-large);width:80%;max-width:570px;height:70vh;max-height:514px;margin:0 auto;animation:.5s Primer_Brand__SubdomainNavBar-module__fade-in-down___OOzma;box-shadow:0 8px 24px #01040926}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-results___h8tWb{padding:0 var(--base-size-24) 0 0;height:90%;margin:0;list-style:none;overflow-y:scroll}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-results-heading___QXRP1{font-weight:var(--brand-heading-weight-600);font-size:var(--base-size-20);line-height:var(--base-size-24);margin-bottom:var(--base-size-20);padding:0 var(--base-size-8);color:var(--base-color-scale-black-0);display:block}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-result-item___YGhFd{padding:var(--base-size-16) var(--base-size-8);border-bottom:1px solid #b7bfc7;border-bottom:solid var(--brand-borderWidth-thin,1px) var(--brand-SubdomainNavBar-search-results-border-default,#b7bfc7)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-result-item___YGhFd[aria-selected=true] a{outline:var(--brand-color-focus) auto var(--brand-borderWidth-thick)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-result-item-container___reflK{letter-spacing:var(--brand-heading-letterSpacing-400);font-size:var(--brand-text-size-400)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-result-item-container___reflK a{color:var(--base-color-scale-black-0);margin:0 0 var(--base-size-12);font-size:var(--base-size-16);font-weight:var(--brand-heading-weight-400);font-family:var(--brand-heading-fontFamily);line-height:var(--brand-text-lineHeight-400);-webkit-text-decoration:none;text-decoration:none;display:block}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-result-item-container___reflK a:hover{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-result-item-desc____KBS3{color:var(--base-color-scale-black-0)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-skip-to-content___bG_Zk{z-index:100;border-radius:0;width:100%;position:absolute;top:75px}@keyframes Primer_Brand__SubdomainNavBar-module__fade-in-down___OOzma{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes Primer_Brand__SubdomainNavBar-module__fade-out___N4ZdP{0%{opacity:1}to{opacity:0}}@keyframes Primer_Brand__SubdomainNavBar-module__enlarge-shadow___iGPSy{0%{scale:.98;box-shadow:0 8px #01040926}to{scale:1;box-shadow:0 8px 24px #01040926}}@keyframes Primer_Brand__SubdomainNavBar-module__fade-in-down-staggered___thp2V{0%{opacity:0;transform:scale(.6)translateY(-8px)}to{opacity:1}}@media (prefers-reduced-motion:reduce){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar___fdyTJ,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar___fdyTJ:before,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar___fdyTJ:after,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar___fdyTJ *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/SubdomainNavBar/SubdomainNavBar.module.js

@@ -0,0 +1,62 @@
+import './SubdomainNavBar.module-Rf4qEDka.css';var e = {
+	SubdomainNavBar: "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar___fdyTJ",
+	"SubdomainNavBar-outer-container": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-outer-container___IgUR_",
+	"SubdomainNavBar-outer-container--fixed": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-outer-container--fixed___MRCMj",
+	"SubdomainNavBar-inner-container": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-inner-container___AG_fq",
+	"SubdomainNavBar-inner-container--centered": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-inner-container--centered___XNZiG",
+	"SubdomainNavBar-inner-container--search-open": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-inner-container--search-open___FzHaX",
+	"fade-out": "Primer_Brand__SubdomainNavBar-module__fade-out___N4ZdP",
+	"SubdomainNavBar-title-area": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-title-area___nL2Uc",
+	"SubdomainNavBar-logo-mark": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-logo-mark____d4o_",
+	"SubdomainNavBar-back-arrow": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-back-arrow___XrY4k",
+	"SubdomainNavBar-title-separator": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-title-separator___LZ_qq",
+	"SubdomainNavBar-title": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-title___t_fVh",
+	"SubdomainNavBar-primary-nav": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav___jGodL",
+	"SubdomainNavBar-primary-nav-list": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___G_T3a",
+	"SubdomainNavBar-primary-nav-list--invisible": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list--invisible___x6OZ_",
+	"SubdomainNavBar-primary-nav-list--visible": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list--visible___WzNtG",
+	"SubdomainNavBar-menu-wrapper": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-wrapper___XgFWC",
+	"fade-in-down": "Primer_Brand__SubdomainNavBar-module__fade-in-down___OOzma",
+	"SubdomainNavBar-menu-wrapper--close": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-wrapper--close___1RqhN",
+	"SubdomainNavBar-outer-container--has-actions": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-outer-container--has-actions___nygz4",
+	"SubdomainNavBar-primary-nav-list-item": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list-item___v4aye",
+	"fade-in-down-staggered": "Primer_Brand__SubdomainNavBar-module__fade-in-down-staggered___thp2V",
+	"SubdomainNavBar-primary-nav-list-item--visible": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list-item--visible___3J0tI",
+	"SubdomainNavBar-primary-nav-list-item--invisible": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list-item--invisible___J07zI",
+	"SubdomainNavBar-primary-nav-list-item--overflow": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list-item--overflow___mbCpF",
+	"SubdomainNavBar-link": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF",
+	"SubdomainNavBar-link-text": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link-text___FIOYx",
+	"SubdomainNavBar-link--title": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link--title___o6Xts",
+	"SubdomainNavBar-overflow-menu-item": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-overflow-menu-item___gsrhh",
+	"SubdomainNavBar-more-link": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-more-link___2UoCu",
+	"SubdomainNavBar-overflow-menu": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-overflow-menu___1Fpy3",
+	"enlarge-shadow": "Primer_Brand__SubdomainNavBar-module__enlarge-shadow___iGPSy",
+	"SubdomainNavBar-overflow-menu-list": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-overflow-menu-list____yMUW",
+	"SubdomainNavBar-secondary-nav": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-secondary-nav___cg18b",
+	"SubdomainNavBar-search-trigger": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-trigger___luJC1",
+	"SubdomainNavBar-search-button": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-button___v1X9R",
+	"SubdomainNavBar-menu-button": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button___rah9_",
+	"SubdomainNavBar-menu-button-bar": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button-bar___XSuBz",
+	"SubdomainNavBar-menu-button--close": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button--close___ofAoR",
+	"SubdomainNavBar-mobile-menu-button": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-mobile-menu-button___von6y",
+	"SubdomainNavBar-search-dialog-control-area": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-dialog-control-area___pG07_",
+	"SubdomainNavBar-button-area": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-button-area___8f5K5",
+	"SubdomainNavBar-button-area-inner": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-button-area-inner___UBvrS",
+	"SubdomainNavBar-button-area--visible": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-button-area--visible___ryXWp",
+	"SubdomainNavBar-cta-button": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-cta-button___12YEw",
+	"SubdomainNavBar-cta-button--secondary": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-cta-button--secondary___yseqR",
+	"SubdomainNavBar-search-form": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-form___gg9BC",
+	"SubdomainNavBar-search-dialog": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-dialog___b9d4h",
+	"SubdomainNavBar-search-text-input": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-text-input___3vzlg",
+	"SubdomainNavBar-search-results-container": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-results-container___JOfOM",
+	"SubdomainNavBar-search-results": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-results___h8tWb",
+	"SubdomainNavBar-search-results-heading": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-results-heading___QXRP1",
+	"SubdomainNavBar-search-result-item": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-result-item___YGhFd",
+	"SubdomainNavBar-search-result-item-container": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-result-item-container___reflK",
+	"SubdomainNavBar-search-result-item-desc": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-result-item-desc____KBS3",
+	"SubdomainNavBar-skip-to-content": "Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-skip-to-content___bG_Zk"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=SubdomainNavBar.module.js.map

package/esm/SubdomainNavBar/SubdomainNavBar.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubdomainNavBar.module.js","names":[],"sources":["../../src/SubdomainNavBar/SubdomainNavBar.module.css"],"sourcesContent":["/*\n * Main styles for the subdomain navigation bar.\n */\n.SubdomainNavBar {\n  position: relative;\n  z-index: 90;\n  font-weight: 550;\n  background: var(--brand-SubdomainNavBar-canvas-default);\n  -webkit-backdrop-filter: blur(16px);\n  backdrop-filter: blur(16px);\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n    border-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n  height: 75px;\n}\n\n/*\n * Outer container\n */\n.SubdomainNavBar-outer-container {\n  z-index: 90;\n}\n\n.SubdomainNavBar-outer-container:not(.SubdomainNavBar-outer-container--fixed) {\n  position: relative;\n}\n\n.SubdomainNavBar-outer-container--fixed {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n}\n\n/*\n * Inner container\n */\n.SubdomainNavBar-inner-container {\n  display: flex;\n  padding: 4px 28px;\n}\n\n.SubdomainNavBar-inner-container--centered {\n  max-width: 1280px;\n  margin: 0 auto;\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar-inner-container {\n    padding: 4px 32px;\n  }\n}\n\n.SubdomainNavBar-inner-container--search-open {\n  animation: fade-out 150ms;\n}\n\n/*\n * Logo and title area\n */\n.SubdomainNavBar-title-area {\n  display: inline-flex;\n  list-style-type: none;\n  align-items: center;\n  gap: var(--base-size-8);\n  padding: 0;\n  margin: 0;\n  max-width: 340px;\n  color: var(--brand-color-text-default);\n  padding: var(--base-size-16) 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SubdomainNavBar-title-area {\n    gap: var(--base-size-16);\n  }\n}\n\n.SubdomainNavBar-logo-mark {\n  color: var(--brand-color-text-default);\n  position: relative;\n}\n\n.SubdomainNavBar-back-arrow {\n  position: absolute;\n  left: calc(-32px + 5px);\n  opacity: 0;\n  transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast) ease;\n  transform: translateX(5px);\n  color: var(--brand-color-text-muted);\n}\n\n.SubdomainNavBar-logo-mark:hover .SubdomainNavBar-back-arrow {\n  opacity: 1;\n  transform: translateX(0);\n}\n\n.SubdomainNavBar-title-separator {\n  color: var(--brand-color-text-muted);\n  font-weight: var(--base-text-weight-normal);\n  font-size: var(--base-size-32);\n  line-height: 29px;\n}\n\n.SubdomainNavBar-logo-mark svg {\n  width: 32px;\n  height: 32px;\n}\n\n.SubdomainNavBar-title {\n  line-height: var(--base-size-32);\n  text-decoration: none;\n  padding-right: var(--base-size-16);\n  white-space: nowrap;\n  /* Optical alignment with logo */\n  position: relative;\n  top: 1px;\n}\n\n.SubdomainNavBar-title:hover {\n  text-decoration: none;\n}\n\n/*\n * Primary navigation link area\n */\n.SubdomainNavBar-primary-nav {\n  display: inline-flex;\n  list-style-type: none;\n  align-items: center;\n  padding: 0;\n  margin: 0;\n}\n\n.SubdomainNavBar-primary-nav-list {\n  list-style-type: none;\n}\n\n@media screen and (max-width: 767px) {\n  .SubdomainNavBar-primary-nav-list {\n    display: none;\n  }\n\n  .SubdomainNavBar-primary-nav-list--invisible {\n    display: none;\n  }\n\n  .SubdomainNavBar-primary-nav-list--visible {\n    display: block;\n    margin: 0;\n    padding: 0;\n  }\n\n  .SubdomainNavBar-menu-wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    overflow-y: auto;\n    position: absolute;\n    top: 75px;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 2;\n    background-color: var(--brand-color-canvas-default);\n    width: 100vw;\n    height: calc(100vh - 75px);\n    animation: fade-in-down 500ms;\n    animation-timing-function: var(--brand-animation-easing-default);\n  }\n\n  .SubdomainNavBar-menu-wrapper--close {\n    display: none;\n  }\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar-primary-nav-list {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    max-width: 150px;\n    padding: 0;\n    margin: 0 24px 0 0;\n    /* overflow: hidden; */\n  }\n}\n\n@media screen and (min-width: 768px) {\n  .SubdomainNavBar-primary-nav-list {\n    max-width: 100px;\n  }\n}\n\n@media screen and (min-width: 850px) {\n  .SubdomainNavBar-primary-nav-list {\n    max-width: 200px;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .SubdomainNavBar-primary-nav-list {\n    max-width: 300px;\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  .SubdomainNavBar-primary-nav-list {\n    max-width: 520px;\n    margin-right: 80px;\n  }\n\n  .SubdomainNavBar-outer-container--has-actions .SubdomainNavBar-primary-nav-list {\n    max-width: 465px;\n  }\n}\n\n.SubdomainNavBar-primary-nav-list-item {\n  white-space: nowrap;\n}\n\n@media screen and (max-width: 767px) {\n  .SubdomainNavBar-primary-nav-list-item {\n    animation-name: fade-in-down-staggered;\n    animation-duration: 500ms;\n    animation-delay: calc(var(--animation-order) * 80ms);\n    animation-fill-mode: both;\n    animation-timing-function: var(--brand-animation-easing-default);\n  }\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar-primary-nav-list-item--visible {\n    order: 0;\n    visibility: visible;\n    opacity: 1;\n  }\n\n  .SubdomainNavBar-primary-nav-list-item--invisible {\n    order: 100;\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  .SubdomainNavBar-primary-nav-list-item--overflow {\n    order: 99;\n    position: relative;\n    right: 0;\n  }\n}\n\n.SubdomainNavBar-link {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--base-size-8);\n  color: var(--brand-color-text-default);\n  font-family: var(--brand-heading-fontFamily);\n  font-weight: var(--base-text-weight-normal);\n  font-size: var(--base-size-20);\n  line-height: var(--base-size-20);\n  padding: var(--base-size-8) var(--base-size-16) var(--base-size-16) var(--base-size-28);\n  text-decoration: none;\n}\n\n.SubdomainNavBar-link:hover {\n  text-decoration: none;\n}\n\n.SubdomainNavBar-link-text {\n  position: relative;\n}\n\n@media screen and (max-width: 767px) {\n  .SubdomainNavBar-link:first-of-type {\n    padding-top: var(--base-size-24);\n  }\n\n  .SubdomainNavBar-link--title {\n    font-weight: var(--base-text-weight-medium);\n  }\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar-link {\n    font-family: var(--brand-heading-fontFamily);\n    font-weight: var(--base-text-weight-normal);\n    font-size: var(--base-size-16);\n    line-height: var(--base-size-16);\n    padding: var(--base-size-16) var(--base-size-16);\n  }\n\n  .SubdomainNavBar-link-text::after {\n    content: '';\n    position: absolute;\n    bottom: -6px;\n    left: 0;\n    width: 100%;\n    height: 2px;\n    background-color: var(--brand-SubdomainNavBar-border-nav-default);\n    opacity: 0;\n    transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast);\n    transform: scale(0);\n    transform-origin: center;\n  }\n\n  .SubdomainNavBar-link:hover .SubdomainNavBar-link-text::after,\n  .SubdomainNavBar-link:focus .SubdomainNavBar-link-text::after {\n    opacity: 1;\n    transform: scale(0.75);\n  }\n\n  .SubdomainNavBar-link:active .SubdomainNavBar-link-text::after {\n    background-color: var(--brand-SubdomainNavBar-border-nav-pressed);\n    transform: scale(0.75);\n  }\n\n  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link {\n    transition: background-color var(--brand-animation-easing-default) 250ms;\n    background-color: var(--brand-SubdomainNavBar-canvas-overflow-default);\n    color: var(--brand-SubdomainNavBar-fg-overflow-default);\n  }\n\n  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link .SubdomainNavBar-link-text::after {\n    display: none;\n  }\n\n  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:hover {\n    background-color: var(--brand-SubdomainNavBar-canvas-overflow-hover);\n  }\n\n  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,\n  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {\n    box-shadow: inset 0px 0px 0px 2px var(--brand-color-focus);\n    outline: none;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SubdomainNavBar-link {\n    padding: var(--base-size-16) var(--base-size-24);\n  }\n}\n\n.SubdomainNavBar-more-link {\n  display: none;\n}\n\n.SubdomainNavBar-more-link[aria-expanded='true']:hover::after,\n.SubdomainNavBar-more-link[aria-expanded='true']:focus::after {\n  display: none;\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar-more-link {\n    cursor: pointer;\n    appearance: none;\n    border: none;\n    background-color: transparent;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--base-size-4);\n  }\n}\n\n.SubdomainNavBar-overflow-menu {\n  position: absolute;\n  right: 0;\n  top: var(--base-size-48);\n  background-color: var(--base-color-scale-white-0);\n  border-radius: var(--brand-borderRadius-large);\n  animation: fade-in-down 0.25s, enlarge-shadow 250ms forwards;\n  animation-timing-function: var(--brand-animation-easing-default);\n  box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);\n  overflow: hidden;\n}\n\n.SubdomainNavBar-overflow-menu-list {\n  display: grid;\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  width: max-content;\n}\n\n/*\n * Toolbar actions area for search and mobile menu\n */\n\n.SubdomainNavBar-secondary-nav {\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n  min-width: 0;\n}\n.SubdomainNavBar-search-trigger {\n  display: flex;\n  align-items: center;\n}\n\n.SubdomainNavBar-search-button,\n.SubdomainNavBar-menu-button {\n  cursor: pointer;\n  appearance: none;\n  background-color: transparent;\n  border: var(--brand-borderWidth-thick) solid transparent;\n  color: var(--brand-color-text-default);\n  width: calc(48px - var(--brand-borderWidth-thick));\n  height: calc(48px - var(--brand-borderWidth-thick));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border 250ms var(--brand-animation-easing-default), box-shadow 250ms ease;\n  border-radius: var(--brand-borderRadius-medium);\n  box-shadow: 0 0 0 2px transparent;\n}\n\n.SubdomainNavBar-search-button svg,\n.SubdomainNavBar-menu-button svg {\n  width: 24px;\n  height: 24px;\n}\n\n.SubdomainNavBar-menu-button {\n  display: inline-block;\n  align-self: center;\n}\n\n.SubdomainNavBar-menu-button-bar {\n  width: 22px;\n  height: 2px;\n  background-color: var(--brand-color-text-default);\n  margin: var(--base-size-4) auto;\n  border-radius: var(--brand-borderRadius-large);\n  display: block;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .SubdomainNavBar-menu-button-bar {\n    transition-timing-function: var(--brand-animation-easing-default);\n    transition-duration: 500ms;\n    transition-property: opacity, transform;\n  }\n}\n\n.SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n  transform-origin: bottom right;\n}\n\n.SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n  transform-origin: top right;\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n  transform: rotate(-45deg) translateY(-3px);\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(2) {\n  opacity: 0;\n  transform: scale(0);\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n  transform: rotate(45deg) translateY(3px);\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar-search-button:hover,\n  .SubdomainNavBar-menu-button:hover {\n    border: var(--brand-borderWidth-thick) solid var(--brand-SubdomainNavBar-border-button-hover);\n  }\n\n  .SubdomainNavBar-search-button:active,\n  .SubdomainNavBar-menu-button:active {\n    box-shadow: 0 0 0 1px var(--brand-SubdomainNavBar-border-button-hover);\n  }\n\n  .SubdomainNavBar-mobile-menu-button {\n    display: none;\n  }\n\n  .SubdomainNavBar-search-dialog-control-area .SubdomainNavBar-search-button,\n  .SubdomainNavBar-search-dialog-control-area .SubdomainNavBar-menu-button {\n    display: inline-flex;\n    width: 48px;\n  }\n\n  .SubdomainNavBar-search-button {\n    margin: 0 var(--base-size-16) 0 auto;\n  }\n}\n\n.SubdomainNavBar-button-area {\n  display: inline-flex;\n  gap: var(--base-size-16);\n  align-items: center;\n  min-width: 0;\n}\n\n.SubdomainNavBar-button-area-inner {\n  display: flex;\n  gap: var(--base-size-8);\n  min-width: 0;\n}\n\n@media screen and (max-width: 48rem) {\n  .SubdomainNavBar-button-area {\n    display: none;\n  }\n\n  .SubdomainNavBar-button-area--visible {\n    display: flex;\n    left: 0;\n    z-index: 99;\n    width: 100%;\n    height: auto;\n    animation-name: fade-in-down-staggered;\n    animation-duration: 500ms;\n    animation-delay: calc(10 * 80ms);\n    animation-fill-mode: both;\n    animation-timing-function: var(--brand-animation-easing-default);\n  }\n\n  .SubdomainNavBar-inner-container--search-open .SubdomainNavBar-button-area--visible {\n    display: none;\n  }\n\n  .SubdomainNavBar-button-area-inner {\n    width: 100%;\n    flex-direction: column;\n    margin: 24px;\n    min-width: 0;\n  }\n}\n\n.SubdomainNavBar-cta-button {\n  white-space: nowrap;\n}\n\n@media screen and (min-width: 1024px) {\n  .SubdomainNavBar-cta-button--secondary {\n    display: inline-flex;\n  }\n}\n\n/*\n * Search dialog control area\n */\n.SubdomainNavBar-search-form {\n  display: flex;\n  width: 100%;\n}\n\n.SubdomainNavBar-search-dialog {\n  position: absolute;\n  z-index: 99;\n}\n\n@media screen and (max-width: 767px) {\n  .SubdomainNavBar-search-dialog {\n    top: 0;\n    left: 0;\n    right: 0;\n    background: var(--brand-SubdomainNavBar-canvas-search);\n    -webkit-backdrop-filter: blur(100px);\n    backdrop-filter: blur(100px);\n    height: 100vh;\n    width: 100vw;\n    animation: fade-in-down var(--brand-animation-duration-fast);\n    animation-timing-function: var(--brand-animation-easing-default);\n  }\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar-search-dialog {\n    position: absolute;\n    top: 0;\n    bottom: 1px;\n    left: 0;\n    right: 0;\n    background-color: var(--brand-SubdomainNavBar-canvas-search);\n  }\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-trigger .SubdomainNavBar-search-button {\n  margin-right: 0;\n}\n\n.SubdomainNavBar-search-dialog-control-area {\n  height: 74px;\n  background: var(--brand-SubdomainNavBar-canvas-default);\n  -webkit-backdrop-filter: blur(16px);\n  backdrop-filter: blur(16px);\n  padding: var(--base-size-12) var(--base-size-28);\n  display: flex;\n  align-items: center;\n  animation: fade-in-down 500ms;\n  gap: var(--base-size-4);\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar-search-dialog-control-area {\n    max-width: 570px;\n    margin: 0 auto;\n  }\n}\n\n.SubdomainNavBar-search-text-input {\n  border-color: transparent;\n}\n\n.SubdomainNavBar-search-results-container {\n  animation: fade-in-down 500ms;\n  padding: var(--base-size-24);\n  background-color: var(--base-color-scale-white-0);\n  border-radius: var(--brand-borderRadius-large);\n  box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);\n  max-height: 514px;\n  height: 70vh;\n  max-width: 570px;\n  margin: 0 auto;\n  width: 80%;\n}\n\n.SubdomainNavBar-search-results {\n  overflow-y: scroll;\n  list-style: none;\n  padding: 0 var(--base-size-24) 0 0;\n  margin: 0;\n  height: 90%;\n}\n\n.SubdomainNavBar-search-results-heading {\n  display: block;\n  font-weight: var(--brand-heading-weight-600);\n  font-size: var(--base-size-20);\n  line-height: var(--base-size-24);\n  margin-bottom: var(--base-size-20);\n  padding: 0 var(--base-size-8);\n  color: var(--base-color-scale-black-0);\n}\n\n.SubdomainNavBar-search-result-item {\n  padding: var(--base-size-16) var(--base-size-8);\n  border-bottom: solid var(--brand-borderWidth-thin, 1px)\n    var(--brand-SubdomainNavBar-search-results-border-default, #b7bfc7);\n}\n\n.SubdomainNavBar-search-result-item[aria-selected='true'] a {\n  outline: var(--brand-color-focus) auto var(--brand-borderWidth-thick);\n}\n\n.SubdomainNavBar-search-result-item-container {\n  letter-spacing: var(--brand-heading-letterSpacing-400);\n  font-size: var(--brand-text-size-400);\n}\n\n.SubdomainNavBar-search-result-item-container a {\n  display: block;\n  color: var(--base-color-scale-black-0);\n  text-decoration: none;\n  margin: 0 0 var(--base-size-12);\n  font-size: var(--base-size-16);\n  font-weight: var(--brand-heading-weight-400);\n  font-family: var(--brand-heading-fontFamily);\n  line-height: var(--brand-text-lineHeight-400);\n}\n\n.SubdomainNavBar-search-result-item-container a:hover {\n  text-decoration: none;\n}\n\n.SubdomainNavBar-search-result-item-desc {\n  color: var(--base-color-scale-black-0);\n}\n\n.SubdomainNavBar-skip-to-content {\n  position: absolute;\n  top: 75px;\n  border-radius: 0px;\n  width: 100%;\n  z-index: 100;\n}\n\n/*\n * Reusable animations\n */\n@keyframes fade-in-down {\n  0% {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fade-out {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n\n@keyframes enlarge-shadow {\n  0% {\n    scale: 0.98;\n    box-shadow: 0px 8px 0 rgba(1, 4, 9, 0.15);\n  }\n  100% {\n    scale: 1;\n    box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);\n  }\n}\n\n@keyframes fade-in-down-staggered {\n  0% {\n    opacity: 0;\n    transform: scale(0.6) translateY(-8px);\n  }\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  .SubdomainNavBar,\n  .SubdomainNavBar::before,\n  .SubdomainNavBar::after,\n  .SubdomainNavBar * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/esm/SubdomainNavBar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SubdomainNavBar';
+//# sourceMappingURL=index.d.ts.map

package/esm/SubdomainNavBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SubdomainNavBar/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA"}