@incodetech/web 2.3.2 → 2.4.0-rc.1

package/dist/id-verification/id-verification.es.js

@@ -1,8 +1,8 @@
 import { v as u } from "../vendor-preact-C0jX1Cbq.js";
-import { S as useManager, b as useModuleTerminalCallbacks, t as IncodeComponent } from "../incodeComponent--XJZ07QN.js";
-import { t as Spinner } from "../spinner-C9D0Usrj.js";
-import { t as ExpiredId } from "../expiredId-BhQM_AcZ.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-n_Am6zwM.js";
+import { S as withSessionExpiry, t as IncodeComponent, x as useManager, y as useModuleTerminalCallbacks } from "../incodeComponent-WXvcRKkM.js";
+import { t as Spinner } from "../spinner-ceW7fzMV.js";
+import { t as ExpiredId } from "../expiredId-DfqiC9HI.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-DsWO19Nv.js";
 import { createIdVerificationManager } from "@incodetech/core/id-verification";
 //#region src/modules/id-verification/id-verification.tsx
 var IdVerificationContent = ({ config, manager: externalManager, onFinish }) => {
@@ -18,11 +18,12 @@ var IdVerificationContent = ({ config, manager: externalManager, onFinish }) =>
 	if (state.status === "expired") return /* @__PURE__ */ u(ExpiredId, { onContinue: () => manager.continue() });
 	return /* @__PURE__ */ u(Spinner, { fullScreen: true });
 };
