@pantheon-systems/pds-toolkit-react 2.0.0-alpha.44 → 2.0.0-alpha.45

package/dist/index.d.ts

@@ -120,6 +120,7 @@ export * from './libs/types/custom-types';
 export * from './libs/types/input-types';
 export * from './libs/types/layout-types';
 export * from './libs/types/navigation-types';
+export * from './utilities/context-providers/ThemeContext/ThemeContext';
 export * from './utilities/grid/Grid';
 export * from './utilities/grid/GridItem';
 export * from './utilities/hooks/useBreakpoint/useBreakpoint';

package/dist/index.js

@@ -3328,12 +3328,13 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 	wordpress: "wordpress",
 	gatsby: "boltSolid",
 	nextjs: "boltSolid"
-}, yn = ({ className: t, disabled: n, iconName: r = "ellipsisVertical", iconOnly: i = !1, id: a, isSplitButton: o = !1, label: s, menuItems: c, menuPosition: l = "start", onClick: u, size: d = "s", statusDot: f, tally: p, testId: m, undefinedLabel: g = "Unlabeled group", variant: _ = "primary", ...v }) => {
-	let { activeIndex: y, floatingStyles: b, getFloatingProps: x, getItemProps: S, getReferenceProps: C, isMounted: w, isOpen: T, listRef: E, refs: D, setIsOpen: O, transitionStyles: k } = Qt({
+}, yn = ({ className: t, disabled: n, iconName: r = "ellipsisVertical", iconOnly: i = !1, id: a, isSplitButton: o = !1, label: s, menuItems: c, onClick: l, size: u = "s", statusDot: d, tally: f, testId: p, undefinedLabel: m = "Unlabeled group", variant: g = "primary", ..._ }) => {
+	let { activeIndex: v, floatingStyles: y, getFloatingProps: x, getItemProps: S, getReferenceProps: C, isMounted: w, isOpen: T, listRef: E, refs: D, setIsOpen: O, transitionStyles: k } = Qt({
 		enableClick: !n,
 		enableShift: !1,
 		enableTypeahead: !0,
-		placement: l === "end" ? "bottom-end" : "bottom-start",
+		offsetValue: 8,
+		placement: "bottom-start",
 		role: "menu"
 	}), A = "pds-menu-button", j = a, [M] = h(`menu-button-${a}`), N = [], P = [];
 	((e) => {
@@ -3344,7 +3345,7 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 	let F = (e) => {
 		"disabled" in e && e.disabled || ("callback" in e && e.callback && e.callback(e), O(!1));
 	}, I = () => {
-		u && u();
+		l && l();
 	}, L = (t, n, r = "", i = "") => {
 		let a = j + (r ? `-group-${r}` : "") + "-item-" + (n + 1), o = "id" in t && t.id ? t.id : a;
 		if (pn(t)) return /* @__PURE__ */ e.createElement("li", {
@@ -3363,7 +3364,7 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 			role: "presentation"
 		}, t.nodeContent);
 		if (hn(t) || "label" in t && t.label) {
-			let n = P.indexOf(t), r = y === n, i = "isCritical" in t && t.isCritical, a = "criticalLabel" in t ? t.criticalLabel : void 0, s = [];
+			let n = P.indexOf(t), r = v === n, i = "isCritical" in t && t.isCritical, a = "criticalLabel" in t ? t.criticalLabel : void 0, s = [];
 			if ("label" in t && t.label && s.push(t.label), hn(t) && t.linkContent) {
 				let e = t.linkContent;
 				s.push(e.props.children);
@@ -3464,7 +3465,6 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		let n = t.filter(mn || pn), r = n.length > 0, a = Z([
 			"pds-dropdown__panel",
 			`${A}__listbox`,
-			l === "end" ? `${A}__listbox--end` : null,
 			i ? `${A}__listbox--icon-only` : null
 		]), o = 0;
 		if (r) {
@@ -3478,13 +3478,13 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 				id: M,
 				role: "menu",
 				style: {
-					...b,
+					...y,
 					...k,
 					zIndex: "var(--pds-z-index-dropdown)"
 				},
 				...x()
 			}, r.map((t, n) => {
-				let r = N[n], i = "isHeading" in t[0] && t[0].isHeading, a = i ? `${j}-group-${r}-heading` : "", s = `${j}-group-${r}`, c = i ? null : `${g} ${n + 1}`;
+				let r = N[n], i = "isHeading" in t[0] && t[0].isHeading, a = i ? `${j}-group-${r}-heading` : "", s = `${j}-group-${r}`, c = i ? null : `${m} ${n + 1}`;
 				return /* @__PURE__ */ e.createElement("ul", {
 					key: s,
 					"aria-label": c,
@@ -3502,7 +3502,7 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 			id: M,
 			role: "menu",
 			style: {
-				...b,
+				...y,
 				...k,
 				zIndex: "var(--pds-z-index-dropdown)"
 			},
@@ -3516,16 +3516,16 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		return e.forEach((t, o) => {
 			t === i ? (n.push(a), a = [], a.push(t), i = r.shift()) : (a.push(t), o + 1 === e.length && n.push(a));
 		}), n.filter((e) => e.length > 0);
-	}, V, H = d === "m" ? "s" : "xs", U = p ? /* @__PURE__ */ e.createElement(e.Fragment, null, s, /* @__PURE__ */ e.createElement(Bt, {
+	}, V, H = u === "m" ? "s" : "xs", U = f ? /* @__PURE__ */ e.createElement(e.Fragment, null, s, /* @__PURE__ */ e.createElement(Bt, {
 		className: "pds-button__tally",
-		label: p.label,
+		label: f.label,
 		size: H,
-		type: p.type
-	})) : s, ee = p ? /* @__PURE__ */ e.createElement("span", { className: `${A}__accordion-label` }, s, /* @__PURE__ */ e.createElement(Bt, {
+		type: f.type
+	})) : s, ee = f ? /* @__PURE__ */ e.createElement("span", { className: `${A}__accordion-label` }, s, /* @__PURE__ */ e.createElement(Bt, {
 		className: `${A}__tally`,
-		label: p.label,
+		label: f.label,
 		size: "s",
-		type: p.type
+		type: f.type
 	})) : s;
 	if (i || (V = /* @__PURE__ */ e.createElement(Gt, {
 		ref: D.setReference,
@@ -3539,10 +3539,10 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		id: j,
 		isSplitButton: o,
 		label: U,
-		size: d,
-		statusDot: f,
+		size: u,
+		statusDot: d,
 		type: "button",
-		variant: _,
+		variant: g,
 		...C({ onClick: I })
 	})), i) {
 		let t = Wt(s);
@@ -3557,7 +3557,7 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 			hasTooltip: !1,
 			iconName: r,
 			id: j,
-			size: d,
+			size: u,
 			type: "button",
 			variant: "standard",
 			...C({ onClick: I })
@@ -3570,15 +3570,15 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 			G,
 			t
 		]),
-		"data-testid": m,
-		...v
+		"data-testid": p,
+		..._
 	}, /* @__PURE__ */ e.createElement(dn, {
 		disabled: n,
 		label: W
 	}, /* @__PURE__ */ e.createElement("ul", {
 		className: `${A}__mobile-menu`,
 		role: "menu"
-	}, c.map((e, t) => R(e, t)))), V, w && z(c));
+	}, c.map((e, t) => R(e, t)))), V, w && /* @__PURE__ */ e.createElement(b, null, z(c)));
 }, bn = ({ border: t = !1, className: n, defaultValue: r, disabled: i = !1, iconOnly: a = !1, id: o, label: s, onChange: c, options: l, size: u = "m", value: d, ...f }) => {
 	let p = "pds-segmented-button", m = u === "m" ? null : `${p}--${u}`, g = t ? `${p}--bordered` : null, _ = a ? `${p}--icon-only` : null;
 	a && process.env.NODE_ENV !== "production" && l.some((e) => !e.iconName) && console.warn("[SegmentedButton] `iconOnly` mode requires every option to have an `iconName`. Options without one will render an empty segment.");
@@ -11839,33 +11839,33 @@ var _a = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 			window.removeEventListener("resize", n);
 		};
 	}, []), n;
-}, Ba = ({ children: t, className: n, drawerContent: r, drawerProps: a, hasDrawerToggle: o, hasSidebarToggle: c, isDrawerOpen: u = !1, isSidebarCollapsed: d, keyboardShortcuts: p = !0, labels: g, mainBackground: _, mainContentElement: v = "main", mainContentMaxWidth: y = 1600, mainContentProps: b, onDrawerToggle: x, onSidebarToggle: S, scrollableContent: C, sidebarBackground: w, sidebarCollapsedWidth: T = 4, sidebarExpandedWidth: E = "15%", sidebarExpandedWidthMax: D = 18, sidebarExpandedWidthMin: O = 14.75, sidebarProps: k, ...A }) => {
-	let [j, M] = h(d || !1);
+}, Ba = ({ children: t, className: n, drawerContent: r, drawerProps: a, hasDrawerToggle: o, hasSidebarToggle: c, isDrawerOpen: u = !1, isSidebarCollapsed: d, keyboardShortcuts: p = !0, labels: g, mainBackground: _, mainContentElement: v = "main", mainContentMaxWidth: y = 1600, mainContentProps: b, onDrawerToggle: x, onSidebarToggle: S, scrollableContent: C, sidebarBackground: w, sidebarCollapsedWidth: T = 4, sidebarExpandedWidth: E = "15%", sidebarExpandedWidthMax: D = 18, sidebarExpandedWidthMin: O = 14.75, sidebarProps: k, topOffset: A, ...j }) => {
+	let [M, N] = h(d || !1);
 	l(() => {
-		M(d || !1);
+		N(d || !1);
 	}, [d]);
-	let N = "pds-app-layout", P = C ? `${N}--scrollable` : null, F = {
+	let P = "pds-app-layout", F = C ? `${P}--scrollable` : null, I = {
 		collapseSidebar: "Press [ to collapse sidebar",
 		drawerToggle: "Open account menu",
 		expandSidebar: "Press ] to expand sidebar",
 		skipToContent: "Skip to main content",
 		...g
-	}, I = b?.id ?? "app-layout-main", L = y == null ? void 0 : typeof y == "number" ? `${y}px` : y, R = j ? `${T}rem` : `${E}`, z = {
+	}, L = b?.id ?? "app-layout-main", R = y == null ? void 0 : typeof y == "number" ? `${y}px` : y, z = A == null ? void 0 : typeof A == "number" ? `${A}px` : A, B = M ? `${T}rem` : `${E}`, V = {
 		backgroundColor: w || void 0,
-		maxWidth: j ? void 0 : `${D}rem`,
-		minWidth: j ? `${T}rem` : `${O}rem`,
-		width: R
-	}, B = m(!1), V = () => {
-		if (B.current = !1, S) {
+		maxWidth: M ? void 0 : `${D}rem`,
+		minWidth: M ? `${T}rem` : `${O}rem`,
+		width: B
+	}, H = m(!1), U = () => {
+		if (H.current = !1, S) {
 			S();
 			return;
 		}
-		M(!j);
-	}, H = za();
+		N(!M);
+	}, ee = za();
 	l(() => {
-		H === "sm" && !j ? (B.current = !0, S ? S() : M(!0)) : H !== "sm" && B.current && (B.current = !1, S ? S() : M(!1));
-	}, [H]);
-	let U = s(() => {
+		ee === "sm" && !M ? (H.current = !0, S ? S() : N(!0)) : ee !== "sm" && H.current && (H.current = !1, S ? S() : N(!1));
+	}, [ee]);
+	let W = s(() => {
 		let e = document.activeElement;
 		if (!e) return !1;
 		let t = e.tagName.toLowerCase();
@@ -11882,66 +11882,75 @@ var _a = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 			].includes(t);
 		}
 		return e.isContentEditable;
-	}, []), ee = p && c;
+	}, []), G = p && c;
 	bt("[", (e) => {
-		U() || (e.preventDefault(), j || V());
-	}, { enabled: ee }), bt("]", (e) => {
-		U() || (e.preventDefault(), j && V());
-	}, { enabled: ee });
-	let W = m(null);
+		W() || (e.preventDefault(), M || U());
+	}, { enabled: G }), bt("]", (e) => {
+		W() || (e.preventDefault(), M && U());
+	}, { enabled: G });
+	let K = m(null);
 	f(() => {
-		let e = () => {
-			if (!W.current) return;
-			let e = Math.max(0, Math.round(W.current.getBoundingClientRect().top + window.scrollY));
-			W.current.style.setProperty("--pds-app-layout-top-offset", `${e}px`);
+		let e = K.current;
+		if (!e) return;
+		if (z != null) {
+			e.style.setProperty("--pds-app-layout-top-offset", z);
+			return;
+		}
+		let t = () => {
+			let t = Math.max(0, Math.round(e.getBoundingClientRect().top + window.scrollY));
+			e.style.setProperty("--pds-app-layout-top-offset", `${t}px`);
 		};
-		e();
-		let t = new ResizeObserver(e);
-		return t.observe(document.documentElement), () => t.disconnect();
-	}, []);
-	let G = Ie(t), K = G.__unslotted, q = G.header, te = G.footer, ne = G.sidebar, re = G.identity, ie = G["content-top"], ae = G.navigation, J = G["content-bottom"], Y = re || ie || ae || J, oe = Y ? /* @__PURE__ */ e.createElement(e.Fragment, null, (re || o) && /* @__PURE__ */ e.createElement("div", { className: `${N}__sidebar-identity` }, re, o && !j && /* @__PURE__ */ e.createElement(Jt, {
+		t();
+		let n = e.parentElement, r = new ResizeObserver(t);
+		r.observe(document.body);
+		let i;
+		return n && (r.observe(n), i = new MutationObserver(t), i.observe(n, { childList: !0 })), window.addEventListener("resize", t), () => {
+			r.disconnect(), i?.disconnect(), window.removeEventListener("resize", t);
+		};
+	}, [z]);
+	let q = Ie(t), te = q.__unslotted, ne = q.header, re = q.footer, ie = q.sidebar, ae = q.identity, J = q["content-top"], Y = q.navigation, oe = q["content-bottom"], X = ae || J || Y || oe, se = X ? /* @__PURE__ */ e.createElement(e.Fragment, null, (ae || o) && /* @__PURE__ */ e.createElement("div", { className: `${P}__sidebar-identity` }, ae, o && !M && /* @__PURE__ */ e.createElement(Jt, {
 		hasBorder: !0,
-		ariaLabel: F.drawerToggle,
-		className: `${N}__drawer-toggle`,
+		ariaLabel: I.drawerToggle,
+		className: `${P}__drawer-toggle`,
 		iconName: "sidebar",
 		onClick: x,
 		size: "s"
-	})), ie && /* @__PURE__ */ e.createElement("div", { className: `${N}__sidebar-content-top` }, ie), ae && /* @__PURE__ */ e.createElement("div", { className: `${N}__sidebar-navigation` }, ae), J && /* @__PURE__ */ e.createElement("div", { className: `${N}__sidebar-content-bottom` }, J)) : ne, X = i(v, {
+	})), J && /* @__PURE__ */ e.createElement("div", { className: `${P}__sidebar-content-top` }, J), Y && /* @__PURE__ */ e.createElement("div", { className: `${P}__sidebar-navigation` }, Y), oe && /* @__PURE__ */ e.createElement("div", { className: `${P}__sidebar-content-bottom` }, oe)) : ie, ce = i(v, {
 		...b,
-		className: Z([`${N}__main`, b?.className]),
-		id: I,
+		className: Z([`${P}__main`, b?.className]),
+		id: L,
 		tabIndex: b?.tabIndex ?? -1,
 		style: {
 			...b?.style,
 			backgroundColor: _ || void 0
 		}
 	}, /* @__PURE__ */ e.createElement("div", {
-		className: `${N}__main-inner`,
-		style: { maxWidth: L }
-	}, K)), se = te ? /* @__PURE__ */ e.createElement("div", {
-		className: `${N}__content-column`,
+		className: `${P}__main-inner`,
+		style: { maxWidth: R }
+	}, te)), le = /* @__PURE__ */ e.createElement("div", {
+		className: `${P}__content-column`,
 		style: { backgroundColor: _ || void 0 }
-	}, X, /* @__PURE__ */ e.createElement("div", { className: `${N}__footer` }, /* @__PURE__ */ e.createElement("div", {
-		className: `${N}__footer-inner`,
-		style: { maxWidth: L }
-	}, te))) : X, ce = /* @__PURE__ */ e.createElement(e.Fragment, null, (ne || Y) && /* @__PURE__ */ e.createElement("div", {
+	}, ce, re && /* @__PURE__ */ e.createElement("div", { className: `${P}__footer` }, /* @__PURE__ */ e.createElement("div", {
+		className: `${P}__footer-inner`,
+		style: { maxWidth: R }
+	}, re))), ue = /* @__PURE__ */ e.createElement(e.Fragment, null, (ie || X) && /* @__PURE__ */ e.createElement("div", {
 		...k,
 		className: Z([
-			`${N}__sidebar`,
-			j ? `${N}__sidebar--collapsed` : null,
+			`${P}__sidebar`,
+			M ? `${P}__sidebar--collapsed` : null,
 			k?.className
 		]),
-		style: z
+		style: V
 	}, c && /* @__PURE__ */ e.createElement(xt, {
-		className: `${N}__sidebar-toggle-tooltip`,
-		content: j ? F.expandSidebar : F.collapseSidebar,
+		className: `${P}__sidebar-toggle-tooltip`,
+		content: M ? I.expandSidebar : I.collapseSidebar,
 		customTrigger: /* @__PURE__ */ e.createElement("button", {
-			"aria-expanded": !j,
-			"aria-label": j ? F.expandSidebar : F.collapseSidebar,
-			className: `${N}__sidebar-toggle-button`,
-			onClick: V,
+			"aria-expanded": !M,
+			"aria-label": M ? I.expandSidebar : I.collapseSidebar,
+			className: `${P}__sidebar-toggle-button`,
+			onClick: U,
 			type: "button"
-		}, /* @__PURE__ */ e.createElement("span", { className: `${N}__sidebar-toggle-icon` }, /* @__PURE__ */ e.createElement(Q, {
+		}, /* @__PURE__ */ e.createElement("span", { className: `${P}__sidebar-toggle-icon` }, /* @__PURE__ */ e.createElement(Q, {
 			iconName: "angleLeft",
 			size: "s",
 			verticalAlign: "-1px"
@@ -11951,20 +11960,20 @@ var _a = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 			crossAxis: -96
 		},
 		preferredPlacement: "right-end"
-	}), /* @__PURE__ */ e.createElement("div", { className: `${N}__sidebar-inner` }, oe)), se);
+	}), /* @__PURE__ */ e.createElement("div", { className: `${P}__sidebar-inner` }, se)), le);
 	return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
-		ref: W,
+		ref: K,
 		className: Z([
-			N,
 			P,
-			q ? `${N}--has-header` : null,
+			F,
+			ne ? `${P}--has-header` : null,
 			n ?? ""
 		]),
-		...A
+		...j
 	}, /* @__PURE__ */ e.createElement(zr, {
-		destination: I,
-		text: F.skipToContent
-	}), q ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: `${N}__header` }, q), /* @__PURE__ */ e.createElement("div", { className: `${N}__body` }, ce)) : ce), o && /* @__PURE__ */ e.createElement(ji, {
+		destination: L,
+		text: I.skipToContent
+	}), ne ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: `${P}__header` }, ne), /* @__PURE__ */ e.createElement("div", { className: `${P}__body` }, ue)) : ue), o && /* @__PURE__ */ e.createElement(ji, {
 		...a,
 		isOpen: u,
 		placement: "left",
@@ -12080,12 +12089,62 @@ var _a = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		},
 		...g
 	}, r);
