From 1a34f9fa7a728e71e3fa685550568ab1efca88f7 Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Thu, 7 Dec 2023 15:08:00 +1100
Subject: [PATCH] fix: import updates and api route body sizes

---
 apps/marketing/src/app/(marketing)/layout.tsx |   4 +-
 .../app/(marketing)/singleplayer/client.tsx   |  35 ++-
 apps/marketing/src/pages/api/trpc/[trpc].ts   |   5 +
 .../documents/[id]/edit-document.tsx          |   1 +
 apps/web/src/pages/api/trpc/[trpc].ts         |   5 +
 .../document/document-download-button.tsx     |   5 +-
 .../document/document-share-button.tsx        |   9 +-
 .../ui/components/field/field-tooltip.tsx     |  11 +-
 packages/ui/components/field/field.tsx        |   7 +-
 packages/ui/components/signing-card.tsx       |  10 +-
 packages/ui/primitives/combobox.tsx           |  15 +-
 packages/ui/primitives/document-dropzone.tsx  |   8 +-
 .../primitives/document-flow/add-fields.tsx   |  18 +-
 .../document-flow/add-signature.tsx           | 258 +++++++++---------
 .../primitives/document-flow/add-signers.tsx  |  10 +-
 .../primitives/document-flow/add-subject.tsx  |   8 +-
 .../ui/primitives/document-flow/add-title.tsx |   6 +-
 .../document-flow/document-flow-root.tsx      |   4 +-
 .../primitives/document-flow/field-item.tsx   |   7 +-
 .../send-document-action-dialog.tsx           |   5 +-
 .../single-player-mode-fields.tsx             |   8 +-
 .../ui/primitives/form/form-error-message.tsx |   2 +-
 packages/ui/primitives/form/form.tsx          |  15 +-
 packages/ui/primitives/pdf-viewer.tsx         |   6 +-
 .../signature-pad/signature-pad.tsx           |  18 +-
 25 files changed, 243 insertions(+), 237 deletions(-)

