@primer/react-brand 0.72.0-rc.44ea78b6 → 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/forms/Checkbox/Checkbox.d.ts

@@ -1,6 +1,7 @@
 import React, { type InputHTMLAttributes } from 'react';
 import type { BaseProps } from '../../component-helpers';
 import type { FormValidationStatus } from '../form-types';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 export type CheckboxProps = {
     /**
      * Apply indeterminate visual appearance to the checkbox

package/esm/forms/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/forms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA0B,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAIjG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAMvD,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GACzD,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAsF7B,eAAO,MAAM,QAAQ,4FAA+B,CAAA"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/forms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA0B,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAIjG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAGvD,OAAO,2GAA2G,CAAA;AAIlH,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GACzD,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAsF7B,eAAO,MAAM,QAAQ,4FAA+B,CAAA"}

package/esm/forms/Checkbox/Checkbox.js

@@ -2,6 +2,7 @@ import e from "../../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../../hooks/useId.js";
 import { useProvidedRefOrCreate as n } from "../../hooks/useRef.js";
 import r from "../../hooks/useIsomorphicLayoutEffect.js";
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
 import i from "./Checkbox.module.js";
 import { forwardRef as a, useCallback as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";

package/esm/forms/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/forms/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, type InputHTMLAttributes, type ReactElement} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus} from '../form-types'\nimport useLayoutEffect from '../../hooks/useIsomorphicLayoutEffect'\n\nimport styles from './Checkbox.module.css'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nexport type CheckboxProps = {\n  /**\n   * Apply indeterminate visual appearance to the checkbox\n   */\n  indeterminate?: boolean\n  /**\n   * Apply inactive visual appearance to the checkbox\n   */\n  disabled?: boolean\n  /**\n   * Indicates whether the checkbox must be checked\n   */\n  required?: boolean\n  /**\n   * Only used to inform ARIA attributes. Individual checkboxes do not have validation styles.\n   */\n  validationStatus?: FormValidationStatus\n  /**\n   * A unique value that is never shown to the user.\n   * Used during form submission and to identify which checkbox inputs are selected\n   */\n  value?: string\n} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> &\n  BaseProps<HTMLInputElement>\n\nconst CheckboxInternal = (\n  {\n    checked,\n    className,\n    indeterminate,\n    disabled,\n    id,\n    onChange,\n    required,\n    validationStatus,\n    value,\n    ...rest\n  }: CheckboxProps,\n  ref,\n): ReactElement => {\n  const inputRef = useProvidedRefOrCreate<HTMLInputElement | null>(ref || null)\n  const uniqueId = useId(id)\n\n  useLayoutEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate || false\n    }\n  }, [indeterminate, checked, inputRef])\n\n  const onClick = useCallback(() => {\n    if (!disabled && inputRef.current) {\n      inputRef.current.click()\n    }\n  }, [disabled, inputRef])\n\n  return (\n    <span className={styles['Checkbox-wrapper']}>\n      <input\n        id={uniqueId}\n        aria-invalid={validationStatus === 'error' ? 'true' : 'false'}\n        aria-required={required ? 'true' : 'false'}\n        aria-checked={indeterminate ? 'mixed' : checked}\n        checked={indeterminate ? false : checked}\n        className={clsx(styles['Checkbox-input'])}\n        disabled={disabled}\n        name={value}\n        onChange={onChange}\n        ref={inputRef}\n        required={required}\n        type=\"checkbox\"\n        value={value}\n        {...rest}\n      />\n      <span\n        className={clsx(styles['Checkbox'], indeterminate && styles['Checkbox--indeterminate'], className)}\n        onClick={onClick}\n        tabIndex={-1}\n        aria-hidden=\"true\"\n      >\n        {indeterminate ? (\n          <svg\n            className={clsx(styles['Checkbox-checkmark'])}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 16 16\"\n            width=\"16\"\n            height=\"16\"\n            aria-hidden=\"true\"\n          >\n            <path fillRule=\"evenodd\" d=\"M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z\"></path>\n          </svg>\n        ) : (\n          <svg viewBox=\"0 0 100 100\" className={clsx(styles['Checkbox-checkmark'])} aria-hidden=\"true\">\n            <path\n              className={clsx(styles['Checkbox-checkmark-path'])}\n              fill=\"none\"\n              stroke=\"#000\"\n              strokeWidth=\"13\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeMiterlimit=\"10\"\n              d=\"M12.1 52.1l24.4 24.4 53-53\"\n            />\n          </svg>\n        )}\n      </span>\n    </span>\n  )\n}\n\nexport const Checkbox = forwardRef(CheckboxInternal)\n"],"mappings":";;;;;;;AAwHA,IAAa,IAAW,GAnFtB,EACE,YACA,cACA,kBACA,aACA,OACA,aACA,aACA,qBACA,UACA,GAAG,KAEL,MACiB;CACjB,IAAM,IAAW,EAAgD,KAAO,KAAK,EACvE,IAAW,EAAM,EAAG;AAE1B,SAAsB;AACpB,EAAI,EAAS,YACX,EAAS,QAAQ,gBAAgB,KAAiB;IAEnD;EAAC;EAAe;EAAS;EAAS,CAAC;CAEtC,IAAM,IAAU,QAAkB;AAChC,EAAI,CAAC,KAAY,EAAS,WACxB,EAAS,QAAQ,OAAO;IAEzB,CAAC,GAAU,EAAS,CAAC;AAExB,QACE,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,SAAD;GACE,IAAI;GACJ,gBAAc,MAAqB,UAAU,SAAS;GACtD,iBAAe,IAAW,SAAS;GACnC,gBAAc,IAAgB,UAAU;GACxC,SAAS,IAAgB,KAAQ;GACjC,WAAW,EAAK,EAAO,kBAAkB;GAC/B;GACV,MAAM;GACI;GACV,KAAK;GACK;GACV,MAAK;GACE;GACP,GAAI;GACJ,CAAA,EACF,kBAAC,QAAD;GACE,WAAW,EAAK,EAAO,UAAa,KAAiB,EAAO,4BAA4B,EAAU;GACzF;GACT,UAAU;GACV,eAAY;aAEX,IACC,kBAAC,OAAD;IACE,WAAW,EAAK,EAAO,sBAAsB;IAC7C,OAAM;IACN,SAAQ;IACR,OAAM;IACN,QAAO;IACP,eAAY;cAEZ,kBAAC,QAAD;KAAM,UAAS;KAAU,GAAE;KAA8E,CAAA;IACrG,CAAA,GAEN,kBAAC,OAAD;IAAK,SAAQ;IAAc,WAAW,EAAK,EAAO,sBAAsB;IAAE,eAAY;cACpF,kBAAC,QAAD;KACE,WAAW,EAAK,EAAO,2BAA2B;KAClD,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KACf,kBAAiB;KACjB,GAAE;KACF,CAAA;IACE,CAAA;GAEH,CAAA,CACF;;EAIyC"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/forms/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, type InputHTMLAttributes, type ReactElement} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus} from '../form-types'\nimport useLayoutEffect from '../../hooks/useIsomorphicLayoutEffect'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './Checkbox.module.css'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nexport type CheckboxProps = {\n  /**\n   * Apply indeterminate visual appearance to the checkbox\n   */\n  indeterminate?: boolean\n  /**\n   * Apply inactive visual appearance to the checkbox\n   */\n  disabled?: boolean\n  /**\n   * Indicates whether the checkbox must be checked\n   */\n  required?: boolean\n  /**\n   * Only used to inform ARIA attributes. Individual checkboxes do not have validation styles.\n   */\n  validationStatus?: FormValidationStatus\n  /**\n   * A unique value that is never shown to the user.\n   * Used during form submission and to identify which checkbox inputs are selected\n   */\n  value?: string\n} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> &\n  BaseProps<HTMLInputElement>\n\nconst CheckboxInternal = (\n  {\n    checked,\n    className,\n    indeterminate,\n    disabled,\n    id,\n    onChange,\n    required,\n    validationStatus,\n    value,\n    ...rest\n  }: CheckboxProps,\n  ref,\n): ReactElement => {\n  const inputRef = useProvidedRefOrCreate<HTMLInputElement | null>(ref || null)\n  const uniqueId = useId(id)\n\n  useLayoutEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate || false\n    }\n  }, [indeterminate, checked, inputRef])\n\n  const onClick = useCallback(() => {\n    if (!disabled && inputRef.current) {\n      inputRef.current.click()\n    }\n  }, [disabled, inputRef])\n\n  return (\n    <span className={styles['Checkbox-wrapper']}>\n      <input\n        id={uniqueId}\n        aria-invalid={validationStatus === 'error' ? 'true' : 'false'}\n        aria-required={required ? 'true' : 'false'}\n        aria-checked={indeterminate ? 'mixed' : checked}\n        checked={indeterminate ? false : checked}\n        className={clsx(styles['Checkbox-input'])}\n        disabled={disabled}\n        name={value}\n        onChange={onChange}\n        ref={inputRef}\n        required={required}\n        type=\"checkbox\"\n        value={value}\n        {...rest}\n      />\n      <span\n        className={clsx(styles['Checkbox'], indeterminate && styles['Checkbox--indeterminate'], className)}\n        onClick={onClick}\n        tabIndex={-1}\n        aria-hidden=\"true\"\n      >\n        {indeterminate ? (\n          <svg\n            className={clsx(styles['Checkbox-checkmark'])}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 16 16\"\n            width=\"16\"\n            height=\"16\"\n            aria-hidden=\"true\"\n          >\n            <path fillRule=\"evenodd\" d=\"M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z\"></path>\n          </svg>\n        ) : (\n          <svg viewBox=\"0 0 100 100\" className={clsx(styles['Checkbox-checkmark'])} aria-hidden=\"true\">\n            <path\n              className={clsx(styles['Checkbox-checkmark-path'])}\n              fill=\"none\"\n              stroke=\"#000\"\n              strokeWidth=\"13\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeMiterlimit=\"10\"\n              d=\"M12.1 52.1l24.4 24.4 53-53\"\n            />\n          </svg>\n        )}\n      </span>\n    </span>\n  )\n}\n\nexport const Checkbox = forwardRef(CheckboxInternal)\n"],"mappings":";;;;;;;;AAyHA,IAAa,IAAW,GAnFtB,EACE,YACA,cACA,kBACA,aACA,OACA,aACA,aACA,qBACA,UACA,GAAG,KAEL,MACiB;CACjB,IAAM,IAAW,EAAgD,KAAO,KAAK,EACvE,IAAW,EAAM,EAAG;AAE1B,SAAsB;AACpB,EAAI,EAAS,YACX,EAAS,QAAQ,gBAAgB,KAAiB;IAEnD;EAAC;EAAe;EAAS;EAAS,CAAC;CAEtC,IAAM,IAAU,QAAkB;AAChC,EAAI,CAAC,KAAY,EAAS,WACxB,EAAS,QAAQ,OAAO;IAEzB,CAAC,GAAU,EAAS,CAAC;AAExB,QACE,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,SAAD;GACE,IAAI;GACJ,gBAAc,MAAqB,UAAU,SAAS;GACtD,iBAAe,IAAW,SAAS;GACnC,gBAAc,IAAgB,UAAU;GACxC,SAAS,IAAgB,KAAQ;GACjC,WAAW,EAAK,EAAO,kBAAkB;GAC/B;GACV,MAAM;GACI;GACV,KAAK;GACK;GACV,MAAK;GACE;GACP,GAAI;GACJ,CAAA,EACF,kBAAC,QAAD;GACE,WAAW,EAAK,EAAO,UAAa,KAAiB,EAAO,4BAA4B,EAAU;GACzF;GACT,UAAU;GACV,eAAY;aAEX,IACC,kBAAC,OAAD;IACE,WAAW,EAAK,EAAO,sBAAsB;IAC7C,OAAM;IACN,SAAQ;IACR,OAAM;IACN,QAAO;IACP,eAAY;cAEZ,kBAAC,QAAD;KAAM,UAAS;KAAU,GAAE;KAA8E,CAAA;IACrG,CAAA,GAEN,kBAAC,OAAD;IAAK,SAAQ;IAAc,WAAW,EAAK,EAAO,sBAAsB;IAAE,eAAY;cACpF,kBAAC,QAAD;KACE,WAAW,EAAK,EAAO,2BAA2B;KAClD,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KACf,kBAAiB;KACjB,GAAE;KACF,CAAA;IACE,CAAA;GAEH,CAAA,CACF;;EAIyC"}

