const schema = z.object({
  street: z.string().min(1),
  number: z.string().min(1),
  extendedAddress: z.string().optional(),
  city: z.string().min(1),
  state: z.enum(['Alabama', 'Alaska', 'Arizona']),
})

export default () => (
  <Form schema={schema} autoFocus="street">
    {({ Field, Errors, Button }) => (
      <>
        <div className="flex space-x-4">
          <Field name="street" className="flex-[3]" />
          <Field name="number" className="flex-[1]" />
        </div>
        <Field name="extendedAddress" />
        <div className="flex space-x-4">
          <Field name="city" className="flex-1" />
          <Field name="state" />
        </div>
        <Errors />
        <Button />
      </>
    )}
  </Form>
)