@authhero/widget 0.19.2 → 0.21.0

package/dist/collection/components/authhero-node/authhero-node.js

@@ -1,4 +1,5 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
+import { countries, getCountryByCode, } from "../../utils/country-data";
 export class AuthheroNode {
     /**
      * The component configuration to render.
@@ -17,6 +18,23 @@ export class AuthheroNode {
      * Whether the password field is visible.
      */
     passwordVisible = false;
+    /**
+     * Selected country for TEL input with country selector.
+     */
+    selectedCountry = getCountryByCode("US");
+    /**
+     * Local phone number (without dial code) for TEL input.
+     */
+    localPhoneNumber = "";
+    /**
+     * Whether the country dropdown is open.
+     */
+    countryDropdownOpen = false;
+    /**
+     * Whether the TEL field is currently in email mode (allow_email config).
+     * When true, the value is emitted as-is without dial code prefix.
+     */
+    telEmailMode = false;
     /**
      * Emitted when a field value changes.
      */
@@ -25,6 +43,155 @@ export class AuthheroNode {
      * Emitted when a button is clicked.
      */
     buttonClick;
+    componentChanged() {
+        this.initCountryFromConfig();
+        this.initTelValue();
+    }
+    valueChanged() {
+        this.initTelValue();
+    }
+    componentWillLoad() {
+        this.initCountryFromConfig();
+        this.initTelValue();
+    }
+    initCountryFromConfig() {
+        if (this.component?.type === "TEL") {
+            const config = this.component.config;
+            const defaultCountry = config?.default_country;
+            if (defaultCountry) {
+                this.selectedCountry = getCountryByCode(defaultCountry);
+            }
+            // For allow_email mode, start in email/text mode (no country picker)
+            // until the user starts typing digits
+            if (config?.allow_email === true) {
+                this.telEmailMode = true;
+            }
+        }
+    }
+    /**
+     * Hydrate localPhoneNumber (and selectedCountry) from the effective value
+     * for TEL fields. The full value is stored as `{dialCode}{localNumber}`,
+     * e.g. "+15551234567".
+     */
+    initTelValue() {
+        if (this.component?.type !== "TEL")
+            return;
+        const config = this.component.config;
+        const allowEmail = config?.allow_email === true;
+        const fullValue = this.getEffectiveValue();
+        if (!fullValue) {
+            this.localPhoneNumber = "";
+            if (allowEmail) {
+                this.telEmailMode = true;
+            }
+            return;
+        }
+        // Try to match a country by dial code (longest match first)
+        if (fullValue.startsWith("+")) {
+            const sorted = [...countries].sort((a, b) => b.dialCode.length - a.dialCode.length);
+            for (const country of sorted) {
+                if (fullValue.startsWith(country.dialCode)) {
+                    this.selectedCountry = country;
+                    this.localPhoneNumber = fullValue.slice(country.dialCode.length);
+                    if (allowEmail) {
+                        this.telEmailMode = false;
+                    }
+                    return;
+                }
+            }
+        }
+        // No dial code match — check if it looks like an email or a phone number
+        this.localPhoneNumber = fullValue;
+        if (allowEmail) {
+            const looksLikePhone = /^[+\d]/.test(fullValue);
+            this.telEmailMode = !looksLikePhone;
+        }
+    }
+    handleCountryChange = (e) => {
+        const target = e.target;
+        this.selectedCountry = getCountryByCode(target.value);
+        // Re-emit the full phone number with new dial code
+        const fullNumber = this.localPhoneNumber
+            ? `${this.selectedCountry.dialCode}${this.localPhoneNumber}`
+            : "";
+        this.fieldChange.emit({ id: this.component.id, value: fullNumber });
+    };
+    /**
+     * Try to detect a dial code prefix in the raw input (e.g. "+46", "0046")
+     * and update selectedCountry accordingly. Returns the local number portion
+     * (after the dial code) if a match was found, or null if no match.
+     */
+    detectDialCodeFromInput(raw) {
+        // Normalise "00" international prefix to "+"
+        const normalized = raw.startsWith("00") ? "+" + raw.slice(2) : raw;
+        if (!normalized.startsWith("+"))
+            return null;
+        // Match longest dial code first
+        const sorted = [...countries].sort((a, b) => b.dialCode.length - a.dialCode.length);
+        for (const country of sorted) {
+            if (normalized.startsWith(country.dialCode)) {
+                this.selectedCountry = country;
+                return normalized.slice(country.dialCode.length);
+            }
+        }
+        return null;
+    }
+    handlePhoneInput = (e) => {
+        const target = e.target;
+        const value = target.value;
+        const config = this.component.config;
+        const allowEmail = config?.allow_email === true;
+        if (allowEmail) {
+            // Detect phone mode: value starts with digit or '+', and no '@'.
+            // When the field is empty, revert to neutral (email) mode so the
+            // country picker disappears and the user can start fresh.
+            const looksLikePhone = value.length > 0 && /^[+\d]/.test(value) && !value.includes("@");
+            this.telEmailMode = !looksLikePhone;
+            if (!this.telEmailMode) {
+                // Phone mode — first try dial code detection before stripping '+'
+                // so that typing +46 or 0046 can match a country
+                const dialLocal = this.detectDialCodeFromInput(value);
+                if (dialLocal !== null) {
+                    // Dial code matched — strip it from the input and show only local part
+                    const cleanedLocal = dialLocal
+                        .replace(/[^+\d\s\-()]/g, "")
+                        .replace(/\+/g, "");
+                    target.value = cleanedLocal;
+                    this.localPhoneNumber = cleanedLocal;
+                    const fullNumber = `${this.selectedCountry.dialCode}${cleanedLocal}`;
+                    this.fieldChange.emit({ id: this.component.id, value: fullNumber });
+                }
+                else {
+                    // No dial code — strip non-phone chars and '+' (picker provides the prefix)
+                    const cleaned = value.replace(/[^+\d\s\-()]/g, "").replace(/\+/g, "");
+                    if (cleaned !== value) {
+                        target.value = cleaned;
+                    }
+                    this.localPhoneNumber = cleaned;
+                    const fullNumber = cleaned
+                        ? `${this.selectedCountry.dialCode}${cleaned}`
+                        : "";
+                    this.fieldChange.emit({ id: this.component.id, value: fullNumber });
+                }
+            }
+            else {
+                // Email or text — emit as-is
+                this.localPhoneNumber = value;
+                this.fieldChange.emit({ id: this.component.id, value });
+            }
+            return;
+        }
+        // Standard phone-only mode — strip '+' since the picker provides the prefix
+        const cleaned = value.replace(/[^\d\s\-()]/g, "");
+        if (cleaned !== value) {
+            target.value = cleaned;
+        }
+        this.localPhoneNumber = cleaned;
+        const fullNumber = cleaned
+            ? `${this.selectedCountry.dialCode}${cleaned}`
+            : "";
+        this.fieldChange.emit({ id: this.component.id, value: fullNumber });
+    };
     handleInput = (e) => {
         const target = e.target;
         this.fieldChange.emit({ id: this.component.id, value: target.value });
@@ -34,6 +201,16 @@ export class AuthheroNode {
             e.preventDefault();
             this.buttonClick.emit({ id: "submit", type: "submit", value: "next" });
         }
+        // In combined TEL+email mode, backspace on an empty field exits phone mode
+        if (e.key === "Backspace" && !this.telEmailMode) {
+            const target = e.target;
+            const config = this.component.config;
+            if (config?.allow_email === true && target.value.length === 0) {
+                this.telEmailMode = true;
+                this.localPhoneNumber = "";
+                this.fieldChange.emit({ id: this.component.id, value: "" });
+            }
+        }
     };
     handleCheckbox = (e) => {
         const target = e.target;
@@ -206,8 +383,17 @@ export class AuthheroNode {
     renderTelField(component) {
         const inputId = `input-${component.id}`;
         const errors = this.getErrors();
-        const effectiveValue = this.getEffectiveValue();
-        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "tel", name: component.id, value: effectiveValue ?? "", placeholder: component.config?.placeholder, required: component.required, disabled: this.disabled, autocomplete: "tel", onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+        const config = component.config;
+        const allowEmail = config?.allow_email === true;
+        const hasValue = this.localPhoneNumber.length > 0;
+        // In allow_email mode, show the country picker only when the user is typing a phone number
+        const showCountryPicker = allowEmail ? !this.telEmailMode : true;
+        // Calculate dynamic width: flag + space + dial code + small padding for dropdown arrow
+        const selectedText = `${this.selectedCountry.flag} ${this.selectedCountry.dialCode}`;
+        const selectWidth = `${selectedText.length + 1}ch`;
+        const countrySelect = showCountryPicker ? (h("select", { class: "country-select", part: "country-select", style: { width: selectWidth, minWidth: "0" }, onChange: this.handleCountryChange, disabled: this.disabled, "aria-label": "Country code" }, countries.map((country) => (h("option", { value: country.code, selected: this.selectedCountry.code === country.code, key: country.code }, `${country.flag} ${country.dialCode}`))))) : null;
+        const inputType = allowEmail && this.telEmailMode ? "text" : "tel";
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: showCountryPicker ? "phone-input-wrapper" : "", part: "phone-input-wrapper" }, countrySelect, h("div", { class: "input-container" }, h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: inputType, name: component.id, "data-input-name": component.id, value: this.localPhoneNumber, placeholder: " ", required: component.required, disabled: this.disabled, autocomplete: allowEmail && this.telEmailMode ? "email" : "tel-national", onInput: this.handlePhoneInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue))), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
     }
     renderUrlField(component) {
         const inputId = `input-${component.id}`;
@@ -284,7 +470,21 @@ export class AuthheroNode {
             const safeProvider = this.sanitizeForCssToken(provider);
             const strategy = getProviderStrategy(provider);
             const icon = getProviderIcon(provider);
-            return (h("button", { type: "button", class: `btn btn-secondary btn-social btn-social-${safeProvider}${icon ? "" : " no-icon"}`, part: `button button-secondary button-social button-social-${safeProvider}`, "data-connection-name": provider, "data-strategy": strategy, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "SOCIAL", provider), key: provider }, icon, h("span", { class: "btn-social-content", part: `button-social-content button-social-content-${safeProvider}` }, h("span", { part: `button-social-text button-social-text-${safeProvider}` }, getButtonText(provider)), h("span", { class: "btn-social-subtitle", part: `button-social-subtitle button-social-subtitle-${safeProvider}` }))));
+            const details = detailsMap.get(provider);
+            const btnClass = `btn btn-secondary btn-social btn-social-${safeProvider}${icon ? "" : " no-icon"}`;
+            const btnPart = `button button-secondary button-social button-social-${safeProvider}`;
+            const content = [
+                icon,
+                h("span", { class: "btn-social-content", part: `button-social-content button-social-content-${safeProvider}` }, h("span", { part: `button-social-text button-social-text-${safeProvider}` }, getButtonText(provider)), h("span", { class: "btn-social-subtitle", part: `button-social-subtitle button-social-subtitle-${safeProvider}` })),
+            ];
+            if (details?.href) {
+                return (h("a", { href: this.disabled ? undefined : details.href, class: btnClass, part: btnPart, "data-connection-name": provider, "data-strategy": strategy, key: provider, "aria-disabled": this.disabled ? "true" : undefined, tabindex: this.disabled ? -1 : undefined, onClick: (e) => {
+                        if (this.disabled) {
+                            e.preventDefault();
+                        }
+                    } }, content));
+            }
+            return (h("button", { type: "button", class: btnClass, part: btnPart, "data-connection-name": provider, "data-strategy": strategy, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "SOCIAL", provider), key: provider }, content));
         })));
     }
     // ===========================================================================
