@credithub/harlan-components 1.33.0 → 1.35.0

package/dist/components/dossie/dossie.js

@@ -13,14 +13,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import { useGlobalData } from '../../contexts/globalDataContext';
 import { useConsultaRfb } from '../../hooks/useConsultaRfb';
 import { formatCnpj, formatCpf } from '../../utils/string';
 import XPathUtils from '../../utils/xpath';
-import { useGlobalData } from '../../contexts/globalDataContext';
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { ReclameAquiCarousel } from '../reclameAqui/reclameAquiCarousel';
-import { Queries } from '../webservice';
+import { Section } from '../section';
+import { Queries, RequestStatus } from '../webservice';
 import { Carrousel } from './carrousel/carrousel';
 import { createDossieData } from './dossieData';
 import { Summary } from './summary/summary';
@@ -29,11 +30,25 @@ var DossieContent = styled.div(templateObject_1 || (templateObject_1 = __makeTem
 var DossieContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0px 70px;\n\n  @media (max-width: 1000px) {\n    padding: 0px 30px;\n  }\n"], ["\n  padding: 0px 70px;\n\n  @media (max-width: 1000px) {\n    padding: 0px 30px;\n  }\n"])));
 var Dossie = function (_a) {
     var documento = _a.documento;
-    var finderCtx = useContext(Queries.Finder);
+    var ctx = useContext(Queries.Finder);
     var rfbResponse = useConsultaRfb().rfbResponse;
-    var Section = finderCtx.Section;
     var setData = useGlobalData().setData;
     var _b = useState(false), dataUpdated = _b[0], setDataUpdated = _b[1];
+    useEffect(function () {
+        if (ctx.type === RequestStatus.Success && !dataUpdated && ctx.document) {
+            var data = ctx.document;
+            var isPF = (documento === null || documento === void 0 ? void 0 : documento.length) === 11;
+            var name_1 = (isPF
+                ? XPathUtils.select('string(//cadastro/nome)', data)
+                : XPathUtils.select('string(//cadastro/razaoSocial)', data) ||
+                    (rfbResponse &&
+                        XPathUtils.select('string(//RFB/nome)', rfbResponse)));
+            var document_1 = isPF ? formatCpf(documento) : formatCnpj(documento);
+            var dossieData_1 = createDossieData(data, rfbResponse, name_1, document_1);
+            setData(function (prevState) { return (__assign(__assign({}, prevState), { dossie: dossieData_1 })); });
+            setDataUpdated(true);
+        }
+    }, [ctx, rfbResponse, documento, setData, dataUpdated]);
     var response = function (_data) {
         var data = _data instanceof Error ? undefined : _data;
         var isPF = (documento === null || documento === void 0 ? void 0 : documento.length) === 11;
@@ -45,18 +60,13 @@ var Dossie = function (_a) {
         var DossieCarrousel = function () {
             return !isPF ? (React.createElement(ReclameAquiCarousel, { documento: document, nome: name })) : (React.createElement(Carrousel, { name: name, document: document }));
         };
-        var dossieData = createDossieData(data, rfbResponse, name, document);
-        if (!dataUpdated) {
-            setData(function (prevState) { return (__assign(__assign({}, prevState), { dossie: dossieData })); });
-            setDataUpdated(true);
-        }
         return (React.createElement(DossieContainer, null,
             React.createElement(DossieContent, null,
                 React.createElement(DossieCarrousel, null),
                 React.createElement(Summary, { finderResponse: data, rfbResponse: rfbResponse, document: document })),
             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 }));
+    return (React.createElement(Section, { ctx: ctx, hideHeader: true, minimized: false, isError: function (e) { return response(e); }, onSuccess: response }));
 };
 export default Dossie;
 var templateObject_1, templateObject_2;

package/dist/components/dossie/summary/cardsAndProducts.d.ts

@@ -1,25 +1,23 @@
-import React from 'react';
 declare const useCardsAndProducts: ({ finderResponse, rfbResponse }: {
     finderResponse?: Document;
     rfbResponse?: Document;
 }) => {
-    cards: ({
+    cards: {
         title: string | false;
         header: string;
-    } | {
-        title: React.JSX.Element[];
-        header: string;
-    })[];
+    }[];
     products: ({
         title: string;
-        onClick: () => void;
+        onClick: () => Promise<void>;
         price: number;
+        isLoading: boolean;
         hide?: undefined;
     } | {
         title: string;
         price: number;
-        onClick: () => void;
+        onClick: () => Promise<void>;
         hide: boolean;
+        isLoading: boolean;
     })[];
 };
 export default useCardsAndProducts;

package/dist/components/dossie/summary/cardsAndProducts.js

@@ -9,32 +9,97 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 import { useConsultasComplementares } from '../../../hooks/useConsultasComplementares';
 import { formatMoney } from '../../../utils/number';
 import XPathUtils from '../../../utils/xpath';
-import React from 'react';
+import { useState } from 'react';
 import { getAtividadesEconomicasSecundarias, getField, getFieldRfb, getProductsPrices } from './utils';
 var useCardsAndProducts = function (_a) {
     var _b, _c, _d, _e, _f;
     var finderResponse = _a.finderResponse, rfbResponse = _a.rfbResponse;
     var _g = useConsultasComplementares(), consultasComplementares = _g.consultasComplementares, setConsultasComplementares = _g.setConsultasComplementares, hasCredits = _g.hasCredits;
+    var _h = useState({}), loadingButtons = _h[0], setLoadingButtons = _h[1];
     var isPF = !!getField('cpf', finderResponse);
     var productsPrices = getProductsPrices(isPF);
     var handleOnClick = function (key) {
-        return function () {
-            var callback = function () {
-                return setConsultasComplementares &&
-                    setConsultasComplementares(function (prev) {
-                        var _a;
-                        return (__assign(__assign({}, prev), (_a = {}, _a[key] = __assign(__assign({}, prev[key]), { consultaRealizada: true }), _a)));
-                    });
-            };
-            return hasCredits
-                ? hasCredits(productsPrices[key] * 1000, callback)
-                : callback();
-        };
+        return function () { return __awaiter(void 0, void 0, void 0, function () {
+            var callback;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (loadingButtons[key])
+                            return [2 /*return*/];
+                        setLoadingButtons(function (prev) {
+                            var _a;
+                            return (__assign(__assign({}, prev), (_a = {}, _a[key] = true, _a)));
+                        });
+                        callback = function () {
+                            setConsultasComplementares &&
+                                setConsultasComplementares(function (prev) {
+                                    var _a;
+                                    return (__assign(__assign({}, prev), (_a = {}, _a[key] = __assign(__assign({}, prev[key]), { consultaRealizada: true }), _a)));
+                                });
+                        };
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, , 5, 6]);
+                        if (!hasCredits) return [3 /*break*/, 3];
+                        return [4 /*yield*/, hasCredits(productsPrices[key] * 1000, callback)];
+                    case 2:
+                        _a.sent();
+                        return [3 /*break*/, 4];
+                    case 3:
+                        callback();
+                        _a.label = 4;
+                    case 4: return [3 /*break*/, 6];
+                    case 5:
+                        setLoadingButtons(function (prev) {
+                            var _a;
+                            return (__assign(__assign({}, prev), (_a = {}, _a[key] = false, _a)));
+                        });
+                        return [7 /*endfinally*/];
+                    case 6: return [2 /*return*/];
+                }
+            });
+        }); };
     };
