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

package/dist/index.js

@@ -2899,71 +2899,75 @@ var Vt = ({ className: t, componentWidth: n, isLoading: r, loadingText: i = "Loa
 			await navigator.clipboard.writeText(e), r(!0);
 		} catch {}
 	}];
-}, Jt = a(({ ariaLabel: t, buttonType: n = "button", className: r, disabled: i = !1, hasBorder: a = !1, hasTooltip: o = !0, icon2Name: s = null, iconName: c, isPressed: l, onClick: u, pressedIconName: d, size: f = "s", variant: p = "standard", ...h }, g) => {
-	let _ = "pds-icon-button", v = f === "s" ? null : `${_}--${f}`, y = p === "standard" ? null : `${_}--${p}`, b = a ? `${_}--has-border` : null, x = l ? `${_}--pressed` : null, S = {
-		fadeOut: `${_}--fadeOut`,
-		hide: `${_}--hide`,
-		scaleIn: `${_}--scaleIn`
-	}, C, w;
-	switch (f) {
+}, Jt = a(({ ariaLabel: t, buttonType: n = "button", className: r, disabled: i = !1, hasBorder: a = !1, hasTooltip: o = !0, icon2Name: s = null, iconName: c, isPressed: u, onClick: d, pressedIconName: f, size: p = "s", variant: h = "standard", ...g }, _) => {
+	let v = "pds-icon-button", y = p === "s" ? null : `${v}--${p}`, b = h === "standard" ? null : `${v}--${h}`, x = a ? `${v}--has-border` : null, S = u ? `${v}--pressed` : null, C = {
+		fadeOut: `${v}--fadeOut`,
+		hide: `${v}--hide`,
+		scaleIn: `${v}--scaleIn`
+	}, w, T;
+	switch (p) {
 		case "s":
-			w = "m", C = 8;
+			T = "m", w = 8;
 			break;
 		case "m":
-			w = "l", C = 11;
+			T = "l", w = 11;
 			break;
 		default:
-			w = "m", C = 8;
+			T = "m", w = 8;
 			break;
 	}
-	let T = s !== null, E = m(null), D = m(null), O = () => {
-		E.current.classList.add(S.fadeOut), E.current.classList.add(S.hide), D.current.classList.remove(S.hide), D.current.classList.add(S.scaleIn), setTimeout(() => {
-			E.current.classList.remove(S.fadeOut, S.hide), E.current.classList.add(S.scaleIn), D.current.classList.remove(S.scaleIn), D.current.classList.add(S.hide);
-		}, 2e3);
-	}, k = (e) => {
-		T && O(), u && u(e);
-	}, A = l && d ? d : c, j = T ? /* @__PURE__ */ e.createElement("div", { className: `${_}__content` }, /* @__PURE__ */ e.createElement("div", {
-		ref: E,
-		className: `${_}__icon-wrapper`
+	let E = s !== null, D = m(null), O = m(null), k = m(void 0);
+	l(() => () => {
+		k.current && clearTimeout(k.current);
+	}, []);
+	let A = () => {
+		!D.current || !O.current || (D.current.classList.add(C.fadeOut), D.current.classList.add(C.hide), O.current.classList.remove(C.hide), O.current.classList.add(C.scaleIn), k.current = setTimeout(() => {
+			!D.current || !O.current || (D.current.classList.remove(C.fadeOut, C.hide), D.current.classList.add(C.scaleIn), O.current.classList.remove(C.scaleIn), O.current.classList.add(C.hide));
+		}, 2e3));
+	}, j = (e) => {
+		E && A(), d && d(e);
+	}, M = u && f ? f : c, N = E ? /* @__PURE__ */ e.createElement("div", { className: `${v}__content` }, /* @__PURE__ */ e.createElement("div", {
+		ref: D,
+		className: `${v}__icon-wrapper`
 	}, /* @__PURE__ */ e.createElement(Q, {
-		className: `${_}__icon`,
+		className: `${v}__icon`,
 		iconName: c,
-		size: w
+		size: T
 	})), /* @__PURE__ */ e.createElement("div", {
-		ref: D,
-		className: `${_}__icon-wrapper ${S.hide}`
+		ref: O,
+		className: `${v}__icon-wrapper ${C.hide}`
 	}, /* @__PURE__ */ e.createElement(Q, {
-		className: `${_}__icon`,
+		className: `${v}__icon`,
 		iconName: s,
-		size: w
-	}))) : /* @__PURE__ */ e.createElement("div", { className: `${_}__content` }, /* @__PURE__ */ e.createElement(Q, {
-		className: `${_}__icon`,
-		iconName: A,
-		size: w
+		size: T
+	}))) : /* @__PURE__ */ e.createElement("div", { className: `${v}__content` }, /* @__PURE__ */ e.createElement(Q, {
+		className: `${v}__icon`,
+		iconName: M,
+		size: T
 	}));
 	return /* @__PURE__ */ e.createElement("button", {
-		ref: g,
+		ref: _,
 		"aria-label": t,
-		"aria-pressed": l,
+		"aria-pressed": u,
 		className: Z([
-			_,
 			v,
 			y,
 			b,
 			x,
+			S,
 			r
 		]),
 		disabled: i,
-		onClick: k,
+		onClick: j,
 		title: o && !i ? null : t,
 		type: n,
-		...h
+		...g
 	}, o && !i ? /* @__PURE__ */ e.createElement(xt, {
-		className: `${_}__tooltip`,
+		className: `${v}__tooltip`,
 		content: t,
-		customTrigger: j,
-		offsetValue: C
-	}) : j);
+		customTrigger: N,
+		offsetValue: w
+	}) : N);
 }), Yt = ({ ariaLabel: t = "Copy to clipboard", className: n, clipboardText: r = "", disabled: i, hasBorder: a = !1, variant: o = "standard", ...s }) => {
 	let [c, l] = qt(r);
 	return /* @__PURE__ */ e.createElement(Jt, {
@@ -3324,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) => {
@@ -3340,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", {
@@ -3359,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);
@@ -3460,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) {
@@ -3474,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,
@@ -3498,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)"
 			},
@@ -3512,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,
@@ -3535,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);
@@ -3553,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 })
@@ -3566,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.");
@@ -6870,40 +6874,44 @@ var sr = {
 		message: x,
 		validationStatus: p
 	}));
