() => {
  const BoxComponent = ({ className, children }) => (
    <div className={className}>{children}</div>
  )
  const Box = withStyledSystem(
    BoxComponent,
    // Add more styled system props here
    [styledSystem.color, styledSystem.space, styledSystem.border]
  )
  // Custom Styled System theme
  const theme = {
    colors: {
      gray: ['#fafafa', '#efefef', '#666']
    }
  }
  return (
    <ThemeProvider theme={theme}>
      <Box
        color="gray.2"
        p={10}
        m={2}
        borderRadius={8}
      >
        With custom theme specification
      </Box>
      <Box
        color="#fff"
        bg={['#900', '#900fff', '#666']}
        p={10}
        m={2}
        borderRadius={8}
      >
        With responsive props
      </Box>
    </ThemeProvider>
  )
}