import { GamutIconProps } from '@codecademy/gamut-icons';
import { StyleProps } from '@codecademy/variance';
import { StyledComponent } from '@emotion/styled';
import { InputHTMLAttributes } from 'react';
import * as React from 'react';
import { conditionalStyleProps, conditionalStyles, inputSizeStyles } from '../styles';
import { BaseInputProps } from '../types';
export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & BaseInputProps & {
    /**
     * Allows Inputs to manage their own activated style state to account for some edge-cases.
     */
    activated?: boolean;
    className?: string;
    /**
     * [The for/id string of a label or labelable form-related element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor). The outer FormGroup or FormLabel should have an identical string as the inner FormElement for accessibility purposes.
     */
    placeholder?: string;
    type?: string;
    valid?: boolean;
};
export interface StyledInputProps extends StyleProps<typeof conditionalStyles>, StyleProps<typeof inputSizeStyles>, InputProps {
    icon?: boolean;
}
export interface InputWrapperProps extends InputProps {
    as?: StyledComponent<StyledInputProps, React.PropsWithChildren<any>>;
    /**
     * A custom icon svg from gamut-icons.
     */
    icon?: React.ComponentType<GamutIconProps>;
    size?: 'base' | 'small';
}
/**  We greatly prefer NOT to do this but ReactRecurly has some specific needs around focus-styles + padding that force us to export them seperately. If we ever stop using React-Recurly, this code will be 🔪.
 *tldr: Do not do this unless you have already talked to Web-Plat and have failed to find any alternate (and better) solutions. */
export declare const reactRecurlyFormFieldFocusStyles: (props: import("@codecademy/variance").ThemeProps) => import("@codecademy/variance").CSSObject;
export declare const reactRecurlyFormFieldPaddingStyles: (props: import("@codecademy/variance").ThemeProps) => import("@codecademy/variance").CSSObject;
export declare const iFrameWrapper: StyledComponent<{
    theme?: import("@emotion/react").Theme;
    as?: React.ElementType;
} & conditionalStyleProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
export declare const Input: React.ForwardRefExoticComponent<InputWrapperProps & React.RefAttributes<HTMLInputElement>>;