<NME> Input.tsx
<BEF> import { Box, color, space } from "@artsy/palette"
import { growAndFadeIn } from "Assets/Animations"
import { garamond, unica } from "Assets/Fonts"
import React from "react"
import styled from "styled-components"
import { block } from "./Helpers"
import { borderedInput } from "./Mixins"

export interface InputProps extends React.HTMLProps<HTMLInputElement> {
  block?: boolean
  description?: string
  error?: string
  ref?: React.RefObject<any>
  title?: string
}

/**
 * @deprecated in favor of our Design System Input component in @artsy/palette
 * https://palette.artsy.net/elements/inputs/input
 */
export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
  ({ error, title, description, ...rest }, ref) => {
    return (
      <Box>
        {title && <Title>{title}</Title>}
        {description && <Description>{description}</Description>}
        <StyledInput ref={ref} hasError={!!error} {...rest} />
        {error && <InputError>{error}</InputError>}
      </Box>
    )
  }
)

export const StyledInput = styled.input`
  ${borderedInput};
  ${block(24)};

  /* Remove shadow and default border radius on iOS */
  background-clip: padding-box;
  border-radius: 0;
`

export const Title = styled.div`
  ${garamond("s17")};
`

const Description = styled.div`
  ${garamond("s15")};
  color: ${color("black60")};
  margin: ${space(0.3)}px 0 0;
`

export const InputError = styled.div`
  ${unica("s12")};
  margin-top: ${space(1)}px;
  color: ${color("red100")};
  transition: visibility 0.2s linear;
  animation: ${growAndFadeIn("16px")} 0.25s linear;
`

const Label = styled.label.attrs<{ out: boolean }>({})`
  ${unica("s12")};
  position: absolute;
  left: 10px;
  top: 7px;

<MSG> [Input] fixes forms to pass in new values

<DFF> @@ -59,7 +59,7 @@ const InputContainer = styled.div.attrs<{
 `
 
 const Label = styled.label.attrs<{ out: boolean }>({})`
-  ${unica("s12")};
+  ${unica("s12", "medium")};
   position: absolute;
   left: 10px;
   top: 7px;

{'addition_count': 1, 'commit_subject': '[Input] fixes forms to pass in new values', 'deletion_count': 1, 'file_extension': '.tsx', 'lang': 'tsx', 'license': 'mit', 'repo_name': 'artsy/reaction'}