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

const innerProps = compactObject(pick(rest, ...INNER_PROPS_KEYS))

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

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

{ display: 'flex' },
  'flexWrap',
  'flexDirection',
  'alignItems',
  'justifyContent'
)

Box.propTypes = {
  ...space.propTypes,
  ...width.propTypes,
  ...fontSize.propTypes,
  ...flex.propTypes,
  ...flexDirection.propTypes,
  ...flexWrap.propTypes,
  ...alignContent.propTypes,
  ...alignItems.propTypes,
  ...color.propTypes
}

export { Box, Flex, boxProps, A }

width
} from 'styled-system'

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

fontSize,
  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'
}

const Flex = styled.div`
  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

order,
  position,
  ratio,
  right,
  space,
  textAlign,
  textTransform,
  top,
  width,
  zIndex,
);
Box.displayName = 'Box';

export const basePropTypes = {
  ...alignContent.propTypes,
  ...alignItems.propTypes,
  ...alignSelf.propTypes,
  ...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,

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

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

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