Styled Component type definitions

[zwgnr]

First of all, thank you so much for making this library, great stuff!

Is there currently a way to get Styled Component variant type definitions? Not sure if I am doing something wrong. Take a simple button using the traditional Vanilla Extract Recipe.

const ButtonWithRecipe = recipe({
  base: {
    backgroundColor: 'gainsboro',
    borderRadius: '9999px',
  },
  variants: {
    sm: { padding: '12px' },
    md: { padding: '16px' },
  },
});

//When using the RecipeVariants import the correct type is returned
export type ButtonRecipeVariants = RecipeVariants<typeof ButtonWithRecipe>;

When recreating that same thing as a Styled Component I am having trouble getting the correct type definitions.

const StyledButton = styled('button', {
    base: {
      backgroundColor: 'gainsboro',
      borderRadius: '9999px',
      fontSize: '13px',
      border: '0',
    },
    variants: {
      sm: { padding: '12px' },
      md: { padding: '16px' },
    },
  });

//I am able to get type definitions for the _entire_ component including DOM props with the following, 
export type WithDOMProps = React.ComponentProps<typeof StyledButton>;

//With the provided StyleVariants import the style always returns "type StyledButtonVariants = unknown"
export type StyledButtonVariants = StyleVariants<typeof ButtonWithRecipe>;