{t.eyebrow}

{t.h1a} {t.h1b}

{t.lead}

); }; window.LavoraValues = function LavoraValues({ lang }) { const items = lang === "it" ? [ { icon: "rocket", t: "Progetti enterprise", d: "Lavoriamo con aziende italiane e internazionali su piattaforme Adobe Commerce, Microsoft Dynamics 365, Microsoft Power Platform, Liferay e soluzioni custom." }, { icon: "spark", t: "Formazione continua", d: "Certificazioni ufficiali, percorsi tecnici interni e tempo dedicato all'aggiornamento — l'AI evolve, e noi con lei." }, { icon: "users", t: "Team multidisciplinare", d: "UX/UI Designer, Solution Architect, sviluppatori certificati: tutti contribuiscono fin dal primo giorno alla soluzione." }, { icon: "shield-check", t: "Equilibrio e qualità", d: "Smart working ibrido, processi snelli e attenzione concreta al benessere delle persone. Niente cultura del lavoro infinito." }, ] : [ { icon: "rocket", t: "Enterprise projects", d: "We work with Italian and international clients on Adobe Commerce, Microsoft Dynamics 365, Microsoft Power Platform, Liferay and custom solutions." }, { icon: "spark", t: "Continuous learning", d: "Official certifications, internal tech tracks and time dedicated to learning — AI moves fast, and so do we." }, { icon: "users", t: "Cross-functional team", d: "UX/UI designers, Solution Architects, certified developers — everyone contributes to the solution from day one." }, { icon: "shield-check", t: "Balance and quality", d: "Hybrid smart working, lean processes and real care for people. No always-on culture." }, ]; return (

{lang === "it" ? "Perché Tecnolife" : "Why Tecnolife"}

{lang === "it" ? "Un ambiente progettato per crescere." : "An environment designed to help you grow."}

{lang === "it" ? "Quattro cose che ci stanno a cuore e che ritroverai in ogni progetto." : "Four things we care about, that you'll find in every project."}

{items.map((v) => (

{v.t}

{v.d}

))}

); }; window.LavoraRoles = function LavoraRoles({ lang }) { const roles = lang === "it" ? [ { tag: "AI / ML", t: "AI / Machine Learning Engineer", l: "Roma · Ibrido", d: "Progettazione e training di modelli ML, fine-tuning di LLM, integrazione di soluzioni AI nei processi di business dei clienti." }, { tag: "Sviluppo", t: "Full-Stack Developer (Java / PHP)", l: "Roma · Ibrido", d: "Sviluppo end-to-end di applicazioni enterprise: API, microservizi e interfacce moderne con framework Java, PHP e JavaScript." }, { tag: "Sviluppo", t: "Sviluppatore Adobe Commerce / Magento", l: "Roma · Ibrido", d: "Progettazione e sviluppo back-end di e-Commerce B2B/B2C su piattaforma Magento 2." }, { tag: "Dati", t: "Data Engineer", l: "Roma · Ibrido", d: "Costruzione di pipeline ETL/ELT, modellazione dati e data platform a supporto dei progetti di AI e analytics." }, { tag: "Cloud", t: "DevOps / Cloud Engineer", l: "Roma · Ibrido", d: "CI/CD, Infrastructure as Code, gestione di ambienti Azure e AWS, observability e sicurezza per applicazioni in produzione." }, { tag: "Design", t: "UX/UI Designer", l: "Roma · Ibrido", d: "Progettazione di interfacce per e-Commerce, portali e applicazioni enterprise basate su AI." }, { tag: "Architettura", t: "Solution Architect", l: "Roma · Ibrido", d: "Definizione dell'architettura tecnica end-to-end e interfaccia con tutti gli stakeholder di progetto." }, { tag: "Spontanea", t: "Candidatura spontanea", l: "Tutte le sedi", d: "Non hai trovato il ruolo giusto? Inviaci comunque il tuo CV: i talenti ci interessano sempre." }, ] : [ { tag: "AI / ML", t: "AI / Machine Learning Engineer", l: "Rome · Hybrid", d: "Design and training of ML models, fine-tuning of LLMs, integration of AI into clients' business processes." }, { tag: "Engineering", t: "Full-Stack Developer (Java / PHP)", l: "Rome · Hybrid", d: "End-to-end development of enterprise applications: APIs, microservices and modern interfaces with Java, PHP and JavaScript frameworks." }, { tag: "Engineering", t: "Adobe Commerce / Magento Developer", l: "Rome · Hybrid", d: "Design and back-end development of B2B/B2C e-Commerce on Magento 2." }, { tag: "Data", t: "Data Engineer", l: "Rome · Hybrid", d: "ETL/ELT pipelines, data modelling and data platforms supporting AI and analytics projects." }, { tag: "Cloud", t: "DevOps / Cloud Engineer", l: "Rome · Hybrid", d: "CI/CD, Infrastructure as Code, management of Azure and AWS environments, observability and security for production applications." }, { tag: "Design", t: "UX/UI Designer", l: "Rome · Hybrid", d: "Interface design for e-Commerce, portals and AI-driven enterprise applications." }, { tag: "Architecture", t: "Solution Architect", l: "Rome · Hybrid", d: "Define the end-to-end technical architecture and act as interface with all stakeholders." }, { tag: "Open", t: "Spontaneous application", l: "All offices", d: "Didn't find the right role? Send your CV anyway — we're always interested in talent." }, ]; return (

{lang === "it" ? "Posizioni aperte" : "Open positions"}

{lang === "it" ? "Posizioni che stiamo cercando." : "Roles we're hiring for."}

{lang === "it" ? "Compila il form qui sotto indicando il ruolo per cui ti candidi. Rispondiamo a tutte le candidature entro 10 giorni lavorativi." : "Fill in the form below specifying the role you are applying for. We respond to all applications within 10 business days."}

{roles.map((r) => ( { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "var(--shadow-md)"; e.currentTarget.style.borderColor = "var(--tl-blue-primary)"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "var(--shadow-xs)"; e.currentTarget.style.borderColor = "var(--border)"; }}>

))}

); }; /* ----------------------------------------------------------------------------- LavoraForm — candidatura HR con FCE end-to-end (upload CV + submit unificato) ----------------------------------------------------------------------------- - Stato controllato (immutable spread). - CV: validazione client-side (estensione + MIME + size ≤5MB) prima del submit; poi upload reale via /api/forms/upload-attachment, signed URL passato come _attachments[] al successivo /api/forms/submit. Niente mailto. - Honeypot anti-bot (`_hp` invisibile) + Cloudflare Turnstile sul submit. - Field name allineati a form_configs.fields[].name su Supabase (vedi docs/fce-supabase-inserts-v0.4.0.sql). ----------------------------------------------------------------------------- */ const LAV_INITIAL = Object.freeze({ nome: "", cognome: "", email: "", telefono: "", ruolo: "", seniority: "", linkedin: "", portfolio: "", messaggio: "", consensoSel: false, consensoArchivio: false, consensoArt9: false, }); const LAV_EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/; const LAV_URL_RE = /^https?:\/\/[^\s]+$/i; const LAV_MAX_CV_BYTES = 5 * 1024 * 1024; /* 5 MB */ const LAV_ALLOWED_CV_EXT = [".pdf", ".doc", ".docx"]; const LAV_ALLOWED_CV_MIME = [ "application/pdf", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", ]; function lavValidateCv(file, lang) { if (!file) return null; const name = file.name || ""; const ext = name.toLowerCase().slice(name.lastIndexOf(".")); const okExt = LAV_ALLOWED_CV_EXT.indexOf(ext) >= 0; /* MIME può essere vuoto su alcuni browser/OS — affidabilità maggiore sull'estensione. */ const okMime = !file.type || LAV_ALLOWED_CV_MIME.indexOf(file.type) >= 0; if (!okExt || !okMime) { return lang === "it" ? "Formato non valido. Sono accettati solo PDF, DOC o DOCX." : "Invalid format. Only PDF, DOC or DOCX are accepted."; } if (file.size > LAV_MAX_CV_BYTES) { return lang === "it" ? "Il file supera i 5MB. Riduci la dimensione o invia un PDF compresso." : "File exceeds 5MB. Reduce the size or send a compressed PDF."; } return null; } /* Upload del CV via multipart al backend FCE. Ritorna la promise che risolve con { signedUrl, path, filename, sizeKb, contentType, expiresAt } oppure reject con { code, message }. */ async function lavUploadCv({ apiBase, siteId, formId, file }) { const fd = new FormData(); fd.append("siteId", siteId); fd.append("formId", formId); fd.append("file", file, file.name); let res; try { res = await fetch(apiBase + "/api/forms/upload-attachment", { method: "POST", body: fd, }); } catch (e) { throw { code: "network", message: e && e.message }; } if (res.ok) { const body = await res.json().catch(() => ({})); if (body && body.success && body.attachment) return body.attachment; throw { code: "generic", message: (body && body.error) || "" }; } if (res.status === 429) throw { code: "ratelimit" }; if (res.status === 404) throw { code: "form-not-found" }; if (res.status === 403) throw { code: "turnstile-failed" }; if (res.status === 400) { const body = await res.json().catch(() => ({})); throw { code: body && body.code ? body.code : "validation", message: body && body.error }; } throw { code: "generic" }; } window.LavoraForm = function LavoraForm({ lang }) { const [values, setValues] = useLavState(LAV_INITIAL); const [honeypot, setHoneypot] = useLavState(""); const [cvFile, setCvFile] = useLavState(null); const [cvError, setCvError] = useLavState(""); /* status: idle | uploading | submitting | success | error */ const [status, setStatus] = useLavState("idle"); const [errorMsg, setErrorMsg] = useLavState(""); const [fieldErrors, setFieldErrors] = useLavState({}); const fileRef = useLavRef(null); const turnstileTokenRef = useLavRef(null); const turnstileWidgetIdRef = useLavRef(null); const turnstileContainerRef = useLavRef(null); const t = lang === "it" ? { eyebrow: "Candidati", h2: "Inviaci la tua candidatura.", sub: "Compila il form, allega il tuo CV (PDF, DOC o DOCX, max 5MB) e ti ricontatteremo. Tutti i dati sono trattati nel rispetto del GDPR.", f1: "Nome", f2: "Cognome", f3: "Email", f4: "Telefono", role: "Ruolo per cui ti candidi", rolePlaceholder: "Seleziona un ruolo", roles: [ "AI / Machine Learning Engineer", "Full-Stack Developer (Java / PHP)", "Sviluppatore Adobe Commerce / Magento", "Data Engineer", "DevOps / Cloud Engineer", "UX/UI Designer", "Solution Architect", "Candidatura spontanea", ], seniority: "Seniority", seniorityPlaceholder: "Seleziona", seniorityOpts: ["Junior (0-2 anni)", "Mid (2-5 anni)", "Senior (5-10 anni)", "Lead (10+ anni)"], linkedin: "Profilo LinkedIn (opzionale)", portfolio: "Portfolio o GitHub (opzionale)", cv: "Curriculum Vitae", cvHelper: "Formati accettati: PDF, DOC, DOCX. Dimensione massima: 5 MB. Solo file in italiano o inglese.", cvBtn: "Scegli file", cvNoFile: "Nessun file selezionato", cvHandoffNotice: "Il tuo CV viene caricato in modo sicuro sui nostri server e allegato direttamente all'email che ricevono i nostri recruiter. Non serve alcun client email locale: una volta inviata la candidatura, il flusso è completo.", msg: "Messaggio (opzionale)", msgPlaceholder: "Raccontaci qualcosa di te, dei progetti che hai realizzato, di cosa ti motiva.", consent1Title: "Trattamento dei dati per la candidatura", consent1: "Acconsento al trattamento dei miei dati personali (inclusi quelli contenuti nel CV) ai sensi del Regolamento UE 2016/679 (GDPR) e del D.Lgs. 196/2003, per le finalità di selezione del personale.", consent2Title: "Conservazione del CV per opportunità future", consent2: "Acconsento, in via facoltativa, alla conservazione del mio CV per un periodo massimo di 24 mesi, per essere considerato in future opportunità di selezione anche per posizioni diverse da quella per cui mi candido.", consent3Title: "Dati particolari", consent3: "Confermo di non includere nel mio CV o nei messaggi dati personali appartenenti a categorie particolari ai sensi dell'art. 9 GDPR (origine etnica, opinioni politiche, convinzioni religiose, dati sanitari, ecc.) salvo che siano strettamente necessari alla valutazione della candidatura.", privacyLink: "Leggi l'informativa privacy completa", cta: "Invia candidatura", uploadingCv: "Caricamento CV…", sending: "Invio in corso…", success: "Candidatura ricevuta.", successSub: "Grazie. La tua candidatura è stata registrata insieme al CV. Ti risponderemo entro 10 giorni lavorativi all'indirizzo email indicato.", err: { required: "Campo obbligatorio.", email: "Indirizzo email non valido.", url: "URL non valido (deve iniziare con http:// o https://).", privacy: "È necessario accettare l'informativa.", cv: "Allega il tuo CV.", generic: "Si è verificato un errore. Riprova tra qualche istante.", ratelimit: "Hai inviato troppe richieste. Riprova tra un minuto.", validation: "Alcuni campi non sono stati compilati correttamente.", network: "Connessione non riuscita. Verifica la tua rete e riprova.", config: "Form non ancora configurato. Contatta l'amministratore.", turnstileMissing: "Completa la verifica anti-bot e riprova.", turnstileFailed: "Verifica anti-bot fallita. Ricarica la pagina e riprova.", uploadFailed: "Caricamento del CV non riuscito. Riprova o usa un file più piccolo.", uploadMime: "Formato CV non valido. Sono accettati solo PDF, DOC o DOCX.", uploadSize: "Il CV supera la dimensione massima consentita.", uploadMagic: "Il file CV sembra corrotto o non corrisponde all'estensione. Riprova con un altro file.", }, } : { eyebrow: "Apply", h2: "Send us your application.", sub: "Fill in the form, attach your CV (PDF, DOC or DOCX, max 5MB) and we'll get back to you. All data is processed in compliance with GDPR.", f1: "First name", f2: "Last name", f3: "Email", f4: "Phone", role: "Role you are applying for", rolePlaceholder: "Select a role", roles: [ "AI / Machine Learning Engineer", "Full-Stack Developer (Java / PHP)", "Adobe Commerce / Magento Developer", "Data Engineer", "DevOps / Cloud Engineer", "UX/UI Designer", "Solution Architect", "Spontaneous application", ], seniority: "Seniority", seniorityPlaceholder: "Select", seniorityOpts: ["Junior (0-2 years)", "Mid (2-5 years)", "Senior (5-10 years)", "Lead (10+ years)"], linkedin: "LinkedIn profile (optional)", portfolio: "Portfolio or GitHub (optional)", cv: "CV", cvHelper: "Accepted formats: PDF, DOC, DOCX. Max size: 5 MB. Files in Italian or English only.", cvBtn: "Choose file", cvNoFile: "No file selected", cvHandoffNotice: "Your CV is uploaded securely to our servers and attached directly to the email our recruiters receive. No local email client is needed: once you submit, the flow is complete.", msg: "Message (optional)", msgPlaceholder: "Tell us about yourself, the projects you've worked on, what motivates you.", consent1Title: "Data processing for the application", consent1: "I consent to the processing of my personal data (including the data contained in the CV) under EU Regulation 2016/679 (GDPR) and Italian Legislative Decree 196/2003 for personnel selection purposes.", consent2Title: "CV retention for future opportunities", consent2: "I optionally consent to the retention of my CV for a maximum period of 24 months, to be considered for future selection opportunities, including roles other than the one I'm applying for.", consent3Title: "Special category data", consent3: "I confirm that my CV and messages do not include personal data belonging to special categories under art. 9 GDPR (ethnic origin, political opinions, religious beliefs, health data, etc.) unless strictly necessary to assess the application.", privacyLink: "Read the full privacy notice", cta: "Submit application", uploadingCv: "Uploading CV…", sending: "Submitting…", success: "Application received.", successSub: "Thanks. Your application is registered together with the CV. We'll get back to you within 10 business days at the email address provided.", err: { required: "Required field.", email: "Invalid email address.", url: "Invalid URL (must start with http:// or https://).", privacy: "You must accept the notice.", cv: "Attach your CV.", generic: "Something went wrong. Please try again shortly.", ratelimit: "Too many requests. Please retry in a minute.", validation: "Some fields were not filled in correctly.", network: "Network error. Check your connection and retry.", config: "Form not yet configured. Please contact the administrator.", turnstileMissing: "Complete the anti-bot verification and retry.", turnstileFailed: "Anti-bot verification failed. Reload the page and retry.", uploadFailed: "CV upload failed. Try again or use a smaller file.", uploadMime: "Invalid CV format. Only PDF, DOC or DOCX are accepted.", uploadSize: "CV exceeds the maximum allowed size.", uploadMagic: "The CV file looks corrupted or doesn't match the extension. Try another file.", }, }; /* Turnstile render. */ useLavEffect(function () { const cfg = (typeof window !== "undefined" && window.FCE_CONFIG) || null; const helper = (typeof window !== "undefined" && window.FCE_HELPER) || null; if (!cfg || !cfg.turnstileSiteKey || !helper || !turnstileContainerRef.current) return; let cancelled = false; helper.ensureTurnstileScript() .then(function () { if (cancelled || !turnstileContainerRef.current || turnstileWidgetIdRef.current) return; turnstileWidgetIdRef.current = helper.renderTurnstile(turnstileContainerRef.current, { onToken: function (tok) { turnstileTokenRef.current = tok; }, onError: function () { turnstileTokenRef.current = null; }, onExpired: function () { turnstileTokenRef.current = null; }, }); }) .catch(function () { /* fallback gestito a submit */ }); return function () { cancelled = true; }; }, []); function setField(name, val) { setValues({ ...values, [name]: val }); if (fieldErrors[name]) { const next = { ...fieldErrors }; delete next[name]; setFieldErrors(next); } } function onFile(e) { const f = e.target.files && e.target.files[0]; if (!f) { setCvFile(null); setCvError(""); return; } const err = lavValidateCv(f, lang); if (err) { setCvFile(null); setCvError(err); e.target.value = ""; return; } setCvFile(f); setCvError(""); } function validate() { const errs = {}; if (!values.nome.trim()) errs.nome = t.err.required; if (!values.cognome.trim()) errs.cognome = t.err.required; if (!values.email.trim()) errs.email = t.err.required; else if (!LAV_EMAIL_RE.test(values.email.trim())) errs.email = t.err.email; if (!values.telefono.trim()) errs.telefono = t.err.required; if (!values.ruolo) errs.ruolo = t.err.required; if (!values.seniority) errs.seniority = t.err.required; if (values.linkedin && !LAV_URL_RE.test(values.linkedin.trim())) errs.linkedin = t.err.url; if (values.portfolio && !LAV_URL_RE.test(values.portfolio.trim())) errs.portfolio = t.err.url; if (!values.consensoSel) errs.consensoSel = t.err.privacy; if (!values.consensoArt9) errs.consensoArt9 = t.err.privacy; return errs; } function resetTurnstile() { const helper = window.FCE_HELPER; if (helper && turnstileWidgetIdRef.current) { helper.resetTurnstile(turnstileWidgetIdRef.current); turnstileTokenRef.current = null; } } function mapUploadErrorCode(code) { if (code === "ratelimit") return t.err.ratelimit; if (code === "form-not-found") return t.err.config; if (code === "turnstile-failed") return t.err.turnstileFailed; if (code === "size") return t.err.uploadSize; if (code === "mime" || code === "extension") return t.err.uploadMime; if (code === "magic") return t.err.uploadMagic; if (code === "empty") return t.err.uploadFailed; if (code === "network") return t.err.network; return t.err.uploadFailed; } async function handleSubmit(e) { e.preventDefault(); if (status === "uploading" || status === "submitting") return; const errs = validate(); if (!cvFile) errs.cv = t.err.cv; if (Object.keys(errs).length > 0) { setFieldErrors(errs); setStatus("error"); setErrorMsg(t.err.validation); return; } const cfg = window.FCE_CONFIG || null; const helper = window.FCE_HELPER || null; if (!cfg || !helper || !cfg.formIdLavora || /^TODO_/.test(cfg.formIdLavora)) { setStatus("error"); setErrorMsg(t.err.config); return; } if (cfg.turnstileSiteKey && !turnstileTokenRef.current) { setStatus("error"); setErrorMsg(t.err.turnstileMissing); return; } /* STEP 1 — upload del CV (multipart). */ setStatus("uploading"); setErrorMsg(""); setFieldErrors({}); let attachment; try { attachment = await lavUploadCv({ apiBase: cfg.apiBase, siteId: cfg.siteId, formId: cfg.formIdLavora, file: cvFile, }); } catch (err) { setStatus("error"); setErrorMsg(mapUploadErrorCode(err && err.code)); return; } /* STEP 2 — submit JSON con _attachments. */ setStatus("submitting"); const payload = { siteId: cfg.siteId, formId: cfg.formIdLavora, data: { nome: values.nome.trim(), cognome: values.cognome.trim(), email: values.email.trim(), telefono: values.telefono.trim(), ruolo: values.ruolo, seniority: values.seniority, linkedin: values.linkedin.trim(), portfolio: values.portfolio.trim(), messaggio: values.messaggio.trim(), cvFileName: attachment.filename, cvFileSizeKb: String(attachment.sizeKb || 0), consensoSel: values.consensoSel, consensoArchivio: values.consensoArchivio, consensoArt9: values.consensoArt9, }, _honeypot: honeypot, turnstileToken: turnstileTokenRef.current || "", _attachments: [ { url: attachment.signedUrl, filename: attachment.filename, contentType: attachment.contentType, sizeKb: attachment.sizeKb, }, ], }; const res = await helper.submitForm(payload); if (res.ok) { setStatus("success"); return; } const code = res.code; let msg = t.err.generic; if (code === "config") msg = t.err.config; else if (code === "turnstile-missing") msg = t.err.turnstileMissing; else if (code === "turnstile-failed") msg = t.err.turnstileFailed; else if (code === "ratelimit") msg = t.err.ratelimit; else if (code === "validation") msg = (res.body && res.body.error) || t.err.validation; else if (code === "network") msg = t.err.network; setStatus("error"); setErrorMsg(msg); resetTurnstile(); } const isUploading = status === "uploading"; const isSubmitting = status === "submitting"; const isBusy = isUploading || isSubmitting; const isSuccess = status === "success"; let ctaLabel = t.cta; if (isUploading) ctaLabel = t.uploadingCv; else if (isSubmitting) ctaLabel = t.sending; return (

{t.eyebrow}

{t.h2}

{t.sub}

{isSuccess ? (

{t.success}

{t.successSub}

) : (

{/* Honeypot anti-bot — non visibile, deve restare vuoto. */}

{/* CV Upload */}

{t.cv} *

{cvFile ? (cvFile.name + " · " + Math.round(cvFile.size / 1024) + " KB") : t.cvNoFile}

{t.cvHelper}

{(cvError || fieldErrors.cv) && (

{cvError || fieldErrors.cv}

)}

{t.cvHandoffNotice}

{/* Privacy / Consents block */}

{t.privacyLink}

{/* Cloudflare Turnstile widget — anti-bot HARD sul submit. */}

{status === "error" && errorMsg && (

{errorMsg}

)}

: null}> {ctaLabel}

)} ); }; function Consent({ name, title, body, required = false, checked, onChange, error }) { return ( onChange(name, e.target.checked)} aria-invalid={!!error} style={{ marginTop: 4, flexShrink: 0, width: 16, height: 16, accentColor: "#0B57E0" }} />

{title} {required && *}

{body}

); } function LavField({ label, name, type = "text", multiline = false, placeholder, value, onChange, error, disabled = false, required = false, autoComplete }) { const [focus, setFocus] = useLavState(false); const borderColor = error ? "var(--tl-danger)" : (focus ? "var(--tl-blue-primary)" : "var(--border)"); const common = { fontFamily: "var(--font-sans)", fontSize: 14, padding: "12px 14px", borderRadius: 10, border: `1px solid ${borderColor}`, background: "#fff", color: "var(--fg-1)", outline: "none", width: "100%", boxSizing: "border-box", transition: "all 140ms", boxShadow: focus && !error ? "0 0 0 4px rgba(11,87,224,.12)" : "none", opacity: disabled ? 0.6 : 1, }; const handleChange = (e) => onChange(name, e.target.value); return ( {label}{required && " *"} {multiline ?

setFocus(true)} onBlur={() => setFocus(false)} style={common} />
        : <input type={type} name={name} placeholder={placeholder} value={value} onChange={handleChange} required={required} disabled={disabled} autoComplete={autoComplete} aria-invalid={!!error} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} style={common} />}
      {error && (<span role="alert" style={{ fontSize: 11, color: "var(--tl-danger)", marginTop: 2 }}>{error}</span>)}
    </label>
  );
}