Input

export const AllStates = () => (
  <div className="flex flex-col gap-3">
    <Input placeholder="Enter text..." aria-label="Text input" />
    <div>
      <Input defaultValue="Invalid" aria-invalid="true" aria-label="Invalid input example" />
      <span className="text-signal-red-text mt-1 block text-xs">This field is required</span>
    </div>
    <Input disabled placeholder="Disabled" />
    <Input placeholder="Search" suffix={<Search />} aria-label="Search" />
  </div>
);

export const AllTypes = () => (
  <div className="flex w-64 flex-col gap-4">
    <Input type="text" placeholder="Text" />
    <Input type="email" placeholder="Email" />
    <Input type="password" placeholder="Password" />
    <Input type="number" placeholder="Number" />
    <Input type="tel" placeholder="Telephone" />
    <Input type="url" placeholder="URL" />
    <Input type="search" placeholder="Search" />
  </div>
);