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

width: 100%;
  margin: 0;
  color: ${getPaletteColor('base')};
  ${props =>
    props.bg
      ? `background-color: ${getPaletteColor(props.bg, 'base')(props)};`
      : ''}

  ${space} ${fontSize} ${fontWeight} ${width};
  ${nowrap}
  ${accessiblyHide}
  ${applyVariations('Label')}
`

Label.propTypes = {
  ...space.propTypes,
  ...fontSize.propTypes,
  color: deprecatedColorValue(),
  ...fontWeight.propTypes,
  ...width.propTypes
}

Label.defaultProps = {
  fontSize: '10px',
  fontWeight: 'bold',
  color: 'border.light'
}

Label.displayName = 'Label'
Label.isLabel = true

export default Label

__html: text,
        }}
      />
    
  );
};

Card.propTypes = {
  border: PropTypes.string,
  p: PropTypes.string,
  to: PropTypes.string,
  icon: PropTypes.node,
  title: PropTypes.string,
  text: PropTypes.string,
  name: PropTypes.string,
  ...space.propTypes,
};

Card.defaultProps = {
  border: '2px solid',
  p: '56px',
};

export default Card;

const Button = styled.button(
  [],
  {
    appearance: 'none',
    fontFamily: 'inherit',
    fontSize: '12px',
    fontWeight: 'bold',
    borderRadius: '4px',
    border: 'none',
  },
  space,
  color
)

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

Button.defaultProps = {
  m: 0,
  px: 2,
  py: 1,
  color: 'white',
  bg: '#333',
}

export default Button

Input.displayName = 'gatsby-ui.Input'
Input.defaultProps = {
  bg: 'transparent',
  borderColor: 'grays.1',
  p: 2,
  fontSize: 2
}
Input.propTypes = {
  as: propTypes.numberOrString,
  bg: propTypes.responsive,
  borderColor: propTypes.responsive,
  color: propTypes.responsive,
  fontSize: propTypes.responsive,
  width: propTypes.responsive,
  ...space.propTypes
}

outline: none;
    border-color: ${themeGet('colors.blue')};
    box-shadow: 0 0 0 1px ${themeGet('colors.blue')};
  }
`
SelectBase.defaultProps = {
  theme,
  fontSize: 1,
  m: 0,
  pl: 12,
  pr: 32,
  py: 14
}

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

const Select = styled(props => (
  
    
    
  
))``

Select.isField = true

export default Select

${space}
  ${width}
  ${maxWidth}
`

Container.displayName = 'gatsby-ui.Container'
Container.defaultProps = {
  maxWidth: 1420,
  m: 'auto',
  px: 3
}
Container.propTypes = {
  as: propTypes.numberOrString,
  maxWidth: propTypes.responsive,
  width: propTypes.responsive,
  ...space.propTypes
}

const Badge = styled.div`
  border-radius: 99999px;
  display: inline-block;
  font-size: ${props => props.theme.fontSizes[0]}px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: ${themeGet('letterSpacings.caps')};
  ${space} ${type} ${color};
  ${applyVariations('Badge')}
`

Badge.displayName = 'Badge'

Badge.propTypes = {
  ...space.propTypes,
  color: deprecatedColorValue(),
  bg: deprecatedPropType('color')
}

Badge.defaultProps = {
  px: 2,
  py: 1
}

export default Badge

theme.space['2.5'] = '12px'
theme.fontSizes.big = 96

const Root = styled.div`
  font-family: system-ui, sans-serif;
  line-height: 1.5;
`

const Box = styled.div`
  ${space}
  ${width}
  ${fontSize}
  ${color}
`
Box.propTypes = {
  ...space.propTypes,
  ...width.propTypes,
  ...fontSize.propTypes,
  ...color.propTypes,
}

const Text = styled.div`
  ${space}
  ${fontSize}
  ${fontWeight}
  ${lineHeight}
  ${color}
`
Text.propTypes = {
  ...space.propTypes,
  ...fontSize.propTypes,
  ...fontWeight.propTypes,

::-ms-clear {
    display: none;
  }

  ${borders} ${space};
  ${applyVariations('Input')}
`

Input.displayName = 'Input'
Input.isField = true
Input.propTypes = {
  id: PropTypes.string.isRequired,
  color: deprecatedColorValue(),
  ...borders.propTypes,
  ...space.propTypes
}

export default Input

Text.displayName = 'gatsby-ui.Text'
Text.defaultProps = {
  m: 0,
  fontSize: 3,
  lineHeight: 'copy'
}
Text.propTypes = {
  as: propTypes.numberOrString,
  bg: propTypes.responsive,
  color: propTypes.responsive,
  fontSize: propTypes.responsive,
  fontWeight: propTypes.responsive,
  lineHeight: propTypes.responsive,
  textAlign: propTypes.responsive,
  ...space.propTypes
}

/** @component */
export const Code = styled(Text)`
  font-family: ${fontFamilies.mono};

  ${borderRadius};
`

Code.displayName = 'gatsby-ui.Code'
Code.defaultProps = {
  as: 'code',
  borderRadius: 4,
  bg: 'grays.1',
  color: 'grays.9',
  px: 2