fix: remove final references to tailwind-config package

Stop sending automated reminders after a configurable threshold
(default 5) and reset the count on manual resend.

.env.example

@@ -48,7 +48,7 @@ NEXT_PRIVATE_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documen
 NEXT_PRIVATE_DIRECT_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"
 
 # [[SIGNING]]
-# The transport to use for document signing. Available options: local (default) | gcloud-hsm
+# The transport to use for document signing. Available options: local (default) | gcloud-hsm | csc
 NEXT_PRIVATE_SIGNING_TRANSPORT="local"
 # OPTIONAL: The passphrase to use for the local file-based signing transport.
 NEXT_PRIVATE_SIGNING_PASSPHRASE=
@@ -70,6 +70,14 @@ NEXT_PRIVATE_SIGNING_GCLOUD_HSM_CERT_CHAIN_FILE_PATH=
 NEXT_PRIVATE_SIGNING_GCLOUD_HSM_CERT_CHAIN_CONTENTS=
 # OPTIONAL: The Google Secret Manager path to retrieve the certificate for the gcloud-hsm signing transport.
 NEXT_PRIVATE_SIGNING_GCLOUD_HSM_SECRET_MANAGER_CERT_PATH=
+# OPTIONAL: The base URL of the Cloud Signature Consortium (CSC) provider for the csc signing transport.
+NEXT_PRIVATE_SIGNING_CSC_PROVIDER_BASE_URL=
+# OPTIONAL: The OAuth client ID registered with the CSC provider for the csc signing transport.
+NEXT_PRIVATE_SIGNING_CSC_OAUTH_CLIENT_ID=
+# OPTIONAL: The OAuth client secret registered with the CSC provider for the csc signing transport.
+NEXT_PRIVATE_SIGNING_CSC_OAUTH_CLIENT_SECRET=
+# OPTIONAL: Default signature level for envelopes created on a CSC instance when the caller doesn't specify one. Available options: AES (default) | QES. Explicit AES/QES requests always pass through unchanged.
+NEXT_PRIVATE_SIGNING_CSC_SIGNATURE_LEVEL=
 # OPTIONAL: Comma-separated list of timestamp authority URLs for PDF signing (enables LTV and archival timestamps).
 NEXT_PRIVATE_SIGNING_TIMESTAMP_AUTHORITY=
 # OPTIONAL: Contact info to embed in PDF signatures. Defaults to the webapp URL.

ARCHITECTURE.md

@@ -65,7 +65,6 @@ Documenso is an open-source document signing platform built as a **monorepo** us
 | Package                      | Description               |
 | ---------------------------- | ------------------------- |
 | `@documenso/app-tests`       | E2E tests (Playwright)    |
-| `@documenso/tailwind-config` | Shared Tailwind config    |
 | `@documenso/tsconfig`        | Shared TypeScript configs |
 
 ## Tech Stack

apps/docs/content/docs/self-hosting/configuration/environment.mdx

@@ -186,9 +186,9 @@ Documenso requires a certificate to digitally sign documents.
 
 ### Transport Selection
 
-| Variable                         | Description                              | Default |
-| -------------------------------- | ---------------------------------------- | ------- |
-| `NEXT_PRIVATE_SIGNING_TRANSPORT` | Signing backend: `local` or `gcloud-hsm` | `local` |
+| Variable                         | Description                                       | Default |
+| -------------------------------- | ------------------------------------------------- | ------- |
+| `NEXT_PRIVATE_SIGNING_TRANSPORT` | Signing backend: `local`, `gcloud-hsm`, or `csc`  | `local` |
 
 ### Local Signing
 
@@ -210,11 +210,36 @@ Documenso requires a certificate to digitally sign documents.
 | `NEXT_PRIVATE_SIGNING_GCLOUD_HSM_CERT_CHAIN_CONTENTS`          | Base64-encoded certificate chain                     |
 | `NEXT_PRIVATE_SIGNING_GCLOUD_HSM_SECRET_MANAGER_CERT_PATH`     | Google Secret Manager path for certificate retrieval |
 
+### Cloud Signature Consortium (CSC)
+
+Routes signing through a third-party Trust Service Provider for Advanced and Qualified Electronic Signatures (AES/QES). Instance-wide; set `NEXT_PRIVATE_SIGNING_TRANSPORT=csc` to enable. See [CSC (AES / QES)](/docs/self-hosting/configuration/signing-certificate/csc-qes) for the full setup walkthrough.
+
+CSC mode requires an active [Enterprise Edition](/docs/policies/enterprise-edition) license. Without a valid license, the instance will refuse to start in `csc` mode.
+
+| Variable                                       | Description                                                                                                                | Default |
+| ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- |
+| `NEXT_PRIVATE_SIGNING_CSC_PROVIDER_BASE_URL`   | Base URL of the CSC provider's API                                                                                         |         |
+| `NEXT_PRIVATE_SIGNING_CSC_OAUTH_CLIENT_ID`     | OAuth client ID registered with the CSC provider                                                                           |         |
+| `NEXT_PRIVATE_SIGNING_CSC_OAUTH_CLIENT_SECRET` | OAuth client secret registered with the CSC provider                                                                       |         |
+| `NEXT_PRIVATE_SIGNING_CSC_SIGNATURE_LEVEL`     | Default legal tier for new envelopes when the caller doesn't specify one. `AES` or `QES`. Explicit requests pass through.  | `AES`   |
+
+The OAuth callback URL registered with the CSC provider is fixed at `${NEXT_PUBLIC_WEBAPP_URL}/api/csc/oauth/callback` — register this exact URL with the TSP.
+
+#### Derived Public Variables
+
+The following client-visible variable is **derived automatically** from the private transport at server startup. Do not set it manually — any value set in the environment is overwritten on boot.
+
+| Variable                              | Derived from                                       | Value                                             |
+| ------------------------------------- | -------------------------------------------------- | ------------------------------------------------- |
+| `NEXT_PUBLIC_SIGNING_TRANSPORT_IS_CSC` | `NEXT_PRIVATE_SIGNING_TRANSPORT === 'csc'`        | `'true'` when CSC mode is active, else `'false'` |
+
+The authoring UI uses this flag to gate features that AES/QES envelopes cannot support (parallel signing, assistant role, dictate next signer). Deriving it from the private transport prevents the client-side flag from drifting from the real server-side configuration.
+
 ### Signature Options
 
 | Variable                                    | Description                                                 | Default    |
 | ------------------------------------------- | ----------------------------------------------------------- | ---------- |
