npm - @incodetech/web - Versions diffs - 0.0.0-dev-20260923-b02a604b → 0.0.0-dev-20260923-1a4dbec8 - Mend

@incodetech/web 0.0.0-dev-20260923-b02a604b → 0.0.0-dev-20260923-1a4dbec8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/base.css +8 -0
package/dist/extensibility.es.js +1 -1
package/dist/{flipAnimation-DhQIQp5j.js → flipAnimation-K0kaLydW.js} +325 -20
package/dist/flow/styles.css +9 -1
package/dist/id/id.es.js +1 -1
package/dist/id/styles.css +9 -1
package/dist/id/styles.css.js +1 -1
package/dist/themes/dark.css +23 -0
package/dist/themes/light.css +23 -0
package/dist/types/extensibility.d.ts +7 -1
package/dist/workflow/styles.css +9 -1
package/package.json +2 -2

package/dist/base.css CHANGED Viewed

@@ -7134,6 +7134,14 @@
   height: auto;
 }
+.IncodeVerificationOptionCardList .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodeVerificationOptionCardImage {
+  min-height: var(--spacing-0, var(--spacing-none, 0px));
+  min-width: var(--spacing-0, var(--spacing-none, 0px));
+  object-fit: contain;
+  width: var(--id-capture-verification-option-card-logo-size);
+  height: var(--id-capture-verification-option-card-logo-size);
+}
 .IncodeVerificationOptionCardList .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodeIdCardIconFill, .IncodeVerificationOptionCardList .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodeUploadIdIconFill, .IncodeVerificationOptionCardList .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodePassportIconFill, .IncodeVerificationOptionCardList .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodeDeviceWalletsIconFill, .IncodeVerificationOptionCardList .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodeDigitalIdIconFill {
   fill: var(--color-surface-brand-500, var(--surface-brand-500-static));
 }

package/dist/extensibility.es.js CHANGED Viewed

@@ -26,7 +26,7 @@ import { t as DateInputComposed } from "./dateInputComposed-Bi4tGQFc.js";
 import "./dateInputComposed-Cx2bpmah.js";
 import { n as RadioButtonComposed, t as RadioGroupComposed } from "./radioGroupComposed-8D0vu-V2.js";
 import "./radioGroupComposed-DB3a5NHg.js";
-import { b as VerificationOptionCard, c as IdExpired, i as Capture, l as IdError, n as Chooser, r as Tutorial, t as FlipAnimation, x as VerificationOptionCardList } from "./flipAnimation-DhQIQp5j.js";
+import { b as VerificationOptionCard, c as IdExpired, i as Capture, l as IdError, n as Chooser, r as Tutorial, t as FlipAnimation, x as VerificationOptionCardList } from "./flipAnimation-K0kaLydW.js";
 import { t as BottomSheet } from "./bottomSheet-CoP3FqnD.js";
 import { n as CameraFrame, t as CameraView } from "./cameraView-BrrXm3pi.js";
 import { n as CameraOverlay, t as CameraOverlayHeader } from "./cameraOverlayHeader-D_ou9DR7.js";

package/dist/{flipAnimation-DhQIQp5j.js → flipAnimation-K0kaLydW.js} RENAMED Viewed

@@ -15,7 +15,6 @@ import { n as RedStrikeIcon, t as ExpiredId } from "./expiredId-PA98YIsj.js";
 import { i as usePreloadCaptureAnimations, n as CaptureNotification } from "./manualCaptureButton-CqiF_wnJ.js";
 import { eventModuleNames, recordExperimentAssignmentOnce } from "@incodetech/core/events";
 import { ONBOARDING_WEB_SDK_PARAMETER_STORE, booleanParam, defineExperimentParams, enumParam, numberParam, resolveExperiment } from "@incodetech/core/feature-management";
