feat: migrate nextjs to rr7

packages/ui/primitives/document-flow/field-items-advanced-settings/text-field.tsx

@@ -1,10 +1,18 @@
-import { Trans, msg } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 
 import { validateTextField } from '@documenso/lib/advanced-fields-validation/validate-text';
 import { type TTextFieldMeta as TextFieldMeta } from '@documenso/lib/types/field-meta';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
 import { Switch } from '@documenso/ui/primitives/switch';
 import { Textarea } from '@documenso/ui/primitives/textarea';
 
@@ -22,7 +30,7 @@ export const TextFieldAdvancedSettings = ({
   const { _ } = useLingui();
 
   const handleInput = (field: keyof TextFieldMeta, value: string | boolean) => {
-    const text = field === 'text' ? String(value) : fieldState.text ?? '';
+    const text = field === 'text' ? String(value) : (fieldState.text ?? '');
     const limit =
       field === 'characterLimit' ? Number(value) : Number(fieldState.characterLimit ?? 0);
     const fontSize = field === 'fontSize' ? Number(value) : Number(fieldState.fontSize ?? 14);
@@ -112,6 +120,33 @@ export const TextFieldAdvancedSettings = ({
         />
       </div>
 
+      <div>
+        <Label>
+          <Trans>Text Align</Trans>
+        </Label>
+
+        <Select
+          value={fieldState.textAlign}
+          onValueChange={(value) => {
+            if (!value) {
+              return;
+            }
+
+            handleInput('textAlign', value);
+          }}
+        >
+          <SelectTrigger className="bg-background mt-2">
+            <SelectValue placeholder="Select text align" />
+          </SelectTrigger>
+
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="center">Center</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
       <div className="mt-4 flex flex-col gap-4">
         <div className="flex flex-row items-center gap-2">
           <Switch