import { default as React } from 'react';
import { default as IFormGroupProps } from './IFormGroupProps';
/**
 * A flexible form group component that wraps form elements in a styled container with a label.
 * Composes Grid component for responsive multi-column layouts.
 *
 * **Composition Pattern:**
 * FormGroup uses Grid internally instead of reimplementing grid logic, ensuring DRY principles
 * and consistent layout behavior across the library.
 *
 * **Responsive Behavior:**
 * On screens below the `md` breakpoint (< 768px) the boxed styling is dropped to give content
 * more room: the border is removed, padding shrinks to 8px, the gap between fields becomes 16px,
 * and the floating `<legend>` is replaced by an `<h4>` title.
 *
 * @param props {@link IFormGroupProps} - Props for the FormGroup component
 * @returns The rendered FormGroup component
 *
 * @example
 * ```tsx
 * // Legacy format (number) - mobile-first default
 * <FormGroup label="Personal Information" columns={2}>
 *   <Field name="firstName">
 *     <FieldLabel required>First Name</FieldLabel>
 *     <FieldControl><Input placeholder="John" /></FieldControl>
 *   </Field>
 *   <Field name="lastName">
 *     <FieldLabel required>Last Name</FieldLabel>
 *     <FieldControl><Input placeholder="Doe" /></FieldControl>
 *   </Field>
 * </FormGroup>
 * ```
 *
 * @example
 * ```tsx
 * // Responsive format - full control over breakpoints
 * <FormGroup label="Contact" columns={{ xs: 1, sm: 2, lg: 3 }}>
 *   <Field name="firstName">
 *     <FieldLabel>First Name</FieldLabel>
 *     <FieldControl><Input /></FieldControl>
 *   </Field>
 *   <Field name="lastName">
 *     <FieldLabel>Last Name</FieldLabel>
 *     <FieldControl><Input /></FieldControl>
 *   </Field>
 *   <Field name="email">
 *     <FieldLabel>Email</FieldLabel>
 *     <FieldControl><Input /></FieldControl>
 *   </Field>
 * </FormGroup>
 * ```
 *
 * @example
 * ```tsx
 * // Mixed spans - some fields span multiple columns
 * <FormGroup label="User Profile" columns={{ xs: 4, lg: 12 }}>
 *   <Field name="email" columnSpan={{ xs: 4, lg: 12 }}>
 *     <FieldLabel>Email Address</FieldLabel>
 *     <FieldControl><Input type="email" /></FieldControl>
 *   </Field>
 *   <Field name="firstName" columnSpan={{ xs: 4, lg: 6 }}>
 *     <FieldLabel>First Name</FieldLabel>
 *     <FieldControl><Input /></FieldControl>
 *   </Field>
 * </FormGroup>
 * ```
 */
declare const FormGroup: React.FC<IFormGroupProps>;
export default FormGroup;