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

Comparing version 0.2.0 to 1.0.0

Counter/index.d.ts

@@ -0,53 +1,175 @@
+import React from "react";
 export interface Props {
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     autocomplete?: "on" | "off";
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     autofocus?: boolean;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     autosave?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     accesskey?: string;
+    /**
+     * Essa Prop inclui um atributo data-collect com o valor configurado no input.
+     */
+    dataCollect?: string;
+    /**
+     * Essa Prop inclui um atributo data-collect com o valor configurado no botão de diminuir.
+     */
     dataCollectDecrease?: string;
+    /**
+     * Essa Prop inclui um atributo data-collect com o valor configurado no botão de aumentar.
+     */
     dataCollectIncrease?: string;
+    /**
+     * Essa Prop inclui um atributo data-collect-info com o valor configurado no input.
+     */
+    dataCollectInfo?: string;
+    /**
+     * Essa Prop inclui um atributo data-collect-info com o valor configurado no botão de diminuir.
+     */
     dataCollectInfoDecrease?: string;
+    /**
+     * Essa Prop inclui um atributo data-collect-info com o valor configurado no botão de aumentar.
+     */
     dataCollectInfoIncrease?: string;
+    /**
+     * Essa Prop inclui um atributo data-qa com o valor configurado no input.
+     */
+    dataQA?: string;
+    /**
+     * Essa Prop inclui um atributo data-qa com o valor configurado no botão de diminuir.
+     */
     dataQADecrease?: string;
+    /**
+     * Essa Prop inclui um atributo data-qa com o valor configurado no botão de aumentar.
+     */
     dataQAIncrease?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     disabled?: boolean;
+    /**
+     * Habilita o estilo de erro do componente.
+     */
+    error?: boolean;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     form?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     formaction?: string;
+    /**
+     * Incluí um texto helper ao componente.
+     */
+    helperText: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     id: string;
-    inputmode?: "email" | "search" | "tel" | "text" | "url" | "none" | "numeric" | "decimal" | undefined;
+    /**
+     * Habilita o estilo inverse do componente.
+     */
     inverse?: boolean;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     list?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     max?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     maxlength?: number;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     min?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     minlength?: number;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     multiple?: boolean;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     name: string;
+    /**
+     * Adiciona uma função de callback à mudança do componente.
+     */
     onChange?: Function;
+    /**
+     * Adiciona uma função de callback ao clique do botão de diminuir do componente.
+     */
     onDecrease?: Function;
+    /**
+     * Adiciona uma função de callback ao clique do botão de aumentar do componente.
+     */
     onIncrease?: Function;
-    pattern?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     readonly?: boolean;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     required?: boolean;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     size?: number;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     spellcheck?: boolean;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     src?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     step?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     tabindex?: number;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     value?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     width?: string;
 }
 /**
- * Para utlizar esse componente, deve-se importar:
+ * Para utlizar esse componente, deve-se importar o componente e o componente de tema:
  *
  * ```
- * import "@raiadrogasil/pulso-styles/css/<marca>/components/icon.css";
+ * import Counter from "@raiadrogasil/pulso-react-components/Counter";
+ * import ThemeProvider from "@raiadrogasil/pulso-react-components/ThemeProvider";
+ * ```
  *
- * import "@raiadrogasil/pulso-styles/css/<marca>/components/button.css";
+ * ou
  *
- * import "@raiadrogasil/pulso-styles/css/<marca>/components/counter.css";
- *
- * import Counter from "@raiadrogasil/pulso-react-components/Counter";
  * ```
+ * import {ThemeProvider, Counter} from "@raiadrogasil/pulso-react-components/";
+ * ```
  */
-declare function Counter({ accesskey, autocomplete, autofocus, autosave, dataCollectDecrease, dataCollectIncrease, dataCollectInfoDecrease, dataCollectInfoIncrease, dataQADecrease, dataQAIncrease, disabled, form, formaction, id, inputmode, inverse, list, max, maxlength, min, minlength, multiple, name, onChange, onDecrease, onIncrease, pattern, readonly, required, size, spellcheck, src, step, tabindex, value, width, }: Props): JSX.Element;
+declare const Counter: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
 export default Counter;

