@incodetech/web 2.0.1 → 2.1.0-rc.1

package/dist/dynamicForms-DyfnsS7E.js

@@ -0,0 +1,352 @@
+import { n as useTranslation } from "./i18n-CoCO2ZuN.js";
+import { d as T, m as g, v as u } from "./vendor-preact-DThS2ZQ_.js";
+import { c as useManager, o as useModuleTerminalCallbacks } from "./hooks-Da_yP_Dr.js";
+import { t as IncodeComponent } from "./incodeComponent-wfnHlnXx.js";
+import { r as Spacer } from "./loadingIcon-B0ysgiNq.js";
+import { t as Page } from "./page-DxGQj7Gk.js";
+import { t as Button } from "./button-CM_hgyIP.js";
+import { t as VerificationResult } from "./verificationResult-Do5SpZ6X.js";
+import { t as InputComposed } from "./inputComposed-CQ4AsvZg.js";
+import { n as countries, t as PhoneInputComposed } from "./phoneInputComposed-DjNdsmPE.js";
+import { t as DropdownComposed } from "./dropdownComposed-_fgAlo_C.js";
+import { t as DateInputComposed } from "./dateInputComposed-C_mh4XBg.js";
+import { t as registerIncodeModuleElement } from "./incodeModule-BUDoTwT9.js";
+import { n as getRequiredHintMode, t as getFieldHint } from "./requiredLabelHint-DEadtiwx.js";
+import { t as EmailInput } from "./emailInput-KZmhjOdZ.js";
+import { formatCPF, isValidCPF } from "@incodetech/core/cpf-ocr";
+import { createDynamicFormsManager } from "@incodetech/core/dynamic-forms";
+//#region src/modules/dynamic-forms/dynamicForms.tsx
+function getEffectiveType(question) {
+	return question.inputType ?? question.overrides ?? "TEXT";
+}
+function getAutocompleteToken(type) {
+	switch (type) {
+		case "NAME": return "name";
+		case "PHONE": return "tel";
+		case "DATE": return "bday";
+		default: return;
+	}
+}
+var QuestionInput = ({ question, value, disabled = false, error, labelHint, onChange, onFormatValidityChange, onBlur }) => {
+	const { t } = useTranslation();
+	const effectiveType = getEffectiveType(question);
+	const id = `dynamic-form-${question.questionId}`;
+	const label = question.question;
+	const isRequired = !question.isOptional;
+	const autocomplete = getAutocompleteToken(effectiveType);
+	const isCountryField = effectiveType === "COUNTRY" || effectiveType === "NATIONALITY";
+	const countryOptions = T(() => isCountryField ? countries.map((c) => ({
+		value: c.code,
+		label: `${c.emoji} ${c.name}`,
+		ariaLabel: c.name
+	})) : [], [isCountryField]);
+	if (effectiveType === "YESNO") {
+		const yesNoOptions = [{
+			value: "YES",
+			label: t("common.yes")
+		}, {
+			value: "NO",
+			label: t("common.no")
+		}];
+		return /* @__PURE__ */ u("div", {
+			class: "IncodeDynamicFormsField",
+			children: /* @__PURE__ */ u(DropdownComposed, {
+				id,
+				name: question.questionId,
+				label,
+				labelHint,
+				value,
+				options: yesNoOptions,
+				required: isRequired,
+				error,
+				disabled,
+				onChange: (val) => onChange(question.questionId, val),
+				onBlur: () => onBlur?.(question.questionId)
+			})
+		});
+	}
+	if (effectiveType === "DATE") return /* @__PURE__ */ u("div", {
+		class: "IncodeDynamicFormsField",
+		children: /* @__PURE__ */ u(DateInputComposed, {
+			id,
+			name: question.questionId,
+			label,
+			labelHint,
+			value,
+			required: isRequired,
+			autocomplete,
+			error,
+			showErrorIcon: !!error,
+			disabled,
+			onInput: (e) => onChange(question.questionId, e.target.value),
+			onBlur: () => onBlur?.(question.questionId)
+		})
+	});
+	if (effectiveType === "PHONE") return /* @__PURE__ */ u("div", {
+		class: "IncodeDynamicFormsField",
+		onFocusOut: () => onBlur?.(question.questionId),
+		children: /* @__PURE__ */ u(PhoneInputComposed, {
+			id,
+			label,
+			labelHint,
+			value,
+			required: isRequired,
+			autocomplete,
+			error,
+			showErrorIcon: !!error,
+			disabled,
+			onChange: (fullNumber, isValid) => {
+				onChange(question.questionId, fullNumber);
+				onFormatValidityChange?.(question.questionId, isValid);
+			}
+		})
+	});
+	if (effectiveType === "COUNTRY" || effectiveType === "NATIONALITY") return /* @__PURE__ */ u("div", {
+		class: "IncodeDynamicFormsField",
+		children: /* @__PURE__ */ u(DropdownComposed, {
+			id,
+			label,
+			labelHint,
+			value,
+			options: countryOptions,
+			searchable: true,
+			required: isRequired,
+			error,
+			disabled,
+			onChange: (val) => onChange(question.questionId, val),
+			onBlur: () => onBlur?.(question.questionId)
+		})
+	});
+	if (effectiveType === "SELECT" || effectiveType === "MULTISELECT") {
+		const selectOptions = (question.options ?? []).map((o) => ({
+			value: o,
+			label: o
+		}));
+		return /* @__PURE__ */ u("div", {
+			class: "IncodeDynamicFormsField",
+			children: /* @__PURE__ */ u(DropdownComposed, {
+				id,
+				label,
+				labelHint,
+				value,
+				options: selectOptions,
+				searchable: selectOptions.length > 5,
+				required: isRequired,
+				error,
+				disabled,
+				onChange: (val) => onChange(question.questionId, val),
+				onBlur: () => onBlur?.(question.questionId)
+			})
+		});
+	}
+	if (effectiveType === "EMAIL") return /* @__PURE__ */ u("div", {
+		class: "IncodeDynamicFormsField",
+		children: /* @__PURE__ */ u(EmailInput, {
+			value,
+			emailError: error,
+			label,
+			labelHint,
+			required: isRequired,
+			disabled,
+			onEmailChange: (email, isValid) => {
+				onChange(question.questionId, email);
+				onFormatValidityChange?.(question.questionId, isValid);
+			},
+			onBlur: () => onBlur?.(question.questionId)
+		})
+	});
+	if (effectiveType === "CPF") return /* @__PURE__ */ u("div", {
+		class: "IncodeDynamicFormsField",
+		children: /* @__PURE__ */ u(InputComposed, {
+			id,
+			name: question.questionId,
+			label,
+			labelHint,
+			inputMode: "numeric",
+			maxLength: 14,
+			value,
+			required: isRequired,
+			error,
+			showErrorIcon: !!error,
+			disabled,
+			onInput: (e) => {
+				const formatted = formatCPF(e.target.value);
+				e.target.value = formatted;
+				onChange(question.questionId, formatted);
+				onFormatValidityChange?.(question.questionId, isValidCPF(formatted));
+			},
+			onBlur: () => onBlur?.(question.questionId)
+		})
+	});
+	if (effectiveType === "NUMBER") return /* @__PURE__ */ u("div", {
+		class: "IncodeDynamicFormsField",
+		children: /* @__PURE__ */ u(InputComposed, {
+			id,
+			name: question.questionId,
+			label,
+			labelHint,
+			type: "number",
+			inputMode: "numeric",
+			value,
+			required: isRequired,
+			error,
+			showErrorIcon: !!error,
+			disabled,
+			onInput: (e) => {
+				const numeric = e.target.value.replace(/[^0-9]/g, "");
+				onChange(question.questionId, numeric);
+			},
+			onBlur: () => onBlur?.(question.questionId)
+		})
+	});
+	return /* @__PURE__ */ u("div", {
+		class: "IncodeDynamicFormsField",
+		children: /* @__PURE__ */ u(InputComposed, {
+			id,
+			name: question.questionId,
+			label,
+			labelHint,
+			type: "text",
+			value,
+			required: isRequired,
+			autocomplete,
+			error,
+			showErrorIcon: !!error,
+			disabled,
+			onInput: (e) => onChange(question.questionId, e.target.value),
+			onBlur: () => onBlur?.(question.questionId)
+		})
+	});
+};
+var ScreenForm = ({ screen, answers, validationErrors, canSubmit, isSubmitting = false, onAnswerChange, onAnswerValidityChange, onValidateField, onSubmit }) => {
+	const { t } = useTranslation();
+	const title = screen.hideTitle ? void 0 : screen.title || t("dynamicForms.title");
+	const titleId = g();
+	const fallbackFormLabel = screen.title || t("dynamicForms.title");
+	const hintMode = T(() => getRequiredHintMode(screen.questions.map((q) => !q.isOptional)), [screen]);
+	return /* @__PURE__ */ u(Page, {
+		className: "IncodeDynamicFormsPage",
+		title,
+		titleId: title ? titleId : void 0,
+		hideFooterBranding: true,
+		children: [
+			/* @__PURE__ */ u(Spacer, { size: 32 }),
+			isSubmitting && /* @__PURE__ */ u("div", {
+				role: "status",
+				"aria-live": "polite",
+				class: "IncodeSrOnly",
+				children: t("common.processing")
+			}),
+			/* @__PURE__ */ u("form", {
+				class: "IncodeDynamicFormsForm",
+				onSubmit: (e) => {
+					e.preventDefault();
+					onSubmit();
+				},
+				"aria-labelledby": title ? titleId : void 0,
+				"aria-label": title ? void 0 : fallbackFormLabel,
+				"aria-busy": isSubmitting || void 0,
+				children: [screen.questions.map((question) => {
+					const errorKey = validationErrors?.[question.questionId];
+					const hint = getFieldHint(hintMode, !question.isOptional);
+					const labelHint = hint ? t(`forms.label.${hint}`) ?? void 0 : void 0;
+					return /* @__PURE__ */ u(QuestionInput, {
+						question,
+						value: answers[question.questionId] ?? "",
+						disabled: isSubmitting,
+						error: errorKey ? t(errorKey) : void 0,
+						labelHint,
+						onChange: onAnswerChange,
+						onFormatValidityChange: onAnswerValidityChange,
+						onBlur: onValidateField
+					}, question.questionId);
+				}), /* @__PURE__ */ u(Button, {
+					type: "submit",
+					disabled: !canSubmit,
+					isLoading: isSubmitting,
+					children: t("common.continue")
+				})]
+			})
+		]
+	});
+};
+var DynamicFormsContent = ({ config, manager: externalManager, onFinish }) => {
+	const { t } = useTranslation();
+	const [state, manager] = useManager(() => {
+		if (externalManager) return externalManager;
+		if (!config) throw new Error("DynamicForms config is required");
+		return createDynamicFormsManager({ config });
+	}, {
+		manageLifecycle: !externalManager,
+		autoLoad: true
+	});
+	useModuleTerminalCallbacks({
+		status: state.status === "closed" ? "finished" : state.status,
+		onFinish
+	});
+	if (state.status === "idle" || state.status === "loadingScreens") return /* @__PURE__ */ u(VerificationResult, {
+		status: "submitting",
+		submittingTitle: t("common.loading")
+	});
+	if (state.status === "inputting" || state.status === "submitting") {
+		const isSubmitting = state.status === "submitting";
+		const canSubmit = state.status === "inputting" ? state.canSubmit : false;
+		return /* @__PURE__ */ u(ScreenForm, {
+			screen: state.currentScreen,
+			answers: state.answers,
+			validationErrors: state.validationErrors,
+			canSubmit,
+			isSubmitting,
+			onAnswerChange: (questionId, value) => manager.setAnswer(questionId, value),
+			onAnswerValidityChange: (questionId, isValid) => manager.setAnswerValidity(questionId, isValid),
+			onValidateField: (questionId) => manager.validateField(questionId),
+			onSubmit: () => manager.submit()
+		}, state.screenIndex);
+	}
+	if (state.status === "success") return /* @__PURE__ */ u(VerificationResult, {
+		status: "success",
+		successTitle: t("dynamicForms.success")
+	});
+	if (state.status === "misconfigured") return /* @__PURE__ */ u(VerificationResult, {
+		status: "failure",
+		failureTitle: t("dynamicForms.misconfigured"),
+		onSkip: () => manager.close(),
+		skipLabel: t("common.close")
+	});
+	if (state.status === "finished" || state.status === "closed") return null;
+};
+/**
+* Dynamic Forms UI component.
+*
+* Renders multi-screen forms driven by backend configuration.
+* Supports all field types: TEXT, NAME, NUMBER, DATE, EMAIL, PHONE, CPF, COUNTRY, NATIONALITY, YESNO, SELECT, MULTISELECT.
+*
+* @example Basic usage with flowId
+* ```tsx
+* <DynamicForms
+*   config={{ flowId: 'your-flow-id' }}
+*   onFinish={() => router.push('/next-step')}
+*   onError={(err) => toast.error(err)}
+* />
+* ```
+*
+* @example Pre-loaded screens
+* ```tsx
+* <DynamicForms
+*   config={{ screens: [...] }}
+*   onFinish={() => router.push('/next-step')}
+* />
+* ```
+*
+* @see {@link createDynamicFormsManager} for headless usage
+*/
+var DynamicForms = ({ config, manager, onFinish }) => {
+	return /* @__PURE__ */ u(IncodeComponent, { children: config || manager ? /* @__PURE__ */ u(DynamicFormsContent, {
+		config,
+		manager,
+		onFinish
+	}) : null });
+};
+registerIncodeModuleElement(DynamicForms, "incode-dynamic-forms");
+//#endregion
+export { DynamicForms };