package/esm/forms/FormControl/FormControl.d.ts

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from 'react';
 import type { BaseProps } from '../../component-helpers';
 import type { FormValidationStatus, FormInputSizes } from '../';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 export type FormControlProps = BaseProps<HTMLElement> & {
     /**
      * Apply a decorative border to the form control.

package/esm/forms/FormControl/FormControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/forms/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAK9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAE,cAAc,EAAC,MAAM,KAAK,CAAA;AAW7D,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,CAAA;AA2JD,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AA4C/B,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,SAAS,CAAC,eAAe,CAAC,CAAA;AA8B9B,KAAK,oBAAoB,GAAG,iBAAiB,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAA;AAMzE;;;GAGG;AACH,eAAO,MAAM,WAAW,kGAnOrB,iBAAiB,CAAC,gBAAgB,CAAC;gIAwJnC,iBAAiB,CAAC,qBAAqB,CAAC;sEAqCuC,0BAA0B;mCA8B7D,oBAAoB;CAYjE,CAAA"}
+{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/forms/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAK9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAE,cAAc,EAAC,MAAM,KAAK,CAAA;AAS7D,OAAO,2GAA2G,CAAA;AAGlH,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,CAAA;AA2JD,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AA4C/B,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,SAAS,CAAC,eAAe,CAAC,CAAA;AA8B9B,KAAK,oBAAoB,GAAG,iBAAiB,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAA;AAMzE;;;GAGG;AACH,eAAO,MAAM,WAAW,kGAnOrB,iBAAiB,CAAC,gBAAgB,CAAC;gIAwJnC,iBAAiB,CAAC,qBAAqB,CAAC;sEAqCuC,0BAA0B;mCA8B7D,oBAAoB;CAYjE,CAAA"}

package/esm/forms/FormControl/FormControl.js

@@ -2,6 +2,7 @@ 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 { AlertFillIcon as r, CheckCircleFillIcon as i } from "../../node_modules/@primer/octicons-react/dist/index.esm.js";
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
 import { Checkbox as a } from "../Checkbox/Checkbox.js";
 import { Textarea as o } from "../Textarea/Textarea.js";
 import { TextInput as s } from "../TextInput/TextInput.js";

package/esm/forms/FormControl/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","names":[],"sources":["../../../src/forms/FormControl/FormControl.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {useId} from '../../hooks/useId'\nimport {clsx} from 'clsx'\nimport {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus, FormInputSizes} from '../'\n\nimport {Checkbox} from '../Checkbox'\nimport {Select} from '../Select'\nimport {TextInput} from '../TextInput'\nimport {Textarea} from '../Textarea'\nimport {Radio} from '../Radio'\nimport {Text} from '../../Text'\n\nimport styles from './FormControl.module.css'\n\nexport type FormControlProps = BaseProps<HTMLElement> & {\n  /**\n   * Apply a decorative border to the form control.\n   */\n  hasBorder?: boolean\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * A unique identifier for the form control.\n   * This is used to associate the form control with its associated label.\n   * If an id is not provided, a unique id will be generated.\n   */\n  id?: string\n  /**\n   * Applies required styling to the label and input.\n   */\n  required?: boolean\n  /**\n   * Alternative sizes for inputs and labels.\n   */\n  size?: FormInputSizes\n  /**\n   * Provides contextual validation feedback to all children, showing relevant messaging where applicable.\n   */\n  validationStatus?: FormValidationStatus\n}\n\n/**\n * The Checkbox and the Radio components both use the trick of using a <label> to render the visual control,\n * and visually hiding the <input>. This means that, when you add a FormControl.Label alongside your\n * Checkbox/Radio, the <input> technically has two <label> elements associated with it.\n * That doesn't appear to be a problem (it's valid HTML and NVDA announces it correctly) but it does annoy\n * our Storybook Axe tests because they only seem to look at one of the labels.\n * To fix this, we recommend that the FormControl.Label always appears before the Checkbox/Radio in the DOM,\n * even though it visually appears after the Checkbox/Radio, as this keeps Storybook Axe happy.\n */\n\nconst Root = ({\n  children,\n  className,\n  hasBorder,\n  fullWidth,\n  id,\n  required,\n  size = 'medium',\n  validationStatus,\n  ...rest\n}: PropsWithChildren<FormControlProps>) => {\n  const uniqueId = useId(id)\n  const childrenArr = React.Children.toArray(children)\n\n  const isInlineControl = childrenArr.some(\n    child => React.isValidElement(child) && (child.type === Checkbox || child.type === Radio),\n  )\n\n  const containsHint = childrenArr.some(child => React.isValidElement(child) && child.type === FormControlHint)\n  const containsValidation = childrenArr.some(\n    child => React.isValidElement(child) && child.type === FormControlValidation,\n  )\n\n  return (\n    <section\n      id={`FormControl--${uniqueId}`}\n      className={clsx(\n        styles.FormControl,\n        fullWidth && styles[`FormControl--fullWidth`],\n        isInlineControl && styles['FormControl--checkbox'],\n        hasBorder && styles['FormControl--border'],\n        className,\n      )}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        if (!React.isValidElement(child)) return child\n\n        const describedBy =\n          [containsHint && `${uniqueId}-hint`, containsValidation && `${uniqueId}-validation`]\n            .filter(Boolean)\n            .join(' ') || undefined\n\n        if (child.type === TextInput) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof TextInput>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Textarea) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Textarea>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Select) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Select>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Checkbox) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Checkbox>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className, styles['FormControl-control--checkbox']),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Radio) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Radio>>\n          return React.cloneElement(element, {\n            className: clsx(isInlineControl && styles['FormControl-control--radio'], element.props.className),\n            id: uniqueId,\n            name: element.props.name,\n            required: element.props.required || required,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === FormControlLabel) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlLabel>>\n          return React.cloneElement(element, {\n            className: clsx(isInlineControl && styles['FormControl-label--checkbox'], element.props.className),\n            htmlFor: uniqueId,\n            children: element.props.children,\n            required,\n            validationStatus,\n            size,\n            showRequiredIndicator: isInlineControl ? false : element.props.showRequiredIndicator,\n          })\n        }\n\n        if (child.type === FormControlValidation) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlValidation>>\n          return React.cloneElement(element, {\n            className: clsx(isInlineControl && styles['FormControl-validation-checkbox'], element.props.className),\n            validationStatus,\n            id: `${uniqueId}-validation`,\n          })\n        }\n\n        if (child.type === FormControlHint) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlHint>>\n          return React.cloneElement(element, {\n            id: `${uniqueId}-hint`,\n          })\n        }\n\n        return child\n      })}\n    </section>\n  )\n}\n\ntype FormControlLabelProps = {\n  htmlFor?: string\n  required?: boolean\n  showRequiredIndicator?: boolean\n  size?: FormInputSizes\n  validationStatus?: FormValidationStatus\n  visuallyHidden?: boolean\n} & BaseProps<HTMLLabelElement>\n\nconst FormControlLabel = ({\n  children,\n  className,\n  htmlFor,\n  required,\n  showRequiredIndicator = true,\n  size = 'medium',\n  validationStatus,\n  visuallyHidden,\n  ...rest\n}: PropsWithChildren<FormControlLabelProps>) => {\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={clsx(\n        styles['FormControl-label'],\n        validationStatus && styles[`FormControl-label--${validationStatus}`],\n        styles[`FormControl-label--${size}`],\n        visuallyHidden && styles['FormControl-label--visually-hidden'],\n        className,\n      )}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        if (React.isValidElement<FormControlHintProps>(child) && child.type === FormControlHint) {\n          return React.cloneElement(child, {\n            className: clsx(styles['FormControl--visible'], child.props.className),\n          })\n        }\n        return child\n      })}\n\n      {required && showRequiredIndicator && (\n        <span className={styles['FormControl-label-required']} aria-hidden>\n          {' '}\n          *\n        </span>\n      )}\n    </label>\n  )\n}\n\ntype FormControlValidationProps = {\n  children: string\n  validationStatus?: FormValidationStatus\n} & BaseProps<HTMLSpanElement>\n\nconst FormControlValidation = ({children, validationStatus, className, ...props}: FormControlValidationProps) => {\n  return (\n    <Text\n      as=\"span\"\n      size=\"100\"\n      className={clsx(\n        styles['FormControl-validation'],\n        validationStatus && styles['FormControl-validation--animate-in'],\n        validationStatus && styles[`FormControl-validation--${validationStatus}`],\n        className,\n      )}\n      {...props}\n    >\n      {validationStatus === 'error' && (\n        <span className={styles['FormControl-validation-error-icon']}>\n          <AlertFillIcon />\n        </span>\n      )}\n      {validationStatus === 'success' && (\n        <span className={styles['FormControl-validation-success-icon']}>\n          <CheckCircleFillIcon />\n        </span>\n      )}\n      {children}\n    </Text>\n  )\n}\n\ntype FormControlHintProps = PropsWithChildren<BaseProps<HTMLSpanElement>>\n\nconst FormControlHint = ({className, ...rest}: FormControlHintProps) => {\n  return <Text as=\"span\" size=\"100\" variant=\"muted\" className={clsx(styles['FormControl-hint'], className)} {...rest} />\n}\n\n/**\n * FormControl\n * {@link https://primer.style/brand/components/FormControl/ See usage examples}.\n */\nexport const FormControl = Object.assign(Root, {\n  Label: FormControlLabel,\n  Validation: FormControlValidation,\n  Hint: FormControlHint,\n})\n"],"mappings":"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"}
+{"version":3,"file":"FormControl.js","names":[],"sources":["../../../src/forms/FormControl/FormControl.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {useId} from '../../hooks/useId'\nimport {clsx} from 'clsx'\nimport {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus, FormInputSizes} from '../'\n\nimport {Checkbox} from '../Checkbox'\nimport {Select} from '../Select'\nimport {TextInput} from '../TextInput'\nimport {Textarea} from '../Textarea'\nimport {Radio} from '../Radio'\nimport {Text} from '../../Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './FormControl.module.css'\n\nexport type FormControlProps = BaseProps<HTMLElement> & {\n  /**\n   * Apply a decorative border to the form control.\n   */\n  hasBorder?: boolean\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * A unique identifier for the form control.\n   * This is used to associate the form control with its associated label.\n   * If an id is not provided, a unique id will be generated.\n   */\n  id?: string\n  /**\n   * Applies required styling to the label and input.\n   */\n  required?: boolean\n  /**\n   * Alternative sizes for inputs and labels.\n   */\n  size?: FormInputSizes\n  /**\n   * Provides contextual validation feedback to all children, showing relevant messaging where applicable.\n   */\n  validationStatus?: FormValidationStatus\n}\n\n/**\n * The Checkbox and the Radio components both use the trick of using a <label> to render the visual control,\n * and visually hiding the <input>. This means that, when you add a FormControl.Label alongside your\n * Checkbox/Radio, the <input> technically has two <label> elements associated with it.\n * That doesn't appear to be a problem (it's valid HTML and NVDA announces it correctly) but it does annoy\n * our Storybook Axe tests because they only seem to look at one of the labels.\n * To fix this, we recommend that the FormControl.Label always appears before the Checkbox/Radio in the DOM,\n * even though it visually appears after the Checkbox/Radio, as this keeps Storybook Axe happy.\n */\n\nconst Root = ({\n  children,\n  className,\n  hasBorder,\n  fullWidth,\n  id,\n  required,\n  size = 'medium',\n  validationStatus,\n  ...rest\n}: PropsWithChildren<FormControlProps>) => {\n  const uniqueId = useId(id)\n  const childrenArr = React.Children.toArray(children)\n\n  const isInlineControl = childrenArr.some(\n    child => React.isValidElement(child) && (child.type === Checkbox || child.type === Radio),\n  )\n\n  const containsHint = childrenArr.some(child => React.isValidElement(child) && child.type === FormControlHint)\n  const containsValidation = childrenArr.some(\n    child => React.isValidElement(child) && child.type === FormControlValidation,\n  )\n\n  return (\n    <section\n      id={`FormControl--${uniqueId}`}\n      className={clsx(\n        styles.FormControl,\n        fullWidth && styles[`FormControl--fullWidth`],\n        isInlineControl && styles['FormControl--checkbox'],\n        hasBorder && styles['FormControl--border'],\n        className,\n      )}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        if (!React.isValidElement(child)) return child\n\n        const describedBy =\n          [containsHint && `${uniqueId}-hint`, containsValidation && `${uniqueId}-validation`]\n            .filter(Boolean)\n            .join(' ') || undefined\n\n        if (child.type === TextInput) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof TextInput>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Textarea) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Textarea>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Select) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Select>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Checkbox) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Checkbox>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className, styles['FormControl-control--checkbox']),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Radio) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Radio>>\n          return React.cloneElement(element, {\n            className: clsx(isInlineControl && styles['FormControl-control--radio'], element.props.className),\n            id: uniqueId,\n            name: element.props.name,\n            required: element.props.required || required,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === FormControlLabel) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlLabel>>\n          return React.cloneElement(element, {\n            className: clsx(isInlineControl && styles['FormControl-label--checkbox'], element.props.className),\n            htmlFor: uniqueId,\n            children: element.props.children,\n            required,\n            validationStatus,\n            size,\n            showRequiredIndicator: isInlineControl ? false : element.props.showRequiredIndicator,\n          })\n        }\n\n        if (child.type === FormControlValidation) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlValidation>>\n          return React.cloneElement(element, {\n            className: clsx(isInlineControl && styles['FormControl-validation-checkbox'], element.props.className),\n            validationStatus,\n            id: `${uniqueId}-validation`,\n          })\n        }\n\n        if (child.type === FormControlHint) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlHint>>\n          return React.cloneElement(element, {\n            id: `${uniqueId}-hint`,\n          })\n        }\n\n        return child\n      })}\n    </section>\n  )\n}\n\ntype FormControlLabelProps = {\n  htmlFor?: string\n  required?: boolean\n  showRequiredIndicator?: boolean\n  size?: FormInputSizes\n  validationStatus?: FormValidationStatus\n  visuallyHidden?: boolean\n} & BaseProps<HTMLLabelElement>\n\nconst FormControlLabel = ({\n  children,\n  className,\n  htmlFor,\n  required,\n  showRequiredIndicator = true,\n  size = 'medium',\n  validationStatus,\n  visuallyHidden,\n  ...rest\n}: PropsWithChildren<FormControlLabelProps>) => {\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={clsx(\n        styles['FormControl-label'],\n        validationStatus && styles[`FormControl-label--${validationStatus}`],\n        styles[`FormControl-label--${size}`],\n        visuallyHidden && styles['FormControl-label--visually-hidden'],\n        className,\n      )}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        if (React.isValidElement<FormControlHintProps>(child) && child.type === FormControlHint) {\n          return React.cloneElement(child, {\n            className: clsx(styles['FormControl--visible'], child.props.className),\n          })\n        }\n        return child\n      })}\n\n      {required && showRequiredIndicator && (\n        <span className={styles['FormControl-label-required']} aria-hidden>\n          {' '}\n          *\n        </span>\n      )}\n    </label>\n  )\n}\n\ntype FormControlValidationProps = {\n  children: string\n  validationStatus?: FormValidationStatus\n} & BaseProps<HTMLSpanElement>\n\nconst FormControlValidation = ({children, validationStatus, className, ...props}: FormControlValidationProps) => {\n  return (\n    <Text\n      as=\"span\"\n      size=\"100\"\n      className={clsx(\n        styles['FormControl-validation'],\n        validationStatus && styles['FormControl-validation--animate-in'],\n        validationStatus && styles[`FormControl-validation--${validationStatus}`],\n        className,\n      )}\n      {...props}\n    >\n      {validationStatus === 'error' && (\n        <span className={styles['FormControl-validation-error-icon']}>\n          <AlertFillIcon />\n        </span>\n      )}\n      {validationStatus === 'success' && (\n        <span className={styles['FormControl-validation-success-icon']}>\n          <CheckCircleFillIcon />\n        </span>\n      )}\n      {children}\n    </Text>\n  )\n}\n\ntype FormControlHintProps = PropsWithChildren<BaseProps<HTMLSpanElement>>\n\nconst FormControlHint = ({className, ...rest}: FormControlHintProps) => {\n  return <Text as=\"span\" size=\"100\" variant=\"muted\" className={clsx(styles['FormControl-hint'], className)} {...rest} />\n}\n\n/**\n * FormControl\n * {@link https://primer.style/brand/components/FormControl/ See usage examples}.\n */\nexport const FormControl = Object.assign(Root, {\n  Label: FormControlLabel,\n  Validation: FormControlValidation,\n  Hint: FormControlHint,\n})\n"],"mappings":"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"}

package/esm/forms/Radio/Radio.d.ts

@@ -1,5 +1,6 @@
 import React, { type InputHTMLAttributes } from 'react';
 import type { BaseProps } from '../../component-helpers';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 export type RadioProps = {
     /**
      * Apply inactive visual appearance to the Radio

package/esm/forms/Radio/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/forms/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA0B,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAKjG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AAItD,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GACzD,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAsC7B,eAAO,MAAM,KAAK,yFAA4B,CAAA"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/forms/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA0B,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAKjG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AAEtD,OAAO,2GAA2G,CAAA;AAGlH,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GACzD,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAsC7B,eAAO,MAAM,KAAK,yFAA4B,CAAA"}

package/esm/forms/Radio/Radio.js

@@ -1,6 +1,7 @@
 import e from "../../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../../hooks/useId.js";
 import { useProvidedRefOrCreate as n } from "../../hooks/useRef.js";
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
 import r from "./Radio.module.js";
 import { forwardRef as i, useCallback as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";