@xetwa/design-system 1.0.2

package/src/Typography.mdx

@@ -0,0 +1,321 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Brand Guidelines/Tipografia" />
+
+# Escala Tipográfica
+
+Nossa escala tipográfica é estruturada sobre duas famílias de fontes do Google Fonts, selecionadas para equilibrar expressividade e legibilidade:
+- **Fredoka**: Utilizada para títulos e displays. É arredondada, amigável e cheia de personalidade.
+- **Nunito**: Utilizada para o corpo do texto, botões, labels e elementos gerais de UI. É altamente legível, neutra e versátil.
+
+---
+
+{/* Fredoka Scale */}
+<div style={{
+  backgroundColor: 'var(--bg-surface)',
+  border: '1px solid var(--border-color)',
+  borderRadius: '16px',
+  padding: '1.5rem',
+  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
+  marginBottom: '2.5rem',
+  marginTop: '1.5rem'
+}}>
+  <h3 style={{
+    fontFamily: 'var(--font-title)',
+    fontSize: '1.25rem',
+    fontWeight: '700',
+    color: 'var(--text-primary)',
+    marginTop: 0,
+    marginBottom: '1.25rem',
+  }}>Escala Fredoka (Títulos e Displays)</h3>
+  
+  <table style={{
+    width: '100%',
+    borderCollapse: 'collapse',
+    textAlign: 'left'
+  }}>
+    <thead>
+      <tr style={{
+        borderBottom: '2px solid var(--border-color)',
+      }}>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Token / Uso</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Fonte</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Peso</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Mobile (≥375)</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Desktop (≥1024)</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Leading</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--text-display-1</code>
+          <span style={{ display: 'block', fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '4px' }}>Hero principal</span>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>Fredoka</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>700</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>28px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>42px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>1.08</td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--text-display-2</code>
+          <span style={{ display: 'block', fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '4px' }}>Splash / onboarding</span>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>Fredoka</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>700</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>24px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>34px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>1.12</td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--text-h1</code>
+          <span style={{ display: 'block', fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '4px' }}>Cabeçalho de secção</span>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>Fredoka</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>700</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>22px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>28px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>1.15</td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--text-h2</code>
+          <span style={{ display: 'block', fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '4px' }}>Cabeçalho de card/módulo</span>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>Fredoka</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>600</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>18px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>22px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>1.2</td>
+      </tr>
+      <tr>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--text-h3</code>
+          <span style={{ display: 'block', fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '4px' }}>Sub-cabeçalho</span>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>Fredoka</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>600</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>16px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>19px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>1.25</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{/* Nunito Scale */}
+<div style={{
+  backgroundColor: 'var(--bg-surface)',
+  border: '1px solid var(--border-color)',
+  borderRadius: '16px',
+  padding: '1.5rem',
+  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
+  marginBottom: '2.5rem'
+}}>
+  <h3 style={{
+    fontFamily: 'var(--font-title)',
+    fontSize: '1.25rem',
+    fontWeight: '700',
+    color: 'var(--text-primary)',
+    marginTop: 0,
+    marginBottom: '1.25rem',
+  }}>Escala Nunito (Corpo de Texto e UI)</h3>
+  
+  <table style={{
+    width: '100%',
+    borderCollapse: 'collapse',
+    textAlign: 'left'
+  }}>
+    <thead>
+      <tr style={{
+        borderBottom: '2px solid var(--border-color)',
+      }}>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Token / Uso</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Fonte</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Peso</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Mobile (≥375)</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Desktop (≥1024)</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Leading</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#51332d', backgroundColor: '#efe2d6', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--text-label</code>
+          <span style={{ display: 'block', fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '4px' }}>Etiquetas all-caps</span>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>Nunito</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>800</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>10px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>11px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>1.0, 0.12em ls</td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#51332d', backgroundColor: '#efe2d6', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--text-body-lg</code>
+          <span style={{ display: 'block', fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '4px' }}>Corpo principal</span>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>Nunito</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>600</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>15px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>17px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>1.55</td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#51332d', backgroundColor: '#efe2d6', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--text-body-md</code>
+          <span style={{ display: 'block', fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '4px' }}>Corpo secundário</span>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>Nunito</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>600</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>13.5px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>15px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>1.5</td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#51332d', backgroundColor: '#efe2d6', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--text-body-sm</code>
+          <span style={{ display: 'block', fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '4px' }}>Notas, meta</span>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>Nunito</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>700</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>12px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>13px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>1.45</td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#51332d', backgroundColor: '#efe2d6', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--text-caption</code>
+          <span style={{ display: 'block', fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '4px' }}>Captions, labels de ícone</span>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>Nunito</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>700</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>10px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>11px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>1.4</td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#51332d', backgroundColor: '#efe2d6', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--text-btn-lg</code>
+          <span style={{ display: 'block', fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '4px' }}>Botão grande</span>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>Nunito</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>800</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>16px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>17px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>1.0, 0.04em ls</td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#51332d', backgroundColor: '#efe2d6', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--text-btn-md</code>
+          <span style={{ display: 'block', fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '4px' }}>Botão médio</span>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>Nunito</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>800</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>14px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>15px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>1.0, 0.04em ls</td>
+      </tr>
+      <tr>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#51332d', backgroundColor: '#efe2d6', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--text-btn-sm</code>
+          <span style={{ display: 'block', fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '4px' }}>Botão pequeno</span>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>Nunito</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>800</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>12px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>12px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>1.0, 0.04em ls</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+---
+
+## Demonstrativo Visual de Escala
+
+Exemplos reais e renderização das fontes do design system:
+
+<div style={{
+  backgroundColor: 'var(--bg-surface)',
+  border: '1px solid var(--border-color)',
+  borderRadius: '16px',
+  padding: '2rem',
+  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1.25rem',
+  color: 'var(--text-primary)'
+}}>
+  <div>
+    <span style={{ fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', display: 'block', marginBottom: '4px' }}>DISPLAY 1</span>
+    <h1 className="text-display-1" style={{ margin: 0 }}>Display 1 · Aprende francês</h1>
+  </div>
+  
+  <hr style={{ border: 0, borderTop: '1px solid var(--border-color)', margin: 0 }} />
+  
+  <div>
+    <span style={{ fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', display: 'block', marginBottom: '4px' }}>DISPLAY 2</span>
+    <h2 className="text-display-2" style={{ margin: 0 }}>Display 2 · Aprende francês</h2>
+  </div>
+  
+  <hr style={{ border: 0, borderTop: '1px solid var(--border-color)', margin: 0 }} />
+  
+  <div>
+    <span style={{ fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', display: 'block', marginBottom: '4px' }}>H1</span>
+    <h3 className="text-h1" style={{ margin: 0 }}>H1 · Aprende francês</h3>
+  </div>
+  
+  <hr style={{ border: 0, borderTop: '1px solid var(--border-color)', margin: 0 }} />
+  
+  <div>
+    <span style={{ fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', display: 'block', marginBottom: '4px' }}>H2</span>
+    <h4 className="text-h2" style={{ margin: 0 }}>H2 · Cumprimentos</h4>
+  </div>
+  
+  <hr style={{ border: 0, borderTop: '1px solid var(--border-color)', margin: 0 }} />
+  
+  <div>
+    <span style={{ fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', display: 'block', marginBottom: '4px' }}>H3</span>
+    <h5 className="text-h3" style={{ margin: 0 }}>H3 · Bom dia</h5>
+  </div>
+  
+  <hr style={{ border: 0, borderTop: '1px solid var(--border-color)', margin: 0 }} />
+  
+  <div>
+    <span style={{ fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', display: 'block', marginBottom: '4px' }}>LABEL</span>
+    <span className="text-label" style={{ display: 'block' }}>LABEL · MÓDULO 1</span>
+  </div>
+  
+  <hr style={{ border: 0, borderTop: '1px solid var(--border-color)', margin: 0 }} />
+  
+  <div>
+    <span style={{ fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', display: 'block', marginBottom: '4px' }}>BODY LG</span>
+    <p className="text-body-lg" style={{ margin: 0 }}>Body LG · 5 minutos por dia + aulas a sério com os professores da Xetwa.</p>
+  </div>
+  
+  <hr style={{ border: 0, borderTop: '1px solid var(--border-color)', margin: 0 }} />
+  
+  <div>
+    <span style={{ fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', display: 'block', marginBottom: '4px' }}>BODY MD</span>
+    <p className="text-body-md" style={{ margin: 0 }}>Body MD · A Vava viaja contigo de Paris a Beirute pelo mundo francófono.</p>
+  </div>
+  
+  <hr style={{ border: 0, borderTop: '1px solid var(--border-color)', margin: 0 }} />
+  
+  <div>
+    <span style={{ fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', display: 'block', marginBottom: '4px' }}>BODY SM</span>
+    <p className="text-body-sm" style={{ margin: 0 }}>Body SM · 3 de 5 lições concluídas</p>
+  </div>
+  
+  <hr style={{ border: 0, borderTop: '1px solid var(--border-color)', margin: 0 }} />
+  
+  <div>
+    <span style={{ fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', display: 'block', marginBottom: '4px' }}>CAPTION</span>
+    <p className="text-caption" style={{ margin: 0 }}>Caption · com professor • abre o Módulo 2</p>
+  </div>
+</div>

package/src/assets/Mascots/vava/estaticos/vava-acenar.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="240" height="240" role="img" aria-label="Vava acenar">
+  <path d="M84 64 q0 -20 16 -20 q16 0 16 20" fill="none" stroke="#3f2620" stroke-width="7" stroke-linecap="round"></path><rect x="84" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="104" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="44" y="64" width="112" height="104" rx="16" fill="#51332d"></rect><rect x="50" y="70" width="100" height="92" rx="12" fill="none" stroke="#6b4a33" stroke-width="2.5"></rect><rect x="44" y="116" width="112" height="15" fill="#f2974b"></rect><rect x="92" y="112" width="16" height="23" rx="3" fill="#cf7a30"></rect><circle cx="66" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="134" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><path d="M73 95 Q80 86 87 95" stroke="#15100d" stroke-width="3.2" fill="none" stroke-linecap="round"></path><path d="M113 95 Q120 86 127 95" stroke="#15100d" stroke-width="3.2" fill="none" stroke-linecap="round"></path><path d="M90 100 Q100 111 110 100 Z" fill="#fbe6cf"></path>
+</svg>

package/src/assets/Mascots/vava/estaticos/vava-acertou.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="240" height="240" role="img" aria-label="Vava acertou">
+  <path d="M84 64 q0 -20 16 -20 q16 0 16 20" fill="none" stroke="#3f2620" stroke-width="7" stroke-linecap="round"></path><rect x="84" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="104" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="44" y="64" width="112" height="104" rx="16" fill="#51332d"></rect><rect x="50" y="70" width="100" height="92" rx="12" fill="none" stroke="#6b4a33" stroke-width="2.5"></rect><rect x="44" y="116" width="112" height="15" fill="#f2974b"></rect><rect x="92" y="112" width="16" height="23" rx="3" fill="#cf7a30"></rect><circle cx="66" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="134" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><path d="M73 95 Q80 86 87 95" stroke="#15100d" stroke-width="3.2" fill="none" stroke-linecap="round"></path><path d="M113 95 Q120 86 127 95" stroke="#15100d" stroke-width="3.2" fill="none" stroke-linecap="round"></path><path d="M90 100 Q100 112 110 100 Z" fill="#fbe6cf"></path><g transform="translate(150,58)"><circle r="16" fill="#16915a"></circle><path d="M-7 0 l4 5 9 -10" stroke="#fff" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></g>
+</svg>

package/src/assets/Mascots/vava/estaticos/vava-celebrar.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="240" height="240" role="img" aria-label="Vava celebrar">
+  <path d="M84 64 q0 -20 16 -20 q16 0 16 20" fill="none" stroke="#3f2620" stroke-width="7" stroke-linecap="round"></path><rect x="84" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="104" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="44" y="64" width="112" height="104" rx="16" fill="#51332d"></rect><rect x="50" y="70" width="100" height="92" rx="12" fill="none" stroke="#6b4a33" stroke-width="2.5"></rect><rect x="44" y="116" width="112" height="15" fill="#f2974b"></rect><rect x="92" y="112" width="16" height="23" rx="3" fill="#cf7a30"></rect><circle cx="66" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="134" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><path d="M73 95 Q80 86 87 95" stroke="#15100d" stroke-width="3.2" fill="none" stroke-linecap="round"></path><path d="M113 95 Q120 86 127 95" stroke="#15100d" stroke-width="3.2" fill="none" stroke-linecap="round"></path><path d="M87 99 Q100 116 113 99 Q100 106 87 99 Z" fill="#fff"></path><path d="M89 100 Q100 113 111 100" fill="#fbe6cf"></path>
+</svg>

package/src/assets/Mascots/vava/estaticos/vava-com-autocolantes.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="240" height="240" role="img" aria-label="Vava com autocolantes">
+  <path d="M84 64 q0 -20 16 -20 q16 0 16 20" fill="none" stroke="#3f2620" stroke-width="7" stroke-linecap="round"></path><rect x="84" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="104" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="44" y="64" width="112" height="104" rx="16" fill="#51332d"></rect><rect x="50" y="70" width="100" height="92" rx="12" fill="none" stroke="#6b4a33" stroke-width="2.5"></rect><rect x="44" y="116" width="112" height="15" fill="#f2974b"></rect><rect x="92" y="112" width="16" height="23" rx="3" fill="#cf7a30"></rect><circle cx="66" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="134" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><g transform="translate(60,148) rotate(-10)"><rect x="-12" y="-9" width="24" height="18" rx="3" fill="#fff"></rect><rect x="-10" y="-7" width="6.5" height="14" fill="#2a4b9b"></rect><rect x="-3.5" y="-7" width="6.5" height="14" fill="#fff"></rect><rect x="3" y="-7" width="6.5" height="14" fill="#d34b3e"></rect></g><g transform="translate(140,150) rotate(9)"><rect x="-12" y="-9" width="24" height="18" rx="3" fill="#fff"></rect><rect x="-10" y="-7" width="6.5" height="14" fill="#16915a"></rect><rect x="-3.5" y="-7" width="6.5" height="14" fill="#fcd116"></rect><rect x="3" y="-7" width="6.5" height="14" fill="#d12e2e"></rect><text x="-0.2" y="2" text-anchor="middle" font-size="8" fill="#16915a">★</text></g><g transform="translate(142,82) rotate(8)"><rect x="-12" y="-9" width="24" height="18" rx="3" fill="#fff"></rect><rect x="-10" y="-7" width="6.5" height="14" fill="#15100d"></rect><rect x="-3.5" y="-7" width="6.5" height="14" fill="#f6c343"></rect><rect x="3" y="-7" width="6.5" height="14" fill="#d34b3e"></rect></g><g transform="translate(58,82) rotate(-8)"><rect x="-11" y="-9" width="22" height="18" rx="3" fill="#fff"></rect><rect x="-9" y="-7" width="5" height="14" fill="#d52b1e"></rect><rect x="-4" y="-7" width="8" height="14" fill="#fff"></rect><rect x="4" y="-7" width="5" height="14" fill="#d52b1e"></rect><path d="M0 -3 l2 3 -2 3 -2 -3 Z" fill="#d52b1e"></path></g><path d="M73 95 Q80 86 87 95" stroke="#15100d" stroke-width="3.2" fill="none" stroke-linecap="round"></path><path d="M113 95 Q120 86 127 95" stroke="#15100d" stroke-width="3.2" fill="none" stroke-linecap="round"></path><path d="M90 100 Q100 111 110 100 Z" fill="#fbe6cf"></path>
+</svg>

package/src/assets/Mascots/vava/estaticos/vava-dormir.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="240" height="240" role="img" aria-label="Vava dormir">
+  <path d="M84 64 q0 -20 16 -20 q16 0 16 20" fill="none" stroke="#3f2620" stroke-width="7" stroke-linecap="round"></path><rect x="84" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="104" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="44" y="64" width="112" height="104" rx="16" fill="#51332d"></rect><rect x="50" y="70" width="100" height="92" rx="12" fill="none" stroke="#6b4a33" stroke-width="2.5"></rect><rect x="44" y="116" width="112" height="15" fill="#f2974b"></rect><rect x="92" y="112" width="16" height="23" rx="3" fill="#cf7a30"></rect><circle cx="66" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="134" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><path d="M72 93 Q80 99 88 93" stroke="#15100d" stroke-width="3" fill="none" stroke-linecap="round"></path><path d="M112 93 Q120 99 128 93" stroke="#15100d" stroke-width="3" fill="none" stroke-linecap="round"></path><circle cx="100" cy="105" r="3" fill="none" stroke="#fbe6cf" stroke-width="2.5"></circle><text x="138" y="64" font-family="sans-serif" font-weight="700" font-size="15" fill="#9a8478">z</text><text x="150" y="50" font-family="sans-serif" font-weight="700" font-size="20" fill="#9a8478">Z</text>
+</svg>

package/src/assets/Mascots/vava/estaticos/vava-errou.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="240" height="240" role="img" aria-label="Vava errou">
+  <path d="M84 64 q0 -20 16 -20 q16 0 16 20" fill="none" stroke="#3f2620" stroke-width="7" stroke-linecap="round"></path><rect x="84" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="104" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="44" y="64" width="112" height="104" rx="16" fill="#51332d"></rect><rect x="50" y="70" width="100" height="92" rx="12" fill="none" stroke="#6b4a33" stroke-width="2.5"></rect><rect x="44" y="116" width="112" height="15" fill="#f2974b"></rect><rect x="92" y="112" width="16" height="23" rx="3" fill="#cf7a30"></rect><circle cx="66" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="134" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><path d="M70 84 l11 4 M130 84 l-11 4" stroke="#15100d" stroke-width="2.4" stroke-linecap="round"></path><ellipse cx="80" cy="95" rx="7.5" ry="9" fill="#fff"></ellipse><ellipse cx="120" cy="95" rx="7.5" ry="9" fill="#fff"></ellipse><circle cx="81" cy="97" r="4" fill="#15100d"></circle><circle cx="121" cy="97" r="4" fill="#15100d"></circle><path d="M94 107 Q100 102 106 107" stroke="#fbe6cf" stroke-width="3" fill="none" stroke-linecap="round"></path><path d="M134 84 q3.6 5 0 9 q-3.6 -4 0 -9 Z" fill="#7ab8e0"></path><g transform="translate(150,58)"><circle r="16" fill="#cf5b48"></circle><path d="M-6 -6 l12 12 M6 -6 l-12 12" stroke="#fff" stroke-width="3.5" stroke-linecap="round"></path></g>
+</svg>

package/src/assets/Mascots/vava/estaticos/vava-feliz.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="240" height="240" role="img" aria-label="Vava feliz">
+  <path d="M84 64 q0 -20 16 -20 q16 0 16 20" fill="none" stroke="#3f2620" stroke-width="7" stroke-linecap="round"></path><rect x="84" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="104" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="44" y="64" width="112" height="104" rx="16" fill="#51332d"></rect><rect x="50" y="70" width="100" height="92" rx="12" fill="none" stroke="#6b4a33" stroke-width="2.5"></rect><rect x="44" y="116" width="112" height="15" fill="#f2974b"></rect><rect x="92" y="112" width="16" height="23" rx="3" fill="#cf7a30"></rect><circle cx="66" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="134" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><path d="M73 95 Q80 86 87 95" stroke="#15100d" stroke-width="3.2" fill="none" stroke-linecap="round"></path><path d="M113 95 Q120 86 127 95" stroke="#15100d" stroke-width="3.2" fill="none" stroke-linecap="round"></path><path d="M90 100 Q100 111 110 100 Z" fill="#fbe6cf"></path>
+</svg>

package/src/assets/Mascots/vava/estaticos/vava-neutra.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="240" height="240" role="img" aria-label="Vava neutra">
+  <path d="M84 64 q0 -20 16 -20 q16 0 16 20" fill="none" stroke="#3f2620" stroke-width="7" stroke-linecap="round"></path><rect x="84" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="104" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="44" y="64" width="112" height="104" rx="16" fill="#51332d"></rect><rect x="50" y="70" width="100" height="92" rx="12" fill="none" stroke="#6b4a33" stroke-width="2.5"></rect><rect x="44" y="116" width="112" height="15" fill="#f2974b"></rect><rect x="92" y="112" width="16" height="23" rx="3" fill="#cf7a30"></rect><circle cx="66" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="134" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><ellipse cx="80" cy="92" rx="8" ry="10" fill="#fff"></ellipse><ellipse cx="120" cy="92" rx="8" ry="10" fill="#fff"></ellipse><circle cx="81" cy="94" r="4.2" fill="#15100d"></circle><circle cx="121" cy="94" r="4.2" fill="#15100d"></circle><circle cx="79" cy="90" r="1.6" fill="#fff"></circle><circle cx="119" cy="90" r="1.6" fill="#fff"></circle><path d="M92 102 Q100 109 108 102" fill="none" stroke="#fbe6cf" stroke-width="3" stroke-linecap="round"></path>
+</svg>

package/src/assets/Mascots/vava/estaticos/vava-original.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="240" height="240" role="img" aria-label="Vava com autocolantes">
+  <path d="M84 64 q0 -20 16 -20 q16 0 16 20" fill="none" stroke="#3f2620" stroke-width="7" stroke-linecap="round"></path><rect x="84" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="104" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="44" y="64" width="112" height="104" rx="16" fill="#51332d"></rect><rect x="50" y="70" width="100" height="92" rx="12" fill="none" stroke="#6b4a33" stroke-width="2.5"></rect><rect x="44" y="116" width="112" height="15" fill="#f2974b"></rect><rect x="92" y="112" width="16" height="23" rx="3" fill="#cf7a30"></rect><circle cx="66" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="134" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><g transform="translate(60,148) rotate(-10)"><rect x="-12" y="-9" width="24" height="18" rx="3" fill="#fff"></rect><rect x="-10" y="-7" width="6.5" height="14" fill="#2a4b9b"></rect><rect x="-3.5" y="-7" width="6.5" height="14" fill="#fff"></rect><rect x="3" y="-7" width="6.5" height="14" fill="#d34b3e"></rect></g><g transform="translate(140,150) rotate(9)"><rect x="-12" y="-9" width="24" height="18" rx="3" fill="#fff"></rect><rect x="-10" y="-7" width="6.5" height="14" fill="#16915a"></rect><rect x="-3.5" y="-7" width="6.5" height="14" fill="#fcd116"></rect><rect x="3" y="-7" width="6.5" height="14" fill="#d12e2e"></rect><text x="-0.2" y="2" text-anchor="middle" font-size="8" fill="#16915a">★</text></g><g transform="translate(142,82) rotate(8)"><rect x="-12" y="-9" width="24" height="18" rx="3" fill="#fff"></rect><rect x="-10" y="-7" width="6.5" height="14" fill="#15100d"></rect><rect x="-3.5" y="-7" width="6.5" height="14" fill="#f6c343"></rect><rect x="3" y="-7" width="6.5" height="14" fill="#d34b3e"></rect></g><g transform="translate(58,82) rotate(-8)"><rect x="-11" y="-9" width="22" height="18" rx="3" fill="#fff"></rect><rect x="-9" y="-7" width="5" height="14" fill="#d52b1e"></rect><rect x="-4" y="-7" width="8" height="14" fill="#fff"></rect><rect x="4" y="-7" width="5" height="14" fill="#d52b1e"></rect><path d="M0 -3 l2 3 -2 3 -2 -3 Z" fill="#d52b1e"></path></g><path d="M73 95 Q80 86 87 95" stroke="#15100d" stroke-width="3.2" fill="none" stroke-linecap="round"></path><path d="M113 95 Q120 86 127 95" stroke="#15100d" stroke-width="3.2" fill="none" stroke-linecap="round"></path><path d="M90 100 Q100 111 110 100 Z" fill="#fbe6cf"></path>
+</svg>

package/src/assets/Mascots/vava/estaticos/vava-pensar.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="240" height="240" role="img" aria-label="Vava pensar">
+  <path d="M84 64 q0 -20 16 -20 q16 0 16 20" fill="none" stroke="#3f2620" stroke-width="7" stroke-linecap="round"></path><rect x="84" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="104" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="44" y="64" width="112" height="104" rx="16" fill="#51332d"></rect><rect x="50" y="70" width="100" height="92" rx="12" fill="none" stroke="#6b4a33" stroke-width="2.5"></rect><rect x="44" y="116" width="112" height="15" fill="#f2974b"></rect><rect x="92" y="112" width="16" height="23" rx="3" fill="#cf7a30"></rect><circle cx="66" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="134" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><ellipse cx="80" cy="92" rx="8" ry="10" fill="#fff"></ellipse><ellipse cx="120" cy="92" rx="8" ry="10" fill="#fff"></ellipse><circle cx="82" cy="88" r="4" fill="#15100d"></circle><circle cx="122" cy="88" r="4" fill="#15100d"></circle><path d="M93 105 L105 103" stroke="#fbe6cf" stroke-width="3" fill="none" stroke-linecap="round"></path><text x="150" y="68" font-family="sans-serif" font-weight="700" font-size="30" fill="#f2974b">?</text>
+</svg>

package/src/assets/Mascots/vava/estaticos/vava-surpresa.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="240" height="240" role="img" aria-label="Vava surpresa">
+  <path d="M84 64 q0 -20 16 -20 q16 0 16 20" fill="none" stroke="#3f2620" stroke-width="7" stroke-linecap="round"></path><rect x="84" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="104" y="58" width="12" height="10" rx="2" fill="#cf7a30"></rect><rect x="44" y="64" width="112" height="104" rx="16" fill="#51332d"></rect><rect x="50" y="70" width="100" height="92" rx="12" fill="none" stroke="#6b4a33" stroke-width="2.5"></rect><rect x="44" y="116" width="112" height="15" fill="#f2974b"></rect><rect x="92" y="112" width="16" height="23" rx="3" fill="#cf7a30"></rect><circle cx="66" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="134" cy="106" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="80" cy="92" r="10" fill="#fff"></circle><circle cx="120" cy="92" r="10" fill="#fff"></circle><circle cx="80" cy="93" r="5" fill="#15100d"></circle><circle cx="120" cy="93" r="5" fill="#15100d"></circle><circle cx="78" cy="90" r="2" fill="#fff"></circle><circle cx="118" cy="90" r="2" fill="#fff"></circle><ellipse cx="100" cy="105" rx="6" ry="7" fill="#fbe6cf"></ellipse>
+</svg>

package/src/assets/Mascots/yaya/avatar/yaya-avatar-falar.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="50 32 100 100" width="200" height="200" role="img" aria-label="Yaya avatar a falar">
+  <circle cx="100" cy="82" r="58" fill="#fdf3ea"></circle>
+  <circle cx="100" cy="88" r="40" fill="#51332d"></circle>
+  <circle cx="74" cy="101" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="126" cy="101" r="6" fill="#f2974b" opacity=".4"></circle>
+  <ellipse cx="86" cy="88" rx="8" ry="10" fill="#fff"></ellipse><ellipse cx="114" cy="88" rx="8" ry="10" fill="#fff"></ellipse><circle cx="87" cy="90" r="4.3" fill="#15100d"></circle><circle cx="115" cy="90" r="4.3" fill="#15100d"></circle><circle cx="85" cy="86" r="1.6" fill="#fff"></circle><circle cx="113" cy="86" r="1.6" fill="#fff"></circle><ellipse cx="100" cy="106" rx="6.5" ry="6" fill="#f2974b"></ellipse><ellipse cx="100" cy="104" rx="3.5" ry="1.6" fill="#fff" opacity=".5"></ellipse>
+  <ellipse cx="100" cy="54" rx="33" ry="13" fill="#f2974b"></ellipse><ellipse cx="100" cy="50" rx="30" ry="10" fill="#ff9f57"></ellipse><circle cx="100" cy="42" r="3.6" fill="#f2974b"></circle>
+</svg>

package/src/assets/Mascots/yaya/avatar/yaya-avatar-feliz.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="50 32 100 100" width="200" height="200" role="img" aria-label="Yaya avatar feliz">
+  <circle cx="100" cy="82" r="58" fill="#fdf3ea"></circle>
+  <circle cx="100" cy="88" r="40" fill="#51332d"></circle>
+  <circle cx="74" cy="101" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="126" cy="101" r="6" fill="#f2974b" opacity=".4"></circle>
+  <path d="M78 81 l-5 -3 M122 81 l5 -3" stroke="#15100d" stroke-width="2" stroke-linecap="round"></path><ellipse cx="86" cy="88" rx="8" ry="10" fill="#fff"></ellipse><ellipse cx="114" cy="88" rx="8" ry="10" fill="#fff"></ellipse><circle cx="87" cy="90" r="4.3" fill="#15100d"></circle><circle cx="115" cy="90" r="4.3" fill="#15100d"></circle><circle cx="85" cy="86" r="1.6" fill="#fff"></circle><circle cx="113" cy="86" r="1.6" fill="#fff"></circle><path d="M91 103 Q100 113 109 103 Z" fill="#f2974b"></path>
+  <ellipse cx="100" cy="54" rx="33" ry="13" fill="#f2974b"></ellipse><ellipse cx="100" cy="50" rx="30" ry="10" fill="#ff9f57"></ellipse><circle cx="100" cy="42" r="3.6" fill="#f2974b"></circle>
+</svg>

package/src/assets/Mascots/yaya/avatar/yaya-avatar-transparente.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="50 32 100 100" width="200" height="200" role="img" aria-label="Yaya avatar sem fundo">
+  <circle cx="100" cy="88" r="40" fill="#51332d"></circle>
+  <circle cx="74" cy="101" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="126" cy="101" r="6" fill="#f2974b" opacity=".4"></circle>
+  <ellipse cx="86" cy="88" rx="8" ry="10" fill="#fff"></ellipse><ellipse cx="114" cy="88" rx="8" ry="10" fill="#fff"></ellipse><circle cx="87" cy="90" r="4.3" fill="#15100d"></circle><circle cx="115" cy="90" r="4.3" fill="#15100d"></circle><circle cx="85" cy="86" r="1.6" fill="#fff"></circle><circle cx="113" cy="86" r="1.6" fill="#fff"></circle><ellipse cx="100" cy="106" rx="6.5" ry="6" fill="#f2974b"></ellipse><ellipse cx="100" cy="104" rx="3.5" ry="1.6" fill="#fff" opacity=".5"></ellipse>
+  <ellipse cx="100" cy="54" rx="33" ry="13" fill="#f2974b"></ellipse><ellipse cx="100" cy="50" rx="30" ry="10" fill="#ff9f57"></ellipse><circle cx="100" cy="42" r="3.6" fill="#f2974b"></circle>
+</svg>

package/src/assets/Mascots/yaya/estaticos/yaya-acertou.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="240" height="240" role="img" aria-label="Yaya acertou">
+  <path d="M72 170 Q70 124 100 124 Q130 124 128 170 Z" fill="#f2974b"></path>
+  <path d="M82 128 L120 150" stroke="#3f2620" stroke-width="3" fill="none"></path>
+  <rect x="112" y="148" width="22" height="18" rx="5" fill="#cf7a30"></rect>
+  <rect x="118" y="144" width="10" height="6" rx="3" fill="none" stroke="#3f2620" stroke-width="2"></rect>
+  <path d="M76 122 Q100 138 124 122 L124 130 Q100 146 76 130 Z" fill="#e0662e"></path>
+  <circle cx="88" cy="129" r="1.5" fill="#fbe6cf"></circle><circle cx="100" cy="133" r="1.5" fill="#fbe6cf"></circle><circle cx="112" cy="129" r="1.5" fill="#fbe6cf"></circle>
+  <path d="M62 96 q-6 18 4 30 q8 -10 6 -26 Z" fill="#3f2620"></path><path d="M138 96 q6 18 -4 30 q-8 -10 -6 -26 Z" fill="#3f2620"></path>
+  <circle cx="100" cy="88" r="40" fill="#51332d"></circle>
+  <circle cx="74" cy="101" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="126" cy="101" r="6" fill="#f2974b" opacity=".4"></circle>
+  <path d="M79 90 Q86 82 93 90" stroke="#15100d" stroke-width="3.2" fill="none" stroke-linecap="round"></path><path d="M107 90 Q114 82 121 90" stroke="#15100d" stroke-width="3.2" fill="none" stroke-linecap="round"></path><path d="M91 103 Q100 113 109 103 Z" fill="#f2974b"></path><g transform="translate(150,58)"><circle r="16" fill="#16915a"></circle><path d="M-7 0 l4 5 9 -10" stroke="#fff" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></g>
+  <ellipse cx="100" cy="54" rx="33" ry="13" fill="#f2974b"></ellipse><ellipse cx="100" cy="50" rx="30" ry="10" fill="#ff9f57"></ellipse><circle cx="100" cy="42" r="3.6" fill="#f2974b"></circle>
+</svg>

package/src/assets/Mascots/yaya/estaticos/yaya-celebrar.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="240" height="240" role="img" aria-label="Yaya celebrar">
+  <path d="M72 170 Q70 124 100 124 Q130 124 128 170 Z" fill="#f2974b"></path>
+  <path d="M82 128 L120 150" stroke="#3f2620" stroke-width="3" fill="none"></path>
+  <rect x="112" y="148" width="22" height="18" rx="5" fill="#cf7a30"></rect>
+  <rect x="118" y="144" width="10" height="6" rx="3" fill="none" stroke="#3f2620" stroke-width="2"></rect>
+  <path d="M76 122 Q100 138 124 122 L124 130 Q100 146 76 130 Z" fill="#e0662e"></path>
+  <circle cx="88" cy="129" r="1.5" fill="#fbe6cf"></circle><circle cx="100" cy="133" r="1.5" fill="#fbe6cf"></circle><circle cx="112" cy="129" r="1.5" fill="#fbe6cf"></circle>
+  <path d="M62 96 q-6 18 4 30 q8 -10 6 -26 Z" fill="#3f2620"></path><path d="M138 96 q6 18 -4 30 q-8 -10 -6 -26 Z" fill="#3f2620"></path>
+  <circle cx="100" cy="88" r="40" fill="#51332d"></circle>
+  <circle cx="74" cy="101" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="126" cy="101" r="6" fill="#f2974b" opacity=".4"></circle>
+  <path d="M79 90 Q86 82 93 90" stroke="#15100d" stroke-width="3.2" fill="none" stroke-linecap="round"></path><path d="M107 90 Q114 82 121 90" stroke="#15100d" stroke-width="3.2" fill="none" stroke-linecap="round"></path><path d="M90 102 Q100 117 110 102 Q100 108 90 102 Z" fill="#fff"></path><path d="M92 103 Q100 114 108 103" fill="#f2974b"></path>
+  <ellipse cx="100" cy="54" rx="33" ry="13" fill="#f2974b"></ellipse><ellipse cx="100" cy="50" rx="30" ry="10" fill="#ff9f57"></ellipse><circle cx="100" cy="42" r="3.6" fill="#f2974b"></circle>
+</svg>

package/src/assets/Mascots/yaya/estaticos/yaya-dormir.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="240" height="240" role="img" aria-label="Yaya dormir">
+  <path d="M72 170 Q70 124 100 124 Q130 124 128 170 Z" fill="#f2974b"></path>
+  <path d="M82 128 L120 150" stroke="#3f2620" stroke-width="3" fill="none"></path>
+  <rect x="112" y="148" width="22" height="18" rx="5" fill="#cf7a30"></rect>
+  <rect x="118" y="144" width="10" height="6" rx="3" fill="none" stroke="#3f2620" stroke-width="2"></rect>
+  <path d="M76 122 Q100 138 124 122 L124 130 Q100 146 76 130 Z" fill="#e0662e"></path>
+  <circle cx="88" cy="129" r="1.5" fill="#fbe6cf"></circle><circle cx="100" cy="133" r="1.5" fill="#fbe6cf"></circle><circle cx="112" cy="129" r="1.5" fill="#fbe6cf"></circle>
+  <path d="M62 96 q-6 18 4 30 q8 -10 6 -26 Z" fill="#3f2620"></path><path d="M138 96 q6 18 -4 30 q-8 -10 -6 -26 Z" fill="#3f2620"></path>
+  <circle cx="100" cy="88" r="40" fill="#51332d"></circle>
+  <circle cx="74" cy="101" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="126" cy="101" r="6" fill="#f2974b" opacity=".4"></circle>
+  <path d="M78 89 Q86 95 94 89" stroke="#15100d" stroke-width="3" fill="none" stroke-linecap="round"></path><path d="M106 89 Q114 95 122 89" stroke="#15100d" stroke-width="3" fill="none" stroke-linecap="round"></path><circle cx="100" cy="105" r="3" fill="none" stroke="#cf7a30" stroke-width="2.5"></circle><text x="140" y="60" font-family="sans-serif" font-weight="700" font-size="15" fill="#9a8478">z</text><text x="152" y="46" font-family="sans-serif" font-weight="700" font-size="20" fill="#9a8478">Z</text>
+  <ellipse cx="100" cy="54" rx="33" ry="13" fill="#f2974b"></ellipse><ellipse cx="100" cy="50" rx="30" ry="10" fill="#ff9f57"></ellipse><circle cx="100" cy="42" r="3.6" fill="#f2974b"></circle>
+</svg>

package/src/assets/Mascots/yaya/estaticos/yaya-errou.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="240" height="240" role="img" aria-label="Yaya errou">
+  <path d="M72 170 Q70 124 100 124 Q130 124 128 170 Z" fill="#f2974b"></path>
+  <path d="M82 128 L120 150" stroke="#3f2620" stroke-width="3" fill="none"></path>
+  <rect x="112" y="148" width="22" height="18" rx="5" fill="#cf7a30"></rect>
+  <rect x="118" y="144" width="10" height="6" rx="3" fill="none" stroke="#3f2620" stroke-width="2"></rect>
+  <path d="M76 122 Q100 138 124 122 L124 130 Q100 146 76 130 Z" fill="#e0662e"></path>
+  <circle cx="88" cy="129" r="1.5" fill="#fbe6cf"></circle><circle cx="100" cy="133" r="1.5" fill="#fbe6cf"></circle><circle cx="112" cy="129" r="1.5" fill="#fbe6cf"></circle>
+  <path d="M62 96 q-6 18 4 30 q8 -10 6 -26 Z" fill="#3f2620"></path><path d="M138 96 q6 18 -4 30 q-8 -10 -6 -26 Z" fill="#3f2620"></path>
+  <circle cx="100" cy="88" r="40" fill="#51332d"></circle>
+  <circle cx="74" cy="101" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="126" cy="101" r="6" fill="#f2974b" opacity=".4"></circle>
+  <path d="M76 82 l11 4 M124 82 l-11 4" stroke="#15100d" stroke-width="2.2" stroke-linecap="round"></path><ellipse cx="86" cy="91" rx="7.5" ry="9" fill="#fff"></ellipse><ellipse cx="114" cy="91" rx="7.5" ry="9" fill="#fff"></ellipse><circle cx="87" cy="93" r="4" fill="#15100d"></circle><circle cx="115" cy="93" r="4" fill="#15100d"></circle><path d="M94 107 Q100 102 106 107" stroke="#cf7a30" stroke-width="3" fill="none" stroke-linecap="round"></path><path d="M133 86 q3.6 5 0 9 q-3.6 -4 0 -9 Z" fill="#7ab8e0"></path><g transform="translate(150,58)"><circle r="16" fill="#cf5b48"></circle><path d="M-6 -6 l12 12 M6 -6 l-12 12" stroke="#fff" stroke-width="3.5" stroke-linecap="round"></path></g>
+  <ellipse cx="100" cy="54" rx="33" ry="13" fill="#f2974b"></ellipse><ellipse cx="100" cy="50" rx="30" ry="10" fill="#ff9f57"></ellipse><circle cx="100" cy="42" r="3.6" fill="#f2974b"></circle>
+</svg>

package/src/assets/Mascots/yaya/estaticos/yaya-falar.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="240" height="240" role="img" aria-label="Yaya falar">
+  <path d="M72 170 Q70 124 100 124 Q130 124 128 170 Z" fill="#f2974b"></path>
+  <path d="M82 128 L120 150" stroke="#3f2620" stroke-width="3" fill="none"></path>
+  <rect x="112" y="148" width="22" height="18" rx="5" fill="#cf7a30"></rect>
+  <rect x="118" y="144" width="10" height="6" rx="3" fill="none" stroke="#3f2620" stroke-width="2"></rect>
+  <path d="M76 122 Q100 138 124 122 L124 130 Q100 146 76 130 Z" fill="#e0662e"></path>
+  <circle cx="88" cy="129" r="1.5" fill="#fbe6cf"></circle><circle cx="100" cy="133" r="1.5" fill="#fbe6cf"></circle><circle cx="112" cy="129" r="1.5" fill="#fbe6cf"></circle>
+  <path d="M62 96 q-6 18 4 30 q8 -10 6 -26 Z" fill="#3f2620"></path><path d="M138 96 q6 18 -4 30 q-8 -10 -6 -26 Z" fill="#3f2620"></path>
+  <circle cx="100" cy="88" r="40" fill="#51332d"></circle>
+  <circle cx="74" cy="101" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="126" cy="101" r="6" fill="#f2974b" opacity=".4"></circle>
+  <ellipse cx="86" cy="88" rx="8" ry="10" fill="#fff"></ellipse><ellipse cx="114" cy="88" rx="8" ry="10" fill="#fff"></ellipse><circle cx="87" cy="90" r="4.3" fill="#15100d"></circle><circle cx="115" cy="90" r="4.3" fill="#15100d"></circle><circle cx="85" cy="86" r="1.6" fill="#fff"></circle><circle cx="113" cy="86" r="1.6" fill="#fff"></circle><ellipse cx="100" cy="106" rx="6.5" ry="6" fill="#f2974b"></ellipse><ellipse cx="100" cy="104" rx="3.5" ry="1.6" fill="#fff" opacity=".5"></ellipse>
+  <ellipse cx="100" cy="54" rx="33" ry="13" fill="#f2974b"></ellipse><ellipse cx="100" cy="50" rx="30" ry="10" fill="#ff9f57"></ellipse><circle cx="100" cy="42" r="3.6" fill="#f2974b"></circle>
+</svg>

package/src/assets/Mascots/yaya/estaticos/yaya-feliz.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="240" height="240" role="img" aria-label="Yaya feliz">
+  <path d="M72 170 Q70 124 100 124 Q130 124 128 170 Z" fill="#f2974b"></path>
+  <path d="M82 128 L120 150" stroke="#3f2620" stroke-width="3" fill="none"></path>
+  <rect x="112" y="148" width="22" height="18" rx="5" fill="#cf7a30"></rect>
+  <rect x="118" y="144" width="10" height="6" rx="3" fill="none" stroke="#3f2620" stroke-width="2"></rect>
+  <path d="M76 122 Q100 138 124 122 L124 130 Q100 146 76 130 Z" fill="#e0662e"></path>
+  <circle cx="88" cy="129" r="1.5" fill="#fbe6cf"></circle><circle cx="100" cy="133" r="1.5" fill="#fbe6cf"></circle><circle cx="112" cy="129" r="1.5" fill="#fbe6cf"></circle>
+  <path d="M62 96 q-6 18 4 30 q8 -10 6 -26 Z" fill="#3f2620"></path><path d="M138 96 q6 18 -4 30 q-8 -10 -6 -26 Z" fill="#3f2620"></path>
+  <circle cx="100" cy="88" r="40" fill="#51332d"></circle>
+  <circle cx="74" cy="101" r="6" fill="#f2974b" opacity=".4"></circle><circle cx="126" cy="101" r="6" fill="#f2974b" opacity=".4"></circle>
+  <path d="M78 81 l-5 -3 M122 81 l5 -3" stroke="#15100d" stroke-width="2" stroke-linecap="round"></path><ellipse cx="86" cy="88" rx="8" ry="10" fill="#fff"></ellipse><ellipse cx="114" cy="88" rx="8" ry="10" fill="#fff"></ellipse><circle cx="87" cy="90" r="4.3" fill="#15100d"></circle><circle cx="115" cy="90" r="4.3" fill="#15100d"></circle><circle cx="85" cy="86" r="1.6" fill="#fff"></circle><circle cx="113" cy="86" r="1.6" fill="#fff"></circle><path d="M91 103 Q100 113 109 103 Z" fill="#f2974b"></path>
+  <ellipse cx="100" cy="54" rx="33" ry="13" fill="#f2974b"></ellipse><ellipse cx="100" cy="50" rx="30" ry="10" fill="#ff9f57"></ellipse><circle cx="100" cy="42" r="3.6" fill="#f2974b"></circle>
+</svg>