@incodetech/web 0.0.0-dev-20260513-2604577 → 0.0.0-dev-20260513-5fa7154

package/dist/flow/flow.es.js

@@ -5,12 +5,12 @@ import { o as l } from "../hooks-BVnGysT7.js";
 import { t as u } from "../incodeComponent-C1o4M0ZK.js";
 import { t as d } from "../transitionSpinner-PIEPU2Vx.js";
 import { t as f } from "../incodeModule-BqCjVgEI.js";
-import { a as p, c as m, d as h, f as g, l as _, m as v, n as y, o as b, r as x, s as S, t as C, u as w } from "../useModuleLoader-OY2iMWCC.js";
-import { getDeviceClass as T } from "@incodetech/core/device";
-import { getRequiredWasmPipelines as E } from "@incodetech/core/flow";
-import { QrValidationError as D, bootstrapSession as O, refreshQrUrlUuid as k } from "@incodetech/core/session";
+import { a as p, c as m, d as h, f as g, h as _, l as v, n as y, o as b, p as x, r as S, s as C, t as w, u as T } from "../useModuleLoader-BTK8of8_.js";
+import { getDeviceClass as E } from "@incodetech/core/device";
+import { getRequiredWasmPipelines as D } from "@incodetech/core/flow";
+import { QrValidationError as O, bootstrapSession as k, refreshQrUrlUuid as A } from "@incodetech/core/session";
 //#region src/shared/processing/useDelayedFlag.ts
