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

package/dist/index.js

@@ -2427,18 +2427,26 @@ var rt = Object.create, it = Object.defineProperty, at = Object.getOwnPropertyDe
 		]),
 		...d
 	}, o ? S : x);
-}, xt = ({ className: t, color: n = "brand-muted", label: r, size: i = "s", ...a }) => {
-	let o = "pds-badge", s = `${o}--${n}`, c = `${o}--${i}`;
+}, xt = {
+	xs: "s",
+	s: "s",
+	m: "m"
+}, St = ({ className: t, color: n = "brand-muted", iconName: r, label: i, size: a = "s", ...o }) => {
+	let s = "pds-badge", c = `${s}--${n}`, l = `${s}--${a}`;
 	return /* @__PURE__ */ e.createElement("span", {
 		className: Z([
-			o,
 			s,
 			c,
+			l,
 			t ?? ""
 		]),
-		...a
-	}, /* @__PURE__ */ e.createElement("span", { className: `${o}__label` }, r));
-}, St = "7rem", Ct = "10rem", wt = "8rem", Tt = "6rem", Et = "5rem", Dt = "4rem", Ot = "3rem", kt = "2.5rem", At = "2rem", jt = "1.5rem", Mt = "1.25rem", Nt = "1rem", Pt = "0.75rem", Ft = "0.625rem", It = "0.5rem", Lt = "0.375rem", Rt = "0.25rem", zt = "0.125rem", Bt = 9999, Vt = {
+		...o
+	}, r && /* @__PURE__ */ e.createElement(Q, {
+		className: `${s}__icon`,
+		iconName: r,
+		size: xt[a]
+	}), /* @__PURE__ */ e.createElement("span", { className: `${s}__label` }, i));
+}, Ct = "10rem", wt = "8rem", Tt = "6rem", Et = "5rem", Dt = "4rem", Ot = "3rem", kt = "2.5rem", At = "2rem", jt = "1.5rem", Mt = "1.25rem", Nt = "1rem", Pt = "0.75rem", Ft = "0.625rem", It = "0.5rem", Lt = "0.375rem", Rt = "0.25rem", zt = "0.125rem", Bt = 9999, Vt = {
 	SPACING_5XS: zt,
 	SPACING_4XS: Rt,
 	SPACING_3XS: Lt,
@@ -2719,12 +2727,12 @@ var rt = Object.create, it = Object.defineProperty, at = Object.getOwnPropertyDe
 		className: `${c}__track`,
 		cx: "12",
 		cy: "12",
-		r: "9"
+		r: "10.5"
 	}), /* @__PURE__ */ e.createElement("g", { className: `${c}__rotator` }, /* @__PURE__ */ e.createElement("circle", {
 		className: `${c}__arc`,
 		cx: "12",
 		cy: "12",
-		r: "9"
+		r: "10.5"
 	}))), a && !r ? /* @__PURE__ */ e.createElement("span", {
 		className: `${c}__label`,
 		style: m
@@ -3676,7 +3684,7 @@ var Gn = ({ className: t = "pds-dropdown__selected-icon" }) => /* @__PURE__ */ e
 			isInline: !0,
 			className: `${p}__spinner`,
 			color: "currentColor",
-			size: "m"
+			size: "l"
 		}), t.iconName && !t.isLoading && /* @__PURE__ */ e.createElement(Q, {
 			className: `${p}__icon`,
 			iconName: t.iconName
@@ -3712,40 +3720,43 @@ var Gn = ({ className: t = "pds-dropdown__selected-icon" }) => /* @__PURE__ */ e
 			offsetValue: 8
 		}) : u));
 	})));