package/dist/ekyb/ekyb.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../ekybModule-BSs7mndb.js";
-export { e as EkybModule };
+import { t as EkybModule } from "../ekybModule-CIPGmCvD.js";
+export { EkybModule };

package/dist/ekyb/styles.css

@@ -8,7 +8,9 @@
 }
 
 .IncodeEkybPage {
+  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
   margin-inline: auto;
+  animation-fill-mode: both;
 }
 
 .IncodeEkybPage .IncodeEkybSpinner {

package/dist/ekybModule-CIPGmCvD.js

@@ -0,0 +1,279 @@
+import { n as useTranslation } from "./i18n-CoCO2ZuN.js";
+import { _ as y, d as T, l as A, v as u, x as k } from "./vendor-preact-DThS2ZQ_.js";
+import { c as useManager, i as useFormScrollable, o as useModuleTerminalCallbacks } from "./hooks-Da_yP_Dr.js";
+import { t as IncodeComponent } from "./incodeComponent-wfnHlnXx.js";
+import { r as Spacer } from "./loadingIcon-B0ysgiNq.js";
+import { t as Page } from "./page-DxGQj7Gk.js";
+import "./extensibility-Cs3KQQdC.js";
+import { t as Spinner } from "./spinner-D8a_2LvW.js";
+import { t as Button } from "./button-CM_hgyIP.js";
+import { t as VerificationResult } from "./verificationResult-Do5SpZ6X.js";
+import { t as InputComposed } from "./inputComposed-CQ4AsvZg.js";
+import { i as translateError, r as FormField } from "./radioGroupComposed-BNuaopVr.js";
+import { t as DropdownComposed } from "./dropdownComposed-_fgAlo_C.js";
+import { t as registerIncodeModuleElement } from "./incodeModule-BUDoTwT9.js";
+import { n as getRequiredHintMode, t as getFieldHint } from "./requiredLabelHint-DEadtiwx.js";
+import { n as AddressAutocomplete, t as getAccessibleOptionLabel } from "./optionAccessibleLabel-CnA-mNAU.js";
+import { t as CountrySelector$1 } from "./countrySelector-mSWyHSy4.js";
+import { DEV_ONLY_COUNTRIES, SUPPORTED_COUNTRIES, createEkybManager } from "@incodetech/core/ekyb";
+//#region src/modules/ekyb/countrySelector.tsx
+var CountrySelector = ({ value, onChange }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ u(CountrySelector$1, {
+		id: "ekyb-country",
+		label: t("ekyb.country"),
+		value,
+		onChange,
+		countryCodes: SUPPORTED_COUNTRIES,
+		devOnlyCountryCodes: DEV_ONLY_COUNTRIES,
+		"data-testid": "ekyb-country-selector"
+	});
+};
+//#endregion
+//#region src/modules/ekyb/fieldInput.tsx
+var FieldInput = ({ field, value, error, errorParams, country: _country, labelHint, onChange, onBlur }) => {
+	const { t } = useTranslation();
+	if (field.type === "dropdown") return /* @__PURE__ */ u(DropdownComposed, {
+		id: `ekyb-${field.name}`,
+		label: t(field.label),
+		labelHint,
+		placeholder: field.placeholder ? t(field.placeholder) : void 0,
+		value,
+		options: (field.options ?? []).map((o) => {
+			const translatedOptionLabel = t(o.label);
+			return {
+				...o,
+				label: translatedOptionLabel,
+				ariaLabel: getAccessibleOptionLabel(translatedOptionLabel)
+			};
+		}),
+		error: translateError(t, error, errorParams),
+		required: field.required,
+		searchable: true,
+		onChange: (val) => onChange(field.name, val),
+		onBlur: onBlur ? () => onBlur(field.name) : void 0,
+		"data-testid": `ekyb-field-${field.name}`
+	});
+	return /* @__PURE__ */ u(FormField, {
+		name: field.name,
+		label: field.label,
+		displayLabel: field.displayLabel,
+		value,
+		error,
+		errorParams,
+		required: field.required,
+		labelHint,
+		onChange,
+		onBlur
+	});
+};
+//#endregion
+//#region src/modules/ekyb/uboInputs.tsx
+var UboInputs = ({ ubos, validationErrors, canAddUbo, labelHint, onSetField, onBlur, onAdd, onRemove }) => {
+	const { t } = useTranslation();
+	const translateError$2 = (err) => translateError(t, err?.key, err?.params);
+	if (ubos.length === 0) return null;
+	return /* @__PURE__ */ u("div", {
+		className: "IncodeEkybUbos",
+		children: [ubos.map((ubo, index) => {
+			const nameLabel = index === 0 ? t("ekyb.uboName") : t("ekyb.uboNameWithNumber", { number: index + 1 });
+			const surnameLabel = index === 0 ? t("ekyb.uboSurname") : t("ekyb.uboSurnameWithNumber", { number: index + 1 });
+			const isFirst = index === 0;
+			return /* @__PURE__ */ u("div", {
+				className: "IncodeEkybUboEntry",
+				role: "group",
+				"aria-label": `UBO ${index + 1}`,
+				children: [
+					/* @__PURE__ */ u(InputComposed, {
+						id: `ubo-${index}-name`,
+						label: nameLabel,
+						labelHint,
+						name: `ubo-${index}-name`,
+						value: ubo.name,
+						error: translateError$2(validationErrors?.[`ubo-${index}-name`]),
+						required: true,
+						onInput: (e) => onSetField(index, "name", e.target.value),
+						onBlur: onBlur ? () => onBlur(`ubo-${index}-name`) : void 0,
+						"data-testid": `ekyb-ubo-${index}-name`
+					}),
+					/* @__PURE__ */ u(InputComposed, {
+						id: `ubo-${index}-surname`,
+						label: surnameLabel,
+						labelHint,
+						name: `ubo-${index}-surname`,
+						value: ubo.surname,
+						error: translateError$2(validationErrors?.[`ubo-${index}-surname`]),
+						required: true,
+						onInput: (e) => onSetField(index, "surname", e.target.value),
+						onBlur: onBlur ? () => onBlur(`ubo-${index}-surname`) : void 0,
+						"data-testid": `ekyb-ubo-${index}-surname`
+					}),
+					!isFirst && /* @__PURE__ */ u("button", {
+						className: "IncodeEkybRemoveUbo",
+						onClick: () => onRemove(index),
+						type: "button",
+						"aria-label": `${t("common.remove")} UBO ${index + 1}`,
+						children: t("common.remove")
+					})
+				]
+			}, ubo.id);
+		}), canAddUbo && /* @__PURE__ */ u("button", {
+			className: "IncodeEkybAddUbo",
+			onClick: onAdd,
+			type: "button",
+			"data-testid": "ekyb-add-ubo",
+			children: t("ekyb.addAnotherUbo")
+		})]
+	});
+};
+//#endregion
+//#region src/modules/ekyb/ekybModule.tsx
+var EkybContent = ({ config, onFinish }) => {
+	const { t } = useTranslation();
+	const [state, manager] = useManager(() => createEkybManager({ config }));
+	useModuleTerminalCallbacks({
+		status: state.status === "closed" ? "finished" : state.status,
+		onFinish
+	});
+	if (state.status === "finished" || state.status === "closed") return null;
+	if (state.status === "loading") return /* @__PURE__ */ u(VerificationResult, {
+		status: "submitting",
+		submittingTitle: t("common.loading")
+	});
+	if (state.status === "submitting") return /* @__PURE__ */ u(Page, {
+		className: "IncodeEkybPage",
+		children: /* @__PURE__ */ u(Spinner, {
+			fullScreen: false,
+			title: t("common.processing"),
+			className: "IncodeEkybSpinner"
+		})
+	});
+	if (state.status === "success") return /* @__PURE__ */ u(VerificationResult, { status: "success" });
+	if (state.status === "error") return /* @__PURE__ */ u(VerificationResult, {
+		status: "failure",
+		onRetry: () => manager.retry()
+	});
+	if (state.status === "form") return /* @__PURE__ */ u(EkybForm, {
+		state,
+		manager
+	});
+	return null;
+};
+var ADDRESS_FIELD_NAMES = new Set([
+	"street",
+	"houseNo",
+	"addressLine2",
+	"city",
+	"state",
+	"postalCode"
+]);
+var EkybForm = ({ state, manager }) => {
+	const { country, fields, values, validationErrors, isValid, ubos, canAddUbo, addressSuggestions } = state;
+	const { t } = useTranslation();
+	const formRef = A(null);
+	const postalCodeFieldRef = A(null);
+	const previousPostalCodeErrorRef = A(void 0);
+	const isScrollable = useFormScrollable(formRef, fields.length);
+	const translateError$1 = (err) => translateError(t, err?.key, err?.params);
+	const postalCodeErrorKey = validationErrors?.postalCode?.key;
+	y(() => {
+		const previous = previousPostalCodeErrorRef.current;
+		previousPostalCodeErrorRef.current = postalCodeErrorKey;
+		if (!postalCodeErrorKey || previous === postalCodeErrorKey) return;
+		const rafId = requestAnimationFrame(() => {
+			const postalField = postalCodeFieldRef.current;
+			if (!postalField) return;
+			(postalField.querySelector("#postalCode-error") ?? postalField).scrollIntoView({
+				behavior: "smooth",
+				block: "nearest"
+			});
+		});
+		return () => cancelAnimationFrame(rafId);
+	}, [postalCodeErrorKey]);
+	const businessFields = fields.filter((f) => !ADDRESS_FIELD_NAMES.has(f.name));
+	const addressFields = fields.filter((f) => ADDRESS_FIELD_NAMES.has(f.name));
+	const mode = T(() => getRequiredHintMode(fields.map((f) => f.required)), [fields]);
+	const labelHintFor = (required) => {
+		const hint = getFieldHint(mode, required);
+		return hint ? t(`forms.label.${hint}`) : void 0;
+	};
+	return /* @__PURE__ */ u(Page, {
+		className: `IncodeEkybPage${isScrollable ? " IncodeEkybPageScrollable" : ""}`,
+		title: t("ekyb.title"),
+		children: [/* @__PURE__ */ u("div", {
+			ref: formRef,
+			className: "IncodeEkybForm",
+			children: [
+				/* @__PURE__ */ u(CountrySelector, {
+					value: country,
+					onChange: (c) => manager.setCountry(c)
+				}),
+				businessFields.map((field) => /* @__PURE__ */ u(FieldInput, {
+					field,
+					value: values[field.name] ?? "",
+					error: translateError$1(validationErrors?.[field.name]),
+					country,
+					labelHint: labelHintFor(field.required),
+					onChange: (name, value) => manager.setField(name, value),
+					onBlur: (name) => manager.validateField(name)
+				}, field.name)),
+				/* @__PURE__ */ u(UboInputs, {
+					ubos,
+					validationErrors,
+					canAddUbo,
+					labelHint: labelHintFor(true),
+					onSetField: (index, field, value) => manager.setUboField(index, field, value),
+					onBlur: (fieldKey) => manager.validateField(fieldKey),
+					onAdd: () => manager.addUbo(),
+					onRemove: (index) => manager.removeUbo(index)
+				}),
+				addressFields.length > 0 && /* @__PURE__ */ u(k, { children: [/* @__PURE__ */ u("h3", {
+					className: "IncodeEkybSectionHeader",
+					children: t("ekyb.addressDetails")
+				}), addressFields.map((field) => {
+					if (field.name === "street") return /* @__PURE__ */ u(AddressAutocomplete, {
+						label: field.label,
+						labelHint: labelHintFor(field.required),
+						value: values.street ?? "",
+						error: translateError$1(validationErrors?.street),
+						suggestions: addressSuggestions,
+						required: field.required,
+						onChange: (value) => manager.setField("street", value),
+						onSearch: (query) => manager.searchAddress(query),
+						onSelect: (suggestion) => manager.selectAddress(suggestion),
+						onBlur: () => manager.validateField("street")
+					}, field.name);
+					return /* @__PURE__ */ u("div", {
+						ref: field.name === "postalCode" ? postalCodeFieldRef : void 0,
+						children: /* @__PURE__ */ u(FieldInput, {
+							field,
+							value: values[field.name] ?? "",
+							error: translateError$1(validationErrors?.[field.name]),
+							country,
+							labelHint: labelHintFor(field.required),
+							onChange: (name, value) => manager.setField(name, value),
+							onBlur: (name) => manager.validateField(name)
+						})
+					}, field.name);
+				})] })
+			]
+		}), /* @__PURE__ */ u("div", {
+			className: "IncodeEkybFooter",
+			children: [/* @__PURE__ */ u(Button, {
+				onClick: () => manager.submit(),
+				disabled: !isValid,
+				"data-testid": "ekyb-submit",
+				children: t("ekyb.continue")
+			}), /* @__PURE__ */ u(Spacer, { size: 16 })]
+		})]
+	});
+};
+var EkybModule = ({ config, onFinish }) => {
+	return /* @__PURE__ */ u(IncodeComponent, { children: config ? /* @__PURE__ */ u(EkybContent, {
+		config,
+		onFinish
+	}) : null });
+};
+registerIncodeModuleElement(EkybModule, "incode-ekyb");
+//#endregion
+export { EkybModule as t };

package/dist/ekybModule-DFoYpheB.js

@@ -0,0 +1,2 @@
+import { t as EkybModule } from "./ekybModule-CIPGmCvD.js";
+export { EkybModule };

package/dist/ekyc/ekyc.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../ekycModule-CU9pt5YN.js";
-export { e as EkycModule };
+import { t as EkycModule } from "../ekycModule-BuTaC5ct.js";
+export { EkycModule };