import React from "react";
import "./LsgHeroCard.scss";
/** Token names that map to `--lsg-color-*` custom properties. */
export type LsgHeroColorToken = "primary" | "secondary" | "tertiary" | "light" | "dark" | "black" | "white";
export interface LsgHeroCardProps {
    /** DAM/CDN URL for the background image. Used as poster/fallback for video. */
    imageSrc?: string;
    /** Alt text for the image. */
    imageAlt?: string;
    /** DAM/CDN URL for an mp4/webm video asset. */
    videoSrc?: string;
    /** YouTube video ID only (e.g. "dQw4w9WgXcQ"). */
    youtubeId?: string;
    /** Vimeo video ID only (e.g. "148751763"). */
    vimeoId?: string;
    /**
     * Background colour token for this card. Always tints the content text-box
     * (`lsg-hero-card--bg-{token}`). When the card has NO image/video, it instead
     * fills the whole card as a solid colour (`lsg-hero-card--fill-{token}`) with a
     * transparent content box.
     */
    cardBackground?: LsgHeroColorToken;
    /** Text colour token for this card's content (`lsg-hero-card--color-{token}`). */
    cardColor?: LsgHeroColorToken;
    /**
     * Content slot rendered on top of the media layer inside the white text-box
     * overlay. In AEM this is the parsys (container) inside each hero-card.
     * Accepts any LSG components: Title, Text, Button, etc.
     */
    children?: React.ReactNode;
    /** Index within the parent carousel — used for accessible label. */
    index?: number;
    /** Total slide count from the parent — used for accessible label. */
    total?: number;
    className?: string;
}
export declare const LsgHeroCard: React.FC<LsgHeroCardProps>;