Counter/index.js

@@ -7,35 +7,42 @@ "use strict";
 var react_1 = __importDefault(require("react"));
+var Counter_styles_1 = __importDefault(require("./Counter.styles"));
 var Button_1 = __importDefault(require("../Button"));
 /**
- * Para utlizar esse componente, deve-se importar:
+ * Para utlizar esse componente, deve-se importar o componente e o componente de tema:
  *
  * ```
- * import "@raiadrogasil/pulso-styles/css/<marca>/components/icon.css";
+ * import Counter from "@raiadrogasil/pulso-react-components/Counter";
+ * import ThemeProvider from "@raiadrogasil/pulso-react-components/ThemeProvider";
+ * ```
  *
- * import "@raiadrogasil/pulso-styles/css/<marca>/components/button.css";
+ * ou
  *
- * import "@raiadrogasil/pulso-styles/css/<marca>/components/counter.css";
- *
- * import Counter from "@raiadrogasil/pulso-react-components/Counter";
  * ```
+ * import {ThemeProvider, Counter} from "@raiadrogasil/pulso-react-components/";
+ * ```
  */
-function Counter(_a) {
-    var accesskey = _a.accesskey, autocomplete = _a.autocomplete, autofocus = _a.autofocus, autosave = _a.autosave, dataCollectDecrease = _a.dataCollectDecrease, dataCollectIncrease = _a.dataCollectIncrease, dataCollectInfoDecrease = _a.dataCollectInfoDecrease, dataCollectInfoIncrease = _a.dataCollectInfoIncrease, dataQADecrease = _a.dataQADecrease, dataQAIncrease = _a.dataQAIncrease, disabled = _a.disabled, form = _a.form, formaction = _a.formaction, id = _a.id, inputmode = _a.inputmode, inverse = _a.inverse, list = _a.list, max = _a.max, maxlength = _a.maxlength, min = _a.min, minlength = _a.minlength, multiple = _a.multiple, name = _a.name, onChange = _a.onChange, onDecrease = _a.onDecrease, onIncrease = _a.onIncrease, pattern = _a.pattern, readonly = _a.readonly, required = _a.required, size = _a.size, spellcheck = _a.spellcheck, src = _a.src, step = _a.step, tabindex = _a.tabindex, value = _a.value, width = _a.width;
+var Counter = react_1.default.forwardRef(function (_a, ref) {
+    var accesskey = _a.accesskey, autocomplete = _a.autocomplete, autofocus = _a.autofocus, autosave = _a.autosave, dataCollect = _a.dataCollect, dataCollectDecrease = _a.dataCollectDecrease, dataCollectIncrease = _a.dataCollectIncrease, dataCollectInfo = _a.dataCollectInfo, dataCollectInfoDecrease = _a.dataCollectInfoDecrease, dataCollectInfoIncrease = _a.dataCollectInfoIncrease, dataQA = _a.dataQA, dataQADecrease = _a.dataQADecrease, dataQAIncrease = _a.dataQAIncrease, disabled = _a.disabled, error = _a.error, form = _a.form, formaction = _a.formaction, helperText = _a.helperText, id = _a.id, inverse = _a.inverse, list = _a.list, max = _a.max, maxlength = _a.maxlength, min = _a.min, minlength = _a.minlength, multiple = _a.multiple, name = _a.name, onChange = _a.onChange, onDecrease = _a.onDecrease, onIncrease = _a.onIncrease, readonly = _a.readonly, required = _a.required, size = _a.size, spellcheck = _a.spellcheck, src = _a.src, step = _a.step, tabindex = _a.tabindex, value = _a.value, width = _a.width;
     var mainElement = "pulso-counter";
     var mainClass = mainElement +
         (inverse ? " " + mainElement + "--inverse" : "") +
-        (disabled ? " " + mainElement + "--disabled" : "");
-    return (react_1.default.createElement("div", { className: mainClass },
-        react_1.default.createElement("div", { className: mainElement + "__minus-button-holder" },
-            react_1.default.createElement(Button_1.default, { dataQA: dataQADecrease ? dataQADecrease : null, dataCollect: dataCollectDecrease ? dataCollectDecrease : null, dataCollectInfo: dataCollectInfoDecrease ? dataCollectInfoDecrease : null, disabled: disabled ? disabled : false, iconName: "rd-bell-notification", onClick: function (event) {
-                    onDecrease ? onDecrease(event) : null;
-                }, size: "small", type: "icon-only" })),
-        react_1.default.createElement("input", { accessKey: accesskey ? accesskey : "", autoComplete: autocomplete ? autocomplete : "off", autoFocus: autofocus ? autofocus : false, autoSave: autosave ? autosave : "", className: mainElement + "__input", disabled: disabled ? disabled : false, form: form ? form : "", formAction: formaction ? formaction : "", id: id, inputMode: inputmode ? inputmode : "text", list: list ? list : "", max: max ? max : "", maxLength: maxlength ? maxlength : undefined, min: min ? min : "", minLength: minlength ? minlength : undefined, multiple: multiple ? multiple : false, name: name, onChange: function (event) {
-                onChange ? onChange(event) : null;
-            }, pattern: pattern ? pattern : "", readOnly: readonly ? readonly : false, required: required ? required : false, size: size ? size : undefined, spellCheck: spellcheck ? spellcheck : false, src: src ? src : "", step: step ? step : "", tabIndex: tabindex ? tabindex : undefined, type: "number", value: value, width: width ? width : "" }),
-        react_1.default.createElement("div", { className: mainElement + "__more-button-holder" },
-            react_1.default.createElement(Button_1.default, { dataQA: dataQAIncrease ? dataQAIncrease : null, dataCollect: dataCollectIncrease ? dataCollectIncrease : null, dataCollectInfo: dataCollectInfoIncrease ? dataCollectInfoIncrease : null, disabled: disabled ? disabled : false, iconName: "rd-bell-notification", onClick: function (event) {
-                    onIncrease ? onIncrease(event) : null;
-                }, size: "small", type: "icon-only" }))));
-}
+        (disabled ? " " + mainElement + "--disabled" : "") +
+        (error ? " " + mainElement + "--error" : "");
+    return (react_1.default.createElement(Counter_styles_1.default, { className: mainClass },
+        react_1.default.createElement("div", { className: mainElement + "__field" },
+            react_1.default.createElement("div", { className: "field__minus-button-holder" },
+                react_1.default.createElement("div", { className: "minus-button-holder__pos" },
+                    react_1.default.createElement(Button_1.default, { dataQA: dataQADecrease ? dataQADecrease : null, dataCollect: dataCollectDecrease ? dataCollectDecrease : null, dataCollectInfo: dataCollectInfoDecrease ? dataCollectInfoDecrease : null, disabled: disabled ? disabled : false, iconName: "rd-minus", onClick: function (event) {
+                            onDecrease ? onDecrease(event) : null;
+                        }, size: "small", type: "icon-only", inverse: inverse ? inverse : false }))),
+            react_1.default.createElement("input", { accessKey: accesskey ? accesskey : "", autoComplete: autocomplete ? autocomplete : "off", autoFocus: autofocus ? autofocus : false, autoSave: autosave ? autosave : "", className: "field__input", "data-qa": dataQA ? dataQA : null, "data-collect": dataCollect ? dataCollect : null, "data-collect-info": dataCollectInfo ? dataCollectInfo : null, disabled: disabled ? disabled : false, form: form ? form : "", formAction: formaction ? formaction : "", id: id, inputMode: "numeric", list: list ? list : "", max: max ? max : "", maxLength: maxlength ? maxlength : undefined, min: min ? min : "", minLength: minlength ? minlength : undefined, multiple: multiple ? multiple : false, name: name, onChange: function (event) {
+                    onChange ? onChange(event) : null;
+                }, pattern: "[0-9]*", readOnly: readonly ? readonly : false, ref: ref ? ref : null, required: required ? required : false, size: size ? size : undefined, spellCheck: spellcheck ? spellcheck : false, src: src ? src : "", step: step ? step : "", tabIndex: tabindex ? tabindex : undefined, type: "number", value: value, width: width ? width : "" }),
+            react_1.default.createElement("div", { className: "field__more-button-holder" },
+                react_1.default.createElement("div", { className: "more-button-holder__pos" },
+                    react_1.default.createElement(Button_1.default, { dataQA: dataQAIncrease ? dataQAIncrease : null, dataCollect: dataCollectIncrease ? dataCollectIncrease : null, dataCollectInfo: dataCollectInfoIncrease ? dataCollectInfoIncrease : null, disabled: disabled ? disabled : false, iconName: "rd-plus", onClick: function (event) {
+                            onIncrease ? onIncrease(event) : null;
+                        }, size: "small", type: "icon-only", inverse: inverse ? inverse : false })))),
+        helperText ? (react_1.default.createElement("p", { className: mainElement + "__helper" }, helperText)) : ("")));
+});
 exports.default = Counter;

