Issue with TypeScript Warning When Using CVA for Variants in React Components

Describe the bug Unclear warning appears from TypeScript when defining buttonVariants using cva. The warning occurs on the object that is passed as a parameter to the cva function and also on buttonVariants when I pass it to the className prop.

Here is the warning description:

1. Argument type {defaultVariants: {size: string, variant: string}, variants: {size: {default: string, md: string, icon: string, sm: string, lg: string}, variant: {secondary: string, default: string, outline: string, ghost: string, link: string, destructive: string}}} is not assignable to parameter type Config<{size: {default: string, md: string, icon: string, sm: string, lg: string}, variant: {secondary: string, default: string, outline: string, ghost: string, link: string, destructive: string}}> | undefined 2. Argument type {size: boolean, variant: "secondary" | "default" | "outline" | "ghost" | "link" | "destructive" | null | undefined, className: string | undefined} is not assignable to parameter type Props<{size: {default: string, md: string, icon: string, sm: string, lg: string}, variant: {secondary: string, default: string, outline: string, ghost: string, link: string, destructive: string}}> | undefined

This is the component causing the issue:

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }

Screenshots

Additional context

I'm using WebStorm IDE

joe-bell / cva

Issue with TypeScript Warning When Using CVA for Variants in React Components #301