-    var _h = {
+    var _j = {
         cards: [
             {
                 title: getField('sexo', finderResponse, function (value) { return (isPF && (value == 'M' ? 'Masculino' : 'Feminino')) || ''; }),
@@ -133,10 +198,7 @@ var useCardsAndProducts = function (_a) {
                 header: 'Atividade Econômica'
             },
             {
-                title: getAtividadesEconomicasSecundarias(rfbResponse).map(function (e) { return (React.createElement(React.Fragment, null,
-                    e,
-                    ".",
-                    React.createElement("br", null))); }),
+                title: getAtividadesEconomicasSecundarias(rfbResponse).join(', '),
                 header: 'Atividades Econômicas Secundárias'
             },
             {
@@ -178,40 +240,46 @@ var useCardsAndProducts = function (_a) {
             {
                 title: 'Consultar SCR',
                 onClick: handleOnClick('scr'),
-                price: productsPrices === null || productsPrices === void 0 ? void 0 : productsPrices.scr
+                price: productsPrices === null || productsPrices === void 0 ? void 0 : productsPrices.scr,
+                isLoading: loadingButtons['scr']
             },
             {
                 title: 'Consultar Veículos',
                 price: productsPrices === null || productsPrices === void 0 ? void 0 : productsPrices.veiculos,
                 onClick: handleOnClick('veiculos'),
-                hide: (_b = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.veiculos) === null || _b === void 0 ? void 0 : _b.consultaRealizada
+                hide: (_b = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.veiculos) === null || _b === void 0 ? void 0 : _b.consultaRealizada,
+                isLoading: loadingButtons['veiculos']
             },
             {
                 title: 'Consultar Pefin/Refin Boa Vista',
                 price: productsPrices === null || productsPrices === void 0 ? void 0 : productsPrices.refinBoaVista,
                 onClick: handleOnClick('refinBoaVista'),
-                hide: (_c = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.refinBoaVista) === null || _c === void 0 ? void 0 : _c.consultaRealizada
+                hide: (_c = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.refinBoaVista) === null || _c === void 0 ? void 0 : _c.consultaRealizada,
+                isLoading: loadingButtons['refinBoaVista']
             },
             {
                 title: 'Consultar Score Boa Vista',
                 price: productsPrices === null || productsPrices === void 0 ? void 0 : productsPrices.scoreBoaVista,
                 onClick: handleOnClick('scoreBoaVista'),
-                hide: (_d = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.scoreBoaVista) === null || _d === void 0 ? void 0 : _d.consultaRealizada
+                hide: (_d = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.scoreBoaVista) === null || _d === void 0 ? void 0 : _d.consultaRealizada,
+                isLoading: loadingButtons['scoreBoaVista']
             },
             {
                 title: 'Consultar Pefin/Refin Serasa',
                 price: productsPrices === null || productsPrices === void 0 ? void 0 : productsPrices.refinSerasa,
                 onClick: handleOnClick('refinSerasa'),
-                hide: (_e = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.refinSerasa) === null || _e === void 0 ? void 0 : _e.consultaRealizada
+                hide: (_e = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.refinSerasa) === null || _e === void 0 ? void 0 : _e.consultaRealizada,
+                isLoading: loadingButtons['refinSerasa']
             },
             {
                 title: 'Consultar Imóveis SP Capital',
                 price: productsPrices === null || productsPrices === void 0 ? void 0 : productsPrices.imoveis,
                 onClick: handleOnClick('imoveis'),
-                hide: !isPF || ((_f = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.imoveis) === null || _f === void 0 ? void 0 : _f.consultaRealizada)
+                hide: !isPF || ((_f = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.imoveis) === null || _f === void 0 ? void 0 : _f.consultaRealizada),
+                isLoading: loadingButtons['imoveis']
             }
         ]
-    }, cards = _h.cards, products = _h.products;
+    }, cards = _j.cards, products = _j.products;
     return { cards: cards, products: products };
 };
 export default useCardsAndProducts;

package/dist/components/dossie/summary/styles.d.ts

@@ -1,3 +1,4 @@
+export declare const Spinner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ContainerSummary: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ContentSummary: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const FieldSummary: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {

package/dist/components/dossie/summary/styles.js

@@ -2,12 +2,37 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled from 'styled-components';
 import Button from '../../../components/common/button';
-export var ContainerSummary = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  padding: 0 20px;\n  width: 100%;\n  justify-content: space-between;\n  @media (max-width: 768px) {\n    padding: 0px;\n  }\n\n  @media (max-width: 992px) {\n    flex-direction: column;\n  }\n"], ["\n  display: flex;\n  padding: 0 20px;\n  width: 100%;\n  justify-content: space-between;\n  @media (max-width: 768px) {\n    padding: 0px;\n  }\n\n  @media (max-width: 992px) {\n    flex-direction: column;\n  }\n"])));
-export var ContentSummary = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  grid-row: 1 / 8;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 0 16px;\n\n  @media (max-width: 1280px) {\n    grid-template-columns: repeat(3, 1fr);\n    justify-content: center;\n    align-items: center;\n  }\n\n  @media (max-width: 768px) {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    flex-direction: row;\n    width: 100%;\n  }\n"], ["\n  display: grid;\n  grid-row: 1 / 8;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 0 16px;\n\n  @media (max-width: 1280px) {\n    grid-template-columns: repeat(3, 1fr);\n    justify-content: center;\n    align-items: center;\n  }\n\n  @media (max-width: 768px) {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    flex-direction: row;\n    width: 100%;\n  }\n"])));
-export var FieldSummary = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  margin-bottom: 16px;\n  grid-column: ", ";\n"], ["\n  align-items: center;\n  margin-bottom: 16px;\n  grid-column: ", ";\n"])), function (props) { return (props.fullRow ? '1 / 3' : 'auto'); });
-export var ButtonsSummary = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 8px;\n\n  @media (max-width: 768px) {\n    align-items: center;\n    max-width: 100%;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 8px;\n\n  @media (max-width: 768px) {\n    align-items: center;\n    max-width: 100%;\n  }\n"])));
-export var ButtonsWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  gap: 10px;\n  min-width: fit-content;\n  flex-direction: column;\n\n  @media (max-width: 1000px) {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    flex-direction: row;\n  }\n\n  @media (max-width: 768px) {\n    display: grid;\n    grid-template-columns: repeat(1, 1fr);\n    flex-direction: row;\n  }\n\n  @media print {\n    display: none;\n  }\n"], ["\n  display: flex;\n  gap: 10px;\n  min-width: fit-content;\n  flex-direction: column;\n\n  @media (max-width: 1000px) {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    flex-direction: row;\n  }\n\n  @media (max-width: 768px) {\n    display: grid;\n    grid-template-columns: repeat(1, 1fr);\n    flex-direction: row;\n  }\n\n  @media print {\n    display: none;\n  }\n"])));
-export var SummaryButton = styled(Button)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+import styled from 'styled-components';
+export var Spinner = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  border: 3px solid ", ";\n  border-radius: 50%;\n  border-top-color: ", ";\n  animation: spin 1s ease-in-out infinite;\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"], ["\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  border: 3px solid ", ";\n  border-radius: 50%;\n  border-top-color: ", ";\n  animation: spin 1s ease-in-out infinite;\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.cinzaEscuro;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.white;
+});
+export var ContainerSummary = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  padding: 0 20px;\n  width: 100%;\n  justify-content: space-between;\n  @media (max-width: 768px) {\n    padding: 0px;\n  }\n\n  @media (max-width: 992px) {\n    flex-direction: column;\n  }\n"], ["\n  display: flex;\n  padding: 0 20px;\n  width: 100%;\n  justify-content: space-between;\n  @media (max-width: 768px) {\n    padding: 0px;\n  }\n\n  @media (max-width: 992px) {\n    flex-direction: column;\n  }\n"])));
+export var ContentSummary = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: grid;\n  grid-row: 1 / 8;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 0 16px;\n\n  @media (max-width: 1280px) {\n    grid-template-columns: repeat(3, 1fr);\n    justify-content: center;\n    align-items: center;\n  }\n\n  @media (max-width: 768px) {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    flex-direction: row;\n    width: 100%;\n  }\n"], ["\n  display: grid;\n  grid-row: 1 / 8;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 0 16px;\n\n  @media (max-width: 1280px) {\n    grid-template-columns: repeat(3, 1fr);\n    justify-content: center;\n    align-items: center;\n  }\n\n  @media (max-width: 768px) {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    flex-direction: row;\n    width: 100%;\n  }\n"])));
+export var FieldSummary = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  margin-bottom: 16px;\n  grid-column: ", ";\n"], ["\n  align-items: center;\n  margin-bottom: 16px;\n  grid-column: ", ";\n"])), function (props) { return (props.fullRow ? '1 / 3' : 'auto'); });
+export var ButtonsSummary = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 8px;\n\n  @media (max-width: 768px) {\n    align-items: center;\n    max-width: 100%;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 8px;\n\n  @media (max-width: 768px) {\n    align-items: center;\n    max-width: 100%;\n  }\n"])));
+export var ButtonsWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  gap: 10px;\n  min-width: fit-content;\n  flex-direction: column;\n\n  @media (max-width: 1000px) {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    flex-direction: row;\n  }\n\n  @media (max-width: 768px) {\n    display: grid;\n    grid-template-columns: repeat(1, 1fr);\n    flex-direction: row;\n  }\n\n  @media print {\n    display: none;\n  }\n"], ["\n  display: flex;\n  gap: 10px;\n  min-width: fit-content;\n  flex-direction: column;\n\n  @media (max-width: 1000px) {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    flex-direction: row;\n  }\n\n  @media (max-width: 768px) {\n    display: grid;\n    grid-template-columns: repeat(1, 1fr);\n    flex-direction: row;\n  }\n\n  @media print {\n    display: none;\n  }\n"])));
+export var SummaryButton = styled(Button)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  background: ", ";\n  color: ", ";\n  cursor: ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  background: ", ";\n  color: ", ";\n  cursor: ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme, disabled = _a.disabled;
+    return disabled ? theme.colors.cinzaClaro : theme.colors.azulCredithub;
+}, function (_a) {
+    var theme = _a.theme, disabled = _a.disabled;
+    return disabled ? theme.colors.cinzaEscuro : theme.colors.white;
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 'not-allowed' : 'pointer');
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 0.6 : 1);
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 'none' : 'auto');
+}, function (_a) {
+    var theme = _a.theme, disabled = _a.disabled;
+    return disabled ? theme.colors.cinzaClaro : theme.colors.azulApoio;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/dossie/summary/summary.js

@@ -1,9 +1,9 @@
 import AddItemField from '../../../components/common/addItem';
 import React from 'react';
+import ButtonAtualizarDadosRfb from '../../../assets/btn/buttonAtualizarDadosRfb';
 import { formatMoney } from '../../../utils/number';
 import useCardsAndProducts from './cardsAndProducts';
-import { ButtonsSummary, ButtonsWrapper, ContainerSummary, ContentSummary, FieldSummary, SummaryButton } from './styles';
-import ButtonAtualizarDadosRfb from '../../../assets/btn/buttonAtualizarDadosRfb';
+import { ButtonsSummary, ButtonsWrapper, ContainerSummary, ContentSummary, FieldSummary, Spinner, SummaryButton } from './styles';
 export var Summary = function (_a) {
     var finderResponse = _a.finderResponse, rfbResponse = _a.rfbResponse;
     var _b = useCardsAndProducts({
@@ -17,6 +17,6 @@ export var Summary = function (_a) {
             React.createElement(ButtonsWrapper, null,
                 React.createElement(ButtonAtualizarDadosRfb, null),
                 products.map(function (product, index) { return (React.createElement(ButtonsSummary, { key: index, style: { display: (product === null || product === void 0 ? void 0 : product.hide) ? 'none' : '', width: '100%' } },
-                    React.createElement(SummaryButton, { onClick: function () { return (product === null || product === void 0 ? void 0 : product.onClick) && (product === null || product === void 0 ? void 0 : product.onClick()); }, smallContent: product.price ? formatMoney(product.price) : undefined }, product.title))); })))));
+                    React.createElement(SummaryButton, { onClick: function () { return (product === null || product === void 0 ? void 0 : product.onClick) && (product === null || product === void 0 ? void 0 : product.onClick()); }, disabled: product.isLoading, smallContent: product.price ? formatMoney(product.price) : undefined }, product.isLoading ? React.createElement(Spinner, null) : product.title))); })))));
 };
 export default Summary;

package/dist/components/dossie/summary/utils.js

@@ -26,8 +26,18 @@ export var getAtividadesEconomicasSecundarias = function (response) {
     var rfb = (_a = XPathUtils.selectArray('//RFB', response)) === null || _a === void 0 ? void 0 : _a[0];
     if (!rfb)
         return [];
-    var values = XPathUtils.selectArray('//atividade-secundaria', rfb);
-    return values.map(function (value) { var _a; return (_a = value.firstChild) === null || _a === void 0 ? void 0 : _a.nodeValue; });
+    var values = XPathUtils.selectArray('//atividade-secundaria', rfb).map(function (value) { var _a; return (_a = value.firstChild) === null || _a === void 0 ? void 0 : _a.nodeValue; });
+    var combinedString = '';
+    var result = [];
+    for (var _i = 0, values_1 = values; _i < values_1.length; _i++) {
+        var value = values_1[_i];
+        if ((combinedString + value).length > 300) {
+            break;
+        }
+        combinedString += (combinedString ? ', ' : '') + value;
+        result.push(value);
+    }
+    return result;
 };
 export var getProductsPrices = function (isPF) { return ({
     refinBoaVista: isPF ? 1.2 : 2.7,

package/dist/components/imoveis/imoveisService.js

@@ -15,15 +15,15 @@ import { formatMoney } from '../../utils/number';
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import AddItemField from '../common/addItem';
 import { ConsultasComplementaresContext } from '../consultasComplementares';
-import Header from '../interface/header';
 import { Result, ResultContent } from '../interface/result';
 import StatusMessage from '../interface/statusMessage';
-import { useQuery } from '../webservice';
+import { Section } from '../section';
+import { RequestStatus, useQuery } from '../webservice';
 var ConsultaImoveis = function (_a) {
     var _b, _c, _d, _e, _f;
     var documento = _a.documento;
     var consultasComplementaresContext = useContext(ConsultasComplementaresContext);
-    var _g = useQuery("SELECT FROM 'IMOVEIS'.'CONSULTA'", { documento: documento }, !!((_c = (_b = consultasComplementaresContext === null || consultasComplementaresContext === void 0 ? void 0 : consultasComplementaresContext.consultasComplementares) === null || _b === void 0 ? void 0 : _b.imoveis) === null || _c === void 0 ? void 0 : _c.consultaRealizada)), response = _g.response, isLoading = _g.isLoading, error = _g.error;
+    var _g = useQuery("SELECT FROM 'IMOVEIS'.'CONSULTA'", { documento: documento }, !!((_c = (_b = consultasComplementaresContext === null || consultasComplementaresContext === void 0 ? void 0 : consultasComplementaresContext.consultasComplementares) === null || _b === void 0 ? void 0 : _b.imoveis) === null || _c === void 0 ? void 0 : _c.consultaRealizada)), response = _g.response, isLoading = _g.isLoading, error = _g.error, loadingProgress = _g.loadingProgress;
     var setData = useGlobalData().setData;
     var _h = useState(false), dataUpdated = _h[0], setDataUpdated = _h[1];
     var iptus = ((_d = response === null || response === void 0 ? void 0 : response.document) === null || _d === void 0 ? void 0 : _d.IPTUS) || [];
@@ -34,11 +34,6 @@ var ConsultaImoveis = function (_a) {
     }, [
         (_f = (_e = consultasComplementaresContext === null || consultasComplementaresContext === void 0 ? void 0 : consultasComplementaresContext.consultasComplementares) === null || _e === void 0 ? void 0 : _e.imoveis) === null || _f === void 0 ? void 0 : _f.consultaRealizada
     ]);
-    var description = error
-        ? 'Erro ao consultar IPTUs. Tente mais tarde.'
-        : iptus.length > 0
-            ? "Foram encontrados ".concat(iptus.length, " registros de IPTU")
-            : 'Nenhum registro de IPTU encontrado para o documento informado.';
     useEffect(function () {
         var _a;
         (_a = consultaImoveisRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
@@ -46,10 +41,22 @@ var ConsultaImoveis = function (_a) {
             setData(function (prevState) { return (__assign(__assign({}, prevState), { imoveis: response.document })); });
             setDataUpdated(true);
         }
-    }, [response]);
-    return consultaImoveisRealizada ? (React.createElement("div", null,
-        React.createElement(Header, { innerRef: consultaImoveisRef, title: "Consulta de IPTU", subtitle: "Registros de IPTU para o documento informado", variant: isLoading ? 'loading' : error ? 'error' : 'default', description: React.createElement(StatusMessage, { type: error ? 'error' : iptus.length ? 'success' : 'default' }, (error === null || error === void 0 ? void 0 : error.message) || description), icon: ImoveisIcon }),
-        React.createElement(Result, null, iptus.map(function (iptu, index) {
+    }, [response, dataUpdated, setData]);
+    return consultaImoveisRealizada ? (React.createElement(Section, { ctx: {
+            type: isLoading
+                ? RequestStatus.Loading
+                : error
+                    ? RequestStatus.Error
+                    : RequestStatus.Success,
+            error: error || null,
+            response: undefined,
+            document: iptus,
+            refetch: function () { },
+            Section: Section,
+            progress: loadingProgress
+        }, title: "Consulta de IPTU", subtitle: "Registros de IPTU para o documento informado", icon: ImoveisIcon, description: !error && (React.createElement(StatusMessage, { type: iptus.length ? 'success' : 'default' }, iptus.length > 0
+            ? "Foram encontrados ".concat(iptus.length, " registros de IPTU")
+            : 'Nenhum registro de IPTU encontrado para o documento informado.')), onSuccess: function () { return (React.createElement(Result, null, iptus.map(function (iptu, index) {
             var _a, _b, _c, _d, _e, _f, _g;
             return (React.createElement(ResultContent, { key: index, desktop: "repeat(5, 1fr)", tablet: "repeat(3, 1fr)", mobile: "1fr 1fr" },
                 React.createElement(AddItemField, { name: "Endere\u00E7o", value: iptu.ENDERECO }),
@@ -64,6 +71,12 @@ var ConsultaImoveis = function (_a) {
                 React.createElement(AddItemField, { name: "Ano de Constru\u00E7\u00E3o", value: String(iptu.ANO) }),
                 React.createElement(AddItemField, { name: "Valor do IPTU", value: formatMoney((_f = iptu.VALOR) === null || _f === void 0 ? void 0 : _f.IPTU) }),
                 React.createElement(AddItemField, { name: "Valor do Im\u00F3vel", value: formatMoney((_g = iptu.VALOR) === null || _g === void 0 ? void 0 : _g.CONSTRUCAO) })));
-        })))) : null;
+        }))); }, isError: function (err) { return ({
+            children: React.createElement(React.Fragment, null),
+            description: (React.createElement(StatusMessage, { type: "error" },
+                "Erro ao realizar a consulta: ",
+                err.message)),
+            variant: 'error'
+        }); } })) : null;
 };
 export default ConsultaImoveis;

package/dist/components/interface/header.d.ts

@@ -1,13 +1,17 @@
 import { IconProps } from '@/@types/icon';
-import React, { ComponentProps, ComponentType, DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
-import LoadingBar from './loadingBar';
+import React, { ComponentType, DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
 export type HeaderProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLElement> & {
     title?: ReactNode;
     subtitle?: ReactNode;
     description?: ReactNode;
     actions?: ReactNode;
     className?: string;
-    loadingProps?: ComponentProps<typeof LoadingBar>;
+    loadingProps?: {
+        percentage?: number;
+        activeRequests?: number;
+        hidden?: boolean;
+        showLoadingBar?: boolean;
+    };
     icon?: ComponentType<IconProps>;
     iconProps?: IconProps;
     titleClassName?: string;

package/dist/components/interface/header.js

@@ -72,15 +72,19 @@ var Description = styled.div(templateObject_3 || (templateObject_3 = __makeTempl
 });
 var HeaderUI = styled(function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (React.createElement("header", __assign({}, props), children));
+    return React.createElement("header", __assign({}, props), children);
 })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  @media screen {\n    background: #ffffff !important;\n    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15);\n    border-radius: 30px;\n  }\n\n  @media print {\n    page-break-before: avoid;\n    page-break-after: avoid;\n    page-break-inside: avoid;\n    padding: 18px;\n    print-color-adjust: exact;\n    background: #eae9e9;\n    border-radius: 18px;\n  }\n\n  padding: 30px 20px;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n\n  ", " {\n    color: ", ";\n  }\n"], ["\n  @media screen {\n    background: #ffffff !important;\n    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15);\n    border-radius: 30px;\n  }\n\n  @media print {\n    page-break-before: avoid;\n    page-break-after: avoid;\n    page-break-inside: avoid;\n    padding: 18px;\n    print-color-adjust: exact;\n    background: #eae9e9;\n    border-radius: 18px;\n  }\n\n  padding: 30px 20px;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n\n  ", " {\n    color: ", ";\n  }\n"])), Title, function (props) { return props.color; });
 var HeaderContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  gap: 20px;\n\n  @media print {\n    width: 100%;\n  }\n"], ["\n  display: flex;\n  gap: 20px;\n\n  @media print {\n    width: 100%;\n  }\n"])));
 var ActionsList = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n"])));
 var IconWrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  padding-top: 5px;\n  width: 30px;\n"], ["\n  display: flex;\n  align-items: flex-start;\n  padding-top: 5px;\n  width: 30px;\n"])));
 var TextWrapper = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n\n  .text-wrapper-subtitle-description {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: center;\n\n    @media (max-width: 768px) {\n      align-items: flex-start;\n    }\n\n    @media print {\n      flex-direction: row;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n\n  .text-wrapper-subtitle-description {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: center;\n\n    @media (max-width: 768px) {\n      align-items: flex-start;\n    }\n\n    @media print {\n      flex-direction: row;\n    }\n  }\n"])));
+var LoadingBarWrapper = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: 100%;\n  max-width: 300px;\n  height: 10px;\n  opacity: ", ";\n  transition: opacity 0.3s ease;\n"], ["\n  width: 100%;\n  max-width: 300px;\n  height: 10px;\n  opacity: ", ";\n  transition: opacity 0.3s ease;\n"])), function (_a) {
+    var hidden = _a.hidden;
+    return (hidden ? 0 : 1);
+});
 var Header = function (_a) {
-    var title = _a.title, subtitle = _a.subtitle, description = _a.description, actions = _a.actions, Icon = _a.icon, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, iconProps = _a.iconProps, loadingProps = _a.loadingProps, className = _a.className, titleClassName = _a.titleClassName, subtitleClassName = _a.subtitleClassName, descriptionClassName = _a.descriptionClassName, containerClassName = _a.containerClassName, actionsClassName = _a.actionsClassName, innerRef = _a.innerRef, _c = _a.printBar, printBar = _c === void 0 ? true : _c, props = __rest(_a, ["title", "subtitle", "description", "actions", "icon", "variant", "iconProps", "loadingProps", "className", "titleClassName", "subtitleClassName", "descriptionClassName", "containerClassName", "actionsClassName", "innerRef", "printBar"]);
-    var theme = useTheme(); // Hook para acessar o tema
+    var title = _a.title, subtitle = _a.subtitle, description = _a.description, actions = _a.actions, Icon = _a.icon, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, iconProps = _a.iconProps, _c = _a.loadingProps, loadingProps = _c === void 0 ? {} : _c, className = _a.className, titleClassName = _a.titleClassName, subtitleClassName = _a.subtitleClassName, descriptionClassName = _a.descriptionClassName, containerClassName = _a.containerClassName, actionsClassName = _a.actionsClassName, innerRef = _a.innerRef, _d = _a.printBar, printBar = _d === void 0 ? true : _d, props = __rest(_a, ["title", "subtitle", "description", "actions", "icon", "variant", "iconProps", "loadingProps", "className", "titleClassName", "subtitleClassName", "descriptionClassName", "containerClassName", "actionsClassName", "innerRef", "printBar"]);
+    var theme = useTheme();
     var headerClass = classNames(className);
     var actionsClass = classNames(actionsClassName);
     var containerClass = classNames(containerClassName);
@@ -95,7 +99,8 @@ var Header = function (_a) {
                     React.createElement("div", { className: "text-wrapper-subtitle-description" },
                         React.createElement(Subtitle, { hidden: isLoading || !subtitle, className: subtitleClassName }, subtitle),
                         React.createElement(Description, { hidden: isLoading || !description, className: descriptionClassName }, description)),
-                    React.createElement(LoadingBar, { percentage: (loadingProps === null || loadingProps === void 0 ? void 0 : loadingProps.percentage) || 0, hidden: !isLoading }))),
+                    React.createElement(LoadingBarWrapper, { hidden: !isLoading },
+                        React.createElement(LoadingBar, { percentage: (loadingProps === null || loadingProps === void 0 ? void 0 : loadingProps.percentage) || 0 })))),
             React.createElement(ActionsList, { className: actionsClass }, actions && actions))));
 };
 var getVariantColor = function (type, theme) {
@@ -108,4 +113,4 @@ var getVariantColor = function (type, theme) {
     return options[type];
 };
 export default Header;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/components/interface/loadingBar.d.ts

@@ -1,5 +1,6 @@
 import React, { HTMLAttributes } from 'react';
 declare const LoadingBar: React.FC<{
     percentage: number;
+    hidden?: boolean;
 } & HTMLAttributes<HTMLDivElement>>;
 export default LoadingBar;

package/dist/components/interface/loadingBar.js

@@ -26,23 +26,23 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import styled from 'styled-components';
-var GreyBar = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 330px;\n  height: 10px;\n  background-color: ", ";\n  border-radius: 10px;\n"], ["\n  width: 330px;\n  height: 10px;\n  background-color: ", ";\n  border-radius: 10px;\n"])), function (_a) {
+var GreyBar = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 18.75rem;\n  height: 0.625rem;\n  background-color: ", ";\n  border-radius: 10px;\n  position: relative;\n  overflow: hidden;\n  visibility: ", ";\n\n  @media (max-width: 600px) {\n    width: 12.5rem;\n  }\n\n  @media (max-width: 400px) {\n    width: 9.375rem;\n  }\n"], ["\n  width: 18.75rem;\n  height: 0.625rem;\n  background-color: ", ";\n  border-radius: 10px;\n  position: relative;\n  overflow: hidden;\n  visibility: ", ";\n\n  @media (max-width: 600px) {\n    width: 12.5rem;\n  }\n\n  @media (max-width: 400px) {\n    width: 9.375rem;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.colors.cinzaClaro;
-});
-var BlueBar = styled(GreyBar)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: ", ";\n  width: ", ";\n  background-color: ", ";\n"], ["\n  display: ", ";\n  width: ", ";\n  background-color: ", ";\n"])), function (_a) {
-    var percentage = _a.percentage;
-    return (percentage ? 'block' : 'none');
 }, function (_a) {
+    var hidden = _a.hidden;
+    return hidden ? 'hidden' : 'visible';
+});
+var BlueBar = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: ", "%;\n  height: 100%;\n  background-color: ", ";\n  border-radius: 10px;\n  transition: width 0.4s ease-in-out;\n"], ["\n  width: ", "%;\n  height: 100%;\n  background-color: ", ";\n  border-radius: 10px;\n  transition: width 0.4s ease-in-out;\n"])), function (_a) {
     var percentage = _a.percentage;
