@authhero/widget 0.4.1 → 0.6.0

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

@@ -13,6 +13,10 @@ export class AuthheroNode {
      * Whether the component is disabled.
      */
     disabled = false;
+    /**
+     * Whether the password field is visible.
+     */
+    passwordVisible = false;
     /**
      * Emitted when a field value changes.
      */
@@ -38,6 +42,9 @@ export class AuthheroNode {
         }
         this.buttonClick.emit({ id: this.component.id, type, value });
     };
+    togglePasswordVisibility = () => {
+        this.passwordVisible = !this.passwordVisible;
+    };
     /**
      * Get error messages from the component.
      */
@@ -46,13 +53,32 @@ export class AuthheroNode {
         return (runtimeComp.messages?.filter((m) => m.type === "error") || []);
     }
     /**
-     * Render a label for a field.
+     * Render a floating label for a field.
+     */
+    renderFloatingLabel(text, inputId, required, hasValue) {
+        if (!text)
+            return null;
+        return (h("label", { class: { "input-label": true, floating: !!hasValue }, part: "label", htmlFor: inputId }, text, required && h("span", { class: "required" }, "*")));
+    }
+    /**
+     * Render a label for a field (non-floating version for checkboxes etc).
      */
     renderLabel(text, inputId, required) {
         if (!text)
             return null;
         return (h("label", { class: "input-label", part: "label", htmlFor: inputId }, text, required && h("span", { class: "required" }, "*")));
     }
+    /**
+     * Render the eye icon for password visibility toggle.
+     */
+    renderPasswordToggle() {
+        if (this.passwordVisible) {
+            // Eye-off icon (password is visible, click to hide)
+            return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }), h("line", { x1: "1", y1: "1", x2: "23", y2: "23" })));
+        }
+        // Eye icon (password is hidden, click to show)
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), h("circle", { cx: "12", cy: "12", r: "3" })));
+    }
     /**
      * Render error messages.
      */