-| `NEXT_PRIVATE_SIGNING_TIMESTAMP_AUTHORITY`  | Comma-separated timestamp authority URLs for LTV signatures |            |
+| `NEXT_PRIVATE_SIGNING_TIMESTAMP_AUTHORITY`  | Comma-separated timestamp authority URLs for LTV signatures. Optional for `local` / `gcloud-hsm` (signatures omit the timestamp when unset). **Required** when `NEXT_PRIVATE_SIGNING_TRANSPORT=csc` — the instance refuses to start without it. See [CSC (AES / QES)](/docs/self-hosting/configuration/signing-certificate/csc-qes#timestamp-authority-resolution). |            |
 | `NEXT_PUBLIC_SIGNING_CONTACT_INFO`          | Contact info embedded in PDF signatures                     | Webapp URL |
 | `NEXT_PRIVATE_USE_LEGACY_SIGNING_SUBFILTER` | Use `adbe.pkcs7.detached` instead of `ETSI.CAdES.detached`  | `false`    |
 

apps/docs/content/docs/self-hosting/configuration/signing-certificate/csc-qes.mdx

@@ -0,0 +1,213 @@
+---
+title: CSC (AES / QES)
+description: Configure Cloud Signature Consortium signing for Advanced and Qualified Electronic Signatures via a third-party Trust Service Provider.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+
+The `csc` signing transport routes signatures through a third-party Trust Service Provider (TSP) using the [Cloud Signature Consortium API v1.0.4.0](https://cloudsignatureconsortium.org/). Each recipient authenticates directly with the TSP (Strong Customer Authentication) and the TSP returns a per-recipient signature bound to the document hash. Documenso assembles the resulting PAdES signature inside the PDF.
+
+This transport enables **Advanced Electronic Signatures (AES)** and **Qualified Electronic Signatures (QES)** under eIDAS. See [Signature Levels](/docs/compliance/signature-levels) for the legal framework.
+
+<Callout type="warn">
+  CSC mode is **instance-wide**: one CSC provider per Documenso install. All envelopes created
+  while the instance runs in `csc` mode use AES or QES. Switching `NEXT_PRIVATE_SIGNING_TRANSPORT`
+  is a one-way operational migration — see [Switching Transports](#switching-transports).
+</Callout>
+
+<Callout type="warn">
+  CSC mode requires an active [Enterprise Edition](/docs/policies/enterprise-edition) license. The
+  instance refuses to start in `csc` mode without it.
+</Callout>
+
+## Prerequisites
+
+{/* prettier-ignore */}
+<Steps>
+<Step>
+
+### A TSP account
+
+Establish a relationship with a CSC-compatible Trust Service Provider. The TSP issues qualified or advanced certificates to your signers, holds the private keys in its HSM, and exposes a CSC v1.0.4.0-compliant API.
+
+</Step>
+<Step>
+
+### OAuth client credentials
+
+Register Documenso as an OAuth client with the TSP. You will receive a client ID and client secret, and must supply Documenso's callback URL when registering:
+
+```
+${NEXT_PUBLIC_WEBAPP_URL}/api/csc/oauth/callback
+```
+
+The callback URL is fixed — Documenso derives it from `NEXT_PUBLIC_WEBAPP_URL` and the route mount path. There is no env var to override it; ensuring the registered URL matches your instance's webapp URL exactly is the operator's responsibility.
+
+</Step>
+<Step>
+
+### Enterprise Edition license
+
+CSC mode is gated by the `instanceCscSigning` license flag. Without a valid Enterprise license, the transport refuses to start (`CSC_UNLICENSED`).
+
+</Step>
+<Step>
+
+### S3 storage (strongly recommended)
+
+CSC produces multiple `DocumentData` rows per envelope item (one per recipient signature, plus the materialised and source rows). Database-backed storage base64-inflates each row by ~33% and is impractical at meaningful PDF sizes. Configure [S3 storage](/docs/self-hosting/configuration/storage) before enabling CSC.
+
+</Step>
+</Steps>
+
+## Environment Variables
+
+| Variable                                       | Description                                                                                                                       | Default |
+| ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| `NEXT_PRIVATE_SIGNING_TRANSPORT`               | Set to `csc`                                                                                                                      |         |
+| `NEXT_PRIVATE_SIGNING_CSC_PROVIDER_BASE_URL`   | Base URL of the CSC provider's API                                                                                                |         |
+| `NEXT_PRIVATE_SIGNING_CSC_OAUTH_CLIENT_ID`     | OAuth client ID registered with the CSC provider                                                                                  |         |
+| `NEXT_PRIVATE_SIGNING_CSC_OAUTH_CLIENT_SECRET` | OAuth client secret registered with the CSC provider                                                                              |         |
+| `NEXT_PRIVATE_SIGNING_CSC_SIGNATURE_LEVEL`     | Default legal tier for new envelopes when the caller does not specify one. `AES` or `QES`. Explicit requests always pass through. | `AES`   |
+| `NEXT_PRIVATE_SIGNING_TIMESTAMP_AUTHORITY`     | **Required.** Comma-separated RFC 3161 TSA URLs. Always used for B-LTA archival timestamps at seal time, and also serves as the B-T sign-time fallback when the TSP does not expose `signatures/timestamp`. The instance refuses to start in CSC mode without it. See [Timestamp Authority Resolution](#timestamp-authority-resolution). |         |
+
+<Callout type="info">
+  `NEXT_PUBLIC_SIGNING_TRANSPORT_IS_CSC` is set automatically from
+  `NEXT_PRIVATE_SIGNING_TRANSPORT` at server startup. Do not set it manually — see
+  [Environment Variables](/docs/self-hosting/configuration/environment#derived-public-variables).
+</Callout>
+
+## Configuration Example
+
+```bash
+NEXT_PRIVATE_SIGNING_TRANSPORT=csc
+NEXT_PRIVATE_SIGNING_CSC_PROVIDER_BASE_URL=https://api.example-tsp.com/csc/v1
+NEXT_PRIVATE_SIGNING_CSC_OAUTH_CLIENT_ID=documenso-prod
+NEXT_PRIVATE_SIGNING_CSC_OAUTH_CLIENT_SECRET=...
+NEXT_PRIVATE_SIGNING_CSC_SIGNATURE_LEVEL=QES
+NEXT_PRIVATE_SIGNING_TIMESTAMP_AUTHORITY=http://timestamp.example.com
+```
+
+Register `${NEXT_PUBLIC_WEBAPP_URL}/api/csc/oauth/callback` (e.g. `https://sign.example.com/api/csc/oauth/callback`) as the OAuth callback URL with the TSP.
+
+## Default Signature Level
+
+`NEXT_PRIVATE_SIGNING_CSC_SIGNATURE_LEVEL` selects the legal tier applied to envelopes that do not specify one explicitly. It is a default, not a capability gate: callers may still create AES or QES envelopes explicitly regardless of this setting.
+
+| Configured value | Caller passes nothing | Caller passes `AES` | Caller passes `QES` |
+| ---------------- | --------------------- | ------------------- | ------------------- |
+| `AES` (default)  | Envelope is `AES`     | Envelope is `AES`   | Envelope is `QES`   |
+| `QES`            | Envelope is `QES`     | Envelope is `AES`   | Envelope is `QES`   |
+
+Any value other than `AES` or `QES` causes the instance to refuse to start. This prevents silent qualified-to-advanced downgrades from a typo.
+
+## Timestamp Authority Resolution
+
+AES/QES envelopes use TSA-attested timestamps in two distinct phases. Resolution differs per phase.
+
+### Sign time — PAdES B-T per recipient
+
+Each recipient's CMS embeds a signature timestamp (CMS unsigned attribute) so proven time is bound to the recipient's signature itself. Resolution order:
+
+1. If the TSP advertises `signatures/timestamp` in its `info` response (CSC §11.10), the TSP endpoint is used. The call is authorised with **this recipient's** service-scope bearer token — the same one authorising the `signatures/signHash` call alongside it.
+2. Otherwise, the first URL from `NEXT_PRIVATE_SIGNING_TIMESTAMP_AUTHORITY` is used (RFC 3161 over HTTP).
+
+Selection is made at boot from the discovered transport, not at runtime; there is no try-then-fall-through. If the chosen source fails, the recipient's sign attempt fails.
+
+### Seal time — PAdES B-LTA archival
+
+The seal-document job emits a single archival `/DocTimeStamp` over the fully-signed envelope (plus DSS for the existing signatures and the timestamp's own chain). This phase is **env-only**: the first URL from `NEXT_PRIVATE_SIGNING_TIMESTAMP_AUTHORITY` is always used.
+
+The archival anchor is the operator's long-term trust anchor and SHOULD point at a dedicated qualified archival TSA (e.g. DigiCert) independent of the per-recipient TSP. We deliberately do not fall back to the TSP at seal time: archive longevity should not be coupled to a TSP that may rotate or revoke, and the seal-document job has no recipient context to carry a service-scope bearer.
+
+### Boot-time guard
+
+The instance refuses to start in CSC mode unless `NEXT_PRIVATE_SIGNING_TIMESTAMP_AUTHORITY` is set (`CSC_PROVIDER_NO_TSA` at transport construction). The env var is required unconditionally — even when the TSP advertises its own `signatures/timestamp`, seal-time B-LTA archival uses the env TSA. Catching this at boot prevents the failure mode where an envelope signs successfully at B-T and then hangs in `WAITING_FOR_SIGNATURE_COMPLETION` when the seal job throws.
+
+## Switching Transports
+
+`NEXT_PRIVATE_SIGNING_TRANSPORT` is a one-way operational migration. Existing envelopes route per the `signatureLevel` column they were created with — the runtime branching looks at the envelope, not the env var. After a switch:
+
+- Envelopes already at `SES` continue to use the new transport for sealing, but the new transport's signer must produce SES-compatible signatures (only `local` and `gcloud-hsm` qualify).
+- Envelopes already at `AES` / `QES` will fail at sign or seal time if the new transport is not `csc`.
+
+Plan migrations during a quiet window with no in-flight envelopes.
+
+## Behavioural Notes
+
+CSC mode changes a number of envelope-authoring behaviours that operators should communicate to users.
+
+### Mutation lock at distribution
+
+For AES/QES envelopes, all authoring routes refuse mutations once the envelope leaves DRAFT. This locks the PDF before any recipient begins Strong Customer Authentication, closing the PDF-swap window that would otherwise allow an owner to replace the PDF between view and sign and break the legal "what you see is what you sign" guarantee.
+
+In practice: edit envelope, recipients, fields, and items freely while DRAFT; once sent, no changes are accepted (including from the API).
+
+### Sequential signing only
+
+Parallel signing produces conflicting incremental updates over the same base PDF, breaking the per-recipient `/ByteRange` invariant. The signing order is forced to `SEQUENTIAL` on AES/QES envelopes — at the schema layer, at send time, and in the UI (the parallel-signing toggle is hidden).
+
+### Assistant role and Dictate Next Signer disabled
+
+Both features modify the recipient set after the envelope is sent, which is incompatible with the AES/QES mutation lock. They are hidden in the UI and rejected at the server schema layer.
+
+### Sidecar PDFs at download
+
+The signed PDF must remain byte-identical to what each recipient's TSP signature authorised — Documenso cannot decorate it after signing. Audit logs and the Certificate of Completion are generated on demand and delivered as separate PDFs:
+
+- `GET /sign/{token}/download` returns the signed PDF only (or a ZIP for multi-item envelopes).
+- `GET /sign/{token}/download?version=bundle` returns a ZIP containing the signed PDFs, audit log PDF, and Certificate of Completion.
+- The completion email attaches all three.
+
+## Recipient Flow
+
+For context when supporting end users, here is what a recipient experiences on an AES/QES envelope:
+
+1. Opens the email link, lands on the signing page.
+2. Documenso redirects to the TSP for Strong Customer Authentication (first visit only; cached for the session lifetime).
+3. Fills fields as normal.
+4. Clicks Sign → redirected to the TSP for a second authentication round (issues a per-document Signature Activation Data token).
+5. Returns to Documenso; the signing call completes within ~15 seconds.
+6. Sees the standard completion screen.
+
+If the TSP returns no eligible credentials for the recipient (e.g. they have not enrolled), they see a blocking page directing them to enrol with the TSP and retry.
+
+## Error Codes
+
+CSC-specific error codes surfaced through the standard error channels:
+
+| Code                       | Meaning                                          | Recovery                                                                |
+| -------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------- |
+| `CSC_UNLICENSED`           | License flag absent at transport-create          | Operator: enable Enterprise Edition, restart                            |
+| `CSC_PROVIDER_INFO_FAILED` | `info` discovery failed at startup               | Operator: check TSP availability and `NEXT_PRIVATE_SIGNING_CSC_PROVIDER_BASE_URL` |
+| `CSC_PROVIDER_NO_TSA`      | `NEXT_PRIVATE_SIGNING_TIMESTAMP_AUTHORITY` is unset | Operator: configure `NEXT_PRIVATE_SIGNING_TIMESTAMP_AUTHORITY`        |
+| `CSC_CREDENTIAL_LIST_EMPTY`| TSP returned no credentials for the user         | Recipient: enrol with the TSP                                           |
+| `CSC_CERT_INVALID`         | Certificate refused at credential validation     | Recipient: contact the TSP                                              |
+| `CSC_ALGORITHM_REFUSED`    | Signature algorithm fails policy                 | Operator/recipient: TSP does not meet policy (see below)                |
+| `CSC_SAD_EXPIRED_PRE_SIGN` | Signature Activation Data expired before signing | Recipient: retry from Sign                                              |
+| `CSC_TSP_TIMEOUT`          | 15-second synchronous timeout reached            | Recipient: retry (idempotent — the TSP enforces single-use SAD binding) |
+| `CSC_EMBED_FAILED`         | Sign-time digest diverged from prep capture      | Recipient: retry from Sign                                              |
+| `CSC_BASE_DOCUMENT_MUTATED`| Document data changed between prep and sign      | Operator: investigate (structural guard violation)                      |
+| `CSC_INSTANCE_MODE_MISMATCH`| Envelope created with wrong level for transport | Caller: use a level matching the instance transport                     |
+| `CSC_REQUEST_FAILED`       | TSP HTTP transport failure — network error, non-2xx, or malformed response | Operator: check TSP availability; carries the TSP HTTP status and error in the message |
+
+## Algorithm Policy
+
+Documenso refuses TSP credentials that do not meet the following minimums, at the OAuth callback boundary and again at sign time:
+
+| Class | Allowed                            | Refused                                                |
+| ----- | ---------------------------------- | ------------------------------------------------------ |
+| RSA   | `key.len >= 2048`                  | Missing `key.len`, `key.len < 2048`                    |
+| ECDSA | P-256, P-384, P-521                | Missing `key.curve`, P-192, P-224, other curves        |
+| Hash  | SHA-256, SHA-384, SHA-512          | SHA-1, MD5                                             |
+| Other | —                                  | DSA                                                    |
+
+This is the union of CSC v1.0.4.0 §11.5 requirements and current cryptographic guidance.
+
+## Related
+
+- [Signature Levels](/docs/compliance/signature-levels) — AES / QES legal framework
+- [Signing Certificate](/docs/self-hosting/configuration/signing-certificate) — overview of all signing transports
+- [Environment Variables](/docs/self-hosting/configuration/environment) — full env reference
+- [Enterprise Edition](/docs/policies/enterprise-edition) — license requirements

apps/docs/content/docs/self-hosting/configuration/signing-certificate/index.mdx

@@ -24,6 +24,11 @@ Self-hosted Documenso instances require a signing certificate. You can generate
     description="Hardware-based key protection with Google Cloud KMS."
     href="/docs/self-hosting/configuration/signing-certificate/google-cloud-hsm"
   />
+  <Card
+    title="CSC (AES / QES)"
+    description="Route signing through a third-party Trust Service Provider for Advanced and Qualified Electronic Signatures."
+    href="/docs/self-hosting/configuration/signing-certificate/csc-qes"
+  />
   <Card
     title="Timestamp Server"
     description="Add trusted timestamps and customise signature appearance."
@@ -38,7 +43,7 @@ Self-hosted Documenso instances require a signing certificate. You can generate
 
 ## Certificate Options
 
-<Tabs items={['Self-Signed', 'CA-Issued', 'Google Cloud HSM']}>
+<Tabs items={['Self-Signed', 'CA-Issued', 'Google Cloud HSM', 'CSC (AES / QES)']}>
 <Tab value="Self-Signed">
 
 A self-signed certificate is sufficient for most use cases where your industry has no special signing regulations.
@@ -79,6 +84,18 @@ For organisations requiring hardware-based key protection, Documenso supports Go
 
 See [Google Cloud HSM](/docs/self-hosting/configuration/signing-certificate/google-cloud-hsm) for setup instructions.
 
+</Tab>
+<Tab value="CSC (AES / QES)">
+
+For Advanced and Qualified Electronic Signatures under eIDAS, Documenso integrates with third-party Trust Service Providers via the Cloud Signature Consortium API. Each recipient authenticates directly with the TSP, which holds the private key and issues the signature.
+
+- Per-recipient identity verification by an accredited TSP
+- Legally equivalent to a handwritten signature within the EU (QES)
+- Requires an [Enterprise Edition](/docs/policies/enterprise-edition) license
+- Instance-wide setting; one CSC provider per Documenso install
+
+See [CSC (AES / QES)](/docs/self-hosting/configuration/signing-certificate/csc-qes) for setup instructions.
+
 </Tab>
 </Tabs>
 

apps/docs/content/docs/self-hosting/configuration/signing-certificate/meta.json

@@ -1,4 +1,4 @@
 {
   "title": "Signing Certificate",
-  "pages": ["...index", "local", "google-cloud-hsm", "timestamp-server", "troubleshooting"]
+  "pages": ["...index", "local", "google-cloud-hsm", "csc-qes", "timestamp-server", "troubleshooting"]
 }

apps/docs/next.config.ts

@@ -1,10 +1,11 @@
 import { createMDX } from 'fumadocs-mdx/next';
+import type { NextConfig } from 'next';
 
 const withMDX = createMDX();
 
-/** @type {import('next').NextConfig} */
-const config = {
+const config: NextConfig = {
   reactStrictMode: true,
+  // biome-ignore lint/suspicious/useAwait: config file
   async rewrites() {
     return [
       {
@@ -13,6 +14,7 @@ const config = {
       },
     ];
   },
+  // biome-ignore lint/suspicious/useAwait: config file
   async redirects() {
     return [
       // ============================================================

apps/docs/package.json

@@ -16,7 +16,7 @@
     "fumadocs-ui": "16.5.0",
     "lucide-react": "^0.563.0",
     "mermaid": "^11.12.2",
-    "next": "16.2.6",
+    "next": "16.2.9",
     "next-plausible": "^3.12.5",
     "next-themes": "^0.4.6",
     "react": "^19.2.4",
@@ -30,7 +30,7 @@
     "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.14",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.3.1",
     "typescript": "^5.9.3"
   }
 }

apps/docs/src/app/og/docs/[...slug]/route.tsx

@@ -68,7 +68,7 @@ export async function GET(_req: Request, { params }: RouteContext<'/og/docs/[...
         }}
       >
         {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img src={logoSrc} alt="Documenso" height="28" />
+        <img src={logoSrc} alt="Documenso" style={{ height: 28 }} />
         <span
           style={{
             color: '#D4D4D8',

apps/openpage-api/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@documenso/prisma": "*",
     "luxon": "^3.7.2",
-    "next": "16.2.6"
+    "next": "16.2.9"
   },
   "devDependencies": {
     "@types/node": "^20",

apps/remix/app/app.css

@@ -1,5 +1,15 @@
 @import "@documenso/ui/styles/theme.css";
 
+/* Content sources: this app plus the shared `ui` and `email` packages it renders. */
+@source "./**/*.{ts,tsx}";
+@source "../../../packages/ui/primitives/**/*.{ts,tsx}";
+@source "../../../packages/ui/components/**/*.{ts,tsx}";
+@source "../../../packages/ui/icons/**/*.{ts,tsx}";
+@source "../../../packages/ui/lib/**/*.{ts,tsx}";
+@source "../../../packages/email/templates/**/*.{ts,tsx}";
+@source "../../../packages/email/template-components/**/*.{ts,tsx}";
+@source "../../../packages/email/providers/**/*.{ts,tsx}";
+
 /* Inter Variable Fonts */
 @font-face {
   font-family: "Inter";
@@ -64,8 +74,9 @@
 
 @layer base {
   :root {
-    --font-sans: "Inter";
-    --font-signature: "Caveat";
-    --font-noto: "Noto Sans", "Noto Sans Korean", "Noto Sans Japanese", "Noto Sans Chinese";
+    /* Consumed by the `--font-*` theme tokens in @documenso/ui/styles/theme.css. */
+    --font-family-sans: "Inter";
+    --font-family-signature: "Caveat";
+    --font-family-noto: "Noto Sans", "Noto Sans Korean", "Noto Sans Japanese", "Noto Sans Chinese";
   }
 }

apps/remix/app/components/dialogs/account-delete-dialog.tsx

@@ -73,7 +73,7 @@ export const AccountDeleteDialog = ({ className }: AccountDeleteDialogProps) =>
           </AlertDescription>
         </div>
 
-        <div className="flex-shrink-0">
+        <div className="shrink-0">
           <Dialog onOpenChange={() => setEnteredEmail('')}>
             <DialogTrigger asChild>
               <Button variant="destructive">
@@ -82,7 +82,7 @@ export const AccountDeleteDialog = ({ className }: AccountDeleteDialogProps) =>
             </DialogTrigger>
 
             <DialogContent>
-              <DialogHeader className="space-y-4">
+              <DialogHeader className="twv3-space-y-4">
                 <DialogTitle>
                   <Trans>Delete Account</Trans>
                 </DialogTitle>

apps/remix/app/components/dialogs/admin-document-delete-dialog.tsx

@@ -71,7 +71,7 @@ export const AdminDocumentDeleteDialog = ({ envelopeId }: AdminDocumentDeleteDia
             </AlertDescription>
           </div>
 
-          <div className="flex-shrink-0">
+          <div className="shrink-0">
             <Dialog>
               <DialogTrigger asChild>
                 <Button variant="destructive">
@@ -80,7 +80,7 @@ export const AdminDocumentDeleteDialog = ({ envelopeId }: AdminDocumentDeleteDia
               </DialogTrigger>
 
               <DialogContent>
-                <DialogHeader className="space-y-4">
+                <DialogHeader className="twv3-space-y-4">
                   <DialogTitle>
                     <Trans>Delete Document</Trans>
                   </DialogTitle>

apps/remix/app/components/dialogs/admin-organisation-create-dialog.tsx

@@ -90,7 +90,7 @@ export const AdminOrganisationCreateDialog = ({ trigger, ownerUserId, ...props }
     <Dialog {...props} open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
-          <Button className="flex-shrink-0" variant="secondary">
+          <Button className="shrink-0" variant="secondary">
             <Trans>Create organisation</Trans>
           </Button>
         )}
@@ -109,7 +109,7 @@ export const AdminOrganisationCreateDialog = ({ trigger, ownerUserId, ...props }
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+            <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
               <FormField
                 control={form.control}
                 name="name"

apps/remix/app/components/dialogs/admin-organisation-delete-dialog.tsx

@@ -128,7 +128,7 @@ export const AdminOrganisationDeleteDialog = ({
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+            <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
               <FormField
                 control={form.control}
                 name="organisationName"
@@ -151,7 +151,7 @@ export const AdminOrganisationDeleteDialog = ({
                 control={form.control}
                 name="sendEmailToOwner"
                 render={({ field }) => (
-                  <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                  <FormItem className="twv3-space-x-3 twv3-space-y-0 flex flex-row items-start">
                     <FormControl>
                       <Checkbox
                         id="admin-delete-organisation-send-email"

apps/remix/app/components/dialogs/admin-organisation-member-delete-dialog.tsx

@@ -76,7 +76,7 @@ export const AdminOrganisationMemberDeleteDialog = ({
       </DialogTrigger>
 
       <DialogContent>
-        <DialogHeader className="space-y-4">
+        <DialogHeader className="twv3-space-y-4">
           <DialogTitle>
             <Trans>Remove Organisation Member</Trans>
           </DialogTitle>

apps/remix/app/components/dialogs/admin-organisation-sync-subscription-dialog.tsx

@@ -110,12 +110,12 @@ export const AdminOrganisationSyncSubscriptionDialog = ({
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+            <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
               <FormField
                 control={form.control}
                 name="syncClaims"
                 render={({ field }) => (
-                  <FormItem className="flex flex-row items-center space-x-3 space-y-0">
+                  <FormItem className="twv3-space-x-3 twv3-space-y-0 flex flex-row items-center">
                     <FormControl>
                       <Checkbox
                         id="admin-sync-subscription-sync-claims"

apps/remix/app/components/dialogs/admin-swap-subscription-dialog.tsx

@@ -128,7 +128,7 @@ export const AdminSwapSubscriptionDialog = ({
           </DialogDescription>
         </DialogHeader>
 
-        <fieldset className="flex flex-col space-y-4" disabled={isSubmitting}>
+        <fieldset className="twv3-space-y-4 flex flex-col" disabled={isSubmitting}>
           <div className="flex flex-col gap-2">
             <label className="font-medium text-sm">
               <Trans>Target Organisation</Trans>

apps/remix/app/components/dialogs/admin-team-member-delete-dialog.tsx

@@ -76,7 +76,7 @@ export const AdminTeamMemberDeleteDialog = ({
       </DialogTrigger>
 
       <DialogContent>
-        <DialogHeader className="space-y-4">
+        <DialogHeader className="twv3-space-y-4">
           <DialogTitle>
             <Trans>Remove Team Member</Trans>
           </DialogTitle>

apps/remix/app/components/dialogs/admin-user-create-dialog.tsx

@@ -82,7 +82,7 @@ export const AdminUserCreateDialog = ({ trigger, ...props }: AdminUserCreateDial
     <Dialog {...props} open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
-          <Button className="flex-shrink-0" variant="secondary">
+          <Button className="shrink-0" variant="secondary">
             <Trans>Create User</Trans>
           </Button>
         )}
@@ -101,7 +101,7 @@ export const AdminUserCreateDialog = ({ trigger, ...props }: AdminUserCreateDial
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+            <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
               <FormField
                 control={form.control}
                 name="email"

apps/remix/app/components/dialogs/admin-user-delete-dialog.tsx

@@ -77,7 +77,7 @@ export const AdminUserDeleteDialog = ({ className, user }: AdminUserDeleteDialog
           </AlertDescription>
         </div>
 
-        <div className="flex-shrink-0">
+        <div className="shrink-0">
           <Dialog>
             <DialogTrigger asChild>
               <Button variant="destructive">
@@ -86,7 +86,7 @@ export const AdminUserDeleteDialog = ({ className, user }: AdminUserDeleteDialog
             </DialogTrigger>
 
             <DialogContent>
-              <DialogHeader className="space-y-4">
+              <DialogHeader className="twv3-space-y-4">
                 <DialogTitle>
                   <Trans>Delete Account</Trans>
                 </DialogTitle>

apps/remix/app/components/dialogs/admin-user-disable-dialog.tsx

@@ -74,7 +74,7 @@ export const AdminUserDisableDialog = ({ className, userToDisable }: AdminUserDi
           </AlertDescription>
         </div>
 
-        <div className="flex-shrink-0">
+        <div className="shrink-0">
           <Dialog>
             <DialogTrigger asChild>
               <Button variant="destructive">
@@ -83,7 +83,7 @@ export const AdminUserDisableDialog = ({ className, userToDisable }: AdminUserDi
             </DialogTrigger>
 
             <DialogContent>
-              <DialogHeader className="space-y-4">
+              <DialogHeader className="twv3-space-y-4">
                 <DialogTitle>
                   <Trans>Disable Account</Trans>
                 </DialogTitle>

apps/remix/app/components/dialogs/admin-user-enable-dialog.tsx

@@ -74,7 +74,7 @@ export const AdminUserEnableDialog = ({ className, userToEnable }: AdminUserEnab
           </AlertDescription>
         </div>
 
-        <div className="flex-shrink-0">
+        <div className="shrink-0">
           <Dialog>
             <DialogTrigger asChild>
               <Button>
@@ -83,7 +83,7 @@ export const AdminUserEnableDialog = ({ className, userToEnable }: AdminUserEnab
             </DialogTrigger>
 
             <DialogContent>
-              <DialogHeader className="space-y-4">
+              <DialogHeader className="twv3-space-y-4">
                 <DialogTitle>
                   <Trans>Enable Account</Trans>
                 </DialogTitle>

apps/remix/app/components/dialogs/admin-user-reset-two-factor-dialog.tsx

@@ -90,7 +90,7 @@ export const AdminUserResetTwoFactorDialog = ({ className, user }: AdminUserRese
           </AlertDescription>
         </div>
 
-        <div className="flex-shrink-0">
+        <div className="shrink-0">
           <Dialog open={open} onOpenChange={handleOpenChange}>
             <DialogTrigger asChild>
               <Button variant="destructive">
@@ -99,7 +99,7 @@ export const AdminUserResetTwoFactorDialog = ({ className, user }: AdminUserRese
             </DialogTrigger>
 
             <DialogContent>
-              <DialogHeader className="space-y-4">
+              <DialogHeader className="twv3-space-y-4">
                 <DialogTitle>
                   <Trans>Reset Two Factor Authentication</Trans>
                 </DialogTitle>

apps/remix/app/components/dialogs/ai-features-enable-dialog.tsx

@@ -71,7 +71,7 @@ export const AiFeaturesEnableDialog = ({ open, onOpenChange, onEnabled }: AiFeat
           </DialogTitle>
         </DialogHeader>
 
-        <div className="space-y-4">
+        <div className="twv3-space-y-4">
           <p className="text-muted-foreground text-sm">
             <Trans>
               Turn on AI detection to automatically find recipients and fields in your documents. AI providers do not

apps/remix/app/components/dialogs/ai-field-detection-dialog.tsx

@@ -158,7 +158,7 @@ export const AiFieldDetectionDialog = ({
               </DialogTitle>
             </DialogHeader>
 
-            <div className="space-y-4">
+            <div className="twv3-space-y-4">
               <p className="text-muted-foreground text-sm">
                 <Trans>
                   We'll scan your document to find form fields like signature lines, text inputs, checkboxes, and more.
@@ -166,14 +166,14 @@ export const AiFieldDetectionDialog = ({
                 </Trans>
               </p>
 
-              <Alert className="flex items-center gap-2 space-y-0" variant="neutral">
+              <Alert className="twv3-space-y-0 flex items-center gap-2" variant="neutral">
                 <ShieldCheckIcon className="h-5 w-5 stroke-green-600" />
                 <AlertDescription className="mt-0">
                   <Trans>Your document is processed securely using AI services that don't retain your data.</Trans>
                 </AlertDescription>
               </Alert>
 
-              <div className="space-y-1.5">
+              <div className="twv3-space-y-1.5">
                 <Label htmlFor="context">
                   <Trans>Context</Trans>
                 </Label>

apps/remix/app/components/dialogs/ai-recipient-detection-dialog.tsx

@@ -145,7 +145,7 @@ export const AiRecipientDetectionDialog = ({
                 </Trans>
               </p>
 
-              <Alert className="mt-4 flex items-center gap-2 space-y-0" variant="neutral">
+              <Alert className="twv3-space-y-0 mt-4 flex items-center gap-2" variant="neutral">
                 <ShieldCheckIcon className="h-5 w-5 stroke-green-600" />
                 <AlertDescription className="mt-0">
                   <Trans>Your document is processed securely using AI services that don't retain your data.</Trans>

apps/remix/app/components/dialogs/claim-create-dialog.tsx

@@ -50,7 +50,7 @@ export const ClaimCreateDialog = ({ licenseFlags }: ClaimCreateDialogProps) => {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
-        <Button className="flex-shrink-0" variant="secondary">
+        <Button className="shrink-0" variant="secondary">
           <Trans>Create claim</Trans>
         </Button>
       </DialogTrigger>

apps/remix/app/components/dialogs/claim-update-dialog.tsx

@@ -75,7 +75,7 @@ export const ClaimUpdateDialog = ({ claim, trigger, licenseFlags }: ClaimUpdateD
           licenseFlags={licenseFlags}
           formSubmitTrigger={
             <>
-              <div className="flex items-center space-x-2">
+              <div className="twv3-space-x-2 flex items-center">
                 <Checkbox
                   id="backport-email-transport"
                   checked={backportEmailTransport}

apps/remix/app/components/dialogs/document-move-to-folder-dialog.tsx

@@ -1,243 +0,0 @@
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { FolderType } from '@documenso/lib/types/folder-type';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { FolderIcon, HomeIcon, Loader2, Search } from 'lucide-react';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router';
-import { z } from 'zod';
-
-import { useCurrentTeam } from '~/providers/team';
-
-export type DocumentMoveToFolderDialogProps = {
-  documentId: number;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  currentFolderId?: string;
-} & Omit<DialogPrimitive.DialogProps, 'children'>;
-
-const ZMoveDocumentFormSchema = z.object({
-  folderId: z.string().nullable().optional(),
-});
-
-type TMoveDocumentFormSchema = z.infer<typeof ZMoveDocumentFormSchema>;
-
-export const DocumentMoveToFolderDialog = ({
-  documentId,
-  open,
-  onOpenChange,
-  currentFolderId,
-  ...props
-}: DocumentMoveToFolderDialogProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const navigate = useNavigate();
-  const team = useCurrentTeam();
-
-  const [searchTerm, setSearchTerm] = useState('');
-
-  const form = useForm<TMoveDocumentFormSchema>({
-    resolver: zodResolver(ZMoveDocumentFormSchema),
-    defaultValues: {
-      folderId: currentFolderId,
-    },
-  });
-
-  const { data: folders, isLoading: isFoldersLoading } = trpc.folder.findFoldersInternal.useQuery(
-    {
-      parentId: currentFolderId,
-      type: FolderType.DOCUMENT,
-    },
-    {
-      enabled: open,
-    },
-  );
-
-  const { mutateAsync: updateDocument } = trpc.document.update.useMutation();
-
-  useEffect(() => {
-    if (!open) {
-      form.reset();
-      setSearchTerm('');
-    } else {
-      form.reset({ folderId: currentFolderId });
-    }
-  }, [open, currentFolderId, form]);
-
-  const onSubmit = async (data: TMoveDocumentFormSchema) => {
-    try {
-      await updateDocument({
-        documentId,
-        data: {
-          folderId: data.folderId ?? null,
-        },
-      });
-
-      const documentsPath = formatDocumentsPath(team.url);
-
-      if (data.folderId) {
-        await navigate(`${documentsPath}/f/${data.folderId}`);
-      } else {
-        await navigate(documentsPath);
-      }
-
-      toast({
-        title: _(msg`Document moved`),
-        description: _(msg`The document has been moved successfully.`),
-        variant: 'default',
-      });
-
-      onOpenChange(false);
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      if (error.code === AppErrorCode.NOT_FOUND) {
-        toast({
-          title: _(msg`Error`),
-          description: _(msg`The folder you are trying to move the document to does not exist.`),
-          variant: 'destructive',
-        });
-
-        return;
-      }
-
-      if (error.code === AppErrorCode.UNAUTHORIZED) {
-        toast({
-          title: _(msg`Error`),
-          description: _(msg`You are not allowed to move this document.`),
-          variant: 'destructive',
-        });
-
-        return;
-      }
-
-      toast({
-        title: _(msg`Error`),
-        description: _(msg`An error occurred while moving the document.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const filteredFolders = folders?.data.filter((folder) =>
-    folder.name.toLowerCase().includes(searchTerm.toLowerCase()),
-  );
-
-  return (
-    <Dialog {...props} open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Move Document to Folder</Trans>
-          </DialogTitle>
-
-          <DialogDescription>
-            <Trans>Select a folder to move this document to.</Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="relative">
-          <Search className="absolute top-3 left-2 h-4 w-4 text-muted-foreground" />
-          <Input
-            placeholder={_(msg`Search folders...`)}
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="pl-8"
-          />
-        </div>
-
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
-            <FormField
-              control={form.control}
-              name="folderId"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>
-                    <Trans>Folder</Trans>
-                  </FormLabel>
-
-                  <FormControl>
-                    <div className="max-h-96 space-y-2 overflow-y-auto">
-                      {isFoldersLoading ? (
-                        <div className="flex h-10 items-center justify-center">
-                          <Loader2 className="h-4 w-4 animate-spin" />
-                        </div>
-                      ) : (
-                        <>
-                          <Button
-                            type="button"
-                            variant={field.value === null ? 'default' : 'outline'}
-                            className="w-full justify-start"
-                            onClick={() => field.onChange(null)}
-                            disabled={currentFolderId === null}
-                          >
-                            <HomeIcon className="mr-2 h-4 w-4" />
-                            <Trans>Home (No Folder)</Trans>
-                          </Button>
-
-                          {filteredFolders?.map((folder) => (
-                            <Button
-                              key={folder.id}
-                              type="button"
-                              variant={field.value === folder.id ? 'default' : 'outline'}
-                              className="w-full justify-start"
-                              onClick={() => field.onChange(folder.id)}
-                              disabled={currentFolderId === folder.id}
-                            >
-                              <FolderIcon className="mr-2 h-4 w-4" />
-                              {folder.name}
-                            </Button>
-                          ))}
-
-                          {searchTerm && filteredFolders?.length === 0 && (
-                            <div className="px-2 py-2 text-center text-muted-foreground text-sm">
-                              <Trans>No folders found</Trans>
-                            </div>
-                          )}
-                        </>
-                      )}
-                    </div>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <DialogFooter>
-              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                <Trans>Cancel</Trans>
-              </Button>
-
-              <Button
-                type="submit"
-                disabled={isFoldersLoading || form.formState.isSubmitting || currentFolderId === null}
-              >
-                <Trans>Move</Trans>
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/remix/app/components/dialogs/document-resend-dialog.tsx

@@ -1,203 +0,0 @@
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
-import { AppError } from '@documenso/lib/errors/app-error';
-import type { TRecipientLite } from '@documenso/lib/types/recipient';
-import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
-import type { Document } from '@documenso/prisma/types/document-legacy-schema';
-import { trpc as trpcReact } from '@documenso/trpc/react';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { Checkbox } from '@documenso/ui/primitives/checkbox';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@documenso/ui/primitives/dialog';
-import { DropdownMenuItem } from '@documenso/ui/primitives/dropdown-menu';
-import { Form, FormControl, FormField, FormItem, FormLabel } from '@documenso/ui/primitives/form/form';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { SigningStatus, type Team, type User } from '@prisma/client';
-import { History } from 'lucide-react';
-import { useState } from 'react';
-import { useForm, useWatch } from 'react-hook-form';
-import * as z from 'zod';
-
-import { useCurrentTeam } from '~/providers/team';
-import { getDistributeErrorMessage } from '~/utils/toast-error-messages';
-
-import { StackAvatar } from '../general/stack-avatar';
-
-const FORM_ID = 'resend-email';
-
-export type DocumentResendDialogProps = {
-  document: Pick<Document, 'id' | 'userId' | 'teamId' | 'status'> & {
-    user: Pick<User, 'id' | 'name' | 'email'>;
-    recipients: TRecipientLite[];
-    team: Pick<Team, 'id' | 'url'> | null;
-  };
-  recipients: TRecipientLite[];
-};
-
-export const ZResendDocumentFormSchema = z.object({
-  recipients: z.array(z.number()).min(1, {
-    message: 'You must select at least one item.',
-  }),
-});
-
-export type TResendDocumentFormSchema = z.infer<typeof ZResendDocumentFormSchema>;
-
-export const DocumentResendDialog = ({ document, recipients }: DocumentResendDialogProps) => {
-  const { user } = useSession();
-  const team = useCurrentTeam();
-
-  const { toast } = useToast();
-  const { _ } = useLingui();
-
-  const [isOpen, setIsOpen] = useState(false);
-  const isOwner = document.userId === user.id;
-  const isCurrentTeamDocument = team && document.team?.url === team.url;
-
-  const isDisabled =
-    (!isOwner && !isCurrentTeamDocument) ||
-    document.status !== 'PENDING' ||
-    !recipients.some((r) => r.signingStatus === SigningStatus.NOT_SIGNED);
-
-  const { mutateAsync: resendDocument } = trpcReact.document.redistribute.useMutation();
-
-  const form = useForm<TResendDocumentFormSchema>({
-    resolver: zodResolver(ZResendDocumentFormSchema),
-    defaultValues: {
-      recipients: [],
-    },
-  });
-
-  const {
-    handleSubmit,
-    formState: { isSubmitting },
-  } = form;
-
-  const selectedRecipients = useWatch({
-    control: form.control,
-    name: 'recipients',
-  });
-
-  const onFormSubmit = async ({ recipients }: TResendDocumentFormSchema) => {
-    try {
-      await resendDocument({ documentId: document.id, recipients });
-
-      toast({
-        title: _(msg`Document re-sent`),
-        description: _(msg`Your document has been re-sent successfully.`),
-        duration: 5000,
-      });
-
-      setIsOpen(false);
-    } catch (err) {
-      const error = AppError.parseError(err);
-      const errorMessage = getDistributeErrorMessage(error.code);
-
-      toast({
-        title: _(errorMessage.title),
-        description: _(errorMessage.description),
-        variant: 'destructive',
-        duration: 7500,
-      });
-    }
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem disabled={isDisabled} onSelect={(e) => e.preventDefault()}>
-          <History className="mr-2 h-4 w-4" />
-          <Trans>Resend</Trans>
-        </DropdownMenuItem>
-      </DialogTrigger>
-
-      <DialogContent className="sm:max-w-sm" hideClose>
-        <DialogHeader>
-          <DialogTitle asChild>
-            <h1 className="text-center text-xl">
-              <Trans>Who do you want to remind?</Trans>
-            </h1>
-          </DialogTitle>
-        </DialogHeader>
-
-        <Form {...form}>
-          <form id={FORM_ID} onSubmit={handleSubmit(onFormSubmit)} className="px-3">
-            <FormField
-              control={form.control}
-              name="recipients"
-              render={({ field: { value, onChange } }) => (
-                <>
-                  {recipients.map((recipient) => (
-                    <FormItem key={recipient.id} className="flex flex-row items-center justify-between gap-x-3">
-                      <FormLabel
-                        className={cn('my-2 flex items-center gap-2 font-normal', {
-                          'opacity-50': !value.includes(recipient.id),
-                        })}
-                      >
-                        <StackAvatar
-                          key={recipient.id}
-                          type={getRecipientType(recipient)}
-                          fallbackText={recipientAbbreviation(recipient)}
-                        />
-                        {recipient.email}
-                      </FormLabel>
-
-                      <FormControl>
-                        <Checkbox
-                          className="h-5 w-5 rounded-full border border-neutral-400"
-                          value={recipient.id}
-                          checked={value.includes(recipient.id)}
-                          onCheckedChange={(checked: boolean) =>
-                            checked
-                              ? onChange([...value, recipient.id])
-                              : onChange(value.filter((v) => v !== recipient.id))
-                          }
-                        />
-                      </FormControl>
-                    </FormItem>
-                  ))}
-                </>
-              )}
-            />
-          </form>
-        </Form>
-
-        <DialogFooter>
-          <div className="flex w-full flex-1 flex-nowrap gap-4">
-            <DialogClose asChild>
-              <Button
-                type="button"
-                className="flex-1 bg-black/5 hover:bg-black/10 dark:bg-muted dark:hover:bg-muted/80"
-                variant="secondary"
-                disabled={isSubmitting}
-              >
-                <Trans>Cancel</Trans>
-              </Button>
-            </DialogClose>
-
-            <Button
-              className="flex-1"
-              loading={isSubmitting}
-              type="submit"
-              form={FORM_ID}
-              disabled={isSubmitting || selectedRecipients.length === 0}
-            >
-              <Trans>Send reminder</Trans>
-            </Button>
-          </div>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/remix/app/components/dialogs/email-transport-create-dialog.tsx

@@ -59,7 +59,7 @@ export const EmailTransportCreateDialog = ({ trigger }: EmailTransportCreateDial
     <Dialog open={open} onOpenChange={(value) => !isPending && setOpen(value)}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
         {trigger ?? (
-          <Button className="flex-shrink-0">
+          <Button className="shrink-0">
             <Trans>Add transport</Trans>
           </Button>
         )}

apps/remix/app/components/dialogs/email-transport-send-test-dialog.tsx

@@ -86,7 +86,7 @@ export const EmailTransportSendTestDialog = ({ transportId, trigger }: EmailTran
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset disabled={form.formState.isSubmitting} className="space-y-4">
+            <fieldset disabled={form.formState.isSubmitting} className="twv3-space-y-4">
               <FormField
                 control={form.control}
                 name="to"

apps/remix/app/components/dialogs/envelope-cancel-dialog.tsx

@@ -0,0 +1,134 @@
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Label } from '@documenso/ui/primitives/label';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useEffect, useState } from 'react';
+
+export type EnvelopeCancelDialogProps = {
+  id: string;
+  title: string;
+  trigger?: React.ReactNode;
+  onCancel?: () => Promise<void> | void;
+};
+
+export const EnvelopeCancelDialog = ({ id, title, trigger, onCancel }: EnvelopeCancelDialogProps) => {
+  const { toast } = useToast();
+  const { t } = useLingui();
+  const trpcUtils = trpcReact.useUtils();
+
+  const [open, setOpen] = useState(false);
+  const [reason, setReason] = useState('');
+
+  const { mutateAsync: cancelEnvelope, isPending } = trpcReact.envelope.cancel.useMutation({
+    onSuccess: async () => {
+      toast({
+        title: t`Document cancelled`,
+        description: t`"${title}" has been successfully cancelled`,
+        duration: 5000,
+      });
+
+      await trpcUtils.document.findDocumentsInternal.invalidate();
+
+      await onCancel?.();
+
+      setOpen(false);
+    },
+    onError: () => {
+      toast({
+        title: t`Something went wrong`,
+        description: t`This document could not be cancelled at this time. Please try again.`,
+        variant: 'destructive',
+        duration: 7500,
+      });
+    },
+  });
+
+  useEffect(() => {
+    if (open) {
+      setReason('');
+    }
+  }, [open]);
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isPending && setOpen(value)}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Are you sure?</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>
+              You are about to cancel <strong>"{title}"</strong>
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="warning" className="-mt-1">
+          <AlertDescription>
+            <p>
+              <Trans>Once confirmed, the following will occur:</Trans>
+            </p>
+
+            <ul className="mt-0.5 list-inside list-disc">
+              <li>
+                <Trans>The document signing process will be stopped</Trans>
+              </li>
+              <li>
+                <Trans>Recipients will be notified that the document was cancelled</Trans>
+              </li>
+              <li>
+                <Trans>The document will remain in your dashboard marked as Cancelled</Trans>
+              </li>
+            </ul>
+          </AlertDescription>
+        </Alert>
+
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="cancel-reason">
+            <Trans>Reason (optional)</Trans>
+          </Label>
+
+          <Textarea
+            id="cancel-reason"
+            value={reason}
+            onChange={(event) => setReason(event.target.value)}
+            placeholder={t`Add an optional reason for cancelling this document`}
+          />
+        </div>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary" disabled={isPending}>
+              <Trans>Cancel</Trans>
+            </Button>
+          </DialogClose>
+
+          <Button
+            type="button"
+            loading={isPending}
+            onClick={() => void cancelEnvelope({ envelopeId: id, reason: reason || undefined })}
+            variant="destructive"
+          >
+            <Trans>Cancel document</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/envelope-delete-dialog.tsx

@@ -166,7 +166,7 @@ export const EnvelopeDeleteDialog = ({
                   </ul>
                 </AlertDescription>
               ))
-              .with(P.union(DocumentStatus.COMPLETED, DocumentStatus.REJECTED), () => (
+              .with(P.union(DocumentStatus.COMPLETED, DocumentStatus.REJECTED, DocumentStatus.CANCELLED), () => (
                 <AlertDescription>
                   <p>
                     <Trans>By deleting this document, the following will occur:</Trans>

apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx

@@ -3,12 +3,13 @@ import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/org
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+import { hasOverlappingFields } from '@documenso/lib/utils/fields-overlap';
 import { getRecipientsWithMissingFields } from '@documenso/lib/utils/recipients';
 import { zEmail } from '@documenso/lib/utils/zod';
 import { trpc, trpc as trpcReact } from '@documenso/trpc/react';
 import { DocumentSendEmailMessageHelper } from '@documenso/ui/components/document/document-send-email-message-helper';
 import { cn } from '@documenso/ui/lib/utils';
-import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -32,7 +33,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { DocumentDistributionMethod, DocumentStatus, EnvelopeType } from '@prisma/client';
 import { AnimatePresence, motion } from 'framer-motion';
-import { InfoIcon } from 'lucide-react';
+import { AlertTriangleIcon, InfoIcon } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
@@ -138,6 +139,27 @@ export const EnvelopeDistributeDialog = ({
     });
   }, [recipientsWithIndex, envelope.authOptions]);
 
+  /**
+   * Whether any fields significantly overlap each other. This is surfaced as a
+   * non-blocking warning since overlapping fields still allow sending, but can
+   * complicate the signing process or cause fields to behave unexpectedly.
+   */
+  const hasOverlappingEnvelopeFields = useMemo(
+    () =>
+      hasOverlappingFields(
+        envelope.fields.map((field) => ({
+          id: field.id,
+          envelopeItemId: field.envelopeItemId,
+          page: field.page,
+          positionX: Number(field.positionX),
+          positionY: Number(field.positionY),
+          width: Number(field.width),
+          height: Number(field.height),
+        })),
+      ),
+    [envelope.fields],
+  );
+
   const invalidEnvelopeCode = useMemo(() => {
     if (recipientsMissingSignatureFields.length > 0) {
       return 'MISSING_SIGNATURES';
@@ -206,6 +228,11 @@ export const EnvelopeDistributeDialog = ({
   };
 
   useEffect(() => {
+    // Default the distribution method tab to the envelope's configured setting.
+    if (isOpen && envelope.documentMeta) {
+      setValue('meta.distributionMethod', envelope.documentMeta.distributionMethod);
+    }
+
     // Resync the whole envelope if the envelope is mid saving.
     if (isOpen && (isAutosaving || autosaveError)) {
       void handleSync();
@@ -235,6 +262,24 @@ export const EnvelopeDistributeDialog = ({
           <Form {...form}>
             <form onSubmit={handleSubmit(onFormSubmit)}>
               <fieldset disabled={isSubmitting}>
+                {hasOverlappingEnvelopeFields && (
+                  <Alert variant="warning" className="mb-4 flex flex-row items-start gap-3">
+                    <AlertTriangleIcon className="mt-0.5 h-5 w-5 shrink-0" />
+
+                    <div className="flex flex-col gap-1">
+                      <AlertTitle>
+                        <Trans>Overlapping fields detected</Trans>
+                      </AlertTitle>
+                      <AlertDescription>
+                        <Trans>
+                          Some fields are placed on top of each other. This may complicate the signing process or cause
+                          fields to not work as expected.
+                        </Trans>
+                      </AlertDescription>
+                    </div>
+                  </Alert>
+                )}
+
                 <Tabs
                   onValueChange={(value) =>
                     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions

apps/remix/app/components/dialogs/envelope-download-dialog.tsx

@@ -163,14 +163,14 @@ export const EnvelopeDownloadDialog = ({
           {isLoadingEnvelopeItems
             ? Array.from({ length: 1 }).map((_, index) => (
                 <div key={index} className="flex items-center gap-2 rounded-lg border border-border bg-card p-4">
-                  <Skeleton className="h-10 w-10 flex-shrink-0 rounded-lg" />
+                  <Skeleton className="h-10 w-10 shrink-0 rounded-lg" />
 
                   <div className="flex w-full flex-col gap-2">
                     <Skeleton className="h-4 w-28 rounded-lg" />
                     <Skeleton className="h-4 w-20 rounded-lg" />
                   </div>
 
-                  <Skeleton className="h-10 w-20 flex-shrink-0 rounded-lg" />
+                  <Skeleton className="h-10 w-20 shrink-0 rounded-lg" />
                 </div>
               ))
             : envelopeItems.map((item) => (
@@ -178,7 +178,7 @@ export const EnvelopeDownloadDialog = ({
                   key={item.id}
                   className="flex items-center gap-4 rounded-lg border border-border bg-card p-4 transition-colors hover:bg-accent/50"
                 >
-                  <div className="flex-shrink-0">
+                  <div className="shrink-0">
                     <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                       <FileTextIcon className="h-5 w-5 text-primary" />
                     </div>
@@ -194,7 +194,7 @@ export const EnvelopeDownloadDialog = ({
                     </p>
                   </div>
 
-                  <div className="flex flex-shrink-0 items-center gap-2">
+                  <div className="flex shrink-0 items-center gap-2">
                     <Button
                       variant="outline"
                       size="sm"

apps/remix/app/components/dialogs/envelope-duplicate-dialog.tsx

@@ -1,6 +1,7 @@
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import {
   Dialog,
   DialogClose,
@@ -11,10 +12,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
+import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
 import { useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 
 import { useCurrentTeam } from '~/providers/team';
@@ -37,6 +40,15 @@ export const EnvelopeDuplicateDialog = ({ envelopeId, envelopeType, trigger }: E
 
   const isDocument = envelopeType === EnvelopeType.DOCUMENT;
 
+  const form = useForm({
+    defaultValues: {
+      includeRecipients: true,
+      includeFields: true,
+    },
+  });
+
+  const includeRecipients = form.watch('includeRecipients');
+
   const { mutateAsync: duplicateEnvelope, isPending: isDuplicating } = trpc.envelope.duplicate.useMutation({
     onSuccess: async ({ id }) => {
       toast({
@@ -55,8 +67,14 @@ export const EnvelopeDuplicateDialog = ({ envelopeId, envelopeType, trigger }: E
   });
 
   const onDuplicate = async () => {
+    const { includeRecipients, includeFields } = form.getValues();
+
     try {
-      await duplicateEnvelope({ envelopeId });
+      await duplicateEnvelope({
+        envelopeId,
+        includeRecipients,
+        includeFields: includeRecipients && includeFields,
+      });
     } catch {
       toast({
         title: t`Something went wrong`,
@@ -70,7 +88,20 @@ export const EnvelopeDuplicateDialog = ({ envelopeId, envelopeType, trigger }: E
   };
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !isDuplicating && setOpen(value)}>
+    <Dialog
+      open={open}
+      onOpenChange={(value) => {
+        if (isDuplicating) {
+          return;
+        }
+
+        setOpen(value);
+
+        if (!value) {
+          form.reset();
+        }
+      }}
+    >
       {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
 
       <DialogContent>
@@ -87,6 +118,49 @@ export const EnvelopeDuplicateDialog = ({ envelopeId, envelopeType, trigger }: E
           </DialogDescription>
         </DialogHeader>
 
+        <div className="twv3-space-y-4">
+          <Controller
+            control={form.control}
+            name="includeRecipients"
+            render={({ field }) => (
+              <div className="twv3-space-x-2 flex items-center">
+                <Checkbox
+                  id="envelopeDuplicateIncludeRecipients"
+                  checked={field.value}
+                  onCheckedChange={(checked) => {
+                    field.onChange(checked === true);
+
+                    if (!checked) {
+                      form.setValue('includeFields', false);
+                    }
+                  }}
+                />
+                <Label htmlFor="envelopeDuplicateIncludeRecipients">
+                  <Trans>Include Recipients</Trans>
+                </Label>
+              </div>
+            )}
+          />
+
+          <Controller
+            control={form.control}
+            name="includeFields"
+            render={({ field }) => (
+              <div className="twv3-space-x-2 flex items-center">
+                <Checkbox
+                  id="envelopeDuplicateIncludeFields"
+                  checked={field.value}
+                  disabled={!includeRecipients}
+                  onCheckedChange={(checked) => field.onChange(checked === true)}
+                />
+                <Label htmlFor="envelopeDuplicateIncludeFields" className={!includeRecipients ? 'opacity-50' : ''}>
+                  <Trans>Include Fields</Trans>
+                </Label>
+              </div>
+            )}
+          />
+        </div>
+
         <DialogFooter>
           <DialogClose asChild>
             <Button type="button" variant="secondary" disabled={isDuplicating}>

apps/remix/app/components/dialogs/envelope-item-edit-dialog.tsx

@@ -225,7 +225,7 @@ export const EnvelopeItemEditDialog = ({
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
-            <fieldset disabled={form.formState.isSubmitting} className="space-y-4">
+            <fieldset disabled={form.formState.isSubmitting} className="twv3-space-y-4">
               <FormField
                 control={form.control}
                 name="title"
@@ -253,13 +253,13 @@ export const EnvelopeItemEditDialog = ({
                 </FormLabel>
 
                 {replacementFile ? (
-                  <div className="mt-1.5 space-y-2">
+                  <div className="twv3-space-y-2 mt-1.5">
                     <div
                       data-testid="envelope-item-edit-selected-file"
                       className="flex items-center justify-between rounded-md border border-border bg-muted/50 px-3 py-2"
                     >
-                      <div className="flex min-w-0 items-center space-x-2">
-                        <FileIcon className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
+                      <div className="twv3-space-x-2 flex min-w-0 items-center">
+                        <FileIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
                         <div className="min-w-0">
                           <p className="truncate font-medium text-sm">{replacementFile.file.name}</p>
                           <p className="text-muted-foreground text-xs">
@@ -309,7 +309,7 @@ export const EnvelopeItemEditDialog = ({
                     )}
                   >
                     <input {...getInputProps()} />
-                    <div className="flex items-center space-x-2 text-muted-foreground text-sm">
+                    <div className="twv3-space-x-2 flex items-center text-muted-foreground text-sm">
                       <UploadIcon className="h-4 w-4" />
                       <span>
                         <Trans>Drop PDF here or click to select</Trans>

apps/remix/app/components/dialogs/envelope-redistribute-dialog.tsx

@@ -25,14 +25,16 @@ import { Trans, useLingui } from '@lingui/react/macro';
 import { DocumentStatus, EnvelopeType, SigningStatus } from '@prisma/client';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
 import * as z from 'zod';
 import { getDistributeErrorMessage } from '~/utils/toast-error-messages';
 import { StackAvatar } from '../general/stack-avatar';
 
 export type EnvelopeRedistributeDialogProps = {
-  envelope: Pick<TEnvelope, 'id' | 'userId' | 'teamId' | 'status' | 'type' | 'documentMeta'> & {
+  envelope: Pick<TEnvelope, 'id' | 'status' | 'type'> & {
     recipients: TEnvelopeRecipientLite[];
   };
+  envelopeType?: EnvelopeType;
   trigger?: React.ReactNode;
 };
 
@@ -44,7 +46,7 @@ export const ZEnvelopeRedistributeFormSchema = z.object({
 
 export type TEnvelopeRedistributeFormSchema = z.infer<typeof ZEnvelopeRedistributeFormSchema>;
 
-export const EnvelopeRedistributeDialog = ({ envelope, trigger }: EnvelopeRedistributeDialogProps) => {
+export const EnvelopeRedistributeDialog = ({ envelope, envelopeType, trigger }: EnvelopeRedistributeDialogProps) => {
   const recipients = envelope.recipients;
 
   const { toast } = useToast();
@@ -70,9 +72,23 @@ export const EnvelopeRedistributeDialog = ({ envelope, trigger }: EnvelopeRedist
     try {
       await redistributeEnvelope({ envelopeId: envelope.id, recipients });
 
+      const successMessage = match(envelopeType)
+        .with(EnvelopeType.DOCUMENT, () => ({
+          title: t`Document resent`,
+          description: t`Your document has been resent successfully.`,
+        }))
+        .with(EnvelopeType.TEMPLATE, () => ({
+          title: t`Template resent`,
+          description: t`Your template has been resent successfully.`,
+        }))
+        .otherwise(() => ({
+          title: t`Envelope resent`,
+          description: t`Your envelope has been resent successfully.`,
+        }));
+
       toast({
-        title: t`Envelope resent`,
-        description: t`Your envelope has been resent successfully.`,
+        title: successMessage.title,
+        description: successMessage.description,
         duration: 5000,
       });
 

apps/remix/app/components/dialogs/envelope-save-as-template-dialog.tsx

@@ -116,12 +116,12 @@ export const EnvelopeSaveAsTemplateDialog = ({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-4">
+        <div className="twv3-space-y-4">
           <Controller
             control={form.control}
             name="includeRecipients"
             render={({ field }) => (
-              <div className="flex items-center space-x-2">
+              <div className="twv3-space-x-2 flex items-center">
                 <Checkbox
                   id="envelopeIncludeRecipients"
                   checked={field.value}
@@ -144,7 +144,7 @@ export const EnvelopeSaveAsTemplateDialog = ({
             control={form.control}
             name="includeFields"
             render={({ field }) => (
-              <div className="flex items-center space-x-2">
+              <div className="twv3-space-x-2 flex items-center">
                 <Checkbox
                   id="envelopeIncludeFields"
                   checked={field.value}

apps/remix/app/components/dialogs/envelopes-bulk-cancel-dialog.tsx

@@ -0,0 +1,159 @@
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { Label } from '@documenso/ui/primitives/label';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { plural } from '@lingui/core/macro';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useEffect, useState } from 'react';
+
+export type EnvelopesBulkCancelDialogProps = {
+  envelopeIds: string[];
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess?: () => void;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const EnvelopesBulkCancelDialog = ({
+  envelopeIds,
+  open,
+  onOpenChange,
+  onSuccess,
+  ...props
+}: EnvelopesBulkCancelDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const trpcUtils = trpc.useUtils();
+
+  const [reason, setReason] = useState('');
+
+  useEffect(() => {
+    if (open) {
+      setReason('');
+    }
+  }, [open]);
+
+  const { mutateAsync: bulkCancelEnvelopes, isPending } = trpc.envelope.bulk.cancel.useMutation({
+    onSuccess: async (result) => {
+      await trpcUtils.document.findDocumentsInternal.invalidate();
+
+      if (result.failedIds.length > 0) {
+        toast({
+          title: t`Documents partially cancelled`,
+          description: t`${plural(result.cancelledCount, {
+            one: '# document cancelled.',
+            other: '# documents cancelled.',
+          })} ${plural(result.failedIds.length, {
+            one: '# document could not be cancelled.',
+            other: '# documents could not be cancelled.',
+          })}`,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: t`Documents cancelled`,
+          description: plural(result.cancelledCount, {
+            one: '# document has been cancelled.',
+            other: '# documents have been cancelled.',
+          }),
+          variant: 'default',
+        });
+      }
+
+      onSuccess?.();
+      onOpenChange(false);
+    },
+    onError: () => {
+      toast({
+        title: t`Error`,
+        description: t`An error occurred while cancelling the documents.`,
+        variant: 'destructive',
+      });
+    },
+  });
+
+  return (
+    <Dialog {...props} open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Cancel Documents</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Plural
+              value={envelopeIds.length}
+              one="You are about to cancel the selected document."
+              other="You are about to cancel # documents."
+            />
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="warning">
+          <AlertDescription>
+            <p>
+              <Trans>Only pending documents you have permission to manage will be cancelled.</Trans>
+            </p>
+
+            <p className="mt-1">
+              <Trans>Once confirmed, the following will occur:</Trans>
+            </p>
+
+            <ul className="mt-0.5 list-inside list-disc">
+              <li>
+                <Trans>The document signing process will be stopped</Trans>
+              </li>
+              <li>
+                <Trans>Recipients will be notified that the document was cancelled</Trans>
+              </li>
+              <li>
+                <Trans>The documents will remain in your dashboard marked as Cancelled</Trans>
+              </li>
+            </ul>
+          </AlertDescription>
+        </Alert>
+
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="bulk-cancel-reason">
+            <Trans>Reason (optional)</Trans>
+          </Label>
+
+          <Textarea
+            id="bulk-cancel-reason"
+            value={reason}
+            onChange={(event) => setReason(event.target.value)}
+            placeholder={t`Add an optional reason for cancelling these documents`}
+          />
+        </div>
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)} disabled={isPending}>
+            <Trans>Cancel</Trans>
+          </Button>
+
+          <Button
+            onClick={(e) => {
+              e.preventDefault();
+              void bulkCancelEnvelopes({ envelopeIds, reason: reason || undefined });
+            }}
+            loading={isPending}
+            variant="destructive"
+          >
+            <Trans>Cancel documents</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/envelopes-bulk-move-dialog.tsx

@@ -28,7 +28,7 @@ export type EnvelopesBulkMoveDialogProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   currentFolderId?: string;
-  onSuccess?: () => void;
+  onSuccess?: (folderId: string | null) => Promise<void> | void;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
 const ZBulkMoveFormSchema = z.object({
@@ -99,11 +99,12 @@ export const EnvelopesBulkMoveDialog = ({
         await trpcUtils.template.findTemplates.invalidate();
       }
 
+      await onSuccess?.(data.folderId);
+
       toast({
         description: t`Selected items have been moved.`,
       });
 
-      onSuccess?.();
       onOpenChange(false);
     } catch (err) {
       const error = AppError.parseError(err);
@@ -172,7 +173,7 @@ export const EnvelopesBulkMoveDialog = ({
                   </FormLabel>
 
                   <FormControl>
-                    <div className="max-h-96 space-y-2 overflow-y-auto">
+                    <div className="twv3-space-y-2 max-h-96 overflow-y-auto">
                       {isFoldersLoading ? (
                         <div className="flex h-10 items-center justify-center">
                           <Loader2 className="h-4 w-4 animate-spin" />

apps/remix/app/components/dialogs/folder-create-dialog.tsx

@@ -103,7 +103,7 @@ export const FolderCreateDialog = ({ type, trigger, parentFolderId, ...props }:
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
-            <fieldset disabled={form.formState.isSubmitting} className="space-y-4">
+            <fieldset disabled={form.formState.isSubmitting} className="twv3-space-y-4">
               <FormField
                 control={form.control}
                 name="name"

apps/remix/app/components/dialogs/folder-delete-dialog.tsx

@@ -113,7 +113,7 @@ export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDelet
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset disabled={form.formState.isSubmitting} className="space-y-4">
+            <fieldset disabled={form.formState.isSubmitting} className="twv3-space-y-4">
               <FormField
                 control={form.control}
                 name="confirmText"

apps/remix/app/components/dialogs/folder-move-dialog.tsx

@@ -126,14 +126,14 @@ export const FolderMoveDialog = ({ foldersData, folder, isOpen, onOpenChange }:
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset disabled={form.formState.isSubmitting} className="space-y-4">
+            <fieldset disabled={form.formState.isSubmitting} className="twv3-space-y-4">
               <FormField
                 control={form.control}
                 name="targetFolderId"
                 render={({ field }) => (
                   <FormItem>
                     <FormControl>
-                      <div className="max-h-96 space-y-2 overflow-y-auto">
+                      <div className="twv3-space-y-2 max-h-96 overflow-y-auto">
                         <Button
                           type="button"
                           variant={!field.value ? 'default' : 'outline'}

apps/remix/app/components/dialogs/folder-update-dialog.tsx

@@ -105,7 +105,7 @@ export const FolderUpdateDialog = ({ folder, isOpen, onOpenChange }: FolderUpdat
         </DialogHeader>
 
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onFormSubmit)} className="space-y-4">
+          <form onSubmit={form.handleSubmit(onFormSubmit)} className="twv3-space-y-4">
             <FormField
               control={form.control}
               name="name"

apps/remix/app/components/dialogs/organisation-create-dialog.tsx

@@ -136,7 +136,7 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
     <Dialog {...props} open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
-          <Button className="flex-shrink-0" variant="secondary">
+          <Button className="shrink-0" variant="secondary">
             <Trans>Create organisation</Trans>
           </Button>
         )}
@@ -199,7 +199,7 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
 
               <Form {...form}>
                 <form onSubmit={form.handleSubmit(onFormSubmit)}>
-                  <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+                  <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
                     <FormField
                       control={form.control}
                       name="name"
@@ -305,7 +305,7 @@ const BillingPlanForm = ({ value, onChange, plans, canCreateFreeOrganisation }:
   };
 
   return (
-    <div className="space-y-4">
+    <div className="twv3-space-y-4">
       <Tabs
         className="flex w-full items-center justify-center"
         defaultValue="monthlyPrice"
@@ -327,7 +327,7 @@ const BillingPlanForm = ({ value, onChange, plans, canCreateFreeOrganisation }:
         <button
           onClick={() => onChange('')}
           className={cn(
-            'flex cursor-pointer items-center space-x-2 rounded-md border p-4 transition-all hover:border-primary hover:shadow-sm',
+            'twv3-space-x-2 flex cursor-pointer items-center rounded-md border p-4 transition-all hover:border-primary hover:shadow-xs',
             {
               'border-primary ring-2 ring-primary/10 ring-offset-1': '' === value,
             },
@@ -360,7 +360,7 @@ const BillingPlanForm = ({ value, onChange, plans, canCreateFreeOrganisation }:
             key={plan[billingPeriod]?.id}
             onClick={() => onChange(plan[billingPeriod]?.id ?? '')}
             className={cn(
-              'flex cursor-pointer items-center space-x-2 rounded-md border p-4 transition-all hover:border-primary hover:shadow-sm',
+              'twv3-space-x-2 flex cursor-pointer items-center rounded-md border p-4 transition-all hover:border-primary hover:shadow-xs',
               {
                 'border-primary ring-2 ring-primary/10 ring-offset-1': plan[billingPeriod]?.id === value,
               },
@@ -382,7 +382,7 @@ const BillingPlanForm = ({ value, onChange, plans, canCreateFreeOrganisation }:
         <Link
           to="https://documen.so/enterprise-cta"
           target="_blank"
-          className="flex items-center space-x-2 rounded-md border bg-muted/30 p-4"
+          className="twv3-space-x-2 flex items-center rounded-md border bg-muted/30 p-4"
         >
           <div className="flex-1 font-normal">
             <p className="font-medium text-muted-foreground">

apps/remix/app/components/dialogs/organisation-delete-dialog.tsx

@@ -117,7 +117,7 @@ export const OrganisationDeleteDialog = ({ trigger }: OrganisationDeleteDialogPr
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+            <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
               <FormField
                 control={form.control}
                 name="organisationName"

apps/remix/app/components/dialogs/organisation-email-create-dialog.tsx

@@ -114,7 +114,7 @@ export const OrganisationEmailCreateDialog = ({
     <Dialog {...props} open={open} onOpenChange={(value) => !isPending && setOpen(value)}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
-          <Button className="flex-shrink-0" variant="secondary">
+          <Button className="shrink-0" variant="secondary">
             <Trans>Add Email</Trans>
           </Button>
         )}
@@ -135,7 +135,7 @@ export const OrganisationEmailCreateDialog = ({
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset className="flex h-full flex-col space-y-4" disabled={isPending}>
+            <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={isPending}>
               <FormField
                 control={form.control}
                 name="emailName"

apps/remix/app/components/dialogs/organisation-email-domain-create-dialog.tsx

@@ -113,7 +113,7 @@ export const OrganisationEmailDomainCreateDialog = ({ trigger, ...props }: Organ
     <Dialog {...props} open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
-          <Button className="flex-shrink-0" variant="secondary">
+          <Button className="shrink-0" variant="secondary">
             <Trans>Add Email Domain</Trans>
           </Button>
         )}
@@ -135,7 +135,7 @@ export const OrganisationEmailDomainCreateDialog = ({ trigger, ...props }: Organ
 
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onFormSubmit)}>
-              <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+              <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
                 <FormField
                   control={form.control}
                   name="domain"

apps/remix/app/components/dialogs/organisation-email-domain-delete-dialog.tsx

@@ -106,7 +106,7 @@ export const OrganisationEmailDomainDeleteDialog = ({
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset disabled={form.formState.isSubmitting} className="space-y-4">
+            <fieldset disabled={form.formState.isSubmitting} className="twv3-space-y-4">
               <FormField
                 control={form.control}
                 name="confirmText"

apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx

@@ -59,11 +59,11 @@ export const OrganisationEmailDomainRecordContent = ({ records }: { records: Dom
         </DialogDescription>
       </DialogHeader>
 
-      <div className="space-y-6">
-        <div className="space-y-4">
+      <div className="twv3-space-y-6">
+        <div className="twv3-space-y-4">
           {records.map((record) => (
-            <div className="space-y-4 rounded-md border p-4" key={record.name}>
-              <div className="space-y-2">
+            <div className="twv3-space-y-4 rounded-md border p-4" key={record.name}>
+              <div className="twv3-space-y-2">
                 <Label>
                   <Trans>Record Type</Trans>
                 </Label>
@@ -79,7 +79,7 @@ export const OrganisationEmailDomainRecordContent = ({ records }: { records: Dom
                 </div>
               </div>
 
-              <div className="space-y-2">
+              <div className="twv3-space-y-2">
                 <Label>
                   <Trans>Record Name</Trans>
                 </Label>
@@ -95,7 +95,7 @@ export const OrganisationEmailDomainRecordContent = ({ records }: { records: Dom
                 </div>
               </div>
 
-              <div className="space-y-2">
+              <div className="twv3-space-y-2">
                 <Label>
                   <Trans>Record Value</Trans>
                 </Label>

apps/remix/app/components/dialogs/organisation-email-update-dialog.tsx

@@ -115,7 +115,7 @@ export const OrganisationEmailUpdateDialog = ({
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset className="flex h-full flex-col space-y-4" disabled={isPending}>
+            <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={isPending}>
               <FormField
                 control={form.control}
                 name="emailName"

apps/remix/app/components/dialogs/organisation-group-create-dialog.tsx

@@ -108,7 +108,7 @@ export const OrganisationGroupCreateDialog = ({ trigger, ...props }: Organisatio
     <Dialog {...props} open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
-          <Button className="flex-shrink-0" variant="secondary">
+          <Button className="shrink-0" variant="secondary">
             <Trans>Create group</Trans>
           </Button>
         )}
@@ -127,7 +127,7 @@ export const OrganisationGroupCreateDialog = ({ trigger, ...props }: Organisatio
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+            <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
               <FormField
                 control={form.control}
                 name="name"

apps/remix/app/components/dialogs/organisation-member-invite-dialog.tsx

@@ -313,10 +313,10 @@ export const OrganisationMemberInviteDialog = ({ trigger, ...props }: Organisati
             <TabsContent value="INDIVIDUAL">
               <Form {...form}>
                 <form onSubmit={form.handleSubmit(onFormSubmit)}>
-                  <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
-                    <div className="custom-scrollbar -m-1 max-h-[60vh] space-y-4 overflow-y-auto p-1">
+                  <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
+                    <div className="custom-scrollbar twv3-space-y-4 -m-1 max-h-[60vh] overflow-y-auto p-1">
                       {organisationMemberInvites.map((organisationMemberInvite, index) => (
-                        <div className="flex w-full flex-row space-x-4" key={organisationMemberInvite.id}>
+                        <div className="twv3-space-x-4 flex w-full flex-row" key={organisationMemberInvite.id}>
                           <FormField
                             control={form.control}
                             name={`invitations.${index}.email`}
@@ -409,7 +409,7 @@ export const OrganisationMemberInviteDialog = ({ trigger, ...props }: Organisati
             </TabsContent>
 
             <TabsContent value="BULK">
-              <div className="mt-4 space-y-4">
+              <div className="twv3-space-y-4 mt-4">
                 <Card gradient className="h-32">
                   <CardContent
                     className="flex h-full cursor-pointer flex-col items-center justify-center rounded-lg p-0 text-muted-foreground/80 transition-colors hover:text-muted-foreground/90"

apps/remix/app/components/dialogs/passkey-create-dialog.tsx

@@ -147,7 +147,7 @@ export const PasskeyCreateDialog = ({ trigger, onSuccess, ...props }: PasskeyCre
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+            <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
               <FormField
                 control={form.control}
                 name="passkeyName"

apps/remix/app/components/dialogs/public-profile-template-manage-dialog.tsx

@@ -214,7 +214,7 @@ export const ManagePublicTemplateDialog = ({
 
   return (
     <Dialog {...props} open={isOpen || open} onOpenChange={handleOnOpenChange}>
-      <fieldset disabled={isLoading} className="relative flex-shrink-0">
+      <fieldset disabled={isLoading} className="relative shrink-0">
         <DialogTrigger asChild>{trigger}</DialogTrigger>
 
         <AnimateGenericFadeInOut motionKey={currentStep}>
@@ -311,7 +311,7 @@ export const ManagePublicTemplateDialog = ({
                 </DialogHeader>
 
                 <Form {...form}>
-                  <form className="flex h-full flex-col space-y-4" onSubmit={form.handleSubmit(onFormSubmit)}>
+                  <form className="twv3-space-y-4 flex h-full flex-col" onSubmit={form.handleSubmit(onFormSubmit)}>
                     <FormField
                       control={form.control}
                       name="publicTitle"

apps/remix/app/components/dialogs/sign-field-checkbox-dialog.tsx

@@ -102,8 +102,8 @@ export const SignFieldCheckboxDialog = createCallable<SignFieldCheckboxDialogPro
                 call.end(data.values.map((value, i) => (value.checked ? i : null)).filter((value) => value !== null)),
               )}
             >
-              <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
-                <ul className="space-y-3">
+              <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
+                <ul className="twv3-space-y-3">
                   {(formValues.values || []).map((value, index) => (
                     <li key={`checkbox-${index}`}>
                       <FormField

apps/remix/app/components/dialogs/sign-field-email-dialog.tsx

@@ -51,7 +51,7 @@ export const SignFieldEmailDialog = createCallable<SignFieldEmailDialogProps, st
 
           <Form {...form}>
             <form onSubmit={form.handleSubmit((data) => call.end(data.email))}>
-              <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+              <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
                 <FormField
                   control={form.control}
                   name="email"

apps/remix/app/components/dialogs/sign-field-initials-dialog.tsx

@@ -49,7 +49,7 @@ export const SignFieldInitialsDialog = createCallable<SignFieldInitialsDialogPro
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit((data) => call.end(data.initials))}>
-            <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+            <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
               <FormField
                 control={form.control}
                 name="initials"

apps/remix/app/components/dialogs/sign-field-name-dialog.tsx

@@ -49,7 +49,7 @@ export const SignFieldNameDialog = createCallable<SignFieldNameDialogProps, stri
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit((data) => call.end(data.name))}>
-            <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+            <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
               <FormField
                 control={form.control}
                 name="name"

apps/remix/app/components/dialogs/sign-field-number-dialog.tsx

@@ -107,7 +107,7 @@ export const SignFieldNumberDialog = createCallable<SignFieldNumberDialogProps,
 
           <Form {...form}>
             <form onSubmit={form.handleSubmit((data) => call.end(data.number))}>
-              <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+              <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
                 <FormField
                   control={form.control}
                   name="number"

apps/remix/app/components/dialogs/sign-field-text-dialog.tsx

@@ -51,7 +51,7 @@ export const SignFieldTextDialog = createCallable<SignFieldTextDialogProps, stri
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit((data) => call.end(data.text))}>
-            <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+            <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
               <FormField
                 control={form.control}
                 name="text"

apps/remix/app/components/dialogs/team-create-dialog.tsx

@@ -154,7 +154,7 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
     <Dialog {...props} open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
-          <Button className="flex-shrink-0" variant="secondary">
+          <Button className="shrink-0" variant="secondary">
             <Trans>Create team</Trans>
           </Button>
         )}
@@ -195,7 +195,7 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
         {dialogState === 'form' && (
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onFormSubmit)}>
-              <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+              <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
                 <FormField
                   control={form.control}
                   name="teamName"
@@ -256,7 +256,7 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
                   control={form.control}
                   name="inheritMembers"
                   render={({ field }) => (
-                    <FormItem className="flex items-center space-x-2">
+                    <FormItem className="twv3-space-x-2 flex items-center">
                       <FormControl>
                         <div className="flex items-center">
                           <Checkbox id="inherit-members" checked={field.value} onCheckedChange={field.onChange} />

apps/remix/app/components/dialogs/team-delete-dialog.tsx

@@ -142,7 +142,7 @@ export const TeamDeleteDialog = ({ trigger, teamId, teamName, redirectTo }: Team
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+            <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
               <FormField
                 control={form.control}
                 name="teamName"

apps/remix/app/components/dialogs/team-email-add-dialog.tsx

@@ -119,7 +119,7 @@ export const TeamEmailAddDialog = ({ teamId, trigger, ...props }: TeamEmailAddDi
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+            <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
               <FormField
                 control={form.control}
                 name="name"

apps/remix/app/components/dialogs/team-email-update-dialog.tsx

@@ -104,7 +104,7 @@ export const TeamEmailUpdateDialog = ({ teamEmail, trigger, ...props }: TeamEmai
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+            <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
               <FormField
                 control={form.control}
                 name="name"

apps/remix/app/components/dialogs/team-group-create-dialog.tsx

@@ -202,10 +202,10 @@ export const TeamGroupCreateDialog = ({ ...props }: TeamGroupCreateDialogProps)
 
               {step === 'ROLES' && (
                 <>
-                  <div className="custom-scrollbar -m-1 max-h-[60vh] space-y-4 overflow-y-auto p-1">
+                  <div className="custom-scrollbar twv3-space-y-4 -m-1 max-h-[60vh] overflow-y-auto p-1">
                     {form.getValues('groups').map((group, index) => (
-                      <div className="flex w-full flex-row space-x-4" key={index}>
-                        <div className="w-full space-y-2">
+                      <div className="twv3-space-x-4 flex w-full flex-row" key={index}>
+                        <div className="twv3-space-y-2 w-full">
                           {index === 0 && (
                             <FormLabel>
                               <Trans>Group</Trans>

apps/remix/app/components/dialogs/team-member-create-dialog.tsx

@@ -241,7 +241,7 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
                     control={form.control}
                     name="members"
                     render={({ field }) => (
-                      <FormItem className="space-y-2">
+                      <FormItem className="twv3-space-y-2">
                         <FormLabel>
                           <Trans>Members</Trans>
                         </FormLabel>
@@ -310,7 +310,7 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
                             </FormDescription>
 
                             {canInviteOrganisationMembers && (
-                              <Alert variant="neutral" className="mt-2 flex items-center gap-2 space-y-0">
+                              <Alert variant="neutral" className="twv3-space-y-0 mt-2 flex items-center gap-2">
                                 <div>
                                   <UserPlusIcon className="h-5 w-5 text-muted-foreground" />
                                 </div>
@@ -358,10 +358,10 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
 
               {step === 'MEMBERS' && (
                 <>
-                  <div className="custom-scrollbar -m-1 max-h-[60vh] space-y-4 overflow-y-auto p-1">
+                  <div className="custom-scrollbar twv3-space-y-4 -m-1 max-h-[60vh] overflow-y-auto p-1">
                     {form.getValues('members').map((member, index) => (
-                      <div className="flex w-full flex-row space-x-4" key={index}>
-                        <div className="w-full space-y-2">
+                      <div className="twv3-space-x-4 flex w-full flex-row" key={index}>
+                        <div className="twv3-space-y-2 w-full">
                           {index === 0 && (
                             <FormLabel>
                               <Trans>Member</Trans>

apps/remix/app/components/dialogs/team-member-delete-dialog.tsx

@@ -16,6 +16,17 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { useState } from 'react';
+import { match } from 'ts-pattern';
+
+/**
+ * The reason a team member cannot be removed from the team. When set, the delete
+ * dialog explains the reason instead of offering a confirm button.
+ */
+export type TeamMemberDeleteDisableReason =
+  | 'TEAM_OWNER'
+  | 'HIGHER_ROLE'
+  | 'INHERIT_MEMBER_ENABLED'
+  | 'INHERITED_MEMBER';
 
 export type TeamMemberDeleteDialogProps = {
   teamId: number;
@@ -23,7 +34,7 @@ export type TeamMemberDeleteDialogProps = {
   memberId: string;
   memberName: string;
   memberEmail: string;
-  isInheritMemberEnabled: boolean | null;
+  disableReason?: TeamMemberDeleteDisableReason | null;
   trigger?: React.ReactNode;
 };
 
@@ -34,7 +45,7 @@ export const TeamMemberDeleteDialog = ({
   memberId,
   memberName,
   memberEmail,
-  isInheritMemberEnabled,
+  disableReason,
 }: TeamMemberDeleteDialogProps) => {
   const [open, setOpen] = useState(false);
 
@@ -86,10 +97,19 @@ export const TeamMemberDeleteDialog = ({
           </DialogDescription>
         </DialogHeader>
 
-        {isInheritMemberEnabled ? (
+        {disableReason ? (
           <Alert variant="neutral">
             <AlertDescription>
-              <Trans>You cannot remove members from this team if the inherit member feature is enabled.</Trans>
+              {match(disableReason)
+                .with('TEAM_OWNER', () => <Trans>You cannot remove the organisation owner from the team.</Trans>)
+                .with('HIGHER_ROLE', () => <Trans>You cannot remove a member with a role higher than your own.</Trans>)
+                .with('INHERIT_MEMBER_ENABLED', () => (
+                  <Trans>You cannot remove members from this team while the inherit member feature is enabled.</Trans>
+                ))
+                .with('INHERITED_MEMBER', () => (
+                  <Trans>This member is inherited from a group and cannot be removed from the team directly.</Trans>
+                ))
+                .exhaustive()}
             </AlertDescription>
           </Alert>
         ) : (
@@ -109,11 +129,10 @@ export const TeamMemberDeleteDialog = ({
               <Trans>Close</Trans>
             </Button>
 
-            {!isInheritMemberEnabled && (
+            {!disableReason && (
               <Button
                 type="submit"
                 variant="destructive"
-                disabled={Boolean(isInheritMemberEnabled)}
                 loading={isDeletingTeamMember}
                 onClick={async () => deleteTeamMember({ teamId, memberId })}
               >

apps/remix/app/components/dialogs/template-bulk-send-dialog.tsx

@@ -222,7 +222,7 @@ export const TemplateBulkSendDialog = ({ templateId, recipients, trigger, onSucc
               control={form.control}
               name="sendImmediately"
               render={({ field }) => (
-                <FormItem className="flex items-center space-x-2">
+                <FormItem className="twv3-space-x-2 flex items-center">
                   <FormControl>
                     <div className="flex items-center">
                       <Checkbox id="send-immediately" checked={field.value} onCheckedChange={field.onChange} />

apps/remix/app/components/dialogs/template-direct-link-dialog.tsx

@@ -211,7 +211,7 @@ export const TemplateDirectLinkDialog = ({
                     </DialogDescription>
                   </DialogHeader>
 
-                  <ul className="mt-4 space-y-4 pl-12">
+                  <ul className="twv3-space-y-4 mt-4 pl-12">
                     {DIRECT_TEMPLATE_DOCUMENTATION.map((step, index) => (
                       <li className="relative" key={index}>
                         <div className="absolute -left-12">
@@ -259,7 +259,7 @@ export const TemplateDirectLinkDialog = ({
               .with({ token: P.nullish, currentStep: 'SELECT_RECIPIENT' }, () => (
                 <DialogContent className="relative">
                   {isCreatingTemplateDirectLink && validDirectTemplateRecipients.length !== 0 && (
-                    <div className="absolute inset-0 z-50 flex items-center justify-center rounded bg-white/50 dark:bg-black/50">
+                    <div className="absolute inset-0 z-50 flex items-center justify-center rounded-sm bg-white/50 dark:bg-black/50">
                       <LoaderIcon className="h-6 w-6 animate-spin text-gray-500" />
                     </div>
                   )}
@@ -405,7 +405,7 @@ export const TemplateDirectLinkDialog = ({
                             className="h-8 w-8"
                             onClick={() => void onCopyClick(token)}
                           >
-                            <ClipboardCopyIcon className="h-4 w-4 flex-shrink-0" />
+                            <ClipboardCopyIcon className="h-4 w-4 shrink-0" />
                           </Button>
                         </div>
                       </div>

apps/remix/app/components/dialogs/template-move-to-folder-dialog.tsx

@@ -1,232 +0,0 @@
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { FolderType } from '@documenso/lib/types/folder-type';
-import { formatTemplatesPath } from '@documenso/lib/utils/teams';
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { FolderIcon, HomeIcon, Loader2, Search } from 'lucide-react';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router';
-import { z } from 'zod';
-
-import { useCurrentTeam } from '~/providers/team';
-
-export type TemplateMoveToFolderDialogProps = {
-  templateId: number;
-  templateTitle: string;
-  isOpen: boolean;
-  onOpenChange: (open: boolean) => void;
-  currentFolderId?: string | null;
-} & Omit<DialogPrimitive.DialogProps, 'children'>;
-
-const ZMoveTemplateFormSchema = z.object({
-  folderId: z.string().nullable().optional(),
-});
-
-type TMoveTemplateFormSchema = z.infer<typeof ZMoveTemplateFormSchema>;
-
-export function TemplateMoveToFolderDialog({
-  templateId,
-  templateTitle,
-  isOpen,
-  onOpenChange,
-  currentFolderId,
-  ...props
-}: TemplateMoveToFolderDialogProps) {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const navigate = useNavigate();
-  const team = useCurrentTeam();
-
-  const [searchTerm, setSearchTerm] = useState('');
-
-  const form = useForm<TMoveTemplateFormSchema>({
-    resolver: zodResolver(ZMoveTemplateFormSchema),
-    defaultValues: {
-      folderId: currentFolderId ?? null,
-    },
-  });
-
-  const { data: folders, isLoading: isFoldersLoading } = trpc.folder.findFoldersInternal.useQuery(
-    {
-      parentId: currentFolderId ?? null,
-      type: FolderType.TEMPLATE,
-    },
-    {
-      enabled: isOpen,
-    },
-  );
-
-  const { mutateAsync: updateTemplate } = trpc.template.updateTemplate.useMutation();
-
-  useEffect(() => {
-    if (!isOpen) {
-      form.reset();
-      setSearchTerm('');
-    } else {
-      form.reset({ folderId: currentFolderId ?? null });
-    }
-  }, [isOpen, currentFolderId, form]);
-
-  const onSubmit = async (data: TMoveTemplateFormSchema) => {
-    try {
-      await updateTemplate({
-        templateId,
-        data: {
-          folderId: data.folderId ?? null,
-        },
-      });
-
-      toast({
-        title: _(msg`Template moved`),
-        description: _(msg`The template has been moved successfully.`),
-        variant: 'default',
-      });
-
-      onOpenChange(false);
-
-      const templatesPath = formatTemplatesPath(team.url);
-
-      if (data.folderId) {
-        void navigate(`${templatesPath}/f/${data.folderId}`);
-      } else {
-        void navigate(templatesPath);
-      }
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      if (error.code === AppErrorCode.NOT_FOUND) {
-        toast({
-          title: _(msg`Error`),
-          description: _(msg`The folder you are trying to move the template to does not exist.`),
-          variant: 'destructive',
-        });
-
-        return;
-      }
-
-      toast({
-        title: _(msg`Error`),
-        description: _(msg`An error occurred while moving the template.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const filteredFolders = folders?.data?.filter((folder) =>
-    folder.name.toLowerCase().includes(searchTerm.toLowerCase()),
-  );
-
-  return (
-    <Dialog {...props} open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Move Template to Folder</Trans>
-          </DialogTitle>
-
-          <DialogDescription>
-            <Trans>Move &quot;{templateTitle}&quot; to a folder</Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="relative">
-          <Search className="absolute top-3 left-2 h-4 w-4 text-muted-foreground" />
-          <Input
-            placeholder={_(msg`Search folders...`)}
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="pl-8"
-          />
-        </div>
-
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="mt-4 flex flex-col gap-y-4">
-            <FormField
-              control={form.control}
-              name="folderId"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>
-                    <Trans>Folder</Trans>
-                  </FormLabel>
-
-                  <FormControl>
-                    <div className="max-h-96 space-y-2 overflow-y-auto">
-                      {isFoldersLoading ? (
-                        <div className="flex h-10 items-center justify-center">
-                          <Loader2 className="h-4 w-4 animate-spin" />
-                        </div>
-                      ) : (
-                        <>
-                          <Button
-                            type="button"
-                            variant={field.value === null ? 'default' : 'outline'}
-                            className="w-full justify-start"
-                            onClick={() => field.onChange(null)}
-                            disabled={currentFolderId === null}
-                          >
-                            <HomeIcon className="mr-2 h-4 w-4" />
-                            <Trans>Home (No Folder)</Trans>
-                          </Button>
-
-                          {filteredFolders?.map((folder) => (
-                            <Button
-                              key={folder.id}
-                              type="button"
-                              variant={field.value === folder.id ? 'default' : 'outline'}
-                              className="w-full justify-start"
-                              onClick={() => field.onChange(folder.id)}
-                              disabled={currentFolderId === folder.id}
-                            >
-                              <FolderIcon className="mr-2 h-4 w-4" />
-                              {folder.name}
-                            </Button>
-                          ))}
-
-                          {searchTerm && filteredFolders?.length === 0 && (
-                            <div className="px-2 py-2 text-center text-muted-foreground text-sm">
-                              <Trans>No folders found</Trans>
-                            </div>
-                          )}
-                        </>
-                      )}
-                    </div>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <DialogFooter>
-              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                <Trans>Cancel</Trans>
-              </Button>
-
-              <Button type="submit" disabled={isFoldersLoading || form.formState.isSubmitting}>
-                <Trans>Move</Trans>
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-}

apps/remix/app/components/dialogs/template-use-dialog.tsx

@@ -240,9 +240,9 @@ export function TemplateUseDialog({
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
             <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
-              <div className="custom-scrollbar -m-1 max-h-[60vh] space-y-4 overflow-y-auto p-1">
+              <div className="custom-scrollbar twv3-space-y-4 -m-1 max-h-[60vh] overflow-y-auto p-1">
                 {formRecipients.map((recipient, index) => (
-                  <div className="flex w-full flex-row space-x-4" key={recipient.id}>
+                  <div className="twv3-space-x-4 flex w-full flex-row" key={recipient.id}>
                     {templateSigningOrder === DocumentSigningOrder.SEQUENTIAL && (
                       <FormField
                         control={form.control}
@@ -337,7 +337,7 @@ export function TemplateUseDialog({
                                     <InfoIcon className="mx-1 h-4 w-4" />
                                   </TooltipTrigger>
 
-                                  <TooltipContent className="z-[99999] max-w-md space-y-2 p-4 text-muted-foreground">
+                                  <TooltipContent className="twv3-space-y-2 z-[99999] max-w-md p-4 text-muted-foreground">
                                     <p>
                                       <Trans>
                                         The document will be immediately sent to recipients if this is checked.
@@ -362,7 +362,7 @@ export function TemplateUseDialog({
                                   <TooltipTrigger type="button">
                                     <InfoIcon className="mx-1 h-4 w-4" />
                                   </TooltipTrigger>
-                                  <TooltipContent className="z-[99999] max-w-md space-y-2 p-4 text-muted-foreground">
+                                  <TooltipContent className="twv3-space-y-2 z-[99999] max-w-md p-4 text-muted-foreground">
                                     <p>
                                       <Trans>Create the document as pending and ready to sign.</Trans>
                                     </p>
@@ -414,7 +414,7 @@ export function TemplateUseDialog({
                             <TooltipTrigger type="button">
                               <InfoIcon className="mx-1 h-4 w-4" />
                             </TooltipTrigger>
-                            <TooltipContent className="z-[99999] max-w-md space-y-2 p-4 text-muted-foreground">
+                            <TooltipContent className="twv3-space-y-2 z-[99999] max-w-md p-4 text-muted-foreground">
                               <p>
                                 <Trans>
                                   Upload a custom document to use instead of the template's default document
@@ -429,7 +429,7 @@ export function TemplateUseDialog({
                 />
 
                 {form.watch('useCustomDocument') && (
-                  <div className="my-4 space-y-2">
+                  <div className="twv3-space-y-2 my-4">
                     {isLoadingEnvelopeItems ? (
                       <SpinnerBox className="py-16" />
                     ) : (
@@ -445,7 +445,7 @@ export function TemplateUseDialog({
                                   key={item.id}
                                   className="flex items-center gap-4 rounded-lg border border-border bg-card p-4 transition-colors hover:bg-accent/10"
                                 >
-                                  <div className="flex-shrink-0">
+                                  <div className="shrink-0">
                                     <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                                       <FileTextIcon className="h-5 w-5 text-primary" />
                                     </div>
@@ -464,7 +464,7 @@ export function TemplateUseDialog({
                                     </p>
                                   </div>
 
-                                  <div className="flex flex-shrink-0 items-center gap-2">
+                                  <div className="flex shrink-0 items-center gap-2">
                                     {field.value ? (
                                       <div className="">
                                         <Button

apps/remix/app/components/dialogs/token-delete-dialog.tsx

@@ -117,7 +117,7 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
-            <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+            <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
               <FormField
                 control={form.control}
                 name="tokenName"

apps/remix/app/components/dialogs/webhook-create-dialog.tsx

@@ -94,7 +94,7 @@ export const WebhookCreateDialog = ({ trigger, ...props }: WebhookCreateDialogPr
     <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)} {...props}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
         {trigger ?? (
-          <Button className="flex-shrink-0">
+          <Button className="shrink-0">
             <Trans>Create Webhook</Trans>
           </Button>
         )}
@@ -112,7 +112,7 @@ export const WebhookCreateDialog = ({ trigger, ...props }: WebhookCreateDialogPr
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
-            <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+            <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
               <div className="flex flex-col-reverse gap-4 md:flex-row">
                 <FormField
                   control={form.control}

apps/remix/app/components/dialogs/webhook-delete-dialog.tsx

@@ -108,7 +108,7 @@ export const WebhookDeleteDialog = ({ webhook, children }: WebhookDeleteDialogPr
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
-            <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+            <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
               <FormField
                 control={form.control}
                 name="webhookUrl"

apps/remix/app/components/dialogs/webhook-test-dialog.tsx

@@ -88,7 +88,7 @@ export const WebhookTestDialog = ({ webhook, children }: WebhookTestDialogProps)
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
-            <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+            <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
               <FormField
                 control={form.control}
                 name="event"

apps/remix/app/components/embed/authoring/configure-document-advanced-settings.tsx

@@ -75,7 +75,7 @@ export const ConfigureDocumentAdvancedSettings = ({
         </TabsList>
 
         <TabsContent value="general" className="mt-0">
-          <div className="flex flex-col space-y-6">
+          <div className="twv3-space-y-6 flex flex-col">
             {features.allowConfigureSignatureTypes && (
               <FormField
                 control={control}
@@ -215,7 +215,7 @@ export const ConfigureDocumentAdvancedSettings = ({
 
         {features.allowConfigureCommunication && (
           <TabsContent value="communication" className="mt-0">
-            <div className="flex flex-col space-y-6">
+            <div className="twv3-space-y-6 flex flex-col">
               <FormField
                 control={control}
                 name="meta.distributionMethod"
@@ -254,7 +254,7 @@ export const ConfigureDocumentAdvancedSettings = ({
               />
 
               <fieldset
-                className="flex flex-col space-y-6 disabled:cursor-not-allowed disabled:opacity-60"
+                className="twv3-space-y-6 flex flex-col disabled:cursor-not-allowed disabled:opacity-60"
                 disabled={!isEmailDistribution}
               >
                 <FormField

apps/remix/app/components/embed/authoring/configure-document-recipients.tsx

@@ -147,7 +147,7 @@ export const ConfigureDocumentRecipients = ({ control, isSubmitting }: Configure
         control={control}
         name="meta.signingOrder"
         render={({ field }) => (
-          <FormItem className="mb-6 flex flex-row items-center space-x-2 space-y-0">
+          <FormItem className="twv3-space-x-2 twv3-space-y-0 mb-6 flex flex-row items-center">
             <FormControl>
               <Checkbox
                 {...field}
@@ -173,7 +173,7 @@ export const ConfigureDocumentRecipients = ({ control, isSubmitting }: Configure
         control={control}
         name="meta.allowDictateNextSigner"
         render={({ field: { value, ...field } }) => (
-          <FormItem className="mb-6 flex flex-row items-center space-x-2 space-y-0">
+          <FormItem className="twv3-space-x-2 twv3-space-y-0 mb-6 flex flex-row items-center">
             <FormControl>
               <Checkbox
                 {...field}
@@ -221,7 +221,7 @@ export const ConfigureDocumentRecipients = ({ control, isSubmitting }: Configure
       >
         <Droppable droppableId="signers">
           {(provided) => (
-            <div {...provided.droppableProps} ref={provided.innerRef} className="space-y-2">
+            <div {...provided.droppableProps} ref={provided.innerRef} className="twv3-space-y-2">
               {signers.map((signer, index) => (
                 <Draggable
                   key={signer.id}
@@ -254,7 +254,7 @@ export const ConfigureDocumentRecipients = ({ control, isSubmitting }: Configure
                                   'mb-6': errors?.signers?.[index] && !errors?.signers?.[index]?.signingOrder,
                                 })}
                               >
-                                <GripVertical className="h-5 w-5 flex-shrink-0 opacity-40" />
+                                <GripVertical className="h-5 w-5 shrink-0 opacity-40" />
                                 <FormControl>
                                   <Input
                                     type="number"

apps/remix/app/components/embed/authoring/configure-document-upload.tsx

@@ -158,7 +158,7 @@ export const ConfigureDocumentUpload = ({ isSubmitting = false }: ConfigureDocum
                         />
 
                         <div
-                          className={cn('flex flex-col space-y-1', {
+                          className={cn('twv3-space-y-1 flex flex-col', {
                             'text-primary': isDragActive,
                             'text-muted-foreground': !isDragActive,
                           })}

apps/remix/app/components/embed/authoring/configure-document-view.tsx

@@ -75,7 +75,7 @@ export const ConfigureDocumentView = ({
   const onFormSubmit = handleSubmit(onSubmit);
 
   return (
-    <div className="flex w-full flex-col space-y-8">
+    <div className="twv3-space-y-8 flex w-full flex-col">
       <div>
         <h2 className="mb-1 font-semibold text-foreground text-xl">
           {isTemplate ? <Trans>Configure Template</Trans> : <Trans>Configure Document</Trans>}
@@ -91,7 +91,7 @@ export const ConfigureDocumentView = ({
       </div>
 
       <Form {...form}>
-        <div className="flex flex-col space-y-8">
+        <div className="twv3-space-y-8 flex flex-col">
           <div>
             <FormField
               control={control}

apps/remix/app/components/embed/authoring/configure-fields-view.tsx

@@ -462,7 +462,7 @@ export const ConfigureFieldsView = ({
 
               <hr className="my-6" />
 
-              <div className="space-y-2">
+              <div className="twv3-space-y-2">
                 <FieldSelector
                   selectedField={selectedField}
                   onSelectedFieldChange={setSelectedField}
@@ -604,7 +604,7 @@ export const ConfigureFieldsView = ({
 
             <hr className="my-6" />
 
-            <div className="space-y-2">
+            <div className="twv3-space-y-2">
               <FieldSelector
                 selectedField={selectedField}
                 onSelectedFieldChange={(field) => {

apps/remix/app/components/embed/embed-direct-template-client-page.tsx

@@ -372,7 +372,7 @@ export const EmbedDirectTemplateClientPage = ({
         {/* Widget */}
         <div
           key={isExpanded ? 'expanded' : 'collapsed'}
-          className="group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:top-4 md:bottom-[unset] md:z-auto md:w-[350px] md:px-0"
+          className="group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full shrink-0 px-6 md:sticky md:top-4 md:bottom-[unset] md:z-auto md:w-[350px] md:px-0"
           data-expanded={isExpanded || undefined}
         >
           <div className="flex h-fit w-full flex-col rounded-xl border border-border bg-widget px-4 py-4 md:min-h-[min(calc(100dvh-2rem),48rem)] md:py-6">

apps/remix/app/components/embed/embed-document-signing-page-v1.tsx

@@ -304,7 +304,7 @@ export const EmbedSignDocumentV1ClientPage = ({
           {/* Widget */}
           <div
             key={isExpanded ? 'expanded' : 'collapsed'}
-            className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:top-4 md:bottom-[unset] md:z-auto md:w-[350px] md:px-0"
+            className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full shrink-0 px-6 md:sticky md:top-4 md:bottom-[unset] md:z-auto md:w-[350px] md:px-0"
             data-expanded={isExpanded || undefined}
           >
             <div className="embed--DocumentWidget flex w-full flex-col rounded-xl border border-border bg-widget px-4 py-4 md:py-6">
@@ -369,7 +369,7 @@ export const EmbedSignDocumentV1ClientPage = ({
 
                       <fieldset className="mt-2 rounded-2xl border border-border bg-white p-3 dark:bg-background">
                         <RadioGroup
-                          className="gap-0 space-y-3 shadow-none"
+                          className="twv3-space-y-3 gap-0 shadow-none"
                           value={selectedSignerId?.toString()}
                           onValueChange={(value) => setSelectedSignerId(Number(value))}
                         >

apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx

@@ -234,7 +234,7 @@ export const MultiSignDocumentSigningView = ({
                 {document.status !== DocumentStatus.COMPLETED && (
                   <div
                     key={isExpanded ? 'expanded' : 'collapsed'}
-                    className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:top-0 md:bottom-[unset] md:z-auto md:w-[350px] md:px-0"
+                    className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full shrink-0 px-6 md:sticky md:top-0 md:bottom-[unset] md:z-auto md:w-[350px] md:px-0"
                     data-expanded={isExpanded || undefined}
                   >
                     <div className="embed--DocumentWidget flex w-full flex-col rounded-xl border border-border bg-widget px-4 py-4 md:py-6">

apps/remix/app/components/forms/2fa/disable-authenticator-app-dialog.tsx

@@ -98,7 +98,7 @@ export const DisableAuthenticatorAppDialog = () => {
   return (
     <Dialog open={isOpen} onOpenChange={onCloseTwoFactorDisableDialog}>
       <DialogTrigger asChild={true}>
-        <Button className="flex-shrink-0" variant="destructive">
+        <Button className="shrink-0" variant="destructive">
           <Trans>Disable 2FA</Trans>
         </Button>
       </DialogTrigger>

apps/remix/app/components/forms/2fa/enable-authenticator-app-dialog.tsx

@@ -139,7 +139,7 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild={true}>
         <Button
-          className="flex-shrink-0"
+          className="shrink-0"
           loading={isSettingUp2FA}
           onClick={(e) => {
             e.preventDefault();

apps/remix/app/components/forms/2fa/view-recovery-codes-dialog.tsx

@@ -75,7 +75,7 @@ export const ViewRecoveryCodesDialog = () => {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <Button className="flex-shrink-0">
+        <Button className="shrink-0">
           <Trans>View Codes</Trans>
         </Button>
       </DialogTrigger>
@@ -120,7 +120,7 @@ export const ViewRecoveryCodesDialog = () => {
                 </DialogDescription>
               </DialogHeader>
 
-              <fieldset className="flex flex-col space-y-4" disabled={form.formState.isSubmitting}>
+              <fieldset className="twv3-space-y-4 flex flex-col" disabled={form.formState.isSubmitting}>
                 <FormField
                   name="token"
                   control={form.control}

apps/remix/app/components/forms/branding-preferences-form.tsx

@@ -500,7 +500,7 @@ export function BrandingPreferencesForm({
 
               <Accordion type="single" collapsible>
                 <AccordionItem value="custom-css" className="border-none">
-                  <AccordionTrigger className="rounded border px-3 py-2 text-left text-foreground hover:bg-muted/40 hover:no-underline">
+                  <AccordionTrigger className="rounded-sm border px-3 py-2 text-left text-foreground hover:bg-muted/40 hover:no-underline">
                     <Trans>Advanced — Custom CSS</Trans>
                   </AccordionTrigger>
 
@@ -538,7 +538,7 @@ export function BrandingPreferencesForm({
             </div>
           )}
 
-          <div className="flex flex-row justify-end space-x-4">
+          <div className="twv3-space-x-4 flex flex-row justify-end">
             <Button type="submit" loading={form.formState.isSubmitting}>
               <Trans>Update</Trans>
             </Button>

apps/remix/app/components/forms/document-preferences-form.tsx

@@ -552,7 +552,7 @@ export const DocumentPreferencesForm = ({
                   )}
 
                   {(field.value !== null || !canInherit) && (
-                    <div className="space-y-4">
+                    <div className="twv3-space-y-4">
                       <DefaultRecipientsMultiSelectCombobox
                         listValues={recipients}
                         onChange={field.onChange}
@@ -756,7 +756,7 @@ export const DocumentPreferencesForm = ({
             />
           )}
 
-          <div className="flex flex-row justify-end space-x-4">
+          <div className="twv3-space-x-4 flex flex-row justify-end">
             <Button type="submit" loading={form.formState.isSubmitting}>
               <Trans>Update</Trans>
             </Button>

apps/remix/app/components/forms/editor/editor-field-checkbox-form.tsx

@@ -272,7 +272,7 @@ export const EditorFieldCheckboxForm = ({
 
           <EditorGenericReadOnlyField formControl={form.control} />
 
-          <section className="space-y-2">
+          <section className="twv3-space-y-2">
             <div className="-mx-4 mt-2 mb-4">
               <Separator />
             </div>
@@ -287,7 +287,7 @@ export const EditorFieldCheckboxForm = ({
               </button>
             </div>
 
-            <ul className="space-y-2">
+            <ul className="twv3-space-y-2">
               {(formValues.values || []).map((value, index) => (
                 <li key={`checkbox-value-${index}`} className="flex flex-row items-center gap-2">
                   <FormField

apps/remix/app/components/forms/editor/editor-field-dropdown-form.tsx

@@ -190,7 +190,7 @@ export const EditorFieldDropdownForm = ({
 
           <EditorGenericReadOnlyField formControl={form.control} />
 
-          <section className="space-y-2">
+          <section className="twv3-space-y-2">
             <div className="-mx-4 mt-2 mb-4">
               <Separator />
             </div>
@@ -205,7 +205,7 @@ export const EditorFieldDropdownForm = ({
               </button>
             </div>
 
-            <ul className="space-y-2">
+            <ul className="twv3-space-y-2">
               {(formValues.values || []).map((value, index) => (
                 <li key={`dropdown-value-${index}`} className="flex flex-row gap-2">
                   <FormField

apps/remix/app/components/forms/editor/editor-field-generic-field-forms.tsx

@@ -237,7 +237,7 @@ export const EditorGenericRequiredField = ({
       control={formControl}
       name="required"
       render={({ field }) => (
-        <FormItem className={cn('flex items-center space-x-2', className)}>
+        <FormItem className={cn('twv3-space-x-2 flex items-center', className)}>
           <FormControl>
             <div className="flex items-center">
               <Checkbox
@@ -281,7 +281,7 @@ export const EditorGenericReadOnlyField = ({
       control={formControl}
       name="readOnly"
       render={({ field }) => (
-        <FormItem className={cn('flex items-center space-x-2', className)}>
+        <FormItem className={cn('twv3-space-x-2 flex items-center', className)}>
           <FormControl>
             <div className="flex items-center">
               <Checkbox

apps/remix/app/components/forms/editor/editor-field-number-form.tsx

@@ -230,7 +230,7 @@ export const EditorFieldNumberForm = ({
           <EditorGenericReadOnlyField formControl={form.control} />
 
           {/* Validation section */}
-          <section className="space-y-2">
+          <section className="twv3-space-y-2">
             <div className="-mx-4 mt-2 mb-4">
               <Separator />
             </div>

apps/remix/app/components/forms/editor/editor-field-radio-form.tsx

@@ -149,7 +149,7 @@ export const EditorFieldRadioForm = ({
 
           <EditorGenericReadOnlyField formControl={form.control} />
 
-          <section className="space-y-2">
+          <section className="twv3-space-y-2">
             <div className="-mx-4 mt-2 mb-4">
               <Separator />
             </div>
@@ -164,7 +164,7 @@ export const EditorFieldRadioForm = ({
               </button>
             </div>
 
-            <ul className="space-y-2">
+            <ul className="twv3-space-y-2">
               {(formValues.values || []).map((value, index) => (
                 <li key={`radio-value-${index}`} className="flex flex-row items-center gap-2">
                   <FormField

apps/remix/app/components/forms/email-preferences-form.tsx

@@ -185,7 +185,7 @@ export const EmailPreferencesForm = ({ settings, onFormSubmit, canInherit }: Ema
                 )}
 
                 {field.value && (
-                  <div className="space-y-2 rounded-md border p-4">
+                  <div className="twv3-space-y-2 rounded-md border p-4">
                     <DocumentEmailCheckboxes
                       value={field.value ?? DEFAULT_DOCUMENT_EMAIL_SETTINGS}
                       onChange={(value) => field.onChange(value)}
@@ -203,7 +203,7 @@ export const EmailPreferencesForm = ({ settings, onFormSubmit, canInherit }: Ema
             )}
           />
 
-          <div className="flex flex-row justify-end space-x-4">
+          <div className="twv3-space-x-4 flex flex-row justify-end">
             <Button type="submit" loading={form.formState.isSubmitting}>
               <Trans>Update</Trans>
             </Button>

apps/remix/app/components/forms/email-transport-form.tsx

@@ -67,7 +67,7 @@ export const EmailTransportForm = ({
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onFormSubmit)}>
-        <fieldset disabled={form.formState.isSubmitting} className="space-y-4">
+        <fieldset disabled={form.formState.isSubmitting} className="twv3-space-y-4">
           <FormField
             control={form.control}
             name="name"

apps/remix/app/components/forms/organisation-update-form.tsx

@@ -137,7 +137,7 @@ export const OrganisationUpdateForm = () => {
             )}
           />
 
-          <div className="flex flex-row justify-end space-x-4">
+          <div className="twv3-space-x-4 flex flex-row justify-end">
             <AnimatePresence>
               {form.formState.isDirty && (
                 <motion.div