message: further revisions to migrate Link to TS
diff: @@ -5,27 +5,28 @@ import {system} from 'styled-system'
  import {COMMON, TYPOGRAPHY, get, SystemCommonProps, SystemTypographyProps} from './constants'
  import sx, {SxProp} from './sx'
  import theme from './theme'
  -import { ComponentProps } from './utils/types';
  +import {ComponentProps} from './utils/types'
  -type LinkBaseProps = {
  - as?: React.ReactNode;
  - href?: string;
  - hoverColor?: string;
  - muted?: boolean;
  - underline?: boolean;
  -} & SystemCommonProps & SxProp & SystemTypographyProps
  +type StyledLinkProps = {
  + as?: any
  + hoverColor?: string
  + muted?: boolean
  + underline?: boolean
  +} & SystemCommonProps &
  + SxProp &
  + SystemTypographyProps
  -const buttonStyles = {
  - display: 'inline-block',
  - padding: '0',
  - fontSize: 'inherit',
  - whiteSpace: 'nowrap',
  - cursor: 'pointer',
  - userSelect: 'none',
  - backgroundColor: 'transparent',
  - border: '0',
  - appearance: 'none'
  -}
  +const buttonStyles = `
  + display: inline-block;
  + padding: 0;
  + font-size: inherit;
  + white-space: nowrap;
  + cursor: pointer;
  + user-select: none;
  + background-color: transparent;
  + border: 0;
  + appearance: none;
  +`
  const hoverColor = system({
  hoverColor: {
  @@ -34,31 +35,24 @@ const hoverColor = system({
  }
  })
  -const linkColor = ({color, muted, ...props}: LinkBaseProps) => ({
  +const Link = styled.a.attrs<StyledLinkProps>(({color, muted}) => ({
  color: color ? color : muted ? 'gray.6' : 'blue.5'
  -})
  -
  -const textDecoration = ({underline, ...props}: LinkBaseProps) => underline ? 'underline' : 'none'
  -const hoverCss = ({hoverColor, muted, ...props}: LinkBaseProps) => hoverColor ? hoverColor : muted ? `color: ${get('colors.blue.5')(theme)}` : ''
  -const buttonCss = ({as, ...props}: LinkBaseProps) => as === 'button' ? buttonStyles : ''
  -
  -const Link = styled.a.attrs(linkColor)`
  - text-decoration: ${textDecoration};
  +}))<StyledLinkProps>`
  + text-decoration: ${({underline}) => (underline ? 'underline' : 'none')};
  &:hover {
  - text-decoration: ${textDecoration};
  - ${hoverCss};
  + text-decoration: ${({underline}) => (underline ? 'underline' : 'none')};
  + ${({hoverColor, muted}) => (hoverColor ? hoverColor : muted ? `color: ${get('colors.blue.5')(theme)}` : '')};
  }
  - ${buttonCss};
  - ${TYPOGRAPHY} ${COMMON};
  + ${({as}) => (as === 'button' ? buttonStyles : '')};
  + ${TYPOGRAPHY};
  + ${COMMON};
  ${sx};
  `
  -
  Link.defaultProps = {
  theme
  }
  Link.propTypes = {
  - as: PropTypes.elementType,
  hoverColor: PropTypes.string,
  href: PropTypes.string,
  muted: PropTypes.bool,
  