'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

require('react');
require('@emotion/core');
var _tslib = require('./_tslib-9c546438.js');
var jsxRuntime = require('@emotion/react/jsx-runtime');
require('@emotion/styled');
require('@emotion/react');
var css = require('./css-203af057.js');
var autoId_esm = require('./auto-id.esm-f9c7d71b.js');
var utilities = require('./utilities-d51a0c2d.js');
var InputWrapper = require('./InputWrapper.js');

var TextInput = function (_a) {
    var idFromProps = _a.id, _b = _a.label, label = _b === void 0 ? '' : _b, _c = _a.description, description = _c === void 0 ? '' : _c, value = _a.value, placeholder = _a.placeholder, _d = _a.wrapperProps, wrapperProps = _d === void 0 ? {} : _d, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.valid, valid = _f === void 0 ? null : _f, _g = _a.disabled, disabled = _g === void 0 ? null : _g, _h = _a.errorMessage, errorMessage = _h === void 0 ? '' : _h, _j = _a.customCss, customCss = _j === void 0 ? '' : _j, onChange = _a.onChange, props = _tslib.__rest(_a, ["id", "label", "description", "value", "placeholder", "wrapperProps", "className", "valid", "disabled", "errorMessage", "customCss", "onChange"]);
    var resolvedCss = utilities.useCustomCss(customCss);
    var id = autoId_esm.useId(idFromProps);
    var descriptionId = "desc-" + id;
    var errorId = "err-" + id;
    var handleChange = function (e) {
        if (onChange) {
            onChange(e);
        }
    };
    return (jsxRuntime.jsx(InputWrapper.InputWrapper, _tslib.__assign({ customCss: resolvedCss, className: className, label: label, description: description, errorMessage: errorMessage, id: id, descriptionId: descriptionId, errorId: errorId }, wrapperProps, { children: jsxRuntime.jsx(Input, _tslib.__assign({ type: "text", placeholder: placeholder, "aria-describedby": descriptionId + " " + errorId, "aria-invalid": valid === false, "data-valid": valid, id: id, value: value, onChange: handleChange, disabled: !!disabled }, props), void 0) }), void 0));
};
var Input = css.styled('input')(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  font-size: 1em;\n  border: 3px solid;\n  border-color: ", ";\n  height: 35px;\n  border-radius: 5px;\n  padding: 5px;\n  &[data-valid='true'] {\n    border-color: ", ";\n  }\n  &[data-valid='false'] {\n    border-color: ", ";\n  }\n  &:focus-visible,\n  &:active {\n    border: 3px solid ", ";\n    outline: none;\n  }\n"], ["\n  width: 100%;\n  font-size: 1em;\n  border: 3px solid;\n  border-color: ", ";\n  height: 35px;\n  border-radius: 5px;\n  padding: 5px;\n  &[data-valid='true'] {\n    border-color: ", ";\n  }\n  &[data-valid='false'] {\n    border-color: ", ";\n  }\n  &:focus-visible,\n  &:active {\n    border: 3px solid ", ";\n    outline: none;\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.neutral;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.success;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.danger;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
});
var templateObject_1;

exports.TextInput = TextInput;
//# sourceMappingURL=TextInput.js.map
