@pantheon-systems/pds-toolkit-react 2.0.0-alpha.71 → 2.0.0-alpha.72

package/dist/index.d.ts

@@ -97,6 +97,7 @@ export * from './components/SortableList/SortableList';
 export * from './components/SortableList/SortableListHeader';
 export * from './components/SortableList/SortableRow';
 export * from './components/SortableList/types';
+export * from './components/StatPanel/StatPanel';
 export * from './components/StatusChecker/StatusChecker';
 export * from './components/StatusIndicator/StatusIndicator';
 export * from './components/steppers/StepList/StepList';
@@ -113,6 +114,7 @@ export * from './libs/components/SiteOptionDisplay/SiteOptionDisplay';
 export * from './layouts/AppLayout/AppLayout';
 export * from './layouts/DocsLayout/DocsLayout';
 export * from './layouts/SidebarLayout/SidebarLayout';
+export * from './layouts/StatPanelGroup/StatPanelGroup';
 export * from './layouts/StepperLayout/StepperLayout';
 export * from './layouts/ThreeItemLayout/ThreeItemLayout';
 export * from './layouts/TwoItemLayout/TwoItemLayout';

package/dist/index.js

@@ -11605,11 +11605,40 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		key: t.id,
 		className: `${w}__cell`
 	}, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, t.label, ": "), j[t.id] ?? null)) : t));
-}, xo = [
+}, xo = ({ actionCallback: t, actionIcon: n, actionLabel: r, className: i, description: a, icon: o, iconColor: s = "neutral", stat: c, title: l, ...u }) => {
+	let f = "pds-stat-panel", p = s === "neutral" ? null : `${f}--${s}`, m = d(), h = n && r && t;
+	return /* @__PURE__ */ e.createElement("div", {
+		"aria-labelledby": m,
+		className: Z([
+			f,
+			p,
+			i ?? ""
+		]),
+		role: "group",
+		...u
+	}, /* @__PURE__ */ e.createElement("div", { className: Z([`${f}__header`, h ? `${f}__header--has-action` : null]) }, /* @__PURE__ */ e.createElement("span", {
+		className: `${f}__title`,
+		id: m
+	}, l), h && /* @__PURE__ */ e.createElement(An, {
+		ariaLabel: r,
+		className: `${f}__action`,
+		iconName: n,
+		onClick: t,
+		size: "s"
+	})), /* @__PURE__ */ e.createElement("div", { className: `${f}__body` }, o === "spinner" ? /* @__PURE__ */ e.createElement(bn, {
+		isInline: !0,
+		className: `${f}__icon ${f}__icon--spinner`,
+		size: "xl"
+	}) : /* @__PURE__ */ e.createElement(Q, {
+		className: `${f}__icon`,
+		iconName: o,
+		size: "l"
+	}), /* @__PURE__ */ e.createElement("span", { className: `${f}__stat` }, c)), a && /* @__PURE__ */ e.createElement("p", { className: `${f}__description` }, a));
+}, So = [
 	"default",
 	"working",
 	"checked"
-], So = ({ alignment: t = "left", className: n, componentWidth: r, labelStrings: i = {}, lastChecked: a, onCheck: o, state: s = "default", ...c }) => {
+], Co = ({ alignment: t = "left", className: n, componentWidth: r, labelStrings: i = {}, lastChecked: a, onCheck: o, state: s = "default", ...c }) => {
 	let l = {
 		checkForUpdates: "Check for updates",
 		checking: "Checking...",
@@ -11656,7 +11685,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		triggerIconColor: "default",
 		triggerIconSize: "s"
 	}), t === "left" && g));
-}, Co = ({ className: t, label: n = null, linkContent: r, type: i = "neutral", ...a }) => {
+}, wo = ({ className: t, label: n = null, linkContent: r, type: i = "neutral", ...a }) => {
 	let o = "pds-status-indicator", c = `${o}--${i}`, l = /* @__PURE__ */ e.createElement(e.Fragment, null, i === "working" ? /* @__PURE__ */ e.createElement(bn, {
 		className: `${o}__spinner`,
 		size: "m"
@@ -11673,7 +11702,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		]),
 		...a
 	}, r ? d : l);
