From b4ecf4b2a99b36b13c40dd8cde21fa50f2456f55 Mon Sep 17 00:00:00 2001
From: Jim Moffet <jimmoffet@gmail.com>
Date: Tue, 27 Feb 2024 13:38:00 -0800
Subject: [PATCH] Add mock extracted PDF data

* mock api

* remove comments

* comments

* Trying to get the PDF import to work

* Add paragraph pattern

* Stub fieldset element type

* Wire mock PDF data to typesafe objects

---------

Co-authored-by: Daniel Naab <dan@crushingpennies.com>
---
 packages/design/src/Form/index.tsx            |    8 +-
 .../FormManager/FormEdit/FormElementEdit.tsx  |    2 +-
 .../src/FormManager/FormEdit/Preview.tsx      |   16 +-
 .../design/src/FormManager/FormEdit/index.tsx |    8 +-
 .../src/config/edit/InputElementEdit.tsx      |   84 +-
 .../src/config/edit/ParagraphElementEdit.tsx  |   38 +
 packages/design/src/config/edit/index.ts      |    2 +-
 .../design/src/config/view/Fieldset/index.tsx |   17 +
 .../src/config/view/FormSummary/index.tsx     |    6 +-
 .../src/config/view/Paragraph/index.tsx       |   17 +
 .../view/SubmissionConfirmation/index.tsx     |    4 +-
 .../view/TextInput/TestInput.stories.tsx      |    4 +-
 .../src/config/view/TextInput/index.tsx       |   30 +-
 .../src/config/view/additional-fields.tsx     |    3 +
 packages/design/src/config/view/index.tsx     |    4 +-
 packages/design/vite.config.ts                |    1 +
 packages/documents/package.json               |    3 +-
 .../documents/src/__tests__/fill-pdf.test.ts  |    1 +
 packages/documents/src/document.ts            |   84 +-
 .../documents/src/pdf/al_name_change.json     | 1157 +++++++++++++++++
 packages/documents/src/pdf/extract.ts         |    9 +
 packages/documents/src/pdf/generate.ts        |    5 +
 packages/documents/src/pdf/index.ts           |    9 +-
 packages/documents/src/pdf/mock-api.ts        |  190 +++
 packages/documents/src/suggestions.ts         |   77 +-
 packages/forms/src/config/config.ts           |    2 +
 .../forms/src/config/elements/fieldset.ts     |   37 +
 packages/forms/src/config/elements/input.ts   |    2 +
 .../forms/src/config/elements/paragraph.ts    |   35 +
 packages/forms/src/documents/index.ts         |   21 +
 packages/forms/src/pattern.ts                 |   13 +
 pnpm-lock.yaml                                |   32 +-
 tsconfig.json                                 |   12 +-
 33 files changed, 1811 insertions(+), 122 deletions(-)
 create mode 100644 packages/design/src/config/edit/ParagraphElementEdit.tsx
 create mode 100644 packages/design/src/config/view/Fieldset/index.tsx
 create mode 100644 packages/design/src/config/view/Paragraph/index.tsx
 create mode 100644 packages/documents/src/pdf/al_name_change.json
 create mode 100644 packages/documents/src/pdf/mock-api.ts
 create mode 100644 packages/forms/src/config/elements/fieldset.ts
 create mode 100644 packages/forms/src/config/elements/paragraph.ts

diff --git a/packages/design/src/Form/index.tsx b/packages/design/src/Form/index.tsx
index c44d590c4..decb8d7ee 100644
--- a/packages/design/src/Form/index.tsx
+++ b/packages/design/src/Form/index.tsx
@@ -25,7 +25,7 @@ export type ComponentForPattern<T extends Pattern = Pattern<unknown>> = Record<
 
 export type FormElementComponent<T extends Pattern = Pattern<unknown>> =
   React.ComponentType<{
-    prompt: T;
+    pattern: T;
   }>;
 
 const usePrompt = (
@@ -103,12 +103,8 @@ export default function Form({
         <fieldset className="usa-fieldset">
           {prompt.parts
             .map((pattern, index) => {
-              if (pattern.type === 'text') {
-                console.log('skipping', pattern.type);
-                return null;
-              }
               const Component = context.components[pattern.type];
-              return <Component key={index} prompt={pattern} />;
+              return <Component key={index} pattern={pattern} />;
             })
             .filter(a => a)}
           {/* Add submit button or other controls as needed */}
diff --git a/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx b/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx
index a18d55538..7f0ad4740 100644
--- a/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx
@@ -37,7 +37,7 @@ export const FormElementEdit = ({
             formElement.id,
             formData
           );
-          //onChange(updatedForm);
+          onChange(updatedForm);
         })}
       >
         <input className="usa-button" type="submit" value="Save" />
diff --git a/packages/design/src/FormManager/FormEdit/Preview.tsx b/packages/design/src/FormManager/FormEdit/Preview.tsx
index 100bcba4a..39ec2e544 100644
--- a/packages/design/src/FormManager/FormEdit/Preview.tsx
+++ b/packages/design/src/FormManager/FormEdit/Preview.tsx
@@ -26,7 +26,6 @@ export const PreviewForm = ({ uiContext, form }: PreviewFormProps) => {
     // don't have to regenerate it every time we render the form.
     components: createPreviewComponents(uiContext.components),
   };
-  console.log('creating session');
   const disposable = createFormSession(form); // nullSession instead?
   return <Form context={previewUiContext} session={disposable}></Form>;
 };