@@ -378,7 +578,7 @@ export class AuthheroNode {
                 "mutable": false,
                 "complexType": {
                     "original": "FormComponent | RuntimeComponent",
-                    "resolved": "{ type: \"AUTH0_VERIFIABLE_CREDENTIALS\"; id: string; config: { credential_type?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"AUTH0_VERIFIABLE_CREDENTIALS\"; id: string; config: { credential_type?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"BOOLEAN\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { default_value?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"BOOLEAN\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { default_value?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"CARDS\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; description?: string | undefined; image?: string | undefined; }[] | undefined; multi_select?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"CARDS\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; description?: string | undefined; image?: string | undefined; }[] | undefined; multi_select?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"CHOICE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; default_value?: string | string[] | undefined; display?: \"radio\" | \"checkbox\" | undefined; multiple?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"CHOICE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; default_value?: string | string[] | undefined; display?: \"radio\" | \"checkbox\" | undefined; multiple?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"CUSTOM\"; id: string; config: { code?: string | undefined; schema?: Record<string, any> | undefined; component?: string | undefined; props?: Record<string, any> | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"CUSTOM\"; id: string; config: { code?: string | undefined; schema?: Record<string, any> | undefined; component?: string | undefined; props?: Record<string, any> | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"DATE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { format?: string | undefined; min?: string | undefined; max?: string | undefined; default_value?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"DATE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { format?: string | undefined; min?: string | undefined; max?: string | undefined; default_value?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"DIVIDER\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { text?: string | undefined; } | undefined; order?: number | undefined; } | { type: \"DIVIDER\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { text?: string | undefined; } | undefined; order?: number | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"DROPDOWN\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; placeholder?: string | undefined; default_value?: string | string[] | undefined; multiple?: boolean | undefined; searchable?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"DROPDOWN\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; placeholder?: string | undefined; default_value?: string | string[] | undefined; multiple?: boolean | undefined; searchable?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"EMAIL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; default_value?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"EMAIL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; default_value?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"FILE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { multiple?: boolean | undefined; accept?: string | undefined; max_size?: number | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"FILE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { multiple?: boolean | undefined; accept?: string | undefined; max_size?: number | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"GMAPS_ADDRESS\"; id: string; config: { api_key?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"GMAPS_ADDRESS\"; id: string; config: { api_key?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"HTML\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | undefined; order?: number | undefined; } | { type: \"HTML\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | undefined; order?: number | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"IMAGE\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { src?: string | undefined; alt?: string | undefined; width?: number | undefined; height?: number | undefined; } | undefined; order?: number | undefined; } | { type: \"IMAGE\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { src?: string | undefined; alt?: string | undefined; width?: number | undefined; height?: number | undefined; } | undefined; order?: number | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"JUMP_BUTTON\"; id: string; config: { text?: string | undefined; target_step?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } | { type: \"JUMP_BUTTON\"; id: string; config: { text?: string | undefined; target_step?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"LEGAL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { text: string; html?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"LEGAL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { text: string; html?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"NEXT_BUTTON\"; id: string; config: { text?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } | { type: \"NEXT_BUTTON\"; id: string; config: { text?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"NUMBER\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min?: number | undefined; max?: number | undefined; default_value?: string | undefined; step?: number | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"NUMBER\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min?: number | undefined; max?: number | undefined; default_value?: string | undefined; step?: number | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"PASSWORD\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min_length?: number | undefined; default_value?: string | undefined; show_toggle?: boolean | undefined; forgot_password_link?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"PASSWORD\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min_length?: number | undefined; default_value?: string | undefined; show_toggle?: boolean | undefined; forgot_password_link?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"PAYMENT\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { provider?: string | undefined; currency?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"PAYMENT\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { provider?: string | undefined; currency?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"PREVIOUS_BUTTON\"; id: string; config: { text?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } | { type: \"PREVIOUS_BUTTON\"; id: string; config: { text?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"RECAPTCHA\"; id: string; config: { site_key?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"RECAPTCHA\"; id: string; config: { site_key?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"RESEND_BUTTON\"; id: string; config: { text?: string | undefined; resend_action?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } | { type: \"RESEND_BUTTON\"; id: string; config: { text?: string | undefined; resend_action?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"RICH_TEXT\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | undefined; order?: number | undefined; } | { type: \"RICH_TEXT\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | undefined; order?: number | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"SOCIAL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { providers?: string[] | undefined; provider_details?: { name: string; icon_url?: string | undefined; display_name?: string | undefined; strategy?: string | undefined; }[] | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"SOCIAL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { providers?: string[] | undefined; provider_details?: { name: string; icon_url?: string | undefined; display_name?: string | undefined; strategy?: string | undefined; }[] | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"TEL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; default_value?: string | undefined; default_country?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"TEL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; default_value?: string | undefined; default_country?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"TEXT\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; max_length?: number | undefined; default_value?: string | undefined; multiline?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"TEXT\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; max_length?: number | undefined; default_value?: string | undefined; multiline?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"URL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; default_value?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"URL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; default_value?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; }",
+                    "resolved": "{ type: \"AUTH0_VERIFIABLE_CREDENTIALS\"; id: string; config: { credential_type?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"AUTH0_VERIFIABLE_CREDENTIALS\"; id: string; config: { credential_type?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"BOOLEAN\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { default_value?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"BOOLEAN\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { default_value?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"CARDS\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; description?: string | undefined; image?: string | undefined; }[] | undefined; multi_select?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"CARDS\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; description?: string | undefined; image?: string | undefined; }[] | undefined; multi_select?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"CHOICE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; default_value?: string | string[] | undefined; display?: \"radio\" | \"checkbox\" | undefined; multiple?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"CHOICE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; default_value?: string | string[] | undefined; display?: \"radio\" | \"checkbox\" | undefined; multiple?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"CUSTOM\"; id: string; config: { code?: string | undefined; schema?: Record<string, any> | undefined; component?: string | undefined; props?: Record<string, any> | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"CUSTOM\"; id: string; config: { code?: string | undefined; schema?: Record<string, any> | undefined; component?: string | undefined; props?: Record<string, any> | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"DATE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { format?: string | undefined; min?: string | undefined; max?: string | undefined; default_value?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"DATE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { format?: string | undefined; min?: string | undefined; max?: string | undefined; default_value?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"DIVIDER\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { text?: string | undefined; } | undefined; order?: number | undefined; } | { type: \"DIVIDER\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { text?: string | undefined; } | undefined; order?: number | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"DROPDOWN\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; placeholder?: string | undefined; default_value?: string | string[] | undefined; multiple?: boolean | undefined; searchable?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"DROPDOWN\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; placeholder?: string | undefined; default_value?: string | string[] | undefined; multiple?: boolean | undefined; searchable?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"EMAIL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; default_value?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"EMAIL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; default_value?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"FILE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { multiple?: boolean | undefined; accept?: string | undefined; max_size?: number | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"FILE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { multiple?: boolean | undefined; accept?: string | undefined; max_size?: number | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"GMAPS_ADDRESS\"; id: string; config: { api_key?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"GMAPS_ADDRESS\"; id: string; config: { api_key?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"HTML\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | undefined; order?: number | undefined; } | { type: \"HTML\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | undefined; order?: number | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"IMAGE\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { src?: string | undefined; alt?: string | undefined; width?: number | undefined; height?: number | undefined; } | undefined; order?: number | undefined; } | { type: \"IMAGE\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { src?: string | undefined; alt?: string | undefined; width?: number | undefined; height?: number | undefined; } | undefined; order?: number | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"JUMP_BUTTON\"; id: string; config: { text?: string | undefined; target_step?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } | { type: \"JUMP_BUTTON\"; id: string; config: { text?: string | undefined; target_step?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"LEGAL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { text: string; html?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"LEGAL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { text: string; html?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"NEXT_BUTTON\"; id: string; config: { text?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } | { type: \"NEXT_BUTTON\"; id: string; config: { text?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"NUMBER\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min?: number | undefined; max?: number | undefined; default_value?: string | undefined; step?: number | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"NUMBER\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min?: number | undefined; max?: number | undefined; default_value?: string | undefined; step?: number | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"PASSWORD\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min_length?: number | undefined; default_value?: string | undefined; show_toggle?: boolean | undefined; forgot_password_link?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"PASSWORD\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min_length?: number | undefined; default_value?: string | undefined; show_toggle?: boolean | undefined; forgot_password_link?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"PAYMENT\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { provider?: string | undefined; currency?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"PAYMENT\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { provider?: string | undefined; currency?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"PREVIOUS_BUTTON\"; id: string; config: { text?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } | { type: \"PREVIOUS_BUTTON\"; id: string; config: { text?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"RECAPTCHA\"; id: string; config: { site_key?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"RECAPTCHA\"; id: string; config: { site_key?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"RESEND_BUTTON\"; id: string; config: { text?: string | undefined; resend_action?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } | { type: \"RESEND_BUTTON\"; id: string; config: { text?: string | undefined; resend_action?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"RICH_TEXT\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | undefined; order?: number | undefined; } | { type: \"RICH_TEXT\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | undefined; order?: number | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"SOCIAL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { providers?: string[] | undefined; provider_details?: { name: string; icon_url?: string | undefined; display_name?: string | undefined; strategy?: string | undefined; href?: string | undefined; }[] | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"SOCIAL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { providers?: string[] | undefined; provider_details?: { name: string; icon_url?: string | undefined; display_name?: string | undefined; strategy?: string | undefined; href?: string | undefined; }[] | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"TEL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; default_value?: string | undefined; default_country?: string | undefined; allow_email?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"TEL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; default_value?: string | undefined; default_country?: string | undefined; allow_email?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"TEXT\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; max_length?: number | undefined; default_value?: string | undefined; multiline?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"TEXT\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; max_length?: number | undefined; default_value?: string | undefined; multiline?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"URL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; default_value?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"URL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; default_value?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } & { messages?: { type: \"error\" | \"info\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; }",
                     "references": {
                         "FormComponent": {
                             "location": "import",
@@ -444,7 +644,11 @@ export class AuthheroNode {
     }
     static get states() {
         return {
-            "passwordVisible": {}
+            "passwordVisible": {},
+            "selectedCountry": {},
+            "localPhoneNumber": {},
+            "countryDropdownOpen": {},
+            "telEmailMode": {}
         };
     }
     static get events() {
@@ -480,4 +684,13 @@ export class AuthheroNode {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "component",
+                "methodName": "componentChanged"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
 }

package/dist/collection/components/authhero-widget/authhero-widget.css

@@ -9,7 +9,7 @@
 :host {
   display: block;
   font-family: var(--ah-font-family, 'ulp-font', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, sans-serif);
-  font-size: var(--ah-font-size-base, 14px);
+  font-size: var(--ah-font-size-base, 16px);
   line-height: var(--ah-line-height-base, 1.5);
   color: var(--ah-color-text, #1e212a);
   -webkit-font-smoothing: antialiased;
@@ -83,7 +83,7 @@
 }
 
 .description {
-  font-size: var(--ah-font-size-description, 14px);
+  font-size: var(--ah-font-size-subtitle, 16px);
   text-align: var(--ah-title-align, center);
   margin: var(--ah-description-margin, 0 0 8px);
   color: var(--ah-color-text, #1e212a);