styled-components TS way

tshelpful.tsx

export function withProps<U>() {
  return <P, T, O>(
    fn: ThemedStyledFunction<P, T, O>,
  ): ThemedStyledFunction<P & U, T, O & U> =>
    fn as ThemedStyledFunction<P & U, T, O & U>;
}

interface StyledAlertProps {
  isAttachable?: boolean;
  status?: string;
}

const StyledAlert = withProps<StyledAlertProps>()(styled.div)`
  padding: 13px 24px;
  line-height: 1;
  margin-bottom: 1rem;
  font-size: 15px;
  border: 1px solid transparent;
  border-radius: 4px;
  a {
    color: #aaeaf4;
    text-decoration: underline;
    margin: 0 8px;
    &:hover,
    &:focus {
      color: #aaeaf4;
    }
  }

  ${props =>
    props.isAttachable
      ? css`
          margin-bottom: -2px;
          position: relative;
          z-index: 100;
          border-bottom-right-radius: 0;
          border-bottom-left-radius: 0;
        `
      : ''}
  ${props =>
    props.status === 'success'
      ? css`
          background: #48c076;
          color: white;
        `
      : ''}
  ${props =>
    props.status === 'info'
      ? css`
          background: #7a81cc;
          color: white;
        `
      : ''}
  ${props =>
    props.status === 'warning'
      ? css`
          background: #fff4e6;
          border: 1px solid #ffd8a8;
          color: #e8590c;
        `
      : ''}
  ${props =>
    props.status === 'error'
      ? css`
          background: #e85dac;
          color: white;
        `
      : ''}
`;

const AlertClose = styled.div`
  float: right;
  cursor: pointer;
  margin-top: 8px;
`;

interface MultilineProps {
  isMultiline?: boolean;
}

const AlertIcon = styled.div`
  ${(props: MultilineProps) =>
    props.isMultiline
      ? css`
          position: absolute;
        `
      : ''};
`;

const Message = styled.span`
  margin-left: 12px;

  ${(props: MultilineProps) =>
    props.isMultiline
      ? css`
          margin-left: 12px;
          padding-left: 32px;
          line-height: 1.2;
        `
      : ''};
`;