import * as React from 'react';
import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-RgHoLtLt.js';
import { O as OptixFlowConfig } from './blocks-DL92rOxr.js';
import 'react/jsx-runtime';
import 'class-variance-authority';
import '@page-speed/pressable';
import '@opensite/hooks/usePlatformFromUrl';

interface FeatureBentoImageGridItem {
    /**
     * Icon element (overrides iconName)
     */
    icon?: React.ReactNode;
    /**
     * Icon name in format: prefix/name (e.g., "lucide/atom")
     */
    iconName?: string;
    /**
     * Icon badge content
     */
    iconBadge?: React.ReactNode;
    /**
     * Card title content
     */
    title?: React.ReactNode;
    /**
     * Link text content
     */
    linkText?: React.ReactNode;
    /**
     * Link URL
     */
    link?: string;
    /**
     * Image source URL
     */
    imageSrc?: string;
    /**
     * Image alt text
     */
    imageAlt?: string;
    /**
     * Custom image slot (overrides imageSrc)
     */
    imageSlot?: React.ReactNode;
    /**
     * Card size variant
     */
    size?: "large" | "small";
    /**
     * Additional CSS classes for the item
     */
    className?: string;
    /**
     * Additional CSS classes for the icon badge
     */
    iconBadgeClassName?: string;
    /**
     * Additional CSS classes for the title
     */
    titleClassName?: string;
    /**
     * Additional CSS classes for the link text
     */
    linkTextClassName?: string;
    /**
     * Additional CSS classes for the image
     */
    imageClassName?: string;
}
interface FeatureBentoImageGridProps {
    /**
     * Main heading content
     */
    title?: React.ReactNode;
    /**
     * Supporting description content
     */
    description?: React.ReactNode;
    /**
     * Array of grid items
     */
    items?: FeatureBentoImageGridItem[];
    /**
     * Custom slot for rendering items (overrides items array)
     */
    itemsSlot?: React.ReactNode;
    /**
     * Additional CSS classes for the section
     */
    className?: string;
    /**
     * Additional CSS classes for the container
     */
    containerClassName?: string;
    /**
     * Additional CSS classes for the title
     */
    titleClassName?: string;
    /**
     * Additional CSS classes for the description
     */
    descriptionClassName?: string;
    /**
     * Additional CSS classes for the grid
     */
    gridClassName?: string;
    /**
     * Additional CSS classes for the large card
     */
    largeCardClassName?: string;
    /**
     * Additional CSS classes for small cards
     */
    smallCardClassName?: string;
    /**
     * Optional Optix Flow configuration for image optimization
     */
    optixFlowConfig?: OptixFlowConfig;
    /**
     * 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;
    /**
     * Additional CSS classes for the pattern overlay
     */
    patternClassName?: string;
}
/**
 * Feature Bento Image Grid - Asymmetric bento-style grid with large and small
 * image cards featuring gradient overlays and CTAs.
 *
 * Layout: Bento grid with one large card and two smaller cards.
 * Key features: Gradient overlays, icon badges, hover animations, responsive layout.
 * Best for: Feature highlights, portfolio showcases, product categories.
 *
 * @example
 * ```tsx
 * <FeatureBentoImageGrid
 *   title="Dynamic Layouts"
 *   description="Adapt the box to suit any purpose"
 *   items={[
 *     {
 *       iconName: "lucide/atom",
 *       iconBadge: "Sustainability Focus",
 *       title: "Build stunning websites with ease",
 *       linkText: "Get started today",
 *       link: "/start",
 *       imageSrc: "/feature.jpg",
 *       imageAlt: "Feature",
 *       size: "large"
 *     },
 *   ]}
 * />
 * ```
 */
declare function FeatureBentoImageGrid({ title, description, items, itemsSlot, className, titleClassName, descriptionClassName, gridClassName, largeCardClassName, smallCardClassName, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, }: FeatureBentoImageGridProps): React.JSX.Element;

export { FeatureBentoImageGrid, type FeatureBentoImageGridProps };
