Generic component with dynamic value prop support - Feedback

[bbg]

Hello Everyone,

I love Stitches and using them. It provides incredible DX.

I have a library where all CSS properties that I have made before and that I have been using in many projects are defined as variants. I'm pretty happy, but my only problem is that I don't send dynamic values. This is because there is no dynamic value support for Stitches variants.

Now I need a generic component, but while doing it For example: <Box p={{ initial: '10px', hover: '20px', focus: '10px' }} /> I want to send pseudo classes inside an object.

I made an example that I shared the link below. But how can I do this better? I want to get your suggestions.

All my aim is to send values like 10px or $20 over props or to be able to send Pseudo-classes such as "initial, hover, focus, disable, sm, md, lg, xl, xxl" and Media values as objects.

Please share your suggestions or examples of advice with me.

<Component
  bgColor={{
    initial: "red",
    hover: "blue"
  }}
  p="10px"
  m="$sm"
>
  Hello CodeSandboxx
</Component>

Codesanbox: https://codesandbox.io/s/stitches-dynamic-value-6gp5q3