message: label updates
diff: import PropTypes from 'prop-types'
  import styled, {css} from 'styled-components'
  -import {variant} from 'styled-system'
  +import {variant, borderColor} from 'styled-system'
  import theme from './theme'
  import {COMMON, get} from './constants'
  const outlineStyles = css`
  margin-top: -1px; // offsets the 1px border
  margin-bottom: -1px; // offsets the 1px border
  - font-weight: 400;
  color: ${get('colors.gray.6')};
  - background-color: transparent;
  border: ${get('borders.1')} ${get('colors.blackfade15')};
  box-shadow: none;
  + ${borderColor};
  + ${COMMON};
  + background-color: transparent;
  `
  const sizeVariant = variant({
  variants: {
  small: {
  fontSize: 0,
  - px: '0.125em',
  - py: 1
  + px: '8px',
  + py: '0px'
  },
  medium: {
  fontSize: 0,
  - px: '3px',
  - py: 1
  + px: '8px',
  + py: '1px'
  },
  large: {
  fontSize: 1,
  - px: 1,
  - py: 2
  + px: '12px',
  + py: '4px'
  },
  xl: {
  fontSize: 2,
  @@ -44,7 +45,7 @@ const Label = styled('span')`
  font-weight: 600;
  line-height: ${get('lineHeights.condensedUltra')};
  color: ${get('colors.white')};
  - border-radius: 2px;
  + border-radius: 100px;
  &:hover {
  text-decoration: none;
  }
  