From 83e7a3c222c7c7938a075fa634da9197a744d82b Mon Sep 17 00:00:00 2001
From: Lucas Smith <me@lucasjamessmith.me>
Date: Wed, 20 Nov 2024 22:49:30 +1100
Subject: [PATCH] fix: improve field sizing (#1486)

## Description

Allows for smaller field sizing in addition to improving our styling
when displaying labels on smaller fields.

This is the minimum currently supported field size until we perform a
more extensive refactor of our current drag and drop system.

## Related Issue

Reported via support channels

## Changes Made

- Updated our minimum size constraints
- Attempted to add a general autosizing component for text and failed
- Updated styling in a bunch of places to use the css `clamp()` method
for dynamic sizing.
---
 .../app/(signing)/sign/[token]/date-field.tsx |   4 +-
 .../(signing)/sign/[token]/dropdown-field.tsx |   6 +-
 .../(signing)/sign/[token]/email-field.tsx    |   4 +-
 .../(signing)/sign/[token]/initials-field.tsx |   4 +-
 .../app/(signing)/sign/[token]/name-field.tsx |   2 +-
 .../(signing)/sign/[token]/number-field.tsx   |   7 +-
 .../sign/[token]/signature-field.tsx          |   2 +-
 .../app/(signing)/sign/[token]/text-field.tsx |   8 +-
 .../(dashboard)/avatar/stack-avatar.tsx       |   2 -
 package-lock.json                             |  23 ++-
 packages/lib/translations/de/common.po        |  82 ++++-----
 packages/lib/translations/de/web.po           |  20 +--
 packages/lib/translations/en/common.po        |  82 ++++-----
 packages/lib/translations/en/web.po           |  20 +--
 packages/lib/translations/es/common.po        |  82 ++++-----
 packages/lib/translations/es/web.po           |  20 +--
 packages/lib/translations/fr/common.po        |  82 ++++-----
 packages/lib/translations/fr/web.po           |  20 +--
 packages/tailwind-config/index.cjs            |   6 +-
 packages/tailwind-config/package.json         |   8 +-
 packages/ui/primitives/auto-sized-text.tsx    | 157 ++++++++++++++++++
 .../primitives/document-flow/add-fields.tsx   |  23 ++-
 .../primitives/document-flow/field-icon.tsx   |   7 +-
 .../primitives/document-flow/field-item.tsx   |   8 +-
 .../document-flow/show-field-item.tsx         |   8 +-
 .../template-flow/add-template-fields.tsx     |  23 ++-
 26 files changed, 448 insertions(+), 262 deletions(-)
 create mode 100644 packages/ui/primitives/auto-sized-text.tsx

diff --git a/apps/web/src/app/(signing)/sign/[token]/date-field.tsx b/apps/web/src/app/(signing)/sign/[token]/date-field.tsx
index 379ce1d4c..5b573d6f6 100644
--- a/apps/web/src/app/(signing)/sign/[token]/date-field.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/date-field.tsx
@@ -144,13 +144,13 @@ export const DateField = ({
       )}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground duration-200 group-hover:text-yellow-300">
+        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
           <Trans>Date</Trans>
         </p>
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.625rem,1cqw,0.825rem)] duration-200">
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
           {localDateString}
         </p>
       )}
diff --git a/apps/web/src/app/(signing)/sign/[token]/dropdown-field.tsx b/apps/web/src/app/(signing)/sign/[token]/dropdown-field.tsx
index d47bd91be..ccc7df777 100644
--- a/apps/web/src/app/(signing)/sign/[token]/dropdown-field.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/dropdown-field.tsx
@@ -178,7 +178,7 @@ export const DropdownField = ({
         )}
 
         {!field.inserted && (
-          <p className="group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200">
+          <p className="group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200 ">
             <Select value={localChoice} onValueChange={handleSelectItem}>
               <SelectTrigger
                 className={cn(
@@ -190,7 +190,7 @@ export const DropdownField = ({
                 )}
               >
                 <SelectValue
-                  className="text-[clamp(0.625rem,1cqw,0.825rem)]"
+                  className="text-[clamp(0.425rem,25cqw,0.825rem)]"
                   placeholder={`${_(msg`Select`)}`}
                 />
               </SelectTrigger>
@@ -206,7 +206,7 @@ export const DropdownField = ({
         )}
 
         {field.inserted && (
-          <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.625rem,1cqw,0.825rem)] duration-200">
+          <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
             {field.customText}
           </p>
         )}
diff --git a/apps/web/src/app/(signing)/sign/[token]/email-field.tsx b/apps/web/src/app/(signing)/sign/[token]/email-field.tsx
index cd0180177..0cb11a739 100644
--- a/apps/web/src/app/(signing)/sign/[token]/email-field.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/email-field.tsx
@@ -122,13 +122,13 @@ export const EmailField = ({ field, recipient, onSignField, onUnsignField }: Ema
       )}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground duration-200 group-hover:text-yellow-300">
+        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
           <Trans>Email</Trans>
         </p>
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.625rem,1cqw,0.825rem)] duration-200">
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
           {field.customText}
         </p>
       )}
diff --git a/apps/web/src/app/(signing)/sign/[token]/initials-field.tsx b/apps/web/src/app/(signing)/sign/[token]/initials-field.tsx
index 641b120f7..595393ef2 100644
--- a/apps/web/src/app/(signing)/sign/[token]/initials-field.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/initials-field.tsx
@@ -128,13 +128,13 @@ export const InitialsField = ({
       )}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground duration-200 group-hover:text-yellow-300">
+        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
           <Trans>Initials</Trans>
         </p>
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.625rem,1cqw,0.825rem)] duration-200">
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
           {field.customText}
         </p>
       )}
diff --git a/apps/web/src/app/(signing)/sign/[token]/name-field.tsx b/apps/web/src/app/(signing)/sign/[token]/name-field.tsx
index 388e6ceb0..fdf5fbbee 100644
--- a/apps/web/src/app/(signing)/sign/[token]/name-field.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/name-field.tsx
@@ -172,7 +172,7 @@ export const NameField = ({ field, recipient, onSignField, onUnsignField }: Name
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.625rem,1cqw,0.825rem)] duration-200">
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
           {field.customText}
         </p>
       )}
diff --git a/apps/web/src/app/(signing)/sign/[token]/number-field.tsx b/apps/web/src/app/(signing)/sign/[token]/number-field.tsx
index a4a844fa3..40d000700 100644
--- a/apps/web/src/app/(signing)/sign/[token]/number-field.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/number-field.tsx
@@ -252,14 +252,15 @@ export const NumberField = ({ field, recipient, onSignField, onUnsignField }: Nu
             },
           )}
         >
-          <span className="flex items-center justify-center gap-x-1 text-sm">
-            <Hash className="h-4 w-4" /> {fieldDisplayName}
+          <span className="flex items-center justify-center gap-x-1">
+            <Hash className="h-[clamp(0.625rem,20cqw,0.925rem)] w-[clamp(0.625rem,20cqw,0.925rem)]" />{' '}
+            <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">{fieldDisplayName}</span>
           </span>
         </p>
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.625rem,1cqw,0.825rem)] duration-200">
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
           {field.customText}
         </p>
       )}
diff --git a/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx b/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx
index b564ea11c..ab161c594 100644
--- a/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx
@@ -191,7 +191,7 @@ export const SignatureField = ({
       )}
 
       {state === 'empty' && (
-        <p className="group-hover:text-primary font-signature text-muted-foreground text-xl duration-200 group-hover:text-yellow-300">
+        <p className="group-hover:text-primary font-signature text-muted-foreground text-[clamp(0.575rem,25cqw,1.2rem)] text-xl duration-200 group-hover:text-yellow-300">
           <Trans>Signature</Trans>
         </p>
       )}
diff --git a/apps/web/src/app/(signing)/sign/[token]/text-field.tsx b/apps/web/src/app/(signing)/sign/[token]/text-field.tsx
index 0f22fc78b..1ad14ff1b 100644
--- a/apps/web/src/app/(signing)/sign/[token]/text-field.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/text-field.tsx
@@ -252,14 +252,16 @@ export const TextField = ({ field, recipient, onSignField, onUnsignField }: Text
           )}
         >
           <span className="flex items-center justify-center gap-x-1">
-            <Type />
-            {fieldDisplayName || <Trans>Text</Trans>}
+            <Type className="h-[clamp(0.625rem,20cqw,0.925rem)] w-[clamp(0.625rem,20cqw,0.925rem)]" />
+            <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">
+              {fieldDisplayName || <Trans>Text</Trans>}
+            </span>
           </span>
         </p>
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground dark:text-background/80 flex items-center justify-center gap-x-1 duration-200">
+        <p className="text-muted-foreground dark:text-background/80 flex items-center justify-center gap-x-1 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
           {field.customText.length < 20
             ? field.customText
             : field.customText.substring(0, 15) + '...'}
diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx
index abf6d6074..94f3e5a68 100644
--- a/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx
+++ b/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx
@@ -25,8 +25,6 @@ export const StackAvatar = ({ first, zIndex, fallbackText = '', type }: StackAva
     zIndexClass = ZIndexes[zIndex] ?? '';
   }
 
