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

${position};
  ${zIndex};
  ${top};
  ${right};
  ${bottom};
  ${left};
  ${textStyle};
  ${colorStyle};
  ${buttonStyle};
`;

const Box = props => ;

Box.propTypes = {
  ...space.propTypes,
  ...width.propTypes,
  ...fontSize.propTypes,
  ...color.propTypes,
  ...fontFamily.propTypes,
  ...textAlign.propTypes,
  ...lineHeight.propTypes,
  ...fontWeight.propTypes,
  ...fontStyle.propTypes,
  ...letterSpacing.propTypes,
  ...display.propTypes,
  ...maxWidth.propTypes,
  ...minWidth.propTypes,
  ...height.propTypes,
  ...maxHeight.propTypes,
  ...minHeight.propTypes,
  ...verticalAlign.propTypes,
  ...alignItems.propTypes,

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,
  ...lineHeight.propTypes,

${space}
  ${width}
  ${color}
  ${flex}
  ${flexDirection}
  ${alignItems}
  ${alignSelf}
  ${justifyContent}
  ${justifySelf}
  ${flexWrap}
  display:flex;
`
Box.propTypes = {
  ...borderRadius.propTypes,
  ...space.propTypes,
  ...width.propTypes,
  ...color.propTypes,
  ...flex.propTypes,
  ...flexDirection.propTypes,
  ...alignItems.propTypes,
  ...alignSelf.propTypes,
  ...justifyContent.propTypes,
  ...justifySelf.propTypes,
  ...flexWrap.propTypes
}

}

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,
  ...lineHeight.propTypes,

border-bottom-width: 1px;
  ${space} ${width} ${borderColor};
`

Divider.displayName = 'Divider'

Divider.defaultProps = {
  borderColor: 'borderGray',
  theme: theme,
  ml: 0,
  mr: 0
}

Divider.propTypes = {
  ...space.propTypes,
  ...width.propTypes,
  ...borderColor.propTypes
}

export default Divider

const Flex = mapProps(({ wrap, align, justify, ...props }) => ({
  flexWrap: wrap ? 'wrap' : undefined,
  alignItems: align,
  justifyContent: justify,
  ...props
}))(styled(Box)`
  display: flex;
  ${alignItems} ${justifyContent}
  ${flexDirection}
  ${flexWrap}
  ${applyVariations('Flex')}
`)

Flex.propTypes = {
  ...space.propTypes,
  ...width.propTypes,
  color: deprecatedColorValue(),
  bg: deprecatedPropType('color'),
  ...alignItems.propTypes,
  ...justifyContent.propTypes,
  ...flexWrap.propTypes,
  ...flexDirection.propTypes,
  wrap: deprecatedPropType('flexWrap'),
  align: deprecatedPropType('alignItems'),
  justify: deprecatedPropType('justifyContent')
}

Flex.displayName = 'Flex'

export default Flex

as="span"
      style={{ userSelect: 'none' }}
      {...rest}
    />
  );
};

Link.propTypes = {
  to: PropTypes.string,
  href: PropTypes.string,
  underline: PropTypes.number,
  color: PropTypes.string,
  ...space.propTypes,
  ...color.propTypes,
  ...display.propTypes,
  ...width.propTypes,
  ...height.propTypes,
  ...borders.propTypes,
};
Link.defaultProps = {
  underline: 0,
  color: 'inherit',
};

export default Link;

border-radius: ${props => props.theme.radius};
  border-width: 0;
  border-style: solid;
  ${width} ${size} ${space};
  ${applyVariations('Button', variations)}

  &:disabled {
    cursor: not-allowed;
    color: ${getPaletteColor('text.light')};
    background-color: ${getPaletteColor('background.base')};
  }
`)

Button.propTypes = {
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  ...width.propTypes,
  ...space.propTypes,
  fullWidth: deprecatedPropType('width'),
  variation: PropTypes.oneOf(Object.keys(variations)),
  color: deprecatedColorValue(),
  disabled: PropTypes.bool
}

Button.defaultProps = {
  color: 'primary',
  variation: 'fill'
}

Button.displayName = 'Button'

export default Button

color,
  deprecatedColorValue,
  deprecatedPropType
} from './utils'

const Box = styled.div`
  ${space} ${width} ${textAlign}
  ${color}
  ${applyVariations('Box')}
`

Box.displayName = 'Box'

Box.propTypes = {
  ...space.propTypes,
  ...width.propTypes,
  color: deprecatedColorValue(),
  bg: deprecatedPropType('color'),
  ...textAlign.propTypes
}

export default Box

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