@credithub/harlan-components 1.9.0 → 1.10.0

package/lib/esm/components/chart/quantityResult.js

@@ -1,33 +1,41 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 /* eslint-disable no-extra-boolean-cast */
 import React from "react";
 import cn from "classnames";
 import AddItemField from "../common/addItem";
 import { formatMoney, formatValue } from "../../utils/number";
+import { ResultContent } from "../interface/result";
+import styled from "styled-components";
+import theme from "../interface/theme";
 var QuantityContainer = function (_a) {
     var children = _a.children;
     return React.createElement("div", { className: cn('container', 'field-container') }, children);
 };
+var QuantidadeResultadosWrapper = styled(ResultContent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  @media only screen and (max-width: 768px) {\n    > * {\n      :not(:last-child) {\n        border-bottom: 1px solid ", ";\n      }\n    }\n  }\n  \n"], ["\n  @media only screen and (max-width: 768px) {\n    > * {\n      :not(:last-child) {\n        border-bottom: 1px solid ", ";\n      }\n    }\n  }\n  \n"])), theme.colors.cinzaClaro);
 var QuantidadeResultados = function (_a) {
     var _b = _a.quantidadeProtestos, quantidadeProtestos = _b === void 0 ? 0 : _b, _c = _a.quantidadeProcessos, quantidadeProcessos = _c === void 0 ? 0 : _c, _d = _a.quantidadeDividas, quantidadeDividas = _d === void 0 ? 0 : _d, _e = _a.quantidadeChequesSemFundos, quantidadeChequesSemFundos = _e === void 0 ? 0 : _e, _f = _a.quantidadeDividasSerasa, quantidadeDividasSerasa = _f === void 0 ? 0 : _f, _g = _a.quantidadeDividasBoaVista, quantidadeDividasBoaVista = _g === void 0 ? 0 : _g, _h = _a.valorTotalProtestos, valorTotalProtestos = _h === void 0 ? 0 : _h, _j = _a.valorTotalDividas, valorTotalDividas = _j === void 0 ? 0 : _j, _k = _a.valorTotalDividasSerasa, valorTotalDividasSerasa = _k === void 0 ? 0 : _k, _l = _a.valorTotalDividasBoaVista, valorTotalDividasBoaVista = _l === void 0 ? 0 : _l, _m = _a.ultimaOcorrenciaProtestos, ultimaOcorrenciaProtestos = _m === void 0 ? null : _m, _o = _a.ultimaOcorrenciaChequesSemFundos, ultimaOcorrenciaChequesSemFundos = _o === void 0 ? null : _o;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: cn('resumo-de-negativacoes-quantity') },
-            React.createElement(QuantityContainer, null,
-                React.createElement(AddItemField, { name: "Total Protestos", value: formatValue(quantidadeProtestos), className: cn("field-result") }),
-                React.createElement(AddItemField, { name: "Valor Total Protestos", value: formatMoney(valorTotalProtestos), className: cn("field-result") }),
-                React.createElement(AddItemField, { hidden: quantidadeProtestos == 0, name: "\u00DAltima Ocorr\u00EAncia", value: ultimaOcorrenciaProtestos, className: cn("field-result") })),
-            React.createElement(QuantityContainer, null,
-                React.createElement(AddItemField, { name: "Cheques Sem Fundos", value: formatValue(quantidadeChequesSemFundos), className: cn("field-result") }),
-                React.createElement(AddItemField, { hidden: quantidadeChequesSemFundos == 0, name: "\u00DAltima Ocorr\u00EAncia", value: ultimaOcorrenciaChequesSemFundos, className: cn("field-result") })),
-            React.createElement(QuantityContainer, null,
-                React.createElement(AddItemField, { name: "Processos Jur\u00EDdicos", value: formatValue(quantidadeProcessos), className: cn("field-result") })),
-            React.createElement(QuantityContainer, null,
-                React.createElement(AddItemField, { name: "D\u00EDvidas P\u00FAblicas", value: formatValue(quantidadeDividas), className: cn("field-result") }),
-                React.createElement(AddItemField, { name: "Total D\u00EDvidas P\u00FAblicas", value: formatMoney(valorTotalDividas), className: cn("field-result") })),
-            React.createElement(QuantityContainer, null,
-                React.createElement(AddItemField, { name: "Pefin Refin Serasa", value: formatValue(quantidadeDividasSerasa), className: cn("field-result") }),
-                React.createElement(AddItemField, { name: "Total Pefin Refin Serasa", value: formatMoney(valorTotalDividasSerasa), className: cn("field-result") })),
-            React.createElement(QuantityContainer, null,
-                React.createElement(AddItemField, { name: "Pefin Refin Boa Vista", value: formatValue(quantidadeDividasBoaVista), className: cn("field-result") }),
-                React.createElement(AddItemField, { name: "Total Pefin Refin Boa Vista", value: formatMoney(valorTotalDividasBoaVista), className: cn("field-result") })))));
+    return (React.createElement(QuantidadeResultadosWrapper, { desktop: "repeat(6, 1fr)", tablet: "repeat(3, 1fr)", mobile: "1fr" },
+        React.createElement(QuantityContainer, null,
+            React.createElement(AddItemField, { name: "Total Protestos", value: formatValue(quantidadeProtestos) }),
+            React.createElement(AddItemField, { name: "Valor Total Protestos", value: formatMoney(valorTotalProtestos) }),
+            React.createElement(AddItemField, { hidden: quantidadeProtestos == 0, name: "\u00DAltima Ocorr\u00EAncia", value: ultimaOcorrenciaProtestos })),
+        React.createElement(QuantityContainer, null,
+            React.createElement(AddItemField, { name: "Cheques Sem Fundos", value: formatValue(quantidadeChequesSemFundos) }),
+            React.createElement(AddItemField, { hidden: quantidadeChequesSemFundos == 0, name: "\u00DAltima Ocorr\u00EAncia", value: ultimaOcorrenciaChequesSemFundos })),
+        React.createElement(QuantityContainer, null,
+            React.createElement(AddItemField, { name: "Processos Jur\u00EDdicos", value: formatValue(quantidadeProcessos) })),
+        React.createElement(QuantityContainer, null,
+            React.createElement(AddItemField, { name: "D\u00EDvidas P\u00FAblicas", value: formatValue(quantidadeDividas) }),
+            React.createElement(AddItemField, { name: "Total D\u00EDvidas P\u00FAblicas", value: formatMoney(valorTotalDividas) })),
+        React.createElement(QuantityContainer, null,
+            React.createElement(AddItemField, { name: "Pefin Refin Serasa", value: formatValue(quantidadeDividasSerasa) }),
+            React.createElement(AddItemField, { name: "Total Pefin Refin Serasa", value: formatMoney(valorTotalDividasSerasa) })),
+        React.createElement(QuantityContainer, null,
+            React.createElement(AddItemField, { name: "Pefin Refin Boa Vista", value: formatValue(quantidadeDividasBoaVista) }),
+            React.createElement(AddItemField, { name: "Total Pefin Refin Boa Vista", value: formatMoney(valorTotalDividasBoaVista) }))));
 };
 export default QuantidadeResultados;
