import React from 'react'; import type { BaseProps } from '../component-helpers'; import type { HeroAlign, HeroVariant } from './HeroContext'; /** * Design tokens */ import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/hero/base.css'; export type HeroProps = BaseProps & { align?: HeroAlign; imageContainerClassName?: string; imageContainerStyle?: React.CSSProperties; imageContainerRef?: React.RefObject; imageBackgroundColor?: 'default' | 'subtle'; variant?: HeroVariant; enableAnimation?: boolean; /** * Escape-hatch for inserting custom React components. * Warning: * This prop isn't advertised in our docs but remains part of the public API for edge-cases. * Need to use this prop? Please check in with #primer-brand first to confirm correct usage. */ trailingComponent?: React.FunctionComponent; 'data-testid'?: string; }; export declare const Hero: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes> & { Heading: React.ForwardRefExoticComponent & React.RefAttributes>; Description: React.ForwardRefExoticComponent<(Omit<{ size?: typeof import("..").TextSizes[number]; weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap; } & BaseProps & { font?: import("..").TextFontVariants; size?: typeof import("..").TextSizes[number]; variant?: typeof import("..").TextVariants[number]; weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap; align?: "start" | "center" | "end"; hasAntiAliasing?: boolean; } & { as?: typeof import("..").TextTags[number]; } & React.HTMLAttributes & { as?: "p"; } & { children?: React.ReactNode | undefined; }, "ref"> | Omit<{ size?: typeof import("..").TextSizes[number]; weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap; } & BaseProps & { font?: import("..").TextFontVariants; size?: typeof import("..").TextSizes[number]; variant?: typeof import("..").TextVariants[number]; weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap; align?: "start" | "center" | "end"; hasAntiAliasing?: boolean; } & { as?: typeof import("..").TextTags[number]; } & React.HTMLAttributes & BaseProps & { as?: "span"; } & { children?: React.ReactNode | undefined; }, "ref"> | Omit<{ size?: typeof import("..").TextSizes[number]; weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap; } & BaseProps & { font?: import("..").TextFontVariants; size?: typeof import("..").TextSizes[number]; variant?: typeof import("..").TextVariants[number]; weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap; align?: "start" | "center" | "end"; hasAntiAliasing?: boolean; } & { as?: typeof import("..").TextTags[number]; } & React.HTMLAttributes & BaseProps & { as?: "div"; } & { children?: React.ReactNode | undefined; }, "ref"> | Omit<{ size?: typeof import("..").TextSizes[number]; weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap; } & BaseProps & { font?: import("..").TextFontVariants; size?: typeof import("..").TextSizes[number]; variant?: typeof import("..").TextVariants[number]; weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap; align?: "start" | "center" | "end"; hasAntiAliasing?: boolean; } & { as?: typeof import("..").TextTags[number]; } & React.HTMLAttributes & BaseProps & { as?: "strong"; } & { children?: React.ReactNode | undefined; }, "ref"> | Omit<{ size?: typeof import("..").TextSizes[number]; weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap; } & BaseProps & { font?: import("..").TextFontVariants; size?: typeof import("..").TextSizes[number]; variant?: typeof import("..").TextVariants[number]; weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap; align?: "start" | "center" | "end"; hasAntiAliasing?: boolean; } & { as?: typeof import("..").TextTags[number]; } & React.HTMLAttributes & BaseProps & { as?: "em"; } & { children?: React.ReactNode | undefined; }, "ref">) & React.RefAttributes>; PrimaryAction: React.ForwardRefExoticComponent<(Omit<{ as?: "a" | "button"; href: string; } & import("..").ButtonBaseProps & BaseProps & { as?: "a"; } & { children?: React.ReactNode | undefined; }, "ref"> | Omit<{ as?: "a" | "button"; href: string; } & import("..").ButtonBaseProps & BaseProps & { as?: "button"; } & { children?: React.ReactNode | undefined; }, "ref">) & React.RefAttributes>; SecondaryAction: React.ForwardRefExoticComponent<(Omit<{ as?: "a" | "button"; href: string; } & import("..").ButtonBaseProps & BaseProps & { as?: "a"; } & { children?: React.ReactNode | undefined; }, "ref"> | Omit<{ as?: "a" | "button"; href: string; } & import("..").ButtonBaseProps & BaseProps & { as?: "button"; } & { children?: React.ReactNode | undefined; }, "ref">) & React.RefAttributes>; Image: React.ForwardRefExoticComponent<(Omit<{ position?: import("./HeroContext").HeroMediaPositions; enableBorder?: boolean; } & React.ImgHTMLAttributes & BaseProps & { src: string; alt: string; aspectRatio?: import("..").ImageAspectRatio; media?: string; borderRadius?: import("..").ImageBorderRadiusOptions; srcSet?: Pick, "srcSet">; } & { as?: "img"; srcSet?: Pick, "srcSet">; }, "ref"> | Omit<{ position?: import("./HeroContext").HeroMediaPositions; enableBorder?: boolean; } & React.ImgHTMLAttributes & BaseProps & { src: string; alt: string; aspectRatio?: import("..").ImageAspectRatio; media?: string; borderRadius?: import("..").ImageBorderRadiusOptions; srcSet?: Pick, "srcSet">; } & { as: "picture"; sources?: { srcset: string; media: string; }[]; srcSet?: undefined; }, "ref">) & React.RefAttributes>; Video: React.ForwardRefExoticComponent<(Omit<{ position?: import("./HeroContext").HeroMediaPositions; enableBorder?: boolean; 'data-testid'?: string; } & BaseProps & { children?: React.ReactNode | undefined; } & { poster?: never; posterAltText?: never; posterTitle?: never; }, "ref"> | Omit<{ position?: import("./HeroContext").HeroMediaPositions; enableBorder?: boolean; 'data-testid'?: string; } & BaseProps & { children?: React.ReactNode | undefined; } & { poster: string; posterAltText: string; posterTitle: string; }, "ref">) & React.RefAttributes>; Label: React.ForwardRefExoticComponent & React.RefAttributes>; Eyebrow: React.ForwardRefExoticComponent & React.RefAttributes>; testIds: { root: string; readonly video: string; readonly grid: string; readonly imageWrapper: string; }; };