Allow responsive values for `variant`, `size`, and `orientation`

The new modifier versions of the variant and size props don’t accept responsive values (specified as objects or arrays). Responsive values can currently be achieved using useBreakpointValue:

const ResponsivelySizedModal = () => {
  const size = useBreakpointValue({base: 'full', lg: 'xl'})
  return (
    <Modal size={size}>
      {/* ... */}
    </Modal>
  )
}

const ResponsivelySizedModal = () => {
  const size = useBreakpointValue(['full', null, 'xl'])
  return (
    <Modal size={size}>
      {/* ... */}
    </Modal>
  )
}

This functionality should instead become native to these props, like most other props in our system:

const ResponsivelySizedModal = () => (
  <Modal size={{base: 'full', lg: 'xl'}}>
    {/* ... */}
  </Modal>
)

const ResponsivelySizedModal = () => (
  <Modal size={['full', null, 'xl']}>
    {/* ... */}
  </Modal>
)

[segunadebayo]

Thanks for this, Mark.

We can consider this post v1.

[with-heart]

We should also support orientation as part of this effort. See #2686