-  console.log({ type, fallbackText });
-
   switch (type) {
     case RecipientStatusType.UNSIGNED:
       classes = 'bg-dawn-200 text-dawn-900';
diff --git a/package-lock.json b/package-lock.json
index f7838ee3c..87899b623 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10044,11 +10044,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/@tailwindcss/container-queries": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz",
+      "integrity": "sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.2.0"
+      }
+    },
     "node_modules/@tailwindcss/typography": {
       "version": "0.5.10",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
       "integrity": "sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==",
-      "dev": true,
       "dependencies": {
         "lodash.castarray": "^4.4.0",
         "lodash.isplainobject": "^4.0.6",
@@ -21883,8 +21891,7 @@
     "node_modules/lodash.castarray": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
-      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
-      "dev": true
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q=="
     },
     "node_modules/lodash.clonedeep": {
       "version": "4.5.0",
@@ -21929,8 +21936,7 @@
     "node_modules/lodash.isplainobject": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
-      "dev": true
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
     },
     "node_modules/lodash.kebabcase": {
       "version": "4.1.1",
@@ -27014,7 +27020,6 @@
       "version": "6.0.10",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
       "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
-      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -36916,14 +36921,14 @@
       "version": "0.0.0",
       "license": "MIT",
       "dependencies": {
+        "@tailwindcss/container-queries": "^0.1.1",
+        "@tailwindcss/typography": "^0.5.9",
         "autoprefixer": "^10.4.13",
         "postcss": "^8.4.32",
         "tailwindcss": "3.3.2",
         "tailwindcss-animate": "^1.0.5"
       },
-      "devDependencies": {
-        "@tailwindcss/typography": "^0.5.9"
-      }
+      "devDependencies": {}
     },
     "packages/tailwind-config/node_modules/postcss": {
       "version": "8.4.32",
diff --git a/packages/lib/translations/de/common.po b/packages/lib/translations/de/common.po
index 4d5231ffa..e3bf0f744 100644
--- a/packages/lib/translations/de/common.po
+++ b/packages/lib/translations/de/common.po
@@ -414,11 +414,11 @@ msgstr "Weiteren Wert hinzufügen"
 msgid "Add myself"
 msgstr "Mich selbst hinzufügen"
 
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:637
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:645
 msgid "Add Myself"
 msgstr "Mich hinzufügen"
 
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:623
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:631
 msgid "Add Placeholder Recipient"
 msgstr "Platzhalterempfänger hinzufügen"
 
@@ -443,8 +443,8 @@ msgstr "Admin"
 msgid "Advanced Options"
 msgstr "Erweiterte Optionen"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:573
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:406
+#: packages/ui/primitives/document-flow/add-fields.tsx:576
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:409
 msgid "Advanced settings"
 msgstr "Erweiterte Einstellungen"
 
@@ -589,8 +589,8 @@ msgstr "Abgeschlossenes Dokument"
 msgid "Configure Direct Recipient"
 msgstr "Direkten Empfänger konfigurieren"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:574
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:407
+#: packages/ui/primitives/document-flow/add-fields.tsx:577
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:410
 msgid "Configure the {0} field"
 msgstr "Konfigurieren Sie das Feld {0}"
 
@@ -651,9 +651,9 @@ msgstr "Konto erstellen"
 msgid "Custom Text"
 msgstr "Benutzerdefinierter Text"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:927
+#: packages/ui/primitives/document-flow/add-fields.tsx:934
 #: packages/ui/primitives/document-flow/types.ts:53
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:690
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:697
 msgid "Date"
 msgstr "Datum"
 
@@ -670,7 +670,7 @@ msgstr "Ablehnen"
 msgid "Didn't request a password change? We are here to help you secure your account, just <0>contact us.</0>"
 msgstr "Hast du keinen Passwortwechsel angefordert? Wir helfen dir, dein Konto abzusichern, kontaktiere uns einfach <0>hier.</0>"
 
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:570
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:578
 msgid "Direct link receiver"
 msgstr "Empfänger des direkten Links"
 
@@ -792,8 +792,8 @@ msgstr "Entwurf"
 msgid "Drag & drop your PDF here."
 msgstr "Ziehen Sie Ihr PDF hierher."
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:1058
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:820
+#: packages/ui/primitives/document-flow/add-fields.tsx:1065
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:827
 msgid "Dropdown"
 msgstr "Dropdown"
 
@@ -802,14 +802,14 @@ msgid "Dropdown options"
 msgstr "Dropdown-Optionen"
 
 #: packages/lib/constants/document.ts:28
-#: packages/ui/primitives/document-flow/add-fields.tsx:875
+#: packages/ui/primitives/document-flow/add-fields.tsx:882
 #: packages/ui/primitives/document-flow/add-signature.tsx:272
 #: packages/ui/primitives/document-flow/add-signers.tsx:512
 #: packages/ui/primitives/document-flow/add-signers.tsx:519
 #: packages/ui/primitives/document-flow/types.ts:54
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:638
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:463
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:470
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:645
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:471
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:478
 msgid "Email"
 msgstr "E-Mail"
 
@@ -829,7 +829,7 @@ msgstr "E-Mail erneut gesendet"
 msgid "Email sent"
 msgstr "E-Mail gesendet"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:1123
+#: packages/ui/primitives/document-flow/add-fields.tsx:1130
 msgid "Empty field"
 msgstr "Leeres Feld"
 
@@ -838,11 +838,11 @@ msgid "Enable Direct Link Signing"
 msgstr "Direktlink-Signierung aktivieren"
 
 #: packages/ui/primitives/document-flow/add-signers.tsx:401
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:362
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:370
 msgid "Enable signing order"
 msgstr "Aktiviere die Signaturreihenfolge"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:795
+#: packages/ui/primitives/document-flow/add-fields.tsx:802
 msgid "Enable Typed Signatures"
 msgstr "Aktivieren Sie getippte Unterschriften"
 
@@ -1020,14 +1020,14 @@ msgstr "Nachricht <0>(Optional)</0>"
 msgid "Min"
 msgstr "Min"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:901
+#: packages/ui/primitives/document-flow/add-fields.tsx:908
 #: packages/ui/primitives/document-flow/add-signature.tsx:298
 #: packages/ui/primitives/document-flow/add-signers.tsx:550
 #: packages/ui/primitives/document-flow/add-signers.tsx:556
 #: packages/ui/primitives/document-flow/types.ts:55
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:664
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:498
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:504
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:671
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:506
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:512
 msgid "Name"
 msgstr "Name"
 
@@ -1043,8 +1043,8 @@ msgstr "Muss unterzeichnen"
 msgid "Needs to view"
 msgstr "Muss sehen"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:686
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:504
+#: packages/ui/primitives/document-flow/add-fields.tsx:693
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:511
 msgid "No recipient matching this description was found."
 msgstr "Kein passender Empfänger mit dieser Beschreibung gefunden."
 
@@ -1052,8 +1052,8 @@ msgstr "Kein passender Empfänger mit dieser Beschreibung gefunden."
 msgid "No recipients"
 msgstr "Keine Empfänger"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:701
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:519
+#: packages/ui/primitives/document-flow/add-fields.tsx:708
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:526
 msgid "No recipients with this role"
 msgstr "Keine Empfänger mit dieser Rolle"
 
@@ -1081,9 +1081,9 @@ msgstr "Kein Wert gefunden."
 msgid "None"
 msgstr "Keine"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:979
+#: packages/ui/primitives/document-flow/add-fields.tsx:986
 #: packages/ui/primitives/document-flow/types.ts:56
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:742
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:749
 msgid "Number"
 msgstr "Nummer"
 
@@ -1175,7 +1175,7 @@ msgid "Please try again or contact our support."
 msgstr "Bitte versuchen Sie es erneut oder kontaktieren Sie unseren Support."
 
 #: packages/ui/primitives/document-flow/types.ts:57
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:768
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:775
 msgid "Radio"
 msgstr "Radio"
 
@@ -1255,7 +1255,7 @@ msgstr "Erinnerung: Bitte {recipientActionVerb} dieses Dokument"
 msgid "Reminder: Please {recipientActionVerb} your document"
 msgstr "Erinnerung: Bitte {recipientActionVerb} dein Dokument"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:1110
+#: packages/ui/primitives/document-flow/add-fields.tsx:1117
 msgid "Remove"
 msgstr "Entfernen"
 
@@ -1287,7 +1287,7 @@ msgstr "Zeilen pro Seite"
 msgid "Save"
 msgstr "Speichern"
 
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:854
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:861
 msgid "Save Template"
 msgstr "Vorlage speichern"
 
@@ -1360,7 +1360,7 @@ msgid "Share your signing experience!"
 msgstr "Teilen Sie Ihre Unterzeichnungserfahrung!"
 
 #: packages/ui/primitives/document-flow/add-signers.tsx:709
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:655
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:663
 msgid "Show advanced settings"
 msgstr "Erweiterte Einstellungen anzeigen"
 
@@ -1376,11 +1376,11 @@ msgstr "Dokument signieren"
 msgid "Sign In"
 msgstr "Anmelden"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:823
+#: packages/ui/primitives/document-flow/add-fields.tsx:830
 #: packages/ui/primitives/document-flow/add-signature.tsx:323
 #: packages/ui/primitives/document-flow/field-icon.tsx:52
 #: packages/ui/primitives/document-flow/types.ts:49
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:586
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:593
 msgid "Signature"
 msgstr "Unterschrift"
 
@@ -1463,9 +1463,9 @@ msgstr "Team-E-Mail für {teamName} auf Documenso entfernt"
 msgid "Template title"
 msgstr "Vorlagentitel"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:953
+#: packages/ui/primitives/document-flow/add-fields.tsx:960
 #: packages/ui/primitives/document-flow/types.ts:52
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:716
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:723
 msgid "Text"
 msgstr "Text"
 
@@ -1560,7 +1560,7 @@ msgstr "Dies kann überschrieben werden, indem die Authentifizierungsanforderung
 msgid "This document can not be recovered, if you would like to dispute the reason for future documents please contact support."
 msgstr "Dieses Dokument kann nicht wiederhergestellt werden. Wenn du den Grund für zukünftige Dokumente anfechten möchtest, kontaktiere bitte den Support."
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:757
+#: packages/ui/primitives/document-flow/add-fields.tsx:764
 msgid "This document has already been sent to this recipient. You can no longer edit this recipient."
 msgstr "Dieses Dokument wurde bereits an diesen Empfänger gesendet. Sie können diesen Empfänger nicht mehr bearbeiten."
 
@@ -1591,7 +1591,7 @@ msgstr "Diese E-Mail wird an den Empfänger gesendet und fordert ihn auf, das Do
 msgid "This email will be sent to the recipient who has just signed the document, if there are still other recipients who have not signed yet."
 msgstr "Diese E-Mail wird an den Empfänger gesendet, der das Dokument gerade unterschrieben hat, wenn es noch andere Empfänger gibt, die noch nicht unterschrieben haben."
 
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:573
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:581
 msgid "This field cannot be modified or deleted. When you share this template's direct link or add it to your public profile, anyone who accesses it can input their name and email, and fill in the fields assigned to them."
 msgstr "Dieses Feld kann nicht geändert oder gelöscht werden. Wenn Sie den direkten Link dieser Vorlage teilen oder zu Ihrem öffentlichen Profil hinzufügen, kann jeder, der darauf zugreift, seinen Namen und seine E-Mail-Adresse eingeben und die ihm zugewiesenen Felder ausfüllen."
 
@@ -1599,7 +1599,7 @@ msgstr "Dieses Feld kann nicht geändert oder gelöscht werden. Wenn Sie den dir
 msgid "This is how the document will reach the recipients once the document is ready for signing."
 msgstr "So wird das Dokument die Empfänger erreichen, sobald es zum Unterschreiben bereit ist."
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:1090
+#: packages/ui/primitives/document-flow/add-fields.tsx:1097
 msgid "This recipient can no longer be modified as they have signed a field, or completed the document."
 msgstr "Dieser Empfänger kann nicht mehr bearbeitet werden, da er ein Feld unterschrieben oder das Dokument abgeschlossen hat."
 
@@ -1628,8 +1628,8 @@ msgstr "Zeitzone"
 msgid "Title"
 msgstr "Titel"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:1073
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:834
+#: packages/ui/primitives/document-flow/add-fields.tsx:1080
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:841
 msgid "To proceed further, please set at least one value for the {0} field."
 msgstr "Um fortzufahren, legen Sie bitte mindestens einen Wert für das Feld {0} fest."
 
diff --git a/packages/lib/translations/de/web.po b/packages/lib/translations/de/web.po
index c16c942f9..45234b912 100644
--- a/packages/lib/translations/de/web.po
+++ b/packages/lib/translations/de/web.po
@@ -62,7 +62,7 @@ msgstr "({0}) hat dich eingeladen, dieses Dokument zu unterzeichnen"
 msgid "({0}) has invited you to view this document"
 msgstr "({0}) hat dich eingeladen, dieses Dokument zu betrachten"
 
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:311
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:313
 msgid "{0, plural, one {(1 character over)} other {(# characters over)}}"
 msgstr "{0, plural, one {(1 Zeichen über dem Limit)} other {(# Zeichen über dem Limit)}}"
 
@@ -124,7 +124,7 @@ msgstr "{0} Empfänger(in)"
 #~ msgid "{0} the document to complete the process."
 #~ msgstr "{0} the document to complete the process."
 
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:292
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:294
 msgid "{charactersRemaining, plural, one {1 character remaining} other {{charactersRemaining} characters remaining}}"
 msgstr "{charactersRemaining, plural, one {1 Zeichen verbleibend} other {{charactersRemaining} Zeichen verbleibend}}"
 
@@ -830,11 +830,11 @@ msgstr "Durch die Verwendung der elektronischen Unterschriftsfunktion stimmen Si
 #: apps/web/src/app/(signing)/sign/[token]/form.tsx:151
 #: apps/web/src/app/(signing)/sign/[token]/form.tsx:220
 #: apps/web/src/app/(signing)/sign/[token]/name-field.tsx:215
-#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:327
+#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:328
 #: apps/web/src/app/(signing)/sign/[token]/reject-document-dialog.tsx:153
 #: apps/web/src/app/(signing)/sign/[token]/sign-dialog.tsx:113
 #: apps/web/src/app/(signing)/sign/[token]/signature-field.tsx:248
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:333
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:335
 #: apps/web/src/app/(teams)/t/[teamUrl]/settings/team-transfer-status.tsx:121
 #: apps/web/src/components/(dashboard)/settings/token/delete-token-dialog.tsx:176
 #: apps/web/src/components/(dashboard)/settings/webhooks/create-webhook-dialog.tsx:242
@@ -1793,7 +1793,7 @@ msgstr "Geben Sie Ihre E-Mail-Adresse ein, um das abgeschlossene Dokument zu erh
 msgid "Enter your name"
 msgstr "Geben Sie Ihren Namen ein"
 
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:278
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:280
 msgid "Enter your text here"
 msgstr "Geben Sie hier Ihren Text ein"
 
@@ -2481,7 +2481,7 @@ msgstr "Nicht unterstützt"
 msgid "Nothing to do"
 msgstr "Nichts zu tun"
 
-#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:270
+#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:271
 msgid "Number"
 msgstr "Nummer"
 
@@ -3044,8 +3044,8 @@ msgid "Roles"
 msgstr "Rollen"
 
 #: apps/web/src/app/(dashboard)/templates/template-direct-link-dialog.tsx:446
-#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:336
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:342
+#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:337
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:344
 #: apps/web/src/app/(teams)/t/[teamUrl]/settings/preferences/branding-preferences.tsx:312
 #: apps/web/src/app/(teams)/t/[teamUrl]/settings/preferences/document-preferences.tsx:232
 msgid "Save"
@@ -3665,8 +3665,8 @@ msgstr "Vorlagen"
 msgid "Templates allow you to quickly generate documents with pre-filled recipients and fields."
 msgstr "Vorlagen erlauben dir das schnelle Erstlelen von Dokumenten mit vorausgefüllten Empfängern und Feldern."
 
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:256
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:272
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:257
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:274
 msgid "Text"
 msgstr "Text"
 
diff --git a/packages/lib/translations/en/common.po b/packages/lib/translations/en/common.po
index 76369780c..612bd5827 100644
--- a/packages/lib/translations/en/common.po
+++ b/packages/lib/translations/en/common.po
@@ -409,11 +409,11 @@ msgstr "Add another value"
 msgid "Add myself"
 msgstr "Add myself"
 
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:637
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:645
 msgid "Add Myself"
 msgstr "Add Myself"
 
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:623
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:631
 msgid "Add Placeholder Recipient"
 msgstr "Add Placeholder Recipient"
 
@@ -438,8 +438,8 @@ msgstr "Admin"
 msgid "Advanced Options"
 msgstr "Advanced Options"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:573
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:406
+#: packages/ui/primitives/document-flow/add-fields.tsx:576
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:409
 msgid "Advanced settings"
 msgstr "Advanced settings"
 
@@ -584,8 +584,8 @@ msgstr "Completed Document"
 msgid "Configure Direct Recipient"
 msgstr "Configure Direct Recipient"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:574
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:407
+#: packages/ui/primitives/document-flow/add-fields.tsx:577
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:410
 msgid "Configure the {0} field"
 msgstr "Configure the {0} field"
 
@@ -646,9 +646,9 @@ msgstr "Create account"
 msgid "Custom Text"
 msgstr "Custom Text"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:927
+#: packages/ui/primitives/document-flow/add-fields.tsx:934
 #: packages/ui/primitives/document-flow/types.ts:53
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:690
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:697
 msgid "Date"
 msgstr "Date"
 
@@ -665,7 +665,7 @@ msgstr "Decline"
 msgid "Didn't request a password change? We are here to help you secure your account, just <0>contact us.</0>"
 msgstr "Didn't request a password change? We are here to help you secure your account, just <0>contact us.</0>"
 
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:570
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:578
 msgid "Direct link receiver"
 msgstr "Direct link receiver"
 
@@ -787,8 +787,8 @@ msgstr "Draft"
 msgid "Drag & drop your PDF here."
 msgstr "Drag & drop your PDF here."
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:1058
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:820
+#: packages/ui/primitives/document-flow/add-fields.tsx:1065
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:827
 msgid "Dropdown"
 msgstr "Dropdown"
 
@@ -797,14 +797,14 @@ msgid "Dropdown options"
 msgstr "Dropdown options"
 
 #: packages/lib/constants/document.ts:28
-#: packages/ui/primitives/document-flow/add-fields.tsx:875
+#: packages/ui/primitives/document-flow/add-fields.tsx:882
 #: packages/ui/primitives/document-flow/add-signature.tsx:272
 #: packages/ui/primitives/document-flow/add-signers.tsx:512
 #: packages/ui/primitives/document-flow/add-signers.tsx:519
 #: packages/ui/primitives/document-flow/types.ts:54
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:638
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:463
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:470
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:645
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:471
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:478
 msgid "Email"
 msgstr "Email"
 
@@ -824,7 +824,7 @@ msgstr "Email resent"
 msgid "Email sent"
 msgstr "Email sent"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:1123
+#: packages/ui/primitives/document-flow/add-fields.tsx:1130
 msgid "Empty field"
 msgstr "Empty field"
 
@@ -833,11 +833,11 @@ msgid "Enable Direct Link Signing"
 msgstr "Enable Direct Link Signing"
 
 #: packages/ui/primitives/document-flow/add-signers.tsx:401
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:362
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:370
 msgid "Enable signing order"
 msgstr "Enable signing order"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:795
+#: packages/ui/primitives/document-flow/add-fields.tsx:802
 msgid "Enable Typed Signatures"
 msgstr "Enable Typed Signatures"
 
@@ -1015,14 +1015,14 @@ msgstr "Message <0>(Optional)</0>"
 msgid "Min"
 msgstr "Min"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:901
+#: packages/ui/primitives/document-flow/add-fields.tsx:908
 #: packages/ui/primitives/document-flow/add-signature.tsx:298
 #: packages/ui/primitives/document-flow/add-signers.tsx:550
 #: packages/ui/primitives/document-flow/add-signers.tsx:556
 #: packages/ui/primitives/document-flow/types.ts:55
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:664
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:498
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:504
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:671
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:506
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:512
 msgid "Name"
 msgstr "Name"
 
@@ -1038,8 +1038,8 @@ msgstr "Needs to sign"
 msgid "Needs to view"
 msgstr "Needs to view"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:686
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:504
+#: packages/ui/primitives/document-flow/add-fields.tsx:693
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:511
 msgid "No recipient matching this description was found."
 msgstr "No recipient matching this description was found."
 
@@ -1047,8 +1047,8 @@ msgstr "No recipient matching this description was found."
 msgid "No recipients"
 msgstr "No recipients"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:701
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:519
+#: packages/ui/primitives/document-flow/add-fields.tsx:708
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:526
 msgid "No recipients with this role"
 msgstr "No recipients with this role"
 
@@ -1076,9 +1076,9 @@ msgstr "No value found."
 msgid "None"
 msgstr "None"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:979
+#: packages/ui/primitives/document-flow/add-fields.tsx:986
 #: packages/ui/primitives/document-flow/types.ts:56
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:742
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:749
 msgid "Number"
 msgstr "Number"
 
@@ -1170,7 +1170,7 @@ msgid "Please try again or contact our support."
 msgstr "Please try again or contact our support."
 
 #: packages/ui/primitives/document-flow/types.ts:57
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:768
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:775
 msgid "Radio"
 msgstr "Radio"
 
@@ -1250,7 +1250,7 @@ msgstr "Reminder: Please {recipientActionVerb} this document"
 msgid "Reminder: Please {recipientActionVerb} your document"
 msgstr "Reminder: Please {recipientActionVerb} your document"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:1110
+#: packages/ui/primitives/document-flow/add-fields.tsx:1117
 msgid "Remove"
 msgstr "Remove"
 
@@ -1282,7 +1282,7 @@ msgstr "Rows per page"
 msgid "Save"
 msgstr "Save"
 
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:854
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:861
 msgid "Save Template"
 msgstr "Save Template"
 
@@ -1355,7 +1355,7 @@ msgid "Share your signing experience!"
 msgstr "Share your signing experience!"
 
 #: packages/ui/primitives/document-flow/add-signers.tsx:709
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:655
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:663
 msgid "Show advanced settings"
 msgstr "Show advanced settings"
 
@@ -1371,11 +1371,11 @@ msgstr "Sign Document"
 msgid "Sign In"
 msgstr "Sign In"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:823
+#: packages/ui/primitives/document-flow/add-fields.tsx:830
 #: packages/ui/primitives/document-flow/add-signature.tsx:323
 #: packages/ui/primitives/document-flow/field-icon.tsx:52
 #: packages/ui/primitives/document-flow/types.ts:49
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:586
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:593
 msgid "Signature"
 msgstr "Signature"
 
@@ -1458,9 +1458,9 @@ msgstr "Team email removed for {teamName} on Documenso"
 msgid "Template title"
 msgstr "Template title"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:953
+#: packages/ui/primitives/document-flow/add-fields.tsx:960
 #: packages/ui/primitives/document-flow/types.ts:52
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:716
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:723
 msgid "Text"
 msgstr "Text"
 
@@ -1555,7 +1555,7 @@ msgstr "This can be overriden by setting the authentication requirements directl
 msgid "This document can not be recovered, if you would like to dispute the reason for future documents please contact support."
 msgstr "This document can not be recovered, if you would like to dispute the reason for future documents please contact support."
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:757
+#: packages/ui/primitives/document-flow/add-fields.tsx:764
 msgid "This document has already been sent to this recipient. You can no longer edit this recipient."
 msgstr "This document has already been sent to this recipient. You can no longer edit this recipient."
 
@@ -1586,7 +1586,7 @@ msgstr "This email is sent to the recipient requesting them to sign the document
 msgid "This email will be sent to the recipient who has just signed the document, if there are still other recipients who have not signed yet."
 msgstr "This email will be sent to the recipient who has just signed the document, if there are still other recipients who have not signed yet."
 
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:573
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:581
 msgid "This field cannot be modified or deleted. When you share this template's direct link or add it to your public profile, anyone who accesses it can input their name and email, and fill in the fields assigned to them."
 msgstr "This field cannot be modified or deleted. When you share this template's direct link or add it to your public profile, anyone who accesses it can input their name and email, and fill in the fields assigned to them."
 
@@ -1594,7 +1594,7 @@ msgstr "This field cannot be modified or deleted. When you share this template's
 msgid "This is how the document will reach the recipients once the document is ready for signing."
 msgstr "This is how the document will reach the recipients once the document is ready for signing."
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:1090
+#: packages/ui/primitives/document-flow/add-fields.tsx:1097
 msgid "This recipient can no longer be modified as they have signed a field, or completed the document."
 msgstr "This recipient can no longer be modified as they have signed a field, or completed the document."
 
@@ -1623,8 +1623,8 @@ msgstr "Time Zone"
 msgid "Title"
 msgstr "Title"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:1073
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:834
+#: packages/ui/primitives/document-flow/add-fields.tsx:1080
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:841
 msgid "To proceed further, please set at least one value for the {0} field."
 msgstr "To proceed further, please set at least one value for the {0} field."
 
diff --git a/packages/lib/translations/en/web.po b/packages/lib/translations/en/web.po
index 1ac45613e..b41771f48 100644
--- a/packages/lib/translations/en/web.po
+++ b/packages/lib/translations/en/web.po
@@ -57,7 +57,7 @@ msgstr "({0}) has invited you to sign this document"
 msgid "({0}) has invited you to view this document"
 msgstr "({0}) has invited you to view this document"
 
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:311
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:313
 msgid "{0, plural, one {(1 character over)} other {(# characters over)}}"
 msgstr "{0, plural, one {(1 character over)} other {(# characters over)}}"
 
@@ -119,7 +119,7 @@ msgstr "{0} Recipient(s)"
 #~ msgid "{0} the document to complete the process."
 #~ msgstr "{0} the document to complete the process."
 
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:292
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:294
 msgid "{charactersRemaining, plural, one {1 character remaining} other {{charactersRemaining} characters remaining}}"
 msgstr "{charactersRemaining, plural, one {1 character remaining} other {{charactersRemaining} characters remaining}}"
 
@@ -825,11 +825,11 @@ msgstr "By using the electronic signature feature, you are consenting to conduct
 #: apps/web/src/app/(signing)/sign/[token]/form.tsx:151
 #: apps/web/src/app/(signing)/sign/[token]/form.tsx:220
 #: apps/web/src/app/(signing)/sign/[token]/name-field.tsx:215
-#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:327
+#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:328
 #: apps/web/src/app/(signing)/sign/[token]/reject-document-dialog.tsx:153
 #: apps/web/src/app/(signing)/sign/[token]/sign-dialog.tsx:113
 #: apps/web/src/app/(signing)/sign/[token]/signature-field.tsx:248
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:333
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:335
 #: apps/web/src/app/(teams)/t/[teamUrl]/settings/team-transfer-status.tsx:121
 #: apps/web/src/components/(dashboard)/settings/token/delete-token-dialog.tsx:176
 #: apps/web/src/components/(dashboard)/settings/webhooks/create-webhook-dialog.tsx:242
@@ -1788,7 +1788,7 @@ msgstr "Enter your email address to receive the completed document."
 msgid "Enter your name"
 msgstr "Enter your name"
 
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:278
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:280
 msgid "Enter your text here"
 msgstr "Enter your text here"
 
@@ -2476,7 +2476,7 @@ msgstr "Not supported"
 msgid "Nothing to do"
 msgstr "Nothing to do"
 
-#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:270
+#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:271
 msgid "Number"
 msgstr "Number"
 
@@ -3039,8 +3039,8 @@ msgid "Roles"
 msgstr "Roles"
 
 #: apps/web/src/app/(dashboard)/templates/template-direct-link-dialog.tsx:446
-#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:336
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:342
+#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:337
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:344
 #: apps/web/src/app/(teams)/t/[teamUrl]/settings/preferences/branding-preferences.tsx:312
 #: apps/web/src/app/(teams)/t/[teamUrl]/settings/preferences/document-preferences.tsx:232
 msgid "Save"
@@ -3660,8 +3660,8 @@ msgstr "Templates"
 msgid "Templates allow you to quickly generate documents with pre-filled recipients and fields."
 msgstr "Templates allow you to quickly generate documents with pre-filled recipients and fields."
 
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:256
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:272
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:257
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:274
 msgid "Text"
 msgstr "Text"
 
diff --git a/packages/lib/translations/es/common.po b/packages/lib/translations/es/common.po
index 8192959e8..a702f38d6 100644
--- a/packages/lib/translations/es/common.po
+++ b/packages/lib/translations/es/common.po
@@ -414,11 +414,11 @@ msgstr "Agregar otro valor"
 msgid "Add myself"
 msgstr "Agregame"
 
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:637
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:645
 msgid "Add Myself"
 msgstr "Agregame"
 
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:623
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:631
 msgid "Add Placeholder Recipient"
 msgstr "Agregar destinatario de marcador de posición"
 
@@ -443,8 +443,8 @@ msgstr "Admin"
 msgid "Advanced Options"
 msgstr "Opciones avanzadas"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:573
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:406
+#: packages/ui/primitives/document-flow/add-fields.tsx:576
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:409
 msgid "Advanced settings"
 msgstr "Configuraciones avanzadas"
 
@@ -589,8 +589,8 @@ msgstr "Documento completado"
 msgid "Configure Direct Recipient"
 msgstr "Configurar destinatario directo"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:574
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:407
+#: packages/ui/primitives/document-flow/add-fields.tsx:577
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:410
 msgid "Configure the {0} field"
 msgstr "Configurar el campo {0}"
 
@@ -651,9 +651,9 @@ msgstr "Crear cuenta"
 msgid "Custom Text"
 msgstr "Texto personalizado"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:927
+#: packages/ui/primitives/document-flow/add-fields.tsx:934
 #: packages/ui/primitives/document-flow/types.ts:53
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:690
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:697
 msgid "Date"
 msgstr "Fecha"
 
@@ -670,7 +670,7 @@ msgstr "Rechazar"
 msgid "Didn't request a password change? We are here to help you secure your account, just <0>contact us.</0>"
 msgstr "¿No solicitaste un cambio de contraseña? Estamos aquí para ayudarte a asegurar tu cuenta, solo <0>contáctanos.</0>"
 
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:570
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:578
 msgid "Direct link receiver"
 msgstr "Receptor de enlace directo"
 
@@ -792,8 +792,8 @@ msgstr "Borrador"
 msgid "Drag & drop your PDF here."
 msgstr "Arrastre y suelte su PDF aquí."
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:1058
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:820
+#: packages/ui/primitives/document-flow/add-fields.tsx:1065
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:827
 msgid "Dropdown"
 msgstr "Menú desplegable"
 
@@ -802,14 +802,14 @@ msgid "Dropdown options"
 msgstr "Opciones de menú desplegable"
 
 #: packages/lib/constants/document.ts:28
-#: packages/ui/primitives/document-flow/add-fields.tsx:875
+#: packages/ui/primitives/document-flow/add-fields.tsx:882
 #: packages/ui/primitives/document-flow/add-signature.tsx:272
 #: packages/ui/primitives/document-flow/add-signers.tsx:512
 #: packages/ui/primitives/document-flow/add-signers.tsx:519
 #: packages/ui/primitives/document-flow/types.ts:54
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:638
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:463
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:470
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:645
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:471
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:478
 msgid "Email"
 msgstr "Correo electrónico"
 
@@ -829,7 +829,7 @@ msgstr "Correo electrónico reeenviado"
 msgid "Email sent"
 msgstr "Correo electrónico enviado"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:1123
+#: packages/ui/primitives/document-flow/add-fields.tsx:1130
 msgid "Empty field"
 msgstr "Campo vacío"
 
@@ -838,11 +838,11 @@ msgid "Enable Direct Link Signing"
 msgstr "Habilitar firma de enlace directo"
 
 #: packages/ui/primitives/document-flow/add-signers.tsx:401
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:362
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:370
 msgid "Enable signing order"
 msgstr "Habilitar orden de firma"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:795
+#: packages/ui/primitives/document-flow/add-fields.tsx:802
 msgid "Enable Typed Signatures"
 msgstr "Habilitar firmas escritas"
 
@@ -1020,14 +1020,14 @@ msgstr "Mensaje <0>(Opcional)</0>"
 msgid "Min"
 msgstr "Mín"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:901
+#: packages/ui/primitives/document-flow/add-fields.tsx:908
 #: packages/ui/primitives/document-flow/add-signature.tsx:298
 #: packages/ui/primitives/document-flow/add-signers.tsx:550
 #: packages/ui/primitives/document-flow/add-signers.tsx:556
 #: packages/ui/primitives/document-flow/types.ts:55
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:664
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:498
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:504
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:671
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:506
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:512
 msgid "Name"
 msgstr "Nombre"
 
@@ -1043,8 +1043,8 @@ msgstr "Necesita firmar"
 msgid "Needs to view"
 msgstr "Necesita ver"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:686
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:504
+#: packages/ui/primitives/document-flow/add-fields.tsx:693
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:511
 msgid "No recipient matching this description was found."
 msgstr "No se encontró ningún destinatario que coincidiera con esta descripción."
 
@@ -1052,8 +1052,8 @@ msgstr "No se encontró ningún destinatario que coincidiera con esta descripci
 msgid "No recipients"
 msgstr "Sin destinatarios"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:701
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:519
+#: packages/ui/primitives/document-flow/add-fields.tsx:708
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:526
 msgid "No recipients with this role"
 msgstr "No hay destinatarios con este rol"
 
@@ -1081,9 +1081,9 @@ msgstr "No se encontró valor."
 msgid "None"
 msgstr "Ninguno"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:979
+#: packages/ui/primitives/document-flow/add-fields.tsx:986
 #: packages/ui/primitives/document-flow/types.ts:56
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:742
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:749
 msgid "Number"
 msgstr "Número"
 
@@ -1175,7 +1175,7 @@ msgid "Please try again or contact our support."
 msgstr "Por favor, inténtalo de nuevo o contacta a nuestro soporte."
 
 #: packages/ui/primitives/document-flow/types.ts:57
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:768
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:775
 msgid "Radio"
 msgstr "Radio"
 
@@ -1255,7 +1255,7 @@ msgstr "Recordatorio: Por favor {recipientActionVerb} este documento"
 msgid "Reminder: Please {recipientActionVerb} your document"
 msgstr "Recordatorio: Por favor {recipientActionVerb} tu documento"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:1110
+#: packages/ui/primitives/document-flow/add-fields.tsx:1117
 msgid "Remove"
 msgstr "Eliminar"
 
@@ -1287,7 +1287,7 @@ msgstr "Filas por página"
 msgid "Save"
 msgstr "Guardar"
 
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:854
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:861
 msgid "Save Template"
 msgstr "Guardar plantilla"
 
@@ -1360,7 +1360,7 @@ msgid "Share your signing experience!"
 msgstr "¡Comparte tu experiencia de firma!"
 
 #: packages/ui/primitives/document-flow/add-signers.tsx:709
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:655
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:663
 msgid "Show advanced settings"
 msgstr "Mostrar configuraciones avanzadas"
 
@@ -1376,11 +1376,11 @@ msgstr "Firmar Documento"
 msgid "Sign In"
 msgstr "Iniciar sesión"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:823
+#: packages/ui/primitives/document-flow/add-fields.tsx:830
 #: packages/ui/primitives/document-flow/add-signature.tsx:323
 #: packages/ui/primitives/document-flow/field-icon.tsx:52
 #: packages/ui/primitives/document-flow/types.ts:49
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:586
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:593
 msgid "Signature"
 msgstr "Firma"
 
@@ -1463,9 +1463,9 @@ msgstr "Correo electrónico del equipo eliminado para {teamName} en Documenso"
 msgid "Template title"
 msgstr "Título de plantilla"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:953
+#: packages/ui/primitives/document-flow/add-fields.tsx:960
 #: packages/ui/primitives/document-flow/types.ts:52
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:716
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:723
 msgid "Text"
 msgstr "Texto"
 
@@ -1560,7 +1560,7 @@ msgstr "Esto se puede anular configurando los requisitos de autenticación direc
 msgid "This document can not be recovered, if you would like to dispute the reason for future documents please contact support."
 msgstr "Este documento no se puede recuperar, si deseas impugnar la razón para documentos futuros, por favor contacta con el soporte."
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:757
+#: packages/ui/primitives/document-flow/add-fields.tsx:764
 msgid "This document has already been sent to this recipient. You can no longer edit this recipient."
 msgstr "Este documento ya ha sido enviado a este destinatario. Ya no puede editar a este destinatario."
 
@@ -1591,7 +1591,7 @@ msgstr "Este correo electrónico se envía al destinatario solicitando que firme
 msgid "This email will be sent to the recipient who has just signed the document, if there are still other recipients who have not signed yet."
 msgstr "Este correo electrónico se enviará al destinatario que acaba de firmar el documento, si todavía hay otros destinatarios que no han firmado."
 
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:573
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:581
 msgid "This field cannot be modified or deleted. When you share this template's direct link or add it to your public profile, anyone who accesses it can input their name and email, and fill in the fields assigned to them."
 msgstr "Este campo no se puede modificar ni eliminar. Cuando comparta el enlace directo de esta plantilla o lo agregue a su perfil público, cualquiera que acceda podrá ingresar su nombre y correo electrónico, y completar los campos que se le hayan asignado."
 
@@ -1599,7 +1599,7 @@ msgstr "Este campo no se puede modificar ni eliminar. Cuando comparta el enlace
 msgid "This is how the document will reach the recipients once the document is ready for signing."
 msgstr "Así es como el documento llegará a los destinatarios una vez que esté listo para firmarse."
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:1090
+#: packages/ui/primitives/document-flow/add-fields.tsx:1097
 msgid "This recipient can no longer be modified as they have signed a field, or completed the document."
 msgstr "Este destinatario ya no puede ser modificado ya que ha firmado un campo o completado el documento."
 
@@ -1628,8 +1628,8 @@ msgstr "Zona horaria"
 msgid "Title"
 msgstr "Título"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:1073
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:834
+#: packages/ui/primitives/document-flow/add-fields.tsx:1080
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:841
 msgid "To proceed further, please set at least one value for the {0} field."
 msgstr "Para continuar, por favor establezca al menos un valor para el campo {0}."
 
diff --git a/packages/lib/translations/es/web.po b/packages/lib/translations/es/web.po
index f8afb17d2..975aae7ce 100644
--- a/packages/lib/translations/es/web.po
+++ b/packages/lib/translations/es/web.po
@@ -62,7 +62,7 @@ msgstr "({0}) te ha invitado a firmar este documento"
 msgid "({0}) has invited you to view this document"
 msgstr "({0}) te ha invitado a ver este documento"
 
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:311
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:313
 msgid "{0, plural, one {(1 character over)} other {(# characters over)}}"
 msgstr "{0, plural, one {(1 carácter excedido)} other {(# caracteres excedidos)}}"
 
@@ -124,7 +124,7 @@ msgstr "{0} Destinatario(s)"
 #~ msgid "{0} the document to complete the process."
 #~ msgstr "{0} the document to complete the process."
 
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:292
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:294
 msgid "{charactersRemaining, plural, one {1 character remaining} other {{charactersRemaining} characters remaining}}"
 msgstr "{charactersRemaining, plural, one {1 carácter restante} other {{charactersRemaining} caracteres restantes}}"
 
@@ -830,11 +830,11 @@ msgstr "Al utilizar la función de firma electrónica, usted está consintiendo
 #: apps/web/src/app/(signing)/sign/[token]/form.tsx:151
 #: apps/web/src/app/(signing)/sign/[token]/form.tsx:220
 #: apps/web/src/app/(signing)/sign/[token]/name-field.tsx:215
-#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:327
+#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:328
 #: apps/web/src/app/(signing)/sign/[token]/reject-document-dialog.tsx:153
 #: apps/web/src/app/(signing)/sign/[token]/sign-dialog.tsx:113
 #: apps/web/src/app/(signing)/sign/[token]/signature-field.tsx:248
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:333
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:335
 #: apps/web/src/app/(teams)/t/[teamUrl]/settings/team-transfer-status.tsx:121
 #: apps/web/src/components/(dashboard)/settings/token/delete-token-dialog.tsx:176
 #: apps/web/src/components/(dashboard)/settings/webhooks/create-webhook-dialog.tsx:242
@@ -1793,7 +1793,7 @@ msgstr "Ingresa tu dirección de correo electrónico para recibir el documento c
 msgid "Enter your name"
 msgstr "Ingresa tu nombre"
 
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:278
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:280
 msgid "Enter your text here"
 msgstr "Ingresa tu texto aquí"
 
@@ -2481,7 +2481,7 @@ msgstr "No soportado"
 msgid "Nothing to do"
 msgstr "Nada que hacer"
 
-#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:270
+#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:271
 msgid "Number"
 msgstr "Número"
 
@@ -3044,8 +3044,8 @@ msgid "Roles"
 msgstr "Roles"
 
 #: apps/web/src/app/(dashboard)/templates/template-direct-link-dialog.tsx:446
-#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:336
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:342
+#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:337
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:344
 #: apps/web/src/app/(teams)/t/[teamUrl]/settings/preferences/branding-preferences.tsx:312
 #: apps/web/src/app/(teams)/t/[teamUrl]/settings/preferences/document-preferences.tsx:232
 msgid "Save"
@@ -3665,8 +3665,8 @@ msgstr "Plantillas"
 msgid "Templates allow you to quickly generate documents with pre-filled recipients and fields."
 msgstr "Las plantillas te permiten generar documentos rápidamente con destinatarios y campos prellenados."
 
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:256
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:272
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:257
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:274
 msgid "Text"
 msgstr "Texto"
 
diff --git a/packages/lib/translations/fr/common.po b/packages/lib/translations/fr/common.po
index 4afc2f58e..ac0310ba3 100644
--- a/packages/lib/translations/fr/common.po
+++ b/packages/lib/translations/fr/common.po
@@ -414,11 +414,11 @@ msgstr "Ajouter une autre valeur"
 msgid "Add myself"
 msgstr "Ajoutez-moi"
 
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:637
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:645
 msgid "Add Myself"
 msgstr "Ajoutez-moi"
 
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:623
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:631
 msgid "Add Placeholder Recipient"
 msgstr "Ajouter un destinataire de substitution"
 
@@ -443,8 +443,8 @@ msgstr "Administrateur"
 msgid "Advanced Options"
 msgstr "Options avancées"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:573
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:406
+#: packages/ui/primitives/document-flow/add-fields.tsx:576
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:409
 msgid "Advanced settings"
 msgstr "Paramètres avancés"
 
@@ -589,8 +589,8 @@ msgstr "Document Terminé"
 msgid "Configure Direct Recipient"
 msgstr "Configurer le destinataire direct"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:574
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:407
+#: packages/ui/primitives/document-flow/add-fields.tsx:577
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:410
 msgid "Configure the {0} field"
 msgstr "Configurer le champ {0}"
 
@@ -651,9 +651,9 @@ msgstr "Créer un compte"
 msgid "Custom Text"
 msgstr "Texte personnalisé"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:927
+#: packages/ui/primitives/document-flow/add-fields.tsx:934
 #: packages/ui/primitives/document-flow/types.ts:53
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:690
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:697
 msgid "Date"
 msgstr "Date"
 
@@ -670,7 +670,7 @@ msgstr "Décliner"
 msgid "Didn't request a password change? We are here to help you secure your account, just <0>contact us.</0>"
 msgstr "Vous n'avez pas demandé de changement de mot de passe ? Nous sommes ici pour vous aider à sécuriser votre compte, il suffit de <0>nous contacter.</0>"
 
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:570
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:578
 msgid "Direct link receiver"
 msgstr "Receveur de lien direct"
 
@@ -792,8 +792,8 @@ msgstr "Brouillon"
 msgid "Drag & drop your PDF here."
 msgstr "Faites glisser et déposez votre PDF ici."
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:1058
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:820
+#: packages/ui/primitives/document-flow/add-fields.tsx:1065
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:827
 msgid "Dropdown"
 msgstr "Liste déroulante"
 
@@ -802,14 +802,14 @@ msgid "Dropdown options"
 msgstr "Options de liste déroulante"
 
 #: packages/lib/constants/document.ts:28
-#: packages/ui/primitives/document-flow/add-fields.tsx:875
+#: packages/ui/primitives/document-flow/add-fields.tsx:882
 #: packages/ui/primitives/document-flow/add-signature.tsx:272
 #: packages/ui/primitives/document-flow/add-signers.tsx:512
 #: packages/ui/primitives/document-flow/add-signers.tsx:519
 #: packages/ui/primitives/document-flow/types.ts:54
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:638
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:463
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:470
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:645
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:471
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:478
 msgid "Email"
 msgstr "Email"
 
@@ -829,7 +829,7 @@ msgstr "Email renvoyé"
 msgid "Email sent"
 msgstr "Email envoyé"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:1123
+#: packages/ui/primitives/document-flow/add-fields.tsx:1130
 msgid "Empty field"
 msgstr "Champ vide"
 
@@ -838,11 +838,11 @@ msgid "Enable Direct Link Signing"
 msgstr "Activer la signature de lien direct"
 
 #: packages/ui/primitives/document-flow/add-signers.tsx:401
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:362
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:370
 msgid "Enable signing order"
 msgstr "Activer l'ordre de signature"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:795
+#: packages/ui/primitives/document-flow/add-fields.tsx:802
 msgid "Enable Typed Signatures"
 msgstr "Activer les signatures tapées"
 
@@ -1020,14 +1020,14 @@ msgstr "Message <0>(Optionnel)</0>"
 msgid "Min"
 msgstr "Min"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:901
+#: packages/ui/primitives/document-flow/add-fields.tsx:908
 #: packages/ui/primitives/document-flow/add-signature.tsx:298
 #: packages/ui/primitives/document-flow/add-signers.tsx:550
 #: packages/ui/primitives/document-flow/add-signers.tsx:556
 #: packages/ui/primitives/document-flow/types.ts:55
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:664
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:498
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:504
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:671
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:506
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:512
 msgid "Name"
 msgstr "Nom"
 
@@ -1043,8 +1043,8 @@ msgstr "Nécessite une signature"
 msgid "Needs to view"
 msgstr "Nécessite une visualisation"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:686
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:504
+#: packages/ui/primitives/document-flow/add-fields.tsx:693
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:511
 msgid "No recipient matching this description was found."
 msgstr "Aucun destinataire correspondant à cette description n'a été trouvé."
 
@@ -1052,8 +1052,8 @@ msgstr "Aucun destinataire correspondant à cette description n'a été trouvé.
 msgid "No recipients"
 msgstr "Aucun destinataire"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:701
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:519
+#: packages/ui/primitives/document-flow/add-fields.tsx:708
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:526
 msgid "No recipients with this role"
 msgstr "Aucun destinataire avec ce rôle"
 
@@ -1081,9 +1081,9 @@ msgstr "Aucune valeur trouvée."
 msgid "None"
 msgstr "Aucun"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:979
+#: packages/ui/primitives/document-flow/add-fields.tsx:986
 #: packages/ui/primitives/document-flow/types.ts:56
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:742
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:749
 msgid "Number"
 msgstr "Numéro"
 
@@ -1175,7 +1175,7 @@ msgid "Please try again or contact our support."
 msgstr "Veuillez réessayer ou contacter notre support."
 
 #: packages/ui/primitives/document-flow/types.ts:57
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:768
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:775
 msgid "Radio"
 msgstr "Radio"
 
@@ -1255,7 +1255,7 @@ msgstr "Rappel : Veuillez {recipientActionVerb} ce document"
 msgid "Reminder: Please {recipientActionVerb} your document"
 msgstr "Rappel : Veuillez {recipientActionVerb} votre document"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:1110
+#: packages/ui/primitives/document-flow/add-fields.tsx:1117
 msgid "Remove"
 msgstr "Retirer"
 
@@ -1287,7 +1287,7 @@ msgstr "Lignes par page"
 msgid "Save"
 msgstr "Sauvegarder"
 
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:854
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:861
 msgid "Save Template"
 msgstr "Sauvegarder le modèle"
 
@@ -1360,7 +1360,7 @@ msgid "Share your signing experience!"
 msgstr "Partagez votre expérience de signature !"
 
 #: packages/ui/primitives/document-flow/add-signers.tsx:709
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:655
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:663
 msgid "Show advanced settings"
 msgstr "Afficher les paramètres avancés"
 
@@ -1376,11 +1376,11 @@ msgstr "Signer le document"
 msgid "Sign In"
 msgstr "Se connecter"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:823
+#: packages/ui/primitives/document-flow/add-fields.tsx:830
 #: packages/ui/primitives/document-flow/add-signature.tsx:323
 #: packages/ui/primitives/document-flow/field-icon.tsx:52
 #: packages/ui/primitives/document-flow/types.ts:49
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:586
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:593
 msgid "Signature"
 msgstr "Signature"
 
@@ -1463,9 +1463,9 @@ msgstr "Email d'équipe supprimé pour {teamName} sur Documenso"
 msgid "Template title"
 msgstr "Titre du modèle"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:953
+#: packages/ui/primitives/document-flow/add-fields.tsx:960
 #: packages/ui/primitives/document-flow/types.ts:52
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:716
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:723
 msgid "Text"
 msgstr "Texte"
 
@@ -1560,7 +1560,7 @@ msgstr "Cela peut être remplacé par le paramétrage direct des exigences d'aut
 msgid "This document can not be recovered, if you would like to dispute the reason for future documents please contact support."
 msgstr "Ce document ne peut pas être récupéré, si vous souhaitez contester la raison des documents futurs, veuillez contacter le support."
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:757
+#: packages/ui/primitives/document-flow/add-fields.tsx:764
 msgid "This document has already been sent to this recipient. You can no longer edit this recipient."
 msgstr "Ce document a déjà été envoyé à ce destinataire. Vous ne pouvez plus modifier ce destinataire."
 
@@ -1591,7 +1591,7 @@ msgstr "Cet e-mail est envoyé au destinataire lui demandant de signer le docume
 msgid "This email will be sent to the recipient who has just signed the document, if there are still other recipients who have not signed yet."
 msgstr "Cet e-mail sera envoyé au destinataire qui vient de signer le document, s'il y a encore d'autres destinataires qui n'ont pas signé."
 
-#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:573
+#: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:581
 msgid "This field cannot be modified or deleted. When you share this template's direct link or add it to your public profile, anyone who accesses it can input their name and email, and fill in the fields assigned to them."
 msgstr "Ce champ ne peut pas être modifié ou supprimé. Lorsque vous partagez le lien direct de ce modèle ou l'ajoutez à votre profil public, toute personne qui y accède peut saisir son nom et son email, et remplir les champs qui lui sont attribués."
 
@@ -1599,7 +1599,7 @@ msgstr "Ce champ ne peut pas être modifié ou supprimé. Lorsque vous partagez
 msgid "This is how the document will reach the recipients once the document is ready for signing."
 msgstr "Voici comment le document atteindra les destinataires une fois qu'il sera prêt à être signé."
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:1090
+#: packages/ui/primitives/document-flow/add-fields.tsx:1097
 msgid "This recipient can no longer be modified as they have signed a field, or completed the document."
 msgstr "Ce destinataire ne peut plus être modifié car il a signé un champ ou complété le document."
 
@@ -1628,8 +1628,8 @@ msgstr "Fuseau horaire"
 msgid "Title"
 msgstr "Titre"
 
-#: packages/ui/primitives/document-flow/add-fields.tsx:1073
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:834
+#: packages/ui/primitives/document-flow/add-fields.tsx:1080
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:841
 msgid "To proceed further, please set at least one value for the {0} field."
 msgstr "Pour continuer, veuillez définir au moins une valeur pour le champ {0}."
 
diff --git a/packages/lib/translations/fr/web.po b/packages/lib/translations/fr/web.po
index e02763d93..cee96c813 100644
--- a/packages/lib/translations/fr/web.po
+++ b/packages/lib/translations/fr/web.po
@@ -62,7 +62,7 @@ msgstr "({0}) vous a invité à signer ce document"
 msgid "({0}) has invited you to view this document"
 msgstr "({0}) vous a invité à consulter ce document"
 
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:311
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:313
 msgid "{0, plural, one {(1 character over)} other {(# characters over)}}"
 msgstr "{0, plural, one {(1 caractère de trop)} other {(# caractères de trop)}}"
 
@@ -124,7 +124,7 @@ msgstr "{0} Destinataire(s)"
 #~ msgid "{0} the document to complete the process."
 #~ msgstr "{0} the document to complete the process."
 
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:292
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:294
 msgid "{charactersRemaining, plural, one {1 character remaining} other {{charactersRemaining} characters remaining}}"
 msgstr "{charactersRemaining, plural, one {1 caractère restant} other {{charactersRemaining} caractères restants}}"
 
@@ -830,11 +830,11 @@ msgstr "En utilisant la fonctionnalité de signature électronique, vous consent
 #: apps/web/src/app/(signing)/sign/[token]/form.tsx:151
 #: apps/web/src/app/(signing)/sign/[token]/form.tsx:220
 #: apps/web/src/app/(signing)/sign/[token]/name-field.tsx:215
-#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:327
+#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:328
 #: apps/web/src/app/(signing)/sign/[token]/reject-document-dialog.tsx:153
 #: apps/web/src/app/(signing)/sign/[token]/sign-dialog.tsx:113
 #: apps/web/src/app/(signing)/sign/[token]/signature-field.tsx:248
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:333
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:335
 #: apps/web/src/app/(teams)/t/[teamUrl]/settings/team-transfer-status.tsx:121
 #: apps/web/src/components/(dashboard)/settings/token/delete-token-dialog.tsx:176
 #: apps/web/src/components/(dashboard)/settings/webhooks/create-webhook-dialog.tsx:242
@@ -1793,7 +1793,7 @@ msgstr "Entrez votre adresse e-mail pour recevoir le document complété."
 msgid "Enter your name"
 msgstr "Entrez votre nom"
 
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:278
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:280
 msgid "Enter your text here"
 msgstr "Entrez votre texte ici"
 
@@ -2481,7 +2481,7 @@ msgstr "Non pris en charge"
 msgid "Nothing to do"
 msgstr "Rien à faire"
 
-#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:270
+#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:271
 msgid "Number"
 msgstr "Numéro"
 
@@ -3044,8 +3044,8 @@ msgid "Roles"
 msgstr "Rôles"
 
 #: apps/web/src/app/(dashboard)/templates/template-direct-link-dialog.tsx:446
-#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:336
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:342
+#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:337
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:344
 #: apps/web/src/app/(teams)/t/[teamUrl]/settings/preferences/branding-preferences.tsx:312
 #: apps/web/src/app/(teams)/t/[teamUrl]/settings/preferences/document-preferences.tsx:232
 msgid "Save"
@@ -3665,8 +3665,8 @@ msgstr "Modèles"
 msgid "Templates allow you to quickly generate documents with pre-filled recipients and fields."
 msgstr "Les modèles vous permettent de générer rapidement des documents avec des destinataires et des champs pré-remplis."
 
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:256
-#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:272
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:257
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:274
 msgid "Text"
 msgstr "Texte"
 
diff --git a/packages/tailwind-config/index.cjs b/packages/tailwind-config/index.cjs
index c2c510e84..067034a8b 100644
--- a/packages/tailwind-config/index.cjs
+++ b/packages/tailwind-config/index.cjs
@@ -139,5 +139,9 @@ module.exports = {
       },
     },
   },
-  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
+  plugins: [
+    require('tailwindcss-animate'),
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/container-queries'),
+  ],
 };
diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json
index d6827955f..e062b0df5 100644
--- a/packages/tailwind-config/package.json
+++ b/packages/tailwind-config/package.json
@@ -7,15 +7,15 @@
     "clean": "rimraf node_modules"
   },
   "dependencies": {
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/typography": "^0.5.9",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.32",
     "tailwindcss": "3.3.2",
     "tailwindcss-animate": "^1.0.5"
   },
-  "devDependencies": {
-    "@tailwindcss/typography": "^0.5.9"
-  },
+  "devDependencies": {},
   "publishConfig": {
     "access": "public"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/ui/primitives/auto-sized-text.tsx b/packages/ui/primitives/auto-sized-text.tsx
new file mode 100644
index 000000000..a2b9e8cef
--- /dev/null
+++ b/packages/ui/primitives/auto-sized-text.tsx
@@ -0,0 +1,157 @@
+'use client';
+
+import { useLayoutEffect, useRef } from 'react';
+
+import { cn } from '../lib/utils';
+
+export type Dimensions = {
+  height: number;
+  width: number;
+};
+
+export type AutoSizedTextProps = {
+  children: React.ReactNode;
+  className?: string;
+  maxHeight?: number;
+  useRem?: boolean;
+};
+
+const ITERATION_LIMIT = 20;
+const MAXIMUM_DIFFERENCE = 1; // px
+
+function getElementDimensions(element: HTMLElement): Dimensions {
+  const bbox = element.getBoundingClientRect();
+
+  return {
+    width: bbox.width,
+    height: bbox.height,
+  };
+}
+
+function getBaseFontSize(): number {
+  try {
+    const fontSize = getComputedStyle(document.documentElement).fontSize;
+    const parsed = parseFloat(fontSize);
+
+    // Check if we got a valid number
+    if (!Number.isFinite(parsed)) {
+      return 16;
+    }
+
+    return parsed;
+  } catch (error) {
+    // Fallback to browser default if anything goes wrong
+    return 16;
+  }
+}
+
+function pxToRem(px: number): number {
+  return px / getBaseFontSize();
+}
+
+export function AutoSizedText({
+  children,
+  className,
+  maxHeight,
+  useRem = false,
+}: AutoSizedTextProps) {
+  const childRef = useRef<HTMLDivElement>(null);
+
+  const fontSize = useRef<number>(0);
+  const fontSizeLowerBound = useRef<number>(0);
+  const fontSizeUpperBound = useRef<number>(0);
+
+  const adjustFontSize = (childDimensions: Dimensions, parentDimensions: Dimensions) => {
+    const childElement = childRef.current;
+
+    if (!childElement) {
+      return;
+    }
+
+    let newFontSize: number;
+
+    const targetHeight =
+      maxHeight && maxHeight < parentDimensions.height ? maxHeight : parentDimensions.height;
+
+    const isElementTooBig =
+      childDimensions.width > parentDimensions.width || childDimensions.height > targetHeight;
+
+    if (isElementTooBig) {
+      // Scale down if element is bigger than target
+      newFontSize = (fontSizeLowerBound.current + fontSize.current) / 2;
+      fontSizeUpperBound.current = fontSize.current;
+    } else if (
+      childDimensions.width < parentDimensions.width ||
+      childDimensions.height < parentDimensions.height
+    ) {
+      // Scale up if element is smaller than target
+      newFontSize = (fontSizeUpperBound.current + fontSize.current) / 2;
+      fontSizeLowerBound.current = fontSize.current;
+    }
+
+    fontSize.current = newFontSize;
+
+    // Convert to rem if useRem is true
+    const displayFontSize = useRem ? `${pxToRem(newFontSize)}rem` : `${newFontSize}px`;
+    childElement.style.fontSize = displayFontSize;
+  };
+
+  useLayoutEffect(() => {
+    const childElement = childRef.current;
+    const parentElement = childRef.current?.parentElement;
+
+    if (!childElement || !parentElement) {
+      return;
+    }
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+
+      if (!entry) {
+        return;
+      }
+
+      const parentDimensions = entry.contentRect;
+
+      // Reset iteration parameters
+      fontSizeLowerBound.current = 0;
+      fontSizeUpperBound.current = parentDimensions.height;
+
+      let iterationCount = 0;
+
+      while (iterationCount <= ITERATION_LIMIT) {
+        const childDimensions = getElementDimensions(childElement);
+
+        const targetHeight =
+          maxHeight && maxHeight < parentDimensions.height ? maxHeight : parentDimensions.height;
+
+        const widthDifference = parentDimensions.width - childDimensions.width;
+        const heightDifference = targetHeight - childDimensions.height;
+
+        const childFitsIntoParent = heightDifference >= 0 && widthDifference >= 0;
+        const isWithinTolerance =
+          Math.abs(widthDifference) <= MAXIMUM_DIFFERENCE ||
+          Math.abs(heightDifference) <= MAXIMUM_DIFFERENCE;
+
+        if (childFitsIntoParent && isWithinTolerance) {
+          break;
+        }
+
+        adjustFontSize(childDimensions, parentDimensions);
+        iterationCount += 1;
+      }
+    });
+
+    observer.observe(parentElement);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [maxHeight, useRem]);
+
+  return (
+    <div ref={childRef} className={cn('inline-block leading-none', className)}>
+      {children}
+    </div>
+  );
+}
diff --git a/packages/ui/primitives/document-flow/add-fields.tsx b/packages/ui/primitives/document-flow/add-fields.tsx
index ff0e4592e..afa80b14a 100644
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@@ -76,8 +76,11 @@ const fontCaveat = Caveat({
   variable: '--font-caveat',
 });
 
-const MIN_HEIGHT_PX = 20;
-const MIN_WIDTH_PX = 80;
+const MIN_HEIGHT_PX = 12;
+const MIN_WIDTH_PX = 36;
+
+const DEFAULT_HEIGHT_PX = MIN_HEIGHT_PX * 2.5;
+const DEFAULT_WIDTH_PX = MIN_WIDTH_PX * 2.5;
 
 export type FieldFormType = {
   nativeId?: number;
@@ -480,8 +483,8 @@ export const AddFieldsFormPartial = ({
       }
 
       fieldBounds.current = {
-        height: Math.max(MIN_HEIGHT_PX),
-        width: Math.max(MIN_WIDTH_PX),
+        height: Math.max(DEFAULT_HEIGHT_PX),
+        width: Math.max(DEFAULT_WIDTH_PX),
       };
     });
 
@@ -594,7 +597,7 @@ export const AddFieldsFormPartial = ({
               {selectedField && (
                 <div
                   className={cn(
-                    'text-muted-foreground dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center bg-white transition duration-200',
+                    'text-muted-foreground dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center bg-white transition duration-200 [container-type:size]',
                     selectedSignerStyles.default.base,
                     {
                       '-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,
@@ -609,7 +612,9 @@ export const AddFieldsFormPartial = ({
                     width: fieldBounds.current.width,
                   }}
                 >
-                  {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[selectedField])}
+                  <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">
+                    {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[selectedField])}
+                  </span>
                 </div>
               )}
 
@@ -630,8 +635,10 @@ export const AddFieldsFormPartial = ({
                         selectedSigner?.email !== field.signerEmail ||
                         !canRecipientBeModified(selectedSigner, fields)
                       }
-                      minHeight={fieldBounds.current.height}
-                      minWidth={fieldBounds.current.width}
+                      minHeight={MIN_HEIGHT_PX}
+                      minWidth={MIN_WIDTH_PX}
+                      defaultHeight={DEFAULT_HEIGHT_PX}
+                      defaultWidth={DEFAULT_WIDTH_PX}
                       passive={isFieldWithinBounds && !!selectedField}
                       onFocus={() => setLastActiveField(field)}
                       onBlur={() => setLastActiveField(null)}
diff --git a/packages/ui/primitives/document-flow/field-icon.tsx b/packages/ui/primitives/document-flow/field-icon.tsx
index b6e33b03a..43595c702 100644
--- a/packages/ui/primitives/document-flow/field-icon.tsx
+++ b/packages/ui/primitives/document-flow/field-icon.tsx
@@ -45,7 +45,7 @@ export const FieldIcon = ({
     return (
       <div
         className={cn(
-          'text-field-card-foreground flex items-center justify-center gap-x-1 text-[clamp(0.875rem,1.8cqw,1.2rem)]',
+          'text-field-card-foreground flex items-center justify-center gap-x-1 text-[clamp(0.575rem,25cqw,1.2rem)]',
           fontCaveatClassName,
         )}
       >
@@ -71,8 +71,9 @@ export const FieldIcon = ({
     }
 
     return (
-      <div className="text-field-card-foreground flex items-center justify-center gap-x-1.5 text-[clamp(0.625rem,1cqw,0.825rem)]">
-        <Icon className="h-4 w-4" /> {label}
+      <div className="text-field-card-foreground flex items-center justify-center gap-x-1.5 text-[clamp(0.425rem,25cqw,0.825rem)]">
+        <Icon className="h-[clamp(0.625rem,20cqw,0.925rem)] w-[clamp(0.625rem,20cqw,0.925rem)]" />{' '}
+        {label}
       </div>
     );
   }
diff --git a/packages/ui/primitives/document-flow/field-item.tsx b/packages/ui/primitives/document-flow/field-item.tsx
index 7caa80ea2..d77e55047 100644
--- a/packages/ui/primitives/document-flow/field-item.tsx
+++ b/packages/ui/primitives/document-flow/field-item.tsx
@@ -35,6 +35,8 @@ export type FieldItemProps = {
   disabled?: boolean;
   minHeight?: number;
   minWidth?: number;
+  defaultHeight?: number;
+  defaultWidth?: number;
   onResize?: (_node: HTMLElement) => void;
   onMove?: (_node: HTMLElement) => void;
   onRemove?: () => void;
@@ -53,6 +55,8 @@ export const FieldItem = ({
   disabled,
   minHeight,
   minWidth,
+  defaultHeight,
+  defaultWidth,
   onResize,
   onMove,
   onRemove,
@@ -68,8 +72,8 @@ export const FieldItem = ({
   const [coords, setCoords] = useState({
     pageX: 0,
     pageY: 0,
-    pageHeight: 0,
-    pageWidth: 0,
+    pageHeight: defaultHeight || 0,
+    pageWidth: defaultWidth || 0,
   });
   const [settingsActive, setSettingsActive] = useState(false);
   const $el = useRef(null);
diff --git a/packages/ui/primitives/document-flow/show-field-item.tsx b/packages/ui/primitives/document-flow/show-field-item.tsx
index ced978e7c..8007aff0b 100644
--- a/packages/ui/primitives/document-flow/show-field-item.tsx
+++ b/packages/ui/primitives/document-flow/show-field-item.tsx
@@ -44,18 +44,18 @@ export const ShowFieldItem = ({ field, recipients }: ShowFieldItemProps) => {
         width: `${coords.width}px`,
       }}
     >
-      <Card className={cn('bg-background h-full w-full')}>
+      <Card className={cn('bg-background h-full w-full [container-type:size]')}>
         <CardContent
           className={cn(
-            'text-muted-foreground/50 flex h-full w-full flex-col items-center justify-center p-2 text-xl',
+            'text-muted-foreground/50 flex h-full w-full flex-col items-center justify-center p-0 text-[clamp(0.575rem,1.8cqw,1.2rem)] leading-none',
             field.type === FieldType.SIGNATURE && fontCaveat.className,
           )}
         >
           {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type])}
 
-          <p className="text-muted-foreground/50 w-full truncate text-center text-xs">
+          {/* <p className="text-muted-foreground/50 w-full truncate text-center text-xs">
             {signerEmail}
-          </p>
+          </p> */}
         </CardContent>
       </Card>
     </div>,
diff --git a/packages/ui/primitives/template-flow/add-template-fields.tsx b/packages/ui/primitives/template-flow/add-template-fields.tsx
index b515684a1..6da8e27d3 100644
--- a/packages/ui/primitives/template-flow/add-template-fields.tsx
+++ b/packages/ui/primitives/template-flow/add-template-fields.tsx
@@ -67,8 +67,11 @@ const fontCaveat = Caveat({
   variable: '--font-caveat',
 });
 
-const MIN_HEIGHT_PX = 20;
-const MIN_WIDTH_PX = 80;
+const MIN_HEIGHT_PX = 12;
+const MIN_WIDTH_PX = 36;
+
+const DEFAULT_HEIGHT_PX = MIN_HEIGHT_PX * 2.5;
+const DEFAULT_WIDTH_PX = MIN_WIDTH_PX * 2.5;
 
 export type AddTemplateFieldsFormProps = {
   documentFlow: DocumentFlowStep;
@@ -354,8 +357,8 @@ export const AddTemplateFieldsFormPartial = ({
       }
 
       fieldBounds.current = {
-        height: Math.max(MIN_HEIGHT_PX),
-        width: Math.max(MIN_WIDTH_PX),
+        height: Math.max(DEFAULT_HEIGHT_PX),
+        width: Math.max(DEFAULT_WIDTH_PX),
       };
     });
 
@@ -425,7 +428,7 @@ export const AddTemplateFieldsFormPartial = ({
               {selectedField && (
                 <div
                   className={cn(
-                    'text-muted-foreground dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center bg-white transition duration-200',
+                    'text-muted-foreground dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center bg-white transition duration-200 [container-type:size]',
                     selectedSignerStyles.default.base,
                     {
                       '-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,
@@ -439,7 +442,9 @@ export const AddTemplateFieldsFormPartial = ({
                     width: fieldBounds.current.width,
                   }}
                 >
-                  {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[selectedField])}
+                  <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">
+                    {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[selectedField])}
+                  </span>
                 </div>
               )}
 
@@ -452,8 +457,10 @@ export const AddTemplateFieldsFormPartial = ({
                     recipientIndex={recipientIndex === -1 ? 0 : recipientIndex}
                     field={field}
                     disabled={selectedSigner?.email !== field.signerEmail}
-                    minHeight={fieldBounds.current.height}
-                    minWidth={fieldBounds.current.width}
+                    minHeight={MIN_HEIGHT_PX}
+                    minWidth={MIN_WIDTH_PX}
+                    defaultHeight={DEFAULT_HEIGHT_PX}
+                    defaultWidth={DEFAULT_WIDTH_PX}
                     passive={isFieldWithinBounds && !!selectedField}
                     onResize={(options) => onFieldResize(options, index)}
                     onMove={(options) => onFieldMove(options, index)}