Compound Variants seem to apply incorrectly when using Default Variants and Derived Components

[derethil]

Describe the bug
The styles defined in a compound variant in a base component seem to get applied when they should not when I provide default variants and derive a new component.

To Reproduce

Button.tsx

export const Button = classed.button({
 base: "",
 variants: {
   color: {
     primary: "",
     danger: ""
   },
   variant: {
     solid: "",
     ghost: "bg-transparent"
   }
 },
 compoundVariants: [
   {
     color: "primary",
     variant: "solid",
     className: "bg-primary hover:bg-primary-hover"
   },
   {
     color: "danger",
     variant: "solid",
     className: "bg-danger hover:bg-danger-hover"
   }
 ],
 defaultVariants: {
   variant: "solid",
   color: "primary"
 }
});

IconButton.tsx

export const IconButton = classed(Button, "*:fill-current");

Expected behavior
In the above example, any IconButton I render with variant='ghost' also has the styles from the default compound variant where variant='solid' and color='primary' applied. The button correctly has a transparent background, but it also has the primary hover effect, which I would not expect.

Environment? (please complete the following information):

• OS: Linux
• Browser Firefox
• Node.js Version: v21.7.1
• Version 1.7.0