@credithub/harlan-components 1.8.0 → 1.10.0

package/lib/cjs/assets/icones/protestosImpostos.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var theme_1 = __importDefault(require("../../components/interface/theme"));
+var ProtestosImpostosIcon = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.size, size = _c === void 0 ? 30 : _c, _d = _a.circleFill, circleFill = _d === void 0 ? theme_1.default.colors.azulCredithub : _d;
+    return (react_1.default.createElement("svg", { width: size, height: size, viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className },
+        react_1.default.createElement("circle", { cx: "15", cy: "15", r: "15", fill: circleFill }),
+        react_1.default.createElement("mask", { id: "mask0_4_379", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "3", y: "3", width: "24", height: "24" },
+            react_1.default.createElement("rect", { x: "3", y: "3", width: "24", height: "24", fill: "#D9D9D9" })),
+        react_1.default.createElement("g", { mask: "url(#mask0_4_379)" },
+            react_1.default.createElement("path", { d: "M18.25 15.125L17.575 14.45C17.425 14.3 17.25 14.2292 17.05 14.2375C16.85 14.2458 16.675 14.325 16.525 14.475C16.375 14.625 16.3 14.8 16.3 15C16.3 15.2 16.375 15.375 16.525 15.525L18.3 17.3C18.5 17.5 18.7333 17.6 19 17.6C19.2667 17.6 19.5 17.5 19.7 17.3L21.475 15.525C21.625 15.375 21.7 15.2 21.7 15C21.7 14.8 21.625 14.625 21.475 14.475C21.325 14.325 21.1458 14.25 20.9375 14.25C20.7292 14.25 20.55 14.325 20.4 14.475L19.75 15.125V12.75C19.75 12.5333 19.6792 12.3542 19.5375 12.2125C19.3958 12.0708 19.2167 12 19 12C18.7833 12 18.6042 12.0708 18.4625 12.2125C18.3208 12.3542 18.25 12.5333 18.25 12.75V15.125ZM7 23C6.45 23 5.97917 22.8042 5.5875 22.4125C5.19583 22.0208 5 21.55 5 21V9C5 8.45 5.19583 7.97917 5.5875 7.5875C5.97917 7.19583 6.45 7 7 7H23C23.55 7 24.0208 7.19583 24.4125 7.5875C24.8042 7.97917 25 8.45 25 9V21C25 21.55 24.8042 22.0208 24.4125 22.4125C24.0208 22.8042 23.55 23 23 23H7ZM7 21H23V9H7V21ZM10 13.5H11V15.75C11 15.9667 11.0708 16.1458 11.2125 16.2875C11.3542 16.4292 11.5333 16.5 11.75 16.5C11.9667 16.5 12.1458 16.4292 12.2875 16.2875C12.4292 16.1458 12.5 15.9667 12.5 15.75V13.5H13.5V17.25C13.5 17.4667 13.5708 17.6458 13.7125 17.7875C13.8542 17.9292 14.0333 18 14.25 18C14.4667 18 14.6458 17.9292 14.7875 17.7875C14.9292 17.6458 15 17.4667 15 17.25V13C15 12.7167 14.9042 12.4792 14.7125 12.2875C14.5208 12.0958 14.2833 12 14 12H9.5C9.21667 12 8.97917 12.0958 8.7875 12.2875C8.59583 12.4792 8.5 12.7167 8.5 13V17.25C8.5 17.4667 8.57083 17.6458 8.7125 17.7875C8.85417 17.9292 9.03333 18 9.25 18C9.46667 18 9.64583 17.9292 9.7875 17.7875C9.92917 17.6458 10 17.4667 10 17.25V13.5Z", fill: "white" }))));
+};
+exports.default = ProtestosImpostosIcon;

package/lib/cjs/assets/icones/quadroSocietario.d.ts

@@ -0,0 +1,4 @@
+import { IconProps } from '@/types/icon';
+import React from 'react';
+declare const QuadroSocietarioIcon: React.FC<IconProps>;
+export default QuadroSocietarioIcon;

package/lib/cjs/assets/icones/quadroSocietario.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var theme_1 = __importDefault(require("../../components/interface/theme"));
+var react_1 = __importDefault(require("react"));
+var QuadroSocietarioIcon = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 30 : _c, _d = _a.circleFill, circleFill = _d === void 0 ? theme_1.default.colors.azulCredithub : _d;
+    return (react_1.default.createElement("svg", { width: size, height: size, viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className },
+        react_1.default.createElement("circle", { cx: "15", cy: "15", r: "15", fill: circleFill }),
+        react_1.default.createElement("mask", { id: "mask0_4_371", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "3", y: "3", width: "24", height: "24" },
+            react_1.default.createElement("rect", { x: "3", y: "3", width: "24", height: "24", fill: "#D9D9D9" })),
+        react_1.default.createElement("g", { mask: "url(#mask0_4_371)" },
+            react_1.default.createElement("path", { d: "M4 20.2C4 19.6333 4.14583 19.1125 4.4375 18.6375C4.72917 18.1625 5.11667 17.8 5.6 17.55C6.63333 17.0333 7.68333 16.6458 8.75 16.3875C9.81667 16.1292 10.9 16 12 16C13.1 16 14.1833 16.1292 15.25 16.3875C16.3167 16.6458 17.3667 17.0333 18.4 17.55C18.8833 17.8 19.2708 18.1625 19.5625 18.6375C19.8542 19.1125 20 19.6333 20 20.2V21C20 21.55 19.8042 22.0208 19.4125 22.4125C19.0208 22.8042 18.55 23 18 23H6C5.45 23 4.97917 22.8042 4.5875 22.4125C4.19583 22.0208 4 21.55 4 21V20.2ZM24 23H21.45C21.6333 22.7 21.7708 22.3792 21.8625 22.0375C21.9542 21.6958 22 21.35 22 21V20C22 19.2667 21.7958 18.5625 21.3875 17.8875C20.9792 17.2125 20.4 16.6333 19.65 16.15C20.5 16.25 21.3 16.4208 22.05 16.6625C22.8 16.9042 23.5 17.2 24.15 17.55C24.75 17.8833 25.2083 18.2542 25.525 18.6625C25.8417 19.0708 26 19.5167 26 20V21C26 21.55 25.8042 22.0208 25.4125 22.4125C25.0208 22.8042 24.55 23 24 23ZM12 15C10.9 15 9.95833 14.6083 9.175 13.825C8.39167 13.0417 8 12.1 8 11C8 9.9 8.39167 8.95833 9.175 8.175C9.95833 7.39167 10.9 7 12 7C13.1 7 14.0417 7.39167 14.825 8.175C15.6083 8.95833 16 9.9 16 11C16 12.1 15.6083 13.0417 14.825 13.825C14.0417 14.6083 13.1 15 12 15ZM22 11C22 12.1 21.6083 13.0417 20.825 13.825C20.0417 14.6083 19.1 15 18 15C17.8167 15 17.5833 14.9792 17.3 14.9375C17.0167 14.8958 16.7833 14.85 16.6 14.8C17.05 14.2667 17.3958 13.675 17.6375 13.025C17.8792 12.375 18 11.7 18 11C18 10.3 17.8792 9.625 17.6375 8.975C17.3958 8.325 17.05 7.73333 16.6 7.2C16.8333 7.11667 17.0667 7.0625 17.3 7.0375C17.5333 7.0125 17.7667 7 18 7C19.1 7 20.0417 7.39167 20.825 8.175C21.6083 8.95833 22 9.9 22 11ZM6 21H18V20.2C18 20.0167 17.9542 19.85 17.8625 19.7C17.7708 19.55 17.65 19.4333 17.5 19.35C16.6 18.9 15.6917 18.5625 14.775 18.3375C13.8583 18.1125 12.9333 18 12 18C11.0667 18 10.1417 18.1125 9.225 18.3375C8.30833 18.5625 7.4 18.9 6.5 19.35C6.35 19.4333 6.22917 19.55 6.1375 19.7C6.04583 19.85 6 20.0167 6 20.2V21ZM12 13C12.55 13 13.0208 12.8042 13.4125 12.4125C13.8042 12.0208 14 11.55 14 11C14 10.45 13.8042 9.97917 13.4125 9.5875C13.0208 9.19583 12.55 9 12 9C11.45 9 10.9792 9.19583 10.5875 9.5875C10.1958 9.97917 10 10.45 10 11C10 11.55 10.1958 12.0208 10.5875 12.4125C10.9792 12.8042 11.45 13 12 13Z", fill: "white" }))));
+};
+exports.default = QuadroSocietarioIcon;

