@primer/react-brand 0.72.0-rc.0349c28f → 0.72.0-rc.4db5fc89

package/esm/SubdomainNavBar/SubdomainNavBar.js

@@ -1,12 +1,12 @@
 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 { Button as r } from "../Button/Button.js";
+import { useOnClickOutside as i } from "../hooks/useOnClickOutside.js";
+import { useKeyboardEscape as a } from "../hooks/useKeyboardEscape.js";
+import { ChevronLeftIcon as o, LinkExternalIcon as s, MarkGithubIcon as c, SearchIcon as l, XIcon as u } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { useWindowSize as d } from "../hooks/useWindowSize.js";
+import f from "./SubdomainNavBar.module.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                                                                                                               */
@@ -30,8 +30,8 @@ var D = {
 		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 = () => {
+function O({ children: i, className: s, fixed: l = !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 } = d(), [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);
@@ -42,7 +42,7 @@ function O({ children: i, className: o, fixed: s = !0, fullWidth: u = !1, logoHr
 		containerRef: K,
 		restoreFocusOnCleanUp: !0,
 		disabled: P
-	}), f(() => {
+	}), a(() => {
 		F(!0), O?.(!1);
 	}), b(() => {
 		z && (F(!0), O?.(!1));
@@ -70,51 +70,51 @@ function O({ children: i, className: o, fixed: s = !0, fullWidth: u = !1, logoHr
 		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, {
+		className: e(f["SubdomainNavBar-outer-container"], l && f["SubdomainNavBar-outer-container--fixed"], Z && f["SubdomainNavBar-outer-container--has-actions"]),
+		children: [/* @__PURE__ */ T(r, {
 			as: "a",
 			href: `#${H.current?.id || U}`,
 			variant: "primary",
-			className: e(d["SubdomainNavBar-skip-to-content"], !B && "visually-hidden"),
+			className: e(f["SubdomainNavBar-skip-to-content"], !B && "visually-hidden"),
 			onFocus: q,
 			onBlur: J,
 			children: "Skip to content"
 		}), /* @__PURE__ */ T("header", {
-			className: e(d.SubdomainNavBar, o),
+			className: e(f.SubdomainNavBar, s),
 			"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"]),
+				className: e(f["SubdomainNavBar-inner-container"], I && f["SubdomainNavBar-inner-container--search-open"], !u && f["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"],
+							className: f["SubdomainNavBar-title-area"],
 							children: [/* @__PURE__ */ T("li", { children: /* @__PURE__ */ E("a", {
 								href: h,
 								"aria-label": "Github Home",
-								className: d["SubdomainNavBar-logo-mark"],
+								className: f["SubdomainNavBar-logo-mark"],
 								children: [/* @__PURE__ */ T("span", {
-									className: e(d["SubdomainNavBar-back-arrow"]),
-									children: /* @__PURE__ */ T(r, {
+									className: e(f["SubdomainNavBar-back-arrow"]),
+									children: /* @__PURE__ */ T(o, {
 										fill: "currentColor",
 										size: 24
 									})
-								}), /* @__PURE__ */ T(a, {
+								}), /* @__PURE__ */ T(c, {
 									fill: "currentColor",
 									size: 24
 								})]
 							}) }), g && R && /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T("li", {
 								role: "separator",
-								className: d["SubdomainNavBar-title-separator"],
+								className: f["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"]),
+								className: e(f["SubdomainNavBar-title"]),
 								children: /* @__PURE__ */ T(n, {
 									size: "400",
 									weight: "medium",
@@ -126,15 +126,15 @@ function O({ children: i, className: o, fixed: s = !0, fullWidth: u = !1, logoHr
 					Y && /* @__PURE__ */ T("nav", {
 						id: "menu-navigation",
 						"aria-label": g,
-						className: d["SubdomainNavBar-primary-nav"],
+						className: f["SubdomainNavBar-primary-nav"],
 						"data-testid": D.menuLinks,
 						children: /* @__PURE__ */ T(p, {
-							className: e(d["SubdomainNavBar-primary-nav-list--invisible"]),
+							className: e(f["SubdomainNavBar-primary-nav-list--invisible"]),
 							children: X
 						})
 					}),
 					/* @__PURE__ */ E("div", {
-						className: e(d["SubdomainNavBar-secondary-nav"]),
+						className: e(f["SubdomainNavBar-secondary-nav"]),
 						children: [
 							_.Children.toArray(i).map((e) => _.isValidElement(e) && e.type === A ? _.cloneElement(e, {
 								active: I,
@@ -146,39 +146,39 @@ function O({ children: i, className: o, fixed: s = !0, fullWidth: u = !1, logoHr
 								"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"]),
+								className: e(f["SubdomainNavBar-menu-button"], f["SubdomainNavBar-mobile-menu-button"], !P && f["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"]) })
+									/* @__PURE__ */ T("div", { className: e(f["SubdomainNavBar-menu-button-bar"]) }),
+									/* @__PURE__ */ T("div", { className: e(f["SubdomainNavBar-menu-button-bar"]) }),
+									/* @__PURE__ */ T("div", { className: e(f["SubdomainNavBar-menu-button-bar"]) })
 								]
 							}),
 							z && /* @__PURE__ */ T("div", {
-								className: e(d["SubdomainNavBar-button-area"], d["SubdomainNavBar-button-area--visible"]),
+								className: e(f["SubdomainNavBar-button-area"], f["SubdomainNavBar-button-area--visible"]),
 								children: /* @__PURE__ */ T("div", {
-									className: d["SubdomainNavBar-button-area-inner"],
+									className: f["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"]),
+								className: e(f["SubdomainNavBar-menu-wrapper"], P && f["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"]),
+										className: e(f["SubdomainNavBar-link"], f["SubdomainNavBar-link--title"]),
 										children: g
 									})
 								}), Y && !P && /* @__PURE__ */ T(p, {
-									className: e(d["SubdomainNavBar-primary-nav-list--visible"]),
+									className: e(f["SubdomainNavBar-primary-nav-list--visible"]),
 									children: X
 								})] }), /* @__PURE__ */ T("div", {
-									className: e(d["SubdomainNavBar-button-area"], d["SubdomainNavBar-button-area--visible"]),
+									className: e(f["SubdomainNavBar-button-area"], f["SubdomainNavBar-button-area--visible"]),
 									children: /* @__PURE__ */ T("div", {
-										className: d["SubdomainNavBar-button-area-inner"],
+										className: f["SubdomainNavBar-button-area-inner"],
 										children: _.Children.toArray(i).map((e) => _.isValidElement(e) && (e.type === j || e.type === M) ? e : null).filter(Boolean)
 									})
 								})]
@@ -193,34 +193,34 @@ function O({ children: i, className: o, fixed: s = !0, fullWidth: u = !1, logoHr
 		tabIndex: -1
 	})] });
 }
-function k({ href: t, className: n, children: r, isExternal: a, ...o }) {
+function k({ href: t, className: n, children: r, isExternal: i, ...a }) {
 	return /* @__PURE__ */ T("li", {
-		className: e(d["SubdomainNavBar-primary-nav-list-item"], n),
-		...o,
+		className: e(f["SubdomainNavBar-primary-nav-list-item"], n),
+		...a,
 		children: /* @__PURE__ */ E("a", {
 			href: t,
-			className: d["SubdomainNavBar-link"],
+			className: f["SubdomainNavBar-link"],
 			children: [/* @__PURE__ */ T("span", {
-				className: d["SubdomainNavBar-link-text"],
+				className: f["SubdomainNavBar-link-text"],
 				children: r
-			}), a && /* @__PURE__ */ T(i, {
+			}), i && /* @__PURE__ */ T(s, {
 				size: 16,
 				"aria-label": "External link"
 			})]
 		})
 	});
 }
-var A = v(({ active: t, title: r, searchResults: i, searchTerm: a, handlerFn: c, onSubmit: l, onChange: p }, _) => {
+var A = v(({ active: t, title: r, searchResults: o, searchTerm: s, handlerFn: c, onSubmit: d, onChange: p }, _) => {
 	let v = S(null);
 	m({
 		containerRef: v,
 		restoreFocusOnCleanUp: !0,
 		disabled: !t
-	}), u(v, c);
+	}), i(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(() => {
+	i(v, N), a(() => {
 		if (!k && t) return N(), !1;
 		A(!1), O(-1);
 	});
@@ -230,28 +230,28 @@ var A = v(({ active: t, title: r, searchResults: i, searchTerm: a, handlerFn: c,
 			"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(() => {
+		], n = x, r = o ? o.length : 0, i = v.current, a;
+		if (!t.includes(e.key) || e.key === "Enter" && x === -1 || !i) return !1;
+		e.preventDefault(), e.key === "ArrowDown" ? (a = n < r - 1 ? n + 1 : -1, O(a)) : e.key === "ArrowUp" && (a = n === -1 ? r - 1 : n - 1, O(a)), ["ArrowDown", "ArrowUp"].includes(e.key) && i.querySelector(`#subdomainnavbar-search-result-${a}`)?.scrollIntoView(), e.key === "Enter" && i.querySelector(`#subdomainnavbar-search-result-${x} a`).click();
+	}, [o, x]), F = y(() => {
 		M(!0), setTimeout(() => {
 			t && M(!1);
 		}, 200);
 	}, [t]);
 	return b(() => {
-		A(!!(i && i.length)), F();
+		A(!!(o && o.length)), F();
 	}, [
-		i,
-		a,
+		o,
+		s,
 		F
 	]), /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T("div", {
-		className: e(d["SubdomainNavBar-search-trigger"]),
+		className: e(f["SubdomainNavBar-search-trigger"]),
 		children: /* @__PURE__ */ T("button", {
 			"aria-label": "Toggle search bar",
-			className: d["SubdomainNavBar-search-button"],
+			className: f["SubdomainNavBar-search-button"],
 			onClick: c,
 			"data-testid": "toggle-search",
-			children: /* @__PURE__ */ T(o, { "aria-label": "Search icon" })
+			children: /* @__PURE__ */ T(l, { "aria-label": "Search icon" })
 		})
 	}), t && /* @__PURE__ */ E("div", {
 		ref: v,
@@ -259,12 +259,12 @@ var A = v(({ active: t, title: r, searchResults: i, searchTerm: a, handlerFn: c,
 		"aria-label": `Search ${r}`,
 		"aria-modal": "true",
 		tabIndex: -1,
-		className: e(d["SubdomainNavBar-search-dialog"]),
+		className: e(f["SubdomainNavBar-search-dialog"]),
 		children: [/* @__PURE__ */ E("div", {
-			className: e(d["SubdomainNavBar-search-dialog-control-area"]),
+			className: e(f["SubdomainNavBar-search-dialog-control-area"]),
 			children: [/* @__PURE__ */ T("form", {
-				className: e(d["SubdomainNavBar-search-form"]),
-				onSubmit: l,
+				className: e(f["SubdomainNavBar-search-form"]),
+				onSubmit: d,
 				role: "search",
 				children: /* @__PURE__ */ E(g, {
 					fullWidth: !0,
@@ -274,51 +274,51 @@ var A = v(({ active: t, title: r, searchResults: i, searchTerm: a, handlerFn: c,
 						children: "Search"
 					}), /* @__PURE__ */ T(h, {
 						ref: _,
-						className: e(d["SubdomainNavBar-search-text-input"]),
+						className: e(f["SubdomainNavBar-search-text-input"]),
 						name: "search",
 						role: "combobox",
 						"aria-expanded": k,
 						"aria-controls": "listbox-search-results",
 						placeholder: `Search ${r}`,
 						onChange: p,
-						defaultValue: a,
+						defaultValue: s,
 						invisible: !0,
-						leadingVisual: /* @__PURE__ */ T(o, { size: 16 }),
+						leadingVisual: /* @__PURE__ */ T(l, { 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"]),
+				className: e(f["SubdomainNavBar-menu-button"], f["SubdomainNavBar-menu-button--close"]),
 				onClick: N,
-				children: /* @__PURE__ */ T(s, { size: 24 })
+				children: /* @__PURE__ */ T(u, { size: 24 })
 			})]
 		}), /* @__PURE__ */ E("div", {
 			id: "listbox-search-results",
 			children: [k && /* @__PURE__ */ E("div", {
-				className: e(d["SubdomainNavBar-search-results-container"]),
+				className: e(f["SubdomainNavBar-search-results-container"]),
 				children: [/* @__PURE__ */ E(n, {
 					id: "subdomainnavbar-search-results-heading",
-					className: d["SubdomainNavBar-search-results-heading"],
+					className: f["SubdomainNavBar-search-results-heading"],
 					children: [
 						"Results for “",
-						a,
+						s,
 						"”"
 					]
 				}), /* @__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", {
+					className: e(f["SubdomainNavBar-search-results"]),
+					children: o?.map((e, t) => /* @__PURE__ */ E("li", {
 						id: `subdomainnavbar-search-result-${t}`,
-						className: d["SubdomainNavBar-search-result-item"],
+						className: f["SubdomainNavBar-search-result-item"],
 						role: "option",
 						"aria-selected": t === x,
 						children: [
 							/* @__PURE__ */ T("div", {
-								className: d["SubdomainNavBar-search-result-item-container"],
+								className: f["SubdomainNavBar-search-result-item-container"],
 								children: /* @__PURE__ */ T("a", {
 									href: e.url,
 									children: e.title
@@ -328,16 +328,16 @@ var A = v(({ active: t, title: r, searchResults: i, searchTerm: a, handlerFn: c,
 								as: "p",
 								size: "200",
 								id: `subdomainnavbar-search-result-item-desc${t}`,
-								className: d["SubdomainNavBar-search-result-item-desc"],
+								className: f["SubdomainNavBar-search-result-item-desc"],
 								children: e.description
 							}),
 							/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(n, {
 								size: "100",
-								className: d["SubdomainNavBar-search-result-item-desc"],
+								className: f["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"],
+								className: f["SubdomainNavBar-search-result-item-desc"],
 								children: [
 									" ",
 									"•",
@@ -345,7 +345,7 @@ var A = v(({ active: t, title: r, searchResults: i, searchTerm: a, handlerFn: c,
 								]
 							}), /* @__PURE__ */ T(n, {
 								size: "100",
-								className: d["SubdomainNavBar-search-result-item-desc"],
+								className: f["SubdomainNavBar-search-result-item-desc"],
 								children: e.category
 							})] })] })
 						]
@@ -356,29 +356,29 @@ var A = v(({ active: t, title: r, searchResults: i, searchTerm: a, handlerFn: c,
 				"aria-atomic": "true",
 				"data-testid": D.liveRegion,
 				className: "visually-hidden",
-				children: [`${i?.length} suggestions.`, j && /* @__PURE__ */ T("span", { children: "\xA0" })]
+				children: [`${o?.length} suggestions.`, j && /* @__PURE__ */ T("span", { children: "\xA0" })]
 			})]
 		})]
 	})] });
 });
-function j({ children: t, href: n, ...r }) {
-	return /* @__PURE__ */ T(c, {
+function j({ children: t, href: n, ...i }) {
+	return /* @__PURE__ */ T(r, {
 		as: "a",
 		href: n,
-		className: e(d["SubdomainNavBar-cta-button"]),
+		className: e(f["SubdomainNavBar-cta-button"]),
 		variant: "primary",
 		size: "small",
-		...r,
+		...i,
 		children: t
 	});
 }
-function M({ children: t, href: n, ...r }) {
-	return /* @__PURE__ */ T(c, {
+function M({ children: t, href: n, ...i }) {
+	return /* @__PURE__ */ T(r, {
 		as: "a",
 		href: n,
-		className: e(d["SubdomainNavBar-cta-button"], d["SubdomainNavBar-cta-button--secondary"]),
+		className: e(f["SubdomainNavBar-cta-button"], f["SubdomainNavBar-cta-button--secondary"]),
 		size: "small",
-		...r,
+		...i,
 		children: t
 	});
 }

package/esm/VideoPlayer/VideoPlayer.js

@@ -1,8 +1,8 @@
 import e from "../node_modules/clsx/dist/clsx.js";
 import { useProvidedRefOrCreate as t } from "../hooks/useRef.js";
 import { Text as n } from "../Text/Text.js";
-import { PlayIcon as r } from "./components/PlayIcon/PlayIcon.js";
-import { MarkGithubIcon as i } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { MarkGithubIcon as r } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { PlayIcon as i } from "./components/PlayIcon/PlayIcon.js";
 import a from "./VideoPlayer.module.js";
 import { VideoContext as o, VideoProvider as s, useVideo as c } from "./hooks/useVideo.js";
 import { Captions as l } from "./components/Captions/Captions.js";
@@ -19,7 +19,7 @@ import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/compon
 import { forwardRef as v, useCallback as y, useContext as b } from "react";
 import { jsx as x, jsxs as S } from "react/jsx-runtime";
 //#region src/VideoPlayer/VideoPlayer.tsx
-var C = v(({ title: o, visuallyHiddenTitle: s, showBranding: v = !0, children: b, className: C, showPlayPauseButton: T = !0, showSeekControl: E = !0, showCCButton: D = !0, showMuteButton: O = !0, showVolumeControl: k = !0, showFullScreenButton: A = !0, playIcon: j = () => /* @__PURE__ */ x(r, { className: a.VideoPlayer__playButton }), ...M }, N) => {
+var C = v(({ title: o, visuallyHiddenTitle: s, showBranding: v = !0, children: b, className: C, showPlayPauseButton: T = !0, showSeekControl: E = !0, showCCButton: D = !0, showMuteButton: O = !0, showVolumeControl: k = !0, showFullScreenButton: A = !0, playIcon: j = () => /* @__PURE__ */ x(i, { className: a.VideoPlayer__playButton }), ...M }, N) => {
 	let { ccEnabled: P, fullscreenRef: F, isPlaying: I, ref: L, togglePlaying: R } = c(), z = t(y((e) => {
 		w(N, e);
 	}, [N])), B = y((e) => {
@@ -46,7 +46,7 @@ var C = v(({ title: o, visuallyHiddenTitle: s, showBranding: v = !0, children: b
 					}),
 					v || !s ? /* @__PURE__ */ S("div", {
 						className: e(a.VideoPlayer__title, I && a["VideoPlayer__title--hidden"]),
-						children: [v && /* @__PURE__ */ x(i, {
+						children: [v && /* @__PURE__ */ x(r, {
 							size: 40,
 							"aria-label": "GitHub logo"
 						}), !s && /* @__PURE__ */ x(n, {

package/esm/hooks/useFocusTrap.d.ts

@@ -1,15 +1,15 @@
 import React from 'react';
-export interface FocusTrapHookSettings {
+export interface FocusTrapHookSettings<ContainerElement extends HTMLElement = HTMLElement, InitialFocusElement extends HTMLElement = HTMLElement> {
     /**
-     * Ref that will be used for the trapping container. If not provided, one will
+     * Ref object that will be used for the trapping container. If not provided, one will
      * be created by this hook and returned.
      */
-    containerRef: React.RefObject<HTMLElement | null>;
+    containerRef?: React.RefObject<ContainerElement | null>;
     /**
-     * Ref for the element that should receive focus when the focus trap is first enabled.
+     * Ref object for the element that should receive focus when the focus trap is first enabled.
      * If not provided, one will be created by this hook and returned. Its use is optional.
      */
-    initialFocusRef?: React.RefObject<HTMLElement | null>;
+    initialFocusRef?: React.RefObject<InitialFocusElement | null>;
     /**
      * Set to true to disable the focus trap and clean up listeners. Can be re-enabled at any time.
      */
@@ -24,8 +24,8 @@ export interface FocusTrapHookSettings {
  * that should trap focus.
  * @param settings {FocusTrapHookSettings}
  */
-export declare function useFocusTrap(settings?: FocusTrapHookSettings, dependencies?: React.DependencyList): {
-    containerRef: React.RefObject<HTMLElement | null> | undefined;
-    initialFocusRef: React.RefObject<HTMLElement | null> | undefined;
+export declare function useFocusTrap<ContainerElement extends HTMLElement = HTMLElement, InitialFocusElement extends HTMLElement = HTMLElement>(settings?: FocusTrapHookSettings<ContainerElement, InitialFocusElement>, dependencies?: React.DependencyList): {
+    containerRef: React.RefObject<ContainerElement | null>;
+    initialFocusRef: React.RefObject<InitialFocusElement | null>;
 };
 //# sourceMappingURL=useFocusTrap.d.ts.map

package/esm/hooks/useFocusTrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAEjD;;;OAGG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAErD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,QAAQ,CAAC,EAAE,qBAAqB,EAChC,YAAY,GAAE,KAAK,CAAC,cAAmB,GACtC;IACD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,SAAS,CAAA;IAC7D,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,SAAS,CAAA;CACjE,CAyCA"}
+{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,qBAAqB,CACpC,gBAAgB,SAAS,WAAW,GAAG,WAAW,EAClD,mBAAmB,SAAS,WAAW,GAAG,WAAW;IAErD;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IAEvD;;;OAGG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAA;IAE7D;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,gBAAgB,SAAS,WAAW,GAAG,WAAW,EAClD,mBAAmB,SAAS,WAAW,GAAG,WAAW,EAErD,QAAQ,CAAC,EAAE,qBAAqB,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,EACvE,YAAY,GAAE,KAAK,CAAC,cAAmB,GACtC;IACD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IACtD,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAA;CAC7D,CAsCA"}

package/esm/hooks/useFocusTrap.js

@@ -1,28 +1,28 @@
-import e from "react";
-import { focusTrap as t } from "@primer/behaviors";
+import { useProvidedRefOrCreate as e } from "./useRef.js";
+import t from "react";
+import { focusTrap as n } from "@primer/behaviors";
 //#region src/hooks/useFocusTrap.ts
-function n(n, r = []) {
-	let i = n?.containerRef, a = n?.initialFocusRef, o = n?.disabled, s = e.useRef(null), c = e.useRef(null);
-	!c.current && !n?.disabled && (c.current = document.activeElement);
-	function l() {
-		s.current?.abort(), n?.restoreFocusOnCleanUp && c.current instanceof HTMLElement && (c.current.focus(), c.current = null);
+function r(r, i = []) {
+	let a = e(r?.containerRef), o = e(r?.initialFocusRef), s = r?.disabled, c = t.useRef(null), l = t.useRef(null);
+	function u() {
+		c.current?.abort(), r?.restoreFocusOnCleanUp && l.current instanceof HTMLElement && l.current.focus(), l.current = null;
 	}
-	return e.useEffect(() => {
-		if (i?.current instanceof HTMLElement) if (o) l();
-		else return s.current = t(i.current, a?.current ?? void 0) ?? null, () => {
-			l();
+	return t.useEffect(() => {
+		if (a.current instanceof HTMLElement) if (s) u();
+		else return l.current ||= document.activeElement, c.current = n(a.current, o.current ?? void 0) ?? null, () => {
+			u();
 		};
 	}, [
-		i,
 		a,
 		o,
-		...r
+		s,
+		...i
 	]), {
-		containerRef: i,
-		initialFocusRef: a
+		containerRef: a,
+		initialFocusRef: o
 	};
 }
 //#endregion
-export { n as useFocusTrap };
+export { r as useFocusTrap };
 
 //# sourceMappingURL=useFocusTrap.js.map

package/esm/hooks/useFocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.js","names":[],"sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import React from 'react'\nimport {focusTrap} from '@primer/behaviors'\n\nexport interface FocusTrapHookSettings {\n  /**\n   * Ref that will be used for the trapping container. If not provided, one will\n   * be created by this hook and returned.\n   */\n  containerRef: React.RefObject<HTMLElement | null>\n\n  /**\n   * Ref for the element that should receive focus when the focus trap is first enabled.\n   * If not provided, one will be created by this hook and returned. Its use is optional.\n   */\n  initialFocusRef?: React.RefObject<HTMLElement | null>\n\n  /**\n   * Set to true to disable the focus trap and clean up listeners. Can be re-enabled at any time.\n   */\n  disabled?: boolean\n\n  /**\n   * If true, when this focus trap is cleaned up, restore focus to the element that had focus immediately before the focus trap was enabled. (Default: false)\n   */\n  restoreFocusOnCleanUp?: boolean\n}\n\n/**\n * Hook used to trap focus inside a container. Returns a ref that can be added to the container\n * that should trap focus.\n * @param settings {FocusTrapHookSettings}\n */\nexport function useFocusTrap(\n  settings?: FocusTrapHookSettings,\n  dependencies: React.DependencyList = [],\n): {\n  containerRef: React.RefObject<HTMLElement | null> | undefined\n  initialFocusRef: React.RefObject<HTMLElement | null> | undefined\n} {\n  const containerRef = settings?.containerRef\n  const initialFocusRef = settings?.initialFocusRef\n  const disabled = settings?.disabled\n  const abortController = React.useRef<AbortController | null>(null)\n  const previousFocusedElement = React.useRef<Element | null>(null)\n\n  // If we are enabling a focus trap and haven't already stored the previously focused element\n  // go ahead an do that so we can restore later when the trap is disabled.\n  if (!previousFocusedElement.current && !settings?.disabled) {\n    previousFocusedElement.current = document.activeElement\n  }\n\n  // This function removes the event listeners that enable the focus trap and restores focus\n  // to the previously-focused element (if necessary).\n  function disableTrap() {\n    abortController.current?.abort()\n    if (settings?.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {\n      previousFocusedElement.current.focus()\n      previousFocusedElement.current = null\n    }\n  }\n\n  React.useEffect(\n    () => {\n      if (containerRef?.current instanceof HTMLElement) {\n        if (!disabled) {\n          abortController.current = focusTrap(containerRef.current, initialFocusRef?.current ?? undefined) ?? null\n          return () => {\n            disableTrap()\n          }\n        } else {\n          disableTrap()\n        }\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [containerRef, initialFocusRef, disabled, ...dependencies],\n  )\n\n  return {containerRef, initialFocusRef}\n}\n"],"mappings":";;;AAgCA,SAAgB,EACd,GACA,IAAqC,EAAE,EAIvC;CACA,IAAM,IAAe,GAAU,cACzB,IAAkB,GAAU,iBAC5B,IAAW,GAAU,UACrB,IAAkB,EAAM,OAA+B,KAAK,EAC5D,IAAyB,EAAM,OAAuB,KAAK;AAIjE,CAAI,CAAC,EAAuB,WAAW,CAAC,GAAU,aAChD,EAAuB,UAAU,SAAS;CAK5C,SAAS,IAAc;AAErB,EADA,EAAgB,SAAS,OAAO,EAC5B,GAAU,yBAAyB,EAAuB,mBAAmB,gBAC/E,EAAuB,QAAQ,OAAO,EACtC,EAAuB,UAAU;;AAqBrC,QAjBA,EAAM,gBACE;AACJ,MAAI,GAAc,mBAAmB,YACnC,KAAK,EAMH,IAAa;MAJb,QADA,EAAgB,UAAU,EAAU,EAAa,SAAS,GAAiB,WAAW,KAAA,EAAU,IAAI,YACvF;AACX,MAAa;;IAQrB;EAAC;EAAc;EAAiB;EAAU,GAAG;EAAa,CAC3D,EAEM;EAAC;EAAc;EAAgB"}
+{"version":3,"file":"useFocusTrap.js","names":[],"sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import React from 'react'\nimport {focusTrap} from '@primer/behaviors'\nimport {useProvidedRefOrCreate} from './useRef'\n\nexport interface FocusTrapHookSettings<\n  ContainerElement extends HTMLElement = HTMLElement,\n  InitialFocusElement extends HTMLElement = HTMLElement,\n> {\n  /**\n   * Ref object that will be used for the trapping container. If not provided, one will\n   * be created by this hook and returned.\n   */\n  containerRef?: React.RefObject<ContainerElement | null>\n\n  /**\n   * Ref object for the element that should receive focus when the focus trap is first enabled.\n   * If not provided, one will be created by this hook and returned. Its use is optional.\n   */\n  initialFocusRef?: React.RefObject<InitialFocusElement | null>\n\n  /**\n   * Set to true to disable the focus trap and clean up listeners. Can be re-enabled at any time.\n   */\n  disabled?: boolean\n\n  /**\n   * If true, when this focus trap is cleaned up, restore focus to the element that had focus immediately before the focus trap was enabled. (Default: false)\n   */\n  restoreFocusOnCleanUp?: boolean\n}\n\n/**\n * Hook used to trap focus inside a container. Returns a ref that can be added to the container\n * that should trap focus.\n * @param settings {FocusTrapHookSettings}\n */\nexport function useFocusTrap<\n  ContainerElement extends HTMLElement = HTMLElement,\n  InitialFocusElement extends HTMLElement = HTMLElement,\n>(\n  settings?: FocusTrapHookSettings<ContainerElement, InitialFocusElement>,\n  dependencies: React.DependencyList = [],\n): {\n  containerRef: React.RefObject<ContainerElement | null>\n  initialFocusRef: React.RefObject<InitialFocusElement | null>\n} {\n  const containerRef = useProvidedRefOrCreate<ContainerElement | null>(settings?.containerRef)\n  const initialFocusRef = useProvidedRefOrCreate<InitialFocusElement | null>(settings?.initialFocusRef)\n  const disabled = settings?.disabled\n  const abortController = React.useRef<AbortController | null>(null)\n  const previousFocusedElement = React.useRef<Element | null>(null)\n\n  // This function removes the event listeners that enable the focus trap and restores focus\n  // to the previously-focused element (if necessary).\n  function disableTrap() {\n    abortController.current?.abort()\n    if (settings?.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {\n      previousFocusedElement.current.focus()\n    }\n    previousFocusedElement.current = null\n  }\n\n  React.useEffect(\n    () => {\n      if (containerRef.current instanceof HTMLElement) {\n        if (!disabled) {\n          if (!previousFocusedElement.current) {\n            previousFocusedElement.current = document.activeElement\n          }\n          abortController.current = focusTrap(containerRef.current, initialFocusRef.current ?? undefined) ?? null\n          return () => {\n            disableTrap()\n          }\n        } else {\n          disableTrap()\n        }\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [containerRef, initialFocusRef, disabled, ...dependencies],\n  )\n\n  return {containerRef, initialFocusRef}\n}\n"],"mappings":";;;;AAoCA,SAAgB,EAId,GACA,IAAqC,EAAE,EAIvC;CACA,IAAM,IAAe,EAAgD,GAAU,aAAa,EACtF,IAAkB,EAAmD,GAAU,gBAAgB,EAC/F,IAAW,GAAU,UACrB,IAAkB,EAAM,OAA+B,KAAK,EAC5D,IAAyB,EAAM,OAAuB,KAAK;CAIjE,SAAS,IAAc;AAKrB,EAJA,EAAgB,SAAS,OAAO,EAC5B,GAAU,yBAAyB,EAAuB,mBAAmB,eAC/E,EAAuB,QAAQ,OAAO,EAExC,EAAuB,UAAU;;AAuBnC,QApBA,EAAM,gBACE;AACJ,MAAI,EAAa,mBAAmB,YAClC,KAAK,EASH,IAAa;MAJb,QAJA,AACE,EAAuB,YAAU,SAAS,eAE5C,EAAgB,UAAU,EAAU,EAAa,SAAS,EAAgB,WAAW,KAAA,EAAU,IAAI,YACtF;AACX,MAAa;;IAQrB;EAAC;EAAc;EAAiB;EAAU,GAAG;EAAa,CAC3D,EAEM;EAAC;EAAc;EAAgB"}

package/esm/index.d.ts

@@ -56,5 +56,6 @@ export * from './SectionIntroStacked';
 export * from './Tabs';
 export * from './TextCursorAnimation';
 export * from './Tiles';
+export * from './hooks/useFocusTrap';
 export * from './hooks/useWindowSize';
 //# sourceMappingURL=index.d.ts.map

package/esm/index.d.ts.map

@@ -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,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,WAAW,CAAA;AACzB,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"}
+{"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,WAAW,CAAA;AACzB,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,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA"}