@incodetech/web 2.1.1 → 2.2.0-rc.0

package/dist/phone/phone.es.js

@@ -1,14 +1,12 @@
-import { n as useTranslation } from "../i18n-CU4xq8qC.js";
-import { h as q, v as u } from "../vendor-preact-DThS2ZQ_.js";
-import { c as useModuleTerminalCallbacks, s as isTerminalModuleState, u as useManager } from "../hooks-CNu7o-v8.js";
-import { t as IncodeComponent } from "../incodeComponent-CfzJGETt.js";
-import { r as Spacer } from "../loadingIcon-B0ysgiNq.js";
-import { t as Page } from "../page-DidH_RkX.js";
-import { t as Button } from "../button-Dz6AsbmF.js";
-import { t as OtpInput } from "../otpInput-CnDc6pQm.js";
-import { t as Checkbox } from "../checkbox-1wUHSoaK.js";
-import { t as PhoneInputComposed } from "../phoneInputComposed-DMiXfF-1.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-B-4_3JrK.js";
+import { i as useTranslation } from "../uiConfig-B5ASPUL4.js";
+import { h as q, v as u } from "../vendor-preact-mvwZ8mJj.js";
+import { _ as useModuleTerminalCallbacks, g as isTerminalModuleState, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, y as useManager } from "../incodeComponent-K9ZWg302.js";
+import { t as Spacer } from "../spacer-CDlQd12V.js";
+import { r as Button } from "../incode-logo-rGFjZHqi.js";
+import { t as OtpInput } from "../otpInput-D5dLXrmC.js";
+import { t as Checkbox } from "../checkbox-C38Elx0O.js";
+import { t as PhoneInputComposed } from "../phoneInputComposed-CeVWTS_O.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-CcLzar_X.js";
 import { createPhoneManager } from "@incodetech/core/phone";
 //#region src/modules/phone/phone.tsx
 /**
@@ -150,6 +148,8 @@ var PhoneContent = ({ config, manager: externalManager, onFinish, onError }) =>
 							formatHintBuilder,
 							countryAriaLabelBuilder,
 							"data-testid": "phone-input",
+							required: true,
+							autocomplete: "tel",
 							showErrorIcon: true
 						}),
 						/* @__PURE__ */ u(Spacer, { size: 16 }),
@@ -229,7 +229,7 @@ var PhoneContent = ({ config, manager: externalManager, onFinish, onError }) =>
 *
 * @see {@link createPhoneManager} for headless usage
 */