-import "@incodetech/core/id";
 //#region src/shared/card/verificationOption/verificationOptionCard.tsx
 function VerificationOptionCardList({ children }) {
 	return /* @__PURE__ */ u("div", {
@@ -23,7 +22,7 @@ function VerificationOptionCardList({ children }) {
 		children
 	});
 }
-function VerificationOptionCard({ icon: Icon, title, testId, onClick, tag }) {
+function VerificationOptionCard({ icon: Icon, iconSrc, title, testId, onClick, tag }) {
 	return /* @__PURE__ */ u("button", {
 		type: "button",
 		class: "IncodeVerificationOptionCard",
@@ -34,7 +33,13 @@ function VerificationOptionCard({ icon: Icon, title, testId, onClick, tag }) {
 			class: "IncodeVerificationOptionCardIcon",
 			"aria-hidden": "true",
 			"data-testid": `${testId}-icon`,
-			children: /* @__PURE__ */ u(Icon, {})
+			children: iconSrc ? /* @__PURE__ */ u("img", {
+				class: "IncodeVerificationOptionCardImage",
+				src: iconSrc,
+				alt: "",
+				loading: "lazy",
+				decoding: "async"
+			}) : /* @__PURE__ */ u(Icon, {})
 		}), /* @__PURE__ */ u("span", {
 			class: "IncodeVerificationOptionCardContent",
 			children: [/* @__PURE__ */ u("span", {
@@ -2550,7 +2555,7 @@ var CHOOSER_OPTIONS_LOOKUP = {
 		icon: DigitalIdIcon,
 		title: "idv2.chooser.digitalIdRedirectButtonTitle",
 		testId: "verification-option-digitalIdRedirect",
-		weight: 1
+		weight: 6
 	},
 	digitalIdUpload: {
 		type: "digitalIdUpload",
@@ -2582,22 +2587,321 @@ var CHOOSER_OPTIONS_LOOKUP = {
 	}
 };
 //#endregion
+//#region src/modules/id/chooser/digitalIdProviderLogos.ts
+/**
+* Digital-ID provider logos, keyed by provider id.
+*
+* The backend's `digitalIds.methods[].logoUrl` currently carries bare asset
+* file names (`idin.svg`), which would resolve against the host page and
+* render broken. Until it sends absolute links, the chooser card falls back to
+* this map. A backend-sent absolute URL always wins — see `toCardLogoSrc` in
+* `chooser.helpers.ts`.
+*
+* **The full Trinsic catalog is kept here on purpose**, including providers the
+* SDK does not offer yet, so adding one is a lookup rather than a hunt. Source:
+* the Trinsic integrations catalog (`content.trinsic.id/connect/integrations`).
+*
+* Keys are the Trinsic provider ids. {@link getDigitalIdProviderLogo}
+* normalises before looking up, so the vendor-prefixed form the SDK and
+* `ms-credential-verification` use (`trinsic_netherlands_idin`) finds
+* `netherlands-idin` too.
+*
+* `name` is the catalog's display name. It is reference data — the card shows
+* the backend's `displayName` — but it is what makes this list searchable by
+* the name a person actually knows the provider by.
+*/
+var DIGITAL_ID_PROVIDER_LOGOS = {
+	"a-mojeid": {
+		name: "MojeID login",
+		logoUrl: "https://content.trinsic.id/connect/integrations/mojeid.png"
+	},
+	"australia-connect-id": {
+		name: "ConnectID",
+		logoUrl: "https://content.trinsic.id/connect/integrations/connectid-logo.png"
+	},
+	"austria-valera-eudi-sandbox": {
+		name: "Austria Valera EUDI Sandbox",
+		logoUrl: "https://content.trinsic.id/connect/integrations/austria-valera-eudi-sandbox.png"
+	},
+	"brazil-cpf-lookup": {
+		name: "Brazil CPF Check",
+		logoUrl: "https://content.trinsic.id/connect/integrations/cpf.png"
+	},
+	"brazil-digital-cnh": {
+		name: "Brazil Digital CNH",
+		logoUrl: "https://content.trinsic.id/connect/integrations/cnh.png"
+	},
+	clear: {
+		name: "CLEAR",
+		logoUrl: "https://content.trinsic.id/connect/integrations/clear.svg"
+	},
+	"czech-bank-id": {
+		name: "Czech Bank iD",
+		logoUrl: "https://content.trinsic.id/connect/integrations/czech-bank-id.png"
+	},
+	"czech-republic-mojeid": {
+		name: "MojeID Czech",
+		logoUrl: "https://content.trinsic.id/connect/integrations/mojeid.png"
+	},
+	"denmark-altid": {
+		name: "AltID",
+		logoUrl: "https://content.trinsic.id/connect/integrations/denmark-altid.png"
+	},
+	"denmark-mitid": {
+		name: "MitID",
+		logoUrl: "https://content.trinsic.id/connect/integrations/mitid-logo.svg"
+	},
+	"document-scan": {
+		name: "Scan your government ID",
+		logoUrl: "https://content.trinsic.id/connect/integrations/document-scan.png"
+	},
+	"eudi-reference-wallet": {
+		name: "EUDI Reference Wallet",
+		logoUrl: "https://content.trinsic.id/connect/integrations/eudi-reference-wallet.png"
+	},
+	"finnish-trust-network": {
+		name: "Finnish Trust Network",
+		logoUrl: "https://content.trinsic.id/connect/integrations/ftn.png"
+	},
+	"france-identite": {
+		name: "France Identité",
+		logoUrl: "https://content.trinsic.id/connect/integrations/france-identite.png"
+	},
+	"germany-eudi-sandbox": {
+		name: "Germany EUDI Sandbox",
+		logoUrl: "https://content.trinsic.id/connect/integrations/germany-eudi-sandbox.png"
+	},
+	"google-wallet": {
+		name: "Google Wallet",
+		logoUrl: "https://content.trinsic.id/connect/integrations/google-wallet.png"
+	},
+	"indonesia-dukcapil-match": {
+		name: "Indonesia Identity Verification",
+		logoUrl: "https://content.trinsic.id/connect/integrations/indonesia-dukcapil-match.png"
+	},
+	"italy-spid": {
+		name: "SPID",
+		logoUrl: "https://content.trinsic.id/connect/integrations/spid.svg"
+	},
+	"kenya-nid-lookup-3": {
+		name: "Kenya NID Lookup",
+		logoUrl: "https://content.trinsic.id/connect/integrations/ke-nid.png"
+	},
+	"kenya-nid-match-2": {
+		name: "Kenya NID Match",
+		logoUrl: "https://content.trinsic.id/connect/integrations/ke-nid.png"
+	},
+	"mobile-id": {
+		name: "Mobile-ID",
+		logoUrl: "https://content.trinsic.id/connect/integrations/mobiil-id-logo.svg"
+	},
+	"moldova-evo-wallet": {
+		name: "EVO Wallet",
+		logoUrl: "https://content.trinsic.id/connect/integrations/moldova-evo-wallet.png"
+	},
+	"netherlands-idin": {
+		name: "IDIN",
+		logoUrl: "https://content.trinsic.id/connect/integrations/idin-logo.svg"
+	},
+	"nigeria-nin-lookup-2": {
+		name: "Nigeria NIN Lookup",
+		logoUrl: "https://content.trinsic.id/connect/integrations/ng-nin.png"
+	},
+	"nigeria-nin-lookup-3": {
+		name: "Nigeria NIN Lookup",
+		logoUrl: "https://content.trinsic.id/connect/integrations/ng-nin.png"
+	},
+	"nigeria-nin-match-2": {
+		name: "Nigeria NIN Match",
+		logoUrl: "https://content.trinsic.id/connect/integrations/ng-nin.png"
+	},
+	"norway-bankid": {
+		name: "BankID Norway",
+		logoUrl: "https://content.trinsic.id/connect/integrations/no-bankid.png"
+	},
+	oneid: {
+		name: "OneID",
+		logoUrl: "https://content.trinsic.id/connect/integrations/oneid-logo.svg"
+	},
+	"philippines-digital-national-id-qr": {
+		name: "Digital National ID",
+		logoUrl: "https://content.trinsic.id/connect/integrations/philsys-logo.png"
+	},
+	"philippines-philsys-match": {
+		name: "PhilSys Biometric Verification",
+		logoUrl: "https://content.trinsic.id/connect/integrations/philsys-logo.png"
+	},
+	"philippines-physical-national-id-qr": {
+		name: "Philippines National ID",
+		logoUrl: "https://content.trinsic.id/connect/integrations/philsys-logo.png"
+	},
+	"singpass-login": {
+		name: "Singpass",
+		logoUrl: "https://content.trinsic.id/connect/integrations/singpass-logo.png"
+	},
+	"singpass-myinfo": {
+		name: "Singpass",
+		logoUrl: "https://content.trinsic.id/connect/integrations/singpass-logo.png"
+	},
+	"smart-id": {
+		name: "Smart-ID",
+		logoUrl: "https://content.trinsic.id/connect/integrations/smart-id-logo.svg"
+	},
+	"south-africa-nid-lookup-2": {
+		name: "South Africa NID Lookup",
+		logoUrl: "https://content.trinsic.id/connect/integrations/za-nid.png"
+	},
+	"south-africa-nid-match-2": {
+		name: "South Africa NID Match",
+		logoUrl: "https://content.trinsic.id/connect/integrations/za-nid.png"
+	},
+	"sweden-bankid": {
+		name: "BankID Sweden",
+		logoUrl: "https://content.trinsic.id/connect/integrations/se-bankid.svg"
+	},
+	"uganda-nid-match-2": {
+		name: "Uganda NID",
+		logoUrl: "https://content.trinsic.id/connect/integrations/ug-nid.png"
+	},
+	"uk-evisa-lookup": {
+		name: "UK eVisa Lookup",
+		logoUrl: "https://content.trinsic.id/connect/integrations/uk-evisa.svg"
+	},
+	"usa-louisiana-wallet": {
+		name: "LA Wallet",
+		logoUrl: "https://content.trinsic.id/connect/integrations/la-wallet.png"
+	},
+	"zimbabwe-nid-lookup-2": {
+		name: "Zimbabwe NID Lookup",
+		logoUrl: "https://content.trinsic.id/connect/integrations/zw-nid.png"
+	},
+	"trinsic-mock-output": {
+		name: "Mock - Output",
+		logoUrl: "https://content.trinsic.id/assets/logo/192x192.png"
+	},
+	"trinsic-test-database-lookup": {
+		name: "Mock - Database Lookup",
+		logoUrl: "https://content.trinsic.id/assets/logo/192x192.png"
+	},
+	"trinsic-test-deeplink": {
+		name: "Mock - DeeplinkToMobile",
+		logoUrl: "https://content.trinsic.id/assets/logo/192x192.png"
+	},
+	"trinsic-test-deeplink-refresh": {
+		name: "Mock - DeeplinkToMobile + RefreshStepContent",
+		logoUrl: "https://content.trinsic.id/assets/logo/192x192.png"
+	},
+	"trinsic-test-delayed-results": {
+		name: "Mock - Delayed Results",
+		logoUrl: "https://content.trinsic.id/assets/logo/192x192.png"
+	},
+	"trinsic-test-handoff": {
+		name: "Mock - Handoff",
+		logoUrl: "https://content.trinsic.id/assets/logo/192x192.png"
+	},
+	"trinsic-test-offline": {
+		name: "Mock - Offline",
+		logoUrl: "https://content.trinsic.id/assets/logo/192x192.png"
+	},
+	"trinsic-test-redirect": {
+		name: "Mock - Redirect",
+		logoUrl: "https://content.trinsic.id/assets/logo/192x192.png"
+	},
+	"trinsic-test-show-content": {
+		name: "Mock - ShowContent",
+		logoUrl: "https://content.trinsic.id/assets/logo/192x192.png"
+	},
+	"trinsic-test-show-content-refresh": {
+		name: "Mock - ShowContent + RefreshStepContent",
+		logoUrl: "https://content.trinsic.id/assets/logo/192x192.png"
+	},
+	"trinsic-test-sub-providers": {
+		name: "Mock - Sub-providers",
+		logoUrl: "https://content.trinsic.id/assets/logo/192x192.png"
+	}
+};
+/**
+* The map's key form: lowercased, `_` as `-`, and the vendor prefix dropped so
+* `trinsic_netherlands_idin` (what the SDK and `ms-credential-verification`
+* use) finds `netherlands-idin` (what Trinsic publishes).
+*
+* The `trinsic-test-*` / `trinsic-mock-*` keys keep their prefix: it is part of
+* the name there, and dropping only the first segment leaves `test-redirect`,
+* which is still distinct from every real provider.
+*/
+function toLogoKey(providerId) {
+	return providerId.toLowerCase().replace(/_/g, "-");
+}
+/**
+* The catalog logo for a provider id, or `undefined` when the map does not
+* carry it — the card then falls back to the generic digital-ID glyph.
+*/
+function getDigitalIdProviderLogo(providerId) {
+	if (!providerId) return;
+	const key = toLogoKey(providerId);
+	return DIGITAL_ID_PROVIDER_LOGOS[key]?.logoUrl ?? DIGITAL_ID_PROVIDER_LOGOS[key.replace(/^trinsic-/, "")]?.logoUrl;
+}
+//#endregion
 //#region src/modules/id/chooser/chooser.helpers.ts
-function getAvailableChooserOptions(availableDocumentTypes) {
-	const reduceFn = (accumulated, documentType) => {
+/**
+* The card logo: the backend's own link when it is absolute, else the catalog
+* logo for the provider (`digitalIdProviderLogos`), else nothing — the card
+* then renders the generic digital-ID glyph.
+*
+* The backend catalog still carries bare asset file names (`idin.svg`) for
+* some methods. Those would resolve against the host page and render broken,
+* so they are ignored in favour of the catalog map.
+*/
+function toCardLogoSrc(logoUrl, providerId) {
+	if (logoUrl && /^(https?:\/\/|data:)/i.test(logoUrl)) return logoUrl;
+	return getDigitalIdProviderLogo(providerId);
+}
+/**
+* Expands the `digitalIdRedirect` document type into one card per enabled
+* web-redirect provider (iDIN, FTN, …) in backend order. With no provider
+* options (e.g. the mDL wallet fallback) the generic redirect card is kept.
+*/
+function toDigitalIdRedirectCards(digitalIdRedirectOptions) {
+	const base = CHOOSER_OPTIONS_LOOKUP.digitalIdRedirect;
+	if (digitalIdRedirectOptions.length === 0) return [{
+		...base,
+		key: base.type
+	}];
+	return digitalIdRedirectOptions.map((option) => ({
+		...base,
+		key: `${base.type}:${option.providerId}`,
+		testId: `${base.testId}-${option.providerId}`,
+		providerId: option.providerId,
+		displayName: option.displayName,
+		iconSrc: toCardLogoSrc(option.logoUrl, option.providerId)
+	}));
+}
+function getAvailableChooserOptions(availableDocumentTypes, digitalIdRedirectOptions = []) {
+	const cards = [];
+	for (const documentType of availableDocumentTypes) {
+		if (documentType === "digitalIdRedirect") {
+			cards.push(...toDigitalIdRedirectCards(digitalIdRedirectOptions));
+			continue;
+		}
 		const chooserOption = CHOOSER_OPTIONS_LOOKUP[documentType];
-		if (chooserOption) accumulated.push(chooserOption);
-		return accumulated;
-	};
-	return availableDocumentTypes.reduce(reduceFn, []).sort((optionA, optionB) => optionA.weight - optionB.weight);
+		if (chooserOption) cards.push({
+			...chooserOption,
+			key: chooserOption.type
+		});
+	}
+	return cards.sort((cardA, cardB) => cardA.weight - cardB.weight);
 }
 //#endregion
 //#region src/modules/id/chooser/chooser.tsx
 var Chooser = ({ manager, state }) => {
 	const { t } = useTranslation();
-	const availableChooserOptions = T(() => getAvailableChooserOptions(state.availableDocumentTypes), [state.availableDocumentTypes]);
-	const handleSelectDocument = (documentType) => {
-		manager.selectDocument(documentType);
+	const availableChooserOptions = T(() => getAvailableChooserOptions(state.availableDocumentTypes, state.digitalIdRedirectOptions), [state.availableDocumentTypes, state.digitalIdRedirectOptions]);
+	const handleSelect = (card) => {
+		if (card.providerId) {
+			manager.selectDocument(card.type, { providerId: card.providerId });
+			return;
+		}
+		manager.selectDocument(card.type);
 	};
 	return /* @__PURE__ */ u(Page, {
 		title: t("idv2.chooser.chooseHowToVerifyTitle"),
@@ -2605,13 +2909,14 @@ var Chooser = ({ manager, state }) => {
 		className: "IncodeChooserPage",
 		children: /* @__PURE__ */ u("div", {
 			class: "IncodeChooserContainer",
-			children: /* @__PURE__ */ u(VerificationOptionCardList, { children: availableChooserOptions.map((chooserOption) => /* @__PURE__ */ u(VerificationOptionCard, {
-				icon: chooserOption.icon,
-				title: t(chooserOption.title),
-				testId: chooserOption.testId,
-				tag: chooserOption.tag ? t(chooserOption.tag) : void 0,
-				onClick: () => handleSelectDocument(chooserOption.type)
-			}, chooserOption.type)) })
+			children: /* @__PURE__ */ u(VerificationOptionCardList, { children: availableChooserOptions.map((card) => /* @__PURE__ */ u(VerificationOptionCard, {
+				icon: card.icon,
+				iconSrc: card.iconSrc,
+				title: card.displayName ?? t(card.title),
+				testId: card.testId,
+				tag: card.tag ? t(card.tag) : void 0,
+				onClick: () => handleSelect(card)
+			}, card.key)) })
 		})
 	});
 };

package/dist/flow/styles.css CHANGED Viewed

@@ -1352,6 +1352,7 @@
 }
 .IncodeChooserPage .IncodePageContent {
+  min-height: var(--spacing-0, var(--spacing-none, 0px));
   padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
 }
@@ -1360,11 +1361,18 @@
 }
 .IncodeChooserPage .IncodeChooserContainer {
+  min-height: var(--spacing-0, var(--spacing-none, 0px));
+  width: 100%;
+  max-height: var(--id-capture-chooser-list-max-h);
+  max-width: var(--id-capture-chooser-list-max-w);
+  padding: var(--id-capture-chooser-list-scroll-padding);
+  scroll-padding-block: var(--id-capture-chooser-list-scroll-padding);
+  margin-inline: auto;
   flex-direction: column;
   align-items: center;
-  width: 100%;
   margin-top: auto;
   display: flex;
+  overflow-y: auto;
 }
 .IncodeCaptureFrame {

package/dist/id/id.es.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { t as Processing } from "../processing-tdGRMchn.js";
 import { t as Modal } from "../modal-rmddy1AH.js";
 import { t as VerificationResult } from "../verificationResult-4WY-cpM5.js";
 import { n as CaptureFooter, r as ProgressBar } from "../useCaptureHelpButton-BFtgwFjU.js";
-import { _ as ID_CAPTURE_LOADING_PHASE, a as CaptureAutoFocusProvider, c as IdExpired, d as CaptureFrame, f as useIdExperiment, g as EXPERIMENT_LIFECYCLE_STATUS, h as CONTINUING_TUTORIAL_PHASES, i as Capture, l as IdError, m as CAMERA_WARMUP_LOADING_PHASES, n as Chooser, o as getCaptureFrameTitle, p as CAMERA_PERMISSION_UX, r as Tutorial, s as IdNoAttempts, t as FlipAnimation, u as canFlipCapturedCard, v as ID_CAPTURE_STATUS, y as PERMISSION_DIALOG_STATUS } from "../flipAnimation-DhQIQp5j.js";
+import { _ as ID_CAPTURE_LOADING_PHASE, a as CaptureAutoFocusProvider, c as IdExpired, d as CaptureFrame, f as useIdExperiment, g as EXPERIMENT_LIFECYCLE_STATUS, h as CONTINUING_TUTORIAL_PHASES, i as Capture, l as IdError, m as CAMERA_WARMUP_LOADING_PHASES, n as Chooser, o as getCaptureFrameTitle, p as CAMERA_PERMISSION_UX, r as Tutorial, s as IdNoAttempts, t as FlipAnimation, u as canFlipCapturedCard, v as ID_CAPTURE_STATUS, y as PERMISSION_DIALOG_STATUS } from "../flipAnimation-K0kaLydW.js";
 import { t as BottomSheet } from "../bottomSheet-CoP3FqnD.js";
 import { n as CameraFrame, t as CameraView } from "../cameraView-BrrXm3pi.js";
 import { n as CameraOverlay, t as CameraOverlayHeader } from "../cameraOverlayHeader-D_ou9DR7.js";

package/dist/id/styles.css CHANGED Viewed

@@ -423,6 +423,7 @@
 }
 .IncodeChooserPage .IncodePageContent {
+  min-height: var(--spacing-0, var(--spacing-none, 0px));
   padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
 }
@@ -431,11 +432,18 @@
 }
 .IncodeChooserPage .IncodeChooserContainer {
+  min-height: var(--spacing-0, var(--spacing-none, 0px));
+  width: 100%;
+  max-height: var(--id-capture-chooser-list-max-h);
+  max-width: var(--id-capture-chooser-list-max-w);
+  padding: var(--id-capture-chooser-list-scroll-padding);
+  scroll-padding-block: var(--id-capture-chooser-list-scroll-padding);
+  margin-inline: auto;
   flex-direction: column;
   align-items: center;
-  width: 100%;
   margin-top: auto;
   display: flex;
+  overflow-y: auto;
 }
 .IncodeCaptureFrame {

package/dist/id/styles.css.js CHANGED Viewed

	@@ -1 +1 @@
1	- export default "/! tailwindcss v4.2.2 \| MIT License \| https://tailwindcss.com /\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n .IncodeComponent, .IncodeComponent , .IncodeComponent :before, .IncodeComponent :after, .IncodeComponent ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-border-style: solid;\n }\n }\n}\n\n.IncodeSrOnly {\n clip-path: inset(50%);\n white-space: nowrap;\n border-width: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n position: absolute;\n overflow: hidden;\n}\n\n.IncodeAgeVerificationPage .IncodePageInner {\n padding-top: var(--spacing-8, var(--spacing-8, 8px));\n padding-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeAgeVerificationPage .IncodePageHeader {\n height: var(--page-header-height);\n min-height: var(--page-header-height);\n}\n\n.IncodeAgeVerificationPage .IncodePageLogo {\n height: var(--age-verification-logo-height);\n}\n\n.IncodeAgeVerificationPage .IncodePageTitleContainer {\n max-width: none;\n}\n\n.IncodeAgeVerificationPage .IncodePageContent {\n justify-content: center;\n}\n\n.IncodeAgeVerificationPage .IncodePageFooter {\n padding-top: var(--spacing-12, var(--spacing-12, 12px));\n padding-bottom: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationContent {\n justify-content: space-between;\n align-items: center;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n flex-direction: column;\n flex: 1;\n display: flex;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationList {\n width: 100%;\n max-width: var(--incode-form-max-w);\n justify-content: center;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n padding: var(--spacing-0, var(--spacing-none, 0px));\n flex-direction: column;\n flex: 1;\n margin-inline: auto;\n list-style-type: none;\n display: flex;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationItem {\n align-items: center;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n display: flex;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationIcon {\n height: var(--spacing-64, var(--spacing-64, 64px));\n width: var(--spacing-96, var(--spacing-96, 96px));\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationIcon img {\n width: 100%;\n height: 100%;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationText {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n flex: 1;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationButton {\n width: 100%;\n max-width: var(--incode-form-max-w);\n margin-inline: auto;\n}\n\n.IncodeIdTutorial .IncodePageTitleContainer {\n padding-block: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdTutorial .IncodeBaseTutorialContainer {\n margin: calc(var(--spacing-24, var(--spacing-24, 24px)) -1);\n}\n\n.IncodeIdTutorial .IncodeBaseTutorialAnimationContainer {\n padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeFlipAnimation {\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n height: 100%;\n padding: var(--spacing-24, var(--spacing-24, 24px));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdFlipCardPage .IncodePageInner {\n padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeIdFlipCardLayout {\n width: 100%;\n height: 100%;\n padding: var(--spacing-24, var(--spacing-24, 24px));\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent {\n z-index: 10;\n flex-direction: column;\n align-items: center;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardTopArea {\n justify-content: flex-end;\n align-items: center;\n gap: var(--spacing-24, var(--spacing-24, 24px));\n padding-bottom: var(--spacing-40, var(--spacing-40, 40px));\n z-index: 10;\n flex-direction: column;\n flex: 1;\n width: 100%;\n display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardCopy {\n opacity: 0;\n flex-direction: column;\n align-items: center;\n animation: .3s ease-out forwards incodeIdFlipCardFadeIn;\n display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardTitle {\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardSubtitle {\n max-width: var(--id-capture-flip-card-subtitle-max-w);\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame {\n overflow: hidden;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {\n width: var(--id-capture-frame-vertical-width);\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeIdFlipCardFrameFlipping {\n --frame-border-color: var(--border-neutral-100);\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardScene {\n perspective: 1200px;\n width: 100%;\n height: 100%;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardCard {\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n animation: 1s ease-in-out .6s forwards incodeIdFlipCardRotate;\n position: relative;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardCard {\n animation: none;\n }\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardFace {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n backface-visibility: hidden;\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardFace.IncodeIdFlipCardFaceBack {\n transform: rotateY(180deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardFace.IncodeIdFlipCardFaceBack {\n opacity: 0;\n animation: 1s ease-in-out .6s forwards incodeIdFlipCardReducedMotionFadeIn;\n transform: none;\n }\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardImage {\n object-fit: cover;\n width: 100%;\n height: 100%;\n animation: 1s ease-in-out .6s forwards incodeIdFlipCardFrontFade;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardImage {\n animation: 1s ease-in-out .6s forwards incodeIdFlipCardReducedMotionFadeOut;\n }\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardAsset {\n object-fit: cover;\n width: 100%;\n height: 100%;\n padding: var(--spacing-4, var(--spacing-4, 4px));\n display: block;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardBottomArea {\n z-index: 10;\n width: 100%;\n max-width: var(--id-capture-bottom-area-max-w);\n padding-top: var(--spacing-8, var(--spacing-8, 8px));\n flex-direction: column;\n flex: 1;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardBottomArea .IncodeCaptureEncryptionLabel {\n justify-content: center;\n align-items: center;\n gap: var(--spacing-4, var(--spacing-4, 4px));\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-m-regular-size);\n font-weight: var(--typography-body-m-regular-weight);\n line-height: var(--typography-body-m-regular-line-height);\n letter-spacing: var(--typography-body-m-regular-letter-spacing);\n white-space: nowrap;\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n display: flex;\n}\n\n@keyframes incodeIdFlipCardFadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes incodeIdFlipCardRotate {\n from {\n transform: rotateY(0);\n }\n\n to {\n transform: rotateY(180deg);\n }\n}\n\n@keyframes incodeIdFlipCardFrontFade {\n 0%, 20% {\n opacity: 1;\n }\n\n 50%, 100% {\n opacity: 0;\n }\n}\n\n@keyframes incodeIdFlipCardReducedMotionFadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes incodeIdFlipCardReducedMotionFadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n.IncodeCommonIssuesFullScreen .IncodeModalDialog {\n max-width: none;\n height: 100%;\n max-height: none;\n}\n\n.IncodeCommonIssuesFullScreen .IncodeModalContent {\n border-radius: var(--radius-none, var(--border-radius-none));\n max-width: none;\n height: 100%;\n margin: auto;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesQuestionIcon {\n flex-shrink: 0;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCards {\n width: 100%;\n max-width: var(--incode-form-max-w);\n gap: var(--spacing-32, var(--spacing-32, 32px));\n padding-block: var(--spacing-16, var(--spacing-16, 16px));\n flex-direction: column;\n display: flex;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCard {\n align-items: flex-start;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n display: flex;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCardIcon {\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n flex-shrink: 0;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCardText {\n gap: var(--spacing-4, var(--spacing-4, 4px));\n flex-direction: column;\n display: flex;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCardTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCardBody {\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-m-regular-size);\n font-weight: var(--typography-body-m-regular-weight);\n line-height: var(--typography-body-m-regular-line-height);\n letter-spacing: var(--typography-body-m-regular-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesButtons {\n margin-top: auto;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesTakeManually {\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesTryAgain {\n width: 100%;\n}\n\n.IncodeChooserPage .IncodePageContent {\n padding-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeChooserPage .IncodePageTitle {\n max-width: var(--incode-form-max);\n}\n\n.IncodeChooserPage .IncodeChooserContainer {\n flex-direction: column;\n align-items: center;\n width: 100%;\n margin-top: auto;\n display: flex;\n}\n\n.IncodeCaptureFrame {\n border-radius: var(--radius-medium, var(--border-radius-medium));\n --frame-border-color: var(--border-neutral-100);\n border: var(--id-capture-frame-border-width) solid var(--frame-border-color);\n justify-content: center;\n align-self: center;\n align-items: center;\n transition: max-width .3s ease-out, border-color .3s ease-out;\n display: flex;\n position: relative;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameHorizontal {\n width: 100%;\n max-width: var(--id-capture-frame-horizontal-max-width);\n aspect-ratio: 35 / 22;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameVertical {\n width: 100%;\n max-width: var(--id-capture-frame-vertical-max-width);\n aspect-ratio: 22 / 35;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFramePassport.IncodeCaptureFrameHorizontal {\n aspect-ratio: 42 / 30;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFramePassport.IncodeCaptureFrameVertical {\n aspect-ratio: 30 / 42;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameIdle {\n --frame-border-color: var(--border-neutral-100);\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameCapturing, .IncodeCaptureFrame.IncodeCaptureFrameFocus {\n --frame-border-color: var(--border-brand-500);\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameAnalyzing, .IncodeCaptureFrame.IncodeCaptureFrameSuccess {\n --frame-border-color: var(--border-status-positive-static);\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameError {\n --frame-border-color: var(--border-status-negative);\n}\n\n.IncodeIdCaptureStage {\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n.IncodeIdCaptureStage > * {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n position: absolute;\n}\n\n.IncodeIdCaptureStage > .IncodeIdCaptureStageResultExiting {\n animation: incodeIdCaptureResultCrossfadeOut var(--id-capture-result-crossfade-duration) linear forwards;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdCaptureStage > .IncodeIdCaptureStageResultExiting {\n animation-duration: 1ms;\n }\n}\n\n.IncodeIdCaptureStage > .IncodeIdCaptureStageResultEntering {\n animation: incodeIdCaptureResultCrossfadeIn var(--id-capture-result-crossfade-duration) linear forwards;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdCaptureStage > .IncodeIdCaptureStageResultEntering {\n animation-duration: 1ms;\n }\n}\n\n.IncodeIdCapturePage {\n background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));\n}\n\n@media (min-width: 48rem) {\n .IncodeIdCapturePage {\n background-color: var(--capture-page-backdrop-color);\n }\n}\n\n.IncodeIdCapturePage .IncodePageInner {\n padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeIdCapturePage .IncodePageContent {\n flex: 1;\n position: relative;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing {\n height: 100%;\n color: var(--color-text-body-0, var(--text-body-0-static));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureVideo {\n pointer-events: none;\n inset: var(--spacing-0, var(--spacing-none, 0px));\n position: absolute;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureVideo.IncodeCaptureVideoLoading {\n opacity: 0;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureVideo .IncodeCaptureVideoElement {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n object-fit: cover;\n width: 100%;\n max-width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureOverlay {\n pointer-events: none;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureButton {\n border-radius: var(--radius-button-primary, var(--button-primary-border-radius));\n padding-inline: var(--spacing-24, var(--spacing-24, 24px));\n padding-block: var(--spacing-12, var(--spacing-12, 12px));\n background-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));\n color: var(--color-button-primary-text-default, var(--button-primary-text-default));\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureInitializing {\n height: 100%;\n color: var(--color-text-body-0, var(--text-body-0-static));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureInitializing .IncodeCaptureInitializingText {\n margin-top: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureUploading, .IncodeIdCapturePage .IncodeCaptureUploading {\n height: 100%;\n color: var(--color-text-body-0, var(--text-body-0-static));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n@keyframes incodeIdCaptureResultCrossfadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes incodeIdCaptureResultCrossfadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.IncodeCaptureOverlayId {\n padding: var(--spacing-24, var(--spacing-24, 24px));\n align-items: center;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureTopSection {\n justify-content: flex-end;\n align-items: center;\n gap: var(--spacing-24, var(--spacing-24, 24px));\n padding-bottom: var(--spacing-40, var(--spacing-40, 40px));\n z-index: 10;\n flex-direction: column;\n flex: 1;\n display: flex;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureTopSection .IncodeCameraOverlayHeader {\n padding-inline: var(--spacing-16, var(--spacing-16, 16px));\n padding-top: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter {\n flex: 1;\n justify-content: space-between;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeCaptureFooterCaptureSection {\n position: relative;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer {\n pointer-events: none;\n z-index: 1000;\n --manual-capture-tooltip-button-gap: var(--spacing-4);\n --manual-capture-tooltip-button-top-offset: var(--spacing-12);\n --manual-capture-tooltip-button-center-offset: calc(var(--spacing-32) + var(--manual-capture-tooltip-button-gap));\n width: max-content;\n left: 50%;\n bottom: calc(100% - ( var(--manual-capture-tooltip-button-top-offset) - var(--manual-capture-tooltip-button-gap) ));\n animation: manualCaptureTooltipExit .35s ease-in var(--manual-capture-tooltip-dismiss-delay, 3.5s) forwards;\n justify-content: center;\n display: flex;\n position: absolute;\n transform: translateX(-50%);\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip {\n border-radius: var(--radius-medium, var(--border-radius-medium));\n background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));\n padding: var(--spacing-16, var(--spacing-16, 16px));\n animation: .5s ease-out forwards slideUp;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n padding: var(--spacing-0, var(--spacing-none, 0px));\n flex-direction: column;\n align-items: center;\n list-style-type: none;\n display: flex;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList li {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n font-family: var(--typography-tooltip-family);\n font-size: var(--typography-tooltip-m-size);\n font-weight: var(--typography-tooltip-m-weight);\n line-height: var(--typography-tooltip-m-line-height);\n letter-spacing: var(--typography-tooltip-m-letter-spacing);\n text-wrap: nowrap;\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerSrOnly {\n clip-path: inset(50%);\n white-space: nowrap;\n border-width: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n animation: none;\n position: absolute;\n overflow: hidden;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerSrOnly .IncodeIdManualCaptureTooltip {\n animation: none;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerAutoDismiss {\n animation-name: manualCaptureTooltipExitAutoDismiss;\n}\n\n.IncodeCaptureOverlayId .IncodeCameraFrameHorizontal.IncodeCaptureFramePassport {\n aspect-ratio: 42 / 30;\n}\n\n.IncodeCaptureOverlayId .IncodeCameraFrameVertical.IncodeCaptureFramePassport {\n aspect-ratio: 30 / 42;\n}\n\n@keyframes manualCaptureTooltipExit {\n from {\n opacity: 1;\n transform: translateX(-50%);\n }\n\n to {\n opacity: 0;\n transform: translate(-50%, calc(50% + var(--manual-capture-tooltip-button-center-offset)));\n }\n}\n\n@keyframes manualCaptureTooltipExitAutoDismiss {\n from {\n opacity: 1;\n transform: translateX(-50%) scale(1);\n }\n\n to {\n opacity: .5;\n transform: translate(-50%, calc(25% + var(--manual-capture-tooltip-button-center-offset))) scale(.5);\n }\n}\n\n.IncodeIdManualCaptureButton {\n bottom: var(--spacing-24, var(--spacing-24, 24px));\n z-index: 100;\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n width: 100%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n justify-content: center;\n align-items: center;\n gap: var(--spacing-4, var(--spacing-4, 4px));\n flex-direction: column;\n animation: .5s ease-out forwards slideUp;\n display: flex;\n position: absolute;\n left: 50%;\n}\n\n.IncodeIdManualCaptureButton .IncodeButtonLink {\n height: 100%;\n padding: var(--spacing-0, var(--spacing-none, 0px));\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip {\n border-radius: var(--radius-medium, var(--border-radius-medium));\n background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));\n padding: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n padding: var(--spacing-0, var(--spacing-none, 0px));\n flex-direction: column;\n align-items: center;\n list-style-type: none;\n display: flex;\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList li {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n font-family: var(--typography-tooltip-family);\n font-size: var(--typography-tooltip-m-size);\n font-weight: var(--typography-tooltip-m-weight);\n line-height: var(--typography-tooltip-m-line-height);\n letter-spacing: var(--typography-tooltip-m-letter-spacing);\n text-wrap: nowrap;\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureButtonContent .IncodeIdManualCaptureButtonButton svg {\n transition: filter .2s, transform .2s;\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureButtonContent:active svg {\n filter: brightness(.8);\n transform: scale(.95);\n}\n\n@keyframes slideUpAndDown {\n 0%, 12% {\n opacity: 0;\n transform: translateY(100%);\n }\n\n 24% {\n opacity: 1;\n transform: translateY(0);\n }\n\n 76% {\n opacity: 1;\n transform: translateY(0);\n }\n\n 88%, 100% {\n opacity: 0;\n transform: translateY(100%);\n }\n}\n\n.IncodeIdHint {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n z-index: 10;\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n}\n\n.IncodeIdHint .IncodeIdHintAnimated {\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n animation: 3s ease-in-out forwards slideUpAndDown;\n display: flex;\n position: relative;\n}\n\n.IncodeIdHint .IncodeIdHintAnimated .IncodeIdHintSvg {\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdHint .IncodeIdHintAnimated .IncodeIdHintSvg svg {\n width: var(--id-capture-hint-svg-size);\n height: var(--id-capture-hint-svg-size);\n min-width: var(--id-capture-hint-svg-size);\n min-height: var(--id-capture-hint-svg-size);\n}\n\n.IncodeComponent .IncodePermissionInCameraPage .IncodePermissionInCameraContent {\n opacity: 0;\n width: 100%;\n height: 100%;\n animation: incodePermissionInCameraReveal var(--id-tutorial-to-permission-transition-duration) ease-out var(--id-permission-in-camera-reveal-delay) forwards;\n flex-direction: column;\n align-items: center;\n display: flex;\n}\n\n.IncodeComponent .IncodePermissionInCameraPage .IncodePermissionInCameraReservedFooter {\n visibility: hidden;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeComponent .IncodePermissionInCameraPage .IncodePermissionInCameraContent {\n animation-duration: 1ms;\n animation-delay: 0s;\n }\n}\n\n@keyframes incodePermissionInCameraReveal {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage {\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowCaptureLayer, .IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowPermissionLayer, .IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowTutorialLayer {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n position: absolute;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowCaptureLayer {\n z-index: 10;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowPermissionLayer {\n z-index: 20;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowTutorialLayer {\n z-index: 30;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowPermissionLayerExiting {\n pointer-events: none;\n animation: incodePermissionInCameraToCaptureExit var(--id-permission-in-camera-to-capture-transition-duration) ease-in var(--id-permission-in-camera-to-capture-transition-duration) forwards;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowPermissionLayerExiting .IncodePermissionInCameraHeading {\n animation: incodePermissionInCameraHeadingExit var(--id-permission-in-camera-to-capture-transition-duration) ease-in forwards;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowTutorialLayerExiting {\n pointer-events: none;\n animation: incodeTutorialToPermissionInCameraExit var(--id-tutorial-to-permission-transition-duration) ease-in forwards;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeComponent .IncodePermissionInCameraFlowPermissionLayerExiting {\n animation-duration: 1ms;\n animation-delay: 0s;\n }\n\n .IncodeComponent .IncodePermissionInCameraFlowPermissionLayerExiting .IncodePermissionInCameraHeading, .IncodeComponent .IncodePermissionInCameraFlowTutorialLayerExiting {\n animation-duration: 1ms;\n }\n}\n\n@keyframes incodeTutorialToPermissionInCameraExit {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes incodePermissionInCameraHeadingExit {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes incodePermissionInCameraToCaptureExit {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n.IncodeIdProcessingPage .IncodePageInner {\n padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeIdProcessingLayout {\n width: 100%;\n height: 100%;\n padding: var(--spacing-24, var(--spacing-24, 24px));\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent {\n z-index: 10;\n flex-direction: column;\n align-items: center;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingTopArea {\n justify-content: flex-end;\n align-items: center;\n gap: var(--spacing-24, var(--spacing-24, 24px));\n padding-bottom: var(--spacing-40, var(--spacing-40, 40px));\n z-index: 10;\n flex-direction: column;\n flex: 1;\n width: 100%;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame {\n overflow: hidden;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {\n width: var(--id-capture-frame-vertical-width);\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical .IncodeIdProcessingOverlay {\n left: -25%;\n right: -25%;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingImage {\n background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));\n object-fit: cover;\n width: 100%;\n max-width: 100%;\n height: 100%;\n max-height: 100%;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingImage.IncodeIdProcessingImageBlurred {\n filter: blur(var(--id-processing-image-blur-radius));\n -webkit-backdrop-filter: blur(var(--id-processing-image-blur-radius));\n backdrop-filter: blur(var(--id-processing-image-blur-radius));\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingOverlay {\n pointer-events: none;\n z-index: 10;\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n inset: 0 -10%;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingBottomArea {\n width: 100%;\n max-width: var(--id-capture-bottom-area-max-w);\n padding-top: var(--spacing-8, var(--spacing-8, 8px));\n z-index: 10;\n flex-direction: column;\n flex: 1;\n justify-content: space-between;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingBottomArea .IncodeCaptureEncryptionLabel {\n justify-content: center;\n align-items: center;\n gap: var(--spacing-4, var(--spacing-4, 4px));\n padding-bottom: var(--spacing-12, var(--spacing-12, 12px));\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-m-regular-size);\n font-weight: var(--typography-body-m-regular-weight);\n line-height: var(--typography-body-m-regular-line-height);\n letter-spacing: var(--typography-body-m-regular-letter-spacing);\n white-space: nowrap;\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n display: flex;\n}\n\n.IncodeIdProcessingLayout.IncodeIdProcessingLayoutNoImage .IncodeIdProcessingBottomArea {\n justify-content: flex-end;\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingContent {\n flex-direction: column;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeProgressBarContainer {\n margin-bottom: var(--spacing-24, var(--spacing-24, 24px));\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeAnalyzingTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n text-align: center;\n min-height: var(--typography-headline-h2-line-height);\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeAnalyzingTitle .IncodeAnalyzingTitleText {\n animation: IncodeAnalyzingTitleFade var(--id-capture-analyzing-title-fade-duration) ease-out both;\n display: inline-block;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeAnalyzingTitle .IncodeAnalyzingTitleText {\n animation-duration: 1ms;\n }\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingLottie {\n width: 100%;\n max-width: none;\n}\n\n@keyframes IncodeAnalyzingTitleFade {\n from {\n opacity: 0;\n transform: translateY(var(--id-capture-analyzing-title-fade-offset));\n }\n\n to {\n opacity: 1;\n transform: none;\n }\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultContent, .IncodeIdProcessingLayout .IncodeIdProcessingResultStatus {\n flex-direction: column;\n align-items: center;\n width: 100%;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n text-align: center;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultSubtitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n text-align: center;\n max-width: var(--incode-form-max-w);\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainer {\n margin-top: var(--spacing-24, var(--spacing-24, 24px));\n gap: var(--spacing-16, var(--spacing-16, 16px));\n flex-direction: column;\n width: 100%;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultAttempts {\n padding-block: var(--spacing-12, var(--spacing-12, 12px));\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h4-size);\n font-weight: var(--typography-headline-h4-weight);\n line-height: var(--typography-headline-h4-line-height);\n letter-spacing: var(--typography-headline-h4-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultContentExiting, .IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainerExiting {\n animation: .3s ease-out forwards incodeIdProcessingResultFadeOut;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdProcessingLayout .IncodeIdProcessingResultContentExiting, .IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainerExiting {\n animation-duration: 1ms;\n }\n}\n\n@keyframes incodeIdProcessingResultFadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n.IncodeIdError {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n z-index: 1000;\n justify-content: center;\n align-items: center;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n flex-direction: column;\n width: 100%;\n height: 100%;\n display: flex;\n position: fixed;\n}\n\n.IncodeIdError .IncodeIdErrorMessage {\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h4-size);\n font-weight: var(--typography-headline-h4-weight);\n line-height: var(--typography-headline-h4-line-height);\n letter-spacing: var(--typography-headline-h4-letter-spacing);\n color: var(--color-text-body-0, var(--text-body-0-static));\n max-width: var(--incode-form-max-w);\n margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdNoAttemptsContent {\n padding-inline: var(--spacing-20, var(--spacing-20, 20px));\n max-height: var(--id-no-attempts-content-max-h);\n max-width: var(--id-no-attempts-content-max-w);\n flex-direction: column;\n flex: 1;\n justify-content: center;\n align-items: center;\n margin: auto;\n display: flex;\n}\n\n.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsIcon {\n margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsTitle {\n text-align: center;\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsSubtitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n text-align: center;\n max-width: var(--incode-form-max-w);\n}\n\n.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsButtonContainer {\n bottom: var(--spacing-32, var(--spacing-32, 32px));\n right: var(--spacing-0, var(--spacing-none, 0px));\n left: var(--spacing-0, var(--spacing-none, 0px));\n padding-inline: var(--spacing-24, var(--spacing-24, 24px));\n justify-content: center;\n display: flex;\n position: absolute;\n}\n\n.IncodeUnacceptedIdDocuments {\n margin-top: var(--spacing-32, var(--spacing-32, 32px));\n flex-direction: column;\n align-items: center;\n width: 100%;\n display: flex;\n}\n\n.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountry {\n margin-bottom: var(--spacing-32, var(--spacing-32, 32px));\n align-items: center;\n gap: var(--spacing-8, var(--spacing-8, 8px));\n flex-direction: column;\n display: flex;\n}\n\n.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountryHeading {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h4-size);\n font-weight: var(--typography-headline-h4-weight);\n line-height: var(--typography-headline-h4-line-height);\n letter-spacing: var(--typography-headline-h4-letter-spacing);\n}\n\n.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountryLabel {\n align-items: center;\n gap: var(--spacing-8, var(--spacing-8, 8px));\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h3-size);\n font-weight: var(--typography-headline-h3-weight);\n line-height: var(--typography-headline-h3-line-height);\n letter-spacing: var(--typography-headline-h3-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n display: inline-flex;\n}\n\n.IncodeIdCaptureNotification {\n right: var(--spacing-24, var(--spacing-24, 24px));\n left: var(--spacing-24, var(--spacing-24, 24px));\n z-index: 100;\n max-width: var(--incode-form-max-w);\n padding-bottom: var(--spacing-32, var(--spacing-32, 32px));\n top: var(--incode-overlay-top-inset, var(--spacing-24));\n align-items: flex-end;\n margin: auto;\n display: flex;\n position: absolute;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent {\n z-index: 100;\n border-radius: var(--radius-large, var(--border-radius-large));\n border-style: var(--tw-border-style);\n border-width: 2px;\n border-color: var(--color-border-neutral-300, var(--border-neutral-300));\n background-color: var(--color-surface-neutral-900-80, var(--surface-neutral-900-80));\n width: 100%;\n padding-inline: var(--spacing-20, var(--spacing-20, 20px));\n box-shadow: var(--id-capture-notification-content-shadow);\n display: flex;\n overflow: hidden;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal {\n justify-content: center;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText {\n justify-content: center;\n gap: var(--spacing-8, var(--spacing-8, 8px));\n padding-top: var(--spacing-16, var(--spacing-16, 16px));\n padding-bottom: var(--spacing-12, var(--spacing-12, 12px));\n text-align: center;\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n flex-direction: column;\n display: flex;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h3-size);\n font-weight: var(--typography-headline-h3-weight);\n line-height: var(--typography-headline-h3-line-height);\n letter-spacing: var(--typography-headline-h3-letter-spacing);\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationDescription {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-tertiary-static, var(--text-body-300-tertiary-static));\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal .IncodeIdCaptureNotificationText {\n gap: var(--spacing-4, var(--spacing-4, 4px));\n padding-block: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationDescription {\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-m-regular-size);\n font-weight: var(--typography-body-m-regular-weight);\n line-height: var(--typography-body-m-regular-line-height);\n letter-spacing: var(--typography-body-m-regular-letter-spacing);\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationAnimation {\n height: var(--id-capture-notification-animation-height);\n justify-content: center;\n align-items: center;\n width: auto;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage {\n height: 100%;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadBody {\n justify-content: center;\n align-items: center;\n row-gap: var(--spacing-16, var(--spacing-16, 16px));\n width: 100%;\n height: 100%;\n max-width: var(--digital-id-content-max-w);\n flex-direction: column;\n margin-inline: auto;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreviewBody {\n row-gap: var(--spacing-16, var(--spacing-16, 16px));\n grid-template-columns: 1fr;\n grid-template-rows: var(--spacing-24) var(--digital-id-preview-h) var(--spacing-24);\n width: 100%;\n height: 100%;\n max-width: var(--digital-id-content-max-w);\n align-content: center;\n justify-items: center;\n margin-inline: auto;\n display: grid;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreStatusZone {\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPostCaptionZone {\n justify-content: center;\n align-items: flex-start;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadFooter {\n width: 100%;\n margin-inline: auto;\n margin-top: var(--spacing-24, var(--spacing-24, 24px));\n margin-bottom: var(--spacing-8, var(--spacing-8, 8px));\n justify-content: flex-end;\n row-gap: var(--spacing-16, var(--spacing-16, 16px));\n max-width: var(--digital-id-content-max-w);\n min-height: var(--digital-id-footer-min-h);\n flex-direction: column;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadHiddenInput {\n display: none;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadTutorialIllustration {\n width: 100%;\n max-height: var(--digital-id-tutorial-illustration-max-h);\n flex: 1;\n justify-content: center;\n align-items: center;\n display: flex;\n overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeUploadIdScreenImage {\n height: var(--digital-id-illustration-max-h);\n aspect-ratio: 191 / 266;\n width: auto;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreviewCard {\n border-radius: var(--radius-medium, var(--border-radius-medium));\n border-style: var(--tw-border-style);\n --tw-border-style: solid;\n border-style: solid;\n border-width: 1px;\n border-color: var(--color-border-neutral-100, var(--border-neutral-100));\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n width: var(--digital-id-preview-w);\n height: var(--digital-id-preview-h);\n justify-content: center;\n align-items: center;\n display: flex;\n overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadDocumentPreview {\n width: var(--digital-id-preview-w);\n height: var(--digital-id-preview-h);\n justify-content: center;\n align-items: center;\n display: flex;\n position: relative;\n overflow: visible;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadDocumentPreviewPdf {\n border-radius: var(--radius-medium, var(--border-radius-medium));\n border-style: var(--tw-border-style);\n border-width: var(--border-width-bold, var(--primitive-border-width-2));\n --tw-border-style: solid;\n border-style: solid;\n border-color: var(--color-border-status-positive, var(--border-status-positive-static));\n object-fit: contain;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreviewPdf {\n object-fit: contain;\n width: 100%;\n height: 100%;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadFileName {\n text-align: center;\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-m-regular-size);\n font-weight: var(--typography-body-m-regular-weight);\n line-height: var(--typography-body-m-regular-line-height);\n letter-spacing: var(--typography-body-m-regular-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n max-width: var(--digital-id-file-name-max-w);\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadProgressBar .IncodeProgressBar {\n border-radius: var(--radius-full, var(--border-radius-full));\n background-color: var(--color-surface-neutral-200, var(--surface-neutral-200));\n width: var(--digital-id-progress-bar-w);\n height: var(--digital-id-progress-bar-h);\n overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadProgressBar .IncodeProgressBarFill {\n border-radius: var(--radius-full, var(--border-radius-full));\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadLaserOverlay {\n pointer-events: none;\n width: var(--digital-id-preview-w);\n height: var(--digital-id-laser-h);\n transform: translateX(-50%) scale(var(--digital-id-laser-scale));\n position: absolute;\n top: -2px;\n left: 50%;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadLaserOverlay {\n display: none;\n }\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadSuccessIcon {\n color: var(--color-icon-status-positive, var(--icon-status-positive));\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadErrorIcon {\n margin-bottom: var(--spacing-8, var(--spacing-8, 8px));\n color: var(--color-icon-status-negative, var(--icon-status-negative));\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadErrorPreview {\n margin-top: var(--spacing-8, var(--spacing-8, 8px));\n border-radius: var(--radius-medium, var(--border-radius-medium));\n border-style: var(--tw-border-style);\n --tw-border-style: solid;\n border-style: solid;\n border-width: 1px;\n border-color: var(--color-border-status-negative, var(--border-status-negative));\n padding: var(--spacing-4);\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadAttempts {\n margin-top: var(--spacing-8, var(--spacing-8, 8px));\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-s-regular-size);\n font-weight: var(--typography-body-s-regular-weight);\n line-height: var(--typography-body-s-regular-line-height);\n letter-spacing: var(--typography-body-s-regular-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n@property --tw-translate-x {\n syntax: \"\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-y {\n syntax: \"\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-z {\n syntax: \"\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-border-style {\n syntax: \"\";\n inherits: false;\n initial-value: solid;\n}\n";
1	+ export default "/! tailwindcss v4.2.2 \| MIT License \| https://tailwindcss.com /\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n .IncodeComponent, .IncodeComponent , .IncodeComponent :before, .IncodeComponent :after, .IncodeComponent ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-border-style: solid;\n }\n }\n}\n\n.IncodeSrOnly {\n clip-path: inset(50%);\n white-space: nowrap;\n border-width: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n position: absolute;\n overflow: hidden;\n}\n\n.IncodeAgeVerificationPage .IncodePageInner {\n padding-top: var(--spacing-8, var(--spacing-8, 8px));\n padding-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeAgeVerificationPage .IncodePageHeader {\n height: var(--page-header-height);\n min-height: var(--page-header-height);\n}\n\n.IncodeAgeVerificationPage .IncodePageLogo {\n height: var(--age-verification-logo-height);\n}\n\n.IncodeAgeVerificationPage .IncodePageTitleContainer {\n max-width: none;\n}\n\n.IncodeAgeVerificationPage .IncodePageContent {\n justify-content: center;\n}\n\n.IncodeAgeVerificationPage .IncodePageFooter {\n padding-top: var(--spacing-12, var(--spacing-12, 12px));\n padding-bottom: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationContent {\n justify-content: space-between;\n align-items: center;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n flex-direction: column;\n flex: 1;\n display: flex;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationList {\n width: 100%;\n max-width: var(--incode-form-max-w);\n justify-content: center;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n padding: var(--spacing-0, var(--spacing-none, 0px));\n flex-direction: column;\n flex: 1;\n margin-inline: auto;\n list-style-type: none;\n display: flex;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationItem {\n align-items: center;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n display: flex;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationIcon {\n height: var(--spacing-64, var(--spacing-64, 64px));\n width: var(--spacing-96, var(--spacing-96, 96px));\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationIcon img {\n width: 100%;\n height: 100%;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationText {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n flex: 1;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationButton {\n width: 100%;\n max-width: var(--incode-form-max-w);\n margin-inline: auto;\n}\n\n.IncodeIdTutorial .IncodePageTitleContainer {\n padding-block: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdTutorial .IncodeBaseTutorialContainer {\n margin: calc(var(--spacing-24, var(--spacing-24, 24px)) -1);\n}\n\n.IncodeIdTutorial .IncodeBaseTutorialAnimationContainer {\n padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeFlipAnimation {\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n height: 100%;\n padding: var(--spacing-24, var(--spacing-24, 24px));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdFlipCardPage .IncodePageInner {\n padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeIdFlipCardLayout {\n width: 100%;\n height: 100%;\n padding: var(--spacing-24, var(--spacing-24, 24px));\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent {\n z-index: 10;\n flex-direction: column;\n align-items: center;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardTopArea {\n justify-content: flex-end;\n align-items: center;\n gap: var(--spacing-24, var(--spacing-24, 24px));\n padding-bottom: var(--spacing-40, var(--spacing-40, 40px));\n z-index: 10;\n flex-direction: column;\n flex: 1;\n width: 100%;\n display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardCopy {\n opacity: 0;\n flex-direction: column;\n align-items: center;\n animation: .3s ease-out forwards incodeIdFlipCardFadeIn;\n display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardTitle {\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardSubtitle {\n max-width: var(--id-capture-flip-card-subtitle-max-w);\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame {\n overflow: hidden;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {\n width: var(--id-capture-frame-vertical-width);\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeIdFlipCardFrameFlipping {\n --frame-border-color: var(--border-neutral-100);\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardScene {\n perspective: 1200px;\n width: 100%;\n height: 100%;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardCard {\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n animation: 1s ease-in-out .6s forwards incodeIdFlipCardRotate;\n position: relative;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardCard {\n animation: none;\n }\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardFace {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n backface-visibility: hidden;\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardFace.IncodeIdFlipCardFaceBack {\n transform: rotateY(180deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardFace.IncodeIdFlipCardFaceBack {\n opacity: 0;\n animation: 1s ease-in-out .6s forwards incodeIdFlipCardReducedMotionFadeIn;\n transform: none;\n }\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardImage {\n object-fit: cover;\n width: 100%;\n height: 100%;\n animation: 1s ease-in-out .6s forwards incodeIdFlipCardFrontFade;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardImage {\n animation: 1s ease-in-out .6s forwards incodeIdFlipCardReducedMotionFadeOut;\n }\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardAsset {\n object-fit: cover;\n width: 100%;\n height: 100%;\n padding: var(--spacing-4, var(--spacing-4, 4px));\n display: block;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardBottomArea {\n z-index: 10;\n width: 100%;\n max-width: var(--id-capture-bottom-area-max-w);\n padding-top: var(--spacing-8, var(--spacing-8, 8px));\n flex-direction: column;\n flex: 1;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardBottomArea .IncodeCaptureEncryptionLabel {\n justify-content: center;\n align-items: center;\n gap: var(--spacing-4, var(--spacing-4, 4px));\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-m-regular-size);\n font-weight: var(--typography-body-m-regular-weight);\n line-height: var(--typography-body-m-regular-line-height);\n letter-spacing: var(--typography-body-m-regular-letter-spacing);\n white-space: nowrap;\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n display: flex;\n}\n\n@keyframes incodeIdFlipCardFadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes incodeIdFlipCardRotate {\n from {\n transform: rotateY(0);\n }\n\n to {\n transform: rotateY(180deg);\n }\n}\n\n@keyframes incodeIdFlipCardFrontFade {\n 0%, 20% {\n opacity: 1;\n }\n\n 50%, 100% {\n opacity: 0;\n }\n}\n\n@keyframes incodeIdFlipCardReducedMotionFadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes incodeIdFlipCardReducedMotionFadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n.IncodeCommonIssuesFullScreen .IncodeModalDialog {\n max-width: none;\n height: 100%;\n max-height: none;\n}\n\n.IncodeCommonIssuesFullScreen .IncodeModalContent {\n border-radius: var(--radius-none, var(--border-radius-none));\n max-width: none;\n height: 100%;\n margin: auto;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesQuestionIcon {\n flex-shrink: 0;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCards {\n width: 100%;\n max-width: var(--incode-form-max-w);\n gap: var(--spacing-32, var(--spacing-32, 32px));\n padding-block: var(--spacing-16, var(--spacing-16, 16px));\n flex-direction: column;\n display: flex;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCard {\n align-items: flex-start;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n display: flex;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCardIcon {\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n flex-shrink: 0;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCardText {\n gap: var(--spacing-4, var(--spacing-4, 4px));\n flex-direction: column;\n display: flex;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCardTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCardBody {\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-m-regular-size);\n font-weight: var(--typography-body-m-regular-weight);\n line-height: var(--typography-body-m-regular-line-height);\n letter-spacing: var(--typography-body-m-regular-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesButtons {\n margin-top: auto;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesTakeManually {\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesTryAgain {\n width: 100%;\n}\n\n.IncodeChooserPage .IncodePageContent {\n min-height: var(--spacing-0, var(--spacing-none, 0px));\n padding-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeChooserPage .IncodePageTitle {\n max-width: var(--incode-form-max);\n}\n\n.IncodeChooserPage .IncodeChooserContainer {\n min-height: var(--spacing-0, var(--spacing-none, 0px));\n width: 100%;\n max-height: var(--id-capture-chooser-list-max-h);\n max-width: var(--id-capture-chooser-list-max-w);\n padding: var(--id-capture-chooser-list-scroll-padding);\n scroll-padding-block: var(--id-capture-chooser-list-scroll-padding);\n margin-inline: auto;\n flex-direction: column;\n align-items: center;\n margin-top: auto;\n display: flex;\n overflow-y: auto;\n}\n\n.IncodeCaptureFrame {\n border-radius: var(--radius-medium, var(--border-radius-medium));\n --frame-border-color: var(--border-neutral-100);\n border: var(--id-capture-frame-border-width) solid var(--frame-border-color);\n justify-content: center;\n align-self: center;\n align-items: center;\n transition: max-width .3s ease-out, border-color .3s ease-out;\n display: flex;\n position: relative;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameHorizontal {\n width: 100%;\n max-width: var(--id-capture-frame-horizontal-max-width);\n aspect-ratio: 35 / 22;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameVertical {\n width: 100%;\n max-width: var(--id-capture-frame-vertical-max-width);\n aspect-ratio: 22 / 35;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFramePassport.IncodeCaptureFrameHorizontal {\n aspect-ratio: 42 / 30;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFramePassport.IncodeCaptureFrameVertical {\n aspect-ratio: 30 / 42;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameIdle {\n --frame-border-color: var(--border-neutral-100);\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameCapturing, .IncodeCaptureFrame.IncodeCaptureFrameFocus {\n --frame-border-color: var(--border-brand-500);\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameAnalyzing, .IncodeCaptureFrame.IncodeCaptureFrameSuccess {\n --frame-border-color: var(--border-status-positive-static);\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameError {\n --frame-border-color: var(--border-status-negative);\n}\n\n.IncodeIdCaptureStage {\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n.IncodeIdCaptureStage > * {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n position: absolute;\n}\n\n.IncodeIdCaptureStage > .IncodeIdCaptureStageResultExiting {\n animation: incodeIdCaptureResultCrossfadeOut var(--id-capture-result-crossfade-duration) linear forwards;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdCaptureStage > .IncodeIdCaptureStageResultExiting {\n animation-duration: 1ms;\n }\n}\n\n.IncodeIdCaptureStage > .IncodeIdCaptureStageResultEntering {\n animation: incodeIdCaptureResultCrossfadeIn var(--id-capture-result-crossfade-duration) linear forwards;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdCaptureStage > .IncodeIdCaptureStageResultEntering {\n animation-duration: 1ms;\n }\n}\n\n.IncodeIdCapturePage {\n background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));\n}\n\n@media (min-width: 48rem) {\n .IncodeIdCapturePage {\n background-color: var(--capture-page-backdrop-color);\n }\n}\n\n.IncodeIdCapturePage .IncodePageInner {\n padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeIdCapturePage .IncodePageContent {\n flex: 1;\n position: relative;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing {\n height: 100%;\n color: var(--color-text-body-0, var(--text-body-0-static));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureVideo {\n pointer-events: none;\n inset: var(--spacing-0, var(--spacing-none, 0px));\n position: absolute;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureVideo.IncodeCaptureVideoLoading {\n opacity: 0;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureVideo .IncodeCaptureVideoElement {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n object-fit: cover;\n width: 100%;\n max-width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureOverlay {\n pointer-events: none;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureButton {\n border-radius: var(--radius-button-primary, var(--button-primary-border-radius));\n padding-inline: var(--spacing-24, var(--spacing-24, 24px));\n padding-block: var(--spacing-12, var(--spacing-12, 12px));\n background-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));\n color: var(--color-button-primary-text-default, var(--button-primary-text-default));\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureInitializing {\n height: 100%;\n color: var(--color-text-body-0, var(--text-body-0-static));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureInitializing .IncodeCaptureInitializingText {\n margin-top: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureUploading, .IncodeIdCapturePage .IncodeCaptureUploading {\n height: 100%;\n color: var(--color-text-body-0, var(--text-body-0-static));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n@keyframes incodeIdCaptureResultCrossfadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes incodeIdCaptureResultCrossfadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.IncodeCaptureOverlayId {\n padding: var(--spacing-24, var(--spacing-24, 24px));\n align-items: center;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureTopSection {\n justify-content: flex-end;\n align-items: center;\n gap: var(--spacing-24, var(--spacing-24, 24px));\n padding-bottom: var(--spacing-40, var(--spacing-40, 40px));\n z-index: 10;\n flex-direction: column;\n flex: 1;\n display: flex;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureTopSection .IncodeCameraOverlayHeader {\n padding-inline: var(--spacing-16, var(--spacing-16, 16px));\n padding-top: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter {\n flex: 1;\n justify-content: space-between;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeCaptureFooterCaptureSection {\n position: relative;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer {\n pointer-events: none;\n z-index: 1000;\n --manual-capture-tooltip-button-gap: var(--spacing-4);\n --manual-capture-tooltip-button-top-offset: var(--spacing-12);\n --manual-capture-tooltip-button-center-offset: calc(var(--spacing-32) + var(--manual-capture-tooltip-button-gap));\n width: max-content;\n left: 50%;\n bottom: calc(100% - ( var(--manual-capture-tooltip-button-top-offset) - var(--manual-capture-tooltip-button-gap) ));\n animation: manualCaptureTooltipExit .35s ease-in var(--manual-capture-tooltip-dismiss-delay, 3.5s) forwards;\n justify-content: center;\n display: flex;\n position: absolute;\n transform: translateX(-50%);\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip {\n border-radius: var(--radius-medium, var(--border-radius-medium));\n background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));\n padding: var(--spacing-16, var(--spacing-16, 16px));\n animation: .5s ease-out forwards slideUp;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n padding: var(--spacing-0, var(--spacing-none, 0px));\n flex-direction: column;\n align-items: center;\n list-style-type: none;\n display: flex;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList li {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n font-family: var(--typography-tooltip-family);\n font-size: var(--typography-tooltip-m-size);\n font-weight: var(--typography-tooltip-m-weight);\n line-height: var(--typography-tooltip-m-line-height);\n letter-spacing: var(--typography-tooltip-m-letter-spacing);\n text-wrap: nowrap;\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerSrOnly {\n clip-path: inset(50%);\n white-space: nowrap;\n border-width: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n animation: none;\n position: absolute;\n overflow: hidden;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerSrOnly .IncodeIdManualCaptureTooltip {\n animation: none;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerAutoDismiss {\n animation-name: manualCaptureTooltipExitAutoDismiss;\n}\n\n.IncodeCaptureOverlayId .IncodeCameraFrameHorizontal.IncodeCaptureFramePassport {\n aspect-ratio: 42 / 30;\n}\n\n.IncodeCaptureOverlayId .IncodeCameraFrameVertical.IncodeCaptureFramePassport {\n aspect-ratio: 30 / 42;\n}\n\n@keyframes manualCaptureTooltipExit {\n from {\n opacity: 1;\n transform: translateX(-50%);\n }\n\n to {\n opacity: 0;\n transform: translate(-50%, calc(50% + var(--manual-capture-tooltip-button-center-offset)));\n }\n}\n\n@keyframes manualCaptureTooltipExitAutoDismiss {\n from {\n opacity: 1;\n transform: translateX(-50%) scale(1);\n }\n\n to {\n opacity: .5;\n transform: translate(-50%, calc(25% + var(--manual-capture-tooltip-button-center-offset))) scale(.5);\n }\n}\n\n.IncodeIdManualCaptureButton {\n bottom: var(--spacing-24, var(--spacing-24, 24px));\n z-index: 100;\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n width: 100%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n justify-content: center;\n align-items: center;\n gap: var(--spacing-4, var(--spacing-4, 4px));\n flex-direction: column;\n animation: .5s ease-out forwards slideUp;\n display: flex;\n position: absolute;\n left: 50%;\n}\n\n.IncodeIdManualCaptureButton .IncodeButtonLink {\n height: 100%;\n padding: var(--spacing-0, var(--spacing-none, 0px));\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip {\n border-radius: var(--radius-medium, var(--border-radius-medium));\n background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));\n padding: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n padding: var(--spacing-0, var(--spacing-none, 0px));\n flex-direction: column;\n align-items: center;\n list-style-type: none;\n display: flex;\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList li {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n font-family: var(--typography-tooltip-family);\n font-size: var(--typography-tooltip-m-size);\n font-weight: var(--typography-tooltip-m-weight);\n line-height: var(--typography-tooltip-m-line-height);\n letter-spacing: var(--typography-tooltip-m-letter-spacing);\n text-wrap: nowrap;\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureButtonContent .IncodeIdManualCaptureButtonButton svg {\n transition: filter .2s, transform .2s;\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureButtonContent:active svg {\n filter: brightness(.8);\n transform: scale(.95);\n}\n\n@keyframes slideUpAndDown {\n 0%, 12% {\n opacity: 0;\n transform: translateY(100%);\n }\n\n 24% {\n opacity: 1;\n transform: translateY(0);\n }\n\n 76% {\n opacity: 1;\n transform: translateY(0);\n }\n\n 88%, 100% {\n opacity: 0;\n transform: translateY(100%);\n }\n}\n\n.IncodeIdHint {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n z-index: 10;\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n}\n\n.IncodeIdHint .IncodeIdHintAnimated {\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n animation: 3s ease-in-out forwards slideUpAndDown;\n display: flex;\n position: relative;\n}\n\n.IncodeIdHint .IncodeIdHintAnimated .IncodeIdHintSvg {\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdHint .IncodeIdHintAnimated .IncodeIdHintSvg svg {\n width: var(--id-capture-hint-svg-size);\n height: var(--id-capture-hint-svg-size);\n min-width: var(--id-capture-hint-svg-size);\n min-height: var(--id-capture-hint-svg-size);\n}\n\n.IncodeComponent .IncodePermissionInCameraPage .IncodePermissionInCameraContent {\n opacity: 0;\n width: 100%;\n height: 100%;\n animation: incodePermissionInCameraReveal var(--id-tutorial-to-permission-transition-duration) ease-out var(--id-permission-in-camera-reveal-delay) forwards;\n flex-direction: column;\n align-items: center;\n display: flex;\n}\n\n.IncodeComponent .IncodePermissionInCameraPage .IncodePermissionInCameraReservedFooter {\n visibility: hidden;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeComponent .IncodePermissionInCameraPage .IncodePermissionInCameraContent {\n animation-duration: 1ms;\n animation-delay: 0s;\n }\n}\n\n@keyframes incodePermissionInCameraReveal {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage {\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowCaptureLayer, .IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowPermissionLayer, .IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowTutorialLayer {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n position: absolute;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowCaptureLayer {\n z-index: 10;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowPermissionLayer {\n z-index: 20;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowTutorialLayer {\n z-index: 30;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowPermissionLayerExiting {\n pointer-events: none;\n animation: incodePermissionInCameraToCaptureExit var(--id-permission-in-camera-to-capture-transition-duration) ease-in var(--id-permission-in-camera-to-capture-transition-duration) forwards;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowPermissionLayerExiting .IncodePermissionInCameraHeading {\n animation: incodePermissionInCameraHeadingExit var(--id-permission-in-camera-to-capture-transition-duration) ease-in forwards;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowTutorialLayerExiting {\n pointer-events: none;\n animation: incodeTutorialToPermissionInCameraExit var(--id-tutorial-to-permission-transition-duration) ease-in forwards;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeComponent .IncodePermissionInCameraFlowPermissionLayerExiting {\n animation-duration: 1ms;\n animation-delay: 0s;\n }\n\n .IncodeComponent .IncodePermissionInCameraFlowPermissionLayerExiting .IncodePermissionInCameraHeading, .IncodeComponent .IncodePermissionInCameraFlowTutorialLayerExiting {\n animation-duration: 1ms;\n }\n}\n\n@keyframes incodeTutorialToPermissionInCameraExit {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes incodePermissionInCameraHeadingExit {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes incodePermissionInCameraToCaptureExit {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n.IncodeIdProcessingPage .IncodePageInner {\n padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeIdProcessingLayout {\n width: 100%;\n height: 100%;\n padding: var(--spacing-24, var(--spacing-24, 24px));\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent {\n z-index: 10;\n flex-direction: column;\n align-items: center;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingTopArea {\n justify-content: flex-end;\n align-items: center;\n gap: var(--spacing-24, var(--spacing-24, 24px));\n padding-bottom: var(--spacing-40, var(--spacing-40, 40px));\n z-index: 10;\n flex-direction: column;\n flex: 1;\n width: 100%;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame {\n overflow: hidden;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {\n width: var(--id-capture-frame-vertical-width);\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical .IncodeIdProcessingOverlay {\n left: -25%;\n right: -25%;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingImage {\n background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));\n object-fit: cover;\n width: 100%;\n max-width: 100%;\n height: 100%;\n max-height: 100%;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingImage.IncodeIdProcessingImageBlurred {\n filter: blur(var(--id-processing-image-blur-radius));\n -webkit-backdrop-filter: blur(var(--id-processing-image-blur-radius));\n backdrop-filter: blur(var(--id-processing-image-blur-radius));\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingOverlay {\n pointer-events: none;\n z-index: 10;\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n inset: 0 -10%;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingBottomArea {\n width: 100%;\n max-width: var(--id-capture-bottom-area-max-w);\n padding-top: var(--spacing-8, var(--spacing-8, 8px));\n z-index: 10;\n flex-direction: column;\n flex: 1;\n justify-content: space-between;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingBottomArea .IncodeCaptureEncryptionLabel {\n justify-content: center;\n align-items: center;\n gap: var(--spacing-4, var(--spacing-4, 4px));\n padding-bottom: var(--spacing-12, var(--spacing-12, 12px));\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-m-regular-size);\n font-weight: var(--typography-body-m-regular-weight);\n line-height: var(--typography-body-m-regular-line-height);\n letter-spacing: var(--typography-body-m-regular-letter-spacing);\n white-space: nowrap;\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n display: flex;\n}\n\n.IncodeIdProcessingLayout.IncodeIdProcessingLayoutNoImage .IncodeIdProcessingBottomArea {\n justify-content: flex-end;\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingContent {\n flex-direction: column;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeProgressBarContainer {\n margin-bottom: var(--spacing-24, var(--spacing-24, 24px));\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeAnalyzingTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n text-align: center;\n min-height: var(--typography-headline-h2-line-height);\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeAnalyzingTitle .IncodeAnalyzingTitleText {\n animation: IncodeAnalyzingTitleFade var(--id-capture-analyzing-title-fade-duration) ease-out both;\n display: inline-block;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeAnalyzingTitle .IncodeAnalyzingTitleText {\n animation-duration: 1ms;\n }\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingLottie {\n width: 100%;\n max-width: none;\n}\n\n@keyframes IncodeAnalyzingTitleFade {\n from {\n opacity: 0;\n transform: translateY(var(--id-capture-analyzing-title-fade-offset));\n }\n\n to {\n opacity: 1;\n transform: none;\n }\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultContent, .IncodeIdProcessingLayout .IncodeIdProcessingResultStatus {\n flex-direction: column;\n align-items: center;\n width: 100%;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n text-align: center;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultSubtitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n text-align: center;\n max-width: var(--incode-form-max-w);\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainer {\n margin-top: var(--spacing-24, var(--spacing-24, 24px));\n gap: var(--spacing-16, var(--spacing-16, 16px));\n flex-direction: column;\n width: 100%;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultAttempts {\n padding-block: var(--spacing-12, var(--spacing-12, 12px));\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h4-size);\n font-weight: var(--typography-headline-h4-weight);\n line-height: var(--typography-headline-h4-line-height);\n letter-spacing: var(--typography-headline-h4-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultContentExiting, .IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainerExiting {\n animation: .3s ease-out forwards incodeIdProcessingResultFadeOut;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdProcessingLayout .IncodeIdProcessingResultContentExiting, .IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainerExiting {\n animation-duration: 1ms;\n }\n}\n\n@keyframes incodeIdProcessingResultFadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n.IncodeIdError {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n z-index: 1000;\n justify-content: center;\n align-items: center;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n flex-direction: column;\n width: 100%;\n height: 100%;\n display: flex;\n position: fixed;\n}\n\n.IncodeIdError .IncodeIdErrorMessage {\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h4-size);\n font-weight: var(--typography-headline-h4-weight);\n line-height: var(--typography-headline-h4-line-height);\n letter-spacing: var(--typography-headline-h4-letter-spacing);\n color: var(--color-text-body-0, var(--text-body-0-static));\n max-width: var(--incode-form-max-w);\n margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdNoAttemptsContent {\n padding-inline: var(--spacing-20, var(--spacing-20, 20px));\n max-height: var(--id-no-attempts-content-max-h);\n max-width: var(--id-no-attempts-content-max-w);\n flex-direction: column;\n flex: 1;\n justify-content: center;\n align-items: center;\n margin: auto;\n display: flex;\n}\n\n.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsIcon {\n margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsTitle {\n text-align: center;\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsSubtitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n text-align: center;\n max-width: var(--incode-form-max-w);\n}\n\n.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsButtonContainer {\n bottom: var(--spacing-32, var(--spacing-32, 32px));\n right: var(--spacing-0, var(--spacing-none, 0px));\n left: var(--spacing-0, var(--spacing-none, 0px));\n padding-inline: var(--spacing-24, var(--spacing-24, 24px));\n justify-content: center;\n display: flex;\n position: absolute;\n}\n\n.IncodeUnacceptedIdDocuments {\n margin-top: var(--spacing-32, var(--spacing-32, 32px));\n flex-direction: column;\n align-items: center;\n width: 100%;\n display: flex;\n}\n\n.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountry {\n margin-bottom: var(--spacing-32, var(--spacing-32, 32px));\n align-items: center;\n gap: var(--spacing-8, var(--spacing-8, 8px));\n flex-direction: column;\n display: flex;\n}\n\n.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountryHeading {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h4-size);\n font-weight: var(--typography-headline-h4-weight);\n line-height: var(--typography-headline-h4-line-height);\n letter-spacing: var(--typography-headline-h4-letter-spacing);\n}\n\n.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountryLabel {\n align-items: center;\n gap: var(--spacing-8, var(--spacing-8, 8px));\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h3-size);\n font-weight: var(--typography-headline-h3-weight);\n line-height: var(--typography-headline-h3-line-height);\n letter-spacing: var(--typography-headline-h3-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n display: inline-flex;\n}\n\n.IncodeIdCaptureNotification {\n right: var(--spacing-24, var(--spacing-24, 24px));\n left: var(--spacing-24, var(--spacing-24, 24px));\n z-index: 100;\n max-width: var(--incode-form-max-w);\n padding-bottom: var(--spacing-32, var(--spacing-32, 32px));\n top: var(--incode-overlay-top-inset, var(--spacing-24));\n align-items: flex-end;\n margin: auto;\n display: flex;\n position: absolute;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent {\n z-index: 100;\n border-radius: var(--radius-large, var(--border-radius-large));\n border-style: var(--tw-border-style);\n border-width: 2px;\n border-color: var(--color-border-neutral-300, var(--border-neutral-300));\n background-color: var(--color-surface-neutral-900-80, var(--surface-neutral-900-80));\n width: 100%;\n padding-inline: var(--spacing-20, var(--spacing-20, 20px));\n box-shadow: var(--id-capture-notification-content-shadow);\n display: flex;\n overflow: hidden;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal {\n justify-content: center;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText {\n justify-content: center;\n gap: var(--spacing-8, var(--spacing-8, 8px));\n padding-top: var(--spacing-16, var(--spacing-16, 16px));\n padding-bottom: var(--spacing-12, var(--spacing-12, 12px));\n text-align: center;\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n flex-direction: column;\n display: flex;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h3-size);\n font-weight: var(--typography-headline-h3-weight);\n line-height: var(--typography-headline-h3-line-height);\n letter-spacing: var(--typography-headline-h3-letter-spacing);\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationDescription {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-tertiary-static, var(--text-body-300-tertiary-static));\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal .IncodeIdCaptureNotificationText {\n gap: var(--spacing-4, var(--spacing-4, 4px));\n padding-block: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationDescription {\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-m-regular-size);\n font-weight: var(--typography-body-m-regular-weight);\n line-height: var(--typography-body-m-regular-line-height);\n letter-spacing: var(--typography-body-m-regular-letter-spacing);\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationAnimation {\n height: var(--id-capture-notification-animation-height);\n justify-content: center;\n align-items: center;\n width: auto;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage {\n height: 100%;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadBody {\n justify-content: center;\n align-items: center;\n row-gap: var(--spacing-16, var(--spacing-16, 16px));\n width: 100%;\n height: 100%;\n max-width: var(--digital-id-content-max-w);\n flex-direction: column;\n margin-inline: auto;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreviewBody {\n row-gap: var(--spacing-16, var(--spacing-16, 16px));\n grid-template-columns: 1fr;\n grid-template-rows: var(--spacing-24) var(--digital-id-preview-h) var(--spacing-24);\n width: 100%;\n height: 100%;\n max-width: var(--digital-id-content-max-w);\n align-content: center;\n justify-items: center;\n margin-inline: auto;\n display: grid;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreStatusZone {\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPostCaptionZone {\n justify-content: center;\n align-items: flex-start;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadFooter {\n width: 100%;\n margin-inline: auto;\n margin-top: var(--spacing-24, var(--spacing-24, 24px));\n margin-bottom: var(--spacing-8, var(--spacing-8, 8px));\n justify-content: flex-end;\n row-gap: var(--spacing-16, var(--spacing-16, 16px));\n max-width: var(--digital-id-content-max-w);\n min-height: var(--digital-id-footer-min-h);\n flex-direction: column;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadHiddenInput {\n display: none;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadTutorialIllustration {\n width: 100%;\n max-height: var(--digital-id-tutorial-illustration-max-h);\n flex: 1;\n justify-content: center;\n align-items: center;\n display: flex;\n overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeUploadIdScreenImage {\n height: var(--digital-id-illustration-max-h);\n aspect-ratio: 191 / 266;\n width: auto;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreviewCard {\n border-radius: var(--radius-medium, var(--border-radius-medium));\n border-style: var(--tw-border-style);\n --tw-border-style: solid;\n border-style: solid;\n border-width: 1px;\n border-color: var(--color-border-neutral-100, var(--border-neutral-100));\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n width: var(--digital-id-preview-w);\n height: var(--digital-id-preview-h);\n justify-content: center;\n align-items: center;\n display: flex;\n overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadDocumentPreview {\n width: var(--digital-id-preview-w);\n height: var(--digital-id-preview-h);\n justify-content: center;\n align-items: center;\n display: flex;\n position: relative;\n overflow: visible;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadDocumentPreviewPdf {\n border-radius: var(--radius-medium, var(--border-radius-medium));\n border-style: var(--tw-border-style);\n border-width: var(--border-width-bold, var(--primitive-border-width-2));\n --tw-border-style: solid;\n border-style: solid;\n border-color: var(--color-border-status-positive, var(--border-status-positive-static));\n object-fit: contain;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreviewPdf {\n object-fit: contain;\n width: 100%;\n height: 100%;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadFileName {\n text-align: center;\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-m-regular-size);\n font-weight: var(--typography-body-m-regular-weight);\n line-height: var(--typography-body-m-regular-line-height);\n letter-spacing: var(--typography-body-m-regular-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n max-width: var(--digital-id-file-name-max-w);\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadProgressBar .IncodeProgressBar {\n border-radius: var(--radius-full, var(--border-radius-full));\n background-color: var(--color-surface-neutral-200, var(--surface-neutral-200));\n width: var(--digital-id-progress-bar-w);\n height: var(--digital-id-progress-bar-h);\n overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadProgressBar .IncodeProgressBarFill {\n border-radius: var(--radius-full, var(--border-radius-full));\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadLaserOverlay {\n pointer-events: none;\n width: var(--digital-id-preview-w);\n height: var(--digital-id-laser-h);\n transform: translateX(-50%) scale(var(--digital-id-laser-scale));\n position: absolute;\n top: -2px;\n left: 50%;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadLaserOverlay {\n display: none;\n }\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadSuccessIcon {\n color: var(--color-icon-status-positive, var(--icon-status-positive));\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadErrorIcon {\n margin-bottom: var(--spacing-8, var(--spacing-8, 8px));\n color: var(--color-icon-status-negative, var(--icon-status-negative));\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadErrorPreview {\n margin-top: var(--spacing-8, var(--spacing-8, 8px));\n border-radius: var(--radius-medium, var(--border-radius-medium));\n border-style: var(--tw-border-style);\n --tw-border-style: solid;\n border-style: solid;\n border-width: 1px;\n border-color: var(--color-border-status-negative, var(--border-status-negative));\n padding: var(--spacing-4);\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadAttempts {\n margin-top: var(--spacing-8, var(--spacing-8, 8px));\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-s-regular-size);\n font-weight: var(--typography-body-s-regular-weight);\n line-height: var(--typography-body-s-regular-line-height);\n letter-spacing: var(--typography-body-s-regular-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n@property --tw-translate-x {\n syntax: \"\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-y {\n syntax: \"\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-z {\n syntax: \"\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-border-style {\n syntax: \"\";\n inherits: false;\n initial-value: solid;\n}\n";

package/dist/themes/dark.css CHANGED Viewed

@@ -1307,6 +1307,20 @@
   --id-capture-frame-horizontal-max-width: 640px;
   --id-capture-frame-vertical-max-width: 274px;
   --id-capture-verification-option-card-size: 60px;
+  /* Brand marks are full-bleed, unlike the padded line icons, so they sit smaller in the same well. */
+  --id-capture-verification-option-card-logo-size: 40px;
+  /* Chooser card list: scrolls once taller than ~6 cards or 70% of the viewport.
+     `vh` is the baseline; the @supports block below upgrades it to `dvh`. A
+     `dvh` value cannot fall back per-declaration here because a custom
+     property is stored unparsed — it would only fail when `var()` is
+     substituted, dropping `max-height` altogether and stopping the list from
+     scrolling at all on browsers without `dvh`. */
+  --id-capture-chooser-list-max-h: min(70vh, 480px);
+  --id-capture-chooser-list-scroll-padding: 4px;
+  /* Card list width plus the scroll padding on both sides. */
+  --id-capture-chooser-list-max-w: calc(
+    var(--incode-form-max-w) + 2 * var(--id-capture-chooser-list-scroll-padding)
+  );
   --id-no-attempts-content-max-h: 840px;
   --id-no-attempts-content-max-w: 800px;
   --id-capture-hint-svg-size: 800px;
@@ -1416,6 +1430,15 @@
   --spinner-always-dark-title: var(--primitive-color-gray-50);
   --spinner-always-dark-subtitle: var(--primitive-color-gray-300);
 }
+/* iOS Safari and Android WebView resize the viewport as their toolbars come and
+   go; `dvh` tracks that, so the cap stays at 70% of what the user can actually
+   see. Gated on @supports rather than a fallback declaration — see the note on
+   the token above. */
+@supports (height: 1dvh) {
+  :root {
+    --id-capture-chooser-list-max-h: min(70dvh, 480px);
+  }
+}
 [data-incode-theme='dark'] {
   /* Surface / Neutral */

package/dist/themes/light.css CHANGED Viewed

@@ -1307,6 +1307,20 @@
   --id-capture-frame-horizontal-max-width: 640px;
   --id-capture-frame-vertical-max-width: 274px;
   --id-capture-verification-option-card-size: 60px;
+  /* Brand marks are full-bleed, unlike the padded line icons, so they sit smaller in the same well. */
+  --id-capture-verification-option-card-logo-size: 40px;
+  /* Chooser card list: scrolls once taller than ~6 cards or 70% of the viewport.
+     `vh` is the baseline; the @supports block below upgrades it to `dvh`. A
+     `dvh` value cannot fall back per-declaration here because a custom
+     property is stored unparsed — it would only fail when `var()` is
+     substituted, dropping `max-height` altogether and stopping the list from
+     scrolling at all on browsers without `dvh`. */
+  --id-capture-chooser-list-max-h: min(70vh, 480px);
+  --id-capture-chooser-list-scroll-padding: 4px;
+  /* Card list width plus the scroll padding on both sides. */
+  --id-capture-chooser-list-max-w: calc(
+    var(--incode-form-max-w) + 2 * var(--id-capture-chooser-list-scroll-padding)
+  );
   --id-no-attempts-content-max-h: 840px;
   --id-no-attempts-content-max-w: 800px;
   --id-capture-hint-svg-size: 800px;
@@ -1416,3 +1430,12 @@
   --spinner-always-dark-title: var(--primitive-color-gray-50);
   --spinner-always-dark-subtitle: var(--primitive-color-gray-300);
 }
+/* iOS Safari and Android WebView resize the viewport as their toolbars come and
+   go; `dvh` tracks that, so the cap stays at 70% of what the user can actually
+   see. Gated on @supports rather than a fallback declaration — see the note on
+   the token above. */
+@supports (height: 1dvh) {
+  :root {
+    --id-capture-chooser-list-max-h: min(70dvh, 480px);
+  }
+}

package/dist/types/extensibility.d.ts CHANGED Viewed

@@ -1301,7 +1301,7 @@ export declare function useScreenOrientation(): {
     isLandscapeMobile: boolean;
 };
-export declare function VerificationOptionCard({ icon: Icon, title, testId, onClick, tag, }: Readonly<VerificationOptionCardProps>): JSX.Element;
+export declare function VerificationOptionCard({ icon: Icon, iconSrc, title, testId, onClick, tag, }: Readonly<VerificationOptionCardProps>): JSX.Element;
 export declare function VerificationOptionCardList({ children, }: Readonly<VerificationOptionCardListProps>): JSX.Element;
@@ -1310,9 +1310,15 @@ declare type VerificationOptionCardListProps = {
 };
 declare type VerificationOptionCardProps = {
+    /** Glyph rendered in the icon slot; the fallback when `iconSrc` is absent. */
     icon: FC<{
         className?: string;
     }>;
+    /**
+     * Image URL (e.g. a digital-ID provider logo) rendered in the icon slot
+     * instead of `icon`. Decorative — the card is labelled by its title.
+     */
+    iconSrc?: string;
     title: string;
     testId: string;
     onClick: () => void;

package/dist/workflow/styles.css CHANGED Viewed

@@ -1727,6 +1727,7 @@
 }
 .IncodeChooserPage .IncodePageContent {
+  min-height: var(--spacing-0, var(--spacing-none, 0px));
   padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
 }
@@ -1735,11 +1736,18 @@
 }
 .IncodeChooserPage .IncodeChooserContainer {
+  min-height: var(--spacing-0, var(--spacing-none, 0px));
+  width: 100%;
+  max-height: var(--id-capture-chooser-list-max-h);
+  max-width: var(--id-capture-chooser-list-max-w);
+  padding: var(--id-capture-chooser-list-scroll-padding);
+  scroll-padding-block: var(--id-capture-chooser-list-scroll-padding);
+  margin-inline: auto;
   flex-direction: column;
   align-items: center;
-  width: 100%;
   margin-top: auto;
   display: flex;
+  overflow-y: auto;
 }
 .IncodeCaptureFrame {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@incodetech/web",
-  "version": "0.0.0-dev-20260923-b02a604b",
+  "version": "0.0.0-dev-20260923-1a4dbec8",
   "license": "ISC",
   "repository": {
     "type": "git",
@@ -287,7 +287,7 @@
   ],
   "dependencies": {
     "preact": "^10.27.2",
-    "@incodetech/core": "0.0.0-dev-20260923-b02a604b"
+    "@incodetech/core": "0.0.0-dev-20260923-1a4dbec8"
   },
   "devDependencies": {
     "@fontsource/dm-sans": "^5.2.8",