How to use the styled-system.propTypes.space function in styled-system

// deprecated - see https://github.com/jxnblk/styled-system/tree/master/clean-tag
import React from 'react'
import { propTypes } from 'styled-system'

const blacklist = [
  'theme',
  'innerRef',
  ...Object.keys({
    ...propTypes.space,
    ...propTypes.width,
    ...propTypes.fontSize,
    ...propTypes.color,
    ...propTypes.flex,
    ...propTypes.alignItems,
    ...propTypes.justifyContent,
    ...propTypes.flexWrap,
    ...propTypes.flexDirection,
  }),
  'order'
]

const omit = (obj, keys) => {
  const next = {}
  for (let key in obj) {
    if (keys.indexOf(key) > -1) continue

import nano from 'nano-style'
import { fontSize, space, propTypes } from 'styled-system'

const NavLink = nano('a')({
  textDecoration: 'none',
  display: 'inline-block',
  fontWeight: 'bold',
  textTransform: 'uppercase',
  letterSpacing: '0.2em',
  padding: '8px',
  color: 'inherit'
}, fontSize, space)

NavLink.propTypes = {
  ...propTypes.fontSize,
  ...propTypes.space
}

NavLink.defaultProps = {
  f: '10px'
}

export default NavLink

fontSize: '12px',
  fontWeight: 'bold',
  textTransform: 'uppercase',
  letterSpacing: '.2em',
  paddingTop: '12px',
  paddingBottom: '12px',
  paddingLeft: '24px',
  paddingRight: '24px',
  color: 'white',
  backgroundColor: 'black',
  border: 0,
  borderRadius: '8px'
}, space)

Btn.propTypes = {
  ...propTypes.space
}

export default Btn

fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
  lineHeight: '1.5',
  padding: '32px'
}, color)

Root.propTypes = {
  ...propTypes.color
}

const Hello = styled('h1')({
  fontSize: '32px',
  fontWeight: 600,
}, space, width, color)

Hello.propTypes = {
  ...propTypes.space,
  ...propTypes.width,
  ...propTypes.color
}

const dec = s => ({ count: s.count - 1 })
const inc = s => ({ count: s.count + 1 })

const colors = [
  '#f0f',
  '#0ff',
  '#ff0',
  '#f00',
  '#0f0',
  '#00f'
]

width: 16px;
    }
    ${color} ${space} ${width};
    ${props =>
      props.disabled &&
      css`
        cursor: not-allowed;
        opacity: 0.25;
      `}
`

Slider.displayName = 'Input'

Slider.propTypes = {
  ...propTypes.color,
  ...propTypes.space,
  ...propTypes.width
}

Slider.defaultProps = {
  bg: 'smoke',
  color: 'primary',
  theme,
  w: 1
}

export default Slider

import nano from 'nano-style'
import {
  space,
  width,
  fontSize,
  color,
  propTypes
} from 'styled-system'

const Box = nano('div')(space, width, fontSize, color)

Box.propTypes = {
  ...propTypes.space,
  ...propTypes.width,
  ...propTypes.fontSize,
  ...propTypes.color
}

Box.displayName = 'Box'

export default Box

}
    .rc-slider-handle {
      box-shadow: none;
      cursor: default;
    }
  }
`

Slider.defaultProps = {
  allowCross: false,
  color: 'blue',
  theme
}

Slider.propTypes = {
  ...propTypes.space,
  ...propTypes.color
}

export default Slider

background-size: .5rem;
  }

  &[type='textarea'] {
    resize: vertical;
  }

  ${fontSize} ${space} ${width} ${color};
`

Input.displayName = 'Input'

Input.propTypes = {
  id: PropTypes.string,
  ...propTypes.fontSize,
  ...propTypes.space,
  ...propTypes.width,
  ...propTypes.color
}

Input.defaultProps = {
  theme,
  width: 1,
  m: 0,
  py: 1,
  px: 2,
  fontSize: 2,
  color: 'inherit',
  bg: 'transparent'
}

export const InputSelect = Input.withComponent('select')

import nano from 'nano-style'
import { space, propTypes } from 'styled-system'

const BlockLink = nano('a')({
  display: 'block',
  color: 'inherit',
  textDecoration: 'none'
}, space)

BlockLink.propTypes = {
  ...propTypes.space
}

export default BlockLink

Box.displayName = 'Box'
Box.header = Box.withComponent('header')
Box.main = Box.withComponent('main')
Box.article = Box.withComponent('article')
Box.section = Box.withComponent('section')
Box.footer = Box.withComponent('footer')

Box.defaultProps = {
  theme
}

Box.propTypes = {
  ...propTypes.textAlign,
  ...propTypes.fontSize,
  ...propTypes.space,
  ...propTypes.color
}

export default Box