@leabankab/component-library 7.3.0 → 8.0.0

package/dist/dev-panel.mjs

@@ -0,0 +1,818 @@
+"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 './dev-panel.css';//#region \0rolldown/runtime.js
+var D = Object.defineProperty, O = (e, t) => {
+	let n = {};
+	for (var r in e) D(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({
+	copy: {
+		no: "Kopier",
+		se: "Kopiera",
+		fi: "Kopioi",
+		es: "Copiar"
+	},
+	copied: {
+		no: "Kopiert",
+		se: "Kopierad",
+		fi: "Kopioitu",
+		es: "Copiado"
+	},
+	copyJson: {
+		no: "Kopier JSON",
+		se: "Kopiera JSON",
+		fi: "Kopioi JSON",
+		es: "Copiar JSON"
+	},
+	close: {
+		no: "Lukk",
+		se: "Stäng",
+		fi: "Sulje",
+		es: "Cerrar"
+	},
+	minimise: {
+		no: "Minimer",
+		se: "Minimera",
+		fi: "Pienennä",
+		es: "Minimizar"
+	},
+	expand: {
+		no: "Utvid",
+		se: "Expandera",
+		fi: "Laajenna",
+		es: "Expandir"
+	},
+	step: {
+		no: "Steg",
+		se: "Steg",
+		fi: "Vaihe",
+		es: "Paso"
+	},
+	statusCompleted: {
+		no: "fullført",
+		se: "slutförd",
+		fi: "valmis",
+		es: "completado"
+	},
+	statusCurrent: {
+		no: "gjeldende",
+		se: "aktuell",
+		fi: "nykyinen",
+		es: "actual"
+	},
+	statusUpcoming: {
+		no: "ikke startet",
+		se: "inte påbörjad",
+		fi: "aloittamatta",
+		es: "no iniciado"
+	},
+	needsAttention: {
+		no: "krever oppmerksomhet",
+		se: "kräver uppmärksamhet",
+		fi: "vaatii huomiota",
+		es: "requiere atención"
+	}
+}), j = (...e) => e.filter(Boolean).join(" "), M = u(void 0);
+function N() {
+	return f(M);
+}
+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", {
+		"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,
+				children: [
+					n && /* @__PURE__ */ w("span", {
+						className: k.HeaderDot,
+						"aria-hidden": !0
+					}),
+					/* @__PURE__ */ w("span", { children: e }),
+					t != null && /* @__PURE__ */ w("span", {
+						className: k.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
+				})
+			})]
+		}), !x && /* @__PURE__ */ w("div", {
+			id: C,
+			className: k.Body,
+			children: d
+		})]
+	});
+}
+function F({ label: e, meta: t, children: n, className: r, style: i }) {
+	let a = m();
+	return /* @__PURE__ */ T("section", {
+		"aria-labelledby": a,
+		className: j(k.Section, r),
+		style: i,
+		children: [/* @__PURE__ */ T("div", {
+			className: k.SectionHeaderRow,
+			children: [/* @__PURE__ */ w("span", {
+				id: a,
+				className: k.SectionLabel,
+				children: e
+			}), t != null && /* @__PURE__ */ w("span", {
+				className: k.SectionMeta,
+				children: t
+			})]
+		}), /* @__PURE__ */ w(M.Provider, {
+			value: a,
+			children: n
+		})]
+	});
+}
+//#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) => {
+		i.current[t]?.focus(), n(e[t]);
+	}, [n, e]), u = d((t, n) => {
+		let r = e.length;
+		for (let e = 1; e <= r; e += 1) {
+			let i = (t + n * e + r * e) % r;
+			if (!a(i)) return i;
+		}
+		return t;
+	}, [a, e.length]);
+	return { getItemProps: d((r) => {
+		let o = e[r], s = a(r);
+		return {
+			ref: (e) => {
+				i.current[r] = e;
+			},
+			role: "radio",
+			"aria-checked": o === t,
+			"aria-disabled": s || void 0,
+			tabIndex: r === c ? 0 : -1,
+			onClick: () => {
+				s || n(o);
+			},
+			onKeyDown: (e) => {
+				switch (e.key) {
+					case "ArrowRight":
+					case "ArrowDown":
+						e.preventDefault(), l(u(r, 1));
+						break;
+					case "ArrowLeft":
+					case "ArrowUp":
+						e.preventDefault(), l(u(r, -1));
+						break;
+					case "Home":
+						e.preventDefault(), l(u(-1, 1));
+						break;
+					case "End":
+						e.preventDefault(), l(u(0, -1));
+						break;
+					case " ":
+					case "Enter": e.preventDefault(), s || n(o);
+				}
+			}
+		};
+	}, [
+		a,
+		l,
+		u,
+		n,
+		t,
+		c,
+		e
+	]) };
+}
+//#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({
+		values: n.map((e) => e.value),
+		selected: e,
+		onSelect: t,
+		isDisabled: (e, t) => n[t]?.disabled ?? !1
+	}), l = r === "chip";
+	return /* @__PURE__ */ w("div", {
+		role: "radiogroup",
+		"aria-label": i,
+		"aria-labelledby": s,
+		className: l ? k.ChipGroup : k.SegmentedGroup,
+		children: n.map((e, t) => {
+			let { onKeyDown: n, ...r } = c(t);
+			return /* @__PURE__ */ T("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,
+					"aria-hidden": !0
+				}) : e.icon, /* @__PURE__ */ w("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" }) {
+	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,
+			children: e.code
+		})
+	}));
+	return /* @__PURE__ */ w(F, {
+		label: r,
+		children: /* @__PURE__ */ w(L, {
+			value: e,
+			onChange: t,
+			options: i
+		})
+	});
+}
+//#endregion
+//#region src/dev-panel/dev-panel-variant.tsx
+function z({ 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, {
+		label: r,
+		children: /* @__PURE__ */ w(L, {
+			value: e,
+			onChange: t,
+			options: i
+		})
+	});
+}
+//#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" }) {
+	let o = n.map((e) => ({
+		value: e.value,
+		label: e.label,
+		disabled: e.disabled
+	}));
+	return /* @__PURE__ */ T(F, {
+		label: r,
+		children: [i != null && /* @__PURE__ */ T(x, {
+			textStyle: "body-sm",
+			style: {
+				color: "var(--lea-color-neutral-600)",
+				marginBlockEnd: "var(--lea-spacing-0-5)"
+			},
+			children: [
+				a,
+				" ",
+				/* @__PURE__ */ w("span", {
+					className: k.StepStateName,
+					children: i
+				})
+			]
+		}), /* @__PURE__ */ w(L, {
+			value: e,
+			onChange: t,
+			options: o,
+			variant: "chip"
+		})]
+	});
+}
+//#endregion
+//#region src/dev-panel/dev-panel-steps.tsx
+var V = (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, {
+		label: r,
+		meta: c,
+		children: /* @__PURE__ */ w(U, {
+			steps: e,
+			currentStep: t,
+			onStepSelect: n,
+			columns: a,
+			t: o
+		})
+	});
+}
+function U({ steps: e, currentStep: n, onStepSelect: r, columns: i, t: a }) {
+	let o = N();
+	return /* @__PURE__ */ w("div", {
+		role: "group",
+		"aria-labelledby": o,
+		className: k.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", {
+				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,
+				children: [
+					/* @__PURE__ */ T("span", {
+						className: k.StepCircle,
+						children: [
+							/* @__PURE__ */ w("span", {
+								className: k.VisuallyHidden,
+								children: l ? `${a.step} ${o}` : `${a.step} `
+							}),
+							l ? /* @__PURE__ */ w(t, {
+								size: 18,
+								"aria-hidden": !0
+							}) : o,
+							e.flagged && /* @__PURE__ */ w("span", {
+								className: k.StepFlagDot,
+								"aria-hidden": !0
+							})
+						]
+					}),
+					" ",
+					/* @__PURE__ */ w("span", {
+						className: k.StepLabel,
+						children: e.label
+					}),
+					/* @__PURE__ */ w("span", {
+						className: k.VisuallyHidden,
+						children: `(${V(s, a)}${e.flagged ? `, ${a.needsAttention}` : ""})`
+					})
+				]
+			}, o);
+		})
+	});
+}
+//#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, {
+		label: r,
+		children: /* @__PURE__ */ w(G, {
+			value: e,
+			onChange: t,
+			options: n
+		})
+	});
+}
+function G({ value: e, onChange: t, options: n }) {
+	let r = N(), { getItemProps: i } = I({
+		values: n.map((e) => e.value),
+		selected: e,
+		onSelect: t,
+		isDisabled: (e, t) => n[t]?.disabled ?? !1
+	});
+	return /* @__PURE__ */ w("div", {
+		role: "radiogroup",
+		"aria-labelledby": r,
+		className: k.StatusGrid,
+		children: n.map((e, t) => {
+			let { onKeyDown: n, ...r } = i(t);
+			return /* @__PURE__ */ T("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,
+					"aria-hidden": !0
+				}), /* @__PURE__ */ w("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) => {
+		try {
+			await navigator.clipboard?.writeText(e);
+		} catch {}
+		t(!0), clearTimeout(n.current), n.current = setTimeout(() => t(!1), 2e3);
+	}, []);
+	return p(() => () => 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 = [
+		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,
+		children: [
+			/* @__PURE__ */ T("div", {
+				className: k.FlowText,
+				children: [/* @__PURE__ */ w("span", {
+					className: k.FlowLabel,
+					children: a
+				}), /* @__PURE__ */ w("span", { children: m.map((e, t) => /* @__PURE__ */ T(l, { children: [t > 0 && /* @__PURE__ */ w("span", {
+					"aria-hidden": !0,
+					className: k.FlowSeparator,
+					children: "·"
+				}), e] }, t)) })]
+			}),
+			o && /* @__PURE__ */ w(b, {
+				"aria-label": c ?? d.copy,
+				onClick: async () => {
+					await p(g), u?.();
+				},
+				variant: "outline",
+				color: "secondary",
+				size: "sm",
+				children: w(f ? t : r, {
+					size: 16,
+					"aria-hidden": !0
+				})
+			}),
+			/* @__PURE__ */ w("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: k.VisuallyHidden,
+				children: f ? d.copied : ""
+			})
+		]
+	});
+}
+//#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) {
+	if (e[0] === "\"") {
+		let e = n;
+		for (; e < t.length && X(t[e]);) e += 1;
+		return t[e] === ":" ? "key" : "string";
+	}
+	return e === "true" || e === "false" ? "boolean" : e === "null" ? "null" : "number";
+}
+function ee(e) {
+	let t = [], n = 0;
+	for (let r of e.matchAll(Y)) {
+		let i = r.index ?? 0;
+		i > n && t.push({
+			type: "punctuation",
+			value: e.slice(n, i)
+		});
+		let a = r[0];
+		t.push({
+			type: Z(a, e, i + a.length),
+			value: a
+		}), n = i + a.length;
+	}
+	return n < e.length && t.push({
+		type: "punctuation",
+		value: e.slice(n)
+	}), t;
+}
+function te(e) {
+	if (typeof e != "string") return e != null;
+	let t = e.trim();
+	if (!t) return !1;
+	try {
+		return JSON.parse(t), !0;
+	} catch {
+		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,
+		"data-token": e.type,
+		children: e.value
+	}, t)) });
+}
+//#endregion
+//#region src/dev-panel/dev-panel-payload.tsx
+var Q = {
+	"--button-fg": "var(--lea-palette-text-contrast)",
+	"--button-border": "var(--lea-palette-border-contrast)",
+	"--button-tint": "var(--lea-color-neutral-800)"
+}, re = (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(() => {
+		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 - $;
+		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({
+			top: a,
+			left: r,
+			width: n,
+			height: i
+		});
+	}, []);
+	ie(() => {
+		if (!L || !P) return;
+		J();
+		let e = () => J();
+		return window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
+			window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+		};
+	}, [
+		L,
+		P,
+		J
+	]);
+	let Y = B !== null;
+	p(() => {
+		if (!L || !P || !H || !Y) 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) => {
+			if (t.key === "Escape") {
+				t.stopPropagation(), W(!1);
+				return;
+			}
+			if (t.key !== "Tab") return;
+			let r = n();
+			if (r.length === 0) {
+				t.preventDefault(), e?.focus();
+				return;
+			}
+			let i = r[0], a = r[r.length - 1], o = document.activeElement;
+			t.shiftKey && (o === i || o === e) ? (t.preventDefault(), a.focus()) : !t.shiftKey && o === a && (t.preventDefault(), i.focus());
+		}, i = (n) => {
+			let r = n.target;
+			e?.contains(r) || t?.contains(r) || W(!1);
+		};
+		return document.addEventListener("keydown", r, !0), document.addEventListener("pointerdown", i, !0), () => {
+			document.removeEventListener("keydown", r, !0), document.removeEventListener("pointerdown", i, !0), t?.focus();
+		};
+	}, [
+		L,
+		P,
+		H,
+		Y,
+		W
+	]);
+	let X = /* @__PURE__ */ w(b, {
+		"aria-label": g ?? C.copy,
+		onClick: () => O(G),
+		variant: "outline",
+		color: "secondary",
+		size: "sm",
+		className: k.OnDark,
+		style: Q,
+		children: w(D ? t : r, {
+			size: 16,
+			"aria-hidden": !0
+		})
+	});
+	return /* @__PURE__ */ T("div", { children: [
+		/* @__PURE__ */ T("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, {
+					size: 16,
+					"aria-hidden": !0
+				}), a]
+			}), /* @__PURE__ */ w("span", {
+				className: k.PayloadChevron,
+				children: /* @__PURE__ */ w(n, {
+					size: 16,
+					"aria-hidden": !0
+				})
+			})]
+		}),
+		!L && P && /* @__PURE__ */ T("div", {
+			id: F,
+			className: k.PayloadPanel,
+			children: [/* @__PURE__ */ T("div", {
+				className: k.PayloadHeader,
+				children: [/* @__PURE__ */ w("span", { children: o ?? a }), X]
+			}), /* @__PURE__ */ w("pre", {
+				tabIndex: 0,
+				className: k.PayloadCode,
+				children: q
+			})]
+		}),
+		L && P && H && E(/* @__PURE__ */ T("div", {
+			ref: z,
+			id: F,
+			role: "dialog",
+			"aria-labelledby": I,
+			tabIndex: -1,
+			className: k.Flyout,
+			style: B ? {
+				top: B.top,
+				left: B.left,
+				width: B.width,
+				height: B.height
+			} : { visibility: "hidden" },
+			children: [
+				/* @__PURE__ */ T("div", {
+					className: k.PayloadHeader,
+					children: [/* @__PURE__ */ T("span", {
+						className: k.FlyoutTitle,
+						children: [/* @__PURE__ */ w("span", {
+							id: I,
+							children: o ?? a
+						}), l != null && /* @__PURE__ */ w("span", {
+							className: k.Badge,
+							"data-on-dark": "",
+							children: l
+						})]
+					}), /* @__PURE__ */ w(b, {
+						"aria-label": x ?? C.close,
+						onClick: () => W(!1),
+						variant: "outline",
+						color: "secondary",
+						size: "sm",
+						className: k.OnDark,
+						style: Q,
+						children: /* @__PURE__ */ w(c, {
+							size: 16,
+							"aria-hidden": !0
+						})
+					})]
+				}),
+				/* @__PURE__ */ w("pre", {
+					tabIndex: 0,
+					className: k.PayloadCode,
+					children: q
+				}),
+				/* @__PURE__ */ w("div", {
+					className: k.FlyoutFooter,
+					children: /* @__PURE__ */ T("button", {
+						type: "button",
+						onClick: () => O(G),
+						className: k.FlyoutCopyButton,
+						children: [w(D ? t : r, {
+							size: 16,
+							"aria-hidden": !0
+						}), D ? C.copied : y ?? C.copyJson]
+					})
+				})
+			]
+		}), H),
+		/* @__PURE__ */ w("span", {
+			role: "status",
+			"aria-live": "polite",
+			className: k.VisuallyHidden,
+			children: D ? 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,
+		children: [
+			e && /* @__PURE__ */ w(y, {
+				variant: "outline",
+				color: "secondary",
+				size: "sm",
+				startIcon: /* @__PURE__ */ w(o, { "aria-hidden": !0 }),
+				onClick: e,
+				children: t
+			}),
+			r && /* @__PURE__ */ w(y, {
+				variant: "outline",
+				color: "secondary",
+				size: "sm",
+				startIcon: /* @__PURE__ */ w(s, { "aria-hidden": !0 }),
+				onClick: async () => {
+					i != null && await d(i), r?.();
+				},
+				children: a
+			}),
+			c && /* @__PURE__ */ w(y, {
+				variant: "solid",
+				size: "sm",
+				endIcon: /* @__PURE__ */ w(n, { "aria-hidden": !0 }),
+				onClick: c,
+				style: { marginInlineStart: "auto" },
+				children: l
+			}),
+			u
+		]
+	});
+}
+//#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
+});
+//#endregion
+export { le as DevPanel };
+
+//# sourceMappingURL=dev-panel.mjs.map