-}, wo = ({ className: t, contentAlignment: n = "indented", layoutDirection: r = "vertical", steps: i, ...a }) => {
+}, To = ({ className: t, contentAlignment: n = "indented", layoutDirection: r = "vertical", steps: i, ...a }) => {
 	let o = "pds-step-list", s = `${o}--${n}`, c = r === "horizontal" ? `${o}--horizontal` : "", l = i.map(({ content: t, header: r }, i) => {
 		let a = /* @__PURE__ */ e.createElement("div", { className: `${o}__number` }, /* @__PURE__ */ e.createElement("span", null, i + 1)), s = /* @__PURE__ */ e.createElement("div", { className: `${o}__header` }, r), c = t ? /* @__PURE__ */ e.createElement("div", { className: `${o}__content` }, t) : null, l = `${o}__step`;
 		return /* @__PURE__ */ e.createElement("li", {
@@ -11691,7 +11720,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		style: r === "horizontal" ? { "--step-list-columns": i.length } : void 0,
 		...a
 	}, l);
-}, To = ({ className: t, steps: n, translatableLabels: r = {
+}, Eo = ({ className: t, steps: n, translatableLabels: r = {
 	step: "Step",
 	completed: "completed",
 	hasError: "has an error",
@@ -11780,7 +11809,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		"data-steps": d,
 		...i
 	}, /* @__PURE__ */ e.createElement("div", { className: `${o}__steps` }, m)));
-}, Eo = ({ _isFirstStep: t, backButton: n, forwardButton: r, hasError: i, id: a, isComplete: o, isCurrent: s, label: c, stepContent: l, ...u }) => {
+}, Do = ({ _isFirstStep: t, backButton: n, forwardButton: r, hasError: i, id: a, isComplete: o, isCurrent: s, label: c, stepContent: l, ...u }) => {
 	let d = "pds-vert-stepper", f = `${d}__step`, p = [f];
 	return s && p.push(`${f}--current`), o && p.push(`${f}--complete`), i && p.push(`${f}--error`), /* @__PURE__ */ e.createElement("li", {
 		className: Z([...p]),
@@ -11806,14 +11835,14 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		size: "s",
 		variant: "highlight"
 	})))));
-}, Do = ({ className: t, labelStrings: n = {
+}, Oo = ({ className: t, labelStrings: n = {
 	step: "Step",
 	completed: "completed",
 	hasError: "has an error"
 }, steps: r, ...i }) => {
 	let a = "pds-vert-stepper", o = r.length, s = r.findIndex((e) => e.isCurrent), c = r.map((t, r) => {
 		let i = r + 1, a = r === s, c = r === 0, l = t.isComplete || !1, u = t.hasError && a, d = `${n.step} ${i}`;
-		return l && (d = `${n.step} ${i}, ${n.completed}`), u && (d = `${n.step} ${i}, ${n.hasError}`), /* @__PURE__ */ e.createElement(Eo, {
+		return l && (d = `${n.step} ${i}, ${n.completed}`), u && (d = `${n.step} ${i}, ${n.hasError}`), /* @__PURE__ */ e.createElement(Do, {
 			key: `s${i}`,
 			_isFirstStep: c,
 			"aria-current": a ? "step" : null,
@@ -11834,7 +11863,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		className: Z([a, t ?? ""]),
 		...i
 	}, /* @__PURE__ */ e.createElement("ol", { className: `${a}__steps` }, r && c));
-}, Oo = ({ className: t, closeDetailPanelLabel: n = "Close detail panel", columns: r, currentPage: i, defaultSortKey: a, defaultSortOrder: o = "asc", detailPanelNav: s = !0, detailPanelTitle: c, detailPanelWidth: l, emptyState: f, emptyStateHeading: p = "No results found.", emptyStateMessage: _, footer: v, getPageSizeLabel: y = (e) => `Show ${e} rows per page`, getRowClassName: b, getRowId: x, getRowSelectDisabledReason: S, getSelectRowLabel: C = (e, t) => `Select row ${t}`, getSortLabel: w = (e) => `Sort by ${e}`, inspectedRowId: T, isLoading: E = !1, isRowSelectable: D = () => !0, itemsPerPage: O, loadingRowCount: k = 5, maxHeight: A, minHeight: j, nextDetailPanelRowLabel: M = "Next row", onDetailPanelNext: N, onDetailPanelPrev: P, onPageChange: F, onPageSizeChange: I, onRowInspect: L, onRowSelectionChange: R, onSort: z, pageSizeOptions: B, pageSizeSelectLabel: V = "Rows per page", paginationLabels: H, panel: U, prevDetailPanelRowLabel: W = "Previous row", renderDetailPanel: G, renderDetailPanelFooter: K, rowData: q, selectAllLabel: J = "Select all rows", selectedRows: ee, sortKey: te, sortOrder: ne, totalItemCount: re, ...ie }) => {
+}, ko = ({ className: t, closeDetailPanelLabel: n = "Close detail panel", columns: r, currentPage: i, defaultSortKey: a, defaultSortOrder: o = "asc", detailPanelNav: s = !0, detailPanelTitle: c, detailPanelWidth: l, emptyState: f, emptyStateHeading: p = "No results found.", emptyStateMessage: _, footer: v, getPageSizeLabel: y = (e) => `Show ${e} rows per page`, getRowClassName: b, getRowId: x, getRowSelectDisabledReason: S, getSelectRowLabel: C = (e, t) => `Select row ${t}`, getSortLabel: w = (e) => `Sort by ${e}`, inspectedRowId: T, isLoading: E = !1, isRowSelectable: D = () => !0, itemsPerPage: O, loadingRowCount: k = 5, maxHeight: A, minHeight: j, nextDetailPanelRowLabel: M = "Next row", onDetailPanelNext: N, onDetailPanelPrev: P, onPageChange: F, onPageSizeChange: I, onRowInspect: L, onRowSelectionChange: R, onSort: z, pageSizeOptions: B, pageSizeSelectLabel: V = "Rows per page", paginationLabels: H, panel: U, prevDetailPanelRowLabel: W = "Previous row", renderDetailPanel: G, renderDetailPanelFooter: K, rowData: q, selectAllLabel: J = "Select all rows", selectedRows: ee, sortKey: te, sortOrder: ne, totalItemCount: re, ...ie }) => {
 	let ae = "pds-table", oe = d(), Y = d(), se = h(null), X = z !== void 0, ce = F !== void 0, le = I !== void 0, ue = ce || O !== void 0 || B !== void 0, de = q.length > 0 || ce && (re ?? 0) > 0, [fe, pe] = g({
 		key: a ?? "",
 		order: a === void 0 ? "asc" : o
@@ -12059,7 +12088,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		variant: "standard"
 	}))))));
 	return U ? /* @__PURE__ */ e.createElement(La, { padding: "none" }, et) : et;
-}, ko = [
+}, Ao = [
 	" ",
 	"/",
 	".",
@@ -12077,7 +12106,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 	"=",
 	"|",
 	"~"
-], Ao = (e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), jo = (e) => {
+], jo = (e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), Mo = (e) => {
 	let t = [];
 	return e.forEach((e) => {
 		let { id: n, innerText: r } = e;
@@ -12090,18 +12119,18 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 			title: r
 		});
 	}), t;