package.json

@@ -8,3 +8,3 @@ {
   },
-  "version": "0.2.0",
+  "version": "1.0.0",
   "main": "./index.js",
@@ -11,0 +11,0 @@ "keywords": [

TextField/index.d.ts

 import React from "react";
 export interface Props {
+    /**
+     * Conteúdo de texto do label do componente.
+     */
     label: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     id: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     name: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     value?: string;
+    /**
+     * Habilita e configura um ícone que é carregado como leading icon do input.
+     */
     leadingIcon?: string;
+    /**
+     * Incluí um texto helper ao componente.
+     */
     helperText?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     disabled?: boolean;
+    /**
+     * Habilita o estilo de erro do componente.
+     */
     error?: boolean;
+    /**
+     * Adiciona uma função de callback ao clique do botão de reset do componente.
+     */
     onReset?: Function;
+    /**
+     * Habilita o estilo inverse do componente.
+     */
     inverse?: boolean;
+    /**
+     * Configura o token da cor de fundo, sobre a qual o componente será colocado.
+     */
     backgroundColorName: string;
+    /**
+     * Adiciona uma função de callback à mudança do componente.
+     */
     onChange?: Function;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     accesskey?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     autocomplete?: "on" | "off";
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     autofocus?: boolean;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     autosave?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     form?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     formaction?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     inputmode?: "email" | "search" | "tel" | "text" | "url" | "none" | "numeric" | "decimal" | undefined;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     type?: "color" | "date" | "datetime-local" | "email" | "file" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week";
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     list?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     max?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     maxlength?: number;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     min?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     minlength?: number;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     multiple?: boolean;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     pattern?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     readonly?: boolean;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     required?: boolean;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     size?: number;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     spellcheck?: boolean;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     src?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     step?: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     tabindex?: number;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     width?: string;
+    /**
+     * Essa Prop inclui um atributo data-qa com o valor configurado no input.
+     */
     dataQA?: string | null;
+    /**
+     * Essa Prop inclui um atributo data-qa com o valor configurado no botão de reset.
+     */
     dataQAReset?: string | null;
+    /**
+     * Essa Prop inclui um atributo data-collect com o valor configurado no input.
+     */
     dataCollect?: string | null;
+    /**
+     *Essa Prop inclui um atributo data-collect com o valor configurado no botão de reset.
+     */
     dataCollectReset?: string | null;
+    /**
+     * Essa Prop inclui um atributo data-collect-info com o valor configurado no input.
+     */
     dataCollectInfo?: string | null;
+    /**
+     * Essa Prop inclui um atributo data-collect-info com o valor configurado no botão de reset.
+     */
     dataCollectInfoReset?: string | null;
@@ -44,0 +167,0 @@ }

TextField/TextField.styles.js

@@ -11,4 +11,4 @@ "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: calc(\n        ", " -\n          ", " / 2 -\n          ", "\n      );\n      font-family: ", ";\n      color: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      padding-left: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      .label__text {\n        background-color: ", ";\n        display: inline-block;\n        padding: 0 calc(", " / 2);\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      transition-duration: 0.6s;\n      transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\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    }\n\n    .pulso-text-field__input:hover {\n      border-color: ", ";\n      color: ", ";\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: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      &:focus {\n        opacity: 1;\n      }\n      outline: none;\n    }\n\n    .pulso-text-field__input:hover\n      + .pulso-text-field__label\n      + .pulso-text-field__reset,\n    .pulso-text-field__input:focus\n      + .pulso-text-field__label\n      + .pulso-text-field__reset {\n      color: ", ";\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      font-family: ", ";\n      font-size: ", ";\n      font-weight: ", ";\n      color: ", ";\n      padding: 0 ", ";\n      margin: ", " 0 0 0;\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    &--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 + ", " * 2 -\n            ", " / 2 -\n            ", "\n        );\n      }\n      .pulso-text-field__label.pulso-text-field__label--field-has-value {\n        left: 0;\n      }\n    }\n\n    &--error .pulso-text-field__helper,\n    &--error .pulso-text-field__reset {\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    &--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    &--inverse .pulso-text-field__input:disabled {\n      border-color: ", ";\n    }\n\n    &--inverse .pulso-text-field__input,\n    &--inverse .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    &--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: calc(\n        ", " -\n          ", " / 2 -\n          ", "\n      );\n      font-family: ", ";\n      color: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      padding-left: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      .label__text {\n        background-color: ", ";\n        display: inline-block;\n        padding: 0 calc(", " / 2);\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      transition-duration: 0.6s;\n      transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\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    }\n\n    .pulso-text-field__input:hover {\n      border-color: ", ";\n      color: ", ";\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: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      &:focus {\n        opacity: 1;\n      }\n      outline: none;\n    }\n\n    .pulso-text-field__input:hover\n      + .pulso-text-field__label\n      + .pulso-text-field__reset,\n    .pulso-text-field__input:focus\n      + .pulso-text-field__label\n      + .pulso-text-field__reset {\n      color: ", ";\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      font-family: ", ";\n      font-size: ", ";\n      font-weight: ", ";\n      color: ", ";\n      padding: 0 ", ";\n      margin: ", " 0 0 0;\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    &--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 + ", " * 2 -\n            ", " / 2 -\n            ", "\n        );\n      }\n      .pulso-text-field__label.pulso-text-field__label--field-has-value {\n        left: 0;\n      }\n    }\n\n    &--error .pulso-text-field__helper,\n    &--error .pulso-text-field__reset {\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    &--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    &--inverse .pulso-text-field__input:disabled {\n      border-color: ", ";\n    }\n\n    &--inverse .pulso-text-field__input,\n    &--inverse .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    &--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.spacingStackTiny; }, function (props) { return props.theme.borderRadiusRounded; }, function (props) { return props.theme.borderRadiusRounded; }, function (props) { return props.theme.fontFamilyGlobal; }, function (props) { return props.theme.colorNeutralMedium; }, function (props) { return props.theme.fontSizeMicro; }, function (props) { return props.theme.lineHeightLarge; }, function (props) { return props.theme.fontWeightRegular; }, function (props) { return props.theme.borderRadiusRounded; }, function (props) { return props.theme.colorNeutralDark; }, function (props) { return props.theme[props.backgroundColorName]; }, function (props) { return props.theme.borderRadiusRounded; }, function (props) { return props.theme.fontSizeNano; }, function (props) { return props.theme.colorNeutralDark; }, function (props) { return props.theme.fontSizeNano; }, function (props) { return props.theme.fontWeightMedium; }, function (props) { return props.theme.fontWeightMedium; }, function (props) { return props.theme.fontSizeMicro; }, function (props) { return props.theme.fontFamilyGlobal; }, function (props) { return props.theme.lineHeightLarge; }, function (props) { return props.theme.colorNeutralMedium; }, 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.colorNeutralMedium; }, function (props) { return props.theme.borderWidthHairline; }, function (props) { return props.theme.borderRadiusRounded; }, function (props) { return props.theme.colorNeutralDark; }, function (props) { return props.theme.colorNeutralDark; }, function (props) { return props.theme.colorNeutralLight; }, function (props) { return props.theme.fontSizeNano; }, function (props) { return props.theme.colorBrandPure; }, function (props) { return props.theme.fontSizeNano; }, function (props) { return props.theme.fontWeightMedium; }, function (props) { return props.theme.colorNeutralDark; }, function (props) { return props.theme.colorBrandPure; }, function (props) { return props.theme.borderWidthThin; }, function (props) { return props.theme.fontWeightMedium; }, function (props) { return props.theme.colorNeutralMedium; }, 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.colorNeutralDark; }, function (props) { return props.theme.spacingInsetTiny; }, function (props) { return props.theme.colorNeutralMedium; }, function (props) { return props.theme.colorNeutralDark; }, function (props) { return props.theme.spacingInsetTiny; }, function (props) { return props.theme.colorNegativePure; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.fontFamilyGlobal; }, function (props) { return props.theme.fontSizeNano; }, function (props) { return props.theme.fontWeightRegular; }, function (props) { return props.theme.colorNeutralMedium; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackNano; }, function (props) { return props.theme.colorNeutralLight; }, 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.borderRadiusRounded; }, function (props) { return props.theme.borderRadiusRounded; }, function (props) { return props.theme.colorNegativePure; }, function (props) { return props.theme.colorNegativePure; }, 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.colorNegativePure; }, 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.colorNeutralLight; }, function (props) { return props.theme.colorBrandPure; }, function (props) { return props.theme.colorNeutralWhite; }, function (props) { return props.theme.colorNeutralDark; }, function (props) { return props.theme.colorNeutralLight; }, function (props) { return props.theme.colorNeutralWhite; }, function (props) { return props.theme.colorBrandPure; }, function (props) { return props.theme.colorNeutralDark; });
+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    }\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      transition-duration: 0.6s;\n      transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\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    }\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    }\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      transition-duration: 0.6s;\n      transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\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    }\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.colorNeutralMedium; }, 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.colorNeutralDark; }, function (props) { return props.theme[props.backgroundColorName]; }, function (props) { return props.theme.spacingInlineNano; }, function (props) { return props.theme.fontSizeNano; }, function (props) { return props.theme.colorNeutralDark; }, 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.colorNeutralMedium; }, 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.colorNeutralMedium; }, function (props) { return props.theme.borderWidthHairline; }, function (props) { return props.theme.borderRadiusRounded; }, function (props) { return props.theme.colorNeutralDark; }, function (props) { return props.theme.colorNeutralDark; }, function (props) { return props.theme.fontSizeNano; }, function (props) { return props.theme.colorBrandPure; }, function (props) { return props.theme.fontSizeNano; }, function (props) { return props.theme.globalFontWeightMedium; }, function (props) { return props.theme.colorNeutralDark; }, function (props) { return props.theme.colorBrandPure; }, function (props) { return props.theme.borderWidthThin; }, function (props) { return props.theme.globalFontWeightRegular; }, function (props) { return props.theme.colorNeutralMedium; }, 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.colorNeutralDark; }, function (props) { return props.theme.spacingInsetTiny; }, function (props) { return props.theme.colorNeutralMedium; }, function (props) { return props.theme.spacingInsetTiny; }, function (props) { return props.theme.colorNegativePure; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.spacingStackTiny; }, function (props) { return props.theme.colorNeutralMedium; }, 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.colorNeutralLight; }, function (props) { return props.theme.colorBrandPure; }, function (props) { return props.theme.colorNeutralWhite; }, function (props) { return props.theme.colorNeutralLight; }, function (props) { return props.theme.colorNeutralWhite; }, function (props) { return props.theme.colorBrandPure; }, function (props) { return props.theme.colorNegativePure; }, function (props) { return props.theme.colorNegativePure; }, 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.colorNegativePure; }, 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.colorNeutralLight; }, function (props) { return props.theme.colorNeutralLight; }, function (props) { return props.theme.colorNeutralDark; }, function (props) { return props.theme.colorNeutralDark; });
 exports.default = TextFieldStyled;
 var templateObject_1;

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

243850

increased by7.12%

Lines of code

3362

increased by6.93%

Number of low quality alerts

3

decreased by-25%

No dependency changes