const schema = z.object({
  email: z.string().email(),
  firstName: z.string().nonempty(),
  preferredSport: z.enum(['Basketball', 'Football', 'Other']),
  newsletter: z.boolean().default(false),
})

export default () => (
  <Example title={title} description={description}>
    <Form
      values={{ email: 'default@domain.tld', preferredSport: 'Basketball' }}
      schema={schema}
      renderField={({ Field, ...props }) => {
        const { name, dirty } = props

        return (
          <Field key={name} {...props}>
            {({ Label, SmartInput, Errors }) => (
              <>
                <Label className={dirty ? 'text-yellow-600' : undefined} />
                <SmartInput
                  className={
                    dirty
                      ? 'border-yellow-600 focus:border-yellow-600 focus:ring-yellow-600'
                      : undefined
                  }
                />
                <Errors />
              </>
            )}
          </Field>
        )
      }}
    />
  </Example>
)

)