@@ -104,21 +130,25 @@ export class AuthheroNode {
     renderTextField(component) {
         const inputId = `input-${component.id}`;
         const errors = this.getErrors();
-        const { placeholder, multiline, max_length } = component.config ?? {};
+        const { multiline, max_length } = component.config ?? {};
+        const hasValue = !!(this.value && this.value.length > 0);
         if (multiline) {
-            return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("textarea", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input textarea", name: component.id, placeholder: placeholder, required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }, this.value ?? ""), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+            return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("textarea", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input textarea", name: component.id, placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }, this.value ?? ""), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
         }
-        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: component.sensitive ? "password" : "text", name: component.id, value: this.value ?? "", placeholder: placeholder, required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: "input-container" }, h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: component.sensitive ? "password" : "text", name: component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
     }
     renderEmailField(component) {
         const inputId = `input-${component.id}`;
         const errors = this.getErrors();
-        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "email", name: component.id, value: this.value ?? "", placeholder: component.config?.placeholder, required: component.required, disabled: this.disabled, autocomplete: "email", onInput: this.handleInput }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+        const hasValue = !!(this.value && this.value.length > 0);
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: "input-container" }, h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "email", name: component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, autocomplete: "email", onInput: this.handleInput }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
     }
     renderPasswordField(component) {
         const inputId = `input-${component.id}`;
         const errors = this.getErrors();
-        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "password", name: component.id, value: this.value ?? "", placeholder: component.config?.placeholder, required: component.required, disabled: this.disabled, minLength: component.config?.min_length, autocomplete: "current-password", onInput: this.handleInput }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+        const hasValue = !!(this.value && this.value.length > 0);
+        const forgotPasswordLink = component.config?.forgot_password_link;
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: "input-container password-container" }, h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: this.passwordVisible ? "text" : "password", name: component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, minLength: component.config?.min_length, autocomplete: "current-password", onInput: this.handleInput }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue), h("button", { type: "button", class: "password-toggle", part: "password-toggle", onClick: this.togglePasswordVisibility, "aria-label": "Toggle password visibility", "aria-pressed": this.passwordVisible ? "true" : "false" }, this.renderPasswordToggle())), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint), forgotPasswordLink && (h("div", { class: "field-link", part: "field-link" }, h("a", { href: forgotPasswordLink, class: "link", part: "link" }, "Forgot password?")))));
     }
     renderNumberField(component) {
         const inputId = `input-${component.id}`;
@@ -165,7 +195,65 @@ export class AuthheroNode {
     }
     renderSocialField(component) {
         const providers = component.config?.providers ?? [];
-        return (h("div", { class: "social-buttons", part: "social-buttons" }, providers.map((provider) => (h("button", { type: "button", class: "btn btn-secondary btn-social", part: "button button-secondary button-social", "data-provider": provider, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "social", provider), key: provider }, "Continue with ", provider.charAt(0).toUpperCase() + provider.slice(1))))));
+        // Map provider IDs to display names
+        const getProviderDisplayName = (provider) => {
+            const displayNames = {
+                "google-oauth2": "Google",
+                facebook: "Facebook",
+                twitter: "Twitter",
+                github: "GitHub",
+                linkedin: "LinkedIn",
+                apple: "Apple",
+                microsoft: "Microsoft",
+                windowslive: "Microsoft",
+                amazon: "Amazon",
+                dropbox: "Dropbox",
+                bitbucket: "Bitbucket",
+                spotify: "Spotify",
+                slack: "Slack",
+                discord: "Discord",
+                twitch: "Twitch",
+                line: "LINE",
+                shopify: "Shopify",
+                paypal: "PayPal",
+                "paypal-sandbox": "PayPal",
+                box: "Box",
+                salesforce: "Salesforce",
+                "salesforce-sandbox": "Salesforce",
+                yahoo: "Yahoo",
+                auth0: "Auth0",
+            };
+            return (displayNames[provider.toLowerCase()] ||
+                provider
+                    .split("-")
+                    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                    .join(" "));
+        };
+        // Get provider icon SVG
+        const getProviderIcon = (provider) => {
+            const p = provider.toLowerCase();
+            if (p === "google-oauth2" || p === "google") {
+                return (h("svg", { class: "social-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z", fill: "#4285F4" }), h("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }), h("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z", fill: "#FBBC05" }), h("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })));
+            }
+            if (p === "facebook") {
+                return (h("svg", { class: "social-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z", fill: "#1877F2" })));
+            }
+            if (p === "apple") {
+                return (h("svg", { class: "social-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z", fill: "#000000" })));
+            }
+            if (p === "github") {
+                return (h("svg", { class: "social-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z", fill: "#181717" })));
+            }
+            if (p === "microsoft" || p === "windowslive") {
+                return (h("svg", { class: "social-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0 0h11.377v11.372H0V0z", fill: "#f25022" }), h("path", { d: "M12.623 0H24v11.372H12.623V0z", fill: "#7fba00" }), h("path", { d: "M0 12.623h11.377V24H0v-11.377z", fill: "#00a4ef" }), h("path", { d: "M12.623 12.623H24V24H12.623v-11.377z", fill: "#ffb900" })));
+            }
+            if (p === "linkedin") {
+                return (h("svg", { class: "social-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z", fill: "#0A66C2" })));
+            }
+            // Default: no icon
+            return null;
+        };
+        return (h("div", { class: "social-buttons", part: "social-buttons" }, providers.map((provider) => (h("button", { type: "button", class: "btn btn-secondary btn-social", part: "button button-secondary button-social", "data-provider": provider, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "social", provider), key: provider }, getProviderIcon(provider), h("span", null, "Continue with ", getProviderDisplayName(provider)))))));
     }
     // ===========================================================================
     // Main Render
