Themes that use objects for responsive values aren't working as expected

It seems like rebass/grid Box and Flex components don't correctly work with responsive-defined props and theme values.

I created a sandbox to showcase the issue here: https://codesandbox.io/s/n3po0v67o4

This sandbox compares:

Object defined theme values vs array defined theme values for responsive props

between:

Emotion entry-point
Styled Components entry-point

and a local styled-system version of the Flex component using Emotion.

The sandbox showcases that the array-defined themes work as expected, but the object-defined themes do not except for the styled-system variation.

Simpler example:

const themeA = {
  breakpoints: { small: 0, medium:  '500px', large: '1000px' }
}

const themeB = {
  breakpoints: [ 0, '500px', '1000px' ]
}

// Doesn't work as expected
<Box m={{ small: '10px', medium: '15px', large: '20px' }} theme={themeA}>Test</Box>

// Works as expected
<Box m={[ '10px', '15px', '20px' ]} theme={themeB}>Test</Box>

Looking at the source code for Box and Flex within this project, I am not sure I understand why this would be the case.

rebassjs / grid

Themes that use objects for responsive values aren't working as expected #177