'use strict';

var index = require('./index-4OcMRinY.js');

/**
 * Country data for phone number input with country code selector.
 * Each entry contains:
 * - code: ISO 3166-1 alpha-2 country code
 * - dialCode: International dialing prefix
 * - flag: Unicode flag emoji
 * - name: Country name in English
 */
/**
 * Get flag emoji from ISO 3166-1 alpha-2 country code.
 * Uses Unicode Regional Indicator Symbol Letters.
 */
function flagEmoji(code) {
    return String.fromCodePoint(...code
        .toUpperCase()
        .split("")
        .map((c) => 0x1f1e6 - 65 + c.charCodeAt(0)));
}
/**
 * Full list of countries with dial codes, sorted by dial code (numerically)
 * with secondary sort by country code for ties.
 */
const countries = [
    { code: "US", dialCode: "+1", name: "United States" },
    { code: "CA", dialCode: "+1", name: "Canada" },
    { code: "AG", dialCode: "+1", name: "Antigua and Barbuda" },
    { code: "BS", dialCode: "+1", name: "Bahamas" },
    { code: "BB", dialCode: "+1", name: "Barbados" },
    { code: "DM", dialCode: "+1", name: "Dominica" },
    { code: "DO", dialCode: "+1", name: "Dominican Republic" },
    { code: "GD", dialCode: "+1", name: "Grenada" },
    { code: "JM", dialCode: "+1", name: "Jamaica" },
    { code: "KN", dialCode: "+1", name: "Saint Kitts and Nevis" },
    { code: "LC", dialCode: "+1", name: "Saint Lucia" },
    { code: "VC", dialCode: "+1", name: "Saint Vincent and the Grenadines" },
    { code: "TT", dialCode: "+1", name: "Trinidad and Tobago" },
    { code: "PR", dialCode: "+1", name: "Puerto Rico" },
    { code: "KZ", dialCode: "+7", name: "Kazakhstan" },
    { code: "RU", dialCode: "+7", name: "Russia" },
    { code: "EG", dialCode: "+20", name: "Egypt" },
    { code: "ZA", dialCode: "+27", name: "South Africa" },
    { code: "GR", dialCode: "+30", name: "Greece" },
    { code: "NL", dialCode: "+31", name: "Netherlands" },
    { code: "BE", dialCode: "+32", name: "Belgium" },
    { code: "FR", dialCode: "+33", name: "France" },
    { code: "ES", dialCode: "+34", name: "Spain" },
    { code: "HU", dialCode: "+36", name: "Hungary" },
    { code: "IT", dialCode: "+39", name: "Italy" },
    { code: "RO", dialCode: "+40", name: "Romania" },
    { code: "CH", dialCode: "+41", name: "Switzerland" },
    { code: "AT", dialCode: "+43", name: "Austria" },
    { code: "GB", dialCode: "+44", name: "United Kingdom" },
    { code: "DK", dialCode: "+45", name: "Denmark" },
    { code: "SE", dialCode: "+46", name: "Sweden" },
    { code: "NO", dialCode: "+47", name: "Norway" },
    { code: "PL", dialCode: "+48", name: "Poland" },
    { code: "DE", dialCode: "+49", name: "Germany" },
    { code: "PE", dialCode: "+51", name: "Peru" },
    { code: "MX", dialCode: "+52", name: "Mexico" },
    { code: "CU", dialCode: "+53", name: "Cuba" },
    { code: "AR", dialCode: "+54", name: "Argentina" },
    { code: "BR", dialCode: "+55", name: "Brazil" },
    { code: "CL", dialCode: "+56", name: "Chile" },
    { code: "CO", dialCode: "+57", name: "Colombia" },
    { code: "VE", dialCode: "+58", name: "Venezuela" },
    { code: "MY", dialCode: "+60", name: "Malaysia" },
    { code: "AU", dialCode: "+61", name: "Australia" },
    { code: "ID", dialCode: "+62", name: "Indonesia" },
    { code: "PH", dialCode: "+63", name: "Philippines" },
    { code: "NZ", dialCode: "+64", name: "New Zealand" },
    { code: "SG", dialCode: "+65", name: "Singapore" },
    { code: "TH", dialCode: "+66", name: "Thailand" },
    { code: "JP", dialCode: "+81", name: "Japan" },
    { code: "KR", dialCode: "+82", name: "South Korea" },
    { code: "VN", dialCode: "+84", name: "Vietnam" },
    { code: "CN", dialCode: "+86", name: "China" },
    { code: "TR", dialCode: "+90", name: "Turkey" },
    { code: "IN", dialCode: "+91", name: "India" },
    { code: "PK", dialCode: "+92", name: "Pakistan" },
    { code: "AF", dialCode: "+93", name: "Afghanistan" },
    { code: "LK", dialCode: "+94", name: "Sri Lanka" },
    { code: "MM", dialCode: "+95", name: "Myanmar" },
    { code: "IR", dialCode: "+98", name: "Iran" },
    { code: "SS", dialCode: "+211", name: "South Sudan" },
    { code: "MA", dialCode: "+212", name: "Morocco" },
    { code: "DZ", dialCode: "+213", name: "Algeria" },
    { code: "TN", dialCode: "+216", name: "Tunisia" },
    { code: "LY", dialCode: "+218", name: "Libya" },
    { code: "GM", dialCode: "+220", name: "Gambia" },
    { code: "SN", dialCode: "+221", name: "Senegal" },
    { code: "MR", dialCode: "+222", name: "Mauritania" },
    { code: "ML", dialCode: "+223", name: "Mali" },
    { code: "GN", dialCode: "+224", name: "Guinea" },
    { code: "CI", dialCode: "+225", name: "Ivory Coast" },
    { code: "BF", dialCode: "+226", name: "Burkina Faso" },
    { code: "NE", dialCode: "+227", name: "Niger" },
    { code: "TG", dialCode: "+228", name: "Togo" },
    { code: "BJ", dialCode: "+229", name: "Benin" },
    { code: "MU", dialCode: "+230", name: "Mauritius" },
    { code: "LR", dialCode: "+231", name: "Liberia" },
    { code: "SL", dialCode: "+232", name: "Sierra Leone" },
    { code: "GH", dialCode: "+233", name: "Ghana" },
    { code: "NG", dialCode: "+234", name: "Nigeria" },
    { code: "TD", dialCode: "+235", name: "Chad" },
    { code: "CF", dialCode: "+236", name: "Central African Republic" },
    { code: "CM", dialCode: "+237", name: "Cameroon" },
    { code: "CV", dialCode: "+238", name: "Cape Verde" },
    { code: "ST", dialCode: "+239", name: "São Tomé and Príncipe" },
    { code: "GQ", dialCode: "+240", name: "Equatorial Guinea" },
    { code: "GA", dialCode: "+241", name: "Gabon" },
    { code: "CG", dialCode: "+242", name: "Congo" },
    { code: "CD", dialCode: "+243", name: "Congo (DRC)" },
    { code: "AO", dialCode: "+244", name: "Angola" },
    { code: "GW", dialCode: "+245", name: "Guinea-Bissau" },
    { code: "SC", dialCode: "+248", name: "Seychelles" },
    { code: "SD", dialCode: "+249", name: "Sudan" },
    { code: "RW", dialCode: "+250", name: "Rwanda" },
    { code: "ET", dialCode: "+251", name: "Ethiopia" },
    { code: "SO", dialCode: "+252", name: "Somalia" },
    { code: "DJ", dialCode: "+253", name: "Djibouti" },
    { code: "KE", dialCode: "+254", name: "Kenya" },
    { code: "TZ", dialCode: "+255", name: "Tanzania" },
    { code: "UG", dialCode: "+256", name: "Uganda" },
    { code: "BI", dialCode: "+257", name: "Burundi" },
    { code: "MZ", dialCode: "+258", name: "Mozambique" },
    { code: "ZM", dialCode: "+260", name: "Zambia" },
    { code: "MG", dialCode: "+261", name: "Madagascar" },
    { code: "RE", dialCode: "+262", name: "Réunion" },
    { code: "ZW", dialCode: "+263", name: "Zimbabwe" },
    { code: "NA", dialCode: "+264", name: "Namibia" },
    { code: "MW", dialCode: "+265", name: "Malawi" },
    { code: "LS", dialCode: "+266", name: "Lesotho" },
    { code: "BW", dialCode: "+267", name: "Botswana" },
    { code: "SZ", dialCode: "+268", name: "Eswatini" },
    { code: "KM", dialCode: "+269", name: "Comoros" },
    { code: "ER", dialCode: "+291", name: "Eritrea" },
    { code: "PT", dialCode: "+351", name: "Portugal" },
    { code: "LU", dialCode: "+352", name: "Luxembourg" },
    { code: "IE", dialCode: "+353", name: "Ireland" },
    { code: "IS", dialCode: "+354", name: "Iceland" },
    { code: "AL", dialCode: "+355", name: "Albania" },
    { code: "MT", dialCode: "+356", name: "Malta" },
    { code: "CY", dialCode: "+357", name: "Cyprus" },
    { code: "FI", dialCode: "+358", name: "Finland" },
    { code: "BG", dialCode: "+359", name: "Bulgaria" },
    { code: "LT", dialCode: "+370", name: "Lithuania" },
    { code: "LV", dialCode: "+371", name: "Latvia" },
    { code: "EE", dialCode: "+372", name: "Estonia" },
    { code: "MD", dialCode: "+373", name: "Moldova" },
    { code: "AM", dialCode: "+374", name: "Armenia" },
    { code: "BY", dialCode: "+375", name: "Belarus" },
    { code: "AD", dialCode: "+376", name: "Andorra" },
    { code: "MC", dialCode: "+377", name: "Monaco" },
    { code: "SM", dialCode: "+378", name: "San Marino" },
    { code: "UA", dialCode: "+380", name: "Ukraine" },
    { code: "RS", dialCode: "+381", name: "Serbia" },
    { code: "ME", dialCode: "+382", name: "Montenegro" },
    { code: "XK", dialCode: "+383", name: "Kosovo" },
    { code: "HR", dialCode: "+385", name: "Croatia" },
    { code: "SI", dialCode: "+386", name: "Slovenia" },
    { code: "BA", dialCode: "+387", name: "Bosnia and Herzegovina" },
    { code: "MK", dialCode: "+389", name: "North Macedonia" },
    { code: "CZ", dialCode: "+420", name: "Czech Republic" },
    { code: "SK", dialCode: "+421", name: "Slovakia" },
    { code: "LI", dialCode: "+423", name: "Liechtenstein" },
    { code: "FK", dialCode: "+500", name: "Falkland Islands" },
    { code: "BZ", dialCode: "+501", name: "Belize" },
    { code: "GT", dialCode: "+502", name: "Guatemala" },
    { code: "SV", dialCode: "+503", name: "El Salvador" },
    { code: "HN", dialCode: "+504", name: "Honduras" },
    { code: "NI", dialCode: "+505", name: "Nicaragua" },
    { code: "CR", dialCode: "+506", name: "Costa Rica" },
    { code: "PA", dialCode: "+507", name: "Panama" },
    { code: "HT", dialCode: "+509", name: "Haiti" },
    { code: "GP", dialCode: "+590", name: "Guadeloupe" },
    { code: "BO", dialCode: "+591", name: "Bolivia" },
    { code: "GY", dialCode: "+592", name: "Guyana" },
    { code: "EC", dialCode: "+593", name: "Ecuador" },
    { code: "GF", dialCode: "+594", name: "French Guiana" },
    { code: "PY", dialCode: "+595", name: "Paraguay" },
    { code: "MQ", dialCode: "+596", name: "Martinique" },
    { code: "SR", dialCode: "+597", name: "Suriname" },
    { code: "UY", dialCode: "+598", name: "Uruguay" },
    { code: "TL", dialCode: "+670", name: "Timor-Leste" },
    { code: "BN", dialCode: "+673", name: "Brunei" },
    { code: "NR", dialCode: "+674", name: "Nauru" },
    { code: "PG", dialCode: "+675", name: "Papua New Guinea" },
    { code: "TO", dialCode: "+676", name: "Tonga" },
    { code: "SB", dialCode: "+677", name: "Solomon Islands" },
    { code: "VU", dialCode: "+678", name: "Vanuatu" },
    { code: "FJ", dialCode: "+679", name: "Fiji" },
    { code: "PW", dialCode: "+680", name: "Palau" },
    { code: "WS", dialCode: "+685", name: "Samoa" },
    { code: "KI", dialCode: "+686", name: "Kiribati" },
    { code: "FM", dialCode: "+691", name: "Micronesia" },
    { code: "MH", dialCode: "+692", name: "Marshall Islands" },
    { code: "KP", dialCode: "+850", name: "North Korea" },
    { code: "HK", dialCode: "+852", name: "Hong Kong" },
    { code: "MO", dialCode: "+853", name: "Macau" },
    { code: "KH", dialCode: "+855", name: "Cambodia" },
    { code: "LA", dialCode: "+856", name: "Laos" },
    { code: "BD", dialCode: "+880", name: "Bangladesh" },
    { code: "TW", dialCode: "+886", name: "Taiwan" },
    { code: "MV", dialCode: "+960", name: "Maldives" },
    { code: "LB", dialCode: "+961", name: "Lebanon" },
    { code: "JO", dialCode: "+962", name: "Jordan" },
    { code: "SY", dialCode: "+963", name: "Syria" },
    { code: "IQ", dialCode: "+964", name: "Iraq" },
    { code: "KW", dialCode: "+965", name: "Kuwait" },
    { code: "SA", dialCode: "+966", name: "Saudi Arabia" },
    { code: "YE", dialCode: "+967", name: "Yemen" },
    { code: "OM", dialCode: "+968", name: "Oman" },
    { code: "PS", dialCode: "+970", name: "Palestine" },
    { code: "AE", dialCode: "+971", name: "United Arab Emirates" },
    { code: "IL", dialCode: "+972", name: "Israel" },
    { code: "BH", dialCode: "+973", name: "Bahrain" },
    { code: "QA", dialCode: "+974", name: "Qatar" },
    { code: "BT", dialCode: "+975", name: "Bhutan" },
    { code: "MN", dialCode: "+976", name: "Mongolia" },
    { code: "NP", dialCode: "+977", name: "Nepal" },
    { code: "TJ", dialCode: "+992", name: "Tajikistan" },
    { code: "TM", dialCode: "+993", name: "Turkmenistan" },
    { code: "AZ", dialCode: "+994", name: "Azerbaijan" },
    { code: "GE", dialCode: "+995", name: "Georgia" },
    { code: "KG", dialCode: "+996", name: "Kyrgyzstan" },
    { code: "UZ", dialCode: "+998", name: "Uzbekistan" },
].map((c) => ({ ...c, flag: flagEmoji(c.code) }));
/**
 * Find a country by its ISO code, defaulting to US.
 */
