@burdenoff/microfe-atheletebridge 2026.805.1 → 2026.829.1

package/dist/atheletebridge/pages/onboarding/OnboardingPage.js

@@ -1,275 +1,309 @@
 import { useAbTranslate as e } from "../../i18n.js";
 import { useAthleteBridge as t } from "../../context/AthleteBridgeContext.js";
 import { cn as n } from "../../utils/cn.js";
-import { MEMBER_ROLE_LABELS as r, MEMBER_ROLE_OPTIONS as i, SPORT_ICONS as a, SPORT_LABELS as o, SPORT_OPTIONS as s } from "../../components/domain.js";
-import { useAddMember as c, useCreateTeam as l } from "../../hooks/useAthleteBridgeApi.js";
-import { FormField as u, fieldInputClass as d } from "../../components/form.js";
-import { useCallback as f, useMemo as p, useState as m } from "react";
-import { ArrowLeft as h, ArrowRight as g, Check as _, Loader2 as ee, Users as v } from "lucide-react";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
-import { GlassCard as S } from "@burdenoff/fe-libs/ui";
+import { MEMBER_ROLE_OPTIONS as r, SPORT_ICONS as i, SPORT_OPTIONS as a } from "../../components/domain.js";
+import { useAddMember as o, useCreateTeam as s } from "../../hooks/useAthleteBridgeApi.js";
+import { FormField as c, fieldInputClass as l } from "../../components/form.js";
+import { useCallback as u, useMemo as ee, useState as d } from "react";
+import { ArrowLeft as f, ArrowRight as p, Check as m, Loader2 as h, Users as g } from "lucide-react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { GlassCard as te } from "@burdenoff/fe-libs/ui";
 //#region src/atheletebridge/pages/onboarding/OnboardingPage.tsx
