import React from 'react';
export interface OverlayProps {
    /**
     * Background style for the overlay
     * - "dark": Semi-transparent dark background (rgba(0, 0, 0, 0.6))
     * - "light": Semi-transparent light background (rgba(255, 255, 255, 0.8))
     * - "transparent": No background
     * - Custom string: Any valid CSS color value
     * @default "dark"
     */
    background?: 'dark' | 'light' | 'transparent' | string;
    /**
     * Height of the overlay
     * @default 56
     */
    height?: number | string;
    /**
     * Horizontal alignment of content
     * @default "center"
     */
    align?: 'left' | 'center' | 'right';
    /**
     * Padding inside the overlay
     * @default 8
     */
    padding?: number;
    /**
     * Content to render inside the overlay
     */
    children: React.ReactNode;
    /**
     * Additional CSS class name
     */
    className?: string;
}
/**
 * Generic overlay component for positioning content on top of images/media.
 * Used by SummaryCard, PhotoCarousel, and other components.
 *
 * @example
 * ```tsx
 * <Overlay background="dark" height={40} align="center">
 *   <img src="logo.png" alt="Logo" style={{ height: 24 }} />
 * </Overlay>
 * ```
 *
 * @example
 * ```tsx
 * // Custom brand color
 * <Overlay background="#0066CC" height={48} align="center">
 *   <span style={{ color: 'white', fontWeight: 600 }}>Brand Name</span>
 * </Overlay>
 * ```
 */
export declare const Overlay: React.ForwardRefExoticComponent<OverlayProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=Overlay.d.ts.map