Stack responsive direction doesn't respect responsive gap props

[ankibalyan]

if I give a responsive stack like below. It doesn't give the horizontal gap in tab & desktop views

<Stack direction={['vertical', 'horizontal', 'horizontal']} gap={[3, 5, 7]}>
  <Text>Item 1 A</Text>
  <Stack direction="vertical" gap="4">
    <Text>Item 2 A</Text>
    <Text>Item 2 B</Text>
    <Text>Item 2 C</Text>
  </Stack>
  <Stack direction={['vertical', 'horizontal', 'horizontal']} gap={[3, 8, 10]}>
    <Text>Item 3 A</Text>
    <Text>Item 3 B</Text>
    <Text>Item 3 C</Text>
    <Text>Item 3 D</Text>
  </Stack>
</Stack>;

[ankibalyan]

Or may be this shouldn't be allowed to have both the props as responsive array.

[ankibalyan]

I tried to add following over [here] (

react-ui/packages/react-ui/src/primitives/interpolate.js

Line 26 in 199532b

const responsiveValues = values.map(v => get(key, v, theme, label))

)

  const responsiveValues = values.map(v => {
    if (typeof v === 'object') {
      return interpolate(v, theme);
    }

    return get(key, v, theme, label);
  });
  const responsiveStyles = mq({ [key]: responsiveValues })[0];

But this seems to work only if we give all the values breakpoint, it breaks if I give value only for 2 (mobile & tablet).

[siddharthkp]

Hey! This part is tricky, I'm going to revisit it after finishing a few other tasks. There is some hacky code that is going to come back to bite me like this one