import * as React from 'react';
import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Cz9FycbA.js';
import 'react/jsx-runtime';
import './blocks-BJ3CyHu6.js';
import 'class-variance-authority';
import './button-variants-lRElsmTc.js';
import 'class-variance-authority/types';
import '@opensite/hooks/usePlatformFromUrl';

interface MediaHoverCtaItem {
    /**
     * Content to render inside the CTA card.
     */
    content?: React.ReactNode;
    /**
     * Image URL to reveal on hover (optional).
     */
    onHoverImgSrc?: string;
    /**
     * Additional classes for the hover image.
     */
    imgHoverClassName?: string;
    /**
     * Alt text for the hover image (leave empty for decorative images).
     */
    altText?: string;
    /**
     * Optional href to make the card a link.
     */
    cardHref?: string;
    /**
     * Initial background color (CSS color value or CSS variable).
     * Example: "#111" or "var(--brand-900)".
     */
    initialBackgroundColor?: string;
    /**
     * Hover background color (CSS color value or CSS variable).
     * Applied only when onHoverImgSrc is not provided.
     */
    onHoverBackgroundColor?: string;
    /**
     * Additional CSS classes for the card
     */
    className?: string;
}
type MediaHoverCtaType = MediaHoverCtaItem;
interface MediaHoverCtasProps {
    /**
     * Additional classes for the section wrapper.
     */
    className?: string;
    /**
     * Additional classes for the grid container.
     */
    gridClassName?: string;
    /**
     * CTA items to render.
     */
    items?: MediaHoverCtaItem[];
    /**
     * Custom slot for rendering items (overrides items array)
     */
    itemsSlot?: React.ReactNode;
    /**
     * Background style for the section
     */
    background?: SectionBackground;
    /**
     * Vertical spacing for the section
     */
    spacing?: SectionSpacing;
    /**
     * Optional background pattern name
     */
    pattern?: PatternName;
    /**
     * Pattern overlay opacity (0-1)
     */
    patternOpacity?: number;
    /**
     * Optional Optix Flow configuration for @page-speed/img.
     */
    optixFlowConfig?: {
        apiKey: string;
        compression?: number;
    };
    /**
     * @deprecated Use className instead
     */
    sectionClassName?: string;
}
/**
 * MediaHoverCtas displays a two-column CTA grid with hover media reveals.
 *
 * Each card can show a hover image or a hover background color while keeping
 * content customizable via React nodes.
 *
 * @example
 * ```tsx
 * <MediaHoverCtas
 *   items={[
 *     {
 *       content: <div><h3>Our Mission</h3><p>...</p></div>,
 *       onHoverImgSrc: "/mission.jpg",
 *       altText: "Our Mission"
 *     },
 *     {
 *       content: <div><h3>Our Vision</h3><p>...</p></div>,
 *       initialBackgroundColor: "var(--brand-100)",
 *       onHoverBackgroundColor: "var(--brand-900)"
 *     }
 *   ]}
 * />
 * ```
 */
declare function MediaHoverCtas({ className, sectionClassName, gridClassName, items, itemsSlot, background, spacing, pattern, patternOpacity, optixFlowConfig, }: MediaHoverCtasProps): React.JSX.Element;

export { type MediaHoverCtaItem, type MediaHoverCtaType, MediaHoverCtas, type MediaHoverCtasProps };