-function A(e, n) {
+function j(e, n) {
 	let [r, i] = o(!1);
 	return t(() => {
 		if (e === !1) {
@@ -27,21 +27,21 @@ function A(e, n) {
 }
 //#endregion
 //#region src/modules/flow/createFlowSession.ts
-function j(e) {
+function M(e) {
 	return Array.from(new Uint8Array(e), (e) => e.toString(16).padStart(2, "0")).join("");
 }
-async function M(e) {
+async function N(e) {
 	let t = globalThis.crypto?.subtle;
 	if (!t) throw Error("SHA-1 is not available in this environment");
-	return j(await t.digest("SHA-1", new TextEncoder().encode(e)));
+	return M(await t.digest("SHA-1", new TextEncoder().encode(e)));
 }
-async function N(e) {
+async function P(e) {
 	if (typeof e.apiKey == "string") return e.apiKey;
-	if (typeof e.clientId == "string") return M(e.clientId);
+	if (typeof e.clientId == "string") return N(e.clientId);
 	throw Error("Flow self-loading mode requires apiKey or clientId");
 }
-async function P(e, t) {
-	return O(await N(e), {
+async function F(e, t) {
+	return k(await P(e), {
 		configurationId: e.configurationId,
 		externalId: e.externalId,
 		externalCustomerId: e.externalCustomerId,
@@ -55,18 +55,18 @@ async function P(e, t) {
 }
 //#endregion
 //#region src/modules/flow/flowConfig.ts
-function F(e) {
+function I(e) {
 	return typeof e.token == "string";
 }
-function I(e) {
+function L(e) {
 	let t = e;
 	return typeof t.configurationId == "string" && (typeof t.apiKey == "string" || typeof t.clientId == "string");
 }
 //#endregion
 //#region src/modules/flow/preloadFlow.ts
-var L = /* @__PURE__ */ new Map();
-function R(e) {
-	let t = L.get(e);
+var R = /* @__PURE__ */ new Map();
+function z(e) {
+	let t = R.get(e);
 	if (!t) throw Error("Preload state not found");
 	return {
 		get isReady() {
@@ -82,18 +82,18 @@ function R(e) {
 			}
 		},
 		cancel() {
-			t.status === "loading" && (t.unsubscribe && t.unsubscribe(), t.flowManager.stop(), t.readyReject(/* @__PURE__ */ Error("Preload cancelled")), L.delete(e));
+			t.status === "loading" && (t.unsubscribe && t.unsubscribe(), t.flowManager.stop(), t.readyReject(/* @__PURE__ */ Error("Preload cancelled")), R.delete(e));
 		}
 	};
 }
-function z(e) {
+function B(e) {
 	let { token: t } = e;
 	if (e.urlUuid) throw Error("preloadIncodeFlow does not support urlUuid; pass it to <IncodeFlow> directly so the SDK can rotate it on mount.");
-	if (L.has(t)) return R(t);
+	if (R.has(t)) return z(t);
 	let n, r, i = new Promise((e, t) => {
 		n = e, r = t;
-	}), a = S(e);
-	a.getState().presentation.shouldPrefetchHome && h();
+	}), a = m(e);
+	a.getState().presentation.shouldPrefetchHome && g();
 	let o = {
 		status: "loading",
 		flowManager: a,
@@ -102,59 +102,59 @@ function z(e) {
 		readyResolve: n,
 		readyReject: r
 	};
-	return L.set(t, o), (async () => {
+	return R.set(t, o), (async () => {
 		try {
-			await _({
+			await T({
 				token: e.token,
 				lang: e.lang,
 				flowManager: a
 			});
-			let t = e.disableDashboardTheme ? Promise.resolve({}) : m().then((e) => {
+			let t = e.disableDashboardTheme ? Promise.resolve({}) : v().then((e) => {
 				o.theme = e.theme, o.uiConfig = e.uiConfig;
 			});
 			o.unsubscribe = a.subscribe((t) => {
 				if (t.status === "ready") {
 					let n = t;
-					v(n, e.wasmConfig), w(n), o.unsubscribe?.(), o.unsubscribe = void 0, o.status = "ready", o.readyResolve();
+					_(n, e.wasmConfig), h(n), o.unsubscribe?.(), o.unsubscribe = void 0, o.status = "ready", o.readyResolve();
 				} else t.status === "error" && (o.unsubscribe?.(), o.unsubscribe = void 0, o.status = "error", o.error = t.error, o.readyReject(Error(t.error)));
 			}), await t;
 		} catch (e) {
-			o.status = "error", o.error = e instanceof Error ? e.message : "Failed to preload", o.readyReject(e instanceof Error ? e : /* @__PURE__ */ Error("Failed to preload")), L.delete(t);
+			o.status = "error", o.error = e instanceof Error ? e.message : "Failed to preload", o.readyReject(e instanceof Error ? e : /* @__PURE__ */ Error("Failed to preload")), R.delete(t);
 		}
-	})(), R(t);
-}
-function B(e) {
-	return L.get(e) ?? null;
+	})(), z(t);
 }
 function V(e) {
-	let t = B(e);
-	return t && L.delete(e), t;
+	return R.get(e) ?? null;
+}
+function H(e) {
+	let t = V(e);
+	return t && R.delete(e), t;
 }
 //#endregion
 //#region src/modules/flow/useFlowInitialization.ts
-function H(e) {
-	e.getState().presentation.shouldPrefetchHome && h();
+function U(e) {
+	e.getState().presentation.shouldPrefetchHome && g();
 }
-function U() {
-	T() === "desktop" && g();
+function W() {
+	E() === "desktop" && x();
 }
-function W(e) {
-	let { lang: n, disableDashboardTheme: r, enableHome: a, onError: s, useCPF: l } = e, u = F(e) ? e.token : void 0, d = i(null), [f, p] = o(() => {
-		let t = u ? B(u) : null;
+function G(e) {
+	let { lang: n, disableDashboardTheme: r, enableHome: a, onError: s, useCPF: l } = e, u = I(e) ? e.token : void 0, d = i(null), [f, p] = o(() => {
+		let t = u ? V(u) : null;
 		if (u && t?.status === "ready") {
-			let e = V(u);
-			if (e) return d.current = e.flowManager, H(e.flowManager), U(), e.uiConfig && c(e.uiConfig), {
+			let e = H(u);
+			if (e) return d.current = e.flowManager, U(e.flowManager), W(), e.uiConfig && c(e.uiConfig), {
 				status: "ready",
 				flowManager: e.flowManager
 			};
 		}
-		let n = S({
+		let n = m({
 			authHint: e.authHint,
 			lang: e.lang,
 			enableHome: e.enableHome,
 			useCPF: e.useCPF
 		});
-		return d.current = n, H(n), U(), t?.status === "error" ? {
+		return d.current = n, U(n), W(), t?.status === "error" ? {
 			status: "error",
 			error: t.error ?? "Preload failed",
 			flowManager: n
@@ -165,16 +165,16 @@ function W(e) {
 	}), h = i(!1);
 	return t(() => {
 		if (f.status !== "initializing") return;
-		let t = u ? B(u) : null;
+		let t = u ? V(u) : null;
 		if (u && t?.status === "loading") {
 			t.readyPromise.then(() => {
-				let e = V(u);
-				e && (d.current = e.flowManager, H(e.flowManager), U(), e.uiConfig && c(e.uiConfig), p({
+				let e = H(u);
+				e && (d.current = e.flowManager, U(e.flowManager), W(), e.uiConfig && c(e.uiConfig), p({
 					status: "ready",
 					flowManager: e.flowManager
 				}));
 			}).catch((e) => {
-				let t = e instanceof Error ? e.message : "Preload failed", n = e instanceof D ? e.status : void 0;
+				let t = e instanceof Error ? e.message : "Preload failed", n = e instanceof O ? e.status : void 0;
 				p({
 					status: "error",
 					error: t,
@@ -190,19 +190,19 @@ function W(e) {
 		return (async () => {
 			try {
 				let t;
-				if (F(e)) t = e.token, e.urlUuid && await k({
+				if (I(e)) t = e.token, e.urlUuid && await A({
 					urlUuid: e.urlUuid,
 					onboardingId: null,
 					onRefreshed: e.onUrlUuidRefreshed
 				}, a);
-				else if (I(e)) t = (await P(e, a)).token;
+				else if (L(e)) t = (await F(e, a)).token;
 				else throw Error("Flow requires token, or configurationId with apiKey or clientId");
-				await _({
+				await T({
 					token: t,
 					lang: n,
 					flowManager: f.flowManager
 				});
-				let i = r ? Promise.resolve() : m().then((e) => {
+				let i = r ? Promise.resolve() : v().then((e) => {
 					e.uiConfig && c(e.uiConfig);
 				}), o = f.flowManager.waitForReady();
 				await Promise.all([o, i]), p({
@@ -211,7 +211,7 @@ function W(e) {
 				});
 			} catch (e) {
 				if (a.aborted) return;
-				let t = e instanceof Error ? e.message : "Failed to initialize SDK", n = e instanceof D ? e.status : void 0;
+				let t = e instanceof Error ? e.message : "Failed to initialize SDK", n = e instanceof O ? e.status : void 0;
 				p({
 					status: "error",
 					error: t,
@@ -233,32 +233,32 @@ function W(e) {
 }
 //#endregion
 //#region src/modules/flow/flow.tsx
-var G = n(() => import("../homeScreen-3D6x-cBC.js").then((e) => ({ default: e.HomeScreen }))), K = ({ config: n, onFinish: i, onError: o }) => {
-	let { i18n: c } = e(), u = W(r(() => ({
+var K = n(() => import("../homeScreen-3D6x-cBC.js").then((e) => ({ default: e.HomeScreen }))), q = ({ config: n, onFinish: i, onError: o }) => {
+	let { i18n: c } = e(), u = G(r(() => ({
 		...n,
 		onError: o
-	}), [n, o])), [f, m] = l(() => u.flowManager, { autoLoad: !1 }), g = f.presentation.lazyModuleKey, _ = f.status === "ready" ? f.currentStep : void 0, S = C({
-		moduleKey: g,
-		modules: b,
+	}), [n, o])), [f, m] = l(() => u.flowManager, { autoLoad: !1 }), h = f.presentation.lazyModuleKey, v = f.status === "ready" ? f.currentStep : void 0, x = w({
+		moduleKey: h,
+		modules: C,
 		onModuleLoading: n.onModuleLoading,
 		onModuleLoaded: n.onModuleLoaded,
 		onError: o
 	});
 	y({
-		moduleKey: f.status === "ready" && f.homeScreen.visible ? _ : void 0,
-		modules: b
+		moduleKey: f.status === "ready" && f.homeScreen.visible ? v : void 0,
+		modules: C
 	});
-	let w = S.status === "loaded", T = n.enableHome === !0 && f.status === "ready" && f.flow.disableLaunchScreen !== !0 && f.currentStepIndex === 0 && f.homeScreen.visible === !1 && S.status === "loading", D = A(f.presentation.isAwaitingReady === !0, 150), O = A(f.status === "ready" && (S.status === "idle" || S.status === "loading" || S.status === "error"), 150);
-	x(f?.status === "ready" ? f.steps : [], f?.status === "ready" ? f.currentStepIndex : -1, b, w), t(() => {
+	let T = x.status === "loaded", E = n.enableHome === !0 && f.status === "ready" && f.flow.disableLaunchScreen !== !0 && f.currentStepIndex === 0 && f.homeScreen.visible === !1 && x.status === "loading", O = j(f.presentation.isAwaitingReady === !0, 150), k = j(f.status === "ready" && (x.status === "idle" || x.status === "loading" || x.status === "error"), 150);
+	S(f?.status === "ready" ? f.steps : [], f?.status === "ready" ? f.currentStepIndex : -1, C, T), t(() => {
 		if (n.onFlowEvent) return m.subscribeFlowEvent(n.onFlowEvent);
 	}, [m, n.onFlowEvent]), t(() => {
-		f.presentation.shouldPrefetchHome && h();
+		f.presentation.shouldPrefetchHome && g();
 	}, [f.presentation.shouldPrefetchHome]), t(() => {
 		n.lang && c.language !== n.lang && c.changeLanguage(n.lang);
 	}, [n.lang, c]), t(() => {
 		if (f?.status !== "ready" || f.currentStep === "REDIRECT_TO_MOBILE") return;
-		let e = f, t = E(e.flow);
-		t.length > 0 && (n.onWasmWarmup?.(t), v(e, n.wasmConfig));
+		let e = f, t = D(e.flow);
+		t.length > 0 && (n.onWasmWarmup?.(t), _(e, n.wasmConfig));
 	}, [f, n]), t(() => {
 		f?.status === "finished" && i(f.finishStatus);
 	}, [
@@ -274,17 +274,17 @@ var G = n(() => import("../homeScreen-3D6x-cBC.js").then((e) => ({ default: e.Ho
 	]), t(() => {
 		f?.status === "ready" && f.currentStep === "ID" && f.steps.includes("TUTORIAL_ID") && m.completeModule();
 	}, [f, m]);
-	let k = !(n.spinnerConfig?.title || n.spinnerConfig?.subtitle);
+	let A = !(n.spinnerConfig?.title || n.spinnerConfig?.subtitle);
 	if (u.status === "error") return /* @__PURE__ */ s("div", {
 		class: "IncodeFlow",
 		children: /* @__PURE__ */ s("div", { children: ["Error: ", u.error] })
 	});
-	if (f.homeScreen.visible || T) return /* @__PURE__ */ s("div", {
+	if (f.homeScreen.visible || E) return /* @__PURE__ */ s("div", {
 		class: "IncodeFlow",
 		children: /* @__PURE__ */ s(a, {
 			fallback: null,
-			children: /* @__PURE__ */ s(G, {
-				isContinueLoading: f.homeScreen.isContinueLoading || T,
+			children: /* @__PURE__ */ s(K, {
+				isContinueLoading: f.homeScreen.isContinueLoading || E,
 				onContinue: () => m.continueFromHome()
 			})
 		})
@@ -293,14 +293,14 @@ var G = n(() => import("../homeScreen-3D6x-cBC.js").then((e) => ({ default: e.Ho
 		class: "IncodeFlow",
 		children: /* @__PURE__ */ s(d, {
 			spinnerConfig: n.spinnerConfig,
-			hideText: k
+			hideText: A
 		})
 	});
-	if (f.presentation.isAwaitingReady) return D ? /* @__PURE__ */ s("div", {
+	if (f.presentation.isAwaitingReady) return O ? /* @__PURE__ */ s("div", {
 		class: "IncodeFlow",
 		children: /* @__PURE__ */ s(d, {
 			spinnerConfig: n.spinnerConfig,
-			hideText: k
+			hideText: A
 		})
 	}) : /* @__PURE__ */ s("div", { class: "IncodeFlow" });
 	if (f.status === "error") return /* @__PURE__ */ s("div", {
@@ -314,25 +314,25 @@ var G = n(() => import("../homeScreen-3D6x-cBC.js").then((e) => ({ default: e.Ho
 			class: "IncodeFlow",
 			children: /* @__PURE__ */ s(d, {
 				spinnerConfig: n.spinnerConfig,
-				hideText: k
+				hideText: A
 			})
 		});
-		if (e === "IP_ADDRESS") return /* @__PURE__ */ s("div", { class: "IncodeFlow" });
-		if (S.status === "unsupported") return /* @__PURE__ */ s("div", {
+		if (b.has(e)) return /* @__PURE__ */ s("div", { class: "IncodeFlow" });
+		if (x.status === "unsupported") return /* @__PURE__ */ s("div", {
 			class: "IncodeFlow",
 			children: /* @__PURE__ */ s(p, {
 				moduleKey: e,
 				onNext: () => m.completeModule()
 			})
 		});
-		if (S.status === "idle" || S.status === "loading" || S.status === "error") return O ? /* @__PURE__ */ s("div", {
+		if (x.status === "idle" || x.status === "loading" || x.status === "error") return k ? /* @__PURE__ */ s("div", {
 			class: "IncodeFlow",
 			children: /* @__PURE__ */ s(d, {
 				spinnerConfig: n.spinnerConfig,
-				hideText: k
+				hideText: A
 			})
 		}) : /* @__PURE__ */ s("div", { class: "IncodeFlow" });
-		let { Component: a } = S;
+		let { Component: a } = x;
 		if (e === "REDIRECT_TO_MOBILE") return /* @__PURE__ */ s("div", {
 			class: "IncodeFlow",
 			children: /* @__PURE__ */ s(a, {
@@ -651,11 +651,11 @@ var G = n(() => import("../homeScreen-3D6x-cBC.js").then((e) => ({ default: e.Ho
 		});
 	}
 	return null;
-}, q = ({ config: e, onFinish: t = () => {}, onError: n }) => /* @__PURE__ */ s(u, { children: e ? /* @__PURE__ */ s(K, {
+}, J = ({ config: e, onFinish: t = () => {}, onError: n }) => /* @__PURE__ */ s(u, { children: e ? /* @__PURE__ */ s(q, {
 	config: e,
 	onFinish: t,
 	onError: n
 }) : null });
-f(q, "incode-flow");
+f(J, "incode-flow");
 //#endregion
-export { q as IncodeFlow, z as preloadIncodeFlow };
+export { J as IncodeFlow, B as preloadIncodeFlow };

package/dist/flow/styles.css

@@ -2574,6 +2574,14 @@
   flex: 1;
 }
 
+.IncodeManualUploadPage .IncodeManualUploadTabTrigger:focus-visible {
+  border-radius: var(--radius-xs, .125rem);
+  outline-style: var(--tw-outline-style);
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: var(--color-border-status-focus, var(--border-status-focus));
+}
+
 .IncodeManualUploadPage .IncodeManualUploadTabTrigger--active {
   border-bottom-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
   --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
@@ -3807,11 +3815,12 @@
 .IncodeRedirectRoot .IncodeRedirectContainer {
   background-color: var(--color-surface-neutral-50, var(--surface-neutral-50));
   justify-content: center;
-  align-items: center;
+  align-items: safe center;
   width: 100%;
   height: 100%;
   display: flex;
   position: relative;
+  overflow-y: auto;
 }
 
 .IncodeRedirectRoot .IncodeRedirectContainer .IncodeRedirectCard {
@@ -3833,11 +3842,18 @@
   overflow-x: clip;
 }
 
+.IncodeRedirectRoot .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectTopGroup {
+  align-items: center;
+  gap: var(--spacing-32, var(--spacing-32, 32px));
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
 .IncodeRedirectRoot .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions {
   align-items: center;
   gap: var(--spacing-32, var(--spacing-32, 32px));
   width: 100%;
-  height: var(--redirect-options-height);
   max-width: var(--redirect-options-max-width);
   flex-direction: column;
   display: flex;
@@ -3932,8 +3948,7 @@
   display: flex;
 }
 
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectTabs {
-  --max-width-tabs: 676px;
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectTabs {
   justify-content: center;
   align-items: flex-end;
   gap: var(--spacing-12, var(--spacing-12, 12px));
@@ -3941,11 +3956,11 @@
   border-bottom-width: 1px;
   border-color: var(--color-border-neutral-300, var(--border-neutral-300));
   width: 100%;
-  max-width: var(--max-width-tabs);
+  max-width: var(--redirect-tabs-max-width);
   display: flex;
 }
 
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectTabs .IncodeRedirectTab {
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectTabs .IncodeRedirectTab {
   cursor: pointer;
   border-bottom-style: var(--tw-border-style);
   padding-inline: var(--spacing-24, var(--spacing-24, 24px));
@@ -3961,13 +3976,28 @@
   border-bottom-width: 2px;
 }
 
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectTabs .IncodeRedirectTab.IncodeRedirectTabActive {
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectTabs .IncodeRedirectTab:focus-visible {
+  border-radius: var(--radius-xs, .125rem);
+  outline-style: var(--tw-outline-style);
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: var(--color-border-status-focus, var(--border-status-focus));
+}
+
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectTabs .IncodeRedirectTab.IncodeRedirectTabActive {
   border-color: var(--color-text-link-default, var(--text-link-default));
   color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions > [role="tabpanel"] {
+  align-items: center;
+  gap: var(--spacing-32, var(--spacing-32, 32px));
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectTabDescription {
-  --max-width-tab-description: 434px;
   text-align: center;
   font-family: var(--typography-headline-family);
   font-size: var(--typography-headline-h5-size);
@@ -3975,17 +4005,16 @@
   line-height: var(--typography-headline-h5-line-height);
   letter-spacing: var(--typography-headline-h5-letter-spacing);
   color: var(--color-text-body-secondary, var(--text-body-500-secondary));
-  max-width: var(--max-width-tab-description);
+  max-width: var(--redirect-tab-description-max-width);
 }
 
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectQrWrapper {
-  --border-radius-qr-wrapper: 21px;
   border-style: var(--tw-border-style);
   border-width: 1px;
   border-color: var(--color-border-neutral-100, var(--border-neutral-100));
   background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
   padding: var(--spacing-12, var(--spacing-12, 12px));
-  border-radius: var(--border-radius-qr-wrapper);
+  border-radius: var(--redirect-qr-wrapper-border-radius);
   justify-content: center;
   align-items: center;
   display: flex;

package/dist/id/id.es.js

@@ -16,7 +16,7 @@ import { a as w, o as T, r as E } from "../tutorial-CqrvE-t_.js";
 import { t as D } from "../pdfViewer-BGBNL1Ea.js";
 import { t as te } from "../incodeModule-BqCjVgEI.js";
 import { t as ne } from "../id-laser-v-CrFg4bcJ.js";
-import { t as O } from "../tabs-BOKcbiVy.js";
+import { t as O } from "../tabs-DaPyP71c.js";
 import { createIdCaptureManager as re } from "@incodetech/core/id";
 //#region src/shared/fonts/preloadDisplayFont.ts
 var k = !1;
@@ -684,13 +684,16 @@ var F = ({ state: t }) => {
 				triggerClassName: "IncodeManualUploadTabTrigger",
 				activeTriggerClassName: "IncodeManualUploadTabTrigger--active",
 				children: [
-					i ? /* @__PURE__ */ s(O.List, { children: [/* @__PURE__ */ s(O.Trigger, {
-						value: "id",
-						children: r("manualIdUpload.id")
-					}), /* @__PURE__ */ s(O.Trigger, {
-						value: "passport",
-						children: r("manualIdUpload.passport")
-					})] }) : null,
+					i ? /* @__PURE__ */ s(O.List, {
+						label: r("manualIdUpload.tabsLabel"),
+						children: [/* @__PURE__ */ s(O.Trigger, {
+							value: "id",
+							children: r("manualIdUpload.id")
+						}), /* @__PURE__ */ s(O.Trigger, {
+							value: "passport",
+							children: r("manualIdUpload.passport")
+						})]
+					}) : null,
 					n.showIdTab ? /* @__PURE__ */ s(O.Content, {
 						value: "id",
 						children: /* @__PURE__ */ s(Z, {

package/dist/id/styles.css

@@ -8,6 +8,7 @@
       --tw-font-weight: initial;
       --tw-border-style: solid;
       --tw-leading: initial;
+      --tw-outline-style: solid;
       --tw-duration: initial;
     }
   }
@@ -896,6 +897,14 @@
   flex: 1;
 }
 
+.IncodeManualUploadPage .IncodeManualUploadTabTrigger:focus-visible {
+  border-radius: var(--radius-xs, .125rem);
+  outline-style: var(--tw-outline-style);
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: var(--color-border-status-focus, var(--border-status-focus));
+}
+
 .IncodeManualUploadPage .IncodeManualUploadTabTrigger--active {
   border-bottom-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
   --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
@@ -1266,6 +1275,12 @@
   inherits: false
 }
 
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
 @property --tw-duration {
   syntax: "*";
   inherits: false