@proteoapp/react-native-onboarding 0.1.0

package/LICENSE

@@ -0,0 +1,16 @@
+Proteo Onboarding SDK - Licença Proprietária
+
+Este SDK é um software proprietário da Proteo. O uso deste software é restrito 
+aos clientes que possuem contrato válido com a Proteo e token de acesso autorizado.
+
+O acesso, uso, cópia, modificação ou distribuição deste software está sujeito 
+aos termos e condições acordados em contrato com a Proteo. 
+
+Para obter acesso ao SDK e ao token necessário para sua utilização, entre em 
+contato com a Proteo para celebrar um contrato adequado.
+
+Todo o código-fonte e documentação são de propriedade exclusiva da Proteo 
+e estão protegidos pelas leis de direitos autorais e propriedade intelectual 
+aplicáveis.
+
+O não cumprimento dos termos de licenciamento pode resultar em ações legais.

package/README.md

@@ -0,0 +1,294 @@
+# Proteo Onboarding SDK
+
+**SDK React Native para onboarding**  
+Permite que apps react native integrem um processo de onboarding de forma simples.
+
+O SDK é **plug-and-play** no código JavaScript, mas depende de implementações nativas para funcionar.
+
+## ⚠️ Observações Importantes
+
+- **React Native:** Versão mínima 0.79
+- **Expo:** Versão mínima SDK 53
+  - Este SDK depende de código nativo, portanto **não funciona no Expo Go**.
+  - Para usar em Expo Managed, é necessário criar um **Development Build** ou usar **EAS Build** com **Expo Config Plugin** que configure automaticamente as dependências nativas.
+
+> Referência: [Expo - Customizing native code](https://docs.expo.dev/workflow/customizing/)
+
+- **Android:** Versão mínima SDK 26
+- **iOS:** Versão mínima 15.5
+
+## 📦 Instalação
+
+1. Instale o SDK:
+
+```bash
+npm install @proteoapp/react-native-onboarding
+```
+
+### Dependências Parceiras (Peer Dependencies)
+
+Este SDK requer as seguintes dependências instaladas no seu projeto respeitando os ranges informados:
+
+```json
+{
+  "@react-native-community/geolocation": ">=3.4.0 <4.0.0",
+  "@react-native-community/image-editor": ">=4.3.0 <5.0.0",
+  "@react-navigation/native": ">=7.1.18 <7.3.0",
+  "@react-navigation/native-stack": ">=7.3.28 <7.5.0",
+  "@shopify/react-native-skia": ">=2.2.4 <3.0.0",
+  "react-native-compressor": ">=1.16.0 <2.0.0",
+  "react-native-fast-opencv": ">=0.4.7 <0.5.0",
+  "react-native-fs": ">=2.20.0 <3.0.0",
+  "react-native-quick-crypto": ">=0.7.17 <0.8.0",
+  "react-native-reanimated": ">=4.1.2 <5.0.0",
+  "react-native-safe-area-context": ">=5.6.0 <6.0.0",
+  "react-native-screens": ">=4.14.0 <5.0.0",
+  "react-native-svg": ">=15.13.0 <16.0.0",
+  "react-native-vision-camera": ">=4.7.0 <5.0.0",
+  "react-native-vision-camera-face-detector": ">=1.8.9 <2.0.0",
+  "react-native-worklets": ">=0.6.0 <0.7.0",
+  "react-native-worklets-core": ">=1.6.2 <2.0.0",
+  "vision-camera-resize-plugin": ">=3.2.0 <4.0.0"
+}
+```
+
+Recomendamos utilizar esta instalação, evitando a instalação automática de versões com mudanças incompatíveis:
+
+```bash
+npm install @react-native-community/geolocation@^3.4.0 @react-native-community/image-editor@^4.3.0 @react-navigation/native@">=7.1.18 <7.3.0" @react-navigation/native-stack@">=7.3.28 <7.5.0" @shopify/react-native-skia@^2.2.4 react-native-compressor@^1.16.0 react-native-fast-opencv@^0.4.7 react-native-fs@^2.20.0 react-native-quick-crypto@^0.7.17 react-native-reanimated@^4.1.2 react-native-safe-area-context@^5.6.0 react-native-screens@^4.14.0 react-native-svg@^15.13.0 react-native-vision-camera@^4.7.0 react-native-vision-camera-face-detector@^1.8.9 react-native-worklets@^0.6.0 react-native-worklets-core@^1.6.2 vision-camera-resize-plugin@^3.2.0
+```
+
+**Importante:** Caso você utilize versões fora dos ranges informados acima, a compatibilidade com o SDK não é garantida.  
+Nesses casos, será necessário validar manualmente se as dependências continuam funcionando corretamente com o processo de onboarding.
+
+2. Instale as dependências nativas:
+
+```bash
+# Para iOS
+npx pod-install
+```
+
+> **Nota**: Este SDK tem dependências nativas que precisam ser linkadas corretamente.
+
+## 🔧 Configuração por Ambiente
+
+### React Native CLI / Expo Bare Workflow
+
+#### Configuração de Permissões
+
+**Android**
+
+Certifique-se de que seu `AndroidManifest.xml` contenha:
+
+```xml
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+    ...
+    <uses-permission android:name="android.permission.CAMERA" />
+    <uses-permission android:name="android.permission.RECORD_AUDIO" />
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+    <application
+        ...
+        android:allowBackup="true"
+        ... >
+
+        ...
+    </application>
+</manifest>
+```
+
+**iOS**
+
+Adicione as seguintes chaves ao seu arquivo `Info.plist`:
+
+```xml
+<key>NSCameraUsageDescription</key>
+<string>$(PRODUCT_NAME) precisa de acesso a sua Camera.</string>
+<key>NSMicrophoneUsageDescription</key>
+<string>$(PRODUCT_NAME) precisa de acesso ao seu Microfone.</string>
+<key>NSLocationWhenInUseUsageDescription</key>
+<string>$(PRODUCT_NAME) precisa de acesso a sua Localização.</string>
+```
+
+#### Configuração de Arquivos
+
+Adicione os seguintes plugins ao seu `babel.config.js`:
+
+```js
+module.exports = {
+  // ... outras configurações
+  plugins: [
+    ['@react-native-worklets-core/plugin'],
+    'react-native-worklets/plugin',
+  ],
+}
+```
+
+**Importante:** O plugin `react-native-worklets/plugin` deve sempre ficar em último lugar na lista de plugins.
+
+Após configurar o `babel.config.js`, é recomendado limpar o cache do Metro Bundler:
+
+```bash
+npm start -- --reset-cache
+```
+
+**Android - MainActivity.kt**
+
+Adicione o seguinte código ao seu `MainActivity.kt`:
+
+```kotlin
+class MainActivity: ReactActivity() {
+  // ...
+  override fun onCreate(savedInstanceState: Bundle?) {
+    super.onCreate(null)
+  }
+  // ...
+}
+```
+
+e certifique-se de adicionar a seguinte importação no topo deste arquivo, abaixo da definição do pacote:
+
+```kotlin
+import android.os.Bundle
+```
+
+---
+
+### Expo Managed Workflow
+
+> ⚠️ **Aviso:** O suporte para **Expo Managed Workflow** ainda **não foi totalmente testado**.  
+> Embora a documentação siga as recomendações do Expo, recomendamos cautela e testes adicionais antes de usar em produção.
+
+#### Configuração do Config Plugin
+
+Adicione o seguinte plugin ao seu `app.json`:
+
+```json
+{
+  "expo": {
+    "plugins": [
+      [
+        "react-native-vision-camera",
+        {
+          "cameraPermissionText": "$(PRODUCT_NAME) precisa de acesso a sua Camera.",
+          "enableMicrophonePermission": true,
+          "microphonePermissionText": "$(PRODUCT_NAME) precisa de acesso ao seu Microfone."
+        }
+      ]
+    ]
+  }
+}
+```
+
+#### Configuração de Arquivos
+
+Adicione os seguintes plugins ao seu `babel.config.js`:
+
+```js
+module.exports = {
+  // ... outras configurações
+  plugins: [
+    ['@react-native-worklets-core/plugin'],
+    'react-native-worklets/plugin',
+  ],
+}
+```
+
+**Importante:** O plugin `react-native-worklets/plugin` deve sempre ficar em último lugar na lista de plugins.
+
+#### Gerando o Build Nativo
+
+Após adicionar o plugin, execute:
+
+```bash
+npx expo prebuild --clean
+```
+
+Consulte a [Documentação EAS Build](https://docs.expo.dev/build/introduction/) para mais informações.
+
+## 🧩 Componente Onboarding
+
+### Props
+
+#### `environment` (obrigatório)
+
+- **Tipo:** `'development' | 'staging' | 'production'`
+- **Descrição:** Define o ambiente de execução:
+  - `'development'`: Ambiente local ou de desenvolvimento, utilizado durante implementação e testes
+  - `'staging'`: Ambiente de homologação ou pré-produção, usado para validação do processo e seus fluxos de execução, além de testes de QA
+  - `'production'`: Ambiente de produção, utilizado por usuários finais, operando apenas com serviços e dados definitivos, com foco em estabilidade, segurança e desempenho
+
+#### `tenant` (obrigatório)
+
+- **Tipo:** `string`
+- **Descrição:** Identificador único do cliente que está utilizando o SDK. Este valor é fornecido pela Proteo durante o processo de integração.
+
+#### `backgroundCheckId` (obrigatório)
+
+- **Tipo:** `string`
+- **Descrição:** ID único da verificação de antecedentes associada ao processo de onboarding. Identifica a sessão específica de verificação do usuário.
+
+#### `document` (obrigatório)
+
+- **Tipo:** `string`
+- **Descrição:** CPF do usuário que irá fazer o onboarding. Deve ser enviado sem formatação (apenas números).
+
+#### `objective` (opcional)
+
+- **Tipo:** `'onboarding' | 'face-auth'`
+- **Padrão:** `'onboarding'`
+- **Descrição:** Define o processo a ser executado:
+  - `'onboarding'`: Processo completo com captura de documento e autenticação facial
+  - `'face-auth'`: Processo com apenas autenticação facial
+
+#### `onFinish` (obrigatório)
+
+- **Tipo:** `Function`
+- **Descrição:** Função que será chamada ao finalizar o processo.
+
+### Uso Básico
+
+```tsx
+import { Onboarding } from '@proteoapp/react-native-onboarding'
+
+export default function App() {
+  return (
+    <Onboarding
+      environment="development"
+      tenant="minha-empresa"
+      backgroundCheckId="bg-check-123456"
+      document="12345678900"
+      onFinish={() => {
+        navigation.navigate('Screen')
+      }}
+    />
+  )
+}
+```
+
+## 🛠️ Solução de Problemas
+
+### Problemas Comuns
+
+#### A câmera não funciona no simulador
+
+Simuladores iOS e Android não suportam câmera. Teste em dispositivos físicos.
+
+#### Erros de build no Android
+
+- Certifique-se de que o `minSdkVersion` é 26 ou superior em `build.gradle`
+- Verifique se todas as dependências nativas foram instaladas corretamente
+
+#### Erros de build no iOS
+
+- Execute `pod install` no diretório `ios`
+- Verifique se a versão do Xcode é compatível
+- Certifique-se de que as configurações de signing estão corretas
+- A versão mínima do iOS é 15.5 - verifique as configurações de deployment target
+
+## 🧑‍💻 Suporte
+
+Se você encontrar problemas ao usar o SDK, por favor:
+
+1. Verifique a seção de [Solução de Problemas](#solução-de-problemas)
+2. Entre em contato com o suporte

package/assets/svgs/arrow-right.tsx

@@ -0,0 +1,13 @@
+import Svg, { Path, type SvgProps } from 'react-native-svg'
+
+export const ArrowRightSvg = ({ color, ...props }: SvgProps) => (
+  <Svg width={16} height={10} viewBox="0 0 16 10" fill="none" {...props}>
+    <Path
+      d="M0.75 4.75H14.75M14.75 4.75L10.75 8.75M14.75 4.75L10.75 0.75"
+      stroke={color}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+)

package/assets/svgs/back-document-circle.tsx

@@ -0,0 +1,14 @@
+import Svg, { Path, Rect, type SvgProps } from 'react-native-svg'
+
+export const BackDocumentCircleSvg = ({ color, ...props }: SvgProps) => (
+  <Svg width={50} height={50} viewBox="0 0 50 50" fill="none" {...props}>
+    <Rect x={0.5} y={0.5} width={49} height={49} rx={24.5} stroke={color} />
+    <Path
+      d="M29 25.0002H31.6667M18.3333 30.3335H31.6667M23.5 19.6667H31.6667M18.3333 25.0002L26.6667 25.0001M18.3333 19.6667H21M17 14.3335H33C35.2091 14.3335 37 16.1244 37 18.3335V31.6668C37 33.876 35.2091 35.6668 33 35.6668H17C14.7909 35.6668 13 33.876 13 31.6668V18.3335C13 16.1244 14.7909 14.3335 17 14.3335Z"
+      stroke={color}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+)

package/assets/svgs/camera-error-circle.tsx

@@ -0,0 +1,47 @@
+import Svg, { Path, Rect, type SvgProps } from 'react-native-svg'
+
+type CameraErrorCircleSvgProps = SvgProps & {
+  miniIconColor: string
+}
+
+export const CameraErrorCircleSvg = ({
+  miniIconColor,
+  ...props
+}: CameraErrorCircleSvgProps) => (
+  <Svg width={80} height={80} viewBox="0 0 80 80" fill="none" {...props}>
+    <Rect
+      x={1}
+      y={1}
+      width={78}
+      height={78}
+      rx={39}
+      stroke="#F98080"
+      strokeWidth={2}
+    />
+    <Path
+      d="M25.4167 29.5835H27.5C28.6051 29.5835 29.6649 29.1445 30.4463 28.3631C31.2277 27.5817 31.6667 26.5219 31.6667 25.4168C31.6667 24.8643 31.8862 24.3344 32.2769 23.9437C32.6676 23.553 33.1975 23.3335 33.75 23.3335H46.25C46.8025 23.3335 47.3324 23.553 47.7231 23.9437C48.1138 24.3344 48.3333 24.8643 48.3333 25.4168C48.3333 26.5219 48.7723 27.5817 49.5537 28.3631C50.3351 29.1445 51.3949 29.5835 52.5 29.5835H54.5833C55.6884 29.5835 56.7482 30.0225 57.5296 30.8039C58.311 31.5853 58.75 32.6451 58.75 33.7502V52.5002C58.75 53.6052 58.311 54.665 57.5296 55.4464C56.7482 56.2278 55.6884 56.6668 54.5833 56.6668H25.4167C24.3116 56.6668 23.2518 56.2278 22.4704 55.4464C21.689 54.665 21.25 53.6052 21.25 52.5002V33.7502C21.25 32.6451 21.689 31.5853 22.4704 30.8039C23.2518 30.0225 24.3116 29.5835 25.4167 29.5835Z"
+      stroke="#F98080"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M40 48.3335C43.4518 48.3335 46.25 45.5353 46.25 42.0835C46.25 38.6317 43.4518 35.8335 40 35.8335C36.5482 35.8335 33.75 38.6317 33.75 42.0835C33.75 45.5353 36.5482 48.3335 40 48.3335Z"
+      stroke="#F98080"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M44.5 56.5C44.5 49.8726 49.8726 44.5 56.5 44.5C63.1274 44.5 68.5 49.8726 68.5 56.5C68.5 63.1274 63.1274 68.5 56.5 68.5C49.8726 68.5 44.5 63.1274 44.5 56.5Z"
+      fill="#F98080"
+    />
+    <Path
+      d="M56.4998 54.5002V55.8335M56.4998 58.5002V58.5068M51.8331 61.1668H61.1665C61.384 61.1653 61.5979 61.1106 61.7894 61.0074C61.9809 60.9043 62.1443 60.7558 62.2653 60.575C62.3862 60.3942 62.4611 60.1865 62.4834 59.9701C62.5057 59.7537 62.4747 59.5352 62.3931 59.3335L57.6598 51.1668C57.5445 50.9584 57.3755 50.7847 57.1703 50.6638C56.9651 50.5428 56.7313 50.479 56.4931 50.479C56.255 50.479 56.0211 50.5428 55.816 50.6638C55.6108 50.7847 55.4418 50.9584 55.3265 51.1668L50.5931 59.3335C50.5131 59.5306 50.4814 59.7439 50.5006 59.9557C50.5198 60.1675 50.5894 60.3717 50.7036 60.5511C50.8178 60.7305 50.9732 60.8801 51.157 60.9872C51.3407 61.0943 51.5474 61.1559 51.7598 61.1668"
+      stroke={miniIconColor}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+)

package/assets/svgs/camera-plus.tsx

@@ -0,0 +1,13 @@
+import Svg, { Path, type SvgProps } from 'react-native-svg'
+
+export const CameraPlusSvg = ({ color, ...props }: SvgProps) => (
+  <Svg width={20} height={19} viewBox="0 0 20 19" fill="none" {...props}>
+    <Path
+      d="M9.75 1.75H7.75C7.48478 1.75 7.23043 1.85536 7.04289 2.04289C6.85536 2.23043 6.75 2.48478 6.75 2.75C6.75 3.28043 6.53929 3.78914 6.16421 4.16421C5.78914 4.53929 5.28043 4.75 4.75 4.75H2.75C2.21957 4.75 1.71086 4.96071 1.33579 5.33579C0.960714 5.71086 0.75 6.21957 0.75 6.75V15.75C0.75 16.2804 0.960714 16.7891 1.33579 17.1642C1.71086 17.5393 2.21957 17.75 2.75 17.75H16.75C17.2804 17.75 17.7891 17.5393 18.1642 17.1642C18.5393 16.7891 18.75 16.2804 18.75 15.75V8.75M12.75 3.75H18.75M15.75 0.75V6.75M12.75 10.75C12.75 12.4069 11.4069 13.75 9.75 13.75C8.09315 13.75 6.75 12.4069 6.75 10.75C6.75 9.09315 8.09315 7.75 9.75 7.75C11.4069 7.75 12.75 9.09315 12.75 10.75Z"
+      stroke={color}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+)

package/assets/svgs/checklist-circle.tsx

@@ -0,0 +1,93 @@
+import Svg, {
+  Circle,
+  G,
+  Line,
+  Path,
+  Rect,
+  type SvgProps,
+} from 'react-native-svg'
+
+export const ChecklistCircleSvg = ({ color, ...props }: SvgProps) => (
+  <Svg width={80} height={80} viewBox="0 0 80 80" {...props}>
+    <Circle cx={40} cy={40} r={38} fill="none" stroke={color} strokeWidth={2} />
+    <G transform="translate(21.5, 23.5)">
+      <Rect
+        x={0}
+        y={0}
+        width={37}
+        height={33}
+        rx={2}
+        fill="none"
+        stroke={color}
+        strokeWidth={2}
+      />
+      <Circle
+        cx={6}
+        cy={8}
+        r={3}
+        fill="none"
+        stroke={color}
+        strokeWidth={1.5}
+      />
+      <Path
+        d="M 4.5 8 L 5.5 9.2 L 7.5 7"
+        fill="none"
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Line
+        x1={12}
+        y1={8}
+        x2={31}
+        y2={8}
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+      />
+      <Circle
+        cx={6}
+        cy={16.5}
+        r={3}
+        fill="none"
+        stroke={color}
+        strokeWidth={1.5}
+      />
+      <Path
+        d="M 4.5 16.5 L 5.5 17.7 L 7.5 15.5"
+        fill="none"
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Line
+        x1={12}
+        y1={16.5}
+        x2={31}
+        y2={16.5}
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+      />
+      <Circle
+        cx={6}
+        cy={25}
+        r={3}
+        fill="none"
+        stroke={color}
+        strokeWidth={1.5}
+      />
+      <Line
+        x1={12}
+        y1={25}
+        x2={31}
+        y2={25}
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+      />
+    </G>
+  </Svg>
+)

package/assets/svgs/clock-circle.tsx

@@ -0,0 +1,40 @@
+import Svg, { Path, Rect, type SvgProps } from 'react-native-svg'
+
+type ClockCircleSvgProps = SvgProps & {
+  miniIconColor: string
+}
+
+export const ClockCircleSvg = ({
+  miniIconColor,
+  ...props
+}: ClockCircleSvgProps) => (
+  <Svg width={80} height={80} viewBox="0 0 80 80" fill="none" {...props}>
+    <Rect
+      x={1}
+      y={1}
+      width={78}
+      height={78}
+      rx={39}
+      stroke="#FACA15"
+      strokeWidth={2}
+    />
+    <Path
+      d="M40 29.5833V40L46.25 46.25M58.75 40C58.75 50.3553 50.3553 58.75 40 58.75C29.6447 58.75 21.25 50.3553 21.25 40C21.25 29.6447 29.6447 21.25 40 21.25C50.3553 21.25 58.75 29.6447 58.75 40Z"
+      stroke="#FACA15"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M44.5 56.5C44.5 49.8726 49.8726 44.5 56.5 44.5C63.1274 44.5 68.5 49.8726 68.5 56.5C68.5 63.1274 63.1274 68.5 56.5 68.5C49.8726 68.5 44.5 63.1274 44.5 56.5Z"
+      fill="#FACA15"
+    />
+    <Path
+      d="M56.5 53.8333V56.5M56.5 59.1667H56.5067M62.5 56.5C62.5 59.8137 59.8137 62.5 56.5 62.5C53.1863 62.5 50.5 59.8137 50.5 56.5C50.5 53.1863 53.1863 50.5 56.5 50.5C59.8137 50.5 62.5 53.1863 62.5 56.5Z"
+      stroke={miniIconColor}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+)

package/assets/svgs/document-2.tsx

@@ -0,0 +1,31 @@
+import Svg, { Path, Rect, type SvgProps } from 'react-native-svg'
+
+export const Document2Svg = (props: SvgProps) => (
+  <Svg width={264} height={140} viewBox="0 0 264 140" fill="none" {...props}>
+    <Rect
+      x={1}
+      y={1}
+      width={262}
+      height={138}
+      rx={7}
+      stroke="white"
+      strokeWidth={2}
+    />
+    <Rect x={16} y={16} width={232} height={3} rx={1.5} fill="white" />
+    <Path
+      d="M26.0319 82.522C26.8157 79.9134 28.4195 77.6269 30.6053 76.0018C32.7912 74.3766 35.4428 73.4994 38.1666 73.5002H50.8332C53.5606 73.4992 56.2153 74.3786 58.4028 76.0075C60.5903 77.6364 62.1935 79.9278 62.9742 82.541M73 60.8335C73 76.5736 60.2401 89.3335 44.5 89.3335C28.7599 89.3335 16 76.5736 16 60.8335C16 45.0934 28.7599 32.3335 44.5 32.3335C60.2401 32.3335 73 45.0934 73 60.8335ZM54 54.5002C54 59.7469 49.7467 64.0002 44.5 64.0002C39.2533 64.0002 35 59.7469 35 54.5002C35 49.2535 39.2533 45.0002 44.5 45.0002C49.7467 45.0002 54 49.2535 54 54.5002Z"
+      stroke="white"
+      strokeWidth={3}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Rect x={81} y={32.3335} width={69} height={3} rx={1.5} fill="white" />
+    <Rect x={81} y={50.3335} width={167} height={3} rx={1.5} fill="white" />
+    <Rect x={81} y={68.3335} width={128} height={3} rx={1.5} fill="white" />
+    <Rect x={81} y={86.3335} width={167} height={3} rx={1.5} fill="white" />
+    <Rect x={16} y={102.667} width={114} height={3} rx={1.5} fill="white" />
+    <Rect x={134} y={102.667} width={114} height={3} rx={1.5} fill="white" />
+    <Rect x={16} y={120} width={114} height={3} rx={1.5} fill="white" />
+    <Rect x={134} y={120} width={114} height={3} rx={1.5} fill="white" />
+  </Svg>
+)