How to add a variant to Alert component and keep correct TypeScript?

[Seigiard]

I've tried a code below and it works (I have Alert with different colors), but I still have TypeScript error.

How to get rid of TS error?

export default defineConfig({
  theme: {
    extend: {
      slotRecipes: {
        alert: {
          defaultVariants: { variant: 'info' },
            variants: {
              variant: {
                info: { /*slots' overrides here */ },
                warning: { /*slots' overrides here */ },
                error: { /*slots' overrides here */ }
               }
            }
          }
        }
      }
    }
  }
})

[Seigiard]

Okay, I've found it our with help of card component.

Need to update Root types in alert.tsx from

import { alert } from 'styled-system/recipes'
export const Root = withProvider<
  HTMLDivElement,
  Assign<HTMLStyledProps<'div'>, PolymorphicProps>
>(ark.div, 'root')

to

import { type AlertVariantProps, alert } from 'styled-system/recipes'
export const Root = withProvider<
  HTMLDivElement,
  Assign<Assign<HTMLStyledProps<'div'>, PolymorphicProps>, AlertVariantProps> // <- !!!!
>(ark.div, 'root')

Pay attention to added AlertVariantProps — it does all work.