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

GridAutoFlowProps,
    GridAutoRowsProps,
    AlignItemsProps,
    JustifyContentProps,
    GridColumnGapProps,
    GridGapProps,
    GridRowGapProps,
    GridTemplateAreasProps,
    GridTemplateColumnsProps,
    SpaceProps,
    GridTemplateRowsProps {
  daySizeGridTemplateColumns?: number | (number | null)[] | undefined
  numberOfMonthsGridTemplateColumns?: number | (number | null)[] | undefined
}

const daySizeGridTemplateColumns = style({
  // React prop name and CSS property
  prop: 'daySizeGridTemplateColumns',
  // CSS property (if different from prop argument)
  cssProperty: 'gridTemplateColumns',
  // key for theme values
  key: 'gridTemplateColumns',
  // accessor function for transforming the value
  transformValue: n => `repeat(7, ${n}px)`,
  // add a fallback scale object or array, if theme is not present
  scale: [0, 4, 8, 16, 32],
})

const composeGridStyles = compose(
  gridAutoColumns,
  gridAutoFlow,
  gridAutoRows,

prop: "pageBreakAfter",
  cssProperty: "pageBreakAfter"
});
const pageBreakBefore = style({
  prop: "pageBreakBefore",
  cssProperty: "pageBreakBefore"
});
const pageBreakInside = style({
  prop: "pageBreakInside",
  cssProperty: "pageBreakInside"
});
const perspective = style({
  prop: "perspective",
  cssProperty: "perspective"
});
const perspectiveOrigin = style({
  prop: "perspectiveOrigin",
  cssProperty: "perspectiveOrigin"
});
const quotes = style({
  prop: "quotes",
  cssProperty: "quotes"
});
const resize = style({
  prop: "resize",
  cssProperty: "resize"
});
const tabSize = style({
  prop: "tabSize",
  cssProperty: "tabSize"
});
const tableLayout = style({

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`

prop: "transformStyle",
  cssProperty: "transformStyle"
});
const transition = style({
  prop: "transition",
  cssProperty: "transition"
});
const transitionDelay = style({
  prop: "transitionDelay",
  cssProperty: "transitionDelay"
});
const transitionDuration = style({
  prop: "transitionDuration",
  cssProperty: "transitionDuration"
});
const transitionProperty = style({
  prop: "transitionProperty",
  cssProperty: "transitionProperty"
});
const transitionTimingFunction = style({
  prop: "transitionTimingFunction",
  cssProperty: "transitionTimingFunction"
});
const unicodeBidi = style({
  prop: "unicodeBidi",
  cssProperty: "unicodeBidi"
});
const visibility = style({
  prop: "visibility",
  cssProperty: "visibility"
});
const whiteSpace = style({

prop: "unicodeBidi",
  cssProperty: "unicodeBidi"
});
const visibility = style({
  prop: "visibility",
  cssProperty: "visibility"
});
const whiteSpace = style({
  prop: "whiteSpace",
  cssProperty: "whiteSpace"
});
const wordBreak = style({
  prop: "wordBreak",
  cssProperty: "wordBreak"
});
const wordSpacing = style({
  prop: "wordSpacing",
  cssProperty: "wordSpacing"
});
const wordWrap = style({
  prop: "wordWrap",
  cssProperty: "wordWrap"
});

const hoverState = variant({
  prop: "hover",
  key: "hover"
});
const debugState = variant({
  prop: "debug",
  key: "debug"
});

space,
  SpaceProps,
  style,
  textAlign,
  TextAlignProps,
  top,
  TopProps,
  width,
  zIndex,
  ZIndexProps,
} from 'styled-system'

import { neutralMargins, overflowScrolling } from 'v2/styles/mixins'

const flexGrow = style({ prop: 'flexGrow' })
const flexShrink = style({ prop: 'flexShrink' })

export const mixin = css`
  box-sizing: border-box;
  ${display}
  ${position}
  ${width}
  ${height}
  ${minHeight}
  ${maxHeight}
  ${minWidth}
  ${maxWidth}
  ${space}
  ${flex}
  ${flexGrow}
  ${flexShrink}
  ${alignItems}

cssProperty: "columnGap"
});
const columnRule = style({
  prop: "columnRule",
  cssProperty: "columnRule"
});
const columnRuleColor = style({
  prop: "columnRuleColor",
  cssProperty: "columnRuleColor",
  key: "colors"
});
const columnRuleStyle = style({
  prop: "columnRuleStyle",
  cssProperty: "columnRuleStyle"
});
const columnRuleWidth = style({
  prop: "columnRuleWidth",
  cssProperty: "columnRuleWidth"
});
const columnSpan = style({
  prop: "columnSpan",
  cssProperty: "columnSpan"
});
const columnWidth = style({
  prop: "columnWidth",
  cssProperty: "columnWidth"
});
const columns = style({
  prop: "columns",
  cssProperty: "columns"
});
const content = style({

color,
  space,
  width,
  fontSize,
  fontWeight,
  textAlign,
  responsiveStyle,
  style
} from 'styled-system'

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

const textTransform = style({
  prop: 'textTransform',
  cssProperty: 'textTransform'
})

export const Text = styled.span`
  ${color}
  ${space}
  ${width}
  ${fontSize}
  ${fontWeight}
  ${textAlign}
  ${display}
  ${textTransform}
`
Text.defaultProps = {
  fontSize: 2,

cssProperty: "textOverflow"
});
const textShadow = style({
  prop: "textShadow",
  cssProperty: "textShadow",
  key: "shadows"
});
const textTransform = style({
  prop: "textTransform",
  cssProperty: "textTransform"
});
const transform = style({
  prop: "transform",
  cssProperty: "transform"
});
const transformOrigin = style({
  prop: "transformOrigin",
  cssProperty: "transformOrigin"
});
const transformStyle = style({
  prop: "transformStyle",
  cssProperty: "transformStyle"
});
const transition = style({
  prop: "transition",
  cssProperty: "transition"
});
const transitionDelay = style({
  prop: "transitionDelay",
  cssProperty: "transitionDelay"
});
const transitionDuration = style({

prop: "visibility",
  cssProperty: "visibility"
});
const whiteSpace = style({
  prop: "whiteSpace",
  cssProperty: "whiteSpace"
});
const wordBreak = style({
  prop: "wordBreak",
  cssProperty: "wordBreak"
});
const wordSpacing = style({
  prop: "wordSpacing",
  cssProperty: "wordSpacing"
});
const wordWrap = style({
  prop: "wordWrap",
  cssProperty: "wordWrap"
});

const hoverState = variant({
  prop: "hover",
  key: "hover"
});
const debugState = variant({
  prop: "debug",
  key: "debug"
});

const Div = styled("div")(
  alignContent,
  alignItems,