import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
import "./styles.css";
/**
 * FieldError component - used to display error messages for form fields
 *
 * @param props - FieldError component properties
 *
 * **...Other valid HTML properties for strong element**
 *
 * @returns FieldError JSX element or empty fragment if no children
 *
 * @example
 * ```tsx
 * // Basic field error
 * <FieldError>This field is required</FieldError>
 *
 * // Field error with custom styling
 * <FieldError className="custom-error">
 *  Invalid email format
 * </FieldError>
 *
 * // Conditional field error
 * {error && <FieldError>{error}</FieldError>}
 * ```
 */
function FieldError(props) {
    const { children, className: baseClassName, ...rest } = props;
    const className = `arkynFieldError ${baseClassName}`;
    if (!children)
        return _jsx(_Fragment, {});
    return (_jsx("strong", { className: className.trim(), ...rest, children: children }));
}
export { FieldError };
