import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { twJoin, twMerge } from "tailwind-merge";
export const FormInput = forwardRef(function FormInput(props, ref) {
    const { icon, errorMessage, isDirty, containerClassName, inputClassName, errorMessageClassName, hideErrors = false, ...delegatedProps } = props;
    const type = props.type ?? "text";
    const isError = !!errorMessage;
    return (_jsxs("div", { children: [_jsxs("div", { className: twMerge("mb-1 flex gap-2 rounded-md border border-gray-200 bg-gray-50 p-3 text-black placeholder:text-gray-50", isError && "border-red-900", containerClassName), children: [icon && (_jsx("span", { className: twJoin((!isDirty || isError) && "text-slate-200"), children: icon })), _jsx("input", { ...delegatedProps, className: twMerge("w-full bg-transparent font-semibold outline-none", inputClassName), ref: ref, type: type })] }), _jsx("p", { className: twMerge("hidden min-h-4 text-xs text-red-900", isError && "block", hideErrors && "hidden", errorMessageClassName), children: errorMessage })] }));
});
//# sourceMappingURL=form-input.js.map