@gyramais/gyra-design 0.2.2 → 0.2.22

package/dist/emails/email/shadcn/radio-group.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { RadioGroup, RadioGroupItem };

package/dist/emails/email/shadcn/switch.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Switch };

package/dist/emails/email/shadcn/tabs.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/emails/email/shadcn/tooltip.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/emails/email/theme.d.ts

@@ -0,0 +1,20 @@
+interface Colors {
+    backgroundColor: string;
+    primaryButton: string;
+    secondaryButton: string;
+    linkButton: string;
+}
+interface Images {
+    whiteLogoUrl: string;
+    darkLogoUrl: string;
+    iconUrl: string;
+}
+declare const isColorDark: (hexColor: string) => boolean;
+export { isColorDark, };
+declare const _default: {
+    setTheme: ({ colors, images }: {
+        colors: Colors;
+        images: Images;
+    }) => void;
+};
+export default _default;

package/dist/index.css

@@ -729,6 +729,9 @@ video {
 .max-w-\[260px\] {
   max-width: 260px;
 }
+.max-w-\[500px\] {
+  max-width: 500px;
+}
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -746,6 +749,9 @@ video {
      -moz-user-select: none;
           user-select: none;
 }
+.resize {
+  resize: both;
+}
 .flex-col {
   flex-direction: column;
 }
@@ -3909,6 +3915,7 @@ h6 {
 }
 
 .gyramais-ai-parecer__badge-icon {
+  flex-shrink: 0;
   width: 22px;
   height: 22px;
   border-radius: 50%;
@@ -3997,6 +4004,14 @@ h6 {
   align-items: flex-start;
 }
 
+/* tom de alerta: destaque sutil usando o token de warning do design. */
+.gyramais-ai-parecer__topic--warning {
+  background: var(--warning-light-color, rgba(255, 159, 10, 0.08));
+  border-radius: 8px;
+  padding: 8px 12px;
+  margin: 0 -12px;
+}
+
 .gyramais-ai-parecer__topic-icon {
   flex-shrink: 0;
 }
@@ -9226,22 +9241,6 @@ h6 {
   color: var(--color-text-tertiary);
 }
 
-/* ── Group (categorias: Cargos, Pessoas, ...) ─────────────────────── */
-.gyramais-multi-select-picker-group + .gyramais-multi-select-picker-group {
-  margin-top: 2px;
-}
-.gyramais-multi-select-picker-group-head {
-  padding-left: 14px;
-  padding-right: 14px;
-  padding-top: 10px;
-  padding-bottom: 4px;
-  font-size: 10.5px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.07em;
-  color: var(--color-text-tertiary);
-}
-
 /* ── Footer overrides ─────────────────────────────────────────────── */
 .gyramais-multi-select-picker-count {
   font-family: var(--font-mono);
@@ -10539,3 +10538,164 @@ h6 {
   .gyramais-step-sub-title {
     font-size: 0.875rem;
     line-height: 1.25rem}}
+
+/* TourGuide — spotlight overlay + popover flutuante.
+   z-index 9998/9999 pra ficar acima de drawers, modais, tooltips etc. */
+
+.gyramais-tourguide {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  pointer-events: none;
+}
+
+.gyramais-tourguide__overlay {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+.gyramais-tourguide__spotlight-border {
+  animation: gyramais-tg-pulse 2.4s ease-in-out infinite;
+}
+
+@keyframes gyramais-tg-pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.4; }
+}
+
+/* ── Popover ── */
+.gyramais-tourguide__popover {
+  position: fixed;
+  background: #fff;
+  border: 1px solid var(--color-border-secondary, #e8e8ed);
+  border-radius: var(--radius-lg, 12px);
+  padding: 18px 20px 16px;
+  box-shadow:
+    0 8px 32px -4px rgba(0, 0, 0, 0.12),
+    0 2px 8px -2px rgba(0, 0, 0, 0.06);
+  z-index: 9999;
+  pointer-events: auto;
+  animation: gyramais-tg-in 180ms ease-out both;
+  /* Em telas baixas (mobile) o conteúdo rola dentro do card em vez de
+     vazar pra fora da viewport. maxHeight é setado inline pelo componente. */
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+@keyframes gyramais-tg-in {
+  from { opacity: 0; transform: translateY(6px) scale(0.97); }
+  to   { opacity: 1; transform: translateY(0)  scale(1); }
+}
+
+.gyramais-tourguide__step-badge {
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--gyra-blue, #1256ff);
+  margin-bottom: 7px;
+}
+
+.gyramais-tourguide__title {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--color-text-primary, #1d1d1f);
+  margin: 0 0 8px;
+  line-height: 1.3;
+}
+
+.gyramais-tourguide__body {
+  font-size: 13px;
+  color: var(--color-text-secondary, #636366);
+  line-height: 1.55;
+  margin: 0 0 16px;
+}
+
+/* ── Footer ── */
+.gyramais-tourguide__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.gyramais-tourguide__dots {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
+
+.gyramais-tourguide__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  border: none;
+  background: var(--color-border-primary, #d2d2d7);
+  cursor: pointer;
+  padding: 0;
+  transition: all 200ms ease;
+  flex-shrink: 0;
+}
+
+.gyramais-tourguide__dot--active {
+  background: var(--gyra-blue, #1256ff);
+  width: 18px;
+}
+
+.gyramais-tourguide__actions {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.gyramais-tourguide__btn-skip {
+  padding: 6px 10px;
+  border: none;
+  background: none;
+  color: var(--color-text-tertiary, #8e8e93);
+  font-size: 12.5px;
+  cursor: pointer;
+  border-radius: var(--radius-sm, 6px);
+  transition: color 150ms ease;
+  font-family: inherit;
+}
+.gyramais-tourguide__btn-skip:hover {
+  color: var(--color-text-secondary, #636366);
+}
+
+.gyramais-tourguide__btn-prev {
+  padding: 6px 12px;
+  border: 1.5px solid var(--color-border-secondary, #e8e8ed);
+  background: #fff;
+  color: var(--color-text-primary, #1d1d1f);
+  font-size: 12.5px;
+  font-weight: 600;
+  cursor: pointer;
+  border-radius: var(--radius-sm, 6px);
+  transition: background 150ms ease, border-color 150ms ease;
+  font-family: inherit;
+}
+.gyramais-tourguide__btn-prev:hover {
+  background: var(--color-surface-secondary, #fafafa);
+  border-color: var(--color-border-primary, #d2d2d7);
+}
+
+.gyramais-tourguide__btn-next {
+  padding: 6px 14px;
+  border: none;
+  background: var(--gyra-blue, #1256ff);
+  color: #fff;
+  font-size: 12.5px;
+  font-weight: 700;
+  cursor: pointer;
+  border-radius: var(--radius-sm, 6px);
+  transition: background 150ms ease;
+  font-family: inherit;
+}
+.gyramais-tourguide__btn-next:hover {
+  background: var(--gyra-blue-hover, #2f5dcb);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gyramais/gyra-design",
-  "version": "0.2.2",
+  "version": "0.2.22",
   "description": "Gyramais Design System",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/dist/components/EmailBalanceSheetFinalized/EmailBalanceSheetFinalized.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import { BalanceSheetFinalizedPayload } from '../../emails/balance-sheet-finalized';
-/**
- * Preview do email "Análise financeira concluída" (Finsights / CU-86aherfzc).
- *
- * Renderiza o HTML do template REAL (importado de
- * `gyra-design/src/emails/balance-sheet-finalized`) dentro de um iframe.
- * O mesmo módulo é consumido pelo `gyra-communication` pra disparar via
- * SendGrid — fonte da verdade unificada.
- */
-export type EmailBalanceSheetFinalizedProps = BalanceSheetFinalizedPayload & {
-    /** Largura visual do iframe. Default 700px (cabe o card 600 + paddings). */
-    width?: number | string;
-    /** Altura visual do iframe. Default 1100px (cobre todos os blocos). */
-    height?: number | string;
-};
-export declare const EmailBalanceSheetFinalized: React.FC<EmailBalanceSheetFinalizedProps>;
-export default EmailBalanceSheetFinalized;

package/dist/components/EmailBalanceSheetFinalized/index.d.ts

@@ -1,2 +0,0 @@
-export * from './EmailBalanceSheetFinalized';
-export { default } from './EmailBalanceSheetFinalized';

package/dist/components/EmailBalanceSheetFinalized/index.js

@@ -1,2 +0,0 @@
-"use client";import e from"react";const t="#1256FF",n="#7C4EFF",i="#6635E0",a="#F5F5F7",r="#FFFFFF",o="#1D1D1F",l="#636366",d="#8E8E93",p="#D2D2D7",s="#E8E8ED",c="#F6F4FF",g="rgba(124,78,255,0.22)",h={ok:{bg:"#E8F9ED",color:"#1A7D37"},warn:{bg:"#FFF4E0",color:"#946200"},danger:{bg:"#FFEDEC",color:"#C93430"},info:{bg:"#EBF4FF",color:"#0055D4"}},x="'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif",m=e=>String(e??"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;");function u(e){const n="primary"===(e.variant??"primary"),i=n?"#FFFFFF":t;return`\n    <table role="presentation" cellpadding="0" cellspacing="0" style="margin:8px 8px 0 0;display:inline-block;">\n      <tr>\n        <td style="border-radius:10px;background:${n?t:r};border:1px solid ${n?t:p};">\n          <a href="${m(function(e){try{const t=new URL(String(e));return"http:"===t.protocol||"https:"===t.protocol?t.href:"#"}catch{return"#"}}(e.url))}" target="_blank"\n             style="display:inline-block;padding:12px 22px;font-family:${x};font-size:14px;font-weight:600;color:${i};text-decoration:none;border-radius:10px;">\n            ${m(e.label)}\n          </a>\n        </td>\n      </tr>\n    </table>`}function f(e){const{preheader:t,greeting:p,title:f,paragraphs:b=[],highlights:$=[],aiParecer:y,buttons:v=[],footerNote:F}=e,w=$.length?Math.floor(100/$.length):100,E=$.length?`<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin:8px 0 4px;"><tr>${$.map(e=>function(e,t){return`\n    <td width="${t}%" style="padding:6px;" valign="top">\n      <table role="presentation" width="100%" cellpadding="0" cellspacing="0"\n             style="background:#FAFAFA;border:1px solid ${s};border-radius:12px;">\n        <tr><td style="padding:14px 16px;font-family:${x};">\n          <div style="font-size:12px;color:${l};margin-bottom:4px;">${m(e.label)}</div>\n          <div style="font-size:22px;font-weight:700;color:${e.color||o};font-family:'Lexend',${x};">${m(e.value)}</div>\n        </td></tr>\n      </table>\n    </td>`}(e,w)).join("")}</tr></table>`:"",A=b.map(e=>`<p style="margin:0 0 14px;font-family:${x};font-size:15px;line-height:1.6;color:${l};">${m(e)}</p>`).join(""),k=v.length?`<div style="margin-top:18px;">${v.map(u).join("")}</div>`:"";return`<!DOCTYPE html>\n<html lang="pt-BR">\n<head>\n  <meta charset="utf-8" />\n  <meta name="viewport" content="width=device-width,initial-scale=1.0" />\n  <meta http-equiv="X-UA-Compatible" content="IE=edge" />\n  <title>${m(f)}</title>\n</head>\n<body style="margin:0;padding:0;background:${a};">\n  ${t?`<div style="display:none;max-height:0;overflow:hidden;opacity:0;">${m(t)}</div>`:""}\n  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:${a};padding:24px 0;">\n    <tr>\n      <td align="center">\n        <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px;max-width:92%;">\n          <tr>\n            <td style="padding:8px 4px 20px;">\n              <img src="https://gyra-file-prod.s3.us-west-2.amazonaws.com/assets/gyra-logo-color.png" alt="GYRA+" height="30" style="height:30px;display:block;" />\n            </td>\n          </tr>\n          <tr>\n            <td style="background:${r};border:1px solid ${s};border-radius:16px;padding:32px;">\n              ${p?`<p style="margin:0 0 6px;font-family:${x};font-size:14px;color:${l};">${m(p)}</p>`:""}\n              <h1 style="margin:0 0 18px;font-family:'Lexend',${x};font-size:23px;line-height:1.3;color:${o};">${m(f)}</h1>\n              ${A}\n              ${E}\n              ${y?function(e){const t=e.verdict?(()=>{const t=h[e.verdictTone||"info"];return`<table role="presentation" cellpadding="0" cellspacing="0" style="display:inline-block;"><tr>\n          <td style="background:${t.bg};border-radius:999px;padding:4px 10px;font-family:${x};font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:${t.color};white-space:nowrap;">${m(e.verdict)}</td></tr></table>`})():"";return`\n    <table role="presentation" width="100%" cellpadding="0" cellspacing="0"\n           style="margin:18px 0 4px;background:${c};border:1px solid ${g};border-radius:12px;">\n      <tr><td style="padding:16px 18px;font-family:${x};">\n        <table role="presentation" width="100%" cellpadding="0" cellspacing="0"><tr>\n          <td valign="middle" width="28">\n            <div style="width:22px;height:22px;border-radius:50%;background:${n};color:#fff;text-align:center;line-height:22px;font-size:13px;">&#10022;</div>\n          </td>\n          <td valign="middle" style="padding-left:8px;">\n            <span style="font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:${i};">Parecer GYRA+IA</span>\n          </td>\n          <td valign="middle" align="right">${t}</td>\n        </tr></table>\n        <p style="margin:10px 0 0;font-size:14px;line-height:1.55;color:${l};">${m(e.text)}</p>\n        ${e.footer?`<div style="margin-top:10px;padding-top:10px;border-top:1px dashed ${g};font-size:11px;color:${d};">${m(e.footer)}</div>`:""}\n      </td></tr>\n    </table>`}(y):""}\n              ${k}\n            </td>\n          </tr>\n          <tr>\n            <td style="padding:20px 8px;font-family:${x};font-size:12px;line-height:1.5;color:${d};">\n              <p style="margin:0 0 8px;">${m(F)}</p>\n              <p style="margin:0;">GYRA+ • Esta é uma mensagem automática, não responda este email.</p>\n            </td>\n          </tr>\n        </table>\n      </td>\n    </tr>\n  </table>\n</body>\n</html>`}function b(e){const t=(e||"").toLowerCase();return t.includes("muito")&&t.includes("alto")?"#C93430":t.includes("alto")||t.includes("medio")||t.includes("médio")?"#946200":t.includes("baixo")?"#1A7D37":"#1D1D1F"}function $(e){const t=(e||"").toLowerCase();return t.includes("alto")?"danger":t.includes("medio")||t.includes("médio")?"warn":t.includes("baixo")?"ok":"info"}const y=({width:t=700,height:n=1100,...i})=>{const{html:a}=function(e){const{firstName:t,companyName:n,score:i,risk:a,recommendation:r,xlsxUrl:o,reportUrl:l}=e,d=n||"a empresa analisada",p="Análise financeira concluída"+(n?` — ${n}`:""),s=[];null!=i&&""!=`${i}`&&s.push({label:"Score GYRA+IA",value:`${i}`}),a&&s.push({label:"Nível de risco",value:a,color:b(a)});const c=[];return o&&c.push({label:"Baixar análise (Excel)",url:o,variant:"primary"}),l&&c.push({label:"Ver relatório",url:l,variant:"secondary"}),{subject:p,html:f({preheader:p,greeting:t?`Olá, ${t}`:void 0,title:"Sua análise financeira está pronta",paragraphs:[`A análise financeira de ${d} foi processada com sucesso pela GYRA+IA.`],highlights:s,aiParecer:r?{verdict:a||void 0,verdictTone:$(a),text:r,footer:"GYRA+IA · gerado a partir do balanço enviado"}:void 0,buttons:c,footerNote:"Os valores e a recomendação são gerados por IA a partir do balanço enviado e devem ser revisados pelo analista."})}}(i);return e.createElement("iframe",{title:"Email preview — Análise financeira concluída",srcDoc:a,sandbox:"",style:{width:"number"==typeof t?`${t}px`:t,height:"number"==typeof n?`${n}px`:n,border:"1px solid #E8E8ED",borderRadius:8,background:"#F5F5F7"}})};export{y as EmailBalanceSheetFinalized,y as default};
-//# sourceMappingURL=index.js.map

package/dist/components/EmailBalanceSheetFinalized/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/emails/balance-sheet-finalized/index.ts","../../../src/components/EmailBalanceSheetFinalized/EmailBalanceSheetFinalized.tsx"],"sourcesContent":["/**\n * Template do email transacional \"Análise financeira concluída\" enviado\n * quando o gyra-ai finaliza a extração de um balanço (feature Finsights —\n * card CU-86aherfzc).\n *\n * **Esta é a FONTE DA VERDADE.** Foi extraído do `gyra-communication`\n * pra cá pra ser reutilizável: o gyra-communication importa a função\n * `balanceSheetFinalizedEmail` pra disparar via SendGrid, e o componente\n * Storybook do gyra-design (`EmailBalanceSheetFinalized.tsx`) chama a mesma\n * função pra renderizar preview num iframe.\n *\n * **TS puro**: sem React, sem DOM, sem browser globals. Apenas funções que\n * retornam string HTML. Funciona igual em qualquer runtime Node (Nest) ou\n * bundle browser (Next).\n *\n * **Email-safe**: tabelas + inline-style (clients ignoram <style> externo,\n * flexbox e Material Symbols). Gradientes têm fallback sólido.\n *\n * Tokens visuais alinhados com gyra-design: azul #1256FF (acao/primary),\n * roxo #7C4EFF (IA/parecer), neutrals Apple-gray, fonte Inter.\n */\n\n// ── Tipos públicos ─────────────────────────────────────────────────────────\n\nexport type EmailButton = {\n  label: string;\n  url: string;\n  variant?: 'primary' | 'secondary';\n};\n\nexport type EmailHighlight = {\n  label: string;\n  value: string;\n  /** cor do valor (ex: risco). Default: tinta padrao. */\n  color?: string;\n};\n\nexport type AiParecerTone = 'ok' | 'warn' | 'danger' | 'info';\n\nexport type EmailAiParecer = {\n  /** chip de veredito (ex: \"Médio\", \"Consistente\"). */\n  verdict?: string;\n  verdictTone?: AiParecerTone;\n  /** corpo do parecer. */\n  text: string;\n  /** rodape (ex: \"GYRA+IA · Confiança 96%\"). */\n  footer?: string;\n};\n\nexport type EmailLayoutInput = {\n  preheader?: string;\n  greeting?: string;\n  title: string;\n  paragraphs?: string[];\n  highlights?: EmailHighlight[];\n  /** Faixa \"Parecer de IA\" (gradiente roxo→azul). */\n  aiParecer?: EmailAiParecer;\n  buttons?: EmailButton[];\n  footerNote?: string;\n};\n\nexport type BalanceSheetFinalizedPayload = {\n  firstName?: string;\n  companyName?: string;\n  score?: number | string;\n  risk?: string;\n  recommendation?: string;\n  xlsxUrl?: string;\n  reportUrl?: string;\n};\n\n// ── Tokens (espelho de gyra-design CSS variables, hard-coded pra email) ────\n\nconst C = {\n  blue: '#1256FF',\n  teal: '#1FB58A',\n  aiPurple: '#7C4EFF',\n  aiPurpleText: '#6635E0',\n  bg: '#F5F5F7',\n  card: '#FFFFFF',\n  fg1: '#1D1D1F',\n  fg2: '#636366',\n  fg3: '#8E8E93',\n  border: '#D2D2D7',\n  borderSubtle: '#E8E8ED',\n  aiCardBg: '#F6F4FF', // flatten do gradiente roxo (fallback Outlook)\n  aiBorder: 'rgba(124,78,255,0.22)',\n};\n\nconst VERDICT: Record<AiParecerTone, { bg: string; color: string }> = {\n  ok: { bg: '#E8F9ED', color: '#1A7D37' },\n  warn: { bg: '#FFF4E0', color: '#946200' },\n  danger: { bg: '#FFEDEC', color: '#C93430' },\n  info: { bg: '#EBF4FF', color: '#0055D4' },\n};\n\nconst FONT =\n  \"'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif\";\n\nconst LOGO_URL =\n  'https://gyra-file-prod.s3.us-west-2.amazonaws.com/assets/gyra-logo-color.png';\n\n// ── Helpers ────────────────────────────────────────────────────────────────\n\nconst esc = (s: string): string =>\n  String(s ?? '')\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&#39;');\n\n/**\n * Só permite http(s). Bloqueia schemes perigosos (javascript:, data:)\n * que poderiam virar href executável. URL inválida vira '#'.\n */\nfunction safeUrl(url: string): string {\n  try {\n    const u = new URL(String(url));\n    return u.protocol === 'http:' || u.protocol === 'https:' ? u.href : '#';\n  } catch {\n    return '#';\n  }\n}\n\nfunction renderButton(btn: EmailButton): string {\n  const isPrimary = (btn.variant ?? 'primary') === 'primary';\n  const bg = isPrimary ? C.blue : C.card;\n  const color = isPrimary ? '#FFFFFF' : C.blue;\n  const border = isPrimary ? C.blue : C.border;\n  return `\n    <table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" style=\"margin:8px 8px 0 0;display:inline-block;\">\n      <tr>\n        <td style=\"border-radius:10px;background:${bg};border:1px solid ${border};\">\n          <a href=\"${esc(safeUrl(btn.url))}\" target=\"_blank\"\n             style=\"display:inline-block;padding:12px 22px;font-family:${FONT};font-size:14px;font-weight:600;color:${color};text-decoration:none;border-radius:10px;\">\n            ${esc(btn.label)}\n          </a>\n        </td>\n      </tr>\n    </table>`;\n}\n\nfunction renderHighlight(h: EmailHighlight, widthPct: number): string {\n  return `\n    <td width=\"${widthPct}%\" style=\"padding:6px;\" valign=\"top\">\n      <table role=\"presentation\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\"\n             style=\"background:#FAFAFA;border:1px solid ${C.borderSubtle};border-radius:12px;\">\n        <tr><td style=\"padding:14px 16px;font-family:${FONT};\">\n          <div style=\"font-size:12px;color:${C.fg2};margin-bottom:4px;\">${esc(h.label)}</div>\n          <div style=\"font-size:22px;font-weight:700;color:${h.color || C.fg1};font-family:'Lexend',${FONT};\">${esc(h.value)}</div>\n        </td></tr>\n      </table>\n    </td>`;\n}\n\nfunction renderAiParecer(p: EmailAiParecer): string {\n  const v = p.verdict\n    ? (() => {\n        const t = VERDICT[p.verdictTone || 'info'];\n        // table/td (Outlook ignora padding/border-radius em <span>).\n        return `<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" style=\"display:inline-block;\"><tr>\n          <td style=\"background:${t.bg};border-radius:999px;padding:4px 10px;font-family:${FONT};font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:${t.color};white-space:nowrap;\">${esc(\n            p.verdict,\n          )}</td></tr></table>`;\n      })()\n    : '';\n  return `\n    <table role=\"presentation\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\"\n           style=\"margin:18px 0 4px;background:${C.aiCardBg};border:1px solid ${C.aiBorder};border-radius:12px;\">\n      <tr><td style=\"padding:16px 18px;font-family:${FONT};\">\n        <table role=\"presentation\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\"><tr>\n          <td valign=\"middle\" width=\"28\">\n            <div style=\"width:22px;height:22px;border-radius:50%;background:${C.aiPurple};color:#fff;text-align:center;line-height:22px;font-size:13px;\">&#10022;</div>\n          </td>\n          <td valign=\"middle\" style=\"padding-left:8px;\">\n            <span style=\"font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:${C.aiPurpleText};\">Parecer GYRA+IA</span>\n          </td>\n          <td valign=\"middle\" align=\"right\">${v}</td>\n        </tr></table>\n        <p style=\"margin:10px 0 0;font-size:14px;line-height:1.55;color:${C.fg2};\">${esc(p.text)}</p>\n        ${\n          p.footer\n            ? `<div style=\"margin-top:10px;padding-top:10px;border-top:1px dashed ${C.aiBorder};font-size:11px;color:${C.fg3};\">${esc(\n                p.footer,\n              )}</div>`\n            : ''\n        }\n      </td></tr>\n    </table>`;\n}\n\n// ── API pública ────────────────────────────────────────────────────────────\n\n/**\n * Monta o HTML completo de um email no padrão Gyra+: logo, card principal,\n * highlights opcionais (chips), bloco \"Parecer GYRA+IA\" opcional, botões\n * e rodapé padrão. Email-safe (tabelas + inline-style).\n */\nexport function buildEmail(input: EmailLayoutInput): string {\n  const {\n    preheader,\n    greeting,\n    title,\n    paragraphs = [],\n    highlights = [],\n    aiParecer,\n    buttons = [],\n    footerNote,\n  } = input;\n\n  const highlightWidth = highlights.length\n    ? Math.floor(100 / highlights.length)\n    : 100;\n  const highlightsRow = highlights.length\n    ? `<table role=\"presentation\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" style=\"margin:8px 0 4px;\"><tr>${highlights\n        .map((h) => renderHighlight(h, highlightWidth))\n        .join('')}</tr></table>`\n    : '';\n\n  const paragraphsHtml = paragraphs\n    .map(\n      (p) =>\n        `<p style=\"margin:0 0 14px;font-family:${FONT};font-size:15px;line-height:1.6;color:${C.fg2};\">${esc(\n          p,\n        )}</p>`,\n    )\n    .join('');\n\n  const buttonsHtml = buttons.length\n    ? `<div style=\"margin-top:18px;\">${buttons.map(renderButton).join('')}</div>`\n    : '';\n\n  return `<!DOCTYPE html>\n<html lang=\"pt-BR\">\n<head>\n  <meta charset=\"utf-8\" />\n  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\" />\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n  <title>${esc(title)}</title>\n</head>\n<body style=\"margin:0;padding:0;background:${C.bg};\">\n  ${\n    preheader\n      ? `<div style=\"display:none;max-height:0;overflow:hidden;opacity:0;\">${esc(preheader)}</div>`\n      : ''\n  }\n  <table role=\"presentation\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" style=\"background:${C.bg};padding:24px 0;\">\n    <tr>\n      <td align=\"center\">\n        <table role=\"presentation\" width=\"600\" cellpadding=\"0\" cellspacing=\"0\" style=\"width:600px;max-width:92%;\">\n          <tr>\n            <td style=\"padding:8px 4px 20px;\">\n              <img src=\"${LOGO_URL}\" alt=\"GYRA+\" height=\"30\" style=\"height:30px;display:block;\" />\n            </td>\n          </tr>\n          <tr>\n            <td style=\"background:${C.card};border:1px solid ${C.borderSubtle};border-radius:16px;padding:32px;\">\n              ${\n                greeting\n                  ? `<p style=\"margin:0 0 6px;font-family:${FONT};font-size:14px;color:${C.fg2};\">${esc(\n                      greeting,\n                    )}</p>`\n                  : ''\n              }\n              <h1 style=\"margin:0 0 18px;font-family:'Lexend',${FONT};font-size:23px;line-height:1.3;color:${C.fg1};\">${esc(\n                title,\n              )}</h1>\n              ${paragraphsHtml}\n              ${highlightsRow}\n              ${aiParecer ? renderAiParecer(aiParecer) : ''}\n              ${buttonsHtml}\n            </td>\n          </tr>\n          <tr>\n            <td style=\"padding:20px 8px;font-family:${FONT};font-size:12px;line-height:1.5;color:${C.fg3};\">\n              ${\n                footerNote\n                  ? `<p style=\"margin:0 0 8px;\">${esc(footerNote)}</p>`\n                  : ''\n              }\n              <p style=\"margin:0;\">GYRA+ • Esta é uma mensagem automática, não responda este email.</p>\n            </td>\n          </tr>\n        </table>\n      </td>\n    </tr>\n  </table>\n</body>\n</html>`;\n}\n\n/** Mapeia nível de risco textual -> cor do chip de score. */\nfunction riskColor(risk?: string): string {\n  const r = (risk || '').toLowerCase();\n  if (r.includes('muito') && r.includes('alto')) return '#C93430';\n  if (r.includes('alto')) return '#946200';\n  if (r.includes('medio') || r.includes('médio')) return '#946200';\n  if (r.includes('baixo')) return '#1A7D37';\n  return '#1D1D1F';\n}\n\n/** Risco -> tom do veredito do Parecer de IA. */\nfunction riskTone(risk?: string): AiParecerTone {\n  const r = (risk || '').toLowerCase();\n  if (r.includes('alto')) return 'danger';\n  if (r.includes('medio') || r.includes('médio')) return 'warn';\n  if (r.includes('baixo')) return 'ok';\n  return 'info';\n}\n\n/**\n * Monta `{ subject, html }` do email \"Análise financeira concluída\" a\n * partir do payload do gyra-ai (score, risco, recomendação, XLS, etc).\n * Usado tanto pelo gyra-communication (envio via SendGrid) quanto pelo\n * componente Storybook do gyra-design (preview).\n */\nexport function balanceSheetFinalizedEmail(\n  payload: BalanceSheetFinalizedPayload,\n): { subject: string; html: string } {\n  const {\n    firstName,\n    companyName,\n    score,\n    risk,\n    recommendation,\n    xlsxUrl,\n    reportUrl,\n  } = payload;\n\n  const empresa = companyName || 'a empresa analisada';\n  const subject = `Análise financeira concluída${companyName ? ` — ${companyName}` : ''}`;\n\n  const highlights: EmailHighlight[] = [];\n  if (score !== undefined && score !== null && `${score}` !== '') {\n    highlights.push({ label: 'Score GYRA+IA', value: `${score}` });\n  }\n  if (risk) {\n    highlights.push({\n      label: 'Nível de risco',\n      value: risk,\n      color: riskColor(risk),\n    });\n  }\n\n  const buttons: EmailButton[] = [];\n  if (xlsxUrl) {\n    buttons.push({\n      label: 'Baixar análise (Excel)',\n      url: xlsxUrl,\n      variant: 'primary',\n    });\n  }\n  if (reportUrl) {\n    buttons.push({\n      label: 'Ver relatório',\n      url: reportUrl,\n      variant: 'secondary',\n    });\n  }\n\n  const aiParecer: EmailAiParecer | undefined = recommendation\n    ? {\n        verdict: risk || undefined,\n        verdictTone: riskTone(risk),\n        text: recommendation,\n        footer: 'GYRA+IA · gerado a partir do balanço enviado',\n      }\n    : undefined;\n\n  const html = buildEmail({\n    preheader: subject,\n    greeting: firstName ? `Olá, ${firstName}` : undefined,\n    title: 'Sua análise financeira está pronta',\n    paragraphs: [\n      `A análise financeira de ${empresa} foi processada com sucesso pela GYRA+IA.`,\n    ],\n    highlights,\n    aiParecer,\n    buttons,\n    footerNote:\n      'Os valores e a recomendação são gerados por IA a partir do balanço enviado e devem ser revisados pelo analista.',\n  });\n\n  return { subject, html };\n}\n","import React from 'react';\nimport {\n  balanceSheetFinalizedEmail,\n  BalanceSheetFinalizedPayload,\n} from '../../emails/balance-sheet-finalized';\n\n/**\n * Preview do email \"Análise financeira concluída\" (Finsights / CU-86aherfzc).\n *\n * Renderiza o HTML do template REAL (importado de\n * `gyra-design/src/emails/balance-sheet-finalized`) dentro de um iframe.\n * O mesmo módulo é consumido pelo `gyra-communication` pra disparar via\n * SendGrid — fonte da verdade unificada.\n */\n\nexport type EmailBalanceSheetFinalizedProps = BalanceSheetFinalizedPayload & {\n  /** Largura visual do iframe. Default 700px (cabe o card 600 + paddings). */\n  width?: number | string;\n  /** Altura visual do iframe. Default 1100px (cobre todos os blocos). */\n  height?: number | string;\n};\n\nexport const EmailBalanceSheetFinalized: React.FC<\n  EmailBalanceSheetFinalizedProps\n> = ({ width = 700, height = 1100, ...payload }) => {\n  const { html } = balanceSheetFinalizedEmail(payload);\n  return (\n    <iframe\n      title=\"Email preview — Análise financeira concluída\"\n      srcDoc={html}\n      sandbox=\"\"\n      style={{\n        width: typeof width === 'number' ? `${width}px` : width,\n        height: typeof height === 'number' ? `${height}px` : height,\n        border: '1px solid #E8E8ED',\n        borderRadius: 8,\n        background: '#F5F5F7',\n      }}\n    />\n  );\n};\n\nexport default EmailBalanceSheetFinalized;\n"],"names":["C","VERDICT","ok","bg","color","warn","danger","info","FONT","esc","s","String","replace","renderButton","btn","isPrimary","variant","url","u","URL","protocol","href","safeUrl","label","buildEmail","input","preheader","greeting","title","paragraphs","highlights","aiParecer","buttons","footerNote","highlightWidth","length","Math","floor","highlightsRow","map","h","widthPct","value","renderHighlight","join","paragraphsHtml","p","buttonsHtml","v","verdict","t","verdictTone","text","footer","renderAiParecer","riskColor","risk","r","toLowerCase","includes","riskTone","EmailBalanceSheetFinalized","width","height","payload","html","firstName","companyName","score","recommendation","xlsxUrl","reportUrl","empresa","subject","push","undefined","balanceSheetFinalizedEmail","React","createElement","srcDoc","sandbox","style","border","borderRadius","background"],"mappings":"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"}