/*!
 * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
 * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
 *
 * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *
 * See the License for the specific language governing permissions and limitations under the License.
 */
import { TypographyProps as MuiTypographyProps } from "@mui/material";
import { ElementType, ReactNode } from "react";
import { HtmlProps } from "./HtmlProps.js";
import { FocusHandle } from "./inputUtils.js";
export type TypographyVariantValue = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body" | "legend" | "overline" | "subordinate" | "support";
export declare const typographyVariantMapping: Record<TypographyVariantValue, MuiTypographyProps["variant"]>;
export declare const typographyColorValues: readonly ["primary", "textPrimary", "secondary", "textSecondary", "error"];
export type TypographyProps = {
    /**
     * The text content of the component.
     */
    children: ReactNode;
    /**
     * The color of the text.
     */
    color?: (typeof typographyColorValues)[number];
    /**
     * The HTML element the component should render, if different from the default.
     */
    component?: ElementType;
    /**
     * The id of the component.
     */
    id?: string;
    /**
     * If true, the component is presentational and should be ignored by screen readers.
     */
    isPresentational?: boolean;
    /**
     * The ref forwarded to the Typography
     */
    typographyRef?: React.RefObject<FocusHandle>;
    /**
     * The variant of Typography to render.
     */
    variant?: keyof typeof typographyVariantMapping;
} & Pick<HtmlProps, "ariaCurrent" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "testId" | "translate">;
declare const MemoizedTypography: import("react").MemoExoticComponent<({ ariaCurrent, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component: componentProp, id, isPresentational, testId, translate, typographyRef, variant, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedHeading1: import("react").MemoExoticComponent<({ ariaCurrent, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, isPresentational, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedHeading2: import("react").MemoExoticComponent<({ ariaCurrent, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedHeading3: import("react").MemoExoticComponent<({ ariaCurrent, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedHeading4: import("react").MemoExoticComponent<({ ariaCurrent, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedHeading5: import("react").MemoExoticComponent<({ ariaCurrent, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedHeading6: import("react").MemoExoticComponent<({ ariaCurrent, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedParagraph: import("react").MemoExoticComponent<({ ariaCurrent, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedSubordinate: import("react").MemoExoticComponent<({ ariaCurrent, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedSupport: import("react").MemoExoticComponent<({ ariaCurrent, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedLegend: import("react").MemoExoticComponent<({ ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedOverline: import("react").MemoExoticComponent<({ ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
export { MemoizedHeading1 as Heading1, MemoizedHeading2 as Heading2, MemoizedHeading3 as Heading3, MemoizedHeading4 as Heading4, MemoizedHeading5 as Heading5, MemoizedHeading6 as Heading6, MemoizedLegend as Legend, MemoizedOverline as Overline, MemoizedParagraph as Paragraph, MemoizedSubordinate as Subordinate, MemoizedSupport as Support, MemoizedTypography as Typography, };
//# sourceMappingURL=Typography.d.ts.map