-}, qa = ({ children: t, mobileMaxWidth: n = 767 }) => (l(() => {
-	let e = document.documentElement, t = () => {
-		window.innerWidth <= n ? e.setAttribute("data-pds-mobile", "") : e.removeAttribute("data-pds-mobile");
+}, qa = (e) => {
+	let t = typeof window < "u", [n, r] = h(((e) => t ? window.matchMedia(e).matches : !1)(e));
+	return l(() => {
+		if (!t) return;
+		let n = window.matchMedia(e), i = () => {
+			r(n.matches);
+		};
+		return r(n.matches), n.addEventListener ? (n.addEventListener("change", i), () => n.removeEventListener("change", i)) : (n.addListener(i), () => n.removeListener(i));
+	}, [e]), n;
+}, Ja = [
+	"light",
+	"dark",
+	"system"
+], Ya = (e) => typeof e == "string" && Ja.includes(e), Xa = r(null), Za = {
+	resolvedTheme: "light",
+	setTheme: () => {},
+	theme: "light"
+}, Qa = ({ defaultTheme: e = "light", storageKey: t = "pds-theme" } = {}) => `(function(){try{var t=localStorage.getItem(${JSON.stringify(t)})||${JSON.stringify(e)};if(t==='system'){t=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';}document.documentElement.setAttribute('data-theme',t);}catch(e){}})();`, $a = ({ children: t, defaultTheme: n = "light", disableInitScript: r = !1, nodeRef: i, onThemeChange: a, persist: o = !0, storageKey: c = "pds-theme", theme: u }) => {
+	let d = u !== void 0, f = !r && !d && o && !i, [p, m] = h(n), [g, _] = h(!1), v = d ? u : p, y = qa("(prefers-color-scheme: dark)"), b = v === "system" ? g && y ? "dark" : "light" : v;
+	l(() => {
+		if (_(!0), !(d || !o || typeof window > "u")) try {
+			let e = window.localStorage.getItem(c);
+			Ya(e) && m(e);
+		} catch {}
+	}, []), l(() => {
+		typeof document > "u" || (i?.current ?? document.documentElement).setAttribute("data-theme", b);
+	}, [i, b]);
+	let x = {
+		resolvedTheme: b,
+		setTheme: s((e) => {
+			if (!d && (m(e), o && typeof window < "u")) try {
+				window.localStorage.setItem(c, e);
+			} catch {}
+			a?.(e);
+		}, [
+			d,
+			a,
+			o,
+			c
+		]),
+		theme: v
 	};
-	return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
-}, [n]), /* @__PURE__ */ e.createElement(vt, null, t)), Ja = ({ asContainer: t = !1, children: n, className: r, dense: i = !1, gap: a = "xl", mobileGap: o, stackBelow: s, ...c }) => {
+	return /* @__PURE__ */ e.createElement(Xa.Provider, { value: x }, f && /* @__PURE__ */ e.createElement("script", { dangerouslySetInnerHTML: { __html: Qa({
+		defaultTheme: n,
+		storageKey: c
+	}) } }), t);
+}, eo = () => c(Xa) ?? Za, to = ({ children: t, enableThemeSwitching: n = !1, mobileMaxWidth: r = 767, themeProps: i = {} }) => {
+	l(() => {
+		let e = document.documentElement, t = () => {
+			window.innerWidth <= r ? e.setAttribute("data-pds-mobile", "") : e.removeAttribute("data-pds-mobile");
+		};
+		return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
+	}, [r]);
+	let a = n ? /* @__PURE__ */ e.createElement($a, i, t) : t;
+	return /* @__PURE__ */ e.createElement(vt, null, a);
+}, no = ({ asContainer: t = !1, children: n, className: r, dense: i = !1, gap: a = "xl", mobileGap: o, stackBelow: s, ...c }) => {
 	let l = "pds-grid", u = a === "xl" ? null : `${l}--gap-${a}`, d = i ? `${l}--dense` : null, f = t || s ? `${l}--container` : null, p = s ? `${l}--stack-${s}` : null, m = o ?? a, h = m === a ? null : `${l}-gap-mobile--${m}`;
 	return /* @__PURE__ */ e.createElement("div", {
 		className: Z([
@@ -12099,7 +12158,7 @@ var _a = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		]),
 		...c
 	}, n);
-}, Ya = ({ children: t, className: n, rowSpanLg: r, rowSpanMd: i, rowSpanSm: a, rowSpanXl: o, spanLg: s, spanMd: c, spanSm: l, spanXl: u, ...d }) => {
+}, ro = ({ children: t, className: n, rowSpanLg: r, rowSpanMd: i, rowSpanSm: a, rowSpanXl: o, spanLg: s, spanMd: c, spanSm: l, spanXl: u, ...d }) => {
 	let f = "pds-grid-item", p = [
 		l ? `${f}--sm-${l}` : null,
 		c ? `${f}--md-${c}` : null,
@@ -12118,16 +12177,7 @@ var _a = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		]),
 		...d
 	}, t);
