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

package/dist/index.js

@@ -1,9 +1,9 @@
 import e, { Children as t, cloneElement as n, createContext as r, createElement as i, forwardRef as a, isValidElement as o, useCallback as s, useContext as c, useEffect as l, useId as u, useImperativeHandle as d, useLayoutEffect as f, useMemo as p, useRef as m, useState as h } from "react";
 import g from "hash-sum";
 import { FloatingArrow as _, FloatingFocusManager as v, FloatingOverlay as y, FloatingPortal as b, arrow as x, autoUpdate as S, flip as C, offset as w, safePolygon as T, shift as E, size as D, useClick as O, useDismiss as k, useFloating as A, useFocus as j, useHover as M, useId as N, useInteractions as P, useListNavigation as F, useRole as I, useTransitionStyles as L, useTypeahead as R } from "@floating-ui/react";
-import { Bar as z, BarChart as B, CartesianGrid as V, Cell as H, Line as U, LineChart as W, Pie as G, PieChart as K, ReferenceLine as q, ResponsiveContainer as J, Tooltip as ee, XAxis as te, YAxis as ne } from "recharts";
-import { CodeBlock as re } from "react-code-block";
-import { useCombobox as ie, useMultipleSelection as ae } from "downshift";
+import { Bar as z, BarChart as B, CartesianGrid as V, Cell as H, Line as U, LineChart as ee, Pie as W, PieChart as G, ReferenceLine as K, ResponsiveContainer as q, Tooltip as te, XAxis as ne, YAxis as re } from "recharts";
+import { CodeBlock as ie } from "react-code-block";
+import { useCombobox as ae, useMultipleSelection as J } from "downshift";
 import { format as Y } from "date-fns";
 import { DayPicker as oe } from "react-day-picker";
 import { isSafari as X } from "react-device-detect";
@@ -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, {
@@ -3517,7 +3521,7 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		label: p.label,
 		size: H,
 		type: p.type
-	})) : s, W = p ? /* @__PURE__ */ e.createElement("span", { className: `${A}__accordion-label` }, s, /* @__PURE__ */ e.createElement(Bt, {
+	})) : s, ee = p ? /* @__PURE__ */ e.createElement("span", { className: `${A}__accordion-label` }, s, /* @__PURE__ */ e.createElement(Bt, {
 		className: `${A}__tally`,
 		label: p.label,
 		size: "s",
@@ -3559,18 +3563,18 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 			...C({ onClick: I })
 		});
 	}
