{"version":3,"file":"FormField.BTiQ70c1.mjs","names":["useId","useState"],"sources":["https:/framerusercontent.com/modules/uXWgDtlvkTOPVX3Kn4aX/Kfpda7HqJMZwLJTY7CDt/FormField.js"],"sourcesContent":["// Accessible form field for Echo Hearing.\n// Label always visible, hint and error linked with aria-describedby,\n// aria-invalid on error, 3px focus ring outside the field.\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useId,useState,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";// Color styles from the project (Assets panel). Fallbacks are the Teal theme values.\nconst token={surface:\"var(--token-937ca102-3c81-4064-b5a0-515c220ad8a8, #ffffff)\",page:\"var(--token-9049dfb5-93a8-4412-8de8-456b08fe68fd, #f6f7f4)\",textPrimary:\"var(--token-db7ee0a4-c448-469a-a72e-5400018ea3c1, #15232b)\",textSecondary:\"var(--token-2e68de52-b739-436c-8249-eee9946979f7, #4a5a63)\",textError:\"var(--token-61ea9b63-968a-45ba-9fe7-a55654a03ee7, #b3261e)\",borderStrong:\"var(--token-f200ab92-2705-466e-a30e-cd81684f9bbf, #7a8791)\",borderSubtle:\"var(--token-cdf12598-2514-4d10-a3a5-d00c487ee817, #c9cfcb)\",borderBrand:\"var(--token-7abd489e-7693-434d-b067-61f49b60b79a, #1e5b94)\",borderError:\"var(--token-dd272a10-bdcb-4e44-9cce-e50978ef3b40, #b3261e)\",focusRing:\"var(--token-fac7c95a-ec64-4182-99b4-2028f1eac09d, #15232b)\"};const fontFamily=`\"Atkinson Hyperlegible Next\", sans-serif`;const fontFaces=[\"latin-ext\",\"latin\"].map(subset=>`@font-face{font-family:\"Atkinson Hyperlegible Next\";font-style:normal;font-weight:200 800;font-display:swap;src:url(${subset===\"latin\"?\"https://fonts.gstatic.com/s/atkinsonhyperlegiblenext/v7/NaPNcYPdHfdVxJw0IfIP0lvYFqijb-UxCtm5_wdGseiJn3o.woff2\":\"https://fonts.gstatic.com/s/atkinsonhyperlegiblenext/v7/NaPNcYPdHfdVxJw0IfIP0lvYFqijb-UxCtm5_wdGseiHn3qmpQ.woff2\"}) format(\"woff2\");}`).join(\"\");// Mirrors the project text styles: Label, Caption and Body/Medium.\nconst labelText={fontFamily,fontSize:16,lineHeight:\"24px\",fontWeight:600,margin:0};const captionText={fontFamily,fontSize:15,lineHeight:\"22px\",fontWeight:400,margin:0};const bodyText={fontFamily,fontSize:18,lineHeight:\"28px\",fontWeight:400};/**\n * Form Field\n *\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 110\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function FormField(props){const{label,showHint,hint,name,type,autoComplete,placeholder,required,errorMessage,state,previewValue,style}=props;const isStatic=useIsStaticRenderer();const baseId=useId().replace(/:/g,\"\");const inputId=`${baseId}-input`;const hintId=`${baseId}-hint`;const errorId=`${baseId}-error`;// Runtime error from native validation (on form submit).\nconst[runtimeError,setRuntimeError]=useState(false);const disabled=state===\"disabled\";const hasError=!disabled&&(state===\"error\"||runtimeError);const hintVisible=showHint&&hint.trim().length>0;// Error text must start with \"Error:\" so it is not conveyed by colour alone.\nconst errorText=/^error:/i.test(errorMessage.trim())?errorMessage.trim():`Error: ${errorMessage.trim()}`;const describedBy=[hintVisible?hintId:null,hasError?errorId:null].filter(Boolean).join(\" \")||undefined;function handleInvalid(event){// Replace the browser bubble with the inline, programmatically linked error.\nevent.preventDefault();const input=event.currentTarget;startTransition(()=>setRuntimeError(true));// Move focus to the first invalid field of the form, as the browser would.\nconst firstInvalid=input.form?.querySelector(\":invalid\");if(firstInvalid===input)input.focus();}function handleInput(event){if(runtimeError&&event.currentTarget.validity.valid){startTransition(()=>setRuntimeError(false));}}const borderColor=disabled?token.borderSubtle:hasError?token.borderError:token.borderStrong;const isFixedWidth=style?.width===\"100%\";return /*#__PURE__*/_jsxs(\"div\",{style:{...style,position:\"relative\",display:\"flex\",flexDirection:\"column\",gap:8,width:isFixedWidth?\"100%\":400},children:[/*#__PURE__*/_jsx(\"style\",{children:`${fontFaces}\n.sp-form-field-input{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:100%;min-height:48px;padding:8px 16px;border-radius:6px;border:2px solid var(--sp-border);outline:none;transition:border-color .2s,box-shadow .2s;}\n.sp-form-field-input::placeholder{color:${token.textSecondary};opacity:1;}\n.sp-form-field-input:focus-visible{border-color:${token.borderBrand};box-shadow:0 0 0 3px ${token.focusRing};}\n.sp-form-field-input[aria-invalid=\"true\"]:focus-visible{border-color:${token.borderError};}\n.sp-form-field-input:disabled{cursor:not-allowed;}`}),/*#__PURE__*/_jsx(\"label\",{htmlFor:inputId,style:{...labelText,color:disabled?token.textSecondary:token.textPrimary},children:label}),hintVisible&&/*#__PURE__*/_jsx(\"p\",{id:hintId,style:{...captionText,color:token.textSecondary},children:hint}),/*#__PURE__*/_jsx(\"input\",{id:inputId,className:\"sp-form-field-input\",name:name,type:type,autoComplete:autoComplete||undefined,placeholder:placeholder||undefined,required:required,disabled:disabled,\"aria-invalid\":hasError?true:undefined,\"aria-describedby\":describedBy,defaultValue:isStatic?previewValue:undefined,onInvalid:handleInvalid,onInput:handleInput,style:{...bodyText,\"--sp-border\":borderColor,background:disabled?token.page:token.surface,color:disabled?token.textSecondary:token.textPrimary}}),hasError&&/*#__PURE__*/_jsx(\"p\",{id:errorId,style:{...captionText,color:token.textError},children:errorText})]});}addPropertyControls(FormField,{label:{type:ControlType.String,title:\"Label\",defaultValue:\"Full name\"},showHint:{type:ControlType.Boolean,title:\"Show hint\",defaultValue:true},hint:{type:ControlType.String,title:\"Hint\",defaultValue:\"As it appears on your insurance card\",hidden:props=>!props.showHint},name:{type:ControlType.String,title:\"Field name\",defaultValue:\"Full name\",description:\"Name used in form submissions.\"},type:{type:ControlType.Enum,title:\"Type\",defaultValue:\"text\",options:[\"text\",\"email\",\"tel\",\"number\",\"date\"],optionTitles:[\"Text\",\"Email\",\"Phone\",\"Number\",\"Date\"]},autoComplete:{type:ControlType.String,title:\"Autocomplete\",defaultValue:\"name\",description:\"HTML autocomplete token, e.g. name, email, tel.\"},placeholder:{type:ControlType.String,title:\"Placeholder\",defaultValue:\"\",description:\"Optional. Never use it instead of the label.\"},required:{type:ControlType.Boolean,title:\"Required\",defaultValue:true},errorMessage:{type:ControlType.String,title:\"Error\",defaultValue:\"Error: Enter your full name so we can find your booking.\",displayTextArea:true,description:'Say how to fix it. \"Error:\" is added if missing.'},state:{type:ControlType.Enum,title:\"State\",defaultValue:\"default\",options:[\"default\",\"error\",\"disabled\"],optionTitles:[\"Default\",\"Error\",\"Disabled\"],displaySegmentedControl:true},previewValue:{type:ControlType.String,title:\"Canvas value\",defaultValue:\"Maria Santos\",description:\"Shown only on the canvas, never on the live site.\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FormField\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"110\",\"framerIntrinsicWidth\":\"400\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./FormField.map"],"mappings":"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"}