@adyen/kyc-components 4.18.0 → 4.19.0-beta.0

package/dist/CountryField-CEttz1qx.js

@@ -0,0 +1,1653 @@
+try {
+	let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
+	n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "94b10fd2-4924-42f4-8ed8-2cea4dc61321", e._sentryDebugIdIdentifier = "sentry-dbid-94b10fd2-4924-42f4-8ed8-2cea4dc61321");
+} catch (e) {}
+import { o as createLogger, r as useTranslation } from "./translation-CcKrUksA.js";
+import { C as useDataset, k as Header, nt as isEmpty, w as datasetIdentifier } from "./resolveEnvironment-DEX5KqEv.js";
+import { n as IconButton, t as Button } from "./Button-BuhgDsyo.js";
+import { o as objectsDeepEqual, s as entriesOf } from "./AnalyticsContext-BnRQ9H1u.js";
+import { t as DecisionMakerTypes } from "./decision-maker-type-NR4GFAeT.js";
+import { n as TrustMemberGuidanceLabels, r as TrustMemberTypes } from "./trustMemberGuidance-CgdU2v0j.js";
+import { i as useAnalyticsContext } from "./Modal-BYdlsXkf.js";
+import { t as formDebugInfo } from "./debugStore-DpSgCNGn.js";
+import { a as MaybeModal, c as getDataByFields, d as translateTranslatable, f as LoaderWrapper, i as ProgressBar, l as omitKeys, o as ValidationResult, r as Field, s as addKeys, t as Select } from "./Select-C2axJYZG.js";
+import { n as Confirm, t as StructuredList } from "./StructuredList-Mj-OPN9u.js";
+import { t as Image } from "./Image-Dc5Xg1_Y.js";
+import { t as List } from "./List-ywoRPg-q.js";
+import { r as FormRouterContext, t as ErrorPanel } from "./ErrorPanel-C51kA_mU.js";
+import { t as UnincorporatedPartnershipMemberTypes } from "./unincorporated-partnership-DNTK5Y_5.js";
+import { lazy } from "preact/compat";
+import { useCallback as useCallback$1, useContext as useContext$1, useEffect as useEffect$1, useMemo as useMemo$1, useReducer, useRef as useRef$1, useState as useState$1 } from "preact/hooks";
+import cx from "classnames";
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { createContext as createContext$1 } from "preact";
+//#region src/context/FormContext/FormContext.ts
+var FormContext = createContext$1(null);
+//#endregion
+//#region src/context/FormContext/FormContextProvider.tsx
+function FormContextProvider({ children, form }) {
+	const contextValue = useMemo$1(() => ({ form }), [form]);
+	return /* @__PURE__ */ jsx(FormContext.Provider, {
+		value: contextValue,
+		children
+	});
+}
+//#endregion
+//#region src/hooks/usePageLandedEvent.ts
+/**
+* Hook that automatically sends a "Landed on page" analytics event on when active form changes.
+* Used on form component level (i.e. Basic information, Additional details etc.) to explicitly track page visits.
+* This centralizes the common analytics pattern used across form components.
+*/
+var usePageLandedEvent = (formName) => {
+	const userEvents = useAnalyticsContext();
+	const oldFormNameRef = useRef$1(void 0);
+	if (formName && oldFormNameRef.current !== formName) {
+		userEvents.updateSharedEventProperties({ page: formName });
+		userEvents.addPageEvent("Landed on page", { actionType: "navigate" });
+		oldFormNameRef.current = formName;
+	}
+};
+//#endregion
+//#region src/utils/analytics/trackNavigation.ts
+var trackNavigation = ({ userEvents, actionType, toForm, label, returnValue, additionalTrackingParams }) => {
+	userEvents.addPageEvent("Clicked button", {
+		actionType,
+		toPage: toForm,
+		label,
+		returnValue,
+		...additionalTrackingParams
+	});
+};
+//#endregion
+//#region src/utils/formUtils.ts
+var createFormUtils = (props, t) => ({
+	getLabel: (field, fallbackLabelKey) => {
+		let translationKey = props.labels?.[field] ?? fallbackLabelKey ?? field;
+		if (props.labels && !props.labels?.[field] && Object.keys(props.labels).length) {
+			const parentKey = Object.keys(props.labels).find((fieldKey) => typeof props.labels?.[fieldKey] === "object");
+			if (parentKey) translationKey = props.labels[parentKey][field] ?? translationKey;
+		}
+		return t(($) => $[translationKey]);
+	},
+	getMask: (field) => props.masks?.[field],
+	isRequiredField: (field, showIfNotInRequiredFields = true) => props.requiredFields ? props.requiredFields.includes(field) && (field !== "role" || field === "role" && props.taskType !== "individual") : showIfNotInRequiredFields,
+	isOptionalField: (field) => props.optionalFields?.includes(field) ?? false,
+	isVisibleField(field, showIfNotInRequiredFields = true) {
+		return this.isRequiredField(field, showIfNotInRequiredFields) || this.isOptionalField(field);
+	},
+	isReadOnly: (field) => props.readOnly || (props.readOnlyFields ? props.readOnlyFields.includes(field) : false),
+	isObscured: (field) => props.obscuredFields ? props.obscuredFields.includes(field) : false,
+	isTrusted: (field) => props.trustedFields ? props.trustedFields.includes(field) : false,
+	getErrorMessage: (field, errors, fieldProblems) => {
+		return errors?.[field]?.errorMessage || Boolean(fieldProblems?.[field]);
+	},
+	getFieldData: (formData, fieldKeys) => getDataByFields(formData, fieldKeys),
+	getFieldValid: (formValid, fieldKeys) => entriesOf(formValid).reduce((acc, [key, val]) => fieldKeys.includes(key) ? {
+		...acc,
+		[key]: val
+	} : acc, {}),
+	getFieldErrors: (formErrors, fieldProblems, fieldKeys) => Object.keys(formErrors).reduce((acc, key) => {
+		if (fieldKeys.includes(key)) {
+			const error = formErrors?.[key]?.errorMessage;
+			return error ? {
+				...acc,
+				[key]: error
+			} : {
+				...acc,
+				[key]: Boolean(fieldProblems?.[key])
+			};
+		}
+		return acc;
+	}, {}),
+	getFieldLabels: (fieldKeys, fallbackLabelKeys) => fieldKeys.reduce((acc, field) => {
+		let translationKey = props.labels?.[field] ?? fallbackLabelKeys?.[field] ?? field;
+		if (props.labels && !props.labels?.[field] && Object.keys(props.labels).length) {
+			const parentKey = Object.keys(props.labels).find((fieldKey) => typeof props.labels?.[fieldKey] === "object");
+			if (parentKey) translationKey = props.labels[parentKey][field] ?? translationKey;
+		}
+		return {
+			...acc,
+			[field]: t(($) => $[translationKey])
+		};
+	}, {})
+});
+var mergeFieldMetadataIntoProps = (fieldName, metadata, otherProps) => {
+	const existingProps = otherProps ?? {};
+	return {
+		...existingProps,
+		labels: {
+			...existingProps.labels,
+			[fieldName]: metadata.label
+		},
+		masks: {
+			...existingProps.masks,
+			[fieldName]: metadata.mask
+		},
+		validators: {
+			...existingProps.validators,
+			[fieldName]: metadata.validators
+		}
+	};
+};
+//#endregion
+//#region src/utils/roleMetadata.ts
+var roleMetadata = {
+	[DecisionMakerTypes.CONTROLLING_PERSON]: {
+		name: "controllingPerson",
+		description: "controllingPersonDescription"
+	},
+	[DecisionMakerTypes.OWNER]: {
+		name: "owner",
+		description: "ownerDescription"
+	},
+	[DecisionMakerTypes.SIGNATORY]: {
+		name: "signatory",
+		description: "signatoryDescription"
+	},
+	[DecisionMakerTypes.DIRECTOR]: {
+		name: "director",
+		description: "directorDescription"
+	},
+	[TrustMemberTypes.DEFINED_BENEFICIARY]: {
+		name: "definedBeneficiary",
+		description: "definedBeneficiaryDescription"
+	},
+	[TrustMemberTypes.UNDEFINED_BENEFICIARY]: {
+		name: "undefinedBeneficiary",
+		description: "undefinedBeneficiaryDescription"
+	},
+	[TrustMemberTypes.PROTECTOR]: {
+		name: "protector",
+		description: "personAppointmentUnderTrustInstrument"
+	},
+	[TrustMemberTypes.TRUSTEE]: {
+		name: "trustee",
+		description: "legalOwnerOfProperty"
+	},
+	[TrustMemberTypes.SETTLOR]: {
+		name: "settlor",
+		description: "entityEstablishingTrust"
+	},
+	[TrustMemberGuidanceLabels.BENEFICIARY]: { name: TrustMemberGuidanceLabels.BENEFICIARY },
+	[TrustMemberGuidanceLabels.TRUSTEE]: { name: TrustMemberGuidanceLabels.TRUSTEE },
+	[UnincorporatedPartnershipMemberTypes.SECONDARY_PARTNER]: {
+		name: UnincorporatedPartnershipMemberTypes.SECONDARY_PARTNER,
+		description: "secondaryPartnerGuideDescription"
+	}
+};
+var getRoleTagVariant = (role) => roleMetadata[role]?.variant ?? "blue";
+var getRoleName = (role) => roleMetadata[role]?.name ?? role;
+var Summary_module_default = {
+	summary: "_summary_1op7a_1",
+	"summary-content": "_summary-content_1op7a_7",
+	summaryContent: "_summary-content_1op7a_7",
+	"summary-list": "_summary-list_1op7a_13",
+	summaryList: "_summary-list_1op7a_13",
+	"summary-list-header": "_summary-list-header_1op7a_27",
+	summaryListHeader: "_summary-list-header_1op7a_27",
+	"summary-list-header-title": "_summary-list-header-title_1op7a_32",
+	summaryListHeaderTitle: "_summary-list-header-title_1op7a_32",
+	"summary-list-item": "_summary-list-item_1op7a_41",
+	summaryListItem: "_summary-list-item_1op7a_41",
+	"summary-list-item-key": "_summary-list-item-key_1op7a_55",
+	summaryListItemKey: "_summary-list-item-key_1op7a_55",
+	"summary-list-item-value": "_summary-list-item-value_1op7a_67",
+	summaryListItemValue: "_summary-list-item-value_1op7a_67",
+	"summary-content-legal-caption": "_summary-content-legal-caption_1op7a_73",
+	summaryContentLegalCaption: "_summary-content-legal-caption_1op7a_73",
+	"summary-content-list": "_summary-content-list_1op7a_88",
+	summaryContentList: "_summary-content-list_1op7a_88",
+	"summary-content-logo": "_summary-content-logo_1op7a_92",
+	summaryContentLogo: "_summary-content-logo_1op7a_92"
+};
+//#endregion
+//#region src/components/Shared/Summary/summaryItem.ts
+var isSummaryItem = (val) => typeof val === "object" && val !== null && "summaryLabel" in val && "summaryValue" in val;
+var summaryItem = (summaryLabel, summaryValue) => ({
+	summaryLabel,
+	summaryValue
+});
+var preTranslatedSummaryItem = (summaryLabel, summaryValue) => ({
+	summaryLabel,
+	summaryValue,
+	preTranslated: true
+});
+//#endregion
+//#region src/components/Shared/Summary/Summary.tsx
+var onfidoLogo = lazy(() => import("./onfido-logo-CMRuSr8M.js"));
+var summaryStep = {
+	formId: "summary",
+	formName: "summary"
+};
+/** @deprecated, use NewSummary */
+function Summary({ data, forms, gotoForm, labels, problems, omitted = {}, showFormHeader = true, showSectionHeader = true, showLegalCaption = false, showTaxExemptedLegalCaption = false, useStructuredList = false }) {
+	const { t } = useTranslation("common");
+	const userEvents = useAnalyticsContext();
+	const editForm = (formId) => {
+		const formIndex = forms.findIndex((form) => form.formId === formId);
+		if (formIndex >= 0) gotoForm(formIndex);
+	};
+	const allValidationErrors = problems?.validationErrors && Object.values(problems.validationErrors)?.reduce((acc, validError) => ({
+		...acc,
+		...validError
+	}), {});
+	const allVerificationErrors = problems?.verificationErrors && Object.values(problems.verificationErrors)?.reduce((acc, verifError) => ({
+		...acc,
+		...verifError
+	}), {});
+	const formUtils = createFormUtils({ labels }, t);
+	const summarySectionHeader = (formName, formId) => /* @__PURE__ */ jsxs("header", {
+		className: Summary_module_default.summaryListHeader,
+		children: [/* @__PURE__ */ jsx("h2", {
+			className: Summary_module_default.summaryListHeaderTitle,
+			children: formName
+		}), !omitted.summaryEditButton?.includes(formId) && /* @__PURE__ */ jsx(IconButton, {
+			variant: "tertiary",
+			icon: "edit",
+			onClick: () => {
+				trackNavigation({
+					userEvents,
+					actionType: "edit",
+					toForm: formName,
+					label: "Pencil icon"
+				});
+				editForm(formId);
+			},
+			ariaLabel: t(($) => $["editForm"], { formName })
+		})]
+	});
+	const renderSummarySection = (fieldData, labelData = {}, formName, formId, useStructuredList) => {
+		const structuredListItems = Object.entries(fieldData).map(([key, value]) => {
+			return {
+				term: t(($) => $[labelData[key] || key]),
+				details: value
+			};
+		});
+		return !useStructuredList ? /* @__PURE__ */ jsxs(List, {
+			variant: "grouped-secondary",
+			children: [showSectionHeader && summarySectionHeader(formName, formId), /* @__PURE__ */ jsx("dl", {
+				className: Summary_module_default.summaryList,
+				children: Array.isArray(fieldData) ? fieldData.map((item) => renderBulletedListField(item)) : renderSummaryItems(fieldData, labelData)
+			})]
+		}) : /* @__PURE__ */ jsxs(List, {
+			variant: "grouped-secondary",
+			children: [showSectionHeader && summarySectionHeader(formName, formId), /* @__PURE__ */ jsx(StructuredList, { items: structuredListItems })]
+		});
+	};
+	const renderSummaryContent = (summaryData, useStructuredList) => {
+		const summaryList = [];
+		forms.forEach(({ formId, formName }) => {
+			const currentFormData = summaryData[formId];
+			if (!currentFormData || Object.values(currentFormData).every((value) => isEmpty(value)) || formId === summaryStep.formId || omitted.forms?.includes(formId)) return;
+			const summaryItems = currentFormData.hasInnerForms ? renderInnerForms(labels?.[formId], formId, currentFormData) : renderSummarySection(currentFormData, labels?.[formId], t(($) => $[typeof labels?.[formId] === "string" ? labels[formId] : formName]), formId, useStructuredList);
+			summaryList.push(summaryItems);
+		});
+		return summaryList;
+	};
+	const renderInnerForms = (labelData, parentFormId, innerForms = {}) => {
+		if (!innerForms) return [];
+		const dataList = [];
+		Object.entries(innerForms).forEach(([innerFormName, innerFormFieldData]) => {
+			const formName = t(($) => $[labelData?.[innerFormName] || innerFormName]);
+			if (typeof innerFormFieldData === "object" && innerFormFieldData !== null) {
+				if (Object.values(innerFormFieldData).every((value) => isEmpty(value))) return;
+				dataList.push(renderSummarySection(innerFormFieldData, labelData, formName, parentFormId));
+			}
+		});
+		return dataList;
+	};
+	/**
+	* Renders a single label-value pair as a field in the summary section.
+	*
+	* This helper function creates the markup for a single piece of data,
+	* displaying a label and its corresponding value using a definition list
+	* for semantic correctness (`<dt>` for label, `<dd>` for data).
+	*
+	* @param label The translated label to display for the field.
+	* @param value The value of the field, which can be a simple string or a JSX element for more complex rendering.
+	* @returns A JSX element representing the summary field.
+	*/
+	const renderField = (label, value) => /* @__PURE__ */ jsxs("div", {
+		className: Summary_module_default.summaryListItem,
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: Summary_module_default.summaryListItemKey,
+			children: label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: Summary_module_default.summaryListItemValue,
+			children: value
+		})]
+	});
+	const renderBulletedListField = (item) => /* @__PURE__ */ jsx("ul", {
+		className: Summary_module_default.summaryContentList,
+		children: /* @__PURE__ */ jsx("li", { children: item })
+	});
+	/**
+	* Recursively renders the data fields for a summary section.
+	*
+	* This function iterates through the properties of the `formData` object.
+	* It handles different data types by:
+	* - Displaying simple string or number values with their corresponding labels.
+	* - Handling 'role' arrays specifically to show a comma-separated list of roles.
+	* - Recognizing and rendering `SummaryItem` objects with their custom labels and values.
+	* - Recursively calling itself for nested objects to render their properties.
+	*
+	* Fields listed in the `omitted.keys` prop are skipped.
+	*
+	* @param formData The data object for the current section, containing key-value pairs to be rendered.
+	* @param labelData A map of field keys to their corresponding translation keys for fetching display labels.
+	* @returns An array of JSX elements representing the rendered summary fields for the section.
+	*/
+	const renderSummaryItems = (formData = {}, labelData = {}) => {
+		if (!formData) return [];
+		if (formData?.idVerificationMethod === "instantVerification") return [renderField(t(($) => $["verificationMethod"]), /* @__PURE__ */ jsx(Image, {
+			lazyLoadedImage: onfidoLogo,
+			className: Summary_module_default.summaryContentLogo,
+			alt: "onfido-logo"
+		}))];
+		const dataList = [];
+		Object.entries(formData).forEach(([field, fieldData]) => {
+			if (omitted.keys?.includes(field) || !fieldData) return;
+			const fieldName = t(($) => $[labelData[field] || field]);
+			if (field === "role" && Array.isArray(fieldData)) {
+				const label = fieldData.length > 1 ? t(($) => $["roles"]) : fieldName;
+				const roles = fieldData.map((role) => t(($) => $[getRoleName(role)])).join(", ");
+				dataList.push(renderField(label, roles));
+			} else if (isSummaryItem(fieldData)) {
+				const { summaryLabel, summaryValue, preTranslated } = fieldData;
+				if (preTranslated) dataList.push(renderField(summaryLabel, summaryValue));
+				else dataList.push(renderField(translateTranslatable(t, summaryLabel) ?? "", summaryValue));
+			} else if (typeof fieldData === "object") dataList.push(renderSummaryItems(fieldData, labelData));
+			else if (["string", "number"].includes(typeof fieldData)) dataList.push(renderField(fieldName, fieldData));
+		});
+		return dataList;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		role: "region",
+		className: Summary_module_default.summary,
+		children: [showFormHeader && /* @__PURE__ */ jsx(Header, {
+			title: t(($) => $["summary"]),
+			description: t(($) => $["summaryDescription"])
+		}), /* @__PURE__ */ jsxs("div", {
+			className: Summary_module_default.summaryContent,
+			children: [
+				/* @__PURE__ */ jsx(ErrorPanel, {
+					validationErrors: allValidationErrors,
+					verificationErrors: allVerificationErrors,
+					formUtils,
+					id: "ariaErrorField"
+				}),
+				renderSummaryContent(data, useStructuredList),
+				showLegalCaption && /* @__PURE__ */ jsx("div", {
+					className: Summary_module_default.summaryContentLegalCaption,
+					children: t(($) => $["summaryLegalCaption"])
+				}),
+				showTaxExemptedLegalCaption && /* @__PURE__ */ jsxs("div", {
+					className: Summary_module_default.summaryContentLegalCaption,
+					children: [/* @__PURE__ */ jsx("p", { children: t(($) => $["summaryTaxExemptionLegalCaptionTitle"]) }), /* @__PURE__ */ jsxs("ul", { children: [
+						/* @__PURE__ */ jsx("li", { children: t(($) => $["summaryTaxExemptionLegalCaption_1"]) }),
+						/* @__PURE__ */ jsx("li", { children: t(($) => $["summaryTaxExemptionLegalCaption_2"]) }),
+						/* @__PURE__ */ jsx("li", { children: t(($) => $["summaryTaxExemptionLegalCaption_3"]) })
+					] })]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/utils/scrollToInvalidField.ts
+var INVALID_FIELD_SELECTOR = ".adyen-kyc-field--error, .adyen-kyc-label__text--error";
+var SCROLLABLE_OVERFLOW_VALUES = new Set([
+	"auto",
+	"scroll",
+	"overlay"
+]);
+var isWindow = (container) => container === window;
+var getInvalidFieldTarget = (element) => element.closest(".adyen-kyc-field") ?? element;
+var isCustomElement = (element) => element.tagName.includes("-");
+var queryInvalidField = (root) => {
+	const invalidField = root.querySelector(INVALID_FIELD_SELECTOR);
+	if (invalidField) return getInvalidFieldTarget(invalidField);
+	for (const element of Array.from(root.querySelectorAll("*")).filter(isCustomElement)) {
+		if (!element.shadowRoot) continue;
+		const shadowInvalidField = queryInvalidField(element.shadowRoot);
+		if (shadowInvalidField) return shadowInvalidField;
+	}
+	return null;
+};
+var isElementVisibleInContainer = (element, container) => {
+	const elementRect = element.getBoundingClientRect();
+	if (isWindow(container)) return elementRect.top >= 0 && elementRect.bottom <= window.innerHeight;
+	const containerRect = container.getBoundingClientRect();
+	return elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom;
+};
+var findScrollContainer = (element) => {
+	let parent = element.parentElement;
+	while (parent) {
+		const style = window.getComputedStyle(parent);
+		const canScroll = parent.scrollHeight > parent.clientHeight;
+		const hasScrollableOverflow = SCROLLABLE_OVERFLOW_VALUES.has(style.overflowY);
+		if (canScroll && hasScrollableOverflow) return parent;
+		parent = parent.parentElement;
+	}
+	return window;
+};
+var scrollElementIntoContainer = (element, container) => {
+	if (isWindow(container)) {
+		element.scrollIntoView({
+			behavior: "smooth",
+			block: "center"
+		});
+		return;
+	}
+	const elementRect = element.getBoundingClientRect();
+	const containerRect = container.getBoundingClientRect();
+	const offset = elementRect.top - containerRect.top - containerRect.height / 3;
+	container.scrollBy({
+		top: offset,
+		behavior: "smooth"
+	});
+};
+var scrollToInvalidField = () => {
+	const invalidField = queryInvalidField(document);
+	if (!invalidField) return;
+	const container = findScrollContainer(invalidField);
+	if (isElementVisibleInContainer(invalidField, container)) return;
+	scrollElementIntoContainer(invalidField, container);
+};
+//#endregion
+//#region src/hooks/useFormComposer.ts
+var logger$2 = createLogger();
+/**
+* The step we open to for editing an existing entity should be the summary if there are verification errors
+* Otherwise (including for a new entity), just show the first step
+*/
+var getOpeningStep = (forms, remediationActions) => {
+	if (remediationActions && Object.keys(remediationActions).length > 0) {
+		const allRemediationActions = Object.values(remediationActions).flat().filter((rem) => rem.forms?.length > 0);
+		if (allRemediationActions.length === 1 && allRemediationActions[0]?.forms.length === 1) {
+			const form = forms.find((form) => form?.formId === allRemediationActions[0]?.forms[0]);
+			if (form) return form;
+		}
+		return forms[forms.length - 1];
+	}
+	return forms[0];
+};
+var useFormComposer = ({ problems, navigationTrackingParams, forms, externalBackClick, onSubmit, triggerValidation }) => {
+	const userEvents = useAnalyticsContext();
+	const [shouldValidate, setShouldValidate] = useState$1(false);
+	const [activeForm, setActiveForm] = useState$1(forms[0]);
+	const isFormSummaryStep = (form) => form.formId === summaryStep.formId;
+	const getFormIndex = (formId) => forms.findIndex((form) => form.formId === formId);
+	const currentStep = getFormIndex(activeForm.formId);
+	const totalSteps = forms.length;
+	const isFinalStep = currentStep === totalSteps - 1;
+	const isFirstStep = currentStep === 0;
+	const firstStepId = forms[0]?.formId;
+	usePageLandedEvent(activeForm.formName);
+	const [oldForms, setOldForms] = useState$1(forms);
+	if (oldForms !== forms) {
+		setActiveForm((activeForm) => forms.find(({ formId }) => formId === activeForm.formId) ?? activeForm);
+		setOldForms(forms);
+	}
+	/**
+	* Opening step can be calculated once since the problems are already known on drop-in load
+	*/
+	const [oldFirstStepId, setOldFirstStepId] = useState$1(void 0);
+	if (oldFirstStepId !== firstStepId) {
+		/** TODO: need a better solution
+		* If firstStepId changes it means form configurations are being setup,
+		* not able to put forms as the dependency here as it also updates whenever validity changes
+		* should separate out forms into forms and validity
+		***/
+		setActiveForm(getOpeningStep(forms, problems?.remediationActions));
+		setOldFirstStepId(firstStepId);
+	}
+	const gotoFormByFormIndex = (nextFormIndex, currentForms) => {
+		setActiveForm(currentForms?.[nextFormIndex] ?? forms[nextFormIndex]);
+	};
+	/**
+	*  We often run into a situation where we want to navigate to a specific form immediately after
+	*  rearranging the forms in the flow.
+	*
+	*  The issue here is that the callback, (e.g. {@link IdVerificationMethod.handleVerifyByInvite})
+	*  has a reference only to the current forms, not what the forms will be post-rearrangement.
+	*  Hence, it is impossible to call {@link gotoFormByFormIndex} because we have no idea what the
+	*  eventual index of the form will be.
+	*
+	*  The solution: set a desired form ID, then resolve the navigation as part of the render
+	*  once {@link forms} contains it. The subsequent {@link gotoFormByFormIndex} will immediately
+	*  cancel the current render and trigger a new one.
+	*/
+	const [desiredFormId, setDesiredFormId] = useState$1();
+	if (desiredFormId) {
+		const targetFormIndex = forms.findIndex((form) => form.formId === desiredFormId);
+		if (targetFormIndex === -1) logger$2.warn(`Desired form ${desiredFormId} not present. \nCurrent forms: ${forms.map((f) => f.formId).join(", ")}`);
+		else {
+			setDesiredFormId(void 0);
+			gotoFormByFormIndex(targetFormIndex);
+		}
+	}
+	const gotoFormByFormId = (formId) => {
+		setDesiredFormId(formId);
+	};
+	const trackSubmitClick = () => {
+		trackNavigation({
+			userEvents,
+			actionType: "submit",
+			label: "submit",
+			additionalTrackingParams: navigationTrackingParams
+		});
+	};
+	const handleNextClick = async (updatedForms) => {
+		const currentForms = updatedForms ?? forms;
+		if (isFormSummaryStep(activeForm)) {
+			trackSubmitClick();
+			onSubmit();
+			return;
+		}
+		/**
+		* Returns validation result of async validators if any
+		*/
+		const isAsyncValidationValid = await triggerValidation?.(activeForm.formId) ?? true;
+		/**
+		* Checks if both static validations and asyncValidations pass
+		*/
+		if (!activeForm.isValid || !isAsyncValidationValid) {
+			/**
+			* shouldValidate is not required with useMultiForm
+			*/
+			setShouldValidate(true);
+			requestAnimationFrame(scrollToInvalidField);
+			trackNavigation({
+				userEvents,
+				actionType: "next",
+				label: "next",
+				returnValue: "validation error",
+				additionalTrackingParams: navigationTrackingParams
+			});
+			return;
+		}
+		if (isFinalStep) {
+			trackSubmitClick();
+			onSubmit();
+			return;
+		}
+		setShouldValidate(false);
+		const toFormIndex = currentStep + 1;
+		gotoFormByFormIndex(toFormIndex, currentForms);
+		trackNavigation({
+			userEvents,
+			actionType: "next",
+			toForm: currentForms[toFormIndex]?.formName,
+			label: "next",
+			returnValue: "success",
+			additionalTrackingParams: navigationTrackingParams
+		});
+	};
+	const handleBackClick = () => {
+		if (currentStep > 0) {
+			const toForm = forms[currentStep - 1];
+			setActiveForm(toForm);
+			trackNavigation({
+				userEvents,
+				actionType: "back",
+				toForm: toForm?.formName,
+				label: "back",
+				additionalTrackingParams: navigationTrackingParams
+			});
+		}
+	};
+	return {
+		handleBackClick: isFirstStep ? externalBackClick : handleBackClick,
+		handleNextClick,
+		gotoFormByFormIndex,
+		gotoFormByFormId,
+		activeForm,
+		shouldValidate,
+		setShouldValidate,
+		steps: {
+			current: currentStep,
+			total: totalSteps
+		}
+	};
+};
+//#endregion
+//#region src/hooks/useMultiForm/reducer.ts
+var hasValueChanged = (newData, prevData) => {
+	if (typeof newData === "object") return !objectsDeepEqual(newData, prevData);
+	return newData !== prevData;
+};
+/** Formats and validates a field */
+var processField = ({ key, value, formName, mode, defaultData, data, fieldContext, formatters, staticValidate }) => {
+	const formatterFn = formatters?.[key]?.formatter ? formatters[key]?.formatter : formatters?.[key];
+	const formattedValue = formatterFn && typeof formatterFn === "function" ? formatterFn(value, fieldContext) : value;
+	const fieldHasDefaultValue = key in (defaultData ?? {});
+	const fieldHasChanged = defaultData?.[key] !== value;
+	const validationResult = (fieldContext.state.obscuredFields?.includes(key) ? fieldHasChanged : fieldHasChanged || fieldHasDefaultValue) ? staticValidate({
+		key,
+		value: formattedValue,
+		mode,
+		formName
+	}, data, fieldContext) : new ValidationResult([{
+		isValid: true,
+		hasError: false
+	}]);
+	const asyncValidationResult = fieldContext.state?.asyncErrors?.[key];
+	/** Add any existing async validation result to validation result */
+	if (asyncValidationResult) validationResult.addError(asyncValidationResult);
+	return [formattedValue, validationResult];
+};
+/**
+* The function takes in the below params and spits out an initial state, by running the validations
+* across all forms and fields. It makes sure all validations are done and only sets the validity
+* instead of the errors, this is to avoid users seeing error immaturely on initial load.
+*
+* @param requiredFields
+* @param staticValidate
+* @param asyncValidate
+* @param defaultData
+* @param obscuredFields
+* @param optionalFields
+* @param trustedFields
+* @param fieldProblems
+* @param formatters
+* @param data
+*/
+function init({ requiredFields, staticValidate, defaultData, obscuredFields, optionalFields, trustedFields, fieldProblems, formatters, data, asyncErrors }) {
+	/**
+	* Fetches the validation result of a field in a form
+	* @param fieldKey
+	* @param formName
+	*/
+	const getProcessedState = (fieldKey, formName) => {
+		const [formattedValue, validationResult] = processField({
+			key: fieldKey,
+			value: data?.[formName]?.[fieldKey] ?? defaultData?.[formName]?.[fieldKey] ?? null,
+			mode: "blur",
+			formName,
+			formatters: formatters?.[formName],
+			defaultData: defaultData?.[formName],
+			data,
+			fieldContext: { state: {
+				data: data?.[formName],
+				obscuredFields: obscuredFields?.[formName],
+				optionalFields: optionalFields?.[formName],
+				trustedFields: trustedFields?.[formName],
+				requiredFields: requiredFields?.[formName],
+				asyncErrors: asyncErrors?.[formName]
+			} },
+			staticValidate
+		});
+		return {
+			valid: validationResult.isValid && !fieldProblems?.[formName]?.[fieldKey] || false,
+			errors: null,
+			data: formattedValue,
+			fieldProblems: fieldProblems?.[formName]?.[fieldKey]
+		};
+	};
+	/**
+	* requiredFields can be undefined if the configuration api call is not yet completed
+	* returned default state in this case
+	*/
+	if (!requiredFields) return {
+		data: defaultData,
+		errors: {},
+		fieldProblems: {},
+		valid: {},
+		requiredFields: {},
+		asyncErrors: {},
+		defaultData
+	};
+	/**
+	* Make sure forms containing only optional fields are also taken into account
+	*/
+	const formsForOptionalFields = Object.keys(optionalFields ?? {});
+	const formsForRequiredFields = Object.keys(requiredFields);
+	/**
+	* Visits every field and builds a state with the validity
+	*/
+	return Array.from(new Set([...formsForOptionalFields, ...formsForRequiredFields])).reduce((acc, formName) => {
+		const form = formName;
+		const optionalsFormFields = optionalFields?.[form] ?? [];
+		const requiredFormFields = requiredFields?.[form] ?? [];
+		const formState = [...optionalsFormFields, ...requiredFormFields].reduce((acc, field) => {
+			const { valid, errors, data, fieldProblems: processedFieldProblems } = getProcessedState(field, form);
+			return {
+				...acc,
+				data: {
+					...acc.data,
+					[field]: data
+				},
+				valid: {
+					...acc.valid,
+					[field]: valid
+				},
+				errors: {
+					...acc.errors,
+					[field]: errors
+				},
+				fieldProblems: {
+					...acc.fieldProblems,
+					...processedFieldProblems ? { [field]: processedFieldProblems } : {}
+				}
+			};
+		}, {});
+		return {
+			requiredFields,
+			data: {
+				...acc.data,
+				[formName]: formState.data
+			},
+			valid: {
+				...acc.valid,
+				[formName]: formState.valid
+			},
+			errors: {
+				...acc.errors,
+				[formName]: formState.errors
+			},
+			fieldProblems: {
+				...acc.fieldProblems,
+				[formName]: formState.fieldProblems
+			},
+			asyncErrors: { ...acc.asyncErrors },
+			obscuredFields,
+			optionalFields,
+			trustedFields,
+			defaultData
+		};
+	}, {
+		requiredFields,
+		data: {},
+		valid: {},
+		errors: {},
+		fieldProblems: {},
+		obscuredFields,
+		optionalFields,
+		trustedFields,
+		asyncErrors: {}
+	});
+}
+function reducer({ staticValidate, obscuredFields, optionalFields, trustedFields, formatters, defaultData }) {
+	return (state, { type, key, mode, value, formData, formName, selectedSchema, innerFormFields, requiredFields, optionalFields: newOptionalFields, asyncValidationResults }) => {
+		const clonedState = structuredClone(state);
+		switch (type) {
+			case "setData":
+				if (!key || !formName) return state;
+				clonedState.data[formName] ??= {};
+				clonedState.data[formName][key] = value;
+				return clonedState;
+			case "setFormData": {
+				if (!formName || !formData) return state;
+				const formRequiredFields = clonedState.requiredFields?.[formName] ?? [];
+				const formOptionalFields = clonedState.optionalFields?.[formName] ?? [];
+				const allowedFields = [...formRequiredFields, ...formOptionalFields];
+				const filteredUpdates = {};
+				for (const formDataKey in formData) if (allowedFields.includes(formDataKey)) filteredUpdates[formDataKey] = formData[formDataKey];
+				clonedState.data[formName] = filteredUpdates;
+				const formValidity = allowedFields.reduce((acc, field) => {
+					const [, validation] = processField({
+						key: field,
+						value: filteredUpdates[field],
+						mode: "blur",
+						formName,
+						defaultData: defaultData?.[formName],
+						data: clonedState.data,
+						formatters: formatters?.[formName],
+						fieldContext: { state: {
+							data: clonedState?.data?.[formName],
+							obscuredFields: obscuredFields?.[formName],
+							optionalFields: optionalFields?.[formName],
+							trustedFields: trustedFields?.[formName],
+							errors: clonedState.errors?.[formName],
+							valid: clonedState.valid?.[formName],
+							fieldProblems: clonedState.fieldProblems?.[formName],
+							asyncErrors: clonedState.asyncErrors?.[formName]
+						} },
+						staticValidate
+					});
+					return {
+						...acc,
+						[field]: validation.isValid
+					};
+				}, {});
+				clonedState.data[formName] = filteredUpdates;
+				clonedState.valid[formName] = formValidity;
+				return clonedState;
+			}
+			case "setValid":
+				if (!key || !formName || clonedState.valid[formName]?.[key] === value) return state;
+				clonedState.valid[formName] ??= {};
+				clonedState.valid[formName][key] = !!value;
+				return clonedState;
+			case "setErrors":
+				if (!key || !formName) return state;
+				clonedState.errors[formName] ??= {};
+				clonedState.errors[formName][key] = value;
+				return clonedState;
+			case "setRequiredFields": {
+				/**
+				* If defaultData changes reset the data in the form to new defaultData
+				* Fetching documents are bit delayed, this accomodates that delay
+				*/
+				const hasDefaultDataChanged = !objectsDeepEqual(defaultData, state.defaultData);
+				if (objectsDeepEqual(requiredFields, clonedState.requiredFields) && objectsDeepEqual(newOptionalFields, clonedState.optionalFields) && !hasDefaultDataChanged) return state;
+				const updatedData = hasDefaultDataChanged ? defaultData : structuredClone(clonedState.data);
+				/**
+				* When schema changes without a defaultData refresh, re-add any fields that were
+				* previously removed and are now reintroduced from the local stash.
+				*
+				* This preserves user-entered values across dynamic required/optional transitions,
+				* such as when rule-driven fields are temporarily hidden and then shown again.
+				*/
+				if (!hasDefaultDataChanged && updatedData) for (const formName in requiredFields) {
+					const form = formName;
+					const prevFields = [...clonedState.requiredFields?.[form] ?? [], ...clonedState.optionalFields?.[form] ?? []];
+					[...requiredFields?.[form] ?? [], ...newOptionalFields?.[form] ?? []].filter((field) => !prevFields.includes(field)).forEach((field) => {
+						const currentValue = updatedData?.[form]?.[field];
+						const localValue = clonedState.local?.[form]?.data?.[field];
+						if (typeof currentValue === "undefined" && typeof localValue !== "undefined") {
+							if (!updatedData[form]) return;
+							updatedData[form][field] = localValue;
+						}
+					});
+				}
+				const newState = init({
+					requiredFields,
+					data: updatedData,
+					fieldProblems: clonedState.fieldProblems,
+					obscuredFields,
+					optionalFields: newOptionalFields,
+					trustedFields,
+					staticValidate,
+					defaultData
+				});
+				if (hasDefaultDataChanged) return newState;
+				/**
+				* Persist values of fields that are being removed from the active schema into local.
+				*
+				* These values are later used to restore data for reintroduced fields in subsequent
+				* schema transitions, avoiding silent data loss during dynamic form updates.
+				*/
+				const local = Object.keys(requiredFields ?? {}).reduce((acc, formName) => {
+					const form = formName;
+					const prevFields = [...clonedState.requiredFields?.[form] ?? [], ...clonedState.optionalFields?.[form] ?? []];
+					const nextFields = [...requiredFields?.[form] ?? [], ...newOptionalFields?.[form] ?? []];
+					const removedFields = prevFields.filter((field) => !nextFields.includes(field));
+					if (!removedFields.length) {
+						if (clonedState.local?.[form]) return {
+							...acc,
+							[form]: clonedState.local[form]
+						};
+						return acc;
+					}
+					const localFormData = {
+						...clonedState.local?.[form]?.data ?? {},
+						...removedFields.reduce((fieldAcc, field) => {
+							const value = clonedState.data?.[form]?.[field];
+							if (typeof value !== "undefined") return {
+								...fieldAcc,
+								[field]: value
+							};
+							return fieldAcc;
+						}, {})
+					};
+					return {
+						...acc,
+						[form]: {
+							...clonedState.local?.[form] ?? {},
+							data: localFormData
+						}
+					};
+				}, {});
+				return {
+					...newState,
+					local
+				};
+			}
+			case "setInnerFormRequiredFields": {
+				/**
+				* This sets the requiredFields in a single form.
+				* Ideally this should not be used anywhere, as this goes against the idea of having all
+				* the rules of calculating requiredFields in a single place. keeping this in case we have
+				* any exceptional scenarios where this would be required. Can be removed once all forms
+				* migrated to useMultiform
+				*/
+				if (!innerFormFields || !formName) return state;
+				const requiredFields = {
+					...clonedState.requiredFields,
+					[formName]: innerFormFields
+				};
+				const defaultState = init({
+					requiredFields,
+					defaultData,
+					fieldProblems: clonedState.fieldProblems,
+					obscuredFields,
+					optionalFields,
+					trustedFields,
+					staticValidate,
+					data: defaultData
+				});
+				const removedFields = clonedState.optionalFields?.[formName].length ? [...(clonedState.requiredFields?.[formName] ?? []).filter((field) => !innerFormFields.includes(field)), ...clonedState.optionalFields[formName].filter((field) => !optionalFields?.[formName].includes(field))] : clonedState.requiredFields?.[formName].filter((field) => !innerFormFields.includes(field));
+				const newFields = optionalFields?.[formName].length ? [...innerFormFields.filter((field) => !clonedState.requiredFields?.[formName].includes(field)), ...(optionalFields[formName] ?? []).filter((field) => !clonedState.optionalFields?.[formName].includes(field))] : innerFormFields.filter((field) => !clonedState.requiredFields?.[formName].includes(field));
+				const formLocal = {
+					data: omitKeys(clonedState.data?.[formName], newFields),
+					errors: omitKeys(clonedState.errors?.[formName], newFields),
+					valid: omitKeys(clonedState.valid?.[formName], newFields),
+					fieldProblems: omitKeys(clonedState.fieldProblems?.[formName], newFields)
+				};
+				const local = {
+					...clonedState.local,
+					[formName]: formLocal
+				};
+				const updatedFormData = addKeys(omitKeys(clonedState.data?.[formName], removedFields), newFields, null, defaultState.data?.[formName], clonedState.local?.[formName].data);
+				const updatedData = {
+					...clonedState.data,
+					[formName]: updatedFormData
+				};
+				const updatedFormValidity = addKeys(omitKeys(clonedState.valid?.[formName], removedFields), newFields, false, defaultState.valid?.[formName], clonedState.local?.[formName].valid);
+				const updatedValidity = {
+					...clonedState.valid,
+					[formName]: updatedFormValidity
+				};
+				const updatedFormErrors = addKeys(omitKeys(clonedState.errors?.[formName], removedFields), newFields, null, defaultState.errors?.[formName], clonedState.local?.[formName].errors);
+				const updatedErrors = {
+					...clonedState.errors,
+					[formName]: updatedFormErrors
+				};
+				const updatedFormFieldProblems = addKeys(omitKeys(clonedState.fieldProblems?.[formName], removedFields), newFields, false, defaultState.fieldProblems?.[formName], clonedState.local?.[formName].fieldProblems);
+				return {
+					requiredFields,
+					data: updatedData,
+					valid: updatedValidity,
+					errors: updatedErrors,
+					fieldProblems: {
+						...clonedState.fieldProblems,
+						[formName]: updatedFormFieldProblems
+					},
+					asyncErrors: clonedState.asyncErrors,
+					optionalFields,
+					trustedFields,
+					local,
+					defaultData
+				};
+			}
+			case "updateField": {
+				/**
+				* Called when a field value changes in form
+				* Validates the field and updates data, validity, error in the state for the field
+				*/
+				if (!key || !mode || !formName) return state;
+				const updatedData = {
+					...clonedState.data,
+					[formName]: {
+						...clonedState.data?.[formName],
+						[key]: value
+					}
+				};
+				/**
+				* Wipe async errors for the field if value has been changed
+				*/
+				const updatedAsyncErrors = hasValueChanged(value, clonedState.data?.[formName]?.[key]) ? {
+					...clonedState.asyncErrors,
+					[formName]: {
+						...clonedState.asyncErrors?.[formName],
+						[key]: null
+					}
+				} : clonedState.asyncErrors;
+				const [formattedValue, validation] = processField({
+					key,
+					value,
+					mode,
+					formName,
+					defaultData: defaultData?.[formName],
+					data: updatedData,
+					formatters: formatters?.[formName],
+					fieldContext: { state: {
+						data: clonedState.data?.[formName],
+						obscuredFields: obscuredFields?.[formName],
+						optionalFields: optionalFields?.[formName],
+						trustedFields: trustedFields?.[formName],
+						errors: clonedState.errors[formName],
+						valid: clonedState.valid[formName],
+						fieldProblems: clonedState.fieldProblems[formName],
+						asyncErrors: updatedAsyncErrors[formName]
+					} },
+					staticValidate
+				});
+				const clearFieldProblems = (clonedState.data?.[formName])?.[key] !== formattedValue;
+				return {
+					...clonedState,
+					data: {
+						...clonedState.data,
+						[formName]: {
+							...clonedState.data?.[formName],
+							[key]: formattedValue
+						}
+					},
+					asyncErrors: updatedAsyncErrors,
+					errors: {
+						...clonedState.errors,
+						[formName]: {
+							...clonedState.errors[formName],
+							[key]: validation.getError() ?? null
+						}
+					},
+					valid: {
+						...clonedState.valid,
+						[formName]: {
+							...clonedState?.valid?.[formName],
+							[key]: (validation.isValid && !clonedState.fieldProblems?.[formName]?.[key]) ?? false
+						}
+					},
+					fieldProblems: {
+						...clonedState.fieldProblems,
+						[formName]: {
+							...clonedState.fieldProblems[formName],
+							...!clearFieldProblems && clonedState.fieldProblems?.[formName]?.[key] ? { [key]: true } : {}
+						}
+					}
+				};
+			}
+			case "validateForm": {
+				/**
+				* Called when triggerValidation('formName') is called, validates all the fields in the form
+				* and populates the errors in the state
+				*/
+				if (!formName) return state;
+				const formFields = clonedState.requiredFields?.[formName];
+				if (!formFields) return state;
+				const formState = (selectedSchema || formFields).reduce((acc, field) => {
+					const formData = clonedState.data?.[formName];
+					const [formattedValue, validation] = processField({
+						key: field,
+						mode: "blur",
+						value: formData?.[field] ?? null,
+						formName,
+						defaultData: defaultData?.[formName],
+						data: clonedState.data,
+						formatters: formatters?.[formName],
+						fieldContext: { state: {
+							data: clonedState.data?.[formName],
+							obscuredFields: obscuredFields?.[formName],
+							optionalFields: optionalFields?.[formName],
+							trustedFields: trustedFields?.[formName],
+							errors: clonedState.errors[formName],
+							valid: clonedState.valid[formName],
+							fieldProblems: clonedState.fieldProblems[formName],
+							asyncErrors: clonedState.asyncErrors[formName]
+						} },
+						staticValidate
+					});
+					const clearFieldProblems = (clonedState?.data?.[formName])?.[field] !== formattedValue;
+					const fieldAsyncValidationResult = asyncValidationResults?.[field];
+					return {
+						data: formData,
+						asyncErrors: {
+							...acc.asyncErrors,
+							[field]: fieldAsyncValidationResult?.getError() ?? null
+						},
+						errors: {
+							...acc.errors,
+							[field]: validation.getError() ?? fieldAsyncValidationResult?.getError() ?? null
+						},
+						valid: {
+							...acc.valid,
+							[field]: validation.isValid && (fieldAsyncValidationResult?.isValid ?? true) && !clonedState.fieldProblems[formName][field]
+						},
+						fieldProblems: {
+							...acc.fieldProblems,
+							...!clearFieldProblems && acc.fieldProblems?.[field] ? { [field]: true } : {}
+						}
+					};
+				}, {});
+				return {
+					...clonedState,
+					errors: {
+						...clonedState.errors,
+						[formName]: formState.errors
+					},
+					asyncErrors: {
+						...clonedState.asyncErrors,
+						[formName]: formState.asyncErrors
+					},
+					valid: {
+						...clonedState.valid,
+						[formName]: formState.valid
+					},
+					fieldProblems: {
+						...clonedState.fieldProblems,
+						[formName]: formState.fieldProblems
+					}
+				};
+			}
+			default: throw new Error("Undefined useForm action");
+		}
+	};
+}
+//#endregion
+//#region src/hooks/useMultiForm/useMultiFormAsyncValidator.ts
+var logger$1 = createLogger();
+/**
+* Returns
+* - triggerAsyncValidation function which can execute the async validation for a field and populate the sync validation results
+* - asyncValidationResult state which keeps track of async validations of all fields.
+* @param asyncRules
+*/
+var useMultiFormAsyncValidator = (asyncRules) => {
+	const validResult = {
+		isValid: true,
+		hasError: false
+	};
+	const triggerAsyncValidation = useCallback$1(async (field, formName, data) => {
+		if (!asyncRules) return new ValidationResult([validResult]);
+		const rule = typeof asyncRules === "function" ? asyncRules(data)[formName]?.[field] : asyncRules[formName][field];
+		const value = data?.[formName]?.[field];
+		if (!rule || !value) return new ValidationResult([validResult]);
+		const isValid = await rule.asyncValidate(value).catch(logger$1.error);
+		if (isValid === false) return new ValidationResult([{
+			isValid,
+			errorMessage: typeof rule.errorMessage === "function" ? rule.errorMessage(value) : rule.errorMessage,
+			hasError: !isValid
+		}]);
+		return new ValidationResult([validResult]);
+	}, [asyncRules]);
+	const triggerAsyncFormValidation = async (formName, state, selectedSchema) => {
+		const fields = selectedSchema ?? state.requiredFields?.[formName];
+		if (!fields?.length) return { isValid: true };
+		const asyncValidationResults = await fields.reduce(async (accPromise, fieldName) => {
+			const acc = await accPromise;
+			const asyncValidationResult = await triggerAsyncValidation(fieldName, formName, state.data);
+			return {
+				...acc,
+				[fieldName]: asyncValidationResult
+			};
+		}, Promise.resolve({}));
+		const isValid = Object.values(asyncValidationResults).every((validationResult) => validationResult.isValid);
+		return {
+			...asyncValidationResults,
+			isValid
+		};
+	};
+	return { triggerAsyncFormValidation };
+};
+//#endregion
+//#region src/utils/validation/commonValidators.ts
+var isTruthyValidator = {
+	validate: (value) => !!value,
+	modes: ["blur"],
+	errorMessage: "fieldIsRequired"
+};
+var isNotEmptyValidator = {
+	validate: (value) => !isEmpty(value),
+	modes: ["blur"],
+	errorMessage: "fieldIsRequired"
+};
+//#endregion
+//#region src/hooks/useMultiForm/useMultiFormStaticValidator.ts
+var useMultiFormStaticValidator = (rules) => {
+	const getRulesForField = useCallback$1((field, form, data) => {
+		const fallbackRule = {
+			validate: () => true,
+			modes: ["blur", "input"]
+		};
+		if (!form) return [fallbackRule];
+		const fieldRules = typeof rules === "function" ? rules(data)?.[form]?.[field] ?? [fallbackRule] : rules?.[form]?.[field] ?? [fallbackRule];
+		return Array.isArray(fieldRules) ? fieldRules : [fieldRules];
+	}, [rules]);
+	return { triggerStaticValidation: useCallback$1(({ key, value, mode = "blur", formName }, data, context) => {
+		const fieldRules = getRulesForField(key, formName, data);
+		const isFieldOptional = !!context?.state.optionalFields?.includes(key);
+		const isFieldObscured = !!context?.state.obscuredFields?.includes(key);
+		if (!isFieldOptional) fieldRules.unshift(isNotEmptyValidator);
+		return new ValidationResult(fieldRules.map((rule) => {
+			const shouldValidate = rule.modes.includes(mode) && !isFieldObscured;
+			const isValid = isFieldOptional && isEmpty(value) ? true : rule.validate(value, context);
+			return {
+				isValid,
+				errorMessage: typeof rule.errorMessage === "function" ? rule.errorMessage(value, context) : rule.errorMessage,
+				hasError: shouldValidate && !isValid
+			};
+		}));
+	}, [getRulesForField]) };
+};
+//#endregion
+//#region src/hooks/useMultiForm/useMultiForm.ts
+function useMultiForm({ defaultData, rules, asyncRules, fieldProblems, allFields, requiredFields, obscuredFields, optionalFields, trustedFields, formatters }) {
+	const { triggerStaticValidation } = useMultiFormStaticValidator(rules);
+	const { triggerAsyncFormValidation } = useMultiFormAsyncValidator(asyncRules);
+	const getRequiredFields = useMemo$1(() => typeof requiredFields === "function" ? requiredFields : () => requiredFields, [requiredFields]);
+	const getSchema = useMemo$1(() => getRequiredFields(defaultData), [defaultData, getRequiredFields]);
+	const getReducer = useCallback$1(() => reducer({
+		staticValidate: triggerStaticValidation,
+		defaultData,
+		obscuredFields,
+		optionalFields,
+		trustedFields,
+		formatters
+	}), [
+		triggerStaticValidation,
+		obscuredFields,
+		optionalFields,
+		trustedFields,
+		formatters,
+		defaultData
+	]);
+	const initialData = useMemo$1(() => ({
+		requiredFields: getSchema,
+		defaultData,
+		fieldProblems,
+		obscuredFields,
+		optionalFields,
+		trustedFields,
+		formatters,
+		staticValidate: triggerStaticValidation,
+		data: defaultData
+	}), [
+		getSchema,
+		defaultData,
+		fieldProblems,
+		obscuredFields,
+		optionalFields,
+		trustedFields,
+		formatters,
+		triggerStaticValidation
+	]);
+	const [state, dispatch] = useReducer(getReducer(), initialData, init);
+	const isValid = useMemo$1(() => {
+		const formsForOptionalFields = Object.keys(state.optionalFields ?? {});
+		const formsForRequiredFields = Object.keys(state.requiredFields ?? {});
+		return Array.from(new Set([...formsForOptionalFields, ...formsForRequiredFields])).reduce((acc, formName) => {
+			const form = formName;
+			const optionalsFormFields = state.optionalFields?.[form] ?? [];
+			const requiredFormFields = state.requiredFields?.[form] ?? [];
+			const formFields = [...optionalsFormFields, ...requiredFormFields];
+			const formValidity = state.valid[formName] ?? {};
+			return {
+				...acc,
+				[formName]: Object.entries(formValidity)?.every(([field, valid]) => formFields.includes(field) ? valid : true)
+			};
+		}, {});
+	}, [state.requiredFields, state.valid]);
+	const getTargetValue = useCallback$1((formName, key, e) => {
+		if (!e?.target) return e;
+		if (e.target.type === "checkbox") return !state.data?.[formName][key];
+		return e.target.value;
+	}, [state.data]);
+	const setErrors = useCallback$1((formName, key, value) => {
+		dispatch({
+			type: "setErrors",
+			key,
+			value,
+			formName
+		});
+	}, []);
+	const setValid = useCallback$1((formName, key, value) => {
+		dispatch({
+			type: "setValid",
+			key,
+			value,
+			formName
+		});
+	}, []);
+	const setData = useCallback$1((formName, key, value) => {
+		dispatch({
+			type: "setData",
+			key,
+			value,
+			formName
+		});
+	}, []);
+	const setFormData = useCallback$1((formName, formData) => {
+		dispatch({
+			type: "setFormData",
+			formName,
+			formData
+		});
+	}, []);
+	const handleChangeFor = useCallback$1((formName, key, mode = "blur") => (e) => {
+		dispatch({
+			type: "updateField",
+			key,
+			value: getTargetValue(formName, key, e),
+			mode,
+			formName
+		});
+	}, [getTargetValue]);
+	const triggerValidation = useCallback$1(async (formName, selectedSchema) => {
+		const asyncValidationResults = await triggerAsyncFormValidation(formName, state, selectedSchema);
+		dispatch({
+			type: "validateForm",
+			formName,
+			selectedSchema,
+			asyncValidationResults
+		});
+		return asyncValidationResults.isValid;
+	}, [state, triggerAsyncFormValidation]);
+	const resetToDefaultData = useCallback$1(() => {
+		if (!getSchema) return;
+		Object.entries(getSchema).forEach(([formName]) => {
+			const form = formName;
+			const formData = defaultData?.[form];
+			getSchema[form].forEach((field) => {
+				if (!formData || typeof formData[field] !== "undefined") {
+					handleChangeFor(form, field)(formData);
+					return;
+				}
+				setValid(form, field, false);
+				setErrors(form, field, null);
+				setData(form, field, formData[field]);
+			});
+		});
+	}, [
+		defaultData,
+		getSchema,
+		handleChangeFor,
+		setData,
+		setErrors,
+		setValid
+	]);
+	useEffect$1(() => {
+		const requiredFields = getRequiredFields(state.data);
+		if (!requiredFields) return;
+		dispatch({
+			type: "setRequiredFields",
+			requiredFields,
+			defaultData,
+			optionalFields
+		});
+	}, [
+		getRequiredFields,
+		state.data,
+		defaultData,
+		optionalFields
+	]);
+	return {
+		setData,
+		setFormData,
+		setValid,
+		setErrors,
+		handleChangeFor,
+		triggerValidation,
+		resetToDefaultData,
+		isValid,
+		allFields,
+		requiredFields: state.requiredFields,
+		optionalFields: state.optionalFields,
+		trustedFields: state.trustedFields,
+		obscuredFields: state.obscuredFields,
+		valid: state.valid,
+		errors: state.errors,
+		data: state.data,
+		fieldProblems: state.fieldProblems,
+		defaultData,
+		asyncErrors: state.asyncErrors
+	};
+}
+//#endregion
+//#region src/context/FormRouterContext/FormRouterContextProvider.tsx
+var logger = createLogger();
+function FormRouterContextProvider({ children, forms, setFormIndex, goToFormByFormId }) {
+	const fieldActionsRef = useRef$1({});
+	const registerFieldAction = useCallback$1((fieldName, action) => {
+		fieldActionsRef.current[fieldName] = action;
+	}, []);
+	const unregisterFieldAction = useCallback$1((fieldName) => {
+		delete fieldActionsRef.current[fieldName];
+	}, []);
+	const getFieldAction = useCallback$1((fieldName) => {
+		return fieldActionsRef.current[fieldName];
+	}, []);
+	const contextValue = useMemo$1(() => ({
+		setFormIndex,
+		goToFormByFormId,
+		goToFormByFieldName: (fieldName) => {
+			if (fieldName === "idDocument") fieldName = "idVerificationMethod";
+			const formIndex = forms.findIndex((form) => form?.fields?.some((field) => field === fieldName));
+			if (formIndex > -1) setFormIndex(formIndex);
+			else logger.error("No form was found to have that field so form navigation failed.");
+		},
+		registerFieldAction,
+		unregisterFieldAction,
+		getFieldAction
+	}), [
+		setFormIndex,
+		goToFormByFormId,
+		registerFieldAction,
+		unregisterFieldAction,
+		getFieldAction,
+		forms
+	]);
+	return /* @__PURE__ */ jsx(FormRouterContext.Provider, {
+		value: contextValue,
+		children
+	});
+}
+var FormFlow_module_default = {
+	"form-flow": "_form-flow_lhddu_1",
+	formFlow: "_form-flow_lhddu_1",
+	"form-flow-content": "_form-flow-content_lhddu_9",
+	formFlowContent: "_form-flow-content_lhddu_9",
+	"form-flow-footer": "_form-flow-footer_lhddu_30",
+	formFlowFooter: "_form-flow-footer_lhddu_30",
+	"form-flow-footer-border": "_form-flow-footer-border_lhddu_45",
+	formFlowFooterBorder: "_form-flow-footer-border_lhddu_45",
+	"form-flow-actions": "_form-flow-actions_lhddu_49",
+	formFlowActions: "_form-flow-actions_lhddu_49",
+	"form-flow-primary-actions": "_form-flow-primary-actions_lhddu_56",
+	formFlowPrimaryActions: "_form-flow-primary-actions_lhddu_56"
+};
+//#endregion
+//#region src/components/Shared/FormFlow/FormFlow.tsx
+var FormFlow = ({ asModal = false, children, currentStep = 0, disableBackButton, disableNextButton, nextButtonLoading = false, forms, activeForm, gotoFormByFormIndex, gotoFormByFormId, handleBackClick, handleCancelClick, handleNextClick, loadingStatus, summary, summaryComponent, totalSteps = 1 }) => {
+	const contentRef = useRef$1(null);
+	const userEvents = useAnalyticsContext();
+	const { t } = useTranslation("common");
+	const [isConfirmPresented, setIsConfirmPresented] = useState$1(false);
+	const [isSubmitting, setIsSubmitting] = useState$1(false);
+	const isActionDisabled = isSubmitting || isConfirmPresented || loadingStatus === "loading";
+	const hasBackButton = !!handleBackClick;
+	const hasCancelButton = !!handleCancelClick;
+	const isFirstStep = currentStep === 0;
+	const isLastStep = currentStep === totalSteps - 1;
+	const isSingleStepForm = totalSteps < 2;
+	const progress = Math.floor(currentStep / (totalSteps - 1) * 100);
+	const scrollToTop = () => {
+		if (contentRef.current) contentRef.current.scroll({
+			top: 0,
+			behavior: "smooth"
+		});
+	};
+	const handleSubmit = () => {
+		setIsSubmitting(true);
+		Promise.resolve(handleNextClick()).then(() => {
+			setIsSubmitting(false);
+			scrollToTop();
+		});
+	};
+	const handleNext = () => {
+		scrollToTop();
+		handleNextClick();
+	};
+	const handleBack = () => {
+		scrollToTop();
+		handleBackClick?.();
+	};
+	const handleDismiss = () => {
+		if (!hasCancelButton) return;
+		setIsConfirmPresented(true);
+	};
+	const handleCancelDismiss = () => {
+		userEvents.addPageEvent("Closed modal", {
+			actionType: "close",
+			label: "cancel"
+		});
+		setIsConfirmPresented(false);
+	};
+	const handleConfirmDismiss = () => {
+		userEvents.addPageEvent("Clicked button", {
+			actionType: "navigate",
+			label: "leave"
+		});
+		setIsConfirmPresented(false);
+		handleCancelClick?.();
+	};
+	const footerClassName = cx(FormFlow_module_default.formFlowFooter, { [FormFlow_module_default.formFlowFooterBorder]: isSingleStepForm });
+	return /* @__PURE__ */ jsxs(MaybeModal, {
+		inline: !asModal,
+		onClose: handleDismiss,
+		size: "large",
+		showCloseButton: hasCancelButton,
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: contentRef,
+			className: FormFlow_module_default.formFlow,
+			"data-form-valid": activeForm.isValid,
+			"data-testid": "form-flow",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: FormFlow_module_default.formFlowContent,
+				children: /* @__PURE__ */ jsx(LoaderWrapper, {
+					status: loadingStatus,
+					formOpacityWhenLoading: 0,
+					loaderSize: "large",
+					children: /* @__PURE__ */ jsx(FormRouterContextProvider, {
+						forms,
+						setFormIndex: gotoFormByFormIndex,
+						goToFormByFormId: gotoFormByFormId,
+						children: isLastStep ? summaryComponent ? summaryComponent : summary !== void 0 ? /* @__PURE__ */ jsx(Summary, {
+							...summary,
+							forms,
+							gotoForm: gotoFormByFormIndex
+						}) : children : children
+					})
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: footerClassName,
+				children: [!isSingleStepForm && /* @__PURE__ */ jsx(ProgressBar, {
+					ariaLabel: t(($) => $["progress"]),
+					progress
+				}), /* @__PURE__ */ jsxs("div", {
+					className: FormFlow_module_default.formFlowActions,
+					children: [
+						isFirstStep && hasCancelButton && /* @__PURE__ */ jsx(Button, {
+							disabled: isActionDisabled || disableBackButton,
+							onClick: handleDismiss,
+							variant: "secondary",
+							children: t(($) => $["cancel"])
+						}),
+						!isFirstStep && hasBackButton && /* @__PURE__ */ jsx(Button, {
+							disabled: isActionDisabled || disableBackButton,
+							icon: "chevron-left",
+							onClick: handleBack,
+							variant: "secondary",
+							children: t(($) => $["back"])
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: FormFlow_module_default.formFlowPrimaryActions,
+							children: isLastStep ? /* @__PURE__ */ jsx(Button, {
+								onClick: handleSubmit,
+								loading: isSubmitting,
+								children: t(($) => $["submit"])
+							}) : /* @__PURE__ */ jsx(Button, {
+								onClick: handleNext,
+								disabled: isActionDisabled || disableNextButton,
+								loading: nextButtonLoading,
+								children: t(($) => $["continue"])
+							})
+						})
+					]
+				})]
+			})]
+		}), isConfirmPresented && /* @__PURE__ */ jsx(Confirm, {
+			confirmText: t(($) => $["leave"]),
+			description: t(($) => $["unsavedChangesDescription"]),
+			onCancel: handleCancelDismiss,
+			onConfirm: handleConfirmDismiss,
+			title: t(($) => $["unsavedChanges"])
+		})]
+	});
+};
+//#endregion
+//#region src/utils/dropinUtils.ts
+/**
+* @@description Based requiredfields and optionalFields determine what forms need to be shown and add a summaryStep in the dropin
+*
+* @param forms
+* @param requiredFields
+* @param optionalFields
+* @param skipSummary
+*/
+var getRequiredForms = (forms, requiredFields, optionalFields, skipSummary) => {
+	const reasons = [];
+	const requiredForms = Object.values(forms).filter(({ formId }) => {
+		if (requiredFields || optionalFields) {
+			const hasRequired = Boolean(requiredFields?.[formId]?.length);
+			const hasOptional = Boolean(optionalFields?.[formId]?.length);
+			const isIncluded = hasRequired || hasOptional;
+			const inclusionReasons = [];
+			if (hasRequired) inclusionReasons.push("has required fields");
+			if (hasOptional) inclusionReasons.push("has optional fields");
+			if (isIncluded) reasons.push(`Form '${formId}': INCLUDED (${inclusionReasons.join(" & ")})`);
+			else reasons.push(`Form '${formId}': EXCLUDED (no required or optional fields)`);
+			return isIncluded;
+		}
+		reasons.push(`Form '${formId}': INCLUDED (no required/optional fields check)`);
+		return true;
+	});
+	formDebugInfo.value = {
+		...formDebugInfo.value,
+		__FORMS__: {
+			status: "INFO",
+			reasons
+		}
+	};
+	if (skipSummary) return requiredForms;
+	return [...requiredForms, summaryStep];
+};
+/**
+* @description Based on validity of fields from formValidity and existence of validationErrors/Verification errors from backend determine whether the forms needs to be shown as valid or not
+*
+* @param forms
+* @param formValidity
+* @param problems
+*/
+var addValidityToForms = (forms, formValidity, problems) => forms.map(({ formId, formName, fields }) => ({
+	formId,
+	formName,
+	fields,
+	isValid: formValidity?.[formId] ?? false,
+	hasServerValidationErrors: Boolean(problems?.validationErrors?.[formId])
+}));
+//#endregion
+//#region src/context/FormContext/useFormContext.ts
+function useFormContext() {
+	return useContext$1(FormContext);
+}
+//#endregion
+//#region src/components/Shared/fields/CountryField/CountryField.tsx
+var COUNTRY_FIELD = ["country"];
+function CountryField({ name = "country", data, valid, errors, labels, readonly, handleChangeFor, helperText, allowedCountries, handleBlur }) {
+	const { t } = useTranslation("common");
+	const { dataset: countriesFromApi } = useDataset(datasetIdentifier.country);
+	const countries = useMemo$1(() => countriesFromApi.filter((country) => allowedCountries ? allowedCountries.includes(country.id) : true), [allowedCountries, countriesFromApi]);
+	return /* @__PURE__ */ jsx(Field, {
+		name,
+		label: labels?.country || t(($) => $["country"]),
+		errorMessage: errors.country,
+		isValid: valid.country,
+		helper: helperText,
+		dataTestId: "country",
+		children: (childProps) => /* @__PURE__ */ jsx(Select, {
+			...childProps,
+			name,
+			placeholder: t(($) => $["selectCountryRegion"]),
+			selected: data.country,
+			items: countries,
+			readonly: (countries.length === 1 || readonly) && !!data,
+			onChange: handleChangeFor("country"),
+			onBlur: handleBlur
+		})
+	});
+}
+//#endregion
+export { FormContextProvider as C, trackNavigation as S, getRoleName as _, getRequiredForms as a, createFormUtils as b, useMultiForm as c, useFormComposer as d, Summary as f, Summary_module_default as g, summaryItem as h, addValidityToForms as i, isNotEmptyValidator as l, preTranslatedSummaryItem as m, CountryField as n, FormFlow as o, summaryStep as p, useFormContext as r, FormFlow_module_default as s, COUNTRY_FIELD as t, isTruthyValidator as u, getRoleTagVariant as v, mergeFieldMetadataIntoProps as x, roleMetadata as y };