@@ -56,24 +55,29 @@ export const PreviewContext = createContext<PreviewContextValue>(
 );
 
 const createPatternPreviewComponent = (Component: FormElementComponent) => {
-  return function PatternPreviewComponent({ prompt }: { prompt: Pattern }) {
+  const PatternPreviewComponent: FormElementComponent = ({
+    pattern,
+  }: {
+    pattern: Pattern;
+  }) => {
     const { selectedId, setSelectedId } = useContext(PreviewContext);
     return (
       <div
         onClick={() => {
-          setSelectedId(prompt._elementId);
+          setSelectedId(pattern._elementId);
         }}
         className={classNames({
-          'bg-primary-lighter': selectedId === prompt._elementId,
+          'bg-primary-lighter': selectedId === pattern._elementId,
         })}
         //onKeyDown={handleKeyDown}
         role="button"
-        aria-pressed={selectedId === prompt._elementId}
+        aria-pressed={selectedId === pattern._elementId}
         aria-label="Select this pattern"
         tabIndex={0}
       >
-        <Component prompt={prompt} />
+        <Component pattern={pattern} />
       </div>
     );
   };
+  return PatternPreviewComponent;
 };
diff --git a/packages/design/src/FormManager/FormEdit/index.tsx b/packages/design/src/FormManager/FormEdit/index.tsx
index f6bee9ceb..61372618b 100644
--- a/packages/design/src/FormManager/FormEdit/index.tsx
+++ b/packages/design/src/FormManager/FormEdit/index.tsx
@@ -1,12 +1,9 @@
 import React, { useState } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
 
 import { type FormService } from '@atj/form-service';
 import {
   type FormDefinition,
-  type FormElementMap,
   getRootFormElement,
-  updateElements,
   FormElementId,
   getFormElement,
 } from '@atj/forms';
@@ -78,8 +75,9 @@ const EditForm = ({
               context={context}
               initialForm={currentForm}
               formElement={formElement}
-              onChange={function (form: FormDefinition): void {
-                setCurrentForm(form);
+              onChange={(form: FormDefinition) => {
+                //setCurrentForm(form);
+                console.log('setting form onChange', form);
               }}
             />
           )}
diff --git a/packages/design/src/config/edit/InputElementEdit.tsx b/packages/design/src/config/edit/InputElementEdit.tsx
index db5ec764c..bf490d94f 100644
--- a/packages/design/src/config/edit/InputElementEdit.tsx
+++ b/packages/design/src/config/edit/InputElementEdit.tsx
@@ -10,52 +10,58 @@ const InputElementEdit: FormElementEditComponent<InputElement> = ({
 }) => {
   const { register } = useFormContext();
   return (
-    <div className="grid-row grid-gap">
-      <div className="grid-col grid-col-4">
-        <label className="usa-label">
-          Field label
-          <input
-            className="usa-input"
-            {...register(`${element.id}.data.text`)}
-            type="text"
-          ></input>
-        </label>
-      </div>
-      <div className="grid-col grid-col-2">
-        <label className="usa-label">
-          Default field value
-          <input
-            className="usa-input"
-            type="text"
-            {...register(`${element.id}.data.initial`)}
-          ></input>
-        </label>
-      </div>
-      <div className="grid-col grid-col-2">
-        <label className="usa-label">
-          Maximum length
-          <input
-            className="usa-input"
-            type="text"
-            {...register(`${element.id}.data.maxLength`)}
-          ></input>
-        </label>
-      </div>
-      <div className="grid-col grid-col-2">
-        <label className="usa-label">
-          Field type
-          <select className="usa-select" {...register(`${element.id}.type`)}>
-            <option value={'input'}>Input</option>
-          </select>
-        </label>
+    <div>
+      <div className="grid-row grid-gap padding-left-5">
+        <div className="grid-col grid-col-4 flex-fill flex-align-self-end">
+          <label className="usa-label">
+            Input
+            <p className="usa-hint font-ui-3xs">Instructions:</p>
+            <input
+              className="usa-input"
+              {...register(`${element.id}.data.instructions`)}
+              type="text"
+              placeholder={`Short answer: ${element.data.maxLength} chars`}
+            ></input>
+          </label>
+        </div>
+        {/* <div className="grid-col grid-col-2 flex-align-self-end">
+          <label className="usa-label">
+            <p className="usa-hint font-ui-3xs">Max length</p>
+            <input
+              className="usa-input"
+              type="text"
+              {...register(`${element.id}.data.maxLength`)}
+            ></input>
+          </label>
+        </div> */}
+        <div className="grid-col grid-col-4 flex-align-self-end">
+          <label className="usa-label">
+            <p className="usa-hint font-ui-3xs">Input type</p>
+            <select className="usa-select" {...register(`${element.id}.type`)}>
+              <option
+                value={'input'}
+              >{`${element.default} (${element.data.maxLength} chars)`}</option>
+              <option value={'input'}>Long Answer (500 chars)</option>{' '}
+              {/* this is a stub */}
+            </select>
+          </label>
+        </div>
       </div>
-      <div className="grid-col grid-col-2">
+      <div className="grid-row grid-gap padding-left-5 flex-justify-end">
+        <div>
+          <label className="usa-label">
+            <p className="usa-hint font-ui-3xs">
+              PDF Field ID: {`${element.data.text}`}
+            </p>
+          </label>
+        </div>
         <div className="usa-checkbox">
           <input
             className="usa-checkbox__input"
             type="checkbox"
             id={`${element.id}.required`}
             {...register(`${element.id}.data.required`)}
+            checked={element.required}
           />
           <label
             className="usa-checkbox__label"
diff --git a/packages/design/src/config/edit/ParagraphElementEdit.tsx b/packages/design/src/config/edit/ParagraphElementEdit.tsx
new file mode 100644
index 000000000..e27bd9c69
--- /dev/null
+++ b/packages/design/src/config/edit/ParagraphElementEdit.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { type FormElementComponent } from '../../Form';
+import { type ParagraphElement } from '@atj/forms/src/config/elements/paragraph';
+
+const ParagraphElementEdit: FormElementComponent<ParagraphElement> = ({
+  element,
+}) => {
+  const { register } = useFormContext();
+  return (
+    <div className="grid-row grid-gap">
+      <div className="grid-col grid-col-10 flex-align-self-end">
+        <label className="usa-label">
+          Text Element
+          <input
+            className="usa-input"
+            {...register(`${element.id}.data.text`)}
+            type="text"
+          ></input>
+        </label>
+      </div>
+      <div className="grid-col grid-col-2 flex-align-self-end">
+        <label className="usa-label">
+          <p className="usa-hint font-ui-3xs">Style</p>
+          <select className="usa-select" {...register(`${element.id}.type`)}>
+            <option value={'paragraph'}>Question</option> {/* this is a stub */}
+            <option value={'paragraph'}>Title</option> {/* this is a stub */}
+            <option value={'paragraph'}>Instructions</option>{' '}
+            {/* this is a stub */}
+          </select>
+        </label>
+      </div>
+    </div>
+  );
+};
+
+export default ParagraphElementEdit;
diff --git a/packages/design/src/config/edit/index.ts b/packages/design/src/config/edit/index.ts
index 49c9f040e..4dba3e261 100644
--- a/packages/design/src/config/edit/index.ts
+++ b/packages/design/src/config/edit/index.ts
@@ -8,7 +8,7 @@ import {
 
 import InputElementEdit from './InputElementEdit';
 import SequenceElementEdit from './SequenceElementEdit';
-import { type ComponentForPattern } from 'config/view';
+import { ComponentForPattern } from '../../Form';
 
 export type FormEditUIContext = {
   config: FormConfig;
diff --git a/packages/design/src/config/view/Fieldset/index.tsx b/packages/design/src/config/view/Fieldset/index.tsx
new file mode 100644
index 000000000..6b014ef5d
--- /dev/null
+++ b/packages/design/src/config/view/Fieldset/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { type Pattern } from '@atj/forms';
+import { type ParagraphElement } from '@atj/forms/src/config/elements/paragraph';
+
+import { type FormElementComponent } from '../../../Form';
+
+const FormSummary: FormElementComponent<Pattern<ParagraphElement>> = ({
+  pattern,
+}) => {
+  return (
+    <>
+      <p>{pattern.data.text}</p>
+    </>
+  );
+};
+export default FormSummary;
diff --git a/packages/design/src/config/view/FormSummary/index.tsx b/packages/design/src/config/view/FormSummary/index.tsx
index 27a61c4f2..0de894d12 100644
--- a/packages/design/src/config/view/FormSummary/index.tsx
+++ b/packages/design/src/config/view/FormSummary/index.tsx
@@ -4,12 +4,12 @@ import { Pattern, type FormSummaryPattern } from '@atj/forms';
 import { type FormElementComponent } from '../../../Form';
 
 const FormSummary: FormElementComponent<Pattern<FormSummaryPattern>> = ({
-  prompt,
+  pattern,
 }) => {
   return (
     <>
-      <legend className="usa-legend usa-legend--large">{prompt.title}</legend>
-      <p>{prompt.description}</p>
+      <legend className="usa-legend usa-legend--large">{pattern.title}</legend>
+      <p>{pattern.description}</p>
     </>
   );
 };
diff --git a/packages/design/src/config/view/Paragraph/index.tsx b/packages/design/src/config/view/Paragraph/index.tsx
new file mode 100644
index 000000000..6b014ef5d
--- /dev/null
+++ b/packages/design/src/config/view/Paragraph/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { type Pattern } from '@atj/forms';
+import { type ParagraphElement } from '@atj/forms/src/config/elements/paragraph';
+
+import { type FormElementComponent } from '../../../Form';
+
+const FormSummary: FormElementComponent<Pattern<ParagraphElement>> = ({
+  pattern,
+}) => {
+  return (
+    <>
+      <p>{pattern.data.text}</p>
+    </>
+  );
+};
+export default FormSummary;
diff --git a/packages/design/src/config/view/SubmissionConfirmation/index.tsx b/packages/design/src/config/view/SubmissionConfirmation/index.tsx
index effb7ff20..33da21b53 100644
--- a/packages/design/src/config/view/SubmissionConfirmation/index.tsx
+++ b/packages/design/src/config/view/SubmissionConfirmation/index.tsx
@@ -5,7 +5,7 @@ import { FormElementComponent } from '../../../Form';
 
 const SubmissionConfirmation: FormElementComponent<
   Pattern<SubmissionConfirmationPattern>
-> = ({ prompt }) => {
+> = ({ pattern }) => {
   return (
     <>
       <legend className="usa-legend usa-legend--large">
@@ -19,7 +19,7 @@ const SubmissionConfirmation: FormElementComponent<
           </tr>
         </thead>
         <tbody>
-          {prompt.table.map((row, index) => {
+          {pattern.table.map((row, index) => {
             return (
               <tr key={index}>
                 <td>{row.label}</td>
diff --git a/packages/design/src/config/view/TextInput/TestInput.stories.tsx b/packages/design/src/config/view/TextInput/TestInput.stories.tsx
index 63baff4ca..29abd29aa 100644
--- a/packages/design/src/config/view/TextInput/TestInput.stories.tsx
+++ b/packages/design/src/config/view/TextInput/TestInput.stories.tsx
@@ -28,7 +28,7 @@ export const Required = {
   args: {
     prompt: {
       _elementId: '',
-      type: 'text',
+      type: 'input',
       inputId: 'test-prompt',
       value: '',
       label: 'Please enter your first name.',
@@ -41,7 +41,7 @@ export const NotRequired = {
   args: {
     prompt: {
       _elementId: '',
-      type: 'text',
+      type: 'input',
       inputId: 'test-prompt',
       value: '',
       label: 'Please enter your first name.',
diff --git a/packages/design/src/config/view/TextInput/index.tsx b/packages/design/src/config/view/TextInput/index.tsx
index ee1ac4e03..8d894c0df 100644
--- a/packages/design/src/config/view/TextInput/index.tsx
+++ b/packages/design/src/config/view/TextInput/index.tsx
@@ -5,47 +5,45 @@ import { useFormContext } from 'react-hook-form';
 import { Pattern, type TextInputPattern } from '@atj/forms';
 import { type FormElementComponent } from '../../../Form';
 
-export type TextInputProps = { prompt: Pattern<TextInputPattern> };
-
 const TextInput: FormElementComponent<Pattern<TextInputPattern>> = ({
-  prompt,
+  pattern,
 }) => {
   const { register } = useFormContext();
   return (
-    <div className="usa-form-group" key={prompt.inputId}>
+    <div className="usa-form-group" key={pattern.inputId}>
       <div
         className={classNames('usa-form-group', {
-          'usa-form-group--error': prompt.error,
+          'usa-form-group--error': pattern.error,
         })}
       >
         <label
           className={classNames('usa-label', {
-            'usa-label--error': prompt.error,
+            'usa-label--error': pattern.error,
           })}
           htmlFor="input-error"
         >
-          {prompt.label}
+          {pattern.label}
         </label>
-        {prompt.error && (
+        {pattern.error && (
           <span
             className="usa-error-message"
-            id={`input-error-message-${prompt.inputId}`}
+            id={`input-error-message-${pattern.inputId}`}
             role="alert"
           >
-            {prompt.error}
+            {pattern.error}
           </span>
         )}
         <input
           className={classNames('usa-input', {
-            'usa-input--error': prompt.error,
+            'usa-input--error': pattern.error,
           })}
-          id={`input-${prompt.inputId}`}
-          defaultValue={prompt.value}
-          {...register(prompt.inputId, {
-            //required: prompt.required,
+          id={`input-${pattern.inputId}`}
+          defaultValue={pattern.value}
+          {...register(pattern.inputId, {
+            //required: pattern.required,
           })}
           type="text"
-          aria-describedby={`input-message-${prompt.inputId}`}
+          aria-describedby={`input-message-${pattern.inputId}`}
         />
       </div>
     </div>
diff --git a/packages/design/src/config/view/additional-fields.tsx b/packages/design/src/config/view/additional-fields.tsx
index b120f1d42..1e7b7b0e5 100644
--- a/packages/design/src/config/view/additional-fields.tsx
+++ b/packages/design/src/config/view/additional-fields.tsx
@@ -7,6 +7,7 @@ interface Field {
   id: string;
   class: string;
   value?: string;
+  instructions?: string;
   label: string;
   title?: string;
   required?: boolean;
@@ -29,6 +30,7 @@ export const TextField = ({ field }: { field: Field }) => {
           </abbr>
         )}
       </label>
+      {field.instructions && <p>{field.instructions}</p>}
       <input
         className={`usa-input ${field.class}`}
         name={field.name}
@@ -115,6 +117,7 @@ export const RadioField = ({ field }: { field: Field }) => {
             id={`${field.id}-${index}`}
             value={option.value}
           />
+          {field.instructions && <p>{field.instructions}</p>}
           <label className="usa-radio__label" htmlFor={`${field.id}-${index}`}>
             {option.name}
           </label>
diff --git a/packages/design/src/config/view/index.tsx b/packages/design/src/config/view/index.tsx
index 86af50be2..385b4a7d3 100644
--- a/packages/design/src/config/view/index.tsx
+++ b/packages/design/src/config/view/index.tsx
@@ -1,4 +1,5 @@
 import FormSummary from './FormSummary';
+import Paragraph from './Paragraph';
 import SubmissionConfirmation from './SubmissionConfirmation';
 import TextInput from './TextInput';
 
@@ -6,7 +7,8 @@ import { type ComponentForPattern } from '../../Form';
 
 export const defaultFormElementComponents: ComponentForPattern = {
   'form-summary': FormSummary,
+  input: TextInput,
+  paragraph: Paragraph,
   sequence: SubmissionConfirmation,
   'submission-confirmation': SubmissionConfirmation,
-  input: TextInput,
 };
diff --git a/packages/design/vite.config.ts b/packages/design/vite.config.ts
index b8435f5eb..e84a94b3d 100644
--- a/packages/design/vite.config.ts
+++ b/packages/design/vite.config.ts
@@ -7,6 +7,7 @@ import react from '@vitejs/plugin-react';
 export default defineConfig({
   plugins: [react(), dts({ include: ['src'] })],
   build: {
+    sourcemap: true,
     copyPublicDir: false,
     lib: {
       entry: resolve(__dirname, 'src/index.ts'),
diff --git a/packages/documents/package.json b/packages/documents/package.json
index 623fc3384..1e22a5afa 100644
--- a/packages/documents/package.json
+++ b/packages/documents/package.json
@@ -13,7 +13,8 @@
   "dependencies": {
     "@atj/common": "workspace:*",
     "@atj/forms": "workspace:*",
-    "pdf-lib": "^1.17.1"
+    "pdf-lib": "^1.17.1",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/node": "^20.10.4"
diff --git a/packages/documents/src/__tests__/fill-pdf.test.ts b/packages/documents/src/__tests__/fill-pdf.test.ts
index 16cd76627..a92981de3 100644
--- a/packages/documents/src/__tests__/fill-pdf.test.ts
+++ b/packages/documents/src/__tests__/fill-pdf.test.ts
@@ -2,6 +2,7 @@ import { beforeAll, describe, expect, it } from 'vitest';
 
 import { getDocumentFieldData, fillPDF } from '..';
 import { loadSamplePDF } from './sample-data';
+import { type Failure, type Success } from '@atj/common';
 
 describe('PDF form filler', () => {
   let pdfBytes: Uint8Array;
diff --git a/packages/documents/src/document.ts b/packages/documents/src/document.ts
index fc305dd61..8776b1f66 100644
--- a/packages/documents/src/document.ts
+++ b/packages/documents/src/document.ts
@@ -6,7 +6,7 @@ import {
   addFormElements,
 } from '@atj/forms';
 import { PDFDocument, getDocumentFieldData } from './pdf';
-import { suggestFormDetails } from './suggestions';
+import { getSuggestedFormElementsFromCache } from './suggestions';
 
 export type DocumentTemplate = PDFDocument;
 
@@ -18,22 +18,49 @@ export const addDocument = async (
   }
 ) => {
   const fields = await getDocumentFieldData(fileDetails.data);
-  const fieldMap = suggestFormDetails(fields);
-  const formWithFields = addDocumentFieldsToForm(form, fieldMap);
-  const updatedForm = addFormOutput(formWithFields, {
-    data: fileDetails.data,
-    path: fileDetails.name,
-    fields,
-    // TODO: for now, reuse the field IDs from the PDF. we need to generate
-    // unique ones, instead.
-    formFields: Object.fromEntries(
-      Object.keys(fieldMap).map(field => [field, field])
-    ),
-  });
-  return {
-    newFields: fields,
-    updatedForm,
-  };
+  const cachedPdf = await getSuggestedFormElementsFromCache(fileDetails.data);
+
+  if (cachedPdf) {
+    const updatedForm = addFormElements(
+      form,
+      [
+        ...cachedPdf.elements,
+        {
+          id: 'root',
+          type: 'sequence',
+          data: {
+            elements: cachedPdf.elements.map(element => element.id),
+          },
+          default: {
+            elements: [],
+          },
+          required: true,
+        },
+      ],
+      'root'
+    );
+    // TODO: add form outputs
+    return {
+      newFields: fields,
+      updatedForm,
+    };
+  } else {
+    const formWithFields = addDocumentFieldsToForm(form, fields);
+    const updatedForm = addFormOutput(formWithFields, {
+      data: fileDetails.data,
+      path: fileDetails.name,
+      fields,
+      // TODO: for now, reuse the field IDs from the PDF. we need to generate
+      // unique ones, instead.
+      formFields: Object.fromEntries(
+        Object.keys(fields).map(field => [field, field])
+      ),
+    });
+    return {
+      newFields: fields,
+      updatedForm,
+    };
+  }
 };
 
 export const addDocumentFieldsToForm = (
@@ -81,11 +108,34 @@ export const addDocumentFieldsToForm = (
         id: field.name,
         data: {
           text: field.label,
+          instructions: field.instructions,
           maxLength: 128,
         },
         default: field.value,
         required: field.required,
       });
+    } else if (field.type === 'RadioGroup') {
+      elements.push({
+        type: 'input',
+        id: field.name,
+        data: {
+          text: field.label,
+          instructions: field.instructions,
+          maxLength: 128,
+        },
+        default: field.value,
+        required: field.required,
+      });
+    } else if (field.type === 'Paragraph') {
+      elements.push({
+        type: 'paragraph',
+        id: field.name,
+        data: {
+          text: field.value,
+        },
+        default: 'remove me from FormElement', // TODO: remove default from FormElement
+        required: false, // TODO: remove required from FormElement
+      });
     } else if (field.type === 'not-supported') {
       console.error(`Skipping field: ${field.error}`);
     } else {
diff --git a/packages/documents/src/pdf/al_name_change.json b/packages/documents/src/pdf/al_name_change.json
new file mode 100644
index 000000000..291641df7
--- /dev/null
+++ b/packages/documents/src/pdf/al_name_change.json
@@ -0,0 +1,1157 @@
+{
+  "raw_text": "Request to Change Name Case Number: (the clerk fills this in) \n8/08 (For An Adult) \n<question>In the Probate Court of (county): County, Alabama <input label=County_Name1 instructions={field_dict['field_instructions']}></question>\n<question>Your current name: <input label=Current_First_Name1 instructions={field_dict['field_instructions']}><input label=Current_Middle_Name1 instructions={field_dict['field_instructions']}><input label=Current_Last_Name1 instructions={field_dict['field_instructions']}></question>\nfirst middle last \nTo ask the court to change your name, you must fill out this form, and: \n\u2022 Attach a certified copy of your birth certificate and a copy of your photo ID, and \n\u2022 File your form and attachments in the same county where you live. \nI declare that the following information is true: \n<question>My current name is: <input label=Current_First_Name2 instructions={field_dict['field_instructions']}><input label=Current_Middle_Name2 instructions={field_dict['field_instructions']}><input label=Current_Last_Name2 instructions={field_dict['field_instructions']}></question>\nfirst middle last \n<question>My address is: <input label=Street_Address instructions={field_dict['field_instructions']}><input label=City instructions={field_dict['field_instructions']}><input label=State instructions={field_dict['field_instructions']}><input label=Zip instructions={field_dict['field_instructions']}></question>\nstreet city state zip \n<question>My phone numbers are (home): (work): <input label=Home_Phone instructions={field_dict['field_instructions']}><input label=Work_Phone instructions={field_dict['field_instructions']}></question>\n<question>My date of birth is (mm/dd/yyyy): <input label=DOB instructions={field_dict['field_instructions']}></question>\n<question>My name at birth was: <input label=Birth_First_Name instructions={field_dict['field_instructions']}><input label=Birth_Middle_Name instructions={field_dict['field_instructions']}><input label=Birth_Last_Name instructions={field_dict['field_instructions']}></question>\nfirst middle last \n<question>I am an adult (19 or older), of sound mind, and live in (name of Alabama county): <input label=County_Name2 instructions={field_dict['field_instructions']}></question>\n<question>The attached copy of my photo ID is my (check one): <button type=radio> Driver\u2019s license, # <input label=PhotoID instructions=NA><input label=DL# instructions={field_dict['field_instructions']}></question>\n<question><input label=PhotoID instructions=NA><button type=radio> Non-driver\u2019s photo, ID #: <input label=ID# instructions={field_dict['field_instructions']}></question>\n<question>I ask the court to change my name because (explain why you want to change your name): <input label=Why_change_name1 instructions={field_dict['field_instructions']}></question>\n<question><input label=Why_change_name2 instructions={field_dict['field_instructions']}></question>\n<question><input label=Why_change_name3 instructions={field_dict['field_instructions']}></question>\n<question>I want my new name to be: <input label=New_First_Name instructions={field_dict['field_instructions']}><input label=New_Middle_Name instructions={field_dict['field_instructions']}><input label=New_Last_Name instructions={field_dict['field_instructions']}></question>\nfirst middle last \nI also declare: \n\u2022 I am not now facing criminal charges, nor am I involved in any other court case. \n\u2022 I have never been convicted of a criminal sex offense (as defined in Alabama Code \u00a7 15-20-21), \na crime of moral turpitude, or a felony. \n\u2022 I am not asking to change my name to avoid paying my debts or to commit fraud. \n\u2022 I swear that all of the information I have provided above is complete and accurate. \nI ask the court to grant this request and to issue an order changing my name. \nSign below in front of a notary: \n Date: \nNotary fills out below\u2014 \nSworn to and subscribed before me, the undersigned authority, \nBy (Print name of notary): \nOn this date: (Notary\u2019s seal here) \n / / \n Notary signs here Date notary\u2019s commission expires \nRev. 8/08 \uf8e9 2008 Alabama State Bar ",
+  "title": "",
+  "description": "",
+  "elements": [
+    {
+      "id": "81c0a14b-db8c-4533-81d5-7e9e603349d7",
+      "group_id": 0,
+      "element_type": "text",
+      "element_params": {
+        "text": "Request to Change Name (For An Adult)",
+        "text_style": "DYNNJN+Arial-ItalicMT 8.879999999999995",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "1fc0b74a-7139-46a7-9aad-8e3e3ff94a6d",
+      "group_id": 2,
+      "element_type": "text",
+      "element_params": {
+        "text": "In the Probate Court of (county): ",
+        "text_style": "JTUTCJ+ArialMT 9.840000000000032",
+        "options": null
+      },
+      "inputs": [
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=County_Name1 instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "County_Name1",
+            "placeholder": "",
+            "instructions": "Type name of Alabama county where Probate Court is located",
+            "required": false,
+            "options": []
+          }
+        }
+      ],
+      "parent": null
+    },
+    {
+      "id": "6904a3ef-17f6-4a1b-83c7-4a963f1a43c5",
+      "group_id": 3,
+      "element_type": "text",
+      "element_params": {
+        "text": "Your current name: ",
+        "text_style": "JTUTCJ+ArialMT 9.840000000000032",
+        "options": null
+      },
+      "inputs": [
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=Current_First_Name1 instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "Current_First_Name1",
+            "placeholder": "",
+            "instructions": "Type your current first name",
+            "required": false,
+            "options": []
+          }
+        },
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=Current_Middle_Name1 instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "Current_Middle_Name1",
+            "placeholder": "",
+            "instructions": "Type your current middle name",
+            "required": false,
+            "options": []
+          }
+        },
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=Current_Last_Name1 instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "Current_Last_Name1",
+            "placeholder": "",
+            "instructions": "Type your current last name",
+            "required": false,
+            "options": []
+          }
+        }
+      ],
+      "parent": null
+    },
+    {
+      "id": "f35107d6-91e4-4a30-8152-e2ce3827c71b",
+      "group_id": 4,
+      "element_type": "text",
+      "element_params": {
+        "text": "first middle last ",
+        "text_style": "DYNNJN+Arial-ItalicMT 8.879999999999995",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "0a10d256-c938-4c83-9045-8f31df99bbff",
+      "group_id": 5,
+      "element_type": "text",
+      "element_params": {
+        "text": "To ask the court to change your name, you must fill out this form, and: ",
+        "text_style": "JTUTCJ+ArialMT 10.799999999999955",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "9ffecb48-b274-44a9-ab21-17f90db129ca",
+      "group_id": 6,
+      "element_type": "text",
+      "element_params": {
+        "text": "\u2022 Attach a certified copy of your birth certificate and a copy of your photo ID, and ",
+        "text_style": "JTUTCJ+ArialMT 10.799999999999955",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "21ce04d1-7d40-40c9-bdd5-e738b801a6d3",
+      "group_id": 7,
+      "element_type": "text",
+      "element_params": {
+        "text": "\u2022 File your form and attachments in the same county where you live. ",
+        "text_style": "JTUTCJ+ArialMT 10.799999999999955",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "fd565668-436f-42f3-9969-4de1b86db4ae",
+      "group_id": 8,
+      "element_type": "text",
+      "element_params": {
+        "text": "I declare that the following information is true: ",
+        "text_style": "JTUTCJ+ArialMT 10.32000000000005",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "767b5b4e-f1f0-4ca2-a606-d74562d4b78b",
+      "group_id": 9,
+      "element_type": "text",
+      "element_params": {
+        "text": "My current name is: ",
+        "text_style": "JTUTCJ+ArialMT 8.879999999999995",
+        "options": null
+      },
+      "inputs": [
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=Current_First_Name2 instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "Current_First_Name2",
+            "placeholder": "",
+            "instructions": "Type your current first name",
+            "required": false,
+            "options": []
+          }
+        },
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=Current_Middle_Name2 instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "Current_Middle_Name2",
+            "placeholder": "",
+            "instructions": "Type your current middle name",
+            "required": false,
+            "options": []
+          }
+        },
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=Current_Last_Name2 instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "Current_Last_Name2",
+            "placeholder": "",
+            "instructions": "Type your current last name",
+            "required": false,
+            "options": []
+          }
+        }
+      ],
+      "parent": null
+    },
+    {
+      "id": "123200d4-d0e9-45a6-b598-3457430188a5",
+      "group_id": 10,
+      "element_type": "text",
+      "element_params": {
+        "text": "first middle last ",
+        "text_style": "DYNNJN+Arial-ItalicMT 8.879999999999995",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "91955d9c-b3fc-4190-b1fd-bfddd49a2a6c",
+      "group_id": 11,
+      "element_type": "text",
+      "element_params": {
+        "text": "My address is: ",
+        "text_style": "JTUTCJ+ArialMT 8.879999999999995",
+        "options": null
+      },
+      "inputs": [
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=Street_Address instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "Street_Address",
+            "placeholder": "",
+            "instructions": "Type your street address",
+            "required": false,
+            "options": []
+          }
+        },
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=City instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "City",
+            "placeholder": "",
+            "instructions": "Type the name of your city",
+            "required": false,
+            "options": []
+          }
+        },
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=State instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "State",
+            "placeholder": "",
+            "instructions": "Type the state where you live",
+            "required": false,
+            "options": []
+          }
+        },
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=Zip instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "Zip",
+            "placeholder": "",
+            "instructions": "Type your zip code",
+            "required": false,
+            "options": []
+          }
+        }
+      ],
+      "parent": null
+    },
+    {
+      "id": "f17418c5-4108-4b47-b263-050d44115d56",
+      "group_id": 12,
+      "element_type": "text",
+      "element_params": {
+        "text": "street city state zip ",
+        "text_style": "DYNNJN+Arial-ItalicMT 8.879999999999995",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "7ce2801f-022d-4140-b004-fdcdaf9a0767",
+      "group_id": 13,
+      "element_type": "text",
+      "element_params": {
+        "text": "My phone numbers are (home): (work): ",
+        "text_style": "DURMBL+Arial-BoldMT 8.879999999999995",
+        "options": null
+      },
+      "inputs": [
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=Home_Phone instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "Home_Phone",
+            "placeholder": "",
+            "instructions": "Type your home phone number including area code",
+            "required": false,
+            "options": []
+          }
+        },
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=Work_Phone instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "Work_Phone",
+            "placeholder": "",
+            "instructions": "Type your work phone number including area code",
+            "required": false,
+            "options": []
+          }
+        }
+      ],
+      "parent": null
+    },
+    {
+      "id": "c3212cab-6019-4e60-8198-f11b87c81e82",
+      "group_id": 14,
+      "element_type": "text",
+      "element_params": {
+        "text": "My date of birth is (mm/dd/yyyy): ",
+        "text_style": "JTUTCJ+ArialMT 8.879999999999995",
+        "options": null
+      },
+      "inputs": [
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=DOB instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "DOB",
+            "placeholder": "",
+            "instructions": "Type your date of birth as mm/dd/yyyy",
+            "required": false,
+            "options": []
+          }
+        }
+      ],
+      "parent": null
+    },
+    {
+      "id": "ce713b94-0008-43ab-ace4-6b38d01b2f76",
+      "group_id": 15,
+      "element_type": "text",
+      "element_params": {
+        "text": "My name at birth was: ",
+        "text_style": "JTUTCJ+ArialMT 8.879999999999995",
+        "options": null
+      },
+      "inputs": [
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=Birth_First_Name instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "Birth_First_Name",
+            "placeholder": "",
+            "instructions": "Type the first name you were given at birth",
+            "required": false,
+            "options": []
+          }
+        },
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=Birth_Middle_Name instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "Birth_Middle_Name",
+            "placeholder": "",
+            "instructions": "Type the middle name you were given at birth",
+            "required": false,
+            "options": []
+          }
+        },
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=Birth_Last_Name instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "Birth_Last_Name",
+            "placeholder": "",
+            "instructions": "Type the last name you were given at birth",
+            "required": false,
+            "options": []
+          }
+        }
+      ],
+      "parent": null
+    },
+    {
+      "id": "af424f15-6937-40ed-aedb-ee2e06d02bd9",
+      "group_id": 16,
+      "element_type": "text",
+      "element_params": {
+        "text": "first middle last ",
+        "text_style": "DYNNJN+Arial-ItalicMT 8.879999999999995",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "f228e971-d4db-43f6-a03b-4eb009f214b0",
+      "group_id": 17,
+      "element_type": "text",
+      "element_params": {
+        "text": "I am an adult (19 or older), of sound mind, and live in (name of Alabama county): ",
+        "text_style": "LEDWHU+TimesNewRomanPSMT 8.879999999999995",
+        "options": null
+      },
+      "inputs": [
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=County_Name2 instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "County_Name2",
+            "placeholder": "",
+            "instructions": "Type the name of the county where you live now",
+            "required": false,
+            "options": []
+          }
+        }
+      ],
+      "parent": null
+    },
+    {
+      "id": "dcb5d901-a293-4f53-b663-a4d401ac0812",
+      "group_id": 18,
+      "element_type": "text",
+      "element_params": {
+        "text": "The attached copy of my photo ID is my (check one): <button type=radio> Driver\u2019s license, # ",
+        "text_style": "JTUTCJ+ArialMT 12.0",
+        "options": null
+      },
+      "inputs": [
+        {
+          "input_type": "Btn",
+          "input_params": {
+            "text": "<input label=PhotoID instructions=NA>",
+            "text_style": "ZaDb 10 Tf 0 g",
+            "output_id": "PhotoID",
+            "placeholder": "",
+            "instructions": "",
+            "required": false,
+            "options": []
+          }
+        },
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=DL# instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "DL#",
+            "placeholder": "",
+            "instructions": "Type your driver's license number",
+            "required": false,
+            "options": []
+          }
+        }
+      ],
+      "parent": "PhotoID"
+    },
+    {
+      "id": "c987bcb6-c486-4edc-8a21-be43c2b2db39",
+      "group_id": 18,
+      "element_type": "text",
+      "element_params": {
+        "text": "",
+        "text_style": "",
+        "options": null
+      },
+      "inputs": [
+        {
+          "input_type": "Btn",
+          "input_params": {
+            "text": "<input label=PhotoID instructions=NA>",
+            "text_style": "ZaDb 10 Tf 0 g",
+            "output_id": "PhotoID",
+            "placeholder": "",
+            "instructions": "",
+            "required": false,
+            "options": []
+          }
+        }
+      ],
+      "parent": "PhotoID"
+    },
+    {
+      "id": "1a8cbd28-f600-47f8-9ce0-85ae136ba338",
+      "group_id": 18,
+      "element_type": "text",
+      "element_params": {
+        "text": "<button type=radio> Non-driver\u2019s photo, ID #: ",
+        "text_style": "JTUTCJ+ArialMT 8.879999999999995",
+        "options": null
+      },
+      "inputs": [
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=ID# instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "ID#",
+            "placeholder": "",
+            "instructions": "Type the number from your photo ID (not driver's license)",
+            "required": false,
+            "options": []
+          }
+        }
+      ],
+      "parent": "PhotoID"
+    },
+    {
+      "id": "a532ebcf-b71a-4135-9de1-819bc98815b0",
+      "group_id": 19,
+      "element_type": "text",
+      "element_params": {
+        "text": "I ask the court to change my name because (explain why you want to change your name): ",
+        "text_style": "LEDWHU+TimesNewRomanPSMT 8.879999999999995",
+        "options": null
+      },
+      "inputs": [
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=Why_change_name1 instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "Why_change_name1",
+            "placeholder": "",
+            "instructions": "Type why you want to change your name",
+            "required": false,
+            "options": []
+          }
+        }
+      ],
+      "parent": null
+    },
+    {
+      "id": "3ec2a911-e51e-4804-890f-d1bb8b5b1783",
+      "group_id": 20,
+      "element_type": "text",
+      "element_params": {
+        "text": "",
+        "text_style": "",
+        "options": null
+      },
+      "inputs": [
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=Why_change_name2 instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "Why_change_name2",
+            "placeholder": "",
+            "instructions": "Continue typing why you want to change your name",
+            "required": false,
+            "options": []
+          }
+        }
+      ],
+      "parent": null
+    },
+    {
+      "id": "cdba2914-5d64-41ec-ba20-0ad35236b662",
+      "group_id": 21,
+      "element_type": "text",
+      "element_params": {
+        "text": "",
+        "text_style": "",
+        "options": null
+      },
+      "inputs": [
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=Why_change_name3 instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "Why_change_name3",
+            "placeholder": "",
+            "instructions": "Continue typing why you want to change your name",
+            "required": false,
+            "options": []
+          }
+        }
+      ],
+      "parent": null
+    },
+    {
+      "id": "f21048d9-95f4-4e83-843b-cf8ae282f4ed",
+      "group_id": 22,
+      "element_type": "text",
+      "element_params": {
+        "text": "I want my new name to be: ",
+        "text_style": "JTUTCJ+ArialMT 8.879999999999995",
+        "options": null
+      },
+      "inputs": [
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=New_First_Name instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "New_First_Name",
+            "placeholder": "",
+            "instructions": "Type what you want your new first name to be",
+            "required": false,
+            "options": []
+          }
+        },
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=New_Middle_Name instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "New_Middle_Name",
+            "placeholder": "",
+            "instructions": "Type what you want your new middle name to be",
+            "required": false,
+            "options": []
+          }
+        },
+        {
+          "input_type": "Tx",
+          "input_params": {
+            "text": "<input label=New_Last_Name instructions={field_dict['field_instructions']}>",
+            "text_style": "Helv 10 Tf 0 g",
+            "output_id": "New_Last_Name",
+            "placeholder": "",
+            "instructions": "Type what you want your new last name to be",
+            "required": false,
+            "options": []
+          }
+        }
+      ],
+      "parent": null
+    },
+    {
+      "id": "36cc43a5-2b04-4f82-a57d-7303a75c7658",
+      "group_id": 23,
+      "element_type": "text",
+      "element_params": {
+        "text": "first middle last ",
+        "text_style": "DYNNJN+Arial-ItalicMT 8.879999999999995",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "9a3644e2-05f3-4dae-8c64-6abd788d0c67",
+      "group_id": 24,
+      "element_type": "text",
+      "element_params": {
+        "text": "I also declare: ",
+        "text_style": "JTUTCJ+ArialMT 10.319999999999993",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "14cdb97d-3024-43f4-932d-6b3f29bf2ffa",
+      "group_id": 25,
+      "element_type": "text",
+      "element_params": {
+        "text": "\u2022 I am not now facing criminal charges, nor am I involved in any other court case. ",
+        "text_style": "JTUTCJ+ArialMT 10.319999999999993",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "1a37c28e-c38b-4154-80c9-0ef8238731c6",
+      "group_id": 26,
+      "element_type": "text",
+      "element_params": {
+        "text": "\u2022 I have never been convicted of a criminal sex offense (as defined in Alabama Code \u00a7 15-20-21), ",
+        "text_style": "JTUTCJ+ArialMT 10.319999999999993",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "39f1a85b-1f5b-478b-a966-2ecf1e6abd7d",
+      "group_id": 27,
+      "element_type": "text",
+      "element_params": {
+        "text": "a crime of moral turpitude, or a felony. ",
+        "text_style": "JTUTCJ+ArialMT 10.319999999999993",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "c38a01c9-d076-4356-b732-276e06311503",
+      "group_id": 28,
+      "element_type": "text",
+      "element_params": {
+        "text": "\u2022 I am not asking to change my name to avoid paying my debts or to commit fraud. ",
+        "text_style": "JTUTCJ+ArialMT 10.319999999999993",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "be6f511d-89b5-4f53-a18e-acef61fc4097",
+      "group_id": 29,
+      "element_type": "text",
+      "element_params": {
+        "text": "\u2022 I swear that all of the information I have provided above is complete and accurate. ",
+        "text_style": "JTUTCJ+ArialMT 10.319999999999993",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "cbbc19e8-2485-4467-8d47-fe0b17e49c12",
+      "group_id": 30,
+      "element_type": "text",
+      "element_params": {
+        "text": "I ask the court to grant this request and to issue an order changing my name. ",
+        "text_style": "JTUTCJ+ArialMT 10.319999999999993",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "f01e62f3-fd2d-496f-9296-931e583b4ecf",
+      "group_id": 31,
+      "element_type": "text",
+      "element_params": {
+        "text": "Sign below in front of a notary: ",
+        "text_style": "DYNNJN+Arial-ItalicMT 9.359999999999985",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "23069e87-4933-4247-a91a-3ec81904cd48",
+      "group_id": 32,
+      "element_type": "text",
+      "element_params": {
+        "text": " Date: ",
+        "text_style": "JTUTCJ+ArialMT 8.880000000000024",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "4c3c9923-5728-4a57-995f-255d8325d54d",
+      "group_id": 33,
+      "element_type": "text",
+      "element_params": {
+        "text": "Notary fills out below\u2014 ",
+        "text_style": "PEUTYI+Arial-BoldItalicMT 9.840000000000003",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "d0eedd4a-68f9-477b-94c7-48bda71e2497",
+      "group_id": 34,
+      "element_type": "text",
+      "element_params": {
+        "text": "Sworn to and subscribed before me, the undersigned authority, ",
+        "text_style": "LEDWHU+TimesNewRomanPSMT 7.920000000000002",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "0e01909f-d65c-4046-98f2-8712d5acb95d",
+      "group_id": 35,
+      "element_type": "text",
+      "element_params": {
+        "text": "By (Print name of notary): ",
+        "text_style": "LEDWHU+TimesNewRomanPSMT 7.920000000000002",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "1a4e2d74-9689-481b-b745-418a0489ce18",
+      "group_id": 36,
+      "element_type": "text",
+      "element_params": {
+        "text": "On this date: (Notary\u2019s seal here) ",
+        "text_style": "DYNNJN+Arial-ItalicMT 7.920000000000002",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "f44677d5-88be-489e-a9b7-5cf9e411ab13",
+      "group_id": 37,
+      "element_type": "text",
+      "element_params": {
+        "text": " / / ",
+        "text_style": "JTUTCJ+ArialMT 10.799999999999997",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "9e60c1be-0a30-4658-9982-10155208ad02",
+      "group_id": 38,
+      "element_type": "text",
+      "element_params": {
+        "text": " Notary signs here Date notary\u2019s commission expires ",
+        "text_style": "PCNLPI+TimesNewRomanPS-ItalicMT 7.920000000000002",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    },
+    {
+      "id": "42525ddc-db9d-40b9-a51a-f415e9cc94c2",
+      "group_id": 39,
+      "element_type": "text",
+      "element_params": {
+        "text": "Rev. 8/08 \uf8e9 2008 Alabama State Bar ",
+        "text_style": "JTUTCJ+ArialMT 8.879999999999995",
+        "options": null
+      },
+      "inputs": [],
+      "parent": null
+    }
+  ],
+  "raw_fields": [
+    {
+      "type": "/Tx",
+      "var_name": "Current_First_Name1",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [143.52, 660.72, 315.114, 674.88],
+        "field_label": "Current_First_Name1",
+        "field_instructions": "Type your current first name"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "Current_Middle_Name1",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [319.867, 660.368, 446.006, 674.629],
+        "field_label": "Current_Middle_Name1",
+        "field_instructions": "Type your current middle name"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "Current_Last_Name1",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [448.846, 661.013, 552.413, 674.629],
+        "field_label": "Current_Last_Name1",
+        "field_instructions": "Type your current last name"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "Current_First_Name2",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [175.92, 557.04, 330.412, 571.2],
+        "field_label": "Current_First_Name2",
+        "field_instructions": "Type your current first name"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "Current_Middle_Name2",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [335.345, 557.185, 456.324, 572.091],
+        "field_label": "Current_Middle_Name2",
+        "field_instructions": "Type your current middle name"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "Current_Last_Name2",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [459.809, 557.185, 555.638, 572.091],
+        "field_label": "Current_Last_Name2",
+        "field_instructions": "Type your current last name"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "Street_Address",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [148.8, 528.48, 284.625, 542.64],
+        "field_label": "Street_Address",
+        "field_instructions": "Type your street address"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "City",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [286.978, 527.52, 391.19, 542.426],
+        "field_label": "City",
+        "field_instructions": "Type the name of your city"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "State",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [392.74, 528.165, 462.129, 542.426],
+        "field_label": "State",
+        "field_instructions": "Type the state where you live"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "Zip",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [464.324, 527.52, 554.993, 543.071],
+        "field_label": "Zip",
+        "field_instructions": "Type your zip code"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "Home_Phone",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [224.4, 500.16, 359.16, 514.32],
+        "field_label": "Home_Phone",
+        "field_instructions": "Type your home phone number including area code"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "Work_Phone",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [392.88, 500.16, 555.48, 514.32],
+        "field_label": "Work_Phone",
+        "field_instructions": "Type your work phone number including area code"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "DOB",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [224.16, 480.48, 555.48, 494.64],
+        "field_label": "DOB",
+        "field_instructions": "Type your date of birth as mm/dd/yyyy"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "Birth_First_Name",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [182.64, 457.68, 320.739, 471.84],
+        "field_label": "Birth_First_Name",
+        "field_instructions": "Type the first name you were given at birth"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "Birth_Middle_Name",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [324.381, 457.872, 445.361, 472.133],
+        "field_label": "Birth_Middle_Name",
+        "field_instructions": "Type the middle name you were given at birth"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "Birth_Last_Name",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [446.911, 457.872, 554.993, 472.133],
+        "field_label": "Birth_Last_Name",
+        "field_instructions": "Type the last name you were given at birth"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "County_Name1",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [221.76, 685.275, 413.28, 700.08],
+        "field_label": "County_Name1",
+        "field_instructions": "Type name of Alabama county where Probate Court is located"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "County_Name2",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [434.16, 428.64, 555.48, 442.8],
+        "field_label": "County_Name2",
+        "field_instructions": "Type the name of the county where you live now"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "DL#",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [410.64, 406.08, 555.48, 420.24],
+        "field_label": "DL#",
+        "field_instructions": "Type your driver's license number"
+      }
+    },
+    {
+      "type": "/Btn",
+      "var_name": "PhotoID",
+      "field_dict": {
+        "font_info": "/ZaDb 10 Tf 0 g",
+        "flags": 49152,
+        "field_type": "button_field",
+        "field_label": "PhotoID",
+        "child_fields": [
+          {
+            "coordinates": [320.512, 405.766, 330.773, 416.027]
+          },
+          {
+            "coordinates": [319.867, 391.578, 330.773, 403.129]
+          }
+        ],
+        "num_children": 2
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "ID#",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [436.08, 393.6, 555.48, 405.885],
+        "field_label": "ID#",
+        "field_instructions": "Type the number from your photo ID (not driver's license)"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "Why_change_name1",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [466.32, 375.36, 555.48, 389.52],
+        "field_label": "Why_change_name1",
+        "field_instructions": "Type why you want to change your name"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "Why_change_name2",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [77.52, 360.48, 555.48, 374.64],
+        "field_label": "Why_change_name2",
+        "field_instructions": "Continue typing why you want to change your name"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "Why_change_name3",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [77.52, 346.56, 555.48, 359.64],
+        "field_label": "Why_change_name3",
+        "field_instructions": "Continue typing why you want to change your name"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "New_First_Name",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [207.84, 326.4, 333.637, 340.56],
+        "field_label": "New_First_Name",
+        "field_instructions": "Type what you want your new first name to be"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "New_Middle_Name",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [335.989, 326.313, 449.876, 340.575],
+        "field_label": "New_Middle_Name",
+        "field_instructions": "Type what you want your new middle name to be"
+      }
+    },
+    {
+      "type": "/Tx",
+      "var_name": "New_Last_Name",
+      "field_dict": {
+        "font_info": "/Helv 10 Tf 0 g",
+        "field_type": "text_field",
+        "coordinates": [450.781, 325.668, 564.021, 340.575],
+        "field_label": "New_Last_Name",
+        "field_instructions": "Type what you want your new last name to be"
+      }
+    }
+  ]
+}
diff --git a/packages/documents/src/pdf/extract.ts b/packages/documents/src/pdf/extract.ts
index 45974bf52..6026bc23e 100644
--- a/packages/documents/src/pdf/extract.ts
+++ b/packages/documents/src/pdf/extract.ts
@@ -49,6 +49,15 @@ const getFieldValue = (field: pdfLib.PDFField): DocumentFieldValue => {
       value: field.getSelected(),
       required: field.isRequired(),
     };
+  } else if (field instanceof pdfLib.PDFRadioGroup) {
+    return {
+      type: 'RadioGroup',
+      name: field.getName(),
+      options: field.getOptions(),
+      label: field.getName(),
+      value: field.getSelected() || '', // pdfLib allows this to be undefined
+      required: field.isRequired(),
+    };
   } else {
     return {
       type: 'not-supported',
diff --git a/packages/documents/src/pdf/generate.ts b/packages/documents/src/pdf/generate.ts
index 5d9c89019..dce69d83a 100644
--- a/packages/documents/src/pdf/generate.ts
+++ b/packages/documents/src/pdf/generate.ts
@@ -68,6 +68,11 @@ const setFormFieldData = (
   } else if (fieldType === 'OptionList') {
     const field = form.getDropdown(fieldName);
     field.select(fieldValue);
+  } else if (fieldType === 'RadioGroup') {
+    const field = form.getRadioGroup(fieldName);
+    field.select(fieldValue);
+  } else if (fieldType === 'Paragraph') {
+    // do nothing
   } else {
     const exhaustiveCheck: never = fieldType;
   }
diff --git a/packages/documents/src/pdf/index.ts b/packages/documents/src/pdf/index.ts
index 230e9279f..1982c9d14 100644
--- a/packages/documents/src/pdf/index.ts
+++ b/packages/documents/src/pdf/index.ts
@@ -1,6 +1,7 @@
 export { getDocumentFieldData } from './extract';
 export * from './generate';
 export { generateDummyPDF } from './generate-dummy';
+export { parseAlabamaNameChangeForm } from './mock-api';
 
 export type PDFDocument = {
   type: 'pdf';
@@ -12,4 +13,10 @@ export type PDFField = {
   label: string;
   default?: any;
 };
-export type PDFFieldType = 'TextField' | 'CheckBox' | 'Dropdown' | 'OptionList';
+export type PDFFieldType =
+  | 'TextField'
+  | 'CheckBox'
+  | 'Dropdown'
+  | 'OptionList'
+  | 'RadioGroup'
+  | 'Paragraph';
diff --git a/packages/documents/src/pdf/mock-api.ts b/packages/documents/src/pdf/mock-api.ts
new file mode 100644
index 000000000..146960ace
--- /dev/null
+++ b/packages/documents/src/pdf/mock-api.ts
@@ -0,0 +1,190 @@
+import * as z from 'zod';
+
+import { type FormElement } from '@atj/forms';
+import { type InputElement } from '@atj/forms/src/config/elements/input';
+
+import json from './al_name_change.json' assert { type: 'json' };
+
+const TxInput = z.object({
+  input_type: z.literal('Tx'),
+  input_params: z.object({
+    text: z.string(),
+    text_style: z.string(),
+    output_id: z.string(),
+    placeholder: z.string(),
+    instructions: z.string(),
+    required: z.boolean(),
+    options: z.array(z.string()),
+  }),
+});
+
+const BtnInput = z.object({
+  input_type: z.literal('Btn'),
+  input_params: z.object({
+    text: z.string(),
+    text_style: z.string(),
+    output_id: z.string(),
+    placeholder: z.string(),
+    instructions: z.string(),
+    required: z.boolean(),
+    options: z.array(z.string()),
+  }),
+});
+
+const ExtractedInput = z.discriminatedUnion('input_type', [TxInput, BtnInput]);
+type ExtractedInput = z.infer<typeof ExtractedInput>;
+
+const ExtractedElement = z.object({
+  id: z.string(),
+  group_id: z.number(),
+  element_type: z.string(),
+  element_params: z.object({
+    text: z.string(),
+    text_style: z.string(),
+    options: z.null(),
+  }),
+  inputs: ExtractedInput.array(),
+  parent: z.string().nullable(),
+});
+type ExtractedElement = z.infer<typeof ExtractedElement>;
+
+const RawTxField = z.object({
+  type: z.literal('/Tx'),
+  var_name: z.string(),
+  field_dict: z.object({
+    font_info: z.string(),
+    field_type: z.string(),
+    coordinates: z.number().array().optional(),
+    field_label: z.string(),
+    field_instructions: z.string(),
+  }),
+});
+
+const RawBtnField = z.object({
+  type: z.literal('/Btn'),
+  var_name: z.string(),
+  field_dict: z.object({
+    font_info: z.string(),
+    flags: z.number(),
+    field_type: z.string(),
+    field_label: z.string(),
+    child_fields: z.array(z.object({ coordinates: z.number().array() })),
+    num_children: z.number(),
+  }),
+});
+
+const ExtractedObject = z.object({
+  raw_text: z.string(),
+  title: z.string(),
+  description: z.string(),
+  elements: ExtractedElement.array(),
+  raw_fields: z.discriminatedUnion('type', [RawTxField, RawBtnField]).array(),
+});
+
+type ExtractedJsonType = z.infer<typeof ExtractedObject>;
+
+export type ParsedPdf = { elements: FormElement[] };
+
+export const parseAlabamaNameChangeForm = (): ParsedPdf => {
+  const parsedPDF: ExtractedJsonType = ExtractedObject.parse(json);
+  return {
+    elements: parsedPDF.elements.flatMap(getElementInputs),
+  };
+};
+
+const getElementInputs = (element: ExtractedElement): FormElement[] => {
+  return element.inputs
+    .map((input: ExtractedInput) => {
+      if (input.input_type === 'Tx') {
+        return {
+          type: 'input',
+          id: input.input_params.output_id,
+          default: {},
+          data: {
+            text: input.input_params.text,
+            instructions: input.input_params.instructions,
+          },
+          required: true,
+        } satisfies FormElement<InputElement>;
+      }
+      return null as unknown as FormElement;
+    })
+    .filter((item): item is NonNullable<FormElement> => item !== null);
+};
+
+/*
+function parseJson(obj: ExtractedJsonType): Array<any> {
+  return parseElements(obj.elements);
+}
+
+function parseInputs(
+  inputs: ExtractedJsonType['elements'][0]['inputs']
+): Array<Record<string, any>> {
+  const output = inputs.reduce((acc: any[], input) => {
+    const params = input['input_params'];
+
+    // const formElementType should be 'Textfield' if inputType is 'Tx'
+    // const formElementType should be 'RadioGroup' if inputType is 'Btn'
+    // const formElementType should be 'Checkbox' if inputType is 'Ch'
+    // const formElementType should be 'Dropdown' if inputType is 'Dr'
+
+    if (input['input_type'] === 'Tx') {
+      const value: DocumentFieldValue = {
+        type: 'TextField', // modify api so we can use inputType directly here
+        //elementType: 'input',
+        //inputType: input['input_type'],
+        //inputText: params.text,
+        //inputTextStyle: params.text_style,
+        name: params.output_id,
+        label: params.output_id,
+        value: 'Short answer', // modify api to provide this
+        //inputPlaceholder: params.placeholder,
+        instructions: params.instructions,
+        required: true, // api should check if there's a mix, default to true? Can't all be false...
+        ///inputOptions: params.options,
+      };
+      acc.push(value);
+    }
+
+    return acc;
+  }, []);
+
+  return output;
+}
+
+function parseElements(
+  pdfElements: ExtractedJsonType['elements']
+): FormElement[] {
+  const output = pdfElements.reduce((acc, element) => {
+    const elementOutput = {
+      type: 'Paragraph',
+      name: element.id,
+      groupId: element.group_id,
+      value: element.element_params['text'],
+      elementTextStyle: element.element_params.text_style,
+      elementOptions: element.element_params.options,
+      elementType: element.element_params.elementType,
+    };
+
+    const parsedInputs = parseInputs(element['inputs']);
+    parsedInputs.forEach(input => {
+      input['groupId'] = element.group_id;
+    });
+
+    if (!element.element_params.text) {
+      acc.push(...parsedInputs);
+      return acc;
+    }
+
+    acc.push(elementOutput, ...parsedInputs);
+
+    return acc;
+  }, []);
+
+  pdfElements.map(pdfElement => {
+    const inputs = getElementInputs(pdfElement);
+  });
+
+  return output;
+}
+*/
diff --git a/packages/documents/src/suggestions.ts b/packages/documents/src/suggestions.ts
index f2f5c2692..4445199c0 100644
--- a/packages/documents/src/suggestions.ts
+++ b/packages/documents/src/suggestions.ts
@@ -1,4 +1,4 @@
-import { DocumentFieldMap } from '@atj/forms';
+import { type ParsedPdf, parseAlabamaNameChangeForm } from './pdf/mock-api';
 
 export type SuggestedForm = {
   id: string;
@@ -8,21 +8,21 @@ export type SuggestedForm = {
   value?: string;
   type?: 'text';
 }[];
-export const suggestFormDetails = (
-  docData: DocumentFieldMap
-): DocumentFieldMap => {
-  /*
+
+export const getSuggestedFormElementsFromCache = async (
+  rawData: Uint8Array
+): Promise<ParsedPdf | null> => {
   const cache = getFakeCache();
-  const hash = getObjectHash(docData);
-  const data = cache.get(hash);
-  */
-  return docData;
+  const hash = await getObjectHash(rawData);
+  return cache.get(hash);
 };
 
 const getFakeCache = () => {
-  const cache = {
+  const cache: Record<string, any> = {
     'hardcoded-hash': UD105_TEST_DATA,
-  } as { [key: string]: any };
+    '179be8c1c78b01ed7c45569912c2bb862ec3764617f908ebc29178e36fd6316d':
+      parseAlabamaNameChangeForm(),
+  };
   return {
     get(hashKey: string) {
       return cache[hashKey];
@@ -30,8 +30,59 @@ const getFakeCache = () => {
   };
 };
 
-const getObjectHash = (docData: any) => {
-  return 'hardcoded-hash';
+const getObjectHash = async (buffer: Uint8Array) => {
+  const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
+  const hashArray = new Uint8Array(hashBuffer);
+  const hashHex = hashArray.reduce(
+    (str, byte) => str + byte.toString(16).padStart(2, '0'),
+    ''
+  );
+  return hashHex;
+};
+
+export const AL_NAME_TEST_DATA = {
+  Radio_group_test: {
+    type: 'RadioGroup',
+    name: 'Radio_group_test',
+    label: 'Radio_group_test',
+    value: '',
+    groupId: 3,
+    instructions: 'Select something.',
+    required: true,
+  },
+  Some_random_key_name: {
+    type: 'Paragraph',
+    name: 'Some_random_key_name',
+    value: 'Your current name: ',
+    groupId: 3,
+  },
+  Current_First_Name1: {
+    type: 'TextField',
+    name: 'Current_First_Name1',
+    label: 'Current_First_Name1',
+    value: 'Short answer',
+    groupId: 3,
+    instructions: 'Type your current first name.',
+    required: true,
+  },
+  Current_Middle_Name1: {
+    type: 'TextField',
+    name: 'Current_Middle_Name1',
+    label: 'Current_Middle_Name1',
+    value: 'Short answer',
+    groupId: 3,
+    instructions: 'Type your current middle name.',
+    required: true,
+  },
+  Current_Last_Name1: {
+    type: 'TextField',
+    name: 'Current_Last_Name1',
+    label: 'Current_Last_Name1',
+    value: 'Short answer',
+    groupId: 3,
+    instructions: 'Type your current last name.',
+    required: true,
+  },
 };
 
 export const UD105_TEST_DATA = [
diff --git a/packages/forms/src/config/config.ts b/packages/forms/src/config/config.ts
index d23a1d00f..04b0a491b 100644
--- a/packages/forms/src/config/config.ts
+++ b/packages/forms/src/config/config.ts
@@ -1,5 +1,6 @@
 import { type FormConfig } from '.';
 import { inputConfig } from './elements/input';
+import { paragraphConfig } from './elements/paragraph';
 import { sequenceConfig } from './elements/sequence';
 
 // This configuration reflects what a user of this library would provide for
@@ -8,6 +9,7 @@ import { sequenceConfig } from './elements/sequence';
 export const defaultFormConfig: FormConfig = {
   elements: {
     input: inputConfig,
+    paragraph: paragraphConfig,
     sequence: sequenceConfig,
   },
 };
diff --git a/packages/forms/src/config/elements/fieldset.ts b/packages/forms/src/config/elements/fieldset.ts
new file mode 100644
index 000000000..e95139b4a
--- /dev/null
+++ b/packages/forms/src/config/elements/fieldset.ts
@@ -0,0 +1,37 @@
+import * as z from 'zod';
+
+import { type FormElementConfig } from '..';
+import { type FormElement, type FormElementId } from '../../element';
+import { type Pattern, createPromptForElement } from '../../pattern';
+import { safeZodParse } from '../../util/zod';
+
+export type FieldsetElement = FormElement<{
+  legend: string;
+  elements: FormElementId;
+}>;
+
+const fieldsetSchema = z.object({
+  legend: z.string(),
+  elements: z.array(z.string()),
+});
+
+export const fieldsetConfig: FormElementConfig<FieldsetElement> = {
+  acceptsInput: false,
+  initial: {
+    elements: [],
+  },
+  parseData: (_, obj) => {
+    return safeZodParse(fieldsetSchema, obj);
+  },
+  getChildren(element, elements) {
+    return element.data.elements.map(
+      (elementId: string) => elements[elementId]
+    );
+  },
+  createPrompt(config, session, element, options): Pattern[] {
+    return element.data.elements.map((elementId: string) => {
+      const element = session.form.elements[elementId];
+      return createPromptForElement(config, session, element, options);
+    });
+  },
+};
diff --git a/packages/forms/src/config/elements/input.ts b/packages/forms/src/config/elements/input.ts
index 11df6ead6..cc77ed57b 100644
--- a/packages/forms/src/config/elements/input.ts
+++ b/packages/forms/src/config/elements/input.ts
@@ -21,6 +21,7 @@ export const inputConfig: FormElementConfig<InputElement> = {
   initial: {
     text: '',
     initial: '',
+    instructions: '',
     required: true,
     maxLength: 128,
   },
@@ -44,6 +45,7 @@ export const inputConfig: FormElementConfig<InputElement> = {
         inputId: element.id,
         value: sessionValue,
         label: element.data.text,
+        instructions: element.data.instructions,
         required: element.data.required,
         ...extraAttributes,
       } as Pattern<TextInputPattern>,
diff --git a/packages/forms/src/config/elements/paragraph.ts b/packages/forms/src/config/elements/paragraph.ts
new file mode 100644
index 000000000..04eba2451
--- /dev/null
+++ b/packages/forms/src/config/elements/paragraph.ts
@@ -0,0 +1,35 @@
+import * as z from 'zod';
+
+import { type FormElementConfig } from '..';
+import { type FormElement } from '../../element';
+import { type Pattern, type ParagraphPattern } from '../../pattern';
+import { safeZodParse } from '../../util/zod';
+
+export type ParagraphElement = FormElement<{
+  text: string;
+  maxLength: number;
+}>;
+
+const createSchema = (data: ParagraphElement['data']) =>
+  z.string().max(data.maxLength);
+
+export const paragraphConfig: FormElementConfig<ParagraphElement> = {
+  acceptsInput: false,
+  initial: {
+    maxLength: 2048,
+    text: '',
+  },
+  parseData: (elementData, obj) => safeZodParse(createSchema(elementData), obj),
+  getChildren() {
+    return [];
+  },
+  createPrompt(_, session, element, options): Pattern[] {
+    return [
+      {
+        _elementId: element.id,
+        type: 'paragraph' as const,
+        text: element.data.text,
+      } as Pattern<ParagraphPattern>,
+    ];
+  },
+};
diff --git a/packages/forms/src/documents/index.ts b/packages/forms/src/documents/index.ts
index 35bc2ef8e..f035d44ea 100644
--- a/packages/forms/src/documents/index.ts
+++ b/packages/forms/src/documents/index.ts
@@ -4,6 +4,7 @@ export type DocumentFieldValue =
       name: string;
       label: string;
       value: string;
+      instructions?: string;
       maxLength?: number;
       required: boolean;
     }
@@ -12,6 +13,7 @@ export type DocumentFieldValue =
       name: string;
       label: string;
       value: boolean;
+      instructions?: string;
       required: boolean;
     }
   | {
@@ -19,6 +21,7 @@ export type DocumentFieldValue =
       name: string;
       label: string;
       value: string[];
+      instructions?: string;
       required: boolean;
     }
   | {
@@ -26,6 +29,24 @@ export type DocumentFieldValue =
       name: string;
       label: string;
       value: string[];
+      instructions?: string;
+      required: boolean;
+    }
+  | {
+      type: 'RadioGroup';
+      name: string;
+      options: string[];
+      label: string;
+      value: string;
+      instructions?: string;
+      required: boolean;
+    }
+  | {
+      type: 'Paragraph';
+      name: string;
+      options: string[];
+      label: string;
+      value: string;
       required: boolean;
     }
   | {
diff --git a/packages/forms/src/pattern.ts b/packages/forms/src/pattern.ts
index 0d6c52c60..44c0679b2 100644
--- a/packages/forms/src/pattern.ts
+++ b/packages/forms/src/pattern.ts
@@ -13,6 +13,14 @@ export type TextInputPattern = {
   value: string;
   label: string;
   required: boolean;
+  instructions?: string;
+  error?: string;
+};
+
+export type TextPrompt = {
+  type: 'text';
+  id: string;
+  value: string;
   error?: string;
 };
 
@@ -27,6 +35,11 @@ export type SubmissionConfirmationPattern = {
   table: { label: string; value: string }[];
 };
 
+export type ParagraphPattern = {
+  type: 'paragraph';
+  text: string;
+};
+
 export type Pattern<T = {}> = {
   _elementId: FormElementId;
   type: string;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 194854b48..05df76ce5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -84,7 +84,7 @@ importers:
     dependencies:
       '@astrojs/react':
         specifier: ^3.0.9
-        version: 3.0.9(@types/react-dom@18.2.14)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)(vite@5.0.12)
+        version: 3.0.9(@types/react-dom@18.2.14)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)(vite@5.1.3)
       '@atj/design':
         specifier: workspace:*
         version: link:../../packages/design
@@ -341,6 +341,9 @@ importers:
       pdf-lib:
         specifier: ^1.17.1
         version: 1.17.1
+      zod:
+        specifier: ^3.22.4
+        version: 3.22.4
     devDependencies:
       '@types/node':
         specifier: ^20.10.4
@@ -486,7 +489,7 @@ packages:
       prismjs: 1.29.0
     dev: false
 
-  /@astrojs/react@3.0.9(@types/react-dom@18.2.14)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)(vite@5.0.12):
+  /@astrojs/react@3.0.9(@types/react-dom@18.2.14)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)(vite@5.1.3):
     resolution: {integrity: sha512-31J5yF5p9yBFV1axBooLA9PB4B2+MYm7swWhtlezSsJiUNXRFo5Is9qI3teJ7cKgmaCv+ZA593Smskko0NGaDQ==}
     engines: {node: '>=18.14.1'}
     peerDependencies:
@@ -497,7 +500,7 @@ packages:
     dependencies:
       '@types/react': 18.2.37
       '@types/react-dom': 18.2.14
-      '@vitejs/plugin-react': 4.2.1(vite@5.0.12)
+      '@vitejs/plugin-react': 4.2.1(vite@5.1.3)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       ultrahtml: 1.5.2
@@ -6256,6 +6259,23 @@ packages:
       vite: 5.0.12(@types/node@20.11.16)
     transitivePeerDependencies:
       - supports-color
+    dev: true
+
+  /@vitejs/plugin-react@4.2.1(vite@5.1.3):
+    resolution: {integrity: sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.2.0 || ^5.0.0
+    dependencies:
+      '@babel/core': 7.23.7
+      '@babel/plugin-transform-react-jsx-self': 7.23.3(@babel/core@7.23.7)
+      '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.7)
+      '@types/babel__core': 7.20.5
+      react-refresh: 0.14.0
+      vite: 5.1.3(@types/node@20.11.16)
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
 
   /@vitest/coverage-c8@0.33.0(vitest@0.34.6):
     resolution: {integrity: sha512-DaF1zJz4dcOZS4k/neiQJokmOWqsGXwhthfmUdPGorXIQHjdPvV6JQSYhQDI41MyI8c+IieQUdIDs5XAMHtDDw==}
@@ -9148,7 +9168,7 @@ packages:
     dependencies:
       semver: 7.5.4
       shelljs: 0.8.5
-      typescript: 5.4.0-dev.20240220
+      typescript: 5.5.0-dev.20240226
     dev: false
 
   /dset@3.1.3:
@@ -17924,8 +17944,8 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
-  /typescript@5.4.0-dev.20240220:
-    resolution: {integrity: sha512-mUiEcRGUeqXn0/xKi0K01LrBOJ4D1zbn5oVpvofeuo/QUTS/y4+r46h34STyDGMc2KnMYJcWUt2XMalady2J1A==}
+  /typescript@5.5.0-dev.20240226:
+    resolution: {integrity: sha512-mLY9/pjzSCr7JLkMKHS3KQUKX+LPO9WWjiR+mRcWKcskSdMBZ0j1TPhk/zUyuBklOf3YX4orkvamNiZWZEK0CQ==}
     engines: {node: '>=14.17'}
     hasBin: true
     dev: false
diff --git a/tsconfig.json b/tsconfig.json
index b4874b52b..4810dcc6e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,13 +5,21 @@
     "declaration": true,
     "esModuleInterop": true,
     "isolatedModules": false,
-    "module": "CommonJS",
+    "module": "ESNext",
     "moduleResolution": "node",
     "noErrorTruncation": true,
     "noImplicitAny": true,
     "strict": true,
-    "target": "ESNext"
+    "target": "ESNext",
+    "resolveJsonModule": true,
   },
+  "files": [
+    // temporary for mock-api
+    "./packages/documents/src/pdf/al_name_change.json"
+  ],
+  "include": [
+    "./packages/*/src/**/*.json",
+  ],
   "exclude": [
     "node_modules",
     "**/*/lib",