Users need the ability to set responsive `defaultVariants` for components, especially when using component composition. An example of a 'Heading' component using 'Text' variants responsively is provided, along with desired syntax for responsive variants.
**Is your feature request related to a problem? Please describe.** In general, but mostly when I use component composition, I need to set a responsive defaultVariants. In the example below I want to create a "Heading" component that uses some variants of "Text" in a responsive way. **Describe the solution you'd like** I think it is expected that either of these syntaxes will work as described, I prefer the former personally. Premises: - @typoGrow is my semantic media query for typography - displayMd, displayLg are two values of "size" variant of Text component - align and weight are two variants that doesn't need to change responsively ``` // first solution: const Heading = styled(Text, { marginBottom: "$4", ... defaultVariants: { size: { "@initial": "displayMd", "@typoGrow": "displayLg", }, align: "center", weight: "semibold", }, }); // second solution: const Heading = styled(Text, { marginBottom: "$4", ...