/*!
 * 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 declare const typographyOverflowWrapValues: readonly ["normal", "break-word", "anywhere"];
export type TypographyOverflowWrapValue = (typeof typographyOverflowWrapValues)[number];
export type TypographyProps = {
    /**
     * The text content of the component.
     */
    children: ReactNode;
    /**
     * Controls the text color.
     * - If `'primary'`, default text color.
     * - If `'textPrimary'`, alias for `'primary'`.
     * - If `'secondary'`, subdued text color.
     * - If `'textSecondary'`, alias for `'secondary'`.
     * - If `'error'`, danger red, for error states.
     */
    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 element is treated as presentational and ignored by screen readers.
     */
    isPresentational?: boolean;
    /**
     * Controls where the text may break to avoid overflowing its container.
     * - If `'normal'`, breaks only at normal word-break points, so a long unbroken string such as an ID or URL overflows.
     * - If `'break-word'`, breaks inside a word only when the word cannot fit on a line of its own.
     * - If `'anywhere'`, breaks inside a word as soon as it reaches the container edge, and the broken word counts toward the container's `min-content` size.
     * @default "normal"
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
     */
    overflowWrap?: TypographyOverflowWrapValue;
    /**
     * Ref attached to the underlying typography element.
     */
    typographyRef?: React.RefObject<FocusHandle>;
    /**
     * The variant of Typography to render.
     * @default "body"
     */
    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, overflowWrap, 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, overflowWrap, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedHeading2: import("react").MemoExoticComponent<({ ariaCurrent, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, overflowWrap, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedHeading3: import("react").MemoExoticComponent<({ ariaCurrent, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, overflowWrap, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedHeading4: import("react").MemoExoticComponent<({ ariaCurrent, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, overflowWrap, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedHeading5: import("react").MemoExoticComponent<({ ariaCurrent, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, overflowWrap, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedHeading6: import("react").MemoExoticComponent<({ ariaCurrent, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, overflowWrap, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedParagraph: import("react").MemoExoticComponent<({ ariaCurrent, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, overflowWrap, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedSubordinate: import("react").MemoExoticComponent<({ ariaCurrent, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, overflowWrap, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedSupport: import("react").MemoExoticComponent<({ ariaCurrent, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, overflowWrap, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedLegend: import("react").MemoExoticComponent<({ ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, overflowWrap, testId, translate, }: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
declare const MemoizedOverline: import("react").MemoExoticComponent<({ ariaDescribedBy, ariaLabel, ariaLabelledBy, children, color, component, id, overflowWrap, 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