Responsive values is variant styles override sx styles

Responsive values in variant styles override sx styles.

To Reproduce

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

Expected behavior sx prop styles should always override variant styles.

[rpavlovs]

Yeah, it’s the same issue. Thanks for a better explanation @lachlanjc

[jxnblk]

@lachlanjc if that’s the same thing happening in the issue description, then yeah, that’s a known issue without a clear solution, but I suspect the example above might be pointing to something else??