import { HTMLAttributes } from 'react'; import { VariantProps } from 'class-variance-authority'; export declare const sizes: readonly ["display1", "display2", "title1", "title2", "title3", "headline", "body1", "body2", "caption1", "caption2"]; declare const styledSizes: { readonly display1: { readonly regular: { readonly fontSize: "45px"; readonly lineHeight: "52px"; readonly fontWeight: 400; readonly letterSpacing: "-0.5px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly emphasized: { readonly fontSize: "45px"; readonly lineHeight: "52px"; readonly fontWeight: 700; readonly letterSpacing: "-0.5px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly uppercase: undefined; }; readonly display2: { readonly regular: { readonly fontSize: "36px"; readonly lineHeight: "42px"; readonly fontWeight: 400; readonly letterSpacing: "-0.5px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly emphasized: { readonly fontSize: "36px"; readonly lineHeight: "42px"; readonly fontWeight: 700; readonly letterSpacing: "-0.5px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly uppercase: undefined; }; readonly title1: { readonly regular: { readonly fontSize: "28px"; readonly lineHeight: "34px"; readonly fontWeight: 400; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly emphasized: { readonly fontSize: "28px"; readonly lineHeight: "34px"; readonly fontWeight: 600; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly uppercase: undefined; }; readonly title2: { readonly regular: { readonly fontSize: "22px"; readonly lineHeight: "28px"; readonly fontWeight: 400; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly emphasized: { readonly fontSize: "22px"; readonly lineHeight: "28px"; readonly fontWeight: 600; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly uppercase: undefined; }; readonly title3: { readonly regular: { readonly fontSize: "20px"; readonly lineHeight: "24px"; readonly fontWeight: 400; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly emphasized: { readonly fontSize: "20px"; readonly lineHeight: "24px"; readonly fontWeight: 600; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly uppercase: undefined; }; readonly headline: { readonly regular: { readonly fontSize: "16px"; readonly lineHeight: "22px"; readonly fontWeight: 600; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly emphasized: { readonly fontSize: "16px"; readonly lineHeight: "22px"; readonly fontWeight: 600; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly uppercase: undefined; }; readonly body1: { readonly regular: { readonly fontSize: "16px"; readonly lineHeight: "22px"; readonly fontWeight: 400; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly emphasized: { readonly fontSize: "16px"; readonly lineHeight: "22px"; readonly fontWeight: 500; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly uppercase: undefined; }; readonly body2: { readonly regular: { readonly fontSize: "14px"; readonly lineHeight: "20px"; readonly fontWeight: 400; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly emphasized: { readonly fontSize: "14px"; readonly lineHeight: "20px"; readonly fontWeight: 500; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly uppercase: undefined; }; readonly caption1: { readonly regular: { readonly fontSize: "12px"; readonly lineHeight: "16px"; readonly fontWeight: 400; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly emphasized: { readonly fontSize: "12px"; readonly lineHeight: "16px"; readonly fontWeight: 600; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly uppercase: { readonly fontSize: "12px"; readonly lineHeight: "16px"; readonly fontWeight: 600; readonly letterSpacing: "0.5px"; readonly fontFamily: string; readonly textTransform: "uppercase"; }; }; readonly caption2: { readonly regular: { readonly fontSize: "11px"; readonly lineHeight: "13px"; readonly fontWeight: 400; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly emphasized: { readonly fontSize: "11px"; readonly lineHeight: "13px"; readonly fontWeight: 500; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly uppercase: { readonly fontSize: "11px"; readonly lineHeight: "13px"; readonly fontWeight: 500; readonly letterSpacing: "0.5px"; readonly fontFamily: string; readonly textTransform: "uppercase"; }; }; }; export declare const variants: readonly ["regular", "emphasized", "uppercase"]; export declare const componentVariants: readonly ["p", "span", "h1", "h2", "h3", "h4", "h5", "h6"]; export type SizeKey = keyof typeof styledSizes; type VariantStyleKey = (typeof variants)[number]; export type CopyVariantStylesProps = { size?: SizeKey; variant?: VariantStyleKey; }; export declare const typographyStyles: ({ size, variant }: CopyVariantStylesProps) => { readonly fontSize: "45px"; readonly lineHeight: "52px"; readonly fontWeight: 400; readonly letterSpacing: "-0.5px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "45px"; readonly lineHeight: "52px"; readonly fontWeight: 700; readonly letterSpacing: "-0.5px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "36px"; readonly lineHeight: "42px"; readonly fontWeight: 400; readonly letterSpacing: "-0.5px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "36px"; readonly lineHeight: "42px"; readonly fontWeight: 700; readonly letterSpacing: "-0.5px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "28px"; readonly lineHeight: "34px"; readonly fontWeight: 400; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "28px"; readonly lineHeight: "34px"; readonly fontWeight: 600; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "22px"; readonly lineHeight: "28px"; readonly fontWeight: 400; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "22px"; readonly lineHeight: "28px"; readonly fontWeight: 600; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "20px"; readonly lineHeight: "24px"; readonly fontWeight: 400; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "20px"; readonly lineHeight: "24px"; readonly fontWeight: 600; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "16px"; readonly lineHeight: "22px"; readonly fontWeight: 600; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "16px"; readonly lineHeight: "22px"; readonly fontWeight: 400; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "16px"; readonly lineHeight: "22px"; readonly fontWeight: 500; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "14px"; readonly lineHeight: "20px"; readonly fontWeight: 400; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "14px"; readonly lineHeight: "20px"; readonly fontWeight: 500; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "12px"; readonly lineHeight: "16px"; readonly fontWeight: 400; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "12px"; readonly lineHeight: "16px"; readonly fontWeight: 600; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "12px"; readonly lineHeight: "16px"; readonly fontWeight: 600; readonly letterSpacing: "0.5px"; readonly fontFamily: string; readonly textTransform: "uppercase"; } | { readonly fontSize: "11px"; readonly lineHeight: "13px"; readonly fontWeight: 400; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "11px"; readonly lineHeight: "13px"; readonly fontWeight: 500; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "11px"; readonly lineHeight: "13px"; readonly fontWeight: 500; readonly letterSpacing: "0.5px"; readonly fontFamily: string; readonly textTransform: "uppercase"; }; declare const BaseCopy: import("react").ForwardRefExoticComponent string> & Omit, "color"> & { size?: SizeKey; variant?: VariantStyleKey; } & import("react").RefAttributes>; /** * A Copy component that includes the same functionality as Text(deprecating) and Header(deprecating). * * By removing the dependency on size being tied to header tags, we can use this component for any text component. * * When using nested Copy use `component='span'` to properly cast the nested `p` tags. * * Link to Design Doc: http://go/typography * * @param size - optional - defaults to `body2` * @param variant - optional - defaults to the first variant in the size object (only headline defaults to `emphasized`) * @param component - optional - defaults to `p` - for nested elements, use `span` * @param underline - optional * @param props - optional - any other props that can be passed to a p tag * @returns a p tag styled with the size, variant, and underline * @example * // default size will be `body2` * Yar Pirate Ipsum * @example * // example with all props being used * * Yar Pirate Ipsum * * @example * // casting as a Header * Yar Pirate Ipsum * @example * // This is an example of a nested Copy component. The inner Copy component is using the `as` prop with a value of 'span' * * This is a nested{' '} * * copy * {' '} * component. The inner Copy component is using the `component` prop with a value of 'span' * * * @deprecated Use our custom typography classes and tailwind instead: * ``` *

Text

* instead of * Text * ``` */ export declare const Copy: typeof BaseCopy; export declare const CopyInheritColor: import("react").ComponentType string> & Omit, "color"> & { size?: SizeKey; variant?: VariantStyleKey; } & import("react").RefAttributes>; /** Copy, but with the color defaulted to `onSurface`. Eventually, Copy should probably use the same default */ export declare const CopyOnSurface: import("react").ComponentType string> & Omit, "color"> & { size?: SizeKey; variant?: VariantStyleKey; } & import("react").RefAttributes>; export {};