Merge branch 'feat/refresh' into v2-google-auth

2025-11-15 01:01:49 +10:00 · 2023-07-31 13:03:32 +10:00
parent d1bc948f3c 32dcd4aa0e
commit 58baf5ddf4
118 changed files with 17723 additions and 612 deletions
--- a/packages/email/.gitignore
+++ b/packages/email/.gitignore
@ -0,0 +1 @@
+.react-email/
--- a/packages/email/ambient.d.ts
+++ b/packages/email/ambient.d.ts
@ -0,0 +1 @@
+declare module '@documenso/tailwind-config';
--- a/packages/email/index.ts
+++ b/packages/email/index.ts
@ -0,0 +1 @@
+export {};
--- a/packages/email/mailer.ts
+++ b/packages/email/mailer.ts
@ -0,0 +1,50 @@
+import { createTransport } from 'nodemailer';
+
+import { MailChannelsTransport } from './transports/mailchannels';
+
+const getTransport = () => {
+  const transport = process.env.NEXT_PRIVATE_SMTP_TRANSPORT ?? 'smtp-auth';
+
+  if (transport === 'mailchannels') {
+    return createTransport(
+      MailChannelsTransport.makeTransport({
+        apiKey: process.env.NEXT_PRIVATE_MAILCHANNELS_API_KEY,
+        endpoint: process.env.NEXT_PRIVATE_MAILCHANNELS_ENDPOINT,
+      }),
+    );
+  }
+
+  if (transport === 'smtp-api') {
+    if (!process.env.NEXT_PRIVATE_SMTP_HOST || !process.env.NEXT_PRIVATE_SMTP_APIKEY) {
+      throw new Error(
+        'SMTP API transport requires NEXT_PRIVATE_SMTP_HOST and NEXT_PRIVATE_SMTP_APIKEY',
+      );
+    }
+
+    return createTransport({
+      host: process.env.NEXT_PRIVATE_SMTP_HOST,
+      port: Number(process.env.NEXT_PRIVATE_SMTP_PORT) || 587,
+      secure: process.env.NEXT_PRIVATE_SMTP_SECURE === 'true',
+      auth: {
+        user: process.env.NEXT_PRIVATE_SMTP_APIKEY_USER ?? 'apikey',
+        pass: process.env.NEXT_PRIVATE_SMTP_APIKEY ?? '',
+      },
+    });
+  }
+
+  if (!process.env.NEXT_PRIVATE_SMTP_HOST) {
+    throw new Error('SMTP transport requires NEXT_PRIVATE_SMTP_HOST');
+  }
+
+  return createTransport({
+    host: process.env.NEXT_PRIVATE_SMTP_HOST,
+    port: Number(process.env.NEXT_PRIVATE_SMTP_PORT) || 587,
+    secure: process.env.NEXT_PRIVATE_SMTP_SECURE === 'true',
+    auth: {
+      user: process.env.NEXT_PRIVATE_SMTP_USERNAME ?? '',
+      pass: process.env.NEXT_PRIVATE_SMTP_PASSWORD ?? '',
+    },
+  });
+};
+
+export const mailer = getTransport();
--- a/packages/email/package.json
+++ b/packages/email/package.json
@ -0,0 +1,30 @@
+{
+  "name": "@documenso/email",
+  "version": "1.0.0",
+  "main": "./index.ts",
+  "types": "./index.ts",
+  "license": "MIT",
+  "files": [
+    "templates/",
+    "transports/",
+    "mailer.ts",
+    "render.ts",
+    "index.ts"
+  ],
+  "scripts": {
+    "dev": "email dev --port 3002 --dir templates",
+    "worker:test": "tsup worker/index.ts --format esm"
+  },
+  "dependencies": {
+    "@documenso/tsconfig": "*",
+    "@documenso/tailwind-config": "*",
+    "@documenso/ui": "*",
+    "@react-email/components": "^0.0.7",
+    "nodemailer": "^6.9.3"
+  },
+  "devDependencies": {
+    "@types/nodemailer": "^6.4.8",
+    "react-email": "^1.9.4",
+    "tsup": "^7.1.0"
+  }
+}
--- a/packages/email/render.ts
+++ b/packages/email/render.ts
@ -0,0 +1 @@
+export { render, renderAsync } from '@react-email/components';
--- a/packages/email/static/clock.png
+++ b/packages/email/static/clock.png
--- a/packages/email/static/completed.png
+++ b/packages/email/static/completed.png
--- a/packages/email/static/document.png
+++ b/packages/email/static/document.png
--- a/packages/email/static/download.png
+++ b/packages/email/static/download.png
--- a/packages/email/static/logo.png
+++ b/packages/email/static/logo.png
--- a/packages/email/static/review.png
+++ b/packages/email/static/review.png
--- a/packages/email/tailwind.config.js
+++ b/packages/email/tailwind.config.js
@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const baseConfig = require('@documenso/tailwind-config');
+const path = require('path');
+
+module.exports = {
+  ...baseConfig,
+  content: [
+    `templates/**/*.{ts,tsx}`,
+    `${path.join(require.resolve('@documenso/ui'), '..')}/**/*.{ts,tsx}`,
+  ],
+};
--- a/packages/email/templates/document-completed.tsx
+++ b/packages/email/templates/document-completed.tsx
@ -0,0 +1,129 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '@react-email/components';
+
+import * as config from '@documenso/tailwind-config';
+
+interface DocumentCompletedEmailTemplateProps {
+  downloadLink?: string;
+  reviewLink?: string;
+  documentName?: string;
+  assetBaseUrl?: string;
+}
+
+export const DocumentCompletedEmailTemplate = ({
+  downloadLink = 'https://documenso.com',
+  reviewLink = 'https://documenso.com',
+  documentName = 'Open Source Pledge.pdf',
+  assetBaseUrl = 'http://localhost:3002',
+}: DocumentCompletedEmailTemplateProps) => {
+  const previewText = `Completed Document`;
+
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: config.theme.extend.colors,
+            },
+          },
+        }}
+      >
+        <Body className="mx-auto my-auto font-sans">
+          <Section className="bg-white">
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
+              <Section className="p-2">
+                <Img src={getAssetUrl('/static/logo.png')} alt="Documenso Logo" className="h-6" />
+
+                <Section className="mt-4 flex-row items-center justify-center">
+                  <div className="flex items-center justify-center p-4">
+                    <Img
+                      className="h-42"
+                      src={getAssetUrl('/static/document.png')}
+                      alt="Documenso"
+                    />
+                  </div>
+
+                  <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-[#7AC455]">
+                    <Img
+                      src={getAssetUrl('/static/completed.png')}
+                      className="-mb-0.5 mr-2 inline h-7 w-7"
+                    />
+                    Completed
+                  </Text>
+
+                  <Text className="text-primary mb-0 text-center text-lg font-semibold">
+                    “{documentName}” was signed by all signers
+                  </Text>
+
+                  <Text className="my-1 text-center text-base text-slate-400">
+                    Continue by downloading or reviewing the document.
+                  </Text>
+
+                  <Section className="mb-6 mt-8 text-center">
+                    <Button
+                      className="mr-4 inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+                      href={reviewLink}
+                    >
+                      <Img
+                        src={getAssetUrl('/static/review.png')}
+                        className="-mb-1 mr-2 inline h-5 w-5"
+                      />
+                      Review
+                    </Button>
+                    <Button
+                      className="inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+                      href={downloadLink}
+                    >
+                      <Img
+                        src={getAssetUrl('/static/download.png')}
+                        className="-mb-1 mr-2 inline h-5 w-5"
+                      />
+                      Download
+                    </Button>
+                  </Section>
+                </Section>
+              </Section>
+            </Container>
+
+            <Container className="mx-auto max-w-xl">
+              <Section>
+                <Text className="my-4 text-base text-slate-400">
+                  This document was sent using{' '}
+                  <Link className="text-[#7AC455]" href="https://documenso.com">
+                    Documenso.
+                  </Link>
+                </Text>
+
+                <Text className="my-8 text-sm text-slate-400">
+                  Documenso
+                  <br />
+                  2261 Market Street, #5211, San Francisco, CA 94114, USA
+                </Text>
+              </Section>
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default DocumentCompletedEmailTemplate;
--- a/packages/email/templates/document-invite.tsx
+++ b/packages/email/templates/document-invite.tsx
@ -0,0 +1,127 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Hr,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '@react-email/components';
+
+import * as config from '@documenso/tailwind-config';
+
+interface DocumentInviteEmailTemplateProps {
+  inviterName?: string;
+  inviterEmail?: string;
+  documentName?: string;
+  signDocumentLink?: string;
+  assetBaseUrl?: string;
+}
+
+export const DocumentInviteEmailTemplate = ({
+  inviterName = 'Lucas Smith',
+  inviterEmail = 'lucas@documenso.com',
+  documentName = 'Open Source Pledge.pdf',
+  signDocumentLink = 'https://documenso.com',
+  assetBaseUrl = 'http://localhost:3002',
+}: DocumentInviteEmailTemplateProps) => {
+  const previewText = `Completed Document`;
+
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: config.theme.extend.colors,
+            },
+          },
+        }}
+      >
+        <Body className="mx-auto my-auto bg-white font-sans">
+          <Section>
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
+              <Section className="p-2">
+                <Img src={getAssetUrl('/static/logo.png')} alt="Documenso Logo" className="h-6" />
+
+                <Section className="mt-4 flex-row items-center justify-center">
+                  <div className="flex items-center justify-center p-4">
+                    <Img
+                      className="h-42"
+                      src={getAssetUrl('/static/document.png')}
+                      alt="Documenso"
+                    />
+                  </div>
+
+                  <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
+                    {inviterName} has invited you to sign "{documentName}"
+                  </Text>
+
+                  <Text className="my-1 text-center text-base text-slate-400">
+                    Continue by signing the document.
+                  </Text>
+
+                  <Section className="mb-6 mt-8 text-center">
+                    <Button
+                      className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
+                      href={signDocumentLink}
+                    >
+                      Sign Document
+                    </Button>
+                  </Section>
+                </Section>
+              </Section>
+            </Container>
+
+            <Container className="mx-auto mt-12 max-w-xl">
+              <Section>
+                <Text className="my-4 text-base font-semibold">
+                  {inviterName}{' '}
+                  <Link className="font-normal text-slate-400" href="mailto:{inviterEmail}">
+                    ({inviterEmail})
+                  </Link>
+                </Text>
+
+                <Text className="mt-2 text-base text-slate-400">
+                  {inviterName} has invited you to sign the document "{documentName}".
+                </Text>
+              </Section>
+            </Container>
+
+            <Hr className="mx-auto mt-12 max-w-xl" />
+
+            <Container className="mx-auto max-w-xl">
+              <Section>
+                <Text className="my-4 text-base text-slate-400">
+                  This document was sent using{' '}
+                  <Link className="text-[#7AC455]" href="https://documenso.com">
+                    Documenso.
+                  </Link>
+                </Text>
+
+                <Text className="my-8 text-sm text-slate-400">
+                  Documenso
+                  <br />
+                  2261 Market Street, #5211, San Francisco, CA 94114, USA
+                </Text>
+              </Section>
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default DocumentInviteEmailTemplate;
--- a/packages/email/templates/document-pending.tsx
+++ b/packages/email/templates/document-pending.tsx
@ -0,0 +1,103 @@
+import {
+  Body,
+  Container,
+  Head,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '@react-email/components';
+
+import * as config from '@documenso/tailwind-config';
+
+interface DocumentPendingEmailTemplateProps {
+  documentName?: string;
+  assetBaseUrl?: string;
+}
+
+export const DocumentPendingEmailTemplate = ({
+  documentName = 'Open Source Pledge.pdf',
+  assetBaseUrl = 'http://localhost:3002',
+}: DocumentPendingEmailTemplateProps) => {
+  const previewText = `Pending Document`;
+
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: config.theme.extend.colors,
+            },
+          },
+        }}
+      >
+        <Body className="mx-auto my-auto font-sans">
+          <Section className="bg-white">
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
+              <Section className="p-2">
+                <Img src={getAssetUrl('/static/logo.png')} alt="Documenso Logo" className="h-6" />
+
+                <Section className="mt-4 flex-row items-center justify-center">
+                  <div className="flex items-center justify-center p-4">
+                    <Img
+                      className="h-42"
+                      src={getAssetUrl('/static/document.png')}
+                      alt="Documenso"
+                    />
+                  </div>
+
+                  <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-blue-500">
+                    <Img
+                      src={getAssetUrl('/static/clock.png')}
+                      className="-mb-0.5 mr-2 inline h-7 w-7"
+                    />
+                    Waiting for others
+                  </Text>
+
+                  <Text className="text-primary mb-0 text-center text-lg font-semibold">
+                    “{documentName}” has been signed
+                  </Text>
+
+                  <Text className="mx-auto mb-6 mt-1 max-w-[80%] text-center text-base text-slate-400">
+                    We're still waiting for other signers to sign this document.
+                    <br />
+                    We'll notify you as soon as it's ready.
+                  </Text>
+                </Section>
+              </Section>
+            </Container>
+
+            <Container className="mx-auto max-w-xl">
+              <Section>
+                <Text className="my-4 text-base text-slate-400">
+                  This document was sent using{' '}
+                  <Link className="text-[#7AC455]" href="https://documenso.com">
+                    Documenso.
+                  </Link>
+                </Text>
+
+                <Text className="my-8 text-sm text-slate-400">
+                  Documenso
+                  <br />
+                  2261 Market Street, #5211, San Francisco, CA 94114, USA
+                </Text>
+              </Section>
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default DocumentPendingEmailTemplate;
--- a/packages/email/transports/mailchannels.ts
+++ b/packages/email/transports/mailchannels.ts
@ -0,0 +1,154 @@
+import { SentMessageInfo, Transport } from 'nodemailer';
+import type { Address } from 'nodemailer/lib/mailer';
+import type MailMessage from 'nodemailer/lib/mailer/mail-message';
+
+const VERSION = '1.0.0';
+
+type NodeMailerAddress = string | Address | Array<string | Address> | undefined;
+
+interface MailChannelsAddress {
+  email: string;
+  name?: string;
+}
+
+interface MailChannelsTransportOptions {
+  apiKey: string;
+  endpoint: string;
+}
+
+/**
+ * Transport for sending email through MailChannels via Cloudflare Workers.
+ *
+ * Optionally allows specifying a custom endpoint and API key so you can setup a worker
+ * to proxy requests to MailChannels with added security.
+ *
+ * @see https://blog.cloudflare.com/sending-email-from-workers-with-mailchannels/
+ */
+export class MailChannelsTransport implements Transport<SentMessageInfo> {
+  public name = 'CloudflareMailTransport';
+  public version = VERSION;
+
+  private _options: MailChannelsTransportOptions;
+
+  public static makeTransport(options: Partial<MailChannelsTransportOptions>) {
+    return new MailChannelsTransport(options);
+  }
+
+  constructor(options: Partial<MailChannelsTransportOptions>) {
+    const { apiKey = '', endpoint = 'https://api.mailchannels.net/tx/v1/send' } = options;
+
+    this._options = {
+      apiKey,
+      endpoint,
+    };
+  }
+
+  public send(mail: MailMessage, callback: (_err: Error | null, _info: SentMessageInfo) => void) {
+    if (!mail.data.to || !mail.data.from) {
+      return callback(new Error('Missing required fields "to" or "from"'), null);
+    }
+
+    const mailTo = this.toMailChannelsAddresses(mail.data.to);
+    const mailCc = this.toMailChannelsAddresses(mail.data.cc);
+    const mailBcc = this.toMailChannelsAddresses(mail.data.bcc);
+
+    const from: MailChannelsAddress =
+      typeof mail.data.from === 'string'
+        ? { email: mail.data.from }
+        : {
+            email: mail.data.from?.address,
+            name: mail.data.from?.name,
+          };
+
+    const requestHeaders: Record<string, string> = {
+      'Content-Type': 'application/json',
+    };
+
+    if (this._options.apiKey) {
+      requestHeaders['X-Auth-Token'] = this._options.apiKey;
+    }
+
+    fetch(this._options.endpoint, {
+      method: 'POST',
+      headers: requestHeaders,
+      body: JSON.stringify({
+        from: from,
+        subject: mail.data.subject,
+        personalizations: [
+          {
+            to: mailTo,
+            cc: mailCc.length > 0 ? mailCc : undefined,
+            bcc: mailBcc.length > 0 ? mailBcc : undefined,
+            dkim_domain: process.env.NEXT_PRIVATE_MAILCHANNELS_DKIM_DOMAIN || undefined,
+            dkim_selector: process.env.NEXT_PRIVATE_MAILCHANNELS_DKIM_SELECTOR || undefined,
+            dkim_private_key: process.env.NEXT_PRIVATE_MAILCHANNELS_DKIM_PRIVATE_KEY || undefined,
+          },
+        ],
+        content: [
+          {
+            type: 'text/plain',
+            value: mail.data.text?.toString('utf-8') ?? '',
+          },
+          {
+            type: 'text/html',
+            value: mail.data.html?.toString('utf-8') ?? '',
+          },
+        ],
+      }),
+    })
+      .then((res) => {
+        if (res.status >= 200 && res.status <= 299) {
+          return callback(null, {
+            messageId: '',
+            envelope: {
+              from: mail.data.from,
+              to: mail.data.to,
+            },
+            accepted: mail.data.to,
+            rejected: [],
+            pending: [],
+          });
+        }
+
+        res.json().then((data) => {
+          return callback(new Error(`MailChannels error: ${data.message}`), null);
+        });
+      })
+      .catch((err) => {
+        return callback(err, null);
+      });
+  }
+
+  /**
+   * Converts a nodemailer address(s) to an array of MailChannel compatible address.
+   */
+  private toMailChannelsAddresses(address: NodeMailerAddress): Array<MailChannelsAddress> {
+    if (!address) {
+      return [];
+    }
+
+    if (typeof address === 'string') {
+      return [{ email: address }];
+    }
+
+    if (Array.isArray(address)) {
+      return address.map((address) => {
+        if (typeof address === 'string') {
+          return { email: address };
+        }
+
+        return {
+          email: address.address,
+          name: address.name,
+        };
+      });
+    }
+
+    return [
+      {
+        email: address.address,
+        name: address.name,
+      },
+    ];
+  }
+}
--- a/packages/email/tsconfig.json
+++ b/packages/email/tsconfig.json
@ -0,0 +1,5 @@
+{
+  "extends": "@documenso/tsconfig/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}
--- a/packages/eslint-config/package.json
+++ b/packages/eslint-config/package.json
@ -7,7 +7,7 @@
    "@typescript-eslint/eslint-plugin": "^5.59.2",
    "@typescript-eslint/parser": "^5.59.2",
    "eslint": "^8.40.0",
-    "eslint-config-next": "^13.4.1",
+    "eslint-config-next": "^13.4.9",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
--- a/packages/lib/client-only/recipient-initials.ts
+++ b/packages/lib/client-only/recipient-initials.ts
@ -0,0 +1,6 @@
+export const initials = (text: string) =>
+  text
+    ?.split(' ')
+    .map((name: string) => name.slice(0, 1).toUpperCase())
+    .slice(0, 2)
+    .join('') ?? 'UK';
--- a/packages/lib/client-only/recipient-type.ts
+++ b/packages/lib/client-only/recipient-type.ts
@ -0,0 +1,13 @@
+import { Recipient } from '@documenso/prisma/client';
+
+export const getRecipientType = (recipient: Recipient) => {
+  if (recipient.sendStatus === 'SENT' && recipient.signingStatus === 'SIGNED') {
+    return 'completed';
+  }
+
+  if (recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED') {
+    return 'waiting';
+  }
+
+  return 'unsigned';
+};
--- a/packages/lib/next-auth/auth-options.ts
+++ b/packages/lib/next-auth/auth-options.ts
@ -31,7 +31,6 @@ export const NEXT_AUTH_OPTIONS: AuthOptions = {
        const user = await getUserByEmail({ email }).catch(() => null);

        if (!user || !user.password) {
-          console.log('no user');
          return null;
        }

--- a/packages/lib/package.json
+++ b/packages/lib/package.json
@ -13,14 +13,17 @@
  "scripts": {
  },
  "dependencies": {
+    "@documenso/email": "*",
    "@documenso/prisma": "*",
    "@pdf-lib/fontkit": "^1.1.1",
    "@next-auth/prisma-adapter": "^1.0.6",
    "@upstash/redis": "^1.20.6",
    "bcrypt": "^5.1.0",
    "pdf-lib": "^1.17.1",
-    "next": "13.4.1",
+    "nanoid": "^4.0.2",
+    "next": "13.4.9",
    "next-auth": "^4.22.1",
+    "react": "18.2.0",
    "stripe": "^12.7.0"
  },
  "devDependencies": {
--- a/packages/lib/server-only/document/find-documents.ts
+++ b/packages/lib/server-only/document/find-documents.ts
@ -1,5 +1,6 @@
 import { prisma } from '@documenso/prisma';
 import { Document, DocumentStatus, Prisma } from '@documenso/prisma/client';
+import { DocumentWithReciepient } from '@documenso/prisma/types/document-with-recipient';

 import { FindResultSet } from '../../types/find-result-set';

@ -22,7 +23,7 @@ export const findDocuments = async ({
  page = 1,
  perPage = 10,
  orderBy,
-}: FindDocumentsOptions): Promise<FindResultSet<Document>> => {
+}: FindDocumentsOptions): Promise<FindResultSet<DocumentWithReciepient>> => {
  const orderByColumn = orderBy?.column ?? 'created';
  const orderByDirection = orderBy?.direction ?? 'desc';

@ -48,6 +49,9 @@ export const findDocuments = async ({
      orderBy: {
        [orderByColumn]: orderByDirection,
      },
+      include: {
+        Recipient: true,
+      },
    }),
    prisma.document.count({
      where: {
--- a/packages/lib/server-only/document/send-document.tsx
+++ b/packages/lib/server-only/document/send-document.tsx
@ -0,0 +1,94 @@
+import { createElement } from 'react';
+
+import { mailer } from '@documenso/email/mailer';
+import { render } from '@documenso/email/render';
+import { DocumentInviteEmailTemplate } from '@documenso/email/templates/document-invite';
+import { prisma } from '@documenso/prisma';
+import { DocumentStatus, SendStatus } from '@documenso/prisma/client';
+
+export interface SendDocumentOptions {
+  documentId: number;
+  userId: number;
+}
+
+export const sendDocument = async ({ documentId, userId }: SendDocumentOptions) => {
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+  });
+
+  const document = await prisma.document.findUnique({
+    where: {
+      id: documentId,
+      userId,
+    },
+    include: {
+      Recipient: true,
+    },
+  });
+
+  if (!document) {
+    throw new Error('Document not found');
+  }
+
+  if (document.Recipient.length === 0) {
+    throw new Error('Document has no recipients');
+  }
+
+  if (document.status === DocumentStatus.COMPLETED) {
+    throw new Error('Can not send completed document');
+  }
+
+  await Promise.all([
+    document.Recipient.map(async (recipient) => {
+      const { email, name } = recipient;
+
+      if (recipient.sendStatus === SendStatus.SENT) {
+        return;
+      }
+
+      const template = createElement(DocumentInviteEmailTemplate, {
+        documentName: document.title,
+        assetBaseUrl: process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000',
+        inviterName: user.name || undefined,
+        inviterEmail: user.email,
+        signDocumentLink: 'https://example.com',
+      });
+
+      mailer.sendMail({
+        to: {
+          address: email,
+          name,
+        },
+        from: {
+          name: process.env.NEXT_PRIVATE_SMTP_FROM_NAME || 'Documenso',
+          address: process.env.NEXT_PRIVATE_SMTP_FROM_ADDRESS || 'noreply@documenso.com',
+        },
+        subject: 'Please sign this document',
+        html: render(template),
+        text: render(template, { plainText: true }),
+      });
+
+      await prisma.recipient.update({
+        where: {
+          id: recipient.id,
+        },
+        data: {
+          sendStatus: SendStatus.SENT,
+        },
+      });
+    }),
+  ]);
+
+  const updatedDocument = await prisma.document.update({
+    where: {
+      id: documentId,
+    },
+    data: {
+      status: DocumentStatus.PENDING,
+    },
+  });
+
+  return updatedDocument;
+};
--- a/packages/lib/server-only/field/get-fields-for-document.ts
+++ b/packages/lib/server-only/field/get-fields-for-document.ts
@ -0,0 +1,19 @@
+import { prisma } from '@documenso/prisma';
+
+export interface GetFieldsForDocumentOptions {
+  documentId: number;
+  userId: number;
+}
+
+export const getFieldsForDocument = async ({ documentId, userId }: GetFieldsForDocumentOptions) => {
+  const fields = await prisma.field.findMany({
+    where: {
+      documentId,
+      Document: {
+        userId,
+      },
+    },
+  });
+
+  return fields;
+};
--- a/packages/lib/server-only/field/set-fields-for-document.ts
+++ b/packages/lib/server-only/field/set-fields-for-document.ts
@ -0,0 +1,125 @@
+import { prisma } from '@documenso/prisma';
+import { SendStatus, SigningStatus } from '@documenso/prisma/client';
+
+export interface SetFieldsForDocumentOptions {
+  userId: number;
+  documentId: number;
+  fields: {
+    id?: number | null;
+    signerEmail: string;
+    pageNumber: number;
+    pageX: number;
+    pageY: number;
+    pageWidth: number;
+    pageHeight: number;
+  }[];
+}
+
+export const setFieldsForDocument = async ({
+  userId,
+  documentId,
+  fields,
+}: SetFieldsForDocumentOptions) => {
+  const document = await prisma.document.findFirst({
+    where: {
+      id: documentId,
+      userId,
+    },
+  });
+
+  if (!document) {
+    throw new Error('Document not found');
+  }
+
+  const existingFields = await prisma.field.findMany({
+    where: {
+      documentId,
+    },
+    include: {
+      Recipient: true,
+    },
+  });
+
+  const removedFields = existingFields.filter(
+    (existingField) =>
+      !fields.find(
+        (field) =>
+          field.id === existingField.id || field.signerEmail === existingField.Recipient?.email,
+      ),
+  );
+
+  const linkedFields = fields
+    .map((field) => {
+      const existing = existingFields.find((existingField) => existingField.id === field.id);
+
+      return {
+        ...field,
+        ...existing,
+      };
+    })
+    .filter((field) => {
+      return (
+        field.Recipient?.sendStatus !== SendStatus.SENT &&
+        field.Recipient?.signingStatus !== SigningStatus.SIGNED
+      );
+    });
+
+  const persistedFields = await prisma.$transaction(
+    linkedFields.map((field) =>
+      field.id
+        ? prisma.field.update({
+            where: {
+              id: field.id,
+              recipientId: field.recipientId,
+              documentId,
+            },
+            data: {
+              type: field.type,
+              page: field.pageNumber,
+              positionX: field.pageX,
+              positionY: field.pageY,
+              width: field.pageWidth,
+              height: field.pageHeight,
+            },
+          })
+        : prisma.field.create({
+            data: {
+              type: field.type!,
+              page: field.pageNumber,
+              positionX: field.pageX,
+              positionY: field.pageY,
+              width: field.pageWidth,
+              height: field.pageHeight,
+              customText: '',
+              inserted: false,
+
+              Document: {
+                connect: {
+                  id: document.id,
+                },
+              },
+              Recipient: {
+                connect: {
+                  documentId_email: {
+                    documentId: document.id,
+                    email: field.signerEmail,
+                  },
+                },
+              },
+            },
+          }),
+    ),
+  );
+
+  if (removedFields.length > 0) {
+    await prisma.field.deleteMany({
+      where: {
+        id: {
+          in: removedFields.map((field) => field.id),
+        },
+      },
+    });
+  }
+
+  return persistedFields;
+};
--- a/packages/lib/server-only/recipient/get-recipients-for-document.ts
+++ b/packages/lib/server-only/recipient/get-recipients-for-document.ts
@ -0,0 +1,22 @@
+import { prisma } from '@documenso/prisma';
+
+export interface GetRecipientsForDocumentOptions {
+  documentId: number;
+  userId: number;
+}
+
+export const getRecipientsForDocument = async ({
+  documentId,
+  userId,
+}: GetRecipientsForDocumentOptions) => {
+  const recipients = await prisma.recipient.findMany({
+    where: {
+      documentId,
+      Document: {
+        userId,
+      },
+    },
+  });
+
+  return recipients;
+};
--- a/packages/lib/server-only/recipient/set-recipients-for-document.ts
+++ b/packages/lib/server-only/recipient/set-recipients-for-document.ts
@ -0,0 +1,100 @@
+import { nanoid } from 'nanoid';
+
+import { prisma } from '@documenso/prisma';
+import { SendStatus, SigningStatus } from '@documenso/prisma/client';
+
+export interface SetRecipientsForDocumentOptions {
+  userId: number;
+  documentId: number;
+  recipients: {
+    id?: number | null;
+    email: string;
+    name: string;
+  }[];
+}
+
+export const setRecipientsForDocument = async ({
+  userId,
+  documentId,
+  recipients,
+}: SetRecipientsForDocumentOptions) => {
+  const document = await prisma.document.findFirst({
+    where: {
+      id: documentId,
+      userId,
+    },
+  });
+
+  if (!document) {
+    throw new Error('Document not found');
+  }
+
+  const existingRecipients = await prisma.recipient.findMany({
+    where: {
+      documentId,
+    },
+  });
+
+  const removedRecipients = existingRecipients.filter(
+    (existingRecipient) =>
+      !recipients.find(
+        (recipient) =>
+          recipient.id === existingRecipient.id || recipient.email === existingRecipient.email,
+      ),
+  );
+
+  const linkedRecipients = recipients
+    .map((recipient) => {
+      const existing = existingRecipients.find(
+        (existingRecipient) =>
+          existingRecipient.id === recipient.id || existingRecipient.email === recipient.email,
+      );
+
+      return {
+        ...recipient,
+        ...existing,
+      };
+    })
+    .filter((recipient) => {
+      return (
+        recipient.sendStatus !== SendStatus.SENT && recipient.signingStatus !== SigningStatus.SIGNED
+      );
+    });
+
+  const persistedRecipients = await prisma.$transaction(
+    linkedRecipients.map((recipient) =>
+      recipient.id
+        ? prisma.recipient.update({
+            where: {
+              id: recipient.id,
+              documentId,
+            },
+            data: {
+              name: recipient.name,
+              email: recipient.email,
+              documentId,
+            },
+          })
+        : prisma.recipient.create({
+            data: {
+              name: recipient.name,
+              email: recipient.email,
+              token: nanoid(),
+              documentId,
+            },
+          }),
+    ),
+  );
+
+  if (removedRecipients.length > 0) {
+    await prisma.recipient.deleteMany({
+      where: {
+        id: {
+          in: removedRecipients.map((recipient) => recipient.id),
+        },
+      },
+    });
+  }
+
+  return persistedRecipients;
+};
--- a/packages/prisma/migrations/20230617040606_add_name_field/migration.sql
+++ b/packages/prisma/migrations/20230617040606_add_name_field/migration.sql
@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "FieldType" ADD VALUE 'NAME';
--- a/packages/prisma/migrations/20230617041623_add_email_field/migration.sql
+++ b/packages/prisma/migrations/20230617041623_add_email_field/migration.sql
@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "FieldType" ADD VALUE 'EMAIL';
--- a/packages/prisma/migrations/20230621130930_add_width_and_height_for_fields/migration.sql
+++ b/packages/prisma/migrations/20230621130930_add_width_and_height_for_fields/migration.sql
@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "Field" ADD COLUMN     "height" INTEGER NOT NULL DEFAULT -1,
+ADD COLUMN     "width" INTEGER NOT NULL DEFAULT -1;
--- a/packages/prisma/migrations/20230621131348_add_document_id_and_email_index/migration.sql
+++ b/packages/prisma/migrations/20230621131348_add_document_id_and_email_index/migration.sql
@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[documentId,email]` on the table `Recipient` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateIndex
+CREATE UNIQUE INDEX "Recipient_documentId_email_key" ON "Recipient"("documentId", "email");
--- a/packages/prisma/migrations/20230621133446_migrate_field_position_to_float/migration.sql
+++ b/packages/prisma/migrations/20230621133446_migrate_field_position_to_float/migration.sql
@ -0,0 +1,9 @@
+-- AlterTable
+ALTER TABLE "Field" ALTER COLUMN "positionX" SET DEFAULT 0,
+ALTER COLUMN "positionX" SET DATA TYPE DECIMAL(65,30),
+ALTER COLUMN "positionY" SET DEFAULT 0,
+ALTER COLUMN "positionY" SET DATA TYPE DECIMAL(65,30),
+ALTER COLUMN "height" SET DEFAULT -1,
+ALTER COLUMN "height" SET DATA TYPE DECIMAL(65,30),
+ALTER COLUMN "width" SET DEFAULT -1,
+ALTER COLUMN "width" SET DATA TYPE DECIMAL(65,30);
--- a/packages/prisma/schema.prisma
+++ b/packages/prisma/schema.prisma
@ -1,5 +1,6 @@
 generator client {
  provider = "prisma-client-js"
+  previewFeatures = ["extendedWhereUnique", "jsonProtocol"]
 }

 datasource db {
@ -123,11 +124,15 @@ model Recipient {
  Document      Document      @relation(fields: [documentId], references: [id], onDelete: Cascade)
  Field         Field[]
  Signature     Signature[]
+
+  @@unique([documentId, email])
 }

 enum FieldType {
  SIGNATURE
  FREE_SIGNATURE
+  NAME
+  EMAIL
  DATE
  TEXT
 }
@ -138,8 +143,10 @@ model Field {
  recipientId Int?
  type        FieldType
  page        Int
-  positionX   Int        @default(0)
-  positionY   Int        @default(0)
+  positionX   Decimal    @default(0)
+  positionY   Decimal    @default(0)
+  width       Decimal    @default(-1)
+  height      Decimal    @default(-1)
  customText  String
  inserted    Boolean
  Document    Document   @relation(fields: [documentId], references: [id], onDelete: Cascade)
--- a/packages/prisma/types/document-with-recipient.ts
+++ b/packages/prisma/types/document-with-recipient.ts
@ -0,0 +1,5 @@
+import { Document, Recipient } from '@documenso/prisma/client';
+
+export type DocumentWithReciepient = Document & {
+  Recipient: Recipient[];
+};
--- a/packages/tailwind-config/index.cjs
+++ b/packages/tailwind-config/index.cjs
@ -44,6 +44,10 @@ module.exports = {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
+        widget: {
+          DEFAULT: 'hsl(var(--widget))',
+          // foreground: 'hsl(var(--widget-foreground))',
+        },
        documenso: {
          DEFAULT: '#A2E771',
          50: '#FFFFFF',
@ -72,6 +76,20 @@ module.exports = {
          900: '#52514a',
          950: '#2a2925',
        },
+        water: {
+          DEFAULT: '#d7e4f3',
+          50: '#f3f6fb',
+          100: '#e3ebf6',
+          200: '#d7e4f3',
+          300: '#abc7e5',
+          400: '#82abd8',
+          500: '#658ecc',
+          600: '#5175bf',
+          700: '#4764ae',
+          800: '#3e538f',
+          900: '#364772',
+          950: '#252d46',
+        },
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
@ -98,5 +116,5 @@ module.exports = {
      },
    },
  },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
 };
--- a/packages/tailwind-config/package.json
+++ b/packages/tailwind-config/package.json
@ -10,7 +10,9 @@
    "tailwindcss": "^3.2.7",
    "tailwindcss-animate": "^1.0.5"
  },
-  "devDependencies": {},
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9"
+  },
  "publishConfig": {
    "access": "public"
  }
--- a/packages/trpc/package.json
+++ b/packages/trpc/package.json
@ -7,6 +7,8 @@
  "scripts": {
  },
  "dependencies": {
+    "@documenso/lib": "*",
+    "@documenso/prisma": "*",
    "@tanstack/react-query": "^4.29.5",
    "@trpc/client": "^10.25.1",
    "@trpc/next": "^10.25.1",
--- a/packages/trpc/server/document-router/router.ts
+++ b/packages/trpc/server/document-router/router.ts
@ -0,0 +1,77 @@
+import { TRPCError } from '@trpc/server';
+
+import { sendDocument } from '@documenso/lib/server-only/document/send-document';
+import { setFieldsForDocument } from '@documenso/lib/server-only/field/set-fields-for-document';
+import { setRecipientsForDocument } from '@documenso/lib/server-only/recipient/set-recipients-for-document';
+
+import { authenticatedProcedure, router } from '../trpc';
+import {
+  ZSendDocumentMutationSchema,
+  ZSetFieldsForDocumentMutationSchema,
+  ZSetRecipientsForDocumentMutationSchema,
+} from './schema';
+
+export const documentRouter = router({
+  setRecipientsForDocument: authenticatedProcedure
+    .input(ZSetRecipientsForDocumentMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        const { documentId, recipients } = input;
+
+        return await setRecipientsForDocument({
+          userId: ctx.user.id,
+          documentId,
+          recipients,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message:
+            'We were unable to set the recipients for this document. Please try again later.',
+        });
+      }
+    }),
+
+  setFieldsForDocument: authenticatedProcedure
+    .input(ZSetFieldsForDocumentMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        const { documentId, fields } = input;
+
+        return await setFieldsForDocument({
+          userId: ctx.user.id,
+          documentId,
+          fields,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to set the fields for this document. Please try again later.',
+        });
+      }
+    }),
+
+  sendDocument: authenticatedProcedure
+    .input(ZSendDocumentMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        const { documentId } = input;
+
+        return await sendDocument({
+          userId: ctx.user.id,
+          documentId,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to send this document. Please try again later.',
+        });
+      }
+    }),
+});
--- a/packages/trpc/server/document-router/schema.ts
+++ b/packages/trpc/server/document-router/schema.ts
@ -0,0 +1,44 @@
+import { z } from 'zod';
+
+import { FieldType } from '@documenso/prisma/client';
+
+export const ZSetRecipientsForDocumentMutationSchema = z.object({
+  documentId: z.number(),
+  recipients: z.array(
+    z.object({
+      id: z.number().nullish(),
+      email: z.string().min(1).email(),
+      name: z.string(),
+    }),
+  ),
+});
+
+export type TSetRecipientsForDocumentMutationSchema = z.infer<
+  typeof ZSetRecipientsForDocumentMutationSchema
+>;
+
+export const ZSetFieldsForDocumentMutationSchema = z.object({
+  documentId: z.number(),
+  fields: z.array(
+    z.object({
+      id: z.number().nullish(),
+      type: z.nativeEnum(FieldType),
+      signerEmail: z.string().min(1),
+      pageNumber: z.number().min(1),
+      pageX: z.number().min(0),
+      pageY: z.number().min(0),
+      pageWidth: z.number().min(0),
+      pageHeight: z.number().min(0),
+    }),
+  ),
+});
+
+export type TSetFieldsForDocumentMutationSchema = z.infer<
+  typeof ZSetFieldsForDocumentMutationSchema
+>;
+
+export const ZSendDocumentMutationSchema = z.object({
+  documentId: z.number(),
+});
+
+export type TSendDocumentMutationSchema = z.infer<typeof ZSendDocumentMutationSchema>;
--- a/packages/trpc/server/router.ts
+++ b/packages/trpc/server/router.ts
@ -1,4 +1,5 @@
 import { authRouter } from './auth-router/router';
+import { documentRouter } from './document-router/router';
 import { profileRouter } from './profile-router/router';
 import { procedure, router } from './trpc';

@ -6,6 +7,7 @@ export const appRouter = router({
  hello: procedure.query(() => 'Hello, world!'),
  auth: authRouter,
  profile: profileRouter,
+  document: documentRouter,
 });

 export type AppRouter = typeof appRouter;
--- a/packages/tsconfig/base.json
+++ b/packages/tsconfig/base.json
@ -16,7 +16,8 @@
    "preserveWatchOutput": true,
    "skipLibCheck": true,
    "strict": true,
-    "target": "ES2018"
+    "target": "ES2018",
+    "types": ["@documenso/tsconfig/process-env.d.ts"]
  },
  "exclude": ["node_modules"]
 }
--- a/packages/tsconfig/process-env.d.ts
+++ b/packages/tsconfig/process-env.d.ts
@ -0,0 +1,36 @@
+declare namespace NodeJS {
+  export interface ProcessEnv {
+    NEXT_PUBLIC_SITE_URL?: string;
+
+    NEXT_PRIVATE_DATABASE_URL: string;
+
+    NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID: string;
+    NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID: string;
+
+    NEXT_PRIVATE_STRIPE_API_KEY: string;
+    NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET: string;
+
+    NEXT_PUBLIC_SUBSCRIPTIONS_ENABLED: string;
+
+    NEXT_PRIVATE_SMTP_TRANSPORT?: 'mailchannels' | 'smtp-auth' | 'smtp-api';
+
+    NEXT_PRIVATE_MAILCHANNELS_API_KEY?: string;
+    NEXT_PRIVATE_MAILCHANNELS_DKIM_DOMAIN?: string;
+    NEXT_PRIVATE_MAILCHANNELS_DKIM_SELECTOR?: string;
+    NEXT_PRIVATE_MAILCHANNELS_DKIM_PRIVATE_KEY?: string;
+    NEXT_PRIVATE_MAILCHANNELS_ENDPOINT?: string;
+
+    NEXT_PRIVATE_SMTP_HOST?: string;
+    NEXT_PRIVATE_SMTP_PORT?: string;
+    NEXT_PRIVATE_SMTP_USERNAME?: string;
+    NEXT_PRIVATE_SMTP_PASSWORD?: string;
+
+    NEXT_PRIVATE_SMTP_APIKEY_USER?: string;
+    NEXT_PRIVATE_SMTP_APIKEY?: string;
+
+    NEXT_PRIVATE_SMTP_SECURE?: string;
+
+    NEXT_PRIVATE_SMTP_FROM_NAME?: string;
+    NEXT_PRIVATE_SMTP_FROM_ADDRESS?: string;
+  }
+}
--- a/packages/ui/primitives/card.tsx
+++ b/packages/ui/primitives/card.tsx
@ -10,22 +10,10 @@ export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
  spotlight?: boolean;
  gradient?: boolean;
  degrees?: number;
-  lightMode?: boolean;
 };

 const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  (
-    {
-      className,
-      children,
-      gradient = false,
-      spotlight = false,
-      degrees = 120,
-      lightMode = true,
-      ...props
-    },
-    ref,
-  ) => {
+  ({ className, children, gradient = false, spotlight = false, degrees = 120, ...props }, ref) => {
    const mouseX = useMotionValue(0);
    const mouseY = useMotionValue(0);

@ -46,12 +34,15 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
          } as React.CSSProperties
        }
        className={cn(
-          'bg-background text-foreground dark:hover:border-documenso group relative rounded-lg border-2 backdrop-blur-[2px]',
+          'bg-background text-foreground group relative rounded-lg border-2 backdrop-blur-[2px]',
          {
            'gradient-border-mask before:pointer-events-none before:absolute before:-inset-[2px] before:rounded-lg before:p-[2px] before:[background:linear-gradient(var(--card-gradient-degrees),theme(colors.documenso.DEFAULT/50%)_5%,theme(colors.border/80%)_30%)]':
-              gradient && lightMode,
+              gradient,
+            'dark:gradient-border-mask before:pointer-events-none before:absolute before:-inset-[2px] before:rounded-lg before:p-[2px] before:[background:linear-gradient(var(--card-gradient-degrees),theme(colors.documenso.DEFAULT/70%)_5%,theme(colors.border/80%)_30%)]':
+              gradient,
            'shadow-[0_0_0_4px_theme(colors.gray.100/70%),0_0_0_1px_theme(colors.gray.100/70%),0_0_0_0.5px_theme(colors.primary.DEFAULT/70%)]':
-              lightMode,
+              true,
+            'dark:shadow-[0]': true,
          },
          className,
        )}
--- a/packages/ui/primitives/tooltip.tsx
+++ b/packages/ui/primitives/tooltip.tsx
@ -16,15 +16,17 @@ const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      'bg-popover text-popover-foreground animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md',
-      className,
-    )}
-    {...props}
-  />
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'bg-popover text-popover-foreground animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md',
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
 ));

 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
				`@ -0,0 +1 @@`
				`declare module '@documenso/tailwind-config';`
				`@ -0,0 +1 @@`
				`export { render, renderAsync } from '@react-email/components';`