package/lib/cjs/assets/icones/ultimaMovimentacao.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { IconProps } from "@/types/icon";
+declare const UltimaMovimentacaoIcon: React.FC<IconProps>;
+export default UltimaMovimentacaoIcon;

package/lib/cjs/assets/icones/ultimaMovimentacao.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var theme_1 = __importDefault(require("../../components/interface/theme"));
+var UltimaMovimentacaoIcon = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.size, size = _c === void 0 ? 30 : _c, _d = _a.circleFill, circleFill = _d === void 0 ? theme_1.default.colors.azulCredithub : _d;
+    return (react_1.default.createElement("svg", { width: size, height: size, viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className },
+        react_1.default.createElement("circle", { cx: "15", cy: "15", r: "15", fill: circleFill }),
+        react_1.default.createElement("mask", { id: "mask0_4_382", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "3", y: "3", width: "24", height: "24" },
+            react_1.default.createElement("rect", { x: "3", y: "3", width: "24", height: "24", fill: "#D9D9D9" })),
+        react_1.default.createElement("g", { mask: "url(#mask0_4_382)" },
+            react_1.default.createElement("path", { d: "M13.275 15C12.8083 15 12.425 14.825 12.125 14.475C11.825 14.125 11.7167 13.7167 11.8 13.25L12.1 11.45C12.2333 10.7333 12.5708 10.1458 13.1125 9.6875C13.6542 9.22917 14.2833 9 15 9C15.7333 9 16.3708 9.22917 16.9125 9.6875C17.4542 10.1458 17.7917 10.7333 17.925 11.45L18.225 13.25C18.3083 13.7167 18.2 14.125 17.9 14.475C17.6 14.825 17.2167 15 16.75 15H13.275ZM13.875 13H16.15L15.95 11.775C15.9167 11.5417 15.8083 11.3542 15.625 11.2125C15.4417 11.0708 15.2333 11 15 11C14.7667 11 14.5625 11.0708 14.3875 11.2125C14.2125 11.3542 14.1083 11.5417 14.075 11.775L13.875 13ZM6.1 15.975C5.71667 15.9917 5.3875 15.9167 5.1125 15.75C4.8375 15.5833 4.65833 15.325 4.575 14.975C4.54167 14.825 4.53333 14.675 4.55 14.525C4.56667 14.375 4.60833 14.2333 4.675 14.1C4.675 14.1167 4.66667 14.0833 4.65 14C4.61667 13.9667 4.53333 13.7667 4.4 13.4C4.36667 13.2 4.39167 13.0083 4.475 12.825C4.55833 12.6417 4.66667 12.4833 4.8 12.35L4.85 12.3C4.88333 11.9833 5.0125 11.7167 5.2375 11.5C5.4625 11.2833 5.74167 11.175 6.075 11.175C6.125 11.175 6.28333 11.2083 6.55 11.275L6.625 11.25C6.70833 11.1667 6.81667 11.1042 6.95 11.0625C7.08333 11.0208 7.225 11 7.375 11C7.55833 11 7.72083 11.0292 7.8625 11.0875C8.00417 11.1458 8.11667 11.2333 8.2 11.35C8.21667 11.35 8.22917 11.3542 8.2375 11.3625C8.24583 11.3708 8.25833 11.375 8.275 11.375C8.50833 11.3917 8.7125 11.4625 8.8875 11.5875C9.0625 11.7125 9.19167 11.8833 9.275 12.1C9.30833 12.2167 9.32083 12.3292 9.3125 12.4375C9.30417 12.5458 9.28333 12.65 9.25 12.75C9.25 12.7667 9.25833 12.8 9.275 12.85C9.39167 12.9667 9.48333 13.0958 9.55 13.2375C9.61667 13.3792 9.65 13.525 9.65 13.675C9.65 13.7417 9.6 13.9167 9.5 14.2C9.48333 14.2333 9.48333 14.2667 9.5 14.3L9.55 14.7C9.55 15.05 9.40417 15.35 9.1125 15.6C8.82083 15.85 8.46667 15.975 8.05 15.975H6.1ZM23 16C22.45 16 21.9792 15.8042 21.5875 15.4125C21.1958 15.0208 21 14.55 21 14C21 13.8 21.0292 13.6125 21.0875 13.4375C21.1458 13.2625 21.225 13.0917 21.325 12.925L20.625 12.3C20.4583 12.1667 20.4292 12 20.5375 11.8C20.6458 11.6 20.8 11.5 21 11.5H23C23.55 11.5 24.0208 11.6958 24.4125 12.0875C24.8042 12.4792 25 12.95 25 13.5V14C25 14.55 24.8042 15.0208 24.4125 15.4125C24.0208 15.8042 23.55 16 23 16ZM3 20V19.425C3 18.6917 3.37083 18.1042 4.1125 17.6625C4.85417 17.2208 5.81667 17 7 17C7.21667 17 7.425 17.0042 7.625 17.0125C7.825 17.0208 8.01667 17.0417 8.2 17.075C7.96667 17.4083 7.79167 17.7667 7.675 18.15C7.55833 18.5333 7.5 18.9417 7.5 19.375V21H4C3.71667 21 3.47917 20.9042 3.2875 20.7125C3.09583 20.5208 3 20.2833 3 20ZM9 20V19.375C9 18.2917 9.55417 17.4167 10.6625 16.75C11.7708 16.0833 13.2167 15.75 15 15.75C16.8 15.75 18.25 16.0833 19.35 16.75C20.45 17.4167 21 18.2917 21 19.375V20C21 20.2833 20.9042 20.5208 20.7125 20.7125C20.5208 20.9042 20.2833 21 20 21H10C9.71667 21 9.47917 20.9042 9.2875 20.7125C9.09583 20.5208 9 20.2833 9 20ZM23 17C24.2 17 25.1667 17.2208 25.9 17.6625C26.6333 18.1042 27 18.6917 27 19.425V20C27 20.2833 26.9042 20.5208 26.7125 20.7125C26.5208 20.9042 26.2833 21 26 21H22.5V19.375C22.5 18.9417 22.4458 18.5333 22.3375 18.15C22.2292 17.7667 22.0667 17.4083 21.85 17.075C22.0333 17.0417 22.2208 17.0208 22.4125 17.0125C22.6042 17.0042 22.8 17 23 17ZM15 17.75C14.05 17.75 13.2 17.875 12.45 18.125C11.7 18.375 11.2583 18.6667 11.125 19H18.9C18.75 18.6667 18.3042 18.375 17.5625 18.125C16.8208 17.875 15.9667 17.75 15 17.75Z", fill: "white" }))));
+};
+exports.default = UltimaMovimentacaoIcon;

