import React, { ReactNode } from 'react';
interface WidgetSectionProps {
    /** Section title */
    title: string;
    /** Section content */
    children: ReactNode;
    /** Optional subtitle */
    subtitle?: string;
    /** Optional icon */
    icon?: ReactNode;
    /** Optional CSS class */
    className?: string;
    /** Test ID */
    testId?: string;
    /** Optional aria-labelledby for accessibility */
    ariaLabelledBy?: string;
    /** Section background color variant */
    variant?: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'error';
}
/**
 * Reusable section component for consistent widget layout
 *
 * ## Business Perspective
 *
 * This component provides a consistent section layout across all widgets,
 * improving readability and user experience when viewing security assessments.
 * Standardized sections help users quickly locate relevant information. 📦
 *
 * **DESIGN SYSTEM**: Uses Tailwind classes only - no inline styles.
 * All spacing follows 8px grid system (p-sm=8px minimum)
 *
 * @example
 * ```tsx
 * <WidgetSection
 *   title="Business Impact"
 *   subtitle="Financial and operational impact analysis"
 *   icon="💼"
 *   testId="business-impact-section"
 * >
 *   <p>Section content here</p>
 * </WidgetSection>
 * ```
 */
export declare const WidgetSection: React.FC<WidgetSectionProps>;
export default WidgetSection;
//# sourceMappingURL=WidgetSection.d.ts.map