fix: input must be direct child of Form Control

otherwise the error messages won't display. divs moved to surround the form control elem

src/components/Input.tsx

@@ -14,13 +14,14 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <Form.Field name={name} className="flex flex-col gap-2">
         <Form.Label>{label}</Form.Label>
-        <Form.Control asChild>
-          <div className="flex items-center gap-2 bg-white rounded-full shadow-inner min-w-60 w-max py-3 px-5 focus-within:shadow-inner-focus">
-            <span className="text-neutral-300 w-5 h-5">{icon}</span>
+        <div className="flex items-center gap-2 bg-white rounded-full shadow-inner min-w-60 w-max py-3 px-5 focus-within:shadow-inner-focus">
+          {icon && <span className="text-neutral-300 w-5 h-5">{icon}</span>}
+
+          <Form.Control asChild>
             <input {...delegated} ref={ref} />
-          </div>
-        </Form.Control>
-        <Form.Message className="text-primary-300" match="valueMissing">
+          </Form.Control>
+        </div>
+        <Form.Message className="px-2 text-primary-300" match="valueMissing">
           Please enter your {label}
         </Form.Message>
         {match !== undefined && (

src/components/Textarea.tsx

@@ -27,7 +27,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             onChange={(e) => setCharacterCount(e.target.value.length)}
           />
         </Form.Control>
-        <Form.Message className="text-primary-300" match="valueMissing">
+        <Form.Message className="text-primary-300 px-2" match="valueMissing">
           Please enter your {label}
         </Form.Message>
       </Form.Field>