message: refactor FlexContainer to use system props
diff: import React from 'react'
  import PropTypes from 'prop-types'
  import Block from './Block'
  -import {oneOrMoreOf} from './props'
  -import {common} from './mappers'
  +import {composeWithPropTypes, oneOrMoreOf} from './props'
  +import {flex} from './mappers'
  -const FlexContainer = props => {
  - const {className, children, ...rest} = common(props)
  +export default function FlexContainer(props) {
  + const {children, inline, ...rest} = flex(props)
  + if (!rest.display) {
  + rest.display = inline ? 'inline-flex' : 'flex'
  + }
  return (
  - <Block {...rest} className={className}>
  + <Block {...rest}>
  {children}
  </Block>
  )
  }
  FlexContainer.propTypes = {
  - ...common.propTypes,
  - alignContent: oneOrMoreOf(PropTypes.oneOf(['start', 'end', 'center', 'between', 'around', 'stretch'])),
  - alignItems: oneOrMoreOf(PropTypes.oneOf(['start', 'end', 'center', 'baseline', 'stretch'])),
  + ...flex.propTypes,
  children: PropTypes.node,
  - direction: oneOrMoreOf(PropTypes.oneOf(['row', 'row-reverse', 'column'])),
  - display: oneOrMoreOf(PropTypes.oneOf(['flex', 'inline-flex'])),
  - justifyContent: oneOrMoreOf(PropTypes.oneOf(['start', 'end', 'center', 'between', 'around'])),
  - wrap: oneOrMoreOf(PropTypes.oneOf(['wrap', 'nowrap']))
  -}
  -
  -FlexContainer.defaultProps = {
  - display: 'flex'
  + inline: PropTypes.bool
  }
  -
  -export default FlexContainer
  