@@ -258,7 +346,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; } | { 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: \"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; } | { 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: \"CHOICE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; display?: \"radio\" | \"checkbox\" | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"CHOICE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; display?: \"radio\" | \"checkbox\" | 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: \"CUSTOM\"; id: string; config: { 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; } | { type: \"CUSTOM\"; id: string; config: { 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: \"DATE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { format?: string | undefined; min?: string | undefined; max?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"DATE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { format?: string | undefined; min?: string | undefined; max?: 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: \"DIVIDER\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: {} | undefined; order?: number | undefined; } | { type: \"DIVIDER\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: {} | 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; searchable?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"DROPDOWN\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; placeholder?: string | 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: \"EMAIL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"EMAIL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: 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: \"FILE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { accept?: string | undefined; max_size?: number | undefined; multiple?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"FILE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { accept?: string | undefined; max_size?: number | 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: \"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; } | { 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: \"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; step?: number | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"NUMBER\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min?: number | undefined; max?: number | 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: \"PASSWORD\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min_length?: number | undefined; show_toggle?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"PASSWORD\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min_length?: number | undefined; show_toggle?: 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: \"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; } | { 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: \"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; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"SOCIAL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { providers?: 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_country?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"TEL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: 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: \"TEXT\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; multiline?: boolean | undefined; max_length?: number | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"TEXT\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; multiline?: boolean | undefined; max_length?: 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: \"URL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"URL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: 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; }",
+                    "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; } | { 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: \"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; } | { 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: \"CHOICE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; display?: \"radio\" | \"checkbox\" | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"CHOICE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; display?: \"radio\" | \"checkbox\" | 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: \"CUSTOM\"; id: string; config: { 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; } | { type: \"CUSTOM\"; id: string; config: { 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: \"DATE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { format?: string | undefined; min?: string | undefined; max?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"DATE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { format?: string | undefined; min?: string | undefined; max?: 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: \"DIVIDER\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: {} | undefined; order?: number | undefined; } | { type: \"DIVIDER\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: {} | 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; searchable?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"DROPDOWN\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; placeholder?: string | 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: \"EMAIL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"EMAIL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: 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: \"FILE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { accept?: string | undefined; max_size?: number | undefined; multiple?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"FILE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { accept?: string | undefined; max_size?: number | 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: \"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; } | { 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: \"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; step?: number | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"NUMBER\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min?: number | undefined; max?: number | 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: \"PASSWORD\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min_length?: number | undefined; show_toggle?: boolean | undefined; forgot_password_link?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"PASSWORD\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min_length?: number | 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: \"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; } | { 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: \"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; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"SOCIAL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { providers?: 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_country?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"TEL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: 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: \"TEXT\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; multiline?: boolean | undefined; max_length?: number | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"TEXT\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; multiline?: boolean | undefined; max_length?: 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: \"URL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"URL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: 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; }",
                     "references": {
                         "FormComponent": {
                             "location": "import",
@@ -324,6 +412,11 @@ export class AuthheroNode {
             }
         };
     }
+    static get states() {
+        return {
+            "passwordVisible": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "fieldChange",

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

@@ -1,13 +1,19 @@
 /**
  * AuthHero Widget Component Styles
  * 
- * Uses CSS custom properties from themes/variables.css
+ * Pixel-perfect Auth0 Universal Login compatibility
+ * Uses CSS custom properties for theming
  * Exposes CSS parts for external styling via ::part()
  */
 
 :host {
   display: block;
-  font-family: var(--ah-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
+  font-family: var(--ah-font-family, 'ulp-font', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, sans-serif);
+  font-size: var(--ah-font-size-base, 14px);
+  line-height: var(--ah-line-height-base, 1.5);
+  color: var(--ah-color-text, #1e212a);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 /* ==========================================================================
@@ -17,11 +23,30 @@
 
 .widget-container {
   max-width: var(--ah-widget-max-width, 400px);
+  width: 100%;
   margin: 0 auto;
-  padding: var(--ah-widget-padding, 2rem);
   background-color: var(--ah-color-bg, #ffffff);
-  border-radius: var(--ah-widget-radius, 8px);
-  box-shadow: var(--ah-widget-shadow, 0 2px 10px rgba(0, 0, 0, 0.1));
+  border-radius: var(--ah-widget-radius, 5px);
+  box-shadow: var(--ah-widget-shadow, 0 4px 22px 0 rgba(0, 0, 0, 0.11));
+  box-sizing: border-box;
+}
+
+/* ==========================================================================
+   Header Section (logo, title, description)
+   Part: header
+   ========================================================================== */
+
+.widget-header {
+  padding: var(--ah-header-padding, 40px 40px 24px);
+}
+
+/* ==========================================================================
+   Body Section (form, messages)
+   Part: body
+   ========================================================================== */
+
+.widget-body {
+  padding: var(--ah-body-padding, 0 40px 40px);
 }
 
 /* ==========================================================================
@@ -29,27 +54,39 @@
    Part: logo
    ========================================================================== */
 
+.logo-wrapper {
+  display: var(--ah-logo-display, flex);
+  justify-content: var(--ah-logo-align, center);
+}
+
 .logo {
   display: block;
-  width: var(--ah-logo-size, 48px);
-  height: var(--ah-logo-size, 48px);
-  margin: 0 auto var(--ah-space-6, 1.5rem);
+  height: var(--ah-logo-height, 52px);
+  max-width: 100%;
+  width: auto;
   object-fit: contain;
-  border-radius: var(--ah-logo-radius, 8px);
 }
 
 /* ==========================================================================
-   Title
-   Part: title
+   Title & Description
+   Part: title, description
    ========================================================================== */
 
 .title {
-  font-size: var(--ah-font-size-2xl, 1.5rem);
-  font-weight: var(--ah-font-weight-semibold, 600);
-  text-align: center;
-  margin: 0 0 var(--ah-space-8, 2rem);
-  color: var(--ah-color-text, #111827);
-  line-height: var(--ah-line-height-tight, 1.25);
+  font-size: var(--ah-font-size-title, 24px);
+  font-weight: var(--ah-font-weight-title, 700);
+  text-align: var(--ah-title-align, center);
+  margin: var(--ah-title-margin, 24px 0 16px);
+  color: var(--ah-color-header, #1e212a);
+  line-height: 1.2;
+}
+
+.description {
+  font-size: var(--ah-font-size-description, 14px);
+  text-align: var(--ah-title-align, center);
+  margin: var(--ah-description-margin, 0);
+  color: var(--ah-color-text, #1e212a);
+  line-height: 1.5;
 }
 
 /* ==========================================================================
@@ -58,23 +95,23 @@
    ========================================================================== */
 
 .message {
-  padding: var(--ah-space-3, 0.75rem) var(--ah-space-4, 1rem);
-  border-radius: var(--ah-radius-md, 4px);
-  margin-bottom: var(--ah-space-4, 1rem);
-  font-size: var(--ah-font-size-sm, 0.875rem);
-  line-height: var(--ah-line-height-normal, 1.5);
+  padding: 12px 16px;
+  border-radius: 4px;
+  margin-bottom: 16px;
+  font-size: 14px;
+  line-height: 1.5;
 }
 
 .message-error {
-  background-color: var(--ah-color-error-bg, #fee2e2);
-  color: var(--ah-color-error, #dc2626);
-  border: 1px solid var(--ah-color-error-border, #fecaca);
+  background-color: var(--ah-color-error-bg, #ffeaea);
+  color: var(--ah-color-error, #d03c38);
+  border-left: 3px solid var(--ah-color-error, #d03c38);
 }
 
 .message-success {
-  background-color: var(--ah-color-success-bg, #dcfce7);
-  color: var(--ah-color-success, #16a34a);
-  border: 1px solid var(--ah-color-success-border, #bbf7d0);
+  background-color: var(--ah-color-success-bg, #e6f9f1);
+  color: var(--ah-color-success, #13a769);
+  border-left: 3px solid var(--ah-color-success, #13a769);
 }
 
 /* ==========================================================================
@@ -85,42 +122,24 @@
 form {
   display: flex;
   flex-direction: column;
-  gap: var(--ah-space-4, 1rem);
 }
 
-/* ==========================================================================
-   Links Footer
-   Part: links
-   ========================================================================== */
-
-.links {
+.form-content {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: var(--ah-space-2, 0.5rem);
-  margin-top: var(--ah-space-6, 1.5rem);
-  padding-top: var(--ah-space-4, 1rem);
 }
 
-.link-wrapper {
-  font-size: var(--ah-font-size-sm, 0.875rem);
-  color: var(--ah-color-text-muted, #6b7280);
-}
-
-.link {
-  color: var(--ah-color-primary, #0066cc);
-  text-decoration: none;
-  font-size: var(--ah-font-size-sm, 0.875rem);
-  transition: color var(--ah-transition-fast, 150ms ease);
-}
-
-.link:hover {
-  text-decoration: underline;
+.social-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  order: var(--ah-social-order, 2);
 }
 
-.link:focus-visible {
-  outline: 2px solid var(--ah-color-primary, #0066cc);
-  outline-offset: 2px;
+.fields-section {
+  display: flex;
+  flex-direction: column;
+  order: var(--ah-fields-order, 0);
 }
 
 /* ==========================================================================
@@ -132,22 +151,60 @@ form {
   display: flex;
   align-items: center;
   text-align: center;
-  margin: var(--ah-space-2, 0.5rem) 0;
+  margin: 16px 0;
+  order: var(--ah-divider-order, 1);
 }
 
 .divider::before,
 .divider::after {
   content: '';
   flex: 1;
-  border-bottom: 1px solid var(--ah-color-border-muted, #e5e7eb);
+  border-bottom: 1px solid var(--ah-color-border-muted, #c9cace);
 }
 
 .divider-text {
-  padding: 0 var(--ah-space-4, 1rem);
-  font-size: var(--ah-font-size-sm, 0.875rem);
-  color: var(--ah-color-text-muted, #9ca3af);
+  padding: 0 10px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--ah-color-text-muted, #65676e);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0;
+}
+
+/* ==========================================================================
+   Links Footer
+   Part: links
+   ========================================================================== */
+
+.links {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.link-wrapper {
+  font-size: 14px;
+  color: var(--ah-color-text, #1e212a);
+}
+
+.link {
+  color: var(--ah-color-link, #635dff);
+  text-decoration: var(--ah-link-decoration, none);
+  font-size: 14px;
+  font-weight: var(--ah-font-weight-link, 400);
+  transition: color 150ms ease;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.link:focus-visible {
+  outline: 2px solid var(--ah-color-link, #635dff);
+  outline-offset: 2px;
+  border-radius: 2px;
 }
 
 /* ==========================================================================
@@ -156,13 +213,13 @@ form {
    ========================================================================== */
 
 .loading-spinner {
-  width: 40px;
-  height: 40px;
-  margin: var(--ah-space-8, 2rem) auto;
-  border: 3px solid var(--ah-color-border-muted, #f3f3f3);
-  border-top: 3px solid var(--ah-color-primary, #0066cc);
+  width: 32px;
+  height: 32px;
+  margin: 24px auto;
+  border: 3px solid var(--ah-color-border-muted, #e0e1e3);
+  border-top-color: var(--ah-color-primary, #635dff);
   border-radius: 50%;
-  animation: spin 1s linear infinite;
+  animation: spin 0.8s linear infinite;
 }
 
 @keyframes spin {
@@ -181,6 +238,7 @@ form {
 
 .error-message {
   text-align: center;
-  color: var(--ah-color-error, #dc2626);
-  padding: var(--ah-space-4, 1rem);
+  color: var(--ah-color-error, #d03c38);
+  padding: 16px;
+  font-size: 14px;
 }