function getCountryByCode(code) {
    const upper = code.toUpperCase();
    return (countries.find((c) => c.code === upper) ||
        countries.find((c) => c.code === "US"));
}

const authheroNodeCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;margin-top:8px;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:16px;font-weight:var(--ah-font-weight-label, 400);color:var(--ah-color-text-muted, #65676e);pointer-events:none;transition:all 0.15s ease-out;background-color:transparent;padding:0;z-index:1}.input-label.floating,.input-field:focus+.input-label,.input-field:not(:placeholder-shown)+.input-label,select.input-field+.input-label,input[type="date"].input-field+.input-label{top:-8px;transform:translateY(0);font-size:12px;background-color:var(--ah-color-bg, #ffffff);padding:0 4px;left:12px;color:var(--ah-color-text-muted, #65676e)}.input-field:focus+.input-label{color:var(--ah-color-primary, #635dff)}.required{color:var(--ah-color-error, #d03c38);margin-left:2px}.input-field{width:100%;padding:16px;font-size:16px;font-family:inherit;color:var(--ah-color-text, #1e212a);background-color:var(--ah-color-input-bg, #ffffff);border:1px solid var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);outline:none;transition:border-color 0.15s ease-out,     box-shadow 0.15s ease-out;box-sizing:border-box}.input-field::placeholder{color:transparent}.input-field:hover{border-color:var(--ah-color-border-hover, #65676e)}.input-field:focus{border-color:var(--ah-color-primary, #635dff);box-shadow:inset 0 0 0 1px var(--ah-color-primary, #635dff)}.input-field.has-error{border-color:var(--ah-color-error, #d03c38)}.input-field.has-error:focus{box-shadow:inset 0 0 0 1px var(--ah-color-error, #d03c38)}.input-field:disabled{background-color:var(--ah-color-bg-disabled, #f5f5f5);border-color:var(--ah-color-border-disabled, #e0e1e3);cursor:not-allowed;opacity:0.7}.password-container{position:relative;display:flex;align-items:center}.password-container .input-field{padding-right:48px}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--ah-color-text-muted, #65676e);transition:color 0.15s ease}.password-toggle:hover{color:var(--ah-color-text, #1e212a)}.password-toggle svg{width:20px;height:20px}.error-text{font-size:12px;color:var(--ah-color-error, #d03c38);margin-top:4px;line-height:1.4}.helper-text{font-size:12px;color:var(--ah-color-text-muted, #65676e);margin-top:4px;line-height:1.4}.field-link{display:block;text-align:left;margin-top:8px;margin-bottom:16px}.field-link a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:14px;font-weight:var(--ah-font-weight-link, 400)}.field-link a:hover{text-decoration:underline}.checkbox-wrapper{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-bottom:16px}.checkbox-wrapper input[type="checkbox"]{width:18px;height:18px;margin:0;accent-color:var(--ah-color-primary, #635dff);cursor:pointer;flex-shrink:0}.checkbox-label{font-size:14px;color:var(--ah-color-text, #1e212a);line-height:1.5}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 20px;font-size:16px;font-weight:var(--ah-font-weight-btn, 400);font-family:inherit;line-height:1.25;text-align:center;text-decoration:none;border:none;border-radius:var(--ah-btn-radius, 3px);cursor:pointer;transition:background-color 0.15s ease,     border-color 0.15s ease,     transform 0.1s ease;box-sizing:border-box}.btn:disabled{opacity:0.6;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(0.98)}.btn:focus-visible{outline:2px solid var(--ah-color-primary, #635dff);outline-offset:2px}.btn-primary{background-color:var(--ah-color-primary, #635dff);color:var(--ah-color-text-on-primary, #ffffff);margin-top:12px}.btn-primary:not(:disabled):hover{filter:brightness(0.85)}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);color:var(--ah-color-text, #1e212a);border:1px solid var(--ah-color-border, #c9cace)}.btn-secondary:not(:disabled):hover{background-color:var(--ah-color-bg-hover, #f5f5f5);border-color:var(--ah-color-border-hover, #65676e)}.btn-link{background:none;border:none;color:var(--ah-color-link, #635dff);padding:8px 0;font-weight:var(--ah-font-weight-link, 400);text-decoration:none}.btn-link:hover{text-decoration:underline}.phone-input-wrapper{display:flex;align-items:stretch;gap:0;width:100%}.country-select{flex-shrink:0;width:auto;padding:12px 8px;font-size:var(--ah-font-size-body, 16px);font-family:var(--ah-font-family, inherit);border:1px solid var(--ah-color-border, #c9cace);border-right:none;border-radius:var(--ah-border-radius-input, 4px) 0 0 var(--ah-border-radius-input, 4px);background-color:var(--ah-color-surface, #fff);color:var(--ah-color-text, #1e212a);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;padding-right:22px}.country-select:focus{outline:none;border-color:var(--ah-color-primary, #635dff);box-shadow:0 0 0 1px var(--ah-color-primary, #635dff)}.country-select:disabled{opacity:0.5;cursor:not-allowed}.phone-input-wrapper .input-container{flex:1;min-width:0}.phone-input-wrapper .input-field{border-radius:0 var(--ah-border-radius-input, 4px) var(--ah-border-radius-input, 4px) 0}.phone-input-wrapper .input-label.floating,.phone-input-wrapper .input-field:focus+.input-label,.phone-input-wrapper .input-field:not(:placeholder-shown)+.input-label{left:8px}.social-buttons{display:flex;flex-direction:column;gap:12px}.btn-social{display:flex;align-items:center;justify-content:center;gap:12px}.btn-social-content{display:flex;flex-direction:column;align-items:center;text-align:center}.btn-social-subtitle{font-size:12px;font-style:italic;opacity:0.8;margin-top:2px}.btn-social-subtitle:empty{display:none}.social-icon{width:20px;height:20px;flex-shrink:0}@media (max-width: 480px){.social-buttons:has(.btn-social:nth-child(3)){flex-direction:row;flex-wrap:nowrap;justify-content:stretch;gap:8px}.social-buttons:has(.btn-social:nth-child(3)) .btn-social{width:auto;min-width:0;padding:12px;flex:1 1 0}.social-buttons:has(.btn-social:nth-child(3)) .btn-social span{display:none}.social-buttons:has(.btn-social:nth-child(3)) .social-icon{width:24px;height:24px}}.btn-icon{width:20px;height:20px;flex-shrink:0}.btn-icon img{width:100%;height:100%;object-fit:contain}.text-title{font-size:20px;font-weight:400;color:var(--ah-color-text, #1e212a);margin:8px 0;line-height:1.3}.text-title.text-success{color:var(--ah-color-success, #13a769)}.text-description{font-size:14px;color:var(--ah-color-text-muted, #65676e);margin:4px 0;line-height:1.5}.image{display:block;max-width:100%;height:auto;border-radius:4px}.image-centered{margin:0 auto 16px;width:52px;height:52px;object-fit:contain}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:14px;transition:color 0.15s ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-link, #635dff);outline-offset:2px;border-radius:2px}.node-error{padding:12px 16px;background-color:var(--ah-color-error-bg, #ffeaea);color:var(--ah-color-error, #d03c38);border-left:3px solid var(--ah-color-error, #d03c38);border-radius:0;font-size:14px;margin-bottom:16px}.node-success{padding:12px 16px;background-color:var(--ah-color-success-bg, #e6f9f1);color:var(--ah-color-success, #13a769);border-left:3px solid var(--ah-color-success, #13a769);border-radius:0;font-size:14px;margin-bottom:16px}.divider{display:flex;align-items:center;text-align:center;margin:16px 0}.divider::before,.divider::after{content:"";flex:1;border-bottom:1px solid var(--ah-color-border-muted, #c9cace)}.divider-text{padding:0 10px;font-size:12px;font-weight:400;color:var(--ah-color-text-muted, #65676e);text-transform:uppercase;letter-spacing:0.5px}.rich-text{font-size:14px;line-height:1.5;color:var(--ah-color-text, #1e212a)}.rich-text a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);transition:color 0.15s ease}.rich-text a:hover{text-decoration:underline}.rich-text .terms-text{margin-top:16px;text-align:center;font-size:12px;color:var(--ah-color-text-muted, #65676e)}.rich-text .terms-text a{font-size:12px}.rich-text .forgot-password-link{text-align:right;font-size:13px;margin-top:4px}.rich-text .forgot-password-link a{font-size:13px;color:var(--ah-color-link, #635dff)}.rich-text .passwordless-link{margin-top:16px;text-align:center;font-size:14px}.rich-text .passwordless-link a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none)}.rich-text .passwordless-link a:hover{text-decoration:underline}.rich-text .signup-link{margin-top:16px;text-align:center;font-size:14px;color:var(--ah-color-text, #1e212a)}`;

const AuthheroNode = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.fieldChange = index.createEvent(this, "fieldChange");
        this.buttonClick = index.createEvent(this, "buttonClick");
    }
    /**
     * The component configuration to render.
     * Follows Auth0 Forms component schema.
     */
    component;
    /**
     * Current value for field components.
     */
    value;
    /**
     * Whether the component is disabled.
     */
    disabled = false;
    /**
     * 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.
     */
    fieldChange;
    /**
     * 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;
    }
    /**
     * Shared phone-input cleaning logic. Detects dial codes, strips non-phone
     * characters, updates the input value, and emits the full number.
     * @param allowPlus When true, uses a two-pass clean that first keeps '+'
     *   then strips it (for combined tel+email fields). When false, strips '+'
     *   in a single pass (phone-only fields where the picker provides the prefix).
     */
    processPhoneInput(target, value, allowPlus) {
        const dialLocal = this.detectDialCodeFromInput(value);
        if (dialLocal !== null) {
            const cleanedLocal = allowPlus
                ? dialLocal.replace(/[^+\d\s\-()]/g, "").replace(/\+/g, "")
                : dialLocal.replace(/[^\d\s\-()]/g, "");
            target.value = cleanedLocal;
            this.localPhoneNumber = cleanedLocal;
            const fullNumber = `${this.selectedCountry.dialCode}${cleanedLocal}`;
            this.fieldChange.emit({ id: this.component.id, value: fullNumber });
        }
        else {
            const cleaned = allowPlus
                ? value.replace(/[^+\d\s\-()]/g, "").replace(/\+/g, "")
                : 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 });
        }
    }
    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) {
                this.processPhoneInput(target, value, true);
            }
            else {
                // Email or text — emit as-is
                this.localPhoneNumber = value;
                this.fieldChange.emit({ id: this.component.id, value });
            }
            return;
        }
        // Standard phone-only mode
        this.processPhoneInput(target, value, false);
    };
    handleInput = (e) => {
        const target = e.target;
        this.fieldChange.emit({ id: this.component.id, value: target.value });
    };
    handleKeyDown = (e) => {
        if (e.key === "Enter") {
            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;
        this.fieldChange.emit({
            id: this.component.id,
            value: target.checked ? "true" : "false",
        });
    };
    /**
     * Returns the effective value for the field: uses `this.value` if set,
     * otherwise falls back to `config.default_value` (resolved by the server).
     */
    getEffectiveValue() {
        if (this.value !== undefined && this.value !== null) {
            return this.value;
        }
        const comp = this.component;
        if (comp.config && "default_value" in comp.config) {
            const dv = comp.config.default_value;
            if (typeof dv === "string" && dv !== "") {
                return dv;
            }
        }
        return undefined;
    }
    /**
     * Sanitize a string for use in CSS class names and part tokens.
     * Replaces spaces and special characters with hyphens, converts to lowercase.
     */
    sanitizeForCssToken(value) {
        return value
            .toLowerCase()
            .replace(/[^a-z0-9-]/g, "-") // Replace non-alphanumeric chars with hyphen
            .replace(/-+/g, "-") // Collapse multiple hyphens
            .replace(/^-|-$/g, ""); // Remove leading/trailing hyphens
    }
    handleButtonClick = (e, type, value) => {
        // Always prevent default to avoid double submissions
        // The parent widget handles the actual form submission
        e.preventDefault();
        this.buttonClick.emit({ id: this.component.id, type, value });
    };
    togglePasswordVisibility = () => {
        this.passwordVisible = !this.passwordVisible;
    };
    /**
     * Get error messages from the component.
     */
    getErrors() {
        const runtimeComp = this.component;
        return (runtimeComp.messages?.filter((m) => m.type === "error") || []);
    }
    /**
     * Render a floating label for a field.
     */
    renderFloatingLabel(text, inputId, required, hasValue) {
        if (!text)
            return null;
        // Use string class instead of object to avoid hydration mismatch
        const labelClass = hasValue ? "input-label floating" : "input-label";
        return (index.h("label", { class: labelClass, part: "label", htmlFor: inputId }, text, required && index.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 (index.h("label", { class: "input-label", part: "label", htmlFor: inputId }, text, required && index.h("span", { class: "required" }, "*")));
    }
    /**
     * Get the input field class string.
     * Uses string instead of object to avoid hydration mismatch.
     */
    getInputFieldClass(hasError) {
        return hasError ? "input-field has-error" : "input-field";
    }
    /**
     * Render the eye icon for password visibility toggle.
     */
    renderPasswordToggle() {
        if (this.passwordVisible) {
            // Eye-off icon (password is visible, click to hide)
            return (index.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" }, index.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" }), index.h("line", { x1: "1", y1: "1", x2: "23", y2: "23" })));
        }
        // Eye icon (password is hidden, click to show)
        return (index.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" }, index.h("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), index.h("circle", { cx: "12", cy: "12", r: "3" })));
    }
    /**
     * Render error messages.
     */
    renderErrors() {
        const errors = this.getErrors();
        return errors.map((err) => (index.h("span", { class: "error-text", part: "error-text", key: err.id ?? err.text }, err.text)));
    }
    /**
     * Render hint text.
     */
    renderHint(hint) {
        if (!hint)
            return null;
        return (index.h("span", { class: "helper-text", part: "helper-text" }, hint));
    }
    // ===========================================================================
    // BLOCK Component Renderers
    // ===========================================================================
    renderDivider() {
        return index.h("hr", { class: "divider", part: "divider" });
    }
    renderHtml(component) {
        return (index.h("div", { class: "html-content", part: "html-content", innerHTML: component.config?.content ?? "" }));
    }
    renderImage(component) {
        const { src, alt, width, height } = component.config ?? {};
        if (!src)
            return null;
        return (index.h("img", { class: "image", part: "image", src: src, alt: alt ?? "", width: width, height: height, loading: "lazy" }));
    }
    renderRichText(component) {
        return (index.h("div", { class: "rich-text", part: "rich-text", innerHTML: component.config?.content ?? "" }));
    }
    renderNextButton(component) {
        return (index.h("button", { type: "submit", class: "btn btn-primary", part: "button button-primary", "data-primary-action-button": true, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "submit", "next") }, component.config.text ?? "Continue"));
    }
    renderPreviousButton(component) {
        return (index.h("button", { type: "button", class: "btn btn-secondary", part: "button button-secondary", disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "previous", "back") }, component.config.text ?? "Back"));
    }
    renderJumpButton(component) {
        return (index.h("button", { type: "button", class: "btn btn-link", part: "button button-link", disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "jump", component.config.target_step) }, component.config.text ?? "Go"));
    }
    renderResendButton(component) {
        return (index.h("button", { type: "button", class: "btn btn-link", part: "button button-link", disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "resend", component.config.resend_action) }, component.config.text ?? "Resend"));
    }
    // ===========================================================================
    // FIELD Component Renderers
    // ===========================================================================
    renderTextField(component) {
        const inputId = `input-${component.id}`;
        const errors = this.getErrors();
        const { multiline, max_length, autocomplete } = component.config ?? {};
        const effectiveValue = this.getEffectiveValue();
        const hasValue = !!(effectiveValue && effectiveValue.length > 0);
        if (multiline) {
            return (index.h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), index.h("textarea", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input textarea", name: component.id, placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }, effectiveValue ?? ""), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
        }
        return (index.h("div", { class: "input-wrapper", part: "input-wrapper" }, index.h("div", { class: "input-container" }, index.h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: component.sensitive ? "password" : "text", name: component.id, "data-input-name": component.id, value: effectiveValue ?? "", placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, autoComplete: autocomplete, onInput: this.handleInput, onKeyDown: this.handleKeyDown }), 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();
        const effectiveValue = this.getEffectiveValue();
        const hasValue = !!(effectiveValue && effectiveValue.length > 0);
        const { autocomplete } = (component.config ?? {});
        return (index.h("div", { class: "input-wrapper", part: "input-wrapper" }, index.h("div", { class: "input-container" }, index.h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "email", name: component.id, "data-input-name": component.id, value: effectiveValue ?? "", placeholder: " ", required: component.required, disabled: this.disabled, autocomplete: autocomplete || "email", onInput: this.handleInput, onKeyDown: this.handleKeyDown }), 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();
        const effectiveValue = this.getEffectiveValue();
        const hasValue = !!(effectiveValue && effectiveValue.length > 0);
        const forgotPasswordLink = component.config?.forgot_password_link;
        return (index.h("div", { class: "input-wrapper", part: "input-wrapper" }, index.h("div", { class: "input-container password-container" }, index.h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: this.passwordVisible ? "text" : "password", name: component.id, "data-input-name": component.id, value: effectiveValue ?? "", placeholder: " ", required: component.required, disabled: this.disabled, minLength: component.config?.min_length, autocomplete: "current-password", onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue), index.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 && (index.h("div", { class: "field-link", part: "field-link" }, index.h("a", { href: forgotPasswordLink, class: "link", part: "link" }, "Forgot password?")))));
    }
    renderNumberField(component) {
        const inputId = `input-${component.id}`;
        const errors = this.getErrors();
        const { placeholder, min, max, step } = component.config ?? {};
        const effectiveValue = this.getEffectiveValue();
        return (index.h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), index.h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "number", name: component.id, value: effectiveValue ?? "", placeholder: placeholder, required: component.required, disabled: this.disabled, min: min, max: max, step: step, onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
    }
    renderTelField(component) {
        const inputId = `input-${component.id}`;
        const errors = this.getErrors();
        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 ? (index.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) => (index.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 (index.h("div", { class: "input-wrapper", part: "input-wrapper" }, index.h("div", { class: showCountryPicker ? "phone-input-wrapper" : "", part: "phone-input-wrapper" }, countrySelect, index.h("div", { class: "input-container" }, index.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}`;
        const errors = this.getErrors();
        const effectiveValue = this.getEffectiveValue();
        return (index.h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), index.h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "url", name: component.id, value: effectiveValue ?? "", placeholder: component.config?.placeholder, required: component.required, disabled: this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
    }
    renderDateField(component) {
        const inputId = `input-${component.id}`;
        const errors = this.getErrors();
        const { min, max } = component.config ?? {};
        // Date fields always have a value (even if placeholder format), so always float the label
        const hasValue = true;
        const effectiveValue = this.getEffectiveValue();
        return (index.h("div", { class: "input-wrapper", part: "input-wrapper" }, index.h("div", { class: "input-container" }, index.h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "date", name: component.id, "data-input-name": component.id, value: effectiveValue ?? "", placeholder: " ", required: component.required, disabled: this.disabled, min: min, max: max, onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
    }
    renderBooleanField(component) {
        return (index.h("label", { class: "checkbox-wrapper", part: "checkbox-wrapper" }, index.h("input", { type: "checkbox", part: "checkbox", name: component.id, checked: this.value === "true" || component.config?.default_value === true, required: component.required, disabled: this.disabled, onChange: this.handleCheckbox }), index.h("span", { class: "checkbox-label", part: "checkbox-label" }, component.label)));
    }
    renderLegalField(component) {
        const text = component.config?.text ?? component.label ?? "";
        const isHtml = component.config?.html === true;
        return (index.h("label", { class: "checkbox-wrapper", part: "checkbox-wrapper" }, index.h("input", { type: "checkbox", part: "checkbox", name: component.id, checked: this.value === "true", required: component.required, disabled: this.disabled, onChange: this.handleCheckbox }), isHtml ? (index.h("span", { class: "checkbox-label", part: "checkbox-label", innerHTML: text })) : (index.h("span", { class: "checkbox-label", part: "checkbox-label" }, text))));
    }
    renderCountryField(component) {
        const inputId = `input-${component.id}`;
        const errors = this.getErrors();
        const { placeholder } = component.config ?? {};
        const hasValue = true;
        const effectiveValue = this.getEffectiveValue();
        return (index.h("div", { class: "input-wrapper", part: "input-wrapper" }, index.h("div", { class: "input-container" }, index.h("select", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input select", name: component.id, required: component.required, disabled: this.disabled, onChange: this.handleInput }, placeholder && (index.h("option", { value: "", disabled: true, selected: !effectiveValue }, placeholder)), countries.map((c) => (index.h("option", { value: c.code, selected: effectiveValue === c.code, key: c.code }, c.flag, " ", c.name)))), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
    }
    renderDropdownField(component) {
        const inputId = `input-${component.id}`;
        const errors = this.getErrors();
        const { options, placeholder } = component.config ?? {};
        // Dropdown always has visual content (selected option), so always float the label
        const hasValue = true;
        const effectiveValue = this.getEffectiveValue();
        return (index.h("div", { class: "input-wrapper", part: "input-wrapper" }, index.h("div", { class: "input-container" }, index.h("select", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input select", name: component.id, required: component.required, disabled: this.disabled, onChange: this.handleInput }, placeholder && (index.h("option", { value: "", disabled: true, selected: !effectiveValue }, placeholder)), options?.map((opt) => (index.h("option", { value: opt.value, selected: effectiveValue === opt.value, key: opt.value }, opt.label)))), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
    }
    renderChoiceField(component) {
        const errors = this.getErrors();
        const { options, display } = component.config ?? {};
        const isCheckbox = display === "checkbox";
        const inputType = isCheckbox ? "checkbox" : "radio";
        return (index.h("div", { class: "choice-wrapper", part: "choice-wrapper" }, component.label && (index.h("span", { class: "choice-label", part: "choice-label" }, component.label, component.required && index.h("span", { class: "required" }, "*"))), index.h("div", { class: "choice-options", part: "choice-options" }, options?.map((opt) => (index.h("label", { class: "choice-option", part: "choice-option", key: opt.value }, index.h("input", { type: inputType, part: inputType, name: component.id, value: opt.value, checked: this.getEffectiveValue() === opt.value, required: component.required && !isCheckbox, disabled: this.disabled, onChange: this.handleInput }), index.h("span", null, opt.label))))), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
    }
    renderSocialField(component) {
        const providers = component.config?.providers ?? [];
        const providerDetails = component.config?.provider_details;
        // Create a map of provider details for quick lookup
        const detailsMap = new Map(providerDetails?.map((d) => [d.name, d]) ?? []);
        // Get button text from provider_details (already contains the full button text from server)
        const getButtonText = (provider) => {
            const details = detailsMap.get(provider);
            if (details?.display_name) {
                return details.display_name;
            }
            // Fallback: use provider name with basic formatting
            return provider
                .split("-")
                .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
                .join(" ");
        };
        // Get provider icon from provider_details icon_url
        const getProviderIcon = (provider) => {
            const details = detailsMap.get(provider);
            const safeProvider = this.sanitizeForCssToken(provider);
            if (details?.icon_url) {
                return (index.h("img", { class: "social-icon", part: `social-icon social-icon-${safeProvider}`, src: details.icon_url, alt: details.display_name || provider }));
            }
            // No icon provided - return null (button will just show text)
            return null;
        };
        // Get strategy from provider details
        const getProviderStrategy = (provider) => {
            const details = detailsMap.get(provider);
            return details?.strategy ?? provider;
        };
        return (index.h("div", { class: "social-buttons", part: "social-buttons" }, providers.map((provider) => {
            const safeProvider = this.sanitizeForCssToken(provider);
            const strategy = getProviderStrategy(provider);
            const icon = getProviderIcon(provider);
            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,
                index.h("span", { class: "btn-social-content", part: `button-social-content button-social-content-${safeProvider}` }, index.h("span", { part: `button-social-text button-social-text-${safeProvider}` }, getButtonText(provider)), index.h("span", { class: "btn-social-subtitle", part: `button-social-subtitle button-social-subtitle-${safeProvider}` })),
            ];
            if (details?.href) {
                return (index.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 (index.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));
        })));
    }
    // ===========================================================================
    // Main Render
    // ===========================================================================
    render() {
        if (!this.component) {
            return null;
        }
        // Hidden components
        if (this.component.visible === false) {
            return null;
        }
        switch (this.component.type) {
            // BLOCK components
            case "DIVIDER":
                return this.renderDivider();
            case "HTML":
                return this.renderHtml(this.component);
            case "IMAGE":
                return this.renderImage(this.component);
            case "RICH_TEXT":
                return this.renderRichText(this.component);
            case "NEXT_BUTTON":
                return this.renderNextButton(this.component);
            case "PREVIOUS_BUTTON":
                return this.renderPreviousButton(this.component);
            case "JUMP_BUTTON":
                return this.renderJumpButton(this.component);
            case "RESEND_BUTTON":
                return this.renderResendButton(this.component);
            // FIELD components
            case "TEXT":
                return this.renderTextField(this.component);
            case "EMAIL":
                return this.renderEmailField(this.component);
            case "PASSWORD":
                return this.renderPasswordField(this.component);
            case "NUMBER":
                return this.renderNumberField(this.component);
            case "TEL":
                return this.renderTelField(this.component);
            case "URL":
                return this.renderUrlField(this.component);
            case "DATE":
                return this.renderDateField(this.component);
            case "BOOLEAN":
                return this.renderBooleanField(this.component);
            case "LEGAL":
                return this.renderLegalField(this.component);
            case "COUNTRY":
                return this.renderCountryField(this.component);
            case "DROPDOWN":
                return this.renderDropdownField(this.component);
            case "CHOICE":
                return this.renderChoiceField(this.component);
            case "SOCIAL":
                return this.renderSocialField(this.component);
            // WIDGET components (not yet implemented)
            case "AUTH0_VERIFIABLE_CREDENTIALS":
            case "GMAPS_ADDRESS":
            case "RECAPTCHA":
                console.warn(`Widget component "${this.component.type}" not yet implemented`);
                return null;
            // Other FIELD components (not yet implemented)
            case "CARDS":
            case "CUSTOM":
            case "FILE":
            case "PAYMENT":
                console.warn(`Component "${this.component.type}" not yet implemented`);
                return null;
            default:
                console.warn(`Unknown component type: ${this.component.type}`);
                return null;
        }
    }
    static get watchers() { return {
        "component": [{
                "componentChanged": 0
            }],
        "value": [{
                "valueChanged": 0
            }]
    }; }
};
AuthheroNode.style = authheroNodeCss();

exports.authhero_node = AuthheroNode;
