@pantheon-systems/pds-toolkit-react 2.0.0-alpha.46 → 2.0.0-alpha.47

package/dist/index.js

@@ -1,8 +1,8 @@
 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, useSyncExternalStore as g } from "react";
 import _ from "hash-sum";
 import { FloatingArrow as v, FloatingFocusManager as y, FloatingOverlay as b, FloatingPortal as x, arrow as S, autoUpdate as C, flip as w, offset as T, safePolygon as E, shift as D, size as O, useClick as k, useDismiss as A, useFloating as j, useFocus as M, useHover as N, useId as P, useInteractions as F, useListNavigation as I, useRole as L, useTransitionStyles as R, useTypeahead as z } from "@floating-ui/react";
-import { Bar as B, BarChart as V, CartesianGrid as H, Cell as U, Line as ee, LineChart as W, Pie as G, PieChart as K, ReferenceLine as q, ResponsiveContainer as te, Tooltip as ne, XAxis as re, YAxis as ie } from "recharts";
-import { CodeBlock as J } from "react-code-block";
+import { Bar as B, BarChart as V, CartesianGrid as H, Cell as U, Line as ee, LineChart as W, Pie as G, PieChart as K, ReferenceLine as q, ResponsiveContainer as te, Tooltip as ne, XAxis as J, YAxis as re } from "recharts";
+import { CodeBlock as ie } from "react-code-block";
 import { useCombobox as Y, useMultipleSelection as X } from "downshift";
 import { format as ae } from "date-fns";
 import { DayPicker as oe } from "react-day-picker";
