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

Comparing version 1.0.0 to 1.1.0

Button/index.d.ts

 export declare type Props = {
     /**
-     * Atributo padrãp do elemento \<button\> do HTML.
+     * Atributo padrão do elemento \<button\> do HTML.
      */
     autofocus?: boolean | undefined;
     /**
-     * Atributo padrãp do elemento \<button\> do HTML.
+     * Atributo padrão do elemento \<button\> do HTML.
      */
     form?: string | undefined;
     /**
-     * Atributo padrãp do elemento \<button\> do HTML.
+     * Atributo padrão do elemento \<button\> do HTML.
      */
     formaction?: string | undefined;
     /**
-     * Atributo padrãp do elemento \<button\> do HTML.
+     * Atributo padrão do elemento \<button\> do HTML.
      */
     formenctype?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain" | undefined;
     /**
-     * Atributo padrãp do elemento \<button\> do HTML.
+     * Atributo padrão do elemento \<button\> do HTML.
      */
     formmethod?: "post" | "get" | undefined;
     /**
-     * Atributo padrãp do elemento \<button\> do HTML.
+     * Atributo padrão do elemento \<button\> do HTML.
      */
     formnovalidate?: boolean | undefined;
     /**
-     * Atributo padrãp do elemento \<button\> do HTML.
+     * Atributo padrão do elemento \<button\> do HTML.
      */
     formtarget?: "_self" | "_blank" | "_parent" | "_top" | undefined;
     /**
-     * Atributo padrãp do elemento \<button\> do HTML.
+     * Atributo padrão do elemento \<button\> do HTML.
      */
     name?: string | undefined;
     /**
-     * Atributo padrãp do elemento \<button\> do HTML.
+     * Atributo "type" padrão do elemento \<button\> do HTML.
      */
     buttonType?: "submit" | "reset" | "button" | undefined;
     /**
-     * Atributo "type" padrãp do elemento \<button\> do HTML.
+     * Atributo padrão do elemento \<button\> do HTML.
      */
     value?: string | undefined;
     /**
-     * Atributo padrãp do elemento \<button\> do HTML.
+     * Atributo padrão do elemento \<button\> do HTML.
      */
     onClick: Function;
     /**
-     * Atributo padrãp do elemento \<button\> do HTML.
+     * Atributo padrão do elemento \<button\> do HTML.
      */
     disabled?: boolean;
     /**
-     * Atributo padrãp do elemento \<button\> do HTML.
+     * Configura o posicionamento do ícone no componente, caso exista. "leading-icon" posiciona o ícone à esquerda do texto e "step" à direita.
      */
     icon?: null;
     /**
-     * Configura o posicionamento do ícone no componente, caso exista. "leading-icon" posiciona o ícone à esquerda do texto e "step" à direita.
+     * Nome do ícone que deve ser carregado, caso exista. O ícone deve estar contido na biblioteca de ícones do Pulso.
      */
     iconName?: null;
     /**
-     * Nome do ícone que deve ser carregado, caso exista. O ícone deve estar contido na biblioteca de ícones do Pulso.
+     * Habilita o estilo inverse do componente.
      */
@@ -61,0 +61,0 @@ inverse?: boolean;

Caption/Caption.styles.js

@@ -11,4 +11,4 @@ "use strict";
 var styled_components_1 = __importDefault(require("styled-components"));
-var CaptionStyled = styled_components_1.default.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.pulso-caption {\n    color: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    font-style: normal;\n    font-weight: ", ";\n    letter-spacing: ", ";\n    margin: 0;\n    text-align: left;\n    a {\n      color: ", ";\n      font-weight: ", ";\n      text-decoration: underline;\n\n      &:hover,\n      &:hover:visited {\n        color: ", ";\n      }\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n\n    &.pulso-caption--inverse {\n      color: ", ";\n      a {\n        color: ", ";\n        font-weight: ", ";\n        text-decoration: underline;\n\n        &:hover,\n        &:hover:visited {\n          color: ", ";\n        }\n\n        &:visited {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n    }\n  }\n"], ["\n  &.pulso-caption {\n    color: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    font-style: normal;\n    font-weight: ", ";\n    letter-spacing: ", ";\n    margin: 0;\n    text-align: left;\n    a {\n      color: ", ";\n      font-weight: ", ";\n      text-decoration: underline;\n\n      &:hover,\n      &:hover:visited {\n        color: ", ";\n      }\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n\n    &.pulso-caption--inverse {\n      color: ", ";\n      a {\n        color: ", ";\n        font-weight: ", ";\n        text-decoration: underline;\n\n        &:hover,\n        &:hover:visited {\n          color: ", ";\n        }\n\n        &:visited {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n    }\n  }\n"])), function (prop) { return prop.theme.colorNeutralBlack; }, function (prop) { return prop.theme.fontFamilyGlobal; }, function (prop) { return prop.theme.lineHeightLarge; }, function (prop) { return prop.theme.fontSizeNano; }, function (prop) { return prop.theme.globalFontWeightMedium; }, function (prop) { return prop.theme.globalLetterSpacingTiny; }, function (prop) { return prop.theme.colorHighlightPure; }, function (prop) { return prop.theme.globalFontWeightBold; }, function (prop) { return prop.theme.colorHighlightLight; }, function (prop) { return prop.theme.colorBrandDark; }, function (prop) { return prop.theme.colorBrandPure; }, function (prop) { return prop.theme.colorNeutralWhite; }, function (prop) { return prop.theme.colorHighlightLight; }, function (prop) { return prop.theme.globalFontWeightBold; }, function (prop) { return prop.theme.colorHighlightLightest; }, function (prop) { return prop.theme.colorBrandLight; }, function (prop) { return prop.theme.colorBrandPure; });
+var CaptionStyled = styled_components_1.default.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.pulso-caption {\n    color: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    font-style: normal;\n    font-weight: ", ";\n    letter-spacing: ", ";\n    margin: 0;\n    text-align: left;\n    a {\n      color: ", ";\n      font-weight: ", ";\n      text-decoration: underline;\n\n      &:hover,\n      &:hover:visited {\n        color: ", ";\n      }\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n\n    &.pulso-caption--inverse {\n      color: ", ";\n      a {\n        color: ", ";\n        font-weight: ", ";\n        text-decoration: underline;\n\n        &:hover,\n        &:hover:visited {\n          color: ", ";\n        }\n\n        &:visited {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n    }\n  }\n"], ["\n  &.pulso-caption {\n    color: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    font-style: normal;\n    font-weight: ", ";\n    letter-spacing: ", ";\n    margin: 0;\n    text-align: left;\n    a {\n      color: ", ";\n      font-weight: ", ";\n      text-decoration: underline;\n\n      &:hover,\n      &:hover:visited {\n        color: ", ";\n      }\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n\n    &.pulso-caption--inverse {\n      color: ", ";\n      a {\n        color: ", ";\n        font-weight: ", ";\n        text-decoration: underline;\n\n        &:hover,\n        &:hover:visited {\n          color: ", ";\n        }\n\n        &:visited {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n    }\n  }\n"])), function (prop) { return prop.theme.colorNeutralBlack; }, function (prop) { return prop.theme.fontFamilyGlobal; }, function (prop) { return prop.theme.lineHeightLarge; }, function (prop) { return prop.theme.fontSizeNano; }, function (prop) { return prop.theme.globalFontWeightMedium; }, function (prop) { return prop.theme.globalLetterSpacingTiny; }, function (prop) { return prop.theme.colorBrandPure; }, function (prop) { return prop.theme.globalFontWeightBold; }, function (prop) { return prop.theme.colorBrandLight; }, function (prop) { return prop.theme.colorBrandDark; }, function (prop) { return prop.theme.colorBrandDarkest; }, function (prop) { return prop.theme.colorNeutralWhite; }, function (prop) { return prop.theme.colorNeutralLightest; }, function (prop) { return prop.theme.globalFontWeightBold; }, function (prop) { return prop.theme.colorNeutralWhite; }, function (prop) { return prop.theme.colorBrandLight; }, function (prop) { return prop.theme.colorNeutralLight; });
 exports.default = CaptionStyled;
 var templateObject_1;

Caption/index.d.ts

 import React from "react";
 interface Props {
+    /**
+     * O conteúdo deve ser passado para o componente como um elemento filho.
+     *
+     * O componente aceita texto e link padrão do HTML <a> sem classes, para que receba o estilo definido no componente.
+     *
+     * Embora o tipo aceite também outros componentes e elementos, esse uso não estará de acordo com as definições de uso e o componente poderá não se comportar corretamente.
+     */
     children: React.ReactNode;
+    /**
+     * Habilita o estilo inverse do componente.
+     */
     inverse?: boolean;
@@ -5,0 +15,0 @@ }

Checkbox/index.d.ts

@@ -0,44 +1,139 @@
+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;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     disabled?: boolean;
+    /**
+     * Habilita o estilo inverse do componente.
+     */
     inverse?: boolean;
+    /**
+     * Adiciona uma função de callback à mudança do componente.
+     */
     onChange?: Function;
-    onClick?: Function;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     accesskey?: string;
+    /**
+     * 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.
+     */
     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;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     checked?: boolean;
+    /**
+     * Essa Prop inclui um atributo data-qa com o valor configurado no input.
+     */
     dataQA?: string;
+    /**
+     * Essa Prop inclui um atributo data-collect com o valor configurado no input.
+     */
     dataCollect?: string;
+    /**
+     * Essa Prop inclui um atributo data-collect-info com o valor configurado no input.
+     */
     dataCollectInfo?: 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/checkbox.css";
- *
  * import Checkbox from "@raiadrogasil/pulso-react-components/Checkbox";
+ * import ThemeProvider from "@raiadrogasil/pulso-react-components/ThemeProvider";
  * ```
+ *
+ * ou
+ *
+ * ```
+ * import {ThemeProvider, Checkbox} from "@raiadrogasil/pulso-react-components/";
+ * ```
  */
-declare function Checkbox({ label, id, name, value, disabled, inverse, onChange, accesskey, autofocus, autosave, form, formaction, max, maxlength, min, minlength, multiple, pattern, readonly, required, size, spellcheck, src, step, tabindex, width, checked, dataQA, dataCollect, dataCollectInfo, }: Props): JSX.Element;
+declare const Checkbox: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
 export default Checkbox;

Checkbox/index.js

@@ -7,17 +7,23 @@ "use strict";
 var react_1 = __importDefault(require("react"));
+var Checkbox_styles_1 = __importDefault(require("./Checkbox.styles"));
 /**
- * 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/checkbox.css";
- *
  * import Checkbox from "@raiadrogasil/pulso-react-components/Checkbox";
+ * import ThemeProvider from "@raiadrogasil/pulso-react-components/ThemeProvider";
  * ```
+ *
+ * ou
+ *
+ * ```
+ * import {ThemeProvider, Checkbox} from "@raiadrogasil/pulso-react-components/";
+ * ```
  */
-function Checkbox(_a) {
+var Checkbox = react_1.default.forwardRef(function (_a, ref) {
     var label = _a.label, id = _a.id, name = _a.name, value = _a.value, disabled = _a.disabled, inverse = _a.inverse, onChange = _a.onChange, accesskey = _a.accesskey, autofocus = _a.autofocus, autosave = _a.autosave, form = _a.form, formaction = _a.formaction, max = _a.max, maxlength = _a.maxlength, min = _a.min, minlength = _a.minlength, multiple = _a.multiple, pattern = _a.pattern, readonly = _a.readonly, required = _a.required, size = _a.size, spellcheck = _a.spellcheck, src = _a.src, step = _a.step, tabindex = _a.tabindex, width = _a.width, checked = _a.checked, dataQA = _a.dataQA, dataCollect = _a.dataCollect, dataCollectInfo = _a.dataCollectInfo;
     var mainElement = "pulso-checkbox";
     var mainClass = mainElement + (inverse ? " " + mainElement + "--inverse" : "");
-    return (react_1.default.createElement("div", { className: "" + mainClass },
-        react_1.default.createElement("label", { className: mainElement + "__label", "data-qa": dataQA ? dataQA : "", "data-collect": dataCollect ? dataCollect : "", "data-collect-info": dataCollectInfo ? dataCollectInfo : "" },
+    return (react_1.default.createElement(Checkbox_styles_1.default, { className: "" + mainClass },
+        react_1.default.createElement("label", { className: mainElement + "__label" },
             react_1.default.createElement("input", { className: mainElement + "__input", id: id, type: "checkbox", name: name, value: value, disabled: disabled ? disabled : false, onChange: onChange
@@ -27,6 +33,6 @@ ? function (event) {
                     }
-                    : undefined, accessKey: accesskey ? accesskey : "", autoFocus: autofocus ? autofocus : false, autoSave: autosave ? autosave : "", form: form ? form : "", formAction: formaction ? formaction : "", max: max ? max : "", maxLength: maxlength ? maxlength : undefined, min: min ? min : "", minLength: minlength ? minlength : undefined, multiple: multiple ? multiple : false, pattern: pattern ? pattern : "", required: required ? required : false, size: size ? size : undefined, spellCheck: spellcheck ? spellcheck : false, src: src ? src : "", step: step ? step : "", tabIndex: tabindex ? tabindex : undefined, width: width ? width : "", checked: checked ? checked : false, readOnly: readonly ? readonly : false }),
+                    : undefined, accessKey: accesskey ? accesskey : "", autoFocus: autofocus ? autofocus : false, autoSave: autosave ? autosave : "", form: form ? form : "", formAction: formaction ? formaction : "", max: max ? max : "", maxLength: maxlength ? maxlength : undefined, min: min ? min : "", minLength: minlength ? minlength : undefined, multiple: multiple ? multiple : false, pattern: pattern ? pattern : "", 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, width: width ? width : "", checked: checked ? checked : false, readOnly: readonly ? readonly : false, "data-qa": dataQA ? dataQA : "", "data-collect": dataCollect ? dataCollect : "", "data-collect-info": dataCollectInfo ? dataCollectInfo : "" }),
             react_1.default.createElement("span", { className: mainElement + "__checkmark" }),
             react_1.default.createElement("span", { className: mainElement + "__label-text" }, label))));
-}
+});
 exports.default = Checkbox;

Description/Description.styles.js

@@ -11,4 +11,4 @@ "use strict";
 var styled_components_1 = __importDefault(require("styled-components"));
-var DescriptionStyled = styled_components_1.default.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.pulso-description {\n    margin: 0;\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: normal;\n    font-weight: ", ";\n    text-align: left;\n    line-height: ", ";\n    letter-spacing: ", ";\n    a {\n      color: ", ";\n      font-weight: ", ";\n      text-decoration: underline;\n\n      &:hover,\n      &:hover:visited {\n        color: ", ";\n      }\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n    &.pulso-description--inverse {\n      color: ", ";\n      a {\n        color: ", ";\n        font-weight: ", ";\n        text-decoration: underline;\n\n        &:hover,\n        &:hover:visited {\n          color: ", ";\n        }\n\n        &:visited {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n    }\n  }\n"], ["\n  &.pulso-description {\n    margin: 0;\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: normal;\n    font-weight: ", ";\n    text-align: left;\n    line-height: ", ";\n    letter-spacing: ", ";\n    a {\n      color: ", ";\n      font-weight: ", ";\n      text-decoration: underline;\n\n      &:hover,\n      &:hover:visited {\n        color: ", ";\n      }\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n    &.pulso-description--inverse {\n      color: ", ";\n      a {\n        color: ", ";\n        font-weight: ", ";\n        text-decoration: underline;\n\n        &:hover,\n        &:hover:visited {\n          color: ", ";\n        }\n\n        &:visited {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n    }\n  }\n"])), function (props) { return props.theme.colorNeutralBlack; }, function (props) { return props.theme.fontFamilyGlobal; }, function (props) { return props.theme.fontSizeMicro; }, function (props) { return props.theme.globalFontWeightMedium; }, function (props) { return props.theme.lineHeightSmall; }, function (props) { return props.theme.globalLetterSpacingTiny; }, function (props) { return props.theme.colorHighlightPure; }, function (props) { return props.theme.globalFontWeightBold; }, function (props) { return props.theme.colorHighlightLight; }, function (props) { return props.theme.colorBrandDark; }, function (props) { return props.theme.colorBrandPure; }, function (props) { return props.theme.colorNeutralWhite; }, function (props) { return props.theme.colorHighlightLight; }, function (props) { return props.theme.globalFontWeightBold; }, function (props) { return props.theme.colorHighlightLightest; }, function (props) { return props.theme.colorBrandLight; }, function (props) { return props.theme.colorBrandPure; });
+var DescriptionStyled = styled_components_1.default.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.pulso-description {\n    margin: 0;\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: normal;\n    font-weight: ", ";\n    text-align: left;\n    line-height: ", ";\n    letter-spacing: ", ";\n    a {\n      color: ", ";\n      font-weight: ", ";\n      text-decoration: underline;\n\n      &:hover,\n      &:hover:visited {\n        color: ", ";\n      }\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n    &.pulso-description--inverse {\n      color: ", ";\n      a {\n        color: ", ";\n        font-weight: ", ";\n        text-decoration: underline;\n\n        &:hover,\n        &:hover:visited {\n          color: ", ";\n        }\n\n        &:visited {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n    }\n  }\n"], ["\n  &.pulso-description {\n    margin: 0;\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: normal;\n    font-weight: ", ";\n    text-align: left;\n    line-height: ", ";\n    letter-spacing: ", ";\n    a {\n      color: ", ";\n      font-weight: ", ";\n      text-decoration: underline;\n\n      &:hover,\n      &:hover:visited {\n        color: ", ";\n      }\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n    &.pulso-description--inverse {\n      color: ", ";\n      a {\n        color: ", ";\n        font-weight: ", ";\n        text-decoration: underline;\n\n        &:hover,\n        &:hover:visited {\n          color: ", ";\n        }\n\n        &:visited {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n    }\n  }\n"])), function (props) { return props.theme.colorNeutralBlack; }, function (props) { return props.theme.fontFamilyGlobal; }, function (props) { return props.theme.fontSizeMicro; }, function (props) { return props.theme.globalFontWeightMedium; }, function (props) { return props.theme.lineHeightSmall; }, function (props) { return props.theme.globalLetterSpacingTiny; }, function (prop) { return prop.theme.colorBrandPure; }, function (prop) { return prop.theme.globalFontWeightBold; }, function (prop) { return prop.theme.colorBrandLight; }, function (prop) { return prop.theme.colorBrandDark; }, function (prop) { return prop.theme.colorBrandDarkest; }, function (props) { return props.theme.colorNeutralWhite; }, function (prop) { return prop.theme.colorNeutralLightest; }, function (prop) { return prop.theme.globalFontWeightBold; }, function (prop) { return prop.theme.colorNeutralWhite; }, function (prop) { return prop.theme.colorBrandLight; }, function (prop) { return prop.theme.colorNeutralLight; });
 exports.default = DescriptionStyled;
 var templateObject_1;

Description/index.d.ts

@@ -1,4 +0,14 @@
-import React, { ReactNode } from "react";
+import React from "react";
 export interface DescriptionProps {
-    children: ReactNode;
+    /**
+     * O conteúdo deve ser passado para o componente como um elemento filho.
+     *
+     * O componente aceita texto e link padrão do HTML <a> sem classes, para que receba o estilo definido no componente.
+     *
+     * Embora o tipo aceite também outros componentes e elementos, esse uso não estará de acordo com as definições de uso e o componente poderá não se comportar corretamente.
+     */
+    children: React.ReactNode;
+    /**
+     * Habilita o estilo inverse do componente.
+     */
     inverse?: boolean;
@@ -5,0 +15,0 @@ }

Heading/Heading.styles.js

@@ -11,4 +11,4 @@ "use strict";
 var styled_components_1 = __importDefault(require("styled-components"));
-var HeadingStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.pulso-heading {\n    color: ", ";\n    font-family: ", ";\n    font-weight: ", ";\n    font-style: normal;\n    text-align: left;\n    letter-spacing: ", ";\n    line-height: ", ";\n    margin: 0;\n    &--huge {\n      font-size: ", ";\n    }\n\n    &--large {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    &--medium {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    &--small {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    &--tiny {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    a {\n      color: ", ";\n      font-weight: ", ";\n      text-decoration: underline;\n\n      &:hover,\n      &:hover:visited {\n        color: ", ";\n      }\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n\n    &--inverse {\n      color: ", ";\n      a {\n        color: ", ";\n        font-weight: ", ";\n        text-decoration: underline;\n\n        &:hover,\n        &:hover:visited {\n          color: ", ";\n        }\n\n        &:visited {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1023px) {\n    .pulso-heading {\n      &--large {\n        font-size: ", ";\n      }\n\n      &--medium {\n        font-size: ", ";\n        line-height: ", ";\n      }\n\n      &--small {\n        font-size: ", ";\n      }\n\n      &--tiny {\n        font-size: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n"], ["\n  &.pulso-heading {\n    color: ", ";\n    font-family: ", ";\n    font-weight: ", ";\n    font-style: normal;\n    text-align: left;\n    letter-spacing: ", ";\n    line-height: ", ";\n    margin: 0;\n    &--huge {\n      font-size: ", ";\n    }\n\n    &--large {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    &--medium {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    &--small {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    &--tiny {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    a {\n      color: ", ";\n      font-weight: ", ";\n      text-decoration: underline;\n\n      &:hover,\n      &:hover:visited {\n        color: ", ";\n      }\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n\n    &--inverse {\n      color: ", ";\n      a {\n        color: ", ";\n        font-weight: ", ";\n        text-decoration: underline;\n\n        &:hover,\n        &:hover:visited {\n          color: ", ";\n        }\n\n        &:visited {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1023px) {\n    .pulso-heading {\n      &--large {\n        font-size: ", ";\n      }\n\n      &--medium {\n        font-size: ", ";\n        line-height: ", ";\n      }\n\n      &--small {\n        font-size: ", ";\n      }\n\n      &--tiny {\n        font-size: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n"])), function (props) { return props.theme.colorNeutralBlack; }, function (props) { return props.theme.fontFamilyHighlight; }, function (props) { return props.theme.fontWeightBold; }, function (props) { return props.theme.letterSpacingDefault; }, function (props) { return props.theme.lineHeightMedium; }, function (props) { return props.theme.fontSizeHuge; }, function (props) { return props.theme.fontSizeLarge; }, function (props) { return props.theme.lineHeightTiny; }, function (props) { return props.theme.fontSizeMedium; }, function (props) { return props.theme.lineHeightDefault; }, function (props) { return props.theme.fontSizeSmall; }, function (props) { return props.theme.lineHeightSmall; }, function (props) { return props.theme.fontSizeTiny; }, function (props) { return props.theme.lineHeightMedium; }, function (props) { return props.theme.colorHighlightPure; }, function (props) { return props.theme.globalFontWeightBold; }, function (props) { return props.theme.colorHighlightLight; }, function (props) { return props.theme.colorBrandDark; }, function (props) { return props.theme.colorBrandPure; }, function (props) { return props.theme.colorNeutralWhite; }, function (props) { return props.theme.colorHighlightLight; }, function (props) { return props.theme.globalFontWeightBold; }, function (props) { return props.theme.colorHighlightLightest; }, function (props) { return props.theme.colorBrandLight; }, function (props) { return props.theme.colorBrandPure; }, function (props) { return props.theme.fontSizeMedium; }, function (props) { return props.theme.fontSizeSmall; }, function (props) { return props.theme.lineHeightSmall; }, function (props) { return props.theme.fontSizeTiny; }, function (props) { return props.theme.fontSizeMicro; }, function (props) { return props.theme.lineHeightSmall; });
+var HeadingStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.pulso-heading {\n    color: ", ";\n    font-family: ", ";\n    font-weight: ", ";\n    font-style: normal;\n    text-align: left;\n    letter-spacing: ", ";\n    line-height: ", ";\n    margin: 0;\n    &--huge {\n      font-size: ", ";\n    }\n\n    &--large {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    &--medium {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    &--small {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    &--tiny {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    a {\n      color: ", ";\n      font-weight: ", ";\n      text-decoration: underline;\n\n      &:hover,\n      &:hover:visited {\n        color: ", ";\n      }\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n\n    &--inverse {\n      color: ", ";\n      a {\n        color: ", ";\n        font-weight: ", ";\n        text-decoration: underline;\n\n        &:hover,\n        &:hover:visited {\n          color: ", ";\n        }\n\n        &:visited {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1023px) {\n    .pulso-heading {\n      &--large {\n        font-size: ", ";\n      }\n\n      &--medium {\n        font-size: ", ";\n        line-height: ", ";\n      }\n\n      &--small {\n        font-size: ", ";\n      }\n\n      &--tiny {\n        font-size: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n"], ["\n  &.pulso-heading {\n    color: ", ";\n    font-family: ", ";\n    font-weight: ", ";\n    font-style: normal;\n    text-align: left;\n    letter-spacing: ", ";\n    line-height: ", ";\n    margin: 0;\n    &--huge {\n      font-size: ", ";\n    }\n\n    &--large {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    &--medium {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    &--small {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    &--tiny {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    a {\n      color: ", ";\n      font-weight: ", ";\n      text-decoration: underline;\n\n      &:hover,\n      &:hover:visited {\n        color: ", ";\n      }\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n\n    &--inverse {\n      color: ", ";\n      a {\n        color: ", ";\n        font-weight: ", ";\n        text-decoration: underline;\n\n        &:hover,\n        &:hover:visited {\n          color: ", ";\n        }\n\n        &:visited {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1023px) {\n    .pulso-heading {\n      &--large {\n        font-size: ", ";\n      }\n\n      &--medium {\n        font-size: ", ";\n        line-height: ", ";\n      }\n\n      &--small {\n        font-size: ", ";\n      }\n\n      &--tiny {\n        font-size: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n"])), function (props) { return props.theme.colorNeutralBlack; }, function (props) { return props.theme.fontFamilyHighlight; }, function (props) { return props.theme.fontWeightBold; }, function (props) { return props.theme.letterSpacingDefault; }, function (props) { return props.theme.lineHeightMedium; }, function (props) { return props.theme.fontSizeHuge; }, function (props) { return props.theme.fontSizeLarge; }, function (props) { return props.theme.lineHeightTiny; }, function (props) { return props.theme.fontSizeMedium; }, function (props) { return props.theme.lineHeightDefault; }, function (props) { return props.theme.fontSizeSmall; }, function (props) { return props.theme.lineHeightSmall; }, function (props) { return props.theme.fontSizeTiny; }, function (props) { return props.theme.lineHeightMedium; }, function (prop) { return prop.theme.colorBrandPure; }, function (prop) { return prop.theme.globalFontWeightBold; }, function (prop) { return prop.theme.colorBrandLight; }, function (prop) { return prop.theme.colorBrandDark; }, function (prop) { return prop.theme.colorBrandDarkest; }, function (props) { return props.theme.colorNeutralWhite; }, function (prop) { return prop.theme.colorNeutralLightest; }, function (prop) { return prop.theme.globalFontWeightBold; }, function (prop) { return prop.theme.colorNeutralWhite; }, function (prop) { return prop.theme.colorBrandLight; }, function (prop) { return prop.theme.colorNeutralLight; }, function (props) { return props.theme.fontSizeMedium; }, function (props) { return props.theme.fontSizeSmall; }, function (props) { return props.theme.lineHeightSmall; }, function (props) { return props.theme.fontSizeTiny; }, function (props) { return props.theme.fontSizeMicro; }, function (props) { return props.theme.lineHeightSmall; });
 exports.default = HeadingStyled;
 var templateObject_1;

Heading/index.d.ts

 import React, { ReactNode } from "react";
 export interface HeadingProps {
+    /**
+     * O conteúdo deve ser passado para o componente como um elemento filho.
+     *
+     * Inicialmente, o componente aceitava texto e link, por isso, seu tipo foi definido como ReactNode. Após novas definições de uso, o componente passou a aceitar somente texto, por isso, é importante que, ao implementar, o desenvolvedor siga essa nova orientação, para evitar quebra futura.
+     */
     children: ReactNode;
+    /**
+     * Habilita o estilo inverse do componente.
+     */
     inverse?: boolean;
-    type: string;
+    /**
+     * Define o estilo do componente, assim como sua importância em relação ao conteúdo da página. Cada tipo também correspode à um tipo de HTML heading, o que deve ser observado, para que a implementação esteja de acordo com as especificações de SEO:
+     *
+     * huge = h1, large = h2, medium = h3, small = h4, tiny = h5
+     *
+     * Inicialmente o tipo do componente estava definido como string, sem a lista de tipos possíveis. Caso fosse difinido qualquer valor, diferente dos possíveis, o componente carregaria como h1, mas sem um tamanho especificado. É importante que, ao implementar, o desenvolvedor escolha entre uma das opções de valores (huge, large, medium, small ou tiny), para evitar quebra futura.
+     */
+    type: "huge" | "large" | "medium" | "small" | "tiny" | string;
 }
@@ -7,0 +22,0 @@ /**

Icon/index.d.ts

 export interface Props {
+    /**
+     * Tamanho do ícone.
+     */
     size: "small" | "medium" | "large";
+    /**
+     * Nome do ícone que deve ser carregado. O ícone deve estar contido na biblioteca de ícones do Pulso.
+     */
     symbol: string;
+    /**
+     * Configura o token da cor do ícone.
+     */
     colorName?: string;
+    /**
+     * Configura uma cor no ícone, que sobrepõe o token de cor, caso configurado.
+     */
     color?: string;
@@ -6,0 +18,0 @@ }

Link/index.d.ts

 import { ReactNode } from "react";
 export interface Props {
+    /**
+     * O conteúdo deve ser passado para o componente como um elemento filho.
+     *
+     * O componente aceita somente texto.
+     *
+     * Embora o tipo aceite também outros componentes e elementos, esse uso não estará de acordo com as definições de uso e o componente poderá não se comportar corretamente. É importante que, ao implementar, o desenvolvedor siga essa orientação, para evitar quebra futura.
+     */
     children: ReactNode;
+    /**
+     * Habilita o estilo inverse do componente.
+     */
     inverse?: boolean;
+    /**
+     * Atributo padrão do elemento \<a\> do HTML.
+     */
     href: string;
+    /**
+     * Atributo padrão do elemento \<a\> do HTML.
+     */
     onClick(): void;
+    /**
+     * Atributo padrão do elemento \<a\> do HTML.
+     */
     download?: string;
+    /**
+     * Atributo padrão do elemento \<a\> do HTML.
+     */
     hreflang?: string;
+    /**
+     * Atributo padrão do elemento \<a\> do HTML.
+     */
     ping?: string;
+    /**
+     * Atributo padrão do elemento \<a\> do HTML.
+     */
     referrerpolicy?: string;
+    /**
+     * Atributo padrão do elemento \<a\> do HTML.
+     */
     rel?: string;
+    /**
+     * Atributo padrão do elemento \<a\> do HTML.
+     */
     target?: "_self" | "_blank" | "_parent" | "_top";
+    /**
+     * Atributo padrão do elemento \<a\> do HTML.
+     */
     type?: string;
+    /**
+     * Essa Prop inclui um atributo data-qa com o valor configurado no botão.
+     */
     dataQA?: string | null;
+    /**
+     * Essa Prop inclui um atributo data-collect com o valor configurado no botão.
+     */
     dataCollect?: string | null;
+    /**
+     * Essa Prop inclui um atributo data-collect-info com o valor configurado no botão.
+     */
     dataCollectInfo?: string | null;
+    /**
+     * Nome do ícone que deve ser carregado. O ícone deve estar contido na biblioteca de ícones do Pulso.
+     */
     iconName: string;
@@ -18,0 +67,0 @@ }

List/index.d.ts

 import React from "react";
 export interface ListProps {
-    type?: string;
+    /**
+     * Define o estilo do componente, standard ou inverse.
+     */
+    type?: "standard" | "inverse";
+    /**
+     * Define um array de opções da lista, com a opção no seguinte formato:
+     *
+     * {
+     *   label: string;
+     *   selected?: boolean;
+     *   value: number;
+     *   dataCollect?: string | null;
+     *   dataCollectInfo?: string | null;
+     *   dataQA?: string | null;
+     * }
+     */
     options: Array<Option>;
+    /**
+     * Define uma função de callback, que será chamada ao clique de cada opção, com a opção escolhida, como parâmetro, assim como ela aparece no array.
+     */
     handleClick(option: Option): void;
+    /**
+     * Define referência para cada opção da lista.
+     */
     setOptionRef?(element: HTMLLIElement | null): void;
+    /**
+     * Define uma função de callback, que será chamada ao foco de cada opção, com o index da opção na lista, como parâmetro.
+     */
     onFocus?(event: React.FocusEvent<HTMLLIElement>, index: number): void;
+    /**
+     * Define uma função de callback, que será chamada no keyDown de cada opção, o evento, como parâmetro.
+     */
     onKeyDown?(event: React.KeyboardEvent<HTMLLIElement>): void;
@@ -9,0 +36,0 @@ }

package.json

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

Paragraph/index.d.ts

@@ -1,4 +0,14 @@
-import { ReactNode } from "react";
+import React from "react";
 export interface Props {
-    children: ReactNode;
+    /**
+     * O conteúdo deve ser passado para o componente como um elemento filho.
+     *
+     * O componente aceita texto e link padrão do HTML <a> sem classes, para que receba o estilo definido no componente.
+     *
+     * Embora o tipo aceite também outros componentes e elementos, esse uso não estará de acordo com as definições de uso e o componente poderá não se comportar corretamente.
+     */
+    children: React.ReactNode;
+    /**
+     * Habilita o estilo inverse do componente.
+     */
     inverse?: boolean;
@@ -5,0 +15,0 @@ }

Paragraph/Paragraph.styles.js

@@ -11,4 +11,4 @@ "use strict";
 var styled_components_1 = __importDefault(require("styled-components"));
-var ParagraphStyled = styled_components_1.default.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.pulso-paragraph {\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: normal;\n    font-weight: ", ";\n    text-align: left;\n    line-height: ", ";\n    letter-spacing: ", ";\n\n    a {\n      color: ", ";\n      font-weight: ", ";\n      text-decoration: underline;\n\n      &:hover,\n      &:hover:visited {\n        color: ", ";\n      }\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n    &.pulso-paragraph--inverse {\n      color: ", ";\n\n      a {\n        color: ", ";\n        font-weight: ", ";\n        text-decoration: underline;\n\n        &:hover,\n        &:hover:visited {\n          color: ", ";\n        }\n\n        &:visited {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n    }\n  }\n"], ["\n  &.pulso-paragraph {\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: normal;\n    font-weight: ", ";\n    text-align: left;\n    line-height: ", ";\n    letter-spacing: ", ";\n\n    a {\n      color: ", ";\n      font-weight: ", ";\n      text-decoration: underline;\n\n      &:hover,\n      &:hover:visited {\n        color: ", ";\n      }\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n    &.pulso-paragraph--inverse {\n      color: ", ";\n\n      a {\n        color: ", ";\n        font-weight: ", ";\n        text-decoration: underline;\n\n        &:hover,\n        &:hover:visited {\n          color: ", ";\n        }\n\n        &:visited {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n    }\n  }\n"])), function (props) { return props.theme.colorNeutralBlack; }, function (props) { return props.theme.fontFamilyGlobal; }, function (props) { return props.theme.fontSizeTiny; }, function (props) { return props.theme.globalFontWeightRegular; }, function (props) { return props.theme.lineHeightMedium; }, function (props) { return props.theme.globalLetterSpacingDefault; }, function (props) { return props.theme.colorHighlightPure; }, function (props) { return props.theme.globalFontWeightBold; }, function (props) { return props.theme.colorHighlightLight; }, function (props) { return props.theme.colorBrandDark; }, function (props) { return props.theme.colorBrandPure; }, function (props) { return props.theme.colorNeutralWhite; }, function (props) { return props.theme.colorHighlightLight; }, function (props) { return props.theme.globalFontWeightBold; }, function (props) { return props.theme.colorHighlightLightest; }, function (props) { return props.theme.colorBrandLight; }, function (props) { return props.theme.colorBrandPure; });
+var ParagraphStyled = styled_components_1.default.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.pulso-paragraph {\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: normal;\n    font-weight: ", ";\n    text-align: left;\n    line-height: ", ";\n    letter-spacing: ", ";\n\n    a {\n      color: ", ";\n      font-weight: ", ";\n      text-decoration: underline;\n\n      &:hover,\n      &:hover:visited {\n        color: ", ";\n      }\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n    &.pulso-paragraph--inverse {\n      color: ", ";\n\n      a {\n        color: ", ";\n        font-weight: ", ";\n        text-decoration: underline;\n\n        &:hover,\n        &:hover:visited {\n          color: ", ";\n        }\n\n        &:visited {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n    }\n  }\n"], ["\n  &.pulso-paragraph {\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: normal;\n    font-weight: ", ";\n    text-align: left;\n    line-height: ", ";\n    letter-spacing: ", ";\n\n    a {\n      color: ", ";\n      font-weight: ", ";\n      text-decoration: underline;\n\n      &:hover,\n      &:hover:visited {\n        color: ", ";\n      }\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n    &.pulso-paragraph--inverse {\n      color: ", ";\n\n      a {\n        color: ", ";\n        font-weight: ", ";\n        text-decoration: underline;\n\n        &:hover,\n        &:hover:visited {\n          color: ", ";\n        }\n\n        &:visited {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n    }\n  }\n"])), function (props) { return props.theme.colorNeutralBlack; }, function (props) { return props.theme.fontFamilyGlobal; }, function (props) { return props.theme.fontSizeTiny; }, function (props) { return props.theme.globalFontWeightRegular; }, function (props) { return props.theme.lineHeightMedium; }, function (props) { return props.theme.globalLetterSpacingDefault; }, function (prop) { return prop.theme.colorBrandPure; }, function (prop) { return prop.theme.globalFontWeightBold; }, function (prop) { return prop.theme.colorBrandLight; }, function (prop) { return prop.theme.colorBrandDark; }, function (prop) { return prop.theme.colorBrandDarkest; }, function (props) { return props.theme.colorNeutralWhite; }, function (prop) { return prop.theme.colorNeutralLightest; }, function (prop) { return prop.theme.globalFontWeightBold; }, function (prop) { return prop.theme.colorNeutralWhite; }, function (prop) { return prop.theme.colorBrandLight; }, function (prop) { return prop.theme.colorNeutralLight; });
 exports.default = ParagraphStyled;
 var templateObject_1;

Radio/index.d.ts

@@ -0,44 +1,147 @@
+import React from "react";
 export interface Props {
+    /**
+     * Configura o token da cor de fundo, sobre a qual o componente será colocado.
+     */
+    backgroundColorName: string;
+    /**
+     * Conteúdo de texto do label do componente.
+     */
     label: string;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     placeholder: 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;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     disabled?: boolean;
+    /**
+     * Habilita o estilo inverse do componente.
+     */
     inverse?: boolean;
+    /**
+     * 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.
+     */
     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.
+     */
     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;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     checked?: boolean;
+    /**
+     * Essa Prop inclui um atributo data-qa com o valor configurado no input.
+     */
     dataQA?: string;
+    /**
+     * Essa Prop inclui um atributo data-collect com o valor configurado no input.
+     */
     dataCollect?: string;
+    /**
+     * Essa Prop inclui um atributo data-collect-info com o valor configurado no input.
+     */
     dataCollectInfo?: 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/radio.css";
- *
  * import Radio from "@raiadrogasil/pulso-react-components/Radio";
+ * import ThemeProvider from "@raiadrogasil/pulso-react-components/ThemeProvider";
  * ```
+ *
+ * ou
+ *
+ * ```
+ * import {ThemeProvider, Radio} from "@raiadrogasil/pulso-react-components/";
+ * ```
  */
-declare function Radio({ label, placeholder, id, name, value, disabled, inverse, onChange, accesskey, autofocus, autosave, form, formaction, max, maxlength, min, minlength, multiple, pattern, readonly, required, size, spellcheck, src, step, tabindex, width, checked, dataQA, dataCollect, dataCollectInfo, }: Props): JSX.Element;
+declare const Radio: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
 export default Radio;

Radio/index.js

@@ -7,22 +7,29 @@ "use strict";
 var react_1 = __importDefault(require("react"));
+var Radio_styles_1 = __importDefault(require("./Radio.styles"));
 /**
- * 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/radio.css";
- *
  * import Radio from "@raiadrogasil/pulso-react-components/Radio";
+ * import ThemeProvider from "@raiadrogasil/pulso-react-components/ThemeProvider";
  * ```
+ *
+ * ou
+ *
+ * ```
+ * import {ThemeProvider, Radio} from "@raiadrogasil/pulso-react-components/";
+ * ```
  */
-function Radio(_a) {
-    var label = _a.label, placeholder = _a.placeholder, id = _a.id, name = _a.name, value = _a.value, disabled = _a.disabled, inverse = _a.inverse, onChange = _a.onChange, accesskey = _a.accesskey, autofocus = _a.autofocus, autosave = _a.autosave, form = _a.form, formaction = _a.formaction, max = _a.max, maxlength = _a.maxlength, min = _a.min, minlength = _a.minlength, multiple = _a.multiple, pattern = _a.pattern, readonly = _a.readonly, required = _a.required, size = _a.size, spellcheck = _a.spellcheck, src = _a.src, step = _a.step, tabindex = _a.tabindex, width = _a.width, checked = _a.checked, dataQA = _a.dataQA, dataCollect = _a.dataCollect, dataCollectInfo = _a.dataCollectInfo;
-    var mainClass = "pulso-radio" + (inverse ? "--inverse" : "");
-    return (react_1.default.createElement("div", { className: "" + mainClass },
-        react_1.default.createElement("label", { className: mainClass + "__label" },
-            react_1.default.createElement("input", { className: mainClass + "__input", id: id, type: "radio", name: name, placeholder: placeholder, value: value, disabled: disabled ? disabled : false, onChange: function (event) {
+var Radio = react_1.default.forwardRef(function (_a, ref) {
+    var backgroundColorName = _a.backgroundColorName, label = _a.label, placeholder = _a.placeholder, id = _a.id, name = _a.name, value = _a.value, disabled = _a.disabled, inverse = _a.inverse, onChange = _a.onChange, accesskey = _a.accesskey, autofocus = _a.autofocus, autosave = _a.autosave, form = _a.form, formaction = _a.formaction, max = _a.max, maxlength = _a.maxlength, min = _a.min, minlength = _a.minlength, multiple = _a.multiple, pattern = _a.pattern, readonly = _a.readonly, required = _a.required, size = _a.size, spellcheck = _a.spellcheck, src = _a.src, step = _a.step, tabindex = _a.tabindex, width = _a.width, checked = _a.checked, dataQA = _a.dataQA, dataCollect = _a.dataCollect, dataCollectInfo = _a.dataCollectInfo;
+    var mainElement = "pulso-radio";
+    var mainClass = mainElement + (inverse ? " " + mainElement + "--inverse" : "");
+    return (react_1.default.createElement(Radio_styles_1.default, { className: "" + mainClass, backgroundColorName: backgroundColorName },
+        react_1.default.createElement("label", { className: mainElement + "__label" },
+            react_1.default.createElement("input", { className: mainElement + "__input", id: id, type: "radio", name: name, placeholder: placeholder, value: value, disabled: disabled ? disabled : false, onChange: function (event) {
                     onChange ? onChange(event) : null;
-                }, accessKey: accesskey ? accesskey : "", autoFocus: autofocus ? autofocus : false, autoSave: autosave ? autosave : "", form: form ? form : "", formAction: formaction ? formaction : "", max: max ? max : "", maxLength: maxlength ? maxlength : undefined, min: min ? min : "", minLength: minlength ? minlength : undefined, multiple: multiple ? multiple : false, pattern: pattern ? pattern : "", required: required ? required : false, size: size ? size : undefined, spellCheck: spellcheck ? spellcheck : false, src: src ? src : "", step: step ? step : "", tabIndex: tabindex ? tabindex : undefined, width: width ? width : "", checked: checked ? checked : false, readOnly: readonly ? readonly : false, "data-qa": dataQA ? dataQA : "", "data-collect": dataCollect ? dataCollect : "", "data-collect-info": dataCollectInfo ? dataCollectInfo : "" }),
-            react_1.default.createElement("span", { className: mainClass + "__checkmark" }),
-            react_1.default.createElement("span", { className: mainClass + "__label-text" }, label))));
-}
+                }, accessKey: accesskey ? accesskey : "", autoFocus: autofocus ? autofocus : false, autoSave: autosave ? autosave : "", form: form ? form : "", formAction: formaction ? formaction : "", max: max ? max : "", maxLength: maxlength ? maxlength : undefined, min: min ? min : "", minLength: minlength ? minlength : undefined, multiple: multiple ? multiple : false, pattern: pattern ? pattern : "", 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, width: width ? width : "", checked: checked ? checked : false, readOnly: readonly ? readonly : false, "data-qa": dataQA ? dataQA : "", "data-collect": dataCollect ? dataCollect : "", "data-collect-info": dataCollectInfo ? dataCollectInfo : "" }),
+            react_1.default.createElement("span", { className: mainElement + "__checkmark" }),
+            react_1.default.createElement("span", { className: mainElement + "__label-text" }, label))));
+});
 exports.default = Radio;

RadioCustom/index.d.ts

@@ -0,48 +1,151 @@
+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.
+     */
     placeholder: 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;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     disabled?: boolean;
+    /**
+     * Habilita o estilo inverse do componente.
+     */
     inverse?: boolean;
+    /**
+     * 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.
+     */
     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.
+     */
     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;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     checked?: boolean;
+    /**
+     * Atributo padrão do elemento \<input\> do HTML.
+     */
     icon: string;
+    /**
+     * Essa Prop inclui um atributo data-qa com o valor configurado no input.
+     */
     dataQA?: string;
+    /**
+     * Essa Prop inclui um atributo data-collect com o valor configurado no input.
+     */
     dataCollect?: string;
+    /**
+     * Essa Prop inclui um atributo data-collect-info com o valor configurado no input.
+     */
     dataCollectInfo?: 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 RadioCustom from "@raiadrogasil/pulso-react-components/RadioCustom";
+ * import ThemeProvider from "@raiadrogasil/pulso-react-components/ThemeProvider";
+ * ```
  *
- * import "@raiadrogasil/pulso-styles/css/<marca>/components/radio-custom.css";
+ * ou
  *
- * import RadioCustom from "@raiadrogasil/pulso-react-components/RadioCustom";
  * ```
+ * import {ThemeProvider, RadioCustom} from "@raiadrogasil/pulso-react-components/";
+ * ```
  */
-declare function RadioCustom({ label, placeholder, id, name, value, disabled, inverse, onChange, accesskey, autofocus, autosave, form, formaction, inputmode, max, maxlength, min, minlength, multiple, pattern, readonly, required, size, spellcheck, src, step, tabindex, width, checked, icon, dataQA, dataCollect, dataCollectInfo, }: Props): JSX.Element;
+declare const RadioCustom: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
 export default RadioCustom;

RadioCustom/index.js

@@ -7,25 +7,30 @@ "use strict";
 var react_1 = __importDefault(require("react"));
+var RadioCustom_styles_1 = __importDefault(require("./RadioCustom.styles"));
 /**
- * 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 RadioCustom from "@raiadrogasil/pulso-react-components/RadioCustom";
+ * import ThemeProvider from "@raiadrogasil/pulso-react-components/ThemeProvider";
+ * ```
  *
- * import "@raiadrogasil/pulso-styles/css/<marca>/components/radio-custom.css";
+ * ou
  *
- * import RadioCustom from "@raiadrogasil/pulso-react-components/RadioCustom";
  * ```
+ * import {ThemeProvider, RadioCustom} from "@raiadrogasil/pulso-react-components/";
+ * ```
  */
-function RadioCustom(_a) {
+var RadioCustom = react_1.default.forwardRef(function (_a, ref) {
     var label = _a.label, placeholder = _a.placeholder, id = _a.id, name = _a.name, value = _a.value, disabled = _a.disabled, inverse = _a.inverse, onChange = _a.onChange, accesskey = _a.accesskey, autofocus = _a.autofocus, autosave = _a.autosave, form = _a.form, formaction = _a.formaction, inputmode = _a.inputmode, max = _a.max, maxlength = _a.maxlength, min = _a.min, minlength = _a.minlength, multiple = _a.multiple, pattern = _a.pattern, readonly = _a.readonly, required = _a.required, size = _a.size, spellcheck = _a.spellcheck, src = _a.src, step = _a.step, tabindex = _a.tabindex, width = _a.width, checked = _a.checked, icon = _a.icon, dataQA = _a.dataQA, dataCollect = _a.dataCollect, dataCollectInfo = _a.dataCollectInfo;
-    var mainClass = "pulso-radio-custom" + (inverse ? "--inverse" : "");
-    return (react_1.default.createElement("div", { className: "" + mainClass },
-        react_1.default.createElement("label", { className: mainClass + "__label" },
-            react_1.default.createElement("input", { className: mainClass + "__input", id: id, type: "radio", name: name, placeholder: placeholder, value: value, disabled: disabled ? disabled : false, onChange: function (event) {
+    var mainElement = "pulso-radio-custom";
+    var mainClass = mainElement + (inverse ? " " + mainElement + "--inverse" : "");
+    return (react_1.default.createElement(RadioCustom_styles_1.default, { className: "" + mainClass },
+        react_1.default.createElement("label", { className: mainElement + "__label" },
+            react_1.default.createElement("input", { className: mainElement + "__input", id: id, type: "radio", name: name, placeholder: placeholder, value: value, disabled: disabled ? disabled : false, onChange: function (event) {
                     onChange ? onChange(event) : null;
-                }, accessKey: accesskey ? accesskey : "", autoFocus: autofocus ? autofocus : false, autoSave: autosave ? autosave : "", form: form ? form : "", formAction: formaction ? formaction : "", inputMode: inputmode ? inputmode : "text", max: max ? max : "", maxLength: maxlength ? maxlength : undefined, min: min ? min : "", minLength: minlength ? minlength : undefined, multiple: multiple ? multiple : false, pattern: pattern ? pattern : "", required: required ? required : false, size: size ? size : undefined, spellCheck: spellcheck ? spellcheck : false, src: src ? src : "", step: step ? step : "", tabIndex: tabindex ? tabindex : undefined, width: width ? width : "", checked: checked ? checked : false, readOnly: readonly ? readonly : false, "data-qa": dataQA ? dataQA : "", "data-collect": dataCollect ? dataCollect : "", "data-collect-info": dataCollectInfo ? dataCollectInfo : "" }),
-            react_1.default.createElement("span", { className: mainClass + "__checkmark " + icon }),
-            react_1.default.createElement("span", { className: mainClass + "__label-text" }, label),
-            react_1.default.createElement("span", { className: mainClass + "__border" }))));
-}
+                }, accessKey: accesskey ? accesskey : "", autoFocus: autofocus ? autofocus : false, autoSave: autosave ? autosave : "", form: form ? form : "", formAction: formaction ? formaction : "", inputMode: inputmode ? inputmode : "text", max: max ? max : "", maxLength: maxlength ? maxlength : undefined, min: min ? min : "", minLength: minlength ? minlength : undefined, multiple: multiple ? multiple : false, pattern: pattern ? pattern : "", 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, width: width ? width : "", checked: checked ? checked : false, readOnly: readonly ? readonly : false, "data-qa": dataQA ? dataQA : "", "data-collect": dataCollect ? dataCollect : "", "data-collect-info": dataCollectInfo ? dataCollectInfo : "" }),
+            react_1.default.createElement("span", { className: mainElement + "__checkmark " + icon }),
+            react_1.default.createElement("span", { className: mainElement + "__label-text" }, label),
+            react_1.default.createElement("span", { className: mainElement + "__border" }))));
+});
 exports.default = RadioCustom;

Select/index.d.ts

 import { Option } from "@raiadrogasil/pulso-react-components/List";
 export interface Props {
+    /**
+     * Atributo padrão do elemento \<select\> do HTML, que fica escondido, junto ao componente. No entanto, não surte efeito no componente que é visível para o usuário.
+     */
     autofocus?: boolean;
+    /**
+     * Configura o token da cor de fundo, sobre a qual o componente será colocado.
+     */
     backgroundColorName: string;
+    /**
+     * Essa Prop inclui um atributo data-collect com o valor configurado no input, onde o usuário digita, para realiar o filtro de opções.
+     */
     dataCollectFilter?: string | null;
+    /**
+     * Essa Prop inclui um atributo data-collect-info com o valor configurado no input, onde o usuário digita, para realiar o filtro de opções.
+     */
     dataCollectInfoFilter?: string | null;
+    /**
+     * Essa Prop inclui um atributo data-qa com o valor configurado no input, onde o usuário digita, para realiar o filtro de opções.
+     */
     dataQAFilter?: string | null;
+    /**
+     * Configura o componente com estilo de desabilitado e bloqueia a interação do usuário.
+     */
     disabled?: boolean;
+    /**
+     * Atributo padrão do elemento \<select\> do HTML, que fica escondido, junto ao componente.
+     */
     form?: string;
+    /**
+     * Incluí um texto helper ao componente.
+     */
     helperText?: string;
+    /**
+     * Atributo padrão do elemento \<select\> do HTML, que fica escondido, junto ao componente.
+     */
     id?: string;
+    /**
+     * Habilita o estilo inverse do componente.
+     */
     inverse?: boolean;
+    /**
+     * Conteúdo de texto do label do componente.
+     */
     label: string;
+    /**
+     * Atributo padrão do elemento \<select\> do HTML, que fica escondido, junto ao componente.
+     */
     name?: string;
+    /**
+     * Função de callback, que é chamada quando uma opção é selecionada, com a opção escolhida, como parâmetro, assim como ela aparece no array.
+     */
     onChange?: Function;
+    /**
+     * Define um array de opções da lista, com a opção no seguinte formato:
+     *
+     * {
+     *   label: string;
+     *   selected?: boolean;
+     *   value: number;
+     *   dataCollect?: string | null;
+     *   dataCollectInfo?: string | null;
+     *   dataQA?: string | null;
+     * }
+     */
     options: Array<Option>;
+    /**
+     * Atributo padrão do elemento \<select\> do HTML, que fica escondido, junto ao componente.
+     */
     required?: boolean;
@@ -18,0 +72,0 @@ }

Select/index.js

@@ -42,2 +42,5 @@ "use strict";
         setSelected(option);
+        /**
+         * Atributo padrão do elemento \<select\> do HTML, que fica escondido, junto ao componente.
+         */
         optionsRef[optionFocused].blur();
@@ -44,0 +47,0 @@ return onChange ? onChange(option) : null;

Subtitle/index.d.ts

@@ -1,4 +0,14 @@
-import React, { ReactNode } from "react";
+import React from "react";
 export interface SubtitleProps {
-    children: ReactNode;
+    /**
+     * O conteúdo deve ser passado para o componente como um elemento filho.
+     *
+     * O componente aceita texto e link padrão do HTML <a> sem classes, para que receba o estilo definido no componente.
+     *
+     * Embora o tipo aceite também outros componentes e elementos, esse uso não estará de acordo com as definições de uso e o componente poderá não se comportar corretamente.
+     */
+    children: React.ReactNode;
+    /**
+     * Habilita o estilo inverse do componente.
+     */
     inverse?: boolean;
@@ -5,0 +15,0 @@ }

Subtitle/Subtitle.styles.js

@@ -11,4 +11,4 @@ "use strict";
 var styled_components_1 = __importDefault(require("styled-components"));
-var SubtitleStyled = styled_components_1.default.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.pulso-subtitle {\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: normal;\n    font-weight: ", ";\n    letter-spacing: ", ";\n    line-height: ", ";\n    margin: 0;\n    text-align: left;\n    a {\n      color: ", ";\n      font-weight: ", ";\n      text-decoration: underline;\n\n      &:hover,\n      &:hover:visited {\n        color: ", ";\n      }\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n\n    &.pulso-subtitle--inverse {\n      color: ", ";\n      a {\n        color: ", ";\n        font-weight: ", ";\n        text-decoration: underline;\n\n        &:hover,\n        &:hover:visited {\n          color: ", ";\n        }\n\n        &:visited {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1023px) {\n    .pulso-subtitle {\n      font-size: ", ";\n      line-height: ", ";\n    }\n  }\n"], ["\n  &.pulso-subtitle {\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: normal;\n    font-weight: ", ";\n    letter-spacing: ", ";\n    line-height: ", ";\n    margin: 0;\n    text-align: left;\n    a {\n      color: ", ";\n      font-weight: ", ";\n      text-decoration: underline;\n\n      &:hover,\n      &:hover:visited {\n        color: ", ";\n      }\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n\n    &.pulso-subtitle--inverse {\n      color: ", ";\n      a {\n        color: ", ";\n        font-weight: ", ";\n        text-decoration: underline;\n\n        &:hover,\n        &:hover:visited {\n          color: ", ";\n        }\n\n        &:visited {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1023px) {\n    .pulso-subtitle {\n      font-size: ", ";\n      line-height: ", ";\n    }\n  }\n"])), function (props) { return props.theme.colorNeutralDark; }, function (props) { return props.theme.fontFamilyGlobal; }, function (props) { return props.theme.fontSizeSmall; }, function (props) { return props.theme.globalFontWeightMedium; }, function (props) { return props.theme.globalLetterSpacingDefault; }, function (props) { return props.theme.lineHeightSmall; }, function (props) { return props.theme.colorHighlightPure; }, function (props) { return props.theme.globalFontWeightBold; }, function (props) { return props.theme.colorHighlightLight; }, function (props) { return props.theme.colorBrandDark; }, function (props) { return props.theme.colorBrandPure; }, function (props) { return props.theme.colorNeutralWhite; }, function (props) { return props.theme.colorHighlightLight; }, function (props) { return props.theme.globalFontWeightBold; }, function (props) { return props.theme.colorHighlightLightest; }, function (props) { return props.theme.colorBrandLight; }, function (props) { return props.theme.colorBrandPure; }, function (props) { return props.theme.fontSizeTiny; }, function (props) { return props.theme.lineHeightMedium; });
+var SubtitleStyled = styled_components_1.default.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.pulso-subtitle {\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: normal;\n    font-weight: ", ";\n    letter-spacing: ", ";\n    line-height: ", ";\n    margin: 0;\n    text-align: left;\n    a {\n      color: ", ";\n      font-weight: ", ";\n      text-decoration: underline;\n\n      &:hover,\n      &:hover:visited {\n        color: ", ";\n      }\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n\n    &.pulso-subtitle--inverse {\n      color: ", ";\n      a {\n        color: ", ";\n        font-weight: ", ";\n        text-decoration: underline;\n\n        &:hover,\n        &:hover:visited {\n          color: ", ";\n        }\n\n        &:visited {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1023px) {\n    .pulso-subtitle {\n      font-size: ", ";\n      line-height: ", ";\n    }\n  }\n"], ["\n  &.pulso-subtitle {\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: normal;\n    font-weight: ", ";\n    letter-spacing: ", ";\n    line-height: ", ";\n    margin: 0;\n    text-align: left;\n    a {\n      color: ", ";\n      font-weight: ", ";\n      text-decoration: underline;\n\n      &:hover,\n      &:hover:visited {\n        color: ", ";\n      }\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n\n    &.pulso-subtitle--inverse {\n      color: ", ";\n      a {\n        color: ", ";\n        font-weight: ", ";\n        text-decoration: underline;\n\n        &:hover,\n        &:hover:visited {\n          color: ", ";\n        }\n\n        &:visited {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1023px) {\n    .pulso-subtitle {\n      font-size: ", ";\n      line-height: ", ";\n    }\n  }\n"])), function (props) { return props.theme.colorNeutralDark; }, function (props) { return props.theme.fontFamilyGlobal; }, function (props) { return props.theme.fontSizeSmall; }, function (props) { return props.theme.globalFontWeightMedium; }, function (props) { return props.theme.globalLetterSpacingDefault; }, function (props) { return props.theme.lineHeightSmall; }, function (prop) { return prop.theme.colorBrandPure; }, function (prop) { return prop.theme.globalFontWeightBold; }, function (prop) { return prop.theme.colorBrandLight; }, function (prop) { return prop.theme.colorBrandDark; }, function (prop) { return prop.theme.colorBrandDarkest; }, function (props) { return props.theme.colorNeutralWhite; }, function (prop) { return prop.theme.colorNeutralLightest; }, function (prop) { return prop.theme.globalFontWeightBold; }, function (prop) { return prop.theme.colorNeutralWhite; }, function (prop) { return prop.theme.colorBrandLight; }, function (prop) { return prop.theme.colorNeutralLight; }, function (props) { return props.theme.fontSizeTiny; }, function (props) { return props.theme.lineHeightMedium; });
 exports.default = SubtitleStyled;
 var templateObject_1;

Toast/index.d.ts

 import { ReactNode } from "react";
 export interface Props {
+    /**
+     * O conteúdo deve ser passado para o componente como um elemento filho.
+     *
+     * O componente aceita somente texto.
+     *
+     * Embora o tipo aceite também outros componentes e elementos, esse uso não estará de acordo com as definições de uso e o componente poderá não se comportar corretamente. É importante que, ao implementar, o desenvolvedor siga essa orientação, para evitar quebra futura.
+     */
     children: ReactNode;
+    /**
+     * Função de callback, para que seja possível saber quando o usuário clicar no botão de fechar do componente. O botão em si, não executa uma ação. Ficará ao cargo do desenvolvedor implementar uma ação e anexá-la ao botão.
+     */
     onReset: Function;
+    /**
+     * Nome do ícone que deve ser carregado. O ícone deve estar contido na biblioteca de ícones do Pulso.
+     */
     icon: string;
+    /**
+     * Define o estilo do componente, assim como a categoria de sua mensagem.
+     */
     type: "success" | "informative" | "error" | "warning";
+    /**
+     * Habilita o estilo inverse do componente.
+     */
     inverse?: boolean;
+    /**
+     * Essa Prop inclui um atributo data-qa com o valor configurado no botão de fechar.
+     */
     dataQAClose?: string;
+    /**
+     * Essa Prop inclui um atributo data-collect com o valor configurado no botão de fechar.
+     */
     dataCollectClose?: string;
+    /**
+     * Essa Prop inclui um atributo data-collect-info com o valor configurado no botão de fechar.
+     */
     dataCollectInfoClose?: string;
@@ -11,0 +39,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

292681

increased by20.03%

Lines of code

3772

increased by12.2%

Worsened metrics

Number of low quality alerts

5

increased by66.67%

No dependency changes