import { jsx as _jsx } from "react/jsx-runtime";
import "./styles.css";
/**
 * FieldWrapper component - used as a container wrapper for a single form field and its related elements
 *
 * @param props - FieldWrapper component properties
 * @param props.children - React elements that compose a single field (label, input, error message, etc.)
 * @param props.orientation - Orientation of the field wrapper. Default: "vertical"
 *
 * **...Other valid HTML properties for section element**
 *
 * @returns FieldWrapper JSX element
 *
 * @example
 * ```tsx
 * // Basic field container
 * <FieldWrapper>
 *   <FieldLabel>Username</FieldLabel>
 *   <Input name="username" />
 *   <FieldError>This field is required</FieldError>
 * </FieldWrapper>
 *
 * // Field container with custom styling
 * <FieldWrapper className="custom-spacing">
 *   <FieldLabel>Email</FieldLabel>
 *   <Input name="email" type="email" />
 * </FieldWrapper>
 *
 * // Complete field with all elements
 * <FieldWrapper>
 *   <FieldLabel showAsterisk>Password</FieldLabel>
 *   <Input name="password" type="password" />
 *   <FieldError>Password must be at least 8 characters</FieldError>
 * </FieldWrapper>
 * ```
 */
function FieldWrapper(props) {
    const { children, className: baseClassName, orientation = "vertical", ...rest } = props;
    const className = `arkynFieldWrapper ${baseClassName} ${orientation}`;
    return (_jsx("section", { className: className.trim(), ...rest, children: children }));
}
export { FieldWrapper };
