export declare const toggleButtonRecipe: import('@chakra-ui/react').RecipeDefinition<{
    size: {
        "2xs"?: {
            h: "600";
            minW: "600";
            fontSize: "300";
            fontWeight: "500";
            lineHeight: "400";
            px: "200";
            gap: "100";
            _icon: {
                width: "400";
                height: "400";
            };
        } | undefined;
        xs?: {
            h: "800";
            minW: "800";
            fontSize: "350";
            fontWeight: "500";
            lineHeight: "400";
            px: "300";
            gap: "100";
            _icon: {
                width: "500";
                height: "500";
            };
        } | undefined;
        sm?: {
            h: "900";
            minW: "900";
            px: "350";
            fontSize: "350";
            lineHeight: "400";
            gap: "200";
            _icon: {
                width: "500";
                height: "500";
            };
        } | undefined;
        md?: {
            h: "1000";
            minW: "1000";
            fontSize: "400";
            lineHeight: "500";
            px: "400";
            gap: "200";
            _icon: {
                width: "600";
                height: "600";
            };
        } | undefined;
    };
    variant: {
        outline: {
            "--button-bg": "transparent";
            "--button-text": "{colors.colorPalette.11}";
            "--border-width": "{sizes.25}";
            "--border-color": "{colors.colorPalette.7}";
            bg: "var(--button-bg)";
            boxShadow: "0 0 0 var(--border-width) var(--border-color)";
            color: "var(--button-text)";
            "&[data-hovered='true']": {
                "--button-bg": "{colors.colorPalette.2}";
                "--border-color": "{colors.colorPalette.8}";
            };
            "&[data-selected=true]": {
                "--button-bg": "{colors.colorPalette.3}";
                "--border-color": "{colors.colorPalette.8}";
                _hover: {
                    "--button-bg": "{colors.colorPalette.4}";
                    "--border-color": "{colors.colorPalette.9}";
                };
            };
        };
        ghost: {
            "--button-text": "{colors.neutral.11}";
            "--button-bg": "transparent";
            color: "var(--button-text)";
            bg: "var(--button-bg)";
            "&[data-hovered='true']": {
                "--button-bg": "{colors.colorPalette.2}";
            };
            "&[data-selected='true']": {
                "--button-bg": "{colors.colorPalette.3}";
                "--button-text": "{colors.colorPalette.11}";
                "&[data-hovered='true']": {
                    "--button-bg": "{colors.colorPalette.4}";
                };
            };
        };
    };
}>;