var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import styled, { css } from "styled-components";
import { theme } from "../../../css/globalStyle";
import { MdCancel } from "react-icons/md";
import { Box } from "../../layout/Box";
var inputStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 48px;\n  border-radius: 5px;\n  padding: 0.75rem 1rem;\n  border: 1px solid ", ";\n  outline: none;\n  font-weight: 400;\n  transition: box-shadow 200ms;\n  box-sizing: border-box;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    border: 1px solid ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  width: 100%;\n  height: 48px;\n  border-radius: 5px;\n  padding: 0.75rem 1rem;\n  border: 1px solid ", ";\n  outline: none;\n  font-weight: 400;\n  transition: box-shadow 200ms;\n  box-sizing: border-box;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    border: 1px solid ", ";\n    box-shadow: ", ";\n  }\n"])), theme.color.grey[400], theme.shadow.input.primary, theme.color.primary[500], theme.shadow.input.primary);
var standardInputStyle = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-color: ", ";\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  border-color: ", ";\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), theme.color.grey[400], theme.shadow.input.primary, theme.color.primary[500], theme.shadow.input.primary);
var errorInputStyle = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: 1px solid ", ";\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  border: 1px solid ", ";\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), theme.color.error[500], theme.shadow.input.error, theme.color.error[500], theme.shadow.input.error);
var InputContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  margin: 0.5rem 0;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  margin: 0.5rem 0;\n  position: relative;\n"])));
export var LabelContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
export var Title = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), function (_a) {
    var flex = _a.flex;
    return (flex ? "" : "0.5rem");
});
export var Label = styled.label(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: ", ";\n  display: inline-block;\n"], ["\n  color: ", ";\n  display: inline-block;\n"])), theme.color.grey[900]);
export var Description = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), theme.color.grey[700]);
export var FieldErrMessage = styled.div.attrs({
    className: "fw5 f6 animate__animated animate__fadeIn faster"
})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  color: ", ";\n  margin-top: 0.25rem;\n"], ["\n  color: ", ";\n  margin-top: 0.25rem;\n"])), theme.color.error[500]);
export var Input = styled.input(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n"])), inputStyle, function (_a) {
    var error = _a.error;
    return (error ? errorInputStyle : standardInputStyle);
});
export var TextArea = styled.textarea(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n"])), inputStyle, function (_a) {
    var error = _a.error;
    return (error ? errorInputStyle : standardInputStyle);
});
var Icon = styled(MdCancel)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  position: absolute;\n  right: 8px;\n  top: 13px;\n"], ["\n  position: absolute;\n  right: 8px;\n  top: 13px;\n"])));
export var TextField = forwardRef(function (_a, ref) {
    var name = _a.name, description = _a.description, label = _a.label, textarea = _a.textarea, error = _a.error, subComponent = _a.subComponent, value = _a.value, reset = _a.reset, rest = __rest(_a, ["name", "description", "label", "textarea", "error", "subComponent", "value", "reset"]);
    var displayTitle = !!label || !!subComponent || !!description;
    return (_jsxs(InputContainer, { children: [displayTitle && (_jsxs(Title, { children: [_jsxs(LabelContainer, { children: [label && _jsx(Label, __assign({ htmlFor: name }, { children: label })), subComponent && subComponent] }), description && _jsx(Description, { children: description })] })), _jsxs(Box, __assign({ position: "relative" }, { children: [textarea ? (_jsx(TextArea, __assign({ value: value, error: !!error, name: name, ref: ref }, rest))) : (_jsx(Input, __assign({ value: value, error: !!error, name: name, ref: ref }, rest))), !!value && !!reset && (_jsx(Icon, { size: "22px", color: theme.color.grey[600], onClick: reset }))] })), error && _jsx(FieldErrMessage, { children: error })] }));
});
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
//# sourceMappingURL=index.js.map