Contract us

If you have other things,please contract us.

( Username This is your public display name. )} /> ( Email This is your Email. )} /> ( Message

</FormControl>
            <FormDescription>
              This is what you want to say.
            </FormDescription>
            <FormMessage />
          </FormItem>
        )}
      />
      <div className="flex justify-center">
        <Button type="submit">Submit</Button>
      </div>
    </form>
  </Form>
  </div>
</section>
  )
}`,__src__:"registry/default/example/contract.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { zodResolver } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@hookform/resolvers/zod"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { useForm } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react-hook-form"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { z } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"zod"'})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/button"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  Form,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  FormControl,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  FormDescription,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  FormField,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  FormItem,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  FormLabel,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  FormMessage,"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/form"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Input } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/input"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { toast } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/use-toast"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Textarea } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/textarea"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:"// Assuming you have a Textarea component"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:"// Define the form schema with proper email validation"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"FormSchema"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" z."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"object"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"({"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  username: z."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"()."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"min"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"2"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    message: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Username must be at least 2 characters."'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  }),"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  email: z."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"()."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"email"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"({"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    message: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Must be a valid email address."'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  }),"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  message: z."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"()."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"min"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"5"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    message: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Message must be at least 5 characters."'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  }),"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"})"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"InputForm"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"form"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useForm"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"z"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"infer"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" FormSchema>>({"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    resolver: "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"zodResolver"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(FormSchema),"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    defaultValues: {"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      username: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      email: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      message: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    },"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  })"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"async"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"onSubmit"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"data"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"z"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"infer"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" FormSchema>) {"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    "})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"toast"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"({"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        title: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Your messsage is successful send"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        description: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"email send success"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        variant: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"default"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      })"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"   "})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  }"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"section"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"container flex flex-col  gap-6 py-8 md:max-w-[64rem] md:py-12 lg:py-24"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"container flex max-w-[64rem] flex-col items-center gap-4 text-center"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"bg-gradient-to-r from-[#9867F0] to-[#ED4E50] bg-clip-text text-transparent"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      Contract us"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-[42rem] leading-normal text-muted-foreground sm:text-xl sm:leading-8"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      If you have other things,please contract us."})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex justify-center items-center"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"     "})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Form"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{..."}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"form"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"form"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"onSubmit"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"form."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"handleSubmit"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(onSubmit)"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-2/3 space-y-6 mx-auto"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormField"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"control"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"form.control"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"name"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"username"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"render"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"({ "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"field"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }) "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormItem"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormLabel"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Username</"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormLabel"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormControl"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"              <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Input"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"placeholder"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"buoooou"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{..."}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"field"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormControl"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormDescription"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"              This is your public display name."})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormDescription"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormMessage"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormItem"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        )"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      />"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormField"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"control"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"form.control"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"name"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"email"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"render"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"({ "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"field"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }) "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormItem"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormLabel"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Email</"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormLabel"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormControl"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"              <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Input"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"placeholder"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"example@email.com"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{..."}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"field"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormControl"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormDescription"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"              This is your Email."})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormDescription"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormMessage"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormItem"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        )"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      />"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormField"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"control"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"form.control"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"name"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"message"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"render"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"({ "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"field"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }) "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormItem"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormLabel"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Message</"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormLabel"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormControl"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"              <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Textarea"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"placeholder"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"what you want to say"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{..."}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"field"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormControl"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormDescription"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"              This is what you want to say."})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormDescription"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"            <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormMessage"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"          </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FormItem"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        )"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      />"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex justify-center"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"submit"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Submit</"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"      </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"    </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"form"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Form"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  </"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"</"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"section"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"  )"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})})]})})})}),`
`,(0,n.jsxs)(l.h2,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),`
`,(0,n.jsx)(o,{defaultValue:"manual",children:(0,n.jsx)(r,{value:"manual",children:(0,n.jsxs)(t,{children:[(0,n.jsx)(i,{children:"Install the following dependencies:"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install @hookform/resolvers  react-hook-form zod 
`,__npmCommand__:`npm install @hookform/resolvers  react-hook-form zod 
`,__yarnCommand__:`yarn add @hookform/resolvers  react-hook-form zod 
`,__pnpmCommand__:`pnpm add @hookform/resolvers  react-hook-form zod 
`,__bunCommand__:`bun add @hookform/resolvers  react-hook-form zod 
`,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"npm install @hookform/resolvers  react-hook-form zod "})})})})}),(0,n.jsx)(i,{children:"Copy and paste the code into your project."})]})})})]})}function B(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(D,e)})):D(e)}var b=B;function c(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return g(A);})();
;return Component;</article></body></html>