import React__default from 'react';
import styled from '@emotion/styled';
import { L as Label } from './index-d9b5d0ac.js';
import { theme } from './miscTheme.js';

const StyledTextArea = styled.div `
  textarea {
    width: 100%;
    height: var(--textarea-height, 116px);
    padding: 1rem;
    border: 1px solid ${theme.colors.gray200};
    border-radius: 6px;
    color: ${theme.colors.gray800};
    font-size: 14px;
    resize: none;

    &:focus {
      box-shadow: 0px 0px 2px 2px #91caff;
    }

    &::placeholder {
      color: ${theme.colors.gray500};
    }

    &:disabled {
      background-color: ${theme.colors.neutral50};
      cursor: not-allowed;
    }
  }
`;
/**
 * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
 */
const TextArea = React__default.forwardRef(({ height, placeholder, labelText, labelColor, id, name, onChange, value, className, onKeyPress, disabled = false, }, ref) => {
    return (React__default.createElement(StyledTextArea, { className: className, style: { ['--textarea-height']: height || '116px' } },
        labelText && (React__default.createElement(Label, { size: "label2", style: { color: labelColor || '#595959' }, htmlFor: id }, labelText)),
        React__default.createElement("textarea", { name: name, ref: ref, placeholder: placeholder, id: id, onChange: (e) => onChange && onChange(e.target.value), 
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            onKeyPress: (e) => onKeyPress && onKeyPress(e), value: value, disabled: disabled })));
});

export { TextArea as T };