diff --git a/apps/marketing/src/app/(marketing)/layout.tsx b/apps/marketing/src/app/(marketing)/layout.tsx
index 365d8a5d1..248414b33 100644
--- a/apps/marketing/src/app/(marketing)/layout.tsx
+++ b/apps/marketing/src/app/(marketing)/layout.tsx
@@ -29,7 +29,7 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
 
   return (
     <div
-      className={cn('relative max-w-[100vw] pt-20 md:pt-28', {
+      className={cn('relative flex min-h-[100vh] max-w-[100vw] flex-col pt-20 md:pt-28', {
         'overflow-y-auto overflow-x-hidden': pathname !== '/singleplayer',
       })}
     >
@@ -41,7 +41,7 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
         <Header className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
       </div>
 
-      <div className="relative mx-auto max-w-screen-xl px-4 lg:px-8">{children}</div>
+      <div className="relative mx-auto max-w-screen-xl flex-1 px-4 lg:px-8">{children}</div>
 
       <Footer className="bg-background border-muted mt-24 border-t" />
     </div>
diff --git a/apps/marketing/src/app/(marketing)/singleplayer/client.tsx b/apps/marketing/src/app/(marketing)/singleplayer/client.tsx
index 1dcb2d76b..b7654c7cf 100644
--- a/apps/marketing/src/app/(marketing)/singleplayer/client.tsx
+++ b/apps/marketing/src/app/(marketing)/singleplayer/client.tsx
@@ -17,15 +17,14 @@ import { AddFieldsFormPartial } from '@documenso/ui/primitives/document-flow/add
 import type { TAddFieldsFormSchema } from '@documenso/ui/primitives/document-flow/add-fields.types';
 import { AddSignatureFormPartial } from '@documenso/ui/primitives/document-flow/add-signature';
 import type { TAddSignatureFormSchema } from '@documenso/ui/primitives/document-flow/add-signature.types';
-import {
-  DocumentFlowFormContainer,
-  DocumentFlowFormContainerHeader,
-} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-type SinglePlayerModeStep = 'fields' | 'sign';
+const SinglePlayerModeSteps = ['fields', 'sign'] as const;
+type SinglePlayerModeStep = (typeof SinglePlayerModeSteps)[number];
 
 // !: This entire file is a hack to get around failed prerendering of
 // !: the Single Player Mode page. This regression was introduced during
@@ -226,37 +225,35 @@ export const SinglePlayerClient = () => {
         </div>
 
         <div className="col-span-12 lg:col-span-6 xl:col-span-5">
-          <DocumentFlowFormContainer className="top-24" onSubmit={(e) => e.preventDefault()}>
-            <DocumentFlowFormContainerHeader
-              title={currentDocumentFlow.title}
-              description={currentDocumentFlow.description}
-            />
-
-            {/* Add fields to PDF page. */}
-            {step === 'fields' && (
+          <DocumentFlowFormContainer
+            className="top-24 lg:h-[calc(100vh-7rem)]"
+            onSubmit={(e) => e.preventDefault()}
+          >
+            <Stepper
+              currentStep={currentDocumentFlow.stepIndex}
+              setCurrentStep={(step) => setStep(SinglePlayerModeSteps[step - 1])}
+            >
+              {/* Add fields to PDF page. */}
               <fieldset disabled={!uploadedFile} className="flex h-full flex-col">
                 <AddFieldsFormPartial
                   documentFlow={documentFlow.fields}
                   hideRecipients={true}
                   recipients={uploadedFile ? [placeholderRecipient] : []}
-                  numberOfSteps={Object.keys(documentFlow).length}
                   fields={fields}
                   onSubmit={onFieldsSubmit}
                 />
               </fieldset>
-            )}
 
-            {/* Enter user details and signature. */}
-            {step === 'sign' && (
+              {/* Enter user details and signature. */}
+
               <AddSignatureFormPartial
                 documentFlow={documentFlow.sign}
-                numberOfSteps={Object.keys(documentFlow).length}
                 fields={fields}
                 onSubmit={onSignSubmit}
                 requireName={Boolean(fields.find((field) => field.type === 'NAME'))}
                 requireSignature={Boolean(fields.find((field) => field.type === 'SIGNATURE'))}
               />
-            )}
+            </Stepper>
           </DocumentFlowFormContainer>
         </div>
       </div>
diff --git a/apps/marketing/src/pages/api/trpc/[trpc].ts b/apps/marketing/src/pages/api/trpc/[trpc].ts
index 0bc991a98..c43291ea1 100644
--- a/apps/marketing/src/pages/api/trpc/[trpc].ts
+++ b/apps/marketing/src/pages/api/trpc/[trpc].ts
@@ -4,6 +4,11 @@ import { appRouter } from '@documenso/trpc/server/router';
 
 export const config = {
   maxDuration: 60,
+  api: {
+    bodyParser: {
+      sizeLimit: '50mb',
+    },
+  },
 };
 
 export default trpcNext.createNextApiHandler({
diff --git a/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx b/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
index 53da2d353..ffce3bd6c 100644
--- a/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
@@ -204,6 +204,7 @@ export const EditDocumentForm = ({
               document={document}
               onSubmit={onAddTitleFormSubmit}
             />
+
             <AddSignersFormPartial
               key={recipients.length}
               documentFlow={documentFlow.signers}
diff --git a/apps/web/src/pages/api/trpc/[trpc].ts b/apps/web/src/pages/api/trpc/[trpc].ts
index 0bc991a98..c43291ea1 100644
--- a/apps/web/src/pages/api/trpc/[trpc].ts
+++ b/apps/web/src/pages/api/trpc/[trpc].ts
@@ -4,6 +4,11 @@ import { appRouter } from '@documenso/trpc/server/router';
 
 export const config = {
   maxDuration: 60,
+  api: {
+    bodyParser: {
+      sizeLimit: '50mb',
+    },
+  },
 };
 
 export default trpcNext.createNextApiHandler({
diff --git a/packages/ui/components/document/document-download-button.tsx b/packages/ui/components/document/document-download-button.tsx
index e16d236f0..a2a35e490 100644
--- a/packages/ui/components/document/document-download-button.tsx
+++ b/packages/ui/components/document/document-download-button.tsx
@@ -7,8 +7,9 @@ import { Download } from 'lucide-react';
 
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import type { DocumentData } from '@documenso/prisma/client';
-import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { Button } from '../../primitives/button';
+import { useToast } from '../../primitives/use-toast';
 
 export type DownloadButtonProps = HTMLAttributes<HTMLButtonElement> & {
   disabled?: boolean;
diff --git a/packages/ui/components/document/document-share-button.tsx b/packages/ui/components/document/document-share-button.tsx
index 5b6e9006a..b366123fb 100644
--- a/packages/ui/components/document/document-share-button.tsx
+++ b/packages/ui/components/document/document-share-button.tsx
@@ -13,8 +13,9 @@ import {
 } from '@documenso/lib/constants/toast';
 import { generateTwitterIntent } from '@documenso/lib/universal/generate-twitter-intent';
 import { trpc } from '@documenso/trpc/react';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
+
+import { cn } from '../../lib/utils';
+import { Button } from '../../primitives/button';
 import {
   Dialog,
   DialogContent,
@@ -22,8 +23,8 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@documenso/ui/primitives/dialog';
-import { useToast } from '@documenso/ui/primitives/use-toast';
+} from '../../primitives/dialog';
+import { useToast } from '../../primitives/use-toast';
 
 export type DocumentShareButtonProps = HTMLAttributes<HTMLButtonElement> & {
   token?: string;
diff --git a/packages/ui/components/field/field-tooltip.tsx b/packages/ui/components/field/field-tooltip.tsx
index 446b14d2d..3966e9c0c 100644
--- a/packages/ui/components/field/field-tooltip.tsx
+++ b/packages/ui/components/field/field-tooltip.tsx
@@ -1,17 +1,18 @@
 import { TooltipArrow } from '@radix-ui/react-tooltip';
-import { VariantProps, cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
 import { createPortal } from 'react-dom';
 
 import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
-import { cn } from '@documenso/ui/lib/utils';
+
+import { cn } from '../..//lib/utils';
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@documenso/ui/primitives/tooltip';
-
-import { Field } from '.prisma/client';
+} from '../..//primitives/tooltip';
+import type { Field } from '.prisma/client';
 
 const tooltipVariants = cva('font-semibold', {
   variants: {
diff --git a/packages/ui/components/field/field.tsx b/packages/ui/components/field/field.tsx
index 054cc6376..e40b2e3d9 100644
--- a/packages/ui/components/field/field.tsx
+++ b/packages/ui/components/field/field.tsx
@@ -5,9 +5,10 @@ import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
-import { Field } from '@documenso/prisma/client';
-import { cn } from '@documenso/ui/lib/utils';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
+import type { Field } from '@documenso/prisma/client';
+
+import { cn } from '../../lib/utils';
+import { Card, CardContent } from '../../primitives/card';
 
 export type FieldRootContainerProps = {
   field: Field;
diff --git a/packages/ui/components/signing-card.tsx b/packages/ui/components/signing-card.tsx
index ab057c4e5..cda0c31c3 100644
--- a/packages/ui/components/signing-card.tsx
+++ b/packages/ui/components/signing-card.tsx
@@ -2,14 +2,16 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-import Image, { StaticImageData } from 'next/image';
+import type { StaticImageData } from 'next/image';
+import Image from 'next/image';
 
 import { animate, motion, useMotionTemplate, useMotionValue, useTransform } from 'framer-motion';
 import { P, match } from 'ts-pattern';
 
-import { Signature } from '@documenso/prisma/client';
-import { cn } from '@documenso/ui/lib/utils';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
+import type { Signature } from '@documenso/prisma/client';
+
+import { cn } from '../lib/utils';
+import { Card, CardContent } from '../primitives/card';
 
 export type SigningCardProps = {
   className?: string;
diff --git a/packages/ui/primitives/combobox.tsx b/packages/ui/primitives/combobox.tsx
index 899ccd61d..85f86056d 100644
--- a/packages/ui/primitives/combobox.tsx
+++ b/packages/ui/primitives/combobox.tsx
@@ -3,16 +3,11 @@ import * as React from 'react';
 import { Check, ChevronsUpDown } from 'lucide-react';
 
 import { Role } from '@documenso/prisma/client';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-} from '@documenso/ui/primitives/command';
-import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+
+import { cn } from '../lib/utils';
+import { Button } from './button';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from './command';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
 
 type ComboboxProps = {
   listValues: string[];
diff --git a/packages/ui/primitives/document-dropzone.tsx b/packages/ui/primitives/document-dropzone.tsx
index 6987e9872..d81a3a7de 100644
--- a/packages/ui/primitives/document-dropzone.tsx
+++ b/packages/ui/primitives/document-dropzone.tsx
@@ -1,12 +1,14 @@
 'use client';
 
-import { Variants, motion } from 'framer-motion';
+import type { Variants } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { Plus } from 'lucide-react';
 import { useDropzone } from 'react-dropzone';
 
 import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
-import { cn } from '@documenso/ui/lib/utils';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+import { cn } from '../lib/utils';
+import { Card, CardContent } from './card';
 
 const DocumentDropzoneContainerVariants: Variants = {
   initial: {
diff --git a/packages/ui/primitives/document-flow/add-fields.tsx b/packages/ui/primitives/document-flow/add-fields.tsx
index 112f2f849..a8ae9f0e3 100644
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@@ -13,20 +13,14 @@ import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { nanoid } from '@documenso/lib/universal/id';
 import type { Field, Recipient } from '@documenso/prisma/client';
 import { FieldType, SendStatus } from '@documenso/prisma/client';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-} from '@documenso/ui/primitives/command';
-import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
+import { cn } from '../../lib/utils';
+import { Button } from '../button';
+import { Card, CardContent } from '../card';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../command';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { useStep } from '../stepper';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
 import type { TAddFieldsFormSchema } from './add-fields.types';
 import {
   DocumentFlowFormContainerActions,
diff --git a/packages/ui/primitives/document-flow/add-signature.tsx b/packages/ui/primitives/document-flow/add-signature.tsx
index aed252083..e4e5d9253 100644
--- a/packages/ui/primitives/document-flow/add-signature.tsx
+++ b/packages/ui/primitives/document-flow/add-signature.tsx
@@ -9,35 +9,38 @@ import { match } from 'ts-pattern';
 
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
-import { Field, FieldType } from '@documenso/prisma/client';
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
-import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
-import { cn } from '@documenso/ui/lib/utils';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { TAddSignatureFormSchema } from '@documenso/ui/primitives/document-flow/add-signature.types';
+import type { Field } from '@documenso/prisma/client';
+import { FieldType } from '@documenso/prisma/client';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+
+import { FieldToolTip } from '../../components/field/field-tooltip';
+import { cn } from '../../lib/utils';
+import { Card, CardContent } from '../card';
+import { ElementVisible } from '../element-visible';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../form/form';
+import { Input } from '../input';
+import { SignaturePad } from '../signature-pad';
+import { useStep } from '../stepper';
+import type { TAddSignatureFormSchema } from './add-signature.types';
+import { ZAddSignatureFormSchema } from './add-signature.types';
 import {
   DocumentFlowFormContainerActions,
   DocumentFlowFormContainerContent,
   DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerHeader,
   DocumentFlowFormContainerStep,
-} from '@documenso/ui/primitives/document-flow/document-flow-root';
-import { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
-import { ElementVisible } from '@documenso/ui/primitives/element-visible';
-import { Input } from '@documenso/ui/primitives/input';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
-
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../form/form';
-import { ZAddSignatureFormSchema } from './add-signature.types';
+} from './document-flow-root';
 import {
   SinglePlayerModeCustomTextField,
   SinglePlayerModeSignatureField,
 } from './single-player-mode-fields';
+import type { DocumentFlowStep } from './types';
 
 export type AddSignatureFormProps = {
   defaultValues?: TAddSignatureFormSchema;
   documentFlow: DocumentFlowStep;
   fields: FieldWithSignature[];
-  numberOfSteps: number;
+
   onSubmit: (_data: TAddSignatureFormSchema) => Promise<void> | void;
   requireName?: boolean;
   requireSignature?: boolean;
@@ -47,11 +50,13 @@ export const AddSignatureFormPartial = ({
   defaultValues,
   documentFlow,
   fields,
-  numberOfSteps,
+
   onSubmit,
   requireName = false,
   requireSignature = true,
 }: AddSignatureFormProps) => {
+  const { currentStep, totalSteps } = useStep();
+
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
 
   // Refined schema which takes into account whether to allow an empty name or signature.
@@ -206,46 +211,30 @@ export const AddSignatureFormPartial = ({
   };
 
   return (
-    <Form {...form}>
-      <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
-        <DocumentFlowFormContainerContent>
-          <div className="space-y-4">
-            <FormField
-              control={form.control}
-              name="email"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel required>Email</FormLabel>
-                  <FormControl>
-                    <Input
-                      className="bg-background"
-                      type="email"
-                      autoComplete="email"
-                      {...field}
-                      onChange={(value) => {
-                        onFormValueChange(FieldType.EMAIL);
-                        field.onChange(value);
-                      }}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+    <>
+      <DocumentFlowFormContainerHeader
+        title={documentFlow.title}
+        description={documentFlow.description}
+      />
 
-            {requireName && (
+      <Form {...form}>
+        <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+          <DocumentFlowFormContainerContent>
+            <div className="space-y-4">
               <FormField
                 control={form.control}
-                name="name"
+                name="email"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel required={requireName}>Name</FormLabel>
+                    <FormLabel required>Email</FormLabel>
                     <FormControl>
                       <Input
                         className="bg-background"
+                        type="email"
+                        autoComplete="email"
                         {...field}
                         onChange={(value) => {
-                          onFormValueChange(FieldType.NAME);
+                          onFormValueChange(FieldType.EMAIL);
                           field.onChange(value);
                         }}
                       />
@@ -254,91 +243,114 @@ export const AddSignatureFormPartial = ({
                   </FormItem>
                 )}
               />
-            )}
 
-            {requireSignature && (
-              <FormField
-                control={form.control}
-                name="signature"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel required={requireSignature}>Signature</FormLabel>
-                    <FormControl>
-                      <Card
-                        className={cn('mt-2', {
-                          'rounded-sm ring-2 ring-red-500 ring-offset-2 transition-all':
-                            form.formState.errors.signature,
-                        })}
-                        gradient={!form.formState.errors.signature}
-                        degrees={-120}
-                      >
-                        <CardContent className="p-0">
-                          <SignaturePad
-                            className="h-44 w-full"
-                            defaultValue={field.value}
-                            onBlur={field.onBlur}
-                            onChange={(value) => {
-                              onFormValueChange(FieldType.SIGNATURE);
-                              field.onChange(value);
-                            }}
-                          />
-                        </CardContent>
-                      </Card>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            )}
-          </div>
-        </DocumentFlowFormContainerContent>
+              {requireName && (
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel required={requireName}>Name</FormLabel>
+                      <FormControl>
+                        <Input
+                          className="bg-background"
+                          {...field}
+                          onChange={(value) => {
+                            onFormValueChange(FieldType.NAME);
+                            field.onChange(value);
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
 
-        <DocumentFlowFormContainerFooter>
-          <DocumentFlowFormContainerStep
-            title={documentFlow.title}
-            step={documentFlow.stepIndex}
-            maxStep={numberOfSteps}
-          />
+              {requireSignature && (
+                <FormField
+                  control={form.control}
+                  name="signature"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel required={requireSignature}>Signature</FormLabel>
+                      <FormControl>
+                        <Card
+                          className={cn('mt-2', {
+                            'rounded-sm ring-2 ring-red-500 ring-offset-2 transition-all':
+                              form.formState.errors.signature,
+                          })}
+                          gradient={!form.formState.errors.signature}
+                          degrees={-120}
+                        >
+                          <CardContent className="p-0">
+                            <SignaturePad
+                              className="h-44 w-full"
+                              defaultValue={field.value}
+                              onBlur={field.onBlur}
+                              onChange={(value) => {
+                                onFormValueChange(FieldType.SIGNATURE);
+                                field.onChange(value);
+                              }}
+                            />
+                          </CardContent>
+                        </Card>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+            </div>
+          </DocumentFlowFormContainerContent>
 
-          <DocumentFlowFormContainerActions
-            loading={form.formState.isSubmitting}
-            disabled={form.formState.isSubmitting}
-            onGoBackClick={documentFlow.onBackStep}
-            onGoNextClick={form.handleSubmit(onValidateFields)}
-          />
-        </DocumentFlowFormContainerFooter>
-      </fieldset>
+          <DocumentFlowFormContainerFooter>
+            <DocumentFlowFormContainerStep
+              title={documentFlow.title}
+              step={currentStep}
+              maxStep={totalSteps}
+            />
 
-      {validateUninsertedFields && uninsertedFields[0] && (
-        <FieldToolTip key={uninsertedFields[0].id} field={uninsertedFields[0]} color="warning">
-          Click to insert field
-        </FieldToolTip>
-      )}
+            <DocumentFlowFormContainerActions
+              loading={form.formState.isSubmitting}
+              disabled={form.formState.isSubmitting}
+              onGoBackClick={documentFlow.onBackStep}
+              onGoNextClick={form.handleSubmit(onValidateFields)}
+            />
+          </DocumentFlowFormContainerFooter>
+        </fieldset>
 
-      <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
-        {localFields.map((field) =>
-          match(field.type)
-            .with(FieldType.DATE, FieldType.EMAIL, FieldType.NAME, () => {
-              return (
-                <SinglePlayerModeCustomTextField
+        {validateUninsertedFields && uninsertedFields[0] && (
+          <FieldToolTip key={uninsertedFields[0].id} field={uninsertedFields[0]} color="warning">
+            Click to insert field
+          </FieldToolTip>
+        )}
+
+        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+          {localFields.map((field) =>
+            match(field.type)
+              .with(FieldType.DATE, FieldType.EMAIL, FieldType.NAME, () => {
+                return (
+                  <SinglePlayerModeCustomTextField
+                    onClick={insertField(field)}
+                    key={field.id}
+                    field={field}
+                  />
+                );
+              })
+              .with(FieldType.SIGNATURE, () => (
+                <SinglePlayerModeSignatureField
                   onClick={insertField(field)}
                   key={field.id}
                   field={field}
                 />
-              );
-            })
-            .with(FieldType.SIGNATURE, () => (
-              <SinglePlayerModeSignatureField
-                onClick={insertField(field)}
-                key={field.id}
-                field={field}
-              />
-            ))
-            .otherwise(() => {
-              return null;
-            }),
-        )}
-      </ElementVisible>
-    </Form>
+              ))
+              .otherwise(() => {
+                return null;
+              }),
+          )}
+        </ElementVisible>
+      </Form>
+    </>
   );
 };
diff --git a/packages/ui/primitives/document-flow/add-signers.tsx b/packages/ui/primitives/document-flow/add-signers.tsx
index 13af03d26..71be1c069 100644
--- a/packages/ui/primitives/document-flow/add-signers.tsx
+++ b/packages/ui/primitives/document-flow/add-signers.tsx
@@ -12,13 +12,13 @@ import { nanoid } from '@documenso/lib/universal/id';
 import type { Field, Recipient } from '@documenso/prisma/client';
 import { DocumentStatus, SendStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
-import { Button } from '@documenso/ui/primitives/button';
-import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
-import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
-import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { Button } from '../button';
+import { FormErrorMessage } from '../form/form-error-message';
+import { Input } from '../input';
+import { Label } from '../label';
 import { useStep } from '../stepper';
+import { useToast } from '../use-toast';
 import type { TAddSignersFormSchema } from './add-signers.types';
 import { ZAddSignersFormSchema } from './add-signers.types';
 import {
diff --git a/packages/ui/primitives/document-flow/add-subject.tsx b/packages/ui/primitives/document-flow/add-subject.tsx
index e9e761af0..881d59c74 100644
--- a/packages/ui/primitives/document-flow/add-subject.tsx
+++ b/packages/ui/primitives/document-flow/add-subject.tsx
@@ -5,12 +5,12 @@ import { useForm } from 'react-hook-form';
 import type { Field, Recipient } from '@documenso/prisma/client';
 import { DocumentStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
-import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
-import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
-import { Textarea } from '@documenso/ui/primitives/textarea';
 
+import { FormErrorMessage } from '../form/form-error-message';
+import { Input } from '../input';
+import { Label } from '../label';
 import { useStep } from '../stepper';
+import { Textarea } from '../textarea';
 import type { TAddSubjectFormSchema } from './add-subject.types';
 import {
   DocumentFlowFormContainerActions,
diff --git a/packages/ui/primitives/document-flow/add-title.tsx b/packages/ui/primitives/document-flow/add-title.tsx
index 2b91e1033..8c2a9dc7a 100644
--- a/packages/ui/primitives/document-flow/add-title.tsx
+++ b/packages/ui/primitives/document-flow/add-title.tsx
@@ -4,10 +4,10 @@ import { useForm } from 'react-hook-form';
 
 import type { Field, Recipient } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
-import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
-import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
 
+import { FormErrorMessage } from '../form/form-error-message';
+import { Input } from '../input';
+import { Label } from '../label';
 import { useStep } from '../stepper';
 import type { TAddTitleFormSchema } from './add-title.types';
 import {
diff --git a/packages/ui/primitives/document-flow/document-flow-root.tsx b/packages/ui/primitives/document-flow/document-flow-root.tsx
index 9142f4258..42b70c58a 100644
--- a/packages/ui/primitives/document-flow/document-flow-root.tsx
+++ b/packages/ui/primitives/document-flow/document-flow-root.tsx
@@ -5,8 +5,8 @@ import React from 'react';
 
 import { motion } from 'framer-motion';
 
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
+import { cn } from '../../lib/utils';
+import { Button } from '../button';
 
 export type DocumentFlowFormContainerProps = HTMLAttributes<HTMLFormElement> & {
   children?: React.ReactNode;
diff --git a/packages/ui/primitives/document-flow/field-item.tsx b/packages/ui/primitives/document-flow/field-item.tsx
index 48e52b9a7..7583bd4b9 100644
--- a/packages/ui/primitives/document-flow/field-item.tsx
+++ b/packages/ui/primitives/document-flow/field-item.tsx
@@ -7,10 +7,11 @@ import { createPortal } from 'react-dom';
 import { Rnd } from 'react-rnd';
 
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
-import { cn } from '@documenso/ui/lib/utils';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
 
-import { FRIENDLY_FIELD_TYPE, TDocumentFlowFormSchema } from './types';
+import { cn } from '../../lib/utils';
+import { Card, CardContent } from '../card';
+import type { TDocumentFlowFormSchema } from './types';
+import { FRIENDLY_FIELD_TYPE } from './types';
 
 type Field = TDocumentFlowFormSchema['fields'][0];
 
diff --git a/packages/ui/primitives/document-flow/send-document-action-dialog.tsx b/packages/ui/primitives/document-flow/send-document-action-dialog.tsx
index f295dadfc..a70282800 100644
--- a/packages/ui/primitives/document-flow/send-document-action-dialog.tsx
+++ b/packages/ui/primitives/document-flow/send-document-action-dialog.tsx
@@ -2,7 +2,8 @@ import { useState } from 'react';
 
 import { Loader } from 'lucide-react';
 
-import { Button, ButtonProps } from '@documenso/ui/primitives/button';
+import type { ButtonProps } from '../button';
+import { Button } from '../button';
 import {
   Dialog,
   DialogContent,
@@ -11,7 +12,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@documenso/ui/primitives/dialog';
+} from '../dialog';
 
 export type SendDocumentActionDialogProps = ButtonProps & {
   loading?: boolean;
diff --git a/packages/ui/primitives/document-flow/single-player-mode-fields.tsx b/packages/ui/primitives/document-flow/single-player-mode-fields.tsx
index 04c093efc..7cecd7131 100644
--- a/packages/ui/primitives/document-flow/single-player-mode-fields.tsx
+++ b/packages/ui/primitives/document-flow/single-player-mode-fields.tsx
@@ -13,9 +13,11 @@ import {
   MIN_HANDWRITING_FONT_SIZE,
   MIN_STANDARD_FONT_SIZE,
 } from '@documenso/lib/constants/pdf';
-import { Field, FieldType } from '@documenso/prisma/client';
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
-import { FieldRootContainer } from '@documenso/ui/components/field/field';
+import type { Field } from '@documenso/prisma/client';
+import { FieldType } from '@documenso/prisma/client';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+
+import { FieldRootContainer } from '../../components/field/field';
 
 export type SinglePlayerModeFieldContainerProps = {
   field: FieldWithSignature;
diff --git a/packages/ui/primitives/form/form-error-message.tsx b/packages/ui/primitives/form/form-error-message.tsx
index bb555b7f7..e429799da 100644
--- a/packages/ui/primitives/form/form-error-message.tsx
+++ b/packages/ui/primitives/form/form-error-message.tsx
@@ -1,6 +1,6 @@
 import { AnimatePresence, motion } from 'framer-motion';
 
-import { cn } from '@documenso/ui/lib/utils';
+import { cn } from '../../lib/utils';
 
 export type FormErrorMessageProps = {
   className?: string;
diff --git a/packages/ui/primitives/form/form.tsx b/packages/ui/primitives/form/form.tsx
index 9467de3af..f500accae 100644
--- a/packages/ui/primitives/form/form.tsx
+++ b/packages/ui/primitives/form/form.tsx
@@ -1,19 +1,12 @@
 import * as React from 'react';
 
-import * as LabelPrimitive from '@radix-ui/react-label';
+import type * as LabelPrimitive from '@radix-ui/react-label';
 import { Slot } from '@radix-ui/react-slot';
 import { AnimatePresence, motion } from 'framer-motion';
-import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext,
-} from 'react-hook-form';
-
-import { cn } from '@documenso/ui/lib/utils';
+import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+import { Controller, FormProvider, useFormContext } from 'react-hook-form';
 
+import { cn } from '../../lib/utils';
 import { Label } from '../label';
 
 const Form = FormProvider;
diff --git a/packages/ui/primitives/pdf-viewer.tsx b/packages/ui/primitives/pdf-viewer.tsx
index 62b08d2f9..07cdaf1e2 100644
--- a/packages/ui/primitives/pdf-viewer.tsx
+++ b/packages/ui/primitives/pdf-viewer.tsx
@@ -3,16 +3,16 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import { Loader } from 'lucide-react';
-import { PDFDocumentProxy } from 'pdfjs-dist';
+import type { PDFDocumentProxy } from 'pdfjs-dist';
 import { Document as PDFDocument, Page as PDFPage, pdfjs } from 'react-pdf';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
 
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
-import { DocumentData } from '@documenso/prisma/client';
-import { cn } from '@documenso/ui/lib/utils';
+import type { DocumentData } from '@documenso/prisma/client';
 
+import { cn } from '../lib/utils';
 import { useToast } from './use-toast';
 
 export type LoadedPDFDocument = PDFDocumentProxy;
diff --git a/packages/ui/primitives/signature-pad/signature-pad.tsx b/packages/ui/primitives/signature-pad/signature-pad.tsx
index 107627240..3497418d7 100644
--- a/packages/ui/primitives/signature-pad/signature-pad.tsx
+++ b/packages/ui/primitives/signature-pad/signature-pad.tsx
@@ -1,20 +1,12 @@
 'use client';
 
-import {
-  HTMLAttributes,
-  MouseEvent,
-  PointerEvent,
-  TouchEvent,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import type { HTMLAttributes, MouseEvent, PointerEvent, TouchEvent } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
-import { StrokeOptions, getStroke } from 'perfect-freehand';
-
-import { cn } from '@documenso/ui/lib/utils';
+import type { StrokeOptions } from 'perfect-freehand';
+import { getStroke } from 'perfect-freehand';
 
+import { cn } from '../../lib/utils';
 import { getSvgPathFromStroke } from './helper';
 import { Point } from './point';