-}, rr = ({ actionItems: t, className: n, disabled: r, id: i, moreActionsLabel: a = "More actions", size: o = "s", variant: s = "primary", ...c }) => {
-	let l = "pds-split-button", u = `${l}--${s}`, d = t[0], f = t.slice(1), p = null;
-	return "isLink" in d && d.isLink === !0 ? p = /* @__PURE__ */ e.createElement(On, {
-		className: `${l}__primary-action`,
+}, rr = ({ actionItems: t, className: n, disabled: r, iconName: i, id: a, moreActionsLabel: o = "More actions", size: s = "s", variant: c = "primary", ...l }) => {
+	let u = "pds-split-button", d = `${u}--${c}`, f = t[0], p = t.slice(1), m = null;
+	return "isLink" in f && f.isLink === !0 ? m = /* @__PURE__ */ e.createElement(On, {
+		className: `${u}__primary-action`,
 		disabled: r,
-		displayType: "label-only",
-		linkContent: d.linkContent,
-		size: o,
-		variant: s
-	}) : "label" in d && (p = /* @__PURE__ */ e.createElement(Dn, {
-		className: `${l}__primary-action`,
+		displayType: i ? "icon-start" : "label-only",
+		iconName: i,
+		linkContent: f.linkContent,
+		size: s,
+		variant: c
+	}) : "label" in f && (m = /* @__PURE__ */ e.createElement(Dn, {
+		className: `${u}__primary-action`,
 		disabled: r,
-		label: d.label,
-		onClick: () => d.callback(),
-		size: o,
-		variant: s
+		displayType: i ? "icon-start" : "label-only",
+		iconName: i,
+		label: f.label,
+		onClick: () => f.callback(),
+		size: s,
+		variant: c
 	})), /* @__PURE__ */ e.createElement("span", {
 		className: Z([
-			l,
 			u,
+			d,
 			n
 		]),
-		id: i,
-		...c
-	}, p, /* @__PURE__ */ e.createElement(tr, {
+		id: a,
+		...l
+	}, m, /* @__PURE__ */ e.createElement(tr, {
 		isSplitButton: !0,
-		className: `${l}__menu-button`,
+		className: `${u}__menu-button`,
 		disabled: r,
-		id: `${i}-menu`,
-		label: a,
-		menuItems: f,
-		size: o,
+		id: `${a}-menu`,
+		label: o,
+		menuItems: p,
+		size: s,
 		testId: null,
-		variant: s
+		variant: c
 	}));
 }, ir = ({ className: t, platformType: n, size: r = "2xl", ...i }) => {
 	let a = `pds-platform-icon--${n}`, o = `pds-platform-icon--${r}`;
@@ -7028,11 +7039,11 @@ var Hr = {
 	let re = R || y, ie = V !== void 0, ae = n !== void 0, oe = (e) => {
 		let t = A.find((t) => t.value === e);
 		return t ? t.label : "";
-	}, [Y, X] = g(ae ? n : void 0), [ce, le] = g(ie ? V ?? "" : ae ? oe(n) : "");
+	}, [Y, X] = g(ae ? n : void 0), [ce, le] = g(ie ? V ?? "" : ae ? oe(n) : ""), ue = s && !ce;
 	u(() => {
 		ie && le(V ?? "");
 	}, [ie, V]);
-	let ue = h(null), de = (e) => e.map(({ label: e, optionDisplay: t, searchIndex: n, value: r, ...i }) => {
+	let de = h(null), fe = (e) => e.map(({ label: e, optionDisplay: t, searchIndex: n, value: r, ...i }) => {
 		let a = r || e, o = [e, r];
 		return n && o.push(...n), {
 			label: e,
@@ -7041,8 +7052,8 @@ var Hr = {
 			optionDisplay: t,
 			...i
 		};
-	}), fe = m(() => {
-		let e = de(A);
+	}), pe = m(() => {
+		let e = fe(A);
 		if (!ce && !F) return [];
 		let t = (ce ?? "").toLowerCase();
 		return e.filter((e) => (e.searchIndex?.map((e) => e.toLowerCase()) ?? []).some((e) => e.includes(t)));
@@ -7051,10 +7062,10 @@ var Hr = {
 		ce,
 		F,
 		f
-	]), { getInputProps: pe, getItemProps: me, getMenuProps: he, highlightedIndex: ge, isOpen: _e, openMenu: ve, reset: ye } = se({
+	]), { getInputProps: me, getItemProps: he, getMenuProps: ge, highlightedIndex: _e, isOpen: ve, openMenu: ye, reset: be } = se({
 		id: l,
 		inputId: `input-${l}`,
-		items: fe,
+		items: pe,
 		itemToString: (e) => e ? e.label : "",
 		inputValue: ce,
 		onInputValueChange: ({ inputValue: e }) => {
@@ -7080,8 +7091,8 @@ var Hr = {
 			}
 			return t;
 		}
-	}), { context: be, floatingStyles: xe, refs: Se } = M({
-		open: _e,
+	}), { context: xe, floatingStyles: Se, refs: Ce } = M({
+		open: ve,
 		whileElementsMounted: w,
 		placement: "bottom-start",
 		strategy: "absolute",
@@ -7104,7 +7115,7 @@ var Hr = {
 			}),
 			T({ padding: 24 })
 		]
-	}), { isMounted: Ce, styles: we } = z(be, {
+	}), { isMounted: we, styles: Te } = z(xe, {
 		duration: {
 			open: 300,
 			close: 150
@@ -7112,20 +7123,20 @@ var Hr = {
 		initial: { opacity: 0 },
 		open: { opacity: 1 },
 		close: { opacity: 0 }
-	}), Te = c((e) => {
-		Se.setReference(e), typeof U == "function" ? U(e) : U && "current" in U && (U.current = e);
-	}, [U, Se]), Ee = () => {
-		_e ? ye() : ve();
-	}, De = () => {
-		ie || le(""), X(void 0), ye(), ue.current?.focus(), F && ve(), C?.();
-	}, Oe = (e) => {
-		x?.(Y);
+	}), Ee = c((e) => {
+		Ce.setReference(e), typeof U == "function" ? U(e) : U && "current" in U && (U.current = e);
+	}, [U, Ce]), De = () => {
+		ve ? be() : ye();
+	}, Oe = () => {
+		ie || le(""), X(void 0), be(), de.current?.focus(), F && ye(), C?.();
 	}, ke = (e) => {
-		F && ve(), D?.(Y);
-	}, Ae = () => fe.map((t, n) => /* @__PURE__ */ e.createElement(gn, {
+		x?.(Y);
+	}, Ae = (e) => {
+		F && ye(), D?.(Y);
+	}, je = () => pe.map((t, n) => /* @__PURE__ */ e.createElement(gn, {
 		key: t.value,
-		className: ge === n ? "pds-dropdown__item--focused" : "",
-		...me({
+		className: _e === n ? "pds-dropdown__item--focused" : "",
+		...he({
 			item: t,
 			index: n
 		})
@@ -7151,59 +7162,59 @@ var Hr = {
 		showLabel: P,
 		tooltipText: L
 	}), /* @__PURE__ */ e.createElement("span", {
-		ref: Te,
+		ref: Ee,
 		"aria-describedby": re ? `${l}__message` : null,
 		"aria-disabled": r ? !0 : null,
 		"aria-invalid": B === "error" ? !0 : null,
 		"aria-required": N ? !0 : null,
-		className: `${G}__input-wrapper`,
+		className: Z([`${G}__input-wrapper`, ue ? `${G}__input-wrapper--has-search-shortcut` : null]),
 		id: l
 	}, ne && /* @__PURE__ */ e.createElement(un, { variant: ne }), /* @__PURE__ */ e.createElement("input", {
-		ref: ue,
+		ref: de,
 		autoComplete: "off",
 		className: `${G}__input`,
 		id: `input-${l}`,
-		...pe({
+		...me({
 			"aria-label": _.inputInstructions,
 			disabled: r,
 			placeholder: j,
-			onBlur: Oe,
+			onBlur: ke,
 			onChange: (e) => {
 				S?.(e);
 			},
-			onFocus: ke
+			onFocus: Ae
 		})
 	}), ce && i && /* @__PURE__ */ e.createElement(fn, {
 		clearLabel: _.clearButton,
-		handleClearInput: De,
+		handleClearInput: Oe,
 		id: `input-${l}`
-	}), s && !ce && /* @__PURE__ */ e.createElement(dn, {
+	}), ue && /* @__PURE__ */ e.createElement(dn, {
 		inputId: `input-${l}`,
 		shortcutLabel: _.searchShortcut
 	}), a && /* @__PURE__ */ e.createElement("button", {
-		"aria-expanded": _e,
+		"aria-expanded": ve,
 		"aria-label": _.triggerButton,
 		className: `${G}__trigger`,
 		disabled: r,
-		onClick: Ee,
+		onClick: De,
 		type: "button"
 	}, /* @__PURE__ */ e.createElement(Q, {
 		className: `${G}__trigger-icon`,
 		iconName: "angleDown",
 		size: "m"
 	}))), /* @__PURE__ */ e.createElement("div", {
-		ref: Se.setFloating,
+		ref: Ce.setFloating,
 		className: `pds-dropdown__panel ${G}__dropdown`,
-		style: Ce ? {
-			...xe,
-			...we,
+		style: we ? {
+			...Se,
+			...Te,
 			zIndex: "var(--pds-z-index-dropdown)"
 		} : { display: "none" }
-	}, Ce && f && /* @__PURE__ */ e.createElement("div", { className: `${G}__loading` }, v), Ce && !f && fe.length === 0 && /* @__PURE__ */ e.createElement("div", { className: "pds-dropdown__no-results" }, b), /* @__PURE__ */ e.createElement("ul", {
+	}, we && f && /* @__PURE__ */ e.createElement("div", { className: `${G}__loading` }, v), we && !f && pe.length === 0 && /* @__PURE__ */ e.createElement("div", { className: "pds-dropdown__no-results" }, b), /* @__PURE__ */ e.createElement("ul", {
 		className: `${G}__options`,
-		...he(),
-		style: Ce && !f && fe.length > 0 ? void 0 : { display: "none" }
-	}, Ce && !f && Ae())), re && /* @__PURE__ */ e.createElement(cn, {
+		...ge(),
+		style: we && !f && pe.length > 0 ? void 0 : { display: "none" }
+	}, we && !f && je())), re && /* @__PURE__ */ e.createElement(cn, {
 		hasValidationMessage: !!R,
 		id: l,
 		message: re,
@@ -8452,6 +8463,8 @@ var Hr = {
 		R || B(e.target.value), d && d(e);
 	}, U = (e) => {
 		u && u(e);
+	}, W = (e) => {
+		m && e.preventDefault();
 	};
 	return /* @__PURE__ */ e.createElement("div", {
 		className: Z([
@@ -8491,6 +8504,7 @@ var Hr = {
 		onBlur: U,
 		onChange: H,
 		onFocus: f,
+		onMouseDown: W,
 		placeholder: p,
 		readOnly: m,
 		required: h,
@@ -8514,8 +8528,10 @@ var Hr = {
 }, type: O = "text", validationMessage: k, validationStatus: A, value: j, ...M }, N) => {
 	let P = rn(d), F = "pds-text-input", I = a ? $.disabled : null, L = x && !a ? $.required : null, R = A === "error" ? $.error : null, z = A === "success" ? $.success : null, B = b ? $.readonly : null, V = T === "s" ? null : `${F}--${T}`, H = c && O === "url" ? `${F}--has-url-prefix` : null, U = null;
 	O === "search" && (U = "search"), O === "search" && S === "filter" && (U = "filter"), A === "error" && (U = "error"), A === "success" && (U = "success");
-	let W = k || p, G = j !== void 0, [K, q] = g(i === void 0 ? "" : i), J = j || K, ee = (e) => {
-		if (w && re && ie(!1), c && O === "url") {
+	let W = k || p, G = j !== void 0, [K, q] = g(i === void 0 ? "" : i), J = j || K, ee = s && O === "search" && !J, te = (e) => {
+		b && e.preventDefault();
+	}, ne = (e) => {
+		if (w && ae && oe(!1), c && O === "url") {
 			let t = an(e.target.value), n = {
 				...e,
 				target: {
@@ -8525,7 +8541,7 @@ var Hr = {
 			};
 			m && m(n);
 		} else m && m(e);
-	}, te = (e) => {
+	}, re = (e) => {
 		if (c && O === "url") {
 			let t = an(e.target.value), n = {
 				...e,
@@ -8536,16 +8552,16 @@ var Hr = {
 			};
 			G || q(t), h && h(n);
 		} else G || q(e.target.value), h && h(e);
-	}, ne = () => {
+	}, ie = () => {
 		G || q(""), _ && _();
 		let e = document.getElementById(l);
 		e && e.focus();
-	}, [re, ie] = g(!1), ae = () => {
-		ie((e) => !e);
+	}, [ae, oe] = g(!1), Y = () => {
+		oe((e) => !e);
 		let e = document.getElementById(l);
 		e && e.focus();
-	}, oe = O;
-	return w && O === "password" && (oe = re ? "text" : "password"), /* @__PURE__ */ e.createElement("div", {
+	}, se = O;
+	return w && O === "password" && (se = ae ? "text" : "password"), /* @__PURE__ */ e.createElement("div", {
 		className: Z([
 			$.base,
 			F,
@@ -8570,7 +8586,11 @@ var Hr = {
 	}), w && O === "password" && /* @__PURE__ */ e.createElement("div", {
 		"aria-live": "polite",
 		className: "visually-hidden"
-	}, `${D.visibilityStatus} ${re ? "visible" : "hidden"}.`), /* @__PURE__ */ e.createElement("div", { className: `${F}__input-wrapper ${c && O === "url" ? `${F}__input-wrapper--has-prefix` : ""}` }, U && /* @__PURE__ */ e.createElement(un, { variant: U }), c && O === "url" && /* @__PURE__ */ e.createElement(ji, null), /* @__PURE__ */ e.createElement("input", {
+	}, `${D.visibilityStatus} ${ae ? "visible" : "hidden"}.`), /* @__PURE__ */ e.createElement("div", { className: Z([
+		`${F}__input-wrapper`,
+		c && O === "url" ? `${F}__input-wrapper--has-prefix` : null,
+		ee ? `${F}__input-wrapper--has-search-shortcut` : null
+	]) }, U && /* @__PURE__ */ e.createElement(un, { variant: U }), c && O === "url" && /* @__PURE__ */ e.createElement(ji, null), /* @__PURE__ */ e.createElement("input", {
 		ref: N,
 		"aria-describedby": W ? `${l}__message` : null,
 		"aria-invalid": A === "error" ? !0 : null,
@@ -8579,30 +8599,31 @@ var Hr = {
 		disabled: a,
 		id: l,
 		name: l,
-		onBlur: ee,
-		onChange: te,
+		onBlur: ne,
+		onChange: re,
 		onFocus: v,
+		onMouseDown: te,
 		placeholder: y,
 		readOnly: b,
 		required: x,
-		type: oe,
+		type: se,
 		value: G ? j : K,
 		...u
 	}), o && J && /* @__PURE__ */ e.createElement(fn, {
 		clearLabel: D.clearButton,
-		handleClearInput: ne,
+		handleClearInput: ie,
 		id: l
 	}), w && O === "password" && /* @__PURE__ */ e.createElement("button", {
 		"aria-controls": l,
 		className: `${F}__visibility-toggle`,
-		onClick: ae,
+		onClick: Y,
 		onMouseDown: (e) => e.preventDefault(),
-		title: re ? D.visibilityToggleHide : D.visibilityToggleShow,
+		title: ae ? D.visibilityToggleHide : D.visibilityToggleShow,
 		type: "button"
 	}, /* @__PURE__ */ e.createElement(Q, {
-		iconName: re ? "eyeSlash" : "eye",
+		iconName: ae ? "eyeSlash" : "eye",
 		size: "m"
-	})), s && O === "search" && !J && /* @__PURE__ */ e.createElement(dn, {
+	})), ee && /* @__PURE__ */ e.createElement(dn, {
 		inputId: l,
 		shortcutLabel: D.searchShortcut
 	}), r && O !== "password" && /* @__PURE__ */ e.createElement(pn, {
@@ -10042,9 +10063,9 @@ var Hr = {
 		]),
 		role: l,
 		...o
-	}, /* @__PURE__ */ e.createElement("div", { className: `${s}__icon ${s}__icon-${i}` }, i === "working" ? /* @__PURE__ */ e.createElement(bn, { size: "m" }) : /* @__PURE__ */ e.createElement(Q, {
+	}, /* @__PURE__ */ e.createElement("div", { className: `${s}__icon ${s}__icon-${i}` }, i === "working" ? /* @__PURE__ */ e.createElement(bn, { size: "l" }) : /* @__PURE__ */ e.createElement(Q, {
 		iconName: `${i}` in pa ? pa[i] : pa.info,
-		size: "m"
+		size: "l"
 	})), /* @__PURE__ */ e.createElement("div", { className: `${s}__text` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, u), /* @__PURE__ */ e.createElement("div", { className: `${s}__title` }, r), /* @__PURE__ */ e.createElement("div", { className: `${s}__message` }, d)));
 }, ha = {
 	info: "circleInfo",
@@ -10052,55 +10073,56 @@ var Hr = {
 	success: "circleCheck",
 	critical: "diamondExclamation",
 	discovery: "squareQuestion"
-}, ga = ({ className: t, ctaButton: n, dataContext: r = "product", dismissLabel: i = "Dismiss", id: a, isDismissible: o, message: s, onDismiss: c, title: l, type: d = "info", typeLabels: f = Jn, ...p }) => {
-	let m = r === "marketing", g = h(null), _ = h(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 = l ? `${v}--hasTitle` : null, S = d === "critical" ? "alert" : "status", C = `${f[d]}: `, w = typeof s == "string" ? /* @__PURE__ */ e.createElement("p", null, s) : s;
+}, ga = ({ className: t, ctaButton: n, ctaIcon: r, dismissLabel: i = "Dismiss", id: a, isDismissible: o, message: s, onDismiss: c, title: l, type: d = "info", typeLabels: f = Jn, ...p }) => {
+	let m = h(null), g = h(void 0), _ = "pds-section-message", v = {
+		error: `${_}--error`,
+		success: `${_}--success`,
+		warning: `${_}--warning`,
+		info: `${_}--info`,
+		critical: `${_}--critical`,
+		discovery: `${_}--discovery`,
+		dismissing: `${_}--dismissing`,
+		dismissed: `${_}--dismissed`
+	}, y = o ? `${_}--hasDismiss` : null, b = l ? `${_}--hasTitle` : null, x = d === "critical" ? "alert" : "status", S = `${f[d]}: `, C = typeof s == "string" ? /* @__PURE__ */ e.createElement("p", null, s) : s;
 	u(() => () => {
-		_.current && clearTimeout(_.current);
+		g.current && clearTimeout(g.current);
 	}, []);
-	let T = () => {
-		g.current?.addEventListener("animationend", E, { once: !0 });
-	}, E = (e) => {
+	let w = () => {
+		m.current?.addEventListener("animationend", T, { once: !0 });
+	}, T = (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));
+	}, E = () => {
+		w(), m.current?.classList.toggle(v.dismissing), g.current = setTimeout(() => {
+			m.current && (m.current.classList.toggle(v.dismissing), m.current.classList.toggle(v.dismissed));
 		}, 400);
 	};
 	return /* @__PURE__ */ e.createElement("div", {
-		ref: g,
+		ref: m,
 		className: Z([
-			v,
-			y[d],
+			_,
+			v[d],
+			y,
 			b,
-			x,
 			t ?? ""
 		]),
-		"data-context": r,
 		id: a,
-		role: S,
+		role: x,
 		...p
-	}, /* @__PURE__ */ e.createElement("div", { className: `${v}__content` }, /* @__PURE__ */ e.createElement("div", { className: `${v}__icon ${v}__icon-${d}` }, /* @__PURE__ */ e.createElement(Q, {
+	}, /* @__PURE__ */ e.createElement("div", { className: `${_}__content` }, /* @__PURE__ */ e.createElement("div", { className: `${_}__icon ${_}__icon-${d}` }, /* @__PURE__ */ e.createElement(Q, {
 		iconName: `${d}` in ha ? ha[d] : ha.info,
-		size: m ? "xl" : "l"
-	})), /* @__PURE__ */ e.createElement("div", { className: `${v}__text` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, C), l && /* @__PURE__ */ e.createElement("div", { className: `${v}__title` }, l), /* @__PURE__ */ e.createElement("div", { className: `${v}__message` }, w))), (n || o) && /* @__PURE__ */ e.createElement("div", { className: `${v}__actions` }, n && /* @__PURE__ */ e.createElement(Dn, {
+		size: "l"
+	})), /* @__PURE__ */ e.createElement("div", { className: `${_}__text` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, S), l && /* @__PURE__ */ e.createElement("div", { className: `${_}__title` }, l), /* @__PURE__ */ e.createElement("div", { className: `${_}__message` }, C))), (n || o) && /* @__PURE__ */ e.createElement("div", { className: `${_}__actions` }, n && /* @__PURE__ */ e.createElement(Dn, {
 		...n,
-		className: `${v}__cta`,
-		size: m ? "m" : "s",
+		className: `${_}__cta`,
+		displayType: r ? "icon-start" : n.displayType,
+		iconName: r ?? n.iconName,
+		size: "s",
 		variant: "secondary"
 	}), o && /* @__PURE__ */ e.createElement(Mn, {
 		ariaLabel: i,
-		className: `${v}__dismiss`,
-		onClick: D,
-		size: m ? "l" : "m"
+		className: `${_}__dismiss`,
+		onClick: E,
+		size: "m"
 	})));
 }, _a = 3e4, va = {
 	pause: "Pause notification",
@@ -10155,7 +10177,7 @@ var Hr = {
 			r
 		]),
 		id: i
-	}, /* @__PURE__ */ e.createElement("div", { className: `${c}__icon-container` }, o === "working" ? /* @__PURE__ */ e.createElement(bn, { size: "xl" }) : /* @__PURE__ */ e.createElement(Q, {
+	}, /* @__PURE__ */ e.createElement("div", { className: `${c}__icon-container` }, o === "working" ? /* @__PURE__ */ e.createElement(bn, { size: "l" }) : /* @__PURE__ */ e.createElement(Q, {
 		className: `${c}__icon ${c}__icon--${o}`,
 		iconName: Sa[o],
 		size: "l"
@@ -10941,7 +10963,7 @@ var Hr = {
 		context: V,
 		fill: "var(--pds-color-surface-default)",
 		height: Ga,
-		stroke: "var(--pds-color-popover-border)",
+		stroke: "var(--pds-color-border-default)",
 		strokeWidth: 1,
 		tipRadius: 0,
 		width: Ka
@@ -11605,35 +11627,42 @@ 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 = ({ 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;
+}, xo = ({ actionCallback: t, actionIcon: n = "barsFilter", actionLabel: r, className: i, description: a, icon: o, iconColor: s = "neutral", isActive: c = !1, isLoading: l = !1, stat: u, title: f, ...p }) => {
+	let m = "pds-stat-panel", h = s === "neutral" ? null : `${m}--${s}`, g = c ? `${m}--active` : null, _ = d(), v = n && r && t;
 	return /* @__PURE__ */ e.createElement("div", {
-		"aria-labelledby": m,
+		"aria-labelledby": _,
 		className: Z([
-			f,
-			p,
+			m,
+			h,
+			g,
 			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, {
+		...p
+	}, /* @__PURE__ */ e.createElement("div", { className: Z([`${m}__header`, v ? `${m}__header--has-action` : null]) }, /* @__PURE__ */ e.createElement("span", {
+		className: `${m}__title`,
+		id: _
+	}, f), v && /* @__PURE__ */ e.createElement(An, {
 		ariaLabel: r,
-		className: `${f}__action`,
+		className: `${m}__action`,
 		iconName: n,
+		isPressed: c,
 		onClick: t,
 		size: "s"
-	})), /* @__PURE__ */ e.createElement("div", { className: `${f}__body` }, o === "spinner" ? /* @__PURE__ */ e.createElement(bn, {
+	})), /* @__PURE__ */ e.createElement("div", { className: `${m}__body` }, o === "spinner" ? /* @__PURE__ */ e.createElement(bn, {
 		isInline: !0,
-		className: `${f}__icon ${f}__icon--spinner`,
-		size: "xl"
-	}) : /* @__PURE__ */ e.createElement(Q, {
-		className: `${f}__icon`,
+		className: `${m}__icon ${m}__icon--spinner`,
+		size: "l"
+	}) : o && /* @__PURE__ */ e.createElement(Q, {
+		className: `${m}__icon`,
 		iconName: o,
 		size: "l"
-	}), /* @__PURE__ */ e.createElement("span", { className: `${f}__stat` }, c)), a && /* @__PURE__ */ e.createElement("p", { className: `${f}__description` }, a));
+	}), l ? /* @__PURE__ */ e.createElement(kr, {
+		className: `${m}__stat-skeleton`,
+		shape: "text-block",
+		size: { width: 6 },
+		textSize: "xl"
+	}) : u && /* @__PURE__ */ e.createElement("span", { className: `${m}__stat` }, u)), a && /* @__PURE__ */ e.createElement("p", { className: `${m}__description` }, a));
 }, So = [
 	"default",
 	"working",
@@ -11726,14 +11755,14 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 	hasError: "has an error",
 	next: "Next"
 }, ...i }) => {
-	let a = "pds-stepper", o = "pds-stepper-mobile", s = h(null), [c] = Ue(s), l = c.width, u = parseFloat(St) * 16, d = n.length, f = n.map((e) => e.isCurrent).lastIndexOf(!0), p = n.map((t, n) => {
-		let i = n + 1, o = n === f, s = t.isComplete || n < f, c = t.hasError && o, p = (l - d * u) / (d + (d - 2)), m = u + p * 2, h = u + p, g = p + 36, _ = n === 0, v = n === d - 1, y = m;
-		(_ || v) && (y = h);
-		let b = `${a}__step`, x = [b];
-		o && x.push(`${b}--current`), s && x.push(`${b}--complete`), c && x.push(`${b}--error`);
-		let S = `${r.step} ${i}`;
-		s && (S = `${r.step} ${i}, ${r.completed}`), c && (S = `${r.step} ${i}, ${r.hasError}`);
-		let C = s ? /* @__PURE__ */ e.createElement("div", {
+	let a = "pds-stepper", o = "pds-stepper-mobile", s = h(null), [c] = Ue(s), l = c.width, u = n.length, d = n.map((e) => e.isCurrent).lastIndexOf(!0), f = n.map((t, n) => {
+		let i = n + 1, o = n === d, s = t.isComplete || n < d, c = t.hasError && o, f = (l - u * 136) / (u + (u - 2)), p = 136 + f * 2, m = 136 + f, h = f + 48, g = n === 0, _ = n === u - 1, v = p;
+		(g || _) && (v = m);
+		let y = `${a}__step`, b = [y];
+		o && b.push(`${y}--current`), s && b.push(`${y}--complete`), c && b.push(`${y}--error`);
+		let x = `${r.step} ${i}`;
+		s && (x = `${r.step} ${i}, ${r.completed}`), c && (x = `${r.step} ${i}, ${r.hasError}`);
+		let S = s ? /* @__PURE__ */ e.createElement("div", {
 			"aria-hidden": "true",
 			className: `${a}__step-indicator`
 		}, /* @__PURE__ */ e.createElement("svg", {
@@ -11747,39 +11776,39 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		}, /* @__PURE__ */ e.createElement("path", { d: "M9.85474 3.64666C10.1032 3.32078 10.0258 2.86817 9.67727 2.63583C9.32878 2.4035 8.84476 2.47591 8.5963 2.80179L4.8694 7.65977L3.32056 6.21143C3.01724 5.9278 2.52677 5.9278 2.22669 6.21143C1.9266 6.49506 1.92337 6.9537 2.22346 7.23734L4.41765 9.28916C4.57899 9.44003 4.80164 9.51546 5.02751 9.49736C5.25338 9.47925 5.4599 9.37063 5.59219 9.19864L9.85151 3.64666H9.85474Z" }))) : /* @__PURE__ */ e.createElement("div", {
 			"aria-hidden": "true",
 			className: `${a}__step-indicator`
-		}), w = /* @__PURE__ */ e.createElement("div", { className: `${a}__step-label` }, t.label), T = /* @__PURE__ */ e.createElement("div", { className: `${a}__step-content` }, w, C);
-		return s && t.callback && (T = /* @__PURE__ */ e.createElement("button", {
+		}), C = /* @__PURE__ */ e.createElement("div", { className: `${a}__step-label` }, t.label), w = /* @__PURE__ */ e.createElement("div", { className: `${a}__step-content` }, C, S);
+		return s && t.callback && (w = /* @__PURE__ */ e.createElement("button", {
 			className: `${a}__step-content`,
 			onClick: (e) => {
 				t.callback(t), e.preventDefault();
 			},
 			type: "button"
-		}, w, C)), /* @__PURE__ */ e.createElement("li", {
+		}, C, S)), /* @__PURE__ */ e.createElement("li", {
 			key: t.id,
 			"aria-current": o ? "step" : null,
-			"aria-label": S,
+			"aria-label": x,
 			"aria-posinset": i,
-			"aria-setsize": d,
-			className: Z(x),
+			"aria-setsize": u,
+			className: Z(b),
 			id: t.id,
-			style: { width: y }
-		}, !_ && /* @__PURE__ */ e.createElement("span", {
+			style: { width: v }
+		}, !g && /* @__PURE__ */ e.createElement("span", {
 			className: `${a}__connector ${a}__connector--before`,
 			style: {
-				width: g,
-				marginRight: -36
+				width: h,
+				marginRight: -48
 			}
-		}), T, !v && /* @__PURE__ */ e.createElement("span", {
+		}), w, !_ && /* @__PURE__ */ e.createElement("span", {
 			className: `${a}__connector ${a}__connector--after`,
 			style: {
-				width: g,
-				marginLeft: -36
+				width: h,
+				marginLeft: -48
 			}
 		}));
-	}), m = n.map((t, i) => {
-		let a = i + 1, s = i === f, c = i === d - 1, l = t.hasError && s, u = n[f + 1] ? n[f + 1].label : null;
+	}), p = n.map((t, i) => {
+		let a = i + 1, s = i === d, c = i === u - 1, l = t.hasError && s, f = n[d + 1] ? n[d + 1].label : null;
 		if (s) {
-			let n = /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, r.step, " "), a, " of ", d), i = a / d * 100, s = l ? { "--pds-color-status-info-fill": "var(--pds-color-status-critical-foreground)" } : { "--pds-color-status-info-fill": "var(--pds-color-interactive-background-current)" }, f = /* @__PURE__ */ e.createElement("div", { className: "visually-hidden" }, r.step, " ", a, ", ", r.hasError);
+			let n = /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, r.step, " "), a, " of ", u), i = a / u * 100, s = l ? { "--pds-color-status-info-fill": "var(--pds-color-status-critical-foreground)" } : { "--pds-color-status-info-fill": "var(--pds-color-interactive-background-current)" }, d = /* @__PURE__ */ e.createElement("div", { className: "visually-hidden" }, r.step, " ", a, ", ", r.hasError);
 			return /* @__PURE__ */ e.createElement("div", {
 				key: t.id,
 				className: `${o}__step`,
@@ -11790,25 +11819,26 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 				percentage: i,
 				size: "s",
 				style: s
-			})), /* @__PURE__ */ e.createElement("div", { className: `${o}__step-text` }, /* @__PURE__ */ e.createElement("div", { className: `${o}__step-label` }, l && /* @__PURE__ */ e.createElement(e.Fragment, null, f, /* @__PURE__ */ e.createElement(Q, {
+			})), /* @__PURE__ */ e.createElement("div", { className: `${o}__step-text` }, /* @__PURE__ */ e.createElement("div", { className: `${o}__step-label` }, l && /* @__PURE__ */ e.createElement(e.Fragment, null, d, /* @__PURE__ */ e.createElement(Q, {
 				className: `${o}__error-icon`,
 				iconName: "diamondExclamation",
 				size: "m"
-			})), t.label), !c && /* @__PURE__ */ e.createElement("div", { className: `${o}__next-step` }, `${r.next}: ${u}`)));
+			})), t.label), !c && /* @__PURE__ */ e.createElement("div", { className: `${o}__next-step` }, `${r.next}: ${f}`)));
 		}
 	});
-	if (d >= 2 && d <= 5) return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
+	if (u >= 2 && u <= 5) return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
 		className: Z([a, t]),
-		"data-steps": d,
+		"data-steps": u,
 		...i
 	}, /* @__PURE__ */ e.createElement("ol", {
 		ref: s,
-		className: `${a}__steps`
-	}, p)), /* @__PURE__ */ e.createElement("div", {
+		className: `${a}__steps`,
+		style: { "--step-content-width": "8.5rem" }
+	}, f)), /* @__PURE__ */ e.createElement("div", {
 		className: Z([o, t]),
-		"data-steps": d,
+		"data-steps": u,
 		...i
-	}, /* @__PURE__ */ e.createElement("div", { className: `${o}__steps` }, m)));
+	}, /* @__PURE__ */ e.createElement("div", { className: `${o}__steps` }, p)));
 }, 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", {
@@ -12785,6 +12815,6 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 	}, []), t;
 };
 //#endregion
-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 };
+export { ur as ActionCard, Jo as AppLayout, bt as Avatar, St 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