The Design
Compiler

export default function App({ active }) {
  return (
    <Stack>
      <Text color={[[active, "brand"]]}>Heading</Text>
      <Spacer
        size={[
          ["default", 8],
          ["breakpoints.medium", 16]
        ]}
      />
      <Stack
        axis={[
          ["breakpoints.medium", "x"]
        ]}
        background="brand"
      >
        <Text color="white">Content</Text>
      </Stack>
    </Stack>
  );
}