Close.jsx

import React from "react";
import { string } from "prop-types";
import styled from "styled-components";

function Close({ className }) {
  return (
    <svg className={className} viewBox="0 0 24 24">
      <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
    </svg>
  );
}

Close.propTypes = {
  className: string
};

Close.defaultProps = {
  className: undefined
};

export default styled(Close)`
  height: 2rem;
  fill: ${({ theme }) => theme.error};
`;

Input.jsx

import React from "react";
import { string, bool } from "prop-types";
import styled from "styled-components";

import Loader from "components/common/icons/Loader";
import Close from "components/common/icons/Close";

const Input = styled.input`
  padding: 0.5rem;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.25;
  letter-spacing: -0.35px;
  outline: none;
  border: none;

  min-width: 0;
  text-align: inherit;

  flex-grow: 1;

  &:focus,
  &:hover {
    box-shadow: inset 0 0 2px ${({ theme }) => theme.primary};
  }
  transition: 0.3s ${({ theme }) => theme.bezier.fast};

  ${({ theme, error }) =>
    error ? `box-shadow: inset 0 0 2px ${theme.errorContrast};` : ""}
`;

function TextInput({ className, loading, error, ...props }) {
  return (
    <div className={className}>
      <Input type="text" {...props} error={error} />
      {error && <Close />}
      {loading && <Loader />}
    </div>
  );
}

TextInput.propTypes = {
  className: string,
  loading: bool,
  error: bool
};

TextInput.defaultProps = {
  className: undefined,
  loading: false,
  error: false
};

export default styled(TextInput)`
  transition: 0.5s ${({ theme }) => theme.bezier.fast};
  border: 1px solid ${({ theme }) => theme.table.separator};
  display: inline-flex;
  align-items: center;

  ${({ theme, error }) =>
    error ? `box-shadow: inset 0 0 2px ${theme.errorContrast};` : ""}
`;

Loader.jsx

import React from "react";
import { string } from "prop-types";
import styled from "styled-components";

function Loader({ className }) {
  return (
    <svg className={className} viewBox="0 0 24 24">
      <circle r="2" cx="6" cy="12">
        <animate
          attributeName="r"
          values="2;3;2;2;2;2;2"
          dur="1s"
          repeatCount="indefinite"
        />
      </circle>
      <circle r="2" cx="12" cy="12">
        <animate
          attributeName="r"
          values="2;3;2;2;2;2;2"
          dur="1s"
          repeatCount="indefinite"
          begin="0.3s"
        />
      </circle>
      <circle r="2" cx="18" cy="12">
        <animate
          attributeName="r"
          values="2;3;2;2;2;2;2"
          dur="1s"
          repeatCount="indefinite"
          begin="0.6s"
        />
      </circle>
    </svg>
  );
}

Loader.propTypes = {
  className: string
};

Loader.defaultProps = {
  className: undefined
};

export default styled(Loader)`
  height: 2rem;
  fill: #444;
`;