import { ComponentProps } from 'react';
import { RecipeVariantProps } from '../../../styled-system/types';
export declare const BadgeStyle: import('../../../styled-system/types').RecipeRuntimeFn<{
    size: {
        small: {
            height: "16px";
            pr: "sd.system.dimension.spacing.twoExtraSmall";
            pl: "sd.system.dimension.spacing.twoExtraSmall";
            textStyle: "sd.system.typography.label.small_compact";
            expanded: {
                textStyle: "sd.system.typography.label.small_expanded";
            };
        };
        medium: {
            height: "24px";
            pr: "sd.system.dimension.spacing.extraSmall";
            pl: "sd.system.dimension.spacing.extraSmall";
            textStyle: "sd.system.typography.label.medium_compact";
            expanded: {
                textStyle: "sd.system.typography.label.medium_expanded";
            };
        };
        large: {
            height: "32px";
            pr: "sd.system.dimension.spacing.medium";
            pl: "sd.system.dimension.spacing.medium";
            textStyle: "sd.system.typography.label.large_compact";
            expanded: {
                textStyle: "sd.system.typography.label.large_expanded";
            };
        };
    };
    styleColor: {
        gray: {
            bg: "sd.reference.color.scale.gray.600";
            color: "sd.reference.color.scale.white.1000";
        };
        blue: {
            bg: "sd.reference.color.scale.blue.600";
            color: "sd.reference.color.scale.white.1000";
        };
        green: {
            bg: "sd.reference.color.scale.green.600";
            color: "sd.reference.color.scale.white.1000";
        };
        yellow: {
            bg: "sd.reference.color.scale.yellow.600";
            color: "sd.reference.color.scale.white.1000";
        };
        chestnut: {
            bg: "sd.reference.color.scale.chestnut.600";
            color: "sd.reference.color.scale.white.1000";
        };
        red: {
            bg: "sd.reference.color.scale.red.600";
            color: "sd.reference.color.scale.white.1000";
        };
        "gray-subtle": {
            bg: "sd.reference.color.scale.gray.100";
            color: "sd.reference.color.scale.gray.800";
        };
        "blue-subtle": {
            bg: "sd.reference.color.scale.blue.100";
            color: "sd.reference.color.scale.blue.800";
        };
        "green-subtle": {
            bg: "sd.reference.color.scale.green.100";
            color: "sd.reference.color.scale.green.800";
        };
        "yellow-subtle": {
            bg: "sd.reference.color.scale.yellow.100";
            color: "sd.reference.color.scale.yellow.800";
        };
        "chestnut-subtle": {
            bg: "sd.reference.color.scale.chestnut.100";
            color: "sd.reference.color.scale.chestnut.800";
        };
        "red-subtle": {
            bg: "sd.reference.color.scale.red.100";
            color: "sd.reference.color.scale.red.800";
        };
    };
}>;
type BadgeProps = ComponentProps<"span"> & RecipeVariantProps<typeof BadgeStyle> & {
    closeButton?: React.ReactElement<BadgeCloseButtonProps>;
};
export declare const Badge: React.FC<BadgeProps>;
type BadgeCloseButtonProps = React.FC<ComponentProps<"button">>;
export declare const BadgeCloseButton: React.FC<ComponentProps<"button">>;
export {};