import React from 'react'; import type { BaseProps } from '../component-helpers'; import { HeadingProps } from '../Heading'; import { TextProps } from '../Text'; /** * Design tokens */ import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css'; export declare const CTABannerBackgroundColors: readonly ["default", "subtle"]; type ResponsiveMap = { narrow?: T; regular?: T; wide?: T; }; type ResponsiveBackgroundImageSrcMap = ResponsiveMap; type BackgroundColors = (typeof CTABannerBackgroundColors)[number] | AnyString; type ResponsiveBackgroundColorMap = ResponsiveMap; type ResponsiveBackgroundImagePositionMap = ResponsiveMap; type ResponsiveBackgroundImageSizeMap = ResponsiveMap; export type CTABannerProps = BaseProps & React.HTMLAttributes & { /** * Alternative presentations */ variant?: 'default' | 'balanced' | 'minimal'; /** * The alignment of the content within the banner. */ align?: 'start' | 'center'; /** * A flag to add a border to the banner. */ hasBorder?: boolean; /** * Enable optional grid lines */ hasGridLines?: boolean; /** * A flag to remove the shadow from the banner. * @deprecated - hasShadow will be removed in a future release. */ hasShadow?: boolean; /** * A flag to remove the background from the banner. */ hasBackground?: boolean; /** * Optional, custom background color. */ backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap; /** * Optional, custom background image. */ backgroundImageSrc?: string | ResponsiveBackgroundImageSrcMap; /** * Optional, custom background position. */ backgroundImagePosition?: string | ResponsiveBackgroundImagePositionMap; /** * Optional, custom background size. */ backgroundImageSize?: string | ResponsiveBackgroundImageSizeMap; /** * 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. */ leadingComponent?: React.FunctionComponent; /** * 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; }; type CTABannerHeadingProps = BaseProps & { children: React.ReactNode | React.ReactNode[]; } & HeadingProps; type CTABannerDescriptionProps = React.HtmlHTMLAttributes & BaseProps & { variant?: TextProps['variant']; }; type CTABannerImageProps = BaseProps & { src: string; alt: string; }; export declare const CTABanner: React.ForwardRefExoticComponent & React.RefAttributes> & { Heading: React.ForwardRefExoticComponent & React.RefAttributes>; Description: React.ForwardRefExoticComponent & React.RefAttributes>; ButtonGroup: React.ForwardRefExoticComponent & React.RefAttributes, "ref"> & React.RefAttributes>; Image: React.ForwardRefExoticComponent & React.RefAttributes>; }; export {};