-var C = [
-	{
-		value: "",
-		label: "Not age-banded"
-	},
-	{
-		value: "U8",
-		label: "U8"
-	},
-	{
-		value: "U10",
-		label: "U10"
-	},
-	{
-		value: "U12",
-		label: "U12"
-	},
-	{
-		value: "U14",
-		label: "U14"
-	},
-	{
-		value: "U16",
-		label: "U16"
-	},
-	{
-		value: "U18",
-		label: "U18"
-	},
-	{
-		value: "U21",
-		label: "U21"
-	},
-	{
-		value: "SENIOR",
-		label: "Senior"
-	},
-	{
-		value: "MASTERS",
-		label: "Masters"
-	}
-];
-function w(e) {
-	let t = e.getFullYear(), n = (e) => String(e % 100).padStart(2, "0");
+function b(e) {
 	return [
 		{
 			value: "",
-			label: "No season"
+			label: e("atheletebridge.onboarding.ageGroup.none", "Not age-banded")
+		},
+		{
+			value: "U8",
+			label: "U8"
+		},
+		{
+			value: "U10",
+			label: "U10"
+		},
+		{
+			value: "U12",
+			label: "U12"
+		},
+		{
+			value: "U14",
+			label: "U14"
+		},
+		{
+			value: "U16",
+			label: "U16"
 		},
 		{
-			value: String(t),
-			label: String(t)
+			value: "U18",
+			label: "U18"
 		},
 		{
-			value: `${t}/${n(t + 1)}`,
-			label: `${t}/${n(t + 1)}`
+			value: "U21",
+			label: "U21"
 		},
 		{
-			value: `${t - 1}/${n(t)}`,
-			label: `${t - 1}/${n(t)}`
+			value: "SENIOR",
+			label: e("atheletebridge.onboarding.ageGroup.senior", "Senior")
 		},
 		{
-			value: String(t - 1),
-			label: String(t - 1)
+			value: "MASTERS",
+			label: e("atheletebridge.onboarding.ageGroup.masters", "Masters")
 		}
 	];
 }
-var T = 3, E = 120, D = {
-	1: "Your sport",
-	2: "Create your team",
-	3: "Your role"
-}, O = "bg-[linear-gradient(120deg,var(--color-action-primary-bg),color-mix(in_oklab,var(--color-action-primary-bg)_62%,var(--color-accent-purple)),var(--color-action-primary-bg))]", k = n("inline-flex items-center justify-center gap-1.5 rounded-lg px-5 py-2.5 text-sm font-semibold", "text-action-primary-text shadow-elevation-1 transition-[filter,box-shadow]", "hover:shadow-elevation-2 hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-60", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", O), A = n("inline-flex items-center justify-center gap-1.5 rounded-lg border border-border-seam px-5 py-2.5", "text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]"), j = n("rounded-lg px-4 py-2.5 text-sm font-medium text-text-secondary transition-colors", "hover:text-text-primary focus-visible:outline-none focus-visible:ring-2", "focus-visible:ring-[var(--color-focus-ring)]"), M = n("inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium transition-all", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", "motion-safe:hover:-translate-y-0.5"), N = "border-border-seam bg-bg-surface text-text-secondary hover:border-border-strong hover:text-text-primary", P = n("border-transparent text-action-primary-text shadow-elevation-1", O), F = ({ current: e }) => /* @__PURE__ */ b("div", {
+function x(e, t) {
+	let n = e.getFullYear(), r = (e) => String(e % 100).padStart(2, "0");
+	return [
+		{
+			value: "",
+			label: t("atheletebridge.onboarding.season.none", "No season")
+		},
+		{
+			value: String(n),
+			label: String(n)
+		},
+		{
+			value: `${n}/${r(n + 1)}`,
+			label: `${n}/${r(n + 1)}`
+		},
+		{
+			value: `${n - 1}/${r(n)}`,
+			label: `${n - 1}/${r(n)}`
+		},
+		{
+			value: String(n - 1),
+			label: String(n - 1)
+		}
+	];
+}
+var S = 3, C = 120;
+function w(e, t) {
+	switch (e) {
+		case 1: return t("atheletebridge.onboarding.stepLabel.sport", "Your sport");
+		case 2: return t("atheletebridge.onboarding.stepLabel.team", "Create your team");
+		case 3: return t("atheletebridge.onboarding.stepLabel.role", "Your role");
+	}
+}
+var T = "bg-[linear-gradient(120deg,var(--color-action-primary-bg),color-mix(in_oklab,var(--color-action-primary-bg)_62%,var(--color-accent-purple)),var(--color-action-primary-bg))]", E = n("inline-flex items-center justify-center gap-1.5 rounded-lg px-5 py-2.5 text-sm font-semibold", "text-action-primary-text shadow-elevation-1 transition-[filter,box-shadow]", "hover:shadow-elevation-2 hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-60", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", T), D = n("inline-flex items-center justify-center gap-1.5 rounded-lg border border-border-seam px-5 py-2.5", "text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]"), O = n("rounded-lg px-4 py-2.5 text-sm font-medium text-text-secondary transition-colors", "hover:text-text-primary focus-visible:outline-none focus-visible:ring-2", "focus-visible:ring-[var(--color-focus-ring)]"), k = n("inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium transition-all", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", "motion-safe:hover:-translate-y-0.5"), A = "border-border-seam bg-bg-surface text-text-secondary hover:border-border-strong hover:text-text-primary", j = n("border-transparent text-action-primary-text shadow-elevation-1", T), ne = ({ current: e, stepLabel: t, progressLabel: r }) => /* @__PURE__ */ v("div", {
 	className: "flex items-start justify-center",
 	role: "progressbar",
 	"aria-valuemin": 1,
-	"aria-valuemax": T,
+	"aria-valuemax": S,
 	"aria-valuenow": e,
-	"aria-valuetext": `Step ${e} of ${T}: ${D[e]}`,
-	"aria-label": "Onboarding progress",
+	"aria-valuetext": `${r} ${e} / ${S}: ${t(e)}`,
+	"aria-label": r,
 	children: [
 		1,
 		2,
 		3
-	].map((t, r) => {
-		let i = t < e, a = t === e;
-		return /* @__PURE__ */ x("div", {
+	].map((r, i) => {
+		let a = r < e, o = r === e;
+		return /* @__PURE__ */ y("div", {
 			className: "flex items-start",
 			"aria-hidden": "true",
-			children: [r > 0 && /* @__PURE__ */ b("span", { className: n("mt-6 h-px w-10 shrink-0 transition-colors sm:w-20", t <= e ? "bg-[var(--color-accent-teal)]" : "bg-border-seam") }), /* @__PURE__ */ x("div", {
+			children: [i > 0 && /* @__PURE__ */ v("span", { className: n("mt-6 h-px w-10 shrink-0 transition-colors sm:w-20", r <= e ? "bg-[var(--color-accent-teal)]" : "bg-border-seam") }), /* @__PURE__ */ y("div", {
 				className: "flex w-24 flex-col items-center gap-2 sm:w-32",
-				children: [/* @__PURE__ */ b("span", {
-					className: n("flex h-12 w-12 items-center justify-center rounded-full text-base font-semibold transition-all", i && "bg-[var(--color-accent-teal)] text-[var(--color-bg-canvas)]", a && n("text-action-primary-text shadow-elevation-2", O), !i && !a && "border border-border-strong text-text-muted"),
-					children: i ? /* @__PURE__ */ b(_, { className: "h-5 w-5" }) : t
-				}), /* @__PURE__ */ b("span", {
-					className: n("text-center text-sm", a ? "font-semibold text-text-primary" : "text-text-secondary"),
-					children: D[t]
+				children: [/* @__PURE__ */ v("span", {
+					className: n("flex h-12 w-12 items-center justify-center rounded-full text-base font-semibold transition-all", a && "bg-[var(--color-accent-teal)] text-[var(--color-bg-canvas)]", o && n("text-action-primary-text shadow-elevation-2", T), !a && !o && "border border-border-strong text-text-muted"),
+					children: a ? /* @__PURE__ */ v(m, { className: "h-5 w-5" }) : r
+				}), /* @__PURE__ */ v("span", {
+					className: n("text-center text-sm", o ? "font-semibold text-text-primary" : "text-text-secondary"),
+					children: t(r)
 				})]
 			})]
-		}, t);
+		}, r);
 	})
-}), I = ({ value: e, onSelect: t, size: r }) => /* @__PURE__ */ b("div", {
+}), M = ({ value: e, onSelect: t, size: r, getLabel: o, groupLabel: s }) => /* @__PURE__ */ v("div", {
 	className: "flex flex-wrap gap-2",
 	role: "group",
-	"aria-label": "Sport",
-	children: s.map((i) => {
-		let s = a[i], c = e === i;
-		return /* @__PURE__ */ x("button", {
+	"aria-label": s,
+	children: a.map((a) => {
+		let s = i[a], c = e === a;
+		return /* @__PURE__ */ y("button", {
 			type: "button",
-			onClick: () => t(i),
+			onClick: () => t(a),
 			"aria-pressed": c,
-			className: n(M, r === "lg" && "px-5 py-2.5 text-base", c ? P : N),
-			children: [/* @__PURE__ */ b(s, {
+			className: n(k, r === "lg" && "px-5 py-2.5 text-base", c ? j : A),
+			children: [/* @__PURE__ */ v(s, {
 				className: r === "lg" ? "h-5 w-5" : "h-4 w-4",
 				"aria-hidden": "true"
-			}), o[i]]
-		}, i);
+			}), o(a)]
+		}, a);
 	})
-}), L = () => {
-	let a = e(), { navigateTo: o, currentUser: s } = t(), _ = l(), D = c(), [O, L] = m(1), [R, z] = m(null), [B, V] = m(""), [H, U] = m(""), [W, G] = m(""), [K, q] = m(null), [J, Y] = m(null), X = p(() => w(/* @__PURE__ */ new Date()), []), Z = _.isPending || D.isPending, Q = f(() => o("/"), [o]), te = f(() => {
-		Y(null), L((e) => e === 1 ? 1 : e - 1);
-	}, []), $ = f((e) => {
-		z(e), Y(null);
-	}, []), ne = f(() => {
-		if (O === 1) {
-			if (!R) {
-				Y(a("atheletebridge.pages.onboarding.errorSport", "Pick a sport to continue."));
+}), N = () => {
+	let i = e(), { navigateTo: a, currentUser: m } = t(), T = s(), N = o(), [P, F] = d(1), [I, L] = d(null), [R, z] = d(""), [B, V] = d(""), [H, U] = d(""), [W, G] = d(null), [K, q] = d(null), J = b(i), Y = ee(() => x(/* @__PURE__ */ new Date(), i), [i]), X = u((e) => {
+		switch (e) {
+			case "ATHLETICS": return i("atheletebridge.sport.athletics", "Athletics");
+			case "BASKETBALL": return i("atheletebridge.sport.basketball", "Basketball");
+			case "CRICKET": return i("atheletebridge.sport.cricket", "Cricket");
+			case "ESPORTS": return i("atheletebridge.sport.esports", "Esports");
+			case "FOOTBALL": return i("atheletebridge.sport.football", "Football");
+			case "OTHER": return i("atheletebridge.sport.other", "Other");
+			case "SWIMMING": return i("atheletebridge.sport.swimming", "Swimming");
+			case "TENNIS": return i("atheletebridge.sport.tennis", "Tennis");
+		}
+	}, [i]), re = u((e) => {
+		switch (e) {
+			case "PLAYER": return i("atheletebridge.memberRole.player", "Player");
+			case "CAPTAIN": return i("atheletebridge.memberRole.captain", "Captain");
+			case "COACH": return i("atheletebridge.memberRole.coach", "Coach");
+			case "ASSISTANT_COACH": return i("atheletebridge.memberRole.assistantCoach", "Assistant Coach");
+			case "PHYSIO": return i("atheletebridge.memberRole.physio", "Physio");
+			case "MANAGER": return i("atheletebridge.memberRole.manager", "Manager");
+		}
+	}, [i]), Z = T.isPending || N.isPending, Q = u(() => a("/"), [a]), ie = u(() => {
+		q(null), F((e) => e === 1 ? 1 : e - 1);
+	}, []), $ = u((e) => {
+		L(e), q(null);
+	}, []), ae = u(() => {
+		if (P === 1) {
+			if (!I) {
+				q(i("atheletebridge.pages.onboarding.errorSport", "Pick a sport to continue."));
 				return;
 			}
-			Y(null), L(2);
+			q(null), F(2);
 			return;
 		}
-		if (!B.trim()) {
-			Y(a("atheletebridge.pages.onboarding.errorTeamName", "Give your team a name to continue."));
+		if (!R.trim()) {
+			q(i("atheletebridge.pages.onboarding.errorTeamName", "Give your team a name to continue."));
 			return;
 		}
-		Y(null), L(3);
+		q(null), F(3);
 	}, [
-		O,
+		P,
+		I,
 		R,
-		B,
-		a
-	]), re = f(async (e) => {
-		if (e.preventDefault(), !R || !K || !B.trim()) {
-			Y(a("atheletebridge.pages.onboarding.errorRole", "Pick your role to finish."));
+		i
+	]), oe = u(async (e) => {
+		if (e.preventDefault(), !I || !W || !R.trim()) {
+			q(i("atheletebridge.pages.onboarding.errorRole", "Pick your role to finish."));
 			return;
 		}
-		Y(null);
+		q(null);
 		try {
-			let e = await _.mutateAsync({
-				name: B.trim(),
-				sport: R,
+			let e = await T.mutateAsync({
+				name: R.trim(),
+				sport: I,
 				status: "FORMING",
-				ageGroup: H || void 0,
-				season: W || void 0
+				ageGroup: B || void 0,
+				season: H || void 0
 			});
-			if (s?.id) {
-				let t = [s.firstName, s.lastName].filter((e) => !!e).join(" ").trim(), n = s.name ?? (t || s.email);
+			if (m?.id) {
+				let t = [m.firstName, m.lastName].filter((e) => !!e).join(" ").trim(), n = m.name ?? (t || m.email);
 				try {
-					await D.mutateAsync({
+					await N.mutateAsync({
 						teamId: e.id,
-						userId: s.id,
+						userId: m.id,
 						displayName: n,
-						role: K,
+						role: W,
 						status: "ACTIVE"
 					});
 				} catch {}
 			}
-			o(`/teams/${e.id}`);
+			a(`/teams/${e.id}`);
 		} catch (e) {
-			Y(e instanceof Error ? e.message : a("atheletebridge.pages.onboarding.errorCreate", "We couldn't create your team. Please try again."));
+			q(e instanceof Error ? e.message : i("atheletebridge.pages.onboarding.errorCreate", "We couldn't create your team. Please try again."));
 		}
 	}, [
+		I,
+		W,
 		R,
-		K,
 		B,
 		H,
-		W,
-		s,
-		_,
-		D,
-		o,
-		a
-	]), ie = O === 1 ? a("atheletebridge.pages.onboarding.step1Title", "What do you coach?") : O === 2 ? a("atheletebridge.pages.onboarding.step2Title", "Create your first team") : a("atheletebridge.pages.onboarding.step3Title", "What's your role?"), ae = O === 1 ? a("atheletebridge.pages.onboarding.step1Subtitle", "Your sport shapes the squads, fixtures and training you set up next.") : O === 2 ? a("atheletebridge.pages.onboarding.step2Subtitle", "You can add players and fixtures once your team exists.") : a("atheletebridge.pages.onboarding.step3Subtitle", "We add you to this squad so the roster starts with you.");
-	return /* @__PURE__ */ b("div", {
+		m,
+		T,
+		N,
+		a,
+		i
+	]), se = P === 1 ? i("atheletebridge.pages.onboarding.step1Title", "What do you coach?") : P === 2 ? i("atheletebridge.pages.onboarding.step2Title", "Create your first team") : i("atheletebridge.pages.onboarding.step3Title", "What's your role?"), ce = P === 1 ? i("atheletebridge.pages.onboarding.step1Subtitle", "Your sport shapes the squads, fixtures and training you set up next.") : P === 2 ? i("atheletebridge.pages.onboarding.step2Subtitle", "You can add players and fixtures once your team exists.") : i("atheletebridge.pages.onboarding.step3Subtitle", "We add you to this squad so the roster starts with you.");
+	return /* @__PURE__ */ v("div", {
 		className: "min-h-full bg-bg-canvas px-4 py-10 sm:px-6 sm:py-14",
-		children: /* @__PURE__ */ x("div", {
+		children: /* @__PURE__ */ y("div", {
 			className: "mx-auto flex w-full max-w-2xl flex-col gap-8",
 			children: [
-				/* @__PURE__ */ b(F, { current: O }),
-				/* @__PURE__ */ x("header", {
+				/* @__PURE__ */ v(ne, {
+					current: P,
+					stepLabel: (e) => w(e, i),
+					progressLabel: i("atheletebridge.pages.onboarding.progressLabel", "Onboarding progress")
+				}),
+				/* @__PURE__ */ y("header", {
 					className: "text-center",
-					children: [/* @__PURE__ */ b("h1", {
+					children: [/* @__PURE__ */ v("h1", {
 						className: "text-3xl font-bold tracking-tight text-text-primary sm:text-4xl",
-						children: ie
-					}), /* @__PURE__ */ b("p", {
+						children: se
+					}), /* @__PURE__ */ v("p", {
 						className: "mx-auto mt-2 max-w-lg text-sm text-text-secondary sm:text-base",
-						children: ae
+						children: ce
 					})]
 				}),
-				/* @__PURE__ */ b("form", {
-					onSubmit: re,
+				/* @__PURE__ */ v("form", {
+					onSubmit: oe,
 					noValidate: !0,
-					children: /* @__PURE__ */ x(S, {
+					children: /* @__PURE__ */ y(te, {
 						treatment: "insight",
 						className: "p-6 sm:p-8",
-						children: [/* @__PURE__ */ x("div", {
+						children: [/* @__PURE__ */ y("div", {
 							className: "space-y-6",
 							children: [
-								O === 1 && /* @__PURE__ */ b(I, {
-									value: R,
+								P === 1 && /* @__PURE__ */ v(M, {
+									value: I,
 									onSelect: $,
-									size: "lg"
+									size: "lg",
+									getLabel: X,
+									groupLabel: i("atheletebridge.pages.onboarding.sport", "Sport")
 								}),
-								O === 2 && /* @__PURE__ */ x(y, { children: [
-									/* @__PURE__ */ b(u, {
-										label: a("atheletebridge.pages.onboarding.teamName", "Team name"),
+								P === 2 && /* @__PURE__ */ y(_, { children: [
+									/* @__PURE__ */ v(c, {
+										label: i("atheletebridge.pages.onboarding.teamName", "Team name"),
 										htmlFor: "onboarding-team-name",
 										required: !0,
-										children: /* @__PURE__ */ b("input", {
+										children: /* @__PURE__ */ v("input", {
 											id: "onboarding-team-name",
-											className: d,
-											value: B,
-											maxLength: E,
+											className: l,
+											value: R,
+											maxLength: C,
 											onChange: (e) => {
-												V(e.target.value), Y(null);
+												z(e.target.value), q(null);
 											},
-											placeholder: "e.g. Riverside United U16"
+											placeholder: i("atheletebridge.pages.onboarding.teamNamePlaceholder", "e.g. Riverside United U16")
 										})
 									}),
-									/* @__PURE__ */ b(u, {
-										label: a("atheletebridge.pages.onboarding.sport", "Sport"),
-										children: /* @__PURE__ */ b(I, {
-											value: R,
+									/* @__PURE__ */ v(c, {
+										label: i("atheletebridge.pages.onboarding.sport", "Sport"),
+										children: /* @__PURE__ */ v(M, {
+											value: I,
 											onSelect: $,
-											size: "sm"
+											size: "sm",
+											getLabel: X,
+											groupLabel: i("atheletebridge.pages.onboarding.sport", "Sport")
 										})
 									}),
-									/* @__PURE__ */ x("div", {
+									/* @__PURE__ */ y("div", {
 										className: "grid grid-cols-1 gap-5 sm:grid-cols-2",
-										children: [/* @__PURE__ */ b(u, {
-											label: a("atheletebridge.pages.onboarding.ageGroup", "Age group"),
+										children: [/* @__PURE__ */ v(c, {
+											label: i("atheletebridge.pages.onboarding.ageGroup", "Age group"),
 											htmlFor: "onboarding-age-group",
-											children: /* @__PURE__ */ b("select", {
+											children: /* @__PURE__ */ v("select", {
 												id: "onboarding-age-group",
-												className: d,
-												value: H,
-												onChange: (e) => U(e.target.value),
-												children: C.map((e) => /* @__PURE__ */ b("option", {
+												className: l,
+												value: B,
+												onChange: (e) => V(e.target.value),
+												children: J.map((e) => /* @__PURE__ */ v("option", {
 													value: e.value,
 													children: e.label
 												}, e.value || "none"))
 											})
-										}), /* @__PURE__ */ b(u, {
-											label: a("atheletebridge.pages.onboarding.season", "Season"),
+										}), /* @__PURE__ */ v(c, {
+											label: i("atheletebridge.pages.onboarding.season", "Season"),
 											htmlFor: "onboarding-season",
-											children: /* @__PURE__ */ b("select", {
+											children: /* @__PURE__ */ v("select", {
 												id: "onboarding-season",
-												className: d,
-												value: W,
-												onChange: (e) => G(e.target.value),
-												children: X.map((e) => /* @__PURE__ */ b("option", {
+												className: l,
+												value: H,
+												onChange: (e) => U(e.target.value),
+												children: Y.map((e) => /* @__PURE__ */ v("option", {
 													value: e.value,
 													children: e.label
 												}, e.value || "none"))
@@ -277,67 +311,67 @@ var T = 3, E = 120, D = {
 										})]
 									})
 								] }),
-								O === 3 && /* @__PURE__ */ b("div", {
+								P === 3 && /* @__PURE__ */ v("div", {
 									className: "flex flex-wrap gap-2",
 									role: "group",
-									"aria-label": "Your role",
-									children: i.map((e) => {
-										let t = K === e;
-										return /* @__PURE__ */ x("button", {
+									"aria-label": i("atheletebridge.pages.onboarding.yourRole", "Your role"),
+									children: r.map((e) => {
+										let t = W === e;
+										return /* @__PURE__ */ y("button", {
 											type: "button",
 											onClick: () => {
-												q(e), Y(null);
+												G(e), q(null);
 											},
 											"aria-pressed": t,
-											className: n(M, "px-5 py-2.5 text-base", t ? P : N),
-											children: [/* @__PURE__ */ b(v, {
+											className: n(k, "px-5 py-2.5 text-base", t ? j : A),
+											children: [/* @__PURE__ */ v(g, {
 												className: "h-5 w-5",
 												"aria-hidden": "true"
-											}), r[e]]
+											}), re(e)]
 										}, e);
 									})
 								}),
-								J && /* @__PURE__ */ b("p", {
+								K && /* @__PURE__ */ v("p", {
 									role: "alert",
 									className: "text-sm text-status-error-text",
-									children: J
+									children: K
 								})
 							]
-						}), /* @__PURE__ */ x("div", {
+						}), /* @__PURE__ */ y("div", {
 							className: "mt-8 flex flex-wrap items-center justify-between gap-3 border-t border-border-seam pt-6",
-							children: [/* @__PURE__ */ x("button", {
+							children: [/* @__PURE__ */ y("button", {
 								type: "button",
-								onClick: O === 1 ? Q : te,
-								className: A,
+								onClick: P === 1 ? Q : ie,
+								className: D,
 								disabled: Z,
-								children: [/* @__PURE__ */ b(h, {
+								children: [/* @__PURE__ */ v(f, {
 									className: "h-4 w-4",
 									"aria-hidden": "true"
-								}), O === 1 ? a("atheletebridge.pages.onboarding.exit", "Exit") : a("atheletebridge.pages.onboarding.back", "Back")]
-							}), /* @__PURE__ */ x("div", {
+								}), P === 1 ? i("atheletebridge.pages.onboarding.exit", "Exit") : i("atheletebridge.pages.onboarding.back", "Back")]
+							}), /* @__PURE__ */ y("div", {
 								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ b("button", {
+								children: [/* @__PURE__ */ v("button", {
 									type: "button",
 									onClick: Q,
-									className: j,
+									className: O,
 									disabled: Z,
-									children: a("atheletebridge.pages.onboarding.skip", "Skip for now")
-								}), O === 3 ? /* @__PURE__ */ b("button", {
+									children: i("atheletebridge.pages.onboarding.skip", "Skip for now")
+								}), P === 3 ? /* @__PURE__ */ v("button", {
 									type: "submit",
-									className: k,
-									disabled: Z || !K,
-									children: Z ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(ee, {
+									className: E,
+									disabled: Z || !W,
+									children: Z ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(h, {
 										className: "h-4 w-4 animate-spin",
 										"aria-hidden": "true"
-									}), a("atheletebridge.pages.onboarding.creating", "Creating…")] }) : /* @__PURE__ */ x(y, { children: [a("atheletebridge.pages.onboarding.finish", "Create team"), /* @__PURE__ */ b(g, {
+									}), i("atheletebridge.pages.onboarding.creating", "Creating…")] }) : /* @__PURE__ */ y(_, { children: [i("atheletebridge.pages.onboarding.finish", "Create team"), /* @__PURE__ */ v(p, {
 										className: "h-4 w-4",
 										"aria-hidden": "true"
 									})] })
-								}) : /* @__PURE__ */ x("button", {
+								}) : /* @__PURE__ */ y("button", {
 									type: "button",
-									onClick: ne,
-									className: k,
-									children: [a("atheletebridge.pages.onboarding.continue", "Continue"), /* @__PURE__ */ b(g, {
+									onClick: ae,
+									className: E,
+									children: [i("atheletebridge.pages.onboarding.continue", "Continue"), /* @__PURE__ */ v(p, {
 										className: "h-4 w-4",
 										"aria-hidden": "true"
 									})]
@@ -346,19 +380,19 @@ var T = 3, E = 120, D = {
 						})]
 					})
 				}),
-				/* @__PURE__ */ x("p", {
+				/* @__PURE__ */ y("p", {
 					className: "text-center text-sm text-text-secondary",
 					children: [
-						a("atheletebridge.pages.onboarding.footer", "Step"),
+						i("atheletebridge.pages.onboarding.footer", "Step"),
 						" ",
-						O,
+						P,
 						" ",
-						a("atheletebridge.pages.onboarding.footerOf", "of"),
+						i("atheletebridge.pages.onboarding.footerOf", "of"),
 						" ",
-						T,
+						S,
 						" —",
 						" ",
-						a("atheletebridge.pages.onboarding.footerHint", "takes about a minute.")
+						i("atheletebridge.pages.onboarding.footerHint", "takes about a minute.")
 					]
 				})
 			]
@@ -366,6 +400,6 @@ var T = 3, E = 120, D = {
 	});
 };
 //#endregion
-export { L as OnboardingPage };
+export { N as OnboardingPage };
 
 //# sourceMappingURL=OnboardingPage.js.map