export type conditionalStyleProps = {
    error?: boolean;
    activated?: boolean;
    isFocused?: boolean | null;
    isDisabled?: boolean | null;
};
export declare enum InputSelectors {
    HOVER = "&:hover",
    ACTIVE = "&:active",
    PLACEHOLDER = "&:placeholder",
    FOCUS = "&:focus",
    FOCUS_LABEL_DIV_CHILD = "&:focus + label > div",
    DISABLED = "&:disabled, &[aria-disabled='true']",
    BEFORE = "&::before",
    AFTER = "&::after",
    BEFORE_AND_AFTER = "&::before, &::after",
    CHECKED_BEFORE = "&:checked + label::before",
    CHECKED_AFTER = "&:checked + label::after",
    HOVER_FOCUS_BEFORE = "&:hover + label::before, &:focus + label::before"
}
export declare const formBaseStyles: {
    readonly fontWeight: "base";
    readonly fontSize: 16;
    readonly color: "text";
};
export declare const formBaseComponentStyles: {
    readonly fontWeight: "base";
    readonly fontSize: 16;
    readonly color: "text";
    readonly width: 1;
    readonly outline: "none";
    readonly bg: "background";
    readonly minWidth: "auto";
};
export declare const formFieldFocusStyles: {
    readonly borderColor: "primary";
    readonly boxShadow: "inset 0 0 0 1px var(--colors-primary)";
};
export declare const formFieldTextDisabledStyles: {
    readonly color: "text-disabled";
    readonly cursor: "not-allowed";
};
export declare const formFieldBaseDisabledStyles: {
    readonly color: "text-disabled";
    readonly cursor: "not-allowed";
    readonly borderColor: "currentColor";
    readonly opacity: 1;
};
export declare const formFieldDisabledStyles: {
    readonly bg: "background-disabled";
    readonly "&:hover": {
        readonly borderColor: "currentColor";
    };
    readonly color: "text-disabled";
    readonly cursor: "not-allowed";
    readonly borderColor: "currentColor";
    readonly opacity: 1;
};
export declare const formFieldPaddingStyles: {
    readonly py: 12;
    readonly px: 8;
};
export declare const formBaseFieldStylesObject: {
    readonly transition: string;
    readonly border: 1;
    readonly borderRadius: "md";
    readonly "&:hover": {
        readonly borderColor: "primary";
    };
    readonly "&:placeholder": {
        readonly fontStyle: "italic";
    };
    readonly "&:disabled, &[aria-disabled='true']": {
        readonly bg: "background-disabled";
        readonly "&:hover": {
            readonly borderColor: "currentColor";
        };
        readonly color: "text-disabled";
        readonly cursor: "not-allowed";
        readonly borderColor: "currentColor";
        readonly opacity: 1;
    };
    readonly fontWeight: "base";
    readonly fontSize: 16;
    readonly color: "text";
    readonly width: 1;
    readonly outline: "none";
    readonly bg: "background";
    readonly minWidth: "auto";
};
export declare const formBaseFieldStyles: (props: import("@codecademy/variance").ThemeProps) => import("@codecademy/variance").CSSObject;
export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
    theme?: import("@emotion/react").Theme;
    as?: React.ElementType;
} & {
    theme?: import("@emotion/react").Theme;
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
export declare const formFieldStyles: (props: import("@codecademy/variance").ThemeProps) => import("@codecademy/variance").CSSObject;
export declare const conditionalStyles: (props: import("@codecademy/variance/dist/types/config").VariantProps<"variant", false | "error" | "activated"> & {
    theme?: import("@emotion/react").Theme;
}) => import("@codecademy/variance").CSSObject;
export declare const conditionalStyleState: (error: boolean, activated: boolean) => "error" | "activated" | undefined;
export declare const inputSizeStyles: (props: import("@codecademy/variance/dist/types/config").VariantProps<"inputSize", false | "small" | "base" | "smallFile"> & {
    theme?: import("@emotion/react").Theme;
}) => import("@codecademy/variance").CSSObject;