-var IdVerification = ({ config, manager, onFinish }) => /* @__PURE__ */ u(IncodeComponent, { children: config || manager ? /* @__PURE__ */ u(IdVerificationContent, {
+var IdVerificationContentRoot = ({ config, manager, onFinish }) => /* @__PURE__ */ u(IncodeComponent, { children: config || manager ? /* @__PURE__ */ u(IdVerificationContent, {
 	config,
 	manager,
 	onFinish
 }) : null });
+var IdVerification = withSessionExpiry(IdVerificationContentRoot);
 registerIncodeModuleElement(IdVerification, "incode-id-verification");
 //#endregion
 export { IdVerification };

package/dist/{idOcr-66OmIUeD.js → idOcr-DN1gTAJ7.js}

@@ -1,15 +1,16 @@
-import { o as useTranslation } from "./uiConfig-Dd7jp1PI.js";
+import { o as useTranslation } from "./uiConfig-Bh5WEbvy.js";
 import { v as u } from "./vendor-preact-C0jX1Cbq.js";
-import { S as useManager, b as useModuleTerminalCallbacks, c as Page, i as withStandaloneModuleBootstrap, t as IncodeComponent } from "./incodeComponent--XJZ07QN.js";
-import { x as Button } from "./icons-DO-rf5yd.js";
-import { t as VerificationResult } from "./verificationResult-CMeZfcp-.js";
-import { t as InputComposed } from "./inputComposed-ByIWAPSr.js";
-import "./inputComposed-B33LMERA.js";
-import { t as DateInputComposed } from "./dateInputComposed-CylyZPCj.js";
-import "./dateInputComposed-DM6MXdpn.js";
-import { t as RadioGroupComposed } from "./radioGroupComposed-BKEEwEPO.js";
-import "./radioGroupComposed-Bm3iEn-6.js";
-import { t as registerIncodeModuleElement } from "./incodeModule-n_Am6zwM.js";
+import { a as withStandaloneModuleBootstrap, t as IncodeComponent, x as useManager, y as useModuleTerminalCallbacks } from "./incodeComponent-WXvcRKkM.js";
+import { x as Button } from "./icons-CSP6Tne6.js";
+import { t as Page } from "./page-BksTT2IT.js";
+import { t as VerificationResult } from "./verificationResult-M2YRY8Gb.js";
+import { t as InputComposed } from "./inputComposed-D-WVQEpg.js";
+import "./inputComposed-Dca8NJxF.js";
+import { t as DateInputComposed } from "./dateInputComposed-BNmac2I-.js";
+import "./dateInputComposed-9c_0YlmT.js";
+import { t as RadioGroupComposed } from "./radioGroupComposed-CP8O7fH0.js";
+import "./radioGroupComposed-BDYikM_v.js";
+import { t as registerIncodeModuleElement } from "./incodeModule-DsWO19Nv.js";
 import { createIdOcrManager, getOcrFields } from "@incodetech/core/id-ocr";
 //#region src/modules/id-ocr/idOcrForm.tsx
 var TEXT_FIELD_COMPONENTS = {

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

@@ -1,15 +1,75 @@
-import { o as useTranslation } from "../uiConfig-Dd7jp1PI.js";
-import { _ as y, v as u } from "../vendor-preact-C0jX1Cbq.js";
-import { S as useManager, b as useModuleTerminalCallbacks, c as Page, t as IncodeComponent } from "../incodeComponent--XJZ07QN.js";
-import { t as Spinner } from "../spinner-C9D0Usrj.js";
-import { x as Button } from "../icons-DO-rf5yd.js";
-import { t as countryFlagEmoji } from "../countries-5e8kwG_m.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-n_Am6zwM.js";
+import { o as useTranslation } from "../uiConfig-Bh5WEbvy.js";
+import { S as k, _ as y, c as A, f as d, p as g, v as u } from "../vendor-preact-C0jX1Cbq.js";
+import { S as withSessionExpiry, t as IncodeComponent, x as useManager, y as useModuleTerminalCallbacks } from "../incodeComponent-WXvcRKkM.js";
+import { t as Spinner } from "../spinner-ceW7fzMV.js";
+import { x as Button } from "../icons-CSP6Tne6.js";
+import { t as Page } from "../page-BksTT2IT.js";
+import { t as AutoFocusTitle } from "../autoFocusTitle-shYRUp-4.js";
+import { t as BottomSheet } from "../bottomSheet-Cdwz_7C5.js";
+import { t as countryFlagEmoji } from "../countryFlag-2Vj85OIZ.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-DsWO19Nv.js";
+import { t as INCODE_PRIVACY_POLICY_URL } from "../policyUrls-B3M8nLRh.js";
 import { SCAN_NEW_DOCUMENT, createIdentityReuseManager } from "@incodetech/core/identity-reuse";
+//#region src/modules/identity-reuse/sharedDataSheet.tsx
+var SHARED_DATA_ITEM_KEYS = [
+	"identityReuse.sharedData.documentImage",
+	"identityReuse.sharedData.dateOfBirth",
+	"identityReuse.sharedData.fullName",
+	"identityReuse.sharedData.documentNumber"
+];
+/**
+* "Shared details" bottom sheet — lists the data the receiving company gets
+* when the user reuses a document. Opened from "What data will be shared?".
+*/
+var SharedDataSheet = ({ isOpen, onClose, companyName, returnFocusRef }) => {
+	const { t } = useTranslation();
+	const titleId = g();
+	const subtitleId = g();
+	const subtitle = companyName ? t("identityReuse.sharedData.subtitleWithCompany", { companyName }) : t("identityReuse.sharedData.subtitle");
+	return /* @__PURE__ */ u(BottomSheet, {
+		isOpen,
+		onClose,
+		labelledById: titleId,
+		manageInitialFocus: false,
+		returnFocusRef,
+		"data-testid": "identity-reuse-shared-data-sheet",
+		children: /* @__PURE__ */ u("div", {
+			class: "IncodeIdentityReuseSharedData",
+			children: [
+				/* @__PURE__ */ u("div", {
+					class: "IncodeIdentityReuseSharedDataHeader",
+					children: [/* @__PURE__ */ u(AutoFocusTitle, {
+						id: titleId,
+						describedById: subtitleId,
+						className: "IncodeIdentityReuseSharedDataTitle",
+						children: t("identityReuse.sharedData.title")
+					}), /* @__PURE__ */ u("p", {
+						id: subtitleId,
+						class: "IncodeIdentityReuseSharedDataSubtitle",
+						children: subtitle
+					})]
+				}),
+				/* @__PURE__ */ u("ul", {
+					class: "IncodeIdentityReuseSharedDataList",
+					children: SHARED_DATA_ITEM_KEYS.map((key) => /* @__PURE__ */ u("li", { children: t(key) }, key))
+				}),
+				/* @__PURE__ */ u("div", {
+					class: "IncodeIdentityReuseSharedDataActions",
+					children: /* @__PURE__ */ u(Button, {
+						onClick: onClose,
+						"data-testid": "identity-reuse-shared-data-understood-button",
+						children: t("identityReuse.sharedData.understood")
+					})
+				})
+			]
+		})
+	});
+};
+//#endregion
 //#region src/modules/identity-reuse/identity-reuse.tsx
 /**
-* Format a backend verification timestamp as a locale-aware short date
-* (e.g. "15 Apr 2023" in en-US). Auto-detects unit: values >= 1e12 are
+* Format a backend verification timestamp as a locale-aware month and year
+* (e.g. "Apr 2023" in en-US). Auto-detects unit: values >= 1e12 are
 * treated as milliseconds, smaller values as unix seconds (the documents
 * API returns seconds, possibly with fractional millis). Returns null if
 * the value can't be parsed so the caller can hide the row instead of
@@ -21,84 +81,117 @@ function formatVerifiedAt(timestamp, locale) {
 	const date = new Date(ms);
 	if (Number.isNaN(date.getTime())) return null;
 	return new Intl.DateTimeFormat(locale, {
-		day: "2-digit",
 		month: "short",
 		year: "numeric"
 	}).format(date);
 }
-var RadioDot = ({ checked }) => /* @__PURE__ */ u("span", {
-	class: `IncodeIdentityReuseRadio ${checked ? "IncodeIdentityReuseRadioChecked" : ""}`,
-	"aria-hidden": "true",
-	children: checked ? /* @__PURE__ */ u("span", { class: "IncodeIdentityReuseRadioInner" }) : null
-});
-var DocumentCard = ({ document, selected, recommended, tabIndex, onSelect, locale }) => {
+var DocumentCard = ({ document, recommended, onSelect, locale }) => {
 	const { t } = useTranslation();
 	const typeLabel = t(`identityReuse.documentType.${document.documentType}`);
 	const flag = countryFlagEmoji(document.countryCode);
 	const verifiedDate = formatVerifiedAt(document.verifiedAt, locale);
 	const verifiedWord = t("identityReuse.verified", { defaultValue: "Verified" });
 	const verifiedLabel = verifiedDate ? `${verifiedWord} ${verifiedDate}` : null;
-	return /* @__PURE__ */ u("button", {
+	return /* @__PURE__ */ u("li", { children: /* @__PURE__ */ u("button", {
 		type: "button",
-		class: `IncodeIdentityReuseCard ${selected ? "IncodeIdentityReuseCardSelected" : ""}`,
-		role: "radio",
-		"aria-checked": selected,
-		tabIndex,
+		class: "IncodeIdentityReuseCard",
 		onClick: onSelect,
 		"data-testid": `identity-reuse-document-${document.id}`,
-		children: /* @__PURE__ */ u("div", {
-			class: "IncodeIdentityReuseCardBody",
-			children: [
-				/* @__PURE__ */ u("div", {
-					class: "IncodeIdentityReuseCardHeader",
-					children: [/* @__PURE__ */ u("div", {
-						class: "IncodeIdentityReuseCardHeaderLeft",
-						children: [/* @__PURE__ */ u("span", {
-							class: "IncodeIdentityReuseCardTypeLabel",
-							children: typeLabel
-						}), recommended ? /* @__PURE__ */ u("span", {
-							class: "IncodeIdentityReuseBadgeRecommended",
-							children: t("identityReuse.badge.recommended")
-						}) : null]
-					}), /* @__PURE__ */ u(RadioDot, { checked: selected })]
-				}),
-				/* @__PURE__ */ u("p", {
-					class: "IncodeIdentityReuseCardIdentifier",
-					children: [flag ? /* @__PURE__ */ u("span", {
-						"aria-hidden": "true",
-						children: flag
-					}) : null, /* @__PURE__ */ u("span", { children: document.maskedNumber })]
-				}),
-				verifiedLabel ? /* @__PURE__ */ u("p", {
-					class: "IncodeIdentityReuseCardVerified",
-					children: verifiedLabel
-				}) : null
-			]
-		})
-	});
+		children: [/* @__PURE__ */ u("span", {
+			class: "IncodeIdentityReuseCardHeader",
+			children: [/* @__PURE__ */ u("span", {
+				class: "IncodeIdentityReuseCardTypeLabel",
+				children: typeLabel
+			}), recommended ? /* @__PURE__ */ u("span", {
+				class: "IncodeIdentityReuseBadgeRecommended",
+				children: t("identityReuse.badge.recommended")
+			}) : null]
+		}), /* @__PURE__ */ u("span", {
+			class: "IncodeIdentityReuseCardDetails",
+			children: [/* @__PURE__ */ u("span", {
+				class: "IncodeIdentityReuseCardIdentifier",
+				children: [flag ? /* @__PURE__ */ u("span", {
+					"aria-hidden": "true",
+					children: flag
+				}) : null, /* @__PURE__ */ u("span", { children: document.maskedNumber })]
+			}), verifiedLabel ? /* @__PURE__ */ u("span", {
+				class: "IncodeIdentityReuseCardVerified",
+				children: verifiedLabel
+			}) : null]
+		})]
+	}) });
 };
-var ScanNewRow = ({ selected, tabIndex, onSelect }) => {
+var ScanNewCard = ({ onSelect }) => {
 	const { t } = useTranslation();
 	return /* @__PURE__ */ u("button", {
 		type: "button",
-		class: `IncodeIdentityReuseCard IncodeIdentityReuseScanNewCard ${selected ? "IncodeIdentityReuseCardSelected" : ""}`,
-		role: "radio",
-		"aria-checked": selected,
-		tabIndex,
+		class: "IncodeIdentityReuseCard IncodeIdentityReuseScanNewCard",
 		onClick: onSelect,
 		"data-testid": "identity-reuse-scan-new",
-		children: [/* @__PURE__ */ u("div", {
-			class: "IncodeIdentityReuseScanNewBody",
-			children: [/* @__PURE__ */ u("span", {
-				class: "IncodeIdentityReuseCardTypeLabel",
-				children: t("identityReuse.scanANewDocument")
-			}), /* @__PURE__ */ u("span", {
-				class: "IncodeIdentityReuseBadgeSlowest",
-				children: t("identityReuse.badge.slowest")
-			})]
-		}), /* @__PURE__ */ u(RadioDot, { checked: selected })]
+		children: [/* @__PURE__ */ u("span", {
+			class: "IncodeIdentityReuseCardTypeLabel",
+			children: t("identityReuse.scanANewDocument")
+		}), /* @__PURE__ */ u("span", {
+			class: "IncodeIdentityReuseBadgeSlowest",
+			children: t("identityReuse.badge.slowest")
+		})]
 	});
 };
+var DocumentPicker = ({ documents, companyName, manager, locale }) => {
+	const { t } = useTranslation();
+	const [isSharedDataOpen, setIsSharedDataOpen] = d(false);
+	const sharedDataTriggerRef = A(null);
+	const subtitle = companyName ? t("identityReuse.subtitleWithCompany", { companyName }) : t("identityReuse.subtitle");
+	return /* @__PURE__ */ u(k, { children: [/* @__PURE__ */ u(Page, {
+		className: "IncodeIdentityReusePage",
+		title: t("identityReuse.title"),
+		subtitle,
+		children: /* @__PURE__ */ u("div", {
+			class: "IncodeIdentityReuseBody",
+			children: [/* @__PURE__ */ u("div", {
+				class: "IncodeIdentityReuseOptions",
+				children: [/* @__PURE__ */ u("ul", {
+					class: "IncodeIdentityReuseList",
+					role: "list",
+					children: documents.map((document, index) => /* @__PURE__ */ u(DocumentCard, {
+						document,
+						recommended: index === 0,
+						onSelect: () => manager.submit(document.id),
+						locale
+					}, document.id))
+				}), /* @__PURE__ */ u(ScanNewCard, { onSelect: () => manager.submit(SCAN_NEW_DOCUMENT) })]
+			}), /* @__PURE__ */ u("div", {
+				class: "IncodeIdentityReuseActions",
+				children: [/* @__PURE__ */ u(Button, {
+					ref: sharedDataTriggerRef,
+					variant: "link",
+					onClick: () => setIsSharedDataOpen(true),
+					"data-testid": "identity-reuse-shared-data-button",
+					children: t("identityReuse.sharedData.link")
+				}), /* @__PURE__ */ u("a", {
+					class: "IncodeButton IncodeButtonLink IncodeButtonL",
+					href: INCODE_PRIVACY_POLICY_URL,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					"data-testid": "identity-reuse-privacy-policy-link",
+					children: [
+						t("identityReuse.privacyPolicyLink"),
+						" ",
+						/* @__PURE__ */ u("span", {
+							class: "IncodeIdentityReuseNewTabHint",
+							children: t("identityReuse.opensInNewTab")
+						})
+					]
+				})]
+			})]
+		})
+	}), /* @__PURE__ */ u(SharedDataSheet, {
+		isOpen: isSharedDataOpen,
+		onClose: () => setIsSharedDataOpen(false),
+		companyName,
+		returnFocusRef: sharedDataTriggerRef
+	})] });
+};
 var IdentityReuseContent = ({ config, manager: externalManager, onFinish, onError }) => {
 	const { t, i18n } = useTranslation();
 	const locale = i18n.language || "en";
@@ -116,78 +209,12 @@ var IdentityReuseContent = ({ config, manager: externalManager, onFinish, onErro
 		if (errorMessage) onError?.(errorMessage);
 	}, [errorMessage, onError]);
 	if (state.status === "idle" || state.status === "loading" || state.status === "submitting") return /* @__PURE__ */ u(Spinner, { title: t("identityReuse.loading") });
-	if (state.status === "documentsFound") {
-		const selectedId = state.selectedDocumentId;
-		const optionIds = [...state.documents.map((d) => d.id), SCAN_NEW_DOCUMENT];
-		const focusedIndex = selectedId === void 0 ? 0 : Math.max(0, optionIds.findIndex((id) => id === selectedId));
-		const ctaLabel = selectedId === SCAN_NEW_DOCUMENT ? t("identityReuse.cta.scanNew") : t("identityReuse.cta.confirm");
-		const handleRadiogroupKeyDown = (event) => {
-			const container = event.currentTarget;
-			if (!container) return;
-			const buttons = container.querySelectorAll("[role=\"radio\"]");
-			if (buttons.length === 0) return;
-			const currentIndex = Array.from(buttons).findIndex((b) => b === document.activeElement);
-			if (currentIndex === -1) return;
-			let nextIndex = currentIndex;
-			switch (event.key) {
-				case "ArrowDown":
-				case "ArrowRight":
-					nextIndex = (currentIndex + 1) % buttons.length;
-					break;
-				case "ArrowUp":
-				case "ArrowLeft":
-					nextIndex = (currentIndex - 1 + buttons.length) % buttons.length;
-					break;
-				case "Home":
-					nextIndex = 0;
-					break;
-				case "End":
-					nextIndex = buttons.length - 1;
-					break;
-				default: return;
-			}
-			event.preventDefault();
-			const next = buttons[nextIndex];
-			if (next) {
-				next.focus();
-				next.click();
-			}
-		};
-		return /* @__PURE__ */ u(Page, {
-			className: "IncodeIdentityReusePage",
-			title: t("identityReuse.title"),
-			subtitle: t("identityReuse.subtitle"),
-			children: /* @__PURE__ */ u("div", {
-				class: "IncodeIdentityReuseBody",
-				children: [/* @__PURE__ */ u("div", {
-					class: "IncodeIdentityReuseList",
-					role: "radiogroup",
-					"aria-label": t("identityReuse.title"),
-					onKeyDown: handleRadiogroupKeyDown,
-					children: [state.documents.map((document, index) => /* @__PURE__ */ u(DocumentCard, {
-						document,
-						selected: selectedId === document.id,
-						recommended: index === 0,
-						tabIndex: index === focusedIndex ? 0 : -1,
-						onSelect: () => manager.chooseDocument(document.id),
-						locale
-					}, document.id)), /* @__PURE__ */ u(ScanNewRow, {
-						selected: selectedId === SCAN_NEW_DOCUMENT,
-						tabIndex: focusedIndex === state.documents.length ? 0 : -1,
-						onSelect: () => manager.chooseDocument(SCAN_NEW_DOCUMENT)
-					})]
-				}), /* @__PURE__ */ u("div", {
-					class: "IncodeIdentityReuseActions",
-					children: /* @__PURE__ */ u(Button, {
-						onClick: () => manager.submit(),
-						disabled: selectedId === void 0,
-						"data-testid": "identity-reuse-confirm-button",
-						children: ctaLabel
-					})
-				})]
-			})
-		});
-	}
+	if (state.status === "documentsFound") return /* @__PURE__ */ u(DocumentPicker, {
+		documents: state.documents,
+		companyName: state.companyName,
+		manager,
+		locale
+	});
 	if (state.status === "error") return /* @__PURE__ */ u(Page, {
 		className: "IncodeIdentityReusePage",
 		title: t("identityReuse.errorTitle"),
@@ -209,12 +236,13 @@ var IdentityReuseContent = ({ config, manager: externalManager, onFinish, onErro
 	if (state.status === "finished") return null;
 	return null;
 };
-var IdentityReuse = ({ config, manager, onFinish, onError }) => /* @__PURE__ */ u(IncodeComponent, { children: config || manager ? /* @__PURE__ */ u(IdentityReuseContent, {
+var IdentityReuseContentRoot = ({ config, manager, onFinish, onError }) => /* @__PURE__ */ u(IncodeComponent, { children: config || manager ? /* @__PURE__ */ u(IdentityReuseContent, {
 	config,
 	manager,
 	onFinish,
 	onError
 }) : null });
+var IdentityReuse = withSessionExpiry(IdentityReuseContentRoot);
 registerIncodeModuleElement(IdentityReuse, "incode-identity-reuse");
 //#endregion
 export { IdentityReuse };

package/dist/identity-reuse/styles.css

@@ -1,217 +1,2 @@
 /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
-@layer properties {
-  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    .IncodeComponent, .IncodeComponent *, .IncodeComponent :before, .IncodeComponent :after, .IncodeComponent ::backdrop {
-      --tw-border-style: solid;
-      --tw-duration: initial;
-    }
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.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-offset);
-}
-
-.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;
-}
-
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-
-@property --tw-duration {
-  syntax: "*";
-  inherits: false
-}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){.IncodeComponent,.IncodeComponent *,.IncodeComponent :before,.IncodeComponent :after,.IncodeComponent ::backdrop{--tw-border-style:solid;--tw-duration:initial}}}.IncodeIdentityReuseSharedData{gap:var(--spacing-24,var(--spacing-24,24px));width:100%;padding-inline:var(--spacing-12,var(--spacing-12,12px));padding-bottom:var(--spacing-24,var(--spacing-24,24px));flex-direction:column;display:flex}.IncodeIdentityReuseSharedData .IncodeIdentityReuseSharedDataHeader{gap:var(--spacing-12,var(--spacing-12,12px));width:100%;padding-top:var(--spacing-12,var(--spacing-12,12px));flex-direction:column;display:flex}.IncodeIdentityReuseSharedData .IncodeIdentityReuseSharedDataTitle{text-align:left;font-family:var(--typography-headline-family);font-size:var(--typography-headline-h1-size);font-weight:var(--typography-headline-h1-weight);line-height:var(--typography-headline-h1-line-height);letter-spacing:var(--typography-headline-h1-letter-spacing);color:var(--color-text-body-primary,var(--text-body-800-primary))}.IncodeIdentityReuseSharedData .IncodeIdentityReuseSharedDataSubtitle{margin:var(--spacing-0,var(--spacing-none,0px));text-align:left;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(--color-text-body-secondary,var(--text-body-500-secondary))}.IncodeIdentityReuseSharedData .IncodeIdentityReuseSharedDataList{margin:var(--spacing-0,var(--spacing-none,0px));gap:var(--spacing-8,var(--spacing-8,8px));width:100%;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(--color-text-body-primary,var(--text-body-800-primary));flex-direction:column;padding-inline-start:var(--spacing-24,var(--spacing-24,24px));list-style-type:disc;display:flex}.IncodeIdentityReuseSharedData .IncodeIdentityReuseSharedDataActions{width:100%;padding-top:var(--spacing-32,var(--spacing-32,32px));flex-direction:column;align-items:center;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.IncodeIdentityReusePage{animation:.4s ease-out fadeIn}.IncodeIdentityReusePage .IncodeIdentityReuseBody{padding-top:var(--spacing-32);flex-direction:column;flex:1;display:flex}.IncodeIdentityReusePage .IncodeIdentityReuseOptions{gap:var(--spacing-16,var(--spacing-16,16px));flex-direction:column;width:100%;display:flex}.IncodeIdentityReusePage .IncodeIdentityReuseList{margin:var(--spacing-0,var(--spacing-none,0px));gap:var(--spacing-8,var(--spacing-8,8px));width:100%;padding:var(--spacing-0,var(--spacing-none,0px));flex-direction:column;list-style-type:none;display:flex}.IncodeIdentityReusePage .IncodeIdentityReuseCard{cursor:pointer;touch-action:manipulation;align-items:stretch;gap:var(--spacing-8,var(--spacing-8,8px));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-200);flex-direction:column;transition-duration:.2s;display:flex}.IncodeIdentityReusePage .IncodeIdentityReuseCard:hover{border-color:var(--border-brand-500)}.IncodeIdentityReusePage .IncodeIdentityReuseCard:focus-visible{outline:var(--focus-outline-width) solid var(--border-status-focus);outline-offset:var(--focus-outline-offset)}.IncodeIdentityReusePage .IncodeIdentityReuseCardHeader{justify-content:space-between;align-items:center;gap:var(--spacing-12,var(--spacing-12,12px));width:100%;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 .IncodeIdentityReuseCardDetails{gap:var(--spacing-4,var(--spacing-4,4px));flex-direction:column;display:flex}.IncodeIdentityReusePage .IncodeIdentityReuseCardIdentifier{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{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));background-color:var(--color-surface-brand-50,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);color:var(--color-icon-brand-600,var(--icon-brand-600));flex-shrink:0;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);flex-shrink:0;align-items:center;display:inline-flex}.IncodeIdentityReusePage .IncodeIdentityReuseScanNewCard{justify-content:space-between;align-items:center;gap:var(--spacing-12,var(--spacing-12,12px));flex-direction:row}.IncodeIdentityReusePage .IncodeIdentityReuseActions{padding-top:var(--spacing-16);flex-direction:column;align-items:center;margin-top:auto;display:flex}.IncodeIdentityReusePage .IncodeIdentityReuseNewTabHint{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}