-}, Mo = (e, t, n) => {
+}, No = (e, t, n) => {
 	let [r, i] = g([]);
 	return u(() => {
 		let r = `#${e} h2:not(.${t}), #${e} h3:not(.${t})`, a = () => {
 			let e = Array.from(document.querySelectorAll(r));
 			e.forEach((e) => {
-				ko.forEach((t) => {
-					e.id.includes(t) && (e.id = e.id.replace(new RegExp(Ao(t), "g"), "-"));
+				Ao.forEach((t) => {
+					e.id.includes(t) && (e.id = e.id.replace(new RegExp(jo(t), "g"), "-"));
 				});
 			}), e.forEach((e, t) => {
 				e.id || (e.id = `${n}-item-${t}`);
-			}), i(jo(e));
+			}), i(Mo(e));
 		};
 		a();
 		let o = document.getElementById(e);
@@ -12117,7 +12146,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		t,
 		n
 	]), { nestedHeadings: r };
-}, No = (e, t) => {
+}, Po = (e, t) => {
 	let [n, r] = g(void 0), i = h({});
 	return u(() => {
 		let n = `#${e} h2:not(.${t}), #${e} h3:not(.${t})`, a = Array.from(document.querySelectorAll(n));
@@ -12136,7 +12165,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 			o.disconnect(), r(void 0);
 		};
 	}, [e, t]), n;
-}, Po = ({ activeID: t, baseClass: n, headings: r, onLinkClick: i }) => /* @__PURE__ */ e.createElement("ul", { className: `${n}__list ${n}__list--top-level` }, r.map((r) => /* @__PURE__ */ e.createElement("li", {
+}, Fo = ({ activeID: t, baseClass: n, headings: r, onLinkClick: i }) => /* @__PURE__ */ e.createElement("ul", { className: `${n}__list ${n}__list--top-level` }, r.map((r) => /* @__PURE__ */ e.createElement("li", {
 	key: r.id,
 	className: `${n}__list-item`
 }, /* @__PURE__ */ e.createElement("a", {
@@ -12152,8 +12181,8 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 	className: Z([`${n}__link`, r.id === t ? `${n}__link--active` : null]),
 	href: `#${r.id}`,
 	onClick: (e) => i(e, r.id)
-}, r.title))))))), Fo = ({ appendIds: t = !1, ariaLabel: n = "Table of contents", className: r, headingLevel: i = "h2", headingText: a = "Table of contents", ignoreClass: o = "pds-toc-ignore", showHeading: s = !1, sourceID: c = "pds-toc-source", ...l }) => {
-	let u = "pds-toc", { nestedHeadings: f } = Mo(c, o, d()), p = No(c, o), m = (e) => {
+}, r.title))))))), Io = ({ appendIds: t = !1, ariaLabel: n = "Table of contents", className: r, headingLevel: i = "h2", headingText: a = "Table of contents", ignoreClass: o = "pds-toc-ignore", showHeading: s = !1, sourceID: c = "pds-toc-source", ...l }) => {
+	let u = "pds-toc", { nestedHeadings: f } = No(c, o, d()), p = Po(c, o), m = (e) => {
 		typeof window < "u" && window.location.hash !== `#${e}` && window.history.pushState({}, "", `#${e}`);
 	}, h = (e) => {
 		document.querySelector(`#${e}`)?.scrollIntoView({
@@ -12171,13 +12200,13 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		baseClass: u,
 		className: `${s ? "" : "visually-hidden"}`,
 		level: i
-	}, a), /* @__PURE__ */ e.createElement(Po, {
+	}, a), /* @__PURE__ */ e.createElement(Fo, {
 		activeID: p,
 		baseClass: u,
 		headings: f,
 		onLinkClick: g
 	}));
-}, Io = ({ ariaLabel: t, className: n, defaultSelected: r = 0, onActiveTabChange: i = () => {}, selectedTab: a, tabs: o, ...s }) => {
+}, Lo = ({ ariaLabel: t, className: n, defaultSelected: r = 0, onActiveTabChange: i = () => {}, selectedTab: a, tabs: o, ...s }) => {
 	let c = "pds-tabs", [l, d] = g(a ?? r);
 	u(() => {
 		a !== void 0 && d(a);
@@ -12291,7 +12320,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		className: `${c}__panel-content`,
 		hidden: o !== l
 	}, r)))));
