From ce75125a0546e630d540c81d1e18c54c5e4a83b4 Mon Sep 17 00:00:00 2001
From: Khayal Alasgarov <khayal.alasgarov@gsa.gov>
Date: Wed, 5 Mar 2025 20:02:47 -0800
Subject: [PATCH] feat: create address pattern TCKT-277 (#476)

* feat: create address pattern TCKT-277

* feat: create edit component for address pattern TCKT-277

* feat: add address pattern props types TCKT-277

* feat: create address pattern svg icon TCKT-277

* feat: implement config schema and user input validation logic TCKT-277

* chore: clean up unnecessary logs TCKT-277

* feat: update required sign to be black color TCKT-277

* feat: update mailing address not to have Google Plus Code input TCKT-277

* feat: add address pattern to dropdown menu TCKT-277

* test: add tests for address config schema and user input validation TCKT-277

* test(storybook): add story tests for Address component TCKT-277

* refactor: rebase and update inport path for address pattern to gsa-tts forms TCKT-277

* refactor: move stateTerritoryOrMilitaryPostList to @gsa-tts/forms-core for better modularity and reuse TCKT-277

* feat: update address component to hide mailing address based on checkbox status TCKT-277

* feat: add isMailingAddressSameAsPhysical flag to address component props TCKT-277

* feat: update address icon for add element dropdown menu TCKT-277

* refactor: update add element dropdown button styles TCKT-277

---------

Co-authored-by: Daniel Naab <daniel.naab@gsa.gov>
---
 packages/common/src/locales/en/app.ts         |   7 +
 .../components/Address/Address.stories.tsx    | 204 +++++++++
 .../src/Form/components/Address/index.tsx     | 426 ++++++++++++------
 .../FormEdit/AddPatternDropdown.tsx           |  16 +-
 .../AddressPatternEdit.stories.tsx            |  69 +++
 .../components/AddressPatternEdit/index.tsx   | 116 +++++
 .../FormManager/FormEdit/components/index.ts  |   2 +
 .../FormEdit/formEditStyles.module.css        |   3 +-
 packages/forms/src/components.ts              |  27 ++
 packages/forms/src/index.ts                   |   1 +
 packages/forms/src/pattern.ts                 |   2 +-
 .../src/patterns/address/address.test.ts      | 106 +++++
 packages/forms/src/patterns/address/index.ts  | 383 ++++++++++------
 .../src/patterns/package-download/index.ts    |   2 +-
 packages/forms/src/patterns/repeater/index.ts |   2 +-
 .../forms/src/patterns/repeater/submit.ts     |   2 -
 16 files changed, 1082 insertions(+), 286 deletions(-)
 create mode 100644 packages/design/src/Form/components/Address/Address.stories.tsx
 create mode 100644 packages/design/src/FormManager/FormEdit/components/AddressPatternEdit/AddressPatternEdit.stories.tsx
 create mode 100644 packages/design/src/FormManager/FormEdit/components/AddressPatternEdit/index.tsx
 create mode 100644 packages/forms/src/patterns/address/address.test.ts

diff --git a/packages/common/src/locales/en/app.ts b/packages/common/src/locales/en/app.ts
index 934782673..505be9cfe 100644
--- a/packages/common/src/locales/en/app.ts
+++ b/packages/common/src/locales/en/app.ts
@@ -7,6 +7,13 @@ const defaults = {
 
 export const en = {
   patterns: {
+    address: {
+      ...defaults,
+      displayName: 'Address',
+      fieldLabel: 'Address label',
+      legend: 'Physical address',
+      errorTextMustContainChar: 'String must contain at least 1 character(s)',
+    },
     attachment: {
       ...defaults,
       displayName: 'Attachment',
diff --git a/packages/design/src/Form/components/Address/Address.stories.tsx b/packages/design/src/Form/components/Address/Address.stories.tsx
new file mode 100644
index 000000000..a7a9ce98c
--- /dev/null
+++ b/packages/design/src/Form/components/Address/Address.stories.tsx
@@ -0,0 +1,204 @@
+import React from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import AddressPattern from './index.js';
+import { stateTerritoryOrMilitaryPostList } from '@gsa-tts/forms-core';
+
+const meta: Meta<typeof AddressPattern> = {
+  title: 'patterns/Address',
+  component: AddressPattern,
+  decorators: [
+    Story => {
+      const formMethods = useForm({
+        defaultValues: {
+          'address.physicalStreetAddress': '',
+          'address.physicalStreetAddress2': '',
+          'address.physicalCity': '',
+          'address.physicalStateTerritoryOrMilitaryPost': '',
+          'address.physicalZipCode': '',
+          'address.mailingStreetAddress': '',
+          'address.mailingStreetAddress2': '',
+          'address.mailingCity': '',
+          'address.mailingStateTerritoryOrMilitaryPost': '',
+          'address.mailingZipCode': '',
+        },
+      });
+      return (
+        <div style={{ padding: '10px' }}>
+          <FormProvider {...formMethods}>
+            <Story />
+          </FormProvider>
+        </div>
+      );
+    },
+  ],
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+const baseChildProps = {
+  physicalStreetAddress: {
+    type: 'input' as const,
+    inputId: 'address.physicalStreetAddress',
+    value: '',
+    label: 'Street Address',
+    required: false,
+  },
+  physicalStreetAddress2: {
+    type: 'input' as const,
+    inputId: 'address.physicalStreetAddress2',
+    value: '',
+    label: 'Street Address 2',
+    required: false,
+  },
+  physicalCity: {
+    type: 'input' as const,
+    inputId: 'address.physicalCity',
+    value: '',
+    label: 'City',
+    required: true,
+  },
+  physicalStateTerritoryOrMilitaryPost: {
+    type: 'select' as const,
+    inputId: 'address.physicalStateTerritoryOrMilitaryPost',
+    value: '',
+    label: 'State',
+    required: true,
+    options: stateTerritoryOrMilitaryPostList,
+  },
+  physicalZipCode: {
+    type: 'input' as const,
+    inputId: 'address.physicalZipCode',
+    value: '',
+    label: 'ZIP Code',
+    required: false,
+    pattern: '[\\d]{5}(-[\\d]{4})?',
+  },
+  physicalUrbanizationCode: {
+    type: 'input' as const,
+    inputId: 'address.physicalUrbanizationCode',
+    value: '',
+    label: 'Urbanization Code',
+    required: false,
+  },
+  physicalGooglePlusCode: {
+    type: 'input' as const,
+    inputId: 'address.physicalGooglePlusCode',
+    value: '',
+    label: 'Google Plus Code',
+    required: false,
+  },
+  mailingStreetAddress: {
+    type: 'input' as const,
+    inputId: 'address.mailingStreetAddress',
+    value: '',
+    label: 'Mailing Street Address',
+    required: true,
+  },
+  mailingStreetAddress2: {
+    type: 'input' as const,
+    inputId: 'address.mailingStreetAddress2',
+    value: '',
+    label: 'Mailing Street Address 2',
+    required: false,
+  },
+  mailingCity: {
+    type: 'input' as const,
+    inputId: 'address.mailingCity',
+    value: '',
+    label: 'Mailing City',
+    required: true,
+  },
+  mailingStateTerritoryOrMilitaryPost: {
+    type: 'select' as const,
+    inputId: 'address.mailingStateTerritoryOrMilitaryPost',
+    value: '',
+    label: 'Mailing State',
+    required: true,
+    options: stateTerritoryOrMilitaryPostList,
+  },
+  mailingZipCode: {
+    type: 'input' as const,
+    inputId: 'address.mailingZipCode',
+    value: '',
+    label: 'Mailing ZIP Code',
+    required: false,
+    pattern: '[\\d]{5}(-[\\d]{4})?',
+  },
+  mailingUrbanizationCode: {
+    type: 'input' as const,
+    inputId: 'address.mailingUrbanizationCode',
+    value: '',
+    label: 'Mailing Urbanization Code',
+    required: false,
+  },
+};
+
+export const Default: StoryObj<typeof AddressPattern> = {
+  args: {
+    _patternId: '',
+    type: 'address',
+    childProps: {
+      ...baseChildProps,
+    },
+  },
+};
+
+export const WithError: StoryObj<typeof AddressPattern> = {
+  args: {
+    _patternId: '',
+    type: 'address',
+    childProps: {
+      ...baseChildProps,
+      physicalStreetAddress: {
+        ...baseChildProps.physicalStreetAddress,
+        error: {
+          type: 'custom',
+          message: 'Test - Wrong street address',
+        },
+      },
+      physicalZipCode: {
+        ...baseChildProps.physicalZipCode,
+        error: {
+          type: 'custom',
+          message: 'Test - Wrong zip code',
+        },
+      },
+    },
+    error: {
+      physical: {
+        type: 'custom',
+        message: 'This field has an error',
+      },
+      mailing: {
+        type: 'custom',
+        message: 'This field has an error',
+      },
+    },
+  },
+};
+
+export const WithMailingAddress: StoryObj<typeof AddressPattern> = {
+  args: {
+    _patternId: '',
+    type: 'address',
+    childProps: {
+      ...baseChildProps,
+      mailingStreetAddress: {
+        ...baseChildProps.mailingStreetAddress,
+        required: true,
+      },
+      mailingCity: {
+        ...baseChildProps.mailingCity,
+        required: true,
+      },
+      mailingStateTerritoryOrMilitaryPost: {
+        ...baseChildProps.mailingStateTerritoryOrMilitaryPost,
+        required: true,
+      },
+    },
+    addMailingAddress: true,
+  },
+};
diff --git a/packages/design/src/Form/components/Address/index.tsx b/packages/design/src/Form/components/Address/index.tsx
index ab9b92c52..03524fc83 100644
--- a/packages/design/src/Form/components/Address/index.tsx
+++ b/packages/design/src/Form/components/Address/index.tsx
@@ -1,150 +1,312 @@
 import classNames from 'classnames';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { type AddressComponentProps } from '@gsa-tts/forms-core';
 
 import { type PatternComponent } from '../../index.js';
 
-const Address: PatternComponent<AddressComponentProps> = props => {
-  const { register } = useFormContext();
+const AddressPattern: PatternComponent<AddressComponentProps> = ({
+  childProps, // Child fields have their own errors
+  errors, // Top level pattern errors
+  legend,
+  required,
+  _patternId,
+  addMailingAddress,
+  isMailingAddressSameAsPhysical,
+}) => {
+  const { register, setValue, getValues, watch } = useFormContext();
+  const [sameAsPhysical, setSameAsPhysical] = useState(
+    isMailingAddressSameAsPhysical
+  );
+  const [childPatternsProps, setChildPatternsProps] = useState(childProps);
+
+  const physicalAddressError = errors?.physical; // Physical address section error
+  const [mailingAddressError, setMailingAddressError] = useState(
+    errors?.mailing
+  ); // Mailing address section error
+
+  const physicalAddressKeys = Object.keys(childPatternsProps)
+    .filter(key => key.startsWith('physical'))
+    .map(key => `${_patternId}.${key}`);
+  const physicalAddressValues = watch(physicalAddressKeys);
+
+  const getAriaDescribedBy = (
+    errorId: string | null,
+    hintId: string | null
+  ): string | undefined => {
+    const ids = [errorId, hintId].filter(Boolean).join(' ');
+    return ids || undefined;
+  };
+
+  const handleSameAsPhysicalChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setSameAsPhysical(event.target.checked);
+    if (event.target.checked) {
+      copyPhysicalToMailing();
+    } else {
+      resetMailingAddress();
+    }
+  };
+
+  const copyPhysicalToMailing = () => {
+    const formValues = getValues();
+    let addressId;
+    let addressValues;
+
+    for (const key of Object.keys(formValues)) {
+      const value = formValues[key];
+      if (
+        value &&
+        typeof value === 'object' &&
+        'physicalStreetAddress' in value
+      ) {
+        addressValues = value;
+        addressId = key;
+        break;
+      }
+    }
+
+    if (addressValues && addressId) {
+      Object.entries(addressValues).forEach(([key, value]) => {
+        if (key.startsWith('physical') && !key.includes('GooglePlusCode')) {
+          const mailingKey = key.replace('physical', 'mailing');
+          setValue(`${addressId}.${mailingKey}`, value, {
+            shouldValidate: true,
+            shouldDirty: true,
+          });
+        }
+      });
+    }
+  };
+
+  const resetMailingAddress = () => {
+    const formValues = getValues();
+    let addressId;
+    let addressValues;
+
+    for (const key of Object.keys(formValues)) {
+      const value = formValues[key];
+      if (
+        value &&
+        typeof value === 'object' &&
+        'physicalStreetAddress' in value
+      ) {
+        addressValues = value;
+        addressId = key;
+        break;
+      }
+    }
+
+    if (addressValues && addressId) {
+      Object.entries(addressValues).forEach(([key]) => {
+        if (key.startsWith('mailing')) {
+          setValue(`${addressId}.${key}`, '', {
+            shouldValidate: true,
+            shouldDirty: true,
+          });
+        }
+      });
+
+      // Reset the error for the mailing address
+      setMailingAddressError(undefined);
+
+      // Reset the errors for the mailing address child patterns
+      const newChildPatternsProps = { ...childPatternsProps };
+      Object.keys({ ...childPatternsProps }).forEach(key => {
+        if (key.startsWith('mailing')) {
+          newChildPatternsProps[key].error = undefined;
+        }
+      });
+
+      setChildPatternsProps(newChildPatternsProps);
+    }
+  };
+
+  useEffect(() => {
+    if (sameAsPhysical) {
+      copyPhysicalToMailing();
+    }
+  }, [physicalAddressValues, sameAsPhysical]);
+
+  const formatZipCode = (value: string) => {
+    // Remove all non-digit characters
+    const digits = value.replace(/\D/g, '');
+    // Format as 99999-9999
+    if (digits.length > 5) {
+      return `${digits.slice(0, 5)}-${digits.slice(5, 9)}`;
+    }
+    return digits;
+  };
+
+  const handleZipCodeChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+    inputId: string
+  ) => {
+    const formattedValue = formatZipCode(event.target.value);
+    setValue(inputId, formattedValue);
+  };
+
+  const renderFields = (prefix: string) => {
+    return Object.entries(childPatternsProps).map(([key, props]) => {
+      if (!key.startsWith(prefix)) return null;
+      return (
+        <React.Fragment key={key}>
+          <label className={classNames('usa-label')} htmlFor={props.inputId}>
+            {props.label}
+            {props.required && <span className="required-indicator">*</span>}
+          </label>
+          {props.error && (
+            <div
+              className="usa-error-message"
+              id={`error-${props.inputId}`}
+              role="alert"
+            >
+              {props.error?.message}
+            </div>
+          )}
+          {props.type === 'input' ? (
+            key.includes('ZipCode') ? (
+              <input
+                className={classNames('usa-input', {
+                  'usa-input--medium': key.includes('ZipCode'),
+                  'usa-input--error': !!props.error,
+                })}
+                defaultValue={props.value}
+                {...register(props.inputId)}
+                onChange={e => handleZipCodeChange(e, props.inputId)}
+                aria-describedby={getAriaDescribedBy(
+                  props.error ? `error-${props.inputId}` : null,
+                  props.hint ? `hint-${props.inputId}` : null
+                )}
+              />
+            ) : (
+              <input
+                className={classNames('usa-input', {
+                  'usa-input--medium': key.includes('ZipCode'),
+                  'usa-input--error': !!props.error,
+                })}
+                defaultValue={props.value}
+                {...register(props.inputId)}
+                {...('pattern' in props ? { pattern: props.pattern } : {})}
+                aria-describedby={getAriaDescribedBy(
+                  props.error ? `error-${props.inputId}` : null,
+                  props.hint ? `hint-${props.inputId}` : null
+                )}
+              />
+            )
+          ) : (
+            <select
+              className={classNames('usa-select', {
+                'usa-input--error': !!props.error,
+              })}
+              defaultValue={props.value}
+              aria-describedby={getAriaDescribedBy(
+                props.error ? `error-${props.inputId}` : null,
+                props.hint ? `hint-${props.inputId}` : null
+              )}
+              {...register(props.inputId)}
+            >
+              <option value="">- Select -</option>
+              {props.options?.map((option, index) => (
+                <option key={index} value={option.abbr}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          )}
+        </React.Fragment>
+      );
+    });
+  };
+
   return (
     <fieldset className="usa-fieldset width-full">
-      <legend className="usa-legend text-bold text-uppercase line-height-body-4">
-        Mailing address
-      </legend>
-      <label
-        className={classNames('usa-label', {
-          'usa-label--error': props.childProps.streetAddress.error,
-        })}
-        htmlFor={props.childProps.streetAddress.inputId}
-      >
-        {props.childProps.streetAddress.label}
-        {props.childProps.streetAddress.required && (
-          <abbr title="required" className="usa-hint usa-hint--required">
-            *
-          </abbr>
-        )}
-      </label>
-      <input
-        className="usa-input"
-        defaultValue={props.childProps.streetAddress.value}
-        {...register(props.childProps.streetAddress.inputId, {
-          //required: props.childProps.streetAddress.required,
-        })}
-      />
-      <label
-        className={classNames('usa-label', {
-          'usa-label--error': props.childProps.streetAddress2.error,
-        })}
-        htmlFor={props.childProps.streetAddress2.inputId}
-      >
-        {props.childProps.streetAddress2.label}
-        {props.childProps.streetAddress2.required && (
-          <abbr title="required" className="usa-hint usa-hint--required">
-            *
-          </abbr>
-        )}
-      </label>
-      <input
-        className="usa-input"
-        defaultValue={props.childProps.streetAddress2.value}
-        {...register(props.childProps.streetAddress2.inputId, {
-          //required: props.childProps.streetAddress2.required,
-        })}
-      />
-      <label
-        className={classNames('usa-label', {
-          'usa-label--error': props.childProps.city.error,
-        })}
-        htmlFor="city"
-      >
-        {props.childProps.city.label}
-        {props.childProps.city.required && (
-          <abbr title="required" className="usa-hint usa-hint--required">
-            *
-          </abbr>
-        )}
-      </label>
-      <input
-        className="usa-input"
-        defaultValue={props.childProps.city.value}
-        {...register(props.childProps.city.inputId, {
-          //required: props.childProps.city.required,
+      <div
+        className={classNames('usa-form-group margin-top-2', {
+          'usa-form-group--error': physicalAddressError?.type,
         })}
-      />
-      <label
-        className={classNames('usa-label', {
-          'usa-label--error':
-            props.childProps.stateTerritoryOrMilitaryPost.error,
-        })}
-        htmlFor={props.childProps.stateTerritoryOrMilitaryPost.inputId}
       >
-        {props.childProps.stateTerritoryOrMilitaryPost.label}
-        {props.childProps.stateTerritoryOrMilitaryPost.required && (
-          <abbr title="required" className="usa-hint usa-hint--required">
-            *
-          </abbr>
-        )}
-      </label>
-      <select
-        className="usa-select"
-        defaultValue={props.childProps.stateTerritoryOrMilitaryPost.value}
-        {...register(props.childProps.stateTerritoryOrMilitaryPost.inputId, {
-          //required: props.childProps.stateTerritoryOrMilitaryPost.required,
-        })}
-      >
-        <option value="">- Select -</option>
-        {props.childProps.stateTerritoryOrMilitaryPost.options.map(
-          (jurisdiction, index) => (
-            <option key={index} value={jurisdiction.abbr}>
-              {jurisdiction.label}
-            </option>
-          )
-        )}
-      </select>
-      <label
-        className={classNames('usa-label', {
-          'usa-label--error': props.childProps.zipCode.error,
+        <div className={classNames('usa-form-group margin-top-2')}>
+          <legend
+            className={classNames('usa-legend text-bold', {
+              'usa-legend--error': physicalAddressError?.type,
+            })}
+          >
+            {legend || 'Physical address'}
+            {required && <span className="required-indicator">*</span>}
+          </legend>
+          <span className="usa-hint pb-2 ">
+            Required fields are marked with an asterisk (*).
+          </span>
+          {physicalAddressError && (
+            <div
+              className="usa-error-message"
+              id={'error-' + _patternId}
+              role="alert"
+            >
+              {physicalAddressError?.message}
+            </div>
+          )}
+          {renderFields('physical')}
+        </div>
+      </div>
+      <div
+        className={classNames('usa-form-group margin-top-2', {
+          'usa-form-group--error': mailingAddressError && !sameAsPhysical,
         })}
-        htmlFor={props.childProps.zipCode.inputId}
       >
-        {props.childProps.zipCode.label}
-        {props.childProps.zipCode.required && (
-          <abbr title="required" className="usa-hint usa-hint--required">
-            *
-          </abbr>
+        {addMailingAddress && (
+          <div className="usa-checkbox margin-top-5">
+            <input
+              className="usa-checkbox__input"
+              type="checkbox"
+              id={`${_patternId}.isMailingAddressSameAsPhysical`}
+              defaultChecked={sameAsPhysical}
+              {...register(`${_patternId}.isMailingAddressSameAsPhysical`)}
+              onChange={handleSameAsPhysicalChange}
+            />
+            <label
+              className="usa-checkbox__label"
+              htmlFor={`${_patternId}.isMailingAddressSameAsPhysical`}
+            >
+              Mailing address is same as physical address
+            </label>
+          </div>
         )}
-      </label>
-      <input
-        className="usa-input usa-input--medium"
-        pattern="[\d]{5}(-[\d]{4})?"
-        defaultValue={props.childProps.zipCode.value}
-        {...register(props.childProps.zipCode.inputId, {
-          //required: props.childProps.zipCode.required,
-        })}
-      />
-      <label
-        className={classNames('usa-label', {
-          'usa-label--error': props.childProps.urbanizationCode.error,
-        })}
-        htmlFor={props.childProps.urbanizationCode.inputId}
-      >
-        {props.childProps.urbanizationCode.label}
-        {props.childProps.urbanizationCode.required && (
-          <abbr title="required" className="usa-hint usa-hint--required">
-            *
-          </abbr>
+        {addMailingAddress && (
+          <div
+            className={classNames('usa-form-group margin-top-2', {
+              'usa-sr-only': sameAsPhysical, // Visually hide when sameAsPhysical is true
+            })}
+          >
+            <legend
+              className={classNames('usa-legend text-bold', {
+                'usa-legend--error': mailingAddressError,
+              })}
+            >
+              Mailing address
+              {required && <span className="required-indicator">*</span>}
+            </legend>
+            <span className="usa-hint pb-2 ">
+              Required fields are marked with an asterisk (*).
+            </span>
+            {mailingAddressError && (
+              <div
+                className="usa-error-message"
+                id={'error-' + _patternId}
+                role="alert"
+              >
+                {mailingAddressError?.message}
+              </div>
+            )}
+            {renderFields('mailing')}
+          </div>
         )}
-      </label>
-      <input
-        className="usa-input"
-        defaultValue={props.childProps.urbanizationCode.value}
-        {...register(props.childProps.urbanizationCode.inputId, {
-          //required: props.childProps.urbanizationCode.required,
-        })}
-      />
+      </div>
     </fieldset>
   );
 };
-export default Address;
+
+export default AddressPattern;
diff --git a/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx
index 1ef9bd79b..f38e00a86 100644
--- a/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx
+++ b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx
@@ -15,11 +15,11 @@ import classNames from 'classnames';
 // eslint-disable-next-line  @typescript-eslint/no-explicit-any
 const icons: Record<string, string | any> = {
   'attachment-icon.svg': '#attach_file',
+  'address-icon.svg': '#home',
   'block-icon.svg': blockIcon,
   'checkbox-icon.svg': checkboxIcon,
   'date-icon.svg': '#calendar_today',
   'dropdown-icon.svg': '#expand_more',
-  'dropdownoption-icon.svg': '#expand_more',
   'email-icon.svg': '#alternate_email',
   'gender-id-icon.svg': '#person',
   'long-answer-icon.svg': longAnswerIcon,
@@ -33,6 +33,7 @@ const icons: Record<string, string | any> = {
   'template-icon.svg': templateIcon,
   'add-element-icon.svg': '#add_circle',
   'add-arrow-down-icon.svg': '#arrow_drop_down',
+  'package-download-icon.svg': '#file_download',
 };
 
 const getIconPath = (iconPath: string): string => {
@@ -113,6 +114,7 @@ const sidebarPatterns: DropdownPattern[] = [
   //   defaultFormConfig.patterns['gender-id'],
   //   'Personal information',
   // ],
+  ['address', defaultFormConfig.patterns['address'], 'Personal information'],
   ['fieldset', defaultFormConfig.patterns['fieldset'], 'Form structure'],
   ['repeater', defaultFormConfig.patterns['repeater'], 'Form structure'],
   ['page', defaultFormConfig.patterns['page'], 'Form structure'],
@@ -149,10 +151,10 @@ export const SidebarAddPatternMenuItem = ({
       patternSelected={patternSelected}
     >
       <button
-        className={`${styles.dropdownButton} tablet:width-full text-left width-auto text-base-darkest text-normal padding-0 bg-white border-0 cursor-pointer margin-bottom-3`}
+        className={`${styles.dropdownButton} display-flex flex-align-center text-base-darkest bg-white border-0 cursor-pointer margin-bottom-3`}
         onClick={() => setIsOpen(!isOpen)}
       >
-        <span className="tablet:display-inline-block tablet:width-auto tablet:margin-right-1 display-block width-full text-ttop text-center">
+        <span className="display-flex flex-align-center margin-right-1">
           <svg
             className="usa-icon--size-3"
             aria-hidden="true"
@@ -162,12 +164,10 @@ export const SidebarAddPatternMenuItem = ({
             <use xlinkHref={getIconPath('add-element-icon.svg')}></use>
           </svg>
         </span>
-        <span className="display-inline-block text-ttop tablet:width-auto text-center">
-          <span className="display-inline-block text-ttop margin-right-1">
-            {title}
-          </span>
+        <span className="display-flex flex-align-center">
+          <span className="display-inline-block margin-right-1">{title}</span>
           <svg
-            className="usa-icon"
+            className="usa-icon--size-3"
             aria-hidden="true"
             focusable="false"
             role="img"
diff --git a/packages/design/src/FormManager/FormEdit/components/AddressPatternEdit/AddressPatternEdit.stories.tsx b/packages/design/src/FormManager/FormEdit/components/AddressPatternEdit/AddressPatternEdit.stories.tsx
new file mode 100644
index 000000000..c6ee179c0
--- /dev/null
+++ b/packages/design/src/FormManager/FormEdit/components/AddressPatternEdit/AddressPatternEdit.stories.tsx
@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent } from '@storybook/test';
+import { within } from '@testing-library/react';
+
+import { type AddressPattern } from '@gsa-tts/forms-core';
+import { createPatternEditStoryMeta } from '../common/story-helper.js';
+import FormEdit from '../../index.js';
+import { enLocale as message } from '@gsa-tts/forms-common';
+
+const pattern: AddressPattern = {
+  id: 'address-1',
+  type: 'address',
+  data: {
+    legend: message.patterns.address.displayName,
+    required: false,
+    addMailingAddress: false,
+  },
+};
+
+const storyConfig: Meta = {
+  title: 'Edit components/AddressPattern',
+  ...createPatternEditStoryMeta({
+    pattern,
+  }),
+} as Meta<typeof FormEdit>;
+
+export default storyConfig;
+
+export const Basic: StoryObj<typeof FormEdit> = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const updatedLegend = 'Address Legend Update';
+
+    await userEvent.click(
+      canvas.getByText(message.patterns.address.displayName)
+    );
+
+    const legendInput = canvas.getByLabelText(
+      message.patterns.address.fieldLabel
+    );
+    await userEvent.clear(legendInput);
+    await userEvent.type(legendInput, updatedLegend);
+
+    const form = legendInput?.closest('form');
+    form?.requestSubmit();
+
+    await expect(await canvas.findByText(updatedLegend)).toBeInTheDocument();
+  },
+};
+
+export const Error: StoryObj<typeof FormEdit> = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.click(
+      canvas.getByText(message.patterns.address.displayName)
+    );
+
+    const legendInput = canvas.getByLabelText(
+      message.patterns.address.fieldLabel
+    );
+    await userEvent.clear(legendInput);
+    legendInput.blur();
+
+    await expect(
+      await canvas.findByText(message.patterns.address.errorTextMustContainChar)
+    ).toBeInTheDocument();
+  },
+};
diff --git a/packages/design/src/FormManager/FormEdit/components/AddressPatternEdit/index.tsx b/packages/design/src/FormManager/FormEdit/components/AddressPatternEdit/index.tsx
new file mode 100644
index 000000000..051cc3680
--- /dev/null
+++ b/packages/design/src/FormManager/FormEdit/components/AddressPatternEdit/index.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import { type AddressComponentProps } from '@gsa-tts/forms-core';
+import { type AddressPattern } from '@gsa-tts/forms-core';
+
+import Address from '../../../../Form/components/Address/index.js';
+import { PatternEditComponent } from '../../types.js';
+
+import { PatternEditActions } from '../common/PatternEditActions.js';
+import { PatternEditForm } from '../common/PatternEditForm.js';
+import { usePatternEditFormContext } from '../common/hooks.js';
+import { enLocale as message } from '@gsa-tts/forms-common';
+import styles from '../../formEditStyles.module.css';
+
+const AddressPatternEdit: PatternEditComponent<AddressComponentProps> = ({
+  context,
+  focus,
+  previewProps,
+}) => {
+  return (
+    <>
+      {focus ? (
+        <PatternEditForm
+          pattern={focus.pattern}
+          editComponent={<EditComponent pattern={focus.pattern} />}
+        ></PatternEditForm>
+      ) : (
+        <div
+          className={`${styles.addressPattern} padding-left-3 padding-bottom-3 padding-right-3`}
+        >
+          <Address context={context} {...previewProps} />
+        </div>
+      )}
+    </>
+  );
+};
+
+const EditComponent = ({ pattern }: { pattern: AddressPattern }) => {
+  const { fieldId, getFieldState, register } =
+    usePatternEditFormContext<AddressPattern>(pattern.id);
+  const legend = getFieldState('legend');
+  const addMailingAddress = getFieldState('addMailingAddress');
+
+  return (
+    <div className="grid-row grid-gap">
+      <div className="tablet:grid-col-12 mobile-lg:grid-col-12 margin-bottom-2">
+        <label
+          className={classnames('usa-label', {
+            'usa-label--error': legend.error,
+          })}
+        >
+          {message.patterns.address.fieldLabel}
+          {legend.error ? (
+            <span className="usa-error-message" role="alert">
+              {legend.error.message}
+            </span>
+          ) : null}
+          <input
+            className="usa-input"
+            id={fieldId('legend')}
+            defaultValue={pattern.data.legend}
+            {...register('legend')}
+            type="text"
+            autoFocus
+          />
+        </label>
+        <span className="usa-checkbox">
+          <input
+            style={{ display: 'inline-block' }}
+            className="usa-checkbox__input bg-primary-lighter"
+            type="checkbox"
+            id={fieldId('addMailingAddress')}
+            {...register('addMailingAddress')}
+            defaultChecked={pattern.data.addMailingAddress}
+          />
+          <label
+            style={{ display: 'inline-block' }}
+            className="usa-checkbox__label"
+            htmlFor={fieldId('addMailingAddress')}
+          >
+            Add Mailing Address
+          </label>
+          {addMailingAddress.error && (
+            <span className="usa-error-message" role="alert">
+              {addMailingAddress.error.message}
+            </span>
+          )}
+        </span>
+      </div>
+      <div className="grid-col-12">
+        <PatternEditActions>
+          <span className="usa-checkbox">
+            <input
+              style={{ display: 'inline-block' }}
+              className="usa-checkbox__input bg-primary-lighter"
+              type="checkbox"
+              id={fieldId('required')}
+              {...register('required')}
+              defaultChecked={pattern.data.required}
+            />
+            <label
+              style={{ display: 'inline-block' }}
+              className="usa-checkbox__label"
+              htmlFor={fieldId('required')}
+            >
+              Required
+            </label>
+          </span>
+        </PatternEditActions>
+      </div>
+    </div>
+  );
+};
+
+export default AddressPatternEdit;
diff --git a/packages/design/src/FormManager/FormEdit/components/index.ts b/packages/design/src/FormManager/FormEdit/components/index.ts
index 75e329e3a..a82bda81f 100644
--- a/packages/design/src/FormManager/FormEdit/components/index.ts
+++ b/packages/design/src/FormManager/FormEdit/components/index.ts
@@ -3,6 +3,7 @@ import {
   type EditComponentForPattern,
 } from '../types.js';
 
+import AddressPatternEdit from './AddressPatternEdit/index.js';
 import AttachmentPatternEdit from './AttachmentPatternEdit/index.js';
 import CheckboxPatternEdit from './CheckboxPatternEdit/index.js';
 import DateOfBirthPatternEdit from './DateOfBirthPatternEdit/index.js';
@@ -27,6 +28,7 @@ import SubmissionConfirmationEdit from './SubmissionConfirmationEdit.js';
 import TextAreaPatternEdit from './TextAreaPatternEdit/index.js';
 
 export const defaultPatternEditComponents: EditComponentForPattern = {
+  address: AddressPatternEdit as PatternEditComponent,
   attachment: AttachmentPatternEdit as PatternEditComponent,
   checkbox: CheckboxPatternEdit as PatternEditComponent,
   'date-of-birth': DateOfBirthPatternEdit as PatternEditComponent,
diff --git a/packages/design/src/FormManager/FormEdit/formEditStyles.module.css b/packages/design/src/FormManager/FormEdit/formEditStyles.module.css
index 954badc5f..5808f7298 100644
--- a/packages/design/src/FormManager/FormEdit/formEditStyles.module.css
+++ b/packages/design/src/FormManager/FormEdit/formEditStyles.module.css
@@ -62,7 +62,8 @@
 .draggableListItemWrapper .ssnPattern legend,
 .draggableListItemWrapper .genderIdPattern legend,
 .draggableListItemWrapper .emailInputPattern legend,
-.draggableListItemWrapper .namePattern legend {
+.draggableListItemWrapper .namePattern legend,
+.draggableListItemWrapper .addressPattern legend {
   padding-left: 0;
 }
 
diff --git a/packages/forms/src/components.ts b/packages/forms/src/components.ts
index fe0fc8e9e..fb29e8d36 100644
--- a/packages/forms/src/components.ts
+++ b/packages/forms/src/components.ts
@@ -8,6 +8,7 @@ import {
 } from './pattern.js';
 import { type FormSession, nullSession, sessionIsComplete } from './session.js';
 import { type ActionName } from './submission.js';
+import { stateTerritoryOrMilitaryPostList } from './patterns/address/jurisdictions.js';
 
 export type PackageDownloadProps = PatternProps<{
   type: 'package-download';
@@ -35,6 +36,32 @@ export type TextAreaProps = PatternProps<{
   maxLength: number;
 }>;
 
+export type AddressFieldProps = {
+  type: 'input' | 'select';
+  inputId: string;
+  value: string;
+  label: string;
+  required?: boolean;
+  pattern?: string;
+  options?: typeof stateTerritoryOrMilitaryPostList;
+  error?: FormError;
+  hint?: string;
+};
+
+export type AddressComponentProps = PatternProps<{
+  type: 'address';
+  errors?: {
+    physical?: FormError;
+    mailing?: FormError;
+  };
+  legend?: string;
+  required?: boolean;
+  addMailingAddress?: boolean;
+  isMailingAddressSameAsPhysical?: boolean;
+  childProps: Record<string, AddressFieldProps>;
+  _patternId?: string;
+}>;
+
 export type AttachmentProps = PatternProps<{
   type: 'attachment';
   inputId: string;
diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts
index 9adfe2cd4..dc359170f 100644
--- a/packages/forms/src/index.ts
+++ b/packages/forms/src/index.ts
@@ -9,6 +9,7 @@ export * from './response.js';
 export * from './session.js';
 export * from './types.js';
 export * from './util/base64.js';
+export * from './patterns/address/jurisdictions.js';
 export { type FormService, createFormService } from './services/index.js';
 export {
   defaultFormConfig,
diff --git a/packages/forms/src/pattern.ts b/packages/forms/src/pattern.ts
index 68ac75022..7b5e77cb7 100644
--- a/packages/forms/src/pattern.ts
+++ b/packages/forms/src/pattern.ts
@@ -202,7 +202,7 @@ export const aggregatePatternSessionValues = (
 ) => {
   const aggregatedValues = aggregateValuesByPrefix(values);
   if (patternConfig.parseUserInput) {
-    const compoundPatterns = ['repeater', 'name-input'];
+    const compoundPatterns = ['repeater', 'name-input', 'address'];
 
     const isCompoundPattern = compoundPatterns.includes(pattern.type);
     const patternValues = aggregatedValues[pattern.id];
diff --git a/packages/forms/src/patterns/address/address.test.ts b/packages/forms/src/patterns/address/address.test.ts
new file mode 100644
index 000000000..788b9f608
--- /dev/null
+++ b/packages/forms/src/patterns/address/address.test.ts
@@ -0,0 +1,106 @@
+import { describe, expect, it } from 'vitest';
+import { addressConfig, type AddressPattern } from './index';
+import { AddressSchema } from './index';
+
+describe('AddressPattern tests', () => {
+  describe('AddressSchema', () => {
+    it('should validate a complete and correct address', () => {
+      const validInput = {
+        physicalStreetAddress: '123 Main St',
+        physicalStreetAddress2: 'Apt 4B',
+        physicalCity: 'Anytown',
+        physicalStateTerritoryOrMilitaryPost: 'CA',
+        physicalZipCode: '12345',
+        physicalUrbanizationCode: 'URB123',
+        physicalGooglePlusCode: 'GPCODE',
+        mailingStreetAddress: '123 Main St',
+        mailingStreetAddress2: 'Apt 4B',
+        mailingCity: 'Anytown',
+        mailingStateTerritoryOrMilitaryPost: 'CA',
+        mailingZipCode: '12345',
+        mailingUrbanizationCode: 'URB123',
+      };
+
+      expect(AddressSchema.safeParse(validInput).success).toBe(true);
+    });
+
+    it('should fail validation for an incomplete address', () => {
+      const invalidInput = {
+        physicalStreetAddress: '',
+        physicalCity: '',
+        physicalStateTerritoryOrMilitaryPost: '',
+        physicalZipCode: '',
+        mailingStreetAddress: '',
+        mailingCity: '',
+        mailingStateTerritoryOrMilitaryPost: '',
+        mailingZipCode: '',
+      };
+
+      expect(AddressSchema.safeParse(invalidInput).success).toBe(false);
+    });
+  });
+
+  describe('addressConfig', () => {
+    it('should handle validation error for user input', () => {
+      const pattern: AddressPattern = {
+        type: 'address',
+        id: 'test-address',
+        data: {
+          legend: 'Test Address',
+          required: true,
+          addMailingAddress: true,
+        },
+      };
+
+      const inputValue = {
+        physicalStreetAddress: '',
+        physicalCity: '',
+        physicalStateTerritoryOrMilitaryPost: '',
+        physicalZipCode: '',
+        mailingStreetAddress: '',
+        mailingCity: '',
+        mailingStateTerritoryOrMilitaryPost: '',
+        mailingZipCode: '',
+      };
+
+      const result = addressConfig.parseUserInput!(pattern, inputValue);
+      if (!result.success) {
+        expect(result.error).toBeDefined();
+      } else {
+        expect.fail('Unexpected validation success');
+      }
+    });
+
+    it('should parse config data correctly', () => {
+      const obj = {
+        legend: 'Test Address Legend',
+        required: true,
+        addMailingAddress: true,
+      };
+
+      const result = addressConfig.parseConfigData(obj);
+      if (result.success) {
+        expect(result.data.legend).toBe('Test Address Legend');
+        expect(result.data.required).toBe(true);
+        expect(result.data.addMailingAddress).toBe(true);
+      } else {
+        expect.fail('Unexpected validation failure');
+      }
+    });
+
+    it('should handle invalid config data', () => {
+      const obj = {
+        legend: '',
+        required: true,
+        addMailingAddress: true,
+      };
+
+      const result = addressConfig.parseConfigData(obj);
+      if (!result.success) {
+        expect(result.error).toBeDefined();
+      } else {
+        expect.fail('Unexpected validation success');
+      }
+    });
+  });
+});
diff --git a/packages/forms/src/patterns/address/index.ts b/packages/forms/src/patterns/address/index.ts
index 05d72b391..bad98ff12 100644
--- a/packages/forms/src/patterns/address/index.ts
+++ b/packages/forms/src/patterns/address/index.ts
@@ -1,173 +1,276 @@
 import * as z from 'zod';
 
 import { type Pattern, type PatternConfig } from '../../pattern.js';
-import { PatternProps } from '../../components.js';
+import { AddressComponentProps } from '../../components.js';
+import { getFormSessionValue } from '../../session.js';
 import {
+  convertZodErrorToFormErrors,
   safeZodParseFormErrors,
-  safeZodParseToFormError,
 } from '../../util/zod.js';
-import {
-  stateTerritoryOrMilitaryPostAbbreviations,
-  stateTerritoryOrMilitaryPostList,
-} from './jurisdictions.js';
-import { getFormSessionValue } from '../../session.js';
+import { stateTerritoryOrMilitaryPostList } from './jurisdictions.js';
+import { FormError, FormErrors } from '../../error.js';
 
-export type AddressPattern = Pattern<{}>;
+export const AddressSchema = z.object({
+  physicalStreetAddress: z
+    .string()
+    .min(1, { message: 'Street address is required' })
+    .max(128, { message: 'Street address must be less than 128 characters' }),
+  physicalStreetAddress2: z
+    .string()
+    .max(128, {
+      message: 'Street address line 2 must be less than 128 characters',
+    })
+    .optional(),
+  physicalCity: z
+    .string()
+    .min(1, { message: 'City is required' })
+    .max(64, { message: 'City must be less than 64 characters' }),
+  physicalStateTerritoryOrMilitaryPost: z
+    .string()
+    .min(1, { message: 'State, territory, or military post is required' }),
+  physicalZipCode: z
+    .string()
+    .min(1, { message: 'ZIP code is required' })
+    .max(10, { message: 'ZIP code must be less than 10 characters' }),
+  physicalUrbanizationCode: z
+    .string()
+    .max(128, { message: 'Urbanization code must be less than 128 characters' })
+    .optional(),
+  physicalGooglePlusCode: z.string().max(8),
 
-export type AddressComponentProps = PatternProps<{
-  childProps: {
-    streetAddress: {
-      inputId: string;
-      value: string;
-      label: string;
-      required: boolean;
-      error?: string;
-    };
-    streetAddress2: {
-      inputId: string;
-      value: string;
-      label: string;
-      required: boolean;
-      error?: string;
-    };
-    city: {
-      inputId: string;
-      value: string;
-      label: string;
-      required: boolean;
-      error?: string;
-    };
-    stateTerritoryOrMilitaryPost: {
-      inputId: string;
-      value: string;
-      label: string;
-      required: boolean;
-      options: typeof stateTerritoryOrMilitaryPostList;
-      error?: string;
-    };
-    zipCode: {
-      inputId: string;
-      value: string;
-      label: string;
-      required: boolean;
-      error?: string;
+  mailingStreetAddress: z
+    .string()
+    .min(1, { message: 'Street address is required' })
+    .max(128, { message: 'Street address must be less than 128 characters' }),
+  mailingStreetAddress2: z
+    .string()
+    .max(128, {
+      message: 'Street address line 2 must be less than 128 characters',
+    })
+    .optional(),
+  mailingCity: z
+    .string()
+    .min(1, { message: 'City is required' })
+    .max(64, { message: 'City must be less than 64 characters' }),
+  mailingStateTerritoryOrMilitaryPost: z
+    .string()
+    .min(1, { message: 'State, territory, or military post is required' }),
+  mailingZipCode: z
+    .string()
+    .min(1, { message: 'ZIP code is required' })
+    .max(10, { message: 'ZIP code must be less than 10 characters' }),
+  mailingUrbanizationCode: z
+    .string()
+    .max(128, { message: 'Urbanization code must be less than 128 characters' })
+    .optional(),
+  isMailingAddressSameAsPhysical: z.string().optional(),
+});
+
+const configSchema = z.object({
+  legend: z.string().min(1),
+  required: z.boolean(),
+  addMailingAddress: z.boolean().optional(),
+});
+
+export type AddressPattern = Pattern<z.infer<typeof configSchema>>;
+
+export type AddressPatternOutput = z.infer<typeof AddressSchema>;
+
+const parseUserInput = (_: unknown, obj: z.infer<typeof AddressSchema>) => {
+  const result = AddressSchema.safeParse(obj);
+  if (result.success) {
+    return {
+      success: true,
+      data: result.data,
     };
-    urbanizationCode: {
-      inputId: string;
-      value: string;
-      label: string;
-      required: boolean;
-      error?: string;
+  } else {
+    const fieldErrors = convertZodErrorToFormErrors(result.error);
+
+    // Filter out fields with errors
+    const validData = Object.keys(obj).reduce(
+      (acc, key) => {
+        const typedKey = key as keyof z.infer<typeof AddressSchema>;
+        if (!fieldErrors[typedKey]) {
+          acc[typedKey] = obj[typedKey];
+        }
+        return acc;
+      },
+      {} as Partial<z.infer<typeof AddressSchema>>
+    );
+
+    return {
+      success: false,
+      error: {
+        type: 'custom',
+        fields: fieldErrors,
+      },
+      data: validData, // Only include non-error fields
     };
+  }
+};
+
+const parseConfigData = (obj: unknown) =>
+  safeZodParseFormErrors(configSchema, obj);
+
+const createPromptProps = (
+  sessionValue: Partial<z.infer<typeof AddressSchema>> | undefined,
+  pattern: { id: string },
+  error: FormErrors,
+  prefix: string
+) => {
+  const props = {
+    [`${prefix}StreetAddress`]: {
+      type: 'input' as const,
+      inputId: `${pattern.id}.${prefix}StreetAddress`,
+      value:
+        sessionValue?.[`${prefix}StreetAddress` as keyof typeof sessionValue] ??
+        '',
+      label: 'Street address',
+      required: prefix !== 'physical',
+      error: error?.[`${prefix}StreetAddress`],
+    },
+    [`${prefix}StreetAddress2`]: {
+      type: 'input' as const,
+      inputId: `${pattern.id}.${prefix}StreetAddress2`,
+      value:
+        sessionValue?.[
+          `${prefix}StreetAddress2` as keyof typeof sessionValue
+        ] ?? '',
+      label: 'Street address line 2',
+      required: false,
+      error: error?.[`${prefix}StreetAddress2`],
+    },
+    [`${prefix}City`]: {
+      type: 'input' as const,
+      inputId: `${pattern.id}.${prefix}City`,
+      value: sessionValue?.[`${prefix}City` as keyof typeof sessionValue] ?? '',
+      label: 'City',
+      required: true,
+      error: error?.[`${prefix}City`],
+    },
+    [`${prefix}StateTerritoryOrMilitaryPost`]: {
+      type: 'select' as const,
+      inputId: `${pattern.id}.${prefix}StateTerritoryOrMilitaryPost`,
+      value:
+        sessionValue?.[
+          `${prefix}StateTerritoryOrMilitaryPost` as keyof typeof sessionValue
+        ] ?? '',
+      label: 'State, territory, or military post',
+      required: true,
+      options: stateTerritoryOrMilitaryPostList,
+      error: error?.[`${prefix}StateTerritoryOrMilitaryPost`],
+    },
+    [`${prefix}ZipCode`]: {
+      type: 'input' as const,
+      inputId: `${pattern.id}.${prefix}ZipCode`,
+      value:
+        sessionValue?.[`${prefix}ZipCode` as keyof typeof sessionValue] ?? '',
+      label: 'ZIP code',
+      required: false,
+      error: error?.[`${prefix}ZipCode`],
+    },
+    [`${prefix}UrbanizationCode`]: {
+      type: 'input' as const,
+      inputId: `${pattern.id}.${prefix}UrbanizationCode`,
+      value:
+        sessionValue?.[
+          `${prefix}UrbanizationCode` as keyof typeof sessionValue
+        ] ?? '',
+      label: 'Urbanization (Puerto Rico only)',
+      required: false,
+      error: error?.[`${prefix}UrbanizationCode`],
+    },
   };
-}>;
-
-const AddressSchema = z.object({
-  steetAddress: z.string().max(128),
-  steetAddress2: z.string().max(128).optional(),
-  city: z.string().max(64),
-  stateTerritoryOrMilitaryPost: stateTerritoryOrMilitaryPostAbbreviations,
-  zipCode: z.string().max(10),
-  urbanizationCode: z.string().max(128).optional(),
-  //googlePlusCode: z.string().max(8),
-});
 
-type AddressPatternOutput = z.infer<typeof AddressSchema>;
+  if (prefix !== 'mailing') {
+    props[`${prefix}GooglePlusCode`] = {
+      type: 'input' as const,
+      inputId: `${pattern.id}.${prefix}GooglePlusCode`,
+      value:
+        sessionValue?.[
+          `${prefix}GooglePlusCode` as keyof typeof sessionValue
+        ] ?? '',
+      label: 'Google Plus Code',
+      required: false,
+      error: error?.[`${prefix}GooglePlusCode`],
+    };
+  }
 
-const configSchema = z.object({});
+  return props;
+};
 
 export const addressConfig: PatternConfig<
   AddressPattern,
   AddressPatternOutput
 > = {
-  displayName: 'Physical address',
-  iconPath: 'block-icon.svg',
+  displayName: 'Address',
+  iconPath: 'address-icon.svg',
   initial: {
-    patterns: [],
+    legend: 'Physical address',
+    required: true,
+    addMailingAddress: false,
   },
-  parseUserInput: (_, obj) => {
-    return safeZodParseToFormError(AddressSchema, obj);
-  },
-  parseConfigData: obj => safeZodParseFormErrors(configSchema, obj),
+  // @ts-ignore
+  parseUserInput,
+  parseConfigData,
   getChildren(pattern, patterns) {
     return [];
   },
   createPrompt(config, session, pattern, options) {
-    const sessionValue = getFormSessionValue(session, pattern.id);
-    const result = options.validate
-      ? AddressSchema.safeParse(sessionValue)
-      : null;
+    const sessionValue = getFormSessionValue(session, pattern.id) as Partial<
+      z.infer<typeof AddressSchema>
+    >;
+    const error = session.data.errors[pattern.id] as FormError;
+
+    // Separate errors for physical and mailing addresses
+    const physicalErrors = Object.fromEntries(
+      Object.entries(error?.fields || {}).filter(([key]) =>
+        key.startsWith('physical')
+      )
+    );
+
+    const mailingErrors = Object.fromEntries(
+      Object.entries(error?.fields || {}).filter(([key]) =>
+        key.startsWith('mailing')
+      )
+    );
+
     return {
       props: {
         _patternId: pattern.id,
         type: 'address',
         childProps: {
-          streetAddress: {
-            inputId: `${pattern.id}.streetAddress`,
-            value: sessionValue?.streetAddress,
-            label: 'Street address',
-            required: true,
-            error:
-              !result || result?.success
-                ? undefined
-                : result.error.formErrors.fieldErrors.steetAddress?.join(', '),
-          },
-          streetAddress2: {
-            inputId: `${pattern.id}.streetAddress2`,
-            value: sessionValue?.streetAddress2,
-            label: 'Street address line 2',
-            required: false,
-            error:
-              !result || result?.success
-                ? undefined
-                : result.error.formErrors.fieldErrors.steetAddress2?.join(', '),
-          },
-          city: {
-            inputId: `${pattern.id}.city`,
-            value: sessionValue?.city,
-            label: 'City',
-            required: true,
-            error:
-              !result || result?.success
-                ? undefined
-                : result.error.formErrors.fieldErrors.city?.join(', '),
-          },
-          stateTerritoryOrMilitaryPost: {
-            inputId: `${pattern.id}.city`,
-            value: sessionValue?.stateTerritoryOrMilitaryPost,
-            label: 'State, territory, or military post',
-            required: true,
-            options: stateTerritoryOrMilitaryPostList,
-            error:
-              !result || result?.success
-                ? undefined
-                : result.error.formErrors.fieldErrors.stateTerritoryOrMilitaryPost?.join(
-                    ', '
-                  ),
-          },
-          zipCode: {
-            inputId: `${pattern.id}.zipCode`,
-            value: sessionValue?.zipCode,
-            label: 'ZIP code',
-            required: true,
-            error:
-              !result || result?.success
-                ? undefined
-                : result.error.formErrors.fieldErrors.zipCode?.join(', '),
-          },
-          urbanizationCode: {
-            inputId: `${pattern.id}.urbanizationCode`,
-            value: sessionValue?.urbanizationCode,
-            label: 'Urbanization (Puerto Rico only)',
-            required: false,
-            error:
-              !result || result?.success
-                ? undefined
-                : result.error.formErrors.fieldErrors.urbanizationCode?.join(
-                    ', '
-                  ),
-          },
+          ...createPromptProps(
+            sessionValue,
+            pattern,
+            physicalErrors,
+            'physical'
+          ),
+          ...(pattern.data.addMailingAddress
+            ? createPromptProps(sessionValue, pattern, mailingErrors, 'mailing')
+            : {}),
+        },
+        errors: {
+          physical:
+            Object.keys(physicalErrors).length > 0
+              ? {
+                  type: 'custom',
+                  message: 'All required fields must be filled out',
+                }
+              : undefined,
+          mailing:
+            Object.keys(mailingErrors).length > 0
+              ? {
+                  type: 'custom',
+                  message: 'All required fields must be filled out',
+                }
+              : undefined,
         },
+        legend: pattern.data.legend,
+        required: pattern.data.required,
+        addMailingAddress: pattern.data.addMailingAddress,
+        isMailingAddressSameAsPhysical:
+          sessionValue?.isMailingAddressSameAsPhysical === 'on',
       } satisfies AddressComponentProps,
       children: [],
     };
diff --git a/packages/forms/src/patterns/package-download/index.ts b/packages/forms/src/patterns/package-download/index.ts
index 5f8d642c9..a40b77302 100644
--- a/packages/forms/src/patterns/package-download/index.ts
+++ b/packages/forms/src/patterns/package-download/index.ts
@@ -12,7 +12,7 @@ export type PackageDownloadPattern = Pattern<z.infer<typeof configSchema>>;
 
 export const packageDownloadConfig: PatternConfig<PackageDownloadPattern> = {
   displayName: 'Package download',
-  iconPath: 'block-icon.svg',
+  iconPath: 'package-download-icon.svg',
   initial: {
     text: 'Description text...',
   },
diff --git a/packages/forms/src/patterns/repeater/index.ts b/packages/forms/src/patterns/repeater/index.ts
index cb9a136e3..5900c7bc1 100644
--- a/packages/forms/src/patterns/repeater/index.ts
+++ b/packages/forms/src/patterns/repeater/index.ts
@@ -81,7 +81,7 @@ export const repeaterConfig: PatternConfig<RepeaterPattern> = {
     patterns: [],
     showControls: true,
   },
-  // @ts-ignore
+
   parseUserInput: ((
     pattern: RepeaterPattern,
     input: unknown,
diff --git a/packages/forms/src/patterns/repeater/submit.ts b/packages/forms/src/patterns/repeater/submit.ts
index a1e6dc336..5f14db2ce 100644
--- a/packages/forms/src/patterns/repeater/submit.ts
+++ b/packages/forms/src/patterns/repeater/submit.ts
@@ -36,8 +36,6 @@ export const repeaterAddRowHandler: SubmitHandler<RepeaterPattern> = async (
     ...opts.session.data.values,
     [opts.pattern.id]: Object.freeze([...repeaterPatternData, ...newRows]),
   };
-
-  console.log('TEST newValues in submit', newValues);
   // Only create new session object if values actually changed
   if (
     opts.session.data.values[opts.pattern.id] !== newValues[opts.pattern.id]