@leabankab/component-library 8.0.0 → 8.1.0

package/dist/dev-panel.mjs

@@ -1,62 +1,65 @@
 "use client";
-import { Braces as e, Check as t, ChevronRight as n, Copy as r, Minus as i, Plus as a, RotateCcw as o, Upload as s, X as c } from "lucide-react";
-import { Fragment as l, createContext as u, useCallback as d, useContext as f, useEffect as p, useId as m, useLayoutEffect as h, useMemo as g, useRef as _, useState as v } from "react";
-import { Button as y, IconButton as b, Text as x, createTranslation as S } from "./component-library.es.js";
-import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
-import { createPortal as E } from "react-dom";
+import { Braces as e, Check as t, ChevronRight as n, Copy as r, EyeOff as i, Minus as a, Plus as o, RotateCcw as s, Upload as c, X as l } from "lucide-react";
+import { Fragment as u, createContext as d, useCallback as f, useContext as p, useEffect as m, useId as h, useLayoutEffect as g, useMemo as _, useRef as v, useState as y } from "react";
+import { Button as b, IconButton as x, Text as S, createTranslation as C } from "./component-library.es.js";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+import { createPortal as D } from "react-dom";
 import './dev-panel.css';//#region \0rolldown/runtime.js
-var D = Object.defineProperty, O = (e, t) => {
+var O = Object.defineProperty, k = (e, t) => {
 	let n = {};
-	for (var r in e) D(n, r, {
+	for (var r in e) O(n, r, {
 		get: e[r],
 		enumerable: !0
 	});
-	return t || D(n, Symbol.toStringTag, { value: "Module" }), n;
-}, k = {
-	Badge: "_Badge_1o2qd_23",
-	SectionLabel: "_SectionLabel_1o2qd_24",
-	SectionMeta: "_SectionMeta_1o2qd_25",
-	FlowLabel: "_FlowLabel_1o2qd_26",
-	CountryCode: "_CountryCode_1o2qd_27",
-	StepLabel: "_StepLabel_1o2qd_28",
-	PayloadCode: "_PayloadCode_1o2qd_29",
-	DevPanel: "_DevPanel_1o2qd_38",
-	Header: "_Header_1o2qd_53",
-	HeaderTitle: "_HeaderTitle_1o2qd_65",
-	HeaderDot: "_HeaderDot_1o2qd_75",
-	Body: "_Body_1o2qd_105",
-	Section: "_Section_1o2qd_24",
-	SectionHeaderRow: "_SectionHeaderRow_1o2qd_123",
-	Flow: "_Flow_1o2qd_26",
-	FlowText: "_FlowText_1o2qd_165",
-	FlowSeparator: "_FlowSeparator_1o2qd_190",
-	SegmentedGroup: "_SegmentedGroup_1o2qd_203",
-	SegmentedOption: "_SegmentedOption_1o2qd_224",
-	ChipGroup: "_ChipGroup_1o2qd_276",
-	Chip: "_Chip_1o2qd_276",
-	ChipDot: "_ChipDot_1o2qd_315",
-	StepGrid: "_StepGrid_1o2qd_339",
-	StepButton: "_StepButton_1o2qd_345",
-	StepCircle: "_StepCircle_1o2qd_369",
-	StepFlagDot: "_StepFlagDot_1o2qd_411",
-	StepStateName: "_StepStateName_1o2qd_442",
-	StatusGrid: "_StatusGrid_1o2qd_451",
-	StatusCard: "_StatusCard_1o2qd_458",
-	StatusDot: "_StatusDot_1o2qd_517",
-	PayloadToggle: "_PayloadToggle_1o2qd_529",
-	PayloadToggleLabel: "_PayloadToggleLabel_1o2qd_549",
-	PayloadChevron: "_PayloadChevron_1o2qd_556",
-	PayloadPanel: "_PayloadPanel_1o2qd_580",
-	PayloadHeader: "_PayloadHeader_1o2qd_588",
-	Token: "_Token_1o2qd_623",
-	Flyout: "_Flyout_1o2qd_657",
-	FlyoutTitle: "_FlyoutTitle_1o2qd_671",
-	FlyoutFooter: "_FlyoutFooter_1o2qd_685",
-	FlyoutCopyButton: "_FlyoutCopyButton_1o2qd_692",
-	Footer: "_Footer_1o2qd_732",
-	OnDark: "_OnDark_1o2qd_760",
-	VisuallyHidden: "_VisuallyHidden_1o2qd_771"
-}, A = S({
+	return t || O(n, Symbol.toStringTag, { value: "Module" }), n;
+}, A = {
+	Badge: "_Badge_1xkno_23",
+	SectionLabel: "_SectionLabel_1xkno_24",
+	SectionMeta: "_SectionMeta_1xkno_25",
+	FlowLabel: "_FlowLabel_1xkno_26",
+	CountryCode: "_CountryCode_1xkno_27",
+	StepLabel: "_StepLabel_1xkno_28",
+	PayloadCode: "_PayloadCode_1xkno_29",
+	DevPanel: "_DevPanel_1xkno_38",
+	Header: "_Header_1xkno_53",
+	HeaderTitle: "_HeaderTitle_1xkno_65",
+	HeaderActions: "_HeaderActions_1xkno_75",
+	HeaderDot: "_HeaderDot_1xkno_82",
+	Handle: "_Handle_1xkno_112",
+	HideButton: "_HideButton_1xkno_191",
+	Body: "_Body_1xkno_197",
+	Section: "_Section_1xkno_24",
+	SectionHeaderRow: "_SectionHeaderRow_1xkno_215",
+	Flow: "_Flow_1xkno_26",
+	FlowText: "_FlowText_1xkno_257",
+	FlowSeparator: "_FlowSeparator_1xkno_282",
+	SegmentedGroup: "_SegmentedGroup_1xkno_295",
+	SegmentedOption: "_SegmentedOption_1xkno_316",
+	ChipGroup: "_ChipGroup_1xkno_368",
+	Chip: "_Chip_1xkno_368",
+	ChipDot: "_ChipDot_1xkno_407",
+	StepGrid: "_StepGrid_1xkno_431",
+	StepButton: "_StepButton_1xkno_437",
+	StepCircle: "_StepCircle_1xkno_461",
+	StepFlagDot: "_StepFlagDot_1xkno_503",
+	StepStateName: "_StepStateName_1xkno_534",
+	StatusGrid: "_StatusGrid_1xkno_543",
+	StatusCard: "_StatusCard_1xkno_550",
+	StatusDot: "_StatusDot_1xkno_609",
+	PayloadToggle: "_PayloadToggle_1xkno_621",
+	PayloadToggleLabel: "_PayloadToggleLabel_1xkno_641",
+	PayloadChevron: "_PayloadChevron_1xkno_648",
+	PayloadPanel: "_PayloadPanel_1xkno_672",
+	PayloadHeader: "_PayloadHeader_1xkno_680",
+	Token: "_Token_1xkno_715",
+	Flyout: "_Flyout_1xkno_749",
+	FlyoutTitle: "_FlyoutTitle_1xkno_763",
+	FlyoutFooter: "_FlyoutFooter_1xkno_777",
+	FlyoutCopyButton: "_FlyoutCopyButton_1xkno_784",
+	Footer: "_Footer_1xkno_824",
+	OnDark: "_OnDark_1xkno_852",
+	VisuallyHidden: "_VisuallyHidden_1xkno_863"
+}, j = C({
 	copy: {
 		no: "Kopier",
 		se: "Kopiera",
@@ -93,6 +96,18 @@ var D = Object.defineProperty, O = (e, t) => {
 		fi: "Laajenna",
 		es: "Expandir"
 	},
+	hide: {
+		no: "Skjul",
+		se: "Dölj",
+		fi: "Piilota",
+		es: "Ocultar"
+	},
+	show: {
+		no: "Vis",
+		se: "Visa",
+		fi: "Näytä",
+		es: "Mostrar"
+	},
 	step: {
 		no: "Steg",
 		se: "Steg",
@@ -123,82 +138,167 @@ var D = Object.defineProperty, O = (e, t) => {
 		fi: "vaatii huomiota",
 		es: "requiere atención"
 	}
-}), j = (...e) => e.filter(Boolean).join(" "), M = u(void 0);
-function N() {
-	return f(M);
+}), M = (...e) => e.filter(Boolean).join(" "), N = d(void 0);
+function P() {
+	return p(N);
 }
-function P({ title: e = "Dev controls", badge: t, showStatusDot: n = !0, minimisable: r = !0, minimised: o, defaultMinimised: s = !1, onMinimisedChange: c, minimiseLabel: l, expandLabel: u, children: d, className: f, style: p }) {
-	let h = A(), g = o !== void 0, [_, y] = v(s), x = g ? o : _, S = () => {
-		let e = !x;
-		g || y(e), c?.(e);
-	}, C = m();
-	return /* @__PURE__ */ T("div", {
+var F = d(null), I = "(max-width: 599.95px)", L = () => typeof navigator < "u" && /mac|iphone|ipad/i.test(navigator.platform || navigator.userAgent);
+function R(e, t) {
+	let n = t.split("+").map((e) => e.trim().toLowerCase()), r = n.pop();
+	if (!r) return !1;
+	let i = n.includes("mod"), a = {
+		ctrl: n.includes("ctrl") || i && !L(),
+		meta: n.includes("meta") || i && L(),
+		alt: n.includes("alt"),
+		shift: n.includes("shift")
+	};
+	return e.ctrlKey !== a.ctrl || e.metaKey !== a.meta || e.altKey !== a.alt || e.shiftKey !== a.shift ? !1 : e.key.toLowerCase() === r || e.code.toLowerCase() === `key${r}` || e.code.toLowerCase() === `digit${r}`;
+}
+function z({ title: e = "Dev controls", badge: t, showStatusDot: n = !0, minimisable: r = !0, minimised: s, defaultMinimised: c, onMinimisedChange: l, minimiseLabel: u, expandLabel: d, hidden: f, defaultHidden: p, onHiddenChange: g, hideable: _ = f !== void 0 || p !== void 0, shortcut: b = "Mod+Shift+D", handle: S, hideLabel: C, children: w, className: D, style: O }) {
+	let k = j(), N = s !== void 0, [P, L] = y(c ?? !1), z = N ? s : P, [B, H] = y(p ?? !1), U = _ && (f ?? B), W = v(null), G = v(null), K = v(null), q = v(null), J = () => {
+		let e = !z;
+		N || L(e), l?.(e);
+	}, Y = (e) => {
+		f === void 0 && H(e), g?.(e);
+	};
+	m(() => {
+		_ && !N && c === void 0 && typeof window < "u" && window.matchMedia?.(I).matches && L(!0);
+	}, []), m(() => {
+		let e = q.current;
+		q.current = null, e === "handle" && G.current?.focus(), e === "panel" && K.current?.focus();
+	});
+	let X = v({
+		isHidden: U,
+		setHiddenState: Y
+	});
+	X.current = {
+		isHidden: U,
+		setHiddenState: Y
+	}, m(() => {
+		if (!_ || b === !1) return;
+		let e = (e) => {
+			if (e.repeat || !R(e, b)) return;
+			e.preventDefault();
+			let { isHidden: t, setHiddenState: n } = X.current, r = document.activeElement;
+			!t && W.current?.contains(r) && (q.current = "handle"), t && r != null && r === G.current && (q.current = "panel"), n(!t);
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [_, b]);
+	let Z = h();
+	return U ? /* @__PURE__ */ T(F.Provider, {
+		value: {
+			show: () => {
+				q.current = "panel", Y(!1);
+			},
+			title: e,
+			handleRef: G
+		},
+		children: S ?? /* @__PURE__ */ T(V, {})
+	}) : /* @__PURE__ */ E("div", {
+		ref: W,
 		"data-dev-panel-root": "",
-		className: j(k.DevPanel, f),
-		style: p,
-		children: [/* @__PURE__ */ T("header", {
-			className: k.Header,
-			children: [/* @__PURE__ */ T("span", {
-				className: k.HeaderTitle,
+		"data-hideable": _ ? "" : void 0,
+		"data-minimised": z ? "" : void 0,
+		className: M(A.DevPanel, D),
+		style: O,
+		children: [/* @__PURE__ */ E("header", {
+			className: A.Header,
+			children: [/* @__PURE__ */ E("span", {
+				className: A.HeaderTitle,
 				children: [
-					n && /* @__PURE__ */ w("span", {
-						className: k.HeaderDot,
+					n && /* @__PURE__ */ T("span", {
+						className: A.HeaderDot,
 						"aria-hidden": !0
 					}),
-					/* @__PURE__ */ w("span", { children: e }),
-					t != null && /* @__PURE__ */ w("span", {
-						className: k.Badge,
+					/* @__PURE__ */ T("span", { children: e }),
+					t != null && /* @__PURE__ */ T("span", {
+						className: A.Badge,
 						children: t
 					})
 				]
-			}), r && /* @__PURE__ */ w(b, {
-				"aria-label": x ? u ?? h.expand : l ?? h.minimise,
-				"aria-expanded": !x,
-				"aria-controls": C,
-				onClick: S,
-				variant: "outline",
-				color: "secondary",
-				size: "sm",
-				children: w(x ? a : i, {
-					size: 18,
-					"aria-hidden": !0
-				})
+			}), /* @__PURE__ */ E("span", {
+				className: A.HeaderActions,
+				children: [_ && /* @__PURE__ */ T(x, {
+					ref: K,
+					className: A.HideButton,
+					"aria-label": C ?? k.hide,
+					onClick: () => {
+						q.current = "handle", Y(!0);
+					},
+					variant: "outline",
+					color: "secondary",
+					size: "sm",
+					children: /* @__PURE__ */ T(i, {
+						size: 18,
+						"aria-hidden": !0
+					})
+				}), r && /* @__PURE__ */ T(x, {
+					"aria-label": z ? d ?? k.expand : u ?? k.minimise,
+					"aria-expanded": !z,
+					"aria-controls": Z,
+					onClick: J,
+					variant: "outline",
+					color: "secondary",
+					size: "sm",
+					children: T(z ? o : a, {
+						size: 18,
+						"aria-hidden": !0
+					})
+				})]
 			})]
-		}), !x && /* @__PURE__ */ w("div", {
-			id: C,
-			className: k.Body,
-			children: d
+		}), !z && /* @__PURE__ */ T("div", {
+			id: Z,
+			className: A.Body,
+			children: w
 		})]
 	});
 }
-function F({ label: e, meta: t, children: n, className: r, style: i }) {
-	let a = m();
-	return /* @__PURE__ */ T("section", {
+function B({ label: e, meta: t, children: n, className: r, style: i }) {
+	let a = h();
+	return /* @__PURE__ */ E("section", {
 		"aria-labelledby": a,
-		className: j(k.Section, r),
+		className: M(A.Section, r),
 		style: i,
-		children: [/* @__PURE__ */ T("div", {
-			className: k.SectionHeaderRow,
-			children: [/* @__PURE__ */ w("span", {
+		children: [/* @__PURE__ */ E("div", {
+			className: A.SectionHeaderRow,
+			children: [/* @__PURE__ */ T("span", {
 				id: a,
-				className: k.SectionLabel,
+				className: A.SectionLabel,
 				children: e
-			}), t != null && /* @__PURE__ */ w("span", {
-				className: k.SectionMeta,
+			}), t != null && /* @__PURE__ */ T("span", {
+				className: A.SectionMeta,
 				children: t
 			})]
-		}), /* @__PURE__ */ w(M.Provider, {
+		}), /* @__PURE__ */ T(N.Provider, {
 			value: a,
 			children: n
 		})]
 	});
 }
+function V({ side: e = "right", label: t, className: n, style: r }) {
+	let i = j(), a = p(F);
+	if (!a) return null;
+	let o = t ?? a.title;
+	return /* @__PURE__ */ E("button", {
+		ref: a.handleRef,
+		type: "button",
+		className: M(A.Handle, n),
+		style: r,
+		"data-side": e,
+		"aria-label": typeof o == "string" ? `${i.show} ${o}` : void 0,
+		onClick: a.show,
+		children: [/* @__PURE__ */ T("span", {
+			className: A.HeaderDot,
+			"aria-hidden": !0
+		}), /* @__PURE__ */ T("span", { children: o })]
+	});
+}
 //#endregion
 //#region src/dev-panel/use-roving-radio.ts
-function I({ values: e, selected: t, onSelect: n, isDisabled: r }) {
-	let i = _([]), a = d((t) => r?.(e[t], t) ?? !1, [r, e]), o = e.findIndex((e) => e === t), s = e.findIndex((e, t) => !a(t)), c = o >= 0 && !a(o) ? o : s, l = d((t) => {
+function H({ values: e, selected: t, onSelect: n, isDisabled: r }) {
+	let i = v([]), a = f((t) => r?.(e[t], t) ?? !1, [r, e]), o = e.findIndex((e) => e === t), s = e.findIndex((e, t) => !a(t)), c = o >= 0 && !a(o) ? o : s, l = f((t) => {
 		i.current[t]?.focus(), n(e[t]);
-	}, [n, e]), u = d((t, n) => {
+	}, [n, e]), u = f((t, n) => {
 		let r = e.length;
 		for (let e = 1; e <= r; e += 1) {
 			let i = (t + n * e + r * e) % r;
@@ -206,7 +306,7 @@ function I({ values: e, selected: t, onSelect: n, isDisabled: r }) {
 		}
 		return t;
 	}, [a, e.length]);
-	return { getItemProps: d((r) => {
+	return { getItemProps: f((r) => {
 		let o = e[r], s = a(r);
 		return {
 			ref: (e) => {
@@ -252,49 +352,49 @@ function I({ values: e, selected: t, onSelect: n, isDisabled: r }) {
 }
 //#endregion
 //#region src/dev-panel/segmented-control.tsx
-function L({ value: e, onChange: t, options: n, variant: r = "pill", "aria-label": i, "aria-labelledby": a }) {
-	let o = N(), s = a ?? (i ? void 0 : o), { getItemProps: c } = I({
+function U({ value: e, onChange: t, options: n, variant: r = "pill", "aria-label": i, "aria-labelledby": a }) {
+	let o = P(), s = a ?? (i ? void 0 : o), { getItemProps: c } = H({
 		values: n.map((e) => e.value),
 		selected: e,
 		onSelect: t,
 		isDisabled: (e, t) => n[t]?.disabled ?? !1
 	}), l = r === "chip";
-	return /* @__PURE__ */ w("div", {
+	return /* @__PURE__ */ T("div", {
 		role: "radiogroup",
 		"aria-label": i,
 		"aria-labelledby": s,
-		className: l ? k.ChipGroup : k.SegmentedGroup,
+		className: l ? A.ChipGroup : A.SegmentedGroup,
 		children: n.map((e, t) => {
 			let { onKeyDown: n, ...r } = c(t);
-			return /* @__PURE__ */ T("button", {
+			return /* @__PURE__ */ E("button", {
 				type: "button",
 				"data-disabled": e.disabled ? "" : void 0,
 				onKeyDown: n,
 				...r,
-				className: l ? k.Chip : k.SegmentedOption,
-				children: [l ? /* @__PURE__ */ w("span", {
-					className: k.ChipDot,
+				className: l ? A.Chip : A.SegmentedOption,
+				children: [l ? /* @__PURE__ */ T("span", {
+					className: A.ChipDot,
 					"aria-hidden": !0
-				}) : e.icon, /* @__PURE__ */ w("span", { children: e.label })]
+				}) : e.icon, /* @__PURE__ */ T("span", { children: e.label })]
 			}, e.value);
 		})
 	});
 }
 //#endregion
 //#region src/dev-panel/dev-panel-country.tsx
-function R({ value: e, onChange: t, options: n, label: r = "Country" }) {
+function W({ value: e, onChange: t, options: n, label: r = "Country" }) {
 	let i = n.map((e) => ({
 		value: e.value,
 		disabled: e.disabled,
 		label: e.label,
-		icon: e.code == null ? void 0 : /* @__PURE__ */ w("span", {
-			className: k.CountryCode,
+		icon: e.code == null ? void 0 : /* @__PURE__ */ T("span", {
+			className: A.CountryCode,
 			children: e.code
 		})
 	}));
-	return /* @__PURE__ */ w(F, {
+	return /* @__PURE__ */ T(B, {
 		label: r,
-		children: /* @__PURE__ */ w(L, {
+		children: /* @__PURE__ */ T(U, {
 			value: e,
 			onChange: t,
 			options: i
@@ -303,15 +403,15 @@ function R({ value: e, onChange: t, options: n, label: r = "Country" }) {
 }
 //#endregion
 //#region src/dev-panel/dev-panel-variant.tsx
-function z({ value: e, onChange: t, options: n, label: r = "Variant" }) {
+function G({ value: e, onChange: t, options: n, label: r = "Variant" }) {
 	let i = n.map((e) => ({
 		value: e.value,
 		label: e.label,
 		disabled: e.disabled
 	}));
-	return /* @__PURE__ */ w(F, {
+	return /* @__PURE__ */ T(B, {
 		label: r,
-		children: /* @__PURE__ */ w(L, {
+		children: /* @__PURE__ */ T(U, {
 			value: e,
 			onChange: t,
 			options: i
@@ -320,15 +420,15 @@ function z({ value: e, onChange: t, options: n, label: r = "Variant" }) {
 }
 //#endregion
 //#region src/dev-panel/dev-panel-step-state.tsx
-function B({ value: e, onChange: t, options: n, label: r = "Step state", stepLabel: i, variationsLabel: a = "Variations for" }) {
+function K({ value: e, onChange: t, options: n, label: r = "Step state", stepLabel: i, variationsLabel: a = "Variations for" }) {
 	let o = n.map((e) => ({
 		value: e.value,
 		label: e.label,
 		disabled: e.disabled
 	}));
-	return /* @__PURE__ */ T(F, {
+	return /* @__PURE__ */ E(B, {
 		label: r,
-		children: [i != null && /* @__PURE__ */ T(x, {
+		children: [i != null && /* @__PURE__ */ E(S, {
 			textStyle: "body-sm",
 			style: {
 				color: "var(--lea-color-neutral-600)",
@@ -337,12 +437,12 @@ function B({ value: e, onChange: t, options: n, label: r = "Step state", stepLab
 			children: [
 				a,
 				" ",
-				/* @__PURE__ */ w("span", {
-					className: k.StepStateName,
+				/* @__PURE__ */ T("span", {
+					className: A.StepStateName,
 					children: i
 				})
 			]
-		}), /* @__PURE__ */ w(L, {
+		}), /* @__PURE__ */ T(U, {
 			value: e,
 			onChange: t,
 			options: o,
@@ -352,19 +452,19 @@ function B({ value: e, onChange: t, options: n, label: r = "Step state", stepLab
 }
 //#endregion
 //#region src/dev-panel/dev-panel-steps.tsx
-var V = (e, t) => {
+var q = (e, t) => {
 	switch (e) {
 		case "complete": return t.statusCompleted;
 		case "current": return t.statusCurrent;
 		default: return t.statusUpcoming;
 	}
 };
-function H({ steps: e, currentStep: t, onStepSelect: n, label: r = "Jump to step", showCount: i = !0, columns: a = 4 }) {
-	let o = A(), s = e.length, c = i && t != null ? `${t} / ${s}` : void 0;
-	return /* @__PURE__ */ w(F, {
+function J({ steps: e, currentStep: t, onStepSelect: n, label: r = "Jump to step", showCount: i = !0, columns: a = 4 }) {
+	let o = j(), s = e.length, c = i && t != null ? `${t} / ${s}` : void 0;
+	return /* @__PURE__ */ T(B, {
 		label: r,
 		meta: c,
-		children: /* @__PURE__ */ w(U, {
+		children: /* @__PURE__ */ T(Y, {
 			steps: e,
 			currentStep: t,
 			onStepSelect: n,
@@ -373,49 +473,49 @@ function H({ steps: e, currentStep: t, onStepSelect: n, label: r = "Jump to step
 		})
 	});
 }
-function U({ steps: e, currentStep: n, onStepSelect: r, columns: i, t: a }) {
-	let o = N();
-	return /* @__PURE__ */ w("div", {
+function Y({ steps: e, currentStep: n, onStepSelect: r, columns: i, t: a }) {
+	let o = P();
+	return /* @__PURE__ */ T("div", {
 		role: "group",
 		"aria-labelledby": o,
-		className: k.StepGrid,
+		className: A.StepGrid,
 		style: { "--_columns": i },
 		children: e.map((e, i) => {
 			let o = i + 1, s = e.status ?? (n == null ? "upcoming" : o < n ? "complete" : o === n ? "current" : "upcoming"), c = s === "current", l = s === "complete";
-			return /* @__PURE__ */ T("button", {
+			return /* @__PURE__ */ E("button", {
 				type: "button",
 				"aria-current": c ? "step" : void 0,
 				"data-state": s,
 				"data-disabled": e.disabled ? "" : void 0,
 				disabled: e.disabled,
 				onClick: () => r?.(o, e),
-				className: k.StepButton,
+				className: A.StepButton,
 				children: [
-					/* @__PURE__ */ T("span", {
-						className: k.StepCircle,
+					/* @__PURE__ */ E("span", {
+						className: A.StepCircle,
 						children: [
-							/* @__PURE__ */ w("span", {
-								className: k.VisuallyHidden,
+							/* @__PURE__ */ T("span", {
+								className: A.VisuallyHidden,
 								children: l ? `${a.step} ${o}` : `${a.step} `
 							}),
-							l ? /* @__PURE__ */ w(t, {
+							l ? /* @__PURE__ */ T(t, {
 								size: 18,
 								"aria-hidden": !0
 							}) : o,
-							e.flagged && /* @__PURE__ */ w("span", {
-								className: k.StepFlagDot,
+							e.flagged && /* @__PURE__ */ T("span", {
+								className: A.StepFlagDot,
 								"aria-hidden": !0
 							})
 						]
 					}),
 					" ",
-					/* @__PURE__ */ w("span", {
-						className: k.StepLabel,
+					/* @__PURE__ */ T("span", {
+						className: A.StepLabel,
 						children: e.label
 					}),
-					/* @__PURE__ */ w("span", {
-						className: k.VisuallyHidden,
-						children: `(${V(s, a)}${e.flagged ? `, ${a.needsAttention}` : ""})`
+					/* @__PURE__ */ T("span", {
+						className: A.VisuallyHidden,
+						children: `(${q(s, a)}${e.flagged ? `, ${a.needsAttention}` : ""})`
 					})
 				]
 			}, o);
@@ -424,98 +524,98 @@ function U({ steps: e, currentStep: n, onStepSelect: r, columns: i, t: a }) {
 }
 //#endregion
 //#region src/dev-panel/dev-panel-status.tsx
-function W({ value: e, onChange: t, options: n, label: r = "Application status" }) {
-	return /* @__PURE__ */ w(F, {
+function X({ value: e, onChange: t, options: n, label: r = "Application status" }) {
+	return /* @__PURE__ */ T(B, {
 		label: r,
-		children: /* @__PURE__ */ w(G, {
+		children: /* @__PURE__ */ T(Z, {
 			value: e,
 			onChange: t,
 			options: n
 		})
 	});
 }
-function G({ value: e, onChange: t, options: n }) {
-	let r = N(), { getItemProps: i } = I({
+function Z({ value: e, onChange: t, options: n }) {
+	let r = P(), { getItemProps: i } = H({
 		values: n.map((e) => e.value),
 		selected: e,
 		onSelect: t,
 		isDisabled: (e, t) => n[t]?.disabled ?? !1
 	});
-	return /* @__PURE__ */ w("div", {
+	return /* @__PURE__ */ T("div", {
 		role: "radiogroup",
 		"aria-labelledby": r,
-		className: k.StatusGrid,
+		className: A.StatusGrid,
 		children: n.map((e, t) => {
 			let { onKeyDown: n, ...r } = i(t);
-			return /* @__PURE__ */ T("button", {
+			return /* @__PURE__ */ E("button", {
 				type: "button",
 				"data-color": e.color ?? "neutral",
 				"data-disabled": e.disabled ? "" : void 0,
 				onKeyDown: n,
 				...r,
-				className: k.StatusCard,
-				children: [/* @__PURE__ */ w("span", {
-					className: k.StatusDot,
+				className: A.StatusCard,
+				children: [/* @__PURE__ */ T("span", {
+					className: A.StatusDot,
 					"aria-hidden": !0
-				}), /* @__PURE__ */ w("span", { children: e.label })]
+				}), /* @__PURE__ */ T("span", { children: e.label })]
 			}, e.value);
 		})
 	});
 }
 //#endregion
 //#region src/dev-panel/use-copy.ts
-function K() {
-	let [e, t] = v(!1), n = _(void 0), r = d(async (e) => {
+function Q() {
+	let [e, t] = y(!1), n = v(void 0), r = f(async (e) => {
 		try {
 			await navigator.clipboard?.writeText(e);
 		} catch {}
 		t(!0), clearTimeout(n.current), n.current = setTimeout(() => t(!1), 2e3);
 	}, []);
-	return p(() => () => clearTimeout(n.current), []), {
+	return m(() => () => clearTimeout(n.current), []), {
 		copied: e,
 		copy: r
 	};
 }
 //#endregion
 //#region src/dev-panel/dev-panel-flow.tsx
-var q = (e) => typeof e == "string" || typeof e == "number" ? String(e) : null;
-function J({ flowId: e, process: n, variant: i, label: a = "Flow", showCopy: o = !0, copyValue: s, copyLabel: c, onCopy: u }) {
-	let d = A(), { copied: f, copy: p } = K(), m = [
+var ee = (e) => typeof e == "string" || typeof e == "number" ? String(e) : null;
+function te({ flowId: e, process: n, variant: i, label: a = "Flow", showCopy: o = !0, copyValue: s, copyLabel: c, onCopy: l }) {
+	let d = j(), { copied: f, copy: p } = Q(), m = [
 		e,
 		n,
 		i
-	].filter((e) => e != null), h = m.map(q).filter((e) => e != null).join(" · "), g = s ?? h;
-	return /* @__PURE__ */ T("div", {
-		className: k.Flow,
+	].filter((e) => e != null), h = m.map(ee).filter((e) => e != null).join(" · "), g = s ?? h;
+	return /* @__PURE__ */ E("div", {
+		className: A.Flow,
 		children: [
-			/* @__PURE__ */ T("div", {
-				className: k.FlowText,
-				children: [/* @__PURE__ */ w("span", {
-					className: k.FlowLabel,
+			/* @__PURE__ */ E("div", {
+				className: A.FlowText,
+				children: [/* @__PURE__ */ T("span", {
+					className: A.FlowLabel,
 					children: a
-				}), /* @__PURE__ */ w("span", { children: m.map((e, t) => /* @__PURE__ */ T(l, { children: [t > 0 && /* @__PURE__ */ w("span", {
+				}), /* @__PURE__ */ T("span", { children: m.map((e, t) => /* @__PURE__ */ E(u, { children: [t > 0 && /* @__PURE__ */ T("span", {
 					"aria-hidden": !0,
-					className: k.FlowSeparator,
+					className: A.FlowSeparator,
 					children: "·"
 				}), e] }, t)) })]
 			}),
-			o && /* @__PURE__ */ w(b, {
+			o && /* @__PURE__ */ T(x, {
 				"aria-label": c ?? d.copy,
 				onClick: async () => {
-					await p(g), u?.();
+					await p(g), l?.();
 				},
 				variant: "outline",
 				color: "secondary",
 				size: "sm",
-				children: w(f ? t : r, {
+				children: T(f ? t : r, {
 					size: 16,
 					"aria-hidden": !0
 				})
 			}),
-			/* @__PURE__ */ w("span", {
+			/* @__PURE__ */ T("span", {
 				role: "status",
 				"aria-live": "polite",
-				className: k.VisuallyHidden,
+				className: A.VisuallyHidden,
 				children: f ? d.copied : ""
 			})
 		]
@@ -523,18 +623,18 @@ function J({ flowId: e, process: n, variant: i, label: a = "Flow", showCopy: o =
 }
 //#endregion
 //#region src/dev-panel/json-highlight.tsx
-var Y = /"(?:\\.|[^"\\])*"|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|\b(?:true|false|null)\b/g, X = (e) => e === " " || e === "	" || e === "\n" || e === "\r";
-function Z(e, t, n) {
+var ne = /"(?:\\.|[^"\\])*"|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|\b(?:true|false|null)\b/g, re = (e) => e === " " || e === "	" || e === "\n" || e === "\r";
+function ie(e, t, n) {
 	if (e[0] === "\"") {
 		let e = n;
-		for (; e < t.length && X(t[e]);) e += 1;
+		for (; e < t.length && re(t[e]);) e += 1;
 		return t[e] === ":" ? "key" : "string";
 	}
 	return e === "true" || e === "false" ? "boolean" : e === "null" ? "null" : "number";
 }
-function ee(e) {
+function ae(e) {
 	let t = [], n = 0;
-	for (let r of e.matchAll(Y)) {
+	for (let r of e.matchAll(ne)) {
 		let i = r.index ?? 0;
 		i > n && t.push({
 			type: "punctuation",
@@ -542,7 +642,7 @@ function ee(e) {
 		});
 		let a = r[0];
 		t.push({
-			type: Z(a, e, i + a.length),
+			type: ie(a, e, i + a.length),
 			value: a
 		}), n = i + a.length;
 	}
@@ -551,7 +651,7 @@ function ee(e) {
 		value: e.slice(n)
 	}), t;
 }
-function te(e) {
+function oe(e) {
 	if (typeof e != "string") return e != null;
 	let t = e.trim();
 	if (!t) return !1;
@@ -561,37 +661,37 @@ function te(e) {
 		return !1;
 	}
 }
-function ne({ code: e }) {
-	let t = g(() => ee(e), [e]);
-	return /* @__PURE__ */ w(C, { children: t.map((e, t) => /* @__PURE__ */ w("span", {
-		className: k.Token,
+function se({ code: e }) {
+	let t = _(() => ae(e), [e]);
+	return /* @__PURE__ */ T(w, { children: t.map((e, t) => /* @__PURE__ */ T("span", {
+		className: A.Token,
 		"data-token": e.type,
 		children: e.value
 	}, t)) });
 }
 //#endregion
 //#region src/dev-panel/dev-panel-payload.tsx
-var Q = {
+var ce = {
 	"--button-fg": "var(--lea-palette-text-contrast)",
 	"--button-border": "var(--lea-palette-border-contrast)",
 	"--button-tint": "var(--lea-color-neutral-800)"
-}, re = (e) => {
+}, le = (e) => {
 	if (typeof e == "string") return e;
 	try {
 		return JSON.stringify(e, null, 2);
 	} catch {
 		return String(e);
 	}
-}, ie = typeof window < "u" ? h : p, $ = 12, ae = 420, oe = 280;
-function se({ value: i, label: a = "Payload preview", title: o, placement: s = "inline", badge: l, open: u, defaultOpen: f = !1, onOpenChange: h, copyLabel: g, copyJsonLabel: y, closeLabel: x, highlight: S = !0 }) {
-	let C = A(), { copied: D, copy: O } = K(), j = u !== void 0, [M, N] = v(f), P = j ? u : M, F = m(), I = m(), L = s === "side", R = _(null), z = _(null), [B, V] = v(null), [H, U] = v(null);
-	p(() => U(document.body), []);
-	let W = d((e) => {
-		j || N(e), h?.(e);
-	}, [j, h]), G = re(i), q = S && te(i) ? /* @__PURE__ */ w(ne, { code: G }) : G, J = d(() => {
+}, ue = typeof window < "u" ? g : m, $ = 12, de = 420, fe = 280;
+function pe({ value: i, label: a = "Payload preview", title: o, placement: s = "inline", badge: c, open: u, defaultOpen: d = !1, onOpenChange: p, copyLabel: g, copyJsonLabel: _, closeLabel: b, highlight: S = !0 }) {
+	let C = j(), { copied: w, copy: O } = Q(), k = u !== void 0, [M, N] = y(d), P = k ? u : M, F = h(), I = h(), L = s === "side", R = v(null), z = v(null), [B, V] = y(null), [H, U] = y(null);
+	m(() => U(document.body), []);
+	let W = f((e) => {
+		k || N(e), p?.(e);
+	}, [k, p]), G = le(i), K = S && oe(i) ? /* @__PURE__ */ T(se, { code: G }) : G, q = f(() => {
 		let e = R.current?.closest("[data-dev-panel-root]") ?? R.current;
 		if (!e) return;
-		let t = e.getBoundingClientRect(), n = Math.min(ae, Math.max(oe, t.width)), r = t.left - n - $;
+		let t = e.getBoundingClientRect(), n = Math.min(de, Math.max(fe, t.width)), r = t.left - n - $;
 		r < $ && (r = Math.min(t.right + $, window.innerWidth - n - $));
 		let i = Math.min(t.height, window.innerHeight - 24), a = Math.min(Math.max($, t.top), window.innerHeight - $ - i);
 		V({
@@ -601,21 +701,21 @@ function se({ value: i, label: a = "Payload preview", title: o, placement: s = "
 			height: i
 		});
 	}, []);
-	ie(() => {
+	ue(() => {
 		if (!L || !P) return;
-		J();
-		let e = () => J();
+		q();
+		let e = () => q();
 		return window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
 			window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
 		};
 	}, [
 		L,
 		P,
-		J
+		q
 	]);
-	let Y = B !== null;
-	p(() => {
-		if (!L || !P || !H || !Y) return;
+	let J = B !== null;
+	m(() => {
+		if (!L || !P || !H || !J) return;
 		let e = z.current, t = R.current, n = () => Array.from(e?.querySelectorAll("button, [href], input, textarea, select, [tabindex]:not([tabindex=\"-1\"])") ?? []).filter((e) => !e.hasAttribute("disabled"));
 		(n()[0] ?? e)?.focus();
 		let r = (t) => {
@@ -642,64 +742,64 @@ function se({ value: i, label: a = "Payload preview", title: o, placement: s = "
 		L,
 		P,
 		H,
-		Y,
+		J,
 		W
 	]);
-	let X = /* @__PURE__ */ w(b, {
+	let Y = /* @__PURE__ */ T(x, {
 		"aria-label": g ?? C.copy,
 		onClick: () => O(G),
 		variant: "outline",
 		color: "secondary",
 		size: "sm",
-		className: k.OnDark,
-		style: Q,
-		children: w(D ? t : r, {
+		className: A.OnDark,
+		style: ce,
+		children: T(w ? t : r, {
 			size: 16,
 			"aria-hidden": !0
 		})
 	});
-	return /* @__PURE__ */ T("div", { children: [
-		/* @__PURE__ */ T("button", {
+	return /* @__PURE__ */ E("div", { children: [
+		/* @__PURE__ */ E("button", {
 			ref: R,
 			type: "button",
 			"aria-expanded": P,
 			"aria-controls": F,
 			"data-placement": s,
 			onClick: () => W(!P),
-			className: k.PayloadToggle,
-			children: [/* @__PURE__ */ T("span", {
-				className: k.PayloadToggleLabel,
-				children: [/* @__PURE__ */ w(e, {
+			className: A.PayloadToggle,
+			children: [/* @__PURE__ */ E("span", {
+				className: A.PayloadToggleLabel,
+				children: [/* @__PURE__ */ T(e, {
 					size: 16,
 					"aria-hidden": !0
 				}), a]
-			}), /* @__PURE__ */ w("span", {
-				className: k.PayloadChevron,
-				children: /* @__PURE__ */ w(n, {
+			}), /* @__PURE__ */ T("span", {
+				className: A.PayloadChevron,
+				children: /* @__PURE__ */ T(n, {
 					size: 16,
 					"aria-hidden": !0
 				})
 			})]
 		}),
-		!L && P && /* @__PURE__ */ T("div", {
+		!L && P && /* @__PURE__ */ E("div", {
 			id: F,
-			className: k.PayloadPanel,
-			children: [/* @__PURE__ */ T("div", {
-				className: k.PayloadHeader,
-				children: [/* @__PURE__ */ w("span", { children: o ?? a }), X]
-			}), /* @__PURE__ */ w("pre", {
+			className: A.PayloadPanel,
+			children: [/* @__PURE__ */ E("div", {
+				className: A.PayloadHeader,
+				children: [/* @__PURE__ */ T("span", { children: o ?? a }), Y]
+			}), /* @__PURE__ */ T("pre", {
 				tabIndex: 0,
-				className: k.PayloadCode,
-				children: q
+				className: A.PayloadCode,
+				children: K
 			})]
 		}),
-		L && P && H && E(/* @__PURE__ */ T("div", {
+		L && P && H && D(/* @__PURE__ */ E("div", {
 			ref: z,
 			id: F,
 			role: "dialog",
 			"aria-labelledby": I,
 			tabIndex: -1,
-			className: k.Flyout,
+			className: A.Flyout,
 			style: B ? {
 				top: B.top,
 				left: B.left,
@@ -707,89 +807,89 @@ function se({ value: i, label: a = "Payload preview", title: o, placement: s = "
 				height: B.height
 			} : { visibility: "hidden" },
 			children: [
-				/* @__PURE__ */ T("div", {
-					className: k.PayloadHeader,
-					children: [/* @__PURE__ */ T("span", {
-						className: k.FlyoutTitle,
-						children: [/* @__PURE__ */ w("span", {
+				/* @__PURE__ */ E("div", {
+					className: A.PayloadHeader,
+					children: [/* @__PURE__ */ E("span", {
+						className: A.FlyoutTitle,
+						children: [/* @__PURE__ */ T("span", {
 							id: I,
 							children: o ?? a
-						}), l != null && /* @__PURE__ */ w("span", {
-							className: k.Badge,
+						}), c != null && /* @__PURE__ */ T("span", {
+							className: A.Badge,
 							"data-on-dark": "",
-							children: l
+							children: c
 						})]
-					}), /* @__PURE__ */ w(b, {
-						"aria-label": x ?? C.close,
+					}), /* @__PURE__ */ T(x, {
+						"aria-label": b ?? C.close,
 						onClick: () => W(!1),
 						variant: "outline",
 						color: "secondary",
 						size: "sm",
-						className: k.OnDark,
-						style: Q,
-						children: /* @__PURE__ */ w(c, {
+						className: A.OnDark,
+						style: ce,
+						children: /* @__PURE__ */ T(l, {
 							size: 16,
 							"aria-hidden": !0
 						})
 					})]
 				}),
-				/* @__PURE__ */ w("pre", {
+				/* @__PURE__ */ T("pre", {
 					tabIndex: 0,
-					className: k.PayloadCode,
-					children: q
+					className: A.PayloadCode,
+					children: K
 				}),
-				/* @__PURE__ */ w("div", {
-					className: k.FlyoutFooter,
-					children: /* @__PURE__ */ T("button", {
+				/* @__PURE__ */ T("div", {
+					className: A.FlyoutFooter,
+					children: /* @__PURE__ */ E("button", {
 						type: "button",
 						onClick: () => O(G),
-						className: k.FlyoutCopyButton,
-						children: [w(D ? t : r, {
+						className: A.FlyoutCopyButton,
+						children: [T(w ? t : r, {
 							size: 16,
 							"aria-hidden": !0
-						}), D ? C.copied : y ?? C.copyJson]
+						}), w ? C.copied : _ ?? C.copyJson]
 					})
 				})
 			]
 		}), H),
-		/* @__PURE__ */ w("span", {
+		/* @__PURE__ */ T("span", {
 			role: "status",
 			"aria-live": "polite",
-			className: k.VisuallyHidden,
-			children: D ? C.copied : ""
+			className: A.VisuallyHidden,
+			children: w ? C.copied : ""
 		})
 	] });
 }
 //#endregion
 //#region src/dev-panel/dev-panel-footer.tsx
-function ce({ onReseed: e, reseedLabel: t = "Reseed", onCopyUrl: r, url: i, copyUrlLabel: a = "Copy URL", onConsole: c, consoleLabel: l = "Console", children: u }) {
-	let { copy: d } = K();
-	return /* @__PURE__ */ T("div", {
-		className: k.Footer,
+function me({ onReseed: e, reseedLabel: t = "Reseed", onCopyUrl: r, url: i, copyUrlLabel: a = "Copy URL", onConsole: o, consoleLabel: l = "Console", children: u }) {
+	let { copy: d } = Q();
+	return /* @__PURE__ */ E("div", {
+		className: A.Footer,
 		children: [
-			e && /* @__PURE__ */ w(y, {
+			e && /* @__PURE__ */ T(b, {
 				variant: "outline",
 				color: "secondary",
 				size: "sm",
-				startIcon: /* @__PURE__ */ w(o, { "aria-hidden": !0 }),
+				startIcon: /* @__PURE__ */ T(s, { "aria-hidden": !0 }),
 				onClick: e,
 				children: t
 			}),
-			r && /* @__PURE__ */ w(y, {
+			r && /* @__PURE__ */ T(b, {
 				variant: "outline",
 				color: "secondary",
 				size: "sm",
-				startIcon: /* @__PURE__ */ w(s, { "aria-hidden": !0 }),
+				startIcon: /* @__PURE__ */ T(c, { "aria-hidden": !0 }),
 				onClick: async () => {
 					i != null && await d(i), r?.();
 				},
 				children: a
 			}),
-			c && /* @__PURE__ */ w(y, {
+			o && /* @__PURE__ */ T(b, {
 				variant: "solid",
 				size: "sm",
-				endIcon: /* @__PURE__ */ w(n, { "aria-hidden": !0 }),
-				onClick: c,
+				endIcon: /* @__PURE__ */ T(n, { "aria-hidden": !0 }),
+				onClick: o,
 				style: { marginInlineStart: "auto" },
 				children: l
 			}),
@@ -799,20 +899,21 @@ function ce({ onReseed: e, reseedLabel: t = "Reseed", onCopyUrl: r, url: i, copy
 }
 //#endregion
 //#region src/dev-panel/parts.ts
-var le = /* @__PURE__ */ O({
-	Country: () => R,
-	Flow: () => J,
-	Footer: () => ce,
-	Payload: () => se,
-	Root: () => P,
-	Section: () => F,
-	Status: () => W,
-	StepState: () => B,
-	Steps: () => H,
-	Variant: () => z,
-	useSectionLabelId: () => N
+var he = /* @__PURE__ */ k({
+	Country: () => W,
+	Flow: () => te,
+	Footer: () => me,
+	Handle: () => V,
+	Payload: () => pe,
+	Root: () => z,
+	Section: () => B,
+	Status: () => X,
+	StepState: () => K,
+	Steps: () => J,
+	Variant: () => G,
+	useSectionLabelId: () => P
 });
 //#endregion
-export { le as DevPanel };
+export { he as DevPanel };
 
 //# sourceMappingURL=dev-panel.mjs.map