+var templateObject_1;

package/lib/esm/components/common/addItem.js

@@ -1,3 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -22,14 +26,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from "react";
 import cn from "classnames";
+import styled from "styled-components";
+import theme from "../interface/theme";
+var FieldName = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n/* Body 12 */\nfont-family: 'Open Sans';\nfont-style: normal;\nfont-weight: 400;\nfont-size: 12px;\nline-height: 16px;\n\n/* Cinza Escuro */\ncolor: ", ";\n"], ["\n/* Body 12 */\nfont-family: 'Open Sans';\nfont-style: normal;\nfont-weight: 400;\nfont-size: 12px;\nline-height: 16px;\n\n/* Cinza Escuro */\ncolor: ", ";\n"])), theme.colors.cinzaEscuro);
+var FieldValue = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n/* Headline 16 */\nfont-family: 'Open Sans';\nfont-style: normal;\nfont-weight: 700;\nfont-size: 16px;\nline-height: 36px;\n/* or 225% */\n\n/* Cinza Escuro */\ncolor: ", ";\n\n"], ["\n/* Headline 16 */\nfont-family: 'Open Sans';\nfont-style: normal;\nfont-weight: 700;\nfont-size: 16px;\nline-height: 36px;\n/* or 225% */\n\n/* Cinza Escuro */\ncolor: ", ";\n\n"])), theme.colors.cinzaEscuro);
 function AddItemField(_a) {
     var name = _a.name, value = _a.value, children = _a.children, className = _a.className, valueClassName = _a.valueClassName, nameClassName = _a.nameClassName, styleName = _a.styleName, _b = _a.defaultValue, defaultValue = _b === void 0 ? '----' : _b, props = __rest(_a, ["name", "value", "children", "className", "valueClassName", "nameClassName", "styleName", "defaultValue"]);
     var fieldClassName = cn("field", className);
     var valueClass = cn("value", valueClassName);
     var nameClass = cn("name", nameClassName);
     return (React.createElement("div", __assign({}, props, { className: fieldClassName }),
-        React.createElement("div", { className: valueClass }, value || defaultValue),
-        React.createElement("div", { className: nameClass, style: styleName }, name),
+        React.createElement(FieldName, { className: nameClass, style: styleName }, name),
+        React.createElement(FieldValue, { className: valueClass }, value || defaultValue),
         children));
 }
 export default AddItemField;
