import React, { ReactNode } from "react";
import { ColorVariantType } from "../../types/colors";
/**
 * Defines the props of the component.
 * @params id - Id to identify uniquely the component
 * @params children - Content of the component.
 * @params align - Text-align on the component.
 * @params color - Color of the component. It supports those theme colors that make sense for this component.
 * @params variant - Component used for the root node. Either a string to use a HTML element or a component.
 * @params whitespace - White space to apply to the component.
 * @params className - Override or extend the styles applied to the component.
 */
export declare type TypographySizeType = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
export declare type TypographyWeightType = "normal" | "medium" | "semibold" | "bold";
export declare type TypographyTextType = "display" | "text";
export interface TypographyProps {
    children: ReactNode;
    className?: string;
    color?: ColorVariantType;
    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
    size?: TypographySizeType;
    weight?: TypographyWeightType;
    type?: TypographyTextType;
}
/**
 * @param {TypographyProps} props
 * @returns Typography component
 * @description This component is used to render text
 * @example <Typography variant="h1">Heading 1</Typography>
 */
export declare function Typography({ children, color, variant, size, weight, type, className, ...restProps }: TypographyProps): React.DetailedReactHTMLElement<{
    className: string;
}, HTMLElement>;
export default Typography;