@incodetech/web 2.3.2-rc.4 → 2.4.0-rc.0

package/dist/faceMatch-MVYGreUC.js

@@ -0,0 +1,336 @@
+import { o as useTranslation } from "./uiConfig-CzjzpmLx.js";
+import { S as k, _ as y, c as A, v as u } from "./vendor-preact-C0jX1Cbq.js";
+import { a as withStandaloneModuleBootstrap, i as Snackbar, t as IncodeComponent, v as isTerminalModuleState, x as useManager, y as useModuleTerminalCallbacks } from "./incodeComponent-I3JIdKa5.js";
+import { s as Asset, t as Spacer } from "./spacer-CRMb016O.js";
+import { t as Title } from "./typography-CVggEHuL.js";
+import { t as TransitionSpinner } from "./transitionSpinner-CPK1gaqC.js";
+import { x as Button } from "./icons-Cri5P1f0.js";
+import { t as Page } from "./page-BzEithea.js";
+import { t as registerIncodeModuleElement } from "./incodeModule-t2FDQ-II.js";
+import { createFaceMatchManager } from "@incodetech/core/face-match";
+//#region src/modules/face-match/assets/match-success.svg?react
+var SvgMatchSuccess = (props) => /* @__PURE__ */ u("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 24,
+	height: 24,
+	fill: "none",
+	viewBox: "0 0 24 24",
+	...props,
+	children: [/* @__PURE__ */ u("circle", {
+		cx: 12,
+		cy: 12,
+		r: 12,
+		fill: "#189f60"
+	}), /* @__PURE__ */ u("path", {
+		fill: "#fff",
+		fillRule: "evenodd",
+		d: "M16.74 9.327a1 1 0 0 1-.067 1.413l-6.206 5.641-3.174-3.174a1 1 0 1 1 1.414-1.414l1.826 1.826 4.794-4.359a1 1 0 0 1 1.413.067",
+		clipRule: "evenodd"
+	})]
+});
+//#endregion
+//#region src/modules/face-match/assets/match-fail.svg?react
+var SvgMatchFail = (props) => /* @__PURE__ */ u("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 25,
+	height: 24,
+	fill: "none",
+	viewBox: "0 0 25 24",
+	...props,
+	children: [/* @__PURE__ */ u("circle", {
+		cx: 12.5,
+		cy: 12,
+		r: 12,
+		fill: "#e71111"
+	}), /* @__PURE__ */ u("path", {
+		fill: "#fff",
+		fillRule: "evenodd",
+		d: "M16.798 9.12a1 1 0 0 0-1.415-1.415l-2.88 2.881L9.62 7.705a1 1 0 0 0-1.414 1.414L11.088 12l-2.881 2.881a1 1 0 1 0 1.414 1.415l2.881-2.881 2.881 2.88a1 1 0 0 0 1.415-1.414l-2.882-2.88z",
+		clipRule: "evenodd"
+	})]
+});
+//#endregion
+//#region src/modules/face-match/assets/face-placeholder.svg
+var face_placeholder_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='525'%20height='525'%20viewBox='0%200%20525%20525'%3e%3ccircle%20cx='262.5'%20cy='262.5'%20r='261.3'%20fill='%23fff'/%3e%3ccircle%20cx='262.5'%20cy='262.5'%20r='253.5'%20fill='%23b3b3b3'/%3e%3ccircle%20cx='262.5'%20cy='262.5'%20r='245.7'%20fill='%23172732'/%3e%3cpath%20fill='%23fff'%20d='m254%20144.5%206.5-.4%208%20.5%207%20.7%209%201.9%206%202%207%202.9%2010%206.2%208.1%207.2%205%206%203.3%205%204%208%201.8%205%202.2%2011-.1%2014-1%206-.9%204-2.1%206-4%208-4.8%207-6.5%207.3-12%2010-15%2010.4-7.2%207.3-3.1%205-2%205-1.4%207v8l-1.3.5-30-.3-.7-11.2.3-8%201-6%202.1-7%203.9-8%204.2-6%209.2-9.3%2023-17.2%204.2-4.5%204.2-7%202.1-7%20.4-6-.5-6-1.3-5-2.7-6-4-5-5.4-4.4-6-2.9-6-1.5-5-.6h-7l-6%201.1-6%202.1-5%202.9-5%204.5-2.3%202.8-2.1%203-2.9%206-1.7%207-.5%206%20.2%207%201.3%207.2-34-2.2-1-.3-.5-.7-1.1-6-.6-8%20.4-5%20.7-6%201.7-7%204.3-11%202.8-5%206-8%207.3-7.3%205-3.7%207-4.2%207-3.1%206-2%209-1.9Zm-2.4%20184%204.9-.5%204%20.3%205%201.7%204%202.2%203%202.7%203%203.6%202.2%204%201.2%204%20.4%205-.3%204-1.2%204-2%204-3.3%204-4%203.2-4%202-4%201.2-9-.2-7-2.8-4-3-3-3.7-2.2-3.7-1.2-4-.7-5%20.6-5%201.1-4%202-4%203.4-4%203-2.5%203-1.8Z'/%3e%3c/svg%3e";
+//#endregion
+//#region src/modules/face-match/animation.tsx
+var Tooltip = ({ children }) => {
+	return /* @__PURE__ */ u("div", {
+		className: "IncodeFaceMatchTooltip",
+		"aria-hidden": "true",
+		children
+	});
+};
+var PhotoAnimation = ({ images, variant = "selfieVsId", isCompleted = false }) => {
+	const { t } = useTranslation();
+	const isSecondId = variant === "secondId";
+	const { idFace: croppedIdFace, selfie: croppedFace, secondIdFace: croppedSecondIdFace } = images;
+	if (isSecondId) return /* @__PURE__ */ u("div", {
+		className: "IncodeFaceMatchContainer",
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: `IncodeFaceMatchPhotoContainer IncodeFaceMatchLeftPhoto ${isCompleted ? "IncodeFaceMatchPhotoContainerHidden" : ""}`,
+				children: [/* @__PURE__ */ u(Tooltip, { children: t("faceMatch.firstId") }), /* @__PURE__ */ u("img", {
+					className: "IncodeFaceMatchCircularImage",
+					src: croppedIdFace ? croppedIdFace : face_placeholder_default,
+					alt: t("faceMatch.firstId")
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: `IncodeFaceMatchPhotoContainer IncodeFaceMatchRightPhoto ${isCompleted ? "IncodeFaceMatchPhotoContainerHidden" : ""}`,
+				children: [/* @__PURE__ */ u(Tooltip, { children: t("faceMatch.secondId") }), /* @__PURE__ */ u("img", {
+					className: "IncodeFaceMatchCircularImage",
+					src: croppedSecondIdFace ? croppedSecondIdFace : face_placeholder_default,
+					alt: t("faceMatch.secondId")
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: `IncodeFaceMatchBottomPhotoContainer ${isCompleted ? "IncodeFaceMatchBottomPhotoContainerHidden" : ""}`,
+				children: [/* @__PURE__ */ u(Tooltip, { children: t("faceMatch.selfie") }), /* @__PURE__ */ u("img", {
+					className: "IncodeFaceMatchCircularImage",
+					src: croppedFace ? croppedFace : face_placeholder_default,
+					alt: t("faceMatch.selfie")
+				})]
+			})
+		]
+	});
+	return /* @__PURE__ */ u("div", {
+		className: "IncodeFaceMatchContainer",
+		children: [/* @__PURE__ */ u("div", {
+			className: `IncodeFaceMatchPhotoContainer IncodeFaceMatchLeftPhoto ${isCompleted ? "IncodeFaceMatchPhotoContainerHidden" : ""}`,
+			children: [/* @__PURE__ */ u(Tooltip, { children: t("faceMatch.selfie") }), /* @__PURE__ */ u("img", {
+				className: "IncodeFaceMatchCircularImage",
+				src: croppedFace ? croppedFace : face_placeholder_default,
+				alt: t("faceMatch.selfie")
+			})]
+		}), /* @__PURE__ */ u("div", {
+			className: `IncodeFaceMatchPhotoContainer IncodeFaceMatchRightPhoto ${isCompleted ? "IncodeFaceMatchPhotoContainerHidden" : ""}`,
+			children: [/* @__PURE__ */ u(Tooltip, { children: t("faceMatch.id") }), /* @__PURE__ */ u("img", {
+				className: "IncodeFaceMatchCircularImage",
+				src: croppedIdFace ? croppedIdFace : face_placeholder_default,
+				alt: t("faceMatch.id")
+			})]
+		})]
+	});
+};
+//#endregion
+//#region src/modules/face-match/faceMatch.tsx
+/**
+* @module @incodetech/ui/face-match
+*
+* Face match UI component for the Incode Web SDK.
+* Provides a complete, ready-to-use face comparison experience
+* with animated comparison and result display.
+*
+* ## UI Usage
+*
+* The FaceMatch component can be used as a React/Preact component or as a
+* Web Component (`<incode-face-match>`).
+*
+* @example React/Preact component usage
+* ```tsx
+* import { FaceMatch } from '@incodetech/ui/face-match';
+* import { setup } from '@incodetech/core';
+*
+* // Configure the SDK first
+* setup({ apiURL: 'https://api.example.com', token: 'your-token' });
+*
+* function App() {
+*   const config = {
+*     variant: 'selfieVsId',
+*     disableFaceMatchAnimation: false,
+*   };
+*
+*   return (
+*     <FaceMatch
+*       config={config}
+*       onFinish={() => console.log('Face match complete!')}
+*       onError={(error) => console.error('Error:', error)}
+*     />
+*   );
+* }
+* ```
+*
+* @example Web Component usage
+* ```html
+* <!-- Include the script -->
+* <script type="module">
+*   import '@incodetech/ui/face-match';
+*   import { setup } from '@incodetech/core';
+*
+*   setup({ apiURL: 'https://api.example.com', token: 'your-token' });
+*
+*   const faceMatch = document.querySelector('incode-face-match');
+*   faceMatch.config = {
+*     variant: 'selfieVsId',
+*     disableFaceMatchAnimation: false,
+*   };
+*   faceMatch.onFinish = () => console.log('Face match complete!');
+*   faceMatch.onError = (error) => console.error('Error:', error);
+* <\/script>
+*
+* <incode-face-match></incode-face-match>
+* ```
+*
+* ## Styling
+*
+* The component uses CSS custom properties (variables) for theming.
+* Override these variables to customize the appearance.
+*
+* ## Headless Alternative
+*
+* For complete control over the UI, use the headless `createFaceMatchManager`
+* from `@incodetech/core/face-match` instead. See the core module documentation.
+*/
+var ANIMATION_TOTAL_DURATION = 3900;
+var MatchResultDisplay = ({ matched, titleRef }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ u(k, { children: [/* @__PURE__ */ u("div", {
+		className: "IncodeFaceMatchAnimatedIcon",
+		"aria-hidden": "true",
+		"data-testid": "face-match-result-icon",
+		children: matched === true ? /* @__PURE__ */ u(Asset, {
+			name: "faceMatch.success",
+			class: "IncodeFaceMatchResultIcon",
+			default: SvgMatchSuccess
+		}) : matched === false ? /* @__PURE__ */ u(Asset, {
+			name: "faceMatch.fail",
+			class: "IncodeFaceMatchResultIcon",
+			default: SvgMatchFail
+		}) : null
+	}), /* @__PURE__ */ u(Title, {
+		ref: titleRef,
+		className: "IncodeFaceMatchAnimatedResultTitle",
+		tabIndex: -1,
+		children: matched === true ? t("faceMatch.matched") : matched === false ? t("faceMatch.facesNoMatch") : ""
+	})] });
+};
+var FaceMatchContent = ({ config, manager: externalManager, onFinish, onError }) => {
+	const { t } = useTranslation();
+	const titleRef = A(null);
+	const resultTitleRef = A(null);
+	const [state, manager] = useManager(() => {
+		if (externalManager) return externalManager;
+		if (!config) throw new Error("FaceMatch config is required");
+		return createFaceMatchManager({ config });
+	}, { manageLifecycle: !externalManager });
+	const animationTimeoutRef = A(null);
+	y(() => {
+		if (state.status === "animating") animationTimeoutRef.current = window.setTimeout(() => {
+			manager.animationComplete();
+		}, ANIMATION_TOTAL_DURATION);
+		return () => {
+			if (animationTimeoutRef.current !== null) window.clearTimeout(animationTimeoutRef.current);
+		};
+	}, [state.status, manager]);
+	y(() => {
+		if (state.status === "animating") titleRef.current?.focus();
+		else if (state.status === "result") resultTitleRef.current?.focus();
+	}, [state.status]);
+	useModuleTerminalCallbacks({
+		status: state.status,
+		onFinish,
+		onError,
+		error: state.status === "error" ? state.error : void 0
+	});
+	if (state.status === "loading") return /* @__PURE__ */ u(TransitionSpinner, {});
+	if (state.status === "animating" || state.status === "result") {
+		const isSecondId = config?.matchingType === "secondId";
+		const matched = state.status === "animating" ? state.result?.matched ?? null : state.matched;
+		const showResult = state.status === "result";
+		const liveness = state.status === "result" ? state.result.liveness : null;
+		return /* @__PURE__ */ u(Page, {
+			className: "IncodeFaceMatchPage",
+			children: /* @__PURE__ */ u("div", {
+				className: "IncodeFaceMatchContent",
+				children: [
+					/* @__PURE__ */ u("div", {
+						className: `IncodeFaceMatchHeader ${showResult ? "IncodeFaceMatchHeaderHidden" : ""}`,
+						"aria-hidden": showResult || void 0,
+						children: [
+							/* @__PURE__ */ u(Spacer, { size: 24 }),
+							/* @__PURE__ */ u(Title, {
+								ref: titleRef,
+								className: "IncodeFaceMatchAnimatedTitle",
+								tabIndex: -1,
+								children: t("faceMatch.verifyingIdentity")
+							}),
+							/* @__PURE__ */ u(Spacer, { size: 64 })
+						]
+					}),
+					/* @__PURE__ */ u("div", {
+						className: `IncodeFaceMatchAnimationContainer ${showResult ? "IncodeFaceMatchShowResult" : ""}`,
+						children: [/* @__PURE__ */ u("div", {
+							className: `IncodeFaceMatchPhotoWrapper ${showResult ? "IncodeFaceMatchPhotoWrapperHidden" : ""}`,
+							"aria-hidden": "true",
+							"data-testid": "face-match-photo-wrapper",
+							children: /* @__PURE__ */ u(PhotoAnimation, {
+								images: state.images,
+								variant: isSecondId ? "secondId" : "selfieVsId"
+							})
+						}), showResult && /* @__PURE__ */ u("div", {
+							className: "IncodeFaceMatchResultContainer IncodeFaceMatchResultVisible",
+							children: /* @__PURE__ */ u(MatchResultDisplay, {
+								matched,
+								titleRef: resultTitleRef
+							})
+						})]
+					}),
+					showResult && liveness !== null && /* @__PURE__ */ u("div", {
+						className: "IncodeFaceMatchLivenessContainer IncodeFaceMatchLivenessVisible",
+						"data-testid": "face-match-liveness",
+						"data-variant": liveness ? "positive" : "negative",
+						children: /* @__PURE__ */ u(Snackbar, {
+							variant: liveness ? "positive" : "negative",
+							children: t(liveness ? "matchUser.livenessSuccess" : "matchUser.livenessFailed")
+						})
+					}),
+					showResult && /* @__PURE__ */ u("div", {
+						className: "IncodeFaceMatchButtonContainer IncodeFaceMatchButtonVisible",
+						children: /* @__PURE__ */ u(Button, {
+							onClick: () => manager.continue(),
+							"data-testid": "face-match-continue",
+							children: t("faceMatch.continue")
+						})
+					})
+				]
+			})
+		});
+	}
+	if (isTerminalModuleState(state)) return null;
+	return null;
+};
+/**
+* Face match UI component.
+*
+* Provides a complete face comparison experience including:
+* - Animated photo comparison sequence
+* - Match/no-match result display
+* - Continue button to proceed
+*
+* @example Basic usage
+* ```tsx
+* <FaceMatch
+*   config={{
+*     variant: 'selfieVsId',
+*     disableFaceMatchAnimation: false,
+*   }}
+*   onFinish={() => router.push('/next-step')}
+*   onError={(err) => toast.error(err)}
+* />
+* ```
+*
+* @see {@link createFaceMatchManager} for headless usage
+*/
+var FaceMatchWithLocalConfig = ({ config, manager, onFinish, onError }) => {
+	return /* @__PURE__ */ u(IncodeComponent, { children: config || manager ? /* @__PURE__ */ u(FaceMatchContent, {
+		config,
+		manager,
+		onFinish,
+		onError
+	}) : null });
+};
+var FaceMatch = withStandaloneModuleBootstrap(FaceMatchWithLocalConfig, "FACE_MATCH", { supportsExternalManager: true });
+registerIncodeModuleElement(FaceMatch, "incode-face-match");
+//#endregion
+export { FaceMatch as t };

package/dist/{fi-FI-CgZFjWp0.js → fi-FI-BehaswUi.js}

@@ -3127,6 +3127,7 @@ var fi_FI_default = {
 			"invalidSessionResponse": "Virheellinen istuntovastaus.",
 			"missingFlowConfiguration": "Virtausasetukset puuttuvat.",
 			"restartLabel": "Käynnistä perehdytys uudelleen",
+			"sessionExpiredMessage": "Istuntosi on vanhentunut. Aloita prosessi alusta, jotta voit jatkaa.",
 			"sessionInvalidMessage": "Tätä vahvistusistuntoa ei ole enää käytettävissä. Aloita uusi istunto jatkaaksesi.",
 			"sessionRestartDisabledMessage": "Tämä vahvistusvaihe on jo suoritettu, eikä sitä voi enää avata uudelleen.",
 			"sessionUnavailableTitle": "Istuntoa ei ole enää saatavilla",

package/dist/field-comparison/field-comparison.es.js

@@ -1,2 +1,2 @@
-import { t as FieldComparison } from "../fieldComparison-B79amZ7h.js";
+import { t as FieldComparison } from "../fieldComparison-D4FRpZlC.js";
 export { FieldComparison };

package/dist/field-comparison/styles.css

@@ -1,28 +1,2 @@
 /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
-.IncodeFieldComparisonPage {
-  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
-  animation-fill-mode: both;
-}
-
-.IncodeFieldComparisonPage .IncodeSrOnly {
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border-width: 0;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  position: absolute;
-  overflow: hidden;
-}
-
-.IncodeFieldComparisonPage .IncodeFieldComparisonForm {
-  margin-top: var(--spacing-32, var(--spacing-32, 32px));
-  justify-content: center;
-  align-items: center;
-  gap: var(--spacing-16, var(--spacing-16, 16px));
-  flex-direction: column;
-  flex: 1;
-  width: 100%;
-  display: flex;
-}
+.IncodeFieldComparisonPage{animation:fadeIn var(--motion-fade-in-duration,.7s) ease-out;animation-fill-mode:both}.IncodeFieldComparisonPage .IncodeSrOnly{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.IncodeFieldComparisonPage .IncodeFieldComparisonForm{margin-top:var(--spacing-32,var(--spacing-32,32px));justify-content:center;align-items:center;gap:var(--spacing-16,var(--spacing-16,16px));flex-direction:column;flex:1;width:100%;display:flex}

package/dist/field-comparison/styles.css.js

@@ -1 +1 @@
-export default "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n.IncodeFieldComparisonPage {\n  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;\n  animation-fill-mode: both;\n}\n\n.IncodeFieldComparisonPage .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.IncodeFieldComparisonPage .IncodeFieldComparisonForm {\n  margin-top: var(--spacing-32, var(--spacing-32, 32px));\n  justify-content: center;\n  align-items: center;\n  gap: var(--spacing-16, var(--spacing-16, 16px));\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  display: flex;\n}\n";
+export default "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n.IncodeFieldComparisonPage{animation:fadeIn var(--motion-fade-in-duration,.7s) ease-out;animation-fill-mode:both}.IncodeFieldComparisonPage .IncodeSrOnly{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.IncodeFieldComparisonPage .IncodeFieldComparisonForm{margin-top:var(--spacing-32,var(--spacing-32,32px));justify-content:center;align-items:center;gap:var(--spacing-16,var(--spacing-16,16px));flex-direction:column;flex:1;width:100%;display:flex}";

package/dist/fieldComparison-CQG-0wfE.js

@@ -0,0 +1,2 @@
+import { t as FieldComparison } from "./fieldComparison-D4FRpZlC.js";
+export { FieldComparison };

package/dist/{fieldComparison-B79amZ7h.js → fieldComparison-D4FRpZlC.js}

@@ -1,11 +1,12 @@
-import { o as useTranslation } from "./uiConfig-qMQHPoxa.js";
+import { o as useTranslation } from "./uiConfig-CzjzpmLx.js";
 import { v as u } from "./vendor-preact-C0jX1Cbq.js";
-import { S as useManager, b as useModuleTerminalCallbacks, c as Page, i as withStandaloneModuleBootstrap, t as IncodeComponent } from "./incodeComponent-CdiXt7v7.js";
-import { t as Spacer } from "./spacer-BmQEPV3n.js";
-import { x as Button } from "./icons-lmBQFGnv.js";
-import { t as VerificationResult } from "./verificationResult-C7wTXPts.js";
-import { t as InputComposed } from "./inputComposed-8oVJL9fW.js";
-import { t as registerIncodeModuleElement } from "./incodeModule-f_OUurEl.js";
+import { a as withStandaloneModuleBootstrap, t as IncodeComponent, x as useManager, y as useModuleTerminalCallbacks } from "./incodeComponent-I3JIdKa5.js";
+import { t as Spacer } from "./spacer-CRMb016O.js";
+import { x as Button } from "./icons-Cri5P1f0.js";
+import { t as Page } from "./page-BzEithea.js";
+import { t as VerificationResult } from "./verificationResult-CZbJPu23.js";
+import { t as InputComposed } from "./inputComposed-B27kZydt.js";
+import { t as registerIncodeModuleElement } from "./incodeModule-t2FDQ-II.js";
 import { createFieldComparisonManager } from "@incodetech/core/field-comparison";
 //#region src/modules/field-comparison/fieldComparison.tsx
 var FieldComparisonContent = ({ config, manager: externalManager, onFinish }) => {
@@ -35,6 +36,7 @@ var FieldComparisonContent = ({ config, manager: externalManager, onFinish }) =>
 	if (state.status === "submitting" || state.status === "inputting") {
 		const isDisabled = state.status === "submitting";
 		const canSubmit = state.status === "inputting" && state.canSubmit;
+		const validationErrors = state.status === "inputting" ? state.validationErrors : void 0;
 		return /* @__PURE__ */ u(Page, {
 			className: "IncodeFieldComparisonPage",
 			title: t("fieldComparison.title"),
@@ -60,6 +62,8 @@ var FieldComparisonContent = ({ config, manager: externalManager, onFinish }) =>
 						required: true,
 						disabled: isDisabled,
 						value: state.fields.firstName,
+						error: validationErrors?.firstName ? t(validationErrors.firstName) : void 0,
+						showErrorIcon: !!validationErrors?.firstName,
 						onInput: (e) => {
 							manager.setField("firstName", e.target.value);
 						}
@@ -73,6 +77,8 @@ var FieldComparisonContent = ({ config, manager: externalManager, onFinish }) =>
 						required: true,
 						disabled: isDisabled,
 						value: state.fields.lastName,
+						error: validationErrors?.lastName ? t(validationErrors.lastName) : void 0,
+						showErrorIcon: !!validationErrors?.lastName,
 						onInput: (e) => {
 							manager.setField("lastName", e.target.value);
 						}