import * as React from 'react';
import { FormEngineProps } from '@page-speed/forms/integration';
import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-RgHoLtLt.js';
import { C as ContactDarkSocialLink } from './contact-dark-BVCe2rbX.js';
import './blocks-DL92rOxr.js';
import 'class-variance-authority';
import '@page-speed/pressable';
import '@opensite/hooks/usePlatformFromUrl';
import 'react/jsx-runtime';

interface ContactOption {
    /**
     * Icon name for the contact option
     */
    icon: string;
    /**
     * Contact information text
     */
    info: string;
    /**
     * Optional href for the contact option
     */
    href?: string;
}
interface ContactCardProps {
    /**
     * Main heading content
     */
    heading?: React.ReactNode;
    /**
     * Description text below the heading
     */
    description?: React.ReactNode;
    /**
     * Contact options to display with icons
     */
    contactOptions?: ContactOption[];
    /**
     * Custom slot for rendering contact options (overrides contactOptions array)
     */
    contactOptionsSlot?: React.ReactNode;
    /**
     * Social media links to display
     */
    socialLinks?: ContactDarkSocialLink[];
    /**
     * Custom slot for rendering social links (overrides socialLinks array)
     */
    socialLinksSlot?: React.ReactNode;
    /**
     * Full form engine setup and props
     */
    formEngineSetup?: FormEngineProps;
    /**
     * Additional CSS classes for the section
     */
    className?: string;
    /**
     * Additional CSS classes for the container
     * @default "px-6 sm:px-6 md:px-8 lg:px-8"
     */
    containerClassName?: string;
    /**
     * Additional CSS classes for the card
     */
    cardClassName?: string;
    /**
     * Additional CSS classes for the card content
     */
    cardContentClassName?: string;
    /**
     * Additional CSS classes for the info panel
     */
    infoPanelClassName?: string;
    /**
     * Additional CSS classes for the heading
     */
    headingClassName?: string;
    /**
     * Additional CSS classes for the description
     */
    descriptionClassName?: string;
    /**
     * Additional CSS classes for the contact options container
     */
    contactOptionsClassName?: string;
    /**
     * Additional CSS classes for the social links container
     */
    socialLinksClassName?: string;
    /**
     * Additional CSS classes for the two-column grid wrapper
     */
    gridClassName?: string;
    /**
     * Background style for the section
     */
    background?: SectionBackground;
    /**
     * Vertical spacing for the section
     * @default "py-16 md:py-32"
     */
    spacing?: SectionSpacing;
    /**
     * Optional background pattern name or URL
     */
    pattern?: PatternName | undefined;
    /**
     * Pattern overlay opacity (0-1)
     */
    patternOpacity?: number;
}
/**
 * ContactCard - A split-layout contact form with a card-wrapped form on one side
 * and heading, description, and icon-based contact details on the other.
 *
 * @example
 * ```tsx
 * <ContactCard
 *   heading="Get In Touch"
 *   description="We'd love to hear from you."
 *   contactOptions={[
 *     { icon: "Phone", info: "+1 (555) 987-6543", href: "tel:+15559876543" },
 *     { icon: "Mail", info: "support@example.com", href: "mailto:support@example.com" },
 *   ]}
 *   formEngineSetup={{ formConfig: { endpoint: "/api/contact", format: "json" } }}
 * />
 * ```
 */
declare function ContactCard({ heading, description, contactOptions, contactOptionsSlot, socialLinks, socialLinksSlot, formEngineSetup, className, containerClassName, cardClassName, cardContentClassName, infoPanelClassName, headingClassName, descriptionClassName, contactOptionsClassName, socialLinksClassName, gridClassName, background, spacing, pattern, patternOpacity, }: ContactCardProps): React.JSX.Element;

export { ContactCard, type ContactCardProps };
