    <div className="flex flex-column gap-xs" style={{ backgroundColor: "white", padding: "8px", maxWidth: "380px" }}>
      <Input placeholder="ex: <NAME>" inputSize="lg" />
      <Input placeholder="ex: <NAME>" />
      <Input placeholder="Search" before={<Icon color="surface" src={SearchIC} />} />
      <Input placeholder="Search" after={<Icon color="surface" src={SearchIC} />} />
      <Input placeholder="john" before={<Text variant="b2">@</Text>} after={<Text variant="b2">:matrix.org</Text>} />
      <Input placeholder="ex: <NAME>" inputSize="sm" />
      <Input placeholder="ex: <NAME>" state="success" />
      <Input placeholder="ex: <NAME>" state="error" />
      <Input placeholder="ex: <NAME>" disabled />
      <Input placeholder="ex: <NAME>" state="success" disabled />
      <Input placeholder="ex: <NAME>" state="error" disabled />
    </div>