chore: merge main, resolve biome formatting conflicts

Merge origin/main into feat/external-2fa-codes. Resolve formatting
conflicts caused by biome rollout; preserve both feature streams:
PR's external 2FA token + signing-session 2FA proof additions plus
main's RateLimit/RecipientExpired/signingReminders/date-auto-insert.

In complete-document-with-token.ts, drop the duplicate early
field-fetching block introduced when main moved that logic later
with date auto-insert support; keep the EXTERNAL_TWO_FACTOR_AUTH
check using derivedRecipientActionAuth.

packages/email/template-components/template-access-auth-2fa.tsx

@@ -27,25 +27,24 @@ export const TemplateAccessAuth2FA = ({
       <Img src={getAssetUrl('/static/document.png')} alt="Document" className="mx-auto h-12 w-12" />
 
       <Section className="mt-8">
-        <Heading className="text-center text-lg font-semibold text-slate-900">
+        <Heading className="text-center font-semibold text-lg text-slate-900">
           <Trans>Verification Code Required</Trans>
         </Heading>
 
         <Text className="mt-2 text-center text-slate-700">
           <Trans>
-            Hi {userName}, you need to enter a verification code to complete the document "
-            {documentTitle}".
+            Hi {userName}, you need to enter a verification code to complete the document "{documentTitle}".
           </Trans>
         </Text>
 
         <Section className="mt-6 rounded-lg bg-slate-50 p-6 text-center">
-          <Text className="mb-2 text-sm font-medium text-slate-600">
+          <Text className="mb-2 font-medium text-slate-600 text-sm">
             <Trans>Your verification code:</Trans>
           </Text>
-          <Text className="text-2xl font-bold tracking-wider text-slate-900">{code}</Text>
+          <Text className="font-bold text-2xl text-slate-900 tracking-wider">{code}</Text>
         </Section>
 
-        <Text className="mt-4 text-center text-sm text-slate-600">
+        <Text className="mt-4 text-center text-slate-600 text-sm">
           <Plural
             value={expiresInMinutes}
             one="This code will expire in # minute."
@@ -53,10 +52,8 @@ export const TemplateAccessAuth2FA = ({
           />
         </Text>
 
-        <Text className="mt-4 text-center text-sm text-slate-500">
-          <Trans>
-            If you didn't request this verification code, you can safely ignore this email.
-          </Trans>
+        <Text className="mt-4 text-center text-slate-500 text-sm">
+          <Trans>If you didn't request this verification code, you can safely ignore this email.</Trans>
         </Text>
       </Section>
     </div>

packages/email/template-components/template-confirmation-email.tsx

@@ -8,36 +8,30 @@ export type TemplateConfirmationEmailProps = {
   assetBaseUrl: string;
 };
 
-export const TemplateConfirmationEmail = ({
-  confirmationLink,
-  assetBaseUrl,
-}: TemplateConfirmationEmailProps) => {
+export const TemplateConfirmationEmail = ({ confirmationLink, assetBaseUrl }: TemplateConfirmationEmailProps) => {
   return (
     <>
       <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
       <Section className="flex-row items-center justify-center">
-        <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
+        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-lg text-primary">
           <Trans>Welcome to Documenso!</Trans>
         </Text>
 
         <Text className="my-1 text-center text-base text-slate-400">
-          <Trans>
-            Before you get started, please confirm your email address by clicking the button below:
-          </Trans>
+          <Trans>Before you get started, please confirm your email address by clicking the button below:</Trans>
         </Text>
 
-        <Section className="mb-6 mt-8 text-center">
+        <Section className="mt-8 mb-6 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"
+            className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center font-medium text-black text-sm no-underline"
             href={confirmationLink}
           >
             <Trans>Confirm email</Trans>
           </Button>
-          <Text className="mt-8 text-center text-sm italic text-slate-400">
+          <Text className="mt-8 text-center text-slate-400 text-sm italic">
             <Trans>
-              You can also copy and paste this link into your browser: {confirmationLink} (link
-              expires in 1 hour)
+              You can also copy and paste this link into your browser: {confirmationLink} (link expires in 1 hour)
             </Trans>
           </Text>
         </Section>

packages/email/template-components/template-custom-message-body.tsx

@@ -18,10 +18,7 @@ export const TemplateCustomMessageBody = ({ text }: TemplateCustomMessageBodyPro
   const paragraphs = normalized.split('\n\n');
 
   return paragraphs.map((paragraph, i) => (
-    <p
-      key={`p-${i}`}
-      className="whitespace-pre-line break-words font-sans text-base text-slate-400"
-    >
+    <p key={`p-${i}`} className="whitespace-pre-line break-words font-sans text-base text-slate-400">
       {paragraph.split('\n').map((line, j) => (
         <React.Fragment key={`line-${i}-${j}`}>
           {j > 0 && <br />}

packages/email/template-components/template-document-cancel.tsx

@@ -22,7 +22,7 @@ export const TemplateDocumentCancel = ({
       <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
       <Section>
-        <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
+        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-lg text-primary">
           <Trans>
             {inviterName} has cancelled the document
             <br />"{documentName}"

packages/email/template-components/template-document-completed.tsx

@@ -27,17 +27,14 @@ export const TemplateDocumentCompleted = ({
       <Section>
         <Section className="mb-4">
           <Column align="center">
-            <Text className="text-base font-semibold text-[#7AC455]">
-              <Img
-                src={getAssetUrl('/static/completed.png')}
-                className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
-              />
+            <Text className="font-semibold text-[#7AC455] text-base">
+              <Img src={getAssetUrl('/static/completed.png')} className="-mt-0.5 mr-2 inline h-7 w-7 align-middle" />
               <Trans>Completed</Trans>
             </Text>
           </Column>
         </Section>
 
-        <Text className="text-primary mb-0 text-center text-lg font-semibold">
+        <Text className="mb-0 text-center font-semibold text-lg text-primary">
           {customBody || <Trans>“{documentName}” was signed by all signers</Trans>}
         </Text>
 
@@ -45,15 +42,12 @@ export const TemplateDocumentCompleted = ({
           <Trans>Continue by downloading the document.</Trans>
         </Text>
 
-        <Section className="mb-6 mt-8 text-center">
+        <Section className="mt-8 mb-6 text-center">
           <Button
-            className="rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+            className="rounded-lg border border-slate-200 border-solid px-4 py-2 text-center font-medium text-black text-sm no-underline"
             href={downloadLink}
           >
-            <Img
-              src={getAssetUrl('/static/download.png')}
-              className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
-            />
+            <Img src={getAssetUrl('/static/download.png')} className="mr-2 mb-0.5 inline h-5 w-5 align-middle" />
             <Trans>Download</Trans>
           </Button>
         </Section>

packages/email/template-components/template-document-image.tsx

@@ -16,7 +16,7 @@ export const TemplateDocumentImage = ({ assetBaseUrl, className }: TemplateDocum
         <Column />
 
         <Column>
-          <Img className="h-42 mx-auto" src={getAssetUrl('/static/document.png')} alt="Documenso" />
+          <Img className="mx-auto h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
         </Column>
 
         <Column />

packages/email/template-components/template-document-invite.tsx

@@ -1,9 +1,8 @@
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { OrganisationType, RecipientRole } from '@prisma/client';
-import { P, match } from 'ts-pattern';
-
-import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import { match, P } from 'ts-pattern';
 
 import { Button, Section, Text } from '../components';
 import { TemplateDocumentImage } from './template-document-image';
@@ -41,7 +40,7 @@ export const TemplateDocumentInvite = ({
       <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
       <Section>
-        <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
+        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-lg text-primary">
           {match({ selfSigner, organisationType, includeSenderDetails, teamName })
             .with({ selfSigner: true }, () => (
               <Trans>
@@ -57,8 +56,7 @@ export const TemplateDocumentInvite = ({
               },
               () => (
                 <Trans>
-                  {inviterName} on behalf of "{teamName}" has invited you to{' '}
-                  {_(actionVerb).toLowerCase()}
+                  {inviterName} on behalf of "{teamName}" has invited you to {_(actionVerb).toLowerCase()}
                   <br />"{documentName}"
                 </Trans>
               ),
@@ -83,15 +81,13 @@ export const TemplateDocumentInvite = ({
             .with(RecipientRole.VIEWER, () => <Trans>Continue by viewing the document.</Trans>)
             .with(RecipientRole.APPROVER, () => <Trans>Continue by approving the document.</Trans>)
             .with(RecipientRole.CC, () => '')
-            .with(RecipientRole.ASSISTANT, () => (
-              <Trans>Continue by assisting with the document.</Trans>
-            ))
+            .with(RecipientRole.ASSISTANT, () => <Trans>Continue by assisting with the document.</Trans>)
             .exhaustive()}
         </Text>
 
-        <Section className="mb-6 mt-8 text-center">
+        <Section className="mt-8 mb-6 text-center">
           <Button
-            className="bg-documenso-500 text-sbase inline-flex items-center justify-center rounded-lg px-6 py-3 text-center font-medium text-black no-underline"
+            className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center font-medium text-black text-sbase no-underline"
             href={signDocumentLink}
           >
             {match(role)

packages/email/template-components/template-document-pending.tsx

@@ -8,10 +8,7 @@ export interface TemplateDocumentPendingProps {
   assetBaseUrl: string;
 }
 
-export const TemplateDocumentPending = ({
-  documentName,
-  assetBaseUrl,
-}: TemplateDocumentPendingProps) => {
+export const TemplateDocumentPending = ({ documentName, assetBaseUrl }: TemplateDocumentPendingProps) => {
   const getAssetUrl = (path: string) => {
     return new URL(path, assetBaseUrl).toString();
   };
@@ -23,21 +20,18 @@ export const TemplateDocumentPending = ({
       <Section>
         <Section className="mb-4">
           <Column align="center">
-            <Text className="text-base font-semibold text-blue-500">
-              <Img
-                src={getAssetUrl('/static/clock.png')}
-                className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
-              />
+            <Text className="font-semibold text-base text-blue-500">
+              <Img src={getAssetUrl('/static/clock.png')} className="-mt-0.5 mr-2 inline h-7 w-7 align-middle" />
               <Trans>Waiting for others</Trans>
             </Text>
           </Column>
         </Section>
 
-        <Text className="text-primary mb-0 text-center text-lg font-semibold">
+        <Text className="mb-0 text-center font-semibold text-lg text-primary">
           <Trans>“{documentName}” has been signed</Trans>
         </Text>
 
-        <Text className="mx-auto mb-6 mt-1 max-w-[80%] text-center text-base text-slate-400">
+        <Text className="mx-auto mt-1 mb-6 max-w-[80%] text-center text-base text-slate-400">
           <Trans>
             We're still waiting for other signers to sign this document.
             <br />

packages/email/template-components/template-document-recipient-signed.tsx

@@ -29,23 +29,20 @@ export const TemplateDocumentRecipientSigned = ({
       <Section>
         <Section className="mb-4">
           <Column align="center">
-            <Text className="text-base font-semibold text-[#7AC455]">
-              <Img
-                src={getAssetUrl('/static/completed.png')}
-                className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
-              />
+            <Text className="font-semibold text-[#7AC455] text-base">
+              <Img src={getAssetUrl('/static/completed.png')} className="-mt-0.5 mr-2 inline h-7 w-7 align-middle" />
               <Trans>Completed</Trans>
             </Text>
           </Column>
         </Section>
 
-        <Text className="text-primary mb-0 text-center text-lg font-semibold">
+        <Text className="mb-0 text-center font-semibold text-lg text-primary">
           <Trans>
             {recipientReference} has signed "{documentName}"
           </Trans>
         </Text>
 
-        <Text className="mx-auto mb-6 mt-1 max-w-[80%] text-center text-base text-slate-400">
+        <Text className="mx-auto mt-1 mb-6 max-w-[80%] text-center text-base text-slate-400">
           <Trans>{recipientReference} has completed signing the document.</Trans>
         </Text>
       </Section>

packages/email/template-components/template-document-rejected.tsx

@@ -17,7 +17,7 @@ export function TemplateDocumentRejected({
 }: TemplateDocumentRejectedProps) {
   return (
     <div className="mt-4">
-      <Heading className="mb-4 text-center text-2xl font-semibold text-slate-800">
+      <Heading className="mb-4 text-center font-semibold text-2xl text-slate-800">
         <Trans>Document Rejected</Trans>
       </Heading>
 
@@ -39,7 +39,7 @@ export function TemplateDocumentRejected({
 
       <Button
         href={documentUrl}
-        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"
+        className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center font-medium text-black text-sm no-underline"
       >
         <Trans>View Document</Trans>
       </Button>

packages/email/template-components/template-document-rejection-confirmed.tsx

@@ -18,11 +18,11 @@ export function TemplateDocumentRejectionConfirmed({
   return (
     <Container>
       <Section>
-        <Heading className="text-2xl font-semibold">
+        <Heading className="font-semibold text-2xl">
           <Trans>Rejection Confirmed</Trans>
         </Heading>
 
-        <Text className="text-primary text-base">
+        <Text className="text-base text-primary">
           <Trans>
             This email confirms that you have rejected the document{' '}
             <strong className="font-bold">"{documentName}"</strong> sent by {documentOwnerName}.
@@ -30,16 +30,15 @@ export function TemplateDocumentRejectionConfirmed({
         </Text>
 
         {reason && (
-          <Text className="text-base font-medium text-slate-400">
+          <Text className="font-medium text-base text-slate-400">
             <Trans>Rejection reason: {reason}</Trans>
           </Text>
         )}
 
         <Text className="text-base">
           <Trans>
-            The document owner has been notified of this rejection. No further action is required
-            from you at this time. The document owner may contact you with any questions regarding
-            this rejection.
+            The document owner has been notified of this rejection. No further action is required from you at this time.
+            The document owner may contact you with any questions regarding this rejection.
           </Trans>
         </Text>
       </Section>

packages/email/template-components/template-document-reminder.tsx

@@ -0,0 +1,74 @@
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { RecipientRole } from '@prisma/client';
+import { match } from 'ts-pattern';
+
+import { Button, Section, Text } from '../components';
+import { TemplateDocumentImage } from './template-document-image';
+
+export interface TemplateDocumentReminderProps {
+  recipientName: string;
+  documentName: string;
+  signDocumentLink: string;
+  assetBaseUrl: string;
+  role: RecipientRole;
+}
+
+export const TemplateDocumentReminder = ({
+  recipientName,
+  documentName,
+  signDocumentLink,
+  assetBaseUrl,
+  role,
+}: TemplateDocumentReminderProps) => {
+  const { _ } = useLingui();
+
+  const { actionVerb } = RECIPIENT_ROLES_DESCRIPTION[role];
+
+  return (
+    <>
+      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
+
+      <Section>
+        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-lg text-primary">
+          <Trans>
+            Reminder: Please {_(actionVerb).toLowerCase()} your document
+            <br />"{documentName}"
+          </Trans>
+        </Text>
+
+        <Text className="my-1 text-center text-base text-slate-400">
+          <Trans>Hi {recipientName},</Trans>
+        </Text>
+
+        <Text className="my-1 text-center text-base text-slate-400">
+          {match(role)
+            .with(RecipientRole.SIGNER, () => <Trans>Continue by signing the document.</Trans>)
+            .with(RecipientRole.VIEWER, () => <Trans>Continue by viewing the document.</Trans>)
+            .with(RecipientRole.APPROVER, () => <Trans>Continue by approving the document.</Trans>)
+            .with(RecipientRole.CC, () => '')
+            .with(RecipientRole.ASSISTANT, () => <Trans>Continue by assisting with the document.</Trans>)
+            .exhaustive()}
+        </Text>
+
+        <Section className="mt-8 mb-6 text-center">
+          <Button
+            className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center font-medium text-black text-sm no-underline"
+            href={signDocumentLink}
+          >
+            {match(role)
+              .with(RecipientRole.SIGNER, () => <Trans>Sign Document</Trans>)
+              .with(RecipientRole.VIEWER, () => <Trans>View Document</Trans>)
+              .with(RecipientRole.APPROVER, () => <Trans>Approve Document</Trans>)
+              .with(RecipientRole.CC, () => '')
+              .with(RecipientRole.ASSISTANT, () => <Trans>Assist Document</Trans>)
+              .exhaustive()}
+          </Button>
+        </Section>
+      </Section>
+    </>
+  );
+};
+
+export default TemplateDocumentReminder;

packages/email/template-components/template-document-self-signed.tsx

@@ -1,6 +1,5 @@
-import { Trans } from '@lingui/react/macro';
-
 import { env } from '@documenso/lib/utils/env';
+import { Trans } from '@lingui/react/macro';
 
 import { Button, Column, Img, Link, Section, Text } from '../components';
 import { TemplateDocumentImage } from './template-document-image';
@@ -10,10 +9,7 @@ export interface TemplateDocumentSelfSignedProps {
   assetBaseUrl: string;
 }
 
-export const TemplateDocumentSelfSigned = ({
-  documentName,
-  assetBaseUrl,
-}: TemplateDocumentSelfSignedProps) => {
+export const TemplateDocumentSelfSigned = ({ documentName, assetBaseUrl }: TemplateDocumentSelfSignedProps) => {
   const NEXT_PUBLIC_WEBAPP_URL = env('NEXT_PUBLIC_WEBAPP_URL');
 
   const signUpUrl = `${NEXT_PUBLIC_WEBAPP_URL ?? 'http://localhost:3000'}/signup`;
@@ -29,27 +25,24 @@ export const TemplateDocumentSelfSigned = ({
       <Section className="flex-row items-center justify-center">
         <Section>
           <Column align="center">
-            <Text className="text-base font-semibold text-[#7AC455]">
-              <Img
-                src={getAssetUrl('/static/completed.png')}
-                className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
-              />
+            <Text className="font-semibold text-[#7AC455] text-base">
+              <Img src={getAssetUrl('/static/completed.png')} className="-mt-0.5 mr-2 inline h-7 w-7 align-middle" />
               <Trans>Completed</Trans>
             </Text>
           </Column>
         </Section>
 
-        <Text className="text-primary mb-0 mt-6 text-center text-lg font-semibold">
+        <Text className="mt-6 mb-0 text-center font-semibold text-lg text-primary">
           <Trans>You have signed “{documentName}”</Trans>
         </Text>
 
-        <Text className="mx-auto mb-6 mt-1 max-w-[80%] text-center text-base text-slate-400">
+        <Text className="mx-auto mt-1 mb-6 max-w-[80%] text-center text-base text-slate-400">
           <Trans>
             Create a{' '}
             <Link
               href={signUpUrl}
               target="_blank"
-              className="text-documenso-700 hover:text-documenso-600 whitespace-nowrap"
+              className="whitespace-nowrap text-documenso-700 hover:text-documenso-600"
             >
               free account
             </Link>{' '}
@@ -57,26 +50,20 @@ export const TemplateDocumentSelfSigned = ({
           </Trans>
         </Text>
 
-        <Section className="mb-6 mt-8 text-center">
+        <Section className="mt-8 mb-6 text-center">
           <Button
             href={signUpUrl}
-            className="mr-4 rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+            className="mr-4 rounded-lg border border-slate-200 border-solid px-4 py-2 text-center font-medium text-black text-sm no-underline"
           >
-            <Img
-              src={getAssetUrl('/static/user-plus.png')}
-              className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
-            />
+            <Img src={getAssetUrl('/static/user-plus.png')} className="mr-2 mb-0.5 inline h-5 w-5 align-middle" />
             <Trans>Create account</Trans>
           </Button>
 
           <Button
-            className="rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+            className="rounded-lg border border-slate-200 border-solid px-4 py-2 text-center font-medium text-black text-sm no-underline"
             href="https://documenso.com/pricing"
           >
-            <Img
-              src={getAssetUrl('/static/review.png')}
-              className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
-            />
+            <Img src={getAssetUrl('/static/review.png')} className="mr-2 mb-0.5 inline h-5 w-5 align-middle" />
             <Trans>View plans</Trans>
           </Button>
         </Section>

packages/email/template-components/template-document-super-delete.tsx

@@ -9,28 +9,24 @@ export interface TemplateDocumentDeleteProps {
   assetBaseUrl: string;
 }
 
-export const TemplateDocumentDelete = ({
-  reason,
-  documentName,
-  assetBaseUrl,
-}: TemplateDocumentDeleteProps) => {
+export const TemplateDocumentDelete = ({ reason, documentName, assetBaseUrl }: TemplateDocumentDeleteProps) => {
   return (
     <>
       <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
       <Section>
-        <Text className="text-primary mb-0 mt-6 text-left text-lg font-semibold">
+        <Text className="mt-6 mb-0 text-left font-semibold text-lg text-primary">
           <Trans>Your document has been deleted by an admin!</Trans>
         </Text>
 
-        <Text className="mx-auto mb-6 mt-1 text-left text-base text-slate-400">
+        <Text className="mx-auto mt-1 mb-6 text-left text-base text-slate-400">
           <Trans>"{documentName}" has been deleted by an admin.</Trans>
         </Text>
 
-        <Text className="mx-auto mb-6 mt-1 text-left text-base text-slate-400">
+        <Text className="mx-auto mt-1 mb-6 text-left text-base text-slate-400">
           <Trans>
-            This document can not be recovered, if you would like to dispute the reason for future
-            documents please contact support.
+            This document can not be recovered, if you would like to dispute the reason for future documents please
+            contact support.
           </Trans>
         </Text>
 
@@ -38,9 +34,7 @@ export const TemplateDocumentDelete = ({
           <Trans>The reason provided for deletion is the following:</Trans>
         </Text>
 
-        <Text className="mx-auto mb-6 mt-1 text-left text-base italic text-slate-400">
-          {reason}
-        </Text>
+        <Text className="mx-auto mt-1 mb-6 text-left text-base text-slate-400 italic">{reason}</Text>
       </Section>
     </>
   );

packages/email/template-components/template-footer.tsx

@@ -25,7 +25,7 @@ export const TemplateFooter = ({ isDocument = true }: TemplateFooterProps) => {
       )}
 
       {branding.brandingEnabled && branding.brandingCompanyDetails && (
-        <Text className="my-8 text-sm text-slate-400">
+        <Text className="my-8 text-slate-400 text-sm">
           {branding.brandingCompanyDetails.split('\n').map((line, idx) => {
             return (
               <>
@@ -38,7 +38,7 @@ export const TemplateFooter = ({ isDocument = true }: TemplateFooterProps) => {
       )}
 
       {!branding.brandingEnabled && (
-        <Text className="my-8 text-sm text-slate-400">
+        <Text className="my-8 text-slate-400 text-sm">
           Documenso, Inc.
           <br />
           2261 Market Street, #5211, San Francisco, CA 94114, USA

packages/email/template-components/template-forgot-password.tsx

@@ -8,16 +8,13 @@ export type TemplateForgotPasswordProps = {
   assetBaseUrl: string;
 };
 
-export const TemplateForgotPassword = ({
-  resetPasswordLink,
-  assetBaseUrl,
-}: TemplateForgotPasswordProps) => {
+export const TemplateForgotPassword = ({ resetPasswordLink, assetBaseUrl }: TemplateForgotPasswordProps) => {
   return (
     <>
       <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
       <Section className="flex-row items-center justify-center">
-        <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
+        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-lg text-primary">
           <Trans>Forgot your password?</Trans>
         </Text>
 
@@ -25,9 +22,9 @@ export const TemplateForgotPassword = ({
           <Trans>That's okay, it happens! Click the button below to reset your password.</Trans>
         </Text>
 
-        <Section className="mb-6 mt-8 text-center">
+        <Section className="mt-8 mb-6 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"
+            className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center font-medium text-black text-sm no-underline"
             href={resetPasswordLink}
           >
             <Trans>Reset Password</Trans>

packages/email/template-components/template-recipient-expired.tsx

@@ -0,0 +1,54 @@
+import { Trans } from '@lingui/react/macro';
+
+import { Button, Section, Text } from '../components';
+import { TemplateDocumentImage } from './template-document-image';
+
+export type TemplateRecipientExpiredProps = {
+  documentName: string;
+  recipientName: string;
+  recipientEmail: string;
+  documentLink: string;
+  assetBaseUrl: string;
+};
+
+export const TemplateRecipientExpired = ({
+  documentName,
+  recipientName,
+  recipientEmail,
+  documentLink,
+  assetBaseUrl,
+}: TemplateRecipientExpiredProps) => {
+  const displayName = recipientName || recipientEmail;
+
+  return (
+    <>
+      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
+
+      <Section>
+        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-lg text-primary">
+          <Trans>
+            Signing window expired for "{displayName}" on "{documentName}"
+          </Trans>
+        </Text>
+
+        <Text className="my-1 text-center text-base text-slate-400">
+          <Trans>
+            The signing window for {displayName} on document "{documentName}" has expired. You can resend the document
+            to extend their deadline or cancel the document.
+          </Trans>
+        </Text>
+
+        <Section className="my-4 text-center">
+          <Button
+            className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center font-medium text-sm text-white no-underline"
+            href={documentLink}
+          >
+            <Trans>View Document</Trans>
+          </Button>
+        </Section>
+      </Section>
+    </>
+  );
+};
+
+export default TemplateRecipientExpired;

packages/email/template-components/template-reset-password.tsx

@@ -1,6 +1,5 @@
-import { Trans } from '@lingui/react/macro';
-
 import { env } from '@documenso/lib/utils/env';
+import { Trans } from '@lingui/react/macro';
 
 import { Button, Section, Text } from '../components';
 import { TemplateDocumentImage } from './template-document-image';
@@ -19,7 +18,7 @@ export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordPro
       <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
       <Section className="flex-row items-center justify-center">
-        <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
+        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-lg text-primary">
           <Trans>Password updated!</Trans>
         </Text>
 
@@ -27,9 +26,9 @@ export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordPro
           <Trans>Your password has been updated.</Trans>
         </Text>
 
-        <Section className="mb-6 mt-8 text-center">
+        <Section className="mt-8 mb-6 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"
+            className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center font-medium text-black text-sm no-underline"
             href={`${NEXT_PUBLIC_WEBAPP_URL ?? 'http://localhost:3000'}/signin`}
           >
             <Trans>Sign In</Trans>