@incodetech/web 2.2.0 → 2.3.0-rc.1

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

@@ -1,7 +1,7 @@
-import { y as u } from "../vendor-preact-BPXMFRom.js";
-import { r as withStandaloneModuleBootstrap } from "../incodeComponent-BtFz-bx2.js";
-import { n as ElectronicSignature } from "../electronic-signature-CyE8F7LZ.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-9K8KUs61.js";
+import { v as u } from "../vendor-preact-C0jX1Cbq.js";
+import { i as withStandaloneModuleBootstrap } from "../incodeComponent-DeVV0gEn.js";
+import { n as ElectronicSignature } from "../electronic-signature-DRMdCzdF.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-Do8qpZk7.js";
 //#region src/modules/qe-signature/qe-signature.tsx
 var QeSignatureWithLocalConfig = ({ config, manager, onFinish, onError }) => {
 	return /* @__PURE__ */ u(ElectronicSignature, {

package/dist/radioGroupComposed-BFzxJVpZ.js

@@ -0,0 +1 @@
+import "./radioGroupComposed-BrawV4FU.js";

package/dist/{radioGroupComposed-DQzTWutW.js → radioGroupComposed-BrawV4FU.js}

@@ -1,65 +1,7 @@
-import { a as useTranslation } from "./uiConfig-Dqnjankd.js";
-import { a as D, p as d, y as u } from "./vendor-preact-BPXMFRom.js";
-import { d as cn } from "./spacer-DLEDuWEx.js";
-import { n as ErrorIcon } from "./incode-logo-DeIDDejm.js";
-import "./icons-ChHV5iHi.js";
-import { t as InputComposed } from "./inputComposed-C2zTEXsp.js";
-//#region src/shared/errorParams.ts
-/**
-* Resolves error params by translating the `fieldName` key
-* when it holds an i18n key rather than a display string.
-* Dot-separated strings are treated as i18n keys; plain strings
-* (e.g. "CPF") are used as-is.
-*/
-function resolveErrorParams(t, params) {
-	if (params?.fieldName && typeof params.fieldName === "string") {
-		const name = String(params.fieldName);
-		const resolved = name.includes(".") ? t(name) : name;
-		return {
-			...params,
-			fieldName: resolved
-		};
-	}
-	return params;
-}
-/**
-* Translates an error key with resolved params.
-* Returns `undefined` when there is no error.
-*/
-function translateError(t, error, params) {
-	if (!error) return void 0;
-	return t(error, resolveErrorParams(t, 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, autoComplete, labelHint, onChange, onBlur }) => {
-	const { t } = useTranslation();
-	return /* @__PURE__ */ u("div", {
-		className: "IncodeFormField",
-		children: /* @__PURE__ */ u(InputComposed, {
-			id: name,
-			label: displayLabelProp ?? t(label),
-			labelHint,
-			name,
-			type,
-			autoComplete,
-			value,
-			placeholder: placeholder ? t(placeholder, placeholderParams) : void 0,
-			readOnly: readonly,
-			disabled,
-			required,
-			maxLength,
-			error: translateError(t, error, errorParams),
-			onInput: (e) => {
-				const target = e.target;
-				onChange(name, target.value);
-			},
-			onBlur: onBlur ? () => onBlur(name) : void 0,
-			"data-testid": `form-field-${name}`
-		})
-	});
-};
-//#endregion
+import { f as d, i as D, v as u } from "./vendor-preact-C0jX1Cbq.js";
+import { d as cn } from "./spacer-DZ-t7RMQ.js";
+import { b as ErrorIcon } from "./icons-DNXYxUPA.js";
+import { t as FieldLabelHint } from "./fieldLabelHint-CxjArYkQ.js";
 //#region src/shared/radioButtonComposed/radioButtonComposed.tsx
 var textSizeClass = {
 	M: "IncodeRadioButtonTextM",
@@ -116,10 +58,11 @@ var RadioButtonComposed = D(({ id, label, labelHint, checked, defaultChecked, di
 				}), label && /* @__PURE__ */ u("span", {
 					class: cn(textSizeClass[textSize], { IncodeRadioButtonTextDisabled: isDisabled }),
 					"aria-hidden": ariaLabelledBy ? "true" : void 0,
-					children: [label, labelHint && /* @__PURE__ */ u("span", {
-						class: "IncodeRadioButtonLabelHint",
-						"data-testid": `${id}-label-hint`,
-						children: labelHint
+					children: [label, /* @__PURE__ */ u(FieldLabelHint, {
+						className: "IncodeRadioButtonLabelHint",
+						hint: labelHint,
+						required,
+						testId: `${id}-label-hint`
 					})]
 				})]
 			}),
@@ -170,10 +113,11 @@ var RadioGroupComposed = D(({ id, label, labelHint, options, value, defaultValue
 			/* @__PURE__ */ u("span", {
 				id: labelId,
 				class: "IncodeRadioGroupComposedLabel",
-				children: [label, labelHint && /* @__PURE__ */ u("span", {
-					class: "IncodeRadioGroupComposedLabelHint",
-					"data-testid": `${id}-label-hint`,
-					children: labelHint
+				children: [label, /* @__PURE__ */ u(FieldLabelHint, {
+					className: "IncodeRadioGroupComposedLabelHint",
+					hint: labelHint,
+					required,
+					testId: `${id}-label-hint`
 				})]
 			}),
 			/* @__PURE__ */ u("div", {
@@ -213,4 +157,4 @@ var RadioGroupComposed = D(({ id, label, labelHint, options, value, defaultValue
 	});
 });
 //#endregion
-export { translateError as i, RadioButtonComposed as n, FormField as r, RadioGroupComposed as t };
+export { RadioButtonComposed as n, RadioGroupComposed as t };

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

@@ -1,18 +1,14 @@
 import { t as __commonJSMin } from "../rolldown-runtime--E5BIlTp.js";
-import { a as useTranslation, i as Trans } from "../uiConfig-Dqnjankd.js";
-import { C as k, g as q, l as A, m as g, p as d, v as y, y as u } from "../vendor-preact-BPXMFRom.js";
-import { b as useManager, c as usePageUiConfig, l as TransitionSpinner, r as withStandaloneModuleBootstrap, s as VerifiedByIncodeLogo, t as IncodeComponent, v as useModuleTerminalCallbacks } from "../incodeComponent-BtFz-bx2.js";
-import { t as Spacer } from "../spacer-DLEDuWEx.js";
-import { n as ErrorIcon, r as Button, t as incode_logo_default } from "../incode-logo-DeIDDejm.js";
-import "../extensibility-C5XqL_A3.js";
-import "../icons-ChHV5iHi.js";
-import { t as SuccessIcon } from "../successIcon-DS8BLsgy.js";
-import { t as AutoFocusTitle } from "../autoFocusTitle-DB-23sv_.js";
-import { n as formatResendTimer, r as useResendTimerAnnouncements } from "../otpInput-CvPR3ZpP.js";
-import { r as getCountryByCallingCode, t as PhoneInputComposed } from "../phoneInputComposed-byyszNoS.js";
-import { t as registerIncodeElement } from "../registerIncodeElement-DW2PE_DX.js";
-import { t as Snackbar } from "../snackbar-eBOj46AK.js";
-import { t as Tabs } from "../tabs-BGL1oRLb.js";
+import { o as useTranslation } from "../uiConfig-BcjOx3PY.js";
+import { S as k, _ as y, c as A, f as d, h as q, p as g, v as u } from "../vendor-preact-C0jX1Cbq.js";
+import { S as useManager, b as useModuleTerminalCallbacks, d as TransitionSpinner, i as withStandaloneModuleBootstrap, l as VerifiedByIncodeLogo, r as Snackbar, t as IncodeComponent, u as usePageUiConfig } from "../incodeComponent-DeVV0gEn.js";
+import { t as Spacer } from "../spacer-DZ-t7RMQ.js";
+import { r as SuccessIcon, x as Button } from "../icons-DNXYxUPA.js";
+import { t as incode_logo_default } from "../incode-logo-BzJOZr3f.js";
+import { t as AutoFocusTitle } from "../autoFocusTitle-CVjuQOGZ.js";
+import { t as registerIncodeElement } from "../registerIncodeElement-CbZczi4S.js";
+import { t as useLazyComponentLoader } from "../useModuleLoader-DpcbSKBH.js";
+import { t as Tabs } from "../tabs-C8WsKO4V.js";
 import { createRedirectToMobileManager } from "@incodetech/core/redirect-to-mobile";
 //#region src/modules/redirect-to-mobile/redirectHeader.tsx
 var RedirectHeader = ({ logoSrc }) => {
@@ -2487,7 +2483,7 @@ var import_browser = (/* @__PURE__ */ __commonJSMin(((exports) => {
 		return SvgRenderer.render(data, opts);
 	});
 })))();
-var QrCode = ({ value, size = 150, bgColor = "#ffffff", fgColor = "#000000" }) => {
+var QrCode = ({ value, size = 150, bgColor = "#ffffff", fgColor = "#000000", onReady }) => {
 	const { t } = useTranslation();
 	const [svgString, setSvgString] = d("");
 	y(() => {
@@ -2507,6 +2503,9 @@ var QrCode = ({ value, size = 150, bgColor = "#ffffff", fgColor = "#000000" }) =
 		bgColor,
 		fgColor
 	]);
+	y(() => {
+		if (svgString) onReady?.();
+	}, [svgString, onReady]);
 	if (!svgString) return null;
 	return /* @__PURE__ */ u("div", {
 		class: "IncodeRedirectQrCode",
@@ -2517,7 +2516,7 @@ var QrCode = ({ value, size = 150, bgColor = "#ffffff", fgColor = "#000000" }) =
 };
 //#endregion
 //#region src/modules/redirect-to-mobile/qrTabContent.tsx
-var QrTabContent = ({ redirectUrl }) => {
+var QrTabContent = ({ redirectUrl, onQrReady }) => {
 	const { t } = useTranslation();
 	return /* @__PURE__ */ u(k, { children: [/* @__PURE__ */ u("p", {
 		class: "IncodeRedirectTabDescription",
@@ -2526,177 +2525,31 @@ var QrTabContent = ({ redirectUrl }) => {
 		class: "IncodeRedirectQrWrapper",
 		children: /* @__PURE__ */ u(QrCode, {
 			value: redirectUrl,
-			size: 186
+			size: 186,
+			onReady: onQrReady
 		})
 	})] });
 };
 //#endregion
-//#region src/modules/redirect-to-mobile/smsSentView.tsx
-var SmsSentView = ({ formattedPhone, hasError, resendTimer, canResendSms, onResend, onChangePhone }) => {
+//#region src/modules/redirect-to-mobile/qrScreen.tsx
+var loadSmsTabContent = () => import("../smsTabContent-C1C1g4GT.js").then((module) => module.SmsTabContent);
+var LazySmsTabContent = (props) => {
 	const { t } = useTranslation();
-	return /* @__PURE__ */ u("div", {
-		class: "IncodeRedirectLinkSent",
-		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 }),
-			/* @__PURE__ */ u("p", {
-				class: "IncodeRedirectLinkSentPhone",
-				children: t("redirect.linkSentTo", { phone: formattedPhone })
-			}),
-			/* @__PURE__ */ u(Spacer, { size: 32 }),
-			/* @__PURE__ */ u("div", {
-				class: "IncodeRedirectLinkSentActions",
-				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",
-					components: {
-						resend: /* @__PURE__ */ u(Button, {
-							variant: "link",
-							size: "inline",
-							onClick: onResend,
-							"data-testid": "sms-resend"
-						}),
-						changePhone: /* @__PURE__ */ u(Button, {
-							variant: "link",
-							size: "inline",
-							onClick: onChangePhone,
-							"data-testid": "sms-change-phone"
-						})
-					}
-				})
-			})
-		] })]
+	const state = useLazyComponentLoader({ loader: loadSmsTabContent });
+	if (state.status === "loaded") return /* @__PURE__ */ u(state.Component, { ...props });
+	if (state.status === "error") return /* @__PURE__ */ u("div", {
+		role: "alert",
+		children: /* @__PURE__ */ u(AutoFocusTitle, { children: t("common.somethingWentWrong") })
 	});
+	return /* @__PURE__ */ u(TransitionSpinner, { spinnerConfig: { subtitle: "" } });
 };
-//#endregion
-//#region src/modules/redirect-to-mobile/smsForm.tsx
-var SmsForm = ({ countryCode, error, isSending, isPhoneValid, onPhoneChange, onSendSms }) => {
-	const { t } = useTranslation();
-	return /* @__PURE__ */ u(k, { children: [/* @__PURE__ */ u(PhoneInputComposed, {
-		id: "sms-phone",
-		countryCode,
-		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")
-	})] });
-};
-//#endregion
-//#region src/modules/redirect-to-mobile/smsTabContent.tsx
-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, smsFailed, smsResendTimer, canResendSms, error, manager, onResend }) => {
-	const { t } = useTranslation();
-	const [phoneNumber, setPhoneNumber] = d(phonePrefix);
-	const [isPhoneValid, setIsPhoneValid] = d(false);
-	const [isSending, setIsSending] = d(false);
-	const countryCode = getCountryByCallingCode(phonePrefix)?.code ?? "";
-	const formattedPhone = formatPhoneNumber(phoneNumber, phonePrefix);
-	const handlePhoneChange = q((phone, valid) => {
-		setPhoneNumber(phone);
-		setIsPhoneValid(valid);
-	}, []);
-	const handleSendSms = q(() => {
-		setIsSending(true);
-		manager.sendSms(phoneNumber);
-		setIsSending(false);
-	}, [manager, phoneNumber]);
-	const handleResend = q(() => {
-		handleSendSms();
-		onResend();
-	}, [handleSendSms, onResend]);
-	const handleChangePhone = q(() => {
-		setPhoneNumber(phonePrefix);
-		setIsPhoneValid(false);
-		manager.resetSms();
-	}, [manager, phonePrefix]);
-	return /* @__PURE__ */ u(k, { children: smsSent || smsFailed ? /* @__PURE__ */ u(SmsSentView, {
-		formattedPhone,
-		hasError: smsFailed,
-		resendTimer: smsResendTimer,
-		canResendSms,
-		onResend: handleResend,
-		onChangePhone: handleChangePhone
-	}) : /* @__PURE__ */ u(k, { children: [/* @__PURE__ */ u("p", {
-		class: "IncodeRedirectTabDescription",
-		children: t("v2.redirectToMobile.sms.description")
-	}), /* @__PURE__ */ u(SmsForm, {
-		countryCode,
-		phonePrefix,
-		error,
-		isSending,
-		isPhoneValid,
-		onPhoneChange: handlePhoneChange,
-		onSendSms: handleSendSms
-	})] }) });
-};
-//#endregion
-//#region src/modules/redirect-to-mobile/qrScreen.tsx
 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 [qrReady, setQrReady] = d(false);
+	const handleQrReady = q(() => setQrReady(true), []);
+	useLazyComponentLoader({ loader: qrReady && !disableSmsOption ? loadSmsTabContent : void 0 });
 	const handleResend = q(() => {
 		clearTimeout(resendToastTimerRef.current);
 		setShowResendToast(true);
@@ -2735,10 +2588,13 @@ var QrScreen = ({ redirectUrl, phonePrefix, smsSent, smsFailed, smsResendTimer,
 					class: "IncodeRedirectOptions",
 					children: [/* @__PURE__ */ u(Tabs.Content, {
 						value: "qr",
-						children: /* @__PURE__ */ u(QrTabContent, { redirectUrl })
+						children: /* @__PURE__ */ u(QrTabContent, {
+							redirectUrl,
+							onQrReady: handleQrReady
+						})
 					}), !disableSmsOption && /* @__PURE__ */ u(Tabs.Content, {
 						value: "sms",
-						children: /* @__PURE__ */ u(SmsTabContent, {
+						children: /* @__PURE__ */ u(LazySmsTabContent, {
 							phonePrefix,
 							smsSent,
 							smsFailed,

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

@@ -66,7 +66,7 @@
 .IncodeRedirectContainer .IncodeRedirectToast {
   top: var(--spacing-16, var(--spacing-16, 16px));
   z-index: 50;
-  animation: 3s ease-in-out forwards fadeInOut;
+  animation: 3s ease-in-out forwards incodeToastFadeInOut;
   position: absolute;
   left: 50%;
 }
@@ -77,28 +77,6 @@
   display: inline-flex;
 }
 
-@keyframes fadeInOut {
-  0% {
-    opacity: 0;
-    transform: translate(-50%, -20px);
-  }
-
-  15% {
-    opacity: 1;
-    transform: translate(-50%);
-  }
-
-  85% {
-    opacity: 1;
-    transform: translate(-50%);
-  }
-
-  100% {
-    opacity: 0;
-    transform: translate(-50%, -20px);
-  }
-}
-
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectHeader {
   flex-direction: column;
   align-items: center;
@@ -107,7 +85,6 @@
 }
 
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectHeader .IncodeRedirectLogoWrapper {
-  --min-height-logo-wrapper: 44px;
   width: 100%;
   min-height: var(--min-height-logo-wrapper);
   justify-content: center;
@@ -198,7 +175,7 @@
 }
 
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectTabs .IncodeRedirectTab:focus-visible {
-  border-radius: var(--radius-xs, .125rem);
+  border-radius: var(--radius-x-small, var(--border-radius-x-small));
   outline-style: var(--tw-outline-style);
   outline-offset: 2px;
   outline-width: 2px;
@@ -309,7 +286,6 @@
 }
 
 .IncodeRedirectFinishedContainer .IncodeRedirectFinishedTitle {
-  --width-finished-title: 500px;
   margin-block: var(--spacing-20, var(--spacing-20, 20px));
   text-align: center;
   font-size: var(--text-3xl, 1.875rem);
@@ -321,7 +297,6 @@
 }
 
 .IncodeRedirectFinishedContainer .IncodeRedirectFinishedSubtitle {
-  --width-finished-subtitle: 400px;
   text-align: center;
   font-size: var(--text-2xl, 1.5rem);
   line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));

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

@@ -0,0 +1 @@
+export default "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n    .IncodeComponent, .IncodeComponent *, .IncodeComponent :before, .IncodeComponent :after, .IncodeComponent ::backdrop {\n      --tw-border-style: solid;\n      --tw-outline-style: solid;\n      --tw-font-weight: initial;\n    }\n  }\n}\n\n.IncodeRedirectRoot {\n  width: 100%;\n  height: 100%;\n}\n\n.IncodeRedirectRoot .IncodeRedirectLogo {\n  max-width: 100%;\n  max-height: 100%;\n}\n\n.IncodeRedirectRoot .IncodeRedirectContainer {\n  background-color: var(--color-surface-neutral-50, var(--surface-neutral-50));\n  justify-content: center;\n  align-items: safe center;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: relative;\n  overflow-y: auto;\n}\n\n.IncodeRedirectRoot .IncodeRedirectContainer .IncodeRedirectCard {\n  border-radius: var(--radius-medium, var(--border-radius-medium));\n  border-style: var(--tw-border-style);\n  border-width: 1px;\n  border-color: var(--color-border-neutral-100, var(--border-neutral-100));\n  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n  width: 100%;\n  padding-inline: var(--spacing-24, var(--spacing-24, 24px));\n  padding-block: var(--spacing-32, var(--spacing-32, 32px));\n  max-width: var(--redirect-card-max-width);\n  flex-direction: column;\n  align-items: center;\n  display: flex;\n  overflow-x: clip;\n}\n\n.IncodeRedirectRoot .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectTopGroup {\n  align-items: center;\n  gap: var(--spacing-32, var(--spacing-32, 32px));\n  flex-direction: column;\n  width: 100%;\n  display: flex;\n}\n\n.IncodeRedirectRoot .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions {\n  margin-bottom: var(--spacing-32, var(--spacing-32, 32px));\n  width: 100%;\n  max-width: var(--redirect-options-max-width);\n  flex-direction: column;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeRedirectContainer .IncodeRedirectToast {\n  top: var(--spacing-16, var(--spacing-16, 16px));\n  z-index: 50;\n  animation: 3s ease-in-out forwards incodeToastFadeInOut;\n  position: absolute;\n  left: 50%;\n}\n\n.IncodeRedirectContainer .IncodeRedirectToastContent {\n  align-items: center;\n  gap: var(--spacing-12, var(--spacing-12, 12px));\n  display: inline-flex;\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectHeader {\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  display: flex;\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectHeader .IncodeRedirectLogoWrapper {\n  width: 100%;\n  min-height: var(--min-height-logo-wrapper);\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectHeader .IncodeRedirectLogo {\n  max-height: var(--logo-height, 44px);\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectHeader .IncodeRedirectTitle {\n  text-align: center;\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h2-size);\n  font-weight: var(--typography-headline-h2-weight);\n  line-height: var(--typography-headline-h2-line-height);\n  letter-spacing: var(--typography-headline-h2-letter-spacing);\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectHeader .IncodeRedirectSubtitle {\n  text-align: center;\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h5-size);\n  font-weight: var(--typography-headline-h5-weight);\n  line-height: var(--typography-headline-h5-line-height);\n  letter-spacing: var(--typography-headline-h5-letter-spacing);\n  color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectBottomNav {\n  width: 100%;\n  max-width: var(--redirect-form-column-max-width);\n  flex-direction: column;\n  flex: 1;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectBottomNav .IncodeRedirectFooterContent {\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  display: flex;\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectBottomNav .IncodeRedirectFooterContentText {\n  margin-block: var(--spacing-12, var(--spacing-12, 12px));\n  font-family: var(--Button-family, \"DM Sans\");\n  letter-spacing: 0;\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 100%;\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectBottomNav .IncodeRedirectFooterLogoWrapper {\n  padding-block: var(--spacing-8, var(--spacing-8, 8px));\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectTabs {\n  justify-content: center;\n  align-items: flex-end;\n  gap: var(--spacing-12, var(--spacing-12, 12px));\n  border-bottom-style: var(--tw-border-style);\n  border-bottom-width: 1px;\n  border-color: var(--color-border-neutral-100, var(--border-neutral-100));\n  width: 100%;\n  max-width: var(--redirect-tabs-max-width);\n  display: flex;\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectTabs .IncodeRedirectTab {\n  cursor: pointer;\n  border-bottom-style: var(--tw-border-style);\n  padding-inline: var(--spacing-24, var(--spacing-24, 24px));\n  padding-block: var(--spacing-12, var(--spacing-12, 12px));\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h5-size);\n  font-weight: var(--typography-headline-h5-weight);\n  line-height: var(--typography-headline-h5-line-height);\n  letter-spacing: var(--typography-headline-h5-letter-spacing);\n  color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n  background-color: #0000;\n  border-color: #0000;\n  border-bottom-width: 2px;\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectTabs .IncodeRedirectTab:focus-visible {\n  border-radius: var(--radius-x-small, var(--border-radius-x-small));\n  outline-style: var(--tw-outline-style);\n  outline-offset: 2px;\n  outline-width: 2px;\n  outline-color: var(--color-border-status-focus, var(--border-status-focus));\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectTabs .IncodeRedirectTab.IncodeRedirectTabActive {\n  border-color: var(--color-border-brand-500, var(--border-brand-500));\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions > [role=\"tabpanel\"] {\n  align-items: center;\n  gap: var(--spacing-32, var(--spacing-32, 32px));\n  flex-direction: column;\n  width: 100%;\n  display: flex;\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectTabDescription {\n  margin-top: var(--spacing-32, var(--spacing-32, 32px));\n  text-align: center;\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h5-size);\n  font-weight: var(--typography-headline-h5-weight);\n  line-height: var(--typography-headline-h5-line-height);\n  letter-spacing: var(--typography-headline-h5-letter-spacing);\n  color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n  max-width: var(--redirect-tab-description-max-width);\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectQrWrapper {\n  border-style: var(--tw-border-style);\n  border-width: 1px;\n  border-color: var(--color-border-neutral-100, var(--border-neutral-100));\n  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n  padding: var(--spacing-12, var(--spacing-12, 12px));\n  border-radius: var(--redirect-qr-wrapper-border-radius);\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputComposed {\n  --phone-input-country-code-width: var(--redirect-phone-input-country-code-width);\n  max-width: var(--redirect-form-column-max-width);\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectSmsSendButton {\n  width: 100%;\n  max-width: var(--redirect-form-column-max-width);\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent {\n  margin-top: var(--spacing-32, var(--spacing-32, 32px));\n  flex-direction: column;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent .IncodeRedirectLinkSentTitle {\n  text-align: center;\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h2-size);\n  font-weight: var(--typography-headline-h2-weight);\n  line-height: var(--typography-headline-h2-line-height);\n  letter-spacing: var(--typography-headline-h2-letter-spacing);\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent .IncodeRedirectLinkSentPhone {\n  text-align: center;\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h5-size);\n  font-weight: var(--typography-headline-h5-weight);\n  line-height: var(--typography-headline-h5-line-height);\n  letter-spacing: var(--typography-headline-h5-letter-spacing);\n  color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent .IncodeRedirectLinkSentActions {\n  margin-block: var(--spacing-8, var(--spacing-8, 8px));\n  justify-content: center;\n  align-items: center;\n  gap: var(--spacing-4, var(--spacing-4, 4px));\n  font-family: var(--Button-family, \"DM Sans\");\n  letter-spacing: 0;\n  width: var(--redirect-form-column-max-width);\n  flex-wrap: wrap;\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 100%;\n  display: flex;\n}\n\n.IncodeRedirectFinishedContainer {\n  flex-direction: column;\n  justify-content: safe center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  overflow-y: auto;\n}\n\n.IncodeRedirectFinishedContainer .IncodeRedirectLogo {\n  max-height: var(--logo-height, 44px);\n}\n\n.IncodeRedirectFinishedContainer .IncodeRedirectFinishedTitle {\n  margin-block: var(--spacing-20, var(--spacing-20, 20px));\n  text-align: center;\n  font-size: var(--text-3xl, 1.875rem);\n  line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));\n  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));\n  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n  width: var(--width-finished-title);\n}\n\n.IncodeRedirectFinishedContainer .IncodeRedirectFinishedSubtitle {\n  text-align: center;\n  font-size: var(--text-2xl, 1.5rem);\n  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));\n  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));\n  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n  width: var(--width-finished-subtitle);\n}\n\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false\n}\n";

package/dist/{registerIncodeElement-DW2PE_DX.js → registerIncodeElement-CbZczi4S.js}

@@ -1,4 +1,4 @@
-import { n as c } from "./vendor-preact-BPXMFRom.js";
+import { t as c } from "./vendor-preact-C0jX1Cbq.js";
 //#region src/shared/webComponent/registerIncodeElement.ts
 /**
 * Registers a Preact component as a Web Component with `shadow: false`.

package/dist/resendTimer-C0HqF9VE.js

@@ -0,0 +1,79 @@
+import { o as useTranslation } from "./uiConfig-BcjOx3PY.js";
+import { _ as y, c as A, h as q } from "./vendor-preact-C0jX1Cbq.js";
+//#region src/shared/resendTimer.ts
+var formatResendTimer = (seconds) => {
+	return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, "0")}`;
+};
+var DEFAULT_ANNOUNCEMENT_KEYS = {
+	resendAvailable: "otp.resendCodeAvailable",
+	timerStarted: "otp.timerStarted",
+	timerTenSeconds: "otp.timerTenSeconds",
+	timerFiveSeconds: "otp.timerFiveSeconds"
+};
+function useResendTimerAnnouncements({ canResend, resendTimer, disabled = false, i18nKeys }) {
+	const { t } = useTranslation();
+	const announcementKeys = {
+		...DEFAULT_ANNOUNCEMENT_KEYS,
+		...i18nKeys
+	};
+	const liveRef = A(null);
+	const prevCanResendRef = A(canResend);
+	const hasAnnouncedStartRef = A(false);
+	const announceTimerRef = A();
+	const announce = q((message) => {
+		const node = liveRef.current;
+		if (!node) return;
+		clearTimeout(announceTimerRef.current);
+		node.textContent = "";
+		announceTimerRef.current = setTimeout(() => {
+			node.textContent = message;
+		}, 50);
+	}, []);
+	y(() => {
+		return () => clearTimeout(announceTimerRef.current);
+	}, []);
+	y(() => {
+		if (disabled) {
+			prevCanResendRef.current = canResend;
+			return;
+		}
+		const wasUnavailable = !prevCanResendRef.current;
+		prevCanResendRef.current = canResend;
+		if (wasUnavailable && canResend) announce(t(announcementKeys.resendAvailable));
+	}, [
+		canResend,
+		disabled,
+		announcementKeys.resendAvailable,
+		announce,
+		t
+	]);
+	y(() => {
+		if (disabled) {
+			hasAnnouncedStartRef.current = false;
+			return;
+		}
+		if (canResend || resendTimer <= 0) {
+			hasAnnouncedStartRef.current = false;
+			return;
+		}
+		if (!hasAnnouncedStartRef.current) {
+			hasAnnouncedStartRef.current = true;
+			announce(t(announcementKeys.timerStarted, { time: String(resendTimer) }));
+			return;
+		}
+		if (resendTimer === 10) announce(t(announcementKeys.timerTenSeconds));
+		else if (resendTimer === 5) announce(t(announcementKeys.timerFiveSeconds));
+	}, [
+		resendTimer,
+		canResend,
+		disabled,
+		announcementKeys.timerStarted,
+		announcementKeys.timerTenSeconds,
+		announcementKeys.timerFiveSeconds,
+		announce,
+		t
+	]);
+	return liveRef;
+}
+//#endregion
+export { useResendTimerAnnouncements as n, formatResendTimer as t };