woi-react-components/dist/components/WOITextField/index.style.js

This project requires NodeJS (version 18 or later) and NPM. [Node](http://nodejs.org/) and [NPM](https://npmjs.org/) are really easy to install. To make sure you have them available on your machine, try running the following command. ```sh $ npm -v &

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import styled from "styled-components";
export var ContainerWidget = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    height: ", ";\n    width: max-content;\n    position: relative;\n"], ["\n    height: ", ";\n    width: max-content;\n    position: relative;\n"
    // Created styled button widget
])), function (props) { return props.variant.multline ? 'auto' : '56px'; });
// Created styled button widget
export var TextFieldWidget = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    width: 346px;\n    height: 56px;\n    padding: 0px 16px 0 40px;\n    gap: 16px;\n    outline: none;\n    font-style: normal;\n    text-transform: capitalize;\n    line-height: normal;\n    transition: 0.5s all ease-out;\n    border-width: ", ";\n    border-style: ", ";\n    border-color: ", ";\n    font-family: ", ";\n    color: ", ";\n    background: ", ";\n    border-radius: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    opacity: ", ";\n    cursor: ", ";\n\n    &:focus {\n        outline: none;\n        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);\n        color: ", ";\n        border-width: ", ";\n        border-style: ", ";\n        border-color: ", ";\n        background: ", ";\n    }\n\n    &::placeholder,  &::-webkit-input-placeholder {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: ", ";\n        text-decoration: ", ";\n        color: ", ";\n        opacity: ", ";\n    }\n    \n    &:-ms-input-placeholder {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: ", ";\n        text-decoration: ", ";\n        color: ", ";\n        opacity: ", ";\n    }\n\n    &[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button { \n        -webkit-appearance: none; \n        margin: 0; \n    }\n\n"], ["\n    display: flex;\n    align-items: center;\n    width: 346px;\n    height: 56px;\n    padding: 0px 16px 0 40px;\n    gap: 16px;\n    outline: none;\n    font-style: normal;\n    text-transform: capitalize;\n    line-height: normal;\n    transition: 0.5s all ease-out;\n    border-width: ", ";\n    border-style: ", ";\n    border-color: ", ";\n    font-family: ", ";\n    color: ", ";\n    background: ", ";\n    border-radius: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    opacity: ", ";\n    cursor: ", ";\n\n    &:focus {\n        outline: none;\n        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);\n        color: ", ";\n        border-width: ", ";\n        border-style: ", ";\n        border-color: ", ";\n        background: ", ";\n    }\n\n    &::placeholder,  &::-webkit-input-placeholder {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: ", ";\n        text-decoration: ", ";\n        color: ", ";\n        opacity: ", ";\n    }\n    \n    &:-ms-input-placeholder {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: ", ";\n        text-decoration: ", ";\n        color: ", ";\n        opacity: ", ";\n    }\n\n    &[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button { \n        -webkit-appearance: none; \n        margin: 0; \n    }\n\n"])), function (props) { return props.variant.borderWidth ? props.variant.borderWidth + 'px' : '1px'; }, function (props) { return props.variant.borderType ? props.variant.borderType : 'solid'; }, function (props) { return props.variant.isSuccess ? '#00B87C' : props.variant.isError ? '#ff3333' : '#00000050'; }, function (props) { return props.variant.fontFamily ? props.variant.fontFamily : 'Nunito Sans'; }, function (props) { return props.variant.color ? props.variant.color : '#000000'; }, function (props) { return props.variant.backgroundColor ? props.variant.backgroundColor : '#00000050'; }, function (props) { return props.variant.borderRadius ? props.variant.borderRadius + 'px' : '4px'; }, function (props) { return props.variant.fontSize ? props.variant.fontSize + 'px' : '16px'; }, function (props) { return props.variant.fontWeight ? props.variant.fontWeight : '400'; }, function (props) { return props.variant.isDisabled ? 0.5 : 1; }, function (props) { return props.variant.isDisabled ? 'not-allowed' : 'auto'; }, function (props) { return props.variant.isSuccess ? '#00B87C' : props.variant.isError ? '#ff3333' : props.variant.borderColor ? props.variant.borderColor : '#E0E0E0'; }, function (props) { return props.variant.borderWidth ? props.variant.borderWidth + "px" : '1px'; }, function (props) { return props.variant.borderType ? props.variant.borderType : 'solid'; }, function (props) { return props.variant.isSuccess ? '#00B87C' : props.variant.isError ? '#ff3333' : props.variant.borderColor ? props.variant.borderColor : '#E0E0E0'; }, function (props) { return props.variant.borderColor ? props.variant.borderColor + '20' : '#00000050'; }, function (props) { return props.variant.placeholderFontFamily ? props.variant.placeholderFontFamily : 'Nunito Sans'; }, function (props) { return props.variant.placeholderFontSize ? props.variant.placeholderFontSize + 'px' : '14px'; }, function (props) { return props.variant.placeholderFontWeight ? props.variant.placeholderFontWeight : '400'; }, function (props) { return props.variant.placeholderFontDecoration ? props.variant.placeholderFontDecoration : 'normal'; }, function (props) { return props.variant.placeholderColor ? props.variant.placeholderColor : '#000000'; }, function (props) { return props.variant.isDisabled ? 0.5 : 1; }, function (props) { return props.variant.placeholderFontFamily ? props.variant.placeholderFontFamily : 'Nunito Sans'; }, function (props) { return props.variant.placeholderFontSize ? props.variant.placeholderFontSize + 'px' : '14px'; }, function (props) { return props.variant.placeholderFontWeight ? props.variant.placeholderFontWeight : '400'; }, function (props) { return props.variant.placeholderFontDecoration ? props.variant.placeholderFontDecoration : 'normal'; }, function (props) { return props.variant.placeholderColor ? props.variant.placeholderColor : '#000000'; }, function (props) { return props.variant.isDisabled ? 0.5 : 1; });
export var TextAreaWidget = styled.textarea(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    width: 346px;\n    min-height: 56px;\n    padding: 16px 16px 0 40px;\n    gap: 16px;\n    outline: none;\n    font-style: normal;\n    text-transform: capitalize;\n    line-height: normal;\n    transition: 0.5s all ease-out;\n    border-width: ", ";\n    border-style: ", ";\n    border-color: ", ";\n    font-family: ", ";\n    color: ", ";\n    background: ", ";\n    border-radius: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    opacity: ", ";\n    cursor: ", ";\n\n    &:focus {\n        outline: none;\n        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);\n        color: ", ";\n        border-width: ", ";\n        border-style: ", ";\n        border-color: ", ";\n        background: ", ";\n    }\n\n    &::placeholder,  &::-webkit-textarea-placeholder {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: ", ";\n        text-decoration: ", ";\n        color: ", ";\n        opacity: ", ";\n        margin: 8px;\n    }\n    \n    &:-ms-textarea-placeholder {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: ", ";\n        text-decoration: ", ";\n        color: ", ";\n        opacity: ", ";\n        margin: 8px;\n    }\n\n    &[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button { \n        -webkit-appearance: none; \n        margin: 0; \n    }\n\n"], ["\n    display: flex;\n    align-items: center;\n    width: 346px;\n    min-height: 56px;\n    padding: 16px 16px 0 40px;\n    gap: 16px;\n    outline: none;\n    font-style: normal;\n    text-transform: capitalize;\n    line-height: normal;\n    transition: 0.5s all ease-out;\n    border-width: ", ";\n    border-style: ", ";\n    border-color: ", ";\n    font-family: ", ";\n    color: ", ";\n    background: ", ";\n    border-radius: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    opacity: ", ";\n    cursor: ", ";\n\n    &:focus {\n        outline: none;\n        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);\n        color: ", ";\n        border-width: ", ";\n        border-style: ", ";\n        border-color: ", ";\n        background: ", ";\n    }\n\n    &::placeholder,  &::-webkit-textarea-placeholder {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: ", ";\n        text-decoration: ", ";\n        color: ", ";\n        opacity: ", ";\n        margin: 8px;\n    }\n    \n    &:-ms-textarea-placeholder {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: ", ";\n        text-decoration: ", ";\n        color: ", ";\n        opacity: ", ";\n        margin: 8px;\n    }\n\n    &[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button { \n        -webkit-appearance: none; \n        margin: 0; \n    }\n\n"])), function (props) { return props.variant.borderWidth ? props.variant.borderWidth + 'px' : '1px'; }, function (props) { return props.variant.borderType ? props.variant.borderType : 'solid'; }, function (props) { return props.variant.isSuccess ? '#00B87C' : props.variant.isError ? '#ff3333' : '#00000050'; }, function (props) { return props.variant.fontFamily ? props.variant.fontFamily : 'Nunito Sans'; }, function (props) { return props.variant.color ? props.variant.color : '#000000'; }, function (props) { return props.variant.backgroundColor ? props.variant.backgroundColor : '#00000050'; }, function (props) { return props.variant.borderRadius ? props.variant.borderRadius + 'px' : '4px'; }, function (props) { return props.variant.fontSize ? props.variant.fontSize + 'px' : '16px'; }, function (props) { return props.variant.fontWeight ? props.variant.fontWeight : '400'; }, function (props) { return props.variant.isDisabled ? 0.5 : 1; }, function (props) { return props.variant.isDisabled ? 'not-allowed' : 'auto'; }, function (props) { return props.variant.isSuccess ? '#00B87C' : props.variant.isError ? '#ff3333' : props.variant.borderColor ? props.variant.borderColor : '#E0E0E0'; }, function (props) { return props.variant.borderWidth ? props.variant.borderWidth + "px" : '1px'; }, function (props) { return props.variant.borderType ? props.variant.borderType : 'solid'; }, function (props) { return props.variant.isSuccess ? '#00B87C' : props.variant.isError ? '#ff3333' : props.variant.borderColor ? props.variant.borderColor : '#E0E0E0'; }, function (props) { return props.variant.borderColor ? props.variant.borderColor + '20' : '#00000050'; }, function (props) { return props.variant.placeholderFontFamily ? props.variant.placeholderFontFamily : 'Nunito Sans'; }, function (props) { return props.variant.placeholderFontSize ? props.variant.placeholderFontSize + 'px' : '14px'; }, function (props) { return props.variant.placeholderFontWeight ? props.variant.placeholderFontWeight : '400'; }, function (props) { return props.variant.placeholderFontDecoration ? props.variant.placeholderFontDecoration : 'normal'; }, function (props) { return props.variant.placeholderColor ? props.variant.placeholderColor : '#000000'; }, function (props) { return props.variant.isDisabled ? 0.5 : 1; }, function (props) { return props.variant.placeholderFontFamily ? props.variant.placeholderFontFamily : 'Nunito Sans'; }, function (props) { return props.variant.placeholderFontSize ? props.variant.placeholderFontSize + 'px' : '14px'; }, function (props) { return props.variant.placeholderFontWeight ? props.variant.placeholderFontWeight : '400'; }, function (props) { return props.variant.placeholderFontDecoration ? props.variant.placeholderFontDecoration : 'normal'; }, function (props) { return props.variant.placeholderColor ? props.variant.placeholderColor : '#000000'; }, function (props) { return props.variant.isDisabled ? 0.5 : 1; });
var templateObject_1, templateObject_2, templateObject_3;