How to use the styled-system.responsiveStyle function in styled-system

// @flow
import {style, responsiveStyle} from 'styled-system'
// import PropTypes from 'prop-types'

export const gridArea = style({
  prop: 'area',
  cssProperty: 'grid-area',
})

export const gridRowGap = responsiveStyle({
  prop: 'rowGap',
  cssProperty: 'grid-row-gap',
})

export const justifySelf = responsiveStyle({
  prop: 'justifySelf',
})

export const fontStyle = responsiveStyle({
  prop: 'fontStyle',
})

// export const numberOrString = PropTypes.oneOfType([PropTypes.number, PropTypes.string])

export const text = [
  'color',

import styled from 'styled-components'
import PropTypes from 'prop-types'
import Box from './Box'
import { responsiveStyle, style } from 'styled-system'

const top = responsiveStyle({
  prop: 'top',
  cssProperty: 'top',
  numberToPx: true
})

const bottom = responsiveStyle({
  prop: 'bottom',
  cssProperty: 'bottom',
  numberToPx: true
})

const left = responsiveStyle({
  prop: 'left',
  cssProperty: 'left',
  numberToPx: true
})

const right = responsiveStyle({
  prop: 'right',
  cssProperty: 'right',
  numberToPx: true
})

export const justify = props => responsiveStyle('justify-content', 'justify')
export const column = props => props.column ? `flex-direction:column;` : null

import { style, responsiveStyle, space, width, fontSize, color, fontWeight, textAlign, borderColor, borderWidth, borderRadius, boxShadow, hover, focus, active, disabled } from 'styled-system'
import { Flex as _Flex, Box as _Box } from 'grid-styled'

export const height = responsiveStyle({ prop:'height',cssProperty:'height' })
export const h = responsiveStyle({ prop:'h',cssProperty:'height' })
export const maxWidth = responsiveStyle({ prop: 'maxWidth', cssProperty: 'maxWidth' })
export const mw = responsiveStyle({ prop: 'mw', cssProperty: 'maxWidth' })
export const fontStyle = style({ prop: 'fontStyle', cssProperty: 'fontStyle' })
export const borderStyle = style({ prop: 'borderStyle', cssProperty: 'borderStyle' })
export const overflow = responsiveStyle({ prop: 'overflow', cssProperty: 'overflow' })
export const position = responsiveStyle({ prop: 'position', cssProperty: 'position' })
export const display = responsiveStyle({ prop: 'display', cssProperty: 'display' })
export const float = responsiveStyle({ prop: 'float', cssProperty: 'float' })
export const opacity = responsiveStyle({ prop: 'opacity', cssProperty: 'opacity' })
export const top = responsiveStyle({ prop: 'top', cssProperty: 'top' })
export const right = responsiveStyle({ prop: 'right', cssProperty: 'right' })
export const bottom = responsiveStyle({ prop: 'bottom', cssProperty: 'bottom' })
export const left = responsiveStyle({ prop: 'left', cssProperty: 'left' })
export const backgroundImage = responsiveStyle({ prop: 'backgroundImage', cssProperty: 'backgroundImage' })

export const wrapperStyles = css` ${space} ${width} ${h} ${height} ${mw} ${maxWidth} ${fontStyle} ${fontSize} ${textAlign} ${color} ${boxShadow} ${borderColor} ${borderWidth} ${borderRadius} ${borderStyle} ${overflow} ${position} ${top} ${right} ${bottom} ${left} ${display} ${float} ${opacity} ${backgroundImage} `
export const textStyles = css` ${space} ${width} ${h} ${height} ${mw} ${maxWidth} ${fontWeight} ${fontStyle} ${fontSize} ${textAlign} ${color} ${boxShadow} ${borderColor} ${borderWidth} ${position} ${top} ${right} ${bottom} ${left} ${display} ${float} ${opacity} `
export const textStylesPseudo = css` ${textStyles} ${hover} ${focus} ${active} ${disabled} `
export const buttonStyles = css`
  display: inline-flex;
  text-decoration: none;
  margin: 0;
  padding: 8px 16px;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-size:16px;

import styled from 'styled-components'
import { css } from 'styled-components'
import { style, responsiveStyle, space, width, fontSize, color, fontWeight, textAlign, borderColor, borderWidth, borderRadius, boxShadow, hover, focus, active, disabled } from 'styled-system'
import { Flex as _Flex, Box as _Box } from 'grid-styled'

export const height = responsiveStyle({ prop:'height',cssProperty:'height' })
export const h = responsiveStyle({ prop:'h',cssProperty:'height' })
export const maxWidth = responsiveStyle({ prop: 'maxWidth', cssProperty: 'maxWidth' })
export const mw = responsiveStyle({ prop: 'mw', cssProperty: 'maxWidth' })
export const fontStyle = style({ prop: 'fontStyle', cssProperty: 'fontStyle' })
export const borderStyle = style({ prop: 'borderStyle', cssProperty: 'borderStyle' })
export const overflow = responsiveStyle({ prop: 'overflow', cssProperty: 'overflow' })
export const position = responsiveStyle({ prop: 'position', cssProperty: 'position' })
export const display = responsiveStyle({ prop: 'display', cssProperty: 'display' })
export const float = responsiveStyle({ prop: 'float', cssProperty: 'float' })
export const opacity = responsiveStyle({ prop: 'opacity', cssProperty: 'opacity' })
export const top = responsiveStyle({ prop: 'top', cssProperty: 'top' })
export const right = responsiveStyle({ prop: 'right', cssProperty: 'right' })
export const bottom = responsiveStyle({ prop: 'bottom', cssProperty: 'bottom' })
export const left = responsiveStyle({ prop: 'left', cssProperty: 'left' })
export const backgroundImage = responsiveStyle({ prop: 'backgroundImage', cssProperty: 'backgroundImage' })

export const wrapperStyles = css` ${space} ${width} ${h} ${height} ${mw} ${maxWidth} ${fontStyle} ${fontSize} ${textAlign} ${color} ${boxShadow} ${borderColor} ${borderWidth} ${borderRadius} ${borderStyle} ${overflow} ${position} ${top} ${right} ${bottom} ${left} ${display} ${float} ${opacity} ${backgroundImage} `
export const textStyles = css` ${space} ${width} ${h} ${height} ${mw} ${maxWidth} ${fontWeight} ${fontStyle} ${fontSize} ${textAlign} ${color} ${boxShadow} ${borderColor} ${borderWidth} ${position} ${top} ${right} ${bottom} ${left} ${display} ${float} ${opacity} `
export const textStylesPseudo = css` ${textStyles} ${hover} ${focus} ${active} ${disabled} `
export const buttonStyles = css`
  display: inline-flex;
  text-decoration: none;
  margin: 0;
  padding: 8px 16px;
  color: white;

import styled from 'styled-components'
import {
  color,
  space,
  width,
  fontSize,
  fontWeight,
  textAlign,
  boxShadow,
  borderRadius,
  responsiveStyle
} from 'styled-system'

const display = responsiveStyle({
  prop: 'display',
  cssProperty: 'display'
})

const verticalAlign = responsiveStyle({
  prop: 'verticalAlign',
  cssProperty: 'verticalAlign'
})

export const Box = styled.div`
  ${color}
  ${space}
  ${width}
  ${fontSize}
  ${fontWeight}
  ${textAlign}

import { css } from 'styled-components'
import { style, responsiveStyle, space, width, fontSize, color, fontWeight, textAlign, borderColor, borderWidth, borderRadius, boxShadow, hover, focus, active, disabled } from 'styled-system'
import { Flex as _Flex, Box as _Box } from 'grid-styled'

export const height = responsiveStyle({ prop:'height',cssProperty:'height' })
export const h = responsiveStyle({ prop:'h',cssProperty:'height' })
export const maxWidth = responsiveStyle({ prop: 'maxWidth', cssProperty: 'maxWidth' })
export const mw = responsiveStyle({ prop: 'mw', cssProperty: 'maxWidth' })
export const fontStyle = style({ prop: 'fontStyle', cssProperty: 'fontStyle' })
export const borderStyle = style({ prop: 'borderStyle', cssProperty: 'borderStyle' })
export const overflow = responsiveStyle({ prop: 'overflow', cssProperty: 'overflow' })
export const position = responsiveStyle({ prop: 'position', cssProperty: 'position' })
export const display = responsiveStyle({ prop: 'display', cssProperty: 'display' })
export const float = responsiveStyle({ prop: 'float', cssProperty: 'float' })
export const opacity = responsiveStyle({ prop: 'opacity', cssProperty: 'opacity' })
export const top = responsiveStyle({ prop: 'top', cssProperty: 'top' })
export const right = responsiveStyle({ prop: 'right', cssProperty: 'right' })
export const bottom = responsiveStyle({ prop: 'bottom', cssProperty: 'bottom' })
export const left = responsiveStyle({ prop: 'left', cssProperty: 'left' })
export const backgroundImage = responsiveStyle({ prop: 'backgroundImage', cssProperty: 'backgroundImage' })

export const wrapperStyles = css` ${space} ${width} ${h} ${height} ${mw} ${maxWidth} ${fontStyle} ${fontSize} ${textAlign} ${color} ${boxShadow} ${borderColor} ${borderWidth} ${borderRadius} ${borderStyle} ${overflow} ${position} ${top} ${right} ${bottom} ${left} ${display} ${float} ${opacity} ${backgroundImage} `
export const textStyles = css` ${space} ${width} ${h} ${height} ${mw} ${maxWidth} ${fontWeight} ${fontStyle} ${fontSize} ${textAlign} ${color} ${boxShadow} ${borderColor} ${borderWidth} ${position} ${top} ${right} ${bottom} ${left} ${display} ${float} ${opacity} `
export const textStylesPseudo = css` ${textStyles} ${hover} ${focus} ${active} ${disabled} `
export const buttonStyles = css`
  display: inline-flex;
  text-decoration: none;
  margin: 0;
  padding: 8px 16px;
  color: white;
  border-radius: 6px;
  cursor: pointer;

import styled from 'styled-components'
import { css } from 'styled-components'
import { style, responsiveStyle, space, width, fontSize, color, fontWeight, textAlign, borderColor, borderWidth, borderRadius, boxShadow, hover, focus, active, disabled } from 'styled-system'
import { Flex as _Flex, Box as _Box } from 'grid-styled'

export const height = responsiveStyle({ prop:'height',cssProperty:'height' })
export const h = responsiveStyle({ prop:'h',cssProperty:'height' })
export const maxWidth = responsiveStyle({ prop: 'maxWidth', cssProperty: 'maxWidth' })
export const mw = responsiveStyle({ prop: 'mw', cssProperty: 'maxWidth' })
export const fontStyle = style({ prop: 'fontStyle', cssProperty: 'fontStyle' })
export const borderStyle = style({ prop: 'borderStyle', cssProperty: 'borderStyle' })
export const overflow = responsiveStyle({ prop: 'overflow', cssProperty: 'overflow' })
export const position = responsiveStyle({ prop: 'position', cssProperty: 'position' })
export const display = responsiveStyle({ prop: 'display', cssProperty: 'display' })
export const float = responsiveStyle({ prop: 'float', cssProperty: 'float' })
export const opacity = responsiveStyle({ prop: 'opacity', cssProperty: 'opacity' })
export const top = responsiveStyle({ prop: 'top', cssProperty: 'top' })
export const right = responsiveStyle({ prop: 'right', cssProperty: 'right' })
export const bottom = responsiveStyle({ prop: 'bottom', cssProperty: 'bottom' })
export const left = responsiveStyle({ prop: 'left', cssProperty: 'left' })
export const backgroundImage = responsiveStyle({ prop: 'backgroundImage', cssProperty: 'backgroundImage' })

export const wrapperStyles = css` ${space} ${width} ${h} ${height} ${mw} ${maxWidth} ${fontStyle} ${fontSize} ${textAlign} ${color} ${boxShadow} ${borderColor} ${borderWidth} ${borderRadius} ${borderStyle} ${overflow} ${position} ${top} ${right} ${bottom} ${left} ${display} ${float} ${opacity} ${backgroundImage} `
export const textStyles = css` ${space} ${width} ${h} ${height} ${mw} ${maxWidth} ${fontWeight} ${fontStyle} ${fontSize} ${textAlign} ${color} ${boxShadow} ${borderColor} ${borderWidth} ${position} ${top} ${right} ${bottom} ${left} ${display} ${float} ${opacity} `

import { gradient, maxWidth as maxWidthKeys, maxWidths } from 'theme'
import { responsiveStyle } from 'styled-system'

export const maxWidth = responsiveStyle({
  prop: 'maxWidth',
  cssProperty: 'maxWidth',
  getter: n => maxWidthKeys[n] || maxWidths[n] || n
})

export const height = responsiveStyle({
  prop: 'height',
  cssProperty: 'height',
  numberToPx: true
})

export const lineHeight = responsiveStyle({
  prop: 'lineHeight',
  cssProperty: 'lineHeight',
  key: 'lineHeights'
})

export const bgGradient = `
  background-image: ${gradient};
`

export const textGradient = `

import React from 'react'
import styled from 'styled-components'
import { responsiveStyle } from 'styled-system'
import { oneOfType, number, string, array, bool } from 'prop-types'
import propTypes from './propTypes'
import Box from './Box'

const wrap = responsiveStyle('flex-wrap', 'wrap', 'wrap')
const direction = responsiveStyle('flex-direction', 'direction')
const align = responsiveStyle('align-items', 'align')
const justify = responsiveStyle('justify-content', 'justify')
const column = props => props.column ? `flex-direction:column;` : null

const Flex = styled(Box)([],
  { display: 'flex' },
  wrap,
  column,
  direction,
  align,
  justify,
)
Flex.displayName = 'Flex'

const responsivePropType = oneOfType([
  number,