Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@raiadrogasil/pulso-react-components

Package Overview
Dependencies
Maintainers
2
Versions
101
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@raiadrogasil/pulso-react-components - npm Package Compare versions

Comparing version 2.3.1-alpha.2 to 2.3.1-alpha.4

2

package.json

@@ -8,3 +8,3 @@ {

},
"version": "2.3.1-alpha.2",
"version": "2.3.1-alpha.4",
"main": "./index.js",

@@ -11,0 +11,0 @@ "keywords": [

@@ -11,3 +11,5 @@ "use strict";

var styled_components_1 = __importDefault(require("styled-components"));
var TextFieldStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &.pulso-text-field {\n display: inline-block;\n position: relative;\n box-sizing: border-box;\n text-align: left;\n width: 100%;\n\n .pulso-text-field__label {\n transition-duration: 0.6s;\n transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\n position: absolute;\n top: ", ";\n left: 0;\n font-family: ", ";\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n padding-left: calc(\n ", " -\n ", "\n );\n\n &:hover {\n color: ", ";\n }\n\n .label__text {\n background-color: ", ";\n display: inline-block;\n padding: 0 ", ";\n }\n @media (max-width: 767px) {\n font-size: ", ";\n }\n }\n\n .pulso-text-field__label.pulso-text-field__label--field-has-value {\n top: calc(-", " / 2);\n left: 0;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n }\n\n .pulso-text-field__input {\n text-align: left;\n font-weight: ", ";\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n padding: ", "\n calc(\n ", " +\n ", " + 24px\n )\n ", "\n ", ";\n border-color: ", ";\n border-width: ", ";\n border-radius: ", ";\n border-style: solid;\n min-width: 320px;\n box-sizing: border-box;\n background: transparent;\n outline: none;\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n -webkit-appearance: none;\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n -webkit-box-shadow: 0 0 0 30px\n ", " inset !important;\n -webkit-text-fill-color: ", "; !important;\n }\n\n @media (max-width: 767px) {\n font-size: ", ";\n }\n }\n\n .pulso-text-field__input:hover {\n border-color: ", ";\n color: ", ";\n }\n\n .pulso-text-field__input:focus + .pulso-text-field__label {\n top: calc(-", " / 2);\n left: 0;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n }\n\n .pulso-text-field__input:focus {\n color: ", ";\n border-color: ", ";\n border-width: ", ";\n font-weight: ", ";\n }\n\n .pulso-text-field__icon {\n transition-duration: 0.6s;\n transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\n color: ", ";\n display: inline-block;\n position: absolute;\n top: ", ";\n left: 0;\n padding: ", ";\n }\n .pulso-text-field__input + .pulso-text-field__icon {\n padding: ", "\n ", "\n ", "\n ", " +\n ", ";\n }\n\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__icon,\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon,\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__icon,\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon {\n color: ", ";\n }\n .pulso-text-field__reset {\n transition-duration: 0.6s;\n transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\n background: none;\n border: none;\n display: inline-block;\n position: absolute;\n top: 0;\n right: 0;\n padding: 0;\n padding: ", ";\n height: 56px;\n color: ", ";\n outline: none;\n }\n\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__reset {\n display: block;\n }\n\n .pulso-text-field__error {\n display: inline-block;\n position: absolute;\n top: 0;\n right: 0;\n padding: ", ";\n height: 56px;\n color: ", ";\n }\n\n .pulso-text-field__error + .pulso-text-field__reset {\n right: calc(\n ", " +\n ", " + 24px\n );\n }\n\n .pulso-text-field__helper {\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n margin: ", " 0 0 0;\n padding: 0 ", ";\n }\n\n &--leading-icon {\n .pulso-text-field__input {\n padding: ", "\n calc(\n ", " +\n ", " + 24px\n )\n ", "\n calc(\n ", " +\n ", " + 24px\n );\n }\n .pulso-text-field__label {\n left: calc(\n 24px + ", " -\n ", " +\n ", "\n );\n }\n .pulso-text-field__label.pulso-text-field__label--field-has-value {\n left: 0;\n }\n }\n\n &--inverse .pulso-text-field__input {\n border-color: ", ";\n }\n &--inverse .pulso-text-field__input:focus,\n &--inverse .pulso-text-field__input:focus:hover {\n border-color: ", ";\n }\n &--inverse .pulso-text-field__input:hover {\n border-color: ", ";\n }\n\n &--inverse .pulso-text-field__input,\n &--inverse .pulso-text-field__label,\n &--inverse .pulso-text-field__label.pulso-text-field__label,\n &--inverse .pulso-text-field__reset,\n &--inverse .pulso-text-field__helper,\n &--inverse .pulso-text-field__icon {\n color: ", ";\n }\n &--inverse .pulso-text-field__input:hover,\n &--inverse .pulso-text-field__input:hover + .pulso-text-field__label,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__reset,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__helper,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__helper\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__helper,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__icon,\n &--inverse .pulso-text-field__input:focus,\n &--inverse .pulso-text-field__input:focus + .pulso-text-field__label,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__reset,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__helper,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__helper\n .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__helper,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__icon {\n color: ", ";\n }\n &--inverse .pulso-text-field__input:focus + .pulso-text-field__label,\n &--inverse .pulso-text-field__input:focus:hover + .pulso-text-field__label {\n color: ", ";\n }\n\n &--error .pulso-text-field__helper,\n &--error .pulso-text-field__reset,\n &--error .pulso-text-field__label,\n &--error .pulso-text-field__label.pulso-text-field__label--field-has-value {\n color: ", ";\n }\n\n &--error .pulso-text-field__input {\n border-color: ", ";\n padding: ", "\n calc(\n ", " +\n ", " + 24px +\n ", " +\n ", " + 24px\n )\n ", "\n ", ";\n }\n\n &--error.pulso-text-field--leading-icon .pulso-text-field__input {\n padding: ", "\n calc(\n ", " +\n ", " + 24px +\n ", " +\n ", " + 24px\n )\n ", "\n calc(\n ", " + 24px +\n ", "\n );\n }\n\n &--error#{&}--leading-icon .pulso-text-field__input {\n border-color: ", ";\n padding: ", "\n calc(\n ", " +\n ", " + 24px +\n ", " +\n ", " + 24px\n )\n ", "\n calc(\n ", " +\n ", " + 24px\n );\n }\n\n .pulso-text-field__input:disabled,\n .pulso-text-field__input:disabled:hover {\n border-color: ", ";\n }\n\n .pulso-text-field__input:disabled,\n .pulso-text-field__input:disabled + .pulso-text-field__label,\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__helper,\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__icon,\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon {\n color: ", ";\n }\n\n &--inverse .pulso-text-field__input:disabled {\n border-color: ", ";\n }\n\n &--inverse .pulso-text-field__input:disabled,\n &--inverse .pulso-text-field__input:disabled + .pulso-text-field__label,\n &--inverse\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__helper,\n &--inverse\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__icon {\n color: ", ";\n }\n }\n"], ["\n &.pulso-text-field {\n display: inline-block;\n position: relative;\n box-sizing: border-box;\n text-align: left;\n width: 100%;\n\n .pulso-text-field__label {\n transition-duration: 0.6s;\n transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\n position: absolute;\n top: ", ";\n left: 0;\n font-family: ", ";\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n padding-left: calc(\n ", " -\n ", "\n );\n\n &:hover {\n color: ", ";\n }\n\n .label__text {\n background-color: ", ";\n display: inline-block;\n padding: 0 ", ";\n }\n @media (max-width: 767px) {\n font-size: ", ";\n }\n }\n\n .pulso-text-field__label.pulso-text-field__label--field-has-value {\n top: calc(-", " / 2);\n left: 0;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n }\n\n .pulso-text-field__input {\n text-align: left;\n font-weight: ", ";\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n padding: ", "\n calc(\n ", " +\n ", " + 24px\n )\n ", "\n ", ";\n border-color: ", ";\n border-width: ", ";\n border-radius: ", ";\n border-style: solid;\n min-width: 320px;\n box-sizing: border-box;\n background: transparent;\n outline: none;\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n -webkit-appearance: none;\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n -webkit-box-shadow: 0 0 0 30px\n ", " inset !important;\n -webkit-text-fill-color: ", "; !important;\n }\n\n @media (max-width: 767px) {\n font-size: ", ";\n }\n }\n\n .pulso-text-field__input:hover {\n border-color: ", ";\n color: ", ";\n }\n\n .pulso-text-field__input:focus + .pulso-text-field__label {\n top: calc(-", " / 2);\n left: 0;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n }\n\n .pulso-text-field__input:focus {\n color: ", ";\n border-color: ", ";\n border-width: ", ";\n font-weight: ", ";\n }\n\n .pulso-text-field__icon {\n transition-duration: 0.6s;\n transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\n color: ", ";\n display: inline-block;\n position: absolute;\n top: ", ";\n left: 0;\n padding: ", ";\n }\n .pulso-text-field__input + .pulso-text-field__icon {\n padding: ", "\n ", "\n ", "\n ", " +\n ", ";\n }\n\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__icon,\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon,\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__icon,\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon {\n color: ", ";\n }\n .pulso-text-field__reset {\n transition-duration: 0.6s;\n transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\n background: none;\n border: none;\n display: inline-block;\n position: absolute;\n top: 0;\n right: 0;\n padding: 0;\n padding: ", ";\n height: 56px;\n color: ", ";\n outline: none;\n }\n\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__reset {\n display: block;\n }\n\n .pulso-text-field__error {\n display: inline-block;\n position: absolute;\n top: 0;\n right: 0;\n padding: ", ";\n height: 56px;\n color: ", ";\n }\n\n .pulso-text-field__error + .pulso-text-field__reset {\n right: calc(\n ", " +\n ", " + 24px\n );\n }\n\n .pulso-text-field__helper {\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n margin: ", " 0 0 0;\n padding: 0 ", ";\n }\n\n &--leading-icon {\n .pulso-text-field__input {\n padding: ", "\n calc(\n ", " +\n ", " + 24px\n )\n ", "\n calc(\n ", " +\n ", " + 24px\n );\n }\n .pulso-text-field__label {\n left: calc(\n 24px + ", " -\n ", " +\n ", "\n );\n }\n .pulso-text-field__label.pulso-text-field__label--field-has-value {\n left: 0;\n }\n }\n\n &--inverse .pulso-text-field__input {\n border-color: ", ";\n }\n &--inverse .pulso-text-field__input:focus,\n &--inverse .pulso-text-field__input:focus:hover {\n border-color: ", ";\n }\n &--inverse .pulso-text-field__input:hover {\n border-color: ", ";\n }\n\n &--inverse .pulso-text-field__input,\n &--inverse .pulso-text-field__label,\n &--inverse .pulso-text-field__label.pulso-text-field__label,\n &--inverse .pulso-text-field__reset,\n &--inverse .pulso-text-field__helper,\n &--inverse .pulso-text-field__icon {\n color: ", ";\n }\n &--inverse .pulso-text-field__input:hover,\n &--inverse .pulso-text-field__input:hover + .pulso-text-field__label,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__reset,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__helper,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__helper\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__helper,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__icon,\n &--inverse .pulso-text-field__input:focus,\n &--inverse .pulso-text-field__input:focus + .pulso-text-field__label,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__reset,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__helper,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__helper\n .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__helper,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__icon {\n color: ", ";\n }\n &--inverse .pulso-text-field__input:focus + .pulso-text-field__label,\n &--inverse .pulso-text-field__input:focus:hover + .pulso-text-field__label {\n color: ", ";\n }\n\n &--error .pulso-text-field__helper,\n &--error .pulso-text-field__reset,\n &--error .pulso-text-field__label,\n &--error .pulso-text-field__label.pulso-text-field__label--field-has-value {\n color: ", ";\n }\n\n &--error .pulso-text-field__input {\n border-color: ", ";\n padding: ", "\n calc(\n ", " +\n ", " + 24px +\n ", " +\n ", " + 24px\n )\n ", "\n ", ";\n }\n\n &--error.pulso-text-field--leading-icon .pulso-text-field__input {\n padding: ", "\n calc(\n ", " +\n ", " + 24px +\n ", " +\n ", " + 24px\n )\n ", "\n calc(\n ", " + 24px +\n ", "\n );\n }\n\n &--error#{&}--leading-icon .pulso-text-field__input {\n border-color: ", ";\n padding: ", "\n calc(\n ", " +\n ", " + 24px +\n ", " +\n ", " + 24px\n )\n ", "\n calc(\n ", " +\n ", " + 24px\n );\n }\n\n .pulso-text-field__input:disabled,\n .pulso-text-field__input:disabled:hover {\n border-color: ", ";\n }\n\n .pulso-text-field__input:disabled,\n .pulso-text-field__input:disabled + .pulso-text-field__label,\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__helper,\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__icon,\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon {\n color: ", ";\n }\n\n &--inverse .pulso-text-field__input:disabled {\n border-color: ", ";\n }\n\n &--inverse .pulso-text-field__input:disabled,\n &--inverse .pulso-text-field__input:disabled + .pulso-text-field__label,\n &--inverse\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__helper,\n &--inverse\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__icon {\n color: ", ";\n }\n }\n"])), function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.fontFamilyGlobal; }, function (props) { return props.theme.colorBackground500; }, function (props) { return props.theme.fontSizeMicro; }, function (props) { return props.theme.lineHeightLarge; }, function (props) { return props.theme.fontWeightRegular; }, function (props) { return props.theme.spacingInlineTiny; }, function (props) { return props.theme.spacingInlineNano; }, function (props) { return props.theme.colorBackground700; }, function (props) { return props.theme[props.backgroundColorName]; }, function (props) { return props.theme.spacingInlineNano; }, function (props) { return props.theme.fontSizeTiny; }, function (props) { return props.theme.fontSizeNano; }, function (props) { return props.theme.colorBackground700; }, function (props) { return props.theme.fontSizeNano; }, function (props) { return props.theme.globalFontWeightMedium; }, function (props) { return props.theme.globalFontWeightRegular; }, function (props) { return props.theme.fontSizeMicro; }, function (props) { return props.theme.fontFamilyGlobal; }, function (props) { return props.theme.lineHeightLarge; }, function (props) { return props.theme.colorBackground500; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.colorBackground500; }, function (props) { return props.theme.borderWidthHairline; }, function (props) { return props.theme.borderRadiusRounded; }, function (props) { return props.theme[props.backgroundColorName]; }, function (props) {
var TextFieldStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &.pulso-text-field {\n display: inline-block;\n position: relative;\n box-sizing: border-box;\n text-align: left;\n width: 100%;\n\n .pulso-text-field__label {\n transition-duration: 0.6s;\n transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\n position: absolute;\n top: ", ";\n left: 0;\n font-family: ", ";\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n padding-left: calc(\n ", " -\n ", "\n );\n\n &:hover {\n color: ", ";\n }\n\n .label__text {\n background-color: ", ";\n display: inline-block;\n padding: 0 ", ";\n }\n @media (max-width: 767px) {\n font-size: ", ";\n }\n }\n\n .pulso-text-field__label.pulso-text-field__label--field-has-value {\n top: calc(-", " / 2);\n left: 0;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n }\n\n .pulso-text-field__input {\n text-align: left;\n font-weight: ", ";\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n padding: ", "\n calc(\n ", " +\n ", " + 24px\n )\n ", "\n ", ";\n border-color: ", ";\n border-width: ", ";\n border-radius: ", ";\n border-style: solid;\n min-width: 320px;\n box-sizing: border-box;\n background: transparent;\n outline: none;\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n -webkit-appearance: none;\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n -webkit-box-shadow: 0 0 0 30px\n ", " inset !important;\n -webkit-text-fill-color: ", "; !important;\n }\n\n @media (max-width: 767px) {\n font-size: ", ";\n }\n }\n\n .pulso-text-field__input:hover {\n border-color: ", ";\n color: ", ";\n }\n\n .pulso-text-field__input:focus + .pulso-text-field__label {\n top: calc(-", " / 2);\n left: 0;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n }\n\n .pulso-text-field__input:focus {\n color: ", ";\n border-color: ", ";\n border-width: ", ";\n font-weight: ", ";\n }\n\n .pulso-text-field__icon {\n transition-duration: 0.6s;\n transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\n color: ", ";\n display: inline-block;\n position: absolute;\n top: ", ";\n left: 0;\n padding: ", ";\n }\n .pulso-text-field__input + .pulso-text-field__icon {\n padding: ", "\n ", "\n ", "\n ", " +\n ", ";\n }\n\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__icon,\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon,\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__icon,\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon {\n color: ", ";\n }\n .pulso-text-field__reset {\n transition-duration: 0.6s;\n transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\n background: none;\n border: none;\n display: inline-block;\n position: absolute;\n top: 0;\n right: 0;\n padding: 0;\n padding: ", ";\n height: 56px;\n color: ", ";\n outline: none;\n }\n\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__reset {\n display: block;\n }\n\n .pulso-text-field__error {\n display: inline-block;\n position: absolute;\n top: 0;\n right: 0;\n padding: ", ";\n height: 56px;\n color: ", ";\n }\n\n .pulso-text-field__error + .pulso-text-field__reset {\n right: calc(\n ", " +\n ", " + 24px\n );\n }\n\n .pulso-text-field__helper {\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n margin: ", " 0 0 0;\n padding: 0 ", ";\n }\n\n &--leading-icon {\n .pulso-text-field__input {\n padding: ", "\n calc(\n ", " +\n ", " + 24px\n )\n ", "\n calc(\n ", " +\n ", " + 24px\n );\n }\n .pulso-text-field__label {\n left: calc(\n 24px + ", " -\n ", " +\n ", "\n );\n }\n .pulso-text-field__label.pulso-text-field__label--field-has-value {\n left: 0;\n }\n }\n\n &--inverse .pulso-text-field__input {\n border-color: ", ";\n }\n &--inverse .pulso-text-field__input:focus,\n &--inverse .pulso-text-field__input:focus:hover {\n border-color: ", ";\n }\n &--inverse .pulso-text-field__input:hover {\n border-color: ", ";\n }\n\n &--inverse .pulso-text-field__input,\n &--inverse .pulso-text-field__label,\n &--inverse .pulso-text-field__label.pulso-text-field__label,\n &--inverse .pulso-text-field__reset,\n &--inverse .pulso-text-field__helper,\n &--inverse .pulso-text-field__icon {\n color: ", ";\n }\n &--inverse .pulso-text-field__input:hover,\n &--inverse .pulso-text-field__input:hover + .pulso-text-field__label,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__reset,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__helper,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__helper\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__helper,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__icon,\n &--inverse .pulso-text-field__input:focus,\n &--inverse .pulso-text-field__input:focus + .pulso-text-field__label,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__reset,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__helper,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__helper\n .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__helper,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__icon {\n color: ", ";\n }\n &--inverse .pulso-text-field__input:focus + .pulso-text-field__label,\n &--inverse .pulso-text-field__input:focus:hover + .pulso-text-field__label {\n color: ", ";\n }\n\n &--error .pulso-text-field__helper,\n &--error .pulso-text-field__reset,\n &--error .pulso-text-field__label,\n &--error .pulso-text-field__label.pulso-text-field__label--field-has-value {\n color: ", ";\n }\n\n &--error .pulso-text-field__input {\n border-color: ", ";\n padding: ", "\n calc(\n ", " +\n ", " + 24px +\n ", " +\n ", " + 24px\n )\n ", "\n ", ";\n }\n\n &--error.pulso-text-field--leading-icon .pulso-text-field__input {\n padding: ", "\n calc(\n ", " +\n ", " + 24px +\n ", " +\n ", " + 24px\n )\n ", "\n calc(\n ", " + 24px +\n ", "\n );\n }\n\n &--error#{&}--leading-icon .pulso-text-field__input {\n border-color: ", ";\n padding: ", "\n calc(\n ", " +\n ", " + 24px +\n ", " +\n ", " + 24px\n )\n ", "\n calc(\n ", " +\n ", " + 24px\n );\n }\n\n .pulso-text-field__input:disabled,\n .pulso-text-field__input:disabled:hover {\n border-color: ", ";\n }\n\n .pulso-text-field__input:disabled,\n .pulso-text-field__input:disabled + .pulso-text-field__label,\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__helper,\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__icon,\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon {\n color: ", ";\n }\n\n &--inverse .pulso-text-field__input:disabled {\n border-color: ", ";\n }\n\n &--inverse .pulso-text-field__input:disabled,\n &--inverse .pulso-text-field__input:disabled + .pulso-text-field__label,\n &--inverse\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__helper,\n &--inverse\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__icon {\n color: ", ";\n }\n }\n"], ["\n &.pulso-text-field {\n display: inline-block;\n position: relative;\n box-sizing: border-box;\n text-align: left;\n width: 100%;\n\n .pulso-text-field__label {\n transition-duration: 0.6s;\n transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\n position: absolute;\n top: ", ";\n left: 0;\n font-family: ", ";\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n padding-left: calc(\n ", " -\n ", "\n );\n\n &:hover {\n color: ", ";\n }\n\n .label__text {\n background-color: ", ";\n display: inline-block;\n padding: 0 ", ";\n }\n @media (max-width: 767px) {\n font-size: ", ";\n }\n }\n\n .pulso-text-field__label.pulso-text-field__label--field-has-value {\n top: calc(-", " / 2);\n left: 0;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n }\n\n .pulso-text-field__input {\n text-align: left;\n font-weight: ", ";\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n padding: ", "\n calc(\n ", " +\n ", " + 24px\n )\n ", "\n ", ";\n border-color: ", ";\n border-width: ", ";\n border-radius: ", ";\n border-style: solid;\n min-width: 320px;\n box-sizing: border-box;\n background: transparent;\n outline: none;\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n -webkit-appearance: none;\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n -webkit-box-shadow: 0 0 0 30px\n ", " inset !important;\n -webkit-text-fill-color: ", "; !important;\n }\n\n @media (max-width: 767px) {\n font-size: ", ";\n }\n }\n\n .pulso-text-field__input:hover {\n border-color: ", ";\n color: ", ";\n }\n\n .pulso-text-field__input:focus + .pulso-text-field__label {\n top: calc(-", " / 2);\n left: 0;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n }\n\n .pulso-text-field__input:focus {\n color: ", ";\n border-color: ", ";\n border-width: ", ";\n font-weight: ", ";\n }\n\n .pulso-text-field__icon {\n transition-duration: 0.6s;\n transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\n color: ", ";\n display: inline-block;\n position: absolute;\n top: ", ";\n left: 0;\n padding: ", ";\n }\n .pulso-text-field__input + .pulso-text-field__icon {\n padding: ", "\n ", "\n ", "\n ", " +\n ", ";\n }\n\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__icon,\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon,\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__icon,\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon {\n color: ", ";\n }\n .pulso-text-field__reset {\n transition-duration: 0.6s;\n transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\n background: none;\n border: none;\n display: inline-block;\n position: absolute;\n top: 0;\n right: 0;\n padding: 0;\n padding: ", ";\n height: 56px;\n color: ", ";\n outline: none;\n }\n\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__reset {\n display: block;\n }\n\n .pulso-text-field__error {\n display: inline-block;\n position: absolute;\n top: 0;\n right: 0;\n padding: ", ";\n height: 56px;\n color: ", ";\n }\n\n .pulso-text-field__error + .pulso-text-field__reset {\n right: calc(\n ", " +\n ", " + 24px\n );\n }\n\n .pulso-text-field__helper {\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n margin: ", " 0 0 0;\n padding: 0 ", ";\n }\n\n &--leading-icon {\n .pulso-text-field__input {\n padding: ", "\n calc(\n ", " +\n ", " + 24px\n )\n ", "\n calc(\n ", " +\n ", " + 24px\n );\n }\n .pulso-text-field__label {\n left: calc(\n 24px + ", " -\n ", " +\n ", "\n );\n }\n .pulso-text-field__label.pulso-text-field__label--field-has-value {\n left: 0;\n }\n }\n\n &--inverse .pulso-text-field__input {\n border-color: ", ";\n }\n &--inverse .pulso-text-field__input:focus,\n &--inverse .pulso-text-field__input:focus:hover {\n border-color: ", ";\n }\n &--inverse .pulso-text-field__input:hover {\n border-color: ", ";\n }\n\n &--inverse .pulso-text-field__input,\n &--inverse .pulso-text-field__label,\n &--inverse .pulso-text-field__label.pulso-text-field__label,\n &--inverse .pulso-text-field__reset,\n &--inverse .pulso-text-field__helper,\n &--inverse .pulso-text-field__icon {\n color: ", ";\n }\n &--inverse .pulso-text-field__input:hover,\n &--inverse .pulso-text-field__input:hover + .pulso-text-field__label,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__reset,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__helper,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__helper\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__helper,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:hover\n + .pulso-text-field__label\n + .pulso-text-field__icon,\n &--inverse .pulso-text-field__input:focus,\n &--inverse .pulso-text-field__input:focus + .pulso-text-field__label,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__reset,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__helper,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__helper\n .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__reset\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__helper,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:focus\n + .pulso-text-field__label\n + .pulso-text-field__icon {\n color: ", ";\n }\n &--inverse .pulso-text-field__input:focus + .pulso-text-field__label,\n &--inverse .pulso-text-field__input:focus:hover + .pulso-text-field__label {\n color: ", ";\n }\n\n &--error .pulso-text-field__helper,\n &--error .pulso-text-field__reset,\n &--error .pulso-text-field__label,\n &--error .pulso-text-field__label.pulso-text-field__label--field-has-value {\n color: ", ";\n }\n\n &--error .pulso-text-field__input {\n border-color: ", ";\n padding: ", "\n calc(\n ", " +\n ", " + 24px +\n ", " +\n ", " + 24px\n )\n ", "\n ", ";\n }\n\n &--error.pulso-text-field--leading-icon .pulso-text-field__input {\n padding: ", "\n calc(\n ", " +\n ", " + 24px +\n ", " +\n ", " + 24px\n )\n ", "\n calc(\n ", " + 24px +\n ", "\n );\n }\n\n &--error#{&}--leading-icon .pulso-text-field__input {\n border-color: ", ";\n padding: ", "\n calc(\n ", " +\n ", " + 24px +\n ", " +\n ", " + 24px\n )\n ", "\n calc(\n ", " +\n ", " + 24px\n );\n }\n\n .pulso-text-field__input:disabled,\n .pulso-text-field__input:disabled:hover {\n border-color: ", ";\n }\n\n .pulso-text-field__input:disabled,\n .pulso-text-field__input:disabled + .pulso-text-field__label,\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__helper,\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__icon,\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon {\n color: ", ";\n }\n\n &--inverse .pulso-text-field__input:disabled {\n border-color: ", ";\n }\n\n &--inverse .pulso-text-field__input:disabled,\n &--inverse .pulso-text-field__input:disabled + .pulso-text-field__label,\n &--inverse\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__helper,\n &--inverse\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__helper\n + .pulso-text-field__icon,\n &--inverse\n .pulso-text-field__input:disabled\n + .pulso-text-field__label\n + .pulso-text-field__icon {\n color: ", ";\n }\n }\n"])), function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.fontFamilyGlobal; }, function (props) { return props.theme.colorBackground500; }, function (props) { return props.theme.fontSizeMicro; }, function (props) { return props.theme.lineHeightLarge; }, function (props) { return props.theme.fontWeightRegular; }, function (props) { return props.theme.spacingInlineTiny; }, function (props) { return props.theme.spacingInlineNano; }, function (props) { return props.theme.colorBackground700; }, function (props) { return props.theme[props.backgroundColorName]; }, function (props) { return props.theme.spacingInlineNano; }, function (props) { return props.theme.fontSizeTiny; }, function (props) { return props.theme.fontSizeNano; }, function (props) { return props.theme.colorBackground700; }, function (props) { return props.theme.fontSizeNano; }, function (props) { return props.theme.globalFontWeightMedium; }, function (props) { return props.theme.globalFontWeightRegular; }, function (props) { return props.theme.fontSizeMicro; }, function (props) { return props.theme.fontFamilyGlobal; }, function (props) { return props.theme.lineHeightLarge; }, function (props) { return props.theme.colorBackground500; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.colorBackground500; }, function (props) { return props.theme.borderWidthHairline; }, function (props) { return props.theme.borderRadiusRounded; }, function (props) {
return props.theme["".concat(props.backgroundColorName)];
}, function (props) {
return props.theme.colorNeutralMedium;

@@ -14,0 +16,0 @@ }, function (props) { return props.theme.fontSizeTiny; }, function (props) { return props.theme.colorBackground700; }, function (props) { return props.theme.colorBackground700; }, function (props) { return props.theme.fontSizeNano; }, function (props) { return props.theme.colorBrand500; }, function (props) { return props.theme.fontSizeNano; }, function (props) { return props.theme.globalFontWeightMedium; }, function (props) { return props.theme.colorBackground700; }, function (props) { return props.theme.colorBrand500; }, function (props) { return props.theme.borderWidthThin; }, function (props) { return props.theme.globalFontWeightRegular; }, function (props) { return props.theme.colorBackground500; }, function (props) { return props.theme.borderWidthHairline; }, function (props) { return props.theme.spacingInsetTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.colorBackground700; }, function (props) { return props.theme.spacingInsetTiny; }, function (props) { return props.theme.colorBackground500; }, function (props) { return props.theme.spacingInsetTiny; }, function (props) { return props.theme.colorFeedbackNegative500; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.colorBackground500; }, function (props) { return props.theme.fontFamilyGlobal; }, function (props) { return props.theme.fontSizeNano; }, function (props) { return props.theme.globalFontWeightMedium; }, function (props) { return props.theme.globalLetterSpacingTiny; }, function (props) { return props.theme.spacingStackNano; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingInlineTiny; }, function (props) { return props.theme.spacingInlineNano; }, function (props) { return props.theme.borderWidthHairline; }, function (props) { return props.theme.colorBackground300; }, function (props) { return props.theme.colorBrand500; }, function (props) { return props.theme.colorBackgroundWhite; }, function (props) { return props.theme.colorBackground300; }, function (props) { return props.theme.colorBackgroundWhite; }, function (props) { return props.theme.colorBrand500; }, function (props) { return props.theme.colorFeedbackNegative500; }, function (props) { return props.theme.colorFeedbackNegative500; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.colorFeedbackNegative500; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.colorBackground300; }, function (props) { return props.theme.colorBackground300; }, function (props) { return props.theme.colorBackground700; }, function (props) { return props.theme.colorBackground700; });

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc