import * as React from 'react';

interface SectionProps {
    /**
     * Content to display inside the section
     */
    children?: React.ReactNode;
    /**
     * Additional CSS class name
     */
    className?: string;
    /**
     * Additional inline styles
     */
    style?: React.CSSProperties;
}
/**
 * Section component - Arbor Design System
 *
 * A container component that provides consistent styling for content sections.
 * Has 8px padding, 8px border radius, and white background.
 * Used to wrap SectionHeadings, SubSectionHeadings, ListRows, and other content.
 *
 * @example
 * ```tsx
 * // Basic section with heading and list rows
 * <Section>
 *   <SectionHeading title="Contact Information" />
 *   <ListRow label="Email" value="john@example.com" />
 *   <ListRow label="Phone" value="+44 123 456 7890" />
 * </Section>
 *
 * // Section with interactive heading
 * <Section>
 *   <SectionHeadingInteractive title="Personal Details">
 *     <SubSectionInteractive title="Profile">
 *       <ListRow label="Name" value="John Smith" />
 *     </SubSectionInteractive>
 *   </SectionHeadingInteractive>
 * </Section>
 *
 * // Multiple sections on a page
 * <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
 *   <Section>
 *     <SectionHeading title="Section 1" />
 *     <ListRow label="Field" value="Value" />
 *   </Section>
 *   <Section>
 *     <SectionHeading title="Section 2" />
 *     <ListRow label="Field" value="Value" />
 *   </Section>
 * </div>
 * ```
 */
declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLDivElement>>;

export { Section, type SectionProps };