Badge

const BadgeAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-Badge__root",
        "inline-flex flex-none text-base w-fit overflow-hidden justify-center items-center gap-2",
    ], {
        variants: {
            intent: {
                "gray": "text-gray-800 bg-gray-100 border border-gray-500 border-opacity-40 dark:text-gray-300 dark:bg-opacity-10",
                "primary": "text-brand-500 bg-brand-50 border border-brand-500 border-opacity-40 dark:text-brand-300 dark:bg-opacity-10",
                "success": "text-green-500 bg-green-50 border border-green-500 border-opacity-40 dark:text-green-300 dark:bg-opacity-10",
                "warning": "text-orange-500 bg-orange-50 border border-orange-500 border-opacity-40 dark:text-orange-300 dark:bg-opacity-10",
                "alert": "text-red-500 bg-red-50 border border-red-500 border-opacity-40 dark:text-red-300 dark:bg-opacity-10",
                "blue": "text-blue-500 bg-blue-50 border border-blue-500 border-opacity-40 dark:text-blue-300 dark:bg-opacity-10",
                "white": "text-white bg-gray-800 border border-gray-500 border-opacity-40 dark:text-white dark:bg-opacity-10",
                "basic": "text-gray-900 bg-transparent",
                "primary-solid": "text-white bg-brand-500",
                "success-solid": "text-white bg-green-500",
                "warning-solid": "text-white bg-orange-500",
                "alert-solid": "text-white bg-red-500",
                "blue-solid": "text-white bg-blue-500",
                "gray-solid": "text-white bg-gray-500",
                "white-solid": "text-gray-900 bg-white",
            },
            size: {
                sm: "h-[1.2rem] px-1.5 text-xs",
                md: "h-6 px-2 text-xs",
                lg: "h-7 px-3 text-md",
                xl: "h-8 px-4 text-lg",
            },
            tag: {
                false: "font-semibold tracking-wide rounded-full",
                true: "font-semibold border-none rounded-[--radius]",
            },
        },
        defaultVariants: {
            intent: "gray",
            size: "md",
            tag: false,
        },
    }),
    closeButton: cva([
        "UI-Badge__close-button",
        "appearance-none outline-none text-lg -mr-1 cursor-pointer transition ease-in hover:opacity-60",
        "focus-visible:ring-2 focus-visible:ring-[--ring]",
    ]),
    icon: cva([
        "UI-Badge__icon",
        "inline-flex self-center flex-shrink-0",
    ]),
})