// theme.ts

variants: {
  buttons: {
    primary: {
      paddingX: ['24px', '32px'],
      paddingY: ['8px', '12px'],
	}
  }
}

// component.styles.ts

// twitter button is a primary button

twitterButton: {
	variant: 'button.primary',
    px: '5px',
    py: '5px'
}
// final style: => {px: '24px', py: '8px'}
// expected: { px: '5px', py: '5px'}

twitterButton: {
	variant: 'button.primary',
    px: ['5px'],
    py: ['5px'],
}
// final style: => {px: '24px', py: '8px'}
// expected: { px: '5px', py: '5px'}

twitterButton: {
	variant: 'button.primary',
    px: ['5px', '5px', '5px'],
    py: ['5px', '5px', '5px'],
}
// final style: => {px: '5px', py: '5px'}
// as expected