Использование точек останова

Question

Как можно было добиться styled-systemс themeGet, в styled-components?

styled-system:

const Box = styled.div`
    ${typography};
`;

const Test = () => <Box fontSize={["2xl", "xl", "base"]}>Box</Box>;

Но используя массив в styled-components или же @themeGet не работают:

const Box = styled.div`
  font-size: ${({ theme }) => [theme.fontSizes.sm, theme.fontSizes.xl]};
  font-size: ${themeGet(["fontSizes.2xl", "fontSizes.xl", "fontSizes.base"])}px;
`;

const Test = () => <Box>Box</Box>;

Есть ли способ создать адаптивный компонент на основе точек останова, определенных в теме, без необходимости каждый раз добавлять к нему реквизиты, используя style-system как в первом примере

breakpoints: ['767px', '991px', '1025px', '1300px']