-}, Lo = [
+}, Ro = [
 	"orange",
 	"stone",
 	"gold",
@@ -12305,7 +12334,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 	"magenta",
 	"rose",
 	"red"
-], Ro = [
+], zo = [
 	"orange-solid",
 	"teal-solid",
 	"indigo-solid",
@@ -12315,14 +12344,14 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 	"lime-solid",
 	"sky-solid",
 	"slate-solid"
-], zo = [
+], Bo = [
 	"success-solid",
 	"warning-solid",
 	"critical-solid",
 	"info-solid",
 	"discovery-solid"
-], Bo = [...Ro, ...zo], Vo = [...Lo, ...Ro], Ho = (e) => Vo[parseInt(v(e), 16) % Vo.length], Uo = (e, t) => e.length > t ? e.slice(0, t) + " ..." : e, Wo = ({ className: t, isRemovable: n, linkContent: r, onRemove: i, removeLabel: a = "Remove tag", size: o = "s", tagColor: c, tagLabel: l, truncationLength: u = 18, ...d }) => {
-	let [f, p] = g(!0), m = "pds-tag", h = c ? `${m}--${c}` : `${m}--${Ho(l)}`, _ = `${m}--${o}`, v = f ? null : "pds-tag--hide", y = () => {
+], Vo = [...zo, ...Bo], Ho = [...Ro, ...zo], Uo = (e) => Ho[parseInt(v(e), 16) % Ho.length], Wo = (e, t) => e.length > t ? e.slice(0, t) + " ..." : e, Go = ({ className: t, isRemovable: n, linkContent: r, onRemove: i, removeLabel: a = "Remove tag", size: o = "s", tagColor: c, tagLabel: l, truncationLength: u = 18, ...d }) => {
+	let [f, p] = g(!0), m = "pds-tag", h = c ? `${m}--${c}` : `${m}--${Uo(l)}`, _ = `${m}--${o}`, v = f ? null : "pds-tag--hide", y = () => {
 		p((e) => !e);
 	}, b, x, S;
 	if (r && !n && s(r)) {
@@ -12344,7 +12373,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 	}, /* @__PURE__ */ e.createElement("span", {
 		className: `${m}__label`,
 		title: l
-	}, u > 0 ? Uo(l, u) : l), n ? /* @__PURE__ */ e.createElement("button", {
+	}, u > 0 ? Wo(l, u) : l), n ? /* @__PURE__ */ e.createElement("button", {
 		"aria-label": `${a}: ${l}`,
 		className: `${m}__remove`,
 		onClick: () => {
@@ -12356,7 +12385,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		iconName: "xmark",
 		size: "m"
 	})) : null);
-}, Go = ({ backgroundColor: t = "transparent", children: n, className: r, padding: i = "none", ...a }) => {
+}, Ko = ({ backgroundColor: t = "transparent", children: n, className: r, padding: i = "none", ...a }) => {
 	let o = "pds-utility-bar", s = t === "transparent" ? null : `${o}--bg-${t}`, c = i === "none" ? null : `${o}--pad-${i}`, l = ft(n), u = l["items-left"], d = l["items-right"] ?? l.__unslotted;
 	return /* @__PURE__ */ e.createElement("div", {
 		className: Z([
@@ -12367,7 +12396,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		]),
 		...a
 	}, /* @__PURE__ */ e.createElement("div", { className: `${o}__layout` }, /* @__PURE__ */ e.createElement("div", { className: `${o}__items-left` }, u), /* @__PURE__ */ e.createElement("div", { className: `${o}__items-right` }, d)));
-}, Ko = () => {
+}, qo = () => {
 	let e = typeof window < "u", t = (e) => e >= 1440 ? "xl" : e >= 1280 ? "lg" : e >= 768 ? "md" : "sm", [n, r] = g(e ? t(window.innerWidth) : "lg");
 	return u(() => {
 		if (!e) return;
@@ -12378,7 +12407,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 			window.removeEventListener("resize", n);
 		};
 	}, []), n;
