@hhgtech/hhg-components/build/index-c69b376c.js

Hello Health Group common components

'use strict';

var React = require('react');
var styled = require('@emotion/styled');
var index = require('./index-6a888e0c.js');
var miscTheme = require('./miscTheme.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

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

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

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

    &:disabled {
      background-color: ${miscTheme.theme.colors.neutral50};
      cursor: not-allowed;
    }
  }
`;
/**
 * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
 */
const TextArea = React__default["default"].forwardRef(({ height, placeholder, labelText, labelColor, id, name, onChange, value, className, onKeyPress, disabled = false, }, ref) => {
    return (React__default["default"].createElement(StyledTextArea, { className: className, style: { ['--textarea-height']: height || '116px' } },
        labelText && (React__default["default"].createElement(index.Label, { size: "label2", style: { color: labelColor || '#595959' }, htmlFor: id }, labelText)),
        React__default["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 })));
});

exports.TextArea = TextArea;