import React from 'react';
import { TextAlignProps } from 'styled-system';
import { ColorVariant } from '../../utils/colorHelper';
export declare const HeadingVariants: {
    readonly 140: "140";
    readonly 120: "120";
    readonly 100: "100";
    readonly 80: "80";
    readonly 60: "60";
    readonly 40: "40";
    readonly 20: "20";
    readonly 15: "15";
    readonly 10: "10";
};
export type HeadingVariantKeys = (typeof HeadingVariants)[keyof typeof HeadingVariants];
export interface HeadingProps extends Pick<TextAlignProps, 'textAlign'> {
    /**
     * Heading variant to use. This determines the default HTML heading element.
     *
     * - `140` → `<h1>`
     * - `120` → `<h1>`
     * - `100` → `<h2>`
     * - `80`  → `<h3>`
     * - `60`  → `<h4>`
     * - `40`  → `<h5>`
     * - `20`  → `<h6>`
     * - `10`  → `<h6>`
     */
    variant?: HeadingVariantKeys;
    /**
     * Heading color. Can be a single value or an array for responsive design.
     * When an array is provided, each value applies to the corresponding breakpoint.
     *
     * Example: ['white', 'light', 'dark'] will use 'white' on mobile, 'light' on tablet, and 'dark' on desktop.
     */
    color?: ColorVariant | ColorVariant[];
    /**
     * Heading style to use
     */
    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
    /**
     * Id of heading
     */
    id?: string;
    children: React.ReactNode;
}
declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
export default Heading;