const PageHeaderAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-PageHeader__root",
        "md:flex md:items-center md:justify-between space-y-2 md:space-y-0 md:space-x-5",
    ]),
    title: cva([
        "UI-PageHeader__title",
        "font-bold text-gray-900 dark:text-gray-200",
    ], {
        variants: {
            size: {
                sm: "text-lg sm:text-xl",
                md: "text-2xl sm:text-3xl",
                lg: "text-3xl sm:text-4xl",
                xl: "text-4xl sm:text-5xl",
            },
        },
        defaultVariants: {
            size: "md",
        },
    }),
    actionContainer: cva([
        "UI-PageHeader__actionContainer",
        "justify-stretch flex flex-col-reverse space-y-4 space-y-reverse sm:flex-row-reverse sm:justify-end",
        "sm:space-y-0 sm:space-x-3 sm:space-x-reverse md:mt-0 md:flex-row md:space-x-3",
    ]),
    textContainer: cva([
        "UI-PageHeader__textContainer",
        "space-y-1"
    ]),
    description: cva([
        "UI-PageHeader__description",
        "text-sm font-medium text-gray-500 dark:text-gray-400",
    ]),
    detailsContainer: cva([
        "UI-PageHeader__detailsContainer",
        "block sm:flex items-start sm:space-x-5",
    ], {
        variants: {
            _withImage: {
                true: "flex-col sm:flex-row",
                false: null,
            },
        },
    }),
})