-	let G = i ? /* @__PURE__ */ e.createElement("span", { className: `${A}__icon-label` }, /* @__PURE__ */ e.createElement(Q, { iconName: r }), " ", s) : W, K = T ? `${A}--expanded` : null;
+	let W = i ? /* @__PURE__ */ e.createElement("span", { className: `${A}__icon-label` }, /* @__PURE__ */ e.createElement(Q, { iconName: r }), " ", s) : ee, G = T ? `${A}--expanded` : null;
 	return /* @__PURE__ */ e.createElement("span", {
 		className: Z([
 			A,
-			K,
+			G,
 			t
 		]),
 		"data-testid": m,
 		...v
 	}, /* @__PURE__ */ e.createElement(dn, {
 		disabled: n,
-		label: G
+		label: W
 	}, /* @__PURE__ */ e.createElement("ul", {
 		className: `${A}__mobile-menu`,
 		role: "menu"
@@ -4144,25 +4148,25 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 }, message: d, onBlur: f, onFocus: p, onOptionSelect: m, options: g, required: _ = !1, showLabel: v = !0, size: y = "s", tooltipText: b = null, validationMessage: x, validationStatus: S, value: C, ...w }) => {
 	let T = St(s), E = "pds-select", D = t ? `${E}--auto-width` : null, O = y === "s" ? null : `${E}--${y}`, k = i ? $.disabled : null, A = _ && !i ? $.required : null, j = S === "error" ? $.error : null, M = S === "success" ? $.success : null, N = null;
 	S === "error" && (N = "error"), S === "success" && (N = "success");
-	let P = x || d, F = C !== void 0, I = r !== void 0, L = ((e) => e.reduce((e, t) => Nt(t) ? [...e, ...t.options] : [...e, t], []))(g), R = (e) => L.findIndex((t) => t.value === e), z = F && R(C) >= 0 ? R(C) : null, B = I ? R(r) : null, [V, H] = h((z || B) ?? null), { activeIndex: U, floatingStyles: W, getFloatingProps: G, getItemProps: K, getReferenceProps: q, isMounted: J, listRef: ee, refs: te, setIsOpen: ne, transitionStyles: re } = Qt({
+	let P = x || d, F = C !== void 0, I = r !== void 0, L = ((e) => e.reduce((e, t) => Nt(t) ? [...e, ...t.options] : [...e, t], []))(g), R = (e) => L.findIndex((t) => t.value === e), z = F && R(C) >= 0 ? R(C) : null, B = I ? R(r) : null, [V, H] = h((z || B) ?? null), { activeIndex: U, floatingStyles: ee, getFloatingProps: W, getItemProps: G, getReferenceProps: K, isMounted: q, listRef: te, refs: ne, setIsOpen: re, transitionStyles: ie } = Qt({
 		enableClick: !i,
 		enableTypeahead: !0,
 		role: "listbox",
 		selectedIndex: V,
 		variant: "input"
-	}), ie = V === null ? void 0 : L[V]?.label, ae = V === null ? void 0 : L[V]?.icon, Y = V === null ? void 0 : L[V]?.value, oe = (e) => {
+	}), ae = V === null ? void 0 : L[V]?.label, J = V === null ? void 0 : L[V]?.icon, Y = V === null ? void 0 : L[V]?.value, oe = (e) => {
 		let t = L[e];
-		F || (H(e), ne(!1)), m && m(t);
+		F || (H(e), re(!1)), m && m(t);
 	};
 	l(() => {
-		F && (H(R(C)), ne(!1));
+		F && (H(R(C)), re(!1));
 	}, [C]);
 	let X = () => {
 		f && f(Y);
 	}, se = () => {
 		p && p(Y);
 	}, ce = () => {
-		te.reference.current.focus();
+		ne.reference.current.focus();
 	}, le = (t, n) => t === "google" || t === "microsoft" ? /* @__PURE__ */ e.createElement(Cn, {
 		className: n,
 		platformType: t,
@@ -4180,17 +4184,17 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 					return /* @__PURE__ */ e.createElement(Pt, {
 						key: r,
 						ref: (e) => {
-							ee.current[r] = e;
+							te.current[r] = e;
 						},
 						"aria-disabled": t?.disabled,
 						"aria-selected": r === V && r === U,
 						tabIndex: r === U ? 0 : -1,
-						...!t?.disabled && K({
+						...!t?.disabled && G({
 							onClick() {
 								oe(r);
 							},
 							onKeyDown(e) {
-								e.key === "Enter" && (e.preventDefault(), oe(r), te.reference.current.focus()), e.key === "Escape" && (e.preventDefault(), te.reference.current.focus());
+								e.key === "Enter" && (e.preventDefault(), oe(r), ne.reference.current.focus()), e.key === "Escape" && (e.preventDefault(), ne.reference.current.focus());
 							}
 						})
 					}, /* @__PURE__ */ e.createElement("span", { className: `${E}__option-label` }, t.icon && le(t.icon, `${E}__option-icon`), t.label), V === r && /* @__PURE__ */ e.createElement(Nn, null));
@@ -4204,17 +4208,17 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 			return /* @__PURE__ */ e.createElement(Pt, {
 				key: r,
 				ref: (e) => {
-					ee.current[r] = e;
+					te.current[r] = e;
 				},
 				"aria-disabled": t?.disabled,
 				"aria-selected": r === V && r === U,
 				tabIndex: r === U ? 0 : -1,
-				...!t?.disabled && K({
+				...!t?.disabled && G({
 					onClick() {
 						oe(r);
 					},
 					onKeyDown(e) {
-						e.key === "Enter" && (e.preventDefault(), oe(r), te.reference.current.focus()), e.key === "Escape" && (e.preventDefault(), te.reference.current.focus());
+						e.key === "Enter" && (e.preventDefault(), oe(r), ne.reference.current.focus()), e.key === "Escape" && (e.preventDefault(), ne.reference.current.focus());
 					}
 				})
 			}, /* @__PURE__ */ e.createElement("span", { className: `${E}__option-label` }, t.icon && le(t.icon, `${E}__option-icon`), t.label), V === r && /* @__PURE__ */ e.createElement(Nn, null));
@@ -4251,29 +4255,29 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		showLabel: v,
 		tooltipText: b
 	}), /* @__PURE__ */ e.createElement("span", {
-		ref: te.setReference,
+		ref: ne.setReference,
 		"aria-autocomplete": "none",
 		"aria-labelledby": `${o}-label`,
 		className: `${E}__input-wrapper`,
 		id: o,
 		tabIndex: 0,
-		...q({
+		...K({
 			onClick: ce,
 			onBlur: X,
 			onFocus: se
 		})
-	}, N && /* @__PURE__ */ e.createElement(Ot, { variant: N }), /* @__PURE__ */ e.createElement("span", { className: `${E}__input-inner` }, /* @__PURE__ */ e.createElement("span", { className: `${E}__option-text` }, (ae || !ie && a) && le(ae || a, `${E}__icon`), /* @__PURE__ */ e.createElement("span", { className: `${E}__option-label-text` }, ie ?? u.selectOptionText)), /* @__PURE__ */ e.createElement(Q, {
+	}, N && /* @__PURE__ */ e.createElement(Ot, { variant: N }), /* @__PURE__ */ e.createElement("span", { className: `${E}__input-inner` }, /* @__PURE__ */ e.createElement("span", { className: `${E}__option-text` }, (J || !ae && a) && le(J || a, `${E}__icon`), /* @__PURE__ */ e.createElement("span", { className: `${E}__option-label-text` }, ae ?? u.selectOptionText)), /* @__PURE__ */ e.createElement(Q, {
 		className: `${E}__trigger-icon`,
 		iconName: "angleDown"
-	}))), J && /* @__PURE__ */ e.createElement("div", {
-		ref: te.setFloating,
+	}))), q && /* @__PURE__ */ e.createElement("div", {
+		ref: ne.setFloating,
 		className: `pds-dropdown__panel ${E}__dropdown`,
 		style: {
-			...W,
+			...ee,
 			zIndex: "var(--pds-z-index-dropdown)"
 		},
-		...G()
-	}, /* @__PURE__ */ e.createElement("div", { style: { ...re } }, /* @__PURE__ */ e.createElement("ul", {
+		...W()
+	}, /* @__PURE__ */ e.createElement("div", { style: { ...ie } }, /* @__PURE__ */ e.createElement("ul", {
 		className: `${E}__options`,
 		role: "group"
 	}, ue(g)))), P && /* @__PURE__ */ e.createElement(Et, {
@@ -4605,7 +4609,7 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 	let t = Math.abs(e);
 	return t >= 1e9 ? `${(e / 1e9).toFixed(1).replace(/\.0$/, "")}B` : t >= 1e6 ? `${(e / 1e6).toFixed(1).replace(/\.0$/, "")}M` : t >= 1e3 ? `${(e / 1e3).toFixed(1).replace(/\.0$/, "")}K` : String(e);
 }, $n = ({ barRadius: t = 2, chartHeight: n, chartWidth: r, className: i, colorPalette: a = "categorical", data: o = [], isLoading: c = !1, isThumbnail: u = !1, labelStrings: d = {}, layout: f = "horizontal", legendVariant: p = "inline", onTimePeriodChange: g, selectedTimePeriod: _, series: v = [], showAccessibleTable: y, showAxisLines: b, showGrid: x, showLegend: T, showTooltip: D, timePeriodOptions: O, tooltipContent: k, variant: j = "stacked", xAxisLabel: M, xAxisTickInterval: N, yAxisDomain: P, yAxisFormatter: F = Qn, yAxisLabel: I, yAxisTickInterval: R, ...H }) => {
-	let { accessibleTableDescription: U = "Bar chart data", emptyStateHeading: W = "No data available", emptyStateMessage: G, legendTableHeader: K, loadingLabel: q = "Loading chart data" } = d, re = m(null), ie = Ln(a, Un(re, a)), ae = n ?? (u ? 60 : 360), Y = r ?? (u ? 60 : void 0), oe = x ?? !u, X = b ?? !u, se = T ?? !u, ce = D ?? !u, le = y ?? !0, [ue, de] = h(null), fe = m(ue);
+	let { accessibleTableDescription: U = "Bar chart data", emptyStateHeading: ee = "No data available", emptyStateMessage: W, legendTableHeader: G, loadingLabel: K = "Loading chart data" } = d, ie = m(null), ae = Ln(a, Un(ie, a)), J = n ?? (u ? 60 : 360), Y = r ?? (u ? 60 : void 0), oe = x ?? !u, X = b ?? !u, se = T ?? !u, ce = D ?? !u, le = y ?? !0, [ue, de] = h(null), fe = m(ue);
 	ue && (fe.current = ue);
 	let pe = m({ getBoundingClientRect: () => ({
 		bottom: 0,
@@ -4653,9 +4657,9 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		de(null);
 	}, []);
 	if (c) return /* @__PURE__ */ e.createElement("div", {
-		ref: re,
+		ref: ie,
 		"aria-busy": "true",
-		"aria-label": q,
+		"aria-label": K,
 		className: Z([
 			be,
 			`${be}--loading`,
@@ -4664,25 +4668,25 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		style: { maxWidth: Y },
 		...H
 	}, /* @__PURE__ */ e.createElement(Zn, {
-		height: ae,
+		height: J,
 		legendVariant: p,
 		showLegend: se
 	}));
 	if (!o || o.length === 0) return /* @__PURE__ */ e.createElement("div", {
-		ref: re,
+		ref: ie,
 		className: Z([
 			be,
 			`${be}--empty`,
 			i ?? ""
 		]),
 		style: {
-			height: ae,
+			height: J,
 			maxWidth: Y
 		},
 		...H
 	}, /* @__PURE__ */ e.createElement(Mn, {
-		heading: W,
-		message: G
+		heading: ee,
+		message: W
 	}));
 	let we = f === "vertical", Te = (e) => j === "grouped" || j === "stacked" && e === v.length - 1 ? we ? [
 		0,
@@ -4696,7 +4700,7 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		0
 	] : 0;
 	return /* @__PURE__ */ e.createElement("div", {
-		ref: re,
+		ref: ie,
 		className: Z([be, i ?? ""]),
 		style: Y ? { maxWidth: Y } : void 0,
 		...H
@@ -4715,8 +4719,8 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		"aria-hidden": "true",
 		onMouseLeave: k ? void 0 : Ce,
 		onMouseMove: ce && !k ? Se : void 0
-	}, /* @__PURE__ */ e.createElement(J, {
-		height: ae,
+	}, /* @__PURE__ */ e.createElement(q, {
+		height: J,
 		width: "100%"
 	}, /* @__PURE__ */ e.createElement(B, {
 		barGap: 6,
@@ -4738,7 +4742,7 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		stroke: "var(--pds-color-border-default)",
 		strokeDasharray: "3 3",
 		vertical: we
-	}), /* @__PURE__ */ e.createElement(te, {
+	}), /* @__PURE__ */ e.createElement(ne, {
 		axisLine: X,
 		dataKey: we ? void 0 : "label",
 		hide: !X,
@@ -4754,7 +4758,7 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		tickLine: !1,
 		tickMargin: 10,
 		type: we ? "number" : "category"
-	}), /* @__PURE__ */ e.createElement(ne, {
+	}), /* @__PURE__ */ e.createElement(re, {
 		axisLine: X,
 		dataKey: we ? "label" : void 0,
 		domain: P,
@@ -4772,7 +4776,7 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		tickLine: !1,
 		tickMargin: 6,
 		type: we ? "category" : "number"
-	}), ce && k && /* @__PURE__ */ e.createElement(ee, {
+	}), ce && k && /* @__PURE__ */ e.createElement(te, {
 		content: (e) => !e.active || !e.payload?.length ? null : k({
 			entries: e.payload.map((e) => ({
 				color: String(e.color ?? ""),
@@ -4786,12 +4790,12 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 	}), v.map((t, n) => /* @__PURE__ */ e.createElement(z, {
 		key: t.dataKey,
 		dataKey: t.dataKey,
-		fill: Vn(n, ie, t.color, Rn(a, t.paletteIndex)),
+		fill: Vn(n, ae, t.color, Rn(a, t.paletteIndex)),
 		name: t.label,
 		onMouseEnter: k ? void 0 : (e) => {
 			let r = e;
 			ce && r && de({
-				color: Vn(n, ie, t.color, Rn(a, t.paletteIndex)),
+				color: Vn(n, ae, t.color, Rn(a, t.paletteIndex)),
 				label: String(r.label ?? ""),
 				name: t.label,
 				value: Number(r[t.dataKey] ?? 0)
@@ -4816,8 +4820,8 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 	}), /* @__PURE__ */ e.createElement("span", { className: "recharts-tooltip-item-name" }, fe.current.name), /* @__PURE__ */ e.createElement("span", { className: "recharts-tooltip-item-separator" }, ": "), /* @__PURE__ */ e.createElement("span", { className: "recharts-tooltip-item-value" }, F(fe.current.value)))), se && /* @__PURE__ */ e.createElement(qn, {
 		data: o,
 		series: v,
-		seriesColors: ie,
-		tableHeader: K,
+		seriesColors: ae,
+		tableHeader: G,
 		valueFormatter: F,
 		variant: p
 	}), le && /* @__PURE__ */ e.createElement(Kn, {
@@ -4832,7 +4836,7 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		default: return;
 	}
 }, tr = ({ annotations: t, chartHeight: n, chartWidth: r, className: i, colorPalette: a = "categorical", data: o = [], isLoading: s = !1, isThumbnail: c = !1, labelStrings: l = {}, legendVariant: u = "inline", lineStyle: d = "smooth", onTimePeriodChange: f, referenceLines: p, selectedTimePeriod: h, series: g = [], showAccessibleTable: _, showAxisLines: v, showDataPoints: y, showGrid: b, showLegend: x, showTooltip: S, timePeriodOptions: C, tooltipContent: w, xAxisLabel: T, xAxisTickInterval: E, yAxisDomain: D, yAxisFormatter: O = Qn, yAxisLabel: k, yAxisTickInterval: A, ...j }) => {
-	let { accessibleTableDescription: M = "Line chart data", emptyStateHeading: N = "No data available", emptyStateMessage: P, legendTableHeader: F, loadingLabel: I = "Loading chart data" } = l, L = m(null), R = Ln(a, Un(L, a)), z = n ?? (c ? 60 : 360), B = r ?? (c ? 60 : void 0), H = b ?? !c, G = v ?? !c, K = x ?? !c, re = S ?? !c, ie = y ?? !c, ae = _ ?? !0, Y = "pds-line-chart";
+	let { accessibleTableDescription: M = "Line chart data", emptyStateHeading: N = "No data available", emptyStateMessage: P, legendTableHeader: F, loadingLabel: I = "Loading chart data" } = l, L = m(null), R = Ln(a, Un(L, a)), z = n ?? (c ? 60 : 360), B = r ?? (c ? 60 : void 0), H = b ?? !c, W = v ?? !c, G = x ?? !c, ie = S ?? !c, ae = y ?? !c, J = _ ?? !0, Y = "pds-line-chart";
 	return s ? /* @__PURE__ */ e.createElement("div", {
 		ref: L,
 		"aria-busy": "true",
@@ -4847,7 +4851,7 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 	}, /* @__PURE__ */ e.createElement(Zn, {
 		height: z,
 		legendVariant: u,
-		showLegend: K
+		showLegend: G
 	})) : !o || o.length === 0 ? /* @__PURE__ */ e.createElement("div", {
 		ref: L,
 		className: Z([
@@ -4879,10 +4883,10 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		})),
 		showLabel: !1,
 		value: h
-	})), /* @__PURE__ */ e.createElement("div", { "aria-hidden": "true" }, /* @__PURE__ */ e.createElement(J, {
+	})), /* @__PURE__ */ e.createElement("div", { "aria-hidden": "true" }, /* @__PURE__ */ e.createElement(q, {
 		height: z,
 		width: "100%"
-	}, /* @__PURE__ */ e.createElement(W, {
+	}, /* @__PURE__ */ e.createElement(ee, {
 		data: o,
 		margin: c ? {
 			bottom: 0,
@@ -4898,37 +4902,37 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 	}, H && /* @__PURE__ */ e.createElement(V, {
 		stroke: "var(--pds-color-border-default)",
 		strokeDasharray: "3 3"
-	}), /* @__PURE__ */ e.createElement(te, {
-		axisLine: G,
+	}), /* @__PURE__ */ e.createElement(ne, {
+		axisLine: W,
 		dataKey: "label",
-		hide: !G,
+		hide: !W,
 		interval: E,
-		label: T && G ? {
+		label: T && W ? {
 			...Gn,
 			offset: -15,
 			position: "insideBottom",
 			value: T
 		} : void 0,
-		tick: G ? Wn : !1,
+		tick: W ? Wn : !1,
 		tickLine: !1,
 		tickMargin: 10
-	}), /* @__PURE__ */ e.createElement(ne, {
-		axisLine: G,
+	}), /* @__PURE__ */ e.createElement(re, {
+		axisLine: W,
 		domain: D,
-		hide: !G,
+		hide: !W,
 		interval: A,
-		label: k && G ? {
+		label: k && W ? {
 			...Gn,
 			angle: -90,
 			dx: -44,
 			position: "center",
 			value: k
 		} : void 0,
-		tick: G ? Wn : !1,
+		tick: W ? Wn : !1,
 		tickFormatter: O,
 		tickLine: !1,
 		tickMargin: 6
-	}), re && /* @__PURE__ */ e.createElement(ee, { content: (t) => {
+	}), ie && /* @__PURE__ */ e.createElement(te, { content: (t) => {
 		if (!t.active || !t.payload?.length) return null;
 		let n = t.payload.map((e) => ({
 			color: String(e.color ?? ""),
@@ -4948,9 +4952,9 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		}), t.name, /* @__PURE__ */ e.createElement("span", { className: "recharts-tooltip-item-separator" }, " ", ":", " "), O(t.value))));
 	} }), g.map((t, n) => /* @__PURE__ */ e.createElement(U, {
 		key: t.dataKey,
-		activeDot: ie ? { r: 6 } : !1,
+		activeDot: ae ? { r: 6 } : !1,
 		dataKey: t.dataKey,
-		dot: ie ? {
+		dot: ae ? {
 			fill: Vn(n, R, t.color, Rn(a, t.paletteIndex)),
 			r: 4,
 			strokeWidth: 0
@@ -4962,7 +4966,7 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		type: d === "straight" ? "linear" : "monotone"
 	})), !c && p?.map((t, n) => {
 		let r = t.color ?? "var(--pds-color-foreground-default-secondary)";
-		return /* @__PURE__ */ e.createElement(q, {
+		return /* @__PURE__ */ e.createElement(K, {
 			key: `ref-y-${n}`,
 			label: ({ viewBox: n }) => {
 				let r = (n?.x ?? 0) + (n?.width ?? 0) / 2, i = (n?.y ?? 0) - 8;
@@ -4982,7 +4986,7 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		});
 	}), !c && t?.map((t, n) => {
 		let r = t.color ?? "var(--pds-color-foreground-default-secondary)";
-		return /* @__PURE__ */ e.createElement(q, {
+		return /* @__PURE__ */ e.createElement(K, {
 			key: `annotation-${n}`,
 			label: ({ viewBox: n }) => {
 				let r = (n?.x ?? 0) + (n?.width ?? 0) / 2, i = (n?.y ?? 0) - 8;
@@ -5000,14 +5004,14 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 			strokeDasharray: er(t.strokeStyle ?? "dashed"),
 			x: t.atLabel
 		});
-	})))), K && /* @__PURE__ */ e.createElement(qn, {
+	})))), G && /* @__PURE__ */ e.createElement(qn, {
 		data: o,
 		series: g,
 		seriesColors: R,
 		tableHeader: F,
 		valueFormatter: O,
 		variant: u
-	}), ae && /* @__PURE__ */ e.createElement(Kn, {
+	}), J && /* @__PURE__ */ e.createElement(Kn, {
 		data: o,
 		description: M,
 		series: g,
@@ -5088,10 +5092,10 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 			margin: "0 auto",
 			width: `min(100%, ${w}px)`
 		}
-	}, /* @__PURE__ */ e.createElement(J, {
+	}, /* @__PURE__ */ e.createElement(q, {
 		height: w,
 		width: "100%"
-	}, /* @__PURE__ */ e.createElement(K, null, /* @__PURE__ */ e.createElement(G, {
+	}, /* @__PURE__ */ e.createElement(G, null, /* @__PURE__ */ e.createElement(W, {
 		cx: "50%",
 		cy: "50%",
 		data: A,
@@ -5103,7 +5107,7 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 	}, a.map((t, n) => /* @__PURE__ */ e.createElement(H, {
 		key: t.label,
 		fill: k(n, t)
-	}))), D && /* @__PURE__ */ e.createElement(ee, {
+	}))), D && /* @__PURE__ */ e.createElement(te, {
 		content: (t) => {
 			if (!t.active || !t.payload?.length) return null;
 			let n = t.payload[0], r = Number(n.value ?? 0), i = O > 0 ? Math.round(r / O * 100) : 0, a = String(n.payload?.fill ?? "");
@@ -5148,7 +5152,7 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		width: 0,
 		x: 0,
 		y: 0
-	}) }), { context: V, floatingStyles: H, refs: U, update: W } = A({
+	}) }), { context: V, floatingStyles: H, refs: U, update: ee } = A({
 		middleware: [
 			w(8),
 			C(),
@@ -5157,7 +5161,7 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		open: !!I,
 		placement: "top",
 		whileElementsMounted: S
-	}), { isMounted: G, styles: K } = L(V, {
+	}), { isMounted: W, styles: G } = L(V, {
 		duration: {
 			close: 150,
 			open: 150
@@ -5167,7 +5171,7 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 	l(() => {
 		U.setReference(B.current);
 	}, [U]);
-	let q = s((e) => {
+	let K = s((e) => {
 		B.current.getBoundingClientRect = () => ({
 			bottom: e.clientY,
 			height: 0,
@@ -5177,8 +5181,8 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 			width: 0,
 			x: e.clientX,
 			y: e.clientY
-		}), W();
-	}, [W]), J = s(() => {
+		}), ee();
+	}, [ee]), q = s(() => {
 		R(null);
 	}, []);
 	return o ? /* @__PURE__ */ e.createElement("div", {
@@ -5216,8 +5220,8 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 	}, /* @__PURE__ */ e.createElement("div", {
 		"aria-hidden": "true",
 		className: `${k}__track`,
-		onMouseLeave: N ? J : void 0,
-		onMouseMove: N ? q : void 0,
+		onMouseLeave: N ? q : void 0,
+		onMouseMove: N ? K : void 0,
 		style: { height: t }
 	}, a.map((t, n) => {
 		let r = F(n, t), i = Math.round(t.value / P * 100);
@@ -5235,13 +5239,13 @@ var un = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 				flex: t.value
 			}
 		});
-	})), N && G && z.current && /* @__PURE__ */ e.createElement("div", {
+	})), N && W && z.current && /* @__PURE__ */ e.createElement("div", {
 		ref: U.setFloating,
 		className: "recharts-default-tooltip",
 		role: "tooltip",
 		style: {
 			...H,
-			...K,
+			...G,
 			pointerEvents: "none",
 			zIndex: "var(--pds-z-index-notifications)"
 		}
@@ -6347,17 +6351,17 @@ var sr = {
 			variant: "reverse"
 		}))));
 	}
-	let C = /* @__PURE__ */ e.createElement(re.LineContent, null, /* @__PURE__ */ e.createElement(re.Token, null)), w = /* @__PURE__ */ e.createElement("div", { className: `${g}__line ${_}` }, /* @__PURE__ */ e.createElement(re.LineNumber, { className: `${g}__number` }), C), T = /* @__PURE__ */ e.createElement("div", { className: `${g}__line` }, /* @__PURE__ */ e.createElement("span", { className: `${g}__prompt` }, f), C);
+	let C = /* @__PURE__ */ e.createElement(ie.LineContent, null, /* @__PURE__ */ e.createElement(ie.Token, null)), w = /* @__PURE__ */ e.createElement("div", { className: `${g}__line ${_}` }, /* @__PURE__ */ e.createElement(ie.LineNumber, { className: `${g}__number` }), C), T = /* @__PURE__ */ e.createElement("div", { className: `${g}__line` }, /* @__PURE__ */ e.createElement("span", { className: `${g}__prompt` }, f), C);
 	return /* @__PURE__ */ e.createElement("div", {
 		className: Z([g, t ?? ""]),
 		style: v,
 		...h
-	}, c ? y : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(re, {
+	}, c ? y : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(ie, {
 		code: n,
 		language: l || "",
 		prism: or.default,
 		theme: sr
-	}, /* @__PURE__ */ e.createElement(re.Code, {
+	}, /* @__PURE__ */ e.createElement(ie.Code, {
 		className: `${g}__code`,
 		tabIndex: 0
 	}, a || o ? a ? w : T : C)), i && /* @__PURE__ */ e.createElement("div", { className: `${g}__copy` }, /* @__PURE__ */ e.createElement(Yt, {
@@ -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",
@@ -6938,15 +6946,15 @@ var sr = {
 	searchShortcut: "Press / to focus the search field",
 	triggerButton: "Toggle dropdown menu"
 }, loadingText: v = "Loading results...", message: y, noResultsText: b = "No results found", onBlur: x, onChange: T, onClear: E, onFocus: O, onOptionSelect: k, options: j, placeholder: M, required: N = !1, showLabel: P = !0, showUnfilteredOptions: F = !1, size: I = "s", tooltipText: R = null, validationMessage: z, validationStatus: B, value: V, ...H }, U) => {
-	let W = St(d), G = "pds-combobox", K = I === "s" ? null : `${G}--${I}`, q = r ? $.disabled : null, J = N && !r ? $.required : null, ee = B === "error" ? $.error : null, te = B === "success" ? $.success : null, ne = null;
-	o && (ne = "search"), B === "error" && (ne = "error"), B === "success" && (ne = "success");
-	let re = z || y, ae = V !== void 0, Y = n !== void 0, oe = (e) => {
+	let ee = St(d), W = "pds-combobox", G = I === "s" ? null : `${W}--${I}`, K = r ? $.disabled : null, q = N && !r ? $.required : null, te = B === "error" ? $.error : null, ne = B === "success" ? $.success : null, re = null;
+	o && (re = "search"), B === "error" && (re = "error"), B === "success" && (re = "success");
+	let ie = z || y, J = V !== void 0, Y = n !== void 0, oe = (e) => {
 		let t = j.find((t) => t.value === e);
 		return t ? t.label : "";
-	}, [X, se] = h(Y ? n : void 0), [ce, le] = h(ae ? V ?? "" : Y ? oe(n) : "");
+	}, [X, se] = h(Y ? n : void 0), [ce, le] = h(J ? V ?? "" : Y ? oe(n) : "");
 	l(() => {
-		ae && le(V ?? "");
-	}, [ae, V]);
+		J && le(V ?? "");
+	}, [J, V]);
 	let ue = m(null), de = (e) => e.map(({ label: e, optionDisplay: t, searchIndex: n, value: r, ...i }) => {
 		let a = r || e, o = [e, r];
 		return n && o.push(...n), {
@@ -6966,7 +6974,7 @@ var sr = {
 		ce,
 		F,
 		f
-	]), { getInputProps: pe, getItemProps: me, getMenuProps: he, highlightedIndex: ge, isOpen: _e, openMenu: ve, reset: ye } = ie({
+	]), { getInputProps: pe, getItemProps: me, getMenuProps: he, highlightedIndex: ge, isOpen: _e, openMenu: ve, reset: ye } = ae({
 		id: u,
 		inputId: `input-${u}`,
 		items: fe,
@@ -6976,14 +6984,14 @@ var sr = {
 			le(e ?? "");
 		},
 		onSelectedItemChange: ({ selectedItem: e }) => {
-			e && (ae || le(e.label), se(e.value), k?.(e));
+			e && (J || le(e.label), se(e.value), k?.(e));
 		},
 		stateReducer: (e, { changes: t, type: n }) => {
-			if (n === ie.stateChangeTypes.InputBlur) return {
+			if (n === ae.stateChangeTypes.InputBlur) return {
 				...t,
 				inputValue: e.inputValue
 			};
-			if (n === ie.stateChangeTypes.InputClick) {
+			if (n === ae.stateChangeTypes.InputClick) {
 				if (F) return {
 					...t,
 					isOpen: !0
@@ -7032,7 +7040,7 @@ var sr = {
 	}, [U, Se]), Ee = () => {
 		_e ? ye() : ve();
 	}, De = () => {
-		ae || le(""), se(void 0), ye(), ue.current?.focus(), F && ve(), E?.();
+		J || le(""), se(void 0), ye(), ue.current?.focus(), F && ve(), E?.();
 	}, Oe = (e) => {
 		x?.(X);
 	}, ke = (e) => {
@@ -7044,19 +7052,19 @@ var sr = {
 			item: t,
 			index: n
 		})
-	}, /* @__PURE__ */ e.createElement("span", { className: `${G}__option-label` }, t.optionDisplay || t.label)));
+	}, /* @__PURE__ */ e.createElement("span", { className: `${W}__option-label` }, t.optionDisplay || t.label)));
 	return /* @__PURE__ */ e.createElement("div", {
 		className: Z([
 			$.base,
+			W,
 			G,
 			K,
 			q,
-			J,
-			ee,
 			te,
+			ne,
 			t ?? ""
 		]),
-		style: d ? W : null,
+		style: d ? ee : null,
 		...H
 	}, /* @__PURE__ */ e.createElement(Tt, {
 		disabled: r,
@@ -7067,16 +7075,16 @@ var sr = {
 		tooltipText: R
 	}), /* @__PURE__ */ e.createElement("span", {
 		ref: Te,
-		"aria-describedby": re ? `${u}__message` : null,
+		"aria-describedby": ie ? `${u}__message` : null,
 		"aria-disabled": r ? !0 : null,
 		"aria-invalid": B === "error" ? !0 : null,
 		"aria-required": N ? !0 : null,
-		className: `${G}__input-wrapper`,
+		className: `${W}__input-wrapper`,
 		id: u
-	}, ne && /* @__PURE__ */ e.createElement(Ot, { variant: ne }), /* @__PURE__ */ e.createElement("input", {
+	}, re && /* @__PURE__ */ e.createElement(Ot, { variant: re }), /* @__PURE__ */ e.createElement("input", {
 		ref: ue,
 		autoComplete: "off",
-		className: `${G}__input`,
+		className: `${W}__input`,
 		id: `input-${u}`,
 		...pe({
 			"aria-label": _.inputInstructions,
@@ -7098,30 +7106,30 @@ var sr = {
 	}), a && /* @__PURE__ */ e.createElement("button", {
 		"aria-expanded": _e,
 		"aria-label": _.triggerButton,
-		className: `${G}__trigger`,
+		className: `${W}__trigger`,
 		disabled: r,
 		onClick: Ee,
 		type: "button"
 	}, /* @__PURE__ */ e.createElement(Q, {
-		className: `${G}__trigger-icon`,
+		className: `${W}__trigger-icon`,
 		iconName: "angleDown",
 		size: "m"
 	}))), /* @__PURE__ */ e.createElement("div", {
 		ref: Se.setFloating,
-		className: `pds-dropdown__panel ${G}__dropdown`,
+		className: `pds-dropdown__panel ${W}__dropdown`,
 		style: Ce ? {
 			...xe,
 			...we,
 			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", {
-		className: `${G}__options`,
+	}, Ce && f && /* @__PURE__ */ e.createElement("div", { className: `${W}__loading` }, v), Ce && !f && fe.length === 0 && /* @__PURE__ */ e.createElement("div", { className: "pds-dropdown__no-results" }, b), /* @__PURE__ */ e.createElement("ul", {
+		className: `${W}__options`,
 		...he(),
 		style: Ce && !f && fe.length > 0 ? void 0 : { display: "none" }
-	}, Ce && !f && Ae())), re && /* @__PURE__ */ e.createElement(Et, {
+	}, Ce && !f && Ae())), ie && /* @__PURE__ */ e.createElement(Et, {
 		hasValidationMessage: !!z,
 		id: u,
-		message: re,
+		message: ie,
 		validationMessageHasDecorators: !1,
 		validationStatus: B
 	}));
@@ -7139,30 +7147,30 @@ var sr = {
 	inputInstructions: "Type to search options",
 	triggerButton: "Toggle dropdown menu"
 }, loadingText: u = "Loading results...", noResultsText: d = "No results found", onChange: f, options: g, placeholder: _ = "Filter", required: v = !1, showAllTags: y = !1, showLabel: b = !0, size: x = "s", ...T }) => {
-	let E = St(o), O = "pds-combobox-multi", j = x === "s" ? null : `${O}--${x}`, M = r ? $.disabled : null, N = v && !r ? $.required : null, F = y ? `${O}--show-all-tags` : null, [I, L] = h(""), [R, z] = h(a), [B, V] = h(null), [H, U] = h(!1), W = p(() => Sr(g, R, I), [
+	let E = St(o), O = "pds-combobox-multi", j = x === "s" ? null : `${O}--${x}`, M = r ? $.disabled : null, N = v && !r ? $.required : null, F = y ? `${O}--show-all-tags` : null, [I, L] = h(""), [R, z] = h(a), [B, V] = h(null), [H, U] = h(!1), ee = p(() => Sr(g, R, I), [
 		g,
 		R,
 		I
-	]), G = p(() => t?.items?.map((e) => ({
+	]), W = p(() => t?.items?.map((e) => ({
 		...e,
 		isAlreadySelected: R.some((t) => t.id === e.id)
-	})) || [], [t?.items, R]), K = (e) => {
+	})) || [], [t?.items, R]), G = (e) => {
 		z(e), f?.(e);
-	}, { getDropdownProps: q, getSelectedItemProps: J, removeSelectedItem: ee } = ae({
+	}, { getDropdownProps: K, getSelectedItemProps: q, removeSelectedItem: te } = J({
 		selectedItems: R,
 		onStateChange: ({ selectedItems: e, type: t }) => {
 			if (!r) switch (t) {
-				case ae.stateChangeTypes.SelectedItemKeyDownBackspace:
-				case ae.stateChangeTypes.SelectedItemKeyDownDelete:
-				case ae.stateChangeTypes.DropdownKeyDownBackspace:
-				case ae.stateChangeTypes.FunctionRemoveSelectedItem:
-					K(e || []);
+				case J.stateChangeTypes.SelectedItemKeyDownBackspace:
+				case J.stateChangeTypes.SelectedItemKeyDownDelete:
+				case J.stateChangeTypes.DropdownKeyDownBackspace:
+				case J.stateChangeTypes.FunctionRemoveSelectedItem:
+					G(e || []);
 					break;
 				default: break;
 			}
 		}
-	}), { closeMenu: te, getInputProps: ne, getItemProps: re, getMenuProps: Y, getToggleButtonProps: oe, highlightedIndex: X, isOpen: se, openMenu: ce, selectedItem: le } = ie({
-		items: W,
+	}), { closeMenu: ne, getInputProps: re, getItemProps: ie, getMenuProps: Y, getToggleButtonProps: oe, highlightedIndex: X, isOpen: se, openMenu: ce, selectedItem: le } = ae({
+		items: ee,
 		itemToString: (e) => e ? e.label : "",
 		selectedItem: null,
 		inputValue: I,
@@ -7170,8 +7178,8 @@ var sr = {
 		stateReducer: (e, { changes: t, type: n }) => {
 			if (r) return e;
 			switch (n) {
-				case ie.stateChangeTypes.InputKeyDownEnter:
-				case ie.stateChangeTypes.ItemClick: return {
+				case ae.stateChangeTypes.InputKeyDownEnter:
+				case ae.stateChangeTypes.ItemClick: return {
 					...t,
 					isOpen: !0,
 					highlightedIndex: e.highlightedIndex
@@ -7181,16 +7189,16 @@ var sr = {
 		},
 		onStateChange: ({ inputValue: e, isOpen: t, selectedItem: n, type: i }) => {
 			if (!r) switch (i) {
-				case ie.stateChangeTypes.InputKeyDownEnter:
-				case ie.stateChangeTypes.ItemClick:
-				case ie.stateChangeTypes.InputBlur:
-					n && (n.isAlreadySelected ? K(R.filter((e) => e.id !== n.id)) : K([...R, n]), L(""), V(null));
+				case ae.stateChangeTypes.InputKeyDownEnter:
+				case ae.stateChangeTypes.ItemClick:
+				case ae.stateChangeTypes.InputBlur:
+					n && (n.isAlreadySelected ? G(R.filter((e) => e.id !== n.id)) : G([...R, n]), L(""), V(null));
 					break;
-				case ie.stateChangeTypes.InputChange:
+				case ae.stateChangeTypes.InputChange:
 					L(e || ""), V(null);
 					break;
-				case ie.stateChangeTypes.ToggleButtonClick:
-				case ie.stateChangeTypes.FunctionOpenMenu:
+				case ae.stateChangeTypes.ToggleButtonClick:
+				case ae.stateChangeTypes.FunctionOpenMenu:
 					t && U(!1);
 					break;
 				default: break;
@@ -7232,9 +7240,9 @@ var sr = {
 	}), { getFloatingProps: he } = P([k(fe)]), ge = (e) => {
 		if (e.stopPropagation(), r) return;
 		let t = !H;
-		U(t), t && se && te();
+		U(t), t && se && ne();
 	}, _e = (e) => {
-		r || (e.isAlreadySelected ? K(R.filter((t) => t.id !== e.id)) : K([...R, e]));
+		r || (e.isAlreadySelected ? G(R.filter((t) => t.id !== e.id)) : G([...R, e]));
 	}, ve = () => {
 		U(!1), t?.onClose?.();
 	}, ye = () => {
@@ -7243,16 +7251,16 @@ var sr = {
 		if (B === null) V(R.length - 1);
 		else {
 			let e = [...R];
-			e.splice(B, 1), K(e), V(null);
+			e.splice(B, 1), G(e), V(null);
 		}
 	}, xe = m(!1), Se = () => {
-		r || (xe.current ? te() : ce());
+		r || (xe.current ? ne() : ce());
 	}, Ce = (e) => {
 		xe.current = se, !r && e.currentTarget.setAttribute("data-focus-method", "mouse");
 	}, we = (e) => {
 		e.currentTarget.setAttribute("data-focus-method", "keyboard"), !r && ((e.key === "Backspace" || e.key === "Delete") && !I && R.length > 0 && (e.preventDefault(), be()), e.key === "Enter" && B !== null && (e.preventDefault(), be()), !se && (e.key === "Enter" || e.key === "ArrowDown") && (e.preventDefault(), ce()));
-	}, Te = ne({
-		...q({ preventKeyAction: se }),
+	}, Te = re({
+		...K({ preventKeyAction: se }),
 		disabled: r,
 		onKeyDown: we
 	}), Ee = R.length === 2 ? /* @__PURE__ */ e.createElement("span", { className: `${O}__counter-item` }, R.length - 1) : R.length === 3 ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: `${O}__counter-layer` }), /* @__PURE__ */ e.createElement("span", { className: `${O}__counter-item` }, R.length - 1)) : R.length > 3 ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: `${O}__counter-layer` }), /* @__PURE__ */ e.createElement("span", { className: `${O}__counter-layer` }), /* @__PURE__ */ e.createElement("span", { className: `${O}__counter-item` }, R.length - 1)) : "";
@@ -7291,7 +7299,7 @@ var sr = {
                   ${O}__selected-item
                   ${n === B ? `${O}__selected-item--marked-for-deletion` : ""}
                 `,
-		...J({
+		...q({
 			selectedItem: t,
 			index: n
 		}),
@@ -7300,7 +7308,7 @@ var sr = {
 		"aria-label": `Remove ${t.label}`,
 		className: `${O}__selected-item-remove`,
 		onClick: (e) => {
-			e.stopPropagation(), ee(t);
+			e.stopPropagation(), te(t);
 		},
 		onKeyDown: (e) => {
 			(e.key === "Enter" || e.key === " ") && e.stopPropagation();
@@ -7330,7 +7338,7 @@ var sr = {
 		iconName: "angleDown",
 		size: "m"
 	})))), /* @__PURE__ */ e.createElement("div", {
-		...q(),
+		...K(),
 		ref: de.setFloating,
 		className: `pds-dropdown__panel ${O}__dropdown`,
 		style: se ? {
@@ -7345,17 +7353,17 @@ var sr = {
 		onClick: (e) => {
 			e.stopPropagation();
 		}
-	})), se && s && /* @__PURE__ */ e.createElement("div", { className: `${O}__loading` }, u), se && !s && W.length === 0 && /* @__PURE__ */ e.createElement("div", { className: "pds-dropdown__no-results" }, d), /* @__PURE__ */ e.createElement("ul", {
+	})), se && s && /* @__PURE__ */ e.createElement("div", { className: `${O}__loading` }, u), se && !s && ee.length === 0 && /* @__PURE__ */ e.createElement("div", { className: "pds-dropdown__no-results" }, d), /* @__PURE__ */ e.createElement("ul", {
 		className: `${O}__dropdown-list`,
 		...Y(),
-		style: se && !s && W.length > 0 ? void 0 : { display: "none" }
-	}, se && !s && W.map((t, n) => /* @__PURE__ */ e.createElement(Pt, {
+		style: se && !s && ee.length > 0 ? void 0 : { display: "none" }
+	}, se && !s && ee.map((t, n) => /* @__PURE__ */ e.createElement(Pt, {
 		key: `${t.id}-${n}`,
 		className: `${O}__dropdown-item
                   ${X === n ? "pds-dropdown__item--focused" : ""}
                   ${le === t ? `${O}__dropdown-item--selected` : ""}
                   ${t.isAlreadySelected ? "pds-dropdown__item--active" : ""}`,
-		...re({
+		...ie({
 			item: t,
 			index: n
 		})
@@ -7374,7 +7382,7 @@ var sr = {
 		className: `${O}__aux-panel-icon`,
 		iconName: "sparkles",
 		size: "m"
-	}), /* @__PURE__ */ e.createElement("div", { className: `${O}__aux-panel-items` }, G.map((t) => /* @__PURE__ */ e.createElement("button", {
+	}), /* @__PURE__ */ e.createElement("div", { className: `${O}__aux-panel-items` }, W.map((t) => /* @__PURE__ */ e.createElement("button", {
 		key: t.id,
 		className: Z([`${O}__aux-panel-item`, t.isAlreadySelected ? `${O}__aux-panel-item--selected` : ""]),
 		onClick: () => _e(t),
@@ -7466,7 +7474,7 @@ var sr = {
 	let D = {
 		...Er,
 		...v
-	}, [O, k] = h(x), [j, M] = h(!1), [N, P] = h(null), [F, I] = h(r ? x?.from : x), L = St(a), R = "pds-datepicker", z = n ? $.disabled : null, B = m && !n ? $.required : null, V = b === "error" ? $.error : null, H = b === "success" ? $.success : null, U = y || u, { floatingStyles: W, refs: G } = A({
+	}, [O, k] = h(x), [j, M] = h(!1), [N, P] = h(null), [F, I] = h(r ? x?.from : x), L = St(a), R = "pds-datepicker", z = n ? $.disabled : null, B = m && !n ? $.required : null, V = b === "error" ? $.error : null, H = b === "success" ? $.success : null, U = y || u, { floatingStyles: ee, refs: W } = A({
 		open: j,
 		onOpenChange: M,
 		placement: "bottom-start",
@@ -7476,22 +7484,22 @@ var sr = {
 			E({ padding: 8 })
 		],
 		whileElementsMounted: S
-	}), K = (e) => {
+	}), G = (e) => {
 		k(e), f?.(e), r || setTimeout(() => {
 			M(!1);
 		}, 300);
+	}, K = (e) => {
+		G(e);
 	}, q = (e) => {
-		K(e);
-	}, J = (e) => {
-		K(e);
-	}, ee = () => {
-		k(void 0), f?.(void 0);
+		G(e);
 	}, te = () => {
-		M(!1);
+		k(void 0), f?.(void 0);
 	}, ne = () => {
+		M(!1);
+	}, re = () => {
 		let e = /* @__PURE__ */ new Date();
 		I(e), r ? (k(void 0), f?.(void 0)) : (k(e), f?.(e));
-	}, re = () => r ? O?.from : O, ie = ({ className: t, orientation: n }) => n === "left" ? /* @__PURE__ */ e.createElement(Q, {
+	}, ie = () => r ? O?.from : O, ae = ({ className: t, orientation: n }) => n === "left" ? /* @__PURE__ */ e.createElement(Q, {
 		className: t,
 		iconName: "angleLeft",
 		size: "m"
@@ -7499,7 +7507,7 @@ var sr = {
 		className: t,
 		iconName: "angleRight",
 		size: "m"
-	}), ae = (e) => Y(e, "EEEEE", { locale: s }), X = () => {
+	}), J = (e) => Y(e, "EEEEE", { locale: s }), X = () => {
 		let e = [];
 		return d && e.push({ before: d }), c && e.push({ after: c }), e.length > 0 ? e : void 0;
 	}, se = () => {
@@ -7519,7 +7527,7 @@ var sr = {
 			return e ? `${D.selectedDate}${wr(e, s)}` : D.noDateSelected || "";
 		}
 	}, ue = (e) => {
-		G.floating.current && !G.floating.current.contains(e.target) && N && !N.contains(e.target) && M(!1);
+		W.floating.current && !W.floating.current.contains(e.target) && N && !N.contains(e.target) && M(!1);
 	};
 	return l(() => {
 		k(x);
@@ -7546,7 +7554,7 @@ var sr = {
 		tooltipText: _
 	}), /* @__PURE__ */ e.createElement("div", { className: `${R}__input-wrapper` }, /* @__PURE__ */ e.createElement("button", {
 		ref: (e) => {
-			G.setReference(e), P(e);
+			W.setReference(e), P(e);
 		},
 		"aria-describedby": U ? `${i}__message` : null,
 		"aria-expanded": j,
@@ -7555,7 +7563,7 @@ var sr = {
 		className: Z([`${R}__trigger`, j ? `${R}__trigger--open` : null]),
 		disabled: n,
 		onClick: () => {
-			j || I(re() ?? /* @__PURE__ */ new Date()), M(!j);
+			j || I(ie() ?? /* @__PURE__ */ new Date()), M(!j);
 		},
 		type: "button"
 	}, /* @__PURE__ */ e.createElement(Q, {
@@ -7567,53 +7575,53 @@ var sr = {
 		message: U,
 		validationStatus: b
 	}), j && /* @__PURE__ */ e.createElement("div", {
-		ref: G.setFloating,
+		ref: W.setFloating,
 		className: `${R}__popover`,
-		style: W
+		style: ee
 	}, /* @__PURE__ */ e.createElement("div", { className: `${R}__calendar` }, r ? /* @__PURE__ */ e.createElement(oe, {
-		components: { Chevron: ie },
+		components: { Chevron: ae },
 		disabled: X(),
 		footer: /* @__PURE__ */ e.createElement("div", { className: "visually-hidden" }, le()),
-		formatters: { formatWeekdayName: ae },
+		formatters: { formatWeekdayName: J },
 		locale: s,
 		mode: "range",
 		month: F,
 		navLayout: "around",
 		numberOfMonths: 2,
 		onMonthChange: I,
-		onSelect: q,
+		onSelect: K,
 		selected: O
 	}) : /* @__PURE__ */ e.createElement(oe, {
-		components: { Chevron: ie },
+		components: { Chevron: ae },
 		disabled: X(),
 		footer: /* @__PURE__ */ e.createElement("div", { className: "visually-hidden" }, le()),
-		formatters: { formatWeekdayName: ae },
+		formatters: { formatWeekdayName: J },
 		locale: s,
 		mode: "single",
 		month: F,
 		navLayout: "around",
 		numberOfMonths: 1,
 		onMonthChange: I,
-		onSelect: J,
+		onSelect: q,
 		selected: O
 	})), /* @__PURE__ */ e.createElement("div", { className: `${R}__actions` }, /* @__PURE__ */ e.createElement(Gt, {
 		className: `${R}__action-button ${R}__action-button--today`,
 		label: D.todayButton,
-		onClick: ne,
+		onClick: re,
 		size: "s",
 		type: "button",
 		variant: "secondary"
 	}), /* @__PURE__ */ e.createElement("div", { className: `${R}__actions-group` }, /* @__PURE__ */ e.createElement(Gt, {
 		className: `${R}__action-button ${R}__action-button--clear`,
 		label: D.clearButton,
-		onClick: ee,
+		onClick: te,
 		size: "s",
 		type: "button",
 		variant: "secondary"
 	}), r && /* @__PURE__ */ e.createElement(Gt, {
 		className: `${R}__action-button ${R}__action-button--done`,
 		label: D.doneButton,
-		onClick: te,
+		onClick: ne,
 		size: "s",
 		type: "button",
 		variant: "highlight"
@@ -7637,13 +7645,13 @@ var sr = {
 		if (!e || !r) return;
 		let t = new DataTransfer();
 		t.items.add(H), e.files = t.files, E(!0);
-	}, W = (e) => {
+	}, ee = (e) => {
 		if (e.target.files.length === 0) {
 			r ? U() : E(!1);
 			return;
 		}
 		X && r && (r === e.target.value ? O(!0) : O(!1)), m && m(e.target.files), E(!0);
-	}, G = () => {
+	}, W = () => {
 		let e = document.getElementById(`${o}--input`);
 		e.value = "", X && O(!1), p && p(), E(!1), e.focus();
 	};
@@ -7687,13 +7695,13 @@ var sr = {
 		disabled: i,
 		id: `${o}--input`,
 		multiple: f,
-		onChange: W,
+		onChange: ee,
 		required: g,
 		type: "file",
 		...s
 	}), T && /* @__PURE__ */ e.createElement(At, {
 		clearLabel: u.clearButton,
-		handleClearInput: G,
+		handleClearInput: W,
 		id: o
 	})), R && /* @__PURE__ */ e.createElement(Et, {
 		hasValidationMessage: !!x,
@@ -7890,31 +7898,31 @@ var sr = {
 	tagRemove: "Remove {value}",
 	tagsListLabel: "Current tags"
 }, validationMessage: b, validationStatus: x, ...S }, C) => {
-	let w = St(o), T = "pds-tags-input", E = g === "s" ? null : `${T}--${g}`, D = r ? $.disabled : null, O = f && !r ? $.required : null, k = x === "error" ? $.error : null, A = x === "success" ? $.success : null, j = b || l, [M, N] = h(""), [P, F] = h(null), [I, L] = h(null), [R, z] = h(null), [B, V] = h(null), [H, U] = h(""), W = m(null), G = _.length > 0 ? t : d, K = (e) => {
+	let w = St(o), T = "pds-tags-input", E = g === "s" ? null : `${T}--${g}`, D = r ? $.disabled : null, O = f && !r ? $.required : null, k = x === "error" ? $.error : null, A = x === "success" ? $.success : null, j = b || l, [M, N] = h(""), [P, F] = h(null), [I, L] = h(null), [R, z] = h(null), [B, V] = h(null), [H, U] = h(""), ee = m(null), W = _.length > 0 ? t : d, G = (e) => {
 		U(e), setTimeout(() => U(""), 1e3);
-	}, q = (e) => {
+	}, K = (e) => {
 		u(e);
-	}, J = (e) => {
+	}, q = (e) => {
 		F(e);
-	}, ee = () => {
+	}, te = () => {
 		F(null), L(null), z(null);
-	}, te = (e, t) => {
+	}, ne = (e, t) => {
 		P === null || P === e || (L(e), z(t));
-	}, ne = (e) => {
+	}, re = (e) => {
 		if (e.preventDefault(), P === null || I === null || R === null) return;
 		let t = _.findIndex((e) => e.id === P), n = _.findIndex((e) => e.id === I);
 		if (t === -1 || n === -1) return;
 		let r = [..._], [i] = r.splice(t, 1), a = n;
-		a = R === "after" ? t < n ? n : n + 1 : n, r.splice(a, 0, i), q(r), K("Tag reordered"), F(null), L(null), z(null);
-	}, re = (e, t) => {
+		a = R === "after" ? t < n ? n : n + 1 : n, r.splice(a, 0, i), K(r), G("Tag reordered"), F(null), L(null), z(null);
+	}, ie = (e, t) => {
 		let n = [..._], [r] = n.splice(e, 1);
-		n.splice(t, 0, r), K(`${r.value} moved to position ${t + 1} of ${_.length}`), q(n);
-	}, ie = (e) => {
+		n.splice(t, 0, r), G(`${r.value} moved to position ${t + 1} of ${_.length}`), K(n);
+	}, ae = (e) => {
 		let t = _.find((t) => t.id === e);
-		q(_.filter((t) => t.id !== e)), t && K(`${t.value} removed`);
-	}, ae = () => {
+		K(_.filter((t) => t.id !== e)), t && G(`${t.value} removed`);
+	}, J = () => {
 		V(null), setTimeout(() => {
-			W.current?.focus();
+			ee.current?.focus();
 		}, 0);
 	}, Y = (e) => {
 		if (!r) if (e.key === "Enter" && M.trim()) {
@@ -7923,10 +7931,10 @@ var sr = {
 				id: Date.now().toString(),
 				value: M.trim()
 			};
-			q([..._, t]), K(`${M.trim()} added`), N("");
+			K([..._, t]), G(`${M.trim()} added`), N("");
 		} else if (e.key === "Backspace" && !M && _.length > 0) {
 			let e = _[_.length - 1];
-			q(_.slice(0, -1)), K(`${e.value} removed`);
+			K(_.slice(0, -1)), G(`${e.value} removed`);
 		} else e.key === "ArrowLeft" && !M && _.length > 0 && (e.preventDefault(), V(_.length - 1));
 	};
 	return /* @__PURE__ */ e.createElement("div", {
@@ -7962,7 +7970,7 @@ var sr = {
 		"aria-label": y.tagsListLabel,
 		className: `${T}__tags`,
 		onDragOver: s ? (e) => e.preventDefault() : void 0,
-		onDrop: s ? ne : void 0,
+		onDrop: s ? re : void 0,
 		role: "list"
 	}, _.map((t, n) => {
 		let i = null;
@@ -7976,12 +7984,12 @@ var sr = {
 			index: n,
 			isDragging: P === t.id,
 			isSortable: s,
-			onDragEnd: ee,
-			onDragOver: te,
-			onDragStart: J,
-			onFocusInput: ae,
-			onKeyboardMove: re,
-			onRemove: ie,
+			onDragEnd: te,
+			onDragOver: ne,
+			onDragStart: q,
+			onFocusInput: J,
+			onKeyboardMove: ie,
+			onRemove: ae,
 			setFocusedIndex: V,
 			tag: t,
 			totalTags: _.length,
@@ -7989,7 +7997,7 @@ var sr = {
 		}));
 	})), /* @__PURE__ */ e.createElement("input", {
 		ref: (e) => {
-			W.current = e, typeof C == "function" ? C(e) : C && (C.current = e);
+			ee.current = e, typeof C == "function" ? C(e) : C && (C.current = e);
 		},
 		"aria-describedby": `${i}__instructions`,
 		"aria-invalid": x === "error" ? !0 : null,
@@ -7999,7 +8007,7 @@ var sr = {
 		name: i,
 		onChange: (e) => N(e.target.value),
 		onKeyDown: Y,
-		placeholder: G,
+		placeholder: W,
 		required: f,
 		type: "text",
 		value: M
@@ -8087,8 +8095,8 @@ var sr = {
 }, type: O = "text", validationMessage: k, validationStatus: A, value: j, ...M }, N) => {
 	let P = St(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] = h(i === void 0 ? "" : i), J = j || K, ee = (e) => {
-		if (w && re && ie(!1), c && O === "url") {
+	let ee = k || p, W = j !== void 0, [G, K] = h(i === void 0 ? "" : i), q = j || G, te = (e) => {
+		if (w && ie && ae(!1), c && O === "url") {
 			let t = Ct(e.target.value), n = {
 				...e,
 				target: {
@@ -8098,7 +8106,7 @@ var sr = {
 			};
 			m && m(n);
 		} else m && m(e);
-	}, te = (e) => {
+	}, ne = (e) => {
 		if (c && O === "url") {
 			let t = Ct(e.target.value), n = {
 				...e,
@@ -8107,18 +8115,18 @@ var sr = {
 					value: t
 				}
 			};
-			G || q(t), g && g(n);
-		} else G || q(e.target.value), g && g(e);
-	}, ne = () => {
-		G || q(""), _ && _();
+			W || K(t), g && g(n);
+		} else W || K(e.target.value), g && g(e);
+	}, re = () => {
+		W || K(""), _ && _();
 		let e = document.getElementById(l);
 		e && e.focus();
-	}, [re, ie] = h(!1), ae = () => {
-		ie((e) => !e);
+	}, [ie, ae] = h(!1), J = () => {
+		ae((e) => !e);
 		let e = document.getElementById(l);
 		e && e.focus();
 	}, Y = O;
-	return w && O === "password" && (Y = re ? "text" : "password"), /* @__PURE__ */ e.createElement("div", {
+	return w && O === "password" && (Y = ie ? "text" : "password"), /* @__PURE__ */ e.createElement("div", {
 		className: Z([
 			$.base,
 			F,
@@ -8143,50 +8151,50 @@ var sr = {
 	}), 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(Ot, { variant: U }), c && O === "url" && /* @__PURE__ */ e.createElement(Fr, null), /* @__PURE__ */ e.createElement("input", {
+	}, `${D.visibilityStatus} ${ie ? "visible" : "hidden"}.`), /* @__PURE__ */ e.createElement("div", { className: `${F}__input-wrapper ${c && O === "url" ? `${F}__input-wrapper--has-prefix` : ""}` }, U && /* @__PURE__ */ e.createElement(Ot, { variant: U }), c && O === "url" && /* @__PURE__ */ e.createElement(Fr, null), /* @__PURE__ */ e.createElement("input", {
 		ref: N,
-		"aria-describedby": W ? `${l}__message` : null,
+		"aria-describedby": ee ? `${l}__message` : null,
 		"aria-invalid": A === "error" ? !0 : null,
 		autoComplete: O === "password" ? "off" : t,
 		className: `${F}__input ${c && O === "url" ? `${F}__input--has-prefix` : ""}`,
 		disabled: a,
 		id: l,
 		name: l,
-		onBlur: ee,
-		onChange: te,
+		onBlur: te,
+		onChange: ne,
 		onFocus: v,
 		placeholder: y,
 		readOnly: b,
 		required: x,
 		type: Y,
-		value: G ? j : K,
+		value: W ? j : G,
 		...u
-	}), o && J && /* @__PURE__ */ e.createElement(At, {
+	}), o && q && /* @__PURE__ */ e.createElement(At, {
 		clearLabel: D.clearButton,
-		handleClearInput: ne,
+		handleClearInput: re,
 		id: l
 	}), w && O === "password" && /* @__PURE__ */ e.createElement("button", {
 		"aria-controls": l,
 		className: `${F}__visibility-toggle`,
-		onClick: ae,
+		onClick: J,
 		onMouseDown: (e) => e.preventDefault(),
-		title: re ? D.visibilityToggleHide : D.visibilityToggleShow,
+		title: ie ? D.visibilityToggleHide : D.visibilityToggleShow,
 		type: "button"
 	}, /* @__PURE__ */ e.createElement(Q, {
-		iconName: re ? "eyeSlash" : "eye",
+		iconName: ie ? "eyeSlash" : "eye",
 		size: "m"
-	})), s && O === "search" && !J && /* @__PURE__ */ e.createElement(kt, {
+	})), s && O === "search" && !q && /* @__PURE__ */ e.createElement(kt, {
 		inputId: l,
 		shortcutLabel: D.searchShortcut
 	}), r && O !== "password" && /* @__PURE__ */ e.createElement(jt, {
-		currentLength: J.length,
+		currentLength: q.length,
 		id: l,
 		maxLength: r,
 		overLimitMessage: D.counterOverLimit
-	})), W && /* @__PURE__ */ e.createElement(Et, {
+	})), ee && /* @__PURE__ */ e.createElement(Et, {
 		hasValidationMessage: !!k,
 		id: l,
-		message: W,
+		message: ee,
 		validationMessageHasDecorators: !1,
 		validationStatus: A
 	}));
@@ -8277,7 +8285,7 @@ var sr = {
 		}
 	}
 	return null;
-}, Ur = (e) => typeof e == "string" ? e : e.props.children, Wr = (e) => typeof e.linkContent == "string" ? !1 : !!(e.isActive || e.linkContent.props.className && e.linkContent.props.className.includes("pds-isActive")), Gr = (e) => {
+}, Ur = (e) => typeof e == "string" ? e : e.props.children, Wr = (e) => e.isSeparator || e.isHeading || typeof e.linkContent == "string" ? !1 : !!(e.isActive || e.linkContent.props.className && e.linkContent.props.className.includes("pds-isActive")), Gr = (e) => {
 	if (Wr(e)) return !0;
 	if (e.links) {
 		for (let t = 0; t < e.links.length; t++) if (Gr(e.links[t])) return !0;
@@ -8748,6 +8756,17 @@ var sr = {
 			};
 		});
 	}, g = /* @__PURE__ */ e.createElement(e.Fragment, null, a.length > 0 && /* @__PURE__ */ e.createElement("ul", { className: `${c}__menu ${c}__menu--top-level` }, a.map((t, n) => {
+		if (t.isSeparator) return /* @__PURE__ */ e.createElement("li", {
+			key: n,
+			"aria-hidden": "true",
+			className: `${c}__separator`,
+			role: "separator"
+		});
+		if (t.isHeading) return /* @__PURE__ */ e.createElement("li", {
+			key: n,
+			className: `${c}__section-label`,
+			role: "presentation"
+		}, t.label);
 		let a = Gr(t);
 		return /* @__PURE__ */ e.createElement(ti, {
 			key: n,
@@ -9244,7 +9263,7 @@ var sr = {
 			E()
 		],
 		whileElementsMounted: S
-	}), R = O(j, { event: "mousedown" }), z = k(j), B = I(j, { role: "menu" }), V = m([]), { getFloatingProps: H, getItemProps: U, getReferenceProps: W } = P([
+	}), R = O(j, { event: "mousedown" }), z = k(j), B = I(j, { role: "menu" }), V = m([]), { getFloatingProps: H, getItemProps: U, getReferenceProps: ee } = P([
 		z,
 		B,
 		R,
@@ -9257,7 +9276,7 @@ var sr = {
 			focusItemOnOpen: !1,
 			focusItemOnHover: !0
 		})
-	]), { isMounted: G, styles: K } = L(j, {
+	]), { isMounted: W, styles: G } = L(j, {
 		duration: {
 			open: 300,
 			close: 150
@@ -9265,16 +9284,16 @@ var sr = {
 		initial: { opacity: 0 },
 		open: { opacity: 1 },
 		close: { opacity: 0 }
-	}), q = /* @__PURE__ */ e.createElement(Ue, {
+	}), K = /* @__PURE__ */ e.createElement(Ue, {
 		hasUserFallback: !0,
 		className: `${T}__avatar`,
 		imageSrc: l,
 		size: "s",
 		uniqueId: c
-	}), J = /* @__PURE__ */ e.createElement("li", {
+	}), q = /* @__PURE__ */ e.createElement("li", {
 		className: `${T}__user-details`,
 		role: "presentation"
-	}, /* @__PURE__ */ e.createElement("div", { className: `${T}__user-name` }, d), /* @__PURE__ */ e.createElement("div", { className: `${T}__user-email` }, c)), ee = a !== void 0 && typeof i == "function" ? /* @__PURE__ */ e.createElement("li", {
+	}, /* @__PURE__ */ e.createElement("div", { className: `${T}__user-name` }, d), /* @__PURE__ */ e.createElement("div", { className: `${T}__user-email` }, c)), te = a !== void 0 && typeof i == "function" ? /* @__PURE__ */ e.createElement("li", {
 		className: `${T}__theme-row`,
 		role: "presentation"
 	}, /* @__PURE__ */ e.createElement("span", { className: `${T}__theme-label` }, o), /* @__PURE__ */ e.createElement(ui, {
@@ -9289,14 +9308,14 @@ var sr = {
 		let n = e.id ? e.id : `${x}-item-${t}`;
 		y.current.push(n), b.current.push(e);
 	});
-	let te = (e) => {
+	let ne = (e) => {
 		let t = y.current.indexOf(e), n = b.current[t];
 		n.linkContent && !n.disabled && (V.current[t].querySelector("a").click(), v(!1)), n.callback && !n.disabled && (n.callback(), v(!1));
-	}, ne = (e) => {
-		e.preventDefault(), e.key === "Enter" && te(e.currentTarget.id);
 	}, re = (e) => {
-		te(e.currentTarget.id);
-	}, ie = r.map((t, n) => {
+		e.preventDefault(), e.key === "Enter" && ne(e.currentTarget.id);
+	}, ie = (e) => {
+		ne(e.currentTarget.id);
+	}, ae = r.map((t, n) => {
 		let r = y.current[n], i = `${T}__item`, a = t.disabled ? `${i}--disabled` : null;
 		return /* @__PURE__ */ e.createElement("li", {
 			key: r,
@@ -9305,16 +9324,16 @@ var sr = {
 			},
 			className: Z([i, a]),
 			id: r,
-			onKeyDown: ne,
+			onKeyDown: re,
 			role: "menuitem",
 			tabIndex: p === n ? 0 : -1,
-			...U({ onClick: (e) => re(e) })
+			...U({ onClick: (e) => ie(e) })
 		}, t.linkContent ? t.linkContent : t.label, t.iconName && /* @__PURE__ */ e.createElement(Q, {
 			className: `${T}__icon`,
 			iconName: t.iconName,
 			size: "m"
 		}));
-	}), ae = r.map((t, n) => {
+	}), J = r.map((t, n) => {
 		let r = y.current[n], i = `${T}__item`, a = t.disabled ? `${i}--disabled` : null;
 		return /* @__PURE__ */ e.createElement("li", {
 			key: r,
@@ -9329,20 +9348,20 @@ var sr = {
 			iconName: t.iconName,
 			size: "m"
 		}));
-	}), Y = /* @__PURE__ */ e.createElement("span", { className: `${T}__toggle-left` }, q, d ?? c);
+	}), Y = /* @__PURE__ */ e.createElement("span", { className: `${T}__toggle-left` }, K, d ?? c);
 	return /* @__PURE__ */ e.createElement("span", {
 		className: Z([T, n ?? ""]),
 		...f
 	}, /* @__PURE__ */ e.createElement(dn, { label: Y }, /* @__PURE__ */ e.createElement("ul", {
 		className: Z([D, `${D}--mobile`]),
 		role: "menu"
-	}, J, /* @__PURE__ */ e.createElement("li", { role: "separator" }), ee, ae)), /* @__PURE__ */ e.createElement("button", {
+	}, q, /* @__PURE__ */ e.createElement("li", { role: "separator" }), te, J)), /* @__PURE__ */ e.createElement("button", {
 		ref: N.setReference,
 		"aria-label": t,
 		className: `${T}__trigger`,
 		type: "button",
-		...W()
-	}, q), G && /* @__PURE__ */ e.createElement("div", {
+		...ee()
+	}, K), W && /* @__PURE__ */ e.createElement("div", {
 		ref: N.setFloating,
 		className: `${T}__dropdown`,
 		style: {
@@ -9350,10 +9369,10 @@ var sr = {
 			zIndex: "var(--pds-z-index-dropdown)"
 		},
 		...H()
-	}, /* @__PURE__ */ e.createElement("div", { style: { ...K } }, /* @__PURE__ */ e.createElement("ul", {
+	}, /* @__PURE__ */ e.createElement("div", { style: { ...G } }, /* @__PURE__ */ e.createElement("ul", {
 		className: D,
 		role: "menu"
-	}, J, /* @__PURE__ */ e.createElement("li", { role: "separator" }), ee, ie))));
+	}, q, /* @__PURE__ */ e.createElement("li", { role: "separator" }), te, ae))));
 }, fi = ({ ariaLabel: t = "Workspace selector menu", className: n, createWorkspaceLink: r, filterLabel: i = "Filter workspaces", filterPlaceholder: a = "Find workspace...", menuHeading: o = "Workspaces", minFilterItems: s = 8, noResultsText: c = "No results found", workspaceList: l = [], ...u }) => {
 	let [d, f] = h(""), [g, _] = h(""), v = m(null), y = l.length >= s, b = "pds-workspace-selector", x = `${b}__menu`, S = y ? `${x}--scroll` : null, { activeIndex: C, floatingStyles: w, getFloatingProps: T, getItemProps: E, getReferenceProps: D, isMounted: O, listRef: k, refs: A, setIsOpen: j, transitionStyles: M } = Qt({
 		enableTypeahead: !y,
@@ -9613,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",
@@ -10389,7 +10412,7 @@ var sr = {
 	}, [d]), l(() => {
 		f(j);
 	}, [j]);
-	let N = typeof a, F = "pds-popover", R = Z([`${F}__trigger-custom`, N === "string" ? `${F}__trigger-text` : ""]), z = a ? s : 0, B = m(null), { context: V, floatingStyles: H, middlewareData: U, refs: W } = A({
+	let N = typeof a, F = "pds-popover", R = Z([`${F}__trigger-custom`, N === "string" ? `${F}__trigger-text` : ""]), z = a ? s : 0, B = m(null), { context: V, floatingStyles: H, middlewareData: U, refs: ee } = A({
 		placement: u,
 		open: j,
 		onOpenChange(e) {
@@ -10402,44 +10425,44 @@ var sr = {
 			x({ element: B })
 		],
 		whileElementsMounted: S
-	}), G = () => {
+	}), W = () => {
 		M(!1), c && c();
-	}, { getFloatingProps: K, getReferenceProps: q } = P([
+	}, { getFloatingProps: G, getReferenceProps: K } = P([
 		O(V),
 		k(V),
 		I(V)
-	]), J = U.arrow?.x ?? 0, ee = U.arrow?.y ?? 0, te = J + Yi / 2, ne = ee + Ji, { isMounted: re } = L(V, {
+	]), q = U.arrow?.x ?? 0, te = U.arrow?.y ?? 0, ne = q + Yi / 2, re = te + Ji, { isMounted: ie } = L(V, {
 		initial: { transform: "scale(0)" },
 		common: ({ side: e }) => ({ transformOrigin: {
-			top: `${te}px calc(100% + ${Ji}px)`,
-			bottom: `${te}px -8px`,
-			left: `calc(100% + ${Ji}px) ${ne}px`,
-			right: `-8px ${ne}px`
+			top: `${ne}px calc(100% + ${Ji}px)`,
+			bottom: `${ne}px -8px`,
+			left: `calc(100% + ${Ji}px) ${re}px`,
+			right: `-8px ${re}px`
 		}[e] })
 	});
 	return /* @__PURE__ */ e.createElement("div", {
 		className: Z([F, t]),
 		...D
 	}, /* @__PURE__ */ e.createElement("span", {
-		ref: W.setReference,
+		ref: ee.setReference,
 		className: `${F}__trigger`,
 		role: "button",
 		tabIndex: 0,
-		...q(),
+		...K(),
 		...D
 	}, a ? /* @__PURE__ */ e.createElement("span", { className: R }, a) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, g), /* @__PURE__ */ e.createElement(Q, {
 		className: `${F}__icon`,
 		iconName: y,
 		size: T
-	}))), re && /* @__PURE__ */ e.createElement(b, null, /* @__PURE__ */ e.createElement(v, {
+	}))), ie && /* @__PURE__ */ e.createElement(b, null, /* @__PURE__ */ e.createElement(v, {
 		context: V,
 		initialFocus: -1,
 		modal: o
 	}, /* @__PURE__ */ e.createElement("div", {
-		ref: W.setFloating,
+		ref: ee.setFloating,
 		className: Z([`${F}__container`, n]),
 		style: H,
-		...K()
+		...G()
 	}, /* @__PURE__ */ e.createElement(_, {
 		ref: B,
 		className: `${F}__arrow`,
@@ -10452,7 +10475,7 @@ var sr = {
 		width: Yi
 	}), /* @__PURE__ */ e.createElement("div", { className: `${F}__container-inner` }, p && /* @__PURE__ */ e.createElement("div", { className: `${F}__title` }, p), i && /* @__PURE__ */ e.createElement("div", { className: `${F}__content` }, i), o && /* @__PURE__ */ e.createElement("div", { className: `${F}__close-wrapper` }, /* @__PURE__ */ e.createElement(Xt, {
 		ariaLabel: r,
-		onClick: G,
+		onClick: W,
 		size: "s"
 	})))))));
 }, Zi = {
@@ -10763,7 +10786,7 @@ function fa(e) {
 //#endregion
 //#region src/components/SortableList/SortableList.tsx
 var pa = 24, ma = { droppable: { strategy: _e.Always } }, ha = a(function({ children: n, className: r, columns: i, defaultItems: a, getItemLabel: c = (e) => String(e.id), isDragEnabled: l, isItemLocked: u = () => !1, isNestingLocked: f = () => !1, items: g, maxDepth: _ = 0, onReorder: v, renderRow: y, reorderMode: b = "always", screenReaderInstructions: x, ...S }, C) {
-	let w = "pds-sortable-list", [T, E] = h(null), D = m(null), [O, k] = h(!1), A = m(!1), [j, M] = h(null), N = m(0), P = m(0), F = m("pointer"), I = m(0), L = m(null), [R, z] = h(0), B = m(0), [V, H] = h(0), U = m(0), W = s((e, t) => {
+	let w = "pds-sortable-list", [T, E] = h(null), D = m(null), [O, k] = h(!1), A = m(!1), [j, M] = h(null), N = m(0), P = m(0), F = m("pointer"), I = m(0), L = m(null), [R, z] = h(0), B = m(0), [V, H] = h(0), U = m(0), ee = s((e, t) => {
 		if (_ > 0 && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
 			e.preventDefault();
 			let n = e.key === "ArrowRight" ? 1 : -1, r = B.current, i = Math.max(-_, Math.min(_, r + n)), a = i - r;
@@ -10773,66 +10796,66 @@ var pa = 24, ma = { droppable: { strategy: _e.Always } }, ha = a(function({ chil
 			};
 		}
 		return Ce(e, t);
-	}, [_]), G = b === "always" || b === "toggle" && (l ?? !1), { currentItems: K, expandItem: q, flatNodes: J, handleReorder: ee, resetToSnapshot: te, sortableIds: ne, toggleExpand: re } = ua({
+	}, [_]), W = b === "always" || b === "toggle" && (l ?? !1), { currentItems: G, expandItem: K, flatNodes: q, handleReorder: te, resetToSnapshot: ne, sortableIds: re, toggleExpand: ie } = ua({
 		defaultItems: a,
-		isDragEnabled: G,
+		isDragEnabled: W,
 		items: g,
 		onReorder: v
 	});
-	d(C, () => ({ resetToSnapshot: te }), [te]);
-	let ie = xe(be(ve, { activationConstraint: { distance: 5 } }), be(ge, { coordinateGetter: W })), ae = G ? `${w}--reorder-active` : null, Y = p(() => new Set(J.filter((e) => u(e.data)).map((e) => e.id)), [J, u]), oe = p(() => new Set(J.filter((e) => f(e.data)).map((e) => e.id)), [J, f]), X = s((e) => {
+	d(C, () => ({ resetToSnapshot: ne }), [ne]);
+	let ae = xe(be(ve, { activationConstraint: { distance: 5 } }), be(ge, { coordinateGetter: ee })), J = W ? `${w}--reorder-active` : null, Y = p(() => new Set(q.filter((e) => u(e.data)).map((e) => e.id)), [q, u]), oe = p(() => new Set(q.filter((e) => f(e.data)).map((e) => e.id)), [q, f]), X = s((e) => {
 		if (_ === 0 || oe.has(String(e))) return !1;
-		let t = J.find((t) => t.id === e);
+		let t = q.find((t) => t.id === e);
 		return !t || t.depth >= _ ? !1 : t.hasChildren ? !t.isExpanded : !0;
 	}, [
-		J,
+		q,
 		_,
 		oe
 	]), se = s((e) => j && X(j) ? null : Te(e), [X, j]), ce = p(() => {
 		if (!T || !j || Y.size === 0 || T === j || X(j)) return /* @__PURE__ */ new Set();
-		let e = J.findIndex((e) => e.id === T), t = J.findIndex((e) => e.id === j);
+		let e = q.findIndex((e) => e.id === T), t = q.findIndex((e) => e.id === j);
 		if (e === -1 || t === -1) return /* @__PURE__ */ new Set();
 		let [n, r] = e < t ? [e + 1, t - 1] : [t + 1, e - 1];
-		return new Set(J.slice(n, r + 1).filter((e) => Y.has(e.id)).map((e) => e.id));
+		return new Set(q.slice(n, r + 1).filter((e) => Y.has(e.id)).map((e) => e.id));
 	}, [
 		T,
-		J,
+		q,
 		X,
 		Y,
 		j
-	]).size > 0, le = p(() => T ? J.find((e) => e.id === T) ?? null : null, [T, J]), ue = p(() => T ? sa(K, String(T)) ?? null : null, [T, K]), de = p(() => {
+	]).size > 0, le = p(() => T ? q.find((e) => e.id === T) ?? null : null, [T, q]), ue = p(() => T ? sa(G, String(T)) ?? null : null, [T, G]), de = p(() => {
 		let e = le?.depth ?? 0;
-		return !T || !j || O || _ === 0 ? e : ca(J, String(T), String(j), V * pa, pa, _);
+		return !T || !j || O || _ === 0 ? e : ca(q, String(T), String(j), V * pa, pa, _);
 	}, [
 		T,
 		le,
 		V,
-		J,
+		q,
 		O,
 		_,
 		j
 	]), fe = p(() => {
 		if (!T || O || de === 0 || j && X(j)) return null;
-		let e = J.findIndex((e) => e.id === T);
-		return e === -1 ? null : ga(J, e, de);
+		let e = q.findIndex((e) => e.id === T);
+		return e === -1 ? null : ga(q, e, de);
 	}, [
 		T,
-		J,
+		q,
 		X,
 		O,
 		j,
 		de
 	]), pe = s((e) => {
-		let { active: t } = e, n = F.current === "keyboard", r = J.find((e) => e.id === t.id);
-		E(t.id), D.current = t.id, k(n), A.current = n, I.current = r?.depth ?? 0, M(null), N.current = 0, P.current = 0, U.current = 0, H(0), B.current = 0, z(0), r?.hasChildren && r?.isExpanded && (re(String(t.id)), L.current = String(t.id));
-	}, [J, re]), _e = s((e) => {
+		let { active: t } = e, n = F.current === "keyboard", r = q.find((e) => e.id === t.id);
+		E(t.id), D.current = t.id, k(n), A.current = n, I.current = r?.depth ?? 0, M(null), N.current = 0, P.current = 0, U.current = 0, H(0), B.current = 0, z(0), r?.hasChildren && r?.isExpanded && (ie(String(t.id)), L.current = String(t.id));
+	}, [q, ie]), _e = s((e) => {
 		let t = ye(e);
 		if (!t.length || !D.current || Y.size === 0) return t;
-		let n = J.findIndex((e) => e.id === D.current);
+		let n = q.findIndex((e) => e.id === D.current);
 		for (let e of t) {
 			let t = e.id;
 			if (t === D.current) return [e];
-			let r = J.findIndex((e) => e.id === t);
+			let r = q.findIndex((e) => e.id === t);
 			if (n === -1 || r === -1) return [e];
 			if (Y.has(String(t))) {
 				if (n > r) continue;
@@ -10840,39 +10863,39 @@ var pa = 24, ma = { droppable: { strategy: _e.Always } }, ha = a(function({ chil
 				if (!X(t) && (!e || !i)) continue;
 			}
 			let [i, a] = n < r ? [n + 1, r - 1] : [r + 1, n - 1];
-			if (!J.slice(i, a + 1).some((e) => Y.has(e.id))) return [e];
+			if (!q.slice(i, a + 1).some((e) => Y.has(e.id))) return [e];
 		}
 		return [];
 	}, [
-		J,
+		q,
 		Y,
 		oe
 	]), we = s((e) => {
 		let t = e.over?.id ?? null, n = D.current;
 		if (t && n && t !== n && Y.size > 0) {
-			let e = J.findIndex((e) => e.id === n), r = J.findIndex((e) => e.id === t);
+			let e = q.findIndex((e) => e.id === n), r = q.findIndex((e) => e.id === t);
 			if (e !== -1 && r !== -1) {
 				let [t, n] = e < r ? [e + 1, r] : [r, e - 1];
-				if (J.slice(t, n + 1).some((e) => Y.has(e.id))) return;
+				if (q.slice(t, n + 1).some((e) => Y.has(e.id))) return;
 			}
 		}
 		M(t);
-	}, [J, Y]), Ee = s((e) => {
+	}, [q, Y]), Ee = s((e) => {
 		let t = e.delta.x;
 		if (P.current = t, A.current || _ === 0) return;
 		let n = Math.floor(t / pa), r = U.current;
 		(n > r || n < r && t < r * pa - pa * .4) && (U.current = n, H(n));
 	}, [_]), De = s((e) => {
 		let { active: t, over: n } = e, r = A.current, i = B.current, a = U.current;
-		E(null), D.current = null, k(!1), A.current = !1, M(null), U.current = 0, H(0), L.current && (q(L.current), L.current = null);
-		let o = J.findIndex((e) => e.id === t.id), s = r ? i * pa : a * pa, c = !n || t.id === n.id, l = n?.id ?? null;
-		if (r && i > 0 && c && o > 0 && (l = J[o - 1].id), !l || t.id === l) {
+		E(null), D.current = null, k(!1), A.current = !1, M(null), U.current = 0, H(0), L.current && (K(L.current), L.current = null);
+		let o = q.findIndex((e) => e.id === t.id), s = r ? i * pa : a * pa, c = !n || t.id === n.id, l = n?.id ?? null;
+		if (r && i > 0 && c && o > 0 && (l = q[o - 1].id), !l || t.id === l) {
 			if (o === -1) return;
-			let e = J[o];
+			let e = q[o];
 			if (!e) return;
-			let n = ca(J, String(t.id), String(t.id), s, pa, _);
+			let n = ca(q, String(t.id), String(t.id), s, pa, _);
 			if (n === e.depth) return;
-			let r = [...J], [i] = r.splice(o, 1), a = ga(r, o, n);
+			let r = [...q], [i] = r.splice(o, 1), a = ga(r, o, n);
 			if (a && oe.has(a)) return;
 			let c = {
 				...i,
@@ -10880,18 +10903,18 @@ var pa = 24, ma = { droppable: { strategy: _e.Always } }, ha = a(function({ chil
 				parentId: a
 			};
 			r.splice(o, 0, c);
-			let l = J.filter((e) => e.id !== t.id).map((e) => e.id), u = r.filter((e) => e.id !== t.id).map((e) => e.id);
+			let l = q.filter((e) => e.id !== t.id).map((e) => e.id), u = r.filter((e) => e.id !== t.id).map((e) => e.id);
 			if (l.some((e, t) => Y.has(e) ? u.indexOf(e) !== t : !1)) return;
-			ee(r), n > 0 && a && q(a);
+			te(r), n > 0 && a && K(a);
 			return;
 		}
-		let u = J.findIndex((e) => e.id === l);
+		let u = q.findIndex((e) => e.id === l);
 		if (o === -1 || u === -1) return;
-		let d = [...J], f = d[o].depth, [p] = d.splice(o, 1), m = [];
+		let d = [...q], f = d[o].depth, [p] = d.splice(o, 1), m = [];
 		for (; d.length > o && d[o].depth > f;) m.push(d.splice(o, 1)[0]);
 		let h = d.findIndex((e) => e.id === l), g, v;
 		if (X(l)) {
-			let e = J[u];
+			let e = q[u];
 			g = Math.min(e.depth + 1, _), v = String(l);
 		} else {
 			g = ca(d, String(t.id), String(l), s, pa, _, p.depth);
@@ -10906,42 +10929,42 @@ var pa = 24, ma = { droppable: { strategy: _e.Always } }, ha = a(function({ chil
 		}, b = d[h], x = b && b.depth === g - 1 && v === String(l) || o < u ? h + 1 : h;
 		d.splice(x, 0, y, ...m);
 		let S = new Set([String(t.id), ...m.map((e) => e.id)]);
-		J.some((e, t) => !Y.has(e.id) || S.has(e.id) || e.id === v ? !1 : d.findIndex((t) => t.id === e.id) !== t) || (ee(d), g > 0 && v !== null && q(v));
+		q.some((e, t) => !Y.has(e.id) || S.has(e.id) || e.id === v ? !1 : d.findIndex((t) => t.id === e.id) !== t) || (te(d), g > 0 && v !== null && K(v));
 	}, [
+		K,
 		q,
-		J,
-		ee,
+		te,
 		X,
 		Y,
 		_,
 		oe
 	]), Oe = s(() => {
-		E(null), D.current = null, k(!1), A.current = !1, M(null), P.current = 0, U.current = 0, H(0), B.current = 0, z(0), L.current && (q(L.current), L.current = null);
-	}, [q]), ke = p(() => ({
+		E(null), D.current = null, k(!1), A.current = !1, M(null), P.current = 0, U.current = 0, H(0), B.current = 0, z(0), L.current && (K(L.current), L.current = null);
+	}, [K]), ke = p(() => ({
 		onDragStart({ active: e }) {
-			let t = J.find((t) => t.id === e.id), n = sa(K, String(e.id));
-			return `Picked up ${n ? c(n) : String(e.id)}. Current position: ${t ? J.indexOf(t) + 1 : "?"} of ${J.length} at depth ${t?.depth ?? 0}.`;
+			let t = q.find((t) => t.id === e.id), n = sa(G, String(e.id));
+			return `Picked up ${n ? c(n) : String(e.id)}. Current position: ${t ? q.indexOf(t) + 1 : "?"} of ${q.length} at depth ${t?.depth ?? 0}.`;
 		},
 		onDragOver({ active: e, over: t }) {
 			if (!t) return;
-			let n = J.findIndex((e) => e.id === t.id);
+			let n = q.findIndex((e) => e.id === t.id);
 			if (n === -1) return;
-			let r = sa(K, String(e.id)), i = r ? c(r) : String(e.id), a = ca(J, String(e.id), String(t.id), P.current, pa, _);
-			return `Moving ${i}. Target position: ${n + 1} of ${J.length} at depth ${a}.`;
+			let r = sa(G, String(e.id)), i = r ? c(r) : String(e.id), a = ca(q, String(e.id), String(t.id), P.current, pa, _);
+			return `Moving ${i}. Target position: ${n + 1} of ${q.length} at depth ${a}.`;
 		},
 		onDragEnd({ active: e, over: t }) {
-			let n = sa(K, String(e.id)), r = n ? c(n) : String(e.id);
+			let n = sa(G, String(e.id)), r = n ? c(n) : String(e.id);
 			if (!t || e.id === t.id) return `${r} dropped. No change in position.`;
-			let i = J.findIndex((e) => e.id === t.id), a = ca(J, String(e.id), String(t.id), P.current, pa, _);
-			return `${r} dropped at position ${i + 1} of ${J.length} at depth ${a}.`;
+			let i = q.findIndex((e) => e.id === t.id), a = ca(q, String(e.id), String(t.id), P.current, pa, _);
+			return `${r} dropped at position ${i + 1} of ${q.length} at depth ${a}.`;
 		},
 		onDragCancel({ active: e }) {
-			let t = J.find((t) => t.id === e.id), n = sa(K, String(e.id));
-			return `Sorting cancelled. ${n ? c(n) : String(e.id)} returned to position ${t ? J.indexOf(t) + 1 : "?"} of ${J.length}.`;
+			let t = q.find((t) => t.id === e.id), n = sa(G, String(e.id));
+			return `Sorting cancelled. ${n ? c(n) : String(e.id)} returned to position ${t ? q.indexOf(t) + 1 : "?"} of ${q.length}.`;
 		}
 	}), [
-		K,
-		J,
+		G,
+		q,
 		c,
 		_
 	]), Ae = { columns: i }, je = t.map(n, (t) => o(t) && t.type === la ? e.cloneElement(t, Ae) : t);
@@ -10957,14 +10980,14 @@ var pa = 24, ma = { droppable: { strategy: _e.Always } }, ha = a(function({ chil
 		onDragMove: Ee,
 		onDragOver: we,
 		onDragStart: pe,
-		sensors: ie
+		sensors: ae
 	}, /* @__PURE__ */ e.createElement(Se, {
-		items: ne,
+		items: re,
 		strategy: se
 	}, /* @__PURE__ */ e.createElement("div", {
 		className: Z([
 			w,
-			ae,
+			J,
 			r ?? ""
 		]),
 		onKeyDownCapture: () => {
@@ -10975,7 +10998,7 @@ var pa = 24, ma = { droppable: { strategy: _e.Always } }, ha = a(function({ chil
 		},
 		role: "list",
 		...S
-	}, je, J.map((t) => {
+	}, je, q.map((t) => {
 		let n = {
 			depth: t.depth,
 			hasChildren: t.hasChildren,
@@ -10983,18 +11006,18 @@ var pa = 24, ma = { droppable: { strategy: _e.Always } }, ha = a(function({ chil
 			isDragging: t.id === T,
 			isExpanded: t.isExpanded,
 			isLocked: Y.has(t.id),
-			toggleExpand: () => re(t.id)
+			toggleExpand: () => ie(t.id)
 		}, r = y(t.data, n), a = t.id === T, s = {
 			columns: i,
 			depth: t.depth,
 			hasChildren: t.hasChildren,
-			isDragActive: G,
+			isDragActive: W,
 			isDragging: a,
 			isDropTarget: t.id === j && X(t.id),
 			isProjectedParent: t.id === fe && !oe.has(t.id),
 			isExpanded: t.isExpanded,
 			...Y.has(t.id) ? { isLocked: !0 } : {},
-			onToggleExpand: () => re(t.id),
+			onToggleExpand: () => ie(t.id),
 			...a && !O && _ > 0 ? { projectedDepthDelta: de - t.depth } : {}
 		};
 		return o(r) ? e.cloneElement(r, {
@@ -11313,16 +11336,16 @@ var _a = ({ 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));
-}, wa = ({ className: t, closeDetailPanelLabel: n = "Close detail panel", columns: r, currentPage: i, defaultSortKey: a, defaultSortOrder: o = "asc", detailPanelNav: s = !0, detailPanelTitle: c, detailPanelWidth: d, emptyState: f, emptyStateHeading: m = "No results found.", emptyStateMessage: g, footer: _, getPageSizeLabel: v = (e) => `Show ${e} rows per page`, getRowClassName: y, getRowId: b, getSelectRowLabel: x = (e, t) => `Select row ${t}`, getSortLabel: S = (e) => `Sort by ${e}`, inspectedRowId: C, isLoading: w = !1, itemsPerPage: T, loadingRowCount: E = 5, nextDetailPanelRowLabel: D = "Next row", onDetailPanelNext: O, onDetailPanelPrev: k, onPageChange: A, onPageSizeChange: j, onRowInspect: M, onRowSelectionChange: N, onSort: P, pageSizeOptions: F, panel: I, prevDetailPanelRowLabel: L = "Previous row", renderDetailPanel: R, renderDetailPanelFooter: z, rowData: B, selectAllLabel: V = "Select all rows", selectedRows: H, sortKey: U, sortOrder: W, totalItemCount: G, ...K }) => {
-	let q = "pds-table", J = u(), ee = u(), te = P !== void 0, ne = A !== void 0, re = j !== void 0, ie = ne || T !== void 0 || F !== void 0, [ae, Y] = h({
+}, wa = ({ className: t, closeDetailPanelLabel: n = "Close detail panel", columns: r, currentPage: i, defaultSortKey: a, defaultSortOrder: o = "asc", detailPanelNav: s = !0, detailPanelTitle: c, detailPanelWidth: d, emptyState: f, emptyStateHeading: m = "No results found.", emptyStateMessage: g, footer: _, getPageSizeLabel: v = (e) => `Show ${e} rows per page`, getRowClassName: y, getRowId: b, getSelectRowLabel: x = (e, t) => `Select row ${t}`, getSortLabel: S = (e) => `Sort by ${e}`, inspectedRowId: C, isLoading: w = !1, itemsPerPage: T, loadingRowCount: E = 5, nextDetailPanelRowLabel: D = "Next row", onDetailPanelNext: O, onDetailPanelPrev: k, onPageChange: A, onPageSizeChange: j, onRowInspect: M, onRowSelectionChange: N, onSort: P, pageSizeOptions: F, panel: I, prevDetailPanelRowLabel: L = "Previous row", renderDetailPanel: R, renderDetailPanelFooter: z, rowData: B, selectAllLabel: V = "Select all rows", selectedRows: H, sortKey: U, sortOrder: ee, totalItemCount: W, ...G }) => {
+	let K = "pds-table", q = u(), te = u(), ne = P !== void 0, re = A !== void 0, ie = j !== void 0, ae = re || T !== void 0 || F !== void 0, [J, Y] = h({
 		key: a ?? "",
 		order: a === void 0 ? "asc" : o
-	}), [oe, X] = h(1), [se, ce] = h(T ?? F?.[0] ?? 10), [le, ue] = h(null), de = C ?? le, fe = !!de && !!R, pe = ne ? T ?? 10 : se, me = (e) => {
-		re ? j(e) : ce(e), ne || X(1);
+	}), [oe, X] = h(1), [se, ce] = h(T ?? F?.[0] ?? 10), [le, ue] = h(null), de = C ?? le, fe = !!de && !!R, pe = re ? T ?? 10 : se, me = (e) => {
+		ie ? j(e) : ce(e), re || X(1);
 	};
 	l(() => {
-		ne || X(1);
-	}, [B.length, ne]), l(() => {
+		re || X(1);
+	}, [B.length, re]), l(() => {
 		process.env.NODE_ENV !== "production" && i !== void 0 && !A && console.warn("[Table] `currentPage` was provided without `onPageChange`. Controlled pagination requires both props. The table is running in uncontrolled mode.");
 	}, []);
 	let he = N !== void 0, ge = H !== void 0, [_e, ve] = h(/* @__PURE__ */ new Set()), ye = ge ? new Set(H) : _e, be = p(() => new Map(B.map((e, t) => [e, t])), [B]), xe = (e, t) => b ? b(e) : String(be.get(e) ?? t), Se = p(() => B.findIndex((e, t) => (b ? b(e) : String(be.get(e) ?? t)) === de), [
@@ -11342,37 +11365,37 @@ var _a = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		if (Se >= B.length - 1) return;
 		let e = B[Se + 1], t = xe(e, Se + 1);
 		C === void 0 && ue(t), M?.(e, t), O?.(e, t);
-	}, Oe = te ? U ?? "" : ae.key, ke = te ? W ?? "asc" : ae.order, Ae = p(() => {
+	}, Oe = ne ? U ?? "" : J.key, ke = ne ? ee ?? "asc" : J.order, Ae = p(() => {
 		if (w) return [];
 		let e = B;
-		if (!te && ae.key !== "") {
-			let t = r.find((e) => e.id === ae.key)?.sortKey ?? ae.key;
+		if (!ne && J.key !== "") {
+			let t = r.find((e) => e.id === J.key)?.sortKey ?? J.key;
 			e = [...e].sort((e, n) => {
 				let r = String(e[t]).localeCompare(String(n[t]));
-				return ae.order === "asc" ? r : -r;
+				return J.order === "asc" ? r : -r;
 			});
 		}
-		if (!ne && ie && pe) {
+		if (!re && ae && pe) {
 			let t = (oe - 1) * pe;
 			e = e.slice(t, t + pe);
 		}
 		return e;
 	}, [
 		B,
-		ae,
-		te,
+		J,
 		ne,
-		ie,
+		re,
+		ae,
 		oe,
 		pe,
 		w
 	]), je = (e) => {
-		te ? P(e, U === e && W === "asc" ? "desc" : "asc") : Y((t) => ({
+		ne ? P(e, U === e && ee === "asc" ? "desc" : "asc") : Y((t) => ({
 			key: e,
 			order: t.key === e && t.order === "asc" ? "desc" : "asc"
 		}));
 	}, Me = (e) => Oe === e ? ke === "asc" ? "ascending" : "descending" : "none", Ne = (e, t) => {
-		let n = `${q}__sort-button-${t}`, r = !w && Ae.length === 0;
+		let n = `${K}__sort-button-${t}`, r = !w && Ae.length === 0;
 		if (w || r || Oe === "") return t === "top" ? `${n}--inactive` : "";
 		let i = Oe === e;
 		return t === "top" ? i && ke === "asc" ? "" : `${n}--inactive` : i && ke === "desc" ? `${n}--desc` : "";
@@ -11404,8 +11427,8 @@ var _a = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 			key: `row-${i}`,
 			"aria-selected": a ? o : void 0,
 			className: Z([
-				a ? `${q}__row--inspectable` : null,
-				o ? `${q}__row--inspected` : null,
+				a ? `${K}__row--inspectable` : null,
+				o ? `${K}__row--inspected` : null,
 				y?.(t, i) ?? null
 			]),
 			onClick: a ? () => we(t, i) : void 0,
@@ -11415,7 +11438,7 @@ var _a = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 			tabIndex: a ? 0 : void 0
 		}, he && /* @__PURE__ */ e.createElement("td", { className: "pds-table__checkbox-cell" }, /* @__PURE__ */ e.createElement(vr, {
 			checked: ye.has(i),
-			id: `${ee}-row-${i}`,
+			id: `${te}-row-${i}`,
 			label: x(t, n + 1),
 			onChange: () => Le(i),
 			showLabel: !1
@@ -11425,11 +11448,11 @@ var _a = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		style: He
 	}, /* @__PURE__ */ e.createElement("div", { className: "pds-table-wrapper__table-column" }, /* @__PURE__ */ e.createElement("div", { className: "pds-table-wrapper__table-area" }, /* @__PURE__ */ e.createElement("table", {
 		"aria-busy": w,
-		className: Z([q, t]),
-		...K
+		className: Z([K, t]),
+		...G
 	}, /* @__PURE__ */ e.createElement("thead", null, /* @__PURE__ */ e.createElement("tr", null, he && /* @__PURE__ */ e.createElement("th", { className: "pds-table__checkbox-cell" }, /* @__PURE__ */ e.createElement(vr, {
 		checked: Fe,
-		id: ee,
+		id: te,
 		indeterminate: Ie,
 		label: V,
 		onChange: Re,
@@ -11439,21 +11462,21 @@ var _a = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		"aria-sort": t.sortable ? Me(t.id) : void 0
 	}, t.sortable ? /* @__PURE__ */ e.createElement("button", {
 		"aria-label": S(Wt(t.header)),
-		className: `${q}__sort-button`,
+		className: `${K}__sort-button`,
 		onClick: () => je(t.id),
 		type: "button"
 	}, t.header, /* @__PURE__ */ e.createElement("span", {
 		"aria-hidden": "true",
-		className: `${q}__sort-icons`
-	}, /* @__PURE__ */ e.createElement("span", { className: Z([`${q}__sort-button-top`, Ne(t.id, "top")]) }, /* @__PURE__ */ e.createElement(Q, {
+		className: `${K}__sort-icons`
+	}, /* @__PURE__ */ e.createElement("span", { className: Z([`${K}__sort-button-top`, Ne(t.id, "top")]) }, /* @__PURE__ */ e.createElement(Q, {
 		iconName: "caretUp",
 		size: "m"
-	})), /* @__PURE__ */ e.createElement("span", { className: Z([`${q}__sort-button-bottom`, Ne(t.id, "bottom")]) }, /* @__PURE__ */ e.createElement(Q, {
+	})), /* @__PURE__ */ e.createElement("span", { className: Z([`${K}__sort-button-bottom`, Ne(t.id, "bottom")]) }, /* @__PURE__ */ e.createElement(Q, {
 		iconName: "caretDown",
 		size: "m"
-	})))) : /* @__PURE__ */ e.createElement("span", null, t.header))))), /* @__PURE__ */ e.createElement("tbody", null, w ? Array.from({ length: E }, (e, t) => ze(t)) : Ae.length === 0 ? Be() : Ae.map((e, t) => Ve(e, t))))), ie && !w && (ne || B.length > 0) && /* @__PURE__ */ e.createElement("div", { className: "pds-table-wrapper__pagination" }, F && F.length > 0 && /* @__PURE__ */ e.createElement(Fn, {
+	})))) : /* @__PURE__ */ e.createElement("span", null, t.header))))), /* @__PURE__ */ e.createElement("tbody", null, w ? Array.from({ length: E }, (e, t) => ze(t)) : Ae.length === 0 ? Be() : Ae.map((e, t) => Ve(e, t))))), ae && !w && (re || B.length > 0) && /* @__PURE__ */ e.createElement("div", { className: "pds-table-wrapper__pagination" }, F && F.length > 0 && /* @__PURE__ */ e.createElement(Fn, {
 		autoWidth: !0,
-		id: J,
+		id: q,
 		label: "Rows per page",
 		onOptionSelect: (e) => me(Number(e.value)),
 		options: F.map((e) => ({
@@ -11464,10 +11487,10 @@ var _a = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		size: "s",
 		value: String(pe)
 	}), /* @__PURE__ */ e.createElement("div", { className: "pds-table-wrapper__pagination-controls" }, /* @__PURE__ */ e.createElement(Li, {
-		currentPage: ne ? i ?? 1 : oe,
+		currentPage: re ? i ?? 1 : oe,
 		itemsPerPage: pe,
-		onPageChange: ne ? A : X,
-		totalItemCount: ne ? G ?? 0 : B.length
+		onPageChange: re ? A : X,
+		totalItemCount: re ? W ?? 0 : B.length
 	}))), _ && /* @__PURE__ */ e.createElement("div", { className: "pds-table-wrapper__footer" }, _)), R && /* @__PURE__ */ e.createElement("div", { className: Z(["pds-table-wrapper__detail-panel", fe ? "pds-table-wrapper__detail-panel--open" : null]) }, /* @__PURE__ */ e.createElement("div", { className: "pds-table-wrapper__detail-panel-upper" }, /* @__PURE__ */ e.createElement("div", { className: "pds-table-wrapper__detail-panel-header" }, c && /* @__PURE__ */ e.createElement("div", { className: "pds-table-wrapper__detail-panel-title" }, c), /* @__PURE__ */ e.createElement(Xt, {
 		ariaLabel: n,
 		onClick: Te,
@@ -11816,31 +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 = {
-	collapseSidebar: "Press [ to collapse sidebar",
-	drawerToggle: "Open account menu",
-	expandSidebar: "Press ] to expand sidebar"
-}, 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 }) => {
+}, 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);
 	l(() => {
 		M(d || !1);
 	}, [d]);
-	let N = "pds-app-layout", P = C ? `${N}--scrollable` : null, F = y == null ? void 0 : typeof y == "number" ? `${y}px` : y, I = j ? `${T}rem` : `${E}`, L = {
+	let N = "pds-app-layout", P = C ? `${N}--scrollable` : null, F = {
+		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 = {
 		backgroundColor: w || void 0,
 		maxWidth: j ? void 0 : `${D}rem`,
 		minWidth: j ? `${T}rem` : `${O}rem`,
-		width: I
-	}, R = m(!1), z = () => {
-		if (R.current = !1, S) {
+		width: R
+	}, B = m(!1), V = () => {
+		if (B.current = !1, S) {
 			S();
 			return;
 		}
 		M(!j);
-	}, B = za();
+	}, H = za();
 	l(() => {
-		B === "sm" && !j ? (R.current = !0, S ? S() : M(!0)) : B !== "sm" && R.current && (R.current = !1, S ? S() : M(!1));
-	}, [B]);
-	let V = s(() => {
+		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(() => {
 		let e = document.activeElement;
 		if (!e) return !1;
 		let t = e.tagName.toLowerCase();
@@ -11857,62 +11882,64 @@ var _a = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 			].includes(t);
 		}
 		return e.isContentEditable;
-	}, []), H = p && c;
+	}, []), ee = p && c;
 	bt("[", (e) => {
-		V() || (e.preventDefault(), j || z());
-	}, { enabled: H }), bt("]", (e) => {
-		V() || (e.preventDefault(), j && z());
-	}, { enabled: H });
-	let U = m(null);
+		U() || (e.preventDefault(), j || V());
+	}, { enabled: ee }), bt("]", (e) => {
+		U() || (e.preventDefault(), j && V());
+	}, { enabled: ee });
+	let W = m(null);
 	f(() => {
 		let e = () => {
-			if (!U.current) return;
-			let e = Math.max(0, Math.round(U.current.getBoundingClientRect().top + window.scrollY));
-			U.current.style.setProperty("--pds-app-layout-top-offset", `${e}px`);
+			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`);
 		};
 		e();
 		let t = new ResizeObserver(e);
 		return t.observe(document.documentElement), () => t.disconnect();
 	}, []);
-	let W = Ie(t), G = W.__unslotted, K = W.header, q = W.footer, J = W.sidebar, ee = W.identity, te = W["content-top"], ne = W.navigation, re = W["content-bottom"], ie = ee || te || ne || re, ae = ie ? /* @__PURE__ */ e.createElement(e.Fragment, null, (ee || o) && /* @__PURE__ */ e.createElement("div", { className: `${N}__sidebar-identity` }, ee, o && !j && /* @__PURE__ */ e.createElement(Jt, {
+	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, {
 		hasBorder: !0,
-		ariaLabel: g.drawerToggle,
+		ariaLabel: F.drawerToggle,
 		className: `${N}__drawer-toggle`,
 		iconName: "sidebar",
 		onClick: x,
 		size: "s"
-	})), te && /* @__PURE__ */ e.createElement("div", { className: `${N}__sidebar-content-top` }, te), ne && /* @__PURE__ */ e.createElement("div", { className: `${N}__sidebar-navigation` }, ne), re && /* @__PURE__ */ e.createElement("div", { className: `${N}__sidebar-content-bottom` }, re)) : J, Y = i(v, {
+	})), 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, {
 		...b,
 		className: Z([`${N}__main`, b?.className]),
+		id: I,
+		tabIndex: b?.tabIndex ?? -1,
 		style: {
 			...b?.style,
 			backgroundColor: _ || void 0
 		}
 	}, /* @__PURE__ */ e.createElement("div", {
 		className: `${N}__main-inner`,
-		style: { maxWidth: F }
-	}, G)), oe = q ? /* @__PURE__ */ e.createElement("div", {
+		style: { maxWidth: L }
+	}, K)), se = te ? /* @__PURE__ */ e.createElement("div", {
 		className: `${N}__content-column`,
 		style: { backgroundColor: _ || void 0 }
-	}, Y, /* @__PURE__ */ e.createElement("div", { className: `${N}__footer` }, /* @__PURE__ */ e.createElement("div", {
+	}, X, /* @__PURE__ */ e.createElement("div", { className: `${N}__footer` }, /* @__PURE__ */ e.createElement("div", {
 		className: `${N}__footer-inner`,
-		style: { maxWidth: F }
-	}, q))) : Y, X = /* @__PURE__ */ e.createElement(e.Fragment, null, (J || ie) && /* @__PURE__ */ e.createElement("div", {
+		style: { maxWidth: L }
+	}, te))) : X, ce = /* @__PURE__ */ e.createElement(e.Fragment, null, (ne || Y) && /* @__PURE__ */ e.createElement("div", {
 		...k,
 		className: Z([
 			`${N}__sidebar`,
 			j ? `${N}__sidebar--collapsed` : null,
 			k?.className
 		]),
-		style: L
+		style: z
 	}, c && /* @__PURE__ */ e.createElement(xt, {
 		className: `${N}__sidebar-toggle-tooltip`,
-		content: j ? g.expandSidebar : g.collapseSidebar,
+		content: j ? F.expandSidebar : F.collapseSidebar,
 		customTrigger: /* @__PURE__ */ e.createElement("button", {
 			"aria-expanded": !j,
-			"aria-label": j ? g.expandSidebar : g.collapseSidebar,
+			"aria-label": j ? F.expandSidebar : F.collapseSidebar,
 			className: `${N}__sidebar-toggle-button`,
-			onClick: z,
+			onClick: V,
 			type: "button"
 		}, /* @__PURE__ */ e.createElement("span", { className: `${N}__sidebar-toggle-icon` }, /* @__PURE__ */ e.createElement(Q, {
 			iconName: "angleLeft",
@@ -11924,17 +11951,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` }, ae)), oe);
+	}), /* @__PURE__ */ e.createElement("div", { className: `${N}__sidebar-inner` }, oe)), se);
 	return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
-		ref: U,
+		ref: W,
 		className: Z([
 			N,
 			P,
-			K ? `${N}--has-header` : null,
+			q ? `${N}--has-header` : null,
 			n ?? ""
 		]),
 		...A
-	}, K ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: `${N}__header` }, K), /* @__PURE__ */ e.createElement("div", { className: `${N}__body` }, X)) : X), o && /* @__PURE__ */ e.createElement(ji, {
+	}, /* @__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, {
 		...a,
 		isOpen: u,
 		placement: "left",