package/lib/cjs/components/adresses/{adresses.d.ts → addresses.d.ts}

@@ -13,6 +13,7 @@ export type Address = {
 };
 interface Addresses {
     apiKey: string;
+    rfbResponse?: Document;
 }
 declare const Addresses: React.FC<Addresses>;
 export default Addresses;

package/lib/cjs/components/adresses/addresses.js

@@ -0,0 +1,81 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var result_1 = require("../interface/result");
+var addItem_1 = __importDefault(require("../common/addItem"));
+var webservice_1 = require("../webservice");
+var xpath_1 = __importDefault(require("../../utils/xpath"));
+var endereco_1 = __importDefault(require("../../assets/icones/endereco"));
+var useConsultaRfb_1 = require("../../hooks/useConsultaRfb");
+var underscore_1 = require("underscore");
+var LazyMap = react_1.default.lazy(function () { return Promise.resolve().then(function () { return __importStar(require("./map")); }); });
+var Addresses = function (_a) {
+    var apiKey = _a.apiKey;
+    var ctx = (0, react_1.useContext)(webservice_1.Queries.Finder);
+    var Section = ctx.Section;
+    var rfbResponse = (0, useConsultaRfb_1.useConsultaRfb)().rfbResponse;
+    var response = function (data) {
+        var _addresses = __spreadArray(__spreadArray([], (data && xpath_1.default.select("//enderecos/enderecos", data) || []), true), (!data && rfbResponse && xpath_1.default.select("//RFB/enderecos/endereco", rfbResponse) || []), true);
+        var addresses = (0, underscore_1.uniq)(_addresses.map(function (address) { return ({
+            type: xpath_1.default.select('string(//tipoLogradouro)', address),
+            address: xpath_1.default.select('string(//logradouro)', address),
+            number: xpath_1.default.select('string(//numero)', address),
+            zipcode: xpath_1.default.select('string(//cep)', address),
+            district: xpath_1.default.select('string(//bairro)', address),
+            city: xpath_1.default.select('string(//cidade)', address),
+            state: xpath_1.default.select('string(//uf)', address),
+            urlImage: '',
+            urlMaps: ''
+        }); }), (function (e) { return e.address + e.district; }));
+        return (react_1.default.createElement(result_1.Result, null,
+            react_1.default.createElement(react_1.default.Suspense, { fallback: react_1.default.createElement("div", null, "Carregando...") }, addresses.map(function (address, index) { return (react_1.default.createElement(result_1.ResultContent, { desktop: "repeat(7, 1fr)", tablet: "repeat(4, 1fr)", mobile: "repeat(2, 1fr)", key: index },
+                react_1.default.createElement(addItem_1.default, { name: "Tipo", value: address.type, style: { display: "inline-block" } }),
+                react_1.default.createElement(addItem_1.default, { name: "Endere\u00E7o", value: address.address, style: { display: "inline-block" } }),
+                react_1.default.createElement(addItem_1.default, { name: "N\u00FAmero", value: address.number, style: { display: "inline-block" } }),
+                react_1.default.createElement(addItem_1.default, { name: "CEP", value: address.zipcode, style: { display: "inline-block" } }),
+                react_1.default.createElement(addItem_1.default, { name: "Bairro", value: address.district, style: { display: "inline-block" } }),
+                react_1.default.createElement(addItem_1.default, { name: "Cidade", value: address.city, style: { display: "inline-block" } }),
+                react_1.default.createElement(addItem_1.default, { name: "Estado", value: address.state, style: { display: "inline-block" } }),
+                react_1.default.createElement("div", { hidden: true, className: (0, classnames_1.default)("field map") },
+                    react_1.default.createElement("a", { href: '', hidden: true },
+                        react_1.default.createElement(LazyMap, { address: address.address, apiKey: apiKey }))))); }))));
+    };
+    return (react_1.default.createElement(Section, { title: "Endere\u00E7os", subtitle: "Localiza\u00E7\u00E3o", description: "(Endere\u00E7amento e Mapa)", icon: endereco_1.default, minimized: false, ctx: ctx, onError: function () { return response(undefined); }, onSuccess: response }));
+};
+exports.default = Addresses;