-    return percentage && percentage + '%';
+    return Math.min(percentage, 100);
 }, function (_a) {
     var theme = _a.theme;
     return theme.colors.azulCredithub;
 });
 var LoadingBar = function (_a) {
-    var _b = _a.percentage, percentage = _b === void 0 ? 0 : _b, props = __rest(_a, ["percentage"]);
-    return (React.createElement(GreyBar, __assign({}, props),
+    var _b = _a.percentage, percentage = _b === void 0 ? 0 : _b, _c = _a.hidden, hidden = _c === void 0 ? false : _c, props = __rest(_a, ["percentage", "hidden"]);
+    return (React.createElement(GreyBar, __assign({ hidden: hidden }, props),
         React.createElement(BlueBar, { percentage: percentage })));
 };
 export default LoadingBar;

package/dist/components/interface/section.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
+import { RequestContext } from '../webservice';
 import { HeaderProps } from './header';
 export interface SectionProps extends React.PropsWithChildren<{
     onClose?: () => void;
     onClickPrint?: () => void;
     minimized?: boolean;
     contentClassName?: string;
+    ctx?: RequestContext<any>;
 } & HeaderProps> {
 }
 declare const Section: React.FC<SectionProps>;

package/dist/components/interface/section.js

@@ -2,16 +2,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import React from 'react';
-import classNames from 'classnames';
-import useToggle from '../../hooks/useToggle';
-import Header from './header';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import BtnWrapper from '../../assets/btn/btnWrapper';
 import ChevronDown from '../../assets/btn/chevronDown';
 import ChevronUp from '../../assets/btn/chevronUp';
 import CloseIcon from '../../assets/btn/closeIcon';
-import BtnWrapper from '../../assets/btn/btnWrapper';
-import styled from 'styled-components';
 import PrintIcon from '../../assets/btn/printIcon';
+import useToggle from '../../hooks/useToggle';
+import classNames from 'classnames';
+import React from 'react';
+import styled from 'styled-components';
+import Header from './header';
 var SectionContaner = styled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  @media screen {\n    background-color: rgb(239, 239, 239);\n  }\n  page-break-before: avoid;\n  page-break-after: avoid;\n  page-break-inside: avoid;\n"], ["\n  @media screen {\n    background-color: rgb(239, 239, 239);\n  }\n  page-break-before: avoid;\n  page-break-after: avoid;\n  page-break-inside: avoid;\n"])));
 var ResultContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: ", ";\n  position: relative;\n  margin-top: 20px;\n  flex-direction: column;\n  row-gap: 20px;\n  @media screen {\n    background-color: #efefef;\n  }\n"], ["\n  display: ", ";\n  position: relative;\n  margin-top: 20px;\n  flex-direction: column;\n  row-gap: 20px;\n  @media screen {\n    background-color: #efefef;\n  }\n"])), function (props) { return (props.hide ? 'none' : 'flex'); });
 var Section = function (_a) {