@incodetech/web 0.0.0-dev-20260526-ff50bd63 → 0.0.0-dev-20260527-2b0f512a

package/dist/identity-reuse/identity-reuse.es.js

@@ -6,194 +6,284 @@ import { t as o } from "../page-C1yT4DLb.js";
 import { t as s } from "../spinner-CKnjVHxw.js";
 import { t as c } from "../button-DcCUEn2n.js";
 import { t as l } from "../incodeModule-CHzKl22Y.js";
-import { createIdentityReuseManager as u } from "@incodetech/core/identity-reuse";
+import { SCAN_NEW_DOCUMENT as u, createIdentityReuseManager as d } from "@incodetech/core/identity-reuse";
 //#region src/modules/identity-reuse/identity-reuse.tsx
-var d = ({ name: e }) => /* @__PURE__ */ n("div", {
-	class: "IncodeIdentityReuseCircle",
-	children: /* @__PURE__ */ n("span", {
-		class: "IncodeIdentityReuseCircleText",
-		children: e
-	})
-}), f = () => /* @__PURE__ */ n("svg", {
-	class: "IncodeIdentityReuseArrow",
-	viewBox: "0 0 24 24",
-	fill: "none",
+var f = {
+	USA: "US",
+	MEX: "MX",
+	CAN: "CA",
+	GBR: "GB",
+	DEU: "DE",
+	FRA: "FR",
+	ESP: "ES",
+	ITA: "IT",
+	BRA: "BR",
+	ARG: "AR",
+	COL: "CO",
+	CHL: "CL",
+	PER: "PE",
+	AUS: "AU",
+	NZL: "NZ",
+	JPN: "JP",
+	KOR: "KR",
+	CHN: "CN",
+	IND: "IN",
+	RUS: "RU",
+	ZAF: "ZA",
+	NGA: "NG",
+	EGY: "EG",
+	ARE: "AE",
+	SAU: "SA",
+	ISR: "IL",
+	TUR: "TR",
+	NLD: "NL",
+	BEL: "BE",
+	CHE: "CH",
+	AUT: "AT",
+	SWE: "SE",
+	NOR: "NO",
+	DNK: "DK",
+	FIN: "FI",
+	POL: "PL",
+	PRT: "PT",
+	IRL: "IE",
+	GRC: "GR",
+	CZE: "CZ",
+	HUN: "HU",
+	ROU: "RO",
+	UKR: "UA",
+	PHL: "PH",
+	IDN: "ID",
+	MYS: "MY",
+	SGP: "SG",
+	THA: "TH",
+	VNM: "VN",
+	PAK: "PK",
+	BGD: "BD",
+	HKG: "HK",
+	TWN: "TW",
+	VEN: "VE",
+	ECU: "EC",
+	GTM: "GT",
+	CRI: "CR",
+	PAN: "PA",
+	DOM: "DO",
+	PRI: "PR",
+	CUB: "CU",
+	JAM: "JM",
+	HND: "HN",
+	SLV: "SV",
+	NIC: "NI",
+	BOL: "BO",
+	PRY: "PY",
+	URY: "UY",
+	KEN: "KE",
+	GHA: "GH",
+	MAR: "MA",
+	TUN: "TN",
+	KWT: "KW",
+	QAT: "QA",
+	BHR: "BH",
+	OMN: "OM",
+	JOR: "JO",
+	LBN: "LB",
+	SRB: "RS",
+	HRV: "HR",
+	SVK: "SK",
+	SVN: "SI",
+	BGR: "BG",
+	LTU: "LT",
+	LVA: "LV",
+	EST: "EE",
+	ISL: "IS",
+	LUX: "LU",
+	MLT: "MT",
+	CYP: "CY"
+};
+function p(e) {
+	if (!e) return "";
+	let t = e.toUpperCase(), n = t.length === 3 ? f[t] ?? "" : t;
+	if (n.length !== 2) return "";
+	let r = 127397;
+	return String.fromCodePoint(n.charCodeAt(0) + r, n.charCodeAt(1) + r);
+}
+function m(e, t) {
+	if (!Number.isFinite(e) || e <= 0) return null;
+	let n = e >= 0xe8d4a51000 ? e : e * 1e3, r = new Date(n);
+	return Number.isNaN(r.getTime()) ? null : new Intl.DateTimeFormat(t, {
+		day: "2-digit",
+		month: "short",
+		year: "numeric"
+	}).format(r);
+}
+var h = ({ checked: e }) => /* @__PURE__ */ n("span", {
+	class: `IncodeIdentityReuseRadio ${e ? "IncodeIdentityReuseRadioChecked" : ""}`,
 	"aria-hidden": "true",
-	children: /* @__PURE__ */ n("path", {
-		d: "M5 12h14M13 6l6 6-6 6",
-		stroke: "currentColor",
-		"stroke-width": "2",
-		"stroke-linecap": "round",
-		"stroke-linejoin": "round"
-	})
-}), p = ({ providingOrganization: e, receivingOrganization: t }) => /* @__PURE__ */ n("div", {
-	class: "IncodeIdentityReuseVisualization",
-	children: [
-		/* @__PURE__ */ n("div", {
-			class: "IncodeIdentityReuseCircleWrapper",
-			children: /* @__PURE__ */ n(d, { name: e })
-		}),
-		/* @__PURE__ */ n("div", {
-			class: "IncodeIdentityReuseArrowWrapper",
-			children: /* @__PURE__ */ n(f, {})
-		}),
-		/* @__PURE__ */ n("div", {
-			class: "IncodeIdentityReuseCircleWrapper",
-			children: /* @__PURE__ */ n(d, { name: t })
+	children: e ? /* @__PURE__ */ n("span", { class: "IncodeIdentityReuseRadioInner" }) : null
+}), g = ({ document: t, selected: r, recommended: i, tabIndex: a, onSelect: o, locale: s }) => {
+	let { t: c } = e(), l = c(`identityReuse.documentType.${t.documentType}`), u = p(t.countryCode), d = m(t.verifiedAt, s), f = c("identityReuse.verified", { defaultValue: "Verified" }), g = d ? `${f} ${d}` : null;
+	return /* @__PURE__ */ n("button", {
+		type: "button",
+		class: `IncodeIdentityReuseCard ${r ? "IncodeIdentityReuseCardSelected" : ""}`,
+		role: "radio",
+		"aria-checked": r,
+		tabIndex: a,
+		onClick: o,
+		"data-testid": `identity-reuse-document-${t.id}`,
+		children: /* @__PURE__ */ n("div", {
+			class: "IncodeIdentityReuseCardBody",
+			children: [
+				/* @__PURE__ */ n("div", {
+					class: "IncodeIdentityReuseCardHeader",
+					children: [/* @__PURE__ */ n("div", {
+						class: "IncodeIdentityReuseCardHeaderLeft",
+						children: [/* @__PURE__ */ n("span", {
+							class: "IncodeIdentityReuseCardTypeLabel",
+							children: l
+						}), i ? /* @__PURE__ */ n("span", {
+							class: "IncodeIdentityReuseBadgeRecommended",
+							children: c("identityReuse.badge.recommended")
+						}) : null]
+					}), /* @__PURE__ */ n(h, { checked: r })]
+				}),
+				/* @__PURE__ */ n("p", {
+					class: "IncodeIdentityReuseCardIdentifier",
+					children: [u ? /* @__PURE__ */ n("span", {
+						"aria-hidden": "true",
+						children: u
+					}) : null, /* @__PURE__ */ n("span", { children: t.maskedNumber })]
+				}),
+				g ? /* @__PURE__ */ n("p", {
+					class: "IncodeIdentityReuseCardVerified",
+					children: g
+				}) : null
+			]
 		})
-	]
-}), m = ({ config: a, manager: l, onFinish: d, onError: f }) => {
-	let { t: m } = e(), [h, g] = r(() => {
+	});
+}, _ = ({ selected: t, tabIndex: r, onSelect: i }) => {
+	let { t: a } = e();
+	return /* @__PURE__ */ n("button", {
+		type: "button",
+		class: `IncodeIdentityReuseCard IncodeIdentityReuseScanNewCard ${t ? "IncodeIdentityReuseCardSelected" : ""}`,
+		role: "radio",
+		"aria-checked": t,
+		tabIndex: r,
+		onClick: i,
+		"data-testid": "identity-reuse-scan-new",
+		children: [/* @__PURE__ */ n("div", {
+			class: "IncodeIdentityReuseScanNewBody",
+			children: [/* @__PURE__ */ n("span", {
+				class: "IncodeIdentityReuseCardTypeLabel",
+				children: a("identityReuse.scanANewDocument")
+			}), /* @__PURE__ */ n("span", {
+				class: "IncodeIdentityReuseBadgeSlowest",
+				children: a("identityReuse.badge.slowest")
+			})]
+		}), /* @__PURE__ */ n(h, { checked: t })]
+	});
+}, v = ({ config: a, manager: l, onFinish: f, onError: p }) => {
+	let { t: m, i18n: h } = e(), v = h.language || "en", [y, b] = r(() => {
 		if (l) return l;
 		if (!a) throw Error("IdentityReuse config is required when no manager is provided");
-		return u({ config: a });
+		return d({ config: a });
 	}, { manageLifecycle: !l });
 	i({
-		status: h.status === "finished" ? "finished" : "loading",
-		onFinish: d
+		status: y.status === "finished" ? "finished" : "loading",
+		onFinish: f
 	});
-	let _ = h.status === "error" ? h.error : void 0;
-	return t(() => {
-		_ && f?.(_);
-	}, [_, f]), h.status === "idle" || h.status === "loading" || h.status === "submitContinue" || h.status === "submitSkip" ? /* @__PURE__ */ n(s, { title: m("identityReuse.loading") }) : h.status === "oneCandidateFound" ? /* @__PURE__ */ n(o, {
-		className: "IncodeIdentityReusePage",
-		title: m("identityReuse.title"),
-		subtitle: m("identityReuse.subtitle"),
-		children: [/* @__PURE__ */ n("div", {
-			class: "IncodeIdentityReuseContent",
-			children: [/* @__PURE__ */ n(p, {
-				providingOrganization: h.selectedOrganizationName,
-				receivingOrganization: h.currentOrganizationName
-			}), /* @__PURE__ */ n("p", {
-				class: "IncodeIdentityReuseDescription",
-				children: m("identityReuse.description", { companyName: h.currentOrganizationName })
-			})]
-		}), /* @__PURE__ */ n("div", {
-			class: "IncodeIdentityReuseActions",
-			children: [/* @__PURE__ */ n(c, {
-				onClick: () => g.submitCandidate(),
-				"data-testid": "identity-reuse-continue-button",
-				children: m("identityReuse.cta.continue")
-			}), /* @__PURE__ */ n(c, {
-				onClick: () => g.skip(),
-				variant: "link",
-				"data-testid": "identity-reuse-verify-button",
-				children: m("identityReuse.cta.verify")
-			})]
-		})]
-	}) : h.status === "multiCandidatesFound" ? h.selectionPhase === "candidateSelected" ? /* @__PURE__ */ n(o, {
-		className: "IncodeIdentityReusePage",
-		title: m("identityReuse.title"),
-		subtitle: m("identityReuse.subtitle"),
-		children: [/* @__PURE__ */ n("div", {
-			class: "IncodeIdentityReuseContent",
-			children: [/* @__PURE__ */ n(p, {
-				providingOrganization: h.selectedOrganizationName,
-				receivingOrganization: h.currentOrganizationName
-			}), /* @__PURE__ */ n("p", {
-				class: "IncodeIdentityReuseDescription",
-				children: m("identityReuse.description", { companyName: h.currentOrganizationName })
-			})]
-		}), /* @__PURE__ */ n("div", {
-			class: "IncodeIdentityReuseActions",
-			children: [
-				/* @__PURE__ */ n(c, {
-					onClick: () => g.submitCandidate(),
-					"data-testid": "identity-reuse-continue-button",
-					children: m("identityReuse.cta.continue")
-				}),
-				/* @__PURE__ */ n(c, {
-					onClick: () => g.changeCandidate(),
-					variant: "link",
-					"data-testid": "identity-reuse-change-button",
-					children: m("identityReuse.cta.change")
-				}),
-				/* @__PURE__ */ n(c, {
-					onClick: () => g.skip(),
-					variant: "link",
-					"data-testid": "identity-reuse-verify-button",
-					children: m("identityReuse.cta.verify")
-				})
-			]
-		})]
-	}) : /* @__PURE__ */ n(o, {
-		className: "IncodeIdentityReusePage",
-		title: m("identityReuse.selectTitle"),
-		subtitle: m("identityReuse.selectSubtitle"),
-		children: [/* @__PURE__ */ n("div", {
-			class: "IncodeIdentityReuseContent",
+	let x = y.status === "error" ? y.error : void 0;
+	if (t(() => {
+		x && p?.(x);
+	}, [x, p]), y.status === "idle" || y.status === "loading" || y.status === "submitting") return /* @__PURE__ */ n(s, { title: m("identityReuse.loading") });
+	if (y.status === "documentsFound") {
+		let e = y.selectedDocumentId, t = [...y.documents.map((e) => e.id), u], r = e === void 0 ? 0 : Math.max(0, t.findIndex((t) => t === e)), i = m(e === u ? "identityReuse.cta.scanNew" : "identityReuse.cta.confirm"), a = (e) => {
+			let t = e.currentTarget;
+			if (!t) return;
+			let n = t.querySelectorAll("[role=\"radio\"]");
+			if (n.length === 0) return;
+			let r = Array.from(n).findIndex((e) => e === document.activeElement);
+			if (r === -1) return;
+			let i = r;
+			switch (e.key) {
+				case "ArrowDown":
+				case "ArrowRight":
+					i = (r + 1) % n.length;
+					break;
+				case "ArrowUp":
+				case "ArrowLeft":
+					i = (r - 1 + n.length) % n.length;
+					break;
+				case "Home":
+					i = 0;
+					break;
+				case "End":
+					i = n.length - 1;
+					break;
+				default: return;
+			}
+			e.preventDefault();
+			let a = n[i];
+			a && (a.focus(), a.click());
+		};
+		return /* @__PURE__ */ n(o, {
+			className: "IncodeIdentityReusePage",
+			title: m("identityReuse.title"),
+			subtitle: m("identityReuse.subtitle"),
 			children: /* @__PURE__ */ n("div", {
-				class: "IncodeIdentityReuseCandidateList",
-				children: h.candidateOrganizationNames.map((e) => /* @__PURE__ */ n("button", {
-					type: "button",
-					class: "IncodeIdentityReuseCandidateItem",
-					onClick: () => {
-						g.startSelection(), g.chooseCandidate(e);
-					},
-					"data-testid": `identity-reuse-candidate-${e}`,
-					children: [/* @__PURE__ */ n("span", {
-						class: "IncodeIdentityReuseCandidateItemName",
-						children: e
-					}), /* @__PURE__ */ n("svg", {
-						class: "IncodeIdentityReuseCandidateItemChevron",
-						viewBox: "0 0 24 24",
-						fill: "none",
-						"aria-hidden": "true",
-						children: /* @__PURE__ */ n("path", {
-							d: "M9 6l6 6-6 6",
-							stroke: "currentColor",
-							"stroke-width": "2",
-							"stroke-linecap": "round",
-							"stroke-linejoin": "round"
-						})
+				class: "IncodeIdentityReuseBody",
+				children: [/* @__PURE__ */ n("div", {
+					class: "IncodeIdentityReuseList",
+					role: "radiogroup",
+					"aria-label": m("identityReuse.title"),
+					onKeyDown: a,
+					children: [y.documents.map((t, i) => /* @__PURE__ */ n(g, {
+						document: t,
+						selected: e === t.id,
+						recommended: i === 0,
+						tabIndex: i === r ? 0 : -1,
+						onSelect: () => b.chooseDocument(t.id),
+						locale: v
+					}, t.id)), /* @__PURE__ */ n(_, {
+						selected: e === u,
+						tabIndex: r === y.documents.length ? 0 : -1,
+						onSelect: () => b.chooseDocument(u)
 					})]
-				}, e))
+				}), /* @__PURE__ */ n("div", {
+					class: "IncodeIdentityReuseActions",
+					children: /* @__PURE__ */ n(c, {
+						onClick: () => b.submit(),
+						disabled: e === void 0,
+						"data-testid": "identity-reuse-confirm-button",
+						children: i
+					})
+				})]
 			})
-		}), /* @__PURE__ */ n("div", {
-			class: "IncodeIdentityReuseActions",
-			children: /* @__PURE__ */ n(c, {
-				onClick: () => g.skip(),
-				variant: "link",
-				"data-testid": "identity-reuse-verify-button",
-				children: m("identityReuse.cta.verify")
-			})
-		})]
-	}) : h.status === "noCandidatesFound" ? /* @__PURE__ */ n(o, {
-		className: "IncodeIdentityReusePage",
-		title: m("identityReuse.noCandidatesTitle"),
-		subtitle: m("identityReuse.noCandidatesSubtitle"),
-		children: [/* @__PURE__ */ n("div", { class: "IncodeIdentityReuseContent" }), /* @__PURE__ */ n("div", {
-			class: "IncodeIdentityReuseActions",
-			children: /* @__PURE__ */ n(c, {
-				onClick: () => g.skip(),
-				"data-testid": "identity-reuse-continue-button",
-				children: m("identityReuse.cta.continueVerification")
-			})
-		})]
-	}) : h.status === "error" ? /* @__PURE__ */ n(o, {
+		});
+	}
+	return y.status === "error" ? /* @__PURE__ */ n(o, {
 		className: "IncodeIdentityReusePage",
 		title: m("identityReuse.errorTitle"),
-		subtitle: h.error,
+		subtitle: y.error,
 		children: [/* @__PURE__ */ n("div", { class: "IncodeIdentityReuseContent" }), /* @__PURE__ */ n("div", {
 			class: "IncodeIdentityReuseActions",
 			children: [/* @__PURE__ */ n(c, {
-				onClick: () => g.retry(),
+				onClick: () => b.retry(),
 				"data-testid": "identity-reuse-retry-button",
 				children: m("identityReuse.cta.retry")
 			}), /* @__PURE__ */ n(c, {
-				onClick: () => g.skip(),
+				onClick: () => b.skip(),
 				variant: "link",
-				"data-testid": "identity-reuse-verify-button",
-				children: m("identityReuse.cta.verify")
+				"data-testid": "identity-reuse-skip-button",
+				children: m("identityReuse.cta.skip")
 			})]
 		})]
-	}) : (h.status, null);
-}, h = ({ config: e, manager: t, onFinish: r, onError: i }) => /* @__PURE__ */ n(a, { children: e || t ? /* @__PURE__ */ n(m, {
+	}) : (y.status, null);
+}, y = ({ config: e, manager: t, onFinish: r, onError: i }) => /* @__PURE__ */ n(a, { children: e || t ? /* @__PURE__ */ n(v, {
 	config: e,
 	manager: t,
 	onFinish: r,
 	onError: i
 }) : null });
-l(h, "incode-identity-reuse");
+l(y, "incode-identity-reuse");
 //#endregion
-export { h as IdentityReuse };
+export { y as IdentityReuse };

package/dist/identity-reuse/styles.css

@@ -2,7 +2,6 @@
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
-      --tw-font-weight: initial;
       --tw-border-style: solid;
       --tw-duration: initial;
     }
@@ -25,130 +24,185 @@
   animation: .4s ease-out fadeIn;
 }
 
-.IncodeIdentityReuseContent {
+.IncodeIdentityReusePage .IncodeIdentityReuseBody {
+  padding-top: var(--spacing-32);
   flex-direction: column;
   flex: 1;
-  justify-content: center;
-  align-items: center;
   display: flex;
 }
 
-.IncodeIdentityReuseVisualization {
-  justify-content: center;
-  align-items: center;
+.IncodeIdentityReusePage .IncodeIdentityReuseList {
   gap: var(--spacing-8, var(--spacing-8, 8px));
+  flex-direction: column;
   width: 100%;
   display: flex;
 }
 
-.IncodeIdentityReuseCircleWrapper {
-  flex: 1;
-  justify-content: center;
-  align-items: center;
+.IncodeIdentityReusePage .IncodeIdentityReuseCard {
+  cursor: pointer;
+  border-radius: var(--radius-medium, var(--border-radius-medium));
+  border-style: var(--tw-border-style);
+  width: 100%;
+  padding: var(--spacing-16, var(--spacing-16, 16px));
+  text-align: left;
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
+  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
+  --tw-duration: .2s;
+  background-color: var(--surface-neutral-0);
+  border-width: 1px;
+  border-color: var(--border-neutral-100);
+  flex-direction: column;
+  align-items: stretch;
+  transition-duration: .2s;
   display: flex;
 }
 
-.IncodeIdentityReuseCircle {
-  aspect-ratio: 1;
-  border-radius: var(--radius-full, var(--border-radius-full));
+.IncodeIdentityReusePage .IncodeIdentityReuseCard:hover {
+  border-color: var(--border-neutral-200);
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCard:focus-visible {
+  outline: var(--focus-outline-width) solid var(--border-status-focus);
+  outline-offset: var(--focus-outline-width);
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCardSelected, .IncodeIdentityReusePage .IncodeIdentityReuseCardSelected:hover {
   background-color: var(--surface-brand-50);
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  max-width: 180px;
-  display: flex;
+  border-color: var(--border-brand-500);
 }
 
-.IncodeIdentityReuseCircleText {
-  padding-inline: var(--spacing-16, var(--spacing-16, 16px));
-  text-align: center;
-  font-size: var(--text-18, var(--primitive-typography-size-18));
-  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  color: var(--surface-brand-500);
+.IncodeIdentityReusePage .IncodeIdentityReuseCardBody {
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  flex-direction: column;
+  flex: 1;
+  display: flex;
 }
 
-.IncodeIdentityReuseArrowWrapper {
-  justify-content: center;
+.IncodeIdentityReusePage .IncodeIdentityReuseCardHeader {
+  justify-content: space-between;
   align-items: center;
-  width: 10%;
+  width: 100%;
   display: flex;
 }
 
-.IncodeIdentityReuseArrow {
-  width: 100%;
-  color: var(--text-body-800-secondary);
+.IncodeIdentityReusePage .IncodeIdentityReuseCardHeaderLeft {
+  align-items: center;
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  display: flex;
 }
 
-.IncodeIdentityReuseDescription {
-  margin: var(--spacing-0, var(--spacing-none, 0px));
-  margin-top: var(--spacing-24, var(--spacing-24, 24px));
-  text-align: center;
-  font-size: var(--text-16, var(--primitive-typography-size-16));
-  color: var(--text-body-800-secondary);
+.IncodeIdentityReusePage .IncodeIdentityReuseCardTypeLabel {
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
+  color: var(--text-body-800-primary);
 }
 
-.IncodeIdentityReuseActions {
+.IncodeIdentityReusePage .IncodeIdentityReuseCardIdentifier {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  align-items: center;
   gap: var(--spacing-8, var(--spacing-8, 8px));
-  flex-direction: column;
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h5-size);
+  font-weight: var(--typography-headline-h5-weight);
+  line-height: var(--typography-headline-h5-line-height);
+  letter-spacing: var(--typography-headline-h5-letter-spacing);
+  color: var(--text-body-800-primary);
   display: flex;
 }
 
-.IncodeIdentityReuseCandidateList {
-  gap: var(--spacing-8, var(--spacing-8, 8px));
-  flex-direction: column;
-  width: 100%;
-  display: flex;
+.IncodeIdentityReusePage .IncodeIdentityReuseCardVerified {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
+  color: var(--text-body-500-secondary);
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseBadgeRecommended {
+  border-radius: var(--radius-x-small, var(--border-radius-x-small));
+  padding-inline: var(--spacing-4, var(--spacing-4, 4px));
+  padding-block: var(--spacing-2, var(--spacing-2, 2px));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-s-regular-size);
+  font-weight: var(--typography-body-s-regular-weight);
+  line-height: var(--typography-body-s-regular-line-height);
+  letter-spacing: var(--typography-body-s-regular-letter-spacing);
+  background-color: var(--surface-brand-500-static);
+  color: var(--text-body-0-static);
+  align-items: center;
+  display: inline-flex;
 }
 
-.IncodeIdentityReuseCandidateItem {
-  cursor: pointer;
-  border-radius: var(--radius-medium, var(--border-radius-medium));
+.IncodeIdentityReusePage .IncodeIdentityReuseBadgeSlowest {
+  border-radius: var(--radius-x-small, var(--border-radius-x-small));
   border-style: var(--tw-border-style);
-  width: 100%;
-  padding-inline: var(--spacing-16, var(--spacing-16, 16px));
-  padding-block: var(--spacing-16, var(--spacing-16, 16px));
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
-  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
-  --tw-duration: .2s;
-  background-color: var(--surface-brand-50);
+  padding-inline: var(--spacing-4, var(--spacing-4, 4px));
+  padding-block: var(--spacing-2, var(--spacing-2, 2px));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-s-regular-size);
+  font-weight: var(--typography-body-s-regular-weight);
+  line-height: var(--typography-body-s-regular-line-height);
+  letter-spacing: var(--typography-body-s-regular-letter-spacing);
+  background-color: var(--surface-neutral-50);
   border-width: 1px;
-  border-color: var(--surface-brand-50);
-  justify-content: space-between;
+  border-color: var(--border-neutral-200);
+  color: var(--text-body-800-primary);
   align-items: center;
-  transition-duration: .2s;
-  display: flex;
+  display: inline-flex;
 }
 
-.IncodeIdentityReuseCandidateItem:hover {
-  border-color: var(--surface-brand-500);
+.IncodeIdentityReusePage .IncodeIdentityReuseScanNewCard {
+  align-items: center;
+  gap: var(--spacing-20);
+  flex-direction: row;
 }
 
-.IncodeIdentityReuseCandidateItem:focus-visible {
-  --tw-outline-style: none;
-  border-color: var(--border-status-focus);
-  box-shadow: 0 0 0 2px var(--border-status-focus);
-  outline-style: none;
+.IncodeIdentityReusePage .IncodeIdentityReuseScanNewBody {
+  align-items: center;
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  flex: 1;
+  display: flex;
 }
 
-.IncodeIdentityReuseCandidateItemName {
-  font-size: var(--text-16, var(--primitive-typography-size-16));
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  color: var(--text-body-800-primary);
+.IncodeIdentityReusePage .IncodeIdentityReuseRadio {
+  border-radius: var(--radius-full, var(--border-radius-full));
+  border-style: var(--tw-border-style);
+  width: var(--spacing-24);
+  height: var(--spacing-24);
+  background-color: var(--surface-neutral-50);
+  border-width: 1px;
+  border-color: var(--border-neutral-200);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
 }
 
-.IncodeIdentityReuseCandidateItemChevron {
-  width: var(--spacing-24, var(--spacing-24, 24px));
-  height: var(--spacing-24, var(--spacing-24, 24px));
-  color: var(--text-body-800-secondary);
-  flex-shrink: 0;
+.IncodeIdentityReusePage .IncodeIdentityReuseRadioChecked {
+  background-color: var(--surface-brand-500-static);
+  border-color: var(--surface-brand-500-static);
 }
 
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false
+.IncodeIdentityReusePage .IncodeIdentityReuseRadioInner {
+  border-radius: var(--radius-full, var(--border-radius-full));
+  width: var(--spacing-8);
+  height: var(--spacing-8);
+  background-color: var(--surface-neutral-0-static);
+  display: block;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseActions {
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  padding-top: var(--spacing-16);
+  flex-direction: column;
+  margin-top: auto;
+  display: flex;
 }
 
 @property --tw-border-style {

package/dist/workflow/styles.css

@@ -2880,6 +2880,51 @@
     }
   }
 
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+
   .incode-container {
     width: 100%;
   }
@@ -3371,6 +3416,11 @@
     font-weight: var(--typography-button-m-underlined-weight);
     line-height: var(--typography-button-m-underlined-line-height);
     letter-spacing: var(--typography-button-m-underlined-letter-spacing);
+    font-family: var(--typography-button-family);
+    font-size: var(--typography-button-m-underlined-size);
+    font-weight: var(--typography-button-m-underlined-weight);
+    line-height: var(--typography-button-m-underlined-line-height);
+    letter-spacing: var(--typography-button-m-underlined-letter-spacing);
     text-decoration-line: underline;
     text-decoration-style: solid;
     text-decoration-thickness: auto;
@@ -6770,6 +6820,191 @@
   display: flex;
 }
 
+.IncodeIdentityReusePage {
+  animation: .4s ease-out fadeIn;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseBody {
+  padding-top: var(--spacing-32);
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseList {
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCard {
+  cursor: pointer;
+  border-radius: var(--radius-medium, var(--border-radius-medium));
+  border-style: var(--tw-border-style);
+  width: 100%;
+  padding: var(--spacing-16, var(--spacing-16, 16px));
+  text-align: left;
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
+  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
+  --tw-duration: .2s;
+  background-color: var(--surface-neutral-0);
+  border-width: 1px;
+  border-color: var(--border-neutral-100);
+  flex-direction: column;
+  align-items: stretch;
+  transition-duration: .2s;
+  display: flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCard:hover {
+  border-color: var(--border-neutral-200);
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCard:focus-visible {
+  outline: var(--focus-outline-width) solid var(--border-status-focus);
+  outline-offset: var(--focus-outline-width);
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCardSelected, .IncodeIdentityReusePage .IncodeIdentityReuseCardSelected:hover {
+  background-color: var(--surface-brand-50);
+  border-color: var(--border-brand-500);
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCardBody {
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCardHeader {
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCardHeaderLeft {
+  align-items: center;
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  display: flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCardTypeLabel {
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
+  color: var(--text-body-800-primary);
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCardIdentifier {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  align-items: center;
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h5-size);
+  font-weight: var(--typography-headline-h5-weight);
+  line-height: var(--typography-headline-h5-line-height);
+  letter-spacing: var(--typography-headline-h5-letter-spacing);
+  color: var(--text-body-800-primary);
+  display: flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCardVerified {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
+  color: var(--text-body-500-secondary);
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseBadgeRecommended {
+  border-radius: var(--radius-x-small, var(--border-radius-x-small));
+  padding-inline: var(--spacing-4, var(--spacing-4, 4px));
+  padding-block: var(--spacing-2, var(--spacing-2, 2px));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-s-regular-size);
+  font-weight: var(--typography-body-s-regular-weight);
+  line-height: var(--typography-body-s-regular-line-height);
+  letter-spacing: var(--typography-body-s-regular-letter-spacing);
+  background-color: var(--surface-brand-500-static);
+  color: var(--text-body-0-static);
+  align-items: center;
+  display: inline-flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseBadgeSlowest {
+  border-radius: var(--radius-x-small, var(--border-radius-x-small));
+  border-style: var(--tw-border-style);
+  padding-inline: var(--spacing-4, var(--spacing-4, 4px));
+  padding-block: var(--spacing-2, var(--spacing-2, 2px));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-s-regular-size);
+  font-weight: var(--typography-body-s-regular-weight);
+  line-height: var(--typography-body-s-regular-line-height);
+  letter-spacing: var(--typography-body-s-regular-letter-spacing);
+  background-color: var(--surface-neutral-50);
+  border-width: 1px;
+  border-color: var(--border-neutral-200);
+  color: var(--text-body-800-primary);
+  align-items: center;
+  display: inline-flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseScanNewCard {
+  align-items: center;
+  gap: var(--spacing-20);
+  flex-direction: row;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseScanNewBody {
+  align-items: center;
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  flex: 1;
+  display: flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseRadio {
+  border-radius: var(--radius-full, var(--border-radius-full));
+  border-style: var(--tw-border-style);
+  width: var(--spacing-24);
+  height: var(--spacing-24);
+  background-color: var(--surface-neutral-50);
+  border-width: 1px;
+  border-color: var(--border-neutral-200);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseRadioChecked {
+  background-color: var(--surface-brand-500-static);
+  border-color: var(--surface-brand-500-static);
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseRadioInner {
+  border-radius: var(--radius-full, var(--border-radius-full));
+  width: var(--spacing-8);
+  height: var(--spacing-8);
+  background-color: var(--surface-neutral-0-static);
+  display: block;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseActions {
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  padding-top: var(--spacing-16);
+  flex-direction: column;
+  margin-top: auto;
+  display: flex;
+}
+
 .IncodeHome {
   background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
   width: 100%;

package/dist/workflow/workflow.es.js

@@ -15,7 +15,8 @@ import { createWorkflowManager as E } from "@incodetech/core/workflow";
 var D = {
 	...h,
 	REDIRECT_TO_MOBILE: () => import("../redirectToMobile-DQHIQWzY.js").then((e) => e.RedirectToMobile),
-	ID: () => import("../id-verification/id-verification.es.js").then((e) => e.IdVerification)
+	ID: () => import("../id-verification/id-verification.es.js").then((e) => e.IdVerification),
+	IDENTITY_REUSE: () => import("../identity-reuse/identity-reuse.es.js").then((e) => e.IdentityReuse)
 };
 async function O() {
 	try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incodetech/web",
-  "version": "0.0.0-dev-20260526-ff50bd63",
+  "version": "0.0.0-dev-20260527-2b0f512a",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/IncodeTechnologies/incode-web-sdk.git"
@@ -246,7 +246,7 @@
     "qrcode": "^1.5.4",
     "signature_pad": "^5.1.3",
     "tailwindcss": "^4.1.17",
-    "@incodetech/core": "0.0.0-dev-20260526-ff50bd63"
+    "@incodetech/core": "0.0.0-dev-20260527-2b0f512a"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.53.3",