export default function Example() {
  return (
    <Box css={{ display: "flex", flexDirection: "column", gap: "$050" }}>
      <InputText defaultValue="Jane Doe" type="text" label="Name" />
      <InputText defaultValue="Apples" type="search" label="Search" />
      <InputText
        icon="left"
        type="email"
        defaultValue="Jane@mail.com"
        label="Email"
      >
        <Icon label="">
          <Email />
        </Icon>
      </InputText>
      <InputText
        icon="left"
        type="url"
        defaultValue="www.washingtonpost.com"
        label="Website"
      >
        <Icon label="">
          <Globe />
        </Icon>
      </InputText>
      <InputText
        icon="left"
        type="tel"
        defaultValue="123-456-7890"
        label="Phone"
      >
        <Icon label="">
          <Phone />
        </Icon>
      </InputText>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape