fix: remove final references to tailwind-config package

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/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: NextConfig = {
-const config = {
   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";
+    /* Consumed by the `--font-*` theme tokens in @documenso/ui/styles/theme.css. */
-    --font-signature: "Caveat";
+    --font-family-sans: "Inter";
-    --font-noto: "Noto Sans", "Noto Sans Korean", "Noto Sans Japanese", "Noto Sans Chinese";
+    --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/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-distribute-dialog.tsx

@@ -264,7 +264,7 @@ export const EnvelopeDistributeDialog = ({
               <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 flex-shrink-0" />
+                    <AlertTriangleIcon className="mt-0.5 h-5 w-5 shrink-0" />
 
                     <div className="flex flex-col gap-1">
                       <AlertTitle>

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

@@ -118,12 +118,12 @@ export const EnvelopeDuplicateDialog = ({ envelopeId, envelopeType, trigger }: E
           </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="envelopeDuplicateIncludeRecipients"
                   checked={field.value}
@@ -146,7 +146,7 @@ export const EnvelopeDuplicateDialog = ({ envelopeId, envelopeType, trigger }: E
             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="envelopeDuplicateIncludeFields"
                   checked={field.value}

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">
+                      <div className="twv3-space-x-2 flex min-w-0 items-center">
-                        <FileIcon className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
+                        <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-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-move-dialog.tsx

@@ -173,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="twv3-space-y-6">
-        <div className="space-y-4">
+        <div className="twv3-space-y-4">
           {records.map((record) => (
-            <div className="space-y-4 rounded-md border p-4" key={record.name}>
+            <div className="twv3-space-y-4 rounded-md border p-4" key={record.name}>
-              <div className="space-y-2">
+              <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}>
+                  <fieldset className="twv3-space-y-4 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">
                       {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}>
+              <fieldset className="twv3-space-y-4 flex h-full flex-col" disabled={form.formState.isSubmitting}>
-                <ul className="space-y-3">
+                <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="twv3-space-x-4 flex w-full flex-row" key={index}>
-                        <div className="w-full space-y-2">
+                        <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="twv3-space-x-4 flex w-full flex-row" key={index}>
-                        <div className="w-full space-y-2">
+                        <div className="twv3-space-y-2 w-full">
                           {index === 0 && (
                             <FormLabel>
                               <Trans>Member</Trans>

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-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

apps/remix/app/components/forms/public-profile-form.tsx

@@ -148,7 +148,7 @@ export const PublicProfileForm = ({ className, profile, onProfileUpdate }: Publi
                           <Button
                             type="button"
                             variant="none"
-                            className="h-7 rounded bg-neutral-50 pr-0.5 pl-2 font-normal dark:border dark:border-neutral-500 dark:bg-neutral-600"
+                            className="h-7 rounded-sm bg-neutral-50 pr-0.5 pl-2 font-normal dark:border dark:border-neutral-500 dark:bg-neutral-600"
                             onClick={async () => onCopy()}
                           >
                             <p>
@@ -156,7 +156,7 @@ export const PublicProfileForm = ({ className, profile, onProfileUpdate }: Publi
                               <span className="font-semibold">{field.value}</span>
                             </p>
 
-                            <div className="ml-1 flex h-6 w-6 items-center justify-center rounded transition-all hover:bg-neutral-200 hover:active:bg-neutral-300 dark:hover:bg-neutral-500 dark:hover:active:bg-neutral-400">
+                            <div className="ml-1 flex h-6 w-6 items-center justify-center rounded-sm transition-all hover:bg-neutral-200 hover:active:bg-neutral-300 dark:hover:bg-neutral-500 dark:hover:active:bg-neutral-400">
                               <AnimatePresence mode="wait" initial={false}>
                                 <motion.div
                                   key={copiedTimeout ? 'copied' : 'copy'}
@@ -228,7 +228,7 @@ export const PublicProfileForm = ({ className, profile, onProfileUpdate }: Publi
             }}
           />
 
-          <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

apps/remix/app/components/forms/signup.tsx

@@ -209,7 +209,7 @@ export const SignUpForm = ({
   return (
     <div className={cn('flex justify-center gap-x-12', className)}>
       <div className="relative hidden flex-1 overflow-hidden rounded-xl border border-border xl:flex">
-        <div className="absolute -inset-8 -z-[2] backdrop-blur">
+        <div className="absolute -inset-8 -z-[2] backdrop-blur-sm">
           <img
             src={communityCardsImage}
             alt="community-cards"

apps/remix/app/components/forms/subscription-claim-form.tsx

@@ -72,7 +72,7 @@ export const SubscriptionClaimForm = ({
   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"
@@ -190,7 +190,7 @@ export const SubscriptionClaimForm = ({
               <Trans>Feature Flags</Trans>
             </FormLabel>
 
-            <div className="mt-2 space-y-2 rounded-md border p-4">
+            <div className="twv3-space-y-2 mt-2 rounded-md border p-4">
               {Object.values(SUBSCRIPTION_CLAIM_FEATURE_FLAGS).map(({ key, label, isEnterprise }) => {
                 const isRestrictedFeature = isEnterprise && !licenseFlags?.[key as keyof TLicenseClaim]; // eslint-disable-line @typescript-eslint/consistent-type-assertions
 
@@ -200,7 +200,7 @@ export const SubscriptionClaimForm = ({
                     control={form.control}
                     name={`flags.${key}`}
                     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

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

@@ -135,7 +135,7 @@ export const TeamUpdateForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogPr
             )}
           />
 
-          <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

apps/remix/app/components/general/admin-global-settings-section.tsx

@@ -133,7 +133,7 @@ export const AdminGlobalSettingsSection = ({ settings, isTeam = false }: AdminGl
 
       {isTeam && parsedEmailSettings.success && (
         <DetailsCard label={<Trans>Email document settings</Trans>}>
-          <div className="mt-1 space-y-1 pr-3 pb-2 text-xs">
+          <div className="twv3-space-y-1 mt-1 pr-3 pb-2 text-xs">
             {emailSettingsKeys.map((key) => (
               <div key={key} className="flex items-center justify-between gap-2">
                 <span className="text-muted-foreground">{_(EMAIL_SETTINGS_LABELS[key])}</span>

apps/remix/app/components/general/admin-license-card.tsx

@@ -77,7 +77,7 @@ export const AdminLicenseCard = ({ licenseData }: AdminLicenseCardProps) => {
   const enabledFlags = Object.entries(license.flags).filter(([, enabled]) => enabled);
 
   return (
-    <div className="relative max-w-full overflow-hidden rounded-lg border border-border bg-background px-4 pt-4 pb-6 shadow shadow-transparent duration-200 hover:shadow-border/80">
+    <div className="relative max-w-full overflow-hidden rounded-lg border border-border bg-background px-4 pt-4 pb-6 shadow-sm shadow-transparent duration-200 hover:shadow-border/80">
       <div className="absolute top-3 right-3">
         <AdminLicenseResyncButton />
       </div>

apps/remix/app/components/general/admin-monthly-active-user-charts.tsx

@@ -14,7 +14,7 @@ export type MonthlyActiveUsersChartProps = {
 const CustomTooltip = ({ active, payload, label }: TooltipProps<ValueType, NameType>) => {
   if (active && payload && payload.length) {
     return (
-      <div className="z-100 w-60 space-y-1 rounded-md border border-solid bg-white p-2 px-3">
+      <div className="twv3-space-y-1 z-100 w-60 rounded-md border border-solid bg-white p-2 px-3">
         <p>{label}</p>
         <p className="text-documenso">
           {payload[0].name === 'cume_count' ? 'Cumulative MAU' : 'Monthly Active Users'}:{' '}

apps/remix/app/components/general/admin-stats-users-with-documents.tsx

@@ -20,7 +20,7 @@ const CustomTooltip = ({
 }: TooltipProps<ValueType, NameType> & { tooltip?: string }) => {
   if (active && payload && payload.length) {
     return (
-      <div className="z-100 w-60 space-y-1 rounded-md border border-solid bg-white p-2 px-3">
+      <div className="twv3-space-y-1 z-100 w-60 rounded-md border border-solid bg-white p-2 px-3">
         <p className="">{label}</p>
         <p className="text-documenso">
           {`${tooltip} : `}

apps/remix/app/components/general/animated-document-scanner.tsx

@@ -45,12 +45,12 @@ export const AnimatedDocumentScanner = ({ className, interval = 2500 }: Animated
             className="absolute top-0 left-0 h-full w-[calc(50%)] origin-right overflow-hidden rounded-l-md border border-border bg-card shadow-md"
             style={{ transform: 'rotateY(15deg) skewY(-1deg)' }}
           >
-            <div className="absolute inset-3 space-y-2">
+            <div className="twv3-space-y-2 absolute inset-3">
-              <div className="h-1.5 w-3/4 rounded-sm bg-muted" />
+              <div className="h-1.5 w-3/4 rounded-xs bg-muted" />
-              <div className="h-1.5 w-full rounded-sm bg-muted" />
+              <div className="h-1.5 w-full rounded-xs bg-muted" />
-              <div className="h-1.5 w-5/6 rounded-sm bg-muted" />
+              <div className="h-1.5 w-5/6 rounded-xs bg-muted" />
-              <div className="h-1.5 w-2/3 rounded-sm bg-muted" />
+              <div className="h-1.5 w-2/3 rounded-xs bg-muted" />
-              <div className="mt-3 h-6 w-3/4 rounded border border-primary border-dashed" />
+              <div className="mt-3 h-6 w-3/4 rounded-sm border border-primary border-dashed" />
             </div>
           </div>
 
@@ -59,12 +59,12 @@ export const AnimatedDocumentScanner = ({ className, interval = 2500 }: Animated
             className="absolute top-0 right-0 h-full w-[calc(50%)] origin-left overflow-hidden rounded-r-md border border-border bg-card shadow-md"
             style={{ transform: 'rotateY(-15deg) skewY(1deg)' }}
           >
-            <div className="absolute inset-3 space-y-2">
+            <div className="twv3-space-y-2 absolute inset-3">
-              <div className="h-1.5 w-full rounded-sm bg-muted" />
+              <div className="h-1.5 w-full rounded-xs bg-muted" />
-              <div className="h-1.5 w-4/5 rounded-sm bg-muted" />
+              <div className="h-1.5 w-4/5 rounded-xs bg-muted" />
-              <div className="h-1.5 w-full rounded-sm bg-muted" />
+              <div className="h-1.5 w-full rounded-xs bg-muted" />
-              <div className="h-1.5 w-3/5 rounded-sm bg-muted" />
+              <div className="h-1.5 w-3/5 rounded-xs bg-muted" />
-              <div className="mt-3 h-6 w-2/3 rounded border border-primary border-dashed" />
+              <div className="mt-3 h-6 w-2/3 rounded-sm border border-primary border-dashed" />
             </div>
           </div>
         </div>

apps/remix/app/components/general/app-header.tsx

@@ -50,7 +50,7 @@ export const Header = ({ className, ...props }: HeaderProps) => {
   return (
     <header
       className={cn(
-        'sticky top-0 z-[60] flex h-16 w-full items-center border-b border-b-transparent bg-background/95 backdrop-blur duration-200 supports-backdrop-blur:bg-background/60',
+        'sticky top-0 z-[60] flex h-16 w-full items-center border-b border-b-transparent bg-background/95 backdrop-blur-sm duration-200 supports-backdrop-blur:bg-background/60',
         scrollY > 5 && 'border-b-border',
         className,
       )}
@@ -59,7 +59,7 @@ export const Header = ({ className, ...props }: HeaderProps) => {
       <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-x-4 px-4 md:justify-normal md:px-8">
         <Link
           to={getRootHref(params)}
-          className="hidden rounded-md ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 md:inline"
+          className="hidden rounded-md ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 md:inline"
         >
           <BrandingLogo className="h-6 w-auto" />
         </Link>
@@ -68,7 +68,7 @@ export const Header = ({ className, ...props }: HeaderProps) => {
 
         <Button asChild variant="outline" className="relative hidden h-10 w-10 rounded-lg md:flex">
           <Link to="/inbox" className="relative block h-10 w-10">
-            <InboxIcon className="h-5 w-5 flex-shrink-0 text-muted-foreground transition-colors hover:text-foreground" />
+            <InboxIcon className="h-5 w-5 shrink-0 text-muted-foreground transition-colors hover:text-foreground" />
 
             {unreadCountData && unreadCountData.count > 0 && (
               <span className="absolute -top-1.5 -right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary font-semibold text-[10px] text-primary-foreground">
@@ -80,7 +80,7 @@ export const Header = ({ className, ...props }: HeaderProps) => {
 
         <div className="md:ml-4">{isPersonalLayout(organisations) ? <MenuSwitcher /> : <OrgMenuSwitcher />}</div>
 
-        <div className="flex flex-row items-center space-x-4 md:hidden">
+        <div className="twv3-space-x-4 flex flex-row items-center md:hidden">
           <button onClick={() => setIsCommandMenuOpen(true)}>
             <SearchIcon className="h-6 w-6 text-muted-foreground" />
           </button>

apps/remix/app/components/general/app-nav-desktop.tsx

@@ -73,7 +73,7 @@ export const AppNavDesktop = ({ className, setIsCommandMenuOpen, ...props }: App
                   key={href}
                   to={href}
                   className={cn(
-                    'rounded-md font-medium text-muted-foreground leading-5 ring-offset-background hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring dark:text-muted-foreground/60',
+                    'rounded-md font-medium text-muted-foreground leading-5 ring-offset-background hover:opacity-80 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring dark:text-muted-foreground/60',
                     {
                       'text-foreground dark:text-muted-foreground': pathname?.startsWith(href),
                     },

apps/remix/app/components/general/app-nav-mobile.tsx

@@ -109,7 +109,7 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
           </button>
         </div>
 
-        <div className="mt-auto flex w-full flex-col space-y-4 self-end">
+        <div className="twv3-space-y-4 mt-auto flex w-full flex-col self-end">
           <div className="w-fit">
             <ThemeSwitcher />
           </div>

apps/remix/app/components/general/billing-plans.tsx

@@ -215,13 +215,13 @@ const BillingDialog = ({ priceId, planName, claim }: { priceId: string; planName
         {step === 0 ? (
           <div>
             <RadioGroup
-              className="space-y-2"
+              className="twv3-space-y-2"
               value={subscriptionOption}
               onValueChange={(value) => setSubscriptionOption(value as 'update' | 'create')}
             >
-              <div className="flex items-start space-x-3 space-y-0">
+              <div className="twv3-space-x-3 twv3-space-y-0 flex items-start">
                 <RadioGroupItem value="update" id="update" />
-                <div className="space-y-1.5 leading-none">
+                <div className="twv3-space-y-1.5 leading-none">
                   <Label htmlFor="update" className="flex items-center gap-2 font-medium">
                     <Building2Icon className="h-4 w-4" />
                     <Trans>Update current organisation</Trans>
@@ -234,9 +234,9 @@ const BillingDialog = ({ priceId, planName, claim }: { priceId: string; planName
                 </div>
               </div>
 
-              <div className="flex items-start space-x-3 space-y-0">
+              <div className="twv3-space-x-3 twv3-space-y-0 flex items-start">
                 <RadioGroupItem value="create" id="create" />
-                <div className="space-y-1.5 leading-none">
+                <div className="twv3-space-y-1.5 leading-none">
                   <Label htmlFor="create" className="flex items-center gap-2 font-medium">
                     <PlusIcon className="h-4 w-4" />
                     <Trans>Create separate organisation</Trans>