-}, Xa = (e) => {
-	let t = typeof window < "u", [n, r] = h(((e) => t ? window.matchMedia(e).matches : !1)(e));
-	return l(() => {
-		if (!t) return;
-		let n = window.matchMedia(e), i = () => {
-			r(n.matches);
-		};
-		return r(n.matches), n.addEventListener ? (n.addEventListener("change", i), () => n.removeEventListener("change", i)) : (n.addListener(i), () => n.removeListener(i));
-	}, [e]), n;
-}, Za = () => {
+}, io = () => {
 	let e = typeof window < "u", [t, n] = h(e && window.innerWidth !== void 0 ? window.innerWidth : 1024);
 	return l(() => {
 		if (!e) return;
@@ -12141,6 +12191,6 @@ var _a = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 	}, []), t;
 };
 //#endregion
-export { kn as ActionCard, Ba as AppLayout, Ue as Avatar, We as Badge, gi as Banner, $n as BarChart, Vt as BranchDiff, Vr as Breadcrumb, Gt as Button, Kt as ButtonLink, Xr as ButtonNav, Lr as CTALink, On as Callout, An as Card, jn as CardSelect, vr as Checkbox, yr as CheckboxFieldset, br as CheckboxGroup, Yt as ClipboardButton, Xt as CloseButton, cr as CodeBlock, xr as Combobox, Cr as ComboboxMultiselect, Mn as CompactEmptyState, ur as ComparisonList, Qr as Container, Dr as Datepicker, Va as DocsLayout, ji as Drawer, tn as Dropdown, Zr as DropdownMenu, zi as ExpansionPanel, Bi as ExpansionPanelGroup, mr as FileDiff, Or as FileUpload, un as FilterButton, Ka as FlexContainer, Mi as FullScreenOverlay, qa as GlobalWrapper, Ja as Grid, Ya as GridItem, fr as HorizontalEmptyState, Q as Icon, Jt as IconButton, _r as IdentityBlock, vi as InlineMessage, kr as InputGroup, tr as LineChart, Rr as LinkNewWindow, xi as MIN_AUTO_CLOSE_DURATION, yn as MenuButton, Ni as Modal, $r as Navbar, Ii as Pagination, Li as PaginationCompact, Ri as PaginationMini, Vi as Panel, Hi as PanelList, Ui as PanelRow, qi as PantheonLogo, gr as PaymentIcon, Br as Picture, rr as PieChart, Cn as PlatformIcon, Xi as Popover, Qi as ProgressBar, ea as ProgressRing, ar as ProportionBar, Ar as RadioGroup, Tn as SSOButton, bi as SectionMessage, bn as SegmentedButton, Fn as Select, Pn as SelectOptionGroup, ei as SideNav, ni as SideNavGlobal, ti as SideNavGlobalItem, Ha as SidebarLayout, ta as SiteFooter, ii as SiteMenu, na as SiteOptionDisplay, ra as SiteSearch, vn as SiteTypeIcon, _n as SiteTypeLabel, Yn as Skeleton, zr as Skiplink, ha as SortableList, la as SortableListHeader, _a as SortableRow, Rt as Spinner, xn as SplitButton, zt as StatusBadge, va as StatusChecker, ya as StatusIndicator, fn as StatusTypeLabels, ba as StepList, xa as Stepper, Ua as StepperLayout, jr as Switch, oi as TabMenu, wa as Table, ja as TableOfContents, Ma as Tabs, La as Tag, Nr as TagsInput, Bt as Tally, Ir as TextInput, Pr as Textarea, ui as ThemeSwitcher, Wa as ThreeItemLayout, Oi as Toast, ki as ToastType, Ti as Toaster, Ci as ToasterContext, xt as Tooltip, ci as TreeNav, Ga as TwoItemLayout, di as UserMenu, Ra as UtilityBar, En as UtilityButton, pr as VerticalEmptyState, Ca as VerticalStepper, dr as VideoEmbed, fi as WorkspaceSelector, Tr as getPresetDateRange, Be as iconList, mn as isHeadingItemType, hn as isLinkItemType, gn as isNodeItemType, pn as isSeparatorItemType, Na as tagColors, Pa as tagSolidColors, za as useBreakpoint, qt as useClipboard, Qt as useDropdown, bt as useKeyPress, Xa as useMediaQuery, Ai as useToast, Za as useWindowWidth };
+export { kn as ActionCard, Ba as AppLayout, Ue as Avatar, We as Badge, gi as Banner, $n as BarChart, Vt as BranchDiff, Vr as Breadcrumb, Gt as Button, Kt as ButtonLink, Xr as ButtonNav, Lr as CTALink, On as Callout, An as Card, jn as CardSelect, vr as Checkbox, yr as CheckboxFieldset, br as CheckboxGroup, Yt as ClipboardButton, Xt as CloseButton, cr as CodeBlock, xr as Combobox, Cr as ComboboxMultiselect, Mn as CompactEmptyState, ur as ComparisonList, Qr as Container, Dr as Datepicker, Va as DocsLayout, ji as Drawer, tn as Dropdown, Zr as DropdownMenu, zi as ExpansionPanel, Bi as ExpansionPanelGroup, mr as FileDiff, Or as FileUpload, un as FilterButton, Ka as FlexContainer, Mi as FullScreenOverlay, to as GlobalWrapper, no as Grid, ro as GridItem, fr as HorizontalEmptyState, Q as Icon, Jt as IconButton, _r as IdentityBlock, vi as InlineMessage, kr as InputGroup, tr as LineChart, Rr as LinkNewWindow, xi as MIN_AUTO_CLOSE_DURATION, yn as MenuButton, Ni as Modal, $r as Navbar, Ii as Pagination, Li as PaginationCompact, Ri as PaginationMini, Vi as Panel, Hi as PanelList, Ui as PanelRow, qi as PantheonLogo, gr as PaymentIcon, Br as Picture, rr as PieChart, Cn as PlatformIcon, Xi as Popover, Qi as ProgressBar, ea as ProgressRing, ar as ProportionBar, Ar as RadioGroup, Tn as SSOButton, bi as SectionMessage, bn as SegmentedButton, Fn as Select, Pn as SelectOptionGroup, ei as SideNav, ni as SideNavGlobal, ti as SideNavGlobalItem, Ha as SidebarLayout, ta as SiteFooter, ii as SiteMenu, na as SiteOptionDisplay, ra as SiteSearch, vn as SiteTypeIcon, _n as SiteTypeLabel, Yn as Skeleton, zr as Skiplink, ha as SortableList, la as SortableListHeader, _a as SortableRow, Rt as Spinner, xn as SplitButton, zt as StatusBadge, va as StatusChecker, ya as StatusIndicator, fn as StatusTypeLabels, ba as StepList, xa as Stepper, Ua as StepperLayout, jr as Switch, oi as TabMenu, wa as Table, ja as TableOfContents, Ma as Tabs, La as Tag, Nr as TagsInput, Bt as Tally, Ir as TextInput, Pr as Textarea, Xa as ThemeContext, $a as ThemeContextProvider, ui as ThemeSwitcher, Wa as ThreeItemLayout, Oi as Toast, ki as ToastType, Ti as Toaster, Ci as ToasterContext, xt as Tooltip, ci as TreeNav, Ga as TwoItemLayout, di as UserMenu, Ra as UtilityBar, En as UtilityButton, pr as VerticalEmptyState, Ca as VerticalStepper, dr as VideoEmbed, fi as WorkspaceSelector, Tr as getPresetDateRange, Qa as getThemeInitScript, Be as iconList, mn as isHeadingItemType, hn as isLinkItemType, gn as isNodeItemType, pn as isSeparatorItemType, Na as tagColors, Pa as tagSolidColors, za as useBreakpoint, qt as useClipboard, Qt as useDropdown, bt as useKeyPress, qa as useMediaQuery, eo as useTheme, Ai as useToast, io as useWindowWidth };
 
 //# sourceMappingURL=index.js.map