'use client';
import { getTranslation } from '@payloadcms/translations';
import React from 'react';
import { useTranslation } from '../../../providers/Translation/index.js';
import { fieldBaseClass } from '../shared.js';
export const TextareaInput = (props)=>{
    const { AfterInput, BeforeInput, Description, Error, Label, className, onChange, path, placeholder, readOnly, rows, rtl, showError, style, value, width } = props;
    const { i18n } = useTranslation();
    return /*#__PURE__*/ React.createElement("div", {
        className: [
            fieldBaseClass,
            'textarea',
            className,
            showError && 'error',
            readOnly && 'read-only'
        ].filter(Boolean).join(' '),
        style: {
            ...style,
            width
        }
    }, Error, Label, BeforeInput, /*#__PURE__*/ React.createElement("label", {
        className: "textarea-outer",
        htmlFor: `field-${path.replace(/\./g, '__')}`
    }, /*#__PURE__*/ React.createElement("div", {
        className: "textarea-inner"
    }, /*#__PURE__*/ React.createElement("div", {
        className: "textarea-clone",
        "data-value": value || placeholder || ''
    }), /*#__PURE__*/ React.createElement("textarea", {
        className: "textarea-element",
        "data-rtl": rtl,
        disabled: readOnly,
        id: `field-${path.replace(/\./g, '__')}`,
        name: path,
        onChange: onChange,
        placeholder: getTranslation(placeholder, i18n),
        rows: rows,
        value: value || ''
    }))), AfterInput, Description);
};

//# sourceMappingURL=Input.js.map