@@ -4156,18 +4156,18 @@ var hn = ({ 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 = Dt(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) => Rt(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 } = rn({
+	let P = x || d, F = C !== void 0, I = r !== void 0, L = ((e) => e.reduce((e, t) => Rt(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: J, transitionStyles: re } = rn({
 		enableClick: !i,
 		enableTypeahead: !0,
 		role: "listbox",
 		selectedIndex: V,
 		variant: "input"
-	}), J = V === null ? void 0 : L[V]?.label, Y = V === null ? void 0 : L[V]?.icon, X = V === null ? void 0 : L[V]?.value, ae = (e) => {
+	}), ie = V === null ? void 0 : L[V]?.label, Y = V === null ? void 0 : L[V]?.icon, X = V === null ? void 0 : L[V]?.value, ae = (e) => {
 		let t = L[e];
-		F || (H(e), re(!1)), m && m(t);
+		F || (H(e), J(!1)), m && m(t);
 	};
 	l(() => {
-		F && (H(R(C)), re(!1));
+		F && (H(R(C)), J(!1));
 	}, [C]);
 	let oe = () => {
 		f && f(X);
@@ -4274,7 +4274,7 @@ var hn = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 			onBlur: oe,
 			onFocus: se
 		})
-	}, N && /* @__PURE__ */ e.createElement(Nt, { variant: N }), /* @__PURE__ */ e.createElement("span", { className: `${E}__input-inner` }, /* @__PURE__ */ e.createElement("span", { className: `${E}__option-text` }, (Y || !J && a) && le(Y || a, `${E}__icon`), /* @__PURE__ */ e.createElement("span", { className: `${E}__option-label-text` }, J ?? u.selectOptionText)), /* @__PURE__ */ e.createElement(Q, {
+	}, N && /* @__PURE__ */ e.createElement(Nt, { variant: N }), /* @__PURE__ */ e.createElement("span", { className: `${E}__input-inner` }, /* @__PURE__ */ e.createElement("span", { className: `${E}__option-text` }, (Y || !ie && a) && le(Y || a, `${E}__icon`), /* @__PURE__ */ e.createElement("span", { className: `${E}__option-label-text` }, ie ?? u.selectOptionText)), /* @__PURE__ */ e.createElement(Q, {
 		className: `${E}__trigger-icon`,
 		iconName: "angleDown"
 	}))), q && /* @__PURE__ */ e.createElement("div", {
@@ -4285,7 +4285,7 @@ var hn = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 			zIndex: "var(--pds-z-index-dropdown)"
 		},
 		...W()
-	}, /* @__PURE__ */ e.createElement("div", { style: { ...ie } }, /* @__PURE__ */ e.createElement("ul", {
+	}, /* @__PURE__ */ e.createElement("div", { style: { ...re } }, /* @__PURE__ */ e.createElement("ul", {
 		className: `${E}__options`,
 		role: "group"
 	}, ue(g)))), P && /* @__PURE__ */ e.createElement(jt, {
@@ -4617,7 +4617,7 @@ var hn = ({ 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);
 }, ir = ({ 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: S, showTooltip: E, timePeriodOptions: O, tooltipContent: k, variant: A = "stacked", xAxisLabel: M, xAxisTickInterval: N, yAxisDomain: P, yAxisFormatter: F = rr, yAxisLabel: I, yAxisTickInterval: L, ...z }) => {
-	let { accessibleTableDescription: U = "Bar chart data", emptyStateHeading: ee = "No data available", emptyStateMessage: W, legendTableHeader: G, loadingLabel: K = "Loading chart data" } = d, q = m(null), J = Hn(a, Jn(q, a)), Y = n ?? (u ? 60 : 360), X = r ?? (u ? 60 : void 0), ae = x ?? !u, oe = b ?? !u, se = S ?? !u, ce = E ?? !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, q = m(null), ie = Hn(a, Jn(q, a)), Y = n ?? (u ? 60 : 360), X = r ?? (u ? 60 : void 0), ae = x ?? !u, oe = b ?? !u, se = S ?? !u, ce = E ?? !u, le = y ?? !0, [ue, de] = h(null), fe = m(ue);
 	ue && (fe.current = ue);
 	let pe = m({ getBoundingClientRect: () => ({
 		bottom: 0,
@@ -4750,7 +4750,7 @@ var hn = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		stroke: "var(--pds-color-border-default)",
 		strokeDasharray: "3 3",
 		vertical: we
-	}), /* @__PURE__ */ e.createElement(re, {
+	}), /* @__PURE__ */ e.createElement(J, {
 		axisLine: oe,
 		dataKey: we ? void 0 : "label",
 		hide: !oe,
@@ -4766,7 +4766,7 @@ var hn = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		tickLine: !1,
 		tickMargin: 10,
 		type: we ? "number" : "category"
-	}), /* @__PURE__ */ e.createElement(ie, {
+	}), /* @__PURE__ */ e.createElement(re, {
 		axisLine: oe,
 		dataKey: we ? "label" : void 0,
 		domain: P,
@@ -4798,12 +4798,12 @@ var hn = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 	}), v.map((t, n) => /* @__PURE__ */ e.createElement(B, {
 		key: t.dataKey,
 		dataKey: t.dataKey,
-		fill: Kn(n, J, t.color, Un(a, t.paletteIndex)),
+		fill: Kn(n, ie, t.color, Un(a, t.paletteIndex)),
 		name: t.label,
 		onMouseEnter: k ? void 0 : (e) => {
 			let r = e;
 			ce && r && de({
-				color: Kn(n, J, t.color, Un(a, t.paletteIndex)),
+				color: Kn(n, ie, t.color, Un(a, t.paletteIndex)),
 				label: String(r.label ?? ""),
 				name: t.label,
 				value: Number(r[t.dataKey] ?? 0)
@@ -4828,7 +4828,7 @@ var hn = ({ 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: J,
+		seriesColors: ie,
 		tableHeader: G,
 		valueFormatter: F,
 		variant: p
@@ -4844,7 +4844,7 @@ var hn = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		default: return;
 	}
 }, or = ({ 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 = rr, 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 = Hn(a, Jn(L, a)), z = n ?? (c ? 60 : 360), B = r ?? (c ? 60 : void 0), V = b ?? !c, U = v ?? !c, G = x ?? !c, K = S ?? !c, J = y ?? !c, Y = _ ?? !0, X = "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 = Hn(a, Jn(L, a)), z = n ?? (c ? 60 : 360), B = r ?? (c ? 60 : void 0), V = b ?? !c, U = v ?? !c, G = x ?? !c, K = S ?? !c, ie = y ?? !c, Y = _ ?? !0, X = "pds-line-chart";
 	return s ? /* @__PURE__ */ e.createElement("div", {
 		ref: L,
 		"aria-busy": "true",
@@ -4910,7 +4910,7 @@ var hn = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 	}, V && /* @__PURE__ */ e.createElement(H, {
 		stroke: "var(--pds-color-border-default)",
 		strokeDasharray: "3 3"
-	}), /* @__PURE__ */ e.createElement(re, {
+	}), /* @__PURE__ */ e.createElement(J, {
 		axisLine: U,
 		dataKey: "label",
 		hide: !U,
@@ -4924,7 +4924,7 @@ var hn = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		tick: U ? Yn : !1,
 		tickLine: !1,
 		tickMargin: 10
-	}), /* @__PURE__ */ e.createElement(ie, {
+	}), /* @__PURE__ */ e.createElement(re, {
 		axisLine: U,
 		domain: D,
 		hide: !U,
@@ -4960,9 +4960,9 @@ var hn = ({ 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(ee, {
 		key: t.dataKey,
-		activeDot: J ? { r: 6 } : !1,
+		activeDot: ie ? { r: 6 } : !1,
 		dataKey: t.dataKey,
-		dot: J ? {
+		dot: ie ? {
 			fill: Kn(n, R, t.color, Un(a, t.paletteIndex)),
 			r: 4,
 			strokeWidth: 0
@@ -6359,17 +6359,17 @@ var fr = {
 			variant: "reverse"
 		}))));
 	}
-	let C = /* @__PURE__ */ e.createElement(J.LineContent, null, /* @__PURE__ */ e.createElement(J.Token, null)), w = /* @__PURE__ */ e.createElement("div", { className: `${g}__line ${_}` }, /* @__PURE__ */ e.createElement(J.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(J, {
+	}, c ? y : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(ie, {
 		code: n,
 		language: l || "",
 		prism: dr.default,
 		theme: fr
-	}, /* @__PURE__ */ e.createElement(J.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(en, {
@@ -6954,15 +6954,15 @@ var fr = {
 	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: S, onClear: E, onFocus: D, onOptionSelect: k, options: A, placeholder: M, required: N = !1, showLabel: P = !0, showUnfilteredOptions: F = !1, size: I = "s", tooltipText: L = null, validationMessage: z, validationStatus: B, value: V, ...H }, U) => {
-	let ee = Dt(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, X = n !== void 0, ae = (e) => {
+	let ee = Dt(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, J = null;
+	o && (J = "search"), B === "error" && (J = "error"), B === "success" && (J = "success");
+	let re = z || y, ie = V !== void 0, X = n !== void 0, ae = (e) => {
 		let t = A.find((t) => t.value === e);
 		return t ? t.label : "";
-	}, [oe, se] = h(X ? n : void 0), [ce, le] = h(J ? V ?? "" : X ? ae(n) : "");
+	}, [oe, se] = h(X ? n : void 0), [ce, le] = h(ie ? V ?? "" : X ? ae(n) : "");
 	l(() => {
-		J && le(V ?? "");
-	}, [J, V]);
+		ie && le(V ?? "");
+	}, [ie, 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), {
@@ -6992,7 +6992,7 @@ var fr = {
 			le(e ?? "");
 		},
 		onSelectedItemChange: ({ selectedItem: e }) => {
-			e && (J || le(e.label), se(e.value), k?.(e));
+			e && (ie || le(e.label), se(e.value), k?.(e));
 		},
 		stateReducer: (e, { changes: t, type: n }) => {
 			if (n === Y.stateChangeTypes.InputBlur) return {
@@ -7048,7 +7048,7 @@ var fr = {
 	}, [U, Se]), Ee = () => {
 		_e ? ye() : ve();
 	}, De = () => {
-		J || le(""), se(void 0), ye(), ue.current?.focus(), F && ve(), E?.();
+		ie || le(""), se(void 0), ye(), ue.current?.focus(), F && ve(), E?.();
 	}, Oe = (e) => {
 		x?.(oe);
 	}, ke = (e) => {
@@ -7083,13 +7083,13 @@ var fr = {
 		tooltipText: L
 	}), /* @__PURE__ */ e.createElement("span", {
 		ref: Te,
-		"aria-describedby": ie ? `${u}__message` : null,
+		"aria-describedby": re ? `${u}__message` : null,
 		"aria-disabled": r ? !0 : null,
 		"aria-invalid": B === "error" ? !0 : null,
 		"aria-required": N ? !0 : null,
 		className: `${W}__input-wrapper`,
 		id: u
-	}, re && /* @__PURE__ */ e.createElement(Nt, { variant: re }), /* @__PURE__ */ e.createElement("input", {
+	}, J && /* @__PURE__ */ e.createElement(Nt, { variant: J }), /* @__PURE__ */ e.createElement("input", {
 		ref: ue,
 		autoComplete: "off",
 		className: `${W}__input`,
@@ -7134,10 +7134,10 @@ var fr = {
 		className: `${W}__options`,
 		...he(),
 		style: Ce && !f && fe.length > 0 ? void 0 : { display: "none" }
-	}, Ce && !f && Ae())), ie && /* @__PURE__ */ e.createElement(jt, {
+	}, Ce && !f && Ae())), re && /* @__PURE__ */ e.createElement(jt, {
 		hasValidationMessage: !!z,
 		id: u,
-		message: ie,
+		message: re,
 		validationMessageHasDecorators: !1,
 		validationStatus: B
 	}));
@@ -7177,7 +7177,7 @@ var fr = {
 				default: break;
 			}
 		}
-	}), { closeMenu: ne, getInputProps: re, getItemProps: ie, getMenuProps: J, getToggleButtonProps: ae, highlightedIndex: oe, isOpen: se, openMenu: ce, selectedItem: le } = Y({
+	}), { closeMenu: ne, getInputProps: J, getItemProps: re, getMenuProps: ie, getToggleButtonProps: ae, highlightedIndex: oe, isOpen: se, openMenu: ce, selectedItem: le } = Y({
 		items: ee,
 		itemToString: (e) => e ? e.label : "",
 		selectedItem: null,
@@ -7267,7 +7267,7 @@ var fr = {
 		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 = re({
+	}, Te = J({
 		...K({ preventKeyAction: se }),
 		disabled: r,
 		onKeyDown: we
@@ -7363,7 +7363,7 @@ var fr = {
 		}
 	})), se && s && /* @__PURE__ */ e.createElement("div", { className: `${D}__loading` }, u), se && !s && ee.length === 0 && /* @__PURE__ */ e.createElement("div", { className: "pds-dropdown__no-results" }, d), /* @__PURE__ */ e.createElement("ul", {
 		className: `${D}__dropdown-list`,
-		...J(),
+		...ie(),
 		style: se && !s && ee.length > 0 ? void 0 : { display: "none" }
 	}, se && !s && ee.map((t, n) => /* @__PURE__ */ e.createElement(zt, {
 		key: `${t.id}-${n}`,
@@ -7371,7 +7371,7 @@ var fr = {
                   ${oe === n ? "pds-dropdown__item--focused" : ""}
                   ${le === t ? `${D}__dropdown-item--selected` : ""}
                   ${t.isAlreadySelected ? "pds-dropdown__item--active" : ""}`,
-		...ie({
+		...re({
 			item: t,
 			index: n
 		})
@@ -7504,10 +7504,10 @@ var fr = {
 		k(void 0), f?.(void 0);
 	}, ne = () => {
 		M(!1);
-	}, re = () => {
+	}, J = () => {
 		let e = /* @__PURE__ */ new Date();
 		I(e), r ? (k(void 0), f?.(void 0)) : (k(e), f?.(e));
-	}, ie = () => r ? O?.from : O, J = ({ className: t, orientation: n }) => n === "left" ? /* @__PURE__ */ e.createElement(Q, {
+	}, re = () => r ? O?.from : O, ie = ({ className: t, orientation: n }) => n === "left" ? /* @__PURE__ */ e.createElement(Q, {
 		className: t,
 		iconName: "angleLeft",
 		size: "m"
@@ -7571,7 +7571,7 @@ var fr = {
 		className: Z([`${R}__trigger`, A ? `${R}__trigger--open` : null]),
 		disabled: n,
 		onClick: () => {
-			A || I(ie() ?? /* @__PURE__ */ new Date()), M(!A);
+			A || I(re() ?? /* @__PURE__ */ new Date()), M(!A);
 		},
 		type: "button"
 	}, /* @__PURE__ */ e.createElement(Q, {
@@ -7587,7 +7587,7 @@ var fr = {
 		className: `${R}__popover`,
 		style: ee
 	}, /* @__PURE__ */ e.createElement("div", { className: `${R}__calendar` }, r ? /* @__PURE__ */ e.createElement(oe, {
-		components: { Chevron: J },
+		components: { Chevron: ie },
 		disabled: X(),
 		footer: /* @__PURE__ */ e.createElement("div", { className: "visually-hidden" }, le()),
 		formatters: { formatWeekdayName: Y },
@@ -7600,7 +7600,7 @@ var fr = {
 		onSelect: K,
 		selected: O
 	}) : /* @__PURE__ */ e.createElement(oe, {
-		components: { Chevron: J },
+		components: { Chevron: ie },
 		disabled: X(),
 		footer: /* @__PURE__ */ e.createElement("div", { className: "visually-hidden" }, le()),
 		formatters: { formatWeekdayName: Y },
@@ -7615,7 +7615,7 @@ var fr = {
 	})), /* @__PURE__ */ e.createElement("div", { className: `${R}__actions` }, /* @__PURE__ */ e.createElement(Xt, {
 		className: `${R}__action-button ${R}__action-button--today`,
 		label: E.todayButton,
-		onClick: re,
+		onClick: J,
 		size: "s",
 		type: "button",
 		variant: "secondary"
@@ -7916,16 +7916,16 @@ var fr = {
 		F(null), L(null), z(null);
 	}, ne = (e, t) => {
 		P === null || P === e || (L(e), z(t));
-	}, re = (e) => {
+	}, J = (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), K(r), G("Tag reordered"), F(null), L(null), z(null);
-	}, ie = (e, t) => {
+	}, re = (e, t) => {
 		let n = [..._], [r] = n.splice(e, 1);
 		n.splice(t, 0, r), G(`${r.value} moved to position ${t + 1} of ${_.length}`), K(n);
-	}, J = (e) => {
+	}, ie = (e) => {
 		let t = _.find((t) => t.id === e);
 		K(_.filter((t) => t.id !== e)), t && G(`${t.value} removed`);
 	}, Y = () => {
@@ -7978,7 +7978,7 @@ var fr = {
 		"aria-label": y.tagsListLabel,
 		className: `${T}__tags`,
 		onDragOver: s ? (e) => e.preventDefault() : void 0,
-		onDrop: s ? re : void 0,
+		onDrop: s ? J : void 0,
 		role: "list"
 	}, _.map((t, n) => {
 		let i = null;
@@ -7996,8 +7996,8 @@ var fr = {
 			onDragOver: ne,
 			onDragStart: q,
 			onFocusInput: Y,
-			onKeyboardMove: ie,
-			onRemove: J,
+			onKeyboardMove: re,
+			onRemove: ie,
 			setFocusedIndex: V,
 			tag: t,
 			totalTags: _.length,
@@ -8104,7 +8104,7 @@ var fr = {
 	let P = Dt(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 ee = k || p, W = j !== void 0, [G, K] = h(i === void 0 ? "" : i), q = j || G, te = (e) => {
-		if (w && ie && J(!1), c && O === "url") {
+		if (w && re && ie(!1), c && O === "url") {
 			let t = Ot(e.target.value), n = {
 				...e,
 				target: {
@@ -8125,16 +8125,16 @@ var fr = {
 			};
 			W || K(t), g && g(n);
 		} else W || K(e.target.value), g && g(e);
-	}, re = () => {
+	}, J = () => {
 		W || K(""), _ && _();
 		let e = document.getElementById(l);
 		e && e.focus();
-	}, [ie, J] = h(!1), Y = () => {
-		J((e) => !e);
+	}, [re, ie] = h(!1), Y = () => {
+		ie((e) => !e);
 		let e = document.getElementById(l);
 		e && e.focus();
 	}, X = O;
-	return w && O === "password" && (X = ie ? "text" : "password"), /* @__PURE__ */ e.createElement("div", {
+	return w && O === "password" && (X = re ? "text" : "password"), /* @__PURE__ */ e.createElement("div", {
 		className: Z([
 			$.base,
 			F,
@@ -8159,7 +8159,7 @@ var fr = {
 	}), w && O === "password" && /* @__PURE__ */ e.createElement("div", {
 		"aria-live": "polite",
 		className: "visually-hidden"
-	}, `${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(Nt, { variant: U }), c && O === "url" && /* @__PURE__ */ e.createElement(Br, null), /* @__PURE__ */ e.createElement("input", {
+	}, `${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(Nt, { variant: U }), c && O === "url" && /* @__PURE__ */ e.createElement(Br, null), /* @__PURE__ */ e.createElement("input", {
 		ref: N,
 		"aria-describedby": ee ? `${l}__message` : null,
 		"aria-invalid": A === "error" ? !0 : null,
@@ -8179,17 +8179,17 @@ var fr = {
 		...u
 	}), o && q && /* @__PURE__ */ e.createElement(Ft, {
 		clearLabel: D.clearButton,
-		handleClearInput: re,
+		handleClearInput: J,
 		id: l
 	}), w && O === "password" && /* @__PURE__ */ e.createElement("button", {
 		"aria-controls": l,
 		className: `${F}__visibility-toggle`,
 		onClick: Y,
 		onMouseDown: (e) => e.preventDefault(),
-		title: ie ? D.visibilityToggleHide : D.visibilityToggleShow,
+		title: re ? D.visibilityToggleHide : D.visibilityToggleShow,
 		type: "button"
 	}, /* @__PURE__ */ e.createElement(Q, {
-		iconName: ie ? "eyeSlash" : "eye",
+		iconName: re ? "eyeSlash" : "eye",
 		size: "m"
 	})), s && O === "search" && !q && /* @__PURE__ */ e.createElement(Pt, {
 		inputId: l,
@@ -8389,18 +8389,18 @@ var fr = {
 		enableShift: !1,
 		enableTypeahead: !0,
 		role: "menu"
-	}), x = (e) => {
+	}), S = (e) => {
 		e.target.nodeName === "A" && y(!1);
-	}, S = (e) => {
+	}, C = (e) => {
 		e.key === "Enter" && _.current[d]?.querySelector("a")?.click();
-	}, C = ({ item: e, level: t }) => {
+	}, w = ({ item: e, level: t }) => {
 		let r = $r(e.linkContent, e.links);
 		return {
 			...e,
 			level: t,
 			linkContent: n(r, Object.assign({}, r.props, { tabIndex: -1 }))
 		};
-	}, w = (e) => {
+	}, T = (e) => {
 		let t = [];
 		return e.forEach((e) => {
 			if (e.isSeparator) {
@@ -8410,31 +8410,31 @@ var fr = {
 				});
 				return;
 			}
-			e.links ? (t.push(C({
+			e.links ? (t.push(w({
 				item: e,
 				level: "top-level"
 			})), e.links.forEach((e) => {
-				e.links ? (t.push(C({
+				e.links ? (t.push(w({
 					item: e,
 					level: "second-level"
 				})), e.links.forEach((e) => {
-					e.links && (t.push(C({
+					e.links && (t.push(w({
 						item: e,
 						level: "third-level"
 					})), e.links.forEach((e) => {
-						t.push(C({
+						t.push(w({
 							item: e,
 							level: "fourth-level"
 						}));
-					})), t.push(C({
+					})), t.push(w({
 						item: e,
 						level: "third-level"
 					}));
-				})) : t.push(C({
+				})) : t.push(w({
 					item: e,
 					level: "second-level"
 				}));
-			})) : t.push(C({
+			})) : t.push(w({
 				item: e,
 				level: "top-level"
 			}));
@@ -8452,17 +8452,17 @@ var fr = {
 		className: `${s}__trigger-icon`,
 		iconName: "angleDown",
 		size: "m"
-	})), g && /* @__PURE__ */ e.createElement("ul", {
+	})), g && /* @__PURE__ */ e.createElement(x, null, /* @__PURE__ */ e.createElement("ul", {
 		ref: v.setFloating,
 		className: `pds-dropdown__panel ${s}__dropdown`,
-		onClick: x,
+		onClick: S,
 		style: {
 			...f,
 			...b,
 			zIndex: "var(--pds-z-index-dropdown)"
 		},
 		...p()
-	}, w(i).map((t, n) => t.isSeparator ? /* @__PURE__ */ e.createElement("li", {
+	}, T(i).map((t, n) => t.isSeparator ? /* @__PURE__ */ e.createElement("li", {
 		key: n,
 		ref: (e) => {
 			_.current[n] = e;
@@ -8483,8 +8483,8 @@ var fr = {
 			t.isActive === !0 ? "pds-dropdown__item--active" : null
 		]),
 		tabIndex: d === n ? 0 : -1,
-		...m({ onKeyDown: S })
-	}, t.linkContent, t.isActive === !0 && u))));
+		...m({ onKeyDown: C })
+	}, t.linkContent, t.isActive === !0 && u)))));
 }, ri = ({ children: t, className: n, width: r = "standard", ...i }) => {
 	let a = "pds-container", o = r === "standard" ? null : `${a}--${r}`;
 	return /* @__PURE__ */ e.createElement("div", {
@@ -8675,11 +8675,11 @@ var fr = {
 			`${f}--${n}`,
 			Xr(t) ? `${f}--active` : null
 		])
-	}, t.linkContent))), [v, y] = h(!1), b = m(v), x = m(!1), { context: S, floatingStyles: O, refs: k } = j({
+	}, t.linkContent))), [v, y] = h(!1), b = m(v), S = m(!1), { context: O, floatingStyles: k, refs: M } = j({
 		placement: "right-start",
 		open: v,
 		onOpenChange: (e, t, n) => {
-			y(e), e || (x.current = n === "escape-key" || n === "focus-out");
+			y(e), e || (S.current = n === "escape-key" || n === "focus-out");
 		},
 		middleware: [
 			T(8),
@@ -8689,18 +8689,18 @@ var fr = {
 		whileElementsMounted: C
 	});
 	l(() => {
-		if (b.current && !v && i && x.current && k.reference.current) {
-			let e = k.reference.current;
+		if (b.current && !v && i && S.current && M.reference.current) {
+			let e = M.reference.current;
 			e instanceof HTMLElement && e.querySelector("a")?.focus();
 		}
 		b.current = v;
 	}, [
 		v,
 		i,
-		k.reference
+		M.reference
 	]);
-	let { getFloatingProps: M, getReferenceProps: P } = F([
-		N(S, {
+	let { getFloatingProps: P, getReferenceProps: I } = F([
+		N(O, {
 			move: !1,
 			delay: {
 				open: 100,
@@ -8708,15 +8708,15 @@ var fr = {
 			},
 			handleClose: E()
 		}),
-		A(S),
-		L(S, { role: "menu" })
-	]), I = (e) => {
+		A(O),
+		L(O, { role: "menu" })
+	]), R = (e) => {
 		i && s && (e.key === "ArrowDown" || e.key === "ArrowRight" || e.key === " " || e.key === "Spacebar") && (e.preventDefault(), y(!0));
-	}, R = (e) => {
+	}, z = (e) => {
 		!i || !s || !c || e.nativeEvent.pointerType === "touch" && (e.preventDefault(), e.stopPropagation(), c());
 	};
 	return /* @__PURE__ */ e.createElement("li", {
-		ref: i ? k.setReference : null,
+		ref: i ? M.setReference : null,
 		className: Z([
 			f,
 			`${f}--top-level`,
@@ -8724,9 +8724,9 @@ var fr = {
 			i ? `${f}--collapsed` : null,
 			n ? `${f}--active` : null
 		]),
-		...P(),
-		onClick: R,
-		onKeyDown: I
+		...I(),
+		onClick: z,
+		onKeyDown: R
 	}, s ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: `${f}-wrapper` }, ei(d, o, s, t), !i && /* @__PURE__ */ e.createElement("button", {
 		"aria-expanded": r,
 		className: Z([`${d}__toggle`, r ? `${d}__toggle--expanded` : null]),
@@ -8735,12 +8735,12 @@ var fr = {
 	}, /* @__PURE__ */ e.createElement(Q, {
 		iconName: "angleDown",
 		size: "m"
-	}), /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, `${a.toggle} ${Jr(o)} ${a.submenu}`))), !i && _(s, "second-level"), i && v && /* @__PURE__ */ e.createElement("div", {
-		ref: k.setFloating,
+	}), /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, `${a.toggle} ${Jr(o)} ${a.submenu}`))), !i && _(s, "second-level"), i && v && /* @__PURE__ */ e.createElement(x, null, /* @__PURE__ */ e.createElement("div", {
+		ref: M.setFloating,
 		className: `${d}__flyout`,
-		style: O,
-		...M()
-	}, /* @__PURE__ */ e.createElement("div", { className: `${d}__flyout-heading` }, Jr(o)), _(s, "second-level-flyout"))) : /* @__PURE__ */ e.createElement(e.Fragment, null, i ? /* @__PURE__ */ e.createElement(Et, {
+		style: k,
+		...P()
+	}, /* @__PURE__ */ e.createElement("div", { className: `${d}__flyout-heading` }, Jr(o)), _(s, "second-level-flyout")))) : /* @__PURE__ */ e.createElement(e.Fragment, null, i ? /* @__PURE__ */ e.createElement(Et, {
 		content: Jr(o),
 		customTrigger: g,
 		offsetValue: {
@@ -8823,7 +8823,7 @@ var fr = {
 		className: `${i}__trigger-icon`,
 		iconName: "angleDown",
 		size: "m"
-	})), l && /* @__PURE__ */ e.createElement("ul", {
+	})), l && /* @__PURE__ */ e.createElement(x, null, /* @__PURE__ */ e.createElement("ul", {
 		ref: (e) => {
 			u.setFloating(e), r.current = e;
 		},
@@ -8836,7 +8836,7 @@ var fr = {
 	}, t.map((t, n) => /* @__PURE__ */ e.createElement("li", {
 		key: n,
 		className: `${i}__item ${t.isSeparator ? "pds-dropdown__separator" : `pds-dropdown__item${f(t) ? " pds-dropdown__item--active" : ""}`}`
-	}, !t.isSeparator && t.linkContent))));
+	}, !t.isSeparator && t.linkContent)))));
 }, li = ({ ariaLabel: t = "Main Navigation", className: n, menuItems: r, ...i }) => {
 	let [a, o] = h(null), [s, c] = h(-1), [d, f] = h(null), [p, g] = h({
 		container: null,
@@ -8904,70 +8904,70 @@ var fr = {
 		...i
 	}, /* @__PURE__ */ e.createElement("ul", { className: `${v}__menu` }, S));
 }, ui = ({ buttonLabel: t = "Toggle dropdown", filterLabel: n = "Filter items", filterPlaceholder: r = "Filter items...", links: i, minFilterItems: a = 5, noResultsText: o = "No results found" }) => {
-	let [s, c] = h(i), [u, d] = h(""), f = i.length >= a, p = "pds-tab-menu", m = `${p}__dropdown-menu`, g = f ? `${m}--scroll` : null, _ = `${p}__dropdown-item`, { activeIndex: v, floatingStyles: y, getFloatingProps: b, getItemProps: x, getReferenceProps: S, isMounted: C, isOpen: w, listRef: T, refs: E, setActiveIndex: D, transitionStyles: O } = rn({
+	let [s, c] = h(i), [u, d] = h(""), f = i.length >= a, p = "pds-tab-menu", m = `${p}__dropdown-menu`, g = f ? `${m}--scroll` : null, _ = `${p}__dropdown-item`, { activeIndex: v, floatingStyles: y, getFloatingProps: b, getItemProps: S, getReferenceProps: C, isMounted: w, isOpen: T, listRef: E, refs: D, setActiveIndex: O, transitionStyles: k } = rn({
 		offsetValue: 8,
 		placement: "bottom-start",
 		role: "listbox"
-	}), k = (e) => {
-		e.preventDefault(), e.key === "Enter" && T.current[v].querySelector("a")?.click(), e.key === "Tab" && e.shiftKey && f && document.getElementById("links-filter").focus();
-	}, A = (e, t) => Jr(e.linkContent).toLowerCase().includes(t.toLowerCase()), j = (e) => {
+	}), A = (e) => {
+		e.preventDefault(), e.key === "Enter" && E.current[v].querySelector("a")?.click(), e.key === "Tab" && e.shiftKey && f && document.getElementById("links-filter").focus();
+	}, j = (e, t) => Jr(e.linkContent).toLowerCase().includes(t.toLowerCase()), M = (e) => {
 		let t = e.target.value;
-		d(t), c(i.filter((e) => A(e, t)));
+		d(t), c(i.filter((e) => j(e, t)));
 	};
 	l(() => {
-		c(i.filter((e) => A(e, u)));
+		c(i.filter((e) => j(e, u)));
 	}, [i]);
-	let M = () => {
+	let N = () => {
 		d(""), c(i);
-	}, N = {
+	}, P = {
 		minWidth: "13rem",
 		width: `${Jr(i.reduce((e, t) => Jr(e.linkContent).length > Jr(t.linkContent).length ? e : t).linkContent).length + 2}ch`
-	}, P = /* @__PURE__ */ e.createElement(Q, {
+	}, F = /* @__PURE__ */ e.createElement(Q, {
 		className: `${p}__active-icon`,
 		iconName: "check"
-	}), F = f && /* @__PURE__ */ e.createElement("div", { className: `${p}__filter` }, /* @__PURE__ */ e.createElement(Vr, {
+	}), I = f && /* @__PURE__ */ e.createElement("div", { className: `${p}__filter` }, /* @__PURE__ */ e.createElement(Vr, {
 		hasClearButton: !0,
 		autoComplete: "off",
 		id: "links-filter",
 		label: n,
-		onChange: j,
-		onClear: M,
+		onChange: M,
+		onClear: N,
 		placeholder: r,
 		showLabel: !1,
 		type: "search"
-	})), I = s.map((t, n) => {
+	})), L = s.map((t, n) => {
 		let r = t.isActive ? `${_}--active` : null;
 		return /* @__PURE__ */ e.createElement("li", {
 			key: n,
 			ref: (e) => {
-				T.current[n] = e;
+				E.current[n] = e;
 			},
 			className: Z([_, r]),
-			onKeyDown: k,
+			onKeyDown: A,
 			tabIndex: n === v ? 0 : -1,
-			...x()
-		}, t.linkContent, t.isActive && P);
+			...S()
+		}, t.linkContent, t.isActive && F);
 	});
 	return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("button", {
-		ref: E.setReference,
+		ref: D.setReference,
 		className: `${p}__dropdown-trigger`,
 		type: "button",
-		...S({
-			"aria-expanded": w,
+		...C({
+			"aria-expanded": T,
 			"aria-label": t
 		})
 	}, /* @__PURE__ */ e.createElement(Q, {
 		className: `${p}__dropdown-trigger-icon`,
 		iconName: "angleDown"
-	})), C && /* @__PURE__ */ e.createElement("div", {
-		ref: E.setFloating,
+	})), w && /* @__PURE__ */ e.createElement(x, null, /* @__PURE__ */ e.createElement("div", {
+		ref: D.setFloating,
 		className: `${p}__dropdown`,
 		...b({ style: {
 			...y,
-			...N,
+			...P,
 			zIndex: "var(--pds-z-index-dropdown)"
 		} })
-	}, /* @__PURE__ */ e.createElement("div", { style: { ...O } }, F, /* @__PURE__ */ e.createElement("ul", { className: Z([m, g]) }, I.length === 0 ? /* @__PURE__ */ e.createElement("p", { className: `${p}__no-results` }, o) : I))));
+	}, /* @__PURE__ */ e.createElement("div", { style: { ...k } }, I, /* @__PURE__ */ e.createElement("ul", { className: Z([m, g]) }, L.length === 0 ? /* @__PURE__ */ e.createElement("p", { className: `${p}__no-results` }, o) : L)))));
 }, di = ({ ariaLabel: t, className: r, menuItems: i, ...a }) => {
 	let s = "pds-tab-menu", c = ({ dropdownSettings: t, icon: r, isActive: i, linkContent: a, links: c, promoteActiveChildLink: l = !1 }) => {
 		let u = `${s}__item`, d = qr(c);
@@ -9253,7 +9253,7 @@ var fr = {
 		preferredPlacement: "top"
 	}));
 }, gi = ({ ariaLabel: t = "User menu", className: n, menuItems: r = [], onThemeChange: i, theme: a, themeLabel: o = "Theme", themeLabelStrings: s, userEmail: c, userImageSrc: l, userName: d, ...f }) => {
-	let [p, g] = h(null), [_, v] = h(!1), y = m([]), b = m([]), x = u(), S = "pds-user-menu", E = `${S}__menu`, { context: O, floatingStyles: M, refs: N } = j({
+	let [p, g] = h(null), [_, v] = h(!1), y = m([]), b = m([]), S = u(), E = "pds-user-menu", O = `${E}__menu`, { context: M, floatingStyles: N, refs: P } = j({
 		placement: "bottom-end",
 		open: _,
 		onOpenChange: v,
@@ -9263,12 +9263,12 @@ var fr = {
 			D()
 		],
 		whileElementsMounted: C
-	}), P = k(O, { event: "mousedown" }), z = A(O), B = L(O, { role: "menu" }), V = m([]), { getFloatingProps: H, getItemProps: U, getReferenceProps: ee } = F([
-		z,
+	}), z = k(M, { event: "mousedown" }), B = A(M), V = L(M, { role: "menu" }), H = m([]), { getFloatingProps: U, getItemProps: ee, getReferenceProps: W } = F([
 		B,
-		P,
-		I(O, {
-			listRef: V,
+		V,
+		z,
+		I(M, {
+			listRef: H,
 			activeIndex: p,
 			onNavigate: g,
 			loop: !0,
@@ -9276,7 +9276,7 @@ var fr = {
 			focusItemOnOpen: !1,
 			focusItemOnHover: !0
 		})
-	]), { isMounted: W, styles: G } = R(O, {
+	]), { isMounted: G, styles: K } = R(M, {
 		duration: {
 			open: 300,
 			close: 150
@@ -9284,20 +9284,20 @@ var fr = {
 		initial: { opacity: 0 },
 		open: { opacity: 1 },
 		close: { opacity: 0 }
-	}), K = /* @__PURE__ */ e.createElement(We, {
+	}), q = /* @__PURE__ */ e.createElement(We, {
 		hasUserFallback: !0,
-		className: `${S}__avatar`,
+		className: `${E}__avatar`,
 		imageSrc: l,
 		size: "s",
 		uniqueId: c
-	}), q = /* @__PURE__ */ e.createElement("li", {
-		className: `${S}__user-details`,
+	}), te = /* @__PURE__ */ e.createElement("li", {
+		className: `${E}__user-details`,
 		role: "presentation"
-	}, /* @__PURE__ */ e.createElement("div", { className: `${S}__user-name` }, d), /* @__PURE__ */ e.createElement("div", { className: `${S}__user-email` }, c)), te = a !== void 0 && typeof i == "function" ? /* @__PURE__ */ e.createElement("li", {
-		className: `${S}__theme-row`,
+	}, /* @__PURE__ */ e.createElement("div", { className: `${E}__user-name` }, d), /* @__PURE__ */ e.createElement("div", { className: `${E}__user-email` }, c)), ne = a !== void 0 && typeof i == "function" ? /* @__PURE__ */ e.createElement("li", {
+		className: `${E}__theme-row`,
 		role: "presentation"
-	}, /* @__PURE__ */ e.createElement("span", { className: `${S}__theme-label` }, o), /* @__PURE__ */ e.createElement(hi, {
-		id: `${x}-theme`,
+	}, /* @__PURE__ */ e.createElement("span", { className: `${E}__theme-label` }, o), /* @__PURE__ */ e.createElement(hi, {
+		id: `${S}-theme`,
 		labelStrings: s,
 		onChange: i,
 		size: "s",
@@ -9305,36 +9305,36 @@ var fr = {
 		variant: "toggle"
 	})) : null;
 	r.forEach((e, t) => {
-		let n = e.id ? e.id : `${x}-item-${t}`;
+		let n = e.id ? e.id : `${S}-item-${t}`;
 		y.current.push(n), b.current.push(e);
 	});
-	let ne = (e) => {
+	let J = (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));
+		n.linkContent && !n.disabled && (H.current[t].querySelector("a").click(), v(!1)), n.callback && !n.disabled && (n.callback(), v(!1));
 	}, re = (e) => {
-		e.preventDefault(), e.key === "Enter" && ne(e.currentTarget.id);
+		e.preventDefault(), e.key === "Enter" && J(e.currentTarget.id);
 	}, ie = (e) => {
-		ne(e.currentTarget.id);
-	}, J = r.map((t, n) => {
-		let r = y.current[n], i = `${S}__item`, a = t.disabled ? `${i}--disabled` : null;
+		J(e.currentTarget.id);
+	}, Y = r.map((t, n) => {
+		let r = y.current[n], i = `${E}__item`, a = t.disabled ? `${i}--disabled` : null;
 		return /* @__PURE__ */ e.createElement("li", {
 			key: r,
 			ref: (e) => {
-				V.current[n] = e;
+				H.current[n] = e;
 			},
 			className: Z([i, a]),
 			id: r,
 			onKeyDown: re,
 			role: "menuitem",
 			tabIndex: p === n ? 0 : -1,
-			...U({ onClick: (e) => ie(e) })
+			...ee({ onClick: (e) => ie(e) })
 		}, t.linkContent ? t.linkContent : t.label, t.iconName && /* @__PURE__ */ e.createElement(Q, {
-			className: `${S}__icon`,
+			className: `${E}__icon`,
 			iconName: t.iconName,
 			size: "m"
 		}));
-	}), Y = r.map((t, n) => {
-		let r = y.current[n], i = `${S}__item`, a = t.disabled ? `${i}--disabled` : null;
+	}), X = r.map((t, n) => {
+		let r = y.current[n], i = `${E}__item`, a = t.disabled ? `${i}--disabled` : null;
 		return /* @__PURE__ */ e.createElement("li", {
 			key: r,
 			className: Z([i, a]),
@@ -9344,52 +9344,52 @@ var fr = {
 			},
 			role: "menuitem"
 		}, t.linkContent ? t.linkContent : t.label, t.iconName && /* @__PURE__ */ e.createElement(Q, {
-			className: `${S}__icon`,
+			className: `${E}__icon`,
 			iconName: t.iconName,
 			size: "m"
 		}));
-	}), X = /* @__PURE__ */ e.createElement("span", { className: `${S}__toggle-left` }, K, d ?? c);
+	}), ae = /* @__PURE__ */ e.createElement("span", { className: `${E}__toggle-left` }, q, d ?? c);
 	return /* @__PURE__ */ e.createElement("span", {
-		className: Z([S, n ?? ""]),
+		className: Z([E, n ?? ""]),
 		...f
-	}, /* @__PURE__ */ e.createElement(gn, { label: X }, /* @__PURE__ */ e.createElement("ul", {
-		className: Z([E, `${E}--mobile`]),
+	}, /* @__PURE__ */ e.createElement(gn, { label: ae }, /* @__PURE__ */ e.createElement("ul", {
+		className: Z([O, `${O}--mobile`]),
 		role: "menu"
-	}, q, /* @__PURE__ */ e.createElement("li", { role: "separator" }), te, Y)), /* @__PURE__ */ e.createElement("button", {
-		ref: N.setReference,
+	}, te, /* @__PURE__ */ e.createElement("li", { role: "separator" }), ne, X)), /* @__PURE__ */ e.createElement("button", {
+		ref: P.setReference,
 		"aria-label": t,
-		className: `${S}__trigger`,
+		className: `${E}__trigger`,
 		type: "button",
-		...ee()
-	}, K), W && /* @__PURE__ */ e.createElement("div", {
-		ref: N.setFloating,
-		className: `${S}__dropdown`,
+		...W()
+	}, q), G && /* @__PURE__ */ e.createElement(x, null, /* @__PURE__ */ e.createElement("div", {
+		ref: P.setFloating,
+		className: `${E}__dropdown`,
 		style: {
-			...M,
+			...N,
 			zIndex: "var(--pds-z-index-dropdown)"
 		},
-		...H()
-	}, /* @__PURE__ */ e.createElement("div", { style: { ...G } }, /* @__PURE__ */ e.createElement("ul", {
-		className: E,
+		...U()
+	}, /* @__PURE__ */ e.createElement("div", { style: { ...K } }, /* @__PURE__ */ e.createElement("ul", {
+		className: O,
 		role: "menu"
-	}, q, /* @__PURE__ */ e.createElement("li", { role: "separator" }), te, J))));
+	}, te, /* @__PURE__ */ e.createElement("li", { role: "separator" }), ne, Y)))));
 }, _i = ({ 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 } = rn({
+	let [d, f] = h(""), [g, _] = h(""), v = m(null), y = l.length >= s, b = "pds-workspace-selector", S = `${b}__menu`, C = y ? `${S}--scroll` : null, { activeIndex: w, floatingStyles: T, getFloatingProps: E, getItemProps: D, getReferenceProps: O, isMounted: k, listRef: A, refs: j, setIsOpen: M, transitionStyles: N } = rn({
 		enableTypeahead: !y,
 		role: "menu"
-	}), N = l.find((e) => e.isActive);
-	N || (N = l[0]);
-	let P = p(() => {
+	}), P = l.find((e) => e.isActive);
+	P || (P = l[0]);
+	let F = p(() => {
 		if (!d) return l;
 		let e = d.toLowerCase();
 		return l.filter((t) => t.displayName?.toLowerCase().includes(e));
-	}, [l, d]), F = p(() => {
+	}, [l, d]), I = p(() => {
 		if (!g) return l;
 		let e = g.toLowerCase();
 		return l.filter((t) => t.displayName?.toLowerCase().includes(e));
-	}, [l, g]), I = (e) => {
-		e.preventDefault(), e.key === "Enter" && (k.current[C]?.querySelector("a") || k.current[C]?.querySelector("button"))?.click(), e.key === "Tab" && (e.shiftKey ? y ? document.getElementById("workspace-filter")?.focus() : j(!1) : r ? v.current?.querySelector("a")?.focus() : j(!1));
-	}, L = (t) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: `${b}__item-content` }, /* @__PURE__ */ e.createElement(We, {
+	}, [l, g]), L = (e) => {
+		e.preventDefault(), e.key === "Enter" && (A.current[w]?.querySelector("a") || A.current[w]?.querySelector("button"))?.click(), e.key === "Tab" && (e.shiftKey ? y ? document.getElementById("workspace-filter")?.focus() : M(!1) : r ? v.current?.querySelector("a")?.focus() : M(!1));
+	}, R = (t) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: `${b}__item-content` }, /* @__PURE__ */ e.createElement(We, {
 		className: `${b}__list-avatar`,
 		imageSrc: t.imageSrc,
 		size: "s",
@@ -9397,9 +9397,9 @@ var fr = {
 	}), t.displayName, t.isRestricted && /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, t.restrictedLabel ?? "Restricted")), (t.isRestricted || t.isActive) && /* @__PURE__ */ e.createElement("div", { className: `${b}__icons` }, t.isRestricted && /* @__PURE__ */ e.createElement(Q, {
 		className: `${b}__lock-icon`,
 		iconName: "lock"
-	}), t.isActive && /* @__PURE__ */ e.createElement(Rn, null))), R = P.map((t, n) => {
+	}), t.isActive && /* @__PURE__ */ e.createElement(Rn, null))), z = F.map((t, n) => {
 		let r = `${b}__item`, i = t.workspaceId, a = t.isRestricted && t.onRestrictedSelection, o = t.workspaceLink?.type, s = t.isUnprivileged ? null : (e) => {
-			k.current[n] = e;
+			A.current[n] = e;
 		};
 		return /* @__PURE__ */ e.createElement("li", {
 			key: i,
@@ -9413,17 +9413,17 @@ var fr = {
 				t.isRestricted ? `${r}--restricted` : null
 			]),
 			id: i,
-			onKeyDown: I,
+			onKeyDown: L,
 			role: "menuitem",
-			tabIndex: C === n ? 0 : -1,
-			...E()
+			tabIndex: w === n ? 0 : -1,
+			...D()
 		}, a ? /* @__PURE__ */ e.createElement("button", {
 			onClick: () => {
-				t.onRestrictedSelection(), j(!1);
+				t.onRestrictedSelection(), M(!1);
 			},
 			type: "button"
-		}, L(t)) : o ? /* @__PURE__ */ e.createElement(o, Object.assign({}, t.workspaceLink.props, { onClick: () => j(!1) }), L(t)) : null);
-	}), z = F.map((t) => {
+		}, R(t)) : o ? /* @__PURE__ */ e.createElement(o, Object.assign({}, t.workspaceLink.props, { onClick: () => M(!1) }), R(t)) : null);
+	}), B = I.map((t) => {
 		let n = `${b}__item`, r = t.workspaceId, i = t.isRestricted && t.onRestrictedSelection, a = t.workspaceLink?.type;
 		return /* @__PURE__ */ e.createElement("li", {
 			key: `${r}-accordion`,
@@ -9440,27 +9440,27 @@ var fr = {
 		}, i ? /* @__PURE__ */ e.createElement("button", {
 			onClick: () => t.onRestrictedSelection(),
 			type: "button"
-		}, L(t)) : a ? /* @__PURE__ */ e.createElement(a, Object.assign({}, t.workspaceLink?.props), L(t)) : null);
-	}), B = r && /* @__PURE__ */ e.createElement("div", {
+		}, R(t)) : a ? /* @__PURE__ */ e.createElement(a, Object.assign({}, t.workspaceLink?.props), R(t)) : null);
+	}), V = r && /* @__PURE__ */ e.createElement("div", {
 		ref: v,
 		className: `${b}__create-link`
 	}, /* @__PURE__ */ e.createElement("span", {
 		className: `${b}__create-link-inner`,
-		onBlur: () => j(!1),
-		onClick: () => j(!1)
+		onBlur: () => M(!1),
+		onClick: () => M(!1)
 	}, r, /* @__PURE__ */ e.createElement(Q, {
 		iconName: "plus",
 		size: "s"
-	}))), V = N ? /* @__PURE__ */ e.createElement("div", { className: `${b}__button-content` }, /* @__PURE__ */ e.createElement(We, {
+	}))), H = P ? /* @__PURE__ */ e.createElement("div", { className: `${b}__button-content` }, /* @__PURE__ */ e.createElement(We, {
 		className: `${b}__avatar`,
-		imageSrc: N.imageSrc,
+		imageSrc: P.imageSrc,
 		size: "s",
-		uniqueId: N.workspaceId
-	}), /* @__PURE__ */ e.createElement("span", { className: `${b}__name` }, N.displayName)) : null;
+		uniqueId: P.workspaceId
+	}), /* @__PURE__ */ e.createElement("span", { className: `${b}__name` }, P.displayName)) : null;
 	return /* @__PURE__ */ e.createElement("span", {
 		className: Z([b, n]),
 		...u
-	}, /* @__PURE__ */ e.createElement(gn, { label: V }, y && /* @__PURE__ */ e.createElement("div", { className: `${b}__filter` }, /* @__PURE__ */ e.createElement(Vr, {
+	}, /* @__PURE__ */ e.createElement(gn, { label: H }, y && /* @__PURE__ */ e.createElement("div", { className: `${b}__filter` }, /* @__PURE__ */ e.createElement(Vr, {
 		hasClearButton: !0,
 		id: "workspace-filter-mobile",
 		label: i,
@@ -9470,33 +9470,33 @@ var fr = {
 		showLabel: !1,
 		type: "search"
 	})), /* @__PURE__ */ e.createElement("ul", {
-		className: Z([x, `${x}--mobile`]),
+		className: Z([S, `${S}--mobile`]),
 		role: "menu"
 	}, /* @__PURE__ */ e.createElement("li", {
 		className: `pds-dropdown__heading ${b}__item-heading`,
 		role: "presentation"
-	}, o), z.length === 0 ? /* @__PURE__ */ e.createElement("p", { className: "pds-dropdown__no-results" }, c) : z), r && /* @__PURE__ */ e.createElement("div", { className: `${b}__create-link` }, /* @__PURE__ */ e.createElement("span", { className: `${b}__create-link-inner` }, r, /* @__PURE__ */ e.createElement(Q, {
+	}, o), B.length === 0 ? /* @__PURE__ */ e.createElement("p", { className: "pds-dropdown__no-results" }, c) : B), r && /* @__PURE__ */ e.createElement("div", { className: `${b}__create-link` }, /* @__PURE__ */ e.createElement("span", { className: `${b}__create-link-inner` }, r, /* @__PURE__ */ e.createElement(Q, {
 		iconName: "plus",
 		size: "s"
 	})))), /* @__PURE__ */ e.createElement("button", {
-		ref: A.setReference,
+		ref: j.setReference,
 		"aria-label": t,
 		className: `${b}__trigger`,
 		type: "button",
-		...D()
-	}, V, /* @__PURE__ */ e.createElement(Q, {
+		...O()
+	}, H, /* @__PURE__ */ e.createElement(Q, {
 		className: `${b}__trigger-icon`,
 		iconName: "angleDown",
 		size: "m"
-	})), O && /* @__PURE__ */ e.createElement("div", {
-		ref: A.setFloating,
+	})), k && /* @__PURE__ */ e.createElement(x, null, /* @__PURE__ */ e.createElement("div", {
+		ref: j.setFloating,
 		className: `pds-dropdown__panel ${b}__dropdown`,
 		style: {
-			...w,
-			...M,
+			...T,
+			...N,
 			zIndex: "var(--pds-z-index-dropdown)"
 		},
-		...T()
+		...E()
 	}, y && /* @__PURE__ */ e.createElement("div", { className: `${b}__filter` }, /* @__PURE__ */ e.createElement(Vr, {
 		hasClearButton: !0,
 		id: "workspace-filter",
@@ -9507,12 +9507,12 @@ var fr = {
 		showLabel: !1,
 		type: "search"
 	})), /* @__PURE__ */ e.createElement("ul", {
-		className: Z([x, S]),
+		className: Z([S, C]),
 		role: "menu"
 	}, /* @__PURE__ */ e.createElement("li", {
 		className: `pds-dropdown__heading ${b}__item-heading`,
 		role: "presentation"
-	}, o), R.length === 0 ? /* @__PURE__ */ e.createElement("p", { className: "pds-dropdown__no-results" }, c) : R), B));
+	}, o), z.length === 0 ? /* @__PURE__ */ e.createElement("p", { className: "pds-dropdown__no-results" }, c) : z), V)));
 }, vi = {
 	info: "circleInfo",
 	warning: "triangleExclamation",
@@ -10428,13 +10428,13 @@ var fr = {
 		k(V),
 		A(V),
 		L(V)
-	]), q = U.arrow?.x ?? 0, te = U.arrow?.y ?? 0, ne = q + ea / 2, re = te + $i, { isMounted: ie } = R(V, {
+	]), q = U.arrow?.x ?? 0, te = U.arrow?.y ?? 0, ne = q + ea / 2, J = te + $i, { isMounted: re } = R(V, {
 		initial: { transform: "scale(0)" },
 		common: ({ side: e }) => ({ transformOrigin: {
 			top: `${ne}px calc(100% + ${$i}px)`,
 			bottom: `${ne}px -8px`,
-			left: `calc(100% + ${$i}px) ${re}px`,
-			right: `-8px ${re}px`
+			left: `calc(100% + ${$i}px) ${J}px`,
+			right: `-8px ${J}px`
 		}[e] })
 	});
 	return /* @__PURE__ */ e.createElement("div", {
@@ -10451,7 +10451,7 @@ var fr = {
 		className: `${P}__icon`,
 		iconName: _,
 		size: b
-	}))), ie && /* @__PURE__ */ e.createElement(x, null, /* @__PURE__ */ e.createElement(y, {
+	}))), re && /* @__PURE__ */ e.createElement(x, null, /* @__PURE__ */ e.createElement(y, {
 		context: V,
 		initialFocus: -1,
 		modal: o
@@ -10793,14 +10793,14 @@ var va = 24, ya = { droppable: { strategy: ve.Always } }, ba = a(function({ chil
 			};
 		}
 		return we(e, t);
-	}, [_]), W = b === "always" || b === "toggle" && (l ?? !1), { currentItems: G, expandItem: K, flatNodes: q, handleReorder: te, resetToSnapshot: ne, sortableIds: re, toggleExpand: ie } = ha({
+	}, [_]), W = b === "always" || b === "toggle" && (l ?? !1), { currentItems: G, expandItem: K, flatNodes: q, handleReorder: te, resetToSnapshot: ne, sortableIds: J, toggleExpand: re } = ha({
 		defaultItems: a,
 		isDragEnabled: W,
 		items: g,
 		onReorder: v
 	});
 	d(C, () => ({ resetToSnapshot: ne }), [ne]);
-	let J = Se(xe(ye, { activationConstraint: { distance: 5 } }), xe(_e, { coordinateGetter: ee })), Y = W ? `${w}--reorder-active` : null, X = p(() => new Set(q.filter((e) => u(e.data)).map((e) => e.id)), [q, u]), ae = p(() => new Set(q.filter((e) => f(e.data)).map((e) => e.id)), [q, f]), oe = s((e) => {
+	let ie = Se(xe(ye, { activationConstraint: { distance: 5 } }), xe(_e, { coordinateGetter: ee })), Y = W ? `${w}--reorder-active` : null, X = p(() => new Set(q.filter((e) => u(e.data)).map((e) => e.id)), [q, u]), ae = p(() => new Set(q.filter((e) => f(e.data)).map((e) => e.id)), [q, f]), oe = s((e) => {
 		if (_ === 0 || ae.has(String(e))) return !1;
 		let t = q.find((t) => t.id === e);
 		return !t || t.depth >= _ ? !1 : t.hasChildren ? !t.isExpanded : !0;
@@ -10844,8 +10844,8 @@ var va = 24, ya = { droppable: { strategy: ve.Always } }, ba = a(function({ chil
 		de
 	]), pe = 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]), me = s((e) => {
+		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));
+	}, [q, re]), me = s((e) => {
 		let t = be(e);
 		if (!t.length || !D.current || X.size === 0) return t;
 		let n = q.findIndex((e) => e.id === D.current);
@@ -10977,9 +10977,9 @@ var va = 24, ya = { droppable: { strategy: ve.Always } }, ba = a(function({ chil
 		onDragMove: Te,
 		onDragOver: ve,
 		onDragStart: pe,
-		sensors: J
+		sensors: ie
 	}, /* @__PURE__ */ e.createElement(Ce, {
-		items: re,
+		items: J,
 		strategy: se
 	}, /* @__PURE__ */ e.createElement("div", {
 		className: Z([
@@ -11003,7 +11003,7 @@ var va = 24, ya = { droppable: { strategy: ve.Always } }, ba = a(function({ chil
 			isDragging: t.id === T,
 			isExpanded: t.isExpanded,
 			isLocked: X.has(t.id),
-			toggleExpand: () => ie(t.id)
+			toggleExpand: () => re(t.id)
 		}, r = y(t.data, n), a = t.id === T, s = {
 			columns: i,
 			depth: t.depth,
@@ -11014,7 +11014,7 @@ var va = 24, ya = { droppable: { strategy: ve.Always } }, ba = a(function({ chil
 			isProjectedParent: t.id === fe && !ae.has(t.id),
 			isExpanded: t.isExpanded,
 			...X.has(t.id) ? { isLocked: !0 } : {},
-			onToggleExpand: () => ie(t.id),
+			onToggleExpand: () => re(t.id),
 			...a && !O && _ > 0 ? { projectedDepthDelta: de - t.depth } : {}
 		};
 		return o(r) ? e.cloneElement(r, {
@@ -11334,15 +11334,15 @@ var Sa = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		...i
 	}, /* @__PURE__ */ e.createElement("ol", { className: `${a}__steps` }, r && c));
 }, ka = ({ 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, J = re || T !== void 0 || F !== void 0, [Y, X] = h({
+	let K = "pds-table", q = u(), te = u(), ne = P !== void 0, J = A !== void 0, re = j !== void 0, ie = J || T !== void 0 || F !== void 0, [Y, X] = h({
 		key: a ?? "",
 		order: a === void 0 ? "asc" : o
-	}), [ae, oe] = 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 || oe(1);
+	}), [ae, oe] = h(1), [se, ce] = h(T ?? F?.[0] ?? 10), [le, ue] = h(null), de = C ?? le, fe = !!de && !!R, pe = J ? T ?? 10 : se, me = (e) => {
+		re ? j(e) : ce(e), J || oe(1);
 	};
 	l(() => {
-		re || oe(1);
-	}, [B.length, re]), l(() => {
+		J || oe(1);
+	}, [B.length, J]), 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), [
@@ -11372,7 +11372,7 @@ var Sa = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 				return Y.order === "asc" ? r : -r;
 			});
 		}
-		if (!re && J && pe) {
+		if (!J && ie && pe) {
 			let t = (ae - 1) * pe;
 			e = e.slice(t, t + pe);
 		}
@@ -11381,8 +11381,8 @@ var Sa = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		B,
 		Y,
 		ne,
-		re,
 		J,
+		ie,
 		ae,
 		pe,
 		w
@@ -11471,7 +11471,7 @@ var Sa = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 	})), /* @__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))))), J && !w && (re || B.length > 0) && /* @__PURE__ */ e.createElement("div", { className: "pds-table-wrapper__pagination" }, F && F.length > 0 && /* @__PURE__ */ e.createElement(Bn, {
+	})))) : /* @__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 && (J || B.length > 0) && /* @__PURE__ */ e.createElement("div", { className: "pds-table-wrapper__pagination" }, F && F.length > 0 && /* @__PURE__ */ e.createElement(Bn, {
 		autoWidth: !0,
 		id: q,
 		label: "Rows per page",
@@ -11484,10 +11484,10 @@ var Sa = ({ 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(Hi, {
-		currentPage: re ? i ?? 1 : ae,
+		currentPage: J ? i ?? 1 : ae,
 		itemsPerPage: pe,
-		onPageChange: re ? A : oe,
-		totalItemCount: re ? W ?? 0 : B.length
+		onPageChange: J ? A : oe,
+		totalItemCount: J ? 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(tn, {
 		ariaLabel: n,
 		onClick: Te,
@@ -11905,14 +11905,14 @@ var Sa = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 			r.disconnect(), i?.disconnect(), window.removeEventListener("resize", t);
 		};
 	}, [z]);
-	let q = Le(t), te = q.__unslotted, ne = q.header, re = q.footer, ie = q.sidebar, J = q.identity, Y = q["content-top"], X = q.navigation, ae = q["content-bottom"], oe = J || Y || X || ae, se = oe ? /* @__PURE__ */ e.createElement(e.Fragment, null, (J || o) && /* @__PURE__ */ e.createElement("div", { className: `${P}__sidebar-identity` }, J, o && !M && /* @__PURE__ */ e.createElement($t, {
+	let q = Le(t), te = q.__unslotted, ne = q.header, J = q.footer, re = q.sidebar, ie = q.identity, Y = q["content-top"], X = q.navigation, ae = q["content-bottom"], oe = ie || Y || X || ae, se = oe ? /* @__PURE__ */ e.createElement(e.Fragment, null, (ie || o) && /* @__PURE__ */ e.createElement("div", { className: `${P}__sidebar-identity` }, ie, o && !M && /* @__PURE__ */ e.createElement($t, {
 		hasBorder: !0,
 		ariaLabel: I.drawerToggle,
 		className: `${P}__drawer-toggle`,
 		iconName: "sidebar",
 		onClick: x,
 		size: "s"
-	})), Y && /* @__PURE__ */ e.createElement("div", { className: `${P}__sidebar-content-top` }, Y), X && /* @__PURE__ */ e.createElement("div", { className: `${P}__sidebar-navigation` }, X), ae && /* @__PURE__ */ e.createElement("div", { className: `${P}__sidebar-content-bottom` }, ae)) : ie, ce = i(v, {
+	})), Y && /* @__PURE__ */ e.createElement("div", { className: `${P}__sidebar-content-top` }, Y), X && /* @__PURE__ */ e.createElement("div", { className: `${P}__sidebar-navigation` }, X), ae && /* @__PURE__ */ e.createElement("div", { className: `${P}__sidebar-content-bottom` }, ae)) : re, ce = i(v, {
 		...b,
 		className: Z([`${P}__main`, b?.className]),
 		id: L,
@@ -11927,10 +11927,10 @@ var Sa = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 	}, te)), le = /* @__PURE__ */ e.createElement("div", {
 		className: `${P}__content-column`,
 		style: { backgroundColor: _ || void 0 }
-	}, ce, re && /* @__PURE__ */ e.createElement("div", { className: `${P}__footer` }, /* @__PURE__ */ e.createElement("div", {
+	}, ce, J && /* @__PURE__ */ e.createElement("div", { className: `${P}__footer` }, /* @__PURE__ */ e.createElement("div", {
 		className: `${P}__footer-inner`,
 		style: { maxWidth: R }
-	}, re))), ue = /* @__PURE__ */ e.createElement(e.Fragment, null, (ie || oe) && /* @__PURE__ */ e.createElement("div", {
+	}, J))), ue = /* @__PURE__ */ e.createElement(e.Fragment, null, (re || oe) && /* @__PURE__ */ e.createElement("div", {
 		...k,
 		className: Z([
 			`${P}__sidebar`,
@@ -12010,17 +12010,13 @@ var Sa = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		},
 		...l
 	}, /* @__PURE__ */ e.createElement("div", { className: `${u}__main` }, f.__unslotted || f.content), /* @__PURE__ */ e.createElement("div", { className: `${u}__side` }, f.sidebar));
-}, Ja = ({ children: t, className: n, ...r }) => {
-	let i = Le(t), a = i.stepper, o = i.form, s = m(null), [c] = me(s), l = c.width;
-	document.documentElement.style.setProperty("--stepper-layout-max-width", l + "px");
-	let u = "pds-stepper-layout";
-	return /* @__PURE__ */ e.createElement(ri, {
-		className: Z([u, n]),
-		...r
-	}, a && /* @__PURE__ */ e.createElement("div", {
-		ref: s,
-		className: `${u}__stepper-container`
-	}, a), o && /* @__PURE__ */ e.createElement("div", { className: `${u}__form-container` }, o));
+}, Ja = ({ children: t, className: n, hasPanel: r = !1, ...i }) => {
+	let a = Le(t), o = a.stepper, s = a.form, c = "pds-stepper-layout", l = /* @__PURE__ */ e.createElement(ri, {
+		className: Z([c, n]),
+		width: "wide",
+		...i
+	}, o && /* @__PURE__ */ e.createElement("div", { className: `${c}__stepper-container` }, o), s && /* @__PURE__ */ e.createElement("div", { className: `${c}__form-container` }, s));
+	return r ? /* @__PURE__ */ e.createElement(Ki, null, l) : l;
 }, Ya = ({ children: t, className: n, gridGap: r = "xl", verticalAlign: i = "start", ...a }) => {
 	let o = "pds-three-item-layout", s = r === "xl" ? "pds-grid" : `pds-grid pds-grid--gap-${r}`, c = `${o}--${i}`, l = Le(t), u = [
 		l["first-item"],