message: rewrite Block for legibility
diff: import React from 'react'
  import PropTypes from 'prop-types'
  -import chameleon from './chameleon'
  -import map, {classifier, expander, oneOrMoreOf, stylizer, valueMapper} from './props'
  -
  -const classifyBlockProps = classifier({
  - bg: value => `bg-${value}`,
  - border: expander(valueMapper({
  - true: 'border',
  - false: 'border-0'
  - }, null, value => `border-${value}`)),
  - fg: value => `text-${value}`,
  - position: value => `position-${value}`,
  - round: value => `rounded-${value}`,
  - shadow: valueMapper({
  - true: 'box-shadow'
  - }, null, value => `box-shadow-${value}`)
  -})
  +import classnames from 'classnames'
  +import map, {oneOrMoreOf, stylizer} from './props'
  const styleProps = [
  'width', 'minWidth', 'maxWidth',
  @@ -24,15 +10,65 @@ const styleProps = [
  const stylize = stylizer(styleProps)
  -const mapBlockProps = props => classifyBlockProps(map(stylize(props)))
  +const exclusiveBorderValues = new Set([
  + 'top',
  + 'right',
  + 'bottom',
  + 'left',
  + 0
  +])
  -const Block = chameleon('div', mapBlockProps)
  +function unique(values) {
  + return values.filter((v, i) => values.indexOf(v) === i)
  +}
  +
  +function getBorderClass(value) {
  + if (Array.isArray(value)) {
  + return unique(value.map(getBorderClass))
  + } else if (typeof value === 'boolean') {
  + return value ? 'border' : 'border-0'
  + } else if (value) {
  + return `border-${value}`
  + }
  +}
  +
  +const Block = props => {
  + const {
  + tag: Tag = 'div',
  + children,
  + className,
  + bg,
  + border,
  + fg,
  + position,
  + round,
  + shadow,
  + ...rest
  + } = map(props)
  +
  + const {style} = stylize(rest)
  +
  + return (
  + <Tag className={classnames(
  + className,
  + getBorderClass(border),
  + bg && `bg-${bg}`,
  + fg && `text-${fg}`,
  + position && `position-${position}`,
  + (typeof round === 'number') && `rounded-${round}`,
  + shadow && ((shadow === true) ? 'box-shadow' : `box-shadow-${shadow}`)
  + )} style={style}>
  + {children}
  + </Tag>
  + )
  +}
  Block.propTypes = {
  bg: PropTypes.string,
  border: oneOrMoreOf(PropTypes.oneOfType([
  PropTypes.string,
  - PropTypes.bool
  + PropTypes.bool,
  + PropTypes.number
  ])),
  fg: PropTypes.string,
  position: PropTypes.oneOf(['absolute', 'fixed', 'relative']),
  