-}, qo = ({ children: t, className: n, drawerContent: r, drawerProps: i, hasDrawerToggle: o, hasSidebarToggle: s, isDrawerOpen: c = !1, isSidebarCollapsed: l, keyboardShortcuts: d = !0, labels: f, mainBackground: m, mainContentElement: _ = "main", mainContentMaxWidth: v = 1600, mainContentProps: y, onDrawerToggle: b, onSidebarToggle: x, scrollableContent: S, sidebarBackground: C, sidebarCollapsedWidth: w = 4, sidebarExpandedWidth: T = "15%", sidebarExpandedWidthMax: E = 18, sidebarExpandedWidthMin: D = 14.75, sidebarProps: O, topOffset: k, ...A }) => {
+}, Jo = ({ children: t, className: n, drawerContent: r, drawerProps: i, hasDrawerToggle: o, hasSidebarToggle: s, isDrawerOpen: c = !1, isSidebarCollapsed: l, keyboardShortcuts: d = !0, labels: f, mainBackground: m, mainContentElement: _ = "main", mainContentMaxWidth: v = 1600, mainContentProps: y, onDrawerToggle: b, onSidebarToggle: x, scrollableContent: S, sidebarBackground: C, sidebarCollapsedWidth: w = 4, sidebarExpandedWidth: T = "15%", sidebarExpandedWidthMax: E = 18, sidebarExpandedWidthMin: D = 14.75, sidebarProps: O, topOffset: k, ...A }) => {
 	let [j, M] = g(l || !1);
 	u(() => {
 		M(l || !1);
@@ -12400,7 +12429,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 			return;
 		}
 		M(!j);
-	}, U = Ko();
+	}, U = qo();
 	u(() => {
 		U === "sm" && !j ? (V.current = !0, x ? x() : M(!0)) : U !== "sm" && V.current && (V.current = !1, x ? x() : M(!1));
 	}, [U]);
@@ -12503,7 +12532,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 			!e && c && b && b();
 		}
 	}, r));
-}, Jo = ({ children: t, className: n, sidebarWidth: r = "18%", sidebarWidthMax: i = 20, sidebarWidthMin: a = 15, style: o, ...s }) => {
+}, Yo = ({ children: t, className: n, sidebarWidth: r = "18%", sidebarWidthMax: i = 20, sidebarWidthMin: a = 15, style: o, ...s }) => {
 	let c = "pds-docs-layout", l = {
 		"--docs-sidebar-max-width": `${i}rem`,
 		"--docs-sidebar-min-width": `${a}rem`,
@@ -12521,7 +12550,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		},
 		...s
 	}, f && /* @__PURE__ */ e.createElement("aside", { className: `${c}__sidebar` }, /* @__PURE__ */ e.createElement("div", { className: `${c}__sidebar-inner` }, f)), /* @__PURE__ */ e.createElement("div", { className: `${c}__content` }, d));
-}, Yo = ({ children: t, className: n, gridGap: r = "xl", sidebarLocation: i = "right", sidebarMobileLocation: a = "after", sidebarWidth: o = "33%", sidebarWidthMax: s = 25, sidebarWidthMin: c = 15, ...l }) => {
+}, Xo = ({ children: t, className: n, gridGap: r = "xl", sidebarLocation: i = "right", sidebarMobileLocation: a = "after", sidebarWidth: o = "33%", sidebarWidthMax: s = 25, sidebarWidthMin: c = 15, ...l }) => {
 	let u = "pds-sidebar-layout", d = r === "none" ? "0" : `var(--pds-spacing-${r})`, f = ft(t);
 	return /* @__PURE__ */ e.createElement("div", {
 		className: Z([u, n ?? ""]),
@@ -12535,7 +12564,26 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		},
 		...l
 	}, /* @__PURE__ */ e.createElement("div", { className: `${u}__main` }, f.__unslotted || f.content), /* @__PURE__ */ e.createElement("div", { className: `${u}__side` }, f.sidebar));
-}, Xo = ({ children: t, className: n, formWidth: r = "standard", hasPanel: i = !1, ...a }) => {
+}, Zo = ({ children: n, className: r, maxColumns: i = 3, style: a, ...o }) => {
+	let s = "pds-stat-panel-group", c = `${s}--max-${i}`, l = {
+		"--max-columns": i,
+		...a
+	};
+	return /* @__PURE__ */ e.createElement("div", { className: `${s}-container` }, /* @__PURE__ */ e.createElement("div", {
+		className: Z([
+			s,
+			c,
+			r ?? ""
+		]),
+		role: "list",
+		style: l,
+		...o
+	}, t.map(n, (t, n) => /* @__PURE__ */ e.createElement("div", {
+		key: n,
+		className: `${s}__item`,
+		role: "listitem"
+	}, t))));
+}, Qo = ({ children: t, className: n, formWidth: r = "standard", hasPanel: i = !1, ...a }) => {
 	let o = ft(t), s = o.stepper, c = o.form, l = "pds-stepper-layout", u = r === "full" ? `${l}--full-width` : null, d = /* @__PURE__ */ e.createElement(Ji, {
 		className: Z([
 			l,
@@ -12546,7 +12594,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		...a
 	}, s && /* @__PURE__ */ e.createElement("div", { className: `${l}__stepper-container` }, s), c && /* @__PURE__ */ e.createElement("div", { className: `${l}__form-container` }, c));
 	return i ? /* @__PURE__ */ e.createElement(La, null, d) : d;
-}, Zo = ({ children: t, className: n, gridGap: r = "xl", verticalAlign: i = "start", ...a }) => {
+}, $o = ({ children: t, className: n, gridGap: r = "xl", verticalAlign: i = "start", ...a }) => {
 	let o = "pds-three-item-layout", s = r === "xl" ? "pds-grid" : `pds-grid pds-grid--gap-${r}`, c = `${o}--${i}`, l = ft(t), u = [
 		l["first-item"],
 		l["second-item"],
@@ -12564,7 +12612,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		key: n,
 		className: "pds-grid-item pds-grid-item--sm-12 pds-grid-item--md-4 pds-grid-item--lg-4"
 	}, t)));
