import { ReactNode, CSSProperties } from 'react';

/**
 * Typography component to display text with various styles and variants.
 * It supports different typography variants, colors, and text styles like underline, italic, and line-through.
 * @component
 * @param {Object} props - Component properties.
 * @param {TypographyVariant} props.variant - The typography variant to apply (e.g., h1, b16, p1).
 * @param {ReactNode} props.children - The text content to display.
 * @param {string} [props.className] - Additional CSS classes for customization.
 * @param {string} [props.color] - Optional color for the text.
 * @param {boolean} [props.underline=false] - Whether to underline the text.
 * @param {boolean} [props.italic=false] - Whether to italicize the text.
 * @param {boolean} [props.lineThrough=false] - Whether to apply line-through style to the text.
 * @param {CSSProperties} [props.style] - Additional inline styles for the text.
 * @param {"left" | "center" | "right"} [props.align] - Text alignment (default is left).
 * @param {string} [props.id] - Optional ID for testing purposes.
 * @returns {JSX.Element} The Typography component.
 * @example
 * <Typography
 *   variant="h1"
 *  color="var(--color-primary)"
 *  underline
 *  italic
 *  lineThrough
 *  style={{ fontSize: '24px' }}
 *  align="center"
 *  id="typography-example"
 * >
 *  This is a heading with custom styles
 * </Typography>
 */
export type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "b16" | "b14" | "b12" | "b10" | "b8" | "p1" | "p2" | "p3" | "overline" | `${"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "b16" | "b14" | "b12" | "b10" | "b8" | "p1" | "p2" | "p3" | "overline"}${"Medium" | "Bold"}`;
interface TypographyProps {
    variant: TypographyVariant;
    children: ReactNode;
    className?: string;
    color?: string;
    underline?: boolean;
    italic?: boolean;
    lineThrough?: boolean;
    style?: CSSProperties;
    align?: "left" | "center" | "right";
    id?: string;
    [key: string]: any;
}
declare const Typography: ({ variant, children, className, color, underline, italic, lineThrough, style, align, id, ...props }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
export declare const HelperText: ({ error, helperText, id, }: {
    error: boolean;
    helperText: string;
    id?: string;
}) => import("react/jsx-runtime").JSX.Element;
export default Typography;