@credithub/harlan-components 1.68.0 → 1.69.1

package/dist/components/liminar/liminar.js

@@ -11,12 +11,14 @@ var __assign = (this && this.__assign) || function () {
 };
 import ProtestosIcon from '../../assets/icones/protestos';
 import { useGlobalData } from '../../contexts/globalDataContext';
+import theme from '../../styles/theme';
 import { normalizeName, similarNames } from '../../utils/similarNames';
+import { WarningCircle } from 'phosphor-react';
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import StatusMessage from '../interface/statusMessage';
 import Section from '../section';
 import { Queries, RequestStatus } from '../webservice';
-import { TitleWithTooltip, TooltipContainer, TooltipIcon, TooltipText } from './liminarStyles';
+import { TitleWithTooltip, TooltipContainer, TooltipText } from './liminarStyles';
 var validAssuntos = [
     'protesto indevido de título',
     'protesto indevido de títulos',
@@ -42,7 +44,18 @@ var Liminar = function () {
     var processingRef = useRef(true);
     var resultRef = useRef('Não encontrado');
     var dataHashRef = useRef('');
-    var _d = useState(false), showInversionInfo = _d[0], setShowInversionInfo = _d[1];
+    var _d = useState(false), isTooltipVisible = _d[0], setTooltipVisible = _d[1];
+    var hideTooltipTimeout = useRef(null);
+    var showTooltip = function () {
+        if (hideTooltipTimeout.current)
+            clearTimeout(hideTooltipTimeout.current);
+        setTooltipVisible(true);
+    };
+    var hideTooltip = function () {
+        hideTooltipTimeout.current = setTimeout(function () {
+            setTooltipVisible(false);
+        }, 300);
+    };
     var tiposDocumento = useMemo(function () {
         var _a;
         var tipoRaw = (_a = ctx.document) === null || _a === void 0 ? void 0 : _a.type;
@@ -92,7 +105,7 @@ var Liminar = function () {
                 return null;
         }
     };
-    var origensDetectadas = useMemo(function () {
+    var _e = useMemo(function () {
         var _a;
         var labels = new Set();
         var indiciosApi = ((_a = ctx.document) === null || _a === void 0 ? void 0 : _a.indiciosDeLiminar) === true;
@@ -105,21 +118,26 @@ var Liminar = function () {
         }
         if (processosComAssuntoValido.length > 0) {
             labels.add('Liminar no Judiciário');
-            var foundBusinessEntity = processosComAssuntoValido.some(function (processo) {
-                var _a;
-                return (_a = processo.envolvidos_ultima_movimentacao) === null || _a === void 0 ? void 0 : _a.some(function (e) {
-                    if (e.envolvido_tipo !== 'Ativo')
-                        return false;
-                    var nomeNorm = normalizeName(e.nome_sem_filtro);
-                    return businessTypes.some(function (type) { return nomeNorm.includes(type); });
-                });
-            });
-            if (foundBusinessEntity) {
-                setShowInversionInfo(true);
-            }
         }
-        return Array.from(labels);
-    }, [ctx.document, tiposDocumento, processosComAssuntoValido]);
+        var foundEntity = processosComAssuntoValido.some(function (processo) {
+            var _a;
+            return (_a = processo.envolvidos_ultima_movimentacao) === null || _a === void 0 ? void 0 : _a.some(function (e) {
+                if (e.envolvido_tipo !== 'Ativo')
+                    return false;
+                var nomeNorm = normalizeName(e.nome_sem_filtro);
+                return businessTypes.some(function (type) { return nomeNorm.includes(type); });
+            });
+        });
+        return {
+            origensDetectadas: Array.from(labels),
+            foundBusinessEntity: foundEntity
+        };
+    }, [ctx.document, tiposDocumento, processosComAssuntoValido]), origensDetectadas = _e.origensDetectadas, foundBusinessEntity = _e.foundBusinessEntity;
+    useEffect(function () {
+        if (!foundBusinessEntity)
+            return;
+        setData(function (prev) { return (__assign(__assign({}, prev), { liminar: __assign(__assign({}, prev.liminar), { invertedProcessos: processosComAssuntoValido.map(function (p) { return p.id; }) }) })); });
+    }, [foundBusinessEntity, processosComAssuntoValido, setData]);
     var isErro404 = useMemo(function () { return ctx.type === RequestStatus.Error && !!ctx.error; }, [ctx.type, ctx.error]);
     var derivedCtx = useMemo(function () { return (__assign(__assign({}, ctx), { type: isErro404 ? RequestStatus.Success : ctx.type, document: isErro404 ? { indiciosDeLiminar: false } : ctx.document })); }, [ctx, isErro404]);
     useEffect(function () {
@@ -145,7 +163,7 @@ var Liminar = function () {
             console.error('Erro na requisição de liminares:', ctx.error || 'desconhecido');
         }
         var indiciosApi = ((_d = ctx.document) === null || _d === void 0 ? void 0 : _d.indiciosDeLiminar) === true;
-        var finalStatus = indiciosApi || origensDetectadas.length > 0
+        var finalStatus = indiciosApi || processosComAssuntoValido.length > 0
             ? 'Encontrado'
             : 'Não encontrado';
         setData(function (prev) {
@@ -164,7 +182,7 @@ var Liminar = function () {
         resultRef.current = finalStatus;
         processingRef.current = false;
         processedRef.current = true;
-    }, [ctx, globalData, origensDetectadas, setData, isErro404]);
+    }, [ctx, globalData, processosComAssuntoValido, setData, isErro404]);
     var scrollToProcesso = function (id) {
         var el = document.getElementById(id);
         if (el) {
@@ -176,23 +194,25 @@ var Liminar = function () {
     if (processedRef.current && resultRef.current === 'Não encontrado') {
         return null;
     }
+    var renderTooltipIcon = function () {
+        var color = origensDetectadas.length > 0
+            ? theme.colors.erroClaro
+            : theme.colors.cinzaClaro;
+        return (React.createElement(WarningCircle, { weight: "fill", size: 24, color: color, style: { marginLeft: 4 } }));
+    };
     return (React.createElement(Section, { title: React.createElement(React.Fragment, null,
             React.createElement(TitleWithTooltip, null,
                 "Liminares para Remo\u00E7\u00E3o de Protesto",
-                showInversionInfo && (React.createElement(TooltipContainer, null,
-                    React.createElement(TooltipIcon, null),
-                    React.createElement(TooltipText, null,
-                        "Aten\u00E7\u00E3o: Em alguns casos, o sistema judicial pode registrar os pap\u00E9is das partes de forma invertida, dificultando a interpreta\u00E7\u00E3o direta. Por isso, utilizamos algoritmos internos para detectar esse padr\u00E3o com base em contexto e palavras-chave.",
-                        processosComAssuntoValido.length > 0 && (React.createElement(React.Fragment, null,
-                            React.createElement("br", null),
-                            React.createElement("br", null),
-                            "Processos com ind\u00EDcios encontrados:",
-                            React.createElement("ul", { style: { marginTop: '6px', paddingLeft: '18px' } }, processosComAssuntoValido.map(function (proc, idx) { return (React.createElement("li", { key: idx, onClick: function () { return scrollToProcesso(proc.id); }, style: {
-                                    fontSize: '13px',
-                                    cursor: 'pointer',
-                                    textDecoration: 'underline',
-                                    color: '#007aff'
-                                } }, proc.id)); }))))))))), subtitle: processingRef.current
+                processosComAssuntoValido.length > 0 && (React.createElement(TooltipContainer, { onMouseEnter: showTooltip, onMouseLeave: hideTooltip },
+                    renderTooltipIcon(),
+                    React.createElement(TooltipText, { visible: isTooltipVisible }, processosComAssuntoValido.length > 0 && (React.createElement(React.Fragment, null,
+                        "Processos com ind\u00EDcios encontrados:",
+                        React.createElement("ul", { style: { marginTop: '6px', paddingLeft: '18px' } }, processosComAssuntoValido.map(function (proc, idx) { return (React.createElement("li", { key: idx, onClick: function () { return scrollToProcesso(proc.id); }, style: {
+                                fontSize: '13px',
+                                cursor: 'pointer',
+                                textDecoration: 'underline',
+                                color: '#007aff'
+                            } }, proc.id)); }))))))))), subtitle: processingRef.current
             ? 'Carregando liminar...'
             : 'Indícios de liminares para ocultação de registros.', icon: ProtestosIcon, ctx: processingRef.current
             ? __assign(__assign({}, ctx), { type: RequestStatus.Loading }) : derivedCtx, onSuccess: processingRef.current

package/dist/components/liminar/liminarStyles.d.ts

@@ -3,5 +3,8 @@ export declare const TooltipIcon: import("styled-components").StyledComponent<im
     weight: "fill";
     size: 24;
 }, "size" | "weight">;
-export declare const TooltipText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const TooltipText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    visible: boolean;
+}, never>;
 export declare const TitleWithTooltip: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const GrayHighlighted: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/liminar/liminarStyles.js

@@ -5,11 +5,24 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import theme from '../../styles/theme';
 import { WarningCircle } from 'phosphor-react';
 import styled from 'styled-components';
-export var TooltipContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  margin-left: 8px;\n\n  &:hover {\n    span {\n      visibility: visible;\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  margin-left: 8px;\n\n  &:hover {\n    span {\n      visibility: visible;\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n"])));
+export var TooltipContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  margin-left: 8px;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  margin-left: 8px;\n"])));
 export var TooltipIcon = styled(WarningCircle).attrs({
     weight: 'fill',
     size: 24
 })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  cursor: pointer;\n  transition: transform 0.2s ease;\n\n  &:hover {\n    transform: scale(1.2);\n  }\n"], ["\n  color: ", ";\n  cursor: pointer;\n  transition: transform 0.2s ease;\n\n  &:hover {\n    transform: scale(1.2);\n  }\n"])), theme.colors.laranja);
-export var TooltipText = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  visibility: hidden;\n  width: 380px;\n  max-width: 90vw;\n  background-color: ", ";\n  color: ", ";\n  text-align: left;\n  border-radius: 10px;\n  padding: 16px 18px;\n  font-size: 15px;\n  font-weight: 500;\n  font-style: normal;\n  line-height: 1.35;\n  position: absolute;\n  z-index: 10;\n  top: 130%;\n  left: 0;\n  opacity: 0;\n  transform: translateY(-10px);\n  transition:\n    opacity 0.3s ease-in-out,\n    transform 0.3s ease-in-out;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n\n  @media screen and (max-width: 768px) {\n    font-size: 14px;\n    padding: 14px;\n  }\n"], ["\n  visibility: hidden;\n  width: 380px;\n  max-width: 90vw;\n  background-color: ", ";\n  color: ", ";\n  text-align: left;\n  border-radius: 10px;\n  padding: 16px 18px;\n  font-size: 15px;\n  font-weight: 500;\n  font-style: normal;\n  line-height: 1.35;\n  position: absolute;\n  z-index: 10;\n  top: 130%;\n  left: 0;\n  opacity: 0;\n  transform: translateY(-10px);\n  transition:\n    opacity 0.3s ease-in-out,\n    transform 0.3s ease-in-out;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n\n  @media screen and (max-width: 768px) {\n    font-size: 14px;\n    padding: 14px;\n  }\n"])), theme.colors.cinzaBase, theme.colors.erroApoio);
+export var TooltipText = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  visibility: ", ";\n  pointer-events: ", ";\n  opacity: ", ";\n  transform: ", ";\n\n  width: 380px;\n  max-width: 90vw;\n  background-color: ", ";\n  color: ", ";\n  text-align: left;\n  border-radius: 10px;\n  padding: 10px 16px 16px 16px;\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 1.35;\n  position: absolute;\n  z-index: 10;\n  top: 130%;\n  left: 0;\n  transition:\n    opacity 0.3s ease-in-out,\n    transform 0.3s ease-in-out;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n\n  @media screen and (max-width: 768px) {\n    font-size: 14px;\n    padding: 10px 14px 14px 14px;\n  }\n"], ["\n  visibility: ", ";\n  pointer-events: ", ";\n  opacity: ", ";\n  transform: ", ";\n\n  width: 380px;\n  max-width: 90vw;\n  background-color: ", ";\n  color: ", ";\n  text-align: left;\n  border-radius: 10px;\n  padding: 10px 16px 16px 16px;\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 1.35;\n  position: absolute;\n  z-index: 10;\n  top: 130%;\n  left: 0;\n  transition:\n    opacity 0.3s ease-in-out,\n    transform 0.3s ease-in-out;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n\n  @media screen and (max-width: 768px) {\n    font-size: 14px;\n    padding: 10px 14px 14px 14px;\n  }\n"])), function (_a) {
+    var visible = _a.visible;
+    return (visible ? 'visible' : 'hidden');
+}, function (_a) {
+    var visible = _a.visible;
+    return (visible ? 'auto' : 'none');
+}, function (_a) {
+    var visible = _a.visible;
+    return (visible ? 1 : 0);
+}, function (_a) {
+    var visible = _a.visible;
+    return visible ? 'translateY(0)' : 'translateY(-10px)';
+}, theme.colors.cinzaBase, theme.colors.erroApoio);
 export var TitleWithTooltip = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+export var GrayHighlighted = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  animation: highlight-gray 0.6s ease-out;\n\n  @keyframes highlight-gray {\n    from {\n      background-color: ", ";\n    }\n    to {\n      background-color: transparent;\n    }\n  }\n"], ["\n  animation: highlight-gray 0.6s ease-out;\n\n  @keyframes highlight-gray {\n    from {\n      background-color: ", ";\n    }\n    to {\n      background-color: transparent;\n    }\n  }\n"])), theme.colors.cinzaClaro);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/processos-juridicos/processosJuridicosList.js

@@ -40,17 +40,23 @@ var AddProcessoJuridicoField = function (_a) {
 var ProcessoJuridicoWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  scroll-margin-top: 100px;\n\n  @media (min-width: 1000px) {\n    flex-direction: row;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  scroll-margin-top: 100px;\n\n  @media (min-width: 1000px) {\n    flex-direction: row;\n  }\n"])));
 var ConsultarProcessoBtn = styled(Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  @media (min-width: 1000px) {\n    width: 100%;\n    max-width: 150px;\n    height: max-content;\n  }\n"], ["\n  @media (min-width: 1000px) {\n    width: 100%;\n    max-width: 150px;\n    height: max-content;\n  }\n"])));
 var ResultWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
-var CNJWithIcon = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n"])));
+var CNJWithIcon = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  position: relative;\n\n  &:hover::after {\n    content: attr(data-tooltip);\n    position: absolute;\n    bottom: -28px;\n    left: 0;\n    background-color: #333;\n    color: #fff;\n    padding: 6px 8px;\n    border-radius: 4px;\n    font-size: 12px;\n    white-space: nowrap;\n    z-index: 999;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  position: relative;\n\n  &:hover::after {\n    content: attr(data-tooltip);\n    position: absolute;\n    bottom: -28px;\n    left: 0;\n    background-color: #333;\n    color: #fff;\n    padding: 6px 8px;\n    border-radius: 4px;\n    font-size: 12px;\n    white-space: nowrap;\n    z-index: 999;\n  }\n"])));
 var ProcessoJuridicoItem = memo(function (_a) {
-    var _b, _c, _d;
+    var _b, _c, _d, _e, _f;
     var processo = _a.processo, children = _a.children, highlighted = _a.highlighted;
     var global = useGlobalData().data;
     var hasLiminar = ((_b = global === null || global === void 0 ? void 0 : global.liminar) === null || _b === void 0 ? void 0 : _b.message) === 'Encontrado' &&
         ((_d = (_c = global === null || global === void 0 ? void 0 : global.liminar) === null || _c === void 0 ? void 0 : _c.processosComLiminarIds) === null || _d === void 0 ? void 0 : _d.includes(processo.id));
+    var isInverted = (_f = (_e = global === null || global === void 0 ? void 0 : global.liminar) === null || _e === void 0 ? void 0 : _e.invertedProcessos) === null || _f === void 0 ? void 0 : _f.includes(processo.id);
+    var tooltipText = isInverted
+        ? 'Atenção: Em alguns casos, o sistema judicial pode registrar os polos das partes de forma invertida, dificultando a interpretação direta.'
+        : hasLiminar
+            ? 'Indício de liminar identificada.'
+            : '';
     return (React.createElement(ProcessoJuridicoWrapper, { id: processo.id, className: highlighted ? 'highlighted-process' : '' },
         React.createElement(ResultWrapper, null,
             React.createElement(ResultContent, { fullWidth: true, desktop: "1.5fr 1.5fr repeat(3, 1fr)", tablet: "repeat(3, 1fr)" },
-                React.createElement(AddProcessoJuridicoField, { name: "N\u00FAmero CNJ", value: hasLiminar ? (React.createElement(CNJWithIcon, null,
+                React.createElement(AddProcessoJuridicoField, { name: "N\u00FAmero CNJ", value: hasLiminar ? (React.createElement(CNJWithIcon, { "data-tooltip": tooltipText },
                         React.createElement(WarningCircle, { size: 18, weight: "fill", style: { color: '#FFA500' } }),
                         React.createElement("span", null, processo.numero_novo))) : (processo.numero_novo) }),
                 React.createElement(AddProcessoJuridicoField, { name: "Assunto(s)", value: processo.assuntos }),

package/dist/styles/globalStyle.js

@@ -4,6 +4,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { createGlobalStyle, css } from 'styled-components';
 var OpenSansFont = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  @import url('https://fonts.googleapis.com/css?family=Open%20Sans%20Condensed:300,400,500,600,700');\n"], ["\n  @import url('https://fonts.googleapis.com/css?family=Open%20Sans%20Condensed:300,400,500,600,700');\n"])));
-var GlobalStyle = createGlobalStyle(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  * {\n    ", "\n    font-family: 'Open Sans Condensed';\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  body {\n    -webkit-font-smoothing: antialiased;\n  }\n\n  @media print {\n    button,\n    [class*=\"Button\"],\n    [class^=\"Button\"],\n    [class*=\"btn\"],\n    [class^=\"btn\"],\n    .button,\n    .btn {\n      display: none !important;\n    }\n  }\n\n  @keyframes highlight {\n    from {\n      background-color: rgba(255, 215, 0, 0.35);\n    }\n    to {\n      background-color: transparent;\n    }\n  }\n\n  .highlighted-process {\n    animation: highlight 3s ease-out forwards !important;\n  }\n"], ["\n  * {\n    ", "\n    font-family: 'Open Sans Condensed';\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  body {\n    -webkit-font-smoothing: antialiased;\n  }\n\n  @media print {\n    button,\n    [class*=\"Button\"],\n    [class^=\"Button\"],\n    [class*=\"btn\"],\n    [class^=\"btn\"],\n    .button,\n    .btn {\n      display: none !important;\n    }\n  }\n\n  @keyframes highlight {\n    from {\n      background-color: rgba(255, 215, 0, 0.35);\n    }\n    to {\n      background-color: transparent;\n    }\n  }\n\n  .highlighted-process {\n    animation: highlight 3s ease-out forwards !important;\n  }\n"])), OpenSansFont);
+var GlobalStyle = createGlobalStyle(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  * {\n    ", "\n    font-family: 'Open Sans Condensed';\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  body {\n    -webkit-font-smoothing: antialiased;\n  }\n\n  @media print {\n    button,\n    [class*=\"Button\"],\n    [class^=\"Button\"],\n    [class*=\"btn\"],\n    [class^=\"btn\"],\n    .button,\n    .btn {\n      display: none !important;\n    }\n  }\n\n  @keyframes highlight {\n    from {\n      background-color: rgba(255, 215, 0, 0.35);\n    }\n    to {\n      background-color: transparent;\n    }\n  }\n\n  .highlighted-process {\n    animation: highlight 3s ease-out forwards !important;\n  }\n\n  .blue-highlighted-process {\n    animation: blueHighlight 2.5s ease-in-out;\n    background-color: rgba(0, 122, 255, 0.15);\n    transition: background-color 0.3s ease-in-out;\n  }\n\n  @keyframes blueHighlight {\n    from {\n      background-color: rgba(0, 122, 255, 0.35);\n    }\n    to {\n      background-color: rgba(0, 122, 255, 0.15);\n    }\n  }\n"], ["\n  * {\n    ", "\n    font-family: 'Open Sans Condensed';\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  body {\n    -webkit-font-smoothing: antialiased;\n  }\n\n  @media print {\n    button,\n    [class*=\"Button\"],\n    [class^=\"Button\"],\n    [class*=\"btn\"],\n    [class^=\"btn\"],\n    .button,\n    .btn {\n      display: none !important;\n    }\n  }\n\n  @keyframes highlight {\n    from {\n      background-color: rgba(255, 215, 0, 0.35);\n    }\n    to {\n      background-color: transparent;\n    }\n  }\n\n  .highlighted-process {\n    animation: highlight 3s ease-out forwards !important;\n  }\n\n  .blue-highlighted-process {\n    animation: blueHighlight 2.5s ease-in-out;\n    background-color: rgba(0, 122, 255, 0.15);\n    transition: background-color 0.3s ease-in-out;\n  }\n\n  @keyframes blueHighlight {\n    from {\n      background-color: rgba(0, 122, 255, 0.35);\n    }\n    to {\n      background-color: rgba(0, 122, 255, 0.15);\n    }\n  }\n"])), OpenSansFont);
 export default GlobalStyle;
 var templateObject_1, templateObject_2;