package/lib/cjs/components/bank-accounts/bank-accounts.js

@@ -9,18 +9,25 @@ var webservice_1 = require("../webservice");
 var result_1 = require("../interface/result");
 var addItem_1 = __importDefault(require("../common/addItem"));
 var xpath_1 = __importDefault(require("../../utils/xpath"));
-var resultWithoutInformation_1 = __importDefault(require("../interface/resultWithoutInformation"));
+var contasBancarias_1 = __importDefault(require("../../assets/icones/contasBancarias"));
+var statusMessage_1 = __importDefault(require("../interface/statusMessage"));
+var theme_1 = __importDefault(require("../interface/theme"));
 var BankAccounts = function () {
     var ctx = (0, react_2.useContext)(webservice_1.Queries.Finder);
     var Section = ctx.Section;
-    return (react_1.default.createElement(Section, { title: "Informações de Contas Bancárias", subtitle: "Vejas as informações disponíveis de contas bancárias", ctx: ctx, onSuccess: function (data) {
-            var accounts = xpath_1.default.select("//bank-info/node", data);
-            if (!(accounts === null || accounts === void 0 ? void 0 : accounts.length))
-                return react_1.default.createElement(resultWithoutInformation_1.default, null);
-            return (react_1.default.createElement(result_1.Result, null, accounts.map(function (account, key) { return (react_1.default.createElement(result_1.Result, { key: key, isContainer: true },
-                react_1.default.createElement(addItem_1.default, { name: "Banco", value: xpath_1.default.select("string(banco)", account) }),
-                react_1.default.createElement(addItem_1.default, { name: "Ag\u00EAncia", value: xpath_1.default.select("string(agencia)", account) }),
-                react_1.default.createElement(addItem_1.default, { name: "Conta", value: xpath_1.default.select("string(conta)", account) }))); })));
+    return (react_1.default.createElement(Section, { title: "Informações de Contas Bancárias", subtitle: "Vejas as informações disponíveis de contas bancárias", icon: contasBancarias_1.default, ctx: ctx, minimized: false, onSuccess: function (data) {
+            var accounts = xpath_1.default.selectArray("//bank-info/node", data);
+            var message = (accounts === null || accounts === void 0 ? void 0 : accounts.length) ? (accounts === null || accounts === void 0 ? void 0 : accounts.length) > 1 ? "Encontrada ".concat(accounts === null || accounts === void 0 ? void 0 : accounts.length, " contas banc\u00E1rias") : 'Encontrada 1 conta bancária' : 'Não foram encontradas ocorrências';
+            return {
+                children: accounts.length ? (react_1.default.createElement(result_1.Result, null, accounts.map(function (account, key) { return (react_1.default.createElement(result_1.ResultContent, { key: key },
+                    react_1.default.createElement(addItem_1.default, { name: "Banco", value: xpath_1.default.select("string(banco)", account) }),
+                    react_1.default.createElement(addItem_1.default, { name: "Ag\u00EAncia", value: xpath_1.default.select("string(agencia)", account) }),
+                    react_1.default.createElement(addItem_1.default, { name: "Conta", value: xpath_1.default.select("string(conta)", account) }))); }))) : null,
+                description: react_1.default.createElement(statusMessage_1.default, null, message),
+                iconProps: {
+                    circleFill: (accounts === null || accounts === void 0 ? void 0 : accounts.length) ? theme_1.default.colors.erro : ''
+                }
+            };
         } }));
 };
 exports.default = BankAccounts;

package/lib/cjs/components/ccf/ccf.js

@@ -29,10 +29,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var webservice_1 = require("../webservice");
 var result_1 = require("../interface/result");
-var classnames_1 = __importDefault(require("classnames"));
 var xpath_1 = __importDefault(require("../../utils/xpath"));
 var ccfList_1 = __importDefault(require("./ccfList"));
-var resultWithoutInformation_1 = __importDefault(require("../interface/resultWithoutInformation"));
+var chequesSemFundo_1 = __importDefault(require("../../assets/icones/chequesSemFundo"));
+var statusMessage_1 = __importDefault(require("../interface/statusMessage"));
 var CCF = function () {
     var ctx = (0, react_1.useContext)(webservice_1.Queries.CCF);
     var Section = ctx.Section;
@@ -43,22 +43,22 @@ var CCF = function () {
         ultimaOcorrencia: xpath_1.default.select("string(./ultimo)", node),
         motivo: xpath_1.default.select("string(./motivo)", node),
     }); };
-    return (react_1.default.createElement(Section, { ctx: ctx, title: "Cheques Sem Fundo Em Institui\u00E7\u00E3o Banc\u00E1ria", subtitle: "Detalhes Acerca De Cheques Sem Fundo Emitidos", onSuccess: function (data) {
-            var allItems = xpath_1.default.select("//list/*", data);
+    return (react_1.default.createElement(Section, { ctx: ctx, title: "Cheques Sem Fundos Em Institui\u00E7\u00E3o Banc\u00E1ria", subtitle: "Detalhes acerca de Cheques sem fundos emitidos", icon: chequesSemFundo_1.default, onSuccess: function (data) {
+            var allItems = xpath_1.default.selectArray("//list/*", data);
             var filteredItems = allItems.filter(function (node) {
                 return node.nodeName.startsWith("item");
             });
             var ccfData = filteredItems.map(mapNodeToCCFData);
             var totalOcorrencias = xpath_1.default.select('number(//sumQteOcorrencias)', data);
-            var children = totalOcorrencias ? (react_1.default.createElement(result_1.Result, null, ccfData.map(function (ccf, key) { return (react_1.default.createElement(ccfList_1.default, { key: key, data: [ccf] })); }))) : (react_1.default.createElement(resultWithoutInformation_1.default, null));
+            var children = (ccfData === null || ccfData === void 0 ? void 0 : ccfData.length) ? (react_1.default.createElement(result_1.Result, null, ccfData.map(function (ccf, key) { return (react_1.default.createElement(ccfList_1.default, { key: key, data: [ccf] })); }))) : null;
             return {
                 children: children,
-                className: (0, classnames_1.default)({ "gradient-error": totalOcorrencias > 0 }),
-                description: totalOcorrencias
+                variant: totalOcorrencias ? 'error' : 'default',
+                description: (react_1.default.createElement(statusMessage_1.default, { type: totalOcorrencias ? 'success' : 'default' }, totalOcorrencias
                     ? totalOcorrencias === 1
-                        ? "Encontrado um cheque sem fundo."
-                        : "Encontrados ".concat(totalOcorrencias, " cheques sem fundo.")
-                    : "Não há ocorrência de cheques sem fundo.",
+                        ? "Encontrado um cheque sem fundo"
+                        : "Encontrados ".concat(totalOcorrencias, " Cheques sem fundos")
+                    : "Não há ocorrência de cheques sem fundo")),
             };
         } }));
 };

package/lib/cjs/components/ccf/ccfList.js

@@ -29,17 +29,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var result_1 = require("../interface/result");
 var addItem_1 = __importDefault(require("../common/addItem"));
+var date_fns_1 = require("date-fns");
+var locale_1 = require("date-fns/locale");
 var CCFItem = (0, react_1.memo)(function (_a) {
     var ccf = _a.ccf;
-    return (react_1.default.createElement("div", { className: "content-layout" },
+    var startDate = new Date(ccf.ultimaOcorrencia.split('/').reverse().join('-'));
+    var endDate = new Date();
+    var distance = (0, date_fns_1.formatDistance)(startDate, endDate, {
+        locale: locale_1.ptBR
+    });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(addItem_1.default, { name: "Banco", value: ccf.banco }),
         react_1.default.createElement(addItem_1.default, { name: "Ag\u00EAncia", value: ccf.agencia }),
         react_1.default.createElement(addItem_1.default, { name: "Qtde. Ocorr\u00EAncias", value: ccf.quantidadeDeOcorrencias }),
-        react_1.default.createElement(addItem_1.default, { name: "\u00DAltima Ocorr\u00EAncia (h\u00E1 24 dias)", value: ccf.ultimaOcorrencia }),
+        react_1.default.createElement(addItem_1.default, { name: "\u00DAltima Ocorr\u00EAncia (h\u00E1 ".concat(distance, ")"), value: ccf.ultimaOcorrencia }),
         react_1.default.createElement(addItem_1.default, { name: "Al\u00EDnea", value: ccf.motivo })));
 });
 var CCFList = function (_a) {
     var data = _a.data;
-    return (react_1.default.createElement(result_1.Result, { isContainer: true, contentClassName: "container-layout" }, (data === null || data === void 0 ? void 0 : data.length) ? (data.map(function (ccf, i) { return react_1.default.createElement(CCFItem, { key: i, ccf: ccf }); })) : (react_1.default.createElement(addItem_1.default, { name: "Informa\u00E7\u00E3o", value: "N\u00E3o foi encontrado registros de Cheques Sem Fundos para o documento consultado." }))));
+    return (react_1.default.createElement(result_1.ResultContent, { desktop: "repeat(5, 1fr)", tablet: "repeat(3, 1fr)", mobile: "repeat(2, 1fr)" }, data.map(function (ccf, i) { return react_1.default.createElement(CCFItem, { key: i, ccf: ccf }); })));
 };
 exports.default = CCFList;

package/lib/cjs/components/chart/categoryProtestos.js

@@ -38,7 +38,7 @@ var CategoriaProtesto = function (_a) {
     return (react_1.default.createElement(Section, { hideHeader: true, onSuccess: function (document) {
             var _a, _b, _c;
             var filterProtestos = function (regex, data) {
-                return xpath_1.default.select("//body//protesto", data).filter(function (protesto) {
+                return xpath_1.default.selectArray("//body//protesto", data).filter(function (protesto) {
                     return regex.test(xpath_1.default.select("string(./nomeCedente)", protesto));
                 });
             };
@@ -51,7 +51,7 @@ var CategoriaProtesto = function (_a) {
                     quantidade: (_b = filterProtestos(regex_1.REGEX_PROTESTOS_DE_IMPOSTO, document)) === null || _b === void 0 ? void 0 : _b.length
                 }, {
                     categoria: 'Protestos em Geral',
-                    quantidade: (_c = xpath_1.default.select("//body//protesto", document).filter(function (protesto) {
+                    quantidade: (_c = xpath_1.default.selectArray("//body//protesto", document).filter(function (protesto) {
                         var nomeCedente = xpath_1.default.select("string(./nomeCedente)", protesto);
                         return (!regex_1.REGEX_PROTESTOS_DE_IMPOSTO.test(nomeCedente) &&
                             !regex_1.REGEX_PROTESTOS_DE_CREDITO.test(nomeCedente));

package/lib/cjs/components/chart/chartContent.js

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_plotly_js_1 = __importDefault(require("react-plotly.js"));
-var classnames_1 = __importDefault(require("classnames"));
 var chartHelper_1 = require("./chartHelper");
 var plotly_1 = require("./plotly");
 var processChartData_1 = require("./processChartData");
@@ -36,6 +35,7 @@ var pieChartDataStrategy_1 = require("./plotly/pieChartDataStrategy");
 var getUniqueDates_1 = require("./getUniqueDates");
 var underscore_1 = require("underscore");
 var categoryProtestos_1 = __importDefault(require("./categoryProtestos"));
+var responsiveGrid_1 = __importDefault(require("../interface/responsiveGrid"));
 var ChartContent = function (_a) {
     var dataInput = _a.dataInput;
     var _b = (0, react_1.useState)(window.innerWidth), windowWidth = _b[0], setWindowWidth = _b[1];
@@ -51,8 +51,8 @@ var ChartContent = function (_a) {
         var pieChartStrategy = new pieChartDataStrategy_1.PieChartDataStrategy();
         return (0, chartHelper_1.createPieChart)(pieChartStrategy.processData(dataInput));
     }, [dataInput]);
-    var pieChartWidth = (windowWidth * (windowWidth > 1100 ? 4 : 11)) / 12;
-    var lineBarChartWidth = (windowWidth * (windowWidth > 1100 && pieChartData.possuiPendencias ? 7.8 : 11)) / 12;
+    var pieChartWidth = windowWidth > 1000 ? windowWidth * 0.4 : windowWidth * 0.92;
+    var lineBarChartWidth = windowWidth > 1000 ? windowWidth * 0.55 : windowWidth * 0.92;
     var dates = (0, react_1.useMemo)(function () {
         return (0, getUniqueDates_1.getUniqueDates)(dataInput);
     }, [dataInput]);
@@ -62,16 +62,14 @@ var ChartContent = function (_a) {
     var lastDate = (0, underscore_1.max)(dates, function (x) { return x.getTime(); });
     var plotLayout = (0, plotly_1.layoutLineBarChart)(lineBarChartWidth, lastDate);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: (0, classnames_1.default)("container", "chart-container") },
-            react_1.default.createElement("div", { className: (0, classnames_1.default)("chart-content") },
-                react_1.default.createElement("div", { className: (0, classnames_1.default)("mdl-grid") },
-                    react_1.default.createElement("div", { className: (0, classnames_1.default)("mdl-cell", "mdl-cell--".concat(windowWidth < 1100 ? 12 : 4, "-col")), hidden: !pieChartData.possuiPendencias },
-                        react_1.default.createElement("h2", { className: (0, classnames_1.default)("title-chart") }, "Quantidade de Ocorr\u00EAncias"),
-                        react_1.default.createElement(react_plotly_js_1.default, { config: { displayModeBar: false }, data: [pieChartData], layout: { width: pieChartWidth } })),
-                    react_1.default.createElement("div", { className: (0, classnames_1.default)("mdl-cell", "mdl-cell--".concat(pieChartData.possuiPendencias ? 8 : 12, "-col")) },
-                        react_1.default.createElement("h2", { className: (0, classnames_1.default)("title-chart") }, "Quantidade de Ocorr\u00EAncias por Consulta"),
-                        react_1.default.createElement(react_plotly_js_1.default, { data: chartData, layout: plotLayout }))))),
-        react_1.default.createElement("div", { className: (0, classnames_1.default)("category-protestos") },
+        react_1.default.createElement(responsiveGrid_1.default, { desktop: "1fr 2fr" },
+            react_1.default.createElement("div", { hidden: !pieChartData.possuiPendencias, style: { width: pieChartWidth } },
+                react_1.default.createElement("h2", null, "Quantidade de Ocorr\u00EAncias"),
+                react_1.default.createElement(react_plotly_js_1.default, { config: { displayModeBar: false }, data: [pieChartData], layout: { width: pieChartWidth } })),
+            react_1.default.createElement("div", { style: { width: lineBarChartWidth } },
+                react_1.default.createElement("h2", null, "Quantidade de Ocorr\u00EAncias por Consulta"),
+                react_1.default.createElement(react_plotly_js_1.default, { data: chartData, layout: plotLayout }))),
+        react_1.default.createElement("div", null,
             react_1.default.createElement(categoryProtestos_1.default, { width: windowWidth * 0.9, height: 256 }))));
 };
 exports.default = ChartContent;

package/lib/cjs/components/chart/customChart.js

@@ -1,4 +1,8 @@
 "use strict";
+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++) {
@@ -40,7 +44,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResumoDeNegativacoesChartSection = void 0;
 /* eslint-disable react-hooks/exhaustive-deps */
 var react_1 = __importStar(require("react"));
-var result_1 = require("../interface/result");
 var useCalculation_1 = require("./useCalculation");
 var chartContent_1 = __importDefault(require("./chartContent"));
 var quantityResult_1 = __importDefault(require("./quantityResult"));
@@ -48,14 +51,23 @@ var webservice_1 = require("../webservice");
 var string_1 = require("../../utils/string");
 var underscore_1 = require("underscore");
 var header_1 = __importDefault(require("../interface/header"));
-var classnames_1 = __importDefault(require("classnames"));
 var useUltimaOcorrenciaCCF_1 = __importDefault(require("./useUltimaOcorrenciaCCF"));
+var statusMessage_1 = __importDefault(require("../interface/statusMessage"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var btnWrapper_1 = __importDefault(require("../../assets/btn/btnWrapper"));
+var chevronUp_1 = __importDefault(require("../../assets/btn/chevronUp"));
+var useToggle_1 = __importDefault(require("../../hooks/useToggle"));
+var chevronDown_1 = __importDefault(require("../../assets/btn/chevronDown"));
+var Content = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n"], ["\n  display: ", ";\n"])), function (props) { return props.isOpen ? 'block' : 'none'; });
 var ResumoDeNegativacoesChartSection = function (_a) {
     var documento = _a.documento;
     var _b = (0, webservice_1.useQuery)("SELECT FROM 'DOCUMENTHISTORY'.'BASICHISTORY'", { documento: documento }), response = _b.response, error = _b.error, isLoading = _b.isLoading, refetch = _b.refetch;
+    var _c = (0, useToggle_1.default)(), isOpen = _c[0], toggleOpen = _c[1];
     var ctxProtestos = (0, react_1.useContext)(webservice_1.Queries.Protestos);
     var ctxCCF = (0, react_1.useContext)(webservice_1.Queries.CCF);
     var ctxProcessosJuridicos = (0, react_1.useContext)(webservice_1.Queries.ProcessosJuridicos);
+    var defaultHeaderActions = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(btnWrapper_1.default, { hidden: isLoading, onClick: toggleOpen }, isOpen ? react_1.default.createElement(chevronUp_1.default, null) : react_1.default.createElement(chevronDown_1.default, null))));
     var quantidadeProcessosJuridicos = (0, react_1.useMemo)(function () {
         var _a, _b;
         if ((ctxProcessosJuridicos === null || ctxProcessosJuridicos === void 0 ? void 0 : ctxProcessosJuridicos.type) === webservice_1.RequestStatus.Success)
@@ -103,10 +115,11 @@ var ResumoDeNegativacoesChartSection = function (_a) {
         return react_1.default.createElement(CustomChart, { dataInput: data });
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(header_1.default, { title: "Resumo de Negativa\u00E7\u00F5es", subtitle: "Veja a quantidade de ocorr\u00EAncias conforme o documento foi consultado ao longo do tempo", className: (0, classnames_1.default)({ 'external-source loading': isLoading, 'external-source error': error }) }),
-        !isLoading && (response === null || response === void 0 ? void 0 : response.document) && process(response === null || response === void 0 ? void 0 : response.document)));
+        react_1.default.createElement(header_1.default, { title: "Resumo de Negativa\u00E7\u00F5es", subtitle: "Veja a quantidade de ocorr\u00EAncias conforme o documento foi consultado ao longo do tempo", description: error && react_1.default.createElement(statusMessage_1.default, { type: "error" }, error.message), variant: isLoading ? 'loading' : 'default', actions: isLoading ? null : defaultHeaderActions }),
+        react_1.default.createElement(Content, { isOpen: isOpen }, !isLoading && (response === null || response === void 0 ? void 0 : response.document) && process(response === null || response === void 0 ? void 0 : response.document))));
 };
 exports.ResumoDeNegativacoesChartSection = ResumoDeNegativacoesChartSection;
+var ChartWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 18px 30px;\n"], ["\n  padding: 18px 30px;\n"])));
 var CustomChart = function (_a) {
     var _b, _c, _d, _e;
     var dataInput = _a.dataInput;
@@ -117,9 +130,9 @@ var CustomChart = function (_a) {
     var _j = (0, useCalculation_1.useCalculation)(dataInput.boaVista), quantidadeDeNegativacoesBoaVista = _j.quantidade, valorTotalDeNegativacoesBoaVista = _j.valorTotal;
     var quantidadeCCF = (0, useCalculation_1.useCalculation)(dataInput.ccfs).quantidade;
     var ultimaOcorrenciaProtestos = (_d = (_c = dataInput === null || dataInput === void 0 ? void 0 : dataInput.protestos[((_b = dataInput === null || dataInput === void 0 ? void 0 : dataInput.protestos) === null || _b === void 0 ? void 0 : _b.length) - 1]) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.toLocaleDateString();
-    return (react_1.default.createElement(result_1.Result, null,
-        react_1.default.createElement("div", null,
-            react_1.default.createElement(chartContent_1.default, { dataInput: dataInput }),
-            react_1.default.createElement(quantityResult_1.default, { quantidadeProtestos: quantidadeProtestos, quantidadeProcessos: (_e = dataInput === null || dataInput === void 0 ? void 0 : dataInput.pieChartTotalConfig) === null || _e === void 0 ? void 0 : _e.processosJuridicos, quantidadeDividas: quantidadeDividas, quantidadeDividasSerasa: quantidadeDeNegativacoesSerasa, quantidadeDividasBoaVista: quantidadeDeNegativacoesBoaVista, quantidadeChequesSemFundos: quantidadeCCF, ultimaOcorrenciaChequesSemFundos: ultimaOcorrenciaCCF, valorTotalDividasSerasa: valorTotalDeNegativacoesSerasa, valorTotalDividasBoaVista: valorTotalDeNegativacoesBoaVista, valorTotalProtestos: valorTotalProtestos, valorTotalDividas: valorTotalDividas, ultimaOcorrenciaProtestos: ultimaOcorrenciaProtestos }))));
+    return (react_1.default.createElement(ChartWrapper, null,
+        react_1.default.createElement(chartContent_1.default, { dataInput: dataInput }),
+        react_1.default.createElement(quantityResult_1.default, { quantidadeProtestos: quantidadeProtestos, quantidadeProcessos: (_e = dataInput === null || dataInput === void 0 ? void 0 : dataInput.pieChartTotalConfig) === null || _e === void 0 ? void 0 : _e.processosJuridicos, quantidadeDividas: quantidadeDividas, quantidadeDividasSerasa: quantidadeDeNegativacoesSerasa, quantidadeDividasBoaVista: quantidadeDeNegativacoesBoaVista, quantidadeChequesSemFundos: quantidadeCCF, ultimaOcorrenciaChequesSemFundos: ultimaOcorrenciaCCF, valorTotalDividasSerasa: valorTotalDeNegativacoesSerasa, valorTotalDividasBoaVista: valorTotalDeNegativacoesBoaVista, valorTotalProtestos: valorTotalProtestos, valorTotalDividas: valorTotalDividas, ultimaOcorrenciaProtestos: ultimaOcorrenciaProtestos })));
 };
 exports.default = CustomChart;
+var templateObject_1, templateObject_2;

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

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -8,31 +12,35 @@ var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var addItem_1 = __importDefault(require("../common/addItem"));
 var number_1 = require("../../utils/number");
+var result_1 = require("../interface/result");
+var styled_components_1 = __importDefault(require("styled-components"));
+var theme_1 = __importDefault(require("../interface/theme"));
 var QuantityContainer = function (_a) {
     var children = _a.children;
     return react_1.default.createElement("div", { className: (0, classnames_1.default)('container', 'field-container') }, children);
 };
+var QuantidadeResultadosWrapper = (0, styled_components_1.default)(result_1.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_1.default.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_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: (0, classnames_1.default)('resumo-de-negativacoes-quantity') },
-            react_1.default.createElement(QuantityContainer, null,
-                react_1.default.createElement(addItem_1.default, { name: "Total Protestos", value: (0, number_1.formatValue)(quantidadeProtestos), className: (0, classnames_1.default)("field-result") }),
-                react_1.default.createElement(addItem_1.default, { name: "Valor Total Protestos", value: (0, number_1.formatMoney)(valorTotalProtestos), className: (0, classnames_1.default)("field-result") }),
-                react_1.default.createElement(addItem_1.default, { hidden: quantidadeProtestos == 0, name: "\u00DAltima Ocorr\u00EAncia", value: ultimaOcorrenciaProtestos, className: (0, classnames_1.default)("field-result") })),
-            react_1.default.createElement(QuantityContainer, null,
-                react_1.default.createElement(addItem_1.default, { name: "Cheques Sem Fundos", value: (0, number_1.formatValue)(quantidadeChequesSemFundos), className: (0, classnames_1.default)("field-result") }),
-                react_1.default.createElement(addItem_1.default, { hidden: quantidadeChequesSemFundos == 0, name: "\u00DAltima Ocorr\u00EAncia", value: ultimaOcorrenciaChequesSemFundos, className: (0, classnames_1.default)("field-result") })),
-            react_1.default.createElement(QuantityContainer, null,
-                react_1.default.createElement(addItem_1.default, { name: "Processos Jur\u00EDdicos", value: (0, number_1.formatValue)(quantidadeProcessos), className: (0, classnames_1.default)("field-result") })),
-            react_1.default.createElement(QuantityContainer, null,
-                react_1.default.createElement(addItem_1.default, { name: "D\u00EDvidas P\u00FAblicas", value: (0, number_1.formatValue)(quantidadeDividas), className: (0, classnames_1.default)("field-result") }),
-                react_1.default.createElement(addItem_1.default, { name: "Total D\u00EDvidas P\u00FAblicas", value: (0, number_1.formatMoney)(valorTotalDividas), className: (0, classnames_1.default)("field-result") })),
-            react_1.default.createElement(QuantityContainer, null,
-                react_1.default.createElement(addItem_1.default, { name: "Pefin Refin Serasa", value: (0, number_1.formatValue)(quantidadeDividasSerasa), className: (0, classnames_1.default)("field-result") }),
-                react_1.default.createElement(addItem_1.default, { name: "Total Pefin Refin Serasa", value: (0, number_1.formatMoney)(valorTotalDividasSerasa), className: (0, classnames_1.default)("field-result") })),
-            react_1.default.createElement(QuantityContainer, null,
-                react_1.default.createElement(addItem_1.default, { name: "Pefin Refin Boa Vista", value: (0, number_1.formatValue)(quantidadeDividasBoaVista), className: (0, classnames_1.default)("field-result") }),
-                react_1.default.createElement(addItem_1.default, { name: "Total Pefin Refin Boa Vista", value: (0, number_1.formatMoney)(valorTotalDividasBoaVista), className: (0, classnames_1.default)("field-result") })))));
+    return (react_1.default.createElement(QuantidadeResultadosWrapper, { desktop: "repeat(6, 1fr)", tablet: "repeat(3, 1fr)", mobile: "1fr" },
+        react_1.default.createElement(QuantityContainer, null,
+            react_1.default.createElement(addItem_1.default, { name: "Total Protestos", value: (0, number_1.formatValue)(quantidadeProtestos) }),
+            react_1.default.createElement(addItem_1.default, { name: "Valor Total Protestos", value: (0, number_1.formatMoney)(valorTotalProtestos) }),
+            react_1.default.createElement(addItem_1.default, { hidden: quantidadeProtestos == 0, name: "\u00DAltima Ocorr\u00EAncia", value: ultimaOcorrenciaProtestos })),
+        react_1.default.createElement(QuantityContainer, null,
+            react_1.default.createElement(addItem_1.default, { name: "Cheques Sem Fundos", value: (0, number_1.formatValue)(quantidadeChequesSemFundos) }),
+            react_1.default.createElement(addItem_1.default, { hidden: quantidadeChequesSemFundos == 0, name: "\u00DAltima Ocorr\u00EAncia", value: ultimaOcorrenciaChequesSemFundos })),
+        react_1.default.createElement(QuantityContainer, null,
+            react_1.default.createElement(addItem_1.default, { name: "Processos Jur\u00EDdicos", value: (0, number_1.formatValue)(quantidadeProcessos) })),
+        react_1.default.createElement(QuantityContainer, null,
+            react_1.default.createElement(addItem_1.default, { name: "D\u00EDvidas P\u00FAblicas", value: (0, number_1.formatValue)(quantidadeDividas) }),
+            react_1.default.createElement(addItem_1.default, { name: "Total D\u00EDvidas P\u00FAblicas", value: (0, number_1.formatMoney)(valorTotalDividas) })),
+        react_1.default.createElement(QuantityContainer, null,
+            react_1.default.createElement(addItem_1.default, { name: "Pefin Refin Serasa", value: (0, number_1.formatValue)(quantidadeDividasSerasa) }),
+            react_1.default.createElement(addItem_1.default, { name: "Total Pefin Refin Serasa", value: (0, number_1.formatMoney)(valorTotalDividasSerasa) })),
+        react_1.default.createElement(QuantityContainer, null,
+            react_1.default.createElement(addItem_1.default, { name: "Pefin Refin Boa Vista", value: (0, number_1.formatValue)(quantidadeDividasBoaVista) }),
+            react_1.default.createElement(addItem_1.default, { name: "Total Pefin Refin Boa Vista", value: (0, number_1.formatMoney)(valorTotalDividasBoaVista) }))));
 };
 exports.default = QuantidadeResultados;
+var templateObject_1;

package/lib/cjs/components/common/addItem.d.ts

@@ -7,5 +7,5 @@ export interface AddItemProps extends React.PropsWithChildren<{
     styleName?: CSSProperties;
 } & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>> {
 }
-declare function AddItemField({ name, value, children, className, valueClassName, nameClassName, styleName, ...props }: AddItemProps): React.JSX.Element;
+declare function AddItemField({ name, value, children, className, valueClassName, nameClassName, styleName, defaultValue, ...props }: AddItemProps): React.JSX.Element;
 export default AddItemField;

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

@@ -1,4 +1,8 @@
 "use strict";
+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++) {
@@ -27,14 +31,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var theme_1 = __importDefault(require("../interface/theme"));
+var FieldName = styled_components_1.default.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_1.default.colors.cinzaEscuro);
+var FieldValue = styled_components_1.default.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_1.default.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, props = __rest(_a, ["name", "value", "children", "className", "valueClassName", "nameClassName", "styleName"]);
+    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 = (0, classnames_1.default)("field", className);
     var valueClass = (0, classnames_1.default)("value", valueClassName);
     var nameClass = (0, classnames_1.default)("name", nameClassName);
     return (react_1.default.createElement("div", __assign({}, props, { className: fieldClassName }),
-        react_1.default.createElement("div", { className: valueClass }, value),
-        react_1.default.createElement("div", { className: nameClass, style: styleName }, name),
+        react_1.default.createElement(FieldName, { className: nameClass, style: styleName }, name),
+        react_1.default.createElement(FieldValue, { className: valueClass }, value || defaultValue),
         children));
 }
 exports.default = AddItemField;
+var templateObject_1, templateObject_2;

package/lib/cjs/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/cjs/components/common/button.js

@@ -1,4 +1,8 @@
 "use strict";
+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++) {
@@ -27,11 +31,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var theme_1 = __importDefault(require("../interface/theme"));
+var StyledButton = styled_components_1.default.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_1.default.typography.headline14.fontStyle, theme_1.default.typography.headline14.fontWeight, theme_1.default.typography.headline14.fontSize, theme_1.default.typography.headline14.lineHeight, theme_1.default.colors.azulCredithub, theme_1.default.colors.white);
+var SmallContent = styled_components_1.default.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 = (0, classnames_1.default)('button', 'product-button', className);
-    return (react_1.default.createElement("button", __assign({ className: buttonClassName }, props),
-        children,
-        smallContent && react_1.default.createElement("small", null, smallContent)));
+    var buttonClassName = (0, classnames_1.default)("button", "product-button", className);
+    return (react_1.default.createElement(StyledButton, __assign({ className: buttonClassName }, props),
+        react_1.default.createElement("span", null, children),
+        smallContent && react_1.default.createElement(SmallContent, null, smallContent)));
 };
 exports.default = Button;
+var templateObject_1, templateObject_2;