+var templateObject_1, templateObject_2;

package/lib/esm/components/common/button.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode } from "react";
 declare const Button: React.FC<React.HTMLAttributes<HTMLButtonElement> & {
     smallContent?: ReactNode;
 }>;

package/lib/esm/components/common/button.js

@@ -1,3 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -20,13 +24,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import classNames from 'classnames';
-import React from 'react';
+import classNames from "classnames";
+import React from "react";
+import styled from "styled-components";
+import theme from "../interface/theme";
+var StyledButton = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-style: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  background-color: ", ";\n  color: ", ";\n  \n  padding: 0.5rem 1rem;\n  border: none;\n  border-radius: 3.75rem;\n  cursor: pointer;\n  \n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  \n  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;\n\n  &:hover {\n    background-color: #0056b3;\n  }\n\n  @media (max-width: 768px) {\n    width: 100%;\n  }\n"], ["\n  font-style: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  background-color: ", ";\n  color: ", ";\n  \n  padding: 0.5rem 1rem;\n  border: none;\n  border-radius: 3.75rem;\n  cursor: pointer;\n  \n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  \n  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;\n\n  &:hover {\n    background-color: #0056b3;\n  }\n\n  @media (max-width: 768px) {\n    width: 100%;\n  }\n"])), theme.typography.headline14.fontStyle, theme.typography.headline14.fontWeight, theme.typography.headline14.fontSize, theme.typography.headline14.lineHeight, theme.colors.azulCredithub, theme.colors.white);
+var SmallContent = styled.small(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: #fdeb35;\n  display: block;\n  margin-top: 0.25rem;\n"], ["\n  color: #fdeb35;\n  display: block;\n  margin-top: 0.25rem;\n"])));
 var Button = function (_a) {
     var children = _a.children, className = _a.className, smallContent = _a.smallContent, props = __rest(_a, ["children", "className", "smallContent"]);
-    var buttonClassName = classNames('button', 'product-button', className);
-    return (React.createElement("button", __assign({ className: buttonClassName }, props),
-        children,
-        smallContent && React.createElement("small", null, smallContent)));
+    var buttonClassName = classNames("button", "product-button", className);
+    return (React.createElement(StyledButton, __assign({ className: buttonClassName }, props),
+        React.createElement("span", null, children),
+        smallContent && React.createElement(SmallContent, null, smallContent)));
 };
 export default Button;
+var templateObject_1, templateObject_2;

package/lib/esm/components/consultaRfb.d.ts

@@ -0,0 +1,16 @@
+import React, { PropsWithChildren } from "react";
+export type ConsultaRfbContextProps = Partial<{
+    rfbResponse: Document;
+    refetch: () => void;
+    error: Error | null;
+    isLoading: boolean;
+}>;
+export declare const ConsultaRfbContext: React.Context<Partial<{
+    rfbResponse: Document;
+    refetch: () => void;
+    error: Error | null;
+    isLoading: boolean;
+}> | null>;
+export declare const ConsultaRfbProvider: React.FC<PropsWithChildren<{
+    documento: string;
+}>>;

package/lib/esm/components/consultaRfb.js

@@ -0,0 +1,21 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { createContext } from "react";
+import { useQuery } from "./webservice";
+export var ConsultaRfbContext = createContext(null);
+export var ConsultaRfbProvider = function (_a) {
+    var _b, _c;
+    var children = _a.children, documento = _a.documento;
+    var query = useQuery("SELECT FROM 'RFB'.'CERTIDAO'", { documento: documento }, documento.length > 11);
+    return (React.createElement(ConsultaRfbContext.Provider, { value: __assign({ rfbResponse: (_c = (_b = query === null || query === void 0 ? void 0 : query.response) === null || _b === void 0 ? void 0 : _b.document) !== null && _c !== void 0 ? _c : undefined }, query) }, children));
+};

package/lib/esm/components/contacts/contacts.d.ts

@@ -12,7 +12,7 @@ export type Contact = {
     onClickDislike: () => void;
 };
 export type ContactsProps = {
-    onClickConsutarEmail: () => void;
+    onClickConsultarEmail: () => void;
 };
 declare const Contacts: React.FC<ContactsProps>;
 export default Contacts;

package/lib/esm/components/contacts/contacts.js

@@ -8,34 +8,38 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import React, { useContext } from "react";
-import { Result } from "../interface/result";
+import { Result, ResultContent } from "../interface/result";
 import { Queries } from "../webservice";
 import XPathUtils from "../../utils/xpath";
 import { phoneMask } from "../../utils/number";
 import ContactLikeDislikeSection from "./contactLikeDislikeSection";
+import ContatoIcon from "../../assets/icones/contato";
+import Button from "../common/button";
 export var ContactType;
 (function (ContactType) {
     ContactType["TELEFONE"] = "Telefone";
     ContactType["EMAIL"] = "Email";
 })(ContactType || (ContactType = {}));
 var Contacts = function (_a) {
-    var onClickConsutarEmail = _a.onClickConsutarEmail;
+    var onClickConsultarEmail = _a.onClickConsultarEmail;
     var ctx = useContext(Queries.Finder);
     var Section = ctx.Section;
-    return (React.createElement(Section, { ctx: ctx, title: "Contato", subtitle: "Meios De Contato", description: "Telefone, e-mail e outros", onSuccess: function (data) {
+    return (React.createElement(Section, { ctx: ctx, title: "Contato", subtitle: "Meios De Contato", description: "(Telefone, e-mail e outros)", minimized: false, icon: ContatoIcon, onSuccess: function (data) {
             var document = XPathUtils.select('string(//cpf|//cnpj)', data);
-            var telefones = __spreadArray(__spreadArray([], XPathUtils.select('//telefones/fixos/fixos', data), true), XPathUtils.select('//telefones/moveis/moveis', data), true).map(function (telefone) { return ({ type: 'Telefone', value: phoneMask(XPathUtils.select('string(./telefone)', telefone)) }); });
-            var emails = XPathUtils.select('//emails/emails', data).map(function (email) { return ({ type: 'Email', value: XPathUtils.select('string(./email)', email) }); });
-            var contacts = __spreadArray(__spreadArray([], telefones, true), emails, true);
-            var children = (React.createElement(Result, null,
-                React.createElement(Result, { isContainer: true, contentClassName: "contacts-container" }, contacts.map(function (_a, key) {
+            var telefones = __spreadArray(__spreadArray([], (XPathUtils.selectArray('//telefones/fixos/fixos', data) || []), true), (XPathUtils.selectArray('//telefones/moveis/moveis', data) || []), true).map(function (telefone) { return ({ type: 'Telefone', value: phoneMask(XPathUtils.select('string(./telefone)', telefone)) }); });
+            var emails = XPathUtils.selectArray('//emails/emails', data).map(function (email) { return ({ type: 'Email', value: XPathUtils.select('string(./email)', email) }); });
+            var children = (React.createElement(Result, { resultContentStriped: false },
+                React.createElement(ResultContent, { desktop: "1fr 1fr 1fr", tablet: "1fr 1fr", mobile: "1fr 1fr" }, telefones.map(function (_a, key) {
+                    var type = _a.type, value = _a.value;
+                    return (React.createElement(ContactLikeDislikeSection, { key: key, type: type, value: value, document: document }));
+                })),
+                React.createElement(ResultContent, { desktop: "1fr 1fr 1fr", tablet: "1fr 1fr", mobile: "1fr" }, emails.map(function (_a, key) {
                     var type = _a.type, value = _a.value;
                     return (React.createElement(ContactLikeDislikeSection, { key: key, type: type, value: value, document: document }));
                 }))));
             return {
                 children: children,
-                actions: (React.createElement("li", { className: "contacts-atualizar-email" },
-                    React.createElement("button", { className: "button", onClick: onClickConsutarEmail }, "Consultar E-mail em Dom\u00EDnio")))
+                actions: (React.createElement(Button, { className: "button", onClick: onClickConsultarEmail }, "Consultar E-mail em Dom\u00EDnio"))
             };
         } }));
 };

package/lib/esm/components/contacts/contactsLikeDislike.js

@@ -2,8 +2,6 @@ import React from "react";
 import ThumbsButton from "./thumbsButton";
 var ContactsLikeDislike = function (_a) {
     var likes = _a.likes, dislikes = _a.dislikes, onClickLike = _a.onClickLike, onClickDislike = _a.onClickDislike;
-    return (React.createElement("div", { className: "thumbs-container" },
-        React.createElement(ThumbsButton, { action: "like", count: likes, iconClass: "fa-thumbs-o-up", onClick: onClickLike }),
-        React.createElement(ThumbsButton, { action: "dislike", count: dislikes, iconClass: "fa-thumbs-o-down", onClick: onClickDislike })));
+    return (React.createElement(ThumbsButton, { likes: likes, dislikes: dislikes, onClickLike: onClickLike, onClickDislike: onClickDislike }));
 };
 export default ContactsLikeDislike;

package/lib/esm/components/contacts/thumbsButton.d.ts

@@ -1,10 +1,9 @@
 import React from "react";
 type ThumbsButtonProps = {
-    count?: number;
-    iconClass: string;
-    action: "like" | "dislike";
-    onClick: () => void;
-    className?: string;
+    likes?: number;
+    dislikes?: number;
+    onClickLike: () => void;
+    onClickDislike: () => void;
 };
 declare const ThumbsButton: React.FC<ThumbsButtonProps>;
 export default ThumbsButton;

package/lib/esm/components/contacts/thumbsButton.js

@@ -1,17 +1,41 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import ThumbDown from "../../assets/btn/thumbDown";
+import ThumbUp from "../../assets/btn/thumbUp";
 import React from "react";
-import classnames from "classnames";
+import styled from "styled-components";
+import theme from "../interface/theme";
+var ButtonContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  background-color: ", ";\n  border-radius: 10px;\n  overflow: hidden;\n  position: relative;\n  font-size: 10px;\n  width: 100px;\n  height: 20px;\n"], ["\n  display: flex;\n  background-color: ", ";\n  border-radius: 10px;\n  overflow: hidden;\n  position: relative;\n  font-size: 10px;\n  width: 100px;\n  height: 20px;\n"])), theme.colors.cinzaClaro);
+var Button = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  cursor: pointer;\n  border: none;\n  background-color: ", ";\n  color: white;\n  flex: none;\n  width: 50%;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  cursor: pointer;\n  border: none;\n  background-color: ", ";\n  color: white;\n  flex: none;\n  width: 50%;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) {
+    return props.isSelected
+        ? props.action === "like"
+            ? "#007aff"
+            : "#ff4b4b"
+        : "transparent";
+}, function (props) {
+    return props.isSelected
+        ? props.action === "like"
+            ? "#005ecb"
+            : "#d63447"
+        : "#f5f5f5";
+});
+var IconWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-right: 5px;\n"], ["\n  margin-right: 5px;\n"])));
+var Count = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n"], ["\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n"])), function (props) { return (props.action === "dislike" ? "5px" : "0"); });
+var Separator = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  height: calc(100% - 6px);\n  width: 1px;\n  background-color: ", ";\n  z-index: 1;\n"], ["\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  height: calc(100% - 6px);\n  width: 1px;\n  background-color: ", ";\n  z-index: 1;\n"])), theme.colors.cinzaEscuro);
 var ThumbsButton = function (_a) {
-    var _b = _a.count, count = _b === void 0 ? 0 : _b, action = _a.action, iconClass = _a.iconClass, onClick = _a.onClick, className = _a.className;
-    var likeButtonIsActive = action == 'like' && count > 0;
-    var dislikeButtonIsActive = action == 'dislike' && count > 0;
-    var buttonClasses = classnames('thumbs-field', {
-        'thumbs-field-like': likeButtonIsActive,
-        'thumbs-field-dislike': dislikeButtonIsActive
-    }, className);
-    return (React.createElement("div", { className: buttonClasses, onClick: onClick },
-        React.createElement("span", null,
-            dislikeButtonIsActive ? "-".concat(count) : count,
-            " "),
-        React.createElement("i", { className: "fa ".concat(iconClass) })));
+    var _b = _a.likes, likes = _b === void 0 ? 0 : _b, _c = _a.dislikes, dislikes = _c === void 0 ? 0 : _c, onClickLike = _a.onClickLike, onClickDislike = _a.onClickDislike;
+    return (React.createElement(ButtonContainer, null,
+        React.createElement(Button, { isSelected: likes > 0, onClick: onClickLike, action: "like" },
+            React.createElement(IconWrapper, { isSelected: likes > 0, action: "like" },
+                React.createElement(ThumbUp, { fill: likes > 0 ? "white" : theme.colors.cinzaEscuro })),
+            React.createElement(Count, { action: "like" }, likes > 0 ? likes : "")),
+        React.createElement(Separator, null),
+        React.createElement(Button, { isSelected: dislikes > 0, onClick: onClickDislike, action: "dislike" },
+            React.createElement(Count, { action: "dislike" }, dislikes > 0 ? "".concat(dislikes) : ""),
+            React.createElement(IconWrapper, { isSelected: dislikes > 0, action: "dislike" },
+                React.createElement(ThumbDown, { fill: dislikes > 0 ? "white" : theme.colors.cinzaEscuro })))));
 };
 export default ThumbsButton;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib/esm/components/dividasPublicas/dividasPublicas.js

@@ -31,7 +31,7 @@ var DividasPublicas = function () {
                 valorConsolidado: formatMoney(XPathUtils.select('string(./valor_consolidado)', divida)),
                 tipoDeDivida: tipo
             }); }; };
-            var dividas = __spreadArray(__spreadArray(__spreadArray([], XPathUtils.select('//dividas/fgts/divida', document).map(parseDividas('FGTS')), true), XPathUtils.select('//dividas/previdenciaria/divida', document).map(parseDividas('Previdenciária')), true), XPathUtils.select('//dividas/ativa-geral/divida', document).map(parseDividas('Divida Ativa União')), true);
+            var dividas = __spreadArray(__spreadArray(__spreadArray([], XPathUtils.selectArray('//dividas/fgts/divida', document).map(parseDividas('FGTS')), true), XPathUtils.selectArray('//dividas/previdenciaria/divida', document).map(parseDividas('Previdenciária')), true), XPathUtils.selectArray('//dividas/ativa-geral/divida', document).map(parseDividas('Divida Ativa União')), true);
             var children = (React.createElement(Result, null,
                 React.createElement(DividasPublicasList, { dividas: dividas })));
             return {

package/lib/esm/components/dossie/carrousel/carrousel.js

@@ -1,8 +1,15 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from "react";
 import Companylogo from "../companyLogo/companyLogo";
+import styled from "styled-components";
+var CarouselContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  margin: 1rem;\n  max-width: 320px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  margin: 1rem;\n  max-width: 320px;\n"])));
 export var Carrousel = function (_a) {
     var name = _a.name, document = _a.document;
-    return (React.createElement("div", { className: "carrousel-container" },
+    return (React.createElement(CarouselContainer, null,
         React.createElement(Companylogo, { name: name, document: document })));
 };
 export default Carrousel;
+var templateObject_1;

package/lib/esm/components/dossie/companyLogo/companyLogo.js

@@ -1,14 +1,27 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from "react";
-import cn from "classnames";
-import AddItemField from "../../../components/common/addItem";
+import styled from "styled-components";
+import IconeEmpresa from "../../../assets/icones/iconeEmpresa";
+import IconePessoa from "../../../assets/icones/iconePessoa";
+import { isDocumentoPF } from "../../../utils/string";
+import theme from "../../../components/interface/theme";
+var LogoContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n"])));
+var CompanyName = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 1rem;\n  color: ", ";\n  text-align: center;\n  margin-bottom: 1rem;\n  line-height: 1.125rem;\n  font-weight: bold;\n"], ["\n  font-size: 1rem;\n  color: ", ";\n  text-align: center;\n  margin-bottom: 1rem;\n  line-height: 1.125rem;\n  font-weight: bold;\n"])), theme.colors.cinzaEscuro);
+var DocumentContainer = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 1rem;\n  color: ", ";\n  text-align: center;\n  position: relative;\n  background-color: ", ";\n  padding: 0.25rem 0.5rem;\n  border-radius: 3.75rem;\n  margin-top: 1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  font-size: 1rem;\n  color: ", ";\n  text-align: center;\n  position: relative;\n  background-color: ", ";\n  padding: 0.25rem 0.5rem;\n  border-radius: 3.75rem;\n  margin-top: 1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), theme.colors.cinzaEscuro, theme.colors.cinzaClaro);
+var DocumentPrefix = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 0.5rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 0.5rem;\n"])));
 var Companylogo = function (_a) {
     var name = _a.name, document = _a.document;
-    var hiddenStyle = { display: "none" };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: cn("companyLogo-icon") },
-            React.createElement("i", { className: "fa fa-user-circle-o" })),
-        React.createElement("div", { className: cn("content", "companyLogo-content") },
-            React.createElement(AddItemField, { name: "Nome", value: name, className: cn("field", "companyLogo-field"), styleName: hiddenStyle }),
-            React.createElement(AddItemField, { name: "Documento", value: document, styleName: hiddenStyle }))));
+        React.createElement(LogoContainer, null,
+            React.createElement(CompanyName, null, name),
+            isDocumentoPF(document) ? (React.createElement(IconePessoa, { size: 60, circleFill: theme.colors.cinzaClaro, pathFill: theme.colors.cinzaEscuro, className: "company-logo-icon" })) : (React.createElement(IconeEmpresa, { size: 60, circleFill: theme.colors.cinzaClaro, className: "company-logo-icon" })),
+            React.createElement(DocumentContainer, null,
+                React.createElement(DocumentPrefix, null,
+                    isDocumentoPF(document) ? "CPF: " : "CNPJ: ",
+                    document)))));
 };
 export default Companylogo;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/esm/components/dossie/dossie.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
 interface DossieProps {
+    documento: string;
+    rfbResponse?: Document;
     onOpenNewTransactionModal?: () => void;
 }
 declare const Dossie: React.FC<DossieProps>;

package/lib/esm/components/dossie/dossie.js

@@ -1,31 +1,45 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+/* eslint-disable @typescript-eslint/no-unused-vars */
 //eslint-disable-ban-types
 import React, { useContext } from "react";
-import cn from "classnames";
 import { Summary } from "./summary/summary";
 import { TransactionsTable } from "./transactionTable/transactionTable";
 import { Carrousel } from "./carrousel/carrousel";
 import { Result } from "../interface/result";
-import { ReclameAquiCarousel, } from "../reclameAqui/reclameAquiCarousel";
+import { ReclameAquiCarousel } from "../reclameAqui/reclameAquiCarousel";
 import { Queries } from "../webservice";
 import XPathUtils from "../../utils/xpath";
 import { formatCnpj, formatCpf } from "../../utils/string";
-var Dossie = function () {
+import styled from "styled-components";
+import { useConsultaRfb } from "../../hooks/useConsultaRfb";
+var DossieGrid = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: 1fr 2fr;\n  justify-items: center;\n  align-items: flex-start;\n  @media (max-width: 992px) {\n    grid-template-columns: 1fr;\n  }\n"], ["\n  display: grid;\n  grid-template-columns: 1fr 2fr;\n  justify-items: center;\n  align-items: flex-start;\n  @media (max-width: 992px) {\n    grid-template-columns: 1fr;\n  }\n"])));
+var Dossie = function (_a) {
+    var documento = _a.documento;
     var finderCtx = useContext(Queries.Finder);
+    var rfbResponse = useConsultaRfb().rfbResponse;
     var Section = finderCtx.Section;
-    return (React.createElement(Section, { ctx: finderCtx, hideHeader: true, onSuccess: function (data) {
-            var isPF = !!XPathUtils.select("string(//cadastro/cpf)", data);
-            var name = isPF
-                ? XPathUtils.select("string(//cadastro/nome)", data)
-                : XPathUtils.select("string(//cadastro/razaoSocial)", data);
-            var document = isPF
-                ? formatCpf(XPathUtils.select("string(//cadastro/cpf)", data))
-                : formatCnpj(XPathUtils.select("string(//cadastro/cnpj)", data));
-            var DossieCarrousel = function () { return !isPF ? (React.createElement(ReclameAquiCarousel, { documento: document, nome: name })) : (React.createElement(Carrousel, { name: name, document: document })); };
-            return (React.createElement(Result, null,
-                React.createElement("div", { className: cn("dossie-grid", "dossie") },
-                    React.createElement(DossieCarrousel, null),
-                    React.createElement(TransactionsTable, { events: XPathUtils.select("//historico/consulta", data) })),
-                React.createElement(Summary, { finderResponse: data })));
-        } }));
+    var response = function (_data) {
+        var data = _data instanceof Error ? undefined : _data;
+        var isPF = (documento === null || documento === void 0 ? void 0 : documento.length) === 11;
+        var name = (isPF
+            ? XPathUtils.select("string(//cadastro/nome)", data)
+            : XPathUtils.select("string(//cadastro/razaoSocial)", data) || rfbResponse && XPathUtils.select("string(//RFB/nome)", rfbResponse));
+        var document = isPF
+            ? formatCpf(documento)
+            : formatCnpj(documento);
+        var DossieCarrousel = function () {
+            return !isPF ? (React.createElement(ReclameAquiCarousel, { documento: document, nome: name })) : (React.createElement(Carrousel, { name: name, document: document }));
+        };
+        return (React.createElement(Result, null,
+            React.createElement(DossieGrid, null,
+                React.createElement(DossieCarrousel, null),
+                React.createElement(Summary, { finderResponse: data, rfbResponse: rfbResponse })),
+            React.createElement(TransactionsTable, { events: XPathUtils.select("//historico/consulta", data) || [] })));
+    };
+    return (React.createElement(Section, { ctx: finderCtx, hideHeader: true, minimized: false, isError: function (e) { return response(e); }, onSuccess: response }));
 };
 export default Dossie;
+var templateObject_1;

package/lib/esm/components/dossie/summary/cardsAndProducts.d.ts

@@ -0,0 +1,29 @@
+declare const useCardsAndProducts: ({ finderResponse, rfbResponse }: {
+    finderResponse?: Document | undefined;
+    rfbResponse?: Document | undefined;
+}) => {
+    cards: {
+        title: string | false;
+        header: string;
+    }[];
+    products: ({
+        title: string;
+        onClick: () => void;
+        price: number;
+        hide?: undefined;
+        onclick?: undefined;
+    } | {
+        title: string;
+        price: number;
+        onClick: () => void;
+        hide: boolean;
+        onclick?: undefined;
+    } | {
+        title: string;
+        price: number;
+        onclick: () => void;
+        hide: boolean;
+        onClick?: undefined;
+    })[];
+};
+export default useCardsAndProducts;