message: better Box examples
diff: import React from 'react'
  -import { Box } from '../../src'
  +import ExampleHeading from '../doc-components/ExampleHeading'
  +import {Block, Box, Text} from '../../src'
  const BoxExample =
  {
  name: 'Box',
  element: (
  - <div>
  - <Box m={2}>This is a box</Box>
  - <Box p={2} m={2}>This is a box with padding.</Box>
  - <Box shadow='small' p={2} m={2}>This is a box with a small shadow.</Box>
  - <Box shadow='medium' p={2} m={2}>This is a box with a medium shadow.</Box>
  - <Box shadow='large' p={2} m={2}>This is a box with a large shadow.</Box>
  - <Box shadow='extra-large' p={2} m={2}>This is a box with an extra-large shadow.</Box>
  - <Box border={[true, 'green']} p={2} m={2}>This is a box with a green border.</Box>
  - </div>
  + <Block p={4}>
  + <Box my={4}>Box</Box>
  + <Box p={2} my={4}>Box with padding</Box>
  +
  + <ExampleHeading>shadows</ExampleHeading>
  + {['small', 'medium', 'large', 'extra-large'].map(shadow => (
  + <Box shadow={shadow} p={2} my={4}>Box with <Text mono>shadow='{shadow}'</Text></Box>
  + ))}
  +
  + <ExampleHeading>borders</ExampleHeading>
  + {['blue', 'red', 'green', 'gray'].map(borderColor => (
  + <Box border={[true, borderColor]} p={2} my={4}>Box with <Text mono>borderColor='{borderColor}'</Text></Box>
  + ))}
  +
  + <ExampleHeading>rounded corners</ExampleHeading>
  + {[0, 1, 2, 3].map(borderRadius => (
  + <Box border round={borderRadius} p={2} my={4}>Box with <Text mono>border borderRadius={`{${borderRadius}}`}</Text></Box>
  + ))}
  + </Block>
  )
  }
  