-}, Qo = ({ children: t, className: n, gridGap: r = "xl", layoutVariant: i = "equal", verticalAlign: a = "start", ...o }) => {
+}, es = ({ children: t, className: n, gridGap: r = "xl", layoutVariant: i = "equal", verticalAlign: a = "start", ...o }) => {
 	let s = "pds-two-item-layout", c = r === "xl" ? "pds-grid" : `pds-grid pds-grid--gap-${r}`, l = `${s}--${a}`, u = ["pds-grid-item--md-6"], d = ["pds-grid-item--md-4", "pds-grid-item--lg-3"], f = ["pds-grid-item--md-8", "pds-grid-item--lg-9"], p = ["pds-grid-item", "pds-grid-item--sm-4"], m, h;
 	switch (i) {
 		case "equal":
@@ -12585,7 +12633,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		]),
 		...o
 	}, /* @__PURE__ */ e.createElement("div", { className: m.join(" ").trim() }, _), /* @__PURE__ */ e.createElement("div", { className: h.join(" ").trim() }, v));
-}, $o = ({ alignContent: t = "flex-start", alignItems: n = "stretch", children: r, className: i, flexDirection: a = "row", flexWrap: o = "nowrap", gap: s = "xl", justifyContent: c = "flex-start", mobileAlignContent: l, mobileAlignItems: u, mobileFlexDirection: d = "column", mobileFlexWrap: f, mobileGap: p, mobileJustifyContent: m, style: h, ...g }) => {
+}, ts = ({ alignContent: t = "flex-start", alignItems: n = "stretch", children: r, className: i, flexDirection: a = "row", flexWrap: o = "nowrap", gap: s = "xl", justifyContent: c = "flex-start", mobileAlignContent: l, mobileAlignItems: u, mobileFlexDirection: d = "column", mobileFlexWrap: f, mobileGap: p, mobileJustifyContent: m, style: h, ...g }) => {
 	let _ = "pds-flex", v = `${_}-container`, y = {
 		"--pds-flex-align-content": t,
 		"--pds-flex-align-items": n,
@@ -12611,7 +12659,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		},
 		...g
 	}, r);
-}, es = (e) => {
+}, ns = (e) => {
 	let t = typeof window < "u", [n, r] = g(((e) => t ? window.matchMedia(e).matches : !1)(e));
 	return u(() => {
 		if (!t) return;
@@ -12620,20 +12668,20 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		};
 		return r(n.matches), n.addEventListener ? (n.addEventListener("change", i), () => n.removeEventListener("change", i)) : (n.addListener(i), () => n.removeListener(i));
 	}, [e]), n;
-}, ts = [
+}, rs = [
 	"light",
 	"dark",
 	"system"
-], ns = (e) => typeof e == "string" && ts.includes(e), rs = i(null), is = {
+], is = (e) => typeof e == "string" && rs.includes(e), as = i(null), os = {
 	resolvedTheme: "light",
 	setTheme: () => {},
 	theme: "light"
-}, as = ({ 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){}})();`, os = ({ children: t, defaultTheme: n = "light", disableInitScript: r = !1, nodeRef: i, onThemeChange: a, persist: o = !0, storageKey: s = "pds-theme", theme: l }) => {
-	let d = l !== void 0, f = !r && !d && o && !i, [p, m] = g(n), [h, _] = g(!1), v = d ? l : p, y = es("(prefers-color-scheme: dark)"), b = v === "system" ? h && y ? "dark" : "light" : v;
+}, ss = ({ 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){}})();`, cs = ({ children: t, defaultTheme: n = "light", disableInitScript: r = !1, nodeRef: i, onThemeChange: a, persist: o = !0, storageKey: s = "pds-theme", theme: l }) => {
+	let d = l !== void 0, f = !r && !d && o && !i, [p, m] = g(n), [h, _] = g(!1), v = d ? l : p, y = ns("(prefers-color-scheme: dark)"), b = v === "system" ? h && y ? "dark" : "light" : v;
 	u(() => {
 		if (_(!0), !(d || !o || typeof window > "u")) try {
 			let e = window.localStorage.getItem(s);
-			ns(e) && m(e);
+			is(e) && m(e);
 		} catch {}
 	}, []), u(() => {
 		typeof document > "u" || (i?.current ?? document.documentElement).setAttribute("data-theme", b);
@@ -12653,20 +12701,20 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		]),
 		theme: v
 	};
