import { BoxTop, Box } from '@sure-thing/box'

const theme = {
  color: {
    b: 'blue'
  }
}

const H1 = Box
H1.defaultProps = { as: 'h1' }
;<BoxTop theme={theme}>
  <Box as='ul' f aic>
    <Box as='li' w={[1, 1 / 2]}>
      <H1 c='b'>Hello world!</H1>
    </Box>
    <Box as='li' w={[1, 1 / 2]}>
      <Box as='button' c='b' css={theme => `&:hover { color: tomato; }`}>
        Click Me
      </Box>
    </Box>
  </Box>
</BoxTop>