-var Phone = ({ config, manager, onFinish, onError }) => {
+var PhoneWithLocalConfig = ({ config, manager, onFinish, onError }) => {
 	return /* @__PURE__ */ u(IncodeComponent, { children: config || manager ? /* @__PURE__ */ u(PhoneContent, {
 		config,
 		manager,
@@ -237,6 +237,7 @@ var Phone = ({ config, manager, onFinish, onError }) => {
 		onError
 	}) : null });
 };
+var Phone = withStandaloneModuleBootstrap(PhoneWithLocalConfig, "PHONE", { supportsExternalManager: true });
 registerIncodeModuleElement(Phone, "incode-phone");
 //#endregion
 export { Phone };

package/dist/{phoneInputComposed-DMiXfF-1.js → phoneInputComposed-CeVWTS_O.js}

@@ -1,9 +1,9 @@
-import { _ as y, a as D, d as T, h as q, l as A, p as d, v as u, x as k } from "./vendor-preact-DThS2ZQ_.js";
-import { t as ErrorIcon } from "./errorIcon-BA4T6iy-.js";
-import "./icons-CJJbIpBq.js";
-import { t as SuccessIcon } from "./successIcon-B5mGvdx1.js";
-import { t as InputComposed } from "./inputComposed-C1R2LAa3.js";
-import { t as DropdownComposed } from "./dropdownComposed-CoU0enG6.js";
+import { S as k, _ as y, a as D, d as T, h as q, l as A, p as d, v as u } from "./vendor-preact-mvwZ8mJj.js";
+import { n as ErrorIcon } from "./incode-logo-rGFjZHqi.js";
+import "./icons--ezYG2Fb.js";
+import { t as SuccessIcon } from "./successIcon-Bj8Y9CuI.js";
+import { t as InputComposed } from "./inputComposed-BeROn635.js";
+import { t as DropdownComposed } from "./dropdownComposed-OHDHzt1Q.js";
 //#region ../../node_modules/.pnpm/libphonenumber-js@1.12.31/node_modules/libphonenumber-js/metadata.min.json.js
 var metadata_min_json_default = {
 	"version": 4,
@@ -12073,6 +12073,7 @@ var PhoneInputComposed = D(({ id, label, labelHint, countryCode = "US", value, p
 					const c = getCountryByCode(option.value);
 					return c ? `${c.emoji} ${c.callingCode}` : option.label;
 				},
+				"data-testid": `${countryDropdownId}-selector`,
 				class: "IncodePhoneInputComposedDropdown",
 				siblingElement: /* @__PURE__ */ u(InputComposed, {
 					id: phoneInputId,

package/dist/{processing-BeUMfdJJ.js → processing-BsvHyDWa.js}

@@ -1,5 +1,5 @@
-import { v as u } from "./vendor-preact-DThS2ZQ_.js";
-import { t as TransitionSpinner } from "./transitionSpinner-CuNCqHNi.js";
+import { v as u } from "./vendor-preact-mvwZ8mJj.js";
+import { l as TransitionSpinner } from "./incodeComponent-K9ZWg302.js";
 //#region src/shared/processing/processing.tsx
 var Processing = () => {
 	return /* @__PURE__ */ u(TransitionSpinner, {});

package/dist/qe-signature/qe-signature.es.js

@@ -1,17 +1,20 @@
-import { v as u } from "../vendor-preact-DThS2ZQ_.js";
-import { n as ElectronicSignature } from "../electronic-signature-Ueoffasr.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-B-4_3JrK.js";
+import { v as u } from "../vendor-preact-mvwZ8mJj.js";
+import { r as withStandaloneModuleBootstrap } from "../incodeComponent-K9ZWg302.js";
+import { n as ElectronicSignature } from "../electronic-signature-yamI6zHM.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-CcLzar_X.js";
 //#region src/modules/qe-signature/qe-signature.tsx
-var QeSignature = ({ config, onFinish, onError }) => {
+var QeSignatureWithLocalConfig = ({ config, manager, onFinish, onError }) => {
 	return /* @__PURE__ */ u(ElectronicSignature, {
 		config: config ? {
 			...config,
 			variant: "qe"
 		} : void 0,
+		manager,
 		onFinish,
 		onError
 	});
 };
+var QeSignature = withStandaloneModuleBootstrap(QeSignatureWithLocalConfig, "QE_SIGNATURE", { supportsExternalManager: true });
 registerIncodeModuleElement(QeSignature, "incode-qe-signature");
 //#endregion
 export { QeSignature };

package/dist/{radioGroupComposed-DuQxslB2.js → radioGroupComposed-DzNGUbZQ.js}

@@ -1,9 +1,9 @@
-import { n as useTranslation } from "./i18n-CU4xq8qC.js";
-import { a as D, p as d, v as u } from "./vendor-preact-DThS2ZQ_.js";
-import { n as cn } from "./loadingIcon-B0ysgiNq.js";
-import { t as ErrorIcon } from "./errorIcon-BA4T6iy-.js";
-import "./icons-CJJbIpBq.js";
-import { t as InputComposed } from "./inputComposed-C1R2LAa3.js";
+import { i as useTranslation } from "./uiConfig-B5ASPUL4.js";
+import { a as D, p as d, v as u } from "./vendor-preact-mvwZ8mJj.js";
+import { u as cn } from "./spacer-CDlQd12V.js";
+import { n as ErrorIcon } from "./incode-logo-rGFjZHqi.js";
+import "./icons--ezYG2Fb.js";
+import { t as InputComposed } from "./inputComposed-BeROn635.js";
 //#region src/shared/errorParams.ts
 /**
 * Resolves error params by translating the `fieldName` key
@@ -32,7 +32,7 @@ function translateError(t, error, params) {
 }
 //#endregion
 //#region src/shared/formField/formField.tsx
-var FormField = ({ name, label, displayLabel: displayLabelProp, value = "", error, errorParams, type = "text", placeholder, placeholderParams, required, readonly, maxLength, disabled, labelHint, onChange, onBlur }) => {
+var FormField = ({ name, label, displayLabel: displayLabelProp, value = "", error, errorParams, type = "text", placeholder, placeholderParams, required, readonly, maxLength, disabled, autoComplete, labelHint, onChange, onBlur }) => {
 	const { t } = useTranslation();
 	return /* @__PURE__ */ u("div", {
 		className: "IncodeFormField",
@@ -42,6 +42,7 @@ var FormField = ({ name, label, displayLabel: displayLabelProp, value = "", erro
 			labelHint,
 			name,
 			type,
+			autoComplete,
 			value,
 			placeholder: placeholder ? t(placeholder, placeholderParams) : void 0,
 			readOnly: readonly,
@@ -60,13 +61,15 @@ var FormField = ({ name, label, displayLabel: displayLabelProp, value = "", erro
 };
 //#endregion
 //#region src/shared/radioButtonComposed/radioButtonComposed.tsx
-var RadioButtonComposed = D(({ id, label, labelHint, checked, defaultChecked, disabled = false, required = false, name, value, onChange, error, helper, showErrorIcon = true, class: className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...restProps }, ref) => {
+var textSizeClass = {
+	M: "IncodeRadioButtonTextM",
+	S: "IncodeRadioButtonTextS"
+};
+var RadioButtonComposed = D(({ id, label, labelHint, checked, defaultChecked, disabled = false, required = false, name, value, onChange, error, helper, showErrorIcon = true, textSize = "M", class: className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...restProps }, ref) => {
 	const [internalChecked, setInternalChecked] = d(!!defaultChecked);
 	const isControlled = checked !== void 0;
 	const isChecked = isControlled ? !!checked : internalChecked;
 	const isDisabled = !!disabled;
-	const isRequired = !!required;
-	const classStr = typeof className === "string" ? className : void 0;
 	const handleChange = (event) => {
 		if (!isControlled) setInternalChecked(event.target.checked);
 		onChange?.(event);
@@ -79,13 +82,13 @@ var RadioButtonComposed = D(({ id, label, labelHint, checked, defaultChecked, di
 		helperTextId
 	].filter(Boolean).join(" ") || void 0;
 	return /* @__PURE__ */ u("div", {
-		class: cn("IncodeRadioButton", classStr),
+		class: cn("IncodeRadioButton", className),
 		children: [
 			/* @__PURE__ */ u("label", {
 				class: cn("IncodeRadioButtonLabel", { IncodeRadioButtonLabelDisabled: isDisabled }),
 				htmlFor: id,
 				children: [/* @__PURE__ */ u("div", {
-					class: "relative inline-flex",
+					class: "IncodeRadioButtonControl",
 					children: [/* @__PURE__ */ u("input", {
 						ref,
 						type: "radio",
@@ -100,8 +103,6 @@ var RadioButtonComposed = D(({ id, label, labelHint, checked, defaultChecked, di
 						"aria-label": ariaLabel,
 						"aria-labelledby": ariaLabelledBy,
 						"aria-describedby": describedBy,
-						"aria-invalid": ariaInvalid || !!error,
-						"aria-required": isRequired,
 						...restProps
 					}), /* @__PURE__ */ u("div", {
 						class: cn("IncodeRadioButtonVisual", {
@@ -113,7 +114,7 @@ var RadioButtonComposed = D(({ id, label, labelHint, checked, defaultChecked, di
 						children: /* @__PURE__ */ u("span", { class: cn("IncodeRadioButtonDot", { IncodeRadioButtonDotVisible: isChecked }) })
 					})]
 				}), label && /* @__PURE__ */ u("span", {
-					class: cn("IncodeRadioButtonText", { IncodeRadioButtonTextDisabled: isDisabled }),
+					class: cn(textSizeClass[textSize], { IncodeRadioButtonTextDisabled: isDisabled }),
 					"aria-hidden": ariaLabelledBy ? "true" : void 0,
 					children: [label, labelHint && /* @__PURE__ */ u("span", {
 						class: "IncodeRadioButtonLabelHint",

package/dist/redirect-to-mobile/redirect-to-mobile.es.js

@@ -1,25 +1,23 @@
 import { t as __commonJSMin } from "../rolldown-runtime--E5BIlTp.js";
-import { n as useTranslation, t as Trans } from "../i18n-CU4xq8qC.js";
-import { _ as y, h as q, l as A, p as d, v as u, x as k } from "../vendor-preact-DThS2ZQ_.js";
-import { c as useModuleTerminalCallbacks, u as useManager } from "../hooks-CNu7o-v8.js";
-import { t as IncodeComponent } from "../incodeComponent-CfzJGETt.js";
-import { r as Spacer } from "../loadingIcon-B0ysgiNq.js";
-import { t as incode_logo_default } from "../incode-logo-57XFniXU.js";
-import { n as VerifiedByIncodeLogo, r as usePageUiConfig } from "../page-DidH_RkX.js";
-import "../extensibility-7sRIN0JC.js";
-import { t as TransitionSpinner } from "../transitionSpinner-CuNCqHNi.js";
-import { t as Button } from "../button-Dz6AsbmF.js";
-import "../icons-CJJbIpBq.js";
-import { t as SuccessIcon } from "../successIcon-B5mGvdx1.js";
-import { t as AutoFocusTitle } from "../autoFocusTitle-CuRu2lPg.js";
-import { r as getCountryByCallingCode, t as PhoneInputComposed } from "../phoneInputComposed-DMiXfF-1.js";
-import { t as registerIncodeElement } from "../registerIncodeElement-DaNjbAwZ.js";
-import { t as Snackbar } from "../snackbar-DS7Mv62v.js";
-import { t as Tabs } from "../tabs-C__chW-u.js";
+import { i as useTranslation, r as Trans } from "../uiConfig-B5ASPUL4.js";
+import { S as k, _ as y, h as q, l as A, m as g, p as d, v as u } from "../vendor-preact-mvwZ8mJj.js";
+import { _ as useModuleTerminalCallbacks, c as usePageUiConfig, l as TransitionSpinner, r as withStandaloneModuleBootstrap, s as VerifiedByIncodeLogo, t as IncodeComponent, y as useManager } from "../incodeComponent-K9ZWg302.js";
+import { t as Spacer } from "../spacer-CDlQd12V.js";
+import { n as ErrorIcon, r as Button, t as incode_logo_default } from "../incode-logo-rGFjZHqi.js";
+import "../extensibility-iJYzpW6H.js";
+import "../icons--ezYG2Fb.js";
+import { t as SuccessIcon } from "../successIcon-Bj8Y9CuI.js";
+import { t as AutoFocusTitle } from "../autoFocusTitle-gLba2mgp.js";
+import { n as formatResendTimer, r as useResendTimerAnnouncements } from "../otpInput-D5dLXrmC.js";
+import { r as getCountryByCallingCode, t as PhoneInputComposed } from "../phoneInputComposed-CeVWTS_O.js";
+import { t as registerIncodeElement } from "../registerIncodeElement-BduCekz5.js";
+import { t as Snackbar } from "../snackbar-C9Mqrh0e.js";
+import { t as Tabs } from "../tabs-DweBZTV2.js";
 import { createRedirectToMobileManager } from "@incodetech/core/redirect-to-mobile";
 //#region src/modules/redirect-to-mobile/redirectHeader.tsx
 var RedirectHeader = ({ logoSrc }) => {
 	const { t } = useTranslation();
+	const subtitleId = `${g()}-subtitle`;
 	return /* @__PURE__ */ u("header", {
 		class: "IncodeRedirectHeader",
 		children: [
@@ -35,11 +33,14 @@ var RedirectHeader = ({ logoSrc }) => {
 			/* @__PURE__ */ u(Spacer, { size: 24 }),
 			/* @__PURE__ */ u(AutoFocusTitle, {
 				className: "IncodeRedirectTitle",
+				describedById: subtitleId,
 				children: t("v2.redirectToMobile.title")
 			}),
 			/* @__PURE__ */ u(Spacer, { size: 12 }),
 			/* @__PURE__ */ u("p", {
+				id: subtitleId,
 				class: "IncodeRedirectSubtitle",
+				"data-testid": "redirect-subtitle",
 				children: t("v2.redirectToMobile.subtitle")
 			})
 		]
@@ -55,16 +56,26 @@ var RedirectFooter = ({ addContinueToDesktop, onContinueOnDesktop }) => {
 			/* @__PURE__ */ u(Spacer, {}),
 			addContinueToDesktop ? /* @__PURE__ */ u("div", {
 				class: "IncodeRedirectFooterContent",
-				children: [/* @__PURE__ */ u("span", {
-					class: "IncodeRedirectFooterContentText",
-					children: t("idv2.permissions.or")
-				}), /* @__PURE__ */ u(Button, {
-					variant: "secondary",
-					onClick: onContinueOnDesktop,
-					children: t("redirect.continueOnDesktop")
-				})]
+				"data-testid": "redirect-footer-content",
+				children: [
+					/* @__PURE__ */ u("span", {
+						class: "IncodeRedirectFooterContentText",
+						children: t("idv2.permissions.or")
+					}),
+					/* @__PURE__ */ u(Spacer, { size: 16 }),
+					/* @__PURE__ */ u(Button, {
+						variant: "secondary",
+						onClick: onContinueOnDesktop,
+						"data-testid": "redirect-continue-desktop",
+						children: t("redirect.continueOnDesktop")
+					}),
+					/* @__PURE__ */ u(Spacer, { size: 16 })
+				]
 			}) : null,
-			/* @__PURE__ */ u(VerifiedByIncodeLogo, {})
+			/* @__PURE__ */ u("div", {
+				class: "IncodeRedirectFooterLogoWrapper",
+				children: /* @__PURE__ */ u(VerifiedByIncodeLogo, {})
+			})
 		]
 	});
 };
@@ -75,9 +86,13 @@ var ResendToast = ({ visible }) => {
 	if (!visible) return null;
 	return /* @__PURE__ */ u("div", {
 		class: "IncodeRedirectToast",
+		"data-testid": "redirect-resend-toast",
 		children: /* @__PURE__ */ u(Snackbar, {
 			variant: "positive",
-			children: t("redirect.linkResent")
+			children: /* @__PURE__ */ u("span", {
+				class: "IncodeRedirectToastContent",
+				children: [/* @__PURE__ */ u(SuccessIcon, { size: 32 }), /* @__PURE__ */ u("span", { children: t("redirect.linkResent") })]
+			})
 		})
 	});
 };
@@ -2517,15 +2532,51 @@ var QrTabContent = ({ redirectUrl }) => {
 };
 //#endregion
 //#region src/modules/redirect-to-mobile/smsSentView.tsx
-var SmsSentView = ({ formattedPhone, onResend, onChangePhone }) => {
+var SmsSentView = ({ formattedPhone, hasError, resendTimer, canResendSms, onResend, onChangePhone }) => {
 	const { t } = useTranslation();
 	return /* @__PURE__ */ u("div", {
 		class: "IncodeRedirectLinkSent",
-		children: [
+		children: [/* @__PURE__ */ u("div", {
+			ref: useResendTimerAnnouncements({
+				canResend: canResendSms,
+				resendTimer,
+				disabled: hasError,
+				i18nKeys: { resendAvailable: "redirectToMobile.resendLinkAvailable" }
+			}),
+			class: "IncodeSrOnly",
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			"data-testid": "redirect-sms-live-region"
+		}), hasError ? /* @__PURE__ */ u(k, { children: [
+			/* @__PURE__ */ u(ErrorIcon, { size: 40 }),
+			/* @__PURE__ */ u(Spacer, { size: 16 }),
+			/* @__PURE__ */ u(AutoFocusTitle, {
+				className: "IncodeRedirectLinkSentTitle",
+				"data-testid": "redirect-sms-status-heading",
+				children: t("redirect.tooManyAttempts")
+			}),
+			/* @__PURE__ */ u(Spacer, { size: 12 }),
+			/* @__PURE__ */ u("p", {
+				class: "IncodeRedirectLinkSentPhone",
+				role: "alert",
+				children: t("redirect.smsErrorSubtitle")
+			}),
+			/* @__PURE__ */ u(Spacer, { size: 24 }),
+			/* @__PURE__ */ u("div", {
+				class: "IncodeRedirectLinkSentActions",
+				children: /* @__PURE__ */ u(Button, {
+					variant: "link",
+					onClick: onChangePhone,
+					"data-testid": "sms-change-phone",
+					children: t("redirect.changePhoneNumber")
+				})
+			})
+		] }) : /* @__PURE__ */ u(k, { children: [
 			/* @__PURE__ */ u(SuccessIcon, { size: 40 }),
 			/* @__PURE__ */ u(Spacer, { size: 16 }),
 			/* @__PURE__ */ u(AutoFocusTitle, {
 				className: "IncodeRedirectLinkSentTitle",
+				"data-testid": "redirect-sms-status-heading",
 				children: t("redirect.linkSent")
 			}),
 			/* @__PURE__ */ u(Spacer, { size: 12 }),
@@ -2536,24 +2587,35 @@ var SmsSentView = ({ formattedPhone, onResend, onChangePhone }) => {
 			/* @__PURE__ */ u(Spacer, { size: 32 }),
 			/* @__PURE__ */ u("div", {
 				class: "IncodeRedirectLinkSentActions",
-				children: /* @__PURE__ */ u(Trans, {
+				children: !canResendSms && resendTimer > 0 ? /* @__PURE__ */ u(k, { children: [
+					/* @__PURE__ */ u(Spacer, { size: 8 }),
+					/* @__PURE__ */ u(Button, {
+						variant: "link",
+						size: "inline",
+						disabled: true,
+						"data-testid": "sms-timer",
+						children: t("redirectToMobile.resendCountdown", { time: formatResendTimer(resendTimer) })
+					}),
+					/* @__PURE__ */ u(Spacer, { size: 8 })
+				] }) : /* @__PURE__ */ u(Trans, {
 					i18nKey: "redirect.didntReceiveLinkActions",
-					defaultValue: "Didn't receive the link? <resend>Resend</resend> or <changePhone>Change phone number</changePhone>",
 					components: {
 						resend: /* @__PURE__ */ u(Button, {
 							variant: "link",
 							size: "inline",
-							onClick: onResend
+							onClick: onResend,
+							"data-testid": "sms-resend"
 						}),
 						changePhone: /* @__PURE__ */ u(Button, {
 							variant: "link",
 							size: "inline",
-							onClick: onChangePhone
+							onClick: onChangePhone,
+							"data-testid": "sms-change-phone"
 						})
 					}
 				})
 			})
-		]
+		] })]
 	});
 };
 //#endregion
@@ -2566,12 +2628,15 @@ var SmsForm = ({ countryCode, error, isSending, isPhoneValid, onPhoneChange, onS
 		error,
 		disabled: isSending,
 		autoFocus: true,
+		autocomplete: "tel",
+		"data-testid": "redirect-sms-phone",
 		onChange: onPhoneChange
 	}), /* @__PURE__ */ u(Button, {
 		onClick: onSendSms,
 		disabled: !isPhoneValid || isSending,
 		isLoading: isSending,
 		class: "IncodeRedirectSmsSendButton",
+		"data-testid": "redirect-sms-send",
 		children: t("redirect.sendLinkSms")
 	})] });
 };
@@ -2581,7 +2646,7 @@ var formatPhoneNumber = (phone, prefix) => {
 	if (!phone.startsWith(prefix)) return phone;
 	return `${prefix} ${phone.slice(prefix.length).replace(/(\d{3})(?=\d)/g, "$1 ")}`;
 };
-var SmsTabContent = ({ phonePrefix, smsSent, error, manager, onResend }) => {
+var SmsTabContent = ({ phonePrefix, smsSent, smsFailed, smsResendTimer, canResendSms, error, manager, onResend }) => {
 	const { t } = useTranslation();
 	const [phoneNumber, setPhoneNumber] = d(phonePrefix);
 	const [isPhoneValid, setIsPhoneValid] = d(false);
@@ -2606,14 +2671,17 @@ var SmsTabContent = ({ phonePrefix, smsSent, error, manager, onResend }) => {
 		setIsPhoneValid(false);
 		manager.resetSms();
 	}, [manager, phonePrefix]);
-	return /* @__PURE__ */ u(k, { children: [/* @__PURE__ */ u("p", {
-		class: "IncodeRedirectTabDescription",
-		children: t("v2.redirectToMobile.sms.description")
-	}), smsSent ? /* @__PURE__ */ u(SmsSentView, {
+	return /* @__PURE__ */ u(k, { children: smsSent || smsFailed ? /* @__PURE__ */ u(SmsSentView, {
 		formattedPhone,
+		hasError: smsFailed,
+		resendTimer: smsResendTimer,
+		canResendSms,
 		onResend: handleResend,
 		onChangePhone: handleChangePhone
-	}) : /* @__PURE__ */ u(SmsForm, {
+	}) : /* @__PURE__ */ u(k, { children: [/* @__PURE__ */ u("p", {
+		class: "IncodeRedirectTabDescription",
+		children: t("v2.redirectToMobile.sms.description")
+	}), /* @__PURE__ */ u(SmsForm, {
 		countryCode,
 		phonePrefix,
 		error,
@@ -2621,16 +2689,21 @@ var SmsTabContent = ({ phonePrefix, smsSent, error, manager, onResend }) => {
 		isPhoneValid,
 		onPhoneChange: handlePhoneChange,
 		onSendSms: handleSendSms
-	})] });
+	})] }) });
 };
 //#endregion
 //#region src/modules/redirect-to-mobile/qrScreen.tsx
-var QrScreen = ({ redirectUrl, phonePrefix, smsSent, disableSmsOption, addContinueToDesktop, error, manager, logoSrc }) => {
+var QrScreen = ({ redirectUrl, phonePrefix, smsSent, smsFailed, smsResendTimer, canResendSms, disableSmsOption, addContinueToDesktop, error, manager, logoSrc }) => {
 	const { t } = useTranslation();
 	const [showResendToast, setShowResendToast] = d(false);
+	const resendToastTimerRef = A();
 	const handleResend = q(() => {
+		clearTimeout(resendToastTimerRef.current);
 		setShowResendToast(true);
-		setTimeout(() => setShowResendToast(false), 3e3);
+		resendToastTimerRef.current = setTimeout(() => setShowResendToast(false), 3e3);
+	}, []);
+	y(() => {
+		return () => clearTimeout(resendToastTimerRef.current);
 	}, []);
 	const handleContinueOnDesktop = q(() => {
 		manager.continueOnDesktop();
@@ -2650,9 +2723,11 @@ var QrScreen = ({ redirectUrl, phonePrefix, smsSent, disableSmsOption, addContin
 						label: t("v2.redirectToMobile.tabs.label"),
 						children: [/* @__PURE__ */ u(Tabs.Trigger, {
 							value: "qr",
+							"data-testid": "redirect-tab-qr",
 							children: t("v2.redirectToMobile.tabs.0")
 						}), !disableSmsOption && /* @__PURE__ */ u(Tabs.Trigger, {
 							value: "sms",
+							"data-testid": "redirect-tab-sms",
 							children: t("v2.redirectToMobile.tabs.1")
 						})]
 					})]
@@ -2666,6 +2741,9 @@ var QrScreen = ({ redirectUrl, phonePrefix, smsSent, disableSmsOption, addContin
 						children: /* @__PURE__ */ u(SmsTabContent, {
 							phonePrefix,
 							smsSent,
+							smsFailed,
+							smsResendTimer,
+							canResendSms,
 							error,
 							manager,
 							onResend: handleResend
@@ -2673,7 +2751,7 @@ var QrScreen = ({ redirectUrl, phonePrefix, smsSent, disableSmsOption, addContin
 					})]
 				})]
 			}), /* @__PURE__ */ u(RedirectFooter, {
-				addContinueToDesktop,
+				addContinueToDesktop: addContinueToDesktop && (!smsSent || smsFailed),
 				onContinueOnDesktop: handleContinueOnDesktop
 			})]
 		})]
@@ -2685,8 +2763,10 @@ var WaitingScreen = ({ title, subtitle, logoSrc }) => {
 	const { t } = useTranslation();
 	const displayTitle = title ?? t("verificationComplete.title");
 	const displaySubtitle = subtitle ?? t("verificationComplete.message");
+	const subtitleId = `${g()}-subtitle`;
 	return /* @__PURE__ */ u("div", {
 		class: "IncodeRedirectFinishedContainer",
+		tabIndex: 0,
 		children: [
 			/* @__PURE__ */ u("img", {
 				src: logoSrc,
@@ -2696,10 +2776,13 @@ var WaitingScreen = ({ title, subtitle, logoSrc }) => {
 			}),
 			displayTitle ? /* @__PURE__ */ u(AutoFocusTitle, {
 				className: "IncodeRedirectFinishedTitle",
+				describedById: displaySubtitle ? subtitleId : void 0,
 				children: displayTitle
 			}) : null,
 			displaySubtitle ? /* @__PURE__ */ u("p", {
+				id: subtitleId,
 				class: "IncodeRedirectFinishedSubtitle",
+				"data-testid": "redirect-waiting-subtitle",
 				children: displaySubtitle
 			}) : null
 		]
@@ -2742,6 +2825,9 @@ var RedirectToMobileContent = ({ config, manager: externalManager, services, onF
 			redirectUrl: state.redirectUrl,
 			phonePrefix: state.phonePrefix,
 			smsSent: state.smsSent,
+			smsFailed: state.smsFailed,
+			smsResendTimer: state.smsResendTimer,
+			canResendSms: state.canResendSms,
 			disableSmsOption: config?.disableSmsOption ?? false,
 			addContinueToDesktop: config?.addContinueToDesktop ?? false,
 			error: state.error,
@@ -2757,7 +2843,7 @@ var RedirectToMobileContent = ({ config, manager: externalManager, services, onF
 		children: content
 	});
 };
-var RedirectToMobile = ({ config, manager, services, onFinish, onContinue, onError }) => {
+var RedirectToMobileWithLocalConfig = ({ config, manager, services, onFinish, onContinue, onError }) => {
 	return /* @__PURE__ */ u(IncodeComponent, { children: config || manager ? /* @__PURE__ */ u(RedirectToMobileContent, {
 		config,
 		manager,
@@ -2767,6 +2853,7 @@ var RedirectToMobile = ({ config, manager, services, onFinish, onContinue, onErr
 		onError
 	}) : null });
 };
+var RedirectToMobile = withStandaloneModuleBootstrap(RedirectToMobileWithLocalConfig, "REDIRECT_TO_MOBILE", { supportsExternalManager: true });
 registerIncodeElement(RedirectToMobile, "incode-redirect-to-mobile", [
 	"config",
 	"services",

package/dist/redirect-to-mobile/styles.css

@@ -1,7 +1,7 @@
 /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    *, :before, :after, ::backdrop {
+    .IncodeComponent, .IncodeComponent *, .IncodeComponent :before, .IncodeComponent :after, .IncodeComponent ::backdrop {
       --tw-border-style: solid;
       --tw-outline-style: solid;
       --tw-font-weight: initial;
@@ -38,10 +38,8 @@
   background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
   width: 100%;
   padding-inline: var(--spacing-24, var(--spacing-24, 24px));
-  padding-top: var(--spacing-32, var(--spacing-32, 32px));
-  padding-bottom: var(--spacing-24, var(--spacing-24, 24px));
+  padding-block: var(--spacing-32, var(--spacing-32, 32px));
   max-width: var(--redirect-card-max-width);
-  min-height: min(var(--redirect-card-max-width), var(--redirect-card-min-height));
   flex-direction: column;
   align-items: center;
   display: flex;
@@ -57,11 +55,11 @@
 }
 
 .IncodeRedirectRoot .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions {
-  align-items: center;
-  gap: var(--spacing-32, var(--spacing-32, 32px));
+  margin-bottom: var(--spacing-32, var(--spacing-32, 32px));
   width: 100%;
   max-width: var(--redirect-options-max-width);
   flex-direction: column;
+  align-items: center;
   display: flex;
 }
 
@@ -73,6 +71,12 @@
   left: 50%;
 }
 
+.IncodeRedirectContainer .IncodeRedirectToastContent {
+  align-items: center;
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  display: inline-flex;
+}
+
 @keyframes fadeInOut {
   0% {
     opacity: 0;
@@ -136,12 +140,11 @@
 }
 
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectBottomNav {
-  align-items: center;
-  gap: var(--spacing-40, var(--spacing-40, 40px));
   width: 100%;
   max-width: var(--redirect-form-column-max-width);
   flex-direction: column;
   flex: 1;
+  align-items: center;
   display: flex;
 }
 
@@ -154,7 +157,7 @@
 }
 
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectBottomNav .IncodeRedirectFooterContentText {
-  margin-block: var(--spacing-32, var(--spacing-32, 32px));
+  margin-block: var(--spacing-12, var(--spacing-12, 12px));
   font-family: var(--Button-family, "DM Sans");
   letter-spacing: 0;
   font-size: 18px;
@@ -162,6 +165,10 @@
   line-height: 100%;
 }
 
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectBottomNav .IncodeRedirectFooterLogoWrapper {
+  padding-block: var(--spacing-8, var(--spacing-8, 8px));
+}
+
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectTabs {
   justify-content: center;
   align-items: flex-end;
@@ -246,6 +253,7 @@
 }
 
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent {
+  margin-top: var(--spacing-32, var(--spacing-32, 32px));
   flex-direction: column;
   align-items: center;
   display: flex;
@@ -272,6 +280,7 @@
 }
 
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent .IncodeRedirectLinkSentActions {
+  margin-block: var(--spacing-8, var(--spacing-8, 8px));
   justify-content: center;
   align-items: center;
   gap: var(--spacing-4, var(--spacing-4, 4px));
@@ -287,11 +296,12 @@
 
 .IncodeRedirectFinishedContainer {
   flex-direction: column;
-  justify-content: center;
+  justify-content: safe center;
   align-items: center;
   width: 100%;
   height: 100%;
   display: flex;
+  overflow-y: auto;
 }
 
 .IncodeRedirectFinishedContainer .IncodeRedirectLogo {