message: get changes back from Avatar.js
diff: -import styled from 'styled-components'
  import PropTypes from 'prop-types'
  -import sx from './sx'
  -import {get} from './constants'
  +import styled from 'styled-components'
  +import {get, COMMON} from './constants'
  import {space} from 'styled-system'
  import systemPropTypes from '@styled-system/prop-types'
  import theme from './theme'
  -function borderRadius({size}) {
  - return {
  - borderRadius: size <= 24 ? '2px' : '3px'
  +
  +function getBorderRadius(props) {
  + if (props.square) {
  + return props.size <= 24 ? '4px' : '6px'
  + } else {
  + return '50%'
  }
  }
  @@ -21,23 +23,21 @@ const Avatar = styled.img.attrs(props => ({
  overflow: hidden; // Ensure page layout in Firefox should images fail to load
  line-height: ${get('lineHeights.condensedUltra')};
  vertical-align: middle;
  - ${borderRadius};
  - ${space};
  - ${sx};
  + border-radius: ${props => getBorderRadius(props)};
  + ${COMMON};
  `
  Avatar.defaultProps = {
  theme,
  size: 20,
  - alt: ''
  + alt: '',
  + square: false
  }
  Avatar.propTypes = {
  - alt: PropTypes.string.isRequired,
  + ...COMMON.propTypes,
  size: PropTypes.number,
  - src: PropTypes.string,
  - ...systemPropTypes.space,
  - ...sx.propTypes,
  + square: PropTypes.bool,
  theme: PropTypes.object
  }
  