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

package/esm/PricingOptions/PricingOptions.js

@@ -1,8 +1,8 @@
 import e from "../node_modules/clsx/dist/clsx.js";
 import { Text as t } from "../Text/Text.js";
 import { Heading as n } from "../Heading/Heading.js";
-import { CheckIcon as r, TriangleDownIcon as i, XIcon as a } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
-import { Button as o } from "../Button/Button.js";
+import { Button as r } from "../Button/Button.js";
+import { CheckIcon as i, TriangleDownIcon as a, XIcon as o } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
 import { useWindowSize as s } from "../hooks/useWindowSize.js";
 import { Accordion as c } from "../Accordion/Accordion.js";
 import { UnorderedList as l } from "../list/UnorderedList/UnorderedList.js";
@@ -188,7 +188,7 @@ var v = {
 			children: c
 		})
 	]
-})), k = p(({ children: t, className: n, "data-testid": r, hasDivider: a = !0, expanded: o, accordionAs: u = "h4", ...p }, m) => {
+})), k = p(({ children: t, className: n, "data-testid": r, hasDivider: i = !0, expanded: o, accordionAs: u = "h4", ...p }, m) => {
 	let { allFeatureListsExpanded: h, updateFeatureListExpanded: y, featureListUserInteracted: b, setFeatureListUserInteracted: C } = x(), { isMedium: w, isXLarge: T, isSmall: E } = s();
 	f.useEffect(() => {
 		(o === void 0 || typeof o == "object") && C(!1);
@@ -227,7 +227,7 @@ var v = {
 	}, n));
 	return /* @__PURE__ */ g("div", {
 		ref: m,
-		className: e(d["PricingOptions__feature-list"], a && d["PricingOptions__feature-list--has-divider"], n),
+		className: e(d["PricingOptions__feature-list"], i && d["PricingOptions__feature-list--has-divider"], n),
 		"data-testid": r || v.featureList,
 		children: /* @__PURE__ */ _(c, {
 			className: d["PricingOptions__feature-list-accordion"],
@@ -239,7 +239,7 @@ var v = {
 			children: [/* @__PURE__ */ _(c.Heading, {
 				as: u,
 				className: d["PricingOptions__feature-list-accordion-heading"],
-				children: [O, /* @__PURE__ */ g(i, { className: d["PricingOptions__feature-list-accordion-chevron"] })]
+				children: [O, /* @__PURE__ */ g(a, { className: d["PricingOptions__feature-list-accordion-chevron"] })]
 			}), /* @__PURE__ */ g(c.Content, {
 				className: d["PricingOptions__feature-list-accordion-content"],
 				children: k
@@ -260,18 +260,18 @@ var v = {
 	size: "subhead-medium",
 	...a,
 	children: t
-})), M = p(({ children: t, className: n, infoTooltip: i, leadingVisual: o, leadingVisualFill: s, variant: c = "included", "data-testid": f, ...p }, m) => {
-	let h = o ?? (c === "included" ? r : a), y = c === "included" ? "Includes" : "Does not include", b = s ?? (c === "included" ? "var(--brand-color-accent-primary)" : "var(--brand-color-text-muted)");
+})), M = p(({ children: t, className: n, infoTooltip: r, leadingVisual: a, leadingVisualFill: s, variant: c = "included", "data-testid": f, ...p }, m) => {
+	let h = a ?? (c === "included" ? i : o), y = c === "included" ? "Includes" : "Does not include", b = s ?? (c === "included" ? "var(--brand-color-accent-primary)" : "var(--brand-color-text-muted)");
 	return /* @__PURE__ */ _(l.Item, {
-		className: e(d["PricingOptions__feature-list-item"], { [d["PricingOptions__feature-list-item--excluded"]]: c === "excluded" }, i && d["PricingOptions__feature-list-item--has-info"], n),
+		className: e(d["PricingOptions__feature-list-item"], { [d["PricingOptions__feature-list-item--excluded"]]: c === "excluded" }, r && d["PricingOptions__feature-list-item--has-info"], n),
 		"data-testid": f || v.featureListItem,
 		leadingVisual: h,
 		leadingVisualAriaLabel: y,
 		leadingVisualFill: b,
 		ref: m,
 		...p,
-		children: [t, i && /* @__PURE__ */ g(u, {
-			text: i,
+		children: [t, r && /* @__PURE__ */ g(u, {
+			text: r,
 			direction: "n",
 			children: /* @__PURE__ */ g("button", {
 				type: "button",
@@ -305,24 +305,24 @@ var v = {
 		className: d["PricingOptions__actions-message-content"],
 		children: t
 	})]
-})), P = p(({ as: t, children: n, className: r, "data-testid": i, ...a }, s) => /* @__PURE__ */ g(o, {
+})), P = p(({ as: t, children: n, className: i, "data-testid": a, ...o }, s) => /* @__PURE__ */ g(r, {
 	ref: s,
 	as: t,
-	"data-testid": i || v.primaryAction,
-	className: e(d["PricingOptions__primary-action"], r),
+	"data-testid": a || v.primaryAction,
+	className: e(d["PricingOptions__primary-action"], i),
 	size: "medium",
 	variant: "primary",
 	block: !0,
-	...a,
+	...o,
 	children: n
-})), F = p(({ as: t, children: n, className: r, "data-testid": i, ...a }, s) => /* @__PURE__ */ g(o, {
+})), F = p(({ as: t, children: n, className: i, "data-testid": a, ...o }, s) => /* @__PURE__ */ g(r, {
 	ref: s,
 	as: t,
-	className: e(d["PricingOptions__primary-action"], r),
-	"data-testid": i || v.secondaryAction,
+	className: e(d["PricingOptions__primary-action"], i),
+	"data-testid": a || v.secondaryAction,
 	variant: "secondary",
 	block: !0,
-	...a,
+	...o,
 	children: n
 })), I = p(({ children: t, className: n, "data-testid": r, ...i }, a) => /* @__PURE__ */ g("div", {
 	ref: a,

package/esm/SubNav/SubNav.js

@@ -2,12 +2,12 @@ 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 { Text as r } from "../Text/Text.js";
-import { TriangleDownIcon as i, TriangleUpIcon as a } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
-import { Button as o } from "../Button/Button.js";
-import { ThemeProvider as s } from "../ThemeProvider/ThemeProvider.js";
-import { useWindowSize as c } from "../hooks/useWindowSize.js";
-import { useOnClickOutside as l } from "../hooks/useOnClickOutside.js";
-import { useKeyboardEscape as u } from "../hooks/useKeyboardEscape.js";
+import { Button as i } from "../Button/Button.js";
+import { ThemeProvider as a } from "../ThemeProvider/ThemeProvider.js";
+import { useOnClickOutside as o } from "../hooks/useOnClickOutside.js";
+import { useKeyboardEscape as s } from "../hooks/useKeyboardEscape.js";
+import { TriangleDownIcon as c, TriangleUpIcon as l } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { useWindowSize as u } from "../hooks/useWindowSize.js";
 import { useFocusTrap as d } from "../hooks/useFocusTrap.js";
 import { useContainsFocus as f } from "./useContainsFocus.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/sub-nav/colors-with-modes-5gfdihUt.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/sub-nav/base-DIkvLW-s.css';/* empty css                                                                                        */
@@ -63,18 +63,18 @@ function N({ children: t }) {
 		})]
 	});
 }
-var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _, hasShadow: y }, x) => {
-	let O = n(x), A = m.useRef(null), j = m.useRef(null), M = m.useRef(null), P = w(null), [L, V] = T(!1), H = t(), [ee, te] = T(!1), { isLarge: U } = c();
+var P = y(_(({ id: i, children: a, className: f, "data-testid": g, fullWidth: _, hasShadow: y }, x) => {
+	let O = n(x), A = m.useRef(null), j = m.useRef(null), M = m.useRef(null), P = w(null), [L, V] = T(!1), H = t(), [ee, te] = T(!1), { isLarge: U } = u();
 	d({
 		containerRef: A,
 		disabled: !L
 	});
-	let W = h.toArray(s), G = b(() => {
+	let W = h.toArray(a), G = b(() => {
 		U || V(!1);
 	}, [U]), K = b(() => {
 		U || V((e) => !e);
 	}, [U]);
-	l(A, G), u(G), S(() => {
+	o(A, G), s(G), S(() => {
 		let e = j.current, t = () => {
 			if (e) {
 				let t = e.getBoundingClientRect().top;
@@ -127,7 +127,7 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 					as: "span",
 					size: "100",
 					children: $
-				}), E(L ? a : i, {
+				}), E(L ? l : c, {
 					className: p["SubNav__overlay-toggle-icon"],
 					size: 13
 				})]
@@ -146,7 +146,7 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 		className: e(p.SubNav__container, Y && p["SubNav--has-sub-heading"], Y && Q && p["SubNav--subHeadingActive"], ee && p["SubNav__container--with-anchor-nav"]),
 		children: /* @__PURE__ */ E(N, { children: /* @__PURE__ */ E("nav", {
 			ref: j,
-			id: o,
+			id: i,
 			className: e(p.SubNav, L && p["SubNav--open"], y && p["SubNav--has-shadow"], _ && p["SubNav--full-width"], f),
 			"data-testid": g || k.root,
 			children: /* @__PURE__ */ D("div", {
@@ -195,16 +195,16 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 	"data-testid": k.heading || i,
 	...a,
 	children: n
-}), L = _(({ children: a, href: o, "aria-current": s, "data-testid": l, className: d, _subMenuVariant: m, variant: h, ...g }, _) => {
-	let v = t(), { isLarge: y } = c(), [x, C] = T(!1), O = n(_), A = w(null);
+}), L = _(({ children: i, href: a, "aria-current": o, "data-testid": l, className: d, _subMenuVariant: m, variant: h, ...g }, _) => {
+	let v = t(), { isLarge: y } = u(), [x, C] = T(!1), O = n(_), A = w(null);
 	f(O, (e) => {
 		e || C(!1);
 	});
-	let j = b(() => C(!0), []), M = b(() => C(!1), []), N = b(() => C((e) => !e), []), P = !!s && s !== "false";
-	u(M), S(() => {
+	let j = b(() => C(!0), []), M = b(() => C(!1), []), N = b(() => C((e) => !e), []), P = !!o && o !== "false";
+	s(M), S(() => {
 		A.current && A.current.toggleAttribute("inert", y && !x);
 	}, [y, x]);
-	let [F, I] = a;
+	let [F, I] = i;
 	return /* @__PURE__ */ D("div", {
 		className: e(p["SubNav__link--has-sub-menu"], x && p["SubNav__link--expanded"], P && p["SubNav__link--has-active-sub-menu"]),
 		"data-testid": l || k.subMenu,
@@ -215,9 +215,9 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 		onBlur: () => null,
 		children: [
 			/* @__PURE__ */ E("a", {
-				href: o,
-				className: e(p.SubNav__link, s && p["SubNav__link--active"], d),
-				"aria-current": s,
+				href: a,
+				className: e(p.SubNav__link, o && p["SubNav__link--active"], d),
+				"aria-current": o,
 				...g,
 				children: /* @__PURE__ */ E(r, {
 					as: "span",
@@ -233,7 +233,7 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 				"aria-expanded": x ? "true" : "false",
 				"aria-controls": v,
 				"aria-label": `${F?.toString().trim()} submenu`,
-				children: /* @__PURE__ */ E(i, {
+				children: /* @__PURE__ */ E(c, {
 					className: p["SubNav__sub-menu-icon"],
 					size: 16
 				})
@@ -288,16 +288,16 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 	}) });
 });
 function z({ children: t, className: n, variant: r = "dropdown", ...i }) {
-	let a = m.useContext(j), o = w(null), { isLarge: l } = c();
+	let o = m.useContext(j), s = w(null), { isLarge: c } = u();
 	return S(() => {
 		let e = (e) => {
-			o.current && !o.current.contains(e.target) || e.target instanceof HTMLAnchorElement || e.stopPropagation();
+			s.current && !s.current.contains(e.target) || e.target instanceof HTMLAnchorElement || e.stopPropagation();
 		};
 		return r === "anchor" && document.addEventListener("click", e, !0), () => {
 			document.removeEventListener("click", e, !0);
 		};
-	}, [r]), r === "anchor" && a?.portalRef.current ? O(/* @__PURE__ */ E("nav", {
-		ref: o,
+	}, [r]), r === "anchor" && o?.portalRef.current ? O(/* @__PURE__ */ E("nav", {
+		ref: s,
 		className: e(p["SubNav__sub-menu"], p["SubNav__sub-menu--anchor"], n),
 		role: "navigation",
 		"aria-label": "Sub navigation",
@@ -308,8 +308,8 @@ function z({ children: t, className: n, variant: r = "dropdown", ...i }) {
 				e.props.onClick?.(t);
 			} }) : null)
 		})
-	}), a.portalRef.current) : /* @__PURE__ */ E(l ? s : m.Fragment, {
-		...l ? { colorMode: "light" } : {},
+	}), o.portalRef.current) : /* @__PURE__ */ E(c ? a : m.Fragment, {
+		...c ? { colorMode: "light" } : {},
 		children: /* @__PURE__ */ E("ul", {
 			className: e(p["SubNav__sub-menu"], p[`SubNav__sub-menu--${r}`], n),
 			...i,
@@ -317,15 +317,15 @@ function z({ children: t, className: n, variant: r = "dropdown", ...i }) {
 		})
 	});
 }
-function B({ children: e, href: t, variant: n = "primary", size: r = "small", ...i }) {
-	return /* @__PURE__ */ E(o, {
+function B({ children: e, href: t, variant: n = "primary", size: r = "small", ...a }) {
+	return /* @__PURE__ */ E(i, {
 		className: p.SubNav__action,
 		as: "a",
 		href: t,
 		variant: n,
 		"data-testid": k.action,
 		size: r,
-		...i,
+		...a,
 		children: e
 	});
 }

package/esm/SubdomainNavBar/NavigationVisbilityObserver.js

@@ -1,26 +1,26 @@
 import e from "../node_modules/clsx/dist/clsx.js";
 import { useProvidedRefOrCreate as t } from "../hooks/useRef.js";
-import { ChevronDownIcon as n } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
-import { useWindowSize as r } from "../hooks/useWindowSize.js";
-import { useVisibilityObserver as i } from "./useVisibilityObserver.js";
-import { useOnClickOutside as a } from "../hooks/useOnClickOutside.js";
-import o from "./SubdomainNavBar.module.js";
-import { useKeyboardEscape as s } from "../hooks/useKeyboardEscape.js";
+import { useOnClickOutside as n } from "../hooks/useOnClickOutside.js";
+import { useKeyboardEscape as r } from "../hooks/useKeyboardEscape.js";
+import { ChevronDownIcon as i } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { useWindowSize as a } from "../hooks/useWindowSize.js";
+import { useVisibilityObserver as o } from "./useVisibilityObserver.js";
+import s from "./SubdomainNavBar.module.js";
 import c, { forwardRef as l, useCallback as u, useRef as d, useState as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/SubdomainNavBar/NavigationVisbilityObserver.tsx
-var h = l(({ children: n, className: a, ...s }, l) => {
-	let u = t(l), [d] = i(u, n), { isMedium: f } = r(), h = Object.values(d).includes(!1);
+var h = l(({ children: n, className: r, ...i }, l) => {
+	let u = t(l), [d] = o(u, n), { isMedium: f } = a(), h = Object.values(d).includes(!1);
 	return /* @__PURE__ */ m("ul", {
-		className: e(o["SubdomainNavBar-primary-nav-list"], a),
+		className: e(s["SubdomainNavBar-primary-nav-list"], r),
 		ref: u,
-		...s,
+		...i,
 		children: [c.Children.map(n, (t) => {
 			if (c.isValidElement(t)) {
 				let n = t.props["data-navitemid"];
 				if (!n) return t;
 				let r = d[n];
-				return c.cloneElement(t, { className: e(t.props.className, f && r && o["SubdomainNavBar-primary-nav-list-item--visible"], f && r === !1 && o["SubdomainNavBar-primary-nav-list-item--invisible"]) });
+				return c.cloneElement(t, { className: e(t.props.className, f && r && s["SubdomainNavBar-primary-nav-list-item--visible"], f && r === !1 && s["SubdomainNavBar-primary-nav-list-item--invisible"]) });
 			}
 			return t;
 		}), h && /* @__PURE__ */ p(g, {
@@ -29,36 +29,36 @@ var h = l(({ children: n, className: a, ...s }, l) => {
 		})]
 	});
 });
-function g({ children: t, className: r, visibilityMap: i }) {
+function g({ children: t, className: a, visibilityMap: o }) {
 	let [l, h] = f(null), g = d(null);
-	a(g, () => y());
+	n(g, () => y());
 	let _ = !!l, v = (e) => {
 		l ? y() : h(e.currentTarget);
 	}, y = u(() => {
 		h(null);
 	}, []);
-	return s(y), /* @__PURE__ */ m("li", {
-		className: e(o["SubdomainNavBar-primary-nav-list-item--overflow"], r),
+	return r(y), /* @__PURE__ */ m("li", {
+		className: e(s["SubdomainNavBar-primary-nav-list-item--overflow"], a),
 		ref: g,
 		children: [/* @__PURE__ */ m("button", {
 			"aria-expanded": _ ? "true" : "false",
 			"aria-controls": "more-navigation",
 			"aria-haspopup": "true",
 			onClick: v,
-			className: e(o["SubdomainNavBar-link"], o["SubdomainNavBar-more-link"]),
-			children: ["More", /* @__PURE__ */ p(n, {})]
+			className: e(s["SubdomainNavBar-link"], s["SubdomainNavBar-more-link"]),
+			children: ["More", /* @__PURE__ */ p(i, {})]
 		}), /* @__PURE__ */ p("div", {
 			id: "more-navigation",
 			style: { display: _ ? "block" : "none" },
-			className: e(o["SubdomainNavBar-overflow-menu"]),
+			className: e(s["SubdomainNavBar-overflow-menu"]),
 			children: /* @__PURE__ */ p("ul", {
-				className: e(o["SubdomainNavBar-overflow-menu-list"]),
+				className: e(s["SubdomainNavBar-overflow-menu-list"]),
 				children: c.Children.map(t, (t) => {
 					if (c.isValidElement(t)) {
 						let n = t.props["data-navitemid"];
-						return !n || i[n] ? null : /* @__PURE__ */ p(c.Fragment, { children: c.cloneElement(t, {
+						return !n || o[n] ? null : /* @__PURE__ */ p(c.Fragment, { children: c.cloneElement(t, {
 							onClick: y,
-							className: e(o["SubdomainNavBar-overflow-menu-item"], t.props.className)
+							className: e(s["SubdomainNavBar-overflow-menu-item"], t.props.className)
 						}) });
 					}
 					return null;