-}, br = ({ className: t, disabled: n = !1, fieldsetProps: r, id: i, inputWidth: a, label: o, message: s, onGroupBlur: c, onValueChange: l, options: u, required: d = !1, showLabel: f = !0, tooltipText: p = null, validationMessage: m, validationStatus: g, ..._ }) => {
-	let v = a ? { width: `${a / 16}rem` } : null, y = "pds-checkbox-group", b = n ? $.disabled : null, x = d && !n ? $.required : null, S = g === "error" ? $.error : null, C = g === "success" ? $.success : null, w = m || s;
-	u.map((e) => {
+}, br = ({ className: t, disabled: n = !1, fieldsetProps: r, id: i, inputWidth: a, label: o, message: s, onGroupBlur: c, onValueChange: u, options: d, required: f = !1, showLabel: p = !0, tooltipText: g = null, validationMessage: _, validationStatus: v, ...y }) => {
+	let b = a ? { width: `${a / 16}rem` } : null, x = "pds-checkbox-group", S = n ? $.disabled : null, C = f && !n ? $.required : null, w = v === "error" ? $.error : null, T = v === "success" ? $.success : null, E = _ || s;
+	d.map((e) => {
 		e.id || (e.id = e.value);
 	});
-	let T = [];
-	u.map((e) => {
-		e.checked === !0 && T.push(e.value);
+	let D = [];
+	d.map((e) => {
+		e.checked === !0 && D.push(e.value);
 	});
-	let [E, D] = h(T), O = (e) => {
-		let { value: t } = e.target, n = E.includes(t) ? E.filter((e) => e !== t) : [...E, t];
-		D(n), l && l(n);
+	let [O, k] = h(D), A = m(void 0);
+	l(() => () => {
+		A.current && clearTimeout(A.current);
+	}, []);
+	let j = (e) => {
+		let { value: t } = e.target, n = O.includes(t) ? O.filter((e) => e !== t) : [...O, t];
+		k(n), u && u(n);
 	};
-	u.map((e) => {
-		E.includes(e.value) ? e.checked = !0 : e.checked = !1;
+	d.map((e) => {
+		O.includes(e.value) ? e.checked = !0 : e.checked = !1;
 	});
-	let k = () => {
-		c && setTimeout(() => {
-			u.some((e) => e.id === document.activeElement.id) || c(E);
-		}, 1500);
+	let M = () => {
+		c && (A.current = setTimeout(() => {
+			d.some((e) => e.id === document.activeElement?.id) || c(O);
+		}, 1500));
 	};
 	return /* @__PURE__ */ e.createElement("div", {
 		className: Z([
-			y,
-			b,
 			x,
 			S,
 			C,
+			w,
+			T,
 			t ?? ""
 		]),
-		style: a ? v : null,
-		..._
+		style: a ? b : null,
+		...y
 	}, /* @__PURE__ */ e.createElement("fieldset", {
-		className: `${y}__fieldset`,
+		className: `${x}__fieldset`,
 		id: i,
 		...r
 	}, /* @__PURE__ */ e.createElement(Tt, {
@@ -6911,26 +6919,26 @@ var sr = {
 		disabled: n,
 		id: i,
 		label: o,
-		required: d,
-		showLabel: f,
-		tooltipText: p
-	}), /* @__PURE__ */ e.createElement("div", { className: `${y}__options` }, u.map((t) => /* @__PURE__ */ e.createElement(vr, {
+		required: f,
+		showLabel: p,
+		tooltipText: g
+	}), /* @__PURE__ */ e.createElement("div", { className: `${x}__options` }, d.map((t) => /* @__PURE__ */ e.createElement(vr, {
 		key: t.id,
 		checked: t.checked,
-		className: `${y}__checkbox`,
+		className: `${x}__checkbox`,
 		disabled: t.disabled || n,
 		id: t.id,
 		label: t.label,
 		name: t.name,
-		onBlur: k,
-		onChange: O,
+		onBlur: M,
+		onChange: j,
 		value: t.value
-	})))), w && /* @__PURE__ */ e.createElement(Et, {
+	})))), E && /* @__PURE__ */ e.createElement(Et, {
 		validationMessageHasDecorators: !0,
-		hasValidationMessage: !!m,
+		hasValidationMessage: !!_,
 		id: i,
-		message: w,
-		validationStatus: g
+		message: E,
+		validationStatus: v
 	}));
 }, xr = a(({ className: t, defaultValue: n, disabled: r = !1, hasClearButton: i = !0, hasDropdownTrigger: a = !1, hasSearchIcon: o = !0, hasSearchShortcut: c = !1, id: u, inputWidth: d, isLoading: f = !1, label: g, labelStrings: _ = {
 	clearButton: "Clear input text",
@@ -9624,51 +9632,55 @@ var sr = {
 	success: "circleCheck",
 	critical: "diamondExclamation",
 	discovery: "squareQuestion"
-}, bi = ({ className: t, ctaButton: n, dataContext: r = "product", dismissLabel: i = "Dismiss", id: a, isDismissible: o, message: s, onDismiss: c, title: l, type: u = "info", typeLabels: d = fn, ...f }) => {
-	let p = r === "marketing", h = m(null), g = "pds-section-message", _ = {
-		error: `${g}--error`,
-		success: `${g}--success`,
-		warning: `${g}--warning`,
-		info: `${g}--info`,
-		critical: `${g}--critical`,
-		discovery: `${g}--discovery`,
-		dismissing: `${g}--dismissing`,
-		dismissed: `${g}--dismissed`
-	}, v = o ? `${g}--hasDismiss` : null, y = l ? `${g}--hasTitle` : null, b = u === "critical" ? "alert" : "status", x = `${d[u]}: `, S = typeof s == "string" ? /* @__PURE__ */ e.createElement("p", null, s) : s, C = () => {
-		h.current.addEventListener("animationend", w, { once: !0 });
-	}, w = (e) => {
-		c(e, a);
-	}, T = () => {
-		C(), h.current.classList.toggle(_.dismissing), setTimeout(() => {
-			h.current.classList.toggle(_.dismissing), h.current.classList.toggle(_.dismissed);
+}, bi = ({ className: t, ctaButton: n, dataContext: r = "product", dismissLabel: i = "Dismiss", id: a, isDismissible: o, message: s, onDismiss: c, title: u, type: d = "info", typeLabels: f = fn, ...p }) => {
+	let h = r === "marketing", g = m(null), _ = m(void 0), v = "pds-section-message", y = {
+		error: `${v}--error`,
+		success: `${v}--success`,
+		warning: `${v}--warning`,
+		info: `${v}--info`,
+		critical: `${v}--critical`,
+		discovery: `${v}--discovery`,
+		dismissing: `${v}--dismissing`,
+		dismissed: `${v}--dismissed`
+	}, b = o ? `${v}--hasDismiss` : null, x = u ? `${v}--hasTitle` : null, S = d === "critical" ? "alert" : "status", C = `${f[d]}: `, w = typeof s == "string" ? /* @__PURE__ */ e.createElement("p", null, s) : s;
+	l(() => () => {
+		_.current && clearTimeout(_.current);
+	}, []);
+	let T = () => {
+		g.current?.addEventListener("animationend", E, { once: !0 });
+	}, E = (e) => {
+		c?.(e, a);
+	}, D = () => {
+		T(), g.current?.classList.toggle(y.dismissing), _.current = setTimeout(() => {
+			g.current && (g.current.classList.toggle(y.dismissing), g.current.classList.toggle(y.dismissed));
 		}, 400);
 	};
 	return /* @__PURE__ */ e.createElement("div", {
-		ref: h,
+		ref: g,
 		className: Z([
-			g,
-			_[u],
 			v,
-			y,
+			y[d],
+			b,
+			x,
 			t ?? ""
 		]),
 		"data-context": r,
 		id: a,
-		role: b,
-		...f
-	}, /* @__PURE__ */ e.createElement("div", { className: `${g}__content` }, /* @__PURE__ */ e.createElement("div", { className: `${g}__icon ${g}__icon-${u}` }, /* @__PURE__ */ e.createElement(Q, {
-		iconName: `${u}` in yi ? yi[u] : yi.info,
-		size: p ? "xl" : "l"
-	})), /* @__PURE__ */ e.createElement("div", { className: `${g}__text` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, x), l && /* @__PURE__ */ e.createElement("div", { className: `${g}__title` }, l), /* @__PURE__ */ e.createElement("div", { className: `${g}__message` }, S))), (n || o) && /* @__PURE__ */ e.createElement("div", { className: `${g}__actions` }, n && /* @__PURE__ */ e.createElement(Gt, {
+		role: S,
+		...p
+	}, /* @__PURE__ */ e.createElement("div", { className: `${v}__content` }, /* @__PURE__ */ e.createElement("div", { className: `${v}__icon ${v}__icon-${d}` }, /* @__PURE__ */ e.createElement(Q, {
+		iconName: `${d}` in yi ? yi[d] : yi.info,
+		size: h ? "xl" : "l"
+	})), /* @__PURE__ */ e.createElement("div", { className: `${v}__text` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, C), u && /* @__PURE__ */ e.createElement("div", { className: `${v}__title` }, u), /* @__PURE__ */ e.createElement("div", { className: `${v}__message` }, w))), (n || o) && /* @__PURE__ */ e.createElement("div", { className: `${v}__actions` }, n && /* @__PURE__ */ e.createElement(Gt, {
 		...n,
-		className: `${g}__cta`,
-		size: p ? "m" : "s",
+		className: `${v}__cta`,
+		size: h ? "m" : "s",
 		variant: "secondary"
 	}), o && /* @__PURE__ */ e.createElement(Xt, {
 		ariaLabel: i,
-		className: `${g}__dismiss`,
-		onClick: T,
-		size: p ? "l" : "m"
+		className: `${v}__dismiss`,
+		onClick: D,
+		size: h ? "l" : "m"
 	})));
 }, xi = 3e4, Si = {
 	pause: "Pause notification",
@@ -11827,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();
@@ -11870,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"
@@ -11939,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",
@@ -12068,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([
@@ -12087,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,
@@ -12106,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;
@@ -12129,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