'use client';
import React, { useCallback } from 'react';
import LabelComp from '../../Label/index.js';
import useField from '../../useField/index.js';
import { withCondition } from '../../withCondition/index.js';
import { fieldBaseClass } from '../shared.js';
export const Password = (props)=>{
    const { name, Error, Label: LabelFromProps, autoComplete, className, disabled, label, path: pathFromProps, required, style, validate, width } = props;
    const Label = LabelFromProps || /*#__PURE__*/ React.createElement(LabelComp, {
        label: label,
        required: required
    });
    const memoizedValidate = useCallback((value, options)=>{
        if (typeof validate === 'function') {
            return validate(value, {
                ...options,
                required
            });
        }
    }, [
        validate,
        required
    ]);
    const { formProcessing, path, setValue, showError, value } = useField({
        path: pathFromProps || name,
        validate: memoizedValidate
    });
    return /*#__PURE__*/ React.createElement("div", {
        className: [
            fieldBaseClass,
            'password',
            className,
            showError && 'error'
        ].filter(Boolean).join(' '),
        style: {
            ...style,
            width
        }
    }, Error, Label, /*#__PURE__*/ React.createElement("input", {
        autoComplete: autoComplete,
        disabled: formProcessing || disabled,
        id: `field-${path.replace(/\./g, '__')}`,
        name: path,
        onChange: setValue,
        type: "password",
        value: value || ''
    }));
};
export default withCondition(Password);

//# sourceMappingURL=index.js.map