TextField

import { TextField } from "@styple/design-system";

<Flex
  css={{
    flexDirection: "column",
    gap: "$md"
  }}
>  
  <TextField placeholder="Default textfield" />
  <TextField size="lg" placeholder="Large textfield" />
  <TextField size="lg" placeholder="Disabled textfield" disabled />
  <TextField size="lg" placeholder="Ghost textfield" variant="ghost" />
  <TextField size="lg" placeholder="Invalid textfield" state="invalid" />
  <TextField size="lg" placeholder="Valid textfield" state="valid" />
</Flex>