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

// While the input can still have configurable margins
  const outerProps = omit(rest, ...INNER_PROPS_KEYS)

  return (
    
      {children}
    
  )
}

BorderedBox.propTypes = {
  children: PropTypes.node.isRequired,
  ...space.propTypes,
  ...alignItems.propTypes,
  ...justifyContent.propTypes,
}

BorderedBox.defaultProps = {
  ...INNER_PROPS_KEYS.reduce((memo, key) => ({ ...memo, [key]: null }), {}),
}

export default BorderedBox

const outerProps = omit(rest, ...INNER_PROPS_KEYS);

  return (
    
      
        {children}
      
    
  );
};

BorderedBox.propTypes = {
  children: PropTypes.node.isRequired,
  ...space.propTypes,
  ...alignItems.propTypes,
  ...justifyContent.propTypes,
};

BorderedBox.defaultProps = {
  ...INNER_PROPS_KEYS.reduce((memo, key) => (
    { ...memo, [key]: null }
  ), {}),
};

export default BorderedBox;

color
)

Box.propTypes = {
  ...color.propTypes
}

export const Flex = styled(Box)(
  { display: 'flex' },
  alignItems,
  justifyContent
)

Flex.propTypes = {
  ...alignItems.propTypes,
  ...justifyContent.propTypes,
}

export const ContainerInner = styled(Box)({
  maxWidth: 768
})

export const Container = props =>
  
    
  

Container.defaultProps = {
  mx: 'auto'
}

export const Text = styled.div(

${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
}

...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,
  ...justifyContent.propTypes,
  ...flexWrap.propTypes,
  ...flexDirection.propTypes,
  ...flex.propTypes,
  ...alignContent.propTypes,
  ...justifyItems.propTypes,
  ...justifySelf.propTypes,
  ...alignSelf.propTypes,
  ...order.propTypes,
  ...flexBasis.propTypes,
  ...gridGap.propTypes,
  ...gridRowGap.propTypes,
  ...gridColumnGap.propTypes,
  ...gridColumn.propTypes,
  ...gridRow.propTypes,
  ...gridArea.propTypes,
  ...gridAutoFlow.propTypes,

const Flex = styled(tag.div)(
  [{ display: 'flex' }],
  alignItems,
  flexWrap,
  flexDirection,
  justifyContent,
  space,
  width,
)

Flex.displayName = 'Flex'
Flex.propTypes = {
  ...alignItems.propTypes,
  ...flexWrap.propTypes,
  ...flexDirection.propTypes,
  ...justifyContent.propTypes,
  ...space.propTypes,
  ...width.propTypes
}

export default Flex

display: flex;
  ${space} ${width} ${color} ${alignItems} ${justifyContent}
  ${flexDirection}
  ${flexWrap}
`

Flex.defaultProps = {
  theme
}

Flex.propTypes = {
  ...space.propTypes,
  ...width.propTypes,
  ...color.propTypes,
  ...alignItems.propTypes,
  ...justifyContent.propTypes,
  ...flexWrap.propTypes,
  ...flexDirection.propTypes
}

Flex.displayName = 'Flex'

export default Flex

${justifyContent}
  ${flexWrap}
  ${flexBasis}
  ${flexDirection}
  ${flex}
  ${justifySelf}
  ${alignSelf}
  ${order}
`;

Flex.propTypes = {
  ...width.propTypes,
  ...height.propTypes,
  ...alignItems.propTypes,
  ...alignContent.propTypes,
  ...justifyContent.propTypes,
  ...flexWrap.propTypes,
  ...flexBasis.propTypes,
  ...flexDirection.propTypes,
  ...flex.propTypes,
  ...justifySelf.propTypes,
  ...alignSelf.propTypes,
  ...order.propTypes
};

const Text = styled('div')`
  ${space}
  ${fontSize}
  ${fontWeight}
  ${lineHeight}
  ${fontStyle}
  ${textAlign}

...backgroundImage.propTypes,
  ...borders.propTypes,
  ...borderRadius.propTypes,
  ...bottom.propTypes,
  ...color.propTypes,
  ...display.propTypes,
  ...flex.propTypes,
  ...flexBasis.propTypes,
  ...flexDirection.propTypes,
  ...flexWrap.propTypes,
  ...fontFamily.propTypes,
  ...fontSize.propTypes,
  ...fontStyle.propTypes,
  ...fontWeight.propTypes,
  ...height.propTypes,
  ...justifyContent.propTypes,
  ...left.propTypes,
  ...lineHeight.propTypes,
  ...maxHeight.propTypes,
  ...maxWidth.propTypes,
  ...minHeight.propTypes,
  ...minWidth.propTypes,
  ...order.propTypes,
  ...position.propTypes,
  ...right.propTypes,
  ...ratio.propTypes,
  ...space.propTypes,
  ...textAlign.propTypes,
  textTransform: PropTypes.string,
  ...top.propTypes,
  ...width.propTypes,
  ...zIndex.propTypes,

...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