import * as React from 'react';
import { P as PatternName } from './pattern-background-a7gKHzHy.js';
import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
import 'react/jsx-runtime';
import './blocks-k17uluAz.js';
import 'class-variance-authority';
import './button-variants-lRElsmTc.js';
import 'class-variance-authority/types';

/**
 * Feature item configuration for spotlight display
 */
interface ServicesListFeatureSpotlightItem {
    /**
     * Unique identifier for the feature
     */
    id?: string;
    /**
     * Feature title
     */
    title?: React.ReactNode;
    /**
     * Feature description
     */
    description?: React.ReactNode;
    /**
     * Eyebrow label for the feature
     */
    eyebrow?: React.ReactNode;
    /**
     * Badge labels for the feature
     */
    badges?: [React.ReactNode, React.ReactNode];
    /**
     * Icon element (overrides iconName)
     */
    icon?: React.ReactNode;
    /**
     * Icon name in format: prefix/name (e.g., "lucide/shield-check")
     */
    iconName?: string;
    /**
     * Feature image
     */
    image?: {
        src: string;
        alt: string;
    };
    /**
     * Additional CSS classes for the feature item
     */
    className?: string;
}
interface ServicesListFeatureSpotlightProps {
    /**
     * Section heading
     */
    heading?: React.ReactNode;
    /**
     * Section subheading/eyebrow
     */
    subheading?: React.ReactNode;
    /**
     * Features list
     */
    features?: ServicesListFeatureSpotlightItem[];
    /**
     * Custom slot for rendering features (overrides features array)
     */
    featuresSlot?: React.ReactNode;
    /**
     * Additional CSS classes for the section wrapper
     */
    className?: string;
    /**
     * Additional CSS classes for the container
     */
    containerClassName?: string;
    /**
     * Additional CSS classes for the header
     */
    headerClassName?: string;
    /**
     * Additional CSS classes for the heading
     */
    headingClassName?: string;
    /**
     * Additional CSS classes for the subheading
     */
    subheadingClassName?: string;
    /**
     * Additional CSS classes for the features container
     */
    featuresClassName?: string;
    /**
     * Additional CSS classes for each feature card
     */
    cardClassName?: string;
    /**
     * Background style for the section
     */
    background?: SectionBackground;
    /**
     * Vertical spacing for the section
     */
    spacing?: SectionSpacing;
    /**
     * Optional background pattern name or URL
     */
    pattern?: PatternName | undefined;
    /**
     * Pattern overlay opacity (0-1)
     */
    patternOpacity?: number;
    /**
     * Optional Optix Flow configuration for image optimization
     */
    optixFlowConfig?: {
        apiKey: string;
        compression?: number;
    };
}
/**
 * ServicesListFeatureSpotlight - Alternating image and card layout that
 * highlights key service differentiators with badges and icons. Works well
 * for service pages needing rich storytelling and visual variety.
 *
 * @example
 * ```tsx
 * <ServicesListFeatureSpotlight
 *   heading="Service advantages built for modern teams"
 *   subheading="The OpenSite AI approach"
 *   features={[
 *     { id: "1", title: "Feature", description: "Description", iconName: "lucide/star", image: { src: "/img.jpg", alt: "Feature" } }
 *   ]}
 *   background="white"
 *   spacing="lg"
 * />
 * ```
 */
declare function ServicesListFeatureSpotlight({ heading, subheading, features, featuresSlot, className, containerClassName, headerClassName, headingClassName, subheadingClassName, featuresClassName, cardClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: ServicesListFeatureSpotlightProps): React.JSX.Element;

export { ServicesListFeatureSpotlight, type ServicesListFeatureSpotlightProps };