-	return /* @__PURE__ */ e.createElement(rs.Provider, { value: x }, f && /* @__PURE__ */ e.createElement("script", { dangerouslySetInnerHTML: { __html: as({
+	return /* @__PURE__ */ e.createElement(as.Provider, { value: x }, f && /* @__PURE__ */ e.createElement("script", { dangerouslySetInnerHTML: { __html: ss({
 		defaultTheme: n,
 		storageKey: s
 	}) } }), t);
-}, ss = () => l(rs) ?? is, cs = ({ children: t, enableThemeSwitching: n = !1, mobileMaxWidth: r = 767, themeProps: i = {} }) => {
+}, ls = () => l(as) ?? os, us = ({ children: t, enableThemeSwitching: n = !1, mobileMaxWidth: r = 767, themeProps: i = {} }) => {
 	u(() => {
 		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(os, i, t) : t;
+	let a = n ? /* @__PURE__ */ e.createElement(cs, i, t) : t;
 	return /* @__PURE__ */ e.createElement($t, null, a);
-}, ls = ({ asContainer: t = !1, children: n, className: r, dense: i = !1, gap: a = "xl", mobileGap: o, stackBelow: s, ...c }) => {
+}, ds = ({ 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([
@@ -12680,7 +12728,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		]),
 		...c
 	}, n);
-}, us = ({ children: t, className: n, rowSpanLg: r, rowSpanMd: i, rowSpanSm: a, rowSpanXl: o, spanLg: s, spanMd: c, spanSm: l, spanXl: u, ...d }) => {
+}, fs = ({ 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,
@@ -12699,7 +12747,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		]),
 		...d
 	}, t);
-}, ds = (e, t, n) => {
+}, ps = (e, t, n) => {
 	let { altKey: r = !1, ctrlKey: i = !1, enabled: a = !0, metaKey: o = !1, shiftKey: s = !1 } = n ?? {}, [l, d] = g(!1), f = c((e) => e.altKey === r && e.ctrlKey === i && e.metaKey === o && e.shiftKey === s, [
 		r,
 		i,
@@ -12723,7 +12771,7 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		m,
 		a
 	]), l;
-}, fs = () => {
+}, ms = () => {
 	let e = typeof window < "u", [t, n] = g(e && window.innerWidth !== void 0 ? window.innerWidth : 1024);
 	return u(() => {
 		if (!e) return;
@@ -12737,6 +12785,6 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 	}, []), t;
 };
 //#endregion
-export { ur as ActionCard, qo as AppLayout, bt as Avatar, xt as Badge, fa as Banner, Nr as BarChart, Cn as BranchDiff, Li as Breadcrumb, Dn as Button, On as ButtonLink, qi as ButtonNav, Ni as CTALink, lr as Callout, dr as Card, fr as CardSelect, $r as Checkbox, ei as CheckboxFieldset, ti as CheckboxGroup, jn as ClipboardButton, Mn as CloseButton, Ur as CodeBlock, ni as Combobox, ii as ComboboxMultiselect, pr as CompactEmptyState, Gr as ComparisonList, Ji as Container, Ci as Datepicker, Jo as DocsLayout, Da as Drawer, Ln as Dropdown, Ki as DropdownMenu, Fa as ExpansionPanel, Ia as ExpansionPanelGroup, Yr as FileDiff, wi as FileUpload, Kn as FilterButton, $o as FlexContainer, Oa as FullScreenOverlay, cs as GlobalWrapper, ls as Grid, us as GridItem, qr as HorizontalEmptyState, Q as Icon, An as IconButton, Qr as IdentityBlock, ma as InlineMessage, Ti as InputGroup, Fr as LineChart, Pi as LinkNewWindow, _a as MIN_AUTO_CLOSE_DURATION, tr as MenuButton, ka as Modal, Yi as Navbar, Ma as Pagination, Na as PaginationChapter, Pa as PaginationCompact, La as Panel, Ra as PanelList, za as PanelRow, Ba as PanelStack, Wa as PantheonLogo, Zr as PaymentIcon, Ii as Picture, Lr as PieChart, ir as PlatformIcon, qa as Popover, Ya as ProgressBar, Za as ProgressRing, zr as ProportionBar, Ei as RadioGroup, eo as ResultCount, or as SSOButton, ga as SectionMessage, nr as SegmentedButton, hr as Select, mr as SelectOptionGroup, Xi as SideNav, Qi as SideNavGlobal, Zi as SideNavGlobalItem, Yo as SidebarLayout, ro as SiteFooter, ea as SiteMenu, io as SiteOptionDisplay, ao as SiteSearch, er as SiteTypeIcon, $n as SiteTypeLabel, kr as Skeleton, Fi as Skiplink, vo as SortableList, fo as SortableListHeader, bo as SortableRow, bn as Spinner, rr as SplitButton, xn as StatusBadge, So as StatusChecker, Co as StatusIndicator, Jn as StatusTypeLabels, wo as StepList, To as Stepper, Xo as StepperLayout, Di as Switch, na as TabMenu, Oo as Table, Fo as TableOfContents, Io as Tabs, Wo as Tag, ki as TagsInput, Sn as Tally, Mi as TextInput, Ai as Textarea, rs as ThemeContext, os as ThemeContextProvider, oa as ThemeSwitcher, Zo as ThreeItemLayout, li as Timepicker, wa as Toast, Ta as ToastType, xa as Toaster, ya as ToasterContext, nn as Tooltip, ia as TreeNav, Qo as TwoItemLayout, sa as UserMenu, Go as UtilityBar, sr as UtilityButton, Jr as VerticalEmptyState, Do as VerticalStepper, Kr as VideoEmbed, ca as WorkspaceSelector, yi as getPresetDateRange, as as getThemeInitScript, _t as iconList, Xn as isHeadingItemType, Zn as isLinkItemType, Qn as isNodeItemType, Yn as isSeparatorItemType, xo as statusCheckerStates, Lo as tagColors, Bo as tagSolidColors, Ro as tagSolidHueColors, zo as tagSolidStatusColors, Ko as useBreakpoint, kn as useClipboard, Pn as useDropdown, Xt as useIsMobile, ds as useKeyPress, tn as useKeyboardShortcut, es as useMediaQuery, ss as useTheme, Ea as useToast, fs as useWindowWidth };
+export { ur as ActionCard, Jo as AppLayout, bt as Avatar, xt as Badge, fa as Banner, Nr as BarChart, Cn as BranchDiff, Li as Breadcrumb, Dn as Button, On as ButtonLink, qi as ButtonNav, Ni as CTALink, lr as Callout, dr as Card, fr as CardSelect, $r as Checkbox, ei as CheckboxFieldset, ti as CheckboxGroup, jn as ClipboardButton, Mn as CloseButton, Ur as CodeBlock, ni as Combobox, ii as ComboboxMultiselect, pr as CompactEmptyState, Gr as ComparisonList, Ji as Container, Ci as Datepicker, Yo as DocsLayout, Da as Drawer, Ln as Dropdown, Ki as DropdownMenu, Fa as ExpansionPanel, Ia as ExpansionPanelGroup, Yr as FileDiff, wi as FileUpload, Kn as FilterButton, ts as FlexContainer, Oa as FullScreenOverlay, us as GlobalWrapper, ds as Grid, fs as GridItem, qr as HorizontalEmptyState, Q as Icon, An as IconButton, Qr as IdentityBlock, ma as InlineMessage, Ti as InputGroup, Fr as LineChart, Pi as LinkNewWindow, _a as MIN_AUTO_CLOSE_DURATION, tr as MenuButton, ka as Modal, Yi as Navbar, Ma as Pagination, Na as PaginationChapter, Pa as PaginationCompact, La as Panel, Ra as PanelList, za as PanelRow, Ba as PanelStack, Wa as PantheonLogo, Zr as PaymentIcon, Ii as Picture, Lr as PieChart, ir as PlatformIcon, qa as Popover, Ya as ProgressBar, Za as ProgressRing, zr as ProportionBar, Ei as RadioGroup, eo as ResultCount, or as SSOButton, ga as SectionMessage, nr as SegmentedButton, hr as Select, mr as SelectOptionGroup, Xi as SideNav, Qi as SideNavGlobal, Zi as SideNavGlobalItem, Xo as SidebarLayout, ro as SiteFooter, ea as SiteMenu, io as SiteOptionDisplay, ao as SiteSearch, er as SiteTypeIcon, $n as SiteTypeLabel, kr as Skeleton, Fi as Skiplink, vo as SortableList, fo as SortableListHeader, bo as SortableRow, bn as Spinner, rr as SplitButton, xo as StatPanel, Zo as StatPanelGroup, xn as StatusBadge, Co as StatusChecker, wo as StatusIndicator, Jn as StatusTypeLabels, To as StepList, Eo as Stepper, Qo as StepperLayout, Di as Switch, na as TabMenu, ko as Table, Io as TableOfContents, Lo as Tabs, Go as Tag, ki as TagsInput, Sn as Tally, Mi as TextInput, Ai as Textarea, as as ThemeContext, cs as ThemeContextProvider, oa as ThemeSwitcher, $o as ThreeItemLayout, li as Timepicker, wa as Toast, Ta as ToastType, xa as Toaster, ya as ToasterContext, nn as Tooltip, ia as TreeNav, es as TwoItemLayout, sa as UserMenu, Ko as UtilityBar, sr as UtilityButton, Jr as VerticalEmptyState, Oo as VerticalStepper, Kr as VideoEmbed, ca as WorkspaceSelector, yi as getPresetDateRange, ss as getThemeInitScript, _t as iconList, Xn as isHeadingItemType, Zn as isLinkItemType, Qn as isNodeItemType, Yn as isSeparatorItemType, So as statusCheckerStates, Ro as tagColors, Vo as tagSolidColors, zo as tagSolidHueColors, Bo as tagSolidStatusColors, qo as useBreakpoint, kn as useClipboard, Pn as useDropdown, Xt as useIsMobile, ps as useKeyPress, tn as useKeyboardShortcut, ns as useMediaQuery, ls as useTheme, Ea as useToast, ms as useWindowWidth };
 
 //# sourceMappingURL=index.js.map